/* Ridotto, direction A "The Night Walk", round 3.
   Two modes from one stylesheet:
   - default (no JS, reduced motion): six plain sections, each settled.
   - html.staged: each scene is a fixed full-screen layer; site.js scrubs one
     timeline across the track and moves only transform/opacity.
   Vertical positions use svh so content sits inside the small viewport on iOS;
   layers are 100lvh tall so no strip of the next scene shows when the toolbar
   collapses. */

@font-face { font-family: "Limelight"; src: url(fonts/limelight-latin.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Playfair"; src: url(fonts/playfair-latin.woff2) format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Playfair"; src: url(fonts/playfair-italic-latin.woff2) format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
/* size-matched fallbacks so the swap never shifts layout */
@font-face { font-family: "Limelight Fallback"; src: local("Georgia"); size-adjust: 104%; ascent-override: 92%; descent-override: 24%; }
@font-face { font-family: "Playfair Fallback"; src: local("Georgia"); size-adjust: 106%; ascent-override: 98%; descent-override: 24%; }

:root {
  --navy: #0a1028; --canal: #13244f; --felt: #0b3b2e; --felt-hi: #17694f;
  --ox: #3e1219; --night: #05070f; --cream: #f4efe6; --paper: #f1e8d6;
  --brass: #c9a25e; --brass-lt: #e2c387; --ink: #15110b;
  --disp: "Limelight", "Limelight Fallback", Georgia, serif;
  --serif: "Playfair", "Playfair Fallback", Georgia, serif;
  --gut: 16px; --sv: 1svh;
  --ease: cubic-bezier(.2,.7,.2,1);
  color-scheme: dark;
}
@media (min-width: 700px) { :root { --gut: 40px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--navy); }
body { margin: 0; background: var(--navy); color: var(--cream); font: 400 18px/1.45 var(--serif); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, svg, video { display: block; }
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html[data-store="beta"] .live-only, html[data-store="live"] .beta-only { display: none !important; }
/* the App Store button: the site's own pill until Apple's badge is in assets/img/app-store.svg and <html> says
   data-badge="art" (?badge=art previews the slot). The founders' lines show only before founders.json's cutoff. */
html:not([data-badge="art"]) .badge-art, html[data-badge="art"] .badge-text { display: none !important; }
[data-founders][hidden], [data-founders-else][hidden] { display: none !important; }
.badge { display: inline-block; line-height: 0; border-radius: 10px; }
.badge:focus-visible { outline: 2px solid var(--brass-lt); outline-offset: 4px; }
.cta-note .founders-note { color: var(--brass-lt); }
html.lenis, html.lenis body { height: auto; }

/* ---------------------------------------------------------------- type */
.disp { font: 400 clamp(40px, 5.6vw, 92px)/1.02 var(--disp); letter-spacing: .03em; text-transform: uppercase; margin: 0; }
.cap { margin: clamp(10px, 1.6svh, 18px) 0 0; font-size: clamp(18px, calc(13px + .62vw), 23px); line-height: 1.35; }

/* ---------------------------------------------------------------- chrome */
.top { position: fixed; z-index: 60; top: 0; left: 0; padding: max(14px, env(safe-area-inset-top)) var(--gut) 0; pointer-events: none; }
.mark { display: block; width: 112px; pointer-events: auto; transition: opacity .5s var(--ease); }
.mark img { width: 100%; height: auto; }
.pin { position: fixed; z-index: 60; right: var(--gut); bottom: max(18px, env(safe-area-inset-bottom)); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.pin .short { display: none; }
@media (max-width: 699px), (max-aspect-ratio: 6/5) {
  .pin { top: max(10px, env(safe-area-inset-top)); bottom: auto; }
  .pin .long { display: none; } .pin .short { display: inline; }
  .pin .pill { min-height: 44px; padding: 0 16px; font-size: 14.5px; box-shadow: 2px 2px 0 var(--cream); }
}
html.js .pin, html.js .mark { opacity: 0; pointer-events: none; }      /* hidden before first paint */
html.js .pin.on, html.js .mark.on { opacity: 1; pointer-events: auto; }
html.js .pin:not(.on) { transform: translateY(8px); }

.pill { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 46px; padding: 0 22px;
  font: 600 15px/1 var(--serif); letter-spacing: .005em; text-decoration: none; color: var(--ink); background: var(--brass);
  border: 1.5px solid var(--ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--cream); white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.pill:hover { background: var(--brass-lt); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--cream); }
.pill:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--cream); }
.pill:focus-visible, .fc:focus-visible, .film-start:focus-visible, .fine a:focus-visible { outline: 2px solid var(--brass-lt); outline-offset: 4px; }
.pill-lg { min-height: 56px; padding: 0 30px; font-size: 17px; }
.badge img { width: 156px; height: 52px; }

/* the coach's rail band (the app's), lamp + one line in brass italic */
.coach { display: flex; align-items: center; gap: 14px; padding: 12px 22px 12px 14px; border-radius: 20px; max-width: 34rem;
  background: linear-gradient(180deg, #2c211a, #1c1511); box-shadow: inset 0 0 0 1px rgba(201,162,94,.32), 0 14px 30px rgba(0,0,0,.45); }
.lamp-sm { width: 30px; height: 42px; flex: none; overflow: visible; }
.coach-line { margin: 0; font: italic 400 clamp(18px, calc(13px + .6vw), 22px)/1.32 var(--serif); color: var(--brass-lt); }

/* ---------------------------------------------------------------- scenes (flow mode) */
.scene { position: relative; min-height: 100svh; height: 100svh; overflow: hidden; }
.arch, .arch-in, .panel { position: absolute; inset: 0; }
.say { position: absolute; z-index: 6; }

/* staged: fixed layers over a long track */
html.staged .track { height: calc(var(--track, 8.6) * 100svh); }
html.staged .scene { position: fixed; top: 0; left: 0; width: 100%; height: 100lvh; min-height: 0; visibility: hidden; contain: layout paint; }
html.staged .scene.live { visibility: visible; }
html.staged .scene.gone { content-visibility: hidden; }
.s-hero { z-index: 1; } .s-pit { z-index: 2; } .s-poker { z-index: 3; } .s-lamp { z-index: 4; } .s-screens { z-index: 5; } .s-close { z-index: 6; }
html.staged .s-hero { visibility: visible; }
html.staged .s-pit, html.staged .s-close, html.staged .s-poker, html.staged .s-screens { background: transparent; }

/* ---------------------------------------------------------------- 1 · film */
.s-hero { background: var(--navy); }
.film { position: absolute; left: 0; right: 0; top: 0; height: calc(100 * var(--sv) - var(--bar)); overflow: hidden; background: var(--navy); --bar: 78px; }
.s-hero { --bar: 78px; }
.film-video, .film-poster, .film-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.film-poster.gone { visibility: hidden; }
.film-start { position: absolute; z-index: 4; left: 50%; top: 50%; width: 76px; height: 76px; translate: -50% -50%; display: none; place-items: center; border-radius: 50%;
  background: rgba(8,12,28,.7); color: var(--cream); border: 1px solid rgba(201,162,94,.7); cursor: pointer; }
.film-start svg { width: 30px; height: 30px; fill: currentColor; margin-left: 4px; }
.film.waiting .film-start { display: grid; }
.film-bar { position: absolute; left: 0; right: 0; top: calc(100 * var(--sv) - var(--bar)); height: var(--bar); display: flex; align-items: center; gap: 22px;
  padding: 0 var(--gut); background: var(--navy); border-top: 1px solid rgba(201,162,94,.45); }
.film-bar::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--brass-lt), transparent); opacity: .5; }
.film-controls { display: flex; gap: 10px; }
.fc { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--cream); border: 1px solid rgba(201,162,94,.6); transition: background .2s ease, border-color .2s ease; }
.fc:hover { background: rgba(201,162,94,.12); border-color: var(--brass); }
.fc svg { width: 20px; height: 20px; fill: currentColor; }
.fc-play .i-play, .paused .fc-play .i-pause, .fc-sound .i-on, .fc-sound[aria-pressed="true"] .i-off { display: none; }
.paused .fc-play .i-play, .fc-sound[aria-pressed="true"] .i-on { display: block; }
html.js .film-bar > * { opacity: 0; transform: translateY(10px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
html.js .film-bar.on > * { opacity: 1; transform: none; }
html.js .film-bar.on > :nth-child(2) { transition-delay: .12s; } html.js .film-bar.on > :nth-child(3) { transition-delay: .24s; }
@media (max-width: 699px), (max-aspect-ratio: 6/5) {
  .s-hero, .film { --bar: 132px; }
  .film-bar { flex-wrap: wrap; justify-content: center; align-content: center; gap: 12px 12px; padding-bottom: env(safe-area-inset-bottom); }
  .film-video, .film-poster img { object-position: 50% 40%; }
  /* the video sits 4px short of the poster, so its first frame is never a larger LCP candidate */
  .film-video { height: calc(100% - 4px); }
}

/* ---------------------------------------------------------------- 2 · the Pit */
.s-pit { background: var(--felt); --cw: clamp(70px, 7.6vw, 120px); }
.felt { position: absolute; inset: 0; background: radial-gradient(60% 52% at 58% 44%, #18674e 0%, #0f4b39 46%, #0a3427 78%, #072a20 100%); }
.felt::after { content: ""; position: absolute; inset: 0; background: url(../assets/img/grain.png); opacity: .9; }
.far-edge { position: absolute; left: 0; right: 0; top: calc(33 * var(--sv)); height: 16px; background: linear-gradient(180deg, #2a1a10, #120b06); box-shadow: 0 2px 0 rgba(201,162,94,.55), 0 10px 26px rgba(0,0,0,.4); z-index: 2; }
.dealer { position: absolute; width: auto; }
.rosa { z-index: 1; height: calc(31 * var(--sv)); left: 61vw; top: calc(2.2 * var(--sv)); translate: -50% 0; }
.shoe { position: absolute; z-index: 3; left: 84vw; top: calc(25.5 * var(--sv)); width: calc(var(--cw) * 1.25); height: calc(var(--cw) * .75); border-radius: 10px;
  background: linear-gradient(180deg, #3a2618, #1f140c); box-shadow: inset 0 0 0 1px rgba(201,162,94,.45), 0 10px 22px rgba(0,0,0,.45); translate: -50% 0; }
.shoe i { position: absolute; left: 12%; right: 12%; top: 18%; height: 34%; border-radius: 4px; background: repeating-linear-gradient(90deg, #6b1f24 0 3px, #8a2a2f 3px 5px); box-shadow: 0 0 0 1px rgba(0,0,0,.4); }
.print { position: absolute; z-index: 2; left: 50%; top: calc(48.5 * var(--sv)); width: min(70vw, 980px); translate: -42% 0; overflow: visible; }
.print .p-big { font: 400 30px var(--disp); letter-spacing: .14em; fill: var(--brass); fill-opacity: .82; }
.print .p-sm { font: 600 17px var(--serif); letter-spacing: .3em; fill: var(--brass); fill-opacity: .7; }
.rail { position: absolute; z-index: 4; left: -10vw; right: -10vw; top: calc(90.5 * var(--sv)); height: calc(40 * var(--sv)); border-radius: 50% 50% 0 0 / 22% 22% 0 0;
  background: linear-gradient(180deg, #4a2c1a 0%, #2a170c 14%, #1a0e07 60%); box-shadow: inset 0 3px 0 rgba(226,195,135,.35), inset 0 14px 24px rgba(255,220,170,.08), 0 -14px 30px rgba(0,0,0,.35); }
/* the hand: positions are the settled layout; site.js deals them from the shoe */
.hand { position: absolute; inset: 0; z-index: 3; }
.slot { position: absolute; width: var(--cw); aspect-ratio: 5 / 7; }
.cf { position: absolute; inset: 0; transform-style: preserve-3d; }
.card { position: absolute; inset: 0; border-radius: calc(var(--cw) * .1); background: linear-gradient(180deg, #faf6ee, #f1ebdf);
  box-shadow: 0 0 0 1px rgba(60,40,20,.08) inset, 0 -2px 0 rgba(0,0,0,.05) inset, 0 2px 1px rgba(0,0,0,.18), 0 calc(var(--cw) * .1) calc(var(--cw) * .22) rgba(0,0,0,.38);
  backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.card b { position: absolute; left: 0; width: 34%; top: 7%; text-align: center; font: 700 calc(var(--cw) * .25)/1 var(--serif); letter-spacing: -.03em; }
.card .pip { position: absolute; left: 8.5%; top: 34%; width: 17%; height: 17%; }
.card .big { position: absolute; left: 30%; top: 44%; width: 50%; height: 40%; }
.card.red { color: #d4463c; } .card.blk { color: #1b1b1d; } .card svg { fill: currentColor; }
.card.back { background: #6b1f24; box-shadow: inset 0 0 0 calc(var(--cw) * .06) #f4efe6, inset 0 0 0 calc(var(--cw) * .075) rgba(201,162,94,.8), 0 calc(var(--cw) * .1) calc(var(--cw) * .22) rgba(0,0,0,.38); }
.card.back::after { content: ""; position: absolute; left: 50%; top: 50%; width: 34%; height: 34%; translate: -50% -50%;
  background: var(--brass); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 4C35 25 6 40 6 61c0 13 11 21 23 21 8 0 14-4 17-9-1 10-5 17-12 23h32c-7-6-11-13-12-23 3 5 9 9 17 9 12 0 23-8 23-21C94 40 65 25 50 4z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 4C35 25 6 40 6 61c0 13 11 21 23 21 8 0 14-4 17-9-1 10-5 17-12 23h32c-7-6-11-13-12-23 3 5 9 9 17 9 12 0 23-8 23-21C94 40 65 25 50 4z'/%3E%3C/svg%3E") center / contain no-repeat; }
.s-d1 { left: calc(61vw - var(--cw) * .8); top: calc(35.5 * var(--sv)); }
.s-hole { left: calc(61vw - var(--cw) * .22); top: calc(35.5 * var(--sv)); perspective: 900px; }
.s-p1 { left: calc(61vw - var(--cw) * .8); top: calc(64.5 * var(--sv)); }
.s-p2 { left: calc(61vw - var(--cw) * .22); top: calc(64.5 * var(--sv) + var(--cw) * .04); }
.s-p3 { left: calc(61vw - var(--cw) * .5); top: calc(64.5 * var(--sv) + var(--cw) * .74); rotate: 90deg; z-index: 2; }
.ring { position: absolute; left: calc(45vw - var(--cw) * .6); top: calc(72 * var(--sv) - var(--cw) * .6); width: calc(var(--cw) * 1.2); height: calc(var(--cw) * 1.2); border-radius: 50%; border: 2px solid rgba(201,162,94,.7); }
.hand .chip { position: absolute; width: calc(var(--cw) * .74); height: calc(var(--cw) * .64); left: calc(45vw - var(--cw) * .37); top: calc(72 * var(--sv) - var(--cw) * .36); filter: drop-shadow(0 4px 4px rgba(0,0,0,.35)); }
.hand [data-chip2] { left: calc(45vw + var(--cw) * .2); top: calc(72 * var(--sv) - var(--cw) * .36); }
.tot { position: absolute; font: 700 clamp(16px, 1.5vw, 22px)/1 var(--serif); color: var(--cream); text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.tot em { font-style: normal; }
.tot-d { left: calc(61vw + var(--cw) * .9); top: calc(35.5 * var(--sv) + var(--cw) * .6); }
.tot-p { left: calc(61vw + var(--cw) * .9); top: calc(64.5 * var(--sv) + var(--cw) * .6); }
.tot em + em { display: none; } /* flow mode shows the end of the hand: */
html:not(.staged) .tot em:first-child { display: none; } html:not(.staged) .tot em + em { display: inline; }
html.staged .tot em + em { display: inline; position: absolute; left: 0; top: 0; }
.say-pit { left: var(--gut); top: calc(10 * var(--sv)); max-width: 40vw; }
.say-pit .disp { font-size: clamp(38px, 4.7vw, 78px); }
@media (min-width: 700px) { .say-pit { left: 6vw; } }
.coach-pit { position: absolute; z-index: 6; left: 6vw; top: calc(52 * var(--sv)); max-width: min(30vw, 30rem); }
@media (max-width: 699px), (max-aspect-ratio: 6/5) {
  .s-pit { --cw: 74px; }
  .say-pit { top: calc(9.5 * var(--sv)); max-width: 62vw; }
  .rosa { left: 78vw; height: calc(19 * var(--sv)); top: calc(17 * var(--sv)); }
  .shoe { left: 86vw; top: calc(31 * var(--sv)); width: 64px; height: 38px; }
  .s-d1 { left: calc(56vw - var(--cw) * .8); top: calc(39 * var(--sv)); }
  .s-hole { left: calc(56vw - var(--cw) * .22); top: calc(39 * var(--sv)); }
  .print { top: calc(53 * var(--sv)); width: 132vw; translate: -50% 0; }
  .s-p1 { left: calc(56vw - var(--cw) * .8); top: calc(60 * var(--sv)); }
  .s-p2 { left: calc(56vw - var(--cw) * .22); top: calc(60 * var(--sv) + var(--cw) * .04); }
  .s-p3 { left: calc(56vw - var(--cw) * .5); top: calc(60 * var(--sv) + var(--cw) * .74); }
  .ring { left: calc(20vw - var(--cw) * .6); top: calc(66 * var(--sv) - var(--cw) * .6); }
  .hand .chip { left: calc(20vw - var(--cw) * .37); top: calc(66 * var(--sv) - var(--cw) * .36); }
  .hand [data-chip2] { left: calc(20vw + var(--cw) * .2); }
  .tot-d { left: calc(56vw + var(--cw) * .9); top: calc(39 * var(--sv) + var(--cw) * .6); }
  .tot-p { left: calc(56vw + var(--cw) * .9); top: calc(60 * var(--sv) + var(--cw) * .6); }
  .rail { top: calc(93 * var(--sv)); }
  .coach-pit { left: var(--gut); right: var(--gut); top: calc(80 * var(--sv)); max-width: none; }
}

/* ---------------------------------------------------------------- 3 · the Poker Room */
.s-poker { background: var(--ox); --cw: clamp(48px, 4.6vw, 74px); --face: clamp(52px, 5.6vw, 88px); }
.room { position: absolute; inset: 0; background: radial-gradient(80% 70% at 50% 45%, #5a1d26 0%, #3e1219 55%, #24090e 100%); }
.room::after { content: ""; position: absolute; inset: 0; background: url(../assets/img/grain.png); opacity: .6; }
.marquee-edge { position: absolute; z-index: 9; left: 0; right: 0; top: -3px; height: 3px; background: var(--brass); box-shadow: 0 0 12px rgba(226,195,135,.55); }
.marquee-edge .glint { position: absolute; top: -9px; left: 0; width: 22px; height: 22px; border-radius: 50%; translate: -50% 0;
  background: radial-gradient(circle, #fff7e2 0%, #ffd27a 35%, rgba(255,190,90,0) 70%); }
html:not(.staged) .marquee-edge { display: none; }
.oval { position: absolute; left: 50%; top: calc(51 * var(--sv)); width: min(72vw, 1060px); height: calc(50 * var(--sv)); translate: -50% -50%; }
.oval-felt { position: absolute; inset: 0; border-radius: 50% / 50%; background: radial-gradient(65% 60% at 50% 45%, #18674e 0%, #0f4b39 55%, #0a3427 100%);
  box-shadow: 0 0 0 clamp(14px, 1.6vw, 24px) #2a170c, 0 0 0 calc(clamp(14px, 1.6vw, 24px) + 2px) rgba(201,162,94,.6), 0 30px 60px rgba(0,0,0,.5), inset 0 0 0 2px rgba(201,162,94,.35); }
.oval-felt::after { content: ""; position: absolute; inset: 7%; border-radius: 50%; border: 1px solid rgba(201,162,94,.35); }
.june { z-index: 0; left: 50%; translate: -50% 0; height: calc(26 * var(--sv)); top: calc(51 * var(--sv) - 25 * var(--sv) - 24 * var(--sv)); }
.say-poker { left: 50%; top: 15%; translate: -50% 0; text-align: center; width: 70%; }
.say-poker .disp { font-size: clamp(30px, 3.4vw, 56px); color: var(--brass-lt); }
.say-poker .cap { font-style: italic; color: var(--brass-lt); }
.board { position: absolute; left: 50%; top: 51%; width: calc(var(--cw) * 3.3); height: calc(var(--cw) * 1.4); translate: -50% 0; }
.board .slot { top: 0; } .s-f1 { left: 0; } .s-f2 { left: calc(var(--cw) * 1.15); } .s-f3 { left: calc(var(--cw) * 2.3); }
.pot { position: absolute; left: 50%; top: 85%; width: 0; height: 0; --chw: calc(var(--cw) * 1.15); }
.pot .chip { position: absolute; width: var(--chw); height: calc(var(--chw) * .86); left: calc(var(--px) * var(--chw) * 1.2 - var(--chw) / 2); top: calc(var(--k) * var(--chw) * -.095 - var(--chw) * .43); filter: drop-shadow(0 3px 3px rgba(0,0,0,.35)); }
.seats { position: absolute; inset: 0; }
.seat { position: absolute; left: calc(50% + cos(var(--a) * 1deg) * 57%); top: calc(50% + sin(var(--a) * 1deg) * 58%); translate: -50% -50%; display: grid; justify-items: center; gap: 6px; }
.seat img { width: var(--face); height: var(--face); border-radius: 50%; box-shadow: 0 0 0 2px var(--brass), 0 8px 18px rgba(0,0,0,.45); }
.plate { font: 600 12px/1 var(--serif); letter-spacing: .16em; color: var(--brass-lt); background: #1a0f0a; padding: 5px 9px 4px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(201,162,94,.5); }
.seat-you { top: calc(50% + 50%); }
.you-cards { display: flex; gap: 3px; } .you-cards i { width: calc(var(--face) * .42); aspect-ratio: 5/7; border-radius: 5px; background: #6b1f24; box-shadow: inset 0 0 0 2px #f4efe6, 0 4px 8px rgba(0,0,0,.4); }
.you-cards i + i { rotate: 8deg; margin-left: -10px; }
.coach-poker { position: absolute; z-index: 7; left: 50%; translate: -50% 0; top: calc(89.5 * var(--sv)); width: max-content; max-width: calc(100vw - 2 * var(--gut)); }
.dim { position: absolute; inset: 0; z-index: 10; background: #000; opacity: 0; pointer-events: none; }
@media (max-width: 699px), (max-aspect-ratio: 6/5) {
  .s-poker { --cw: 48px; --face: 46px; }
  .oval { width: 70vw; height: calc(58 * var(--sv)); top: calc(54 * var(--sv)); }
  .june { height: calc(19 * var(--sv)); top: calc(54 * var(--sv) - 29 * var(--sv) - 17 * var(--sv)); }
  .say-poker { top: 17%; width: 92%; } .say-poker .disp { font-size: 26px; } .say-poker .cap { font-size: 15.5px; }
  .seat { left: calc(50% + cos(var(--a) * 1deg) * 64%); top: calc(50% + sin(var(--a) * 1deg) * 52%); }
  .seat-wide { display: none; } .plate { font-size: 10.5px; padding: 4px 6px 3px; }
  .seat-you { top: 104%; }
  .board { top: 50%; } .pot { top: 76%; }
  .coach-poker { top: calc(87.5 * var(--sv)); width: auto; left: var(--gut); right: var(--gut); translate: none; }
}

/* ---------------------------------------------------------------- 4 · the lamp */
.s-lamp { background: var(--night); }
.dark { position: absolute; inset: 0; background: radial-gradient(70% 70% at 22% 40%, #0d1224 0%, #05070f 70%); }
.halo { position: absolute; left: 17vw; top: calc(40 * var(--sv)); width: 120vmax; height: 120vmax; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,196,110,.26), rgba(255,170,80,.10) 35%, rgba(255,160,70,.03) 60%, transparent 100%); }
.say-lamp { right: 6vw; top: calc(12 * var(--sv)); text-align: right; }
.lamp-big { position: absolute; z-index: 3; left: 17vw; top: calc(40 * var(--sv)); width: clamp(120px, 13vw, 210px); translate: -50% -50%; }
.lamp-lg { width: 100%; height: auto; overflow: visible; }
.coach-lamp { position: absolute; z-index: 5; left: 27vw; top: calc(37 * var(--sv)); }
.sketch { position: absolute; z-index: 4; overflow: visible; }
.sketch-wide { left: 27vw; top: calc(50 * var(--sv)); width: min(64vw, calc(44 * var(--sv) * 860 / 330)); height: auto; }
.sketch-tall { display: none; }
.st { fill: none; stroke: #efe5cf; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .92; }
.st-six { stroke-width: 3.2; } .st-x { stroke: #e9c27e; stroke-width: 2.4; }
.lbl { font: italic 400 21px var(--serif); fill: #efe5cf; } .lbl-over { fill: #e9c27e; } .lbl-big { font-size: 36px; fill: var(--brass-lt); }
.rk { font: italic 600 15px var(--serif); fill: #efe5cf; }
@media (max-width: 699px), (max-aspect-ratio: 6/5) {
  .say-lamp { right: var(--gut); top: calc(9.5 * var(--sv)); }
  .lamp-big { left: 15vw; top: calc(36 * var(--sv)); width: 74px; }
  .halo { left: 15vw; top: calc(36 * var(--sv)); }
  .coach-lamp { left: calc(15vw + 48px); right: var(--gut); top: calc(31 * var(--sv)); padding: 10px 14px; }
  .coach-lamp .lamp-sm { display: none; }
  .sketch-wide { display: none; }
  .sketch-tall { display: block; left: 50%; translate: -50% 0; top: calc(45 * var(--sv)); width: min(92vw, calc(50 * var(--sv) * 360 / 440)); height: auto; }
  .lbl { font-size: 17px; } .lbl-big { font-size: 27px; } .rk { font-size: 11px; }
}

/* ---------------------------------------------------------------- 5 · screens */
.s-screens { background: transparent; }
.card-panel { border-radius: 0; overflow: hidden; }
html.staged .card-panel { border-radius: 30px 30px 0 0; }
.canal { position: absolute; inset: 0; background: radial-gradient(70% 70% at 64% 46%, #1d3670 0%, #13244f 50%, #0a1430 100%); }
.canal::after { content: ""; position: absolute; inset: 0; background: url(../assets/img/grain.png); opacity: .5; }
.phones { position: absolute; inset: 0; }
.device { position: absolute; margin: 0; width: var(--pw); aspect-ratio: 600 / 1264; padding: calc(var(--pw) * .035); border-radius: calc(var(--pw) * .15);
  background: linear-gradient(160deg, #2a2a2e, #0c0c0e 40%, #18181b); box-shadow: inset 0 0 0 1.5px #44444a, 0 40px 70px rgba(0,0,0,.5); }
.screen { position: relative; width: 100%; height: 100%; border-radius: calc(var(--pw) * .12); overflow: hidden; background: #0b2a20; }
.screen img, .screen video { width: 100%; height: 100%; object-fit: cover; }
.front { --pw: min(23vw, calc(76 * var(--sv) * 600 / 1264), 360px); left: 69vw; top: calc(12 * var(--sv)); translate: -50% 0; z-index: 3; }
.device.back { --pw: min(18vw, calc(60 * var(--sv) * 600 / 1264), 280px); top: calc(22 * var(--sv)); z-index: 2; }
.device.back .screen::after { content: ""; position: absolute; inset: 0; background: rgba(5,8,20,.42); }
.back-l { left: 55vw; translate: -50% 0; rotate: -7deg; } .back-r { left: 84vw; translate: -50% 0; rotate: 7deg; }
.say-screens { left: 6vw; bottom: calc(26 * var(--sv)); }
.say-screens .disp { font-size: clamp(40px, 4.3vw, 76px); }
.coach-screens { position: absolute; z-index: 6; left: 6vw; bottom: calc(9 * var(--sv)); max-width: min(32vw, 30rem); }
@media (max-width: 699px), (max-aspect-ratio: 6/5) {
  .say-screens { left: var(--gut); top: calc(9.5 * var(--sv)); bottom: auto; } .say-screens .disp { font-size: 38px; }
  .front { --pw: min(56vw, calc(50 * var(--sv) * 600 / 1264)); left: 50%; top: calc(24 * var(--sv)); }
  .device.back { --pw: min(40vw, calc(40 * var(--sv) * 600 / 1264)); top: calc(34 * var(--sv)); }
  .back-l { left: 12vw; } .back-r { left: 88vw; }
  .coach-screens { left: var(--gut); right: var(--gut); bottom: calc(3 * var(--sv)); max-width: none; }
}

/* ---------------------------------------------------------------- 6 · close */
.s-close { background: var(--navy); }
.night img { position: absolute; left: 0; top: 0; width: 100%; height: calc(70 * var(--sv)); object-fit: cover; object-position: 50% 100%; }
.night::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(70 * var(--sv) + 2px); background: linear-gradient(180deg, rgba(10,16,40,.1) 0%, rgba(10,16,40,.15) 60%, var(--navy) 100%); }
.close-in { position: absolute; left: 0; right: 0; top: calc(56 * var(--sv)); padding: 0 var(--gut); display: grid; justify-items: center; gap: clamp(22px, 3.4svh, 34px); text-align: center; }
.coach-close { max-width: none; padding: 16px 30px 16px 20px; border-radius: 24px; }
.coach-close .lamp-sm { width: 40px; height: 56px; }
.coach-close .coach-line { font-size: clamp(22px, calc(14px + 1.1vw), 32px); }
.honest { margin: 0; font-size: clamp(15px, calc(12px + .35vw), 18px); line-height: 1.6; color: rgba(244,239,230,.88); }
.honest em { font-size: 1.08em; color: var(--cream); }
@media (max-width: 699px), (max-aspect-ratio: 6/5) { .night img { height: calc(52 * var(--sv)); } .night::after { height: calc(52 * var(--sv) + 2px); } .close-in { top: calc(44 * var(--sv)); } .coach-close { padding: 12px 18px 12px 12px; } .coach-close .lamp-sm { width: 30px; height: 42px; } }


/* ---------------------------------------------------------------- staged initial states (set before paint; JS takes over) */
html.staged .s-pit, html.staged .s-poker, html.staged .s-lamp, html.staged .s-screens, html.staged .s-close { visibility: hidden; }
html.staged .coach, html.staged .say { will-change: transform, opacity; }
/* layers only for what moves: the timeline every frame, and the coach band arriving (kept, so its first frame never waits on a new layer) */
html.staged .device, html.staged .arch, html.staged .arch-in, html.staged .panel { will-change: transform; }
html.staged .arch { overflow: hidden; }

@media (prefers-reduced-motion: reduce) { .pill, .pin, .mark, .film-bar > * { transition: none !important; } }

/* chips */
.chip svg { width: 100%; height: 100%; overflow: visible; }
.den { font: 800 21px/1 ui-rounded, "SF Pro Rounded", -apple-system, "Helvetica Neue", Arial, sans-serif; text-anchor: middle; dominant-baseline: central; fill: #fff; transform: translateY(-4px) scaleY(.76); transform-origin: 50px 40px; transform-box: view-box; }
.c-red { color: #b33a3a; --spot: #f1ead9; } .c-white { color: #e8e2d4; --spot: #2f5c9c; } .c-white .den { fill: #2f5c9c; }
.c-green { color: #2e7d5b; --spot: #f1ead9; } .c-black { color: #1f1f22; --spot: #e9e2cf; }

.pit-words, .lamp-in, .screens-words { position: absolute; inset: 0; }
.pit-words { z-index: 6; pointer-events: none; } .pit-words > * { pointer-events: auto; }
.screens-words { z-index: 6; pointer-events: none; }
html.staged .lamp-in, html.staged .screens-words { will-change: transform, opacity; }

/* the hole card: back shown until the flip (flow mode shows the face) */
.flip .face { opacity: 0; } html:not(.staged) .flip .face { opacity: 1; } html:not(.staged) .flip .back { opacity: 0; }
/* without JS there is no pinned pill (the hero and close buttons carry it) and no film controls */
html:not(.js) .pin, html:not(.js) .film-controls { display: none; }

/* =====================================================================
   ROUND 4 overrides
   ===================================================================== */
/* coach band: one line where it fits, balanced where it wraps; never a lone word */
.coach { width: max-content; max-width: min(calc(100vw - 2 * var(--gut)), 44rem); }
.coach-line { text-wrap: balance; }
@media (max-width: 699px), (max-aspect-ratio: 6/5) { .coach { width: auto; } }

/* ---- hero: the film full height; the bar is an overlay band with a scrim, anchored to the bottom */
.film { height: 100%; }
.film-video, .film-poster img, .door-hold img { object-position: 50% 50%; transition: object-position 1.2s var(--ease); }
.film.bleed .film-video, .film.bleed .film-poster img { object-position: 30% 50%; }
.door-hold { position: absolute; inset: 0; opacity: 0; }
.door-hold img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50% !important; }
.film-bar { top: auto; bottom: 0; height: auto; min-height: 64px; padding: 14px var(--gut) max(14px, env(safe-area-inset-bottom)); background: transparent; border-top: 0; }
.film-bar::before { top: auto; bottom: 0; height: 160px; background: linear-gradient(0deg, rgba(10,16,40,.88), rgba(10,16,40,.55) 45%, transparent); opacity: 1; z-index: -1; pointer-events: none; }
.film-bar { z-index: 3; isolation: isolate; }
@media (max-width: 699px), (max-aspect-ratio: 6/5) {
  .s-hero, .film { --bar: 0px; }
  .film-bar { flex-wrap: nowrap; justify-content: space-between; gap: 10px; min-height: 72px; padding: 12px var(--gut) max(12px, env(safe-area-inset-bottom)); }
  .film-bar .pill { min-height: 44px; padding: 0 14px; font-size: 14px; }
  .film-bar .pill { box-shadow: 2px 2px 0 var(--cream); }
  .film-controls { position: absolute; right: var(--gut); bottom: calc(100% + 6px); }
  .film-bar .bar-cta .pill .long, .film-bar .pill { white-space: nowrap; }
  .film-video { height: 100%; }
  .film-poster img { height: 100%; }
}

/* ---- the Pit: the arc between dealer and player; the bet under the hand */
.print { top: calc(46 * var(--sv)); }
.print .p-big { font: 600 26px var(--serif); letter-spacing: .26em; }
.print .p-sm { font: 600 15px var(--serif); letter-spacing: .3em; }
.s-d1 { z-index: 2; } .s-hole { z-index: 1; } .s-d3 { z-index: 3; }
.s-d3 { left: calc(61vw + var(--cw) * .36); top: calc(35.5 * var(--sv) + var(--cw) * .04); }
.s-p1, .s-p2 { top: calc(62 * var(--sv)); } .s-p2 { top: calc(62 * var(--sv) + var(--cw) * .04); }
.s-p3 { top: calc(62 * var(--sv) + var(--cw) * .74); }
.tot-p { top: calc(62 * var(--sv) + var(--cw) * .6); }
.tot-d { left: calc(61vw + var(--cw) * 1.5); }
.ring { left: calc(61vw - var(--cw) * .6); top: calc(86 * var(--sv) - var(--cw) * .6); z-index: 0; }
.hand .chip { left: calc(61vw - var(--cw) * .37 - var(--cw) * .3); top: calc(86 * var(--sv) - var(--cw) * .36); }
.hand [data-chip2] { left: calc(61vw - var(--cw) * .37 + var(--cw) * .3); top: calc(86 * var(--sv) - var(--cw) * .36); }
.hand [data-pay1] { left: calc(61vw - var(--cw) * .37 - var(--cw) * .3); top: calc(86 * var(--sv) - var(--cw) * .45); }
.hand [data-pay2] { left: calc(61vw - var(--cw) * .37 + var(--cw) * .3); top: calc(86 * var(--sv) - var(--cw) * .45); }
.rail { top: calc(92 * var(--sv)); }
.coach-pit { top: calc(56 * var(--sv)); left: 6vw; }
.coach-pit .coach-line { display: grid; }
.coach-pit .cl { grid-area: 1 / 1; }
html:not(.staged) .coach-pit .cl-2 { display: none; }
html.staged .tot em + em + em { position: absolute; left: 0; top: 0; }
html:not(.staged) .tot-d em + em { display: none; } html:not(.staged) .tot-d em + em + em { display: inline; }
html:not(.staged) .hand [data-pay1], html:not(.staged) .hand [data-pay2] { display: none; }
@media (max-width: 699px), (max-aspect-ratio: 6/5) {
  .print { top: calc(48 * var(--sv)); }
  .s-d3 { left: calc(56vw + var(--cw) * .36); top: calc(39 * var(--sv) + var(--cw) * .04); }
  .tot-d { left: calc(56vw + var(--cw) * 1.5); }
  .s-p1, .s-p2 { top: calc(61 * var(--sv)); } .s-p2 { top: calc(61 * var(--sv) + var(--cw) * .04); }
  .s-p3 { top: calc(61 * var(--sv) + var(--cw) * .74); } .tot-p { top: calc(61 * var(--sv) + var(--cw) * .6); }
  .ring { left: calc(56vw - var(--cw) * .6); top: calc(83 * var(--sv) - var(--cw) * .6); }
  .hand .chip, .hand [data-pay1] { left: calc(56vw - var(--cw) * .67); }
  .hand [data-chip2], .hand [data-pay2] { left: calc(56vw - var(--cw) * .07); }
  .hand .chip, .hand [data-chip2] { top: calc(83 * var(--sv) - var(--cw) * .36); }
  .hand [data-pay1], .hand [data-pay2] { top: calc(83 * var(--sv) - var(--cw) * .45); }
  .coach-pit { top: calc(76 * var(--sv)); left: var(--gut); right: auto; max-width: 54vw; padding: 10px 14px 10px 10px; gap: 10px; }
  .coach-pit .coach-line { font-size: 16px; }
  .rail { top: calc(94 * var(--sv)); }
}

/* ---- the Poker Room: headline off the table, a centred pot, your hand */
.say-poker { left: 6vw; top: calc(9 * var(--sv)); translate: none; text-align: left; width: auto; z-index: 8; }
.say-poker .disp { font-size: clamp(34px, 3.9vw, 64px); color: var(--cream); }
.say-poker .cap { font-style: normal; color: var(--cream); }
.oval { top: calc(54 * var(--sv)); height: calc(52 * var(--sv)); width: min(70vw, 1040px); }
.june { height: calc(25 * var(--sv)); top: calc(54 * var(--sv) - 26 * var(--sv) - 23 * var(--sv)); }
.oval-print { position: absolute; left: 50%; top: 66%; width: 46%; translate: -50% 0; overflow: visible; }
.oval-print text { font: 600 15px var(--serif); letter-spacing: .3em; fill: var(--brass); fill-opacity: .6; }
.board { top: 30%; width: calc(var(--cw) * 4.45); }
.s-f4 { left: calc(var(--cw) * 3.45); }
.pot { top: 63%; }
.mine { position: absolute; left: 50%; top: 92%; width: calc(var(--cw) * 1.9); height: calc(var(--cw) * 1.4); translate: -50% -50%; z-index: 2; }
.s-m1 { left: 0; top: 0; rotate: -6deg; } .s-m2 { left: calc(var(--cw) * .82); top: 2px; rotate: 6deg; }
.mine .slot { perspective: 700px; }
.seat-you { top: calc(50% + 50% + 9%); }
.seat-you .plate { position: relative; z-index: 3; }
html:not(.staged) .mine .flip .face { opacity: 1; } html:not(.staged) .mine .flip .back { opacity: 0; }
@media (max-width: 699px), (max-aspect-ratio: 6/5) {
  .say-poker { left: var(--gut); top: calc(9 * var(--sv)); width: auto; } .say-poker .disp { font-size: 30px; } .say-poker .cap { font-size: 16px; }
  .oval { width: 124vw; height: calc(44 * var(--sv)); top: calc(56 * var(--sv)); }
  .june { height: calc(17 * var(--sv)); top: calc(56 * var(--sv) - 22 * var(--sv) - 15 * var(--sv)); }
  .seat { left: calc(50% + cos(var(--a) * 1deg) * 44%); top: calc(50% + sin(var(--a) * 1deg) * 56%); }
  .seat-pearl, .seat-tomas, .seat-bea, .seat-hal { display: grid !important; }
  .seat-bea { --a: 194 !important; } .seat-hal { --a: 346 !important; } .seat-pearl { --a: 224 !important; } .seat-tomas { --a: 316 !important; }
  .s-poker { --face: 50px; --cw: 46px; } .plate { font-size: 12px; padding: 4px 7px 3px; }
  .seat-you { top: 108%; }
  .mine { top: 91%; width: calc(64px * 1.9); height: calc(64px * 1.4); --cw: 64px; }
  .board { top: 28%; } .pot { top: 64%; }
  .oval-print { width: 56%; top: 70%; } .oval-print text { font-size: 13px; }
  .coach-poker { top: calc(86 * var(--sv)); }
}

/* ---- the lamp: one lamp, a speech tail, a rail under it, the reason */
.lamp-rail { position: absolute; z-index: 2; left: 0; width: 28vw; top: calc(54 * var(--sv)); height: 2px; background: linear-gradient(90deg, rgba(201,162,94,.15), var(--brass)); }
.lamp-big { top: calc(54 * var(--sv)); translate: -50% -100%; }
.halo { top: calc(54 * var(--sv) - 8vw); }
.coach-tail { position: absolute; left: 27vw; top: calc(30 * var(--sv)); padding: 14px 24px; }
.coach-tail::before { content: ""; position: absolute; left: -11px; top: 50%; width: 14px; height: 22px; translate: 0 -50%; background: #251b15;
  clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.mini { position: absolute; z-index: 4; left: 29vw; top: calc(40 * var(--sv)); width: clamp(150px, 15vw, 240px); height: auto; overflow: visible; }
.st-mini { stroke-width: 2.2; }
.rk-mini { font-size: 14px; } .lbl-mini { font-size: 18px; } .lbl-stand { fill: var(--brass-lt); }
.sketch-wide { left: 46vw; top: calc(40 * var(--sv)); width: min(50vw, calc(44 * var(--sv) * 860 / 330)); }
.lamp-why { position: absolute; z-index: 5; left: 46vw; top: calc(86 * var(--sv)); margin: 0; font: italic 400 clamp(19px, calc(13px + .6vw), 24px)/1.3 var(--serif); color: var(--brass-lt); max-width: 50vw; text-wrap: balance; }
.say-lamp { top: calc(9 * var(--sv)); }
@media (max-width: 699px), (max-aspect-ratio: 6/5) {
  .lamp-rail { width: 40vw; top: calc(36 * var(--sv)); }
  .lamp-big { top: calc(36 * var(--sv)); left: 16vw; width: 70px; }
  .halo { top: calc(30 * var(--sv)); left: 16vw; }
  .coach-tail { left: calc(16vw + 48px); right: var(--gut); top: calc(26 * var(--sv)); width: auto; padding: 10px 14px; }
  .coach-tail .coach-line { font-size: 16px; }
  .mini { left: auto; right: var(--gut); top: calc(37 * var(--sv)); width: 132px; }
  .sketch-tall { top: calc(52 * var(--sv)); width: min(84vw, calc(38 * var(--sv) * 360 / 560)); }
  .sketch-tall .rk { font-size: 14px; } .sketch-tall .lbl { font-size: 16px; } .sketch-tall .lbl-big { font-size: 26px; }
  .lamp-why { left: var(--gut); right: var(--gut); max-width: none; top: auto; bottom: calc(4 * var(--sv)); font-size: 17px; text-align: center; }
}

/* ---- screens: the headline high, a better device frame */
.say-screens { top: calc(22 * var(--sv)); bottom: auto; }
.say-screens .disp { font-size: clamp(44px, 5vw, 86px); }
.coach-screens { top: calc(52 * var(--sv)); bottom: auto; }
.device { background: linear-gradient(160deg, #8d8a86 0%, #3a3936 8%, #1a1a1c 30%, #2b2a29 70%, #6e6b67 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), inset 0 0 0 calc(var(--pw) * .012) #0b0b0c, 0 40px 70px rgba(0,0,0,.5); }
.device .btn { position: absolute; width: 3px; background: linear-gradient(90deg, #77736e, #3a3936); border-radius: 2px; }
.device .b1 { left: -3px; top: 20%; height: 5%; } .device .b2 { left: -3px; top: 28%; height: 9%; } .device .b3 { right: -3px; top: 25%; height: 13%; }
@media (max-width: 699px), (max-aspect-ratio: 6/5) {
  .say-screens { top: calc(9 * var(--sv)); }
  .coach-screens { top: auto; bottom: calc(3 * var(--sv)); }
}

/* ---- close: the door stays clear and lit; the line is the heading */
.close-in { top: calc(64 * var(--sv)); }
.door-glow { position: absolute; left: 50%; top: calc(54 * var(--sv)); width: 34vw; height: 30vw; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,214,140,.32), rgba(255,190,100,.12) 50%, transparent 100%); opacity: 0; mix-blend-mode: screen; pointer-events: none; }
html:not(.staged) .door-glow { opacity: 1; }
.coach-bare { background: none; box-shadow: none; padding: 0; gap: 16px; }
.coach-bare .coach-line { color: var(--cream); font-size: clamp(26px, calc(14px + 1.6vw), 40px); text-shadow: 0 2px 18px rgba(0,0,0,.6); }
.honest { font-size: 15px; color: var(--cream); }
.honest em { font-size: 20px; display: inline-block; margin-bottom: 4px; }
@media (max-width: 699px), (max-aspect-ratio: 6/5) {
  .close-in { top: calc(54 * var(--sv)); }
  .door-glow { top: calc(41 * var(--sv)); width: 70vw; height: 60vw; }
  .coach-bare .coach-line { font-size: 23px; }
  .honest em { font-size: 18px; }
}

/* ---- marquee: a bulb chase along the edge */
.marquee-edge .glint { display: none; }
.marquee-edge .bulbs { position: absolute; left: 0; top: -2px; width: 100%; height: 7px;
  background: radial-gradient(circle at 3px 3.5px, #fff3d0 0, #ffd27a 2px, rgba(255,190,90,0) 3.5px) 0 0 / 28px 7px repeat-x; filter: drop-shadow(0 0 4px rgba(255,200,110,.8)); }

/* ---- no-JS: the mark scrolls away with the hero */
html:not(.js) .top { position: absolute; }
html.staged .scene.warm { visibility: visible; opacity: .001; }

/* r4 pit layout: arc between dealer and player, bet in front of the hand */
.s-pit { --cw: clamp(64px, 6.6vw, 104px); }
.print { top: calc(49 * var(--sv)); width: min(58vw, 860px); translate: -45% 0; }
.s-d1, .s-hole { top: calc(34 * var(--sv)); } .s-d3 { top: calc(34 * var(--sv) + var(--cw) * .04); }
.tot-d { top: calc(34 * var(--sv) + var(--cw) * .6); }
.s-p1, .s-p2 { top: calc(67 * var(--sv)); } .s-p2 { top: calc(67 * var(--sv) + var(--cw) * .04); }
.s-p3 { top: calc(67 * var(--sv) + var(--cw) * .74); } .tot-p { top: calc(67 * var(--sv) + var(--cw) * .6); }
.ring { top: calc(89 * var(--sv) - var(--cw) * .6); left: calc(61vw - var(--cw) * 1.75); }
.hand .chip, .hand [data-pay1] { left: calc(61vw - var(--cw) * 1.48); }
.hand [data-chip2], .hand [data-pay2] { left: calc(61vw - var(--cw) * .9); }
.ring { width: calc(var(--cw) * 1.7); left: calc(61vw - var(--cw) * 2.05); top: calc(89 * var(--sv) - var(--cw) * .85); height: calc(var(--cw) * 1.7); }
.hand .chip, .hand [data-chip2] { top: calc(89 * var(--sv) - var(--cw) * .36); }
.hand [data-pay1], .hand [data-pay2] { top: calc(89 * var(--sv) - var(--cw) * .45); }
.rail { top: calc(95.5 * var(--sv)); }
.hand .chip, .hand [data-chip2], .hand [data-pay1], .hand [data-pay2] { left: auto; }
.hand .chip { left: calc(61vw - var(--cw) * 1.6); } .hand [data-chip2] { left: calc(61vw - var(--cw) * 1.02); }
.hand [data-pay1] { left: calc(61vw - var(--cw) * 1.6); } .hand [data-pay2] { left: calc(61vw - var(--cw) * 1.02); }
.oval-print text { font-size: 19px; fill-opacity: .75; }
@media (max-width: 699px), (max-aspect-ratio: 6/5) {
  .s-pit { --cw: 70px; }
  .print { top: calc(47 * var(--sv)); width: 120vw; translate: -50% 0; }
  .s-d1, .s-hole { top: calc(37 * var(--sv)); } .s-d3 { top: calc(37 * var(--sv) + var(--cw) * .04); } .tot-d { top: calc(37 * var(--sv) + var(--cw) * .6); }
  .s-p1, .s-p2 { top: calc(60 * var(--sv)); } .s-p2 { top: calc(60 * var(--sv) + var(--cw) * .04); }
  .s-p3 { top: calc(60 * var(--sv) + var(--cw) * .74); } .tot-p { top: calc(60 * var(--sv) + var(--cw) * .6); }
  .ring { left: calc(56vw + var(--cw) * 1.0); top: calc(80 * var(--sv) - var(--cw) * .85); }
  .hand .chip, .hand [data-pay1] { left: calc(56vw + var(--cw) * 1.25); } .hand [data-chip2], .hand [data-pay2] { left: calc(56vw + var(--cw) * 1.83); }
  .hand .chip, .hand [data-chip2] { top: calc(80 * var(--sv) - var(--cw) * .36); } .hand [data-pay1], .hand [data-pay2] { top: calc(80 * var(--sv) - var(--cw) * .45); }
  .ring { width: calc(var(--cw) * 1.75); height: calc(var(--cw) * 1.75); left: calc(56vw + var(--cw) * .95); }
  .oval-print text { font-size: 16px; }
}
.s-d3 { left: calc(61vw + var(--cw) * .92); } .tot-d { left: calc(61vw + var(--cw) * 2.05); }
@media (max-width: 699px), (max-aspect-ratio: 6/5) { .s-d3 { left: calc(56vw + var(--cw) * .92); } .tot-d { left: calc(56vw + var(--cw) * 2.05); } }
@media (max-width: 699px), (max-aspect-ratio: 6/5) {
  .ring { left: 6vw; top: calc(68 * var(--sv) - var(--cw) * .85); }
  .hand .chip, .hand [data-pay1] { left: calc(6vw + var(--cw) * .25); } .hand [data-chip2], .hand [data-pay2] { left: calc(6vw + var(--cw) * .83); }
  .hand .chip, .hand [data-chip2] { top: calc(68 * var(--sv) - var(--cw) * .36); } .hand [data-pay1], .hand [data-pay2] { top: calc(68 * var(--sv) - var(--cw) * .45); }
  .coach-pit { top: calc(25 * var(--sv)); max-width: 58vw; }
  .seat-bea { --a: 228 !important; } .seat-pearl { --a: 252 !important; } .seat-tomas { --a: 288 !important; } .seat-hal { --a: 312 !important; }
  .seat { left: calc(50% + cos(var(--a) * 1deg) * 46%); top: calc(50% + sin(var(--a) * 1deg) * 58%); }
  .lamp-rail { top: calc(44 * var(--sv)); } .lamp-big { top: calc(44 * var(--sv)); } .halo { top: calc(38 * var(--sv)); }
  .coach-tail { top: calc(32 * var(--sv)); }
  .mini { top: calc(45 * var(--sv)); width: 120px; }
  .sketch-tall { top: calc(57 * var(--sv)); width: min(80vw, calc(32 * var(--sv) * 360 / 560)); }
  .lamp-why { bottom: calc(2.5 * var(--sv)); font-size: 16px; }
}
.s-close .arch-in { background: var(--navy); }
.mini { width: clamp(190px, 17vw, 280px); }
@media (max-width: 699px), (max-aspect-ratio: 6/5) { .coach-pit { top: auto; bottom: calc(9 * var(--sv)); left: var(--gut); right: var(--gut); max-width: none; } .rail { top: calc(96 * var(--sv)); } }
/* LCP: Chrome ignores an image that exactly fills the viewport; the poster stops 2px short (under the scrim) so it counts */
.film-poster img { height: calc(100% - 2px); }

/* =====================================================================
   ROUND 5
   ===================================================================== */
picture.lz { display: contents; }

/* hero bridge line: the display face from second one */
.bridge { display: block; font: 400 12px/1 var(--disp); letter-spacing: .3em; color: var(--brass-lt); font-style: normal; margin-bottom: 7px; }
@media (max-width: 699px), (max-aspect-ratio: 6/5) { .bridge { font-size: 10.5px; letter-spacing: .24em; margin-bottom: 5px; } }

/* ---- Pit: room for Rosa, the bet centred under the hand, totals in pills */
.s-pit { --cw: clamp(60px, 6vw, 96px); }
.rosa { height: calc(35 * var(--sv)); top: calc(-2 * var(--sv)); left: 59vw; }
.shoe { left: 73vw; top: calc(24 * var(--sv)); }
.s-d1, .s-hole { top: calc(35 * var(--sv)); } .s-d3 { top: calc(35 * var(--sv) + var(--cw) * .04); }
.s-p1, .s-p2 { top: calc(60.5 * var(--sv)); } .s-p2 { top: calc(60.5 * var(--sv) + var(--cw) * .04); }
.s-p3 { top: calc(60.5 * var(--sv) + var(--cw) * .74); }
.print { top: calc(47 * var(--sv)); }
.ring { width: calc(var(--cw) * 1.5); height: calc(var(--cw) * 1.5); left: calc(61vw - var(--cw) * .75); top: calc(88 * var(--sv) - var(--cw) * .75); }
.hand .chip, .hand [data-pay1] { left: calc(61vw - var(--cw) * .67); }
.hand [data-chip2], .hand [data-pay2] { left: calc(61vw - var(--cw) * .07); }
.hand .chip, .hand [data-chip2] { top: calc(88 * var(--sv) - var(--cw) * .36); }
.hand [data-pay1], .hand [data-pay2] { top: calc(88 * var(--sv) - var(--cw) * .48); }
.pill-t { font: 600 15px/1 var(--serif); letter-spacing: .02em; color: var(--cream); background: rgba(5,30,22,.78); padding: 6px 11px 5px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(201,162,94,.55); text-shadow: none; translate: -50% 0; min-width: 2.6em; text-align: center; }
.pill-t em { display: block; }
html.staged .pill-t em + em { position: absolute; inset: 6px 0 0; }
.tot-d { left: calc(61vw + var(--cw) * .4); top: calc(35 * var(--sv) + var(--cw) * 1.5); }
.tot-p { left: calc(61vw); top: calc(60.5 * var(--sv) - 34px); }
.coach-pit { overflow: hidden; }
@media (max-width: 699px), (max-aspect-ratio: 6/5) {
  .s-pit { --cw: 66px; }
  .rosa { left: 76vw; height: calc(20 * var(--sv)); top: calc(16 * var(--sv)); }
  .shoe { left: 52vw; top: calc(30.5 * var(--sv)); }
  .s-d1, .s-hole { top: calc(39 * var(--sv)); } .s-d3 { top: calc(39 * var(--sv) + var(--cw) * .04); }
  .tot-d { left: calc(56vw + var(--cw) * .4); top: calc(39 * var(--sv) + var(--cw) * 1.5); }
  .s-p1, .s-p2 { top: calc(60 * var(--sv)); } .s-p2 { top: calc(60 * var(--sv) + var(--cw) * .04); }
  .s-p3 { top: calc(60 * var(--sv) + var(--cw) * .74); }
  .tot-p { left: 56vw; top: calc(60 * var(--sv) - 32px); }
  .ring { left: calc(56vw - var(--cw) * .75); top: calc(80 * var(--sv) - var(--cw) * .75); }
  .hand .chip, .hand [data-pay1] { left: calc(56vw - var(--cw) * .67); } .hand [data-chip2], .hand [data-pay2] { left: calc(56vw - var(--cw) * .07); }
  .hand .chip, .hand [data-chip2] { top: calc(80 * var(--sv) - var(--cw) * .36); } .hand [data-pay1], .hand [data-pay2] { top: calc(80 * var(--sv) - var(--cw) * .48); }
  .coach-pit { bottom: calc(5.5 * var(--sv)); }
}

/* ---- Poker: tighter table, bigger cards, stacks, button, blinds, a leader to YOU */
.s-poker { --cw: clamp(56px, 5.4vw, 88px); }
.oval { width: min(60vw, 900px); height: calc(46 * var(--sv)); top: calc(55 * var(--sv)); }
.june { top: calc(55 * var(--sv) - 23 * var(--sv) - 23 * var(--sv)); }
.board { top: 30%; } .pot { top: 62%; }
.seat { left: calc(50% + cos(var(--a) * 1deg) * 58%); top: calc(50% + sin(var(--a) * 1deg) * 60%); }
.stk { position: absolute; left: 50%; top: 50%; translate: calc(-50% - cos(var(--a) * 1deg) * var(--face) * 1.05) calc(-50% - sin(var(--a) * 1deg) * var(--face) * .95); width: 22px; height: 18px; }
.stk i { position: absolute; left: 0; width: 22px; height: 11px; border-radius: 50%; background: #b33a3a; box-shadow: inset 0 0 0 2px #f1ead9, 0 2px 0 #7d2424; }
.stk i + i { top: -5px; background: #2e7d5b; box-shadow: inset 0 0 0 2px #f1ead9, 0 2px 0 #1d5a40; }
.extras { position: absolute; inset: 0; }
.dbtn { position: absolute; left: 63%; top: 84%; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #f4efe6; color: #15110b; font: 700 13px/1 var(--serif); box-shadow: 0 3px 6px rgba(0,0,0,.4), inset 0 0 0 2px #c9c1ae; }
.blind { position: absolute; width: calc(var(--cw) * .55); height: calc(var(--cw) * .48); }
.blind .chip { position: absolute; left: 0; width: 100%; height: 100%; bottom: calc(var(--k, 0) * var(--cw) * .05); }
.blind-sb { left: 31%; top: 72%; } .blind-bb { left: 19%; top: 55%; }
.mine { --cw2: calc(var(--cw) * 1.0); }
.leader { position: absolute; z-index: 6; left: 50%; width: 1px; top: calc(55 * var(--sv) + 23 * var(--sv) + var(--cw) * .55); height: calc(89.5 * var(--sv) - 55 * var(--sv) - 23 * var(--sv) - var(--cw) * .55); background: linear-gradient(180deg, var(--brass-lt), rgba(201,162,94,.4)); transform-origin: 50% 100%; }
html:not(.staged) .leader { display: none; }
@media (max-width: 699px), (max-aspect-ratio: 6/5) {
  .s-poker { --cw: 50px; }
  .oval { width: 120vw; height: calc(42 * var(--sv)); top: calc(56 * var(--sv)); }
  .stk { display: none; } .dbtn { left: 66%; top: 80%; width: 22px; height: 22px; font-size: 11px; }
  .blind-sb { left: 34%; top: 76%; } .blind-bb { left: 26%; top: 60%; }
  .leader { top: calc(56 * var(--sv) + 21 * var(--sv) + 46px); height: calc(86 * var(--sv) - 56 * var(--sv) - 21 * var(--sv) - 46px); }
}

/* ---- Lamp: desk lower, a readable mini sketch, the why under the payoff */
.lamp-rail, .lamp-big { top: calc(60 * var(--sv)); }
.halo { top: calc(60 * var(--sv) - 8vw); }
.coach-tail { top: calc(36 * var(--sv)); }
.mini { left: 28vw; top: calc(45 * var(--sv)); width: clamp(220px, 17vw, 300px); }
.rk-mini { font-size: 20px; } .lbl-mini { font-size: 21px; } .lbl-stand { font-size: 20px; letter-spacing: .12em; }
.st-stamp { stroke: var(--brass-lt); }
.sketch-wide { top: calc(46 * var(--sv)); left: 47vw; width: min(48vw, calc(40 * var(--sv) * 860 / 330)); }
.lamp-why { top: calc(46 * var(--sv) + min(48vw, calc(40 * var(--sv) * 860 / 330)) * 330 / 860 + 14px); left: 47vw; width: min(48vw, calc(40 * var(--sv) * 860 / 330)); max-width: none; text-align: center; font-size: clamp(20px, calc(13px + .7vw), 24px); }
@media (max-width: 699px), (max-aspect-ratio: 6/5) {
  .lamp-rail, .lamp-big { top: calc(42 * var(--sv)); } .halo { top: calc(36 * var(--sv)); }
  .coach-tail { top: calc(29.5 * var(--sv)); }
  .mini { left: auto; right: var(--gut); top: calc(40 * var(--sv)); width: 150px; }
  .rk-mini { font-size: 18px; }
  .sketch-tall { top: calc(59 * var(--sv)); width: min(78vw, calc(30 * var(--sv) * 360 / 560)); }
  .lamp-why { top: auto; bottom: calc(2.5 * var(--sv)); left: var(--gut); width: auto; right: var(--gut); font-size: 16.5px; }
}

/* ---- Screens: a full left column, the band clear of the phones */
.say-screens { top: calc(18 * var(--sv)); }
.coach-screens { top: calc(44 * var(--sv)); max-width: 36vw; width: auto; }
.proof { position: absolute; z-index: 6; left: 6vw; top: calc(62 * var(--sv)); width: 36vw; margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; pointer-events: auto; }
.proof li { position: relative; padding-left: 26px; font-size: clamp(17px, calc(12px + .55vw), 20px); line-height: 1.4; color: var(--cream); }
.proof li::before { content: ""; position: absolute; left: 2px; top: .52em; width: 10px; height: 10px; rotate: 45deg; background: var(--brass); }
@media (max-width: 699px), (max-aspect-ratio: 6/5) {
  .proof { display: none; }
  .coach-screens { max-width: none; }
}
html:not(.staged) .proof { display: grid; }
@media (max-width: 699px), (max-aspect-ratio: 6/5) { html:not(.staged) .proof { position: relative; left: auto; top: auto; width: auto; padding: 0 var(--gut); margin-top: 8px; } }

/* ---- Close on phones: the lamp above its line */
@media (max-width: 699px), (max-aspect-ratio: 6/5) {
  .coach-bare { flex-direction: column; gap: 8px; }
  .coach-bare .lamp-sm { width: 30px; height: 42px; }
}
@media (max-width: 699px), (max-aspect-ratio: 6/5) {
  .seat { left: calc(50% + cos(var(--a) * 1deg) * 46%); top: calc(50% + sin(var(--a) * 1deg) * 58%); }
  .june { height: calc(15 * var(--sv)); top: calc(56 * var(--sv) - 21 * var(--sv) - 13 * var(--sv)); }
  .say-poker { top: calc(8.5 * var(--sv)); }
  .coach-screens { top: auto; bottom: calc(3 * var(--sv)); width: auto; }
  .mini { width: 132px; }
}
.blind-sb { left: 34%; top: 80%; } .blind-bb { left: 22%; top: 69%; }
.oval-print { top: 74%; }
.stk { width: 26px; height: 22px; } .stk i { width: 26px; height: 13px; } .stk i + i { top: -6px; }
@media (max-width: 699px), (max-aspect-ratio: 6/5) { .blind-sb { left: 34%; top: 80%; } .blind-bb { left: 18%; top: 66%; } .oval-print { top: 76%; } }
.bridge { white-space: nowrap; }
@media (max-width: 699px), (max-aspect-ratio: 6/5) { .bridge { font-size: 10px; letter-spacing: .16em; } html:not(.staged) .proof, .proof { display: none !important; } }

/* =====================================================================
   ROUND 6
   ===================================================================== */
html.staged .pill-t { visibility: hidden; }
.tot-p { left: calc(61vw + var(--cw) * 1.25); top: calc(60.5 * var(--sv) + var(--cw) * .55); translate: 0 0; }
@media (min-width: 700px) { .say-screens { top: calc(18 * var(--sv)); } }
@media (max-width: 699px), (max-aspect-ratio: 6/5) { .say-screens { top: calc(9 * var(--sv)); } .tot-p { left: calc(56vw + var(--cw) * 1.25); top: calc(60 * var(--sv) + var(--cw) * .55); } }
/* poker: the board clear of the pot; YOU on the button */
.board { top: 22%; } .pot { top: 70%; }
.pstack { position: absolute; width: var(--chw); height: calc(var(--chw) * .86); left: calc(var(--px) * var(--chw) * 1.1 - var(--chw) / 2); top: calc(var(--chw) * -.43); filter: drop-shadow(0 3px 3px rgba(0,0,0,.35)); }
.pstack .chip { position: absolute; left: 0; width: 100%; height: 100%; top: calc(var(--k) * var(--chw) * -.095); filter: none; }
.pot { --chw: calc(var(--cw) * .95); }
.dbtn { left: 58%; top: 90%; }
.blind-sb { left: 33%; top: 82%; } .blind-bb { left: 17%; top: 70%; }
.lbl-note { font-size: 19px; fill: var(--brass-lt); opacity: .9; }
.lbl-more { font-size: 30px; }
@media (max-width: 699px), (max-aspect-ratio: 6/5) {
  .board { top: 22%; } .pot { top: 72%; }
  .dbtn { left: 58%; top: 88%; }
  .sketch-tall { top: calc(57 * var(--sv)); width: min(86vw, calc(34 * var(--sv) * 360 / 520)); }
  .sketch-tall .rk { font-size: 15px; } .sketch-tall .lbl-note { font-size: 16px; }
}
@media (min-width: 700px) { .coach-pit .cl { white-space: nowrap; } }
@media (max-width: 699px), (max-aspect-ratio: 6/5) {
  .sketch-tall { top: calc(54.5 * var(--sv)); width: min(88vw, calc(37 * var(--sv) * 360 / 418)); }
  .sketch-tall .st-six { stroke-width: 2.6; }
  .sketch-tall .rk { font-size: 15px; } .sketch-tall .lbl { font-size: 17px; } .sketch-tall .lbl-big { font-size: 25px; } .sketch-tall .lbl-note { font-size: 16px; }
  .lamp-why { bottom: calc(1.5 * var(--sv)); }
}
@media (max-width: 699px), (max-aspect-ratio: 6/5) { .mini g path:nth-child(3), .mini g path:nth-child(4) { display: none; } }
/* DEVICE FRAME SLOT: when Apple's iPhone 17 Pro frame arrives as assets/img/iphone-frame.webp
   (transparent screen), uncomment this one rule; the screen and video already sit inside. */
/* .device { background: url(img/iphone-frame.webp) center / 100% 100% no-repeat; box-shadow: none; padding: calc(var(--pw) * .052); } .device .btn { display: none; } */

/* =====================================================================
   ROUND 7: poker in turn order; phone pit pill
   ===================================================================== */
.holes { position: absolute; display: flex; gap: 2px; translate: -50% -50%; }
.holes i { display: block; width: calc(var(--cw) * .46); aspect-ratio: 5 / 7; border-radius: 4px; background: #6b1f24; box-shadow: inset 0 0 0 2px #f4efe6, 0 3px 6px rgba(0,0,0,.4); }
.holes i + i { rotate: 9deg; margin-left: calc(var(--cw) * -.2); }
.holes-bea { left: 11%; top: 79%; } .holes-hal { left: 89%; top: 79%; }
.bet { position: absolute; width: calc(var(--cw) * .6); height: calc(var(--cw) * .52); translate: -50% -50%; display: block; }
.bet .chip, .bet b .chip { position: absolute; left: 0; width: 100%; height: 100%; top: calc(var(--k, 0) * var(--cw) * -.055); }
.bet b { position: absolute; inset: 0; } .bet b + b { left: 110%; }
.bet-hal { left: 79%; top: 71%; } .bet-bea { left: 23%; top: 76%; }
.blind-bb { left: 18%; top: 66%; }
html:not(.staged) .holes, html:not(.staged) .bet, html:not(.staged) .blind { display: none; }
@media (max-width: 699px), (max-aspect-ratio: 6/5) {
  .seat-ernie { display: grid !important; --a: 118 !important; }
  .holes-bea { left: 22%; top: 14%; } .holes-hal { left: 78%; top: 14%; }
  .holes i { width: 22px; }
  .bet-hal { left: 70%; top: 22%; } .bet-bea { left: 26%; top: 23%; }
  .blind-bb { left: 34%; top: 15%; } .blind-sb { left: 34%; top: 84%; }
  .tot-d { top: calc(37 * var(--sv) + var(--cw) * 1.45 + 4px); left: calc(56vw + var(--cw) * 1.6); }
}
@media (max-width: 699px), (max-aspect-ratio: 6/5) { .tot-d { left: calc(56vw + var(--cw) * 2.08); top: calc(37 * var(--sv) + var(--cw) * .5); translate: 0 0; } }
/* r7 final: Ernie's cards; the phone dealer pill under the dealer's cards, clear of the edge */
.holes-ernie { left: 30%; top: 90%; }
@media (max-width: 699px), (max-aspect-ratio: 6/5) {
  .holes-ernie { left: 37%; top: 92%; }
  .tot-d { left: calc(56vw + var(--cw) * 1.25); top: calc(37 * var(--sv) + var(--cw) * 1.45 + 4px); }
}

/* =====================================================================
   V2 · the coach exactly as in the app
   CoachRailView + RailLeather: a band of dark leather lit on its crown,
   one stitched welt 4.5 pt in (0.85 pt, dashes 2.4/1.9, #D8BE8C at 50%),
   a soft shadow (0.6, 9 pt, y 4), corner radius half the 56 pt tab, words
   9 pt inside top and bottom, SF body regular, cream, upright, 3 pt extra
   leading. The lamp sits beside the band. Arrival: the band opens out of
   the lamp's tab (spring 0.36, no bounce), the words follow 0.16 s later,
   fading up 6 pt.
   ===================================================================== */
:root { --sf: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tab: 56px; --rail-fs: 17px; --rail-lh: 1.47; }
@media (min-width: 700px) { :root { --tab: clamp(56px, 4.2vw, 66px); --rail-fs: clamp(17px, calc(10px + .62vw), 20px); } }
html .coach { display: block; position: absolute; width: max-content; max-width: min(calc(100vw - 2 * var(--gut)), 40rem);
  padding: 0 0 0 calc(var(--tab) * .62); margin: 0; gap: 0; background: none; box-shadow: none; border-radius: 0; overflow: visible; }
html .coach .band { position: relative; min-height: var(--tab); border-radius: calc(var(--tab) / 2); display: flex; align-items: center;
  padding: 9px calc(var(--tab) * .42) 9px calc(var(--tab) * .62);
  background:
    radial-gradient(70% 140% at 0% 50%, rgba(255,186,104,.30), rgba(255,170,80,.10) 45%, transparent 75%),
    url(../assets/img/grain.png),
    linear-gradient(180deg, #3A2E25 0%, #241C16 10%, #16110D 45%, #0D0A08 85%, #050403 100%);
  background-size: auto, 160px 160px, auto;
  box-shadow: inset 0 -3px 3px rgba(0,0,0,.5), 0 4px 9px rgba(0,0,0,.6); }
html .coach .welt { position: absolute; inset: 4.5px; border-radius: calc(var(--tab) / 2 - 4.5px); border: .9px dashed rgba(216,190,140,.5);
  box-shadow: 0 1px 0 rgba(0,0,0,.6); pointer-events: none; }
html .coach .coach-line { margin: 0; font: 400 var(--rail-fs)/var(--rail-lh) var(--sf); letter-spacing: -.012em; color: #F4EFE6; font-style: normal;
  text-wrap: balance; text-shadow: none; -webkit-font-smoothing: antialiased; }
html .coach .lamp-sm { position: absolute; z-index: 2; left: 0; top: 50%; width: calc(var(--tab) * .95); height: calc(var(--tab) * 1.33); translate: 0 -54%;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.45)); }
html .coach-close .coach-line { font-size: calc(var(--rail-fs) * 1.25); }
html .coach-close { --tab: clamp(62px, 5vw, 76px); }
html .coach-lamp { padding-left: 0; }
html .coach-lamp .band { padding-left: calc(var(--tab) * .42); }
html .coach-pit .coach-line { display: grid; } html .coach-pit .cl { grid-area: 1 / 1; white-space: normal; }
@media (min-width: 700px) { html .coach-pit .cl { white-space: nowrap; } }
.coach-tail::before { display: none; }

/* arrival (staged): the band opens out of the lamp's tab; the words follow */
html.staged .coach .band { clip-path: inset(0 calc(100% - var(--tab)) 0 0 round calc(var(--tab) / 2)); opacity: 0;
  transition: clip-path .36s cubic-bezier(.22,.9,.24,1), opacity .12s ease-out; }
html.staged .coach .lamp-sm { opacity: 0; transform: scale(.9); transition: opacity .22s ease-out, transform .36s cubic-bezier(.22,.9,.24,1); }
html.staged .coach .coach-line { opacity: 0; transform: translateY(6px); transition: opacity .22s ease-out .16s, transform .22s ease-out .16s; }
html.staged .coach.on .band { clip-path: inset(0 0 0 0 round calc(var(--tab) / 2)); opacity: 1; }
html.staged .coach.on .lamp-sm { opacity: 1; transform: none; }
html.staged .coach.on .coach-line { opacity: 1; transform: none; }
html.staged .coach-lamp .band { clip-path: inset(0 100% 0 0 round calc(var(--tab) / 2)); }
html.staged .coach-lamp.on .band { clip-path: inset(0 0 0 0 round calc(var(--tab) / 2)); }
/* a replacing line: the old words fade where they stand, the band takes the new shape, the new words fade up */
html .coach-pit .band { transition: clip-path .36s cubic-bezier(.22,.9,.24,1), opacity .12s ease-out, width .34s cubic-bezier(.22,.9,.24,1); }
html .coach-pit .cl { transition: opacity .2s ease-out, transform .22s ease-out; }
html .coach-pit .cl-2 { opacity: 0; transform: translateY(6px); }
html .coach-pit.two .cl-1 { opacity: 0; transition-duration: .12s; }
html .coach-pit.two .cl-2 { opacity: 1; transform: none; transition-delay: .16s; }
html:not(.js) .coach-pit .cl-1 { opacity: 0; } html:not(.js) .coach-pit .cl-2 { opacity: 1; transform: none; }

/* phones: the band runs gutter to gutter */
@media (max-width: 699px), (max-aspect-ratio: 6/5) {
  html .coach { width: auto; max-width: none; left: var(--gut) !important; right: var(--gut) !important; translate: none !important; }
  html .coach-pit .cl { white-space: normal; }
}

/* =====================================================================
   V2 · the playable double
   ===================================================================== */
.mychip { position: static; appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: grab; }
.mychip:focus-visible [data-chip2] { outline: 2px solid var(--brass-lt); outline-offset: 4px; border-radius: 50%; }
.hand [data-chip2] { touch-action: none; }
.mychip-label { position: absolute; z-index: 3; font: 500 13px/1.2 var(--sf); color: rgba(244,239,230,.82); text-align: center; width: 6em; translate: -50% 0; white-space: normal; opacity: 0; transition: opacity .3s ease; }
html.staged .s-pit.ask .mychip-label, html.flow-pre .s-pit:not(.doubled) .mychip-label { opacity: 1; }
.s-pit.ask [data-chip2] { animation: offer 1.6s ease-in-out infinite; }
@keyframes offer { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
html:not(.js) .mychip-label { display: none; }
.hand [data-chip2] { left: calc(61vw + var(--cw) * 1.3); top: calc(88 * var(--sv) - var(--cw) * .36); }
.mychip-label { left: calc(61vw + var(--cw) * 1.67); top: calc(88 * var(--sv) + var(--cw) * .36); }
@media (max-width: 699px), (max-aspect-ratio: 6/5) {
  .hand [data-chip2] { left: calc(56vw + var(--cw) * 1.2); top: calc(80 * var(--sv) - var(--cw) * .36); }
  .mychip-label { left: calc(56vw + var(--cw) * 1.57); top: calc(80 * var(--sv) + var(--cw) * .36); }
}
/* flow mode with JS (reduced motion): the hand waits at the decision; a tap shows the rest */
html:not(.js) .hand [data-chip2], html.flow-pre .s-pit.doubled .hand [data-chip2] { left: calc(61vw - var(--cw) * .07); }
@media (max-width: 699px), (max-aspect-ratio: 6/5) { html:not(.js) .hand [data-chip2], html.flow-pre .s-pit.doubled .hand [data-chip2] { left: calc(56vw - var(--cw) * .07); } }
html.flow-pre .s-pit .s-p3, html.flow-pre .s-pit .s-d3, html.flow-pre .s-pit [data-pay1], html.flow-pre .s-pit [data-pay2] { transition: opacity .4s ease; }
html.flow-pre .s-pit:not(.doubled) .s-p3, html.flow-pre .s-pit:not(.doubled) .s-d3 { opacity: 0; }
html.flow-pre .s-pit:not(.doubled) .flip .face { opacity: 0; } html.flow-pre .s-pit:not(.doubled) .flip .back { opacity: 1; }
html.flow-pre .s-pit.doubled [data-pay1], html.flow-pre .s-pit.doubled [data-pay2] { display: block; }
html.flow-pre .s-pit:not(.doubled) .tot-p em:first-child { display: inline; } html.flow-pre .s-pit:not(.doubled) .tot-p em + em { display: none; }
html.flow-pre .s-pit:not(.doubled) .tot-d em:first-child { display: inline; } html.flow-pre .s-pit:not(.doubled) .tot-d em + em + em { display: none; }
html.flow-pre .s-pit.doubled .mychip { cursor: default; }
html.flow-pre .s-pit:not(.doubled) [data-chip2] { cursor: pointer; }
@media (min-width: 700px) { :root { --tab: clamp(58px, 4.5vw, 72px); --rail-fs: clamp(17px, calc(9px + .72vw), 22px); } }
html .close-in .coach { position: relative; left: auto !important; right: auto !important; }
@media (max-width: 699px), (max-aspect-ratio: 6/5) { html .close-in .coach { width: 100%; } }
html .coach-screens { max-width: 36vw; }
@media (max-width: 699px), (max-aspect-ratio: 6/5) { html .coach-screens { max-width: none; } }
@media (min-width: 700px) { .close-in { top: calc(68 * var(--sv)); } }
.honest em { font-style: normal; }
.lamp-why { font: 400 clamp(18px, calc(10px + .8vw), 23px)/1.4 var(--sf); color: #F4EFE6; letter-spacing: -.01em; }
.pill-t { font-family: var(--sf); font-weight: 600; letter-spacing: 0; }

/* arrival, compositor-only (a clip-path reveal cost 33 ms frames on a 4x-throttled phone):
   the lamp lights, the band settles out of it, the words follow 0.16 s later, up 6 pt */
html.staged .coach .band, html.staged .coach-lamp .band, html.staged .coach.on .band, html.staged .coach-lamp.on .band { clip-path: none; }
html.staged .coach .band { opacity: 0; transform: translateX(-10px) scale(.985); transform-origin: 0 50%;
  transition: opacity .24s ease-out, transform .36s cubic-bezier(.22,.9,.24,1), width .34s cubic-bezier(.22,.9,.24,1); }
html.staged .coach.on .band { opacity: 1; transform: none; }
html.staged .mychip { will-change: opacity; } html.staged .coach .band, html.staged .coach .lamp-sm, html.staged .coach .coach-line { will-change: transform, opacity; }
html:not(.staged) .coach-pit .cl-2 { display: block; }
html.flow-pre .coach-pit:not(.two) .cl-2 { opacity: 0; }
html:not(.js) .coach-pit .cl-1 { display: none; }

/* =====================================================================
   V2 · the app's own footage (Pit, Poker Room, Lamp, pencil), scrubbed
   on canvases; stills for reduced motion and no-JS share the same boxes.
   ===================================================================== */
.fx { position: absolute; inset: 0; }
.fx-still, .fx-still img { display: block; }
.fx-still img, .fx-cv { position: absolute; }
html.staged .fx-still { display: none; }
html:not(.staged) .fx-cv { display: none; }
html.flow-pre .fx-pit .fx-end, html:not(.flow-pre) .fx-pit .fx-ask { display: none; }
html.flow-pre .s-pit.doubled .fx-pit .fx-end { display: block; }
html.flow-pre .s-pit.doubled .fx-pit .fx-ask { display: none; }

/* the Pit: full-bleed on desktop (the table sits left, the words right); on phones the
   upright table at the top with the rail's room beneath it */
.s-pit { background: #0a1914; }
.fx-pit .fx-cv, .fx-pit .fx-still img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
.fx-seam { display: none; }
.say-pit { left: auto; right: 4vw; top: calc(11 * var(--sv)); max-width: 34vw; }
.say-pit .disp { font-size: clamp(38px, 4.4vw, 72px); }
html .coach-pit { left: 62vw; top: calc(46 * var(--sv)); bottom: auto; max-width: 34vw; }
@media (max-width: 699px), (max-aspect-ratio: 6/5) {
  .say-pit { left: var(--gut); right: auto; top: calc(7.5 * var(--sv)); max-width: 70vw; }
  .say-pit .disp { font-size: 30px; } .say-pit .cap { font-size: 16px; margin-top: 6px; }
  html .coach-pit { top: auto; bottom: max(16px, env(safe-area-inset-bottom)); }
}
/* your chip, the app's own $5: placed on the footage by site.js */
.mychip { position: absolute; z-index: 7; left: 0; top: 0; width: 56px; padding: 0; border: 0; background: none; cursor: grab; touch-action: auto; opacity: 0; pointer-events: none; }
.mychip img { display: block; width: 100%; height: auto; pointer-events: none; filter: drop-shadow(0 6px 6px rgba(0,0,0,.35)); }
.s-pit.can .mychip { pointer-events: auto; touch-action: none; }
html.flow-pre .s-pit:not(.doubled) .mychip { opacity: 1; pointer-events: auto; cursor: pointer; }
html.flow-pre .s-pit.doubled .mychip, html:not(.js) .mychip { display: none; }
.s-pit.ask .mychip img { animation: offer 1.6s ease-in-out infinite; }
.mychip-label { position: absolute; z-index: 7; left: 0; top: 0; translate: -50% 0; width: 7em; }

/* the Poker Room: the app's room is dark, lit over its table; the oxblood is the room's edge */
.s-poker .panel { background: #0a0a09; }
.fx-poker .fx-cv, .fx-poker .fx-still img { left: 0; width: min(92vw, 185svh); height: auto; aspect-ratio: 16 / 9; top: calc(55 * var(--sv) - min(92vw, 185svh) * .304); }
.fx-room { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 78% at 36% 56%, rgba(62,18,25,0) 58%, rgba(62,18,25,.9) 100%); }
.say-poker { left: auto; right: 3vw; top: calc(14 * var(--sv)); width: 26vw; }
.say-poker .disp { font-size: clamp(32px, 3.3vw, 54px); }
html .coach-poker { left: 70vw; top: calc(54 * var(--sv)); translate: none; max-width: 27vw; }
@media (max-width: 699px), (max-aspect-ratio: 6/5) {
  .fx-poker .fx-cv, .fx-poker .fx-still img { width: 113vw; left: 50%; translate: -50% 0; aspect-ratio: 9 / 16; top: calc(55 * var(--sv) - 113vw * .958); }
  .fx-room { background: radial-gradient(ellipse 90% 60% at 50% 55%, rgba(62,18,25,0) 55%, rgba(62,18,25,.9) 100%); }
  .say-poker { right: auto; left: var(--gut); width: auto; top: calc(8 * var(--sv)); }
  html .coach-poker { top: auto; bottom: max(16px, env(safe-area-inset-bottom)); }
}

/* the Lamp: his own lamp lights; his own pencil draws */
.s-lamp { background: #090909; }
.fx-lamp .fx-cv, .fx-lamp .fx-still img { left: 6vw; top: calc(30 * var(--sv)); height: calc(48 * var(--sv)); width: auto; aspect-ratio: 480 / 580; }
.fx-pencil .fx-cv, .fx-pencil .fx-still img { left: 36vw; top: calc(47 * var(--sv)); width: min(58vw, calc(44 * var(--sv) * 1300 / 596)); height: auto; aspect-ratio: 1300 / 596; }
html .coach-lamp { left: 36vw; top: calc(33 * var(--sv)); max-width: 58vw; }
.say-lamp { top: calc(9 * var(--sv)); }
@media (max-width: 699px), (max-aspect-ratio: 6/5) {
  .fx-lamp .fx-cv, .fx-lamp .fx-still img { left: 50%; translate: -50% 0; top: calc(27 * var(--sv)); height: calc(21 * var(--sv)); }
  .fx-pencil .fx-cv, .fx-pencil .fx-still img { left: 3vw; width: 94vw; aspect-ratio: 900 / 402; top: calc(51 * var(--sv)); }
  html .coach-lamp { top: auto; bottom: max(16px, env(safe-area-inset-bottom)); }
}
html .coach-lamp .cl, html .coach-pit .cl { grid-area: 1 / 1; }
html .coach-lamp .coach-line { display: grid; }
@media (min-width: 700px) { html .coach-lamp .cl { white-space: nowrap; } }
html .coach-lamp .cl { transition: opacity .2s ease-out, transform .22s ease-out; }
html .coach-lamp .cl-2 { opacity: 0; transform: translateY(6px); }
html .coach-lamp.two .cl-1 { opacity: 0; transition-duration: .12s; }
html .coach-lamp.two .cl-2 { opacity: 1; transform: none; transition-delay: .16s; }
html .coach-lamp .band { transition: opacity .24s ease-out, transform .36s cubic-bezier(.22,.9,.24,1), width .34s cubic-bezier(.22,.9,.24,1); }
html:not(.staged) .coach-lamp .cl-1 { display: none; } html:not(.staged) .coach-lamp .cl-2 { opacity: 1; transform: none; }
/* the app's lamp sprite beside the band */
html .coach img.lamp-sm { object-fit: contain; }
html:not(.staged) .coach-lamp .coach-line, html:not(.js) .coach-pit .coach-line { display: block; }
html:not(.staged) .coach-lamp .cl, html:not(.js) .coach-pit .cl { display: block !important; opacity: 1 !important; transform: none !important; white-space: normal; }
html.flow-pre .s-pit:not(.doubled) .mychip-label { opacity: 1; }
html.flow-pre .s-pit.doubled .mychip-label { opacity: 0; }
html.flow-pre .coach-pit .cl-1 { opacity: 1; } html.flow-pre .coach-pit.two .cl-1 { opacity: 0; }
html.flow-pre .coach-pit:not(.two) .cl-2 { opacity: 0; } html.flow-pre .coach-pit.two .cl-2 { opacity: 1; transform: none; }
.fx-pit { background: #0a1914; }
@media (max-width: 699px), (max-aspect-ratio: 6/5) {
  html .coach-pit, html .coach-poker, html .coach-lamp { max-width: none; }
}

/* =====================================================================
   V2.1 · footage framed into the page; the cast back; the napkin live
   ===================================================================== */
/* ---- the Pit (desktop): the table left of centre with room above it for
   Rosa behind the far edge; every footage edge feathers into page felt */
.s-pit { --fw: 92vw; --fl: 8vw; --ft: calc(17 * var(--sv)); --fh: calc(var(--fw) * 9 / 16); }
.fx-pit { background: transparent; }
.arch-in { background: radial-gradient(70% 80% at 42% 55%, #0f3a2c 0%, #0b281f 55%, #07170f 100%); }
.s-close .arch-in { background: var(--navy); }
.arch-in::before { content: ""; position: absolute; inset: 0; background: url(../assets/img/grain.png); opacity: .55; pointer-events: none; }
.s-close .arch-in::before { display: none; }
.fx-pit .fx-cv, .fx-pit .fx-still img { left: var(--fl); top: var(--ft); width: var(--fw); height: var(--fh); object-fit: fill; }
/* the stills (reduced motion, no JS) fade by CSS mask; the scrubbed canvases draw the same fade themselves (scrub.js) */
.fx-pit .fx-still img {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 50%, transparent 72%), linear-gradient(180deg, transparent 0, #000 5%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 50%, transparent 72%), linear-gradient(180deg, transparent 0, #000 5%, #000 90%, transparent 100%); }
@media (max-width: 699px), (max-aspect-ratio: 6/5) {
  /* the upright table 16svh + a drop down (Rosa stands above its far edge, under the caption), 108px of
     room beneath it for the coach's band; contained at the top of its box. The drop takes what a taller
     screen has spare under the band (8.4svh - 3px leaves a two-line band 16px clear), 22-48px. site.js reads
     this box: the sprite deal, Rosa, the edge and the band are placed from the frame it holds */
  .s-pit { --drop: clamp(22px, calc(8.4 * var(--sv) - 3px), 48px); }
  .fx-pit { --room: 108px; }
  .fx-pit .fx-cv, .fx-pit .fx-still img { left: 0; top: calc(16 * var(--sv) + var(--drop)); width: 100%; height: calc(100% - var(--room) - 16 * var(--sv));
    object-fit: contain; object-position: 50% 0; }
  /* the edge and Rosa from the same frame, for a page without script (site.js places them from the measured frame) */
  .s-pit { --fH: calc(84 * var(--sv) - 108px); --fT: calc(16 * var(--sv) + var(--drop)); --rH: calc(var(--fH) * 9 / 16 * .33); }
  html .far-edge { left: calc(50vw - var(--fH) * 9 / 16 * .38); width: calc(var(--fH) * 9 / 16 * .76); top: calc(var(--fT) + var(--fH) * 292 / 1920 - 14px); }
  html .cast-rosa { left: calc(50vw - var(--rH) * .4167); width: calc(var(--rH) * .833); height: calc(var(--rH) * .877);
    top: calc(var(--fT) + var(--fH) * 292 / 1920 - 7px - var(--rH) * .877); }
}
.far-edge { position: absolute; z-index: 2; left: calc(var(--fl) + var(--fw) * .1); width: calc(var(--fw) * .52); top: calc(var(--ft) + var(--fh) * .02); height: 14px; border-radius: 7px;
  background: linear-gradient(180deg, #3a2414, #1c110a); box-shadow: 0 2px 0 rgba(201,162,94,.5), 0 10px 24px rgba(0,0,0,.45);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.cast { position: absolute; z-index: 1; overflow: hidden; pointer-events: none; }
.cast img { position: absolute; left: 50%; bottom: -14%; height: 114%; width: auto; translate: -50% 0; }
.cast-rosa { left: calc(var(--fl) + var(--fw) * .36 - 15svh); width: calc(30 * var(--sv)); top: calc(var(--ft) + var(--fh) * .02 - 27 * var(--sv)); height: calc(27 * var(--sv)); }
.fx-pit { z-index: 1; }
.fx-pit .fx-cv { z-index: 1; }
.far-edge { z-index: 3; }
html .say-pit { right: 4vw; left: auto; top: calc(14 * var(--sv)); max-width: 30vw; }
html .coach-pit { left: 63vw; top: calc(50 * var(--sv)); max-width: 34vw; }
@media (max-width: 699px), (max-aspect-ratio: 6/5) {
  html .say-pit { left: var(--gut); right: auto; top: calc(7 * var(--sv)); max-width: 56vw; }
}

/* ---- the double: a $15 stack, the app's own chips, with its label */
.mychip { width: 56px; min-width: 48px; }
.mychip::before { content: ""; position: absolute; inset: -8px; }
.mychip img { filter: drop-shadow(0 7px 7px rgba(0,0,0,.4)); }
.mychip-label { font: 600 14px/1.2 var(--sf); color: #fff; letter-spacing: 0; text-shadow: 0 1px 3px rgba(0,0,0,.5); width: auto; white-space: nowrap; }
@media (max-width: 699px), (max-aspect-ratio: 6/5) { .mychip-label { font-size: 13px; } }

/* ---- the Poker Room: the table centred, a wider camera, June behind the far rail */
.s-poker { --pw: 84vw; --ph: calc(var(--pw) * 9 / 16); --pl: calc(50vw - var(--pw) * .379); --pt: calc(57 * var(--sv) - var(--ph) * .54); }
.fx-poker .fx-cv, .fx-poker .fx-still img { left: var(--pl); top: var(--pt); width: var(--pw); height: var(--ph); translate: none; aspect-ratio: auto; }
.fx-poker .fx-still img {
  -webkit-mask-image: radial-gradient(ellipse 46% 50% at 37.9% 54%, #000 80%, transparent 100%); mask-image: radial-gradient(ellipse 46% 50% at 37.9% 54%, #000 80%, transparent 100%); }
.s-poker .panel { background: radial-gradient(ellipse 60% 62% at 50% 57%, #0b0b0a 0%, #0b0b0a 55%, #2a0d12 85%, #3e1219 100%); }
.fx-room { display: none; }
.cast-june { z-index: 1; left: calc(50vw - 12 * var(--sv)); width: calc(24 * var(--sv)); height: calc(22 * var(--sv)); top: calc(var(--pt) + var(--ph) * .165 - 22 * var(--sv)); }
.fx-poker { z-index: 2; }
html .say-poker { left: 6vw; right: auto; top: calc(9 * var(--sv)); width: auto; }
html .coach-poker { left: auto; right: 4vw; top: calc(12 * var(--sv)); max-width: 30vw; translate: none; }
@media (max-width: 699px), (max-aspect-ratio: 6/5) {
  .s-poker { --pw: 95.8vw; --ph: calc(var(--pw) * 16 / 9); --pl: 2.1vw; --pt: calc(31 * var(--sv) - var(--ph) * .328); }
  /* the canvas holds only the rows the oval leaves visible (452-1622 of 1920) */
  .fx-poker .fx-cv { top: calc(var(--pt) + var(--ph) * .235417); height: calc(var(--ph) * .609375); }
  .fx-poker .fx-still img { -webkit-mask-image: radial-gradient(ellipse 62% 30% at 50% 54%, #000 80%, transparent 100%); mask-image: radial-gradient(ellipse 62% 30% at 50% 54%, #000 80%, transparent 100%); }
  .s-poker .panel { background: radial-gradient(ellipse 80% 40% at 50% 50%, #0b0b0a 0%, #0b0b0a 60%, #2a0d12 88%, #3e1219 100%); }
  .cast-june { left: calc(50vw - 9 * var(--sv)); width: calc(18 * var(--sv)); height: calc(11 * var(--sv)); top: calc(31 * var(--sv) - 11 * var(--sv) + 2px); }
  html .say-poker { left: var(--gut); top: calc(7 * var(--sv)); }
  html .say-poker .cap { margin-top: 4px; }
  html .coach-poker { top: calc(var(--pt) + var(--ph) * .79); bottom: auto; right: var(--gut); max-width: none; }
}

/* ---- the Lamp: the napkin is live HTML around the app's pencil */
.napkin { position: absolute; z-index: 4; margin: 0; left: 36vw; top: calc(46 * var(--sv)); width: min(58vw, 860px); padding: 22px 28px 20px; border-radius: 18px;
  background: #141210; box-shadow: inset 0 0 0 1px rgba(216,190,140,.16), 0 20px 40px rgba(0,0,0,.4); font-family: var(--sf); color: #F4EFE6; }
.nk-title { margin: 0; font: 600 clamp(17px, calc(9px + .75vw), 22px)/1.25 var(--sf); }
.nk-you { margin: 8px 0 14px; font: 500 clamp(15px, calc(8px + .6vw), 18px)/1.3 var(--sf); color: rgba(244,239,230,.86); }
.nk-you b { color: #D8BE8C; font-weight: 700; }
.napkin .fx-pencil { position: relative; inset: auto; width: 100%; aspect-ratio: 1168 / 204; }
.napkin .fx-cv, .napkin .fx-still img { position: absolute; inset: 0; width: 100%; height: 100%; left: 0; top: 0; aspect-ratio: auto; }
.nk-pay { margin: 14px 0 4px; font: 700 clamp(18px, calc(9px + .8vw), 24px)/1.2 var(--sf); color: #D8BE8C; }
.nk-foot { margin: 0; font: 400 13px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: rgba(244,239,230,.5); }
html.staged .napkin { opacity: 0; }
html.staged [data-nk="pay"], html.staged [data-nk="foot"], html.staged [data-nk="you"] { opacity: 0; transition: opacity .3s ease; }
html.staged .napkin.p-you [data-nk="you"], html.staged .napkin.p-pay [data-nk="pay"], html.staged .napkin.p-pay [data-nk="foot"] { opacity: 1; }
.fx-lamp .fx-cv, .fx-lamp .fx-still img { left: 7vw; top: calc(36 * var(--sv)); height: calc(40 * var(--sv)); }
html .coach-lamp { left: 36vw; top: calc(33 * var(--sv)); }
@media (max-width: 699px), (max-aspect-ratio: 6/5) {
  .napkin { left: 4vw; width: 92vw; top: calc(35 * var(--sv)); padding: 16px 16px 14px; border-radius: 14px; }
  .napkin .fx-pencil { aspect-ratio: 500 / 408; width: 88%; margin: 0 auto; }
  .nk-you { margin: 6px 0 10px; }
  .nk-foot { font-size: 11.5px; }
  .fx-lamp .fx-cv, .fx-lamp .fx-still img { left: 5vw; translate: none; top: calc(21 * var(--sv)); height: calc(12 * var(--sv)); }
}
/* no-JS: each band shows only its scene's final line */
html:not(.js) .coach .cl-1 { display: none !important; }
html:not(.js) .coach .cl-2 { display: block !important; opacity: 1 !important; transform: none !important; }
/* v2.1 tune */
.s-pit { --fw: 86vw; --fl: 11vw; --ft: calc(21 * var(--sv)); }
.cast-rosa { height: calc(20 * var(--sv)); width: calc(22 * var(--sv)); top: calc(var(--ft) + var(--fh) * .02 - 20 * var(--sv)); left: calc(var(--fl) + var(--fw) * .36 - 11 * var(--sv)); }
.mychip { width: 60px; }
.cast-june { top: calc(var(--pt) + var(--ph) * .165 - 19 * var(--sv)); }
@media (max-width: 699px), (max-aspect-ratio: 6/5) {
  html .say-pit { max-width: 70vw; }
  html .coach-pit, html .coach-poker, html .coach-lamp { left: var(--gut); right: var(--gut); max-width: none; translate: none; }
  html .coach-pit, html .coach-lamp { top: auto; bottom: max(16px, env(safe-area-inset-bottom)); }
  html .coach-poker { top: calc(var(--pt) + var(--ph) * .79); bottom: auto; }
  .cast-june { top: calc(31 * var(--sv) - 11 * var(--sv) + 10px); }
  .fx-lamp .fx-cv, .fx-lamp .fx-still img { left: 5vw; top: calc(27 * var(--sv)); height: calc(12 * var(--sv)); }
  .napkin { top: calc(41 * var(--sv)); }
}
.cast-june { z-index: 3; top: calc(var(--pt) + var(--ph) * .158 - 20 * var(--sv)); height: calc(20 * var(--sv)); }
.cast-june img { bottom: -4%; height: 112%; }
@media (max-width: 699px), (max-aspect-ratio: 6/5) {
  .cast-june { top: calc(var(--pt) + var(--ph) * .336 - 11 * var(--sv)); height: calc(11 * var(--sv)); }
}
.cast-rosa { z-index: 2; }
@media (max-width: 699px), (max-aspect-ratio: 6/5) {
  .fx-pit .fx-still img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, transparent 0, #000 6%, #000 88%, transparent 100%);
    -webkit-mask-composite: source-in; mask-composite: intersect;
    mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, transparent 0, #000 6%, #000 88%, transparent 100%); }
}

/* ---- v2.2 */
/* the lamp footage melts into the page black: no box edge even on a contrast stretch */
.s-lamp, .lamp-in { background: #090909; }
.fx-lamp .fx-still img { mix-blend-mode: lighten;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%); }
@media (max-width: 699px), (max-aspect-ratio: 6/5) {
  /* the coach's band 16px under the hand (site.js sets it from the table's frame; this is the no-JS place) */
  html .coach-pit { top: calc(16 * var(--sv) + var(--drop) + (100 * var(--sv) - 108px - 16 * var(--sv)) * .9 + 16px); bottom: auto; }
  /* the Poker Room: a touch larger, every plate still on screen */
  .s-poker { --pw: 100vw; --pl: 0vw; }
  /* the bulb on the caption's row */
  .fx-lamp .fx-cv, .fx-lamp .fx-still img { left: 4vw; top: calc(22 * var(--sv)); height: 110px; }
}
@media (max-width: 699px), (max-aspect-ratio: 6/5) { .fx-lamp .fx-cv, .fx-lamp .fx-still img { top: calc(24 * var(--sv)); } }

/* ---- v2.3 · the Pit on phones: the app's deal from its own @3x sprites (deal.js) */
.deal { position: absolute; z-index: 1; overflow: hidden; pointer-events: none; display: none; }
.deal-on .deal { display: block; }
.deal-on .fx-pit .fx-cv, .deal-on .fx-pit .fx-still img { visibility: hidden; }
.deal-on .mychip { min-width: 0; }
.deal-on .mychip::before { inset: -10px; }
.deal > * { position: absolute; left: 0; top: 0; }
.deal img, .deal canvas { display: block; max-width: none; user-select: none; -webkit-user-select: none; }
.deal .d-chip, .deal .d-card { will-change: transform; transform-origin: 50% 50%; }
.deal .d-card > * { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.deal .d-card > .d-sh { width: auto; height: auto; transform-origin: 0 0; visibility: hidden; }
.deal .d-lbl { font: 700 1em/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; font-variant-numeric: tabular-nums lining-nums;
  color: #F4EFE6; white-space: nowrap; letter-spacing: 0; }
.deal .d-word { font: 600 0.6em/1 var(--serif); letter-spacing: .08em; color: rgba(236,220,172,.9); }
.deal .d-lbl-b { display: flex; }
.deal .d-roll { display: grid; overflow: hidden; }
.deal .d-roll > span { grid-area: 1 / 1; }

/* ---- v2.3 · the napkin's pencil as the app's vector strokes (napkin.js) */
.nk-on .fx-pencil .fx-cv, .nk-on .fx-pencil .fx-still { display: none; }
.nk-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; font-family: var(--sf); }
/* the HD desktop files hold only what each fade leaves visible: the Pit's left 72%, the Poker Room's left 84% below its top 4% */
.hd-foot .fx-pit .fx-cv { width: calc(var(--fw) * .72); }
.hd-poker .fx-poker .fx-cv { top: calc(var(--pt) + var(--ph) * .04); width: calc(var(--pw) * .84); height: calc(var(--ph) * .96); }

/* ---- v2.4 · the close: the call to action is the last screen's hero; the old cream footer's
   contents sit under it as fine print on the navy, like the small type under a poster */
.fine { position: absolute; left: 0; right: 0; bottom: max(14px, env(safe-area-inset-bottom)); margin: 0 auto; max-width: 52rem; padding: 0 var(--gut);
  display: grid; justify-items: center; gap: 6px; text-align: center; font: 400 12px/1.45 var(--sf); letter-spacing: 0; color: rgba(244,239,230,.6); }
.fine p { margin: 0; text-wrap: balance; }
.fine .honest { font-size: 12.5px; line-height: 1.45; color: rgba(244,239,230,.8); }
.fine .honest em { font: inherit; display: inline; margin: 0; color: #F4EFE6; }
.fine .lede { max-width: 36rem; }
.fine a { color: rgba(244,239,230,.78); text-decoration: underline; text-decoration-color: rgba(201,162,94,.4); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.fine a:hover { color: #F4EFE6; text-decoration-color: var(--brass); }
.fine .guides { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 16px; font-size: 12px; }
.fine .legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px; font-size: 11px; color: rgba(244,239,230,.48); }
.fine .legal a { color: rgba(244,239,230,.62); }
/* the band and the button, then the fine print, in one column the height of the scene: the room above
   the band (where the door is) gives way first on a short screen, so nothing ever overlaps */
.close-stack { position: absolute; left: 0; right: 0; top: 0; bottom: max(14px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: stretch; }
.close-stack::before { content: ""; flex: 0 1 calc(68 * var(--sv)); min-height: calc(30 * var(--sv)); }
.close-stack::after { content: none; }
.close-stack .close-in { position: relative; top: auto; flex: none; }
.close-stack .fine { position: relative; bottom: auto; flex: none; margin-top: auto; padding-top: 18px; }
@media (min-width: 700px) { .fine { font-size: 13px; gap: 7px; } .fine .honest { font-size: 13.5px; } .fine .guides { font-size: 13px; } .fine .legal { font-size: 12px; } }
@media (max-width: 699px), (max-aspect-ratio: 6/5) { .close-stack::before { flex-basis: calc(54 * var(--sv)); min-height: calc(26 * var(--sv)); } }

/* ---- v2.5 · the Poker Room: the app's hand from its own sprites (pokerdeal.js) */
.pdeal { position: absolute; z-index: 1; pointer-events: none; display: none; contain: layout; }
.pdeal-on .pdeal { display: block; }
.pdeal-on .fx-poker .fx-cv, .pdeal-on .fx-poker .fx-still img { visibility: hidden; }
.pdeal canvas { display: block; max-width: none; }
.pdeal .pd-felt { position: absolute; left: 0; top: 0; }
.pdeal .pd-layer { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.pdeal .pd-card, .pdeal .pd-stack, .pdeal .pd-face { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; will-change: transform; display: none; }
.pdeal .pd-face { display: block; will-change: auto; }
.pdeal .pd-turn { position: absolute; inset: 0; transform-origin: 50% 50%; }
.pdeal .pd-pic { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 50% 50%; }
.pdeal .pd-face .pd-pic { opacity: 0; }
.pdeal .pd-sh { position: absolute; visibility: hidden; transform-origin: 50% 50%; }
.pdeal .pd-ring { position: absolute; left: 0; top: 0; box-sizing: border-box; border: 2.5em solid rgba(185,157,92,.95); border-width: calc(2.5em); display: none;
  box-shadow: 0 0 6em rgba(185,157,92,.32); transform-origin: 50% 50%; }
.pdeal .pd-plate { position: absolute; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 2em 7em; border-radius: 9em; white-space: nowrap; background: rgba(13,13,10,.9); box-shadow: inset 0 0 0 .5em rgba(185,157,92,.25); }
.pdeal .pd-name { font: 600 11em/1.3 var(--serif); letter-spacing: .12em; text-indent: .12em; color: rgb(223,195,135); white-space: nowrap; }
.pdeal .pd-money { font: 700 15em/1.22 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; font-variant-numeric: tabular-nums lining-nums; color: #F4EFE6; white-space: nowrap; }
.pdeal .pd-hero { background: rgba(13,13,10,.62); box-shadow: none; border-radius: 10em; padding: 3em 8em; }
.pdeal .pd-heromoney { font-size: 20em; }
.pdeal .pd-word { font: 600 11em/1.25 var(--serif); letter-spacing: .08em; color: #F4EFE6; white-space: nowrap; }
.pdeal .pd-word b { font: 700 1em -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.pdeal .pd-g { display: inline-block; position: relative; }
.pdeal .pd-gx { overflow: hidden; vertical-align: bottom; }
.pdeal .pd-gx > span { display: inline-block; }
.pdeal .pd-gx > .pd-go { position: absolute; left: 0; top: 0; }
.pdeal .pd-bet { position: absolute; left: 0; top: 0; font: 700 13em/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; font-variant-numeric: tabular-nums;
  color: rgba(244,239,230,.92); text-shadow: 0 .1em .25em rgba(0,0,0,.5); white-space: nowrap; display: none; }
.pdeal .pd-pot { position: absolute; left: 0; top: 0; display: none; flex-direction: column; align-items: center; }
.pdeal .pd-potfig { font: 700 22em/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; font-variant-numeric: tabular-nums; color: #F4EFE6; }
.pdeal .pd-potword { font: 600 10em/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; letter-spacing: .14em; color: rgba(244,239,230,.55); margin-top: .3em; }

/* =====================================================================
   v2.8 · tablets held upright (an iPad in portrait, Split View, a tall window)
   The upright compositions (the phone's scenes, its sprite engines and tall
   assets, all sharp at any size), laid out for a screen 500 px wide or more:
   sizes follow the screen's height, the words share one left margin, the
   coach's band sits beside its scene at its own width, never gutter to gutter.
   ===================================================================== */
@media (min-width: 500px) and (max-aspect-ratio: 6/5) {
  :root { --gut: clamp(28px, 4.2vw, 48px); --tab: clamp(58px, 5.2svh, 70px); --rail-fs: clamp(17px, 1.6svh, 21px); }
  :root { --fs: clamp(32px, min(4.5svh, 5.6vw), 60px); }
  .disp, html .say-pit .disp, html .say-poker .disp, .say-lamp .disp, .say-screens .disp { font-size: var(--fs); }
  .cap, html .say-pit .cap, html .say-poker .cap { font-size: clamp(17px, 1.7svh, 22px); margin-top: .5em; }
  .mark { width: clamp(112px, 10svh, 136px); }
  .top { padding-top: max(20px, env(safe-area-inset-top)); }
  /* the pinned pill: top right, its whole line */
  .pin { top: max(16px, env(safe-area-inset-top)); }
  .pin .long { display: inline; } .pin .short { display: none; }
  .pin .pill { min-height: 48px; padding: 0 22px; font-size: 16px; box-shadow: 3px 3px 0 var(--cream); }
  /* the coach's band: its own width, on the words' margin */
  html .coach { width: max-content; max-width: calc(100vw - 2 * var(--gut)); left: var(--gut) !important; right: auto !important; translate: none !important; }

  /* 1 · the film: the upright cut whole, a poster above the bar */
  .s-hero, .film { --bar: clamp(84px, 8svh, 104px); }
  .film { height: calc(100 * var(--sv) - var(--bar)); }
  .film-video, .film-poster img, .door-hold img { object-fit: contain !important; object-position: 50% 50% !important; height: 100% !important; }
  .film-bar { top: calc(100 * var(--sv) - var(--bar)); bottom: auto; min-height: var(--bar); height: var(--bar); padding: 0 var(--gut); background: var(--navy); gap: 24px; }
  .film-bar::before { top: 0; bottom: auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(226,195,135,.7), transparent); opacity: .6; z-index: 0; }
  .bridge { font-size: 12px; letter-spacing: .28em; margin-bottom: 7px; }
  .film-bar .pill { min-height: 48px; padding: 0 22px; font-size: 16px; box-shadow: 3px 3px 0 var(--cream); }
  .film-controls { position: static; }

  /* 2 · the Pit: the upright table, as large as the screen's height allows, its band under the hand */
  .s-pit { --ptop: calc(7 * var(--sv) + 44px); --drop: 0px; }
  .fx-pit { --room: 0px; }
  .fx-pit .fx-cv, .fx-pit .fx-still img { top: var(--ptop); height: calc((100 * var(--sv) - var(--ptop) - var(--tab) - 44px) / .9); }
  .arch-in { background: radial-gradient(ellipse 62% 56% at 50% 54%, #0b3a2b 0%, #072c21 48%, #051a12 100%); }
  .deal .d-felt { -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(180deg, transparent, #000 5%, #000 93%, transparent);
    -webkit-mask-composite: source-in; mask-composite: intersect;
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(180deg, transparent, #000 5%, #000 93%, transparent); }
  html .say-pit { top: calc(7 * var(--sv) + 30px); max-width: 46vw; }
  .mychip-label { font-size: 15px; }

  /* 3 · the Poker Room: the upright table at the height the screen gives it */
  .s-poker { --pw: min(84vw, calc(58 * var(--sv) / 1.0828)); --pl: calc(50vw - var(--pw) / 2); --pt: calc(56 * var(--sv) - var(--ph) * .54); }
  .cast-june { left: calc(50vw - var(--pw) * .2); width: calc(var(--pw) * .4); height: calc(var(--pw) * .25); top: calc(var(--pt) + var(--ph) * .336 - var(--pw) * .25); }
  html .say-poker { top: calc(7 * var(--sv) + 30px); }
  html .coach-poker { top: calc(var(--pt) + var(--ph) * .80); }
  .s-poker .panel { background: radial-gradient(ellipse 66% 44% at 50% 56%, #0b0b0a 0%, #0b0b0a 58%, #2a0d12 86%, #3e1219 100%); }

  /* 4 · the Lamp: the bulb on the margin, his line beside it, the napkin under them */
  .say-lamp { top: calc(7 * var(--sv) + 30px); right: var(--gut); }
  .fx-lamp .fx-cv, .fx-lamp .fx-still img { left: var(--gut); top: calc(24 * var(--sv)); height: calc(15 * var(--sv)); }
  html .coach-lamp { top: calc(29 * var(--sv)); bottom: auto; left: calc(var(--gut) + 15 * var(--sv) * 480 / 580 + 8px) !important; max-width: calc(100vw - 2 * var(--gut) - 13 * var(--sv)); }
  .napkin { left: 0; right: 0; margin: 0 auto; top: calc(43 * var(--sv)); width: min(calc(100vw - 2 * var(--gut)), calc(44 * var(--sv) * 1.06), calc((57 * var(--sv) - 190px) * 1.2)); padding: 26px 30px 22px; border-radius: 20px; }
  .napkin .fx-pencil { width: 92%; }
  .nk-title { font-size: clamp(18px, 1.8svh, 23px); } .nk-you { font-size: clamp(15px, 1.45svh, 19px); margin: 8px 0 14px; }
  .nk-pay { font-size: clamp(18px, 1.9svh, 24px); } .nk-foot { font-size: 13px; }

  /* 5 · the screens: three phones, the line under them */
  html .say-screens { top: calc(7 * var(--sv) + 30px); left: var(--gut); }
  .s-screens { --fpw: min(44vw, calc(52 * var(--sv) * 600 / 1264)); }
  .front { --pw: var(--fpw); top: calc(25 * var(--sv)); }
  .device.back { --pw: calc(var(--fpw) * .78); top: calc(33 * var(--sv)); }
  .back-l { left: calc(50vw - var(--fpw) * .95); } .back-r { left: calc(50vw + var(--fpw) * .95); }
  html .coach-screens { top: calc(100 * var(--sv) - var(--tab) - 28px); bottom: auto; }

  /* 6 · close */
  html .close-in .coach { width: max-content; max-width: calc(100vw - 2 * var(--gut)); }
  html .coach-close { --tab: clamp(64px, 6svh, 80px); }
  .coach-bare .coach-line, html .coach-close .coach-line { font-size: clamp(22px, 2.3svh, 30px); }
  .close-in .pill-lg { min-height: 58px; padding: 0 32px; font-size: 18px; }
  .fine { font-size: 13px; } .fine .honest { font-size: 14px; } .fine .guides { font-size: 13px; } .fine .legal { font-size: 12px; }

  html .coach-pit, html .coach-lamp, html .coach-screens { max-width: calc(100vw - 2 * var(--gut)); }
}
/* a tablet wide enough holds each coach line on one row (its band takes each line's measured width) */
@media (min-width: 760px) and (max-aspect-ratio: 6/5) { html .coach-pit .cl, html .coach-lamp .cl { white-space: nowrap; } }
/* a narrow upright window (Split View on a big iPad): the table steps down so Rosa stands under the caption */
@media (min-width: 500px) and (max-aspect-ratio: 3/5) { .s-pit { --ptop: calc(7 * var(--sv) + 92px + 2.04 * var(--fs) + 3vw); } }
/* the film's bar sits on the bottom of what Safari shows: an iPad's toolbar is at the top, so a layer 100lvh
   tall runs under the screen's edge until the bar collapses (desktop browsers have lvh = svh: no change there) */
@media (min-width: 700px) and (min-aspect-ratio: 6001/5000) { .film-bar { bottom: calc(100lvh - 100svh); } }

/* =====================================================================
   v2.9 · the offer at a glance: the opening message stands over the film from the first paint
   (the film's own titles live in the top of the frame; the message keeps to the bottom band),
   what "Join the beta" means beside each button, a QR on desktop, a scroll cue
   ===================================================================== */
.film-bar { flex-wrap: wrap; align-items: flex-end; gap: 0 32px; padding: 0 var(--gut) calc(max(12px, env(safe-area-inset-bottom)) + 44px); }
.film-bar::before { height: calc(100% + 140px); background: linear-gradient(0deg, rgba(10,16,40,.94), rgba(10,16,40,.86) 34%, rgba(10,16,40,.5) 68%, transparent); }
.bar-say { flex: 1 1 26rem; min-width: 0; max-width: 46rem; }
.bar-say .bridge { margin: 0 0 12px; }
.bar-h { margin: 0; font: 400 clamp(30px, 3vw, 50px)/1.08 var(--disp); letter-spacing: .03em; text-transform: uppercase; color: var(--cream); text-wrap: balance; text-shadow: 0 2px 16px rgba(0,0,0,.45); }
.bar-sub { margin: 12px 0 0; max-width: 34rem; font: 400 clamp(17px, 1.3vw, 20px)/1.4 var(--serif); color: rgba(244,239,230,.88); text-wrap: pretty; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.bar-cta { flex: none; display: flex; align-items: flex-end; gap: 22px; }
.cta-go { display: grid; justify-items: start; gap: 9px; }
.cta-note { margin: 0; font: 400 13px/1.3 var(--sf); letter-spacing: 0; color: rgba(244,239,230,.74); }
.qr { display: none; margin: 0; justify-items: center; gap: 6px; }
.qr img { width: 84px; height: 84px; border-radius: 6px; }
.qr figcaption { font: 400 11.5px/1.2 var(--sf); color: rgba(244,239,230,.66); white-space: nowrap; }
/* only where a phone is the other device: a pointer, a wide window */
@media (hover: hover) and (pointer: fine) and (min-width: 1000px) and (min-aspect-ratio: 6001/5000) { .qr { display: grid; } }
/* the cue and the film's buttons share the bottom row */
.cue { position: absolute; left: 50%; translate: -50% 0; bottom: max(10px, env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: 0;
  padding: 4px 12px 0; font: 500 12px/1.2 var(--sf); letter-spacing: .14em; text-transform: uppercase; color: rgba(244,239,230,.72); text-decoration: none; white-space: nowrap; }
.cue svg { width: 20px; height: 20px; color: var(--brass-lt); }
.cue:hover { color: var(--cream); }
.cue:focus-visible { outline: 2px solid var(--brass-lt); outline-offset: 2px; border-radius: 6px; }
@keyframes cue-bob { 0%, 55%, 100% { transform: translateY(0); opacity: .75; } 25% { transform: translateY(4px); opacity: 1; } }
html.js:not(.scrolled) .cue svg { animation: cue-bob 2.6s ease-in-out 1.6s infinite; }
@media (prefers-reduced-motion: reduce) { html .cue svg { animation: none !important; } }
.film-controls { position: absolute; right: var(--gut); bottom: max(8px, env(safe-area-inset-bottom)); }
/* the message is there from the first paint (it is the page's largest text); the buttons arrive after */
html.js .film-bar > .bar-say { opacity: 1; transform: none; transition: none; }
html.js .film-bar.on > .bar-cta { transition-delay: 0s; }
html.js .film-bar > .cue { transform: none; }
.s-hero.hush .film-bar > .bar-say, .s-hero.hush .film-bar > .bar-cta, .s-hero.hush .film-bar > .cue { opacity: 0 !important; transition: opacity .6s var(--ease) !important; }

/* the close: the first-timer's line, the button and what it means, the QR beside them on desktop */
.cta-close { display: grid; justify-items: center; gap: 18px; }
.first-night { margin: 0; max-width: 30rem; font: italic 400 clamp(17px, 1.25vw, 20px)/1.4 var(--serif); color: rgba(244,239,230,.9); text-wrap: balance; }
.cta-row { display: flex; align-items: center; gap: 26px; }
.cta-close .cta-go { justify-items: center; }
.cta-close .qr img { width: 92px; height: 92px; }

/* ---- tall: phones (and the tablet's narrow cases below) */
@media (max-width: 699px), (max-aspect-ratio: 6/5) {
  .film-bar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-end; gap: 0; padding: 0 var(--gut) 54px; min-height: 0; }
  /* on what Safari shows with its toolbar up (the layer is 100lvh; flow mode's scene is 100svh, so this is 0 there);
     the scrim runs on under the toolbar to the layer's edge */
  .film-bar { bottom: calc(100% - 100 * var(--sv)); }
  .film-bar::before { height: auto; top: -110px; bottom: calc(100 * var(--sv) - 100lvh); }
  .bar-say { flex: none; max-width: none; }
  .bar-say .bridge { margin-bottom: 9px; }
  .bar-h { font-size: clamp(22px, 6.6vw, 30px); line-height: 1.1; letter-spacing: .02em; }
  .bar-sub { margin-top: 8px; font-size: 15.5px; line-height: 1.36; }
  .bar-cta { margin-top: 16px; align-items: center; gap: 14px; }
  .cta-go { display: grid; justify-items: start; gap: 8px; }
  .film-bar .cta-note { font-size: 12px; }
  .film-bar .pill { flex: none; }
  .film-controls { right: var(--gut); bottom: 6px; }
  .cue { bottom: 8px; font-size: 11px; letter-spacing: .11em; }
  .first-night { font-size: 16.5px; max-width: 22rem; }
  .cta-close { gap: 16px; }
  .cta-close .cta-go { display: grid; gap: 9px; }
  .cta-close .cta-note { font-size: 12.5px; }
}
@media (max-width: 380px) { .film-bar .cta-note { font-size: 11.5px; } .film-bar .pill { padding: 0 12px; font-size: 13.5px; } }
/* short phones: the bridge gives way first */
@media (max-width: 699px) and (max-height: 720px) { .film-bar .bridge { display: none; } .bar-cta { margin-top: 12px; } }

/* ---- tablet upright: the message and the buttons in a bar of their own under the whole film. The bar takes
   its content's height and the film the rest (site.js measures it into --barh; --bar is the first-paint guess) */
@media (min-width: 500px) and (max-aspect-ratio: 6/5) {
  .s-hero, .film { --bar: clamp(270px, 26svh, 320px); }
  .film { height: calc(100 * var(--sv) - var(--barh, var(--bar))); }
  .film-bar { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 18px;
    top: auto; bottom: calc(100% - 100 * var(--sv)); height: auto; min-height: 0; padding: clamp(22px, 2.6svh, 36px) var(--gut) 60px; }
  .film-bar::before { top: 0; bottom: auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(226,195,135,.7), transparent); opacity: .6; z-index: 0; }
  .bar-say { flex: none; max-width: 52rem; }
  .bar-say .bridge { display: block; }
  .bar-h { font-size: clamp(28px, min(3.4svh, 4.8vw), 46px); }
  .bar-sub { font-size: clamp(16px, 1.7svh, 21px); max-width: 40rem; }
  .bar-cta { margin-top: 0; align-items: center; }
  .cta-go { display: flex; align-items: center; gap: 18px; }
  .film-bar .cta-note { font-size: 13.5px; }
  .film-controls { bottom: 12px; }
  .cue { bottom: 14px; }
  .s-hero.hush .film-bar > .bar-say, .s-hero.hush .film-bar > .bar-cta, .s-hero.hush .film-bar > .cue { opacity: 1 !important; }
  .first-night { font-size: clamp(17px, 1.7svh, 21px); max-width: 30rem; }
}
/* a big tablet: the words and the button side by side */
@media (min-width: 960px) and (max-aspect-ratio: 6/5) {
  .s-hero, .film { --bar: clamp(240px, 21svh, 290px); }
  .film-bar { flex-direction: row; align-items: flex-end; gap: 0 40px; }
  .bar-say { flex: 1 1 auto; }
  .cta-go { display: grid; justify-items: start; gap: 10px; }
}
/* a narrow upright window: the note under the button */
@media (min-width: 500px) and (max-width: 639px) and (max-aspect-ratio: 6/5) {
  .film-bar { gap: 14px; }
  .cta-go { display: grid; justify-items: start; gap: 8px; }
}
.cta-note .nb { white-space: nowrap; }

/* June behind the far rail (pokerdeal.js draws her in the table's own layers): the chairs' faces sit in front of her
   shoulders and her body ends at the rail's outer edge, measured on felt.webp (tall: 17.83% down, between Margo and
   Roy; wide: 15.0% down, between Tomas and Dee). Her size is still the page's .cast-june; the page's own copy stands
   down once the table has her. */
.pdeal .pd-june { z-index: auto; top: auto; left: 50%; bottom: 82.17%; translate: -50% 0; }
.pdeal.pd-wide .pd-june { left: 53.6%; bottom: 85%; }
.panel:has(.pd-june) > .cast-june { display: none; }