@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Press+Start+2P&display=swap');

/* The Google-hosted Rajdhani files have stale glyf bounding boxes. Firefox
   repairs them at load time and reports one warning for each affected glyph.
   These locally served copies have the same outlines with corrected boxes. */
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/rajdhani-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/rajdhani-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/rajdhani-700.woff2') format('woff2');
}

/* Lilita One (SIL Open Font License 1.1) — the house theme's cartoon display
   face, served locally so the default look works offline. */
@font-face {
  font-family: 'Lilita One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/lilita-one-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lilita One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/lilita-one-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Reset & body ─────────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #0a0a0f;
  color: #fff;
  font-family: 'Rajdhani', sans-serif;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
}

canvas {
  display: block;
  touch-action: none;
}

/* ── Gopherito Studios intro ─────────────────────────────────────── */
#studio-splash {
  position: fixed;
  inset: 0;
  z-index: 20000;
  overflow: hidden;
  background:
    radial-gradient(circle at 24% 48%, rgba(111, 82, 36, 0.18), transparent 36%),
    #090704;
  color: #f5e6bd;
  opacity: 0;
  pointer-events: none;
  transition: opacity 520ms ease;
}
#studio-splash.is-visible {
  opacity: 1;
  pointer-events: none;
}
#studio-splash.is-instant { transition: none; }
#studio-splash.is-exiting {
  opacity: 0;
  pointer-events: none;
}
.studio-splash-art {
  position: absolute;
  left: clamp(34px, 9vw, 150px);
  top: 50%;
  width: min(clamp(230px, 28vw, 350px), 41vh);
  aspect-ratio: 1 / 2;
  transform: translateY(-50%);
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.5));
}
.studio-splash-art picture,
.studio-splash-art img {
  display: block;
  width: 100%;
  height: 100%;
}
.studio-splash-art img {
  object-fit: contain;
  image-rendering: auto;
}
.studio-splash-copy {
  position: absolute;
  left: clamp(380px, 46%, 720px);
  right: 6%;
  top: 50%;
  transform: translateY(-44%);
  text-align: center;
  opacity: 0;
  animation: studio-copy-reveal 800ms 1500ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.studio-splash-name {
  font-family: 'Orbitron', 'Rajdhani', sans-serif;
  font-size: clamp(22px, 4.4vw, 60px);
  font-weight: 700;
  letter-spacing: clamp(1px, 0.25vw, 5px);
  line-height: 1.1;
  color: #f5e6bd;
  text-shadow: 0 3px 0 rgba(35, 17, 5, 0.9), 0 0 28px rgba(237, 173, 82, 0.28);
}
.studio-splash-name::after {
  content: '';
  display: block;
  width: min(220px, 42vw);
  height: 1px;
  margin: 16px auto 0;
  background: linear-gradient(90deg, transparent, rgba(245,230,189,0.75), transparent);
}
.studio-splash-skip {
  position: absolute;
  right: 22px;
  bottom: 20px;
  padding: 8px 12px;
  border: 1px solid rgba(245,230,189,0.3);
  border-radius: 4px;
  background: rgba(0,0,0,0.25);
  color: rgba(245,230,189,0.7);
  font: 500 10px 'Rajdhani', sans-serif;
  letter-spacing: 1.5px;
  cursor: pointer;
  pointer-events: auto;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
/* Once the splash is gone its SKIP must go with it: pointer-events:auto on
   the button used to leave an invisible click-catcher (z-index 20000) over
   the bottom-right corner of every screen for the rest of the session. */
#studio-splash:not(.is-visible) .studio-splash-skip,
#studio-splash.is-exiting .studio-splash-skip { pointer-events: none; visibility: hidden; }
.studio-splash-skip:hover,
.studio-splash-skip:focus-visible {
  outline: none;
  border-color: rgba(245,230,189,0.75);
  background: rgba(245,230,189,0.1);
  color: #f5e6bd;
}
@keyframes studio-copy-reveal {
  from { opacity: 0; transform: translateY(-36%) scale(0.96); letter-spacing: 0.14em; }
  to   { opacity: 1; transform: translateY(-44%) scale(1); letter-spacing: 0; }
}
@media (max-width: 700px) {
  .studio-splash-art {
    left: 50%;
    top: 34%;
    width: min(54vw, 29vh, 240px);
    transform: translate(-50%, -50%);
  }
  .studio-splash-copy {
    left: 8%;
    right: 8%;
    top: 72%;
    transform: translateY(-50%);
  }
  .studio-splash-name { font-size: clamp(22px, 7vw, 38px); }
  .studio-splash-skip { right: 12px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .studio-splash-copy { animation: none; opacity: 1; }
  .studio-splash-skip { transition: none; }
}

/* ── HUD (scores) ─────────────────────────────────────────────────── */
#hud {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 24px;
  z-index: 20;
  font-family: 'Orbitron', monospace;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
#hud.visible { opacity: 1; }

.connection-status {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 13px;
}
.connection-status.visible { display: inline-flex; }

.connection-quality {
  display: flex;
  align-items: center;
  gap: 8px;
}

#playing-room-code {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.6);
  white-space: nowrap;
}

.connection-status .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #5a5a66;
  box-shadow: 0 0 8px rgba(90,90,102,0.5);
}
.connection-status .dot.green {
  background: #33ff99;
  box-shadow: 0 0 10px rgba(51,255,153,0.65);
}
.connection-status .dot.yellow {
  background: #ffc832;
  box-shadow: 0 0 10px rgba(255,200,50,0.65);
}
.connection-status .dot.red {
  background: #ff4444;
  box-shadow: 0 0 10px rgba(255,68,68,0.65);
}
.connection-status .dot.offline {
  background: #5a5a66;
  box-shadow: none;
}

#network-warning {
  position: fixed;
  top: 74px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  letter-spacing: 0.5px;
  background: rgba(255,68,68,0.12);
  border: 1px solid rgba(255,68,68,0.45);
  color: #ff9f9f;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
#network-warning.visible { opacity: 1; }

.score-box {
  text-align: center;
  padding: 6px 16px;
  border-radius: 8px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.1s;
}
.score-box.flash { transform: scale(1.15); }

.score-box .label {
  font-size: 10px;
  letter-spacing: 0.5px;
  opacity: 0.5;
  text-transform: uppercase;
  white-space: nowrap;
}
.score-box .value {
  font-size: 26px;
  font-weight: 900;
}

.score-box.p0 .value { color: #ff3366; }
.score-box.p1 .value { color: #33ff99; }
.score-box.p2 .value { color: #3399ff; }

.score-box.eliminated { opacity: 0.3; }
/* One life left: the number blinks red and the box glows. */
.score-box.last-life { border-color: #ff3b3b !important; box-shadow: 0 0 14px rgba(255, 59, 59, 0.55); }
.score-box.last-life .value { color: #ff4d4d !important; animation: last-life-blink 0.9s ease-in-out infinite; }
@keyframes last-life-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.15; } }
@media (prefers-reduced-motion: reduce) { .score-box.last-life .value { animation: none; } }
.score-box.eliminated .value { text-decoration: line-through; }

/* ── Scoreboard (goals panel) ────────────────────────────────────── */
#scoreboard {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 12px 16px;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  min-width: 100px;
}
#scoreboard.visible { opacity: 1; }

.sb-title {
  font: bold 11px Orbitron, monospace;
  color: rgba(255,255,255,0.4);
  text-align: center;
  margin-bottom: 8px;
  letter-spacing: 2px;
}

.sb-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sb-row:last-child { border-bottom: none; }

.sb-name {
  font: bold 13px Orbitron, monospace;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 10px;
}
.sb-row.p0 .sb-name { color: #ff3366; }
.sb-row.p1 .sb-name { color: #33ff99; }
.sb-row.p2 .sb-name { color: #3399ff; }

.sb-goals {
  font: bold 22px Orbitron, monospace;
  color: #fff;
  margin-left: 16px;
  min-width: 24px;
  text-align: right;
}

/* ── Menu overlay ─────────────────────────────────────────────────── */
#menu-overlay {
  position: fixed;
  /* Ends above the fixed legal footer (height measured in main.js), so menu
     content never scrolls underneath it. 0 while playing (footer hidden). */
  inset: 0 0 var(--menu-footer-h, 0px) 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  pointer-events: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.menu-screen {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  pointer-events: auto;
  animation: fadeIn 0.2s ease-out;
  margin: auto 0;
  padding: 20px 16px;
  max-width: 100vw;
}
.menu-screen.active { display: flex; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Pest theatre (js/menu-pests.js) ──────────────────────────────────
   Pests act out their mischief BEHIND the menu: above the empty game canvas,
   below #menu-overlay, never interactive. The menu's glassy buttons
   (translucent + backdrop blur) let a passing pest read through softly. */
#menu-pest-stage {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}
#menu-pest-stage.active { opacity: 1; }

/* Headline reactions to a pest's prank. Only ever applied to a screen's
   logo / h2 — never to a control — and removed after one run. */
.mp-poke-zap    { animation: mp-zap 0.42s steps(2, end) 1; }
.mp-poke-shake  { animation: mp-shake 0.5s ease-out 1; }
.mp-poke-tug    { animation: mp-tug 1.9s cubic-bezier(0.3, 0.7, 0.3, 1) 1; }
.mp-poke-sway   { animation: mp-sway 2.6s ease-in-out 1; }
.mp-poke-stopmo { animation: mp-stopmo 1.2s steps(1, end) 1; }
@keyframes mp-zap {
  0%   { filter: brightness(1.9) hue-rotate(60deg); transform: translateX(-2px); }
  50%  { filter: brightness(0.6); transform: translateX(2px); }
  100% { filter: none; transform: none; }
}
@keyframes mp-shake {
  0%, 100% { transform: none; }
  20% { transform: translate(calc(var(--mp-dir, 1) * 4px), -1px) rotate(calc(var(--mp-dir, 1) * 0.6deg)); }
  45% { transform: translate(calc(var(--mp-dir, 1) * -3px), 1px); }
  70% { transform: translate(calc(var(--mp-dir, 1) * 1.5px), 0); }
}
@keyframes mp-tug {
  0%   { transform: none; }
  20%  { transform: translateX(calc(var(--mp-dir, 1) * 9px)) skewX(calc(var(--mp-dir, 1) * -3deg)); }
  45%  { transform: translateX(calc(var(--mp-dir, 1) * 6px)) skewX(calc(var(--mp-dir, 1) * -2deg)); }
  80%  { transform: translateX(calc(var(--mp-dir, 1) * 7px)) skewX(calc(var(--mp-dir, 1) * -2.5deg)); }
  88%  { transform: translateX(calc(var(--mp-dir, 1) * -4px)); }
  100% { transform: none; }
}
@keyframes mp-sway {
  0%, 100% { transform: none; filter: none; }
  20% { transform: rotate(-2deg) translateX(-5px); filter: hue-rotate(40deg); }
  45% { transform: rotate(2deg) translateX(5px); filter: hue-rotate(80deg); }
  70% { transform: rotate(-1.5deg) translateX(-3px); filter: hue-rotate(30deg); }
}
/* "Walk like an Egyptian": stiff, stepped hops while mummified. */
@keyframes mp-stopmo {
  0%   { transform: none; }
  15%  { transform: translateX(calc(var(--mp-dir, 1) * 5px)) rotate(-1deg); }
  35%  { transform: translateX(calc(var(--mp-dir, 1) * -3px)) rotate(1deg); }
  55%  { transform: translateX(calc(var(--mp-dir, 1) * 4px)) rotate(-1deg); }
  75%  { transform: translateX(calc(var(--mp-dir, 1) * -2px)); }
  100% { transform: none; }
}
/* Reduced motion is handled in menu-pests.js, not here: under AUTO it plays
   gentle cameos and never pokes the headline, while PEST MOTION: FULL is an
   explicit opt-in to the whole show — so these animations stay enabled. */
.menu-pests-hint {
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: 0.3px;
  color: rgba(255, 216, 77, 0.85);
  text-align: left;
  padding-top: 6px;
}
.theme-retro .menu-pests-hint { font-family: 'Press Start 2P', monospace; font-size: 7px; line-height: 1.7; }

/* ── Title screen ─────────────────────────────────────────────────── */
#screen-title .logo {
  font-family: 'Orbitron', monospace;
  font-size: clamp(28px, 6vw, 48px);
  font-weight: 900;
  letter-spacing: 4px;
  background: linear-gradient(135deg, #ff3366, #3399ff, #33ff99);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
}
/* Two-line wordmark: a small GOPHERITO'S over TRIANGLE OF CHAOS. The parent's
   gradient text fill carries through both spans. */
#screen-title .logo .logo-kicker,
#screen-title .logo .logo-main { display: block; }
#screen-title .logo .logo-kicker { font-size: 0.42em; letter-spacing: 0.32em; margin-bottom: 2px; }
#screen-title .logo .logo-main { line-height: 1.05; }
#screen-title .wc-badge {
  font-family: 'Orbitron', monospace;
  font-size: clamp(11px, 2.6vw, 15px);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #ffd700;
  text-shadow: 0 0 14px rgba(255, 215, 0, 0.55);
  margin: 8px 0 4px;
}
#screen-title .subtitle {
  font-size: 14px;
  color: rgba(255,255,255,0.35);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 40px;
}
#screen-title .start-hint {
  font-family: 'Orbitron', monospace;
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.version-tag {
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.6);
}

#debug-bot-controls {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.debug-label {
  font-size: 10px;
  color: rgba(255,200,50,0.5);
  letter-spacing: 2px;
  margin-bottom: 6px;
}

.debug-bot-btns {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.menu-btn-debug {
  font-size: 11px;
  padding: 5px 12px;
  background: rgba(255,200,50,0.1);
  border-color: rgba(255,200,50,0.3);
}

.debug-bot-status {
  font-size: 11px;
  color: rgba(255,200,50,0.6);
  margin-top: 6px;
  margin-top: 24px;
}

/* ── Heading style shared across screens ─────────────────────────── */
#screen-difficulty h2,
#screen-mode h2,
#screen-online h2,
#screen-online-wait h2,
#screen-settings h2,
#screen-about h2,
#screen-help h2,
#screen-solo h2,
#screen-solo-clear h2,
#screen-solo-lost h2,
#screen-solo-champion h2,
#screen-account h2,
#screen-characters h2,
#screen-character-detail h2,
#screen-watch h2,
#screen-online-wait .quick-title,
#screen-character-edit h2 {
  font-family: 'Orbitron', monospace;
  font-size: 18px;
  letter-spacing: 3px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 28px;
}

/* ── Menu buttons ────────────────────────────────────────────────── */
.menu-btn {
  display: block;
  width: 240px;
  padding: 12px 0;
  margin-bottom: 12px;
  border-radius: 10px;
  border: 2px solid rgba(51,153,255,0.85);
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  font-family: 'Orbitron', monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #67b8ff;
  cursor: pointer;
  transition: transform 0.1s, background 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.menu-btn:active { transform: scale(0.96); }
.menu-btn[hidden] { display: none; }
.menu-btn:disabled {
  opacity: 0.4;
  cursor: default;
  transform: none;
}
.menu-btn-secondary {
  border-color: rgba(255,255,255,0.35);
  color: rgba(255,255,255,0.85);
}
.menu-btn-quit {
  border-color: rgba(255,68,68,0.35);
  color: rgba(255,68,68,0.6);
  margin-top: 12px;
  font-size: 12px;
}

/* ── Keyboard menu focus ────────────────────────────────────────── */
:where(#menu-overlay button, #menu-overlay input, .pest-gallery-overlay button):focus-visible,
:where(#menu-overlay button, #menu-overlay input, .pest-gallery-overlay button).menu-nav-focused {
  /* An outline stays visible when a theme supplies its own button shadow. */
  outline: 2px solid var(--tp-accent, #67b8ff);
  outline-offset: 4px;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.16),
    0 0 0 4px rgba(103,184,255,0.2),
    0 0 24px rgba(103,184,255,0.34);
}

:where(#menu-overlay button, .pest-gallery-overlay button):focus-visible,
:where(#menu-overlay button, .pest-gallery-overlay button).menu-nav-focused {
  transform: translateY(-1px);
}

:where(#menu-overlay input):focus-visible,
:where(#menu-overlay input).menu-nav-focused {
  border-color: rgba(103,184,255,0.78);
  background: rgba(0,0,0,0.62);
}

.pest-mascot.menu-nav-focused .pest-mascot-img,
.pest-mascot:focus-visible .pest-mascot-img {
  border-color: rgba(103,184,255,0.72);
  box-shadow: 0 0 18px rgba(103,184,255,0.24);
}

/* ── Difficulty buttons ──────────────────────────────────────────── */
/* ── Game setup columns ──────────────────────────────────────────── */
.setup-columns {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: flex-start;
  margin: 8px auto 16px;
  max-width: 900px;
  padding: 0 12px;
}

.setup-col {
  flex: 1;
  min-width: 180px;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.setup-col-label {
  font-family: 'Orbitron', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 10px;
  text-align: center;
}

/* ── Screen template: action bar ─────────────────────────────────────
   Every menu screen ends with one .setup-actions bar: [PRIMARY] [secondary…]
   [destructive] [BACK]. It sticks to the bottom of the scrolling overlay —
   which ends just above the fixed legal footer — so START / BACK never need
   a scroll and the footer never sits on top of content. The bar only gets a
   backdrop while content actually scrolls underneath it (.actions-stuck on
   the screen, set in main.js updateMenuChrome). Full-page screens that are
   their own scroll container (solo, account, fighters…) follow the same
   rules. */
.setup-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.menu-screen > .setup-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  align-self: stretch;
  gap: 0;
  margin: 8px -16px 0;
  padding: 10px 16px 2px;
  border-radius: 14px;
  transition: background 0.15s;
}
.menu-screen > .setup-actions .menu-btn { margin-bottom: 8px; }
.menu-screen > .setup-actions .menu-btn-quit { margin-top: 4px; }
.menu-screen.actions-stuck > .setup-actions {
  background: linear-gradient(to top, rgba(10,10,15,0.94) 72%, rgba(10,10,15,0.55));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 -10px 18px rgba(10,10,15,0.55);
}

/* PLAY ONLINE: the account chip is the status line — tap it to sign in or
   manage the account. */
.account-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: -14px auto 16px;
  padding: 6px 14px;
  border: 1px solid rgba(51,255,153,0.4);
  border-radius: 999px;
  background: rgba(51,255,153,0.06);
  font-family: 'Orbitron', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  color: #33ff99;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.account-chip:hover { background: rgba(51,255,153,0.14); }
.account-chip:disabled { opacity: 0.4; cursor: default; }
.theme-retro .account-chip { font-family: 'Press Start 2P', monospace; font-size: 7px; }
/* Phone h2s only keep a 14px bottom margin, so don't tuck the chip under it. */
@media (max-width: 480px) { .account-chip { margin-top: -4px; } }

/* Primary actions (START, BEGIN, DONE, NEXT…) keep the shared .menu-btn
   size — only the colour marks them as the primary. */
.menu-btn-start {
  border-color: #33ff99;
  color: #33ff99;
  background: rgba(51,255,153,0.08);
}

.menu-btn-start:hover {
  background: rgba(51,255,153,0.15);
}

.diff-btn {
  display: block;
  width: 100%;
  padding: 10px 0;
  margin-bottom: 8px;
  border-radius: 8px;
  border: 2px solid;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  font-family: 'Orbitron', monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  transition: transform 0.1s, background 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.diff-btn:active { transform: scale(0.96); }

.diff-btn.easy   { border-color: rgba(51,255,153,0.4); color: #33ff99; }
.diff-btn.medium { border-color: rgba(255,200,50,0.4); color: #ffc832; }
.diff-btn.hard   { border-color: rgba(255,51,102,0.4); color: #ff3366; }

.diff-btn.active.easy   { border-color: #33ff99; background: rgba(51,255,153,0.12); }
.diff-btn.active.medium { border-color: #ffc832; background: rgba(255,200,50,0.12); }
.diff-btn.active.hard   { border-color: #ff3366; background: rgba(255,51,102,0.12); }

.diff-btn .desc {
  display: block;
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 400;
  opacity: 0.5;
  letter-spacing: 0;
  margin-top: 2px;
}

/* ── Gameplay panel (right column) ─────────────────────────────── */
.gameplay-panel {
  border: 1px solid rgba(100,200,255,0.2);
  border-radius: 8px;
  background: rgba(100,200,255,0.04);
  padding: 10px 12px;
  width: 100%;
}

/* ── Online form ─────────────────────────────────────────────────── */
.online-form {
  width: min(88vw, 260px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.online-form label {
  margin: 4px 0 6px;
  font-family: 'Orbitron', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.5);
  text-align: left;
}

.online-form input {
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-family: 'Orbitron', monospace;
  font-size: 14px;
  text-transform: uppercase;
}

.online-form input::placeholder {
  color: rgba(255,255,255,0.35);
  text-transform: none;
}

/* Read-only display of the Settings name on surfaces that no longer ask
   for it (Play Online, Solo Ladder). Deliberately NOT styled like an input:
   it is a label that jumps to Settings when clicked. */
.readonly-name {
  font-family: 'Orbitron', monospace;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #33ff99;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  border-bottom: 1px dashed rgba(51, 255, 153, 0.4);
  transition: color 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.readonly-name::after {
  content: '\270E';
  font-size: 11px;
  opacity: 0.6;
}
.readonly-name:hover,
.readonly-name:focus-visible {
  color: #fff;
  border-bottom-color: #33ff99;
}
.readonly-name:hover::after {
  opacity: 1;
}

.online-form .readonly-name {
  margin-bottom: 10px;
  font-size: 14px;
}

/* Buttons inside the form are fixed-width (.menu-btn), so stretch would
   leave them flush-left; center them like every other menu screen. */
.online-form .menu-btn {
  align-self: center;
}

.status-text {
  min-height: 18px;
  margin-top: 8px;
  color: rgba(255,255,255,0.65);
  font-size: 14px;
}

/* ── Waiting room ────────────────────────────────────────────────── */
.room-code {
  font-family: 'Orbitron', monospace;
  font-size: 18px;
  letter-spacing: 3px;
  margin-bottom: 2px;
  color: #67b8ff;
  cursor: pointer;
  transition: color 0.15s;
}
.room-code:hover { color: #99d1ff; }
/* Waiting room title: "ROOM ABCD", the code itself copyable. */
#screen-online-wait h2.wait-title { margin-bottom: 2px; }
#screen-online-wait h2 .room-code {
  font-size: inherit;
  letter-spacing: inherit;
  margin: 0;
  color: #67b8ff;
}
.wait-columns > .room-options { flex: 2 1 0; min-width: 0; margin: 0; }
.room-options-cols { display: flex; gap: 24px; align-items: flex-start; }
.room-options-cols > .setup-col { flex: 1; }
/* Desktop: the options are simply columns — no collapsible chrome. */
@media (min-width: 481px) {
  .room-options > summary { display: none; }
  .wait-columns > .room-options { border-top: 0; padding-top: 0; }
}
@media (max-width: 480px) {
  .wait-columns > .room-options { width: 100%; max-width: 260px; }
  .room-options-cols { flex-direction: column; align-items: center; gap: 12px; padding-top: 8px; }
  .room-options-cols > .setup-col { width: 100%; }
}

.room-code-hint {
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  margin-bottom: 8px;
}

.menu-btn-invite {
  font-size: 12px;
  padding: 6px 16px;
  margin-bottom: 10px;
  background: rgba(103,184,255,0.15);
  border-color: rgba(103,184,255,0.4);
}

/* ── First visit ────────────────────────────────────────────────── */
#first-hint {
  position: fixed;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid rgba(103,184,255,0.5);
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 15px;
  text-align: center;
  z-index: 25;
  pointer-events: none;
}
#first-hint[hidden] { display: none; }
/* First visit: JUST PLAY or LOOK AROUND FIRST replaces TAP TO START. */
#screen-title.first-choosing .start-hint { display: none; }
.first-choice { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(320px, 86vw); }
.first-choice[hidden] { display: none; }
.first-choice .menu-btn { width: 100%; margin: 0; }
.first-choice-note { font-size: 13px; letter-spacing: 0.06em; opacity: 0.6; margin: -2px 0 10px; }
#first-skip {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 26;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(0,0,0,0.6);
  color: #fff;
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.06em;
  cursor: pointer;
}
#first-skip:hover { border-color: rgba(255,255,255,0.7); }
#first-skip[hidden] { display: none; }
/* Phones: the score tiles fill the top; the bottom-right corner is free
   (the round touch controls sit bottom-left). */
@media (max-width: 700px) {
  #first-skip {
    top: auto;
    bottom: max(20px, env(safe-area-inset-bottom));
    right: 16px;
  }
}
.name-nudge {
  margin: 6px 0 4px;
  font-size: 12px;
  color: rgba(255,214,102,0.85);
  text-align: left;
}
.name-nudge[hidden] { display: none; }
.name-prompt {
  margin: 8px 0 4px;
  font-size: 14px;
  color: rgba(255,255,255,0.85);
}
.name-prompt[hidden] { display: none; }
.name-prompt button {
  margin-left: 8px;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(103,184,255,0.6);
  background: rgba(103,184,255,0.15);
  color: #fff;
  font-family: 'Orbitron', monospace;
  font-size: 11px;
  cursor: pointer;
}

/* ── Invites ─────────────────────────────────────────────────────── */
.menu-btn-invite-friends {
  background: rgba(103,184,255,0.15);
  border-color: rgba(103,184,255,0.6);
}
.invite-banner {
  width: min(88vw, 320px);
  margin: 0 0 10px;
  padding: 10px 14px;
  border: 1px solid rgba(103,184,255,0.45);
  border-radius: 10px;
  background: rgba(103,184,255,0.12);
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-line;
}
.invite-banner[hidden] { display: none; }

/* Waiting room: after 20 s, start with bots (a friend can still take a seat). */
.bot-offer {
  width: min(88vw, 320px);
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.bot-offer[hidden] { display: none; }
.bot-offer-text {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
}
.bot-offer .menu-btn { margin-bottom: 0; }

/* ── Quick Match ─────────────────────────────────────────────────── */
.online-quick-btn {
  width: min(88vw, 260px);
  margin-top: 8px;
}
.online-quick-hint {
  margin: 6px 0 2px;
  font-size: 11px;
  color: rgba(255,255,255,0.45);
}
.online-divider {
  width: min(88vw, 260px);
  margin: 14px 0 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Orbitron', monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.35);
}
.online-divider::before,
.online-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.15);
}

/* The waiting room while Quick Match looks for strangers: no room options,
   no START (bots fill in on their own); the host can choose their difficulty. */
.quick-title,
.quick-finding { display: none; }
#screen-online-wait.is-quick .quick-title { display: block; margin-bottom: 12px; }
#screen-online-wait.is-quick .wait-title,
#screen-online-wait.is-quick .room-code-hint,
#screen-online-wait.is-quick #wait-room-options,
#screen-online-wait.is-quick #btn-online-start { display: none !important; }
#screen-online-wait.is-quick .quick-finding {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 4px 0 10px;
}
.quick-finding span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(103,184,255,0.85);
  animation: quick-pulse 1.2s ease-in-out infinite;
}
.quick-finding span:nth-child(2) { animation-delay: 0.2s; }
.quick-finding span:nth-child(3) { animation-delay: 0.4s; }
@keyframes quick-pulse {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .quick-finding span { animation: none; opacity: 0.7; }
}

.wait-player-list {
  margin: 0 0 10px;
  padding: 10px 14px;
  width: 100%;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  background: rgba(0,0,0,0.35);
  font-size: 14px;
  line-height: 1.8;
  text-align: left;
}

.wait-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.ai-pick-label {
  font-size: 0.75rem;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.ai-pick-btns {
  display: flex;
  gap: 6px;
  justify-content: center;
}
.ai-pick-note { font-size: 0.75rem; color: #aaa; margin-top: 8px; }
.btn-ai-diff {
  border-color: rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.5);
  font-size: 0.85rem;
  padding: 6px 12px;
  min-width: 0;
  width: auto;
}
.btn-ai-diff.active {
  border-color: #33ff99;
  color: #33ff99;
  background: rgba(51,255,153,0.1);
}

/* ── Pest panel (grouped border) ───────────────────────────────── */
.pest-panel {
  border: 1px solid rgba(68,255,136,0.25);
  border-radius: 8px;
  padding: 10px 12px 8px;
  margin: 0;
  background: rgba(68,255,136,0.03);
  width: 100%;
}

/* ── Pest presets ──────────────────────────────────────────────── */
.pest-presets {
  margin: 0 0 10px;
  text-align: center;
}

.preset-btn {
  padding: 6px 8px;
  border: none;
  background: rgba(0,0,0,0.45);
  font-family: 'Orbitron', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
  border-right: 1px solid rgba(68,255,136,0.15);
}
.preset-btn:last-child { border-right: none; }

.preset-btn:hover {
  background: rgba(68,255,136,0.08);
  color: rgba(255,255,255,0.7);
}

.preset-btn.active {
  background: rgba(68,255,136,0.18);
  color: #44ff88;
  text-shadow: 0 0 8px rgba(68,255,136,0.4);
}

#wait-pest-presets .preset-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── Pest level picker ──────────────────────────────────────────── */
.pest-level-picker {
  margin: 0 0 8px;
  text-align: center;
}

.pest-label {
  font-family: 'Orbitron', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.45);
  margin-bottom: 8px;
}

.pest-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  justify-content: center;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(68,255,136,0.25);
}

.pest-btn {
  padding: 6px 10px;
  border: none;
  background: rgba(0,0,0,0.45);
  font-family: 'Orbitron', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
  border-right: 1px solid rgba(68,255,136,0.15);
}
.pest-btn:last-child { border-right: none; }

.pest-btn:hover {
  background: rgba(68,255,136,0.08);
  color: rgba(255,255,255,0.7);
}

#wait-pest-picker .pest-btn:disabled,
#wait-pest-toggles .toggle-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.pest-btn.active {
  background: rgba(68,255,136,0.18);
  color: #44ff88;
  text-shadow: 0 0 8px rgba(68,255,136,0.4);
}

.pest-desc {
  font-size: 11px;
  color: rgba(255,255,255,0.25);
  margin-top: 5px;
}

.pest-toggles {
  margin: 4px 0 0;
}

.pest-toggle-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 6px 0;
}

.pest-toggle-name {
  font-family: 'Orbitron', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.5);
  width: 80px;
  text-align: right;
}

.pest-toggles .toggle-btn {
  padding: 4px 12px;
  border: none;
  border-radius: 0;
  background: rgba(0,0,0,0.45);
  font-family: 'Orbitron', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.pest-toggles .toggle-btn:first-child { border-radius: 6px 0 0 6px; }
.pest-toggles .toggle-btn:last-child { border-radius: 0 6px 6px 0; }

.pest-toggles .toggle-btn:hover {
  background: rgba(68,255,136,0.08);
  color: rgba(255,255,255,0.7);
}

.pest-toggles .toggle-btn.active {
  background: rgba(68,255,136,0.18);
  color: #44ff88;
  text-shadow: 0 0 8px rgba(68,255,136,0.4);
}

/* ── Pest customize button ─────────────────────────────────────── */
.pest-customize-btn {
  display: block;
  width: 100%;
  padding: 8px 0;
  margin: 6px 0 8px;
  border: 1px dashed rgba(68,255,136,0.3);
  border-radius: 8px;
  background: rgba(0,0,0,0.3);
  font-family: 'Orbitron', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.pest-customize-btn:hover {
  background: rgba(68,255,136,0.06);
  color: rgba(255,255,255,0.6);
  border-color: rgba(68,255,136,0.45);
}
.pest-customize-btn.active {
  background: rgba(68,255,136,0.14);
  color: #44ff88;
  border-color: rgba(68,255,136,0.5);
  border-style: solid;
  text-shadow: 0 0 8px rgba(68,255,136,0.4);
}
.pest-customize-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── Pest gallery modal ────────────────────────────────────────── */
.pest-gallery-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 70;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: auto;
  animation: fadeIn 0.2s ease-out;
  overflow-y: auto;
}
.pest-gallery-overlay.active {
  display: flex;
}

.pest-gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 28px 20px;
  border: 1px solid rgba(68,255,136,0.3);
  border-radius: 14px;
  background: rgba(10,10,15,0.95);
  max-width: 400px;
  width: 90vw;
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
}
.pest-gallery-done { flex: 0 0 auto; }

.pest-gallery-title {
  font-family: 'Orbitron', monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 20px;
}

.pest-gallery-grid {
  /* The grid scrolls inside the box so DONE is always on screen. */
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
  padding: 4px;
  display: grid;
  /* 9 pests → a clean 3x3 (Draculito + Ramsesito made the 2-col list ragged) */
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
  width: 100%;
}

.pest-mascot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 8px;
  border: 2px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.pest-mascot:active { transform: scale(0.95); }
.pest-mascot:hover {
  border-color: rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
}

.pest-mascot-img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.3);
  border: 2px solid rgba(255,255,255,0.06);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.pest-mascot-img img,
.pest-mascot-img svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.5);
  transition: filter 0.3s;
}
.pest-mascot-img svg {
  padding: 4px;
  object-fit: contain;
}

.pest-mascot-name {
  font-family: 'Orbitron', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.3);
  transition: color 0.2s, text-shadow 0.2s;
  text-align: center;
}

/* Enabled pest mascot state */
.pest-mascot.enabled {
  border-color: rgba(68,255,136,0.45);
  background: rgba(68,255,136,0.08);
}
.pest-mascot.enabled .pest-mascot-img {
  border-color: rgba(68,255,136,0.4);
  box-shadow: 0 0 16px rgba(68,255,136,0.15);
}
.pest-mascot.enabled .pest-mascot-img img,
.pest-mascot.enabled .pest-mascot-img svg {
  filter: none;
}
.pest-mascot.enabled .pest-mascot-name {
  color: #44ff88;
  text-shadow: 0 0 8px rgba(68,255,136,0.3);
}

.pest-mascot:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.pest-gallery-done {
  padding: 10px 40px;
  border: 1px solid rgba(68,255,136,0.4);
  border-radius: 8px;
  background: rgba(68,255,136,0.1);
  font-family: 'Orbitron', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #44ff88;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.pest-gallery-done:hover {
  background: rgba(68,255,136,0.18);
}
.pest-gallery-done:active { transform: scale(0.95); }

/* ── Settings screen ─────────────────────────────────────────────── */
.settings-form {
  width: min(88vw, 260px);
  margin-bottom: 20px;
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.setting-row label {
  font-family: 'Orbitron', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.5);
}

.setting-row input {
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-family: 'Orbitron', monospace;
  font-size: 13px;
  width: 120px;
  text-align: right;
  text-transform: uppercase;
}

.toggle-btn {
  padding: 6px 16px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.45);
  font-family: 'Orbitron', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.toggle-btn.on {
  color: #33ff99;
  border-color: rgba(51,255,153,0.5);
  background: rgba(51,255,153,0.1);
}
.toggle-btn.off {
  color: #ff4444;
  border-color: rgba(255,68,68,0.4);
  background: rgba(255,68,68,0.08);
}

/* Settings is one column of titled sections: PLAYER · LOOK · AUDIO · MENU ·
   APP. Action buttons for the APP section sit under it, BACK in the bar. */
.settings-form.settings-sections {
  width: min(88vw, 340px);
  margin-bottom: 8px;
}
.settings-sections .settings-subhead {
  margin-top: 18px;
  text-align: left;
  font-size: 11px;
  color: rgba(255,255,255,0.7);
}
.settings-sections .settings-subhead:first-child { margin-top: 0; }
.settings-link-btn {
  max-width: 62%;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid rgba(51,255,153,0.45);
  background: rgba(51,255,153,0.08);
  color: #33ff99;
  font-family: 'Orbitron', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.settings-link-btn:hover { background: rgba(51,255,153,0.16); }
.settings-link-btn:disabled { opacity: 0.4; cursor: default; }
.theme-retro .settings-link-btn { font-family: 'Press Start 2P', monospace; font-size: 7px; }
.setting-row-audio { flex-wrap: wrap; gap: 8px; }
.setting-row-audio label { flex: 0 0 128px; text-align: left; }
.setting-row-audio .slider-group { flex: 1 1 180px; }
.setting-row-audio .volume-slider { min-width: 80px; }
#theme-picker { flex-wrap: wrap; }
#theme-picker .seg-opt { flex: 1 1 40%; }
.settings-version { font-family: 'Orbitron', monospace; font-size: 11px; color: rgba(255,255,255,0.6); }
.settings-app-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.settings-app-actions .menu-btn-update { margin-top: 4px; }

/* ── Audio volume section ──────────────────────────────────────── */
.settings-audio {
  width: min(88vw, 320px);
  margin: 6px 0 20px;
}

.settings-subhead {
  font-family: 'Orbitron', monospace;
  font-size: 13px;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.85);
  text-align: center;
  margin: 4px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.setting-row-slider {
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.slider-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  justify-content: flex-end;
}

.volume-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  min-width: 110px;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(255,255,255,0.35), rgba(51,255,153,0.6));
  outline: none;
  cursor: pointer;
}
.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #33ff99;
  border: 2px solid rgba(0,0,0,0.5);
  box-shadow: 0 0 6px rgba(51,255,153,0.6);
  cursor: pointer;
}
.volume-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #33ff99;
  border: 2px solid rgba(0,0,0,0.5);
  box-shadow: 0 0 6px rgba(51,255,153,0.6);
  cursor: pointer;
}

.volume-label {
  font-family: 'Orbitron', monospace;
  font-size: 12px;
  font-weight: 700;
  color: #33ff99;
  min-width: 28px;
  text-align: right;
}


.exp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.exp-row:has(.exp-corner-btns) {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.exp-row:has(.exp-corner-btns) .exp-name {
  text-align: center;
}

.exp-name {
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  color: rgba(255,255,255,0.7);
}

.exp-row .toggle-btn {
  min-width: 52px;
  padding: 4px 10px;
  font-size: 11px;
}

.exp-corner-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  width: 100%;
}

.corner-btn {
  padding: 5px 4px;
  font-family: 'Orbitron', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.5);
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.corner-btn.active {
  color: #66ccff;
  border-color: rgba(100,200,255,0.5);
  background: rgba(100,200,255,0.15);
}

/* ── Update button ──────────────────────────────────────────────── */
.menu-btn-update {
  border-color: rgba(255,200,50,0.5);
  color: #ffc832;
  font-size: 12px;
  margin-top: 12px;
}

/* ── About / attribution ────────────────────────────────────────── */
.about-panel {
  width: min(88vw, 420px);
  margin-bottom: 18px;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  background: rgba(0,0,0,0.42);
  color: rgba(255,255,255,0.72);
  font-size: 15px;
  line-height: 1.45;
  text-align: left;
}

.about-panel p {
  margin-bottom: 12px;
}
.about-panel p:last-child {
  margin-bottom: 0;
}

.about-panel a,
#legal-footer a {
  color: #8fc9ff;
  text-decoration: none;
  border-bottom: 1px solid rgba(143,201,255,0.35);
}
.about-panel a:hover,
#legal-footer a:hover {
  color: #c5e4ff;
  border-bottom-color: rgba(197,228,255,0.65);
}

.about-source {
  font-family: 'Orbitron', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  text-align: center;
}

/* ── How to play / Help screen ───────────────────────────────────── */
.help-screen {
  /* Long, scrollable content: align to top instead of vertically centering.
     BACK lives in the sticky action bar, so it never needs a scroll. */
  margin: 0;
  padding-top: 20px;
  padding-bottom: 12px;
  justify-content: flex-start;
}

.help-body {
  width: min(92vw, 560px);
  text-align: left;
  color: rgba(255,255,255,0.78);
}

.help-lead {
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255,255,255,0.9);
  padding: 14px 16px;
  margin-bottom: 22px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(135deg, rgba(255,51,102,0.08), rgba(51,153,255,0.08) 55%, rgba(51,255,153,0.08));
}
.help-lead b { color: #fff; }

.help-section { margin-bottom: 26px; }

.help-h {
  font-family: 'Orbitron', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #67b8ff;
  padding-bottom: 8px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(103,184,255,0.25);
}

.help-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  margin: -4px 0 14px;
}

/* Basics — stat tiles */
.help-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.help-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 14px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
}
.help-stat-num {
  font-family: 'Orbitron', monospace;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #ff3366, #3399ff, #33ff99);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.help-stat-sm {
  font-size: 12px;
  font-weight: 700;
  margin: 0 3px;
  -webkit-text-fill-color: rgba(255,255,255,0.55);
}
.help-stat-lbl {
  font-size: 12.5px;
  line-height: 1.35;
  color: rgba(255,255,255,0.6);
}
.help-stat b { color: rgba(255,255,255,0.85); }

/* Two-column blocks (controls / modes) */
.help-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.help-col {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
}
.help-col-h {
  font-family: 'Orbitron', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.85);
  margin-bottom: 10px;
}

.help-list { list-style: none; }
.help-list li {
  position: relative;
  font-size: 14px;
  line-height: 1.4;
  padding: 0 0 9px 16px;
  color: rgba(255,255,255,0.72);
}
.help-list li:last-child { padding-bottom: 0; }
.help-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(103,184,255,0.7);
}
.help-list b { color: #fff; }

.help-list kbd,
.help-body kbd {
  display: inline-block;
  font-family: 'Orbitron', monospace;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.06);
  color: #cfe6ff;
}

/* Score & glory */
.help-glory { list-style: none; }
.help-glory li {
  font-size: 14px;
  line-height: 1.45;
  padding: 10px 0;
  color: rgba(255,255,255,0.72);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.help-glory li:last-child { border-bottom: none; }
.help-badge {
  display: inline-block;
  font-family: 'Orbitron', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #ffd700;
  margin-right: 6px;
}

/* Modes */
.help-mode {
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
}
.help-mode-h {
  font-family: 'Orbitron', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.help-mode p {
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(255,255,255,0.65);
}
.help-mode-local { border-color: rgba(51,255,153,0.35); }
.help-mode-local .help-mode-h { color: #33ff99; }
.help-mode-online { border-color: rgba(51,153,255,0.4); }
.help-mode-online .help-mode-h { color: #67b8ff; }

/* Pests */
.help-pests {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.help-pest {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.03);
}
.help-pest-img {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.35);
  border: 2px solid rgba(255,255,255,0.12);
}
.help-pest-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.help-pest-svg svg {
  width: 100%;
  height: 100%;
  padding: 6px;
  object-fit: contain;
}
.help-pest-text { flex: 1 1 auto; min-width: 0; }
.help-pest-name {
  font-family: 'Orbitron', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
  margin-bottom: 4px;
}
.help-pest-lore {
  font-size: 13px;
  line-height: 1.4;
  font-style: italic;
  color: rgba(255,255,255,0.55);
  margin-bottom: 5px;
}
.help-pest-move {
  font-size: 13.5px;
  line-height: 1.4;
  color: rgba(255,255,255,0.78);
}

#legal-footer {
  position: fixed;
  left: 50%;
  bottom: 10px;
  z-index: 65;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 8px;
  width: min(92vw, 760px);
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(0,0,0,0.42);
  color: rgba(255,255,255,0.46);
  font-size: 10px;
  line-height: 1.25;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(6px);
  transition: opacity 0.2s, transform 0.2s;
}
#legal-footer.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
#legal-footer .version-tag {
  flex-basis: 100%;
  font-size: 11px;
}
#legal-footer.version-only > :not(.version-tag) { display: none; }
#legal-footer button {
  border: 0;
  border-bottom: 1px solid rgba(143,201,255,0.35);
  background: transparent;
  color: #8fc9ff;
  font: inherit;
  cursor: pointer;
  padding: 0;
}
#legal-footer button:hover {
  color: #c5e4ff;
  border-bottom-color: rgba(197,228,255,0.65);
}

.menu-screen {
  padding-bottom: 12px;
}
/* Keyboard focus scrolls a control into view above the sticky action bar,
   not underneath it. */
#menu-overlay {
  scroll-padding-bottom: calc(var(--menu-actions-h, 0px) + 8px);
}

/* ── Rematch status ──────────────────────────────────────────────── */
.rematch-status {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  min-height: 20px;
  margin-bottom: 16px;
}

/* ── Countdown ────────────────────────────────────────────────────── */
#countdown-display {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
#countdown-display.active { display: flex; }

#countdown-display .num {
  font-family: 'Orbitron', monospace;
  font-size: clamp(60px, 15vw, 120px);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 40px rgba(255,255,255,0.3);
  animation: countPop 0.6s ease-out forwards;
}

@keyframes countPop {
  0%   { transform: scale(1.6); opacity: 1; }
  100% { transform: scale(1);   opacity: 0.2; }
}

/* ── Golden Boot goalscorer table (set-over / game-over screens) ──── */
.boot-table {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 12px auto 6px;
  max-width: 280px;
  font-family: 'Orbitron', monospace;
  font-size: clamp(11px, 2.6vw, 15px);
}
.boot-table:empty { display: none; }
.boot-title {
  text-align: center;
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 3px;
}
.boot-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 8px;
  border-radius: 5px;
}
.boot-row.leader {
  background: rgba(255, 215, 0, 0.14);
  color: #ffe066;
}
.boot-row .boot-goals {
  font-weight: 700;
  margin-left: 14px;
}

/* ── Elimination attribution list (set-over / game-over screens) ──── */
.elim-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 10px 0 4px;
  font-family: 'Orbitron', monospace;
  font-size: clamp(11px, 2.4vw, 15px);
  letter-spacing: 0.02em;
}
.elim-list:empty { display: none; }
.elim-row {
  opacity: 0.9;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.elim-row .elim-by {
  color: #ff8a3d;
  font-weight: 700;
}

/* ── Hype callout overlay (GOAL / CLUTCH SAVE / RALLY x N) ────────── */
#callout-display {
  position: fixed;
  inset: 0;
  z-index: 62;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 14vh;
  pointer-events: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.25em;
}
#callout-display.active { display: flex; }
#callout-display .callout-text.leaving { animation: calloutLeave 0.3s ease-in forwards !important; }
@keyframes calloutLeave { to { opacity: 0; transform: scale(0.9); } }
/* Older stacked lines shrink a little so the newest reads first. */
#callout-display .callout-text + .callout-text { font-size: clamp(20px, 4.6vw, 40px); opacity: 0.85; }

#callout-display .callout-text {
  font-family: 'Orbitron', monospace;
  font-size: clamp(28px, 7vw, 64px);
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0 0 24px currentColor, 0 2px 6px rgba(0, 0, 0, 0.6);
  animation: calloutPop 1.1s ease-out forwards;
  max-width: 92vw;
  text-align: center;
  line-height: 1.12;
}

@keyframes calloutPop {
  0%   { transform: scale(0.4) translateY(10px); opacity: 0; }
  8%   { transform: scale(1.15) translateY(0);   opacity: var(--callout-op, 1); }
  16%  { transform: scale(1);                     opacity: var(--callout-op, 1); }
  88%  { transform: scale(1);                     opacity: var(--callout-op, 1); }
  100% { transform: scale(1.05);                  opacity: 0; }
}

/* ── Abandon countdown (AI-only phantom game) ────────────────────── */
#abandon-countdown {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 55;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
  font-family: 'Orbitron', monospace;
}
#abandon-countdown.visible { opacity: 1; }

.abandon-label {
  font-size: clamp(14px, 3vw, 22px);
  font-weight: 700;
  color: rgba(255, 80, 80, 0.6);
  letter-spacing: 0.3em;
  margin-bottom: 4px;
}

.abandon-timer {
  font-size: clamp(80px, 20vw, 160px);
  font-weight: 900;
  color: rgba(255, 255, 255, 0.35);
  text-shadow: 0 0 40px rgba(255, 60, 60, 0.25);
  line-height: 1;
}

.abandon-sub {
  font-size: clamp(12px, 2.5vw, 18px);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 4px;
}

/* ── Pause screen ────────────────────────────────────────────────── */
#screen-pause {
  background: rgba(0,0,0,0.75);
  position: fixed;
  inset: 0;
  z-index: 55;
  backdrop-filter: blur(6px);
  overflow-y: auto;
}

#screen-pause h2 {
  font-family: 'Orbitron', monospace;
  font-size: clamp(24px, 5vw, 40px);
  font-weight: 900;
  letter-spacing: 4px;
  margin-bottom: 28px;
  color: rgba(255,255,255,0.8);
}

/* ── Set over (between sets) ──────────────────────────────────────── */
#screen-setover {
  background: rgba(0,0,0,0.88);
  position: fixed;
  inset: 0;
  z-index: 55;
  backdrop-filter: blur(8px);
  overflow-y: auto;
}

#screen-setover h1 {
  font-family: 'Orbitron', monospace;
  font-size: clamp(24px, 5vw, 40px);
  font-weight: 900;
  letter-spacing: 4px;
  margin-bottom: 8px;
}
#screen-setover .winner-text {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
}

/* ── Set scoreboard (tennis-style) ───────────────────────────────── */
.set-scoreboard {
  min-width: 200px;
  margin-bottom: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  background: rgba(0,0,0,0.5);
  overflow: hidden;
}

.set-sb-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-family: 'Orbitron', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.35);
}

.set-sb-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background 0.2s;
}
.set-sb-row:last-child { border-bottom: none; }
.set-sb-row.set-winner {
  background: rgba(255,255,255,0.06);
}

.set-sb-name {
  font-family: 'Orbitron', monospace;
  font-size: 13px;
  font-weight: 700;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.set-sb-wins {
  font-family: 'Orbitron', monospace;
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  min-width: 30px;
  text-align: center;
}

/* ── Game over ────────────────────────────────────────────────────── */
#screen-gameover {
  background: rgba(0,0,0,0.88);
  position: fixed;
  inset: 0;
  z-index: 55;
  backdrop-filter: blur(8px);
  overflow-y: auto;
}

#screen-gameover h1 {
  font-family: 'Orbitron', monospace;
  font-size: clamp(24px, 5vw, 40px);
  font-weight: 900;
  letter-spacing: 4px;
  margin-bottom: 8px;
}
#screen-gameover .winner-text {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}
#screen-gameover .scorer-table {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}
#screen-setover .actions,
#screen-gameover .actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 100%;
  padding: 0 8px;
  box-sizing: border-box;
}
#screen-setover .actions button,
#screen-gameover .actions button {
  padding: 10px 24px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-family: 'Orbitron', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: transform 0.1s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
#screen-setover .actions button:active,
#screen-gameover .actions button:active { transform: scale(0.95); }
#screen-setover .actions button:hover,
#screen-gameover .actions button:hover  { background: rgba(255,255,255,0.15); }
#screen-setover .actions button:disabled,
#screen-gameover .actions button:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
}

/* ── Toast notifications ─────────────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.toast {
  padding: 8px 18px;
  border-radius: 8px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.25s, transform 0.25s;
}
.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast-info {
  background: rgba(51,153,255,0.18);
  border: 1px solid rgba(51,153,255,0.4);
  color: #99ccff;
}
.toast-error {
  background: rgba(255,68,68,0.18);
  border: 1px solid rgba(255,68,68,0.4);
  color: #ff9f9f;
}
.toast-success {
  background: rgba(51,255,153,0.18);
  border: 1px solid rgba(51,255,153,0.4);
  color: #99ffcc;
}

/* ── Smash button (mobile) ────────────────────────────────────────── */
#smash-btn {
  display: none;
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(255,200,50,0.4);
  background: rgba(255,200,50,0.12);
  color: #ffc832;
  font-family: 'Orbitron', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  z-index: 30;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s, box-shadow 0.2s;
}
#smash-btn:active { transform: scale(0.9); }
#smash-btn.available {
  border-color: #ffc832;
  background: rgba(255,200,50,0.25);
  box-shadow: 0 0 20px rgba(255,200,50,0.3);
  animation: smashPulse 0.8s ease-in-out infinite;
}

@keyframes smashPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(255,200,50,0.2); }
  50%      { box-shadow: 0 0 28px rgba(255,200,50,0.5); }
}

/* ── Controls hint (desktop) ──────────────────────────────────────── */
#controls-hint {
  position: fixed;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  color: rgba(255,255,255,0.35);
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  text-align: center;
}
#controls-hint.visible { opacity: 1; }

.hint-mouse {
  color: rgba(255,51,102,0.55);
  font-style: italic;
}

kbd {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: 'Orbitron', monospace;
  font-size: 11px;
}

/* ── Mobile action buttons (music, restart) ──────────────────────── */
#mobile-actions {
  display: none;
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 30;
  flex-direction: column;
  gap: 12px;
  pointer-events: auto;
}

.mobile-action-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.5);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s, background 0.15s, border-color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-action-btn:active { transform: scale(0.88); }

.mobile-action-btn.music-off,
.mobile-action-btn.sfx-off {
  color: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.1);
}

.mobile-audio-row {
  display: flex;
  flex-direction: row;
  gap: 12px;
}

.mobile-quit-btn {
  border-color: rgba(255,68,68,0.35);
  color: rgba(255,68,68,0.6);
  font-size: 16px;
  font-weight: 700;
}
.mobile-quit-btn:active {
  background: rgba(255,68,68,0.15);
}

/* ── Mobile adjustments ───────────────────────────────────────────── */
/* JS adds .mobile-show class; display without relying on media query
   since some high-DPI phones (e.g. Samsung Galaxy S26) may report
   hover:hover and bypass (hover:none) checks. */
#smash-btn.mobile-show { display: flex; align-items: center; justify-content: center; }
#mobile-actions.mobile-show { display: flex; }

/* Also hide controls-hint on narrow touch screens as a CSS fallback */
@media (hover: none) and (pointer: coarse) {
  #controls-hint { display: none; }
}

/* ── Narrow phone HUD adjustments ───────────────────────────────── */
@media (max-width: 480px) {
  #hud {
    gap: 6px;
    top: 6px;
    left: 4px;
    right: 4px;
    transform: none;
    width: auto;
    justify-content: center;
  }
  .score-box {
    padding: 4px 8px;
    min-width: 0;
    flex: 0 1 auto;
    max-width: 33vw;
  }
  .score-box .label {
    font-size: 8px;
    letter-spacing: 0.3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .score-box .value {
    font-size: 20px;
  }

  /* ── Compact menu screens for narrow phones ────────────────────── */
  #screen-difficulty h2,
  #screen-mode h2,
  #screen-online h2,
  #screen-online-wait h2,
  #screen-settings h2,
  #screen-about h2,
  #screen-solo h2,
  #screen-solo-clear h2,
  #screen-solo-lost h2,
  #screen-solo-champion h2,
  #screen-account h2,
  #screen-characters h2,
  #screen-character-detail h2,
  #screen-watch h2,
  #screen-help h2,
  #screen-character-edit h2 {
    margin-bottom: 14px;
    font-size: 14px;
    letter-spacing: 2px;
  }

  .menu-btn {
    width: 220px;
    padding: 10px 0;
    margin-bottom: 8px;
    font-size: 12px;
  }

  .setup-columns {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .setup-col {
    max-width: 260px;
    width: 100%;
  }

  .setup-col-label {
    font-size: 10px;
    margin-bottom: 6px;
  }

  #screen-difficulty {
    margin-top: 8px;
    padding-top: 10px;
  }

  .diff-btn {
    width: 100%;
    padding: 8px 0;
    margin-bottom: 6px;
    font-size: 13px;
  }

  .corner-btn {
    padding: 6px 6px;
    font-size: 10px;
    min-height: 32px;
  }

  .room-code {
    font-size: 15px;
    margin-bottom: 1px;
  }

  .room-code-hint {
    font-size: 10px;
    margin-bottom: 4px;
  }

  .menu-btn-invite {
    font-size: 11px;
    padding: 5px 14px;
    margin-bottom: 6px;
  }

  .status-text {
    font-size: 12px;
    margin-top: 4px;
    min-height: 14px;
  }

  .wait-player-list {
    margin: 6px 0 10px;
    padding: 6px 12px;
    min-width: 200px;
    font-size: 13px;
    line-height: 1.6;
  }

  /* Compact pest panel */
  .pest-panel {
    padding: 6px 8px 4px;
    margin: 6px 0 8px;
  }

  .pest-label {
    font-size: 9px;
    margin-bottom: 4px;
    letter-spacing: 1.5px;
  }

  .preset-btn {
    padding: 5px 8px;
    font-size: 9px;
  }

  .pest-customize-btn {
    padding: 5px 0;
    margin: 3px 0 5px;
    font-size: 9px;
  }

  .pest-btn {
    padding: 5px 10px;
    font-size: 10px;
  }

  .pest-desc {
    font-size: 10px;
    margin-top: 2px;
  }

  /* AI difficulty buttons — match pest panel width */
  #ai-difficulty-picker {
    width: 100%;
  }
  .ai-pick-btns {
    gap: 4px;
    width: 100%;
  }
  .ai-pick-btns .menu-btn {
    width: auto;
    flex: 1;
    padding: 8px 4px;
    font-size: 11px;
    min-width: 0;
  }

  .ai-pick-label {
    font-size: 0.65rem;
    margin-bottom: 2px;
  }

  .wait-actions {
    gap: 2px;
  }

  /* Compact debug controls */
  .debug-bot-btns .menu-btn {
    width: auto;
    font-size: 10px;
    padding: 4px 8px;
  }

  #debug-bot-controls {
    margin-top: 10px;
    padding-top: 8px;
  }

  .version-tag {
    margin-top: 4px;
  }

  .about-panel {
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.35;
  }

  /* Help screen — stack columns, tighten spacing */
  .help-lead { font-size: 14px; padding: 12px 14px; }
  .help-cols { grid-template-columns: 1fr; }
  .help-stats { grid-template-columns: 1fr; gap: 8px; }
  .help-stat {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    text-align: left;
    padding: 10px 14px;
  }
  .help-stat-num { margin-bottom: 0; font-size: 24px; flex: 0 0 auto; }
  .help-pest-img { width: 52px; height: 52px; }
  .help-pest-lore, .help-pest-move { font-size: 12.5px; }

  #legal-footer {
    bottom: 6px;
    width: calc(100vw - 12px);
    padding: 5px 8px;
    font-size: 9px;
  }

  /* Compact pest gallery modal */
  .pest-gallery {
    padding: 16px 18px 14px;
  }

  .pest-gallery-title {
    font-size: 12px;
    margin-bottom: 14px;
  }

  .pest-gallery-grid {
    gap: 10px;
    margin-bottom: 14px;
  }

  .pest-mascot {
    padding: 8px 6px;
    gap: 6px;
  }

  .pest-mascot-img {
    width: 56px;
    height: 56px;
  }

  .pest-mascot-name {
    font-size: 8px;
  }

  .pest-gallery-done {
    padding: 8px 32px;
    font-size: 11px;
  }
}

/* ── Spectator badge ─────────────────────────────────────────── */
.spectator-badge {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  color: #5fcbe8;
  padding: 6px 16px;
  border-radius: 8px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 100;
  font-family: inherit;
  letter-spacing: 1px;
}

.spec-icon {
  font-size: 16px;
}

.spec-leave-btn {
  background: transparent;
  border: 1px solid #5fcbe8;
  color: #5fcbe8;
  padding: 2px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  letter-spacing: 1px;
}

.spec-leave-btn:hover {
  background: rgba(95, 203, 232, 0.15);
}

/* ══ RETRO ARCADE THEME ═══════════════════════════════════════════════
   Activated by <body class="theme-retro"> (themes.js). Presentation only —
   no layout geometry is changed, so gameplay and hit targets are identical
   between themes.

   'Press Start 2P' is a very wide pixel face: applying it to body text would
   break layouts, so it is scoped to chrome (headings, buttons, HUD labels)
   with reduced sizes and applied via font-size overrides rather than to
   long-form copy such as the help screen. */

.theme-retro {
  background: #07070c;
}

.theme-retro h2,
.theme-retro .logo,
.theme-retro .wc-badge,
.theme-retro .menu-btn,
.theme-retro .toggle-btn,
.theme-retro .scorebox .label,
.theme-retro .start-hint {
  font-family: 'Press Start 2P', 'Orbitron', monospace;
  letter-spacing: 0;
}

/* The pixel face runs ~1.6x wider than Orbitron — pull sizes back so nothing
   overflows on narrow phones. */
.theme-retro .logo      { font-size: clamp(1.1rem, 5.2vw, 2.4rem); line-height: 1.5; }
.theme-retro h2         { font-size: clamp(0.75rem, 3.4vw, 1.15rem); }
.theme-retro .menu-btn,
.theme-retro .toggle-btn { font-size: clamp(0.55rem, 2.5vw, 0.72rem); }
.theme-retro .wc-badge  { font-size: clamp(0.5rem, 2.4vw, 0.7rem); }
.theme-retro .start-hint { font-size: clamp(0.55rem, 2.6vw, 0.75rem); }
.theme-retro .scorebox .label { font-size: clamp(0.4rem, 1.9vw, 0.55rem); }

/* Phosphor glow. */
.theme-retro .logo {
  color: #7dffb0;
  text-shadow: 0 0 6px rgba(125, 255, 176, 0.75), 0 0 18px rgba(125, 255, 176, 0.35);
}

/* Attract-mode blink on the INSERT COIN badge. */
.theme-retro .wc-badge {
  color: #ffd84d;
  background: none;
  border: none;
  text-shadow: 0 0 8px rgba(255, 216, 77, 0.6);
  animation: retro-blink 1.1s steps(1, end) infinite;
}
@keyframes retro-blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.15; } }

/* CRT scanlines + vignette. Fixed overlay above everything, never
   interactive, so it cannot swallow clicks or touches. */
.theme-retro::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.28) 0px,
      rgba(0, 0, 0, 0.28) 1px,
      rgba(0, 0, 0, 0) 1px,
      rgba(0, 0, 0, 0) 3px
    ),
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.45) 100%);
}

/* Respect users who ask for less motion: keep the CRT look, drop the blink. */
@media (prefers-reduced-motion: reduce) {
  .theme-retro .wc-badge { animation: none; opacity: 1; }
}

/* ── Segmented picker (settings) ───────────────────────────────────────
   For settings that are a CHOICE rather than on/off. The theme row used
   .toggle-btn, which without an .on/.off class renders dim grey on near-black
   and reads as a disabled/blank button. A segment group shows every option and
   highlights the active one, so the control explains itself. */

.setting-row-stack {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.seg-picker {
  display: flex;
  gap: 6px;
  width: 100%;
}

.seg-opt {
  flex: 1;
  min-width: 0;             /* three segments must be able to shrink */
  padding: 9px 4px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.45);
  color: rgba(255,255,255,0.62);
  font-family: 'Orbitron', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.seg-opt:hover { color: #fff; border-color: rgba(255,255,255,0.4); }
.seg-opt:active { transform: scale(0.97); }

.seg-opt.active {
  color: #33ff99;
  border-color: rgba(51,255,153,0.75);
  background: rgba(51,255,153,0.12);
  box-shadow: 0 0 10px rgba(51,255,153,0.18);
}

/* The pixel face is much wider — shrink segment text so both options fit. */
.theme-retro .seg-opt { font-family: 'Press Start 2P', monospace; font-size: 7px; letter-spacing: 0; }
/* Five segments (menu pests) need tighter padding than the three-way theme
   picker so RELIEF still fits in the pixel face. */
#menu-pests-picker { gap: 4px; }
#menu-pests-picker .seg-opt { padding-left: 2px; padding-right: 2px; }

/* Explain theme-specific display limits (8-bit uses 3-character initials).
   The full name can still be entered and saved in Settings. */
.name-hint {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: rgba(255, 216, 77, 0.85);
  text-align: right;
  padding: 2px 0 6px;
}
.theme-retro .name-hint { font-family: 'Press Start 2P', monospace; font-size: 7px; line-height: 1.6; }
.super-hint {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.6);
  padding: 4px 0 6px;
}
.theme-retro .super-hint { font-family: 'Press Start 2P', monospace; font-size: 7px; line-height: 1.6; }

/* ── Solo Ladder ───────────────────────────────────────────────────── */

/* Pop-up fighters (js/solo-stage.js): they rise beside the ladder in a loose
   ring, turned toward you in the middle, say their line, and duck away. */
.solo-pop {
  position: fixed;
  inset: 0 0 var(--menu-footer-h, 0px) 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.pop-fighter {
  --size: 132px;
  --ring: 0px;
  position: absolute;
  width: var(--size);
  background: none; border: 0; padding: 0; margin: 0;
  color: inherit; font: inherit;
  cursor: pointer;
  pointer-events: auto;
  display: flex; flex-direction: column; align-items: center;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transform: translateY(-50%) translateY(60px) scale(0.2);
  transition: opacity 0.25s, transform 0.5s cubic-bezier(.2, 1.5, .4, 1);
}
/* Hugging the ladder (440px wide) with room for the ring's curve. */
.pop-fighter.side-left  { right: calc(50% + 250px + var(--ring)); }
.pop-fighter.side-right { left:  calc(50% + 250px + var(--ring)); }
.pop-fighter.up { opacity: 1; transform: translateY(-50%) rotate(var(--tilt, 0deg)); }
.pop-fighter.side-left.up  { --tilt: 5deg; }
.pop-fighter.side-right.up { --tilt: -5deg; }
.pop-fighter.down {
  opacity: 0;
  transform: translateY(-50%) translateY(50px) scale(0.4);
  transition: opacity 0.35s ease-in, transform 0.4s ease-in;
}
.pop-body { width: var(--size); height: var(--size); }
.pop-fighter.up .pop-body { animation: popBob 2.4s 0.5s ease-in-out infinite; }
.pop-fighter.side-right.up .pop-body { animation-delay: -0.7s; }
.pop-fighter.hop .pop-body { animation: popHop 0.45s cubic-bezier(.3, 1.6, .5, 1); }
.pop-art {
  width: 100%; height: 100%;
  background-size: cover; background-position: center;
  -webkit-mask-image: radial-gradient(circle at 50% 48%, #000 52%, transparent 70%);
  mask-image: radial-gradient(circle at 50% 48%, #000 52%, transparent 70%);
  filter: drop-shadow(0 0 18px var(--fighter));
}
.pop-fighter.side-right .pop-art { transform: scaleX(-1); }   /* face the middle */
.pop-disc {
  width: 70%; height: 70%; margin: 15% auto 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 46px;
  box-shadow: 0 0 22px var(--fighter);
}
.pop-name {
  margin-top: -10px;
  font-weight: 900; font-size: 13px; letter-spacing: 0.08em;
  text-shadow: 0 2px 0 #07090c; white-space: nowrap;
}
.pop-bubble {
  position: absolute;
  bottom: calc(100% + 4px);
  width: max-content;
  max-width: 230px;
  padding: 8px 12px;
  border-radius: 14px;
  background: #f2d9a6;
  color: #1b1410;
  font-size: 14px; font-weight: 700; font-style: italic; line-height: 1.25;
  text-align: left;
  box-shadow: 0 4px 0 #07090c, 0 0 0 2px var(--fighter, #f2d9a6);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.15s, transform 0.25s cubic-bezier(.2, 1.5, .4, 1);
  pointer-events: none;
}
.pop-fighter.side-left .pop-bubble  { left: 30%;  transform-origin: 10% 100%; }
.pop-fighter.side-right .pop-bubble { right: 30%; transform-origin: 90% 100%; }
.pop-bubble.show { opacity: 1; transform: scale(1); }
.pop-bubble::after {
  content: ''; position: absolute; bottom: -9px;
  border: 9px solid transparent; border-top-color: #f2d9a6; border-bottom: 0;
}
.pop-fighter.side-left .pop-bubble::after  { left: 18px; }
.pop-fighter.side-right .pop-bubble::after { right: 18px; }
/* The talker's face on the ladder. */
.ready-ladder .rung-face { transition: transform 0.2s, box-shadow 0.2s; }
.ready-ladder .rung-face.taunting {
  position: relative; z-index: 1;
  transform: scale(1.6);
  box-shadow: 0 0 0 2px #f2d9a6, 0 0 14px rgba(255, 196, 61, 0.8);
}
@keyframes popBob { 50% { transform: translateY(-6px); } }
@keyframes popHop { 40% { transform: translateY(-24px) rotate(-5deg); } }

/* Not enough room beside the ladder: they peek in from the screen edges. */
@media (max-width: 1000px) {
  .pop-fighter { --size: 96px; }
  .pop-fighter.side-left  { right: auto; left: -18px; }
  .pop-fighter.side-right { left: auto; right: -18px; }
  .pop-name { font-size: 11px; }
  .pop-bubble { max-width: min(220px, 56vw); font-size: 13px; }
  .pop-fighter.side-left .pop-bubble  { left: 55%; }
  .pop-fighter.side-right .pop-bubble { right: 55%; }
}
@media (max-width: 480px) {
  .pop-fighter { --size: 74px; }
  .pop-fighter.side-left  { left: -14px; }
  .pop-fighter.side-right { right: -14px; }
}
@media (prefers-reduced-motion: reduce) {
  .pop-fighter, .pop-fighter.down, .pop-bubble { transition: none; }
  .pop-fighter.up .pop-body, .pop-fighter.hop .pop-body { animation: none; }
}

.solo-blurb {
  font-family: 'Rajdhani', sans-serif;
  font-size: 15px;
  color: rgba(255,255,255,0.65);
  margin-bottom: 6px;
}

.solo-stats {
  font-family: 'Orbitron', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  color: #33ff99;
  min-height: 16px;
  margin-bottom: 14px;
}

.solo-note {
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 14px;
}

.solo-next {
  font-family: 'Orbitron', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 14px;
}

/* Opponent cards on the round-intro screen. */
.solo-cards {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.solo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 130px;
}

/* Phase 1 portraits are generated: a coloured disc with initials. */
.solo-portrait {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Orbitron', monospace;
  font-size: 22px;
  font-weight: 900;
  color: #0a0a0f;
  border: 2px solid rgba(255,255,255,0.25);
}

.solo-card-name {
  font-family: 'Orbitron', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
}

.solo-card-tag {
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  line-height: 1.25;
  color: rgba(255,255,255,0.6);
  text-align: center;
}

/* Champion screen: every opponent beaten, in order. */
.solo-roster {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 320px;
  margin: 0 auto 18px;
}

.solo-roster .solo-portrait {
  width: 40px;
  height: 40px;
  font-size: 13px;
  border-width: 1px;
}

/* Boss-art portraits (js/ladder-art.js). The source art is painted on a near
   -black vignette rather than on transparency, so a plain cover-crop already
   reads as a lit disc against the dark card — no cutout needed. The crop sits
   high because every pose is framed head-above-centre. */
.solo-portrait.has-art {
  background-color: #07070b;
  background-size: 116%;
  background-position: 50% 38%;
  background-repeat: no-repeat;
  filter: brightness(1.1) saturate(1.05);
  box-shadow: 0 0 10px rgba(0,0,0,0.55);
}

.rung-face.has-art {
  display: inline-block;
  width: 26px;
  height: 26px;
  vertical-align: middle;
  margin-right: 3px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.35);
  background-color: #07070b;
  background-size: 128%;
  background-position: 50% 32%;
  background-repeat: no-repeat;
  /* The source vignette is nearly black; at 26px it needs a lift to register
     as a face rather than as a dark chip. */
  filter: brightness(1.3) saturate(1.08);
}

.theme-retro .rung-face.has-art { border-radius: 3px; }

/* Boss face inside a sentence — "Beaten by <face> MAESTRO". */
.inline-face {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: -5px;
  margin-right: 2px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  background-color: #07070b;
  background-size: 130%;
  background-position: 50% 30%;
  background-repeat: no-repeat;
  filter: brightness(1.3) saturate(1.08);
}

.theme-retro .inline-face { border-radius: 3px; }

/* The solo setup panel carries one option row more than it used to (Boss art),
   which on a phone pushed the whole centred panel up until the heading lost its
   clearance from the top of the screen. Buy it back by tightening the block
   itself (here and on `.solo-opts` below) rather than by dropping a row. */
.solo-opts .exp-row { margin-bottom: 4px; }

.theme-retro .solo-card-name,
.theme-retro .solo-stats,
.theme-retro .solo-next { font-family: 'Press Start 2P', monospace; font-size: 8px; letter-spacing: 0; }
.theme-retro .solo-portrait { border-radius: 4px; }   /* discs read as pixels */

/* ── Solo run scoreboard: the ladder rail ──────────────────────────────
   Eight pips, one per round. Cleared rounds carry the colour of the
   character you knocked out, so the rail doubles as a trophy shelf. */

.solo-track {
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.solo-pip {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Orbitron', monospace;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.35);
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(0,0,0,0.4);
  transition: transform 0.2s, box-shadow 0.2s;
}

.solo-pip.cleared {
  color: #0a0a0f;
  border-color: rgba(255,255,255,0.4);
}

.solo-pip.current {
  color: #fff;
  border-color: #33ff99;
  box-shadow: 0 0 10px rgba(51,255,153,0.45);
  animation: solo-pulse 1.4s ease-in-out infinite;
}

/* The pip that just flipped to cleared gets a one-shot pop. */
.solo-pip.just-won { animation: solo-pop 0.55s cubic-bezier(.2,1.4,.4,1) both; }

@keyframes solo-pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 8px rgba(51,255,153,0.35); }
  50%      { transform: scale(1.12); box-shadow: 0 0 16px rgba(51,255,153,0.65); }
}

@keyframes solo-pop {
  0%   { transform: scale(0.6) rotate(-12deg); opacity: 0.3; }
  60%  { transform: scale(1.25) rotate(4deg);  opacity: 1; }
  100% { transform: scale(1) rotate(0);        opacity: 1; }
}

/* Opponent cards rise in, staggered, so a round intro has a beat to it. */
.solo-card { animation: solo-rise 0.42s ease-out both; }
.solo-card:nth-child(2) { animation-delay: 0.12s; }

@keyframes solo-rise {
  from { opacity: 0; transform: translateY(14px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Champion roster pops in one portrait at a time. */
.solo-roster .solo-portrait { animation: solo-pop 0.45s cubic-bezier(.2,1.4,.4,1) both; }
.solo-roster .solo-portrait:nth-child(1) { animation-delay: 0.05s; }
.solo-roster .solo-portrait:nth-child(2) { animation-delay: 0.13s; }
.solo-roster .solo-portrait:nth-child(3) { animation-delay: 0.21s; }
.solo-roster .solo-portrait:nth-child(4) { animation-delay: 0.29s; }
.solo-roster .solo-portrait:nth-child(5) { animation-delay: 0.37s; }
.solo-roster .solo-portrait:nth-child(6) { animation-delay: 0.45s; }
.solo-roster .solo-portrait:nth-child(7) { animation-delay: 0.53s; }
.solo-roster .solo-portrait:nth-child(8) { animation-delay: 0.61s; }

/* Headline beat on the outcome screens. */
#screen-solo-clear.active h2,
#screen-solo-champion.active h2 { animation: solo-slam 0.5s cubic-bezier(.2,1.5,.4,1) both; }

@keyframes solo-slam {
  0%   { opacity: 0; transform: scale(1.6); letter-spacing: 12px; }
  100% { opacity: 1; transform: scale(1);   letter-spacing: normal; }
}

/* Motion is decoration here — never required to read the screen. */
@media (prefers-reduced-motion: reduce) {
  .solo-pip.current,
  .solo-pip.just-won,
  .solo-card,
  .solo-roster .solo-portrait,
  #screen-solo-clear.active h2,
  #screen-solo-champion.active h2 { animation: none; }
}

.theme-retro .solo-pip { border-radius: 2px; font-family: 'Press Start 2P', monospace; font-size: 7px; }

/* ── Character browser / editor ────────────────────────────────────── */

.char-hint {
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 12px;
}

.char-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: 320px;
  margin: 0 auto 16px;
}

.char-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 4px 2px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: border-color 0.15s, transform 0.12s;
}
.char-tile:hover  { border-color: rgba(255,255,255,0.25); }
.char-tile:active { transform: scale(0.95); }

.char-tile .solo-portrait { width: 44px; height: 44px; font-size: 14px; }

.char-tile-name {
  font-family: 'Orbitron', monospace;
  font-size: 8px;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.7);
  text-align: center;
}

.char-tile.is-custom .solo-portrait { border-style: dashed; }

/* Detail card */
.char-detail-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
}
.char-detail-head .solo-portrait { width: 76px; height: 76px; font-size: 24px; }

.char-detail-name {
  font-family: 'Orbitron', monospace;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
}
.char-detail-tag {
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
}

/* Stat bars */
.char-stats { width: 260px; margin: 0 auto 16px; }

.char-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.char-stat-label {
  font-family: 'Orbitron', monospace;
  font-size: 8px;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.5);
  width: 78px;
  text-align: right;
}
.char-stat-track {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.char-stat-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.35s ease-out;
}

/* Editor sliders */
.char-edit-form { width: 280px; margin: 0 auto 14px; }
.char-sliders { margin: 8px 0; }

.char-slider-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
}
.char-slider-row label {
  font-family: 'Orbitron', monospace;
  font-size: 8px;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.5);
  width: 78px;
  text-align: right;
}
.char-slider-row input[type="range"] { flex: 1; }
.char-slider-val {
  font-family: 'Orbitron', monospace;
  font-size: 9px;
  color: #33ff99;
  width: 38px;
  text-align: right;
}

#char-color {
  width: 44px;
  height: 26px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  background: none;
  cursor: pointer;
}

.theme-retro .char-tile-name,
.theme-retro .char-stat-label,
.theme-retro .char-slider-row label { font-family: 'Press Start 2P', monospace; font-size: 6px; }
.theme-retro .char-detail-name { font-family: 'Press Start 2P', monospace; font-size: 11px; }

/* Character portrait in the HUD score box (Solo Phase 3). */
.score-box { position: relative; }

.hud-portrait {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: 0 auto 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Orbitron', monospace;
  font-size: 8px;
  font-weight: 900;
  color: #0a0a0f;
  border: 1px solid rgba(255,255,255,0.3);
}

/* Ladder fighters wear their boss art in the score box too (js/ladder-art.js).
   Slightly larger than the emoji bubble: a 20px crop of a full-body pose is
   below the size where a face still registers. */
.hud-portrait.has-art {
  width: 24px;
  height: 24px;
  background-size: 132%;
  background-position: 50% 30%;
  background-repeat: no-repeat;
  filter: brightness(1.3) saturate(1.08);
}

.score-box.eliminated .hud-portrait { opacity: 0.3; }
.theme-retro .hud-portrait { border-radius: 3px; font-family: 'Press Start 2P', monospace; font-size: 6px; }

/* ── Arcade fighter flourishes (Solo) ──────────────────────────────── */

.solo-vs {
  align-self: center;
  font-family: 'Orbitron', monospace;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #ff3355;
  text-shadow: 0 0 14px rgba(255, 51, 85, 0.7);
  animation: vs-slam 0.5s cubic-bezier(.2,1.6,.4,1) 0.24s both;
}

@keyframes vs-slam {
  0%   { opacity: 0; transform: scale(2.4) rotate(-14deg); }
  100% { opacity: 1; transform: scale(1) rotate(-6deg); }
}

/* FLAWLESS VICTORY earns a gold treatment the ordinary clear does not. */
#solo-clear-title.flawless {
  color: #ffd84d;
  text-shadow: 0 0 12px rgba(255, 216, 77, 0.75), 0 0 28px rgba(255, 216, 77, 0.35);
  animation: flawless-pulse 1.1s ease-in-out infinite alternate;
}

@keyframes flawless-pulse {
  from { text-shadow: 0 0 10px rgba(255,216,77,0.55), 0 0 20px rgba(255,216,77,0.25); }
  to   { text-shadow: 0 0 18px rgba(255,216,77,0.9),  0 0 40px rgba(255,216,77,0.5); }
}

@media (prefers-reduced-motion: reduce) {
  .solo-vs, #solo-clear-title.flawless { animation: none; }
}

.theme-retro .solo-vs { font-family: 'Press Start 2P', monospace; font-size: 16px; }

/* Character dossier. Deliberately narrow and quiet — the stat bars are the
   functional part of the card; the backstory is flavour you can choose to
   read. */
.char-detail-bio {
  font-family: 'Rajdhani', sans-serif;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(255,255,255,0.62);
  max-width: 300px;
  margin: 8px auto 0;
  text-align: left;
}
.theme-retro .char-detail-bio { font-size: 11px; line-height: 1.6; }

/* ── Account screen ────────────────────────────────────────────────── */

.account-status {
  font-family: 'Orbitron', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  color: #33ff99;
  min-height: 16px;
  margin-bottom: 10px;
}

.account-note {
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255,255,255,0.5);
  max-width: 280px;
  margin: 4px auto 8px;
}

.account-name-hint {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(255,255,255,0.4);
  max-width: 280px;
  margin: 0 auto 8px;
}

.account-error {
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  color: #ff4466;
  min-height: 18px;
  margin-bottom: 8px;
}

.theme-retro .account-status { font-family: 'Press Start 2P', monospace; font-size: 7px; }

/* Recovery code — deliberately loud: it is shown exactly once. */
.recovery-box {
  border: 1px solid rgba(255, 216, 77, 0.5);
  border-radius: 8px;
  background: rgba(255, 216, 77, 0.07);
  padding: 12px;
  margin: 0 auto 12px;
  max-width: 300px;
}
.recovery-label {
  font-family: 'Orbitron', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  color: #ffd84d;
  margin-bottom: 6px;
}
.recovery-code {
  font-family: 'Orbitron', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  color: #fff;
  white-space: nowrap;           /* the 23-char code must stay on one line */
  user-select: all;              /* let the player select and copy it */
  -webkit-user-select: all;
  margin-bottom: 8px;
}
.recovery-hint {
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255,255,255,0.65);
  margin-bottom: 10px;
}
.theme-retro .recovery-code { font-family: 'Press Start 2P', monospace; font-size: 8px; }
.recovery-box .menu-btn { margin-left: auto; margin-right: auto; }

/* ── Full-screen menus over a live canvas ──────────────────────────────
   Solo, account and character screens sit on top of a canvas that may still
   be showing the last frame of a finished match. Without a backdrop the old
   wall labels, ball and callouts bleed through the new screen.

   Keep the shared menu convention: short screens are vertically centred.
   `safe center` falls back to start alignment when a screen is taller than
   the viewport, so the account/editor/roster pages remain fully scrollable. */

#screen-solo.active,
#screen-solo-clear.active,
#screen-solo-lost.active,
#screen-solo-champion.active,
#screen-account.active,
#screen-characters.active,
#screen-character-detail.active,
#screen-character-edit.active {
  position: fixed;
  /* Like #menu-overlay, stop above the legal footer (see updateMenuChrome). */
  inset: 0 0 var(--menu-footer-h, 0px) 0;
  background:
    radial-gradient(ellipse at center, rgba(10,10,15,0.94) 0%, rgba(6,6,10,0.99) 70%),
    #06060a;
  overflow-y: auto;
  scroll-padding-bottom: calc(var(--menu-actions-h, 0px) + 8px);
  margin: 0;
  padding: 24px 16px 12px;
  justify-content: safe center;
}

/* ── Prize ladder (Who-Wants-To-Be-A-Millionaire style) ────────────────
   Climbed bottom-to-top, so the top of the list reads as the top of the
   climb. The bar length is the point: effort visibly rises with the rung. */

.solo-ladder {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  max-width: 340px;
  margin: 0 auto 16px;
}

.ladder-rung {
  display: grid;
  grid-template-columns: 20px 46px 1fr 54px;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.02);
  opacity: 0.45;
  transition: opacity 0.2s, border-color 0.2s;
}

/* Cleared rungs stay lit — the climb so far should be visible. */
.ladder-rung.done {
  opacity: 0.85;
  border-color: rgba(51,255,153,0.35);
  background: rgba(51,255,153,0.07);
}

.ladder-rung.current {
  opacity: 1;
  border-color: #33ff99;
  background: rgba(51,255,153,0.14);
  box-shadow: 0 0 12px rgba(51,255,153,0.25);
}

/* The last rung is the prize. */
.ladder-rung.final .rung-num { color: #ffd84d; }
.ladder-rung.final { border-color: rgba(255,216,77,0.28); }
.ladder-rung.final.current { border-color: #ffd84d; box-shadow: 0 0 14px rgba(255,216,77,0.3); }

.rung-num {
  font-family: 'Orbitron', monospace;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
  text-align: right;
}

.rung-faces { font-size: 15px; letter-spacing: 1px; white-space: nowrap; }

.rung-name {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rung-bar {
  height: 5px;
  border-radius: 3px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}

/* Effort colour ramps green -> amber -> red as the rungs climb. */
.rung-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #33ff99 0%, #ffc832 55%, #ff3366 100%);
}

/* Emoji portraits need no dark text colour and shouldn't be clipped round. */
/* Emoji portraits must NOT inherit the dark initials colour. Safari applies
   `color` to emoji glyphs, so `transparent` rendered these bubbles empty while
   the smaller ladder faces (which never set a colour) drew correctly. */
.solo-portrait.is-emoji { color: #fff; font-size: 30px; line-height: 1; }
.solo-card .solo-portrait.is-emoji { font-size: 34px; }
.char-tile .solo-portrait.is-emoji { font-size: 22px; }
.solo-roster .solo-portrait.is-emoji { font-size: 20px; }
.hud-portrait.is-emoji { font-size: 12px; }

.theme-retro .rung-name { font-family: 'Press Start 2P', monospace; font-size: 6px; }
.theme-retro .rung-num  { font-family: 'Press Start 2P', monospace; font-size: 7px; }

/* Solo run options + the HOW-TO-PLAY power-up list. */
.solo-opts { width: 100%; max-width: 260px; margin: 0 auto 6px; }

.help-powerups { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }

.help-powerup {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 5px 8px;
  border-radius: 6px;
  border-left: 3px solid transparent;
  background: rgba(255,255,255,0.03);
}
.help-powerup.is-good { border-left-color: #4dd2ff; }
.help-powerup.is-bad  { border-left-color: #ff8c42; }

.help-powerup-emoji { font-size: 18px; line-height: 1.2; }
.help-powerup-text  { font-size: 13px; line-height: 1.35; color: rgba(255,255,255,0.75); }
.help-powerup-text i { color: rgba(255,255,255,0.45); font-style: normal; text-transform: uppercase; font-size: 11px; }

/* ── Solo identity + richer intro cards ────────────────────────────── */

.solo-identity { width: 100%; max-width: 300px; margin: 0 auto 10px; }
/* Progress + account status: a sub-line of the PLAYING AS row. */
.solo-identity .setting-row { border-bottom: 0; padding-bottom: 2px; }
.solo-identity .solo-stats {
  min-height: 0;
  margin: 0 0 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 10px;
  line-height: 1.4;
  text-align: right;
  color: rgba(51,255,153,0.8);
}
/* Run Setup: FIGHTERS… sits after the run options, before START AT ROUND. */
#screen-solo-advanced > #btn-solo-characters { margin-top: 6px; }

.solo-avatar-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; }

.solo-avatars { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; justify-content: flex-end; }

.solo-avatar {
  font-size: 17px;
  line-height: 1;
  padding: 3px 4px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.4);
  cursor: pointer;
}
.solo-avatar.active { border-color: #33ff99; background: rgba(51,255,153,0.15); }


/* Your own card is the anchor of the line-up. */
.solo-card.is-you .solo-card-name { color: #fff; }
.solo-card.is-you { opacity: 1; }

.card-stats { width: 100%; margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }

.card-stat { display: flex; align-items: center; gap: 5px; }

.card-stat-label {
  font-family: 'Orbitron', monospace;
  font-size: 6.5px;
  letter-spacing: 0.4px;
  color: rgba(255,255,255,0.45);
  width: 58px;
  text-align: right;
}

.card-stat-track {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: rgba(255,255,255,0.09);
  overflow: hidden;
}
.card-stat-fill { display: block; height: 100%; border-radius: 3px; }

.card-bio {
  margin-top: 7px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  line-height: 1.35;
  color: rgba(255,255,255,0.55);
  text-align: left;
}

#solo-clear-detail i, #solo-lost-detail i { color: rgba(255,255,255,0.85); }

.theme-retro .card-stat-label { font-family: 'Press Start 2P', monospace; font-size: 5px; }
.theme-retro .solo-avatar { border-radius: 2px; }

/* ── Difficulty level ────────────────────────────────────────────────
   One number the player can read at a glance. The stat bars say HOW an
   opponent is hard; this says HOW MUCH, which is the question actually being
   asked when the intro card appears. */
.solo-card-level {
  display: inline-block;
  margin: 4px auto 2px;
  padding: 2px 9px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.09em;
  opacity: 0.95;
}
.solo-card-level.lvl-low  { color: #6ee7a0; }
.solo-card-level.lvl-mid  { color: #f2d05a; }
.solo-card-level.lvl-high { color: #ff5c7a; }

.rung-level {
  flex: 0 0 auto;
  min-width: 46px;
  text-align: right;
  font-size: 10px;
  letter-spacing: 0.06em;
  opacity: 0.6;
}

/* ── Solo run-setup pickers ──────────────────────────────────────────── */
.solo-opts .seg { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.solo-opts .seg-opt {
  /* flex-shrink:0 + nowrap: six theme buttons in the narrow right-hand column
     of an exp-row were shrinking past their own text and overlapping into an
     unreadable smear. */
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 4px 9px; font-size: 10px; letter-spacing: 0.05em;
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 4px;
  background: transparent; color: rgba(255, 255, 255, 0.6); cursor: pointer;
}

/* A control with too many options for a side-by-side row gets the full width:
   label on its own line, options wrapping underneath. */
.solo-opts .exp-row-stack {
  display: block;
  margin: 12px 0 4px;
  text-align: center;
  /* Break out of the panel's 260px cap. Six theme names cannot share that
     column without wrapping one-per-line, which reads as a list of failures
     rather than a set of choices. */
  width: 420px;
  max-width: 92vw;
  margin-left: 50%;
  transform: translateX(-50%);
}
.solo-opts .exp-row-stack .exp-name {
  display: block;
  margin-bottom: 7px;
  text-align: center;
}
.solo-opts .exp-row-stack .seg { justify-content: center; }
.solo-opts .seg-opt.active {
  border-color: #4dd2ff; color: #4dd2ff; background: rgba(77, 210, 255, 0.1);
}
/* Solo-only themes are marked so it is obvious they are not global. */
.solo-opts .seg-opt.solo-only::after { content: ' \2726'; opacity: 0.7; }
.solo-mode-desc {
  font-size: 10px; line-height: 1.45; opacity: 0.55;
  margin: -2px 0 8px; text-align: right;
}

/* ── THE TOURNEY ─────────────────────────────────────────────────────
   Tournament ground: banner crimson and gold on deep green, heavy serif
   display type. */
.theme-tourney { --tp-accent: #d4a02a; }
.theme-tourney .logo {
  color: #d4a02a; font-family: Georgia, 'Times New Roman', serif;
  letter-spacing: 0.06em; text-shadow: 0 2px 0 #6b2020;
}
.theme-tourney .wc-badge { color: #d4a02a; border-color: rgba(212, 160, 42, 0.5); }
.theme-tourney h2 { font-family: Georgia, 'Times New Roman', serif; color: #e8d9a8; }
.theme-tourney .menu-btn-start { border-color: #d4a02a; color: #d4a02a; }
.theme-tourney .solo-rung.current { border-color: #d4a02a; box-shadow: 0 0 12px rgba(212, 160, 42, 0.35); }
.theme-tourney .rung-fill { background: linear-gradient(90deg, #6b2020, #d4a02a); }
.theme-tourney .solo-card-name { font-family: Georgia, 'Times New Roman', serif; }
.theme-tourney #callout-display { font-family: Georgia, 'Times New Roman', serif; }

/* ── THE TOWER ───────────────────────────────────────────────────────
   Torchlit stone: warm amber low, colder the higher you get. */
.theme-tower { --tp-accent: #ffa94d; }
.theme-tower .logo { color: #ffa94d; letter-spacing: 0.14em; text-shadow: 0 0 18px rgba(255, 169, 77, 0.45); }
.theme-tower .wc-badge { color: #ffa94d; border-color: rgba(255, 169, 77, 0.45); }
.theme-tower h2 { color: #ffd9a8; letter-spacing: 0.1em; }
.theme-tower .menu-btn-start { border-color: #ffa94d; color: #ffa94d; }
/* Cleared floors dim rather than highlight — you are leaving them behind. */
.theme-tower .solo-rung.done { opacity: 0.32; }
.theme-tower .solo-rung.current { border-color: #ffa94d; box-shadow: 0 0 14px rgba(255, 169, 77, 0.4); }
.theme-tower .rung-fill { background: linear-gradient(90deg, #ffa94d, #6ea8ff); }
.theme-tower .solo-ladder { background: linear-gradient(180deg, rgba(110, 168, 255, 0.07), transparent); }

/* ── LUCHA LIBRE ─────────────────────────────────────────────────────
   Ring canvas and heavy black outlines; the three mask colours carry
   player identity. */
.theme-lucha { --tp-accent: #e63946; }
.theme-lucha .logo {
  color: #f1c40f; -webkit-text-stroke: 2px #111; text-stroke: 2px #111;
  letter-spacing: 0.05em; text-shadow: 3px 3px 0 #e63946;
}
.theme-lucha .wc-badge { color: #f1c40f; border-color: rgba(241, 196, 15, 0.5); letter-spacing: 0.12em; }
.theme-lucha h2 { color: #f1c40f; -webkit-text-stroke: 1px #111; }
.theme-lucha .menu-btn-start { border-color: #e63946; color: #f1c40f; background: rgba(230, 57, 70, 0.14); }
.theme-lucha .score-box { border-width: 2px; }
.theme-lucha #callout-display { -webkit-text-stroke: 1.5px #111; letter-spacing: 0.06em; }

/* ── GOPHERITO (house look) ──────────────────────────────────────────
   Gopherito's world, taken from the Solo ladder portraits and the pest
   sprites: gopher teal (#47c5d3) with tan-muzzle parchment (#f2d9a6) and
   champion gold (#ffc43d) on a dark stage, everything outlined in heavy ink
   (#07090c) like the cartoons, lettered in Lilita One. Buttons are "stickers":
   an ink edge and a hard drop that presses down when tapped. */
.theme-gopherito { --tp-accent: #47c5d3; }
body.theme-gopherito { background: #0b0d10; }   /* == the canvas edge (themes.js look.bg) */

.theme-gopherito :is(h2, .menu-btn, .toggle-btn, .seg-opt, .diff-btn, .corner-btn, .preset-btn,
  .pest-btn, .settings-link-btn, .settings-subhead, .setup-col-label, .help-h, .help-col-h,
  .help-mode-h, .help-pest-name, .pest-label, .pest-toggle-name, .pest-gallery-title,
  .pest-mascot-name, .room-code, .readonly-name, .quick-title, .score-box .label,
  .score-box .value, .ready-title, .solo-vs, .solo-card-name, .rung-name, .pts-num,
  .rank-chip-name, #countdown-display .num, #callout-display .callout-text,
  #screen-title .wc-badge, #screen-title .start-hint) {
  font-family: 'Lilita One', 'Rajdhani', sans-serif;
  font-weight: 400;
}

.theme-gopherito #screen-title .logo {
  font-family: 'Lilita One', 'Rajdhani', sans-serif;
  font-weight: 400;
  font-size: clamp(36px, 8.4vw, 68px);
  letter-spacing: 0.02em;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: #47c5d3;
  -webkit-text-stroke: 3px #07090c;
  paint-order: stroke fill;
  text-shadow: 0 5px 0 #07090c, 0 0 36px rgba(255, 196, 61, 0.16);
}
.theme-gopherito #screen-title .logo .logo-kicker {
  color: #ffc43d;
  -webkit-text-stroke: 2px #07090c;
  letter-spacing: 0.16em;
  text-shadow: 0 3px 0 #07090c;
  margin-bottom: 4px;
}
.theme-gopherito #screen-title .wc-badge {
  color: #f2d9a6;
  text-shadow: none;
  letter-spacing: 0.22em;
  opacity: 0.85;
}
.theme-gopherito #screen-title .subtitle { color: rgba(242, 217, 166, 0.55); }
.theme-gopherito #screen-title .start-hint { color: #ffc43d; letter-spacing: 0.12em; font-size: 17px; }

.theme-gopherito h2 { color: #f2d9a6; letter-spacing: 0.08em; text-shadow: 0 3px 0 #07090c; }

.theme-gopherito .menu-btn {
  font-size: 16px;
  letter-spacing: 0.08em;
  color: #f2d9a6;
  background: #16262b;
  border: 2px solid #07090c;
  border-radius: 14px;
  box-shadow: 0 4px 0 #07090c, inset 0 0 0 2px rgba(71, 197, 211, 0.5);
  backdrop-filter: none;
}
.theme-gopherito .menu-btn:hover { background: #1c3137; }
.theme-gopherito .btn-ai-diff.active,
.theme-gopherito .btn-ai-diff.active:hover {
  color: #07090c;
  background: #ffc43d;
  box-shadow: 0 4px 0 #07090c, inset 0 -3px 0 rgba(7, 9, 12, 0.22);
}
.theme-gopherito .menu-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #07090c, inset 0 0 0 2px rgba(71, 197, 211, 0.5); }
.theme-gopherito .menu-btn-start {
  color: #07090c;
  background: #47c5d3;
  box-shadow: 0 4px 0 #07090c, inset 0 -3px 0 rgba(7, 9, 12, 0.22);
}
.theme-gopherito .menu-btn-start:hover { background: #5fd3df; }
.theme-gopherito .menu-btn-start:active { box-shadow: 0 1px 0 #07090c; }
.theme-gopherito .menu-btn-secondary {
  color: rgba(242, 217, 166, 0.85);
  background: rgba(242, 217, 166, 0.05);
  box-shadow: 0 4px 0 #07090c, inset 0 0 0 2px rgba(242, 217, 166, 0.22);
}
.theme-gopherito .menu-btn-quit { color: #ff8a7a; box-shadow: 0 4px 0 #07090c, inset 0 0 0 2px rgba(255, 106, 90, 0.35); }

.theme-gopherito .score-box {
  background: rgba(7, 9, 12, 0.82);
  border: 2px solid #07090c;
  border-radius: 12px;
  box-shadow: 0 3px 0 #07090c, inset 0 0 0 1px rgba(242, 217, 166, 0.14);
}
.theme-gopherito .score-box .label { color: #f2d9a6; opacity: 0.75; letter-spacing: 0.06em; }
.theme-gopherito .score-box .value { -webkit-text-stroke: 1.5px #07090c; paint-order: stroke fill; }

.theme-gopherito #callout-display .callout-text {
  -webkit-text-stroke: 3px #07090c;
  paint-order: stroke fill;
  letter-spacing: 0.04em;
}
.theme-gopherito #countdown-display .num { -webkit-text-stroke: 4px #07090c; paint-order: stroke fill; }

/* Results screens: the same lettering and sticker buttons. */
.theme-gopherito :is(#screen-gameover, #screen-setover) h1 {
  font-family: 'Lilita One', 'Rajdhani', sans-serif;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: #f2d9a6;
  text-shadow: 0 4px 0 #07090c;
}
.theme-gopherito :is(#screen-gameover, #screen-setover) .winner-text {
  font-family: 'Lilita One', 'Rajdhani', sans-serif;
  font-weight: 400;
  letter-spacing: 0.04em;
}
.theme-gopherito :is(#screen-gameover, #screen-setover) .actions button {
  font-family: 'Lilita One', 'Rajdhani', sans-serif;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: #f2d9a6;
  background: #16262b;
  border: 2px solid #07090c;
  border-radius: 12px;
  box-shadow: 0 4px 0 #07090c, inset 0 0 0 2px rgba(71, 197, 211, 0.45);
}
.theme-gopherito :is(#screen-gameover, #screen-setover) .actions button:hover { background: #1c3137; }
.theme-gopherito :is(#screen-gameover, #screen-setover) .actions button:active { transform: translateY(3px); box-shadow: 0 1px 0 #07090c; }

/* Solo ladder: the champion's gold, the gopher's teal. */
.theme-gopherito .solo-rung.current { border-color: #ffc43d; box-shadow: 0 0 0 2px #07090c, 0 0 14px rgba(255, 196, 61, 0.35); }
.theme-gopherito .rung-fill { background: linear-gradient(90deg, #47c5d3, #ffc43d); }
.theme-gopherito .ready-title { letter-spacing: 0.03em; -webkit-text-stroke: 2px #07090c; paint-order: stroke fill; }
.theme-gopherito .seg-opt.active,
.theme-gopherito .toggle-btn.on { border-color: #47c5d3; color: #47c5d3; }

/* Dev round picker — many small buttons, so it needs a tighter grid. */
#solo-dev-rounds .seg-opt { min-width: 26px; padding: 3px 6px; text-align: center; }
.solo-opts .exp-row-stack.dev-only .exp-name { color: #ffb84d; opacity: 0.8; }

/* ── Eliminated fighter ──────────────────────────────────────────────
   The round result shows the SAME three faces as the intro, with an X over
   whoever went out — the outcome reads against the line-up the player was
   just looking at, rather than a lone portrait of the winner. */
.solo-card.is-out { position: relative; opacity: 0.5; }
.solo-card.is-out .solo-portrait { filter: grayscale(0.8); }
.solo-card-x {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  font-size: 54px;
  line-height: 1;
  color: #ff3355;
  text-shadow: 0 0 14px rgba(255, 51, 85, 0.8);
  pointer-events: none;
}

/* The page background stays BLACK in every theme. The field is drawn on a
   black canvas, so any tint shows up as a mismatched border around the play
   area and reads as a rendering fault. Themes express themselves through
   accent colour and type, never through the backdrop. */
body.theme-tourney,
body.theme-tower,
body.theme-lucha,
body.theme-retro { background: #0a0a0f; }

/* ── HUD power-up badge ──────────────────────────────────────────────
   Says WHO is under an effect. Without it a shrinking paddle or inverted
   controls arrive with nothing on screen to explain them — and an effect on
   an opponent is invisible entirely. */
.score-box .hud-effects {
  display: none;
  font-size: 15px;
  line-height: 1;
  margin-left: 4px;
}
.score-box .hud-effects.active {
  display: inline-block;
  animation: hud-effect-in 180ms ease-out;
}
.score-box .hud-effects.expiring { animation: hud-effect-blink 400ms steps(2, end) infinite; }
@keyframes hud-effect-in { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes hud-effect-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* ── Confetti ────────────────────────────────────────────────────────
   The end of a run is the payoff for 10-20 minutes of play; it should read as
   a celebration rather than a status line. Self-cleaning and pointer-inert so
   it can never sit on top of the next screen. */
#confetti-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
  display: none;
}
#confetti-layer.active { display: block; }
.confetto {
  position: absolute;
  top: -14px;
  width: 8px;
  height: 14px;
  border-radius: 1px;
  opacity: 0;
  animation-name: confetti-fall;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes confetti-fall {
  0%   { opacity: 0; transform: translateY(-10vh) rotate(0deg); }
  8%   { opacity: 1; }
  100% { opacity: 0.9; transform: translateY(105vh) rotate(720deg); }
}
h2.is-champion {
  animation: champion-pop 620ms cubic-bezier(0.2, 1.4, 0.4, 1) both;
  text-shadow: 0 0 22px currentColor;
}
@keyframes champion-pop {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .confetto, h2.is-champion { animation: none; }
  #confetti-layer { display: none !important; }
}
/* Keep the game inaccessible until the mandatory startup check succeeds. */
body.checking-update > :not(#startup-update) { visibility: hidden !important; }
#startup-update {
  position: fixed;
  inset: 0;
  z-index: 20001; /* above the studio splash: a required update can arrive mid-intro */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  background: #0a0a0f;
  color: #fff;
}
#startup-update[hidden] { display: none; }
#startup-update.is-updating #startup-update-message {
  max-width: 32ch;
  font-size: clamp(20px, 4vw, 28px);
  line-height: 1.5;
  animation: update-fade-in 350ms ease-out both;
}
#startup-update.is-leaving #startup-update-message {
  animation: update-fade-out 350ms ease-in both;
}
@keyframes update-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes update-fade-out { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  #startup-update.is-updating #startup-update-message { animation: none; }
}

#local-only-notice {
  max-width: 420px;
  margin-bottom: 12px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.4;
}
#local-only-notice p { margin: 0 0 8px; }

/* ── Advanced disclosure (Solo + Game Setup) ─────────────────────── */
.menu-advanced {
  margin-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 6px;
}
.menu-advanced > summary {
  cursor: pointer;
  list-style: none;
  font-family: 'Orbitron', monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.6);
  padding: 6px 0;
  text-align: center;
}
.menu-advanced > summary::-webkit-details-marker { display: none; }
.menu-advanced > summary::before { content: '\25B8  '; }
.menu-advanced[open] > summary::before { content: '\25BE  '; }
.menu-advanced > summary:hover,
.menu-advanced > summary:focus-visible { color: #fff; }
.solo-start-note {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  min-height: 1.2em;
  margin-top: 4px;
}

/* ── Ladder abandon confirmation ───────────────────────────────── */
.solo-abandon-modal {
  width: min(400px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  margin: auto;
  padding: 28px 24px 20px;
  overflow-y: auto;
  color: #eee;
  background: #12121c;
  border: 2px solid var(--tp-accent, #39f);
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
  font-family: 'Rajdhani', sans-serif;
  text-align: center;
}
.solo-abandon-modal::backdrop { background: rgba(5, 5, 12, 0.82); }
.solo-abandon-modal h2 {
  margin: 0 0 16px;
  font-family: 'Orbitron', monospace;
  font-size: 18px;
  letter-spacing: 2px;
  line-height: 1.5;
}
.solo-abandon-modal p { margin: 0 0 24px; font-size: 18px; line-height: 1.5; }
.solo-abandon-modal .menu-btn { max-width: 100%; margin: 12px auto; }
.solo-abandon-modal .menu-btn:focus-visible {
  outline: 2px solid var(--tp-accent, #39f);
  outline-offset: 4px;
}
.theme-gopherito .solo-abandon-modal {
  background: #16262b; color: #f2d9a6;
  border: 3px solid #07090c;
  box-shadow: 0 6px 0 #07090c, inset 0 0 0 2px #47c5d3;
}
.theme-gopherito .solo-abandon-modal h2 { font-family: 'Lilita One', 'Rajdhani', sans-serif; font-weight: 400; }
.theme-retro .solo-abandon-modal { background: #07070c; border-radius: 2px; }
.theme-retro .solo-abandon-modal h2 { font-family: 'Press Start 2P', monospace; font-size: 12px; letter-spacing: 0; }
.theme-tourney .solo-abandon-modal { background: #101e18; }
.theme-tourney .solo-abandon-modal h2 { font-family: Georgia, 'Times New Roman', serif; }
.theme-tower .solo-abandon-modal { background: #191612; }
.theme-lucha .solo-abandon-modal { border-width: 3px; box-shadow: 6px 6px 0 #111; }

/* ── Name editor (PLAYING AS) ───────────────────────────────────── */
.readonly-name[role="button"] { cursor: pointer; }
.readonly-name[role="button"]::after { content: ' \270E'; opacity: 0.55; font-size: 0.85em; }
.name-modal {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 5, 12, 0.72);
  padding: 16px;
}
.name-modal[hidden] { display: none; }
.name-modal-box {
  width: min(360px, 100%);
  background: #12121c;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  padding: 18px 18px 12px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}
.name-modal-box h3 {
  font-family: 'Orbitron', monospace; letter-spacing: 0.12em;
  font-size: 15px; margin: 0 0 12px; color: #fff;
}
.name-modal-row { display: flex; gap: 8px; }
.name-modal-row input {
  flex: 1; min-width: 0;
  font-family: 'Orbitron', monospace; font-size: 20px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; text-align: center;
  background: #0a0a12; color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 8px; padding: 10px;
}
.name-modal-row input:focus { outline: 2px solid #4dd2ff; outline-offset: 1px; }
.name-modal-dice {
  font-size: 22px; width: 48px; border-radius: 8px; cursor: pointer;
  background: #1c1c2a; border: 1px solid rgba(255, 255, 255, 0.25); color: #fff;
}
.name-modal-dice:hover { background: #262638; }
.name-modal-hint { font-size: 11px; color: rgba(255, 255, 255, 0.5); margin: 6px 0 10px; }
.name-modal-actions .menu-btn { margin: 6px auto; }

/* ── Solo round intro (cast) ────────────────────────────────────── */
.cast-intro {
  position: fixed; inset: 0; z-index: 70;
  pointer-events: none;          /* the intro screen underneath stays usable */
  background: radial-gradient(ellipse at center, #0b0b16 0%, #000 75%);
  overflow: hidden;
  animation: castFadeIn 0.25s ease-out;
}
.cast-intro[hidden] { display: none; }
.cast-intro.leaving { animation: castFadeOut 0.28s ease-in forwards; }
@keyframes castFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes castFadeOut { to { opacity: 0; } }
.cast-skip {
  pointer-events: auto;
  position: absolute; right: 16px; bottom: max(16px, env(safe-area-inset-bottom));
  font-family: 'Orbitron', monospace; font-size: 13px; letter-spacing: 0.12em;
  color: #fff; background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 20px;
  padding: 8px 16px; cursor: pointer;
}
.cast-skip:hover { background: rgba(255, 255, 255, 0.18); }
.cast-stage {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.cast-title {
  position: absolute; top: 42%; left: 0; right: 0; text-align: center;
  font-family: 'Orbitron', monospace; font-weight: 900;
  font-size: clamp(34px, 9vw, 84px); letter-spacing: 0.08em; color: #fff;
  text-shadow: 0 0 30px rgba(255, 51, 85, 0.8);
  animation: castTitleIn 0.6s cubic-bezier(.2, 1.4, .4, 1) both;
  transition: top 0.45s ease, font-size 0.45s ease, opacity 0.45s ease;
}
.cast-title.cast-fight { top: 56%; color: #ffd84d; text-shadow: 0 0 30px rgba(255, 216, 77, 0.8); }
.cast-title.small { top: 9%; font-size: clamp(18px, 4vw, 30px); opacity: 0.8; }
.cast-note {
  margin-top: 0.35em;
  font-family: 'Rajdhani', sans-serif; font-weight: 700;
  font-size: clamp(13px, 2.4vw, 20px); letter-spacing: 0.25em;
  color: #ffd84d; text-shadow: 0 0 12px rgba(255, 216, 77, 0.5);
}
.cast-title.small .cast-note { font-size: clamp(10px, 1.6vw, 13px); }
.theme-retro .cast-note { font-family: 'Press Start 2P', monospace; font-size: clamp(8px, 1.6vw, 12px); letter-spacing: 0.1em; }
@keyframes castTitleIn { from { transform: scale(2.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.cast-hero {
  position: absolute;
  display: flex; align-items: center; gap: clamp(14px, 3vw, 32px);
  max-width: min(720px, 92vw);
  animation-duration: 0.55s; animation-fill-mode: both;
  animation-timing-function: cubic-bezier(.2, 1.1, .3, 1);
}
.cast-hero.from-left { animation-name: castInLeft; }
.cast-hero.from-right { animation-name: castInRight; flex-direction: row-reverse; text-align: right; }
.cast-hero.out { animation: castOut 0.35s ease-in forwards; }
@keyframes castInLeft { from { transform: translateX(-70vw) skewX(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes castInRight { from { transform: translateX(70vw) skewX(12deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes castOut { to { transform: scale(0.85); opacity: 0; } }
.cast-face.solo-portrait {
  width: clamp(110px, 26vw, 200px); height: clamp(110px, 26vw, 200px);
  font-size: clamp(48px, 12vw, 96px);
  border-width: 4px; flex-shrink: 0;
  box-shadow: 0 0 40px currentColor;
}
.cast-face.has-art { background-size: cover; background-position: center; }
.cast-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cast-kicker {
  font-family: 'Orbitron', monospace; font-size: 12px; letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.6);
}
.cast-name {
  font-family: 'Orbitron', monospace; font-weight: 900;
  font-size: clamp(30px, 8vw, 68px); line-height: 1; letter-spacing: 0.03em;
  text-shadow: 0 0 24px currentColor;
}
.cast-level { font-family: 'Orbitron', monospace; font-size: 14px; color: #f2d05a; letter-spacing: 0.1em; }
.cast-tag { font-size: clamp(14px, 3.2vw, 20px); font-style: italic; color: rgba(255, 255, 255, 0.85); }
.cast-lineup { display: flex; align-items: center; gap: clamp(8px, 2.4vw, 24px); }
.cast-lineup-cell {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  animation: castSlam 0.45s cubic-bezier(.2, 1.6, .4, 1) both;
}
.cast-lineup-cell .solo-portrait { width: clamp(64px, 18vw, 120px); height: clamp(64px, 18vw, 120px); font-size: clamp(28px, 8vw, 54px); }
.cast-lineup-cell.is-you .solo-portrait { box-shadow: 0 0 0 3px #fff; }
.cast-lineup-name { font-family: 'Orbitron', monospace; font-weight: 800; font-size: clamp(12px, 3vw, 18px); }
.cast-vs {
  font-family: 'Orbitron', monospace; font-weight: 900; font-size: clamp(22px, 6vw, 44px);
  color: #ff3355; text-shadow: 0 0 18px #ff3355;
  animation: castSlam 0.45s cubic-bezier(.2, 1.6, .4, 1) both;
}
@keyframes castSlam { from { transform: scale(3); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ── Intro cards: stats + story on hover / focus / tap ─────────── */
.solo-card.has-more { position: relative; cursor: help; }
.solo-card .card-more { display: none; }
.solo-card.has-more:hover .card-more,
.solo-card.has-more:focus-within .card-more,
.solo-card.has-more:focus .card-more,
.solo-card.has-more.show-more .card-more {
  display: block;
  position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
  width: min(300px, 86vw); z-index: 60;
  background: #12121c; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px;
  padding: 10px 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); text-align: left;
}
.solo-card.has-more .card-more .card-bio { margin-top: 8px; }
.card-more-hint { font-size: 10px; color: rgba(255, 255, 255, 0.4); margin-top: 4px; letter-spacing: 0.04em; }
.solo-card.has-more:hover .card-more-hint,
.solo-card.has-more.show-more .card-more-hint { visibility: hidden; }

/* ── How to Play → The Ladder Cast ──────────────────────────────── */
.help-cast { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; }
.help-cast-item {
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px; padding: 6px 8px;
}
.help-cast-item > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
}
.help-cast-item > summary::-webkit-details-marker { display: none; }
.help-cast-face.solo-portrait { width: 40px; height: 40px; font-size: 20px; flex-shrink: 0; }
.help-cast-face.has-art { background-size: cover; background-position: center; }
.help-cast-text { display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
.help-cast-level { font-size: 10px; color: #f2d05a; letter-spacing: 0.08em; }
.help-cast-tag { font-size: 12px; font-style: italic; color: rgba(255, 255, 255, 0.65); }
.help-cast-bio { font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, 0.82); margin: 8px 2px 4px; }

/* Callouts during play: never on the field (see placeCallouts in main.js). */
#callout-display.in-gutter,
#callout-display.compact { right: auto; bottom: auto; padding: 0; }
#callout-display.in-gutter { align-items: flex-end; }
#callout-display.in-gutter .callout-text,
#callout-display.in-gutter .callout-text + .callout-text {
  font-size: clamp(15px, 1.7vw, 24px); text-align: right; line-height: 1.15;
  text-shadow: 0 0 12px currentColor, 0 2px 4px rgba(0, 0, 0, 0.7);
}
#callout-display.in-gutter .callout-text + .callout-text { font-size: clamp(12px, 1.25vw, 17px); }
#callout-display.compact { left: 0; right: 0; width: auto; align-items: center; }
#callout-display.compact .callout-text,
#callout-display.compact .callout-text + .callout-text {
  font-size: clamp(13px, 3.8vw, 18px); line-height: 1.2;
  background: rgba(0, 0, 0, 0.6); border-radius: 6px; padding: 2px 10px;
  text-shadow: 0 0 8px currentColor;
}
#callout-display.compact .callout-text + .callout-text { font-size: clamp(11px, 3vw, 14px); opacity: 0.8; }
#callout-display.on-board { right: auto; bottom: auto; padding: 0; align-items: center; }
#callout-display.on-board .callout-text {
  /* via --callout-op: calloutPop animates opacity, so a plain opacity here
     was overridden and the stack sat fully opaque over the field */
  font-size: clamp(18px, 3.4vw, 38px); --callout-op: 0.82;
  text-shadow: 0 0 14px currentColor, 0 2px 4px rgba(0, 0, 0, 0.8);
}
#callout-display.on-board .callout-text + .callout-text { font-size: clamp(13px, 2.2vw, 22px); --callout-op: 0.6; }

/* ── Solo → RUN SETUP: start-at-round tiles ─────────────────────── */
.solo-round-picker { width: min(760px, 92vw); margin: 10px auto 12px; text-align: center; }
.solo-round-picker-h {
  font-family: 'Orbitron', monospace; font-size: 12px; letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.6); margin-bottom: 8px;
}
.round-tiles {
  display: grid; gap: 8px;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 700px) { .round-tiles { grid-template-columns: repeat(3, 1fr); } }
.round-tiles .round-tile {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 6px 8px; min-height: 0; height: auto;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px;
  cursor: pointer; transition: transform 0.12s, border-color 0.12s, background 0.12s;
}
.round-tiles .round-tile:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.35); }
.round-tiles .round-tile.active {
  border-color: #4dd2ff; background: rgba(77, 210, 255, 0.10);
  box-shadow: 0 0 16px rgba(77, 210, 255, 0.35);
}
.round-tile-num {
  position: absolute; top: 4px; left: 8px;
  font-family: 'Orbitron', monospace; font-weight: 900; font-size: 18px;
  color: rgba(255, 255, 255, 0.85);
}
.round-tile-faces { display: flex; gap: 4px; justify-content: center; }
.round-tile-faces .solo-portrait {
  width: 52px; height: 52px; font-size: 24px; border-width: 2px;
  background-size: cover; background-position: center;
}
.round-tile-names {
  font-family: 'Orbitron', monospace; font-size: 10px; letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.75); line-height: 1.25; white-space: normal;
}
.round-tiles .round-tile.active .round-tile-names { color: #fff; }
@media (max-width: 480px) {
  .round-tiles { grid-template-columns: repeat(2, 1fr); }
  .round-tile-faces .solo-portrait { width: 44px; height: 44px; }
}
.solo-start-summary {
  font-size: 12px; color: #4dd2ff; text-align: center; min-height: 1em; margin: 6px 0 2px;
}
.solo-adv-opts { width: min(520px, 100%); margin: 0 auto; }

/* Retry taunt: the fighter who knocked you out, with a speech bubble. */
.cast-hero.is-taunt { top: 22%; }
.cast-taunt {
  position: absolute; left: 0; right: 0; top: 50%; margin: 0 auto;
  width: fit-content; max-width: min(560px, 88vw);
  font-size: clamp(18px, 4.4vw, 30px); font-style: italic; font-weight: 700; color: #fff;
  background: rgba(255, 255, 255, 0.06); border: 2px solid; border-radius: 16px;
  padding: 12px 20px; text-align: center;
  animation: castSlam 0.45s cubic-bezier(.2, 1.6, .4, 1) 0.35s both;
}

/* Mid-match brag bubble under the scorer's HUD card (showBrag in main.js). */
.brag-bubble {
  position: fixed; z-index: 63; pointer-events: none;
  max-width: min(300px, 80vw);
  background: rgba(10, 10, 20, 0.88); border: 2px solid; border-radius: 12px;
  padding: 6px 12px 8px; text-align: center;
  animation: bragIn 0.35s cubic-bezier(.2, 1.6, .4, 1) both;
}
.brag-bubble::before {
  content: ''; position: absolute; top: -8px; left: var(--tail-x, 50%);
  width: 12px; height: 12px; margin-left: -6px;
  background: inherit; border: inherit; border-right: 0; border-bottom: 0;
  transform: rotate(45deg);
}
/* Beside a Solo fighter's medallion: the tail points sideways at the face. */
.brag-bubble.tail-left::before,
.brag-bubble.tail-right::before { top: var(--tail-y, 50%); left: auto; margin: -6px 0 0; }
.brag-bubble.tail-left::before { left: -8px; transform: rotate(-45deg); }
.brag-bubble.tail-down::before { top: auto; bottom: -8px; transform: rotate(225deg); }
.brag-bubble.tail-right::before { right: -8px; transform: rotate(135deg); }
.brag-kicker {
  font-family: 'Orbitron', monospace; font-size: 10px; font-weight: 900;
  letter-spacing: 0.2em;
}
.brag-line { font-size: clamp(13px, 1.6vw, 16px); font-style: italic; font-weight: 700; color: #fff; line-height: 1.25; }
.brag-bubble.leaving { animation: bragOut 0.3s ease-in forwards; }
@keyframes bragIn { from { transform: scale(0.5) translateY(-10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bragOut { to { transform: scale(0.9); opacity: 0; } }




/* ── START RUN reveal: "ARE YOU READY TO BE BEATEN?" ─────────────────
   Shown once per run, before round 1's line-up. The whole ladder rises rung
   by rung (round 1 first) under a slammed-in title, with the crown at the
   top. Everything replays on each visit via .ready-play (main.js). */
#screen-solo.active {
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(255,51,102,0.22), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(51,255,153,0.12), transparent 70%),
    radial-gradient(ellipse at center, rgba(10,10,15,0.94) 0%, rgba(6,6,10,0.99) 70%),
    #06060a;
  isolation: isolate;
}
#screen-solo > *:not(.ready-stage):not(.solo-pop):not(.setup-actions) { position: relative; z-index: 1; }
#screen-solo > .setup-actions { position: relative; z-index: 3; }

/* Searchlights hunting for you. Each beam is two rotations stacked — the
   arm (.beam) and the head (::before) — on periods that never line up, so
   when one slows to turn the other is still moving: the sweep wanders and
   never comes to rest. A pool of light roams where they cross. */
.ready-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.ready-stage .beam {
  position: absolute;
  bottom: -6vh;
  width: 0; height: 0;
  animation: beamArm 11s ease-in-out infinite alternate;
}
.ready-stage .beam::before {
  content: '';
  position: absolute;
  left: -7vmax; bottom: 0;
  width: 14vmax; height: 150vmax;
  transform-origin: 50% 100%;
  background: linear-gradient(0deg, var(--beam) 0%, rgba(0,0,0,0) 80%);
  clip-path: polygon(46% 100%, 54% 100%, 100% 0, 0 0);
  filter: blur(5px);
  animation: beamHead 4.3s ease-in-out infinite alternate, beamFlicker 3.1s linear infinite;
}
.ready-stage .b1 { left: 8%;  --beam: rgba(255,216,77,0.22); }
.ready-stage .b2 { left: 92%; --beam: rgba(255,51,102,0.2); animation-duration: 13.7s; animation-direction: alternate-reverse; }
.ready-stage .b2::before { animation-duration: 5.9s, 2.7s; animation-delay: -2s, -1s; }
.ready-stage .b3 { left: 50%; bottom: auto; top: -8vh; --beam: rgba(77,210,255,0.16); animation-name: beamArmTop; animation-duration: 17.3s; }
.ready-stage .b3::before { bottom: auto; top: 0; transform-origin: 50% 0; clip-path: polygon(0 100%, 100% 100%, 54% 0, 46% 0); background: linear-gradient(180deg, var(--beam) 0%, rgba(0,0,0,0) 80%); animation-duration: 7.1s, 3.7s; }
@keyframes beamArm {
  0%   { transform: rotate(18deg); }
  35%  { transform: rotate(46deg); }
  60%  { transform: rotate(30deg); }
  100% { transform: rotate(58deg); }
}
.ready-stage .b2 { animation-name: beamArmR; }
@keyframes beamArmR {
  0%   { transform: rotate(-18deg); }
  40%  { transform: rotate(-50deg); }
  70%  { transform: rotate(-28deg); }
  100% { transform: rotate(-60deg); }
}
@keyframes beamArmTop {
  0%   { transform: rotate(-35deg); }
  30%  { transform: rotate(20deg); }
  55%  { transform: rotate(-10deg); }
  100% { transform: rotate(38deg); }
}
@keyframes beamHead {
  from { transform: rotate(-22deg); }
  to   { transform: rotate(22deg); }
}
@keyframes beamFlicker {
  0%, 100% { opacity: 1; } 47% { opacity: 0.82; } 50% { opacity: 1; } 73% { opacity: 0.9; }
}
.ready-stage .pool {
  position: absolute;
  left: 50%; top: 40%;
  width: 34vmax; height: 18vmax;
  margin: -9vmax 0 0 -17vmax;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,240,200,0.10), rgba(255,240,200,0) 65%);
  animation: poolX 9.7s ease-in-out infinite alternate, poolY 6.3s ease-in-out infinite alternate;
}
@keyframes poolX { from { translate: -28vw 0; } to { translate: 28vw 0; } }
@keyframes poolY { from { margin-top: -16vmax; } to { margin-top: 2vmax; } }

.ready-title {
  font-family: 'Orbitron', monospace;
  font-weight: 900;
  font-size: clamp(22px, 4.6vw, 40px);
  line-height: 1.12;
  letter-spacing: 2px;
  max-width: min(22em, 100%);
  text-wrap: balance;
  margin: 0 auto 8px;
  background: linear-gradient(180deg, #fff 0%, #ffd84d 45%, #ff3366 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 14px rgba(255,51,102,0.45)) drop-shadow(0 3px 0 rgba(0,0,0,0.7));
}
.ready-play .ready-title {
  animation: readySlam 0.55s cubic-bezier(.2,1.6,.4,1) both,
             readyShake 0.35s 0.5s ease-out,
             readyGlow 2.4s 1s ease-in-out infinite;
}
@keyframes readySlam {
  from { opacity: 0; transform: scale(2.6) rotate(-4deg); letter-spacing: 14px; }
  to   { opacity: 1; transform: none; }
}
@keyframes readyShake {
  20% { transform: translate(-6px, 2px) rotate(-1deg); }
  40% { transform: translate(5px, -2px) rotate(1deg); }
  60% { transform: translate(-3px, 1px); }
  80% { transform: translate(2px, 0); }
}
@keyframes readyGlow {
  50% { filter: drop-shadow(0 0 26px rgba(255,51,102,0.75)) drop-shadow(0 3px 0 rgba(0,0,0,0.7)); }
}

.ready-sub {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 3px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 14px;
}
.ready-play .ready-sub { animation: fadeIn 0.4s 0.45s ease-out both; }

.solo-mode-inline { margin: 0 auto 10px; width: fit-content; }
.ready-play .solo-mode-inline { animation: fadeIn 0.4s 0.55s ease-out both; }
#screen-solo .solo-identity { margin-top: 8px; }

.ready-crown {
  font-family: 'Orbitron', monospace;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 3px;
  color: #ffd84d;
  text-shadow: 0 0 12px rgba(255,216,77,0.6);
  margin-bottom: 6px;
}
.ready-play .ready-crown {
  animation: readyCrown 0.5s cubic-bezier(.2,1.5,.4,1) both, readyBob 2.2s ease-in-out infinite;
}
/* The crown lands after the last rung — its delay is set in main.js. */
@keyframes readyCrown {
  from { opacity: 0; transform: translateY(-24px) scale(1.8); }
  to   { opacity: 1; transform: none; }
}
@keyframes readyBob { 50% { transform: translateY(-3px); } }

.ready-ladder.solo-ladder {
  max-width: 440px;
  margin-bottom: 6px;
}
/* One line per rung: number · faces · names · level · effort bar. */
.ready-ladder .ladder-rung {
  grid-template-columns: 18px auto 1fr auto 44px;
  padding: 3px 8px;
  text-align: left;
}
.ready-ladder .rung-faces { line-height: 0; }
.ready-ladder .ladder-rung { opacity: 0.8; }
.ready-play .ready-ladder .ladder-rung {
  animation: readyRung 0.35s cubic-bezier(.2,1.3,.4,1) backwards;
}
@keyframes readyRung {
  from { opacity: 0; transform: translateY(18px) scale(0.94); }
}
.ready-ladder .ladder-rung.current {
  opacity: 1;
  animation: readyRung 0.35s cubic-bezier(.2,1.3,.4,1) backwards,
             readyPulse 1.6s 1.2s ease-in-out infinite;
}
@keyframes readyPulse {
  50% { box-shadow: 0 0 22px rgba(51,255,153,0.55); }
}
.ready-ladder .ladder-rung.final {
  opacity: 1;
  border-color: rgba(255,216,77,0.7);
  background: linear-gradient(90deg, rgba(255,216,77,0.16), rgba(255,51,102,0.12));
  box-shadow: 0 0 16px rgba(255,216,77,0.3);
}
.ready-ladder .ladder-rung.final .rung-name { color: #ffd84d; font-weight: 700; }
.ready-ladder .ladder-rung.entering .rung-name { color: rgba(255,255,255,0.85); }
.ready-ladder .ladder-rung.skipped { opacity: 0.25; }
.ready-ladder .ladder-rung.skipped .rung-name { text-decoration: line-through; }
.ready-ladder .rung-name { font-size: 12px; font-weight: 700; letter-spacing: 1px; }
.theme-retro .ready-ladder .rung-name { font-size: 8px; }

/* Gauntlet: 15 rungs — tighter so the climb still fits a laptop screen. */
.ready-ladder.is-long { gap: 2px; }
.ready-ladder.is-long .ladder-rung { padding: 1px 8px; }
.ready-ladder.is-long .rung-face.has-art { width: 20px; height: 20px; }

.ready-you {
  font-family: 'Orbitron', monospace;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2px;
  color: #33ff99;
  margin-bottom: 4px;
}
.ready-play .ready-you { animation: fadeIn 0.3s 0.2s ease-out both, readyBob 1.4s 0.6s ease-in-out infinite; }

.theme-retro .ready-title { font-family: 'Press Start 2P', monospace; font-size: clamp(14px, 3vw, 24px); line-height: 1.5; letter-spacing: 1px; }
.theme-retro .ready-crown,
.theme-retro .ready-you { font-family: 'Press Start 2P', monospace; font-size: 8px; }

@media (max-width: 480px) {
  .ready-title { font-size: 22px; }
  .ready-sub { font-size: 11px; letter-spacing: 2px; }
  .ready-ladder .ladder-rung { gap: 6px; padding: 2px 6px; grid-template-columns: 16px auto 1fr auto 30px; }
  .ready-ladder .rung-face.has-art { width: 22px; height: 22px; }
  .ready-ladder.is-long .ladder-rung { padding: 1px 6px; }
  .ready-ladder.is-long .rung-face.has-art { width: 18px; height: 18px; }
  .ready-crown { margin-bottom: 4px; }
  .ready-sub { margin-bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .ready-stage .beam, .ready-stage .beam::before, .ready-stage .pool { animation: none; }
  .ready-play .ready-title,
  .ready-play .ready-sub,
  .ready-play .ready-crown,
  .ready-play .ready-you,
  .ready-play .ready-ladder .ladder-rung { animation: none; }
}

/* Narrow phones (iPhone SE): the names matter more than the effort bar. */
@media (max-width: 400px) {
  .ready-ladder .ladder-rung { grid-template-columns: 14px auto 1fr auto; gap: 5px; }
  .ready-ladder .rung-bar { display: none; }
  .ready-ladder .rung-name { letter-spacing: 0; }
}

/* ── Points & ranks (js/points.js) ─────────────────────────────────── */
.rank-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(300px, 100%);
  margin: -8px auto 16px;
  padding: 6px 12px 6px 6px;
  border: 1px solid rgba(255,216,77,0.35);
  border-radius: 10px;
  background: rgba(255,216,77,0.05);
  font-family: 'Orbitron', monospace;
  text-align: left;
  box-sizing: border-box;
}
.rank-chip:empty { display: none; }
.rank-chip-lvl {
  flex: none;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #ffd84d;
  color: #111;
  font-size: 14px;
  font-weight: 700;
}
.rank-chip-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rank-chip-name {
  font-size: 11px; letter-spacing: 1px; color: #ffd84d;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rank-chip-bar, .pts-bar {
  display: block; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,0.12); overflow: hidden;
}
.rank-chip-bar i, .pts-bar i {
  display: block; height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, #33ff99, #ffd84d);
}
.rank-chip-pts { font-size: 9px; letter-spacing: 1px; color: rgba(255,255,255,0.5); }
.rank-chip.is-new { animation: rank-chip-glow 1.2s ease-in-out 2; }
@keyframes rank-chip-glow {
  50% { box-shadow: 0 0 18px rgba(255,216,77,0.7); border-color: #ffd84d; }
}
.theme-retro .rank-chip-name, .theme-retro .rank-chip-pts, .theme-retro .rank-chip-lvl { font-family: 'Press Start 2P', monospace; font-size: 7px; }
@media (max-width: 480px) { .rank-chip { margin-top: -4px; } }

.pts-card {
  width: min(380px, 100%);
  margin: 8px auto 10px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  background: rgba(0,0,0,0.35);
  font-family: 'Orbitron', monospace;
  line-height: 1.35;
  text-align: left;
  box-sizing: border-box;
}
.pts-card[hidden] { display: none; }
.pts-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
/* Results screens carry the points card and can outgrow a phone screen: keep
   their last row of buttons clear of the fixed version footer. */
#screen-gameover, #screen-solo-clear, #screen-solo-lost, #screen-solo-champion { padding-bottom: 44px; }
.pts-earned { font-size: 11px; letter-spacing: 2px; color: rgba(255,255,255,0.7); white-space: nowrap; }
.pts-num { font-size: 22px; font-weight: 700; color: #33ff99; margin-right: 2px; font-variant-numeric: tabular-nums; }
.pts-rank-name, .pts-rankup-name { font-size: 11px; letter-spacing: 1px; color: #ffd84d; text-align: right; }
.pts-rankup { margin-left: auto; white-space: nowrap; text-align: right; animation: pts-slam 0.5s cubic-bezier(.2,1.6,.4,1) both; transform-origin: right center; }
.pts-rankup-kicker { font-size: 9px; letter-spacing: 2px; padding: 1px 5px; border-radius: 3px; background: #ffd84d; color: #111; font-weight: 700; }
.pts-rankup-name { text-shadow: 0 0 12px rgba(255,216,77,0.6); }
.pts-lines { margin: 4px 0 6px; font-size: 9px; letter-spacing: 0.5px; color: rgba(255,255,255,0.55); }
.pts-lines span { white-space: nowrap; }
.pts-lines b { color: #fff; font-weight: 600; }
.pts-lines i { font-style: normal; color: rgba(255,255,255,0.3); }
.pts-farm { font-size: 9px; letter-spacing: 1px; color: #ff9966; margin: 0 0 4px; }
.pts-next { display: flex; justify-content: space-between; gap: 8px; margin-top: 3px; font-size: 9px; letter-spacing: 1px; color: rgba(255,255,255,0.45); }
.pts-rank-total { color: rgba(255,255,255,0.7); white-space: nowrap; }
.pts-grumble { font-family: 'Rajdhani', sans-serif; font-size: 13px; font-style: italic; color: rgba(255,255,255,0.65); margin-top: 4px; text-align: center; }
@keyframes pts-slam { from { transform: scale(2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.pts-card.is-rankup { border-color: rgba(255,216,77,0.5); }
.theme-retro .pts-card { font-family: 'Press Start 2P', monospace; }
.theme-retro .pts-num { font-size: 14px; }
.theme-retro .pts-lines, .theme-retro .pts-rank-name, .theme-retro .pts-rankup-name, .theme-retro .pts-next { font-size: 7px; }
@media (prefers-reduced-motion: reduce) {
  .pts-rankup, .rank-chip.is-new { animation: none; }
}

.help-ranks { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; font-family: 'Orbitron', monospace; font-size: 10px; letter-spacing: 1px; counter-reset: rank; }
.help-ranks li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 8px; border-radius: 4px; background: rgba(255,255,255,0.03); counter-increment: rank; }
.help-ranks li span::before { content: counter(rank) ". "; color: rgba(255,255,255,0.4); }
.help-ranks li b { color: #ffd84d; font-weight: 500; }
.help-ranks li.help-ranks-stars { justify-content: center; color: rgba(255,255,255,0.55); background: none; }
.help-ranks li.help-ranks-stars::before, .help-ranks li.help-ranks-stars span::before { content: none; }

.help-privacy { margin: 18px auto 4px; max-width: 520px; font-size: 12px; line-height: 1.4; color: rgba(255,255,255,0.45); text-align: center; }

/* The fighter you knocked out gets a parting shot before ROUND CLEAR:
   same stage as the taunt, but they're the ones sagging. */
.cast-hero.is-loser .cast-face { filter: grayscale(0.55) brightness(0.85); transform: rotate(-7deg); }
.cast-hero.is-loser .cast-kicker { color: #ff5577; }

/* ── Solo player card: face, rank level, bar to the next rank ──────── */
.player-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 4px 12px;
  width: min(340px, 100%);
  margin: 10px auto 8px;
  padding: 8px 12px 8px 8px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s, background 0.15s;
}
.player-card:hover, .player-card:focus-visible { border-color: rgba(51,255,153,0.55); outline: none; }
.player-face .solo-portrait {
  width: 56px; height: 56px; margin: 0;
  font-size: 30px;
  border: 3px solid var(--me, #ff3366);
  box-shadow: 0 0 14px var(--me, #ff3366);
}
.player-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.player-info .readonly-name { align-self: flex-start; font-size: 14px; }
.player-rank { display: flex; align-items: center; gap: 8px; font-family: 'Orbitron', monospace; font-size: 11px; letter-spacing: 1px; color: #ffd84d; }
.player-lvl {
  padding: 1px 7px; border-radius: 999px;
  background: #ffd84d; color: #07090c; font-weight: 900; font-size: 10px;
}
.player-rank-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.12); overflow: hidden; }
.player-bar i { display: block; height: 100%; background: linear-gradient(90deg, #33ff99, #ffd84d); border-radius: 3px; transition: width 0.6s ease-out; }
.player-next { font-size: 10px; letter-spacing: 1px; color: rgba(255,255,255,0.55); }
.player-more { font-size: 14px; color: rgba(255,255,255,0.5); transition: transform 0.2s; }
.player-card.open .player-more { transform: rotate(180deg); }
.player-card .solo-stats {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 11px;
  line-height: 1.6;
  text-align: left;
  min-height: 0;
}
.theme-retro .player-rank, .theme-retro .player-next { font-family: 'Press Start 2P', monospace; font-size: 8px; }

/* ── HUD standings (renderer.js updateStandings) ───────────────────── */
.score-box .place {
  font-size: 9px; font-weight: 900; letter-spacing: 1.5px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 1px;
}
.score-box.is-leading .place { color: #ffd84d; }
.score-box.is-leading .place::before { content: '\1F451 '; }
.score-box.is-last .place { color: #ff5577; }
.score-box.eliminated .place { color: rgba(255,255,255,0.4); }
/* You: always findable at a glance. */
.score-box.is-me {
  border-color: #fff !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.25), 0 0 16px rgba(255,51,102,0.45);
  transform-origin: 50% 0;
}
#hud .score-box.is-me { scale: 1.08; }
.score-box.is-me .label { opacity: 0.95; }
.score-box.me-losing {
  border-color: #ff3b3b !important;
  animation: me-losing 1.1s ease-in-out infinite;
}
.score-box.me-losing .place::after { content: ' \2014  YOU'; }
@keyframes me-losing {
  50% { box-shadow: 0 0 0 2px rgba(255,59,59,0.6), 0 0 24px rgba(255,59,59,0.7); }
}
@media (prefers-reduced-motion: reduce) { .score-box.me-losing { animation: none; } }
@media (max-width: 480px) { .score-box .place { font-size: 7px; letter-spacing: 1px; } }

/* Main-menu chip = you: face (LVL on its rim), name, rank, bar. Tap → account. */
.rank-chip { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color 0.15s, background 0.15s; width: min(320px, 100%); }
.rank-chip:hover, .rank-chip:focus-visible, .rank-chip.menu-nav-focused { border-color: #ffd84d; background: rgba(255,216,77,0.1); }
.rank-chip-face { position: relative; flex: none; }
.rank-chip-face .solo-portrait {
  width: 44px; height: 44px; margin: 0; font-size: 24px;
  border: 2px solid var(--me, #ff3366);
}
.rank-chip-face .rank-chip-lvl {
  position: absolute; right: -6px; bottom: -4px;
  width: 20px; height: 20px; font-size: 11px;
  border: 2px solid #07090c;
}
.rank-chip-who {
  font-size: 12px; letter-spacing: 1px; color: #fff; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rank-chip-go { flex: none; font-size: 22px; color: rgba(255,216,77,0.7); line-height: 1; }

/* Account screen: you, then the numbers. */
.account-stats { width: min(360px, 100%); margin: 0 auto 14px; text-align: left; }
.account-stats:empty { display: none; }
.acct-top { display: flex; align-items: center; gap: 12px; }
.acct-top .player-info { flex: 1; }
.acct-name { font-family: 'Orbitron', monospace; font-size: 15px; font-weight: 900; letter-spacing: 1px; color: #fff; }
.acct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 12px; }
.acct-cell {
  display: flex; flex-direction: column; gap: 2px;
  padding: 7px 10px; border-radius: 10px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
}
.acct-cell span { font-size: 9px; letter-spacing: 1.5px; color: rgba(255,255,255,0.5); }
.acct-cell b { font-family: 'Orbitron', monospace; font-size: 13px; color: #ffd84d; }
.theme-retro .rank-chip-who, .theme-retro .acct-name, .theme-retro .acct-cell b { font-family: 'Press Start 2P', monospace; font-size: 8px; }

/* Results screens: a simple points card; the arithmetic is behind DETAILS. */
.pts-toggle {
  display: block; margin: 6px auto 0; padding: 2px 10px;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 10px; letter-spacing: 1.5px;
  color: rgba(255,255,255,0.5);
}
.pts-toggle:hover, .pts-toggle:focus-visible { color: #fff; outline: none; }
.pts-more[hidden] { display: none; }
.pts-more { margin-top: 4px; }