/* ============================================================
   HOTBOX — the poker table (#screen-game)
   Psychedelic Speakeasy aesthetic — see docs/DESIGN.md + GAME-FLOW-V2.md
   Extends main.css; reuses --tokens, .btn.

   Design intent: the FELT owns the screen. Seats hug the rim as pods,
   the pot + cards sit big in the center, and reveals fly to a hero stage.
   ============================================================ */

/* The game screen breaks out of the narrow card column and fills the view.
   It owns the full stage height and aligns to the TOP so tall phases
   (roundover with the forfeit panel) can grow downward and scroll naturally
   instead of being clipped/centred off-screen. */
.stage:has(#screen-game:not(.hidden)) {
  place-items: start center;
  align-content: start;
}
#screen-game {
  max-width: min(100vw, 980px);
  width: 100%;
  align-self: stretch;
}
#game-root { width: 100%; }

.gt {
  position: relative;
  width: 100%;
  min-height: calc(100dvh - 2rem);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 0.5rem;
}
/* On phones, let the layout be content-tall (not viewport-locked) so the
   bottom action zone is always reachable by scrolling. */
@media (max-width: 620px) {
  .gt { min-height: 0; }
}

/* ░░ Header ░░ ------------------------------------------------------------- */
.gt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.gt-head__meta { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; min-width: 0; }
.gt-round {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--ink-dim);
}
.gt-round b { color: var(--acid); }
.gt-cat {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.9rem, 2.6vw, 1.1rem);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60vw;
}
.gt-phase-pill {
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  padding: 0.32rem 0.8rem;
  border-radius: 999px;
  color: var(--acid);
  border: 1px solid rgba(182, 255, 60, 0.35);
  background: rgba(182, 255, 60, 0.06);
  flex: 0 0 auto;
}
.gt-phase-pill[data-phase="betting"] {
  color: var(--ember);
  border-color: rgba(255, 138, 61, 0.5);
  background: rgba(255, 138, 61, 0.08);
}
.gt-phase-pill[data-phase="answering"] {
  color: var(--magenta);
  border-color: rgba(255, 77, 141, 0.5);
  background: rgba(255, 77, 141, 0.08);
  animation: phasePulse 1.2s ease-in-out infinite;
}
.gt-phase-pill[data-phase="roundover"] {
  color: var(--rarity-legendary);
  border-color: rgba(255, 200, 61, 0.5);
}
@keyframes phasePulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 77, 141, 0); }
  50%      { box-shadow: 0 0 18px rgba(255, 77, 141, 0.5); }
}

/* ░░ Assembling question ░░ ----------------------------------------------- */
.gt-assembly {
  min-height: 1.5rem;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.95rem, 2.8vw, 1.35rem);
  line-height: 1.3;
  color: var(--ink);
  text-shadow: 0 0 22px rgba(182, 255, 60, 0.18);
  padding: 0 0.5rem;
}
.gt-assembly.is-placeholder {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(0.62rem, 1.9vw, 0.78rem);
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  text-shadow: none;
}

/* ░░ Table — the dominant element ░░ -------------------------------------- */
.gt-table-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  max-height: min(72vh, 640px);
  margin: 0 auto;
  align-self: center;
}
.gt-felt {
  position: absolute;
  inset: 9% 4%;
  border-radius: 46% / 50%;
  background:
    radial-gradient(ellipse at 50% 34%, rgba(61, 255, 176, 0.12), transparent 58%),
    radial-gradient(ellipse at center, #0e2419 0%, #07140d 58%, #04100a 100%);
  border: 2px solid rgba(182, 255, 60, 0.16);
  box-shadow:
    inset 0 0 80px rgba(0, 0, 0, 0.7),
    inset 0 0 0 10px rgba(182, 255, 60, 0.035),
    0 0 70px rgba(182, 255, 60, 0.12),
    0 24px 60px rgba(0, 0, 0, 0.55);
}
/* Rim light — a soft neon ring around the felt edge. */
.gt-felt__rim {
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(182, 255, 60, 0.25);
  background: linear-gradient(180deg, rgba(182, 255, 60, 0.06), transparent 30%);
}
.gt-felt__ring {
  position: absolute;
  inset: 7%;
  border-radius: 46% / 50%;
  border: 1px dashed rgba(182, 255, 60, 0.12);
}

/* Turn indicator — a soft pointer that orbits to the active seat. */
.gt-turn {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 1px;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transform: rotate(var(--ang, 0deg));
  transform-origin: center;
}
.gt-turn.is-on { opacity: 1; }
.gt-turn::after {
  content: "";
  position: absolute;
  left: 0;
  top: -8px;
  width: clamp(70px, 20vw, 160px);
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(182, 255, 60, 0.6));
  filter: blur(3px);
  animation: turnPulse 1.4s ease-in-out infinite;
}
@keyframes turnPulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.95; }
}

/* ░░ Center: pot + cards ░░ ----------------------------------------------- */
.gt-center {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  align-content: center;
  gap: clamp(0.5rem, 2vw, 1rem);
  pointer-events: none;
  /* Keep cards inside a centre safe-zone so they never collide with rim pods. */
  padding: 14% 16%;
}
.gt-pot {
  display: grid;
  justify-items: center;
  gap: 0.05rem;
  padding: 0.45rem 1.3rem;
  border-radius: var(--radius);
  background: rgba(10, 7, 16, 0.6);
  border: 1px solid rgba(182, 255, 60, 0.28);
  box-shadow: 0 0 34px rgba(182, 255, 60, 0.16);
  will-change: transform;
}
.gt-pot__label, .gt-pot__hits {
  font-size: 0.54rem;
  letter-spacing: 0.24em;
  color: var(--ink-dim);
}
.gt-pot__value {
  font-size: clamp(1.9rem, 6.5vw, 3rem);
  font-weight: 700;
  color: var(--acid);
  text-shadow: 0 0 24px rgba(182, 255, 60, 0.55);
  line-height: 1;
}
.gt-pot.is-burning { border-color: var(--ember); box-shadow: 0 0 44px rgba(255, 138, 61, 0.6); }
.gt-pot.is-burning .gt-pot__value { color: var(--ember); text-shadow: 0 0 28px rgba(255, 138, 61, 0.85); }

/* Cards — BIG + readable */
.gt-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(0.4rem, 1.8vw, 0.9rem);
  max-width: 100%;
  pointer-events: auto;
}
.gt-card {
  width: clamp(74px, 17vw, 124px);
  aspect-ratio: 5 / 7;
  perspective: 900px;
  border-radius: 14px;
  --rarity: var(--rarity-common);
  transition: transform 0.18s ease;
}
.gt-card.is-tappable {
  cursor: pointer;
  animation: cardBeckon 1.8s ease-in-out infinite;
}
.gt-card.is-tappable:hover { transform: translateY(-5px) scale(1.04); }
.gt-card.is-tappable:active { transform: scale(0.97); }
@keyframes cardBeckon {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.gt-card.is-staging { opacity: 0; } /* hidden while its hero clone performs */
.gt-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
.gt-card.is-flipped .gt-card__inner { transform: rotateY(180deg); }
.gt-card__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 14px;
  display: grid;
  place-items: center;
  padding: 0.4rem;
  text-align: center;
}
.gt-card__back {
  background:
    radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--rarity) 38%, #0a0710), #0a0710 78%);
  border: 2px solid var(--rarity);
  box-shadow:
    0 0 18px color-mix(in srgb, var(--rarity) 55%, transparent),
    inset 0 0 24px color-mix(in srgb, var(--rarity) 22%, transparent);
  animation: cardGlow 3.2s ease-in-out infinite;
}
@keyframes cardGlow {
  0%, 100% { box-shadow: 0 0 14px color-mix(in srgb, var(--rarity) 45%, transparent), inset 0 0 24px color-mix(in srgb, var(--rarity) 18%, transparent); }
  50%      { box-shadow: 0 0 30px color-mix(in srgb, var(--rarity) 80%, transparent), inset 0 0 28px color-mix(in srgb, var(--rarity) 28%, transparent); }
}
.gt-card__rune {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  color: var(--rarity);
  opacity: 0.9;
  text-shadow: 0 0 16px var(--rarity);
}
.gt-card__no {
  position: absolute;
  bottom: 0.3rem;
  right: 0.45rem;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--rarity);
  opacity: 0.6;
}
.gt-card__front {
  transform: rotateY(180deg);
  background: linear-gradient(180deg, rgba(28, 20, 40, 0.96), rgba(10, 7, 16, 0.96));
  border: 2px solid var(--rarity);
  box-shadow: inset 0 0 22px color-mix(in srgb, var(--rarity) 32%, transparent);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(0.62rem, 1.9vw, 0.9rem);
  line-height: 1.18;
  color: var(--ink);
  overflow: hidden;
}

/* Hero reveal stage — clone flies here, scales big, holds. */
.gt-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
}
.gt-stage.is-on { opacity: 1; }
.gt-card--hero {
  position: absolute;
  left: 0;
  top: 0;
  width: 110px;
  transform-origin: center;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.6));
}

/* Flying chips layer */
.gt-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 5;
}
.gt-chip {
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--acid), var(--acid-soft) 70%);
  border: 1.5px solid rgba(10, 7, 16, 0.6);
  box-shadow: 0 0 10px rgba(182, 255, 60, 0.7);
}
.gt-chip--win {
  background: radial-gradient(circle at 35% 30%, var(--rarity-legendary), #c99700 70%);
  box-shadow: 0 0 12px rgba(255, 200, 61, 0.8);
}

/* Timer ring (betting street + answer race) — floats in the upper table area,
   never displacing or covering the centre cards. */
.gt-timer {
  position: absolute;
  top: 2%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  width: clamp(52px, 13vw, 84px);
  height: clamp(52px, 13vw, 84px);
  display: grid;
  place-items: center;
  pointer-events: none;
}
.gt-timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gt-timer__track { fill: none; stroke: rgba(169, 159, 194, 0.18); stroke-width: 6; }
.gt-timer__bar {
  fill: none;
  stroke: var(--ember);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 276.46;
  stroke-dashoffset: calc(276.46 * (1 - var(--frac, 1)));
  filter: drop-shadow(0 0 6px rgba(255, 138, 61, 0.7));
  transition: stroke-dashoffset 0.12s linear;
}
.gt-timer[data-mode="race"] .gt-timer__bar {
  stroke: var(--magenta);
  filter: drop-shadow(0 0 6px rgba(255, 77, 141, 0.7));
}
.gt-timer.is-low .gt-timer__bar { stroke: var(--danger); filter: drop-shadow(0 0 8px rgba(255, 92, 122, 0.9)); }
.gt-timer__num {
  position: absolute;
  font-size: clamp(1.1rem, 3.2vw, 1.6rem);
  font-weight: 700;
  color: var(--ink);
}
.gt-timer.is-low .gt-timer__num { color: var(--danger); }

/* ░░ Seats — pods hugging the rim ░░ -------------------------------------- */
/* The seat LAYER must not eat taps meant for the cards beneath it — only the
   pods themselves are interactive. (This was the card-tap bug: the full-bleed
   .gt-seats box sat above .gt-center and swallowed every click.) */
.gt-seats { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.gt-seat { pointer-events: auto; }
.gt-seat {
  position: absolute;
  width: 21%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
}
.gt-seat__inner {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.18rem;
  width: 100%;
  will-change: transform, filter;
}
.gt-seat__bud {
  width: min(86px, 17vw);
  height: min(86px, 17vw);
  display: grid;
  place-items: center;
}
.gt-seat--empty .gt-seat__inner::before {
  content: "open";
  display: grid;
  place-items: center;
  width: min(58px, 13vw);
  height: min(58px, 13vw);
  border-radius: 50%;
  border: 2px dashed rgba(169, 159, 194, 0.28);
  font-family: var(--font-mono);
  font-size: 0.54rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.gt-seat--empty .gt-seat__bud,
.gt-seat--empty .gt-seat__name,
.gt-seat--empty .gt-seat__badge { display: none; }

.gt-seat--filled .gt-seat__bud { animation: seatBob 5s ease-in-out infinite; }
@keyframes seatBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.gt-seat--me .gt-seat__bud { filter: drop-shadow(0 0 16px rgba(182, 255, 60, 0.5)); }
.gt-seat--folded { opacity: 0.38; filter: grayscale(0.6); }

/* active-turn halo */
.gt-seat--turn .gt-seat__inner::after {
  content: "";
  position: absolute;
  inset: -10% -10% auto -10%;
  top: -10%;
  height: 108%;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--acid), 0 0 34px rgba(182, 255, 60, 0.7);
  animation: turnHalo 1.3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes turnHalo {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

.gt-seat__name {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  max-width: 135%;
}
.gt-seat__handle {
  font-family: var(--font-mono);
  font-size: clamp(0.55rem, 1.7vw, 0.74rem);
  color: var(--ink);
  background: rgba(10, 7, 16, 0.65);
  border: 1px solid rgba(182, 255, 60, 0.18);
  border-radius: 999px;
  padding: 0.12rem 0.45rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 9ch;
}
.gt-seat--me .gt-seat__handle { border-color: var(--acid); color: var(--acid); }
.gt-seat__bb {
  font-size: clamp(0.6rem, 1.8vw, 0.82rem);
  font-weight: 700;
  color: var(--rarity-legendary);
  text-shadow: 0 0 10px rgba(255, 200, 61, 0.4);
}
.gt-seat__bb::after { content: " $BB"; font-size: 0.7em; color: var(--ink-faint); }

/* Badge above the bud: lastAction tag + street commitment */
.gt-seat__badge {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 0;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gt-seat__badge.is-on { opacity: 1; transform: scale(1); }
.gt-seat__act {
  font-size: clamp(0.5rem, 1.5vw, 0.64rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink);
  background: rgba(10, 7, 16, 0.8);
  border: 1px solid rgba(169, 159, 194, 0.35);
  border-radius: 999px;
  padding: 0.08rem 0.45rem;
  white-space: nowrap;
}
.gt-seat__act:empty { display: none; }
.gt-seat__act[data-kind="bet"], .gt-seat__act[data-kind="raise"] {
  color: var(--bg-void);
  background: linear-gradient(180deg, var(--ember), #e0742a);
  border-color: transparent;
}
.gt-seat__act[data-kind="call"] {
  color: var(--acid);
  border-color: rgba(182, 255, 60, 0.5);
}
.gt-seat__act[data-kind="check"] { color: var(--ink-dim); }
.gt-seat__act[data-kind="fold"] {
  color: var(--danger);
  border-color: rgba(255, 92, 122, 0.4);
}
.gt-seat__bet {
  font-size: clamp(0.6rem, 1.7vw, 0.78rem);
  font-weight: 700;
  color: var(--bg-void);
  background: linear-gradient(180deg, var(--acid), var(--acid-soft));
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  box-shadow: 0 0 14px rgba(182, 255, 60, 0.5);
}
.gt-seat__bet:empty { display: none; }
.gt-seat__bet:not(:empty)::after { content: " ♦"; }

/* Locked-in pulse over a seat (answering — never the choice) */
.gt-seat--locked .gt-seat__inner::before {
  content: "LOCKED";
  position: absolute;
  top: -1.2rem;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.14em;
  color: var(--bg-void);
  background: var(--cyan);
  border-radius: 999px;
  padding: 0.08rem 0.4rem;
  box-shadow: 0 0 16px rgba(77, 229, 255, 0.7);
  animation: lockPulse 1.1s ease-in-out infinite;
}
@keyframes lockPulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.12); opacity: 1; }
}

/* Forfeit status tag — a small pill below the bud at roundover. */
.gt-seat__forfeit { position: absolute; bottom: -1.2rem; z-index: 3; display: grid; place-items: center; }
.gt-seat[data-seat="0"] .gt-seat__forfeit { bottom: -1.3rem; }
.gt-seat__tag {
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  border-radius: 999px;
  padding: 0.08rem 0.42rem;
  white-space: nowrap;
  border: 1px solid transparent;
}
.gt-seat__tag--owe {
  color: var(--danger);
  background: rgba(10, 7, 16, 0.85);
  border-color: rgba(255, 92, 122, 0.55);
  animation: tagPulse 1s ease-in-out infinite;
}
.gt-seat__tag--paid {
  color: var(--bg-void);
  background: linear-gradient(180deg, var(--acid), var(--acid-soft));
  box-shadow: 0 0 14px rgba(182, 255, 60, 0.45);
}
.gt-seat__tag--safe {
  color: var(--acid);
  background: rgba(182, 255, 60, 0.08);
  border-color: rgba(182, 255, 60, 0.4);
}
@keyframes tagPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 92, 122, 0); }
  50%      { box-shadow: 0 0 14px rgba(255, 92, 122, 0.6); }
}
.gt-seat--owing .gt-seat__bud { animation: owePulse 1s ease-in-out infinite; }
.gt-seat--paid .gt-seat__bud { filter: drop-shadow(0 0 14px rgba(182, 255, 60, 0.6)); }
@keyframes owePulse {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(255, 92, 122, 0.4)); }
  50%      { filter: drop-shadow(0 0 16px rgba(255, 92, 122, 0.8)); }
}

/* ══ Roundover reward: $BB-to-winner flight + clear outcome tags ══ */

/* Pot gilds gold (legendary token) when HITS convert to $BB. */
.gt-pot.is-gilded {
  border-color: var(--rarity-legendary);
  box-shadow: 0 0 50px rgba(255, 200, 61, 0.55), inset 0 0 22px rgba(255, 200, 61, 0.2);
  animation: potGild 1.6s ease-in-out infinite;
}
.gt-pot.is-gilded .gt-pot__value {
  color: var(--rarity-legendary);
  text-shadow: 0 0 26px rgba(255, 200, 61, 0.85);
}
.gt-pot.is-gilded .gt-pot__label,
.gt-pot.is-gilded .gt-pot__hits { color: var(--rarity-legendary); opacity: 0.85; }
@keyframes potGild {
  0%, 100% { box-shadow: 0 0 40px rgba(255, 200, 61, 0.45), inset 0 0 22px rgba(255, 200, 61, 0.18); }
  50%      { box-shadow: 0 0 64px rgba(255, 200, 61, 0.75), inset 0 0 26px rgba(255, 200, 61, 0.28); }
}
.gt-pot.is-burning .gt-pot__label { color: var(--ember); }

/* $BB coins flying pot → winner, with a trailing glow. */
.gt-coin {
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, #fff3c4, var(--rarity-legendary) 46%, #c99700 78%);
  border: 1.5px solid rgba(120, 84, 0, 0.6);
  box-shadow: 0 0 16px rgba(255, 200, 61, 0.85), inset 0 -2px 4px rgba(120, 84, 0, 0.5);
  z-index: 2;
}
.gt-coin::before {
  content: "$";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11px;
  color: #7a5400;
}
.gt-coin__glow {
  position: absolute;
  inset: -60%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 200, 61, 0.55), transparent 70%);
  z-index: -1;
}

/* Pot-burned smoke puffs. */
.gt-puff {
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 138, 61, 0.5), rgba(106, 98, 128, 0.35) 60%, transparent 72%);
  filter: blur(2px);
  z-index: 2;
}

/* "+N $BB" award that pops over the winner's bud. */
.gt-seat__award {
  position: absolute;
  top: -1.4rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  font-size: clamp(0.78rem, 2.6vw, 1.15rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--rarity-legendary);
  text-shadow: 0 0 14px rgba(255, 200, 61, 0.9), 0 2px 4px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
}
.gt-seat__award.is-on { opacity: 1; }

/* WINNER pod: gold glow ring + a "WINNER" flourish is shown via the outcome tag. */
.gt-seat--winner .gt-seat__bud {
  filter: drop-shadow(0 0 22px rgba(255, 200, 61, 0.85));
  animation: winnerBud 1.4s ease-in-out infinite;
}
@keyframes winnerBud {
  0%, 100% { filter: drop-shadow(0 0 16px rgba(255, 200, 61, 0.6)); }
  50%      { filter: drop-shadow(0 0 30px rgba(255, 200, 61, 1)); }
}
.gt-seat--winner .gt-seat__inner::after {
  content: "";
  position: absolute;
  top: -8%;
  left: -8%;
  width: 116%;
  height: 116%;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--rarity-legendary), 0 0 40px rgba(255, 200, 61, 0.8);
  animation: winnerRing 1.3s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes winnerRing {
  0%, 100% { opacity: 0.55; transform: scale(0.97); }
  50%      { opacity: 1; transform: scale(1.03); }
}

/* Round-outcome tag above each bud (winner / too slow / missed / folded). */
.gt-seat__outcome {
  position: absolute;
  top: -1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  font-size: clamp(0.5rem, 1.5vw, 0.62rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  border: 1px solid transparent;
  background: rgba(10, 7, 16, 0.82);
}
.gt-seat__outcome.is-on { opacity: 1; }
.gt-seat__outcome--won {
  text-transform: uppercase;
  color: var(--bg-void);
  background: linear-gradient(180deg, var(--rarity-legendary), #d99e00);
  border-color: transparent;
  box-shadow: 0 0 18px rgba(255, 200, 61, 0.65);
  animation: winnerTag 1.1s ease-in-out infinite;
}
@keyframes winnerTag {
  0%, 100% { box-shadow: 0 0 14px rgba(255, 200, 61, 0.5); }
  50%      { box-shadow: 0 0 24px rgba(255, 200, 61, 0.95); }
}
/* The winner's WINNER tag sits above the "+N $BB" award — nudge it higher. */
.gt-seat--winner .gt-seat__outcome { top: -2.6rem; }
.gt-seat__outcome--tooslow {
  color: var(--ember);
  border-color: rgba(255, 138, 61, 0.6);
  background: rgba(255, 138, 61, 0.1);
}
.gt-seat__outcome--lost {
  color: var(--ink-dim);
  border-color: rgba(169, 159, 194, 0.35);
}
.gt-seat__outcome--folded {
  color: var(--ink-faint);
  border-color: rgba(106, 98, 128, 0.35);
}
/* Dim non-winning pods so the winner reads as the clear hero. */
.gt-seat--lost:not(.gt-seat--winner) .gt-seat__bud,
.gt-seat--tooslow:not(.gt-seat--winner) .gt-seat__bud { opacity: 0.62; }

/* ── Forfeit hold-to-hit panel (bottom controls, debtor only) ── */
.gt-forfeit-panel {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
}
.gt-forfeit-panel__cap {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  text-align: center;
}
.gt-forfeit-panel__cap b { color: var(--danger); }
.gt-forfeit {
  position: relative;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 2px solid var(--danger);
  background: rgba(10, 7, 16, 0.85);
  color: var(--ink);
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  /* Hold must run uninterrupted: no text-selection, no callout menu, no scroll/
     gesture can start on press. (Mobile bug: holding selected the label text
     and cancelled the hold.) */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  box-shadow: 0 0 22px rgba(255, 92, 122, 0.45);
  transition: transform 0.12s ease, box-shadow 0.16s ease;
}
.gt-forfeit:active { transform: scale(0.96); }
.gt-forfeit__ring {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 50%;
}
.gt-forfeit__fill {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, rgba(255, 92, 122, 0.55), rgba(255, 92, 122, 0.9));
  box-shadow: 0 0 24px rgba(255, 92, 122, 0.7);
}
.gt-forfeit__label {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  line-height: 1.05;
  text-align: center;
  color: var(--ink);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  /* The inner label must not be selectable either, or a drag over it cancels
     the hold mid-press. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}
.gt-forfeit__ring, .gt-forfeit__fill {
  pointer-events: none;
}
.gt-forfeit.is-holding {
  box-shadow: 0 0 34px rgba(255, 92, 122, 0.85);
  animation: forfeitShake 0.18s ease-in-out infinite;
}
@keyframes forfeitShake {
  0%, 100% { transform: translateX(0) scale(1.02); }
  25%      { transform: translateX(-1.5px) scale(1.02); }
  75%      { transform: translateX(1.5px) scale(1.02); }
}
.gt-forfeit.is-done {
  border-color: var(--acid);
  box-shadow: 0 0 30px rgba(182, 255, 60, 0.7);
  animation: none;
}
.gt-forfeit.is-done .gt-forfeit__fill {
  background: linear-gradient(180deg, var(--acid), var(--acid-soft));
}

/* Safe / paid copy in the controls zone. */
.gt-safe {
  margin: 0;
  text-align: center;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  line-height: 1.35;
  color: var(--acid);
}
.gt-safe b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  display: inline-block;
  text-shadow: 0 0 16px rgba(182, 255, 60, 0.4);
}
.gt-safe--paid b { color: var(--acid); }

/* ░░ Options ░░ ----------------------------------------------------------- */
.gt-options {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: 0.2rem;
}
.gt-options.is-on { display: grid; }
.gt-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-align: left;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid rgba(169, 159, 194, 0.2);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: transform 0.12s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.gt-option:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(182, 255, 60, 0.45);
  box-shadow: 0 0 22px rgba(182, 255, 60, 0.16);
}
.gt-option:active:not(:disabled) { transform: scale(0.98); }
.gt-option:disabled { cursor: default; opacity: 0.85; }
.gt-option__key {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--acid);
  background: rgba(182, 255, 60, 0.1);
  border: 1px solid rgba(182, 255, 60, 0.3);
}
.gt-option.is-picked {
  border-color: var(--cyan);
  box-shadow: 0 0 24px rgba(77, 229, 255, 0.4);
}
.gt-option.is-correct {
  border-color: var(--acid);
  background: linear-gradient(180deg, rgba(182, 255, 60, 0.18), rgba(182, 255, 60, 0.04));
  box-shadow: 0 0 30px rgba(182, 255, 60, 0.5);
}
.gt-option.is-correct .gt-option__key { color: var(--bg-void); background: var(--acid); }

/* ░░ Table-first layout: controls slide in/out ░░ ------------------------- */
/* When the local player has nothing to do (gt--watching) the action panel
   collapses out and a slim "waiting" strip shows instead — the felt grows to
   fill the freed space. When they must act (gt--acting) the relevant control
   panel is present (and animates in via GSAP from game.js). */
.gt-waitstrip {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  background: rgba(10, 7, 16, 0.55);
  border: 1px solid rgba(169, 159, 194, 0.18);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  text-align: center;
  margin: 0 auto;
  max-width: max-content;
}
.gt--watching .gt-waitstrip { display: flex; }
.gt--watching .gt-controls { display: none; }
.gt--acting .gt-waitstrip { display: none; }
.gt-waitstrip__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 10px rgba(182, 255, 60, 0.7);
  animation: waitDot 1.2s ease-in-out infinite;
  flex: 0 0 auto;
}
@keyframes waitDot {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50%      { opacity: 1; transform: scale(1.15); }
}
/* While watching, the table claims the freed space and grows. */
.gt--watching .gt-table-wrap { max-height: min(80vh, 720px); }

/* ░░ Controls ░░ ---------------------------------------------------------- */
.gt-controls { display: grid; gap: 0.6rem; min-height: 2rem; align-content: end; }
.gt-wait, .gt-ended {
  text-align: center;
  color: var(--ink-dim);
  font-size: 0.9rem;
  margin: 0;
}

/* Accent button (Raise) — ember pop. */
.btn--accent {
  background: linear-gradient(180deg, var(--ember), #e0742a);
  color: var(--bg-void);
  box-shadow: 0 8px 24px rgba(255, 138, 61, 0.22);
}
.btn--accent:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 0 26px var(--ember), 0 10px 28px rgba(255, 138, 61, 0.3);
}
.btn--accent:active:not(:disabled) { transform: scale(0.97); }

/* Reveal prompt */
.gt-reveal {
  display: grid;
  gap: 0.55rem;
  justify-items: center;
  text-align: center;
}
.gt-reveal__hint {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(0.85rem, 2.4vw, 1rem);
  color: var(--ink-dim);
}
.gt-reveal.is-turn .gt-reveal__hint { color: var(--ink); }
.gt-reveal__hint b { color: var(--acid); }
.gt-reveal:not(.is-turn) .gt-reveal__hint { font-family: var(--font-mono); }
.gt-reveal__next { animation: flipNudge 1.6s ease-in-out infinite; }
@keyframes flipNudge {
  0%, 100% { box-shadow: 0 0 0 rgba(182, 255, 60, 0); }
  50%      { box-shadow: 0 0 30px rgba(182, 255, 60, 0.55); }
}

/* Betting panel (slides up during phase=betting) */
.gt-bet {
  display: grid;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  background: var(--surface-2);
  border: 1px solid rgba(255, 138, 61, 0.16);
  border-radius: var(--radius);
  box-shadow: 0 0 30px rgba(255, 138, 61, 0.08);
  animation: betRise 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes betRise {
  from { transform: translateY(28px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.gt-bet__turn {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
}
.gt-bet__turn[data-kind="you"] { color: var(--acid); }
.gt-bet__stepper {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.8rem;
}
.gt-bet__step {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 138, 61, 0.4);
  background: rgba(10, 7, 16, 0.6);
  color: var(--ember);
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.16s ease;
  -webkit-tap-highlight-color: transparent;
}
.gt-bet__step:hover { box-shadow: 0 0 16px rgba(255, 138, 61, 0.3); transform: translateY(-1px); }
.gt-bet__step:active { transform: scale(0.92); }
.gt-bet__display { display: flex; align-items: baseline; justify-content: center; gap: 0.4rem; }
.gt-bet__amt {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ember);
  text-shadow: 0 0 16px rgba(255, 138, 61, 0.4);
  line-height: 1;
}
.gt-bet__unit { font-size: 0.66rem; letter-spacing: 0.18em; color: var(--ink-dim); }

/* Slider */
.gt-bet__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ember), #e0742a);
  outline: none;
}
.gt-bet__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid var(--ember);
  box-shadow: 0 0 14px rgba(255, 138, 61, 0.6);
  cursor: pointer;
}
.gt-bet__slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid var(--ember);
  box-shadow: 0 0 14px rgba(255, 138, 61, 0.6);
  cursor: pointer;
}
.gt-bet__slider:focus-visible { box-shadow: 0 0 0 3px rgba(255, 138, 61, 0.3); }
.gt-bet__actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.6rem;
}
.gt-act { padding: 0.8rem 1rem; }
.gt-act--fold { color: var(--danger); border-color: rgba(255, 92, 122, 0.35); }
.gt-act--fold:hover:not(:disabled) { color: var(--danger); border-color: rgba(255, 92, 122, 0.6); box-shadow: 0 0 18px rgba(255, 92, 122, 0.2); }
.gt-act--check { color: var(--ink-dim); }

/* Result */
.gt-result { display: grid; gap: 0.7rem; justify-items: center; text-align: center; }
.gt-result__line {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ink);
}
.gt-result__line b { color: var(--acid); }
.gt-result__line--burn b, .gt-result__line--burn { color: var(--ember); }
.gt-result__host { display: none; grid-template-columns: auto 1fr; gap: 0.7rem; width: 100%; max-width: 420px; }
.gt-result__host.is-on { display: grid; }
.gt-result__wait { display: none; color: var(--ink-dim); margin: 0; }
.gt-result__wait.is-on { display: block; }
.gt-end { color: var(--danger); border-color: rgba(255, 92, 122, 0.35); }

/* Status line */
.gt-status {
  min-height: 1.1rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--ember);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.gt-status--show { opacity: 1; }

/* ░░ Responsive — phone-first table ░░ ------------------------------------ */
/* On a phone the oval still owns the screen, but seats shrink into tidy rim
   pods and the centre gets a generous safe-zone so cards never collide with a
   seat, the pot, or the timer. Everything stays readable at 375px. */
@media (max-width: 620px) {
  #screen-game { max-width: 100vw; }
  .gt { gap: 0.4rem; }

  .gt-table-wrap {
    aspect-ratio: 1 / 1.16;
    max-height: min(62vh, 540px);
    transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* Watching: the felt dominates the portrait viewport. */
  .gt--watching .gt-table-wrap { max-height: min(74vh, 620px); }
  .gt-felt { inset: 8% 1%; }
  .gt-felt__ring { inset: 9%; }

  /* Seat pods: compact and pinned to the rim so the centre stays clear.
     Narrower pods (24%) keep their buds out of the central card corridor. */
  .gt-seat { width: 24%; }
  .gt-seat__bud { width: min(50px, 14vw); height: min(50px, 14vw); }
  .gt-seat__handle { max-width: 7ch; font-size: 0.56rem; padding: 0.08rem 0.36rem; }
  .gt-seat__bb { font-size: 0.62rem; }
  .gt-seat__bb::after { content: ""; }   /* drop the " $BB" suffix to save width */
  .gt-seat--empty .gt-seat__inner::before { width: 38px; height: 38px; font-size: 0.44rem; }

  /* Badges/tags sit tight to the pod and never reach the header or cards. */
  .gt-seat__badge { gap: 0.18rem; }
  .gt-seat__forfeit { bottom: -1.1rem; }
  .gt-seat[data-seat="0"] .gt-seat__forfeit { bottom: -1.1rem; }

  /* Cards: big + readable in a 3-wide centred grid that lives in the central
     band — vertical padding keeps it clear of the top/bottom rim pods, and the
     max-width keeps it clear of the left/right pods. */
  .gt-center { padding: 22% 14%; gap: 0.45rem; }
  .gt-cards { gap: 0.4rem; max-width: 224px; margin: 0 auto; }
  .gt-card { width: clamp(56px, 19vw, 68px); }

  /* Pot floats above everything in the centre so it always reads. */
  .gt-pot { padding: 0.28rem 0.9rem; position: relative; z-index: 6; background: rgba(10, 7, 16, 0.82); }
  .gt-pot__value { font-size: clamp(1.5rem, 8vw, 2.1rem); }

  .gt-options { grid-template-columns: 1fr; }
}

/* Tighten the rim seats a touch more on very narrow phones (≤375px). */
@media (max-width: 380px) {
  .gt-seat { width: 25%; }
  .gt-seat__bud { width: 46px; height: 46px; }
  .gt-center { padding: 21% 10%; }
  /* Force a 3-wide, 2-row grid so the centre stays short and clears the
     top/bottom rim pods. */
  .gt-cards { max-width: 210px; gap: 0.32rem; }
  .gt-card { width: 64px; }
  .gt-felt { inset: 9% 1%; }
}

/* Landscape phones: keep the table from eating the controls. */
@media (max-height: 520px) and (orientation: landscape) {
  .gt { min-height: 0; }
  .gt-table-wrap { aspect-ratio: 16 / 8; max-height: 46vh; }
}

/* ░░ Reduced motion ░░ ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .gt-card__back, .gt-seat--filled .gt-seat__bud, .gt-reveal__next,
  .gt-turn::after, .gt-seat--turn .gt-seat__inner::after,
  .gt-seat--locked .gt-seat__inner::before, .gt-phase-pill,
  .gt-seat--owing .gt-seat__bud, .gt-card.is-tappable, .gt-bet,
  .gt-seat__tag--owe, .gt-forfeit.is-holding, .gt-waitstrip__dot,
  .gt-pot.is-gilded, .gt-seat--winner .gt-seat__bud,
  .gt-seat--winner .gt-seat__inner::after, .gt-seat__outcome--won { animation: none; }
  .gt-card.is-flipped .gt-card__inner { transition: none; }
  .gt-table-wrap { transition: none; }
  /* Reward feedback stays visible without motion: the "+N $BB" pop is shown. */
  .gt-seat__award.is-on { opacity: 1; }
}