@font-face { font-family: 'Jost'; src: url('fonts/Jost-Variable.ttf') format('truetype'); font-weight: 100 900; font-display: block; }
@font-face { font-family: 'Hanken'; src: url('fonts/HankenGrotesk-Variable.ttf') format('truetype'); font-weight: 100 900; font-display: block; }
@font-face { font-family: 'Plex Mono'; src: url('fonts/IBMPlexMono-Regular.ttf') format('truetype'); font-weight: 400; font-display: block; }

:root {
  --bg: #0B0B0C; --ivory: #F3EBDD; --gold: #D8B25A; --cyan: #8FE6FF;
  /* 1% of a 9:16 column that fits the screen */
  --u: min(1vw, 0.5625vh);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg); color: var(--ivory);
  font-family: 'Hanken', system-ui, sans-serif; -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; touch-action: none; overscroll-behavior: none; }
canvas#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }

#hud { position: fixed; inset: 0; pointer-events: none; }
#leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#leaders line { stroke: rgba(243,235,221,0.75); stroke-width: 1.2; }
#leaders circle { fill: var(--ivory); }
#leaders .cy line, #leaders line.cy { stroke: rgba(143,230,255,0.85); }
#leaders circle.cy { fill: var(--cyan); }
#leaders circle.gold { fill: var(--gold); } #leaders line.gold { stroke: rgba(216,178,90,0.85); }
.lbl { position: absolute; left: 0; top: 0; white-space: nowrap; font-family: 'Plex Mono', monospace; font-size: calc(var(--u) * 2.3);
  letter-spacing: 0.14em; color: var(--ivory); text-shadow: 0 1px 8px rgba(0,0,0,0.95); }
.lbl.cy { color: var(--cyan); } .lbl.gold { color: var(--gold); }

.panel-f { position: absolute; left: 50%; top: calc(5.5vh + env(safe-area-inset-top)); transform: translateX(-50%);
  width: calc(var(--u) * 62); padding: calc(var(--u) * 2) calc(var(--u) * 2.6) calc(var(--u) * 1.6);
  background: rgba(10,10,11,0.62); border: 1px solid rgba(243,235,221,0.12); border-radius: calc(var(--u) * 1.8);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-family: 'Plex Mono', monospace; }
.ph { display: flex; justify-content: space-between; align-items: center; margin-bottom: calc(var(--u) * 1.4);
  font-size: calc(var(--u) * 2.2); letter-spacing: 0.2em; color: var(--gold); }
.chip { font-size: calc(var(--u) * 1.9); letter-spacing: 0.16em; color: rgba(243,235,221,0.6); padding: calc(var(--u) * 0.35) calc(var(--u) * 1.2);
  border: 1px solid rgba(243,235,221,0.2); border-radius: 99px; }
.chip.on { color: var(--cyan); border-color: rgba(143,230,255,0.5); }
.chip.bad { color: #ff9b8a; border-color: rgba(255,155,138,0.5); }
.fr { display: flex; align-items: center; gap: calc(var(--u) * 1.4); margin: calc(var(--u) * 0.9) 0; }
.fl { width: calc(var(--u) * 13); font-size: calc(var(--u) * 2); letter-spacing: 0.12em; color: rgba(243,235,221,0.7); }
.fv { width: calc(var(--u) * 10); text-align: right; font-size: calc(var(--u) * 2.3); color: var(--ivory); font-variant-numeric: tabular-nums; }
.fb { position: relative; flex: 1; height: 2px; background: rgba(243,235,221,0.14); border-radius: 2px; }
.fb i { position: absolute; left: 0; top: -1px; height: 4px; border-radius: 2px; width: 0%; }
.fb i.gold { background: var(--gold); } .fb i.ivory { background: var(--ivory); }
.fb i.cyan { background: var(--cyan); box-shadow: 0 0 10px rgba(143,230,255,0.8); }
.fb b { position: absolute; left: 50%; top: -4px; width: 1px; height: 10px; background: rgba(216,178,90,0.9); }

.prompt { white-space: nowrap; position: absolute; left: 50%; top: 80%; transform: translate(-50%, -50%); text-align: center;
  font-family: 'Jost'; font-weight: 600; letter-spacing: 0.24em; font-size: calc(var(--u) * 6); color: var(--ivory);
  text-shadow: 0 2px 18px rgba(0,0,0,0.9); }
.prompt small { display: block; margin-top: calc(var(--u) * 1.2); font-family: 'Hanken'; font-weight: 500; letter-spacing: 0.02em; font-size: calc(var(--u) * 3.4); color: rgba(243,235,221,0.8); }
.prompt.gold { color: var(--gold); }
.prompt.pulse { animation: pulse 0.9s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.55; } }


.flight { position: absolute; left: 50%; transform: translateX(-50%); top: calc(5.5vh + env(safe-area-inset-top) + var(--u) * 17.5);
  display: flex; align-items: center; gap: calc(var(--u) * 2.4); padding: calc(var(--u) * 1.4) calc(var(--u) * 2.4);
  background: rgba(10,10,11,0.62); border: 1px solid rgba(243,235,221,0.12); border-radius: calc(var(--u) * 1.8);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-family: 'Plex Mono', monospace; }
.att { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
.att .ring { fill: none; stroke: rgba(243,235,221,0.25); stroke-width: 1.5; }
.att .lvl { stroke: var(--gold); stroke-width: 3; }
.att .carp { fill: var(--ivory); } .att .whl { fill: #0b0b0c; stroke: var(--ivory); stroke-width: 1.5; }
.fdata { display: grid; gap: calc(var(--u) * 0.6); min-width: calc(var(--u) * 30); }
.fdata div { display: flex; justify-content: space-between; gap: calc(var(--u) * 2); font-size: calc(var(--u) * 2.1); letter-spacing: 0.1em; color: rgba(243,235,221,0.65); }
.fdata b { font-weight: 400; color: var(--ivory); font-variant-numeric: tabular-nums; }
.fdata b.ok { color: #9fe3b0; } .fdata b.warn { color: var(--gold); } .fdata b.bad { color: #ff9b8a; }
.fdata .fuel { height: 3px; background: rgba(243,235,221,0.14); border-radius: 2px; position: relative; margin-top: calc(var(--u) * 0.4); }
.fdata .fuel i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--cyan); border-radius: 2px; }
.grade { position: absolute; left: 50%; top: 31%; transform: translate(-50%, -50%); text-align: center; white-space: nowrap;
  font-family: 'Jost'; font-weight: 600; letter-spacing: 0.24em; font-size: calc(var(--u) * 6); color: var(--gold); text-shadow: 0 2px 18px rgba(0,0,0,0.9); }
.grade small { display: block; margin-top: calc(var(--u) * 1); font-family: 'Plex Mono'; font-weight: 400; letter-spacing: 0.14em; font-size: calc(var(--u) * 2.4); color: var(--ivory); }

#fade { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; }

.panel { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 45%, rgba(11,11,12,0.35), rgba(11,11,12,0.86) 75%); }
#fail { background: rgba(11,11,12,0.6); }
#end { background: rgba(11,11,12,0.82); }
.col { width: calc(var(--u) * 84); text-align: center; display: flex; flex-direction: column; align-items: center; }
.kicker { font-family: 'Plex Mono'; font-size: calc(var(--u) * 2.6); letter-spacing: 0.22em; color: var(--gold); margin-bottom: calc(var(--u) * 3); }
h1 { white-space: nowrap; font-family: 'Jost'; font-weight: 600; font-size: calc(var(--u) * 11.5); letter-spacing: 0.14em; line-height: 1; margin-right: -0.14em; }
h1 span { color: var(--gold); font-weight: 400; }
.sub { font-family: 'Jost'; font-weight: 500; text-transform: uppercase; letter-spacing: 0.2em; font-size: calc(var(--u) * 3.6); color: var(--cyan); margin-top: calc(var(--u) * 4); }
.body { font-size: calc(var(--u) * 3.6); line-height: 1.4; color: rgba(243,235,221,0.82); margin-top: calc(var(--u) * 4); max-width: calc(var(--u) * 72); }
.why { font-family: 'Hanken'; font-weight: 700; font-size: calc(var(--u) * 5.4); line-height: 1.2; }
.btn { pointer-events: auto; margin-top: calc(var(--u) * 8); width: calc(var(--u) * 58); height: calc(var(--u) * 14);
  border-radius: 99px; border: 2px solid var(--gold); background: rgba(216,178,90,0.12); color: var(--ivory);
  font-family: 'Jost'; font-weight: 600; letter-spacing: 0.3em; font-size: calc(var(--u) * 4.4); cursor: pointer; padding-left: 0.3em; }
.btn:active { background: rgba(216,178,90,0.3); }
.logo { width: calc(var(--u) * 34); margin-top: calc(var(--u) * 9); opacity: 0.95; }
.logo.big { width: calc(var(--u) * 50); margin-top: calc(var(--u) * 7); }
.fine { font-size: calc(var(--u) * 2.3); line-height: 1.4; color: rgba(243,235,221,0.5); margin-top: calc(var(--u) * 4); max-width: calc(var(--u) * 70); }
.fact { text-align: left; width: 100%; padding: calc(var(--u) * 3) 0; border-top: 1px solid rgba(243,235,221,0.14); }
.fact .num { font-family: 'Plex Mono'; font-size: calc(var(--u) * 2.5); letter-spacing: 0.18em; color: var(--cyan); }
.fact p { margin-top: calc(var(--u) * 1.4); font-size: calc(var(--u) * 4); line-height: 1.35; }
.tagline { font-family: 'Jost'; font-weight: 500; font-size: calc(var(--u) * 4.6); line-height: 1.25; margin-top: calc(var(--u) * 4); color: var(--ivory); }
#end .btn { margin-top: calc(var(--u) * 6); }
.brand { pointer-events: auto; display: block; line-height: 0; }
.site { pointer-events: auto; margin-top: calc(var(--u) * 2.4); padding: calc(var(--u) * 1) calc(var(--u) * 2.4);
  font-family: 'Plex Mono', monospace; font-size: calc(var(--u) * 2.8); letter-spacing: 0.16em; color: var(--gold);
  text-decoration: none; border: 1px solid rgba(216,178,90,0.35); border-radius: 99px; -webkit-user-select: text; user-select: text; }
.site:hover, .site:focus-visible { background: rgba(216,178,90,0.12); border-color: var(--gold); outline: none; }

body.capture .panel, body.capture .prompt, body.capture .btn, body.capture .mute { display: none !important; }
.mute { position: fixed; z-index: 5; right: calc(12px + env(safe-area-inset-right)); top: calc(12px + env(safe-area-inset-top)); width: 40px; height: 40px;
  display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(243,235,221,0.22); background: rgba(10,10,11,0.55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer; pointer-events: auto; padding: 0; }
.mute svg { width: 20px; height: 20px; fill: none; stroke: var(--ivory); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mute .spk { fill: var(--ivory); stroke: none; } .mute .x { display: none; }
.mute.off .wave { display: none; } .mute.off .x { display: block; } .mute.off { opacity: 0.7; }
.mute:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }