/* Bonkey v2 — deep-night casino theme. Glass surfaces, gold + mint accents,
   phone-first portrait (375x812 reference; the table screen never scrolls).
   All motion is transform/opacity and wrapped for prefers-reduced-motion. */

:root {
  --bg:        #0a0d12;
  --bg-raise:  #10151c;
  --glass:     rgba(255, 255, 255, 0.06);
  --glass-hi:  rgba(255, 255, 255, 0.1);
  --ink:       #e9ecf1;
  --muted:     #96a2b1;
  --line:      rgba(255, 255, 255, 0.12);
  --gold:      #f0b429;
  --gold-hi:   #ffe9a8;
  --gold-deep: #c88f13;
  --mint:      #4fc3a1;
  --mint-deep: #2f9c7c;
  --chip-red:  #d84343;
  --red-suit:  #e05252;
  --black-suit:#22303a;
  --card:      #fffdf7;
  --up:        #5fd39a;
  --down:      #ff7a6b;
  --shadow:    0 1px 2px rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.5);
  --cardback-img: none;
  /* One panel system: every overlay/sheet/drawer draws from these. */
  --panel-r:      20px;
  --panel-bg:     rgba(13, 18, 24, 0.92);
  --panel-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.4);
  --scrim:        rgba(4, 6, 10, 0.62);
}

/* Conic countdown ring animates its own custom property where supported. */
@property --p {
  syntax: "<number>";
  inherits: false;
  initial-value: 100;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
  overflow-x: hidden;
}

/* Slow-shifting ambient glow behind everything. */
body::before {
  content: "";
  position: fixed;
  inset: -30%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(42% 34% at 22% 22%, rgba(240, 180, 41, 0.07), transparent 70%),
    radial-gradient(46% 38% at 80% 76%, rgba(79, 195, 161, 0.06), transparent 70%),
    radial-gradient(60% 52% at 50% 44%, rgba(38, 62, 92, 0.20), transparent 75%);
}
@media (prefers-reduced-motion: no-preference) {
  body::before { animation: ambience 52s ease-in-out infinite alternate; }
}
@keyframes ambience {
  0%   { transform: translate(-2%, -1%) scale(1) rotate(0deg); }
  50%  { transform: translate(2%, 2%) scale(1.06) rotate(2deg); }
  100% { transform: translate(-1%, 3%) scale(1.02) rotate(-2deg); }
}

.hidden { display: none !important; }

.screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
}

/* Staggered rise-fade entrance on every screen except the live table.
   (The home scene keeps its own idle loops; the hero and join card get
   their own stagger rules with the home styles below.) */
@media (prefers-reduced-motion: no-preference) {
  .screen:not(#screen-table):not(#screen-home) > * {
    animation: rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .screen:not(#screen-table) > :nth-child(2)  { animation-delay: 0.05s; }
  .screen:not(#screen-table) > :nth-child(3)  { animation-delay: 0.10s; }
  .screen:not(#screen-table) > :nth-child(4)  { animation-delay: 0.15s; }
  .screen:not(#screen-table) > :nth-child(5)  { animation-delay: 0.20s; }
  .screen:not(#screen-table) > :nth-child(6)  { animation-delay: 0.25s; }
  .screen:not(#screen-table) > :nth-child(7)  { animation-delay: 0.30s; }
  .screen:not(#screen-table) > :nth-child(8)  { animation-delay: 0.34s; }
  .screen:not(#screen-table) > :nth-child(9)  { animation-delay: 0.38s; }
  .screen:not(#screen-table) > :nth-child(10) { animation-delay: 0.42s; }
  .screen:not(#screen-table) > :nth-child(n+11) { animation-delay: 0.46s; }
  /* The wordmark rises in AND keeps its golden shine sweep. */
  .screen:not(#screen-table):not(#screen-home) > .wordmark {
    animation: rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both,
               shine 6s ease-in-out 0.6s infinite;
  }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Phone-first: the setup column wrappers vanish from layout so every child
   flows exactly as it always did; desktop (>=900px, end of file) turns
   them into real columns. */
.setup-col { display: contents; }

/* ---------- shared ---------- */

.icon {
  width: 1.05em;
  height: 1.05em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.18em;
}

/* Keyboard focus: one gold ring, everywhere, only for keyboards. */
:where(button, input, select, textarea, [href], [tabindex]):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.wordmark {
  font-size: clamp(3.4rem, 17vw, 4.2rem);
  font-weight: 800;
  letter-spacing: 0.16em;
  margin-right: -0.16em;
  background: linear-gradient(105deg,
    #8a6a1f 0%, var(--gold) 24%, var(--gold-hi) 38%, #f6c64e 50%,
    var(--gold) 62%, #8a6a1f 100%);
  background-size: 230% 100%;
  background-position: 115% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 22px rgba(240, 180, 41, 0.24));
}
@media (prefers-reduced-motion: no-preference) {
  .wordmark { animation: shine 6s ease-in-out infinite; }
}
@keyframes shine {
  0%, 48%  { background-position: 115% 0; }
  88%, 100% { background-position: -55% 0; }
}
.wordmark.small { font-size: 1.5rem; letter-spacing: 0.14em; margin-right: -0.14em; }

.tagline { color: var(--muted); margin-top: -8px; text-align: center; }
.muted   { color: var(--muted); }
.tiny    { font-size: 0.78rem; }
.fine-print { color: var(--muted); font-size: 0.68rem; opacity: 0.8; }
.small-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--muted);
}

.btn {
  position: relative;
  font: inherit;
  font-weight: 700;
  border-radius: 14px;
  padding: 13px 26px;
  min-height: 44px;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--glass);
  color: var(--ink);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
              filter 0.15s ease, box-shadow 0.2s ease;
}
.btn:active { transform: scale(0.97); filter: brightness(1.12); }
.btn.primary {
  background: linear-gradient(180deg, #f9cb60 0%, var(--gold) 55%, #dd9c14 100%);
  border-color: rgba(200, 143, 19, 0.8);
  color: #221605;
  font-weight: 800;
  box-shadow: 0 6px 20px rgba(240, 180, 41, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.btn.primary:active {
  box-shadow: 0 2px 26px rgba(240, 180, 41, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.btn.secondary {
  background: rgba(79, 195, 161, 0.08);
  border: 1.5px solid var(--mint);
  color: var(--mint);
}
.btn.danger {
  background: rgba(216, 67, 67, 0.08);
  border: 1.5px solid var(--chip-red);
  color: var(--down);
}
.btn.small { padding: 9px 12px; border-radius: 11px; font-size: 0.85rem; min-height: 40px; }
.btn:disabled { opacity: 0.4; cursor: default; transform: none; box-shadow: none; }

.link-btn {
  position: relative;
  font: inherit;
  background: none;
  border: none;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 10px 8px;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.link-btn::after { content: ""; position: absolute; inset: -6px; }
.link-btn:active { transform: scale(0.97); }

.error { color: var(--down); font-weight: 600; min-height: 1.2em; text-align: center; }

.divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.85rem;
  width: 100%;
  max-width: 280px;
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--line);
}

.text-input, .num-input {
  font: inherit;
  font-size: 1.05rem;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 11px 14px;
  min-height: 44px;
  text-align: center;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.35);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.text-input { width: 230px; }
.text-input:focus, .num-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(240, 180, 41, 0.18), inset 0 1px 4px rgba(0, 0, 0, 0.35);
}
.text-input.code {
  font-size: 1.3rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  width: 140px;
  padding-left: calc(14px + 0.3em);
}
.num-input {
  width: 100%;
  padding: 9px 8px;
  font-weight: 700;
  -moz-appearance: textfield;
  appearance: textfield;
}
.num-input::-webkit-outer-spin-button,
.num-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.num-input.big { width: 130px; font-size: 1.4rem; font-weight: 800; }

#join-form, #pending-form { display: flex; gap: 10px; align-items: center; }
#pending-form { flex-direction: column; }

/* Glass panel with a 1px gradient border drawn by a masked overlay. */
.panel {
  position: relative;
  background: var(--glass);
  border: none;
  border-radius: 16px;
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(165deg,
    rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.06) 32%,
    rgba(240, 180, 41, 0.20) 68%, rgba(255, 255, 255, 0.05) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.tag {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 800;
  border-radius: 6px;
  padding: 2px 6px;
  white-space: nowrap;
}
.tag.you { background: var(--mint-deep); color: #08110d; }

/* ---------- home: full-bleed layered scene ---------- */

/* Edge to edge, no letterboxed card: the scene fills the viewport and the
   content column floats over it. --mx/--my (set by app.js from the pointer,
   each in [-1, 1]) drive every parallax transform; they default to 0 so the
   scene is a perfectly good still without JS or a pointer. */
#screen-home {
  max-width: none;
  width: 100%;
  min-height: 100dvh;
  padding: 0;
  display: block;
  --mx: 0;
  --my: 0;
}

.home-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(90% 60% at 50% -10%, rgba(38, 62, 92, 0.35), transparent 70%),
    linear-gradient(180deg, #070a0f 0%, var(--bg) 55%, #0b1410 100%);
}

/* Depth layers: the whole layer answers the pointer, children drift. */
.hs-layer {
  position: absolute;
  inset: -40px;
  transition: transform 0.9s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.hs-far  { transform: translate3d(calc(var(--mx) *  -7px), calc(var(--my) *  -5px), 0); }
.hs-mid  { transform: translate3d(calc(var(--mx) * -16px), calc(var(--my) * -11px), 0); }
.hs-near { transform: translate3d(calc(var(--mx) * -30px), calc(var(--my) * -20px), 0); }

.hs-suit { position: absolute; fill: var(--gold); opacity: 0.055; filter: blur(6px); will-change: transform; }
.hs-su1 { width: 250px; top: 0; left: -10%; }
.hs-su2 { width: 150px; top: 48%; right: -7%; fill: var(--chip-red); opacity: 0.05; }
.hs-su5 { width: 100px; top: 7%; right: 26%; fill: var(--chip-red); opacity: 0.045; }
.hs-su3 { width: 130px; top: 30%; left: 5%; fill: var(--mint); opacity: 0.05; filter: blur(4px); }
.hs-su4 { width: 200px; top: 12%; right: 2%; opacity: 0.065; filter: blur(3px); }

.hs-chip {
  position: absolute;
  border-radius: 50%;
  opacity: 0.09;
  filter: blur(4px);
  will-change: transform;
  background:
    radial-gradient(circle, transparent 0 34%, rgba(255, 255, 255, 0.9) 34% 40%, transparent 40%),
    repeating-conic-gradient(rgba(255, 255, 255, 0.85) 0 14deg, transparent 14deg 45deg),
    radial-gradient(circle, var(--chip-red) 0 100%);
}
.hs-ch1 { width: 130px; height: 130px; top: 20%; right: 14%; opacity: 0.06; filter: blur(7px); }
.hs-ch2 {
  width: 92px; height: 92px; top: 56%; left: 8%;
  background:
    radial-gradient(circle, transparent 0 34%, rgba(255, 255, 255, 0.9) 34% 40%, transparent 40%),
    repeating-conic-gradient(rgba(255, 255, 255, 0.85) 0 14deg, transparent 14deg 45deg),
    radial-gradient(circle, var(--gold) 0 100%);
  opacity: 0.08;
}
.hs-ch3 {
  width: 110px; height: 110px; top: 34%; right: -4%;
  background:
    radial-gradient(circle, transparent 0 34%, rgba(255, 255, 255, 0.9) 34% 40%, transparent 40%),
    repeating-conic-gradient(rgba(255, 255, 255, 0.85) 0 14deg, transparent 14deg 45deg),
    radial-gradient(circle, var(--mint-deep) 0 100%);
  opacity: 0.07;
}
@media (prefers-reduced-motion: no-preference) {
  .hs-su1 { animation: drift-a 52s ease-in-out infinite alternate; }
  .hs-su2 { animation: drift-b 38s ease-in-out infinite alternate; }
  .hs-su3 { animation: drift-a 58s ease-in-out infinite alternate-reverse; }
  .hs-su4 { animation: drift-b 62s ease-in-out infinite alternate; }
  .hs-su5 { animation: drift-a 44s ease-in-out infinite alternate; }
  .hs-ch1 { animation: drift-b 36s ease-in-out infinite alternate-reverse; }
  .hs-ch2 { animation: drift-a 30s ease-in-out infinite alternate; }
  .hs-ch3 { animation: drift-b 46s ease-in-out infinite alternate-reverse; }
}
@keyframes drift-a {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(26px, -34px) rotate(10deg); }
  100% { transform: translate(-18px, 22px) rotate(-8deg); }
}
@keyframes drift-b {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate(-30px, 26px) rotate(-12deg) scale(1.06); }
  100% { transform: translate(22px, -18px) rotate(9deg) scale(0.97); }
}

/* Volumetric spotlight cones raking down from above the frame. */
.hs-spot {
  position: absolute;
  top: -14%;
  width: 42vmax;
  height: 120vmax;
  background: linear-gradient(to bottom,
    rgba(255, 244, 214, 0.11),
    rgba(255, 244, 214, 0.04) 40%,
    transparent 70%);
  clip-path: polygon(41% 0, 59% 0, 100% 100%, 0 100%);
  filter: blur(12px);
  transform-origin: 50% 0;
  will-change: transform;
}
.hs-spot-a { left: 2%; transform: rotate(17deg); }
.hs-spot-b { right: 4%; transform: rotate(-15deg); }
@media (prefers-reduced-motion: no-preference) {
  .hs-spot-a { animation: spot-sway-a 17s ease-in-out infinite alternate; }
  .hs-spot-b { animation: spot-sway-b 21s ease-in-out infinite alternate; }
}
@keyframes spot-sway-a { from { transform: rotate(14deg); } to { transform: rotate(20deg); } }
@keyframes spot-sway-b { from { transform: rotate(-12deg); } to { transform: rotate(-18deg); } }

/* The felt horizon: a table edge rising into frame, bleeding off the
   bottom. Uses the player's felt theme variables like the real table. */
.hs-table {
  position: absolute;
  left: 50%;
  bottom: -34dvh;
  width: max(160vw, 900px);
  height: 64dvh;
  transform: translateX(-50%);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.10), transparent 44%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 4px),
    radial-gradient(ellipse at 50% 12%, var(--felt-a) 0%, var(--felt-b) 42%, var(--felt-c) 74%, var(--felt-d) 100%);
  box-shadow:
    0 -2px 0 1px rgba(240, 180, 41, 0.22),
    0 -18px 70px rgba(0, 0, 0, 0.6),
    0 -90px 160px -60px rgba(33, 116, 92, 0.4),
    inset 0 16px 48px rgba(0, 0, 0, 0.35);
}

/* Drifting strip of familiar faces riding the table's far rim. Filled from
   avatars/manifest.json by app.js; silently absent when the manifest is. */
.hs-faces {
  position: absolute;
  top: 6%;
  left: 25%;
  right: 25%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.hs-faces-row { display: flex; gap: 18px; padding: 6px 0; width: max-content; will-change: transform; }
.hs-faces-row img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  border: 2px solid rgba(240, 180, 41, 0.4);
  opacity: 0.55;
  filter: saturate(0.85);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}
@media (prefers-reduced-motion: no-preference) {
  .hs-faces-row { animation: faces-drift 64s linear infinite; }
}
@keyframes faces-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Film grain + vignette to pull the layers into one photograph. */
.hs-grain {
  position: absolute;
  inset: -60px;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference) {
  .hs-grain { animation: grain-shift 1.7s steps(5) infinite; }
}
@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-18px, 12px); }
  40%  { transform: translate(12px, -20px); }
  60%  { transform: translate(-10px, -14px); }
  80%  { transform: translate(16px, 18px); }
  100% { transform: translate(0, 0); }
}
.hs-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 40%, transparent 52%, rgba(4, 6, 10, 0.6) 100%);
}

/* Everything animated in the scene freezes while the tab is hidden. */
#screen-home.fx-paused .home-scene *,
#screen-home.fx-paused .fan3d { animation-play-state: paused !important; }

/* ---- home content: hero + glass join sheet ---- */
.home-layout {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(30px + env(safe-area-inset-top)) 16px calc(12px + env(safe-area-inset-bottom));
}
.home-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  margin-top: 4dvh;
}
.wordmark.mega {
  font-size: clamp(4.3rem, 21vw, 9.2rem);
  line-height: 0.98;
  letter-spacing: 0.1em;
  margin-right: -0.1em;
  filter: drop-shadow(0 10px 34px rgba(240, 180, 41, 0.3));
}
.home-hero .tagline {
  margin-top: 0;
  font-size: clamp(0.92rem, 2.7vw, 1.12rem);
  max-width: 36ch;
  text-wrap: balance;
}

/* Pointer-tracking 3D card fan (a plain still without a pointer). */
.fan3d {
  position: relative;
  width: 132px;
  height: 66px;
  transform-style: preserve-3d;
  transform: perspective(700px) rotateY(calc(var(--mx) * 14deg)) rotateX(calc(var(--my) * -10deg));
  transition: transform 0.5s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.fan-card {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 46px;
  height: 62px;
  border-radius: 7px;
  background: linear-gradient(170deg, #ffffff 0%, #f4efe2 100%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
  transform-origin: 50% 118%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: var(--black-suit);
}
.fan-card i { font-style: normal; font-weight: 800; font-size: 1.05rem; }
.fan-card b { font-size: 0.95rem; }
.fan-card .rd { color: var(--red-suit); }
.fan-card.fc1 { transform: translateX(-50%) rotate(-17deg) translateZ(2px); }
.fan-card.fc2 { transform: translateX(-50%) translateY(-5px) translateZ(10px); }
.fan-card.fc3 { transform: translateX(-50%) rotate(17deg) translateZ(18px); }

/* Bottom-anchored glass join sheet (floating card on desktop). */
.join-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 20px 12px;
  border-radius: 22px;
  background: rgba(13, 18, 24, 0.68);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: var(--panel-shadow);
}
.join-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(165deg,
    rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.06) 32%,
    rgba(240, 180, 41, 0.20) 68%, rgba(255, 255, 255, 0.05) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.join-kicker { letter-spacing: 0.2em; }
.join-card .text-input { width: 100%; }
.join-card #btn-host { width: 100%; }
.join-card .divider { max-width: none; width: 100%; }
.join-card #join-form { width: 100%; }
.join-card .text-input.code { flex: 1; width: auto; min-width: 0; }
.join-card #join-form .btn { flex: none; }
.join-card .error { min-height: 1em; margin: -2px 0; }
.join-card .fine-print { text-align: center; }

/* Home entrance stagger. The fan and the scene keep transform for the
   pointer, so they fade only — a `rise` fill would pin transform:none. */
@media (prefers-reduced-motion: no-preference) {
  .home-hero > .wordmark {
    animation: rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both,
               shine 6s ease-in-out 0.7s infinite;
  }
  .home-hero > .tagline { animation: rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both; }
  .home-hero > .fan3d { animation: fade-in 0.7s ease-out both; }
  .join-card { animation: rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.16s both; }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- cards ---------- */

.card {
  position: relative;
  background: linear-gradient(168deg, #ffffff 0%, var(--card) 55%, #f2ecdb 100%);
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex: none;
}
.card .c-rank { font-weight: 800; }
.card.red   { color: var(--red-suit); }
.card.black { color: var(--black-suit); }

.card.big  { width: 74px;  height: 104px; border-radius: 10px; gap: 4px; }
.card.big .c-rank { font-size: 1.9rem; }
.card.big .c-suit { font-size: 1.5rem; }

.card.comm { width: 17.5%; aspect-ratio: 5 / 7; gap: 2px; }
.card.comm .c-rank { font-size: clamp(0.9rem, 4.6vw, 1.35rem); }
.card.comm .c-suit { font-size: clamp(0.8rem, 4vw, 1.15rem); }
.card.comm.empty {
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(255, 255, 255, 0.16);
  box-shadow: none;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.card.mini { width: 24px; height: 34px; border-radius: 4px; gap: 1px; }
.card.mini .c-rank { font-size: 0.66rem; }
.card.mini .c-suit { font-size: 0.6rem; }

/* BONKEY card back: navy, gold diamond lattice, gold monogram. */
.card.back {
  background:
    var(--cardback-img),
    repeating-linear-gradient(45deg, rgba(240, 180, 41, 0.16) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(-45deg, rgba(240, 180, 41, 0.16) 0 1px, transparent 1px 6px),
    linear-gradient(160deg, #1a2438 0%, #0f1728 55%, #0a101c 100%);
  background-size: cover, auto, auto, auto;
  background-position: center;
  border: 1px solid rgba(240, 180, 41, 0.55);
  box-shadow:
    inset 0 0 0 2px rgba(10, 16, 28, 0.95),
    inset 0 0 0 3px rgba(240, 180, 41, 0.30),
    0 2px 6px rgba(0, 0, 0, 0.5);
}
.card.back::after {
  content: "B";
  font-weight: 800;
  font-size: 1rem;
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 55%, #b98a17 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.card.mini.back::after { font-size: 0.8rem; }
html.has-cardback .card.back::after { content: none; }

.card.best {
  outline: 2px solid var(--gold);
  outline-offset: -1px;
  box-shadow: 0 0 14px rgba(240, 180, 41, 0.65), 0 0 30px rgba(240, 180, 41, 0.3);
}
.card.mucked { opacity: 0.35; filter: grayscale(0.6); }

/* ---------- setup ---------- */

.setup-panel {
  width: 100%;
  max-width: 340px;
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.setup-panel .small-label { margin-top: 6px; }

.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-btn {
  position: relative;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 0.15s ease, background 0.15s ease;
}
.chip-btn::after { content: ""; position: absolute; inset: -5px; border-radius: inherit; }
.chip-btn:active { transform: scale(0.95); }
.chip-btn.on {
  border-color: var(--gold);
  background: rgba(240, 180, 41, 0.16);
  color: var(--gold);
  box-shadow: 0 0 12px rgba(240, 180, 41, 0.18);
}

.field-row { display: flex; gap: 8px; }
.field { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.field span { font-size: 0.72rem; color: var(--muted); font-weight: 600; }

/* Blind escalation: auto-ladder hint + custom schedule builder */
#setup-auto, #setup-sched { display: flex; flex-direction: column; gap: 8px; }
.sched-hint { line-height: 1.4; }
#sched-rows { display: flex; flex-direction: column; gap: 8px; }
.sched-row { display: flex; align-items: flex-end; gap: 6px; }
.sched-field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sched-field span {
  font-size: 0.68rem; /* ~11px — legible; 0.58rem read as fly print */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sched-mins { flex: 0 1 76px; }
.sched-row .num-input { padding: 9px 6px; font-size: 0.95rem; }
.sched-arrow { width: 15px; height: 15px; color: var(--muted); flex: none; margin-bottom: 14px; }
.sched-x {
  position: relative;
  font: inherit;
  width: 36px;
  height: 36px;
  margin-bottom: 4px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--down);
  cursor: pointer;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sched-x::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
.sched-x:active { transform: scale(0.92); }
.sched-x .icon { width: 1em; height: 1em; }
.sched-actions { display: flex; }
#sched-add { align-self: flex-start; }
#sched-add:disabled { opacity: 0.45; cursor: default; }
.num-input.bad {
  border-color: var(--chip-red);
  box-shadow: 0 0 0 3px rgba(216, 67, 67, 0.16), inset 0 1px 4px rgba(0, 0, 0, 0.35);
}

/* ---------- seating ---------- */

.room-code {
  position: relative;
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: 0.25em;
  margin-right: -0.25em;
  color: var(--gold);
  text-shadow: 0 0 26px rgba(240, 180, 41, 0.35);
  background: var(--glass);
  border-radius: 18px;
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  padding: 12px 26px;
}
.room-code::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.3), rgba(240, 180, 41, 0.35), rgba(255, 255, 255, 0.05));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.share-row { display: flex; gap: 10px; }

.blinds-badge {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gold);
}

.players-panel { width: 100%; max-width: 340px; padding: 12px 16px; }
.players-panel .small-label { margin-bottom: 6px; }
#seat-list { list-style: none; }
#seat-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
  font-weight: 600;
}
#seat-list li:last-child { border-bottom: none; }
#seat-list .p-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#seat-list .p-stack { font-weight: 800; color: var(--mint); }
.empty-seat { color: var(--muted); font-weight: 500; }
#spec-line { margin-top: 8px; }

/* ---------- requests: host queue + your pending pill ---------- */

.req-queue {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 340px;
}
.req-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(16, 21, 28, 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}
.req-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, rgba(240, 180, 41, 0.55), rgba(255, 255, 255, 0.08) 45%, rgba(240, 180, 41, 0.25));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
/* Entrance animation only on .req-new — the client tags a card the first
   time its request id appears; poll-driven rebuilds must not re-pop it. */
@media (prefers-reduced-motion: no-preference) {
  .req-card.req-new { animation: rise 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }
}
.req-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--gold);
  flex: none;
}
.req-text {
  flex: 1;
  min-width: 0;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}
.req-btn {
  position: relative;
  font: inherit;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.req-btn::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
.req-btn:active { transform: scale(0.92); }
.req-btn .icon { width: 1.15em; height: 1.15em; }
.req-btn.ok { border-color: var(--mint); color: var(--mint); background: rgba(79, 195, 161, 0.12); }
.req-btn.no { border-color: var(--chip-red); color: var(--down); background: rgba(216, 67, 67, 0.10); }

/* Floating queue over the table, top-right under the header. */
.req-float {
  position: absolute;
  top: 4px;
  right: 4px;
  width: min(240px, 66%);
  max-height: 46%;
  overflow-y: auto;
  z-index: 8;
}
.req-float .req-text { font-size: 0.72rem; }
.req-float .req-card { padding: 6px 8px; border-radius: 12px; }

.request-pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px 8px;
  width: 100%;
  max-width: 340px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(16, 21, 28, 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gold);
  text-align: center;
  box-shadow: var(--shadow);
}
.request-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, rgba(240, 180, 41, 0.5), rgba(255, 255, 255, 0.08) 50%, rgba(240, 180, 41, 0.22));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
/* Keep Cancel's tap target at 44px+ (10px vertical padding + the base
   .link-btn ::after halo) — the pill grows a touch, which is fine. */
.request-pill .link-btn { font-size: 0.78rem; padding: 10px 8px; }
#table-request { flex: 1; max-width: 270px; align-self: center; }

/* ---------- table layout (fits 375x812 portrait, never scrolls) ---------- */

#screen-table {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  justify-content: flex-start;
  gap: 4px;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
}

#table-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
  flex: none;
}
#hdr-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  overflow: hidden;
}
.hdr-row { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.hdr-blinds { font-weight: 800; font-size: 0.95rem; color: var(--gold); white-space: nowrap; }
.hdr-hand   { font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
.hdr-level  {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--mint);
  line-height: 1.25;
  /* Two lines, not one: "Level 1 · up in 14:59 · next $0.50/$1.00" must
     survive a 375px header — the schedule's upcoming blinds are the whole
     point. The header row is 38px+ tall anyway, so the extra line is free. */
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* One-line "Last hand: ..." ticker under the header. */
#last-hand {
  flex: none;
  width: 100%;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 6px;
}
@media (prefers-reduced-motion: no-preference) {
  #last-hand.tick-in { animation: rise 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
}

/* One cohesive control cluster: a single glass rail of identical squircle
   buttons. Squircles (not circles) so borders and focus rings render clean
   at every DPR — the old circular outline anti-aliased badly. */
#hdr-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  flex: none;
  border-radius: 15px;
  border: 1px solid var(--line);
  background: rgba(10, 14, 20, 0.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.nav-btn {
  position: relative;
  font: inherit;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.15s ease, color 0.15s ease;
}
/* >=44px hit target on a 40px button. */
.nav-btn::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; }
.nav-btn:active { transform: scale(0.92); }
.nav-btn .icon { width: 20px; height: 20px; }
.nav-btn.on { color: var(--gold); background: rgba(240, 180, 41, 0.14); }
.nav-btn:disabled { opacity: 0.38; cursor: default; transform: none; }
.nav-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
@media (hover: hover) {
  .nav-btn:hover:not(:disabled) { color: var(--ink); background: var(--glass-hi); }
  .nav-btn.on:hover:not(:disabled) { color: var(--gold); background: rgba(240, 180, 41, 0.2); }
}
/* Tight phones: the secondary pair (mute, rules) folds into the menu. */
@media (max-width: 429px) {
  .nav-fold { display: none; }
}
@media (min-width: 430px) {
  .menu-only { display: none !important; }
}
.menu-fold { display: flex; gap: 8px; width: 100%; }
.menu-fold .btn { flex: 1; }

.badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 17px;
  height: 17px;
  border-radius: 9px;
  background: var(--gold);
  color: #221605;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 17px;
  padding: 0 4px;
  text-align: center;
  box-shadow: 0 0 10px rgba(240, 180, 41, 0.5);
  z-index: 2;
}

#felt-wrap {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
  max-height: 62dvh;
}

/* Felt: layered radials + woven texture + rim light inside a wood-tone rail.
   Colors are themeable via CSS vars — see THEMES in app.js (Table style). */
:root {
  --felt-a: #21745c;
  --felt-b: #185741;
  --felt-c: #0f402e;
  --felt-d: #0a2f21;
  --rail-a: #6a4426;
  --rail-b: #3a2412;
  --rail-c: #7c5330;
  --rail-d: #4a2e18;
}
#felt {
  position: absolute;
  inset: 7% 9%;
  border-radius: 46% / 40%;
  border: 9px solid transparent;
  background-image:
    radial-gradient(ellipse at 50% -12%, rgba(255, 255, 255, 0.13), transparent 46%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.04) 0 2px, transparent 2px 4px),
    radial-gradient(ellipse at 50% 38%, var(--felt-a) 0%, var(--felt-b) 48%, var(--felt-c) 78%, var(--felt-d) 100%),
    linear-gradient(155deg, var(--rail-a) 0%, var(--rail-b) 32%, var(--rail-c) 58%, var(--rail-d) 80%, #241206 100%);
  background-origin: padding-box, padding-box, padding-box, padding-box, border-box;
  background-clip:   padding-box, padding-box, padding-box, padding-box, border-box;
  box-shadow:
    inset 0 0 64px rgba(0, 0, 0, 0.6),
    inset 0 2px 16px rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(255, 255, 255, 0.07),
    0 22px 48px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 6%;
}
#felt.custom-felt {
  background-size: cover;
  background-position: center;
  border-color: #3a2412;
}

#pot-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
#pot-total {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--gold-hi);
  background: rgba(6, 10, 14, 0.55);
  border: 1px solid rgba(240, 180, 41, 0.4);
  border-radius: 999px;
  padding: 4px 14px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.pot-side { font-size: 0.66rem; color: rgba(255, 255, 255, 0.78); font-weight: 600; }

#community {
  display: flex;
  gap: 4%;
  width: 100%;
  justify-content: center;
}

#table-note {
  position: absolute;
  bottom: 16%;
  left: 10%;
  right: 10%;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
}

/* seat pods */
#seats-layer { position: absolute; inset: 0; pointer-events: none; }

.pod {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  max-width: 92px;
}
.pod-body {
  position: relative;
  background: rgba(11, 16, 22, 0.66);
  border-radius: 12px;
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 3px 8px 4px;
  text-align: center;
  min-width: 62px;
  max-width: 92px;
}
.pod-body::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.07) 45%, rgba(240, 180, 41, 0.16));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.pod-name {
  font-size: 0.66rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pod-stack { font-size: 0.78rem; font-weight: 800; color: var(--mint); }
.pod.folded .pod-body, .pod.away .pod-body { opacity: 0.45; }
.pod.folded .pod-cards { display: none; }
.pod.turn .pod-body::before {
  background: linear-gradient(160deg, rgba(240, 180, 41, 0.9), rgba(240, 180, 41, 0.35) 50%, rgba(240, 180, 41, 0.7));
}
.pod.turn .pod-body::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 14px;
  box-shadow: 0 0 16px rgba(240, 180, 41, 0.55), 0 0 34px rgba(240, 180, 41, 0.22);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .pod.turn .pod-body::after { animation: glow-pulse 1.6s ease-in-out infinite; }
}
@keyframes glow-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
.pod-you .pod-stack { color: var(--gold); }

.pod-cards { display: flex; gap: 3px; }

.pod-tag {
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 5px;
  padding: 1px 5px;
  background: rgba(0, 0, 0, 0.6);
  color: var(--muted);
  white-space: nowrap;
}
.pod-tag.tag-hot { background: var(--chip-red); color: #fff; box-shadow: 0 0 10px rgba(216, 67, 67, 0.5); }
.pod-tag.tag-act { background: rgba(0, 0, 0, 0.6); color: #cdd6dd; }
.pod-tag.tag-add { background: var(--mint-deep); color: #08110d; }

/* Conic-gradient countdown ring. JS drives --p from 100 down to 0. */
.pod-ring {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background:
    conic-gradient(var(--gold) calc(var(--p, 100) * 1%), rgba(255, 255, 255, 0.16) 0),
    rgba(0, 0, 0, 0.72);
  -webkit-mask: radial-gradient(circle, transparent 0 8px, #000 8.5px);
  mask: radial-gradient(circle, transparent 0 8px, #000 8.5px);
  box-shadow: 0 0 10px rgba(240, 180, 41, 0.35);
  transition: --p 0.25s linear;
  z-index: 3;
}
.pod-ring.urgent {
  background:
    conic-gradient(#ff5d4d calc(var(--p, 100) * 1%), rgba(255, 255, 255, 0.16) 0),
    rgba(0, 0, 0, 0.72);
  box-shadow: 0 0 12px rgba(255, 93, 77, 0.55);
}
/* Right-side pods hug the clipped table edge — hang their ring on the
 * table-center side so it can never be cropped on narrow phones. */
.pod-right .pod-ring { right: auto; left: -10px; }

/* Chip-leader crown: perched on the avatar (or the pod's brow), tilted
   like it was won in a bar bet. Bounces only when it changes hands. */
.pod-crown {
  position: absolute;
  top: -13px;
  left: 50%;
  width: 20px;
  height: 13px;
  transform: translateX(-50%) rotate(-12deg);
  fill: var(--gold);
  filter: drop-shadow(0 0 6px rgba(240, 180, 41, 0.45)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
  z-index: 3;
  pointer-events: none;
}
.pod-body.has-avatar .pod-crown { top: -27px; }
@media (prefers-reduced-motion: no-preference) {
  .pod-crown.crown-new { animation: crown-bounce 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
}
@keyframes crown-bounce {
  0%   { transform: translateX(-50%) rotate(-12deg) translateY(-10px) scale(1.45); opacity: 0; }
  55%  { transform: translateX(-50%) rotate(-12deg) translateY(2px) scale(0.94); opacity: 1; }
  100% { transform: translateX(-50%) rotate(-12deg); }
}

/* Reaction speech bubbles over seat pods. The whole 4s life (pop-in, hold,
   fade) is one CSS animation; the client hands it a negative delay so a
   poll-driven re-render resumes mid-flight instead of re-popping. */
.react-bubble {
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  pointer-events: none;
  white-space: nowrap;
  animation: react-pop 4s both;
}
.react-bubble.below { bottom: auto; top: calc(100% + 5px); }
.react-bubble.word {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #221605;
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 100%);
  border-radius: 10px;
  padding: 5px 9px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.react-bubble.word::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--gold);
  border-bottom: none;
}
.react-bubble.below.word::after {
  top: auto;
  bottom: 100%;
  border-top: none;
  border-bottom: 5px solid var(--gold);
}
.react-bubble.meme img {
  display: block;
  width: 58px;
  height: 58px;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}
@keyframes react-pop {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.4); }
  6%   { opacity: 1; transform: translateX(-50%) scale(1.08); }
  10%  { transform: translateX(-50%) scale(1); }
  86%  { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) scale(0.94); }
}

/* bet markers: stacked chip discs with striped edges */
.bet-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}
.bet-disc {
  position: relative;
  width: 17px;
  height: 15px;
  flex: none;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.55));
}
.bet-disc::before, .bet-disc::after {
  content: "";
  position: absolute;
  left: 0;
  width: 17px;
  height: 9px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 1px dashed rgba(255, 255, 255, 0.6);
}
.bet-disc::after { bottom: 0; background: #86201f; }
.bet-disc::before {
  bottom: 5px;
  background: radial-gradient(ellipse at 50% 40%, #e35c5c 0 32%, #c23b3b 62%, #992727 100%);
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.22);
}
.bet-amt {
  font-size: 0.68rem;
  font-weight: 800;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 999px;
  padding: 1px 6px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* metallic dealer button */
.dealer-disc {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #ffffff 0%, #eceef1 32%, #b9bec6 62%, #f0f2f5 100%);
  color: #4a5058;
  font-size: 0.62rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.28);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6), inset 0 -2px 3px rgba(0, 0, 0, 0.18);
}

/* travelling chip STACKS (street sweeps + pot awards): 3-6 layered discs
   with striped edges riding WAAPI arcs — transform/opacity only. */
.chip-stack {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 28px;
  z-index: 6;
  pointer-events: none;
  will-change: transform, opacity;
}
.cs-disc {
  position: absolute;
  left: 0;
  width: 20px;
  height: 12px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 1px dashed rgba(255, 255, 255, 0.7);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.cs-disc.red  { background: radial-gradient(ellipse at 50% 40%, #e35c5c 0 32%, #c23b3b 62%, #992727 100%); }
.cs-disc.gold { background: radial-gradient(ellipse at 50% 40%, #ffd985 0 32%, var(--gold) 62%, #a87b0e 100%); }
.cs-disc.blue { background: radial-gradient(ellipse at 50% 40%, #6fa9e0 0 32%, #3c72ad 62%, #24507f 100%); }
.chip-stack.cs-fade { transition: opacity 0.45s ease-in; opacity: 0; }

/* showdown banner: glass, gold gradient edge, shine sweep */
#showdown-box {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 12%;
  overflow: hidden;
  text-align: center;
  background: rgba(8, 11, 16, 0.72);
  border-radius: 14px;
  padding: 9px 10px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  animation: fade-up 0.35s ease-out;
}
#showdown-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, rgba(240, 180, 41, 0.85), rgba(240, 180, 41, 0.25) 45%, rgba(240, 180, 41, 0.6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  #showdown-box::after {
    content: "";
    position: absolute;
    top: -30%;
    bottom: -30%;
    left: -45%;
    width: 34%;
    background: linear-gradient(100deg, transparent, rgba(255, 240, 200, 0.16), transparent);
    transform: skewX(-18deg);
    animation: sweep 2.8s ease-in-out infinite;
    pointer-events: none;
  }
}
@keyframes sweep {
  0%       { transform: translateX(0) skewX(-18deg); }
  65%, 100% { transform: translateX(460%) skewX(-18deg); }
}
.sd-line {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--gold);
  text-shadow: 0 0 18px rgba(240, 180, 41, 0.4);
}
.sd-line + .sd-line { margin-top: 2px; }
.showdown-count { font-size: 0.7rem; color: var(--muted); margin-top: 3px; min-height: 1em; }

/* banner + your strip */
#table-banner {
  flex: none;
  min-height: 1.25em;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
}
#table-banner.attention { color: var(--gold); font-weight: 800; text-shadow: 0 0 16px rgba(240, 180, 41, 0.35); }
#table-banner.warn { color: var(--down); font-weight: 700; }
#table-banner.notice { color: var(--gold); font-weight: 800; text-shadow: 0 0 16px rgba(240, 180, 41, 0.35); }

#you-strip {
  flex: none;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  min-height: 112px;
}
#you-cards { display: flex; gap: 6px; flex: none; }
#you-cards .card.big:nth-child(2) { transform: rotate(4deg) translateY(2px); }

#action-bar { flex: 1; max-width: 270px; }
#action-main { display: flex; gap: 6px; }
.btn.act {
  flex: 1;
  padding: 13px 4px;
  font-size: 0.88rem;
  font-weight: 800;
  border-radius: 13px;
  white-space: nowrap;
  min-height: 46px;
}
.btn.act.fold {
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid var(--line);
  color: var(--down);
}
.btn.act.call {
  background: linear-gradient(180deg, #47c29c 0%, var(--mint-deep) 100%);
  border-color: rgba(31, 120, 94, 0.9);
  color: #06120d;
  box-shadow: 0 4px 14px rgba(79, 195, 161, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.btn.act.raise {
  background: linear-gradient(180deg, #f9cb60 0%, var(--gold) 55%, #dd9c14 100%);
  border-color: rgba(200, 143, 19, 0.8);
  color: #221605;
  box-shadow: 0 4px 14px rgba(240, 180, 41, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.btn.act.ghost {
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid var(--line);
  color: var(--muted);
  flex: 0 0 30%;
}

#raise-panel {
  position: relative;
  background: rgba(13, 18, 24, 0.8);
  border-radius: 16px;
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#raise-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.06) 40%, rgba(240, 180, 41, 0.25));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.raise-top { display: flex; align-items: center; justify-content: center; gap: 12px; }
.raise-amount {
  font-size: 1.5rem;
  font-weight: 800;
  min-width: 96px;
  text-align: center;
  color: var(--gold);
  text-shadow: 0 0 20px rgba(240, 180, 41, 0.3);
}
.step-btn {
  position: relative;
  font: inherit;
  font-size: 1.2rem;
  font-weight: 800;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  cursor: pointer;
  flex: none;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.step-btn::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; }
.step-btn:active { transform: scale(0.92); }

#raise-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  background: transparent;
  touch-action: none;
}
#raise-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(240, 180, 41, 0.75), rgba(240, 180, 41, 0.2));
}
#raise-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  margin-top: -8px;
  background: radial-gradient(circle at 35% 30%, var(--gold-hi), var(--gold) 60%, var(--gold-deep));
  border: 1px solid #a87b0e;
  box-shadow: 0 0 12px rgba(240, 180, 41, 0.5);
}
#raise-slider::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(240, 180, 41, 0.75), rgba(240, 180, 41, 0.2));
}
#raise-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-hi), var(--gold) 60%, var(--gold-deep));
  border: 1px solid #a87b0e;
  box-shadow: 0 0 12px rgba(240, 180, 41, 0.5);
}
#raise-slider:disabled { opacity: 0.4; }

/* Bet-sizing shortcuts sit between the slider and the confirm row: real
   height (not a big invisible halo) keeps their 44px+ tap targets from
   bleeding into "Raise $X" below — a low tap on "Pot" must never bet. */
.presets .chip-btn {
  font-size: 0.72rem;
  padding: 6px 9px;
  flex: 1;
  text-align: center;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.presets .chip-btn::after { inset: -3px; }
.raise-confirm-row { display: flex; gap: 6px; }

/* ---------- overlays: ONE panel system ----------
   Every sheet, drawer and modal draws the same tokens: --panel-r radius,
   --panel-bg surface, --panel-shadow depth, the .panel gradient edge, and
   one --scrim backdrop. Escape, backdrop tap, focus trap and background
   inert are wired centrally in app.js. */

.overlay {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 20;
}
.sheet-panel, .ov-panel {
  width: 100%;
  position: relative;
  border-radius: var(--panel-r);
  background: var(--panel-bg);
  box-shadow: var(--panel-shadow);
}
.sheet-panel {
  max-width: 330px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
  align-items: center;
}
.sheet-panel h2, .drawer-panel h2, .ov-head h2 {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}
@media (prefers-reduced-motion: no-preference) {
  .sheet-panel, .ov-panel { animation: sheet-in 0.4s cubic-bezier(0.22, 1.3, 0.36, 1) both; }
}
@keyframes sheet-in {
  from { transform: translateY(46px) scale(0.96); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.blinds-fields { width: 100%; }

/* Tall scrolling panels (the rules): sticky header + close, scrolling body. */
.ov-panel {
  max-width: 400px;
  max-height: min(88dvh, 780px);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.ov-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 12px 12px 20px;
  border-bottom: 1px solid var(--line);
}
.ov-x {
  position: relative;
  font: inherit;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.15s ease, color 0.15s ease;
}
.ov-x::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; }
.ov-x .icon { width: 18px; height: 18px; }
.ov-x:active { transform: scale(0.92); }
@media (hover: hover) {
  .ov-x:hover { color: var(--ink); background: var(--glass-hi); }
}
.ov-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 20px 22px;
  text-align: left;
}

/* Media pick lists (tip a video / jukebox). */
.media-sheet { max-width: 400px; }
.media-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 46dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px;
}
.media-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  width: 100%;
  min-height: 52px;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.15s ease;
}
.media-item:active { transform: scale(0.98); border-color: var(--gold); }
@media (hover: hover) {
  .media-item:hover { border-color: var(--gold); background: rgba(255, 255, 255, 0.08); }
}
.mi-title { font-weight: 800; font-size: 0.92rem; }
.mi-sub { font-size: 0.72rem; color: var(--muted); }

.menu-panel .btn:not(.small) { width: 100%; }

/* Reaction picker: 8 word chips + up to 6 meme thumbs, all >=44px taps.
   A compact POPOVER dropping from the Table talk nav button — no dimmed
   backdrop, so the action bar and the turn countdown stay visible and
   clickable while it is open (tap outside or Esc to close). */
#sheet-react {
  position: absolute;
  top: 6px;
  right: 6px;
  left: auto;
  width: min(310px, calc(100% - 12px));
}
#sheet-react .sheet-panel {
  padding: 14px 14px 10px;
  gap: 10px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
  background: rgba(13, 18, 24, 0.95);
  transform-origin: 85% top;
}
@media (prefers-reduced-motion: no-preference) {
  #sheet-react .sheet-panel { animation: pop-down 0.26s cubic-bezier(0.22, 1.3, 0.36, 1) both; }
}
@keyframes pop-down {
  from { transform: translateY(-10px) scale(0.95); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.react-panel h2 { font-size: 1rem; }
.react-words {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  width: 100%;
}
.react-chip {
  position: relative;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  min-height: 44px;
  padding: 10px 8px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.15s ease;
}
.react-chip:active { transform: scale(0.94); border-color: var(--gold); }
.react-memes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
}
.react-meme {
  position: relative;
  padding: 0;
  min-height: 44px;
  aspect-ratio: 1;
  border: 2px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.15s ease;
}
.react-meme:active { transform: scale(0.94); border-color: var(--gold); }
.react-meme img { width: 100%; height: 100%; object-fit: cover; display: block; }

.overlay.drawer { align-items: flex-end; padding: 0; }
.drawer-panel {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: var(--panel-r) var(--panel-r) 0 0;
  padding: 10px 18px calc(16px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 78dvh;
  overflow-y: auto;
  background: var(--panel-bg);
  box-shadow: var(--panel-shadow);
}
@media (prefers-reduced-motion: no-preference) {
  .drawer-panel { animation: slide-up 0.35s cubic-bezier(0.22, 1.3, 0.36, 1) both; }
}
.drawer-grab {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.25);
  margin: 0 auto;
  flex: none;
}

.lg-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: 4px;
  padding: 7px 4px;
  border-bottom: 1px dashed var(--line);
  font-size: 0.8rem;
  font-weight: 600;
  align-items: baseline;
  text-align: right;
}
.lg-row:last-child { border-bottom: none; }
.lg-row .lg-name, .lg-row span:first-child { text-align: left; }
.lg-head { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.lg-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.lg-net { font-weight: 800; }
.lg-net.up { color: var(--up); }
.lg-net.down { color: var(--down); }

/* The fish: a small, tasteful badge of shame beside the deepest net loss. */
.fish-tag {
  width: 18px;
  height: 10px;
  margin-left: 5px;
  fill: #6fb3d8;
  vertical-align: -1px;
  flex: none;
}
.fish-tag .fish-eye { fill: var(--bg); }

#settled-rows .lg-row { grid-template-columns: 1.5fr 1fr 1.2fr 1fr; }

/* Podium: the night's biggest winner gets the gold edge. */
.lg-row.podium-top {
  border-bottom: none;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(240, 180, 41, 0.16), rgba(240, 180, 41, 0.03) 70%);
  box-shadow: inset 0 0 0 1px rgba(240, 180, 41, 0.55), 0 0 18px rgba(240, 180, 41, 0.15);
}
.lg-row.podium-top .lg-name { color: var(--gold); }

.ledger-self { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
#ledger-self-note { text-align: center; min-height: 1em; }

/* ---------- settled ---------- */

.settled-title { font-size: 1.5rem; font-weight: 800; margin-top: -6px; }
.ledger-panel, .pays-panel { width: 100%; max-width: 360px; padding: 10px 16px; }
.pays-panel { padding-bottom: 14px; }
.pays-panel .small-label { margin: 4px 0 6px; }
.pay-line { font-size: 0.9rem; font-weight: 700; padding: 4px 0; }

/* ---------- rules modal ---------- */

.rules-body { display: flex; flex-direction: column; gap: 4px; }
.rules-sec { padding: 14px 0 4px; }
.rules-sec + .rules-sec { border-top: 1px dashed var(--line); }
.rules-sec h3 {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gold);
  margin-bottom: 8px;
}
.rules-sec p {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ink);
}
.rules-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--ink);
}
.rules-list b { color: var(--gold-hi); font-weight: 800; }

/* Hand ranks: compact visual list, best first. */
.rank-list {
  list-style: none;
  counter-reset: rk;
  display: flex;
  flex-direction: column;
}
.rank-list li {
  counter-increment: rk;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
}
.rank-list li:last-child { border-bottom: none; }
.rank-list li::before {
  content: counter(rk);
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rank-list li:first-child::before {
  background: rgba(240, 180, 41, 0.18);
  color: var(--gold);
}
.rk-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rk-l b { font-size: 0.84rem; font-weight: 800; }
.rk-l span { font-size: 0.68rem; color: var(--muted); }
.rk-cards { display: flex; gap: 3px; flex: none; }
.rk-cards i {
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
  color: var(--black-suit);
  background: linear-gradient(170deg, #ffffff 0%, #f1ebda 100%);
  border-radius: 4px;
  padding: 4px 3px;
  min-width: 20px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}
.rk-cards i.rd { color: var(--red-suit); }

/* ---------- meme toast ---------- */

#meme-toast {
  position: fixed;
  top: 14%;
  left: 50%;
  transform: translateX(-50%) rotate(var(--rot, -2deg));
  z-index: 40;
  pointer-events: none;
  animation: meme-in 0.3s ease-out;
}
#meme-img {
  display: block;
  width: min(64vw, 260px);
  height: auto;
  max-height: 42vh;
  object-fit: cover;
  border-radius: 14px;
  border: 3px solid #fff;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.65);
}
/* C4: while a showdown displays, the toast docks small in the top-left
   corner instead of center screen — it must never blanket the board, the
   revealed cards, the winner banner or the C2 showcase card. */
#meme-toast.corner {
  top: max(56px, 8%);
  left: 10px;
  transform: rotate(var(--rot, -2deg));
  animation: meme-in-corner 0.3s ease-out;
}
#meme-toast.corner #meme-img {
  width: min(24vw, 96px);
  max-height: 16vh;
  border-width: 2px;
  border-radius: 10px;
}
@keyframes meme-in-corner {
  from { opacity: 0; transform: rotate(var(--rot, -2deg)) scale(0.7); }
  to   { opacity: 1; transform: rotate(var(--rot, -2deg)) scale(1); }
}

/* ---------- animations ---------- */

@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes slide-up {
  from { transform: translateY(34px); opacity: 0.5; }
  to   { transform: none; opacity: 1; }
}
@keyframes meme-in {
  from { opacity: 0; transform: translateX(-50%) rotate(var(--rot, -2deg)) scale(0.7); }
  to   { opacity: 1; transform: translateX(-50%) rotate(var(--rot, -2deg)) scale(1); }
}

/* Hole cards sail in from the table (dealer side) with a little spin.
   `to` leaves transform unset so cards settle into their natural pose
   (e.g. the fanned second hole card) instead of snapping to none. */
@keyframes deal-in {
  from { opacity: 0; transform: translate(-14px, -72px) rotate(-9deg) scale(0.72); }
  to   { opacity: 1; }
}
.card.deal-in { animation: deal-in 0.34s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--i, 0) * 0.12s); }
.pod.deal-in {
  animation: pod-deal 0.3s ease-out both;
  animation-delay: calc(var(--i, 0) * 0.05s);
}
@keyframes pod-deal {
  from { opacity: 0.2; }
  to   { opacity: 1; }
}
/* pods keep their translate(-50%,-50%) so they only fade for deal-in */

/* Community cards flip in with a slight arc. */
@keyframes flip-in {
  0%   { transform: perspective(700px) translateY(-16px) rotateY(88deg) scale(1.06); opacity: 0; }
  55%  { opacity: 1; }
  75%  { transform: perspective(700px) translateY(3px) rotateY(-10deg) scale(1.02); }
  100% { transform: perspective(700px) translateY(0) rotateY(0deg) scale(1); opacity: 1; }
}
.card.flip-in {
  animation: flip-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 0.15s);
  backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* slightly taller phones: give the felt more room */
@media (min-height: 780px) {
  #felt-wrap { max-height: 66dvh; }
  .card.big { width: 82px; height: 116px; }
}

/* ------------------------------------------------------------ avatars ---- */
.avatar-label { margin-top: 4px; }
#avatar-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  max-height: 168px;
  overflow-y: auto;
  padding: 2px;
  width: 100%;
}
.avatar-chip {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  color: var(--muted);
  font: inherit;
  font-size: 0.7rem;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.15s ease;
}
.avatar-chip:active { transform: scale(0.93); }
.avatar-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.avatar-chip.picked {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold), 0 0 14px rgba(240, 180, 41, 0.4);
}

/* seat-pod face: sits above the name, overlapping the pod edge */
.pod-avatar {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--gold);
  background: var(--bg-raise);
  z-index: 2;
}
.pod-body.has-avatar { padding-top: 14px; }

/* ------------------------------------------------------- table styles ---- */
#theme-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.theme-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  min-height: 52px;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.theme-chip.picked {
  border-color: var(--gold);
  box-shadow: 0 0 0 1.5px var(--gold);
}
.theme-swatch {
  width: 34px;
  height: 24px;
  flex: none;
  border-radius: 46% / 40%;
  border: 2.5px solid;
}
.theme-name { font-size: 0.85rem; font-weight: 600; }

/* ==================================================== desktop (>=900px) ----
   Half the group plays on real monitors. Phone layout (<900px) is untouched;
   everything below only widens, scales and re-arranges for big screens. */
@media (min-width: 900px) {
  /* ---- lander: asymmetric split — scene left, floating join card right.
     The content column caps at 1560px so 1920px+ monitors get breathing
     room instead of a stretched face. */
  .home-layout {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: clamp(40px, 6vw, 96px);
    max-width: 1560px;
    margin: 0 auto;
    padding: 48px clamp(36px, 6vw, 110px);
  }
  .home-hero {
    align-items: flex-start;
    text-align: left;
    margin-top: 0;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
  }
  .wordmark.mega { font-size: clamp(5.6rem, 10.5vw, 9.4rem); }
  .home-hero .tagline { text-align: left; font-size: 1.15rem; }
  .fan3d { width: 178px; height: 90px; }
  .fan-card { width: 62px; height: 84px; border-radius: 9px; }
  .fan-card i { font-size: 1.4rem; }
  .fan-card b { font-size: 1.25rem; }
  .join-card { width: 420px; max-width: 420px; flex: none; padding: 32px 32px 24px; }
  /* Scene tuned for the wide frame: felt biased toward the hero, faces up. */
  .hs-table { left: 44%; }
  .hs-faces { left: 20%; right: 20%; }
  .hs-faces-row img { width: 54px; height: 54px; }
  .hs-su1 { width: 360px; }
  .hs-su4 { width: 290px; }
  .hs-ch1 { width: 190px; height: 190px; }

  /* ---- setup: two-column panel ---- */
  #screen-setup { max-width: 840px; }
  .setup-panel {
    max-width: 760px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 32px;
    align-items: start;
    padding: 20px 26px 24px;
  }
  .setup-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

  /* ---- table: bigger felt, bigger everything ---- */
  #screen-table { max-width: 1240px; padding: 14px 20px calc(12px + env(safe-area-inset-bottom)); gap: 8px; }
  .hdr-blinds { font-size: 1.15rem; }
  .hdr-hand { font-size: 0.85rem; }
  .hdr-level { font-size: 0.85rem; }
  .nav-btn { width: 44px; height: 44px; border-radius: 13px; }
  #hdr-nav { border-radius: 16px; gap: 5px; }
  #last-hand { font-size: 0.85rem; }
  #felt-wrap { max-height: 72dvh; }
  #felt { inset: 3% 5%; border-width: 14px; padding: 18px 8%; gap: 14px; }
  #pot-total { font-size: 1.2rem; padding: 6px 20px; }
  .pot-side { font-size: 0.78rem; }
  #community { gap: 14px; }
  .card.comm { width: 15%; max-width: 96px; }
  #table-note { font-size: 0.92rem; }
  #showdown-box { left: 20%; right: 20%; bottom: 13%; padding: 12px 14px; }
  .sd-line { font-size: 1.02rem; }
  .showdown-count { font-size: 0.8rem; }

  /* seat pods ~1.25x */
  .pod { max-width: 122px; gap: 3px; }
  .pod-body { min-width: 84px; max-width: 122px; padding: 4px 12px 6px; border-radius: 14px; }
  .pod-name { font-size: 0.8rem; }
  .pod-stack { font-size: 0.95rem; }
  .pod-tag { font-size: 0.66rem; padding: 2px 7px; }
  .pod-cards { gap: 4px; }
  .card.mini { width: 31px; height: 44px; border-radius: 5px; }
  .card.mini .c-rank { font-size: 0.85rem; }
  .card.mini .c-suit { font-size: 0.76rem; }
  .card.mini.back::after { font-size: 1rem; }
  .pod-avatar { width: 34px; height: 34px; top: -18px; }
  .pod-body.has-avatar { padding-top: 18px; }
  .pod-body.has-avatar .pod-crown { top: -33px; }
  .pod-crown { width: 24px; height: 15px; top: -15px; }
  .pod-ring {
    width: 32px;
    height: 32px;
    top: -12px;
    right: -12px;
    -webkit-mask: radial-gradient(circle, transparent 0 10px, #000 10.5px);
    mask: radial-gradient(circle, transparent 0 10px, #000 10.5px);
  }
  .pod-right .pod-ring { right: auto; left: -12px; }
  .bet-amt { font-size: 0.8rem; }
  .dealer-disc { width: 25px; height: 25px; font-size: 0.74rem; }
  .react-bubble.word { font-size: 0.82rem; padding: 7px 12px; border-radius: 12px; }
  .react-bubble.meme img { width: 84px; height: 84px; border-radius: 14px; }
  #sheet-react { top: 8px; right: 8px; width: 340px; }

  /* your row: hole cards bottom-left, action cluster floats bottom-right */
  #table-banner { font-size: 1rem; }
  #you-strip {
    min-height: 158px;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 6px;
    gap: 24px;
  }
  .card.big { width: 102px; height: 144px; border-radius: 12px; gap: 6px; }
  .card.big .c-rank { font-size: 2.5rem; }
  .card.big .c-suit { font-size: 2rem; }
  #you-cards { gap: 8px; }
  #action-bar { flex: 0 1 440px; max-width: 440px; }
  #action-main { gap: 8px; }
  .btn.act { min-height: 56px; font-size: 1rem; border-radius: 15px; }
  #raise-panel { padding: 14px; gap: 10px; }
  .raise-amount { font-size: 1.8rem; min-width: 120px; }
  .presets .chip-btn { font-size: 0.8rem; }
  #table-request { max-width: 340px; }

  /* floating host queue gets a touch more room */
  .req-float { width: min(300px, 40%); }
  .req-float .req-text { font-size: 0.8rem; }

  /* ---- ledger: right-side panel instead of a bottom sheet ---- */
  .overlay.drawer { align-items: stretch; justify-content: flex-end; }
  .drawer-panel {
    width: 440px;
    max-width: 440px;
    height: 100%;
    max-height: none;
    margin: 0;
    border-radius: var(--panel-r) 0 0 var(--panel-r);
    padding: 26px 24px calc(22px + env(safe-area-inset-bottom));
    justify-content: flex-start;
  }
  .drawer-grab { display: none; }
  .lg-row { font-size: 0.9rem; padding: 9px 4px; }
  .lg-head { font-size: 0.68rem; }

  /* ---- settled: roomier two-panel spread ---- */
  #screen-settled {
    max-width: 1000px;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 16px 24px;
    align-content: center;
    justify-items: center;
  }
  #screen-settled > * { grid-column: 1 / -1; }
  #screen-settled .ledger-panel {
    grid-column: 1;
    justify-self: stretch;
    align-self: start;
    max-width: none;
    padding: 14px 20px;
  }
  #screen-settled .pays-panel {
    grid-column: 2;
    justify-self: stretch;
    align-self: start;
    max-width: none;
    padding: 14px 20px 18px;
  }
  .settled-title { font-size: 1.8rem; }
  .pay-line { font-size: 1rem; }
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .drawer-panel { animation: drawer-side 0.35s cubic-bezier(0.22, 1.3, 0.36, 1) both; }
}
@keyframes drawer-side {
  from { transform: translateX(64px); opacity: 0.4; }
  to   { transform: none; opacity: 1; }
}

/* ------------------------------------------------- pointer hover states ----
   Mouse feedback for the desktop crowd: every real control answers the
   cursor before it commits (hover-capable pointers only — never phones). */
@media (hover: hover) {
  .btn:hover:not(:disabled) { filter: brightness(1.1); }
  .link-btn:hover { color: var(--ink); }
  .chip-btn:hover:not(.on) { border-color: rgba(255, 255, 255, 0.32); background: var(--glass-hi); }
  .react-chip:hover { border-color: var(--gold); background: rgba(255, 255, 255, 0.09); }
  .react-meme:hover { border-color: var(--gold); }
  .sched-x:hover { border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.1); }
  .step-btn:hover { border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.1); }
  .req-btn:hover { filter: brightness(1.2); }
  .avatar-chip:hover:not(.picked) { border-color: rgba(255, 255, 255, 0.4); }
  .theme-chip:hover:not(.picked) { border-color: rgba(255, 255, 255, 0.35); }
}

/* ==================================================== v7 table client ----
   Ten seats, chat, kick, soundboard, tipped videos, jukebox, staged
   showdowns, celebrations, the media parade and the slider-first raise.
   Appended last so these rules win ties against the base sections above. */

/* ---------- ten-seat ring / pods ---------- */
#seats-layer { z-index: 2; }

/* Your own pod: noticeably bigger and bolder than everyone else's. */
.pod-you { max-width: 122px; z-index: 2; }
.pod-you .pod-body { min-width: 88px; max-width: 122px; padding: 4px 11px 5px; border-radius: 13px; }
/* the bigger own pod overrides .pod-body.has-avatar's clearance by cascade
   order — restate it so the face never sits on the name */
.pod-you .pod-body.has-avatar { padding-top: 16px; }
.pod-you .pod-name { font-size: 0.74rem; }
.pod-you .pod-stack { font-size: 1rem; text-shadow: 0 0 14px rgba(240, 180, 41, 0.35); }

.pod-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
}
.pod-wins {
  font-size: 0.54rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  padding: 0 4px;
  white-space: nowrap;
}
.pod-you .pod-wins { color: var(--gold); background: rgba(240, 180, 41, 0.14); }

/* Soundboard flash riding a pod. */
.pod-sound {
  position: absolute;
  top: -9px;
  left: -9px;
  z-index: 4;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  background: var(--mint);
  color: #08110d;
  border-radius: 6px;
  padding: 2px 5px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(79, 195, 161, 0.6);
  animation: sound-ring 3s both;
}
@keyframes sound-ring {
  0%   { transform: scale(0.4); opacity: 0; }
  8%   { transform: scale(1.12); opacity: 1; }
  14%  { transform: scale(1); }
  86%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Host-only kick: hover button on mouse machines (phones long-press). */
.pod-kick {
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 5;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--chip-red);
  background: rgba(11, 16, 22, 0.92);
  color: var(--down);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font: inherit;
}
.pod-kick .icon { width: 0.7em; height: 0.7em; }
@media (hover: hover) {
  .pod.kickable:hover .pod-kick { display: flex; }
  .pod-kick:hover { background: rgba(216, 67, 67, 0.25); }
}

/* ---------- winner banner layering + showdown overlap rule (C4) ---------- */
/* The banner lives OUTSIDE the felt, above the seats layer (z 19 > 2):
   pods, chips, bubbles and bet markers can never cover it again. It also
   stays above the fx layer (18) but BELOW every .overlay drawer/modal (20):
   an open ledger or chat drawer must never have the gold banner painting on
   top of its scrim (the table creates no stacking context of its own, so
   these values compete in the root context — keep them under 20). */
#showdown-box {
  left: 8%;
  right: 8%;
  bottom: 15%;
  z-index: 19;
  background: rgba(8, 11, 16, 0.92);
}
#showdown-box.compact { padding: 6px 9px; }
#showdown-box.compact .sd-line { font-size: 0.78rem; }
/* While the showdown displays, floating chatter is suppressed so revealed
   cards, the board and the banner stay readable (reported bug, fixed). */
.sd-live .react-bubble,
.sd-live .pod-sound,
.sd-live #chat-float { display: none !important; }

/* Showdown card flips (pods) and the slow-rolled runout board. */
@keyframes sd-flip {
  0%   { opacity: 0; transform: perspective(420px) rotateY(88deg) scale(1.18); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
.card.mini.sd-flip { animation: sd-flip 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes runout-flip {
  0%   { opacity: 0; transform: perspective(700px) translateY(-30px) rotateY(90deg) scale(1.3); }
  55%  { opacity: 1; }
  74%  { transform: perspective(700px) translateY(4px) rotateY(-8deg) scale(1.06); }
  100% { opacity: 1; transform: none; }
}
.card.comm.runout-flip { animation: runout-flip 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* ---------- live hand-strength chip ---------- */
#you-hole { position: relative; flex: none; }
#hand-chip {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  white-space: nowrap;
  color: #221605;
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 100%);
  border-radius: 999px;
  padding: 3px 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  pointer-events: none;
}
@keyframes hand-pop {
  0%   { transform: translateX(-50%) scale(0.7); }
  55%  { transform: translateX(-50%) scale(1.2); }
  100% { transform: translateX(-50%) scale(1); }
}
#hand-chip.pop { animation: hand-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* ---------- show my cards ---------- */
.btn.show-cards {
  background: linear-gradient(180deg, #f9cb60 0%, var(--gold) 55%, #dd9c14 100%);
  border-color: rgba(200, 143, 19, 0.8);
  color: #221605;
  font-weight: 800;
  align-self: center;
  box-shadow: 0 6px 20px rgba(240, 180, 41, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
@media (prefers-reduced-motion: no-preference) {
  .btn.show-cards { animation: show-pulse 1.2s ease-in-out infinite; }
}
@keyframes show-pulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(240, 180, 41, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.45); }
  50%      { box-shadow: 0 6px 30px rgba(240, 180, 41, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.45); }
}

/* ---------- chat ---------- */
#chat-float {
  position: absolute;
  left: 6px;
  top: 4px;
  right: 34%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  pointer-events: none;
}
.chat-fline {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(8, 11, 16, 0.66);
  border-radius: 10px;
  padding: 3px 9px;
  font-size: 0.68rem;
  animation: fline 4.6s both;
}
.chat-fline .chat-name { margin-right: 5px; }
@keyframes fline {
  0%   { opacity: 0; transform: translateY(-6px); }
  6%   { opacity: 1; transform: none; }
  82%  { opacity: 1; }
  100% { opacity: 0; }
}

.chat-panel { gap: 8px; }
#chat-log {
  min-height: 160px;
  max-height: 44dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  padding: 4px 2px;
  overscroll-behavior: contain;
}
.chat-empty { padding: 8px 0; }
.chat-row { display: flex; gap: 6px; align-items: baseline; }
.chat-name {
  color: var(--gold);
  font-weight: 800;
  font-size: 0.76rem;
  flex: none;
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-text {
  font-size: 0.86rem;
  font-weight: 500;
  min-width: 0;
  overflow-wrap: anywhere;
  user-select: text;
  -webkit-user-select: text;
}
#chat-form { display: flex; gap: 8px; width: 100%; }
.chat-input {
  flex: 1;
  width: auto;
  min-width: 0;
  text-align: left;
  font-size: 16px; /* not smaller — iOS zooms sub-16px inputs on focus */
}
#chat-form .btn { flex: none; }

/* ---------- table talk: soundboard + money buttons ---------- */
.react-panel { max-height: 58dvh; overflow-y: auto; overscroll-behavior: contain; }
.talk-label { width: 100%; text-align: left; }
.sound-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  width: 100%;
}
.sound-chip {
  position: relative;
  font: inherit;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  min-height: 38px;
  padding: 8px 3px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--mint);
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.15s ease;
}
.sound-chip:active { transform: scale(0.94); border-color: var(--mint); }
.talk-money { display: flex; gap: 8px; width: 100%; }
.talk-money .btn { flex: 1; white-space: nowrap; }
/* The popover must never sink under the winner banner (z 19) — it shares
   z 19 and wins on DOM order — but it stays under .overlay sheets (20): a
   bust-triggered rebuy sheet always covers a forgotten-open popover. */
#sheet-react { z-index: 19; }

/* ---------- now playing bar ---------- */
#nowplaying-bar {
  flex: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 26px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(16, 21, 28, 0.72);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
}
.np-icon { color: var(--mint); flex: none; width: 1em; height: 1em; }
#np-line { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
#np-remain { flex: none; color: var(--mint); font-variant-numeric: tabular-nums; }
.np-btn {
  position: relative;
  font: inherit;
  font-size: 0.66rem;
  font-weight: 800;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  padding: 3px 10px;
  min-height: 24px;
  cursor: pointer;
  flex: none;
  white-space: nowrap;
}
.np-btn::after { content: ""; position: absolute; inset: -8px; border-radius: inherit; }

/* ---------- fullscreen feature (tipped video) ---------- */
#feature-layer {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: #000;
}
#feature-stage { position: absolute; inset: 0; overflow: hidden; }
.feature-video { width: 100%; height: 100%; object-fit: contain; background: #000; }
#feature-hud {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 30px 16px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
}
#feature-line { font-weight: 800; font-size: 0.9rem; color: var(--gold); text-align: center; }
.feature-note { font-size: 0.7rem; color: var(--muted); }
#feature-progress {
  width: min(420px, 86%);
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}
#feature-fill { display: block; height: 100%; width: 0; background: var(--gold); transition: width 0.3s linear; }
.feature-btns { display: flex; gap: 8px; }
.feature-btns .np-btn { pointer-events: auto; }

/* Builtin spectacles (also the video-error fallback). */
.bi { position: absolute; inset: 0; overflow: hidden; }
.bi-title {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  font-size: clamp(2rem, 9vw, 4.5rem);
  font-weight: 900;
  letter-spacing: 0.14em;
  color: #fff;
  text-shadow: 0 0 40px rgba(255, 255, 255, 0.6);
  animation: bi-title-throb 1.6s ease-in-out infinite;
}
@keyframes bi-title-throb { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); } }
.bi-laser_show { background: radial-gradient(ellipse at 50% 100%, #12001f 0%, #000 70%); }
.bi-beam {
  position: absolute;
  bottom: -12%;
  width: 4px;
  height: 135%;
  transform-origin: 50% 100%;
  background: linear-gradient(to top, hsla(var(--hue, 120), 100%, 60%, 0.9), transparent 82%);
  mix-blend-mode: screen;
  animation: bi-beam-sweep 1.5s ease-in-out infinite alternate;
}
@keyframes bi-beam-sweep { from { transform: rotate(-38deg); } to { transform: rotate(38deg); } }
.bi-fog {
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: radial-gradient(ellipse at 50% 100%, rgba(180, 80, 255, 0.25), transparent 70%);
  animation: bi-title-throb 2.4s ease-in-out infinite;
}
.bi-hack_attack { background: #010a01; }
.bi-rain, .cel-rain {
  position: absolute;
  top: -110%;
  white-space: pre;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 15px;
  line-height: 1.25;
  color: #43e06c;
  text-shadow: 0 0 8px rgba(67, 224, 108, 0.8);
  animation: bi-rain-fall linear infinite;
}
@keyframes bi-rain-fall { from { transform: translateY(0); } to { transform: translateY(240%); } }
.bi-term, .cel-term {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  font-family: ui-monospace, Menlo, monospace;
  font-weight: 700;
  font-size: clamp(0.85rem, 3.6vw, 1.4rem);
  color: #6cff96;
  background: rgba(0, 12, 2, 0.82);
  border: 1px solid #2c9a4e;
  box-shadow: 0 0 30px rgba(67, 224, 108, 0.35);
  border-radius: 8px;
  padding: 14px 18px;
  text-align: left;
  animation: cel-term-in 0.5s ease-out both;
}
@keyframes cel-term-in { from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.bi-scan, .cel-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.28) 0 2px, transparent 2px 4px);
  pointer-events: none;
}
.bi-money_storm { background: radial-gradient(ellipse at 50% 0%, #05240f 0%, #000 75%); }
.bi-bill, .cel-bill {
  position: absolute;
  top: -60px;
  width: 58px;
  height: 26px;
  border-radius: 4px;
  background: linear-gradient(160deg, #2f9c5c 0%, #1d6b3c 100%);
  border: 1.5px solid #9fe3ba;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
  color: #dbffe9;
  font-size: 0.72rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: bill-fall linear infinite;
}
@keyframes bill-fall {
  0%   { transform: translate(0, -8vh) rotate(0deg); }
  100% { transform: translate(var(--drift, 0px), 112vh) rotate(340deg); }
}

/* ---------- fx layer: banners, showcases, parades, celebrations ---------- */
#fx-layer {
  position: fixed;
  inset: 0;
  z-index: 18;
  pointer-events: none;
  overflow: hidden;
}
.fx-scene { position: absolute; inset: 0; overflow: hidden; }

#felt-wrap.shake { animation: felt-shake 0.55s linear; }
@keyframes felt-shake {
  0%, 100% { transform: none; }
  12% { transform: translate(-7px, 3px) rotate(-0.5deg); }
  28% { transform: translate(6px, -4px) rotate(0.4deg); }
  46% { transform: translate(-5px, 2px); }
  64% { transform: translate(4px, -2px); }
  82% { transform: translate(-2px, 1px); }
}

.allin-banner {
  position: absolute;
  left: 50%;
  top: 36%;
  transform: translate(-50%, -50%);
  animation: allin-in 2.1s both;
  filter: drop-shadow(0 10px 40px rgba(216, 67, 67, 0.55));
}
.allin-word {
  font-size: clamp(3.2rem, 19vw, 7.5rem);
  font-weight: 900;
  letter-spacing: 0.1em;
  white-space: nowrap;
  background: linear-gradient(180deg, #ffe2b0 0%, #ff5d4d 55%, #a11212 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@keyframes allin-in {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(3.2); }
  11%  { opacity: 1; transform: translate(-50%, -50%) scale(0.98); }
  16%  { transform: translate(-50%, -50%) scale(1.06); }
  21%  { transform: translate(-50%, -50%) scale(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.94); }
}

.showcase-card {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 24px 12px;
  border-radius: 20px;
  background: rgba(8, 11, 16, 0.88);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(240, 180, 41, 0.55),
    0 0 44px rgba(240, 180, 41, 0.25);
  animation: showcase-in 2.7s both;
}
.fx-showcase.compact .showcase-card { animation-duration: 2s; padding: 10px 18px 9px; }
.showcase-face {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--gold);
  background: var(--bg-raise);
  box-shadow: 0 0 30px rgba(240, 180, 41, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fx-showcase.compact .showcase-face { width: 64px; height: 64px; }
.showcase-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.showcase-letter { font-size: 3rem; font-weight: 900; color: var(--gold); }
.fx-showcase.compact .showcase-letter { font-size: 1.8rem; }
.showcase-name { font-weight: 900; font-size: 1.2rem; }
.fx-showcase.compact .showcase-name { font-size: 1rem; }
.showcase-amt { font-weight: 800; font-size: 1rem; color: var(--gold); }
.fx-showcase.compact .showcase-amt { font-size: 0.85rem; }
.showcase-split { font-size: 0.72rem; color: var(--muted); }
@keyframes showcase-in {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.55); }
  8%   { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  13%  { transform: translate(-50%, -50%) scale(1); }
  86%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -46%) scale(0.94); }
}

.parade-img {
  position: absolute;
  left: 0;
  border-radius: 14px;
  border: 2px solid #fff;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55);
  will-change: transform;
}

/* ---------- the celebration catalog ---------- */
.cel-beam {
  position: absolute;
  bottom: -12%;
  width: 4px;
  height: 130%;
  transform-origin: 50% 100%;
  background: linear-gradient(to top, hsla(var(--hue, 200), 100%, 62%, 0.85), transparent 80%);
  mix-blend-mode: screen;
  animation: bi-beam-sweep ease-in-out infinite alternate;
}
.cel-glowfloor {
  position: absolute;
  inset: auto 0 0 0;
  height: 34%;
  background: radial-gradient(ellipse at 50% 100%, rgba(140, 80, 255, 0.28), transparent 70%);
}
.cel-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cel-confetti {
  position: absolute;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  will-change: transform, opacity;
}
.cel-jackpot {
  position: absolute;
  left: 50%;
  top: 34%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 4px;
}
.cel-jl {
  font-size: clamp(2.4rem, 12vw, 5rem);
  font-weight: 900;
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 55%, #b98a17 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(240, 180, 41, 0.55));
  animation: jl-spin 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes jl-spin {
  0%   { opacity: 0; transform: translateY(-1.2em) rotateX(220deg) scale(1.4); }
  100% { opacity: 1; transform: none; }
}
.cel-coin {
  position: absolute;
  top: -30px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-hi), var(--gold) 60%, #8a6410);
  border: 1px solid #a87b0e;
  box-shadow: 0 0 10px rgba(240, 180, 41, 0.5);
  animation: coin-fall linear both;
}
@keyframes coin-fall {
  0%   { transform: translateY(-6vh) rotate(0deg); opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(108vh) rotate(720deg); opacity: 0; }
}
.cel-ring {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 4px solid rgba(240, 180, 41, 0.9);
  box-shadow: 0 0 30px rgba(240, 180, 41, 0.6), inset 0 0 22px rgba(240, 180, 41, 0.4);
  transform: translate(-50%, -50%) scale(0.2);
  animation: ring-out 1.1s ease-out both;
}
@keyframes ring-out {
  0%   { transform: translate(-50%, -50%) scale(0.2); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(7); opacity: 0; }
}
.cel-sun {
  position: absolute;
  left: 50%;
  bottom: 24%;
  width: 210px;
  height: 105px;
  transform: translateX(-50%);
  border-radius: 105px 105px 0 0;
  background: linear-gradient(180deg, #ffd36e 0%, #ff5d8a 100%);
  box-shadow: 0 0 70px rgba(255, 93, 138, 0.7);
  animation: sun-rise 2.6s ease-out both;
}
@keyframes sun-rise { from { transform: translateX(-50%) translateY(70%); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
.cel-grid {
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background:
    repeating-linear-gradient(90deg, rgba(255, 93, 200, 0.5) 0 2px, transparent 2px 58px),
    repeating-linear-gradient(0deg, rgba(255, 93, 200, 0.5) 0 2px, transparent 2px 34px),
    linear-gradient(180deg, rgba(28, 0, 40, 0) 0%, rgba(28, 0, 40, 0.85) 55%);
  transform: perspective(300px) rotateX(58deg) scale(1.6);
  transform-origin: 50% 0;
  animation: grid-scroll 2.6s linear both;
}
@keyframes grid-scroll { from { background-position: 0 0, 0 0, 0 0; } to { background-position: 0 0, 0 120px, 0 0; } }
.cel-chip {
  position: absolute;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.8);
  box-sizing: border-box;
  will-change: transform, opacity;
}
.cel-chip.red  { background: #c23b3b; }
.cel-chip.gold { background: var(--gold); }
.cel-chip.blue { background: #3c72ad; }
.cel-flash {
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 30%, rgba(255, 255, 255, 0) 70%);
  opacity: 0;
  animation: flash-pop 0.42s ease-out both;
}
@keyframes flash-pop { 0% { opacity: 0; transform: scale(0.4); } 18% { opacity: 1; transform: scale(1.5); } 100% { opacity: 0; transform: scale(0.8); } }
.cel-spotlight {
  position: absolute;
  left: 50%;
  top: -10%;
  width: 30vw;
  height: 130%;
  transform-origin: 50% 0;
  background: linear-gradient(to bottom, rgba(255, 250, 220, 0.4), transparent 80%);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  animation: spot-swing 2.6s ease-in-out both;
  mix-blend-mode: screen;
}
@keyframes spot-swing { 0% { transform: rotate(-24deg); } 50% { transform: rotate(20deg); } 100% { transform: rotate(-10deg); } }
.cel-vhs-r, .cel-vhs-c {
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
  animation: vhs-jitter 0.18s steps(2) infinite;
}
.cel-vhs-r { background: rgba(255, 0, 60, 0.07); transform: translateX(3px); }
.cel-vhs-c { background: rgba(0, 220, 255, 0.07); transform: translateX(-3px); animation-delay: 0.09s; }
@keyframes vhs-jitter { 0% { transform: translate(2px, 0); } 100% { transform: translate(-2px, 1px); } }
.cel-vhs-bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 9px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0 6px, rgba(255, 255, 255, 0.04) 6px 12px);
  animation: vhs-bar-slide 0.8s linear infinite;
}
@keyframes vhs-bar-slide { from { transform: translateY(0); } to { transform: translateY(28px); } }
.cel-vhs-text {
  position: absolute;
  top: 8%;
  left: 6%;
  font-family: ui-monospace, Menlo, monospace;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  text-shadow: 2px 0 0 rgba(255, 0, 60, 0.8), -2px 0 0 rgba(0, 220, 255, 0.8);
  animation: bi-title-throb 0.9s steps(2) infinite;
}
.cel-flame {
  position: absolute;
  width: 16px;
  height: 30px;
  transform: translate(-50%, -50%);
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse at 50% 85%, #fff3b0 0 18%, #ffb347 42%, #ff5d1f 70%, rgba(180, 30, 0, 0) 100%);
  filter: blur(0.5px);
  animation: flame-flicker 0.5s ease-in-out infinite alternate;
}
@keyframes flame-flicker {
  from { transform: translate(-50%, -50%) scaleY(0.85) scaleX(1.06); opacity: 0.85; }
  to   { transform: translate(-50%, -58%) scaleY(1.18) scaleX(0.92); opacity: 1; }
}
.cel-ufo {
  position: absolute;
  top: -80px;
  width: 96px;
  height: 30px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(180deg, #cfd8e2 0%, #7d8894 55%, #48505a 100%);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.6), 0 0 24px rgba(140, 255, 190, 0.4);
  animation: ufo-drop 2.9s cubic-bezier(0.24, 1, 0.36, 1) both;
}
.cel-ufo-dome {
  position: absolute;
  left: 50%;
  top: -14px;
  width: 40px;
  height: 22px;
  transform: translateX(-50%);
  border-radius: 20px 20px 0 0;
  background: linear-gradient(180deg, rgba(150, 255, 200, 0.85), rgba(70, 180, 130, 0.5));
}
@keyframes ufo-drop {
  0%   { top: -90px; opacity: 0; }
  30%  { top: 16%; opacity: 1; }
  46%  { top: 14%; }
  84%  { top: 15%; opacity: 1; }
  100% { top: 12%; opacity: 0; }
}
.cel-beam-cone {
  position: absolute;
  width: 150px;
  height: 34vh;
  transform: translate(-50%, -92%);
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  background: linear-gradient(to bottom, rgba(140, 255, 190, 0.55), rgba(140, 255, 190, 0.02));
  animation: beam-throb 0.7s ease-in-out 0.8s infinite alternate, cel-fade-in 0.9s both;
  mix-blend-mode: screen;
}
@keyframes beam-throb { from { opacity: 0.5; } to { opacity: 1; } }
@keyframes cel-fade-in { from { opacity: 0; } to { opacity: 1; } }
.cel-stonks {
  position: absolute;
  left: 50%;
  top: 40%;
  width: min(78vw, 520px);
  transform: translate(-50%, -50%);
  animation: cel-fade-in 0.4s both;
}
.cel-stonks-svg { width: 100%; height: auto; }
.cel-stonks-svg path {
  fill: none;
  stroke: #35e07c;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 12px rgba(53, 224, 124, 0.7));
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: stonks-draw 1.4s ease-out both;
}
.cel-stonks-svg .cel-stonks-head { stroke-dasharray: 40; stroke-dashoffset: 40; animation-delay: 1.1s; animation-duration: 0.4s; }
@keyframes stonks-draw { to { stroke-dashoffset: 0; } }
.cel-tick {
  position: absolute;
  font-weight: 900;
  font-size: 1rem;
  color: #35e07c;
  text-shadow: 0 0 12px rgba(53, 224, 124, 0.7);
  animation: tick-rise 1.4s ease-out both;
}
@keyframes tick-rise {
  0%   { opacity: 0; transform: translateY(16px); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-46px); }
}
.cel-siren-l, .cel-siren-r {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 46%;
  animation: siren-throb 0.5s steps(1) infinite;
}
.cel-siren-l { left: 0; background: radial-gradient(ellipse at 0% 50%, rgba(255, 40, 40, 0.4), transparent 70%); }
.cel-siren-r { right: 0; background: radial-gradient(ellipse at 100% 50%, rgba(40, 90, 255, 0.4), transparent 70%); animation-delay: 0.25s; }
@keyframes siren-throb { 0% { opacity: 1; } 50% { opacity: 0.1; } 100% { opacity: 1; } }
.cel-streak {
  position: absolute;
  width: 30vw;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, transparent, #ffb347 45%, #fff3b0 65%, transparent);
  filter: blur(1px);
  mix-blend-mode: screen;
}
.cel-streak.ltr { left: -32vw; animation: streak-ltr 0.9s ease-in both; }
.cel-streak.rtl { right: -32vw; transform: scaleX(-1); animation: streak-rtl 0.9s ease-in both; }
@keyframes streak-ltr { to { transform: translateX(calc(var(--w, 100vw) + 64vw)); } }
@keyframes streak-rtl { to { transform: scaleX(-1) translateX(calc(var(--w, 100vw) + 64vw)); } }

/* ---------- slider-first raise ---------- */
#raise-slider { height: 44px; }
#raise-slider::-webkit-slider-runnable-track {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(240, 180, 41, 0.8), rgba(240, 180, 41, 0.22));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#raise-slider::-webkit-slider-thumb {
  width: 32px;
  height: 32px;
  margin-top: -10px;
  border: 2px solid #a87b0e;
  box-shadow: 0 0 16px rgba(240, 180, 41, 0.6), 0 2px 6px rgba(0, 0, 0, 0.5);
}
#raise-slider::-moz-range-track {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(240, 180, 41, 0.8), rgba(240, 180, 41, 0.22));
}
#raise-slider::-moz-range-thumb {
  width: 32px;
  height: 32px;
  border: 2px solid #a87b0e;
  box-shadow: 0 0 16px rgba(240, 180, 41, 0.6), 0 2px 6px rgba(0, 0, 0, 0.5);
}
#raise-slider:focus { outline: none; }
#raise-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(240, 180, 41, 0.35), 0 0 16px rgba(240, 180, 41, 0.6); }
.raise-ticks {
  position: relative;
  height: 15px;
  margin: -4px 16px 0; /* inset by the thumb radius so ticks line up */
}
.raise-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--muted);
  white-space: nowrap;
}
.raise-tick::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 2px;
  height: 5px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 1px;
}

/* ---------- ledger stats columns ---------- */
.lg-row.lg-wide { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr 0.55fr 0.8fr; font-size: 0.74rem; }
.lg-row.lg-wide.lg-head { font-size: 0.56rem; }
.lg-stat { color: var(--muted); font-weight: 700; }

/* ---------- desktop (>=900px) adjustments ---------- */
@media (min-width: 900px) {
  .pod-you { max-width: 156px; }
  .pod-you .pod-body { min-width: 116px; max-width: 156px; padding: 6px 14px 7px; }
  .pod-you .pod-body.has-avatar { padding-top: 22px; }
  .pod-you .pod-name { font-size: 0.9rem; }
  .pod-you .pod-stack { font-size: 1.2rem; }
  .pod-wins { font-size: 0.62rem; }
  .pod-sound { font-size: 0.58rem; }
  #showdown-box { left: 22%; right: 22%; bottom: 15%; }
  #hand-chip { font-size: 0.8rem; padding: 4px 13px; top: -13px; }
  #chat-float { right: 44%; top: 6px; }
  .chat-fline { font-size: 0.78rem; }
  #chat-log { max-height: none; flex: 1; }
  .chat-name { max-width: 140px; }
  #nowplaying-bar { font-size: 0.8rem; }
  .sound-grid { grid-template-columns: repeat(4, 1fr); }
  .sound-chip { font-size: 0.66rem; }
  .showcase-face { width: 150px; height: 150px; }
  .showcase-name { font-size: 1.5rem; }
  .showcase-amt { font-size: 1.2rem; }
  .cel-jl { font-size: 5.4rem; }
  .allin-word { font-size: 8rem; }
  .lg-row.lg-wide { font-size: 0.84rem; }
  .lg-row.lg-wide.lg-head { font-size: 0.62rem; }
  .raise-ticks { margin: -6px 16px 0; }
  .raise-tick { font-size: 0.62rem; }
}