/* Big screen — the show. Landscape TV/projector, everything scales with vw/vh. */

html, body { height: 100%; overflow: hidden; }
.screen-body { background: radial-gradient(120% 120% at 50% 0%, #171b2e 0%, var(--p-color-bg) 60%); }

.screen-stage { position: fixed; inset: 0; display: flex; flex-direction: column; }

/* ---------- splash gate ---------- */
.splash {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--p-space-500);
  background: var(--p-color-bg);
}
.splash__title { font-size: var(--p-font-size-heading-3xl); }

/* ---------- pause badge (top-right, the stage stays visible) ---------- */
.pause-badge {
  position: fixed; top: calc(1.5vh + 14px); right: 2vw; z-index: 90;   /* clears the connection dot */
  display: flex; align-items: center; gap: 0.6vw;
  padding: 1vh 1.5vw;
  border-radius: var(--p-border-radius-full);
  background: rgba(12, 14, 24, 0.86);
  border: 2px solid var(--p-color-bg-fill-warning);
  color: var(--p-color-text-warning);
  font-family: var(--p-font-family-display);
  font-size: clamp(1rem, 1.9vw, 1.7rem);
  letter-spacing: 0.06em;
  box-shadow: var(--p-shadow-300), 0 0 2vw rgba(255, 202, 58, 0.35);
  animation: pause-in 0.4s var(--p-motion-ease-bounce);
  pointer-events: none;
}
.pause-badge__icon { animation: pres-pulse 0.9s infinite alternate; }
@keyframes pause-in { from { transform: translateY(-2vh) scale(0.7); opacity: 0; } }

/* ---------- pads fab + panel ---------- */
.pads-fab {
  position: fixed; bottom: 14px; right: 14px; z-index: 80;
  min-width: 48px; height: 48px; border-radius: var(--p-border-radius-full);
  background: var(--p-color-bg-surface); border: 1px solid var(--p-color-border);
  font-size: 1.3rem; opacity: 0.35; transition: opacity var(--p-motion-duration-200);
  display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0 10px;
}
.pads-fab:hover { opacity: 1; }
.pads-fab span { font-size: 0.85rem; font-weight: 700; }
.pads-panel {
  position: fixed; bottom: 72px; right: 14px; z-index: 80;
  width: min(430px, 92vw); max-height: 70vh; overflow-y: auto;
  background: var(--p-color-bg-surface); border: 1px solid var(--p-color-border);
  border-radius: var(--p-border-radius-300); box-shadow: var(--p-shadow-300);
  padding: var(--p-space-400);
  display: flex; flex-direction: column; gap: var(--p-space-300);
}

/* ---------- lobby ---------- */
.lobby { flex: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 3vw; padding: 4vh 4vw; align-items: center; }
.lobby__left { display: flex; flex-direction: column; gap: 2.5vh; }
.lobby__title { font-size: clamp(3rem, 7vw, 6.5rem); line-height: 1.05;
  background: linear-gradient(90deg, #7c5cff, #ff5d8f 55%, #ffca3a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 24px rgba(124, 92, 255, 0.35));
}
.lobby__sub { font-size: clamp(1rem, 1.8vw, 1.5rem); color: var(--p-color-text-secondary); }
.lobby__qrcard {
  display: flex; align-items: center; gap: 2vw;
  background: var(--p-color-bg-surface); border: 1px solid var(--p-color-border);
  border-radius: var(--p-border-radius-400); padding: 2.5vh 2vw; box-shadow: var(--p-shadow-200);
}
.lobby__qrcard img { width: clamp(140px, 16vw, 260px); border-radius: var(--p-border-radius-200); }
.lobby__join { font-size: clamp(1rem, 1.6vw, 1.4rem); }
.lobby__join code { display: block; font-size: clamp(1.1rem, 2vw, 1.7rem); color: #ffca3a; margin-top: 8px; }
.lobby__teams { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6vh 1vw; align-content: center; }
.lobby-team {
  border-radius: var(--p-border-radius-300); padding: 1.6vh 1.2vw; min-height: 16vh;
  color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.45);
  display: flex; flex-direction: column; gap: 0.8vh;
  box-shadow: var(--p-shadow-200);
}
.lobby-team__name { font-family: var(--p-font-family-display); font-size: clamp(1rem, 1.7vw, 1.5rem); }
.lobby-team__members { display: flex; flex-wrap: wrap; gap: 6px; }
.member-chip {
  background: rgba(0, 0, 0, 0.3); padding: 3px 10px; border-radius: var(--p-border-radius-full);
  font-size: clamp(0.8rem, 1.1vw, 1rem); animation: pop-in 0.35s var(--p-motion-ease-bounce);
}
.member-chip.off { opacity: 0.45; }
@keyframes pop-in { from { transform: scale(0); } to { transform: scale(1); } }

/* ---------- intro (black screen + fading question) ---------- */
.intro {
  position: fixed; inset: 0; background: #000;
  display: flex; align-items: center; justify-content: center;
  padding: 8vw;
}
.intro__q {
  font-size: clamp(2rem, 4.5vw, 4.5rem); text-align: center; line-height: 1.25;
  font-weight: var(--p-font-weight-bold);
  white-space: pre-line;
  animation: intro-fade var(--intro-fade, 1.6s) ease-out forwards;
}
@keyframes intro-fade { from { opacity: 0; transform: translateY(2vh); } to { opacity: 1; transform: none; } }

/* ---------- question ---------- */
.qview { flex: 1; display: flex; flex-direction: column; padding: 0 3vw 2vh; position: relative; }
.qview__timebar { height: 1.6vh; margin: 0 -3vw; background: var(--p-color-bg-surface-secondary); }
.qview__timebar-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #22c55e, #38bdf8);
  transform-origin: left; will-change: transform;
}
.qview__timebar-fill.hot { background: linear-gradient(90deg, #ef4444, #ffca3a); }
.qview__card {
  margin-top: 2.5vh;
  background: linear-gradient(180deg, #f7f8ff, #e8ebfa);
  color: #1c2030;
  border-radius: var(--p-border-radius-400);
  padding: 2.8vh 2.5vw;
  font-size: clamp(1.3rem, 2.6vw, 2.6rem);
  font-weight: var(--p-font-weight-bold);
  line-height: 1.3;
  box-shadow: var(--p-shadow-300), 0 0 0 3px rgba(124, 92, 255, 0.55);
  white-space: pre-line;
  min-height: 14vh;
  display: flex; align-items: center;
}
.qview__body { flex: 1; display: flex; gap: 2vw; margin-top: 3vh; min-height: 0; }
.qview__options { flex: 1.2; display: flex; flex-direction: column; gap: 2.2vh; justify-content: center; }
.qview__media { flex: 0.9; display: flex; align-items: center; justify-content: center; min-width: 0; }
.qview__media img {
  max-width: 100%; max-height: 52vh; border-radius: var(--p-border-radius-300);
  box-shadow: var(--p-shadow-300); background: #fff;
}
.opt {
  display: flex; align-items: center; gap: 1.2vw;
  background: #fdfdff; color: #1c2030;
  border-radius: var(--p-border-radius-300);
  min-height: 9.5vh; padding: 1vh 1.4vw;
  font-size: clamp(1.1rem, 2vw, 2rem);
  font-weight: var(--p-font-weight-semibold);
  box-shadow: var(--p-shadow-200);
  transition: transform var(--p-motion-duration-300) var(--p-motion-ease-bounce),
              background var(--p-motion-duration-300), opacity var(--p-motion-duration-300);
  animation: opt-in 0.5s var(--p-motion-ease-bounce) backwards;
}
.opt:nth-child(2) { animation-delay: 0.08s; }
.opt:nth-child(3) { animation-delay: 0.16s; }
.opt:nth-child(4) { animation-delay: 0.24s; }
@keyframes opt-in { from { opacity: 0; transform: translateX(-4vw); } }
.opt__joy { height: 7vh; width: auto; flex-shrink: 0; }
.opt__letter {
  font-family: var(--p-font-family-display);
  font-size: clamp(1.3rem, 2.4vw, 2.4rem);
  width: 3vw; text-align: center; flex-shrink: 0;
}
.opt__text { flex: 1; min-width: 0; }

/* reveal: chips of the teams that picked each option */
.opt__teams {
  display: flex; gap: 0.5vw; flex-shrink: 0;
  margin-left: auto; padding-left: 0.8vw;
}
.opt__team-chip {
  width: clamp(34px, 3.6vw, 58px);
  height: clamp(34px, 3.6vw, 58px);
  border-radius: 50%;
  border: 3px solid #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(1rem, 1.9vw, 1.8rem);
  box-shadow: var(--p-shadow-200);
  animation: pop-in 0.45s var(--p-motion-ease-bounce) backwards;
}
.opt--correct { background: var(--p-color-bg-fill-success); color: #fff; transform: scale(1.045); box-shadow: 0 0 34px rgba(34, 197, 94, 0.6); }
.opt--wrong { background: var(--p-color-bg-fill-critical); color: rgba(255,255,255,0.85); opacity: 0.55; }

/* footer: team lock-in status */
.qview__teams { display: flex; gap: 1vw; justify-content: center; padding-top: 2vh; }
.team-status {
  display: flex; align-items: center; gap: 0.6vw;
  border-radius: var(--p-border-radius-full);
  padding: 1vh 1.4vw;
  font-weight: var(--p-font-weight-bold);
  font-size: clamp(0.9rem, 1.4vw, 1.3rem);
  background: var(--p-color-bg-surface);
  border: 2px solid var(--p-color-border);
  color: var(--p-color-text-secondary);
  transition: all var(--p-motion-duration-300) var(--p-motion-ease-bounce);
}
.team-status.answered { color: #fff; border-color: transparent; transform: translateY(-0.5vh) scale(1.05); box-shadow: var(--p-shadow-200); }
.team-status .reveal-letter { font-family: var(--p-font-family-display); }

/* trap banner on reveal */
.trap-banner {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.trap-banner span {
  font-family: var(--p-font-family-display);
  font-size: clamp(3rem, 8vw, 8rem);
  color: #ffca3a; text-shadow: 0 6px 40px rgba(0,0,0,0.8);
  transform: rotate(-8deg);
  animation: trap-in 0.5s var(--p-motion-ease-bounce);
}
@keyframes trap-in { from { transform: rotate(-8deg) scale(0); } }

/* ---------- standings ---------- */
.standings { flex: 1; display: flex; flex-direction: column; padding: 4vh 4vw; gap: 3vh; }
.standings__headline {
  text-align: center; font-family: var(--p-font-family-display);
  font-size: clamp(1.4rem, 3vw, 2.6rem); color: #ffca3a;
}
.standings__cols { flex: 1; display: grid; grid-template-columns: 1fr 1.25fr; gap: 4vw; min-height: 0; }
.standings h2 { font-family: var(--p-font-family-display); font-size: clamp(1.2rem, 2.2vw, 2rem); margin-bottom: 2vh; }
.standings__col { display: flex; flex-direction: column; }
.standings__col--total { border-left: 4px solid var(--p-color-border); padding-left: 4vw; }
.stand-list { position: relative; flex: 1; }
.stand-row {
  position: absolute; left: 0; right: 0;
  display: flex; align-items: center; gap: 1vw;
  border-radius: var(--p-border-radius-300);
  padding: 0 1.4vw;
  color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  font-size: clamp(1rem, 1.8vw, 1.7rem);
  font-weight: var(--p-font-weight-bold);
  box-shadow: var(--p-shadow-200);
  transition: top 1.4s var(--p-motion-ease);
}
.stand-row__rank { font-family: var(--p-font-family-display); width: 3.4vw; }
.stand-row__rank.gold { color: var(--p-color-gold); }
.stand-row__rank.silver { color: var(--p-color-silver); }
.stand-row__rank.bronze { color: var(--p-color-bronze); }
.stand-row__pts { margin-left: auto; font-variant-numeric: tabular-nums; }
.stand-row__delta { font-size: 0.85em; }
.stand-row__delta.good { color: #b8ffd0; }
.stand-row__delta.zero { color: rgba(255,255,255,0.7); }
.stand-row__delta.bad { color: #ffb4b4; }

/* ---------- podium ---------- */
.podium { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 4vh 4vw; position: relative; }
.podium__title { font-size: clamp(2.5rem, 5vw, 4.5rem); margin-bottom: 4vh; }
.podium__steps { display: flex; align-items: flex-end; gap: 2vw; flex: 1; width: 70%; justify-content: center; }
.podium__step { display: flex; flex-direction: column; align-items: center; gap: 1.5vh; flex: 1; max-width: 22vw; }
.podium__medal { font-size: clamp(2.5rem, 6vw, 5.5rem); animation: pop-in 0.6s var(--p-motion-ease-bounce) backwards; }
.podium__name { font-family: var(--p-font-family-display); font-size: clamp(1.1rem, 2vw, 1.9rem); text-align: center; }
.podium__pts { color: var(--p-color-text-secondary); font-size: clamp(1rem, 1.6vw, 1.4rem); }
.podium__block {
  width: 100%; border-radius: var(--p-border-radius-300) var(--p-border-radius-300) 0 0;
  box-shadow: var(--p-shadow-300);
  animation: grow-up 1s var(--p-motion-ease-bounce) backwards;
  transform-origin: bottom;
}
@keyframes grow-up { from { transform: scaleY(0); } }
.podium__rest { display: flex; gap: 1.5vw; padding: 2vh 0; flex-wrap: wrap; justify-content: center; }
.podium canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---------- shared minigame chrome ---------- */
.mg { flex: 1; display: flex; flex-direction: column; padding: 3vh 3vw; gap: 2vh; min-height: 0; }
.mg__title {
  text-align: center; font-family: var(--p-font-family-display);
  font-size: clamp(1.6rem, 3.4vw, 3rem);
}
.mg__sub { text-align: center; color: var(--p-color-text-secondary); font-size: clamp(1rem, 1.6vw, 1.4rem); }
.mg__timebar { height: 1.4vh; border-radius: var(--p-border-radius-full); background: var(--p-color-bg-surface-secondary); overflow: hidden; }
.mg__timebar-fill { height: 100%; background: linear-gradient(90deg, #7c5cff, #38bdf8); transform-origin: left; }

.mg-canvas-wrap { flex: 1; position: relative; min-height: 0; display: flex; align-items: center; justify-content: center; }
.mg-canvas-wrap canvas { max-width: 100%; max-height: 100%; border-radius: var(--p-border-radius-300); }

/* betting board (mariokart + roulette) */
.bet-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2vw; align-content: center; flex: 1; }
.bet-card {
  background: var(--p-color-bg-surface); border: 2px solid var(--p-color-border-secondary);
  border-radius: var(--p-border-radius-300); padding: 1.5vh 1vw;
  display: flex; flex-direction: column; align-items: center; gap: 1vh;
  font-weight: var(--p-font-weight-bold); font-size: clamp(0.9rem, 1.5vw, 1.4rem);
}
.bet-card img { width: clamp(48px, 6vw, 96px); image-rendering: pixelated; }
.bet-card__betters { display: flex; gap: 0.4vw; flex-wrap: wrap; justify-content: center; min-height: 3.2vh; }
.bet-chip {
  border-radius: var(--p-border-radius-full); padding: 0.3vh 0.8vw;
  font-size: clamp(0.75rem, 1vw, 1rem); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  animation: pop-in 0.3s var(--p-motion-ease-bounce);
}

/* roulette betting table (casino layout) */
.rl-table {
  display: grid;
  grid-template-columns: 0.8fr repeat(12, 1fr) 1fr;
  grid-template-rows: repeat(3, 1fr) 0.9fr 0.9fr;
  gap: 4px;
  background: #0d5c33;
  border: 6px solid #d8b25a;
  border-radius: var(--p-border-radius-300);
  padding: 8px;
  width: min(92vw, 170vh);
  aspect-ratio: 14 / 5.2;
  box-shadow: var(--p-shadow-300);
}
.rl-cell {
  position: relative;
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: var(--p-font-weight-bold);
  font-size: clamp(0.7rem, 1.4vw, 1.5rem);
  background: #0f6b3c;
  overflow: hidden;
}
.rl-cell--red { background: #c0392b; }
.rl-cell--black { background: #14161f; }
.rl-cell--green { background: #0e8a4d; }
.rl-chips { position: absolute; bottom: 2px; right: 2px; display: flex; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
.rl-chip {
  width: clamp(16px, 1.8vw, 30px);
  height: clamp(16px, 1.8vw, 30px);
  border-radius: 50%;
  border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(9px, 1vw, 16px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  animation: pop-in 0.3s var(--p-motion-ease-bounce);
}
.rl-chip--amount {
  width: auto;
  min-height: clamp(16px, 1.8vw, 30px);
  height: auto;
  border-radius: var(--p-border-radius-full);
  padding: 0 clamp(3px, 0.4vw, 8px);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  white-space: nowrap;
}

/* results table */
.mg-results { display: flex; flex-direction: column; gap: 1.2vh; max-width: 60vw; margin: 0 auto; width: 100%; }
.mg-result-row {
  display: flex; align-items: center; gap: 1.2vw;
  background: var(--p-color-bg-surface); border-radius: var(--p-border-radius-300);
  padding: 1.2vh 1.5vw; font-size: clamp(1rem, 1.8vw, 1.6rem); font-weight: var(--p-font-weight-bold);
  animation: opt-in 0.4s var(--p-motion-ease-bounce) backwards;
}
.mg-result-row:nth-child(2) { animation-delay: 0.07s; }
.mg-result-row:nth-child(3) { animation-delay: 0.14s; }
.mg-result-row:nth-child(4) { animation-delay: 0.21s; }
.mg-result-row:nth-child(5) { animation-delay: 0.28s; }
.mg-result-row img { width: 3.2vw; image-rendering: pixelated; }
.mg-result-row .pts { margin-left: auto; color: var(--p-color-text-success); }

/* penalties scoreboard */
.pk-score {
  display: flex; align-items: center; justify-content: center; gap: 2vw;
  font-family: var(--p-font-family-display); font-size: clamp(1.4rem, 3vw, 2.8rem);
}
.pk-score .vs { color: var(--p-color-text-secondary); font-size: 0.6em; }
.pk-dots { display: flex; gap: 0.5vw; justify-content: center; }
.pk-dot { width: 1.6vw; height: 1.6vw; min-width: 14px; min-height: 14px; border-radius: 50%; background: var(--p-color-bg-surface-secondary); border: 2px solid var(--p-color-border); }
.pk-dot.goal { background: var(--p-color-bg-fill-success); border-color: transparent; }
.pk-dot.miss { background: var(--p-color-bg-fill-critical); border-color: transparent; }

/* dilemma matches */
.dl-grid { display: grid; gap: 2vh 2vw; flex: 1; align-content: center; grid-template-columns: repeat(auto-fit, minmax(34vw, 1fr)); }
/* on the reveal the 3D scene is the spectacle, so the cards shrink to a
   scoreline strip under it instead of competing for the stage */
.dl-grid--strip { flex: 0 0 auto; gap: 1vh 2vw; }
.dl-grid--strip .dl-match { padding: 1.2vh 1.5vw; }
.dl-grid--strip .dl-side { gap: 0.4vh; }
.dl-grid--strip .dl-choice { width: clamp(34px, 3.6vw, 56px); height: clamp(34px, 3.6vw, 56px); font-size: clamp(1rem, 1.9vw, 1.8rem); }
.dl-match {
  background: var(--p-color-bg-surface); border-radius: var(--p-border-radius-400);
  padding: 2.5vh 2vw; display: flex; align-items: center; justify-content: space-between; gap: 1vw;
  box-shadow: var(--p-shadow-200);
}
.dl-side { display: flex; flex-direction: column; align-items: center; gap: 1vh; flex: 1; }
.dl-side__name { font-weight: var(--p-font-weight-bold); font-size: clamp(0.9rem, 1.5vw, 1.4rem); text-align: center; }
.dl-choice {
  width: clamp(56px, 7vw, 110px); height: clamp(56px, 7vw, 110px);
  border-radius: var(--p-border-radius-300);
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(1.6rem, 3.4vw, 3.2rem);
  background: var(--p-color-bg-surface-secondary); border: 2px solid var(--p-color-border);
}
.dl-choice.locked { border-color: var(--p-color-border-focus); box-shadow: var(--p-shadow-glow-brand); }
.dl-choice.flip { animation: flip-reveal 0.6s var(--p-motion-ease) backwards; }
@keyframes flip-reveal { from { transform: rotateY(90deg); } }
.dl-vs { font-family: var(--p-font-family-display); font-size: clamp(1.2rem, 2vw, 2rem); color: var(--p-color-text-secondary); }
.dl-pts { font-size: clamp(0.9rem, 1.4vw, 1.3rem); font-weight: var(--p-font-weight-bold); }
.dl-payoff {
  display: grid; grid-template-columns: auto auto; gap: 1vh 3vw; justify-content: center;
  font-size: clamp(1rem, 1.7vw, 1.5rem); background: var(--p-color-bg-surface);
  border-radius: var(--p-border-radius-300); padding: 2vh 2vw; margin: 0 auto;
}

/* minigame presentation title cards */
.mg-presentation {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3vh;
  border-radius: var(--p-border-radius-400);
  text-align: center;
  padding: 4vh 4vw;
}
.mg-presentation__emoji {
  font-size: clamp(5rem, 14vw, 12rem);
  line-height: 1;
  animation: pres-bounce 0.9s var(--p-motion-ease-bounce) backwards;
}
.mg-presentation__title {
  font-size: clamp(2.6rem, 7.5vw, 7rem);
  background: linear-gradient(90deg, #fff, #ffca3a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 30px rgba(0,0,0,0.5));
  animation: pres-slide 0.7s 0.25s var(--p-motion-ease-bounce) backwards;
}
.mg-presentation__tagline {
  font-size: clamp(1.1rem, 2.2vw, 2rem);
  color: var(--p-color-text-secondary);
  max-width: 60vw;
  animation: pres-slide 0.7s 0.5s var(--p-motion-ease) backwards;
}
.mg-presentation__ready {
  font-family: var(--p-font-family-display);
  font-size: clamp(1.2rem, 2.6vw, 2.4rem);
  color: #ffca3a;
  animation: pres-pulse 1s 1s infinite alternate backwards;
}
@keyframes pres-bounce { from { transform: scale(0) rotate(-20deg); } }
@keyframes pres-slide { from { opacity: 0; transform: translateY(4vh); } }
@keyframes pres-pulse { from { opacity: 0.45; transform: scale(0.97); } to { opacity: 1; transform: scale(1.03); } }

/* roulette money bar */
.rl-moneybar {
  display: flex; justify-content: center; gap: 1.2vw; flex-wrap: wrap;
}
.rl-moneybar__team {
  display: flex; align-items: center; gap: 0.6vw;
  border-radius: var(--p-border-radius-full);
  padding: 0.8vh 1.4vw;
  font-weight: var(--p-font-weight-bold);
  font-size: clamp(0.95rem, 1.6vw, 1.5rem);
  color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.55);
  box-shadow: var(--p-shadow-200);
}
.rl-moneybar__amount { font-variant-numeric: tabular-nums; }
.rl-net--win { color: #b8ffd0; }
.rl-net--lose { color: #ffc4c4; }

/* demo hub */
.demo-hub {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3vh; text-align: center; padding: 4vh 4vw;
}
.demo-hub__badge {
  font-family: var(--p-font-family-display);
  font-size: clamp(2rem, 5vw, 4.5rem);
  color: #ffca3a;
}
.demo-hub__games { display: flex; gap: 2vw; font-size: clamp(2.4rem, 6vw, 5rem); }
.demo-hub__games span { animation: pres-pulse 1.4s infinite alternate; }
.demo-hub__games span:nth-child(2) { animation-delay: 0.2s; }
.demo-hub__games span:nth-child(3) { animation-delay: 0.4s; }
.demo-hub__games span:nth-child(4) { animation-delay: 0.6s; }
.demo-hub__games span:nth-child(5) { animation-delay: 0.8s; }

/* generic center message */
.mg-hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vh; text-align: center; }
.mg-hero__emoji { font-size: clamp(3rem, 8vw, 7rem); line-height: 1; }
.mg-hero__text { font-family: var(--p-font-family-display); font-size: clamp(1.6rem, 3.5vw, 3.2rem); }
.mg-hero__sub { color: var(--p-color-text-secondary); font-size: clamp(1rem, 1.8vw, 1.6rem); }

/* ---------- poker table ---------- */
.po { flex: 1; display: flex; flex-direction: column; padding: 1.2vh 2vw 0.5vh; gap: 0.4vh; min-height: 0; }
.po__top {
  display: flex; align-items: center; justify-content: center; gap: 1.2vw;
  font-family: var(--p-font-family-display); font-size: clamp(1.1rem, 2.2vw, 2rem);
  min-height: 5vh;
}
.po__top .badge { font-family: var(--p-font-family-body); font-size: clamp(0.75rem, 1.1vw, 1.05rem); }
.po__wrap { flex: 1; position: relative; min-height: 0; }

.po-table {
  position: absolute; left: 50%; top: 50%;
  width: 70%; height: 64%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 42%, #2f9c62 0%, #1f7046 50%, #145232 100%);
  box-shadow:
    inset 0 0 0 0.35vw #e7cc7a,
    inset 0 0 0 1.7vw #4a2a12,
    inset 0 0 0 2.05vw #b48b3c,
    inset 0 0 7vw rgba(0, 0, 0, 0.45),
    0 3vh 8vh rgba(0, 0, 0, 0.65);
}
.po-table::after {
  content: ''; position: absolute; inset: 15% 12%;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.13);
}
.po-table__logo {
  position: absolute; left: 50%; top: 74%; transform: translate(-50%, -50%);
  font-family: var(--p-font-family-display); font-size: clamp(1rem, 2.4vw, 2.4rem);
  color: rgba(255, 255, 255, 0.09); letter-spacing: 0.25em; white-space: nowrap;
}

.po-deck { position: absolute; left: 63%; top: 31%; transform: translate(-50%, -50%); width: 4vw; height: 5.6vw; }
.po-deck .pcard { --card-w: 4vw; position: absolute; left: 0; top: 0; }
.po-deck .pcard:nth-child(2) { transform: translate(0.12vw, -0.12vw); }
.po-deck .pcard:nth-child(3) { transform: translate(0.24vw, -0.24vw); }

.po-center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 1.4vh;
}
.po-community { display: flex; gap: 0.7vw; }
.po-community .pcard, .po-community .pcard-slot { --card-w: 6vw; }
.po-street {
  position: absolute; top: -4.8vh; left: 50%; transform: translateX(-50%);
  font-family: var(--p-font-family-display); font-size: clamp(1rem, 2vw, 1.9rem);
  letter-spacing: 0.15em; color: #ffe08a; opacity: 0; pointer-events: none; white-space: nowrap;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}
.po-street.show { animation: po-street 1.8s var(--p-motion-ease) forwards; }
@keyframes po-street {
  0% { opacity: 0; transform: translate(-50%, 1vh) scale(0.8); }
  15% { opacity: 1; transform: translate(-50%, 0) scale(1.05); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -1vh); }
}

.po-pot {
  display: flex; align-items: center; gap: 0.7vw; min-height: 5vh;
  font-family: var(--p-font-family-display); font-size: clamp(1rem, 2vw, 1.9rem);
  color: #ffe08a; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
  opacity: 0.45; transition: opacity 0.4s;
}
.po-pot.has-pot { opacity: 1; }
.po-pot__label { font-size: 0.6em; letter-spacing: 0.15em; color: rgba(255, 224, 138, 0.8); }
.po-pot__chips { display: flex; align-items: flex-end; min-width: 2.4vw; }
.po-pot__amount { font-variant-numeric: tabular-nums; }

.po-banner {
  display: flex; flex-direction: column; align-items: center; gap: 0.4vh;
  min-height: 4vh; text-align: center;
  font-weight: var(--p-font-weight-bold); font-size: clamp(0.9rem, 1.5vw, 1.5rem);
  color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
  opacity: 0; transform: translateY(1vh);
  transition: opacity 0.5s, transform 0.5s var(--p-motion-ease-bounce);
}
.po-banner.show { opacity: 1; transform: none; }
.po-banner__line--main { font-family: var(--p-font-family-display); font-weight: 400; font-size: clamp(1.1rem, 2.1vw, 2.1rem); color: #ffe08a; }

/* chips */
.po-chips { position: relative; display: inline-flex; align-items: flex-end; width: 2.3vw; height: 2.3vw; }
.chip {
  position: absolute; left: 0; bottom: 0;
  width: 2.3vw; height: 2.3vw; border-radius: 50%;
  border: 0.28vw dashed rgba(255, 255, 255, 0.92);
  box-sizing: border-box;
  background: radial-gradient(circle at 50% 38%, var(--chip-hi, #fff), var(--chip, #888) 70%);
  box-shadow: 0 0.15vw 0.35vw rgba(0, 0, 0, 0.55);
}
.chip::after { content: ''; position: absolute; inset: 24%; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.5); }

.po-bet { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 0.5vw; pointer-events: none; z-index: 3; }
.po-bet.pop { animation: po-pop 0.35s var(--p-motion-ease-bounce); }
@keyframes po-pop { from { transform: translate(-50%, -50%) scale(0.4); } to { transform: translate(-50%, -50%) scale(1); } }
.po-bet__amount {
  background: rgba(0, 0, 0, 0.65); color: #ffe08a; font-weight: var(--p-font-weight-bold);
  padding: 0.2vh 0.6vw; border-radius: var(--p-border-radius-full);
  font-size: clamp(0.75rem, 1.15vw, 1.1rem); font-variant-numeric: tabular-nums;
}
.po-fly { position: absolute; z-index: 30; pointer-events: none; display: flex; align-items: center; gap: 0.5vw; }

.po-dealer {
  position: absolute; transform: translate(-50%, -50%); z-index: 4;
  width: 2.3vw; height: 2.3vw; border-radius: 50%;
  background: #fff; color: #111; font-family: var(--p-font-family-display); font-size: 1.2vw;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0.2vw 0.5vw rgba(0, 0, 0, 0.6), inset 0 0 0 0.15vw #ddd;
  transition: left 0.8s var(--p-motion-ease), top 0.8s var(--p-motion-ease);
}

/* seats */
.po-seat {
  position: absolute; transform: translate(-50%, -50%);
  width: 13.5vw; display: flex; flex-direction: column; align-items: center; gap: 0.5vh;
  z-index: 5; transition: opacity 0.4s;
}
.po-seat__cards {
  display: flex; justify-content: center; height: 5.9vw;
  transition: transform 0.5s var(--p-motion-ease), opacity 0.5s, filter 0.5s;
}
.po-seat__slot .pcard { --card-w: 4.2vw; }
.po-seat__slot--l { transform: rotate(-7deg) translateX(0.35vw); }
.po-seat__slot--r { transform: rotate(7deg) translateX(-0.35vw); }
.po-seat__plate {
  position: relative; width: 100%;
  background: rgba(12, 14, 24, 0.9);
  border: 0.2vw solid var(--team-color, #888);
  border-radius: 1vw; padding: 0.7vh 0.8vw 0.9vh;
  display: flex; flex-direction: column; align-items: center; gap: 0.15vh;
  box-shadow: var(--p-shadow-300);
  overflow: hidden;
  transition: box-shadow 0.3s, transform 0.3s;
}
.po-seat__name { font-weight: var(--p-font-weight-bold); font-size: clamp(0.75rem, 1.15vw, 1.1rem); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.po-seat__stack { font-family: var(--p-font-family-display); font-size: clamp(0.85rem, 1.45vw, 1.4rem); color: #ffe08a; font-variant-numeric: tabular-nums; }
.po-seat__timer {
  position: absolute; left: 0; bottom: 0; height: 0.55vh; width: 100%;
  background: linear-gradient(90deg, #ffca3a, #ef4444);
  transform-origin: left; transform: scaleX(var(--prog, 0)); opacity: 0;
}
.po-seat.is-acting .po-seat__timer { opacity: 1; }
.po-seat.is-acting .po-seat__plate { transform: scale(1.06); animation: po-pulse 1s infinite alternate; }
.po-seat.is-hurry .po-seat__plate { animation-duration: 0.35s; }
@keyframes po-pulse {
  from { box-shadow: 0 0 0 0.25vw #fff, 0 0 1.5vw 0.2vw var(--team-color); }
  to { box-shadow: 0 0 0 0.25vw #fff, 0 0 3vw 0.9vw var(--team-color); }
}
.po-seat__tag {
  position: absolute; top: 0.3vh; right: 0.4vw;
  background: #fff; color: #111; font-weight: 800; font-size: clamp(0.55rem, 0.8vw, 0.8rem);
  padding: 0.1vh 0.4vw; border-radius: var(--p-border-radius-full);
}
.po-seat__status { min-height: 1.3em; font-size: clamp(0.65rem, 1vw, 1rem); font-weight: var(--p-font-weight-bold); letter-spacing: 0.08em; color: #ffca3a; }
.po-seat.is-allin .po-seat__status { animation: pres-pulse 0.8s infinite alternate; }
.po-seat__hand {
  font-size: clamp(0.7rem, 1.05vw, 1.05rem); font-weight: var(--p-font-weight-semibold);
  color: var(--p-color-text-secondary); text-align: center; min-height: 1.2em;
  opacity: 0; transition: opacity 0.4s;
}
.po-seat__hand.show { opacity: 1; }
.po-seat__hand.is-win { color: #ffd54a; font-weight: var(--p-font-weight-bold); }
.po-seat.is-folded .po-seat__cards { opacity: 0.22; transform: translateY(-1.2vh) scale(0.88); filter: grayscale(0.8); }
.po-seat.is-folded .po-seat__plate { opacity: 0.55; }
.po-seat.is-out { opacity: 0.4; }
.po-seat.is-winner .po-seat__plate { box-shadow: 0 0 0 0.3vw #ffd54a, 0 0 3.5vw 1vw rgba(255, 213, 74, 0.55); transform: scale(1.08); }
.po-bubble {
  position: absolute; top: 40%; left: 50%; z-index: 6;
  background: #fff; color: #111; font-weight: 800; white-space: nowrap;
  padding: 0.5vh 1vw; border-radius: var(--p-border-radius-full);
  font-size: clamp(0.8rem, 1.3vw, 1.3rem);
  box-shadow: var(--p-shadow-300);
  animation: po-bubble 2.7s var(--p-motion-ease) forwards;
}
.po-bubble--allin { background: #ef4444; color: #fff; }
@keyframes po-bubble {
  0% { transform: translate(-50%, 0) scale(0.5); opacity: 0; }
  12% { transform: translate(-50%, -50%) scale(1.06); opacity: 1; }
  80% { opacity: 1; transform: translate(-50%, -50%); }
  100% { opacity: 0; transform: translate(-50%, -90%); }
}