@import url("./_tokens.css?v=sq1");

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* Lock the page so a downward drag on the joystick can't scroll or pull the whole
     webview down (Telegram / in-app browsers treat a downward swipe as pull-to-dismiss
     or overscroll). overscroll-behavior kills the browser pull; the fixed body below
     removes any scroll surface for the gesture to grab. */
  overscroll-behavior: none;
  background: var(--color-bg-deep);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  /* Fixed + inset:0 so there is no scrollable page for a swipe to drag (see html,body). */
  position: fixed;
  inset: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  /* in-world betta silhouette used as a mask for cosmetic/onboarding previews */
  --betta-silhouette: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M40 32c0-9-7-16-16-16-3 0-6 1-9 3 4 3 6 8 6 13s-2 10-6 13c3 2 6 3 9 3 9 0 16-7 16-16zm2-7c5-4 12-6 18-5-3 4-4 9-3 13 4 2 7 5 7 5s-3 3-7 5c-1 4 0 9 3 13-6 1-13-1-18-5-2 3-5 5-8 6 2-5 3-11 3-17s-1-12-3-17c3 1 6 3 8 6z'/%3E%3Ccircle cx='20' cy='28' r='2.4' fill='%23000'/%3E%3C/svg%3E");
  background:
    radial-gradient(circle at 25% 12%, rgba(100, 230, 255, 0.08), transparent 26%),
    radial-gradient(circle at 78% 18%, rgba(170, 240, 120, 0.10), transparent 24%),
    linear-gradient(180deg, #09101d 0%, var(--color-bg) 48%, var(--color-bg-deep) 100%);
}

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

/* ============================================================
   SHARED MATRIX COMPONENTS — eyebrow chip, glowing dot,
   micro-label token. The signature markers used across stages.
   ============================================================ */
.eyebrow-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: rgba(14, 19, 28, 0.6);
  border: 1px solid var(--color-border);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent-gold-soft);
  margin-bottom: var(--space-3);
}

.eyebrow-chip-center { align-self: center; }

.eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent-gold);
  box-shadow: 0 0 0 0 rgba(170, 240, 120, 0.55);
  animation: eyebrowPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes eyebrowPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(170, 240, 120, 0.5); opacity: 1; }
  50% { box-shadow: 0 0 0 5px rgba(170, 240, 120, 0); opacity: 0.65; }
}

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

/* glowing dot variant for in-card micro-labels */
.hud-card-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent-gold);
  box-shadow: 0 0 8px rgba(170, 240, 120, 0.6);
  margin-right: 7px;
  vertical-align: middle;
}

/* ============================================================
   HUD — three-zone layout (top / side / bottom)
   ============================================================ */

.hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--layer-hud);
  padding: max(var(--space-3), env(safe-area-inset-top)) max(var(--space-3), env(safe-area-inset-right)) max(var(--space-3), env(safe-area-inset-bottom)) max(var(--space-3), env(safe-area-inset-left));
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
}

.hud > * {
  pointer-events: auto;
}

/* TOP STRIP */
.hud-top {
  grid-row: 1;
  grid-column: 1 / -1;
  /* 3-col grid so the timer sits at the TRUE centre (brand is wider than the
     settings icon, so flex space-between left the timer — and the centred status
     banner below it — looking off-centre). */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
}
.hud-top > :first-child { justify-self: start; }
.hud-top > :last-child { justify-self: end; }.hud-timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 22px;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(170, 240, 120, 0.18), rgba(170, 240, 120, 0.08));
  border: 1px solid var(--color-border-strong);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  min-width: 130px;
}

.hud-timer-label {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-gold-soft);
}

.hud-timer-value {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.hud-icon-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: rgba(14, 18, 32, 0.78);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--motion-quick), color var(--motion-quick), transform var(--motion-quick);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  flex-shrink: 0;
}

.hud-icon-btn:hover,
.hud-icon-btn:focus-visible {
  background: rgba(170, 240, 120, 0.22);
  color: var(--color-text-primary);
  outline: none;
}

.hud-icon-btn:active {
  transform: scale(0.94);
}

.hud-icon-btn-large {
  width: 52px;
  height: 52px;
}

#hud-settings:hover,
#hud-settings:focus-visible {
  transform: rotate(30deg);
}

/* PRIMARY STAT */
.hud-primary {
  grid-row: 2;
  grid-column: 1;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) var(--space-4);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(14, 18, 32, 0.88), rgba(10, 12, 18, 0.88));
  border: 1px solid var(--color-border-strong);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  max-width: 220px;
  box-shadow: var(--shadow-card);
}

.hud-primary-label {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-gold-soft);
}

.hud-primary-value {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(180deg, #fff4cf, var(--color-accent-gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}.hud-status-text {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-align: center;
  color: var(--mtx-green-soft, #b9ffcd);
  background: rgba(6, 20, 12, 0.82);
  border: 1px solid rgba(90, 255, 150, 0.32);
  border-top: 2px solid rgba(90, 255, 150, 0.55);
  border-radius: 0;
  padding: 7px 16px;
  box-shadow: 0 0 18px rgba(60, 230, 130, 0.18), inset 0 0 18px rgba(0, 40, 20, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Arena-supply depletion meter (merged into the primary card) */
.hud-supply-meter {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hud-supply-meter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.hud-supply-meter-value {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

.hud-supply-meter-value b {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-accent-gold-soft);
}

/* Supply split into three tier readouts (icon + value), so it is clear how much of each
   denomination is still on the floor rather than one lumped total. */
.hud-supply-meter-value {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.hud-supply-tier {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.hud-supply-tier img {
  width: 13px;
  height: 13px;
  display: block;
}

/* Small BOOST label sitting above the repurposed bar, so the track below reads as
   boost energy rather than the supply it used to be. Square, terminal-styled. */
.hud-boost-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(120, 240, 255, 0.85);
  padding: 2px 0 3px;
}
.hud-boost-glyph { font-size: 11px; line-height: 1; }

.hud-supply-meter-track {
  position: relative;
  height: 5px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

/* Repurposed: the fill now shows BOOST energy. Width is driven by JS (renderBoostMeter),
   left-anchored. Cyan/green normally; the .is-low class recolours it as a warning. */
.hud-supply-meter-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  transform-origin: left center;
  background: linear-gradient(90deg, #29e6c8, #7ef0a0);
  box-shadow: 0 0 12px rgba(80, 240, 200, 0.5);
  transition: width 90ms linear, background 160ms ease, box-shadow 160ms ease;
}

.hud-supply-meter-fill.is-low {
  background: linear-gradient(90deg, #ff5a4d, #ffb347);
  box-shadow: 0 0 12px rgba(255, 120, 80, 0.55);
}

/* SIDE PANELS */
.hud-side {
  grid-row: 2;
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: stretch;
  width: 200px;
}

.hud-card {
  background: rgba(14, 18, 32, 0.86);
  border: 1px solid var(--color-border);
  border-radius: 0;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  transition: border-color var(--motion-default);
}

.hud-card:hover {
  border-color: var(--color-border-strong);
}

.hud-card-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px var(--space-3);
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  font-family: var(--font-display);
  font-size: 7px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--motion-quick);
}

.hud-card-toggle:hover { color: var(--color-text-primary); }

.hud-card-label {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 7px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Coin icons on the "Top Wallets" header line, right-aligned before the chevron; the
   per-row counts below line up under them. The dot is dropped from this card's title to
   make room for the icons on one line. */
.leader-toggle .hud-card-dot { display: none; }
.leader-toggle { padding-left: 8px; padding-right: 8px; }
.leader-head-icons { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; }
.leader-head-icons .lt { width: 14px; height: 12px; background: transparent no-repeat center / 11px 11px; }
.leader-head-icons .lt-g { background-image: url("/assets/tokens/xgold.png?v=4"); }
.leader-head-icons .lt-s { background-image: url("/assets/tokens/xsilver.png?v=4"); }
.leader-head-icons .lt-b { background-image: url("/assets/tokens/xbronze.png?v=4"); }
.leader-toggle .hud-card-chevron { margin-left: 8px; }
/* A little right room so the counts sit under the header icons (the header keeps a
   chevron at the far right; the rows do not) without eating the name's width. */
.hud-card-leaderboard .leader-row { padding-right: 6px; }
/* Exactly five wallets, so the panel never scrolls. */
.hud-card-leaderboard .hud-card-body { overflow-y: hidden; }

.hud-card-chevron {
  font-size: 12px;
  color: var(--color-accent-gold-soft);
  transition: transform var(--motion-default);
}

.hud-card.is-collapsed .hud-card-chevron {
  transform: rotate(-90deg);
}

.hud-card-body {
  padding: 8px var(--space-3) var(--space-3) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
  font-size: 12px;
  color: var(--color-text-secondary);
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}

.hud-card-body::-webkit-scrollbar {
  width: 4px;
}
.hud-card-body::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: 2px;
}

.hud-card.is-collapsed .hud-card-body {
  display: none;
}

.hud-card-minimap-body {
  padding: var(--space-2);
  display: flex;
  justify-content: center;
  max-height: none;
}

.hud-minimap-frame {
  position: relative;
  padding: 6px;
  border-radius: 0;
  background:
    linear-gradient(135deg, rgba(170, 240, 120, 0.08), transparent 60%),
    rgba(4, 6, 12, 0.55);
  border: 1px solid var(--color-border);
}

.hud-minimap-corner {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 12px;
  height: 12px;
  border-top: 1.5px solid var(--color-accent-gold);
  border-right: 1.5px solid var(--color-accent-gold);
  opacity: 0.7;
  pointer-events: none;
}

#mini-map {
  display: block;
  width: 172px;
  /* Keep the canvas square when its width clamps on mobile (.hud-card-minimap caps
     max-width) — a locked 172px height would paint the circular arena as an ellipse.
     aspect-ratio lets the rendered height track the clamped width (FIX 12). */
  height: auto;
  aspect-ratio: 1 / 1;
  max-width: 100%;
  border-radius: 0;
}

.leader-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 4px 6px;
  border-radius: 0;
  transition: background var(--motion-quick);
  font-size: 12px;
}

.leader-row.is-self {
  background: rgba(170, 240, 120, 0.16);
  color: var(--color-accent-gold-soft);
  font-weight: 700;
  border-left: 2px solid var(--color-accent-gold);
  padding-left: 4px;
}

.leader-row.is-dead {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.leader-row.is-clickable {
  cursor: pointer;
}

.leader-row.is-clickable:hover,
.leader-row.is-clickable:focus-visible {
  background: rgba(170, 240, 120, 0.14);
  outline: none;
}

.dead-cross { color: var(--color-danger); margin-left: 2px; }

/* Leaderboard: coin icons sit ONCE in the header row; each wallet row shows only the
   three counts, aligned in fixed-width columns beneath those icons. */
.leader-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leader-tokens { display: flex; align-items: center; gap: 3px; flex: none; font-variant-numeric: tabular-nums; }
/* Tight fixed-width columns so numbers align under the header icons and the name gets the
   room. The tier is told apart by the NUMBER'S COLOUR (gold / silver / bronze), so the
   columns can be narrow. */
.leader-tokens .lt { width: 16px; text-align: right; font-size: 11px; line-height: 1; font-weight: 600; }
.leader-tokens .lt-g { color: #f2c14e; }
.leader-tokens .lt-s { color: #c4d3dd; }
.leader-tokens .lt-b { color: #d98a52; }

/* Header row: the icons, one per column, no numbers. Same paddings as a row so the
   columns align exactly with the counts below. */
.leader-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding: 2px 6px 4px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--color-border);
}
.leader-head .lt {
  width: 16px;
  height: 12px;
  background: transparent no-repeat center / 12px 12px;
}
.leader-head .lt-g { background-image: url("/assets/tokens/xgold.png?v=4"); }
.leader-head .lt-s { background-image: url("/assets/tokens/xsilver.png?v=4"); }
.leader-head .lt-b { background-image: url("/assets/tokens/xbronze.png?v=4"); }

/* BOTTOM STRIP */
.hud-bottom {
  grid-row: 3;
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.hud-controls-hint {
  font-size: 11px;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  background: rgba(4, 5, 10, 0.72);
  padding: 5px 12px;
  border-radius: 0;
  border: 1px solid rgba(255, 244, 207, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 0;
  background: rgba(170, 240, 120, 0.18);
  color: var(--color-accent-gold-soft);
  margin: 0 2px;
}

.hud-bottom-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

/* BOOST: a charge/meter pill. The ::before is the fill state, the
   text node ("Spot"/"Boost"/"Spectate") is set by JS so we never wrap it. */
.hud-boost-pill {
  position: relative;
  overflow: hidden;
  padding: 10px 24px;
  border-radius: 0;
  background: rgba(14, 19, 28, 0.78);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background var(--motion-quick), color var(--motion-quick), border-color var(--motion-quick), box-shadow var(--motion-quick);
  min-width: 120px;
  text-align: center;
}

/* idle charge bar sits dim at the base of the pill */
.hud-boost-pill::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, var(--color-accent-gold), var(--color-accent-gold-soft));
  opacity: 0.35;
  transform-origin: left center;
  transform: scaleX(0.4);
  transition: transform var(--motion-default), opacity var(--motion-quick);
}

.hud-boost-pill.is-boosting {
  background: linear-gradient(180deg, var(--color-accent-gold-soft), var(--color-accent-gold));
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-glow-gold);
  border-color: var(--color-accent-gold);
}

.hud-boost-pill.is-boosting::before {
  height: 100%;
  opacity: 0.0;
  transform: scaleX(1);
}

.hud-boost-pill.is-spectator {
  background: rgba(255, 90, 90, 0.16);
  color: var(--color-danger);
  border-color: rgba(255, 90, 90, 0.4);
}

.hud-boost-pill.is-spectator::before {
  background: var(--color-danger);
  opacity: 0.25;
  transform: scaleX(1);
}

.hud-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 0;
  background: rgba(14, 19, 28, 0.6);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  letter-spacing: 0.04em;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background var(--motion-quick), color var(--motion-quick), border-color var(--motion-quick);
  min-height: 44px;
}

.hud-pill:hover,
.hud-pill:focus-visible {
  background: rgba(170, 240, 120, 0.16);
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
  outline: none;
}.hud-pill-icon {
  font-size: 14px;
  line-height: 1;
}

/* ============================================================
   EMOTE DOCK (collapsible)
   ============================================================ */
.emote-dock {
  position: fixed;
  left: 50%;
  bottom: calc(var(--space-7) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-2);
  padding: 10px;
  background: rgba(7, 10, 17, 0.92);
  border: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: var(--shadow-card-strong);
  z-index: calc(var(--layer-hud) + 4);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: emote-rise var(--motion-default) ease;
}

.emote-dock[hidden] { display: none; }

@keyframes emote-rise {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.emote-btn {
  --emote-color: var(--color-accent-gold);
  padding: 10px 16px;
  border-radius: 0;
  background: transparent;
  border: 1px solid transparent;
  color: var(--emote-color);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background var(--motion-quick), transform var(--motion-quick);
  min-width: 58px;
  min-height: 44px;
}

.emote-btn:hover,
.emote-btn:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  outline: none;
  transform: translateY(-1px);
  border-color: var(--emote-color);
}

/* ============================================================
   SETTINGS DRAWER (slide from right)
   ============================================================ */
.settings-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 100%);
  background: linear-gradient(180deg, rgba(14, 18, 32, 0.98), rgba(10, 12, 18, 0.98));
  border-left: 1px solid var(--color-border);
  box-shadow: -16px 0 40px rgba(0, 0, 0, 0.4);
  z-index: var(--layer-modal);
  padding: max(var(--space-4), env(safe-area-inset-top)) var(--space-4) max(var(--space-4), env(safe-area-inset-bottom)) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  animation: drawer-slide var(--motion-default) ease;
}

.settings-drawer[hidden] { display: none; }

@keyframes drawer-slide {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.settings-drawer-head {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "eyebrow close"
    "title   close";
  align-items: center;
  gap: 2px var(--space-3);
}

.settings-eyebrow {
  grid-area: eyebrow;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent-gold-soft);
}

.settings-drawer-head h3 {
  grid-area: title;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--color-text-primary);
}

.settings-drawer-head .hud-icon-btn { grid-area: close; }

.settings-drawer-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}

/* tiered sections with micro-label headers */
.settings-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* An author `display` beats the UA [hidden] rule, so a group with the attribute
   would still render. The cosmetics group ships hidden — see COSMETICS_ENABLED
   in js/fish-trade.js — and this is what actually keeps it off screen. */
.settings-group[hidden] { display: none; }

.settings-group-head {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 2px;
}

.settings-group-nav { opacity: 0.92; }

.settings-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: 0;
  background: rgba(14, 19, 28, 0.6);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--motion-quick), border-color var(--motion-quick);
  width: 100%;
  text-align: left;
}

.settings-row:hover,
.settings-row:focus-visible {
  background: rgba(170, 240, 120, 0.1);
  border-color: var(--color-border-strong);
  outline: none;
}

.settings-row-nav {
  background: transparent;
  border-color: var(--color-border);
}

.settings-row-icon {
  font-size: 20px;
}

.settings-row-label { flex: 1; }

.settings-row-value {
  font-size: 12px;
  color: var(--color-accent-gold-soft);
}

/* audio toggle styled as a real switch */
.settings-row-switch .settings-row-value {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  min-width: 28px;
  text-align: right;
}

.settings-switch {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--color-border);
  transition: background var(--motion-quick), border-color var(--motion-quick);
  flex-shrink: 0;
}

.settings-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-text-secondary);
  transition: transform var(--motion-default), background var(--motion-quick);
}

/* aria-pressed=true => MUTED, aria-pressed=false => sound ON.
   Switch shows the lit/ON state when sound is on (not pressed). */
#audio-toggle[aria-pressed="false"] .settings-switch {
  background: rgba(170, 240, 120, 0.45);
  border-color: var(--color-border-strong);
}

#audio-toggle[aria-pressed="false"] .settings-switch-knob {
  transform: translateX(18px);
  background: var(--color-accent-gold);
}

.settings-drawer-foot {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 244, 207, 0.06);
}

.settings-tips-title {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.settings-tips {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--color-text-secondary);
}

.settings-tips b {
  display: inline-block;
  font-family: var(--font-display);
  color: var(--color-accent-gold-soft);
  min-width: 50px;
}

/* ============================================================
   DEATH OVERLAYS
   ============================================================ */
.death-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle, transparent 20%, rgba(255, 90, 90, 0.35) 100%);
  opacity: 0;
  transition: opacity 600ms ease;
  z-index: calc(var(--layer-hud) + 5);
}

.death-flash.show {
  opacity: 1;
  animation: death-flash-pulse 1.25s ease forwards;
}

@keyframes death-flash-pulse {
  0% { opacity: 0; }
  20% { opacity: 1; }
  100% { opacity: 0; }
}

.death-flash.hidden { display: none; }

/* A toast, not a slab. Measured on a 375px screen this was 310x235px — 83% of the
   width and a third of the height — parked over the middle of the arena at the exact
   moment you most want to see what killed you and where everyone else is. It now sits
   below centre, sized to its text, and stays out of the way. */
.death-alert {
  position: fixed;
  top: 62%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* One row: "FLATLINED  Rammed by X · 3 ABIT spilled", small text. */
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  padding: 5px 10px;
  background: rgba(40, 8, 14, 0.9);
  border: 1px solid var(--color-danger);
  box-shadow: 0 4px 12px rgba(255, 90, 90, 0.18);
  z-index: calc(var(--layer-hud) + 6);
  max-width: 92vw;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--motion-default), transform var(--motion-default);
}

.death-alert.show {
  opacity: 1;
  animation: death-alert-bounce 1.25s ease forwards;
}

@keyframes death-alert-bounce {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(0.96); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  82% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(1.04); }
}

.death-alert.hidden { display: none; }

.death-alert-label {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-danger);
  flex: 0 0 auto;
}

.death-alert-text {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.3;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   OVERLAYS (room + lobby + results)
   ============================================================ */
.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  /* flex-start (not center) so a child taller than the viewport stays fully
     scrollable — `align-items: center` clips the top of an oversized child past
     the scroll origin. The child uses `margin: auto` to recover centering when
     it does fit. */
  align-items: flex-start;
  justify-content: center;
  padding: max(var(--space-4), env(safe-area-inset-top)) var(--space-4) max(var(--space-4), env(safe-area-inset-bottom)) var(--space-4);
  background: rgba(4, 5, 10, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: var(--layer-modal);
  overflow-y: auto;
}

.overlay.hidden { display: none; }

/* ===== MATRIX / TRON modal backdrop ===== */
.overlay-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 1;
  background-color: #03070a;
  background-image:
    radial-gradient(75% 55% at 50% 108%, rgba(64, 255, 150, 0.26), transparent 60%),
    linear-gradient(rgba(80, 255, 160, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80, 255, 160, 0.07) 1px, transparent 1px);
  background-size: auto, 42px 42px, 42px 42px;
}

/* TRON perspective floor inside the modal */
.overlay-backdrop::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 300%;
  height: 70%;
  transform: translateX(-50%) perspective(420px) rotateX(72deg);
  transform-origin: bottom center;
  background-image:
    linear-gradient(rgba(110, 255, 175, 0.45) 2px, transparent 2px),
    linear-gradient(90deg, rgba(110, 255, 175, 0.34) 2px, transparent 2px);
  background-size: 90px 90px, 90px 90px;
  -webkit-mask-image: linear-gradient(to top, #000 4%, transparent 58%);
  mask-image: linear-gradient(to top, #000 4%, transparent 58%);
}

/* CRT scanlines */
.overlay-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,14,7,0.5) 2px 4px);
}
@media (prefers-reduced-motion: reduce) { .overlay-backdrop::before { animation: none; } }

.stage {
  position: relative;
  z-index: 1;
  width: min(640px, 100%);
  /* auto margins center the panel when it fits and collapse to keep the top
     reachable when it's taller than the (flex-start) overlay viewport. */
  margin: auto;
  background: linear-gradient(180deg, rgba(14, 19, 28, 0.92), rgba(8, 11, 17, 0.94));
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  padding: var(--space-4);
  box-shadow: var(--shadow-card-strong);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* room-selection stage — rooms only, sized so all 5 cards fit without scroll */
.stage-cockpit {
  width: min(720px, 100%);
}

/* wallet + name stage — focused single column */
.stage-wallet {
  width: min(460px, 100%);
}

.wallet-stage-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.wallet-stage-body .identity-card {
  width: 100%;
}

/* lobby "launch bay" stage — focused single column */
.stage-bay {
  width: min(560px, 100%);
}

.stage[hidden] { display: none; }

.stage-head {
  text-align: left;
}

.stage-head h1 {
  font-family: var(--font-display);
  font-size: clamp(18px, 3vw, 22px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 4px 0;
  background: linear-gradient(180deg, #fff4cf, var(--color-accent-gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stage-head p {
  color: var(--color-text-secondary);
  font-size: 12px;
  margin: 0;
}

/* ============================================================
   CONSOLE HEADER — step rail + progress marker (shared by both stages)
   ============================================================ */
.console-head {
  position: relative;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--mtx-line);
}

.console-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 64px;
  height: 2px;
  background: var(--mtx-green);
  box-shadow: 0 0 14px var(--mtx-green);
}

.console-head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.console-head .eyebrow-chip { margin-bottom: 0; }

.console-progress {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.console-progress-step {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--mtx-green-dim);
}

.console-progress-step.is-active {
  color: var(--mtx-green);
  text-shadow: 0 0 10px var(--mtx-glow);
}

.console-progress-step.is-done { color: var(--mtx-green-soft); }

.console-progress-bar {
  width: 36px;
  height: 2px;
  background: var(--mtx-line);
}

.console-progress-bar.is-active {
  background: var(--mtx-green);
  box-shadow: 0 0 8px var(--mtx-green);
}

/* shared bracketed micro-label used across the console panels */
.console-micro-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mtx-green-soft);
}

/* merged identity / console panel: wallet + name */
.identity-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  padding-top: calc(var(--space-3) + 5px);
  border-radius: 0;
  background: var(--mtx-panel);
  border: 1px solid var(--mtx-line);
  box-shadow: 0 0 22px var(--mtx-glow), inset 0 0 30px rgba(0, 40, 20, 0.2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
}

/* brighter 2px green top accent */
.identity-card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 2px;
  background: var(--mtx-green);
  box-shadow: 0 0 12px var(--mtx-green);
  z-index: 2;
}

.identity-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 100% 0%, rgba(77, 255, 140, 0.08), transparent 45%),
    linear-gradient(rgba(90, 255, 150, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90, 255, 150, 0.02) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px;
}

.identity-card > * { position: relative; z-index: 1; }

/* terminal title bar */
.console-card-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--mtx-line);
}

.console-card-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mtx-green);
  box-shadow: 0 0 8px var(--mtx-green);
  flex-shrink: 0;
  animation: eyebrowPulse 2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) { .console-card-led { animation: none; } }

.console-card-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mtx-green);
}

.identity-divider {
  height: 1px;
  background: var(--mtx-line);
}

.identity-roster {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.roster-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.user-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 112px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}

.user-list::-webkit-scrollbar { width: 4px; }
.user-list::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 2px; }

.user-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding: 5px 8px;
  border-radius: 0;
  font-size: 12px;
  color: var(--color-text-secondary);
  background: rgba(4, 6, 12, 0.5);
  border-left: 2px solid var(--mtx-line-strong);
}

.user-row span:first-child {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
  color: var(--mtx-green-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-row span:last-child {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* WALLET STRIP — stacked inside the identity rail */
.wallet-strip {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: stretch;
}

.wallet-strip-info,
.wallet-strip-balance {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.wallet-strip-balance {
  padding: var(--space-2) var(--space-3);
  border-radius: 0;
  background: rgba(4, 6, 12, 0.45);
  border: 1px solid var(--color-border);
  border-left: 2px solid var(--color-accent-gold);
}

.wallet-strip-label {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.wallet-strip-status {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-strip-status.is-connected {
  color: var(--color-success);
}

.wallet-strip-value {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--color-text-primary);
}
.wallet-strip-value b {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-accent-gold-soft);
}

.wallet-strip-btn {
  width: 100%;
  padding: 9px 14px;
  border-radius: 0;
  background: linear-gradient(180deg, var(--color-accent-gold-soft), var(--color-accent-gold));
  color: var(--color-text-inverse);
  border: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
  min-height: 38px;
  transition: transform var(--motion-quick), box-shadow var(--motion-quick);
}

.wallet-strip-btn:hover,
.wallet-strip-btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow-gold);
  outline: none;
}

.wallet-strip-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Attention pulse when a blocked action (e.g. entering a paid room) needs the
   player to connect their wallet first. */
@keyframes wallet-attention {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 110, 110, 0); }
  25% { box-shadow: 0 0 0 3px rgba(255, 120, 120, 0.55), 0 0 20px rgba(255, 90, 90, 0.6); }
  60% { box-shadow: 0 0 0 2px rgba(255, 120, 120, 0.32); }
}
.wallet-strip-btn.needs-attention {
  animation: wallet-attention 0.85s ease 2;
  border-color: #ff7a7a !important;
}
.name-strip input.needs-attention {
  animation: wallet-attention 0.85s ease 2;
  border-color: #ff7a7a !important;
}

/* NAME STRIP */
.name-strip {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.name-strip label {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.name-strip input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 0;
  background: rgba(4, 5, 10, 0.62);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 13px;
  min-height: 36px;
  transition: border-color var(--motion-quick), background var(--motion-quick);
}

.name-strip input:focus {
  outline: none;
  border-color: var(--color-accent-gold);
  background: rgba(4, 5, 10, 0.82);
}

.name-strip input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ROOM LIST — focal column of the cockpit */
.room-list-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.room-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.room-list-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mtx-muted);
}

.room-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

/* All 5 rooms fit on one page without scrolling; the odd final card spans the
   full row so the grid reads as 2 + 2 + 1. */
.room-card:last-child:nth-child(odd) { grid-column: 1 / -1; }

.room-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 11px var(--space-3) var(--space-3);
  border-radius: 0;
  background: var(--mtx-panel);
  border: 1px solid var(--mtx-line);
  cursor: pointer;
  text-align: left;
  transition: transform var(--motion-quick), border-color var(--motion-default), background var(--motion-default), box-shadow var(--motion-default);
  font-family: var(--font-body);
  color: var(--color-text-primary);
  min-height: 0;
  overflow: hidden;
}

/* brighter 2px green top accent, lit up on hover/active */
.room-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 3px;
  background: var(--room-accent, var(--mtx-green));
  opacity: 0.6;
  transition: opacity var(--motion-default), box-shadow var(--motion-default);
}

.room-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--room-accent, var(--mtx-green)) 55%, var(--mtx-line-strong));
  box-shadow: 0 0 22px color-mix(in srgb, var(--room-accent, var(--mtx-green)) 30%, transparent);
}

.room-card:hover::before { opacity: 0.85; }

/* Keyboard focus ring — room cards are <button>s and tab-focusable; give them an
   on-brand ring matching the rest of the HUD instead of the clashing UA outline. */
.room-card:focus-visible {
  outline: 2px solid var(--room-accent, var(--mtx-green));
  outline-offset: 2px;
  border-color: color-mix(in srgb, var(--room-accent, var(--mtx-green)) 55%, var(--mtx-line-strong));
  box-shadow: 0 0 22px color-mix(in srgb, var(--room-accent, var(--mtx-green)) 30%, transparent);
}

.room-card:focus-visible::before { opacity: 0.85; }

.room-card.active {
  border-color: var(--room-accent, var(--mtx-green));
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--room-accent, var(--mtx-green)) 16%, transparent), transparent 55%),
    var(--mtx-panel);
  box-shadow: 0 0 0 1px var(--room-accent, var(--mtx-green)), 0 0 30px color-mix(in srgb, var(--room-accent, var(--mtx-green)) 38%, transparent);
}

.room-card.active::before {
  opacity: 1;
  box-shadow: 0 0 14px var(--room-accent, var(--mtx-green));
}

/* card top row: padded index + fee chip */
.room-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.room-card-index {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--room-accent, var(--mtx-green-dim));
  opacity: 0.85;
}

.room-card.active .room-card-index { color: var(--room-accent, var(--mtx-green)); opacity: 1; }

/* fee chip — bracketed terminal pill */
.room-fee {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 4px;
}

.room-fee-free { color: var(--mtx-green); }
.room-fee-paid { color: var(--room-accent, var(--color-warning, #ffb347)); }

/* Real SOL coin icon used as the marker before a SOL fee amount (replaces the
   plain ◎ glyph). Scales with the surrounding font-size. */
.sol-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.14em;
  margin-right: 0.18em;
  flex: none;
  background: url("/assets/sol.svg") center / contain no-repeat;
  /* Glow halo so the dark coin separates from the dark panel. */
  filter: drop-shadow(0 0 2px rgba(45, 226, 168, 0.95)) drop-shadow(0 0 5px rgba(45, 226, 168, 0.55));
}
/* Keep the coin + amount on one line in the fee chip / pay button. */
.room-fee { white-space: nowrap; }
/* Bundle the coin + amount into a single inline-flex item so the .stage-cta
   flex `gap` (8px) is not injected between the coin and its number — the coin
   hugs the amount. Used on the Pay button. */
.sol-fee {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* status chip row (free practice / most popular) */
.room-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: -2px;
}

.room-card h3 {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.1;
  color: var(--mtx-green-soft);
}

.room-card.active h3 { color: var(--room-accent, var(--mtx-green)); }

.room-card .room-tagline {
  font-size: 11px;
  color: var(--color-text-secondary);
  line-height: 1.35;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* compact inline meta: small label + value pairs on one dense row */
.room-card .room-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px solid var(--mtx-line);
}

/* inline label + value (label then value, side by side) */
.room-card .room-meta span {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
}
.room-card .room-meta span i {
  font-style: normal;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mtx-muted);
  white-space: nowrap;
}
.room-card .room-meta span b {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: var(--mtx-green-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* select affordance pinned to the card foot */
.room-card-select {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mtx-green-dim);
}

.room-card:hover .room-card-select { color: var(--mtx-green-soft); }

.room-card.active .room-card-select {
  color: var(--room-accent, var(--mtx-green));
  text-shadow: 0 0 10px color-mix(in srgb, var(--room-accent, var(--mtx-green)) 50%, transparent);
}

/* ROOM BADGE (status chip: free practice / most popular) */
.room-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.room-badge-free {
  color: var(--mtx-green);
  border: 1px solid var(--mtx-line-strong);
  background: rgba(77, 255, 140, 0.1);
}

.room-badge-popular {
  color: #ffe7a3;
  border: 1px solid rgba(255, 200, 90, 0.4);
  background: rgba(255, 200, 90, 0.12);
}

/* ROOM NOTE */
.room-note {
  padding: var(--space-2) var(--space-3);
  border-radius: 0;
  background: rgba(20, 241, 149, 0.06);
  border: 1px solid rgba(20, 241, 149, 0.16);
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.room-note.is-paid {
  background: rgba(170, 240, 120, 0.1);
  border-color: rgba(170, 240, 120, 0.32);
  color: var(--color-accent-gold-soft);
}

/* skeleton placeholder cards/rows while data loads */
.room-card-skeleton {
  min-height: 96px;
  border-radius: 0;
  border: 1px solid var(--color-border);
}

/* STAGE FOOT */
.stage-foot {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-2);
}

.stage-cta,
.stage-cta-secondary {
  padding: 10px 22px;
  border-radius: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
  min-height: 40px;
  transition: transform var(--motion-quick), background var(--motion-quick), box-shadow var(--motion-quick);
  border: 1px solid transparent;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.stage-cta {
  background: linear-gradient(180deg, var(--color-accent-gold-soft), var(--color-accent-gold));
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-glow-gold);
  flex: 1;
  font-family: var(--font-mono);
}

/* "> " terminal prefix on the primary action (JS owns the label text) */
.stage-cta::before {
  content: "> ";
  font-weight: 800;
}

.stage-cta:hover,
.stage-cta:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(170, 240, 120, 0.5);
  outline: none;
}

.stage-cta:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.stage-cta-secondary {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text-secondary);
}

.stage-cta-secondary:hover,
.stage-cta-secondary:focus-visible {
  background: rgba(170, 240, 120, 0.12);
  color: var(--color-text-primary);
  outline: none;
}

/* LAUNCH BAY — the dominant focal readout */
.lobby-countdown {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  padding-top: calc(var(--space-3) + 4px);
  border-radius: 0;
  background:
    radial-gradient(circle at 50% -10%, rgba(77, 255, 140, 0.16), transparent 60%),
    var(--mtx-panel);
  border: 1px solid var(--mtx-line-strong);
  box-shadow: 0 0 30px var(--mtx-glow), inset 0 0 40px rgba(0, 40, 20, 0.25);
  text-align: center;
  overflow: hidden;
}

/* brighter 2px green top accent */
.lobby-countdown::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 2px;
  background: var(--mtx-green);
  box-shadow: 0 0 14px var(--mtx-green);
  z-index: 2;
}

.lobby-countdown::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(90, 255, 150, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90, 255, 150, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
}

.lobby-countdown > * { position: relative; z-index: 1; }

/* terminal title bar inside the launch panel */
.launch-panel-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.lobby-countdown-value {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.lobby-countdown-num {
  font-family: var(--font-mono);
  font-size: clamp(30px, 6vw, 40px);
  font-weight: 800;
  line-height: 1;
  color: var(--mtx-green);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 32px var(--mtx-glow);
}

.lobby-countdown-unit {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mtx-muted);
}

/* LOBBY STATS — shared stat-tile component */
.lobby-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.lobby-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  border-radius: 0;
  background: var(--mtx-panel);
  border: 1px solid var(--mtx-line);
  text-align: left;
  overflow: hidden;
}

.lobby-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--mtx-green);
  box-shadow: 0 0 10px var(--mtx-green);
}

.lobby-stat span {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mtx-muted);
}

.lobby-stat b {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 800;
  color: var(--mtx-green-soft);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* LOBBY PARTICIPANTS — lively trader roster */
.lobby-participants {
  background: var(--mtx-panel);
  border: 1px solid var(--mtx-line);
  border-radius: 0;
  overflow: hidden;
}

.lobby-participants-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--mtx-line);
}

/* ============================================================
   LOBBY TANK — waiting traders rendered as small swimming betta fish
   ============================================================ */
/* Waiting traders are laid out as a tidy grid of name chips (no floating). */
.lobby-list.lobby-tank {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 6px;
  padding: var(--space-3);
  max-height: 244px;
  overflow-y: auto;
  background:
    radial-gradient(circle at 50% -20%, rgba(77, 255, 140, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(5, 18, 14, 0.4), rgba(3, 10, 8, 0.6));
}

/* subtle grid texture behind the roster */
.lobby-list.lobby-tank::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(90, 255, 150, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90, 255, 150, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  z-index: 0;
}

/* the old floating "tank floor" line is unused in the tidy list */
.tank-floor { display: none; }

/* each waiting trader is a tidy chip: fish glyph + name */
.tank-fish {
  position: static;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 6px 9px;
  border: 1px solid var(--mtx-line);
  border-radius: 0;
  background: rgba(6, 16, 12, 0.55);
  z-index: 1;
}
.tank-fish.is-self {
  border-color: var(--mtx-green);
  background: rgba(77, 255, 140, 0.1);
}

.tank-fish-body {
  position: static;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  animation: none;
}

.tank-fish-img-wrap {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 20px;
  animation: none;
}

.tank-fish-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scaleX(-1);
  filter: drop-shadow(0 0 4px rgba(40, 255, 130, 0.25));
  animation: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* self chip: green tint on the glyph */
.tank-fish.is-self .tank-fish-img {
  filter: drop-shadow(0 0 4px var(--mtx-green)) brightness(1.05);
}

/* ready marker: small green dot badge on the fish glyph */
.tank-ready-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mtx-green-dim);
  opacity: 0.4;
  transition: background var(--motion-quick), box-shadow var(--motion-quick), opacity var(--motion-quick);
}

.tank-fish.is-ready .tank-ready-dot {
  background: var(--mtx-green);
  box-shadow: 0 0 8px var(--mtx-green);
  opacity: 1;
}

/* trader name — fills the chip, ellipsis if long */
.tank-name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--mtx-green-soft);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tank-fish.is-self .tank-name { color: var(--mtx-green); }

/* "You" pill on the self chip */
.tank-you {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mtx-green);
  padding: 1px 4px;
  border-radius: 0;
  border: 1px solid var(--mtx-line-strong);
  background: rgba(77, 255, 140, 0.14);
}

/* each trader chip fades + slides in once, as that trader enters the room */
.tank-fish.is-entering {
  animation: rosterIn 0.42s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
@keyframes rosterIn {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .tank-fish.is-entering { animation: none; }
}

/* animated "waiting for traders" status */
.lobby-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mtx-green-soft);
}

.lobby-status::before {
  content: "> ";
  width: auto;
  height: auto;
  color: var(--mtx-green);
  font-family: var(--font-mono);
  font-weight: 800;
  animation: eyebrowPulse 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .lobby-status::before { animation: none; }
}

/* ============================================================
   RESULTS OVERLAY
   ============================================================ */
.results-panel {
  position: relative;
  z-index: 1;
  width: min(720px, 100%);
  /* center when it fits, stay scrollable from the top when it doesn't (matches
     .stage; the parent .overlay is align-items: flex-start). */
  margin: auto;
  background: linear-gradient(180deg, rgba(14, 18, 32, 0.96), rgba(10, 12, 18, 0.96));
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  padding: var(--space-6);
  box-shadow: var(--shadow-card-strong);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* results-eyebrow now uses the shared .eyebrow-chip component; drop its
   default margin-bottom so spacing relies solely on the panel's flex gap. */
.results-eyebrow { margin-bottom: 0; }

#results-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #fff4cf, var(--color-accent-gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.results-subtitle {
  color: var(--color-text-secondary);
  font-size: 15px;
  margin: 0 0 var(--space-3) 0;
}

.results-podium {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(170, 240, 120, 0.18), rgba(170, 240, 120, 0.08));
  border: 1px solid var(--color-border-strong);
  align-self: center;
}

.results-podium-rank {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 800;
  color: var(--color-accent-gold-soft);
  line-height: 1;
}

.results-podium-meta {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.results-podium-meta span {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.results-podium-meta b {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.results-practice-balance {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: 0;
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.32);
  color: #34d399;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.results-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.results-column {
  background: rgba(4, 5, 10, 0.5);
  border: 1px solid var(--color-border);
  border-radius: 0;
  padding: var(--space-3);
  text-align: left;
}

.results-column-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.results-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.results-dot-win { background: var(--color-success); }
.results-dot-loss { background: var(--color-danger); }

.results-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 240px;
  overflow-y: auto;
}

.results-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px var(--space-3);
  border-radius: 0;
  font-size: 13px;
  transition: background var(--motion-quick);
}

.results-row.winner {
  background: rgba(20, 241, 149, 0.06);
}

.results-row.loser {
  background: rgba(255, 90, 90, 0.05);
  color: var(--color-text-muted);
}

.results-row.results-row-more {
  background: transparent;
  font-style: italic;
  opacity: 0.7;
}

.results-foot {
  margin-top: var(--space-2);
}

/* ============================================================
   RESPONSIVE — mobile first refinements
   ============================================================ */
@media (max-width: 880px) {
  .hud {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto;
  }
  .hud-top { grid-row: 1; }
  .hud-primary {
    grid-row: 2;
    grid-column: 1;
    max-width: none;
    padding: var(--space-2) var(--space-3);
    gap: 1px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "value"
      "meter";
    align-items: baseline;
    column-gap: var(--space-3);
  }
  .hud-primary-label { grid-area: label; font-size: 9px; }
  .hud-primary-value { grid-area: value; font-size: 26px; }
  /* On mobile the HUD restacks and .hud-primary becomes a full-width card in
     row 2, occupying the same vertical band as the centered status banner —
     push the banner well below the primary card so the two no longer collide. */
  .hud-status-banner {
    top: calc(var(--hud-safe-top, env(safe-area-inset-top, 0px)) + 168px);
    max-width: min(560px, 92vw);
  }
  .hud-supply-meter {
    grid-area: meter;
    margin-top: var(--space-2);
    padding-top: var(--space-2);
  }
  .hud-supply-meter-value { font-size: 11px; }
  .hud-side {
    grid-row: 3;
    grid-column: 1;
    width: auto;
    justify-self: end;
    flex-direction: column;
    align-items: flex-end;
    pointer-events: none;
  }
  .hud-side > * { pointer-events: auto; }
  .hud-card-leaderboard,
  .hud-card-minimap {
    max-width: 200px;
  }
  .hud-bottom {
    grid-row: 4;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .hud-controls-hint { font-size: 10px; }
  .hud-pill {
    padding: 10px 14px;
    font-size: 12px;
  }
  .hud-boost-pill {
    min-width: 84px;
    padding: 10px 16px;
    font-size: 11px;
  }
  .hud-timer {
    padding: 6px 16px;
    min-width: 110px;
  }
  .hud-timer-value {
    font-size: 17px;
  }  .stage {
    padding: var(--space-5) var(--space-4);
    gap: var(--space-4);
  }
  .room-list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }
  .lobby-stats { grid-template-columns: repeat(3, 1fr); }
  /* single-column roster on mobile */
  .lobby-list.lobby-tank { grid-template-columns: 1fr; max-height: 210px; }
  .results-columns { grid-template-columns: 1fr; }
  .stage-foot { flex-direction: column-reverse; }
  .stage-foot .stage-cta,
  .stage-foot .stage-cta-secondary { width: 100%; }

  .settings-drawer { width: 100%; }
}

@media (max-width: 480px) {
  .hud-card-leaderboard.is-collapsed .hud-card-toggle,
  .hud-card-minimap.is-collapsed .hud-card-toggle {
    padding: 6px var(--space-2);
  }
  .hud-card-leaderboard .hud-card-body {
    max-height: 160px;
  }
  .emote-dock {
    gap: 6px;
    padding: 6px;
    flex-wrap: wrap;
    max-width: calc(100vw - 32px);
  }
  .emote-btn {
    padding: 8px 12px;
    font-size: 11px;
    min-width: 50px;
  }
  .stage-head h1 { font-size: 22px; }
  .stage { padding: var(--space-4) var(--space-3); }
  .hud-primary-value { font-size: 24px; }
}

/* ============================================================
   Compact phone HUD — shrink every panel + hug the corners so the
   arena stays clear while playing (fewer, smaller, translucent boxes).
   ============================================================ */
@media (max-width: 600px) {
  /* Wallet: a small top-left chip — tokens in ONE row, no big label/box */
  .hud-primary {
    display: flex;
    flex-direction: column;
    gap: 3px;
    justify-self: start;
    width: auto;
    max-width: 66vw;
    padding: 5px 8px;
    border-radius: 0;
    background: rgba(10, 14, 22, 0.66);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .hud-primary-label { display: none; }
  .hud-primary-tokens .hud-token-row { flex-direction: row; gap: 11px; margin-top: 0; }
  .hud-primary-tokens .hud-token { gap: 4px; }
  .hud-primary-tokens .hud-token img { width: 15px; height: 15px; }
  .hud-primary-tokens .hud-token b { font-size: 14px; min-width: 0; }
  .hud-primary-tokens .hud-token i { display: none; } /* the coin icon already says the tier */
  .hud-supply-meter { margin-top: 3px; padding-top: 4px; }
  .hud-supply-meter .hud-card-label { font-size: 8px; letter-spacing: 0.08em; }
  .hud-supply-meter-value { font-size: 10px; }
  .hud-supply-meter-value b { font-size: 11px; }
  .hud-supply-meter-track { height: 3px; }
  .hud-supply-coins img { width: 10px; height: 10px; }

  /* Status banner: small, tucked just under the timer (wallet is compact now) */
  .hud-status-banner { top: calc(var(--hud-safe-top, env(safe-area-inset-top, 0px)) + 66px); max-width: 90vw; }
  .hud-status-text { font-size: 10px; padding: 5px 10px; }

  /* Side cards: narrow + more translucent so the arena shows through them */
  .hud-side { gap: 5px; }
  .hud-card-leaderboard,
  .hud-card-minimap { max-width: 124px; }
  .hud-card { background: rgba(10, 14, 22, 0.56); border-radius: 0; }
  .hud-card-toggle { padding: 4px 7px; font-size: 7px; letter-spacing: 0.06em; }
  .hud-card-label { font-size: 7px; letter-spacing: 0.06em; }
  .hud-card-leaderboard .hud-card-body { padding: 4px 6px 6px; gap: 2px; max-height: 116px; }
  .leader-row { font-size: 9.5px; padding: 2px 4px; gap: 4px; }
  .leader-tokens { gap: 3px; }
  .leader-tokens .lt { width: 14px; text-align: right; font-size: 8.5px; font-weight: 600; }
  .leader-head .lt { width: 14px; height: 10px; background-size: 10px 10px; }
  #mini-map { width: 104px; }
  .hud-card-minimap-body { padding: 4px; }
  .hud-minimap-frame { padding: 3px; }

  /* Bottom: drop the controls hint, slim the boost pill */
  .hud-controls-hint { display: none; }
  .hud-boost-pill { min-width: 66px; padding: 7px 12px; font-size: 10px; }
  .hud-pill { padding: 8px 12px; font-size: 11px; }
}

/* ============================================================
   Landscape phones — keep HUD compact at top
   ============================================================ */
@media (max-height: 480px) and (orientation: landscape) {
  .hud-primary { max-width: 220px; padding: var(--space-2); }
  .hud-primary-value { font-size: 22px; }
  .hud-side { width: 160px; }
  /* keep the supply meter visible but compact — the economic stat must never vanish */
  .hud-supply-meter { margin-top: var(--space-2); padding-top: var(--space-2); }
  .hud-supply-meter-track { height: 4px; }
  .hud-bottom { padding-bottom: 4px; }
  .hud-controls-hint { display: none; }
}

/* ============================================================
   Skeleton shimmer (kept from before)
   ============================================================ */
.skeleton-shimmer {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 0;
}

.skeleton-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 244, 207, 0.08), transparent);
  animation: skeleton-sweep 1.4s linear infinite;
}

@keyframes skeleton-sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

/* ============================================================
   Achievement toast (server "newlyUnlockedAchievements")
   ============================================================ */
.achievement-toast-container {
  position: fixed;
  top: 84px;
  right: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: calc(var(--layer-modal) + 2);
  pointer-events: none;
  max-width: min(360px, calc(100vw - 24px));
}

.achievement-toast {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: 14px 18px;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(170, 240, 120, 0.96), rgba(219, 156, 0, 0.96));
  color: var(--color-text-inverse);
  border: 1px solid rgba(255, 234, 177, 0.6);
  box-shadow: 0 18px 48px rgba(170, 240, 120, 0.42);
  transform: translateX(120%);
  opacity: 0;
  transition: transform 320ms cubic-bezier(0.18, 0.89, 0.32, 1.28), opacity 220ms;
  pointer-events: auto;
}

.achievement-toast.is-visible {
  transform: translateX(0);
  opacity: 1;
}

.achievement-toast-icon {
  font-size: 28px;
  line-height: 1;
}

.achievement-toast-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.achievement-toast-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
}

.achievement-toast-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.achievement-toast-desc {
  font-size: 12px;
  opacity: 0.85;
  line-height: 1.35;
}

.achievement-toast-bonus {
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-inverse);
  background: rgba(4, 5, 10, 0.18);
  padding: 3px 10px;
  border-radius: 0;
  width: fit-content;
}

@media (max-width: 600px) {
  .achievement-toast-container {
    top: auto;
    bottom: 140px;
    right: 50%;
    transform: translateX(50%);
  }
}

/* ============================================================
   Cosmetic panel (in settings drawer)
   ============================================================ */
.settings-cosmetic {
  padding: var(--space-4);
  border-radius: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(170, 240, 120, 0.08), transparent 50%),
    rgba(14, 19, 28, 0.6);
  border: 1px solid var(--color-border-strong);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.settings-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-primary);
}

.settings-section-tag {
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--color-accent-gold);
  padding: 3px 8px;
  border-radius: 0;
  background: rgba(170, 240, 120, 0.1);
  border: 1px solid var(--color-border-strong);
}

/* small in-world betta/trail preview above the swatches */
.cosmetic-preview {
  height: 64px;
  border-radius: var(--radius-sm);
  background:
    radial-gradient(circle at 38% 50%, rgba(170, 240, 120, 0.18), transparent 60%),
    rgba(4, 6, 12, 0.55);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cosmetic-preview-fish,
.cosmetic-empty-fish {
  display: block;
  width: 38px;
  height: 38px;
  background: currentColor;
  -webkit-mask: var(--betta-silhouette) center / contain no-repeat;
  mask: var(--betta-silhouette) center / contain no-repeat;
}

.cosmetic-preview-fish {
  color: var(--color-accent-gold);
  filter: drop-shadow(0 0 10px rgba(170, 240, 120, 0.5));
  animation: cosmeticSwim 3.4s ease-in-out infinite;
}

@keyframes cosmeticSwim {
  0%, 100% { transform: translateX(-6px) rotate(-3deg); }
  50% { transform: translateX(6px) rotate(3deg); }
}

@media (prefers-reduced-motion: reduce) {
  .cosmetic-preview-fish { animation: none; }
}

/* Decorative keyframes that use HARDCODED durations (not the --motion-* tokens
   _tokens.css zeroes) still ran under reduced-motion — disable them here so a
   user who asks for reduced motion gets no shimmer, attention shake, toast
   slide, full-screen death flash, or bouncing onboarding emoji. */
@media (prefers-reduced-motion: reduce) {
  .skeleton-shimmer::after,
  .wallet-strip-btn.needs-attention,
  .name-strip input.needs-attention,
  .death-flash.show,
  .death-alert.show,
  .onboarding-illust-drag::before,
  .onboarding-illust-boost::before,
  .onboarding-illust-eat::after {
    animation: none;
  }
  /* The achievement toast slides in via a transform transition with a hardcoded
     duration — keep it readable but gate the motion to opacity only. */
  .achievement-toast {
    transition: opacity 220ms;
  }
}

.cosmetic-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cosmetic-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  font-size: 12px;
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-3) var(--space-2);
}

.cosmetic-empty-fish {
  color: var(--color-text-muted);
  opacity: 0.4;
}

.cosmetic-section-title {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}

.cosmetic-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.cosmetic-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 10px 8px 28px;
  border-radius: 0;
  background: rgba(4, 6, 12, 0.55);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 12px;
  cursor: pointer;
  transition: background var(--motion-quick), border-color var(--motion-quick), opacity var(--motion-quick);
  min-height: 44px;
}

/* live swatch dot */
.cosmetic-chip::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--color-text-muted);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.cosmetic-chip.is-active::before {
  background: var(--color-accent-gold);
  box-shadow: 0 0 8px rgba(170, 240, 120, 0.65);
}

.cosmetic-chip:hover:not(.is-locked),
.cosmetic-chip:focus-visible:not(.is-locked) {
  background: rgba(170, 240, 120, 0.16);
  border-color: var(--color-border-strong);
  outline: none;
}

.cosmetic-chip.is-active {
  background: rgba(170, 240, 120, 0.2);
  border-color: var(--color-accent-gold);
  color: var(--color-accent-gold-soft);
}

.cosmetic-chip.is-locked {
  opacity: 0.45;
  cursor: not-allowed;
}

.cosmetic-chip-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
}

.cosmetic-chip-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}

.cosmetic-chip.is-active .cosmetic-chip-meta {
  color: var(--color-accent-gold);
}

.cosmetic-level-hint {
  font-size: 11px;
  color: var(--color-text-muted);
  text-align: center;
  padding-top: var(--space-2);
  border-top: 1px dashed rgba(255, 244, 207, 0.06);
}

.cosmetic-level-hint b {
  color: var(--color-accent-gold-soft);
  font-family: var(--font-display);
}

/* ============================================================
   Onboarding overlay (first-run)
   ============================================================ */
.onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--layer-modal) + 4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(4, 5, 10, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.onboarding-overlay[hidden] { display: none; }

.onboarding-card {
  width: min(460px, 100%);
  padding: var(--space-6);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(14, 18, 32, 0.98), rgba(10, 12, 18, 0.98));
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-card-strong);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.onboarding-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.onboarding-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent-gold-soft);
}

/* segmented progress bar — the dots become fill segments */
.onboarding-progress {
  display: flex;
  gap: 6px;
  margin-bottom: var(--space-2);
}

.onboarding-dot {
  flex: 1;
  height: 4px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.12);
  transition: background var(--motion-default), box-shadow var(--motion-default);
}

.onboarding-dot.is-active {
  background: linear-gradient(90deg, var(--color-accent-gold), var(--color-accent-gold-soft));
  box-shadow: 0 0 12px rgba(170, 240, 120, 0.5);
}

.onboarding-step-indicator {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* in-world betta stage holding the JS-driven illustration */
.onboarding-stage {
  position: relative;
  height: 130px;
  margin: var(--space-2) auto;
  width: 100%;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 45%, rgba(170, 240, 120, 0.14), transparent 65%),
    rgba(4, 6, 12, 0.5);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.onboarding-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* a faint betta silhouette behind the animated emoji cue */
.onboarding-stage::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 90px;
  height: 90px;
  transform: translate(-50%, -50%);
  background: var(--color-accent-gold);
  opacity: 0.1;
  -webkit-mask: var(--betta-silhouette) center / contain no-repeat;
  mask: var(--betta-silhouette) center / contain no-repeat;
}

.onboarding-illustration {
  position: relative;
  z-index: 1;
  height: 100%;
  margin: 0 auto;
  width: 80%;
  border-radius: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
}

.onboarding-illust-drag::before  { content: "\01F446"; animation: onboard-drag 1.6s ease-in-out infinite; }
.onboarding-illust-boost::before { content: "\01F4A8"; animation: onboard-boost 0.9s ease-in-out infinite; }
.onboarding-illust-eat::before   { content: "\01F40D"; }
.onboarding-illust-eat::after {
  content: "\01FA99";
  position: absolute;
  font-size: 36px;
  right: 28%;
  animation: onboard-eat 1.4s ease-in-out infinite;
}

@keyframes onboard-drag {
  0%, 100% { transform: translate(-30px, 0); }
  50% { transform: translate(30px, 0); }
}
@keyframes onboard-boost {
  0%, 100% { transform: translateX(-12px) scale(1); opacity: 0.7; }
  50% { transform: translateX(12px) scale(1.2); opacity: 1; }
}
@keyframes onboard-eat {
  0% { transform: translateX(0) scale(1); opacity: 1; }
  60% { transform: translateX(-60px) scale(0.7); opacity: 1; }
  61% { opacity: 0; }
  100% { transform: translateX(0) scale(1); opacity: 0; }
}

.onboarding-card h2 {
  font-family: var(--font-display);
  font-size: 24px;
  margin: 0;
  color: var(--color-text-primary);
}

.onboarding-card p {
  color: var(--color-text-secondary);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0;
}

.onboarding-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-3);
}

@media (max-width: 600px) {
  .onboarding-card { padding: var(--space-5); gap: var(--space-2); }
  .onboarding-card h2 { font-size: 20px; }
  .onboarding-illustration { height: 90px; font-size: 44px; }
}

/* Lobby "Ready Up" attention pulse — draws the eye so the wait never feels dead */
@keyframes lobbyPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(170, 240, 120, 0.5), 0 8px 24px rgba(170, 240, 120, 0.28); }
  50% { transform: scale(1.035); box-shadow: 0 0 0 12px rgba(170, 240, 120, 0), 0 12px 32px rgba(170, 240, 120, 0.5); }
}
.stage-cta.lobby-attention { animation: lobbyPulse 1.05s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .stage-cta.lobby-attention { animation: none; } }

/* ===== Attract / demo mode (landing hero iframe): show only the swimming fish ===== */
body.demo-mode { background: #04060c; cursor: default; overflow: hidden; }
body.demo-mode .hud,
body.demo-mode #room-overlay,
body.demo-mode #onboarding-overlay,
body.demo-mode #achievement-toast-container { display: none !important; }

/* ============================================================================
   ===== MATRIX TERMINAL UI =====
   Bold green CRT/Tron terminal restyle. Overrides win by source order.
   Palette: bg #03070a · panel rgba(6,18,12,.66) · green #4dff8c
   soft #b7ffd4 · dim #5f8f74 · line rgba(90,255,150,.32) ·
   line-strong rgba(90,255,150,.6) · glow rgba(40,255,130,.16) ·
   text #d7f7e3 · muted #88b39c. Sharp corners (2-4px), mono UPPERCASE chrome.
   ============================================================================ */

/* ---- 1. CORNERS: force sharp/technical radii everywhere ---- */
.eyebrow-chip,
.hud-primary, .hud-card, .hud-minimap-frame, #mini-map,
.hud-boost-pill, .hud-pill, .hud-brand, .hud-timer, .hud-icon-btn,
.hud-brand-mark, .kbd, .hud-controls-hint,
.stage, .stage-cockpit, .identity-card, .room-card, .room-card-skeleton,
.room-badge, .room-note,
.stage-cta, .stage-cta-secondary, .wallet-strip-btn, .wallet-strip-balance,
.name-strip input, .lobby-countdown, .lobby-stat, .lobby-participants,
.settings-cosmetic, .settings-section-tag, .settings-row, .settings-switch,
.cosmetic-preview, .cosmetic-chip, .cosmetic-grid > *,
.results-panel, .results-row, .results-podium, .results-column,
.onboarding-card, .onboarding-stage, .onboarding-illustration,
.onboarding-dot, .achievement-toast, .emote-dock, .emote-btn,
.user-row {
  border-radius: 3px !important;
}

/* keep small dots / circular swatches round */
.eyebrow-dot, .hud-card-dot,
.cosmetic-chip::before, .lobby-status::before, .results-dot,
.cosmetic-preview-fish, .cosmetic-empty-fish, .onboarding-stage::after {
  border-radius: 50% !important;
}
.eyebrow-dot, .hud-card-dot, .lobby-status::before { border-radius: 50% !important; }

/* ---- 2. PANELS / CARDS: terminal-window look ----
   dark fill + green hairline + brighter 2px green top accent + glow + inset */
.hud-primary,
.hud-card,
.identity-card,
.lobby-stat,
.lobby-participants,
.lobby-countdown,
.settings-cosmetic,
.cosmetic-preview,
.onboarding-stage,
.results-panel,
.results-podium,
.results-column,
.wallet-strip-balance {
  background: rgba(6, 18, 12, 0.66) !important;
  border: 1px solid rgba(90, 255, 150, 0.32) !important;
  border-top: 2px solid rgba(90, 255, 150, 0.6) !important;
  box-shadow: 0 0 18px rgba(40, 255, 130, 0.10), inset 0 0 26px rgba(0, 40, 20, 0.22) !important;
}

/* room cards + stage + onboarding card + drawer: same terminal frame, larger */
.room-card,
.stage,
.onboarding-card {
  background: rgba(6, 18, 12, 0.7) !important;
  border: 1px solid rgba(90, 255, 150, 0.32) !important;
  border-top: 2px solid rgba(90, 255, 150, 0.6) !important;
  box-shadow: 0 0 24px rgba(40, 255, 130, 0.12), inset 0 0 30px rgba(0, 40, 20, 0.24) !important;
}

/* hover / active / selected: brighter border + stronger glow */
.hud-card:hover {
  border-color: rgba(90, 255, 150, 0.7) !important;
  box-shadow: 0 0 26px rgba(40, 255, 130, 0.2), inset 0 0 30px rgba(0, 40, 20, 0.26) !important;
}
/* Room cards keep the terminal look but respect their per-room accent so a
   selected Bluechip/Whale card shows its own color, not generic green. */
.room-card:hover {
  border-color: var(--room-accent, #4dff8c) !important;
  box-shadow: 0 0 26px color-mix(in srgb, var(--room-accent, #4dff8c) 22%, transparent), inset 0 0 30px rgba(0, 40, 20, 0.26) !important;
}
.room-card.active {
  border-color: var(--room-accent, #4dff8c) !important;
  background: rgba(16, 40, 26, 0.66) !important;
  box-shadow: 0 0 0 1px var(--room-accent, #4dff8c), 0 0 34px color-mix(in srgb, var(--room-accent, #4dff8c) 30%, transparent), inset 0 0 30px rgba(0, 40, 20, 0.28) !important;
}

/* the room-card left "tier rail" -> per-room accent scanline edge */
.room-card::before { background: var(--room-accent, var(--mtx-green)) !important; box-shadow: 0 0 10px color-mix(in srgb, var(--room-accent, #4dff8c) 60%, transparent); }

/* minimap frame + corner ticks */
.hud-minimap-frame {
  background: rgba(4, 12, 8, 0.6) !important;
  border: 1px solid rgba(90, 255, 150, 0.32) !important;
  box-shadow: inset 0 0 20px rgba(0, 40, 20, 0.4) !important;
}
.hud-minimap-corner { border-top-color: var(--mtx-green) !important; border-right-color: var(--mtx-green) !important; opacity: 0.9 !important; }

/* settings drawer (terminal panel slid from the right) */
.settings-drawer {
  background: linear-gradient(180deg, rgba(6, 18, 12, 0.98), rgba(3, 9, 6, 0.98)) !important;
  border-left: 1px solid rgba(90, 255, 150, 0.32) !important;
  box-shadow: -16px 0 50px rgba(0, 0, 0, 0.5), inset 0 0 60px rgba(0, 40, 20, 0.18) !important;
}

/* ---- 3. PRIMARY BUTTON: solid matrix green, near-black, mono UPPERCASE ---- */
.stage-cta,
.wallet-strip-btn,
.hud-boost-pill.is-boosting {
  background: var(--mtx-green) !important;
  color: #06120b !important;
  border: 1px solid var(--mtx-green) !important;
  font-family: var(--font-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-weight: 700 !important;
  border-radius: 0 !important;
  box-shadow: 0 0 18px rgba(77, 255, 140, 0.5) !important;
}
.stage-cta { background-image: none !important; }
.wallet-strip-btn { background-image: none !important; }

.stage-cta:hover, .stage-cta:focus-visible,
.wallet-strip-btn:hover, .wallet-strip-btn:focus-visible {
  background: #7dffae !important;
  color: #06120b !important;
  box-shadow: 0 0 30px rgba(77, 255, 140, 0.75) !important;
  outline: none;
}
.stage-cta:disabled, .wallet-strip-btn:disabled {
  background: rgba(77, 255, 140, 0.22) !important;
  color: rgba(4, 20, 11, 0.8) !important;
  box-shadow: none !important;
}

/* prefix the prompt arrow on the main launch buttons */
.stage-cta::before,
.wallet-strip-btn::before {
  content: "> ";
  font-family: var(--font-mono);
  font-weight: 700;
}

/* ---- 4. SECONDARY / GHOST BUTTON ---- */
.stage-cta-secondary,
.hud-pill {
  background: transparent !important;
  border: 1px solid rgba(90, 255, 150, 0.5) !important;
  color: var(--mtx-green) !important;
  font-family: var(--font-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  border-radius: 0 !important;
}
.stage-cta-secondary:hover, .stage-cta-secondary:focus-visible,
.hud-pill:hover, .hud-pill:focus-visible {
  background: rgba(77, 255, 140, 0.12) !important;
  color: var(--mtx-green-soft) !important;
  border-color: rgba(90, 255, 150, 0.7) !important;
  box-shadow: 0 0 16px rgba(77, 255, 140, 0.3) !important;
  outline: none;
}

/* HUD icon buttons -> terminal squares */
.hud-icon-btn {
  background: rgba(6, 18, 12, 0.78) !important;
  border: 1px solid rgba(90, 255, 150, 0.32) !important;
  color: var(--mtx-green-soft) !important;
  border-radius: 0 !important;
}
.hud-icon-btn:hover, .hud-icon-btn:focus-visible {
  background: rgba(77, 255, 140, 0.16) !important;
  border-color: rgba(90, 255, 150, 0.7) !important;
  color: var(--mtx-green) !important;
  box-shadow: 0 0 16px rgba(77, 255, 140, 0.35) !important;
}/* HUD timer pill -> green-glow terminal readout */
.hud-timer {
  background: rgba(6, 18, 12, 0.78) !important;
  border: 1px solid rgba(90, 255, 150, 0.5) !important;
  border-radius: 0 !important;
  box-shadow: 0 0 16px rgba(40, 255, 130, 0.16), inset 0 0 18px rgba(0, 40, 20, 0.25) !important;
}
.hud-timer-label { font-family: var(--font-mono) !important; color: var(--mtx-green) !important; }
.hud-timer-value {
  font-family: var(--font-mono) !important;
  color: var(--mtx-green-soft) !important;
  text-shadow: 0 0 12px rgba(77, 255, 140, 0.5);
}

/* ---- 6. CHIPS / EYEBROWS / micro-labels / badges -> mono green w/ brackets ---- */
.eyebrow-chip,
.settings-eyebrow,
.onboarding-eyebrow,
.settings-section-tag,
.room-badge,
.onboarding-step-indicator,
.hud-card-label,
.hud-card-toggle,
.settings-group-head,
.hud-primary-label,
.lobby-stat span,
.wallet-strip-label,
.name-strip label,
.lobby-participants-head,
.lobby-status,
.results-column-title,
.achievement-toast-label {
  font-family: var(--font-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
}

.eyebrow-chip {
  background: rgba(6, 18, 12, 0.72) !important;
  border: 1px solid rgba(90, 255, 150, 0.5) !important;
  color: var(--mtx-green) !important;
  border-radius: 0 !important;
}

.settings-eyebrow, .onboarding-eyebrow {
  color: var(--mtx-green) !important;
  text-shadow: 0 0 10px rgba(77, 255, 140, 0.4);
}

.settings-section-tag {
  color: var(--mtx-green) !important;
  background: rgba(6, 18, 12, 0.7) !important;
  border: 1px solid rgba(90, 255, 150, 0.6) !important;
  border-radius: 0 !important;
}

.room-badge-free {
  color: var(--mtx-green) !important;
  border: 1px solid rgba(90, 255, 150, 0.6) !important;
  background: rgba(6, 18, 12, 0.7) !important;
  font-family: var(--font-mono) !important;
  border-radius: 0 !important;
}
/* card labels / micro-labels green-dim mono */
.hud-card-label, .hud-card-toggle, .settings-group-head,
.lobby-stat span, .wallet-strip-label, .name-strip label,
.lobby-participants-head {
  color: var(--mtx-muted) !important;
}
.hud-card-chevron { color: var(--mtx-green) !important; }
.hud-card-dot { background: var(--mtx-green) !important; box-shadow: 0 0 8px rgba(77, 255, 140, 0.7) !important; }
.eyebrow-dot { background: var(--mtx-green) !important; }

/* ---- 7. INPUTS: dark, green border, mono, green caret ---- */
.name-strip input {
  background: rgba(3, 10, 6, 0.7) !important;
  border: 1px solid rgba(90, 255, 150, 0.32) !important;
  border-radius: 0 !important;
  color: var(--mtx-text) !important;
  font-family: var(--font-mono) !important;
  caret-color: var(--mtx-green);
}
.name-strip input::placeholder { color: var(--mtx-green-dim) !important; }
.name-strip input:focus {
  border-color: var(--mtx-green) !important;
  background: rgba(6, 18, 12, 0.85) !important;
  box-shadow: 0 0 16px rgba(77, 255, 140, 0.3) !important;
}

/* ---- 8. HEADINGS: keep display font, add green glow to accent words ---- */
.stage-head h1 {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: var(--mtx-green-soft) !important;
  text-shadow: 0 0 18px rgba(77, 255, 140, 0.45) !important;
}
.settings-drawer-head h3,
.onboarding-card h2,
#results-title {
  color: var(--mtx-text) !important;
  text-shadow: 0 0 16px rgba(77, 255, 140, 0.3);
}
.hud-primary-value {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: var(--mtx-green) !important;
  font-family: var(--font-mono) !important;
  text-shadow: 0 0 18px rgba(77, 255, 140, 0.55) !important;
}
.hud-primary-label { color: var(--mtx-green) !important; }

/* ---- 9. DIVIDERS / separators -> thin green line ---- */
.identity-divider,
.settings-group-head,
.lobby-participants-head,
.cosmetic-level-hint {
  border-color: rgba(90, 255, 150, 0.2) !important;
}
.identity-divider { background: rgba(90, 255, 150, 0.2) !important; }
.hud-supply-meter { border-top-color: rgba(90, 255, 150, 0.2) !important; }
.cosmetic-level-hint { border-top: 1px dashed rgba(90, 255, 150, 0.2) !important; }

/* ---- 10. NUMERALS / stat values / leaderboard -> mono green tint ---- */
.lobby-stat b,
.lobby-countdown-num,
.wallet-strip-value b,
.room-card .room-meta span b,
.hud-supply-meter-value,
.hud-supply-meter-value b {
  font-family: var(--font-mono) !important;
  color: var(--mtx-green-soft) !important;
}
.lobby-countdown-num { text-shadow: 0 0 18px rgba(77, 255, 140, 0.5) !important; }
.leader-row { font-family: var(--font-mono) !important; }
.leader-row.is-self {
  background: rgba(77, 255, 140, 0.14) !important;
  color: var(--mtx-green-soft) !important;
  border-left: 2px solid var(--mtx-green) !important;
}
.leader-row.is-clickable:hover, .leader-row.is-clickable:focus-visible {
  background: rgba(77, 255, 140, 0.12) !important;
}
.kbd {
  background: rgba(77, 255, 140, 0.14) !important;
  color: var(--mtx-green-soft) !important;
  border-radius: 0 !important;
}

/* boost energy fill -> terminal cyan/green, warning red when low */
.hud-supply-meter-fill {
  background: linear-gradient(90deg, #29e6c8, var(--mtx-green-soft)) !important;
  box-shadow: 0 0 14px rgba(80, 240, 200, 0.6) !important;
}
.hud-supply-meter-fill.is-low {
  background: linear-gradient(90deg, #ff5a4d, #ffb347) !important;
  box-shadow: 0 0 14px rgba(255, 120, 80, 0.6) !important;
}
.hud-supply-meter-track { background: rgba(0, 40, 20, 0.5) !important; }

/* ---- HUD boost pill (idle/charge state) -> terminal ---- */
.hud-boost-pill {
  background: rgba(6, 18, 12, 0.78) !important;
  border: 1px solid rgba(90, 255, 150, 0.5) !important;
  color: var(--mtx-green-soft) !important;
  font-family: var(--font-mono) !important;
  border-radius: 0 !important;
}
.hud-boost-pill::before {
  background: linear-gradient(90deg, var(--mtx-green), var(--mtx-green-soft)) !important;
}
.hud-boost-pill.is-boosting { box-shadow: 0 0 22px rgba(77, 255, 140, 0.6) !important; }

/* HUD bottom controls hint -> terminal strip */
.hud-controls-hint {
  background: rgba(3, 10, 6, 0.8) !important;
  border: 1px solid rgba(90, 255, 150, 0.2) !important;
  color: var(--mtx-muted) !important;
  font-family: var(--font-mono) !important;
  border-radius: 0 !important;
}

/* ---- lobby tank / participants ---- */
.lobby-stat::before { background: var(--mtx-green) !important; opacity: 0.7 !important; }
.lobby-status::before { background: var(--mtx-green) !important; box-shadow: 0 0 8px rgba(77,255,140,0.7) !important; }
.wallet-strip-balance { border-left: 2px solid var(--mtx-green) !important; }
.wallet-strip-status.is-connected { color: var(--mtx-green) !important; }
.user-row { font-family: var(--font-mono) !important; }

/* lobby countdown focal card glow */
.lobby-countdown {
  background:
    radial-gradient(circle at 50% 0%, rgba(77, 255, 140, 0.16), transparent 60%),
    rgba(6, 18, 12, 0.66) !important;
}

/* ---- cosmetics panel ---- */
.cosmetic-chip {
  background: rgba(3, 10, 6, 0.6) !important;
  border: 1px solid rgba(90, 255, 150, 0.2) !important;
  border-radius: 0 !important;
}
.cosmetic-chip:hover:not(.is-locked), .cosmetic-chip:focus-visible:not(.is-locked) {
  background: rgba(77, 255, 140, 0.12) !important;
  border-color: rgba(90, 255, 150, 0.5) !important;
}
.cosmetic-chip.is-active {
  background: rgba(77, 255, 140, 0.16) !important;
  border-color: var(--mtx-green) !important;
  color: var(--mtx-green-soft) !important;
  box-shadow: 0 0 16px rgba(77, 255, 140, 0.25) !important;
}
.cosmetic-chip.is-active::before { background: var(--mtx-green) !important; box-shadow: 0 0 8px rgba(77,255,140,0.7) !important; }
.cosmetic-chip-name, .cosmetic-chip-meta { font-family: var(--font-mono) !important; }
.cosmetic-chip.is-active .cosmetic-chip-meta { color: var(--mtx-green) !important; }
.cosmetic-preview-fish { color: var(--mtx-green) !important; filter: drop-shadow(0 0 12px rgba(77,255,140,0.6)) !important; }
.cosmetic-level-hint b { color: var(--mtx-green-soft) !important; }

/* ---- settings rows / switch ---- */
.settings-row {
  border: 1px solid rgba(90, 255, 150, 0.2) !important;
  border-radius: 0 !important;
}
.settings-row:hover, .settings-row:focus-visible {
  border-color: rgba(90, 255, 150, 0.5) !important;
  background: rgba(77, 255, 140, 0.08) !important;
}
.settings-switch { border-radius: 0 !important; }
#audio-toggle[aria-pressed="true"] .settings-switch,
.settings-switch { box-shadow: inset 0 0 8px rgba(0, 40, 20, 0.4); }
.settings-tips b { color: var(--mtx-green-soft) !important; }

/* ---- onboarding overlay ---- */
.onboarding-overlay { background: rgba(3, 7, 10, 0.92) !important; }
.onboarding-dot.is-active {
  background: linear-gradient(90deg, var(--mtx-green), var(--mtx-green-soft)) !important;
  box-shadow: 0 0 12px rgba(77, 255, 140, 0.6) !important;
}
.onboarding-stage::after { background: var(--mtx-green) !important; opacity: 0.12 !important; }
.onboarding-step-indicator { color: var(--mtx-muted) !important; }

/* ---- results panel ---- */
.results-dot-win { background: var(--mtx-green) !important; box-shadow: 0 0 8px rgba(77,255,140,0.6); }
.results-row.winner { color: var(--mtx-green-soft) !important; }
.results-list, .results-row { font-family: var(--font-mono) !important; }

/* ---- emote dock ---- */
.emote-dock {
  background: rgba(6, 18, 12, 0.78) !important;
  border: 1px solid rgba(90, 255, 150, 0.32) !important;
  border-radius: 0 !important;
}
.emote-btn:hover, .emote-btn:focus-visible {
  background: rgba(77, 255, 140, 0.16) !important;
  border-radius: 0 !important;
}

/* ---- achievement toast ---- */
.achievement-toast {
  background: rgba(6, 18, 12, 0.92) !important;
  border: 1px solid rgba(90, 255, 150, 0.32) !important;
  border-top: 2px solid rgba(90, 255, 150, 0.6) !important;
  border-radius: 0 !important;
  box-shadow: 0 0 20px rgba(40, 255, 130, 0.16) !important;
}
.achievement-toast { color: var(--mtx-text) !important; }
.achievement-toast-label { color: var(--mtx-green) !important; }
.achievement-toast-name { color: var(--mtx-green-soft) !important; }
.achievement-toast-desc { color: var(--color-text-secondary) !important; }
.achievement-toast-bonus {
  color: var(--mtx-green-soft) !important;
  background: rgba(77, 255, 140, 0.12) !important;
  border: 1px solid var(--mtx-line) !important;
}

/* ============================================================================
   ===== END MATRIX TERMINAL UI =====
   ============================================================================ */

/* ===== matrix terminal typography (whole page) ===== */
:root {
  --font-display: "JetBrains Mono", "Fira Code", ui-monospace, "Cascadia Code", Consolas, monospace;
  --font-body: "JetBrains Mono", "Fira Code", ui-monospace, "Cascadia Code", Consolas, monospace;
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, "Cascadia Code", Consolas, monospace;
}

/* Brand logo: green glyph (matches button color), no box */
.brand-glyph{display:block;width:100%;height:100%;background-color:currentColor;-webkit-mask:url("/icons/betta-fish.svg") center/contain no-repeat;mask:url("/icons/betta-fish.svg") center/contain no-repeat;-webkit-mask-mode:alpha;mask-mode:alpha;}/* ===== Live server/room browser: compact, numbered, searchable, paginated ===== */
.room-list:has(.lobby-browser) { display: block; }
.lobby-browser { display: flex; flex-direction: column; gap: 8px; --lobby-cols: 28px 26px minmax(0, 1fr) 92px 64px 50px 54px 64px; }
.lobby-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lobby-search { flex: 1; min-width: 140px; background: rgba(6, 16, 11, 0.8); border: 1px solid rgba(77, 255, 140, 0.25); border-radius: 0; padding: 8px 12px; color: #eafff0; font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 13px; }
.lobby-thead { display: grid; grid-template-columns: var(--lobby-cols); align-items: center; gap: 8px; padding: 2px 10px; }
.lobby-th { display: inline-flex; align-items: center; justify-content: center; gap: 3px; background: none; border: none; padding: 0; cursor: pointer; font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(159, 230, 191, 0.85); }
.lobby-th.th-left { justify-content: flex-start; }
.lobby-th.th-right { justify-content: flex-end; }
.lobby-th:hover { color: #cfe9d8; }
.lobby-th.is-active { color: #4dff8c; }
.th-arrow { font-size: 8px; }
.lobby-search:focus { outline: none; border-color: rgba(77, 255, 140, 0.6); box-shadow: 0 0 0 2px rgba(77, 255, 140, 0.15); }
.lobby-search::placeholder { color: rgba(159, 230, 191, 0.45); }
.lobby-online { color: #4dff8c; font-weight: 700; font-style: normal; white-space: nowrap; }
.lobby-rows { display: flex; flex-direction: column; gap: 4px; }
.lobby-row { display: grid; grid-template-columns: var(--lobby-cols); align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer; background: rgba(8, 20, 14, 0.55); border: 1px solid rgba(77, 255, 140, 0.16); border-left: 3px solid var(--room-accent, #4dff8c); border-radius: 0; padding: 7px 10px; color: #dbeede; font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 12px; transition: border-color 0.12s, background 0.12s; }
.lobby-row:hover:not(.is-full) { background: rgba(12, 30, 20, 0.85); border-color: rgba(77, 255, 140, 0.4); }
.lobby-row.is-selected { border-color: #4dff8c; background: rgba(16, 40, 26, 0.95); box-shadow: 0 0 0 1px rgba(77, 255, 140, 0.3); }
.lobby-row.is-full { opacity: 0.45; cursor: not-allowed; }
.lr-num { color: rgba(159, 230, 191, 0.55); font-weight: 700; text-align: center; }
.lr-signal { display: inline-flex; align-items: flex-end; justify-content: center; gap: 2px; height: 14px; }
.lr-signal .sig-bar { width: 3px; background: rgba(255, 255, 255, 0.14); border-radius: 0; align-self: flex-end; }
.lr-signal .sig-bar:nth-child(1) { height: 20%; }
.lr-signal .sig-bar:nth-child(2) { height: 40%; }
.lr-signal .sig-bar:nth-child(3) { height: 60%; }
.lr-signal .sig-bar:nth-child(4) { height: 80%; }
.lr-signal .sig-bar:nth-child(5) { height: 100%; }
.lr-signal.sig-green .sig-bar.on { background: #4dff8c; box-shadow: 0 0 4px rgba(77, 255, 140, 0.7); }
.lr-signal.sig-yellow .sig-bar.on { background: #ffd54f; box-shadow: 0 0 4px rgba(255, 213, 79, 0.6); }
.lr-signal.sig-red .sig-bar.on { background: #ff6a6a; box-shadow: 0 0 4px rgba(255, 90, 90, 0.6); }
.lr-name { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; overflow: hidden; font-weight: 700; color: #eafff0; }
.lr-srv { font-weight: 500; font-size: 10px; color: rgba(159, 230, 191, 0.85); letter-spacing: 0.06em; }
.lr-pot { color: #9fe6bf; font-size: 11px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-fee { font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; white-space: nowrap; }
.lr-fee.is-free { color: #4dff8c; }
.lr-fee.is-paid { color: #ffd54f; }
.lr-occ { font-size: 12px; color: #cfe9d8; text-align: right; }
.lr-occ b { color: #eafff0; }
.lr-status { font-size: 9px; font-weight: 800; letter-spacing: 0.05em; padding: 3px 4px; border-radius: 0; text-align: center; }
.lr-status.st-open { color: #7fe0a0; background: rgba(77, 255, 140, 0.1); }
.lr-status.st-filling { color: #ffd54f; background: rgba(255, 213, 79, 0.12); }
.lr-status.st-in-match { color: #61dafb; background: rgba(97, 218, 251, 0.12); }
.lr-status.st-full { color: #ff7a7a; background: rgba(255, 90, 90, 0.14); }
.lr-join { display: inline-flex; align-items: center; justify-content: center; gap: 3px; font-size: 9px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 7px; border-radius: 0; color: #04140a; background: #4dff8c; white-space: nowrap; cursor: pointer; transition: box-shadow 0.12s, transform 0.1s; }
.lr-join-arrow { font-weight: 700; }
.lobby-row:hover:not(.is-full) .lr-join { box-shadow: 0 0 9px rgba(77, 255, 140, 0.6); }
.lobby-row:active:not(.is-full) .lr-join { transform: scale(0.96); }
.lobby-row.is-full .lr-join { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.4); cursor: default; }
.lobby-empty { padding: 24px; text-align: center; color: rgba(159, 230, 191, 0.6); font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 12px; }
.lobby-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 2px; }
.lobby-page-btn { width: 32px; height: 32px; border-radius: 7px; border: 1px solid rgba(77, 255, 140, 0.25); background: rgba(8, 20, 14, 0.7); color: #cfe9d8; font-size: 16px; cursor: pointer; }
.lobby-page-btn:hover:not(:disabled) { border-color: rgba(77, 255, 140, 0.55); color: #eafff0; }
.lobby-page-btn:disabled { opacity: 0.35; cursor: default; }
.lobby-page-info { font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 12px; color: rgba(159, 230, 191, 0.75); min-width: 48px; text-align: center; }


/* ===== Three-token wallet HUD (0xGOLD / 0xSILVER / 0xBRONZE) ===== */
.hud-primary-tokens .hud-token-row { display: flex; flex-direction: column; gap: 7px; margin-top: 2px; }
.hud-primary-tokens .hud-token { display: flex; align-items: center; gap: 9px; font-family: "JetBrains Mono", "Fira Code", monospace; }
.hud-primary-tokens .hud-token img { width: 23px; height: 23px; display: block; }
.hud-primary-tokens .hud-token b { font-size: 23px; font-weight: 800; line-height: 1; color: #eafff2; min-width: 30px; text-align: right; }
.hud-primary-tokens .hud-token i { font-style: normal; font-size: 10px; letter-spacing: 0.14em; color: #7fe0a6; text-transform: uppercase; }
.wallet-strip-tokens { display: flex; flex-direction: column; gap: 3px; }
.wallet-strip-token { display: flex; align-items: center; gap: 6px; font-family: "JetBrains Mono", "Fira Code", monospace; font-size: 11px; color: #cfe9d6; }
.wallet-strip-token img { width: 14px; height: 14px; }
.wallet-strip-token b { color: #ffffff; }


/* List-shaped loading skeleton (matches the Server browser table rows, not cards) */
.room-row-skeleton {
  grid-column: 1 / -1;
  height: 40px;
  border-radius: 0;
  border: 1px solid rgba(77, 255, 140, 0.14);
  border-left: 3px solid rgba(77, 255, 140, 0.32);
  background: rgba(8, 20, 14, 0.45);
}


/* Pool cell: the supply total shown with its three tier coins (0xG / 0xS / 0xB) */
.lr-pot { overflow: visible; text-overflow: clip; }
.lr-pot-coins { display: inline-flex; gap: 2px; margin-left: 5px; vertical-align: middle; }
.lr-pot-coins img { width: 12px; height: 12px; display: block; }


/* Arena Supply: total remaining shown with the three tier coins (0xG / 0xS / 0xB) */
.hud-supply-coins { display: inline-flex; gap: 2px; vertical-align: middle; margin-left: 3px; }
.hud-supply-coins img { width: 14px; height: 14px; display: block; }

/* ============================================================
   SERVER BROWSER — tata letak HP
   Baris server memakai grid 8 kolom lebar tetap (--lobby-cols ≈ 454px minimum),
   tanpa satu pun aturan mobile, sehingga di layar ~390px isinya melubar keluar
   kartu dan tombol Join terdorong ke luar batas. Di bawah 700px baris dipecah
   jadi dua tingkat: identitas + tombol di atas, angka-angka di bawah.
   ============================================================ */
@media (max-width: 700px) {
  .lobby-thead { display: none; }

  .lobby-row {
    grid-template-columns: 22px minmax(0, 1fr) auto auto auto;
    gap: 5px 8px;
    padding: 9px 10px;
  }
  .lr-num    { grid-column: 1; grid-row: 1; font-size: 11px; }
  .lr-name   { grid-column: 2 / 5; grid-row: 1; }
  .lr-join   { grid-column: 5; grid-row: 1; padding: 7px 11px; font-size: 10px; }
  .lr-signal { display: none; }

  .lr-pot    { grid-column: 1 / 3; grid-row: 2; text-align: left; }
  .lr-fee    { grid-column: 3; grid-row: 2; justify-content: flex-start; }
  .lr-occ    { grid-column: 4; grid-row: 2; text-align: center; }
  .lr-status { grid-column: 5; grid-row: 2; }

  .lr-name   { font-size: 12.5px; }
  .lr-pot    { font-size: 10.5px; }
  .lr-pot-coins img { width: 11px; height: 11px; }

  .lobby-browser { min-width: 0; }
  .lobby-toolbar { gap: 6px; }
  .lobby-toolbar .search-input,
  .lobby-toolbar input[type="text"],
  .lobby-toolbar input[type="search"] { width: 100%; min-width: 0; flex: 1 1 100%; }
}

/* ============================================================
   JOYSTICK — kendali arah untuk layar sentuh
   Sebelumnya mengarahkan ikan di HP berarti menyentuh arena, dan sentuhan itu
   SEKALIGUS memicu boost — jadi mustahil berbelok tanpa menguras boost, dan jari
   menutupi ikan. Joystick memisahkan keduanya: jempol kiri mengarahkan di sini,
   sentuhan di arena hanya untuk boost.
   ============================================================ */
.joystick {
  position: absolute;
  left: 50%;
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: 172px;
  height: 172px;
  border-radius: 50%;
  /* Outer layer = BOOST band (amber). The inner ring is the steer-only zone. */
  border: 1px solid rgba(255, 176, 32, 0.45);
  background: rgba(40, 24, 4, 0.42);
  display: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  z-index: 6;
  /* Visual only: all touches go to the canvas, which plants the stick wherever the
     finger lands (dynamic joystick). The element just shows where it is. */
  pointer-events: none;
}
.joystick.is-on { display: block; }
.joystick.is-active { border-color: rgba(255, 176, 32, 0.7); background: rgba(48, 28, 4, 0.55); }
.joystick.is-boost { border-color: #ffb020; background: rgba(255, 150, 20, 0.32); box-shadow: 0 0 18px rgba(255, 160, 30, 0.45); }

/* Per-user joystick position (setting saved as ft_joystick_pos). Default is centre (the
   base rule above). Left/right pin it to that side's safe-area gutter. */
body[data-joy="left"] .joystick {
  left: calc(24px + env(safe-area-inset-left, 0px));
  right: auto;
  transform: none;
}
body[data-joy="right"] .joystick {
  left: auto;
  right: calc(24px + env(safe-area-inset-right, 0px));
  transform: none;
}

/* Segmented control in the settings drawer (square, per house style). */
.settings-row-seg { display: flex; align-items: center; gap: 10px; }
.settings-row-seg .settings-row-label { flex: 1; }
.seg { display: inline-flex; border: 1px solid var(--color-border); }
.seg-btn {
  appearance: none;
  border: 0;
  border-left: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 12px;
  padding: 6px 12px;
  cursor: pointer;
}
.seg-btn:first-child { border-left: 0; }
.seg-btn.is-on { background: rgba(90, 255, 150, 0.16); color: var(--color-accent-gold); }

.joystick-ring {
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  /* Inner layer = steer only (green). Crossing this edge starts boost. */
  border: 1px solid rgba(90, 255, 150, 0.55);
  background: rgba(6, 22, 12, 0.72);
  pointer-events: none;
}
.joystick.is-boost .joystick-knob { background: rgba(255, 176, 32, 0.95); border-color: #ffe0a0; }
.joystick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: rgba(77, 255, 140, 0.9);
  border: 1px solid #b7ffd4;
  pointer-events: none;
  transition: transform 0.06s linear;
}
.joystick.is-active .joystick-knob { transition: none; }

@media (max-width: 600px) {
  .joystick { width: 156px; height: 156px; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  .joystick-knob { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
  .joystick-ring { inset: 18px; }
}

/* ============================================================
   HUD LAYAR KECIL — versi final
   Blok compact sebelumnya diletakkan di ~baris 2460, padahal aturan dasar
   .hud-primary-tokens berada di ~baris 3604. Spesifisitasnya sama, jadi yang
   BELAKANGAN menang dan seluruh perbaikan mobile itu tidak pernah aktif.
   Blok ini sengaja ditaruh paling akhir agar benar-benar berlaku.
   Prinsip: semua menempel di tepi, tengah layar bebas untuk arena.
   ============================================================ */
@media (max-width: 700px) {
  /* dompet: satu baris ringkas di pojok, bukan kartu tinggi */
  .hud-primary {
    justify-self: start;
    width: auto;
    max-width: 62vw;
    padding: 5px 8px;
    gap: 3px;
    border-radius: 8px;
    background: rgba(10, 14, 22, 0.62);
  }
  .hud-primary-label { display: none; }
  .hud-primary-tokens .hud-token-row { flex-direction: row; gap: 10px; margin-top: 0; }
  .hud-primary-tokens .hud-token { gap: 4px; }
  .hud-primary-tokens .hud-token img { width: 15px; height: 15px; }
  .hud-primary-tokens .hud-token b { font-size: 14px; min-width: 0; text-align: left; }
  .hud-primary-tokens .hud-token i { display: none; }

  /* arena supply: garis tipis, tanpa kotak */
  .hud-supply-meter { margin-top: 3px; padding-top: 4px; }
  .hud-supply-meter .hud-card-label { font-size: 8px; letter-spacing: 0.06em; }
  .hud-supply-meter-value { font-size: 10px; }
  .hud-supply-meter-value b { font-size: 10px; }
  .hud-supply-meter-track { height: 3px; }
  .hud-supply-coins img { width: 10px; height: 10px; }

  /* banner status: kecil, di bawah timer, tidak menabrak dompet */
  .hud-status-banner { top: calc(var(--hud-safe-top, env(safe-area-inset-top, 0px)) + 58px); max-width: 92vw; }
  .hud-status-text { font-size: 10px; padding: 4px 9px; }

  /* kartu samping: sempit + tembus pandang */
  .hud-side { gap: 5px; }
  .hud-card-leaderboard,
  .hud-card-minimap { max-width: 118px; }
  .hud-card { background: rgba(10, 14, 22, 0.55); border-radius: 0; }
  .hud-card-toggle { padding: 4px 7px; font-size: 7px; letter-spacing: 0.06em; }
  .hud-card-label { font-size: 7px; letter-spacing: 0.06em; }
  .hud-card-leaderboard .hud-card-body { padding: 4px 6px 6px; gap: 2px; max-height: 108px; }
  .leader-row { font-size: 9.5px; padding: 2px 4px; gap: 4px; }
  .leader-tokens { gap: 3px; }
  .leader-tokens .lt { width: 14px; text-align: right; font-size: 8.5px; font-weight: 600; }
  .leader-head .lt { width: 14px; height: 10px; background-size: 10px 10px; }
  #mini-map { width: 96px; }
  .hud-card-minimap-body { padding: 4px; }
  .hud-minimap-frame { padding: 3px; }

  /* bawah: sisakan ruang untuk joystick, buang petunjuk teks */
  .hud-controls-hint { display: none; }
  .hud-boost-pill { min-width: 62px; padding: 6px 11px; font-size: 10px; }
  .hud-pill { padding: 7px 11px; font-size: 10.5px; }
  .hud-bottom-row { gap: 6px; }
}

/* ============================================================
   HUD LAYAR KECIL — revisi anti-tabrakan
   Masalahnya struktural: .hud-top (logo/waktu/setelan), .hud-primary (dompet) dan
   .hud-status-banner (pesan) sama-sama mengklaim pita atas, jadi di layar pendek
   ketiganya bertumpuk. Solusinya: dompet DIMASUKKAN ke baris atas, arena supply
   jadi garis tipis selebar layar, dan pesan status dipindah ke bawah.
   ============================================================ */
@media (max-width: 700px) {
  .hud-top { padding: 6px 8px; }  /* dompet naik ke baris atas, tepat di sebelah logo — tanpa kotak sendiri */
  .hud-primary {
    position: absolute;
    top: calc(var(--hud-safe-top, env(safe-area-inset-top, 0px)) + 9px);
    left: 40px;
    width: auto;
    max-width: 45vw;
    margin: 0;
    padding: 0;
    gap: 0;
    background: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 5;
  }
  .hud-primary-tokens .hud-token-row { gap: 9px; }
  .hud-primary-tokens .hud-token b { font-size: 13px; }

  /* arena supply: garis tipis selebar layar, tepat di bawah baris atas */
  .hud-supply-meter {
    position: absolute;
    top: calc(var(--hud-safe-top, env(safe-area-inset-top, 0px)) + 38px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 0 8px;
    border: none;
    z-index: 4;
  }
  .hud-supply-meter-head { padding: 0 0 2px; }
  .hud-supply-meter .hud-card-label { display: none; }
  .hud-supply-meter-value { font-size: 9px; }
  .hud-supply-meter-track { height: 3px; }

  /* pesan status turun ke bawah, di atas joystick — tidak lagi menabrak dompet */
  .hud-status-banner {
    top: auto;
    bottom: calc(196px + env(safe-area-inset-bottom, 0px));
    max-width: 92vw;
  }
  .hud-status-text { font-size: 9.5px; padding: 4px 9px; }

  /* kartu samping turun sedikit agar lepas dari garis supply */
  .hud-side { margin-top: 26px; }
}

@media (max-width: 700px) and (max-height: 460px) {  .hud-side { margin-top: 20px; }
  .joystick { width: 140px; height: 140px; bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
  .joystick-ring { inset: 16px; }
  .joystick-knob { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
}

/* ============================================================
   HUD RINGKAS — versi mengikat (final)
   Dua percobaan sebelumnya kalah: yang pertama karena urutan berkas, yang kedua
   diduga karena ambang 700px belum tentu terpenuhi. Blok ini memakai selektor
   .hud > … (spesifisitas 0,2,0) sehingga mengalahkan semua aturan satu-kelas,
   dan ambangnya dilebarkan ke 900px agar jendela sempit pun ikut.
   ============================================================ */
@media (max-width: 900px) {
  .hud > .hud-primary {
    position: absolute;
    top: calc(var(--hud-safe-top, env(safe-area-inset-top, 0px)) + 9px);
    left: 42px;
    right: auto;
    width: auto;
    max-width: 44vw;
    margin: 0;
    padding: 0;
    gap: 0;
    background: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0;
    z-index: 6;
  }
  .hud > .hud-primary .hud-primary-label { display: none; }
  .hud > .hud-primary .hud-token-row { display: flex; flex-direction: row; gap: 9px; margin: 0; }
  .hud > .hud-primary .hud-token { gap: 4px; }
  .hud > .hud-primary .hud-token img { width: 15px; height: 15px; }
  .hud > .hud-primary .hud-token b { font-size: 13px; min-width: 0; text-align: left; }
  .hud > .hud-primary .hud-token i { display: none; }
  .hud > .hud-primary .hud-primary-value { display: none; }

  .hud > .hud-primary .hud-supply-meter {
    position: fixed;
    top: calc(var(--hud-safe-top, env(safe-area-inset-top, 0px)) + 38px);
    /* 12px each side so the boost bar + supply counts line up with the cards below
       (left 12 / right 12) and the status text above (left 12), not 4px wider. */
    left: 12px;
    right: 12px;
    margin: 0;
    padding: 0;
    border: none;
  }
  .hud > .hud-primary .hud-supply-meter-head { padding: 0 0 2px; }
  .hud > .hud-primary .hud-supply-meter .hud-card-label { display: none; }
  .hud > .hud-primary .hud-supply-meter-value { font-size: 9px; }
  .hud > .hud-primary .hud-supply-meter-track { height: 3px; }  .hud > .hud-side { margin-top: 30px; }}

/* Layar kecil: buang penunjuk boost & emote dari bawah — boost tetap jalan
   (sentuh arena) dan ruang bawah disisakan untuk joystick. Eject tetap ada,
   dikecilkan ke pojok kanan agar tidak berebut tempat dengan joystick. */
@media (max-width: 900px) {
  .hud > .hud-bottom #boost-indicator,
  .hud > .hud-bottom #emote-toggle,
  .hud > .hud-bottom .hud-controls-hint { display: none; }
  .hud > .hud-bottom { padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
  .hud > .hud-bottom .hud-bottom-row { justify-content: flex-end; padding-right: 8px; gap: 6px; }}

/* Cegah halaman melebar ke samping: satu elemen yang lebih lebar dari viewport
   (gambar berukuran asli, grid kolom tetap, kanvas sisa ukuran lama) membuat
   seluruh halaman bisa digeser horizontal. */
html, body.fish-app { max-width: 100%; overflow-x: hidden; }
body.fish-app img, body.fish-app canvas { max-width: 100%; }
#fish-game { max-width: 100vw; }
.stage, .overlay, .room-list, .lobby-browser, .lobby-rows, .lobby-row { max-width: 100%; min-width: 0; }
.lobby-row { overflow: hidden; }

/* ============================================================
   HUD RINGKAS — perbaikan berdasar pengukuran nyata di browser
   Dua sebab kegagalan sebelumnya, keduanya terukur:
   1. .hud adalah CSS Grid dan .hud-primary punya grid-row:2. Untuk elemen
      position:absolute di dalam grid, patokan top/left adalah AREA GRID-nya,
      bukan kotak container — jadi top:9px jatuh di 89px (setelah baris 1).
      Diperbaiki dengan mengembalikan penempatan grid ke auto.
   2. Tema "matrix" mengunci latar & garis panel pakai !important, sehingga
      background:none biasa selalu kalah.
   ============================================================ */
@media (max-width: 900px) {
  .hud > .hud-primary {
    grid-row: auto !important;
    grid-column: auto !important;
    position: absolute !important;
    top: calc(var(--hud-safe-top, env(safe-area-inset-top, 0px)) + 9px) !important;
    left: 44px !important;
    right: auto !important;
    width: auto !important;
    max-width: 42vw !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
  }
  .hud > .hud-primary .hud-supply-meter {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
  }
  .hud > .hud-bottom .hud-bottom-row {
    display: flex !important;
    justify-content: flex-end !important;
    padding-right: 8px;
  }
}

/* Terukur di browser pada lebar 390px: logo 20..74, dompet 44..140, timer 138..248 —
   celah logo→timer hanya 64px sedangkan dompet perlu 96px, jadi pasti bertindih.
   Logo dihilangkan di layar kecil (sekadar hiasan saat sudah di dalam game) agar
   dompet mendapat slot kiri utuh. Baris bawah dibuat selebar penuh supaya Eject
   benar-benar menepi ke kanan. */
@media (max-width: 900px) {  .hud > .hud-primary { left: 14px !important; max-width: 46vw !important; }
  .hud > .hud-bottom .hud-bottom-row { width: 100% !important; }
}

/* Terukur: setelah logo disembunyikan, timer bergeser ke x=20 dan menabrak dompet
   (space-between mengisi ruang kosong). Baris atas diberi padding kiri seukuran
   dompet supaya isinya mulai setelahnya. Kartu samping menjulur sampai y=766 dan
   menabrak pesan status di y=613 — tingginya dibatasi dan dipaksa menempel atas. */
@media (max-width: 900px) {
  .hud > .hud-top { padding-left: 118px !important; }
  .hud > .hud-side {
    align-self: start !important;
    max-height: 40vh !important;
  }
  .hud > .hud-side .hud-card-leaderboard .hud-card-body { max-height: 130px !important; }
}

/* Row 2 (status + supply bar) sat at y72-76 while the top row now ends at ~y46 — a
   ~30px dead band the player flagged. Pulled up to sit just under the top row. Kept in
   lockstep with .hud-clock's top below so the status text and the supply figure stay on
   one line. */
@media (max-width: 900px) {
  .hud > .hud-primary .hud-supply-meter {
    top: calc(var(--hud-safe-top, env(safe-area-inset-top, 0px)) + 52px) !important;
  }
}

/* Layar pendek (HP melintang). Aturan sebelumnya dibatasi lebar 700px sehingga
   740x360 tidak tercakup dan pesan status menabrak joystick. */
@media (max-width: 900px) and (max-height: 500px) {  .joystick { width: 128px !important; height: 128px !important; bottom: calc(46px + env(safe-area-inset-bottom, 0px)) !important; }
  .joystick-knob { width: 38px !important; height: 38px !important; margin: -19px 0 0 -19px !important; }
  .hud > .hud-side { max-height: 52vh !important; }
}

/* Timer & tombol setelan disamakan tinggi dengan baris token (±15px) agar baris
   atas benar-benar satu tingkat, bukan tiga ukuran berbeda. Label "TIME LEFT"
   dihilangkan di layar kecil — angkanya sudah cukup jelas. */
@media (max-width: 900px) {
  .hud > .hud-top .hud-timer {
    padding: 2px 9px !important;
    min-width: 0 !important;
    gap: 0 !important;
    border-radius: 0 !important;
  }
  .hud > .hud-top .hud-timer-label { display: none !important; }
  .hud > .hud-top .hud-timer-value { font-size: 13px !important; line-height: 1.25 !important; }
  .hud > .hud-top #hud-settings {
    width: 26px !important;
    height: 26px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border-radius: 6px !important;
  }
  .hud > .hud-top #hud-settings svg { width: 15px !important; height: 15px !important; }
  .hud > .hud-top { align-items: center !important; }
}

/* Terukur: .hud-top adalah grid "93px 26px 93px" yang menyusut karena logo
   disembunyikan, sehingga tombol setelan berhenti di tengah (x=261) alih-alih
   menepi kanan. Di layar kecil dibuat flex agar timer dan setelan terbagi. */
@media (max-width: 900px) {
  .hud > .hud-top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
  }
}

/* Layar melintang: baris atas lebih pendek sehingga kartu samping naik dan
   tertabrak garis supply (yang posisinya tetap di y=72..95). */
@media (max-width: 900px) and (max-height: 500px) {
  .hud > .hud-side { margin-top: 52px !important; }
}

/* ============================================================
   PENYEBAB HALAMAN BISA DIGESER KE KANAN
   .overlay-backdrop::before (lantai perspektif TRON) memakai width:300% dengan
   left:50%, jadi menjulur 100% lebar layar ke kiri DAN ke kanan. Karena wadahnya
   tidak memotong, kelebihan di sisi kanan menjadi area yang bisa digeser di HP.
   Dipotong di wadahnya — efek visualnya tetap utuh di dalam layar.
   ============================================================ */
.overlay-backdrop { overflow: hidden; }
.overlay { overflow-x: hidden; }

/* Baris atas dijadikan satu garis rapi seperti toolbar: token, waktu dan setelan
   sejajar di satu tingkat, dengan garis pemisah di bawahnya. */
@media (max-width: 900px) {
  .hud > .hud-top {
    border-bottom: 1px solid rgba(90, 255, 150, 0.16) !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    min-height: 34px !important;
  }
  .hud > .hud-primary .hud-token-row { align-items: center !important; }
}

/* Terukur: pusat token di y=17 sedangkan timer & setelan di y=30 — token 13px
   terlalu tinggi sehingga baris atas terlihat tidak sejajar. Digeser turun. */
@media (max-width: 900px) {
  .hud > .hud-primary { top: calc(var(--hud-safe-top, env(safe-area-inset-top, 0px)) + 22px) !important; }
}

/* Mode menonton (pemain sudah mati): joystick, boost dan emote tidak berfungsi lagi,
   jadi disembunyikan. Sisakan Eject supaya pemain tetap bisa keluar. */
body.is-spectating .joystick { display: none !important; }
body.is-spectating #boost-indicator,
body.is-spectating #emote-toggle { display: none !important; }

/* ============================================================
   PENGAMAN LEBAR TOMBOL
   Label yang panjang membuat tombol memanjang melewati kartunya di layar sempit.
   Teks dipotong dengan elipsis, bukan memaksa tombol melebar.
   ============================================================ */
@media (max-width: 700px) {
  .stage button,
  .overlay button,
  .hud-pill,
  .wallet-strip-btn,
  .lr-join {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .stage-cta,
  .stage-cta-secondary {
    font-size: 12.5px;
    padding-left: 12px;
    padding-right: 12px;
    min-width: 0;
  }
  .stage-foot { gap: 8px; }
  .wallet-strip-btn { font-size: 11.5px; padding-left: 10px; padding-right: 10px; }
}

/* ============================================================
   SELARASKAN LAYAR MENU GAME dengan halaman lain (landing/wallet)
   Latar, warna panel, dan sudut disamakan agar /FishTrade tidak
   terlihat berbeda sendiri. Hanya menyentuh lapisan menu (.overlay
   dan isinya) — kanvas permainan, HUD dan joystick tidak diubah.
   ============================================================ */
.overlay{
  background:#03070a;
  background-image:
    radial-gradient(110% 45% at 50% 0%,rgba(77,255,142,.09),transparent 62%),
    linear-gradient(rgba(90,255,150,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(90,255,150,.035) 1px,transparent 1px);
  background-size:auto,32px 32px,32px 32px;
  background-attachment:fixed;
}
/* garis scanline halus, sama seperti halaman lain */
.overlay::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.15) 0 1px,transparent 1px 3px);
  opacity:.4;
}
/* panel menu: warna & tepi seragam, tanpa sudut membulat */
.stage{
  background:rgba(6,18,12,.72) !important;
  border-color:rgba(90,255,150,.42) !important;
  border-radius:0 !important;
  box-shadow:0 0 44px rgba(77,255,140,.08) !important;
}
/* semua elemen di dalam menu ikut kotak */
.overlay .stage *,
.overlay .lobby-row,
.overlay .room-card,
.overlay .stage-cta,
.overlay .stage-cta-secondary,
.overlay .lr-join,
.overlay .search-input,
.overlay .lobby-search,
.overlay .lobby-page-btn,
.overlay .wallet-strip-btn{
  border-radius:0 !important;
}
/* titik/indikator bulat tetap bulat */
.overlay .eyebrow-dot,
.overlay .hud-card-dot,
.overlay .lr-signal .sig-bar{border-radius:50% !important}
.overlay .lr-signal .sig-bar{border-radius:0 !important}

/* ---- latar benar-benar sama dengan halaman lain ----
   .overlay-backdrop membawa warna + lantai perspektif TRON yang tidak ada di
   halaman lain, sehingga /FishTrade terlihat berbeda. Dimatikan; latar diambil
   alih .overlay yang sudah diseragamkan di atas. */
.overlay-backdrop{background:none !important}
.overlay-backdrop::before,
.overlay-backdrop::after{display:none !important}

/* ---- panel menu dijadikan jendela terminal ----
   Bilah judul (tiga titik + path) digambar lewat pseudo-element agar tidak
   perlu mengubah markup/JS permainan. */
.stage{padding-top:0 !important}
.stage::before{
  content:"fish@arena: ~/arena";
  display:block;
  margin:0 -16px 16px;
  padding:11px 15px 11px 62px;
  border-bottom:1px solid rgba(90,255,150,.28);
  background:
    radial-gradient(circle 5px at 20px 50%, #2f5c46 98%, transparent),
    radial-gradient(circle 5px at 35px 50%, #2f5c46 98%, transparent),
    radial-gradient(circle 5px at 50px 50%, #4dff8c 98%, transparent),
    rgba(6,18,12,.9);
  font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;
  font-size:12px;
  color:#8fbfa4;
  letter-spacing:.01em;
}

/* ---- lebih lebar di desktop, tidak mengambang kecil ---- */
@media (min-width:900px){
  .stage{width:min(1000px,100%) !important}
}
@media (min-width:1280px){
  .stage{width:min(1120px,100%) !important}
}
@media (max-width:600px){
  .stage::before{margin:0 -12px 12px;padding-left:56px;font-size:11px}
}

/* ============================================================
   MATCHMAKING SCAN STAGE (#arena-stage)
   Square terminal panels, mono type, one solid green action.
   All motion is CSS-only and disabled under prefers-reduced-motion.
   ============================================================ */
.stage-scan { width: min(560px, 100%); }
/* The results screen keeps the compact card width on desktop too. Its content is a short
   standings list; the wide desktop stage (the !important override above) left that list
   floating in a mostly empty panel. Id + !important outranks that override. */
#arena-result-stage.stage { width: min(560px, 100%) !important; }

/* --- arena choices: two outlined cards, never solid-filled --- */
.scan-arenas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.scan-arena {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  padding: var(--space-3);
  background: var(--mtx-panel);
  border: 1px solid var(--mtx-line);
  color: var(--mtx-text);
  font-family: var(--font-mono);
  cursor: pointer;
  transition: border-color var(--motion-quick), background var(--motion-quick);
}

.scan-arena:hover,
.scan-arena:focus-visible {
  border-color: var(--mtx-line-strong);
  outline: none;
}

.scan-arena.is-on {
  border-color: var(--mtx-green);
  background: rgba(40, 255, 130, 0.07);
  box-shadow: inset 0 0 0 1px rgba(77, 255, 140, 0.25);
}

.scan-arena-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.scan-arena-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--mtx-green-soft);
}

.scan-arena.is-on .scan-arena-name { color: var(--mtx-green); }

.scan-arena-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mtx-muted);
  border: 1px solid var(--mtx-line);
  padding: 2px 6px;
  white-space: nowrap;
}

/* The REAL arena's tag is green, like every other real-money figure in the product.
   It used to be --color-warning (#ffb347), which sits a few points away from the demo
   amber (#ffc85a) — so the tag reading "Real 0xT" and the tag reading "Demo 0xD" were
   very nearly the same colour, which is precisely the confusion these tags exist to
   prevent. Warning-orange also said the wrong thing: paying is the normal path, not
   a hazard. */
.scan-arena-tag-cost {
  color: var(--mtx-green, #4dff8c);
  border-color: rgba(77, 255, 140, 0.45);
}

.scan-arena-cost {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  /* Real money is green, demo money is amber — the wallet page's language. A real
     seat price is the default here; .scan-arena-cost-demo overrides it. */
  color: var(--mtx-green);
}

.scan-arena-cost-free { color: var(--mtx-green); }
.scan-arena-loading { color: var(--color-text-secondary, #8aa); font-size: 12px; animation: scan-arena-pulse 1s ease-in-out infinite; }
@keyframes scan-arena-pulse { 50% { opacity: 0.35; } }

/* Demo money is amber (#ffc85a) everywhere in this product — the wallet page sets
   that language and the arena cards follow it, so a seat priced in 0xD never reads
   like a seat priced in real 0xT. No radius: house style is square. */
.scan-arena-cost-demo { color: #ffc85a; }

.scan-arena-tag-demo {
  color: #ffc85a;
  border-color: rgba(255, 200, 90, 0.45);
}

.hud-primary-label.is-demo { color: #ffc85a; }

.scan-arena-note {
  font-size: 10px;
  line-height: 1.4;
  color: var(--mtx-muted);
}

/* --- scanner panel --- */
.scan-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--mtx-panel);
  border: 1px solid var(--mtx-line);
  box-shadow: 0 0 22px var(--mtx-glow), inset 0 0 30px rgba(0, 40, 20, 0.2);
}

.scan-panel-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--mtx-line);
}

.scan-fee-slot {
  margin-left: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-mono);
}

.scan-fee-label {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mtx-muted);
}

#arena-fee {
  font-size: 12px;
  font-weight: 800;
  color: var(--color-warning);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* free entry reads green rather than warning-amber */
.scan-panel.is-free #arena-fee { color: var(--mtx-green); }

/* --- the emotional centre: "6 of 10 found" --- */
.scan-readout {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-2);
}

.scan-count {
  font-family: var(--font-mono);
  font-size: clamp(30px, 7vw, 40px);
  font-weight: 800;
  line-height: 1;
  color: var(--mtx-green);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 32px var(--mtx-glow);
}

.scan-count-unit {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mtx-muted);
}

/* --- ten-slot indicator + sweeping scan line --- */
.scan-field {
  position: relative;
  overflow: hidden;
  padding: var(--space-3) var(--space-2);
  border: 1px solid var(--mtx-line);
  background:
    linear-gradient(rgba(90, 255, 150, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90, 255, 150, 0.03) 1px, transparent 1px),
    rgba(3, 10, 6, 0.6);
  background-size: 16px 16px, 16px 16px, auto;
}

.scan-dots {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 5px;
}

.scan-dot {
  height: 30px;
  border: 1px solid var(--mtx-line);
  background: rgba(90, 255, 150, 0.05);
  transition: background var(--motion-default), border-color var(--motion-default), box-shadow var(--motion-default);
}

.scan-dot.is-filled {
  background: var(--mtx-green);
  border-color: var(--mtx-green);
  box-shadow: 0 0 12px rgba(77, 255, 140, 0.55);
}

/* a slot that just registered a contact flashes once, then settles into is-filled */
.scan-dot.is-hit {
  animation: arenaSlotHit 420ms steps(1, end) 1;
}

@keyframes arenaSlotHit {
  0%   { background: var(--mtx-green-soft, #b7ffd4); box-shadow: 0 0 22px rgba(183, 255, 212, 0.9); }
  35%  { background: rgba(3, 10, 6, 0.6); box-shadow: none; }
  60%  { background: var(--mtx-green); box-shadow: 0 0 22px rgba(183, 255, 212, 0.8); }
  100% { background: var(--mtx-green); box-shadow: 0 0 12px rgba(77, 255, 140, 0.55); }
}

@media (prefers-reduced-motion: reduce) {
  .scan-dot.is-hit { animation: none; }
}

/* the sweep: a soft green column travelling across the ten slots.
   Only runs while the stage is scanning. */
.scan-sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 22%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(77, 255, 140, 0.10) 45%,
    rgba(183, 255, 212, 0.55) 50%,
    rgba(77, 255, 140, 0.10) 55%,
    transparent 100%);
  mix-blend-mode: screen;
}

#arena-stage.is-scanning .scan-sweep {
  opacity: 1;
  animation: arenaScanSweep 1.9s linear infinite;
}

@keyframes arenaScanSweep {
  from { transform: translateX(-120%); }
  to   { transform: translateX(560%); }
}

/* empty slots breathe faintly while searching, so it reads as live */
#arena-stage.is-scanning .scan-dot:not(.is-filled) {
  animation: arenaSlotIdle 2.4s ease-in-out infinite;
}

#arena-stage.is-scanning .scan-dot:nth-child(2n) { animation-delay: 0.25s; }
#arena-stage.is-scanning .scan-dot:nth-child(3n) { animation-delay: 0.5s; }

@keyframes arenaSlotIdle {
  0%, 100% { border-color: var(--mtx-line); }
  50% { border-color: rgba(90, 255, 150, 0.55); }
}@keyframes arenaStatePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}/* --- footer: SCAN is the only solid fill --- */
.scan-foot { gap: var(--space-2); }
.scan-foot .stage-cta-secondary { flex: 0 0 auto; }
.scan-foot #arena-scan-btn { flex: 1; }
/* Both buttons are .stage-cta (display:inline-flex), which beats the UA [hidden]
   rule — so hiding either needs an explicit display:none, or the button stays on
   screen. Without this the Ready button never left when a scan started. */
.scan-foot #arena-scan-btn[hidden] { display: none; }
.scan-foot #arena-cancel-btn[hidden] { display: none; }

/* --- narrow screens (375px and below stays usable) --- */
@media (max-width: 560px) {
  .scan-arenas { grid-template-columns: 1fr; }
  .scan-dots { gap: 4px; }
  .scan-dot { height: 24px; }
  .scan-field { padding: var(--space-2) 6px; }
  .scan-panel-bar { flex-wrap: wrap; row-gap: 6px; }
  .scan-fee-slot { margin-left: auto; }
  .scan-foot { flex-wrap: wrap; }
  .scan-foot .stage-cta-secondary { flex: 1 1 auto; }
  .scan-foot #arena-scan-btn { flex: 1 1 100%; order: -1; }
}

@media (prefers-reduced-motion: reduce) {
  #arena-stage.is-scanning .scan-sweep {
    animation: none;
    opacity: 0.35;
    width: 100%;
    transform: none;
  }
  #arena-stage.is-scanning .scan-dot:not(.is-filled),
  #arena-stage.is-scanning .scan-state {
    animation: none;
  }
}


/* ============================================================
   MATCH HUD: clock at the left, kill feed tucked under it.
   The feed used to be a wide centred banner floating over the middle of the arena —
   the one place you need to see. It is the same element, moved and shrunk.
   ============================================================ */
.hud-clock {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  margin-right: auto;          /* hold the left edge; the strip no longer centres it */
}
/* "Time Left" is dropped at every width — a clock counting down beside a fish arena
   does not need naming, and the words were most of the box. */
.hud-clock .hud-timer-label { display: none !important; }

.hud-clock .hud-timer {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
/* The feed keeps its element but loses the pill it wore as a centred banner: inside
   the clock stack a bordered, glowing box is a second HUD panel competing with the
   clock above it. Flat text, left-aligned, sized to sit under the numerals. */
.hud-clock .hud-status-text {
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  text-align: left;
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--color-text-secondary, rgba(220, 255, 235, 0.68));
  /* Two lines at most, then ellipsis: a long kill message must not push the HUD
     around or wrap across half the screen. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: min(320px, 46vw);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}


/* ============================================================
   MATCH HUD LAYOUT — the SAME arrangement on phone and desktop.

   The shape, at every width:
     row 1   brand · coin row (0xG/0xS/0xB) ............... countdown (right)
     row 2   kill status (left) ................. arena supply meter (right)
     row 3   market map (left corner) ........... top wallets (right corner)

   The desktop used to run a different shape entirely: the wallet was a tall
   bordered panel down the left edge (x 12-232, y 66-254), the countdown floated
   at a third height, and the two cards could not start until y 264 — an eighth of
   the screen spent on nothing. Measured on 1280x800. The phone had already been
   flattened into the three rows above; this section now flattens the desktop the
   same way, so the only difference between the two is size.

   Everything positioned here is fixed/absolute against the VIEWPORT rather than
   laid out in .hud's grid. Three things forced that, all found by measuring:
     - `.hud { position: relative }` made .hud the containing block for its
       absolutely positioned children; .hud is 393px tall on an 844px screen, so
       the joystick's `bottom: 76px` put it at y=211, halfway up the arena.
       Do not add positioning to .hud.
     - a `transform` on .hud-clock made IT the containing block for its own
       position:fixed child, sliding the countdown from x 318 to x 220 into the
       status text. Keep transforms off every ancestor of a fixed element.
     - for the same reason widths are set explicitly (`calc(100vw - Npx)` or a
       flat px) instead of by pairing `left` with `right`: measured left/right of
       12px each still produced a 409.6px box on a 390px screen.
   Also note .hud is a GRID: an absolutely positioned child of a grid container
   resolves its offsets against its GRID AREA, not the container box, so anything
   taken out of flow here must first reset grid-row/grid-column to auto.
   ============================================================ */

/* ---- row 3: the two cards ----------------------------------------------
   One size, one per top corner, both pinned to the same top edge. The map was
   fixed while the leaderboard still sat in .hud-side's flow, so their tops
   differed by a few pixels and matching their heights could never line them up. */
.hud-card-minimap,
.hud-card-leaderboard {
  position: fixed !important;
  top: 104px;                 /* just under row 2; per-width values below */
  z-index: 3;
  margin: 0 !important;
  width: 118px !important;
  max-width: 118px !important;
  box-sizing: border-box;
}
.hud-card-minimap { left: 12px; right: auto; }
.hud-card-leaderboard { right: 12px; left: auto; }

/* Height on the BODY, never on the card. Fixing the card's height kept the frame
   at full size after collapsing it — the contents vanished and an empty box
   stayed, which makes the collapse button pointless. Sizing the body lets the
   card shrink to its header. max-height too: another rule caps the leaderboard
   body at 96px and quietly won, leaving the pair 141 and 125 tall. */
.hud .hud-card-minimap .hud-card-body,
.hud .hud-card-leaderboard .hud-card-body,
.hud > .hud-side .hud-card-leaderboard .hud-card-body {
  height: 112px !important;
  max-height: 112px !important;
  box-sizing: border-box;
}

/* The map canvas carries width/height attributes of 172 and only `max-width:100%`
   to restrain it, so in a 118px card it was drawn 118 wide by a full 172 tall —
   squashed, and taller than the body that holds it. Fit it to the box it is given
   and keep it square. */
.hud-card-minimap .hud-card-body { align-items: center; }
.hud-card-minimap .hud-minimap-frame {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
}
.hud-card-minimap #mini-map {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ---- row 1 right: the countdown, then the exit ------------------------- */
/* The countdown gives up the corner to the Exit button and sits to its left.
   Both are fixed, so the gap has to be reserved here — nothing in the grid flow
   pushes them apart. */
.hud-clock .hud-timer {
  position: fixed;
  top: 16px;
  right: 48px;
  z-index: 3;
}

/* ---- row 2 left: the kill status ---------------------------------------
   One line, ellipsis, no pill. It is a feed, not a panel; anything with a border
   here reads as a third card competing with the two real ones. */
.hud-clock {
  position: fixed;
  align-items: flex-start;
  z-index: 3;
}
.hud-clock .hud-status-text {
  max-width: 100%;
  min-width: 0;                /* clip rather than push the box wider */
  font-size: 10px;
  line-height: 1.3;
  text-align: left;
  display: block;
  -webkit-line-clamp: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hud-supply-meter { margin-top: 4px !important; }

/* ============================================================
   WIDE SCREENS (> 900px)
   The phone rules further down already produce the three rows; this block does
   the same job for the desktop, which otherwise keeps the base grid layout.
   ============================================================ */
@media (min-width: 901px) {
  /* Row 1: the wallet stops being a panel and becomes a coin row sitting beside
     the brand, exactly as it does on a phone. Stripping it is what recovers the
     ~200px of dead height above the cards. The theme paints .hud-primary's fill
     and border with !important, so undoing it needs !important too. */
  .hud > .hud-primary {
    grid-row: auto !important;
    grid-column: auto !important;
    position: fixed !important;
    /* 24 centres the 18px-tall coin row on y 33 — the same centre line as the
       42px brand (y 12-54) and the 29px countdown (y 18-47). */
    top: 24px !important;
    /* TOP-LEFT corner. The brand used to sit there and the coins started at x 228 just
       past it; with the brand gone from the match HUD the corner is free. */
    left: 12px !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    max-width: calc(100vw - 420px) !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    z-index: 4;
  }
  .hud > .hud-primary .hud-primary-label { display: none; }
  .hud > .hud-primary .hud-primary-value { display: none; }
  .hud > .hud-primary .hud-token-row {
    flex-direction: row;
    align-items: center;
    gap: 18px;
    margin: 0;
  }
  .hud > .hud-primary .hud-token { gap: 6px; }
  .hud > .hud-primary .hud-token img { width: 18px; height: 18px; }
  .hud > .hud-primary .hud-token b { font-size: 17px; min-width: 0; text-align: left; }
  .hud > .hud-primary .hud-token i { font-size: 9px; }

  /* The countdown, level with that coin row. Stacked label-over-value it stood
     57px tall against the row's 21px and could not be level with anything, so it
     lies down into one line. */
  .hud .hud-clock .hud-timer {
    top: 18px;
    right: 12px;              /* opposite corner from the coins */
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    padding: 5px 14px;
    min-width: 0;
  }
  .hud .hud-clock .hud-timer-value { font-size: 17px; }

  /* Row 2: status on the left, supply meter on the right, both on one line.
     The supply meter has to leave .hud-primary's flow to get there — as a fixed
     element it escapes the (now inline) wallet entirely. */
  .hud > .hud-primary .hud-supply-meter {
    position: fixed;
    top: 60px;
    right: 12px;
    left: auto;
    width: 340px;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    gap: 4px;
    z-index: 3;
  }
  .hud > .hud-primary .hud-supply-meter-head { padding: 0; }
  .hud > .hud-primary .hud-supply-meter-track { height: 4px; }

  .hud .hud-clock {
    top: 62px;
    left: 12px;
    right: auto;
    /* 340 supply + 12 right gutter + 12 left gutter + 20 breathing = 384 */
    width: calc(100vw - 384px);
    max-width: calc(100vw - 384px);
  }

  /* Row 3: the cards start straight under row 2 instead of at y 264, and get a
     size worth having on a wide screen. */
  .hud-card-minimap,
  .hud-card-leaderboard {
    top: 100px;
    width: 176px !important;
    max-width: 176px !important;
  }
  .hud .hud-card-minimap .hud-card-body,
  .hud .hud-card-leaderboard .hud-card-body,
  .hud > .hud-side .hud-card-leaderboard .hud-card-body {
    height: 150px !important;
    max-height: 150px !important;
  }
}

/* ============================================================
   NARROW SCREENS (<= 900px)
   ============================================================ */
@media (max-width: 900px) {
  .hud > .hud-top { padding-left: 8px !important; }
  /* On a phone the left column is only the coin row and the supply bar, and the
     bar spans the full width — so the cards sit right under it, and the supply
     figure can take the right end of that bar opposite the status. */
  .hud-card-minimap,
  .hud-card-leaderboard { top: 84px; }
  /* No middle gap to use on a phone — the coin row and the countdown take both
     corners of a much narrower strip — so the status drops to the supply row. */
  /* Level with the arena-supply figure, sharing that row. Pulled up in lockstep with
     the supply bar (52px) so the status/supply row sits just under the top strip
     instead of floating ~30px below it. */
  .hud-clock {
    top: 56px;
    left: 12px;
    width: calc(100vw - 190px);
    max-width: calc(100vw - 190px);
  }
  .hud-supply-meter-head {
    flex-direction: row-reverse;
    justify-content: flex-start;
  }
}


/* .hud-top was a THREE-column grid — brand | timer | settings — so the clock was
   pinned to the middle column no matter what margins it was given, and the third
   column now sits empty where the gear used to be. Two columns: brand, then
   everything else starting immediately after it. */
.hud-top {
  grid-template-columns: auto 1fr !important;
}
.hud-top .hud-clock {
  justify-self: start;
}


/* Home glyph, sitting at the right end of the terminal title bar.
   That bar is a ::before on .stage — there is no element to place a button inside — so
   the link is positioned over it. The bar is 11px padding + ~19px line, and it starts
   at the stage's top edge after `.stage{padding-top:0}`, which is where the 6px offset
   and the -16px margin (matching the bar's own negative side margin) come from. */
.stage-scan { position: relative; }

/* Chrome buttons riding on the terminal title bar. That bar is a ::before on .stage,
   so there is nothing to place them inside — they are positioned over its right end.
   Back lives here rather than in the footer: offering it in both places would put the
   same action on one screen twice, which is what the footer clean-up was for. */
.stage-chrome-btns {
  position: absolute;
  top: 3px;
  right: 8px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
}
.chrome-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: none;
  color: var(--color-text-secondary, rgba(190, 235, 210, 0.55));
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
}
.chrome-btn:hover {
  color: var(--mtx-green, #5aff96);
  border-color: rgba(90, 255, 150, 0.45);
  background: rgba(90, 255, 150, 0.08);
}

/* --- Owner-provided panel icon art (Play / Play again / Home / Rankings / Exit /
   leaderboard). The art carries its own square frame, so it needs no border or radius
   from us. Kept crisp at small sizes with pixelated rendering. --- */
.game-ico { image-rendering: pixelated; display: block; }
.stage-cta .cta-ico {
  width: 22px; height: 22px; flex: none; margin-right: 2px;
}
/* The icon replaces the terminal "> " glyph on that button. */
.stage-cta.has-ico::before { content: none; }
.chrome-btn.has-ico { width: 30px; height: 30px; border-color: transparent; }
.chrome-btn.has-ico:hover { background: rgba(90, 255, 150, 0.12); }
.chrome-btn .chrome-ico { width: 26px; height: 26px; }
.hud-exit.has-ico { border-color: transparent; }
.hud-exit .hud-exit-ico { width: 26px; height: 26px; }
.leader-toggle .lt-trophy { width: 18px; height: 18px; flex: none; margin-right: 6px; }
/* With the header gone the cards are the first thing under the title bar; give them
   back the breathing room the heading used to provide. */
#arena-pick-stage .scan-arenas { margin-top: 4px; }



/* Arena card meta: a glyph and a number, twice. Deliberately quieter than the price —
   seats and cycle length are context, not the decision. */
.scan-arena-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 2px;
}
.arena-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  line-height: 1;
  color: var(--color-text-secondary, rgba(190, 235, 210, 0.55));
}
.arena-chip b { font-weight: 700; font-variant-numeric: tabular-nums; }


/* An arena the server refuses, shown as refused. Dimmed and inert rather than hidden,
   so a player can still see the real arena exists and what it will cost. */
.scan-arena.is-off {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.5);
}
.scan-arena.is-off:hover { border-color: inherit; }

/* ---- MATCH EXIT ----------------------------------------------------------
   The only way out of a running match. Deliberately quiet: it sits in the HUD
   chrome, not near the stats, because it is an action and everything else up
   there is information. It confirms before it fires — leaving kills the fish
   on the spot, so a mis-tap would cost the player everything they had eaten. */
/* Right column of the top strip, laid out BESIDE the clock (the network indicator
   holds the left column, the clock the centre). It used to be position:fixed to escape
   the token row that rendered over it, but fixed positioning pulled it out of the grid
   and floated it on top of the countdown — the overlap the player reported. It now
   flows as the header's last grid child; z-index keeps it above anything that reaches
   up into row 1. */
.hud-exit {
  position: relative;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  background: none;
  color: var(--color-text-secondary, rgba(190, 235, 210, 0.55));
  border: 1px solid transparent;
  cursor: pointer;
  pointer-events: auto;   /* the HUD itself is click-through */
}
.hud-exit svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hud-exit:hover,
.hud-exit:focus-visible {
  color: var(--mtx-red, #ff6b6b);
  border-color: rgba(255, 107, 107, 0.45);
}

/* Right cluster of the top strip: signal indicator + exit, kept together so they read
   as one right-hand element and never land under the clock or the wallet. */
.hud-top-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Empty left cell — see the HTML note. It just balances the grid so the clock centres. */
.hud-top-left { min-width: 1px; }

/* Connection indicator drawn as a signal-strength icon (four rising bars). Bars are
   coloured and dimmed by [data-state], set from arenaUpdateNet(). No text — the shape
   reads as signal on its own. */
.hud-net {
  position: relative;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  pointer-events: none;   /* purely informational */
  color: var(--mtx-green, #58e08a);
}
.hud-net-bars {
  width: 18px;
  height: 14px;
  display: block;
}
.hud-net-bars rect {
  fill: currentColor;
  transition: opacity 0.2s ease;
}
.hud-net[data-state="good"] { color: var(--mtx-green, #58e08a); }
.hud-net[data-state="good"] .hud-net-bars rect { opacity: 1; }
.hud-net[data-state="warn"] { color: #f2c14e; }
.hud-net[data-state="warn"] .hud-net-bars .b4 { opacity: 0.22; }
.hud-net[data-state="bad"]  { color: var(--mtx-red, #ff6b6b); }
.hud-net[data-state="bad"]  .hud-net-bars .b2,
.hud-net[data-state="bad"]  .hud-net-bars .b3,
.hud-net[data-state="bad"]  .hud-net-bars .b4 { opacity: 0.22; }
.hud-net[data-state="bad"]  .hud-net-bars { animation: hud-net-blink 1s steps(2, start) infinite; }

/* Plain-words warning when the connection is unstable or lost — the tiny signal bars
   alone are easy to miss when the fish start stuttering. (The bars carry no ms readout
   by owner's choice; the measured RTT appears only inside this warning.) */
.hud-net-warn {
  /* Bottom-left corner of the HUD (.hud is position:fixed; inset:0), clear of the
     clock, the kill feed and the side cards. Absolute takes it out of the HUD grid. */
  position: absolute;
  left: max(12px, env(safe-area-inset-left, 0px));
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  z-index: 2; pointer-events: none;
  max-width: min(70vw, 360px);
  padding: 4px 9px;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px; letter-spacing: 0.04em;
  border: 1px solid currentColor; background: rgba(6, 18, 12, 0.85);
}
.hud-net-warn[hidden] { display: none; }
.hud-net-warn[data-state="warn"] { color: #f2c14e; }
.hud-net-warn[data-state="bad"]  { color: var(--mtx-red, #ff6b6b); animation: hud-net-blink 1s steps(2, start) infinite; }

/* One currency in the match HUD. The old gold/silver/bronze chip row is retired: several
   layout rules set it display:flex, which beat the UA's [hidden], so it kept showing
   three numbers. Force it off; the single ABIT figure (#length-value) is what shows. */
.hud > .hud-primary .hud-token-row[hidden] { display: none !important; }
/* The ABIT unit rides on the figure itself (::after), so no grid placement can ever
   drop it under the number. */
.hud-primary-value#length-value::after {
  content: "ABIT";
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 12px; letter-spacing: 0.08em; margin-left: 6px; opacity: 0.8;
}
/* The single ABIT figure must actually show: two older layout rules hid
   .hud-primary-value inside the wallet card (back when the chip row was the display).
   Higher specificity than both, so the number wins at every breakpoint. */
.hud > .hud-primary .hud-primary-value#length-value { display: inline-block !important; }
@keyframes hud-net-blink { 50% { opacity: 0.35; } }

/* The scan status line. Always present, so a refusal has somewhere to land — the
   writer outlived the element it wrote to, which is why refusals were invisible. */
.scan-state { min-height: 1.2em; }

/* ============================================================
   TOP-RIGHT TRIO — signal · clock · exit, one fixed row.
   The top strip's elements are each position:fixed with their own right offsets set
   in several blocks above (and some of those offsets collided — the clock under the
   exit, the new signal under the clock). Rather than chase every one, this final block
   pins the three deterministically, right to left, at BOTH breakpoints. Last in the
   file so it wins on source order. Exit stays the right corner; the clock and the
   signal step left of it with real gaps.
   ============================================================ */
/* All three ride ONE shared vertical band: same top, same height, content
   centered inside. Because box-sizing is border-box everywhere (line 3), each
   box's vertical centre is exactly top + height/2 — identical for all three no
   matter how tall the clock's numerals, the signal svg, or the exit icon are.
   The band height matches the clock pill (the tallest), so the clock is
   unchanged and the shorter two just centre within an equal-height box. */
#hud-exit-btn.hud-exit {
  position: fixed !important;
  top: 14px !important;
  right: 12px !important;
  left: auto !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#hud-net.hud-net {
  position: fixed !important;
  top: 14px !important;
  right: 50px !important;   /* clears the 26px exit (ends at 38) with a gap */
  left: auto !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 6;
}
.hud .hud-clock .hud-timer {
  position: fixed !important;
  top: 14px !important;
  right: 80px !important;   /* clears the 20px signal (ends at 70) with a gap */
  left: auto !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* Mobile (<=900px): the clock pill is shorter (13px value, 2px padding), so the
   band shrinks to match it. Same top, so all three centres stay equal. */
@media (max-width: 900px) {
  #hud-exit-btn.hud-exit,
  #hud-net.hud-net,
  .hud .hud-clock .hud-timer {
    top: 14px !important;
    height: 24px !important;
  }
}
/* Telegram full screen: the phone status bar (clock/wifi/battery) AND Telegram's own
   floating controls (close / 3-dots / minimize) sit over the top of the HUD. --tg-top
   (set from JS = device safe-area top + Telegram content-inset top) is how far down every
   top-anchored HUD element must move so no info hides under them. It is 0 outside the Mini
   App, so this whole block is inert in a normal browser.
   translateY (not a `top` override) is used deliberately: it shifts each element by the
   same amount at EVERY breakpoint without needing that element's per-breakpoint base top,
   and — unlike a transform on a fixed element's PARENT — never turns an ancestor into the
   containing block for a fixed child (the .hud-clock/.hud-timer bug the layout warns about).
   The status text and timer are moved individually so .hud-clock itself keeps no transform. */
/* In Telegram full screen the whole HUD box is already dropped by --tg-top (which
   includes the device status bar), so the per-element env(safe-area-inset-top) offsets
   would DOUBLE-count it — that is what pushed the coin row ~60px below the timer and
   stranded the supply bar as a floating full-width green line. Zero the shared inset var
   here; every HUD top offset reads it and falls back to env() everywhere else, so normal
   iOS Safari / the plain in-app browser are unchanged. */
body.tg-fullscreen { --hud-safe-top: 0px; }

body.tg-fullscreen .hud {
  /* Drop the ENTIRE HUD box down by the inset, in one piece, instead of nudging each
     element (which desynced the fixed top strip from the grid-flow rows). .hud is
     `position:fixed; inset:0`; overriding only `top` moves its top edge down to --tg-top
     while `bottom:0` stays, so the box just gets shorter — the top row, coin row, status
     line, that divider rule and the cards all move down together and keep their alignment,
     and the joystick/bottom controls stay put at the bottom.
     `contain: layout` makes .hud the containing block for its OWN position:fixed children
     (exit / signal / timer / clock), so they ride down with the box too. .hud spans the
     full width, so this adds no horizontal shift (the bug a transform on the narrow
     .hud-clock once caused). Inert outside the Mini App: --tg-top is 0 there. */
  top: var(--tg-top, 0px) !important;
  contain: layout;
}

/* ============================================================
   BOOT LOADER — covers the app until the first arena frame is drawn
   ============================================================ */
.boot-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #03070a;
  opacity: 1;
  transition: opacity 0.4s ease;
}
.boot-loader.is-hidden { opacity: 0; pointer-events: none; }
.boot-loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
/* The wordmark logo. A slow breathing pulse stands in for the old spinner as the
   "still working" cue. Width-driven, height auto so the sticker keeps its ratio. */
.boot-logo {
  width: min(260px, 68vw);
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45));
  animation: boot-pulse 1.6s ease-in-out infinite;
}
@keyframes boot-pulse {
  0%, 100% { transform: scale(1); opacity: 0.92; }
  50% { transform: scale(1.06); opacity: 1; }
}
.boot-brand {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #4dff8c;
  padding-left: 0.34em; /* balance the trailing letter-spacing so it reads centred */
}
.boot-sub {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(210, 230, 220, 0.55);
}
@media (prefers-reduced-motion: reduce) {
  .boot-logo { animation: none; }
  .boot-loader { transition: none; }
}

/* Boot progress bar. Square track; the fill ramps on its own from first paint (CSS
   animation, so it moves before any script has parsed), then fish-trade.js cancels the
   animation and snaps the width to real milestones (scripts ready / socket / first frame). */
.boot-bar {
  width: min(260px, 68vw);
  height: 6px;
  margin-top: 12px;
  border: 1px solid rgba(90, 255, 150, 0.35);
  background: rgba(6, 18, 12, 0.9);
  overflow: hidden;
}
.boot-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--mtx-green, #5aff96);
  box-shadow: 0 0 10px rgba(90, 255, 150, 0.45);
  animation: boot-fill 7s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
  transition: width 0.25s ease-out;
}
@keyframes boot-fill { from { width: 0; } to { width: 82%; } }
@media (prefers-reduced-motion: reduce) {
  .boot-bar-fill { animation: none; width: 60%; transition: none; }
}

/* The empty grid spacer must never take space or catch clicks. */
.hud-top .hud-top-left { display: none; }

/* ============================================================
   ARENA RESULT SCREEN — shown at the bell (win / placement + standings)
   ============================================================ */
.arena-result-head { text-align: center; }
.arena-result-eyebrow {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent-gold-soft);
}
.arena-result-title {
  font-family: var(--font-display);
  font-size: 24px;
  margin: 6px 0 4px;
  color: var(--color-text-primary);
}
.arena-result-sub {
  font-size: 12px;
  color: var(--color-text-secondary);
}
.arena-result-standings {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 16px 0 4px;
  width: 100%;
}
.ar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--color-border);
  background: rgba(10, 20, 16, 0.4);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-text-secondary);
}
.ar-row.is-self {
  border-color: var(--color-accent-gold);
  background: rgba(170, 240, 120, 0.14);
  color: var(--color-accent-gold-soft);
  font-weight: 700;
}
.ar-rank { width: 18px; color: var(--color-text-muted); text-align: right; }
.ar-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-pts { font-variant-numeric: tabular-nums; }

/* ============================================================
   Kill feed vs. wallet card. The feed sits under the clock; a long line used to run
   right across the wallet card. Desktop: cap it to the clock column with an ellipsis.
   Compact (<=900px, where the wallet card is a fixed top-left tile): detach the feed
   into its own centred strip BELOW the top band so nothing can overlap it.
   ============================================================ */
.hud-status-text {
  display: inline-block;
  max-width: min(50vw, 480px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 900px) {
  /* Sits on the supply-header row: directly under the wallet figure, level with the
     "N ABIT" supply readout on the right, and above the card toggles. Left-aligned to
     the wallet card; width capped so it never reaches the readout. */
  .hud .hud-clock .hud-status-text {
    position: fixed;
    left: 14px;
    transform: none;
    top: calc(var(--hud-safe-top, env(safe-area-inset-top, 0px)) + 55px);
    max-width: calc(100vw - 150px);
    padding: 1px 7px;
    font-size: 10px;
    line-height: 14px;
    z-index: 7;
    pointer-events: none;
  }
}

/* ============================================================
   UI AUDIT FIXES
   ============================================================ */
/* Title bar text never runs under the chrome icons (absolutely positioned over the
   bar): reserve their width and ellipsize. On phones keep the same gap after the dots. */
.stage::before { padding-right: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) { .stage::before { padding-left: 62px; } }

/* The arena pick + scan cards match the results / ranking card width on desktop too
   (the generic wide-stage override made them 1000-1120px). */
#arena-pick-stage.stage,
#arena-stage.stage { width: min(560px, 100%) !important; }

/* Tablet (600-900px): the compact 118px leaderboard card truncated every name and
   clipped the 5th row despite the free width. Wider, and let the body fit its rows. */
@media (min-width: 600px) and (max-width: 900px) {
  .hud-card-leaderboard { width: 168px !important; max-width: 168px !important; }
  .hud .hud-card-leaderboard .hud-card-body,
  .hud > .hud-side .hud-card-leaderboard .hud-card-body { height: auto !important; max-height: none !important; }
}