:root {
  --ink: #f1ede6;
  --muted: #aaa69f;
  --dim: #777a83;
  --bg: #0b0c10;
  --panel: rgba(19, 20, 26, 0.78);
  --panel-strong: rgba(18, 19, 24, 0.97);
  --line: rgba(255, 255, 255, 0.1);
  --cyan: #62f6e8;
  --cyan-2: #23b9c8;
  --violet: #a78bfa;
  --coral: #ff6577;
  --gold: #ffd166;
  --ui-accent: #d78a5e;
  --ui-accent-light: #efc49d;
  --ui-surface: #1a1b21;
  --ui-surface-hover: #23242b;
  --shadow-cyan: 0 0 28px rgba(98, 246, 232, 0.25);
  --font-display: Bahnschrift, "Aptos Display", "Segoe UI", sans-serif;
  --font-ui: Aptos, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --guest-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8.2' r='3.7'/%3E%3Cpath d='M4.9 20.2c0-3.7 3.2-6.1 7.1-6.1s7.1 2.4 7.1 6.1z'/%3E%3C/svg%3E");
}

* {
  box-sizing: border-box;
  scrollbar-color: #a66e4e rgba(13, 13, 17, 0.8);
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  border: 1px solid rgba(98, 246, 232, 0.07);
  border-radius: 999px;
  background: rgba(7, 10, 20, 0.72);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.48);
}

*::-webkit-scrollbar-thumb {
  min-height: 34px;
  border: 2px solid rgba(7, 10, 20, 0.9);
  border-radius: 999px;
  background: linear-gradient(180deg, #d99569, #8c5a40);
  box-shadow: inset 0 0 5px rgba(255,255,255,0.2);
}

*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #e8aa7e, #a56849);
  box-shadow: inset 0 0 6px rgba(255,255,255,0.25);
}

*::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, #d8ccff, var(--violet));
}

*::-webkit-scrollbar-corner { background: transparent; }
*::-webkit-scrollbar-button { display: none; }

.modal-panel,
.screen--start,
.upgrade-list,
.owned-upgrade-list {
  scrollbar-gutter: stable;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
}

button { font: inherit; }

button {
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

button:focus { outline: none; }

body.keyboard-navigation button:focus-visible {
  outline: 2px solid #e7b06f;
  outline-offset: 3px;
}

#game-shell {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  position: relative;
  width: 100%;
  height: 100%;
  height: 100dvh;
  min-height: 0;
  isolation: isolate;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  background:
    radial-gradient(circle at 50% 45%, rgba(33, 52, 78, 0.24), transparent 43%),
    #060710;
}

#game-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}

@media (pointer: fine) {
  #game-canvas { cursor: none; }
}

.vignette,
.scanlines {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.vignette { box-shadow: inset 0 0 160px 28px rgba(0, 0, 0, 0.62); }

.scanlines {
  opacity: 0.15;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 3px, rgba(255,255,255,0.035) 4px);
  mix-blend-mode: soft-light;
}

.glass,
.glass-strong {
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 16px 45px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.glass-strong { background: var(--panel-strong); }

.is-hidden { display: none !important; }

/* A glitch hiding behind a panel is a threat you cannot see, so the panel gives way just enough
   to show it while staying readable itself. Shards never trigger this — they slide out from under
   the interface instead. !important is deliberate: it has to win against each panel's own
   opacity and hover states. */
.is-glitch-behind {
  opacity: 0.45 !important;
  transition: opacity 200ms ease;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* HUD */
.hud {
  position: absolute;
  z-index: 5;
  top: max(18px, env(safe-area-inset-top));
  left: max(18px, env(safe-area-inset-left));
  right: calc(max(18px, env(safe-area-inset-right)) + 163px);
  width: min(
    1180px,
    calc(100% - max(18px, env(safe-area-inset-left)) - max(18px, env(safe-area-inset-right)) - 163px)
  );
  max-width: 1180px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr minmax(260px, 0.75fr) 1fr;
  gap: 12px;
  align-items: start;
  pointer-events: none;
}

.hud-cluster {
  min-height: 62px;
  border-radius: 12px;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.hud-cluster--right { justify-content: flex-end; }

.hud-stat {
  display: flex;
  min-width: 56px;
  flex-direction: column;
  gap: 2px;
}

.hud-stat--score { min-width: 100px; align-items: flex-end; }
.hud-stat--health { min-width: 86px; }

.hud-label,
.record-label {
  color: var(--dim);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.2em;
  white-space: nowrap;
}

.hud-stat strong {
  font-family: var(--font-display);
  font-size: 23px;
  font-stretch: condensed;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: 0.04em;
}

.hud-stat--wide strong { color: var(--cyan); }
.hud-stat--score strong { color: #e9b382; }

.hud-divider { width: 1px; height: 30px; background: var(--line); }

.health-pip {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 3px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 8px var(--coral);
}

.level-track-wrap {
  min-height: 62px;
  padding: 13px 16px;
  border-radius: 12px;
}

.level-caption {
  display: flex;
  justify-content: space-between;
  margin-bottom: 9px;
  color: var(--dim);
  font-size: 8.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.16em;
}

.level-caption b { color: inherit; font: inherit; }
#aim-mode-hud { color: var(--cyan); font-style: normal; }
#aim-mode-hud[data-mode="manual"] { color: #c8b7ff; }

.level-track,
.boss-bar__track {
  position: relative;
  height: 7px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.07);
}

.level-track span,
.boss-bar__track span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan-2), var(--cyan));
  box-shadow: 0 0 14px rgba(98, 246, 232, 0.6);
  transition: width 160ms ease-out;
}

.corner-actions {
  position: absolute;
  z-index: 6;
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  display: flex;
  gap: 8px;
}

.icon-button {
  position: relative;
  display: grid;
  width: 45px;
  height: 45px;
  padding: 11px;
  place-items: center;
  border-radius: 12px;
  color: var(--muted);
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.icon-button:hover { color: var(--ink); border-color: rgba(239,196,157,0.34); background: rgba(255,255,255,0.045); }
.icon-button svg { display: block; width: 100%; height: 100%; fill: currentColor; shape-rendering: geometricPrecision; }
.icon-button--stroke svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-button .sound-off { display: none; }
#sound-toggle[aria-pressed="false"] .sound-on { display: none; }
#sound-toggle[aria-pressed="false"] .sound-off { display: block; }
#sound-toggle .sound-off path:first-child { fill: currentColor; stroke: none; }
#sound-toggle .sound-off path:last-child { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

.upgrade-count {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  min-width: 19px;
  height: 19px;
  padding: 0 4px;
  place-items: center;
  border: 2px solid var(--bg);
  border-radius: 99px;
  background: var(--ui-accent);
  color: #24120a;
  font-size: 8px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  box-shadow: 0 0 12px rgba(215,138,94,0.42);
  pointer-events: none;
}

.combo-display {
  position: absolute;
  z-index: 5;
  right: 32px;
  top: 112px;
  display: flex;
  opacity: 0;
  flex-direction: column;
  align-items: flex-end;
  transform: translateX(16px) scale(0.9);
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: none;
}

.combo-display.is-visible { opacity: 1; transform: translateX(0) scale(1); }
.combo-display span { color: var(--gold); font: 800 38px/0.9 var(--font-display); text-shadow: 0 0 20px rgba(255, 209, 102, 0.4); }
.combo-display small { margin-top: 6px; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: 0.24em; }

.boss-bar {
  --boss-color: var(--coral);
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: max(25px, env(safe-area-inset-bottom));
  width: min(480px, calc(100% - 40px));
  transform: translateX(-50%);
  pointer-events: none;
}

.boss-bar__header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  color: var(--boss-color);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.2em;
}

.boss-bar__track { height: 9px; border: 1px solid color-mix(in srgb, var(--boss-color) 32%, transparent); }
.boss-bar__track span { background: linear-gradient(90deg, color-mix(in srgb, var(--boss-color) 78%, #ffffff), var(--boss-color)); box-shadow: 0 0 18px color-mix(in srgb, var(--boss-color) 55%, transparent); }
.announcement {
  --announcement-gutter-left: max(16px, env(safe-area-inset-left));
  --announcement-gutter-right: max(16px, env(safe-area-inset-right));
  --announcement-accent: var(--cyan);
  position: absolute;
  z-index: 8;
  top: max(calc(env(safe-area-inset-top) + 92px), 108px);
  right: var(--announcement-gutter-right);
  left: var(--announcement-gutter-left);
  width: fit-content;
  max-width: min(560px, calc(100% - var(--announcement-gutter-left) - var(--announcement-gutter-right)));
  margin-inline: auto;
  padding: 9px 18px 10px;
  opacity: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  background: rgba(9, 11, 19, 0.78);
  color: #f4efe6;
  font: 800 clamp(13px, 1.5vw, 17px)/1.05 var(--font-display);
  letter-spacing: 0.13em;
  text-align: center;
  text-shadow: none;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  pointer-events: none;
}

.announcement::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--announcement-accent), transparent);
  content: "";
}

.announcement small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font: 700 9px/1.4 var(--font-ui);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.announcement.is-anomaly {
  --announcement-accent: var(--coral);
  border-color: rgba(255, 101, 119, 0.24);
  color: #ffd9dd;
}

.announcement.is-anomaly small { color: #ff9eaa; }
.announcement.is-showing { animation: announce var(--announcement-duration, 2.6s) cubic-bezier(0.22, 1, 0.36, 1) both; }

@keyframes announce {
  0% { opacity: 0; transform: translateY(-14px); }
  10%, 84% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-10px); }
}

/* Touch controls -------------------------------------------------------------
   The game is about surviving a minute, so the thumb controls are built out of
   watch parts instead of four matching glowing circles: a tick bezel you steer,
   an open reticle you aim through, a stopwatch pusher you hold down, and a rim
   that sweeps back around before you can skip again. Shape carries the meaning,
   because none of this gets read while something is chasing you.
   -------------------------------------------------------------------------- */

.dash-button,
.sprint-button {
  position: absolute;
  z-index: 7;
  bottom: max(24px, env(safe-area-inset-bottom));
  display: none;
  padding: 0;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

/* Sprint is the only control that is not round: a held switch you find by feel,
   with the stamina it is spending draining down the body of the pusher. */
.sprint-button {
  --sprint-color: var(--violet);
  --sprint-charge: 1;
  right: max(108px, calc(env(safe-area-inset-right) + 108px));
  width: 62px;
  height: 76px;
  overflow: hidden;
  align-items: flex-end;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--sprint-color) 38%, transparent);
  border-radius: 15px;
  background: rgba(9, 11, 20, 0.88);
  color: color-mix(in srgb, var(--sprint-color) 88%, white);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sprint-color) 22%, transparent);
}

.sprint-button b {
  position: relative;
  z-index: 1;
  padding-bottom: 9px;
  font: 900 8px/1 var(--font-display);
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}

/* The chamber the column sits in, so a full meter still reads as a gauge. */
.sprint-button::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  pointer-events: none;
}

/* The column reads bottom-up like liquid in a tube, and the hairline on top of it
   is the only part that moves, so a glance at the meniscus is the whole story. */
#sprint-touch-fill {
  position: absolute;
  inset: auto 0 0;
  height: calc(var(--sprint-charge) * 100%);
  border-top: 1px solid color-mix(in srgb, var(--sprint-color) 72%, transparent);
  background: linear-gradient(color-mix(in srgb, var(--sprint-color) 26%, transparent), color-mix(in srgb, var(--sprint-color) 9%, transparent));
  transition: height 90ms linear;
  pointer-events: none;
}

.sprint-button.is-exhausted {
  border-color: rgba(255, 101, 119, 0.4);
  color: #ff92a0;
}

.sprint-button.is-exhausted #sprint-touch-fill {
  border-top-color: rgba(255, 101, 119, 0.6);
  background: linear-gradient(rgba(255, 101, 119, 0.2), rgba(255, 101, 119, 0.05));
}

.sprint-button:active { border-color: color-mix(in srgb, var(--sprint-color) 85%, transparent); }

/* Dash is momentary, so it stays round and wears its recharge on the rim:
   the arc empties clockwise like a hand coming back around to the top. */
.dash-button {
  --dash-charge: 0;
  right: max(22px, env(safe-area-inset-right));
  display: none;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid rgba(98, 246, 232, 0.3);
  border-radius: 50%;
  background: rgba(9, 14, 22, 0.88);
  color: var(--cyan);
}

.dash-mark {
  width: 22px;
  height: 22px;
  opacity: 0.9;
}

#dash-cooldown {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, currentColor 0 calc(var(--dash-charge) * 360deg), transparent 0);
  opacity: 0.8;
  -webkit-mask: radial-gradient(closest-side, transparent 0 91%, #000 92%);
  mask: radial-gradient(closest-side, transparent 0 91%, #000 92%);
  pointer-events: none;
}

.dash-button.is-queued {
  border-color: var(--gold);
  color: var(--gold);
}

.dash-button:active { border-color: rgba(98, 246, 232, 0.75); }

.mobile-controls {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: none;
  pointer-events: none;
}

.virtual-stick {
  --stick-size: 116px;
  --stick-angle: 0deg;
  --stick-force: 0;
  position: absolute;
  bottom: max(20px, calc(env(safe-area-inset-bottom) + 12px));
  width: var(--stick-size);
  height: var(--stick-size);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(14, 19, 32, 0.5), rgba(6, 9, 17, 0.66));
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.virtual-stick--move { left: max(18px, calc(env(safe-area-inset-left) + 12px)); color: var(--cyan); }
.virtual-stick--aim { right: max(18px, calc(env(safe-area-inset-right) + 12px)); color: #c8b7ff; }

/* Signature: the movement bezel is a minute dial. Sixty ticks with a longer mark
   every five, and the arc under your thumb lights up as you push, so the control
   tells you where you are steering without you having to look down at it. */
.virtual-stick--move .virtual-stick__ring {
  position: absolute;
  inset: 5px;
  border: 0;
  border-radius: 50%;
  opacity: 0.42;
  background: repeating-conic-gradient(from -0.5deg, currentColor 0 1deg, transparent 1deg 6deg);
  -webkit-mask: radial-gradient(closest-side, transparent 0 84%, #000 85%);
  mask: radial-gradient(closest-side, transparent 0 84%, #000 85%);
  pointer-events: none;
}

.virtual-stick--move .virtual-stick__ring::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(from -1.1deg, currentColor 0 2.2deg, transparent 2.2deg 30deg);
  -webkit-mask: radial-gradient(closest-side, transparent 0 74%, #000 75%);
  mask: radial-gradient(closest-side, transparent 0 74%, #000 75%);
}

.virtual-stick--move::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: conic-gradient(from calc(var(--stick-angle) + 72deg), currentColor 0 36deg, transparent 0);
  opacity: calc(var(--stick-force) * 0.55);
  -webkit-mask: radial-gradient(closest-side, transparent 0 89%, #000 90%);
  mask: radial-gradient(closest-side, transparent 0 89%, #000 90%);
  pointer-events: none;
}

/* Aim gets no ticks — nothing about aiming is measured in minutes. It is an open
   reticle with a hand that reaches out in the direction you are pointing. */
.virtual-stick--aim .virtual-stick__ring {
  position: absolute;
  inset: 7px;
  border: 0;
  border-radius: 50%;
  opacity: 0.34;
  /* Gaps sit at top, bottom, left and right: the bottom one clears the label,
     and the four openings are what make it read as a sight rather than a ring. */
  background: conic-gradient(from 12deg,
    currentColor 0 66deg, transparent 66deg 90deg,
    currentColor 90deg 156deg, transparent 156deg 180deg,
    currentColor 180deg 246deg, transparent 246deg 270deg,
    currentColor 270deg 336deg, transparent 336deg 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent 0 94%, #000 95%);
  mask: radial-gradient(closest-side, transparent 0 94%, #000 95%);
  pointer-events: none;
}

/* The hand: pinned at the pivot, reaching toward wherever the thumb is pointing. */
.virtual-stick--aim::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
  pointer-events: none;
}

.virtual-stick--aim::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--stick-force) * 34%);
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, currentColor 45%, transparent), currentColor);
  opacity: calc(var(--stick-force) * 0.95);
  transform-origin: 0 50%;
  transform: rotate(var(--stick-angle));
  pointer-events: none;
}

/* Movement rides a solid puck; aim looks through an open sight. */
.virtual-stick__knob {
  position: absolute;
  top: calc(50% + var(--stick-y, 0px));
  left: calc(50% + var(--stick-x, 0px));
  width: 44px;
  height: 44px;
  border: 1px solid color-mix(in srgb, currentColor 55%, transparent);
  border-radius: 50%;
  background: rgba(11, 16, 26, 0.95);
  transform: translate(-50%, -50%);
  transition: top 90ms ease-out, left 90ms ease-out;
  pointer-events: none;
}

.virtual-stick--move .virtual-stick__knob {
  background: radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--cyan) 22%, rgba(11, 16, 26, 0.95)), rgba(8, 12, 20, 0.96));
}

.virtual-stick--aim .virtual-stick__knob {
  width: 40px;
  height: 40px;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(200, 183, 255, 0.18);
}

.virtual-stick.is-active { border-color: color-mix(in srgb, currentColor 30%, transparent); }
.virtual-stick.is-active .virtual-stick__ring { opacity: 0.62; }
.virtual-stick.is-active .virtual-stick__knob { border-color: currentColor; transition: none; }

/* Engraved into the dial rather than floating under it. */
.virtual-stick__label {
  position: absolute;
  bottom: 15%;
  left: 50%;
  color: currentColor;
  opacity: 0.4;
  font: 900 7px/1 var(--font-display);
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  transform: translateX(-50%);
  transition: opacity 140ms ease;
  pointer-events: none;
}

/* The engraving is there to tell you which dial is which before you touch it.
   Once a thumb is on the stick it has done its job, and it would only be sitting
   under the knob anyway. */
.virtual-stick.is-active .virtual-stick__label { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .virtual-stick__knob,
  #sprint-touch-fill { transition: none; }
}

.sprint-meter {
  --sprint-color: var(--violet);
  position: absolute;
  z-index: 5;
  left: max(28px, env(safe-area-inset-left));
  bottom: max(26px, env(safe-area-inset-bottom));
  width: 188px;
  padding: 11px 13px;
  border-radius: 11px;
  pointer-events: none;
}

.sprint-meter__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.sprint-meter__header span { display: flex; align-items: center; gap: 6px; }
.sprint-meter__header i { width: 5px; height: 5px; border-radius: 50%; background: var(--sprint-color); box-shadow: 0 0 8px var(--sprint-color); }
.sprint-meter__header strong { color: color-mix(in srgb, var(--sprint-color) 78%, white); font-size: 8px; }

.stamina-track {
  position: relative;
  height: 5px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255,255,255,0.07);
}

.stamina-track span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--sprint-color) 62%, #382875), var(--sprint-color));
  box-shadow: 0 0 12px color-mix(in srgb, var(--sprint-color) 48%, transparent);
  transition: width 100ms linear, background 150ms ease;
}

.sprint-meter.is-exhausted .stamina-track span { background: var(--coral); box-shadow: 0 0 10px rgba(255,101,119,0.42); }

/* Screens */
.screen {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: none;
}

.screen.is-active { display: grid; }

#upgrade-screen:focus { outline: none; }

.screen--start {
  place-items: start center;
  padding: max(30px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(72px, calc(env(safe-area-inset-bottom) + 52px)) max(24px, env(safe-area-inset-left));
  background: linear-gradient(rgba(4, 6, 13, 0.88), rgba(4, 6, 13, 0.95));
}

.start-layout {
  width: min(468px, 100%);
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.menu-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(42px, 7vw, 64px);
  font-weight: 900;
  font-stretch: condensed;
  line-height: 1;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: #f2ede3;
  text-shadow: 0 10px 35px rgba(0, 0, 0, 0.55);
}

h1 em {
  font-style: normal;
  color: var(--ui-accent-light);
}

.menu-record {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--dim);
}

.menu-record span { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.menu-record small { font-size: 8px; font-weight: 800; letter-spacing: 0.22em; }
.menu-record strong { color: #e9b382; font: 800 21px/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.menu-record i { width: 1px; height: 30px; background: var(--line); }

.primary-button,
.secondary-button,
.danger-button {
  width: 100%;
  min-height: 58px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.035em;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}

.primary-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border: 1px solid #7c6250;
  background: var(--ui-surface);
  color: var(--ink);
  box-shadow: none;
}

.primary-button:hover { border-color: var(--ui-accent); background: var(--ui-surface-hover); }
.primary-button kbd { border-color: rgba(255,255,255,0.13); background: rgba(255,255,255,0.04); color: var(--muted); }

#start-button kbd {
  border-color: rgba(44,21,11,0.26);
  background: rgba(44,21,11,0.15);
  color: rgba(44,21,11,0.82);
  box-shadow: inset 0 -2px 0 rgba(44,21,11,0.14);
}

.secondary-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding: 0 17px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.025);
  color: var(--ink);
}

.secondary-button:hover { border-color: rgba(239,196,157,0.35); background: rgba(255,255,255,0.055); }
.secondary-button small { color: var(--muted); font-size: 10px; letter-spacing: 0.025em; }

.start-card {
  display: grid;
  width: 100%;
  gap: 10px;
}

.community-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.account-chip {
  display: flex;
  min-width: 0;
  min-height: 58px;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 8px 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.022);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.account-chip:hover { border-color: rgba(239,196,157,0.32); background: rgba(255,255,255,0.05); }

.account-chip__avatar {
  position: relative;
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 12px;
}

.account-chip__avatar[data-state="guest"] {
  border: 1px dashed rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.03);
}

.account-chip__avatar[data-state="guest"]::before {
  width: 21px;
  height: 21px;
  background: var(--dim);
  content: "";
  -webkit-mask: var(--guest-glyph) center / contain no-repeat;
  mask: var(--guest-glyph) center / contain no-repeat;
}

.account-chip__avatar::after {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 11px;
  height: 11px;
  border: 2px solid #0a0c14;
  border-radius: 50%;
  background: var(--dim);
  content: "";
}

.account-chip__avatar[data-state="online"]::after { background: #7ef0b0; box-shadow: 0 0 9px rgba(126,240,176,0.55); }
.account-chip__avatar[data-state="pending"]::after { background: var(--gold); box-shadow: 0 0 9px rgba(255,209,102,0.5); }
.account-chip__avatar .avatar-art { width: 40px; height: 40px; }

.account-chip__text { display: grid; min-width: 0; gap: 3px; }
.account-chip__text b { overflow: hidden; color: #efe9df; font-size: 13px; font-weight: 750; letter-spacing: 0.02em; text-overflow: ellipsis; white-space: nowrap; }
.account-chip__text small { overflow: hidden; color: var(--dim); font-size: 10px; font-weight: 600; letter-spacing: 0.01em; text-overflow: ellipsis; white-space: nowrap; }

.account-chip__cta {
  margin-left: auto;
  padding: 6px 10px;
  flex: 0 0 auto;
  border: 1px solid rgba(215,138,94,0.34);
  border-radius: 6px;
  background: rgba(215,138,94,0.1);
  color: var(--ui-accent-light);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.account-chip:hover .account-chip__cta { border-color: rgba(215,138,94,0.55); background: rgba(215,138,94,0.16); }

.rankings-button {
  display: flex;
  min-height: 58px;
  padding: 0 17px;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.022);
  color: var(--muted);
  cursor: pointer;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.13em;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}

.rankings-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.rankings-button:hover { border-color: rgba(239,196,157,0.32); background: rgba(255,255,255,0.05); color: var(--ink); }

.start-card .menu-action {
  --glyph-color: #9aa0b4;
  min-height: 68px;
  margin: 0;
  padding: 0 18px;
  justify-content: flex-start;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.022);
  text-align: left;
  box-shadow: none;
}

.menu-action__glyph {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--glyph-color);
  transition: background-color 140ms ease, color 140ms ease;
}

.menu-action__glyph svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#start-button {
  --glyph-color: #2c150b;
  position: relative;
  min-height: 84px;
  padding-inline: 18px 20px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid #e6a075;
  border-radius: 13px;
  background: linear-gradient(148deg, #dd8d5f 0%, #c9744a 58%, #bd6a42 100%);
  color: #2c150b;
  box-shadow: 0 16px 36px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.3);
  transition: filter 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

#start-button::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), transparent 46%),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 14px);
  content: "";
  pointer-events: none;
}

#start-button > * { position: relative; z-index: 1; }
#start-button strong { font-size: 16px; letter-spacing: 0.05em; }
#start-button .menu-action__copy small { color: rgba(44,21,11,0.7); }
#start-button .menu-action__glyph { background: rgba(44,21,11,0.14); }
#start-button .menu-action__end { margin-left: auto; }

@media (hover: hover) {
  #start-button:hover {
    border-color: #f6bd97;
    box-shadow: 0 18px 42px rgba(0,0,0,0.36), 0 0 34px rgba(215,138,94,0.22), inset 0 1px 0 rgba(255,255,255,0.34);
    filter: brightness(1.07);
  }
  #start-button:hover .menu-action__glyph { background: rgba(44,21,11,0.22); }
}

#start-button:active { filter: brightness(0.94); }
body.keyboard-navigation #start-button:focus-visible { outline: 3px solid #f4d9b3; outline-offset: 3px; }

.start-card .menu-action--daily { --glyph-color: #b3a8cc; }
.start-card .menu-action--continue { --glyph-color: #92c6a4; }
.start-card .menu-action--continue strong { color: #dae4d8; }

.start-card .menu-action--quiet {
  min-height: 54px;
  background: transparent;
  border-color: rgba(255,255,255,0.07);
}

.start-card .menu-action--quiet .menu-action__copy strong { color: var(--muted); font-size: 11.5px; }
.start-card .menu-action--quiet:hover .menu-action__copy strong { color: var(--ink); }

.start-card .menu-action:not(#start-button):hover {
  border-color: rgba(239,196,157,0.3);
  background-color: rgba(255,255,255,0.055);
}

.start-card .menu-action:not(#start-button):hover .menu-action__glyph { background: rgba(255,255,255,0.075); }
.start-card .menu-action:not(#start-button):active { background-color: rgba(255,255,255,0.03); }
.start-card .menu-action--continue:hover { border-color: rgba(146,198,164,0.42); }
.start-card .menu-action--daily:hover { border-color: rgba(179,168,204,0.42); }

.menu-divider {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 6px 0 2px;
  color: var(--dim);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.24em;
}

.menu-divider::before,
.menu-divider::after {
  height: 1px;
  flex: 1;
  background: rgba(255,255,255,0.08);
  content: "";
}

.mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

.mode-tile {
  --glyph-color: #9aa0b4;
  display: grid;
  min-height: 96px;
  padding: 13px 12px;
  align-content: start;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.022);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.mode-tile__glyph { margin-bottom: 7px; color: var(--glyph-color); line-height: 0; }
.mode-tile__glyph svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mode-tile strong { font-size: 11.5px; letter-spacing: 0.06em; }
.mode-tile small { overflow: hidden; color: var(--dim); font-size: 9.5px; font-weight: 700; letter-spacing: 0.02em; text-overflow: ellipsis; white-space: nowrap; }
.mode-tile:hover { border-color: rgba(239,196,157,0.3); background: rgba(255,255,255,0.055); }
.mode-tile:active { background: rgba(255,255,255,0.03); }
.mode-tile--daily { --glyph-color: #b3a8cc; }
.mode-tile--blitz { --glyph-color: #f0c05e; }
.mode-tile--gridlock { --glyph-color: #62f6e8; }
.mode-tile--daily:hover { border-color: rgba(179,168,204,0.42); }
.mode-tile--blitz:hover { border-color: rgba(240,192,94,0.42); }
.mode-tile--gridlock:hover { border-color: rgba(98,246,232,0.42); }

.menu-action__copy { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.menu-action strong,
.menu-action__copy strong { font-size: 13px; letter-spacing: 0.045em; }
.menu-action__copy small { color: var(--dim); font-size: 10px; font-weight: 700; letter-spacing: 0.025em; }
.menu-action__end { display: flex; margin-left: auto; align-items: center; gap: 12px; }
.menu-action__arrow {
  display: block;
  color: var(--dim);
  font-size: 17px;
  font-style: normal;
  font-weight: 600;
  transition: transform 160ms ease, color 160ms ease;
}

.start-card .menu-action:hover .menu-action__arrow { color: var(--ui-accent-light); transform: translateX(3px); }

kbd {
  display: inline-flex;
  min-width: 24px;
  min-height: 24px;
  padding: 3px 6px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 5px;
  background: rgba(255,255,255,0.045);
  color: var(--muted);
  font: 800 9px/1 var(--font-ui);
  letter-spacing: 0.06em;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2);
}

.start-footer {
  position: absolute;
  right: clamp(28px, 6vw, 88px);
  bottom: max(22px, env(safe-area-inset-bottom));
  left: clamp(28px, 6vw, 88px);
  display: flex;
  justify-content: center;
  color: var(--dim);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.075em;
}

.start-footer b { color: #aab2ca; font-weight: 900; }
.start-footer i { margin: 0 6px; color: rgba(215,138,94,0.58); font-style: normal; }
.start-footer kbd { min-width: 18px; min-height: 18px; margin-right: 2px; padding: 2px 4px; }
.touch-controls { display: none; }

.text-button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 11px; font-weight: 650; letter-spacing: 0.01em; }
.text-button:hover { color: var(--ui-accent-light); }

.screen--modal {
  place-items: center;
  padding:
    max(22px, calc(env(safe-area-inset-top) + 10px))
    max(22px, calc(env(safe-area-inset-right) + 10px))
    max(22px, calc(env(safe-area-inset-bottom) + 10px))
    max(22px, calc(env(safe-area-inset-left) + 10px));
  background: rgba(3, 5, 11, 0.67);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-panel {
  width: min(480px, 100%);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 44px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 36px;
  border-radius: 18px;
  text-align: center;
  box-shadow: 0 24px 90px rgba(0,0,0,0.52), 0 0 60px rgba(98, 246, 232, 0.05);
}

.modal-panel h2 { margin: 0; font: 900 46px/1 var(--font-display); letter-spacing: -0.025em; }
.modal-panel > p { margin: 12px 0 28px; color: var(--muted); font-size: 13px; line-height: 1.5; }

.upgrade-panel { width: min(880px, 100%); }
.upgrade-list { display: grid; grid-template-columns: repeat(var(--upgrade-choice-count, 3), minmax(0, 1fr)); gap: 12px; margin-top: 25px; }

.upgrade-card {
  position: relative;
  display: grid;
  min-height: 236px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 17px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,0.025);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: border-color 150ms ease, background 150ms ease;
}

.upgrade-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--upgrade-color), transparent);
  opacity: 0.55;
  content: "";
}

.upgrade-card:hover,
body.keyboard-navigation .upgrade-card:focus-visible { border-color: var(--upgrade-color, #d89261); background: rgba(255,255,255,0.052); }
.upgrade-card:hover::before { opacity: 1; }

.upgrade-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.upgrade-card__body { display: flex; min-width: 0; flex-direction: column; }

.upgrade-number {
  display: grid;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255,255,255,0.035);
  color: var(--dim);
  font-size: 10px;
  font-weight: 800;
}

.upgrade-icon { display: grid; width: 46px; height: 46px; flex: 0 0 auto; place-items: center; border: 1px solid color-mix(in srgb, var(--upgrade-color) 46%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--upgrade-color) 10%, transparent); color: var(--upgrade-color); line-height: 0; }
.upgrade-icon svg,
.owned-upgrade-icon svg {
  display: block;
  width: 26px;
  height: 26px;
  margin: auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.upgrade-icon svg *,
.owned-upgrade-icon svg * { vector-effect: non-scaling-stroke; }
.upgrade-card small { display: block; margin-bottom: 7px; color: var(--upgrade-color); font-size: 9px; font-weight: 900; letter-spacing: 0.2em; }
.upgrade-card strong { display: block; margin-bottom: 9px; font: 800 21px/1.05 var(--font-display); letter-spacing: 0.02em; }
.upgrade-card p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.55; }

.upgrade-stack {
  justify-self: start;
  padding: 5px 9px;
  border-radius: 6px;
  background: rgba(255,255,255,0.045);
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.keyboard-hint { margin-top: 20px; color: var(--dim); font-size: 10px; font-weight: 900; letter-spacing: 0.13em; }

.pause-panel .primary-button { margin-bottom: 12px; }
.pause-panel .secondary-button { justify-content: center; }
.pause-panel .save-run-button { border-color: rgba(132,247,177,0.32); color: #a9ffd0; }
.save-run-status {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(111,224,160,0.22);
  border-left: 2px solid #6fe0a0;
  border-radius: 8px;
  background: rgba(111,224,160,0.06);
  color: #a9e9c6;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
}

.save-run-status:empty { display: none; }
.pause-action-divider { display: flex; align-items: center; gap: 9px; margin: 15px 0 11px; color: var(--dim); font-size: 7px; font-weight: 900; letter-spacing: 0.18em; }
.pause-action-divider::before,
.pause-action-divider::after { height: 1px; flex: 1; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12)); content: ""; }
.pause-action-divider::after { background: linear-gradient(90deg, rgba(255,255,255,0.12), transparent); }
.setting-row { display: flex; min-height: 56px; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--line); text-align: left; }
.setting-row > span { display: flex; flex-direction: column; gap: 4px; }
.setting-row strong { font-size: 11px; letter-spacing: 0.12em; }
.setting-row small { color: var(--dim); font-size: 10px; line-height: 1.35; }

.switch-button {
  display: flex;
  width: 66px;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: rgba(255,255,255,0.025);
  color: var(--muted);
  cursor: pointer;
}

.switch-button span { width: 15px; height: 15px; border-radius: 50%; background: var(--dim); transition: background 150ms ease, box-shadow 150ms ease; }
.switch-button b { font-size: 9px; letter-spacing: 0.08em; }
.switch-button[aria-pressed="true"] { border-color: rgba(215,138,94,0.4); color: var(--ui-accent-light); }
.switch-button[aria-pressed="true"] span { background: var(--ui-accent); box-shadow: none; }

[hidden] { display: none !important; }

.settings-panel {
  width: min(720px, 100%);
  max-height: calc(100vh - 44px);
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 44px);
  padding: 24px;
  text-align: left;
}

.settings-close-button {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  min-width: 70px;
  min-height: 36px;
  margin: 0 0 -36px auto;
  padding: 0 12px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(8, 11, 22, 0.92);
  color: var(--muted);
  cursor: pointer;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.13em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.settings-close-button:hover { border-color: rgba(239,196,157,0.35); color: var(--ui-accent-light); background: rgba(255,255,255,0.04); }

.settings-panel > h2,
.settings-panel > p { text-align: center; }

.settings-panel > p { margin: 8px 0 16px; }

.settings-groups { display: grid; gap: 8px; }

.settings-group {
  padding: 0 14px 3px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.018);
}

.settings-group h3 {
  margin: 0 -14px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--ui-accent-light);
  font-size: 10px;
  letter-spacing: 0.075em;
}

.settings-group .setting-row:first-of-type { border-top: 0; }

.setting-row--volume { cursor: default; }
.setting-row > .volume-control { display: flex; width: min(280px, 55%); min-width: 190px; align-items: center; flex-direction: row; gap: 12px; }

#volume-slider {
  --volume-fill: 72%;
  appearance: none;
  -webkit-appearance: none;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}

#volume-slider::-webkit-slider-runnable-track {
  height: 8px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #a96645 0, var(--ui-accent) var(--volume-fill), rgba(255,255,255,0.11) var(--volume-fill), rgba(255,255,255,0.11) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09);
}

#volume-slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  margin-top: -7px;
  border: 3px solid var(--ui-accent);
  border-radius: 50%;
  background: #f3e9de;
  box-shadow: 0 0 0 3px rgba(11,12,16,0.8);
  transition: transform 140ms ease, box-shadow 140ms ease;
}

#volume-slider::-moz-range-track {
  height: 8px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.11);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09);
}

#volume-slider::-moz-range-progress {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #a96645, var(--ui-accent));
  box-shadow: none;
}

#volume-slider::-moz-range-thumb {
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  border: 3px solid var(--ui-accent);
  border-radius: 50%;
  background: #f3e9de;
  box-shadow: 0 0 0 3px rgba(11,12,16,0.8);
  transition: transform 140ms ease, box-shadow 140ms ease;
}

body.keyboard-navigation #volume-slider:focus-visible { outline: none; }
body.keyboard-navigation #volume-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px #0b0c10, 0 0 0 6px var(--ink);
}
body.keyboard-navigation #volume-slider:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px #0b0c10, 0 0 0 6px var(--ink);
}

@media (forced-colors: active) {
  body.keyboard-navigation #volume-slider:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
}

.volume-control output {
  min-width: 48px;
  padding: 6px 7px;
  border: 1px solid rgba(215,138,94,0.24);
  border-radius: 7px;
  background: rgba(215,138,94,0.07);
  color: var(--ui-accent-light);
  font-size: 11px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.choice-button {
  min-width: 82px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(215,138,94,0.34);
  border-radius: 8px;
  background: rgba(215,138,94,0.07);
  color: var(--ui-accent-light);
  cursor: pointer;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.choice-button[data-mode="manual"] {
  border-color: rgba(167, 139, 250, 0.38);
  background: rgba(167, 139, 250, 0.08);
  color: #c8b7ff;
}

.settings-hint {
  margin: 8px 0 9px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.5;
}

.settings-hint.is-error {
  padding: 8px 11px;
  border-left: 2px solid #ff7d8d;
  border-radius: 6px;
  background: rgba(255,125,141,0.07);
  color: #ffb3bc;
  font-weight: 600;
}

.keybind-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding-bottom: 8px; }

.keybind-row {
  min-height: 44px;
  padding: 4px 6px 4px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  background: rgba(6, 8, 17, 0.38);
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.11em;
}

.keybind-button {
  min-width: 92px;
  min-height: 32px;
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255,255,255,0.035);
  color: var(--ink);
  cursor: pointer;
}

.keybind-button kbd { color: var(--ink); }
.keybind-button:hover { border-color: rgba(239,196,157,0.35); background: rgba(255,255,255,0.04); }
.keybind-button.is-listening { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 18px rgba(255,209,102,0.13); }
.keybind-button.is-listening kbd { color: var(--gold); }

.settings-group--keybinds { position: relative; }

.keybind-reset-button {
  position: absolute;
  top: 5px;
  right: 8px;
  width: auto;
  min-height: 28px;
  margin: 0;
  padding: 0 10px;
  justify-content: center;
  font-size: 8px;
}

.settings-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.settings-actions .danger-button { margin-top: 0; }

.owned-upgrades-panel {
  width: min(760px, 100%);
  text-align: left;
}

.owned-upgrades-panel > h2,
.owned-upgrades-panel > p { text-align: center; }

.owned-upgrades-panel > p { margin-bottom: 20px; }

.owned-upgrade-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.owned-upgrade-item {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  min-height: 72px;
  padding: 11px 12px;
  align-items: center;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--upgrade-color, var(--cyan)) 28%, var(--line));
  border-radius: 11px;
  background: color-mix(in srgb, var(--upgrade-color, var(--cyan)) 5%, rgba(255,255,255,0.018));
}

.owned-upgrade-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--upgrade-color, var(--cyan)) 44%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--upgrade-color, var(--cyan)) 9%, transparent);
  color: var(--upgrade-color, var(--cyan));
  line-height: 0;
  box-shadow: 0 0 18px color-mix(in srgb, var(--upgrade-color, var(--cyan)) 10%, transparent);
}

.owned-upgrade-copy { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.owned-upgrade-copy strong,
.owned-upgrade-item > strong { font: 800 16px/1.1 var(--font-display); letter-spacing: 0.025em; }
.owned-upgrade-copy small,
.owned-upgrade-item small { color: var(--muted); font-size: 10px; font-weight: 700; line-height: 1.4; letter-spacing: 0.01em; }
.owned-upgrade-stack,
.owned-upgrade-item > b { color: var(--upgrade-color, var(--cyan)); font-size: 11px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: 0.08em; white-space: nowrap; }

.owned-upgrade-empty,
.owned-upgrades-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 30px 18px;
  border: 1px dashed rgba(255,255,255,0.14);
  border-radius: 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.owned-upgrades-panel > .primary-button { margin-top: 18px; }

@media (min-width: 760px) {
  .settings-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-group:last-child { grid-column: 1 / -1; }
  .settings-group .setting-row > .volume-control { width: 52%; min-width: 150px; }
  .keybind-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 801px) and (max-width: 1100px) {
  .hud { grid-template-columns: minmax(0, 1fr) minmax(210px, 0.75fr) minmax(0, 1fr); }
  .hud-cluster { padding-inline: 12px; gap: 10px; }
  .hud-stat--score { min-width: 70px; }
  .hud-stat--health { min-width: 66px; }
}

.reset-confirmation {
  position: absolute;
  inset: 0;
  z-index: 35;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background: rgba(2, 4, 10, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.confirmation-panel {
  width: min(410px, 100%);
  max-height: calc(100vh - 36px);
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 36px);
  overflow-y: auto;
  padding: 30px;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 28px 100px rgba(0,0,0,0.68), 0 0 55px rgba(255,101,119,0.07);
}

.confirmation-panel h2 { margin: 0; font: 900 38px/1 var(--font-display); }
.confirmation-panel p { margin: 14px 0 26px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.confirmation-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.confirmation-actions .secondary-button,
.confirmation-actions .danger-button { min-height: 54px; margin-top: 0; justify-content: center; }

/* The run guard sits above every screen and dialog, because it can be raised from any of them. */
.run-confirmation { z-index: 60; }

.confirmation-panel .run-confirm-stats {
  margin: -14px 0 24px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink);
  font: 700 12px/1.4 var(--font-display);
  letter-spacing: 0.11em;
}

.danger-button { margin-top: 17px; border: 1px solid rgba(255,101,119,0.22); background: transparent; color: #dc8290; }
.danger-button:hover { border-color: var(--coral); color: var(--coral); }

.network-dialog-backdrop {
  position: absolute;
  z-index: 45;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background: rgba(7,7,9,0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.network-dialog {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 36px);
  overflow-y: auto;
  padding: 32px;
  border-radius: 14px;
  text-align: left;
  border: 1px solid rgba(239,196,157,0.14);
  background: #15161b;
  box-shadow: 0 28px 90px rgba(0,0,0,0.72);
}

.network-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.network-dialog__eyebrow {
  margin: 0 0 6px;
  color: var(--ui-accent-light);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.32em;
  opacity: 0.75;
}

.network-dialog h2 { margin: 0; font: 800 34px/1 var(--font-display); letter-spacing: -0.02em; }
.network-dialog__intro { margin: 0 0 18px; color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.network-dialog__close {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255,255,255,0.025);
  color: var(--muted);
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}

.network-dialog__close svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.network-dialog__close:hover { border-color: rgba(239,196,157,0.38); color: var(--ink); background: rgba(255,255,255,0.06); }

.setup-note,
.account-note {
  margin: 0;
  padding: 11px 13px;
  border-radius: 8px;
  border-left: 2px solid var(--gold);
  background: rgba(255,209,102,0.055);
  color: #d5c89f;
  font-size: 11.5px;
  line-height: 1.55;
}

.account-note { border-left-color: rgba(255,255,255,0.16); background: rgba(255,255,255,0.025); color: var(--muted); }

.auth-fields { display: grid; gap: 11px; }
.auth-fields label { display: grid; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: 0.035em; }
.auth-fields input,
.leaderboard-search input {
  width: 100%;
  min-height: 43px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  outline: none;
  background: rgba(4,7,16,0.72);
  color: var(--ink);
  font: 600 12px/1 var(--font-ui);
}
.auth-fields input:focus,
.leaderboard-search input:focus { border-color: rgba(215,138,94,0.72); box-shadow: 0 0 0 3px rgba(215,138,94,0.1); }

#forgot-password-button { width: auto; margin: 9px 0 0 auto; padding: 5px 0; }

.auth-mode-switch { display: grid; grid-template-columns: 1fr 1fr; margin: 4px 0 18px; border-bottom: 1px solid var(--line); }
.auth-mode-switch button { min-height: 43px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--dim); cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: 0.025em; }
.auth-mode-switch button:hover { color: #d9d3ca; background: rgba(255,255,255,0.025); }
.auth-mode-switch button.is-active { border-bottom-color: var(--ui-accent); color: var(--ink); }
.auth-form { padding: 18px; border: 1px solid rgba(255,255,255,0.08); border-radius: 9px; background: #101116; }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 47px; }
.password-toggle { position: absolute; top: 50%; right: 6px; display: grid; width: 34px; height: 32px; padding: 0; place-items: center; border: 0; border-radius: 5px; background: transparent; color: #8d8f96; cursor: pointer; transform: translateY(-50%); }
.password-toggle:hover { background: rgba(255,255,255,0.055); color: #ded8ce; }
.password-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.password-toggle[aria-pressed="true"] svg { opacity: 0.68; }
.auth-submit-button,
.google-button { width: 100%; min-height: 47px; border-radius: 7px; cursor: pointer; font-size: 11px; font-weight: 750; letter-spacing: 0.025em; transition: border-color 140ms ease, background-color 140ms ease; }
.auth-submit-button { margin-top: 14px; border: 1px solid #dd966c; background: #c9774f; color: #21130d; }
.auth-submit-button:hover { border-color: #efb18b; background: #d4845b; }
.google-button { display: flex; margin-top: 9px; padding: 0 14px; align-items: center; justify-content: center; gap: 11px; border: 1px solid #dad6ce; background: #fbfaf7; color: #23252b; font-weight: 700; }
.google-button:hover { border-color: #fff; background: #fff; }
.google-mark { width: 18px; height: 18px; flex: 0 0 auto; }
.auth-submit-button:disabled,
.google-button:disabled,
.verification-actions button:disabled,
.profile-save-button:disabled { opacity: 0.42; cursor: not-allowed; }

.signed-in-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0 0 18px;
  padding: 17px;
  overflow: hidden;
  border: 1px solid rgba(239,196,157,0.18);
  border-radius: 12px;
  background:
    radial-gradient(circle at 12% 0%, rgba(215,138,94,0.14), transparent 52%),
    rgba(255,255,255,0.025);
}

.signed-in-card__text { display: grid; min-width: 0; gap: 5px; }
.signed-in-card strong { overflow: hidden; color: #f2ece2; font-size: 19px; font-weight: 750; letter-spacing: 0.01em; text-overflow: ellipsis; white-space: nowrap; }
.signed-in-card small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.signed-in-avatar { display: grid; flex: 0 0 auto; }
.signed-in-avatar .avatar-art { font-size: 58px; border-radius: 26%; }

.verify-badge {
  margin-left: auto;
  padding: 5px 9px;
  flex: 0 0 auto;
  align-self: flex-start;
  border-radius: 5px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.verify-badge[data-state="verified"] { border: 1px solid rgba(111,224,160,0.34); background: rgba(111,224,160,0.1); color: #8fe3b6; }
.verify-badge[data-state="unverified"] { border: 1px solid rgba(255,209,102,0.34); background: rgba(255,209,102,0.09); color: #e8cd8c; }

.account-section { margin: 0 0 18px; }

.account-section__title {
  display: block;
  margin: 0 0 10px;
  padding: 0;
  color: var(--dim);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.2em;
}

.account-footer {
  display: grid;
  gap: 12px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

#security-section { margin-top: 22px; }

.security-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.022);
}

.security-row > span { display: grid; min-width: 0; gap: 4px; }
.security-row strong { font-size: 11px; letter-spacing: 0.12em; }
.security-row small { color: var(--dim); font-size: 11px; line-height: 1.45; }
.security-row b { color: var(--muted); font-weight: 700; overflow-wrap: anywhere; }

.security-action {
  width: auto;
  min-height: 40px;
  margin: 0;
  flex: 0 0 auto;
  padding: 0 14px;
  justify-content: center;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.11em;
}

.verification-panel { margin: 0 0 16px; padding: 14px; border: 1px solid rgba(255,209,102,0.25); border-radius: 9px; background: rgba(255,209,102,0.055); }
.verification-panel > strong { font-size: 12px; letter-spacing: 0.04em; }
.verification-panel > p { margin: 7px 0 12px; color: #cfc39f; font-size: 11px; line-height: 1.55; }
.verification-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.verification-actions button { min-height: 43px; margin: 0; padding: 0 10px; justify-content: center; font-size: 10px; }
.profile-fields { margin-top: 0; }
.avatar-fieldset { padding: 0; border: 0; }
.avatar-picker { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 7px; }

.avatar-option {
  position: relative;
  display: grid;
  aspect-ratio: 1;
  min-width: 0;
  padding: 4px;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  transition: border-color 130ms ease, background-color 130ms ease, transform 130ms ease;
}

.avatar-option .avatar-art { width: 100%; height: 100%; font-size: inherit; }
.avatar-option:hover { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); }

.avatar-option.is-selected {
  border-color: var(--ui-accent);
  background: rgba(215,138,94,0.12);
  box-shadow: 0 0 0 1px rgba(215,138,94,0.28);
}

.avatar-option.is-selected::after {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border: 2px solid #15161b;
  border-radius: 50%;
  background: var(--ui-accent);
  color: #1d0e07;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  content: "✓";
}

.profile-save-button {
  min-height: 50px;
  border: 1px solid #dd966c;
  background: #c9774f;
  color: #21130d;
}

.profile-save-button:hover { border-color: #efb18b; background: #d4845b; }

.account-signout {
  min-height: 44px;
  width: 100%;
  border: 1px solid rgba(255,125,141,0.22);
  border-radius: 8px;
  background: transparent;
  color: #dc8290;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
}

.account-signout:hover { border-color: rgba(255,125,141,0.55); background: rgba(255,125,141,0.07); color: #ff9aa6; }
.account-signout:disabled { opacity: 0.42; cursor: not-allowed; }

.account-delete {
  min-height: 34px;
  width: auto;
  margin: 0 auto;
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--dim);
  cursor: pointer;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.16);
  text-underline-offset: 4px;
}

.account-delete:hover { color: #ff9aa6; text-decoration-color: rgba(255,154,166,0.5); }
.account-delete:disabled { opacity: 0.4; cursor: not-allowed; }

.delete-panel { width: min(470px, 100%); text-align: left; }
.delete-panel h2 { color: #ff9aa6; }
.delete-panel > p { margin: 12px 0 0; }

.delete-list {
  display: grid;
  gap: 7px;
  margin: 12px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.delete-list::marker,
.delete-list li::marker { color: #ff7d8d; }
.delete-list strong { color: #ffb3bc; }

.delete-panel > .delete-keep {
  margin: 13px 0 20px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: 11px;
  line-height: 1.5;
}

.delete-field { display: grid; gap: 7px; margin-bottom: 12px; }
.delete-field > span { color: var(--muted); font-size: 9.5px; font-weight: 800; letter-spacing: 0.13em; }
.delete-field b { color: #ffb3bc; font-weight: 800; }

.delete-field input {
  width: 100%;
  min-height: 46px;
  padding: 0 13px;
  border: 1px solid rgba(255,125,141,0.24);
  border-radius: 8px;
  outline: none;
  background: rgba(4,7,16,0.72);
  color: var(--ink);
  font: 650 13px/1 var(--font-ui);
}

.delete-field input:focus { border-color: rgba(255,125,141,0.7); box-shadow: 0 0 0 3px rgba(255,125,141,0.1); }
.delete-field input:disabled { opacity: 0.5; }
.delete-note { margin: 0 0 14px; color: var(--dim); font-size: 11px; line-height: 1.5; }
.delete-panel .network-status { margin: 0 0 14px; }
.delete-panel .confirmation-actions .danger-button:disabled { opacity: 0.4; cursor: not-allowed; }
.delete-panel .confirmation-actions .danger-button:disabled:hover { border-color: rgba(255,101,119,0.22); color: #dc8290; }

/* Avatars: flat plate + flat mark. One em box drives the whole thing, so a single class scales everywhere. */
.avatar-art {
  position: relative;
  display: grid;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 30%;
  background: var(--avatar-plate);
  box-shadow: none;
  font-size: 40px;
}

.avatar-art svg {
  width: 62%;
  height: 62%;
  fill: none;
  stroke: var(--avatar-primary);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--avatar-primary);
}

/* Feedback messages */
.network-status {
  display: none;
  margin: 16px 0 0;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--dim);
  border-radius: 8px;
  background: rgba(255,255,255,0.028);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

.network-status.is-visible { display: flex; animation: status-in 200ms ease both; }
.network-status.is-leaving { animation: status-out 260ms ease both; }

@keyframes status-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

@keyframes status-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(-3px); }
}

.network-status__icon {
  display: grid;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  border: 1.6px solid currentColor;
  color: var(--dim);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
}

.network-status__icon::after { content: "i"; }

.network-status__text { min-width: 0; }

.network-status.is-success { border-left-color: #6fe0a0; background: rgba(111,224,160,0.06); color: #a9e9c6; }
.network-status.is-success .network-status__icon { color: #6fe0a0; }
.network-status.is-success .network-status__icon::after { content: "✓"; font-size: 8.5px; }
.network-status.is-error { border-left-color: #ff7d8d; background: rgba(255,125,141,0.06); color: #ffb3bc; }
.network-status.is-error .network-status__icon { color: #ff7d8d; }
.network-status.is-error .network-status__icon::after { content: "!"; }
.network-status.is-pending { border-left-color: var(--ui-accent); background: rgba(215,138,94,0.055); color: #e6cdb6; }

.network-status.is-pending .network-status__icon {
  border-color: rgba(239,196,157,0.25);
  border-top-color: var(--ui-accent-light);
  color: var(--ui-accent-light);
  animation: status-spin 720ms linear infinite;
}

.network-status.is-pending .network-status__icon::after { content: ""; }

@keyframes status-spin { to { transform: rotate(360deg); } }

.network-status--bar { margin: 0 0 14px; }

.leaderboard-page { position: absolute; z-index: 45; inset: 0; overflow: hidden; background: #080a13; }
.leaderboard-page::before { position: absolute; inset: 0; background: radial-gradient(circle at 18% 8%, rgba(215,138,94,0.07), transparent 30%), radial-gradient(circle at 82% 92%, rgba(129,119,145,0.07), transparent 32%); content: ""; pointer-events: none; }
.leaderboard-page__content { position: relative; display: grid; height: 100%; grid-template-rows: auto minmax(0, 1fr); outline: none; }
.leaderboard-page__header { display: flex; min-height: 116px; padding: max(26px, env(safe-area-inset-top)) max(34px, env(safe-area-inset-right)) 24px max(34px, env(safe-area-inset-left)); align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); background: rgba(8,10,19,0.86); }
.leaderboard-page__header h2 { margin: 0; font: 800 clamp(34px, 5vw, 56px)/1 var(--font-display); letter-spacing: -0.035em; }
.leaderboard-back {
  display: flex;
  min-height: 44px;
  padding: 0 16px;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,0.025);
  color: var(--muted);
  cursor: pointer;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.13em;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}

.leaderboard-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.leaderboard-back:hover { border-color: rgba(239,196,157,0.42); background: rgba(255,255,255,0.05); color: var(--ink); }
.leaderboard-page__body { display: grid; width: min(1100px, 100%); min-height: 0; grid-template-rows: auto auto auto auto minmax(0, 1fr); margin: 0 auto; padding: 20px 34px max(24px, env(safe-area-inset-bottom)); }

/* Multiplayer -----------------------------------------------------------------
   Built out of the main menu's own parts — mode tiles, the primary action, the
   divider — so choosing a match feels like choosing a run rather than filling in
   a form on a different screen.
   ---------------------------------------------------------------------------- */
.menu-action--versus { --glyph-color: #ff9f66; }
.menu-action--versus:hover { border-color: rgba(255, 159, 102, 0.42); }

#mp-dialog .leaderboard-page__body { grid-template-rows: auto auto auto auto auto auto; align-content: start; gap: 0; }

.mp-eyebrow { color: var(--dim); font: 800 8.5px/1 var(--font-display); letter-spacing: 0.22em; }
.mp-count { color: var(--ui-accent); font: 800 9px/1 var(--font-display); letter-spacing: 0.16em; }
.mp-hint { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }

.mp-party-bar {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.02);
}

.mp-party-bar__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.mp-members { display: flex; flex-wrap: wrap; margin-top: 12px; gap: 8px; }
.mp-members:empty { display: none; }

/* A party is a handful of faces, so it reads as a row of faces rather than a table of rows. */
.mp-member {
  position: relative;
  display: flex;
  padding: 7px 10px 7px 7px;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}

.mp-member .avatar-art { font-size: 30px; }
.mp-member--leader { border-color: rgba(255, 209, 102, 0.35); }
.mp-member__name { display: grid; gap: 2px; }
.mp-member__name b { color: var(--ink); font: 700 11.5px/1 var(--font-display); letter-spacing: 0.05em; }
.mp-member__name small { color: var(--dim); font-size: 9px; letter-spacing: 0.1em; }

/* The crown sits on the avatar so authority is attached to a face, not to a legend. */
.mp-member__crown {
  position: absolute;
  top: -8px;
  left: 3px;
  width: 17px;
  height: 17px;
  color: var(--gold);
  filter: drop-shadow(0 0 5px rgba(255, 209, 102, 0.6));
}

.mp-member__controls { display: flex; gap: 3px; margin-left: 2px; }

.mp-icon-action {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  font: 700 11px/1 var(--font-display);
}

.mp-icon-action:hover { border-color: rgba(255, 101, 119, 0.45); color: var(--coral); }
.mp-icon-action[data-action="transfer"]:hover { border-color: rgba(255, 209, 102, 0.5); color: var(--gold); }

.mp-actions { display: flex; flex-wrap: wrap; margin-top: 12px; align-items: center; gap: 8px; }
.mp-button { width: auto; min-height: 38px; margin-top: 0; padding: 0 15px; justify-content: center; font-size: 10px; letter-spacing: 0.12em; }

.mp-invite { display: flex; flex: 1 1 220px; gap: 8px; }

.mp-invite input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.28);
  color: var(--ink);
  font: 600 12px/1 var(--font-ui);
}

.mp-invite input:focus { border-color: rgba(98, 246, 232, 0.6); outline: none; }

#mp-dialog .menu-divider { margin: 20px 0 12px; }
.mp-mode-grid { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.mp-mode-grid .mode-tile.is-active { border-color: var(--ui-accent); background: rgba(215, 138, 94, 0.09); }
.mp-mode-grid .mode-tile:disabled { opacity: 0.38; cursor: not-allowed; }
.mp-mode-grid .mode-tile em { color: var(--dim); font-style: normal; font: 800 7.5px/1 var(--font-display); letter-spacing: 0.18em; }

.mp-set-format { display: flex; margin-top: 14px; align-items: center; flex-wrap: wrap; gap: 8px; }
.mp-set-format > span { color: var(--dim); font: 700 9px/1 var(--font-display); letter-spacing: 0.16em; }
.mp-set-buttons { display: flex; flex-wrap: wrap; gap: 6px; }

.mp-set-buttons button {
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: 700 9.5px/1 var(--font-display);
  letter-spacing: 0.1em;
}

.mp-set-buttons button.is-active { border-color: var(--ui-accent); color: var(--ui-accent-light); }
.mp-go { margin-top: 18px; }

/* The search bar lives outside the panel on purpose: you can start a search, back out to the
   menu, and the game still tells you it is looking — and lets you stop. */
.mp-search-bar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 14;
  display: grid;
  padding: 10px max(16px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  border-top: 1px solid rgba(98, 246, 232, 0.22);
  background: linear-gradient(rgba(6, 10, 20, 0.82), rgba(4, 7, 14, 0.96));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.mp-search-bar__left { display: grid; min-width: 0; gap: 2px; }
.mp-search-bar__left strong { color: var(--ink); font: 800 11px/1.2 var(--font-display); letter-spacing: 0.13em; }
.mp-search-bar__left small { color: var(--dim); font: 700 8.5px/1 var(--font-display); letter-spacing: 0.2em; }

.mp-search-bar__cancel {
  padding: 8px 20px;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: 800 12px/1 var(--font-display);
  letter-spacing: 0.11em;
  /* The sweep reads as activity: the bar is doing something, not just sitting there. */
  animation: mp-search-pulse 2.4s ease-in-out infinite;
}

.mp-search-bar__cancel:hover { color: var(--coral); }

.mp-search-bar__timer {
  justify-self: end;
  color: var(--cyan);
  font: 800 15px/1 var(--font-display);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

@keyframes mp-search-pulse {
  0%, 100% { opacity: 0.72; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .mp-search-bar__cancel { animation: none; }
}

@media (max-width: 620px) {
  .mp-search-bar { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .mp-search-bar__cancel { grid-column: 1 / -1; order: 3; padding: 8px 0; }
}

.mp-invite-toast {
  position: absolute;
  right: 22px;
  bottom: 22px;
  z-index: 6;
  display: flex;
  max-width: min(420px, calc(100% - 44px));
  padding: 14px 16px;
  align-items: center;
  gap: 14px;
  border-radius: 13px;
}

.mp-invite-toast strong { display: block; color: var(--ink); font: 800 13px/1.2 var(--font-display); letter-spacing: 0.06em; }
.mp-invite-toast small { color: var(--muted); font-size: 11px; }
.mp-invite-toast__actions { display: flex; gap: 6px; }

@media (max-width: 620px) {
  .mp-invite-toast { right: 12px; left: 12px; bottom: 88px; flex-wrap: wrap; }
}

/* Archive ---------------------------------------------------------------------
   An opt-in reference for anyone who wants to study the bestiary. Every preview is
   drawn by the game's own render functions rather than redrawn as artwork here, so
   an entry can never fall out of step with the thing it documents.
   ---------------------------------------------------------------------------- */
#archive-dialog .leaderboard-page__body { grid-template-rows: auto auto minmax(0, 1fr); }

.archive-intro {
  margin: 0 0 16px;
  max-width: 62ch;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
}

.archive-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  overflow-y: auto;
  align-content: start;
  padding-right: 4px;
}

/* Preview and name sit side by side on the top row; the stat strip spans the whole card
   underneath, so the numbers get the full width instead of being squeezed into the text column. */
.archive-card {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.archive-card__media { display: grid; gap: 6px; grid-column: 1; align-content: start; }

.archive-card__media canvas {
  width: 76px;
  height: 76px;
  border-radius: 9px;
  background: radial-gradient(circle at 50% 45%, rgba(30, 40, 62, 0.5), rgba(6, 8, 15, 0.9));
}

.archive-preview {
  display: flex;
  min-height: 24px;
  padding: 0 6px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font: 800 8px/1 var(--font-display);
  letter-spacing: 0.14em;
  cursor: pointer;
}

.archive-preview:hover { border-color: rgba(215, 138, 94, 0.55); color: var(--ui-accent-light); }
.archive-preview i { font-style: normal; font-size: 8px; }

.archive-card__body { min-width: 0; grid-column: 2; }

/* A preview runs the real arena full screen, so the only chrome is a bar naming what you are
   watching and the way back out. */
.preview-bar {
  position: absolute;
  z-index: 12;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  left: max(16px, env(safe-area-inset-left));
  display: flex;
  max-width: 900px;
  margin-inline: auto;
  padding: 11px 12px 11px 16px;
  align-items: center;
  gap: 16px;
  border-radius: 12px;
}

.preview-bar__copy { display: grid; flex: 1 1 auto; min-width: 0; gap: 2px; }

.preview-bar__tag {
  color: var(--ui-accent);
  font: 800 8px/1 var(--font-display);
  letter-spacing: 0.24em;
}

.preview-bar__copy strong { color: var(--ink); font: 900 15px/1.1 var(--font-display); letter-spacing: 0.07em; }

.preview-bar__copy small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Overrides the shared button base, which is full width and 58px tall for menu stacks. */
.preview-bar__exit {
  width: auto;
  flex: 0 0 auto;
  min-height: 38px;
  margin-top: 0;
  padding: 0 16px;
  justify-content: center;
  font-size: 10px;
  letter-spacing: 0.12em;
}

@media (max-width: 560px) {
  .preview-bar { padding: 10px; gap: 10px; }
  .preview-bar__copy small { display: none; }
  .preview-bar__exit { padding: 0 12px; }
}

.archive-card h4 {
  margin: 1px 0 0;
  color: var(--ink);
  font: 800 13px/1.2 var(--font-display);
  letter-spacing: 0.07em;
}

.archive-card p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.5;
}

.archive-card dl {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(auto-fit, minmax(52px, 1fr));
  margin: 2px 0 0;
  padding-top: 11px;
  gap: 10px;
  border-top: 1px solid var(--line);
}

/* Label over value, not label beside value: the pairs stop running together at a glance. */
.archive-card dl > div { display: grid; gap: 3px; min-width: 0; }

.archive-card dt { color: var(--dim); font: 700 8px/1 var(--font-display); letter-spacing: 0.14em; }
.archive-card dd {
  margin: 0;
  overflow: hidden;
  color: var(--ui-accent-light);
  font: 700 12px/1 var(--font-display);
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .archive-grid { grid-template-columns: 1fr; }
}

.board-tabs {
  display: flex;
  margin: 0 0 16px;
  gap: 4px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}

.board-tabs::-webkit-scrollbar { display: none; }

.board-tab {
  min-height: 40px;
  padding: 0 15px;
  flex: 0 0 auto;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  transition: color 140ms ease, border-color 140ms ease;
}

.board-tab:hover { color: #d9d3ca; }
.board-tab.is-active { border-bottom-color: var(--ui-accent); color: var(--ink); }
.leaderboard-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin: 0 0 14px; }
.leaderboard-search__field { position: relative; display: block; }
.leaderboard-search__field svg { position: absolute; top: 50%; left: 14px; width: 17px; height: 17px; fill: none; stroke: var(--dim); stroke-width: 1.8; stroke-linecap: round; transform: translateY(-50%); pointer-events: none; }
.leaderboard-search input { min-height: 46px; padding-left: 40px; }
.leaderboard-search__field:focus-within svg { stroke: var(--ui-accent-light); }
.leaderboard-search button {
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.13em;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}
.leaderboard-search button:hover { border-color: rgba(239,196,157,0.38); background: rgba(255,255,255,0.055); color: var(--ink); }
.leaderboard-head,
.leaderboard-list li { display: grid; grid-template-columns: 52px minmax(220px, 1fr) 80px 135px 80px; align-items: center; gap: 14px; }
.leaderboard-head { padding: 0 16px 9px; color: var(--dim); font-size: 8.5px; font-weight: 800; letter-spacing: 0.18em; }
.leaderboard-head span:nth-last-child(-n+3) { text-align: right; }
.leaderboard-list { display: grid; gap: 6px; min-height: 0; align-content: start; margin: 0; padding: 0 4px 10px 0; overflow-y: auto; list-style: none; }
.leaderboard-list li { min-height: 64px; padding: 9px 16px; border: 1px solid rgba(255,255,255,0.075); border-radius: 10px; background: rgba(255,255,255,0.018); }
.leaderboard-list li.is-current { border-color: rgba(215,138,94,0.34); background: rgba(215,138,94,0.055); }
.leaderboard-list li.is-current .leaderboard-rank { color: var(--ui-accent-light); }
.leaderboard-rank { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; background: rgba(255,255,255,0.035); color: var(--dim); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.leaderboard-list li:nth-child(1) .leaderboard-rank { border: 1px solid rgba(255,209,102,0.42); background: rgba(255,209,102,0.13); color: #ffd88a; }
.leaderboard-list li:nth-child(2) .leaderboard-rank { border: 1px solid rgba(214,220,232,0.32); background: rgba(214,220,232,0.09); color: #d9dfe9; }
.leaderboard-list li:nth-child(3) .leaderboard-rank { border: 1px solid rgba(215,138,94,0.36); background: rgba(215,138,94,0.11); color: #e0a276; }
.leaderboard-player { display: flex; min-width: 0; align-items: center; gap: 13px; }
.leaderboard-player > span:last-child { display: grid; min-width: 0; gap: 3px; }
.leaderboard-player strong { overflow: hidden; color: var(--ink); font-size: 13.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-player small { overflow: hidden; color: var(--dim); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-avatar { font-size: 40px; }
.leaderboard-level { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
.leaderboard-score { color: #e4aa77; font: 750 18px/1 var(--font-display); font-variant-numeric: tabular-nums; text-align: right; }
.leaderboard-time { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; text-align: right; }

.final-score-block { position: relative; margin: 26px 0 20px; padding: 19px; border: 1px solid rgba(215,138,94,0.18); border-radius: 12px; background: rgba(215,138,94,0.035); }
.final-score-block span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: 0.17em; }
.final-score-block strong { color: #e4aa77; font: 900 48px/1 var(--font-display); text-shadow: none; }
.final-score-block em { position: absolute; top: -9px; right: 12px; padding: 4px 8px; border-radius: 4px; background: var(--gold); color: #241a02; font-size: 7px; font-style: normal; font-weight: 900; letter-spacing: 0.1em; }

.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-bottom: 22px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--line); }
.result-grid div { padding: 14px; background: rgba(10,13,25,0.92); }
.result-grid span { display: block; margin-bottom: 5px; color: var(--dim); font-size: 9px; font-weight: 900; letter-spacing: 0.14em; }
.result-grid strong { font: 800 20px/1 var(--font-display); }
.gameover-panel .secondary-button { justify-content: center; }

@media (hover: none), (pointer: coarse) {
  .dash-button,
  .sprint-button { display: block; }
  .start-card .menu-action:hover,
  .menu-utility-button:hover { transform: none; filter: none; }
  .start-card .menu-action--daily:hover {
    border-color: rgba(167,139,250,0.26);
    background: rgba(24, 21, 43, 0.84);
  }
  .start-card kbd { display: none; }
  .sprint-meter { display: none !important; }
  .desktop-controls,
  .aim-note { display: none !important; }
  .touch-controls { display: block; line-height: 1.6; text-align: center; }
  .start-footer {
    bottom: max(22px, calc(env(safe-area-inset-bottom) + 12px));
    justify-content: center;
  }
  .settings-panel .switch-button,
  .settings-panel .choice-button,
  .settings-panel .keybind-button,
  .settings-panel .settings-close-button { min-height: 44px; }
  .settings-panel .settings-close-button { margin-bottom: -44px; }
}

@media (any-pointer: coarse) {
  .sprint-button { display: flex; }
  .dash-button { display: grid; }
  .sprint-meter { display: none !important; }
}

@media (hover: none) and (pointer: coarse) {
  .mobile-controls:not(.is-hidden) { display: block; }

  .dash-button,
  .sprint-button {
    bottom: max(49px, calc(env(safe-area-inset-bottom) + 41px));
  }

  .sprint-button { width: 54px; height: 66px; }
  .dash-button { width: 56px; height: 56px; }
  .dash-mark { width: 20px; height: 20px; }

  .sprint-button {
    right: calc(50% + 8px);
    left: auto;
  }

  .dash-button {
    right: auto;
    left: calc(50% + 8px);
  }

  .boss-bar {
    top: max(232px, calc(env(safe-area-inset-top) + 222px));
    bottom: auto;
  }
}

@media (max-width: 800px) {
  .hud {
    top: max(12px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
    right: calc(max(12px, env(safe-area-inset-right)) + 156px);
    width: auto;
    max-width: none;
    margin: 0;
    grid-template-columns: 1fr 1fr;
  }
  .level-track-wrap { grid-column: 1 / -1; grid-row: 2; min-height: 40px; padding: 8px 12px; }
  .level-caption { margin-bottom: 6px; }
  .hud-cluster { min-height: 49px; padding: 8px 12px; gap: 10px; }
  .hud-stat--score { min-width: 70px; }
  .hud-stat--health { min-width: 66px; }
  .hud-stat strong { font-size: 18px; }
  .hud-divider { height: 25px; }
  .corner-actions { top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }
  .icon-button { width: 44px; height: 44px; }
  .announcement { top: max(calc(env(safe-area-inset-top) + 128px), 140px); }
  .screen--start { padding: max(24px, env(safe-area-inset-top)) 24px max(58px, calc(env(safe-area-inset-bottom) + 40px)); overflow-y: auto; }
  .start-layout { gap: 18px; margin: auto; }
  h1 { font-size: clamp(40px, 12vw, 58px); line-height: 1; }
  .start-card { max-width: 460px; margin: 0 auto; }
  .start-footer { right: 25px; left: 25px; }
  .start-footer { justify-content: center; }
  .combo-display { top: 126px; right: 17px; }
  .boss-bar { bottom: max(108px, calc(env(safe-area-inset-bottom) + 85px)); }
}

@media (max-width: 580px) {
  #sound-toggle { display: none; }
  .hud { left: 10px; right: calc(max(12px, env(safe-area-inset-right)) + 104px); width: auto; grid-template-columns: minmax(65px, 0.7fr) minmax(130px, 1.3fr); gap: 6px; }
  .hud-cluster { padding: 7px 9px; }
  .hud-cluster--left { display: flex; }
  .hud-cluster--left .hud-divider,
  .hud-cluster--left .hud-stat:not(.hud-stat--wide) { display: none; }
  .hud-cluster--right { justify-content: space-between; gap: 6px; }
  .hud-cluster--right .hud-divider { height: 22px; }
  .hud-stat--score { min-width: 50px; align-items: flex-start; }
  .hud-stat--health { min-width: 48px; }
  .hud-stat strong { font-size: 16px; }
  .hud-label { font-size: 8px; }
  .level-track-wrap { grid-column: 1 / -1; grid-row: 2; }
  .announcement {
    --announcement-gutter-left: max(12px, env(safe-area-inset-left));
    --announcement-gutter-right: max(12px, env(safe-area-inset-right));
    top: max(calc(env(safe-area-inset-top) + 122px), 134px);
    padding: 13px 15px;
    font-size: clamp(20px, 6vw, 30px);
  }
  .announcement small { margin-top: 7px; font-size: 10px; letter-spacing: 0.1em; }
  .modal-panel { padding: 27px 20px; }
  .modal-panel h2 { font-size: 38px; }
  .upgrade-panel { padding: 24px 16px; }
  .upgrade-list { grid-template-columns: 1fr; max-height: 58vh; overflow-y: auto; padding: 2px; }
  .upgrade-card {
    min-height: 0;
    grid-template-rows: auto auto;
    grid-template-columns: 46px minmax(0, 1fr);
    grid-template-areas: "head body" "head stack";
    gap: 10px 14px;
    padding: 15px;
  }
  .upgrade-card__head { grid-area: head; flex-direction: column; gap: 8px; align-items: stretch; }
  .upgrade-card__body { grid-area: body; }
  .upgrade-stack { grid-area: stack; align-self: end; }
  .upgrade-number { width: 100%; height: 20px; }
  .upgrade-card strong { font-size: 19px; }
  .upgrade-card p { font-size: 12px; }
  .keyboard-hint { display: none; }
  .owned-upgrades-panel { padding: 24px 16px; }
  .owned-upgrade-list { grid-template-columns: 1fr; gap: 8px; }
  .owned-upgrade-item { min-height: 68px; }
  .settings-panel { padding: 24px 16px; }
  .settings-group { padding-right: 12px; padding-left: 12px; }
  .settings-group h3 { margin-right: -12px; margin-left: -12px; padding-right: 12px; padding-left: 12px; }
  .keybind-grid { grid-template-columns: 1fr; }
  .network-dialog { padding: 27px 18px 20px; }
  .network-dialog h2 { font-size: 32px; }
  .verification-actions { grid-template-columns: 1fr; }
  .leaderboard-page__header { min-height: 98px; padding: max(20px, env(safe-area-inset-top)) 16px 18px; }
  .leaderboard-back { padding-inline: 12px; }
  .leaderboard-back span { display: none; }
  .leaderboard-page__body { padding: 16px 12px max(16px, env(safe-area-inset-bottom)); }
  .leaderboard-search { grid-template-columns: minmax(0, 1fr) auto; }
  .leaderboard-head,
  .leaderboard-list li { grid-template-columns: 30px minmax(0, 1fr) 74px 42px; gap: 8px; }
  .leaderboard-head span:nth-child(3),
  .leaderboard-level { display: none; }
  .leaderboard-head { padding-inline: 8px; }
  .leaderboard-list li { padding-inline: 8px; }
  .leaderboard-score { font-size: 14px; }
  .leaderboard-player { gap: 9px; }
  .leaderboard-avatar { font-size: 34px; }
  .leaderboard-rank { width: 26px; height: 26px; font-size: 11px; }
  .avatar-picker { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .signed-in-avatar .avatar-art { font-size: 48px; }
  .network-dialog__head { margin-bottom: 14px; }
}

@media (max-width: 480px) {
  .account-chip { min-height: 54px; gap: 10px; }
  .account-chip__text small { display: none; }
  .account-chip__avatar { width: 34px; height: 34px; border-radius: 10px; }
  .account-chip__avatar .avatar-art { font-size: 34px; }
  .account-chip__avatar[data-state="guest"]::before { width: 18px; height: 18px; }
  .rankings-button { min-height: 54px; padding: 0 14px; }
  .owned-upgrade-item { grid-template-columns: 42px minmax(0, 1fr) auto; padding: 10px; gap: 10px; }
  .owned-upgrade-icon { width: 42px; height: 42px; }
  .owned-upgrade-icon svg { width: 23px; height: 23px; }
  .setting-row--volume { flex-direction: column; align-items: stretch; padding-block: 12px 14px; }
  .setting-row > .volume-control { width: 100%; min-width: 0; }
}

@media (max-width: 380px) {
  .rankings-button span { display: none; }
  .rankings-button { padding: 0 15px; }
  .start-card .menu-action { min-height: 62px; padding-inline: 14px; gap: 12px; }
  #start-button { min-height: 72px; padding-inline: 14px 16px; }
  .menu-action__glyph { width: 32px; height: 32px; }
  .settings-actions,
  .confirmation-actions { grid-template-columns: 1fr; }

  .virtual-stick { --stick-size: 104px; }
  .virtual-stick__knob { width: 42px; height: 42px; }
  .virtual-stick--aim .virtual-stick__knob { width: 38px; height: 38px; }

  .dash-button,
  .sprint-button { bottom: max(48px, calc(env(safe-area-inset-bottom) + 40px)); }

  .sprint-button { right: calc(50% + 6px); width: 50px; height: 62px; }
  .dash-button { left: calc(50% + 6px); width: 52px; height: 52px; }
  .dash-mark { width: 19px; height: 19px; }
}

@media (max-width: 340px) {
  .hud { grid-template-columns: minmax(60px, 0.7fr) minmax(120px, 1.3fr); }
  /* Narrowest phones: the four controls share one band, so they shrink together
     and keep a real gap between them rather than sitting edge to edge. */
  .virtual-stick { --stick-size: 84px; }
  .virtual-stick__knob { width: 34px; height: 34px; }
  .virtual-stick--aim .virtual-stick__knob { width: 31px; height: 31px; }

  .dash-button,
  .sprint-button { bottom: max(44px, calc(env(safe-area-inset-bottom) + 36px)); }

  .sprint-button { right: calc(50% + 8px); width: 44px; height: 54px; }
  .sprint-button b { font-size: 7px; letter-spacing: 0.14em; }
  .dash-button { left: calc(50% + 8px); width: 44px; height: 44px; }
  .dash-mark { width: 17px; height: 17px; }
}

@media (max-height: 650px) and (min-width: 801px) {
  .screen--start { padding-top: 20px; padding-bottom: 40px; }
  .start-layout { gap: 16px; }
  h1 { font-size: 42px; }
  .start-card .menu-action { min-height: 60px; }
  #start-button { min-height: 68px; }
}

@media (max-height: 480px) {
  .screen--start { overflow-y: auto; }
  .start-layout { margin: 14px auto; }
  .start-footer { position: static; margin-top: 18px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .screen--modal {
    padding:
      max(8px, calc(env(safe-area-inset-top) + 4px))
      max(8px, calc(env(safe-area-inset-right) + 4px))
      max(8px, calc(env(safe-area-inset-bottom) + 4px))
      max(8px, calc(env(safe-area-inset-left) + 4px));
  }
  .modal-panel,
  .confirmation-panel { max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px); }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape),
       (hover: none) and (pointer: coarse) and (max-height: 480px) {
  .virtual-stick {
    --stick-size: 88px;
    bottom: max(10px, calc(env(safe-area-inset-bottom) + 6px));
  }

  .virtual-stick--move { left: max(14px, calc(env(safe-area-inset-left) + 8px)); }
  .virtual-stick--aim { right: max(14px, calc(env(safe-area-inset-right) + 8px)); }
  .virtual-stick__knob { width: 36px; height: 36px; }
  .virtual-stick--aim .virtual-stick__knob { width: 33px; height: 33px; }
  .virtual-stick__label { font-size: 6px; }

  .dash-button,
  .sprint-button { bottom: max(30px, calc(env(safe-area-inset-bottom) + 26px)); }

  .sprint-button { right: calc(50% + 6px); width: 46px; height: 58px; }
  .dash-button { left: calc(50% + 6px); width: 48px; height: 48px; }
  .dash-mark { width: 18px; height: 18px; }
  .boss-bar { top: max(164px, calc(env(safe-area-inset-top) + 154px)); bottom: auto; }

  .announcement {
    padding: 8px 12px;
    font-size: clamp(17px, 4.2vw, 22px);
    letter-spacing: 0.06em;
  }

  .announcement small { margin-top: 3px; font-size: 9px; line-height: 1.3; letter-spacing: 0.08em; }
}

@media (hover: none) and (pointer: coarse) and (max-height: 260px) {
  .announcement {
    top: max(calc(env(safe-area-inset-top) + 120px), 124px);
    padding: 5px 10px;
    border-radius: 9px;
    font-size: 16px;
    letter-spacing: 0.045em;
  }

  .announcement small {
    display: inline;
    margin: 0 0 0 10px;
    font-size: 8px;
    line-height: 1;
    letter-spacing: 0.055em;
  }
}

@media (hover: none) and (pointer: coarse) and (max-width: 800px) {
  #sound-toggle { display: none; }
  .hud { right: calc(max(12px, env(safe-area-inset-right)) + 104px); }
  .boss-bar { bottom: auto; }
}

@media (hover: none) and (pointer: coarse) {
  .boss-bar { bottom: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .announcement.is-showing { animation: none !important; opacity: 1; transform: none; }
}

body.reduced-motion *,
body.reduced-motion *::before,
body.reduced-motion *::after {
  scroll-behavior: auto !important;
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

body.reduced-motion .announcement.is-showing {
  animation: none !important;
  opacity: 1;
  transform: none;
}

/* ---- multiplayer arena --------------------------------------------------------------- */

.mp-match {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: #06070b;
  overscroll-behavior: none;
  touch-action: none;
}

.mp-match[hidden] { display: none; }

.mp-match__canvas {
  position: absolute;
  inset: 0;
  display: block;
  cursor: crosshair;
}

/* The HUD floats over the arena and must never eat a click meant for the fight; only the
   controls inside it take pointer events back. */
.mp-match__hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-family: var(--font-display);
}

.mp-hud-bar {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 9px 14px;
  border: 1px solid rgba(98, 246, 232, 0.16);
  border-radius: 12px;
  background: rgba(10, 12, 18, 0.76);
  backdrop-filter: blur(8px);
}

.mp-hud-bar__mode { display: grid; gap: 2px; }
.mp-hud-bar__mode strong { color: var(--ink); font: 800 12px/1 var(--font-display); letter-spacing: 0.16em; }
.mp-hud-bar__mode small { color: var(--dim); font: 600 9.5px/1 var(--font-display); letter-spacing: 0.12em; }

.mp-hud-bar__clock {
  min-width: 74px;
  color: var(--cyan);
  font: 800 26px/1 var(--font-display);
  letter-spacing: 0.04em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.mp-hud-bar__clock.is-urgent { color: var(--coral); animation: mp-clock-pulse 1s infinite; }
@keyframes mp-clock-pulse { 50% { opacity: 0.45; } }

.mp-hud-bar__leave {
  pointer-events: auto;
  padding: 6px 12px;
  border: 1px solid rgba(255, 101, 119, 0.28);
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 101, 119, 0.85);
  font: 700 10px/1 var(--font-display);
  letter-spacing: 0.14em;
  cursor: pointer;
}

.mp-hud-bar__leave:hover { background: rgba(255, 101, 119, 0.12); color: #fff; }

.mp-hud-board {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 172px;
}

.mp-hud-board__row {
  display: grid;
  grid-template-columns: 6px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 6px 10px;
  border-radius: 7px;
  background: rgba(10, 12, 18, 0.66);
  border-left: 2px solid transparent;
}

.mp-hud-board__row i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink, #62f6e8); }
.mp-hud-board__row span { color: var(--muted); font: 600 11px/1 var(--font-display); letter-spacing: 0.05em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-hud-board__row b { color: var(--ink); font: 800 13px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.mp-hud-board__row.is-self { border-left-color: var(--ink, #62f6e8); background: rgba(20, 24, 34, 0.86); }
.mp-hud-board__row.is-self span { color: var(--ink); }
.mp-hud-board__row.is-down { opacity: 0.4; }

.mp-hud-self {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: grid;
  gap: 8px;
  justify-items: center;
}

.mp-hud-self__bars { display: grid; gap: 5px; width: min(340px, 60vw); }

.mp-meter {
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.mp-meter i { display: block; height: 100%; width: 100%; border-radius: inherit; transition: width 90ms linear; }
.mp-meter--hp i { background: linear-gradient(90deg, #84f7b1, #62f6e8); }
.mp-meter--stamina { height: 4px; }
.mp-meter--stamina i { background: rgba(167, 139, 250, 0.7); }

.mp-hud-self__keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; }
.mp-hud-self__keys span { color: var(--dim); font: 600 9px/1 var(--font-display); letter-spacing: 0.1em; }
.mp-hud-self__keys b { color: var(--muted); }

.mp-hud-spectate {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border: 1px solid rgba(98, 246, 232, 0.18);
  border-radius: 12px;
  background: rgba(10, 12, 18, 0.82);
}

.mp-hud-spectate__eyebrow { color: var(--dim); font: 700 9px/1 var(--font-display); letter-spacing: 0.2em; }
.mp-hud-spectate strong { min-width: 92px; text-align: center; font: 800 15px/1 var(--font-display); letter-spacing: 0.06em; }
.mp-hud-spectate small { color: var(--dim); font: 600 9px/1 var(--font-display); letter-spacing: 0.1em; }

.mp-hud-spectate__step {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.mp-hud-spectate__step:hover { border-color: rgba(98, 246, 232, 0.4); color: var(--cyan); }

.mp-hud-feed {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: grid;
  gap: 4px;
  justify-items: start;
}

.mp-hud-feed__line {
  padding: 5px 10px;
  border-radius: 7px;
  background: rgba(10, 12, 18, 0.7);
  color: var(--muted);
  font: 600 10.5px/1 var(--font-display);
  letter-spacing: 0.07em;
  animation: mp-feed-in 180ms ease-out;
}

.mp-hud-feed__line.is-good { color: #84f7b1; }
.mp-hud-feed__line.is-bad { color: var(--coral); }

@keyframes mp-feed-in { from { opacity: 0; transform: translateX(-12px); } }

/* ---- the end of a match -------------------------------------------------------------- */

.mp-result {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 22px;
  justify-items: center;
  background: radial-gradient(circle at 50% 42%, rgba(11, 12, 16, 0.72), rgba(4, 5, 8, 0.96));
}

.mp-result[hidden] { display: none; }

.mp-result__flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}

.mp-result.is-in .mp-result__flash { animation: mp-flash 520ms ease-out forwards; }
@keyframes mp-flash { 0% { opacity: 0.8; } 100% { opacity: 0; } }

.mp-result__word span {
  display: block;
  font: 900 clamp(58px, 13vw, 148px)/0.9 var(--font-display);
  letter-spacing: 0.14em;
  opacity: 0;
}

.mp-result.is-in .mp-result__word span { animation: mp-word 900ms cubic-bezier(0.16, 1, 0.3, 1) forwards; }

.mp-result__word span.is-win { color: var(--cyan); text-shadow: 0 0 46px rgba(98, 246, 232, 0.55); }
.mp-result__word span.is-loss { color: var(--coral); text-shadow: 0 0 46px rgba(255, 101, 119, 0.4); }

@keyframes mp-word {
  0% { opacity: 0; transform: scale(2.4); filter: blur(18px); letter-spacing: 0.5em; }
  55% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); letter-spacing: 0.14em; }
}

.mp-result__panel {
  width: min(460px, 88vw);
  padding: 20px 22px;
  border: 1px solid rgba(98, 246, 232, 0.14);
  border-radius: 14px;
  opacity: 0;
  transform: translateY(16px);
}

.mp-result.is-in .mp-result__panel { animation: mp-panel 520ms 700ms ease-out forwards; }
@keyframes mp-panel { to { opacity: 1; transform: none; } }

.mp-result__sub { margin: 0 0 14px; color: var(--muted); font: 600 11.5px/1.5 var(--font-ui); letter-spacing: 0.04em; text-align: center; }

.mp-result__table { width: 100%; border-collapse: collapse; }
.mp-result__table th { padding: 0 8px 8px; color: var(--dim); font: 700 9px/1 var(--font-display); letter-spacing: 0.16em; text-align: left; }
.mp-result__table th:first-child, .mp-result__table td:first-child { width: 26px; }
.mp-result__table th:nth-child(n+3), .mp-result__table td:nth-child(n+3) { text-align: right; width: 62px; }
.mp-result__table td { padding: 7px 8px; border-top: 1px solid rgba(255, 255, 255, 0.05); color: var(--muted); font: 600 12px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.mp-result__table td em { color: var(--dim); font: 600 9px/1 var(--font-display); font-style: normal; letter-spacing: 0.1em; }
.mp-result__table tr.is-self td { color: var(--ink); background: rgba(98, 246, 232, 0.06); }

.mp-result__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.mp-result__actions .mp-button { flex: 1 1 130px; }
.mp-result__actions .mp-button:disabled { opacity: 0.45; cursor: not-allowed; }

@media (max-width: 720px) {
  .mp-hud-board { min-width: 128px; top: 66px; }
  .mp-hud-self__keys { display: none; }
  .mp-hud-bar { gap: 12px; padding: 7px 11px; }
  .mp-hud-bar__clock { font-size: 20px; min-width: 58px; }
}

.mp-hud-self__touch { display: none; }
.mp-hud-self__touch span { color: var(--dim); font: 600 9px/1.4 var(--font-display); letter-spacing: 0.09em; }
.mp-hud-self__touch b { color: var(--muted); }

/* A touchscreen has no keys to name, so it gets the gestures instead. */
@media (pointer: coarse) {
  .mp-hud-self__keys { display: none; }
  .mp-hud-self__touch { display: grid; gap: 2px; justify-items: center; text-align: center; }
}