:root{
  --bg:#f4f4f2; --card:#ffffff; --fg:#1b1b1f; --muted:#5f6368; --line:#d9d9d6;
  --k:#3cb371; --t:#ff4500; --ok:#1e8e3e; --ng:#c5221f; --accent:#1b3a6b; --accent-fg:#fff;
  --radius:14px; --gutter:16px;
  --pad:16px;       /* カードの内側余白 */
  --gap:10px;       /* カード内の縦の間隔 */
  --opt-h:48px;     /* 選択肢の最小の高さ */
  --fig-map-min:200px; --fig-trend-min:140px; --fig-photo-min:150px; /* 出題の図の最小の高さ */
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#121316; --card:#1d1f24; --fg:#ececf0; --muted:#a0a4ad; --line:#33363d; --accent:#8fb3ff; --accent-fg:#101420;
  }
}
:root[data-theme="dark"]{ --bg:#121316; --card:#1d1f24; --fg:#ececf0; --muted:#a0a4ad; --line:#33363d; --accent:#8fb3ff; --accent-fg:#101420; }
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:"Hiragino Sans","Noto Sans JP",system-ui,sans-serif;line-height:1.5}
a{color:inherit}

/* ---- 画面の骨格: ヘッダー / ゲーム領域 / フッターで画面の高さちょうど（ページはスクロールさせない） ----
   ゲーム領域（main）は残りの高さを受け取り、中のカードは「縮められる部分」（図・解説・内訳）だけが縮む。
   選択肢やボタンは縮めない（flex-shrink:0）ので、常に画面内に全体が出る。 */
body{display:flex;flex-direction:column;height:100vh;height:100dvh}
.top{flex:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;padding:8px var(--gutter);border-bottom:1px solid var(--line);background:var(--card)}
main{flex:1 1 auto;min-height:0;width:100%;max-width:640px;margin:0 auto;padding:10px var(--gutter);display:flex;flex-direction:column}
.credits{flex:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 12px;padding:4px var(--gutter) max(4px,env(safe-area-inset-bottom));font-size:11px;color:var(--muted)}

.brand{display:flex;align-items:center;gap:8px}
.brand h1{font-size:16px;line-height:1.15;margin:0}
.brand h1 small{font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.08em}
.dot{width:14px;height:14px;border-radius:50%;display:inline-block}
.dot.k{background:var(--k)} .dot.t{background:var(--t);margin-left:-6px}
.progress{flex:1;max-width:220px;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.progress .bar{flex:1;height:6px;background:var(--line);border-radius:3px;overflow:hidden;position:relative}
.progress .bar::after{content:"";position:absolute;inset:0;width:var(--p,0%);background:linear-gradient(90deg,var(--k),var(--t));transition:width .3s}
.progress .bar[hidden]{display:none}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:var(--pad)}
main > .card{flex:0 1 auto;min-height:0;display:flex;flex-direction:column;gap:var(--gap)}
main > .card > *,.q-main > *,.q-side > *,.r-main > *,.r-side > *{flex-shrink:0;margin-top:0;margin-bottom:0}
/* 1 カラムのときは q-main / q-side を透過させ、子要素をカードの flex に直接並べる */
.q-main,.q-side,.r-main,.r-side{display:contents}

.type{align-self:flex-start;display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 10px}
.type[data-src="lod"]{border-color:var(--k)} .type[data-src="city"]{border-color:var(--t)} .type[data-src="dbpedia"]{border-color:#7a5af5}
.prompt{font-size:19px;line-height:1.4;font-weight:700;margin:0}
.prompt .st{white-space:nowrap}
.prompt small{display:block;font-size:13px;font-weight:500;color:var(--muted)}
.badge{display:inline-block;font-size:12px;font-weight:700;color:#fff;border-radius:6px;padding:1px 7px;vertical-align:middle;margin-right:4px}

/* 図（路線図・折れ線・写真）: 残りの高さに合わせて縮む。縦横比は保つ。
   ただし図は問題そのものなので、読める大きさ（--fig-*-min）より小さくはしない。
   折れ線は目盛りの文字（viewBox 上 10px）が 8px 以上、路線図は駅の丸が見分けられる大きさを下限にしている。
   tools/measure-fit.mjs と e2e の「図の大きさ」判定（FIG_MIN）は、ここと同じ値・同じ条件（通常 / 回答後 / 高さ 500px 以下）で下限を引く。値を変えたら両方を合わせる。 */
.visual{margin:0;display:flex;flex-direction:column;gap:2px;min-height:0}
main > .card .visual,.q-main > .visual{flex:0 1 auto;min-height:72px}
.visual > svg,.visual > img{flex:1 1 auto;min-height:0;width:100%;max-height:100%;object-fit:contain}
/* 下限は図（figure）に付ける。中の svg / img は figure の高さいっぱいに縮むので、+22px はキャプション 1 行（20px）と間隔（2px）の分。
   セレクタは上の「main > .card .visual」より詳細度を高くしておく（低いと 72px の方が勝って下限が効かない） */
.q-main > .visual.fig-map{min-height:calc(var(--fig-map-min) + 22px)}
.q-main > .visual.fig-trend{min-height:calc(var(--fig-trend-min) + 22px)}
.q-main > .visual.fig-photo{min-height:calc(var(--fig-photo-min) + 22px)}
.visual figcaption{flex:none}
/* 出題の図のキャプションは 1 行（20px）に固定する。折り返すと図の下限が想定より削られるため */
.q-main > .visual figcaption{margin:0;height:20px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
svg.map{display:block;height:auto;background:color-mix(in srgb,var(--fg) 4%,var(--card));border-radius:10px}
svg.spark{display:block;height:auto}
.photo{display:block;height:auto;aspect-ratio:3/2;object-fit:cover !important;border-radius:10px;background:color-mix(in srgb,var(--fg) 6%,var(--card))}
.photo-error{display:block;font-size:14px;font-weight:600;color:var(--ng);margin-top:6px}

.options{display:grid;gap:8px;grid-template-columns:1fr}
.options.two,.options.grid{grid-template-columns:1fr 1fr}
.opt{appearance:none;border:2px solid var(--line);background:var(--card);color:var(--fg);border-radius:12px;padding:10px 12px;font-size:17px;font-weight:600;line-height:1.3;text-align:left;cursor:pointer;min-height:var(--opt-h);transition:border-color .15s,transform .05s}
.opt:hover{border-color:var(--accent)} .opt:active{transform:scale(.99)}
.opt[disabled]{cursor:default}
.opt.correct{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,var(--card))}
.opt.wrong{border-color:var(--ng);background:color-mix(in srgb,var(--ng) 12%,var(--card))}
.opt .sub{display:block;font-size:12px;color:var(--muted);font-weight:500}

.btn{appearance:none;border:0;background:var(--accent);color:var(--accent-fg);font-weight:700;font-size:17px;border-radius:12px;padding:12px 20px;cursor:pointer;width:100%}
.btn.secondary{background:transparent;color:var(--fg);border:2px solid var(--line)}
.btn[disabled]{opacity:.5;cursor:default}
.btn-row{display:flex;gap:8px}
.btn-row .btn{flex:1 1 0}
button.link{appearance:none;border:0;background:none;padding:2px 0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}

.hintbox{display:flex;flex-direction:column;gap:6px}
.hint-list{margin:0;padding-left:22px;font-size:14px}
.hint-list li{margin:2px 0}
.hint-list:empty{display:none}
.hint-btn{font-size:15px;padding:9px 14px}

/* ---- 回答後: 選択肢を 2 列に詰め、解説を残りの高さに収める（長いときだけ解説欄の中でスクロール）。
   図は答えを書き込んだもの（q.reveal）に差し替えて残す。答え合わせで図を見返せることがこのジャンルの面白さなので隠さない ---- */
/* 回答後は図・選択肢・解説・次へが同時に並ぶので、路線図だけ下限を下げる（駅名を書き込んだ図なので小さくても答えは読める）。
   折れ線は目盛りが読めなくなるので下げない */
.answered{--fig-map-min:150px}
/* 高さが足りないときは、解説より先に図を下限まで縮める（flex の縮み方は基準の高さ×flex-shrink に比例するので、図の値を大きくする） */
.answered .q-main > .visual{flex-shrink:50}
.answered .options{grid-template-columns:1fr 1fr;gap:6px}
.answered .opt{min-height:0;padding:6px 10px;font-size:15px}
.answered .hint-list{font-size:13px}
.answered .feedback-slot{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.feedback{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:6px;padding-top:8px;border-top:1px dashed var(--line)}
.feedback > *{flex-shrink:0;margin:0}
.feedback .verdict{font-size:18px;font-weight:800;line-height:1.35}
.feedback .verdict.ok{color:var(--ok)} .feedback .verdict.ng{color:var(--ng)}
.explain-scroll{flex:0 1 auto !important;min-height:48px;overflow-y:auto;overscroll-behavior:contain;font-size:15px}
.explain p{margin:4px 0}
.explain ul{margin:4px 0;padding-left:20px}
.explain .visual{margin-top:4px}
.explain svg.spark{max-height:min(110px,18dvh);width:auto;max-width:100%}
.thumb{display:block;width:100%;max-height:min(160px,20dvh);object-fit:cover;border-radius:10px;margin-top:6px}
.sources{font-size:12px;color:var(--muted);margin:4px 0 0}
.sources a{word-break:break-all}
.pts{font-size:14px}
.endless-note{font-size:14px;color:var(--muted)} .endless-note.ng{color:var(--ng)}

/* ---- ホーム ---- */
.lead{font-size:15px;color:var(--muted);margin:0}
.lead.center{text-align:center}
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mode{appearance:none;border:2px solid var(--line);background:var(--card);color:var(--fg);border-radius:12px;padding:10px 4px;cursor:pointer;font:inherit;font-size:16px;font-weight:700;text-align:center}
.mode[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--card))}
.mode-desc{font-size:13px;color:var(--muted);margin:6px 2px 0;min-height:2.9em}
#mode-area{display:flex;flex-direction:column;gap:0}
.notice{border:1px dashed var(--t);border-radius:12px;padding:8px 12px;margin-top:8px;font-size:14px;display:flex;flex-direction:column;gap:6px}
.notice p{margin:0}
.notice .btn{padding:8px 12px;font-size:15px}
pre.grid{margin:0;padding:8px 12px;background:color-mix(in srgb,var(--fg) 5%,var(--card));border-radius:10px;font:inherit;font-size:14px;line-height:1.45;white-space:pre-wrap;word-break:break-all}
/* ジャンル選択は開くと長いので、カードの残りの高さの中でスクロールさせる（見出しは上に固定） */
details.genres{border:1px solid var(--line);border-radius:10px;padding:0 10px}
details.genres[open]{flex:0 1 auto !important;min-height:0;overflow-y:auto;overscroll-behavior:contain}
details.genres summary{position:sticky;top:0;background:var(--card);padding:8px 0;cursor:pointer;font-weight:600;font-size:15px}
.genre-body{padding-bottom:10px}
.types{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
.types label{display:flex;gap:8px;align-items:flex-start;font-size:14px;border:1px solid var(--line);border-radius:10px;padding:6px 8px}
.types label small{display:block;color:var(--muted);font-size:11px}

/* ---- 結果 ---- */
.score{font-size:44px;font-weight:900;text-align:center;line-height:1.1;margin:0}
.score small{font-size:18px;color:var(--muted)}
.pts-total{text-align:center;font-size:18px;margin:0}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.stats div{border:1px solid var(--line);border-radius:10px;padding:6px 4px}
.stats span{display:block;font-size:12px;color:var(--muted)}
.stats b{font-size:24px;font-variant-numeric:tabular-nums}
.grid-title{font-size:14px;color:var(--muted);margin:0;text-align:center}
.breakdown-scroll{flex:0 1 auto !important;min-height:64px;overflow-y:auto;overscroll-behavior:contain}
table.breakdown{width:100%;border-collapse:collapse;font-size:14px}
table.breakdown td{padding:4px 4px;border-bottom:1px solid var(--line)}
table.breakdown td:last-child{text-align:right;font-variant-numeric:tabular-nums}

/* ---- HUD（エンドレス） ---- */
.hud{flex-basis:100%;display:flex;flex-wrap:wrap;gap:2px 16px;align-items:center;font-size:14px;font-weight:700}
.hud[hidden]{display:none}
.hud-item b{font-size:16px;font-variant-numeric:tabular-nums}
.heart{font-size:17px;letter-spacing:2px}
.heart.on{color:var(--ng)} .heart.off{color:var(--muted)}
.mult{font-style:normal;margin-left:4px;color:var(--t);font-weight:800}
.practice{font-size:13px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:2px 12px;display:inline-block;margin:0 0 6px;align-self:flex-start;flex:none}

/* ---- 出典ダイアログ ---- */
.credits-dialog{border:1px solid var(--line);border-radius:var(--radius);padding:0;background:var(--card);color:var(--fg);max-width:min(560px,calc(100vw - 2 * var(--gutter)));max-height:calc(100dvh - 2 * var(--gutter))}
.credits-dialog::backdrop{background:rgb(0 0 0 / .45)}
.credits-inner{padding:var(--pad);font-size:14px}
.credits-inner h2{font-size:17px;margin:0 0 8px}
.credits-inner .btn{margin-top:8px}

.sr{position:absolute;left:-9999px}

/* 1 カラムの回答後はジャンル名のラベルを隠し、その分を図と解説に回す（問題文が残るので何の問題かは分かる）。横長の 2 カラムでは戻す */
.answered .type{display:none}

/* ---- 狭い・低い画面: 文字と余白を詰める ---- */
@media (max-width:420px){
  :root{--gutter:12px;--pad:14px}
  .prompt{font-size:17px}
  .opt{font-size:16px}
  .options.two{grid-template-columns:1fr}
  .answered .options.two{grid-template-columns:1fr 1fr}
}
@media (max-height:760px){
  :root{--pad:12px;--gap:8px;--opt-h:44px}
  /* 回答後は開いたヒントの一覧を畳み、図と解説に場所を回す（使ったヒントの個数は得点の行に出る） */
  .answered .hint-list{display:none}
  main{padding-top:8px;padding-bottom:6px}
  .prompt{font-size:17px}
  .opt{padding:8px 12px;font-size:16px}
  .btn{padding:10px 16px;font-size:16px}
  .hint-btn{padding:7px 12px;font-size:14px}
  .lead{font-size:14px}
  .mode{padding:8px 4px}
}
@media (max-height:680px){
  .lead{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
}

/* ---- 横長の画面（タブレット横・PC・スマホ横）: 問題と図を左、選択肢・解説・ボタンを右の 2 カラムに ---- */
@media (min-width:700px) and (min-aspect-ratio:5/4){
  main{max-width:1120px}
  main > [data-testid="question"],main > [data-testid="result"]{flex-direction:row;gap:20px;align-items:stretch}
  .q-main,.q-side,.r-main,.r-side{display:flex;flex-direction:column;gap:var(--gap);min-height:0;min-width:0}
  .q-main,.r-main{flex:1.15 1 0}
  .q-side,.r-side{flex:1 1 0}
  .q-main > .visual{flex:1 1 auto;min-height:0}
  .answered .options{grid-template-columns:1fr 1fr}
  .answered .type{display:inline-block}
  .r-main{justify-content:center}
  .r-side .breakdown-scroll{flex:0 1 auto}
  main > [data-testid="home"]{max-width:640px;width:100%;align-self:center}
}
/* スマホ横（高さがとても低い）: ヘッダーを 1 行に詰め、選択肢を低くする */
@media (max-height:500px){
  :root{--pad:10px;--gap:6px;--opt-h:36px;--fig-map-min:150px;--fig-photo-min:120px}
  .top{padding:4px var(--gutter)}
  .brand h1{font-size:14px}
  .brand h1 br,.brand h1 small{display:none}
  main{padding-top:6px;padding-bottom:4px}
  .type,.answered .type{display:none}
  .prompt{font-size:15px}
  .prompt small{font-size:12px}
  .opt{padding:5px 10px;font-size:15px}
  .opt .sub{font-size:11px}
  .btn{padding:7px 14px;font-size:15px}
  .hint-btn{padding:5px 10px;font-size:13px}
  .lead{font-size:13px;-webkit-line-clamp:2}
  .mode{padding:6px 4px;font-size:15px}
  .mode-desc{min-height:0}
  .feedback .verdict{font-size:16px}
  .explain-scroll{font-size:14px}
  .score{font-size:34px}
  .stats b{font-size:20px}
  .options{gap:6px}
}
/* 横長で図の無い問題は、左カラム（問題文だけ）を細くして右の解説に幅を回す */
@media (min-width:700px) and (min-aspect-ratio:5/4){
  [data-testid="question"]:not(:has(.q-main > .visual)) .q-main{flex:0.6 1 0}
}
/* スマホ横でデイリーのプレイ済み表示が出るときは、説明文を省いて開始ボタンを画面内に残す */
@media (max-height:500px){
  [data-testid="home"]:has(.notice) .lead{display:none}
}