@charset "UTF-8";


:root {
  color-scheme: dark;
  --ink: #f5f1e7;
  --muted: #adc0b9;
  --faint: #738f85;
  --bg: #071d1c;
  --panel: #103531;
  --line: rgba(207, 226, 207, .15);
  --gold: #ebbe73;
  --gold-light: #ffdea2;
  --green: #8ae7ba;
  --red: #ff8f90;
  --radius: 24px;
  font-family: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { margin: 0; min-height: 100vh; min-height: 100dvh; color: var(--ink); background: radial-gradient(ellipse at 25% 0, #17463a 0, transparent 53%), radial-gradient(ellipse at 98% 50%, #132c28 0, transparent 48%), var(--bg); }
body::after { position: fixed; inset: 0; z-index: -1; content: ""; pointer-events: none; opacity: .13; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23ffffff' opacity='.24' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E"); }
button, input, select { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: default; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 4px; }
a { color: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }
::selection { color: #142a23; background: var(--gold); }
.ambient { position: fixed; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.ambient::before { content: ""; position: absolute; width: 68vw; height: 70vh; top: -48vh; left: 20vw; border-radius: 50%; background: rgba(227, 194, 119, .1); filter: blur(65px); transform: rotate(24deg); }
.ambient i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-light); box-shadow: 0 0 28px 5px #e9c98736; opacity: .25; animation: glimmer 9s ease-in-out infinite alternate; }
.ambient i:nth-child(1) { top: 18%; left: 5%; }
.ambient i:nth-child(2) { top: 10%; left: 76%; animation-delay: -3s; }
.ambient i:nth-child(3) { top: 70%; left: 94%; animation-delay: -6s; width: 4px; height: 4px; }
.ambient i:nth-child(4) { top: 89%; left: 25%; animation-delay: -4s; width: 3px; height: 3px; }
.app-shell { max-width: 1800px; margin: 0 auto; padding: 28px 44px 20px; position: relative; }
.app-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 25px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.brand-icon { width: 43px; height: 43px; border: 1px solid #ebbe7377; border-radius: 13px; color: var(--gold); display: grid; place-items: center; font-size: 31px; background: linear-gradient(145deg, #ebbe7314, #ebbe7300); transform: rotate(-5deg); }
.brand-name { display: block; font-size: 25px; font-weight: 900; letter-spacing: -.9px; line-height: 1; }
.brand-name b { color: var(--gold); }
.brand-sub { color: var(--muted); text-transform: uppercase; letter-spacing: 2.6px; font-size: 10px; display: block; margin-top: 7px; }
.header-meta { display: flex; align-items: center; gap: 13px; }
.connection { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--gold); box-shadow: 0 0 0 4px #ebbe7310; }
.connection.is-connected .status-dot { background: var(--green); box-shadow: 0 0 0 4px #8ae7ba0c; }
.room-pill, .view-badge { border: 1px solid var(--line); background: #ffffff04; border-radius: 30px; padding: 9px 15px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.room-pill strong { color: var(--gold-light); letter-spacing: 2px; margin-left: 8px; font-size: 14px; }
.view-badge { text-transform: uppercase; letter-spacing: 1.5px; font-size: 10px; }
.app-main { padding-top: 30px; }
.app-footer { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-top: 24px; color: var(--faint); font-size: 11px; }
.app-footer a { text-decoration: none; }
.footer-stars { color: #be9a5f; letter-spacing: 10px; font-size: 14px; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: var(--gold); letter-spacing: 2.5px; text-transform: uppercase; font-size: 11px; font-weight: 700; }
.on-air { display: inline-block; width: 6px; height: 6px; background: var(--gold); border-radius: 50%; box-shadow: 0 0 14px #ebbe7377; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; }
.gold-text { color: var(--gold); }
.muted { color: var(--muted); }
.section-label { font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: var(--muted); font-weight: 700; }
.section-topline { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 17px; }
.section-topline h2, .section-topline h3 { font-size: 16px; margin: 0; }
.count-badge { background: #9ce8be13; color: #b1e2c4; padding: 5px 10px; border-radius: 20px; font-size: 12px; white-space: nowrap; }
.panel { background: linear-gradient(145deg, #ffffff06, #ffffff02); border: 1px solid var(--line); border-radius: var(--radius); }
.button { border: 1px solid var(--line); border-radius: 13px; min-height: 51px; padding: 13px 20px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; font-size: 14px; text-decoration: none; background: #ffffff05; transition: background .18s, border-color .18s, transform .18s; }
.button:hover:not(:disabled) { background: #ffffff0d; border-color: #ffffff44; transform: translateY(-1px); }
.button.primary { background: linear-gradient(130deg, var(--gold-light), var(--gold)); color: #243128; border-color: transparent; box-shadow: 0 7px 28px #00000021; }
.button.primary:hover:not(:disabled) { background: linear-gradient(130deg, #ffe8bb, #f0c67c); border-color: transparent; }
.button.danger { color: #ffb4aa; border-color: #ffb4aa33; }
.button.subtle { color: var(--muted); background: none; }
.button.small { min-height: 38px; padding: 8px 13px; font-size: 12px; border-radius: 10px; }
.button:disabled { opacity: .38; transform: none; box-shadow: none; }
.button.block { width: 100%; }
.error-panel { padding: 22px; border: 1px solid #ff8f9044; background: #6e2b2d2b; border-radius: 18px; color: #ffd4ce; line-height: 1.6; }
.error-panel .button { margin-top: 12px; }
.empty-text { color: var(--muted); font-size: 14px; line-height: 1.7; margin: 12px 0 0; }
.loading-panel { padding: 70px 30px; text-align: center; color: var(--muted); }
.loading-mark { font-size: 35px; color: var(--gold); display: block; margin-bottom: 18px; animation: glimmer 2s ease-in-out infinite alternate; }
.boot-screen { min-height: 80vh; display: grid; place-content: center; justify-items: center; color: var(--muted); gap: 22px; }
.boot-mark { font-size: 80px; font-weight: 900; color: var(--ink); letter-spacing: -8px; }
.boot-mark span { color: var(--gold); }

/* The show stage */
.lobby-layout { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(28px, 4vw, 80px); align-items: center; min-height: 480px; }
.lobby-copy { position: relative; padding: 20px 0 34px; }
.lobby-title { font-weight: 850; letter-spacing: -3px; font-size: clamp(46px, 4.9vw, 89px); line-height: 1.04; max-width: 980px; margin: 27px 0 22px; }
.lobby-title em { font-style: normal; color: var(--gold-light); }
.lobby-description { max-width: 570px; font-size: clamp(16px, 1.35vw, 24px); line-height: 1.6; color: var(--muted); }
.lobby-steps { display: flex; gap: 25px; margin-top: 36px; color: #d1dcd3; font-size: 13px; }
.lobby-steps span { display: flex; align-items: center; gap: 10px; }
.lobby-steps b { display: grid; place-items: center; width: 28px; height: 28px; color: var(--gold); border: 1px solid #ebbe7344; border-radius: 50%; font-size: 11px; }
.join-poster { padding: 31px; text-align: center; position: relative; background: linear-gradient(155deg, #254d3f, #13382f 60%, #15342c); border: 1px solid #d2bc7d44; box-shadow: 0 25px 65px #0000002b, inset 0 1px 0 #fff1; overflow: hidden; }
.join-poster::before { content: "✦"; position: absolute; top: -30px; right: -8px; font-size: 180px; line-height: 1; color: #e4cb8c0b; transform: rotate(15deg); }
.join-poster h2 { font-size: clamp(24px, 2.1vw, 38px); letter-spacing: -1px; margin: 10px 0 5px; position: relative; }
.join-poster .section-label { color: var(--gold); }
.qr-frame { background: #fff; padding: 12px; border-radius: 16px; width: clamp(160px, 16vw, 272px); height: clamp(160px, 16vw, 272px); margin: 23px auto 18px; box-shadow: 0 8px 30px #0002; }
.qr-frame img { width: 100%; height: 100%; display: block; }
.join-address { display: block; color: #e4e8d9; font-size: clamp(12px, 1vw, 17px); line-height: 1.45; word-break: break-word; text-decoration: none; }
.room-code-label { color: var(--muted); font-size: 11px; margin: 18px 0 5px; }
.room-code { font-size: 32px; letter-spacing: 8px; color: var(--gold-light); font-weight: 800; padding-left: 8px; }
.lobby-roster { border-top: 1px solid var(--line); padding-top: 22px; margin-top: 22px; }
.player-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.player-chip { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 40px; padding: 7px 15px 7px 7px; background: #ffffff04; font-size: 14px; animation: enter .28s ease-out both; }
.avatar { --avatar: #a6d8bd; width: 32px; height: 32px; background: color-mix(in srgb, var(--avatar) 17%, transparent); border: 1px solid color-mix(in srgb, var(--avatar) 25%, transparent); color: var(--avatar); display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 50%; font-weight: 800; font-size: 11px; text-transform: uppercase; }
.avatar.large { width: 54px; height: 54px; font-size: 18px; }
.moderator { display: flex; gap: 15px; align-items: center; border: 1px solid #ebbe7330; border-radius: 18px; background: linear-gradient(100deg, #ebbe730b, #ebbe7301); padding: 18px 22px; margin-top: 25px; }
.moderator-icon { width: 35px; height: 35px; border: 1px solid #ebbe7333; border-radius: 50%; color: var(--gold); display: grid; place-items: center; flex: 0 0 auto; }
.moderator .section-label { color: var(--gold); font-size: 9px; letter-spacing: 1.7px; margin-bottom: 6px; }
.moderator p { margin: 0; font-size: clamp(14px, 1.25vw, 22px); color: #e8e5d8; line-height: 1.45; }
.stage-topline { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.question-progress { display: flex; align-items: center; gap: 17px; }
.question-number { font-size: 12px; letter-spacing: 1.7px; text-transform: uppercase; color: var(--muted); }
.progress-dots { display: flex; gap: 5px; }
.progress-dots i { height: 4px; width: clamp(9px, 1.4vw, 24px); background: #ffffff12; border-radius: 2px; }
.progress-dots i.complete { background: #ebbe7366; }
.progress-dots i.current { background: var(--gold); }
.category-pill { border: 1px solid #ebbe7333; color: var(--gold-light); padding: 8px 13px; border-radius: 30px; font-size: 12px; font-weight: 600; }
.question-heading { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 35px; margin: 27px 0; }
.question-text { font-size: clamp(30px, 3vw, 56px); letter-spacing: -1.3px; line-height: 1.2; margin: 0; font-weight: 750; max-width: 1390px; text-wrap: pretty; }
.question-meta { display: flex; align-items: center; gap: 16px; }
.answer-count { text-align: right; min-width: 90px; }
.answer-count strong { display: block; font-size: 24px; color: var(--ink); letter-spacing: -1px; }
.answer-count span { display: block; color: var(--muted); font-size: 10px; margin-top: 4px; }
.timer { --remaining: 100%; --timer-color: var(--gold); width: 92px; height: 92px; flex: 0 0 auto; border-radius: 50%; background: conic-gradient(var(--timer-color) var(--remaining), #ffffff0b 0); padding: 4px; position: relative; }
.timer-center { width: 100%; height: 100%; border-radius: 50%; background: #0c2926; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.timer strong { font-size: 32px; line-height: 1; letter-spacing: -1px; }
.timer span { font-size: 9px; color: var(--muted); letter-spacing: 1px; margin-top: 6px; text-transform: uppercase; }
.timer.is-urgent { --timer-color: var(--red); color: var(--red); }
.timer.is-reading { --remaining: 0%; }
.timer.is-reading strong { color: var(--gold); font-size: 26px; letter-spacing: 3px; }
.answers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.answer-card { --answer-color: #a5c6ef; display: flex; align-items: center; gap: 17px; position: relative; overflow: hidden; border-radius: 18px; background: linear-gradient(115deg, #ffffff07, #ffffff02); border: 1px solid var(--line); padding: 23px; min-height: 112px; isolation: isolate; }
.answer-card.answer-b { --answer-color: #d5b6ee; }
.answer-card.answer-c { --answer-color: #eec39b; }
.answer-card.answer-d { --answer-color: #a4d7bc; }
.answer-letter { display: grid; place-items: center; width: 47px; height: 47px; flex: 0 0 auto; border: 1px solid color-mix(in srgb, var(--answer-color) 30%, transparent); background: color-mix(in srgb, var(--answer-color) 10%, transparent); color: var(--answer-color); font-size: 18px; font-weight: 800; border-radius: 13px; }
.answer-label { position: relative; font-size: clamp(20px, 1.8vw, 33px); line-height: 1.25; font-weight: 600; text-align: left; overflow-wrap: anywhere; }
.answer-card.correct { border-color: #a2e8b8; background: linear-gradient(100deg, #528e5733, #28533c33); }
.answer-card.correct .answer-letter { color: #bff2ca; border-color: #bff2ca55; background: #a2e8b81a; }
.answer-card.incorrect { opacity: .52; }
.answer-card .correct-check { margin-left: auto; color: #bff2ca; font-size: 27px; font-weight: 700; }
.answer-result { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 50px; z-index: 1; }
.answer-result strong { font-size: 21px; }
.answer-result span { color: var(--muted); font-size: 10px; white-space: nowrap; }
.result-fill { position: absolute; z-index: -1; left: 0; top: 0; bottom: 0; width: var(--fill); background: #ffffff05; border-right: 1px solid #ffffff0a; transition: width .7s ease; }
.correct .result-fill { background: #a2e8b80c; border-right-color: #a2e8b81a; }
.explanation { display: flex; gap: 12px; align-items: flex-start; color: #cad8ca; font-size: 16px; line-height: 1.6; margin: 18px 0 0; padding: 0 5px; }
.explanation .spark { color: var(--gold); font-size: 20px; line-height: 1.3; flex: 0 0 auto; }
.explanation p { margin: 0; }
.stage-note { color: var(--muted); font-size: 12px; text-align: center; margin: 19px 0 0; letter-spacing: .2px; }
.mini-leaders { display: flex; gap: 10px; margin-top: 20px; }
.mini-leader { border: 1px solid var(--line); border-radius: 12px; background: #ffffff03; flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 11px 13px; }
.mini-leader .rank { color: var(--gold); font-size: 14px; font-weight: 800; }
.mini-leader .name { font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-leader .points { margin-left: auto; font-size: 12px; font-weight: 700; color: #d5e3d3; white-space: nowrap; }
.delta { color: var(--green); font-size: 11px; white-space: nowrap; }

/* Rankings */
.ranking-intro { text-align: center; margin: 10px 0 30px; }
.ranking-intro .eyebrow { justify-content: center; }
.ranking-title { font-size: clamp(34px, 4vw, 65px); letter-spacing: -2px; margin: 14px 0 10px; }
.ranking-intro p { color: var(--muted); font-size: 14px; margin-bottom: 0; }
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 18px; max-width: 1040px; margin: 0 auto 26px; padding-top: 29px; }
.podium-player { position: relative; text-align: center; flex: 1; max-width: 330px; padding: 23px 16px 20px; background: linear-gradient(160deg, #ffffff09, #ffffff02); border: 1px solid var(--line); border-radius: 22px 22px 13px 13px; min-height: 190px; }
.podium-player.first { order: 2; min-height: 236px; border-color: #ebbe7377; background: linear-gradient(155deg, #7b6d3430, #ebbe7308); box-shadow: 0 15px 70px #d9ad4911; }
.podium-player.second { order: 1; }
.podium-player.third { order: 3; min-height: 170px; }
.podium-crown { position: absolute; top: -30px; left: 0; right: 0; color: var(--gold); font-size: 37px; line-height: 1; }
.podium-place { position: absolute; top: 13px; left: 17px; color: var(--muted); font-size: 12px; font-weight: 700; }
.podium-player .avatar { margin-bottom: 13px; }
.podium-player h3 { font-size: clamp(15px, 1.6vw, 26px); margin: 0 0 9px; overflow-wrap: anywhere; }
.podium-player.first h3 { font-size: clamp(19px, 2vw, 32px); }
.podium-points { color: var(--gold-light); font-size: 24px; font-weight: 800; letter-spacing: -.5px; }
.podium-points small { font-size: 10px; font-weight: 500; color: var(--muted); margin-left: 4px; letter-spacing: 0; }
.ranking-list { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.ranking-row { display: flex; align-items: center; gap: 13px; padding: 11px 16px; border: 1px solid var(--line); background: #ffffff03; border-radius: 13px; }
.ranking-row .rank { width: 24px; color: var(--muted); font-size: 13px; font-weight: 700; }
.ranking-row .name { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.ranking-row .score { font-weight: 700; font-size: 14px; white-space: nowrap; }
.ranking-row.is-me { border-color: #ebbe7355; background: #ebbe730a; }
.ranking-row.is-me .name::after { content: "DU"; margin-left: 8px; font-size: 9px; color: var(--gold); letter-spacing: 1px; }

/* Player controller */
.view-play .app-shell { max-width: 760px; padding: 22px 24px 20px; }
.view-play .app-header { padding-bottom: 21px; }
.view-play .brand-name { font-size: 22px; }
.view-play .brand-icon { width: 37px; height: 37px; font-size: 27px; }
.view-play .brand-sub { font-size: 8px; letter-spacing: 2.2px; }
.view-play .connection-label { display: none; }
.view-play .room-pill { padding: 8px 12px; font-size: 10px; }
.view-play .room-pill strong { font-size: 12px; }
.view-play .header-meta { gap: 12px; }
.view-play .app-main { padding-top: 26px; }
.join-screen { max-width: 450px; margin: 18px auto 0; }
.join-screen .eyebrow { font-size: 10px; }
.join-title { font-size: clamp(41px, 9vw, 62px); letter-spacing: -2.4px; line-height: 1.04; margin: 22px 0 18px; }
.join-subtitle { color: var(--muted); line-height: 1.65; font-size: 14px; margin-bottom: 27px; max-width: 380px; }
.join-form { padding: 24px; background: linear-gradient(145deg, #ffffff08, #ffffff02); }
.field { display: block; margin-bottom: 19px; }
.field > span, .field-label { display: block; font-size: 11px; font-weight: 600; color: #c8d6cc; margin-bottom: 9px; }
.field input, .field select, select.voice-select { width: 100%; border: 1px solid #b5d6c42c; border-radius: 11px; background: #061e1c88; color: var(--ink); min-height: 53px; padding: 13px 15px; font-size: 16px; }
.field input::placeholder { color: #789589; }
.field input.room-input { text-transform: uppercase; letter-spacing: 4px; font-weight: 750; }
.field-note { font-size: 11px; color: var(--faint); margin: 9px 0 0; line-height: 1.5; }
.form-error { color: #ffb7ac; font-size: 13px; line-height: 1.5; margin: 0 0 14px; }
.join-form .button { min-height: 56px; font-size: 15px; }
.join-footnote { color: var(--faint); font-size: 11px; text-align: center; margin: 19px 0 0; line-height: 1.6; }
.player-summary { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; gap: 12px; }
.player-identity { display: flex; align-items: center; gap: 11px; min-width: 0; }
.player-identity .avatar { width: 39px; height: 39px; font-size: 13px; }
.player-identity strong { display: block; font-size: 15px; overflow-wrap: anywhere; }
.player-identity .section-label { font-size: 8px; margin-top: 4px; letter-spacing: 1.3px; }
.player-score { text-align: right; flex-shrink: 0; }
.player-score strong { font-size: 25px; color: var(--gold-light); font-weight: 800; letter-spacing: -.8px; }
.player-score span { display: block; color: var(--muted); font-size: 10px; margin-top: 2px; }
.waiting-card { text-align: center; padding: 38px 22px; overflow: hidden; position: relative; }
.waiting-symbol { width: 91px; height: 91px; display: grid; place-items: center; margin: 0 auto 22px; color: var(--gold); font-size: 49px; border: 1px solid #ebbe7338; border-radius: 29px; transform: rotate(-6deg); background: #ebbe7308; box-shadow: 0 0 70px #ebbe7307; }
.waiting-card h1 { font-size: 29px; line-height: 1.12; letter-spacing: -1.1px; margin: 0 auto 14px; max-width: 370px; }
.waiting-card p { color: var(--muted); font-size: 14px; line-height: 1.7; max-width: 330px; margin: 0 auto; }
.waiting-card .count-badge { display: inline-block; margin-top: 25px; }
.view-play .moderator { padding: 15px; gap: 12px; margin-top: 17px; border-radius: 15px; }
.view-play .moderator p { font-size: 13px; }
.view-play .moderator-icon { width: 29px; height: 29px; font-size: 13px; }
.view-play .stage-topline { margin-bottom: 19px; gap: 9px; }
.view-play .question-number { font-size: 10px; letter-spacing: 1.2px; }
.view-play .category-pill { font-size: 10px; padding: 7px 11px; }
.view-play .question-heading { grid-template-columns: 1fr auto; gap: 14px; margin: 19px 0; }
.view-play .question-text { font-size: clamp(21px, 5.3vw, 31px); line-height: 1.25; letter-spacing: -.6px; }
.view-play .timer { width: 65px; height: 65px; padding: 3px; }
.view-play .timer strong { font-size: 23px; }
.view-play .timer span { font-size: 7px; letter-spacing: .3px; margin-top: 4px; }
.view-play .answers-grid { gap: 10px; }
.view-play .answer-card { min-height: 113px; display: flex; align-items: flex-start; flex-direction: column; gap: 12px; padding: 15px; width: 100%; transition: border-color .18s, background .18s, transform .18s; }
.view-play button.answer-card:hover:not(:disabled) { background: #ffffff0c; border-color: #ffffff55; transform: translateY(-2px); }
.view-play .answer-letter { width: 30px; height: 30px; font-size: 13px; border-radius: 9px; }
.view-play .answer-label { font-size: 16px; line-height: 1.3; }
.view-play .answer-card.selected { border-color: var(--gold); background: #ebbe7312; }
.view-play .answer-card.selected .answer-letter { color: #ffe0a7; background: #ebbe7325; border-color: #ebbe7377; }
.view-play .answer-card:disabled:not(.selected):not(.correct):not(.incorrect) { opacity: .5; }
.view-play .answer-card.removed { opacity: .2; border-style: dashed; }
.view-play .answer-card.removed .answer-label { text-decoration: line-through; }
.selected-check { position: absolute; right: 14px; top: 17px; color: var(--gold); font-size: 14px; }
.answer-confirmation { border-radius: 13px; background: #93dfb40b; border: 1px solid #93dfb42a; color: #bce2c8; padding: 13px 15px; font-size: 12px; text-align: center; margin-top: 13px; line-height: 1.5; }
.answer-confirmation.neutral { background: #ffffff04; border-color: var(--line); color: var(--muted); }
.joker-section { margin-top: 25px; }
.joker-section .section-topline { margin-bottom: 12px; }
.joker-section .section-topline h2 { font-size: 13px; }
.joker-hint { color: var(--faint); font-size: 9px; }
.jokers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.joker { border: 1px solid var(--line); background: #ffffff03; padding: 14px 7px 11px; border-radius: 13px; display: flex; align-items: center; flex-direction: column; min-height: 108px; transition: border-color .18s, background .18s; }
.joker:not(:disabled):hover { border-color: #ebbe7388; background: #ebbe730b; }
.joker-symbol { display: block; color: var(--gold); font-weight: 800; font-size: 23px; line-height: 1; margin-bottom: 11px; }
.joker-name { font-size: 10px; font-weight: 700; line-height: 1.3; }
.joker-detail { font-size: 9px; color: var(--muted); margin-top: 5px; text-align: center; line-height: 1.4; }
.joker:disabled { opacity: .3; }
.joker.used { border-style: dashed; }
.joker.active { opacity: 1; border-color: #ebbe7377; background: #ebbe730b; }
.joker.active .joker-detail { color: var(--gold-light); }
.joker-note { color: var(--faint); font-size: 10px; line-height: 1.5; margin-top: 10px; }
.player-result { padding: 22px; border-radius: 17px; text-align: center; margin: 0 0 17px; background: #ffffff03; border: 1px solid var(--line); }
.player-result.won { background: linear-gradient(120deg, #68c88a15, #9bce8b07); border-color: #8ae7ba55; }
.player-result.lost { background: linear-gradient(120deg, #b75c5d12, #ffffff02); border-color: #ff8f902d; }
.player-result h1 { font-size: 26px; letter-spacing: -1px; margin-bottom: 9px; }
.player-result p { color: var(--muted); font-size: 13px; margin: 0; line-height: 1.5; }
.points-gained { color: var(--green); font-size: 31px; font-weight: 800; letter-spacing: -.8px; margin: 11px 0 0; }
.points-gained small { font-size: 12px; font-weight: 500; letter-spacing: 0; }
.view-play .answer-result { position: absolute; right: 13px; top: 15px; min-width: 0; }
.view-play .answer-result strong { font-size: 15px; }
.view-play .answer-result span { font-size: 8px; }
.view-play .explanation { font-size: 12px; line-height: 1.6; padding: 0; }
.view-play .ranking-intro { margin: 24px 0 22px; }
.view-play .ranking-title { font-size: 34px; }
.view-play .ranking-list { display: flex; flex-direction: column; gap: 8px; }
.view-play .ranking-row { padding: 12px; gap: 10px; }
.view-play .ranking-row .avatar { width: 28px; height: 28px; font-size: 10px; }
.view-play .ranking-row .rank { width: 19px; }
.view-play .ranking-row .name, .view-play .ranking-row .score { font-size: 13px; }
.view-play .ranking-intro .eyebrow { font-size: 9px; }
.winner-banner { padding: 25px; text-align: center; margin-bottom: 17px; border-color: #ebbe7355; background: linear-gradient(150deg, #8e793124, #ebbe7305); }
.winner-crown { font-size: 43px; color: var(--gold); margin-bottom: 10px; }
.winner-banner .section-label { font-size: 9px; }
.winner-banner h2 { font-size: 30px; letter-spacing: -.9px; margin: 9px 0; }
.winner-banner p { color: var(--gold-light); font-size: 16px; font-weight: 700; margin: 0; }
.leave-game { text-align: center; margin-top: 20px; }
.leave-game button { color: var(--faint); background: none; border: 0; padding: 12px; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }

/* Host / laptop desk */
.view-host .app-shell { max-width: 1540px; }
.host-intro { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 23px; }
.host-intro h1 { font-size: 29px; margin-bottom: 7px; letter-spacing: -.9px; }
.host-intro p { margin: 0; font-size: 12px; color: var(--muted); }
.phase-label { display: inline-flex; align-items: center; gap: 7px; color: var(--gold-light); border: 1px solid #ebbe7336; padding: 9px 13px; border-radius: 30px; font-size: 11px; white-space: nowrap; }
.host-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; align-items: start; }
.host-main { min-width: 0; }
.host-panel { padding: 24px; }
.host-panel .section-label { margin-bottom: 17px; }
.host-lobby-heading { font-size: 35px; letter-spacing: -1px; margin: 0 0 15px; }
.host-lobby-copy { color: var(--muted); font-size: 14px; line-height: 1.75; max-width: 550px; }
.host-join { display: flex; align-items: center; gap: 22px; padding: 20px; background: #061d1b66; border-radius: 15px; margin-top: 23px; }
.host-join .qr-frame { width: 114px; height: 114px; margin: 0; padding: 7px; border-radius: 9px; flex: 0 0 auto; }
.host-join .room-code { font-size: 25px; margin-bottom: 6px; letter-spacing: 5px; padding-left: 0; }
.host-join .room-code-label { margin-top: 0; }
.host-join .join-address { font-size: 12px; }
.host-panel .question-text { font-size: clamp(24px, 2.4vw, 39px); letter-spacing: -.8px; }
.host-panel .question-heading { gap: 20px; margin: 23px 0; }
.host-panel .timer { width: 70px; height: 70px; }
.host-panel .timer strong { font-size: 25px; }
.host-panel .timer span { font-size: 7px; }
.host-panel .answer-card { padding: 16px; min-height: 86px; gap: 12px; border-radius: 13px; }
.host-panel .answer-letter { width: 33px; height: 33px; border-radius: 9px; font-size: 13px; }
.host-panel .answer-label { font-size: 17px; }
.host-panel .answer-result strong { font-size: 17px; }
.host-panel .answer-result span { font-size: 9px; }
.host-panel .explanation { font-size: 13px; }
.host-panel .answer-count strong { font-size: 21px; }
.host-panel .stage-note { font-size: 11px; }
.host-actions { padding: 20px 23px; margin-top: 16px; border: 1px solid #ebbe7333; background: #ebbe7305; border-radius: 18px; }
.host-actions .section-label { margin-bottom: 12px; color: var(--gold); font-size: 9px; }
.host-action-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.host-action-buttons .primary { flex: 1; }
.host-action-help { font-size: 11px; line-height: 1.6; color: var(--muted); margin: 12px 0 0; }
.host-sidebar { display: flex; flex-direction: column; gap: 17px; }
.settings-panel { padding: 21px; }
.settings-panel h2 { margin: 0 0 19px; font-size: 15px; letter-spacing: -.2px; }
.speech-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 21px; }
.speech-toggle-label { font-size: 12px; display: block; }
.speech-toggle-note { font-size: 10px; color: var(--faint); margin-top: 5px; display: block; line-height: 1.5; }
.switch { width: 44px; height: 25px; border: 1px solid #ffffff22; border-radius: 30px; background: #ffffff0a; padding: 3px; flex: 0 0 auto; transition: background .2s; }
.switch::after { display: block; content: ""; width: 17px; height: 17px; background: #8ca298; border-radius: 50%; transition: transform .2s, background .2s; }
.switch[aria-checked="true"] { border-color: #ebbe7366; background: #ebbe7326; }
.switch[aria-checked="true"]::after { transform: translateX(17px); background: var(--gold-light); }
.voice-select { min-height: 44px !important; font-size: 12px !important; padding: 11px !important; }
.settings-note { margin: 12px 0 0; font-size: 10px; line-height: 1.6; color: var(--faint); }
.host-roster { padding: 20px; }
.host-player-list { display: flex; flex-direction: column; gap: 1px; max-height: 450px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #537267 transparent; }
.host-player { display: flex; gap: 9px; align-items: center; padding: 10px 0; border-top: 1px solid #ffffff07; }
.host-player .avatar { width: 28px; height: 28px; font-size: 10px; }
.host-player .rank { font-size: 10px; color: var(--faint); width: 16px; flex: 0 0 auto; }
.host-player .name { font-size: 12px; flex: 1; overflow-wrap: anywhere; }
.host-player .score { font-size: 11px; font-weight: 700; white-space: nowrap; }
.host-player .delta { font-size: 9px; }
.host-help { padding: 4px 5px; color: var(--faint); font-size: 10px; line-height: 1.7; }
.host-help strong { color: var(--muted); font-weight: 600; }
.host-reset { text-align: center; }
.host-reset .button { font-weight: 500; font-size: 10px; min-height: 35px; }
.view-host .moderator { margin-top: 17px; padding: 18px; }
.view-host .moderator p { font-size: 14px; }
.host-panel .ranking-intro { margin-top: 0; }
.host-panel .ranking-title { font-size: 35px; }
.host-panel .podium { gap: 10px; padding-top: 22px; }
.host-panel .podium-player { min-height: 170px; padding: 20px 9px 15px; }
.host-panel .podium-player.first { min-height: 195px; }
.host-panel .podium-player.third { min-height: 155px; }
.host-panel .podium-player h3, .host-panel .podium-player.first h3 { font-size: 17px; }
.host-panel .podium-points { font-size: 20px; }
.host-panel .podium-player .avatar.large { width: 44px; height: 44px; font-size: 15px; }
.host-panel .ranking-row { padding: 10px; gap: 8px; }
.host-panel .ranking-row .name, .host-panel .ranking-row .score { font-size: 12px; }
.host-panel .ranking-row .avatar { width: 25px; height: 25px; font-size: 9px; }
.host-key-card { max-width: 480px; padding: 28px; margin: 40px auto; }
.host-key-card h1 { font-size: 27px; letter-spacing: -.8px; margin-top: 17px; }
.host-key-card p { font-size: 13px; color: var(--muted); line-height: 1.75; }
.toast { position: fixed; z-index: 20; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: max-content; max-width: calc(100vw - 36px); color: #f7e8dc; background: #1d3934; border: 1px solid #e7bf7b66; padding: 15px 22px; box-shadow: 0 12px 45px #0007; border-radius: 13px; font-size: 13px; line-height: 1.5; text-align: center; animation: toast-in .2s ease-out; }
.noscript { position: fixed; inset: 0; background: var(--bg); display: grid; place-items: center; padding: 40px; text-align: center; font-size: 23px; }

@keyframes glimmer { from { opacity: .15; } to { opacity: .55; } }
@keyframes enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-in { from { opacity: 0; bottom: 14px; } to { opacity: 1; } }
@media (min-width: 1500px) and (min-height: 1000px) {
  .view-board .app-shell { padding: 40px 60px 24px; }
  .view-board .app-main { padding-top: 40px; }
  .view-board .lobby-layout { min-height: 580px; }
  .view-board .answer-card { min-height: 135px; padding: 28px; }
  .view-board .question-heading { margin: 38px 0; }
  .view-board .moderator { margin-top: 34px; padding: 24px 27px; }
}
@media (max-width: 1100px) {
  .app-shell { padding: 24px 30px 20px; }
  .lobby-layout { min-height: 410px; gap: 32px; }
  .lobby-title { letter-spacing: -2px; }
  .lobby-steps { flex-wrap: wrap; gap: 13px; margin-top: 25px; font-size: 11px; }
  .join-poster { padding: 24px; }
  .view-host .app-shell { padding: 22px; }
  .host-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; }
  .host-panel { padding: 20px; }
  .host-panel .question-meta .answer-count { display: none; }
  .host-panel .answer-card { gap: 10px; padding: 14px; }
  .host-panel .answer-label { font-size: 15px; }
  .host-panel .answers-grid { gap: 9px; }
}
@media (max-width: 800px) {
  .app-shell { padding: 20px; }
  .app-header { padding-bottom: 20px; }
  .brand-name { font-size: 23px; }
  .brand-sub { font-size: 8px; letter-spacing: 2px; }
  .brand-icon { width: 37px; height: 37px; font-size: 27px; }
  .header-meta { gap: 10px; }
  .connection-label { display: none; }
  .view-badge { display: none; }
  .lobby-layout { gap: 24px; grid-template-columns: 1fr .75fr; min-height: 370px; }
  .lobby-copy { padding-bottom: 15px; }
  .lobby-title { font-size: 44px; }
  .lobby-description { font-size: 15px; }
  .lobby-steps { display: none; }
  .join-poster { padding: 22px 15px; }
  .join-poster h2 { font-size: 24px; }
  .question-meta { gap: 10px; }
  .question-meta .answer-count { display: none; }
  .timer { width: 74px; height: 74px; }
  .timer strong { font-size: 28px; }
  .timer span { font-size: 8px; }
  .question-text { font-size: 29px; }
  .answer-card { padding: 18px; min-height: 100px; gap: 13px; }
  .answer-label { font-size: 22px; }
  .answer-letter { width: 38px; height: 38px; font-size: 15px; border-radius: 11px; }
  .mini-leaders { gap: 7px; }
  .mini-leader { padding: 10px; gap: 7px; }
  .mini-leader .delta { display: none; }
  .host-layout { grid-template-columns: 1fr; }
  .host-sidebar { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .host-help { grid-column: 1 / -1; }
  .host-reset { grid-column: 1 / -1; }
  .host-panel .question-meta .answer-count { display: block; }
  .view-host .moderator p { font-size: 14px; }
}
@media (max-width: 560px) {
  .app-shell, .view-host .app-shell { padding: 18px 17px 20px; }
  .view-play .app-shell { padding: 20px 18px 20px; }
  .brand { gap: 10px; }
  .brand-name { font-size: 21px; }
  .brand-icon { width: 33px; height: 33px; font-size: 25px; border-radius: 10px; }
  .room-pill { padding: 8px 10px; font-size: 9px; }
  .room-pill strong { font-size: 11px; letter-spacing: 1.5px; margin-left: 5px; }
  .app-main { padding-top: 22px; }
  .app-footer { font-size: 9px; line-height: 1.5; }
  .footer-stars { font-size: 11px; letter-spacing: 5px; }
  .lobby-layout { grid-template-columns: 1fr; gap: 14px; }
  .lobby-title { font-size: 44px; max-width: 460px; margin-top: 20px; }
  .lobby-description { font-size: 14px; margin-bottom: 0; }
  .lobby-copy { padding-top: 8px; }
  .join-poster { max-width: none; display: grid; grid-template-columns: 130px 1fr; column-gap: 19px; align-items: center; padding: 19px; text-align: left; }
  .join-poster .section-label { grid-column: 2; grid-row: 1; font-size: 9px; }
  .join-poster h2 { grid-column: 2; grid-row: 2; font-size: 22px; margin: 5px 0 0; }
  .join-poster .qr-frame { grid-row: 1 / 7; grid-column: 1; width: 130px; height: 130px; margin: 0; padding: 8px; border-radius: 10px; }
  .join-poster .join-address { grid-column: 2; font-size: 10px; margin-top: 7px; }
  .join-poster .room-code-label { grid-column: 2; font-size: 9px; margin: 12px 0 3px; }
  .join-poster .room-code { grid-column: 2; font-size: 23px; letter-spacing: 4px; padding: 0; }
  .player-chip { font-size: 12px; padding-right: 12px; }
  .eyebrow { font-size: 9px; letter-spacing: 2px; }
  .question-progress { gap: 10px; }
  .question-number { font-size: 10px; }
  .progress-dots { display: none; }
  .category-pill { font-size: 10px; padding: 7px 10px; }
  .question-heading { gap: 14px; margin: 22px 0; }
  .question-text { font-size: 25px; letter-spacing: -.7px; }
  .timer { width: 62px; height: 62px; padding: 3px; }
  .timer strong { font-size: 22px; }
  .timer span { font-size: 7px; letter-spacing: .5px; margin-top: 4px; }
  .answer-card { padding: 15px; min-height: 100px; align-items: flex-start; flex-direction: column; gap: 10px; border-radius: 14px; }
  .answer-letter { width: 29px; height: 29px; font-size: 12px; border-radius: 9px; }
  .answer-label { font-size: 17px; }
  .answer-result { position: absolute; right: 12px; top: 15px; min-width: 0; }
  .answer-result strong { font-size: 14px; }
  .answer-result span { font-size: 8px; }
  .moderator { padding: 15px; gap: 12px; margin-top: 19px; }
  .moderator p { font-size: 13px; }
  .moderator-icon { width: 29px; height: 29px; font-size: 13px; }
  .explanation { font-size: 12px; }
  .mini-leaders { flex-direction: column; gap: 6px; }
  .mini-leader { padding: 10px 12px; }
  .mini-leader .delta { display: block; }
  .ranking-intro { margin: 5px 0 25px; }
  .ranking-title { font-size: 35px; letter-spacing: -1px; }
  .ranking-intro p { font-size: 12px; }
  .podium { gap: 7px; }
  .podium-player { padding: 22px 7px 16px; min-height: 160px; border-radius: 16px 16px 10px 10px; }
  .podium-player.first { min-height: 191px; }
  .podium-player.third { min-height: 144px; }
  .podium-player .avatar.large { width: 37px; height: 37px; font-size: 13px; }
  .podium-player h3, .podium-player.first h3 { font-size: 14px; }
  .podium-place { top: 10px; left: 10px; font-size: 9px; }
  .podium-points { font-size: 18px; }
  .podium-points small { display: block; margin-top: 4px; margin-left: 0; font-size: 8px; }
  .podium-crown { font-size: 30px; top: -24px; }
  .ranking-list { display: flex; flex-direction: column; }
  .ranking-row .name, .ranking-row .score { font-size: 12px; }
  .join-screen { margin-top: 9px; }
  .join-form { padding: 22px; }
  .join-title { margin-top: 20px; }
  .view-play .app-main { padding-top: 22px; }
  .view-play .brand-name { font-size: 21px; }
  .view-play .brand-icon { width: 33px; height: 33px; font-size: 25px; }
  .view-play .header-meta { gap: 9px; }
  .view-play .room-pill { padding: 8px 10px; font-size: 9px; }
  .view-play .room-pill strong { font-size: 11px; }
  .view-play .question-text { font-size: 23px; }
  .view-play .answer-card { min-height: 116px; }
  .host-intro { gap: 12px; margin-bottom: 18px; }
  .host-intro h1 { font-size: 25px; }
  .host-intro p { font-size: 10px; }
  .phase-label { font-size: 9px; padding: 8px 10px; }
  .host-panel { padding: 19px 16px; }
  .host-panel .question-text { font-size: 25px; }
  .host-panel .question-meta .answer-count { display: none; }
  .host-panel .answer-card { min-height: 110px; padding: 13px; }
  .host-panel .answer-label { font-size: 15px; }
  .host-lobby-heading { font-size: 29px; }
  .host-lobby-copy { font-size: 13px; }
  .host-join { padding: 15px; gap: 15px; }
  .host-join .qr-frame { width: 89px; height: 89px; padding: 5px; }
  .host-join .room-code { font-size: 23px; }
  .host-actions { padding: 18px 16px; }
  .host-action-buttons { gap: 8px; }
  .host-action-buttons .button { min-height: 50px; padding: 12px 14px; font-size: 12px; }
  .host-sidebar { grid-template-columns: 1fr; }
  .host-panel .podium-player h3, .host-panel .podium-player.first h3 { font-size: 13px; }
  .host-panel .podium-player .avatar.large { width: 33px; height: 33px; font-size: 12px; }
  .host-panel .podium-player { min-height: 150px; }
  .host-panel .podium-player.first { min-height: 178px; }
  .host-panel .podium-player.third { min-height: 138px; }
  .host-panel .podium-points { font-size: 17px; }
}
@media (min-width: 900px) and (max-height: 850px) {
  .view-board .app-shell { padding: 18px 30px 12px; }
  .view-board .app-header { padding-bottom: 15px; }
  .view-board .app-main { padding-top: 18px; }
  .view-board .lobby-layout { min-height: 0; gap: 35px; grid-template-columns: 1.35fr .65fr; }
  .view-board .lobby-copy { padding: 5px 0 12px; }
  .view-board .lobby-title { font-size: clamp(43px, 4.4vw, 63px); margin: 18px 0 15px; letter-spacing: -2px; }
  .view-board .lobby-description { font-size: 16px; line-height: 1.4; margin-bottom: 0; }
  .view-board .lobby-steps { margin-top: 20px; gap: 17px; font-size: 12px; }
  .view-board .join-poster { padding: 15px 18px; }
  .view-board .join-poster > .section-label { display: none; }
  .view-board .join-poster h2 { font-size: 25px; margin: 3px 0; }
  .view-board .qr-frame { width: 146px; height: 146px; padding: 9px; margin: 13px auto 11px; }
  .view-board .join-address { font-size: 12px; }
  .view-board .room-code-label { margin: 9px 0 3px; font-size: 10px; }
  .view-board .room-code { font-size: 27px; }
  .view-board .lobby-roster { padding-top: 13px; margin-top: 13px; }
  .view-board .section-topline { margin-bottom: 9px; }
  .view-board .player-chip { padding-top: 4px; padding-bottom: 4px; }
  .view-board .moderator { padding: 12px 17px; margin-top: 15px; }
  .view-board .moderator p { font-size: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .view-board .app-footer { margin-top: 13px; }
  .view-board .question-heading { margin: 20px 0; }
  .view-board .question-text { font-size: clamp(29px, 3vw, 43px); }
  .view-board .answer-card { min-height: 88px; padding: 17px 21px; }
  .view-board .answer-label { font-size: clamp(20px, 2vw, 28px); }
  .view-board .stage-note { margin: 14px 0 0; }
  .view-board .explanation { margin-top: 14px; }
  .view-board .mini-leaders { margin-top: 14px; }
}
/* Actual show cues: finite, phase-keyed and separate from the live controls. */
.player-chip { animation: none; }
.app-main { --phase-age: 0ms; --question-age: 0ms; --joker-age: 0ms; }
.show-question .question-text { animation: question-arrives 620ms cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(80ms - var(--question-age)); }
.show-question .category-pill { animation: category-arrives 550ms cubic-bezier(.12,.8,.2,1) both; animation-delay: calc(30ms - var(--question-age)); }
[data-show-phase="reading"].show-question .answer-card { animation: question-card-arrives 500ms cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(260ms - var(--question-age)); }
[data-show-phase="answering"] .timer { animation: buzzer-opens 650ms ease-out both; animation-delay: calc(0ms - var(--phase-age)); }
.answer-reveal.correct { --revealed-border: #a2e8b8; --revealed-background: #28533c; --revealed-opacity: 1; }
.answer-reveal.incorrect { --revealed-border: #72908244; --revealed-background: #102b28; --revealed-opacity: .46; }
.answer-card.answer-reveal { animation: answer-verdict 460ms cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--reveal-delay, 700ms) - var(--phase-age)); }
.answer-reveal .answer-result { animation: verdict-label 380ms ease-out both; animation-delay: calc(var(--reveal-delay, 700ms) + 130ms - var(--phase-age)); }
.answer-reveal.correct .answer-letter { animation: correct-letter 460ms ease-out both; animation-delay: calc(var(--reveal-delay, 700ms) - var(--phase-age)); }
.answer-reveal .result-fill { transform-origin: left; animation: votes-fill 650ms cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--reveal-delay, 700ms) + 180ms - var(--phase-age)); }
[data-show-phase="reveal"] .explanation, [data-show-phase="reveal"] .mini-leaders { animation: verdict-label 440ms ease-out both; animation-delay: calc(1400ms - var(--phase-age)); }
.view-play [data-show-phase="reveal"] .player-result { animation: result-panel-in 450ms cubic-bezier(.16,1,.3,1) both; animation-delay: calc(1100ms - var(--phase-age)); }
.view-play [data-show-phase="reveal"] .player-result.lost { animation-name: result-fail-in; animation-duration: 650ms; }
.view-play [data-show-phase="reveal"] .points-gained { animation: point-explosion 650ms cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(1350ms - var(--phase-age)); }
.joker.active .joker-symbol { animation: joker-punch 650ms cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(0ms - var(--joker-age)); }
.joker.active { box-shadow: 0 0 0 1px #ebbe7315, 0 0 34px #ebbe730b; }
[data-show-phase="leaderboard"] .ranking-title, [data-show-phase="finished"] .ranking-title { animation: ranking-heading 600ms cubic-bezier(.16,1,.3,1) both; animation-delay: calc(80ms - var(--phase-age)); }
[data-show-phase="leaderboard"] .ranking-row, [data-show-phase="finished"] .ranking-row { animation: ranking-shuffle 700ms cubic-bezier(.16,1,.3,1) both; animation-delay: calc(650ms + var(--rank-delay, 0ms) - var(--phase-age)); }
[data-show-phase="leaderboard"] .podium-player, [data-show-phase="finished"] .podium-player { animation: podium-rise 900ms cubic-bezier(.16,1,.3,1) both; animation-delay: calc(580ms - var(--phase-age)); }
[data-show-phase="leaderboard"] .podium-player.first, [data-show-phase="finished"] .podium-player.first { animation-delay: calc(1050ms - var(--phase-age)); }
[data-show-phase="leaderboard"] .podium-player.second, [data-show-phase="finished"] .podium-player.second { animation-delay: calc(800ms - var(--phase-age)); }
[data-show-phase="leaderboard"] .podium-crown, [data-show-phase="finished"] .podium-crown, [data-show-phase="finished"] .winner-crown { animation: crown-slam 750ms cubic-bezier(.16,1,.3,1) both; animation-delay: calc(1400ms - var(--phase-age)); }
.rank-movement { font-size: 10px; font-weight: 800; letter-spacing: -.3px; padding: 3px 5px; border-radius: 6px; flex: 0 0 auto; }
.rank-movement.up { color: #9ce9b8; background: #9ce9b80e; }
.rank-movement.down { color: #ffabab; background: #ffabab0c; }
.podium-player .rank-movement { display: inline-block; margin-top: 10px; font-size: 12px; }
.show-effects { position: fixed; z-index: 50; inset: 0; pointer-events: none !important; overflow: hidden; isolation: isolate; }
.show-effects:empty { display: none; }
.show-cue { position: absolute; z-index: 2; top: 38%; left: 50%; transform: translate(-50%, -50%); width: min(1320px, 94vw); text-align: center; color: var(--gold-light); display: flex; flex-direction: column; align-items: center; padding: 24px 20px; animation: show-slam 1900ms cubic-bezier(.2,.8,.2,1) both; }
.cue-kicker { font-size: clamp(10px, 1.2vw, 20px); font-weight: 800; letter-spacing: .22em; text-transform: uppercase; display: block; margin-bottom: 16px; text-shadow: 0 2px 14px #000; }
.cue-headline { font-size: clamp(42px, 6.5vw, 122px); font-weight: 950; line-height: .99; letter-spacing: -.055em; text-wrap: balance; text-shadow: 0 4px 0 #25473c, 0 8px 0 #102c28, 0 15px 40px #000b; transform: rotate(-3deg); max-width: 100%; overflow-wrap: anywhere; }
.cue-subtitle { font-size: clamp(13px, 1.55vw, 27px); line-height: 1.45; font-weight: 650; margin-top: 23px; max-width: min(850px, 90vw); color: #f5f1e7; background: #092722ed; border: 1px solid #ebbe7355; border-radius: 12px; padding: 12px 22px; box-shadow: 0 12px 28px #0004; }
.show-wipe { position: absolute; z-index: 0; inset: 0; background: linear-gradient(115deg, #0b2820ed, #0c302ade 45%, #071d1cf0); clip-path: polygon(0 8%, 100% 0, 100% 95%, 0 100%); animation: stage-wipe 2100ms cubic-bezier(.65,0,.18,1) both; }
.show-wipe::before, .show-wipe::after { content: ""; position: absolute; left: 4%; right: 4%; height: 2px; background: linear-gradient(90deg, transparent, #ebbe73, transparent); box-shadow: 0 0 35px 3px #ebbe7344; }
.show-wipe::before { top: 14%; transform: rotate(-4deg); }
.show-wipe::after { bottom: 17%; transform: rotate(-4deg); }
.effect-question .show-wipe { inset: 5% -4% 40%; animation-duration: 1700ms; background: linear-gradient(120deg, #174735fb, #0a2c27f7); border-block: 1px solid #ebbe7388; }
.effect-question .show-cue { top: 31%; align-items: flex-start; text-align: left; padding-left: clamp(55px, 10vw, 180px); animation: question-cue-in 1700ms cubic-bezier(.2,.8,.2,1) both; }
.effect-question .cue-headline { font-size: clamp(40px, 5.2vw, 90px); max-width: 85%; }
.cue-question-number { position: absolute; right: 5%; top: 50%; transform: translateY(-50%); font-size: clamp(120px, 24vw, 370px); font-weight: 950; line-height: 1; letter-spacing: -.1em; color: #ebbe7318; -webkit-text-stroke: 1px #ebbe7366; z-index: -1; }
.effect-result .show-wipe { animation-duration: 2200ms; }
.effect-result .show-cue { animation: result-slam 2200ms cubic-bezier(.16,1,.3,1) both; top: 43%; }
.cue-suspense { position: absolute; z-index: 2; top: 43%; left: 50%; width: 92vw; transform: translate(-50%, -50%); text-align: center; color: #f9edcf; animation: suspense-out 2200ms ease both; }
.cue-suspense span { display: block; font-size: clamp(10px, 1.2vw, 18px); font-weight: 700; letter-spacing: .3em; margin-bottom: 19px; }
.cue-suspense strong { display: block; font-size: clamp(46px, 6.8vw, 126px); font-weight: 950; line-height: .95; letter-spacing: -.06em; text-shadow: 0 8px 35px #000; }
.cue-suspense i { display: block; font-size: clamp(12px, 1.4vw, 20px); color: var(--muted); font-style: normal; margin-top: 23px; }
.tone-fail .cue-headline { color: #ffb1ac; text-shadow: 0 4px 0 #7e2f35, 0 8px 0 #311c24, 0 15px 40px #000b; }
.tone-fail .show-wipe { background: radial-gradient(ellipse at 50% 35%, #682b32f5, #25171df5 70%); }
.tone-win .cue-headline { color: #d0f1b5; }
.effect-ranking .show-cue { animation-duration: 1500ms; }
.effect-ranking .show-wipe { animation-duration: 1500ms; background: linear-gradient(115deg, #11362af2, #0a2826f2); }
.effect-ranking .cue-headline { font-size: clamp(38px, 5.8vw, 100px); }
.effect-victory .show-cue { top: 34%; animation: victory-slam 3500ms cubic-bezier(.16,1,.3,1) both; }
.effect-victory .cue-headline { color: #ffdfa2; font-size: clamp(43px, 7vw, 125px); }
.effect-victory .show-wipe { background: radial-gradient(ellipse at 50% 15%, #8b71395c, #09251ee6 65%); animation: victory-light 3500ms ease both; }
.confetti-shower { position: absolute; z-index: 3; inset: 0; overflow: hidden; }
.confetti-shower i { position: absolute; top: -25px; left: var(--x); width: 9px; height: 16px; background: var(--piece); border-radius: 2px; animation: confetti-fall var(--fall) linear var(--delay) both; }
.confetti-shower i:nth-child(3n) { width: 7px; height: 7px; border-radius: 50%; }
.confetti-shower i:nth-child(5n) { width: 5px; height: 22px; }
.effect-joker .show-wipe { display: none; }
.effect-joker .show-cue { top: auto; bottom: 22px; width: min(490px, 92vw); background: linear-gradient(125deg, #755b24fb, #19372bf9); border: 1px solid #ffdb98aa; border-radius: 20px; text-align: left; align-items: flex-start; padding: 22px 85px 22px 22px; box-shadow: 0 0 80px #ebbe7344, 0 10px 40px #0008; animation: joker-cue 1150ms cubic-bezier(.16,1,.3,1) both; }
.effect-joker .cue-kicker { font-size: 8px; letter-spacing: 1.6px; margin-bottom: 9px; }
.effect-joker .cue-headline { font-size: 27px; letter-spacing: -.8px; transform: rotate(-2deg); text-shadow: 0 3px 5px #0006; }
.effect-joker .cue-subtitle { border: 0; background: none; box-shadow: none; padding: 0; margin: 9px 0 0; font-size: 11px; line-height: 1.5; }
.cue-joker-symbol { position: absolute; top: 32%; right: 18px; font-size: 55px; font-weight: 900; color: #ffdfa2; text-shadow: 0 4px 0 #3e331d; transform: rotate(12deg); }
.view-play .show-cue { padding-inline: 15px; top: 36%; }
.view-play .cue-headline { font-size: clamp(39px, 12vw, 70px); }
.view-play .cue-kicker { font-size: 9px; letter-spacing: 1.7px; margin-bottom: 17px; }
.view-play .cue-subtitle { font-size: 13px; margin-top: 19px; padding: 12px 15px; }
.view-play .cue-suspense { top: 36%; }
.view-play .cue-suspense strong { font-size: clamp(43px, 13vw, 73px); }
.view-play .cue-suspense span { font-size: 8px; letter-spacing: 2px; }
.view-play .cue-suspense i { font-size: 12px; padding: 0 18px; line-height: 1.5; }
.view-play .effect-question .show-wipe { inset: 7% -3% 51%; }
.view-play .effect-question .show-cue { top: 25%; padding-left: 25px; }
.view-play .effect-question .cue-headline { font-size: 36px; }
.view-play .cue-question-number { font-size: 150px; right: 5%; }
.view-play .effect-joker .show-cue { top: auto; padding: 20px 72px 20px 20px; }
.view-play .effect-joker .cue-headline { font-size: 25px; }
.view-play .effect-joker .cue-subtitle { font-size: 11px; padding: 0; margin-top: 9px; }
.view-play .effect-joker .cue-kicker { font-size: 8px; margin-bottom: 9px; }

/* Estimates are deliberately a number entry, never an answer tile in disguise. */
.estimate-stage { display: flex; align-items: center; gap: 30px; padding: 34px 38px; min-height: 220px; background: linear-gradient(115deg, #ebbe730c, #ffffff02); overflow: hidden; position: relative; }
.estimate-stage .eyebrow { font-size: 10px; }
.estimate-stage h2 { font-size: clamp(47px, 5.4vw, 90px); letter-spacing: -.05em; line-height: 1; margin: 19px 0 12px; }
.estimate-stage p { font-size: 15px; line-height: 1.5; color: var(--muted); margin-bottom: 0; }
.estimate-symbol { color: var(--gold); font-size: clamp(70px, 10vw, 145px); line-height: 1; transform: rotate(-8deg); font-weight: 750; }
.estimate-unit-tag { color: var(--gold-light); margin-left: auto; border: 1px solid #ebbe7344; padding: 13px 19px; border-radius: 30px; font-size: 17px; flex: 0 0 auto; max-width: 28%; overflow-wrap: anywhere; }
.estimate-form { padding: 24px; background: linear-gradient(145deg, #ebbe730b, #ffffff02); border-color: #ebbe7344; }
.estimate-form .field { margin-bottom: 10px; }
.estimate-input-wrap { position: relative; }
.estimate-form .field input { min-height: 82px; font-size: 35px; font-weight: 800; letter-spacing: -1px; padding: 16px; width: 100%; }
.estimate-form .field input:has(+ .estimate-input-unit) { padding-right: 100px; }
.estimate-form .field input::placeholder { font-size: 26px; font-weight: 650; letter-spacing: -.6px; }
.estimate-input-unit { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--gold); max-width: 85px; font-size: 12px; font-weight: 600; overflow-wrap: anywhere; text-align: right; }
.estimate-format-hint { font-size: 10px; color: var(--muted); line-height: 1.6; margin-bottom: 21px; }
.estimate-form .button { min-height: 56px; }
.estimate-logged { padding: 25px; text-align: center; border-color: #ebbe7355; background: #ebbe7307; }
.estimate-logged strong { display: block; font-size: clamp(32px, 9vw, 58px); letter-spacing: -1.8px; color: var(--gold-light); overflow-wrap: anywhere; margin: 17px 0; }
.estimate-logged > span:last-child { font-size: 11px; color: #b9ddc6; line-height: 1.5; }
.estimate-logged .section-label { font-size: 9px; line-height: 1.7; display: block; }
.estimate-target { text-align: center; padding: 20px 20px 25px; border: 1px solid #ebbe7355; border-radius: 19px; background: linear-gradient(120deg, #ebbe7311, #9ce8ba08); margin-bottom: 17px; }
.estimate-target > strong { font-size: clamp(47px, 5.4vw, 85px); letter-spacing: -.05em; font-weight: 900; color: var(--gold-light); display: block; line-height: 1.1; margin: 12px 0; overflow-wrap: anywhere; }
.estimate-target > strong small { display: inline-block; font-size: .28em; color: #e0ccb0; letter-spacing: 0; margin-left: 12px; font-weight: 600; vertical-align: middle; }
.estimate-target > span:last-child { display: block; font-size: 12px; line-height: 1.5; color: var(--muted); }
.estimate-result-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; max-height: 286px; overflow-y: auto; padding: 2px 4px; scrollbar-width: thin; scrollbar-color: #537267 transparent; }
.estimate-result-row { display: flex; gap: 11px; align-items: center; border: 1px solid var(--line); background: #ffffff04; border-radius: 13px; padding: 13px 16px; min-width: 0; }
.estimate-rank { font-weight: 750; font-size: 13px; color: var(--muted); min-width: 18px; }
.estimate-person { font-size: 13px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.estimate-person small { font-size: 8px; color: var(--gold); margin-left: 5px; letter-spacing: 1px; }
.estimate-value { font-weight: 750; font-size: 16px; text-align: right; line-height: 1.25; max-width: 34%; overflow-wrap: anywhere; }
.estimate-value small { display: block; font-size: 9px; font-weight: 500; color: var(--muted); margin-top: 5px; }
.estimate-points { font-size: 17px; color: var(--green); text-align: right; min-width: 49px; }
.estimate-points small { display: block; font-size: 8px; color: var(--muted); font-weight: 500; margin-top: 4px; }
.estimate-result-row.is-me { border-color: #ebbe7377; background: #ebbe730a; }
.estimate-result-row.is-exact { border-color: #9ce8ba66; background: #9ce8ba08; }
.estimate-result-row.is-exact .estimate-value small { color: var(--green); font-weight: 750; }
[data-show-phase="reveal"] .estimate-target { animation: target-slam 700ms cubic-bezier(.16,1,.3,1) both; animation-delay: calc(700ms - var(--phase-age)); }
[data-show-phase="reveal"] .estimate-result-row { animation: estimate-row-in 550ms cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--row-delay, 1100ms) - var(--phase-age)); }
.view-play .estimate-result-list, .host-panel .estimate-result-list { display: flex; flex-direction: column; max-height: 420px; }
.view-play .estimate-result-row { padding: 13px 10px; gap: 8px; }
.view-play .estimate-result-row .avatar { width: 26px; height: 26px; font-size: 9px; }
.view-play .estimate-rank { min-width: 15px; font-size: 11px; }
.view-play .estimate-person { font-size: 12px; }
.view-play .estimate-value { font-size: 14px; }
.view-play .estimate-points { font-size: 16px; min-width: 42px; }
.view-play .estimate-target { padding: 23px 14px; }
.view-play .estimate-target > strong { font-size: clamp(38px, 12vw, 68px); }
.view-play .estimate-target .section-label { font-size: 9px; }
.host-panel .estimate-stage { padding: 25px; min-height: 185px; gap: 20px; }
.host-panel .estimate-stage .eyebrow { font-size: 8px; letter-spacing: 1.4px; }
.host-panel .estimate-stage h2 { font-size: 54px; }
.host-panel .estimate-stage p { font-size: 12px; }
.host-panel .estimate-symbol { font-size: 85px; }
.host-panel .estimate-unit-tag { font-size: 12px; padding: 10px 15px; }
.host-panel .estimate-target > strong { font-size: 55px; }

/* Native Windows audio settings; browsers never play an audio stream. */
.settings-divider { border: 0; border-top: 1px solid var(--line); margin: 23px 0; }
.audio-control { margin-bottom: 22px; }
.audio-control:last-of-type { margin-bottom: 0; }
.audio-control .speech-toggle-row { margin-bottom: 12px; }
.volume-label { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 10px; }
.volume-label output { color: var(--gold-light); font-weight: 700; }
.volume-slider { width: 100%; accent-color: var(--gold); height: 26px; margin: 5px 0 0; cursor: pointer; }
.volume-slider:disabled { opacity: .4; }
.footer-actions { display: flex; align-items: center; gap: 20px; flex: 0 0 auto; }
.credits-link { border: 0; background: none; min-height: 36px; padding: 8px 0; font-size: 10px; color: var(--muted); text-decoration: underline; text-decoration-color: #adc0b94d; text-underline-offset: 3px; }
.credits-link:hover { color: var(--gold-light); }
.credits-dialog { width: min(720px, calc(100vw - 32px)); max-height: min(780px, 85dvh); padding: 28px; border: 1px solid #ebbe7366; border-radius: 22px; background: #102e29; color: var(--ink); box-shadow: 0 20px 90px #000a; }
.credits-dialog::backdrop { background: #03130fd9; backdrop-filter: blur(7px); }
.credits-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 25px; }
.credits-heading .section-label { font-size: 9px; }
.credits-heading h2 { margin: 10px 0 0; font-size: 29px; letter-spacing: -.8px; }
.credits-heading .button { font-size: 11px; white-space: nowrap; }
.credits-dialog pre { white-space: pre-wrap; overflow-wrap: anywhere; color: #c9d6c7; font: 13px/1.8 "Segoe UI", Arial, sans-serif; margin: 0; }

@keyframes question-arrives { from { opacity: 0; transform: translateX(-32px); filter: blur(3px); } to { opacity: 1; transform: translateX(0); filter: blur(0); } }
@keyframes category-arrives { from { opacity: 0; transform: translateX(40px) rotate(5deg); } to { opacity: 1; transform: none; } }
@keyframes question-card-arrives { from { opacity: .25; transform: translateY(15px); } to { opacity: 1; transform: none; } }
@keyframes buzzer-opens { 0% { box-shadow: 0 0 0 0 #ebbe7300; } 35% { box-shadow: 0 0 0 17px #ebbe731a, 0 0 38px #ebbe7333; } 100% { box-shadow: 0 0 0 25px #ebbe7300; } }
@keyframes answer-verdict { 0% { opacity: 1; border-color: var(--line); background: #12322e; transform: perspective(600px) rotateX(0); } 42% { opacity: 1; transform: perspective(600px) rotateX(12deg) scale(.98); } 100% { opacity: var(--revealed-opacity); border-color: var(--revealed-border); background: var(--revealed-background); transform: none; } }
@keyframes verdict-label { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes correct-letter { from { color: var(--answer-color); border-color: color-mix(in srgb, var(--answer-color) 30%, transparent); background: color-mix(in srgb, var(--answer-color) 10%, transparent); } to { color: #bff2ca; border-color: #bff2ca55; background: #a2e8b81a; } }
@keyframes votes-fill { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes result-panel-in { from { opacity: 0; transform: scale(.85); } 70% { opacity: 1; transform: scale(1.03); } to { opacity: 1; transform: scale(1); } }
@keyframes result-fail-in { 0% { opacity: 0; transform: scale(1.2) rotate(-4deg); } 35% { opacity: 1; transform: translateX(-11px) rotate(-2deg); } 50% { transform: translateX(9px) rotate(2deg); } 65% { transform: translateX(-6px) rotate(-1deg); } 80% { transform: translateX(4px); } 100% { opacity: 1; transform: none; } }
@keyframes point-explosion { 0% { opacity: 0; transform: scale(.2) rotate(-12deg); } 60% { opacity: 1; transform: scale(1.27) rotate(3deg); } 100% { opacity: 1; transform: none; } }
@keyframes joker-punch { 0% { transform: scale(.4) rotate(-35deg); } 60% { transform: scale(1.5) rotate(15deg); } 100% { transform: none; } }
@keyframes ranking-heading { from { opacity: 0; transform: translateY(-22px) scale(1.08); } to { opacity: 1; transform: none; } }
@keyframes ranking-shuffle { from { opacity: .3; transform: translateY(var(--rank-shift, 25px)); } to { opacity: 1; transform: none; } }
@keyframes podium-rise { 0% { opacity: 0; transform: translateY(65px) scale(.88); } 75% { opacity: 1; transform: translateY(-6px) scale(1.02); } 100% { opacity: 1; transform: none; } }
@keyframes crown-slam { 0% { opacity: 0; transform: translateY(-70px) rotate(-35deg) scale(1.8); } 65% { opacity: 1; transform: translateY(6px) rotate(8deg) scale(.8); } 100% { opacity: 1; transform: none; } }
@keyframes stage-wipe { 0% { transform: translateX(-115%) skewX(-10deg); opacity: 0; } 16%, 83% { transform: translateX(0) skewX(0); opacity: 1; } 100% { transform: translateX(115%) skewX(10deg); opacity: 0; } }
@keyframes show-slam { 0%, 7% { opacity: 0; transform: translate(-50%, -50%) scale(2.2) rotate(-9deg); } 23% { opacity: 1; transform: translate(-50%, -50%) scale(.94) rotate(1deg); } 34%, 78% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); } 100% { opacity: 0; transform: translate(-20%, -50%) scale(.95) rotate(4deg); } }
@keyframes question-cue-in { 0% { opacity: 0; transform: translate(-80%, -50%) skewX(-12deg); } 22%, 76% { opacity: 1; transform: translate(-50%, -50%) skewX(0); } 100% { opacity: 0; transform: translate(-20%, -50%) skewX(7deg); } }
@keyframes suspense-out { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.7); } 8%, 29% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 36%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.25); } }
@keyframes result-slam { 0%, 35% { opacity: 0; transform: translate(-50%, -50%) scale(2.8) rotate(-13deg); } 46% { opacity: 1; transform: translate(-50%, -50%) scale(.88) rotate(4deg); } 54% { opacity: 1; transform: translate(-50%, -50%) scale(1.05) rotate(-2deg); } 62%, 85% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); } 100% { opacity: 0; transform: translate(-50%, -70%) scale(.94); } }
@keyframes victory-slam { 0%, 3% { opacity: 0; transform: translate(-50%, -50%) scale(2.5) rotate(12deg); } 17% { opacity: 1; transform: translate(-50%, -50%) scale(.95) rotate(-3deg); } 25%, 70% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 88%, 100% { opacity: 0; transform: translate(-50%, -80%) scale(.9); } }
@keyframes victory-light { 0% { opacity: 0; } 12%, 64% { opacity: 1; } 100% { opacity: 0; } }
@keyframes confetti-fall { 0% { opacity: 0; transform: translate3d(0,-30px,0) rotate(0); } 8%, 75% { opacity: 1; } 100% { opacity: 0; transform: translate3d(var(--drift), 105vh, 0) rotate(var(--spin)); } }
@keyframes joker-cue { 0% { opacity: 0; transform: translate(-50%, 130%) scale(.7) rotate(-8deg); } 24%, 79% { opacity: 1; transform: translate(-50%, 0) scale(1) rotate(-2deg); } 100% { opacity: 0; transform: translate(-50%, -25px) scale(1.08) rotate(1deg); } }
@keyframes target-slam { 0% { opacity: 0; transform: scale(1.3) rotate(-3deg); } 70% { opacity: 1; transform: scale(.97) rotate(1deg); } 100% { opacity: 1; transform: none; } }
@keyframes estimate-row-in { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: none; } }

@media (max-width: 800px) {
  .estimate-stage { padding: 28px; gap: 23px; min-height: 180px; }
  .estimate-stage h2 { font-size: 50px; }
  .estimate-symbol { font-size: 90px; }
  .estimate-stage .eyebrow { font-size: 8px; letter-spacing: 1.4px; }
  .estimate-stage p { font-size: 12px; }
  .estimate-unit-tag { font-size: 12px; padding: 10px 13px; }
  .estimate-result-list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .estimate-stage { padding: 21px; gap: 17px; flex-wrap: wrap; }
  .estimate-stage > div:nth-child(2) { flex: 1; }
  .estimate-stage h2 { font-size: 42px; margin-top: 14px; }
  .estimate-symbol { font-size: 68px; }
  .estimate-unit-tag { max-width: 100%; margin-left: 0; }
  .estimate-form { padding: 20px; }
  .estimate-form .field input { min-height: 78px; font-size: 31px; }
  .estimate-result-row { padding: 12px; gap: 9px; }
  .estimate-person { font-size: 12px; }
  .estimate-value { font-size: 14px; }
  .estimate-points { font-size: 15px; min-width: 40px; }
  .footer-actions { gap: 0; }
  .footer-actions .footer-stars { display: none; }
  .credits-link { font-size: 8px; }
  .app-footer > span { max-width: 65%; }
  .credits-dialog { padding: 22px; }
  .credits-heading { gap: 12px; align-items: flex-start; }
  .credits-heading h2 { font-size: 24px; }
  .credits-heading .button { font-size: 10px; padding: 8px; }
  .credits-dialog pre { font-size: 12px; }
}
@media (min-width: 900px) and (max-height: 850px) {
  .view-board .estimate-stage { min-height: 170px; padding: 22px 30px; }
  .view-board .estimate-stage h2 { font-size: 61px; margin-top: 15px; }
  .view-board .estimate-symbol { font-size: 100px; }
  .view-board .estimate-target { padding: 14px 20px; margin-bottom: 12px; }
  .view-board .estimate-target > strong { font-size: 60px; margin: 8px 0; }
  .view-board .estimate-result-list { max-height: 170px; }
  .view-board .estimate-result-row { padding: 10px 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .show-effects .show-wipe { opacity: .96; transform: none; }
  .show-effects .show-cue { transform: translate(-50%, -50%); opacity: 1; }
  .show-effects .cue-headline { transform: none; }
  .show-effects .cue-suspense, .show-effects .confetti-shower { display: none; }
  .effect-joker .show-cue { transform: translate(-50%, 0); }
}

/* SHOW 0.3 — original broadcast identity. Cobalt, electric acid, hard cuts. */
:root{--bg:#080713;--ink:#f5f2ff;--muted:#a09bb9;--faint:#6b637f;--panel:#191129;--line:#ad8eff36;--gold:#ddff00;--gold-light:#eaff7a;--green:#b3ff55;--red:#ff365e;--radius:4px;--display:Impact,"Arial Narrow","Bahnschrift Condensed",sans-serif}
body{background:radial-gradient(ellipse at 50% 0,#3d28796e,transparent 62%),#080713}body::after{opacity:.07}.ambient{z-index:0;background-image:radial-gradient(#a28aff33 1px,transparent 1px);background-size:13px 13px;mask-image:linear-gradient(#000b,transparent 95%)}.ambient::before{width:140vw;height:140vw;left:-20vw;top:29vh;background:none;border:2px solid #9181ff44;border-radius:50%;filter:none;box-shadow:0 0 0 24px #3f2eff0a,0 0 0 75px #7b5aff12,0 0 0 77px #b9aaff24,0 0 0 125px #4a32ff11;transform:perspective(600px) rotateX(58deg);animation:studio-ring 12s ease-in-out infinite alternate}.ambient::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,#5840ff18 40%,transparent 60%);animation:led-sweep 12s linear infinite}.ambient i{width:24vw;height:110vh;top:-35vh;left:0;background:linear-gradient(#b69cff55,transparent 70%);filter:blur(18px);clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);border-radius:0;box-shadow:none;opacity:.5;transform-origin:50% 0;animation:followspot 16s ease-in-out infinite alternate}.ambient i:nth-child(2){top:-35vh;left:auto;right:0;animation-delay:-8s;animation-direction:alternate-reverse}.ambient i:nth-child(3){top:-35vh;left:35%;width:15vw;height:110vh;opacity:.3;animation-delay:-4s}.ambient i:nth-child(4){display:none}.app-shell{z-index:1;padding:24px 38px 14px;max-width:1860px}.app-header{padding-bottom:18px;border-color:#a28aff44}.brand-icon{background:var(--gold);color:#080713;border:0;border-radius:0;width:32px;height:41px;transform:skew(-10deg);font:39px/1 var(--display)}.brand-name{font-family:var(--display);font-size:33px;letter-spacing:.3px;font-weight:400;transform:skew(-4deg)}.brand-sub{font-size:7px;letter-spacing:2.9px}.connection{font-size:9px;text-transform:uppercase;letter-spacing:1px}.status-dot{border-radius:0;background:var(--red);box-shadow:none}.connection.is-connected .status-dot{background:var(--gold);box-shadow:0 0 15px #ddff0055}.room-pill,.view-badge{border-radius:0;background:#151025}.room-pill strong{font-size:16px;color:white}.panel{border-radius:4px;background:linear-gradient(135deg,#201632ed,#100c1fe8);border-color:var(--line)}.button{border-radius:3px;box-shadow:none;transition:transform .15s,background .15s}.button.primary{background:var(--gold);color:#080713;box-shadow:5px 5px 0 #ddff0018}.button.primary:hover:not(:disabled){background:#edff89}.button:hover:not(:disabled){transform:translateY(-2px)}.field input,.field select,.voice-select{border-radius:3px;background:#080713;border-color:#a78ad155}.count-badge{border-radius:0;background:#ddff0012;color:var(--gold);border:1px solid #ddff0033}.avatar{border-radius:2px;transform:skew(-4deg)}.moderator{border:0;border-left:3px solid var(--gold);border-radius:0;background:#0b0819db;padding:16px 18px}.moderator-icon{border:0;border-radius:0;font-size:23px;width:29px}.moderator p{color:#e9e0ff}.footer-stars{color:var(--gold)}.credits-dialog{background:#170d28;border-radius:4px;border-color:#ddff0077;box-shadow:10px 10px 0 #3e35ff55}.credits-heading h2{font-family:var(--display);font-size:36px;font-weight:400}.toast{background:#1b102a;border-radius:0;border-color:var(--gold);box-shadow:5px 5px 0 #3e35ff}.switch[aria-checked="true"]{background:#ddff0022;border-color:#ddff0077}.switch[aria-checked="true"]::after{background:var(--gold)}.voice-select{color:white}
/* Lobby: a poster, a studio floor, a moving LED crawl. */
.lobby-layout{grid-template-columns:1.45fr .6fr;gap:50px;min-height:620px}.lobby-title{font:400 clamp(67px,6.8vw,126px)/.82 var(--display);letter-spacing:-1.5px;margin:25px 0}.lobby-title>span{display:block}.outline-type{color:transparent;-webkit-text-stroke:1.4px #c9c1ff}.lobby-title em{display:block;color:var(--gold);margin-top:17px;transform:skew(-5deg);text-shadow:6px 6px 0 #3c22b8}.title-spark{display:inline-block;font-size:.72em;color:#fff;transform:rotate(8deg)}.lobby-description{position:absolute;right:4%;top:21%;max-width:250px;border-left:3px solid var(--red);padding-left:16px;font-size:16px;line-height:1.6;transform:rotate(6deg)}.act-preview{display:flex;gap:24px;margin-top:29px}.act-preview span{font-size:10px;letter-spacing:1.5px;font-weight:800;color:#c8bee4}.act-preview b{font:400 23px var(--display);color:var(--gold);margin-right:7px}.selected-topics{margin-top:23px;max-width:700px}.selected-topics .section-label{font-size:8px}.selected-topics p{margin:8px 0 0;font-size:10px;line-height:1.7;color:#bcb1d2;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.join-poster{background:#efedff;color:#110b28;border:0;border-radius:0;padding:28px 23px;transform:rotate(2deg);box-shadow:12px 12px 0 #4b2df2,21px 21px 0 #4b2df226}.join-poster::before{content:"DU. JA DU.";position:absolute;top:-18px;right:-11px;font:400 23px/1 var(--display);padding:9px 14px;background:var(--red);color:#fff;transform:rotate(8deg)}.join-poster .section-label{color:#6a5c87;font-size:8px}.join-poster h2{font:400 37px/1 var(--display);letter-spacing:0;margin:13px 0}.join-poster .qr-frame{border-radius:0;padding:9px;margin:21px auto 15px;box-shadow:none}.join-poster .join-address{color:#261b43;font-size:11px}.join-poster .room-code-label{color:#7a6b91;font-size:8px;text-transform:uppercase;letter-spacing:1px}.join-poster .room-code{font:400 39px/1 var(--display);letter-spacing:6px;color:#160b32}.studio-ticker{overflow:hidden;background:var(--gold);color:#080713;padding:10px 0;transform:rotate(-1deg);margin:7px -38px 24px}.studio-ticker span{display:block;width:max-content;white-space:nowrap;font:400 23px/1 var(--display);letter-spacing:1.4px;animation:studio-crawl 30s linear infinite}.lobby-roster{border:0;padding-top:0}.player-chip{border-radius:2px;background:#1d112ee8;border-color:#a78bdd55}.lobby-copy>.eyebrow{font-size:9px;letter-spacing:2px}
/* Broadcast frame: central question set, question ladder, real live locks. */
.broadcast-grid{display:grid;grid-template-columns:minmax(0,1fr) 235px;gap:28px;align-items:start}.main-stage{min-width:0}.round-strip{display:flex;align-items:center;gap:13px;padding-bottom:15px;border-bottom:1px solid #8062d4aa;margin-bottom:18px}.round-index{font:400 32px/1 var(--display);color:var(--gold);padding-right:13px;border-right:1px solid var(--line)}.round-kicker{font-size:7px;letter-spacing:2px;color:var(--muted);display:block;margin-bottom:4px;text-transform:uppercase}.round-strip strong{font:400 23px/1 var(--display);text-transform:uppercase;letter-spacing:.5px}.round-scoring{margin-left:auto;text-align:right;color:var(--gold);font-size:9px;letter-spacing:.6px;line-height:1.5;font-weight:800}.round-risk{border-color:var(--red)}.round-risk .round-index,.round-risk .round-scoring{color:#ff7593}.round-chase .round-index{color:#b081ff}.question-number{display:flex;align-items:center;gap:9px;font-size:9px;letter-spacing:1.2px}.question-number b{font:400 36px/1 var(--display);color:#f5f2ff}.category-pill{border-radius:0;background:#5f329233;border-color:#a47bec66;color:#d4bdff;font-size:10px;letter-spacing:1px;text-transform:uppercase}.question-text{font-size:clamp(28px,3vw,53px);font-weight:780;line-height:1.17;letter-spacing:-1.2px}.question-heading{margin:24px 0 28px}.progress-dots i{border-radius:0;transform:skew(-20deg);background:#a78aff16}.progress-dots i.complete{background:#8861ca}.progress-dots i.current{background:var(--gold);box-shadow:0 0 15px #ddff0055}.timer{background:conic-gradient(var(--timer-color) var(--remaining),#8071b31a 0);box-shadow:0 0 0 1px #8960d844}.timer-center{background:#0d081b}.timer strong{font:400 40px/1 var(--display);letter-spacing:0}.timer.is-urgent{animation:urgent-flare .6s ease-in-out infinite alternate}.answer-card{border-radius:2px;background:linear-gradient(110deg,#2a194c,#160e29);border-color:#9f7cce88;box-shadow:4px 5px 0 #05020c;padding:22px;min-height:110px;gap:18px}.answer-letter{border-radius:0;border:0;border-right:1px solid #a78acf66;background:none;color:var(--gold);font:400 27px/40px var(--display);width:39px;min-width:39px;height:40px;display:block}.answer-label{font-size:clamp(19px,1.85vw,31px);font-weight:650}.answer-card.correct{border-color:var(--gold);background:linear-gradient(110deg,#5e621a,#2d251b);box-shadow:0 0 28px #ddff0018}.answer-card.correct .answer-letter{background:none;border-color:#ddff0066;color:var(--gold)}.answer-card.incorrect{opacity:.36}.answer-result strong{font-size:19px}.result-fill{background:#ffffff08}.correct .result-fill{background:#ddff0010;border-color:#ddff0022}.stage-note{font-size:10px;color:#a494b8}.live-locks{border-top:1px solid var(--line);padding-top:14px;margin-top:21px}.lock-topline{display:flex;align-items:center;justify-content:space-between;gap:16px}.lock-topline>span{font-size:8px;letter-spacing:1.4px;color:var(--muted);font-weight:750}.lock-topline .on-air{width:5px;height:5px;background:var(--gold);margin-right:5px}.lock-topline>strong{font:400 25px/1 var(--display);color:var(--gold)}.lock-topline small{font-size:14px;color:var(--muted)}.lock-players{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.live-lock{display:flex;align-items:center;gap:7px;font-size:10px;padding:6px 8px;border:1px solid #a78acb33;background:#1b1128;color:#7b6b8d}.live-lock b{font-size:11px}.live-lock.locked{border-color:#ddff0066;color:#eaff88;background:#ddff0009;animation:live-lock-slam .5s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(0ms - var(--lock-age,10000ms))}.more-locks{font-size:8px;color:var(--muted);padding:7px}.scoretower{border:1px solid #9d79d455;background:#11091fe8;padding:15px}.tower-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:9px;letter-spacing:2px;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:11px;margin-bottom:13px}.tower-heading>b{font-size:22px;color:var(--gold);font-weight:400}.ladder-steps{display:flex;flex-direction:column;gap:3px}.ladder-rung{display:flex;align-items:center;gap:10px;padding:5px 7px;min-height:23px;background:#2a193966;color:#746284;font-size:8px}.ladder-rung>b{font:400 14px/1 var(--display);color:#aa8ec2}.ladder-rung>span{flex:1;font-size:7px;letter-spacing:.7px}.ladder-rung>i{font-style:normal}.ladder-rung.complete{background:#2c133d;color:#a16cc8}.ladder-rung.current{background:var(--gold);color:#110820;transform:translateX(-6px);box-shadow:6px 0 0 var(--gold)}.ladder-rung.current>b{color:#110820}.tower-leaders{margin-top:23px}.tower-player{display:flex;align-items:center;gap:8px;font-size:10px;padding:10px 0;border-bottom:1px solid #fff1}.tower-player>b{font-size:12px;color:var(--gold)}.tower-player>span{flex:1;overflow-wrap:anywhere}.tower-points{font-size:12px}.chase-track{padding-bottom:10px}.chase-track h2{font:400 37px/.95 var(--display);color:var(--gold);margin:20px 0 25px}.chase-lane{margin:18px 0}.chase-lane>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:8px;margin-bottom:8px;letter-spacing:.5px}.chase-lane>div:first-child>span{color:var(--muted)}.chase-cells{display:flex;gap:3px}.chase-cells>i{display:grid;place-items:center;font:400 11px var(--display);flex:1;height:27px;background:#35203f;color:#776080;transform:skew(-7deg)}.team-lane .passed{background:#ddff0030;color:#ddff00}.team-lane .head{background:var(--gold);color:#111}.hunter-lane .passed{background:#ff365e33;color:#ff829b}.hunter-lane .head{background:var(--red);color:#fff}.chase-track p{font-size:10px;line-height:1.6;color:var(--muted);margin:15px 0}.chase-question-count{font-size:8px;letter-spacing:1px;color:#b485cc}.app-main>.chase-track{max-width:1060px;margin:0 auto 20px}.app-main>.chase-track .chase-lane{display:inline-block;width:47%;margin-right:2%}
/* Result stage and controllers */
.ranking-title{font:400 clamp(42px,4.8vw,83px)/1 var(--display);text-transform:uppercase;letter-spacing:-.4px}.podium-player{border-radius:0;background:linear-gradient(145deg,#44225d,#211030);border-color:#ab7ec777;box-shadow:7px 7px 0 #05020a}.podium-player.first{background:linear-gradient(150deg,#504016,#261334);border-color:var(--gold)}.podium-player.second,.podium-player.third{border-radius:0}.podium-crown{color:var(--gold)}.podium-points{font:400 35px/1 var(--display);color:var(--gold)}.podium-points small{font:9px "Segoe UI",sans-serif}.ranking-row{border:0;border-bottom:1px solid #8f5ab366;border-radius:0;background:#1e102bb3}.ranking-row.is-me{background:#ddff0010;border-color:var(--gold)}.delta.negative{color:var(--red)}.rank-movement{border-radius:0}.rank-movement.up{color:var(--gold);background:#ddff000a}.rank-movement.down{color:#ff7a97;background:#ff365e0c}.view-play .ambient,.view-host .ambient{opacity:.42}.view-play .brand-icon{border-radius:0}.view-play .brand-name{font-size:28px}.view-play .brand-sub{font-size:5.5px;letter-spacing:2px}.join-title{font:400 clamp(57px,12vw,81px)/.92 var(--display);text-transform:uppercase;letter-spacing:-.5px}.join-form{background:linear-gradient(135deg,#241637,#130b22);border-top:3px solid var(--gold);border-radius:0}.waiting-card{border-radius:0;background:linear-gradient(135deg,#432064,#1b0e2b);border-color:#a474d288}.waiting-symbol{background:none;border:0;border-radius:0;font-size:77px;color:var(--gold);transform:rotate(-10deg);box-shadow:none}.waiting-card h1{font:400 42px/1 var(--display);text-transform:uppercase;letter-spacing:0}.player-score strong{font:400 31px/1 var(--display);color:var(--gold)}.view-play .answer-card{border-radius:2px;min-height:127px}.view-play .answer-letter{border:0;background:none;border-radius:0;font:400 23px/1 var(--display);color:var(--gold);width:auto;min-width:0;height:auto}.view-play .answer-label{font-size:16px}.view-play .answer-card.selected{background:#424214;border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}.view-play .answer-card.selected .answer-letter{color:var(--gold);background:none;border:0}.view-play .timer strong{font:400 29px/1 var(--display)}.answer-confirmation{border-radius:0;background:#ddff0009;border-color:#ddff0044;color:#d7e992}.answer-confirmation.neutral{background:#1c102b;border-color:var(--line);color:var(--muted)}.joker{border-radius:0;background:#2d163f;border-color:#aa7ac266;box-shadow:3px 3px 0 #05020b}.joker-symbol{font:400 34px/1 var(--display)}.joker.active{border-color:var(--gold);background:#34390f;box-shadow:none}.player-result{border-radius:0}.player-result.won{border-color:var(--gold);background:#33370e}.player-result.lost{border-color:var(--red);background:#471026}.player-result h1{font:400 36px/1 var(--display);text-transform:uppercase;letter-spacing:0}.points-gained{font:400 48px/1 var(--display);color:var(--gold)}.winner-banner{border-radius:0;background:linear-gradient(150deg,#61431a,#301235);border-color:var(--gold)}.winner-banner h2{font:400 43px/1 var(--display)}.estimate-stage{border-radius:0;background:linear-gradient(120deg,#44215f,#1b0b2a);border-color:#aa72d888}.estimate-symbol{font-family:var(--display);color:var(--gold)}.estimate-stage h2{font:400 clamp(49px,5vw,87px)/1 var(--display);text-transform:uppercase;letter-spacing:0}.estimate-unit-tag{border-radius:0;border-color:#ddff0055;color:var(--gold)}.estimate-form{border-radius:0;background:linear-gradient(120deg,#30203e,#1a0b29);border-color:#ddff0077}.estimate-logged{border-radius:0;background:#282a13;border-color:var(--gold)}.estimate-logged strong{font:400 49px/1.15 var(--display);color:var(--gold)}.estimate-target{border-radius:0;background:linear-gradient(115deg,#494321,#2c163d);border-color:var(--gold)}.estimate-target>strong{font-family:var(--display);font-weight:400;letter-spacing:0;color:var(--gold)}.estimate-result-row{border-radius:0;background:#20102c;border-color:#9760b944}.estimate-result-row.is-me,.estimate-result-row.is-exact{background:#ddff000c;border-color:#ddff0077}.estimate-points{color:var(--gold)}.host-intro h1{font:400 37px/1 var(--display);letter-spacing:0}.host-lobby-heading{font:400 49px/.95 var(--display);text-transform:uppercase}.host-panel,.host-actions{border-radius:0}.host-join{border-radius:0;background:#10071e;border-color:var(--line)}.host-actions{background:#ddff0006;border-color:#ddff0077}.host-join .room-code{font-family:var(--display);font-weight:400;color:var(--gold)}.phase-label{border-radius:0;background:#3f165633;border-color:#b477d866;color:#e0bcfa}.settings-panel,.host-roster{border-radius:0}.settings-note strong{color:#ebd4fa}.host-player{border-color:#fff1}.auto-next{font-size:10px;line-height:1.6;color:var(--gold);margin:0 0 13px}.awake-status{display:flex;align-items:center;justify-content:space-between;gap:13px;margin:-9px 0 20px;font-size:9px;color:#a69bb9}.awake-status button{background:none;border:0;border-bottom:1px dotted #ddff0066;color:var(--gold);font-size:9px;padding:7px 0}.category-panel{padding:23px;margin-top:18px}.category-panel h2{font-size:23px;letter-spacing:-.5px;margin:9px 0 0}.catalog-total{font-size:8px;letter-spacing:1px;color:var(--gold);text-align:right}.category-toolbar{display:flex;align-items:center;justify-content:space-between;border-block:1px solid var(--line);padding:10px 0;margin:20px 0 15px;font-size:10px;color:var(--muted)}.category-toolbar>div{display:flex;gap:6px}.category-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.category-choice{display:flex;align-items:center;gap:11px;padding:13px 12px;border:1px solid #ad7fd044;background:#16091e;cursor:pointer}.category-choice:has(input:checked){background:#53327855;border-color:#b18aff88}.category-choice.featured{border-left:3px solid var(--gold)}.category-choice input{accent-color:var(--gold);width:18px;height:18px;flex-shrink:0}.category-choice>span{flex:1;min-width:0}.category-choice strong{display:block;font-size:12px;line-height:1.3}.category-choice small{display:block;font-size:8px;line-height:1.6;color:var(--muted);margin-top:4px}.category-choice>b{font:400 22px var(--display);color:#b68bdd}.category-bottom{display:flex;align-items:center;justify-content:space-between;gap:17px;margin-top:18px}.category-bottom>label{display:flex;align-items:center;gap:13px;font-size:10px;color:var(--muted)}.category-bottom select{background:#16091e;color:var(--ink);border:1px solid var(--line);padding:10px;font-size:12px}.category-bottom .button{font-size:11px}
/* Every cue seeks from server epoch time; no CSS animation restarts on heartbeats. */
.show-effects{--cue-age:0ms;--cue-duration:4000ms}.show-wipe{inset:0;background:#0c0419f5;clip-path:none;animation:tv-backdrop var(--cue-duration) linear both;animation-delay:calc(0ms - var(--cue-age))}.show-wipe::before{inset:auto;left:50%;top:50%;width:130vw;height:130vw;border:35px solid #a771ff33;outline:2px solid #ddff0044;border-radius:50%;background:none;box-shadow:0 0 0 60px #3e35ff22,0 0 0 120px #3e35ff16;transform:translate(-50%,-50%) rotateX(55deg);animation:tv-ring var(--cue-duration) ease both;animation-delay:calc(0ms - var(--cue-age))}.show-wipe::after{display:none}.show-wipe i{position:absolute;inset:-10% -50%;height:45%;background:#5135ff;transform:rotate(-12deg);animation:tv-slash var(--cue-duration) cubic-bezier(.6,0,.2,1) both;animation-delay:calc(0ms - var(--cue-age))}.show-wipe i:nth-child(1){top:0;background:#7835ff}.show-wipe i:nth-child(2){top:37%;background:#ddff00;opacity:.1;animation-direction:reverse}.show-wipe i:nth-child(3){top:82%;height:8%;background:#ff3456}.cue-marquee{position:absolute;top:11%;left:0;right:0;z-index:1;background:var(--gold);color:#080713;transform:rotate(-4deg);overflow:hidden;padding:8px 0;animation:tv-marquee-in var(--cue-duration) linear both;animation-delay:calc(0ms - var(--cue-age))}.cue-marquee span{display:block;width:max-content;font:400 27px/1 var(--display);letter-spacing:2px;animation:tv-crawl var(--cue-duration) linear both;animation-delay:calc(0ms - var(--cue-age))}.show-cue{position:absolute;z-index:3;left:50%;top:49%;width:92vw;max-width:1540px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px 20px;transform:translate(-50%,-50%);animation:tv-slam var(--cue-duration) cubic-bezier(.16,1,.3,1) both;animation-delay:calc(0ms - var(--cue-age))}.cue-kicker{font-size:clamp(10px,1.3vw,21px);font-weight:850;letter-spacing:.25em;color:var(--gold);margin-bottom:20px;text-shadow:none;text-transform:uppercase;max-width:90vw}.cue-headline{position:relative;font:400 clamp(64px,10vw,186px)/.88 var(--display);letter-spacing:-.02em;text-transform:uppercase;color:#f3eeff;transform:rotate(-4deg);text-shadow:7px 8px 0 #3512b4;max-width:100%;overflow-wrap:anywhere}.cue-headline::before,.cue-headline::after{content:attr(data-echo);position:absolute;inset:0;z-index:-1;color:#ff3456;transform:translate(-7px,3px);clip-path:inset(35% 0 43%);animation:tv-glitch var(--cue-duration) steps(1) both;animation-delay:calc(0ms - var(--cue-age))}.cue-headline::after{color:var(--gold);transform:translate(8px,-2px);clip-path:inset(63% 0 16%);animation-direction:reverse}.cue-subtitle{font-size:clamp(12px,1.8vw,30px);font-weight:750;line-height:1.4;max-width:900px;background:var(--gold);color:#0a0714;border:0;border-radius:0;padding:12px 21px;margin-top:30px;transform:rotate(1deg);box-shadow:7px 7px 0 #080713}.cue-stamp{position:absolute;bottom:-85px;right:4%;padding:12px 18px;border:4px solid #ff3456;color:#ff3456;font:400 clamp(21px,3vw,48px)/1 var(--display);transform:rotate(12deg);animation:tv-stamp var(--cue-duration) cubic-bezier(.16,1,.3,1) both;animation-delay:calc(0ms - var(--cue-age))}.cue-question-number{font-family:var(--display);font-weight:400;position:absolute;right:0;top:-35%;font-size:clamp(230px,33vw,600px);line-height:1;color:#ddff0010;-webkit-text-stroke:2px #ddff0055;z-index:-1;transform:rotate(9deg)}.effect-question .show-wipe{inset:0;border:0;background:#130622f5;animation-duration:var(--cue-duration)}.effect-question .show-cue{top:49%;align-items:center;text-align:center;padding:24px 20px;animation:tv-slam var(--cue-duration) cubic-bezier(.16,1,.3,1) both;animation-delay:calc(0ms - var(--cue-age))}.effect-question .cue-headline{font-size:clamp(70px,11vw,190px);max-width:100%}.cue-suspense{position:absolute;z-index:3;left:50%;top:48%;width:94vw;text-align:center;transform:translate(-50%,-50%);color:#f5f1ff;animation:tv-suspense var(--cue-duration) linear both;animation-delay:calc(0ms - var(--cue-age))}.cue-suspense>span{display:block;font-size:clamp(10px,1.4vw,20px);letter-spacing:.4em;font-weight:800;color:var(--gold);margin-bottom:25px}.cue-suspense>strong{font:400 clamp(69px,9vw,165px)/.88 var(--display);letter-spacing:-.02em;display:block;transform:skew(-5deg);text-shadow:none}.cue-suspense>i{font-size:clamp(10px,1.4vw,22px);font-style:normal;font-weight:750;letter-spacing:2px;display:block;margin-top:28px;color:#b493d1}.suspense-orbit{position:absolute;inset:-100px auto auto 50%;width:500px;height:500px;transform:translateX(-50%);border:10px dashed #9851ff33;border-radius:50%;z-index:-1;animation:tv-suspense-orbit var(--cue-duration) linear both;animation-delay:calc(0ms - var(--cue-age))}.suspense-orbit>b{display:none}.effect-result .show-wipe{animation:tv-verdict-backdrop var(--cue-duration) linear both;animation-delay:calc(0ms - var(--cue-age))}.effect-result .show-cue{top:29%;animation:tv-verdict var(--cue-duration) cubic-bezier(.16,1,.3,1) both;animation-delay:calc(0ms - var(--cue-age))}.effect-result .cue-headline{font-size:clamp(52px,7vw,118px);color:var(--gold)}.effect-result .cue-kicker{font-size:10px;margin-bottom:13px}.effect-result .cue-subtitle{max-width:850px;font-size:clamp(11px,1.4vw,21px);margin-top:19px;padding:9px 16px}.effect-result .cue-stamp{bottom:-67px;font-size:34px}.effect-result .cue-marquee{top:12%;animation:tv-verdict-marquee var(--cue-duration) linear both;animation-delay:calc(0ms - var(--cue-age))}.effect-result .show-wipe i{opacity:.14}.tone-fail .cue-headline{color:#ff4064;text-shadow:6px 7px 0 #4c0627}.tone-fail .cue-subtitle{background:#ff3456;color:white}.tone-fail .cue-stamp{color:var(--gold);border-color:var(--gold)}.tone-fail .show-wipe{background:#230716f5}.tone-win .cue-headline{color:var(--gold)}.effect-ranking .show-cue,.effect-ranking .show-wipe,.effect-victory .show-cue,.effect-victory .show-wipe{animation-duration:var(--cue-duration);animation-delay:calc(0ms - var(--cue-age))}.effect-ranking .cue-headline{font-size:clamp(65px,9vw,160px)}.effect-victory .show-cue{top:38%;animation-name:tv-victory}.effect-victory .show-wipe{background:radial-gradient(ellipse at 50% 30%,#8036bbaa,#0c0419ee 70%);animation-name:tv-backdrop}.effect-victory .cue-headline{font-size:clamp(65px,10vw,170px);color:var(--gold)}.effect-name .cue-headline{font-size:clamp(80px,15vw,235px);color:var(--gold)}.effect-name .cue-kicker{background:#ff3456;color:white;padding:7px 16px}.confetti-shower i{animation-name:tv-confetti;animation-duration:var(--fall);animation-timing-function:linear;animation-fill-mode:both;animation-delay:calc(var(--delay) - var(--cue-age));border-radius:0}.effect-joker .show-wipe,.effect-joker .cue-marquee,.effect-joker .cue-stamp{display:none}.effect-joker .show-cue{top:auto;bottom:22px;align-items:flex-start;text-align:left;width:min(490px,92vw);padding:20px 80px 20px 20px;background:var(--gold);border:3px solid #080713;border-radius:0;color:#080713;box-shadow:7px 7px 0 #7751ff;animation:tv-joker var(--cue-duration) cubic-bezier(.16,1,.3,1) both;animation-delay:calc(0ms - var(--cue-age))}.effect-joker .cue-kicker{font-size:7px;letter-spacing:1px;color:#34294f;margin-bottom:9px}.effect-joker .cue-headline{font:400 31px/1 var(--display);text-shadow:none;color:#080713;transform:rotate(-2deg)}.effect-joker .cue-headline::before,.effect-joker .cue-headline::after{display:none}.effect-joker .cue-subtitle{font-size:10px;background:none;box-shadow:none;padding:0;margin:10px 0 0;transform:none;color:#080713}.cue-joker-symbol{right:15px;top:20px;font:400 61px/1 var(--display);color:#080713;text-shadow:none;transform:rotate(9deg)}
/* Result visibility follows the server reveal cue: 3000 ms on every device. */
.reveal-pending .answer-result,.reveal-pending .result-fill,.reveal-pending .player-result,.reveal-pending .explanation,.reveal-pending .mini-leaders,.reveal-pending .estimate-results,.reveal-pending .player-score,.reveal-pending .score,.reveal-pending .delta,.reveal-pending .tower-points{visibility:hidden!important}.reveal-pending .answer-card.correct,.reveal-pending .answer-card.incorrect{opacity:1!important;background:linear-gradient(110deg,#2a194c,#160e29)!important;border-color:#9f7cce88!important;box-shadow:4px 5px 0 #05020c!important}.awaiting-verdict .effect-result .show-cue{visibility:hidden!important}.answer-reveal.correct{--revealed-border:var(--gold);--revealed-background:#424215;--revealed-opacity:1}.answer-reveal.incorrect{--revealed-border:#9570b544;--revealed-background:#21102b;--revealed-opacity:.4}.answer-card.answer-reveal{animation:answer-verdict 430ms cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--reveal-delay,3000ms) - var(--phase-age))}.answer-reveal .answer-result{animation-delay:calc(var(--reveal-delay,3000ms) + 100ms - var(--phase-age))}.answer-reveal.correct .answer-letter{animation:none}.answer-reveal .result-fill{animation-delay:calc(var(--reveal-delay,3000ms) + 150ms - var(--phase-age))}.show-question .question-text{animation:question-arrives 650ms cubic-bezier(.16,1,.3,1) both;animation-delay:calc(3250ms - var(--question-age))}[data-show-phase="reading"].show-question .answer-card{animation-delay:calc(3300ms - var(--question-age))}[data-show-phase="reveal"] .explanation,[data-show-phase="reveal"] .mini-leaders{animation-delay:calc(3500ms - var(--phase-age))}.view-play [data-show-phase="reveal"] .player-result{animation-delay:calc(3000ms - var(--phase-age))}.view-play [data-show-phase="reveal"] .points-gained{animation-delay:calc(3200ms - var(--phase-age))}[data-show-phase="reveal"] .estimate-target{animation-delay:calc(3000ms - var(--phase-age))}[data-show-phase="reveal"] .estimate-result-row{animation-delay:calc(var(--row-delay,3100ms) - var(--phase-age))}[data-show-phase="leaderboard"] .ranking-row,[data-show-phase="finished"] .ranking-row{animation-delay:calc(1100ms + var(--rank-delay,0ms) - var(--phase-age))}[data-show-phase="finished"] .podium-player{animation-delay:calc(1800ms - var(--phase-age))}[data-show-phase="finished"] .podium-player.second{animation-delay:calc(2300ms - var(--phase-age))}[data-show-phase="finished"] .podium-player.first{animation-delay:calc(3100ms - var(--phase-age))}[data-show-phase="finished"] .podium-crown,[data-show-phase="finished"] .winner-crown{animation-delay:calc(3800ms - var(--phase-age))}
@keyframes followspot{from{transform:rotate(-38deg);opacity:.3}to{transform:rotate(32deg);opacity:.65}}@keyframes studio-ring{from{transform:perspective(600px) rotateX(61deg) scale(.9)}to{transform:perspective(600px) rotateX(57deg) scale(1.06)}}@keyframes led-sweep{from{transform:translateX(-80%)}to{transform:translateX(80%)}}@keyframes studio-crawl{from{transform:translateX(0)}to{transform:translateX(-50%)}}@keyframes urgent-flare{from{box-shadow:0 0 0 1px #ff365e66,0 0 18px #ff365e10}to{box-shadow:0 0 0 5px #ff365e22,0 0 30px #ff365e33}}@keyframes live-lock-slam{0%{transform:scale(1.35) rotate(-7deg);filter:brightness(2)}70%{transform:scale(.94) rotate(1deg)}100%{transform:none;filter:none}}@keyframes tv-backdrop{0%{opacity:0;transform:scale(1.2)}8%,84%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.06)}}@keyframes tv-ring{0%{transform:translate(-50%,-50%) rotateX(55deg) rotate(0) scale(.3)}100%{transform:translate(-50%,-50%) rotateX(55deg) rotate(100deg) scale(1.8)}}@keyframes tv-slash{0%{transform:translateX(-130%) rotate(-12deg)}15%,78%{transform:translateX(0) rotate(-12deg)}100%{transform:translateX(130%) rotate(-12deg)}}@keyframes tv-marquee-in{0%,6%{opacity:0;transform:translateX(-100%) rotate(-4deg)}18%,84%{opacity:1;transform:translateX(0) rotate(-4deg)}100%{opacity:0;transform:translateX(100%) rotate(-4deg)}}@keyframes tv-crawl{from{transform:translateX(7%)}to{transform:translateX(-26%)}}@keyframes tv-slam{0%,4%{opacity:0;transform:translate(-50%,-50%) scale(3.5) rotate(15deg);filter:blur(12px)}18%{opacity:1;transform:translate(-50%,-50%) scale(.83) rotate(-4deg);filter:none}27%{transform:translate(-50%,-50%) scale(1.08) rotate(1deg)}37%,83%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(10%,-50%) scale(.8) rotate(10deg)}}@keyframes tv-glitch{0%,17%,28%,76%,100%{opacity:0}18%,23%,74%,78%{opacity:1}}@keyframes tv-stamp{0%,38%{opacity:0;transform:rotate(28deg) scale(4)}51%{opacity:1;transform:rotate(7deg) scale(.8)}59%,84%{opacity:1;transform:rotate(12deg) scale(1)}100%{opacity:0;transform:rotate(12deg) scale(1)}}@keyframes tv-suspense{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}10%,67%{opacity:1;transform:translate(-50%,-50%) scale(1)}74%,100%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}}@keyframes tv-suspense-orbit{0%{transform:translateX(-50%) rotate(0) scale(.8)}65%{transform:translateX(-50%) rotate(210deg) scale(1.1)}100%{transform:translateX(-50%) rotate(260deg) scale(1.6)}}@keyframes tv-verdict{0%,74%{opacity:0;transform:translate(-50%,-50%) scale(3.5) rotate(-15deg)}80%{opacity:1;transform:translate(-50%,-50%) scale(.85) rotate(4deg)}85%{transform:translate(-50%,-50%) scale(1.08) rotate(-2deg)}90%,95%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-80%) scale(.95)}}@keyframes tv-verdict-backdrop{0%{opacity:0}8%,67%{opacity:1}75%{opacity:.2}86%,100%{opacity:0}}@keyframes tv-verdict-marquee{0%,67%{opacity:0;transform:translateX(-100%) rotate(-4deg)}78%,94%{opacity:1;transform:translateX(0) rotate(-4deg)}100%{opacity:0;transform:translateX(100%) rotate(-4deg)}}@keyframes tv-joker{0%{opacity:0;transform:translate(-50%,140%) scale(.7) rotate(-15deg)}25%,79%{opacity:1;transform:translate(-50%,0) scale(1) rotate(-3deg)}100%{opacity:0;transform:translate(-50%,-30px) scale(1.2) rotate(4deg)}}@keyframes tv-confetti{0%{opacity:0;transform:translate3d(0,-30px,0) rotate(0)}8%,76%{opacity:1}100%{opacity:0;transform:translate3d(var(--drift),108vh,0) rotate(var(--spin))}}@keyframes tv-victory{0%,3%{opacity:0;transform:translate(-50%,-50%) scale(3) rotate(13deg)}13%{opacity:1;transform:translate(-50%,-50%) scale(.9) rotate(-4deg)}20%,66%{opacity:1;transform:translate(-50%,-50%) scale(1)}85%,100%{opacity:0;transform:translate(-50%,-85%) scale(.8)}}
@media(max-width:1100px){.broadcast-grid{grid-template-columns:minmax(0,1fr) 190px;gap:19px}.scoretower{padding:12px}.lobby-layout{min-height:550px;grid-template-columns:1.25fr .75fr;gap:30px}.lobby-title{font-size:83px}.lobby-description{position:static;transform:none;max-width:100%;padding:0;border:0;font-size:14px}.lobby-description br{display:none}.act-preview{gap:15px}.act-preview span{font-size:8px}.act-preview b{font-size:19px}.join-poster{padding:24px 18px}.join-poster h2{font-size:31px}.round-scoring{max-width:155px}.question-meta .answer-count{display:none}.question-text{font-size:31px}.answer-label{font-size:21px}.answer-card{padding:18px;min-height:105px}.answer-letter{font-size:24px;min-width:30px;width:30px}.host-panel .round-strip strong{font-size:18px}.host-panel .round-scoring{font-size:7px;max-width:105px}}
@media(max-width:800px){.broadcast-grid{grid-template-columns:1fr}.scoretower{display:none}.lobby-layout{min-height:480px;grid-template-columns:1fr .75fr;gap:24px}.lobby-title{font-size:65px}.lobby-copy>.eyebrow{font-size:8px;letter-spacing:1.5px}.lobby-description{font-size:12px}.act-preview{gap:10px}.act-preview span{font-size:6px;letter-spacing:.5px}.act-preview b{font-size:15px}.selected-topics{margin-top:15px}.selected-topics p{font-size:9px}.join-poster h2{font-size:27px}.join-poster>.section-label{font-size:7px}.join-poster .qr-frame{width:165px;height:165px}.join-poster .join-address{font-size:9px}.join-poster .room-code{font-size:30px}.studio-ticker{margin-inline:-20px}.question-text{font-size:30px}.round-strip strong{font-size:20px}.round-scoring{font-size:8px}.category-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.app-shell{padding:18px 17px 14px}.brand-name,.view-play .brand-name{font-size:26px}.brand-icon,.view-play .brand-icon{width:26px;height:33px;font-size:31px;border-radius:0}.brand-sub,.view-play .brand-sub{font-size:5.5px;letter-spacing:1.8px}.lobby-layout{grid-template-columns:1fr;gap:27px;min-height:0}.lobby-title{font-size:clamp(66px,17vw,95px);margin:22px 0}.lobby-description{font-size:13px;max-width:280px}.act-preview{gap:15px;margin-top:22px}.act-preview span{font-size:8px}.act-preview b{font-size:18px}.selected-topics{margin-top:20px}.selected-topics p{font-size:10px}.join-poster{padding:20px;transform:rotate(1deg);box-shadow:7px 7px 0 #4b2df2}.join-poster::before{font-size:16px;top:-14px;right:-5px;padding:6px 10px}.join-poster h2{font-size:26px}.join-poster .qr-frame{width:132px;height:132px;padding:7px}.join-poster .room-code{font-size:28px;letter-spacing:3px}.join-poster .room-code-label{font-size:8px;letter-spacing:0}.studio-ticker{margin:23px -17px 19px;padding:8px 0}.studio-ticker span{font-size:20px}.question-number b{font-size:29px}.category-pill{font-size:8px;letter-spacing:.3px;padding:7px 9px}.question-text{font-size:25px;letter-spacing:-.6px}.answer-card{padding:16px;min-height:120px}.answer-letter{font-size:22px;width:auto;min-width:0;border:0;line-height:1;height:auto}.answer-label{font-size:17px}.round-strip{gap:10px;padding-bottom:12px;margin-bottom:14px}.round-index{font-size:25px}.round-kicker{font-size:6px;letter-spacing:1px}.round-strip strong{font-size:18px}.round-scoring{font-size:7px;max-width:106px}.view-play .round-strip strong{font-size:17px}.view-play .round-scoring{font-size:7px;max-width:105px}.view-play .answer-card{min-height:126px}.view-play .question-text{font-size:23px}.view-play .timer strong{font-size:28px}.waiting-card h1{font-size:40px}.ranking-title,.view-play .ranking-title{font-size:42px}.podium-points{font-size:26px}.host-intro h1{font-size:31px}.host-lobby-heading{font-size:43px}.host-panel .question-text{font-size:25px}.host-panel .answer-label{font-size:15px}.host-panel .round-strip strong{font-size:17px}.category-panel{padding:20px 16px}.category-grid{grid-template-columns:1fr}.category-panel h2{font-size:21px}.catalog-total{font-size:7px;max-width:90px}.category-bottom{align-items:stretch;flex-direction:column}.category-bottom>label{justify-content:space-between}.category-bottom .button{min-height:50px}.category-choice{padding:15px 12px}.estimate-stage h2{font-size:45px}.host-panel .estimate-stage h2{font-size:43px}.show-cue,.effect-question .show-cue{top:43%;width:93vw}.cue-headline,.effect-question .cue-headline{font-size:clamp(58px,16vw,95px);text-shadow:4px 5px 0 #3512b4}.cue-kicker{font-size:8px;letter-spacing:1.8px;margin-bottom:21px}.cue-subtitle{font-size:13px;line-height:1.5;max-width:90vw;margin-top:24px;padding:12px 15px}.cue-stamp{font-size:24px;border-width:3px;bottom:-70px;padding:8px 11px;right:3%}.cue-question-number{font-size:260px;top:-130px;right:0}.cue-marquee{top:12%;padding:7px 0}.cue-marquee span{font-size:20px;letter-spacing:1.5px}.cue-suspense{top:43%}.cue-suspense>strong{font-size:clamp(59px,15vw,87px);line-height:.92}.cue-suspense>span{font-size:8px;letter-spacing:2px;line-height:1.7;max-width:85%;margin:0 auto 23px}.cue-suspense>i{font-size:9px;line-height:1.7;letter-spacing:1px;padding:0 20px}.suspense-orbit{width:330px;height:330px;top:-55px;border-width:6px}.effect-result .show-cue{top:30%}.effect-result .cue-headline{font-size:clamp(46px,13vw,77px)}.effect-result .cue-kicker{font-size:7px;letter-spacing:1px;max-width:90%}.effect-result .cue-subtitle{font-size:11px;line-height:1.5;margin-top:18px;padding:10px 13px}.effect-result .cue-stamp{font-size:23px;bottom:-56px}.effect-victory .show-cue{top:37%}.effect-victory .cue-headline{font-size:clamp(58px,16vw,94px)}.effect-name .cue-headline{font-size:clamp(70px,20vw,132px)}.effect-ranking .cue-headline{font-size:clamp(58px,16vw,95px)}.effect-joker .show-cue{top:auto;bottom:25px;padding:19px 75px 19px 18px}.effect-joker .cue-headline{font-size:28px}.effect-joker .cue-subtitle{font-size:10px;padding:0;margin-top:9px}.effect-joker .cue-kicker{font-size:6px;margin-bottom:8px}.cue-joker-symbol{font-size:56px;top:21px;right:14px}}
@media(min-width:900px) and (max-height:850px){.view-board .lobby-layout{min-height:470px;grid-template-columns:1.5fr .65fr;gap:40px}.view-board .lobby-title{font:400 clamp(68px,6.4vw,92px)/.82 var(--display);margin:19px 0;letter-spacing:-.5px}.view-board .lobby-description{position:absolute;right:2%;top:21%;max-width:215px;transform:rotate(5deg);border-left:3px solid var(--red);padding-left:13px;font-size:13px;line-height:1.5}.view-board .act-preview{margin-top:21px;gap:18px}.view-board .act-preview span{font-size:8px}.view-board .act-preview b{font-size:18px}.view-board .selected-topics{margin-top:15px}.view-board .selected-topics p{font-size:9px;line-height:1.5;-webkit-line-clamp:2}.view-board .join-poster{padding:22px 17px}.view-board .join-poster h2{font:400 29px/1 var(--display);margin:12px 0}.view-board .join-poster>.section-label{display:block;font-size:7px}.view-board .join-poster .qr-frame{width:170px;height:170px;padding:7px;margin:16px auto 12px}.view-board .join-poster .room-code{font-size:31px}.view-board .studio-ticker{margin:4px -30px 18px;padding:7px 0}.view-board .studio-ticker span{font-size:20px}.view-board .lobby-roster{padding:0;margin-top:17px}.view-board .broadcast-grid{grid-template-columns:minmax(0,1fr) 195px;gap:22px}.view-board .round-strip{padding-bottom:12px;margin-bottom:13px}.view-board .round-strip strong{font-size:20px}.view-board .round-kicker{font-size:6px}.view-board .round-scoring{font-size:8px}.view-board .question-number b{font-size:29px}.view-board .question-text{font-size:clamp(27px,2.8vw,38px)}.view-board .question-heading{margin:18px 0 23px;gap:20px}.view-board .answer-card{min-height:91px;padding:16px 18px}.view-board .answer-label{font-size:clamp(19px,1.85vw,26px)}.view-board .answer-letter{font-size:24px;width:30px;min-width:30px}.view-board .live-locks{padding-top:11px;margin-top:16px}.view-board .live-lock{font-size:8px;padding:5px 7px}.view-board .lock-players{margin-top:9px;gap:5px}.view-board .scoretower{padding:12px}.view-board .ladder-rung{min-height:20px;padding:3px 6px}.view-board .ladder-rung>b{font-size:13px}.view-board .ladder-rung>span{font-size:6px}.view-board .ladder-steps{gap:2px}.view-board .tower-leaders{margin-top:17px}.view-board .tower-player{font-size:9px;padding:8px 0}.view-board .tower-points{font-size:10px}.view-board .moderator p{font-size:14px}.view-board .ranking-title{font:400 53px/1 var(--display)}.view-board .podium-player{min-height:178px;padding:25px 16px 17px}.view-board .podium-player.first{min-height:216px}.view-board .podium-player.third{min-height:162px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.ambient{opacity:.4}.show-effects .show-cue{opacity:1;transform:translate(-50%,-50%)}.show-effects .show-wipe{opacity:.96;transform:none}.show-effects .cue-headline,.show-effects .cue-subtitle{transform:none}.show-effects .cue-stamp,.show-effects .cue-headline::before,.show-effects .cue-headline::after,.show-effects .confetti-shower,.show-effects .cue-marquee{display:none}.show-effects .cue-suspense{display:none;transform:translate(-50%,-50%)}.awaiting-verdict .effect-result .cue-suspense{display:block!important;opacity:1}.effect-joker .show-cue{transform:translate(-50%,0)}.show-question .question-text{opacity:1}.answer-reveal{filter:none;transform:none}}
#show-effects .cue-headline{font-family:var(--display);font-weight:400;font-size:clamp(64px,10vw,186px);line-height:.88}#show-effects.effect-question .show-wipe{inset:0}#show-effects.effect-question .show-cue{top:49%;align-items:center;text-align:center;padding:24px 20px}#show-effects.effect-question .cue-headline{font-size:clamp(70px,11vw,190px);max-width:100%}#show-effects.effect-result .cue-headline{font-size:clamp(52px,7vw,118px)}#show-effects.effect-name .cue-headline{font-size:clamp(80px,15vw,235px)}#show-effects.effect-victory .cue-headline{font-size:clamp(65px,10vw,170px)}#show-effects.effect-joker .cue-headline{font-size:31px;line-height:1}
.reveal-pending .moderator,.reveal-pending .player-identity .section-label,.reveal-pending .tower-leaders,.reveal-pending .host-roster{visibility:hidden!important}.player-result.lost .points-gained{color:#ff7593}
.avatar.has-selfie{overflow:hidden;padding:0;background:#24103a}.avatar.has-selfie img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.live-lock .avatar{width:20px;height:20px;font-size:7px}.live-lock{min-height:33px}.selfie-panel{margin:22px 0;padding:22px;border-color:#9870d877;background:linear-gradient(130deg,#2d1647,#190d29)}.selfie-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:17px}.selfie-panel-heading .section-label{font-size:7px;letter-spacing:1.5px}.selfie-panel-heading h2{font-size:19px;line-height:1.2;letter-spacing:-.5px;margin:10px 0 0}.selfie-panel-heading .avatar.large{width:65px;height:65px;flex-shrink:0;border:2px solid var(--gold);box-shadow:4px 4px 0 #7850c777;transform:rotate(4deg)}.selfie-camera{font:400 47px/1 var(--display);color:var(--gold);width:54px;text-align:center;flex-shrink:0}.selfie-privacy{font-size:10px;line-height:1.8;color:#b6a6c8;margin:18px 0}.selfie-actions{display:flex;flex-wrap:wrap;gap:10px}.selfie-actions .button{font-size:11px;min-height:47px;flex:1}.selfie-picker{position:relative;overflow:hidden;cursor:pointer;text-align:center}.selfie-picker input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}.selfie-picker:focus-within{outline:3px solid var(--gold-light);outline-offset:4px}.selfie-picker.is-disabled{opacity:.35;cursor:default;box-shadow:none}.selfie-format{font-size:8px;line-height:1.8;color:var(--muted);margin:14px 0 0}.selfie-panel .form-error{margin:13px 0 0;font-size:10px}.selfie-success{margin:14px 0 0;font-size:10px;line-height:1.7;color:var(--gold)}.cue-selfie{position:absolute;left:0;top:50%;transform:translateY(-50%) rotate(-8deg);width:290px;height:330px;background:var(--gold);padding:9px;box-shadow:12px 12px 0 #b63eff77}.cue-selfie .avatar.large{display:block;width:100%;height:100%;border:0;transform:none}.cue-selfie img{object-fit:cover}.effect-name.with-selfie .show-cue{padding-left:345px;min-height:330px}#show-effects.effect-name.with-selfie .cue-headline{font-size:clamp(70px,11vw,175px)}
@media(max-width:800px){.cue-selfie{width:200px;height:230px}.effect-name.with-selfie .show-cue{padding-left:245px;min-height:240px}#show-effects.effect-name.with-selfie .cue-headline{font-size:clamp(60px,10vw,110px)}}
@media(max-width:560px){.selfie-panel{padding:20px}.selfie-panel-heading h2{font-size:18px}.selfie-actions{flex-direction:column}.selfie-actions .button{min-height:50px}.selfie-privacy{font-size:9px}.selfie-format{font-size:8px}.cue-selfie{left:50%;top:0;transform:translateX(-50%) rotate(-6deg);width:153px;height:173px;padding:6px;box-shadow:8px 8px 0 #b63eff77}#show-effects.effect-name.with-selfie .show-cue{padding:193px 15px 24px;min-height:0;top:43%}#show-effects.effect-name.with-selfie .cue-headline{font-size:clamp(63px,17vw,108px)}.effect-name.with-selfie .cue-kicker{font-size:7px}.effect-name.with-selfie .cue-subtitle{font-size:11px;margin-top:18px}.effect-name.with-selfie .cue-stamp{font-size:19px;bottom:-51px}}
@media(prefers-reduced-motion:reduce){.cue-selfie{transform:translateY(-50%)}.selfie-panel-heading .avatar.large{transform:none}}
@media(prefers-reduced-motion:reduce) and (max-width:560px){.cue-selfie{transform:translateX(-50%)}}
@media(max-width:560px){#show-effects.effect-name.with-selfie .cue-headline{font-size:clamp(50px,13vw,79px)}}
@media(max-width:560px){#show-effects .show-cue{top:43%;width:93vw}#show-effects .cue-headline,#show-effects.effect-question .cue-headline{font-size:clamp(58px,16vw,95px)}#show-effects.effect-question .show-cue{top:43%;padding:24px 20px}#show-effects .cue-kicker{font-size:8px;letter-spacing:1.8px;margin-bottom:21px}#show-effects .cue-subtitle{font-size:13px;padding:12px 15px;margin-top:24px}#show-effects.effect-result .show-cue{top:30%}#show-effects.effect-result .cue-headline{font-size:clamp(46px,13vw,77px)}#show-effects.effect-result .cue-kicker{font-size:7px;letter-spacing:1px}#show-effects.effect-result .cue-subtitle{font-size:11px;padding:10px 13px;margin-top:18px}#show-effects.effect-victory .show-cue{top:37%}#show-effects.effect-victory .cue-headline{font-size:clamp(58px,16vw,94px)}#show-effects.effect-name .cue-headline{font-size:clamp(70px,20vw,132px)}#show-effects.effect-joker .show-cue{top:auto;bottom:25px;padding:19px 75px 19px 18px}#show-effects.effect-joker .cue-headline{font-size:28px}#show-effects.effect-joker .cue-kicker{font-size:6px;margin-bottom:8px}#show-effects.effect-joker .cue-subtitle{font-size:10px;padding:0;margin-top:9px}}
/* Keep the broadcast stage inside a television viewport. */
@media (min-width: 900px) {
 .view-board .app-shell { padding-top: 24px; padding-bottom: 12px; }
 .view-board .app-header { padding-bottom: 18px; }
 .view-board .app-main { padding-top: 25px; }
 .view-board .lobby-layout { min-height: 0; }
 .view-board .lobby-copy { padding-top: 6px; padding-bottom: 8px; }
 .view-board .lobby-title { font-size: clamp(68px, 10vh, 110px); margin: 20px 0; }
 .view-board .join-poster .qr-frame { width: clamp(160px, 23vh, 250px); height: clamp(160px, 23vh, 250px); }
 .view-board .act-preview { margin-top: 22px; }
 .view-board .selected-topics { margin-top: 16px; }
 .view-board .studio-ticker { margin-top: 5px; margin-bottom: 15px; }
 .view-board .lobby-roster { margin-top: 16px; }
 .view-board .player-chips { max-height: 85px; overflow-y: auto; }
 .view-board .moderator { padding: 13px 20px; margin-top: 17px; }
 .view-board .moderator p { font-size: 18px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
 .view-board .app-footer { margin-top: 12px; }
 .view-board .lock-players { max-height: 105px; overflow-y: auto; }
}
@media (min-width: 900px) and (max-height: 850px) {
 .view-board .app-shell { padding-top: 16px; }
 .view-board .app-header { padding-bottom: 12px; }
 .view-board .app-main { padding-top: 16px; }
 .view-board .lobby-title { font-size: clamp(58px, 9.2vh, 78px); margin: 15px 0; }
 .view-board .join-poster .qr-frame { width: 150px; height: 150px; margin: 11px auto; }
 .view-board .join-poster { padding-top: 16px; padding-bottom: 16px; }
 .view-board .act-preview { margin-top: 15px; }
 .view-board .selected-topics { margin-top: 12px; }
 .view-board .studio-ticker { margin-bottom: 10px; }
 .view-board .moderator { padding: 10px 15px; margin-top: 12px; }
 .view-board .moderator p { font-size: 14px; }
 .view-board .player-chips { max-height: 54px; }
}
@media (min-width: 900px) and (max-height: 850px) {
 .view-board .question-heading { margin: 12px 0 16px; }
 .view-board .timer { width: 72px; height: 72px; min-width: 72px; }
 .view-board .timer strong { font-size: 29px; }
 .view-board .answer-card { min-height: 77px; padding-top: 13px; padding-bottom: 13px; }
 .view-board .answers-grid { gap: 10px 14px; }
 .view-board .live-locks { padding-top: 9px; margin-top: 11px; }
 .view-board .live-locks .tower-heading { margin-bottom: 8px; }
 .view-board .lock-players { margin-top: 6px; max-height: 49px; }
 .view-board .moderator p { font-size: 13px; line-height: 1.35; }
 .view-board .app-footer { margin-top: 8px; }
 .view-board .scoretower { height: calc(100dvh - 180px); display: flex; flex-direction: column; }
 .view-board .quiz-ladder { flex: 1; min-height: 0; display: flex; flex-direction: column; }
 .view-board .ladder-steps { flex: 1; min-height: 0; display: grid; grid-template-rows: repeat(var(--rungs), minmax(0, 1fr)); gap: 2px; }
 .view-board .ladder-rung { min-height: 0; padding: 1px 5px; line-height: 1; }
 .view-board .ladder-rung > b { font-size: 10px; line-height: 1; }
 .view-board .ladder-rung > span { line-height: 1; }
 .view-board .tower-leaders { flex: none; margin-top: 12px; }
}
@media (min-width: 900px) {
 .view-board [data-long-question="yes"] .question-text { font-size: clamp(27px, 2.2vw, 39px); line-height: 1.16; }
 .view-board [data-show-phase="reveal"] .live-locks { display: none; }
}
@media (min-width: 900px) and (max-height: 850px) {
 .view-board [data-long-question="yes"] .question-text { font-size: 24px; line-height: 1.13; }
 .view-board [data-long-answers="yes"] .answer-label { font-size: 18px; line-height: 1.2; }
 .view-board [data-long-answers="yes"] .answer-card { padding-top: 10px; padding-bottom: 10px; }
}

/* Studio briefing, player powerups and the live points race. */
.briefing-stage { width: 100%; max-width: 1440px; margin: 0 auto; }
.briefing-topline { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.briefing-count { color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: 2.8px; text-transform: uppercase; }
.briefing-kicker { display: block; color: #b8a4e5; font-size: 11px; font-weight: 750; letter-spacing: 2px; text-transform: uppercase; }
.briefing-card { position: relative; isolation: isolate; overflow: hidden; padding: clamp(28px, 3.5vw, 62px); border: 1px solid #a58aff66; border-left: 7px solid var(--gold); background: linear-gradient(120deg, #352050f2, #150b28f5 68%); box-shadow: 10px 10px 0 #5630a92e; animation: briefing-card-in 450ms cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(0ms - var(--briefing-age, 0ms)); }
.briefing-card::before { content: ""; position: absolute; z-index: -1; width: 440px; height: 440px; right: -200px; top: -180px; border: 1px solid #c0a2ff3b; border-radius: 50%; box-shadow: 0 0 0 35px #9e73ff0a, 0 0 0 36px #9e73ff20, 0 0 0 95px #9e73ff08; }
.briefing-symbol { display: grid; place-items: center; width: 100px; height: 100px; margin-bottom: 23px; color: #10071c; background: var(--gold); border: 2px solid #efffa9; box-shadow: 9px 9px 0 #8a42f24d; font: 400 58px/1 var(--display); transform: rotate(-6deg); }
.briefing-title { max-width: 1100px; margin: 23px 0 20px; font: 400 clamp(48px, 6.5vw, 100px)/.96 var(--display); letter-spacing: -.5px; text-wrap: balance; }
.briefing-text { max-width: 1060px; margin: 0; color: #e2d8f4; font-size: clamp(19px, 1.9vw, 29px); line-height: 1.5; text-wrap: pretty; }
.briefing-details { display: grid; gap: 12px; margin: 27px 0 0; padding: 0; list-style: none; }
.briefing-details li { position: relative; padding-left: 25px; color: #d1c0e9; font-size: clamp(15px, 1.4vw, 21px); line-height: 1.5; overflow-wrap: anywhere; }
.briefing-details li::before { content: "›"; position: absolute; left: 0; top: -.06em; color: var(--gold); font-size: 1.4em; font-weight: 900; }
.briefing-details li strong, .briefing-text strong { color: #f5f2ff; }
.briefing-markers { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.briefing-markers > span { display: flex; align-items: center; gap: 7px; min-width: 0; color: #827099; }
.briefing-markers b { display: grid; place-items: center; width: 27px; height: 27px; flex: 0 0 auto; border: 1px solid #a98bd04d; background: #1c102b; font-size: 10px; }
.briefing-markers i { font-size: 9px; line-height: 1.3; font-style: normal; font-weight: 650; }
.briefing-markers > .current { color: #f5f2ff; }
.briefing-markers > .current b { color: #0c0712; border-color: var(--gold); background: var(--gold); box-shadow: 3px 3px 0 #ddff0026; }
.briefing-markers > .complete { color: #c4b5da; }
.briefing-markers > .complete b { color: var(--gold); border-color: #ddff0066; background: #ddff000e; }
.briefing-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px; margin-top: 23px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.briefing-footer > p { margin: 0; }
.briefing-footer .button { flex: 0 0 auto; min-width: 175px; }
.rules-link { min-height: 36px; padding: 8px 0; border: 0; background: none; color: var(--muted); font-size: 10px; text-decoration: underline; text-decoration-color: #a98bd066; text-underline-offset: 3px; }
.rules-link:hover { color: var(--gold-light); }
dialog.rules-dialog { width: min(860px, calc(100vw - 32px)); max-height: min(900px, 87dvh); padding: 30px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #916ac6 #170d28; border: 1px solid #b18bff80; border-top: 4px solid var(--gold); border-radius: 4px; color: var(--ink); background: #170d28; box-shadow: 10px 10px 0 #5630a94d, 0 22px 90px #0009; }
dialog.rules-dialog::backdrop { background: #070312df; backdrop-filter: blur(7px); }
.rules-dialog .credits-heading { align-items: flex-start; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.rules-dialog .credits-heading h2 { font-size: 41px; }
.rules-dialog .credits-heading .button { min-height: 42px; flex: 0 0 auto; }
.rules-step { position: relative; display: grid; grid-template-columns: 30px 39px minmax(0, 1fr); align-items: center; gap: 10px 13px; padding: 23px 0; border-bottom: 1px solid #a98bd02b; }
.rules-step:last-child { border-bottom: 0; padding-bottom: 4px; }
.rules-step-number { display: grid; place-items: center; width: 27px; height: 27px; color: #d0bde7; border: 1px solid #a98bd055; font-size: 11px; font-weight: 800; }
.rules-step-symbol { display: grid; place-items: center; min-width: 35px; color: var(--gold); font-size: 27px; line-height: 1; }
.rules-step-title { min-width: 0; margin: 0; color: #f5f2ff; font: 400 27px/1.1 var(--display); letter-spacing: .1px; }
.rules-step-details { grid-column: 3; margin: 0; color: #bcaace; font-size: 13px; line-height: 1.7; }
.rules-step-details ul { margin: 0; padding-left: 17px; }
.rules-step-details li + li { margin-top: 6px; }
.rules-step-details p { margin: 0; }
.rules-step-details p + p { margin-top: 8px; }

/* The inventory is readable while the answer buttons keep their own space. */
.powerup-panel { position: relative; padding: 23px; margin: 20px 0; border: 1px solid #ad7dff66; border-left: 4px solid #b289ff; background: linear-gradient(130deg, #321c4a, #1a0e2b 78%); }
.powerup-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 17px; }
.powerup-heading > strong, .powerup-heading > h2 { margin: 0; font: 400 24px/1 var(--display); letter-spacing: .4px; }
.powerup-badge { display: inline-flex; justify-content: center; align-items: center; padding: 5px 8px; border: 1px solid #ddff0066; background: #ddff0012; color: var(--gold); font-size: 8px; font-weight: 800; line-height: 1.25; letter-spacing: 1px; text-transform: uppercase; }
.powerup-item { display: grid; grid-template-columns: 53px minmax(0, 1fr) auto; align-items: center; gap: 15px; padding: 15px 0; border-top: 1px solid #b383ed33; }
.powerup-item:last-of-type { padding-bottom: 0; }
.powerup-symbol { display: grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px; background: #ad7dff17; border: 1px solid #ad7dff66; color: var(--gold); font-size: 28px; line-height: 1; transform: rotate(-5deg); }
.powerup-copy { min-width: 0; }
.powerup-copy h3 { margin: 0 0 6px; font-size: 15px; line-height: 1.2; letter-spacing: -.2px; }
.powerup-copy p { margin: 0; color: #bca8d4; font-size: 10px; line-height: 1.6; overflow-wrap: anywhere; }
.powerup-use { display: flex; align-items: center; gap: 8px; }
.powerup-use button[data-powerup], button.powerup-use[data-powerup] { min-height: 46px; padding: 11px 15px; border: 1px solid #ddff0099; border-radius: 3px; color: #10091c; background: var(--gold); font-size: 11px; line-height: 1.2; font-weight: 850; text-transform: uppercase; letter-spacing: .4px; box-shadow: 3px 3px 0 #ddff0022; }
.powerup-use button[data-powerup]:hover:not(:disabled), button.powerup-use[data-powerup]:hover:not(:disabled) { background: #eeff89; transform: translateY(-1px); }
.powerup-use button[data-powerup]:disabled, button.powerup-use[data-powerup]:disabled { opacity: .35; background: #a18cb5; border-color: #a18cb566; box-shadow: none; }
.powerup-note { margin: 15px 0 0; color: #a996c2; font-size: 9px; line-height: 1.65; }
.powerup-shield { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 10px 12px; border: 1px solid #80f0ce66; border-left: 3px solid #80f0ce; color: #b5ffe6; background: #80f0ce0a; font-size: 11px; font-weight: 650; line-height: 1.5; }
.powerup-inventory { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 10px 0; }
.inventory-item { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 30px; min-height: 29px; padding: 5px 8px; border: 1px solid #a980e366; background: #ae7aff14; color: #e4d4ff; font-size: 9px; line-height: 1.2; font-weight: 700; }
.inventory-item > .powerup-symbol, .inventory-item > symbol { width: auto; min-width: 0; height: auto; padding: 0; background: none; border: 0; color: var(--gold); font-size: 17px; transform: none; }
.inventory-item.is-empty { border-color: #a980e329; color: #84718f; background: none; }
.live-lock.has-item { border-color: #b883ff80; background: #ae7aff0d; }
.live-lock.shielded { border-color: #80f0ce80; box-shadow: inset 0 -2px #80f0ce66; }
.item-dot, .shield-dot { display: inline-grid; place-items: center; width: 17px; height: 17px; flex: 0 0 auto; margin-left: 2px; border: 1px solid #b883ff66; color: var(--gold); background: #351c51; font-size: 10px; line-height: 1; }
.shield-dot { color: #b5ffe6; background: #103c34; border-color: #80f0ce66; }

/* Real players advance along the track as their points change. */
.final-race { --race-kart-size: 34px; padding: 24px; margin: 21px 0; border: 1px solid #a98bd066; border-top: 4px solid var(--gold); background: linear-gradient(125deg, #221335ed, #100a1ded); }
.race-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 15px; margin-bottom: 22px; }
.race-heading strong { font: 400 clamp(27px, 3.1vw, 46px)/1 var(--display); letter-spacing: .3px; }
.race-heading span { color: #bca8d4; font-size: 10px; line-height: 1.5; text-align: right; }
.race-lanes { display: grid; gap: 11px; max-height: 435px; padding-right: 4px; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #916ac6 transparent; }
.race-lane { --race-position: 0%; --avatar: #b68cff; position: relative; display: grid; grid-template-columns: 25px 38px minmax(65px, 120px) minmax(80px, 1fr) 70px; align-items: center; gap: 10px; min-height: 44px; padding: 7px 10px; background: #b78cf307; border-left: 2px solid color-mix(in srgb, var(--avatar) 65%, transparent); }
.race-rank { color: #9c88b4; font: 400 23px/1 var(--display); text-align: center; }
.race-player-avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; min-width: 0; overflow: hidden; }
.race-player-avatar > .avatar { width: 32px; height: 32px; font-size: 10px; }
.race-player-avatar.avatar { width: 34px; height: 34px; font-size: 10px; }
.race-name { min-width: 0; color: #e2d5f2; font-size: 11px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.race-score { min-width: 0; color: var(--gold); font-size: 13px; font-weight: 850; letter-spacing: -.3px; text-align: right; white-space: nowrap; }
.race-road { position: relative; height: 27px; min-width: 0; margin: 0 3px 0 1px; border-bottom: 2px solid #b393d936; background: repeating-linear-gradient(90deg, #a98bd012 0 18px, transparent 18px 32px) center 80% / 100% 2px no-repeat; }
.race-progress { position: absolute; left: 0; bottom: -2px; width: clamp(0%, var(--race-position), 100%); height: 2px; background: color-mix(in srgb, var(--avatar) 75%, #fff); box-shadow: 0 0 12px color-mix(in srgb, var(--avatar) 45%, transparent); transition: width 1100ms cubic-bezier(.2, .7, .2, 1); }
.race-kart { position: absolute; left: clamp(0%, var(--race-position), calc(100% - var(--race-kart-size))); bottom: 1px; display: grid; place-items: center; width: var(--race-kart-size); height: 23px; color: #130b20; background: var(--avatar); border: 1px solid color-mix(in srgb, var(--avatar) 60%, #fff); border-radius: 10px 7px 3px 3px; box-shadow: -7px 3px 0 -4px #eaff7a99; font-size: 14px; line-height: 1; font-weight: 900; transform: skew(-8deg); transition: left 1100ms cubic-bezier(.2, .7, .2, 1); }
.race-kart::before, .race-kart::after { content: ""; position: absolute; bottom: -4px; width: 7px; height: 7px; background: #11091c; border: 1px solid #c8b5dd; border-radius: 50%; }
.race-kart::before { left: 5px; }
.race-kart::after { right: 4px; }
.race-finish { position: absolute; right: 0; bottom: 0; width: 5px; height: 24px; background: repeating-linear-gradient(#e0d5ed 0 4px, #2d1b40 4px 8px); opacity: .7; }
.race-lane:first-child { background: linear-gradient(90deg, #ddff0010, #b78cf307); border-left-color: var(--gold); }
.race-lane:first-child .race-rank { color: var(--gold); }
.race-note { margin: 17px 0 0; padding-top: 12px; border-top: 1px solid #a98bd02b; color: #a895bf; font-size: 10px; line-height: 1.6; }
.race-compact { --race-kart-size: 25px; padding: 13px 11px; margin: 0; }
.race-compact .race-heading { display: block; margin-bottom: 15px; }
.race-compact .race-heading strong { display: block; font-size: 23px; }
.race-compact .race-heading span { display: block; margin-top: 7px; font-size: 8px; text-align: left; }
.race-compact .race-lanes { gap: 10px; max-height: 400px; padding-right: 2px; }
.race-compact .race-lane { grid-template-columns: 17px 23px minmax(0, 1fr) auto; gap: 5px; min-height: 59px; padding: 5px 5px 9px; }
.race-compact .race-rank { font-size: 17px; }
.race-compact .race-player-avatar, .race-compact .race-player-avatar.avatar, .race-compact .race-player-avatar > .avatar { width: 22px; height: 22px; font-size: 7px; }
.race-compact .race-name { font-size: 9px; }
.race-compact .race-score { font-size: 10px; }
.race-compact .race-road { grid-column: 2 / -1; height: 18px; margin-right: 1px; }
.race-compact .race-kart { height: 16px; font-size: 10px; border-radius: 6px 5px 2px 2px; }
.race-compact .race-kart::before, .race-compact .race-kart::after { bottom: -3px; width: 5px; height: 5px; }
.race-compact .race-kart::before { left: 3px; }
.race-compact .race-kart::after { right: 3px; }
.race-compact .race-finish { height: 17px; width: 4px; }
.race-compact .race-note { margin-top: 12px; padding-top: 10px; font-size: 8px; }

/* Powerup events stay in the upper edge; the question remains unobstructed. */
.powerup-effects { position: fixed; z-index: 110; inset: 0 0 auto; height: 15vh; height: 15dvh; max-height: 150px; overflow: hidden; pointer-events: none; isolation: isolate; }
.powerup-burst { --powerup-color: #ddff00; position: absolute; top: 8px; left: 50%; display: flex; align-items: center; gap: 17px; width: min(850px, calc(100vw - 36px)); height: min(110px, calc(15dvh - 16px)); padding: 10px 25px 10px 92px; border: 1px solid color-mix(in srgb, var(--powerup-color) 65%, transparent); border-left: 7px solid var(--powerup-color); background: linear-gradient(110deg, #251039fa, #130a23f5 75%); box-shadow: 7px 7px 0 #24104766; transform: translateX(-50%); animation: powerup-burst-in 1600ms cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(0ms - var(--powerup-age, 0ms)); }
.powerup-burst.kind-rocket { --powerup-color: #ff7593; }
.powerup-burst.kind-shield { --powerup-color: #80f0ce; }
.powerup-burst.kind-turbo { --powerup-color: #ddff00; }
.powerup-burst.kind-comeback { --powerup-color: #c496ff; }
.powerup-flyer { position: absolute; left: 20px; top: 50%; display: grid; place-items: center; width: 52px; height: 52px; background: var(--powerup-color); color: #150a22; font-size: 32px; line-height: 1; box-shadow: 5px 5px 0 color-mix(in srgb, var(--powerup-color) 20%, transparent); transform: translateY(-50%) rotate(-10deg); animation: powerup-flyer-in 1600ms cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(0ms - var(--powerup-age, 0ms)); }
.powerup-event-copy { min-width: 0; }
.powerup-event-copy strong { display: block; color: var(--powerup-color); font: 400 clamp(25px, 3vw, 45px)/1 var(--display); letter-spacing: .3px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.powerup-event-copy span { display: block; margin-top: 6px; color: #eadff8; font-size: clamp(10px, 1.05vw, 15px); line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
@keyframes briefing-card-in { from { opacity: 0; transform: translateY(20px) skewX(-2deg); } to { opacity: 1; transform: none; } }
@keyframes powerup-burst-in { 0% { opacity: 0; transform: translateX(-75%) skewX(-10deg); } 16%, 78% { opacity: 1; transform: translateX(-50%) skewX(0); } 100% { opacity: 0; transform: translateX(-25%) skewX(7deg); } }
@keyframes powerup-flyer-in { 0% { transform: translate(-110px, -50%) rotate(-45deg) scale(.5); } 23% { transform: translateY(-50%) rotate(8deg) scale(1.13); } 34%, 78% { transform: translateY(-50%) rotate(-10deg) scale(1); } 100% { transform: translate(80px, -50%) rotate(25deg) scale(.8); } }

.host-panel .briefing-card { padding: 28px; border-left-width: 4px; box-shadow: 6px 6px 0 #5630a92e; }
.host-panel .briefing-symbol { width: 65px; height: 65px; margin-bottom: 21px; font-size: 37px; }
.host-panel .briefing-title { margin: 18px 0 16px; font-size: clamp(38px, 4vw, 61px); }
.host-panel .briefing-text { font-size: 17px; }
.host-panel .briefing-details { margin-top: 19px; gap: 9px; }
.host-panel .briefing-details li { font-size: 13px; padding-left: 19px; }
.host-panel .briefing-count { font-size: 8px; letter-spacing: 1.5px; }
.host-panel .briefing-kicker { font-size: 8px; letter-spacing: 1.5px; }
.host-panel .briefing-markers { gap: 6px; }
.host-panel .briefing-markers b { width: 23px; height: 23px; font-size: 8px; }
.host-panel .briefing-markers i { display: none; }
.host-panel .briefing-footer { font-size: 10px; margin-top: 20px; }
.host-panel .final-race { padding: 18px; }
.host-panel .race-heading strong { font-size: 29px; }
.host-panel .race-lane { grid-template-columns: 21px 30px minmax(60px, 92px) minmax(70px, 1fr) 65px; gap: 7px; }
.host-panel .race-player-avatar, .host-panel .race-player-avatar > .avatar, .host-panel .race-player-avatar.avatar { width: 28px; height: 28px; font-size: 9px; }
.host-panel .powerup-panel { padding: 18px; }
.host-panel .powerup-item { gap: 10px; grid-template-columns: 43px minmax(0, 1fr) auto; }
.host-panel .powerup-symbol { width: 39px; height: 39px; font-size: 23px; }
.host-panel .powerup-copy h3 { font-size: 13px; }
.view-play .briefing-topline { flex-direction: column; align-items: flex-start; gap: 15px; margin-bottom: 17px; }
.view-play .briefing-count { font-size: 8px; letter-spacing: 2px; }
.view-play .briefing-card { padding: 25px; border-left-width: 4px; box-shadow: 6px 6px 0 #5630a92e; }
.view-play .briefing-symbol { width: 65px; height: 65px; margin-bottom: 21px; font-size: 36px; }
.view-play .briefing-kicker { font-size: 8px; letter-spacing: 1.7px; }
.view-play .briefing-title { font-size: clamp(40px, 11vw, 63px); margin: 19px 0 17px; }
.view-play .briefing-text { font-size: 16px; line-height: 1.6; }
.view-play .briefing-details { margin-top: 22px; gap: 11px; }
.view-play .briefing-details li { font-size: 12px; padding-left: 19px; line-height: 1.6; }
.view-play .briefing-markers { width: 100%; gap: 7px; }
.view-play .briefing-markers > span { flex: 1; gap: 5px; }
.view-play .briefing-markers b { width: 25px; height: 25px; font-size: 9px; }
.view-play .briefing-markers i { font-size: 7px; }
.view-play .briefing-footer { margin-top: 22px; font-size: 11px; }
.view-play .briefing-footer .button { width: 100%; min-height: 50px; }
.view-play .final-race { padding: 18px 14px; }
.view-play .race-heading strong { font-size: 29px; }
.view-play .race-heading span { font-size: 8px; max-width: 100px; }
.view-play .race-lane { grid-template-columns: 19px 27px minmax(50px, 78px) minmax(50px, 1fr) 59px; gap: 6px; padding-inline: 5px; }
.view-play .race-rank { font-size: 19px; }
.view-play .race-player-avatar, .view-play .race-player-avatar > .avatar, .view-play .race-player-avatar.avatar { width: 25px; height: 25px; font-size: 8px; }
.view-play .race-name { font-size: 9px; }
.view-play .race-score { font-size: 11px; }
.view-play .race-note { font-size: 9px; }

@media (max-width: 800px) {
 .briefing-markers i { display: none; }
 .briefing-card { padding: 28px; }
 .briefing-symbol { width: 76px; height: 76px; font-size: 44px; }
 .briefing-title { font-size: clamp(43px, 7.5vw, 70px); }
 .briefing-text { font-size: 19px; }
 .briefing-details li { font-size: 15px; }
 .powerup-event-copy strong { font-size: 30px; }
 .powerup-event-copy span { font-size: 11px; }
 .powerup-burst { padding-left: 78px; }
 .powerup-flyer { width: 43px; height: 43px; font-size: 27px; left: 17px; }
}
@media (max-width: 560px) {
 .rules-link { font-size: 8px; }
 dialog.rules-dialog { padding: 23px 19px; max-height: 88dvh; }
 .rules-dialog .credits-heading { gap: 12px; margin-bottom: 7px; padding-bottom: 19px; }
 .rules-dialog .credits-heading h2 { font-size: 30px; }
 .rules-dialog .credits-heading .button { font-size: 9px; min-height: 39px; }
 .rules-step { grid-template-columns: 23px 30px minmax(0, 1fr); gap: 10px; padding: 21px 0; }
 .rules-step-number { width: 23px; height: 23px; font-size: 9px; }
 .rules-step-symbol { font-size: 24px; min-width: 28px; }
 .rules-step-title { font-size: 23px; }
 .rules-step-details { grid-column: 2 / -1; font-size: 12px; line-height: 1.7; }
 .briefing-topline { gap: 13px; }
 .briefing-count { font-size: 8px; letter-spacing: 1.8px; }
 .briefing-markers { gap: 7px; }
 .briefing-markers b { width: 23px; height: 23px; font-size: 8px; }
 .briefing-card { padding: 24px 21px; border-left-width: 4px; }
 .briefing-symbol { width: 61px; height: 61px; margin-bottom: 22px; font-size: 35px; }
 .briefing-title { font-size: 43px; margin-top: 19px; }
 .briefing-kicker { font-size: 8px; letter-spacing: 1.5px; }
 .briefing-text { font-size: 16px; }
 .briefing-details { margin-top: 20px; gap: 11px; }
 .briefing-details li { font-size: 12px; padding-left: 19px; }
 .briefing-footer { margin-top: 22px; font-size: 10px; }
 .view-play .briefing-markers i { display: none; }
 .view-play .briefing-markers > span { flex: 0 0 auto; }
 .powerup-panel { padding: 19px 16px; }
 .powerup-heading > strong, .powerup-heading > h2 { font-size: 22px; }
 .powerup-badge { font-size: 7px; padding: 5px 6px; }
 .powerup-item { grid-template-columns: 43px minmax(0, 1fr); gap: 11px; padding: 16px 0; }
 .powerup-symbol { width: 39px; height: 39px; font-size: 24px; }
 .powerup-copy h3 { font-size: 14px; }
 .powerup-copy p { font-size: 10px; }
 .powerup-use { grid-column: 2; }
 .powerup-use button[data-powerup], button.powerup-use[data-powerup] { width: 100%; min-height: 46px; font-size: 10px; }
 .powerup-note { font-size: 9px; }
 .powerup-shield { font-size: 10px; }
 .final-race { padding: 18px 13px; }
 .race-heading { gap: 10px; margin-bottom: 17px; }
 .race-heading strong { font-size: 29px; }
 .race-heading span { font-size: 8px; max-width: 105px; }
 .race-lanes { gap: 9px; max-height: 380px; }
 .race-lane { --race-kart-size: 28px; grid-template-columns: 18px 26px minmax(45px, 75px) minmax(42px, 1fr) 56px; gap: 5px; padding-inline: 4px; }
 .race-name { font-size: 9px; }
 .race-score { font-size: 10px; }
 .race-rank { font-size: 18px; }
 .race-player-avatar, .race-player-avatar > .avatar, .race-player-avatar.avatar { width: 24px; height: 24px; font-size: 8px; }
 .race-kart { height: 20px; font-size: 11px; }
 .race-note { font-size: 9px; }
 .powerup-burst { top: 6px; width: calc(100vw - 18px); height: min(85px, calc(15dvh - 12px)); padding: 8px 13px 8px 63px; border-left-width: 4px; gap: 9px; }
 .powerup-flyer { left: 13px; width: 36px; height: 36px; font-size: 24px; box-shadow: 3px 3px 0 color-mix(in srgb, var(--powerup-color) 20%, transparent); }
 .powerup-event-copy strong { font-size: clamp(21px, 6vw, 29px); }
 .powerup-event-copy span { margin-top: 4px; font-size: 9px; }
}
@media (min-width: 900px) {
 .view-board .briefing-card { min-height: 540px; padding-right: 170px; }
 .view-board .briefing-symbol { position: absolute; top: 55px; right: 53px; width: 100px; height: 100px; margin: 0; }
 .view-board .briefing-title { max-width: 1130px; }
 .view-board .briefing-details { max-width: 1100px; }
 .view-board .final-race:not(.race-compact) .race-lane { min-height: 48px; grid-template-columns: 30px 40px minmax(90px, 170px) minmax(100px, 1fr) 92px; gap: 13px; }
 .view-board .final-race:not(.race-compact) .race-name { font-size: 15px; }
 .view-board .final-race:not(.race-compact) .race-score { font-size: 18px; }
 .view-board .final-race:not(.race-compact) .race-player-avatar, .view-board .final-race:not(.race-compact) .race-player-avatar > .avatar, .view-board .final-race:not(.race-compact) .race-player-avatar.avatar { width: 36px; height: 36px; font-size: 11px; }
}
@media (min-width: 900px) and (max-height: 850px) {
 .view-board .briefing-topline { margin-bottom: 15px; }
 .view-board .briefing-count { font-size: 8px; letter-spacing: 2px; }
 .view-board .briefing-card { min-height: 355px; padding: 29px 130px 29px 35px; border-left-width: 5px; }
 .view-board .briefing-symbol { top: 35px; right: 30px; width: 75px; height: 75px; font-size: 43px; }
 .view-board .briefing-kicker { font-size: 9px; }
 .view-board .briefing-title { font-size: clamp(48px, 5.1vw, 70px); margin: 19px 0 16px; }
 .view-board .briefing-text { font-size: 19px; line-height: 1.45; }
 .view-board .briefing-details { margin-top: 19px; gap: 9px; }
 .view-board .briefing-details li { font-size: 15px; padding-left: 21px; }
 .view-board .briefing-footer { margin-top: 18px; font-size: 10px; }
 .view-board .briefing-markers b { width: 23px; height: 23px; font-size: 8px; }
 .view-board .briefing-markers i { font-size: 8px; }
 .view-board .final-race:not(.race-compact) { padding: 17px 20px; margin: 15px 0; }
 .view-board .final-race:not(.race-compact) .race-heading { margin-bottom: 14px; }
 .view-board .final-race:not(.race-compact) .race-heading strong { font-size: 32px; }
 .view-board .final-race:not(.race-compact) .race-lanes { max-height: 277px; gap: 6px; }
 .view-board .final-race:not(.race-compact) .race-lane { min-height: 35px; padding-top: 4px; padding-bottom: 4px; }
 .view-board .final-race:not(.race-compact) .race-name { font-size: 12px; }
 .view-board .final-race:not(.race-compact) .race-score { font-size: 14px; }
 .view-board .final-race:not(.race-compact) .race-player-avatar, .view-board .final-race:not(.race-compact) .race-player-avatar > .avatar, .view-board .final-race:not(.race-compact) .race-player-avatar.avatar { width: 27px; height: 27px; font-size: 8px; }
 .view-board .race-note { margin-top: 12px; padding-top: 9px; font-size: 9px; }
 .view-board .race-compact { padding: 12px 9px; }
 .view-board .race-compact .race-lanes { max-height: calc(100dvh - 315px); gap: 7px; }
 .view-board .race-compact .race-lane { min-height: 54px; }
 .view-board .race-compact .race-note { font-size: 7px; }
 .powerup-burst { top: 6px; height: min(88px, calc(15dvh - 12px)); }
 .powerup-event-copy strong { font-size: 34px; }
 .powerup-event-copy span { font-size: 11px; }
}
@media (max-height: 520px) and (orientation: landscape) {
 .powerup-burst { height: calc(15dvh - 8px); top: 4px; padding-top: 3px; padding-bottom: 3px; }
 .powerup-flyer { width: 28px; height: 28px; font-size: 18px; }
 .powerup-event-copy strong { font-size: 21px; }
 .powerup-event-copy span { margin-top: 2px; font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
 .briefing-card { animation: none; opacity: 1; transform: none; }
 .briefing-symbol, .powerup-symbol, .race-kart { transform: none; }
 .race-progress, .race-kart { transition: none; }
 .powerup-burst { animation: none; opacity: 1; transform: translateX(-50%); }
 .powerup-flyer { animation: none; transform: translateY(-50%); }
}
.category-bottom { flex-wrap: wrap; }
.category-bottom > label { flex: 0 1 auto; }
.category-bottom > .button { margin-left: auto; }
.player-tools { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin: -9px 0 20px; }
.player-tools .rules-link { min-height: 44px; text-align: left; flex-shrink: 0; }
.player-tools .powerup-inventory { color: #d4c0ed; font-size: 9px; justify-content: flex-end; text-align: right; margin: 0; }
.player-tools .powerup-shield { margin: 0; padding: 5px 8px; font-size: 9px; }
.briefing-markers { margin-top: 25px; flex-wrap: wrap; }
.rules-step p { margin: 10px 0; color: #d5c5e6; font-size: 14px; line-height: 1.65; }
ul.rules-step-details { padding-left: 18px; }
.powerup-empty { border-color: #9e76cb44; background: #27153b80; }
.powerup-empty .powerup-heading { margin-bottom: 0; }
.reveal-pending .final-race { visibility: hidden; }
@media (max-width: 560px) {
 .category-bottom > label { width: 100%; }
 .category-bottom > .button { width: 100%; margin-left: 0; }
}

/* Big portraits belong on a show stage, including the live points tower. */
.view-board .ranking-row { min-height: 108px; gap: 18px; padding: 10px 17px; }
.view-board .ranking-row .avatar { width: 88px; height: 88px; flex: 0 0 88px; font-size: 26px; }
.view-board .ranking-row .name { font-size: clamp(18px, 1.7vw, 29px); }
.view-board .ranking-row .score { font-size: 24px; }
.view-board .podium-player { padding-top: 25px; min-height: 330px; }
.view-board .podium-player.first { min-height: 365px; }
.view-board .podium-player .avatar.large { width: clamp(140px, 9vw, 180px); height: clamp(140px, 9vw, 180px); font-size: 43px; }
.view-board .podium-player h3 { font-size: 26px; margin-top: 16px; }
.view-play .ranking-row { min-height: 85px; gap: 11px; padding: 10px 8px; }
.view-play .ranking-row .avatar { width: 64px; height: 64px; flex: 0 0 64px; font-size: 20px; }
.view-play .ranking-row .name { font-size: 13px; }
.view-play .ranking-row .score { font-size: 15px; }
.view-play .ranking-row .rank { width: 20px; min-width: 20px; font-size: 16px; }
.view-play .ranking-row .delta { font-size: 10px; }
.view-play .ranking-row .rank-movement { display: none; }
.view-board .tower-player { min-height: 66px; gap: 10px; }
.view-board .tower-player > .avatar { width: 52px; height: 52px; flex: 0 0 52px; font-size: 16px; }
.view-board .tower-player > span { line-height: 1.45; }
.view-board .tower-player > span b { color: var(--gold); }
.view-board .tower-player .tower-points { font-size: 13px; }
.view-board .lobby-roster .player-chip > .avatar { width: 52px; height: 52px; flex: 0 0 52px; font-size: 16px; }
.player-chip > span:not(.avatar) { display: block; }
.player-chip small, .ready-indicator { display: block; margin-top: 5px; color: var(--gold); font-size: 9px; }
.player-chip.awaiting-ready, .host-player.awaiting-ready { opacity: .5; }
.player-chip.awaiting-ready small, .host-player.awaiting-ready .ready-indicator { color: #c2b0d6; }
.ready-card { margin: 20px 0; padding: 29px 24px; border: 2px solid var(--gold); background: linear-gradient(135deg,#422363,#1c0c2c); }
.ready-card h1 { margin: 21px 0; font: 400 clamp(38px,10vw,56px)/1 var(--display); }
.ready-card p { font-size: 14px; line-height: 1.7; color: #d0bce4; }
.ready-card .ready-note { font-size: 10px; margin-bottom: 0; }
.ready-card .button { min-height: 54px; margin-top: 13px; }
.ready-symbol { display: block; margin-top: 23px; color: var(--gold); font: 400 67px/1 var(--display); }
.race-score small { font-size: .65em; }
.race-moving .race-kart { animation: race-kart-step 1100ms cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(0ms - var(--race-age,10000ms)); }
.race-moving .race-progress { animation: race-track-step 1100ms cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(0ms - var(--race-age,10000ms)); }
@keyframes race-kart-step { from { left: clamp(0%,var(--race-from),calc(100% - var(--race-kart-size))); } to { left: clamp(0%,var(--race-position),calc(100% - var(--race-kart-size))); } }
@keyframes race-track-step { from { width: var(--race-from); } to { width: var(--race-position); } }
@media(min-width:1100px) {
 .effect-name.with-selfie .cue-selfie { width: 340px; height: 385px; }
 .effect-name.with-selfie .show-cue { padding-left: 405px; min-height: 385px; }
 .view-board .rankings .ranking-list { max-height: 43dvh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #916ac6 transparent; }
}
@media(min-width:900px) and (max-height:850px) {
 .view-board .podium-player { min-height: 300px; padding: 21px 14px 14px; }
 .view-board .podium-player.first { min-height: 325px; }
 .view-board .podium-player .avatar.large { width: 140px; height: 140px; }
 .view-board .podium-player h3 { margin-top: 12px; font-size: 21px; }
 .view-board .podium-points { font-size: 29px; }
 .view-board .lobby-roster .player-chips { max-height: 145px; }
 .view-board .tower-player > .avatar { width: 48px; height: 48px; flex-basis: 48px; }
 .view-board .tower-player { min-height: 60px; }
}
@media(max-width:400px) {
 .view-play .ranking-row { gap: 7px; padding-inline: 3px; }
 .view-play .ranking-row .name { font-size: 12px; }
 .view-play .ranking-row .score { font-size: 13px; }
 .view-play .ranking-row .delta { max-width: 38px; }
}

/* The audience picks the topics: real votes and a short, clear ballot. */
.voting-stage { max-width: 1400px; margin: 0 auto; }
.voting-heading { display: flex; align-items: center; justify-content: space-between; gap: 35px; }
.voting-heading h1 { margin: 18px 0 15px; font: 400 clamp(52px,7.5vw,116px)/.9 var(--display); color: var(--gold); }
.voting-heading p { max-width: 850px; color: #d0bee5; font-size: clamp(16px,1.7vw,25px); line-height: 1.5; }
.voting-clock { width: 120px; height: 120px; flex: 0 0 120px; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 3px solid var(--gold); background: #33204a; box-shadow: 7px 7px 0 #7854bf33; transform: rotate(4deg); }
.voting-clock strong { color: var(--gold); font: 400 62px/1 var(--display); }
.voting-clock span { margin-top: 5px; font-size: 9px; letter-spacing: 1.5px; color: #d8c4eb; }
.voting-status { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 14px 0; margin: 15px 0 20px; border-block: 1px solid var(--line); color: #c2aed9; font-size: 13px; }
.voting-status strong { color: var(--gold); font-size: 10px; letter-spacing: 1px; }
.vote-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; }
.vote-bar-card { padding: 14px 18px; border: 1px solid #a98bd04d; background: #2a173b99; }
.vote-bar-card > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 13px; }
.vote-bar-card strong { font-size: clamp(15px,1.6vw,25px); line-height: 1.25; }
.vote-bar-card b { font: 400 28px/1 var(--display); color: var(--gold); }
.vote-bar { height: 9px; background: #ae7eff18; transform: skewX(-12deg); }
.vote-bar i { display: block; width: var(--votes,0%); height: 100%; background: linear-gradient(90deg,#8b55ff,var(--gold)); min-width: 0; transition: width .4s ease; }
.vote-choices { display: grid; gap: 12px; }
.vote-card { display: flex; align-items: center; gap: 14px; padding: 20px; min-height: 88px; border: 1px solid #ad85df77; background: #2a173e; cursor: pointer; position: relative; }
.vote-card input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.vote-card:focus-within { outline: 3px solid var(--gold-light); outline-offset: 3px; }
.vote-card.selected { background: #42471d; border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.vote-card:has(input:disabled):not(.selected) { opacity: .4; cursor: default; }
.vote-choice-mark { display: grid; place-items: center; width: 35px; height: 35px; flex: 0 0 35px; border: 1px solid #ad85df88; color: var(--gold); font: 400 23px/1 var(--display); }
.selected .vote-choice-mark { color: #100b19; background: var(--gold); border-color: var(--gold); }
.vote-card strong { display: block; font-size: 17px; }
.vote-card small { display: block; margin-top: 7px; color: #bba7d0; font-size: 10px; }
.voting-note { color: #ad96c8; margin-top: 22px; font-size: 12px; line-height: 1.6; }
.vote-submit { min-height: 58px; margin-top: 22px; }
.view-play .voting-heading { gap: 17px; }
.view-play .voting-heading h1 { font-size: 47px; }
.view-play .voting-heading p { font-size: 14px; }
.view-play .voting-heading .section-label { font-size: 7px; letter-spacing: 1px; }
.view-play .voting-clock { width: 68px; height: 78px; flex-basis: 68px; border-width: 2px; }
.view-play .voting-clock strong { font-size: 40px; }
.view-play .voting-clock span { font-size: 6px; letter-spacing: .5px; }
.view-play .voting-status { font-size: 10px; }
.view-play .voting-status strong { font-size: 8px; }
.view-play .voting-note { font-size: 10px; }
.host-panel .voting-heading h1 { font-size: 57px; }
.host-panel .voting-heading p { font-size: 16px; }
.host-panel .voting-clock { width: 80px; height: 90px; flex-basis: 80px; }
.host-panel .voting-clock strong { font-size: 45px; }
.host-panel .vote-bar-card strong { font-size: 17px; }
@media(min-width:900px) and (max-height:850px) {
 .view-board .voting-heading h1 { font-size: 72px; margin: 9px 0; }
 .view-board .voting-heading p { font-size: 18px; margin: 12px 0; }
 .view-board .voting-clock { width: 90px; height: 90px; flex-basis: 90px; }
 .view-board .voting-clock strong { font-size: 47px; }
 .view-board .voting-status { padding: 10px 0; margin: 10px 0 15px; font-size: 11px; }
 .view-board .vote-bars { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
 .view-board .vote-bar-card { padding: 10px 12px; }
 .view-board .vote-bar-card strong { font-size: 17px; }
 .view-board .vote-bar-card > div:first-child { margin-bottom: 9px; }
 .view-board .voting-note { font-size: 10px; margin-top: 15px; }
}
@media(max-width:600px) {
 .vote-bars { grid-template-columns: 1fr; gap: 10px; }
 .vote-card { padding: 18px 16px; }
 .view-play .voting-heading h1 { font-size: 42px; }
 .vote-card strong { font-size: 15px; }
 .vote-card small { font-size: 9px; }
}
@media(prefers-reduced-motion:reduce) {
 .race-moving .race-kart,.race-moving .race-progress { animation: none; }
 .vote-bar i { transition: none; }
}
.view-host .host-player { min-height: 68px; gap: 10px; }
.view-host .host-player > .avatar { width: 48px; height: 48px; flex: 0 0 48px; font-size: 15px; }
.view-board .race-compact .race-lane { grid-template-columns: 17px 48px minmax(0,1fr) auto; min-height: 80px; }
.view-board .race-compact .race-player-avatar,.view-board .race-compact .race-player-avatar > .avatar { width: 48px; height: 48px; font-size: 14px; }
.view-board .race-compact .race-name { font-size: 11px; }
.view-board .race-compact .race-score { font-size: 11px; }
.awaiting-verdict .effect-result .confetti-shower { visibility: hidden; }
.collective-win .show-wipe::after { content: ''; display: block; position: absolute; inset: 0; background: radial-gradient(ellipse at center, #ddff0044, transparent 70%); opacity: 0; animation: collective-pulse var(--cue-duration) linear both; animation-delay: calc(0ms - var(--cue-age)); }
.leader-effects { position: fixed; z-index: 115; inset: 0 0 auto; pointer-events: none; }
.leader-splash { width: min(1060px,calc(100vw - 40px)); height: min(155px,18dvh); padding: 10px 27px 10px 13px; margin: 10px auto 0; display: flex; align-items: center; gap: 23px; border: 3px solid var(--gold); background: linear-gradient(105deg,#4a2c69,#160b27); box-shadow: 9px 9px 0 #734bce66; transform: rotate(-1deg); animation: leader-arrival 1900ms cubic-bezier(.16,1,.3,1) both; animation-delay: calc(0ms - var(--leader-age,10000ms)); }
.leader-splash > .avatar.large { width: 125px; height: 125px; flex: 0 0 125px; font-size: 35px; border: 3px solid #eaff7a; transform: rotate(-5deg); }
.leader-splash > div { min-width: 0; }
.leader-splash > div > span { display: block; font-size: 11px; font-weight: 850; letter-spacing: 2px; color: #cdb4e8; }
.leader-splash strong { display: block; margin: 7px 0; font: 400 clamp(31px,4vw,62px)/.95 var(--display); color: var(--gold); overflow-wrap: anywhere; }
.leader-splash b { color: white; font-size: 13px; }
.leader-splash em { margin-left: auto; color: var(--gold); font: 400 27px/1 var(--display); transform: rotate(5deg); max-width: 150px; }
@keyframes leader-arrival { 0% { opacity: 0; transform: translateY(-130%) rotate(-4deg); } 16%,80% { opacity: 1; transform: translateY(0) rotate(-1deg); } 100% { opacity: 0; transform: translateY(-130%) rotate(2deg); } }
@keyframes collective-pulse { 0%,74% { opacity: 0; } 79% { opacity: 1; } 91% { opacity: .2; } 96% { opacity: .8; } 100% { opacity: 0; } }
@media(max-width:560px) {
 .cue-selfie { width: 185px; height: 205px; }
 #show-effects.effect-name.with-selfie .show-cue { padding-top: 227px; }
 .leader-splash { width: calc(100vw - 20px); margin-top: 5px; gap: 12px; padding: 7px 10px; height: 106px; border-width: 2px; }
 .leader-splash > .avatar.large { width: 78px; height: 78px; flex-basis: 78px; font-size: 24px; border-width: 2px; }
 .leader-splash > div > span { font-size: 7px; letter-spacing: .7px; }
 .leader-splash strong { font-size: 29px; margin: 7px 0; }
 .leader-splash b { font-size: 9px; }
 .leader-splash em { display: none; }
}
@media(prefers-reduced-motion:reduce) {
 .leader-splash { animation: none; transform: none; }
 .leader-splash > .avatar.large { transform: none; }
 .collective-win .show-wipe::after { display: none; }
}
.voice-usage-card { margin: 20px 0 0; padding: 17px 14px; border: 1px solid #a18ac655; border-left: 3px solid var(--gold); background: #11091d99; }
.voice-usage-card > .section-label { font-size: 8px; letter-spacing: 1.1px; }
.voice-usage-numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 17px 0 14px; }
.voice-usage-numbers strong { display: block; font: 400 29px/1 var(--display); color: var(--gold); }
.voice-usage-numbers span { display: block; margin-top: 7px; font-size: 9px; line-height: 1.5; color: #bda8d3; }
.voice-usage-card .speech-toggle-label { font-size: 11px; }
.voice-usage-card .speech-toggle-note { font-size: 8px; }
.voice-usage-card .voice-limit-field { margin: 16px 0; }
.voice-usage-card .voice-limit-field > span { font-size: 10px; }
.voice-usage-card .voice-limit-field input { font-size: 14px; padding: 12px; }
.voice-usage-card .settings-note { font-size: 8px; line-height: 1.7; }

/* An eighteen-person score wall stays on the broadcast screen: podium beside
   three columns of five rows, rather than a long list below the podium. */
@media(min-width:1200px) {
 .view-board .ranking-wall { display: grid; grid-template-columns: minmax(500px,.95fr) minmax(0,1.65fr); align-items: center; gap: 15px 26px; }
 .view-board .ranking-wall .ranking-intro { grid-column: 1/-1; margin: 0 0 6px; }
 .view-board .ranking-wall .ranking-title { font-size: clamp(43px,3.5vw,66px); margin: 8px 0; }
 .view-board .ranking-wall .ranking-intro p { font-size: 13px; margin: 0; }
 .view-board .ranking-wall .ranking-intro .eyebrow { font-size: 9px; }
 .view-board .ranking-wall .podium { width: 100%; max-width: none; margin: 0; padding: 29px 0 0; gap: 12px; align-self: center; }
 .view-board .ranking-wall .podium-player { min-width: 0; min-height: 325px; padding: 18px 9px; }
 .view-board .ranking-wall .podium-player.first { min-height: 360px; }
 .view-board .ranking-wall .podium-place { position: static; display: block; margin-bottom: 14px; font-size: 10px; }
 .view-board .ranking-wall .podium-player .avatar.large { width: 140px; height: 140px; margin: 0 0 12px; }
 .view-board .ranking-wall .podium-player h3,.view-board .ranking-wall .podium-player.first h3 { font-size: 23px; line-height: 1.15; margin: 0 0 14px; }
 .view-board .ranking-wall .podium-points { font-size: 32px; }
 .view-board .ranking-wall .podium-points small { display: block; margin: 6px 0 0; font-size: 9px; }
 .view-board .ranking-wall .ranking-list { width: 100%; max-width: none; max-height: none; margin: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: repeat(var(--ranking-rows),108px); grid-auto-flow: column; gap: 8px 10px; overflow: visible; align-self: center; }
 .view-board .ranking-wall .ranking-row { min-width: 0; min-height: 0; display: grid; grid-template-columns: 16px 88px minmax(0,1fr); grid-template-rows: 1fr 1fr; align-items: center; gap: 3px 9px; padding: 10px 8px; }
 .view-board .ranking-wall .ranking-row .rank { grid-column: 1; grid-row: 1/3; width: auto; font-size: 15px; }
 .view-board .ranking-wall .ranking-row .avatar { grid-column: 2; grid-row: 1/3; width: 88px; height: 88px; margin: 0; }
 .view-board .ranking-wall .ranking-row .name { grid-column: 3; grid-row: 1; align-self: end; font-size: 18px; line-height: 1.2; }
 .view-board .ranking-wall .ranking-row .score { grid-column: 3; grid-row: 2; align-self: start; font-size: 18px; margin-top: 5px; padding-right: 43px; }
 .view-board .ranking-wall .ranking-row .delta { grid-column: 3; grid-row: 2; justify-self: end; align-self: start; font-size: 10px; margin-top: 9px; padding: 0; }
 .view-board .ranking-wall .ranking-row .rank-movement { display: none; }
 .view-board .ranking-wall:has(.ranking-list:empty) { grid-template-columns: 1fr; }
 .view-board .ranking-wall:has(.ranking-list:empty) .podium { max-width: 960px; justify-self: center; }
 body.view-board:has(.ranking-wall) .app-footer { display: none; }
 body.view-board:has(.ranking-wall) .app-main { padding-top: 16px; }
 body.view-board:has(.ranking-wall) .moderator { padding: 9px 14px; margin-top: 16px; }
 body.view-board:has(.ranking-wall) .moderator p { font-size: 15px; line-height: 1.4; }
}
@media(min-width:1600px) {
 .view-board .ranking-wall .podium-player .avatar.large { width: 160px; height: 160px; }
}
@media(min-width:1200px) and (max-height:850px) {
 body.view-board:has(.ranking-wall) .app-shell { padding-top: 12px; padding-bottom: 8px; }
 body.view-board:has(.ranking-wall) .app-header { padding-bottom: 8px; }
 body.view-board:has(.ranking-wall) .app-main { padding-top: 12px; }
 body.view-board:has(.ranking-wall) .round-strip { padding-bottom: 8px; margin-bottom: 10px; }
 .view-board .ranking-wall { gap: 8px 20px; }
 .view-board .ranking-wall .ranking-title { font-size: 40px; margin: 5px 0; }
 .view-board .ranking-wall .ranking-intro { margin: 0; }
 .view-board .ranking-wall .ranking-intro p { display: none; }
 .view-board .ranking-wall .ranking-intro .eyebrow { font-size: 7px; }
 .view-board .ranking-wall .podium { padding-top: 25px; gap: 9px; }
 .view-board .ranking-wall .podium-player { min-height: 275px; padding: 13px 7px; }
 .view-board .ranking-wall .podium-player.first { min-height: 305px; }
 .view-board .ranking-wall .podium-place { font-size: 8px; margin-bottom: 10px; }
 .view-board .ranking-wall .podium-player .avatar.large { width: 140px; height: 140px; margin-bottom: 10px; }
 .view-board .ranking-wall .podium-player h3,.view-board .ranking-wall .podium-player.first h3 { font-size: 19px; margin-bottom: 10px; }
 .view-board .ranking-wall .podium-points { font-size: 25px; }
 .view-board .ranking-wall .podium-points small { font-size: 8px; margin-top: 5px; }
 .view-board .ranking-wall .ranking-list { grid-template-rows: repeat(var(--ranking-rows),76px); gap: 6px 9px; }
 .view-board .ranking-wall .ranking-row { grid-template-columns: 13px 64px minmax(0,1fr); padding: 6px; gap: 3px 6px; }
 .view-board .ranking-wall .ranking-row .avatar { width: 64px; height: 64px; flex-basis: 64px; font-size: 20px; }
 .view-board .ranking-wall .ranking-row .rank { font-size: 12px; }
 .view-board .ranking-wall .ranking-row .name { font-size: 13px; }
 .view-board .ranking-wall .ranking-row .score { font-size: 14px; padding-right: 33px; margin-top: 3px; }
 .view-board .ranking-wall .ranking-row .delta { font-size: 8px; margin-top: 6px; }
 body.view-board:has(.ranking-wall) .moderator { margin-top: 9px; padding: 6px 10px; }
 body.view-board:has(.ranking-wall) .moderator .section-label { display: none; }
 body.view-board:has(.ranking-wall) .moderator-icon { width: 20px; font-size: 18px; }
 body.view-board:has(.ranking-wall) .moderator p { font-size: 12px; line-height: 1.3; -webkit-line-clamp: 1; }
}
.view-board .race-compact .race-lanes { max-height: none; overflow: visible; }
@media(min-width:900px) {
 .view-board .vote-bars { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
 .view-board .voting-heading h1 { font-size: clamp(60px,5vw,96px); margin: 13px 0; }
 .view-board .voting-heading p { font-size: clamp(17px,1.3vw,23px); margin: 12px 0; }
 .view-board .voting-heading .section-label { font-size: 8px; }
 .view-board .vote-bar-card { padding: 12px; }
 .view-board .vote-bar-card strong { font-size: clamp(17px,1.25vw,23px); }
 .view-board .vote-bar-card > div:first-child { margin-bottom: 10px; }
 .view-board .vote-bar { height: 8px; }
}
.vote-submit-bar { display: flex; align-items: center; gap: 18px; margin-top: 22px; padding: 15px 0; }
.vote-submit-bar .vote-submit { flex: 1; margin: 0; min-height: 54px; }
.vote-submit-count { flex: 0 0 auto; min-width: 75px; }
.vote-submit-count strong { display: block; color: var(--gold); font: 400 27px/1 var(--display); }
.vote-submit-count span { display: block; color: #c7b1de; font-size: 9px; margin-top: 6px; }
@media(max-width:900px) {
 .view-play .vote-ballot.has-vote-submit { padding-bottom: calc(140px + env(safe-area-inset-bottom,0px)); }
 .view-play .vote-submit-bar { position: fixed; z-index: 65; left: 0; right: 0; bottom: 0; margin: 0; padding: 14px max(18px,calc((100vw - 540px)/2)) calc(14px + env(safe-area-inset-bottom,0px)); gap: 15px; border-top: 2px solid var(--gold); background: #1b0f2df7; box-shadow: 0 -13px 36px #080312cc; }
 .view-play .vote-submit-count { min-width: 64px; }
 .view-play .vote-submit-count strong { font-size: 28px; }
 .view-play .vote-submit-count span { font-size: 8px; }
 .view-play .vote-submit-bar .vote-submit { font-size: 13px; padding: 15px 14px; min-height: 54px; }
}
.crate-effects { z-index: 113; }
.crate-burst { width: min(780px,calc(100vw - 36px)); padding-left: 110px; border-color: #d9b4ff99; border-left-color: var(--gold); background: linear-gradient(110deg,#563075f7,#1c0c30f7); animation-duration: 1500ms; }
.crate-burst .powerup-event-copy strong { color: var(--gold); font-size: clamp(25px,2.5vw,40px); }
.crate-box { position: absolute; top: 50%; left: 29px; width: 55px; height: 48px; background: var(--gold); border: 3px solid #160c22; color: #130b20; box-shadow: 5px 6px 0 #ac7cff66; transform: translateY(-43%) rotate(-6deg); animation: crate-rattle 1500ms ease both; animation-delay: calc(0ms - var(--powerup-age,0ms)); }
.crate-box > i { position: absolute; top: -13px; left: -6px; width: 61px; height: 15px; background: #f0ff7a; border: 3px solid #160c22; transform-origin: left bottom; animation: crate-lid-pop 1500ms cubic-bezier(.16,1,.3,1) both; animation-delay: calc(0ms - var(--powerup-age,0ms)); }
.crate-box > b { display: grid; place-items: center; height: 100%; font: 400 34px/1 var(--display); animation: crate-question-out 1500ms linear both; animation-delay: calc(0ms - var(--powerup-age,0ms)); }
.crate-box > em { position: absolute; inset: 0; display: grid; place-items: center; font: 400 38px/1 var(--display); color: white; background: #7951c9; animation: crate-prize-pop 1500ms cubic-bezier(.16,1,.3,1) both; animation-delay: calc(0ms - var(--powerup-age,0ms)); }
.reveal-pending .powerup-inventory { visibility: hidden; }
@keyframes crate-rattle { 0%,15% { transform: translateY(-43%) rotate(-6deg); } 24% { transform: translateY(-43%) rotate(8deg); } 33% { transform: translateY(-43%) rotate(-11deg); } 43% { transform: translateY(-43%) rotate(9deg); } 55%,100% { transform: translateY(-43%) rotate(-4deg); } }
@keyframes crate-lid-pop { 0%,43% { transform: none; opacity: 1; } 67%,100% { transform: translate(-12px,-26px) rotate(-45deg); opacity: 0; } }
@keyframes crate-question-out { 0%,47% { opacity: 1; } 53%,100% { opacity: 0; } }
@keyframes crate-prize-pop { 0%,48% { opacity: 0; transform: translateY(8px) scale(.4); } 69% { opacity: 1; transform: translateY(-7px) scale(1.25); } 81%,100% { opacity: 1; transform: none; } }
@media(max-width:560px) {
 .crate-burst { padding-left: 75px; width: calc(100vw - 18px); }
 .crate-box { left: 20px; width: 37px; height: 34px; border-width: 2px; }
 .crate-box > i { width: 41px; height: 11px; left: -4px; top: -10px; border-width: 2px; }
 .crate-box > b { font-size: 25px; }
 .crate-box > em { font-size: 27px; }
 .crate-burst .powerup-event-copy strong { font-size: 24px; }
 .crate-burst .powerup-event-copy span { font-size: 9px; }
}
@media(prefers-reduced-motion:reduce) {
 .crate-box { animation: none; transform: translateY(-43%); }
 .crate-box > i,.crate-box > b { display: none; }
 .crate-box > em { animation: none; opacity: 1; transform: none; }
}

/* Photo caption duels: whole photographs, anonymous speech cards, public reveal. */
.photo-duel { min-width: 0; }
.photo-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.photo-heading > div:first-child { min-width: 0; }
.photo-heading .section-label { display: block; color: #c3a4ee; font-size: 9px; letter-spacing: 2px; line-height: 1.5; }
.photo-heading h1 { margin: 17px 0 0; font: 400 clamp(40px, 4.8vw, 83px)/.97 var(--display); letter-spacing: -.3px; }
.photo-clock { flex: 0 0 auto; display: grid; align-content: center; justify-items: center; width: 87px; min-height: 84px; padding: 10px 7px; border: 2px solid var(--gold); background: #ddff000b; color: var(--gold); transform: rotate(3deg); }
.photo-clock strong { font: 400 45px/1 var(--display); font-variant-numeric: tabular-nums; }
.photo-clock > span { max-width: 76px; margin-top: 6px; font-size: 7px; font-weight: 750; letter-spacing: 1px; text-align: center; line-height: 1.4; }
.photo-clock.is-urgent { border-color: #ff7593; color: #ff7593; background: #ff75930d; }
.photo-clock.result-clock { border-color: #b488ed; color: #dfc6ff; background: #b488ed0a; }
.photo-round-status { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; margin-bottom: 22px; border-top: 1px solid #ad8eff36; border-bottom: 1px solid #ad8eff36; color: #bcabd3; font-size: 11px; line-height: 1.4; }
.photo-round-status strong { color: var(--gold); font-size: 8px; letter-spacing: 1.3px; text-align: right; }
.photo-duel-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); align-items: start; gap: 28px; }
.photo-figure { min-width: 0; margin: 0; }
.photo-image-frame { display: grid; place-items: center; height: clamp(300px, 49vh, 560px); padding: 7px; overflow: hidden; border: 1px solid #b28bea80; background: #06030d; box-shadow: 7px 7px 0 #7c42cd29; }
.photo-image-frame img { display: block; width: 100%; height: 100%; min-height: 0; max-height: 100%; object-fit: contain; object-position: center; }
.photo-figure figcaption { margin-top: 19px; padding-left: 14px; border-left: 3px solid var(--gold); color: #e3d7f3; font-size: clamp(13px, 1.25vw, 20px); font-weight: 650; line-height: 1.5; overflow-wrap: anywhere; }
.photo-missing { color: #a88abc; font-size: 13px; }
.photo-duel-content { min-width: 0; }
.photo-caption-call { position: relative; padding: 20px 14px 14px 30px; }
.photo-quote { display: block; height: 75px; color: var(--gold); font: 400 145px/1 var(--display); }
.photo-caption-call h2 { margin: 14px 0 22px; color: #f2e8ff; font: 400 clamp(37px, 4.4vw, 73px)/1 var(--display); letter-spacing: -.2px; }
.photo-caption-call > p { max-width: 570px; color: #bca8d4; font-size: clamp(15px, 1.35vw, 21px); line-height: 1.6; }
.photo-submitted { display: flex; align-items: center; gap: 17px; margin-top: 27px; padding-top: 21px; border-top: 1px solid #b48ae839; }
.photo-submitted > strong { color: var(--gold); font: 400 65px/1 var(--display); }
.photo-submitted > span { color: #bca8d4; font-size: 9px; font-weight: 750; letter-spacing: 2px; line-height: 1.6; }
.photo-board-instruction { margin: 0 0 18px; color: #c7b3dd; font-size: clamp(12px, 1.05vw, 16px); line-height: 1.5; }
.photo-board-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 13px; }
.photo-anonymous-card, .photo-result-card { position: relative; min-width: 0; padding: 18px; border: 1px solid #b88aec60; border-bottom: 3px solid #9156cc; background: linear-gradient(130deg, #352046ed, #1e112fed); }
.photo-entry-label { display: block; color: #bc9ee0; font-size: 8px; font-weight: 800; letter-spacing: 1.6px; line-height: 1.5; }
.photo-anonymous-card > p, .photo-speech > p { margin: 15px 0 0; color: #f0e6fc; font-size: clamp(15px, 1.2vw, 21px); font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
.photo-pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px 10px; margin-top: 12px; color: #9d87b5; font-size: 8px; line-height: 1.5; }
.photo-pages > div { display: flex; flex-wrap: wrap; gap: 3px; }
.photo-page-dot { display: grid; place-items: center; width: 28px; height: 28px; padding: 8px; border: 0; background: none; }
.photo-page-dot::after { content: ""; display: block; width: 8px; height: 8px; border: 1px solid #b997dd80; background: #b997dd19; }
.photo-page-dot.current::after { border-color: var(--gold); background: var(--gold); }
.photo-page-dot:hover::after { border-color: var(--gold); }
.photo-result-card { padding: 15px; }
.photo-result-card.is-winner { border-color: #ddff0080; border-bottom-color: var(--gold); background: linear-gradient(130deg, #ddff0012, #30203fed); }
.photo-result-card.is-winner .photo-entry-label { color: var(--gold); }
.photo-speech > .photo-entry-label { max-width: calc(100% - 69px); letter-spacing: 1px; font-size: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.photo-speech > p { margin-top: 17px; margin-bottom: 17px; font-size: clamp(13px, 1.05vw, 18px); line-height: 1.4; }
.photo-result-author { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 7px; }
.photo-result-author .avatar { width: 23px; height: 23px; font-size: 8px; }
.photo-result-author > strong { min-width: 0; color: #d7c3eb; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.photo-result-author > span:last-child { color: #b098ca; font-size: 9px; white-space: nowrap; }
.photo-bonus { position: absolute; top: 12px; right: 12px; color: var(--gold); font: 400 23px/1 var(--display); text-align: right; }
.photo-bonus > small { display: block; margin-top: 3px; color: #b4a0c7; font: 700 6px/1.2 "Segoe UI", sans-serif; letter-spacing: 1px; }
.photo-scoring-note { margin: 16px 0 0; padding-top: 13px; border-top: 1px solid #ad8eff2b; color: #a48dbb; font-size: 10px; line-height: 1.7; }
.photo-empty { grid-column: 1 / -1; margin: 0; padding: 25px; border: 1px dashed #b488ed66; color: #bca8d4; font-size: 14px; line-height: 1.7; }
.photo-caption-form { padding: 24px; border: 1px solid #b488ed66; background: linear-gradient(130deg, #2c183e, #180d28); }
.photo-caption-form label { display: block; }
.photo-caption-form label > strong { display: block; margin: 12px 0 18px; font-size: 19px; line-height: 1.4; }
.photo-caption-form textarea { display: block; width: 100%; min-height: 130px; resize: vertical; padding: 16px; border: 1px solid #b488ed80; border-radius: 3px; color: #f1e7fc; background: #10071d; font: 600 19px/1.5 "Segoe UI", sans-serif; }
.photo-caption-form textarea::placeholder { color: #826993; font-weight: 450; }
.photo-caption-form textarea:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; }
.photo-caption-form textarea:disabled { opacity: .5; }
.photo-input-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 11px 0 21px; color: #ad95c3; font-size: 9px; line-height: 1.5; }
.photo-input-meta output { color: var(--gold); font-size: 11px; font-weight: 750; white-space: nowrap; }
.photo-form-note { margin: 16px 0 0; color: #a28ab9; font-size: 9px; line-height: 1.7; }
.photo-logged { display: grid; justify-items: center; padding: 36px 25px; border: 1px solid #ddff0066; text-align: center; background: #ddff0008; }
.photo-logged > span { display: grid; place-items: center; width: 65px; height: 65px; margin-bottom: 23px; color: #170b23; background: var(--gold); font-size: 40px; transform: rotate(-6deg); }
.photo-logged h2 { font: 400 42px/1 var(--display); }
.photo-logged p { max-width: 420px; margin: 0; color: #bca8d4; font-size: 14px; line-height: 1.7; }
.photo-vote-intro { color: #c5b0db; font-size: 13px; line-height: 1.7; }
.photo-vote-list { display: grid; gap: 12px; }
.photo-vote-card { position: relative; display: flex; align-items: center; gap: 13px; min-height: 88px; padding: 18px; border: 1px solid #b48ae866; background: #321d46; cursor: pointer; }
.photo-vote-card > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.photo-vote-card:focus-within { outline: 3px solid var(--gold); outline-offset: 3px; }
.photo-vote-card.selected { border-color: var(--gold); background: #ddff0010; box-shadow: inset 3px 0 var(--gold); }
.photo-vote-card.own-entry { border-style: dashed; background: #20122f; cursor: default; }
.photo-vote-card.own-entry .photo-vote-copy { opacity: .5; }
.photo-vote-card > input:disabled { cursor: default; }
.photo-vote-mark { display: grid; place-items: center; flex: 0 0 auto; width: 29px; height: 29px; border: 1px solid #c399f466; color: #b694d5; font-size: 20px; font-weight: 750; }
.selected > .photo-vote-mark { color: #140b1e; border-color: var(--gold); background: var(--gold); }
.photo-vote-copy { display: block; min-width: 0; }
.photo-vote-copy > small { display: block; margin-bottom: 9px; color: #a68bbb; font-size: 7px; line-height: 1.5; font-weight: 750; letter-spacing: 1.2px; }
.photo-vote-copy > strong { display: block; color: #ebdef8; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.photo-abstain { min-height: 71px; background: #1c102a; }
.photo-abstain .photo-vote-copy > strong { font-size: 13px; }
.photo-vote-submit { margin-top: 20px; }
.photo-vote-submit p { margin: 0 0 10px; color: #baa3ce; font-size: 10px; line-height: 1.5; }
.photo-player-results { display: grid; gap: 14px; }
.photo-player-summary { margin-bottom: 8px; }

.host-photo-panel { padding: 27px; margin: 22px 0; }
.host-photo-panel .section-topline { align-items: flex-start; }
.host-photo-panel .section-topline .section-label { font-size: 7px; letter-spacing: 1.6px; line-height: 1.6; }
.host-photo-panel h2 { margin: 12px 0 0; font-size: 23px; line-height: 1.2; letter-spacing: -.5px; }
.host-photo-panel > .speech-toggle-row { margin-top: 22px; }
.host-photo-description { margin-bottom: 19px; color: #b69ccf; font-size: 11px; line-height: 1.8; }
.host-photo-description strong { color: #d9c2ef; font-weight: 650; }
.photo-gallery-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.host-photo-gallery { max-height: 465px; margin-top: 18px; padding: 16px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid #a980e355; background: #10071b; scrollbar-width: thin; scrollbar-color: #8c5bb4 transparent; }
.photo-gallery-selection { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; color: #b69ccf; font-size: 10px; }
.photo-gallery-selection > div { display: flex; gap: 8px; }
.photo-gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.photo-gallery-item { position: relative; display: block; min-width: 0; overflow: hidden; border: 1px solid #9c71cd55; background: #1b102b; cursor: pointer; }
.photo-gallery-item > input { position: absolute; z-index: 1; top: 8px; left: 8px; width: 19px; height: 19px; margin: 0; accent-color: var(--gold); cursor: pointer; }
.photo-gallery-item:focus-within { outline: 3px solid var(--gold); outline-offset: 3px; }
.photo-gallery-item > img { display: block; width: 100%; height: 120px; object-fit: contain; background: #06030d; }
.photo-gallery-item > span { display: block; padding: 10px 11px; color: #c2acd5; font-size: 9px; line-height: 1.5; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.photo-gallery-item > b { position: absolute; right: 7px; top: 7px; display: grid; place-items: center; width: 22px; height: 22px; color: #c4a6df; border: 1px solid #b48ae866; background: #21112ce8; font-size: 14px; }
.photo-gallery-item.selected { border-color: #ddff0099; box-shadow: inset 0 -3px var(--gold); }
.photo-gallery-item.selected > b { color: #170b23; border-color: var(--gold); background: var(--gold); }
.photo-gallery-item > .photo-gallery-placeholder { height: 120px; display: grid; place-items: center; }
.photo-gallery-more { margin-top: 17px; }
.photo-gallery-save { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 22px; padding-top: 19px; border-top: 1px solid #a980e333; }
.photo-gallery-save > span { max-width: 48%; color: #b69ccf; font-size: 10px; line-height: 1.7; }
.photo-gallery-save .button { flex: 0 0 auto; font-size: 11px; }
.photo-library-empty { padding: 17px; margin: 18px 0; border: 1px dashed #a980e355; color: #a58aba; font-size: 11px; line-height: 1.8; }
.host-panel .photo-heading { gap: 17px; }
.host-panel .photo-heading h1 { font-size: clamp(31px, 3.1vw, 47px); }
.host-panel .photo-heading .section-label { font-size: 7px; letter-spacing: 1.2px; }
.host-panel .photo-clock { width: 66px; min-height: 67px; }
.host-panel .photo-clock strong { font-size: 33px; }
.host-panel .photo-clock > span { font-size: 6px; letter-spacing: .5px; }
.host-panel .photo-duel-grid { grid-template-columns: 1fr; gap: 23px; }
.host-panel .photo-image-frame { height: 320px; }
.host-panel .photo-figure figcaption { font-size: 13px; }
.host-panel .photo-caption-call { padding: 0; }
.host-panel .photo-quote { height: 45px; font-size: 100px; }
.host-panel .photo-caption-call h2 { font-size: 40px; }
.host-panel .photo-caption-call > p { font-size: 13px; }
.host-panel .photo-submitted { margin-top: 20px; }
.host-panel .photo-submitted > strong { font-size: 49px; }
.host-panel .photo-anonymous-card > p { font-size: 15px; }
.host-panel .photo-speech > p { font-size: 14px; }
.host-panel .photo-round-status { font-size: 9px; }
.host-panel .photo-round-status strong { font-size: 7px; }

.view-play .photo-heading { gap: 14px; margin-top: 19px; margin-bottom: 18px; }
.view-play .photo-heading .section-label { font-size: 6px; line-height: 1.7; letter-spacing: 1.2px; }
.view-play .photo-heading h1 { margin-top: 12px; font-size: clamp(30px, 8vw, 44px); line-height: 1; }
.view-play .photo-clock { width: 61px; min-height: 65px; }
.view-play .photo-clock strong { font-size: 33px; }
.view-play .photo-clock > span { font-size: 5.5px; letter-spacing: .5px; }
.view-play .photo-round-status { align-items: flex-start; gap: 12px; margin-bottom: 19px; font-size: 9px; }
.view-play .photo-round-status strong { max-width: 111px; font-size: 6px; line-height: 1.7; letter-spacing: .8px; }
.view-play .photo-duel-grid { grid-template-columns: 1fr; gap: 24px; }
.view-play .photo-image-frame { height: clamp(190px, 35vh, 310px); padding: 5px; box-shadow: 5px 5px 0 #7c42cd29; }
.view-play .photo-figure figcaption { margin-top: 15px; font-size: 12px; line-height: 1.6; padding-left: 12px; }
.view-play .photo-caption-form { padding: 22px 18px; }
.view-play .photo-caption-form label > strong { font-size: 18px; }
.view-play .photo-caption-form .section-label { font-size: 8px; }
.view-play .photo-result-card { padding: 19px 17px; }
.view-play .photo-speech > p { margin-top: 24px; margin-bottom: 20px; font-size: 17px; line-height: 1.5; }
.view-play .photo-speech > .photo-entry-label { font-size: 7px; }
.view-play .photo-bonus { top: 15px; right: 15px; font-size: 26px; }
.view-play .photo-result-author { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 9px; }
.view-play .photo-result-author .avatar { width: 27px; height: 27px; font-size: 9px; }
.view-play .photo-result-author > strong { font-size: 12px; }
.view-play .photo-result-author > span:last-child { font-size: 10px; }
.view-play .photo-scoring-note { font-size: 10px; }
@media (max-width: 1100px) {
 .photo-duel-grid { gap: 22px; }
 .photo-anonymous-card, .photo-result-card { padding: 13px; }
 .photo-anonymous-card > p { font-size: 15px; }
 .photo-result-author { grid-template-columns: 20px minmax(0, 1fr) auto; gap: 5px; }
 .photo-result-author .avatar { width: 20px; height: 20px; font-size: 7px; }
 .photo-result-author > strong { font-size: 9px; }
 .photo-result-author > span:last-child { font-size: 8px; }
 .photo-heading h1 { font-size: 49px; }
}
@media (max-width: 800px) {
 .photo-duel-grid { grid-template-columns: 1fr; }
 .photo-image-frame { height: 350px; }
 .photo-caption-call { padding: 0; }
 .photo-caption-call h2 { font-size: 45px; }
 .photo-caption-call > p { font-size: 15px; }
 .photo-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .photo-gallery-save { align-items: stretch; flex-direction: column; }
 .photo-gallery-save > span { max-width: none; }
}
@media (max-width: 560px) {
 .host-photo-panel { padding: 22px 17px; }
 .host-photo-panel h2 { font-size: 21px; }
 .host-photo-panel .count-badge { font-size: 9px; padding: 5px 7px; }
 .host-photo-panel .section-topline .section-label { font-size: 6px; letter-spacing: 1px; }
 .host-photo-description { font-size: 10px; }
 .host-photo-gallery { padding: 11px; max-height: 410px; }
 .photo-gallery-grid { gap: 9px; }
 .photo-gallery-item > img { height: 103px; }
 .photo-gallery-item > span { padding: 9px 7px; font-size: 8px; }
 .photo-gallery-selection { font-size: 9px; }
 .photo-gallery-selection .button { min-height: 36px; font-size: 10px; }
 .photo-gallery-toolbar .button { flex: 1 1 auto; font-size: 10px; }
 .photo-gallery-save { gap: 14px; }
 .photo-gallery-save > span { font-size: 9px; }
 .photo-gallery-save .button { min-height: 48px; }
 .photo-heading h1 { font-size: 36px; }
 .photo-heading .section-label { font-size: 7px; letter-spacing: 1px; }
 .photo-clock { width: 65px; min-height: 68px; }
 .photo-clock strong { font-size: 35px; }
 .photo-clock > span { font-size: 6px; }
 .photo-round-status { font-size: 10px; }
 .photo-round-status strong { font-size: 6px; letter-spacing: .7px; }
 .photo-image-frame { height: 270px; }
 .photo-board-cards { gap: 10px; }
 .photo-anonymous-card > p { font-size: 13px; }
 .photo-entry-label { font-size: 7px; }
 .photo-vote-card { padding: 17px 13px; gap: 12px; }
 .photo-vote-copy > strong { font-size: 16px; }
 .photo-vote-copy > small { font-size: 6px; letter-spacing: 1px; }
 .photo-vote-mark { width: 26px; height: 26px; font-size: 18px; }
 .photo-input-meta { font-size: 8px; }
 .photo-caption-form textarea { font-size: 18px; min-height: 133px; }
 .photo-logged { padding: 32px 22px; }
 .photo-logged h2 { font-size: 39px; }
 .photo-logged p { font-size: 13px; }
}
@media (max-width: 900px) {
 .view-play .photo-vote-form.has-photo-submit { padding-bottom: calc(135px + env(safe-area-inset-bottom, 0px)); }
 .view-play .photo-vote-submit { position: fixed; z-index: 65; left: 0; right: 0; bottom: 0; margin: 0; padding: 13px max(18px, calc((100vw - 540px)/2)) calc(15px + env(safe-area-inset-bottom, 0px)); border-top: 2px solid var(--gold); background: #1b0f2df7; box-shadow: 0 -13px 36px #080312cc; }
 .view-play .photo-vote-submit .button { min-height: 52px; font-size: 13px; }
}
@media (min-width: 900px) and (max-height: 850px) {
 .view-board .photo-heading { margin-bottom: 13px; gap: 18px; }
 .view-board .photo-heading h1 { font-size: clamp(43px, 4.6vw, 61px); margin-top: 12px; }
 .view-board .photo-heading .section-label { font-size: 7px; letter-spacing: 1.6px; }
 .view-board .photo-clock { width: 68px; min-height: 65px; padding: 6px; }
 .view-board .photo-clock strong { font-size: 35px; }
 .view-board .photo-clock > span { font-size: 6px; margin-top: 4px; }
 .view-board .photo-round-status { margin-bottom: 16px; padding: 8px 0; font-size: 9px; }
 .view-board .photo-round-status strong { font-size: 7px; }
 .view-board .photo-duel-grid { gap: 23px; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); }
 .view-board .photo-image-frame { height: clamp(265px, 43vh, 355px); padding: 5px; }
 .view-board .photo-figure figcaption { margin-top: 14px; font-size: 13px; line-height: 1.45; }
 .view-board .photo-caption-call { padding: 3px 12px 0 16px; }
 .view-board .photo-quote { height: 48px; font-size: 104px; }
 .view-board .photo-caption-call h2 { margin: 12px 0 15px; font-size: 45px; }
 .view-board .photo-caption-call > p { font-size: 14px; line-height: 1.55; }
 .view-board .photo-submitted { margin-top: 17px; padding-top: 14px; }
 .view-board .photo-submitted > strong { font-size: 48px; }
 .view-board .photo-submitted > span { font-size: 7px; letter-spacing: 1.4px; }
 .view-board .photo-board-instruction { margin-bottom: 12px; font-size: 11px; }
 .view-board .photo-board-cards { gap: 10px; }
 .view-board .photo-anonymous-card { padding: 13px; }
 .view-board .photo-anonymous-card > p { margin-top: 10px; font-size: 14px; line-height: 1.38; }
 .view-board .photo-entry-label { font-size: 7px; letter-spacing: 1px; }
 .view-board .photo-result-card { padding: 11px; }
 .view-board .photo-speech > p { margin-top: 15px; margin-bottom: 12px; font-size: 13px; line-height: 1.35; }
 .view-board .photo-speech > .photo-entry-label { font-size: 6px; letter-spacing: .8px; }
 .view-board .photo-bonus { top: 9px; right: 9px; font-size: 19px; }
 .view-board .photo-bonus > small { font-size: 5px; }
 .view-board .photo-result-author { grid-template-columns: 19px minmax(0, 1fr) auto; gap: 5px; }
 .view-board .photo-result-author .avatar { width: 19px; height: 19px; font-size: 6px; }
 .view-board .photo-result-author > strong { font-size: 8px; }
 .view-board .photo-result-author > span:last-child { font-size: 7px; }
 .view-board .photo-pages { margin-top: 6px; font-size: 7px; }
 .view-board .photo-page-dot { width: 24px; height: 24px; }
 .view-board .photo-scoring-note { font-size: 8px; margin-top: 10px; padding-top: 9px; line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) {
 .photo-clock, .photo-logged > span { transform: none; }
}

/* Reserve a real header for the points badge, including long captions. */
.photo-result-card .photo-speech { position: relative; padding-top: 34px; }
.photo-result-card .photo-speech > .photo-entry-label { position: absolute; top: 0; left: 0; right: 75px; max-width: none; }
.photo-result-card .photo-speech > p { margin-top: 0; }
@media (min-width: 900px) and (max-height: 850px) {
 .view-board:has(.photo-duel) .app-shell { padding-top: 11px; padding-bottom: 7px; }
 .view-board:has(.photo-duel) .app-header { padding-bottom: 7px; }
 .view-board:has(.photo-duel) .app-main { padding-top: 11px; }
 .view-board:has(.photo-duel) .app-footer { display: none; }
 .view-board .photo-heading { margin-bottom: 10px; }
 .view-board .photo-round-status { margin-bottom: 12px; padding-top: 7px; padding-bottom: 7px; }
 .view-board .photo-result-card .photo-speech { padding-top: 27px; }
 .view-board .photo-result-card .photo-speech > .photo-entry-label { right: 67px; }
 .view-board .photo-result-card .photo-speech > p { margin-top: 0; }
 .view-board:has(.photo-duel) .moderator { margin-top: 8px; padding: 7px 13px; gap: 10px; }
 .view-board:has(.photo-duel) .moderator-icon { width: 23px; height: 23px; font-size: 18px; }
 .view-board:has(.photo-duel) .moderator .section-label { margin-bottom: 3px; font-size: 7px; letter-spacing: 1px; }
 .view-board:has(.photo-duel) .moderator p { font-size: 11px; line-height: 1.3; -webkit-line-clamp: 2; }
}

/* Preparation: show format and read-only local photo preview. */
.show-mode-panel { padding: 27px; margin-bottom: 22px; }
.show-mode-panel h2 { margin: 8px 0 17px; font-size: 24px; }
.show-mode-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; margin: 16px 0; }
.show-mode-option { position: relative; display: flex; gap: 12px; padding: 19px; border: 1px solid var(--line); border-radius: 3px; background: #110b21; cursor: pointer; }
.show-mode-option:has(input:checked), .show-mode-option.selected { border-color: var(--gold); background: #ddff000c; }
.show-mode-option input { flex: 0 0 auto; accent-color: var(--gold); width: 20px; height: 20px; margin-top: 3px; }
.show-mode-option strong { display: block; color: white; font-size: 18px; }
.show-mode-option small, .show-mode-note { display: block; color: var(--muted); font-size: 12px; line-height: 1.6; margin-top: 7px; }
.show-mode-form select { padding: 12px; color: white; background: #110b21; border: 1px solid var(--line); border-radius: 3px; }
.photo-access-card { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 24px; margin: 20px 0; }
.photo-access-card h2 { margin: 10px 0; font-size: 23px; }
.photo-access-card p { font-size: 13px; line-height: 1.7; color: var(--muted); margin: 8px 0; }
.photo-access-card .button { flex-shrink: 0; }
.photo-preview-dialog { width: min(1000px, calc(100vw - 32px)); max-height: 93dvh; overflow-y: auto; }
.photo-preview-figure { margin: 20px 0; }
.photo-preview-figure img { display: block; width: 100%; height: min(54dvh, 570px); object-fit: contain; background: #080713; border: 1px solid var(--line); }
.photo-preview-figure figcaption { color: var(--muted); font-size: 11px; margin-top: 9px; overflow-wrap: anywhere; }
.photo-preview-nav { display: flex; gap: 13px; justify-content: space-between; align-items: center; }
.photo-preview-nav > span { color: var(--gold); font-weight: 800; white-space: nowrap; }
@media(max-width: 700px) { .show-mode-options { grid-template-columns: 1fr; } .photo-access-card { flex-direction: column; align-items: stretch; } .photo-preview-nav { flex-wrap: wrap; } .photo-preview-nav .button { flex: 1; font-size: 11px; padding: 12px 8px; } .show-mode-panel { padding: 20px; } }
.board-rejoin{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;padding:4px 10px 4px 4px;background:#161126;border:1px solid #a78ad155;flex-shrink:0}
.board-rejoin[hidden]{display:none}
.board-rejoin img{display:block;width:78px;height:78px;background:white;padding:3px;box-sizing:content-box}
.board-rejoin span{font-size:9px;letter-spacing:1px;display:grid;gap:4px}
.board-rejoin strong{font-size:20px;color:#ddff00;letter-spacing:3px}
.board-rejoin small{font-size:8px;letter-spacing:0;color:#c4bed7}
@media(max-width:1100px){.board-rejoin img{width:62px;height:62px}.board-rejoin span{font-size:8px}.board-rejoin small{display:none}.view-board .header-meta{gap:8px}}