/* ═══════════════════════════════════════════════════════════════
   BRAND.CSS v2 — GoAgainstMe Design System
   Bone paper · terminal mono · brutalist arcade
   Space Grotesk (display) · JetBrains Mono (mono)
   Load AFTER style.css. Remove <link> to revert.
═══════════════════════════════════════════════════════════════ */


:root {
  --bone:      #f4efe6;
  --bone-2:    #ebe4d6;
  --ink:       #0a0a0a;
  --ink-2:     #161616;
  --ink-3:     #1f1f1f;
  --line:      #2a2a2a;
  --mute:      #6b6b6b;
  --mute-2:    #9a9a9a;
  --red:       #ff2e1f;
  --red-deep:  #c81b0e;
  --acid:      #c8ff00;
  --gold:      #ffb800;
  --mono-f:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --disp-f:    'Space Grotesk', -apple-system, system-ui, sans-serif;
}

/* ── BASE ─────────────────────────────────────────────────────── */
html, body {
  overflow: hidden !important;
  height: 100% !important;
  background: var(--bone) !important;
}
body {
  font-family: var(--disp-f) !important;
  background: var(--bone) !important;
  color: var(--ink) !important;
  -webkit-font-smoothing: antialiased !important;
}
body::before, body::after { display: none !important; }


/* ── ALL SCREENS ─────────────────────────────────────────────── */
.screen {
  background: var(--bone) !important;
  color: var(--ink) !important;
  animation: none !important;
}

/* ── LOADING SCREEN — dark splash ────────────────────────────── */
#loadingScreen {
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: var(--bone);
  /* inset:0 stretches to full viewport — no explicit height so dvh quirks can't shrink it */
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 999;
  padding: 0;
}
/* Center the logo block inside the splash (mainMenu uses flex-start for side layout) */
#loadingScreen .logo-stack-new { align-items: center !important; }
/* Scale logo up — 2.1rem is designed for the compact mainMenu wordmark */
#loadingScreen .logo-go,
#loadingScreen .logo-against,
#loadingScreen .logo-me      { font-size: 3.2rem !important; color: var(--bone) !important; }
#loadingScreen .logo-against { color: var(--bone) !important; }
#loadingScreen .logo-me      { color: var(--red)  !important; }
#loadingScreen .logo-vs-box  { color: var(--red)  !important; border-color: var(--red) !important; font-size: 0.85rem !important; }
#loadingScreen .logo-tagline { color: var(--mute-2) !important; }
.ls-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 32px;
}
.ls-logo { text-align: center; }
.ls-term {
  margin-top: 52px;
  font-family: var(--mono-f);
  font-size: 11px;
  color: var(--acid);
  letter-spacing: 0.18em;
  width: 100%;
  text-align: left;
  overflow: hidden;
  min-height: 18px;
}
.ls-term-text {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  animation: lsTypeOn 0.5s steps(22, end) 1.1s forwards;
}
@keyframes lsTypeOn { to { width: calc(22ch + 3.78em); } }
.ls-foot { padding: 0 24px 32px; }
.ls-bar {
  height: 3px;
  background: var(--line);
  margin-bottom: 10px;
  overflow: hidden;
}
.ls-bar-fill {
  height: 100%;
  background: var(--red);
  width: 0;
  animation: lsBarFill 2.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes lsBarFill {
  0%   { width: 0; }
  75%  { width: 94%; }
  100% { width: 100%; }
}
.ls-bar-lbl {
  font-family: var(--mono-f);
  font-size: 10px;
  color: var(--mute);
  text-align: center;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ── WORDMARK ────────────────────────────────────────────────── */
.logo-go, .logo-against, .logo-me {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  background-clip: unset !important;
  filter: none !important;
  animation: none !important;
  font-family: var(--disp-f) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 0.88 !important;
  font-size: 2.1rem !important;
}
.logo-go      { color: var(--ink) !important; }
.logo-against { color: var(--ink) !important; font-style: normal !important; }
.logo-me      { color: var(--red) !important; font-style: italic !important; }

.logo-accent-line { display: none !important; }

.logo-vs-box {
  display: inline-block !important;
  font-family: var(--mono-f) !important;
  font-size: 0.28em !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  color: var(--red) !important;
  border: 1.5px solid var(--red) !important;
  padding: 0.2em 0.45em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  margin-left: 0.15em !important;
}
.logo-tagline {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  background-clip: unset !important;
  animation: none !important;
  font-family: var(--mono-f) !important;
  color: var(--mute) !important;
  font-size: 9px !important;
  letter-spacing: 0.18em !important;
  margin-top: 6px !important;
  font-weight: 600 !important;
}

/* ── MAIN MENU LAYOUT ────────────────────────────────────────── */
#mainMenu {
  background: var(--bone) !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  overflow: hidden !important;
  height: 100vh !important;
  min-height: unset !important;
}
#mainMenu.active {
  display: flex !important;
}
#menuBgCanvas { display: none !important; }
.main-menu-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  max-width: 100% !important;
  padding: 0 !important;
  height: 100% !important;
  min-height: unset !important;
  width: 100% !important;
  overflow: hidden !important;
}

/* ── STATUS BAR ──────────────────────────────────────────────── */
.gam-status-bar {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  font-family: var(--mono-f);
  font-size: 9.5px;
  font-weight: 600;
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-bottom: 1px solid rgba(10,10,10,0.1);
  flex-shrink: 0;
}

/* ── ONLINE COUNT ────────────────────────────────────────────── */
.online-count {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--mono-f) !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  color: var(--mute) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}
.online-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--acid) !important;
  box-shadow: 0 0 6px var(--acid) !important;
  display: inline-block !important;
  animation: gam-pulse 1.4s infinite !important;
  flex-shrink: 0 !important;
}
@keyframes gam-pulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }

/* ── TOP BAR: IDENTITY + BALANCE ─────────────────────────────── */
.gam-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px 10px;
  flex-shrink: 0;
}
.gam-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-align: left;
}
.gam-avatar {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: var(--bone);
  font-family: var(--disp-f);
  font-weight: 800;
  font-size: 18px;
  flex-shrink: 0;
  border-radius: 0;
}
.gam-identity-name {
  font-family: var(--disp-f);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
  display: block;
}
.gam-identity-sub {
  font-family: var(--mono-f);
  font-size: 9px;
  color: var(--mute);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 3px;
  display: block;
}
.gam-balance-widget {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--ink);
  background: var(--bone);
}
.gam-balance-display {
  padding: 5px 10px;
  text-align: right;
  border-right: 1.5px solid var(--ink);
}
.gam-balance-label {
  display: block;
  font-family: var(--mono-f);
  font-size: 8px;
  color: var(--mute);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.gam-balance-num {
  display: block;
  font-family: var(--disp-f);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.gam-bal-btn {
  padding: 0 11px;
  background: var(--ink);
  color: var(--bone);
  border: none;
  font-family: var(--mono-f);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  border-right: 1.5px solid var(--ink);
  line-height: 1;
  transition: background 0.1s;
}
.gam-bal-btn:last-child {
  background: var(--bone);
  color: var(--ink);
  border-right: none;
}
.gam-bal-btn:active { opacity: 0.7; }

/* ── WORDMARK SECTION ────────────────────────────────────────── */
.gam-wordmark-section {
  padding: 6px 16px 12px;
  flex-shrink: 0;
}
.logo-stack-new {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 0.88;
}
.logo-row-1 {
  display: flex;
  align-items: center;
}

/* ── TICKER TAPE ─────────────────────────────────────────────── */
.gam-tape-wrap {
  height: 24px !important;
  overflow: hidden !important;
  position: relative !important;
  border-top: 1px solid var(--ink) !important;
  border-bottom: 1px solid var(--ink) !important;
  background: var(--ink) !important;
  margin: 0 !important;
  width: 100% !important;
  flex-shrink: 0;
}
#liveTicker {
  position: absolute !important;
  left: 0 !important; top: 0 !important; height: 100% !important;
  display: flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  font-family: var(--mono-f) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--bone) !important;
  padding-left: 16px !important;
  animation: tickerScroll 40s linear infinite !important;
  gap: 24px !important;
}

/* ── GAME SCROLL AREA ────────────────────────────────────────── */
.gam-scroll {
  flex: 1;
  padding: 12px 14px 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}
.gam-scroll::-webkit-scrollbar { width: 0; height: 0; }

/* ── SECTION DIVIDER LABEL ────────────────────────────────────── */
.gam-div-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono-f);
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--mute);
  margin-bottom: 12px;
}
.gam-div-label::before, .gam-div-label::after {
  content: ''; flex: 1; height: 1px; background: var(--mute); opacity: 0.3;
}

/* ── GAME CARDS ───────────────────────────────────────────────── */
.gam-game-card {
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: 0;
  margin-bottom: 10px;
  border: 1.5px solid var(--ink);
  overflow: hidden;
  background: var(--bone);
  position: relative;
  transition: box-shadow 0.1s;
}
.gam-game-card--hero {
  background: var(--ink);
  color: var(--bone);
}
.gam-game-card--hero:active { transform: translate(2px,2px); }

.gam-game-card-top {
  padding: 14px 16px 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.gam-chips {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.gam-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border: 1px solid currentColor;
  font-family: var(--mono-f);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1;
}
.gam-chip--acid   { color: var(--ink); background: var(--acid); border-color: var(--ink); }
.gam-chip--outline { color: var(--bone); border-color: var(--bone); }
.gam-chip--red    { color: var(--red); border-color: var(--red); }
.gam-chip--dim    { color: var(--ink); border-color: var(--ink); }

.gam-game-title {
  font-family: var(--disp-f);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: var(--bone);
  margin-top: 6px;
}
.gam-game-subtitle {
  font-family: var(--mono-f);
  font-size: 9px;
  color: var(--mute-2);
  margin-top: 6px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.gam-arrow {
  font-family: var(--disp-f);
  font-size: 48px;
  color: var(--red);
  font-style: italic;
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.8;
  flex-shrink: 0;
}

/* fake paddle preview */
.gam-paddle-preview {
  height: 64px;
  background: var(--ink-2);
  border-top: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.gam-paddle-l {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 6px; height: 30px; background: var(--acid);
}
.gam-paddle-r {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 6px; height: 30px; background: var(--red);
}
.gam-ball-dot {
  position: absolute; left: 46%; top: 50%; transform: translate(-50%,-50%);
  width: 8px; height: 8px; background: var(--bone); border-radius: 50%;
}
.gam-midline {
  position: absolute; left: 50%; top: 0; bottom: 0;
  width: 0; border-left: 1px dashed var(--line);
}
.gam-preview-label {
  position: absolute; bottom: 5px; right: 8px;
  font-family: var(--mono-f); font-size: 8px;
  color: var(--mute); letter-spacing: 0.14em; text-transform: uppercase;
}

/* bet amounts row */
.gam-bets-strip {
  display: flex;
  gap: 1px;
  background: var(--line);
}
.gam-bet-amount {
  flex: 1;
  padding: 7px 0;
  text-align: center;
  background: var(--ink);
  font-family: var(--mono-f);
  font-size: 11px;
  font-weight: 700;
  color: var(--mute-2);
}

/* coming soon card */
.gam-game-card--soon { background: var(--bone); cursor: default; }
.gam-soon-title {
  font-family: var(--disp-f);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: var(--ink);
  margin-top: 6px;
}
.gam-soon-banner {
  height: 60px;
  background: var(--ink);
  border-top: 1px solid var(--ink);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gam-soon-stripes {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, transparent 0 8px, rgba(255,46,31,0.18) 8px 10px);
}
.gam-soon-text {
  font-family: var(--disp-f);
  font-size: 18px;
  font-weight: 800;
  color: var(--bone);
  font-style: italic;
  position: relative;
}
.gam-soon-tag {
  position: absolute;
  top: 5px; left: 10px;
  font-family: var(--mono-f);
  font-size: 8px;
  color: var(--acid);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* practice dashed strip */
.gam-practice-btn {
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: 1.5px dashed var(--ink);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  text-align: left;
}
.gam-practice-btn:active { opacity: 0.7; }
.gam-practice-no-money {
  display: block;
  font-family: var(--mono-f);
  font-size: 9px;
  color: var(--mute);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.gam-practice-label {
  display: block;
  font-family: var(--disp-f);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.gam-practice-arrow {
  font-family: var(--mono-f);
  font-size: 14px;
  color: var(--ink);
}

/* ── HAMBURGER — hidden, gam-identity takes over ─────────────── */
.hamburger-menu { display: none !important; }

/* ── SLIDE MENU ───────────────────────────────────────────────── */
.slide-menu {
  background: var(--bone) !important;
  border-left: 1.5px solid var(--ink) !important;
  box-shadow: none !important;
}
.slide-menu-header {
  background: var(--ink) !important;
  border-bottom: 1px solid var(--line) !important;
}
.menu-profile-avatar {
  background: var(--ink-3) !important;
  color: var(--bone) !important;
  border-radius: 0 !important;
  border: 1.5px solid var(--bone) !important;
  box-shadow: none !important;
  font-family: var(--disp-f) !important;
  font-weight: 800 !important;
}
.menu-profile-name  { color: var(--bone) !important; font-family: var(--disp-f) !important; font-weight: 800 !important; }
.menu-profile-balance { color: var(--acid) !important; font-family: var(--mono-f) !important; }
.menu-profile-close { color: var(--bone) !important; background: none !important; border: none !important; font-family: var(--mono-f) !important; }
.menu-stat-val { color: var(--bone) !important; font-family: var(--mono-f) !important; font-weight: 800 !important; }
.menu-stat-lbl { color: var(--mute-2) !important; font-family: var(--mono-f) !important; }
.menu-profile-stats { border-top: 1px solid var(--line) !important; }
.slide-menu-content { background: var(--bone) !important; padding: 0 !important; gap: 0 !important; }

/* Menu item — color accent bar on left */
.menu-item {
  border-bottom: 1px solid rgba(10,10,10,0.1) !important;
  border-left: 4px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 14px 16px 14px 14px !important;
  gap: 10px !important;
  transition: background 0.12s, border-left-color 0.12s !important;
  animation: slideIn 0.35s ease-out forwards !important;
}
.menu-item:active { background: var(--bone-2) !important; }

/* accent variants */
.mi-red  { border-left-color: var(--red) !important; }
.mi-gold { border-left-color: var(--gold) !important; }
.mi-ink  { border-left-color: var(--ink) !important; }
.mi-mute { border-left-color: var(--mute) !important; }

/* tag above title */
.menu-item-tag {
  font-family: var(--mono-f) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  margin-bottom: 3px !important;
  display: block !important;
}
.mi-red  .menu-item-tag { color: var(--red) !important; }
.mi-gold .menu-item-tag { color: var(--gold) !important; }
.mi-ink  .menu-item-tag { color: var(--mute) !important; }
.mi-mute .menu-item-tag { color: var(--mute-2) !important; }

.menu-title {
  color: var(--ink) !important;
  font-family: var(--disp-f) !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  letter-spacing: -0.02em !important;
}
.menu-arr {
  color: var(--mute) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  transition: transform 0.12s, color 0.12s !important;
}
.menu-item:active .menu-arr { transform: translateX(3px) !important; color: var(--ink) !important; }

/* ── NAME SETUP SCREEN — dark so it never reads as blank ─────── */
#nameSetupScreen {
  background: var(--ink) !important;
}
#nameSetupScreen .container {
  background: var(--ink-2) !important;
  border-color: var(--line) !important;
  color: var(--bone) !important;
}
#nameSetupScreen .container h2 {
  color: var(--bone) !important;
}
#nameSetupScreen .container p {
  color: var(--mute-2) !important;
}

/* ── CONTAINERS (all inner screens) ──────────────────────────── */
.container {
  background: var(--bone) !important;
  border: 1.5px solid var(--ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ink) !important;
}
.container h1, .container h2 {
  color: var(--ink) !important;
  font-family: var(--disp-f) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  text-shadow: none !important;
  animation: none !important;
}

/* ── BACK BUTTON ──────────────────────────────────────────────── */
.back-btn {
  color: var(--ink) !important;
  font-family: var(--mono-f) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}
.back-btn:active { opacity: 0.6 !important; transform: none !important; }

/* ── PRIMARY BUTTON — brutalist ───────────────────────────────── */
.btn-primary {
  background: var(--red) !important;
  border: 1.5px solid var(--ink) !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 var(--ink) !important;
  color: var(--bone) !important;
  font-family: var(--mono-f) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  transition: transform 0.08s, box-shadow 0.08s !important;
}
.btn-primary::before, .btn-primary::after { display: none !important; }
.btn-primary:active { transform: translate(2px,2px) !important; box-shadow: 0 0 0 var(--ink) !important; }
.btn-primary:hover  { background: var(--red-deep) !important; transform: none !important; box-shadow: 4px 4px 0 var(--ink) !important; }
.btn-primary:disabled { opacity: 0.35 !important; cursor: not-allowed !important; }

/* ── ACTION BUTTONS ───────────────────────────────────────────── */
.btn-create {
  background: var(--red) !important;
  border: 1.5px solid var(--ink) !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 var(--ink) !important;
  animation: none !important;
  font-family: var(--mono-f) !important;
  letter-spacing: 0.08em !important;
  color: var(--bone) !important;
}
.btn-create:active { transform: translate(2px,2px) !important; box-shadow: none !important; }
.btn-join {
  background: var(--bone) !important;
  border: 1.5px solid var(--ink) !important;
  border-radius: 0 !important;
  color: var(--ink) !important;
  box-shadow: 4px 4px 0 var(--ink) !important;
  font-family: var(--mono-f) !important;
}
.btn-join:hover  { background: var(--ink) !important; color: var(--bone) !important; }
.btn-join:active { transform: translate(2px,2px) !important; box-shadow: none !important; }
.btn-practice {
  background: transparent !important;
  border: 1.5px dashed var(--mute) !important;
  color: var(--mute) !important;
  border-radius: 0 !important;
  animation: none !important;
  font-family: var(--mono-f) !important;
  box-shadow: none !important;
}
.btn-secondary {
  background: var(--bone) !important;
  border: 1.5px solid var(--ink) !important;
  border-radius: 0 !important;
  color: var(--ink) !important;
  font-family: var(--mono-f) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}
.btn-cancel, .btn-small {
  border-radius: 0 !important;
  font-family: var(--mono-f) !important;
}
.btn-icon { animation: none !important; }

/* ── INPUTS ───────────────────────────────────────────────────── */
input[type="text"], input[type="number"], textarea,
.name-input, .join-code-input, .amount-input, .withdraw-input {
  background: var(--bone) !important;
  border: 1.5px solid var(--ink) !important;
  border-radius: 0 !important;
  color: var(--ink) !important;
  font-family: var(--mono-f) !important;
  box-shadow: none !important;
}
input[type="text"]:focus, input[type="number"]:focus, textarea:focus {
  border-color: var(--red) !important;
  box-shadow: none !important; outline: none !important;
}
input::placeholder { color: var(--mute) !important; opacity: 0.6 !important; }

/* ── INFO / HELPER TEXT ───────────────────────────────────────── */
.info-text, .name-rules, .name-changes-left {
  color: var(--mute) !important;
  font-family: var(--mono-f) !important;
  font-size: 10px !important;
}

/* ── BET / BUDGET BUTTONS ─────────────────────────────────────── */
.budget-btn, .create-room-amount-btn, .bet-btn {
  background: var(--bone) !important;
  border: 1.5px solid var(--ink) !important;
  border-radius: 0 !important;
  color: var(--ink) !important;
  font-family: var(--mono-f) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
.budget-btn.selected, .create-room-amount-btn.selected, .bet-btn.selected {
  background: var(--red) !important;
  color: var(--bone) !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
}

/* ── MODE BUTTONS ─────────────────────────────────────────────── */
.mode-btn, .play-mode-card, .ai-mode-btn {
  background: var(--bone) !important;
  border: 1.5px solid var(--ink) !important;
  border-radius: 0 !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  transition: all 0.1s !important;
}
.mode-btn.selected, .play-mode-card.selected, .ai-mode-btn.selected {
  background: var(--ink) !important;
  color: var(--bone) !important;
  box-shadow: 3px 3px 0 var(--red) !important;
}
.mode-name { font-family: var(--disp-f) !important; font-weight: 800 !important; color: inherit !important; }
.mode-desc, .play-mode-desc { font-family: var(--mono-f) !important; color: var(--mute) !important; font-size: 10px !important; }
.play-mode-name { font-family: var(--disp-f) !important; font-weight: 800 !important; }

/* ── ROOM BROWSER / STAKEROOM ─────────────────────────────────── */
#roomBrowserScreen {
  background: var(--bone) !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  overflow: hidden !important;
}
#roomBrowserScreen.active {
  display: flex !important;
}

/* back bar */
.rb-backbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1.5px solid var(--ink);
}
.rb-back-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--mono-f);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0;
}
.rb-back-btn:active { opacity: 0.6; }
.rb-screen-title {
  font-family: var(--mono-f);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

/* section wrapper */
.rb-section {
  padding: 12px 16px 8px;
  border-bottom: 1px solid rgba(10,10,10,0.08);
  flex-shrink: 0;
}
.rb-section-label {
  font-family: var(--mono-f);
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--mute);
  margin-bottom: 8px;
}

/* mode grid */
.rb-mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.rb-mode-btn {
  padding: 11px 12px;
  border: 1.5px solid var(--ink);
  background: var(--bone);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: all 0.08s;
}
.rb-mode-btn.selected {
  background: var(--ink);
  color: var(--bone);
  box-shadow: 4px 4px 0 var(--red);
}
.rb-mode-name {
  font-family: var(--disp-f);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}
.rb-mode-desc {
  font-family: var(--mono-f);
  font-size: 9px;
  margin-top: 3px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* stake row */
.rb-stake-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.rb-win-preview {
  font-family: var(--mono-f);
  font-size: 9.5px;
  color: var(--mute);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.rb-stake-row {
  display: flex;
  gap: 4px;
}
.rb-stake-btn {
  flex: 1;
  padding: 10px 0;
  border: 1.5px solid var(--ink);
  background: var(--bone);
  color: var(--ink);
  font-family: var(--mono-f);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.08s;
}
.rb-stake-btn.selected {
  background: var(--red);
  color: var(--bone);
  border-color: var(--ink);
}
.rb-stake-btn:active { transform: translate(1px,1px); }

/* FREE stake button — subtle, muted appearance */
.rb-stake-free {
  border-style: dashed;
  border-color: var(--mute);
  color: var(--mute);
  font-size: 10px;
  letter-spacing: 0.12em;
  flex: 0 0 auto;
  padding: 10px 8px;
}
.rb-stake-free.selected {
  background: var(--mute);
  color: var(--bone);
  border-color: var(--mute);
  border-style: solid;
}

/* rooms header */
.rb-rooms-header {
  padding: 10px 16px 6px;
  flex-shrink: 0;
}

/* room list scroll area */
.rb-my-room, .rb-list {
  background: var(--bone) !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.rb-list { flex: 1; padding: 0 16px; }
.rb-my-room { padding: 0 16px; }

/* room cards (built by JS) */
.rb-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  background: var(--bone);
  border: 1.5px solid var(--ink);
  cursor: pointer;
  text-align: left;
  width: 100%;
  position: relative;
}
.rb-card:active { transform: translate(1px,1px); }
.rb-card.own-room { border-color: var(--red); }

.rb-avatar {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--disp-f);
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
  border-radius: 0;
}
.rb-card-info { flex: 1; min-width: 0; }
.rb-card-name {
  font-family: var(--disp-f);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rb-card-meta {
  font-family: var(--mono-f);
  font-size: 9.5px;
  color: var(--mute);
  margin-top: 3px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rb-card-amount {
  font-family: var(--disp-f);
  font-size: 20px;
  font-weight: 800;
  color: var(--red);
  line-height: 1;
  flex-shrink: 0;
}
.rb-join {
  display: block;
  font-family: var(--mono-f);
  font-size: 9px;
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 2px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-align: right;
}
.rb-my-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.rb-status {
  font-family: var(--mono-f);
  font-size: 9px;
  color: var(--acid);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: var(--ink);
  padding: 2px 6px;
}
.rb-cancel {
  font-family: var(--mono-f);
  font-size: 9px;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: none;
  border: 1px solid var(--red);
  cursor: pointer;
  padding: 2px 6px;
}

/* ── ROOM BROWSER — PRACTICE STRIP ──────────────────────────── */
.rb-practice-zone {
  padding: 10px 16px 10px;
  border-top: 1.5px solid var(--ink);
  flex-shrink: 0;
}
.rb-practice-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 8px 14px;
  background: var(--bone);
  border: 1.5px solid var(--ink);
  cursor: pointer;
  text-align: left;
  transition: all 0.08s;
}
.rb-practice-strip:active {
  background: var(--ink);
  color: var(--bone);
}
.rb-practice-strip:active .rb-practice-txt,
.rb-practice-strip:active .rb-practice-arr { color: var(--bone); }
.rb-practice-tag {
  display: block;
  font-family: var(--mono-f);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--mute);
}
.rb-practice-txt {
  display: block;
  font-family: var(--disp-f);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-top: 1px;
}
.rb-practice-arr {
  font-family: var(--mono-f);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.rb-practice-picker {
  padding: 0;
}
.rb-practice-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.rb-practice-close {
  background: none;
  border: none;
  font-family: var(--mono-f);
  font-size: 13px;
  color: var(--mute);
  cursor: pointer;
  padding: 2px 4px;
}

/* bottom create bar */
.rb-bottom {
  background: var(--bone) !important;
  border-top: 1.5px solid var(--ink) !important;
  padding: 10px 16px 14px !important;
  flex-shrink: 0;
}
.rb-create-btn {
  display: block;
  width: 100%;
  padding: 20px;
  background: var(--ink) !important;
  color: var(--bone) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--mono-f) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  cursor: pointer;
}
.rb-create-btn:active { transform: translate(2px,2px) !important; }

/* ── GRID BG (used in countdown + previews) ──────────────────── */
.grid-bg {
  background-image:
    linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px);
  background-size: 16px 16px;
}
.grid-bg-dark {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 16px 16px;
}

/* ── RACE OVERLAY — full VS slam (practice + multiplayer) ─── */
.race-overlay {
  background: rgba(10,10,10,0.96) !important;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px) !important;
  background-size: 16px 16px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 16px !important;
}

/* top: mode label + pot */
.ro-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 18px;
}
.ro-mode {
  font-family: var(--mono-f);
  font-size: 9px;
  font-weight: 700;
  color: var(--mute-2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.ro-pot-row {
  font-family: var(--mono-f);
  font-size: 9px;
  font-weight: 700;
  color: var(--mute-2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ro-pot-amt {
  color: var(--acid);
  font-weight: 800;
}

/* players + VS row */
.ro-players {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
  width: 100%;
}
.ro-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
}
.ro-avatar {
  width: 72px;
  height: 72px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--disp-f);
  font-size: 28px;
  font-weight: 800;
  color: var(--ink);
}
.ro-av1 { background: var(--acid); }
.ro-av2 { background: var(--red); color: var(--bone); }
.ro-name {
  font-family: var(--mono-f);
  font-size: 9px;
  font-weight: 700;
  color: var(--mute-2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ro-vsword {
  font-family: var(--disp-f);
  font-size: 52px;
  font-weight: 800;
  font-style: italic;
  color: var(--red);
  letter-spacing: -0.06em;
  line-height: 1;
  flex-shrink: 0;
}

/* countdown label + number */
.race-label {
  font-family: var(--mono-f) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--mute-2) !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}
.race-number {
  font-family: var(--disp-f) !important;
  font-weight: 800 !important;
  color: var(--bone) !important;
  text-shadow: none !important;
  animation: brandRacePulse 0.25s ease-out !important;
  line-height: 0.85 !important;
  letter-spacing: -0.06em !important;
}
.race-number.go {
  color: var(--acid) !important;
  text-shadow: none !important;
  animation: brandRaceGo 0.5s ease-out forwards !important;
}
.race-number.warning {
  color: var(--red) !important;
  text-shadow: none !important;
  animation: brandRacePulse 0.25s ease-out !important;
}
@keyframes brandRacePulse {
  0%   { transform: scale(1.4); opacity: 0; }
  60%  { transform: scale(0.97); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes brandRaceGo {
  0%   { transform: scale(1.2); opacity: 1; }
  60%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.85); opacity: 0; }
}

/* no backing out */
.ro-noback {
  font-family: var(--mono-f);
  font-size: 10px;
  font-weight: 700;
  color: var(--acid);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 14px;
}

/* ── MATCH COUNTDOWN — VS slam screen (vss-* classes avoid style.css conflicts) ── */
#matchCountdownScreen {
  /* base: let showScreen() control display via .active — do NOT force display here */
  color: var(--bone) !important;
  overflow: hidden !important;
  min-height: unset !important;
}
#matchCountdownScreen.active {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  height: 100dvh !important;
  height: 100vh !important;
  padding: 0 !important;
  background: var(--ink) !important;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px) !important;
  background-size: 16px 16px !important;
}

/* status bar */
.vss-bar {
  flex-shrink: 0;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.vss-locked {
  font-family: var(--mono-f);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--red);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.vss-room {
  font-family: var(--mono-f);
  font-size: 9.5px;
  color: var(--mute-2);
  letter-spacing: 0.1em;
}

/* mode + pot row */
.vss-meta {
  flex-shrink: 0;
  text-align: center;
  padding: 14px 22px 0;
}
.vss-headup {
  font-family: var(--mono-f);
  font-size: 11px;
  font-weight: 700;
  color: var(--red);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.vss-pot {
  font-family: var(--mono-f);
  font-size: 13px;
  color: var(--mute-2);
  letter-spacing: 0.06em;
}
.vss-pot-amt {
  font-family: var(--disp-f);
  font-weight: 800;
  color: var(--bone);
}

/* center content — takes all remaining space and centers its children */
.vss-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
}

/* players row */
.vss-players {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 16px;
}
.vss-side { text-align: center; }
.vss-vsword {
  font-family: var(--disp-f);
  font-size: 90px;
  font-weight: 800;
  font-style: italic;
  color: var(--red);
  letter-spacing: -0.06em;
  line-height: 0.85;
  padding: 0 4px;
}
.vss-avatar {
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--disp-f);
  font-weight: 800;
  font-size: 30px;
  border-radius: 0;
  border: 1.5px solid rgba(255,255,255,0.12);
  margin: 0 auto 8px;
}
.vss-av1 { background: var(--acid); color: var(--ink); }
.vss-av2 { background: var(--red);  color: var(--bone); }
.vss-name {
  font-family: var(--disp-f);
  font-size: 14px;
  font-weight: 800;
  color: var(--bone);
  max-width: 88px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0 auto;
}
.vss-elo {
  font-family: var(--mono-f);
  font-size: 9.5px;
  color: var(--mute-2);
  margin-top: 3px;
  letter-spacing: 0.1em;
  text-align: center;
}

/* big countdown number */
.vss-num {
  font-family: var(--disp-f);
  font-size: 168px;
  font-weight: 800;
  color: var(--bone);
  line-height: 0.8;
  letter-spacing: -0.08em;
  text-align: center;
  transition: color 0.18s;
}
.vss-num.urgent { color: var(--red); }

.vss-noback {
  font-family: var(--mono-f);
  font-size: 11px;
  font-weight: 700;
  color: var(--acid);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 8px;
}

/* proof card */
.vss-proof {
  flex-shrink: 0;
  margin: 0 16px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 10px 12px;
}
.vss-proof-lbl {
  font-family: var(--mono-f);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute-2);
  margin-bottom: 4px;
}
.vss-proof-hash {
  font-family: var(--mono-f);
  font-size: 10px;
  color: var(--bone);
  word-break: break-all;
}

/* hide old compat stubs */
.mc-status { display: none !important; }
.mc-mode, .mc-wager { display: none !important; }

/* ── USER INFO (misc screens) ─────────────────────────────────── */
.user-info {
  background: var(--bone-2) !important;
  border: 1.5px solid var(--ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.user-name { color: var(--ink) !important; font-family: var(--disp-f) !important; font-weight: 800 !important; }
.balance { color: var(--ink) !important; text-shadow: none !important; animation: none !important; }
.balance-amount { color: var(--ink) !important; font-family: var(--mono-f) !important; font-weight: 800 !important; }
.balance-label, .currency { color: var(--mute) !important; font-family: var(--mono-f) !important; }

/* ── WAITING ROOM ─────────────────────────────────────────────── */
.game-info-box {
  background: var(--bone-2) !important;
  border: 1.5px solid var(--ink) !important;
  border-radius: 0 !important;
}
.waiting-text { color: var(--ink) !important; font-family: var(--mono-f) !important; }
.pulse-circle { border-color: var(--red) !important; border-top-color: transparent !important; }
.countdown-timer { font-family: var(--mono-f) !important; color: var(--mute) !important; }

/* ── DEPOSIT / WITHDRAW SCREENS ──────────────────────────────── */
#depositScreen, #withdrawScreen {
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  overflow: hidden !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: unset !important;
}
#depositScreen.active, #withdrawScreen.active {
  display: flex !important;
}

.dep-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  min-height: 0;
}
.dep-scroll::-webkit-scrollbar { width: 0; height: 0; }

.dep-balance-card {
  padding: 14px 16px;
  margin-bottom: 14px;
  border: 1.5px solid var(--ink);
  background: var(--bone);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dep-bal-label {
  font-family: var(--mono-f);
  font-size: 9px;
  color: var(--mute);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.dep-bal-num {
  font-family: var(--disp-f);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.dep-bal-num::before { content: '$'; }
.dep-usdt-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--mono-f);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.dep-div-label {
  font-family: var(--mono-f);
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--mute);
  margin-bottom: 10px;
}
.dep-amt-row {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}
.dep-amt-btn {
  flex: 1;
  padding: 12px 0;
  border: 1.5px solid var(--ink);
  background: var(--bone);
  color: var(--ink);
  font-family: var(--mono-f);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.08s;
}
.dep-amt-btn.selected {
  background: var(--ink);
  color: var(--bone);
}
.dep-amt-btn:active { opacity: 0.7; }
.dep-big-input {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--ink) !important;
  background: var(--bone) !important;
  font-family: var(--disp-f) !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  outline: none;
  text-align: center;
  margin-bottom: 14px;
  color: var(--ink) !important;
  box-sizing: border-box;
  display: block;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.dep-big-input:focus { border-color: var(--red) !important; }
.dep-big-input.over { border-color: var(--red) !important; color: var(--red) !important; }
.dep-addr-card {
  padding: 12px;
  margin-bottom: 10px;
  border: 1.5px solid var(--ink);
  background: var(--bone);
}
.dep-addr-text {
  font-family: var(--mono-f);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  word-break: break-all;
  color: var(--ink);
  margin-bottom: 10px;
}
.dep-copy-btn {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: var(--bone);
  font-family: var(--mono-f);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  cursor: pointer;
  text-transform: uppercase;
  text-align: center;
  transition: all 0.12s;
  border-radius: 0;
}
.dep-copy-btn.copied {
  background: var(--acid) !important;
  color: var(--ink) !important;
  border-color: var(--ink) !important;
}
.dep-qr-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90px;
  border: 1.5px dashed var(--ink);
  margin-bottom: 14px;
  font-family: var(--mono-f);
  font-size: 10px;
  color: var(--mute);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.dep-credit-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  margin-bottom: 10px;
}
.dep-credit-label {
  font-family: var(--mono-f);
  font-size: 11px;
  color: var(--mute);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}
.dep-credit-amt {
  font-family: var(--disp-f);
  font-size: 20px;
  font-weight: 800;
  color: var(--red);
}
.dep-bottom-bar {
  padding: 10px 16px 14px;
  border-top: 1.5px solid var(--ink);
  background: var(--bone);
  flex-shrink: 0;
}
.dep-bottom-note {
  font-family: var(--mono-f);
  font-size: 9px;
  color: var(--mute);
  letter-spacing: 0.14em;
  text-align: center;
  margin-top: 8px;
  text-transform: uppercase;
}

/* Withdraw-specific */
.dep-over-error {
  font-family: var(--mono-f);
  font-size: 10px;
  color: var(--red);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 12px;
  text-align: center;
}
.dep-addr-input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--ink) !important;
  background: var(--bone) !important;
  font-family: var(--mono-f) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  outline: none;
  margin-bottom: 6px;
  color: var(--ink) !important;
  display: block;
  box-sizing: border-box;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.dep-addr-input:focus { border-color: var(--red) !important; }
.dep-addr-warn {
  font-family: var(--mono-f);
  font-size: 9px;
  color: var(--mute);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.dep-fee-box {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 10px 0;
  margin-bottom: 14px;
}
.dep-fee-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.dep-fee-row:last-child { margin-bottom: 0; }
.dep-fee-label {
  font-family: var(--mono-f);
  font-size: 11px;
  color: var(--mute);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.dep-fee-amt {
  font-family: var(--mono-f);
  font-size: 12px;
  font-weight: 700;
  color: var(--mute);
}
.dep-receive-amt {
  font-family: var(--disp-f);
  font-size: 22px;
  font-weight: 800;
  color: var(--red);
}

/* legacy – keep for old JS compat */
.address-box {
  background: var(--bone-2) !important;
  border: 1.5px solid var(--ink) !important;
  border-radius: 0 !important;
  font-family: var(--mono-f) !important;
  color: var(--ink) !important;
}
.btn-small {
  background: var(--ink) !important; color: var(--bone) !important;
  border: none !important; border-radius: 0 !important;
  font-family: var(--mono-f) !important;
}
#withdrawFeeNote { font-family: var(--mono-f) !important; color: var(--mute) !important; font-size: 10px !important; }

/* ── CHAT WIDGET ──────────────────────────────────────────────── */
.cw-widget {
  position: fixed;
  bottom: 20px;
  left: 16px;
  z-index: 5000;
}
/* Lift chat bubble above the sticky create-room + practice buttons in room browser */
body:has(#roomBrowserScreen.active) .cw-widget {
  bottom: 160px;
}
.cw-panel {
  flex-direction: column;
  position: absolute;
  bottom: 52px;
  left: 0;
  width: 290px;
  height: 360px;
  background: var(--bone);
  border: 1.5px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  overflow: hidden;
}
.cw-head {
  padding: 10px 12px;
  background: var(--ink);
  border-bottom: 1.5px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.cw-head-lbl {
  font-family: var(--mono-f);
  font-size: 10px;
  font-weight: 700;
  color: var(--bone);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.cw-close {
  background: none;
  border: none;
  color: var(--mute);
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  font-family: var(--mono-f);
}
.cw-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--bone);
}
.cw-foot {
  padding: 8px 10px;
  border-top: 1.5px solid var(--ink);
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  background: var(--bone);
}
.cw-input {
  flex: 1;
  background: var(--bone-2);
  border: 1.5px solid var(--ink);
  border-radius: 0;
  padding: 7px 9px;
  color: var(--ink);
  font-family: var(--mono-f);
  font-size: 11px;
  outline: none;
}
.cw-input::placeholder { color: var(--mute); }
.cw-send {
  background: var(--ink);
  border: none;
  padding: 7px 10px;
  color: var(--bone);
  font-family: var(--mono-f);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
  flex-shrink: 0;
}
.cw-bubble-wrap { position: relative; display: inline-block; }
.cw-bubble {
  width: 56px;
  height: 36px;
  border-radius: 0;
  background: var(--ink);
  border: 1.5px solid var(--bone);
  color: var(--bone);
  font-family: var(--mono-f);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  cursor: pointer;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cw-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--red);
  color: var(--bone);
  border-radius: 0;
  min-width: 16px;
  height: 16px;
  font-family: var(--mono-f);
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
  pointer-events: none;
}

/* ── REMATCH BANNER ───────────────────────────────────────────── */
.rematch-offer-banner {
  background: var(--ink) !important;
  border-bottom: 1.5px solid var(--red) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.rematch-offer-btn.accept {
  background: var(--red) !important; color: var(--bone) !important;
  border-radius: 0 !important; border: 1.5px solid var(--ink) !important;
}
.rematch-offer-btn.decline {
  background: transparent !important; color: var(--bone) !important;
  border-radius: 0 !important; border: 1.5px solid var(--mute) !important;
}

/* ── RECONNECT OVERLAY ────────────────────────────────────────── */
#reconnectOverlay > div:first-child {
  border-color: var(--bone) !important; border-top-color: transparent !important;
}

/* ── AI MODE MODAL ────────────────────────────────────────────── */
.ai-mode-modal { background: rgba(10,10,10,0.85) !important; }
.ai-mode-content {
  background: var(--bone) !important;
  border: 1.5px solid var(--ink) !important;
  border-radius: 0 !important;
  box-shadow: 6px 6px 0 var(--ink) !important;
}
.ai-mode-content h2 { font-family: var(--disp-f) !important; color: var(--ink) !important; font-weight: 800 !important; }

/* ── PRACTICE SCREEN ─────────────────────────────────────────── */
#practiceScreen {
  background: var(--bone) !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  overflow: hidden !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: unset !important;
}
#practiceScreen.active {
  display: flex !important;
}

.prac-label-section {
  padding: 14px 18px 10px;
  flex-shrink: 0;
}
.prac-sparring-label {
  font-family: var(--mono-f);
  font-size: 10px;
  font-weight: 700;
  color: var(--red);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.prac-question {
  font-family: var(--disp-f);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.prac-question-mark { color: var(--red); }

.prac-cards {
  flex: 1;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}

.prac-card {
  flex: 1;
  padding: 0;
  display: flex;
  flex-direction: column;
  text-align: left;
  cursor: pointer;
  border: 1.5px solid var(--ink);
  overflow: hidden;
  min-height: 0;
  transition: box-shadow 0.1s, transform 0.1s;
}
.prac-classic { background: var(--bone); }
.prac-chaotic { background: var(--ink); color: var(--bone); }

.prac-classic:hover { box-shadow: 4px 4px 0 var(--ink); transform: translate(-2px,-2px); }
.prac-chaotic:hover { box-shadow: 4px 4px 0 var(--red); transform: translate(-2px,-2px); }
.prac-card:active { opacity: 0.85; }

.prac-card-top {
  padding: 14px 16px 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.prac-card-main { flex: 1; }

.prac-chips {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.prac-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid currentColor;
  font-family: var(--mono-f);
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1;
}
.prac-chip-ink  { color: var(--ink); border-color: var(--ink); }
.prac-chip-red  { color: var(--red); border-color: var(--red); }
.prac-chip-bone { color: var(--bone); border-color: var(--bone); }

.prac-card-title {
  font-family: var(--disp-f);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.95;
}
.prac-classic .prac-card-title { color: var(--ink); }
.prac-chaotic .prac-card-title { color: var(--bone); }
.prac-chaotic-dot { color: var(--red); font-style: italic; }

.prac-card-sub {
  font-family: var(--mono-f);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-top: 6px;
}
.prac-classic .prac-card-sub { color: var(--mute); }
.prac-chaotic .prac-card-sub { color: var(--mute-2); }

.prac-card-arrow {
  font-family: var(--disp-f);
  font-size: 32px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.06em;
  line-height: 0.8;
  flex-shrink: 0;
}
.prac-arrow-ink { color: var(--ink); }
.prac-arrow-red { color: var(--red); }

.prac-preview {
  height: 78px;
  border-top: 1px solid var(--ink);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.prac-preview-classic { background: var(--bone-2); }
.prac-preview-chaotic { background: #000; border-top-color: rgba(255,255,255,0.15); }
.prac-preview-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.prac-preview-label {
  position: absolute;
  bottom: 6px;
  left: 10px;
  font-family: var(--mono-f);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.prac-classic .prac-preview-label { color: var(--mute); }
.prac-chaotic .prac-preview-label { color: var(--mute-2); }

.prac-footer {
  padding: 8px 18px 14px;
  border-top: 1.5px solid var(--ink);
  background: var(--bone);
  flex-shrink: 0;
}
.prac-footer-text {
  font-family: var(--mono-f);
  font-size: 9px;
  color: var(--mute);
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
}

/* ── GAME SCREEN — full-viewport, no scroll ───────────────────── */
#gameScreen {
  padding: 0 !important;
  height: 100vh !important;
  max-height: 100vh !important;
  min-height: unset !important;
  overflow: hidden !important;
  background: var(--ink) !important;
}
#gameScreen.active {
  display: block !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
}
#gameScreen .game-container {
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  background: var(--ink) !important;
}

/* ── GAME SCREEN — hide center status text ───────────────────── */
#gameScreen .game-status {
  display: none !important;
}

/* ── GAME INFO BAR (HUD) — 3-col layout ──────────────────────── */
.game-info-bar {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 10px !important;
  height: 52px !important;
  background: var(--ink) !important;
  border-bottom: 1px solid var(--line) !important;
  flex-shrink: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.gib-side {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.gib-p2-side { justify-content: flex-end; }

.gib-avatar {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--disp-f);
  font-weight: 800;
  font-size: 12px;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.gib-av-acid { background: var(--acid); color: var(--ink); }
.gib-av-red  { background: var(--red);  color: var(--bone); }

.gib-pinfo {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}
.gib-pinfo-r { align-items: flex-end; }

.gib-name {
  font-family: var(--disp-f);
  font-size: 10px;
  font-weight: 700;
  color: var(--mute-2);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 72px;
  line-height: 1;
}
.gib-name-r { text-align: right; }

.gib-score {
  font-family: var(--disp-f);
  font-size: 20px;
  font-weight: 800;
  color: var(--bone);
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.gib-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 10px;
  flex-shrink: 0;
}
.gib-round-label {
  font-family: var(--mono-f);
  font-size: 8px;
  font-weight: 600;
  color: var(--mute);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 2px;
}
.gib-timer {
  font-family: var(--mono-f);
  font-size: 14px;
  font-weight: 700;
  color: var(--acid);
  letter-spacing: 0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* hide old game-info-bar children that might bleed through */
.game-info-bar .game-player,
.game-info-bar .game-round,
.game-info-bar .score:not(.gib-score),
.game-info-bar .game-timer:not(.gib-timer) { display: none !important; }

/* ── RESULT SCREEN ────────────────────────────────────────────── */
#resultScreen {
  background: var(--bone) !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  overflow: hidden !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: unset !important;
}
#resultScreen.active {
  display: flex !important;
}

.rs-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px 16px;
  min-height: 0;
}
.rs-scroll::-webkit-scrollbar { width: 0; height: 0; }

/* Head: outcome tag + big title + amount */
.rs-head {
  padding: 16px 0 12px;
  text-align: center;
  border-bottom: 1px solid rgba(10,10,10,0.08);
  margin-bottom: 14px;
}
.rs-outcome-tag {
  font-family: var(--mono-f);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 4px;
}
.rs-outcome-tag.lose { color: var(--mute); }
.rs-outcome-tag.draw { color: var(--mute-2); }

.rs-big-title {
  font-family: var(--disp-f);
  font-size: 92px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.06em;
  line-height: 0.85;
  color: var(--ink);
  animation: none !important;
  text-shadow: none !important;
}
.rs-big-title.lose { color: var(--red); }
.rs-big-title.draw { color: var(--mute); }

/* amountWon reused ID */
#resultScreen #amountWon {
  display: block;
  font-family: var(--disp-f) !important;
  font-size: 36px !important;
  font-weight: 800 !important;
  color: var(--red) !important;
  letter-spacing: -0.03em !important;
  margin-top: 6px;
  text-shadow: none !important;
  animation: none !important;
}

/* Win Ticket (trade receipt) */
.rs-ticket {
  background: var(--ink);
  border: 1.5px solid var(--ink);
  color: var(--bone);
  margin-bottom: 14px;
  overflow: hidden;
  position: relative;
}
.rs-ticket-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--line);
}
.rs-ticket-brand {
  font-family: var(--disp-f);
  font-size: 13px;
  font-weight: 800;
  font-style: italic;
  color: var(--bone);
  letter-spacing: -0.02em;
}
.rs-ticket-tag-chip {
  font-family: var(--mono-f);
  font-size: 9px;
  font-weight: 700;
  color: var(--acid);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.rs-ticket-body {
  padding: 8px 14px 4px;
  border-bottom: 1px dashed var(--line);
}
.rs-ticket-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.rs-ticket-row:last-child { border-bottom: none; }
.rs-ticket-field {
  font-family: var(--mono-f);
  font-size: 9px;
  font-weight: 600;
  color: var(--mute);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.rs-ticket-val {
  font-family: var(--disp-f);
  font-size: 13px;
  font-weight: 800;
  color: var(--bone);
  letter-spacing: -0.01em;
}
.rs-ticket-mono {
  font-family: var(--mono-f) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}
.rs-ticket-outcome { color: var(--acid); font-size: 18px; }
.rs-ticket-pnl     { } /* color set dynamically by JS based on outcome */
.rs-ticket-amount  { font-size: 15px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

.rs-ticket-qr-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
}
.rs-ticket-qr {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  image-rendering: pixelated;
  border: 1.5px solid var(--line);
}
.rs-ticket-qr-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rs-ticket-qr-label {
  font-family: var(--mono-f);
  font-size: 9px;
  font-weight: 700;
  color: var(--mute-2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.rs-ticket-qr-sub {
  font-family: var(--mono-f);
  font-size: 10px;
  color: var(--bone);
  letter-spacing: 0.04em;
}
.rs-ticket-pdf-btn {
  display: inline-block;
  padding: 6px 10px;
  background: var(--acid);
  border: none;
  border-radius: 0;
  font-family: var(--mono-f);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--ink);
  margin-top: 2px;
  align-self: flex-start;
}
.rs-ticket-pdf-btn:active { opacity: 0.7; }
.rs-ticket-foot {
  padding: 6px 14px;
  border-top: 1px dashed var(--line);
  font-family: var(--mono-f);
  font-size: 9px;
  color: var(--mute);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}

/* Stats row */
.rs-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.rs-stat-card {
  padding: 9px 10px;
  border: 1.5px solid var(--ink);
  background: var(--bone);
  text-align: center;
}
.rs-stat-lbl {
  font-family: var(--mono-f);
  font-size: 9px;
  color: var(--mute);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.rs-stat-val {
  font-family: var(--disp-f);
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
}
.rs-stat-val.rs-stat-red { color: var(--red); }

/* finalScore reused ID */
#resultScreen #finalScore {
  font-family: var(--disp-f) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  letter-spacing: -0.02em !important;
}

/* Actions area */
.rs-actions {
  border-top: 1.5px solid var(--ink);
  padding: 10px 16px 14px;
  background: var(--bone);
  flex-shrink: 0;
}
.rs-action-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.rs-rematch-btn {
  flex: 2;
  padding: 15px 12px;
  background: var(--red);
  color: var(--bone);
  border: 1.5px solid var(--ink);
  border-radius: 0;
  font-family: var(--mono-f);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink);
}
.rs-rematch-btn:active { transform: translate(2px,2px); box-shadow: none; }
.rs-double-btn {
  flex: 1;
  padding: 15px 8px;
  background: var(--ink);
  color: var(--bone);
  border: 1.5px solid var(--ink);
  border-radius: 0;
  font-family: var(--mono-f);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--red);
}
.rs-double-btn:active { transform: translate(2px,2px); box-shadow: none; }
.rs-back-btn {
  display: block;
  width: 100%;
  padding: 12px;
  background: transparent;
  border: none;
  font-family: var(--mono-f);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  cursor: pointer;
  text-align: center;
  margin-bottom: 6px;
}
.rs-back-btn:active { opacity: 0.6; }
.rs-proof-line {
  font-family: var(--mono-f);
  font-size: 9px;
  color: var(--mute);
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
}

/* ── CREATE ROOM CONFIRM SHEET ────────────────────────────────── */
#createRoomConfirm.active-overlay {
  display: flex !important;
}
.crc-sheet {
  background: var(--bone);
  border: 1.5px solid var(--ink);
  border-bottom: none;
  width: 100%;
  max-width: 480px;
  padding: 0 0 8px;
}
.crc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(10,10,10,0.1);
  margin-bottom: 4px;
}
.crc-eyebrow {
  font-family: var(--mono-f);
  font-size: 11px;
  font-weight: 700;
  color: var(--red);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.crc-close {
  background: none;
  border: none;
  font-family: var(--mono-f);
  font-size: 16px;
  color: var(--mute);
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
}
.crc-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 16px;
  border-bottom: 1px solid rgba(10,10,10,0.05);
}
.crc-lbl {
  font-family: var(--mono-f);
  font-size: 10px;
  font-weight: 600;
  color: var(--mute);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.crc-val {
  font-family: var(--disp-f);
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.crc-val-big {
  font-size: 22px;
}
.crc-divider {
  height: 1px;
  background: rgba(10,10,10,0.08);
  margin: 6px 16px;
}
.crc-note {
  font-family: var(--mono-f);
  font-size: 9.5px;
  color: var(--mute);
  letter-spacing: 0.06em;
  padding: 6px 16px 10px;
  text-transform: uppercase;
}
.crc-confirm-btn {
  display: block;
  width: calc(100% - 32px);
  margin: 4px 16px;
  padding: 16px;
  background: var(--ink);
  color: var(--bone);
  border: none;
  font-family: var(--mono-f);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--red);
  transition: transform 0.08s, box-shadow 0.08s;
}
.crc-confirm-btn:active { transform: translate(2px,2px); box-shadow: none; }
.crc-cancel-txt {
  display: block;
  width: 100%;
  padding: 12px;
  background: none;
  border: none;
  font-family: var(--mono-f);
  font-size: 11px;
  font-weight: 600;
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  text-align: center;
}

/* ── ANIMATED PADDLE ELEMENTS (practice previews) ────────────── */
.prac-pp {
  position: absolute;
  width: 4px;
  height: 22px;
  top: 50%;
  transform: translateY(-50%);
}
.prac-preview-classic .prac-pp-l  { background: var(--acid); left: 14px; }
.prac-preview-classic .prac-pp-r  { background: var(--red); right: 14px; }
.prac-preview-chaotic .prac-pp-ch-l { background: var(--acid); left: 14px; }
.prac-preview-chaotic .prac-pp-ch-r { background: var(--red); right: 14px; }

.prac-pb {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.prac-pb-classic  { background: var(--ink); }
.prac-pb-chaotic  { background: var(--bone); box-shadow: 0 0 6px rgba(255,255,255,0.5); }

.prac-midline {
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 0;
  border-left: 1px dashed rgba(10,10,10,0.18);
}

.prac-pu {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1.5px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono-f);
  font-size: 9px;
  font-weight: 700;
}
.prac-pu-acid { color: var(--acid); }
.prac-pu-red  { color: var(--red); }
.prac-pu-gold { color: var(--gold); }

/* ── ROOM BROWSER — CHAOTIC DARK THEME ──────────────────────── */
#roomBrowserScreen.rb-mode-chaotic {
  background: #111 !important;
}
#roomBrowserScreen.rb-mode-chaotic .gam-status-bar {
  color: var(--mute-2) !important;
  border-bottom-color: var(--line) !important;
}
#roomBrowserScreen.rb-mode-chaotic .rb-backbar {
  border-bottom-color: var(--line) !important;
}
#roomBrowserScreen.rb-mode-chaotic .rb-back-btn,
#roomBrowserScreen.rb-mode-chaotic .rb-screen-title {
  color: var(--bone) !important;
}
#roomBrowserScreen.rb-mode-chaotic .rb-section {
  border-bottom-color: var(--line) !important;
}
#roomBrowserScreen.rb-mode-chaotic .rb-section-label,
#roomBrowserScreen.rb-mode-chaotic .rb-rooms-header .rb-section-label {
  color: var(--mute-2) !important;
}
#roomBrowserScreen.rb-mode-chaotic .rb-mode-btn {
  background: #1a1a16 !important;
  border-color: var(--line) !important;
  color: var(--bone) !important;
}
#roomBrowserScreen.rb-mode-chaotic .rb-mode-btn.selected {
  background: var(--ink-3) !important;
  box-shadow: 4px 4px 0 var(--red) !important;
  color: var(--bone) !important;
}
#roomBrowserScreen.rb-mode-chaotic .rb-mode-name { color: inherit !important; }
#roomBrowserScreen.rb-mode-chaotic .rb-stake-btn {
  background: #1a1a16 !important;
  border-color: var(--line) !important;
  color: var(--bone) !important;
}
#roomBrowserScreen.rb-mode-chaotic .rb-stake-btn.selected {
  background: var(--red) !important;
  color: var(--bone) !important;
  border-color: var(--red) !important;
}
#roomBrowserScreen.rb-mode-chaotic .rb-win-preview { color: var(--mute-2) !important; }
#roomBrowserScreen.rb-mode-chaotic .rb-list,
#roomBrowserScreen.rb-mode-chaotic .rb-my-room {
  background: #111 !important;
}
#roomBrowserScreen.rb-mode-chaotic .rb-card {
  background: #1a1a16 !important;
  border-color: var(--line) !important;
}
#roomBrowserScreen.rb-mode-chaotic .rb-card-name { color: var(--bone) !important; }
#roomBrowserScreen.rb-mode-chaotic .rb-card-meta { color: var(--mute-2) !important; }
#roomBrowserScreen.rb-mode-chaotic .rb-avatar { background: var(--ink-3) !important; }
#roomBrowserScreen.rb-mode-chaotic .rb-list-empty { color: var(--mute-2) !important; }
#roomBrowserScreen.rb-mode-chaotic .rb-list-empty svg { stroke: var(--mute) !important; }
#roomBrowserScreen.rb-mode-chaotic .rb-practice-zone {
  background: #111 !important;
  border-top-color: var(--line) !important;
}
#roomBrowserScreen.rb-mode-chaotic .rb-practice-strip {
  background: #1a1a16 !important;
  border-color: var(--line) !important;
}
#roomBrowserScreen.rb-mode-chaotic .rb-practice-tag,
#roomBrowserScreen.rb-mode-chaotic .rb-practice-txt,
#roomBrowserScreen.rb-mode-chaotic .rb-practice-arr { color: var(--bone) !important; }
#roomBrowserScreen.rb-mode-chaotic .rb-bottom {
  background: #111 !important;
  border-top-color: var(--line) !important;
}
#roomBrowserScreen.rb-mode-chaotic .rb-create-btn {
  background: var(--red) !important;
}

/* ── STATISTICS SCREEN ────────────────────────────────────────── */
#statsScreen.active {
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  height: 100vh !important;
  min-height: unset !important;
  background: var(--bone) !important;
  overflow: hidden !important;
}
.st-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 14px 0;
}
.st-scroll::-webkit-scrollbar { width: 0; }

/* ELO hero block */
.st-elo-card {
  background: var(--ink);
  padding: 24px 20px 20px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.st-elo-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--acid);
}
.st-elo-eyebrow {
  font-family: var(--mono-f);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute-2);
  margin-bottom: 8px;
}
.st-elo-num {
  font-family: var(--disp-f);
  font-size: 4rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--bone);
}
.st-elo-label {
  font-family: var(--mono-f);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--acid);
  margin-top: 8px;
  text-transform: uppercase;
}

/* Section label */
.st-section-lbl {
  font-family: var(--mono-f);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 4px 0 10px;
}

/* Three-column performance row */
.st-trio {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border: 1.5px solid var(--ink);
  margin-bottom: 16px;
}
.st-trio-cell {
  padding: 14px 10px;
  text-align: center;
}
.st-trio-mid {
  border-left: 1.5px solid var(--ink);
  border-right: 1.5px solid var(--ink);
}
.st-trio-val {
  font-family: var(--disp-f);
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 4px;
}
.st-val-acid { color: var(--acid) !important; -webkit-text-stroke: 1px var(--ink); }
.st-val-red  { color: var(--red) !important; }
.st-trio-lbl {
  font-family: var(--mono-f);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
}

/* Two-column money row */
.st-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1.5px solid var(--ink);
  margin-bottom: 16px;
}
.st-duo-cell { padding: 16px 14px; }
.st-duo-right { border-left: 1.5px solid var(--ink); }
.st-duo-lbl {
  font-family: var(--mono-f);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 6px;
}
.st-duo-val {
  font-family: var(--disp-f);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1;
}

/* Streak row */
.st-streak-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1.5px solid var(--ink);
  padding: 16px 16px;
  margin-bottom: 0;
}
.st-streak-eyebrow {
  font-family: var(--mono-f);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 4px;
}
.st-streak-num {
  font-family: var(--disp-f);
  font-size: 3.2rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
}
.st-streak-tag {
  font-family: var(--mono-f);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute-2);
  text-align: right;
  line-height: 1.5;
}

/* ── LEADERBOARD SCREEN ──────────────────────────────────────── */
#leaderboardScreen {
  background: var(--bone) !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  overflow: hidden !important;
  height: 100vh !important;
  min-height: unset !important;
}
#leaderboardScreen.active { display: flex !important; }

.lb-tabs {
  display: flex;
  border-bottom: 1.5px solid var(--ink);
  flex-shrink: 0;
}
.lb-tab {
  flex: 1;
  padding: 11px 0;
  background: transparent;
  border: none;
  border-right: 1px solid var(--ink);
  font-family: var(--mono-f);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.lb-tab:last-child { border-right: none; }
.lb-tab.active {
  background: var(--ink);
  color: var(--bone);
}
.lb-tab:not(.active):active { background: var(--bone-2); }

.lb-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.lb-list::-webkit-scrollbar { width: 0; }

.lb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(10,10,10,0.07);
  transition: background 0.1s;
}
.lb-row--me {
  background: rgba(200,255,0,0.06);
  border-left: 3px solid var(--acid);
}
.lb-row--me:not(:first-child) { border-top: none; }

.lb-rank {
  font-family: var(--mono-f);
  font-size: 11px;
  font-weight: 700;
  color: var(--mute);
  width: 28px;
  flex-shrink: 0;
}
.lb-rank--top1 { color: var(--gold); }
.lb-rank--top2 { color: var(--mute-2); }
.lb-rank--top3 { color: #c8945a; }

.lb-player {
  flex: 1;
  font-family: var(--disp-f);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lb-name-link {
  cursor: pointer;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(10,10,10,0.3);
}
.lb-you {
  font-family: var(--mono-f);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  background: var(--acid);
  color: var(--ink);
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: middle;
}

.lb-stat {
  font-family: var(--mono-f);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  flex-shrink: 0;
  text-align: right;
}

.lb-empty {
  padding: 32px 16px;
  font-family: var(--mono-f);
  font-size: 10px;
  font-weight: 700;
  color: var(--mute);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}

/* ── MATCH HISTORY SCREEN ────────────────────────────────────── */
#matchHistoryScreen {
  background: var(--bone) !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  overflow: hidden !important;
  height: 100vh !important;
  min-height: unset !important;
}
#matchHistoryScreen.active { display: flex !important; }

.mh-list--full {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mh-list--full::-webkit-scrollbar { width: 0; }

/* match item overrides for new full-screen layout */
.mh-list--full .mh-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(10,10,10,0.07) !important;
  border-radius: 0 !important;
}
.mh-list--full .mh-item.mh-win,
.mh-list--full .mh-item.mh-loss,
.mh-list--full .mh-item.mh-draw {
  border-left: none !important;
}
.mh-list--full .mh-result-badge {
  font-family: var(--mono-f);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 4px 7px;
  flex-shrink: 0;
  border: 1.5px solid currentColor;
}
.mh-list--full .mh-badge-win   { color: var(--acid); border-color: var(--acid); background: rgba(200,255,0,0.06); }
.mh-list--full .mh-badge-loss  { color: var(--red);  border-color: var(--red);  background: rgba(255,46,31,0.05); }
.mh-list--full .mh-badge-draw  { color: var(--mute); border-color: var(--mute); }
.mh-list--full .mh-info { flex: 1; min-width: 0; }
.mh-list--full .mh-opponent {
  font-family: var(--disp-f);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mh-list--full .mh-meta {
  font-family: var(--mono-f);
  font-size: 9px;
  color: var(--mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 2px;
}
.mh-list--full .mh-right {
  text-align: right;
  flex-shrink: 0;
}
.mh-list--full .mh-score {
  font-family: var(--mono-f);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.mh-list--full .mh-net {
  font-family: var(--mono-f);
  font-size: 12px;
  font-weight: 700;
  margin-top: 2px;
}
.mh-list--full .mh-elo {
  font-family: var(--mono-f);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-top: 1px;
}
.mh-loading {
  padding: 32px 16px;
  font-family: var(--mono-f);
  font-size: 10px;
  font-weight: 700;
  color: var(--mute);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}

/* ── SUPPORT SCREEN ──────────────────────────────────────────── */
#supportScreen {
  background: var(--bone) !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  overflow: hidden !important;
  height: 100vh !important;
  min-height: unset !important;
}
#supportScreen.active { display: flex !important; }

.sup-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 16px;
}
.sup-scroll::-webkit-scrollbar { width: 0; }

.sup-eyebrow {
  font-family: var(--mono-f);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 18px;
}

.sup-field-label {
  font-family: var(--mono-f);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 6px;
}
.sup-optional {
  color: var(--mute-2);
  font-size: 8px;
  letter-spacing: 0.1em;
}

.sup-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  background: var(--bone) !important;
  border: 1.5px solid var(--ink) !important;
  border-radius: 0 !important;
  font-family: var(--mono-f) !important;
  font-size: 13px !important;
  color: var(--ink) !important;
  outline: none;
}
.sup-input:focus { border-color: var(--red) !important; }

.sup-textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  background: var(--bone) !important;
  border: 1.5px solid var(--ink) !important;
  border-radius: 0 !important;
  font-family: var(--mono-f) !important;
  font-size: 13px !important;
  color: var(--ink) !important;
  outline: none;
  resize: none;
  line-height: 1.5;
}
.sup-textarea:focus { border-color: var(--red) !important; }

.sup-submit {
  display: block;
  width: 100%;
  margin-top: 16px;
  box-sizing: border-box;
}

.sup-note {
  font-family: var(--mono-f);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  text-align: center;
  margin-top: 16px;
  line-height: 1.6;
}

/* ── PDF PRINT — only show the win/loss ticket ───────────────── */
@media print {
  body > *:not(#resultScreen) { display: none !important; }
  #resultScreen { display: block !important; position: static !important; height: auto !important; }
  #resultScreen > *:not(.rs-ticket-print-area) { display: none !important; }
  .rs-ticket-print-area { display: block !important; }
  .rs-ticket {
    border: 1.5px solid #000 !important;
    background: #0a0a0a !important;
    color: #f4efe6 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .rs-ticket * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}