/* ============================================================
   Voxel Warlock Brawl — "Arcane Voxel Forge" UI system
   Palette : void / obsidian / ember / arcane / rune / gold
   Display : Press Start 2P (title)   Body : Chakra Petch
   ============================================================ */
:root {
  --void: #0a0814;
  --bg: #0a0814;
  --obsidian: #16112e;
  --panel: #181433;
  --panel-2: #120d28;
  --slot: #0f0c22;
  --ember: #ff5a3c;
  --accent: #ff5a3c;
  --arcane: #6c4cff;
  --accent2: #6c4cff;
  --rune: #7cff5a;
  --gold: #ffd23c;
  --pink: #ff4ca8;
  --cyan: #4cc9ff;
  --text: #ece9ff;
  --muted: #9a93c7;
  --line: rgba(124, 108, 196, 0.22);
  --line-strong: rgba(108, 76, 255, 0.55);
  --glow-arcane: 0 0 24px rgba(108, 76, 255, 0.45);
  --glow-ember: 0 0 24px rgba(255, 90, 60, 0.5);
  --shadow-panel: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(108, 76, 255, 0.12);
  --bezel: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -2px 0 rgba(0, 0, 0, 0.4);
  --font-display: "Press Start 2P", "Trebuchet MS", monospace;
  --font-ui: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* FX juice tokens (src/fx.js) */
  --fx-vignette-dmg: rgba(255, 90, 60, 0);
  --fx-vignette-lowhp: rgba(255, 40, 40, 0.35);
  --fx-flash-victory: rgba(255, 210, 60, 0.6);
  --shake-amp: 0px;
  --aberration-offset: 0px;
}

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

html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  -webkit-user-select: none; user-select: none;
  touch-action: none;
}

#game-canvas { position: fixed; inset: 0; display: block; }

/* ---------- Overlay & ambient atmosphere ---------- */
.overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  z-index: 10;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(108, 76, 255, 0.28), transparent 55%),
    radial-gradient(90% 80% at 50% 120%, rgba(255, 90, 60, 0.16), transparent 60%),
    radial-gradient(circle at 50% 40%, rgba(13, 11, 26, 0.6), rgba(7, 6, 16, 0.96));
}
.overlay::after {
  /* subtle voxel grid floor */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(108, 76, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(108, 76, 255, 0.06) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 50% 60%, #000 0%, transparent 75%);
  animation: gridDrift 24s linear infinite;
}
@keyframes gridDrift { to { background-position: 44px 88px, 88px 44px; } }
.hidden { display: none !important; }

/* floating embers */
.ember-field { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ember-field .ember {
  position: absolute; bottom: -12px;
  width: var(--s, 5px); height: var(--s, 5px);
  background: var(--c, var(--ember));
  border-radius: 1px;
  box-shadow: 0 0 8px var(--c, var(--ember));
  opacity: 0;
  animation: emberRise var(--dur, 9s) linear infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes emberRise {
  0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
  10% { opacity: 0.9; }
  90% { opacity: 0.7; }
  100% { transform: translateY(-104vh) translateX(var(--drift, 20px)) rotate(220deg); opacity: 0; }
}

/* ---------- Forged panel ---------- */
.panel {
  position: relative;
  background:
    linear-gradient(180deg, rgba(40, 32, 78, 0.92), rgba(15, 11, 33, 0.96));
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  padding: 34px 38px 28px;
  box-shadow: var(--shadow-panel);
  max-width: 940px; width: 100%;
  text-align: center;
  animation: panelIn 0.6s var(--ease-spring) both;
}
.panel::before {
  /* forged corner bevels */
  content: ""; position: absolute; inset: 0; border-radius: 20px; pointer-events: none;
  box-shadow: var(--bezel);
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(108, 76, 255, 0.16), transparent 70%);
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(26px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Brand / title ---------- */
.brand { margin-bottom: 22px; }
.brand-compact { margin-bottom: 14px; }
.eyebrow {
  display: inline-block; font-size: 11px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--arcane); font-weight: 700;
  padding: 5px 12px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: rgba(108, 76, 255, 0.1);
  animation: fadeDown 0.5s ease both 0.1s;
}
.title {
  font-family: var(--font-display);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin: 18px 0 14px; line-height: 1;
}
.title-line { display: block; }
.line-voxel { font-size: clamp(26px, 6vw, 50px); color: var(--text); text-shadow: 0 4px 0 rgba(0,0,0,0.45); animation: titleDrop 0.5s var(--ease-spring) both 0.15s; }
.line-warlock { font-size: clamp(28px, 6.5vw, 56px); color: var(--ember); text-shadow: 0 0 22px rgba(255,90,60,0.55), 0 4px 0 rgba(0,0,0,0.45); animation: titleDrop 0.5s var(--ease-spring) both 0.27s; }
.line-brawl { font-size: clamp(26px, 6vw, 50px); color: var(--arcane); text-shadow: 0 0 22px rgba(108,76,255,0.6), 0 4px 0 rgba(0,0,0,0.45); animation: titleDrop 0.5s var(--ease-spring) both 0.39s; }
.title-lobby { font-size: clamp(22px, 5vw, 34px); color: var(--text); }
@keyframes titleDrop { from { opacity: 0; transform: translateY(-22px) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.tag { color: var(--muted); font-size: 15px; max-width: 460px; margin: 0 auto; animation: fadeDown 0.5s ease both 0.5s; }

/* ---------- Menu body layout ---------- */
.menu-body {
  display: grid; grid-template-columns: 0.9fr 1fr 1.15fr; gap: 22px;
  text-align: left; margin: 6px 0 24px;
  animation: fadeDown 0.5s ease both 0.55s;
}
.config-col { display: flex; flex-direction: column; gap: 20px; }
.character-col { display: flex; flex-direction: column; gap: 10px; }
.arena-col { display: flex; flex-direction: column; gap: 10px; }

.field { display: flex; flex-direction: column; gap: 9px; }
.field-inline { flex-direction: row; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; }
.field-copy { display: flex; flex-direction: column; gap: 2px; }
.field-label { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.field-hint { font-size: 12px; color: rgba(154, 147, 199, 0.7); }

/* ---------- Custom rune text field ---------- */
.rune-field { position: relative; }
.rune-field input,
.rune-code input {
  width: 100%; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 12px;
  color: var(--text); font-family: var(--font-ui); font-size: 17px; font-weight: 600;
  padding: 14px 16px; outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.rune-field input::placeholder, .rune-code input::placeholder { color: rgba(154,147,199,0.55); font-weight: 500; }
.rune-field input:focus { border-color: var(--arcane); box-shadow: var(--glow-arcane); background: #150f30; }
.rune-field-line {
  position: absolute; left: 14px; right: 14px; bottom: 8px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--arcane), var(--ember));
  transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease-spring);
}
.rune-field input:focus ~ .rune-field-line { transform: scaleX(1); }

/* ---------- Custom toggle ---------- */
.rune-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: var(--font-ui);
}
.rune-toggle-track {
  position: relative; width: 56px; height: 30px; border-radius: 999px;
  background: var(--slot); border: 1px solid var(--line);
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.rune-toggle-knob {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--muted);
  transition: transform 0.35s var(--ease-spring), background 0.3s, box-shadow 0.3s;
}
.rune-toggle-state { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--muted); width: 26px; text-align: left; transition: color 0.3s; }
.rune-toggle.is-on .rune-toggle-track { background: linear-gradient(90deg, rgba(108,76,255,0.35), rgba(124,255,90,0.35)); border-color: var(--rune); box-shadow: 0 0 16px rgba(124,255,90,0.35); }
.rune-toggle.is-on .rune-toggle-knob { transform: translateX(26px); background: var(--rune); box-shadow: 0 0 12px rgba(124,255,90,0.8); }
.rune-toggle.is-on .rune-toggle-state { color: var(--rune); }
.rune-toggle:focus-visible { outline: 2px solid var(--arcane); outline-offset: 4px; border-radius: 8px; }

/* ---------- Segmented control (land size, bot skill) ---------- */
.segmented {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px;
  background: var(--slot); border: 1px solid var(--line); border-radius: 12px; padding: 4px;
}
.segmented-sm { padding: 3px; }
.seg-option {
  appearance: none; border: none; cursor: pointer;
  background: transparent; color: var(--muted);
  font-family: var(--font-ui); font-weight: 700; font-size: 13px; letter-spacing: 1px;
  padding: 10px 6px; border-radius: 9px; text-transform: uppercase;
  transition: color 0.2s, transform 0.12s;
  position: relative; z-index: 1;
}
.segmented-sm .seg-option { font-size: 11px; padding: 8px 4px; }
.seg-option:hover { color: var(--text); }
.seg-option.is-active { color: #fff; }
.seg-option.is-active::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 9px;
  background: linear-gradient(135deg, var(--arcane), var(--ember));
  box-shadow: var(--glow-arcane);
  animation: segPop 0.3s var(--ease-spring);
}
@keyframes segPop { from { transform: scale(0.85); opacity: 0.4; } to { transform: scale(1); opacity: 1; } }
.seg-option:active { transform: translateY(1px); }
.seg-option:focus-visible { outline: 2px solid var(--arcane); outline-offset: 2px; }

/* ---------- Character selection ---------- */
.char-stage {
  position: relative; height: 260px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 16px;
  background:
    radial-gradient(circle at 50% 26%, rgba(255, 210, 60, 0.12), transparent 35%),
    radial-gradient(circle at 50% 52%, rgba(108, 76, 255, 0.24), transparent 64%),
    linear-gradient(180deg, rgba(22, 17, 46, 0.95), rgba(10, 8, 20, 0.92));
  box-shadow: var(--bezel), inset 0 0 32px rgba(108, 76, 255, 0.12);
}
.char-stage::before {
  content: ""; position: absolute; left: 18%; right: 18%; bottom: 18px; height: 18px;
  border-radius: 50%; background: radial-gradient(ellipse, rgba(124,255,90,0.22), transparent 70%);
  filter: blur(2px); pointer-events: none;
}
#char-preview { position: relative; z-index: 1; width: 100%; height: 100%; display: block; }
.char-preview-name {
  position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 10px;
  text-align: center; font-size: 13px; font-weight: 800; letter-spacing: 1px;
  color: var(--text); text-transform: uppercase; text-shadow: 0 2px 8px rgba(0,0,0,0.85);
  pointer-events: none;
}
.char-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.char-card {
  position: relative; cursor: pointer; overflow: hidden;
  border: 1px solid var(--line); border-radius: 13px;
  background: var(--panel-2); padding: 10px 9px; text-align: left;
  font-family: var(--font-ui); color: var(--text);
  display: grid; grid-template-columns: 20px 1fr; gap: 3px 8px; align-items: center;
  transition: transform 0.22s var(--ease-spring), border-color 0.25s, box-shadow 0.25s;
}
.char-card:hover { transform: translateY(-2px); border-color: var(--char-color, var(--arcane)); }
.char-card.is-active {
  border-color: var(--char-color, var(--arcane));
  box-shadow: 0 0 0 1px var(--char-color, var(--arcane)), 0 0 20px -5px var(--char-color, var(--arcane));
}
.char-card-swatch {
  grid-row: span 2; width: 18px; height: 18px; border-radius: 5px;
  background: linear-gradient(135deg, var(--char-color, var(--arcane)), rgba(0,0,0,0.35));
  box-shadow: 0 0 12px -2px var(--char-color, var(--arcane));
}
.char-card-name { font-size: 12px; font-weight: 800; line-height: 1.1; }
.char-card-blurb { grid-column: 2; font-size: 10px; color: var(--muted); line-height: 1.15; }
.char-card-check {
  position: absolute; top: 7px; right: 7px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--char-color, var(--arcane)); color: #0a0814; font-size: 10px; font-weight: 900;
  display: grid; place-items: center; opacity: 0; transform: scale(0.5);
  transition: opacity 0.22s, transform 0.28s var(--ease-spring);
}
.char-card.is-active .char-card-check { opacity: 1; transform: scale(1); }

/* ---------- Arena world cards ---------- */
.arena-cards {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.arena-card {
  position: relative; cursor: pointer; overflow: hidden;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel-2); padding: 14px 14px 12px; text-align: left;
  font-family: var(--font-ui);
  transition: transform 0.25s var(--ease-spring), border-color 0.25s, box-shadow 0.25s;
  transform-style: preserve-3d;
}
.arena-card:hover { transform: translateY(-3px) rotateX(6deg); border-color: var(--line-strong); }
.arena-card:focus-visible { outline: 2px solid var(--card-hazard, var(--arcane)); outline-offset: 3px; }
.arena-card.is-active {
  border-color: var(--card-hazard, var(--arcane));
  box-shadow: 0 0 0 1px var(--card-hazard, var(--arcane)), 0 0 24px -4px var(--card-glow, var(--arcane));
}
/* Layered stylized tile: platform-disc silhouette in the world's top/side palette
   plus a hazard glow ring and a motif hinted via CSS gradients (no image assets). */
.arena-card-art {
  position: relative; display: block; width: 100%; height: 56px; margin-bottom: 10px;
  border-radius: 10px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 120%, var(--card-hazard, var(--arcane)) 0%, transparent 62%),
              linear-gradient(160deg, var(--card-side, #2a2040), #0e0a18 78%);
  box-shadow: var(--bezel);
  transition: transform 0.4s var(--ease-spring);
}
.arena-card:hover .arena-card-art { transform: translateZ(14px) rotate(-2deg) scale(1.03); }
.arena-card-platform {
  position: absolute; left: 50%; bottom: -30%; width: 78%; height: 60%; transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(180deg, var(--card-top, var(--arcane)) 0%, rgba(0,0,0,0.5) 100%);
  box-shadow: 0 0 14px -2px var(--card-top, var(--arcane));
}
.arena-card-hazard-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 105%, var(--card-glow, var(--arcane)) 0%, transparent 55%);
  mix-blend-mode: screen; opacity: 0.85;
}
.arena-card-motif { position: absolute; inset: 0; opacity: 0.8; }
.arena-card-motif[data-hazard="embers"] { background-image: radial-gradient(circle, var(--card-hazard) 1px, transparent 1.6px); background-size: 9px 12px; background-position: 2px 4px; }
.arena-card-motif[data-hazard="spray"] { background-image: radial-gradient(circle, #ffffffaa 1px, transparent 1.6px); background-size: 11px 9px; background-position: 4px 2px; }
.arena-card-motif[data-hazard="bubbles"] { background-image: radial-gradient(circle, var(--card-hazard) 1.4px, transparent 2px); background-size: 13px 13px; background-position: 3px 6px; }
.arena-card-motif[data-hazard="dust"] { background-image: linear-gradient(75deg, transparent 46%, var(--card-hazard) 47%, transparent 48%); background-size: 12px 12px; }
.arena-card-motif[data-hazard="shards"] { background-image: linear-gradient(120deg, transparent 45%, var(--card-hazard) 48%, transparent 51%); background-size: 10px 16px; }
.arena-card-name { display: block; font-weight: 700; font-size: 14px; color: var(--text); }
.arena-card-hazard { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }
.arena-card-check {
  position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--card-hazard, var(--arcane)); color: #0a0814; font-size: 12px; font-weight: 800;
  display: grid; place-items: center; opacity: 0; transform: scale(0.4);
  transition: opacity 0.25s, transform 0.3s var(--ease-spring);
}
.arena-card.is-active .arena-card-check { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .arena-card, .arena-card-art { transition: none; }
  .arena-card:hover { transform: none; }
  .arena-card:hover .arena-card-art { transform: none; }
}

/* ---------- Buttons ---------- */
.btn {
  position: relative; overflow: hidden; cursor: pointer;
  font-family: var(--font-ui); font-weight: 700; font-size: 16px; letter-spacing: 1px;
  border: none; border-radius: 12px; padding: 14px 26px; color: #fff;
  transition: transform 0.12s var(--ease-spring), filter 0.18s, box-shadow 0.2s;
}
.btn:active { transform: translateY(2px) scale(0.99); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.btn-forge {
  background: linear-gradient(135deg, var(--ember), #ff8a3c);
  box-shadow: 0 8px 24px -8px rgba(255, 90, 60, 0.8), var(--bezel);
}
.btn-forge:hover { filter: brightness(1.08); box-shadow: 0 10px 30px -8px rgba(255, 90, 60, 0.9); }
.btn-forge .btn-spark {
  position: absolute; top: 0; left: -60%; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-18deg);
}
.btn-forge:hover .btn-spark { animation: spark 0.7s ease; }
@keyframes spark { to { left: 130%; } }
.btn-ghost {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line-strong);
}
.btn-ghost:hover { background: rgba(108, 76, 255, 0.18); box-shadow: var(--glow-arcane); }

/* ---------- Actions / join ---------- */
.menu-actions { display: flex; flex-direction: column; gap: 14px; align-items: stretch; max-width: 520px; margin: 0 auto;
  animation: fadeDown 0.5s ease both 0.65s; }
.menu-actions .btn-forge { width: 100%; font-size: 18px; padding: 16px; }
.join-box { display: flex; gap: 10px; }
.rune-code { position: relative; flex: 1; }
.rune-code input { text-transform: uppercase; letter-spacing: 8px; text-align: center; font-weight: 700; }
.rune-code input:focus { border-color: var(--ember); box-shadow: var(--glow-ember); background: #1f1228; }
.join-box .btn-ghost { padding-left: 24px; padding-right: 24px; }

/* ---------- Status & hints ---------- */
.status { color: var(--ember); min-height: 20px; margin-top: 16px; font-size: 14px; font-weight: 600; }
.controls-hint { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.hint { color: var(--muted); font-size: 13px; margin-top: 6px; }
.hint b { color: var(--text); background: rgba(108,76,255,0.18); padding: 1px 6px; border-radius: 5px; }
.author-credit { margin-top: 10px; font-size: 12px; color: var(--muted); letter-spacing: 0.3px; }
.author-credit a { color: var(--gold); text-decoration: none; transition: color 0.18s ease, opacity 0.18s ease; }
.author-credit a:hover { text-decoration: underline; opacity: 0.85; }
.author-credit a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; text-decoration: underline; }
.label { color: var(--muted); text-transform: uppercase; font-size: 12px; letter-spacing: 2px; margin-bottom: 8px; font-weight: 700; }

/* ============================================================
   Lobby — fullscreen "Staging Grounds" ready-room scene
   (replaces the old floating .panel.lobby-panel / .lobby-grid modal)
   ============================================================ */

/* #lobby stops using the shared bounded .panel box: it fills the viewport
   and everything below is scoped so it can never leak into other overlays. */
#lobby {
  padding: 0; align-items: stretch; justify-content: stretch;
  overflow-y: auto; touch-action: pan-y;
}
#lobby .lobby-scene {
  position: relative; z-index: 1;
  width: 100%; min-height: 100%;
  display: flex; flex-direction: column; gap: 18px;
  padding: clamp(16px, 3vw, 36px) clamp(20px, 4vw, 56px) clamp(18px, 3vw, 30px);
  text-align: left;
}
/* Bug 1 fix: full-height column so the launch bar is always a normal bottom
   row that stage content can never overlap. The rail (auto) and launch bar
   (auto) keep their intrinsic size; the stage is the only flexible member
   and scrolls internally instead of spilling out of its flex box. */
#lobby .lobby-hud-rail,
#lobby .lobby-launch-bar { flex: 0 0 auto; }

@keyframes lobbyZoneIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Top HUD rail ---------- */
#lobby .lobby-hud-rail {
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  padding-bottom: 16px; border-bottom: 1px solid var(--line);
  animation: lobbyZoneIn 0.5s var(--ease-spring) both 0.02s;
}
#lobby .lobby-hud-brand { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
#lobby .lobby-wordmark {
  font-family: var(--font-display); font-size: clamp(15px, 2.2vw, 20px);
  color: var(--text); letter-spacing: 3px; text-shadow: 0 2px 0 rgba(0,0,0,0.5);
}
#lobby .lobby-hud-room { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
#lobby .lobby-room-banner { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
#lobby .lobby-room-banner-label { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); font-weight: 700; }
#lobby .lobby-hud-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#lobby .lobby-hud-hint { flex-basis: 100%; margin: 2px 0 0; }

#lobby .btn-sm { padding: 9px 14px; font-size: 12px; letter-spacing: 0.5px; }

#lobby .lobby-qr-pop { position: relative; }
#lobby .lobby-qr-pop > summary {
  list-style: none; cursor: pointer; -webkit-user-select: none; user-select: none;
  font-family: var(--font-ui); font-weight: 700; font-size: 12px; letter-spacing: 0.5px;
  padding: 9px 14px; border-radius: 12px; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--line-strong);
  transition: background 0.18s, box-shadow 0.18s, color 0.18s, border-color 0.18s;
}
#lobby .lobby-qr-pop > summary::-webkit-details-marker { display: none; }
#lobby .lobby-qr-pop > summary::marker { content: ""; }
#lobby .lobby-qr-pop > summary:hover { background: rgba(108, 76, 255, 0.18); box-shadow: var(--glow-arcane); }
#lobby .lobby-qr-pop > summary:focus-visible { outline: 2px solid var(--arcane); outline-offset: 3px; }
#lobby .lobby-qr-pop[open] > summary { color: var(--gold); border-color: var(--gold); }
#lobby .lobby-qr-pop .qr { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; animation: fadeDown 0.22s ease both; }

/* ---------- Center stage: WARLOCKS rail · BATTLEGROUND VIEWPORT · MATCH SETUP rail ---------- */
#lobby .lobby-stage {
  flex: 1 1 auto; min-height: 0;
  /* Bug 1 fix: the stage is the only flexible zone in the column; once its
     content can no longer fit the space left by the (now flex-shrink:0)
     rail + launch bar, it scrolls internally instead of visually spilling
     out of its grid box and overlapping the launch bar below it. */
  overflow-y: auto; overflow-x: hidden;
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.6fr) minmax(200px, 0.85fr);
  grid-template-rows: auto 1fr;
  /* Bug 2 fix: "setup" now spans both rows so the MATCH SETUP rail reads as
     one cohesive panel next to the warlocks rail — no separate floating
     "title" area sitting apart from its own fields. */
  grid-template-areas:
    "warlocks battleground setup"
    "warlocks filmstrip    setup";
  gap: 18px 24px;
  padding: 22px 0;
  animation: lobbyZoneIn 0.5s var(--ease-spring) both 0.16s;
}

/* Quiet HUD-framed rails — the battleground viewport stays the one bold element. */
#lobby .lobby-rail-warlocks,
#lobby .lobby-setup-fields,
#lobby .lobby-client-config {
  background: linear-gradient(180deg, rgba(24, 20, 51, 0.35), rgba(15, 11, 33, 0.3));
  border: 1px solid var(--line); border-radius: 10px;
  padding: 16px;
}
#lobby .lobby-rail-warlocks { grid-area: warlocks; display: flex; flex-direction: column; min-width: 0; }
/* Bug 3 fix: the warlocks rail is narrow (~180-200px), too tight for the
   default "auto 1fr" side-by-side bot-count/bot-skill layout to give the
   3-option EXPERT/BRILLIANT/SMART segmented control enough room — it was
   clipping. Stack the two bot fields vertically here so each gets the
   rail's full width. */
#lobby .lobby-rail-warlocks .bot-controls { grid-template-columns: 1fr; gap: 12px; }
#lobby .lobby-rail-warlocks .bot-field { min-width: 0; }
#lobby .lobby-rail-warlocks .seg-option { padding-left: 2px; padding-right: 2px; }
#lobby .lobby-setup-fields { grid-area: setup; display: flex; flex-direction: column; gap: 16px; }
#lobby .lobby-client-config { grid-area: setup; display: flex; flex-direction: column; gap: 8px; }

#lobby .lobby-rail-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase; font-weight: 700; color: var(--muted);
  margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
#lobby .lobby-rail-title::before { content: "▸"; color: var(--arcane); font-size: 10px; }
/* Bug 2 fix: the heading now lives inside the setup rail's own panel (see
   index.html / ui.js), directly above its fields — no more standalone
   "title" grid area. */
#lobby .lobby-setup-title { margin-bottom: 12px; }

/* Host-only config: flattened so its two field groups land in separate stage
   columns (filmstrip under the viewport, everything else in the setup rail)
   while remaining one DOM node for showLobby's host/client toggle. */
#lobby .lobby-host-config { display: contents; }
#lobby .lobby-host-config .field { margin: 0; }
#lobby .lobby-filmstrip-field { grid-area: filmstrip; min-width: 0; max-width: 100%; }
#lobby .lobby-filmstrip-field .field-label { display: block; margin-bottom: 8px; }

#lobby .lobby-client-config-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 12px; border-radius: 9px; background: var(--panel-2); border: 1px solid var(--line);
  font-size: 13px; color: var(--text);
}
#lobby .lobby-client-config-row .field-label { margin: 0; }

/* ---------- Battleground viewport (signature element) ---------- */
/* Bug 4 fix: min-width:0 lets this grid item shrink below its content's
   intrinsic width instead of forcing the grid track (and viewport) wider
   than the screen on narrow/mobile layouts; max-width:100% is the belt to
   min-width:0's suspenders. */
#lobby .lobby-battleground { grid-area: battleground; position: relative; min-width: 0; max-width: 100%; z-index: 1; }
#lobby .lobby-battleground::before {
  content: ""; position: absolute; inset: -14% -10%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, var(--stage-hazard, rgba(108, 76, 255, 0.4)) 0%, transparent 68%);
  opacity: 0.6; filter: blur(10px);
  transition: opacity 0.4s ease;
}
#lobby .lobby-filmstrip-field { grid-area: filmstrip; position: relative; z-index: 1; }

#lobby .battleground-viewport {
  --corner-color: var(--line-strong); --corner-len: 22px; --corner-thick: 2px;
  position: relative; padding: 8px; border-radius: 6px;
  min-width: 0; max-width: 100%;
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, rgba(10, 8, 20, 0.35), rgba(8, 6, 16, 0.7));
  box-shadow: var(--bezel), 0 24px 60px -24px rgba(0, 0, 0, 0.75), 0 0 70px -16px var(--stage-hazard, rgba(108, 76, 255, 0.4));
  transition: box-shadow 0.4s ease;
}
#lobby .battleground-viewport::before {
  /* HUD corner brackets — pure CSS, no extra DOM (map-hero's innerHTML is fully
     owned/replaced by ui.js on every render, so brackets live on the wrapper). */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--corner-color), var(--corner-color)), linear-gradient(var(--corner-color), var(--corner-color)),
    linear-gradient(var(--corner-color), var(--corner-color)), linear-gradient(var(--corner-color), var(--corner-color)),
    linear-gradient(var(--corner-color), var(--corner-color)), linear-gradient(var(--corner-color), var(--corner-color)),
    linear-gradient(var(--corner-color), var(--corner-color)), linear-gradient(var(--corner-color), var(--corner-color));
  background-size:
    var(--corner-thick) var(--corner-len), var(--corner-len) var(--corner-thick),
    var(--corner-thick) var(--corner-len), var(--corner-len) var(--corner-thick),
    var(--corner-thick) var(--corner-len), var(--corner-len) var(--corner-thick),
    var(--corner-thick) var(--corner-len), var(--corner-len) var(--corner-thick);
  background-position:
    0 0, 0 0,
    100% 0, 100% 0,
    0 100%, 0 100%,
    100% 100%, 100% 100%;
}
#lobby .battleground-viewport::after {
  /* faint scanline sheen — killed by the global prefers-reduced-motion rule below */
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0px, rgba(255, 255, 255, 0.05) 1px, transparent 2px, transparent 4px);
  mix-blend-mode: overlay;
  animation: scanlineDrift 6s linear infinite;
}
@keyframes scanlineDrift { from { background-position-y: 0; } to { background-position-y: 40px; } }

.map-hero {
  position: relative; overflow: hidden; border-radius: 3px;
  min-height: clamp(220px, 34vh, 420px);
  background: radial-gradient(ellipse at 50% 130%, var(--hero-hazard, var(--arcane)) 0%, transparent 60%),
              linear-gradient(160deg, var(--hero-side, #2a2040), #0a0714 82%);
}
/* Content re-fades in every time renderMapHero() replaces #map-hero's children
   (initial render + every arena swap) — a lightweight crossfade with no JS. */
.map-hero > * { animation: heroContentIn 0.4s ease both; }
@keyframes heroContentIn { from { opacity: 0; } to { opacity: 1; } }
.map-hero-hazard-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 115%, var(--hero-glow, var(--arcane)) 0%, transparent 58%);
  mix-blend-mode: screen; opacity: 0.9;
}
.map-hero-platform {
  position: absolute; left: 50%; bottom: -42%; width: 68%; height: 90%; transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(180deg, var(--hero-top, var(--arcane)) 0%, rgba(0,0,0,0.55) 100%);
  box-shadow: 0 0 30px -4px var(--hero-top, var(--arcane));
}
.map-hero-motif { position: absolute; inset: 0; opacity: 0.75; }
.map-hero-motif[data-hazard="embers"] { background-image: radial-gradient(circle, var(--hero-hazard) 1.4px, transparent 2.2px); background-size: 16px 20px; background-position: 4px 6px; }
.map-hero-motif[data-hazard="spray"] { background-image: radial-gradient(circle, #ffffffaa 1.4px, transparent 2.2px); background-size: 18px 14px; background-position: 6px 3px; }
.map-hero-motif[data-hazard="bubbles"] { background-image: radial-gradient(circle, var(--hero-hazard) 2px, transparent 2.8px); background-size: 20px 20px; background-position: 5px 9px; }
.map-hero-motif[data-hazard="dust"] { background-image: linear-gradient(75deg, transparent 46%, var(--hero-hazard) 47%, transparent 48%); background-size: 18px 18px; }
.map-hero-motif[data-hazard="shards"] { background-image: linear-gradient(120deg, transparent 45%, var(--hero-hazard) 48%, transparent 51%); background-size: 15px 24px; }
.map-hero-copy {
  position: absolute; left: 16px; bottom: 12px; display: flex; flex-direction: column; gap: 3px; z-index: 4;
}
.map-hero-world { font-family: var(--font-display); font-size: clamp(15px, 2.4vw, 22px); color: var(--text); text-shadow: 0 2px 8px rgba(0,0,0,0.7); }
.map-hero-hazard-name { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--hero-hazard, var(--muted)); text-shadow: 0 2px 6px rgba(0,0,0,0.7); }

/* Arena filmstrip — the #arena-world-ui cards laid out horizontally under the viewport. */
#lobby .arena-cards {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
  /* Bug 4 fix: without min-width:0 a flex/grid item's minimum size defaults
     to its content's intrinsic (max-content) width — for 5 cards that's
     wider than a mobile viewport, which blows out the single-column grid
     track (and everything else riding in it) past the screen edge. */
  min-width: 0;
}
#lobby .arena-cards::-webkit-scrollbar { height: 6px; }
#lobby .arena-cards::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
#lobby .arena-card { flex: 0 0 150px; scroll-snap-align: start; }

/* Bug 5 fix: subtle right-edge fade as a scroll affordance so the filmstrip
   doesn't read as "the last card is just cut off" — it clearly hints more
   content scrolls into view. Purely decorative, so it's suppressed under
   reduced motion isn't required (it's static, not animated). */
#lobby .lobby-filmstrip-field::after {
  content: "";
  position: absolute; top: 30px; right: 0; bottom: 6px; width: 40px;
  background: linear-gradient(90deg, transparent, rgba(10, 8, 20, 0.85) 75%);
  pointer-events: none; z-index: 2;
}

.room-code {
  font-family: var(--font-display);
  font-size: clamp(16px, 2.4vw, 22px); letter-spacing: 6px; color: var(--gold);
  background: var(--slot); border: 1px solid var(--line-strong); border-radius: 8px;
  padding: 10px 16px; text-align: center;
  text-shadow: 0 0 14px rgba(255, 210, 60, 0.5);
  box-shadow: var(--bezel), 0 0 20px -6px rgba(255, 210, 60, 0.35);
}
.qr { background: #fff; padding: 10px; border-radius: 12px; width: fit-content; margin: 4px auto 0; box-shadow: 0 0 24px -6px rgba(108,76,255,0.6); }
.qr canvas, .qr img { display: block; }

/* ---------- Bottom launch bar ---------- */
#lobby .lobby-launch-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-top: 18px; border-top: 1px solid var(--line);
  animation: lobbyZoneIn 0.5s var(--ease-spring) both 0.3s;
}
#lobby .lobby-muster { display: flex; flex-direction: column; gap: 4px; }
#lobby .lobby-muster-count {
  font-family: var(--font-display); font-size: clamp(11px, 1.6vw, 14px);
  letter-spacing: 1.5px; color: var(--gold); text-transform: uppercase;
}
#lobby .lobby-launch-bar .status { margin-top: 0; min-height: 16px; font-size: 13px; }
#lobby .lobby-launch-bar .btn-forge { font-size: 18px; padding: 16px 40px; }

.player-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.player-list li {
  background: var(--panel-2); padding: 11px 14px; border-radius: 10px;
  display: flex; align-items: center; gap: 10px; border: 1px solid var(--line);
  animation: playerIn 0.35s var(--ease-spring) both;
}
@keyframes playerIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
.player-list .swatch { width: 16px; height: 16px; border-radius: 5px; box-shadow: 0 0 8px currentColor; }
.player-list .host-badge {
  margin-left: auto; font-size: 10px; font-weight: 800; letter-spacing: 1px;
  color: var(--gold); border: 1px solid rgba(255,210,60,0.4); border-radius: 6px; padding: 2px 7px;
  text-transform: uppercase;
}
.bot-controls {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 16px;
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center;
}
.bot-field { display: flex; flex-direction: column; gap: 8px; }

/* ---------- Stepper (bot count) ---------- */
.stepper { display: inline-flex; align-items: center; gap: 2px; background: var(--slot); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.stepper-btn {
  width: 34px; height: 34px; border-radius: 8px; border: none; cursor: pointer;
  background: rgba(108,76,255,0.18); color: var(--text); font-size: 20px; font-weight: 700; line-height: 1;
  display: grid; place-items: center; font-family: var(--font-ui);
  transition: background 0.18s, transform 0.1s;
}
.stepper-btn:hover { background: rgba(108,76,255,0.4); }
.stepper-btn:active { transform: scale(0.9); }
.stepper-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.stepper-value { min-width: 34px; text-align: center; font-family: var(--font-display); font-size: 16px; color: var(--gold); }
.stepper-value.bump { animation: bump 0.3s var(--ease-spring); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); color: #fff; } 100% { transform: scale(1); } }

/* ============================================================
   HUD (kept, lightly themed)
   ============================================================ */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#hud-top {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 24px; align-items: center;
  background: rgba(13,11,26,0.7); padding: 8px 20px; border-radius: 12px;
  border: 1px solid var(--line); font-size: 20px; font-weight: 700;
  backdrop-filter: blur(6px);
}
#timer { color: var(--ember); font-family: var(--font-display); font-size: 16px; }
#scoreboard {
  position: absolute; top: 16px; right: 16px;
  background: rgba(13,11,26,0.7); padding: 12px 16px; border-radius: 12px;
  border: 1px solid var(--line); min-width: 160px; font-size: 14px;
  backdrop-filter: blur(6px);
}
#scoreboard .row { display: flex; justify-content: space-between; gap: 14px; padding: 3px 0; }
#scoreboard .row.dead { opacity: .4; text-decoration: line-through; }
#scoreboard .row .pscore { color: var(--ember); font-weight: 700; }

/* Practice-mode dummy spawn panel — top-left, mirrors #scoreboard's chrome. */
.practice-panel {
  position: absolute; top: 16px; left: 16px;
  background: rgba(13,11,26,0.7); padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--line); min-width: 190px; font-size: 13px;
  backdrop-filter: blur(6px); pointer-events: auto;
}
.practice-panel-title {
  font-family: var(--font-display); font-size: 12px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.practice-panel-buttons { display: flex; flex-direction: column; gap: 6px; }
.practice-spawn-btn, .practice-clear-btn {
  padding: 7px 10px; font-size: 12px; min-height: 0; width: 100%; text-align: left;
}
.practice-clear-btn { margin-top: 8px; color: var(--ember); }
.practice-dummy-list { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; max-height: 160px; overflow-y: auto; }
.practice-dummy-row { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--muted); }
.practice-dummy-row .pd-hp { color: #fff; font-weight: 700; }
.practice-dummy-empty { font-size: 11px; color: var(--muted); font-style: italic; }
.practice-panel-divider { height: 1px; background: var(--line); margin: 10px 0; }
.practice-loadout-btn { padding: 7px 10px; font-size: 12px; min-height: 0; width: 100%; text-align: left; }
.practice-toggle-row {
  display: flex; align-items: center; gap: 8px; margin-top: 8px;
  font-size: 12px; color: var(--muted); cursor: pointer; user-select: none;
}
.practice-toggle-row input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.practice-toggle-switch {
  position: relative; width: 30px; height: 16px; border-radius: 999px;
  background: rgba(255,255,255,0.12); border: 1px solid var(--line);
  flex: 0 0 auto; transition: background 0.15s ease, border-color 0.15s ease;
}
.practice-toggle-switch::after {
  content: ""; position: absolute; top: 1px; left: 1px; width: 12px; height: 12px;
  border-radius: 50%; background: #fff; transition: transform 0.15s ease;
}
.practice-toggle-row input:checked + .practice-toggle-switch {
  background: var(--ember); border-color: var(--ember);
}
.practice-toggle-row input:checked + .practice-toggle-switch::after { transform: translateX(14px); }
.practice-toggle-row input:focus-visible + .practice-toggle-switch { outline: 2px solid #fff; outline-offset: 2px; }
.practice-toggle-label { color: #fff; }
#hp-wrap {
  position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%);
  width: 220px; height: 16px; background: rgba(13,11,26,0.7);
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
}
#hp-bar { width: 100%; height: 100%; background: linear-gradient(90deg, #2ecc71, #f1c40f, #e74c3c); transition: width 0.12s; }
#hp-text { position: absolute; inset: 0; text-align: center; font-size: 11px; font-weight: 700; line-height: 16px; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
#charge-wrap {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  width: 220px; height: 14px; background: rgba(13,11,26,0.7);
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
}
#charge-bar { width: 0%; height: 100%; background: linear-gradient(90deg, var(--arcane), var(--ember)); transition: width 0.1s; }
#hazard-warning {
  position: absolute; bottom: 74px; left: 50%; transform: translateX(-50%);
  background: rgba(255,90,60,0.86); color: #fff; padding: 7px 14px; border-radius: 999px;
  font-size: 14px; font-weight: bold; letter-spacing: .5px; text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
/* Step-3: cast/channel progress bar */
#cast-wrap {
  position: absolute; bottom: 92px; left: 50%; transform: translateX(-50%);
  width: 220px; height: 14px; background: rgba(13,11,26,0.7);
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  display: flex; align-items: center;
}
#cast-wrap.hidden { display: none; }
#cast-bar { height: 100%; width: 0%; transition: width 0.08s; background: #66ccff; border-radius: 8px; }
#cast-wrap.channeling #cast-bar { background: #7cff8a; }
#cast-wrap.casting #cast-bar { background: #66ccff; }
#cast-label { position: absolute; inset: 0; text-align: center; font-size: 10px; font-weight: 700; line-height: 14px; text-shadow: 0 1px 2px rgba(0,0,0,.6); white-space: nowrap; overflow: hidden; }
/* Step-3: status-effect chips */
#status-icons {
  position: absolute; bottom: 112px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 4px;
}
.status-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; font-size: 10px; font-weight: 800;
  color: rgba(0,0,0,0.8); text-shadow: none; border: 1px solid rgba(255,255,255,0.3);
}
.center-msg {
  position: absolute; top: 42%; left: 50%; transform: translate(-50%,-50%);
  font-family: var(--font-display); font-size: clamp(24px, 5vw, 40px); text-align: center;
  text-shadow: 0 4px 16px rgba(0,0,0,0.8); color: var(--text);
  animation: centerPop 0.4s var(--ease-spring);
}
@keyframes centerPop { from { opacity: 0; transform: translate(-50%,-50%) scale(0.7); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
.center-msg small { display:block; font-family: var(--font-ui); font-size: 18px; color: var(--muted); font-weight: normal; margin-top: 12px; }

/* ============================================================
   MOB BANNER — big-mob incoming announcement (displayed above #center-msg)
   ============================================================ */
.mob-banner {
  position: absolute;
  top: 20%;
  left: 50%;
  /* Base transform — animation keyframes carry the full translateX(-50%) so
     we don't double-apply it. When display:none is removed the animation
     restarts automatically, giving a fresh slide-in each time. */
  z-index: 7;
  pointer-events: none;
  font-family: var(--font-display);
  font-size: clamp(11px, 2vw, 17px);
  letter-spacing: 3px;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  padding: 14px 28px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(10, 8, 20, 0.88);
  backdrop-filter: blur(8px);
  box-shadow:
    0 0 32px rgba(255, 90, 60, 0.35),
    0 8px 32px rgba(0, 0, 0, 0.7);
  animation: mobBannerIn 0.42s var(--ease-spring) both;
}

@keyframes mobBannerIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-18px) scale(0.91); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0)      scale(1);   }
}

/* Per-kind colour accent modifiers */
.mob-banner--shatter {
  color: #d4b896;
  border-color: rgba(160, 130, 100, 0.45);
  box-shadow:
    0 0 28px rgba(160, 130, 100, 0.45),
    0 8px 32px rgba(0, 0, 0, 0.7);
}
.mob-banner--storm {
  color: #a0e8ff;
  border-color: rgba(76, 201, 255, 0.5);
  box-shadow:
    0 0 32px rgba(76, 201, 255, 0.45),
    0 8px 32px rgba(0, 0, 0, 0.7);
}
.mob-banner--summon {
  color: var(--gold);
  border-color: rgba(255, 210, 60, 0.5);
  box-shadow:
    0 0 32px rgba(255, 210, 60, 0.45),
    0 8px 32px rgba(0, 0, 0, 0.7);
}
.mob-banner--meteor {
  color: var(--ember);
  border-color: rgba(255, 90, 60, 0.6);
  box-shadow:
    0 0 38px rgba(255, 90, 60, 0.55),
    0 8px 32px rgba(0, 0, 0, 0.7);
}

/* Reduced motion: skip slide — opacity-only reveal, no translation. */
@media (prefers-reduced-motion: reduce) {
  .mob-banner {
    animation: none !important;
    transform: translateX(-50%) !important;
  }
  .mob-banner:not(.hidden) {
    opacity: 1 !important;
  }
}

/* Touch */
#touch-controls { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
#joystick {
  position: absolute; bottom: 40px; left: 40px; width: 120px; height: 120px;
  border-radius: 50%; background: rgba(108,76,255,0.18); border: 2px solid var(--line-strong);
  pointer-events: auto;
}
#joystick-knob {
  position: absolute; top: 35px; left: 35px; width: 50px; height: 50px;
  border-radius: 50%; background: rgba(108,76,255,0.6);
}
#fire-btn {
  position: absolute; bottom: 50px; right: 40px; width: 100px; height: 100px;
  border-radius: 50%; background: var(--ember); pointer-events: auto; font-size: 18px;
  border: none; color: #fff; font-family: var(--font-ui); font-weight: 700;
}

/* ===== Ability bar ===== */
#ability-bar {
  position: fixed; bottom: 54px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 7px; flex-wrap: wrap; justify-content: center;
  max-width: 96vw; z-index: 6; pointer-events: auto;
}

/* ===== Item bar (4 active-item slots, reuses .ability-slot styling) ===== */
#item-bar {
  position: fixed; right: 16px; bottom: 130px; left: auto; transform: none;
  display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end;
  max-width: 40vw; z-index: 6; pointer-events: auto;
}
.ability-slot {
  position: relative; width: 66px; height: 64px;
  background: rgba(24,20,51,0.85); border: 1px solid var(--line-strong);
  border-radius: 8px; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 3px; transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}
.ability-slot:hover { transform: translateY(-2px); }
.ability-slot:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; transform: translateY(-2px); }
.ability-slot.ready { box-shadow: 0 0 8px rgba(124,255,90,0.35); border-color: rgba(124,255,90,0.6); }
.ability-slot.locked { opacity: 0.35; filter: grayscale(1); }
.ability-slot.empty { border-style: dashed; }
.ability-swatch {
  position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  width: 22px; height: 22px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 0 4px currentColor);
}
.ability-swatch svg, .dsc-swatch svg {
  width: 100%; height: 100%; display: block;
}
.ability-key {
  position: absolute; top: 2px; left: 5px; font-size: 12px; font-weight: bold;
  color: #fff; text-shadow: 0 1px 2px #000;
}
.ability-name { font-size: 9px; line-height: 1.1; text-align: center; color: var(--muted); z-index: 2; }
.ability-cd {
  position: absolute; bottom: 0; left: 0; width: 100%; height: 0%;
  background: rgba(0,0,0,0.62); transition: height 0.08s linear; z-index: 1;
}
.hotkey-picker {
  position: absolute; top: 2px; right: 2px; z-index: 3;
  width: 16px; height: 16px; padding: 0; border: none; border-radius: 4px; cursor: pointer;
  font-size: 10px; line-height: 16px; color: #fff; background: rgba(108,76,255,0.65);
}

/* Active vs passive item slots — castable items get a bright accent border so
   they read as "press this key"; passive stat items stay muted so players
   don't expect a key to do anything. */
.ability-slot.item-active { border-color: rgba(102,204,255,0.6); }
.ability-slot.item-active.ready { box-shadow: 0 0 8px rgba(102,204,255,0.4); }
.ability-slot.item-passive { border-color: var(--line-strong); }
.ability-slot.item-passive .ability-swatch { opacity: 0.85; }
.ability-key-muted {
  font-size: 8px; font-weight: 700; letter-spacing: 0.4px;
  color: var(--muted); padding: 0 3px; border-radius: 3px;
  background: rgba(12,9,28,0.7); text-shadow: 0 1px 2px #000;
}

/* ===== Item pickup toast ===== */
.item-toast {
  position: fixed; right: 16px; bottom: 202px; z-index: 8;
  max-width: 280px; padding: 9px 14px; border-radius: 8px;
  border: 1px solid var(--line-strong); background: rgba(22,17,46,0.95);
  box-shadow: var(--shadow-panel), 0 0 16px rgba(108,76,255,0.3);
  font-family: var(--font-ui); font-size: 12px; color: var(--text);
  text-align: right; pointer-events: none;
  animation: itemToastIn 0.3s var(--ease-spring) both;
}
@keyframes itemToastIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .item-toast { animation: none; }
}

/* ===== Spell tooltip ===== */
.spell-tooltip {
  position: fixed;
  z-index: 9000;
  pointer-events: none;
  padding: 10px 13px;
  max-width: 220px;
  background: rgba(22, 17, 46, 0.97);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: var(--shadow-panel), 0 0 16px rgba(108, 76, 255, 0.35);
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text);
  opacity: 0;
  transform: translateY(5px) scale(0.96);
  transition: opacity 0.14s ease, transform 0.18s var(--ease-spring), visibility 0s 0.18s;
  visibility: hidden;
  display: block;
}
.spell-tooltip.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.14s ease, transform 0.18s var(--ease-spring);
  visibility: visible;
}
.spell-tooltip-title {
  font-family: var(--font-display);
  font-size: 9px;
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  line-height: 1.3;
}
.spell-tooltip-key {
  font-family: var(--font-display);
  font-size: 7px;
  background: rgba(108, 76, 255, 0.25);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 2px 5px;
  color: var(--muted);
  flex-shrink: 0;
  white-space: nowrap;
}
/* Passive item tag reads muted (no accent) to contrast the castable ACTIVE tag. */
.spell-tooltip-key.item-tooltip-passive {
  background: rgba(154, 147, 199, 0.14);
  letter-spacing: 0.5px;
}
.spell-tooltip-desc {
  color: var(--text);
  line-height: 1.45;
  margin-bottom: 7px;
}
.spell-tooltip-stats {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
  border-top: 1px solid var(--line);
  padding-top: 6px;
}

/* ===== Audio controls ===== */
#audio-controls { position: fixed; top: 12px; right: 12px; display: flex; gap: 6px; z-index: 6; }
#audio-controls button {
  font-family: var(--font-ui); font-size: 11px; padding: 5px 9px; border-radius: 6px; cursor: pointer;
  background: rgba(24,20,51,0.85); color: var(--text);
  border: 1px solid var(--line-strong); pointer-events: auto;
}
#audio-controls button.off { color: var(--muted); border-color: var(--line); }

/* ---------- Responsive (menu / HUD panels) ---------- */
@media (max-width: 760px) {
  .panel { padding: 24px 20px; }
  .menu-body { grid-template-columns: 1fr; gap: 18px; }
  .bot-controls { grid-template-columns: 1fr; gap: 12px; }
  .char-stage { height: 220px; }
  .char-cards { grid-template-columns: repeat(2, 1fr); }
  .ability-slot { width: 50px; height: 50px; }
  .ability-name { display: none; }
  .spell-tooltip { max-width: 180px; font-size: 11px; }
}

/* ---------- Responsive (fullscreen lobby scene) ---------- */
@media (max-width: 1080px) {
  #lobby .lobby-stage {
    grid-template-columns: minmax(160px, 0.7fr) minmax(0, 1.6fr) minmax(180px, 0.75fr);
    gap: 16px 18px;
  }
}
@media (max-width: 760px) {
  #lobby .lobby-scene { padding: 16px 14px 20px; gap: 16px; }
  #lobby .lobby-hud-rail { flex-direction: column; align-items: flex-start; gap: 12px; }
  #lobby .lobby-hud-room { width: 100%; }
  #lobby .lobby-stage {
    /* minmax(0, 1fr), not 1fr: a bare 1fr's implied minimum is auto
       (max-content), so the wide 5-card filmstrip row would blow the single
       column out past the viewport width (bug 4). */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas:
      "battleground"
      "filmstrip"
      "warlocks"
      "setup";
    gap: 16px;
    padding: 16px 0;
  }
  #lobby .map-hero { min-height: clamp(180px, 46vw, 260px); }
  #lobby .arena-card { flex: 0 0 130px; }
  #lobby .lobby-launch-bar { flex-direction: column; align-items: stretch; gap: 12px; }
  #lobby .lobby-launch-bar .btn-forge { width: 100%; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .ember-field { display: none; }
}


/* ============================================================
   LOADING SCREEN
   ============================================================ */
.loader-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: var(--void);
  display: flex; align-items: center; justify-content: center;
  /* Subtle voxel-grid background — same as the menu overlay ::after */
  background-image:
    linear-gradient(rgba(108, 76, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(108, 76, 255, 0.04) 1px, transparent 1px);
  background-size: 44px 44px;
  background-color: var(--void);
}

.loader-inner {
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  text-align: center;
}

.loader-title {
  font-family: var(--font-display);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  line-height: 1.05;
}
.loader-line:nth-child(1) {
  font-size: clamp(18px, 3.5vw, 36px);
  color: var(--text);
  animation: titleDrop 0.55s var(--ease-spring) both 0.1s;
}
.loader-line:nth-child(2) {
  font-size: clamp(22px, 4.5vw, 48px);
  color: var(--ember);
  text-shadow: 0 0 28px rgba(255, 90, 60, 0.65), 0 4px 0 rgba(0,0,0,0.5);
  animation: titleDrop 0.55s var(--ease-spring) both 0.25s;
}
.loader-line:nth-child(3) {
  font-size: clamp(18px, 3.5vw, 36px);
  color: var(--arcane);
  text-shadow: 0 0 28px rgba(108, 76, 255, 0.65), 0 4px 0 rgba(0,0,0,0.5);
  animation: titleDrop 0.55s var(--ease-spring) both 0.4s;
}

.loader-bar-wrap {
  width: min(400px, 82vw); height: 6px;
  background: rgba(108, 76, 255, 0.12);
  border: 1px solid var(--line);
  border-radius: 999px; overflow: hidden;
  animation: fadeDown 0.4s ease both 0.6s;
}
.loader-bar {
  width: 0%; height: 100%;
  background: linear-gradient(90deg, var(--arcane), var(--ember));
  border-radius: 999px;
  box-shadow: 0 0 14px rgba(255, 90, 60, 0.55);
  transition: width 0.28s ease;
}

.loader-pct {
  font-family: var(--font-ui); font-size: 12px; letter-spacing: 3px;
  color: var(--muted);
  animation: fadeDown 0.4s ease both 0.7s;
}

.loader-enter {
  font-family: var(--font-display);
  font-size: clamp(10px, 1.8vw, 14px);
  color: var(--text); letter-spacing: 5px;
  animation: enterPulse 1.5s ease-in-out infinite;
  margin-top: 6px;
}
@keyframes enterPulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; text-shadow: 0 0 18px rgba(255,90,60,0.7); }
}

/* Fade the loader out when dismissed. */
.loader-fade-out {
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity 0.52s ease !important;
}


/* ============================================================
   CINEMATIC MAIN MENU
   ============================================================ */

/* Override overlay defaults to create a full-bleed horizontal layout. */
.menu-cinematic {
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  background: none; /* background handled by stage canvas + vignette */
}
/* Suppress the voxel-grid ::after on the cinematic overlay (the grid is on
   the loader instead; the stage canvas provides all the visual interest here). */
.menu-cinematic::after { display: none; }

/* ---- Full-bleed 3D stage canvas ---- */
/* Selector is intentionally ID + class so it outranks the legacy `#char-preview`
   rule above (a bare ID selector), whose `position: relative` would otherwise
   pull the canvas into flex flow and shove the spine off-screen. */
#char-preview.stage-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; z-index: 0;
}

/* ---- Atmospheric depth layers ---- */
.stage-vignette {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background:
    /* Heavy dark gradient sweeps left where the spine lives */
    linear-gradient(
      108deg,
      rgba(8, 6, 20, 0.97) 0%,
      rgba(8, 6, 20, 0.82) 26%,
      rgba(8, 6, 20, 0.38) 48%,
      rgba(8, 6, 20, 0.08) 66%,
      transparent 100%
    ),
    /* Ember floor glow — lava atmosphere from below */
    radial-gradient(ellipse 90% 55% at 50% 110%, rgba(255, 90, 60, 0.13), transparent 60%),
    /* Arcane crown — magic aura from above */
    radial-gradient(ellipse 100% 45% at 60% -15%, rgba(108, 76, 255, 0.22), transparent 60%),
    /* Edge vignette */
    radial-gradient(ellipse 120% 120% at 50% 50%, transparent 55%, rgba(4, 3, 12, 0.55) 100%);
}

/* ---- Left spine ---- */
.menu-spine {
  position: relative; z-index: 3;
  width: 360px; flex-shrink: 0;
  min-height: 100vh;
  padding: 44px 40px 36px;
  display: flex; flex-direction: column;
  /* Subtle left-edge separator */
  border-right: 1px solid rgba(108, 76, 255, 0.08);
}

/* Override brand alignment for left-flush layout. */
.menu-cinematic .brand { margin-bottom: 0; text-align: left; }
.menu-cinematic .title { align-items: flex-start; margin: 14px 0 8px; }
.menu-cinematic .eyebrow { display: block; text-align: left; }
.menu-cinematic .tag { text-align: left; max-width: 280px; font-size: 13px; margin: 0; }

/* Name input — persistent in spine, shared by Host and Join flows. */
.name-field { margin: 22px 0 6px; }

/* ---- Spine vertical nav ---- */
.spine-nav {
  list-style: none;
  display: flex; flex-direction: column; gap: 2px;
  margin: 10px 0 18px;
}

.spine-btn {
  display: flex; align-items: center; gap: 18px;
  width: 100%; padding: 14px 18px;
  border-radius: 10px; border: none;
  background: none; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-size: 11px; letter-spacing: 3px;
  color: var(--muted);
  position: relative;
  transition: color 0.18s, background 0.18s, transform 0.14s var(--ease-spring);
}
.spine-btn:hover {
  color: var(--text);
  background: rgba(108, 76, 255, 0.1);
  transform: translateX(5px);
}
.spine-btn:focus-visible {
  outline: 2px solid var(--arcane); outline-offset: 3px; border-radius: 10px;
}

/* Ember accent bar on the left edge of the active button. */
.spine-btn::before {
  content: ""; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 0;
  background: var(--ember); border-radius: 0 3px 3px 0;
  transition: height 0.28s var(--ease-spring);
}
.spine-btn.is-active {
  color: var(--ember);
  background: rgba(255, 90, 60, 0.07);
}
.spine-btn.is-active::before { height: 58%; }

/* Play button is the hero action — slightly larger, ember glow. */
.spine-btn-play { font-size: 13px; letter-spacing: 4px; padding: 16px 18px; }
.spine-btn-play.is-active {
  color: var(--ember);
  text-shadow: 0 0 16px rgba(255, 90, 60, 0.55);
}

.spine-play-arrow,
.spine-icon { width: 18px; text-align: center; font-size: 14px; flex-shrink: 0; }

/* Push controls-hint to bottom of spine. */
.menu-cinematic .controls-hint { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }

/* ---- Right content zone ---- */
.menu-right {
  position: relative; z-index: 3;
  flex: 1;
  display: flex; align-items: center;
  /* Don't receive pointer events on the transparent area — sub-screens handle their own. */
  pointer-events: none;
}

/* ---- Sub-screens ---- */
.sub-screen {
  position: absolute;
  /* Vertically centered with slight upward offset for optical balance. */
  top: 50%; transform: translateY(-50%) translateX(0);
  left: 40px; right: 40px; max-width: 500px;
  display: flex; flex-direction: column; gap: 22px;
  pointer-events: auto;
  opacity: 1;
  transition: transform 0.38s var(--ease-spring), opacity 0.22s ease;
}
.sub-screen.sub-screen-hidden {
  opacity: 0;
  transform: translateY(-50%) translateX(36px);
  pointer-events: none;
}

.sub-screen-title {
  font-family: var(--font-display);
  font-size: clamp(13px, 2.2vw, 20px); letter-spacing: 4px;
  color: var(--text);
}
.sub-screen-desc {
  color: var(--muted); font-size: 14px;
  margin-top: -14px; /* tighten gap after title */
}

/* Hero "Host Game" CTA — the centrepiece of the PLAY sub-screen. */
.btn-hero {
  font-size: 17px; padding: 18px 32px; letter-spacing: 2px;
  width: 100%; max-width: 340px;
}

/* Character preview name in CHARACTERS sub-screen. */
.menu-cinematic .char-preview-name {
  font-size: 13px; font-weight: 800; letter-spacing: 2px;
  color: var(--text); text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0,0,0,0.85);
  position: static; text-align: left;
  margin-bottom: -10px;
}

.settings-arena-field { gap: 10px; }

/* ---------- Map-objects toggle group (host settings) ---------- */
.map-toggles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 8px;
}
.obs-toggle {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; border-radius: 8px; padding: 5px 4px;
  transition: background 0.15s;
}
.obs-toggle:hover { background: rgba(108, 76, 255, 0.07); }
/* Visually-hidden native checkbox — keyboard-accessible, screen-reader-visible. */
.obs-toggle-check {
  position: absolute; opacity: 0; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* Pill track */
.obs-toggle-track {
  flex-shrink: 0;
  width: 34px; height: 18px; border-radius: 9px;
  background: var(--slot); border: 1px solid var(--line);
  position: relative;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
/* Sliding knob */
.obs-toggle-knob {
  position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--muted);
  transition: transform 0.2s var(--ease-spring), background 0.2s;
}
/* Enabled / "on" state (class set by JS) */
.obs-toggle.is-on .obs-toggle-track {
  background: linear-gradient(90deg, rgba(108, 76, 255, 0.35), rgba(124, 255, 90, 0.35));
  border-color: var(--rune); box-shadow: 0 0 10px rgba(124, 255, 90, 0.25);
}
.obs-toggle.is-on .obs-toggle-knob {
  transform: translateX(16px); background: var(--rune);
  box-shadow: 0 0 8px rgba(124, 255, 90, 0.7);
}
/* Text label */
.obs-toggle-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--muted); transition: color 0.2s;
  line-height: 1;
}
.obs-toggle.is-on .obs-toggle-label { color: var(--text); }
/* Keyboard focus ring — shown on the whole label when the hidden input is focused. */
.obs-toggle:has(.obs-toggle-check:focus-visible) {
  outline: 2px solid var(--arcane); outline-offset: 2px;
}

/* Join box in JOIN sub-screen — existing .join-box styles apply,
   just ensure it stretches to fill the sub-screen width. */
.sub-screen .join-box { flex-wrap: nowrap; }
.sub-screen .rune-code { flex: 1 1 auto; }
.sub-screen .btn-ghost { flex-shrink: 0; padding-left: 26px; padding-right: 26px; }


/* ============================================================
   CINEMATIC MENU — RESPONSIVE
   ============================================================ */
@media (max-width: 800px) {
  /* Stack spine above the sub-screens on small screens. */
  .menu-cinematic { flex-direction: column; }
  .menu-spine {
    width: 100%; min-height: auto;
    padding: 28px 24px 16px;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .menu-cinematic .title { flex-direction: row; gap: 10px; align-items: baseline; flex-wrap: wrap; }
  .menu-cinematic .title .title-line { display: inline; }
  .menu-cinematic .tag { display: none; }
  .spine-nav { flex-direction: row; gap: 2px; margin: 10px 0 6px; }
  .spine-btn { padding: 10px 12px; font-size: 9px; letter-spacing: 1.5px; }
  .spine-btn::before { display: none; }
  .spine-btn.is-active { background: rgba(255, 90, 60, 0.15); }
  .spine-play-arrow, .spine-icon { display: none; }
  .name-field { margin: 10px 0 4px; }
  .menu-right { min-height: 340px; pointer-events: auto; }
  .sub-screen { position: relative; top: auto; transform: none; left: 0; right: 0; max-width: 100%; padding: 20px 24px; }
  .sub-screen.sub-screen-hidden { display: none; }
  .menu-cinematic .controls-hint { display: none; }
  .stage-vignette {
    background:
      linear-gradient(180deg, rgba(8,6,20,0.85) 0%, rgba(8,6,20,0.4) 30%, rgba(8,6,20,0.2) 70%, rgba(8,6,20,0.7) 100%);
  }
}

@media (max-width: 480px) {
  .spine-nav { overflow-x: auto; }
  .spine-btn { white-space: nowrap; flex-shrink: 0; }
  .btn-hero { max-width: 100%; }
}


/* ============================================================
   REDUCED MOTION — Cinematic menu + loader overrides
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  /* Loader: instant bar fill, no pulsing enter prompt. */
  .loader-bar { transition: none !important; }
  /* Entrance animations use opacity:0 `from` states with delays — neutralize so
     reduced-motion users see the loader UI immediately, not after a blank beat. */
  .loader-line, .loader-bar-wrap, .loader-pct {
    animation: none !important;
    opacity: 1 !important;
  }
  .loader-enter { animation: none !important; opacity: 1; }
  .loader-fade-out { transition: none !important; opacity: 0 !important; }
  /* Sub-screen transitions: instant swap instead of slide. */
  .sub-screen, .sub-screen.sub-screen-hidden {
    transition: none !important;
    transform: translateY(-50%) translateX(0) !important;
  }
  /* Spine button hover: no translate. */
  .spine-btn:hover { transform: none !important; }
}


/* ============================================================
   REGION-BASED MATCHMAKING — NEW SCREENS
   (Online, Private, Leaderboards, Account)
   Design tokens only: --ember, --arcane, --panel, --panel-2,
   --text, --muted, --line, --line-strong, --font-display,
   --font-ui, --ease-spring.
   ============================================================ */

/* ---- Sub-screen scroll guard (leaderboard can be tall) ---- */
.sub-screen {
  overflow-y: auto;
  max-height: calc(100vh - 80px);
}
.sub-screen::-webkit-scrollbar { width: 4px; }
.sub-screen::-webkit-scrollbar-thumb { background: rgba(108,76,255,0.5); border-radius: 2px; }
@media (max-width: 800px) {
  .sub-screen { max-height: none; overflow-y: visible; }
}

/* ---- Supabase disabled notice ---- */
.supabase-notice {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(108,76,255,0.08);
  border: 1px solid rgba(108,76,255,0.3);
  border-radius: 12px; padding: 12px 16px;
  font-size: 13px; color: var(--muted); line-height: 1.5;
}
.supabase-notice-icon {
  flex-shrink: 0; font-size: 16px; color: var(--arcane); margin-top: 1px;
}

/* ---- Region selector ---- */
.rune-select-wrap {
  position: relative; display: flex; align-items: center;
}
.rune-select {
  width: 100%; appearance: none;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px;
  color: var(--text); font-family: var(--font-ui); font-size: 15px; font-weight: 600;
  padding: 12px 40px 12px 16px; outline: none; cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.rune-select:focus-visible { border-color: var(--arcane); box-shadow: var(--glow-arcane); }
.rune-select:disabled { opacity: 0.45; cursor: not-allowed; }
.rune-select option { background: var(--panel); color: var(--text); }
.rune-select-arrow {
  position: absolute; right: 14px; pointer-events: none;
  font-size: 13px; color: var(--muted);
}

/* ---- Private divider ---- */
.private-divider {
  display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px;
  letter-spacing: 2px; text-transform: uppercase;
}
.private-divider::before, .private-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

/* ---- Online queue ---- */
.queue-panel {
  display: flex; flex-direction: column; gap: 14px;
  border: 1px solid var(--line); border-radius: 12px;
  padding: 16px;
  background: linear-gradient(180deg, rgba(108,76,255,0.09), rgba(10,8,20,0.68));
}
.queue-status {
  margin: 0;
  min-height: 44px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}

/* ---- Leaderboard table ---- */
.leaderboard-table {
  display: flex; flex-direction: column; gap: 3px;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
.lb-row {
  display: grid; grid-template-columns: 32px 1fr auto;
  gap: 10px; align-items: center;
  padding: 10px 14px;
  background: var(--panel-2);
  transition: background 0.15s;
}
.lb-row:hover { background: rgba(108,76,255,0.08); }
.lb-header {
  background: rgba(108,76,255,0.1);
  border-bottom: 1px solid var(--line);
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted);
  font-weight: 700;
}
.lb-top { background: rgba(255,210,60,0.06); }
.lb-top .lb-rank { color: var(--gold); font-weight: 900; }
.lb-rank { font-size: 13px; font-weight: 700; color: var(--muted); text-align: center; }
.lb-name { font-size: 14px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-value { font-size: 14px; font-weight: 700; color: var(--ember); text-align: right; }
.lb-empty {
  padding: 20px; text-align: center; font-size: 13px; color: var(--muted);
}

/* ---- Auth form ---- */
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-tabs {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px;
  background: var(--slot); border: 1px solid var(--line); border-radius: 12px; padding: 4px;
  margin-bottom: 4px;
}
.auth-tab-btn {
  appearance: none; border: none; cursor: pointer;
  background: transparent; color: var(--muted);
  font-family: var(--font-ui); font-weight: 700; font-size: 12px; letter-spacing: 0.5px;
  padding: 9px 6px; border-radius: 9px; text-transform: uppercase;
  transition: color 0.18s, background 0.18s;
  position: relative; z-index: 1;
}
.auth-tab-btn:hover { color: var(--text); }
.auth-tab-btn.is-active { color: #fff; }
.auth-tab-btn.is-active::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 9px;
  background: linear-gradient(135deg, var(--arcane), var(--ember));
  box-shadow: var(--glow-arcane);
  animation: segPop 0.3s var(--ease-spring);
}
.auth-tab-btn:focus-visible { outline: 2px solid var(--arcane); outline-offset: 2px; }
.auth-fields { display: flex; flex-direction: column; gap: 10px; }
.auth-wallet-divider {
  font-size: 11px; color: var(--muted); text-align: center;
  margin: 4px 0 2px; letter-spacing: 0.04em; user-select: none;
}
.auth-wallet-btn { margin-top: 0; }
.auth-eth-btn:focus-visible,
.auth-sol-btn:focus-visible { outline: 2px solid var(--arcane); outline-offset: 2px; }
.auth-upgrade-title { font-size: 13px; color: var(--muted); margin-bottom: 2px; }

/* ---- Identity badge ---- */
.identity-badge {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 16px;
  animation: playerIn 0.3s var(--ease-spring) both;
}
.identity-icon {
  font-size: 20px; flex-shrink: 0;
}
.identity-guest   { color: var(--muted); }
.identity-account { color: var(--arcane); text-shadow: var(--glow-arcane); }
.identity-info {
  flex: 1; font-size: 13px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.identity-signout {
  flex-shrink: 0; font-size: 11px; padding: 7px 12px;
}

/* ---- K/D column in HUD scoreboard ---- */
#scoreboard .row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 3px 0; }
#scoreboard .row .pkd { color: var(--muted); font-size: 11px; text-align: right; }
#scoreboard .row .pscore { color: var(--ember); font-weight: 700; text-align: right; }
#scoreboard .row.dead .pkd { text-decoration: none; }

/* ---- Responsive — new screens at 800px breakpoint ---- */
@media (max-width: 800px) {
  .queue-panel { padding: 14px; }
  .lb-row { padding: 8px 10px; gap: 6px; }
  .lb-name { font-size: 13px; }
  .auth-tab-btn { font-size: 10px; padding: 8px 4px; }
  .identity-badge { flex-wrap: wrap; }
}

/* Reduced motion: instant swap for new screens too. */
@media (prefers-reduced-motion: reduce) {
  .queue-panel, .leaderboard-table, .identity-badge { animation: none !important; }
}
/* ============================================================
   TUTORIAL SUB-SCREEN
   ============================================================ */

/* The tutorial sub-screen is taller than the others (spellbook is long).
   Cap its height so the inner scroll area kicks in. overflow:hidden is
   required so the flex child with flex:1 actually constrains correctly. */
#screen-tutorial {
  max-height: min(720px, calc(100vh - 80px));
  overflow: hidden;
}

/* ---- Tab bar — same visual language as .segmented ---- */
.tut-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 3px;
  background: var(--slot);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px;
  flex-shrink: 0;
}

.tut-tab {
  appearance: none; border: none; cursor: pointer;
  background: transparent; color: var(--muted);
  font-family: var(--font-ui); font-weight: 700; font-size: 11px; letter-spacing: 0.5px;
  padding: 9px 4px; border-radius: 9px; text-transform: uppercase;
  transition: color 0.2s, background 0.15s;
  position: relative; z-index: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tut-tab:hover { color: var(--text); }
.tut-tab.is-active { color: #fff; }
.tut-tab.is-active::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 9px;
  background: linear-gradient(135deg, var(--arcane), #4c2cdd);
  box-shadow: 0 0 14px rgba(108, 76, 255, 0.5);
  animation: segPop 0.3s var(--ease-spring);
}
.tut-tab:focus-visible {
  outline: 2px solid var(--arcane); outline-offset: 2px; border-radius: 9px;
}

/* ---- Scroll area: grows to fill remaining sub-screen height ---- */
.tut-scroll-area {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(108, 76, 255, 0.5) transparent;
}
.tut-scroll-area:focus-visible { outline: 2px solid var(--arcane); outline-offset: 2px; border-radius: 10px; }
.tut-scroll-area::-webkit-scrollbar { width: 4px; }
.tut-scroll-area::-webkit-scrollbar-track { background: transparent; }
.tut-scroll-area::-webkit-scrollbar-thumb { background: rgba(108, 76, 255, 0.5); border-radius: 2px; }

/* ---- Tab panels ---- */
.tut-panel { display: block; }
.tut-panel-hidden { display: none; }

/* ---- Fact list (Basics + Goal & Arena panels) ---- */
.tut-facts { display: flex; flex-direction: column; gap: 8px; }
.tut-fact {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--arcane);
  border-radius: 10px;
  padding: 10px 14px;
}
.tut-fact dt {
  font-family: var(--font-display); font-size: 8px; letter-spacing: 2px;
  color: var(--arcane); margin-bottom: 5px; text-transform: uppercase;
  line-height: 1.4;
}
.tut-fact dd { font-size: 13px; color: var(--text); line-height: 1.55; margin: 0; }
.tut-fact dd strong { color: var(--gold); }
.tut-fact dd em { color: var(--muted); font-style: normal; }

/* Arena-world colour dots inside the goal panel. */
.tut-world-list { list-style: none; display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.tut-world-list li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.tut-world-list li strong { color: var(--text); }
.tut-world-dot {
  width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0;
  background: var(--wc, var(--arcane));
  box-shadow: 0 0 8px var(--wc, var(--arcane));
}

/* ---- Controls panel ---- */
.tut-controls-grid { display: flex; flex-direction: column; gap: 6px; }
.tut-control-row {
  display: grid; grid-template-columns: auto 1fr;
  align-items: center; gap: 12px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 12px;
}
.tut-control-action {
  font-size: 12px; font-weight: 700; color: var(--muted);
  white-space: nowrap;
}
.tut-keys {
  display: flex; flex-wrap: wrap; gap: 3px; align-items: center;
  justify-content: flex-end;
}
.tut-key-or { font-size: 10px; color: var(--muted); padding: 0 1px; }

/* Key-cap chips — used in Controls panel and inline text hints. */
kbd {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 7px; letter-spacing: 0.5px;
  color: var(--text); background: var(--slot);
  border: 1px solid var(--line-strong); border-radius: 5px;
  padding: 3px 6px; min-width: 22px;
  box-shadow: var(--bezel);
  line-height: 1;
}
.tut-key-chip {
  display: inline-flex; align-items: center;
  font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
  color: var(--text); background: var(--slot);
  border: 1px solid var(--line-strong); border-radius: 5px;
  padding: 3px 8px;
  box-shadow: var(--bezel);
}
.tut-key-fire {
  background: rgba(255, 90, 60, 0.2); border-color: var(--ember); color: var(--ember);
}
.tut-hint {
  font-size: 12px; color: var(--muted); margin-top: 10px; line-height: 1.5;
}

/* ---- Spellbook panel ---- */
.tut-spell-group { margin-bottom: 14px; }
.tut-spell-group:last-child { margin-bottom: 0; }
.tut-spell-group-title {
  font-family: var(--font-display); font-size: 7px; letter-spacing: 3px;
  text-transform: uppercase; color: var(--muted);
  padding: 0 2px 5px; margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.tut-spell-row {
  display: grid; grid-template-columns: 8px 28px 1fr;
  gap: 8px; align-items: start;
  padding: 7px 10px;
  border-left: 2px solid var(--spell-color, var(--arcane));
  border-radius: 0 8px 8px 0;
  background: var(--panel-2);
  margin-bottom: 3px;
  transition: background 0.15s;
}
.tut-spell-row:hover { background: rgba(108, 76, 255, 0.08); }
.tut-spell-swatch {
  width: 8px; height: 8px; border-radius: 2px; margin-top: 5px; flex-shrink: 0;
  box-shadow: 0 0 6px var(--spell-color, var(--arcane));
}
.tut-spell-key {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 7px;
  color: #fff; background: var(--slot);
  border: 1px solid var(--line-strong); border-radius: 5px;
  padding: 3px 5px; height: fit-content; margin-top: 2px;
  box-shadow: var(--bezel);
}
.tut-spell-info { display: flex; flex-direction: column; gap: 1px; }
.tut-spell-name { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.2; }
.tut-spell-cd   { font-size: 10px; color: var(--muted); letter-spacing: 0.3px; }
.tut-spell-desc { font-size: 11px; color: rgba(236, 233, 255, 0.65); line-height: 1.4; }

/* ---- Tips panel ---- */
.tut-tips-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.tut-tips-list li {
  font-size: 12px; color: var(--muted); line-height: 1.55;
  padding: 8px 12px 8px 14px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-left: 3px solid var(--rune); border-radius: 9px;
}
.tut-tips-list li strong { color: var(--text); }

/* ---- Practice CTA — pinned below the scroll area ---- */
.tut-practice-cta {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.tut-practice-cta .btn { min-width: 200px; }
.tut-practice-hint { font-size: 12px; color: var(--muted); }


/* ============================================================
   TUTORIAL — RESPONSIVE
   ============================================================ */
@media (max-width: 800px) {
  /* On stacked mobile layout the sub-screen is flow-positioned; let the scroll
     area carry its own max-height instead. */
  #screen-tutorial { max-height: none; overflow: visible; }
  .tut-scroll-area  { max-height: 38vh; }

  .tut-tab { font-size: 9px; padding: 8px 2px; }
  .tut-control-row { grid-template-columns: 1fr; gap: 6px; }
  .tut-keys { justify-content: flex-start; }
}

@media (max-width: 480px) {
  .tut-tabs { gap: 2px; }
  .tut-tab  { font-size: 8px; padding: 7px 1px; }
  .tut-spell-row { grid-template-columns: 6px 24px 1fr; gap: 5px; }
  .tut-practice-cta .btn { min-width: 0; width: 100%; }
}

/* ---- Tutorial reduced-motion overrides ---- */
@media (prefers-reduced-motion: reduce) {
  .tut-tab.is-active::before { animation: none !important; }
  .tut-spell-row { transition: none !important; }
}

/* ---- ESC pause menu ---- */
.pause-overlay {
  position: fixed; inset: 0; z-index: 15;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(6, 4, 16, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.pause-panel { width: min(420px, 100%); text-align: center; }
.pause-title {
  font-family: "Press Start 2P", monospace;
  font-size: clamp(18px, 4vw, 26px);
  color: var(--arcane);
  text-shadow: 0 0 18px rgba(108, 76, 255, 0.55), 0 3px 0 rgba(0, 0, 0, 0.45);
  margin: 0 0 22px;
}
.pause-actions { display: flex; flex-direction: column; gap: 16px; }
.pause-actions .btn-forge,
.pause-actions .btn-ghost { width: 100%; padding-top: 15px; padding-bottom: 15px; font-size: 16px; min-height: 48px; }

/* Base button treatment for pause buttons (they carry only the variant class, not .btn). */
.pause-actions .btn-forge,
.pause-actions .btn-ghost {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: 1px;
  border-radius: 12px;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.12s var(--ease-spring), filter 0.18s, box-shadow 0.2s;
}
.pause-actions .btn-forge { border: none; color: #fff; }  /* drop default UA border on the gradient button; set text color (no .btn parent here) */
.pause-actions .btn-forge:active,
.pause-actions .btn-ghost:active { transform: translateY(2px) scale(0.99); }

/* Visible keyboard focus for every pause control (none present otherwise). */
.pause-actions .btn-forge:focus-visible,
.pause-actions .btn-ghost:focus-visible,
.pause-audio button:focus-visible {
  outline: 2px solid var(--arcane);
  outline-offset: 2px;
}
.pause-audio { display: flex; gap: 10px; }
.pause-audio button {
  flex: 1;
  padding: 14px 12px;
  font-family: "Chakra Petch", sans-serif;
  font-size: 16px;
  font-weight: 600;
  min-height: 48px;
  color: var(--text);
  background: var(--panel-2, rgba(24, 20, 51, 0.9));
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.pause-audio button:hover { border-color: var(--arcane); }
.pause-audio button.off { color: var(--muted); opacity: 0.7; }
.pause-leave { color: var(--ember); border-color: rgba(255, 90, 60, 0.55); }
.pause-leave:hover { background: rgba(255, 90, 60, 0.14); }
.pause-controls {
  display: flex; flex-direction: column; gap: 6px;
  margin: 4px 0 2px;
  padding: 14px;
  text-align: left;
  background: rgba(10, 8, 24, 0.6);
  border: 1px solid var(--line);
  border-radius: 12px;
  max-height: 240px; overflow-y: auto;
}
.pause-control-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: "Chakra Petch", sans-serif; font-size: 14px; color: var(--muted);
}
.pause-control-row kbd {
  font-family: "Chakra Petch", sans-serif; font-size: 12px;
  color: var(--text);
  background: rgba(108, 76, 255, 0.18);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 3px 8px;
}
@media (prefers-reduced-motion: reduce) {
  .pause-overlay .panel { animation: none !important; }
  .pause-actions .btn-forge,
  .pause-actions .btn-ghost { transition: none !important; }
}

/* ============================================================
   STEP 6 — SPELL DRAFT OVERLAY
   ============================================================ */
.draft-panel {
  max-width: 860px;
  width: 100%;
  padding: 28px 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 92vh;
  overflow: hidden;
}

.draft-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.draft-header-left { text-align: left; }
.draft-title {
  font-family: var(--font-display);
  font-size: clamp(16px, 3vw, 24px);
  color: var(--text);
  margin-top: 6px;
  letter-spacing: 1px;
}

.draft-timer-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 56px;
}
.draft-timer-label {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
}
.draft-timer {
  font-family: var(--font-display);
  font-size: clamp(22px, 4vw, 36px);
  color: var(--rune);
  text-shadow: 0 0 18px rgba(124, 255, 90, 0.5);
  line-height: 1;
  transition: color 0.3s ease;
}
.draft-timer.draft-timer-urgent {
  color: var(--ember);
  text-shadow: 0 0 18px rgba(255, 90, 60, 0.65);
  animation: timerUrgent 0.8s ease-in-out infinite;
}
@keyframes timerUrgent {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.draft-hint {
  font-size: 13px;
  color: var(--muted);
  text-align: left;
  line-height: 1.5;
}

/* ---- Template quick-pick buttons ---- */
.draft-templates {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.draft-tpl-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 10px 16px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
  flex: 1 1 140px;
  max-width: 220px;
  color: var(--text);
  font-family: var(--font-ui);
}
.draft-tpl-btn:hover:not(:disabled) {
  border-color: var(--arcane);
  background: rgba(108, 76, 255, 0.12);
}
.draft-tpl-btn:focus-visible {
  outline: 2px solid var(--arcane);
  outline-offset: 2px;
}
.draft-tpl-btn:disabled { opacity: 0.45; cursor: default; }
.draft-tpl-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.5px;
}
.draft-tpl-desc {
  font-size: 11px;
  color: var(--muted);
}

/* ---- Body: slot pips + spell grid side by side ---- */
.draft-body {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  min-height: 0;
  overflow: hidden;
}

/* ---- Slot pips: 6 vertical cells showing your current picks ---- */
.draft-slots {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.draft-slot-pip {
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--slot);
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 12px;
  color: var(--muted);
  transition: border-color 0.18s ease, background 0.18s ease;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.draft-slot-pip.draft-slot-filled {
  border-color: var(--swatch, var(--arcane));
  background: rgba(108, 76, 255, 0.1);
  color: var(--text);
  box-shadow: inset 3px 0 0 var(--swatch, var(--arcane));
}

/* ---- Spell grid ---- */
.draft-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 7px;
  overflow-y: auto;
  max-height: 320px;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.draft-spell-card {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 8px;
  row-gap: 2px;
  align-items: center;
  padding: 9px 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 9px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
  color: var(--text);
  font-family: var(--font-ui);
}
.draft-spell-card:hover:not(:disabled):not(.at-cap) {
  border-color: var(--arcane);
  background: rgba(108, 76, 255, 0.1);
}
.draft-spell-card:focus-visible {
  outline: 2px solid var(--arcane);
  outline-offset: 2px;
}
.draft-spell-card.is-selected {
  border-color: var(--rune);
  background: rgba(124, 255, 90, 0.08);
}
.draft-spell-card.at-cap {
  opacity: 0.38;
  cursor: not-allowed;
}
.draft-spell-card:disabled { opacity: 0.4; cursor: default; }
.dsc-swatch {
  grid-row: 1 / 3;
  grid-column: 1;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  filter: drop-shadow(0 0 4px currentColor);
}
.dsc-name {
  grid-row: 1;
  grid-column: 2;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.dsc-cd {
  grid-row: 1;
  grid-column: 3;
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
}
.dsc-desc {
  grid-row: 2;
  grid-column: 2 / 4;
  font-size: 10px;
  color: var(--muted);
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ---- Ready button ---- */
.draft-footer {
  display: flex;
  justify-content: flex-end;
}
.draft-ready-btn {
  min-width: 160px;
}
.draft-ready-btn.is-ready {
  background: rgba(124, 255, 90, 0.12);
  border-color: var(--rune);
  color: var(--rune);
}

/* ---- Responsive: narrow / touch ---- */
@media (max-width: 580px) {
  .draft-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .draft-slots {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .draft-slot-pip {
    flex: 1 1 80px;
    height: 30px;
    font-size: 10px;
  }
  .draft-grid {
    max-height: 240px;
  }
  .draft-templates {
    display: none; /* save vertical space; users can tap cards directly */
  }
}

@media (prefers-reduced-motion: reduce) {
  .draft-panel { animation: none !important; }
  .draft-timer { transition: none !important; }
  .draft-timer.draft-timer-urgent { animation: none !important; }
  .draft-spell-card, .draft-tpl-btn, .draft-slot-pip { transition: none !important; }
}

/* ============================================================
   FX LAYER & JUICE TOKENS
   Unified "Juice & FX" engine (src/fx.js): transient full-viewport
   flash, vignette pulse, chromatic aberration, screen shake, and
   short-lived particle bursts. #fx-layer is created in JS; these
   rules only define its appearance. All motion is neutralised under
   prefers-reduced-motion (see the trailing media block).
   ============================================================ */

/* ---- FX host: covers the viewport, never blocks input ---- */
#fx-layer {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9000;
  overflow: hidden;
}

/* ---- Flash: full-viewport colour fade via ::after ---- */
.fx-flash::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--fx-flash-color, rgba(255, 255, 255, 0.4));
  animation: fx-flash-fade var(--fx-flash-ms, 160ms) ease-out both;
}
@keyframes fx-flash-fade {
  0%   { opacity: 0.85; }
  100% { opacity: 0; }
}

/* ---- Vignette: inset box-shadow pulse ---- */
.fx-vignette {
  animation: fx-vignette-pulse var(--fx-vignette-ms, 300ms) ease-out both;
}
@keyframes fx-vignette-pulse {
  0%   { box-shadow: inset 0 0 0 0 transparent; }
  30%  { box-shadow: inset 0 0 120px 24px var(--fx-vignette-color, var(--fx-vignette-lowhp)); }
  100% { box-shadow: inset 0 0 0 0 transparent; }
}

/* ---- Chromatic aberration: drop-shadow offsets in arcane/ember tints ---- */
.fx-aberration {
  animation: fx-aberration-pulse var(--fx-aberration-ms, 300ms) ease-out both;
}
@keyframes fx-aberration-pulse {
  0%   { filter: drop-shadow(0 0 0 rgba(108, 76, 255, 0)) drop-shadow(0 0 0 rgba(255, 90, 60, 0)); }
  25%  { filter: drop-shadow(calc(var(--aberration-offset, 4px) * -1) 0 0 rgba(108, 76, 255, 0.85))
                 drop-shadow(var(--aberration-offset, 4px) 0 0 rgba(255, 90, 60, 0.85)); }
  100% { filter: drop-shadow(0 0 0 rgba(108, 76, 255, 0)) drop-shadow(0 0 0 rgba(255, 90, 60, 0)); }
}

/* ---- Screen shake: translate3d jitter keyed off --shake-amp ---- */
.fx-shake {
  animation: fx-shake var(--shake-ms, 300ms) cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes fx-shake {
  0%, 100% { transform: translate3d(0, 0, 0); }
  15% { transform: translate3d(calc(var(--shake-amp, 0px) * -1),   calc(var(--shake-amp, 0px) *  0.6), 0); }
  30% { transform: translate3d(calc(var(--shake-amp, 0px) *  0.9), calc(var(--shake-amp, 0px) * -0.5), 0); }
  45% { transform: translate3d(calc(var(--shake-amp, 0px) * -0.7), calc(var(--shake-amp, 0px) *  0.4), 0); }
  60% { transform: translate3d(calc(var(--shake-amp, 0px) *  0.5), calc(var(--shake-amp, 0px) * -0.3), 0); }
  75% { transform: translate3d(calc(var(--shake-amp, 0px) * -0.3), calc(var(--shake-amp, 0px) *  0.2), 0); }
}

/* ---- Particle bursts ---- */
.fx-particle {
  position: absolute; top: 0; left: 0;
  pointer-events: none;
  will-change: transform, opacity;
  --dx: 0px; --dy: 0px; --rot: 0deg;
}
.fx-particle--ember    { width: 6px; height: 6px; border-radius: 1px;  background: var(--ember); box-shadow: 0 0 8px var(--ember); }
.fx-particle--shard    { width: 5px; height: 9px; border-radius: 1px;  background: var(--cyan);  box-shadow: 0 0 6px var(--cyan); }
.fx-particle--spark    { width: 4px; height: 4px; border-radius: 50%;  background: var(--gold);  box-shadow: 0 0 10px var(--gold); }
.fx-particle--confetti { width: 6px; height: 8px; border-radius: 1px;  background: var(--pink);  box-shadow: 0 0 4px var(--pink); }
.fx-particle--rune     { width: 8px; height: 8px; border-radius: 2px;  background: var(--rune);  box-shadow: 0 0 10px var(--rune); }

@keyframes fx-particle-ember {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; }
}
@keyframes fx-particle-shard {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.4); opacity: 0; }
}
@keyframes fx-particle-spark {
  0%   { transform: translate(0, 0) scale(1.5); opacity: 1; }
  50%  { opacity: 0.9; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}
@keyframes fx-particle-confetti {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.5); opacity: 0; }
}
@keyframes fx-particle-rune {
  0%   { transform: translate(0, 0) scale(0.6); opacity: 0; }
  30%  { opacity: 1; transform: translate(calc(var(--dx) * 0.3), calc(var(--dy) * 0.3)) scale(1); }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.8); opacity: 0; }
}

/* ---- Reduced motion: neutralise every FX animation ----
   Flash degrades to a static tint (no fade); particles are hidden;
   shake/aberration tokens clamp to zero so any stray trigger is inert. */
@media (prefers-reduced-motion: reduce) {
  .fx-shake, .fx-vignette, .fx-aberration { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
  .fx-flash::after { animation: none !important; opacity: 0.35; }
  #fx-layer .fx-particle { display: none !important; }
  :root { --shake-amp: 0px !important; --aberration-offset: 0px !important; }
}

/* ============================================================
   SOCIAL — chat log/input, redesigned roster, PTT, conduct +
   settings dialogs. Reuses existing tokens/fonts/easing only.
   ============================================================ */

/* ---- Chat log + input (bottom-left, glass panel to match #hud-top) ---- */
.chat-panel {
  position: absolute;
  left: 16px; bottom: 96px;
  width: min(340px, 34vw);
  display: flex; flex-direction: column; gap: 6px;
  z-index: 6;
  pointer-events: none;
}
.chat-log {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  max-height: 220px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 18%);
  mask-image: linear-gradient(to bottom, transparent, black 18%);
}
.chat-line {
  background: rgba(13, 11, 26, 0.7);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 13px; line-height: 1.35;
  backdrop-filter: blur(6px);
  animation: playerIn 0.25s var(--ease-spring) both;
  transition: opacity 0.4s ease;
  word-break: break-word;
}
.chat-line.self { border-color: var(--line-strong); }
.chat-line--dim { opacity: 0.55; }
.chat-line-name { font-weight: 700; margin-right: 6px; }
.chat-line-text { color: var(--text); }
.chat-input-wrap.hidden { display: none; }
.chat-input-wrap { pointer-events: auto; }
.chat-input {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  padding: 9px 12px;
}
.chat-input:focus { outline: none; border-color: var(--arcane); box-shadow: var(--glow-arcane); }
.chat-input:focus-visible { outline: 2px solid var(--arcane); outline-offset: 2px; }

/* ---- Chat toggle button (touch/mobile — no hardware Enter key) ---- */
.chat-toggle-btn {
  align-self: flex-start;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(13, 11, 26, 0.7);
  backdrop-filter: blur(6px);
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto;
  cursor: pointer;
}
.chat-toggle-btn:focus-visible { outline: 2px solid var(--arcane); outline-offset: 2px; }
.chat-toggle-btn.hidden { display: none; }

/* ---- Push-to-talk indicator (optional HUD chip; toggled by future wiring) ---- */
.ptt-indicator {
  position: fixed;
  bottom: 16px; left: 16px;
  z-index: 6;
  background: rgba(124, 255, 90, 0.16);
  border: 1px solid var(--rune);
  color: var(--rune);
  font-family: var(--font-display);
  font-size: 10px; letter-spacing: 2px;
  padding: 6px 10px; border-radius: 6px;
  pointer-events: none;
}
.ptt-indicator.hidden { display: none; }

/* ---- Redesigned in-match roster (rebuilt in #scoreboard, patch-rendered) ---- */
#scoreboard .roster-row {
  display: grid;
  grid-template-columns: 12px 1fr auto auto auto auto;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
#scoreboard .roster-row.dead { opacity: .4; text-decoration: line-through; }
#scoreboard .roster-row.dead .roster-status,
#scoreboard .roster-row.dead .pkd { text-decoration: none; }
.roster-chip {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
}
.roster-name {
  font-size: 13px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 108px;
}
.roster-status { display: flex; gap: 3px; align-items: center; min-width: 52px; }
.rs-glyph { font-size: 11px; line-height: 1; opacity: 0.16; transition: opacity 0.2s ease; }
.rs-glyph.active { opacity: 1; }
.rs-speak.active { color: var(--rune); animation: rsSpeakPulse 0.9s ease-in-out infinite; }
.rs-type.active { color: var(--cyan); animation: rsTypingDots 1s steps(1) infinite; }
.rs-afk.active { color: var(--gold); }
.rs-muted.active { color: var(--ember); }
#scoreboard .roster-row .pkd { color: var(--muted); font-size: 11px; text-align: right; }
#scoreboard .roster-row .pscore { color: var(--ember); font-weight: 700; text-align: right; }
.roster-mute-btn {
  width: 20px; height: 20px;
  border-radius: 6px; border: 1px solid var(--line);
  background: transparent; color: var(--muted);
  font-size: 11px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.roster-mute-btn:hover { border-color: var(--line-strong); color: var(--text); }
.roster-mute-btn.is-muted { color: var(--ember); border-color: rgba(255, 90, 60, 0.55); background: rgba(255, 90, 60, 0.12); }
.roster-mute-btn:focus-visible { outline: 2px solid var(--arcane); outline-offset: 2px; }

@keyframes rsSpeakPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(1.2); }
}
@keyframes rsTypingDots {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

/* ---- Conduct disclaimer + social settings dialogs (reuse .pause-overlay/.panel) ---- */
.conduct-panel, .social-panel { max-width: 520px; text-align: left; }
.conduct-title, .social-title {
  font-family: var(--font-display);
  font-size: clamp(15px, 2.6vw, 20px);
  color: var(--arcane);
  text-shadow: 0 0 18px rgba(108, 76, 255, 0.5);
  margin-bottom: 16px;
  text-align: center;
}
.conduct-body { font-size: 14px; line-height: 1.6; color: var(--text); margin-bottom: 20px; }
.conduct-body p { margin-bottom: 10px; }
.conduct-body ul { margin: 10px 0 12px 20px; display: flex; flex-direction: column; gap: 8px; }
.conduct-body strong { color: var(--gold); }
#conduct-enter { width: 100%; }
#social-settings-body { display: flex; flex-direction: column; gap: 16px; margin-bottom: 18px; text-align: left; }
.social-range { width: 100%; accent-color: var(--arcane); }
.social-ptt-btn { min-width: 88px; }
#social-close { width: 100%; }

/* ---- Responsive: shrink chat panel width on narrow viewports ---- */
@media (max-width: 760px) {
  /* Raised clear of the virtual joystick (bottom:40px, 120px tall -> top ~160px)
     so the log/input never sits on top of the movement stick. */
  .chat-panel { width: min(280px, 60vw); bottom: 176px; }
  .roster-name { max-width: 68px; }
}

/* ---- Reduced motion: static glyphs, no pulsing/typing animation ---- */
@media (prefers-reduced-motion: reduce) {
  .rs-speak.active, .rs-type.active { animation: none !important; opacity: 1 !important; }
  .chat-line { animation: none !important; }
  .conduct-panel, .social-panel { animation: none !important; }
}