/* The HUD over the game, after the mockups and Ape Race: dark see-through
   panels, dot-free rows, one gold button, the line's yellow-green as the
   one bright colour. Fonts are the system's, so nothing loads from another
   origin. */
:root {
  --night: #0d171d;
  --panel: rgba(12, 26, 34, 0.8);
  --panel-line: rgba(255, 214, 140, 0.2);
  --ink: #f2efe6;
  --muted: #a9c0c6;
  --gold: #ffcf4d;
  --gold-ink: #3a2410;
  --good: #8fd16a;
  --warn: #ffb347;
  --bad: #ff6b5a;
  --display: "Avenir Next Rounded", "Avenir Next", "Nunito", "Segoe UI", system-ui, sans-serif;
  --body: "Avenir Next", "Nunito", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; background: var(--night); color: var(--ink); font: 600 14px/1.4 var(--body); overflow: hidden; }
#stage { position: fixed; inset: 0; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
.panel { position: absolute; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); backdrop-filter: blur(4px); padding: 14px 16px; }
.eyebrow { font: 800 11px var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
h2 { font: 700 26px/1.05 var(--display); color: var(--gold); margin: 4px 0 8px; }
.panel p { margin: 0 0 8px; max-width: 46ch; }
.row { display: flex; justify-content: space-between; gap: 16px; font: 700 13px var(--body); padding: 3px 0; }
.row .value { font-variant-numeric: tabular-nums; text-align: right; }
.muted { color: var(--muted); }
.list { margin: 4px 0 0; padding-left: 18px; color: var(--ink); }
.list li { margin: 4px 0; max-width: 52ch; }
.actions { display: flex; gap: 10px; margin-top: 10px; }
.btn { font: 600 16px var(--display); border-radius: 999px; padding: 9px 22px; cursor: pointer; border: 0; }
.btn.go { background: var(--gold); color: var(--gold-ink); box-shadow: 0 3px 0 #b98a1e; }
.btn.soft { background: transparent; color: var(--ink); border: 2px solid rgba(255, 207, 77, 0.55); }
.btn:focus-visible, .chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.chips { display: inline-flex; gap: 4px; }
.chip { font: 800 12px var(--body); border-radius: 999px; padding: 3px 10px; background: rgba(255, 255, 255, 0.12); color: var(--ink); border: 0; cursor: pointer; }
.chip.on { background: rgba(255, 207, 77, 0.25); color: var(--gold); }
.key { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.14); color: var(--ink); font: 800 12px var(--body); border-bottom: 2px solid rgba(0, 0, 0, 0.35); }
.key.on { background: var(--gold); color: var(--gold-ink); }
[data-term] { text-decoration: underline dotted rgba(255, 255, 255, 0.45); cursor: help; }

/* the screens' panels */
#title-card { left: 6vw; top: 9vh; width: min(460px, 88vw); }
#title-card h2 { font-size: clamp(34px, 5vw, 60px); color: #fff6e6; text-shadow: 0 4px 18px rgba(60, 30, 10, 0.45); }
#how { right: 4vw; top: 6vh; width: min(560px, 46vw); max-height: 88vh; overflow: auto; }
@media (max-width: 900px) { #how { left: 6vw; right: auto; top: auto; bottom: 4vh; width: 88vw; max-height: 52vh; } }
#place { left: 18px; top: 18px; width: 270px; }
#landed { right: 18px; top: 18px; width: 320px; }
#settings { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(520px, 92vw); }
body[data-screen="settings"] #stage::after { content: ""; position: absolute; inset: 0; background: rgba(5, 12, 16, 0.45); pointer-events: none; }
body[data-screen="settings"] #settings { z-index: 2; }

/* the arm keys, the tension ring, the message and the key bar */
#arms { right: 18px; top: 18px; width: 220px; }
.arm-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; margin-top: 8px; font: 700 12.5px var(--body); }
.arm-grid .cell { display: inline-flex; gap: 4px; align-items: center; }
#ring { right: 18px; bottom: 24px; width: 150px; text-align: center; padding: 12px; }
#ring svg { width: 124px; height: 124px; display: block; margin: 0 auto; }
#ring circle { fill: none; stroke-width: 12; }
#ring .track { stroke: rgba(255, 255, 255, 0.14); }
#ring .fill { stroke: var(--good); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 62px 62px; stroke-dasharray: calc(var(--t, 0) * 289px) 289px; transition: stroke-dasharray 0.08s linear; }
#ring[data-state="strained"] .fill { stroke: var(--warn); }
#ring[data-state="danger"] .fill { stroke: var(--bad); }
#ring .break { stroke: var(--bad); stroke-width: 3; }
#ring .ring-text { position: absolute; left: 0; right: 0; top: 52px; display: grid; }
#ring .ring-percent { font: 700 17px var(--display); }
#ring .ring-of { font: 700 9px var(--body); color: var(--muted); }
#message { left: 50%; transform: translateX(-50%); top: 18px; max-width: min(560px, 60vw); margin: 0; font: 700 14px var(--body); text-align: center; }
#keys { left: 50%; transform: translateX(-50%); bottom: 18px; display: flex; gap: 14px; align-items: center; padding: 8px 16px; font: 700 14px var(--body); white-space: nowrap; }
#keys .item { display: inline-flex; gap: 6px; align-items: center; }
#error:not(:empty) { position: absolute; left: 50%; bottom: 80px; transform: translateX(-50%); background: var(--panel); padding: 8px 14px; border-radius: 10px; color: var(--bad); }

/* the scope: a brass ring over one eye's view, everything else dark */
#scope { position: absolute; inset: 0; pointer-events: none; }
#scope .vignette { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, transparent 38vmin, rgba(0, 0, 0, 0.6) 39vmin, #05090b 41vmin); }
#scope .vignette::after { content: ""; position: absolute; left: 50%; top: 50%; width: 78vmin; height: 78vmin; transform: translate(-50%, -50%); border-radius: 50%; border: 10px solid #b5893a; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); }
#scope .zone { position: absolute; left: var(--x); top: var(--y); height: calc(var(--r, 2) * 2%); aspect-ratio: 1; min-height: 18px; transform: translate(-50%, -50%); border-radius: 50%; border: 3px solid var(--gold); box-shadow: 0 0 14px rgba(255, 207, 77, 0.6); }
#scope .zone.inside { border-color: var(--good); box-shadow: 0 0 18px rgba(143, 209, 106, 0.8); }
#scope .scope-card { left: 18px; bottom: 18px; width: 240px; }
#scope .scope-zoom { font: 700 30px var(--display); color: var(--gold); letter-spacing: 0; text-transform: none; }
#scope .scope-fish { font: 700 18px var(--display); }
#scope .scope-status { color: var(--muted); }

@media (max-width: 760px) {
  #arms { display: none !important; }
  #keys { font-size: 12px; gap: 8px; }
}
#cue { left: 50%; transform: translateX(-50%); top: 74px; margin: 0; padding: 8px 26px; font: 800 26px var(--display); letter-spacing: 0.06em; text-transform: uppercase; border-width: 3px; }
/* one steady badge while a fish is on (T30) */
#cue[data-state="on"] { color: var(--gold); border-color: var(--gold); }
/* the fight's dial: the needle goes round, the sweet spot is the bright arc (T27) */
/* placed beside the hooked fish and sized by the core (T41) */
#dial { left: 0; top: 0; transform: translate(var(--dx, 0), var(--dy, 0)); width: var(--dw); height: var(--dh); overflow: hidden; text-align: center; padding: 10px 12px 12px; }
#dial svg { width: var(--dd); height: var(--dd); display: block; margin: 4px auto; overflow: visible; }
#dial circle { fill: none; }
#dial .face { stroke: rgba(255, 255, 255, 0.14); stroke-width: 14; }
#dial .spot, #dial .mid { transform-box: view-box; transform-origin: 66px 66px; }
#dial .spot { stroke: var(--good); stroke-width: 14; stroke-dasharray: var(--w, 0) 1; transform: rotate(calc(var(--from, 0) * 1turn - 0.25turn)); opacity: 0.55; }
#dial .mid { stroke: var(--gold); stroke-width: 18; stroke-dasharray: var(--cw, 0) 1; transform: rotate(calc(var(--cfrom, 0) * 1turn - 0.25turn)); }
#dial[data-on-spot="true"] .spot { opacity: 1; }
#dial .needle { stroke: #f4f1e8; stroke-width: 4; stroke-linecap: round; transform-box: view-box; transform-origin: 66px 66px; transform: rotate(calc(var(--n, 0) * 1turn)); }
#dial .hub { fill: #f4f1e8; }
#dial .dial-result { display: block; min-height: 24px; font: 800 20px var(--display); letter-spacing: 0.06em; text-transform: uppercase; }
#dial[data-result="centre"] .dial-result { color: var(--gold); }
#dial[data-result="good"] .dial-result { color: var(--good); }
#dial[data-result="miss"] .dial-result { color: var(--bad); }
#dial[data-result="miss"] .face { stroke: var(--bad); }
#dial[data-result="centre"] svg { filter: drop-shadow(0 0 12px rgba(255, 207, 77, 0.8)); }
#dial .dial-streak { font: 700 13px var(--body); }
#dial .dial-stalled { font: 700 12px var(--body); color: var(--warn); min-height: 15px; }
#battery { right: 18px; bottom: 210px; width: 150px; padding: 10px 12px; }
#battery .bar { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); margin: 6px 0 4px; overflow: hidden; }
#battery .bar i { display: block; height: 100%; width: calc(var(--b, 1) * 100%); background: var(--good); border-radius: 999px; }
#battery[data-state="flat"] .bar i { background: var(--bad); }
#battery[data-state="running"] { border-color: var(--gold); box-shadow: 0 0 22px rgba(255, 207, 77, 0.55); }
#battery[data-state="running"] .bar i { background: var(--gold); animation: pulse 0.12s linear infinite alternate; }
#battery .battery-status { font: 700 12px var(--body); color: var(--muted); }
@keyframes pulse { from { opacity: 1; } to { opacity: 0.45; } }
.pick { font: 800 12px var(--body); border-radius: 999px; padding: 3px 10px; background: rgba(255, 207, 77, 0.25); color: var(--gold); border: 0; cursor: pointer; }
.pick option { color: var(--night); }
#spread { left: 18px; bottom: 90px; width: 320px; }

/* the race HUD (T28), after the journal's race mockups */
#race { position: absolute; inset: 0; pointer-events: none; }
#race .race-card { left: 18px; top: 18px; width: 250px; display: grid; gap: 6px; }
#race .race-pos { display: flex; align-items: baseline; gap: 12px; }
#race .race-place { font: 800 46px var(--display); color: var(--gold); line-height: 1; }
#race .race-of { color: var(--muted); font: 700 15px var(--body); }
#race .race-rows .value { font-variant-numeric: tabular-nums; }
#race .race-speed { right: 18px; bottom: 84px; width: 250px; display: grid; gap: 8px; }
#race .race-kmh { display: flex; align-items: baseline; justify-content: space-between; }
#race .race-v { font: 800 44px var(--display); font-variant-numeric: tabular-nums; line-height: 1; }
#race .race-unit { color: var(--muted); font: 700 14px var(--body); }
#race .race-arrows { display: flex; gap: 6px; }
#race .race-arrows i { flex: 1; height: 14px; border-radius: 3px; clip-path: polygon(0 0, 80% 0, 100% 50%, 80% 100%, 0 100%, 20% 50%); background: rgba(255, 255, 255, 0.15); }
#race .race-arrows i[data-on="true"] { background: var(--good); }
#race .race-nitrous { height: 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
#race .race-nitrous i { display: block; height: 100%; width: calc(var(--n, 0) * 100%); background: linear-gradient(90deg, #4fd8ff, #9a7bff); border-radius: 999px; }
#race[data-burning="true"] .race-speed { border-color: #7fe0ff; box-shadow: 0 0 22px rgba(79, 216, 255, 0.5); }
#race .race-nitrous-text { color: var(--muted); font: 700 12.5px var(--body); }
#race .race-map { right: 18px; top: 18px; width: 230px; padding: 10px 12px; }
#race .race-map svg { width: 200px; height: 200px; display: block; }
#race .race-map .track { fill: none; stroke: rgba(255, 255, 255, 0.4); stroke-width: 14; stroke-linejoin: round; }
#race .race-map polygon { fill: #5f8fbf; }
#race .race-map .dots path { stroke-linecap: round; stroke-width: 34; stroke: #b48cff; }
#race .race-map .dots path.you { stroke: var(--gold); stroke-width: 52; }
#race .race-map .dots path.ghost { stroke: rgba(159, 232, 255, 0.7); }
#race .race-banner { position: absolute; left: 50%; top: 110px; transform: translateX(-50%); padding: 8px 30px; border-radius: 14px; background: var(--panel); font: 800 34px var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
#race .race-banner[data-state="lights"] { font-size: 84px; color: var(--gold); top: 120px; }
#race .race-banner[data-state="go"] { font-size: 72px; color: var(--good); }
#race .race-banner[data-state="nitrous"] { color: #7fe0ff; }
#race .race-banner[data-state="warn"] { color: var(--bad); }
#race .race-warn { left: 50%; transform: translateX(-50%); top: 190px; margin: 0; color: var(--warn); border-color: var(--warn); font: 800 16px var(--body); }
#races { left: 6vw; top: 9vh; width: min(480px, 88vw); }
#pause, #results { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(520px, 92vw); }
body[data-screen="race_pause"] #stage::after { content: ""; position: absolute; inset: 0; background: rgba(5, 12, 16, 0.45); pointer-events: none; }
body[data-screen="race_pause"] #pause { z-index: 2; }
@media (max-width: 760px) { #race .race-map { display: none; } #race .race-speed { width: 190px; } }