/* «Квизы» GameBuzz — экраны игры (телефон, ведущий, общий экран). Палитра и шрифты — как у сайта (ui-028).
   Сетка — шаг 4 px; поля 16 px; колонка игры до 560 px. Шапки и подвала сайта в игре нет. */
@font-face { font-family: 'Q Plex'; font-weight: 400; font-display: swap; src: url('../fonts/gbz-plex-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'Q Plex'; font-weight: 500; font-display: swap; src: url('../fonts/gbz-plex-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'Q Plex'; font-weight: 600; font-display: swap; src: url('../fonts/gbz-plex-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'Q Oswald'; font-weight: 600; font-display: swap; src: url('../fonts/gbz-oswald-600.woff2') format('woff2'); }
/* Unbounded (OFL, fonts/OFL-unbounded.txt) — заголовки оформления «Студия» */
@font-face { font-family: 'Q Unb'; font-weight: 800; font-display: swap; src: url('../fonts/gbz-unbounded-800-cyr.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Q Unb'; font-weight: 800; font-display: swap; src: url('../fonts/gbz-unbounded-800-lat.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #12100D; --s1: #1B1814; --s2: #24201B; --s3: #2E2922;
  --line: #352F28; --line2: #4D453B;
  --tx: #EEE7DB; --tx2: #B8AC98; --tx3: #998C7A;
  --amber: #E2A74E; --amber-ink: #1A1208; --amber-soft: rgba(226, 167, 78, .14); --amber-line: rgba(226, 167, 78, .48);
  --ok: #6CC287; --ok-soft: rgba(108, 194, 135, .16); --bad: #E7776B; --bad-soft: rgba(231, 119, 107, .14);
  --f: 'Q Plex', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --f-pub: 'Q Oswald', 'Arial Narrow', Arial, sans-serif;
  --r: 12px; --r-s: 8px;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--tx); font: 400 16px/24px var(--f); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--amber); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- каркас ---------- */
.app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; width: 100%; max-width: 560px; margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.screen { display: flex; flex-direction: column; gap: 16px; flex: 1; }
.grow { flex: 1; }
.center { text-align: center; }
.muted { color: var(--tx2); }
.small { font-size: 14px; line-height: 20px; }
.kicker { margin: 0; color: var(--amber); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.h1 { margin: 0; font: 600 32px/40px var(--f-pub); letter-spacing: .01em; }
.h2 { margin: 0; font: 600 24px/32px var(--f-pub); letter-spacing: .01em; }
.h3 { margin: 0; font-size: 18px; line-height: 24px; font-weight: 600; }
p { margin: 0; }

/* ---------- кнопки ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: var(--r);
  border: 1px solid var(--line2); background: var(--s1); color: var(--tx); font-weight: 600; text-decoration: none; text-align: center; }
.btn:hover { border-color: var(--tx3); }
.btn-p { background: var(--amber); border-color: var(--amber); color: var(--amber-ink); }
.btn-p:hover { background: #EBB563; border-color: #EBB563; }
.btn-b { width: 100%; }
.btn-s { min-height: 40px; padding: 0 16px; border-radius: var(--r-s); font-size: 14px; }
.btn:disabled { opacity: .45; cursor: default; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--tx2); }
.btn-ghost:hover { color: var(--tx); border-color: var(--line2); }
.iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: var(--r-s);
  border: 1px solid var(--line); background: var(--s1); color: var(--tx2); }
.iconbtn svg { width: 20px; height: 20px; }

/* ---------- поля ---------- */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label, .lbl { color: var(--tx2); font-size: 14px; line-height: 20px; font-weight: 500; }
.input { width: 100%; height: 56px; padding: 0 16px; border-radius: var(--r); border: 1px solid var(--line2); background: var(--s1);
  font-size: 20px; line-height: 28px; font-weight: 500; }
.input:focus { border-color: var(--amber); outline: none; box-shadow: 0 0 0 3px var(--amber-soft); }
.input-code { letter-spacing: .3em; font-family: var(--f-pub); font-size: 24px; text-align: center; }

/* переключатель из 2–3 вариантов */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: var(--r); background: var(--s1); border: 1px solid var(--line); }
.seg button { min-height: 40px; padding: 0 8px; border: 0; border-radius: var(--r-s); background: transparent; color: var(--tx2); font-size: 14px; line-height: 18px; font-weight: 600; }
.seg button[aria-pressed="true"] { background: var(--s3); color: var(--tx); box-shadow: inset 0 0 0 1px var(--line2); }

/* ---------- карточки ---------- */
.card { padding: 16px; border-radius: var(--r); background: var(--s1); border: 1px solid var(--line); }
.card-a { border-color: var(--amber-line); }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; gap: 12px; }
.row-sb { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* ---------- вход ---------- */
.join-code { font: 600 40px/48px var(--f-pub); letter-spacing: .12em; }
.qr { display: block; width: 192px; height: 192px; margin: 0 auto; padding: 12px; border-radius: var(--r); background: #fff; }
.qr svg { display: block; width: 100%; height: 100%; }

/* ---------- лобби ---------- */
.people { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 18px; background: var(--s2);
  border: 1px solid var(--line); font-size: 15px; line-height: 20px; font-weight: 500; }
.chip.me { border-color: var(--amber-line); }
.chip.off { color: var(--tx3); border-style: dashed; }
.chip .tag { color: var(--amber); font-size: 12px; line-height: 16px; font-weight: 600; }
.chip button { margin: 0 -6px 0 0; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--tx3); }
.teams { display: grid; gap: 12px; }
.team { padding: 12px; border-radius: var(--r); background: var(--s1); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.team.mine { border-color: var(--amber-line); }
.team-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.team-n { font-weight: 600; font-size: 17px; line-height: 24px; }
.team-ed { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border-radius: var(--r-s); border: 1px solid var(--line2); background: var(--s2); font-weight: 600; }

/* ---------- игра: верхняя строка, таймер ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; }
.topbar .where { color: var(--tx2); font-size: 14px; line-height: 20px; font-weight: 500; }
.timer { min-width: 48px; text-align: right; font: 600 24px/32px var(--f-pub); font-variant-numeric: tabular-nums; }
.timer.low { color: var(--bad); }
.tbar { height: 4px; border-radius: 2px; background: var(--s2); overflow: hidden; }
.tbar i { display: block; height: 100%; width: 100%; background: var(--amber); transform-origin: left center; }
.tbar.low i { background: var(--bad); }
.reading { display: flex; align-items: center; gap: 8px; color: var(--amber); font-size: 14px; line-height: 20px; font-weight: 600; }
.reading i { width: 8px; height: 8px; border-radius: 4px; background: var(--amber); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }

.qtext { font-size: 22px; line-height: 30px; font-weight: 600; }
/* Ш-335: высота задана явно (4:3 от ширины колонки, не выше 34vh). Было aspect-ratio + max-height — в части версий
   Safari ограничение высоты переносилось на ширину, и рамка становилась уже кнопок (правый край не совпадал) */
.qimg { display: flex; align-items: center; justify-content: center; width: 100%; height: min(34vh, calc((min(100vw, 560px) - 58px) * .75 + 26px));   /* 4:3 от содержимого; 26 = поля 12 + рамка 1 с двух сторон */ padding: 12px; border-radius: var(--r); background: var(--s1); border: 1px solid var(--line); }
.qimg img { display: block; max-width: 100%; max-height: 100%; width: auto; height: 100%; object-fit: contain; }

/* варианты ответа */
.opts { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.opt { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 12px 8px 8px; border-radius: var(--r);
  border: 1px solid var(--line2); background: var(--s1); text-align: left; font-size: 17px; line-height: 22px; font-weight: 500; }
.opt .let { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-s);
  background: var(--s3); color: var(--tx2); font: 600 18px/1 var(--f-pub); }
.opt .ot { flex: 1; min-width: 0; }
.opt .cnt { flex: none; min-width: 28px; height: 24px; padding: 0 8px; border-radius: 12px; background: var(--s3); color: var(--tx2); font-size: 13px; line-height: 24px; font-weight: 600; text-align: center; }
.opt:not(:disabled):hover { border-color: var(--tx3); }
.opt.chosen { border-color: var(--amber); background: var(--amber-soft); }
.opt.chosen .let { background: var(--amber); color: var(--amber-ink); }
.opt.right { border-color: var(--ok); background: var(--ok-soft); }
.opt.right .let { background: var(--ok); color: #0E1A12; }
.opt.wrong { border-color: var(--bad); background: var(--bad-soft); }
.opt.wrong .let { background: var(--bad); color: #1E0D0B; }
.opt.dim { opacity: .55; }
.opt:disabled { cursor: default; }
.blitz .opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* Ш-335: с 1fr длинное слово и счётчик раздували ячейку за край */
/* узкие телефоны (320 px): в две колонки на текст остаётся ~55 px и строка уезжает за край — блиц в одну колонку */
@media (max-width: 359px) { .blitz .opts { grid-template-columns: 1fr; } }
.blitz .opt { min-height: 64px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 8px 12px; }
.blitz .opt .let { width: 24px; height: 24px; font-size: 14px; }

.num { display: flex; gap: 8px; }
.num .input { flex: 1; font: 600 28px/36px var(--f-pub); text-align: center; letter-spacing: .04em; }
.num .unit { align-self: center; color: var(--tx2); font-weight: 600; }
/* 320 px: четыре буквы кода ТВ («ABCD») рядом с кнопкой «Подключить» не помещались — поле и кнопка друг под другом */
@media (max-width: 359px) { .card .num { flex-wrap: wrap; } .card .num .input.input-code, .card .num .btn { flex: 1 1 100%; } }

.status { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 8px 12px; border-radius: var(--r-s); background: var(--s1); border: 1px solid var(--line); color: var(--tx2); font-size: 14px; line-height: 20px; }
.status b { color: var(--tx); font-weight: 600; }
.status.ok { border-color: var(--amber-line); }

/* «я у экрана»: вопрос коротко, кнопки А–Г крупно — телефон как пульт */
.remote .opt { min-height: 72px; font-size: 19px; line-height: 24px; }
.remote .opt .let { width: 48px; height: 48px; font-size: 26px; }
.remote.blitz .opt { min-height: 88px; }

/* итог вопроса */
.verdict { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: var(--r); font-weight: 600; font-size: 18px; line-height: 24px; }
.verdict.ok { background: var(--ok-soft); color: var(--ok); }
.verdict.bad { background: var(--bad-soft); color: var(--bad); }
.verdict.none { background: var(--s1); color: var(--tx2); }
.verdict .pts { font: 600 24px/32px var(--f-pub); font-variant-numeric: tabular-nums; }
.answer-big { font: 600 40px/48px var(--f-pub); color: var(--ok); }
.fact { position: relative; padding: 12px 16px 12px 20px; border-radius: var(--r); background: var(--s1); border: 1px solid var(--line); }
.fact::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 2px 2px 0; background: var(--amber); }
.fact .kicker { margin-bottom: 4px; }
.fact p { font-size: 16px; line-height: 24px; }
.explain { color: var(--tx2); font-size: 15px; line-height: 22px; }
.field-err { margin: 6px 0 0; color: var(--bad); font-size: 15px; line-height: 20px; text-align: left; }   /* Ш-335: «Такое имя уже есть» */
.numnone { margin: 0; color: var(--bad); font-size: 15px; line-height: 20px; text-align: center; }   /* Ш-338: «Никто не уложился в ±…» */
.numhint { margin: 0; color: var(--tx2); font-size: 15px; line-height: 20px; }   /* Ш-335: над полем числа — как начисляются очки */
.src { color: var(--tx3); font-size: 13px; line-height: 18px; word-break: break-word; }
.src a { color: var(--tx3); }

/* таблица очков */
.board { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.brow { display: grid; grid-template-columns: 32px 1fr auto 56px; align-items: center; gap: 12px; min-height: 48px; padding: 4px 12px 4px 8px; border-radius: var(--r-s); background: var(--s1); }
.brow.me { box-shadow: inset 0 0 0 1px var(--amber-line); }
.brow .pl { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 16px; background: var(--s3); color: var(--tx2); font: 600 16px/1 var(--f-pub); }
.brow.p1 .pl { background: var(--amber); color: var(--amber-ink); }
.brow .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.brow .sc { font: 600 20px/28px var(--f-pub); font-variant-numeric: tabular-nums; text-align: right; }
.brow .dl { color: var(--tx3); font-size: 14px; line-height: 20px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.brow .dl.up { color: var(--ok); }
.brow .dl.down { color: var(--bad); }

/* интро раунда */
.intro { justify-content: center; text-align: center; gap: 12px; }
.intro .rn { font: 600 72px/80px var(--f-pub); color: var(--amber); }
.intro .h1 { font-size: 36px; line-height: 44px; }

/* ставка */
.betv { font: 600 48px/56px var(--f-pub); text-align: center; font-variant-numeric: tabular-nums; }
.range { width: 100%; height: 40px; accent-color: var(--amber); }
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

/* финал */
.podium { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; gap: 8px; }
.pod { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 0; }
.pod .nm { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 15px; line-height: 20px; }
.pod .bar { width: 100%; display: flex; align-items: flex-start; justify-content: center; padding-top: 8px; border-radius: var(--r-s) var(--r-s) 0 0; background: var(--s2); font: 600 24px/32px var(--f-pub); }
.pod.p1 .bar { height: 112px; background: var(--amber); color: var(--amber-ink); }
.pod.p2 .bar { height: 80px; }
.pod.p3 .bar { height: 56px; }
.pod .sc { color: var(--tx2); font-size: 14px; line-height: 20px; font-weight: 600; }
.gen { text-align: center; }
.gen .h1 { color: var(--amber); }

/* меню ведущего */
.sheet { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center; background: rgba(8, 7, 5, .64); }
.sheet-b { width: 100%; max-width: 560px; max-height: 88vh; overflow: auto; display: flex; flex-direction: column; gap: 12px; padding: 16px 16px max(24px, env(safe-area-inset-bottom));
  border-radius: 16px 16px 0 0; background: var(--s2); border: 1px solid var(--line2); border-bottom: 0; }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 4px; }
.toggle input { width: 20px; height: 20px; accent-color: var(--amber); }
.toast { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 30; transform: translateX(-50%); max-width: calc(100% - 32px);
  padding: 12px 16px; border-radius: var(--r); background: var(--s3); border: 1px solid var(--line2); font-size: 15px; line-height: 20px; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
.conn { position: fixed; top: 0; left: 0; right: 0; z-index: 25; padding: 8px 16px; background: var(--bad); color: #1E0D0B; text-align: center; font-size: 14px; line-height: 20px; font-weight: 600; }

/* старт /quiz/play/ */
.pack { display: flex; flex-direction: column; gap: 12px; }
.facts { color: var(--tx2); font-size: 14px; line-height: 20px; }
.opts-set { display: flex; flex-direction: column; gap: 16px; }

@media (min-width: 600px) {
  .teams { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* страницы с шапкой и подвалом сайта (/quiz/play/, ошибки): колонка без растяжки на весь экран */
.q-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.q-page .app { flex: 1 0 auto; min-height: 0; padding-top: 32px; padding-bottom: 56px; }
@media (min-width: 1024px) { .q-page .app { padding-top: 56px; padding-bottom: 80px; } }

/* ---------- экран игры в оформлении «Студия» (0.1.1): та же палитра, что на ТВ ---------- */
body.studio {
  --bg: #0A0C18; --s1: #151830; --s2: #1C2040; --s3: #2B2F4A;
  --line: #2C3156; --line2: #3B4066;
  --tx: #F4F1EA; --tx2: #C9C3B6; --tx3: #8E88A3;
  --amber: #FFC440; --amber-ink: #1A1208; --amber-soft: rgba(255, 196, 64, .14); --amber-line: rgba(255, 196, 64, .5);
  --ok: #6FE08F; --ok-soft: rgba(111, 224, 143, .16); --bad: #FF5D7A; --bad-soft: rgba(255, 93, 122, .14);
  --f-pub: 'Q Unb', 'Q Oswald', Arial, sans-serif; --era: #FFC440;
  --r: 16px; --r-s: 12px;
  background: #0A0C18 linear-gradient(180deg, rgba(120, 140, 255, .07), rgba(10, 12, 24, 0) 240px) no-repeat;
}
body.studio[data-era="boomer"] { --era: #FF6B5B; }
body.studio[data-era="x"] { --era: #FFB020; }
body.studio[data-era="millennial"] { --era: #3DB8FF; }
body.studio[data-era="zoomer"] { --era: #B5E853; }
body.studio .h1, body.studio .h2, body.studio .join-code, body.studio .betv, body.studio .answer-big, body.studio .verdict .pts,
body.studio .timer, body.studio .brow .sc, body.studio .pod .bar, body.studio .intro .rn { font-weight: 800; letter-spacing: 0; }
body.studio .h1 { font-size: 28px; line-height: 36px; }
body.studio .h2 { font-size: 22px; line-height: 30px; }
body.studio .join-code { font-size: 36px; line-height: 44px; letter-spacing: .06em; }
body.studio .btn-p:hover { background: #FFD066; border-color: #FFD066; }
body.studio .topbar .where { color: var(--tx2); }
body.studio .topbar .where b { display: inline-block; margin-right: 8px; padding: 0 10px; border-radius: 12px; background: var(--era); color: #1A1208; font-size: 13px; line-height: 24px; font-weight: 600; }
body.studio .reading.off { visibility: hidden; }
/* варианты: цветные буквы, как на телевизоре */
body.studio .opt { min-height: 60px; border-radius: var(--r); background: linear-gradient(180deg, #232744, #1A1E38); border-color: var(--line2); font-weight: 600; }
body.studio .opt .let { width: 40px; height: 40px; border-radius: 10px; color: #fff; font: 800 18px/1 var(--f-pub); }
body.studio .opts li:nth-child(1) .let { background: #FF5D7A; }
body.studio .opts li:nth-child(2) .let { background: #3DB8FF; color: #08202E; }
body.studio .opts li:nth-child(3) .let { background: #B5E853; color: #1A2408; }
body.studio .opts li:nth-child(4) .let { background: #FFC440; color: #1A1208; }
body.studio .opt.chosen { border-color: var(--amber); background: linear-gradient(180deg, rgba(255, 196, 64, .22), rgba(255, 196, 64, .10)); box-shadow: 0 0 0 3px rgba(255, 196, 64, .16); }
body.studio .opt.right { border-color: var(--ok); background: linear-gradient(180deg, rgba(111, 224, 143, .24), rgba(111, 224, 143, .10)); }
body.studio .opt.wrong { border-color: var(--bad); background: linear-gradient(180deg, rgba(255, 93, 122, .2), rgba(255, 93, 122, .08)); }
body.studio .opt.chosen .let, body.studio .opt.right .let, body.studio .opt.wrong .let { box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); }
body.studio .opt .cnt.off { visibility: hidden; }
/* «я у экрана» (Ш-340): варианты с текстом, как «из дома», только крупнее */
body.studio .remote .opt { min-height: 76px; }
body.studio .remote .opt .let { width: 52px; height: 52px; font-size: 24px; border-radius: 14px; }
body.studio .blitz .opt .let { width: 28px; height: 28px; font-size: 13px; border-radius: 8px; }
body.studio .qimg { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); }
body.studio .fact, body.studio .status, body.studio .card, body.studio .team { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .09); }
body.studio .chip { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); }
/* заставка раунда: номер в круге цвета эпохи */
body.studio .intro .rn { width: 112px; height: 112px; margin: 0 auto 8px; border-radius: 56px; background: var(--era); color: #1A1208; font-size: 52px; line-height: 112px;
  box-shadow: 0 0 0 10px rgba(255, 255, 255, .04), 0 0 60px rgba(255, 196, 64, .2); animation: q-pop .6s cubic-bezier(.3, 1.4, .4, 1) both; }
body.studio .intro .kicker { color: var(--era); }
body.studio .intro .subt { color: var(--era); font-weight: 600; }
@keyframes q-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
/* итог вопроса */
body.studio .verdict { border-radius: var(--r); animation: q-pop .4s cubic-bezier(.3, 1.4, .4, 1) both; }
/* таблица: полоска очков под именем */
body.studio .brow { grid-template-columns: 32px minmax(0, 1fr) auto 76px; min-height: 56px; border-radius: var(--r-s); background: rgba(255, 255, 255, .04); }
body.studio .brow .nm { display: flex; flex-direction: column; }
body.studio .brow .nm i { display: block; height: 6px; margin-top: 6px; border-radius: 3px; background: linear-gradient(90deg, #FFB020, #FFD66B); transform-origin: 0 50%; animation: q-grow 1s cubic-bezier(.2, .8, .2, 1) both; }
body.studio .brow:not(.p1) .nm i { background: linear-gradient(90deg, #3DB8FF, #8FD6FF); }
@keyframes q-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* ставка: «на кону / в запасе» и что будет при ответе */
body.studio .betbar { display: flex; height: 28px; border-radius: 14px; background: #3A3550; overflow: hidden; }
body.studio .betbar i { display: block; height: 100%; background: repeating-linear-gradient(90deg, #FFC440 0 14px, #E5A82A 14px 17px); transition: width .2s; }
body.studio .betlegend { display: flex; justify-content: space-between; color: var(--tx2); font-size: 14px; line-height: 20px; font-weight: 600; }
body.studio .betlegend b { color: var(--amber); }
body.studio .betout { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body.studio .betout div { padding: 10px 12px; border-radius: var(--r-s); text-align: center; font-size: 13px; line-height: 18px; font-weight: 600; }
body.studio .betout .w { background: var(--ok-soft); color: var(--ok); }
body.studio .betout .l { background: var(--bad-soft); color: #FF8FA3; }
body.studio .betout b { display: block; margin-top: 2px; font: 800 20px/28px var(--f-pub); }
body.studio .pod.p1 .bar { background: linear-gradient(180deg, #FFD66B, #FFB020); }
body.studio .gen .h1 { color: var(--amber); }
/* финал: карточка игрока «Поделиться» (Ш-306) */
.scard { border-radius: var(--r); overflow: hidden; background: #0A0C18; border: 1px solid var(--line2); box-shadow: 0 12px 40px rgba(0, 0, 0, .45); }
.scard-img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; }
.row2 { display: grid; grid-template-columns: 1fr; gap: 8px; }
a.vk { color: var(--tx2); }
.fact .fimg { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin: 0 0 12px; border-radius: var(--r-s); }
.fact .fcr { margin: -8px 0 10px; color: var(--tx3); font-size: 11px; line-height: 14px; text-align: right; }

/* ---------- 0.1.2 (Ш-309): у каждого варианта свой цвет и фигура — как на телевизоре ---------- */
body.studio .o0 { --oc: #FFE23D; --oa: rgba(255, 226, 61, .5); --og: rgba(255, 226, 61, .18); }
body.studio .o1 { --oc: #1ED6C0; --oa: rgba(30, 214, 192, .5); --og: rgba(30, 214, 192, .18); }
body.studio .o2 { --oc: #F2539E; --oa: rgba(242, 83, 158, .5); --og: rgba(242, 83, 158, .18); }
body.studio .o3 { --oc: #9C88FF; --oa: rgba(156, 136, 255, .5); --og: rgba(156, 136, 255, .18); }
.shp { display: inline-block; flex: none; }
.shp svg { display: block; width: 100%; height: 100%; fill: currentColor; }
body.studio .opt { padding: 0 12px 0 0; overflow: hidden; border: 2px solid var(--oa); gap: 14px; }
body.studio .lamp { position: relative; flex: none; align-self: stretch; display: flex; align-items: center; justify-content: center; gap: 6px; width: 64px; min-height: 56px;
  background: var(--oc); color: #0B0D1A; }
body.studio .lamp::after { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, 0)); }
body.studio .lamp .shp { width: 20px; height: 20px; }
body.studio .lamp .l { font: 800 17px/1 var(--f-pub); }
body.studio .opt .ot { padding: 10px 0; }
body.studio .opt:not(:disabled):active { transform: scale(.985); }
body.studio .opt.chosen { border-color: var(--oc); background: linear-gradient(180deg, var(--og), rgba(255, 255, 255, .03)); box-shadow: 0 0 0 3px var(--og); }
body.studio .opt.right { border-color: var(--ok); background: linear-gradient(180deg, rgba(111, 224, 143, .2), rgba(111, 224, 143, .06)); box-shadow: 0 0 0 3px rgba(111, 224, 143, .18); }
body.studio .opt.wrong { border-color: var(--bad); background: linear-gradient(180deg, rgba(255, 93, 122, .18), rgba(255, 93, 122, .06)); }
body.studio .opt.dim { opacity: .45; }
body.studio .blitz .opt { flex-direction: row; align-items: center; gap: 10px; padding: 0 10px 0 0; min-height: 64px; }
body.studio .blitz .lamp { width: 40px; min-height: 64px; flex-direction: column; gap: 2px; }
body.studio .blitz .lamp .shp { width: 16px; height: 16px; } body.studio .blitz .lamp .l { font-size: 13px; }
/* Ш-335: в блице две узкие колонки — текст 16 px (самое длинное слово «Бесспорная» ≈ 91 px, места от 96 px на 360),
   счётчик на экране ответа — внутри текста после слов. Слово, которое не влезает совсем, рвётся, но за край не выходит */
body.studio .blitz .opt .ot { font-size: 16px; line-height: 1.25; overflow-wrap: break-word; min-width: 0; }
body.studio .blitz .opt .ot .cnt { display: inline-block; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; font-size: 12px; line-height: 20px; vertical-align: 1px; white-space: nowrap; }
body.studio .blitz .opt .ot .cnt.off { display: none; }   /* скрытый счётчик в тексте не занимает места (иначе невидимая вторая строка) */
/* верный ответ на телефоне «у экрана» */
body.studio .okline { display: flex; align-items: stretch; gap: 14px; overflow: hidden; border-radius: var(--r); border: 2px solid var(--ok); background: rgba(111, 224, 143, .1); font-size: 19px; line-height: 24px; font-weight: 600; }
body.studio .okline .lamp { width: 72px; min-height: 64px; }
body.studio .okline .ot { align-self: center; padding: 12px 12px 12px 0; }
/* заставка раунда: кнопка «Готов» */
body.studio .btn-ready { min-height: 64px; font-size: 20px; border-radius: 18px; box-shadow: 0 0 0 6px rgba(255, 196, 64, .14); animation: q-breathe 1.8s ease-in-out infinite; }
@keyframes q-breathe { 50% { box-shadow: 0 0 0 12px rgba(255, 196, 64, .06); } }
/* финал: «Считаем очки…», потом своё место */
body.studio .counting .dots { display: flex; justify-content: center; gap: 10px; margin: 8px 0; }
body.studio .counting .dots i { width: 14px; height: 14px; border-radius: 7px; background: var(--amber); animation: q-dot 1.2s ease-in-out infinite; }
body.studio .counting .dots i:nth-child(2) { animation-delay: .2s; } body.studio .counting .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes q-dot { 0%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: none; } }
body.studio .myplace { gap: 8px; animation: q-pop .6s cubic-bezier(.34, 1.56, .5, 1) both; }
body.studio .myplace .pn { display: flex; align-items: baseline; justify-content: center; gap: 10px; }
body.studio .myplace .pn b { font: 800 88px/1 var(--f-pub); color: var(--tx); }
body.studio .myplace .pn span { font: 800 24px/1 var(--f-pub); color: var(--tx2); }
body.studio .myplace.top .pn b { color: var(--amber); text-shadow: 0 0 40px rgba(255, 196, 64, .45); }
@media (prefers-reduced-motion: reduce) {
  body.studio .btn-ready, body.studio .counting .dots i { animation: none !important; }
}

/* Ш-341: «у экрана» варианты — внизу, у строки «Выбирайте ответ» (под большим пальцем), кнопки выше: места на экране много.
   На 320 px блиц — списком: в две колонки на самое длинное слово («Бесспорная», 16 px ≈ 91 px) остаётся 85 px */
body.studio .remote { margin-top: 12px; }
body.studio .remote .opt { min-height: 88px; }
body.studio .remote.blitz .opt { min-height: 96px; align-items: stretch; }
body.studio .remote.blitz .lamp { min-height: 0; }
body.studio .remote.blitz .opt .ot { align-self: center; }
@media (max-width: 359px) { body.studio .remote.blitz .opt { min-height: 72px; } }
@media (min-height: 740px) {
  body.studio .remote .opt { min-height: 100px; }
  body.studio .remote.blitz .opt { min-height: 112px; }
}
@media (min-height: 740px) and (max-width: 359px) { body.studio .remote.blitz .opt { min-height: 80px; } }
.nw { white-space: nowrap; }   /* Q.nobr: слово с дефисом целиком */