/* style.css – Hoodwink TV-First UI – Dynamic 3-8 players */
/* ── Ten-foot sizing ────────────────────────────────────────────────────────────────
 * Every `font-size:clamp(min, min(Xvw,Yvh), MAX)` below had a MAX low enough that it bound
 * at 1920x1080 — 51 of them. The fluid middle term already scales correctly with the
 * viewport and already takes the smaller of width and height, so it cannot overflow; the
 * caps were simply stopping it. The result was a television showing laptop-sized type: the
 * question screen rendered at 40px, 3.7% of screen height, when the viewport allowed 54.
 *
 * The caps are now set ~35% above what 1080p asks for, so the design scales properly through
 * 1080p and 1440p and still stops somewhere sane on a very large display. Minimums are
 * untouched, so small windows are unaffected.
 *
 * These values match the Demo elsewhere; the Demo was simply never watched from a sofa. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0a0a1a;--glass:rgba(255,255,255,.07);--text:#fff;--dim:rgba(255,255,255,.7);--muted:rgba(255,255,255,.4);
  --red:#FF6B6B;--teal:#4ECDC4;--blue:#45B7D1;--green:#96CEB4;--yellow:#FFE66D;--purple:#A29BFE;--pink:#FF9FF3;
  --gold:#FFD700;--silver:#C0C0C0;--bronze:#CD7F32;
  --r:16px;--rl:24px;--shadow:0 8px 32px rgba(0,0,0,.45);--tv-safe:3%;
  /* Responsive scale factor — scales with smaller viewport dimension */
  --s:min(1vw, 1.78vh);
}
html,body{width:100%;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;touch-action:manipulation}

/* ── RTL ── */
[dir="rtl"] body{font-family:"Segoe UI",Tahoma,"Noto Sans Arabic","Geeza Pro",sans-serif}
[dir="rtl"] .answer-letter{margin-right:0;margin-left:10px}
[dir="rtl"] .podium-row{direction:ltr}
[dir="rtl"] .point-award{flex-direction:row-reverse}
[dir="rtl"] .reveal-author{flex-direction:row-reverse}
[dir="rtl"] .movement{margin-left:0;margin-right:8px}
[dir="rtl"] .podium-row .podium-name{text-align:left;direction:rtl}
[dir="rtl"] #muteBtn{right:auto;left:clamp(8px,1.5vw,18px)}

/* ── Canvas & BG ── */
#particleCanvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
#animatedBg{position:fixed;inset:0;z-index:0;background:linear-gradient(135deg,#0a0a2e,#1a0a2e,#0a1a2e,#0a0a1a);background-size:400% 400%;animation:gradientShift 18s ease infinite}
#animatedBg::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 20% 50%,rgba(78,205,196,.08) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(255,107,107,.06) 0%,transparent 50%),radial-gradient(ellipse at 50% 80%,rgba(162,155,254,.06) 0%,transparent 50%);animation:breathe 8s ease-in-out infinite}
#animatedBg .light-ray{position:absolute;width:2px;height:100%;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.025),transparent);animation:breathe 4s ease-in-out infinite}

/* ── App & Screens ── */
#app{position:relative;width:100%;height:100vh;z-index:2}
.screen{position:absolute;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;padding:clamp(16px,var(--tv-safe),48px);overflow:hidden;overflow-y:auto}
.screen.active{display:flex}

/* ══ TUTORIAL — fits viewport, no scroll ══ */
#tutorialOverlay{position:fixed;inset:0;z-index:9998;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .5s ease;overflow:hidden}
.tut-skip{position:absolute;top:clamp(8px,1.5vw,18px);right:clamp(8px,1.5vw,18px);z-index:10;padding:clamp(6px,.8vw,12px) clamp(14px,2vw,24px);border-radius:100px;border:2px solid rgba(255,255,255,.2);background:rgba(0,0,0,.3);color:var(--dim);font-size:clamp(13px,1.5vw,18px);font-weight:700;cursor:pointer;font-family:inherit;transition:all .3s ease;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
[dir="rtl"] .tut-skip{right:auto;left:clamp(8px,1.5vw,18px)}
.tut-skip:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.4)}
.tut-stage{display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1vw,14px);max-width:min(90vw,1600px);width:100%;padding:clamp(8px,1.5vw,20px);text-align:center;transition:opacity .3s ease;max-height:calc(100vh - 80px);overflow:hidden}
.tut-emoji{font-size:clamp(32px,6vw,56px);line-height:1}
.tut-title{font-size:clamp(22px,4vw,42px);font-weight:900;background:linear-gradient(135deg,var(--purple),var(--teal),var(--yellow));background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;animation:gradientShift 4s ease infinite;line-height:1.1}
.tut-subtitle{font-size:clamp(13px,2vw,22px);color:var(--dim);font-weight:600;line-height:1.3;max-width:600px}
.tut-avatar-row{display:flex;justify-content:center;gap:clamp(10px,2vw,28px);flex-wrap:nowrap}
.tut-player{display:flex;flex-direction:column;align-items:center;gap:clamp(2px,.3vw,4px)}
.tut-avatar{width:clamp(60px,9vw,110px);height:clamp(60px,9vw,110px)}
.tut-avatar svg{width:100%;height:100%;display:block}
.tut-player-name{font-size:clamp(11px,1.4vw,18px);font-weight:700;color:var(--text)}
.tut-player-lie{font-size:clamp(12px,1.5vw,18px);font-weight:600;color:var(--purple);background:rgba(162,155,254,.1);border:1px solid rgba(162,155,254,.3);border-radius:100px;padding:clamp(2px,.3vw,4px) clamp(8px,1vw,14px)}
.tut-player-input{background:rgba(0,184,148,.08);border:2px solid var(--green);border-radius:var(--r);padding:clamp(4px,.5vw,8px) clamp(8px,1vw,14px);min-width:clamp(60px,8vw,100px);min-height:clamp(28px,3vw,36px);display:flex;align-items:center;gap:1px;margin-top:clamp(4px,.5vw,8px)}
.tut-input-text{font-size:clamp(13px,1.6vw,20px);font-weight:700;color:var(--green)}
.tut-input-cursor{font-size:clamp(13px,1.6vw,20px);color:var(--green);animation:blink-cursor .6s step-end infinite}
/* Slide artwork. Bounded by the stage so a large asset cannot push the cast,
   answer board or subtitle off a 720p screen. */
.tut-media{max-width:min(70vw,900px);max-height:min(38vh,420px);width:auto;height:auto;border-radius:var(--rl);box-shadow:0 4px 30px rgba(0,0,0,.35);object-fit:contain}
.tut-video{background:#000}
/* Tutorial question card + typing */
.tut-question-card{background:var(--glass);border:2px solid rgba(162,155,254,.3);border-radius:var(--rl);padding:clamp(14px,2vw,24px) clamp(20px,3vw,36px);max-width:600px;width:100%;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 4px 30px rgba(0,0,0,.3);display:flex;align-items:center;gap:clamp(8px,1.5vw,16px)}
.tut-q-label{font-size:clamp(28px,4vw,44px);flex-shrink:0}
.tut-q-text{font-size:clamp(22px,4vw,40px);font-weight:700;color:var(--text);line-height:1.2}
.tut-answer-box{background:rgba(0,184,148,.1);border:2px solid var(--green);border-radius:var(--r);padding:clamp(10px,1.5vw,18px) clamp(16px,2.5vw,28px);max-width:400px;width:100%;display:flex;align-items:center;gap:2px;min-height:clamp(44px,5vw,60px)}
.tut-answer-text{font-size:clamp(22px,3.5vw,36px);font-weight:700;color:var(--green)}
.tut-cursor{font-size:clamp(22px,3.5vw,36px);color:var(--green);animation:blink-cursor .6s step-end infinite}
@keyframes blink-cursor{0%,100%{opacity:1}50%{opacity:0}}

/* Tutorial answer cards */
.tut-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(6px,1vw,12px);max-width:500px;width:100%}
.tut-card{padding:clamp(10px,1.5vw,18px);background:var(--glass);border:2px solid rgba(255,255,255,.12);border-radius:var(--r);text-align:center;font-size:clamp(16px,2.5vw,26px);font-weight:700;display:flex;align-items:center;justify-content:center;gap:clamp(4px,.6vw,8px);transition:all .4s ease;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.tut-card-text{flex:1}
.tut-card-badge{font-size:clamp(10px,1.2vw,14px);font-weight:600;padding:clamp(2px,.3vw,4px) clamp(6px,1vw,10px);border-radius:100px;white-space:nowrap}
.tut-badge-correct{background:rgba(0,184,148,.2);color:var(--green);border:1px solid var(--green)}
.tut-badge-player{background:rgba(162,155,254,.2);color:var(--purple);border:1px solid var(--purple)}
.tut-card-correct{border-color:var(--green);box-shadow:0 0 20px rgba(0,184,148,.25);background:rgba(0,184,148,.08)}
.tut-card-player{border-color:var(--purple);box-shadow:0 0 16px rgba(162,155,254,.2);background:rgba(162,155,254,.06)}
.tut-card-lie{opacity:.5}

.tut-start-btn{margin-top:clamp(8px,1.5vw,16px);animation:pulse 1.5s ease-in-out infinite}
.tut-dots{display:flex;gap:clamp(6px,1vw,12px);margin-top:clamp(16px,3vw,32px)}
.tut-dot{width:clamp(12px,1.5vw,18px);height:clamp(12px,1.5vw,18px);border-radius:50%;background:rgba(255,255,255,.2);transition:all .4s ease;cursor:pointer}
.tut-dot:hover{background:rgba(255,255,255,.5);transform:scale(1.2)}
.tut-dot.active{background:var(--teal);box-shadow:0 0 10px rgba(78,205,196,.4);transform:scale(1.4)}
.tut-dot.active:hover{background:var(--teal)}

/* ── Hoodwink Logo ── */
.hw-logo-img{display:block;object-fit:contain;border-radius:clamp(16px,3vw,32px);filter:drop-shadow(0 4px 20px rgba(108,92,231,.4))}
.hw-logo-start{width:clamp(120px,min(22vw,26vh),280px);height:clamp(120px,min(22vw,26vh),280px);margin:0 auto clamp(8px,1.5vh,20px);animation:float 3s ease-in-out infinite}
.hw-logo-intro{width:clamp(80px,12vw,160px);height:clamp(80px,12vw,160px);margin:0 auto clamp(8px,1.5vw,16px);animation:float 3s ease-in-out infinite}
.hw-logo-sm{width:clamp(40px,5vw,64px);height:clamp(40px,5vw,64px);margin-bottom:clamp(4px,.5vw,8px)}
.hw-logo-credits{width:clamp(60px,8vw,100px);height:clamp(60px,8vw,100px);margin:0 auto clamp(8px,1vw,14px)}

/* ── INTRO ── */
#screen-intro,#screen-lobby{gap:clamp(14px,2.5vw,32px)}
.logo-title{font-size:clamp(52px,11vw,128px);font-weight:900;letter-spacing:-2px;background:linear-gradient(135deg,var(--red),var(--purple),var(--teal),var(--yellow));background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;animation:gradientShift 4s ease infinite;filter:drop-shadow(0 0 30px rgba(255,107,107,.3))}
.logo-subtitle{font-size:clamp(18px,min(3vw,4vh),58px);color:var(--dim);letter-spacing:clamp(3px,1vw,10px);text-transform:uppercase;margin-top:clamp(4px,.8vh,12px)}
.logo-tagline{font-size:clamp(14px,min(2vw,3vh),44px);color:var(--muted);margin-top:clamp(6px,1.2vh,18px)}

/* ── LOBBY — QR left, Room Code right, players below, no scroll ── */
#screen-lobby{gap:clamp(6px,.8vw,12px);justify-content:center;padding:clamp(8px,1.5vw,16px);overflow:hidden}
.lobby-top{display:flex;align-items:stretch;justify-content:center;gap:0;width:100%;max-width:min(94vw,2000px);flex-shrink:0;padding-top:clamp(40px,min(6vw,7vh),70px)}
@media(max-width:600px){.lobby-top{flex-direction:column;align-items:center;gap:clamp(6px,1vw,10px)}}

/* QR side — left */
.lobby-qr{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--glass);border:2px solid rgba(255,255,255,.1);border-radius:var(--rl) 0 0 var(--rl);padding:clamp(28px,min(4vw,5vh),56px);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);flex:1}
@media(max-width:600px){.lobby-qr{border-radius:var(--rl)}}
#qrCanvas{width:clamp(200px,min(26vw,32vh),400px);height:clamp(200px,min(26vw,32vh),400px);border-radius:var(--r);background:#fff;padding:clamp(6px,.8vw,12px)}
.qr-label{font-size:clamp(18px,min(2.5vw,3.5vh),51px);color:var(--text);font-weight:800;margin-top:clamp(8px,1.2vw,16px);letter-spacing:1px}

/* Room code side — right */
.lobby-join-info{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;flex:1;background:var(--glass);border:2px solid rgba(255,255,255,.1);border-left:none;border-radius:0 var(--rl) var(--rl) 0;padding:clamp(28px,min(4vw,5vh),56px);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
@media(max-width:600px){.lobby-join-info{border-radius:var(--rl);border-left:2px solid rgba(255,255,255,.1)}}
.room-code-box{margin:clamp(6px,1vw,12px) 0;text-align:center}
.room-code-label{font-size:clamp(16px,min(2vw,2.5vh),36px);color:var(--dim);letter-spacing:clamp(3px,.6vw,6px);text-transform:uppercase;font-weight:700}
.room-code{font-size:clamp(48px,min(8vw,10vh),146px);font-weight:900;letter-spacing:clamp(8px,2vw,20px);color:#fff;font-family:"SF Mono",Consolas,monospace;text-shadow:0 0 24px var(--purple),0 0 48px rgba(108,92,231,.3)}
.lobby-url{font-size:clamp(20px,min(3vw,4vh),58px);color:var(--teal);font-weight:800;margin-top:clamp(8px,1vw,14px);letter-spacing:1px}

/* Players grid — fills remaining space, no scroll */
.players-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(6px,.6vw,12px);width:100%;max-width:min(94vw,2000px);padding:0;flex:1;align-content:center}
@media(max-width:768px){.players-grid{grid-template-columns:repeat(2,1fr)}}
.player-card{width:100%;padding:clamp(4px,.5vw,10px);background:var(--glass);border:2px solid rgba(255,255,255,.1);border-radius:var(--rl);text-align:center;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transition:all .5s cubic-bezier(.34,1.56,.64,1);opacity:0;transform:scale(.5);display:flex;flex-direction:column;align-items:center}
.player-card.visible{opacity:1;transform:scale(1)}
/* Avatar inside player card shrinks to fit.
 * 14vh, not 16vh: this is the seven- and eight-player case, which is two rows. See the
 * two-row note below. */
.player-card .hw-avatar-container{width:clamp(60px,min(10vw,14vh),200px) !important;height:clamp(60px,min(10vw,14vh),200px) !important}

/* ── Lobby roster scales to the number of people in it ──────────────────────────────
 * The grid was `repeat(4,1fr)` whatever the roster held, so a room of two rendered two
 * quarter-width cards with ~130px avatars on a 1080p television — unreadable from a sofa,
 * and most of the screen empty. `data-count` is set by `renderRoster`, so the layout follows
 * the room instead of a constant. Eight players keep the original 4x2 arrangement.
 *
 * Attribute selectors outrank the plain `.players-grid` rule (and the small-screen media
 * query), which is what makes these apply without !important on the grid itself. */
.players-grid[data-count="1"]{grid-template-columns:minmax(0,1fr)}
.players-grid[data-count="2"],
.players-grid[data-count="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.players-grid[data-count="3"],
.players-grid[data-count="5"],
.players-grid[data-count="6"]{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ── Avatar height is capped by how many ROWS the roster takes, not how many people ──
 * These sizes were set per player count, but the count is not what fills the screen — the
 * row count is, and the two do not track each other. Three players are one row of three;
 * four are two rows of two. They shared a rule at 28vh, so four players asked for two rows
 * of 302px avatars plus labels under a 588px QR panel, on a screen 1080px tall.
 *
 * Nothing reported it, because `#screen-lobby` is `overflow:hidden` with
 * `align-content:center`: the column was simply centred and both ends were cut off. At
 * 1080p with four players the roster's name labels sat 127px below the fold and the top of
 * the QR panel 139px above it, and `scrollHeight` still equalled `innerHeight`, so the page
 * reported no overflow at all. Every player from the third onward showed up on the TV —
 * the one screen the whole room is looking at — with their name cut off.
 *
 * So the cap is per row count: one row may be tall, two rows may not exceed 14vh each.
 * Measured for counts 1-8 at 1280x720 and 1920x1080; no label falls below the fold and no
 * panel is clipped above it. The `vw` terms are unchanged — they still govern how wide a
 * face may get on a short, wide screen; only the height ceiling moved. */

/* One row */
.players-grid[data-count="1"] .player-card .hw-avatar-container,
.players-grid[data-count="2"] .player-card .hw-avatar-container{width:clamp(120px,min(22vw,34vh),460px) !important;height:clamp(120px,min(22vw,34vh),460px) !important}
.players-grid[data-count="3"] .player-card .hw-avatar-container{width:clamp(100px,min(16vw,28vh),340px) !important;height:clamp(100px,min(16vw,28vh),340px) !important}

/* Two rows */
.players-grid[data-count="4"] .player-card .hw-avatar-container{width:clamp(100px,min(16vw,14vh),340px) !important;height:clamp(100px,min(16vw,14vh),340px) !important}
.players-grid[data-count="5"] .player-card .hw-avatar-container,
.players-grid[data-count="6"] .player-card .hw-avatar-container{width:clamp(80px,min(12vw,14vh),260px) !important;height:clamp(80px,min(12vw,14vh),260px) !important}

/* Names scale with the cards, or a four-player lobby has huge faces and tiny labels. */
.players-grid[data-count="1"] .player-name,
.players-grid[data-count="2"] .player-name{font-size:clamp(20px,min(3vw,4.4vh),64px)}
.players-grid[data-count="3"] .player-name,
.players-grid[data-count="4"] .player-name{font-size:clamp(18px,min(2.4vw,3.4vh),38px)}
.players-grid[data-count="5"] .player-name,
.players-grid[data-count="6"] .player-name{font-size:clamp(16px,min(2vw,2.9vh),42px)}
.player-name{font-size:clamp(14px,min(1.8vw,2.5vh),36px);font-weight:700;margin-top:clamp(2px,.4vh,6px)}
.player-title,.player-status{display:none}

/* ── ROUND INTRO ── */
#screen-roundIntro{gap:clamp(12px,2vw,24px)}
.round-badge{padding:clamp(30px,5vw,64px) clamp(40px,6vw,100px);background:var(--glass);border:3px solid var(--purple);border-radius:var(--rl);text-align:center;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 0 60px rgba(162,155,254,.15),var(--shadow);display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.5vw,20px)}
.round-number{font-size:clamp(48px,min(10vw,14vh),204px);font-weight:900;background:linear-gradient(135deg,var(--purple),var(--teal));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;line-height:1.15}
.round-divider{width:clamp(60px,10vw,120px);height:3px;background:linear-gradient(90deg,transparent,var(--purple),transparent);border-radius:2px}
.round-scoring{display:flex;gap:clamp(20px,4vw,60px);justify-content:center;align-items:stretch}
.round-score-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(4px,.5vw,8px);min-width:clamp(120px,16vw,220px)}
.round-score-icon{font-size:clamp(28px,4vw,48px);line-height:1;height:clamp(32px,5vw,52px);display:flex;align-items:center;justify-content:center}
.round-score-val{font-size:clamp(32px,min(6vw,8vh),117px);font-weight:900;line-height:1.15}
.round-truth .round-score-val{color:var(--green)}
.round-fool .round-score-val{color:var(--yellow)}
.round-score-label{font-size:clamp(14px,1.5vw,18px);color:var(--dim);font-weight:600;letter-spacing:1px;text-transform:uppercase;text-align:center}

/* ── CATEGORY ── */
#screen-category{gap:clamp(8px,1.2vw,16px)}

/* Picker hero — big avatar + name */
.picker-hero{display:flex;align-items:center;gap:clamp(12px,2vw,24px);background:var(--glass);border:2px solid var(--yellow);border-radius:var(--rl);padding:clamp(10px,1.5vw,20px) clamp(20px,3vw,40px);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 0 30px rgba(253,203,110,.15)}
.picker-hero .hw-avatar-container{width:clamp(80px,10vw,150px) !important;height:clamp(80px,10vw,150px) !important;flex-shrink:0;filter:drop-shadow(0 0 16px rgba(253,203,110,.3))}
.picker-info{display:flex;flex-direction:column;gap:clamp(2px,.3vw,4px)}
.picker-label{font-size:clamp(14px,1.5vw,18px);color:var(--dim);text-transform:uppercase;letter-spacing:clamp(2px,.4vw,4px);font-weight:600}
.picker-name{font-size:clamp(22px,4vw,42px);font-weight:900;color:var(--yellow);line-height:1.1}
.picker-action{font-size:clamp(14px,1.5vw,18px);color:var(--dim);font-weight:600;margin-top:2px}

/* Category cards */
.category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.5vw,20px);max-width:min(90vw,1800px);width:100%}
@media(max-width:600px){.category-grid{grid-template-columns:repeat(2,1fr)}}
.cat-card{padding:clamp(16px,min(2.5vw,3.5vh),36px);background:var(--glass);border:2px solid rgba(255,255,255,.12);border-radius:var(--r);text-align:center;font-size:clamp(24px,min(4vw,5vh),73px);font-weight:600;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:all .3s ease;cursor:default;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-card.cat-highlight{border-color:var(--yellow);box-shadow:0 0 20px rgba(255,230,109,.25)}
.cat-card.cat-selected{border-color:var(--teal);background:rgba(78,205,196,.15);box-shadow:0 0 30px rgba(78,205,196,.3);transform:scale(1.08)}

/* ── COUNTDOWN ── */
#screen-countdown{gap:clamp(8px,2vh,24px)}
.countdown-number{font-size:clamp(100px,min(22vw,30vh),437px);font-weight:900;color:var(--yellow);text-shadow:0 0 60px rgba(255,230,109,.5)}
.countdown-label{font-size:clamp(18px,min(3vw,4vh),58px);color:var(--dim);letter-spacing:4px;text-transform:uppercase}

/* ── QUESTION ── */
#screen-question{gap:clamp(14px,2.5vw,30px)}
.question-category{font-size:clamp(14px,1.6vw,20px);color:var(--purple);text-transform:uppercase;letter-spacing:clamp(3px,.8vw,8px);font-weight:600}
.question-number{font-size:clamp(14px,1.6vw,20px);color:var(--muted)}
.question-card{max-width:min(90vw,1600px);width:100%;padding:clamp(24px,4vw,54px) clamp(20px,5vw,64px);background:var(--glass);border:2px solid rgba(162,155,254,.3);border-radius:var(--rl);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);text-align:center;box-shadow:var(--shadow),0 0 60px rgba(162,155,254,.1)}
.question-text{font-size:clamp(22px,min(3.5vw,5vh),73px);font-weight:700;line-height:1.4}
.question-timer{width:clamp(100px,14vw,180px);height:clamp(100px,14vw,180px);border-radius:50%;border:4px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:clamp(36px,7vw,72px);font-weight:900;color:var(--yellow);position:relative}
.timer-ring{position:absolute;inset:0;border-radius:50%;border:4px solid var(--teal);border-right-color:transparent;animation:spin 1s linear infinite}

/* ── WRITING LIES — timer + 4x2 player grid ── */
/* ── Shared sticky question bar across writing/voting/reveal ── */
#stickyQuestion{position:fixed;top:clamp(48px,min(7vw,8vh),72px);left:0;right:0;z-index:50;padding:clamp(8px,1vh,16px) clamp(16px,3vw,32px);text-align:center;background:rgba(10,10,26,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(162,155,254,.15);display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1vh,16px)}
.sq-text{font-size:clamp(22px,min(4.5vw,6vh),87px);font-weight:700;color:var(--text);line-height:1.15;width:100%;max-height:2.3em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-align:center}
.sq-timer{position:relative;width:clamp(100px,min(16vw,20vh),240px);height:clamp(100px,min(16vw,20vh),240px);flex-shrink:0;display:flex;align-items:center;justify-content:center;margin:0 auto}
.sq-timer .sq-timer-ring{position:absolute;inset:0;width:100%;height:100%}
.sq-timer-ring circle{fill:none;stroke-width:7;stroke-linecap:round;transform:rotate(-90deg);transform-origin:center}
.sq-timer-ring .ring-bg{stroke:rgba(255,255,255,.1)}
.sq-timer-ring .ring-fg{stroke:var(--teal);stroke-dasharray:565;stroke-dashoffset:0;transition:stroke-dashoffset .95s linear,stroke .3s ease}
.sq-timer-ring .ring-fg.urgent{stroke:var(--red)}
.sq-timer-value{font-size:clamp(40px,min(8vw,10vh),146px);font-weight:900;color:var(--yellow);z-index:1}

#screen-writing{gap:0;justify-content:center;padding-top:clamp(240px,min(38vw,48vh),460px);overflow:hidden}

/* ── Player status tracker — fills remaining space ── */
.writing-players{display:flex;justify-content:center;align-items:center;width:100%;flex:1;padding:clamp(8px,1.5vw,16px)}
.ws-tracker{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(16px,min(4vw,5vh),40px);width:100%}
.ws-dots{display:flex;justify-content:center;gap:clamp(14px,min(3vw,4vh),36px);flex-wrap:wrap}
.ws-dot{width:clamp(52px,min(10vw,13vh),120px);height:clamp(52px,min(10vw,13vh),120px);border-radius:50%;border:4px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);transition:all .5s cubic-bezier(.34,1.56,.64,1)}
.ws-dot.done{border-color:var(--green);background:var(--green);box-shadow:0 0 24px rgba(0,184,148,.5);animation:dotPop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes dotPop{0%{transform:scale(0)}60%{transform:scale(1.3)}100%{transform:scale(1)}}
.ws-count{font-size:clamp(40px,min(8vw,12vh),175px);font-weight:900;color:var(--muted)}
.ws-count span{color:var(--green);font-weight:900}

/* ── Voting — fills entire viewport below sticky bar ── */
#screen-voting{gap:clamp(6px,1vh,12px);padding-top:clamp(240px,min(38vw,48vh),460px);overflow:hidden;justify-content:flex-start}

/* ── Answer grid — fills remaining space, cards stretch to fill ── */
.answers-grid{display:grid;gap:clamp(6px,min(1vw,1.2vh),14px);max-width:min(92vw,2000px);width:100%;flex:1;align-content:start;padding:0 clamp(8px,1vw,16px)}
@media(max-width:600px){.answers-grid{grid-template-columns:1fr !important}}
.answer-card{padding:clamp(10px,min(1.5vw,1.8vh),24px) clamp(14px,2vw,32px);background:var(--glass);border:2px solid rgba(255,255,255,.1);border-radius:var(--r);text-align:center;font-size:clamp(28px,min(4.5vw,6vh),87px);font-weight:600;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:all .4s ease;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:clamp(8px,1vw,16px);min-height:0}
.answer-letter{display:inline-flex;width:clamp(40px,min(5vw,6.5vh),72px);height:clamp(40px,min(5vw,6.5vh),72px);border-radius:50%;background:rgba(255,255,255,.1);align-items:center;justify-content:center;font-size:clamp(22px,min(3vw,4vh),58px);font-weight:700;flex-shrink:0}
.answer-text{flex:1;text-align:start;white-space:nowrap;overflow:hidden}

/* Voting tracker — inline row below answers */
.voting-submitted-row{display:flex;justify-content:center;width:100%;padding:clamp(8px,1vh,16px) clamp(8px,1vw,16px);flex-shrink:0}
.voting-tracker{display:flex;align-items:center;justify-content:center;gap:clamp(10px,2vw,24px);width:100%}
.vt-dots{display:flex;justify-content:center;gap:clamp(10px,min(2vw,3vh),28px);flex-wrap:wrap}
.vt-dot{width:clamp(48px,min(7vw,9vh),90px);height:clamp(48px,min(7vw,9vh),90px);border-radius:50%;border:4px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);transition:all .5s cubic-bezier(.34,1.56,.64,1)}
.vt-dot.done{border-color:var(--green);background:var(--green);box-shadow:0 0 24px rgba(0,184,148,.5);animation:dotPop .5s cubic-bezier(.34,1.56,.64,1)}
.vt-count{font-size:clamp(28px,min(5vw,6vh),87px);font-weight:900;color:var(--muted);white-space:nowrap}
.vt-count span{color:var(--green);font-weight:900}

/* ══ CINEMATIC REVEAL ══ */
/* The padding reserves room for the fixed `#stickyQuestion` bar. The 240px floor
 * over-reserved it on a 720p screen — a third of the height, where the bar itself needs
 * about 173px (its 8vh top offset plus two lines at 6vh, with the timer hidden on this
 * screen) — and the excess pushed the fooled players off the bottom. 176px clears the bar
 * at 720p and the `26vh` term governs everywhere taller. */
#screen-reveal{gap:0;justify-content:flex-start;padding-top:clamp(176px,min(30vw,26vh),380px);overflow:hidden}
/* ═══ CINEMATIC REVEAL STAGE ═══ */
.reveal-stage{width:clamp(340px,90vw,min(94vw,2000px));background:none;border:none;border-radius:0;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;text-align:center;box-shadow:none;position:relative;overflow:visible;display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1vw,14px);transition:opacity .5s ease,transform .5s ease}
.reveal-stage.rv-cinematic,.reveal-stage.rv-truth{background:none;border:none;box-shadow:none}

/* ── Answer Card — normal equal padding ── */
.rv-card-wrap{opacity:0;transform:scale(.6) rotateY(90deg);transition:all .7s cubic-bezier(.34,1.56,.64,1);display:flex;flex-direction:column;align-items:center;position:relative}
.rv-card-wrap.show{opacity:1;transform:scale(1) rotateY(0deg)}
.rv-card-main{position:relative;background:linear-gradient(135deg,rgba(108,92,231,.12),rgba(162,155,254,.06));border:3px solid rgba(162,155,254,.5);border-radius:var(--rl);padding:clamp(24px,min(4vw,6vh),60px) clamp(40px,min(7vw,10vh),120px);min-width:clamp(300px,65vw,1000px);box-shadow:0 12px 60px rgba(108,92,231,.2);animation:rv-border-pulse 2s ease-in-out infinite;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.rv-card-main.rv-card-correct{background:linear-gradient(135deg,rgba(0,184,148,.12),rgba(85,239,196,.06));border-color:rgba(0,184,148,.6);box-shadow:0 12px 60px rgba(0,184,148,.25)}
.rv-card-glow{position:absolute;inset:-6px;border-radius:var(--rl);background:linear-gradient(135deg,rgba(162,155,254,.3),rgba(108,92,231,.1));filter:blur(16px);opacity:.5;animation:rv-glow-pulse 2s ease-in-out infinite;z-index:-1}
.rv-card-glow.rv-glow-green{background:linear-gradient(135deg,rgba(0,184,148,.4),rgba(85,239,196,.15))}
.rv-card-text{font-size:clamp(44px,min(9vw,12vh),130px);font-weight:900;color:#fff;line-height:1.2;text-shadow:0 2px 20px rgba(255,255,255,.2)}
@keyframes rv-border-pulse{0%,100%{border-color:rgba(162,155,254,.5)}50%{border-color:rgba(162,155,254,.8)}}
@keyframes rv-glow-pulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:.7;transform:scale(1.02)}}
.rv-truth-card .rv-card-main{animation-name:rv-border-pulse-green}
@keyframes rv-border-pulse-green{0%,100%{border-color:rgba(0,184,148,.5)}50%{border-color:rgba(0,184,148,.9)}}

/* ── Fooled Players — floating below answer card, does not shift card ── */
/* This row runs off BOTH sides of the screen once six or more players are fooled, and the
 * avatars were never the reason — `.rv-fooled-name` is `5vh`, so a ten-character name is
 * ~270px wide at 1080p, and eight of those are 2610px on a 1920px screen. The avatars step
 * down per count (`.rv-fooled-4` … `-8`); the names and badges did not step down at all.
 *
 * Measured before the fix: 8 fooled players overhung by 345px per side at 1080p and 243px
 * at 720p. Names are the widest thing on the row, and a real username can be longer than
 * the one I tested with, so the row is also bounded and the names truncate — that holds for
 * any name length, which a per-count font size alone would not. */
.rv-fooled-row{display:flex;justify-content:center;align-items:flex-start;gap:clamp(8px,1.2vw,20px);margin-top:clamp(-40px,-5vw,-70px);z-index:2;max-width:96vw}
.rv-fooled-player{min-width:0;max-width:100%}
.rv-fooled-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rv-fooled-5 .rv-fooled-name{font-size:clamp(16px,min(2.2vw,3vh),44px)}
.rv-fooled-6 .rv-fooled-name,
.rv-fooled-7 .rv-fooled-name,
.rv-fooled-8 .rv-fooled-name{font-size:clamp(13px,min(1.6vw,2.2vh),32px)}
.rv-fooled-6 .rv-fooled-badge,
.rv-fooled-7 .rv-fooled-badge,
.rv-fooled-8 .rv-fooled-badge{font-size:clamp(10px,min(1.1vw,1.5vh),22px)}
.rv-fooled-player{display:flex;flex-direction:column;align-items:center;gap:clamp(2px,.4vw,6px);opacity:0;transform:translateY(-20px) scale(.3);transition:all .5s cubic-bezier(.34,1.56,.64,1)}
.rv-fooled-player.show{opacity:1;transform:translateY(0) scale(1)}
.rv-fooled-player .hw-avatar-container{width:clamp(100px,min(18vw,22vh),260px) !important;height:clamp(100px,min(18vw,22vh),260px) !important}
.rv-fooled-name{font-size:clamp(22px,min(3.5vw,5vh),73px);font-weight:800;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.rv-fooled-badge{font-size:clamp(17px,min(2.5vw,3vh),44px);font-weight:800;color:var(--red);background:rgba(255,107,107,.2);border:1px solid rgba(255,107,107,.4);border-radius:100px;padding:2px clamp(6px,.8vw,14px);text-transform:uppercase;letter-spacing:1px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
/* Scale avatars for many players */
.rv-fooled-4 .rv-fooled-player .hw-avatar-container{width:clamp(90px,min(15vw,19vh),220px) !important;height:clamp(90px,min(15vw,19vh),220px) !important}
.rv-fooled-5 .rv-fooled-player .hw-avatar-container{width:clamp(80px,min(13vw,17vh),190px) !important;height:clamp(80px,min(13vw,17vh),190px) !important}
.rv-fooled-6 .rv-fooled-player .hw-avatar-container{width:clamp(72px,min(12vw,15vh),170px) !important;height:clamp(72px,min(12vw,15vh),170px) !important}
.rv-fooled-7 .rv-fooled-player .hw-avatar-container{width:clamp(64px,min(10vw,13vh),150px) !important;height:clamp(64px,min(10vw,13vh),150px) !important}
.rv-fooled-8 .rv-fooled-player .hw-avatar-container{width:clamp(56px,min(9vw,11vh),130px) !important;height:clamp(56px,min(9vw,11vh),130px) !important}

/* ── Inventor badge (floats on card edge like fooled players) ── */
.rv-inventor-badge{font-size:clamp(18px,min(3vw,3.5vh),51px);font-weight:900;color:var(--yellow);background:rgba(255,215,0,.12);border:1px solid rgba(255,215,0,.4);border-radius:100px;padding:2px clamp(8px,1vw,14px);text-shadow:0 1px 6px rgba(255,215,0,.3)}
.rv-inventor-pts{font-size:clamp(26px,min(4.5vw,5.5vh),80px);font-weight:900;color:var(--yellow);text-shadow:0 0 16px rgba(255,215,0,.4);animation:rv-pts-bounce 1s cubic-bezier(.34,1.56,.64,1)}
@keyframes rv-pts-bounce{0%{transform:scale(0);opacity:0}60%{transform:scale(1.3)}100%{transform:scale(1);opacity:1}}

/* ── Truth voters row ── */
.rv-truth-section{opacity:0;transform:translateY(20px);transition:all .6s cubic-bezier(.34,1.56,.64,1);display:flex;justify-content:center;align-items:center;gap:clamp(10px,1.5vw,24px)}
.rv-truth-section.show{opacity:1;transform:translateY(0)}
.rv-truth-player{display:flex;flex-direction:column;align-items:center;gap:clamp(2px,.4vw,6px);opacity:0;transform:scale(.3);transition:all .5s cubic-bezier(.34,1.56,.64,1)}
.rv-truth-player.show{opacity:1;transform:scale(1)}
.rv-truth-player .hw-avatar-container{width:clamp(100px,min(18vw,22vh),260px) !important;height:clamp(100px,min(18vw,22vh),260px) !important}
.rv-truth-badge{font-size:clamp(28px,min(5vw,6vh),87px);font-weight:900;color:var(--yellow);text-shadow:0 0 16px rgba(255,215,0,.4)}

/* Nobody found truth */
.rv-nobody-truth{font-size:clamp(20px,min(3.5vw,4.5vh),66px);color:var(--red);font-weight:800;opacity:0;transform:scale(.8);transition:all .5s cubic-bezier(.34,1.56,.64,1)}
.rv-nobody-truth.show{opacity:1;transform:scale(1)}
/* ── ROUND POINTS — single-column ranking table ── */
#screen-roundPoints{gap:clamp(8px,1.2vw,16px);justify-content:flex-start;padding-top:clamp(16px,3vw,32px)}
.rp-title{font-size:clamp(24px,4vw,42px);font-weight:700;color:var(--yellow);animation:neonPulse 2s ease-in-out infinite}
.rp-grid{display:flex;flex-direction:column;gap:clamp(4px,.5vw,10px);width:100%;max-width:min(90vw,1800px)}
.rp-card{display:flex;align-items:center;gap:clamp(10px,1.5vw,20px);padding:clamp(8px,1vw,16px) clamp(14px,2vw,28px);background:var(--glass);border:2px solid rgba(255,255,255,.08);border-radius:var(--r);transition:all .5s ease;opacity:0;transform:translateX(-30px)}
.rp-card.visible{opacity:1;transform:translateX(0)}
.rp-card.top-earner{border-color:var(--gold);box-shadow:0 0 20px rgba(255,215,0,.2);background:rgba(255,215,0,.06)}
.rp-card.zero{opacity:.45}
.rp-rank{font-size:clamp(18px,min(2.5vw,3vh),44px);font-weight:800;width:clamp(32px,4vw,48px);text-align:center;flex-shrink:0;color:var(--dim)}
/* Eight rows of this, stacked, are what has to fit — and `.rp-grid` is a plain flex
 * column, so nothing shares the height out the way `.podium-list` does with
 * `flex:1 1 0`. The row's height is set by this avatar, so this is the term that decides
 * whether the last player is on screen. At 8vh it was not: seven players ran 26px past the
 * fold at 720p and eight ran 119px.
 *
 * The floor matters as much as the cap. At 720p, 5.5vh is 40px, so a 48px floor would win
 * and the overflow would survive the fix — which is what made the first attempt at this
 * useless. */
.rp-card .hw-avatar-container{width:clamp(32px,min(6vw,5.5vh),80px) !important;height:clamp(32px,min(6vw,5.5vh),80px) !important;flex-shrink:0}
.rp-name{flex:1;font-size:clamp(18px,min(2.5vw,3vh),44px);font-weight:700}
.rp-pts{font-size:clamp(22px,min(3vw,4vh),58px);font-weight:900;color:var(--yellow)}
.rp-card.zero .rp-pts{color:var(--muted)}

/* ── LEADER ── */
#screen-leader{gap:clamp(12px,2vw,26px)}
.leader-banner{font-size:clamp(16px,2vw,24px);color:var(--gold);letter-spacing:clamp(3px,.8vw,8px);text-transform:uppercase;font-weight:600}
.leader-badge{padding:clamp(24px,3.5vw,48px) clamp(36px,5vw,72px);background:linear-gradient(135deg,rgba(255,215,0,.08),rgba(255,107,107,.06));border:3px solid var(--gold);border-radius:var(--rl);text-align:center;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 0 50px rgba(255,215,0,.15),var(--shadow)}
.leader-badge .char-avatar{margin:0 auto 10px}
.leader-name{font-size:clamp(28px,min(5vw,7vh),102px);font-weight:900;background:linear-gradient(135deg,var(--gold),var(--yellow));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent}
.leader-score{font-size:clamp(16px,min(2.5vw,3.5vh),51px);color:var(--dim);margin-top:clamp(2px,.5vh,8px)}
.leader-quote{font-size:clamp(13px,min(1.4vw,2vh),29px);color:var(--muted);margin-top:clamp(4px,.8vh,12px);font-style:italic}

/* ── PODIUM — single-column ranking table ── */
#screen-podium{gap:clamp(4px,.6vh,10px);justify-content:flex-start;padding:clamp(10px,2vh,20px) clamp(16px,var(--tv-safe),48px)}
.podium-title{font-size:clamp(22px,min(4vw,5vh),73px);font-weight:700;color:var(--yellow);animation:neonPulse 2s ease-in-out infinite;flex-shrink:0}
/* The leaderboard divides the screen instead of overflowing it.
   Measured before this change, 1920x1080 with eight players: 1403px of rows inside a 970px
   box — 433px of overflow, five rows visible, three players silently scrolled off the
   bottom of a television nobody can scroll. With three players the same fixed row height
   left half the screen empty. Both are the same bug: rows were sized without reference to
   how many there are.
   `--rows` is set by the renderer; `--unit` is one row's share of the list, and every size
   inside a row derives from it. So eight players get compact rows that all fit and three
   get tall ones that fill the frame, on any panel, with no scrollbar in either case. */
.podium-list{--rows:8;--unit:calc(88vh / var(--rows));display:flex;flex-direction:column;gap:clamp(4px,.8vh,14px);width:100%;max-width:min(94vw,2000px);overflow:hidden;flex:1}
.podium-list>.podium-row{flex:1 1 0;min-height:0}

.podium-row{display:flex;align-items:center;gap:clamp(10px,1.5vw,28px);padding:0 clamp(16px,2.5vw,44px);background:var(--glass);border:2px solid rgba(255,255,255,.08);border-radius:var(--r);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:all .6s cubic-bezier(.34,1.56,.64,1);flex-shrink:0}
.podium-row.gold{border-color:var(--gold);box-shadow:0 0 20px rgba(255,215,0,.15);background:rgba(255,215,0,.06)}
.podium-row.silver{border-color:var(--silver);box-shadow:0 0 14px rgba(192,192,192,.1)}
.podium-row.bronze{border-color:var(--bronze);box-shadow:0 0 14px rgba(205,127,50,.1)}
.podium-medal{font-size:clamp(20px,calc(var(--unit)*.40),80px);width:clamp(40px,calc(var(--unit)*.58),120px);text-align:center;flex-shrink:0;overflow:hidden}
.podium-row .hw-avatar-container{width:clamp(40px,calc(var(--unit)*.70),200px) !important;height:clamp(40px,calc(var(--unit)*.70),200px) !important;flex-shrink:0}
.podium-name{flex:1;min-width:0;font-size:clamp(20px,calc(var(--unit)*.40),96px);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.podium-score{font-size:clamp(22px,calc(var(--unit)*.44),110px);font-weight:900;color:var(--yellow);flex-shrink:0;margin-left:auto}
.podium-round-pts{font-size:clamp(18px,calc(var(--unit)*.34),84px);font-weight:900;color:var(--green);flex-shrink:0}
.movement{font-size:clamp(20px,min(3vw,4vh),58px);flex-shrink:0}
.movement.up{color:var(--green)}.movement.down{color:var(--red)}.movement.same{color:var(--muted)}

/* ── WINNER — compact header + full ranking table ── */
#screen-winner{gap:clamp(8px,1.5vh,20px);justify-content:center;align-items:center;padding:clamp(16px,3vh,32px)}
.winner-crown-top{font-size:clamp(48px,min(10vw,12vh),175px);animation:float 2s ease-in-out infinite;line-height:1}
.winner-avatar-slot{filter:drop-shadow(0 0 40px var(--gold))}
#screen-winner .hw-avatar-container{width:clamp(160px,min(30vw,36vh),420px) !important;height:clamp(160px,min(30vw,36vh),420px) !important}
.winner-label{font-size:clamp(18px,min(3vw,4vh),58px);color:var(--dim);letter-spacing:clamp(3px,.8vw,8px);text-transform:uppercase;font-weight:700}
.winner-name{font-size:clamp(36px,min(8vw,10vh),146px);font-weight:900;background:linear-gradient(135deg,var(--gold),var(--yellow),var(--gold));background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;animation:gradientShift 3s ease infinite;text-align:center}
.winner-score{font-size:clamp(24px,min(5vw,6vh),87px);color:var(--dim);font-weight:800}

/* ── CREDITS ── */
#screen-credits{gap:clamp(14px,2.5vw,28px)}
.credits-title{font-size:clamp(28px,5vw,52px);font-weight:900;background:linear-gradient(135deg,var(--teal),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent}
.credits-text{font-size:clamp(18px,min(2.5vw,3.5vh),51px);color:var(--dim);text-align:center;line-height:1.8;max-width:900px}
.credits-restart{font-size:clamp(13px,min(1.5vw,2vh),29px);color:var(--muted);margin-top:clamp(8px,1.5vh,20px);animation:breathe 2s ease-in-out infinite}

/* ── Controls ── */
#muteBtn{position:fixed;z-index:100;width:clamp(36px,5vw,48px);height:clamp(36px,5vw,48px);border-radius:50%;border:2px solid rgba(255,255,255,.2);background:rgba(0,0,0,.4);color:#fff;font-size:clamp(13px,1.6vw,16px);cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .3s ease;display:flex;align-items:center;justify-content:center;-webkit-appearance:none;appearance:none;padding:0;line-height:1;font-weight:600}
#muteBtn{top:clamp(8px,1.5vw,18px);right:clamp(8px,1.5vw,18px)}
#muteBtn:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.1);transform:scale(1.1)}
.hw-top-logo{position:fixed;top:clamp(8px,1.5vw,18px);left:50%;transform:translateX(-50%);z-index:100;width:clamp(36px,5vw,48px);height:clamp(36px,5vw,48px);border-radius:clamp(8px,1vw,12px);object-fit:contain;pointer-events:none;filter:drop-shadow(0 2px 8px rgba(108,92,231,.3))}

/* ── Start & Pause Overlays ── */
#startOverlay,#pauseOverlay{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;align-items:center;justify-content:center;transition:opacity .6s ease}
#startOverlay.hidden,#pauseOverlay.hidden{opacity:0;pointer-events:none}
.start-content{text-align:center;display:flex;flex-direction:column;align-items:center;gap:clamp(16px,3vh,36px);padding:clamp(20px,4vw,48px)}
.start-hero{display:flex;flex-direction:column;align-items:center}
.start-logo{font-size:clamp(56px,min(14vw,16vh),233px);font-weight:900;letter-spacing:-2px;background:linear-gradient(135deg,var(--red),var(--purple),var(--teal),var(--yellow));background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;animation:gradientShift 4s ease infinite}
.start-tagline{font-size:clamp(16px,min(2.5vw,3.5vh),51px);color:var(--dim);letter-spacing:clamp(2px,.4vw,6px);text-transform:uppercase;font-weight:600;margin-top:clamp(4px,.5vh,8px)}
.start-divider{width:clamp(80px,20vw,240px);height:2px;background:linear-gradient(90deg,transparent,rgba(162,155,254,.4),transparent);border-radius:2px}
.start-options{display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.5vh,16px)}
.start-lang-label{font-size:clamp(14px,min(2vw,2.5vh),36px);color:var(--muted);text-transform:uppercase;letter-spacing:2px;font-weight:700}
.start-lang-btns{display:flex;gap:clamp(10px,2vw,20px);justify-content:center}
.start-lang-btn{padding:clamp(12px,2vw,20px) clamp(28px,5vw,56px);border-radius:var(--r);border:2px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);color:var(--text);font-size:clamp(18px,min(3vw,3.5vh),51px);font-weight:700;cursor:pointer;transition:all .3s ease;font-family:inherit}
.start-lang-btn:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.1)}
.start-lang-btn.selected{border-color:var(--teal);background:rgba(78,205,196,.15);box-shadow:0 0 20px rgba(78,205,196,.2)}
.start-actions{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.5vh,18px)}
.start-btn{padding:clamp(16px,2.5vw,24px) clamp(48px,8vw,80px);border-radius:var(--rl);border:none;background:linear-gradient(135deg,var(--purple),var(--teal));color:#fff;font-size:clamp(20px,min(3.5vw,4.5vh),66px);font-weight:800;cursor:pointer;transition:all .3s ease;font-family:inherit;letter-spacing:1px;box-shadow:0 4px 24px rgba(108,92,231,.3)}
.start-btn:hover{transform:scale(1.05);box-shadow:0 0 40px rgba(108,92,231,.5)}
.start-btn-secondary{padding:clamp(10px,1.5vw,16px) clamp(32px,5vw,56px);border-radius:var(--rl);border:2px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);color:var(--text);font-size:clamp(16px,min(2.5vw,3vh),44px);font-weight:700;cursor:pointer;transition:all .3s ease;font-family:inherit;letter-spacing:.5px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.start-btn-secondary:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.1);transform:scale(1.03)}
#pauseBtn{position:fixed;top:clamp(8px,1.5vw,18px);left:clamp(8px,1.5vw,18px);z-index:100;width:clamp(36px,5vw,48px);height:clamp(36px,5vw,48px);border-radius:50%;border:2px solid rgba(255,255,255,.2);background:rgba(0,0,0,.4);color:#fff;font-size:clamp(14px,2vw,20px);cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .3s ease;display:flex;align-items:center;justify-content:center;-webkit-appearance:none;appearance:none;padding:0;line-height:1}
#pauseBtn:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.1);transform:scale(1.1)}
[dir="rtl"] #pauseBtn{left:auto;right:clamp(100px,13vw,130px)}

/* ══════════════════════════════════════════════════════
   AVATAR SYSTEM — Uniform size based on 4x2 grid (8 players)
   --av auto-scales: fits 4 per row on any screen
   ══════════════════════════════════════════════════════ */
:root{--av:clamp(60px, min(10vw, 14vh), 180px);--av-name:clamp(14px, min(1.6vw, 2.2vh), 22px)}
.hw-avatar-container{display:inline-block;position:relative;flex-shrink:0}
.hw-avatar-container svg{width:100%;height:100%;display:block}

/* All avatar containers use --av unless overridden */
.hw-avatar-container{width:var(--av) !important;height:var(--av) !important}

/* ── Reveal floating author ── */
.reveal-author .hw-avatar-container{filter:drop-shadow(0 4px 16px rgba(0,0,0,.5))}
.reveal-author-name{font-size:var(--av-name);font-weight:700;color:var(--text);text-shadow:0 1px 4px rgba(0,0,0,.6)}
.reveal-card{padding-top:clamp(50px,6vw,100px) !important}

/* ── Points — same size as lobby ── */
.point-award .hw-avatar-container{width:var(--av) !important;height:var(--av) !important}

/* ── Leader — slightly bigger ── */
.leader-badge .hw-avatar-container{width:clamp(100px,min(14vw,20vh),220px) !important;height:clamp(100px,min(14vw,20vh),220px) !important;margin:0 auto 10px}

/* ── Winner hero — biggest ── */
.winner-card .hw-avatar-container{width:clamp(160px,22vw,320px) !important;height:clamp(160px,22vw,320px) !important;margin:0 auto 14px;filter:drop-shadow(0 0 30px var(--gold))}

.floating-score{position:absolute;top:0;left:50%;transform:translateX(-50%);font-size:20px;font-weight:800;opacity:0;pointer-events:none;transition:all .7s ease;z-index:10}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}


/* Boot overlay — shown until the content bundle has loaded and the flow starts.
   Mirrors the start overlay's presentation so startup does not flash. */
#bootOverlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a1a;
  transition: opacity .4s ease;
}
#bootOverlay.hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* ---------------------------------------------------------------------------
   Campaign summary — the screen a multi-Game campaign ends on.
   Reuses the podium's glass panel language rather than introducing a second
   visual vocabulary for what is, to a viewer, the same kind of screen.
   Sized in vh/vw throughout because this is read from a sofa.
--------------------------------------------------------------------------- */
/* The campaign summary's layout, and NOT its visibility.
 *
 * This rule used to open `display:flex`. An id selector outranks `.screen{display:none}`,
 * so the panel was displayed from the moment the stylesheet loaded — and being the last
 * `.screen` in the document with `position:absolute;inset:0`, it covered every other
 * screen for the entire game. The TV was a blank dark rectangle from boot to podium: the
 * flow engine ran, narration played, avatars animated, and none of it was visible.
 *
 * It looked empty rather than wrong because its contents are only written by
 * `phaseCampaignSummary`, which normally never runs. Visibility belongs to
 * `.screen` / `.screen.active` for this screen exactly as it does for the other thirteen;
 * everything below only has meaning once something else has made it visible. */
#screen-campaign-summary{flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,1.6vh,26px);padding:clamp(20px,3vh,50px) clamp(24px,3vw,64px)}
.cs-title{font-size:clamp(30px,4.4vw,74px);font-weight:900;letter-spacing:-.02em;background:linear-gradient(120deg,var(--gold),#fff 60%,var(--gold));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-align:center}
.cs-subtitle{font-size:clamp(15px,1.7vw,30px);color:var(--muted);text-align:center;margin-top:-.3em}
.cs-standings{display:flex;flex-direction:column;gap:clamp(5px,.8vh,12px);width:100%;max-width:min(88vw,1500px)}
.cs-row{display:flex;align-items:center;gap:clamp(10px,1.4vw,22px);padding:clamp(8px,1.1vh,18px) clamp(14px,2vw,30px);background:var(--glass);border:2px solid rgba(255,255,255,.08);border-radius:var(--r);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.cs-row.gold{border-color:var(--gold);background:rgba(255,215,0,.06)}
.cs-rank{font-size:clamp(16px,1.9vw,32px);font-weight:900;color:var(--muted);min-width:2.2em}
.cs-row.gold .cs-rank{color:var(--gold)}
.cs-name{flex:1;font-size:clamp(17px,2vw,34px);font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-detail{font-size:clamp(12px,1.2vw,20px);color:var(--muted);white-space:nowrap}
.cs-points{font-size:clamp(18px,2.1vw,36px);font-weight:900;color:var(--gold);font-variant-numeric:tabular-nums}
.cs-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(10px,1.6vw,30px);margin-top:clamp(4px,.8vh,14px)}
.cs-stat{text-align:center;min-width:clamp(90px,9vw,150px)}
.cs-stat-value{display:block;font-size:clamp(22px,2.8vw,46px);font-weight:900;color:var(--cyan);font-variant-numeric:tabular-nums}
.cs-stat-label{display:block;font-size:clamp(11px,1.05vw,17px);color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.cs-best-lie{max-width:min(80vw,1200px);text-align:center;font-size:clamp(14px,1.5vw,26px);color:var(--muted);line-height:1.5}
.cs-best-lie b{color:#fff;font-weight:700}
/* The lie text keeps its own direction: an English lie inside an Arabic sentence
   must not be reordered by the surrounding RTL context. */
.cs-lie-text{unicode-bidi:isolate}

/* =========================================================================
   Out of games
   =========================================================================
   The only screen that asks the room for money, so it is sized to be read
   from a sofa: the QR is larger than the lobby's because a phone is being
   pointed at it deliberately rather than in passing, and the price is the
   second-largest thing on screen because it is the fact somebody has to
   agree to before they scan.

   `tv-safe` overscan margins are inherited from `.screen`; nothing here
   sets its own edge padding, which is what kept three earlier screens from
   losing their bottom row on a real television.
   ========================================================================= */

/* NO `display` here. An id beats a class, and that is the whole bug.
   ---------------------------------------------------------------------------
   `.screen { display: none }` / `.screen.active { display: flex }` is how every
   screen in this client is hidden and shown. This rule used to open with
   `display: flex`, and an id selector outranks a class one — so the out-of-games
   screen was never hidden by anything. It is `position:absolute; inset:0` and it
   is late in the document, so it painted on top of whatever the room was
   actually watching: "Out of games", a blank white QR box and "Anyone in the
   room can pay", over the lobby, over every round, permanently, from the day
   the payment platform shipped.

   `tv-layout.mjs` could not see it. That harness shows a screen by setting
   `style.display` inline on every `.screen`, which overrides the cascade and
   masks exactly this class of mistake — a guard that sets the property it is
   meant to be testing.

   The flex behaviour this rule wants is already supplied by `.screen.active`;
   only the direction and spacing belong here. */
#screen-outOfCredits {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4vh, 56px);
}

/* Shown OVER the lobby rather than instead of it.
   ---------------------------------------------------------------------------
   The flow engine's `this.cur` stays pointing at the lobby for as long as this
   is up, which is the whole point: `phaseLobby` registers a roster listener
   that releases itself the moment `this.cur` stops being the lobby, and every
   player joining after that would go unseen. An overlay changes what the room
   looks at without changing what the flow engine believes.

   Opaque, because the lobby underneath keeps animating — idle avatar
   expressions are still cycling behind this, harmlessly, and a price asked of
   a room should not have a party going on through it.

   Below the tutorial (9998), above everything else that shares the stage. */
#screen-outOfCredits.as-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--bg);
  padding: clamp(16px, var(--tv-safe), 48px);
}

.ooc-title {
  font-size: clamp(2.5rem, 5vw, 5rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--gold, #f59e0b);
  text-align: center;
}

.ooc-body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(32px, 5vw, 80px);
  flex-wrap: wrap;
}

.ooc-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: clamp(12px, 1.5vw, 20px);
  background: #fff;
  border-radius: 24px;
}

.ooc-qr canvas {
  width: clamp(220px, 22vw, 420px);
  height: auto;
  display: block;
}

.ooc-qr .qr-label {
  color: #0a0714;
  font-weight: 700;
  font-size: clamp(0.9rem, 1.1vw, 1.4rem);
}

.ooc-detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

.ooc-package {
  font-size: clamp(1.5rem, 2.5vw, 3rem);
  font-weight: 800;
}

.ooc-price {
  font-size: clamp(2rem, 4vw, 4.5rem);
  font-weight: 900;
  color: var(--brand, #7c3aed);
  font-variant-numeric: tabular-nums;
}

.ooc-note {
  font-size: clamp(1rem, 1.4vw, 1.75rem);
  opacity: 0.75;
}

/* The coupon line on the out-of-games screen.
   Quieter than the price: it is a second option, not the headline. */
.ooc-coupon {
  margin-top: clamp(16px, 2vh, 32px);
  padding-top: clamp(12px, 1.5vh, 24px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.ooc-coupon-title {
  font-size: clamp(0.95rem, 1.3vw, 1.6rem);
  font-weight: 700;
  opacity: 0.9;
}

.ooc-coupon-hint {
  font-size: clamp(0.85rem, 1.1vw, 1.35rem);
  opacity: 0.6;
  margin-top: 4px;
}