:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #10121a; color: #f5f3ed; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 82% 5%, #26364a 0, transparent 36%), #10121a; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
.shell { max-width: 1400px; min-height: 100vh; padding: 28px clamp(18px, 3vw, 42px); margin: auto; }
header { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 42px; }
.brand { color: inherit; text-decoration: none; font-size: 14px; font-weight: 900; letter-spacing: .17em; }
.brand span, .lime { color: #b4ec76; }
.header-note { color: #8f96a5; font-size: 13px; }
.eyebrow { color: #b4ec76; letter-spacing: .17em; text-transform: uppercase; font-size: 12px; font-weight: 800; }
h1 { font-size: clamp(54px, 9vw, 105px); line-height: .98; letter-spacing: -.065em; margin: 16px 0 24px; }
h1 em { font-style: normal; color: #b4ec76; }
h2 { font-size: clamp(29px, 4vw, 48px); letter-spacing: -.045em; margin: 8px 0 14px; line-height: 1.1; }
h3 { font-size: 18px; margin: 0 0 12px; }
p { line-height: 1.5; }
.lede { color: #b9bdc8; font-size: 20px; max-width: 580px; }
.hero { padding: clamp(60px, 11vh, 130px) 0 90px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 27px; }
.button { border: 0; border-radius: 12px; background: #b4ec76; color: #16200f; padding: 15px 22px; font-weight: 800; min-height: 50px; }
.button.secondary { background: #252b37; color: #f5f3ed; border: 1px solid #414859; }
.button.ghost { background: transparent; color: #c7ccd4; border: 1px solid #414859; }
.button.small { padding: 9px 13px; min-height: 38px; font-size: 13px; }
.micro { color: #969daa; font-size: 13px; }
.panel { min-width: 0; border: 1px solid #343b4b; background: #1b202c; border-radius: 22px; padding: clamp(20px, 3vw, 32px); }
.mode-choice-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.mode-choice-top .eyebrow { margin: 10px 0 0; }
.mode-choice-top .button { flex-shrink: 0; min-height: 42px; padding: 10px 15px; }
.mode-choice-top .home-icon-button { display: grid; place-items: center; width: 42px; padding: 0; }
.home-icon-button svg { display: block; width: 21px; height: 21px; }
.page-head { display: flex; justify-content: space-between; align-items: start; gap: 20px; margin-bottom: 24px; }
.round-toolbar { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex-shrink: 0; }
.grid { display: grid; grid-template-columns: minmax(0, 1fr) 235px; gap: 18px; }
.round-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.classic-map-heading { margin-bottom: 16px; }
.classic-map-heading h2 { font-size: clamp(25px, 2.6vw, 34px); line-height: 1.15; margin-bottom: 0; }
.classic-map-panel { padding: 20px; }
.classic-map-panel .multi-answer, .classic-map-panel .multi-reveal { margin-top: 0; }
.classic-map-panel .multi-answer > .micro:first-child { margin: 0 0 12px; }
.classic-map-panel .place-form { margin-top: 12px; }
.classic-map-panel .map-wrap { margin-top: 14px; }
.pill { display: inline-flex; align-items: center; border-radius: 99px; background: #293345; color: #c6d4e3; padding: 7px 11px; font-size: 12px; font-weight: 700; }
.pill.accent { background: #33442b; color: #c5ee9a; }
.map-wrap { position: relative; background: #151c27; border: 1px solid #3c4b5b; border-radius: 16px; overflow: hidden; margin: 22px 0 14px; }
.map-controls { position: absolute; z-index: 1; top: 10px; right: 10px; display: flex; gap: 6px; }
.map-zoom { display: grid; place-items: center; width: 34px; height: 34px; min-height: 34px; padding: 0; border: 1px solid #6a7a88; border-radius: 9px; background: rgb(16 22 32 / 88%); color: #f5f3ed; }
.map-zoom:hover { background: #334657; }
.map-zoom svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.map { width: 100%; height: auto; display: block; background: radial-gradient(circle at 48% 46%, #243f57, #172c3e); }
.map-wrap:has(> oddwise-terrain[ready]) > .map-controls { display: none; }
.map[data-local-map="true"] { cursor: grab; touch-action: none; user-select: none; }
.map[data-local-map="true"].is-dragging, .map[data-local-map="true"].is-dragging * { cursor: grabbing !important; }
.map .map-backdrop { fill: #485e6b; stroke: #203746; stroke-width: .65; vector-effect: non-scaling-stroke; stroke-linejoin: round; fill-rule: evenodd; pointer-events: none; }
.map .map-area { fill: #536876; stroke: #162b39; stroke-width: .65; vector-effect: non-scaling-stroke; stroke-linejoin: round; fill-rule: evenodd; transition: fill .15s ease; cursor: pointer; }
.map[data-local-map="true"] .map-backdrop, .map[data-local-map="true"] .map-area { stroke-width: .55; }
.map[data-local-map="true"] .point-outline { pointer-events: none; }
.map[data-local-map="true"] .precise-area { pointer-events: visibleFill; }
.map .map-area:hover, .map .map-area:focus { fill: #9eb7ae; outline: none; stroke: #b4ec76; stroke-width: 2px; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px #b4ec76); }
.map .map-area.correct { fill: #b4ec76; }
.map .map-area.wrong { fill: #e77d70; }
.map .river-visual { fill: none; stroke: #86c7e7; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.map .river-hit { fill: none; stroke: transparent; stroke-width: 12; cursor: pointer; }
.map .point-visual { fill: #d7ecf4; stroke: #17394b; stroke-width: 1.3; vector-effect: non-scaling-stroke; pointer-events: none; }
.map .point-hit { fill: transparent; cursor: pointer; }
.map[data-local-map="true"] .point-visual { pointer-events: auto; cursor: pointer; }
.map[data-local-map="true"] .point-visual:hover, .map[data-local-map="true"] .point-visual:focus, .map[data-local-map="true"] .point-visual.hovered { fill: #fff4aa; outline: none; }
.map[data-local-map="true"] .point-visual.correct { fill: #b4ec76; }
.map[data-local-map="true"] .point-visual.wrong { fill: #e77d70; }
.map[data-map-display-only="true"] .map-area.classic-found,
.map[data-map-display-only="true"] .map-area.classic-found:hover,
.map[data-map-display-only="true"] .point-outline.classic-found { fill: var(--green, #b4ec76); }
.map[data-map-display-only="true"] .point-visual.classic-found,
.map[data-map-display-only="true"] .point-visual.classic-found:hover { fill: var(--green, #b4ec76); stroke: #3d5828; }
.map[data-map-click-sequence="true"] .map-area.classic-found,
.map[data-map-click-sequence="true"] .map-area.classic-found:hover,
.map[data-map-click-sequence="true"] .point-outline.classic-found,
.map[data-map-click-sequence="true"] .point-visual.classic-found,
.map[data-map-click-sequence="true"] .point-visual.classic-found:hover { fill: var(--green, #b4ec76); }
.map[data-map-click-sequence="true"] .map-area.classic-wrong,
.map[data-map-click-sequence="true"] .map-area.classic-wrong:hover,
.map[data-map-click-sequence="true"] .point-outline.classic-wrong,
.map[data-map-click-sequence="true"] .point-visual.classic-wrong,
.map[data-map-click-sequence="true"] .point-visual.classic-wrong:hover { fill: #e77d70; }
.map[data-map-display-only="true"] .map-area,
.map[data-map-display-only="true"] .point-visual,
.map[data-map-display-only="true"] .point-hit { cursor: grab; }
.map .map-item:hover .river-visual, .map .map-item:focus .river-visual { stroke: #fff4aa; stroke-width: 6; }
.map .map-item:hover .point-visual, .map .map-item:focus .point-visual { fill: #fff4aa; }
.map .map-item.correct .river-visual { stroke: #b4ec76; stroke-width: 7; }
.map .map-item.wrong .river-visual { stroke: #e77d70; stroke-width: 7; }
.map .map-item.correct .point-visual { fill: #b4ec76; }
.map .map-item.wrong .point-visual { fill: #e77d70; }
.capital-pin { pointer-events: none; }
.capital-pin-shape { fill: var(--green, #b4ec76); stroke: #e6f5d5; stroke-width: 3; }
.capital-pin-dot { fill: #29401c; }
.capital-pin text { fill: #fff4d6; font-size: 15px; font-weight: 800; paint-order: stroke; stroke: #172c3e; stroke-width: 4px; stroke-linejoin: round; }
.classic-capital-pin { pointer-events: none; }
.classic-capital-pin-shape { fill: var(--teal, #87c8ca); stroke: #d9f0f1; stroke-width: 1.3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.classic-capital-pin-dot { fill: #234044; pointer-events: none; }
.map[data-classic-missed-reveal] .map-area.classic-wrong,
.map[data-classic-missed-reveal] .point-outline.classic-wrong,
.map[data-classic-missed-reveal] .point-visual.classic-wrong,
.map[data-classic-missed-reveal] .map-item.classic-wrong .point-visual,
.classic-capital-pin.missed .classic-capital-pin-shape { fill: #e77d70; }
.classic-capital-pin.missed .classic-capital-pin-shape { stroke: #ffd9d3; }
.classic-capital-pin.missed .classic-capital-pin-dot { fill: #542a26; }
.classic-missed-label { display: none; pointer-events: none; }
.classic-capital-pin.missed { pointer-events: visiblePainted; }
.map[data-classic-missed-reveal] .map-area.classic-wrong:hover,
.map[data-classic-missed-reveal] .point-visual.classic-wrong:hover,
.map[data-classic-missed-reveal] .map-item.classic-wrong:hover .point-visual,
.map[data-map-click-sequence="true"] .map-area.classic-wrong:hover,
.map[data-map-click-sequence="true"] .point-visual.classic-wrong:hover,
.classic-capital-pin.missed:hover .classic-capital-pin-shape { fill: #e04331; }
.map-hover-tooltip { position: fixed; z-index: 10000; pointer-events: none; max-width: min(280px, calc(100vw - 16px)); padding: 8px 12px; border: 1px solid #536170; border-radius: 9px; background: #10121af5; color: #f5f3ed; box-shadow: 0 5px 20px #0004; font-size: 13px; line-height: 1.4; }
.map-hover-tooltip[hidden] { display: none; }
.map .map-annotation { fill: #a5b7c4; font-size: 14px; font-weight: 800; letter-spacing: 2px; pointer-events: none; }
.map[aria-disabled="true"] .map-area, .map[aria-disabled="true"] .river-hit, .map[aria-disabled="true"] .point-hit { cursor: default; }
.map[aria-disabled="true"] .map-area:hover { fill: #536876; }
.map[aria-disabled="true"] .map-area.correct, .map[aria-disabled="true"] .map-area.correct:hover { fill: #b4ec76; }
.map[aria-disabled="true"] .map-area.wrong, .map[aria-disabled="true"] .map-area.wrong:hover { fill: #e77d70; }
.map[aria-disabled="true"] .map-item:hover .river-visual { stroke: #86c7e7; stroke-width: 4; }
.map[aria-disabled="true"] .map-item.correct:hover .river-visual { stroke: #b4ec76; stroke-width: 7; }
.map[aria-disabled="true"] .map-item.wrong:hover .river-visual { stroke: #e77d70; stroke-width: 7; }
.map[aria-disabled="true"] .map-item:hover .point-visual { fill: #d7ecf4; }
.map[aria-disabled="true"] .map-item.correct:hover .point-visual { fill: #b4ec76; }
.map[aria-disabled="true"] .map-item.wrong:hover .point-visual { fill: #e77d70; }
.map[aria-disabled="true"] .point-visual, .map[aria-disabled="true"] .point-visual:hover, .map[aria-disabled="true"] .point-visual.hovered { cursor: default; fill: #d7ecf4; }
.map[aria-disabled="true"] .point-visual.correct, .map[aria-disabled="true"] .point-visual.correct:hover { fill: #b4ec76; }
.map[aria-disabled="true"] .point-visual.wrong, .map[aria-disabled="true"] .point-visual.wrong:hover { fill: #e77d70; }
.map-caption { display: flex; justify-content: space-between; gap: 12px; padding: 10px 15px; color: #a2b2be; font-size: 12px; }
.place-form { max-width: 530px; margin-top: 20px; }
.place-form > div { display: flex; gap: 10px; }
.place-form input { min-width: 0; flex: 1; }
.place-form .button { white-space: nowrap; }
.multi-answer, .multi-reveal { margin-top: 20px; }
.flag-challenge { margin-top: 20px; }
.flag-stage { display: grid; justify-items: center; gap: 8px; margin: 16px 0 20px; padding: clamp(12px, 3vw, 24px); border: 1px solid #3c4b5b; border-radius: 16px; background: #151c27; }
.flag-stage p { margin: 0; }
.country-flag { display: block; width: min(100%, 520px); aspect-ratio: 4 / 3; object-fit: contain; border: 1px solid #d4d5d0; border-radius: 10px; background: #f1f0ea; user-select: none; }
.list-found { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.answer-chip { display: inline-flex; align-items: center; border: 1px solid #40576a; border-radius: 999px; padding: 6px 10px; color: #d9e7ef; background: #203545; font-size: 13px; font-weight: 700; }
.answer-chip.found { border-color: #b4ec76; color: #172c3e; background: #b4ec76; }
.list-score { color: #b4ec76; font-weight: 800; }
.answer-progress { display: flex; justify-content: space-between; align-items: center; gap: 12px; max-width: 360px; margin: 14px 0; padding: 11px 14px; border: 1px solid #56715f; border-radius: 11px; background: #22372f; color: #d8ead4; font-size: 14px; font-weight: 700; }
.answer-progress strong { color: #b4ec76; font-size: 20px; white-space: nowrap; }
.missed-answers { margin-top: 22px; }
.missed-answers h3 { margin-bottom: 8px; }
.missed-list { max-height: 230px; overflow-y: auto; padding: 2px 4px 2px 0; align-content: start; }
.continent-counters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0; }
.continent-counter { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 10px 12px; border: 1px solid #405162; border-radius: 10px; color: #d9e7ef; background: #1a2733; font-size: 13px; }
.continent-counter strong { color: #b4ec76; white-space: nowrap; }
.section-title { margin-top: 28px; }
.speed-strip { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; background: #26362c; border: 1px solid #4b6744; border-radius: 12px; padding: 11px 14px; color: #d4edc1; font-size: 13px; }
.speed-strip strong { font-size: 15px; }
.speed-strip [data-speed-bonus] { color: #b4ec76; font-size: 20px; }
label { display: block; color: #bac2cd; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
input { background: #101620; color: #f5f3ed; border: 1px solid #515a69; border-radius: 10px; padding: 13px 12px; width: 100%; min-height: 48px; }
select { background: #101620; color: #f5f3ed; border: 1px solid #515a69; border-radius: 10px; padding: 13px 12px; width: 100%; min-height: 48px; }
input:focus, button:focus-visible, .map [data-country]:focus-visible { outline: 2px solid #b4ec76; outline-offset: 3px; }
.answer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 22px 0; }
.brand-logo-stage { display: grid; place-items: center; min-height: 220px; margin: 20px 0 8px; padding: 30px; border-radius: 16px; border: 1px solid #bfc6c8; background: radial-gradient(circle at 50% 30%, #fff, #e5e9e9); }
.brand-logo-stage.light-mark { border-color: #566474; background: radial-gradient(circle at 50% 30%, #344454, #172330); }
.brand-logo-stage img { display: block; width: min(100%, 210px); max-height: 170px; aspect-ratio: 1; object-fit: contain; }
.answer-option, .diagram-cell { border: 1px solid #526170; border-radius: 12px; background: #263240; color: #f5f3ed; padding: 18px; text-align: left; min-height: 65px; }
.answer-option:not(:disabled):hover, .diagram-cell:not(:disabled):hover { background: #425b61; }
.answer-option.correct, .diagram-cell.correct { background: #405d34; border-color: #b4ec76; }
.answer-option.wrong, .diagram-cell.wrong { background: #6a393a; border-color: #e77d70; }
.ordered-picks { display: flex; flex-wrap: wrap; gap: 8px; min-height: 48px; align-items: center; margin: 12px 0; }
.order-chip { border: 1px solid #78966b; border-radius: 99px; padding: 8px 12px; background: #304332; }
.diagram { display: grid; gap: 10px; max-width: 570px; margin: 22px 0 8px; }
.diagram.heart { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.diagram.elements { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.diagram-cell { text-align: center; font-size: 19px; font-weight: 800; }
.diagram-cell small { display: block; text-align: left; color: #a4b5c0; font-size: 12px; }
.match-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 24px 0 4px; }
.estimate-form { max-width: 470px; display: grid; gap: 10px; margin: 24px 0; }
.estimate-form .button { justify-self: start; }
.estimate-form input[type="range"] { padding: 0; accent-color: #b4ec76; }
.scale-demo { --reference-diameter: 160px; display: flex; justify-content: space-evenly; align-items: end; gap: 24px; min-height: 245px; margin: 22px 0; padding: 18px; background: #16283a; border: 1px solid #3c4b5b; border-radius: 14px; }
.scale-demo > div { display: flex; flex-direction: column; align-items: center; justify-content: end; width: 45%; min-height: 205px; gap: 12px; text-align: center; }
.planet-circle { flex: none; border-radius: 50%; }
.planet-circle.reference { width: var(--reference-diameter); height: var(--reference-diameter); background: radial-gradient(circle at 35% 30%, #82cae6, #317297 55%, #194761); }
.planet-circle.mystery { width: calc(var(--reference-diameter) * var(--ratio)); height: calc(var(--reference-diameter) * var(--ratio)); background: radial-gradient(circle at 35% 30%, #eca98d, #a95742 55%, #743b32); }
.scale-challenge { --scale-unit: clamp(96px, 10vw, 120px); margin: 18px 0 6px; }
.scale-stage { --scene-zoom: 1; position: relative; overflow: hidden; height: 440px; border: 1px solid #526473; border-radius: 20px; isolation: isolate; background-color: #172534; background-image: linear-gradient(#57728226 1px, transparent 1px), linear-gradient(90deg, #57728226 1px, transparent 1px), radial-gradient(ellipse at 50% 30%, #2e4d6155, transparent 80%); background-size: calc(48px * var(--scene-zoom)) calc(48px * var(--scene-zoom)), calc(48px * var(--scene-zoom)) calc(48px * var(--scene-zoom)), 100% 100%; background-position: 25% 80%; }
.scale-stage::before { content: ''; position: absolute; top: 80%; left: 0; right: 0; height: 1px; background: #91afaa66; pointer-events: none; }
.scale-item, .scale-object { --object-ratio: 1; width: calc(var(--scale-unit) * var(--object-ratio) * var(--scene-zoom)); height: calc(var(--scale-unit) * var(--object-ratio) * var(--scene-zoom)); }
.scale-item { position: absolute; transform: translate(-50%, -100%); }
.scale-object { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); pointer-events: none; }
.scale-reference-art { pointer-events: none; filter: drop-shadow(0 6px 12px #0004); }
.scale-movable { cursor: grab; touch-action: none; user-select: none; z-index: 2; }
.scale-movable:active { cursor: grabbing; }
.scale-movable::before { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: max(100%, 44px); height: max(100%, 44px); }
.scale-movable:focus-visible { outline: 2px dashed #f6cb9e; outline-offset: 6px; }
.scale-challenge.building-scale { --scale-unit: clamp(135px, 14vw, 160px); }
.building-scale .scale-stage { height: 500px; }
.scale-item.building-art, .scale-object.building-art { width: calc(var(--scale-unit) * var(--object-ratio) * var(--scene-zoom) * var(--art-aspect)); }
.scale-challenge.animal-scale { --scale-unit: clamp(110px, 12vw, 140px); }
.scale-item.animal-art, .scale-object.animal-art { height: calc(var(--scale-unit) * var(--object-ratio) * var(--scene-zoom) * var(--art-aspect)); }
.scale-art { display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.scale-zoom-controls { position: absolute; z-index: 5; top: 12px; right: 12px; display: flex; align-items: center; gap: 5px; padding: 4px; border: 1px solid #658291; border-radius: 12px; background: #142432ed; }
.scale-zoom-controls button { width: 40px; height: 40px; border: 0; border-radius: 8px; background: #2d4658; color: #e6f3ed; font-size: 25px; line-height: 1; }
.scale-zoom-controls output { min-width: 42px; text-align: center; color: #bfd2d9; font-size: 12px; }
.scale-object-labels { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; margin: 14px 4px; }
.scale-object-labels > span { display: grid; gap: 4px; }
.scale-object-labels small { color: #a8cdd8; font-size: 10px; letter-spacing: .1em; }
.scale-object-labels > span:last-child { text-align: right; }
.scale-object-labels > span:last-child small { color: #f6cb9e; }
.scale-guess-art.is-revealed { opacity: .38; filter: sepia(1) saturate(2); }
.scale-actual-art { opacity: .85; filter: sepia(1) saturate(2) hue-rotate(35deg) drop-shadow(0 0 1px #b4ec76); }
.scale-reveal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 12px; padding: 12px 14px; border: 1px solid #557366; border-radius: 11px; background: #22372f; color: #d0e9dc; }
.scale-reveal strong { color: #b4ec76; }
.scale-guess-key::before, .scale-actual-key::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 7px; border-radius: 2px; background: #e6bf87; }
.scale-actual-key::before { background: #b4ec76; }
.scale-slider-wrap { max-width: 520px; margin-top: 20px; padding: 16px 18px 12px; border: 1px solid #495c69; border-radius: 14px; background: #172634; }
.scale-slider-wrap label { margin: 0 0 8px; color: #e8e9db; font-size: 14px; }
.scale-slider-wrap input[type="range"] { display: block; width: 100%; height: 32px; min-height: 32px; margin: 0; padding: 0; border: 0; border-radius: 0; appearance: none; background: transparent; cursor: ew-resize; }
.scale-slider-wrap input[type="range"]::-webkit-slider-runnable-track { height: 9px; border: 1px solid #7391a0; border-radius: 999px; background: linear-gradient(90deg, #649ab2, #b4ec76); }
.scale-slider-wrap input[type="range"]::-webkit-slider-thumb { width: 25px; height: 25px; margin-top: -9px; appearance: none; border: 3px solid #172634; border-radius: 50%; background: #f4f2df; box-shadow: 0 0 0 2px #b4ec76, 0 3px 9px rgb(0 0 0 / .4); }
.scale-slider-wrap input[type="range"]::-moz-range-track { height: 9px; border: 1px solid #7391a0; border-radius: 999px; background: linear-gradient(90deg, #649ab2, #b4ec76); }
.scale-slider-wrap input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border: 3px solid #172634; border-radius: 50%; background: #f4f2df; box-shadow: 0 0 0 2px #b4ec76; }
.scale-slider-labels { position: relative; display: flex; justify-content: space-between; color: #9eafba; font-size: 11px; }
.scale-slider-labels span:nth-child(2) { color: #d5e8cc; }
@media (max-width: 560px) { .scale-challenge { --scale-unit: 68px; } .scale-challenge.building-scale { --scale-unit: 100px; } .scale-challenge.animal-scale { --scale-unit: 94px; } .scale-stage, .building-scale .scale-stage { height: 360px; } .scale-object-labels { font-size: 13px; } .scale-object-labels .micro { font-size: 11px; } }
.chart { display: flex; align-items: end; justify-content: space-around; gap: 16px; height: 220px; padding: 18px; margin: 22px 0 4px; background: #16283a; border-radius: 14px; }
.chart-column { display: flex; flex-direction: column; align-items: center; justify-content: end; height: 100%; width: 25%; gap: 4px; }
.chart-column span { width: 100%; max-width: 75px; background: #8dd0dd; border-radius: 6px 6px 0 0; }
.chart-column small { color: #bdc9d1; }
.music-round { display: grid; gap: 18px; margin: 24px 0; max-width: 600px; }
.music-stage { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.music-stage strong { font-size: 22px; }
.music-bars { display: flex; justify-content: space-between; align-items: center; height: 115px; gap: 5px; padding: 18px; border-radius: 14px; border: 1px solid #435363; background: linear-gradient(120deg, #17283a, #293b37); }
.music-bars span { flex: 1; max-width: 15px; min-height: 14px; border-radius: 99px; background: #b4ec76; opacity: .6; }
.music-round > .button { justify-self: start; }
.music-guess { display: grid; gap: 8px; }
.music-guess .actions { margin-top: 4px; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.choice-grid .mode-card { margin-top: 0; }
.local-category-card, .classic-region-card, .classic-option-card { position: relative; }
.card-hit { position: absolute; z-index: 1; inset: 0; width: 100%; border: 0; border-radius: inherit; padding: 0; background: transparent; cursor: pointer; }
.card-hit:focus-visible { outline: 3px solid #b4ec76; outline-offset: -4px; }
.local-category-card h3, .local-category-card p, .classic-region-card h3, .classic-region-card p, .classic-option-card h3, .classic-option-card p { pointer-events: none; }
.local-category-card .button, .classic-region-card .button, .classic-option-card .button { position: relative; z-index: 2; }
.classic-region-card { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; min-height: 226px; overflow: hidden; background: #111c2a; border-color: #526171; }
.classic-region-card::before { content: ""; position: absolute; z-index: -1; inset: 0; background-image: linear-gradient(0deg, rgba(8, 14, 25, .96) 0%, rgba(8, 14, 25, .58) 48%, rgba(8, 14, 25, .15) 100%), var(--region-image); background-position: center; background-size: cover; transition: transform .25s ease; }
.classic-region-card:hover::before, .classic-region-card:focus-within::before { transform: scale(1.04); }
.classic-region-card.world { border-color: #8ca96b; }
.classic-region-grid .classic-region-card.world { grid-column: 1 / -1; }
.classic-region-card h3 { position: relative; margin-bottom: 4px; font-size: 22px; text-shadow: 0 2px 10px #060b14; }
.classic-region-card p { position: relative; margin: 0 0 16px; color: #e1e7ee; text-shadow: 0 2px 8px #060b14; }
.classic-option-card { isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; min-height: 258px; overflow: hidden; background: #111c2a; border-color: #526171; }
.classic-option-card::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background-image: linear-gradient(0deg, rgba(8, 14, 25, .97) 0%, rgba(8, 14, 25, .64) 43%, rgba(8, 14, 25, .12) 100%), var(--option-image, none); background-position: center; background-size: cover; transition: transform .25s ease; }
.classic-option-card:hover::before, .classic-option-card:focus-within::before { transform: scale(1.04); }
.classic-option-card .card-hit { z-index: 2; }
.classic-option-card h3, .classic-option-card p, .classic-option-card .button { position: relative; z-index: 3; }
.classic-option-card h3 { margin-bottom: 4px; font-size: 22px; text-shadow: 0 2px 10px #060b14; }
.choice-grid .classic-option-card p { margin: 0 0 16px; color: #e1e7ee; text-shadow: 0 2px 8px #060b14; }
.classic-flag-matrix { position: absolute; z-index: 0; inset: 0; display: grid; grid-template-columns: repeat(var(--flag-columns), minmax(0, 1fr)); align-content: center; gap: 4px; padding: 12px; pointer-events: none; }
.classic-flag-matrix img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid rgba(255,255,255,.3); border-radius: 2px; }
.classic-option-north-america-countries, .classic-option-north-america-find-countries { --option-image: url('/images/classic-options/north-america-countries.jpg'); }
.classic-option-north-america-capitals { --option-image: url('/images/classic-options/north-america-capitals.jpg'); }
.classic-option-north-america-us-states { --option-image: url('/images/classic-options/us-states.svg'); }
.classic-option-south-america-countries, .classic-option-south-america-find-countries { --option-image: url('/images/classic-options/south-america-countries.jpg'); }
.classic-option-south-america-capitals { --option-image: url('/images/classic-options/south-america-capitals.jpg'); }
.classic-option-africa-countries, .classic-option-africa-find-countries { --option-image: url('/images/classic-options/africa-countries.jpg'); }
.classic-option-africa-capitals { --option-image: url('/images/classic-options/africa-capitals.jpg'); }
.classic-option-asia-countries, .classic-option-asia-find-countries { --option-image: url('/images/classic-options/asia-countries.jpg'); }
.classic-option-asia-capitals { --option-image: url('/images/classic-options/asia-capitals.jpg'); }
.classic-option-europe-countries, .classic-option-europe-find-countries { --option-image: url('/images/classic-options/europe-countries.jpg'); }
.classic-option-europe-capitals { --option-image: url('/images/classic-options/europe-capitals.jpg'); }
.classic-option-oceania-countries, .classic-option-oceania-find-countries { --option-image: url('/images/classic-options/oceania-countries.jpg'); }
.classic-option-oceania-capitals { --option-image: url('/images/classic-options/oceania-capitals.jpg'); }
.classic-option-global-countries, .classic-option-global-find-countries { --option-image: url('/images/classic-options/global-countries.jpg'); }
.classic-option-global-capitals { --option-image: url('/images/classic-options/global-capitals.jpg'); }
.classic-region-card .button, .classic-option-card .button { margin-top: auto; }
.classic-region-card .button { position: relative; }
.classic-region-north-america { --region-image: url('/images/continents/north-america.jpg'); }
.classic-region-south-america { --region-image: url('/images/continents/south-america.jpg'); }
.classic-region-africa { --region-image: url('/images/continents/africa.jpg'); }
.classic-region-asia { --region-image: url('/images/continents/asia.jpg'); }
.classic-region-europe { --region-image: url('/images/continents/europe.jpg'); }
.classic-region-oceania { --region-image: url('/images/continents/oceania.jpg'); }
.classic-region-global { --region-image: url('/images/continents/world.jpg'); }
.classic-region-back { margin: 5px 0 16px; }
.classic-option-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .classic-option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .classic-option-grid { grid-template-columns: 1fr; } }
.practice-continent-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.practice-continent-card { position: relative; isolation: isolate; display: flex; min-height: 205px; flex-direction: column; justify-content: flex-end; align-items: flex-start; overflow: hidden; background: #111c2a; }
.practice-continent-card::before { content: ""; position: absolute; z-index: -1; inset: 0; background-image: linear-gradient(0deg, rgba(8,14,25,.96), rgba(8,14,25,.18)), var(--practice-region-image); background-position: center; background-size: cover; transition: transform .25s ease; }
.practice-continent-card:hover::before, .practice-continent-card:focus-within::before { transform: scale(1.04); }
.practice-continent-card h3, .practice-continent-card p { position: relative; pointer-events: none; }
.practice-continent-card h3 { margin: 0 0 4px; font-size: 21px; }
.practice-continent-card p { min-height: 20px; margin: 0 0 13px; color: #d4d9df; }
.practice-continent-card .card-hit { z-index: 1; }
.practice-continent-card .button { position: relative; z-index: 2; }
.practice-continent-north-america { --practice-region-image: url('/images/continents/north-america.jpg'); }
.practice-continent-south-america { --practice-region-image: url('/images/continents/south-america.jpg'); }
.practice-continent-africa { --practice-region-image: url('/images/continents/africa.jpg'); }
.practice-continent-asia { --practice-region-image: url('/images/continents/asia.jpg'); }
.practice-continent-europe { --practice-region-image: url('/images/continents/europe.jpg'); }
.practice-continent-world { --practice-region-image: url('/images/continents/world.jpg'); }
.practice-continent-oceania { --practice-region-image: url('/images/continents/oceania.jpg'); }
.practice-map-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.practice-map-heading h2 { margin: 14px 0 4px; }
.practice-map-heading .micro { margin-top: 4px; }
.practice-explorer-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: 18px; align-items: start; }
.practice-explorer-layout .map-wrap { margin-top: 8px; }
.practice-country-card { min-height: 320px; margin-top: 8px; padding: 20px; border: 1px solid #3c4b5b; border-radius: 16px; background: #151c27; }
.practice-country-heading { display: flex; align-items: center; gap: 14px; min-height: 68px; margin-bottom: 18px; }
.practice-country-heading h3 { margin: 2px 0 0; font-size: 22px; }
.practice-country-heading .eyebrow { margin: 0; }
.practice-empty-state { display: flex; min-height: 275px; flex-direction: column; justify-content: center; align-items: flex-start; }
.practice-empty-state h3 { margin: 14px 0 4px; font-size: 20px; }
.practice-empty-state p { margin: 5px 0; color: #b0bac4; font-size: 14px; }
.practice-empty-globe { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #53666f; border-radius: 50%; color: #b4ec76; font-size: 28px; }
.practice-country-flag, .practice-no-flag { display: grid; place-items: center; width: 74px; height: 55px; flex: 0 0 74px; object-fit: cover; border: 1px solid #687585; border-radius: 7px; background: #f1f0ea; }
.practice-no-flag { color: #6b7280; font-size: 24px; }
.practice-fact { margin: 16px 0; }
.practice-fact .eyebrow { margin: 0 0 5px; color: #a9b2bf; font-size: 10px; }
.practice-fact strong { font-size: 17px; }
.practice-city-list { display: grid; gap: 9px; padding: 0; margin: 8px 0; list-style: none; }
.practice-city-list li { display: flex; align-items: center; gap: 9px; color: #e2e5e9; font-size: 14px; }
.city-dot { width: 7px; height: 7px; border-radius: 50%; background: #e8bd73; box-shadow: 0 0 0 2px #394254; }
.practice-city-marker { fill: #e8bd73; stroke: #15212b; stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.practice-city-marker.capital { fill: #ff7669; stroke: #fff0ce; stroke-width: 1.4; }
.practice-country-area { cursor: pointer; }
.practice-country-area.practice-selected { fill: #b4ec76; stroke: #fff0ce; stroke-width: 1.8; }
.practice-study-map .practice-country-area:hover, .practice-study-map .practice-country-area:focus { fill: #e8bd73; outline: none; }
.practice-study-map .practice-country-area.practice-selected:hover { fill: #b4ec76; }
.practice-source-note { color: #9da6b3; font-size: 12px; margin-top: 14px; }
.practice-source-note summary { cursor: pointer; color: #c4cbd5; }
.practice-source-note p { margin: 8px 0; }
@media (max-width: 900px) { .practice-explorer-layout { grid-template-columns: minmax(0, 1fr); } .practice-country-card { min-height: 0; } }
@media (max-width: 760px) { .practice-continent-grid { grid-template-columns: 1fr; } .practice-map-heading { align-items: start; } .practice-map-heading > .pill { display: none; } }
.local-category-card { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; min-height: 226px; overflow: hidden; background: #111c2a; border-color: #526171; }
.local-category-card::before { content: ""; position: absolute; z-index: -1; inset: 0; background-image: linear-gradient(0deg, rgba(8, 14, 25, .96) 0%, rgba(8, 14, 25, .62) 48%, rgba(8, 14, 25, .18) 100%), var(--category-image); background-position: center; background-size: cover; transition: transform .25s ease; }
.local-category-card:hover::before, .local-category-card:focus-within::before { transform: scale(1.04); }
.local-category-card h3 { position: relative; margin-bottom: 4px; font-size: 22px; text-shadow: 0 2px 10px #060b14; }
.local-category-card p { position: relative; margin: 0 0 16px; color: #e1e7ee; text-shadow: 0 2px 8px #060b14; }
.local-category-card .button { position: relative; }
.category-geography-countries { --category-image: url('/images/categories/countries.jpg'); }
.category-geography-capitals { --category-image: url('/images/categories/capitals.jpg'); }
.category-science { --category-image: url('/images/categories/science.jpg'); }
.category-history { --category-image: url('/images/categories/history.jpg'); }
.category-finance { --category-image: url('/images/categories/finance.jpg'); }
.category-scale { --category-image: url('/images/categories/scale.jpg'); }
.category-brand-logos { --category-image: url('/images/categories/brand-logos.jpg'); }
.category-music { --category-image: url('/images/categories/music.jpg'); }
@media (prefers-reduced-motion: reduce) { .local-category-card::before, .classic-region-card::before { transition: none; } }
@media (max-width: 560px) { .choice-grid { grid-template-columns: 1fr; } }
.feedback { border-radius: 15px; padding: 16px 18px; margin-top: 20px; background: #29382e; border: 1px solid #476540; }
.feedback.miss { background: #3a2d2f; border-color: #745050; }
.feedback p { margin: 5px 0; color: #cbd3cf; }
.feedback strong { font-size: 20px; }
.score-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px solid #39404d; padding: 14px 0; }
.score-line:first-of-type { border-top: 0; }
.classic-clock { padding: 18px; margin-bottom: 24px; border: 1px solid #6c9484; border-radius: 16px; background: #25353e; }
.classic-clock > span, .classic-clock small { display: block; color: #c3ccd2; font-size: 12px; }
.classic-clock strong { display: block; color: #b4ec76; font-size: 48px; line-height: 1.3; font-variant-numeric: tabular-nums; margin: 5px 0; }
.classic-clock.urgent, .classic-clock.expired { border-color: #e77d70; }
.classic-clock.urgent strong, .classic-clock.expired strong { color: #ffae9f; }
.classic-clock + .classic-end-round { margin-top: -12px; }
.classic-end-round { margin: 0 0 24px; }
.classic-end-round .button { width: 100%; }
@media (max-width: 760px) { .grid:has(.classic-clock) > aside { grid-row: 1; } .classic-clock { margin-bottom: 14px; padding: 12px 16px; } .classic-clock strong { font-size: 36px; } }
.score-line strong { font-size: 24px; }
.progress { display: flex; gap: 7px; margin: 15px 0 26px; }
.progress span { flex: 1; height: 5px; background: #3a4350; border-radius: 9px; }
.progress span.done { background: #b4ec76; }
.mode-card { border: 1px solid #455363; border-radius: 15px; padding: 17px; margin-top: 22px; }
.mode-card p { color: #adb6c3; margin-bottom: 0; }
.lobby-form { max-width: 450px; display: grid; gap: 14px; }
.lobby-form .button { justify-self: start; }
.notice { padding: 14px 16px; border: 1px solid #69744f; background: #303b2a; border-radius: 12px; color: #d9e4cf; }
.error { color: #ffae9f; }
footer { color: #7f8794; font-size: 12px; border-top: 1px solid #303441; margin-top: 70px; padding-top: 20px; }
@media (max-width: 760px) { .grid { grid-template-columns: minmax(0, 1fr); } .page-head { display: block; } .round-toolbar { flex-direction: row; justify-content: space-between; align-items: center; margin-top: 12px; } .map-caption { flex-direction: column; } header { margin-bottom: 18px; } }
  @media (max-width: 560px) { .answer-grid, .match-grid { grid-template-columns: 1fr; } .scale-demo { --reference-diameter: 125px; gap: 8px; } .place-form > div { flex-wrap: wrap; } .place-form .button { width: 100%; } }
@media (max-width: 760px) { .continent-counters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.practice-study-map .map-area.practice-country-ineligible,
.practice-study-map .map-area.practice-country-ineligible:hover,
.practice-study-map .map-area.practice-country-ineligible:focus {
  fill: #e8aaa5;
  cursor: default;
  pointer-events: none;
}
.map-loading { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 220px; color: #c3ccd2; font-size: 14px; }
.map-loading-spinner { width: 18px; height: 18px; border: 2px solid #78909b; border-top-color: #b4ec76; border-radius: 50%; animation: map-loading-spin .8s linear infinite; }
@keyframes map-loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .map-loading-spinner { animation-duration: 2.4s; } }