@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;1,600&display=swap');

:root {
  --ink: #061116;
  --ink-soft: #0b1b21;
  --paper: #efe4ca;
  --sand: #d8b676;
  --sand-bright: #f0cf8c;
  --aqua: #66e3d2;
  --aqua-soft: #1e8e89;
  --coral: #f28268;
  --white: #f7f4eb;
  --muted: #94aaa9;
  --line: rgba(210, 238, 231, 0.15);
}

* { box-sizing: border-box; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body {
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
  font-family: "Manrope", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, a { font: inherit; }
button { color: inherit; }

.app-shell {
  position: relative;
  width: 100vw;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 55% 40%, rgba(34, 113, 109, .16), transparent 42%),
    linear-gradient(135deg, #061116 0%, #08171c 100%);
}

.app-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .12;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.topbar {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  height: 92px;
  padding: 0 clamp(22px, 4vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(6,17,22,.92), rgba(6,17,22,.5));
  backdrop-filter: blur(10px);
}

.brand { display: flex; align-items: center; gap: 15px; color: inherit; text-decoration: none; }
.brand-mark { width: 56px; height: 56px; display: grid; place-items: center; filter:drop-shadow(0 0 12px rgba(102,227,210,.1)); }
.brand-mark svg { width: 54px; height: 54px; overflow:visible; }
.brand-compass-ring,
.brand-compass-axis { fill:none; stroke:rgba(240,207,140,.9); stroke-width:1.25; }
.brand-compass-needle { fill:var(--sand-bright); stroke:#f8e6b8; stroke-width:.7; stroke-linejoin:round; }
.brand-compass-core { fill:var(--ink); stroke:var(--sand-bright); stroke-width:1.5; stroke-linejoin:round; }
.brand-copy { display:block; }
.brand strong, .brand em { display: block; }
.brand strong { font-size: 1.14rem; letter-spacing: .28em; line-height: 1.15; }
.brand em { margin-top:4px; color:var(--sand-bright); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif; font-size:.68rem; font-style:normal; font-weight:500; letter-spacing:.035em; }

.status-strip { display: flex; align-items: center; gap: clamp(15px, 2.2vw, 32px); }
.status-strip > div { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 9px; }
.status-strip span { color: var(--muted); font-family: "DM Mono", monospace; font-size: .62rem; letter-spacing: .13em; }
.status-strip strong { font-family: "DM Mono", monospace; font-size: .92rem; font-weight: 500; letter-spacing: .08em; }
.status-strip > i { width: 1px; height: 26px; background: var(--line); }
.music-toggle { position:relative; min-width:112px; height:38px; margin-left:2px; padding:0 13px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.035); color:var(--aqua); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif; font-size:.78rem; font-weight:600; white-space:nowrap; cursor:pointer; transition:border-color .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease; }
.music-toggle:hover { border-color:rgba(102,227,210,.5); background:rgba(102,227,210,.08); color:var(--paper); }
.music-toggle:focus-visible { outline:2px solid var(--aqua); outline-offset:2px; }
.music-toggle[aria-pressed="false"] { color:var(--muted); }
.music-toggle.score-live { border-color:rgba(102,227,210,.5); background:rgba(102,227,210,.075); box-shadow:0 0 18px rgba(102,227,210,.08); }
.music-toggle.score-live::after { content:""; position:absolute; inset:-5px; border:1px solid rgba(102,227,210,.24); border-radius:999px; animation:scorePulse 2.6s ease-in-out infinite; pointer-events:none; }
.leaderboard-toggle { min-width:70px; height:38px; padding:0 13px; border:1px solid rgba(216,182,118,.28); border-radius:999px; background:rgba(216,182,118,.055); color:var(--sand-bright); font-family:"DM Mono",monospace; font-size:.75rem; font-weight:500; letter-spacing:.08em; white-space:nowrap; cursor:pointer; transition:border-color .2s ease,background .2s ease,color .2s ease; }
.leaderboard-toggle:hover { border-color:rgba(216,182,118,.62); background:rgba(216,182,118,.12); color:var(--paper); }
.leaderboard-toggle:focus-visible { outline:2px solid var(--sand-bright); outline-offset:2px; }
@keyframes scorePulse { 0%,100% { transform:scale(.9); opacity:.22; } 50% { transform:scale(1.08); opacity:.68; } }

.map-stage { position: absolute; inset: 92px 0 0; overflow: hidden; }
#mapCanvas { position: absolute; inset: 0; width: 100%; height: 100%; outline: 0; cursor: crosshair; touch-action: none; }
#mapCanvas.dragging { cursor:grabbing; }
#mapCanvas:focus-visible { box-shadow: inset 0 0 0 2px var(--aqua); }
.keyboard-cursor { position:absolute; z-index:6; display:none; width:30px; height:30px; transform:translate(-50%,-50%); border:1px solid var(--aqua); border-radius:50%; pointer-events:none; box-shadow:0 0 0 4px rgba(102,227,210,.08), 0 0 22px rgba(102,227,210,.3); }
.keyboard-cursor::before, .keyboard-cursor::after { content:""; position:absolute; background:var(--aqua); opacity:.8; }
.keyboard-cursor::before { width:1px; height:42px; left:14px; top:-7px; }
.keyboard-cursor::after { height:1px; width:42px; left:-7px; top:14px; }
.keyboard-cursor span { position:absolute; width:5px; height:5px; left:12px; top:12px; border-radius:50%; background:var(--sand-bright); }
#mapCanvas:focus-visible ~ .keyboard-cursor { display:block; }
.keyboard-help { position:absolute; z-index:5; left:50%; top:18px; transform:translateX(-50%); display:none; color:var(--aqua); font-family:"DM Mono",monospace; font-size:.65rem; letter-spacing:.09em; pointer-events:none; }
#mapCanvas:focus-visible ~ .keyboard-help { display:block; }
.map-glow { position: absolute; z-index: 0; pointer-events: none; left: 50%; top: 41%; width: min(78vw, 1060px); height: min(70vh, 700px); transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(31,125,120,.13), transparent 67%); filter: blur(20px); }

.instruction-card { position: absolute; z-index: 4; top: clamp(28px, 5vh, 58px); left: clamp(22px, 4vw, 64px); width: 230px; padding-left: 17px; border-left: 1px solid rgba(102,227,210,.45); pointer-events: none; }
.eyebrow { display: block; margin-bottom: 10px; color: var(--aqua); font-family: "DM Mono", monospace; font-size: .62rem; letter-spacing: .16em; }
.instruction-card p { margin: 0; color: #c9d5d1; font-size: .78rem; line-height: 1.55; }
.legend { display: flex; gap: 19px; margin-top: 15px; color: var(--muted); font-family: "DM Mono", monospace; font-size: .61rem; letter-spacing: .08em; text-transform: uppercase; }
.legend span { display: flex; align-items: center; gap: 7px; }
.legend i { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255,255,255,.04); }
.land-dot { background: var(--sand); }
.water-dot { background: var(--aqua); }

.compass { position: absolute; z-index: 4; right: clamp(22px,4vw,64px); top: clamp(27px,5vh,58px); display: flex; align-items: center; gap: 8px; color: var(--muted); font-family: "DM Mono", monospace; font-size: .62rem; }
.compass svg { width: 44px; fill: none; stroke: rgba(151,193,187,.54); stroke-width: .7; }
.compass svg path:first-of-type { fill: rgba(102,227,210,.2); stroke: var(--aqua); }

.map-controls { position:absolute; z-index:7; right:clamp(22px,4vw,64px); top:112px; width:184px; display:grid; gap:8px; }
.landmarks-toggle, .conflict-toggle { min-height:42px; padding:0 13px; display:flex; align-items:center; justify-content:center; gap:10px; border:1px solid rgba(171,220,209,.22); border-radius:5px; background:rgba(8,24,29,.82); color:var(--muted); font-family:"DM Mono",monospace; font-size:.75rem; letter-spacing:.09em; cursor:pointer; backdrop-filter:blur(14px); transition:border-color .22s ease, color .22s ease, background .22s ease, box-shadow .22s ease; }
.landmarks-toggle:hover, .conflict-toggle:hover { color:var(--paper); border-color:rgba(102,227,210,.52); }
.landmarks-toggle[aria-pressed="true"] { color:var(--aqua); border-color:rgba(102,227,210,.48); background:rgba(30,142,137,.16); box-shadow:0 0 24px rgba(102,227,210,.09); }
.conflict-toggle[aria-pressed="true"] { color:var(--coral); border-color:rgba(242,130,104,.58); background:rgba(114,39,32,.18); box-shadow:0 0 24px rgba(242,130,104,.1); }
.landmark-switch, .conflict-switch { position:relative; width:28px; height:14px; flex:0 0 auto; border:1px solid rgba(148,170,169,.48); border-radius:999px; transition:.22s ease; }
.landmark-switch i, .conflict-switch i { position:absolute; left:2px; top:2px; width:8px; height:8px; border-radius:50%; background:var(--muted); transition:transform .22s cubic-bezier(.2,.8,.2,1), background .22s ease, box-shadow .22s ease; }
.landmarks-toggle[aria-pressed="true"] .landmark-switch { border-color:rgba(102,227,210,.62); }
.landmarks-toggle[aria-pressed="true"] .landmark-switch i { transform:translateX(14px); background:var(--aqua); box-shadow:0 0 9px rgba(102,227,210,.75); }
.conflict-toggle[aria-pressed="true"] .conflict-switch { border-color:rgba(242,130,104,.72); }
.conflict-toggle[aria-pressed="true"] .conflict-switch i { transform:translateX(14px); background:var(--coral); box-shadow:0 0 9px rgba(242,130,104,.78); }
.zoom-controls { height:42px; display:grid; grid-template-columns:42px 1fr 42px; border:1px solid rgba(171,220,209,.18); border-radius:5px; overflow:hidden; background:rgba(8,24,29,.8); backdrop-filter:blur(14px); }
.zoom-controls button { min-width:0; border:0; border-right:1px solid var(--line); background:transparent; color:var(--aqua); cursor:pointer; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif; font-size:1.2rem; transition:background .2s ease, color .2s ease; }
.zoom-controls button:last-child { border-right:0; }
.zoom-controls button:hover:not(:disabled) { background:rgba(102,227,210,.1); color:var(--paper); }
.zoom-controls button:disabled { color:rgba(148,170,169,.28); cursor:default; }
.zoom-controls .zoom-readout { color:var(--muted); font-family:"DM Mono",monospace; font-size:.75rem; }
.map-controls > small { color:rgba(151,193,187,.52); font-family:"DM Mono",monospace; font-size:.75rem; line-height:1.45; letter-spacing:.05em; text-align:center; }
.map-controls button:focus-visible { outline:2px solid var(--aqua); outline-offset:2px; }

.conflict-brief { position:absolute; z-index:7; right:clamp(22px,4vw,64px); top:302px; width:184px; padding:12px 13px 13px; transform:translateY(-7px); opacity:0; visibility:hidden; pointer-events:none; border:1px solid rgba(242,130,104,.32); border-radius:5px; background:rgba(20,18,20,.88); box-shadow:0 16px 38px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.035); backdrop-filter:blur(14px); transition:opacity .25s ease, transform .25s ease, visibility .25s; }
.conflict-brief.show { transform:translateY(0); opacity:1; visibility:visible; }
.conflict-brief span, .conflict-brief strong, .conflict-brief small { display:block; }
.conflict-brief span { color:var(--coral); font-family:"DM Mono",monospace; font-size:.63rem; letter-spacing:.09em; }
.conflict-brief span i { display:inline-block; width:6px; height:6px; margin-right:5px; border-radius:50%; background:var(--coral); box-shadow:0 0 9px rgba(242,130,104,.7); animation:conflictPulse 1.3s ease-in-out infinite; }
.conflict-brief strong { margin-top:7px; color:var(--paper); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif; font-size:.78rem; letter-spacing:.035em; }
.conflict-brief small { margin-top:5px; color:var(--muted); font-size:.72rem; line-height:1.4; }
@keyframes conflictPulse { 0%,100% { opacity:.4; transform:scale(.75); } 50% { opacity:1; transform:scale(1.15); } }

.landmark-tooltip { position:absolute; z-index:9; min-width:150px; padding:10px 12px; transform:translate(14px,14px); opacity:0; visibility:hidden; pointer-events:none; background:rgba(6,17,22,.94); border:1px solid rgba(102,227,210,.34); border-radius:4px; box-shadow:0 14px 32px rgba(0,0,0,.35); transition:opacity .16s ease; }
.landmark-tooltip.show { opacity:1; visibility:visible; }
.landmark-tooltip strong, .landmark-tooltip small { display:block; }
.landmark-tooltip strong { color:var(--paper); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif; font-size:.82rem; font-weight:600; }
.landmark-tooltip small { margin-top:3px; color:var(--aqua); font-family:"DM Mono",monospace; font-size:.75rem; letter-spacing:.04em; }

.coords { position: absolute; z-index: 3; right: clamp(22px,4vw,64px); bottom: 155px; color: rgba(151,193,187,.55); font-family: "DM Mono", monospace; font-size: .61rem; letter-spacing: .09em; pointer-events: none; }
.map-credit { position: absolute; z-index: 3; left: clamp(22px,4vw,64px); bottom: 155px; color: rgba(151,193,187,.42); font-family: "DM Mono", monospace; font-size: .56rem; letter-spacing: .08em; pointer-events: none; }
.site-footer { position:absolute; z-index:7; left:50%; bottom:5px; width:max-content; max-width:calc(100% - 24px); transform:translateX(-50%); overflow:hidden; color:#fff; font-family:"DM Mono",monospace; font-size:.58rem; line-height:1.2; letter-spacing:.045em; text-align:center; text-overflow:ellipsis; white-space:nowrap; pointer-events:none; }
.site-footer strong { color:inherit; font-weight:500; }

.question-card {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  width: min(760px, calc(100% - 44px));
  height: 112px;
  padding: 23px 90px 22px 70px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  background: rgba(8,24,29,.9);
  border: 1px solid rgba(171,220,209,.22);
  border-radius: 5px;
  box-shadow: 0 30px 70px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(18px);
}
.question-card::before, .question-card::after { content:""; position:absolute; width: 11px; height: 11px; border-color: var(--aqua); opacity: .65; }
.question-card::before { left: -1px; top: -1px; border-left: 1px solid; border-top: 1px solid; }
.question-card::after { right: -1px; bottom: -1px; border-right: 1px solid; border-bottom: 1px solid; }
.question-copy { min-width: 0; }
.question-meta { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; font-family: "DM Mono", monospace; font-size: .57rem; color: var(--aqua); letter-spacing: .13em; }
.question-meta i { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: rgba(102,227,210,.55); }
.question-meta span:last-child { color: var(--muted); }
.question-card h1 { margin: 0; color: var(--paper); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif; font-size: clamp(1.55rem, 2.4vw, 2.08rem); font-weight: 600; line-height: 1.05; letter-spacing: -.025em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.question-card p { margin: 4px 0 0; color: var(--muted); font-size: .69rem; }
.question-number { position: absolute; right: 26px; top: 24px; display: flex; align-items: flex-start; color: rgba(239,228,202,.34); font-family: "DM Mono", monospace; }
.question-number span { font-size: 1.35rem; line-height: 1; }
.question-number small { margin: 2px 0 0 2px; font-size: .58rem; }
.start-button { position:absolute; z-index:5; inset:0; width:100%; padding:0 clamp(22px,4vw,38px); border:0; display:flex; align-items:center; justify-content:space-between; gap:20px; background:linear-gradient(105deg,rgba(102,227,210,.2),rgba(102,227,210,.075) 48%,rgba(216,182,118,.1)); color:var(--paper); cursor:pointer; text-align:left; transition:background .22s ease, box-shadow .22s ease, color .22s ease; }
.start-button[hidden] { display:none; }
.start-button span { display:grid; gap:6px; }
.start-button strong { font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif; font-size:clamp(1.25rem,2.4vw,1.75rem); font-weight:700; letter-spacing:-.025em; }
.start-button small { color:var(--aqua); font-family:"DM Mono",monospace; font-size:.75rem; line-height:1.35; letter-spacing:.07em; }
.start-button b { width:48px; height:48px; flex:0 0 auto; display:grid; place-items:center; border:1px solid rgba(102,227,210,.42); border-radius:50%; color:var(--aqua); font-size:1.4rem; transition:transform .22s ease, background .22s ease, color .22s ease; }
.start-button:hover { background:linear-gradient(105deg,rgba(102,227,210,.28),rgba(102,227,210,.11) 48%,rgba(216,182,118,.14)); box-shadow:inset 0 0 42px rgba(102,227,210,.055); }
.start-button:hover b { transform:translateX(4px); background:var(--aqua); color:var(--ink); }
.start-button:focus-visible { outline:2px solid var(--aqua); outline-offset:-5px; }
.question-card.awaiting-start .skip-button,
.question-card.awaiting-start .question-copy,
.question-card.awaiting-start .question-number { opacity:0; visibility:hidden; pointer-events:none; }
.question-card.awaiting-start .progress-track span { width:0 !important; box-shadow:none; }
.skip-button { position: absolute; left: 0; top: 0; bottom: 0; width: 48px; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--muted); writing-mode: vertical-rl; transform: rotate(180deg); font-family: "DM Mono", monospace; font-size: .55rem; letter-spacing: .15em; cursor: pointer; transition: .2s ease; }
.skip-button:hover { color: var(--paper); background: rgba(255,255,255,.025); }
.skip-button span { margin-top: 8px; color: var(--aqua); font-size: .9rem; }
.progress-track { position: absolute; left: 48px; right: 0; bottom: -1px; height: 2px; background: rgba(255,255,255,.05); overflow: hidden; }
.progress-track span { display: block; width: 4%; height: 100%; background: linear-gradient(90deg, var(--aqua-soft), var(--aqua)); box-shadow: 0 0 12px var(--aqua); transition: width .5s cubic-bezier(.2,.8,.2,1); }

.feedback { position: absolute; z-index: 9; left: 50%; bottom: 153px; width:min(560px,calc(100% - 44px)); min-height:82px; padding: 17px 22px 17px 16px; transform: translate(-50%, 14px); opacity: 0; pointer-events: none; display: flex; align-items: center; gap: 16px; background: rgba(8,24,29,.96); border: 1px solid var(--line); border-radius:6px; box-shadow: 0 22px 48px rgba(0,0,0,.4); transition: .3s cubic-bezier(.2,.8,.2,1); }
.feedback.show { transform: translate(-50%,0); opacity: 1; }
.feedback-icon { width: 44px; height: 44px; flex: 0 0 auto; display:grid; place-items:center; border-radius:50%; border:1px solid; font-size:1.05rem; }
.feedback.correct .feedback-icon { color: var(--aqua); background: rgba(102,227,210,.08); }
.feedback.wrong .feedback-icon { color: var(--coral); background: rgba(242,130,104,.08); }
.feedback strong, .feedback small { display: block; }
.feedback strong { color: var(--paper); font-size: 1rem; letter-spacing: .01em; }
.feedback small { margin-top: 4px; color: var(--muted); font-size: .82rem; line-height: 1.45; }

.answer-pulse { position: absolute; z-index: 6; width: 16px; height: 16px; margin: -8px; border: 1px solid var(--aqua); border-radius: 50%; opacity: 0; pointer-events: none; }
.answer-pulse.play { animation: mapPulse .9s ease-out forwards; }
@keyframes mapPulse { 0% { opacity: 1; transform: scale(.3); box-shadow: 0 0 0 0 rgba(102,227,210,.7); } 100% { opacity:0; transform:scale(3); box-shadow:0 0 0 17px rgba(102,227,210,0); } }

.loading { position: fixed; z-index: 30; inset:0; display:grid; place-content:center; justify-items:center; gap: 10px; background:#061116; transition: opacity .6s ease, visibility .6s; }
.loading.done { opacity:0; visibility:hidden; }
.loading-orbit { position:relative; width:72px; height:72px; margin-bottom: 12px; border:1px solid rgba(102,227,210,.18); border-radius:50%; animation:spin 3s linear infinite; }
.loading-orbit::before { content:""; position:absolute; inset:12px; border:1px solid rgba(216,182,118,.35); border-radius:50%; }
.loading-orbit span { position:absolute; top:5px; left:31px; width:9px; height:9px; border-radius:50%; background:var(--aqua); box-shadow:0 0 18px var(--aqua); }
.loading-orbit i { position:absolute; inset:28px; border-radius:50%; background:var(--sand); }
.loading strong { color:var(--paper); font-family:"Playfair Display",serif; font-size:1.2rem; }
.loading small { color:var(--muted); font-family:"DM Mono",monospace; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; }
@keyframes spin { to { transform:rotate(360deg); } }

.results { position:fixed; z-index:40; inset:0; place-items:center; background:rgba(4,13,17,.78); backdrop-filter:blur(14px); }
.results:not([hidden]) { display:grid; animation:fadeIn .4s ease; }
.results-card { width:min(520px,calc(100% - 28px)); max-height:calc(100dvh - 28px); padding:34px 36px; overflow-y:auto; text-align:center; background:#0b1d22; border:1px solid rgba(102,227,210,.25); box-shadow:0 45px 110px rgba(0,0,0,.5); }
.confetti-canvas { position:fixed; z-index:45; inset:0; width:100%; height:100%; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s ease; }
.confetti-canvas.active { opacity:1; visibility:visible; }
.result-ring { width:126px; height:126px; margin:18px auto; display:grid; place-content:center; border:1px solid rgba(102,227,210,.4); border-radius:50%; box-shadow:inset 0 0 40px rgba(102,227,210,.06), 0 0 60px rgba(102,227,210,.08); }
.result-ring strong { color:var(--sand-bright); font-family:"Playfair Display",serif; font-size:3rem; line-height:.9; }
.result-ring small { margin-top:8px; color:var(--muted); font-family:"DM Mono",monospace; font-size:.57rem; letter-spacing:.16em; }
.results h2 { margin:0; color:var(--paper); font-family:"Playfair Display",serif; font-size:2rem; }
.results p { margin:9px auto 20px; max-width:340px; color:var(--muted); font-size:.82rem; line-height:1.55; }
.results button { min-height:44px; padding:11px 15px; border:1px solid rgba(102,227,210,.4); background:rgba(102,227,210,.08); color:var(--aqua); font-family:"DM Mono",monospace; font-size:.75rem; letter-spacing:.09em; cursor:pointer; transition:.2s ease; }
.results button:hover { background:var(--aqua); color:var(--ink); }
.results button:focus-visible,.leaderboard button:focus-visible,.score-form input:focus-visible { outline:2px solid var(--aqua); outline-offset:2px; }
.result-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.result-actions .quiet { grid-column:1 / -1; border-color:var(--line); background:transparent; color:var(--muted); }
.score-form { margin:0 0 14px; padding:14px; border:1px solid rgba(102,227,210,.2); background:rgba(102,227,210,.035); text-align:left; }
.score-form[hidden] { display:none; }
.score-form label { display:block; margin-bottom:7px; color:var(--aqua); font-family:"DM Mono",monospace; font-size:.75rem; letter-spacing:.11em; }
.score-form > div { display:grid; grid-template-columns:1fr auto; gap:8px; }
.score-form input { min-width:0; height:44px; padding:0 13px; border:1px solid var(--line); border-radius:0; background:#07161b; color:var(--paper); font:500 1rem/1 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif; }
.score-form input::placeholder { color:#6e8583; }
.score-form small { display:block; min-height:18px; margin-top:8px; color:var(--muted); font-size:.75rem; line-height:1.4; }
.score-form small.success { color:var(--aqua); }
.score-form small.error { color:var(--coral); }
.score-form button:disabled,.result-actions button:disabled { opacity:.48; cursor:not-allowed; }

.leaderboard { position:fixed; z-index:52; inset:0; place-items:center; padding:14px; background:rgba(4,13,17,.84); backdrop-filter:blur(16px); }
.leaderboard:not([hidden]) { display:grid; animation:fadeIn .25s ease; }
.leaderboard-card { width:min(560px,100%); max-height:calc(100dvh - 28px); padding:28px; overflow-y:auto; background:#0b1d22; border:1px solid rgba(216,182,118,.3); box-shadow:0 45px 110px rgba(0,0,0,.55); }
.leaderboard-card header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.leaderboard-card header .eyebrow { margin-bottom:7px; }
.leaderboard-card h2 { margin:0; color:var(--paper); font-family:"Playfair Display",serif; font-size:clamp(1.7rem,5vw,2.25rem); }
.leaderboard-card header button { width:44px; height:44px; flex:0 0 auto; border:1px solid var(--line); background:transparent; color:var(--muted); font-size:1.5rem; cursor:pointer; }
.leaderboard-card ol { margin:24px 0 18px; padding:0; list-style:none; counter-reset:rank; border-top:1px solid var(--line); }
.leaderboard-card li { min-height:48px; display:grid; grid-template-columns:38px 1fr auto auto; align-items:center; gap:12px; border-bottom:1px solid var(--line); color:var(--paper); }
.leaderboard-card li::before { counter-increment:rank; content:counter(rank,decimal-leading-zero); color:var(--sand-bright); font-family:"DM Mono",monospace; font-size:.75rem; }
.leaderboard-card li strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:600 1rem/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif; }
.leaderboard-card li b { color:var(--aqua); font-family:"DM Mono",monospace; font-size:.82rem; font-weight:500; }
.leaderboard-card li time { color:var(--muted); font-family:"DM Mono",monospace; font-size:.75rem; }
.leaderboard-card li.leaderboard-state { grid-template-columns:1fr; padding:18px 0; color:var(--muted); text-align:center; }
.leaderboard-card li.leaderboard-state::before { display:none; }
.leaderboard-card > small { color:var(--muted); font-size:.75rem; line-height:1.45; }
@keyframes fadeIn { from { opacity:0; } }

@media (max-width: 760px) {
  .topbar { height: 76px; padding: 0 18px; }
  .map-stage { inset: 76px 0 0; }
  .brand strong { font-size:.88rem; letter-spacing:.2em; }
  .brand-mark { width:44px; height:44px; }
  .brand-mark svg { width:42px; height:42px; }
  .brand em { margin-top:2px; font-size:.62rem; }
  .status-strip { gap:12px; }
  .status-strip > div { display:block; }
  .status-strip span { display:block; font-size:.68rem; margin-bottom:2px; }
  .status-strip strong { font-size:.78rem; }
  .status-strip > i { display:none; }
  .leaderboard-toggle { min-width:62px; height:44px; padding-inline:9px; }
  .music-toggle { min-width:106px; height:44px; padding-inline:10px; font-size:.75rem; }
  .instruction-card { top:18px; left:18px; width:190px; }
  .instruction-card .eyebrow { font-size:.68rem; }
  .instruction-card p { font-size:.72rem; }
  .legend, .compass, .map-credit { display:none; }
  .coords { display:none; }
  .map-controls { top:18px; right:14px; width:156px; gap:7px; }
  .landmarks-toggle, .conflict-toggle { min-height:44px; padding-inline:10px; font-size:.75rem; }
  .zoom-controls { height:44px; grid-template-columns:44px 1fr 44px; }
  .map-controls > small { display:none; }
  .conflict-brief { top:166px; right:14px; width:156px; padding:10px 11px; }
  .conflict-brief small { font-size:.68rem; }
  .landmark-tooltip { display:none; }
  .question-card { width:calc(100% - 24px); height:106px; bottom:max(20px,calc(env(safe-area-inset-bottom) + 8px)); padding:20px 60px 20px 55px; }
  .site-footer { bottom:max(4px,calc(env(safe-area-inset-bottom) - 10px)); font-size:.52rem; }
  .question-card h1 { font-size:1.45rem; }
  .question-card p { font-size:.72rem; }
  .question-meta { font-size:.68rem; }
  .question-meta i { display:none; }
  .question-number { right:15px; top:22px; }
  .question-number span { font-size:1rem; }
  .skip-button { width:40px; }
  .progress-track { left:40px; }
  .feedback { bottom:130px; width:calc(100% - 24px); min-height:78px; padding:14px 16px; gap:13px; }
  .feedback-icon { width:40px; height:40px; }
  .feedback strong { font-size:.95rem; }
  .feedback small { font-size:.78rem; }
  .keyboard-help { left:auto; right:18px; top:96px; width:112px; transform:none; text-align:right; font-size:.58rem; line-height:1.45; }
}

@media (max-width: 420px) {
  .status-strip { gap:7px; }
  .status-strip > div:first-child { display:none; }
  .leaderboard-toggle { min-width:54px; padding-inline:7px; font-size:.68rem; }
  .music-toggle { min-width:92px; padding-inline:7px; font-size:.68rem; }
  .instruction-card { width:104px; }
  .instruction-card p { display:none; }
  .map-controls { width:150px; right:8px; }
  .conflict-brief { right:8px; width:150px; }
}

@media (max-width: 370px) {
  .topbar { padding-inline:12px; }
  .brand { gap:8px; }
  .brand strong { font-size:.76rem; letter-spacing:.15em; }
  .brand em { font-size:.58rem; }
  .status-strip { gap:8px; }
  .music-toggle { min-width:96px; height:40px; padding-inline:7px; font-size:.72rem; }
  .question-card { width:calc(100% - 16px); }
  .map-controls { width:148px; right:8px; }
}

@media (max-height: 700px) and (min-width: 761px) {
  .topbar { height:76px; }
  .map-stage { inset:76px 0 0; }
  .instruction-card, .compass { top:20px; }
  .question-card { height:102px; bottom:15px; }
  .coords, .map-credit { bottom:132px; }
  .feedback { bottom:128px; }
  .instruction-card p { max-width:200px; }
}

@media (max-height: 520px) and (min-width: 650px) {
  .results-card { max-height:calc(100dvh - 16px); padding:18px 24px; }
  .results-card > .eyebrow { margin-bottom:4px; }
  .result-ring { width:86px; height:86px; margin:8px auto; }
  .result-ring strong { font-size:2rem; }
  .results h2 { font-size:1.5rem; }
  .results p { margin:5px auto 10px; line-height:1.4; }
  .score-form { margin-bottom:9px; padding:9px; }
  .result-actions { grid-template-columns:repeat(3,1fr); }
  .result-actions .quiet { grid-column:auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}