:root {
  --ink: #fff;
  --muted: #c9c1e5;
  --bg: #160f38;
  --panel: #241957;
  --panel-2: #30216d;
  --orange: #ff9f1c;
  --violet: #b85cff;
  --audience-ink: #d49aff;
  --pink: #f30f8d;
  --green: #63e6be;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: radial-gradient(circle at 70% 15%, #3a1b66 0, var(--bg) 50%); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input { font: inherit; }
button { border: 0; border-radius: 10px; background: var(--orange); color: #1b1235; cursor: pointer; font-weight: 800; padding: .9rem 1.2rem; }
button:hover { filter: brightness(1.08); }
button:disabled { cursor: not-allowed; filter: grayscale(.6); opacity: .5; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
input, textarea, select { border: 1px solid #655596; border-radius: 8px; background: #130d32; color: var(--ink); padding: .8rem; width: 100%; }
textarea { min-height: 75px; resize: vertical; }
a { color: #ffc15c; }
.shell { min-height: 100vh; padding: 2rem; }
.narrow { margin: 0 auto; max-width: 680px; }
.wide { margin: 0 auto; max-width: 1200px; }
.brand { color: var(--orange); font-size: .8rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
h1 { font-size: clamp(2rem, 5vw, 4.8rem); line-height: 1; margin: .55rem 0 1rem; }
h2 { margin: 0 0 .8rem; }
p { color: var(--muted); line-height: 1.5; }
.card { background: rgba(36, 25, 87, .9); border: 1px solid #49367f; border-radius: 18px; padding: 1.3rem; box-shadow: 0 18px 50px rgba(0,0,0,.22); }
.stack { display: grid; gap: 1rem; }
.row { align-items: center; display: flex; flex-wrap: wrap; gap: .7rem; }
.row > * { flex: 1; }
.label { color: var(--muted); display: block; font-size: .8rem; font-weight: 800; letter-spacing: .04em; margin-bottom: .35rem; text-transform: uppercase; }
.error { background: #5e163f; border: 1px solid #ef569e; border-radius: 8px; color: white; padding: .7rem; }
.success { background: #16483f; border: 1px solid var(--green); border-radius: 8px; color: white; padding: .7rem; }
.muted { color: var(--muted); }
.center { text-align: center; }
.big-input { font-size: 2rem; font-variant-numeric: tabular-nums; text-align: center; }
.answer-state { border: 1px solid var(--role-color); border-radius: 12px; color: var(--role-color); display: grid; gap: 6px; padding: 20px 16px; text-align: center; }
.answer-state strong { font-size: clamp(32px, 10vw, 48px); line-height: 1.1; }
.answer-state .label { color: var(--role-color); margin: 0; }
.answer-state small { color: var(--muted); font-size: 14px; line-height: 1.4; margin-top: 10px; }
.phone-question { font-size: clamp(22px, 5.6vw, 30px); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.phone-meta { color: var(--muted); font-size: 1rem; margin: 0; }
.phone-context, .screen-context { color: var(--muted); font-size: .95rem; line-height: 1.45; margin: -.5rem 0 0; }
.phone-shell { display: grid; min-height: 100vh; place-items: center; padding: 1rem; }
.phone-shell .card { width: min(100%, 560px); }
.phone-shell[data-role] { --role-color: var(--orange); align-items: start; padding-top: max(24px, env(safe-area-inset-top)); }
.phone-shell[data-role="audience"] { --role-color: var(--audience-ink); }
.phone-role { color: var(--role-color); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.phone-shell[data-role] h1, .phone-shell[data-role] p, .phone-shell[data-role] dd, .phone-shell[data-role] strong { overflow-wrap: anywhere; }
.phone-shell[data-role] .card { background: var(--panel); box-shadow: none; }
.phone-shell[data-role="audience"] .card.phone-card-lobby { display: flex; flex-direction: column; gap: 1rem; min-height: calc(100svh - max(24px, env(safe-area-inset-top)) - 1rem); }
.phone-card-lobby .phone-lobby-screen { display: flex; flex: 1; flex-direction: column; }
.phone-card-lobby .phone-lobby-activity { margin-top: auto; }
.phone-card-lobby #connection-state { margin-top: .25rem; }
.phone-shell[data-role] input { border-color: #9384b4; font-size: 18px; }
.phone-shell[data-role] input::placeholder { color: #b7adc9; opacity: 1; }
.phone-shell[data-role="audience"] .phone-scale-marker { background: var(--violet); }
.answer-state strong, .phone-correct strong, .phone-result-stats dd, .phone-final-scores strong { font-variant-numeric: tabular-nums; }
.phone-result { display: grid; gap: 18px; }
.phone-correct { background: #fff; color: var(--bg); border-radius: 12px; padding: 18px 16px; display: grid; gap: 6px; text-align: center; }
.phone-correct > span:first-child { text-transform: uppercase; font-size: 12px; font-weight: 800; letter-spacing: .09em; }
.phone-correct strong { font-size: clamp(36px, 11vw, 52px); line-height: 1.1; font-weight: 800; }
.phone-correct > span:last-child { font-size: 16px; }
.phone-outcome h2 { font-size: 26px; line-height: 1.15; letter-spacing: -.025em; margin: 0 0 8px; }
.phone-outcome p, .phone-explanation, .phone-no-answer { font-size: 15px; line-height: 1.5; margin: 0; }
.phone-result[data-winner="audience"] h2, .final-compact[data-winner="audience"] h1, .phone-final-scores .audience { color: var(--audience-ink); }
.phone-result[data-winner="contestant"] h2, .final-compact[data-winner="contestant"] h1, .phone-final-scores .contestant { color: var(--orange); }
.phone-result-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid #655596; border-bottom: 1px solid #655596; gap: 14px; padding: 16px 0; margin: 0; }
.phone-result-stats dt { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.phone-result-stats dd { margin: 0; font-size: 26px; line-height: 1.2; font-weight: 700; }
.phone-result-stats small { color: var(--muted); display: block; font-size: 13px; margin-top: 4px; font-weight: 400; }
.phone-final-scores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 24px 0; }
.phone-final-scores > div { display: grid; gap: 8px; }
.phone-final-scores span { font-size: 14px; }
.phone-final-scores strong { font-size: 48px; line-height: 1.1; }
.phone-enter .answer-state, .phone-enter .phone-correct { animation: phone-receipt .4s cubic-bezier(.22, 1, .36, 1) both; }
.phone-enter .phone-outcome { animation: phone-receipt .4s cubic-bezier(.22, 1, .36, 1) both; }
.phone-enter .phone-result-stats { animation: phone-receipt .4s .12s cubic-bezier(.22, 1, .36, 1) both; }
.phone-enter .phone-explanation, .phone-enter .phone-result > a { animation: phone-receipt .4s .85s cubic-bezier(.22, 1, .36, 1) both; }
.phone-enter .final-compact { animation: phone-receipt .5s cubic-bezier(.22, 1, .36, 1) both; }
.result-pending > :not(.phone-correct) { visibility: hidden; }
.result-pending .phone-outcome, .result-pending .phone-result-stats, .result-pending .phone-explanation, .phone-enter .result-pending > a { animation: none; }
@keyframes phone-receipt { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.phone-shell button { min-height: 52px; width: 100%; }
.phone-shell .error { margin-top: .25rem; }
.interpreted { background: #130d32; border: 1px solid #49367f; border-radius: 8px; color: var(--muted); padding: .7rem; text-align: center; }
.phone-scale { padding: .8rem .2rem 1.5rem; }
.phone-scale-track { background: #eae7f6; border-radius: 999px; height: 8px; position: relative; }
.phone-scale-marker { background: var(--orange); border: 2px solid white; border-radius: 50%; height: 18px; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 18px; }
.phone-scale-labels { color: var(--muted); display: flex; font-size: .8rem; justify-content: space-between; margin-top: .55rem; }
.connection { color: var(--muted); font-size: .8rem; text-align: center; }
.connection.online { color: var(--green); }
.connection.offline { color: var(--orange); }
.screen {
  --ease-stage: cubic-bezier(.22, 1, .36, 1);
  min-height: 100svh; padding: clamp(20px, 3vh, 40px) clamp(24px, 4vw, 80px);
  position: relative; isolation: isolate; display: flex; flex-direction: column;
  background: radial-gradient(ellipse at 12% 0%, #ff9f1c12, transparent 44%), radial-gradient(ellipse at 90% 60%, #8736d820, transparent 55%), #160f38;
}
.screen::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(120deg, transparent 35%, #ffffff03 35%, #ffffff03 35.15%, transparent 35.15%, transparent 70%, #ffffff03 70%, #ffffff03 70.15%, transparent 70.15%); }
.screen-head { align-items: center; display: flex; justify-content: space-between; gap: 24px; min-height: 40px; }
.screen-head .brand { font-size: clamp(12px, 1vw, 18px); letter-spacing: .16em; }
.screen-head .brand span { color: var(--muted); margin-left: .7em; font-weight: 500; }
.scoreboard, .final-scores { align-items: center; display: flex; gap: clamp(16px, 2vw, 36px); font-variant-numeric: tabular-nums; }
.score-side { align-items: center; display: flex; gap: 14px; }
.score-side span { text-transform: uppercase; letter-spacing: .1em; font-size: clamp(10px, 1vw, 16px); font-weight: 750; }
.score-side strong { font-size: clamp(24px, 2.2vw, 40px); line-height: 1; }
.score-side.contestant { color: var(--orange); }
.score-side.audience { color: var(--audience-ink); }
.score-divider { color: #a89bc9; font-size: 11px; letter-spacing: .12em; }
.screen-controls { position: fixed; bottom: 10px; right: 16px; z-index: 20; max-width: calc(100vw - 32px); font-size: 12px; }
.screen-controls summary { cursor: pointer; color: var(--muted); padding: 8px 12px; opacity: .75; text-align: right; transition: opacity .2s; }
.screen-controls:hover summary, .screen-controls:focus-within summary, .screen-controls[open] summary { opacity: 1; }
.screen-control-panel { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: #241957; border: 1px solid #655596; border-radius: 12px; padding: 12px; box-shadow: 0 10px 30px #0006; }
.screen-connection.online { color: var(--green); }
.screen-connection.offline { color: var(--orange); }
.screen-controls:has(.offline) summary { opacity: 1; background: var(--bg); border-radius: 8px; }
.volume-label { align-items: center; color: var(--muted); display: flex; font-size: .8rem; gap: .4rem; }
.volume-label input { padding: 0; width: 100px; }
#screen-stage { flex: 1; display: grid; position: relative; margin-top: clamp(16px, 3vh, 36px); }
.screen-scene, .scene-outgoing { min-width: 0; display: grid; }
.scene-outgoing { position: absolute; inset: 0 0 auto; pointer-events: none; }
.motion-settled *, .motion-settled *::before, .motion-settled *::after { animation: none !important; }
.eyebrow { color: var(--orange); font-size: clamp(12px, 1.05vw, 18px); text-transform: uppercase; letter-spacing: .16em; font-weight: 750; }
.eyebrow span { color: var(--muted); font-weight: 450; }
.round-scene { display: flex; flex-direction: column; min-height: calc(100svh - 150px); }
.question-block { text-align: center; transition: opacity .5s ease; }
.stage-content[data-phase="revealing"] .question-block, .stage-content[data-phase="result"] .question-block { opacity: .78; }
.stage-content[data-phase="revealing"] .marker.correct .tag { box-shadow: 0 0 28px #ffffff25, 0 6px 22px #0003; }
.screen-question { font-size: clamp(28px, 3.2vw, 62px); line-height: 1.12; margin: 12px auto 0; max-width: 1480px; font-weight: 750; letter-spacing: -.025em; text-wrap: balance; overflow-wrap: anywhere; }
.screen-context { font-size: clamp(15px, 1.3vw, 24px); line-height: 1.4; margin: 10px auto 0; max-width: 1150px; text-align: center; text-wrap: balance; }
.screen-status { position: relative; display: flex; flex-direction: column; gap: 5px; align-items: center; justify-content: center; min-height: clamp(56px, 8vh, 90px); text-align: center; margin-top: 6px; }
.screen-status strong { color: white; font-size: clamp(18px, 1.65vw, 30px); font-weight: 650; }
.screen-status > span { min-height: 1.4em; color: var(--muted); font-size: clamp(13px, 1.1vw, 20px); font-variant-numeric: tabular-nums; }
.screen-status .text-outgoing { position: absolute; pointer-events: none; }
.stage-content[data-phase="voting"] .status-headline { color: var(--green); }
.stage-content[data-phase="voting"] .status-headline::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin: 0 12px 3px 0; animation: voting-breathe 2.4s ease-in-out infinite; }
.stage-content[data-phase="locked"] .status-headline { color: var(--orange); }
.scale-wrap { --lane: clamp(65px, 8.7vh, 96px); --tag-height: clamp(46px, 6.5vh, 70px); flex: 1; min-height: clamp(232px, 32vh, 360px); position: relative; margin: 0 1.2vw; }
.scale-unit { position: absolute; top: 5px; right: 0; color: var(--muted); font-size: clamp(11px, 1vw, 17px); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; max-width: 30%; text-align: right; overflow-wrap: anywhere; }
.scale { isolation: isolate; border-radius: 999px; height: 6px; position: absolute; left: 0; right: 0; top: calc(50% + 15px); }
.scale::after { content: ''; position: absolute; inset: 0; z-index: -1; background: #897aa8; border-radius: inherit; transform-origin: left; }
.scale::before { content: ''; position: absolute; inset: -9px 0; background: repeating-linear-gradient(90deg, #9c8ebb66 0 1px, transparent 1px 2.5%); pointer-events: none; }
.scale-fill { background: linear-gradient(90deg, #c9c1e5, #fff); border-radius: 999px; height: 8px; margin-top: -1px; width: 100%; transform: scaleX(0); transform-origin: left; box-shadow: 0 0 12px #ffffff35; }
.scale-tick { background: #ded8ec; top: -5px; height: 16px; position: absolute; width: 2px; }
.scale-tick span { color: var(--muted); font-size: clamp(12px, 1.2vw, 22px); position: absolute; top: 42px; transform: translateX(-50%); white-space: nowrap; font-variant-numeric: tabular-nums; }
.scale-tick.edge-left span { transform: none; }
.scale-tick.edge-right span { transform: translateX(-100%); }
.marker { --marker-color: white; --label-clip: inset(100% 0 0); --label-offset: 6px; position: absolute; left: 0; top: 3px; width: 0; height: 0; visibility: hidden; z-index: 2; }
.marker.visible { visibility: visible; }
.marker .pin { background: var(--marker-color); border: 2px solid var(--bg); border-radius: 50%; height: 20px; width: 20px; position: absolute; left: -10px; top: -10px; z-index: 2; }
.marker .stem { position: absolute; width: 2px; left: -1px; background: var(--marker-color); top: calc(var(--tag-y) + var(--tag-height)); height: calc(-1 * var(--tag-y) - var(--tag-height)); pointer-events: none; transform-origin: bottom; z-index: 0; }
.marker .tag { position: absolute; top: var(--tag-y); height: var(--tag-height); width: clamp(150px, 17vw, 300px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 7px; background: var(--marker-color); color: #160f38; text-align: center; padding: 5px 10px; box-shadow: 0 6px 22px #0003; }
.marker-label { font-size: clamp(10px, 1vw, 17px); line-height: 1; flex-shrink: 0; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.marker-label::before { content: ''; display: inline-block; width: .7em; height: .7em; margin-right: .5em; background: currentColor; }
.marker.contestant .marker-label::before { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.marker.audience .marker-label::before { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.marker.correct .marker-label::before { background: transparent; border: 2px solid currentColor; border-radius: 50%; }
.marker-value { width: 100%; font-size: clamp(18px, 2vw, 36px); line-height: 1; flex-shrink: 0; font-weight: 850; font-variant-numeric: tabular-nums; white-space: nowrap; }
.marker.contestant { --marker-color: var(--orange); --tag-y: calc(-2 * var(--lane)); }
.marker.contestant .pin { top: -31px; height: 18px; border: 0; border-radius: 0; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.marker.audience { --marker-color: var(--violet); --tag-y: clamp(68px, 7.2vh, 80px); --label-clip: inset(0 0 100%); --label-offset: -6px; }
.marker.audience .pin { top: 13px; border: 0; border-radius: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.marker.audience .stem { top: 0; height: var(--tag-y); transform-origin: top; background: repeating-linear-gradient(to bottom, var(--marker-color) 0 5px, transparent 5px 9px); }
.marker.correct { --tag-y: calc(-1 * var(--lane) - 14px); z-index: 3; }
.marker.correct .pin { width: 26px; height: 26px; left: -13px; top: -13px; border: 3px solid white; background: var(--bg); box-shadow: 0 0 0 2px var(--bg), 0 0 18px #ffffff50; }
.marker.correct .pin::before { content: ''; position: absolute; inset: 6px; background: white; border-radius: 50%; }
/* Leave the upper pin lane clear when the answer meets the contestant's guess. */
.marker.correct .stem { width: 3px; left: -1.5px; height: max(0px, calc(-1 * var(--tag-y) - var(--tag-height) - 33px)); }
.marker.correct::before { content: ''; position: absolute; right: 0; top: -4px; width: 140px; height: 8px; transform: scaleX(var(--wake-scale, 0)); transform-origin: right; background: linear-gradient(90deg, transparent, white); box-shadow: 0 0 14px #ffffff45; opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.stage-content[data-phase="revealing"] .marker.correct:not(.landed)::before { opacity: 1; }
.marker.visible .tag { animation: label-unfold .36s .14s var(--ease-stage) backwards; }
.marker.visible .pin { animation: pin-in .22s var(--ease-stage) backwards; }
.marker.visible .stem { animation: stem-in .26s .06s var(--ease-stage) backwards; }
.marker.visible .marker-label, .marker.visible .marker-value { animation: fade-in .2s .3s ease-out backwards; }
.marker.correct.landed .pin::after { content: ''; position: absolute; inset: -6px; opacity: 0; border: 2px solid white; border-radius: 50%; animation: answer-land .65s ease-out both; }
.marker.correct.landed .marker-value { animation: answer-value .5s var(--ease-stage) backwards; }
.result { min-height: clamp(126px, 17vh, 186px); max-width: 1320px; width: 100%; margin: 0 auto; text-align: center; }
.winner { font-size: clamp(30px, 3.7vw, 68px); line-height: 1.1; font-weight: 850; letter-spacing: -.035em; }
.result[data-winner="contestant"] .winner, .final-screen[data-winner="contestant"] h1 { color: var(--orange); }
.result[data-winner="audience"] .winner, .final-screen[data-winner="audience"] h1 { color: var(--audience-ink); }
.distances { color: var(--muted); font-size: clamp(13px, 1.2vw, 22px); font-variant-numeric: tabular-nums; margin-top: 10px; }
.screen-explanation { color: #e4deef; font-size: clamp(14px, 1.2vw, 23px); line-height: 1.4; margin: 12px auto 0; max-width: 1100px; text-wrap: balance; overflow-wrap: anywhere; }
.screen-explanation a { font-size: .8em; white-space: nowrap; }
.result-visible .winner { animation: title-reveal .6s var(--ease-stage) backwards; }
.result-visible .distances { animation: fade-in .45s .25s ease-out backwards; }
.explanation-visible .screen-explanation { animation: text-reveal .5s var(--ease-stage) backwards; }
.final-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(20px, 4vh, 48px); text-align: center; min-height: calc(100svh - 150px); }
.final-screen h1 { font-size: clamp(56px, 8vw, 150px); line-height: 1.02; max-width: 1400px; margin: 0; text-wrap: balance; letter-spacing: -.055em; }
.final-scores { gap: clamp(24px, 5vw, 90px); }
.final-scores .score-side { flex-direction: column; gap: 14px; }
.final-scores .score-side strong { font-size: clamp(72px, 8vw, 150px); order: -1; }
.final-scores .score-side span { font-size: clamp(13px, 1.5vw, 26px); }
.final-scores .score-divider { font-size: 32px; }
.final-screen p { font-size: clamp(17px, 1.7vw, 30px); margin: 0; }
[data-phase="finished"] .screen-head .scoreboard { visibility: hidden; }
.final-compact { padding: 1rem 0; }
.final-compact h1 { font-size: clamp(2.2rem, 12vw, 4.8rem); }
.screen-error, .host-error { margin: 0 auto 1rem; max-width: 760px; }
.screen-error { position: relative; z-index: 30; }
.short-url { display: grid; gap: .25rem; margin-top: 1rem; overflow-wrap: anywhere; }
.short-url span { color: var(--muted); font-size: .85rem; font-weight: 800; text-transform: uppercase; }
.short-url strong { color: var(--orange); font-size: clamp(1rem, 2vw, 1.5rem); }
.button { border-radius: 10px; cursor: pointer; display: inline-block; font-weight: 800; padding: .9rem 1.2rem; text-align: center; text-decoration: none; }
.host-nav { align-items: center; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: 1.2rem; }
.host-header-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.host-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); }
.host-contextbar { align-items: center; background: #100b29; border: 1px solid #49367f; border-radius: 12px; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: 1rem; padding: .8rem 1rem; }
.host-contextbar .label { display: inline; margin-right: .45rem; }
.host-tabs { border-bottom: 1px solid #49367f; display: flex; gap: .35rem; margin-bottom: 1rem; }
.host-tab { background: transparent; border-radius: 10px 10px 0 0; color: var(--muted); padding: .8rem 1rem; }
.host-tab[aria-selected="true"] { background: var(--panel-2); color: white; }
#host-tab-content { display: grid; gap: 1rem; }
.host-live-stack { display: grid; gap: 1rem; }
.live-toolbar { align-items: center; display: flex; gap: 1rem; justify-content: space-between; }
.live-toolbar .label { margin-bottom: .1rem; }
.live-toolbar-actions { display: flex; gap: .5rem; }
.phase-panel { background: linear-gradient(135deg, #30216d, #241957); border: 1px solid #655596; border-radius: 14px; padding: 1rem; }
.phase-panel > strong { display: block; font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1; text-transform: capitalize; }
.phase-steps { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: 1rem; }
.phase-step { background: #130d32; border: 1px solid #49367f; border-radius: 999px; color: var(--muted); font-size: .75rem; padding: .35rem .55rem; text-transform: capitalize; }
.phase-step.active { background: var(--orange); border-color: var(--orange); color: #1b1235; font-weight: 800; }
.phase-step.done { border-color: var(--green); color: var(--green); }
.live-question { background: #130d32; border: 1px solid #49367f; border-radius: 10px; padding: .8rem; }
.live-question strong { display: block; font-size: 1.1rem; }
.primary-action { background: #16483f; border: 1px solid var(--green); border-radius: 12px; padding: 1rem; }
.primary-button { font-size: 1.05rem; min-height: 56px; width: 100%; }
.primary-action p { margin: .65rem 0 0; text-align: center; }
.host-live-state { min-height: 1.2rem; text-align: center; }
.host-finished { max-width: 720px; }
.host-final-score { display: grid; gap: .7rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.host-final-score > div { background: #130d32; border: 1px solid #49367f; border-radius: 10px; display: grid; gap: .25rem; padding: 1rem; text-align: center; }
.host-final-score span { color: var(--muted); font-size: .8rem; font-weight: 800; text-transform: uppercase; }
.host-final-score strong { color: var(--orange); font-size: 2rem; }
.readiness-grid { display: grid; gap: .6rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.readiness-item { background: #130d32; border: 1px solid #49367f; border-radius: 10px; display: grid; gap: .35rem; padding: .7rem; }
.readiness-item > span { color: var(--muted); font-size: .8rem; font-weight: 800; text-transform: uppercase; }
.readiness-item .status-chip { width: 100%; }
.pairing-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pairing-details { border-top: 1px solid #49367f; padding-top: .8rem; }
.pairing-details summary { color: var(--muted); cursor: pointer; font-weight: 800; }
.pairing-details[open] summary { color: white; margin-bottom: .8rem; }
.qr-panel { align-items: center; background: #130d32; border: 1px solid #49367f; border-radius: 12px; display: grid; gap: .6rem; justify-items: center; padding: 1rem; text-align: center; }
.qr-panel .label { margin: 0; }
.qr-panel .qr { margin: 0 auto; max-width: 220px; }
.qr-panel small { color: var(--muted); }
.question-summary { color: var(--muted); font-size: .9rem; }
.question-summary strong { color: white; font-size: 1.15rem; }
.ready-text { color: var(--green); }
.draft-text { color: var(--muted); }
.section-kicker, .form-kicker { color: var(--orange); display: block; font-size: .7rem; font-weight: 900; letter-spacing: .1em; margin-bottom: .3rem; text-transform: uppercase; }
.question-bank-header { align-items: flex-start; }
.question-bank-header p { margin: .35rem 0 0; }
.question-toolbar { align-items: center; display: flex; gap: 1rem; justify-content: space-between; }
.question-filters, .question-tools { align-items: center; display: flex; flex-wrap: wrap; gap: .35rem; }
.question-filter { background: transparent; border: 1px solid #655596; color: var(--muted); font-size: .85rem; padding: .5rem .7rem; }
.question-filter[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: #1b1235; }
.question-tools a { font-size: .9rem; }
.question-editor { background: #130d32; border: 1px solid #49367f; border-radius: 12px; padding: 1rem; }
.question-editor h3, .question-editor h4 { margin: 0; }
.form-section + .form-section { border-top: 1px solid #49367f; padding-top: 1rem; }
.form-section-heading { align-items: flex-start; display: flex; gap: 1rem; justify-content: space-between; }
.form-section-heading p { margin: .35rem 0 0; }
.form-details-copy { display: grid; gap: .2rem; }
.form-details-copy strong { font-size: 1rem; }
.form-details-copy small { color: var(--muted); }
.question-editor details summary { cursor: pointer; list-style: none; }
.question-editor details summary::-webkit-details-marker { display: none; }
.details-toggle { color: var(--muted); font-size: .8rem; font-weight: 800; }
.details-toggle::after { content: 'Show'; }
.question-editor details[open] .details-toggle::after { content: 'Hide'; }
.form-details-content { border-top: 1px solid #49367f; margin-top: .9rem; padding-top: .9rem; }
.field-help { color: var(--muted); display: block; font-size: .78rem; line-height: 1.35; margin-top: .35rem; }
.question-preview { background: linear-gradient(135deg, #30216d, #241957); border: 1px solid #655596; border-radius: 10px; padding: .9rem; }
.question-preview strong { display: block; font-size: 1.15rem; line-height: 1.25; }
.question-preview p { margin: .55rem 0 0; }
.question-preview-context { color: white; font-size: .9rem; }
.editor-status { border: 1px solid #655596; border-radius: 999px; color: var(--muted); font-size: .82rem; padding: .45rem .7rem; }
.editor-status.ready { border-color: var(--green); color: var(--green); }
.editor-status.invalid { border-color: #ef569e; color: #ff9dcc; }
.question-form-actions { align-items: center; border-top: 1px solid #49367f; display: flex; gap: 1rem; justify-content: space-between; padding-top: 1rem; }
.question-form-actions .row { flex: 0 0 auto; }
.question-form-actions .row > * { flex: 0 0 auto; }
.empty-list { color: var(--muted); display: grid; gap: .35rem; padding: 2rem 1rem; place-items: center; text-align: center; }
.empty-state { min-height: 260px; place-content: center; text-align: center; }
.host-more { border-top: 1px solid #49367f; padding-top: .8rem; }
.host-more summary { color: var(--muted); cursor: pointer; font-weight: 800; }
.host-more .host-action { margin-top: .8rem; }
.section-head { align-items: center; display: flex; gap: 1rem; justify-content: space-between; }
.room-code { font-size: 2rem; font-variant-numeric: tabular-nums; }
.status-grid { display: grid; gap: .5rem; grid-template-columns: repeat(3, 1fr); }
.status-chip { background: #130d32; border: 1px solid #49367f; border-radius: 8px; color: var(--muted); font-size: .78rem; padding: .55rem; text-align: center; }
.status-chip.good { border-color: var(--green); color: var(--green); }
.status-chip.bad { border-color: #8d4870; color: var(--muted); }
.question-list { display: grid; gap: .55rem; margin-top: 1rem; }
.question-item { align-items: center; background: var(--panel-2); border-radius: 10px; display: flex; gap: .7rem; justify-content: space-between; padding: .75rem; }
.question-order { align-items: center; background: #49367f; border-radius: 50%; color: var(--muted); display: flex; flex: 0 0 2rem; font-size: .8rem; font-weight: 800; height: 2rem; justify-content: center; }
.question-main { min-width: 0; }
.question-title { align-items: center; display: flex; flex-wrap: wrap; gap: .55rem; }
.question-title strong { overflow-wrap: anywhere; }
.question-badge { border: 1px solid; border-radius: 999px; font-size: .68rem; font-weight: 900; padding: .2rem .45rem; text-transform: uppercase; }
.question-badge.ready { border-color: var(--green); color: var(--green); }
.question-badge.draft { border-color: #7964a7; color: var(--muted); }
.question-item small { color: var(--muted); display: block; }
.question-meta { overflow-wrap: anywhere; }
.question-buttons { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; }
.question-buttons button { padding: .5rem .65rem; }
.file-button { color: #ffc15c; cursor: pointer; }
.fallback-form { border: 1px solid var(--orange); border-radius: 10px; padding: .8rem; }
.link-box { background: #100b29; border: 1px dashed #7964a7; border-radius: 10px; font-size: .85rem; overflow-wrap: anywhere; padding: .7rem; }
.qr { background: white; border-radius: 12px; display: block; max-width: 240px; padding: .5rem; width: 100%; }
.host-action { display: grid; gap: .55rem; grid-template-columns: repeat(2, minmax(0,1fr)); }
.host-action button { min-height: 54px; }
.danger { background: #a52855; color: white; }
.ghost { background: #49367f; color: white; }
.field-grid { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field-grid .full { grid-column: 1 / -1; }
.lobby { align-items: center; display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, 28%); gap: 5vw; min-height: calc(100svh - 160px); padding-bottom: 30px; }
.lobby-copy { max-width: 1050px; }
.screen-title { font-size: clamp(64px, 8.6vw, 168px); line-height: .95; font-weight: 850; letter-spacing: -.06em; margin: 25px 0; }
.screen-title > span { color: var(--orange); }
.screen-title em { font-style: normal; color: #d49aff; }
.screen-title small { font-size: .35em; vertical-align: middle; letter-spacing: -.03em; font-weight: 450; color: var(--muted); }
.intermission .screen-title { font-size: clamp(52px, 6.5vw, 126px); }
.lobby-instruction { color: #e5dfef; font-size: clamp(20px, 2vw, 36px); line-height: 1.45; max-width: 700px; }
.lobby-attendance { display: flex; align-items: center; gap: 12px; margin-top: 30px; color: var(--muted); font-size: clamp(15px, 1.4vw, 25px); font-variant-numeric: tabular-nums; }
.live-dot { width: 8px; height: 8px; background: var(--green); border-radius: 50%; }
.join-panel { text-align: center; background: #ffffff06; border: 1px solid #ffffff18; border-radius: 20px; padding: clamp(18px, 2vw, 36px); }
.lobby .qr { width: 100%; max-width: 360px; border-radius: 10px; display: block; margin: 0 auto; }
.join-title { font-size: clamp(18px, 1.8vw, 32px); font-weight: 750; margin-top: 22px; }
.room-code-block { display: flex; flex-direction: column; gap: 6px; margin: 20px 0 0; }
.room-code-block span { color: var(--muted); font-size: clamp(11px, 1vw, 16px); text-transform: uppercase; letter-spacing: .12em; }
.room-code-block strong { color: var(--orange); font-size: clamp(24px, 2.8vw, 48px); letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.join-panel .short-url { color: var(--muted); font-size: clamp(11px, 1vw, 17px); line-height: 1.5; margin-bottom: 0; }
.fallback-join { color: var(--muted); }
.fallback-join summary { cursor: pointer; }
@media (max-width: 800px) {
  .shell, .screen { padding: 1rem; }
  .host-grid, .lobby { grid-template-columns: 1fr; }
  .host-nav { align-items: stretch; flex-direction: column; }
  .host-header-actions { width: 100%; }
  .host-header-actions button { flex: 1; }
  .host-contextbar, .live-toolbar { align-items: stretch; flex-direction: column; }
  .live-toolbar-actions .button { width: 100%; }
  .readiness-grid, .pairing-grid { grid-template-columns: 1fr; }
  .question-item { align-items: stretch; flex-direction: column; }
  .question-toolbar, .form-section-heading { align-items: stretch; flex-direction: column; }
  .question-filters, .question-tools { justify-content: space-between; }
  .question-filter { flex: 1; }
  .question-form-actions { align-items: stretch; flex-direction: column; }
  .question-form-actions .row { width: 100%; }
  .question-form-actions .row > * { flex: 1; }
  .question-editor details > summary.form-section-heading { align-items: center; flex-direction: row; }
  .question-buttons { justify-content: stretch; }
  .question-buttons button { flex: 1; }
  .lobby .qr { margin: 0 auto; }
  .screen-head { gap: .8rem; flex-wrap: wrap; }
  .screen-controls { justify-content: flex-start; }
  .status-grid { grid-template-columns: 1fr; }
  .marker .tag { white-space: normal; }
  .lobby { gap: 30px; padding-top: 25px; }
  .join-panel { max-width: 360px; justify-self: center; }
  .screen-title { font-size: clamp(52px, 12vw, 88px); }
  .scoreboard { gap: 12px; }
  .score-side { gap: 8px; }
  .screen-head .brand span { display: none; }
  .round-scene { min-height: calc(100svh - 120px); }
  .marker .tag { width: clamp(100px, 25vw, 150px); }
  .marker-label { font-size: 9px; letter-spacing: 0; }
  .scale-tick:nth-of-type(3) span, .scale-tick:nth-of-type(5) span { display: none; }
}
@media (min-width: 801px) and (max-height: 820px) {
  .screen { padding: 20px 3.5vw; }
  #screen-stage { margin-top: 12px; }
  .round-scene { min-height: calc(100svh - 92px); }
  .screen-question { font-size: clamp(28px, 3vw, 42px); margin-top: 8px; }
  .screen-context { font-size: 16px; margin-top: 6px; }
  .screen-status { min-height: 50px; }
  .screen-status strong { font-size: 20px; }
  .scale-wrap { --lane: 65px; --tag-height: 46px; min-height: 220px; }
  .marker .tag { padding: 4px 10px; }
  .marker-label { font-size: 11px; }
  .marker-value { font-size: clamp(18px, 1.8vw, 24px); }
  .result { min-height: 115px; }
  .winner { font-size: clamp(28px, 3.3vw, 44px); }
  .distances, .screen-explanation { font-size: 15px; margin-top: 8px; }
}
.scene-enter .eyebrow { animation: fade-in .35s .22s ease-out backwards; }
.scene-enter .screen-question { animation: text-reveal .6s .28s var(--ease-stage) backwards; }
.scene-enter .screen-context { animation: fade-in .45s .52s ease-out backwards; }
.scene-enter .screen-status { animation: fade-in .4s .65s ease-out backwards; }
.scene-enter .scale::after { animation: rail-draw .65s .6s var(--ease-stage) backwards; }
.scene-enter .scale::before, .scene-enter .scale-tick, .scene-enter .scale-unit { animation: fade-in .45s .85s ease-out backwards; }
.scene-enter .screen-title { animation: title-reveal .8s .28s var(--ease-stage) backwards; }
.scene-enter .lobby-instruction { animation: text-reveal .55s .55s var(--ease-stage) backwards; }
.scene-enter .lobby-attendance { animation: fade-in .5s .85s ease-out backwards; }
.scene-enter .join-panel { animation: stage-in .65s .55s var(--ease-stage) backwards; }
.scene-enter .final-screen h1 { animation: title-reveal .8s .4s var(--ease-stage) backwards; }
.scene-enter .final-scores { animation: result-in .65s .8s var(--ease-stage) backwards; }
.scene-enter .final-screen p { animation: fade-in .55s 1.25s ease-out backwards; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes text-reveal { from { opacity: 0; clip-path: inset(0 0 100%); transform: translateY(12px); } to { opacity: 1; clip-path: inset(0); transform: none; } }
@keyframes title-reveal { from { opacity: 0; clip-path: inset(0 0 100%); transform: translateY(18px) scale(.985); } to { opacity: 1; clip-path: inset(0); transform: none; } }
@keyframes rail-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes stage-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes result-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes label-unfold { from { opacity: 0; clip-path: var(--label-clip); transform: translateY(var(--label-offset)); } to { opacity: 1; clip-path: inset(0); transform: none; } }
@keyframes pin-in { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes stem-in { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes answer-land { from { opacity: .8; transform: scale(.8); } to { opacity: 0; transform: scale(2.6); } }
@keyframes answer-value { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes voting-breathe { 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; } }

/* Live-show layer: original CSS graphics inspired by the inspected blue/purple stage,
   metallic title cards, warm light bars and playful app energy. */
.screen {
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 14%, #ff9f1c20 0 1px, transparent 2px),
    radial-gradient(circle at 82% 22%, #b85cff28 0 1px, transparent 2px),
    radial-gradient(ellipse at 10% 0%, #ff9f1c18, transparent 38%),
    radial-gradient(ellipse at 90% 60%, #8736d830, transparent 55%),
    linear-gradient(135deg, #1b1044 0%, #120c31 52%, #211047 100%);
  background-size: 170px 170px, 230px 230px, auto, auto, auto;
}
.screen::before {
  background:
    linear-gradient(115deg, transparent 31%, #ffffff08 31.15%, #ffffff08 31.3%, transparent 31.45%),
    linear-gradient(72deg, transparent 67%, #ff9f1c09 67.15%, #ff9f1c09 67.35%, transparent 67.55%),
    repeating-linear-gradient(90deg, transparent 0 78px, #ffffff05 79px 80px);
  opacity: .8;
}
.screen::after {
  animation: aurora-drift 18s ease-in-out infinite alternate;
  background: radial-gradient(ellipse at 50% 100%, #b85cff18, transparent 54%), conic-gradient(from 220deg at 50% 50%, transparent, #ff9f1c0b, transparent 26%, #b85cff0e, transparent 56%);
  content: '';
  inset: -20%;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}
.screen > *:not(.screen-fx):not(.screen-controls):not(.show-bug) { position: relative; z-index: 1; }
.screen > .screen-controls { position: fixed; }
.screen-fx { inset: 0; pointer-events: none; position: absolute; z-index: 0; }
.screen-fx i { background: linear-gradient(180deg, transparent, #ff9f1c38 35%, #ff9f1c05 70%, transparent); filter: blur(1px); height: 78vh; left: 16%; opacity: .4; position: absolute; top: -8vh; transform: rotate(22deg); width: 14px; }
.screen-fx i:nth-child(2) { animation-delay: -4s; background: linear-gradient(180deg, transparent, #b85cff42 35%, #b85cff05 70%, transparent); left: 39%; opacity: .45; transform: rotate(-19deg); }
.screen-fx i:nth-child(3) { animation-delay: -9s; left: 70%; opacity: .28; transform: rotate(16deg); }
.screen-fx i:nth-child(4) { animation-delay: -13s; background: linear-gradient(180deg, transparent, #49e0c438 35%, #49e0c405 70%, transparent); left: 88%; opacity: .25; transform: rotate(-14deg); }
.screen-fx span { background-image: radial-gradient(#ffffff35 1px, transparent 1px); background-size: 28px 28px; inset: 0; mask-image: linear-gradient(180deg, #000, transparent 85%); opacity: .24; position: absolute; }
.screen-brand { align-items: center; display: flex; gap: .55em; }
.screen-brand .brand-glyph { animation: glyph-pulse 2.8s ease-in-out infinite; color: #ffe0a1; display: inline-block; font-size: 1.15em; text-shadow: 0 0 14px #ff9f1c99; }
.screen-brand span:last-child { color: var(--muted); margin-left: .2em; }
.show-bug { align-items: center; bottom: 14px; color: #bcb2d9; display: flex; font-size: 11px; gap: 7px; letter-spacing: .14em; position: fixed !important; left: 20px; pointer-events: none; text-transform: uppercase; z-index: 22 !important; }
.show-bug-dot { animation: live-blink 1.4s ease-in-out infinite; background: var(--pink); border-radius: 50%; box-shadow: 0 0 12px #f30f8d; display: inline-block; height: 7px; width: 7px; }
.lobby, .round-scene, .final-screen { position: relative; }
.lobby-light { inset: -14vh -8vw; overflow: hidden; pointer-events: none; position: absolute; z-index: -1; }
.lobby-light span { background: linear-gradient(115deg, transparent 0 47%, #ff9f1c22 49%, #ff9f1c04 58%, transparent 66%); filter: blur(2px); inset: 0; position: absolute; transform: rotate(-8deg); }
.lobby-light span:nth-child(2) { background: linear-gradient(74deg, transparent 0 42%, #b85cff20 48%, #b85cff03 58%, transparent 66%); transform: rotate(7deg); }
.lobby-light span:nth-child(3) { background: radial-gradient(circle at 50% 55%, #ffffff16 0 1px, transparent 2px); background-size: 48px 48px; opacity: .5; }
.lobby-copy { position: relative; z-index: 1; }
.lobby-copy::before { border: 1px solid #ffffff16; border-radius: 50%; content: ''; height: min(48vw, 620px); left: min(-9vw, -110px); position: absolute; top: 3%; transform: rotate(-22deg); width: min(48vw, 620px); z-index: -1; }
.lobby-copy::after { border: 1px solid #ff9f1c22; border-radius: 50%; content: ''; height: min(52vw, 680px); left: min(-12vw, -145px); position: absolute; top: 0; transform: rotate(-22deg); width: min(52vw, 680px); z-index: -1; }
.lobby-mood { color: #ffe0a1; font-size: clamp(11px, 1vw, 16px); font-weight: 800; letter-spacing: .12em; margin: 1.15rem 0 .25rem; text-transform: uppercase; }
.join-panel { box-shadow: 0 24px 90px #0005, 0 0 0 1px #ffffff06 inset; overflow: visible; position: relative; }
.join-panel::before { animation: qr-halo 3.6s ease-in-out infinite; border: 1px solid #ff9f1c55; border-radius: 22px; content: ''; inset: 8px; pointer-events: none; position: absolute; }
.join-spark { animation: spark-float 2.4s ease-in-out infinite; color: #ffe0a1; font-size: 28px; position: absolute; right: 22px; text-shadow: 0 0 18px #ff9f1c; top: -18px; }
.round-burst { inset: 11% 0 auto; pointer-events: none; position: absolute; }
.round-burst span { background: var(--orange); border-radius: 50%; box-shadow: 0 0 18px currentColor; height: 6px; opacity: .7; position: absolute; width: 6px; }
.round-burst span:nth-child(1) { left: 8%; top: 6vh; }
.round-burst span:nth-child(2) { background: var(--violet); right: 11%; top: 1vh; }
.round-burst span:nth-child(3) { background: #49e0c4; left: 18%; top: 28vh; }
.round-burst span:nth-child(4) { background: #ffe0a1; right: 22%; top: 24vh; }
.scale-spark { animation: scale-spark 2.8s ease-in-out infinite; background: #fff; border-radius: 50%; box-shadow: 0 0 14px 5px #ffffff66; height: 5px; opacity: .7; position: absolute; top: 1px; width: 5px; z-index: 1; }
.scale-spark.spark-one { left: 22%; }
.scale-spark.spark-two { animation-delay: -1.4s; left: 76%; opacity: .45; }
.stage-content:is([data-phase="guesses"], [data-phase="revealing"], [data-phase="result"]) .scale-spark { visibility: hidden; }
.result { position: relative; isolation: isolate; }
.result::before { background: conic-gradient(from 22deg, transparent 0 8%, #ff9f1c 8% 10%, transparent 10% 24%, #b85cff 24% 27%, transparent 27% 45%, #49e0c4 45% 47%, transparent 47% 68%, #ffe0a1 68% 71%, transparent 71%); border-radius: 50%; content: ''; height: 300px; left: 50%; opacity: 0; pointer-events: none; position: absolute; top: -50px; transform: translateX(-50%) scale(.4); width: min(70vw, 580px); }
.result::before { z-index: -1; }
.result.result-visible::before { animation: confetti-ring .9s cubic-bezier(.22, 1, .36, 1) forwards; }
.screen[data-winner="audience"] .result::before { filter: hue-rotate(22deg); }
.screen[data-winner="contestant"] .result::before { filter: hue-rotate(-8deg); }
.final-confetti { animation: confetti-drift 7s linear infinite; background: radial-gradient(circle, #ff9f1c 0 3px, transparent 4px), radial-gradient(circle, #b85cff 0 3px, transparent 4px), radial-gradient(ellipse 2px 6px at 34% 76%, #49e0c4 90%, transparent); background-position: 12% 20%, 78% 34%, 34% 76%; background-size: 110px 140px, 160px 120px, 130px 130px; inset: -10%; opacity: .25; pointer-events: none; position: absolute; }
.scene-enter .final-confetti { animation: confetti-in .8s .45s both, confetti-drift 7s .45s linear infinite; }
.final-screen { isolation: isolate; overflow: hidden; }
.final-screen > *:not(.final-confetti) { position: relative; z-index: 1; }
@keyframes aurora-drift { from { transform: translate3d(-2%, -1%, 0) rotate(-2deg) scale(1); } to { transform: translate3d(2%, 2%, 0) rotate(3deg) scale(1.06); } }
@keyframes glyph-pulse { 50% { transform: rotate(16deg) scale(1.12); } }
@keyframes live-blink { 50% { box-shadow: 0 0 3px #f30f8d; opacity: .55; } }
@keyframes qr-halo { 50% { border-color: #ff9f1c22; transform: scale(.985); } }
@keyframes spark-float { 50% { transform: translateY(6px) rotate(18deg) scale(1.12); } }
@keyframes scale-spark { 50% { opacity: .1; transform: translateX(14px) scale(.55); } }
@keyframes confetti-ring { from { opacity: 0; transform: translateX(-50%) scale(.35) rotate(-18deg); } 25% { opacity: .24; } to { opacity: 0; transform: translateX(-50%) scale(1.2) rotate(22deg); } }
@keyframes confetti-drift { from { transform: translateY(-2%) rotate(0); } to { transform: translateY(4%) rotate(8deg); } }
@keyframes confetti-in { from { opacity: 0; } to { opacity: .25; } }

.phone-lobby-activity { background: linear-gradient(145deg, #30216d, #1d1448); border: 1px solid #655596; border-radius: 13px; display: grid; gap: .65rem; margin-top: 1rem; padding: .8rem; text-align: left; }
.phone-lobby-copy { align-items: baseline; display: flex; flex-wrap: wrap; gap: .2rem .55rem; }
.phone-lobby-copy .label { color: var(--orange); font-size: .62rem; margin: 0; width: 100%; }
.phone-lobby-copy strong { font-size: 1rem; line-height: 1.15; }
.phone-lobby-copy > span:last-child { color: var(--muted); font-size: .75rem; }
.phone-reaction-actions { display: grid; gap: .4rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.phone-reaction-actions button { align-items: center; border: 1px solid transparent; border-radius: 10px; color: #160f38; display: flex; flex: 1; flex-direction: column; gap: .22rem; justify-content: center; min-height: 58px; padding: .35rem .15rem; width: auto; }
.phone-reaction-actions button span { font-size: 1.2rem; line-height: 1; }
.phone-reaction-actions button small { color: inherit; font-size: .65rem; font-weight: 900; letter-spacing: .07em; line-height: 1; text-transform: uppercase; }
.reaction-tile-spark { background: var(--orange); box-shadow: 0 5px 0 #b76800; }
.reaction-tile-cheer { background: #d49aff; box-shadow: 0 5px 0 #8050ad; }
.reaction-tile-dance { background: #63e6be; box-shadow: 0 5px 0 #268d72; }
.phone-reaction-actions button:active { box-shadow: none; transform: translateY(4px); }
.phone-reaction-actions button:disabled { cursor: wait; opacity: .5; }
.phone-lobby-activity #lobby-reaction-status { font-size: .68rem; margin: 0; text-align: center; }
.lobby-reaction-layer { contain: paint; inset: 0; overflow: hidden; pointer-events: none; position: absolute; z-index: 2; }
.lobby-reaction { --reaction-color: #ffe0a1; align-items: center; animation: lobby-reaction-flight 1.55s cubic-bezier(.22, 1, .36, 1) both; background: radial-gradient(circle, var(--reaction-color) 0 12%, #160f38 14% 48%, transparent 50%); border: 1px solid var(--reaction-color); border-radius: 50%; box-shadow: 0 0 28px var(--reaction-color), 0 0 0 6px #ffffff0d inset; contain: layout paint; display: flex; height: clamp(58px, 7vw, 104px); justify-content: center; position: absolute; width: clamp(58px, 7vw, 104px); will-change: transform, opacity; z-index: 3; }
.lobby-reaction::before { border: 2px solid var(--reaction-color); border-radius: 50%; content: ''; inset: -12px; opacity: .72; position: absolute; animation: lobby-reaction-ring 1.05s .04s ease-out both; }
.lobby-reaction::after { background: var(--reaction-color); border-radius: 50%; box-shadow: -34px 24px 0 -2px var(--reaction-color), 36px 12px 0 -3px var(--reaction-color), 24px -28px 0 -3px var(--reaction-color), -28px -20px 0 -3px var(--reaction-color); content: ''; height: 5px; left: 50%; opacity: 0; position: absolute; top: 50%; width: 5px; animation: lobby-reaction-particles .95s .08s ease-out both; }
.lobby-reaction-glyph { filter: drop-shadow(0 0 9px var(--reaction-color)); font-size: clamp(26px, 3.4vw, 52px); line-height: 1; position: relative; z-index: 1; }
.lobby-reaction-spark { --reaction-color: #ff9f1c; }
.lobby-reaction-cheer { --reaction-color: #d49aff; }
.lobby-reaction-dance { --reaction-color: #49e0c4; }
.lobby-reaction-join { --reaction-color: #ffe0a1; }
.lobby-reaction-spark .lobby-reaction-glyph { animation: lobby-reaction-spark .75s cubic-bezier(.22, 1, .36, 1) both; }
.lobby-reaction-cheer .lobby-reaction-glyph { animation: lobby-reaction-cheer .55s ease-in-out 2; }
.lobby-reaction-dance .lobby-reaction-glyph { animation: lobby-reaction-dance .8s ease-in-out both; }
.lobby-reaction-join .lobby-reaction-glyph { animation: lobby-reaction-join .7s cubic-bezier(.22, 1, .36, 1) both; }
.lobby-party::before { background: conic-gradient(from 0deg at 50% 50%, #ff9f1c38, transparent 14%, #b85cff38, transparent 32%, #49e0c438, transparent 51%, #ffe0a138, transparent 70%); content: ''; inset: -40%; opacity: 0; pointer-events: none; position: absolute; z-index: 0; animation: lobby-party-wash 1.8s ease-out both; }
.lobby-energy { display: grid; gap: .45rem; margin-top: 1.35rem; max-width: 550px; }
.lobby-energy-head { align-items: baseline; display: flex; justify-content: space-between; }
.lobby-energy-head span { color: #ffe0a1; font-size: clamp(10px, .8vw, 14px); font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.lobby-energy-head strong { color: white; font-size: clamp(14px, 1.1vw, 20px); font-variant-numeric: tabular-nums; }
.lobby-energy-track { background: #100b29; border: 1px solid #655596; border-radius: 999px; height: 13px; overflow: hidden; position: relative; }
.lobby-energy-track::before { background: repeating-linear-gradient(90deg, transparent 0 8.2%, #ffffff24 8.2% 8.5%); content: ''; inset: 0; position: absolute; z-index: 2; }
.lobby-energy-track > span { background: linear-gradient(90deg, #ff9f1c, #b85cff 55%, #49e0c4); border-radius: inherit; box-shadow: 0 0 18px #b85cff; display: block; height: 100%; transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.22, 1, .36, 1); width: 100%; }
.lobby-energy-track > i { background: #fff; border-radius: 50%; box-shadow: 0 0 14px 4px #fff; height: 5px; left: 0; opacity: .85; position: absolute; top: 3px; width: 5px; z-index: 3; }
.lobby-energy small { color: var(--muted); font-size: clamp(11px, .9vw, 15px); }
.lobby-party .screen-title { animation: lobby-party-title .6s ease-in-out 2; }
.lobby-party .join-panel { border-color: #ffe0a1; box-shadow: 0 24px 90px #0005, 0 0 28px #ff9f1c55; }
.lobby-party-burst { align-items: center; animation: lobby-party-burst .95s cubic-bezier(.22, 1, .36, 1) both; background: #160f38e8; border: 1px solid #ffe0a1; border-radius: 18px; box-shadow: 0 0 0 8px #ffe0a112, 0 20px 70px #0008, 0 0 44px #ff9f1c88; display: flex; flex-direction: column; gap: .25rem; left: 50%; padding: 1.1rem 1.6rem 1rem; position: absolute; text-align: center; top: 52%; transform: translate(-50%, -50%); z-index: 8; }
.lobby-party-burst::before, .lobby-party-burst::after { border: 1px solid #ffe0a1aa; border-radius: 50%; content: ''; height: 150%; left: 50%; opacity: 0; position: absolute; top: 50%; width: 150%; animation: lobby-party-ring .95s ease-out both; }
.lobby-party-burst::after { animation-delay: .12s; width: 210%; height: 210%; }
.lobby-party-burst span { color: #ffe0a1; font-size: .68rem; font-weight: 900; letter-spacing: .2em; }
.lobby-party-burst strong { color: white; font-size: clamp(22px, 3vw, 48px); letter-spacing: .04em; line-height: 1; }
.lobby-party-burst small { color: #b85cff; font-size: .62rem; font-weight: 900; letter-spacing: .18em; }
@keyframes lobby-reaction-flight { 0% { opacity: 0; transform: translate(-50%, 24px) scale(.35) rotate(-9deg); } 14% { opacity: 1; transform: translate(-50%, 0) scale(1.04) rotate(0); } 35% { transform: translate(-50%, -12px) scale(1) rotate(2deg); } 100% { opacity: 0; transform: translate(calc(-50% + var(--reaction-drift)), -42vh) scale(.82) rotate(8deg); } }
@keyframes lobby-reaction-ring { 0% { opacity: .7; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.45); } }
@keyframes lobby-reaction-particles { 0% { opacity: 0; transform: scale(.3); } 25% { opacity: .9; } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes lobby-reaction-spark { 0% { opacity: 0; transform: rotate(-30deg) scale(.2); } 55% { opacity: 1; transform: rotate(18deg) scale(1.25); } 100% { transform: rotate(0) scale(1); } }
@keyframes lobby-reaction-cheer { 0%, 100% { transform: translateY(0) rotate(0); } 35% { transform: translateY(-9px) rotate(-12deg); } 70% { transform: translateY(1px) rotate(10deg); } }
@keyframes lobby-reaction-dance { 0% { transform: rotate(-18deg) scale(.6); } 30% { transform: rotate(18deg) scale(1.2); } 60% { transform: rotate(-12deg) scale(1); } 100% { transform: rotate(12deg) scale(1); } }
@keyframes lobby-reaction-join { 0% { opacity: 0; transform: translateY(12px) scale(.3); } 55% { opacity: 1; transform: translateY(-7px) scale(1.15); } 100% { transform: translateY(0) scale(1); } }
@keyframes lobby-party-wash { 0% { opacity: 0; transform: rotate(0) scale(.7); } 30% { opacity: .9; } 100% { opacity: 0; transform: rotate(22deg) scale(1.1); } }
@keyframes lobby-party-burst { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-8deg); } 35% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(2deg); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1) rotate(0); } }
@keyframes lobby-party-ring { 0% { opacity: .7; transform: translate(-50%, -50%) scale(.3); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
@keyframes lobby-party-title { 0%, 100% { transform: rotate(0) scale(1); } 25% { transform: rotate(-1deg) scale(1.02); } 75% { transform: rotate(1deg) scale(1.02); } }