:root{--ink:#0b1a1d;--teal:#128b8e;--teal-dark:#0b6e72;--teal-soft:#d9ece9;--paper:#f3f0e9;--sand:#e9e5db;--coral:#d46f55;--line:rgba(11,26,29,.14);--white:#fff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",sans-serif}
button,a{color:inherit;font:inherit}
button{cursor:pointer}
.container{width:min(1180px,calc(100% - 2rem));margin-inline:auto}
.skip-link{position:fixed;left:1rem;top:-5rem;z-index:100;padding:.8rem 1rem;background:var(--ink);color:#fff}
.skip-link:focus{top:1rem}
.site-header{min-height:82px;padding:0 max(1.2rem,4vw);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(243,240,233,.94);position:relative;z-index:10}
.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none}
.brand-mark{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font:700 .72rem/1 "Manrope",sans-serif;letter-spacing:.05em}
.brand strong,.brand small{display:block}
.brand strong{font:700 .86rem/1.2 "Manrope",sans-serif}
.brand small{margin-top:.18rem;color:rgba(11,26,29,.54);font-size:.66rem;letter-spacing:.08em}
.header-link{font-size:.76rem;font-weight:700;text-decoration:none;border-bottom:1px solid var(--teal);padding-bottom:.25rem}
.intro{min-height:430px;padding:clamp(4rem,8vw,7rem) max(1.2rem,calc((100vw - 1180px)/2));display:grid;grid-template-columns:1.05fr .95fr;gap:5rem;align-items:end;background:var(--ink);color:#fff}
.eyebrow{display:flex;gap:.7rem;align-items:center;color:var(--teal);font-size:.7rem;font-weight:700;letter-spacing:.16em}
.intro .eyebrow{color:#74c4bf}
.eyebrow span{width:32px;height:1px;background:currentColor}
.intro h1{margin:1.2rem 0 0;font:800 clamp(3.8rem,8vw,7.6rem)/.86 "Manrope",sans-serif;letter-spacing:-.075em}
.intro h1 em{color:#74c4bf;font-family:Georgia,serif;font-weight:400}
.intro-copy{max-width:480px;padding-bottom:.6rem}
.intro-copy p{margin:0;font-size:clamp(1.12rem,2vw,1.45rem);line-height:1.55}
.intro-copy span{display:inline-block;margin-top:1.8rem;padding:.55rem .8rem;border:1px solid rgba(255,255,255,.2);font-size:.73rem;letter-spacing:.06em}
.setup{padding:clamp(4.5rem,8vw,7rem) 0}
.setup-heading{display:grid;grid-template-columns:.6fr 1.4fr;gap:2rem;align-items:start;margin-bottom:3.5rem}
.setup-heading>span{color:var(--teal);font-size:.68rem;font-weight:700;letter-spacing:.15em}
.setup-heading h2{margin:0;font:700 clamp(2rem,4vw,3.7rem)/1.04 "Manrope",sans-serif;letter-spacing:-.05em}
.setup-block{padding:2.1rem 0;border-top:1px solid var(--line)}
.setup-block h3{margin:0 0 1.3rem;font:700 .74rem/1.2 "Manrope",sans-serif;letter-spacing:.11em}
.choice-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.65rem}
.choice-grid button,.mode-grid button{min-height:74px;padding:1rem 1.1rem;text-align:left;border:1px solid var(--line);background:rgba(255,255,255,.36);transition:transform .2s,border-color .2s,background .2s}
.choice-grid button:hover,.mode-grid button:hover{transform:translateY(-2px);border-color:var(--teal)}
.choice-grid button.selected,.mode-grid button.selected{border-color:var(--teal);background:var(--teal-soft);box-shadow:inset 0 -3px var(--teal)}
.choice-grid small{display:block;color:var(--teal);font-size:.61rem;font-weight:700;letter-spacing:.12em}
.choice-grid strong{display:block;margin-top:.4rem;font:700 .93rem/1.25 "Manrope",sans-serif}
.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
.mode-grid small,.mode-grid strong,.mode-grid span{display:block}
.mode-grid small{color:var(--teal);font-size:.61rem;font-weight:700;letter-spacing:.12em}
.mode-grid strong{margin-top:.35rem;font:700 1.25rem/1.2 "Manrope",sans-serif}
.mode-grid span{margin-top:.3rem;color:rgba(11,26,29,.56);font-size:.78rem}
.setup-actions{display:flex;gap:1rem;align-items:center;margin-top:2rem}
.primary-button,.secondary-button,.text-button{min-height:52px;padding:.9rem 1.25rem;border:0;font-weight:700}
.primary-button{background:var(--ink);color:#fff}
.primary-button span,.text-button span{display:inline-block;margin-left:.55rem;transition:transform .2s}
.primary-button:hover span,.text-button:hover span{transform:translateX(4px)}
.secondary-button{border:1px solid var(--line);background:transparent}
.text-button{background:transparent;color:var(--teal-dark)}
.education-note{margin:2rem 0 0;color:rgba(11,26,29,.58);font-size:.76rem}
.game{min-height:calc(100vh - 82px);display:grid;grid-template-columns:minmax(340px,.92fr) minmax(420px,1.08fr);background:#e5edeb;border-top:1px solid var(--line)}
.game-map-panel{padding:1.2rem clamp(1rem,4vw,3rem) 2.5rem;display:grid;grid-template-rows:auto minmax(520px,1fr) auto;align-items:start;border-right:1px solid var(--line)}
.mobile-map-prompt{display:none}
.view-controls{display:grid;grid-template-columns:1fr 1fr;gap:.35rem;max-width:260px;margin:0 auto 1rem;padding:.3rem;background:rgba(255,255,255,.58);border:1px solid var(--line);border-radius:999px}
.view-controls button{min-height:42px;border:0;border-radius:999px;background:transparent;font-size:.74rem;font-weight:700}
.view-controls button.active{background:var(--ink);color:#fff}
.body-stage{width:min(100%,320px);aspect-ratio:1/3;margin:auto;position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.35));border:1px solid rgba(11,26,29,.09)}
.body-stage img{position:absolute;top:5%;left:5%;width:180%;height:90%;max-width:none;object-fit:fill;transition:transform .35s ease}
.body-stage[data-view="back"] img{transform:translateX(-50%)}
.hotspots{position:absolute;inset:0}
.hotspot{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);transform:translate(-50%,-50%);border:1px solid transparent;border-radius:48%;background:transparent;padding:0;transition:background .18s,border-color .18s,box-shadow .18s}
.hotspot:hover,.hotspot:focus-visible{background:rgba(18,139,142,.15);border-color:rgba(18,139,142,.5)}
.hotspot.chosen{background:rgba(212,111,85,.17);border-color:var(--coral)}
.hotspot.correct{background:rgba(18,139,142,.3);border-color:var(--teal);box-shadow:0 0 0 5px rgba(18,139,142,.12)}
.region-alternative{width:min(100%,520px);margin:1rem auto 0}
.region-alternative>button{width:100%;min-height:48px;border:1px solid var(--line);background:rgba(255,255,255,.5);font-size:.75rem;font-weight:700}
.region-alternative>div{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin-top:.5rem}
.region-alternative>div button{min-height:44px;border:1px solid var(--line);background:rgba(255,255,255,.66);font-size:.72rem}
.game-card-panel{padding:clamp(2rem,6vw,6rem);display:flex;flex-direction:column;justify-content:center;background:var(--paper)}
.game-topline{display:flex;align-items:center;justify-content:space-between;padding-bottom:1rem;border-bottom:1px solid var(--line);font-size:.68rem;font-weight:700;letter-spacing:.12em}
.game-topline button{border:0;background:none;color:var(--teal);font-size:.68rem;font-weight:700}
.category-label{margin:clamp(2.5rem,5vw,5rem) 0 .75rem;color:var(--teal);font-size:.68rem;font-weight:700;letter-spacing:.16em}
.prompt{margin:0;color:rgba(11,26,29,.48);font-size:.7rem;font-weight:700;letter-spacing:.16em}
.game-card-panel h2{margin:.8rem 0;font:800 clamp(3rem,6.5vw,6.4rem)/.92 "Manrope",sans-serif;letter-spacing:-.065em;overflow-wrap:anywhere}
.game-card-panel>p#instruction{margin:.4rem 0 1.5rem;font-size:1.02rem;color:rgba(11,26,29,.63)}
.feedback{margin:1rem 0;padding:1rem 1.1rem;border-left:3px solid var(--teal);background:var(--teal-soft);font-weight:700}
.feedback.wrong{border-color:var(--coral);background:#f2dfd8}
.answer-panel{margin-top:1rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.detail-visual{width:min(100%,360px);aspect-ratio:16/9;position:relative;overflow:hidden;background:var(--ink);display:grid;place-items:center}
.detail-visual img{width:100%;height:100%;object-fit:cover}
.detail-visual[hidden]{display:none}
.answer-panel>p{max-width:620px;font-size:1.05rem;line-height:1.65}
.answer-panel>a{display:inline-block;margin:0 0 1.4rem;color:var(--teal-dark);font-size:.78rem;font-weight:700;text-decoration:none;border-bottom:1px solid var(--teal)}
.answer-panel .primary-button{display:block}
.result{padding:clamp(5rem,9vw,8rem) 0}
.result h2{margin:1rem 0;font:700 clamp(2.8rem,6vw,5.4rem)/.95 "Manrope",sans-serif;letter-spacing:-.06em}
.result>strong{display:block;color:var(--teal);font:800 clamp(4rem,10vw,8rem)/1 "Manrope",sans-serif}
.result>p{max-width:640px;font-size:1.08rem;line-height:1.6}
.review-list{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;margin:2.5rem 0}
.review-list article{padding:1.2rem;border:1px solid var(--line);background:rgba(255,255,255,.34)}
.review-list small,.review-list strong{display:block}
.review-list small{color:var(--coral);font-size:.64rem;font-weight:700;letter-spacing:.12em}
.review-list strong{margin-top:.4rem;font:700 1.05rem/1.3 "Manrope",sans-serif}
.review-list p{margin:.55rem 0 0;color:rgba(11,26,29,.65);font-size:.78rem;line-height:1.5}
.result-actions{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}
.result-actions>a{font-size:.78rem;font-weight:700;color:var(--teal-dark)}
footer{padding:2.5rem max(1.2rem,4vw) 3rem;display:grid;grid-template-columns:.85fr 1.6fr auto;gap:2rem;border-top:1px solid var(--line);color:rgba(11,26,29,.58);font-size:.69rem;line-height:1.55}
footer div{display:grid;align-content:start}
footer strong{color:var(--ink);font-size:.78rem}
footer p{margin:0}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
[hidden]{display:none!important}

@media(max-width:900px){.intro{min-height:auto;grid-template-columns:1fr;gap:2rem;padding-block:4.5rem}
.intro-copy{padding:0}
.setup-heading{grid-template-columns:1fr;gap:.8rem}
.choice-grid{grid-template-columns:repeat(2,1fr)}
.game{grid-template-columns:1fr}
.game-map-panel{min-height:auto;border-right:0;border-bottom:1px solid var(--line);grid-template-rows:auto auto auto}
.mobile-map-prompt{display:grid;gap:.25rem;width:min(100%,520px);margin:0 auto 1rem;padding:1rem 1.1rem;background:var(--paper);border:1px solid var(--line)}
.mobile-map-prompt small{color:var(--teal);font-size:.64rem;font-weight:700;letter-spacing:.13em}
.mobile-map-prompt strong{font:800 clamp(1.65rem,7vw,2.4rem)/1.05 "Manrope",sans-serif;letter-spacing:-.04em}
.mobile-map-prompt span{color:rgba(11,26,29,.64);font-size:.82rem;line-height:1.4}
.mobile-map-prompt span.wrong{color:#994b39;font-weight:700}
.mobile-map-prompt span.correct{color:var(--teal-dark);font-weight:700}
.mobile-map-prompt button{display:block;min-height:44px;margin-top:.45rem;border:1px solid var(--line);background:transparent;font-size:.76rem;font-weight:700}
.body-stage{width:min(100%,300px);height:auto;aspect-ratio:1/3}
.game-card-panel{min-height:620px}
.review-list{grid-template-columns:1fr}
footer{grid-template-columns:1fr}
}

@media(max-width:560px){.site-header{min-height:72px;padding-inline:1rem}
.brand-mark{width:34px;height:34px}
.header-link{font-size:.7rem}
.intro{padding:3.5rem 1rem}
.intro h1{font-size:clamp(3.25rem,18vw,5rem)}
.setup{padding-block:3.5rem}
.choice-grid,.mode-grid{grid-template-columns:1fr}
.setup-actions{align-items:stretch;flex-direction:column}
.setup-actions button{width:100%}
.game-map-panel{padding-inline:.75rem}
.body-stage{width:min(100%,290px)}
.region-alternative>div{grid-template-columns:repeat(2,1fr)}
.game-card-panel{min-height:570px;padding:2.2rem 1rem}
.game-card-panel h2{font-size:clamp(2.7rem,15vw,4.7rem)}
.detail-visual{width:100%}
.result-actions>*{width:100%;text-align:center}
footer{padding-inline:1rem}
}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}
}