:root {
  color-scheme: dark;
  --bg: #080c18;
  --surface: #111727;
  --surface-2: #171e30;
  --line: #2b3449;
  --text: #f3f5ff;
  --muted: #8d98b1;
  --accent: #a78bfa;
  --accent-hot: #d3beff;
  --round-accent: #f59e0b;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* {box-sizing:border-box}
[hidden] {display:none !important}
html {scroll-behavior:smooth}
body {margin:0;background:var(--bg);color:var(--text)}
a {color:inherit;text-decoration:none}
button,input,textarea,select {font:inherit}
button {cursor:pointer}
button:disabled {cursor:not-allowed;opacity:.38}
input,textarea,select {min-width:0}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible {outline:2px solid #c2a9ff;outline-offset:3px}
.brand {display:inline-flex;align-items:center;gap:13px;font-size:18px;letter-spacing:2.2px;font-weight:850;white-space:nowrap}
.brand-mark {position:relative;display:flex;align-items:center;justify-content:center;height:42px;width:42px;border-radius:13px;background:linear-gradient(130deg,#9b7cff,#665af5);box-shadow:0 3px 20px #7659f23d;font-size:27px;letter-spacing:-3px}
.brand-dot {color:#ffdf81;position:relative;top:6px;left:1px;font-size:19px}
.brand .thin {font-weight:430;color:#c4bed4}
.section-eyebrow,.superline {font-size:11px;letter-spacing:2.8px;font-weight:800;color:#b9a3ff}
.muted {color:var(--muted)}
.mini-muted {color:#8e97ae;font-size:15px}
.micro {font-size:11px;letter-spacing:1.6px;font-weight:720}

/* Participant screen: optimized for a TV or projector. */
.display-page {min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 36%,#1d2041 0%,#0b1021 52%,#080b16 100%)}
.display-page:before {content:"";pointer-events:none;position:absolute;inset:0;opacity:.21;background-image:linear-gradient(#5c6d9a0e 1px,transparent 1px),linear-gradient(90deg,#5c6d9a0e 1px,transparent 1px);background-size:46px 46px}
.stage-glow {position:fixed;pointer-events:none;border-radius:50%;filter:blur(70px);opacity:.4}
.stage-glow-a {height:340px;width:340px;background:#7055d9;top:12%;left:-240px}
.stage-glow-b {height:400px;width:400px;background:#14518f;bottom:-250px;right:-180px}
.display-header,.display-footer {z-index:2;display:flex;align-items:center;justify-content:space-between;padding:26px clamp(20px,4.5vw,88px)}
.display-header {gap:18px}
.live-indicator {display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:2px;font-weight:800;color:#c5c8dd}
.live-dot {width:9px;height:9px;border-radius:50%;background:#f66d8b;box-shadow:0 0 0 5px #f66d8b19,0 0 14px #fa6c8a99}
.display-fullscreen {border:1px solid #ffffff25;background:#ffffff0a;border-radius:12px;padding:10px 15px;color:#d3d7e7;font-size:13px;transition:background .2s}
.display-fullscreen:hover {background:#ffffff18}
.stage {position:relative;z-index:1;display:flex;flex:1;align-items:center;justify-content:center;min-height:0;width:min(100%,1500px);margin:auto;padding:18px clamp(22px,6vw,110px)}
.stage>section {width:100%;animation:appear .25s ease both}
@keyframes appear {from{opacity:.4;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.welcome-screen,.answer-screen,.scoreboard-screen {text-align:center}
.welcome-symbol {position:relative;margin:34px auto 10px;isolation:isolate;display:flex;justify-content:center;align-items:center;font-size:140px;line-height:1;font-weight:900;width:190px;height:190px;color:white;text-shadow:0 14px 45px #b39bff44}
.welcome-symbol:before {content:"";position:absolute;inset:0;border-radius:60px;transform:rotate(-13deg);z-index:-1;background:linear-gradient(150deg,#a28aff,#6256ea);box-shadow:inset 0 3px 20px #ffffff44,0 30px 110px #8d67ff44}
.welcome-circle {position:absolute;border:1px solid #ffffff55;border-radius:50%;z-index:-2}
.circle-a {height:280px;width:280px}
.circle-b {height:360px;width:360px;border-color:#ffffff14}
.welcome-screen h1,.scoreboard-screen h1 {font-size:clamp(40px,6.3vw,100px);line-height:1.05;letter-spacing:-.06em;font-weight:870;margin:40px 0 20px}
.welcome-screen h1 em,.scoreboard-screen h1 em {font-style:normal;color:#baa6ff}
.welcome-screen>p {font-size:clamp(15px,1.55vw,23px);color:#bbc2db;margin:0 auto;max-width:740px;line-height:1.55}
.welcome-divider {display:flex;justify-content:center;align-items:center;gap:20px;margin:45px auto 22px;color:#a8a4c0;letter-spacing:4px;font-size:11px;max-width:570px}
.welcome-divider span {height:1px;flex:1;background:linear-gradient(90deg,transparent,#6d658b)}
.welcome-divider span:last-child {transform:scaleX(-1)}
.display-footer {font-size:10px;letter-spacing:1.5px;color:#717a94;padding-top:10px;padding-bottom:21px;gap:12px}
#connection-status {text-align:right}
.question-screen {max-width:1230px;min-height:clamp(400px,63vh,750px);display:flex;flex-direction:column;justify-content:space-between;gap:25px}
.question-meta {display:flex;align-items:center;flex-wrap:wrap;gap:14px}
.round-pill,.point-pill,.q-counter {display:inline-flex;align-items:center;border-radius:100px;white-space:nowrap;font-size:12px;font-weight:800;letter-spacing:1px}
.round-pill {background:color-mix(in srgb,var(--round-accent) 16%,transparent);border:1px solid color-mix(in srgb,var(--round-accent) 40%,transparent);color:var(--round-accent);padding:13px 22px}
.q-counter {margin-left:auto;color:#8b95ae}
.point-pill {padding:12px 19px;background:#ffffff0b;border:1px solid #ffffff20;color:#eee4b8}
.question-prompt {font-size:clamp(30px,5.1vw,77px);letter-spacing:-.045em;line-height:1.2;font-weight:790;margin:14px 0 0;overflow-wrap:anywhere;white-space:pre-wrap;text-wrap:balance}
.question-media {text-align:center;min-height:0;display:flex;justify-content:center;align-items:center;max-height:44vh}
.question-media img,.question-media video {border-radius:18px;border:1px solid #ffffff22;box-shadow:0 22px 80px #0005;max-height:min(43vh,520px);max-width:100%;object-fit:contain}
.question-media audio {width:min(720px,95%)}
.question-bottom {display:flex;align-items:flex-end;gap:24px;justify-content:space-between;margin-top:auto;padding:16px 0}
.hint-wrap {display:flex;flex-direction:column;gap:8px;line-height:1.5;color:#d5d9ec;font-size:clamp(14px,1.4vw,19px)}
.hint-label,.timer-label,.timer-unit {font-size:10px;font-weight:800;letter-spacing:2.1px;color:#8490ad}
.timer-group {flex:none;display:flex;align-items:baseline;gap:10px}
.timer-value {font-size:clamp(48px,5vw,77px);line-height:1;font-variant-numeric:tabular-nums;font-weight:850}
.timer-group.timer-urgent .timer-value {color:#fb7185}
.timer-track {height:5px;border-radius:20px;background:#ffffff14;overflow:hidden}
.timer-progress {height:100%;width:100%;background:linear-gradient(90deg,var(--round-accent),#d8bbff);transition:width .15s linear}
.answer-check {margin:28px auto 20px;width:90px;height:90px;border:2px solid #59dba5;border-radius:50%;display:grid;place-items:center;background:#36db9d20;color:#8af9cb;font-size:49px;font-weight:500;box-shadow:0 0 60px #3dca9740}
.answer-label {font-size:14px;letter-spacing:3px;color:#8ef2bf;font-weight:820}
.answer-screen h1 {font-size:clamp(42px,7vw,112px);line-height:1.14;letter-spacing:-.055em;margin:26px auto;max-width:1100px;overflow-wrap:anywhere;text-wrap:balance}
.answer-origin {font-size:clamp(16px,1.8vw,23px);line-height:1.5;color:#909cb9;max-width:850px;margin:30px auto 0}
.scoreboard-screen h1 {margin:16px 0 48px}
.scoreboard-list {display:flex;flex-direction:column;gap:12px;max-width:900px;margin:auto;text-align:left}
.scoreboard-row {display:flex;align-items:center;gap:24px;padding:clamp(14px,1.5vw,22px) clamp(16px,2.2vw,30px);border:1px solid #ffffff16;border-radius:16px;background:linear-gradient(90deg,#ffffff0e,#ffffff04)}
.scoreboard-row.scoreboard-leader {background:linear-gradient(95deg,#b394f121,#9168f20e);border-color:#a88bf250}
.scoreboard-rank {font-size:clamp(16px,2vw,26px);font-weight:850;color:#848cac;min-width:34px;font-variant-numeric:tabular-nums}
.scoreboard-leader .scoreboard-rank {color:#d8bdff}
.scoreboard-team {font-size:clamp(19px,2.7vw,34px);font-weight:730;flex:1;min-width:0;overflow-wrap:anywhere}
.scoreboard-score {font-size:clamp(27px,3vw,43px);font-variant-numeric:tabular-nums;font-weight:820}
.scoreboard-unit {color:#8a92ad;font-size:10px;letter-spacing:2px;font-weight:800}

/* Admin */
.admin-page {background:radial-gradient(ellipse at 50% -20%,#222349 0%,#0b1020 48%,#090d19 100%);min-height:100vh}
.admin-header {min-height:92px;border-bottom:1px solid #ffffff12;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px clamp(20px,4vw,60px);background:#090d19ba;backdrop-filter:blur(12px);position:relative;z-index:3}
.admin-nav {display:flex;gap:25px;color:#a6adc5;font-size:13px;font-weight:650}
.admin-nav a:hover,.muted-link:hover {color:white}
.header-actions {display:flex;align-items:center;gap:10px}
.btn {display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;border:1px solid transparent;border-radius:10px;padding:11px 17px;font-size:13px;font-weight:750;line-height:1.2;transition:background .18s,border-color .18s,transform .18s}
.btn:hover:not(:disabled) {transform:translateY(-1px)}
.btn-primary {background:#9475f9;color:#100a22;box-shadow:0 5px 18px #8e6ef42c}
.btn-primary:hover:not(:disabled) {background:#b6a0ff}
.btn-success {background:#3ecb9e;color:#08211b}
.btn-success:hover:not(:disabled) {background:#7eecc3}
.btn-accent {background:#8164f233;color:#c8afff;border-color:#9777ff55}
.btn-accent:hover:not(:disabled) {background:#8b65f244}
.btn-secondary {background:#ffffff0c;border-color:#ffffff20;color:#e6e8f4}
.btn-secondary:hover:not(:disabled) {background:#ffffff1a}
.btn-ghost {background:transparent;border-color:#ffffff0c;color:#aaaec3}
.btn-ghost:hover:not(:disabled) {color:white;background:#ffffff0b}
.btn-danger {background:#d4597020;color:#ec8397;border-color:#db5e7330}
.btn-danger:hover:not(:disabled) {background:#c6567038}
.btn-large {min-height:51px;padding:14px 17px;font-size:14px}
.btn-small {padding:8px 11px;font-size:12px;min-height:33px;border-radius:8px}
.btn-icon {width:31px;height:33px;padding:3px;border-radius:8px}
.btn-wide {width:100%}
.admin-main {max-width:1760px;margin:auto;padding:45px clamp(20px,4vw,60px) 25px}
.page-intro {display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:34px}
.page-intro h1,.editor-page h1 {font-size:clamp(35px,3.2vw,51px);letter-spacing:-2.2px;line-height:1.1;margin:12px 0 8px}
.page-intro p {margin:0;font-size:14px}
.quick-stats {display:flex;gap:25px}
.quick-stats>div {display:flex;flex-direction:column;gap:2px;text-align:center;min-width:70px}
.quick-stats b {font-size:30px;font-weight:850;font-variant-numeric:tabular-nums}
.quick-stats span {color:#8b94ab;font-size:10px;letter-spacing:1.5px;font-weight:720}
.admin-layout {display:grid;grid-template-columns:minmax(320px,.86fr) minmax(440px,1.45fr);gap:20px;align-items:start}
.admin-left,.admin-right {display:flex;flex-direction:column;gap:20px;min-width:0}
.panel {padding:27px;background:linear-gradient(155deg,#161b2d,#111725);border-radius:18px;border:1px solid #ffffff16;box-shadow:0 10px 40px #00000016;min-width:0}
.panel-heading {display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:23px}
.panel h2 {font-size:21px;letter-spacing:-.6px;margin:8px 0 0}
.panel h3 {font-size:15px;margin:0}
.current-state {flex:none;padding:9px 12px;border-radius:30px;border:1px solid #bea3fc44;background:#9479ff16;color:#d8c7ff;font-size:10px;letter-spacing:1px;font-weight:800}
.current-question {border:1px solid #ffffff10;background:#080d1b77;border-radius:12px;padding:20px 19px;margin-bottom:20px;min-height:92px}
.current-question p {margin:12px 0 0;font-size:15px;line-height:1.6;font-weight:700;overflow-wrap:anywhere}
.control-buttons {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.control-buttons>form:nth-child(-n+2) {grid-column:span 1}
.control-buttons .btn {width:100%;white-space:normal}
.control-buttons>form:nth-child(7) {grid-column:span 2}
.help-line {font-size:12px;line-height:1.5;color:#8791a9;margin-top:17px}
.team-admin-row {border-top:1px solid #ffffff11;padding:16px 0}
.team-admin-row:first-child {border-top:0;padding-top:0}
.team-admin-name {display:flex;align-items:center;gap:10px;margin-bottom:12px}
.team-admin-name strong {font-size:14px;overflow-wrap:anywhere}
.team-avatar {height:30px;width:30px;border-radius:9px;display:grid;place-items:center;font-weight:800;background:#7765d844;color:#d0c3ff}
.team-score-number {margin-left:auto;font-size:24px;line-height:1;font-weight:800;font-variant-numeric:tabular-nums}
.team-score-actions {display:flex;flex-wrap:wrap;gap:6px}
.team-score-actions form:nth-last-child(2) {display:flex;align-items:center;gap:5px}
.custom-score {border:1px solid var(--line);background:#090e1c;color:var(--text);border-radius:8px;width:58px;height:33px;padding:2px 5px;text-align:center;font-size:12px}
.inline-add {display:flex;gap:8px;margin-top:16px}
.inline-add input {flex:1;width:100%}
input:not([type=hidden]):not([type=checkbox]):not([type=file]),textarea,select {background:#0c1221;color:#f3f4fb;border:1px solid #323c54;border-radius:9px;padding:12px 13px;outline:none}
input:focus,textarea:focus,select:focus {border-color:#a589fa}
input::placeholder,textarea::placeholder {color:#66728d}
.link-danger {background:none;border:0;color:#a4a9ba;text-decoration:underline;text-decoration-color:#79798a55;text-underline-offset:3px;font-size:12px;padding:8px 0}
.link-danger:hover {color:#ff95a8}
.reset-form {margin-top:12px}
.round-detail {border:1px solid #ffffff12;border-radius:13px;margin:10px 0;overflow:hidden;background:#090e1b66}
.round-detail>summary {list-style:none;display:flex;align-items:center;gap:14px;padding:17px 16px;cursor:pointer;user-select:none}
.round-detail>summary::-webkit-details-marker {display:none}
.round-detail>summary:hover {background:#ffffff06}
.round-index {width:38px;height:38px;border-radius:10px;background:#8c6cf123;border:1px solid #886cf146;color:#c4aaff;display:grid;place-items:center;font-weight:820;font-size:13px;flex:none}
.round-title-wrap {min-width:0;flex:1}
.round-title-wrap h3 {font-size:15px;margin:0 0 5px}
.round-title-wrap span {font-size:12px;color:#8f98ae;line-height:1.4;display:block}
.round-chevron {color:#9ea7bd;transform:rotate(0);font-size:20px;transition:transform .2s}
.round-detail[open] .round-chevron {transform:rotate(180deg)}
.round-inside {border-top:1px solid #ffffff13;padding:6px 16px 16px}
.question-admin-row {padding:13px 0;border-bottom:1px solid #ffffff12;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.question-admin-main {flex:1 1 280px;min-width:0;display:flex;align-items:flex-start;gap:13px}
.question-index {color:#727c95;font-size:11px;letter-spacing:1px;flex:none;padding-top:3px}
.question-overview {min-width:0}
.question-overview strong {display:block;max-width:650px;font-size:13px;line-height:1.5;font-weight:650;overflow-wrap:anywhere}
.question-overview small {display:block;color:#8b94ae;font-size:11px;margin-top:4px;line-height:1.4}
.question-actions {display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:5px}
.round-actions {display:flex;justify-content:space-between;align-items:center;margin-top:18px;gap:10px;flex-wrap:wrap}
.round-reorder {display:flex;gap:4px}
.round-edit-box {margin-top:17px;padding-top:16px;border-top:1px solid #ffffff0f}
.round-edit-form {display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.round-edit-form label {display:flex;flex-direction:column;gap:5px;font-size:11px;color:#8896b5;flex:1 1 150px}
.round-edit-form input {width:100%;font-size:12px;padding:8px 10px!important}
.round-edit-form button {min-height:35px}
.new-round-box {border-top:1px solid #ffffff12;margin-top:25px;padding-top:25px}
.new-round-box h3 {margin-bottom:16px}
.stack-form {display:flex;flex-direction:column;gap:17px}
.stack-form label {display:flex;flex-direction:column;gap:8px;font-size:12px;font-weight:730;color:#d0d5e9}
.stack-form label input,.stack-form label textarea,.stack-form label select {width:100%;font-weight:450;font-size:14px}
.stack-form textarea {line-height:1.55;resize:vertical}
.new-round-box .stack-form {gap:12px}
.flash {border-radius:11px;padding:14px 18px;font-size:13px;margin:14px 0 18px;line-height:1.4}
.flash-error {color:#ffc1d0;background:#7f3d582c;border:1px solid #ed617d5c}
.flash-success {color:#9af2cb;background:#31765331;border:1px solid #58b9835c}
.admin-footer {padding:32px 0;color:#626d88;font-size:11px;letter-spacing:1px;text-align:center}
.admin-footer a {color:#a99af4}

/* Authentication and editor pages. */
.login-page {display:flex;align-items:center;justify-content:center;padding:24px}
.login-shell {width:min(100%,460px)}
.login-shell>.brand {display:flex;justify-content:center;margin-bottom:28px}
.login-panel {padding:38px}
.login-panel h1 {font-size:36px;letter-spacing:-1.4px;margin:14px 0 12px}
.login-panel>p {font-size:13px;line-height:1.7;margin-bottom:27px}
.login-panel .btn {margin-top:7px}
.muted-link {display:block;text-align:center;color:#9ba5bb;margin-top:25px;font-size:13px}
.login-footer {text-align:center;font-size:10px;letter-spacing:1.8px;color:#57627f;margin-top:28px}
.editor-page {max-width:850px;margin:0 auto;padding:48px 22px 75px}
.editor-page>p {font-size:14px;margin:0 0 25px}
.editor-form {padding:32px;gap:23px}
.two-fields {display:grid;grid-template-columns:1fr 1fr;gap:16px}
input[type=file] {background:#0c1221;color:#d0d5e9;border:1px dashed #485573;border-radius:9px;padding:12px;font-size:12px;max-width:100%}
.input-help {font-size:11px;font-weight:450;line-height:1.6;color:#929bb1}
.existing-media {border:1px solid #ffffff1a;background:#070c19;padding:14px;border-radius:9px;font-size:12px;color:#a8b2c7}
.existing-media a {color:#bdaeff;text-decoration:underline}
.existing-media .checkbox-label {display:flex;flex-direction:row;align-items:center;margin-top:12px;gap:9px}
.editor-actions {display:flex;gap:10px;flex-wrap:wrap}

@media(max-width:1250px) {
  .admin-layout {grid-template-columns:minmax(290px,1fr) minmax(350px,1.2fr)}
  .panel {padding:21px}
  .question-admin-row {flex-direction:column}
  .question-actions {justify-content:flex-start;margin-left:24px}
}
@media(max-width:880px) {
  .admin-layout {grid-template-columns:1fr}
  .admin-header {flex-wrap:wrap}
  .admin-nav {order:3;width:100%;justify-content:space-between;gap:10px}
  .page-intro {align-items:flex-start}
  .display-header,.display-footer {padding:17px 22px}
  .stage {padding:20px 30px}
  .question-screen {min-height:60vh}
  .question-media {max-height:38vh}
  .question-media img,.question-media video {max-height:37vh}
}
@media(max-width:580px) {
  .admin-header {gap:12px;padding:14px 18px}
  .admin-header .brand {font-size:14px}
  .admin-header .brand-mark {width:33px;height:33px;font-size:21px;border-radius:10px}
  .header-actions {gap:5px}
  .header-actions .btn {padding:8px 9px;font-size:11px}
  .admin-nav {font-size:11px;padding:4px 0}
  .admin-main {padding:27px 15px}
  .page-intro {flex-direction:column;gap:20px}
  .quick-stats {gap:18px}
  .quick-stats>div {text-align:left}
  .quick-stats b {font-size:23px}
  .panel {padding:17px;border-radius:13px}
  .panel-heading {align-items:flex-start;gap:10px}
  .panel h2 {font-size:19px}
  .current-state {font-size:9px;padding:7px}
  .control-buttons .btn {padding:12px 7px;font-size:12px}
  .team-score-actions {gap:5px}
  .round-detail>summary {padding:13px 11px;gap:9px}
  .round-title-wrap h3 {font-size:14px}
  .round-title-wrap span {font-size:11px}
  .round-inside {padding-left:10px;padding-right:10px}
  .round-index {width:32px;height:32px}
  .question-admin-row {gap:7px}
  .question-actions {margin-left:20px}
  .inline-add {flex-wrap:wrap}
  .inline-add input {flex-basis:160px}
  .two-fields {grid-template-columns:1fr}
  .editor-form {padding:20px}
  .display-header {padding:16px 18px}
  .display-header .brand {font-size:13px}
  .display-header .brand-mark {width:33px;height:33px;font-size:21px}
  .live-indicator {display:none}
  .display-fullscreen {padding:8px;font-size:12px}
  .display-fullscreen span {display:none}
  .stage {padding:16px 20px}
  .welcome-symbol {font-size:100px;width:135px;height:135px;margin:24px auto}
  .welcome-symbol:before {border-radius:40px}
  .circle-a {height:195px;width:195px}
  .circle-b {height:245px;width:245px}
  .welcome-screen h1 {font-size:42px;margin:32px 0 19px}
  .welcome-divider {margin:34px auto 22px}
  .question-screen {min-height:65vh;gap:12px}
  .question-prompt {font-size:clamp(25px,7.3vw,45px)}
  .question-meta {gap:8px}
  .round-pill,.point-pill,.q-counter {font-size:10px;padding:8px 10px}
  .q-counter {order:3;width:100%;margin-left:0}
  .question-bottom {flex-direction:column;align-items:stretch}
  .timer-group {justify-content:flex-end}
  .timer-value {font-size:48px}
  .answer-check {width:68px;height:68px;font-size:37px}
  .answer-screen h1 {font-size:45px}
  .scoreboard-row {gap:11px}
  .scoreboard-unit {font-size:8px}
  .display-footer {font-size:9px;padding:12px 20px}
}
@media(prefers-reduced-motion:reduce) {*,*:before,*:after {animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* QuizRoom v2: media-first presentation and round intro */
.host-answer{margin-top:14px;padding:15px 18px;border:1px solid #818cf855;border-radius:12px;background:#818cf811;display:flex;flex-direction:column;gap:7px}
.host-answer strong{font-size:clamp(18px,2vw,25px);color:#e9ddff;overflow-wrap:anywhere}
.round-launch{margin:0 0 16px}
.round-intro-screen{min-height:65vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:28px}
.round-intro-screen h1{font-size:clamp(52px,8vw,128px);line-height:1.08;max-width:1100px;overflow-wrap:anywhere;color:#fff}
.round-intro-screen p{font-size:clamp(20px,2.6vw,35px);color:#aeb9d1;max-width:900px}
.question-screen:has(.question-media:not([hidden])){max-width:none;width:100%;min-height:calc(100dvh - 125px);gap:10px;justify-content:flex-start}
.question-screen:has(.question-media:not([hidden])) .question-prompt{font-size:clamp(24px,3.4vw,48px);line-height:1.13;margin:0}
.question-screen:has(.question-media:not([hidden])) .question-media{flex:1;min-height:0;max-height:none;width:100%;display:flex;align-items:center;justify-content:center}
.question-screen:has(.question-media:not([hidden])) .question-media img,.question-screen:has(.question-media:not([hidden])) .question-media video{width:100%;height:100%;max-width:100%;max-height:calc(100dvh - 290px);object-fit:contain}
.question-screen:has(.question-media:not([hidden])) .question-bottom{margin-top:auto}
@media(max-width:700px){.question-screen:has(.question-media:not([hidden])) .question-media img,.question-screen:has(.question-media:not([hidden])) .question-media video{max-height:calc(100dvh - 230px)}}

/* QuizRoom v3: separate answer media and TV-sized playback. */
.answer-upload-panel{display:flex;flex-direction:column;gap:15px;padding:18px;border:1px solid #9b80ee55;background:#9b80ee0b;border-radius:12px}
.answer-upload-panel>label{display:flex;flex-direction:column;gap:9px}
.host-media-note{font-size:12px;line-height:1.6;color:#acb8d4}
.host-media-note a{color:#d1bbff;text-decoration:underline}
.answer-screen:has(.answer-media:not([hidden])){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(7px,1.3vh,16px);width:100%;max-width:none;min-height:calc(100dvh - 155px)}
.answer-screen:has(.answer-media:not([hidden])) .answer-check{display:none}
.answer-screen:has(.answer-media:not([hidden])) .answer-label{font-size:11px;letter-spacing:2px}
.answer-screen:has(.answer-media:not([hidden])) h1{font-size:clamp(28px,3.5vw,56px);margin:0;line-height:1.12}
.answer-media{width:100%;min-height:0;display:flex;align-items:center;justify-content:center;flex:1}
.answer-media video,.answer-media img{display:block;width:100%;height:auto;max-height:calc(100dvh - 290px);object-fit:contain;border-radius:12px;box-shadow:0 22px 80px #0006}
.answer-media audio{width:min(920px,100%)}
.answer-screen:has(.answer-media:not([hidden])) .answer-origin{font-size:clamp(13px,1.2vw,19px);margin:0}
@media(max-width:700px){.answer-media video,.answer-media img{max-height:calc(100dvh - 260px)}}
/* Allow a media question/answer to use the full TV or projector width. */
.stage:has(.question-media:not([hidden])),
.stage:has(.answer-media:not([hidden])) {width:100%;max-width:none;padding:12px clamp(15px,2vw,36px)}

/* v4 — visible editor for the order of rounds. */
.round-order-panel {background:#090e1b99;border:1px solid #8a79ed4c;border-radius:14px;padding:18px;margin-bottom:22px}
.round-order-head h3 {font-size:16px;margin:0 0 7px}
.round-order-head p {font-size:12px;line-height:1.55;margin:0 0 14px}
.round-order-list {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.round-order-item {display:flex;align-items:center;gap:9px;min-width:0;padding:9px 10px;border:1px solid #ffffff16;border-radius:10px;background:#151b2e;cursor:grab}
.round-order-item:active {cursor:grabbing}
.round-order-item.round-order-dragging {opacity:.52;border-color:#9b80ff}
.round-order-handle {font-size:24px;color:#9184c6;line-height:1;flex:none;user-select:none}
.round-order-number {font-size:12px;font-weight:850;color:#b7a1ff;min-width:21px;text-align:center}
.round-order-name {flex:1;min-width:0;font-size:13px;font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.round-order-position-label {display:flex;align-items:center;gap:5px;font-size:11px;color:#99a4bc;flex:none}
.round-order-position {width:56px!important;padding:7px!important;font-size:13px;text-align:center}
.round-order-arrows {display:flex;gap:3px;flex:none}
.round-order-arrows .btn {height:32px;width:32px;min-height:32px}
.round-order-footer {display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.round-order-status {font-size:12px;color:#a3aec8;line-height:1.4}
.round-order-item button:disabled {opacity:.25;cursor:default}
@media(max-width:580px) {
  .round-order-panel {padding:12px}
  .round-order-item {gap:5px;padding:8px 6px}
  .round-order-handle {font-size:19px}
  .round-order-number {min-width:14px}
  .round-order-position {width:46px!important}
  .round-order-arrows .btn {width:29px;height:29px;min-height:29px;padding:2px}
}

/* v5 — быстрое переименование раунда из списка порядка. */
.round-rename-trigger{flex:none}
.round-rename-dialog{width:min(460px,calc(100vw - 28px));max-width:100%;border:1px solid #8a79ed88;border-radius:16px;padding:26px;background:#161b2d;color:#f3f1fa;box-shadow:0 26px 100px #000b}
.round-rename-dialog::backdrop{background:#080b16b8;backdrop-filter:blur(4px)}
.round-rename-dialog form{display:flex;flex-direction:column;gap:17px}
.round-rename-dialog h3{margin:0;font-size:20px}
.round-rename-dialog label{display:flex;flex-direction:column;gap:7px;font-size:13px;color:#c6c9dd}
.round-rename-dialog input{width:100%;min-width:0}
.round-rename-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:5px}
.round-inside>.round-edit-box{margin-bottom:16px}
@media(max-width:650px){.round-rename-trigger{font-size:12px;padding:7px 8px}.round-order-item{flex-wrap:wrap}.round-order-name{flex-basis:calc(100% - 88px)}.round-rename-dialog{padding:19px}}

/* v6: Keep the current round/question visible when returning from the editor. */
.round-detail, .question-admin-row { scroll-margin-top: 18px; }
.editor-actions .btn { white-space: normal; text-align: center; }

/* QuizRoom v7: compact TV presentation layout.
   All dimensions are bounded by the viewport so the timer, progress bar and footer
   remain visible with tall images and video. Does not affect the admin interface. */
.display-page {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}
.display-page .display-header {
  flex: 0 0 auto;
  min-height: 0;
  padding: 7px clamp(14px, 1.6vw, 30px);
  gap: 12px;
}
.display-page .display-header .brand {
  gap: 9px;
  font-size: 13px;
  letter-spacing: 1.6px;
}
.display-page .display-header .brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  font-size: 20px;
}
.display-page .display-header .brand-dot {top: 4px; font-size: 14px;}
.display-page .live-indicator {font-size: 9px; letter-spacing: 1.7px;}
.display-page .live-dot {width: 7px; height: 7px;}
.display-page .display-fullscreen {
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 11px;
}
.display-page .display-footer {
  flex: 0 0 auto;
  padding: 2px clamp(14px, 1.6vw, 30px) 5px;
  gap: 8px;
  font-size: 9px;
  line-height: 1.2;
}
.display-page .stage,
.display-page .stage:has(.question-media:not([hidden])),
.display-page .stage:has(.answer-media:not([hidden])) {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 4px clamp(12px, 1.4vw, 26px) 5px;
  align-items: stretch;
}
.display-page .stage > section {min-height: 0;}

/* The title and control bar get only the space they need;
   the media receives everything left over. */
.display-page .question-screen,
.display-page .question-screen:has(.question-media:not([hidden])) {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-width: none;
  min-height: 0;
  gap: clamp(4px, 0.75vh, 9px);
  justify-content: flex-start;
}
.display-page .question-meta {flex: 0 0 auto; gap: 8px;}
.display-page .round-pill,
.display-page .point-pill,
.display-page .q-counter {
  font-size: clamp(9px, 0.8vw, 11px);
  padding: 7px 12px;
  line-height: 1.15;
}
.display-page .question-prompt,
.display-page .question-screen:has(.question-media:not([hidden])) .question-prompt {
  flex: 0 0 auto;
  font-size: clamp(24px, 2.65vw, 46px);
  line-height: 1.12;
  letter-spacing: -.035em;
  margin: 0;
}
.display-page .question-screen:has(.question-media:not([hidden])) .question-media {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ffffff22;
  border-radius: 13px;
  background: #050a16b8;
  padding: 3px;
}
.display-page .question-screen:has(.question-media:not([hidden])) .question-media img,
.display-page .question-screen:has(.question-media:not([hidden])) .question-media video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  border: 0;
  border-radius: 9px;
  box-shadow: none;
  object-fit: contain;
}
.display-page .question-screen:has(.question-media:not([hidden])) .question-media audio {
  width: min(900px, 96%);
  flex: 0 1 auto;
}
.display-page .question-bottom,
.display-page .question-screen:has(.question-media:not([hidden])) .question-bottom {
  flex: 0 0 auto;
  min-height: 35px;
  margin: 0;
  padding: 0 2px;
  align-items: center;
  gap: 12px;
}
.display-page .question-bottom .mini-muted {font-size: clamp(11px, 1vw, 14px);}
.display-page .hint-wrap {font-size: clamp(12px, 1.1vw, 16px); gap: 2px;}
.display-page .timer-group {align-items: baseline; gap: 7px;}
.display-page .timer-value {font-size: clamp(29px, 3.2vw, 52px); line-height: 1;}
.display-page .timer-label,
.display-page .timer-unit {font-size: 9px; letter-spacing: 1.5px;}
.display-page .timer-track {flex: 0 0 auto; height: 4px; margin: 0;}
.display-page .question-screen:not(:has(.question-media:not([hidden]))) {justify-content: space-between;}
.display-page .question-screen:not(:has(.question-media:not([hidden]))) .question-prompt {
  font-size: clamp(38px, 5.5vw, 80px);
  margin: auto 0;
}

/* Video/image answers use exactly the same bounded area. */
.display-page .answer-screen:has(.answer-media:not([hidden])) {
  height: 100%;
  max-width: none;
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
}
.display-page .answer-screen:has(.answer-media:not([hidden])) .superline,
.display-page .answer-screen:has(.answer-media:not([hidden])) .answer-label {flex: 0 0 auto; font-size: 10px;}
.display-page .answer-screen:has(.answer-media:not([hidden])) h1 {
  flex: 0 0 auto;
  max-width: 100%;
  margin: 0;
  font-size: clamp(25px, 3vw, 50px);
  line-height: 1.13;
}
.display-page .answer-screen:has(.answer-media:not([hidden])) .answer-media {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ffffff22;
  border-radius: 13px;
  background: #050a16b8;
  padding: 3px;
}
.display-page .answer-screen:has(.answer-media:not([hidden])) .answer-media video,
.display-page .answer-screen:has(.answer-media:not([hidden])) .answer-media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  border-radius: 9px;
  box-shadow: none;
  object-fit: contain;
}
.display-page .answer-screen:has(.answer-media:not([hidden])) .answer-origin {
  flex: 0 0 auto;
  max-width: 100%;
  max-height: 2.9em;
  margin: 0;
  overflow: hidden;
  font-size: clamp(11px, 1.1vw, 16px);
  line-height: 1.35;
}
.display-page .answer-screen:has(.answer-media:not([hidden])) .answer-media audio {width: min(900px, 96%);}
.display-page .scoreboard-screen {max-height: 100%; overflow-y: auto;}

@media (max-width: 650px) {
  .display-page .display-header {padding: 6px 11px; gap: 5px;}
  .display-page .display-header .brand {gap: 5px; font-size: 10px; letter-spacing: .8px;}
  .display-page .display-header .brand-mark {width: 25px; height: 25px; font-size: 18px; border-radius: 7px;}
  .display-page .display-fullscreen {font-size: 10px; padding: 5px 7px;}
  .display-page .stage,
  .display-page .stage:has(.question-media:not([hidden])),
  .display-page .stage:has(.answer-media:not([hidden])) {padding: 3px 9px 4px;}
  .display-page .question-meta {gap: 5px;}
  .display-page .round-pill,
  .display-page .point-pill,
  .display-page .q-counter {font-size: 9px; padding: 6px 8px;}
  .display-page .question-screen:has(.question-media:not([hidden])) .question-prompt {font-size: clamp(21px, 5vw, 32px);}
  .display-page .question-bottom {flex-direction: row; align-items: center; gap: 8px;}
  .display-page .timer-value {font-size: 32px;}
  .display-page .timer-label,.display-page .timer-unit {font-size: 8px;}
  .display-page .display-footer {padding: 2px 9px 4px; font-size: 8px;}
}
@media (max-height: 600px) {
  .display-page .display-header {padding-top: 4px; padding-bottom: 4px;}
  .display-page .question-screen:has(.question-media:not([hidden])) .question-prompt {font-size: clamp(21px, 2.3vw, 37px);}
  .display-page .question-bottom {min-height: 28px;}
  .display-page .timer-value {font-size: 29px;}
  .display-page .display-footer {padding-top: 1px; padding-bottom: 2px;}
}

/* QuizRoom v8 — prominent number, fullscreen audio illustration, team buzzers. */
.display-page .q-counter {
  background: #826afa28;
  color: #f6f0ff;
  border: 1px solid #bba3ff80;
  padding: 8px 16px;
  letter-spacing: .09em;
  font-size: clamp(12px, 1.15vw, 17px);
  box-shadow: 0 0 28px #7857f522;
}
.display-page #q-media.audio-stage {
  padding: 0;
  position: relative;
  isolation: isolate;
  background: radial-gradient(circle at 50% 50%,#202345,#080e22 72%);
}
.display-page #q-media.audio-stage .audio-visual-canvas {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.display-page #q-media.audio-stage audio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.audio-visual-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5%;
  pointer-events: none;
  text-align: center;
  text-shadow: 0 2px 24px #000;
}
.audio-visual-title span {font-size: clamp(11px,1vw,16px);font-weight:800;color:#cabaff;letter-spacing:.22em}
.audio-visual-title strong {font-size: clamp(15px,1.75vw,27px);font-weight:720;color:#f6f2ff}
.buzz-indicator[hidden] {display: none !important}
.display-page .buzz-indicator {
  flex: 0 1 auto;
  margin-left: auto;
  display: flex;
  gap: 4px;
  flex-direction: column;
  justify-content: center;
  padding: 8px 16px;
  max-width: 45%;
  border-radius: 12px;
  background: #f3bb4730;
  border: 1px solid #f8d27f;
  color: #fff2bb;
  box-shadow: 0 0 30px #e6a84924;
}
.display-page .buzz-indicator span {font-size: clamp(8px, .75vw, 12px);letter-spacing:.16em;font-weight:800}
.display-page .buzz-indicator strong {font-size: clamp(15px, 1.5vw, 22px);line-height:1.1;overflow-wrap:anywhere}
.display-page .buzz-indicator + .timer-group {margin-left: 0}
@media(max-width:700px) {
  .display-page .q-counter {font-size: 12px; padding: 5px 9px}
  .display-page .buzz-indicator {max-width: 55%;padding: 5px 8px}
  .audio-visual-title {bottom: 7%}
}
.admin-buzzer-status {
  margin-top: 16px;
  border: 1px solid #b4adf04d;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 700;
  color: #b9c4df;
  background: #7b6fea12;
}
.admin-buzzer-status.won {background:#ffca4f28;color:#ffe2a0;border-color:#d8ae50}
.team-buzzer-panel {margin: 22px 0 18px;border-radius:14px;border:1px solid #ffffff26;background:#ffffff08;padding:16px}
.team-buzzer-panel h3 {font-size:18px;margin:0 0 9px}
.team-buzzer-panel > p {font-size:13px;line-height:1.5}
.team-buzzer-link {border-top:1px solid #ffffff17;padding:12px 0}
.team-buzzer-link:first-of-type{margin-top:12px}
.team-buzzer-link > div:first-child {display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.team-buzzer-link strong {font-size:14px}
.team-buzzer-link a {font-size:12px;color:#bda7ff}
.team-link-actions {display:flex;gap:6px}
.team-link-actions input {min-width:0;flex:1;font-size:12px;border-radius:8px;padding:9px;background:#05091770;color:#b4bdcf;border:1px solid #ffffff25}
.team-link-actions .btn {flex:none}

/* A full-screen, tap-friendly team page with no admin privileges. */
.team-page {
  min-height:100vh;
  min-height:100dvh;
  background: radial-gradient(ellipse at 50% 45%,#293251 0%,#0c1429 58%,#080c1b 100%);
  color: #f7f6ff;
  font-family: inherit;
}
.team-buzzer-app {width:100%;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding: max(18px,env(safe-area-inset-top)) 20px max(18px,env(safe-area-inset-bottom));text-align:center}
.team-phone-header {display:flex;align-items:center;justify-content:center;gap:12px;font-size:11px;letter-spacing:.15em;font-weight:800;color:#aeb7ce}
.team-phone-header .brand-mark {display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;font-size:22px}
.team-buzzer-content {flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;min-height:0}
.team-name-tag {font-size:12px;letter-spacing:.22em;color:#adbad8;font-weight:800}
.team-buzzer-content h1 {font-size:clamp(28px,7vw,52px);line-height:1.1;margin:0;overflow-wrap:anywhere}
.team-current-question {color:#b6bfd5;margin:0;font-size:16px}
.team-buzz-button {width:min(73vw,320px);height:min(73vw,320px);min-height:180px;border-radius:50%;border:9px solid #ffffff35;background:radial-gradient(circle at 38% 32%,#7d879c,#384259);color:#e8eaf0;box-shadow:inset 0 7px 19px #ffffff26,0 20px 80px #0008;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-weight:900;font-size:clamp(20px,5vw,29px);letter-spacing:.05em;touch-action:manipulation;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform .12s,background .15s,box-shadow .15s;cursor:not-allowed}
.team-buzz-symbol {display:block;font-size:70px;line-height:1}
.team-ready .team-buzz-button {background:radial-gradient(circle at 35% 28%,#ffaf9e,var(--team-color) 57%,#5f2339 100%);border-color:#ffffff94;color:#fff;cursor:pointer;box-shadow:inset 0 9px 24px #ffffff55,0 12px 30px #0008,0 0 75px color-mix(in srgb,var(--team-color) 60%,transparent)}
.team-ready .team-buzz-button:active {transform:scale(.94)}
.team-won .team-buzz-button {background:radial-gradient(circle at 40% 26%,#a8f2ce,#228a6a);border-color:#cbffe8;color:white}
.team-buzz-status {font-size:clamp(17px,4.4vw,22px);font-weight:800;min-height:2.5em;max-width:470px;line-height:1.4}
.team-buzz-hint {font-size:13px;line-height:1.55;color:#919cb6;max-width:390px;margin:0}
.team-phone-footer {font-size:11px;letter-spacing:.13em;color:#8291b1}
@media(max-height:650px) {
  .team-buzzer-content {gap:8px}
  .team-buzz-button {height:min(50vh,220px);width:min(50vh,220px);min-height:140px}
  .team-buzz-symbol {font-size:48px}
}
@media(prefers-reduced-motion:reduce) {
  .team-buzz-button {transition:none}
}

.display-page .question-bottom:has(.buzz-indicator:not([hidden])) #q-hint-wait {display:none}
.display-page .question-bottom:has(.buzz-indicator:not([hidden])) {flex-wrap:wrap}
.audio-visual-title {
  left: 50%; right: auto;
  transform: translateX(-50%);
  width: max-content;
  max-width: 90%;
  padding: 9px 24px;
  border-radius: 16px;
  background: #080e22c9;
  border: 1px solid #ffffff1d;
  z-index: 1;
}
.team-page .team-buzz-button:disabled {opacity:1}