/*
 * Beat the House: design tokens + motion.
 * Isolation rules:
 *  - Every custom property is prefixed --bth-.
 *  - Every class is prefixed .bth-.
 *  - Nothing targets html, body, or bare elements.
 *  - Tokens only apply inside an element with [data-bth-root].
 * Theme: data-bth-theme="dark" (default) | "light". Mirror the app's
 * existing theme toggle onto this attribute; do not add a second toggle.
 */

[data-bth-root] {
  --bth-bg: #0E1112;
  --bth-surf: #141819;
  --bth-surf2: #1C2123;
  --bth-line: rgba(242,244,238,.07);
  --bth-line2: rgba(242,244,238,.16);
  --bth-ink: #F2F4EE;
  --bth-mute: #8D9497;
  --bth-acc: #D4F53C;          /* fills: buttons, active pills, chips */
  --bth-acc-text: #D4F53C;     /* accent used as text on surfaces */
  --bth-acc-ink: #0E1112;      /* text on accent fills */
  --bth-acc-soft: rgba(212,245,60,.12);
  --bth-acc-glow: rgba(212,245,60,.38);
  --bth-good: #D4F53C;
  --bth-good-soft: rgba(212,245,60,.10);
  --bth-bad: #FF5A4E;
  --bth-bad-soft: rgba(255,90,78,.16);
  --bth-warn: #FF8A3D;
  --bth-warn-soft: rgba(255,138,61,.12);
  --bth-felt: radial-gradient(ellipse 75% 60% at 50% 45%, #1B211D 0%, #131816 60%, #0D1010 100%);
  --bth-felt-tex: repeating-radial-gradient(ellipse at 50% 45%, transparent 0 34px, rgba(212,245,60,.045) 34px 35px);
  --bth-rim: #090B0B;
  --bth-chip-bg: rgba(14,17,18,.78);
  --bth-scrim: rgba(5,7,8,.66);
  --bth-tile-back: repeating-linear-gradient(135deg, rgba(212,245,60,.08) 0 3px, transparent 3px 8px);

  --bth-font-display: 'Barlow Condensed', sans-serif; /* 800–900, italic for headlines/buttons */
  --bth-font-body: 'Plus Jakarta Sans', sans-serif;
  --bth-font-mono: 'JetBrains Mono', monospace;       /* labels, numbers, prices, chips */

  --bth-r-tile: 8px;   --bth-r-card: 14px;  --bth-r-sheet: 24px;  --bth-r-pill: 999px;
  --bth-ease: cubic-bezier(.2,.8,.25,1);
  --bth-ease-slam: cubic-bezier(.3,1.5,.5,1);

  color: var(--bth-ink);
  background: var(--bth-bg);
  font-family: var(--bth-font-body);
}

[data-bth-root][data-bth-theme="light"] {
  --bth-bg: #F2F3EE;
  --bth-surf: #FFFFFF;
  --bth-surf2: #EBEDE6;
  --bth-line: rgba(14,17,18,.08);
  --bth-line2: rgba(14,17,18,.18);
  --bth-ink: #0E1112;
  --bth-mute: #596064;
  --bth-acc: #C9EE22;
  --bth-acc-text: #4C6300;
  --bth-acc-ink: #0E1112;
  --bth-acc-soft: rgba(150,190,0,.14);
  --bth-acc-glow: rgba(170,215,0,.42);
  --bth-good: #4C6300;
  --bth-good-soft: rgba(150,190,0,.14);
  --bth-bad: #D13A2E;
  --bth-bad-soft: rgba(209,58,46,.12);
  --bth-warn: #B8530F;
  --bth-warn-soft: rgba(184,83,15,.10);
  --bth-felt: radial-gradient(ellipse 75% 60% at 50% 45%, #F4F7EC 0%, #E6EBDA 60%, #D9DFCB 100%);
  --bth-felt-tex: repeating-radial-gradient(ellipse at 50% 45%, transparent 0 34px, rgba(76,99,0,.07) 34px 35px);
  --bth-rim: #FFFFFF;
  --bth-chip-bg: rgba(255,255,255,.88);
  --bth-scrim: rgba(14,17,18,.42);
  --bth-tile-back: repeating-linear-gradient(135deg, rgba(76,99,0,.10) 0 3px, transparent 3px 8px);
}

/* ---------- Motion (every reveal completes < 4s, never blocks input) ---------- */

/* Tile / hole-card flip. Markup: .bth-flip > .bth-flip__inner > .bth-flip__front + .bth-flip__back */
[data-bth-root] .bth-flip { perspective: 600px; }
[data-bth-root] .bth-flip__inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .55s var(--bth-ease);
  transition-delay: var(--bth-flip-delay, 0s);   /* Deal/Flop: index * 120ms. Guess reveal: 0 for all */
  transform: rotateY(180deg);                    /* face down */
}
[data-bth-root] .bth-flip.is-up .bth-flip__inner { transform: rotateY(0deg); }
[data-bth-root] .bth-flip__front,
[data-bth-root] .bth-flip__back {
  position: absolute; inset: 0; border-radius: inherit;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
[data-bth-root] .bth-flip__back { transform: rotateY(180deg); background: var(--bth-tile-back), var(--bth-surf2); }

/* Sale price slam at the River (starts at t=0, 340ms) */
@keyframes bth-slam {
  0%   { transform: scale(2.6); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}
[data-bth-root] .bth-slam { transform-origin: right center; animation: bth-slam .34s var(--bth-ease-slam) both; }

/* ±10% corridor grows in after the slam (t=450ms, 500ms) */
@keyframes bth-corridor { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
[data-bth-root] .bth-corridor { transform-origin: var(--bth-sale-pct, 50%) center; animation: bth-corridor .5s var(--bth-ease) .45s both; }

/* "THE HOUSE WINS" stamp (t=400ms) */
@keyframes bth-stamp { from { transform: translateX(-50%) rotate(-3deg) scale(2); opacity: 0; } to { transform: translateX(-50%) rotate(-3deg) scale(1); opacity: 1; } }
[data-bth-root] .bth-stamp { animation: bth-stamp .35s var(--bth-ease-slam) .4s both; }

/* Chip slide: animate each chip from pot to target with JS-set --bth-dx/--bth-dy.
   Start t=1.0s, stagger 70ms per chip, 550ms each. Last chip lands ~1.9s. */
@keyframes bth-chip-slide { from { transform: translate(0,0); opacity: 1; } to { transform: translate(var(--bth-dx), var(--bth-dy)); opacity: var(--bth-chip-end-opacity, 1); } }
[data-bth-root] .bth-chip {
  width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box;
  background: var(--bth-acc); border: 3px double var(--bth-acc-ink);
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  animation: bth-chip-slide .55s var(--bth-ease) both;
  animation-delay: calc(1s + var(--bth-i, 0) * 70ms);
}

/* Countdown ring: stroke-dashoffset = C * (1 - secondsLeft/25). Update every 250ms. */
[data-bth-root] .bth-ring__track { stroke: var(--bth-line2); }
[data-bth-root] .bth-ring__value { stroke: var(--bth-acc); transition: stroke-dashoffset .25s linear; }

@media (prefers-reduced-motion: reduce) {
  [data-bth-root] .bth-flip__inner,
  [data-bth-root] .bth-slam,
  [data-bth-root] .bth-corridor,
  [data-bth-root] .bth-stamp,
  [data-bth-root] .bth-chip { transition-duration: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; }
}