.geo-view { --geo-ocean: #0b1930; }
.geo-topline, .geo-game-header, .geo-game-header-right, .geo-actions, .geo-learning-toolbar, .geo-map-tools, .geo-map-controls, .geo-map-pan { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.geo-topline { justify-content:space-between; margin-bottom:18px; }
.geo-back { padding-left:0; }
.geo-eyebrow, .geo-kicker { color:var(--accent2); font-size:11px; font-weight:800; letter-spacing:.09em; }
.geo-eyebrow { color:var(--muted); }
.geo-intro { position:relative; overflow:hidden; display:grid; grid-template-columns:1.5fr 1fr; gap:24px; align-items:center; padding:34px; border:1px solid var(--line); border-radius:24px; background:radial-gradient(ellipse at top right,rgba(124,92,255,.25),transparent 70%),var(--card); }
.geo-intro h2 { font-size:30px; line-height:1.3; margin:12px 0; }
.geo-intro p, .geo-muted { color:var(--muted); line-height:1.7; }
.geo-intro p { font-size:15px; }
.geo-actions { margin-top:24px; }
.geo-intro-art { position:relative; min-height:200px; display:grid; place-items:center; }
.geo-demo-flag { position:absolute; width:162px; height:122px; object-fit:contain; padding:8px; background:#eef2ff; border-radius:10px; box-shadow:0 14px 30px #0007; transform:translate(calc((var(--flag-index) - 1)*45px),calc((var(--flag-index) - 1)*-30px)) rotate(calc((var(--flag-index) - 1)*12deg)); }
.geo-globe { width:180px; height:180px; border:1px solid #7c5cff88; border-radius:50%; display:grid; place-items:center; color:var(--accent2); font-size:150px; line-height:1; background:radial-gradient(circle at 35% 30%,#29d3c233,transparent 70%); box-shadow:0 0 0 25px #7c5cff0c,0 0 0 50px #7c5cff06; }
.geo-levels { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin:20px 0; }
.geo-level { display:flex; align-items:center; gap:8px; color:var(--muted); background:#17213d80; border:1px solid var(--line); padding:10px; border-radius:10px; font-size:11px; }
.geo-level b { display:grid; place-items:center; background:var(--line); border-radius:50%; width:24px; height:24px; flex-shrink:0; }
.geo-level.is-active { color:var(--text); border-color:#7c5cff99; background:#7c5cff18; }
.geo-level.is-active b { background:var(--accent); color:#fff; }
.geo-score-rule { color:var(--muted); font-size:12px; line-height:1.8; margin:0 0 28px; }
.geo-duel-box { border:1px solid var(--line); background:linear-gradient(125deg,var(--card),var(--bg2)); padding:28px; border-radius:20px; }
.geo-duel-box h2 { margin:8px 0 12px; font-size:25px; }
.geo-duel-box > p { font-size:14px; }
.geo-duel-actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:22px; }
.geo-join { display:flex; gap:8px; margin-left:auto; }
.geo-join input { width:120px; min-width:0; text-transform:uppercase; letter-spacing:3px; text-align:center; background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:12px; padding:10px 8px; font-size:17px; }
.geo-login { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-top:20px; font-size:14px; }
.geo-login span { flex:1; min-width:200px; line-height:1.6; color:var(--muted); }
.geo-sources { font-size:11px; color:var(--muted); line-height:1.8; margin-top:24px; }
.geo-sources summary { cursor:pointer; }
.geo-loading, .geo-notice, .geo-waiting { padding:60px 24px; text-align:center; line-height:1.7; border:1px solid var(--line); border-radius:20px; background:var(--card); }
.geo-notice p { margin-bottom:20px; }
.geo-waiting > * + * { margin-top:20px; }
.geo-waiting .spinner { margin-left:auto; margin-right:auto; }
.geo-waiting .room-code { display:block; }
.geo-game-header { justify-content:space-between; }
.geo-game-header h2 { margin:8px 0 0; font-size:26px; }
.geo-clock { width:60px; height:60px; border:1px solid #29d3c255; color:var(--accent2); border-radius:18px; background:#29d3c211; display:grid; place-items:center; font-size:28px; font-variant-numeric:tabular-nums; font-weight:900; }
.geo-clock.is-low { color:var(--red); border-color:#f8717188; background:#f8717111; }
.geo-progress { height:4px; background:var(--line); border-radius:5px; overflow:hidden; margin-bottom:24px; }
.geo-progress > span { display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent2)); transition:width .2s ease; }
.geo-solo-score { color:var(--gold); text-align:right; font-size:14px; font-weight:700; margin-bottom:12px; }
.geo-question { text-align:center; font-size:23px; line-height:1.6; margin:14px 0 20px; outline:none; }
.geo-flag-stage { display:grid; place-items:center; min-height:255px; background:radial-gradient(ellipse at center,#7c5cff12,transparent 70%); border:1px solid var(--line); border-radius:20px; margin-bottom:24px; }
.geo-question-flag { width:250px; height:180px; max-width:80%; object-fit:contain; filter:drop-shadow(0 10px 20px #0005); }
.geo-options { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.geo-option { display:flex; align-items:center; gap:16px; color:var(--text); background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; text-align:left; font-size:16px; font-weight:700; transition:border-color .15s,background .15s; }
.geo-option:hover:not(:disabled) { background:var(--card2); border-color:var(--accent); }
.geo-option-letter { display:grid; place-items:center; width:30px; height:30px; flex-shrink:0; border:1px solid var(--line); border-radius:8px; color:var(--muted); font-size:12px; }
.geo-option.is-selected { border-color:var(--accent); background:#7c5cff22; }
.geo-option.is-correct { border-color:var(--green); background:#34d39920; }
.geo-option.is-wrong { border-color:var(--red); background:#f8717120; }
.geo-option:disabled { cursor:default; }
.geo-answer-status { text-align:center; min-height:34px; color:var(--muted); font-size:14px; line-height:1.7; margin-top:20px; }
.geo-answer-status.is-correct { color:var(--green); }
.geo-answer-status.is-wrong { color:var(--gold); }
.geo-next { display:block; margin:18px auto 0; min-width:210px; }
.geo-duel-scores { display:grid; grid-template-columns:1fr 50px 1fr; gap:12px; text-align:center; margin-bottom:20px; }
.geo-duel-scores > div { padding:15px; background:var(--card); border:1px solid var(--line); border-radius:14px; min-width:0; }
.geo-duel-scores span { display:block; font-size:13px; overflow-wrap:anywhere; }
.geo-duel-scores strong { display:block; font-size:27px; margin:4px 0; color:var(--accent2); }
.geo-duel-scores small { color:var(--muted); font-size:11px; }
.geo-opp-score strong { color:var(--gold); }
.geo-duel-scores .geo-versus { align-self:center; color:var(--muted); font-weight:900; }
.geo-ready { padding:60px 20px; text-align:center; }
.geo-ready-icon { font-size:70px; color:var(--accent2); }
.geo-ready h3 { font-size:30px; margin:20px 0 12px; }
.geo-result { padding:42px 24px; border:1px solid var(--line); background:radial-gradient(ellipse at top,#7c5cff22,transparent 70%),var(--card); border-radius:24px; text-align:center; }
.geo-result h2 { margin:16px 0; font-size:28px; }
.geo-result-value { font-size:48px; font-weight:900; color:var(--gold); margin-bottom:10px; }
.geo-result .geo-actions { justify-content:center; }
.geo-review { margin-top:28px; }
.geo-review h3 { font-size:20px; margin-bottom:14px; }
.geo-review-list { display:grid; grid-template-columns:1fr 1fr; gap:10px; list-style:none; }
.geo-review-list li { display:flex; gap:14px; align-items:center; padding:14px; background:var(--card); border:1px solid var(--line); border-left:3px solid var(--red); border-radius:10px; min-width:0; }
.geo-review-list li.is-correct { border-left-color:var(--green); }
.geo-review-list img { width:45px; height:34px; object-fit:contain; flex-shrink:0; }
.geo-review-list li > div { min-width:0; flex:1; }
.geo-review-list strong { display:block; font-size:13px; overflow-wrap:anywhere; }
.geo-review-list .geo-muted { display:block; font-size:11px; margin-top:4px; }
.geo-review-list .btn { font-size:11px; padding:8px; }
.geo-learning-toolbar { margin-bottom:20px; align-items:flex-end; }
.geo-learning-toolbar label { display:flex; flex-direction:column; gap:8px; color:var(--muted); font-size:12px; flex:1; min-width:180px; }
.geo-learning-toolbar select { appearance:auto; font:inherit; font-size:15px; padding:12px; border:1px solid var(--line); background:var(--card); color:var(--text); border-radius:10px; max-width:100%; }
.geo-learning-toolbar .chip { padding:12px; font-size:12px; }
.geo-map-frame { border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--geo-ocean); }
.geo-map-tools { justify-content:space-between; border-bottom:1px solid var(--line); padding:10px; background:var(--bg2); gap:8px; }
.geo-map-controls, .geo-map-pan { gap:6px; flex-wrap:nowrap; }
.geo-map-control { width:36px; height:36px; display:grid; place-items:center; padding:0; border-radius:9px; font-size:20px; }
.geo-map-reset { padding:8px 10px; font-size:11px; border-radius:9px; }
.geo-zoom-label { font-size:11px; color:var(--muted); min-width:42px; text-align:center; }
.geo-map { display:block; width:100%; height:auto; aspect-ratio:960/500; touch-action:none; user-select:none; }
.geo-map-ocean { fill:var(--geo-ocean); }
.geo-country-background { fill:#14223b; stroke:#233552; stroke-width:.5; vector-effect:non-scaling-stroke; pointer-events:none; }
.geo-country { fill:#34466d; stroke:#12223f; stroke-width:.8; cursor:pointer; transition:fill .12s; }
.geo-country:hover, .geo-country:focus-visible { fill:#7c5cff; stroke:#d0c4ff; stroke-width:1.5; outline:none; }
.geo-country.is-learned { fill:#365d69; }
.geo-country.is-selected { fill:#a68aff; stroke:#ddd5ff; stroke-width:1.6; }
.geo-country.is-correct { fill:#34d399; stroke:#d0ffed; stroke-width:2; }
.geo-country.is-wrong { fill:#f87171; stroke:#ffe1e1; stroke-width:1.6; }
.geo-map.is-locked .geo-country { cursor:default; }
.geo-map.is-locked .geo-country:not(.is-correct):not(.is-wrong):not(.is-selected):hover { fill:#34466d; stroke:#12223f; stroke-width:.8; }
.geo-map-help { border-top:1px solid var(--line); padding:10px 12px; color:var(--muted); font-size:11px; line-height:1.6; }
.geo-country-detail { display:flex; align-items:center; gap:24px; padding:24px; border:1px solid var(--line); border-radius:18px; margin-top:18px; background:var(--card); min-height:130px; }
.geo-country-detail img { width:100px; height:75px; object-fit:contain; }
.geo-country-detail h2 { margin:6px 0; font-size:26px; }
.geo-country-detail p { font-size:13px; }
.geo-view button:focus-visible, .geo-view input:focus-visible, .geo-view select:focus-visible, .geo-view summary:focus-visible { outline:3px solid var(--accent2); outline-offset:3px; }
@media (max-width:700px) {
  .geo-intro { padding:24px; grid-template-columns:1fr; }
  .geo-intro-art { display:none; }
  .geo-intro h2 { font-size:26px; }
  .geo-level { padding:8px 4px; gap:6px; flex-direction:column; text-align:center; font-size:9px; }
  .geo-levels { gap:5px; }
  .geo-duel-box { padding:22px; }
  .geo-join { margin-left:0; }
  .geo-review-list { grid-template-columns:1fr; }
  .geo-map-pan { margin-left:auto; }
  .geo-map { min-height:240px; }
}
@media (max-width:450px) {
  .geo-view .page-title { font-size:27px; }
  .geo-options { grid-template-columns:1fr; gap:8px; }
  .geo-option { padding:12px 14px; font-size:15px; }
  .geo-flag-stage { min-height:205px; margin-bottom:16px; }
  .geo-question-flag { width:200px; height:150px; }
  .geo-question { font-size:20px; }
  .geo-game-header h2 { font-size:21px; }
  .geo-game-header-right { gap:5px; }
  .geo-game-header-right .btn { padding:8px 10px; font-size:12px; }
  .geo-clock { width:46px; height:48px; font-size:25px; border-radius:12px; }
  .geo-duel-scores { grid-template-columns:1fr 26px 1fr; gap:5px; }
  .geo-duel-scores > div { padding:10px; }
  .geo-duel-scores span { font-size:11px; }
  .geo-duel-actions > .btn { flex:1; font-size:13px; padding:12px 8px; }
  .geo-join { width:100%; }
  .geo-join input { flex:1; }
  .geo-country-detail { gap:16px; padding:18px; }
  .geo-country-detail img { width:75px; }
  .geo-country-detail h2 { font-size:22px; }
  .geo-map-tools { gap:8px; }
  .geo-map-pan { width:100%; justify-content:center; }
  .geo-map-controls { width:100%; justify-content:center; }
  .geo-result-value { font-size:40px; }
}
@media (prefers-reduced-motion:reduce) {
  .geo-progress > span, .geo-option, .geo-country { transition:none; }
}