/* ============================================================
   SATOSHI SKILL — Aesthetic refresh
   Concept: editorial chess club × Bitcoin terminal.
   Warm near-black, aged-gold accents, cream type, serif display.
============================================================ */

/* ===== Tokens ===== */
:root {
  --font-display: 'Fraunces', 'Times New Roman', serif;
  --font-body: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Surfaces — warm near-black with a hint of ink */
  --bg: #0b0908;
  --bg-2: #100d0a;
  --surface: #15110d;
  --surface-2: #1c1812;
  --surface-3: #25201a;
  --border: #2a241d;
  --border-strong: #3d3528;

  /* Cream + warm muted */
  --text: #f3ead8;
  --text-muted: #968a78;
  --text-faint: #5c5448;

  /* Aged gold (replaces neon orange for most chrome) */
  --gold: #d4a23a;
  --gold-bright: #efc25c;
  --gold-deep: #a37a22;
  --gold-soft: #2a1f0c;
  --gold-glow: rgba(212, 162, 58, 0.32);

  /* True BTC orange — reserved for logo + brand moments */
  --btc: #f7931a;
  --btc-soft: #2a1d0a;

  /* Status */
  --green: #4fc88a;
  --green-bright: #6ad99c;
  --green-soft: #0e2a1c;
  --red: #e26370;
  --red-soft: #2a1014;

  /* Board woods */
  --board-light: #e8d6a8;
  --board-dark: #6f4a2c;
  --board-light-hl: #f5dc6b;
  --board-dark-hl: #b48536;

  /* Type scale */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 20px;
  --text-xl: 28px;
  --text-2xl: clamp(2.4rem, 1.2rem + 4.5vw, 5rem);

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
}

/* ===========================================================
   LIVE-MODE PALETTE OVERRIDE
   When the user is in Sats League (live BTC mode), every gold/amber
   accent across the site flips to green so it's instantly obvious
   they're playing for real money. Toggled by app.js via
   document.body.classList.toggle('tier-live', state.tier === 'sats').
   =========================================================== */
body.tier-live {
  --gold: var(--green);
  --gold-bright: var(--green-bright);
  --gold-deep: #2f9266;
  --gold-soft: var(--green-soft);
  --gold-glow: rgba(79, 200, 138, 0.32);
}

/* Hardcoded amber values that don't go through --gold get explicit overrides. */
body.tier-live .top-rating,
body.tier-live .opp-card-rating,
body.tier-live .opp-row-rating {
  color: var(--green-bright);
}

/* In live mode, drop the "Sandbox " prefix from "Sandbox earned" labels. */
body.tier-live .tier-prefix { display: none; }

:root {
  --r-xl: 24px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t: 220ms var(--ease);

  --hud-h: 68px;
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}
body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  overflow-x: hidden;
  /* layered warm glow + subtle vignette */
  background-image:
    radial-gradient(ellipse 70% 55% at 50% -8%, rgba(212, 162, 58, 0.10), transparent 60%),
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(247, 147, 26, 0.04), transparent 70%),
    radial-gradient(ellipse 90% 60% at 50% 110%, rgba(0, 0, 0, 0.55), transparent 60%);
  background-attachment: fixed;
  position: relative;
}
/* Faint film-grain overlay for warmth */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
img, svg { display: block; max-width: 100%; }
button { background: none; border: none; cursor: pointer; color: inherit; font: inherit; }
input, button, select { font-family: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ===== HUD ===== */
.hud {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--hud-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0 var(--space-6);
  background: rgba(11, 9, 8, 0.78);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
.logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  font-variation-settings: "SOFT" 30;
  letter-spacing: -0.015em;
  color: var(--text);
}
.logo-mark { flex-shrink: 0; }
.hud-nav { display: flex; gap: var(--space-1); }
.hud-nav-link {
  position: relative;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-muted);
  border-radius: var(--r-sm);
  transition: color var(--t);
}
.hud-nav-link::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 2px;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width var(--t), left var(--t);
}
.hud-nav-link:hover { color: var(--text); }
.hud-nav-link:hover::after { width: calc(100% - 24px); left: 12px; }

.hud-wallet {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  padding: 8px var(--space-4);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.hud-wallet-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
}
.hud-wallet-value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
}
.hud-wallet-unit {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 500;
}
.hud-wallet-usd {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.hud-wallet-sats {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-faint);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* ---------- USER RATING IN HEADER ---------- */
.hud-rating {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  padding: 6px 14px;
  background: linear-gradient(180deg, rgba(82,156,255,0.06), rgba(82,156,255,0.02));
  border: 1px solid rgba(82,156,255,0.22);
  border-radius: var(--r-md);
}
.hud-rating-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
}
.hud-rating-help {
  font-size: 9.5px;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  text-decoration: underline;
  text-decoration-color: rgba(160,170,190,0.35);
  text-underline-offset: 2px;
}
.hud-rating-help:hover { color: var(--text); }
.hud-rating-value {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: #8fb6ff;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.hud-rating-tag, .user-rating-tag {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.user-rating-tag.is-onboarding {
  color: #c89a3a;
}

/* ---------- SANDBOX BADGE ----------
   Mandatory tag on every dollar figure in sandbox mode. Muted amber,
   uppercase, distinct from any "win" or "money" color. */
.badge-sandbox {
  display: inline-block;
  padding: 2px 6px;
  margin-right: 6px;
  background: rgba(212, 162, 58, 0.14);
  border: 1px solid rgba(212, 162, 58, 0.40);
  border-radius: 4px;
  color: #d4a23a;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.2;
  vertical-align: middle;
  text-transform: uppercase;
}
.badge-sandbox-sm {
  padding: 1px 4px;
  font-size: 8.5px;
  margin-right: 4px;
}
.badge-sandbox-lg {
  padding: 3px 8px;
  font-size: 10.5px;
  margin-right: 8px;
}
.sandbox-amount {
  display: inline-block;
  vertical-align: middle;
}

/* ---------- SANDBOX INTRO MODAL ---------- */
.sandbox-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.sandbox-intro[hidden] { display: none; }
.sandbox-intro-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 12, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.sandbox-intro-card {
  position: relative;
  max-width: 560px;
  width: 100%;
  padding: 32px 32px 28px;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(212,162,58,0.18);
  animation: sandboxIntroIn 0.32s cubic-bezier(.2,.7,.2,1);
}
@keyframes sandboxIntroIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.sandbox-intro-badge { margin-bottom: 14px; }
.sandbox-intro-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  color: var(--text);
}
.sandbox-intro-lede {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0 0 18px;
}
.sandbox-intro-lede strong { color: var(--text); font-weight: 600; }
.sandbox-intro-points {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sandbox-intro-points li {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted);
  padding-left: 18px;
  position: relative;
}
.sandbox-intro-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d4a23a;
}
.sandbox-intro-points strong { color: var(--text); font-weight: 600; }
.sandbox-intro-ok {
  width: 100%;
}
@media (max-width: 480px) {
  .sandbox-intro-card { padding: 24px 20px 22px; }
  .sandbox-intro-title { font-size: 22px; }
}

/* ---------- SATS LEAGUE PITCH (result screen) ---------- */
.sats-pitch {
  margin: 18px 0 0;
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(79,200,138,0.08), rgba(82,156,255,0.06));
  border: 1px solid rgba(79,200,138,0.32);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.sats-pitch[hidden] { display: none; }
.pitch-eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--green-bright);
}
.pitch-body {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}
.pitch-body strong { color: var(--green-bright); font-weight: 700; }
.pitch-cta {
  margin-top: 8px;
}

/* Result payout: sandbox amount displayed large */
.result-payout .badge-sandbox-lg {
  font-size: 11.5px;
  vertical-align: middle;
  margin-right: 10px;
  transform: translateY(-3px);
  display: inline-block;
}
.result-payout .sandbox-amount {
  display: inline-block;
}

@media (max-width: 980px) {
  .hud-rating { display: none; }
}
.hud-rate {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(79, 200, 138, 0.08);
  border: 1px solid rgba(79, 200, 138, 0.25);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--green-bright);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.hud-rate[data-source='fallback'] {
  background: rgba(212, 162, 58, 0.06);
  border-color: rgba(212, 162, 58, 0.22);
  color: var(--gold);
  opacity: 0.9;
}
@media (max-width: 768px) {
  .hud-rate { display: none; }
  .hud-wallet-usd { font-size: 10px; }
  .hud-wallet-sats { font-size: 10px; }
}
/* Nav links must hide earlier now that auth widget lives in the topbar */
@media (max-width: 1180px) {
  .hud { gap: var(--space-3); }
  .hud-nav { gap: 0; }
  .hud-nav-link { padding: var(--space-2); font-size: 13px; }
}
@media (max-width: 1024px) {
  .hud-nav { display: none; }
}
@media (max-width: 640px) {
  .hud { padding: 0 var(--space-4); }
  /* Wordmark stays visible on mobile so the brand isn't just an icon. */
  .logo { gap: 8px; font-size: 17px; }
  .logo span { display: inline; }
}
@media (max-width: 380px) {
  /* Cramped phones — trim the wordmark size further so it still fits with the
     menu button on the right. */
  .logo { font-size: 15px; gap: 6px; }
}

/* ===== Views ===== */
main {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-12) var(--space-6) var(--space-20);
}
.view { display: none; animation: fade 320ms var(--ease); }
.view.active { display: block; }
@keyframes fade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== Hero ===== */
.hero {
  position: relative;
  padding: var(--space-12) 0 var(--space-16);
  text-align: left;
}
.hero-chess { padding-top: var(--space-12); padding-bottom: var(--space-12); }

/* Hero robot illustration (right side of hero).
   Larger figure that fills more of the right column without bleeding onto
   the text. The 640px max-width on the headline + the soft radial mask on
   this layer keep the composition safe even when the image grows. */
.hero-robot {
  position: absolute;
  top: -20px;
  right: 0;
  width: 560px;
  height: 560px;
  max-width: 50%;
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.45));
  mask-image: radial-gradient(ellipse at 58% 50%, black 45%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at 58% 50%, black 45%, transparent 78%);
  overflow: hidden;
}
.hero-robot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.9;
}
.hero-chess .hero-eyebrow,
.hero-chess .hero-title,
.hero-chess .hero-sub,
.hero-chess .hero-cta-row,
.hero-chess .wallet-strip,
.hero-chess .hero-stats { position: relative; z-index: 1; }
.hero-chess .hero-title,
.hero-chess .hero-sub { max-width: 640px; }
@media (max-width: 1280px) {
  .hero-robot { width: 460px; height: 460px; top: -10px; }
}
@media (max-width: 1100px) {
  .hero-robot { width: 360px; height: 360px; top: 0; max-width: 42%; }
}
@media (max-width: 880px) {
  .hero-robot { display: none; }
  .hero-chess .hero-title,
  .hero-chess .hero-sub { max-width: none; }
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 7px 14px;
  background: rgba(21, 17, 13, 0.6);
  border: 1px solid var(--border);
  border-radius: 999px;
  margin-bottom: var(--space-6);
  backdrop-filter: blur(6px);
}
.pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 12px var(--green);
  animation: pulse 1.6s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1rem + 3.6vw, 4.5rem);
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin-bottom: var(--space-6);
  max-width: none;
  color: var(--text);
}
.hero-title .hero-line-1,
.hero-title .accent {
  display: block;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .hero-title .hero-line-1,
  .hero-title .accent {
    white-space: normal;
    text-wrap: balance;
  }
}
.accent {
  font-style: italic;
  font-weight: 600;
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 50%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub {
  font-size: var(--text-lg);
  color: var(--text-muted);
  max-width: 56ch;
  line-height: 1.55;
  margin-bottom: var(--space-8);
}
.hero-cta-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-12);
}
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  max-width: 720px;
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}
.hero-stats > div {
  position: relative;
  padding-left: var(--space-4);
}
.hero-stats > div::before {
  content: "";
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 1px;
  background: linear-gradient(180deg, var(--gold) 0%, transparent 100%);
  opacity: 0.3;
}
.stat-num {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.stat-label {
  font-size: 10.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 4px;
  font-weight: 600;
}
.stat-usd { color: var(--green-bright) !important; }
/* Inside hero stat: keep badge inline with amount, vertically centered */
.stat-num .badge-sandbox {
  font-size: 9px;
  padding: 2px 5px;
  margin-right: 6px;
  vertical-align: 4px;
}
.stat-num .sandbox-amount {
  vertical-align: middle;
}
@media (max-width: 720px) {
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 13px 22px;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: var(--r-md);
  transition: transform var(--t), background var(--t), color var(--t), box-shadow var(--t), border-color var(--t);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn-primary {
  background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 60%, var(--gold-deep) 100%);
  color: #1a1208;
  box-shadow:
    0 1px 0 rgba(255, 230, 160, 0.4) inset,
    0 -1px 0 rgba(0, 0, 0, 0.25) inset,
    0 8px 24px var(--gold-glow);
  border: 1px solid var(--gold-deep);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #ffd574 0%, var(--gold-bright) 60%, var(--gold) 100%);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 230, 160, 0.5) inset,
    0 -1px 0 rgba(0, 0, 0, 0.25) inset,
    0 12px 32px var(--gold-glow);
}
.btn-primary:active { transform: translateY(0); }
.btn-ghost {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-ghost:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text);
}
.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none;
}

/* ===== Disclaimer ===== */
.disclaimer {
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 2px solid var(--gold);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.55;
}
.disclaimer strong {
  color: var(--text);
  font-weight: 600;
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 30;
}

/* ===== How section ===== */
.back-btn {
  font-size: var(--text-sm);
  color: var(--text-muted);
  padding: var(--space-2) 0;
  margin-bottom: var(--space-6);
  transition: color var(--t);
}
.back-btn:hover { color: var(--gold); }
.page-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1rem + 3vw, 3.2rem);
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-8);
  line-height: 1;
}
.how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-12);
}
.how-card {
  padding: var(--space-6);
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color var(--t), transform var(--t);
}
.how-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}
.how-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gold);
  margin-bottom: var(--space-3);
  letter-spacing: 0.12em;
  font-weight: 700;
}
.how-card h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  font-variation-settings: "SOFT" 30;
  margin-bottom: var(--space-2);
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.how-card p {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.55;
}
.cpu-table {
  padding: var(--space-6);
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.cpu-table h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  font-variation-settings: "SOFT" 30;
  margin-bottom: var(--space-4);
  letter-spacing: -0.015em;
}
.cpu-table table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.cpu-table th,
.cpu-table td {
  padding: var(--space-3) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.cpu-table th {
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.12em;
}
.cpu-table tbody tr {
  transition: background var(--t);
}
.cpu-table tbody tr:hover { background: rgba(212, 162, 58, 0.04); }
.cpu-table tbody tr:last-child td { border-bottom: none; }
.cpu-table td:nth-child(3) { color: var(--gold-bright); font-weight: 700; }
.cpu-table td:nth-child(4) { color: var(--green-bright); }

/* ===== Game header ===== */
.game-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
}
.game-header-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: var(--space-3);
  font-weight: 700;
}
.game-header-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1rem + 2.5vw, 2.8rem);
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  letter-spacing: -0.03em;
  line-height: 1;
}
.game-header-cpu { text-align: right; }
.cpu-label {
  font-size: 10.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  margin-bottom: 4px;
}
.cpu-value {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ===== Setup card (composed: diff + wager + cta in one match-card) ===== */
.chess-controls {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0;
  align-items: stretch;
  margin-bottom: var(--space-5);
  background:
    linear-gradient(180deg, rgba(212, 162, 58, 0.04) 0%, transparent 40%),
    linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
}
.chess-controls::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.5;
}
@media (max-width: 980px) {
  .chess-controls { grid-template-columns: 1fr; }
}

.diff-card {
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
  border-right: 1px solid var(--border);
}
@media (max-width: 980px) {
  .diff-card { border-right: none; border-bottom: 1px solid var(--border); }
}
.diff-row-top, .diff-row-bot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.diff-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  font-weight: 700;
}
.diff-readout { font-family: var(--font-mono); }
.diff-level {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 600;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  color: var(--gold-bright);
  line-height: 1;
  letter-spacing: -0.02em;
}
.diff-of {
  color: var(--text-faint);
  font-size: 16px;
  margin-left: 4px;
  font-family: var(--font-mono);
}
.diff-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}
.diff-mult {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}
.diff-mult strong {
  color: var(--green-bright);
  font-size: 14px;
  font-weight: 700;
}

.difficulty-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(to right,
    var(--gold) 0%,
    var(--gold-bright) var(--fill, 50%),
    var(--surface-3) var(--fill, 50%),
    var(--surface-3) 100%);
  outline: none;
  cursor: pointer;
}
.difficulty-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
  border: 2px solid var(--bg);
  box-shadow:
    0 0 0 1px var(--gold-deep),
    0 4px 12px var(--gold-glow);
  cursor: pointer;
  transition: transform 150ms var(--ease);
}
.difficulty-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.difficulty-slider::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--gold-deep), 0 4px 12px var(--gold-glow);
  cursor: pointer;
}

/* Wager card — middle column */
.wager-bar { margin: 0; }
.wager-bar-chess {
  margin: 0;
  background: transparent;
  border: none;
  border-right: 1px solid var(--border);
  border-radius: 0;
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  justify-content: center;
}
@media (max-width: 980px) {
  .wager-bar-chess { border-right: none; border-bottom: 1px solid var(--border); }
}
.wager-bar label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  font-weight: 700;
}
.wager-input-wrap {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  transition: border-color var(--t), box-shadow var(--t);
}
.wager-input-wrap:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}
.wager-input-wrap span {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}
.wager-input {
  width: 100px;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.wager-input:focus { outline: none; }
.wager-usd {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  text-transform: none;
}
.wager-payout {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  font-weight: 600;
  padding-top: var(--space-3);
  border-top: 1px dashed var(--border);
}
.wager-payout strong {
  display: block;
  margin-top: 4px;
  color: var(--green-bright);
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  font-size: 26px;
  letter-spacing: -0.02em;
  text-transform: none;
}
.payout-usd {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--green);
  letter-spacing: 0.02em;
  text-transform: none;
}

/* Actions column */
.chess-actions {
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  justify-content: center;
  min-width: 200px;
}
.chess-actions .btn { width: 100%; }
.chess-actions .btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ===== Setup-only big CTA + notice ===== */
.chess-start-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-4) var(--space-5);
  min-height: 84px;
  width: 100%;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.005em;
  position: relative;
  overflow: hidden;
}
.chess-start-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.25) 50%, transparent 70%);
  transform: translateX(-110%);
  transition: transform 700ms var(--ease);
  pointer-events: none;
}
.chess-start-btn:hover::before { transform: translateX(110%); }
.chess-start-btn .start-sub {
  font-size: 10.5px;
  font-weight: 600;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 0.7;
}

.setup-notice {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  background:
    radial-gradient(ellipse 60% 100% at 0% 50%, rgba(212, 162, 58, 0.08), transparent 70%),
    linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-6) var(--space-6);
  margin-bottom: var(--space-5);
  animation: fadeUp 400ms var(--ease);
  position: relative;
  overflow: hidden;
}
.setup-notice::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
}
.setup-notice-icon {
  flex-shrink: 0;
  color: var(--gold-bright);
  background: var(--gold-soft);
  width: 64px;
  height: 64px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(212, 162, 58, 0.2);
}
.setup-notice-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  font-variation-settings: "SOFT" 30;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.15;
}
.setup-notice-sub {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 64ch;
}
.setup-notice-sub strong {
  color: var(--gold-bright);
  font-weight: 600;
  font-family: inherit;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== 3-col board layout ===== */
.chess-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 260px;
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 1100px) {
  .chess-layout { grid-template-columns: 1fr; }
  .chess-side { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
}
@media (max-width: 640px) {
  .chess-side { grid-template-columns: 1fr; }
}
.chess-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ===== Captured tray ===== */
.captured-panel {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-4);
}
.captured-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: var(--space-3);
}
.material-delta {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--green-bright);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 700;
}
.material-delta-loss { color: var(--red); }
.captured-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  min-height: 56px;
  font-size: 28px;
  line-height: 1;
  color: var(--text);
}
.captured-tray .cap-piece {
  display: inline-block;
  transition: transform 200ms var(--ease);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4));
}
.captured-tray .cap-piece-new { animation: capturePop 380ms var(--ease); }
@keyframes capturePop {
  0% { transform: scale(0) rotate(-15deg); opacity: 0; }
  60% { transform: scale(1.3) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

/* ===== Move history ===== */
.history-panel {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-4);
  max-height: 360px;
  overflow-y: auto;
}
.history-panel::-webkit-scrollbar { width: 6px; }
.history-panel::-webkit-scrollbar-thumb {
  background: var(--surface-3);
  border-radius: 3px;
}
.history-panel::-webkit-scrollbar-track { background: transparent; }
.history-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: var(--space-3);
}
.history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  display: grid;
  grid-template-columns: 28px 1fr 1fr;
  gap: 4px 8px;
  align-items: center;
}
.history-list .hist-num {
  color: var(--text-faint);
  font-size: 11px;
  text-align: right;
}
.history-list .hist-move {
  padding: 2px 6px;
  border-radius: var(--r-sm);
  color: var(--text);
}
.history-list .hist-move-cpu { color: var(--text-muted); }
.history-list .hist-move.current {
  background: var(--gold-soft);
  color: var(--gold-bright);
}

/* ===== Board ===== */
.chess-board-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.board-tag-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-3);
  align-items: center;
}
.board-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 9px 14px;
  font-weight: 500;
}
.board-tag:last-child { justify-content: flex-end; }
.board-tag strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tag-color {
  width: 10px; height: 10px;
  border-radius: 2px;
  border: 1px solid var(--border-strong);
}
.tag-color-white { background: var(--board-light); }
.tag-color-black { background: var(--board-dark); }
.board-status {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-align: center;
  font-weight: 700;
}
.board-status.status-check { color: var(--red); }
.board-status.status-thinking { color: var(--text-muted); }

/* The board itself — walnut/ivory with gold frame */
.chess-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  border-radius: 6px;
  overflow: hidden;
  /* layered: gold frame ring + deep wood shadow */
  box-shadow:
    0 0 0 1px rgba(212, 162, 58, 0.5),
    0 0 0 6px #1a130a,
    0 0 0 7px rgba(212, 162, 58, 0.35),
    0 30px 80px rgba(0, 0, 0, 0.65),
    0 8px 24px rgba(0, 0, 0, 0.4);
  user-select: none;
  touch-action: none;
}
.chess-square {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(28px, 6vw, 50px);
  line-height: 1;
  cursor: pointer;
}
.chess-square.light {
  background: var(--board-light);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.03));
}
.chess-square.dark {
  background: var(--board-dark);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.08));
}
.chess-square.selected {
  background: var(--board-light-hl) !important;
  box-shadow: inset 0 0 0 3px var(--gold);
}
.chess-square.dark.selected {
  background: var(--board-dark-hl) !important;
}
.chess-square.last-move { background: #f0d57a !important; }
.chess-square.dark.last-move { background: #a17832 !important; }
.chess-square.check {
  background: radial-gradient(circle, var(--red) 0%, var(--red-soft) 80%) !important;
  animation: checkPulse 800ms ease-in-out infinite;
}
@keyframes checkPulse {
  0%, 100% { box-shadow: inset 0 0 0 2px var(--red); }
  50% { box-shadow: inset 0 0 0 4px var(--red); }
}
.chess-square.legal::after {
  content: "";
  position: absolute;
  width: 26%;
  height: 26%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.22);
}
.chess-square.legal.has-target::after {
  width: 86%;
  height: 86%;
  background: transparent;
  border: 4px solid rgba(0, 0, 0, 0.22);
}
.chess-square .coord {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  pointer-events: none;
  opacity: 0.55;
  letter-spacing: 0.04em;
}
.chess-square.light .coord { color: var(--board-dark); }
.chess-square.dark .coord { color: var(--board-light); }
.chess-square .coord-file { bottom: 3px; right: 5px; }
.chess-square .coord-rank { top: 3px; left: 5px; }

.chess-piece {
  font-size: inherit;
  line-height: 1;
  cursor: grab;
  transition: transform 180ms var(--ease);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
}
.chess-piece.white {
  color: #faf3e0;
  text-shadow:
    0 0 1px #1a0e04,
    0 0 1px #1a0e04,
    0 0 1px #1a0e04,
    0 1px 0 rgba(0,0,0,0.6);
}
.chess-piece.black {
  color: #1a120a;
  text-shadow:
    0 0 1px rgba(250, 243, 224, 0.25),
    0 1px 0 rgba(0,0,0,0.5);
}
.chess-square.selected .chess-piece { transform: scale(1.08); }
.chess-piece.dragging {
  cursor: grabbing;
  transform: scale(1.18);
  z-index: 50;
}

/* ===== Engine thinking panel ===== */
.think-panel {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-4);
}
.think-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: var(--space-2);
}
.think-state {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
  margin-bottom: var(--space-3);
  min-height: 18px;
  font-weight: 500;
}
.think-bar {
  width: 100%;
  height: 3px;
  background: var(--surface-3);
  border-radius: 2px;
  overflow: hidden;
}
.think-bar span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-bright) 100%);
  transition: width 220ms var(--ease);
}
.think-bar.thinking span {
  width: 100%;
  animation: thinkSlide 1.3s linear infinite;
  background: linear-gradient(90deg, transparent 0%, var(--gold-bright) 50%, transparent 100%);
}
@keyframes thinkSlide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ===== Promotion modal ===== */
.promo-modal {
  position: fixed;
  inset: 0;
  background: rgba(11, 9, 8, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  backdrop-filter: blur(10px);
}
.promo-modal[hidden] { display: none; }
.promo-card {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  padding: var(--space-6) var(--space-8);
  text-align: center;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7);
}
.promo-title {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: var(--space-4);
}
.promo-row {
  display: flex;
  gap: var(--space-3);
}
.promo-btn {
  width: 76px;
  height: 76px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-3));
  font-size: 46px;
  line-height: 1;
  color: var(--text);
  transition: all 200ms var(--ease);
}
.promo-btn:hover {
  border-color: var(--gold);
  background: var(--gold-soft);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--gold-glow);
}

/* ===== Result modal ===== */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(11, 9, 8, 0.85);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: var(--space-4);
  animation: fade 240ms var(--ease);
}
.modal[hidden] { display: none; }
.modal-card {
  max-width: 440px;
  width: 100%;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  padding: var(--space-10) var(--space-8) var(--space-8);
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
  position: relative;
  overflow: hidden;
}
.modal-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.modal.win .modal-card::before { background: linear-gradient(90deg, transparent, var(--green-bright), transparent); }
.modal.loss .modal-card::before { background: linear-gradient(90deg, transparent, var(--red), transparent); }
.modal-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: var(--space-3);
  font-weight: 700;
}
.modal-title {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-3);
  line-height: 1;
}
.modal.win .modal-title { color: var(--green-bright); }
.modal.loss .modal-title { color: var(--red); }
.modal-detail {
  font-family: var(--font-mono);
  font-size: 38px;
  font-weight: 700;
  margin-bottom: var(--space-1);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.modal.win .modal-detail { color: var(--green-bright); }
.modal.loss .modal-detail { color: var(--red); }
.modal-usd {
  margin-bottom: var(--space-4);
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.modal-usd.win { color: var(--green); }
.modal-usd.loss { color: var(--red); }
.modal-sub {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-6);
}
.modal-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* ===== Footer ===== */
.footer {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-6);
  border-top: 1px solid var(--border);
  font-size: var(--text-sm);
  color: var(--text-faint);
  display: block;
}

.site-footer-inner {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) repeat(3, minmax(140px, 1fr));
  gap: var(--space-8);
  align-items: start;
  margin-bottom: var(--space-7);
}
.site-footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.site-footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.site-footer-mark {
  font-size: 28px;
  line-height: 1;
  color: #f7931a;
  text-shadow: 0 0 18px rgba(247, 147, 26, 0.35);
}
.site-footer-name {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.site-footer-tag {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-faint);
  max-width: 320px;
}

.site-footer-cols {
  display: contents;
}
.site-footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.site-footer-col-title {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  opacity: 0.95;
}
.site-footer-col a {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  margin-left: -10px; /* visually align with title while keeping hover hit area */
  border-radius: 8px;
  font-size: var(--text-sm);
  color: var(--text-faint);
  text-decoration: none;
  line-height: 1.3;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
  width: fit-content;
  max-width: 100%;
}
.site-footer-col a:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  transform: translateX(2px);
}
.site-footer-col a:focus-visible {
  outline: 2px solid #f7931a;
  outline-offset: 2px;
}

/* ===== Footer — Powered by (Bitcoin + TRON) ===== */
.site-footer-bottom {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
}
.site-footer-bottom > div:first-child,
.site-footer-meta {
  color: var(--text-faint);
  opacity: 0.85;
}
.site-footer-powered {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.site-footer-powered-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  opacity: 0.85;
}
.site-footer-chain {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  font-size: var(--text-xs);
  color: var(--text);
  line-height: 1;
  transition: background 160ms ease, border-color 160ms ease;
}
.site-footer-chain:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.18);
}
.site-footer-chain-logo {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
}
.site-footer-chain-name {
  font-weight: 500;
  letter-spacing: 0.02em;
}
@media (max-width: 900px) {
  .site-footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
  .site-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .footer { padding: var(--space-6) var(--space-4); }
  .site-footer-inner {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .site-footer-bottom {
    justify-content: center;
    text-align: center;
    flex-direction: column;
  }
  .site-footer-meta { width: 100%; }
}

/* ===== Setup vs playing phase visibility ===== */
#chess[data-phase="setup"] .chess-layout { display: none; }
#chess[data-phase="setup"] .chess-during-play { display: none; }
#chess[data-phase="setup"] .game-header-cpu { opacity: 0.45; }
#chess[data-phase="playing"] .chess-start-btn { display: none; }
#chess[data-phase="playing"] .setup-notice { display: none; }
#chess[data-phase="playing"] .chess-layout { animation: revealBoard 420ms var(--ease); }
@keyframes revealBoard {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== Responsive ===== */
@media (max-width: 1100px) {
  .chess-board { max-width: 560px; }
}
@media (max-width: 640px) {
  main { padding: var(--space-6) var(--space-4) var(--space-16); }
  .hero { padding: var(--space-6) 0 var(--space-10); }
  .game-header { flex-direction: column; align-items: flex-start; }
  .game-header-cpu { text-align: left; }
  .board-tag-row { grid-template-columns: 1fr; gap: 6px; }
  .board-tag:last-child { justify-content: flex-start; }
  .board-status { order: -1; }
  .history-panel { max-height: 220px; }
  .chess-square { font-size: clamp(24px, 9vw, 40px); }
  .setup-notice { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .setup-notice-icon { width: 48px; height: 48px; }
  .modal-title { font-size: 30px; }
  .modal-detail { font-size: 30px; }
}

/* ============================================================
   TRAIN — Duolingo-for-chess module
   Path of units → puzzle player → unit complete celebration.
============================================================ */

/* ---- View phases: show path OR puzzle player, never both ---- */
#train .train-header,
#train .train-path { display: block; }
#train[data-train-phase="puzzle"] .train-header,
#train[data-train-phase="puzzle"] .train-path,
#train[data-train-phase="puzzle"] > .back-btn { display: none; }
#train[data-train-phase="path"] .puzzle-player { display: none !important; }
#train .puzzle-player[hidden] { display: none !important; }

/* ---- Header (eyebrow + title + stats) ---- */
.train-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  align-items: flex-end;
  justify-content: space-between;
  padding: var(--space-10) 0 var(--space-8);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-10);
}
.train-header > div:first-child { max-width: 560px; }
.train-sub {
  margin-top: var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-base);
  line-height: 1.6;
}
.train-stats {
  display: flex;
  gap: var(--space-4);
}
.train-stat {
  min-width: 88px;
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-align: center;
}
.train-stat-num {
  font-family: var(--font-mono);
  font-size: 22px;
  color: var(--gold-bright);
  letter-spacing: 0.02em;
  line-height: 1;
}
.train-stat-of {
  color: var(--text-faint);
  font-size: 14px;
}
.train-stat-label {
  margin-top: var(--space-2);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---- Path (vertical Duolingo-style) ---- */
.train-path {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 880px;
  margin: 0 auto;
  padding-bottom: var(--space-16);
  position: relative;
}
.train-path::before {
  /* center spine */
  content: '';
  position: absolute;
  left: 50%;
  top: 32px;
  bottom: 32px;
  width: 2px;
  background: repeating-linear-gradient(
    180deg,
    var(--border-strong) 0 8px,
    transparent 8px 16px
  );
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
}

.path-unit {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-5) var(--space-6);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  z-index: 1;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.path-unit:hover { border-color: var(--border-strong); transform: translateY(-1px); }

/* alternating sides — keep the node side aligned to the spine */
.path-unit-left { margin-right: 18%; }
.path-unit-right { margin-left: 18%; grid-template-columns: 1fr 96px; }
.path-unit-right .path-unit-node { order: 2; }
.path-unit-right .path-unit-body { order: 1; text-align: right; }
.path-unit-right .path-unit-meta { justify-content: flex-end; }

.path-unit-active {
  border-color: var(--gold);
  box-shadow:
    0 0 0 1px var(--gold-glow),
    0 18px 48px rgba(0, 0, 0, 0.45);
}
.path-unit-done {
  border-color: var(--green-soft);
}
.path-unit-done .path-unit-node {
  background: linear-gradient(160deg, var(--green-soft), #081912);
  border-color: var(--green);
  color: var(--green-bright);
}

/* The big circular node */
.path-unit-node {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 30%, #2a2118, #15110d 70%);
  border: 2px solid var(--border-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 8px 24px rgba(0, 0, 0, 0.5);
  font-family: var(--font-display);
  color: var(--gold-bright);
  font-size: 38px;
  line-height: 1;
}
.path-unit-active .path-unit-node {
  border-color: var(--gold);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 4px var(--gold-soft),
    0 0 24px var(--gold-glow);
}
.path-unit-icon { font-family: var(--font-display); font-weight: 600; }
.path-unit-check {
  position: absolute;
  bottom: -6px;
  right: -6px;
  width: 30px;
  height: 30px;
  background: var(--green);
  color: #04130b;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 700;
  border: 2px solid var(--bg-2);
}

.path-unit-body { min-width: 0; }
.path-unit-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: var(--space-2);
}
.path-unit-blurb {
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
  margin-bottom: var(--space-3);
}
.path-unit-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.path-unit-progress {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 120px;
}
.path-unit-bar {
  flex: 1;
  height: 6px;
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.path-unit-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
  transition: width 480ms var(--ease);
}
.path-unit-done .path-unit-bar > span {
  background: linear-gradient(90deg, var(--green), var(--green-bright));
}
.path-unit-count {
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.path-unit-cta {
  flex-shrink: 0;
  padding: 10px 18px;
  font-size: 13px;
  letter-spacing: 0.08em;
}

/* ---- Puzzle player ---- */
.puzzle-player {
  padding-top: var(--space-8);
  padding-bottom: var(--space-16);
  max-width: 1180px;
  margin: 0 auto;
}
.puzzle-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.puzzle-topbar .back-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 8px 14px;
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  transition: color var(--t), border-color var(--t);
}
.puzzle-topbar .back-btn:hover {
  color: var(--text);
  border-color: var(--border-strong);
}
.puzzle-progress {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.puzzle-progress > span:first-child {
  color: var(--gold-bright);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
}
.puzzle-progress-dot { color: var(--text-faint); }
.puzzle-hearts {
  display: flex;
  gap: 4px;
}
.puzzle-heart {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 8px rgba(226, 99, 112, 0.4);
  transition: background var(--t), opacity var(--t), transform var(--t);
}
.puzzle-heart.lost {
  background: var(--surface-3);
  box-shadow: none;
  opacity: 0.4;
  transform: scale(0.85);
}

/* Progress bar (puzzle within unit) */
.puzzle-bar {
  height: 4px;
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: var(--space-8);
  border: 1px solid var(--border);
}
.puzzle-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
  transition: width 380ms var(--ease);
}

/* Layout — board left, panel right */
.puzzle-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
  gap: var(--space-10);
  align-items: start;
}
.puzzle-board-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.puzzle-tagline {
  font-family: var(--font-display);
  font-size: 18px;
  font-style: italic;
  color: var(--gold-bright);
  letter-spacing: 0.01em;
  text-align: center;
}
.puzzle-board {
  max-width: 560px;
}

.puzzle-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: sticky;
  top: calc(var(--hud-h) + 12px);
}
.puzzle-card {
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-6);
}
.puzzle-theme {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-3);
}
.puzzle-prompt {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.35;
  color: var(--text);
  margin-bottom: var(--space-4);
}
.puzzle-feedback {
  min-height: 24px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  transition: color var(--t);
  margin-bottom: var(--space-4);
}
.puzzle-feedback:empty { display: none; }
.puzzle-feedback-good { color: var(--green-bright); }
.puzzle-feedback-bad { color: var(--red); }
.puzzle-feedback-hint { color: var(--gold-bright); font-style: italic; }
.puzzle-hint-btn {
  width: 100%;
  padding: 10px 14px;
  font-size: 13px;
}

.puzzle-explain-card { border-color: var(--gold-soft); }
.puzzle-explain-card[hidden] { display: none; }
.puzzle-explain-title {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--gold-bright);
  margin-bottom: var(--space-2);
}
.puzzle-explain-body {
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: var(--space-4);
}
.puzzle-explain-card .btn { width: 100%; }

/* Square highlight for incorrect attempts */
.chess-square.wrong-flash {
  animation: wrong-flash 480ms var(--ease);
}
@keyframes wrong-flash {
  0%   { box-shadow: inset 0 0 0 999px rgba(226, 99, 112, 0); }
  50%  { box-shadow: inset 0 0 0 999px rgba(226, 99, 112, 0.42); }
  100% { box-shadow: inset 0 0 0 999px rgba(226, 99, 112, 0); }
}
.chess-square.correct-flash {
  animation: correct-flash 600ms var(--ease);
}
@keyframes correct-flash {
  0%   { box-shadow: inset 0 0 0 999px rgba(79, 200, 138, 0); }
  50%  { box-shadow: inset 0 0 0 999px rgba(79, 200, 138, 0.42); }
  100% { box-shadow: inset 0 0 0 999px rgba(79, 200, 138, 0); }
}

/* ---- Unit complete celebration ---- */
.unit-complete {
  position: fixed;
  inset: 0;
  background: rgba(8, 6, 4, 0.78);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  padding: var(--space-4);
  z-index: 80;
  animation: fade 320ms var(--ease);
}
.unit-complete[hidden] { display: none; }
.unit-complete-card {
  position: relative;
  max-width: 460px;
  width: 100%;
  padding: var(--space-10) var(--space-8);
  text-align: center;
  background:
    radial-gradient(circle at 50% -10%, rgba(212, 162, 58, 0.18), transparent 60%),
    linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--gold-soft);
  border-radius: var(--r-xl);
  box-shadow:
    0 0 0 1px var(--gold-glow),
    0 40px 100px rgba(0, 0, 0, 0.6);
  animation: pop 420ms var(--ease);
}
@keyframes pop {
  from { transform: scale(0.94); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.unit-complete-spark {
  font-size: 36px;
  filter: drop-shadow(0 0 16px var(--gold-glow));
  margin-bottom: var(--space-3);
}
.unit-complete-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-3);
}
.unit-complete-title {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: var(--space-6);
}
.unit-complete-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
.unit-complete-stats > div {
  padding: var(--space-4) var(--space-2);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.unit-complete-stats strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 22px;
  color: var(--gold-bright);
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}
.unit-complete-stats span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.unit-complete-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
}
.unit-complete-actions .btn { flex: 1; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .puzzle-layout { grid-template-columns: 1fr; gap: var(--space-6); }
  .puzzle-side { position: static; }
  .puzzle-board { max-width: 100%; }
  .puzzle-player { padding-top: var(--space-4); }
}
@media (max-width: 760px) {
  .train-header { flex-direction: column; align-items: flex-start; gap: var(--space-5); padding: var(--space-6) 0; }
  .train-stats { width: 100%; }
  .train-stat { flex: 1; min-width: 0; }
  .train-path::before { left: 30px; }
  .train-path { gap: var(--space-4); }
  .path-unit, .path-unit-left, .path-unit-right {
    grid-template-columns: 64px 1fr;
    margin-left: 0;
    margin-right: 0;
    padding: var(--space-4);
    gap: var(--space-4);
  }
  .path-unit-right .path-unit-node { order: 0; }
  .path-unit-right .path-unit-body { order: 0; text-align: left; }
  .path-unit-right .path-unit-meta { justify-content: flex-start; }
  .path-unit-node { width: 64px; height: 64px; font-size: 26px; }
  .path-unit-title { font-size: 20px; }
  .unit-complete-title { font-size: 30px; }
  .unit-complete-stats { gap: var(--space-2); }
  .unit-complete-stats strong { font-size: 18px; }
  .unit-complete-actions { flex-direction: column; }
}

/* ============================================================
   RECENT WINNINGS TICKER — homepage marquee
   Editorial label + infinite-scroll feed of winners.
============================================================ */
.winnings {
  margin: var(--space-10) 0 var(--space-8);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
}
.winnings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding: 0 var(--space-2);
}
.winnings-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.pulse-green {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-bright);
  box-shadow: 0 0 0 0 rgba(106, 217, 156, 0.55);
  animation: pulse-green 1.8s ease-out infinite;
  display: inline-block;
}
@keyframes pulse-green {
  0%   { box-shadow: 0 0 0 0 rgba(106, 217, 156, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(106, 217, 156, 0); }
  100% { box-shadow: 0 0 0 0 rgba(106, 217, 156, 0); }
}
.winnings-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Marquee container — masked fade on both edges */
.winnings-marquee {
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%
  );
          mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}
.winnings-track {
  display: flex;
  width: max-content;
  animation: winnings-scroll 60s linear infinite;
  will-change: transform;
}
.winnings-marquee:hover .winnings-track {
  animation-play-state: paused;
}
@keyframes winnings-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Each entry */
.winnings-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-5);
  margin-right: var(--space-3);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  font-family: var(--font-body);
  color: var(--text);
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color var(--t);
}
.winnings-item:hover { border-color: var(--border-strong); }

.winnings-status {
  color: var(--green-bright);
  font-size: 11px;
  line-height: 1;
}
.winnings-handle {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
  letter-spacing: 0.01em;
}
.winnings-divider { color: var(--text-faint); }
.winnings-outcome {
  color: var(--text-muted);
  font-style: italic;
}
.winnings-level {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--gold);
  padding: 2px 7px;
  background: var(--gold-soft);
  border-radius: 4px;
  border: 1px solid var(--gold-soft);
}
.winnings-amount {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--green-bright);
  letter-spacing: 0.02em;
}
.winnings-time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.04em;
  margin-left: var(--space-2);
}

@media (max-width: 760px) {
  .winnings { margin: var(--space-6) 0 var(--space-4); }
  .winnings-meta { display: none; }
  .winnings-item { padding: 8px var(--space-4); font-size: 12px; }
  .winnings-handle, .winnings-amount { font-size: 12px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .winnings-track { animation: none; }
}

/* ============================================================
   AGENT-VS-AGENT PIVOT STYLES
   Lobby, House Agent card, Deploy flow (configure/match/result),
   Dashboard, and new ticker entries. Reuses existing tokens.
============================================================ */

/* ----- Lobby tweaks ----- */
.pulse-orange {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(212, 162, 58, 0.55);
  animation: pulse-orange 1.8s ease-out infinite;
  display: inline-block;
}
@keyframes pulse-orange {
  0%   { box-shadow: 0 0 0 0 rgba(212, 162, 58, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(212, 162, 58, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212, 162, 58, 0); }
}

/* House Agent of the Day card */
.house-agent {
  margin: var(--space-8) 0 var(--space-6);
  padding: var(--space-6);
  background: linear-gradient(160deg, rgba(247, 147, 26, 0.04), rgba(212, 162, 58, 0.02));
  border: 1px solid var(--gold-soft);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
}
.house-agent::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at top right, rgba(247, 147, 26, 0.06), transparent 60%);
  pointer-events: none;
}
.house-agent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.house-agent-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.house-agent-rotate {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-faint);
}
.house-agent-rotate strong {
  color: var(--text);
  font-weight: 600;
}
.house-agent-body {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: var(--space-6);
  align-items: stretch;
}
.house-agent-card {
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.house-agent-personality {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.personality-glyph {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #2a201a, #0f0c0a);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  font-size: 32px;
  color: var(--gold);
}
.personality-glyph-orange {
  background: linear-gradient(135deg, #f7931a, #d4801a);
  color: #1a0f08;
  border-color: rgba(0,0,0,0.3);
}
.personality-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.personality-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 2px;
}
.house-agent-bio {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
}
.house-agent-settings {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: var(--space-2);
}
.setting-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
}
.setting-pill > span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.setting-pill > strong {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  font-weight: 600;
}
.setting-pill-weak {
  border-color: rgba(217, 106, 106, 0.3);
  background: rgba(217, 106, 106, 0.06);
}
.setting-pill-weak > strong { color: #d9846a; }
.house-agent-cta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  gap: var(--space-3);
}
.house-agent-stake-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.house-agent-stake-val {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--gold);
  margin-top: 4px;
}
.house-agent-stake-usd {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}
.house-agent .btn {
  width: 100%;
  justify-content: center;
}

/* Page lede */
.page-lede {
  max-width: 720px;
  margin: 0 0 var(--space-6);
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-muted);
}

/* Safety card */
.safety-card {
  margin-top: var(--space-6);
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.safety-card-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-3);
}
.safety-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}
.safety-list li {
  padding-left: var(--space-4);
  position: relative;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}
.safety-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 700;
}
.safety-list li strong {
  color: var(--text);
  font-weight: 600;
}

/* ----- Deploy view ----- */
.deploy-view {
  padding-bottom: var(--space-12);
}
.deploy-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.deploy-step-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.step-dot {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 14px 6px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  transition: var(--t);
}
.step-dot > span {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 50%;
  font-weight: 700;
  font-size: 11px;
}
.step-dot.active {
  border-color: var(--gold);
  color: var(--text);
  background: rgba(212, 162, 58, 0.06);
}
.step-dot.active > span {
  background: var(--gold);
  color: #1a0f08;
  border-color: var(--gold);
}
.step-dot.done > span {
  background: var(--surface-2);
  color: var(--gold);
  border-color: var(--gold-soft);
}
.step-line {
  height: 1px;
  width: 28px;
  background: var(--border);
}

/* Configure layout */
.deploy-configure {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: stretch;
}

/* Grow-your-roster promo card (replaces opponent picker) */
.roster-promo-card {
  border: 1px solid var(--gold-deep);
  background: linear-gradient(180deg, rgba(212, 162, 58, 0.10) 0%, rgba(212, 162, 58, 0.04) 100%);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: var(--space-4);
}
.roster-promo-head { display: flex; flex-direction: column; gap: 6px; }
.roster-promo-title {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--gold-bright);
  letter-spacing: -0.01em;
}
.roster-promo-sub {
  font-size: 13px;
  line-height: 1.5;
  color: #cfc7b5;
}
.roster-promo-sub strong { color: #f4f0e6; font-weight: 700; }
.roster-promo-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.roster-promo-stat {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(212, 162, 58, 0.18);
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
}
.roster-promo-stat-val {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--gold-bright);
  line-height: 1.1;
}
.roster-promo-stat-lbl {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9a9484;
  margin-top: 4px;
}
.roster-promo-cta { width: 100%; }
.roster-promo-note {
  font-size: 11px;
  color: #8a8470;
  line-height: 1.5;
  text-align: center;
}
@media (max-width: 900px) {
  .deploy-configure { grid-template-columns: 1fr; }
}
/* Ensure [hidden] wins over display: grid/flex on phase panels */
.deploy-configure[hidden],
.deploy-match[hidden],
.deploy-result[hidden] { display: none !important; }
.agent-config-panel,
.opponent-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: var(--space-5);
}
.agent-config-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.agent-config-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.agent-name-input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 14px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  min-width: 220px;
  transition: var(--t);
}
.agent-name-input:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--surface-2);
}
.opponent-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

/* Presets row */
.presets-section { margin-bottom: var(--space-5); }
.presets-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
  display: block;
}
.presets-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.preset-btn {
  padding: 7px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--t);
}
.preset-btn:hover {
  border-color: var(--border-strong);
  color: var(--text);
}
.preset-btn.active {
  background: var(--gold);
  color: #1a0f08;
  border-color: var(--gold);
}

/* Sliders */
.sliders-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
}
.slider-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.slider-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.slider-row-head label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.slider-val {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.02em;
}
.cfg-slider {
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}
.cfg-slider::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid #1a0f08;
  cursor: grab;
}
.cfg-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid #1a0f08;
  cursor: grab;
}
.slider-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 2px;
}

/* Opening + endgame grids */
.opening-section, .endgame-section { margin-bottom: var(--space-3); }
.opening-grid, .endgame-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.endgame-grid { grid-template-columns: repeat(4, 1fr); }
.opening-btn, .endgame-btn {
  padding: 9px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--t);
}
.opening-btn:hover, .endgame-btn:hover {
  border-color: var(--border-strong);
  color: var(--text);
}
.opening-btn.active, .endgame-btn.active {
  background: rgba(212, 162, 58, 0.12);
  border-color: var(--gold);
  color: var(--gold);
}

/* VS center column */
.deploy-vs {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}
.vs-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #2a201a, #0f0c0a);
  border: 1px solid var(--gold-soft);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--gold);
  box-shadow: 0 0 30px rgba(212, 162, 58, 0.15);
}
.vs-spark {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.matchup-meter {
  width: 100%;
  height: 5px;
  background: rgba(212, 162, 58, 0.1);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}
.matchup-meter-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #d96a6a 0%, #d4a23a 50%, #6ad99c 100%);
  border-radius: 999px;
  width: 50%;
  transition: width 0.45s ease;
}
.matchup-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Opponent card */
.opponent-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.opponent-personality {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.opponent-bio {
  margin: 0 0 var(--space-3);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
}
.opponent-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.opp-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.opp-stat-wide { grid-column: span 2; }
.opp-stat > span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.opp-stat > strong {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
}

/* Stake card */
.stake-card {
  background: var(--bg);
  border: 1px solid var(--gold-soft);
  border-radius: 12px;
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.stake-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  display: block;
  margin-bottom: 8px;
}
.stake-input-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.stake-input-wrap {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
}
.stake-input {
  background: transparent;
  border: none;
  outline: none;
  width: 100px;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.02em;
}
.stake-input-wrap > span {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-faint);
  letter-spacing: 0.06em;
}
.stake-usd {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
}
.stake-payout {
  font-size: 13px;
  color: var(--text-muted);
}
.stake-payout strong {
  color: var(--text);
  font-family: var(--font-mono);
  font-weight: 700;
}
.stake-payout-usd { color: var(--green-bright); }

/* Deployment controls card */
.deploy-controls-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.deploy-controls-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.safety-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(106, 217, 156, 0.08);
  border: 1px solid rgba(106, 217, 156, 0.25);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-bright);
}
.deploy-controls-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-3);
}
.deploy-controls-row label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.deploy-controls-row label > span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.deploy-controls-row input {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text);
  outline: none;
}
.deploy-controls-row input:focus {
  border-color: var(--gold);
}

.deploy-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.deploy-actions .btn { width: 100%; justify-content: center; }
.deploy-actions-help {
  margin: 0;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-dim);
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
.start-sub {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 2px;
  opacity: 0.7;
}

/* ----- Match viewer ----- */
.deploy-match { padding: var(--space-2) 0; }
.match-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.match-header-side { display: flex; flex-direction: column; gap: 2px; }
.match-header-them { text-align: right; align-items: flex-end; }
.match-side-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.match-side-name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
}
.match-side-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
.match-header-center {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
}
.match-clock {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.04em;
}
.match-status {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.match-stake-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
}
.match-stake-tag strong { color: var(--text); }

.match-layout {
  display: grid;
  grid-template-columns: 1fr minmax(0, 1.5fr) 1fr;
  gap: var(--space-5);
  align-items: start;
}
.match-side-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.think-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--space-4);
}
.think-card-opp { border-color: rgba(247, 147, 26, 0.25); }
.think-card-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 6px;
}
.think-card-thoughts {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: var(--space-3);
  min-height: 38px;
}
.think-bar-large {
  height: 4px;
  background: var(--bg);
  border-radius: 999px;
  overflow: hidden;
}
.think-bar-large > span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--gold), #f7931a);
  border-radius: 999px;
}

.match-center {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.match-board {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}
.match-board .chess-square {
  position: relative;
  display: grid;
  place-items: center;
}
.match-board .chess-square.light { background: #d8c9a3; }
.match-board .chess-square.dark { background: #6b513a; }
.match-board .chess-square.last-move { box-shadow: inset 0 0 0 3px rgba(212, 162, 58, 0.7); }
.match-board .piece {
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1;
  user-select: none;
}
.match-board .piece-w { color: #f7eccc; text-shadow: 0 1px 2px rgba(0,0,0,0.4); }
.match-board .piece-b { color: #1c140d; text-shadow: 0 1px 0 rgba(255,255,255,0.05); }

.eval-graph-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: var(--space-3);
}
.eval-graph-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.eval-graph-label > span:first-child {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.eval-cur {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--gold);
}
.eval-graph {
  width: 100%;
  height: 60px;
  display: block;
}

.match-history {
  max-height: 360px;
  overflow-y: auto;
}
.match-history .history-list {
  font-size: 12px;
  display: block;
  grid-template-columns: none;
  gap: 0;
}
.match-history .history-list li {
  display: grid;
  grid-template-columns: 28px 1fr 1fr;
  align-items: baseline;
  gap: 6px;
  padding: 3px 6px;
}
.match-history .move-num {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 11px;
}
.match-history .move-w, .match-history .move-b {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
}

.match-footer {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* ----- Always-on queue countdown banner ----- */
.queue-countdown {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--gold-soft);
  border-radius: 12px;
}
.queue-countdown[hidden] { display: none; }
.queue-countdown-inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.queue-countdown-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-bright);
  opacity: 0.85;
}
.queue-countdown-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.queue-countdown-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}
.queue-countdown-time {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--gold-bright);
  margin-left: 4px;
}
#queue-cancel-btn {
  font-size: 12px;
  padding: 6px 12px;
  flex-shrink: 0;
}

/* ----- Result ----- */
.result-card {
  padding: var(--space-7);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--gold-soft);
  border-radius: 16px;
  text-align: center;
  margin-bottom: var(--space-5);
}
.result-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-3);
}
.result-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  color: var(--text);
  margin: 0 0 var(--space-3);
  letter-spacing: -0.02em;
}
.result-payout {
  font-family: var(--font-mono);
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--gold);
}
.result-payout.result-win { color: var(--green-bright); }
.result-payout.result-loss { color: #d9846a; }
.result-usd {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 4px;
}
.result-reason {
  margin-top: var(--space-4);
  font-size: 14px;
  color: var(--text-muted);
  max-width: 560px;
  margin-inline: auto;
  line-height: 1.55;
}

.result-analysis {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.result-analysis h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 var(--space-4);
}
.result-analysis-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.analysis-block {
  padding: var(--space-4);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  border-left: 3px solid var(--border);
}
.analysis-good { border-left-color: var(--green-bright); }
.analysis-bad { border-left-color: #d9846a; }
.analysis-neutral { border-left-color: var(--gold); }
.analysis-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 4px;
}
.analysis-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.analysis-body {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
}

.result-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* ----- Dashboard ----- */
.dashboard-view { padding-bottom: var(--space-12); }
.dashboard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.dashboard-sub {
  margin: var(--space-2) 0 0;
  font-size: 14px;
  color: var(--text-muted);
}
.dashboard-status {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}
.status-dot {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 12px;
  background: rgba(106, 217, 156, 0.08);
  border: 1px solid rgba(106, 217, 156, 0.3);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-bright);
}
.status-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
}

/* KPI cards */
.dash-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: var(--space-4);
}
.kpi-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 8px;
}
.kpi-num {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.kpi-num-gold { color: var(--gold); }
.kpi-delta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}
.kpi-up { color: var(--green-bright); }

/* Chart card */
.dash-chart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.dash-chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.dash-chart-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.dash-chart-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 2px;
}
.dash-chart-tabs {
  display: inline-flex;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
}
.dash-tab {
  padding: 6px 14px;
  background: transparent;
  border: none;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--t);
}
.dash-tab.active {
  background: var(--surface-2);
  color: var(--text);
}
.dash-chart {
  width: 100%;
  height: 200px;
  display: block;
}
.dash-chart-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  padding: 0 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

/* Matches table */
.dash-matches-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.dash-matches-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.btn-sm { padding: 6px 12px; font-size: 12px; }
.matches-table {
  display: flex;
  flex-direction: column;
}
.match-row {
  display: grid;
  grid-template-columns: 110px 1fr 100px 80px 130px;
  gap: var(--space-3);
  padding: 12px var(--space-3);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
  align-items: center;
}
.match-row:last-child { border-bottom: none; }
.match-row-head {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  border-bottom: 1px solid var(--border-strong);
}
.match-row-when { color: var(--text-muted); }
.match-row-opp { color: var(--text); font-weight: 500; }
.match-row-moves { color: var(--text-muted); }
.match-row-result, .match-row-net { font-weight: 700; text-align: right; }
.match-row-result { text-align: left; }
.mr-win { color: var(--green-bright); }
.mr-loss { color: #d9846a; }

/* Current deployment card */
.dash-deployment-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: var(--space-5);
}
.dash-deployment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.deployment-badges {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.badge-active {
  background: rgba(106, 217, 156, 0.08);
  border-color: rgba(106, 217, 156, 0.3);
  color: var(--green-bright);
}
.deployment-cfg {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.deployment-cfg-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 8px;
}
.deployment-cfg-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.deployment-actions {
  display: flex;
  gap: var(--space-2);
}
.btn-danger {
  border-color: rgba(217, 132, 106, 0.4) !important;
  color: #d9846a !important;
}
.btn-danger:hover {
  background: rgba(217, 132, 106, 0.08) !important;
}

/* ----- Updated winnings ticker entries (agent wins) ----- */
.w-name {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
}
.w-vs {
  color: var(--text-faint);
  font-size: 12px;
  font-style: italic;
}
.w-opp {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--gold);
}
.w-pay {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--green-bright);
}

/* ----- Toast ----- */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--surface-2);
  border: 1px solid var(--gold-soft);
  color: var(--text);
  padding: 12px 20px;
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  z-index: 1000;
  opacity: 0;
  transition: all 0.25s ease;
  pointer-events: none;
}
.toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ----- Responsive ----- */
@media (max-width: 1100px) {
  .deploy-configure {
    grid-template-columns: 1fr;
  }
  .deploy-vs {
    flex-direction: row;
    justify-content: center;
  }
  .vs-spark { max-width: 320px; }
  .match-layout {
    grid-template-columns: 1fr;
  }
  .match-side-panel { flex-direction: row; flex-wrap: wrap; }
  .match-side-panel > * { flex: 1 1 280px; }
  .result-analysis-grid { grid-template-columns: 1fr; }
  .dash-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .house-agent-body { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .sliders-grid { grid-template-columns: 1fr; }
  .deploy-controls-row { grid-template-columns: 1fr; }
  .opening-grid { grid-template-columns: repeat(2, 1fr); }
  .endgame-grid { grid-template-columns: repeat(2, 1fr); }
  .deploy-header { flex-direction: column; align-items: flex-start; }
  .deploy-step-indicator { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .step-line { display: none; }
  .match-header { grid-template-columns: 1fr; text-align: center; gap: var(--space-3); }
  .match-header-them { text-align: center; align-items: center; }
  .match-row {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .match-row-head { display: none; }
  .match-row-moves { display: none; }
  .dash-kpi-grid { grid-template-columns: 1fr 1fr; }
  .kpi-num { font-size: 22px; }
}

/* =========================================================
   PvP OPPONENT PICKER + TOP PLAYERS LEADERBOARD (added)
   ========================================================= */

/* Top players section (lobby) */
.top-players {
  background: linear-gradient(180deg, rgba(20, 26, 40, 0.6), rgba(14, 18, 28, 0.7));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 22px 24px 20px;
  margin: 22px 0;
}
.top-players-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.top-players-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600; color: rgba(255,255,255,0.78);
}
.top-players-meta { font-size: 12px; color: rgba(255,255,255,0.5); }
.top-players-list { display: flex; flex-direction: column; gap: 8px; }
.top-row {
  display: grid;
  grid-template-columns: 38px 36px 1fr auto auto;
  align-items: center; gap: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
}
.top-rank {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.55);
}
.top-id { min-width: 0; }
.top-handle {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px; font-weight: 600; color: #e6edf6;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.top-agent { font-size: 12px; color: rgba(255,255,255,0.55); }
.top-rating {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 16px; font-weight: 700; color: #ffd166;
  min-width: 52px; text-align: right;
}
.top-record {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; color: rgba(255,255,255,0.6);
  min-width: 56px; text-align: right;
}
.top-players-foot { margin-top: 14px; display: flex; justify-content: flex-end; }

/* Avatars */
.opp-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  flex-shrink: 0;
}
.opp-avatar-big {
  width: 56px; height: 56px; font-size: 18px;
}

/* Selected opponent card (deploy page) */
.opponent-card-selected {
  background: linear-gradient(180deg, rgba(28, 34, 48, 0.7), rgba(18, 22, 34, 0.8));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 18px;
}
.opp-card-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.opp-card-id { min-width: 0; }
.opp-card-handle {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 16px; font-weight: 700; color: #e6edf6;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.opp-card-agent { font-size: 13px; color: rgba(255,255,255,0.6); margin-top: 2px; }
.opp-card-rating-block { text-align: right; }
.opp-card-rating {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 26px; font-weight: 700; color: #ffd166; line-height: 1;
}
.opp-card-rating-label {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.45); margin-top: 4px;
}
.opp-card-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-bottom: 14px;
}
.opp-meta-item {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 8px;
}
.opp-meta-item span:first-child {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.opp-meta-item strong { font-size: 13px; color: #e6edf6; font-weight: 600; }
.opp-meta-wide { grid-column: span 2; }

.opp-card-locked {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: rgba(255, 100, 100, 0.06);
  border: 1px dashed rgba(255, 120, 120, 0.25);
  border-radius: 8px;
  font-size: 12px; color: rgba(255, 200, 200, 0.8);
}
.lock-icon {
  font-size: 11px; color: rgba(255,140,140,0.9);
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(255,100,100,0.15);
}

/* Roster */
.opp-roster-head {
  display: flex; justify-content: space-between; align-items: center;
  margin: 18px 0 8px;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.55); font-weight: 600;
}
.opp-roster-count { color: rgba(255,255,255,0.4); font-weight: 500; }
.opp-roster {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 320px; overflow-y: auto;
  padding: 4px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px;
}
.opp-roster::-webkit-scrollbar { width: 8px; }
.opp-roster::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }

.opp-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.opp-row:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
}
.opp-row:active { transform: scale(0.995); }
.opp-row.is-selected {
  background: rgba(255, 209, 102, 0.08);
  border-color: rgba(255, 209, 102, 0.4);
}
.opp-row-left {
  display: grid; grid-template-columns: 36px 1fr;
  align-items: center; gap: 10px; min-width: 0;
}
.opp-row-id { min-width: 0; }
.opp-row-handle {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px; font-weight: 600; color: #e6edf6;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.opp-row-meta {
  font-size: 11px; color: rgba(255,255,255,0.5);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.opp-row-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.opp-row-rating {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px; font-weight: 700; color: #ffd166;
}
.opp-row-form { display: flex; gap: 3px; }

/* Form chips */
.form-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px; font-weight: 700;
  border-radius: 3px;
  letter-spacing: 0;
}
.form-w { background: rgba(60, 200, 130, 0.18); color: #5ee0a6; }
.form-l { background: rgba(230, 90, 90, 0.18); color: #ff8b8b; }
.opp-form-chips { display: inline-flex; gap: 3px; align-items: center; }

/* Quick-match button sizing */
.btn-sm { padding: 6px 12px; font-size: 12px; }

/* Tighten agent-config-head when it holds a button */
.opponent-panel .agent-config-head {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 14px; margin-bottom: 14px;
}
.opponent-panel .agent-config-head .opponent-name {
  flex: 1; min-width: 0;
}
.opponent-panel .agent-config-head #quick-match-btn { margin-left: auto; }

@media (max-width: 720px) {
  .top-row {
    grid-template-columns: 28px 32px 1fr auto;
    gap: 8px;
  }
  .top-record { display: none; }
  .opp-card-meta { grid-template-columns: 1fr; }
  .opp-meta-wide { grid-column: span 1; }
  .opp-roster { max-height: 260px; }
}

@media (max-width: 480px) {
  .opponent-panel .agent-config-head { gap: 8px 10px; }
  .opponent-panel .agent-config-head #quick-match-btn {
    width: 100%; margin-left: 0; order: 99;
  }
  .opp-card-row { grid-template-columns: 48px 1fr auto; gap: 10px; }
  .opp-avatar-big { width: 48px; height: 48px; font-size: 16px; }
  .opp-card-rating { font-size: 22px; }
  .opp-card-handle { font-size: 14px; }
}

.nowrap { white-space: nowrap; }

/* ===========================================================
   MATCH HISTORY: clickable rows, draw color, empty state, hint
   =========================================================== */
.match-row-clickable {
  cursor: pointer;
  transition: background 120ms ease;
  border-radius: 6px;
}
.match-row-clickable:hover {
  background: rgba(212,162,58,0.06);
}
.match-row-clickable:focus-visible {
  outline: 2px solid rgba(212,162,58,0.45);
  outline-offset: -2px;
}
.mr-draw { color: var(--text-muted); }
.matches-empty {
  padding: 28px var(--space-3);
  text-align: center;
  font-size: 13.5px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.dash-matches-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Mobile: collapse the match row grid so columns don't squish */
@media (max-width: 720px) {
  .match-row {
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
    padding: 10px var(--space-3);
  }
  .match-row > div { font-size: 12.5px; }
  .match-row-head { display: none; }
  .match-row-when { grid-column: 1; grid-row: 1; }
  .match-row-result { grid-column: 2; grid-row: 1; text-align: right; }
  .match-row-opp { grid-column: 1; grid-row: 2; }
  .match-row-net { grid-column: 2; grid-row: 2; text-align: right; }
  .match-row-moves {
    grid-column: 1 / -1; grid-row: 3;
    font-size: 11px; color: var(--text-faint);
  }
}

/* ===========================================================
   MATCH DETAIL MODAL
   =========================================================== */
.match-detail {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.match-detail[hidden] { display: none; }
.match-detail-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 12, 0.78);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.match-detail-card {
  position: relative;
  width: 100%;
  max-width: 680px;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  padding: 28px 30px 26px;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(212,162,58,0.16);
  animation: matchDetailIn 0.26s cubic-bezier(.2,.7,.2,1);
}
@keyframes matchDetailIn {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.match-detail-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  transition: all 120ms ease;
}
.match-detail-close:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: rgba(255,255,255,0.04);
}
.match-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: 14px;
  padding-right: 40px;
}
.match-detail-headline {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.match-detail-outcome {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.match-detail-when {
  font-size: 13px;
  color: var(--text-muted);
}
.match-detail-net {
  font-size: 22px;
  font-weight: 700;
  text-align: right;
  line-height: 1.2;
}
.match-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}
.match-detail-meta-item { white-space: nowrap; }
.match-detail-meta-item span { color: var(--text); font-weight: 600; }

.match-detail-section { margin-bottom: 18px; }
.match-detail-section:last-child { margin-bottom: 0; }
.match-detail-section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 8px;
}
.match-detail-opp-handle {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.match-detail-opp-meta {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-muted);
}

.brief-block {
  padding: 14px 16px;
  background: rgba(212,162,58,0.05);
  border: 1px solid rgba(212,162,58,0.2);
  border-left: 3px solid #d4a23a;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
}
.match-detail-config {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.pgn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 4px 14px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  padding: 14px 16px;
  background: rgba(0,0,0,0.18);
  border: 1px solid var(--border);
  border-radius: 8px;
  max-height: 260px;
  overflow-y: auto;
}
.pgn-row {
  display: grid;
  grid-template-columns: 28px 1fr 1fr;
  gap: 4px;
  align-items: baseline;
  padding: 2px 0;
}
.pgn-num { color: var(--text-faint); text-align: right; padding-right: 4px; }
.pgn-w { color: var(--text); }
.pgn-b { color: var(--text-muted); }
.pgn-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  padding: 8px 0;
}

body.modal-open { overflow: hidden; }

@media (max-width: 560px) {
  .match-detail-card { padding: 24px 18px 20px; }
  .match-detail-header { flex-direction: column; gap: 8px; padding-right: 36px; }
  .match-detail-net { text-align: left; font-size: 20px; }
  .pgn-grid { grid-template-columns: 1fr 1fr; max-height: 220px; }
}

/* ===========================================================
   SEEDED vs REAL match distinction + clear-mock banner
   =========================================================== */
.match-row-seedtag,
.match-row-realtag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: middle;
  line-height: 1;
}
.match-row-seedtag {
  color: var(--text-faint);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
}
.match-row-realtag {
  color: #4fc88a;
  background: rgba(79,200,138,0.08);
  border: 1px solid rgba(79,200,138,0.32);
}
.match-row-real {
  background: linear-gradient(90deg, rgba(79,200,138,0.04), transparent 30%);
}
.match-row-seeded { opacity: 0.78; }
.match-row-seeded:hover { opacity: 1; }

.matches-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 10px 14px;
  margin-bottom: var(--space-2);
  background: rgba(212,162,58,0.05);
  border: 1px solid rgba(212,162,58,0.2);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.matches-banner strong { color: var(--text); font-weight: 600; }
.matches-banner-btn {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 120ms ease;
}
.matches-banner-btn:hover {
  border-color: #d4a23a;
  color: #d4a23a;
  background: rgba(212,162,58,0.06);
}

@media (max-width: 720px) {
  .match-row-seedtag,
  .match-row-realtag { font-size: 8px; padding: 1px 5px; margin-left: 6px; }
}

/* =====================================================================
   MODE TOGGLE + WALLET CONTROLS
   - The Sandbox \u2194 Live switch is the single most consequential control
     in the product. It is repeated in three places (HUD, lobby hero,
     dashboard) and uses color (amber = sandbox, green = live) so the
     current mode is unmistakable at a glance.
   - Deposit / Withdraw buttons mirror the toggle's placement so the user
     can always find the actions that move money.
   ===================================================================== */

/* ---------- Mode toggle pill ---------- */
.mode-toggle {
  display: inline-flex;
  align-items: stretch;
  padding: 3px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 999px;
  gap: 0;
  position: relative;
  user-select: none;
}
.mode-toggle-opt {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}
.mode-toggle-opt:hover { color: var(--text); }

.mode-toggle-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
  box-shadow: 0 0 0 0 currentColor;
  transition: opacity .18s ease, box-shadow .18s ease;
}

/* Sandbox active = amber */
.mode-toggle-opt[data-mode="sandbox"].is-active {
  color: #d4a23a;
  background: rgba(212,162,58,0.14);
  box-shadow: inset 0 0 0 1px rgba(212,162,58,0.45);
}
.mode-toggle-opt[data-mode="sandbox"].is-active .mode-toggle-dot {
  opacity: 1;
  box-shadow: 0 0 0 3px rgba(212,162,58,0.22);
}

/* Live active = green */
.mode-toggle-opt[data-mode="live"].is-active {
  color: #4cc38a;
  background: rgba(76,195,138,0.14);
  box-shadow: inset 0 0 0 1px rgba(76,195,138,0.50);
}
.mode-toggle-opt[data-mode="live"].is-active .mode-toggle-dot {
  opacity: 1;
  box-shadow: 0 0 0 3px rgba(76,195,138,0.24);
  animation: live-pulse 1.8s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(76,195,138,0.24); }
  50%      { box-shadow: 0 0 0 5px rgba(76,195,138,0.10); }
}

.mode-toggle-lg .mode-toggle-opt {
  font-size: 12px;
  padding: 8px 16px;
}
.mode-toggle-lg .mode-toggle-dot {
  width: 8px;
  height: 8px;
}

/* ---------- HUD wallet block adjustments ---------- */
/* Original .hud-wallet stays as the outer container; we add a row layout */
.hud-wallet {
  align-items: stretch !important;
  gap: 8px !important;
  padding: 8px 12px !important;
}
.hud-wallet-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hud-wallet-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  min-width: 0;
}
.hud-wallet-actions {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.wallet-btn {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 6px);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: border-color .18s ease, background .18s ease, color .18s ease, transform .12s ease;
}
.wallet-btn:hover {
  background: rgba(255,255,255,0.07);
}
.wallet-btn:active { transform: translateY(1px); }

.wallet-btn-deposit {
  border-color: rgba(76,195,138,0.45);
  color: #6dd2a0;
  background: rgba(76,195,138,0.08);
}
.wallet-btn-deposit:hover {
  background: rgba(76,195,138,0.16);
  border-color: rgba(76,195,138,0.75);
}
.wallet-btn-withdraw {
  border-color: rgba(212,162,58,0.45);
  color: #d4a23a;
  background: rgba(212,162,58,0.06);
}
.wallet-btn-withdraw:hover {
  background: rgba(212,162,58,0.14);
  border-color: rgba(212,162,58,0.75);
}
.wallet-btn-icon {
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

/* When live mode is on, the HUD wallet gets a green outline so the
   current mode is visible even before you read the label. */
.hud-wallet[data-mode="live"] {
  border-color: rgba(76,195,138,0.45) !important;
  background: linear-gradient(180deg, rgba(76,195,138,0.06), rgba(76,195,138,0.02)) !important;
  box-shadow: 0 0 0 1px rgba(76,195,138,0.18), 0 6px 24px -10px rgba(76,195,138,0.30);
}
.hud-wallet[data-mode="sandbox"] {
  border-color: rgba(212,162,58,0.30);
}

/* ---------- Lobby wallet strip ---------- */
.wallet-strip {
  margin: 22px 0 4px;
  display: grid;
  grid-template-columns: 1.3fr 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 16px 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01));
  border: 1px solid var(--border);
  position: relative;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.wallet-strip[data-mode="sandbox"] {
  border-color: rgba(212,162,58,0.35);
  background: linear-gradient(180deg, rgba(212,162,58,0.05), rgba(212,162,58,0.01));
}
.wallet-strip[data-mode="live"] {
  border-color: rgba(76,195,138,0.45);
  background: linear-gradient(180deg, rgba(76,195,138,0.06), rgba(76,195,138,0.01));
  box-shadow: 0 0 0 1px rgba(76,195,138,0.15);
}
.wallet-strip-mode {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.wallet-strip-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.wallet-strip-hint {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.4;
}
.wallet-strip[data-mode="live"] .wallet-strip-hint { color: #6dd2a0; }
.wallet-strip-balance {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wallet-strip-amount {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 22px;
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.wallet-strip-amount .sandbox-amount { font-size: 22px; }
.wallet-strip-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.btn-deposit-lg, .btn-withdraw-lg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px !important;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.btn-deposit-lg .wallet-btn-icon,
.btn-withdraw-lg .wallet-btn-icon { font-size: 13px; }

/* Live-mode tint for primary deposit button (real money emphasis) */
.wallet-strip[data-mode="live"] .btn-deposit-lg,
.dash-wallet-card[data-mode="live"] .btn-deposit-lg {
  background: #2ea36a;
  border-color: #2ea36a;
}
.wallet-strip[data-mode="live"] .btn-deposit-lg:hover,
.dash-wallet-card[data-mode="live"] .btn-deposit-lg:hover {
  background: #36b576;
  border-color: #36b576;
}

/* ---------- Dashboard wallet card ---------- */
.dash-wallet-card {
  margin-top: 22px;
  padding: 20px 22px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.022), rgba(255,255,255,0.005));
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.dash-wallet-card[data-mode="sandbox"] {
  border-color: rgba(212,162,58,0.30);
}
.dash-wallet-card[data-mode="live"] {
  border-color: rgba(76,195,138,0.45);
  background: linear-gradient(180deg, rgba(76,195,138,0.05), rgba(76,195,138,0.01));
  box-shadow: 0 0 0 1px rgba(76,195,138,0.15);
}
.dash-wallet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.dash-wallet-body {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 24px;
  align-items: center;
}
.dash-wallet-stat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 6px;
}
.dash-wallet-stat-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 24px;
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
}
.dash-wallet-stat-value.dim {
  color: var(--text-muted);
  font-size: 20px;
}
.dash-wallet-stat-value .sandbox-amount { font-size: 24px; }
.dash-wallet-stat-value.dim .sandbox-amount { font-size: 20px; }
.dash-wallet-stat-sub {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.dash-wallet-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 160px;
}
.dash-wallet-actions .btn-deposit-lg,
.dash-wallet-actions .btn-withdraw-lg {
  width: 100%;
  justify-content: center;
}
.dash-wallet-hint {
  font-size: 12px;
  color: var(--text-muted);
  padding-top: 4px;
  border-top: 1px dashed var(--border);
  margin-top: 2px;
  line-height: 1.5;
}
.dash-wallet-card[data-mode="live"] .dash-wallet-hint { color: #8edcaf; }

/* ---------- Wallet modal ---------- */
.wallet-modal,
.live-confirm {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wallet-modal[hidden],
.live-confirm[hidden] { display: none; }
.wallet-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8,7,5,0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.wallet-modal-card {
  position: relative;
  z-index: 1;
  width: min(460px, calc(100vw - 32px));
  /* Cap height + scroll so the LN deposit view (eyebrow, title, lede,
     balance, status, QR, bolt11, meta, note, buttons) never gets cut off
     on shorter laptop screens. */
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 24px 18px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
}
.wallet-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
}
.wallet-modal-close:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.wallet-modal-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 6px;
}
.wallet-modal-eyebrow.live-eyebrow {
  color: #6dd2a0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.wallet-modal-title {
  font-family: var(--font-display, var(--font-sans));
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.wallet-modal-lede {
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0 0 18px;
}
.wallet-modal-current {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 16px;
}
.wallet-modal-current-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.wallet-modal-current-value {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
}
.wallet-modal-amount-row { margin-bottom: 10px; }
.wallet-modal-amount-label {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 700;
  margin-bottom: 6px;
}
.wallet-modal-amount-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.wallet-modal-amount-prefix {
  position: absolute;
  left: 14px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 18px;
  pointer-events: none;
}
.wallet-modal-amount-input {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px 12px 30px;
  color: var(--text);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 22px;
  outline: none;
  font-variant-numeric: tabular-nums;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.wallet-modal-amount-input:focus {
  border-color: rgba(212,162,58,0.55);
  box-shadow: 0 0 0 3px rgba(212,162,58,0.14);
}
.wallet-modal-quick {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.wallet-quick {
  appearance: none;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.wallet-quick:hover {
  color: var(--text);
  border-color: rgba(212,162,58,0.5);
  background: rgba(212,162,58,0.06);
}
.wallet-quick.is-active {
  color: #d4a23a;
  border-color: rgba(212,162,58,0.65);
  background: rgba(212,162,58,0.14);
}
.wallet-modal-note {
  background: rgba(212,162,58,0.06);
  border: 1px solid rgba(212,162,58,0.22);
  color: var(--text-muted);
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 18px;
}
.wallet-modal[data-mode="live"] .wallet-modal-note {
  background: rgba(76,195,138,0.06);
  border-color: rgba(76,195,138,0.30);
  color: #8edcaf;
}
.wallet-modal-cta-row {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.wallet-modal-cta-row .btn { padding: 9px 18px; }

/* ─── Lightning deposit/withdraw UI ───────────────────────────────── */
.wallet-modal-bolt11-input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.4;
  resize: vertical;
  min-height: 80px;
  word-break: break-all;
}
.wallet-modal-bolt11-input:focus {
  outline: none;
  border-color: rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.06);
}
.wallet-modal-amount-hint {
  font-size: 12px;
  opacity: 0.7;
  margin-top: 8px;
  margin-bottom: 12px;
}
.wallet-modal-ln-deposit,
.wallet-modal-ln-withdraw {
  margin-bottom: 14px;
}
.wallet-modal-ln-status {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  text-align: center;
}
.wallet-modal-ln-status.ln-status-ok {
  background: rgba(60, 200, 120, 0.14);
  color: #6ee7a8;
}
.wallet-modal-ln-status.ln-status-err {
  background: rgba(230, 80, 80, 0.14);
  color: #ff9d9d;
}
.wallet-modal-ln-status.ln-status-pending {
  background: rgba(255, 200, 80, 0.12);
  color: #ffd98a;
}
.wallet-modal-qr {
  display: flex;
  justify-content: center;
  margin: 10px 0;
  padding: 10px;
  background: #fff;
  border-radius: 12px;
}
.wallet-modal-qr img,
.wallet-modal-qr canvas {
  display: block;
  /* Shrink QR slightly to keep the whole modal in-view on shorter screens.
     BOLT11 stays scannable from any phone camera at this size. */
  max-width: 220px;
  height: auto;
}
.wallet-modal-qr #wallet-modal-qr-host img {
  width: 220px;
  height: 220px;
}
.wallet-modal-bolt11-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 8px;
}
.wallet-modal-bolt11-row textarea {
  flex: 1;
}
.wallet-modal-bolt11-row .btn-copy {
  flex-shrink: 0;
  padding: 8px 12px;
  font-size: 12px;
}
.wallet-modal-ln-meta {
  font-size: 13px;
  opacity: 0.85;
  text-align: center;
  margin-top: 10px;
}

/* Live confirm card variant */
.live-confirm-card { width: min(520px, calc(100vw - 32px)); }
.live-confirm-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.live-confirm-list li {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  padding-left: 22px;
  position: relative;
}
.live-confirm-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(76,195,138,0.16);
  border: 1px solid rgba(76,195,138,0.55);
}
.live-confirm-list li strong { color: var(--text); font-weight: 700; }
.live-confirm-go {
  background: #2ea36a !important;
  border-color: #2ea36a !important;
}
.live-confirm-go:hover {
  background: #36b576 !important;
  border-color: #36b576 !important;
}

/* When viewing the dashboard in live mode, KPI accents shift to green */
.dashboard-view[data-mode="live"] .kpi-num-gold { color: #6dd2a0; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .hud-wallet-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .hud-wallet-actions { justify-content: flex-end; }
}
@media (max-width: 900px) {
  .wallet-strip {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .wallet-strip-actions { justify-content: stretch; }
  .wallet-strip-actions .btn { flex: 1; justify-content: center; }
  .dash-wallet-body {
    grid-template-columns: 1fr 1fr;
  }
  .dash-wallet-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    min-width: 0;
  }
}
@media (max-width: 560px) {
  .dash-wallet-body { grid-template-columns: 1fr; }
  .dash-wallet-actions { flex-direction: column; }
  .mode-toggle-opt { padding: 6px 10px; font-size: 10.5px; }
  .mode-toggle-lg .mode-toggle-opt { padding: 7px 12px; font-size: 11px; }
  .hud-wallet { padding: 6px 10px !important; }
  .wallet-btn { padding: 5px 8px; font-size: 10.5px; }
}

/* ---------- HUD layout fixes for wallet+toggle ----------
   The HUD is a row of fixed elements; adding the wallet actions made it
   too wide. Compact the HUD wallet and let the toggle sit above the
   balance + actions row. */
.hud { gap: 14px !important; }
.hud-wallet {
  flex-direction: column !important;
  align-items: stretch !important;
}
.hud-wallet .mode-toggle { align-self: stretch; }
.hud-wallet .mode-toggle-opt { flex: 1; justify-content: center; padding: 4px 8px; font-size: 10px; }
.hud-wallet-row { justify-content: space-between; }
.hud-wallet-meta { align-items: flex-start; }
.hud-wallet-label, .hud-wallet-sats { text-align: left; }
.hud-wallet-value { font-size: 13px; }

@media (max-width: 1280px) {
  .hud-rate { display: none; }
}
@media (max-width: 1100px) {
  .hud-wallet .mode-toggle-opt { font-size: 9.5px; padding: 3px 6px; }
  .wallet-btn { padding: 4px 8px; font-size: 10.5px; }
  .hud-rating { padding: 4px 10px; }
  .hud-rating-value { font-size: 16px; }
}

/* Make HUD a touch taller to comfortably fit the new wallet toggle + actions row. */
:root { --hud-h: 84px; }
.hud-wallet { padding: 6px 12px !important; }
.hud-wallet-value { font-size: 13px !important; line-height: 1.1; }
.hud-wallet-label { font-size: 9px !important; }
.hud-wallet-sats { font-size: 10px !important; }

/* Compact HUD wallet: drop sats subtext, inline label with value */
.hud-wallet { gap: 5px !important; padding: 5px 10px !important; }
.hud-wallet .mode-toggle { padding: 2px; }
.hud-wallet .mode-toggle-opt { padding: 3px 8px; font-size: 9.5px; }
.hud-wallet .mode-toggle-dot { width: 5px; height: 5px; }
.hud-wallet-label { display: none !important; }    /* "Balance" label hidden in HUD - context obvious */
.hud-wallet-sats  { display: none !important; }    /* sats subtext hidden in HUD */
.hud-wallet-value { font-size: 14px !important; }
.hud-wallet-row { gap: 8px !important; }
.wallet-btn { padding: 4px 9px; font-size: 10.5px; }
:root { --hud-h: 72px; }

@media (max-width: 1200px) {
  .hud-rate { display: none; }
  .hud-nav { display: none; }
}

/* ===== Auth widget (HUD) ===== */
.hud-auth {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: var(--space-2);
  position: relative;
  flex-shrink: 0; /* never squeeze the auth area */
}

/* [hidden] must win over display: inline-flex on the auth widget pair. */
.btn-google[hidden],
.hud-user[hidden],
.hud-menu-signin[hidden],
.hud-menu-user[hidden] {
  display: none !important;
}

.btn-google {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  height: 36px;
  border-radius: 999px;
  background: #fff;
  color: #1f1f1f;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border: 1px solid rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: transform 120ms var(--ease), box-shadow 120ms var(--ease), background 120ms var(--ease);
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
}
.btn-google:hover {
  background: #f6f8fb;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transform: translateY(-1px);
}
.btn-google:active { transform: translateY(0); }
.btn-google .g-icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  flex-shrink: 0;
  display: block;
}

/* Signed-in user chip + dropdown */
.hud-user { position: relative; }
.hud-user-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms var(--ease), border-color 120ms var(--ease);
}
.hud-user-trigger:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
}
.hud-user-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  background: hsl(40 55% 28%);
  color: hsl(40 90% 78%);
  flex-shrink: 0;
}
.hud-user-handle {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hud-user-caret {
  font-size: 10px;
  opacity: 0.6;
  margin-left: -2px;
}

.hud-user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: #14110d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.02);
  z-index: 100;
  animation: fade 160ms var(--ease);
}
.hud-user-menu-email {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  padding: 8px 10px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hud-user-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms var(--ease);
}
.hud-user-menu-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

@media (max-width: 1100px) {
  .btn-google { padding: 7px 11px; font-size: 12px; }
  .hud-user-handle { max-width: 100px; }
}
@media (max-width: 768px) {
  /* Compact: icon-only Google button on phones */
  .btn-google {
    padding: 0;
    width: 36px;
    height: 36px;
    justify-content: center;
    gap: 0;
    font-size: 0;
  }
  .btn-google .g-icon { width: 18px; height: 18px; min-width: 18px; min-height: 18px; }
  .hud-user-handle { display: none; }
  .hud-user-trigger { padding: 4px; }
}

/* ===========================================
   AUTH GATING — visual cues when signed out
   =========================================== */

/* Subtle lock indicator on gated nav links + buttons (only when signed out). */
body.ss-signed-out .hud-nav-link[data-nav="deploy"]::after,
body.ss-signed-out .hud-nav-link[data-nav="dashboard"]::after,
body.ss-signed-out .hud-nav-link[data-nav="train"]::after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: 6px;
  vertical-align: middle;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M17 9V7a5 5 0 0 0-10 0v2H5v13h14V9h-2zm-8-2a3 3 0 1 1 6 0v2H9V7z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M17 9V7a5 5 0 0 0-10 0v2H5v13h14V9h-2zm-8-2a3 3 0 1 1 6 0v2H9V7z'/></svg>") no-repeat center / contain;
  opacity: 0.55;
}

/* Dim gated nav links and the live mode option a bit when signed out, so the
   visual hierarchy nudges users toward Sign in. */
body.ss-signed-out .hud-nav-link[data-nav="deploy"],
body.ss-signed-out .hud-nav-link[data-nav="dashboard"],
body.ss-signed-out .hud-nav-link[data-nav="train"] {
  opacity: 0.78;
}

body.ss-signed-out .mode-toggle-opt[data-mode="live"] {
  opacity: 0.7;
}

/* Wallet buttons in the topbar chip: show a lock badge in the corner when
   signed out. Cleaner than mutating the icon. */
body.ss-signed-out .wallet-btn { position: relative; }
body.ss-signed-out .wallet-btn::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg, #0c0c0e);
  box-shadow: 0 0 0 1px var(--border, #2a2a2e);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23aaa'><path d='M17 9V7a5 5 0 0 0-10 0v2H5v13h14V9h-2zm-8-2a3 3 0 1 1 6 0v2H9V7z'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 7px 7px;
}

/* Large dashboard deposit/withdraw buttons get a subtle lock prefix. */
body.ss-signed-out .btn-deposit-lg::before,
body.ss-signed-out .btn-withdraw-lg::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  vertical-align: -1px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M17 9V7a5 5 0 0 0-10 0v2H5v13h14V9h-2zm-8-2a3 3 0 1 1 6 0v2H9V7z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M17 9V7a5 5 0 0 0-10 0v2H5v13h14V9h-2zm-8-2a3 3 0 1 1 6 0v2H9V7z'/></svg>") no-repeat center / contain;
  opacity: 0.75;
}

/* Hide wallet + mode-toggle entirely when signed out — pointless without an
   account. They reappear after Google sign-in. */
body.ss-signed-out #hud-wallet,
body.ss-signed-out #wallet-strip-lobby {
  display: none !important;
}

/* ===========================================
   MOBILE NAV — hamburger button + slide-down panel
   =========================================== */

/* Hamburger button (top-right). Hidden on desktop, shown on mobile.
   On mobile, the desktop sign-in / signed-in widget is hidden inside the
   panel instead so this stays the only auth surface. */
.hud-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border, #2a2a2e);
  cursor: pointer;
  padding: 0;
  gap: 4px;
  flex-direction: column;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.hud-menu-btn:hover,
.hud-menu-btn[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}
.hud-menu-bar {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--text, #f4f0e6);
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.hud-menu-btn[aria-expanded="true"] .hud-menu-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.hud-menu-btn[aria-expanded="true"] .hud-menu-bar:nth-child(2) {
  opacity: 0;
}
.hud-menu-btn[aria-expanded="true"] .hud-menu-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Slide-down panel */
.hud-menu-panel {
  position: fixed;
  top: 64px; /* sits just below the HUD bar */
  left: 12px;
  right: 12px;
  z-index: 90;
  background: var(--bg-elev, #141417);
  border: 1px solid var(--border, #2a2a2e);
  border-radius: 14px;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.7);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: hudMenuIn 0.16s ease-out;
}
@keyframes hudMenuIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hud-menu-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hud-menu-link {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text, #f4f0e6);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 12px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.hud-menu-link:hover,
.hud-menu-link:active {
  background: rgba(255, 255, 255, 0.06);
}
.hud-menu-link.active {
  background: rgba(247, 147, 26, 0.12);
  color: var(--gold, #f7931a);
}

.hud-menu-divider {
  height: 1px;
  background: var(--border, #2a2a2e);
  margin: 6px 4px;
}

.hud-menu-auth { padding: 4px; }

.hud-menu-signin {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: #fff;
  color: #3c4043;
  border: 1px solid #dadce0;
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 0.15s ease;
}
.hud-menu-signin:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.hud-menu-signin .g-icon { width: 16px; height: 16px; min-width: 16px; min-height: 16px; flex-shrink: 0; }

.hud-menu-user {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hud-menu-user-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 6px;
}
.hud-menu-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}
.hud-menu-user-meta { min-width: 0; }
.hud-menu-user-handle {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--text, #f4f0e6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hud-menu-user-email {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-faint, #999);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hud-menu-signout {
  width: 100%;
  background: transparent;
  color: var(--text, #f4f0e6);
  border: 1px solid var(--border, #2a2a2e);
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease;
}
.hud-menu-signout:hover { background: rgba(255, 255, 255, 0.06); }

/* Show hamburger and hide desktop auth widget on mobile-ish widths.
   1024px matches the existing breakpoint where .hud-nav collapses. */
@media (max-width: 1024px) {
  .hud-menu-btn { display: inline-flex; }
  /* Desktop auth widget moves into the panel on mobile */
  #hud-auth { display: none !important; }
}

/* On wider screens the panel is irrelevant; ensure it's never visible there. */
@media (min-width: 1025px) {
  .hud-menu-panel { display: none !important; }
}

/* ─── FRIEND-AGENT: result CTA sub-line ───────────────────────────────────── */
.result-cta-sub {
  margin-top: 12px;
  text-align: center;
  color: var(--text-muted, #9a9484);
  font-size: 13px;
  letter-spacing: 0.01em;
}

/* ─── FRIEND-AGENT MODAL ─────────────────────────────────────────────────── */
.friend-modal[hidden] { display: none !important; }
.friend-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.friend-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 7, 5, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.friend-modal-card {
  position: relative;
  background: #14110b;
  border: 1px solid rgba(212, 162, 58, 0.22);
  border-radius: 16px;
  max-width: 440px;
  width: 100%;
  padding: 28px 28px 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  max-height: 90vh;
  overflow: auto;
}
.friend-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  color: #9a9484;
  font-size: 16px;
  cursor: pointer;
}
.friend-modal-close:hover { background: rgba(255,255,255,0.06); color: #f4f0e6; }
.friend-modal-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  color: #d4a23a;
  font-weight: 600;
  margin-bottom: 8px;
}
.friend-modal-title {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 24px;
  line-height: 1.18;
  color: #f4f0e6;
  margin: 0 0 8px;
}
.friend-modal-sub {
  font-size: 14px;
  line-height: 1.5;
  color: #9a9484;
  margin: 0 0 20px;
}
.friend-modal-label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #d4a23a;
  font-weight: 600;
  text-transform: uppercase;
  margin: 14px 0 6px;
}
.friend-modal-input {
  display: block;
  width: 100%;
  background: #0a0805;
  border: 1px solid #2a2a2e;
  border-radius: 10px;
  padding: 11px 13px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: #f4f0e6;
  outline: none;
  transition: border-color 0.12s ease;
}
.friend-modal-input:focus { border-color: #d4a23a; }
.friend-modal-name-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.friend-modal-name-col .friend-modal-label { margin-top: 14px; }
@media (max-width: 480px) {
  .friend-modal-name-row { grid-template-columns: 1fr; gap: 0; }
}
.friend-modal-hint {
  margin-top: 10px;
  font-size: 12px;
  color: #6f6a5d;
  line-height: 1.5;
}
.friend-modal-error {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(212, 80, 80, 0.12);
  border: 1px solid rgba(212, 80, 80, 0.45);
  border-radius: 8px;
  color: #f0b3b3;
  font-size: 13px;
}
.friend-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 22px;
}
.friend-share-row {
  display: flex;
  gap: 8px;
  margin: 18px 0 6px;
}
.friend-share-input {
  flex: 1;
  background: #0a0805;
  border: 1px solid #2a2a2e;
  border-radius: 10px;
  padding: 11px 13px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: #f4f0e6;
}
.friend-share-hint {
  font-size: 12px;
  color: #6f6a5d;
  margin-bottom: 4px;
}
body.modal-open { overflow: hidden; }

/* ─── ROSTER CARD ────────────────────────────────────────────────────────── */
.roster-card {
  background: #14110b;
  border: 1px solid rgba(212, 162, 58, 0.18);
  border-radius: 14px;
  padding: 22px 22px 18px;
  margin: 22px 0;
}
.roster-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.roster-sub {
  font-size: 13px;
  color: #9a9484;
  margin-top: 4px;
  line-height: 1.45;
}
.roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.roster-tile {
  background: #0a0805;
  border: 1px solid #2a2a2e;
  border-radius: 12px;
  padding: 14px 14px 12px;
  text-align: left;
  cursor: default;
  position: relative;
}
.roster-tile-own { border-color: rgba(212, 162, 58, 0.35); }
.roster-tile-tag {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10px;
  color: #d4a23a;
  font-weight: 600;
  margin-bottom: 6px;
}
.roster-tile-name {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  color: #f4f0e6;
}
.roster-tile-meta {
  font-size: 12px;
  color: #9a9484;
  margin-top: 4px;
}
.roster-tile-status-row { margin-top: 8px; }
.roster-tile-status {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 4px;
  font-weight: 600;
}
.roster-tile-status-pending {
  background: rgba(212, 162, 58, 0.15);
  color: #d4a23a;
}
.roster-tile-status-claimed {
  background: rgba(76, 195, 138, 0.15);
  color: #4cc38a;
}
.roster-tile-commission {
  font-size: 12px;
  color: #c4bda9;
  margin-top: 6px;
}
.roster-tile-share {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.roster-tile-share-input {
  flex: 1;
  background: #14110b;
  border: 1px solid #2a2a2e;
  border-radius: 7px;
  padding: 6px 8px;
  font-size: 11px;
  color: #c4bda9;
  font-family: var(--font-sans);
  min-width: 0;
}
.roster-tile-share-copy {
  font-size: 11px !important;
  padding: 6px 10px !important;
  min-width: 60px;
}
.roster-tile-action {
  margin-top: 10px;
  width: 100%;
  font-size: 12px !important;
  padding: 7px 10px !important;
}
.roster-tile-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(212, 162, 58, 0.05);
  border: 1.5px dashed rgba(212, 162, 58, 0.35);
  color: #c4bda9;
  cursor: pointer;
  min-height: 140px;
  transition: background 0.15s ease, border-color 0.15s ease;
  font-family: var(--font-sans);
}
.roster-tile-add:hover {
  background: rgba(212, 162, 58, 0.1);
  border-color: rgba(212, 162, 58, 0.6);
}
.roster-tile-plus {
  font-size: 28px;
  line-height: 1;
  color: #d4a23a;
  margin-bottom: 8px;
  font-weight: 300;
}
.roster-tile-add-title {
  font-size: 13px;
  font-weight: 600;
  color: #f4f0e6;
}
.roster-tile-add-sub {
  font-size: 11px;
  color: #9a9484;
  margin-top: 4px;
}

/* ─── CLAIM VIEW ─────────────────────────────────────────────────────────── */
/* Base .view { display: none } hides this until friends.js activates the
   claim view via .active. We only set the *active* layout here. */
.claim-view.active { display: flex; min-height: 60vh; align-items: center; justify-content: center; padding: 40px 20px; }
.claim-card {
  max-width: 520px;
  width: 100%;
  background: #14110b;
  border: 1px solid rgba(212, 162, 58, 0.22);
  border-radius: 16px;
  padding: 36px 32px 28px;
  text-align: center;
}
.claim-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  color: #d4a23a;
  font-weight: 600;
  margin-bottom: 12px;
}
.claim-title {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 30px;
  line-height: 1.16;
  color: #f4f0e6;
  margin: 0 0 12px;
}
.claim-sub {
  font-size: 15px;
  line-height: 1.5;
  color: #9a9484;
  margin: 0 0 22px;
}
.claim-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 22px 0;
}
.claim-stat {
  background: #0a0805;
  border: 1px solid #2a2a2e;
  border-radius: 10px;
  padding: 14px 8px;
}
.claim-stat-num {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 22px;
  color: #d4a23a;
  font-weight: 600;
}
.claim-stat-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9a9484;
  margin-top: 4px;
}
.claim-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 18px 0 12px;
}
/* [hidden] must always win over .btn { display: inline-flex } */
[hidden] { display: none !important; }
.claim-foot {
  font-size: 11px;
  color: #6f6a5d;
  margin: 16px 0 0;
}

@media (max-width: 640px) {
  .roster-head { flex-direction: column; align-items: stretch; }
  .roster-grid { grid-template-columns: 1fr; }
  .claim-title { font-size: 24px; }
  .friend-modal-card { padding: 24px 20px 20px; }
}

/* ============================================================
   FAQ PAGE
   ============================================================ */
#faq { max-width: 920px; margin: 0 auto; padding-bottom: var(--space-12); }
#faq .page-lede { max-width: 680px; margin-bottom: var(--space-8); color: var(--text-muted); }
#faq .page-lede a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(212,162,58,0.4); }
#faq .page-lede a:hover { border-bottom-color: var(--gold); }

.faq-jump {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: var(--space-10);
}
.faq-jump-tile {
  display: block;
  padding: 12px 14px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: border-color var(--t), transform var(--t), color var(--t);
}
.faq-jump-tile:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-1px);
}

.faq-group {
  margin-bottom: var(--space-10);
  scroll-margin-top: 80px; /* offset for sticky HUD when jump-linking */
}
.faq-group-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-4);
  color: var(--text);
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color var(--t);
}
.faq-item[open] {
  border-color: var(--border-strong);
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 44px 16px 18px;
  position: relative;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
  user-select: none;
  transition: color var(--t);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 400;
  color: var(--gold);
  transition: transform var(--t);
  line-height: 1;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item summary:hover { color: var(--gold); }

.faq-answer {
  padding: 0 18px 18px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
}
.faq-answer p { margin-bottom: 10px; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer ul { margin: 0 0 0 18px; padding: 0; }
.faq-answer li { margin-bottom: 6px; }
.faq-answer a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(212,162,58,0.4); }
.faq-answer a:hover { border-bottom-color: var(--gold); }
.faq-answer strong { color: var(--text); }
.faq-answer code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: 4px;
}

.faq-cta-row {
  display: flex;
  gap: 12px;
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .faq-jump { grid-template-columns: 1fr 1fr; }
  .faq-item summary { font-size: 14px; padding: 14px 40px 14px 14px; }
  .faq-answer { padding: 0 14px 14px; }
  .faq-cta-row .btn { flex: 1 1 100%; }
}

/* ─── Expired magic-link banner ──────────────────────────────────────────
   Injected by auth.js when a user lands via /?auth=expired&reason=...
   (i.e. clicked a deposit link from an old email and the magic-token
   verification failed). Sits above the HUD so the user notices and can
   one-click sign in to still reach deposit. */
.expired-link-banner {
  background: linear-gradient(135deg, rgba(247, 147, 26, 0.18), rgba(247, 147, 26, 0.08));
  border-bottom: 1px solid rgba(247, 147, 26, 0.45);
  color: var(--text-primary, #f5f5f5);
  padding: 14px 20px;
  position: sticky;
  top: 0;
  z-index: 9000;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}
.expired-link-banner-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
}
.expired-link-banner-text { flex: 1; min-width: 0; }
.expired-link-banner-headline {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 2px;
}
.expired-link-banner-detail {
  font-size: 13px;
  opacity: 0.85;
}
.expired-link-banner-cta {
  background: var(--btc-orange, #f7931a);
  color: #0b0b0c;
  border: 0;
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.expired-link-banner-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(247, 147, 26, 0.45);
}
.expired-link-banner-dismiss {
  background: transparent;
  color: var(--text-primary, #f5f5f5);
  border: 0;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  opacity: 0.6;
}
.expired-link-banner-dismiss:hover { opacity: 1; }
@media (max-width: 640px) {
  .expired-link-banner-inner { flex-wrap: wrap; }
  .expired-link-banner-text { flex: 1 1 100%; }
  .expired-link-banner-cta { flex: 1; }
}