/* (internal note removed from the public copy) */
/* ================================================================
   VORTREX — HUD AND MENU SKIN                            src/hud.css
   ================================================================
   What it replaces (it read as a web app): rounded, blurred card panels,
   thin rounded progress bars, stock range sliders, bordered buttons,
   monospace labels at 10px, emoji and fallback-font glyph icons.

   The language, in five rules:
     1. FRAMES: one recipe. A chamfer on two corners (clip-path), 1px
        hairline edges, bright corner ticks, a SOLID dark plate (rgba, never
        blur: OVERCLOCK and UPDRAFT flash the scene near-white and thin text
        on glass washed out). No border-radius, no backdrop-filter, no drop
        shadows. The accent names the channel: cyan = systems, magenta =
        threat (guardians, low integrity), gold = score and rewards.
     2. TYPE: Rajdhani throughout, uppercase labels on a fixed scale
        (10 caps · 11 labels · 14 body · 20 titles · 24+ numerals). Share
        Tech Mono only where digits must not jitter (the run clock).
     3. KEYS are caps: [SPACE], [E], [M] — a prompt names the key it needs.
     4. GAUGES are segmented cells on a fixed pitch, with big numerals.
     5. CHROME is contextual: HOW TO PLAY folds behind its title (a native
        <details>, keyboard and touch), the sub-meters only exist while they
        run, the first-run hint shows one control at a time.

   Icons are inline SVG in index.html (one geometric line style) or CSS
   shapes. No spirals or swirls anywhere (operator ruling); no Unicode
   glyph icons (the fonts are Latin-only, a glyph would fall back to a
   random OS font).

   Animates transform and opacity only; every loop stops under
   prefers-reduced-motion. Layout holds at 1280x720, 1920x1080, 390x844
   (portrait, touch) and 844x390 (landscape, touch) with safe-area insets.
   State (what shows when) lives in index.html; this file is the look. */

@font-face { font-family: "Rajdhani"; font-weight: 500; font-style: normal; font-display: block; src: url("../fonts/rajdhani-500.woff2") format("woff2"); }
@font-face { font-family: "Rajdhani"; font-weight: 600; font-style: normal; font-display: block; src: url("../fonts/rajdhani-600.woff2") format("woff2"); }
@font-face { font-family: "Rajdhani"; font-weight: 700; font-style: normal; font-display: block; src: url("../fonts/rajdhani-700.woff2") format("woff2"); }
@font-face { font-family: "Share Tech Mono"; font-weight: 400; font-style: normal; font-display: block; src: url("../fonts/share-tech-mono-400.woff2") format("woff2"); }

:root {
  --ui: "Rajdhani", "Segoe UI", system-ui, sans-serif;
  --mono: "Share Tech Mono", ui-monospace, Consolas, monospace;
  --ink-1: #eafcff;
  --ink-2: #a3c3dc;
  --ink-3: #8aa4c0;
  --line: rgba(79, 240, 255, 0.3);
  --hi: rgba(79, 240, 255, 0.92);
  --hot-line: rgba(255, 61, 129, 0.42);
  --gold-line: rgba(255, 209, 102, 0.38);
  --plate-a: rgba(5, 6, 13, 0.84);
  --plate-b: rgba(5, 6, 13, 0.7);
  --ts: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 8px rgba(2, 4, 10, 0.85);
  --fs-cap: 10px;
  --fs-label: 11px;
  --fs-body: 14px;
  --fs-num: 24px;
  /* the menu plates' faint vertical rain, one 1px line every 64px */
  --rain: repeating-linear-gradient(90deg, rgba(79, 240, 255, 0.02) 0 1px, transparent 1px 64px);
  /* the two-corner chamfer (frames) and the four-corner one (touch controls) */
  --c: 10px;
  --oct: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

body { font-family: var(--ui); }

/* ------------------------------------------------------------------ frame --
   The one panel recipe. Layers, top to bottom: the two chamfer accents, the
   corner ticks (top-right, bottom-left), the four hairline edges, the plate.
   clip-path cuts the chamfer; the 135/315deg accents sit exactly on it (a
   point (x,y) lies at (x+y)·cos45 along a 135deg gradient). Tune a surface
   with --f-cut / --f-tick / --f-line / --f-hi / --f-a / --f-b. */
.fr, .cta, .btn {
  --f-cut: 10px;
  --f-tick: 18px;
  --f-line: var(--line);
  --f-hi: var(--hi);
  --f-a: var(--plate-a);
  --f-b: var(--plate-b);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  clip-path: polygon(var(--f-cut) 0, 100% 0, 100% calc(100% - var(--f-cut)), calc(100% - var(--f-cut)) 100%, 0 100%, 0 var(--f-cut));
  background:
    linear-gradient(135deg, transparent calc(var(--f-cut) * 0.7071), var(--f-hi) calc(var(--f-cut) * 0.7071), var(--f-hi) calc(var(--f-cut) * 0.7071 + 1.5px), transparent calc(var(--f-cut) * 0.7071 + 1.5px)),
    linear-gradient(315deg, transparent calc(var(--f-cut) * 0.7071), var(--f-hi) calc(var(--f-cut) * 0.7071), var(--f-hi) calc(var(--f-cut) * 0.7071 + 1.5px), transparent calc(var(--f-cut) * 0.7071 + 1.5px)),
    linear-gradient(var(--f-hi), var(--f-hi)) right top / var(--f-tick) 1.5px no-repeat,
    linear-gradient(var(--f-hi), var(--f-hi)) right top / 1.5px calc(var(--f-tick) * 0.6) no-repeat,
    linear-gradient(var(--f-hi), var(--f-hi)) left bottom / var(--f-tick) 1.5px no-repeat,
    linear-gradient(var(--f-hi), var(--f-hi)) left bottom / 1.5px calc(var(--f-tick) * 0.6) no-repeat,
    linear-gradient(var(--f-line), var(--f-line)) center top / 100% 1px no-repeat,
    linear-gradient(var(--f-line), var(--f-line)) center bottom / 100% 1px no-repeat,
    linear-gradient(var(--f-line), var(--f-line)) left center / 1px 100% no-repeat,
    linear-gradient(var(--f-line), var(--f-line)) right center / 1px 100% no-repeat,
    linear-gradient(180deg, var(--f-a), var(--f-b));
}
.fr.hot { --f-line: var(--hot-line); --f-hi: var(--hot); }

/* ---------------------------------------------------------------- key cap */
.kc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  box-sizing: border-box;
  vertical-align: middle;
  font: 700 var(--fs-label)/1 var(--ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-1);
  text-shadow: none;
  background: linear-gradient(180deg, rgba(22, 52, 70, 0.96), rgba(6, 16, 26, 0.96));
  border: 1px solid rgba(79, 240, 255, 0.72);
  border-bottom-width: 2px;
  border-radius: 0;
  clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px);
}
.kc.w { padding: 0 9px; }
/* arrow keys and the rescue pip, drawn (the fonts carry no arrow or diamond glyphs) */
.arr { display: inline-block; width: 8px; height: 8px; border: 2px solid currentColor; border-width: 2px 0 0 2px; transform: translateX(2px) rotate(-45deg); }
.arr.r { transform: translateX(-2px) rotate(135deg); }
.pip { display: inline-block; width: 7px; height: 7px; margin: 0 7px 0 5px; border: 1px solid var(--accent); transform: rotate(45deg); vertical-align: 1px; }
.pip.on { background: var(--accent); }

/* ------------------------------------------------------------------- HUD --
   Top-left: the INTEGRITY frame and the systems frame under it (MAW CHARGE,
   RESCUE, UPDRAFT, OVERCLOCK — the last two exist only while they run).
   Top-right: the readout (altitude numeral, zone, clock, chain). */
#hud {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  padding: calc(10px + var(--safe-t)) calc(12px + var(--safe-r)) calc(10px + var(--safe-b)) calc(12px + var(--safe-l));
}
#topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
#meters { width: min(46vw, 300px); display: flex; flex-direction: column; gap: 6px; }
.label {
  font: 700 var(--fs-label)/1 var(--ui);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-shadow: var(--ts);
}

#hpPanel { padding: 8px 12px 10px; --f-hi: var(--hpc, var(--hi)); }
#hpPanel .label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; color: var(--ink-1); }
#hpNum {
  font: 700 var(--fs-num)/1 var(--ui);
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 0 10px var(--hpc, var(--accent)), var(--ts);
}

/* gauges: cells on a fixed pitch (--cell, cut by the mask), a dim track, the fill scales in X */
.meter, #heroBar {
  --cells: repeating-linear-gradient(90deg, #000 0 calc(var(--cell) - 2px), transparent calc(var(--cell) - 2px) var(--cell));
  -webkit-mask: var(--cells);
  mask: var(--cells);
}
.meter {
  --cell: 5%;
  position: relative;
  height: 8px;
  overflow: hidden;
  background: rgba(79, 240, 255, 0.12);
}
.meter > i {
  display: block;
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform 0.12s linear;
}
#hpMeter { --cell: 10%; height: 14px; }
#hpLag { background: rgba(255, 255, 255, 0.85); transition: transform 0.5s ease-out 0.25s; }
#hpFill { background: var(--hpc, var(--accent)); }
#hpFill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 55%); }
#hpPanel.low { --f-line: var(--hot-line); }
#hpPanel.low .label { color: #ff9bbd; }
#hpPanel.low #hpFill { animation: hpblink 0.6s steps(2) infinite; }
@keyframes hpblink { 50% { opacity: 0.45; } }

#sys { --f-cut: 8px; --f-tick: 14px; padding: 7px 12px 8px; display: flex; flex-direction: column; gap: 6px; }
.meterwrap { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 0 8px; min-height: 12px; }
.meterwrap .label { position: relative; font-size: var(--fs-cap); letter-spacing: 0.16em; white-space: nowrap; }
.tag { position: absolute; left: 0; top: 0; font-style: normal; color: #fff; opacity: 0; text-shadow: 0 0 8px var(--accent); }
#ultBox.ready .label > span { opacity: 0; }
#ultBox.ready .tag { opacity: 1; animation: tagblink 1s steps(2) infinite; }
@keyframes tagblink { 50% { opacity: 0.35; } }
#ultFill { background: linear-gradient(90deg, #4ff0ff, #b6fff9); }
#ultBox.ready #ultFill { background: linear-gradient(90deg, #b6fff9, #ffffff); }
#rescuePips { display: flex; align-items: center; gap: 7px; height: 12px; }
#rescuePips i { width: 7px; height: 7px; border: 1px solid rgba(79, 240, 255, 0.75); transform: rotate(45deg); }
#rescuePips i.on { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
#udBox .label { color: #7af6ff; }
#udFill { background: linear-gradient(90deg, #2fd8ff, #dcfdff); }
#ocBox .label { color: var(--gold); }
#ocBox .meter { background: rgba(255, 209, 102, 0.14); }
#ocFill { background: linear-gradient(90deg, #ffb020, #fff2b0); }

#stats { --f-cut: 8px; --f-tick: 14px; min-width: 124px; padding: 8px 12px 9px 16px; text-align: right; }
#stats .label { font-size: var(--fs-cap); letter-spacing: 0.3em; color: var(--ink-3); }
#alt { margin-top: 3px; font: 700 30px/1 var(--ui); letter-spacing: 0.02em; color: #fff; text-shadow: 0 0 12px rgba(79, 240, 255, 0.45), var(--ts); }
#alt .unit { margin-left: 3px; font: 700 12px/1 var(--ui); letter-spacing: 0.12em; color: var(--accent); }
#zone { margin-top: 5px; font: 700 var(--fs-label)/1 var(--ui); letter-spacing: 0.3em; color: var(--accent); text-shadow: var(--ts); }
#timer { margin-top: 5px; font: 400 12px/1 var(--mono); letter-spacing: 0.06em; color: var(--ink-2); text-shadow: var(--ts); }
#combo { margin-top: 5px; min-height: 12px; font: 700 12px/1 var(--ui); letter-spacing: 0.18em; color: var(--gold); text-shadow: 0 0 8px rgba(255, 209, 102, 0.5), var(--ts); }

/* guardian: name and health across the bottom centre while the arena is locked
   (the top of the view belongs to the ceiling during the fight) */
#bossBar {
  position: fixed;
  bottom: calc(16px + var(--safe-b));
  left: 50%;
  transform: translateX(-50%);
  width: min(60vw, 460px);
  z-index: 11;
  padding: 8px 18px 11px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
  --f-line: var(--hot-line);
  --f-hi: var(--hot);
}
#bossBar.on { opacity: 1; }
#bossName { margin-bottom: 7px; font: 700 12px/1 var(--ui); letter-spacing: 0.34em; color: #fff; text-shadow: 0 0 10px var(--hot); }
#bossName::before { content: "GUARDIAN"; display: block; margin-bottom: 5px; font: 700 9px/1 var(--ui); letter-spacing: 0.42em; color: #ff7aa5; text-shadow: none; }
#bossMeter { height: 10px; background: rgba(255, 61, 129, 0.14); }
#bossFill { background: var(--hot); }
#bossFill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 55%); }

/* the small bar over the hero's head, shown briefly after a hit */
#heroBar {
  position: fixed;
  width: 56px;
  height: 6px;
  margin-left: -28px;
  z-index: 11;
  overflow: hidden;
  background: rgba(5, 6, 13, 0.75);
  --cell: 20%;
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}
#heroBar.on { opacity: 1; }
#heroBar > i { display: block; height: 100%; background: var(--hpc, var(--accent)); transform-origin: left center; }

/* low integrity: a magenta vignette with a hairline frame, pulsing */
#lowEdge {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  opacity: 0;
  transition: opacity 0.3s;
  background: radial-gradient(ellipse at center, rgba(255, 40, 80, 0) 52%, rgba(255, 40, 80, 0.5) 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 61, 129, 0.55);
}
#lowEdge.on { opacity: 1; animation: lowpulse 1.1s ease-in-out infinite; }
@keyframes lowpulse { 50% { opacity: 0.45; } }

/* zone banner: a title band across the scene */
#banner {
  position: absolute;
  left: 0;
  right: 0;
  top: 34%;
  padding: 16px 0 14px;
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  background: linear-gradient(90deg, rgba(5, 6, 13, 0) 0%, rgba(5, 6, 13, 0.74) 22%, rgba(5, 6, 13, 0.74) 78%, rgba(5, 6, 13, 0) 100%);
}
#banner::before, #banner::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  height: 1px;
  background: linear-gradient(90deg, rgba(79, 240, 255, 0), rgba(79, 240, 255, 0.7) 30%, rgba(79, 240, 255, 0.7) 70%, rgba(79, 240, 255, 0));
}
#banner::before { top: 0; }
#banner::after { bottom: 0; }
#banner.show { opacity: 1; transform: none; }
#banner .bt {
  font: 700 clamp(24px, 6vw, 50px)/1.05 var(--ui);
  letter-spacing: 0.2em;
  padding-left: 0.2em;
  color: #fff;
  text-shadow: 0 0 22px var(--accent), 0 2px 2px rgba(0, 0, 0, 0.8);
}
#banner .bs {
  margin-top: 9px;
  font: 600 clamp(9px, 2.4vw, 12px)/1 var(--ui);
  letter-spacing: 0.4em;
  padding-left: 0.4em;
  color: var(--ink-2);
  text-shadow: var(--ts);
}

/* toast: a gold line on a plate (pickups, secrets) */
#toast {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(92vw, 560px);
  padding: 8px 18px 9px;
  font: 700 12px/1.35 var(--ui);
  letter-spacing: 0.24em;
  text-align: center;
  color: var(--gold);
  text-shadow: 0 0 8px rgba(255, 209, 102, 0.4);
  opacity: 0;
  transition: opacity 0.3s;
  --f-cut: 6px;
  --f-tick: 12px;
  --f-line: var(--gold-line);
  --f-hi: var(--gold);
}
#toast.show { opacity: 1; }

/* first-run hints: one control at a time, until it has been used */
#hint {
  position: fixed;
  left: 50%;
  bottom: calc(22px + var(--safe-b));
  transform: translateX(-50%) translateY(8px);
  z-index: 12;
  padding: 11px 20px 12px;
  font: 600 15px/1.3 var(--ui);
  letter-spacing: 0.08em;
  color: var(--ink-1);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
  --f-cut: 8px;
  --f-tick: 16px;
  --f-line: rgba(79, 240, 255, 0.5);
}
#hint.show { opacity: 1; transform: translateX(-50%); }
#hint b { color: var(--accent); font-weight: 700; letter-spacing: 0.16em; }
#hint .kc { margin: 0 3px; }
/* the guardian bar owns the bottom centre: the hint moves up while it is on */
#bossBar.on ~ #hint { bottom: calc(86px + var(--safe-b)); }

/* ---------------------------------------------------------- touch controls --
   A 2x2 thumb cluster at the bottom right (JUMP and CYCLONE on the resting
   row, TWISTER and MAW above), so the readout and the guardian bar stay clear.
   The stick is an octagon ring that appears where the thumb lands. */
#touch { position: fixed; inset: 0; z-index: 11; }
#stick { position: absolute; left: 0; bottom: 0; width: 52%; height: 58%; }
#stickBase, #stickNub { position: absolute; pointer-events: none; opacity: 0; transition: opacity 0.15s; clip-path: var(--oct); }
#stickBase { --c: 26px; width: 112px; height: 112px; margin: -56px 0 0 -56px; background: rgba(79, 240, 255, 0.4); }
#stickBase::before { content: ""; position: absolute; inset: 1px; background: rgba(5, 6, 13, 0.3); clip-path: var(--oct); }
#stickNub { --c: 11px; width: 46px; height: 46px; margin: -23px 0 0 -23px; background: rgba(79, 240, 255, 0.85); }
#stickNub::before { content: ""; position: absolute; inset: 1px; background: rgba(79, 240, 255, 0.28); clip-path: var(--oct); }
#stick.on #stickBase, #stick.on #stickNub { opacity: 1; }
#buttons {
  position: absolute;
  right: calc(14px + var(--safe-r));
  bottom: calc(18px + var(--safe-b));
  display: grid;
  grid-template-columns: 66px 66px;
  grid-template-areas: "tw maw" "cyc jump";
  gap: 10px;
}
#bJump { grid-area: jump; }
#bFire { grid-area: cyc; }
#bTwister { grid-area: tw; }
#bMaw { grid-area: maw; }
.btn {
  position: relative;
  width: 66px;
  height: 66px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font: 700 9px/1 var(--ui);
  letter-spacing: 0.16em;
  color: #dff6ff;
  --f-cut: 14px;
  --f-tick: 20px;
  --f-line: rgba(207, 232, 255, 0.35);
  --f-hi: rgba(207, 232, 255, 0.8);
  --f-a: rgba(8, 12, 24, 0.74);
  --f-b: rgba(5, 6, 13, 0.8);
  touch-action: none;
}
.btn .ico { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
.btn .ico .f { fill: currentColor; stroke: none; }
.btn:active { transform: scale(0.94); }
.btn.cool::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); transform-origin: bottom; transform: scaleY(var(--cd, 0)); }
.btn.ult { --f-line: rgba(79, 240, 255, 0.5); --f-hi: var(--accent); color: #eaffff; }
.btn.ult.ready { --f-a: rgba(16, 58, 76, 0.86); --f-b: rgba(12, 44, 60, 0.86); --f-hi: #fff; color: #fff; }
.btn.ult.ready::before { content: ""; position: absolute; inset: 0; background: rgba(79, 240, 255, 0.26); animation: btnpulse 1s ease-in-out infinite; }
@keyframes btnpulse { 50% { opacity: 0.15; } }
.btn.disabled { opacity: 0.35; }

/* --------------------------------------------------------------- screens --
   Title, pause, game over: a dark plate over the scene (the title keeps a
   clear window around the black hole behind the logo: --hx/--hy follow the
   logo, set by the game). Centred when it fits, scrolls from the top when it
   does not (safe center; older engines fall back to flex-start). */
.screen {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  justify-content: safe center;
  text-align: center;
  padding: calc(22px + var(--safe-t)) calc(16px + var(--safe-r)) calc(22px + var(--safe-b)) calc(16px + var(--safe-l));
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--rain), linear-gradient(180deg, rgba(5, 6, 13, 0.9), rgba(5, 6, 13, 0.94));
}
.screen > * { flex: 0 0 auto; max-width: 100%; }
#title {
  background:
    var(--rain),
    radial-gradient(circle at var(--hx, 50%) var(--hy, 30%), rgba(5, 6, 13, 0) 0, rgba(5, 6, 13, 0) 90px, rgba(8, 12, 26, 0.72) 220px, rgba(5, 6, 13, 0.94) 75%);
}
h1 {
  margin: 0;
  font: 700 clamp(40px, 11vw, 84px)/1 var(--ui);
  letter-spacing: 0.22em;
  padding-left: 0.22em;
  color: #fff;
  text-shadow: 0 0 30px rgba(79, 240, 255, 0.75), 0 0 70px rgba(255, 61, 129, 0.35);
}
h1.h1-sm { font-size: clamp(28px, 8vw, 56px); }
.sub {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  font: 600 clamp(10px, 2.6vw, 13px)/1 var(--ui);
  letter-spacing: 0.42em;
  padding-left: 0.42em;
  color: var(--accent);
  text-shadow: var(--ts);
}
.sub::before, .sub::after { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, rgba(79, 240, 255, 0), var(--line)); }
.sub::after { background: linear-gradient(270deg, rgba(79, 240, 255, 0), var(--line)); }
.body { margin-top: 20px; max-width: 540px; font: 500 var(--fs-body)/1.7 var(--ui); letter-spacing: 0.03em; color: var(--ink-2); }
.body b { color: var(--gold); font-weight: 700; letter-spacing: 0.06em; }

/* buttons: a frame that names its key */
.ctas { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 26px; }
.cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  padding: 0 24px;
  font: 700 13px/1 var(--ui);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-1);
  cursor: pointer;
  transition: color 0.15s;
  --f-cut: 8px;
  --f-tick: 14px;
  --f-line: rgba(79, 240, 255, 0.5);
  --f-hi: var(--accent);
  --f-a: rgba(79, 240, 255, 0.16);
  --f-b: rgba(79, 240, 255, 0.07);
}
.cta.primary {
  min-height: 50px;
  padding: 0 32px 0 28px;
  font-size: 14px;
  color: var(--ink);
  --f-line: var(--accent);
  --f-hi: #fff;
  --f-a: rgba(79, 240, 255, 0.95);
  --f-b: rgba(79, 240, 255, 0.72);
}
.cta.primary::before { content: ""; width: 8px; height: 12px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.cta.ghost { color: var(--hud); --f-line: rgba(207, 232, 255, 0.32); --f-hi: rgba(207, 232, 255, 0.75); --f-a: rgba(5, 6, 13, 0.6); --f-b: rgba(5, 6, 13, 0.4); }
.cta:hover { color: #fff; --f-line: var(--accent); --f-hi: #fff; }
.cta.primary:hover { color: var(--ink); --f-a: #b6fff9; --f-b: #4ff0ff; }
.cta:active { transform: scale(0.97); }
.cta .kc { min-width: 20px; height: 20px; font-size: 10px; margin-left: 2px; }
.cta .mstate { color: var(--accent); }
.cta[aria-pressed="false"] .mstate { color: var(--ink-3); }

/* HOW TO PLAY: folded behind its title; the closed row teases the four keys
   that matter, the open panel is the full legend (keys or touch) */
.howto { margin-top: 24px; width: min(860px, 100%); text-align: left; --f-cut: 12px; --f-tick: 22px; --f-a: rgba(5, 6, 13, 0.88); --f-b: rgba(5, 6, 13, 0.82); }
.howto summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 13px 18px 12px 16px;
  font: 700 12px/1 var(--ui);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--accent);
}
.howto summary::-webkit-details-marker { display: none; }
.caret { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid currentColor; transform: rotate(-90deg); transition: transform 0.2s; }
.howto[open] .caret { transform: none; }
.ht-sum { margin-right: 2px; }
.ht-tease { display: inline-flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin-left: auto; font: 600 11px/1 var(--ui); letter-spacing: 0.12em; color: var(--ink-2); }
.ht-tease > span { display: inline-flex; align-items: center; gap: 6px; }
.ht-tease .kc { min-width: 20px; height: 20px; font-size: 10px; }
.howto[open] .ht-tease { display: none; }
.ht-body { padding: 2px 18px 16px; border-top: 1px solid rgba(79, 240, 255, 0.18); }
.ht-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 24px; padding-top: 13px; }
.ht-row { display: flex; align-items: center; gap: 10px; min-width: 0; font: 500 13px/1.3 var(--ui); }
.ht-row .caps { display: flex; gap: 4px; align-items: center; flex: 0 0 auto; min-width: 138px; }
.ht-row b { flex: 0 0 auto; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; }
.ht-row i { font-style: normal; font-size: 12px; color: var(--ink-2); }
.or { font-size: 10px; letter-spacing: 0.06em; color: var(--ink-3); }
.ht-items {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 20px;
  justify-content: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(79, 240, 255, 0.12);
  font: 500 12px/1 var(--ui);
  color: var(--ink-2);
}
.ht-items > span { display: inline-flex; align-items: center; gap: 8px; }
.it { --c: 4px; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-weight: 700; color: #fff; clip-path: var(--oct); }
.it.hp { background: rgba(80, 255, 150, 0.35); box-shadow: 0 0 10px rgba(80, 255, 150, 0.7); }
.it.ud { background: rgba(80, 220, 255, 0.35); box-shadow: 0 0 10px rgba(120, 240, 255, 0.8); }
.it.ud::before { content: ""; width: 7px; height: 7px; border: 2px solid #fff; border-width: 2px 0 0 2px; transform: translateY(2px) rotate(45deg); }
.it.oc { background: rgba(255, 190, 50, 0.35); box-shadow: 0 0 10px rgba(255, 200, 60, 0.8); }
.it.oc::before { content: ""; width: 12px; height: 12px; background: #fff8d6; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.it.fl { width: 26px; height: 6px; background: #ff3d5a; box-shadow: 0 0 10px #ff3d5a; clip-path: none; }
.it.tip, .it.slp, .it.wal { width: 18px; height: 6px; background: #1c2536; clip-path: none; }
.it.tip { box-shadow: inset 0 2px 0 #ffc65a; }
.it.slp { box-shadow: inset 0 2px 0 #ff7a3d; transform: rotate(-14deg); }
.it.wal { width: 6px; height: 16px; box-shadow: inset 2px 0 0 var(--accent); }

/* high scores */
.scores { margin-top: 22px; width: min(560px, 100%); }
.hs-head { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 10px; font: 700 var(--fs-label)/1 var(--ui); letter-spacing: 0.24em; color: var(--gold); }
.hs-head::before, .hs-head::after { content: ""; flex: 0 1 40px; height: 1px; background: linear-gradient(90deg, rgba(255, 209, 102, 0), var(--gold-line)); }
.hs-head::after { background: linear-gradient(270deg, rgba(255, 209, 102, 0), var(--gold-line)); }
.hs-empty { font: 600 var(--fs-label)/1 var(--ui); letter-spacing: 0.2em; color: var(--ink-3); }
table.hs { width: 100%; border-collapse: collapse; font: 600 13px/1.2 var(--ui); letter-spacing: 0.06em; color: var(--ink-2); }
table.hs td { padding: 5px 8px; text-align: right; white-space: nowrap; border-bottom: 1px solid rgba(79, 240, 255, 0.08); }
table.hs td:first-child { width: 2em; text-align: left; font: 400 12px/1 var(--mono); color: var(--ink-3); }
table.hs td:nth-child(2) { text-align: left; letter-spacing: 0.22em; color: #fff; }
table.hs td:nth-child(3) { font-weight: 700; color: var(--ink-1); }
table.hs td:last-child { font: 400 12px/1 var(--mono); }
tr.hs-cols td { padding-bottom: 6px; font: 700 9px/1 var(--ui); letter-spacing: 0.22em; color: var(--ink-3); border-bottom: 1px solid rgba(79, 240, 255, 0.28); }
/* one flat band across the row (a gradient per cell showed seams), with an accent edge at the left */
tr.hs-you td { color: var(--accent); text-shadow: 0 0 10px var(--accent); background: rgba(79, 240, 255, 0.09); }
tr.hs-you td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
tr.hs-you td:nth-child(2), tr.hs-you td:nth-child(3) { color: #fff; }
/* a full clear's time wears a gold star */
tr.hs-clear td:last-child::after {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-left: 6px;
  vertical-align: -1px;
  background: var(--gold);
  /* five points: a four-point star this small reads as a plus sign */
  clip-path: polygon(50% 0, 61.8% 35.4%, 100% 38.2%, 69.1% 61.8%, 80.9% 100%, 50% 76.4%, 19.1% 100%, 30.9% 61.8%, 0 38.2%, 38.2% 35.4%);
}

/* game over */
#deadStats { margin-top: 16px; font: 700 15px/1.7 var(--ui); letter-spacing: 0.14em; color: #fff; text-shadow: var(--ts); }
#nameRow { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
#nameRow label { font: 700 var(--fs-label)/1 var(--ui); letter-spacing: 0.24em; color: var(--gold); }
#nameIn {
  width: 4.6em;
  height: 46px;
  padding: 0 0 0 0.3em;
  background: rgba(79, 240, 255, 0.08);
  border: 1px solid var(--accent);
  border-bottom-width: 3px;
  border-radius: 0;
  color: #fff;
  font: 700 24px/1 var(--ui);
  letter-spacing: 0.3em;
  text-align: center;
  text-transform: uppercase;
  caret-color: var(--accent);
  outline: 2px solid transparent;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
#nameIn:focus { background: rgba(79, 240, 255, 0.16); border-color: #fff; outline: 3px solid #fff; outline-offset: 2px; }
#nameRow .cta { min-height: 46px; padding: 0 18px; }
/* Pause for pointer, touch and switch users (WCAG 2.1.1, 2.2.1): P and Esc still work.
   Only while a run is live; the screens and map hide it like the rest of the HUD. */
#pauseBtn { display: none; position: fixed; right: calc(var(--safe-r) + 8px); top: 50%; z-index: 12; min-width: 44px; min-height: 44px; }
body.playing #pauseBtn { display: inline-flex; }
body.mapopen #pauseBtn, body:has(.screen:not(.hidden)) #pauseBtn { display: none; }
.egg { margin-top: 18px; max-width: 460px; font: italic 500 12px/1.5 var(--ui); letter-spacing: 0.04em; color: var(--ink-3); }

/* volume: a hairline track, a chamfered thumb */
.vols { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.musicVol, .sfxVol { align-items: center; gap: 12px; font: 700 var(--fs-cap)/1 var(--ui); letter-spacing: 0.26em; color: var(--ink-2); }
.musicVol > span, .sfxVol > span { width: 64px; text-align: right; }
/* one segmented track and one chamfered thumb for both engines (their pseudo-elements cannot
   share a rule: a selector one engine does not know drops the whole rule) */
input[type="range"] {
  --track: repeating-linear-gradient(90deg, rgba(79, 240, 255, 0.55) 0 6px, rgba(79, 240, 255, 0.15) 6px 9px);
  --thumb-cut: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px);
  -webkit-appearance: none; appearance: none; width: 180px; height: 20px; margin: 0; font: inherit; background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: var(--track); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 18px; margin-top: -7px; background: var(--accent); clip-path: var(--thumb-cut); }
input[type="range"]::-moz-range-track { height: 4px; background: var(--track); }
input[type="range"]::-moz-range-thumb { width: 12px; height: 18px; border: 0; border-radius: 0; background: var(--accent); clip-path: var(--thumb-cut); }

/* ------------------------------------------------------------- world map */
#mapUI { position: fixed; inset: 0; z-index: 19; pointer-events: none; }
.map-title {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(22px + var(--safe-t));
  text-align: center;
  font: 700 clamp(18px, 4vw, 28px)/1 var(--ui);
  letter-spacing: 0.34em;
  padding-left: 0.34em;
  color: #fff;
  text-shadow: 0 0 18px rgba(79, 240, 255, 0.7);
}
.map-title::after { content: attr(data-lap); display: block; margin-top: 8px; font: 700 var(--fs-label)/1 var(--ui); letter-spacing: 0.3em; color: var(--gold); }
.map-node {
  position: absolute;
  left: 0;
  top: 0;
  margin: -8px 0 0 18px;
  padding: 4px 9px 5px;
  white-space: nowrap;
  font: 700 11px/1.25 var(--ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c);
  background: rgba(5, 6, 13, 0.74);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
  transition: opacity 0.2s;
}
.map-node b { display: block; font-weight: 700; }
.map-node i { display: block; font-style: normal; font-weight: 600; font-size: 10px; letter-spacing: 0.12em; opacity: 0.7; }
.map-node.done b::after { content: ""; display: inline-block; width: 4px; height: 8px; margin: 0 0 1px 8px; border: solid #7dffb0; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.map-you { position: absolute; left: 0; top: 0; margin: -30px 0 0 -14px; font: 700 11px/1 var(--ui); letter-spacing: 0.3em; color: #fff; text-shadow: 0 0 10px #4ff0ff; }
#mapClose { position: absolute; right: calc(16px + var(--safe-r)); bottom: calc(18px + var(--safe-b)); pointer-events: auto; margin: 0; }

/* ------------------------------------------------------------ touch sizes --
   Phones take the same language one step down the scale. */
body.touch #meters { width: min(56vw, 240px); gap: 5px; }
body.touch #hpPanel { padding: 6px 10px 8px; }
body.touch #hpPanel .label { margin-bottom: 5px; }
body.touch #hpNum { font-size: 20px; }
body.touch #hpMeter { height: 11px; }
body.touch #sys { padding: 5px 10px 6px; gap: 4px; }
body.touch .meterwrap { grid-template-columns: 70px 1fr; }
body.touch .meterwrap .label { font-size: 9px; letter-spacing: 0.14em; }
body.touch .meter { height: 7px; }
body.touch #stats { min-width: 104px; padding: 6px 10px 7px 12px; }
body.touch #alt { font-size: 24px; }
body.touch #alt .unit { font-size: 11px; }
body.touch #zone { font-size: 10px; margin-top: 4px; }
body.touch #timer, body.touch #combo { font-size: 11px; margin-top: 4px; }
body.touch #banner .bt { font-size: clamp(20px, 5.4vw, 40px); }
body.touch #bossBar { padding: 6px 14px 9px; }
/* a thumb cannot read a hint at the bottom of the screen: it sits at the top
   centre between the two clusters (landscape) or a little lower (portrait) */
body.touch #hint {
  bottom: auto;
  top: calc(12px + var(--safe-t));
  max-width: calc(100vw - 24px);
  padding: 9px 16px 10px;
  font-size: 13px;
  white-space: normal;
  text-align: center;
}
body.touch #bossBar.on ~ #hint { bottom: auto; }

/* short viewports (landscape phones): tighter plates, the hint at the top */
@media (max-height: 460px) {
  #hud { padding-top: calc(6px + var(--safe-t)); }
  #meters { gap: 4px; }
  #hpPanel { padding: 5px 10px 6px; }
  #hpPanel .label { margin-bottom: 4px; }
  #hpMeter { height: 10px; }
  #sys { padding: 4px 10px 5px; gap: 3px; }
  #stats { padding: 5px 10px 6px 12px; }
  #alt { margin-top: 2px; }
  #banner { top: 30%; padding: 10px 0 9px; }
  .screen { padding-top: calc(10px + var(--safe-t)); padding-bottom: calc(10px + var(--safe-b)); }
  h1 { font-size: clamp(28px, 8vw, 54px); }
  h1.h1-sm { font-size: clamp(24px, 6vw, 40px); }
  .sub { margin-top: 8px; }
  .ctas { margin-top: 14px; }
  .howto { margin-top: 12px; }
  .scores { margin-top: 12px; }
  .vols { margin-top: 10px; }
}
/* portrait phones: the guardian bar shares the bottom with the thumb cluster */
@media (max-width: 560px) {
  body.touch #hint { top: 22%; }
  body.touch #bossBar { left: 12px; right: 172px; width: auto; transform: none; }
  .ht-tease { display: none; }
  .ctas { gap: 8px; }
  .cta { padding: 0 16px; letter-spacing: 0.22em; }
  .cta.primary { padding: 0 22px 0 18px; }
  .howto summary { padding: 12px 14px; }
  .ht-body { padding: 2px 12px 14px; }
  #nameRow label { flex: 1 0 100%; }
  .ht-row .caps { min-width: 118px; }
  table.hs td { padding: 5px; }
}
@media (max-width: 720px) { .ht-grid { grid-template-columns: 1fr; } }
@media (max-height: 640px) { .scores { font-size: 10px; } #title .body { display: none; } }
/* large desktops: one step up the scale */
@media (min-width: 1600px) and (min-height: 900px) {
  #hud { padding: calc(18px + var(--safe-t)) calc(20px + var(--safe-r)) calc(18px + var(--safe-b)) calc(20px + var(--safe-l)); }
  #meters { width: 360px; gap: 8px; }
  #hpPanel { padding: 10px 14px 12px; }
  #hpNum { font-size: 30px; }
  #hpMeter { height: 16px; }
  .meter { height: 9px; }
  .meterwrap { grid-template-columns: 96px 1fr; }
  .meterwrap .label { font-size: var(--fs-label); }
  #stats { min-width: 150px; padding: 10px 14px 11px 20px; }
  #alt { font-size: 38px; }
  #zone { font-size: 12px; }
  #timer, #combo { font-size: 13px; }
  #bossBar { width: min(50vw, 560px); }
  #hint { font-size: 17px; }
}

/* ------------------------------------------------------------ a11y, motion */
.cta:focus-visible, .howto summary:focus-visible, .btn:focus-visible, #pauseBtn:focus-visible { outline: 3px solid #fff; outline-offset: -4px; color: #fff; --f-hi: #fff; --f-line: #fff; }
#nameIn:focus-visible { border-color: #fff; }
input[type="range"]:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  #lowEdge.on, #hpPanel.low #hpFill, #ultBox.ready .tag, .btn.ult.ready::before { animation: none; }
  #banner, #toast, #hint, .caret, .cta, #stickBase, #stickNub { transition: none; }
}