:root{--ink:#171b23;--muted:#69717d;--line:#dce1e6;--paper:#f6f3ec;--card:#fff;--red:#e84c3d;--green:#28a96b;--yellow:#ffd54a;--blue:#3156a3;--shadow:0 18px 44px rgba(22,28,40,.09)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif}.game{width:min(1180px,calc(100% - 32px));margin:auto}.topbar{display:flex;align-items:center;justify-content:space-between;padding:24px 0;border-bottom:1px solid #d8d3c8}.brand{display:flex;gap:12px;align-items:center;color:inherit;text-decoration:none}.brand-mark{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--red);color:#fff;font-size:22px;font-weight:900;box-shadow:inset 0 0 0 3px rgba(255,255,255,.35)}.brand strong,.brand small{display:block}.brand strong{font-size:18px}.brand small{color:var(--muted);font-size:11px;letter-spacing:.14em;margin-top:3px}.reset-button,.start-game-button{border:0;border-radius:999px;font-weight:800;cursor:pointer}.reset-button{padding:11px 17px;background:#fff;border:1px solid var(--line);color:var(--ink)}.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:end;padding:58px 0 34px}.eyebrow,.step{color:var(--red);font-size:11px;font-weight:900;letter-spacing:.18em}.hero h1{font-size:clamp(34px,5.1vw,68px);line-height:1.08;letter-spacing:-.04em;margin:7px 0 0}.hero>p{color:var(--muted);font-weight:600;line-height:1.9;max-width:460px}.progress-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;padding:20px 24px;background:var(--ink);color:#fff;border-radius:18px;box-shadow:var(--shadow)}.progress-numbers{white-space:nowrap}.progress-numbers strong{font-size:36px}.progress-numbers span{color:#aeb4be;margin-left:8px;font-size:12px}.progress-track{height:8px;background:#424750;border-radius:99px;overflow:hidden}.progress-track span{display:block;width:0;height:100%;background:var(--green);transition:width .35s}.score-stack{display:flex;align-items:center;gap:18px;font-size:12px;white-space:nowrap}.score-stack strong{font-size:20px;margin-left:3px}.streak-score{color:var(--yellow)}.start-game-button{padding:12px 18px;background:var(--red);color:#fff}.board-layout{display:grid;grid-template-columns:minmax(310px,390px) 1fr;gap:22px;margin:24px 0}.piece-panel,.map-panel{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}.piece-panel{padding:22px}.map-panel{padding:22px;min-width:0}.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:18px}.panel-heading h2{margin:3px 0 0;font-size:22px}.remaining{color:var(--muted);font-size:11px}.active-piece{background:#f1f3f5;border-radius:15px;padding:15px}.piece-label span,.piece-label strong{display:block}.piece-label span{color:var(--muted);font-size:11px}.piece-label strong{font-size:22px;margin-top:2px}.piece-shape{display:grid;place-items:center;width:100%;height:190px;border:0;background:transparent;cursor:grab}.piece-shape:disabled{cursor:not-allowed}.piece-shape svg{max-width:93%;max-height:170px;overflow:visible}.piece-shape svg .prefecture{fill:#fff;stroke:var(--ink);stroke-width:2.2}.play-guide{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;color:var(--muted);font-size:10px}.play-guide strong{color:var(--ink)}.piece-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.piece-actions button{padding:12px 10px;border:1px solid var(--line);background:#fff;border-radius:12px;text-align:left;font-weight:800;cursor:pointer}.piece-actions button:disabled{opacity:.5;cursor:not-allowed}.piece-actions small{display:block;color:var(--muted);font-weight:500;font-size:9px;margin-top:5px}.hint-button span{color:#d9a700}.difficulty-button span{color:var(--green)}.piece-list{display:flex;gap:5px;flex-wrap:wrap;max-height:205px;overflow:auto;padding-right:4px}.piece-list button{border:1px solid var(--line);border-radius:999px;background:#fff;padding:5px 8px;font-size:10px;color:var(--muted)}.piece-list button.is-current{background:var(--ink);color:#fff;border-color:var(--ink)}.piece-list button.is-done{text-decoration:line-through;opacity:.4}.map-heading-notes{display:flex;gap:12px;color:var(--muted);font-size:10px}.map-heading-notes i{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--green)}.map-shell{display:grid;place-items:center;min-height:500px;border-radius:15px;background:#f7f8fa;overflow:hidden}.map-shell svg{display:block;width:100%;height:auto;max-height:610px;touch-action:manipulation}.map-shell .prefecture{cursor:pointer;transition:fill .16s,filter .16s;outline:none}.map-shell .prefecture:hover{filter:brightness(.92)}.map-shell .prefecture.is-target{fill:var(--yellow)!important;filter:drop-shadow(0 0 6px rgba(255,213,74,.9))}.map-shell .prefecture.is-correct{fill:var(--green)!important}.hide-completed .map-shell .prefecture.is-correct{fill:#eee!important}.map-shell .prefecture.is-wrong{animation:shake .35s;fill:#ff8075!important}.loading{color:var(--muted)}.status-message{margin:15px 0 0;padding:12px 14px;border-radius:12px;background:#f4f6f8;color:var(--muted);font-size:13px}.status-message span{color:var(--green);margin-right:8px}.status-message.is-error span{color:var(--red)}.status-message.is-success{background:#eaf8f1;color:#19764d}.status-message.is-error{background:#fff0ee;color:#a33026}footer{text-align:center;padding:36px 0 44px;color:var(--muted)}footer p{font-weight:800;color:var(--ink)}footer a{color:inherit}@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@media(max-width:800px){.game{width:min(100% - 20px,650px)}.hero{grid-template-columns:1fr;gap:8px;padding:38px 4px 24px}.hero h1{font-size:40px}.progress-card{grid-template-columns:auto 1fr;padding:16px}.score-stack{grid-column:1/-1;justify-content:space-between;gap:8px;flex-wrap:wrap}.board-layout{grid-template-columns:1fr}.map-panel{order:-1}.map-shell{min-height:340px}.piece-shape{height:150px}.piece-shape svg{max-height:135px}.piece-actions{grid-template-columns:1fr}.map-heading{display:block}.map-heading-notes{margin-top:8px}.topbar{padding:16px 0}.brand-mark{width:42px;height:42px}.reset-button{font-size:11px;padding:9px 12px}}
@media(max-width:420px){.hero h1{font-size:34px}.progress-numbers strong{font-size:30px}.map-panel,.piece-panel{padding:15px}.map-shell{min-height:290px}.score-stack{font-size:10px}.score-stack strong{font-size:16px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* Progress chips are informational, not controls. */
.piece-list span{border:1px solid var(--line);border-radius:999px;background:#fff;padding:5px 8px;font-size:10px;color:var(--muted)}
.piece-list span.is-current{background:var(--ink);color:#fff;border-color:var(--ink)}
.piece-list span.is-done{text-decoration:line-through;opacity:.4}
.piece-shape[draggable="true"]{cursor:grab}
.piece-shape[draggable="true"]:active{cursor:grabbing}
button:focus-visible,a:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.map-shell .prefecture:focus-visible{filter:drop-shadow(0 0 7px rgba(49,86,163,.8))}
.map-shell .prefecture[aria-disabled="true"]{cursor:default}
.is-waiting .map-shell .prefecture{cursor:default}
@media(hover:hover){button:not(:disabled):hover{filter:brightness(.96)}}
.status-message #status-text{color:inherit;margin-right:0}
.map-shell .prefecture.is-wrong{animation:wrong-pulse .35s}
@keyframes wrong-pulse{50%{opacity:.35;filter:brightness(1.15)}}
.map-shell{position:relative}
.answer-feedback{position:absolute;z-index:3;top:22px;left:50%;display:flex;align-items:center;gap:12px;min-width:190px;padding:13px 18px;border:2px solid rgba(255,255,255,.75);border-radius:16px;background:var(--green);color:#fff;box-shadow:0 12px 30px rgba(18,100,63,.3);opacity:0;pointer-events:none;transform:translate(-50%,-14px) scale(.94);transition:opacity .18s ease,transform .25s cubic-bezier(.2,.9,.25,1.25)}
.answer-feedback.is-visible{opacity:1;transform:translate(-50%,0) scale(1)}
.answer-feedback-icon{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:50%;background:#fff;color:var(--green);font-size:27px;font-weight:900}
.answer-feedback-copy small,.answer-feedback-copy strong{display:block;color:#fff}
.answer-feedback-copy small{font-size:12px;font-weight:900;letter-spacing:.08em}
.answer-feedback-copy strong{margin-top:1px;font-size:20px;white-space:nowrap}
.answer-feedback-kana{display:block;margin-top:1px;color:#dff7ea;font-size:10px;font-weight:800;line-height:1.25}
@media(max-width:420px){.answer-feedback{top:14px;min-width:170px;padding:10px 14px}.answer-feedback-icon{width:36px;height:36px;flex-basis:36px;font-size:23px}.answer-feedback-copy strong{font-size:17px}}
.progress-numbers b{font:inherit}
.start-actions{display:flex;align-items:center;gap:7px}
.quick-start-button{padding:12px 16px;border:1px solid rgba(255,255,255,.25);border-radius:999px;background:var(--yellow);color:var(--ink);font-weight:900;cursor:pointer}
.quick-start-button:disabled{cursor:default;opacity:.65}
@media(max-width:800px){.start-actions{width:100%}.quick-start-button,.start-game-button{flex:1}}
.completion-panel{position:absolute;z-index:5;inset:0;display:grid;place-items:center;padding:24px;background:rgba(247,248,250,.84);backdrop-filter:blur(4px);opacity:0;transition:opacity .22s ease}
.completion-panel[hidden]{display:none}
.completion-panel.is-visible{opacity:1}
.completion-card{width:min(410px,100%);padding:30px;border:1px solid var(--line);border-radius:24px;background:#fff;text-align:center;box-shadow:0 24px 60px rgba(22,28,40,.2);transform:translateY(10px) scale(.97);transition:transform .28s cubic-bezier(.2,.9,.25,1.15)}
.completion-panel.is-visible .completion-card{transform:translateY(0) scale(1)}
.completion-icon{display:grid;place-items:center;width:68px;height:68px;margin:0 auto 14px;border-radius:50%;background:#fff4c4;font-size:35px}
.completion-eyebrow{margin:0;color:var(--green);font-size:10px;font-weight:900;letter-spacing:.16em}
.completion-card h3{margin:5px 0 8px;font-size:clamp(27px,4vw,38px)}
.completion-result{margin:0 0 22px;color:var(--muted);font-weight:700}
.completion-actions{display:grid;gap:9px}
.completion-actions button{width:100%;padding:13px 16px;border-radius:12px;font-weight:900;cursor:pointer}
.completion-primary{border:0;background:var(--green);color:#fff}
.completion-secondary{border:1px solid var(--ink);background:#fff;color:var(--ink)}
.completion-end{border:0;background:transparent;color:var(--muted)}
@media(max-width:420px){.completion-panel{padding:14px}.completion-card{padding:22px 18px}.completion-icon{width:56px;height:56px;font-size:29px}.completion-result{margin-bottom:17px}}
.mobile-question-summary{display:none}
@media(max-width:800px){.mobile-question-summary{position:sticky;top:max(8px,env(safe-area-inset-top));z-index:4;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:76px;margin:0 0 10px;padding:9px 12px;border:1px solid var(--line);border-left:5px solid var(--red);border-radius:14px;background:rgba(255,255,255,.96);box-shadow:0 8px 22px rgba(22,28,40,.12);backdrop-filter:blur(8px)}.mobile-question-copy span,.mobile-question-copy strong,.mobile-question-copy small{display:block}.mobile-question-copy span{color:var(--red);font-size:9px;font-weight:900;letter-spacing:.1em}.mobile-question-copy strong{margin-top:2px;font-size:20px;line-height:1.2}.mobile-question-copy small{margin-top:2px;color:var(--muted);font-size:10px}.mobile-question-shape{display:grid;place-items:center;width:74px;height:56px;flex:0 0 74px;overflow:hidden;contain:paint;padding:4px;border-radius:9px}.mobile-question-shape svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden}.mobile-question-shape svg .prefecture{fill:#fff;stroke:var(--ink);stroke-width:2.2}}

/* Distant islands are enlarged in a labelled inset instead of shrinking the main shape. */
.piece-shape svg .prefecture,.mobile-question-shape svg .prefecture{fill:#fff;stroke:var(--ink);stroke-width:1.8}
.piece-shape svg .prefecture path,.piece-shape svg .prefecture polygon,.mobile-question-shape svg .prefecture path,.mobile-question-shape svg .prefecture polygon{vector-effect:non-scaling-stroke;paint-order:stroke fill}
.piece-shape.has-island-preview{display:block;overflow:hidden}
.piece-island-layout{display:grid;grid-template-columns:minmax(0,1fr) 102px;gap:10px;width:100%;height:100%;min-height:0;padding:4px 0;overflow:hidden}
.piece-main-frame{display:grid;place-items:center;min-width:0;min-height:0}
.piece-main-frame svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden}
.piece-island-frame{display:grid;grid-template-rows:auto minmax(0,1fr);min-width:0;min-height:0;padding:6px;border:1px dashed #aeb8c3;border-radius:12px;background:#fff;overflow:hidden}
.piece-island-label{display:block;margin-bottom:3px;color:var(--blue);font-size:8px;font-weight:900;line-height:1.35;text-align:center;white-space:nowrap}
.piece-island-frame svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden}
.mobile-island-badge{display:none}
@media(max-width:800px){.piece-island-layout{grid-template-columns:minmax(0,1fr) 92px;gap:7px}.piece-island-label{font-size:7px}.mobile-question-shape.has-island-preview{position:relative;padding:3px 15px 9px 3px}.mobile-question-shape.has-island-preview svg{width:100%;height:100%}.mobile-island-badge{position:absolute;right:1px;bottom:1px;display:block;padding:1px 3px;border-radius:999px;background:var(--blue);color:#fff;font-size:7px;font-weight:900;line-height:1.3}}
@media(max-width:420px){.piece-island-layout{grid-template-columns:minmax(0,1fr) 84px}}

/* Full 47-question modes and their persistent clear stars. */
.start-game-button{min-width:118px;padding:10px 13px;line-height:1.15}
.start-game-button small{display:block;margin-top:3px;color:rgba(255,255,255,.78);font-size:8px;font-weight:700}
.start-game-button:disabled{cursor:default;opacity:.68}
.no-shape-start-button{background:var(--blue)}
.mode-clear-star{margin-right:3px;color:var(--yellow);font-size:15px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.22))}
.start-game-button.is-cleared{box-shadow:inset 0 0 0 2px var(--yellow)}
.completion-clear-star{width:max-content;margin:0 auto 9px;padding:5px 10px;border-radius:999px;background:#fff4c4;color:#8a6700;font-size:12px;font-weight:900}
.map-shell.has-completion{min-height:580px}

/* The no-shape mode keeps the question area explicit instead of leaving a blank box. */
.piece-shape.is-shape-hidden{cursor:default}
.shape-hidden-placeholder{display:grid;place-content:center;place-items:center;gap:3px;width:100%;height:100%;border:1px dashed #b8c0ca;border-radius:14px;background:rgba(255,255,255,.55);color:var(--muted)}
.shape-hidden-placeholder strong{color:#9aa4b0;font-size:68px;font-weight:700;line-height:.95}
.shape-hidden-placeholder span{font-size:11px;font-weight:900;letter-spacing:.08em}
.mobile-question-shape.is-shape-hidden{position:relative;padding:3px}
.mobile-shape-hidden-placeholder{display:grid;place-items:center;width:100%;height:100%;border:1px dashed #bac3cd;border-radius:8px;background:#f5f7f9;color:#9aa4b0;font-size:27px;font-weight:900}
.mobile-shape-mode-badge{position:absolute;right:0;bottom:0;padding:1px 4px;border-radius:999px;background:var(--blue);color:#fff;font-size:7px;font-weight:900}
@media(max-width:800px){.start-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.quick-start-button{grid-column:1/-1}.quick-start-button,.start-game-button{width:100%;min-width:0}.start-game-button{padding:10px 7px;font-size:10px}.map-shell.has-completion{min-height:560px}}

/* Learning-first course menu */
[hidden]{display:none!important}
.learning-menu{margin:24px 0;padding:24px;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:var(--shadow)}
.learning-menu-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px}
.learning-menu-heading h2{margin:4px 0 0;font-size:24px}
.mastery-summary{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.mastery-summary span{padding:7px 11px;border-radius:999px;background:#f2f6f3;color:#34634e;font-size:12px;font-weight:800}
.mastery-summary .hidden-mastery-summary{background:#edf3ff;color:var(--blue)}
.learning-options{display:grid;grid-template-columns:minmax(0,2fr) minmax(190px,1fr) minmax(190px,1fr);gap:12px}
.learning-card{min-width:0;padding:17px;border:1px solid var(--line);border-radius:16px;background:#f8faf9}
.learning-card h3{margin:0;font-size:16px}
.learning-card>p{margin:6px 0 13px;color:var(--muted);font-size:12px;line-height:1.6}
.region-buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.region-button,.review-start-button{position:relative;min-height:50px;border:1px solid #cad8d0;border-radius:12px;background:#fff;color:var(--ink);font-weight:900;cursor:pointer}
.region-button{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:4px;padding:7px 8px;text-align:left}
.region-button strong{font-size:14px}
.region-button small{grid-column:2;color:var(--muted);font-size:12px;font-weight:700}
.region-clear-star{grid-row:1/3;color:#e3ab00;font-size:14px}
.region-button.is-cleared{border-color:#e9c543;background:#fffbdf;box-shadow:inset 0 0 0 1px #e9c543}
.review-start-button{width:100%;padding:10px 13px;background:var(--green);border-color:var(--green);color:#fff;text-align:center}
.review-mode-actions{display:grid;gap:7px}
.review-start-button strong,.review-start-button small{display:block;color:inherit}
.review-start-button small{margin-top:2px;font-size:11px;font-weight:700;line-height:1.35}
.no-shape-review-start-button{background:var(--blue);border-color:var(--blue)}
.pace-toggle{display:flex;align-items:center;gap:10px;min-height:52px;padding:9px 11px;border:1px solid #cad8d0;border-radius:12px;background:#fff;cursor:pointer}
.pace-toggle input{width:22px;height:22px;flex:0 0 22px;accent-color:var(--green)}
.pace-toggle span,.pace-toggle strong,.pace-toggle small{display:block}
.pace-toggle strong{font-size:14px}
.pace-toggle small{margin-top:2px;color:var(--muted);font-size:12px;line-height:1.35}
.pace-help{margin-bottom:0!important}
.learning-menu.is-all-mastered{border-color:#9ed9bc}

/* Clear map tools and user-controlled enlargement */
.map-heading-tools{display:flex;align-items:flex-end;gap:14px}
.map-heading-notes{justify-content:flex-end;flex-wrap:wrap}
.map-zoom-control{display:grid;gap:3px;min-width:145px}
.map-zoom-control span{color:var(--muted);font-size:12px;font-weight:800}
.map-zoom-control select{width:100%;min-height:44px;padding:7px 31px 7px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.map-zoom-control select:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.map-shell{height:clamp(500px,55vw,610px);min-height:0}
.map-shell svg{width:100%;height:100%;max-height:none;overflow:hidden}
.map-shell.is-region-zoomed{background:#f2f7f5}
.map-shell .prefecture.is-region-hint:not(.is-correct){fill:#a9c7f5!important;filter:drop-shadow(0 0 3px rgba(49,86,163,.28))}
.map-shell .prefecture.is-outside-region{opacity:.2;cursor:default}
.map-shell .prefecture.is-target{fill:var(--yellow)!important;filter:drop-shadow(0 0 8px rgba(255,193,7,.95))}

/* Larger invisible hit outlines help with small prefectures without changing geography. */
.prefecture-hit-area{cursor:pointer}
.prefecture-hit-area.is-hit-disabled{pointer-events:none}
.prefecture-hit-area path,.prefecture-hit-area polygon{fill:none!important;stroke:transparent!important;stroke-width:14!important;vector-effect:non-scaling-stroke;pointer-events:stroke;paint-order:stroke}
@media(pointer:coarse){.prefecture-hit-area path,.prefecture-hit-area polygon{stroke-width:26!important}}

/* Positive feedback stays long enough to read and always offers the next action. */
.answer-feedback{display:grid;grid-template-columns:auto minmax(0,1fr) auto;width:min(540px,calc(100% - 30px));min-width:0;padding:14px 16px}
.answer-feedback.is-visible{pointer-events:auto}
.answer-feedback-copy{min-width:0}
.answer-feedback-copy strong{white-space:normal}
.answer-feedback-detail{display:block;margin-top:3px;color:#e9fff4;font-size:12px;font-weight:700;line-height:1.4}
.answer-feedback-next{min-width:92px;min-height:44px;padding:9px 13px;border:2px solid #fff;border-radius:999px;background:#fff;color:#167448;font-weight:900;cursor:pointer}
.answer-feedback-next:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

/* Mastery marks on the prefecture list */
.piece-list span{display:inline-flex;align-items:center;gap:3px;font-size:12px}
.piece-list ruby{ruby-position:over}
.piece-list rt{color:currentColor;font-size:7px;font-weight:700;line-height:1}
.piece-list span small{color:#d39c00;font-size:12px;font-weight:900}
.piece-list span.is-needs-review small{color:#d86a28}
.piece-list span.is-done{text-decoration:none;opacity:.52}
.piece-list span.is-current{opacity:1}
.piece-list span.is-current small{color:var(--yellow)}

/* Calm mode removes score pressure but keeps progress visible. */
.progress-card.is-calm-mode .score-metric{display:none}
.progress-card.is-calm-mode .score-stack{gap:0}

/* Reset confirmation keeps accidental taps from losing the current round. */
.confirm-layer{position:fixed;z-index:30;inset:0;display:grid;place-items:center;padding:20px;background:rgba(20,25,34,.56);backdrop-filter:blur(5px);opacity:0;transition:opacity .18s ease}
.confirm-layer.is-visible{opacity:1}
.confirm-card{width:min(390px,100%);padding:26px;border-radius:22px;background:#fff;text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.28)}
.confirm-card>span{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 12px;border-radius:50%;background:#fff2cf;color:#8a6500;font-size:30px}
.confirm-card h2{margin:0;font-size:25px}
.confirm-card p{margin:10px 0 20px;color:var(--muted);font-size:14px;line-height:1.7}
.confirm-card>div{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.confirm-card button{min-height:48px;padding:10px;border-radius:12px;font-weight:900;cursor:pointer}
#reset-cancel-button{border:1px solid var(--line);background:#fff;color:var(--ink)}
#reset-confirm-button{border:1px solid var(--red);background:var(--red);color:#fff}

/* Readable instructional type for elementary-school learners. */
.brand small,.eyebrow,.step,.progress-numbers span,.remaining,.piece-label span,.map-heading-notes,.play-guide,.piece-actions small,.completion-eyebrow{font-size:12px}
.start-game-button small{font-size:12px;line-height:1.35}
.mobile-question-copy span,.mobile-question-copy small{font-size:12px}
.piece-island-label{font-size:10px;white-space:normal}
.mobile-island-badge{font-size:9px}
.status-message{font-size:14px;line-height:1.6}
button:disabled,select:disabled{cursor:not-allowed;opacity:.56}
.round-review-progress{grid-column:1/-1;margin-top:3px;color:var(--yellow);font-size:11px;font-weight:900;line-height:1.25;white-space:nowrap}
.remaining{display:grid;justify-items:end;gap:3px}
.remaining small{color:#9a5b16;font-size:10px;font-weight:900;white-space:nowrap}

@media(max-width:980px){
  .progress-card{grid-template-columns:auto minmax(0,1fr)}
  .score-stack{grid-column:1/-1;display:flex;width:100%;justify-content:flex-start;flex-wrap:wrap}
  .start-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
  .quick-start-button{grid-column:auto}
  .learning-options{grid-template-columns:1fr 1fr}
  .region-learning-card{grid-column:1/-1}
  .map-heading-tools{align-items:flex-start;flex-direction:column;gap:8px}
  .map-heading-notes{justify-content:flex-start}
}

@media(max-width:800px){
  .learning-menu{padding:18px;margin:18px 0}
  .learning-menu-heading{align-items:flex-start;flex-direction:column}
  .mastery-summary{justify-content:flex-start}
  .learning-options{grid-template-columns:1fr}
  .region-learning-card{grid-column:auto}
  .region-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}
  .region-button{min-height:54px}
  .start-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quick-start-button{grid-column:1/-1}
  .start-game-button{padding:11px 8px;font-size:13px}
  .map-heading{display:flex;align-items:flex-start}
  .map-heading-tools{align-items:flex-end}
  .map-heading-notes{display:none}
  .map-zoom-control{min-width:138px}
  .map-zoom-control span{font-size:12px}
  .map-shell{height:min(70svh,540px);min-height:360px}
  .answer-feedback{top:12px}
  .progress-card.is-calm-mode .score-stack{justify-content:stretch}
  .progress-card.is-calm-mode .start-actions{width:100%}
}

@media(max-width:480px){
  .game{width:calc(100% - 14px)}
  .hero{padding-top:30px}
  .learning-menu{padding:14px}
  .learning-menu-heading h2{font-size:21px}
  .mastery-summary{gap:6px}
  .mastery-summary span{padding:6px 8px;font-size:12px}
  .learning-card{padding:14px}
  .map-heading{gap:8px}
  .map-heading h2{font-size:20px}
  .map-zoom-control{min-width:128px}
  .map-zoom-control select{padding-left:8px;font-size:12px}
  .map-shell{height:min(66svh,500px);min-height:340px}
  .answer-feedback{grid-template-columns:auto minmax(0,1fr);gap:9px;padding:11px 12px}
  .answer-feedback-next{grid-column:1/-1;width:100%}
  .answer-feedback-detail{font-size:11px}
  .confirm-card{padding:22px 17px}
  .piece-island-layout{grid-template-columns:minmax(0,1fr) 96px}
}

/* Once a course starts, switch from the course page to a one-screen play surface. */
.mobile-game-actions{display:none}

/* On desktop, the course chooser and a live map preview share the first screen. */
@media(min-width:901px){
  body:not(.is-game-active) .game{width:min(1320px,calc(100% - 32px))}
  body:not(.is-game-active) .topbar{padding:11px 0}
  body:not(.is-game-active) .hero{grid-template-columns:1.15fr .85fr;gap:32px;align-items:center;padding:12px 2px 14px}
  body:not(.is-game-active) .hero h1{margin-top:4px;font-size:clamp(25px,2.2vw,32px);line-height:1.15;letter-spacing:-.035em}
  body:not(.is-game-active) .hero h1 br{display:none}
  body:not(.is-game-active) .hero>p{margin:0;line-height:1.7}
  body:not(.is-game-active) .play-area{display:grid;grid-template-columns:minmax(500px,.95fr) minmax(420px,1.05fr);gap:16px;height:clamp(520px,calc(100dvh - 175px),700px);min-height:0}
  body:not(.is-game-active) .setup-column{display:flex;min-height:0;flex-direction:column;gap:10px}
  body:not(.is-game-active) .progress-card{flex:0 0 auto;gap:14px;padding:11px 14px;border-radius:16px}
  body:not(.is-game-active) .progress-card .score-metric{display:none}
  body:not(.is-game-active) .learning-menu{display:flex;min-height:0;flex:1 1 auto;flex-direction:column;margin:0;padding:15px;border-radius:17px;overflow:auto}
  body:not(.is-game-active) .learning-menu-heading{flex:0 0 auto;margin-bottom:10px}
  body:not(.is-game-active) .learning-menu-heading h2{font-size:21px}
  body:not(.is-game-active) .learning-options{grid-template-columns:1fr 1fr;gap:8px;min-height:0}
  body:not(.is-game-active) .region-learning-card{grid-column:1/-1}
  body:not(.is-game-active) .learning-card{padding:11px}
  body:not(.is-game-active) .learning-card>p{margin:4px 0 8px;line-height:1.45}
  body:not(.is-game-active) .region-buttons{gap:5px}
  body:not(.is-game-active) .region-button{min-height:44px;padding:5px 7px}
  body:not(.is-game-active) .review-start-button{min-height:44px}
  body:not(.is-game-active) .pace-toggle{min-height:46px;padding:7px 9px}
  body:not(.is-game-active) .pace-help{display:none}
  body:not(.is-game-active) .board-layout{display:block;height:100%;min-height:0;margin:0}
  body:not(.is-game-active) .piece-panel{display:none}
  body:not(.is-game-active) .map-panel{display:flex;height:100%;min-height:0;flex-direction:column;padding:15px;border-radius:17px;overflow:hidden}
  body:not(.is-game-active) .map-panel .panel-heading{flex:0 0 auto;margin-bottom:9px}
  body:not(.is-game-active) .map-shell{flex:1 1 auto;height:auto;min-height:0}
  body:not(.is-game-active) .status-message{flex:0 0 auto;margin-top:8px}
}

html.is-game-active,
body.is-game-active{height:100vh;height:100dvh;overflow:hidden;overscroll-behavior:none}
body.is-game-active .game{display:grid;grid-template-rows:minmax(0,1fr);width:min(1440px,calc(100% - 20px));height:calc(100vh - var(--dm-common-header-height,58px));height:calc(100dvh - var(--dm-common-header-height,58px));overflow:hidden}
body.is-game-active .play-area{display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0;overflow:hidden}
body.is-game-active .setup-column{min-height:0}
body.is-game-active .hero,
body.is-game-active .learning-menu,
body.is-game-active footer{display:none}
body.is-game-active .topbar{min-height:54px;padding:7px 0}
body.is-game-active .brand{cursor:default}
body.is-game-active .brand-mark{width:40px;height:40px;font-size:19px}
body.is-game-active .reset-button{min-height:44px}
body.is-game-active .progress-card{grid-template-columns:auto minmax(90px,1fr) auto;gap:16px;min-height:62px;margin-top:7px;padding:9px 15px;border-radius:14px;box-shadow:0 8px 22px rgba(22,28,40,.12)}
body.is-game-active .progress-numbers{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:6px;line-height:1}
body.is-game-active .progress-numbers strong{font-size:30px}
body.is-game-active .progress-numbers span{margin-left:0}
.active-mode-label{grid-column:1/-1;margin-top:4px;color:#fff;font-size:11px;font-weight:800;line-height:1.2;white-space:nowrap}
body.is-game-active .score-stack{grid-column:auto;display:flex;width:auto;gap:13px;justify-content:flex-end;flex-wrap:nowrap}
body.is-game-active .start-actions{display:none}
body.is-game-active .progress-card.is-calm-mode{grid-template-columns:auto minmax(90px,1fr)}
body.is-game-active .progress-card.is-calm-mode .score-stack{display:none}
body.is-game-active .board-layout{grid-template-columns:minmax(280px,360px) minmax(0,1fr);min-height:0;margin:9px 0 max(8px,env(safe-area-inset-bottom));overflow:hidden}
body.is-game-active .piece-panel,
body.is-game-active .map-panel{height:100%;min-height:0;overflow:hidden;border-radius:17px}
body.is-game-active .piece-panel{display:flex;flex-direction:column;padding:16px}
body.is-game-active .map-panel{display:flex;flex-direction:column;padding:16px}
body.is-game-active .panel-heading{flex:0 0 auto;margin-bottom:9px}
body.is-game-active .panel-heading h2{font-size:20px}
body.is-game-active .active-piece{flex:0 0 auto;padding:11px;overflow:hidden}
body.is-game-active .piece-shape{height:clamp(125px,22vh,180px);min-height:0;overflow:hidden;contain:paint}
body.is-game-active .piece-shape>svg,
body.is-game-active .piece-main-frame>svg,
body.is-game-active .piece-island-frame>svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden}
body.is-game-active .answer-feedback.is-visible{pointer-events:none}
body.is-game-active .answer-feedback-next{pointer-events:auto}
body.is-game-active .map-shell .prefecture.is-next-target{cursor:pointer;filter:drop-shadow(0 0 7px rgba(40,169,107,.9))}
body.is-game-active .piece-actions{flex:0 0 auto;margin:8px 0}
body.is-game-active .piece-list{flex:1 1 auto;align-content:flex-start;align-items:flex-start;min-height:0;max-height:none;overflow:auto}
body.is-game-active .piece-list span{flex:0 0 auto;min-height:29px;padding:5px 8px;line-height:1.4;white-space:nowrap}
body.is-game-active .map-shell,
body.is-game-active .map-shell.has-completion{flex:1 1 auto;height:auto;min-height:0}
body.is-game-active .status-message{flex:0 0 auto;margin-top:8px;padding:9px 12px;line-height:1.4}
body.is-game-active .completion-panel{overflow:auto}

/* Before play, the map doubles as a calm prefecture-name study surface. */
.map-shell.is-study-mode .prefecture.is-study-ready{cursor:help}
.map-shell.is-study-mode .prefecture.is-study-hover{fill:var(--yellow)!important;filter:drop-shadow(0 0 7px rgba(217,167,0,.7))}
.map-study-guide{position:absolute;z-index:2;top:10px;left:10px;display:none;align-items:center;gap:9px;width:max-content;max-width:calc(100% - 20px);margin:0;padding:8px 11px;border:1px solid #ead17a;border-radius:12px;background:rgba(255,250,225,.96);color:var(--ink);box-shadow:0 6px 16px rgba(22,28,40,.1);pointer-events:none}
.map-shell.is-study-mode .map-study-guide{display:flex}
.map-study-guide-icon{font-size:20px;line-height:1}
.map-study-guide strong,.map-study-guide small{display:block}
.map-study-guide strong{font-size:12px;line-height:1.3}
.map-study-guide small{margin-top:1px;color:var(--muted);font-size:10px;font-weight:700;line-height:1.35}
.map-study-tooltip{position:absolute;z-index:4;display:flex;align-items:center;width:max-content;max-width:calc(100% - 20px);padding:10px 13px;border:2px solid #fff;border-radius:14px;background:var(--ink);color:#fff;box-shadow:0 10px 24px rgba(22,28,40,.24);pointer-events:none}
.map-study-tooltip[hidden]{display:none}
.map-study-tooltip-copy strong,.map-study-tooltip-copy>span{display:block}
.map-study-tooltip-copy strong{font-size:18px;line-height:1.25;white-space:nowrap}
.map-study-tooltip-copy>span{color:#fff;font-size:10px}

@media(max-height:820px) and (min-width:801px){
  body.is-game-active .piece-list{display:none}
  body.is-game-active .piece-shape{height:clamp(115px,21vh,155px)}
  body.is-game-active .piece-actions{margin-bottom:0}
}

/* Map-data credits live on a quiet, readable page instead of crowding the game. */
.credits-page{min-height:100vh;background:var(--paper)}
.credits-wrap{width:min(760px,calc(100% - 32px));margin:0 auto;padding:32px 0 64px}
.credits-topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-bottom:24px;border-bottom:1px solid #d8d3c8}
.credits-brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none}
.credits-brand .brand-mark{width:42px;height:42px;font-size:19px}
.credits-brand strong{display:block;font-size:17px}
.credits-brand small{display:block;margin-top:2px;color:var(--muted);font-size:11px}
.credits-back{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 15px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font-size:13px;font-weight:900;text-decoration:none}
.credits-main{padding-top:48px}
.credits-main h1{margin:8px 0 12px;font-size:clamp(30px,6vw,48px);line-height:1.18;letter-spacing:-.03em}
.credits-intro{max-width:620px;margin:0;color:var(--muted);font-size:15px;font-weight:600;line-height:1.9}
.license-card{margin-top:28px;padding:28px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:var(--shadow)}
.license-card h2{margin:0 0 20px;font-size:23px}
.license-list{display:grid;grid-template-columns:112px minmax(0,1fr);margin:0}
.license-list dt,.license-list dd{margin:0;padding:14px 0;border-top:1px solid #e7eaee;line-height:1.7}
.license-list dt{color:var(--muted);font-size:12px;font-weight:900}
.license-list dd{color:var(--ink);font-size:14px;font-weight:700}
.license-list a{color:var(--blue);text-underline-offset:3px}
.license-note{margin:20px 0 0;padding:15px 17px;border-radius:14px;background:#f4f6f8;color:var(--muted);font-size:13px;line-height:1.8}
.license-note strong{color:var(--ink)}
@media(max-width:560px){.credits-wrap{width:calc(100% - 20px);padding-top:16px}.credits-topbar{align-items:flex-start}.credits-brand small{display:none}.credits-back{padding-inline:12px;font-size:12px}.credits-main{padding-top:34px}.license-card{padding:20px 17px}.license-list{grid-template-columns:1fr}.license-list dt{padding-bottom:2px}.license-list dd{padding-top:0;border-top:0}.license-list dt:first-of-type{border-top:1px solid #e7eaee}}

@media(max-width:800px){
  body.is-game-active .game{width:calc(100% - 10px)}
  body.is-game-active .topbar{min-height:49px;padding:4px 0}
  body.is-game-active .brand{gap:8px}
  body.is-game-active .brand-mark{width:36px;height:36px;font-size:17px}
  body.is-game-active .brand strong{font-size:14px}
  body.is-game-active .brand small{display:none}
  body.is-game-active .reset-button{min-height:42px;padding:8px 11px;font-size:12px}
  body.is-game-active .progress-card{grid-template-columns:auto minmax(0,1fr);gap:8px;min-height:54px;margin-top:5px;padding:7px 10px}
  body.is-game-active .progress-numbers strong{font-size:26px}
  body.is-game-active .active-mode-label{font-size:10px}
  body.is-game-active .progress-track{height:7px}
  body.is-game-active .score-stack{grid-column:1/-1;display:flex;width:100%;gap:8px;justify-content:space-between}
  body.is-game-active .score-stack .score-metric{font-size:11px}
  body.is-game-active .score-stack .score-metric strong{font-size:15px}
  body.is-game-active .progress-card.is-calm-mode{grid-template-columns:auto minmax(0,1fr)}
  body.is-game-active .board-layout{display:block;min-height:0;margin:6px 0 max(5px,env(safe-area-inset-bottom))}
  body.is-game-active .piece-panel{display:none}
  body.is-game-active .map-panel{height:100%;padding:9px;border-radius:15px}
  body.is-game-active .map-heading{margin-bottom:6px}
  body.is-game-active .map-heading h2{font-size:18px}
  body.is-game-active .map-heading-tools{gap:3px}
  body.is-game-active .map-zoom-control{min-width:128px}
  body.is-game-active .mobile-question-summary{position:static;top:auto;flex:0 0 auto;min-height:64px;margin-bottom:6px;padding:6px 10px;box-shadow:0 5px 14px rgba(22,28,40,.1)}
  body.is-game-active .mobile-question-copy strong{font-size:19px}
  body.is-game-active .mobile-question-shape{width:68px;height:50px;flex-basis:68px}
  body.is-game-active .mobile-game-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;flex:0 0 auto;margin-bottom:6px}
  body.is-game-active .mobile-game-actions button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:7px 9px;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--ink);font-size:12px;font-weight:900;cursor:pointer}
  body.is-game-active #mobile-hint-button span:first-child{color:#d9a700}
  body.is-game-active #mobile-color-button span:first-child{color:var(--green)}
  body.is-game-active .mobile-game-actions button:disabled{cursor:not-allowed;opacity:.5}
  body.is-game-active .map-shell,
  body.is-game-active .map-shell.has-completion{height:auto;min-height:0}
  body.is-game-active .status-message{margin-top:6px;padding:7px 9px;font-size:12px;line-height:1.35}
  .map-study-guide{top:8px;left:8px;max-width:calc(100% - 16px);padding:7px 9px}
}

@media(max-width:800px) and (max-height:650px){
  body.is-game-active .topbar{min-height:45px}
  body.is-game-active .brand-mark{width:32px;height:32px}
  body.is-game-active .reset-button{min-height:38px}
  body.is-game-active .progress-card{min-height:48px;padding-block:5px}
  body.is-game-active .map-heading .step{display:none}
  body.is-game-active .map-heading h2{margin-top:0;font-size:16px}
  body.is-game-active .mobile-question-summary{min-height:56px}
  body.is-game-active .mobile-question-copy strong{font-size:17px}
  body.is-game-active .mobile-question-shape{height:44px}
}

/* Keep the one-screen game on normal displays, but allow scrolling when height is tight. */
@media(max-height:620px),(min-width:801px) and (max-height:700px){
  html.is-game-active,
  body.is-game-active{
    height:auto;
    min-height:100%;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior-y:contain;
  }
  body.is-game-active{min-height:100vh;min-height:100dvh}
  body.is-game-active .game{
    height:auto;
    min-height:calc(100vh - var(--dm-common-header-height,58px));
    min-height:calc(100dvh - var(--dm-common-header-height,58px));
    overflow:visible;
  }
  body.is-game-active .play-area,
  body.is-game-active .board-layout{overflow:visible}
  body.is-game-active .board-layout{height:auto;min-height:520px}
  body.is-game-active .piece-panel,
  body.is-game-active .map-panel{height:auto;min-height:520px}
  body.is-game-active .map-shell,
  body.is-game-active .map-shell.has-completion{
    flex:0 0 auto;
    height:clamp(340px,65svh,500px);
    min-height:340px;
  }
}

/* Before a course is chosen, show only the course buttons; progress starts with the game. */
body:not(.is-game-active) .progress-card{display:block}
body:not(.is-game-active) #reset-button{display:none}
body:not(.is-game-active) .progress-numbers,
body:not(.is-game-active) .progress-track,
body:not(.is-game-active) .score-metric{display:none}
body:not(.is-game-active) .score-stack{display:block;width:100%}
body:not(.is-game-active) .start-actions{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  width:100%;
  gap:8px;
}
body:not(.is-game-active) .quick-start-button{grid-column:auto}

@media(max-width:800px){
  body:not(.is-game-active) .start-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  body:not(.is-game-active) .quick-start-button{grid-column:1/-1}
}

/* Compact, visible zoom choices leave the map usable on small screens. */
.map-panel .map-heading{display:block}
.map-panel .map-heading-tools{display:block;width:100%}
.map-panel .map-heading-notes{display:none}
.map-zoom-control{width:100%}
.map-zoom-control .dm-choice-buttons{margin:4px 0}
.map-zoom-control .dm-choice-buttons .dm-choice-buttons__list{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.map-zoom-control .dm-choice-buttons .dm-choice-buttons__option{min-height:44px;padding:3px 5px;font-size:12px;gap:0;align-items:center;text-align:center;border-radius:9px}
.map-zoom-control .dm-choice-buttons .dm-choice-buttons__mark{display:none}
.map-zoom-control .dm-choice-buttons__option[aria-pressed=true] strong::before{content:'✓ '}
@media(max-width:800px){
  .map-zoom-control .dm-choice-buttons .dm-choice-buttons__list{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.is-game-active .map-heading .step{display:none}
  body.is-game-active .map-heading h2{margin:0;font-size:16px}
}