:root {
  color-scheme: dark;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #e9f0ef;
  background: #091623;
  --mint: #94e8c7;
  --ink: #e9f0ef;
  --muted: #a1b8c3;
  --border: #365062;
  --panel: #0b1a28f2;
  --gutter: clamp(10px, 1.8vw, 24px);
  --left: max(var(--gutter), calc(env(safe-area-inset-left) + 4px));
  --right: max(var(--gutter), calc(env(safe-area-inset-right) + 4px));
  --top: max(10px, calc(env(safe-area-inset-top) + 4px));
  --bottom: max(10px, calc(env(safe-area-inset-bottom) + 4px));
  --icon-size: 38px;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
button, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
button:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
[hidden] { display: none !important; }

.symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.icon { display: block; width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }

.game { position: relative; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; isolation: isolate; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.map { position: absolute; inset: 0; touch-action: none; cursor: grab; user-select: none; background: radial-gradient(ellipse at 50% 45%, #193447 0, #102638 48%, #091623 100%); }
.map.dragging, .map.dragging .country, .map.dragging .marker { cursor: grabbing; }
.map:focus { outline: none; }
.map:focus-visible { box-shadow: inset 0 0 0 2px var(--mint); }
#atlas { width: 100%; height: 100%; display: block; }
.graticule { fill: none; stroke: #557a8e; stroke-opacity: .38; stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.ocean-labels { fill: #7b9cae; opacity: .75; font: 600 10px system-ui, sans-serif; letter-spacing: 3.1px; text-anchor: middle; pointer-events: none; }
.country { fill: var(--land, #38586b); stroke: #8eafbc; stroke-opacity: .65; stroke-width: .8; vector-effect: non-scaling-stroke; stroke-linejoin: round; fill-rule: evenodd; cursor: pointer; }
.country[data-tone="1"] { --land: #36596b; }
.country[data-tone="2"] { --land: #3b5d6e; }
.country[data-tone="3"] { --land: #34566a; }
.country[data-tone="4"] { --land: #3f6070; }
.country[data-tone="5"] { --land: #39576a; }
.country[data-tone="6"] { --land: #3b5968; }
.country[data-tone="7"] { --land: #335668; }
.country[data-id="AQ"] { --land: #294353; stroke-opacity: .45; }
.marker { cursor: pointer; }
.marker .hit { fill: transparent; }
.marker .dot { fill: #a5bdc6; stroke: #1a3547; stroke-width: 1; vector-effect: non-scaling-stroke; }
.city-quiz .country { pointer-events: none; }
.city-quiz .marker .dot { fill: #d4e8ea; }
@media (hover: hover) {
  .map:not(.dragging) .country:hover { fill: #5c8295; stroke: #d2e4ea; stroke-opacity: 1; }
  .map:not(.dragging) .marker:hover .dot { fill: #e3f3f4; }
}
#atlas .country.missed, #atlas .marker.missed .dot { fill: #b36563; stroke: #ffd3c5; stroke-opacity: 1; }
#atlas .country.found, #atlas .marker.found .dot { fill: #82dbb6; stroke: #e1fff3; stroke-opacity: 1; }
#atlas .country.revealed, #atlas .marker.revealed .dot { fill: #d6ac69; stroke: #ffebc4; stroke-opacity: 1; }
.answer-pin { fill: none; stroke: var(--mint); stroke-width: 1.5; pointer-events: none; }
.answer-pin.revealed { stroke: #ffcf91; }
.answer-pin circle:last-child { fill: currentColor; stroke: none; color: var(--mint); }
.answer-pin.revealed circle:last-child { color: #ffcf91; }
.aim { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #f0fffa; pointer-events: none; }
.aim .icon { width: 27px; height: 27px; }
.map:focus-visible .aim { display: block; }

.top-bar { position: absolute; top: var(--top); left: var(--left); right: var(--right); display: flex; align-items: center; justify-content: space-between; gap: 8px; pointer-events: none; }
.wordmark, .settings { display: flex; align-items: center; gap: 6px; }
.wordmark img { flex: none; }
.brand { font: 23px/.98 Georgia, serif; letter-spacing: -.055em; }
.settings { margin-right: calc(var(--icon-size) + 6px); pointer-events: auto; }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 15px; box-shadow: 0 10px 32px #050e1957; }
.region-control { position: relative; display: flex; align-items: center; color: var(--ink); background: var(--panel); border: 1px solid var(--border); border-radius: 9px; }
.region-control .icon { position: absolute; left: 9px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.region-control .caret { left: auto; right: 7px; width: 14px; height: 14px; }
.region-control select { appearance: none; width: 178px; height: calc(var(--icon-size) - 2px); padding: 0 24px 0 30px; color: inherit; background: transparent; border: none; border-radius: inherit; font-size: 12px; font-weight: 620; cursor: pointer; text-overflow: ellipsis; }
.region-control option, .region-control optgroup { background: #142939; color: var(--ink); }
.icon-button { display: grid; place-items: center; width: var(--icon-size); height: var(--icon-size); padding: 0; background: transparent; color: var(--ink); border: 0; border-radius: 8px; }
.icon-button:hover, .region-control:hover { color: var(--mint); background: #173140; }
.icon-button:disabled { color: #6f8999; background: transparent; }
.fullscreen-button, .reset-button { background: var(--panel); border: 1px solid var(--border); }
.question-bar { display: contents; }
.fullscreen-button { position: absolute; top: var(--top); right: var(--right); color: var(--mint); }

.prompt { position: absolute; top: var(--top); left: 50%; width: min(314px, calc(100% - var(--left) - var(--right))); padding: 7px 10px 6px; border-radius: 11px; transform: translateX(-50%); }
.prompt-meta, .prompt-body { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.prompt-meta > #progress-count { margin-left: auto; }
.prompt-body { min-height: 34px; }
.eyebrow { display: flex; align-items: center; gap: 5px; margin: 0; color: var(--mint); font-size: 9px; font-weight: 750; letter-spacing: .14em; }
.eyebrow .icon { width: 13px; height: 13px; }
#target-name { min-width: 0; margin: 0; color: #f2f6ef; font: 400 clamp(26px, 3.3vw, 33px)/1.02 Georgia, serif; letter-spacing: -.045em; overflow-wrap: break-word; }
#target-name.long { font-size: clamp(19px, 2.5vw, 24px); }
.feedback { margin: 3px 0 0; color: var(--muted); font-size: 11px; line-height: 1.3; }
.feedback[data-tone="good"] { color: var(--mint); }
.feedback[data-tone="wrong"], .feedback[data-tone="reveal"] { color: #ffcc9f; }
.prompt-actions { display: flex; flex: none; align-items: center; justify-content: end; gap: 6px; white-space: nowrap; }
#finish-actions { margin-top: 4px; }
.text-button, .action-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 3px 8px; color: #afc3cc; background: transparent; border: 0; border-radius: 7px; font-size: 12px; font-weight: 650; }
.text-button .icon, .action-button .icon { width: 15px; height: 15px; }
.text-button:hover { color: var(--ink); background: #1b3543; }
.action-button { padding-inline: 10px; color: #102c2a; background: var(--mint); }
.action-button:hover { background: #b3f3da; }

#progress-count { color: var(--ink); font-size: 11px; letter-spacing: .05em; font-variant-numeric: tabular-nums; white-space: nowrap; }
#progress-count span { color: #8ba5b4; }
.steps { display: flex; gap: 3px; margin-top: 4px; }
.step { flex: 1; height: 2px; border-radius: 4px; background: #365162; }
.step.current { background: #c4dbdc; }
.step.found { background: var(--mint); }
.step.revealed { background: #d6ac69; }

.reset-button { position: absolute; right: var(--right); bottom: var(--bottom); }

.focus-view .wordmark, .focus-view .region-control { display: none; }
.focus-view .top-bar { justify-content: end; }
.focus-view .prompt { top: var(--top); left: var(--left); width: min(314px, calc(100% - var(--left) - var(--right) - 50px)); transform: none; }

@media (width < 920px) {
  .prompt { top: calc(var(--top) + 45px); }
}

@media (pointer: coarse) {
  :root { --icon-size: 44px; }
  .prompt-actions button { min-height: 44px; }
}

@media (pointer: coarse) and (width < 920px) {
  .prompt { top: calc(var(--top) + 51px); }
}

@media (min-width: 921px) and (max-height: 500px) and (orientation: landscape) {
  .top-bar { justify-content: end; }
  .wordmark { display: none; }
  .prompt { top: var(--top); left: var(--left); width: min(314px, calc(100% - var(--left) - var(--right) - 290px)); transform: none; }
}

@media (max-width: 600px), (max-width: 920px) and (max-height: 500px) and (orientation: landscape) {
  :root { --icon-size: 44px; }
  .top-bar { top: auto; bottom: var(--bottom); }
  .wordmark, .region-control .icon:not(.caret), .ocean-labels { display: none; }
  .settings { flex: 0 1 148px; min-width: 0; margin-right: calc(var(--icon-size) + 8px); }
  .region-control { flex: 1; min-width: 0; }
  .region-control select { width: 100%; min-width: 0; padding-left: 8px; }

  .question-bar { position: absolute; inset: var(--top) var(--right) auto var(--left); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 6px; pointer-events: none; }
  .fullscreen-button { position: static; pointer-events: auto; }
  .prompt, .focus-view .prompt { position: relative; top: auto; left: auto; width: auto; transform: none; pointer-events: auto; }
  .prompt { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0 5px; min-height: 44px; max-width: 314px; padding: 0 2px 0 8px; border-radius: 8px; }
  .prompt-meta, .prompt-body { display: contents; }
  #prompt-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #target-name { grid-area: 1 / 1; font: 650 17px/1.15 system-ui, sans-serif; letter-spacing: -.025em; overflow-wrap: normal; }
  #target-name.long { font-size: 15px; }
  #progress-count { grid-area: 1 / 2; font-size: 10px; }
  #question-actions, #advance-actions { grid-area: 1 / 3; }
  #reveal-button, #next-button { min-width: 44px; min-height: 42px; }
  #reveal-button span, #next-button span, .steps { display: none; }
  #reveal-button .icon, #next-button .icon { width: 19px; height: 19px; }
  .feedback, #finish-actions { grid-column: 1 / -1; margin: 0 0 5px; }
  #finish-actions { justify-content: start; flex-wrap: wrap; }
}

@media (max-width: 360px) {
  .prompt { grid-template-columns: minmax(0, 1fr) auto; }
  #progress-count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  #question-actions, #advance-actions { grid-column: 2; }
}

@media (max-width: 300px) {
  #target-name, #target-name.long { font-size: 14px; overflow-wrap: break-word; }
}