/* ==========================================================================
   POKER2 — "WSOP QUEST: Tiffany Wong" — full visual system
   Owns ALL styling/layout/animation. ui.js only toggles classes / innerHTML
   / inline transforms. Binds strictly to the SPEC DOM CONTRACT ids.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* palette — dark, rich, gold-accented */
  --gold:        #d8b15c;
  --gold-bright: #f3d28a;
  --gold-pale:   #fbe7b4;
  --gold-deep:   #a07c2e;
  --felt:        #1c5c3c;
  --felt-dark:   #0e3a24;
  --ink:         #0b0d10;
  --ink-2:       #11151c;
  --ink-3:       #181d26;
  --paper:       #ece6d8;
  --muted:       #9aa3ad;
  --red:         #b8333f;
  --red-deep:    #7a1018;
  --blue-rim:    #86b4ff;

  /* glass */
  --glass:       rgba(13, 16, 22, 0.58);
  --glass-rim:   rgba(216, 177, 92, 0.45);

  /* animation timings (single source of truth) */
  --screen-ms:   600ms;
  --deal-ms:     380ms;
  --flip-ms:     450ms;
  --stagger-ms:  150ms;
  --action-ms:   620ms;
  --chip-ms:     620ms;
  --banner-ms:   550ms;
  --breathe-s:   4.8s;

  /* layout */
  --actionbar-h: 96px;

  /* type */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-ui:      'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --shadow-soft:  0 18px 50px rgba(0, 0, 0, 0.55);
  --shadow-card:  0 10px 18px rgba(0, 0, 0, 0.45);
}

/* --------------------------------------------------------------------------
   1. Base / reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: #03040a;                     /* black letterbox base */
  color: var(--paper);
  font-family: var(--font-ui);
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.45;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#app {
  position: fixed;
  inset: 0;
  background: var(--ink);
  overflow: hidden;
}

::selection { background: rgba(216, 177, 92, 0.35); color: #fff; }

/* slim dark scrollbars (hand log etc.) */
* { scrollbar-width: thin; scrollbar-color: rgba(216,177,92,.35) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-thumb { background: rgba(216,177,92,.35); border-radius: 3px; }
*::-webkit-scrollbar-track { background: transparent; }

.hidden { display: none !important; }

.noscript-msg {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  margin: 0;
  background: var(--ink);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
}

/* --------------------------------------------------------------------------
   2. Screens — exactly one .screen.active visible; 600ms fade/scale
   -------------------------------------------------------------------------- */
.screen {
  position: fixed;
  inset: 0;
  background: #04050a;
  opacity: 0;
  transform: scale(1.045);
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
  transition:
    opacity   var(--screen-ms) ease,
    transform var(--screen-ms) cubic-bezier(0.22, 0.8, 0.3, 1),
    visibility 0s linear var(--screen-ms);
  z-index: 1;
}
.screen.active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  visibility: visible;
  transition:
    opacity   var(--screen-ms) ease,
    transform var(--screen-ms) cubic-bezier(0.22, 0.8, 0.3, 1),
    visibility 0s linear 0s;
  z-index: 2;
}

/* full-bleed scene layers; injected SVGs fill them and crop gracefully */
#title-scene, #venue-scene, #encounter-scene, #match-scene, #epilogue-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
#title-scene svg, #venue-scene svg, #encounter-scene svg,
#match-scene svg, #epilogue-scene svg {
  width: 100%;
  height: 100%;
  display: block;
}
svg { display: block; }

/* --------------------------------------------------------------------------
   3. Buttons — big, tactile, cinematic
   -------------------------------------------------------------------------- */
button {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: clamp(0.78rem, 1vw, 0.95rem);
  color: var(--paper);
  background: linear-gradient(180deg, #262c36 0%, #161a21 100%);
  border: 1px solid rgba(216, 177, 92, 0.4);
  border-radius: 10px;
  padding: 0.85em 1.7em;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease,
              border-color 0.15s ease, filter 0.15s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
button:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5),
              0 0 16px rgba(216, 177, 92, 0.18),
              inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
button:active {
  transform: translateY(1px) scale(0.98);
  filter: brightness(0.88);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5),
              inset 0 1px 4px rgba(0, 0, 0, 0.35);
}
button:disabled {
  opacity: 0.32;
  pointer-events: none;
  filter: saturate(0.4);
}
button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* primary gold CTAs */
#btn-start, #btn-sit, #btn-confirm-raise {
  background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 48%, var(--gold-deep) 100%);
  color: #231a06;
  border-color: rgba(255, 235, 190, 0.7);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5),
              0 0 22px rgba(216, 177, 92, 0.28),
              inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
#btn-start:hover, #btn-sit:hover, #btn-confirm-raise:hover {
  filter: brightness(1.07);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55),
              0 0 30px rgba(216, 177, 92, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* --------------------------------------------------------------------------
   4. Title screen
   -------------------------------------------------------------------------- */
#title-card {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 4vh 6vw 8vh;
  background: linear-gradient(180deg, rgba(4, 5, 8, 0) 42%, rgba(4, 5, 8, 0.82) 85%);
}
#title-card h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 9vw, 7rem);
  line-height: 1.02;
  letter-spacing: 0.06em;
  text-align: center;
  background: linear-gradient(180deg, var(--gold-pale) 12%, var(--gold) 55%, #8a6824 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 24px rgba(216, 177, 92, 0.28))
          drop-shadow(0 2px 2px rgba(0, 0, 0, 0.8));
}
#title-sub {
  font-weight: 600;
  font-size: clamp(0.68rem, 1.3vw, 0.95rem);
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: var(--paper);
  opacity: 0.88;
  margin-bottom: 2vh;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}
#btn-start, #btn-continue {
  min-width: min(260px, 70vw);
  font-size: clamp(0.85rem, 1.2vw, 1.05rem);
  padding: 1em 2em;
}
#coach-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s ease;
}
#coach-toggle:hover { color: var(--gold-bright); }
#coach-toggle input {
  accent-color: var(--gold);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   5. Venue screen
   -------------------------------------------------------------------------- */
#venue-info {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  z-index: 1;
  min-width: min(540px, 88vw);
  max-width: 88vw;
  padding: clamp(20px, 3.5vh, 38px) clamp(24px, 4vw, 56px);
  text-align: center;
  background: var(--glass);
  border: 1px solid var(--glass-rim);
  border-radius: 18px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
#venue-info h1, #venue-info h2, #venue-info .day-title, #venue-info .venue-day {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 4vw, 2.9rem);
  margin: 0 0 0.35em;
  color: var(--gold-bright);
  letter-spacing: 0.04em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
}
#venue-info h3, #venue-info .boss-name, #venue-info .venue-boss-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  margin: 0.4em 0 0.15em;
  color: var(--paper);
}
#venue-info p, #venue-info div {
  margin: 0.25em 0;
  color: var(--muted);
  font-size: clamp(0.8rem, 1.2vw, 0.98rem);
  letter-spacing: 0.06em;
}
#venue-info b, #venue-info strong, #venue-info em {
  color: var(--gold);
  font-style: normal;
}
/* boss line: NAME · TITLE · LV separators */
#venue-info .venue-boss > span + span::before {
  content: '·';
  margin: 0 0.6em;
  color: var(--muted);
}
#btn-sit {
  position: absolute;
  left: 50%;
  bottom: 9vh;
  transform: translateX(-50%);
  z-index: 1;
  font-size: clamp(0.9rem, 1.4vw, 1.15rem);
  padding: 1.05em 2.6em;
}
#btn-sit:hover { transform: translateX(-50%) translateY(-2px); }
#btn-sit:active { transform: translateX(-50%) translateY(1px) scale(0.98); }

/* --------------------------------------------------------------------------
   6. Encounter screen + typewriter dialog (shared w/ epilogue)
   -------------------------------------------------------------------------- */
#encounter-portrait {
  position: absolute;
  left: 50%;
  bottom: 21vh;
  transform: translateX(-50%);
  z-index: 1;
  height: min(58vh, 70vw);
  aspect-ratio: 600 / 760;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.65));
  -webkit-mask-image: radial-gradient(74% 102% at 50% 62%, #000 36%, transparent 64%);
  mask-image: radial-gradient(74% 102% at 50% 62%, #000 36%, transparent 64%);
}
#encounter-portrait svg { width: 100%; height: 100%; }

#dialog-box, #epilogue-dialog {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  min-height: 19vh;
  padding: clamp(20px, 4vh, 40px) clamp(20px, 9vw, 140px) clamp(26px, 5vh, 48px);
  background: linear-gradient(180deg, rgba(2, 3, 6, 0) 0%, rgba(2, 3, 6, 0.88) 34%, rgba(2, 3, 6, 0.97) 100%);
  border-top: 1px solid rgba(216, 177, 92, 0.22);
}
#dialog-text, #epilogue-dialog {
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.7vw, 1.45rem);
  font-weight: 500;
  line-height: 1.65;
  color: var(--paper);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
  max-width: 72ch;
  margin: 0 auto;
}
#dialog-text em, #epilogue-dialog em { color: var(--gold-bright); font-style: italic; }
#dialog-text b, #epilogue-dialog b   { color: var(--gold); }
#dialog-next {
  position: absolute;
  right: clamp(20px, 6vw, 80px);
  bottom: clamp(16px, 3vh, 30px);
  font-size: 1.3rem;
  color: var(--gold);
  animation: blink 1.1s steps(2, start) infinite;
  pointer-events: none;
}
@keyframes blink { 50% { opacity: 0; } }

/* --------------------------------------------------------------------------
   7. Match screen — layout
   -------------------------------------------------------------------------- */

/* 7a. boss area, top-center */
#boss-area {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 1vh;
  pointer-events: none;
}
#boss-portrait {
  height: 30vh;
  aspect-ratio: 600 / 760;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.6));
  -webkit-mask-image: radial-gradient(78% 104% at 50% 60%, #000 40%, transparent 70%);
  mask-image: radial-gradient(78% 104% at 50% 60%, #000 40%, transparent 70%);
}
#boss-portrait svg {
  width: 100%;
  height: 100%;
  transform-origin: 50% 88%;
  animation: breathe var(--breathe-s) ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(0.45vh) scale(1.013); }
}

/* 7b. name/stack plates — glassmorphism chips */
#boss-plate, #hero-plate {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 7px 18px;
  background: var(--glass);
  border: 1px solid var(--glass-rim);
  border-radius: 999px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  font-size: clamp(0.72rem, 1vw, 0.92rem);
  letter-spacing: 0.1em;
  white-space: nowrap;
  pointer-events: auto;
}
#boss-plate { margin-top: -2.2vh; }
#boss-plate > span, #hero-plate > span { padding: 0 12px; }
#boss-plate > span + span, #hero-plate > span + span {
  border-left: 1px solid rgba(216, 177, 92, 0.3);
}
#boss-name, #hero-name { font-weight: 800; color: var(--gold-bright); }
#boss-level, #hero-level { font-weight: 600; color: var(--muted); font-size: 0.85em; }
#boss-stack, #hero-stack {
  font-weight: 700;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}

/* 7c. boss hole cards */
#boss-cards {
  display: flex;
  justify-content: center;
  margin-top: 0.8vh;
  --card-w: clamp(42px, 4.6vw, 68px);
}
#boss-cards .card { margin: 0 -5px; }
#boss-cards .card:nth-child(1) { transform: rotate(-4deg); }
#boss-cards .card:nth-child(2) { transform: rotate(4deg); }

/* 7d. banter bubble — tail + fade-in (re-animates each un-hide) */
#boss-banter {
  position: absolute;
  left: calc(50% + 12vh);
  top: 7vh;
  z-index: 6;
  max-width: min(320px, 30vw);
  padding: 13px 17px;
  background: rgba(246, 241, 229, 0.96);
  color: #1c1710;
  font-size: clamp(0.82rem, 1.05vw, 0.98rem);
  font-weight: 500;
  line-height: 1.45;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
  animation: bubbleIn 0.32s cubic-bezier(0.2, 1.2, 0.4, 1) backwards;
  pointer-events: none;
}
#boss-banter::after {                                   /* tail toward portrait */
  content: '';
  position: absolute;
  left: -10px;
  top: 22px;
  border: 8px solid transparent;
  border-right: 12px solid rgba(246, 241, 229, 0.96);
  border-left: 0;
}
#boss-banter.angry { background: #f6ddd6; box-shadow: 0 12px 30px rgba(122,16,24,.45); }
#boss-banter.angry::after { border-right-color: #f6ddd6; }
#boss-banter.happy { background: #f3ecd2; }
#boss-banter.happy::after { border-right-color: #f3ecd2; }
@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(8px) scale(0.85); }
}

/* 7e. table felt — wide perspective-hinted band across the middle */
#table-felt {
  position: absolute;
  left: 50%;
  top: 31.5vh;
  transform: translateX(-50%);
  z-index: 1;
  width: min(1280px, 92vw);
  height: 33vh;
  border-radius: clamp(60px, 12vw, 170px) / clamp(40px, 8vh, 90px);
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 50% 30%, var(--felt) 0%, var(--felt-dark) 70%, #07271a 100%);
  border: 2px solid rgba(216, 177, 92, 0.5);
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.65),
    inset 0 0 60px rgba(0, 0, 0, 0.45),
    inset 0 2px 0 rgba(255, 255, 255, 0.06);
}
#table-felt > svg {                                    /* injected feltSurface() */
  position: absolute;
  inset: -5%;
  width: 110%;
  height: 110%;
  transform: perspective(1100px) rotateX(7deg) scale(1.05);
  transform-origin: 50% 60%;
}
/* overhead spotlight sheen + edge falloff on top of the felt art */
#table-felt::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(85% 105% at 50% 16%,
      rgba(255, 240, 200, 0.14) 0%, rgba(255, 240, 200, 0.05) 36%,
      rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.38) 100%);
}

/* 7f. board cards centered on the felt */
#board-cards {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: clamp(6px, 0.9vw, 14px);
  --card-w: clamp(56px, 6.4vw, 98px);
  z-index: 2;
}

/* 7g. pot / chips / blinds / dealer button */
/* pot sits right-of-center — the center column is fully occupied by
   boss cards (top) and the board (middle) */
#pot-display {
  position: absolute;
  right: 6%;
  top: 40%;
  z-index: 2;
  padding: 5px 20px;
  background: rgba(5, 8, 12, 0.55);
  border: 1px solid rgba(216, 177, 92, 0.4);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-weight: 800;
  font-size: clamp(0.82rem, 1.25vw, 1.1rem);
  letter-spacing: 0.12em;
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
}
#pot-display:empty { display: none; }
#pot-display.pulse {
  animation: potPulse 0.55s cubic-bezier(0.3, 1.5, 0.4, 1);
}
@keyframes potPulse {
  35% {
    transform: scale(1.18);
    box-shadow: 0 0 28px rgba(216, 177, 92, 0.6);
    border-color: var(--gold-bright);
  }
}
#pot-chips {
  position: absolute;
  right: 6%;
  top: 58%;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  gap: 3px;
  pointer-events: none;
}
#pot-chips svg, #pot-chips img, #pot-chips > div {
  width: clamp(22px, 2.4vw, 34px);
  height: clamp(22px, 2.4vw, 34px);
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.55));
}
#blinds-display {
  position: absolute;
  left: clamp(26px, 5%, 70px);
  top: 12%;
  z-index: 2;
  font-size: clamp(0.62rem, 0.85vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: rgba(236, 230, 216, 0.75);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
}
#dealer-btn {
  position: absolute;
  left: 13%;
  bottom: 14%;
  z-index: 2;
  width: clamp(26px, 2.6vw, 36px);
  height: clamp(26px, 2.6vw, 36px);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fffdf4, #e8dfc6 55%, #b8ab87);
  border: 2px solid rgba(120, 100, 50, 0.6);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.55), inset 0 -2px 4px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.7em;
  color: #4a3c18;
  transition: transform var(--chip-ms) cubic-bezier(0.3, 1, 0.4, 1),
              left var(--chip-ms) ease, top var(--chip-ms) ease, bottom var(--chip-ms) ease;
}
#dealer-btn:empty::after { content: 'D'; }
#dealer-btn.on-boss { bottom: auto; top: 14%; left: auto; right: 13%; }

/* 7h. hero area — large fanned cards bottom-center */
#hero-area {
  position: absolute;
  left: 50%;
  bottom: calc(var(--actionbar-h) + 1.2vh);
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1vh;
  pointer-events: none;
}
#hero-area > * { pointer-events: auto; }
#hero-cards {
  display: flex;
  justify-content: center;
  --card-w: clamp(86px, 9.4vw, 142px);
}
#hero-cards .card {
  margin: 0 -9px;
  transform-origin: 50% 105%;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.55));
}
#hero-cards .card:nth-child(1) { transform: rotate(-5.5deg) translateY(3px); }
#hero-cards .card:nth-child(2) { transform: rotate(5.5deg)  translateY(3px); }
#hero-cards .card:hover { z-index: 2; }

/* 7i. bullets — three chip icons (svg chips or .bullet fallback discs) */
#hero-bullets {
  display: flex;
  gap: 8px;
  align-items: center;
}
#hero-bullets svg, #hero-bullets .bullet {
  width: clamp(18px, 1.8vw, 26px);
  height: clamp(18px, 1.8vw, 26px);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6));
}
#hero-bullets .bullet {
  border-radius: 50%;
  background:
    repeating-conic-gradient(var(--gold-pale) 0 14deg, transparent 14deg 46deg),
    radial-gradient(circle at 36% 30%, #e05060, var(--red) 45%, var(--red-deep) 90%);
  border: 2px solid rgba(255, 240, 210, 0.75);
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.25);
  transition: opacity 0.4s ease, filter 0.4s ease, transform 0.4s ease;
}
#hero-bullets .bullet.spent, #hero-bullets .bullet.off,
#hero-bullets .bullet.used,  #hero-bullets .bullet.empty,
#hero-bullets svg.spent,     #hero-bullets svg.off {
  opacity: 0.22;
  filter: grayscale(1);
  transform: scale(0.88);
}

/* --------------------------------------------------------------------------
   8. Cards — 3D flip + deal-in
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  width: var(--card-w, 90px);
  aspect-ratio: 5 / 7;
  perspective: 900px;
  flex: 0 0 auto;
}
.card-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform var(--flip-ms) cubic-bezier(0.42, 0.05, 0.3, 1.05);
}
.card .face, .card .back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 9% / 6.4%;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: #0e1116;
}
.card .face svg, .card .back svg { width: 100%; height: 100%; }
.card .face { transform: rotateY(180deg); }            /* back shows by default */
.card.flipped .card-inner,
.card.face-up .card-inner { transform: rotateY(180deg); }

/* deal-in: fly from the deck (upper right) — keyframe has only `from`, so it
   lands on each card's own static transform (fan rotation etc.). ui.js adds
   class 'dealt' and staggers via JS timers (--i optional extra delay). */
.card.dealt {
  animation: dealIn var(--deal-ms) cubic-bezier(0.16, 0.7, 0.3, 1) backwards;
  animation-delay: calc(var(--i, 0) * 110ms);
}

/* showdown best-five highlight */
.card.glow .face {
  box-shadow: 0 0 0 2px var(--gold-bright),
              0 0 22px rgba(243, 210, 138, 0.75),
              var(--shadow-card);
}
.card.glow {
  transform: translateY(-6px);
  transition: transform 0.35s cubic-bezier(0.2, 1.2, 0.4, 1);
  z-index: 3;
}
#hero-cards .card.glow:nth-child(1) { transform: rotate(-5.5deg) translateY(-5px); }
#hero-cards .card.glow:nth-child(2) { transform: rotate(5.5deg)  translateY(-5px); }
#boss-cards .card.glow:nth-child(1) { transform: rotate(-4deg) translateY(-5px); }
#boss-cards .card.glow:nth-child(2) { transform: rotate(4deg)  translateY(-5px); }
@keyframes dealIn {
  from {
    transform: translate(38vw, -42vh) rotate(16deg) scale(0.55);
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   9. Chip-fly (ui.js positions, CSS transitions the transform)
   -------------------------------------------------------------------------- */
.chip-fly {
  position: fixed;
  z-index: 50;
  width: clamp(34px, 3.4vw, 48px);
  height: clamp(34px, 3.4vw, 48px);
  pointer-events: none;
  will-change: transform, opacity;
  transition: transform var(--chip-ms) cubic-bezier(0.25, 0.85, 0.3, 1),
              opacity   var(--chip-ms) ease;
  filter: drop-shadow(0 6px 9px rgba(0, 0, 0, 0.55));
}
.chip-fly svg { width: 100%; height: 100%; }

/* --------------------------------------------------------------------------
   10. Action bar — fixed bottom, big tactile buttons
   -------------------------------------------------------------------------- */
#action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  min-height: var(--actionbar-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.1vw, 18px);
  padding: 14px clamp(12px, 3vw, 44px) calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(4, 5, 9, 0) 0%, rgba(4, 5, 9, 0.85) 32%, rgba(4, 5, 9, 0.97) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#action-bar > button {
  min-width: clamp(86px, 9vw, 152px);
  padding: 1.05em 0.6em;
  font-size: clamp(0.8rem, 1.05vw, 1rem);
  border-radius: 12px;
}
#btn-fold {
  border-color: rgba(184, 51, 63, 0.55);
  background: linear-gradient(180deg, #3a2026 0%, #1d1216 100%);
}
#btn-fold:hover { border-color: var(--red); box-shadow: 0 8px 22px rgba(0,0,0,.5), 0 0 16px rgba(184,51,63,.3); }
#btn-raise {
  border-color: rgba(216, 177, 92, 0.7);
  background: linear-gradient(180deg, #3a3120 0%, #1d1810 100%);
  color: var(--gold-bright);
}
#btn-allin {
  background: linear-gradient(180deg, #5a1620 0%, #2a0a10 100%);
  border-color: rgba(243, 210, 138, 0.55);
  color: var(--gold-pale);
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}
#btn-allin:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55),
              0 0 22px rgba(184, 51, 63, 0.45),
              0 0 30px rgba(216, 177, 92, 0.2);
}
#btn-read {
  min-width: clamp(70px, 7vw, 110px);
  background: linear-gradient(180deg, #232a3e 0%, #121624 100%);
  border-color: rgba(134, 180, 255, 0.45);
  color: #b9d2ff;
}
#btn-read:hover { border-color: var(--blue-rim); box-shadow: 0 8px 22px rgba(0,0,0,.5), 0 0 18px rgba(134,180,255,.3); }

/* 10a. raise controls — premium glass panel docked above the bar */
#raise-controls {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  width: min(580px, 94vw);
  padding: 16px 20px;
  background: rgba(10, 13, 19, 0.82);
  border: 1px solid var(--glass-rim);
  border-radius: 18px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "amount  cancel"
    "slider  slider"
    "presets confirm";
  align-items: center;
  gap: 12px 14px;
  animation: bubbleIn 0.28s cubic-bezier(0.2, 1.2, 0.4, 1) backwards;
}
#raise-amount {
  grid-area: amount;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 10px rgba(216, 177, 92, 0.3);
  min-height: 1em;
}
#btn-cancel-raise {
  grid-area: cancel;
  min-width: 0;
  padding: 0.45em 0.8em;
  font-size: 0.95rem;
  border-radius: 8px;
  justify-self: end;
}
#raise-slider { grid-area: slider; }
#raise-presets {
  grid-area: presets;
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
#raise-presets button {
  min-width: 0;
  padding: 0.55em 0.9em;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  border-radius: 8px;
}
#btn-confirm-raise {
  grid-area: confirm;
  justify-self: end;
  padding: 0.75em 1.6em;
}

/* 10b. raise slider — gold thumb */
#raise-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 7px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--gold-deep) 0%, var(--gold) 60%, var(--gold-bright) 100%);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.08);
  outline: none;
  cursor: pointer;
}
#raise-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #ffeec2, var(--gold) 52%, var(--gold-deep) 95%);
  border: 2px solid #fff3d6;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.65), 0 0 14px rgba(216, 177, 92, 0.5);
  cursor: grab;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
#raise-slider::-webkit-slider-thumb:hover { transform: scale(1.12); }
#raise-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.05); }
#raise-slider::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #ffeec2, var(--gold) 52%, var(--gold-deep) 95%);
  border: 2px solid #fff3d6;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.65), 0 0 14px rgba(216, 177, 92, 0.5);
  cursor: grab;
}
#raise-slider::-moz-range-track {
  height: 7px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--gold-deep) 0%, var(--gold) 60%, var(--gold-bright) 100%);
}

/* --------------------------------------------------------------------------
   11. Coach panel + hand log — translucent corner cards
   -------------------------------------------------------------------------- */
#coach-panel, #hand-log {
  position: fixed;
  bottom: calc(var(--actionbar-h) + 16px);
  z-index: 20;
  background: rgba(10, 13, 19, 0.62);
  border: 1px solid rgba(216, 177, 92, 0.28);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--muted);
  padding: 10px 14px;
}
#coach-panel {
  left: 16px;
  max-width: min(230px, 24vw);
}
#coach-panel b, #coach-panel strong, #coach-panel .num {
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
}
#coach-panel h4, #coach-panel .coach-title {
  margin: 0 0 4px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--gold);
  text-transform: uppercase;
}
#hand-log {
  right: 16px;
  width: min(238px, 24vw);
  max-height: 30vh;
  overflow-y: auto;
  font-variant-numeric: tabular-nums;
}
#hand-log:empty { display: none; }
#hand-log > div, #hand-log p {
  margin: 0 0 3px;
  padding-bottom: 3px;
  border-bottom: 1px dotted rgba(216, 177, 92, 0.14);
}
#hand-log b, #hand-log strong { color: var(--paper); }
#hand-log .win,  #hand-log .log-win  { color: var(--gold-bright); }
#hand-log .lose, #hand-log .log-lose { color: #d97983; }

/* --------------------------------------------------------------------------
   12. Banner — full-width cinematic strip
   -------------------------------------------------------------------------- */
#banner {
  position: fixed;
  left: 0;
  right: 0;
  top: 42%;
  transform: translateY(-50%);
  z-index: 60;
  padding: clamp(18px, 3.4vh, 36px) 4vw;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 5.5vw, 4.2rem);
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  line-height: 1.1;
  color: var(--paper);
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  animation: bannerIn var(--banner-ms) cubic-bezier(0.16, 1, 0.3, 1) backwards;
  background: linear-gradient(90deg, rgba(8, 10, 16, 0) 0%, rgba(8, 10, 16, 0.92) 18%, rgba(8, 10, 16, 0.92) 82%, rgba(8, 10, 16, 0) 100%);
  border-top: 1px solid rgba(216, 177, 92, 0.35);
  border-bottom: 1px solid rgba(216, 177, 92, 0.35);
}
@keyframes bannerIn {
  from {
    opacity: 0;
    transform: translateY(-50%) scale(1.3);
    letter-spacing: 0.45em;
  }
}
#banner.win {
  background: linear-gradient(90deg, rgba(216, 177, 92, 0) 0%, rgba(216, 177, 92, 0.93) 18%, rgba(243, 210, 138, 0.95) 50%, rgba(216, 177, 92, 0.93) 82%, rgba(216, 177, 92, 0) 100%);
  color: #241a05;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35), 0 3px 10px rgba(0, 0, 0, 0.25);
  border-color: rgba(255, 240, 200, 0.6);
}
#banner.lose {
  background: linear-gradient(90deg, rgba(122, 16, 24, 0) 0%, rgba(122, 16, 24, 0.93) 18%, rgba(150, 24, 34, 0.96) 50%, rgba(122, 16, 24, 0.93) 82%, rgba(122, 16, 24, 0) 100%);
  color: #ffe9e4;
  border-color: rgba(255, 140, 140, 0.35);
}
#banner.info { /* defaults above */ }

/* --------------------------------------------------------------------------
   13. Day result / Game over / Champion screens
   -------------------------------------------------------------------------- */
#screen-dayresult {
  background: radial-gradient(120% 95% at 50% 8%, #16202e 0%, #090c12 58%, #04050a 100%);
}
#screen-gameover {
  background: radial-gradient(120% 95% at 50% 12%, #2b0d12 0%, #120608 55%, #04050a 100%);
}
#screen-champion {
  background:
    radial-gradient(70% 50% at 50% 30%, rgba(216, 177, 92, 0.22) 0%, rgba(216, 177, 92, 0) 70%),
    radial-gradient(120% 95% at 50% 10%, #221b0d 0%, #0d0a06 55%, #04050a 100%);
}

#dayresult-content, #gameover-content, #champion-content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(8px, 1.6vh, 18px);
  padding: 5vh 7vw calc(5vh + env(safe-area-inset-bottom, 0px));
}

/* typography hierarchy for injected content */
#dayresult-content h1, #gameover-content h1, #champion-content h1,
.dr-title, .dr-busted, .go-title, .ch-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.3rem, 6vw, 4.6rem);
  letter-spacing: 0.06em;
  line-height: 1.05;
  background: linear-gradient(180deg, var(--gold-pale) 10%, var(--gold) 60%, #8a6824 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 18px rgba(216, 177, 92, 0.22));
}
#gameover-content h1, .go-title, .dr-busted {
  background: linear-gradient(180deg, #f0b9b2 10%, var(--red) 60%, #5d0a12 95%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 3px 18px rgba(184, 51, 63, 0.3));
}
#dayresult-content h2, #gameover-content h2, #champion-content h2,
.dr-sub, .go-sub, .ch-sub {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 2.6vw, 2rem);
  color: var(--paper);
  letter-spacing: 0.05em;
}
#dayresult-content h3, #gameover-content h3, #champion-content h3,
.dr-count-label, .dr-bullets {
  margin: 0;
  font-weight: 600;
  font-size: clamp(0.75rem, 1.3vw, 1rem);
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}
#dayresult-content p, #gameover-content p, #champion-content p,
.dr-teaser, .go-flavor, .dr-next-title {
  margin: 0;
  max-width: 60ch;
  color: var(--muted);
  font-size: clamp(0.85rem, 1.3vw, 1.05rem);
}
#dayresult-content b, #champion-content b,
#dayresult-content strong, #champion-content strong { color: var(--gold-bright); }
#dayresult-content button, #gameover-content button, #champion-content button {
  margin-top: 2vh;
  min-width: min(240px, 70vw);
  padding: 1em 2em;
}

/* huge animated players-remaining countdown number */
.countdown, .players-count, .count-num, .dr-count {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4rem, 12vw, 9rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff6dd 5%, var(--gold) 55%, var(--gold-deep) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 30px rgba(216, 177, 92, 0.3));
  letter-spacing: 0.02em;
}

/* prize line (champion) */
.prize, #champion-content .prize, .ch-prize {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 5vw, 3.6rem);
  color: var(--gold-bright);
  text-shadow: 0 0 26px rgba(216, 177, 92, 0.5);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   14. Confetti — ui.js spawns <div class="confetti"> children into the
   active result screen; per-element variation via custom properties:
     --x (left %), --c (color), --d (fall duration), --delay, --w (width),
     --sway (horizontal drift), --spin (total rotation)
   nth-child fallbacks keep it lively even without inline custom props.
   -------------------------------------------------------------------------- */
.confetti {
  position: absolute;
  top: -6vh;
  left: var(--x, 50%);
  width: var(--w, 10px);
  height: calc(var(--w, 10px) * 1.7);
  background: var(--c, var(--gold));
  border-radius: 2px;
  opacity: 0;
  z-index: 3;
  pointer-events: none;
  animation: confettiFall var(--d, 3.2s) linear var(--delay, 0s) infinite;
}
@keyframes confettiFall {
  0%   { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateY(0deg); opacity: 0; }
  6%   { opacity: 1; }
  100% { transform: translate3d(var(--sway, 5vw), 112vh, 0) rotateZ(var(--spin, 560deg)) rotateY(720deg); opacity: 0.9; }
}
.confetti:nth-child(2n)  { --c: #e9e2cf; --d: 2.7s; --x: 18%; --sway: -4vw; }
.confetti:nth-child(3n)  { --c: var(--red); --d: 3.6s; --x: 34%; --w: 8px; }
.confetti:nth-child(4n)  { --c: var(--gold-bright); --d: 2.4s; --x: 56%; --spin: -480deg; }
.confetti:nth-child(5n)  { --c: #5c8ad8; --d: 3.9s; --x: 72%; --sway: 7vw; }
.confetti:nth-child(7n)  { --c: #c8742e; --d: 3.1s; --x: 88%; --w: 12px; }
.confetti:nth-child(11n) { --x: 8%;  --delay: 0.8s; }
.confetti:nth-child(13n) { --x: 95%; --delay: 1.4s; --spin: 720deg; }

/* --------------------------------------------------------------------------
   15. Epilogue
   -------------------------------------------------------------------------- */
#epilogue-dialog:empty { opacity: 0; }
#epilogue-dialog { z-index: 2; transition: opacity 0.4s ease; }

/* cast portraits slide up from the bottom corners */
.epi-cast {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.epi-tiffany, .epi-ben {
  position: absolute;
  bottom: 14vh;
  height: min(52vh, 64vw);
  aspect-ratio: 600 / 760;
  transform: translateY(115%);
  transition: transform 0.9s cubic-bezier(0.2, 0.9, 0.3, 1), filter 0.4s ease;
  filter: drop-shadow(0 22px 38px rgba(0, 0, 0, 0.65)) brightness(0.92);
  -webkit-mask-image: radial-gradient(74% 102% at 50% 62%, #000 36%, transparent 64%);
  mask-image: radial-gradient(74% 102% at 50% 62%, #000 36%, transparent 64%);
}
.epi-tiffany { left: 8vw; }
.epi-ben { right: 8vw; transition-delay: 0.25s; }
.epi-tiffany svg, .epi-ben svg { width: 100%; height: 100%; }
.epi-cast.slide-in .epi-tiffany, .epi-cast.slide-in .epi-ben { transform: translateY(0); }
#screen-epilogue.tiffany-talking .epi-tiffany,
#screen-epilogue.ben-talking .epi-ben { filter: drop-shadow(0 22px 38px rgba(0,0,0,.65)) brightness(1.06); }
#screen-epilogue.tiffany-talking .epi-ben,
#screen-epilogue.ben-talking .epi-tiffany { filter: drop-shadow(0 22px 38px rgba(0,0,0,.65)) brightness(0.7) saturate(0.8); }

/* epilogue dialogue box (built by ui.js inside #epilogue-dialog) */
.ep-box { position: relative; max-width: 72ch; margin: 0 auto; }
.ep-text { min-height: 2.4em; }
.ep-next {
  position: absolute;
  right: -1.4em;
  bottom: 0;
  color: var(--gold);
  animation: blink 1.1s steps(2, start) infinite;
}

/* title-screen Tiffany overlay — feather the portrait's painted backdrop into
   the scene so it doesn't read as a hard-edged box */
.overlay-tiffany-title {
  -webkit-mask-image: radial-gradient(74% 102% at 50% 62%, #000 36%, transparent 64%);
  mask-image: radial-gradient(74% 102% at 50% 62%, #000 36%, transparent 64%);
  filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.55));
}

/* Tiffany portrait on venue/encounter screens */
.hero-portrait {
  position: absolute;
  left: 5vw;
  bottom: 19vh;
  z-index: 1;
  height: min(46vh, 52vw);
  aspect-ratio: 600 / 760;
  filter: drop-shadow(0 20px 36px rgba(0, 0, 0, 0.6));
  pointer-events: none;
  -webkit-mask-image: radial-gradient(74% 102% at 50% 62%, #000 36%, transparent 64%);
  mask-image: radial-gradient(74% 102% at 50% 62%, #000 36%, transparent 64%);
}
.hero-portrait svg { width: 100%; height: 100%; }
@media (max-width: 920px) { .hero-portrait { display: none; } }

/* coach equity bar */
.eq-bar {
  height: 6px;
  margin-top: 4px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.eq-fill {
  height: 100%;
  width: 100%;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
  border-radius: 3px;
  transition: transform 0.4s ease;
}

/* acting-player plate flash */
#hero-plate.flash, #boss-plate.flash {
  animation: plateFlash 0.6s ease;
}
@keyframes plateFlash {
  30% {
    border-color: var(--gold-bright);
    box-shadow: 0 0 22px rgba(243, 210, 138, 0.55),
                0 8px 24px rgba(0, 0, 0, 0.5);
  }
}

/* --------------------------------------------------------------------------
   16. Responsive — fully usable ≥768px, graceful below
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  #hand-log { width: 200px; font-size: 0.68rem; }
  #coach-panel { max-width: 200px; font-size: 0.68rem; }
  #boss-banter { left: calc(50% + 10vh); max-width: 36vw; }
}

@media (max-width: 920px) {
  :root { --actionbar-h: 118px; }
  #action-bar {
    flex-wrap: wrap;
    gap: 7px;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  #action-bar > button {
    min-width: 0;
    flex: 1 1 96px;
    padding: 0.85em 0.4em;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
  }
  #boss-portrait { height: 24vh; }
  #table-felt { top: 26.5vh; height: 31vh; width: 96vw; }
  #hero-cards { --card-w: clamp(74px, 11vw, 110px); }
  #board-cards { --card-w: clamp(46px, 8vw, 72px); }
  #coach-panel { left: 8px; max-width: 168px; }
  #hand-log { right: 8px; width: 156px; max-height: 24vh; }
  #boss-banter { left: auto; right: 4vw; top: 5vh; max-width: 46vw; }
  #boss-banter::after { left: auto; right: 24px; top: auto; bottom: -9px;
    border: 8px solid transparent; border-top: 12px solid rgba(246, 241, 229, 0.96); border-bottom: 0; }
  #raise-controls { width: 96vw; padding: 12px 14px; gap: 10px; }
  #encounter-portrait { height: min(48vh, 86vw); bottom: 24vh; }
}

@media (max-width: 600px) {
  /* phones: degrade gracefully */
  #title-card h1 { font-size: clamp(2.4rem, 13vw, 3.6rem); }
  #boss-plate, #hero-plate { font-size: 0.66rem; padding: 5px 10px; }
  #boss-plate > span, #hero-plate > span { padding: 0 7px; }
  #blinds-display { display: none; }
  #coach-panel { display: none; }
  #hand-log { display: none; }
  #boss-portrait { height: 21vh; }
  #table-felt { top: 24vh; height: 30vh; }
}

@media (max-height: 660px) {
  #boss-portrait { height: 26vh; }
  #boss-plate { margin-top: -1.4vh; }
  #table-felt { top: 33vh; height: 30vh; }
  #hero-cards { --card-w: clamp(70px, 8vw, 108px); }
}

/* --------------------------------------------------------------------------
   17. Reduced motion — kill nonessential animation
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
    animation-delay: 0s !important;
  }
  .confetti { display: none; }
  #boss-portrait svg { animation: none; }
  .card.dealt { animation: none; }
  #dialog-next { animation: none; opacity: 1; }
}