/* 共通テーマ：全ページで使う色・フォント・ゲーム画面の土台・「トップへ戻る」リンク */
:root{
  --bg:#eef1f6; --fg:#1d2433; --muted:#6b7488; --card:#ffffff; --hl:#f0b429;
  --p1:#2f5bd3; --p2:#d9466f; --p1-soft:rgba(47,91,211,.18); --p2-soft:rgba(217,70,111,.18);
  --font:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Hiragino Sans",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#141824; --fg:#e8ecf4; --muted:#8e97ab; --card:#1c2130;
  --p1:#6f92ff; --p2:#ff7096; --p1-soft:rgba(111,146,255,.22); --p2-soft:rgba(255,112,150,.22); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#141824; --fg:#e8ecf4; --muted:#8e97ab; --card:#1c2130;
  --p1:#6f92ff; --p2:#ff7096; --p1-soft:rgba(111,146,255,.22); --p2-soft:rgba(255,112,150,.22); color-scheme:dark}

body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font)}

/* ゲーム画面：<main class="game"> が1画面ぶんの高さ。解説文（.guide）はその下にスクロールして読む */
.game{min-height:100vh;min-height:100svh;margin:0 auto;max-width:480px;box-sizing:border-box;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:8px 12px;
  display:flex;flex-direction:column;gap:12px;-webkit-tap-highlight-color:transparent;user-select:none}

/* 左上の「トップへ戻る」 */
.back{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin-left:-10px;padding:6px 12px 6px 10px;
  border-radius:999px;color:var(--muted);font-family:var(--font);font-size:13px;font-weight:800;text-decoration:none;
  transition:color .15s,background-color .15s}
.back svg{width:14px;height:14px}
.back:hover{color:var(--fg);background:var(--card)}
.back:focus-visible{outline:2px solid var(--hl);outline-offset:2px}

/* PC・横長画面：盤面（.stage）を左、点数や操作（.top / .bottom）を右に並べる。
   スマホでは .top / .bottom は display:contents なので、今までどおりの縦1列。 */
.top,.bottom{display:contents}
@media (min-width:880px) and (min-aspect-ratio:1/1){
  .game.split{max-width:1180px;display:grid;grid-template-columns:minmax(0,1fr) 360px;
    grid-template-rows:auto auto auto 1fr;column-gap:40px;row-gap:16px;padding-block:16px 24px}
  .game.split > .back{grid-column:1/-1}
  .game.split > .stage{grid-column:1;grid-row:2/5;align-self:center;justify-self:center;width:100%}
  .game.split > .top,.game.split > .bottom{grid-column:2;display:flex;flex-direction:column;gap:14px}
  .game.split > .bottom{grid-row:3}
}

/* ゲーム画面の下の解説文：遊び方・コツ・よくある質問 */
.guide{max-width:720px;margin:0 auto;box-sizing:border-box;
  padding:48px max(16px,env(safe-area-inset-right,0px)) 56px max(16px,env(safe-area-inset-left,0px));
  font-size:15px;line-height:1.85;color:var(--fg)}
.guide h1{font-size:24px;font-weight:800;line-height:1.4;margin:0 0 12px}
.guide .intro{margin:0 0 8px;color:var(--muted)}
.guide section{background:var(--guide-panel,var(--card));border-radius:18px;padding:20px 20px 8px;margin-top:20px}
.guide h2{font-size:18px;font-weight:800;margin:0 0 10px;display:flex;align-items:center;gap:8px}
.guide h2::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--p1);box-shadow:5px 0 0 var(--p2);margin-right:6px;flex:none}
.guide h3{font-size:15px;font-weight:800;margin:16px 0 4px}
.guide ol,.guide ul{margin:0 0 14px;padding-left:1.4em}
.guide li{margin:4px 0}
.guide li b,.guide p b{font-weight:800}
.guide p{margin:0 0 14px}
.guide dl{margin:0}
.guide dt{font-weight:800;margin-top:4px}
.guide dt::before{content:"Q. ";color:var(--p1)}
.guide dd{margin:4px 0 16px;color:var(--muted)}
.guide dd::before{content:"A. ";color:var(--p2);font-weight:800}
.guide .more ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.guide .more a{display:inline-block;padding:6px 14px;border-radius:999px;background:var(--bg);color:var(--fg);font-size:14px;font-weight:800;text-decoration:none}
.guide .more a:hover{color:var(--p1)}
.guide .more a:focus-visible{outline:2px solid var(--hl);outline-offset:2px}