:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:#233d39;background:#f6f8f5;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,.region:focus-visible{outline:3px solid #d88f2e;outline-offset:4px}[hidden]{display:none!important}.topbar{height:86px;display:flex;align-items:center;justify-content:space-between;padding:0 6%;border-bottom:1px solid #dce4df;background:#fff}.brand{display:flex;align-items:center;gap:12px;font-weight:750;text-decoration:none;color:inherit}.brand-icon{font-size:30px;background:#e3f0e8;border-radius:12px;padding:1px 10px;color:#287159}.subject,.eyebrow{font-size:11px;font-weight:750;letter-spacing:2px;color:#668179}main{max-width:1400px;margin:auto;padding:35px 5%}.home{text-align:center;padding:35px 0 15px}h1{letter-spacing:-1.8px;line-height:1.12;font-size:clamp(32px,4vw,54px);margin:20px 0}.intro{font-size:18px;line-height:1.7;color:#6b7c75}.mode-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:48px auto 35px;max-width:1120px}.mode{text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:27px 23px;background:#fff;border:1px solid #dfe6e0;border-radius:18px;min-height:237px}.mode-icon{font-size:25px;border-radius:12px;background:#eff3ef;padding:8px 13px}.mode strong{font-size:21px}.mode>span:not(.mode-icon){font-size:13px;color:#6c7d76}.mode b{font-size:12px;margin-top:auto}.mode:disabled{cursor:default;color:#86928b;background:#f0f3ef}.enabled{border:2px solid #338366;box-shadow:0 8px 28px #235e4210}.enabled .mode-icon{background:#e1efe7;color:#287359}.enabled b{color:#287359}.enabled:hover,.primary:hover{transform:translateY(-2px)}.home-note{font-size:13px;color:#7a8b82}.game-top{display:flex;align-items:center;justify-content:space-between;gap:15px}.text-button{border:0;background:transparent;color:#587068;padding:12px;font-weight:650}.stats{display:flex;gap:22px;font-size:14px;color:#6d7b75}.correct-stat{color:#28755a}.question{display:flex;align-items:center;justify-content:space-between;gap:25px;margin:25px 0 20px}.question h1{font-size:38px;margin:8px 0}.question p{color:#75847c;font-size:13px;margin:0}.card-area{text-align:center}.drag-card{border:1px solid #bad5c5;background:#fff;padding:17px 23px;min-width:240px;border-radius:12px;box-shadow:0 5px 0 #dbe6dc;display:flex;align-items:center;justify-content:space-between;gap:24px;color:#245e49;font-size:17px;font-weight:750;touch-action:none;user-select:none;cursor:grab}.drag-card.dragging{opacity:.35}.card-area p{margin-top:13px;font-size:11px}.drag-ghost{position:fixed;z-index:1000;pointer-events:none;transform:translate(-50%,-50%);margin:0;box-shadow:0 12px 30px #1e403533;opacity:.97;white-space:nowrap}.progress-track{height:5px;background:#e1e9e1;border-radius:4px;overflow:hidden}#progress-fill{height:100%;background:#3b9270;transition:width .3s}#feedback{font-size:13px;min-height:43px;padding:14px 0;color:#647d71}.map-panel{background:#fff;border:1px solid #dce6df;border-radius:20px;overflow:hidden}.map-heading{padding:18px 23px;display:flex;align-items:center;justify-content:space-between;color:#8a9b92;font-size:10px;font-weight:750;letter-spacing:2px}.zoom-controls{display:flex;gap:6px}.zoom-controls button{background:#f3f6f2;border:1px solid #dce5dc;border-radius:7px;min-width:40px;min-height:40px;color:#47665a;letter-spacing:0;font-size:14px}#map{max-width:1050px;margin:auto;touch-action:pan-y}#map svg,#completed-map svg{display:block;width:100%;height:auto;max-height:660px}.region{fill:#dce5db;stroke:#fff;stroke-width:1.3;stroke-linejoin:round;transition:fill .18s;cursor:pointer}.region.correct{fill:#6ca98a}.region.over{fill:#edc879;stroke:#b28a31;stroke-width:2}.region.wrong{fill:#dd8275}.map-label{fill:#234e3c;font-size:11px;font-weight:700;paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round;pointer-events:none}.label-line{stroke:#567969;stroke-width:1;fill:none;pointer-events:none}.map-bottom{display:flex;gap:20px;padding:15px 24px;border-top:1px solid #edf1eb;font-size:11px;color:#7a8c81}.map-bottom i{display:inline-block;width:9px;height:9px;border-radius:3px;background:#dce5db;margin-right:5px}.map-bottom i.green{background:#6ca98a}.tip{margin-left:auto}.finish{text-align:center;padding:35px 0}.finish-icon{display:block;background:#deeee1;color:#328461;font-size:38px;border-radius:50%;width:75px;height:75px;margin:0 auto 25px;padding:10px}.finish p{color:#6c8074}.results{display:flex;justify-content:center;gap:45px;margin:30px}.results b{display:block;font-size:32px}.primary{background:#2f795c;color:#fff;border:0;border-radius:12px;padding:18px 28px;font-weight:700}.finish>.text-button{display:block;margin:15px auto}#completed-map{background:white;border-radius:20px;margin-top:35px}footer{text-align:center;font-size:11px;color:#84938a;padding:25px}footer a{color:inherit;margin-left:15px}@media(max-width:800px){.subject{display:none}.topbar{height:70px}.mode-grid{grid-template-columns:repeat(2,1fr);gap:12px;margin-top:30px}.mode{min-height:210px;padding:20px}.question{flex-direction:column;align-items:flex-start}.card-area{align-self:center}.question h1{font-size:30px}.game-top>.eyebrow{display:none}.stats{gap:15px}.tip{display:none}.map-heading{padding:12px;letter-spacing:1px}.home{padding-top:20px}main{padding:25px 4%}.map-label{font-size:12px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Optional hints and a fixed orientation reference; geographic paths stay unchanged. */
.hint-controls{display:flex;align-items:center;justify-content:space-between;gap:16px}
.hint-button{border:1px solid #bad5c5;border-radius:8px;background:#fff;color:#245e49;padding:10px 16px;font-size:13px;font-weight:650;min-height:42px;flex-shrink:0;margin:8px 0}
.hint-button:disabled{color:#86928b;background:#f0f3ef;cursor:default}
.hint-text{margin:0 0 14px;color:#47665a;font-size:13px;line-height:1.6}
.map-stage,.completed-stage{position:relative}
.compass{position:absolute;top:12px;right:18px;width:clamp(56px,7vw,84px);height:auto;color:#668179;pointer-events:none;user-select:none}
.region.hint-highlight{animation:hint-pulse 1.8s ease-in-out;}
@keyframes hint-pulse{0%,100%{filter:none}20%,75%{fill:#edc879;stroke:#b28a31;stroke-width:2;filter:brightness(1.06)}}
@media(max-width:800px){.stats{flex-wrap:wrap;justify-content:flex-end;gap:8px 15px}.hint-controls{align-items:flex-start}.compass{right:10px;top:8px}}
@media(prefers-reduced-motion:reduce){.region.hint-highlight{animation:none;filter:brightness(1.2);stroke:#b28a31;stroke-width:3}}

/* Fixed hint slot: card visibility and fades never alter document geometry. */
.hint-zone{height:96px;overflow:hidden}
.hint-card{height:84px;border:1px solid #bad5c5;border-radius:10px;background:#faf7ec;color:#47665a;padding:12px 16px;display:flex;align-items:flex-start;gap:12px}
.hint-icon{width:22px;height:22px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hint-copy{min-width:0}
.hint-copy strong{display:block;font-size:12px;line-height:18px;color:#245e49}
.hint-card .hint-text{margin:3px 0 0;font-size:13px;line-height:18px}
.region{transition:fill .18s,stroke .18s,stroke-width .18s,filter .18s}
.region.exploring:not(.over){filter:brightness(1.05)}
.state-highlight-layer,.state-highlight-outline{pointer-events:none}
.state-highlight-outline{fill:none;stroke:#527f78;stroke-width:2.3;stroke-linejoin:round;filter:brightness(1.05)}
@media(max-width:800px){.hint-card{padding:10px 12px;gap:8px}.hint-card .hint-text{font-size:12px;line-height:17px}}
/* Reserve room for wrapped feedback and question names when a hint is cleared. */
.hint-controls{height:58px}
@media(min-width:801px) and (max-width:1100px){.question h1{height:86px}}
@media(max-width:800px){.question h1{height:68px}.hint-controls{height:100px}}

/* Keep the existing reserved band; only the hint card occupies the upper free gap. */
.hint-zone{position:relative;overflow:visible}
.hint-card{position:absolute;left:var(--hint-left,0);top:var(--hint-top,0);width:var(--hint-width,100%);padding:8px 10px;gap:8px}
.hint-card .hint-icon{width:18px;height:18px}
.hint-card .hint-text{font-size:11px;line-height:14px}

/* Fit the main map to the recovered space without scaling or changing its paths. */
#game #map{max-width:none;height:100%}
#game #map svg{width:100%;height:100%;max-height:none}
/* SVG paths receive a geographic keyboard outline, never a rectangular UA focus ring. */
#map .region:focus,#map .region:focus-visible{outline:none}
.state-highlight-outline.keyboard-outline{stroke:#d88f2e;stroke-width:3;filter:none}

.mastery{margin:0 auto 25px;max-width:650px}
.mastery strong{font-size:20px;color:#245e49}
.mastery p{font-size:14px;line-height:1.6;margin:10px 0 0}