:root{font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#11345c;background:#f6f9f9}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 12% 5%,#dff3f7,transparent 30%),radial-gradient(circle at 95% 25%,#fff1d5,transparent 34%),#f6f9f9;min-height:100vh}header{max-width:1080px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:20px 24px}.brand{font-size:1.4rem;font-weight:900;display:flex;align-items:center;gap:10px}.brand img{width:54px}.controls{display:flex;gap:8px}button{cursor:pointer;font:inherit;font-weight:750;border:0;border-radius:12px;padding:12px 17px}button:disabled{opacity:.55;cursor:default}.small,.outline{background:white;color:#18446c;border:1px solid #cddfe7}.small{padding:9px 12px}.primary{color:white}.blue{background:#167ed0}.green{background:#098f7b}button:hover:not(:disabled){filter:brightness(.95)}main{max-width:960px;margin:20px auto 60px;padding:0 18px}.hero{text-align:center}.hero h1{font-size:clamp(1.8rem,4vw,2.9rem);margin:18px 0 6px}.hero>p{color:#607489}.modes{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:32px 0}.mode{background:#fff;border:1px solid #e1e9ec;border-radius:24px;box-shadow:0 10px 30px #193a5312;padding:30px 24px;display:flex;flex-direction:column;align-items:center;gap:10px}.mode img{width:130px;height:130px}.mode h2{font-size:1.6rem;margin:4px 0 0}.mode p{color:#65788c;margin:0 0 12px}.mode button{width:100%;max-width:300px}.note,footer{font-size:.88rem;color:#718297;text-align:center}footer{padding:25px}.gamebar{display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:800}.progress{display:flex;gap:5px;margin:22px 0}.progress>div{height:9px;flex:1;background:#dce6eb;border-radius:8px}.progress .filled{background:#159a89}.clue{background:#fff;border:1px solid #dfe9ed;border-radius:20px;padding:32px 24px;text-align:center;box-shadow:0 8px 24px #153b5310}.eyebrow{text-transform:uppercase;letter-spacing:.12em;color:#158a86;font-size:.8rem;font-weight:900}.clue h2{font-size:clamp(1.3rem,3vw,2rem);margin:15px 0}#guessForm{margin:20px auto;max-width:620px;display:flex;flex-wrap:wrap;gap:9px;align-items:end}#guessForm label{width:100%;font-weight:800}#guess{min-width:200px;flex:1;border:1px solid #bed2dd;border-radius:12px;padding:13px;font-size:1rem}#message{margin-top:15px;text-align:center;color:#bd562a;font-weight:700}.entry{display:flex;justify-content:space-between;gap:12px;align-items:center;background:#fff;border:1px solid #e2e9ed;border-radius:14px;padding:14px 18px;margin:9px 0}.entry small{color:#667d8e}.temp{font-weight:900;border-radius:18px;padding:7px 11px;background:#eef5f7}.hot{color:#c44927;background:#ffe5d8}.warm{color:#a46b05;background:#fff1c8}.cool{color:#237aa6;background:#e3f3fc}.freezing{color:#3857ad;background:#e7ebff}#result{background:#e9f8ef;border:1px solid #b9e3c9;padding:24px;border-radius:18px;text-align:center;margin-top:24px}#result img{width:70px}#result h2{margin:10px 0}#result button{margin:6px}@media(max-width:640px){.modes{grid-template-columns:1fr}.mode{padding:22px}.mode img{width:100px;height:100px}.brand{font-size:1rem}.brand img{width:40px}.gamebar{font-size:.8rem}#guessForm button{width:100%}}

/* GeoWhiz branding */
.brand img{width:48px;height:48px;object-fit:contain}.brand span{color:#07376b;letter-spacing:-.035em}.hero-logo{display:block;max-width:min(460px,85%);height:175px;object-fit:contain;margin:0 auto -12px}.mode:first-child{border-top:5px solid #167ed0}.mode:nth-child(2){border-top:5px solid #098f7b}.mode img{object-fit:contain}.hero h1{margin-top:5px}@media(max-width:640px){.hero-logo{height:130px}.brand img{width:36px;height:36px}}

/* Brief victory celebration; respects reduced-motion preferences. */
.confetti-layer{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:9999}
.confetti-layer i{position:absolute;top:-20px;left:var(--x);width:9px;height:16px;border-radius:2px;opacity:0;animation:confetti-fall var(--duration) ease-in var(--delay) forwards}
@keyframes confetti-fall{0%{transform:translate3d(0,-20px,0) rotate(0);opacity:1}90%{opacity:1}100%{transform:translate3d(var(--drift),105vh,0) rotate(780deg);opacity:0}}
#result.win-pop{animation:victory-pop .55s cubic-bezier(.18,.8,.25,1.2)}
@keyframes victory-pop{0%{transform:scale(.88)}65%{transform:scale(1.035)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.confetti-layer{display:none}#result.win-pop{animation:none}}

/* Centered, square icons and discreet local progress reset. */
.mode img{display:block;aspect-ratio:1/1;object-fit:contain;object-position:center;margin-inline:auto}

.score-card{padding:16px;border-radius:14px;background:linear-gradient(120deg,#e6f5ff,#e9faee);font-weight:800;font-size:1.15rem;color:#10365b;text-align:center}

.shock-reaction{display:inline-block;margin-top:7px;font-weight:700;color:#a63c28;line-height:1.4}

/* Post-game ad: never shown until the results panel is visible. */
.end-ad{width:100%;max-width:720px;margin:22px auto;padding:14px 8px;border-top:1px solid #dce4ec;text-align:center;min-height:80px}
.end-ad-label{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#697888;margin-bottom:10px}

.warm-reaction{display:inline-block;margin-top:7px;font-weight:700;color:#16795f;line-height:1.4}

/* Interactive result map (shown only after the answer is revealed). */
.result-map-section{margin:18px auto;max-width:720px;text-align:left}
.result-map-section h3{font-size:1.05rem;margin:8px 0 10px;text-align:center}
.result-map{height:320px;width:100%;border:2px solid #c5dbe0;border-radius:15px;overflow:hidden;background:#e6eef0;z-index:0}
.map-caption{text-align:center;color:#587183;font-size:.8rem;margin:8px 0 16px}
#result .result-map img{width:auto;max-width:none}
@media(max-width:640px){.result-map{height:260px}}

/* Static world map: no external map tiles */
.result-map.static-world-map{height:auto;aspect-ratio:2/1;position:relative;overflow:hidden;background:#d9eef7}
#result .result-map .static-map-background{display:block;width:100%;height:100%;max-width:100%;object-fit:fill}
.static-map-marker{position:absolute;width:16px;height:16px;border:3px solid white;border-radius:50%;background:#ec443a;box-shadow:0 0 0 3px rgba(220,50,40,.3),0 2px 7px #3338;transform:translate(-50%,-50%);pointer-events:none}
@media(max-width:640px){.static-map-marker{width:13px;height:13px;border-width:2px}}

.country-fact{max-width:720px;margin:16px auto 20px;padding:18px 20px;background:#f5f9ef;border:1px solid #cfe3c6;border-radius:15px;text-align:left}
.country-fact h3{margin:0 0 9px;font-size:1.1rem;color:#255d3b}.country-fact p{margin:0 0 12px;line-height:1.55}.fact-link{color:#1465a5;font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* Atlasombra: preserve all previously revealed clues */
.clue h2{font-size:1rem;text-align:left;display:grid;gap:10px;margin:15px 0 0;font-weight:400}
.clue-item{display:flex;flex-direction:column;gap:5px;background:#f4f9fb;border:1px solid #dce9ed;border-radius:12px;padding:12px 15px}
.clue-item-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.07em;color:#127d80;font-weight:900}
.clue-item-body{font-size:1.08rem;color:#183f5d;line-height:1.4;font-weight:650}

/* ATLASOMBRA / Midnight Atlas visual identity */
:root{color-scheme:dark;--night:#061326;--panel:#0c2540;--panel2:#103150;--gold:#f5ca72;--gold2:#c28a30;--ink:#f2f6ff;--muted:#adc0d2}
html,body{background:#061326;color:var(--ink)}
body{background:radial-gradient(ellipse at 50% -10%,#16466d 0%,transparent 53%),radial-gradient(ellipse at 100% 55%,#0d3045 0%,transparent 45%),#061326}
header{border-bottom:1px solid #b28a463d;max-width:none;padding-inline:max(22px,calc((100vw - 1080px)/2))}
.brand span{color:var(--gold);letter-spacing:.035em;text-shadow:0 2px 16px #d4a95e40}
.brand img{border-radius:50%;filter:drop-shadow(0 0 9px #d7a44a66)}
.hero-logo{height:auto;max-width:min(510px,92%);max-height:350px;margin:0 auto -6px;object-fit:contain;filter:drop-shadow(0 10px 24px #0009)}
.hero h1{color:#fff0ce;font-family:Georgia,serif;letter-spacing:-.025em}
.hero>p,.mode p,.note,footer{color:var(--muted)}
.mode,.clue,.entry{background:linear-gradient(145deg,#102c49,#091d33);border:1px solid #c89d5047;box-shadow:0 12px 35px #0005}
.mode:first-child,.mode:nth-child(2){border-top:3px solid #e8b65d}
.mode h2,.gamebar{color:#f8d590}
.mode img{filter:drop-shadow(0 5px 14px #0007)}
button{border-radius:11px;transition:transform .15s,filter .15s}
button:hover:not(:disabled){filter:brightness(1.13);transform:translateY(-1px)}
.primary.blue,.primary.green{background:linear-gradient(135deg,#d6a34d,#f6d889);color:#07192b;border:1px solid #ffe6a2}
.small,.outline{background:#102a45;color:#f5d08b;border:1px solid #a67d3f99}
.progress>div{background:#183b5b}.progress .filled{background:linear-gradient(90deg,#b47a29,#f4d487)}
.eyebrow,.clue-item-label{color:#e7b861}
.clue-item{background:#102c48;border:1px solid #b18a4a50}
.clue-item-body{color:#f1f5ff}
#guess{background:#0a2037;color:white;border:1px solid #aa854b}
#guessForm label{color:#f0d092}
#message{color:#ffb6a3}
.entry small{color:#bacddd}
.temp{background:#163753;color:#e7f4ff}
.hot{color:#ffb399;background:#613527}.warm{color:#ffe3a3;background:#58431d}.cool{color:#9cdbff;background:#21425c}.freezing{color:#bdc9ff;background:#283a63}
#result{background:linear-gradient(150deg,#0e304a,#0b2137);border:1px solid #d1a45b7a;color:#f5f7ff}
.score-card{background:linear-gradient(120deg,#163956,#5a431f);color:#ffdda0}
.country-fact{background:#102d40;border:1px solid #9b804f;color:#f4f5f5}
.country-fact h3{color:#ffcf78}.fact-link{color:#90d9ff}
.result-map{border-color:#b58a46}
.end-ad{border-top-color:#c9a15b55}.end-ad-label,.map-caption{color:#a7bed1}
.leaderboard{max-width:760px;margin:0 auto 24px;padding:16px 20px;border:1px solid #c69a5070;border-radius:17px;background:linear-gradient(105deg,#132f4a,#0b1d32);box-shadow:0 8px 30px #0005;text-align:center}
.leaderboard-heading{color:#f6d08b;font-weight:850;letter-spacing:.025em}
.leaderboard-heading small{display:block;color:#aebdd0;font-weight:450;font-size:.72rem;margin-top:3px}
.leaderboard-values{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}
.leaderboard-values>div{border:1px solid #c69a5044;border-radius:10px;padding:10px;background:#07192d;display:grid;gap:4px;font-size:.82rem;color:#b9d0e0}
.leaderboard-values strong{font-size:1.55rem;color:#ffdc95;font-variant-numeric:tabular-nums}
@media(max-width:640px){.hero-logo{max-height:240px}.leaderboard{margin:0 auto 16px;padding:12px}.leaderboard-values strong{font-size:1.25rem}}
