/* ChugZone — quick brand layer (we also use Tailwind via CDN for utilities) */
:root {
  --cz-bg: #0b0f14;
  --cz-card: #111827;
  --cz-ink: #e5e7eb;
  --cz-ink-dim: #9ca3af;
  --cz-accent: #22d3ee; /* cyan accent */
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; height: 100%; }
body {
  background: radial-gradient(1200px 600px at 70% -10%, rgba(34,211,238,0.12), transparent 60%),
              radial-gradient(900px 500px at 5% 10%, rgba(139,92,246,0.12), transparent 60%),
              var(--cz-bg);
  color: var(--cz-ink);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  min-height: 100vh;
}

/* Make main content feel OPEN on large screens */
main, section { width: 100%; }
.wrapper-open { max-width: 1280px; margin: 0 auto; padding-inline: 24px; }
@media (min-width: 1440px) {
  .wrapper-open { max-width: 1400px; padding-inline: 32px; }
}
@media (min-width: 1920px) {
  .wrapper-open { max-width: 1600px; padding-inline: 40px; }
}

/* Hero wordmark */
.cz-logo {
  font-weight: 800;
  letter-spacing: 0.5px;
  text-shadow: 0 6px 30px rgba(34,211,238,0.25);
}

/* Card */
.cz-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1.25rem;
  padding: 1rem;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  backdrop-filter: blur(6px);
}
.cz-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 50px rgba(0,0,0,0.35);
  border-color: rgba(255,255,255,0.18);
}

/* CTA button */
.cz-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding: .75rem 1rem;
  border-radius: .9rem;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(180deg, rgba(34,211,238,0.18), rgba(34,211,238,0.08));
  text-decoration: none; color: white;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.cz-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(34,211,238,0.25); }

.cz-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .6rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--cz-ink-dim);
  font-size: .8rem;
}

.cz-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(255,255,255,0.1);
  color: var(--cz-ink);
  border: 1px solid rgba(255,255,255,0.18);
}

/* Brand input/textarea */
.cz-input {
  width: 100%;
  padding: .75rem .9rem;
  border-radius: .9rem;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: var(--cz-ink);
  outline: none;
}
.cz-input:focus {
  border-color: rgba(34,211,238,.55);
  box-shadow: 0 0 0 3px rgba(34,211,238,.18);
}

/* Gradient headline with subtle motion */
.cz-gradient{
  background: linear-gradient(90deg,#67e8f9,#a78bfa,#22d3ee);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% 100%; animation:cz-sheen 6s linear infinite;
}
@keyframes cz-sheen{0%{background-position:0% 50%}100%{background-position:200% 50%}}

/* Hero sheen */
.cz-hero-sheen{
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.08), transparent 60%);
  animation: cz-pulse 7s ease-in-out infinite;
}
@keyframes cz-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }

/* Continuous marquee */
.cz-marquee{ overflow:hidden; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); }
.cz-marquee__inner{
  display:flex; gap:2rem; padding:.75rem 0; white-space:nowrap;
  animation: cz-mar 18s linear infinite;
  color:#9ca3af; font-size:.9rem;
}
.cz-marquee__inner span{opacity:.8}
@keyframes cz-mar{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Featured preview mini-stack (home) */
.cz-preview{
  position:relative; height:170px; display:grid; place-items:center;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); border-radius:1rem;
}
.cz-preview__card{
  width:82px;height:116px;border-radius:.6rem; display:grid; place-items:center;
  font-weight:800; letter-spacing:.5px;
  background:#0f172a; border:1px solid rgba(255,255,255,.14); color:#e5e7eb;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  transform: translateY(-6px) rotate(-6deg);
}
.cz-preview__card--mid{ transform: translateY(0) rotate(6deg); }
.cz-preview__soon{
  position:absolute; bottom:.6rem; right:.6rem;
  padding:.25rem .5rem; border-radius:999px; font-size:.75rem;
  border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:#e5e7eb;
}

/* Disabled but legit */
.cz-btn--disabled{opacity:.65;cursor:not-allowed;filter:grayscale(.1)}
.cz-btn--disabled:hover{transform:none;box-shadow:none}

/* Brand punch subtle glow */
.cz-brandpunch{box-shadow:0 0 0 1px rgba(34,211,238,.12), 0 20px 60px rgba(0,0,0,.35)}

/* =========================
   KING'S CUP — GAME STAGE
   ========================= */

/* Stage should feel open */
.kc-stage {
  min-height: calc(100vh - 180px); /* header/footer padding estimate */
}
@media (min-width: 1280px) {
  .kc-stage { min-height: calc(100vh - 160px); }
}
@media (min-width: 1600px) {
  .kc-stage { min-height: calc(100vh - 140px); }
}

/* Player list items */
.kc-player {
  display:flex; align-items:center; justify-content:space-between;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: .9rem; padding: .5rem .75rem;
}
.kc-player__name { font-weight: 700; }
.kc-player__actions { display:flex; gap:.4rem; }

/* Circle container (no stacking; we fully rerender) */
.kc-circle {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
  z-index: 0; /* stays behind the center card */
}

/* Mini card in the ring */
.kc-mini {
  position: absolute;
  width: 82px; height: 116px; border-radius: 14px;
  background: #0b1220;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 12px 36px rgba(0,0,0,.35);
  transform-origin: center var(--radius, 180px);
  transform:
    rotate(var(--angle, 0deg))
    translateY(calc(var(--radius, 180px) * -1))
    rotate(calc(var(--angle, 0deg) * -1));
  opacity: .72;
}
.kc-mini::after {
  content: ""; position: absolute; inset: 0; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}

/* Center flip card shows rule on the back */
.kc-card {
  width: 220px; height: 308px; border-radius: 18px;
  perspective: 1200px;
  transform-origin: center;
  transition: transform .25s ease;
  box-shadow: 0 22px 70px rgba(0,0,0,.45);
  z-index: 1; /* above circle */
}
@media (min-width: 1400px) {
  .kc-card { width: 260px; height: 360px; }
}
@media (min-width: 1800px) {
  .kc-card { width: 300px; height: 420px; }
}

.kc-card--hidden { visibility: hidden; }

.kc-card__inner {
  position: relative; width: 100%; height: 100%;
  border-radius: 18px; transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
  background: #0f172a; border: 1px solid rgba(255,255,255,.14);
}
.kc-face {
  position: absolute; inset: 0; border-radius: 18px;
  display: grid; place-items: center; backface-visibility: hidden;
  padding: 1rem; text-align: center;
}
.kc-face--front { color:#e5e7eb; font-weight: 800; font-size: 2.2rem; }
.kc-face--back  { transform: rotateY(180deg); color:#e5e7eb; font-weight: 800; font-size: 1.15rem; line-height: 1.35; }

.kc-card.kc-card--flip .kc-card__inner { transform: rotateY(180deg); }

/* Rule text below the card — large & legible on stream */
#currentRule {
  text-shadow: 0 8px 40px rgba(0,0,0,.45);
}

/* Utility: give more breathing room to the right control column on wide screens */
@media (min-width: 1280px) {
  .kc-controls-wide { width: 320px; }
}

/* Make grids less cramped on very large screens */
@media (min-width: 1600px) {
  .grid-open { grid-column-gap: 3rem; grid-row-gap: 2rem; }
}
/* Make the stage feel even more open on large screens */
.kc-stage { min-height: calc(100vh - 140px); }
@media (min-width: 1440px) { .kc-stage { min-height: calc(100vh - 120px); } }
@media (min-width: 1920px) { .kc-stage { min-height: calc(100vh - 100px); } }

/* Center card transition when old card fades out before new flip */
.kc-card--out {
  opacity: 0;
  transform: scale(.96);
  transition: opacity .18s ease, transform .18s ease;
}

/* Ensure center card sits over the ring */
.kc-card { z-index: 1; }
.kc-circle { z-index: 0; }

/* Defensive: prevent accidental stacking context issues */
.kc-card, .kc-card__inner, .kc-mini { will-change: transform, opacity; }
/* Center flip card shows rule on the back (robust across browsers) */
.kc-card {
  width: 220px; height: 308px; border-radius: 18px;
  perspective: 1200px;
  transform-origin: center;
  transition: transform .25s ease;
  box-shadow: 0 22px 70px rgba(0,0,0,.45);
  z-index: 1;
}
@media (min-width: 1400px) { .kc-card { width: 260px; height: 360px; } }
@media (min-width: 1800px) { .kc-card { width: 300px; height: 420px; } }

.kc-card--hidden { visibility: hidden; }
.kc-card--out { opacity: 0; transform: scale(.96); transition: opacity .2s ease, transform .2s ease; }

.kc-card__inner {
  position: relative; width: 100%; height: 100%;
  border-radius: 18px;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
  background: #0f172a; border: 1px solid rgba(255,255,255,.14);
  will-change: transform;
}
.kc-card__inner.is-flipped { transform: rotateY(180deg); }

.kc-face {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  border-radius: 18px;
  padding: 1rem; text-align: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden; /* Safari/WebKit */
  transform-style: preserve-3d;
}
.kc-face--front {
  color:#e5e7eb; font-weight: 800; font-size: 2.2rem;
}
.kc-face--back  {
  transform: rotateY(180deg);
  color:#e5e7eb; font-weight: 800; font-size: 1.15rem; line-height: 1.35;
}

/* Circle of remaining cards (no stacking: we re-render) */
.kc-circle {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
  z-index: 0;
}
.kc-mini {
  position: absolute;
  width: 82px; height: 116px; border-radius: 14px;
  background: #0b1220;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 12px 36px rgba(0,0,0,.35);
  transform-origin: center var(--radius, 180px);
  transform: rotate(var(--angle, 0deg))
             translateY(calc(var(--radius, 180px) * -1))
             rotate(calc(var(--angle, 0deg) * -1));
  opacity: .72;
  will-change: transform, opacity;
}
.kc-mini::after {
  content: ""; position: absolute; inset: 0; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}

/* Rule text below the card — large & legible */
#currentRule { text-shadow: 0 8px 40px rgba(0,0,0,.45); }
/* Emoji logo badge — built with pure HTML/CSS */
.cz-emojilogo{
  position: relative;
  width: 56px;height:56px;border-radius:50%;
  display:grid;place-items:center;
  background: radial-gradient(100% 100% at 30% 20%, #22d3ee55 0%, transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
  overflow: visible;
}
.cz-emojilogo__ring{
  position:absolute; inset:-6px; border-radius:999px;
  border:2px dashed rgba(103,232,249,.4);
  filter: drop-shadow(0 0 18px rgba(103,232,249,.35));
  animation: cz-spin 10s linear infinite;
}
.cz-emojilogo__burst{
  position:absolute; width:120px;height:120px;border-radius:50%;
  background: radial-gradient(closest-side, rgba(167,139,250,.18), transparent 60%);
  z-index:-1; filter: blur(10px);
}
.cz-emojilogo__emoji{ font-size: 26px; transform: translateY(1px); }
.cz-emojilogo__sparkle{
  position:absolute; right:-6px; top:-6px; font-size:16px; animation: cz-pop 2s ease-in-out infinite;
}
@keyframes cz-spin{ to { transform: rotate(360deg); } }
@keyframes cz-pop{ 0%,100%{ transform: scale(1) } 50%{ transform: scale(1.25) } }

/* Rainbow pulse CTA */
.cz-cta-rainbow{
  background: linear-gradient(90deg,#22d3ee33,#a78bfa33,#22d3ee33);
  background-size: 200% 100%;
  animation: cz-sheen 6s linear infinite;
}

/* Tilt cards look a little thicker */
.cz-tilt{
  transform-style: preserve-3d;
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}

/* Make cards pop on hover more */
.cz-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}

/* Stronger badge styles for LIVE/Soon */
.cz-badge{
  top: .65rem; right: .65rem;
  padding: .25rem .55rem; font-weight: 800; letter-spacing: .2px;
  background: rgba(34,211,238,.15);
  border: 1px solid rgba(34,211,238,.35);
}
/* =========================================================
   RIDE THE BUS — FIT BETTER WHILE ALLOWING NORMAL SCROLL
   ========================================================= */

/* Try to fill the viewport without forcing it */
section.py-6 { min-height: 100svh; }

/* Main game container grows to viewport but can exceed if needed */
section.py-6 > .rtb-container {
  min-height: calc(100svh - 2rem);  /* works with your py-6 padding */
  display: flex; flex-direction: column;
}

/* Title row — compact so it doesn't push the layout */
.rtb-container > .flex.items-center.justify-between.mb-4 {
  flex: 0 0 auto;
  gap: .75rem;
  margin-bottom: .5rem !important;
}
.rtb-container > .flex.items-center.justify-between.mb-4 h1 {
  margin: 0;
  line-height: 1.05;
  font-size: clamp(18px, 2.2vw, 28px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Main row (sidebar + stage) prefers to fit view height */
.rtb-container > .flex:not(.items-center) {
  flex: 1 1 auto;
  min-height: 0;
}

/* Sidebar: allow wrapping without pushing the stage */
.rtb-container aside { min-height: 0; }
.rtb-container aside .cz-card + .cz-card { margin-top: .75rem; }

/* Stage: header + pane, tries to fit but page can still scroll */
.rtb-container main { min-height: 0; display: flex; }
.rtb-container main .cz-card {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
}
.rtb-container main .cz-card > header {
  flex: 0 0 auto;
  margin-bottom: .5rem;
}

/* Stage panes cross-fade inside a stable area */
.rtb-pane {
  position: relative;
  flex: 1 1 auto; min-height: 0;
  opacity: 0; transform: translateY(6px);
  pointer-events: none;
  transition: opacity .26s ease, transform .26s ease;
}
.rtb-pane.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.rtb-pane.hidden { display: none; }

/* Keep feedback lines from shifting card height */
#rtbToast, #rtbFinalToast { min-height: 1.5rem; }

/* =========================================================
   RIDE THE BUS — PLAYER HAND
   ========================================================= */
.rtb-hand { display:flex; flex-wrap: wrap; gap: .25rem .375rem; }
.rtb-badge {
  display:inline-flex; align-items:center; justify-content:center;
  font-size: 11px; font-weight: 800; letter-spacing: .02em;
  padding: 2px 6px; border-radius: 999px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
}
.rtb-badge--red { color:#e84545; border-color:#e84545; background: rgba(232,69,69,0.08); }

/* =========================================================
   RIDE THE BUS — MODALS (dark, crisp, animated)
   ========================================================= */
.rtb-dialog {
  border: none;
  border-radius: 16px;
  padding: 0;
  width: min(560px, 96vw);
  color: #e5e7eb;
  background:
    radial-gradient(800px 400px at 20% -10%, rgba(34,211,238,.08), transparent 60%),
    radial-gradient(600px 320px at 110% 20%, rgba(167,139,250,.08), transparent 60%),
    #14151b;
  box-shadow:
    0 30px 90px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.06) inset;
}
.rtb-dialog::backdrop {
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(2px);
}
.rtb-dialog[open] {
  animation: rtbDialogIn .18s ease-out;
}
@keyframes rtbDialogIn {
  from { transform: translateY(6px) scale(.98); opacity: 0; }
  to   { transform: translateY(0)  scale(1);   opacity: 1; }
}
.rtb-dialog-body { padding: 16px; }
.rtb-holder-line {
  border: 1px dashed rgba(255,255,255,.12);
  padding: .5rem .75rem;
  border-radius: 12px;
  margin-bottom: .5rem;
}

/* =========================================================
   RIDE THE BUS — CARDS & FLIPS
   ========================================================= */
.rtb-card { position:relative; width:200px; height:280px; perspective:1000px; }
.rtb-card.rtb-large { width:260px; height:360px; }   /* Phase 1 hero */
.rtb-small { width:120px; height:168px; }            /* Community */
.rtb-mini  { width:86px;  height:120px; }            /* Bus slots */

.rtb-card-front, .rtb-card-back {
  position:absolute; inset:0;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:16px; box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transform-style:preserve-3d;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);  /* smoother flip */
}
.rtb-card-front {
  background: linear-gradient(135deg,#0e0e12,#1a1a24);
  display:flex; align-items:center; justify-content:center;
}
.rtb-card-back  {
  background:#ffffff;
  transform: rotateY(180deg);
  display:flex; align-items:center; justify-content:center;
}

.rtb-card.flipped .rtb-card-front { transform: rotateY(180deg); }
.rtb-card.flipped .rtb-card-back  { transform: rotateY(0deg); }

/* Card face content — black suits are truly black (not gray) */
.rtb-card-face {
  width: 88%; height: 88%;
  border: 2px solid #0b0b0b;    /* deep black border */
  border-radius: 12px;
  display:flex; align-items:center; justify-content:center; flex-direction: column;
  color: #0b0b0b;               /* deep black ink */
}
.rtb-card-face.rtb-red   { color:#c51111; border-color:#c51111; }
.rtb-card-face.rtb-black { color:#0b0b0b; border-color:#0b0b0b; }

.rtb-rank { font-size: 64px; line-height: 1; font-weight: 900; }
.rtb-suit { font-size: 40px; line-height: 1; opacity: .95; margin-top: .25rem; }
.rtb-small .rtb-rank { font-size: 36px; } .rtb-small .rtb-suit { font-size: 24px; }
.rtb-mini  .rtb-rank { font-size: 28px; } .rtb-mini  .rtb-suit { font-size: 18px; }

.rtb-card-mark { opacity:.45; font-size: 2.25rem; font-weight: 900; }

/* =========================================================
   RIDE THE BUS — FEEDBACK & ANIMS
   ========================================================= */
#rtbOutcome { margin-bottom: .5rem; font-weight: 900; font-size: 1.05rem; text-align: center; }
#rtbOutcome.rtb-outcome--good { color:#34d399; text-shadow: 0 0 18px rgba(52,211,153,.25); }
#rtbOutcome.rtb-outcome--bad  { color:#f87171; text-shadow: 0 0 18px rgba(248,113,113,.25); }

@keyframes rtbPulse { 0%{transform:scale(1)} 50%{transform:scale(1.04)} 100%{transform:scale(1)} }
@keyframes rtbShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
.rtb-pulse { animation: rtbPulse .42s ease; }
.rtb-shake { animation: rtbShake .42s ease; }

/* =========================================================
   RIDE THE BUS — ROWS & ACTIVE SLOT
   ========================================================= */
.rtb-community-row { display:flex; gap:.5rem; flex-wrap: wrap; min-height: 176px; }
.rtb-bus-track     { display:flex; gap:.5rem; flex-wrap: wrap; min-height: 132px; }

/* Strong active slot highlight */
.rtb-card.is-active {
  outline: 2px solid rgba(34,211,238,.88);
  outline-offset: 2px;
  box-shadow: 0 0 0 8px rgba(34,211,238,.14), 0 18px 60px rgba(0,0,0,.46);
  transform: scale(1.05);
  transition: transform .2s ease, box-shadow .2s ease, outline-color .2s ease;
}
.rtb-card.is-active .rtb-card-face { filter: drop-shadow(0 0 14px rgba(34,211,238,.28)); }

/* =========================================================
   RIDE THE BUS — RESPONSIVE FIT (short screens)
   ========================================================= */
@media (max-height: 860px) {
  .rtb-card.rtb-large { width: 240px; height: 330px; }
}
@media (max-height: 780px) {
  .rtb-card.rtb-large { width: 220px; height: 300px; }
  .rtb-small { width: 112px; height: 158px; }
  .rtb-mini  { width: 82px;  height: 116px; }
}
@media (max-height: 720px) {
  .rtb-card.rtb-large { width: 204px; height: 280px; }
  .rtb-small { width: 104px; height: 148px; }
  .rtb-mini  { width: 78px;  height: 110px; }
}

/* Narrow widths: nudge spacing tighter */
@media (max-width: 960px) {
  .rtb-community-row, .rtb-bus-track { gap: .4rem; }
}
/* ===== Ride the Bus — polish layout (airy & readable) ===== */

/* Title rail adds subtle separation without eating height */
.rtb-rail{
  padding: .25rem .25rem .35rem .25rem;
  border-bottom: 1px dashed rgba(255,255,255,.08);
}

/* Panels in sidebar / controls are evenly spaced and calm */
.rtb-panel{
  padding: .75rem .8rem;
}

/* Stage height feels consistent across phases */
.rtb-stage{ display:flex; flex-direction:column; min-height: 560px; }
.rtb-stage-head{ padding-bottom:.25rem; }

/* Frame keeps the “center action” consistent and uncluttered */
.rtb-frame{
  min-height: 360px;         /* consistent action zone */
  width: 100%;
  padding: .25rem .25rem 0 .25rem;
}

/* Deck + Draw grouping */
.rtb-stack{
  display:grid; grid-auto-flow:column; align-items:center; gap: 1.25rem;
}
.rtb-stack-item{ display:grid; place-items:center; gap:.4rem; }
.rtb-stack-caption{ font-size: 11px; opacity:.7; }

/* Small message zone under cards to avoid layout jump */
.rtb-msg{ min-height: 44px; }

/* Turn strip */
.rtb-strip{
  display:flex; align-items:baseline; justify-content:space-between;
  gap: 1rem; padding: .25rem .3rem;
  border-bottom: 1px dashed rgba(255,255,255,.08);
}

/* Pane fade (already used by your JS class toggling) */
.rtb-pane{ opacity:0; transform: translateY(6px); pointer-events:none; transition: opacity .26s ease, transform .26s ease; }
.rtb-pane.is-active{ opacity:1; transform:translateY(0); pointer-events:auto; }
.rtb-pane.hidden{ display:none; }

/* Card sizing nudges for better balance on laptop screens */
@media (max-height: 820px){
  .rtb-card.rtb-large{ width:240px; height:330px; }
}
@media (max-height: 740px){
  .rtb-card.rtb-large{ width:220px; height:300px; }
  .rtb-small{ width:112px; height:158px; }
}

/* Player list item (inherits .cz-item look; just a little tighter) */
#rtbScore .cz-item{ padding:.5rem .6rem; }
/* =========================
   HORSE RACE (Discord-ready)
   ========================= */

/* Stage: compact & stable for 1080p screenshares, with a little give for smaller views */
.hr-stage {
  min-height: clamp(460px, 56vh, 620px);
  display: grid;
  gap: 14px;
  align-content: start;
}

/* Track + lanes */
.hr-trackwrap { display: grid; gap: 12px; }

/* Lane container */
.hr-lane {
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 10px;
  position: relative;
  overflow: hidden;
}

/* Lane header */
.hr-lane-head { display:flex; align-items:center; gap:8px; margin-bottom:6px; }

/* Slightly taller horse track for readability on streams */
.hr-lane-body { position: relative; height: clamp(72px, 9vw, 96px); }

/* Slots area inset from both sides (start & finish gutters) */
.hr-slots {
  position:absolute; inset:0 72px 0 72px;
  display:grid; grid-template-columns: repeat(var(--slots, 8), 1fr);
  gap: 6px; align-items:center;
}
.hr-slot { height: 3px; background: rgba(255,255,255,.08); border-radius: 999px; }

/* Finish tag */
.hr-finish {
  position:absolute; right: 16px; top: 50%; transform: translateY(-50%) rotate(-90deg);
  font-size: 10px; letter-spacing: 1px; color:#fecaca;
  border:1px dashed rgba(239,68,68,.6);
  padding: 2px 6px; border-radius: 999px; background: rgba(239,68,68,.08);
}

/* Horse (Ace) — position with CSS var --progress (0..1) across lane width */
.hr-horse {
  position:absolute; top: 50%;
  left: calc(72px + (100% - 144px) * var(--progress, 0)); /* 72px gutters both sides */
  transform: translateY(-50%);
  transition: left .55s cubic-bezier(.2,.8,.2,1);
  will-change: left;
  filter: drop-shadow(0 8px 30px rgba(0,0,0,.45));
}
.hr-horse.hr-no-anim { transition: none; }

/* Ace visuals */
.hr-ace {
  width: 56px; height: 76px; border-radius: 10px;
  background: #0f172a; border:1px solid rgba(255,255,255,.14);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.hr-ace--red { color:#e84545; border-color: rgba(232,69,69,.5); }
.hr-ace--black { color:#e5e7eb; border-color: rgba(255,255,255,.18); }
.hr-ace-rank { font-weight:900; font-size: 22px; line-height:1; }
.hr-ace-suit { font-size: 20px; margin-top: 2px; }

/* Smaller header aces */
.hr-lane-head .hr-ace { width: 36px; height: 48px; border-radius: 8px; }
.hr-lane-head .hr-ace-rank { font-size:16px; }
.hr-lane-head .hr-ace-suit { font-size:14px; }

/* Near-finish drama */
.hr-near .hr-ace {
  animation: hrPulse .6s ease-in-out infinite;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 10px 40px rgba(255,0,0,.18);
}
@keyframes hrPulse { 0%,100%{ transform: scale(1)} 50%{ transform: scale(1.06)} }

/* Winner flash */
.hr-winner { box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 0 0 6px rgba(34,211,238,.15) inset; }
.hr-winner .hr-ace { animation: hrWin 1.1s ease both; }
@keyframes hrWin { 0%{ transform: scale(1)} 30%{ transform: scale(1.15)} 70%{ transform: scale(0.98)} 100%{ transform: scale(1.06)} }

/* Photo-finish speedlines (subtle so it compresses well on Discord) */
.hr-photo-mode .hr-lane-body::after {
  content:""; position:absolute; inset:0 72px; pointer-events:none;
  background: repeating-linear-gradient(90deg, transparent 0 14px, rgba(255,255,255,.04) 14px 16px);
  animation: hrSweep 1.2s linear infinite;
}
@keyframes hrSweep { to { background-position-x: -60px; } }

/* Deck row */
.hr-deckrow { display:flex; align-items:center; gap: 16px; margin-top: 6px; }
.hr-deck { position: relative; width: 56px; height: 76px; }
.hr-deck-card {
  position:absolute; inset:0; border-radius:10px;
  background: linear-gradient(135deg,#0e0e12,#1a1a24);
  border:1px solid rgba(255,255,255,.14);
}
.hr-pop { animation: hrPop .25s ease; }
@keyframes hrPop { 0%{ transform: translateY(0)} 60%{ transform: translateY(-6px)} 100%{ transform: translateY(0)} }

/* =========================
   Fit-to-screen helpers
   ========================= */
.hr-fit-wrap { position: relative; width: 100%; }
.hr-fit-inner { width: 100%; transform-origin: top left; will-change: transform; }

/* Respect Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .hr-horse { transition: none; }
  .hr-near .hr-ace, .hr-winner .hr-ace, .hr-pop, .hr-photo-mode .hr-lane-body::after { animation: none !important; }
}