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

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  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 {
  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: var(--radius-pill);
  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: var(--radius-lg);
  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: 3px;
  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);
}

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

.hud-supply-meter-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--color-accent-gold), var(--color-accent-gold-soft));
  box-shadow: 0 0 12px rgba(170, 240, 120, 0.5);
  animation: supplyDrift 6s ease-in-out infinite alternate;
}

@keyframes supplyDrift {
  from { transform: scaleX(1); }
  to { transform: scaleX(0.82); }
}

@media (prefers-reduced-motion: reduce) {
  .hud-supply-meter-fill { animation: none; }
}

/* 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: var(--radius-lg);
  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: 10px;
  letter-spacing: 0.16em;
  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: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.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: var(--radius-md);
  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: var(--radius-sm);
}

.leader-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  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 score shown as the 3 collected tokens (gold / silver / bronze) */
.leader-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leader-tokens { display: flex; align-items: center; gap: 7px; flex: none; font-variant-numeric: tabular-nums; }
.leader-tokens .lt { padding-left: 15px; background: transparent no-repeat left center / 12px 12px; font-size: 11px; line-height: 1; }
.leader-tokens .lt-g { background-image: url("/assets/tokens/xgold.png?v=4"); }
.leader-tokens .lt-s { background-image: url("/assets/tokens/xsilver.png?v=4"); }
.leader-tokens .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: var(--radius-pill);
  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: 4px;
  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: var(--radius-pill);
  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: var(--radius-pill);
  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: var(--radius-pill);
  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: var(--radius-pill);
  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: var(--radius-md);
  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: var(--radius-pill);
  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%);
  text-align: center;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md, 8px);
  background: rgba(40, 8, 14, 0.9);
  border: 1px solid var(--color-danger);
  box-shadow: 0 8px 22px rgba(255, 90, 90, 0.22);
  z-index: calc(var(--layer-hud) + 6);
  max-width: min(360px, 78vw);
  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);
  margin-bottom: 3px;
}

.death-alert-text {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.35;
}

/* ============================================================
   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: var(--radius-xl);
  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: var(--radius-md);
  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: var(--radius-sm);
  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: var(--radius-md);
  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: var(--radius-pill);
  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: var(--radius-md);
  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: var(--radius-md);
  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: var(--radius-pill);
  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: var(--radius-md);
  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: var(--radius-md);
  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: var(--radius-pill);
  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: var(--radius-md);
  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: var(--radius-md);
  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: var(--radius-md);
  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: 4px;
  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: var(--radius-pill);
  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: var(--radius-xl);
  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: var(--radius-xl);
  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: var(--radius-md);
  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: var(--radius-lg);
  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: var(--radius-sm);
  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(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: var(--radius-md);
    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(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: var(--radius-md); }
  .hud-card-toggle { padding: 5px 7px; font-size: 8px; letter-spacing: 0.08em; }
  .hud-card-label { font-size: 8px; letter-spacing: 0.08em; }
  .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: 4px; }
  .leader-tokens .lt { padding-left: 12px; background-size: 9px 9px; font-size: 8.5px; }
  #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: var(--radius-sm);
}

.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: var(--radius-lg);
  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: var(--radius-pill);
  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: var(--radius-md);
  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: var(--radius-pill);
  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: var(--radius-sm);
  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: var(--radius-xl);
  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: var(--radius-lg);
  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: var(--radius-lg);
  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, .hud-supply-meter-track,
.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,
.death-alert, .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: 3px !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: 3px !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: 3px !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: 3px !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: 2px !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: 2px !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: 2px !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: 3px !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: 2px !important;
}

/* supply meter fill -> green scan */
.hud-supply-meter-fill {
  background: linear-gradient(90deg, var(--mtx-green), var(--mtx-green-soft)) !important;
  box-shadow: 0 0 14px rgba(77, 255, 140, 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: 3px !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: 3px !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: 3px !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: 3px !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: 3px !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: 3px !important;
}
.emote-btn:hover, .emote-btn:focus-visible {
  background: rgba(77, 255, 140, 0.16) !important;
  border-radius: 3px !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: 3px !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: 8px; 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: 7px; 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: 1px; 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: 4px; 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: 5px; 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: 7px;
  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: 124px;
  height: 124px;
  border-radius: 50%;
  border: 1px solid rgba(90, 255, 150, 0.3);
  background: rgba(6, 18, 12, 0.42);
  display: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  z-index: 6;
}
.joystick.is-on { display: block; }
.joystick.is-active { border-color: rgba(90, 255, 150, 0.6); background: rgba(8, 26, 16, 0.6); }

.joystick-ring {
  position: absolute;
  inset: 26px;
  border-radius: 50%;
  border: 1px dashed rgba(90, 255, 150, 0.22);
  pointer-events: none;
}
.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: 112px; height: 112px; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  .joystick-knob { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
  .joystick-ring { inset: 22px; }
}

/* ============================================================
   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(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: 8px; }
  .hud-card-toggle { padding: 5px 7px; font-size: 8px; letter-spacing: 0.06em; }
  .hud-card-label { font-size: 8px; 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: 4px; }
  .leader-tokens .lt { padding-left: 12px; background-size: 9px 9px; font-size: 8.5px; }
  #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(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(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: 96px; height: 96px; bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
  .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(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(env(safe-area-inset-top, 0px) + 38px);
    left: 8px;
    right: 8px;
    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(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: 96px !important; }
}

/* Terukur: baris atas berakhir di y=62, garis supply masih di y=38 sehingga
   memotong kotak timer dan tombol setelan. Diturunkan ke bawah baris atas. */
@media (max-width: 900px) {
  .hud > .hud-primary .hud-supply-meter {
    top: calc(env(safe-area-inset-top, 0px) + 72px) !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: 92px !important; height: 92px !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: 6px !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(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:1px !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:"betta@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%); }

/* --- 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); }

/* 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: 104px; }
  /* 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: the figure already sits at
     the right end (x 310-340) and this takes the left. Both text baselines land on
     y 76 instead of the status floating on a row of its own 20px above. */
  .hud-clock {
    top: 76px;
    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: 6px;
  right: 6px;
  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);
}
/* 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. */
/* Top-right corner, immediately right of the countdown. It must be positioned
   rather than laid out: the token row and the clock both overlap the top strip,
   and a button placed in that flow rendered UNDERNEATH the gold coin's <img>,
   where it never received a click at all. */
.hud-exit {
  position: fixed;
  top: 16px;
  right: 12px;
  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);
}

/* 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; }