/* Экран проектора. Намеренно один тёмный вид в любой теме: сцена, на которой цвета команд читаются издалека. */
body:has(.stage) { overflow: hidden; background: #0b0c1c; }
.stage {
  --st-bg: #0b0c1c; --st-ink: #ffffff; --st-muted: #9ca2c4; --st-dark: #14162b;
  position: fixed; inset: 0; display: flex; flex-direction: column; padding: 3.2vh 4vw; background: var(--st-bg); color: var(--st-ink); overflow: hidden; font-family: var(--body);
}
.stage h1 { font-family: var(--display); font-weight: 900; letter-spacing: -.045em; line-height: .98; text-wrap: balance; }
.stage p { color: #c9cde6; }
.stage .timer { font: 600 clamp(40px, 5vw, 86px) var(--mono); letter-spacing: -.06em; color: #fff; font-variant-numeric: tabular-nums; }
.hud { display: flex; justify-content: space-between; align-items: center; gap: 3vw; font: 600 clamp(16px, 1.7vw, 28px) var(--body); color: var(--st-muted); }
.hud > span:last-child { text-align: right; }
.bar { position: absolute; left: 0; right: 0; bottom: 0; height: 1.4vh; background: #1d2040; }
.bar i { display: block; height: 100%; background: #ffd23f; transition: width .3s linear; }
.stage .connection { position: absolute; left: 1vw; bottom: 1.4vh; font-size: 0; color: #ff9aa4; }
.stage .connection.offline { font-size: 14px; }
.stage .sound { position: absolute; right: 1.2vw; bottom: 2.2vh; z-index: 5; padding: 6px 12px; font: 600 12px var(--body); border: 1px solid #3b3f6b; border-radius: 8px; background: transparent; color: var(--st-muted); opacity: .45; cursor: pointer; }
.stage .sound:hover { opacity: 1; }
.pause-note { position: absolute; z-index: 6; top: 2vh; left: 50%; transform: translateX(-50%); padding: .6vh 2vw; border-radius: 99px; background: #ffd23f; color: var(--st-dark); font: 800 clamp(18px, 2vw, 32px) var(--display); }
.center-msg { flex: 1; display: grid; place-content: center; gap: 2vh; text-align: center; }
.center-msg h1 { font-size: clamp(48px, 8vw, 150px); }
.center-msg p { font-size: clamp(20px, 2.4vw, 40px); }

/* лобби */
.st-lobby { display: grid; grid-template-columns: 1fr minmax(320px, 34vw); gap: 4vw; padding: 0; }
.lobby-left { display: flex; flex-direction: column; justify-content: center; gap: 3vh; padding: 5vh 0 5vh 4vw; min-width: 0; }
.room-title { font: 700 clamp(14px, 1.4vw, 24px) var(--body); letter-spacing: .08em; text-transform: uppercase; color: #ffd23f !important; }
.lobby-left h1 { font-size: clamp(40px, 5.6vw, 108px); }
.lobby-left .sub { max-width: 32ch; font-size: clamp(18px, 1.9vw, 32px); }
.join-row { display: flex; align-items: center; gap: 3vw; }
.qr-wrap { flex: none; width: min(34vh, 22vw); padding: 1.1vh; background: #fff; border-radius: 12px; }
.qr-wrap img { width: 100%; display: block; }
.join-url { display: grid; gap: .8vh; min-width: 0; }
.join-url span { font-size: clamp(13px, 1.2vw, 20px); color: var(--st-muted); }
.join-url strong { font-size: clamp(18px, 1.8vw, 32px); overflow-wrap: anywhere; }
.room-code { font: 700 clamp(36px, 5vw, 92px) var(--mono); letter-spacing: .14em; color: #ffd23f; line-height: 1; }
.join-url em { font-style: normal; font-size: clamp(16px, 1.6vw, 28px); margin-top: .6vh; }
.lobby-teams { display: grid; grid-auto-rows: 1fr; height: 100%; }
.team-tile { display: flex; justify-content: space-between; align-items: center; gap: 2vw; padding: 0 3vw; background: var(--tc); color: var(--st-dark); font-weight: 800; font-size: clamp(22px, 2.6vw, 46px); min-width: 0; }
.team-tile span { overflow-wrap: anywhere; }
.team-tile b { font: 900 clamp(48px, 7vw, 130px) var(--display); letter-spacing: -.06em; }

/* вопрос */
.st-quiz { gap: 2.5vh; padding-bottom: 5vh; }
.q-text { font-size: clamp(30px, 4.2vw, 78px); overflow-wrap: anywhere; }
.st-quiz .question-image { max-height: 22vh; margin: 0 auto; object-fit: contain; }
.answers { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.4vh 1.4vw; }
.answers.n2 { grid-template-columns: 1fr; }
.answer { display: flex; align-items: center; gap: 1.6vw; min-height: 0; padding: 0 2vw; border-radius: 10px; background: var(--ac); color: var(--st-dark); font-weight: 800; font-size: clamp(20px, 2.4vw, 44px); line-height: 1.1; overflow-wrap: anywhere; }
.answer b { flex: none; display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; background: var(--st-dark); color: var(--ac); font: 800 .62em var(--display); }
.answered { font-size: clamp(16px, 1.6vw, 26px); color: var(--st-muted); }
.answered strong { color: #fff; }

/* разбор */
.review-grid { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 38vw), 1fr)); gap: 2.5vh 3vw; align-content: center; overflow: hidden; }
.review-card { padding: .6vh 0 .6vh 1.6vw; border-left: .8vh solid #ffd23f; }
.review-card small { display: block; font-size: clamp(14px, 1.4vw, 24px); color: var(--st-muted); }
.review-card strong { font-size: clamp(24px, 2.8vw, 50px); line-height: 1.1; font-weight: 800; }

/* таблица */
.race { flex: 1; display: grid; align-content: center; gap: 2.6vh; }
.race-row { display: grid; grid-template-columns: 5vw 1fr; align-items: center; }
.rank { font: 900 clamp(30px, 4vw, 70px) var(--display); color: #4a4f7d; }
.race-bar { display: flex; justify-content: space-between; align-items: center; gap: 2vw; min-width: 36%; padding: 2.2vh 2vw; border-radius: 10px; background: var(--tc); color: var(--st-dark); font-weight: 800; font-size: clamp(24px, 3.2vw, 58px); white-space: nowrap; transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.race-bar strong { overflow: hidden; text-overflow: ellipsis; }
.race-bar b { font: 900 1.2em var(--display); letter-spacing: -.05em; }

/* финал */
.st-winner { padding: 0; }
.winner-fill { position: absolute; inset: 0; }
.winner-text { position: relative; margin: auto; text-align: center; color: var(--st-dark); animation: rise .65s ease-out both; }
.winner-text span { font: 800 clamp(20px, 2.4vw, 40px) var(--body); }
.winner-text h1 { margin: 2vh 4vw; font-size: clamp(60px, 10vw, 200px); overflow-wrap: anywhere; }
.winner-text p { font: 800 clamp(24px, 3vw, 52px) var(--body); color: var(--st-dark); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* перерыв, конкурс, слайд */
.st-break .break-body { flex: 1; min-height: 0; position: relative; display: grid; place-items: center; text-align: center; isolation: isolate; }
.break-core { display: grid; gap: 14px; justify-items: center; }
.break-core .timer { font-size: clamp(90px, 19vw, 300px); }
.break-core p { font-size: clamp(16px, 1.6vw, 24px); }
.lens { position: absolute; z-index: -1; width: min(70vh, 70vw); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #ffd23f 0 2.5%, transparent 3%), repeating-radial-gradient(circle, transparent 0 5.5%, #ffd23f33 5.7% 6%, transparent 6.2% 11%); -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%); animation: pulse 4s ease-in-out infinite; pointer-events: none; }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.06); opacity: .85; } }
.activity-body { flex: 1; display: grid; align-content: center; gap: 2.5vh; max-width: 62vw; }
.activity-body h1 { font-size: clamp(44px, 6.4vw, 124px); }
.activity-body p { max-width: 30ch; font-size: clamp(20px, 2.4vw, 42px); }
.activity-clock { position: absolute; right: 4vw; bottom: 7vh; }
.activity-clock .timer { font-size: clamp(90px, 15vw, 280px); }
.slide-media { flex: 1; min-height: 0; display: grid; place-items: center; padding: 2vh 0; }
.slide-media .media { max-width: 100%; max-height: 78vh; object-fit: contain; }
@media (prefers-reduced-motion: reduce) { .lens, .winner-text { animation: none; } }