/* 質感は「素数ガチャ」に合わせる：方眼紙の背景・紺のインク線・ずらし影・小さな角丸・等幅数字 */
:root{
  --bg:#f3f5f8; --grid:rgba(30,50,90,.07); --card:#fff; --text:#17233c; --sub:#5d6b86;
  --ink:#17233c; --line:#c9d1df; --hit:#eef3fb; --accent:#1c3d7a;
  --ok:#1e9e4a; --ng:#d6342c;
  --sans:"Meiryo UI","メイリオ",Meiryo,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI",sans-serif;
  --mono:"IBM Plex Mono","Consolas",monospace;
  --serif:"STIX Two Text","Cambria Math","Times New Roman",serif;
  font-family:var(--sans);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0c1a33; --grid:rgba(150,190,255,.08); --card:#112245; --text:#e6edfb; --sub:#93a4c6;
    --ink:#e6edfb; --line:#2b4270; --hit:#1a2e57; --accent:#6c9bff;
    --ok:#4cc87a; --ng:#ff6b62;
  }
}
*{box-sizing:border-box}
html{scrollbar-gutter:stable}
body{
  margin:0;color:var(--text);-webkit-text-size-adjust:100%;min-height:100vh;
  background-color:var(--bg);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:24px 24px;
}
main{max-width:520px;margin:0 auto;padding:16px 14px 48px}
[hidden]{display:none!important}

.top{text-align:center;padding:14px 0 18px}
.top h1{margin:0 0 2px;font-weight:700;font-size:1.5rem;color:var(--ink);font-family:var(--sans);letter-spacing:.04em;white-space:nowrap}
.top .sub{margin:0;color:var(--sub);font-size:.8rem}

.card{background:var(--card);border:1px solid var(--ink);border-radius:6px;box-shadow:6px 6px 0 var(--line);padding:16px 16px 14px;margin-bottom:22px}
.card h2{margin:0 0 12px;font-size:.78rem;font-weight:600;color:var(--sub);font-family:var(--mono);letter-spacing:.08em;
  padding-bottom:6px;border-bottom:1px dashed var(--line)}
.row{display:flex;align-items:center;gap:10px;margin:10px 0;flex-wrap:wrap}
.lbl{width:70px;font-size:.85rem;color:var(--sub)}
.btns{margin-top:14px}
.note{font-size:.75rem;color:var(--sub);margin:8px 0 0;line-height:1.6}
.chk{display:block;margin:12px 0 4px;font-size:.88rem}
.chk input,.lineitem input{accent-color:var(--ink)}

button{
  font:inherit;padding:9px 14px;border:1px solid var(--ink);background:var(--card);color:var(--ink);border-radius:4px;
  cursor:pointer;font-weight:700;letter-spacing:.04em;
}
button:disabled{opacity:.45;cursor:default}
.btns button,button.big,.choices button,.inputrow button{box-shadow:3px 3px 0 var(--line);transition:transform .08s,box-shadow .08s}
.btns button:hover:not(:disabled),button.big:hover:not(:disabled),.choices button:hover:not(:disabled),.inputrow button:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--line)}
.btns button:active:not(:disabled),button.big:active:not(:disabled),.choices button:active:not(:disabled),.inputrow button:active:not(:disabled){transform:translate(3px,3px);box-shadow:0 0 0 var(--line)}
button.primary{background:var(--ink);color:var(--card)}
button.big{width:100%;padding:14px;font-size:1.05rem;margin-top:12px}
button.danger{color:var(--ng);border-color:var(--ng)}
button.ghost{border:none;background:none;box-shadow:none;color:var(--sub);padding:6px;font-weight:500}
.seg{display:flex;flex:1}
.seg button{flex:1;border-radius:0;margin-left:-1px;padding:8px 4px;font-size:.85rem;font-weight:500;letter-spacing:0}
.seg button:first-child{border-radius:4px 0 0 4px;margin-left:0}
.seg button:last-child{border-radius:0 4px 4px 0}
.seg button:disabled{font-family:var(--mono);font-size:.7rem;letter-spacing:.02em;border-style:dashed;background:transparent}
.seg button.on{background:var(--ink);color:var(--card);font-weight:700;z-index:1}

.linelist .region{font-size:.7rem;color:var(--sub);margin:8px 0 4px;font-family:var(--mono);letter-spacing:.08em}
.lineitem{display:flex;align-items:center;gap:10px;padding:8px 8px;border:1px solid var(--line);border-radius:3px;font-size:.95rem;background:var(--hit)}
.lineitem input{width:20px;height:20px}
.lineitem .dot{width:14px;height:14px;border-radius:2px;flex:none;border:1px solid var(--ink)}
.lineitem small{color:var(--sub);font-family:var(--mono)}

.summary{display:flex;gap:8px;margin-bottom:10px}
.summary div{flex:1;background:var(--hit);border:1px solid var(--line);border-left:3px solid var(--ink);border-radius:3px;padding:8px;text-align:center;font-size:.7rem;color:var(--sub)}
.summary b{display:block;font-size:1.25rem;color:var(--ink);font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums}
details summary{cursor:pointer;font-weight:700;font-size:.85rem;color:var(--ink)}
#statTable table{width:100%;border-collapse:collapse;font-size:.8rem;margin-top:8px}
#statTable th,#statTable td{padding:5px 4px;border-bottom:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums}
#statTable th:first-child,#statTable td:first-child{text-align:left}
#statTable th{color:var(--sub);font-weight:500}

.qhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:.85rem;color:var(--sub);font-family:var(--mono)}

/* ===== 駅名標 ===== */
/* 実物の写真を参照して作成（JR東日本＝山手線、札幌市営地下鉄＝南北線・東西線・東豊線）。
   寸法はすべて #sign の幅に対する cqw。実物は約4.5:1だが、スマホで読めるよう 3.2:1 にしている。 */
#sign{container-type:inline-size;margin-bottom:16px}
.sign-cap{display:flex;align-items:center;margin:0 0 6px 2px;font-size:.85rem;font-weight:700;color:var(--ink);line-height:1.3}
.sign-cap i{flex:none;width:5px;height:1.2em;border-radius:1px;background:var(--c);margin-right:8px}
.sign{position:relative;aspect-ratio:3.2/1;box-sizing:border-box;overflow:hidden;box-shadow:6px 6px 0 var(--line);
  font-family:"Shin Go","新ゴ","Shin Go R","Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif}
.sign .kanji,.sign .jr-name .kana{white-space:nowrap}
/* 駅名の大きさ（文字数別）。2〜3文字は実物のように字間を広げる */
.sign-jr .nm-s1{font-size:8cqw;letter-spacing:.3em;margin-right:-.3em}
.sign-jr .nm-s2{font-size:7.4cqw;letter-spacing:.1em;margin-right:-.1em}
.sign-jr .nm-s3{font-size:6.6cqw}
.sign-jr .nm-s4{font-size:5.8cqw}
.sign-jr .nm-s5{font-size:5.2cqw}
.sign-sp .nm-s1{font-size:6.8cqw;letter-spacing:.3em;margin-right:-.3em}
.sign-sp .nm-s2{font-size:6.4cqw;letter-spacing:.1em;margin-right:-.1em}
.sign-sp .nm-s3{font-size:5.8cqw}
.sign-sp .nm-s4{font-size:5.2cqw}
.sign-sp .nm-s5{font-size:4.6cqw}

/* --- JR東日本：白地、路線色の帯、ナンバリング札 --- */
.sign-jr{background:#f4f4f9;border:.9cqw solid #1d1d1f;border-radius:1cqw;color:#111}
.sign-jr .jr-badge{position:absolute;left:2cqw;top:1.2cqw;width:8cqw;height:10.6cqw;border-radius:1cqw;text-align:center}
.sign-jr .jr-badge.has-code{background:#2a2a2a}
.sign-jr .jr-badge .code{display:block;height:3.2cqw;line-height:3.4cqw;font-size:2.4cqw;font-weight:700;color:#fff;letter-spacing:.05em}
.sign-jr .jr-badge .box{position:absolute;left:.6cqw;right:.6cqw;bottom:.6cqw;height:7.2cqw;background:#fff;border:.8cqw solid var(--c);border-radius:.9cqw;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;font-weight:700;color:#111}
.sign-jr .jr-badge .box .sym{font-size:2.4cqw}
.sign-jr .jr-badge .box .num{font-size:4.2cqw;margin-top:.2cqw}
.sign-jr .jr-name{position:absolute;left:12cqw;right:12cqw;top:.6cqw;text-align:center}
.sign-jr .jr-name .kanji{font-weight:700;line-height:1.05}
.sign-jr .jr-name .kana{font-size:2.6cqw;letter-spacing:.2em;line-height:1.25;color:#222}
.sign-jr .jr-marks{position:absolute;right:2.2cqw;top:1.6cqw;display:flex;gap:.8cqw}
.sign-jr .jr-marks b{width:4cqw;height:4cqw;border:.35cqw solid #111;border-radius:.4cqw;background:#fff;display:flex;align-items:center;justify-content:center;font-size:2.8cqw;line-height:1}
.sign-jr .jr-band{position:absolute;left:1.4cqw;right:1.4cqw;top:14.2cqw;height:6.6cqw;background:var(--band);
  clip-path:polygon(0 0,calc(100% - 3.4cqw) 0,100% 50%,calc(100% - 3.4cqw) 100%,0 100%);color:#fff;font-weight:700}
.sign-jr .jr-band .blk{position:absolute;left:calc(50% - 2.4cqw);width:4.8cqw;top:0;bottom:0;background:var(--light)}
.sign-jr .jr-band .l,.sign-jr .jr-band .r{position:absolute;top:0;line-height:6.6cqw;font-size:4.4cqw;white-space:nowrap}
.sign-jr .jr-band .l{left:1.6cqw}
.sign-jr .jr-band .r{right:5.4cqw}
.sign-jr .jr-band .lg{font-size:3.2cqw}
.sign-jr .jr-row{position:absolute;left:2.6cqw;right:2.6cqw;top:21.6cqw;height:6cqw;font-size:2.9cqw;line-height:3.4cqw;font-family:Helvetica,"Helvetica Neue",Arial,"Zen Kaku Gothic New",sans-serif}
.sign-jr .jr-row .l{position:absolute;left:0;top:0;white-space:nowrap}
.sign-jr .jr-row .c{position:absolute;left:0;right:0;top:-.1cqw;text-align:center;font-weight:700;font-size:3.3cqw;white-space:nowrap}
.sign-jr .jr-row .r{position:absolute;right:0;top:0;display:flex;align-items:center;gap:1cqw;white-space:nowrap}
.sign-jr .jr-row .mini{display:flex;flex-direction:column;align-items:center;justify-content:center;width:4.2cqw;height:4.6cqw;border:.5cqw solid var(--c);border-radius:.6cqw;background:#fff;
  font-weight:700;line-height:1;color:#111}
.sign-jr .jr-row .mini span:first-child{font-size:1.5cqw}
.sign-jr .jr-row .mini span:last-child{font-size:2.5cqw;margin-top:.1cqw}
.sign-jr.hidden-name .kanji,.sign-jr.hidden-name .jr-row .c{color:#b9b9c2}
.sign-jr.revealed-ok .kanji{color:#1e9e4a}
.sign-jr.revealed-ng .kanji{color:#d6342c}

/* --- 札幌市営地下鉄：濃灰地、路線色の矢印、白丸に路線色の輪のナンバリング --- */
.sign-sp{background:#2e3134;border:1.4cqw solid #aeb3b8;border-radius:1.8cqw;color:#fff}
.sign-sp .sp-badge{position:absolute;left:3cqw;top:2.2cqw;width:9cqw;height:9cqw;border-radius:50%;background:#fff;border:1.1cqw solid var(--c);
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;font-weight:700;color:#111}
.sign-sp .sp-badge .sym{font-size:2.8cqw}
.sign-sp .sp-badge .num{font-size:3.8cqw;margin-top:.1cqw}
.sign-sp .sp-name{position:absolute;left:14cqw;right:14cqw;top:.8cqw;text-align:center}
.sign-sp .sp-name .kanji{font-weight:700;line-height:1.05}
.sign-sp .sp-name .romaji{font-size:3.2cqw;line-height:1.25;font-weight:500;font-family:Helvetica,"Helvetica Neue",Arial,sans-serif}
.sign-sp .sp-arrow{position:absolute;left:3.4cqw;right:3.4cqw;top:14cqw;height:3.8cqw}
.sign-sp .sp-arrow.start{left:calc(50% - 1.3cqw)}
.sign-sp .sp-arrow i{position:absolute;inset:0;background:#fff;clip-path:polygon(0 0,calc(100% - 3.6cqw) 0,100% 50%,calc(100% - 3.6cqw) 100%,0 100%)}
.sign-sp .sp-arrow i.i{inset:.3cqw .7cqw .3cqw .3cqw;background:var(--c);
  clip-path:polygon(0 0,calc(100% - 3.2cqw) 0,100% 50%,calc(100% - 3.2cqw) 100%,0 100%)}
.sign-sp .sp-arrow.start i.o,.sign-sp .sp-arrow.start i.i{border-top-left-radius:1.9cqw;border-bottom-left-radius:1.9cqw}
.sign-sp .sp-arrow .dot{position:absolute;top:50%;width:2.4cqw;height:2.4cqw;margin:-1.2cqw 0 0 -1.2cqw;border-radius:50%;background:#fff}
.sign-sp .sp-arrow .dot.cur{left:calc(50% - 1.7cqw)}
.sign-sp .sp-arrow.start .dot.cur{left:1.5cqw}
/* 上り側の端の駅：矢印を左向きに反転（自駅が右端になる） */
.sign-sp .sp-arrow.flip{transform:scaleX(-1)}
.sign-sp .sp-arrow.flip.start{left:3.4cqw;right:calc(50% - 1.3cqw)}
.sign-sp.flip .sp-nolabel{left:6.9cqw}
.sign-sp .sp-arrow .dot.nxt{left:calc(100% - 9.5cqw)}
.sign-sp .sp-nolabel{position:absolute;left:calc(100% - 3.4cqw - 9.5cqw - 6cqw);width:12cqw;top:10.8cqw;text-align:center;font-size:3cqw;font-weight:700;color:#ece93c;line-height:1.2}
.sign-sp .sp-l,.sign-sp .sp-r{position:absolute;top:19cqw;color:#ece93c;line-height:1.15;white-space:nowrap}
.sign-sp .sp-l{left:5.5cqw;text-align:left}
.sign-sp .sp-r{right:5.5cqw;text-align:right}
.sign-sp .sp-l .k,.sign-sp .sp-r .k{font-size:4.4cqw;font-weight:700}
.sign-sp .sp-l .k .lg,.sign-sp .sp-r .k .lg{font-size:3.4cqw}
.sign-sp .sp-l .k small,.sign-sp .sp-r .k small{font-size:3cqw;margin-right:1.6cqw}
.sign-sp .sp-l .r,.sign-sp .sp-r .r{font-size:2.5cqw;font-weight:500;font-family:Helvetica,"Helvetica Neue",Arial,sans-serif}
.sign-sp .q{color:#8a8d8f}
.sign-sp.hidden-name .kanji{color:#8a8d8f}
.sign-sp.revealed-ok .kanji{color:#58e08a}
.sign-sp.revealed-ng .kanji{color:#ff7b72}

/* ===== 回答 ===== */
.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choices button{padding:15px 6px;font-size:1.1rem}
.choices button.ok{background:var(--ok);border-color:var(--ok);color:#fff;opacity:1}
.choices button.ng{background:var(--ng);border-color:var(--ng);color:#fff;opacity:1}
.choices button:disabled{cursor:default}
.choices button:disabled:not(.ok):not(.ng){opacity:.4}
.inputrow{display:flex;gap:10px}
.inputrow input{flex:1;min-width:0;font:inherit;font-size:1.1rem;padding:11px;border:1px solid var(--ink);border-radius:4px;background:var(--card);color:var(--text)}
.feedback{min-height:28px;margin:14px 2px 0;font-size:1rem;font-weight:700}
.feedback.ok{color:var(--ok)}.feedback.ng{color:var(--ng)}
.feedback small{display:block;font-weight:400;color:var(--sub)}

.score{font-size:1.8rem;font-weight:600;margin:4px 0 12px;font-family:var(--mono)}
.wronglist{list-style:none;padding:0;margin:0 0 6px}
.wronglist li{padding:7px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.wronglist small{color:var(--sub)}