/* ============================================================
   WebAimTrainer — UI styles
   Warm gunmetal base, tactical-orange accent. Hard edges, layered
   depth instead of neon glow. Design tokens up top; components below.
   ============================================================ */

:root {
  /* ---- Surfaces -------------------------------------------------------
     A single neutral ramp from the page background up through raised panels.
     Every surface in the app picks a step on this ramp instead of inventing
     its own rgba, which is what previously let two competing looks coexist. */
  --bg: #070a0f;
  --bg-2: #0b0f16;
  --s1: rgba(255, 255, 255, 0.026); /* faint fill: rows, inert tracks */
  --s2: rgba(255, 255, 255, 0.05);  /* resting control fill */
  --s3: rgba(255, 255, 255, 0.085); /* hover */
  --surface: rgba(16, 22, 31, 0.92);
  --surface-2: rgba(29, 37, 49, 0.72);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* ---- Text: four deliberate steps, not a gradient of greys ---------- */
  --text: #f2f5f9;
  --text-dim: #b3bcc8;
  --text-faint: #7c8794;
  --text-ghost: #5b646f;

  /* ---- Colour meaning ------------------------------------------------
     accent = the one action colour (PLAY, selection, focus). Everything with
     a *meaning* gets its own hue so colour is information, not decoration. */
  --accent: #ff6246;
  --accent-strong: #e9462a;
  --accent-2: #64b5e4;
  --on-accent: #ffffff;
  --good: #4cd483;
  --warn: #ffb02e;
  --info: #56d6f5;   /* time / neutral data — matches the time gauge */
  --pace: #a98cff;   /* standing vs your own record — matches the pace gauge */

  /* ---- Scales --------------------------------------------------------
     Spacing is a 4px rhythm; type is a fixed ladder. Both exist so new UI
     lands on the same grid as old UI instead of drifting a pixel at a time. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 22px;
  --sp-6: 30px;
  --t-micro: 10px;
  --t-small: 11.5px;
  --t-body: 13.5px;
  --t-lead: 15px;
  --t-title: 20px;

  --font: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --display: "Bahnschrift", "DIN Alternate", "Oswald", "Segoe UI Semibold", var(--font);
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Hard, tactical edges */
  --radius: 18px;
  --radius-sm: 10px;
  --shadow: 0 30px 90px rgba(0, 0, 0, 0.52), 0 2px 12px rgba(0, 0, 0, 0.24);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Solid base for native popups (see the select rules below). */
  --control-solid: #151c26;

  /* The <meta name="color-scheme"> tag alone does NOT drive how the browser
     paints native form-control popups — that keys off this CSS property. Without
     it the root computes to `normal`, so Chrome renders <select> dropdown lists
     in LIGHT mode while the options inherit our near-white text: white on white.
     This one declaration is what makes the dropdowns readable. */
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

#game-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: none;
}

/* The canvas hides the pointer because during a round the reticle IS the
   pointer. The Studio is the one screen that sits over the live canvas without
   pointer lock, and its overlay is click-through — so hit-testing falls to the
   canvas and the mouse vanishes across the whole middle of the editor. Give it
   back while the Studio is open. */
body.studio-open #game-canvas { cursor: default; }

/* Controller status line in Settings. Green dot only once a pad has actually
   reported input — browsers hide a connected pad until its first button press,
   so "connected" here means genuinely readable, not merely plugged in. */
.pad-status { display: flex; align-items: flex-start; gap: 8px; }
.pad-status::before {
  content: "";
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--text-ghost);
}
.pad-status.is-live::before { background: var(--good); box-shadow: 0 0 8px color-mix(in srgb, var(--good) 60%, transparent); }

.hidden { display: none !important; }
.visually-hidden {
  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;
}
kbd {
  font-family: var(--mono);
  font-size: 0.78em;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 1px 6px;
  color: var(--text);
}

/* ---- Crosshair + hit feedback ----------------------------- */

.crosshair {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 30;
}
/* Aim-safe firing "kick": a quick scale pulse on the reticle container (its
   children scale around centre). Never animates the camera, so aim is unaffected.
   Kept small and short — a 1.4x jump on every click reads as noise on a 10cps
   burst, and the reticle is the one thing on screen you are actually reading. */
.crosshair.recoil { animation: chRecoil 80ms var(--ease); }
@keyframes chRecoil {
  0% { transform: scale(1.16); filter: brightness(1.55); }
  100% { transform: scale(1); filter: brightness(1); }
}

#hitmarker {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 31;
  --hm-color: #fff;
  --hm-arm: 10px;
  --hm-offset: 8px;
}
#hitmarker span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--hm-arm);
  height: 2.5px;
  border-radius: 2px;
  background: var(--hm-color);
  /* Hard dark stroke so the X stays legible even dead-centre on a white orb. */
  box-shadow: 0 0 0 1.25px rgba(0, 0, 0, 0.88), 0 0 6px rgba(0, 0, 0, 0.55);
}
#hitmarker span:nth-child(1) { transform: translate(-50%, -50%) translate(calc(-1 * var(--hm-offset)), calc(-1 * var(--hm-offset))) rotate(45deg); }
#hitmarker span:nth-child(2) { transform: translate(-50%, -50%) translate(var(--hm-offset), calc(-1 * var(--hm-offset))) rotate(-45deg); }
#hitmarker span:nth-child(3) { transform: translate(-50%, -50%) translate(calc(-1 * var(--hm-offset)), var(--hm-offset)) rotate(-45deg); }
#hitmarker span:nth-child(4) { transform: translate(-50%, -50%) translate(var(--hm-offset), var(--hm-offset)) rotate(45deg); }

/* Armour chip: tighter and dimmer than a kill, so "it held" and "it died" are
   two different pictures instead of the same one. */
#hitmarker.hm-chip { --hm-arm: 6px; --hm-offset: 6px; --hm-color: rgba(255, 255, 255, 0.62); }
/* Decoy: it landed, but on the wrong target. */
#hitmarker.hm-penalty { --hm-color: #ff5470; --hm-arm: 12px; --hm-offset: 9px; }

#hitmarker.show { animation: hitmark 0.18s var(--ease); }
#hitmarker.hm-chip.show { animation: hitmarkChip 0.14s var(--ease); }
@keyframes hitmark {
  0% { opacity: 1; transform: scale(1.45); }
  55% { opacity: 1; transform: scale(0.96); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes hitmarkChip {
  0% { opacity: 0.95; transform: scale(1.2); }
  100% { opacity: 0; transform: scale(1); }
}

/* ---- HUD --------------------------------------------------- */

.hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}
/* The stat cards are ONE positioned group, not two fixed cells. Moving them
   together is the whole point of the layout setting, and `split` reproduces the
   original far-left / far-right bar with an auto margin rather than separate
   containers — so every other placement is a two-property change instead of a
   DOM rebuild. */
.hud-stats {
  position: absolute;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
/* The cards sit inside a bordered, blurred GROUP panel — a frame around the
   readouts, with each card framed in turn. Flattening this away moved every
   card 10px up and 14px left (the panel's padding + border) and lost the outer
   frame entirely, so it is a real part of the HUD, not decoration. Script
   distributes the cards between the two groups per layout. */
.hud-stat-group {
  display: flex;
  gap: 8px;
  padding: 9px 13px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(7, 10, 15, 0.62);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(12px);
}
.hud-stats[data-pos="split"] { top: 16px; left: 20px; right: 20px; }
/* Split keeps the timer hard left and the rest hard right. */
.hud-stats[data-pos="split"] .hud-stat-group[data-group="b"] { margin-left: auto; }
.hud-stats[data-pos="split"] .hud-stat-group[data-group="a"] { min-width: 92px; }
.hud-stats[data-pos="tl"] { top: 16px; left: 20px; }
.hud-stats[data-pos="tc"] { top: 16px; left: 50%; transform: translateX(-50%); }
.hud-stats[data-pos="tr"] { top: 16px; right: 20px; }
.hud-stats[data-pos="bl"] { bottom: 18px; left: 20px; }
.hud-stats[data-pos="bc"] { bottom: 18px; left: 50%; transform: translateX(-50%); }
.hud-stats[data-pos="br"] { bottom: 18px; right: 20px; }

/* Top-centre is the one crowded placement: the scenario pill, the gauges and
   the streak already stack there. Rather than drop the option or silently hide
   what the player switched on, the whole column shifts below the cards. */
.hud { --hud-stack: 0px; }
/* Clears the full height of a stat group panel (74px) plus a gap. */
.hud[data-stats="tc"] { --hud-stack: 82px; }

/* Bottom-left is the frame-rate readout's home. When the cards move in, the
   readout takes the top-left corner — free by definition, since the cards
   cannot be in two places at once. */
.hud[data-stats="bl"] .hud-fps { bottom: auto; top: 16px; }

.hud-scenario {
  position: absolute;
  /* 26px, not 16px: the pill used to sit inside a group panel whose padding and
     border added exactly 10px. The panel around a pill that already has its own
     border was a duplicate frame and is gone, but the position it produced is
     the one the HUD was tuned against, so that is preserved. */
  top: calc(26px + var(--hud-stack));
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-dim);
}
.stat { display: flex; flex-direction: column; align-items: flex-start; }
/* Numbers hug the edge the group is anchored to, so they don't drift as the
   value's width changes. */
.hud-stats[data-pos="split"] [data-group="b"] .stat,
.hud-stats[data-pos="tr"] .stat,
.hud-stats[data-pos="br"] .stat { align-items: flex-end; }
.stat-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--text-faint);
  font-weight: 600;
}
.stat-num {
  font-family: var(--mono);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
/* ---- Gauges above the crosshair ---------------------------------------
   Time remaining, pace against your personal best, and a hit flash, stacked
   just above the reticle. Sitting here means they are read with peripheral
   vision without moving the eyes off the aim point — but they stop ~76px short
   of centre so they never sit under the crosshair or over a target you are
   tracking through the middle of the screen. Colour-coded so which bar is
   which is obvious at a glance. All movement is transform-only, so a per-frame
   update never touches layout. */
.hud-bars {
  position: absolute;
  left: 50%;
  bottom: 50%;
  margin-bottom: 76px; /* clearance above the reticle */
  transform: translateX(-50%);
  /* Player-set width, clamped in CSS as well as in normalizeSettings so a hand-
     edited storage blob can never stretch the stack past the viewport. */
  width: clamp(120px, var(--hud-bar-width, 220px), 420px);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* A gauge the player has switched off leaves no gap behind it. */
.hud-gauge.hidden { display: none; }
.hud-gauge {
  position: relative;
  height: 4px;
  border-radius: 3px;
  background: rgba(6, 9, 14, 0.62);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 2px 8px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.hud-gauge-fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 3px;
  transform-origin: left center;
  transform: scaleX(0);
}

/* TIME — cyan. A cool, neutral colour for the one bar that is pure information
   and never a judgement on how you are doing. Thickest of the three, and the
   only one that reddens, so "running out" is unmistakable. */
.hud-gauge-time { height: 5px; }
.hud-gauge-time .hud-gauge-fill { background: linear-gradient(90deg, #2a8fb5, #56d6f5); }
.hud-gauge-time.is-low .hud-gauge-fill { background: linear-gradient(90deg, #b3372c, #ff6a5a); }

/* PACE — violet while you are behind your best, gold once you pass the tick.
   Deliberately not the app accent: the accent means "action" everywhere else in
   the UI, and this bar means "standing". */
.hud-gauge-pace .hud-gauge-fill { background: linear-gradient(90deg, #6d4ec9, #a98cff); }
.hud-gauge-pace.ahead .hud-gauge-fill { background: linear-gradient(90deg, #d9a326, #ffd75e); }
.hud-gauge-tick {
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.55);
  transform: translateX(-1px);
}
/* No personal best yet — show an inert track rather than implying a target. */
.hud-gauge-pace.no-pb { opacity: 0.35; }
.hud-gauge-pace.no-pb .hud-gauge-tick { display: none; }

/* HIT — unchanged: accent flash on a good hit, red on a decoy. */
.hud-gauge-hit .hud-gauge-fill { background: var(--accent); transform: scaleX(1); opacity: 0; }
.hud-gauge-hit .hud-gauge-fill.flash { animation: hitBar 0.22s var(--ease); }
.hud-gauge-hit .hud-gauge-fill.flash-bad { background: #ff4060; animation: hitBar 0.28s var(--ease); }
@keyframes hitBar {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* Streak sits under the top-centre chip — the gauges now own the space above
   the reticle, and stacking text there too would clutter the aim zone. */
.hud-streak {
  position: absolute;
  top: calc(58px + var(--hud-stack));
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--warn);
}

/* Frame-rate readout — bottom-left, out of the aim zone entirely. */
.hud-fps {
  position: absolute;
  left: 16px;
  bottom: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* Final five seconds. Uses colour + a slow pulse, never a layout change, so the
   HUD never reflows mid-round. */
.stat-num.is-low { color: #ff6a5a; animation: lowTime 1s steps(1, end) infinite; }
@keyframes lowTime { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0.45; } }

/* Tracking HP bar — floats above the target, follows it each frame */
.track-hp {
  position: absolute;
  left: 0;
  top: 0;
  width: 58px;
  height: 7px;
  padding: 1px;
  border-radius: 4px;
  background: rgba(10, 9, 6, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  will-change: transform;
}
.track-hp-fill {
  height: 100%;
  width: 100%;
  border-radius: 3px;
  background: var(--good);
  transition: width 0.04s linear, background 0.1s linear;
}

/* ---- Countdown -------------------------------------------- */

.countdown {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 25;
}
#countdown-num {
  font-family: var(--mono);
  font-size: clamp(90px, 18vw, 200px);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 6px 26px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 91, 58, 0.4);
}
.countdown { gap: 12px; }
.countdown-hint {
  font-family: var(--font);
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
  animation: pulseHint 1.4s ease-in-out infinite;
}
@keyframes pulseHint { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
#countdown-num.pop { animation: countpop 0.6s var(--ease); }
@keyframes countpop {
  0% { opacity: 0; transform: scale(0.5); }
  35% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 0.85; transform: scale(1); }
}

/* "GO": the round starting deserves a visible cue rather than the countdown
   simply disappearing. Expands and fades out over the live arena; the layer is
   pointer-events:none, so it never eats the first shot. */
.countdown.is-go #countdown-num {
  font-family: var(--display);
  font-size: clamp(64px, 12vw, 140px);
  letter-spacing: 0.1em;
  color: var(--accent);
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.7), 0 0 44px rgba(255, 98, 70, 0.55);
  animation: goFlash 0.52s var(--ease) forwards;
}
.countdown.is-go .countdown-hint { display: none; }
@keyframes goFlash {
  0% { opacity: 0; transform: scale(0.86); }
  22% { opacity: 1; transform: scale(1.04); }
  100% { opacity: 0; transform: scale(1.4); }
}

/* ---- Overlays (menu / settings / pause / results) --------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 32px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(28, 26, 20, 0.6) 0%, rgba(12, 11, 8, 0.86) 70%);
  backdrop-filter: blur(7px);
  animation: fade 0.25s var(--ease);
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- Main menu -------------------------------------------- */

/* ============================================================
   Main menu — launcher layout. One warm-dark sidebar (browse +
   filter + rank) beside the open arena view; the selected
   scenario lives in a hero block over the room, with the single
   PLAY action. No floating panels, no duplicate CTAs.
   ============================================================ */
.menu {
  display: grid;
  /* minmax(0, …) on the flexible track, never a bare 1fr: a bare `1fr` floors at
     the item's min-content, and the sidebar's min-content is wider than a phone
     viewport — which blew the whole grid out past the screen and clipped the
     scenario list (the menu is overflow:hidden when stacked). */
  grid-template-columns: 364px minmax(0, 1fr);
  align-items: stretch;
  place-items: stretch;
  padding: 0;
  /* near-transparent over the arena; the sidebar carries the surface */
  background: linear-gradient(90deg, rgba(12, 11, 8, 0.25), rgba(12, 11, 8, 0.05) 45%, rgba(12, 11, 8, 0.3));
  backdrop-filter: none;
}

/* ---- Sidebar: brand + rank + browse ---- */
.lab-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: linear-gradient(180deg, rgba(24, 22, 16, 0.94), rgba(15, 13, 9, 0.96));
  border-right: 1px solid var(--border);
  backdrop-filter: blur(12px);
}
.lab-brand { padding: 28px 26px 16px; }
.lab-brand h1 {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--text);
}
.lab-brand h1 span { color: var(--accent); }
.lab-brand-sub { display: block; margin-top: 6px; font-size: 9.5px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-faint); }

.lab-tools { display: flex; flex-direction: column; gap: 10px; padding: 14px 26px 14px; border-bottom: 1px solid var(--border); }
.kv-search {
  width: 100%;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--text);
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 13px;
  transition: border-color 0.15s var(--ease);
}
.kv-search::placeholder { color: var(--text-faint); }
.kv-search:hover { border-color: var(--border-strong); }
.kv-search:focus-visible { outline: none; border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.kv-tabs { display: flex; flex-wrap: wrap; gap: 3px 4px; }
.menu-tab {
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-faint);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
  transition: color 0.15s var(--ease), background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.menu-tab:hover { color: var(--text-dim); background: rgba(255, 240, 210, 0.05); }
.menu-tab.active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.menu-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.kv-list { list-style: none; flex: 1; min-height: 0; overflow-y: auto; padding: 10px 16px; display: flex; flex-direction: column; gap: 1px; }
.kv-list::-webkit-scrollbar { width: 8px; }
.kv-list::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 8px; }
.kv-empty { padding: 28px; text-align: center; color: var(--text-faint); font-size: 13px; }
/* An empty Community list is the normal first-run state, not an error, so it
   gets room to explain itself and a way onward. */
.kv-empty-rich { display: flex; flex-direction: column; gap: 10px; align-items: center; line-height: 1.55; }
.kv-empty-rich strong { color: var(--text); font-size: 14px; }
.kv-empty-rich span { max-width: 34ch; }
.kv-row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s var(--ease);
}
.kv-row:hover { background: rgba(255, 240, 210, 0.05); }
.kv-row.selected { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.kv-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.kv-row-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: 0.75; justify-self: center; }
.kv-row.selected .kv-row-dot { opacity: 1; box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 70%, transparent); }
.kv-row-name { min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kv-row:hover .kv-row-name, .kv-row.selected .kv-row-name { color: var(--text); }
.kv-row-best { font-family: var(--mono); font-size: 12px; color: var(--text-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kv-row.selected .kv-row-best { color: var(--text-dim); }

.lab-side-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 26px;
  border-top: 1px solid var(--border);
}
.kv-count { font-family: var(--mono); font-size: 11px; color: var(--text-faint); }
.kv-hint { font-size: 11px; color: var(--text-faint); }

/* ---- Main area: corner actions + selected-scenario hero ---- */
.lab-main {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  padding: 48px clamp(36px, 5vw, 76px) clamp(40px, 6vh, 64px);
}
/* Soft scrim behind the hero so type stays readable over the bright lane,
   without boxing the content. */
.lab-main::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  background: linear-gradient(180deg, transparent, rgba(10, 9, 6, 0.55) 70%);
  pointer-events: none;
}
.lab-corner { position: absolute; top: 24px; right: 28px; display: flex; gap: 8px; }
.corner-btn {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  background: rgba(15, 13, 9, 0.55);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.corner-btn:hover { color: var(--text); border-color: var(--border-strong); background: rgba(24, 21, 15, 0.75); }
.corner-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.lab-hero { position: relative; display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
/* Copy on the left, a generated preview of the drill's real targets on the
   right. The art is derived from the scenario's shape/count/motion, so the hero
   shows what you are about to play instead of describing it twice. */
.hero-info { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 28px; }
.hero-copy { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hero-art {
  width: 168px;
  padding: 12px 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: radial-gradient(120% 130% at 50% 0%, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.22));
}
.hero-art svg { display: block; width: 100%; height: auto; }
.hero-cat {
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}
.hero-name {
  font-family: var(--display);
  font-size: clamp(44px, 5.6vw, 74px);
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--text);
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.65);
}
.hero-blurb {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-dim);
  max-width: 52ch;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.hero-meta { display: flex; align-items: center; gap: 14px; margin-top: 2px; font-family: var(--mono); font-size: 12.5px; color: var(--text-faint); }
.hero-meta b { font-size: 15px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.hero-sep { width: 1px; height: 15px; background: var(--border-strong); }

.hero-actions { display: flex; align-items: stretch; gap: 14px; }
.hero-options { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.kv-play {
  padding: 15px 48px;
  border: 0;
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--accent), var(--accent-strong));
  color: var(--on-accent);
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.12em;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  transition: transform 0.15s var(--ease), filter 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.kv-play:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55), 0 0 24px color-mix(in srgb, var(--accent) 35%, transparent); }
.kv-play:active { transform: translateY(0); }
.kv-play:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.kv-play span { font-size: 13px; }
.hero-actions .seg { display: flex; align-items: stretch; }
.hero-actions .seg .seg-btn { padding: 0 20px; font-size: 13px; }
.hero-actions .seg-label { align-self: center; }
.kv-play:disabled { cursor: not-allowed; filter: grayscale(0.8); opacity: 0.55; transform: none; }

/* Compact rank chip in the sidebar (opens Career). */
.side-rank {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 26px 4px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--tier, var(--accent)) 30%, var(--border));
  background: color-mix(in srgb, var(--tier, var(--accent)) 7%, rgba(0, 0, 0, 0.25));
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.side-rank:hover { border-color: color-mix(in srgb, var(--tier, var(--accent)) 55%, transparent); background: color-mix(in srgb, var(--tier, var(--accent)) 12%, rgba(0, 0, 0, 0.25)); }
.side-rank:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.side-rank-eyebrow { font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint); font-weight: 700; }
.side-rank-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.side-rank-tier { font-size: 14px; font-weight: 800; letter-spacing: 0.05em; color: var(--tier, var(--accent)); text-transform: uppercase; }
.side-rank-num { font-family: var(--mono); font-size: 20px; font-weight: 800; color: var(--text); }
.side-rank-bar { height: 4px; border-radius: 4px; background: rgba(0, 0, 0, 0.45); overflow: hidden; }
.side-rank-fill { display: block; height: 100%; border-radius: 4px; background: var(--tier, var(--accent)); }
.side-rank-sub { font-family: var(--mono); font-size: 10px; color: var(--text-faint); }

/* ---- Buttons ---------------------------------------------- */

.btn {
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 12px 22px;
  cursor: pointer;
  transition: transform 0.15s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.btn:hover { background: rgba(62, 57, 46, 0.8); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-primary {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%);
  border-color: transparent;
  color: var(--on-accent);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}
.btn-primary:hover { background: linear-gradient(180deg, #ff7d5c 0%, #ef4a20 100%); }
.btn-primary kbd { background: rgba(0, 0, 0, 0.18); border-color: rgba(0, 0, 0, 0.2); color: var(--on-accent); }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--text-dim); }
.btn-ghost:hover { color: var(--text); background: var(--surface); }
.btn-danger { color: #ff8e79; border-color: rgba(255, 91, 58, 0.35); background: rgba(255, 91, 58, 0.07); }
.btn-danger:hover { color: #fff; border-color: rgba(255, 91, 58, 0.65); background: rgba(255, 91, 58, 0.18); }

/* ---- Panels (settings / pause / results) ------------------ */

.panel {
  width: min(760px, 100%);
  max-height: calc(100vh - 56px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 30px 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  animation: rise 0.3s var(--ease);
}
.panel::-webkit-scrollbar { width: 10px; }
.panel::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
.panel-narrow { width: min(360px, 100%); }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.panel h2 { font-family: var(--display); font-size: 28px; font-weight: 700; letter-spacing: 0.01em; }
.panel h3 {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 4px;
}

#settings .panel { width: min(880px, 100%); padding: 34px 40px; gap: 24px; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 52px; }
.settings-col { display: flex; flex-direction: column; gap: 17px; }
.settings-col h3 { padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }

/* Every control is one line: label (carrying its own live value, pushed right)
   in the first column, the control in the second. The old layout stacked the
   label above a full-width control, which doubled the height of the panel for
   no added clarity. */
.setting {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--control-w, 128px);
  align-items: center;
  gap: 3px 12px;
  min-height: 27px;
}
.setting-label { font-size: 13.5px; color: var(--text-dim); display: flex; flex: 1; justify-content: space-between; gap: 10px; }
.setting-val { font-family: var(--mono); font-size: 13px; color: var(--accent); font-variant-numeric: tabular-nums; }
.setting-note { grid-column: 1 / -1; font-size: 11.5px; line-height: 1.45; color: var(--text-faint); }
/* Controls that shouldn't stretch to the full control column. */
.setting input[type="checkbox"],
.setting input[type="color"] { justify-self: end; }
.settings-close { align-self: flex-end; padding: 10px 22px; }
.data-tools {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 8px 24px;
  align-items: center;
  padding-top: 15px;
  border-top: 1px solid var(--border);
}
.data-tools h3 { margin-bottom: 4px; }
.data-tools p { max-width: 58ch; font-size: 12px; line-height: 1.45; color: var(--text-faint); }
.data-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.data-actions .btn { padding: 9px 13px; font-size: 12px; }
.data-status { grid-column: 1 / -1; min-height: 18px; color: var(--good) !important; }
.data-status.error { color: #ff8e79 !important; }

/* ---- First-run + compatibility ----------------------------------------- */
#onboarding { z-index: 70; }
#compatibility { z-index: 80; }
#fatal { z-index: 90; }
.panel-onboarding { width: min(680px, 100%); }
.onboarding-lead { max-width: 58ch; color: var(--text-dim); font-size: 15px; line-height: 1.65; }
.onboarding-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.onboarding-steps > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 10px;
  align-items: center;
  padding: 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.onboarding-steps kbd { grid-row: 1 / 3; align-self: start; color: var(--accent); }
.onboarding-steps strong { font-size: 13.5px; }
.onboarding-steps span { font-size: 12px; line-height: 1.45; color: var(--text-faint); }
.onboarding-actions { margin-top: 4px; }
.compatibility-panel p { color: var(--text-dim); line-height: 1.6; }

.compatibility-panel .compat-diagnostic {
  display: inline-flex;
  width: fit-content;
  margin-top: 12px;
  padding: 6px 9px;
  border: 1px solid rgba(113, 205, 255, 0.22);
  border-radius: 7px;
  background: rgba(113, 205, 255, 0.07);
  color: #9edcff;
  font: 700 0.68rem/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.compatibility-panel .compat-diagnostic.hidden { display: none; }
.compat-details { margin-top: 10px; color: var(--text-faint); font-size: 11px; }
.compat-details.hidden { display: none; }
.compat-details summary { width: fit-content; cursor: pointer; color: var(--text-dim); }
.compat-details code { display: block; margin-top: 8px; overflow-wrap: anywhere; line-height: 1.5; color: #aeb8c5; }
.rank-provisional { margin-top: 8px; font-size: 11px; color: var(--warn); letter-spacing: 0.04em; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 5px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
input[type="range"]::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
}
input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); cursor: pointer; }
input[type="color"] {
  width: 46px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: none;
  cursor: pointer;
}
select {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 9px 11px;
  cursor: pointer;
}

.ch-preview-wrap {
  position: relative;
  height: 76px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  /* Calm range-floor backdrop (the busy checkerboard fought the crosshair). */
  background: radial-gradient(110% 130% at 50% 45%, #221f17 0%, #14110c 78%);
  overflow: hidden;
}
.ch-preview { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }

/* Crosshair preset quick-picks */
.ch-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ch-preset {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 4px;
  cursor: pointer;
  transition: color 0.15s var(--ease), background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.ch-preset:hover { color: var(--text); background: rgba(62, 57, 46, 0.7); border-color: var(--border-strong); }
.ch-preset:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn-col { display: flex; flex-direction: column; gap: 12px; }

/* ---- Results ---------------------------------------------- */

.res-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.res-eyebrow {
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--text-faint);
  font-weight: 700;
}
.res-head h2 { font-size: 30px; }
.badge {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
}
.badge.is-best {
  background: linear-gradient(180deg, var(--good), #14c474);
  color: #042417;
  border-color: transparent;
  box-shadow: 0 0 22px rgba(43, 255, 160, 0.4);
}
.res-score-wrap { text-align: center; padding: 8px 0 4px; }
.res-score {
  font-family: var(--mono);
  font-size: clamp(58px, 12vw, 92px);
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(180deg, #fff, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.res-score-label { font-size: 12px; letter-spacing: 0.3em; color: var(--text-faint); margin-top: 6px; }
.res-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.res-tile {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 14px;
  text-align: center;
}
.res-tile-val { font-family: var(--mono); font-size: 24px; font-weight: 600; }
.res-tile-label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin-top: 6px; }
.btn-row { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }

/* ---- Segmented controls ------------------------------------ */

.seg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.seg-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 700;
  padding: 0 12px 0 10px;
}
.seg-btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 8px 18px;
  cursor: pointer;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.seg-btn:hover { color: var(--text); }
.seg-btn.active {
  color: var(--on-accent);
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Numeric inputs (cm/360, DPI) ------------------------- */

.num-input {
  width: 96px;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 8px 10px;
  text-align: right;
}
.num-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---- Floating hit score ----------------------------------- */

#float-layer { position: fixed; inset: 0; pointer-events: none; z-index: 29; }
.float-score {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
  opacity: 0;
  will-change: transform, opacity;
}
.float-score.crit { color: var(--good); font-size: 22px; }
.float-score.penalty { color: #ff4060; font-size: 20px; }
.float-score.show { animation: floatScore 0.62s var(--ease) forwards; }
@keyframes floatScore {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  18% { opacity: 1; transform: translate(-50%, -90%) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%, -180%) scale(1); }
}

/* ---- Results: delta and trend ----------------------------- */
.res-delta {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-faint);
}
.res-delta.up { color: var(--good); }
.res-delta.down { color: var(--text-dim); }
.res-trend { display: flex; flex-direction: column; gap: 8px; }
.res-trend-head { display: flex; align-items: baseline; justify-content: space-between; }
.res-trend-title {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 700;
}
.res-trend-meta { font-family: var(--mono); font-size: 12px; color: var(--text-dim); }
.res-sparkline { color: var(--accent); }
.spark-svg { display: block; width: 100%; height: 56px; }
.spark-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.spark-fill { fill: currentColor; opacity: 0.12; stroke: none; }

/* ---- Results: session-detail charts ----------------------- */

.res-detail { display: flex; flex-wrap: wrap; gap: 12px; }
.chart {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#chart-accuracy { flex: 1 1 100%; }
#chart-reaction { flex: 1 1 240px; }
#chart-heatmap { flex: 1 1 180px; align-items: center; }
.chart-title {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-faint);
}
.chart-meta { font-family: var(--mono); letter-spacing: 0; text-transform: none; color: var(--text-dim); }
.chart-body { width: 100%; color: var(--accent); }
.chart-svg { display: block; width: 100%; }

.acc-line { fill: none; stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.acc-fill { fill: currentColor; opacity: 0.1; stroke: none; }
.acc-grid { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }

.bar { fill: currentColor; opacity: 0.85; }
.bar-axis { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }

.heat-svg { max-width: 170px; margin: 0 auto; }
.heat-ring { fill: none; stroke: var(--border-strong); stroke-width: 1.5; }
.heat-ring-inner { fill: none; stroke: var(--border); stroke-width: 1; }
.heat-cross { stroke: var(--border-strong); stroke-width: 1; }
.heat-dot { fill: currentColor; opacity: 0.5; }

/* ---- Results: aim-tendency analysis ----------------------- */

.res-aim {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.aim-summary { font-size: 14px; line-height: 1.55; color: var(--text); }
.aim-summary b { color: var(--accent); font-weight: 700; }
.aim-gauge-row { display: flex; align-items: center; gap: 10px; }
.aim-gauge-end { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); white-space: nowrap; }
.aim-gauge {
  position: relative;
  flex: 1;
  height: 20px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(95, 176, 217, 0.32), rgba(228, 214, 184, 0.12) 50%, rgba(255, 91, 58, 0.36));
}
.aim-gauge-zero { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: var(--border-strong); transform: translateX(-50%); }

/* One tick per landed shot — a rug plot. Overlap is the point: where the ticks
   pile up is where the aim actually lives, which a single averaged marker can
   never show. Semi-transparent, so density reads directly as brightness. */
.aim-gauge-shot {
  position: absolute;
  top: 3px;
  bottom: 3px;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.38);
}
/* The modal bucket. Mint, not the accent: the accent is orange and the gauge's
   own gradient is already orange at the overshoot end, so an accent highlight
   would be invisible in exactly the half of the bar it most needs to mark. */
.aim-gauge-shot.is-mode {
  background: var(--good);
  box-shadow: 0 0 7px color-mix(in srgb, var(--good) 65%, transparent);
}
.aim-gauge-mode {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 4px;
  background: color-mix(in srgb, var(--good) 15%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--good) 32%, transparent);
}
.aim-gauge-sub {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 18px;
  font-size: 11px;
  color: var(--text-faint);
}
.aim-gauge-key { display: inline-flex; align-items: center; gap: 6px; }
.aim-gauge-swatch { width: 3px; height: 11px; border-radius: 2px; background: rgba(255, 255, 255, 0.38); }
.aim-gauge-swatch.is-mode { background: var(--good); }
.aim-gauge-marker {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--bg);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, -50%);
}
.aim-gauge-label { font-family: var(--mono); font-size: 12px; color: var(--text-dim); text-align: center; }
.aim-tiles { display: flex; flex-wrap: wrap; gap: 10px; }
.aim-tile {
  flex: 1 1 90px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  text-align: center;
}
.aim-tile-val { font-family: var(--mono); font-size: 17px; font-weight: 600; text-transform: capitalize; }
.aim-tile-suffix { font-size: 11px; color: var(--text-faint); text-transform: none; }
.aim-tile-label { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin-top: 4px; }
.aim-career {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
  padding-top: 10px;
  font-variant-numeric: tabular-nums;
}
.aim-career span:first-child { color: var(--text-faint); }

/* ---- Progression dashboard -------------------------------- */

.panel-wide { width: min(980px, 100%); }

.dash-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dash-head-titles { display: flex; flex-direction: column; gap: 4px; }
.dash-head h2 { font-size: 28px; }
.dash-head-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.seg-sm { background: var(--surface-2); }
.seg-sm .seg-btn { padding: 6px 14px; font-size: 13px; }

#dash-body { display: flex; flex-direction: column; gap: 22px; }

.dash-empty { text-align: center; padding: 44px 12px; }
.dash-empty-title { font-size: 20px; font-weight: 700; }
.dash-empty-sub { margin-top: 8px; color: var(--text-dim); font-size: 14px; line-height: 1.5; }

/* Stat strip: plain columns split by hairlines — numbers, not boxes. */
.dash-overview { display: flex; flex-wrap: wrap; }
.dash-stat { padding: 4px 36px 4px 0; }
.dash-stat + .dash-stat { padding-left: 36px; border-left: 1px solid var(--border); }
.dash-stat-val { font-family: var(--mono); font-size: 27px; font-weight: 700; line-height: 1; }
.dash-stat-label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); margin-top: 8px; }

.dash-section-title {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-faint);
  margin-bottom: -10px; /* pull the following block closer to its heading */
}
.dash-aim { margin-top: 0; }
.aim-empty { color: var(--text-dim); line-height: 1.55; }

/* Per-mode progression rows: hairline list, colour rule per mode — no boxes. */
.dash-modes { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.dash-mode {
  display: grid;
  grid-template-columns: 4px minmax(116px, 1.3fr) minmax(70px, 1.7fr) auto 64px 66px;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  padding: 12px 8px 12px 0;
  color: var(--text);
  cursor: pointer;
  overflow: hidden;
  transition: background 0.18s var(--ease);
}
.dash-mode:hover { background: rgba(255, 240, 210, 0.045); }
.dash-mode:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dash-mode-bar { align-self: stretch; background: var(--accent); border-radius: 0 3px 3px 0; opacity: 0.9; }
.dash-mode-name { display: flex; flex-direction: column; gap: 2px; font-weight: 700; font-size: 14.5px; }
.dash-mode-cat { font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); font-weight: 700; }
.dash-mode-spark { color: var(--accent); min-width: 0; opacity: 0.9; }
.dash-mode-spark .spark-svg { height: 30px; }
.dash-mode-best { font-family: var(--mono); font-size: 17px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.dash-mode-trend { font-family: var(--mono); font-size: 12.5px; text-align: right; white-space: nowrap; }
.dash-mode-runs { font-size: 11px; color: var(--text-faint); text-align: right; white-space: nowrap; }
.trend-up { color: var(--good); }
.trend-down { color: var(--warn); }
.trend-flat { color: var(--text-faint); }
.dash-none { color: var(--text-faint); font-size: 13.5px; padding: 14px 0; }

/* Unplayed modes: one quiet chip row instead of a sea of empty rows. */
.dash-unplayed { display: flex; flex-direction: column; gap: 9px; margin-top: -6px; }
.dash-unplayed-label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); font-weight: 700; }
.dash-unplayed-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dash-unplayed-chip {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-faint);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 13px;
  cursor: pointer;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.dash-unplayed-chip:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.dash-unplayed-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Personal-best timeline */
.dash-timeline { list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.dash-pb {
  display: grid;
  grid-template-columns: auto minmax(100px, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
}
.dash-pb-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent);
}
.dash-pb-name { font-weight: 600; font-size: 14px; }
.dash-pb-score { font-family: var(--mono); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.dash-pb-date { font-family: var(--mono); font-size: 12px; color: var(--text-dim); white-space: nowrap; }

/* Aim-by-task breakdown */
.dash-aimtask { list-style: none; display: flex; flex-direction: column; }
.dash-at {
  display: grid;
  grid-template-columns: 10px minmax(104px, 1.3fr) minmax(96px, 1fr) minmax(78px, 0.9fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
}
.dash-at-head { border-bottom: 1px solid var(--border); padding: 0 8px 8px; }
.dash-at-head span {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 700;
}
.dash-at-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent);
}
.dash-at-head .dash-at-dot { background: none; box-shadow: none; }
.dash-at-name { font-weight: 600; font-size: 14px; }
.dash-at-ou { font-family: var(--mono); font-size: 13px; text-transform: capitalize; }
.dash-at-bias { font-family: var(--mono); font-size: 13px; color: var(--text-dim); text-transform: capitalize; }
.dash-at-cons { font-family: var(--mono); font-size: 14px; font-weight: 700; text-align: right; white-space: nowrap; }
.dash-at-suf { font-size: 10px; color: var(--text-faint); font-weight: 400; }
.ou-over { color: var(--warn); }
.ou-under { color: var(--accent); }
.ou-on { color: var(--good); }
.ou-none { color: var(--text-faint); text-transform: none; }

/* Rank header: tier rating + progress on a tier-coloured left rule (no box). */
.dash-rank {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 6px 0 6px 22px;
  border-left: 3px solid var(--tier, var(--accent));
  background: linear-gradient(90deg, color-mix(in srgb, var(--tier, var(--accent)) 9%, transparent), transparent 55%);
}
.rank-main { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.rank-badge { display: flex; flex-direction: column; gap: 3px; min-width: 132px; }
.rank-tier {
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--tier, var(--accent));
  text-shadow: 0 0 18px color-mix(in srgb, var(--tier, var(--accent)) 55%, transparent);
}
.rank-rating {
  font-family: var(--mono);
  font-size: 60px;
  font-weight: 800;
  line-height: 0.92;
  background: linear-gradient(180deg, #fff, var(--tier, var(--accent)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rank-sub { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.rank-progress { flex: 1; min-width: 210px; display: flex; flex-direction: column; gap: 8px; }
.rank-bar { height: 10px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.rank-bar-fill {
  height: 100%;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, color-mix(in srgb, var(--tier, var(--accent)) 55%, transparent), var(--tier, var(--accent)));
  box-shadow: 0 0 16px color-mix(in srgb, var(--tier, var(--accent)) 60%, transparent);
  transition: width 0.6s var(--ease);
}
.rank-next { font-family: var(--mono); font-size: 12px; color: var(--text-dim); }
.rank-next b { color: var(--text); }
.dash-rank-empty { border-left-color: var(--border-strong); background: none; }
.dash-rank-empty .rank-badge { min-width: 0; }
.dash-rank-empty .rank-tier { color: var(--text-faint); text-shadow: none; }
.dash-rank-empty .rank-rating { -webkit-text-fill-color: var(--text-faint); color: var(--text-faint); }
.rank-empty-msg { font-size: 13px; color: var(--text-dim); line-height: 1.5; max-width: 520px; }

/* Training calendar */
.dash-cal { display: flex; flex-direction: column; gap: 12px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cal-streak {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--warn);
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--warn) 12%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
}
.cal-streak-off { color: var(--text-faint); background: var(--surface-2); border-color: var(--border); }
.cal-active { font-size: 12px; color: var(--text-faint); }
.cal-scroll { overflow-x: auto; padding-bottom: 4px; }
.cal-grid { display: grid; grid-template-rows: repeat(7, 1fr); grid-auto-flow: column; gap: 3px; width: max-content; }
.cal-cell { width: 13px; height: 13px; border-radius: 3px; background: rgba(255, 240, 210, 0.05); border: 1px solid var(--border); }
.cal-cell[data-l="0"] { background: color-mix(in srgb, var(--accent) 6%, var(--surface-2)); }
.cal-cell[data-l="1"] { background: color-mix(in srgb, var(--accent) 28%, var(--surface-2)); border-color: transparent; }
.cal-cell[data-l="2"] { background: color-mix(in srgb, var(--accent) 50%, var(--surface-2)); border-color: transparent; }
.cal-cell[data-l="3"] { background: color-mix(in srgb, var(--accent) 74%, var(--surface-2)); border-color: transparent; }
.cal-cell[data-l="4"] { background: var(--accent); border-color: transparent; box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 55%, transparent); }
.cal-future { opacity: 0; }
.cal-legend { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-faint); }
.cal-legend .cal-cell { width: 11px; height: 11px; }

/* ---- Responsive ------------------------------------------- */

@media (max-width: 1100px) {
  .menu { grid-template-columns: 320px minmax(0, 1fr); }
  .lab-main { padding: 40px 32px 36px; }
}
@media (max-width: 820px) {
  .menu { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; }
  .lab-main { order: 1; justify-content: flex-end; padding: 24px 24px 20px; }
  .lab-side { order: 2; border-right: 0; border-top: 1px solid var(--border); max-height: 46vh; }
  .lab-brand { padding: 16px 22px 8px; }
  .hero-name { font-size: clamp(34px, 9vw, 52px); }
  .settings-grid { grid-template-columns: 1fr; }
  .hero-actions { flex-wrap: wrap; }
  .hero-options { width: 100%; }
  .data-tools { grid-template-columns: 1fr; }
  .data-actions { justify-content: flex-start; }
}

/* Reduce motion: drop the firing kick + countdown pop, and confirm hits with a
   fade only (no scale). Keeps feedback legible without vestibular motion. */
@media (prefers-reduced-motion: reduce) {
  /* Keep a non-motion muzzle-brightness fire tell (no scale/transform). */
  .crosshair.recoil { animation: chRecoilRM 90ms var(--ease); }
  @keyframes chRecoilRM { 0% { filter: brightness(1.7); } 100% { filter: brightness(1); } }
  #countdown-num.pop { animation: none; }
  #hitmarker.show,
  #hitmarker.hm-chip.show { animation: hitmarkFade 0.18s var(--ease); }
  @keyframes hitmarkFade { from { opacity: 1; } to { opacity: 0; } }
  .float-score.show { animation: floatFade 0.4s var(--ease) forwards; }
  @keyframes floatFade { from { opacity: 1; } to { opacity: 0; } }
  /* GO still needs to appear and clear itself — fade only, no scale. */
  .countdown.is-go #countdown-num { animation: goFade 0.52s var(--ease) forwards; }
  @keyframes goFade { 0% { opacity: 0; } 20%, 60% { opacity: 1; } 100% { opacity: 0; } }
  /* Blinking is a vestibular/photosensitivity trigger — keep the colour cue only. */
  .stat-num.is-low { animation: none; }
  /* The hit bar is a plain opacity pulse with no motion, so it stays — but
     slow it slightly so rapid fire reads as a glow rather than a strobe. */
  .hud-gauge-hit .hud-gauge-fill.flash,
  .hud-gauge-hit .hud-gauge-fill.flash-bad { animation-duration: 0.34s; }
}

@media (max-width: 640px) {
  .settings-grid { grid-template-columns: 1fr; }
  .stat-num { font-size: 22px; }
  .hud-scenario { display: none; }
  .btn-row { justify-content: stretch; }
  .btn-row .btn { flex: 1; }
  .onboarding-steps { grid-template-columns: 1fr; }
  .hero-actions .seg { max-width: 100%; overflow-x: auto; }
  .hero-actions .seg .seg-btn { padding: 10px 13px; }
  .seg-label { display: none; }

  .dash-head-actions { width: 100%; justify-content: space-between; }
  .dash-mode { grid-template-columns: 5px 1fr auto; gap: 12px; padding-right: 14px; }
  .dash-mode-spark, .dash-mode-trend, .dash-mode-runs { display: none; }
  .dash-pb { grid-template-columns: auto 1fr auto; }
  .dash-pb-date { display: none; }
  .dash-at { grid-template-columns: 10px 1fr auto; }
  .dash-at-bias, .dash-at-cons { display: none; }
}

/* ============================================================
   Product UI refresh
   A calmer, higher-contrast shell around the arena. The orange
   remains a signature action colour instead of tinting every surface.
   ============================================================ */

html,
body {
  background:
    radial-gradient(circle at 72% 12%, rgba(58, 82, 112, 0.18), transparent 38%),
    var(--bg);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.16;
  background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}

::selection {
  color: #fff;
  background: color-mix(in srgb, var(--accent) 72%, transparent);
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb {
  background: rgba(169, 179, 192, 0.22);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(169, 179, 192, 0.36); }

kbd {
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}

/* Menu shell */
.menu {
  grid-template-columns: clamp(340px, 27vw, 410px) minmax(0, 1fr);
  background:
    linear-gradient(90deg, rgba(4, 7, 11, 0.25), rgba(4, 7, 11, 0.03) 48%, rgba(4, 7, 11, 0.22)),
    linear-gradient(180deg, rgba(5, 8, 12, 0.08), rgba(5, 8, 12, 0.3));
}

.lab-side {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, rgba(10, 14, 20, 0.97), rgba(8, 12, 17, 0.95));
  border-right-color: rgba(255, 255, 255, 0.1);
  box-shadow: 24px 0 70px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(24px) saturate(1.1);
}

.lab-side::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 190px;
  background: radial-gradient(circle at 24% 0%, rgba(255, 98, 70, 0.12), transparent 70%);
  pointer-events: none;
}

/* Menu density pass: every block below is trimmed so more of the scenario list
   is visible at once without the sidebar feeling cramped. */
.lab-brand {
  position: relative;
  padding: 21px 26px 13px 60px;
}

.lab-brand::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 22px;
  width: 21px;
  height: 21px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(255, 98, 70, 0.08);
}

.lab-brand::after {
  content: "";
  position: absolute;
  left: 35px;
  top: 31px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(255, 98, 70, 0.8);
}

.lab-brand h1 {
  font-size: 25px;
  letter-spacing: 0.055em;
}

.lab-brand-sub {
  margin-top: 5px;
  font-size: 8.5px;
  letter-spacing: 0.24em;
  color: #7f8a98;
}

.side-rank {
  gap: 6px;
  margin: 0 26px 8px;
  padding: 11px 13px;
  border-radius: 11px;
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--tier, var(--accent)) 10%, transparent), transparent 55%),
    rgba(255, 255, 255, 0.025);
}

.side-rank:hover {
  transform: translateY(-1px);
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--tier, var(--accent)) 15%, transparent), transparent 60%),
    rgba(255, 255, 255, 0.04);
}

.side-rank-eyebrow { color: #7f8a98; }
.side-rank-tier { font-size: 13px; }
.side-rank-num { font-size: 22px; }
.side-rank-bar { height: 5px; background: rgba(255, 255, 255, 0.07); }

.lab-tools {
  gap: 9px;
  padding: 10px 26px 12px;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.kv-search,
select,
.num-input {
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.025) inset;
}

/* A translucent background is fine for the closed control, but the popup list
   composites it against the OS surface rather than our dark panel — which is
   how the options ended up unreadable. Give the select a solid base and colour
   the options explicitly; between this and color-scheme: dark on :root, the
   list renders dark in Chrome, Edge and Firefox. */
select {
  background-color: var(--control-solid);
}
select option {
  background-color: var(--control-solid);
  color: var(--text);
}

.kv-search {
  min-height: 38px;
  padding: 8px 13px 8px 39px;
  background-image:
    radial-gradient(circle at 20px 19px, transparent 5px, #788391 5.5px, #788391 6.5px, transparent 7px),
    linear-gradient(45deg, transparent 48%, #788391 49%, #788391 56%, transparent 57%);
  background-position: 0 0, 24px 25px;
  background-size: 100% 100%, 7px 7px;
  background-repeat: no-repeat;
}

.kv-search:focus-visible,
select:focus-visible,
.num-input:focus-visible {
  outline: none;
  border-color: rgba(255, 98, 70, 0.72);
  box-shadow: 0 0 0 3px rgba(255, 98, 70, 0.12);
}

.kv-tabs {
  flex-wrap: nowrap;
  gap: 4px;
  overflow-x: auto;
  padding: 1px 0 3px;
}

.menu-tab {
  flex: 0 0 auto;
  font-size: 11px;
  padding: 6px 10px;
}

.menu-tab:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}

.menu-tab.active {
  color: #fff;
  border-color: rgba(255, 98, 70, 0.28);
  background: rgba(255, 98, 70, 0.13);
}

.kv-list {
  gap: 2px;
  padding: 8px 14px 12px;
  scroll-behavior: smooth;
}

/* Category run headings. Sticky so the label of the group you are scrolled
   into stays visible — the point of grouping is knowing where you are. */
.kv-group {
  position: sticky;
  top: -8px;
  z-index: 1;
  margin: 10px 0 3px;
  padding: 5px 11px 4px;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-ghost);
  background: linear-gradient(180deg, rgba(8, 12, 17, 0.97) 70%, rgba(8, 12, 17, 0));
  backdrop-filter: blur(6px);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-2);
}
.kv-group-n { font-family: var(--mono); letter-spacing: 0; color: var(--text-ghost); opacity: 0.7; }
.kv-group:first-child { margin-top: 0; }

.kv-row {
  position: relative;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  min-height: 37px;
  padding: 7px 11px;
  border: 1px solid transparent;
  border-radius: 9px;
}

/* Rows carry their mode's own colour rather than the app accent: the list is
   then scannable by hue, and selection reads as "this one" instead of
   "something is orange". scroll-margin keeps a keyboard-focused row from
   landing underneath the sticky category heading. */
.kv-row {
  scroll-margin: 34px 0 10px;
  transition: background 0.14s var(--ease), border-color 0.14s var(--ease);
}

.kv-row:hover {
  background: var(--s2);
  border-color: rgba(255, 255, 255, 0.05);
}

.kv-row.selected {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 17%, transparent),
    color-mix(in srgb, var(--accent) 5%, transparent) 70%);
  border-color: color-mix(in srgb, var(--accent) 24%, transparent);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
.kv-row.selected .kv-row-dot { box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 75%, transparent); }

.kv-row.selected::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: var(--accent);
}

.kv-row-dot {
  width: 6px;
  height: 6px;
  opacity: 0.5;
}

.kv-row-name {
  font-size: 13.5px;
  color: #9da8b6;
}

.kv-row.selected .kv-row-name { color: #fff; }
.kv-row-best { font-size: 11.5px; }

.lab-side-foot {
  min-height: 48px;
  padding: 12px 28px;
  background: rgba(0, 0, 0, 0.14);
  border-top-color: rgba(255, 255, 255, 0.07);
}

.kv-hint { font-size: 10.5px; }

.lab-main {
  padding: 44px clamp(30px, 4.4vw, 72px) clamp(32px, 5.4vh, 60px);
}

.lab-main::before {
  height: 78%;
  background:
    linear-gradient(180deg, transparent 5%, rgba(5, 8, 12, 0.08) 35%, rgba(5, 8, 12, 0.78) 100%);
}

.lab-corner { top: 28px; right: 32px; }

.corner-btn {
  min-height: 40px;
  padding: 9px 16px;
  color: #c1c9d3;
  background: rgba(9, 13, 19, 0.68);
  border-color: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(16px);
}

.corner-btn::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  vertical-align: -1px;
  border: 1.5px solid #8e99a7;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(142, 153, 167, 0.12);
}

.corner-btn:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(18, 25, 34, 0.88);
}

.lab-hero {
  gap: 17px;
  max-width: 720px;
  padding: 21px 24px 23px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(18, 25, 34, 0.8), rgba(8, 12, 17, 0.58));
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  backdrop-filter: blur(18px) saturate(1.12);
}

.hero-info { gap: 11px 28px; }
.hero-copy { gap: 11px; }

.hero-cat {
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-shadow: none;
}

.hero-name {
  font-size: clamp(34px, 3.9vw, 54px);
  line-height: 0.98;
  letter-spacing: -0.012em;
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.35);
}

.hero-blurb {
  font-size: 14px;
  line-height: 1.55;
  color: #b2bbc7;
  text-shadow: none;
}

.hero-meta {
  gap: 14px;
  margin-top: 3px;
  font-size: 11.5px;
}

.hero-meta b { font-size: 15px; }

.hero-actions { gap: 11px; }

.kv-play {
  min-width: 150px;
  min-height: 48px;
  padding: 12px 28px;
  border-radius: 10px;
  font-size: 16px;
  box-shadow: 0 12px 30px rgba(233, 70, 42, 0.24), 0 1px 0 rgba(255, 255, 255, 0.25) inset;
}

.kv-play:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(233, 70, 42, 0.32), 0 1px 0 rgba(255, 255, 255, 0.28) inset;
}

.seg {
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.035);
}

.seg-label { color: #788391; }

.seg-btn {
  border-radius: 8px;
  color: #9da8b5;
}

.seg-btn.active {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}

/* Shared overlays and controls */
.overlay:not(.menu) {
  padding: 28px;
  background:
    radial-gradient(circle at 50% -10%, rgba(65, 86, 113, 0.2), transparent 45%),
    rgba(4, 7, 11, 0.82);
  backdrop-filter: blur(18px) saturate(0.88);
}

.panel {
  max-height: calc(100vh - 48px);
  padding: 32px 34px;
  gap: 24px;
  background:
    linear-gradient(145deg, rgba(20, 27, 37, 0.98), rgba(12, 17, 24, 0.98));
  border-color: rgba(255, 255, 255, 0.11);
  border-radius: 20px;
  box-shadow: var(--shadow), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
}

.panel-narrow { width: min(390px, 100%); }
.panel h2 { font-size: 29px; letter-spacing: -0.015em; }

.panel h3,
.chart-title,
.res-trend-title,
.dash-section-title {
  letter-spacing: 0.13em;
  color: #7f8997;
}

.btn {
  min-height: 44px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.11);
}

.btn:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.17);
}

.btn-primary {
  background: linear-gradient(180deg, var(--accent), var(--accent-strong));
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(233, 70, 42, 0.22);
}

.btn-ghost { background: transparent; }
.btn-danger { background: rgba(255, 98, 70, 0.08); }

.btn-col { gap: 10px; }

#settings .panel {
  width: min(900px, 100%);
  padding: 34px 38px;
}

/* Multi-column rather than a fixed 2-col grid: the groups have very different
   heights, and letting the browser balance the flow keeps both columns roughly
   even instead of leaving one twice as long as the other. */
.settings-grid {
  display: block;
  columns: 2;
  column-gap: 26px;
}

/* Grouping by heading + hairline rather than by card. Boxing each group cost
   ~26px of border and padding apiece and made the panel TALLER than the flat
   list it replaced — measured, not guessed. A rule under the heading gives the
   same scannable structure for the price of one pixel. */
.set-group {
  break-inside: avoid;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.set-group h3 {
  margin-bottom: 3px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: #8b95a3;
}
.set-group:last-child { margin-bottom: 0; }

.setting-label { color: #aeb7c3; }
.setting-val { color: var(--accent); }
.setting select { width: 100%; padding: 7px 10px; font-size: 13px; }
.setting .num-input { width: 100%; padding: 6px 9px; font-size: 13px; }
.setting input[type="range"] { height: 4px; }
.setting input[type="color"] { width: 40px; height: 26px; }
.setting input[type="checkbox"] { width: 18px; height: 18px; }
/* The arena picker's helper line reads better with a little air above it. */
#set-arena-note { margin-top: 3px; }
.setting.is-disabled { opacity: 0.42; }
.setting.is-disabled input { cursor: not-allowed; }

input[type="range"] {
  accent-color: var(--accent);
}

input[type="checkbox"] {
  accent-color: var(--accent);
}

.ch-preview-wrap,
.data-tools,
.onboarding-steps > div {
  border-color: rgba(255, 255, 255, 0.09);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.035);
}

.ch-preset {
  border-radius: 8px;
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}

.ch-preset.active {
  color: #fff;
  border-color: rgba(255, 98, 70, 0.42);
  background: rgba(255, 98, 70, 0.13);
}

/* HUD: discrete readable instruments, not a full-width curtain */
.stat-label {
  font-size: 9px;
  letter-spacing: 0.14em;
  color: #7f8996;
}

.stat-num { font-size: 24px; }

.hud-streak {
  padding: 6px 11px;
  border: 1px solid rgba(255, 176, 46, 0.22);
  border-radius: 999px;
  background: rgba(7, 10, 15, 0.65);
  backdrop-filter: blur(8px);
}

/* Results and analytics */
.res-head {
  padding-bottom: 17px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.res-eyebrow { color: var(--accent); }

.res-score-wrap {
  position: relative;
  padding: 10px 0 12px;
}

.res-score {
  font-size: clamp(62px, 11vw, 96px);
  letter-spacing: -0.06em;
  background: linear-gradient(180deg, #fff 15%, #b8c1cd);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.res-score-label { letter-spacing: 0.22em; }

.res-stats { gap: 10px; }

.res-tile,
.chart,
.res-aim,
.aim-tile {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.085);
  border-radius: 12px;
}

.res-tile { padding: 15px; }
.res-tile-val { font-size: 25px; }
.chart { padding: 15px 16px; }
.res-aim { padding: 16px 18px; }

.badge {
  border-radius: 999px;
  background: rgba(76, 212, 131, 0.11);
  border-color: rgba(76, 212, 131, 0.3);
}

/* Career */
.panel-wide { width: min(1040px, 100%); }

.dash-head {
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#dash-body { gap: 24px; }

.dash-rank {
  padding: 18px 20px 18px 24px;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-left: 3px solid var(--tier, var(--accent));
  border-radius: 14px;
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--tier, var(--accent)) 11%, transparent), transparent 60%),
    rgba(255, 255, 255, 0.025);
}

.rank-rating { font-size: 64px; }
.rank-bar { height: 8px; border-radius: 999px; }

/* Profile headline stats. One card each, numbers doing the talking: the value
   is large and light, the label small and quiet, so the row reads as four
   figures rather than four boxes. */
.dash-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-2);
}

.dash-stat {
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: 13px;
  background: linear-gradient(160deg, var(--s2), var(--s1));
}

.dash-stat + .dash-stat {
  padding-left: var(--sp-4);
  border-left: 1px solid var(--border);
}

.dash-stat-val { font-size: 26px; letter-spacing: -0.02em; }
.dash-stat-label { color: var(--text-ghost); }

.dash-modes,
.dash-timeline {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--s1);
}

.dash-mode {
  padding: 12px 14px 12px 0;
  border-bottom-color: rgba(255, 255, 255, 0.055);
  transition: background 0.14s var(--ease);
}

.dash-mode:last-child,
.dash-pb:last-child { border-bottom: 0; }
.dash-mode:hover { background: var(--s2); }
.dash-mode:hover .dash-mode-bar { opacity: 1; }
.dash-mode-bar { transition: opacity 0.14s var(--ease); }

.dash-pb { padding: 11px 14px; border-bottom-color: rgba(255, 255, 255, 0.055); }
.dash-pb-name, .dash-at-name { color: var(--text-dim); }

/* Shared focus treatment: one ring, everywhere, so keyboard use never has to
   guess where it is. */
.kv-row:focus-visible,
.dash-mode:focus-visible,
.dash-unplayed-chip:focus-visible,
.menu-tab:focus-visible,
.ch-preset:focus-visible,
.seg-btn:focus-visible,
.btn:focus-visible,
.corner-btn:focus-visible,
.side-rank:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 9px;
}
.kv-row:focus-visible,
.dash-mode:focus-visible { outline-offset: -2px; }

.dash-unplayed-chip {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.025);
}

.cal-cell { border-color: rgba(255, 255, 255, 0.07); }

/* ---- Numbers-first analytics ------------------------------------------
   Charts carry their own axis values, and every chart is paired with a text
   readout of the same figures — a graph with no numbers on it only tells you
   the shape. */
.chart-axis {
  fill: var(--text-ghost);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.02em;
}
.bar-slow { fill: var(--warn); opacity: 0.9; }
.pace-avg { stroke: var(--text-faint); stroke-width: 1; stroke-dasharray: 4 3; }
.pace-avg-label { fill: var(--text-faint); }
#chart-pace { flex: 1 1 100%; }
.chart-meta { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0; text-transform: none; color: var(--text-dim); }

/* Scrubbable run trend. The chart IS the history — point at a run, read it. */
.trend-svg { display: block; width: 100%; height: 130px; cursor: crosshair; }
.trend-svg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.trend-dot { fill: var(--bg); stroke: currentColor; stroke-width: 1.5; opacity: 0.55; }
.trend-dot.is-active { opacity: 0; }
.trend-band { fill: transparent; }
.trend-scrub, .trend-cursor { opacity: 0; }
.trend-svg.has-cursor .trend-scrub {
  opacity: 1;
  stroke: var(--text-faint);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.trend-svg.has-cursor .trend-cursor {
  opacity: 1;
  fill: currentColor;
  stroke: var(--bg);
  stroke-width: 2;
}

.run-readout {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin-top: var(--sp-1);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.run-readout-n { color: var(--text-ghost); }
.run-readout-score { color: var(--text); font-size: 15px; font-weight: 700; }
.run-readout-when { margin-left: auto; }

/* ---- Advanced metrics -------------------------------------------------- */
.res-advanced {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--s1);
}
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: var(--sp-2); }
.metric {
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--s1);
}
.metric-val {
  font-family: var(--mono);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.metric-suf { font-size: 11px; color: var(--text-faint); font-weight: 400; }
.metric-label { margin-top: 5px; font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
.metric-note { margin-top: 3px; font-size: 10.5px; line-height: 1.35; color: var(--text-ghost); }

/* Under / on / over as one proportional bar plus the raw counts. An average
   of +2% hides a run that was half wild-over and half wild-under; the split
   does not. */
.flick-split, .flick-dirs { display: flex; flex-direction: column; gap: 7px; }
.flick-split-head {
  display: flex;
  gap: var(--sp-2);
  align-items: baseline;
  flex-wrap: wrap;
  font-size: var(--t-micro);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-faint);
}
.flick-bar { display: flex; height: 8px; border-radius: 5px; overflow: hidden; background: var(--s1); }
.flick-seg { display: block; height: 100%; }
.flick-under { background: var(--accent-2); }
.flick-on { background: var(--good); }
.flick-over { background: var(--warn); }
.flick-under-t { color: var(--accent-2); }
.flick-on-t { color: var(--good); }
.flick-over-t { color: var(--warn); }
.flick-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.dir-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.dir-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 2px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--s1);
  font-variant-numeric: tabular-nums;
}
.dir-cell.is-empty { opacity: 0.35; }
.dir-arrow { font-size: 13px; line-height: 1; color: var(--text-dim); }
.dir-along { font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: var(--text); }
.dir-n { font-family: var(--mono); font-size: 9.5px; color: var(--text-ghost); }
@media (max-width: 640px) { .dir-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- Sensitivity Finder ------------------------------------------------ */
.finder-lede { font-size: 13.5px; line-height: 1.6; color: var(--text-dim); max-width: 74ch; }
.finder-lede b { color: var(--text); }
.finder-current { margin-top: var(--sp-2); font-size: 13px; color: var(--text-faint); }
.finder-current b { font-family: var(--mono); color: var(--accent); }

.finder-mode { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sp-2); margin-top: var(--sp-3); }
.finder-mode-btn {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px; text-align: left;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--s1); color: var(--text-dim); cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.finder-mode-btn b { font-size: 13.5px; color: var(--text); }
.finder-mode-btn span { font-size: 11.5px; line-height: 1.45; color: var(--text-faint); }
.finder-mode-btn:hover { border-color: var(--border-strong); background: var(--s2); }
.finder-mode-btn.active { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 9%, transparent); }

.finder-rest { display: flex; flex-direction: column; gap: var(--sp-3); }
.finder-rest p { font-size: 13.5px; line-height: 1.6; color: var(--text-dim); max-width: 70ch; }
.finder-rest-meta { font-family: var(--mono); font-size: 12px; color: var(--text-faint) !important; }

.finder-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-2); margin-top: var(--sp-3); }
.finder-preset {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--s1);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease), transform 0.15s var(--ease);
}
.finder-preset:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--s2); transform: translateY(-1px); }
.finder-preset-name { font-size: 15px; font-weight: 700; }
.finder-preset-meta { font-family: var(--mono); font-size: 11.5px; color: var(--accent); }
.finder-preset-why { font-size: 11px; color: var(--text-faint); }

/* Progress strip on the results screen between runs. */
.res-finder:empty { display: none; }
.finder-strip {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas: "head head head" "bar bar bar" "spacer next stop";
  gap: var(--sp-2) var(--sp-2);
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 13px;
  background: color-mix(in srgb, var(--accent) 7%, var(--s1));
}
.finder-strip-head { grid-area: head; display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.finder-tag { font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; color: var(--accent); }
.finder-count { font-family: var(--mono); font-size: 11.5px; color: var(--text-faint); }
.finder-bar { grid-area: bar; height: 5px; border-radius: 4px; background: rgba(0, 0, 0, 0.35); overflow: hidden; }
.finder-bar-fill { display: block; height: 100%; border-radius: 4px; background: var(--accent); transition: width 0.3s var(--ease); }
.finder-next { grid-area: next; }
.finder-next b { font-family: var(--mono); }
.finder-abort { grid-area: stop; }

/* Report */
.finder-result { display: flex; flex-direction: column; gap: var(--sp-4); }
.finder-headline { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.finder-big { font-family: var(--mono); font-size: 46px; font-weight: 800; line-height: 1; color: var(--accent); letter-spacing: -0.03em; }
.finder-conf { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.finder-conf-high { color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
.finder-conf-medium { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.finder-conf-low { color: var(--text-faint); background: var(--s2); }
.finder-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.finder-reasons { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.finder-reasons li {
  position: relative;
  padding-left: 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim);
}
.finder-reasons li::before { content: ""; position: absolute; left: 3px; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.finder-tradeoff { font-size: 13px; color: var(--text-dim); }
.finder-axes { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--sp-2); }
.finder-axis { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--s1); }
.finder-axis-name { font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
.finder-axis-sens { font-family: var(--mono); font-size: 19px; font-weight: 700; }
.finder-axis-rating { font-family: var(--mono); font-size: 11px; color: var(--text-ghost); }

.finder-table { list-style: none; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 13px; overflow: hidden; background: var(--s1); }
.finder-row {
  display: grid;
  grid-template-columns: 56px 56px repeat(var(--axes, 3), minmax(0, 1fr)) 78px 62px 56px 52px 46px;
  align-items: center;
  gap: var(--sp-2);
  padding: 9px 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.finder-row:last-child { border-bottom: 0; }
.finder-thead { font-size: var(--t-micro); letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-ghost); border-bottom-color: var(--border); }
.finder-row.is-best { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.finder-row .fr-sens { font-weight: 700; color: var(--text); }
.finder-row .fr-rating { font-weight: 700; }
.finder-row span:not(.fr-sens) { color: var(--text-dim); text-align: right; }
.finder-thead span { color: var(--text-ghost); }

@media (max-width: 820px) {
  .finder-row { grid-template-columns: 52px 52px 72px 58px 46px; }
  .finder-row .fr-axis, .finder-row .fr-eff, .finder-row .fr-acc { display: none; }
  .finder-strip { grid-template-columns: 1fr auto; grid-template-areas: "head head" "bar bar" "next stop"; }
}

/* ---- Sensitivity leaderboard ------------------------------------------ */
.side-sens {
  margin: 0 26px 10px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.side-sens:disabled { cursor: default; opacity: 0.6; }
.sens-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--s1);
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease);
}
.side-sens:hover:not(:disabled) .sens-box { border-color: var(--border-strong); background: var(--s2); }
.sens-box-eyebrow {
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-ghost);
  font-weight: 700;
}
.sens-list { list-style: none; display: flex; flex-direction: column; gap: 3px; }
.sens-row {
  display: grid;
  grid-template-columns: 14px 40px 1fr auto 30px;
  align-items: baseline;
  gap: var(--sp-2);
  font-family: var(--mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.sens-place { color: var(--text-ghost); }
.sens-value { color: var(--text); font-weight: 700; }
.sens-cm { color: var(--text-faint); }
.sens-grade { color: var(--tier, var(--accent)); font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; }
.sens-rating { color: var(--text); font-weight: 700; text-align: right; }
.sens-row.is-current .sens-value { color: var(--accent); }
.sens-row.is-current .sens-value::after { content: " ●"; font-size: 8px; vertical-align: middle; }
.sens-box-note { font-family: var(--mono); font-size: 9.5px; color: var(--text-ghost); }
.sens-empty { font-size: 11.5px; line-height: 1.5; color: var(--text-faint); }
.res-sens .sens-box { background: var(--s1); }

.sens-lede { font-size: 13px; line-height: 1.55; color: var(--text-dim); max-width: 76ch; }
.sens-table { list-style: none; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 13px; overflow: hidden; background: var(--s1); }
.sens-trow {
  display: grid;
  grid-template-columns: 30px 52px 62px 84px 62px 58px 52px 52px minmax(120px, 1.3fr) minmax(88px, auto);
  align-items: center;
  gap: var(--sp-2);
  padding: 9px 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.sens-trow:last-child { border-bottom: 0; }
.sens-thead {
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-ghost);
  border-bottom-color: var(--border);
}
.sens-trow .sens-modes, .sens-trow .sens-runs, .sens-trow .sens-acc { color: var(--text-dim); text-align: right; }
.sens-trow .sens-top { color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sens-trow .sens-last { color: var(--text-faint); text-align: right; white-space: nowrap; }
.sens-trow.is-current { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.sens-flag { color: var(--warn); }
.sens-foot { font-size: 11px; color: var(--text-faint); }

@media (max-width: 900px) {
  .sens-trow { grid-template-columns: 26px 46px 74px 56px minmax(90px, 1fr); }
  .sens-trow .sens-cm, .sens-trow .sens-modes, .sens-trow .sens-runs, .sens-trow .sens-last { display: none; }
}

@media (max-width: 1100px) {
  .menu { grid-template-columns: 330px minmax(0, 1fr); }
  .lab-main { padding: 40px 30px 34px; }
  .lab-hero { max-width: 690px; }
}

@media (max-width: 820px) {
  .menu {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(48vh, 1fr) minmax(320px, 46vh);
    padding: 0;
    overflow: hidden;
  }

  .lab-main {
    order: 1;
    padding: 72px 18px 18px;
  }

  .lab-side {
    order: 2;
    max-height: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .lab-brand {
    padding: 15px 20px 10px 56px;
  }

  .lab-brand::before { left: 21px; top: 17px; width: 20px; height: 20px; }
  .lab-brand::after { left: 29px; top: 25px; }
  .lab-brand h1 { font-size: 23px; }
  .lab-brand-sub { display: none; }
  .side-rank { display: none; }
  .lab-tools { padding: 9px 20px 11px; }
  .kv-list { padding: 9px 12px 12px; }
  .lab-side-foot { display: none; }

  .lab-hero {
    gap: 16px;
    max-width: 100%;
    padding: 20px 21px;
    border-radius: 16px;
  }

  .hero-name { font-size: clamp(32px, 8vw, 48px); }
  .hero-blurb { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  /* Narrow layouts need the copy full-width; the preview is the first thing to go. */
  .hero-info { grid-template-columns: minmax(0, 1fr); }
  .hero-art { display: none; }
  .lab-corner { top: 18px; right: 18px; }
  .settings-grid { grid-template-columns: 1fr; }
  .dash-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .overlay:not(.menu) { padding: 10px; }
  .panel,
  #settings .panel { max-height: calc(100vh - 20px); padding: 24px 20px; border-radius: 16px; }

  .menu {
    display: grid;
    grid-template-rows: minmax(45vh, auto) minmax(340px, 55vh);
    gap: 0;
    padding: 0;
  }

  .lab-main { padding: 64px 12px 12px; }
  .lab-hero { padding: 17px; }
  .hero-info, .hero-copy { gap: 8px; }
  .hero-name { font-size: clamp(29px, 9vw, 40px); }
  .hero-cat { font-size: 9px; }
  .hero-blurb { font-size: 13px; line-height: 1.45; }
  .hero-meta { gap: 10px; flex-wrap: wrap; }
  .hero-sep { display: none; }
  .hero-actions { flex-wrap: nowrap; }
  .kv-play { min-width: 130px; min-height: 49px; padding: 12px 22px; }
  .hero-options { width: auto; flex: 1; min-width: 0; }
  .hero-actions .seg { width: 100%; overflow: visible; }
  .hero-actions .seg .seg-btn { flex: 1; padding: 8px 9px; }

  .lab-brand { display: none; }
  .lab-tools { padding-top: 12px; }
  .kv-row { min-height: 43px; }

  .stat-num { font-size: 20px; }

  .res-score { font-size: 62px; }
  .btn-row { gap: 8px; }
  .dash-overview { grid-template-columns: 1fr 1fr; }
  .rank-rating { font-size: 50px; }
}

@media (prefers-contrast: more) {
  :root {
    --text-dim: #c6ced8;
    --text-faint: #9aa5b2;
    --border: rgba(255, 255, 255, 0.2);
    --border-strong: rgba(255, 255, 255, 0.32);
  }
}

/* ---- Training: missions, programs, adaptive ---------------------------- */

/* Sidebar summary. Reuses .side-sens for the reset/hit-area so the two boxes
   below the rank badge stay visually identical in weight and spacing. */
.side-training { margin-top: 0; }
.training-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 12px; /* dock-tile band */
  background: var(--s1);
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease);
}
.side-training:hover:not(:disabled) .training-box { border-color: var(--border-strong); background: var(--s2); }
.tb-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.tb-count { font-family: var(--mono); font-size: 20px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.tb-of { font-size: 12px; color: var(--text-ghost); font-weight: 700; }
.tb-streak { font-size: 9.5px; font-weight: 800; color: var(--warn); text-transform: uppercase; letter-spacing: 0.16em; }
.tb-streak-none { color: var(--text-ghost); }
/* Inset tracks take the HUD gauge's ground, not a raw black: --s1 is a light
   overlay and reads as a raised surface, which is backwards for a track. */
.tb-bar { display: block; height: 4px; border-radius: 4px; background: rgba(6, 9, 14, 0.72); overflow: hidden; }
.tb-fill { display: block; height: 100%; border-radius: 4px; background: var(--good); transition: width 0.3s var(--ease); }
.tb-program { font-family: var(--mono); font-size: 9.5px; color: var(--text-faint); }
.tb-program-none { color: var(--text-ghost); }

/* Panel */
.training-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.training-col { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.mission-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); }
.mission {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  grid-template-areas: "check label value" "check note note" "bar bar bar";
  gap: 3px var(--sp-2);
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--s1);
  /* The system's marker signature: an inset 2px accent bar, not a 3px border.
     A border-left also shifts the content box, so the label sat 1px off every
     other card in the column. */
  box-shadow: inset 2px 0 0 var(--mc, var(--accent));
}
.mission.is-done { border-color: color-mix(in srgb, var(--good) 40%, transparent); background: color-mix(in srgb, var(--good) 7%, var(--s1)); box-shadow: inset 2px 0 0 var(--good); }
.mission-check { grid-area: check; font-family: var(--mono); font-size: 13px; font-weight: 800; color: var(--good); line-height: 1.3; }
.mission-label { grid-area: label; font-size: 13.5px; font-weight: 600; color: var(--text); }
.mission-value { grid-area: value; font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mission-note { grid-area: note; font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-ghost); }
.mission-bar { grid-area: bar; display: block; height: 4px; margin-top: 5px; border-radius: 4px; background: rgba(6, 9, 14, 0.72); overflow: hidden; }
.mission-fill { display: block; height: 100%; border-radius: 4px; background: var(--mc, var(--accent)); transition: width 0.3s var(--ease); }
.mission.is-done .mission-fill { background: var(--good); }

.training-facts { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-family: var(--mono); font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.training-note { font-size: 11.5px; line-height: 1.55; color: var(--text-ghost); max-width: 60ch; }

/* Programs */
.prog-grid { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); }
.prog-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--s1);
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease);
}
.prog-card:hover { border-color: var(--border-strong); background: var(--s2); }
.prog-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.prog-name { font-family: var(--display); font-size: 16px; font-weight: 700; letter-spacing: 0.01em; color: var(--text); }
.prog-tag { font-size: 9.5px; font-weight: 800; color: var(--accent-2); text-transform: uppercase; letter-spacing: 0.18em; }
.prog-blurb { font-size: 12.5px; line-height: 1.55; color: var(--text-dim); }
.prog-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.prog-meta { font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

.prog-active { display: flex; flex-direction: column; gap: var(--sp-3); padding: 15px 16px; border: 1px solid color-mix(in srgb, var(--accent-2) 30%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--accent-2) 6%, var(--s1)); box-shadow: inset 2px 0 0 var(--accent-2); }
.prog-active-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.prog-active-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prog-day { font-family: var(--mono); font-size: 11px; color: var(--accent-2); }
.ptask-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-1); }
.ptask {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) 42px 40px auto;
  align-items: center;
  gap: var(--sp-2);
  padding: 7px 9px;
  border-radius: 8px; /* list-row band */
  background: rgba(6, 9, 14, 0.55);
}
.ptask.is-done { background: color-mix(in srgb, var(--good) 10%, rgba(6, 9, 14, 0.55)); box-shadow: inset 2px 0 0 var(--good); }
.ptask-check { font-family: var(--mono); font-size: 12px; font-weight: 800; color: var(--good); }
.ptask-name { font-size: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptask-reps, .ptask-dur { font-family: var(--mono); font-size: 11.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; text-align: right; }
.ptask-reps { color: var(--text); font-weight: 700; }
.prog-active-foot { display: flex; flex-direction: column; gap: 5px; }
.prog-finished { font-family: var(--mono); font-size: 10.5px; color: var(--text-ghost); }

/* Compact button used inside program rows and cards. */
.btn-small { min-height: 30px; padding: 6px 13px; font-size: 12.5px; border-radius: 8px; }

/* Results strip: what this run moved. */
.res-training:empty { display: none; }
.training-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  padding: 11px 14px;
  border: 1px solid color-mix(in srgb, var(--good) 26%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--good) 6%, var(--s1));
}
.trs-eyebrow { font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 800; color: var(--good); }
.trs-item { font-family: var(--mono); font-size: 11.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.trs-item.is-done { color: var(--good); font-weight: 700; }

/* Adaptive */
.res-adaptive:empty { display: none; }
.adaptive-block { display: flex; flex-direction: column; gap: var(--sp-3); }
.adaptive-note { font-size: 12px; line-height: 1.6; color: var(--text-faint); max-width: 78ch; }
.adaptive-note b { color: var(--text-dim); }
/* Sits over the arena, so it takes the glass-chip recipe rather than the panel
   ramp — bare text on a moving 3D scene is unreadable the moment a bright wall
   passes behind it. Mirrors .hud-scenario: pill, hairline, blur(8px), dot. */
.hud-adaptive {
  position: absolute;
  right: 16px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 21px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent-2);
  font-variant-numeric: tabular-nums;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  background: rgba(6, 9, 14, 0.6);
  backdrop-filter: blur(8px);
}
.hud-adaptive::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-2);
  transform: translateY(-50%);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent-2) 60%, transparent);
}
.hero-note { max-width: 52ch; font-size: 11.5px; line-height: 1.55; color: var(--text-faint); }

/* Redesign-layer breakpoints (900 / 680), not the base layer's 1100 / 720 —
   otherwise this panel collapses at a different width from the shell holding it. */
@media (max-width: 900px) {
  .training-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
}
@media (max-width: 680px) {
  .mission { grid-template-columns: 18px minmax(0, 1fr); grid-template-areas: "check label" "check value" "note note" "bar bar"; }
  .mission-value { justify-self: start; }
  .ptask { grid-template-columns: 16px minmax(0, 1fr) auto; grid-template-areas: "check name reps" "check dur play"; row-gap: 4px; }
  .ptask-check { grid-area: check; }
  .ptask-name { grid-area: name; }
  .ptask-reps { grid-area: reps; }
  .ptask-dur { grid-area: dur; text-align: left; }
  .ptask .btn-small { grid-area: play; }
}

/* ============================================================
   2026 interface refresh
   Drill-first launcher, focused settings and an aim-safe HUD.
   These rules intentionally sit last while the remaining views keep the
   established component vocabulary above.
   ============================================================ */

.ui-eyebrow,
.hero-kicker {
  display: block;
  font-size: 9.5px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ---- Launcher --------------------------------------------------------- */

.menu {
  grid-template-columns: clamp(330px, 27vw, 410px) minmax(0, 1fr);
  background:
    linear-gradient(90deg, rgba(5, 8, 12, 0.42), rgba(5, 8, 12, 0.06) 48%, rgba(5, 8, 12, 0.34)),
    radial-gradient(80% 100% at 68% 50%, transparent 36%, rgba(5, 8, 12, 0.34));
}

.lab-side {
  background: linear-gradient(180deg, rgba(10, 14, 20, 0.97), rgba(7, 10, 15, 0.98));
  border-right-color: rgba(255, 255, 255, 0.095);
  box-shadow: 20px 0 70px rgba(0, 0, 0, 0.24);
}

.lab-brand {
  min-height: 86px;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 13px;
  border-bottom: 1px solid var(--border);
}
.lab-brand::before,
.lab-brand::after { content: none; }

.brand-copy { min-width: 0; }
.lab-brand h1 { font-size: 25px; letter-spacing: 0.105em; }
.lab-brand-sub { margin-top: 5px; letter-spacing: 0.22em; }
.brand-mark {
  position: relative;
  width: 33px;
  height: 33px;
  flex: 0 0 33px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 7%, transparent);
}
.brand-mark::before,
.brand-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
}
.brand-mark::before { width: 1px; height: 43px; }
.brand-mark::after { width: 43px; height: 1px; }
.brand-mark span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 80%, transparent);
}

.lab-library-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 12px;
}
.lab-library-head h2 {
  margin-top: 5px;
  font-family: var(--display);
  font-size: 19px;
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.lab-library-head .kv-count {
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--s1);
}

.lab-tools { padding: 0 24px 13px; gap: 11px; }
.kv-search-wrap { position: relative; display: block; }
.kv-search-wrap .search-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--text-faint);
  border-radius: 50%;
  transform: translateY(-56%);
  pointer-events: none;
}
.kv-search-wrap .search-icon::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -3px;
  width: 6px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--text-faint);
  transform: rotate(45deg);
}
.kv-search-wrap kbd {
  position: absolute;
  top: 50%;
  right: 10px;
  padding: 1px 6px;
  color: var(--text-faint);
  transform: translateY(-50%);
  pointer-events: none;
}
.kv-search {
  height: 42px;
  padding: 10px 40px 10px 38px;
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.035);
}
.kv-search::-webkit-search-cancel-button { filter: invert(1); opacity: 0.5; }
.kv-search:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
}
.kv-tabs { flex-wrap: nowrap; gap: 5px; overflow-x: auto; scrollbar-width: none; }
.kv-tabs::-webkit-scrollbar { display: none; }
.menu-tab { flex: 0 0 auto; padding: 5px 10px; font-size: 11px; }
.menu-tab.active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, rgba(255, 255, 255, 0.02));
}

.kv-list { padding: 8px 14px 12px; gap: 2px; }
.kv-group {
  padding: 13px 10px 6px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-ghost);
}
.kv-group-n { float: right; font-family: var(--mono); letter-spacing: 0; }
.kv-row {
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
}
.kv-row:hover { background: rgba(255, 255, 255, 0.045); }
.kv-row.selected {
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent) 5%, transparent));
  box-shadow: inset 2px 0 0 var(--accent);
}
.kv-row-dot { justify-self: center; }
.kv-row-name { font-size: 13px; }
.kv-row-best { display: flex; align-items: baseline; gap: 5px; }
.kv-row-best small { font-family: var(--font); font-size: 8px; letter-spacing: 0.1em; color: var(--text-ghost); }
.lab-side-foot { justify-content: flex-end; padding: 12px 24px; }
.local-note { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--text-faint); }
.local-note > span { width: 6px; height: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 8px color-mix(in srgb, var(--good) 60%, transparent); }

.lab-main {
  justify-content: center;
  padding: 100px clamp(30px, 5vw, 76px) 176px;
  overflow: hidden;
}
.lab-main::before {
  height: 78%;
  background: linear-gradient(180deg, transparent, rgba(5, 8, 12, 0.68) 78%);
}
.lab-corner { top: 24px; right: 28px; align-items: center; z-index: 2; }
.privacy-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 4px;
  font-size: 10.5px;
  color: var(--text-faint);
}
.privacy-chip > span { width: 6px; height: 6px; border-radius: 50%; background: var(--good); }
.corner-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 8px 13px; background: rgba(8, 11, 16, 0.7); }
.corner-icon { position: relative; width: 14px; height: 14px; opacity: 0.8; }
.corner-icon-settings { border: 1.5px solid currentColor; border-radius: 50%; }
.corner-icon-settings::after { content: ""; position: absolute; inset: 3px; border: 1px solid currentColor; border-radius: 50%; }
.corner-icon-sens::before,
.corner-icon-sens::after { content: ""; position: absolute; left: 1px; right: 1px; height: 1px; background: currentColor; }
.corner-icon-sens::before { top: 4px; box-shadow: 0 6px 0 currentColor; }
.corner-icon-sens::after { top: 1px; left: 4px; width: 2px; height: 7px; box-shadow: 6px 6px 0 currentColor; }

.lab-hero {
  width: min(860px, 100%);
  max-width: none;
  gap: 13px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  z-index: 1;
}
.hero-kicker { color: var(--accent); text-shadow: 0 2px 10px #000; }
.hero-info { grid-template-columns: minmax(0, 1fr) minmax(160px, 190px); gap: 34px; }
.hero-copy {
  position: relative;
  gap: 10px;
  padding: 14px 74px 14px 20px;
  border-radius: 0 14px 14px 0;
  background: linear-gradient(90deg, rgba(5, 8, 12, 0.94), rgba(5, 8, 12, 0.76) 68%, transparent);
}
.hero-copy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 15%, transparent));
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 28%, transparent);
}
.hero-cat { font-size: 10px; letter-spacing: 0.18em; color: var(--text-dim); }
.hero-name { font-size: clamp(44px, 4.8vw, 68px); letter-spacing: -0.015em; }
.hero-blurb { font-size: 14px; max-width: 56ch; }
.hero-art {
  width: 100%;
  padding: 18px 16px;
  border-color: rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background:
    radial-gradient(80% 100% at 50% 20%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%),
    rgba(7, 10, 15, 0.72);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.hero-meta { gap: 12px; }
.hero-stat {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hero-meta b { font-size: 14px; letter-spacing: 0; text-transform: none; }
.hero-sep { height: 26px; }
.hero-actions {
  width: fit-content;
  max-width: 100%;
  align-items: stretch;
  gap: 10px;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 15px;
  background: rgba(7, 10, 15, 0.76);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(14px);
}
.kv-play {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  min-width: 228px;
  padding: 13px 17px 13px 19px;
  text-align: left;
  letter-spacing: 0;
  border-radius: 10px;
}
.kv-play .play-copy { font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; }
.kv-play .play-hint { grid-column: 1; font-family: var(--font); font-size: 10px; font-weight: 600; letter-spacing: 0.02em; opacity: 0.75; }
.kv-play .play-arrow { grid-column: 2; grid-row: 1 / 3; font-family: var(--font); font-size: 24px; }
.hero-options { flex: 1; min-width: 0; justify-content: center; padding: 1px 0; }
.hero-actions .seg { min-height: 39px; background: rgba(8, 11, 16, 0.66); }
.hero-actions .seg .seg-btn { padding: 7px 15px; }
.hero-note { padding-left: 12px; border-left: 2px solid var(--accent-2); }

.lab-progress-dock {
  position: absolute;
  left: clamp(28px, 4vw, 64px);
  right: clamp(28px, 4vw, 64px);
  bottom: 26px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  z-index: 2;
}
.lab-progress-dock > button { min-width: 0; min-height: 108px; margin: 0; }
.lab-progress-dock .side-rank,
.lab-progress-dock .sens-box,
.lab-progress-dock .training-box {
  height: 100%;
  border-radius: 12px;
  background: rgba(8, 11, 16, 0.74);
  backdrop-filter: blur(12px);
}
.lab-progress-dock .side-rank { padding: 13px 14px; }
.lab-progress-dock .side-sens { padding: 0; border: 0; background: none; text-align: left; }
.lab-progress-dock .sens-box,
.lab-progress-dock .training-box { padding: 13px 14px; }
.lab-progress-dock .sens-list { gap: 2px; }
.lab-progress-dock .sens-row:nth-child(n + 3) { display: none; }
.lab-progress-dock .side-rank-sub,
.lab-progress-dock .sens-box-note,
.lab-progress-dock .tb-program { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Settings --------------------------------------------------------- */

#settings { padding: 18px; background: rgba(5, 8, 12, 0.83); }
#settings .settings-shell {
  width: min(1080px, 100%);
  height: min(760px, calc(100vh - 36px));
  max-height: none;
  padding: 0;
  gap: 0;
  overflow: hidden;
  background: rgba(11, 15, 22, 0.98);
  border-color: rgba(255, 255, 255, 0.11);
}
.settings-head {
  min-height: 94px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 19px 22px 19px 26px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.015);
}
.settings-head h2 { margin-top: 5px; font-size: 27px; line-height: 1; }
.settings-head p { margin-top: 7px; font-size: 11.5px; color: var(--text-faint); }
.settings-close {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 8px 12px 8px 15px;
  color: var(--text-dim);
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 9px;
  font: 700 12px var(--font);
  cursor: pointer;
}
.settings-close:hover { color: var(--text); border-color: var(--border-strong); }
.settings-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.settings-close kbd { color: var(--text-faint); }
.settings-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); flex: 1; min-height: 0; }
.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 18px 12px;
  border-right: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.13);
}
.settings-tab {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 11px;
  text-align: left;
  color: var(--text-faint);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
}
.settings-tab:hover { color: var(--text-dim); background: var(--s1); }
.settings-tab.active {
  color: var(--text);
  border-color: transparent;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  box-shadow: inset 2px 0 0 var(--accent);
}
.settings-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.settings-tab-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font: 800 11px var(--mono);
  color: var(--text-faint);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}
.settings-tab.active .settings-tab-icon { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 34%, transparent); }
.settings-tab b,
.settings-tab small { display: block; }
.settings-tab b { font-size: 12.5px; }
.settings-tab small { margin-top: 2px; font-size: 9.5px; color: var(--text-ghost); }
.settings-content { min-width: 0; overflow-y: auto; padding: 28px 32px 36px; scrollbar-gutter: stable; }
.settings-pane[hidden] { display: none !important; }
.settings-pane { animation: settingsPaneIn 0.18s var(--ease); }
@keyframes settingsPaneIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.settings-pane-head { margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.settings-pane-head h3 {
  margin: 6px 0 0;
  font-family: var(--display);
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}
.settings-pane-head p { margin-top: 7px; font-size: 12.5px; color: var(--text-faint); }
.settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.set-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.022);
}
.set-group > h3 {
  margin: 0 0 2px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-faint);
}
.set-group-wide { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.set-group-wide > h3 { grid-column: 1 / -1; }
/* A sub-column of related rows inside a wide group — the HUD group needs three
   of them (placement, stat toggles, bar toggles) reading as separate lists
   rather than one 11-row wall. */
.set-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.setting-sublabel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-bottom: 3px;
}
/* Toggle rows carry no value readout, so the label can take the space it needs
   and the checkbox sits at its natural size against the right edge. */
.setting-inline { grid-template-columns: minmax(0, 1fr) auto; }
.set-group-wide #target-color-row { grid-column: 1 / -1; }
.setting { min-height: 34px; grid-template-columns: minmax(0, 1fr) minmax(112px, 43%); }
.setting-label { font-size: 12.5px; }
.setting-note { font-size: 10.5px; }
.setting select { padding: 8px 10px; font-size: 12.5px; }
.setting .num-input { width: 100%; }
.ch-preview-wrap { height: 98px; background: radial-gradient(95% 120% at 50% 48%, #283039 0%, #121820 75%); }
.ch-preset.active {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.data-tools { display: flex; flex-direction: column; align-items: stretch; gap: 18px; padding: 0; border: 0; }
.data-callout {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--good) 20%, var(--border));
  border-radius: 13px;
  background: color-mix(in srgb, var(--good) 5%, rgba(255, 255, 255, 0.02));
}
.data-callout-icon {
  position: relative;
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--good) 45%, transparent);
  border-radius: 50%;
}
.data-callout-icon::before { content: ""; position: absolute; left: 11px; top: 9px; width: 14px; height: 16px; border: 1.5px solid var(--good); border-radius: 3px 3px 7px 7px; }
.data-callout-icon::after { content: ""; position: absolute; left: 15px; top: 5px; width: 6px; height: 8px; border: 1.5px solid var(--good); border-bottom: 0; border-radius: 6px 6px 0 0; }
.data-callout h3 { margin: 0 0 5px; font-size: 12px; color: var(--text); }
.data-actions { justify-content: flex-start; }
.data-actions .btn { min-height: 40px; padding: 9px 15px; }
.data-status { min-height: 20px; }

/* ---- Account + leaderboard --------------------------------------------- */

.account-shell { width: min(460px, 100%); }

/* One rhythm for the whole panel instead of a per-element margin each time.
   The previous version stacked ten blocks of near-identical weight with
   individually tuned margins, which is what made it read as cramped: nothing
   was grouped, so nothing was skimmable. */
#account-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3, 12px);
}
.account-cta { width: 100%; justify-content: center; }

/* Full-width stacked fields. These used to borrow `.setting`, whose grid puts
   the control in a fixed 128px column — correct for a settings dropdown, and
   the direct cause of a squeezed email box in a 460px panel. */
.account-field { display: flex; flex-direction: column; gap: 6px; }
.account-field label {
  font-size: var(--t-small, 11.5px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.account-field input {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: var(--t-body, 13.5px);
  color: var(--text);
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 9px;              /* the button/control step of the ladder */
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.account-field input::placeholder { color: var(--text-ghost); }
.account-field input:focus-visible {
  outline: none;
  background: var(--s3);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
.account-field small {
  font-size: var(--t-small, 11.5px);
  line-height: 1.45;
  color: var(--text-faint);
}

/* A labelled hairline. Cheaper than a heading plus a rule, and it does the
   grouping job that was missing — the eye can find "New here?" without
   reading the paragraph above it. */
.account-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: var(--sp-2, 8px);
  color: var(--text-faint);
  font-size: var(--t-micro, 10px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.account-divider::before,
.account-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.account-who { font-size: var(--t-lead, 15px); color: var(--text-dim); }
.account-who strong { color: var(--text); }
.account-methods,
.account-hint {
  margin-top: -4px;               /* sits with the control it explains */
  font-size: var(--t-small, 11.5px);
  line-height: 1.5;
  color: var(--text-faint);
}
.account-foot {
  margin-top: var(--sp-2, 8px);
  font-size: var(--t-small, 11.5px);
  line-height: 1.6;
  color: var(--text-faint);
}
.account-foot a { color: var(--text-dim); }
.btn.is-danger:hover {
  color: #ff9d90;
  border-color: color-mix(in srgb, #c8382a 55%, transparent);
}
.account-msg { min-height: 0; font-size: 13px; border-radius: 8px; }
.account-msg.is-ok,
.account-msg.is-error { min-height: 20px; padding: 9px 12px; margin-bottom: 14px; }
.account-msg.is-ok { color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); }
.account-msg.is-error { color: #ff9d90; background: rgba(200, 56, 42, 0.14); }
.account-note { font-size: 13px; color: var(--text-dim); line-height: 1.5; }
.account-small { font-size: 12px; }
.account-h3 { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
              color: var(--text-faint); margin: 18px 0 8px; }
.account-rule { border: 0; border-top: 1px solid var(--border); margin: 20px 0; }
/* The one claim worth making loudly, because it is the reason there is no
   password field on this panel. */
.account-keyline {
  margin: 14px 0;
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-dim);
  border: 1px solid color-mix(in srgb, var(--good) 30%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--good) 8%, transparent);
}
.key-list { list-style: none; margin: 0 0 10px; padding: 0; }
.key-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0;
               border-bottom: 1px solid rgba(255, 255, 255, 0.05); font-size: 13px; }
.key-list li span:first-child { flex: 1; }
.key-meta { font-size: 11.5px; color: var(--text-faint); }

/* The board now lives inside the selected-drill view rather than its own
   overlay, so it has to sit in a bounded box: 500 rows would otherwise push the
   play button and the duration segment off the screen. It scrolls internally
   and the header stays put. */
.drill-board {
  display: flex;
  flex-direction: column;
  /* flex: 0 0 auto is load-bearing. The menu column is a flex column with no
     spare room, so the default `flex-shrink: 1` squeezed this to 17px — the
     board was in the DOM, correct in every other respect, and invisible. */
  flex: 0 0 auto;
  width: min(860px, 100%);
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.board-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.board-head h3 {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-faint);
}
/* Collapsed: the leaders, in place, costing almost no vertical room. The rows
   past the fifth are rendered but not shown, so expanding is instant. */
.board-scroll {
  overflow-x: auto;          /* the table is wider than a phone either way */
  border: 1px solid var(--border);
  border-radius: 8px;
}
.drill-board:not(.is-expanded) .board-table tbody tr:nth-child(n + 4) { display: none; }

/* Expanded: fill whatever the column has left and scroll inside it. A fixed
   max-height cannot work here — the space available depends on the viewport and
   on how tall the hero happens to be for this drill. */
.drill-board.is-expanded {
  flex: 1 1 auto;
  min-height: 0;
}
.drill-board.is-expanded .board-scroll {
  flex: 1 1 auto;
  min-height: 120px;
  overflow: auto;
}
.drill-board.is-expanded .board-table tbody tr { display: table-row; }

.board-foot { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.board-foot .btn { align-self: flex-start; }

/* The menu column is a fixed-height, centred, overflow-hidden layout, so the
   expanded board has to change the column itself — otherwise the extra rows are
   painted outside the visible box and never appear at all. While expanded the
   hero unpins from centre and the progress dock steps aside, because the player
   has explicitly asked to read rankings rather than look at the drill. */
body.board-open .lab-main {
  justify-content: flex-start;
  padding-top: 76px;
  padding-bottom: 28px;
  min-height: 0;
}
body.board-open .lab-progress-dock { display: none; }
/* Reading a ranking and studying the drill art are different jobs. While the
   board is open the hero keeps its name and numbers and drops the parts that
   only describe the drill — which is where the room for the rows comes from. */
body.board-open .lab-hero { flex: 0 0 auto; min-height: 0; gap: 8px; }
body.board-open .hero-art,
body.board-open .hero-blurb,
body.board-open .hero-explanation,
body.board-open .hero-tags,
body.board-open .hero-kicker { display: none; }
body.board-open .hero-info { grid-template-columns: minmax(0, 1fr); }
.board-scroll thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface, #0f141b);
}
.board-meta { font-size: 12.5px; color: var(--text-faint); }
.board-empty { color: var(--text-faint); font-size: 13px; padding: 22px 0; text-align: center; }
.board-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 620px; }
.board-table th { text-align: left; padding: 8px 10px; font-size: 10px; letter-spacing: 0.12em;
                  text-transform: uppercase; color: var(--text-faint);
                  border-bottom: 1px solid var(--border); }
.board-table td { padding: 9px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.board-table tr.is-you td { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.board-rank { font-family: var(--mono); color: var(--text-faint); }
.board-score { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.verify-chip { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
               padding: 3px 7px; border-radius: 999px; white-space: nowrap; }
.verify-replay { color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
.verify-scored { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.verify-partial { color: var(--text-faint); background: rgba(255, 255, 255, 0.06); }
.board-note { font-size: 11.5px; line-height: 1.55; color: var(--text-faint); margin-top: 16px; }

/* ---- Gameplay HUD ----------------------------------------------------- */

.hud-stats .stat {
  min-width: 108px;
  padding: 9px 12px 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  background: rgba(6, 9, 14, 0.68);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(8px);
}
.stat-label { font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase; }
.stat-num { font-size: 23px; font-weight: 700; }
.hud-scenario {
  padding: 10px 14px 10px 25px;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  background: rgba(6, 9, 14, 0.6);
  backdrop-filter: blur(8px);
}
.hud-scenario::before { content: ""; position: absolute; left: 11px; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); transform: translateY(-50%); box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent); }
.hud-bars {
  top: calc(64px + var(--hud-stack));
  bottom: auto;
  margin: 0;
  width: clamp(120px, var(--hud-bar-width, 220px), 420px);
  gap: 3px;
}
.hud-gauge { height: 3px; background: rgba(6, 9, 14, 0.72); }
.hud-gauge-time { height: 4px; }
.hud-streak { top: calc(82px + var(--hud-stack)); padding: 5px 9px; font-size: 9px; border-radius: 999px; background: rgba(6, 9, 14, 0.6); }
.track-hp { height: 6px; border-color: rgba(255, 255, 255, 0.2); background: rgba(6, 9, 14, 0.72); }
.countdown { background: radial-gradient(circle at center, rgba(5, 8, 12, 0.08), transparent 28%); }
#countdown-num { font-size: clamp(74px, 13vw, 150px); }

/* Pause is a decision card, not another large settings panel. */
#pause .panel-narrow { width: min(390px, 100%); padding: 28px; background: rgba(11, 15, 22, 0.96); }
#pause .panel-narrow::before { content: "Session paused"; font-size: 9px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
#pause .panel h2 { font-size: 32px; }
#pause .btn-col { gap: 8px; }

@media (max-width: 1180px) {
  .menu { grid-template-columns: 340px minmax(0, 1fr); }
  .lab-main { padding-left: 30px; padding-right: 30px; }
  .lab-progress-dock { left: 24px; right: 24px; }
  .privacy-chip { display: none; }
  .hero-art { max-width: 155px; }
  .sens-row { grid-template-columns: 12px 35px 1fr auto; }
  .lab-progress-dock .sens-row .sens-rating { display: none; }
}

@media (max-width: 900px) {
  .menu {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(46vh, 1fr) minmax(360px, 54vh);
  }
  .lab-main { order: 1; padding: 62px 22px 70px; justify-content: center; }
  .lab-side { order: 2; border-top: 1px solid var(--border); border-right: 0; }
  .lab-progress-dock { left: 22px; right: 22px; bottom: 14px; gap: 6px; }
  .lab-progress-dock > button {
    display: grid;
    place-items: center;
    min-height: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-dim);
    background: rgba(8, 11, 16, 0.72);
    font: 700 10.5px var(--font);
    letter-spacing: 0.04em;
  }
  .lab-progress-dock > button > * { display: none; }
  .lab-progress-dock #side-rank::after { content: "Career"; }
  .lab-progress-dock #side-sens::after { content: "Sensitivity"; }
  .lab-progress-dock #side-training::after { content: "Training"; }
  .lab-corner { top: 14px; right: 16px; }
  .lab-hero { gap: 10px; }
  .hero-info { grid-template-columns: minmax(0, 1fr) 130px; }
  .hero-name { font-size: clamp(34px, 7vw, 52px); }
  .hero-blurb { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .lab-brand { min-height: 62px; padding: 13px 20px; }
  .brand-mark { width: 26px; height: 26px; flex-basis: 26px; }
  .brand-mark::before { height: 34px; }
  .brand-mark::after { width: 34px; }
  .lab-brand h1 { font-size: 21px; }
  .lab-library-head { padding: 13px 20px 9px; }
  .lab-tools { padding: 0 20px 9px; }
  .kv-list { padding-top: 4px; }
  .settings-layout { grid-template-columns: 190px minmax(0, 1fr); }
  .settings-content { padding: 24px; }
  .settings-grid { grid-template-columns: minmax(0, 1fr); }
  .set-group-wide { grid-column: auto; display: flex; }
}

@media (max-width: 680px) {
  #settings { padding: 8px; }
  #settings .settings-shell { height: calc(100vh - 16px); border-radius: 14px; }
  .settings-head { min-height: 76px; padding: 14px 15px; }
  .settings-head p { display: none; }
  .settings-head h2 { font-size: 23px; }
  .settings-close { padding-left: 12px; }
  .settings-close kbd { display: none; }
  .settings-layout { display: flex; flex-direction: column; }
  .settings-nav {
    flex: 0 0 auto;
    flex-direction: row;
    gap: 4px;
    padding: 8px;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .settings-tab { flex: 1 0 auto; display: flex; width: auto; padding: 8px 10px; }
  .settings-tab small { display: none; }
  .settings-tab-icon { width: 25px; height: 25px; }
  .settings-content { padding: 19px 16px 30px; }
  .settings-pane-head { margin-bottom: 16px; padding-bottom: 14px; }
  .settings-pane-head h3 { font-size: 20px; }
  .set-group { padding: 15px; }
  .setting { grid-template-columns: minmax(0, 1fr) minmax(105px, 45%); }

  .menu { grid-template-rows: minmax(42vh, auto) minmax(390px, 58vh); }
  .lab-main { padding: 52px 13px 60px; }
  .lab-corner { right: 10px; top: 10px; }
  .corner-btn { min-height: 34px; padding: 7px 10px; font-size: 11px; }
  .hero-kicker { display: none; }
  .hero-info { grid-template-columns: minmax(0, 1fr); }
  .hero-art { display: none; }
  .hero-name { font-size: clamp(30px, 9vw, 42px); }
  .hero-meta { flex-wrap: wrap; }
  .hero-sep { display: none; }
  .hero-actions { gap: 8px; }
  .kv-play { min-width: 145px; padding: 11px 12px; }
  .kv-play .play-copy { font-size: 13px; }
  .kv-play .play-hint { display: none; }
  .kv-play .play-arrow { grid-row: 1; font-size: 20px; }
  .hero-options { gap: 5px; }
  .hero-actions .seg { min-height: 34px; padding: 3px; }
  .hero-actions .seg-label { display: none; }
  .hero-actions .seg .seg-btn { padding: 6px 9px; font-size: 11px; }
  .lab-brand { display: none; }
  .lab-library-head { padding-top: 12px; }
  .lab-progress-dock { left: 10px; right: 10px; bottom: 10px; }

  .hud-stats[data-pos="split"] { top: 10px; left: 10px; right: 10px; }
  .hud-stats .stat { min-width: 78px; padding: 7px 8px 6px; }
  .hud-stats { gap: 5px; }
  .stat-num { font-size: 18px; }
  .hud-scenario { padding: 8px 10px 8px 21px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hud-scenario::before { left: 8px; }
  /* Narrow screens pull the stack up, but must still respect the player's bar
     length and the top-centre offset — a hardcoded width/top here silently made
     the bar-length slider do nothing and let the cards land on the gauges. */
  .hud-bars { top: calc(51px + var(--hud-stack)); width: clamp(120px, var(--hud-bar-width, 220px), 100vw - 24px); }
  .hud-streak { top: calc(66px + var(--hud-stack)); }
}

@media (prefers-reduced-motion: reduce) {
  .settings-pane { animation: none; }
}

/* ============================================================
   Guided Quick Session + single-viewport results
   ============================================================ */

.corner-btn-primary {
  color: var(--on-accent);
  border-color: transparent;
  background: linear-gradient(180deg, var(--accent), var(--accent-strong));
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}
.corner-btn-primary:hover { color: var(--on-accent); border-color: transparent; background: linear-gradient(180deg, #ff7d5c, #ef4a20); }
.corner-icon-quick::before,
.corner-icon-quick::after { content: ""; position: absolute; background: currentColor; border-radius: 2px; }
.corner-icon-quick::before { left: 1px; right: 1px; top: 6px; height: 2px; }
.corner-icon-quick::after { top: 1px; bottom: 1px; left: 6px; width: 2px; }

#quick-session { padding: 18px; background: rgba(5, 8, 12, 0.88); }
.quick-shell {
  width: min(970px, 100%);
  height: min(690px, calc(100dvh - 36px));
  max-height: none;
  padding: 0;
  gap: 0;
  overflow: hidden;
  background: rgba(11, 15, 22, 0.98);
}
.quick-head,
.quick-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; }
.quick-head { min-height: 88px; border-bottom: 1px solid var(--border); }
.quick-head h2 { margin-top: 5px; font-size: 29px; }
.quick-body {
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(360px, 1.1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 22px 28px;
  padding: 24px;
}
.quick-body > section:first-child { grid-row: 1 / 3; }
.quick-step { display: block; margin-bottom: 11px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint); }
.quick-focus { display: grid; gap: 8px; }
.quick-focus button {
  min-height: 86px;
  padding: 14px 16px;
  color: var(--text-dim);
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  cursor: pointer;
}
.quick-focus button span { display: block; font-size: 14px; font-weight: 800; color: var(--text); }
.quick-focus button small { display: block; margin-top: 6px; font-size: 11.5px; line-height: 1.4; color: var(--text-faint); }
.quick-focus button:hover { border-color: var(--border-strong); background: rgba(255, 255, 255, 0.045); }
.quick-focus button.active { border-color: transparent; background: color-mix(in srgb, var(--accent) 10%, rgba(255, 255, 255, 0.02)); box-shadow: inset 3px 0 0 var(--accent); }
.quick-focus button:focus-visible,
.quick-time button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.quick-time { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.quick-time button {
  min-height: 58px;
  font: 800 24px var(--mono);
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.025);
  cursor: pointer;
}
.quick-time button small { font: 700 10px var(--font); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
.quick-time button.active { color: var(--text); border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 11%, transparent); }
.quick-plan-wrap { min-height: 0; }
.quick-plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.quick-plan-head > span:last-child { font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); }
.quick-plan { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.quick-plan li { min-width: 0; display: grid; grid-template-columns: 17px 7px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 8px 9px; border: 1px solid var(--border); border-radius: 9px; background: rgba(255, 255, 255, 0.022); }
.quick-plan-n { font: 700 10px var(--mono); color: var(--text-ghost); }
.quick-plan-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--task); box-shadow: 0 0 7px color-mix(in srgb, var(--task) 65%, transparent); }
.quick-plan-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 700; color: var(--text); }
.quick-plan-reason { display: none; }
.quick-plan-time { font: 700 9.5px var(--mono); color: var(--text-faint); }
.quick-foot { min-height: 76px; border-top: 1px solid var(--border); background: rgba(255, 255, 255, 0.012); }
.quick-foot p { font-size: 11px; color: var(--text-faint); }
.quick-foot .btn { min-width: 190px; }

/* Results intentionally have no vertical scroller. Information density is
   managed with three detail tabs rather than a long analytics document. */
#results { padding: 14px; background: rgba(5, 8, 12, 0.86); }
#results .results-shell {
  position: relative;
  width: min(1120px, 100%);
  height: min(730px, calc(100dvh - 28px));
  max-height: none;
  overflow: hidden;
  padding: 20px 22px 18px;
  gap: 13px;
  background: rgba(10, 14, 20, 0.98);
  border-color: rgba(255, 255, 255, 0.11);
}
#results .res-head { min-height: 61px; flex: 0 0 auto; justify-content: space-between; padding: 0 0 12px; border-bottom-color: rgba(255, 255, 255, 0.08); }
.res-title-block { min-width: 0; }
.res-title-line { display: flex; align-items: center; gap: 11px; min-width: 0; }
.res-title-line h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 28px; }
.res-meta { display: block; margin-top: 4px; font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); }
.res-quick-progress { width: min(260px, 34vw); display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4px 12px; }
.res-quick-progress > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
.res-quick-progress > b { font: 800 14px var(--mono); color: var(--text); }
.res-quick-progress > i { grid-column: 1 / 3; display: block; height: 4px; overflow: hidden; border-radius: 5px; background: var(--s1); }
.res-quick-progress > i > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }

.results-grid { min-height: 0; flex: 1; display: grid; grid-template-columns: minmax(330px, 0.82fr) minmax(0, 1.35fr); gap: 14px; }
.res-primary,
.res-explore { min-height: 0; border: 1px solid rgba(255, 255, 255, 0.085); border-radius: 14px; background: rgba(255, 255, 255, 0.022); }
.res-primary { display: flex; flex-direction: column; gap: 10px; padding: 15px; }
#results .res-score-wrap { flex: 0 0 auto; text-align: left; padding: 0 2px 3px; }
#results .res-score { font-size: clamp(54px, 7.4vh, 74px); line-height: 0.95; letter-spacing: -0.055em; }
#results .res-score-label { margin-top: 5px; font-size: 9px; }
#results .res-delta { margin-top: 5px; font-size: 10.5px; }
#results .res-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
#results .res-tile { min-height: 64px; padding: 9px 10px; text-align: left; background: rgba(255, 255, 255, 0.032); }
#results .res-tile-val { font-size: 20px; }
#results .res-tile-label { margin-top: 4px; font-size: 8.5px; letter-spacing: 0.09em; }
.res-coach { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; margin-top: auto; padding: 12px; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border)); border-radius: 11px; background: color-mix(in srgb, var(--accent) 6%, rgba(255, 255, 255, 0.018)); }
.res-coach-mark { position: relative; width: 27px; height: 27px; border: 1px solid var(--accent); border-radius: 50%; }
.res-coach-mark::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.res-coach-label { font-size: 8.5px; font-weight: 800; letter-spacing: 0.17em; text-transform: uppercase; color: var(--accent); }
.res-coach h3 { margin: 3px 0 4px; font-size: 14px; color: var(--text); }
.res-coach p { font-size: 11px; line-height: 1.42; color: var(--text-dim); }
.res-coach-cue { display: block; margin-top: 6px; font-size: 10px; font-weight: 700; color: var(--text-faint); }
#results .res-adaptive { margin-top: 0; }
#results .adaptive-block { gap: 7px; padding: 11px 12px; border: 1px solid color-mix(in srgb, var(--accent-2) 25%, var(--border)); border-radius: 11px; background: color-mix(in srgb, var(--accent-2) 5%, rgba(255, 255, 255, 0.015)); }
.adaptive-result-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 9px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-2); }
.adaptive-result-head b { font: 800 11px var(--mono); color: var(--text); }
.adaptive-result-facts { display: flex; flex-wrap: wrap; gap: 5px 12px; font-size: 9.5px; color: var(--text-faint); }
.adaptive-result-facts b { font-family: var(--mono); color: var(--text); }
#results .adaptive-note { font-size: 9.5px; line-height: 1.4; }

.res-explore { display: flex; flex-direction: column; overflow: hidden; }
.res-tabs { flex: 0 0 42px; display: flex; gap: 3px; align-items: center; padding: 5px; border-bottom: 1px solid var(--border); background: rgba(0, 0, 0, 0.12); }
.res-tabs button { flex: 1; height: 31px; color: var(--text-faint); border: 0; border-radius: 8px; background: transparent; font: 750 10px var(--font); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.res-tabs button:hover { color: var(--text); background: rgba(255, 255, 255, 0.035); }
.res-tabs button.active { color: var(--text); background: rgba(255, 255, 255, 0.075); box-shadow: inset 0 -2px 0 var(--accent); }
.res-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.res-pane { min-height: 0; flex: 1; padding: 13px; overflow: hidden; }
.res-pane.active { animation: resultPaneIn 0.18s var(--ease); }
@keyframes resultPaneIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.res-pane-empty { height: 100%; display: grid; place-items: center; text-align: center; padding: 30px; color: var(--text-faint); font-size: 12px; }
#results .res-detail { height: 100%; display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 9px; }
#results .res-detail > .chart { min-height: 0; }
#results .chart { min-height: 0; padding: 11px 12px; gap: 6px; overflow: hidden; }
#results .chart-title { flex: 0 0 auto; font-size: 9px; }
#results .chart-meta { font-size: 9px; }
#results .chart-body { min-height: 0; flex: 1; display: grid; place-items: center; }
#results .chart-svg { width: 100%; max-height: 112px; }
.res-aim-row { min-height: 0; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(160px, 0.6fr); gap: 9px; }
#results .res-advanced { max-height: 198px; margin-bottom: 9px; padding: 11px 12px; gap: 8px; overflow: hidden; }
#results .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
#results .metric { padding: 8px 9px; }
#results .metric-val { font-size: 17px; }
#results .metric-note { display: none; }
#results .metric-grid .metric:nth-child(n + 4),
#results .flick-dirs { display: none; }
#results .flick-split { gap: 5px; }
#results .res-aim { min-height: 0; padding: 11px 12px; gap: 7px; overflow: hidden; }
#results .aim-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
#results .aim-tile { min-width: 0; padding: 7px; }
#results .aim-tile:nth-child(n + 4),
#results .aim-career { display: none; }
#results #chart-heatmap,
#results #chart-reaction { min-height: 0; }
#results .res-aim-row:has(#res-aim:not(.hidden)) #chart-reaction { display: none; }
#results .heat-svg { max-height: 145px; }
#results .res-trend { gap: 8px; }
#results .trend-svg { height: 155px; }
#results .res-sens { margin-top: 10px; }
#results .res-sens .sens-box { max-height: 190px; overflow: hidden; }
#results .res-sens .sens-row:nth-child(n + 4) { display: none; }
.results-actions { flex: 0 0 auto; min-height: 42px; align-items: center; }
.results-actions .btn { min-height: 40px; padding: 9px 17px; font-size: 12.5px; }
#btn-quick-next { margin-left: auto; }
.results-actions:has(#btn-quick-next.hidden) #btn-retry { margin-left: auto; }

.hud-adaptive { padding: 6px 9px; border: 1px solid color-mix(in srgb, var(--accent-2) 28%, transparent); border-radius: 999px; background: rgba(6, 9, 14, 0.7); backdrop-filter: blur(8px); transition: color 0.2s var(--ease), border-color 0.2s var(--ease); }
.hud-adaptive.is-harder { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.hud-adaptive.is-easier { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); }

@media (max-height: 670px) and (min-width: 761px) {
  #results .results-shell { padding: 14px 17px; gap: 9px; }
  #results .res-head { min-height: 50px; padding-bottom: 8px; }
  .res-title-line h2 { font-size: 23px; }
  #results .res-score { font-size: 49px; }
  #results .res-tile { min-height: 53px; padding: 7px 9px; }
  .res-coach { padding: 9px; }
  .res-coach p { display: none; }
  #results .adaptive-note { display: none; }
  #results .res-detail { grid-template-rows: 1fr; }
  #results #chart-pace { display: none; }
}

@media (max-width: 760px) {
  .corner-btn-primary { order: -1; }
  #quick-session { padding: 8px; }
  .quick-shell { height: calc(100dvh - 16px); }
  .quick-body { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0, 1fr); gap: 13px; padding: 15px; }
  .quick-body > section:first-child { grid-row: auto; }
  .quick-focus { grid-template-columns: repeat(2, 1fr); }
  .quick-focus button { min-height: 66px; padding: 10px; }
  .quick-focus button small { display: none; }
  .quick-plan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-foot p { display: none; }

  #results { padding: 7px; }
  #results .results-shell { height: calc(100dvh - 14px); padding: 12px; gap: 8px; }
  .results-grid { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 8px; }
  .res-primary { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 7px; padding: 9px; }
  #results .res-score-wrap { align-self: center; }
  #results .res-score { font-size: 42px; }
  #results .res-stats { grid-template-columns: repeat(2, 1fr); }
  #results .res-tile { min-height: 46px; padding: 6px 8px; }
  #results .res-tile-val { font-size: 16px; }
  .res-coach { display: none; }
  #results .res-adaptive { grid-column: 1 / 3; }
  .res-quick-progress { display: none; }
  .res-title-line h2 { font-size: 21px; }
  .res-title-line .badge { display: none; }
  #results .res-meta { max-width: 90vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .results-actions .btn { flex: 1; min-width: 0; padding-left: 8px; padding-right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .res-pane.active { animation: none; }
}

/* ---- Library and session QOL ----------------------------------------- */

.skill-filters {
  display: flex;
  gap: 5px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.skill-filters::-webkit-scrollbar { display: none; }
.skill-filter {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 5px 10px;
  color: var(--text-ghost);
  border: 1px solid transparent;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  font: 700 9.5px var(--font);
  cursor: pointer;
}
.skill-filter:hover { color: var(--text-dim); background: rgba(255, 255, 255, 0.05); }
.skill-filter.active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent-2) 26%, transparent);
  background: color-mix(in srgb, var(--accent-2) 10%, rgba(255, 255, 255, 0.02));
}
.skill-filter:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 1px; }

.kv-row { grid-template-columns: 16px minmax(0, 1fr) 32px auto; }
.kv-favorite,
.hero-favorite {
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--text-ghost);
  border: 0;
  background: transparent;
  cursor: pointer;
}
.kv-favorite { width: 32px; height: 32px; border-radius: 8px; font-size: 17px; }
.kv-favorite:hover { color: var(--warn); background: rgba(255, 255, 255, 0.055); }
.kv-favorite.active,
.hero-favorite.active { color: var(--warn); }
.kv-favorite:focus-visible,
.hero-favorite:focus-visible { outline: 2px solid var(--warn); outline-offset: 1px; }

.hero-title-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hero-title-row .hero-name { min-width: 0; }
.hero-favorite {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(8, 11, 16, 0.45);
  font-size: 21px;
}
.hero-favorite:hover { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, var(--border)); }
.hero-explanation {
  display: block;
  max-width: 62ch;
  padding: 8px 10px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 48%, transparent);
  border-radius: 0 8px 8px 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 82%);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-dim);
}
.hero-explanation > span {
  display: inline-block;
  margin-right: 9px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.hero-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.hero-tags > span {
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(8, 11, 16, 0.38);
  font-size: 9px;
  color: var(--text-faint);
}

.menu-tab { min-height: 30px; }
.corner-btn::before { content: none; display: none; }

button {
  max-width: 100%;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  transform: none !important;
  box-shadow: none;
}
.btn,
.corner-btn,
.settings-close,
.settings-reset,
.seg-btn,
.menu-tab,
.skill-filter,
.ch-preset {
  text-overflow: ellipsis;
}
.seg-btn { min-height: 36px; }
.results-actions .btn {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.finder-mode-btn:focus-visible,
.finder-preset:focus-visible,
.resume-sessions button:focus-visible,
.side-sens:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.quick-time button:hover { color: var(--text); border-color: var(--border-strong); background: rgba(255, 255, 255, 0.055); }
.quick-focus button:focus-visible,
.quick-time button:focus-visible,
.settings-tab:focus-visible {
  outline-width: 1px;
  outline-offset: 1px;
}

.resume-sessions {
  position: absolute;
  top: 74px;
  left: clamp(30px, 5vw, 76px);
  right: clamp(30px, 5vw, 76px);
  z-index: 3;
  display: flex;
  gap: 8px;
  max-width: 820px;
}
.resume-sessions button {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  min-width: 0;
  flex: 1 1 0;
  padding: 10px 12px 10px 15px;
  text-align: left;
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: 10px;
  background: rgba(8, 11, 16, 0.82);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(12px);
  cursor: pointer;
}
.resume-sessions button::after { content: "Resume →"; grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 10px; color: var(--accent); }
.resume-sessions button:hover { border-color: color-mix(in srgb, var(--accent) 48%, var(--border)); transform: translateY(-1px); }
.resume-sessions button > span { grid-column: 1; font-size: 8.5px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-ghost); }
.resume-sessions button > b { grid-column: 1; overflow: hidden; font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; }
.resume-sessions button > small { grid-column: 1 / -1; overflow: hidden; font-size: 9.5px; color: var(--text-faint); white-space: nowrap; text-overflow: ellipsis; }

/* A section reset lives with the section it affects, away from progress/data. */
.settings-pane-head { position: relative; padding-right: 160px; }
.settings-reset {
  position: absolute;
  top: 0;
  right: 0;
  min-height: 34px;
  padding: 7px 11px;
  color: var(--text-faint);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  font: 700 10.5px var(--font);
  cursor: pointer;
}
.settings-reset:hover { color: var(--text); border-color: var(--border-strong); }
.settings-reset:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The action dock is outside the result panes, so it stays available while the
   run/aim/history content swaps above it. */
.results-actions {
  gap: 8px;
  padding: 8px 9px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(8, 11, 16, 0.82);
  box-shadow: 0 -12px 34px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(12px);
}
.results-action-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin-right: auto; padding-left: 4px; }
.results-action-copy > span { font-size: 11.5px; font-weight: 800; color: var(--text); }
.results-action-copy > small { overflow: hidden; font-size: 9.5px; color: var(--text-faint); white-space: nowrap; text-overflow: ellipsis; }
#btn-quick-next { margin-left: 0; }
.results-actions:has(#btn-quick-next.hidden) #btn-retry { margin-left: 0; }

@media (max-width: 1180px) {
  .resume-sessions { left: 30px; right: 30px; }
  .resume-sessions button > small { display: none; }
}

@media (max-width: 900px) {
  .resume-sessions { top: 58px; left: 22px; right: 22px; overflow-x: auto; scrollbar-width: none; }
  .resume-sessions::-webkit-scrollbar { display: none; }
  .resume-sessions button { flex: 0 0 min(280px, 80vw); }
  .hero-explanation, .hero-tags { display: none; }
}

@media (max-width: 760px) {
  .resume-sessions { top: 52px; left: 13px; right: 13px; }
  .resume-sessions button { padding: 8px 10px 8px 12px; }
  .resume-sessions button > span { display: none; }
  .hero-favorite { width: 32px; height: 32px; }
  .settings-pane-head { padding-right: 0; }
  .settings-reset { position: static; margin-top: 12px; }
  .results-action-copy { display: none; }
  .results-actions { padding: 6px; }
}

/* Keep the actual trainer navigation visible on compact laptops and embedded
   previews. The old breakpoint stacked the library below a half-height hero,
   which made the launch controls overlap the progress buttons around 880px. */
@media (min-width: 721px) and (max-width: 900px) {
  .menu {
    grid-template-columns: 292px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }
  .lab-side {
    order: 1;
    min-height: 0;
    border-top: 0;
    border-right: 1px solid var(--border);
  }
  .lab-main {
    order: 2;
    justify-content: center;
    min-height: 0;
    padding: 68px 24px 66px;
  }
  .lab-brand { min-height: 68px; padding: 14px 18px; }
  .brand-mark { width: 27px; height: 27px; flex-basis: 27px; }
  .brand-mark::before { height: 35px; }
  .brand-mark::after { width: 35px; }
  .lab-brand h1 { font-size: 21px; }
  .lab-brand-sub { display: none; }
  .lab-library-head { padding: 14px 18px 9px; }
  .lab-tools { padding: 0 18px 9px; gap: 7px; }
  .kv-search { height: 38px; }
  .kv-list { padding: 5px 10px 8px; }
  .kv-row { min-height: 39px; padding: 5px 8px; gap: 7px; }
  .kv-group { margin-top: 5px; }
  .lab-side-foot { padding: 8px 16px; min-height: 36px; }

  .lab-corner { top: 14px; right: 16px; gap: 5px; }
  .corner-btn { min-height: 36px; padding: 7px 10px; font-size: 10.5px; }
  .corner-icon { width: 12px; height: 12px; }
  .lab-hero { width: 100%; gap: 9px; }
  .hero-info { grid-template-columns: minmax(0, 1fr); }
  .hero-art, .hero-explanation, .hero-tags { display: none; }
  .hero-copy { gap: 8px; padding: 10px 12px 10px 15px; }
  .hero-name { font-size: clamp(38px, 6vw, 52px); }
  .hero-blurb { font-size: 12.5px; line-height: 1.5; -webkit-line-clamp: 2; }
  .hero-meta { gap: 10px; margin: 0; }
  .hero-actions { width: 100%; padding: 7px; gap: 7px; }
  .kv-play { min-width: 178px; padding: 11px 13px; }
  .kv-play .play-copy { font-size: 13px; }
  .kv-play .play-hint { font-size: 8.5px; }
  .hero-options { gap: 5px; }
  .hero-actions .seg { min-height: 34px; padding: 3px; }
  .hero-actions .seg { width: 100%; }
  .hero-actions .seg-label { display: none; }
  .hero-actions .seg .seg-btn { flex: 1; min-height: 30px; padding: 5px 8px; font-size: 10.5px; }
  .lab-progress-dock { left: 16px; right: 16px; bottom: 12px; }
  .lab-progress-dock > .side-sens {
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(8, 11, 16, 0.72);
  }
}

/* Phones and very narrow windows use one scrollable flow. Nothing is allowed
   to overlap just because the aim trainer itself needs a desktop mouse. */
@media (max-width: 720px) {
  .menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .lab-main {
    order: 1;
    flex: 0 0 auto;
    min-height: 520px;
    padding: 62px 14px 64px;
  }
  .lab-side {
    order: 2;
    flex: 0 0 680px;
    min-height: 680px;
    border-top: 1px solid var(--border);
    border-right: 0;
  }
  .settings-grid { columns: 1; column-gap: 0; }
  .settings-grid .set-group { width: 100%; margin-bottom: 14px; }
  .lab-progress-dock > .side-sens {
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(8, 11, 16, 0.72);
  }
  .lab-hero { width: 100%; }
  .hero-actions { width: 100%; }
  .kv-play { flex: 1 1 44%; }
  .hero-options { flex: 1 1 56%; }
  .menu-tab, .skill-filter { min-height: 32px; }
  .kv-favorite { width: 34px; height: 34px; }
}

/* ============================================================
   Settings repair + community library foundation
   ============================================================ */

.library-source-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
}
.library-source-tab {
  min-width: 0;
  min-height: 31px;
  padding: 6px 9px;
  color: var(--text-faint);
  border: 0;
  border-radius: 7px;
  background: transparent;
  font: 750 11px var(--font);
  cursor: pointer;
}
.library-source-tab:hover { color: var(--text); background: rgba(255, 255, 255, 0.045); }
.library-source-tab.active { color: var(--text); background: var(--s2); box-shadow: 0 1px 7px rgba(0, 0, 0, 0.2); }
.library-source-tab span {
  margin-left: 4px;
  padding: 2px 4px;
  color: var(--accent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  font: 800 7px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.library-source-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Remove the legacy CSS-column layout completely. It was still winning over
   the later grid breakpoints, which caused uneven cards and broken phone tabs. */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  column-count: auto;
  column-gap: 18px;
}
.settings-grid .set-group { width: auto; margin-bottom: 0; }
.settings-tab-icon { position: relative; overflow: hidden; }
.settings-tab-icon::before,
.settings-tab-icon::after { content: ""; position: absolute; }
.settings-icon-controls::before {
  left: 7px;
  top: 9px;
  width: 14px;
  height: 1px;
  background: currentColor;
  box-shadow: 0 5px 0 currentColor, 0 10px 0 currentColor;
}
.settings-icon-controls::after {
  left: 11px;
  top: 7px;
  width: 3px;
  height: 3px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 5px 5px 0 -1px var(--bg), 5px 5px 0 0 currentColor, -2px 10px 0 -1px var(--bg), -2px 10px 0 0 currentColor;
}
.settings-icon-gameplay::before {
  left: 11px;
  top: 8px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid currentColor;
}
.settings-icon-crosshair::before { left: 7px; right: 7px; top: 14px; height: 1px; background: currentColor; }
.settings-icon-crosshair::after { top: 7px; bottom: 7px; left: 14px; width: 1px; background: currentColor; }
.settings-icon-data::before { left: 8px; top: 7px; width: 12px; height: 15px; border: 1px solid currentColor; border-radius: 2px; }
.settings-icon-data::after { left: 11px; top: 11px; width: 6px; height: 1px; background: currentColor; box-shadow: 0 4px 0 currentColor, 0 8px 0 currentColor; }


@media (max-width: 900px) {
  .settings-grid { grid-template-columns: minmax(0, 1fr); }
  .set-group-wide { grid-column: auto; display: flex; }
}

@media (max-width: 680px) {
  .settings-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
    padding: 7px;
    overflow: visible;
    scrollbar-width: none;
  }
  .settings-tab {
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 42px;
    padding: 7px 3px;
    text-align: center;
  }
  .settings-tab-icon,
  .settings-tab small { display: none; }
  .settings-tab b { overflow: hidden; font-size: 10.5px; white-space: nowrap; text-overflow: ellipsis; }
  .settings-tab.active { box-shadow: inset 0 -2px 0 var(--accent); }
  .settings-grid { display: grid; grid-template-columns: minmax(0, 1fr); column-count: auto; }
  .setting { grid-template-columns: minmax(0, 1fr) minmax(126px, 48%); }

}

/* ---- Studio ------------------------------------------------------------
   Instruments over the range. The overlay itself does not paint and does not
   catch pointer events, so the live preview stays visible and unobstructed
   between the two glass cards — the drill is judged by watching it. */
/* `.overlay.studio`, not `.studio`. Every other overlay is a reading surface
   over a frozen scene, so `.overlay:not(.menu)` gives them all an 18px backdrop
   blur and an 82%-opaque ground. The Studio is the one overlay whose whole
   purpose is watching what is behind it, and at (0,1,0) a bare `.studio`
   selector loses to that (0,2,0) rule — which is why the preview stayed blurred
   and dimmed no matter what the cards did. Matching its specificity is the fix. */
.overlay.studio {
  display: block;
  padding: 0;
  background: none;
  backdrop-filter: none;
  pointer-events: none;
}
.studio > * { pointer-events: auto; }
.studio::before {
  /* Just enough ground for the title bar to read against. Kept shallow and off
     the middle of the screen: this is a preview surface, and every pixel of
     scrim is a pixel of the drill you cannot judge. */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 8, 12, 0.66), transparent 13%);
}
.studio-bar {
  position: absolute;
  top: 22px;
  left: clamp(20px, 3vw, 34px);
  right: clamp(20px, 3vw, 34px);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  z-index: 2;
}
.studio-titles h2 { margin-top: 4px; font-family: var(--display); font-size: 27px; line-height: 1; }
.studio-bar-actions { display: flex; align-items: center; gap: 8px; }
.studio-bar { transition: opacity 0.16s var(--ease); }

.studio-card {
  position: absolute;
  top: 92px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: 15px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  /* Opaque, NOT blurred glass. Everywhere else in the app a blurred panel sits
     over a static backdrop; here it sits over the thing you are editing, and a
     14px blur turned the live preview into a smear you could not read a change
     from. Solid is honest: it hides a strip cleanly instead of smearing it. */
  background: rgba(8, 11, 17, 0.95);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.035);
  scrollbar-width: thin;
  transition: opacity 0.16s var(--ease);
}

/* While a value is being scrubbed, the panels drop out of the way so the change
   lands somewhere you can actually see it. This is the whole point of putting
   the editor over the range rather than in a dialog. */
.studio.is-scrubbing .studio-card,
.studio.is-scrubbing .studio-bar { opacity: 0.09; pointer-events: none; }

/* Focus mode: hide the panels entirely and judge the drill full-screen. */
.studio.is-focus .studio-card { opacity: 0; pointer-events: none; }
.studio.is-focus::before { opacity: 0; }
.studio-focus-btn { position: relative; z-index: 3; }
.studio.is-focus .studio-bar { opacity: 0.55; }
.studio.is-focus .studio-bar:hover { opacity: 1; }
.studio-list-card { left: clamp(20px, 3vw, 34px); width: clamp(230px, 20vw, 280px); }
.studio-inspector-card { right: clamp(20px, 3vw, 34px); width: clamp(320px, 26vw, 392px); }

.st-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.st-count { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.st-list { list-style: none; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.st-row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: 8px 10px;
  text-align: left;
  color: var(--text-dim);
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
}
.st-row:hover { background: var(--s2); color: var(--text); }
.st-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.st-row.is-active { color: var(--text); background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 2px 0 0 var(--accent); }
.st-row-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mc, var(--accent)); }
.st-row-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-row-meta { font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; color: var(--text-ghost); }
.st-empty { font-size: 11.5px; line-height: 1.55; color: var(--text-faint); padding: var(--sp-2) 0; }
.st-list-foot { display: flex; flex-direction: column; gap: 5px; }

.st-inspector-head { display: flex; flex-direction: column; gap: 5px; }
.st-name {
  width: 100%;
  padding: 9px 11px;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: 9px;
}
.st-name:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.st-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.st-group-title {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-ghost);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--border);
}
.st-field { display: flex; flex-direction: column; gap: 5px; }
.st-field-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.st-field-label b { font-family: var(--mono); font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--text); font-variant-numeric: tabular-nums; }
.st-field-label small { font-size: 9px; letter-spacing: 0.06em; text-transform: none; color: var(--text-ghost); font-weight: 600; }
.st-field select,
.st-field textarea,
.st-field input[type="color"] {
  width: 100%;
  padding: 7px 9px;
  font: inherit;
  font-size: 12.5px;
  color: var(--text);
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.st-field textarea { resize: vertical; line-height: 1.5; }
.st-field input[type="color"] { height: 32px; padding: 3px; cursor: pointer; }
.st-field input[type="range"] { width: 100%; }
.st-field-toggle { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-3); cursor: pointer; }
.st-field-toggle .st-field-label { flex-direction: column; align-items: flex-start; gap: 2px; }

.st-warnings { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--warn) 8%, transparent); box-shadow: inset 2px 0 0 var(--warn); }
.st-warnings:empty { display: none; }
.st-warnings span { font-size: 11.5px; line-height: 1.5; color: var(--text-dim); }

/* Unsaved-changes marker. Amber, because it is a state to resolve, not an error. */
.st-dirty {
  align-self: flex-start;
  padding: 3px 9px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 34%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--warn) 10%, transparent);
}

.st-dup { gap: 4px; }
.st-dup select { width: 100%; padding: 6px 8px; font: inherit; font-size: 12px; color: var(--text); background: var(--s2); border: 1px solid var(--border); border-radius: 8px; }

/* Weighted target mix */
.st-mix { display: flex; flex-direction: column; gap: 5px; }
.st-mix-row { display: grid; grid-template-columns: minmax(0, 1fr) 58px 28px; gap: 5px; align-items: center; }
.st-mix-row select,
.st-mix-row input { padding: 6px 8px; font: inherit; font-size: 12px; color: var(--text); background: var(--s2); border: 1px solid var(--border); border-radius: 8px; }
.st-mix-row input { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: center; }
.st-mix-drop {
  display: grid;
  place-items: center;
  height: 30px;
  font-size: 15px;
  line-height: 1;
  color: var(--text-faint);
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}
.st-mix-drop:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.st-mix-drop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.st-mix-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }
.st-mix-odds { font-family: var(--mono); font-size: 9.5px; color: var(--text-ghost); font-variant-numeric: tabular-nums; }

.st-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.st-actions .btn-primary { grid-column: 2; }
.st-actions .btn-ghost { grid-column: 1 / -1; }
.st-note { font-size: 10.5px; line-height: 1.55; color: var(--text-ghost); }

.studio-status {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  max-width: min(520px, 60vw);
  padding: 9px 15px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  background: rgba(6, 9, 14, 0.72);
  backdrop-filter: blur(8px);
}
.studio-status:empty { display: none; }
.studio-status.is-error { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }

@media (max-width: 900px) {
  /* Below this the range is too small to judge a drill against, so the editor
     stops being an overlay and becomes an ordinary scrolling document: the two
     cards stack full-width and the preview is no longer the point. */
  .studio { overflow-y: auto; pointer-events: auto; display: block; padding: 0; }
  .studio::before { display: none; }
  .studio-bar { position: static; padding: 18px 16px 0; }
  /* Two-class selectors so these beat .studio-list-card / .studio-inspector-card,
     which set their own width at equal specificity. */
  /* An explicit width, not `auto`: these cards are flex containers whose
     auto-size resolved to shrink-to-fit here, leaving them ~220px in a 375px
     viewport. min() keeps them off the edges without a margin that can overflow. */
  .studio .studio-card {
    position: static;
    width: min(100% - 32px, 620px);
    max-width: none;
    margin: 12px auto;
    max-height: none;
  }
  .studio .studio-status { position: static; transform: none; margin: 0 16px 16px; max-width: none; }
}