/* Игровые экраны: ведущий, игрок, один экран, игры для группы, проектор (холст: ряды 3–7, афиша).
   Сцена — во весь экран поверх приложения; у каждого экрана своя шапка. Размеры — как на холсте 390×844,
   на широком экране (ПК, проектор) — раскладки холста 1280×720. */

/* ---------- сцена ---------- */
.stage {
  position: fixed; left: 0; right: 0; top: var(--vt, 0px); height: var(--vh, 100%); z-index: 50; display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper); color: var(--ink); transition: background .35s ease, color .35s ease;
}
.stage.tone-teal { background: var(--teal); color: var(--white); }
.stage.tone-coral { background: var(--coral); color: var(--ink); }
.stage.tone-must { background: var(--must); color: var(--ink); }
.stage.tone-ink { background: var(--ink); color: var(--paper); }
.stage-top { position: absolute; left: 0; right: 0; top: var(--safe-top); z-index: 4; pointer-events: none; }
.stage-body {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  padding: calc(var(--safe-top) + 16px) var(--gut) 14px; display: flex; flex-direction: column;
}
.stage-foot { flex: none; padding: 8px var(--gut) calc(var(--safe-bottom) + 26px); display: flex; flex-direction: column; gap: 10px; }
.stage-foot.hidden { display: none; }
.stage .scr { flex: 1; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.stage .scr > * { flex: none; }
.stage .grow { flex: 1 1 auto; }
.stage .note { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--muted); }
.stage.tone-teal .note, .stage.tone-ink .note { color: var(--teal-l); }
.stage.tone-ink .note { color: var(--onink); }
.stage .note.ink { color: inherit; font-weight: 700; }
.stage .note.sm { font-size: 13px; line-height: 1.35; }
.stage .lead { font-size: 16px; font-weight: 700; line-height: 1.4; }
.stage .stitle { font-family: var(--cond); font-weight: 800; letter-spacing: -.005em; }
.stage .up1 { display: block; overflow: hidden; }
.stage .up1 > span { display: block; animation: up .75s var(--ease) .1s both; }

/* полоса таймера сверху (холст: timer_bar) */
.tbar { position: relative; height: 10px; background: var(--mute); overflow: hidden; }
.tbar > span { display: block; width: 100%; height: 100%; background: var(--coral); transform-origin: 0 50%; transition: transform 1s linear, background .4s ease; }
.tbar.warn > span { background: var(--warn); }
.stage.tone-teal .tbar, .stage.tone-ink .tbar { background: rgba(255, 255, 255, .18); }

/* шапка вопроса: «×», «ВОПРОС 03/10», секунды справа (холст: qhead) */
.qhead { display: flex; align-items: flex-start; gap: 12px; padding-top: 10px; }
.qhead .qn { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.qhead .qn .kicker { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qhead .qn b { font-family: var(--cond); font-weight: 800; font-size: 38px; line-height: 1; white-space: nowrap; }
.qhead .qn b span { color: var(--dim); }
.qhead .qr { margin-left: auto; display: flex; align-items: flex-end; gap: 10px; flex: none; }
.tsecs { display: flex; align-items: flex-end; gap: 4px; color: inherit; transition: color .3s ease; }
.tsecs .n { display: block; font-family: var(--cond); font-weight: 800; font-size: 78px; line-height: .8; transform-origin: 100% 100%; font-variant-numeric: tabular-nums; }
.tsecs small { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.tsecs.warn { color: var(--warn); }
.tsecs.warn .n { animation: beat .6s ease; }
/* шапка ответа и других экранов: кружок, крупная подпись */
.ahead { display: flex; align-items: center; gap: 12px; min-height: 42px; }
.ahead > b { font-family: var(--cond); font-weight: 800; font-size: 25px; line-height: 1; }
.ahead .sub { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--muted); text-align: right; }
.stage.tone-ink .ahead .sub { color: var(--onink); }
.stage.tone-ink .cbtn { border-color: var(--onink); color: var(--paper); }
.ahead .tt { flex: 1; min-width: 0; line-height: 1.15; }
.ahead .tt b { display: block; font-family: var(--cond); font-weight: 800; font-size: 25px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ahead .tt span { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.stage.tone-teal .ahead .tt span { color: var(--teal-l); }

/* значок темы вопроса */
.qtag {
  align-self: flex-start; padding: 4px 9px 3px; border-radius: 4px; background: var(--ink); color: var(--paper);
  font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; animation: rise .5s ease .15s both;
}
.qtag.teal { background: var(--teal); color: var(--white); }
.tagrow { display: flex; align-items: center; gap: 8px; }
.tagrow .qtag + .badge { margin-left: auto; }
/* текст вопроса крупно */
.qtitle { font-family: var(--cond); font-weight: 800; font-size: 42px; line-height: 40px; letter-spacing: -.005em; overflow-wrap: anywhere; }
.qtitle.md { font-size: 36px; line-height: 36px; }
.qtitle.sm { font-size: 30px; line-height: 31px; }
.qtitle > span { display: block; animation: rise .6s var(--ease) .2s both; }
.qsub { font-size: 15px; font-weight: 700; color: var(--muted); margin-top: -6px; }

/* ---------- варианты ответа ---------- */
/* плитки 2×2 у ведущего (холст: афиша — вопрос) */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tile {
  position: relative; height: clamp(116px, 19.2vh, 170px); padding: 0; border: 0; border-radius: 8px; text-align: left; overflow: hidden;
  background: var(--c); color: var(--cf); box-shadow: inset 0 0 0 0 var(--paper); transition: box-shadow .2s ease, opacity .3s ease, transform .12s ease;
  animation: inA .7s cubic-bezier(.2, .8, .3, 1) backwards;
}
.tile:nth-child(1) { animation-delay: .45s; } .tile:nth-child(2) { animation-delay: .53s; }
.tile:nth-child(3) { animation-delay: .61s; } .tile:nth-child(4) { animation-delay: .69s; }
.tile .l { position: absolute; left: 14px; top: 12px; font-family: var(--cond); font-weight: 800; font-size: 54px; line-height: .8; }
.tile .t { position: absolute; left: 14px; right: 12px; bottom: 14px; font-size: 18px; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.tile.long .t { font-size: 15.5px; }
.stage:not(.wide) .tiles.buzz .tile { height: 118px; }
.tile.xlong .t { font-size: 13.5px; }
button.tile:active { transform: scale(.97); }
.tile.mine { box-shadow: inset 0 0 0 4px var(--paper); }
.tile.c3.mine { box-shadow: inset 0 0 0 4px var(--ink); }
.tile .badge-mine {
  position: absolute; right: 10px; top: 12px; padding: 4px 8px 3px; border-radius: 4px; background: var(--paper); color: var(--ink);
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em; animation: pop .3s ease both;
}
.tile.dim { opacity: .35; }
.tile.odd:last-child { grid-column: 1 / -1; }
/* средние плитки: буква слева, текст рядом (холст: угадай героя) */
.tiles.mid .tile { height: 86px; }
.tiles.mid .tile .l { top: 50%; transform: translateY(-50%); font-size: 38px; }
.tiles.mid .tile .t { left: 52px; right: 10px; top: 50%; bottom: auto; transform: translateY(-50%); font-size: 18px; }
.tiles.mid .tile.long .t { font-size: 15px; }
/* правда или миф у ведущего: две высокие плитки с кружком */
.tf2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tf2 .tile { height: clamp(170px, 27vh, 232px); display: flex; flex-direction: column; justify-content: space-between; padding: 16px; }
.tf2 .tile .ring { width: 52px; height: 52px; border: 3px solid currentColor; border-radius: 50%; display: grid; place-items: center; }
.tf2 .tile .ring svg { width: 28px; height: 28px; stroke-width: 3; }
.tf2 .tile b { font-family: var(--cond); font-weight: 800; font-size: 46px; line-height: 1; }
.tf2 .tile .badge-mine { top: 16px; right: 14px; }

/* строки вариантов на одном экране (холст: один экран — вопрос) */
.arows { display: flex; flex-direction: column; gap: 8px; }
.arow {
  height: 78px; display: flex; align-items: center; gap: 14px; padding: 0 12px; border: 0; border-radius: 8px; text-align: left;
  background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow .2s ease, opacity .3s ease;
  animation: inA .6s cubic-bezier(.2, .8, .3, 1) backwards;
}
.arow:nth-child(1) { animation-delay: .3s; } .arow:nth-child(2) { animation-delay: .37s; }
.arow:nth-child(3) { animation-delay: .44s; } .arow:nth-child(4) { animation-delay: .51s; }
.arow .sq { width: 54px; height: 54px; font-size: 34px; }
.arow .sq svg { width: 26px; height: 26px; stroke-width: 3; }
.arow > .tx { flex: 1; min-width: 0; font-size: 20px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.arow.long > .tx { font-size: 16.5px; font-weight: 700; }
.arow.xlong > .tx { font-size: 14.5px; font-weight: 700; }
.arow.sel { box-shadow: inset 0 0 0 3px var(--ink); }
.arow:active { transform: scale(.98); }
/* ответ на одном экране: верный в бирюзовой рамке с галочкой, остальные бледнее */
.arows.done { gap: 6px; }
.arows.done .arow { height: auto; min-height: 52px; padding: 6px 12px 6px 8px; animation: rise .5s ease both; }
.arows.done .arow .sq { width: 38px; height: 38px; font-size: 24px; }
.arows.done .arow .sq svg { width: 20px; height: 20px; }
.arows.done .arow > .tx { font-size: 17px; font-weight: 700; }
.arows.done .arow.long > .tx, .arows.done .arow.xlong > .tx { font-size: 14.5px; }
.arows.done .arow.dim { opacity: .5; }
.arows.done .arow.ok { box-shadow: inset 0 0 0 2.5px var(--teal); }
.arows.done .arow.no { box-shadow: inset 0 0 0 2.5px var(--warn); opacity: .75; }
.arow .okmark { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: var(--white); }
.arow .okmark svg { width: 18px; height: 18px; stroke-width: 3; }
.arow .okmark.no { background: var(--warn); }

/* варианты у игрока: высокие цветные строки (холст: игрок — выбор ответа) */
.prows { display: flex; flex-direction: column; gap: 10px; }
.prow {
  position: relative; height: clamp(76px, 11.6vh, 98px); display: flex; align-items: center; gap: 16px; padding: 0 18px; border: 0; border-radius: 8px;
  background: var(--c); color: var(--cf); text-align: left; transition: opacity .3s ease, box-shadow .2s ease;
  animation: inA .6s cubic-bezier(.2, .8, .2, 1) backwards;
}
.prow:nth-child(1) { animation-delay: .15s; } .prow:nth-child(2) { animation-delay: .22s; }
.prow:nth-child(3) { animation-delay: .29s; } .prow:nth-child(4) { animation-delay: .36s; }
.prow .l { font-family: var(--cond); font-weight: 800; font-size: 62px; line-height: 1; flex: none; }
.prow .t { flex: 1; min-width: 0; font-size: 21px; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.prow.long .t { font-size: 17px; }
.prow.xlong .t { font-size: 14.5px; font-weight: 700; }
.prow:active { transform: scale(.98); }
.prow.mine { box-shadow: inset 0 0 0 4px var(--ink); }
.prow.dim { opacity: .35; }
.prow[disabled] { pointer-events: none; }
.accepted {
  display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px 4px; border-radius: 6px; background: var(--paper); color: var(--ink);
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; animation: pop .3s ease both; flex: none;
}
.accepted svg { width: 14px; height: 14px; stroke-width: 3; }
/* правда или миф у игрока: две большие кнопки */
.ptf { display: flex; flex-direction: column; gap: 10px; }
.ptf .prow { height: clamp(130px, 22vh, 188px); align-items: flex-end; justify-content: space-between; padding: 18px; }
.ptf .prow b { font-family: var(--cond); font-weight: 800; font-size: 72px; line-height: .9; }

/* карточка вопроса у игрока */
.pq { padding: 12px 16px 14px; border-radius: 8px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink); }
.pq .qtag { animation: none; font-size: 11px; padding: 3px 8px 2px; }
.pq p { margin: 8px 0 0; font-size: 19px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.pq .emo { font-size: 34px; line-height: 1.2; margin-top: 6px; }
.pq.must { background: var(--must-t); box-shadow: none; }
.pq.must p { font-family: var(--cond); font-weight: 800; font-size: 34px; line-height: 34px; }
.status { text-align: center; font-size: 16px; font-weight: 700; }

/* «ответили» на тёмном */
.stage.tone-teal .answered .segs i { background: rgba(255, 255, 255, .25); }
.stage.tone-teal .answered .segs i.on { background: var(--white); }

/* ---------- показ ответа у ведущего (холст: афиша — показ ответа) ---------- */
.ans { flex: 1; display: flex; flex-direction: column; gap: 18px; margin: calc(-16px - var(--safe-top)) calc(-1 * var(--gut)) 0; }
.ans > :not(.aband):not(.who) { margin-left: var(--gut); margin-right: var(--gut); }
.ans-left { display: contents; }
.ans-left > .aref { margin: 0 var(--gut); }
.aband {
  position: relative; padding: calc(var(--safe-top) + 18px) var(--gut) 24px; background: var(--coral-t); color: var(--ink); order: 1;
}
.aband.teal { background: var(--teal-t); }
.aband .ahead { margin-bottom: 22px; }
.aband .kicker { display: block; font-size: 12.5px; letter-spacing: .16em; }
.aband .big {
  margin-top: 6px; font-family: var(--cond); font-weight: 800; font-size: 92px; line-height: 82px; letter-spacing: -.005em;
  overflow-wrap: normal; word-break: normal; hyphens: none; padding-right: 0;
}
.aband .big > span { display: block; animation: up .75s var(--ease) .15s both; }
.aband .stamp {
  position: absolute; right: var(--gut); top: calc(var(--safe-top) + 118px); padding: 5px 12px 3px; border: 3px solid var(--teal); border-radius: 6px;
  color: var(--teal); font-family: var(--cond); font-weight: 800; font-size: 34px; line-height: 1; white-space: nowrap;
  transform-origin: 50% 50%; animation: stampin .5s cubic-bezier(.2, .8, .3, 1) 1s both;
}
.aband .stamp.bad { border-color: var(--warn); color: var(--warn); }
.aband .qline { margin-top: 12px; font-size: 15px; font-weight: 700; line-height: 1.3; animation: rise .6s ease .5s both; }
.aband .refrow { margin-top: 16px; animation: rise .6s ease .8s both; }
.ans .vrows { order: 2; }
.ans .aref { order: 3; }
.ans .who { order: 4; }
.ans .after { order: 2; } /* кто выбыл / кто ответил — сразу под вариантами, выше цитаты */
/* строки «как ответили» */
.vrows { display: flex; flex-direction: column; gap: 8px; }
.vrow { display: flex; align-items: center; gap: 12px; min-height: 50px; transition: opacity .6s ease; }
.vrow.dim { opacity: .55; }
.vrow .sq svg { width: 24px; height: 24px; stroke-width: 3; }
.vrow .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.vrow .mid > span { font-size: 16.5px; font-weight: 700; line-height: 1.1; overflow-wrap: anywhere; }
.vrow .track { display: block; height: 12px; border-radius: 6px; background: var(--track); overflow: hidden; }
.vrow .track i { display: block; height: 12px; border-radius: 6px; background: var(--dim); transform-origin: 0 50%; animation: grow 1.1s cubic-bezier(.3, 1.1, .5, 1) both; }
.vrow.ok .track i { background: var(--ink); }
.vrow > b { min-width: 32px; text-align: right; font-family: var(--cond); font-weight: 800; font-size: 36px; line-height: 1; }
.vrow .mine { margin-left: 6px; padding: 2px 6px 1px; border-radius: 4px; background: var(--ink); color: var(--paper); font-size: 10.5px; font-weight: 800; letter-spacing: .06em; vertical-align: 2px; }
/* место в Библии и цитата */
.aref { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; animation: rise .6s ease 1.2s both; }
.aref .refs { display: flex; flex-wrap: wrap; gap: 8px; }
.aref p { font-size: 16px; font-weight: 700; line-height: 1.4; }
.aref blockquote, .vq { margin: 0; font-size: 15.5px; font-style: italic; font-weight: 500; line-height: 1.4; }
.vq:empty { display: none; }
/* лента «кто ответил верно» */
.who { position: relative; height: 38px; overflow: hidden; background: var(--teal); color: var(--white); animation: fadein .5s ease 1.6s both; }
.who .mq-t { animation-duration: 30s; }
.who .mq-t > span { gap: 7px; padding-right: 18px; font-family: var(--sans); font-size: 15.5px; font-weight: 700; }
.who .mq-t > span::after { display: none; }
.who .mq-t em { font-style: normal; color: var(--coral-t); font-weight: 800; }
/* стих целиком (собери стих) */
.fullverse { padding: 18px 18px 14px; border-radius: 8px; background: var(--card); box-shadow: inset 0 0 0 2px var(--teal); color: var(--ink); animation: rise .6s ease .5s both; }
.fullverse p { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.5; }
.fullverse span { display: block; margin-top: 10px; font-size: 12.5px; font-weight: 800; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
/* хронология: события по порядку */
.evrows { display: flex; flex-direction: column; gap: 6px; }
.evrow { display: flex; align-items: center; gap: 10px; min-height: 52px; animation: inL .6s var(--ease) both; }
.evrow .sq { width: 40px; height: 40px; font-size: 24px; }
.evrow > b { flex: 1; min-width: 0; font-size: 17px; font-weight: 700; line-height: 1.2; }
.evrow .refbtn { height: 36px; padding: 0 8px 0 7px; font-size: 12px; }

/* ---------- таблица и итоги (холст: таблица между вопросами, итоги) ---------- */
.rbars { display: flex; flex-direction: column; gap: 6px; }
.rbar { display: flex; align-items: center; gap: 6px; height: 40px; animation: inL .6s var(--ease) both; }
.rbar .rk { width: 28px; flex: none; font-family: var(--cond); font-weight: 800; font-size: 25px; color: var(--muted); }
.rbar.r1 .rk { color: var(--coral); }
.rbar .bar {
  height: 40px; min-width: 70px; display: flex; align-items: center; padding-left: 12px; border-radius: 6px; overflow: hidden; white-space: nowrap;
  background: var(--card); color: var(--ink); font-size: 16px; font-weight: 700; transition: width .6s var(--ease);
}
.rbar .bar span { overflow: hidden; text-overflow: ellipsis; }
.rbar.r1 .bar { background: var(--coral); }
.rbar.me .bar { background: var(--teal-t); }
.rbar .sc { margin-left: 2px; font-family: var(--cond); font-weight: 800; font-size: 23px; white-space: nowrap; }
.rbar .plus { padding: 3px 7px 2px; border-radius: 4px; background: var(--teal-t); color: var(--ink); font-size: 12px; font-weight: 800; animation: pop .35s ease .6s both; }
.rbar.team .bar { color: inherit; }
.stage.tone-ink .rbar .rk { color: var(--rankink); }
.stage.tone-ink .rbar.r1 .rk { color: var(--coral-t); }
.stage.tone-ink .rbar .bar { background: var(--paper); }
.stage.tone-ink .rbar.r1 .bar { background: var(--coral); }
.stage.tone-ink .rbar.me .bar { background: var(--teal-t); }
.stage.tone-ink .rbar .sc { color: var(--paper); }
.stage.tone-ink .rbar.r1 .sc { color: var(--coral-t); }
.bigt { font-family: var(--cond); font-weight: 800; letter-spacing: -.005em; overflow: hidden; }
.bigt > span { display: block; animation: up .8s var(--ease) .1s both; }
.wintag { font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--coral-t); animation: rise .5s ease both; }
.winrow { display: flex; align-items: flex-end; gap: 12px; margin-top: 6px; }
.winrow .bigt { font-size: 74px; line-height: 64px; flex: 1; min-width: 0; white-space: nowrap; text-overflow: ellipsis; }
.winrow b { padding-bottom: 6px; font-family: var(--cond); font-weight: 800; font-size: 28px; color: var(--coral-t); white-space: nowrap; animation: rise .5s ease .5s both; }

/* бирюзовая или горчичная полоса со сведениями */
.stage .mq.must { --mq-dot: var(--ink); }
.stage .mq { margin: 0 calc(-1 * var(--gut)); }

/* ---------- отсчёт перед первым вопросом (холст: ведущий — перед первым вопросом) ---------- */
.intro-n { position: relative; display: flex; align-items: flex-end; justify-content: space-between; margin-top: -6px; }
.intro-n .num { height: 300px; overflow: hidden; margin-left: -10px; font-family: var(--cond); font-weight: 800; font-size: 360px; line-height: 300px; color: var(--coral); }
.intro-n .num span { display: block; animation: up .5s var(--ease) both; }
.intro-n .ready { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding-bottom: 96px; animation: rise .6s ease .3s both; }
.intro-n .ready b { font-family: var(--cond); font-weight: 800; font-size: 44px; line-height: 1; }
.intro-n .ready span { font-size: 14px; font-weight: 700; }
.rules3 { display: flex; flex-direction: column; gap: 12px; }
.rules3 > div { display: flex; gap: 14px; align-items: baseline; animation: rise .6s ease both; }
.rules3 > div b { font-family: var(--cond); font-weight: 800; font-size: 30px; color: var(--coral); flex: none; }
.rules3 > div span { font-size: 17px; font-weight: 700; line-height: 1.3; }
.rules3.sm > div b { font-size: 20px; }
.rules3.sm > div span { font-size: 15px; }
.rules3.sm { gap: 6px; }

/* ---------- комната ведущего (холст: афиша — комната) ---------- */
.room { flex: 1; display: flex; flex-direction: column; gap: 0; }
.room .rtop { display: flex; align-items: center; gap: 10px; margin: 0 -4px; }
.room .rtop .tt { flex: 1; text-align: center; line-height: 1.15; min-width: 0; }
.room .rtop .tt b { display: block; font-family: var(--cond); font-weight: 800; font-size: 23px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room .rtop .tt span { font-size: 12.5px; font-weight: 600; color: var(--teal-l); }
.room .klabel { margin-top: 22px; font-size: 12px; font-weight: 800; letter-spacing: .18em; color: var(--teal-l); text-transform: uppercase; }
.code-roll { display: flex; gap: 4px; height: 132px; margin: 6px 0 0 -6px; font-family: var(--cond); font-weight: 800; font-size: 156px; line-height: 132px; }
.code-roll > span { display: block; height: 132px; overflow: hidden; }
.code-roll > span > span { display: block; transition: transform 1.6s cubic-bezier(.15, .85, .25, 1); }
.code-roll > span > span > i { display: block; height: 132px; font-style: normal; }
.room .howto { margin-top: 10px; font-size: 16px; font-weight: 600; line-height: 1.35; }
.botname { padding: 1px 6px; border-radius: 4px; background: var(--paper); color: var(--ink); font-weight: 800; white-space: nowrap; }
.ptags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.ptag {
  height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px 0 5px; border-radius: 20px;
  background: var(--paper); color: var(--ink); font-size: 16px; font-weight: 700; animation: tagin .55s cubic-bezier(.2, .8, .3, 1) both;
  max-width: 100%; border: 0;
}
.ptag > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptag .ava { width: 30px; height: 30px; font-size: 14px; }
.ptag.s1 { background: transparent; color: var(--white); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6); }
.ptag.s2 { background: var(--coral-t); color: var(--ink); }
.ptag.off { opacity: .55; }
.ptag small { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 2px 5px 1px; border-radius: 4px; background: var(--ink); color: var(--paper); margin-left: 2px; }
.room .count { display: flex; align-items: flex-end; gap: 12px; margin-top: auto; padding-top: 18px; }
.room .count .n { display: block; height: 104px; overflow: hidden; font-family: var(--cond); font-weight: 800; font-size: 124px; line-height: 104px; }
.room .count .n > span { display: block; animation: up .55s cubic-bezier(.3, 1.2, .5, 1) both; }
.room .count .w { padding-bottom: 12px; font-family: var(--cond); font-weight: 700; font-size: 25px; line-height: 1; }
.room .wait { margin-top: 18px; font-size: 16px; font-weight: 700; color: var(--teal-l); }
.room .qr-big { display: none; }
/* «Я тоже играю» */
.hostplay {
  width: 100%; height: 60px; display: flex; align-items: center; gap: 12px; padding: 0 14px 0 16px; border-radius: 10px; text-align: left;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6); color: var(--white); background: transparent;
}
.hostplay .tx { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hostplay .tx b { font-size: 16px; font-weight: 800; }
.hostplay .tx span { font-size: 13px; color: var(--teal-l); }
.hostplay .sw { position: relative; width: 54px; height: 32px; flex: none; border-radius: 16px; border: 2px solid var(--white); transition: background .25s ease; }
.hostplay .sw::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--white);
  transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), background .25s ease;
}
.hostplay.on .sw { background: var(--white); }
.hostplay.on .sw::after { transform: translateX(22px); background: var(--teal); }
/* невысокий телефон (≈ 640 px): код и счётчик меньше, чтобы «N игроков» не уходило под кнопки */
@media (max-height: 700px) {
  .stage:not(.wide) .room .klabel { margin-top: 12px; }
  .stage:not(.wide) .code-roll { height: 100px; font-size: 118px; line-height: 100px; }
  .stage:not(.wide) .code-roll > span, .stage:not(.wide) .code-roll > span > span > i { height: 100px; }
  .stage:not(.wide) .room .howto { font-size: 15px; }
  .stage:not(.wide) .ptags { margin-top: 14px; }
  .stage:not(.wide) .room .count { padding-top: 10px; }
  .stage:not(.wide) .room .count .n { height: 76px; font-size: 90px; line-height: 76px; }
  .stage:not(.wide) .room .count .w { padding-bottom: 8px; font-size: 22px; }
}
.roomfoot { display: flex; gap: 8px; }
.roomfoot .sq-btn {
  width: 62px; height: 62px; flex: none; border-radius: 10px; display: grid; place-items: center; color: var(--white);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6); background: transparent;
}
.roomfoot .sq-btn svg { width: 24px; height: 24px; stroke-width: 2.2; }
.roomfoot .mbtn { flex: 1; border-radius: 10px; font-size: 28px; }
/* шторка с QR-кодом */
.qrsheet { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding-bottom: 6px; }
.qrsheet .qrbox { width: 248px; padding: 20px; border-radius: 12px; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--line); }
.qrsheet .qrbox img { width: 100%; height: auto; image-rendering: pixelated; }
.qrsheet p { font-size: 15px; font-weight: 600; color: var(--muted); }
.qrsheet .mrow { width: 100%; }

/* ---------- «Кто первый» у ведущего (холст: кто первый — ведущий) ---------- */
.buzzcard { position: relative; padding: 14px 16px; border-radius: 8px; background: var(--coral); color: var(--ink); overflow: hidden; }
.buzzcard .top { display: flex; align-items: center; }
.buzzcard .top .kicker { font-size: 12px; letter-spacing: .16em; }
.buzzcard .top b { margin-left: auto; font-family: var(--cond); font-weight: 800; font-size: 30px; }
.buzzcard .top b small { font-size: 16px; }
.buzzcard .who1 { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.buzzcard .who1 .ava { width: 64px; height: 64px; font-size: 34px; }
.buzzcard .who1 .nm { height: 84px; overflow: hidden; font-family: var(--cond); font-weight: 800; font-size: 96px; line-height: 84px; white-space: nowrap; min-width: 0; }
.buzzcard .who1 .nm > span { display: block; animation: up .6s var(--ease) .1s both; }
.buzzcard p { margin-top: 14px; font-size: 15px; font-weight: 700; }
.buzzcard .bbar { position: absolute; left: 0; bottom: 0; height: 8px; width: 100%; background: rgba(37, 50, 56, .2); }
.buzzcard .bbar i { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transition: transform 1s linear; }
.buzzcard.idle { background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); }
.buzzcard.idle .who1 { margin-top: 10px; }
.buzzcard.idle .who1 .nm { height: auto; white-space: normal; font-size: 40px; line-height: 40px; }
.queue { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.queue .kicker { font-size: 12px; }
.qchip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 4px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); font-size: 14px; font-weight: 700; animation: tagin .5s ease both; }
.qchip .ava { width: 24px; height: 24px; font-size: 13px; }
.qchip.bad { text-decoration: line-through; opacity: .6; }
.tile.tried { opacity: .3; }
.tile.tried::after { content: ""; position: absolute; left: 10px; right: 10px; top: 50%; height: 3px; background: currentColor; transform: rotate(-12deg); }

/* ---------- «До первой ошибки» у ведущего ---------- */
.surv-n { display: flex; align-items: flex-end; gap: 12px; margin-left: -6px; }
.surv-n .n { display: block; height: 176px; overflow: hidden; font-family: var(--cond); font-weight: 800; font-size: 210px; line-height: 176px; color: var(--teal); }
.surv-n .n > span { display: block; animation: up .8s var(--ease) .1s both; }
.surv-n .of { padding-bottom: 18px; font-family: var(--cond); font-weight: 800; font-size: 40px; line-height: .95; animation: rise .6s ease .4s both; }
.surv-n .of span { color: var(--dim); }
.outnow { min-height: 58px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 8px; background: var(--coral); color: var(--ink); animation: rise .6s ease .5s both; }
.outnow svg { width: 22px; height: 22px; flex: none; }
.outnow b { font-size: 16px; font-weight: 800; line-height: 1.3; }
.outnow.ok { background: var(--teal-t); }
.schips { display: flex; flex-wrap: wrap; gap: 8px; }
.schip {
  height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px 0 5px; border-radius: 20px;
  background: var(--ink); color: var(--paper); font-size: 16px; font-weight: 700; animation: tagin .5s ease both; max-width: 100%;
}
.schip .ava { width: 30px; height: 30px; font-size: 15px; }
.schip.out { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--line); text-decoration: line-through; }
.schip.out .ava { background: var(--mute) !important; color: var(--muted) !important; }
.schip.now { background: var(--coral-t); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--coral); }
.schip.light { background: var(--paper); color: var(--ink); height: 36px; font-size: 15px; padding-right: 12px; }
.schip.light .ava { width: 28px; height: 28px; font-size: 14px; }

/* ---------- подсказки «Угадай героя» ---------- */
.ptsnow { display: flex; align-items: baseline; }
.ptsnow .kicker { font-size: 12px; }
.ptsnow b { margin-left: auto; font-family: var(--cond); font-weight: 800; font-size: 26px; }
.ptsnow b span { color: var(--dim); }
.ptsegs { display: flex; gap: 4px; margin-top: -4px; }
.ptsegs i { flex: 1; height: 10px; border-radius: 5px; background: var(--mute); transition: background .4s ease; }
.ptsegs i.on { background: var(--must); }
.hints { display: flex; flex-direction: column; gap: 6px; }
.hint { min-height: 52px; display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 8px; background: var(--card); transition: background .4s ease; }
.hint .hn { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); font-family: var(--cond); font-weight: 800; font-size: 18px; }
.hint .ht { font-size: 15.5px; font-weight: 700; line-height: 1.25; animation: rise .45s ease both; }
.hint.last { background: var(--must-t); }
.hint.locked { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }
.hint.locked .hn { background: var(--mute); color: var(--dim); }
.hint.locked .ht { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--dim); animation: none; }
.hint.locked .ht svg { width: 16px; height: 16px; }
/* «Угадай героя» у ведущего в комнате: внизу ещё «Ответили» — подсказки и плитки чуть ниже, чтобы всё влезло без прокрутки */
.stage .scr.tight { gap: 10px; }
.stage:not(.wide) .hints.compact { gap: 5px; }
.stage:not(.wide) .hints.compact .hint { min-height: 44px; padding-top: 5px; padding-bottom: 5px; }
.stage:not(.wide) .tiles.mid.compact .tile { height: 74px; }
.morebtn {
  width: 100%; height: 56px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 8px;
  box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink); font-family: var(--cond); font-weight: 800; font-size: 23px;
}
.morebtn small { font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--muted); }
.morebtn[disabled] { opacity: .4; pointer-events: none; }

/* эмодзи и пропущенное слово */
.emobox { min-height: 132px; padding: 10px; border-radius: 8px; background: var(--must-t); display: grid; place-items: center; animation: wipe .8s cubic-bezier(.6, 0, .2, 1) both; }
.emobox span { font-size: 46px; letter-spacing: 4px; line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
.stage:not(.wide) .emobox.n6 span { font-size: 40px; letter-spacing: 3px; }
.stage:not(.wide) .emobox.n7 span { font-size: 34px; letter-spacing: 3px; }
.stage:not(.wide) .emobox.n8 span { font-size: 30px; letter-spacing: 2px; }
.stage:not(.wide) .emobox.n9 span { font-size: 27px; letter-spacing: 2px; }
.gaptext { font-family: var(--cond); font-weight: 800; font-size: 46px; line-height: 50px; animation: rise .7s ease .2s both; overflow-wrap: anywhere; }
.gaptext.md { font-size: 36px; line-height: 40px; }
.gaptext.sm { font-size: 30px; line-height: 34px; }
.gaptext .gap { display: inline-block; width: 150px; max-width: 40%; height: .8em; vertical-align: -.06em; border-radius: 6px; background: var(--coral-t); box-shadow: inset 0 -4px 0 var(--coral); animation: pulse 1.6s ease-in-out infinite; }
.gaptext .gap.fill { width: auto; height: auto; padding: 0 8px; background: var(--teal-t); box-shadow: inset 0 -4px 0 var(--teal); animation: none; vertical-align: baseline; }
.truthbox { padding: 18px; border-radius: 8px; background: var(--must-t); color: var(--ink); animation: wipe .8s cubic-bezier(.6, 0, .2, 1) both; }
.truthbox p { margin-top: 12px; font-family: var(--cond); font-weight: 800; font-size: 44px; line-height: 42px; overflow-wrap: anywhere; }
.truthbox.md p { font-size: 34px; line-height: 34px; }
.truthbox.sm p { font-size: 28px; line-height: 29px; }

/* собери стих и хронология у ведущего */
.pieces { display: flex; flex-wrap: wrap; gap: 8px; }
.piece {
  display: inline-flex; align-items: center; min-height: 48px; padding: 8px 14px; border-radius: 8px; background: var(--card);
  box-shadow: inset 0 0 0 2px var(--ink); font-size: 18px; font-weight: 700; line-height: 1.25; animation: tagin .55s cubic-bezier(.2, .8, .3, 1) both;
}
.evq { display: flex; flex-direction: column; gap: 8px; }
.evq > div { min-height: 54px; display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-radius: 8px; animation: inA .6s cubic-bezier(.2, .8, .3, 1) backwards; }
.evq > div svg { width: 18px; height: 18px; color: var(--ink2); flex: none; }
.evq > div b { font-size: 18px; font-weight: 700; line-height: 1.2; }
.bg0 { background: var(--coral-t); } .bg1 { background: var(--teal-t); } .bg2 { background: var(--must-t); } .bg3 { background: var(--viol-t); }

/* ---------- игрок ---------- */
.mebar { height: 62px; display: flex; align-items: center; gap: 12px; padding: 0 14px 0 10px; border-radius: 8px; background: var(--ink); color: var(--paper); }
.mebar .ava { width: 40px; height: 40px; font-size: 19px; }
.mebar > span { font-size: 15px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mebar > b { margin-left: auto; font-family: var(--cond); font-weight: 800; font-size: 23px; white-space: nowrap; }
.mebar.plain > span { font-size: 15px; }
.waitl { display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; text-align: center; }
.waitl .wdots i { width: 6px; height: 6px; }
.pkick { text-align: center; font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.stage.tone-teal .pkick { color: var(--teal-l); }
.stage.tone-ink .pkick { color: var(--onink); text-align: left; }
/* «Верно!», «Неверно» у игрока: одной строкой, шрифт подгоняется по ширине (bigTitle).
   Снизу запас под хвосты букв (g, y в Right!, Toʻgʻri!) — без сдвига того, что ниже; слово выезжает из-под края */
.verdict { text-align: center; white-space: nowrap; height: auto !important; padding-bottom: .24em; margin-bottom: -.24em; }
.verdict > span { animation-name: upv; }
@keyframes upv { from { transform: translateY(140%); } to { transform: none; } }
.gainbig { align-self: center; transform: rotate(-4deg); }
.gainbig span { display: block; padding: 6px 18px 4px; border-radius: 8px; background: var(--must); color: var(--ink); font-family: var(--cond); font-weight: 800; font-size: 50px; line-height: 1; animation: pop .45s cubic-bezier(.3, 1.5, .5, 1) .5s both; }
.pcard { padding: 16px 18px; border-radius: 8px; background: var(--paper); color: var(--ink); animation: rise .6s var(--ease) .5s both; }
.pcard .rk { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pcard .rk b { font-family: var(--cond); font-weight: 800; font-size: 42px; line-height: 1; }
.pcard .rk span { font-size: 15px; font-weight: 700; color: var(--muted); }
.pcard .rk .mv { margin-left: auto; padding: 4px 9px 3px; border-radius: 6px; background: var(--teal-t); color: var(--ink); font-size: 13px; font-weight: 800; }
.pcard .rk .mv.down { background: var(--coral-t); }
.pcard .qa { margin-top: 12px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--muted); }
.pcard .qa b { color: var(--ink); }
.pcard .kicker { font-size: 11.5px; letter-spacing: .16em; color: var(--muted); }
.pcard .right { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.pcard .right .sq { width: 52px; height: 52px; font-size: 34px; border-radius: 8px; }
.pcard .right .sq svg { width: 26px; height: 26px; stroke-width: 3; }
.pcard .right b { font-family: var(--cond); font-weight: 800; font-size: 38px; line-height: 1; overflow-wrap: anywhere; min-width: 0; }
.pcard .right b.long { font-size: 28px; }
.pcard .vq { margin-top: 12px; }
.pcard .refs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pcard.coralt { background: var(--coral-t); }
.pcard.coralt .kicker { color: var(--ink); }
.scorebar { height: 62px; display: flex; align-items: center; padding: 0 16px; border-radius: 8px; background: var(--ink); color: var(--paper); animation: rise .6s ease .6s both; }
.scorebar span { font-size: 15px; font-weight: 700; }
.scorebar b { margin-left: auto; font-family: var(--cond); font-weight: 800; font-size: 24px; }
/* ожидание старта */
.pwait-top { display: flex; align-items: center; }
.pwait-top .room-no { margin-left: auto; padding: 4px 10px 3px; border-radius: 6px; background: var(--paper); color: var(--ink); font-family: var(--cond); font-weight: 800; font-size: 19px; }
.mecard { height: 92px; display: flex; align-items: center; gap: 14px; padding: 0 16px; border-radius: 8px; background: var(--paper); color: var(--ink); animation: rise .7s var(--ease) .3s both; }
.mecard .ava { width: 60px; height: 60px; font-size: 28px; }
.mecard > span { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.mecard b { font-family: var(--cond); font-weight: 800; font-size: 34px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mecard small { font-size: 14px; font-weight: 600; color: var(--muted); }
.mecard .team { margin-left: auto; padding: 4px 9px 3px; border-radius: 6px; font-size: 13px; font-weight: 800; }
.faces { display: flex; padding-left: 8px; flex-wrap: wrap; }
.faces .ava { width: 34px; height: 34px; margin-left: -8px; font-size: 16px; box-shadow: 0 0 0 2px var(--teal); animation: pop .4s cubic-bezier(.3, 1.4, .5, 1) both; }
.howcard { padding: 14px 16px; border-radius: 8px; background: var(--paper); color: var(--ink); animation: rise .6s ease .6s both; }
.howcard .rules3 { margin-top: 8px; }
/* «Знаю!» */
.buzzbtn {
  flex: 1; min-height: 260px; width: 100%; border: 0; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: var(--coral); color: var(--ink); animation: pulse 1.4s ease-in-out infinite; transition: background .25s ease, color .25s ease;
}
.buzzbtn b { font-family: var(--cond); font-weight: 800; font-size: 132px; line-height: .9; }
.buzzbtn span { font-size: 17px; font-weight: 700; }
.buzzbtn b, .buzzbtn span { max-width: 100%; padding: 0 16px; text-align: center; }
.buzzbtn.on { background: var(--ink); color: var(--paper); animation: none; }
.buzzbtn.on b { font-size: 60px; line-height: .95; }
.buzzbtn[disabled] { pointer-events: none; }
.buzzbtn.wait { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); animation: none; }
.buzzbtn.wait b { font-size: 56px; }
/* мой ответ принят */
.sentcard { position: relative; min-height: 220px; padding: 18px; border-radius: 8px; background: var(--c); color: var(--cf); animation: wipe .7s cubic-bezier(.6, 0, .2, 1) both; }
.sentcard .l { display: block; font-family: var(--cond); font-weight: 800; font-size: 130px; line-height: .85; }
.sentcard b { display: block; margin-top: 18px; font-family: var(--cond); font-weight: 800; font-size: 40px; line-height: 1; overflow-wrap: anywhere; }
.sentcard b.long { font-size: 28px; line-height: 1.05; }
.sentcard .accepted { position: absolute; right: 16px; top: 16px; }
.sentcard.order { background: var(--teal); color: var(--white); min-height: 0; }
.sentcard.order p { font-family: var(--serif); font-size: 18px; line-height: 1.5; padding-right: 70px; }
/* собрать по порядку на телефоне (холст: игрок — собери стих) */
.oframe {
  min-height: 200px; display: flex; flex-direction: column; padding: 16px 18px 14px; border-radius: 8px; background: var(--card); color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink); transition: box-shadow .3s ease;
}
.oframe.full { box-shadow: inset 0 0 0 2px var(--teal); }
.oframe .otext { flex: 1; font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1.55; }
.oframe .otext .pc { cursor: pointer; animation: fadein .35s ease both; }
.oframe .otext .pc:active { opacity: .5; }
.oframe .otext .caret { display: inline-block; width: 3px; height: 24px; margin: 0 4px 0 1px; vertical-align: -4px; border-radius: 2px; background: var(--coral); animation: blink 1s steps(1) infinite; }
.oframe .otext .slot { display: inline-block; height: 10px; margin: 0 6px 0 0; vertical-align: middle; border-radius: 5px; background: var(--mute); }
.oframe .ofoot { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.oframe .ofoot .reftxt { color: var(--muted); }
.oframe .ofoot .accepted { margin-left: auto; background: var(--teal); color: var(--white); }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.opool { display: flex; flex-wrap: wrap; gap: 8px; }
.opool button {
  min-height: 46px; padding: 8px 13px; border-radius: 8px; background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink);
  font-size: 16.5px; font-weight: 700; line-height: 1.25; text-align: left; animation: pop .3s ease both;
}
.opool button:active { transform: scale(.97); }
/* хронология: список событий, номера по нажатию */
.olist { display: flex; flex-direction: column; gap: 8px; }
.olist button {
  min-height: 54px; display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-radius: 8px; text-align: left; color: var(--ink);
  font-size: 17px; font-weight: 700; line-height: 1.2; transition: opacity .2s ease, box-shadow .2s ease;
}
.olist button .on {
  width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font-family: var(--cond); font-weight: 800; font-size: 18px;
  box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink);
}
.olist button.set .on { background: var(--ink); color: var(--paper); box-shadow: none; }
.olist button.set { box-shadow: inset 0 0 0 2px var(--ink); }
.olist button svg { width: 18px; height: 18px; color: var(--ink2); flex: none; }
.olist.result button { pointer-events: none; }
.olist.result button.ok { box-shadow: inset 0 0 0 2.5px var(--teal); }
.olist.result button.no { box-shadow: inset 0 0 0 2.5px var(--warn); }
.olist.result button .x { margin-left: auto; width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--warn); color: var(--white); }
.olist.result button.ok .x { background: var(--teal); }
.olist.result button .x svg { width: 15px; height: 15px; stroke-width: 3; color: inherit; }
/* итог игрока */
.pend-n { display: flex; align-items: flex-end; gap: 12px; margin-left: -4px; }
.pend-n .n { display: block; height: 176px; overflow: hidden; font-family: var(--cond); font-weight: 800; font-size: 210px; line-height: 176px; color: var(--teal); }
.pend-n .n > span { display: block; animation: up .8s var(--ease) .1s both; }
.pend-n .of { padding-bottom: 18px; font-family: var(--cond); font-weight: 800; font-size: 40px; line-height: .95; animation: rise .6s ease .4s both; }
.pend-n .of span { color: var(--dim); }
.ptable { display: flex; flex-direction: column; gap: 6px; }
.ptable > div { height: 46px; display: flex; align-items: center; gap: 12px; padding: 0 14px; border-radius: 8px; background: var(--card); animation: rise .5s ease both; }
.ptable > div .rk { width: 22px; font-family: var(--cond); font-weight: 800; font-size: 24px; }
.ptable > div.r1 .rk { color: var(--coral); }
.ptable > div > span:nth-child(2) { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptable > div > b { font-family: var(--cond); font-weight: 800; font-size: 23px; }
.ptable > div.me { background: var(--teal-t); }
.ptable > div.me > span:nth-child(2) { font-weight: 800; }
.ptable > div.team { color: var(--white); }
.thanks { text-align: center; font-family: var(--cond); font-weight: 800; font-size: 32px; }

/* ---------- один экран: команды ---------- */
.turnband {
  min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 8px; background: var(--coral); color: var(--ink);
  animation: wipe .6s cubic-bezier(.6, 0, .2, 1) both;
}
.turnband .kicker { font-size: 12px; }
.turnband b { font-family: var(--cond); font-weight: 800; font-size: 30px; line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tscores { display: flex; gap: 8px; }
.tsc { position: relative; flex: 1; min-width: 0; height: 62px; padding: 8px 10px; border-radius: 8px; transition: box-shadow .2s ease; }
.tsc span { display: block; font-size: 12px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsc b { display: block; font-family: var(--cond); font-weight: 800; font-size: 28px; line-height: 1; }
.tsc .plus { position: absolute; right: 8px; top: 8px; padding: 2px 6px 1px; border-radius: 4px; background: var(--paper); color: var(--ink); font-size: 11px; font-weight: 800; animation: pop .35s ease 1.2s both; }
.tsc.cur { box-shadow: inset 0 0 0 3px var(--ink); }
.resband {
  min-height: 118px; display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 8px; background: var(--teal); color: var(--white); overflow: hidden;
}
.resband .w {
  height: 84px; overflow: hidden; font-family: var(--cond); font-weight: 800; font-size: 92px; line-height: 84px;
  flex: 0 1 auto; min-width: 0; max-width: 62%; white-space: nowrap;
}
.resband .w > span { display: block; animation: up .7s var(--ease) .1s both; }
.resband .w.two { display: flex; flex-direction: column; justify-content: center; line-height: 40px; }
.resband .w.two > span + span { animation-delay: .18s; }
.resband .side { flex: 1; font-size: 15px; font-weight: 800; line-height: 1.3; animation: rise .5s ease .5s both; min-width: 0; overflow-wrap: break-word; }
.resband.bad { background: var(--coral); color: var(--ink); }
.resband.part { background: var(--must); color: var(--ink); }
.refcard { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 8px; background: var(--must-t); color: var(--ink); animation: rise .6s ease .8s both; }
.refcard .refs { display: flex; flex-wrap: wrap; gap: 8px; }
.refcard p { font-size: 15.5px; font-weight: 600; line-height: 1.4; }
.refcard .vq { font-size: 15.5px; }
/* итоги команд */
.tbars { display: flex; flex-direction: column; gap: 10px; }
.tbars > div { display: flex; align-items: center; gap: 12px; animation: inL .6s var(--ease) both; }
.tbars .rk { width: 24px; flex: none; font-family: var(--cond); font-weight: 800; font-size: 34px; color: var(--rankink); }
.tbars > div:first-child .rk { color: var(--coral-t); }
.tbars .card2 { min-width: 120px; height: 96px; padding: 10px 14px; border-radius: 8px; overflow: hidden; }
.tbars .card2 span { display: block; font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbars .card2 b { display: block; font-family: var(--cond); font-weight: 800; font-size: 48px; line-height: 1.05; }
.winline { font-family: var(--cond); font-weight: 800; font-size: 32px; line-height: 1.1; color: var(--coral-t); animation: rise .6s ease .4s both; }

/* ---------- Своя игра ---------- */
.jscores { display: flex; gap: 8px; }
.jscores > div { flex: 1; min-width: 0; height: 64px; display: flex; align-items: center; padding: 0 14px; border-radius: 8px; }
.jscores > div span { font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jscores > div b { margin-left: auto; padding-left: 6px; font-family: var(--cond); font-weight: 800; font-size: 40px; }
.jscores > div.cur { box-shadow: inset 0 0 0 3px var(--ink); }
.jscores.sm > div { height: 54px; }
.jscores.sm > div b { font-size: 30px; }
.jscores.many > div { padding: 0 10px; }
.jscores.many > div b { font-size: 28px; }
.jgrid { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: 6px; }
.jgrid .jc {
  min-height: 44px; padding: 4px 3px; border-radius: 6px; display: grid; place-items: center; text-align: center; background: var(--ink); color: var(--paper);
  font-family: var(--cond); font-weight: 800; font-size: 17px; line-height: 1; overflow-wrap: anywhere; animation: rise .4s ease both;
}
.jgrid .jt {
  height: 64px; border: 0; border-radius: 6px; background: var(--teal-t); color: var(--ink); font-family: var(--cond); font-weight: 800; font-size: 28px;
  transition: background .2s ease; animation: rise .4s ease both;
}
.jgrid .jt.sel { background: var(--coral); }
.jgrid .jt.used { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); color: transparent; pointer-events: none; }
.jtag { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; animation: rise .5s ease .1s both; }
.jtag b { padding: 5px 10px 4px; border-radius: 6px; background: var(--coral); font-family: var(--cond); font-weight: 800; font-size: 22px; }
.jtag span { font-size: 14px; font-weight: 700; color: var(--muted); }
.janswer { padding: 16px; border-radius: 8px; background: var(--teal-t); color: var(--ink); animation: wipe .7s cubic-bezier(.6, 0, .2, 1) both; }
.janswer b { display: block; margin: 6px 0 12px; font-family: var(--cond); font-weight: 800; font-size: 64px; line-height: 1; overflow-wrap: anywhere; }
.janswer b.md { font-size: 46px; }
.janswer b.sm { font-size: 34px; }
.janswer .refs { display: flex; flex-wrap: wrap; gap: 8px; }
.whobtns { display: flex; flex-direction: column; gap: 8px; }
.whobtns button {
  height: 60px; display: flex; align-items: center; gap: 12px; padding: 0 16px; border-radius: 8px; text-align: left; transition: box-shadow .2s ease;
}
.whobtns button b { font-family: var(--cond); font-weight: 800; font-size: 28px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whobtns button span { margin-left: auto; font-size: 15px; font-weight: 800; }
.whobtns button.on { box-shadow: inset 0 0 0 3px var(--ink); }
.whobtns button.none { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.whobtns button.none.on { box-shadow: inset 0 0 0 3px var(--ink); }

/* ---------- Колесо вопросов ---------- */
.wheel-wrap { position: relative; width: min(320px, 82vw, 46vh); aspect-ratio: 1; margin: 6px auto 0; }
.wheel-wrap svg.wheel { position: absolute; inset: 0; width: 100%; height: 100%; }
.wheel-wrap .hub {
  position: absolute; left: 50%; top: 50%; width: 24%; height: 24%; transform: translate(-50%, -50%); border-radius: 50%;
  border: 3px solid var(--ink); background: var(--paper); display: grid; place-items: center; font-family: var(--cond); font-weight: 800; font-size: 20px; color: var(--ink);
}
.wheel-wrap .pointer { position: absolute; left: 50%; top: -14px; width: 0; height: 0; margin-left: -14px; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 26px solid var(--ink); z-index: 2; }
.howbox { padding: 14px 16px; border-radius: 8px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); }
.howbox p { margin-top: 8px; font-size: 15.5px; font-weight: 700; line-height: 1.4; }
.fellband { margin: 0 calc(-1 * var(--gut)); padding: 16px var(--gut) 10px; background: var(--coral-t); animation: wipe .6s cubic-bezier(.6, 0, .2, 1) both; }
.fellband .kicker { font-size: 12px; letter-spacing: .16em; }
.fellband .bigt { height: 76px; font-size: 84px; line-height: 76px; margin-top: 4px; white-space: nowrap; text-overflow: ellipsis; }
.wq { font-family: var(--cond); font-weight: 800; font-size: 58px; line-height: 54px; overflow-wrap: anywhere; }
.wq.md { font-size: 46px; line-height: 44px; }
.wq.sm { font-size: 36px; line-height: 36px; }
.wq > span { display: block; animation: rise .7s var(--ease) .3s both; }

/* ---------- Крокодил ---------- */
.ctop { display: flex; align-items: flex-start; gap: 12px; }
.ctop .tt { line-height: 1; min-width: 0; }
.ctop .tt b { display: block; font-family: var(--cond); font-weight: 800; font-size: 34px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctop .tsecs { margin-left: auto; }
.ctop .tsecs .n { font-size: 64px; }
.cbar { height: 10px; border-radius: 5px; background: var(--mute); overflow: hidden; }
.cbar i { display: block; height: 100%; background: var(--teal); transform-origin: 0 50%; transition: transform 1s linear; }
.cword { min-height: 260px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 18px; border-radius: 8px; background: var(--must); color: var(--ink); }
.cword .qtag { animation: none; }
.cword b { display: block; font-family: var(--cond); font-weight: 800; font-size: 68px; line-height: 62px; overflow-wrap: anywhere; animation: rise .4s ease both; }
.cword b.md { font-size: 52px; line-height: 50px; }
.cword b.sm { font-size: 40px; line-height: 40px; }
.guessed { display: flex; align-items: baseline; gap: 10px; }
.guessed b { font-family: var(--cond); font-weight: 800; font-size: 56px; line-height: 1; color: var(--teal); }
.yesbtn { height: 80px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-radius: 8px; background: var(--teal); color: var(--white); font-family: var(--cond); font-weight: 800; font-size: 34px; }
.yesbtn svg { width: 30px; height: 30px; stroke-width: 3; }
.yesbtn:active { transform: scale(.98); }
.cwords { display: flex; flex-direction: column; gap: 6px; }
.cwords > div { min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 12px; border-radius: 8px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); animation: rise .45s ease both; }
.cwords > div.skip { opacity: .55; }
.cwords .mk { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: var(--white); }
.cwords .mk svg { width: 16px; height: 16px; stroke-width: 3; }
.cwords .skip .mk { background: var(--mute); color: var(--muted); }
.cwords .skip .mk svg { width: 14px; height: 14px; stroke-width: 2.4; }
.cwords > div > b { flex: 1; min-width: 0; font-size: 16.5px; font-weight: 700; }
.cwords .refbtn { height: 36px; padding: 0 8px 0 7px; font-size: 12px; }
.turnbig { padding: 16px; border-radius: 8px; }
.turnbig .kicker { font-size: 12px; }
.turnbig b { display: block; margin-top: 6px; font-family: var(--cond); font-weight: 800; font-size: 56px; line-height: 1; overflow-wrap: anywhere; }

/* ---------- Что выберешь? ---------- */
.ch2 { position: relative; display: flex; flex-direction: column; gap: 40px; }
/* на телефоне два варианта делят высоту поровну (холст: по 250px) */
.stage:not(.wide) .scr > .ch2 { flex: 1 1 auto; max-height: 600px; }
.stage:not(.wide) .ch2 > .chopt { flex: 1 1 0; }
.chopt {
  position: relative; min-height: 210px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; padding: 18px; border: 0; border-radius: 8px;
  text-align: left; background: var(--coral); color: var(--ink); animation: inA .6s cubic-bezier(.2, .8, .3, 1) .1s backwards; transition: box-shadow .2s ease, opacity .3s ease;
}
.chopt.b { background: var(--teal); color: var(--white); animation-delay: .2s; }
.chopt .l { font-family: var(--cond); font-weight: 800; font-size: 54px; line-height: .8; }
.chopt b { font-family: var(--cond); font-weight: 800; font-size: 44px; line-height: 42px; overflow-wrap: anywhere; }
.chopt b.md { font-size: 34px; line-height: 34px; }
.chopt.mine { box-shadow: inset 0 0 0 4px var(--ink); }
.chopt.b.mine { box-shadow: inset 0 0 0 4px var(--paper); }
.chopt.dim { opacity: .35; }
button.chopt:active { transform: scale(.98); }
.chopt .accepted { position: absolute; right: 14px; top: 14px; }
.ch2 .or {
  position: absolute; left: 50%; top: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 50%; border: 4px solid var(--paper);
  background: var(--ink); color: var(--paper); display: grid; place-items: center; z-index: 2; font-family: var(--cond); font-weight: 800; font-size: 30px;
  animation: pop .5s cubic-bezier(.3, 1.4, .5, 1) .5s both;
}
.chres { padding: 16px; border-radius: 8px; background: var(--coral); color: var(--ink); overflow: hidden; }
.chres.b { background: var(--teal); color: var(--white); }
.chres .top { display: flex; align-items: flex-end; gap: 10px; }
.chres .top .bigt { height: 88px; font-size: 100px; line-height: 88px; }
.chres .top > span { padding-bottom: 10px; font-size: 15px; font-weight: 800; }
.chres.small .top .bigt { height: 70px; font-size: 80px; line-height: 70px; }
.chres > b { display: block; margin: 8px 0 10px; font-family: var(--cond); font-weight: 800; font-size: 32px; line-height: 1; overflow-wrap: anywhere; }
.chres .names { display: flex; flex-wrap: wrap; gap: 6px; color: var(--ink); }
.chres .names span { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 3px; border-radius: 15px; background: var(--coral-t); font-size: 13.5px; font-weight: 700; }
.chres.b .names span { background: var(--teal-t); }
.chres .names .ava { width: 24px; height: 24px; font-size: 13px; background: var(--paper) !important; color: var(--ink) !important; }

/* ---------- Кто из нас…? ---------- */
.whogrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.whogrid button, .whogrid > div {
  min-height: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 8px 4px; border: 0; border-radius: 8px;
  background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); animation: rise .45s ease both; transition: background .2s ease;
}
.whogrid .ava { width: 50px; height: 50px; font-size: 24px; }
.whogrid b { font-size: 15px; font-weight: 800; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; }
.whogrid button.on { background: var(--ink); color: var(--paper); box-shadow: none; }
.whotop { display: flex; align-items: center; gap: 14px; }
.whotop .ava { width: 84px; height: 84px; font-size: 42px; }
.whotop .bigt { height: 86px; font-size: 96px; line-height: 86px; min-width: 0; white-space: nowrap; text-overflow: ellipsis; }
.whobars { display: flex; flex-direction: column; gap: 6px; }
.whobars > div { display: flex; align-items: center; gap: 10px; height: 46px; animation: inL .6s var(--ease) both; }
.whobars .ava { width: 36px; height: 36px; font-size: 18px; }
.whobars .bar { height: 40px; min-width: 80px; display: flex; align-items: center; padding-left: 12px; border-radius: 6px; background: var(--card); font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; }
.whobars > div:first-child .bar { background: var(--ink); color: var(--paper); }
.whobars b { font-family: var(--cond); font-weight: 800; font-size: 26px; }
.countdown-big { flex: 1; display: grid; place-items: center; text-align: center; }
.countdown-big b { font-family: var(--cond); font-weight: 800; font-size: 220px; line-height: 1; color: var(--coral); animation: pop .4s ease both; }
.countdown-big b.word { font-size: 78px; }
.qbubble { padding: 18px 20px; border-radius: 8px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); }
.qbubble .qtag { animation: none; }
.qbubble p { margin-top: 10px; font-family: var(--cond); font-weight: 800; font-size: 30px; line-height: 1.1; overflow-wrap: anywhere; }

/* сообщение поверх сцены (ведущий переподключается, нет связи) */
.net-banner {
  position: absolute; left: 50%; top: calc(var(--safe-top) + 64px); transform: translateX(-50%); z-index: 6; padding: 8px 14px; border-radius: 8px;
  background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 700; white-space: nowrap; box-shadow: 0 6px 20px rgba(37, 50, 56, .25);
}
.net-banner.hidden { display: none; }
/* экран-сообщение (комната закрыта и т. п.) */
.msgscr { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.msgscr .ic { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: var(--mute); color: var(--ink); }
.msgscr .ic svg { width: 40px; height: 40px; }
.msgscr h2 { font-size: 46px; line-height: 1; }
.msgscr p { font-size: 16px; font-weight: 600; color: var(--muted); }

/* ================= широкий экран (ПК, проектор): раскладки холста 1280×720 ================= */
.stage.wide { --gut: 56px; }
.stage.wide .stage-body { padding-top: calc(var(--safe-top) + 40px); }
.stage.wide .stage-foot { padding-bottom: calc(var(--safe-bottom) + 40px); }
.stage.wide .tbar { height: 14px; }
.stage.wide .qhead .qn b { font-size: 56px; }
.stage.wide .qhead .qn .kicker { font-size: 16px; }
.stage.wide .tsecs .n { font-size: 124px; }
.stage.wide .tsecs small { font-size: 18px; }
.stage.wide .qtitle { font-size: 62px; line-height: 62px; max-width: calc(100% - 280px); }
.stage.wide .qtitle.md { font-size: 54px; line-height: 56px; }
.stage.wide .qtitle.sm { font-size: 44px; line-height: 48px; }
.stage.wide .qtag { font-size: 16px; padding: 6px 12px 5px; }
.stage.wide .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
/* плитки на проекторе (холст: 145 px при 720) — чтобы вопрос, плитки и «Ответили» помещались без прокрутки */
.stage.wide .tile { height: clamp(140px, 22vh, 260px); border-radius: 10px; }
.stage.wide .tile .l { left: 22px; top: 18px; font-size: 72px; }
.stage.wide .tile .t { left: 22px; right: 18px; bottom: 20px; font-size: 27px; line-height: 1.12; }
.stage.wide .tile.long .t { font-size: 22px; }
.stage.wide .tile.xlong .t { font-size: 18px; }
.stage.wide .tiles.mid .tile { height: 110px; }
.stage.wide .tiles.mid .tile .l { top: 50%; font-size: 52px; } /* как на телефоне: буква по центру по высоте */
.stage.wide .tiles.mid .tile .t { left: 74px; bottom: auto; font-size: 26px; }
.stage.wide .tf2 .tile { height: clamp(200px, 36vh, 320px); padding: 24px; }
.stage.wide .tf2 .tile b { font-size: 84px; }
.stage.wide .answered .top { font-size: 16px; }
.stage.wide .answered .top b { font-size: 32px; }
.stage.wide .answered .segs { gap: 5px; }
.stage.wide .answered .segs i { height: 12px; border-radius: 6px; }
.stage.wide .mbtn { height: 76px; font-size: 32px; border-radius: 10px; }
.stage.wide .stage-foot.split { flex-direction: row; align-items: flex-end; gap: 40px; }
.stage.wide .stage-foot.split > .answered { flex: 1; }
.stage.wide .stage-foot.split > .mbtn, .stage.wide .stage-foot.split > .mrow { width: 340px; flex: none; }
.stage.wide .stage-foot .mrow { max-width: 760px; }
.stage.wide .truthbox p { font-size: 66px; line-height: 64px; }
.stage.wide .emobox span { font-size: 80px; }
.stage.wide .gaptext { font-size: 70px; line-height: 76px; }
.stage.wide .piece { font-size: 26px; min-height: 64px; padding: 10px 18px; }
.stage.wide .evq > div b { font-size: 26px; }
.stage.wide .evq > div { min-height: 66px; }
.stage.wide .hint .ht { font-size: 22px; }
.stage.wide .hint { min-height: 62px; }
/* ответ на широком: слева — правильный ответ на цветном поле, справа — как ответили */
.stage.wide .ans { display: grid; grid-template-columns: 48.5% 1fr; grid-template-rows: auto auto 1fr; gap: 0; margin-bottom: 0; }
.stage.wide .ans-left { display: flex; flex-direction: column; grid-column: 1; grid-row: 1 / span 3; background: var(--coral-t); padding-bottom: 40px; }
.stage.wide .ans-left.teal { background: var(--teal-t); }
.stage.wide .aband { background: transparent; padding: calc(var(--safe-top) + 44px) 56px 0; }
.stage.wide .aband .big { font-size: 150px; line-height: 134px; }
.stage.wide .aband .stamp { right: 44px; top: calc(var(--safe-top) + 128px); font-size: 48px; border-width: 4px; padding: 8px 16px 6px; }
.stage.wide .aband .kicker { font-size: 18px; }
.stage.wide .aband .ahead > b { font-size: 34px; }
.stage.wide .aband .qline { font-size: 22px; }
.stage.wide .ans .aref { margin: 26px 56px 0; }
.stage.wide .ans .aref p { font-size: 22px; }
.stage.wide .ans .aref blockquote, .stage.wide .ans .vq { font-size: 22px; }
.stage.wide .ans .aref .refbtn { height: 48px; font-size: 16px; padding: 0 16px 0 14px; }
.stage.wide .ans .vrows { grid-column: 2; grid-row: 1; margin: calc(var(--safe-top) + 60px) 56px 0; gap: 14px; }
.stage.wide .ans .vrows::before { content: attr(data-k); font-size: 16px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 8px; }
.stage.wide .vrow { min-height: 74px; gap: 16px; }
.stage.wide .vrow .sq { width: 64px; height: 64px; font-size: 40px; border-radius: 8px; }
.stage.wide .vrow .mid > span { font-size: 24px; }
.stage.wide .vrow .track, .stage.wide .vrow .track i { height: 16px; border-radius: 8px; }
.stage.wide .vrow > b { font-size: 54px; min-width: 48px; }
.stage.wide .ans .who { grid-column: 2; grid-row: 2; height: 56px; margin: 28px 0 0; }
.stage.wide .who .mq-t > span { font-size: 22px; padding-right: 28px; }
.stage.wide .ans .after { grid-column: 2; grid-row: 3; margin: 20px 56px 0; }
.stage.wide .fullverse p { font-size: 30px; }
.stage.wide .evrow > b { font-size: 24px; }
.stage.wide .evrow .sq { width: 52px; height: 52px; font-size: 30px; }
.stage.wide.ansmode .stage-foot { position: absolute; right: 0; bottom: 0; width: 51.5%; align-items: flex-end; }
.stage.wide.ansmode .stage-foot .mbtn { width: 320px; }
/* комната на широком (холст: проектор — комната) */
.stage.wide .room { display: grid; grid-template-columns: 1fr 300px; column-gap: 64px; grid-template-rows: auto auto auto auto 1fr auto; }
.stage.wide .room > * { grid-column: 1; }
.stage.wide .room .rtop { grid-column: 1 / -1; margin: 0; }
.stage.wide .room .rtop .tt { text-align: left; display: flex; align-items: baseline; gap: 18px; }
.stage.wide .room .rtop .tt b { font-size: 40px; }
.stage.wide .room .rtop .tt span { font-size: 20px; }
.stage.wide .room .klabel { font-size: 18px; margin-top: 30px; }
.stage.wide .code-roll { height: 220px; font-size: 264px; line-height: 220px; gap: 8px; }
.stage.wide .code-roll > span, .stage.wide .code-roll > span > span > i { height: 220px; }
.stage.wide .room .howto { font-size: 26px; margin-top: 18px; line-height: 1.4; }
.stage.wide .ptags { gap: 10px; }
.stage.wide .ptag { height: 50px; font-size: 21px; padding: 0 18px 0 6px; border-radius: 25px; }
.stage.wide .ptag .ava { width: 38px; height: 38px; font-size: 18px; }
.stage.wide .room .count .n { height: 92px; font-size: 110px; line-height: 92px; }
.stage.wide .room .count .w { font-size: 34px; }
.stage.wide .room .qr-big {
  display: flex; grid-column: 2; grid-row: 2 / span 4; align-self: start; flex-direction: column; align-items: center; gap: 12px;
  padding: 26px; border-radius: 12px; background: var(--paper); color: var(--ink); animation: rise .7s ease .4s both; margin-top: 20px;
}
.stage.wide .room .qr-big img { width: 248px; height: 248px; }
.stage.wide .room .qr-big span { font-size: 16px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
/* невысокий экран (ноутбук 1280×720, 1366×768): код чуть меньше, чтобы число игроков не уходило под кнопки */
@media (max-height: 820px) {
  .stage.wide .room .klabel { margin-top: 18px; }
  .stage.wide .code-roll { height: 172px; font-size: 206px; line-height: 172px; }
  .stage.wide .code-roll > span, .stage.wide .code-roll > span > span > i { height: 172px; }
}
.stage.wide.roommode .stage-foot { flex-direction: row; align-items: center; gap: 16px; }
.stage.wide.roommode .stage-foot .hostplay { width: auto; flex: 1; max-width: 560px; }
.stage.wide.roommode .stage-foot .roomfoot { margin-left: auto; width: 380px; }
.stage.wide.roommode .stage-foot .roomfoot .mbtn { height: 84px; font-size: 38px; }
.stage.wide.roommode .stage-foot .roomfoot .sq-btn { width: 84px; height: 84px; }
/* итоги на широком */
.stage.wide .fin { display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; }
.stage.wide .fin > * { grid-column: 1; }
.stage.wide .fin .rbars { grid-column: 2; grid-row: 1 / span 5; gap: 10px; align-self: start; --bscale: 1.75; }
.stage.wide .fin .rbar { height: 54px; gap: 14px; }
.stage.wide .fin .rbar .rk { font-size: 34px; width: 30px; }
.stage.wide .fin .rbar .bar { height: 54px; font-size: 22px; border-radius: 8px; padding-left: 16px; }
.stage.wide .fin .rbar .sc { font-size: 32px; }
.stage.wide .fin .wintag { font-size: 18px; margin-top: 30px; }
.stage.wide .fin .winrow .bigt { font-size: 136px; line-height: 120px; height: 120px; }
.stage.wide .fin .winrow b { font-size: 44px; padding-bottom: 14px; }
.stage.wide .stage-foot .mrow.fin-btns { max-width: 520px; }
/* «Что выберешь?» на проекторе: варианты рядом, итог — две карточки рядом */
.stage.wide .scr > .ch2 { flex: 1 1 auto; flex-direction: row; gap: 48px; max-height: 470px; }
.stage.wide .ch2 > .chopt { flex: 1 1 0; min-height: 0; padding: 28px; }
.stage.wide .chopt .l { font-size: 84px; }
.stage.wide .chopt b { font-size: 64px; line-height: 62px; }
.stage.wide .chopt b.md { font-size: 50px; line-height: 50px; }
.stage.wide .ch2 .or { width: 110px; height: 110px; margin: -55px 0 0 -55px; font-size: 40px; }
.stage.wide .scr.chresw { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 18px; align-content: start; }
.stage.wide .chresw > .qhead, .stage.wide .chresw > .lead { grid-column: 1 / -1; }
.stage.wide .chresw > .lead { font-size: 26px; }
.stage.wide .chres { padding: 28px; }
.stage.wide .chres .top .bigt { height: 150px; font-size: 170px; line-height: 150px; }
.stage.wide .chres.small .top .bigt { height: 120px; font-size: 136px; line-height: 120px; }
.stage.wide .chres .top > span { font-size: 22px; padding-bottom: 18px; }
.stage.wide .chres > b { font-size: 48px; margin: 14px 0 16px; }
.stage.wide .chres .names span { height: 40px; font-size: 18px; border-radius: 20px; }
.stage.wide .chres .names .ava { width: 32px; height: 32px; font-size: 16px; }
/* «Кто из нас…?» на проекторе: слева вопрос и лидер, справа полосы голосов */
.stage.wide .scr.whores { display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; row-gap: 16px; align-content: start; }
.stage.wide .whores > * { grid-column: 1; }
.stage.wide .whores > .qhead { grid-column: 1 / -1; }
.stage.wide .whores > .whobars { grid-column: 2; grid-row: 2 / span 4; align-self: start; gap: 12px; }
.stage.wide .whores > .lead { font-size: 30px; line-height: 1.3; }
.stage.wide .whores > .kicker { font-size: 18px; }
.stage.wide .whores > .note { font-size: 22px; }
.stage.wide .whotop .ava { width: 140px; height: 140px; font-size: 64px; }
.stage.wide .whotop .bigt { height: 140px; font-size: 156px; line-height: 140px; }
.stage.wide .whobars > div { height: 64px; gap: 14px; }
.stage.wide .whobars .ava { width: 52px; height: 52px; font-size: 24px; }
.stage.wide .whobars .bar { height: 56px; font-size: 24px; padding-left: 18px; border-radius: 8px; }
.stage.wide .whobars b { font-size: 40px; }
.stage.wide .whogrid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.stage.wide .whogrid .ava { width: 72px; height: 72px; font-size: 34px; }
.stage.wide .whogrid b { font-size: 22px; }
.stage.wide .note { font-size: 20px; }
/* таблица после вопроса на проекторе: как «Итоги» — заголовок слева, места справа, бегущая строка внизу */
.stage.wide .fin.board > .lead { font-size: 26px; margin-top: 12px; }
.stage.wide .fin.board > .grow { display: none; }
.stage.wide .fin.board > .mq { grid-column: 1 / -1; grid-row: 6; align-self: end; margin: 24px calc(-1 * var(--gut)) 0; height: 56px; }
.stage.wide .fin.board > .mq .mq-t > span { font-size: 26px; }
.stage.wide .stage-foot.rightfoot { align-items: flex-end; }
.stage.wide .stage-foot.rightfoot > * { width: 380px; }
/* «Угадай героя» на проекторе: слева подсказки, справа варианты */
.stage.wide .scr.tight { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; row-gap: 12px; align-content: start; }
.stage.wide .scr.tight > * { grid-column: 1; }
.stage.wide .scr.tight > .qhead { grid-column: 1 / -1; }
.stage.wide .scr.tight > .tiles { grid-column: 2; grid-row: 2 / span 3; align-self: start; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stage.wide .scr.tight > .morebtn { grid-column: 2; grid-row: 5; height: 64px; font-size: 28px; }
.stage.wide .hints.compact { gap: 6px; }
.stage.wide .ptsnow .kicker { font-size: 16px; }
.stage.wide .ptsnow b { font-size: 40px; }
/* «До первой ошибки» — таблица на проекторе */
.stage.wide .narrow:has(> .surv-n) { max-width: 980px; }
.stage.wide .surv-n .n { font-size: 260px; line-height: 220px; height: 220px; }
.stage.wide .surv-n .of { font-size: 56px; }
.stage.wide .outnow { min-height: 72px; padding: 14px 20px; }
.stage.wide .outnow b { font-size: 24px; }
.stage.wide .outnow svg { width: 28px; height: 28px; }
.stage.wide .schip { height: 52px; font-size: 22px; padding: 0 20px 0 6px; border-radius: 26px; }
.stage.wide .schip .ava { width: 40px; height: 40px; font-size: 18px; }
/* отсчёт перед вопросом на проекторе: слева число, справа «Как играем» */
.stage.wide .scr.introw { display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; grid-template-rows: auto auto 1fr auto; row-gap: 14px; }
.stage.wide .introw > * { grid-column: 1; }
.stage.wide .introw > .ahead { grid-column: 1 / -1; }
.stage.wide .introw > .k1 { grid-row: 2; font-size: 18px; }
.stage.wide .introw > .intro-n { grid-row: 3; align-self: start; }
.stage.wide .introw > .k2 { grid-column: 2; grid-row: 2; font-size: 18px; }
.stage.wide .introw > .rules3 { grid-column: 2; grid-row: 3; align-self: start; gap: 22px; }
.stage.wide .introw > .rules3 > div b { font-size: 46px; }
.stage.wide .introw > .rules3 > div span { font-size: 26px; }
.stage.wide .introw > .grow { display: none; }
.stage.wide .introw > .mq { grid-column: 1 / -1; grid-row: 4; align-self: end; margin: 0 calc(-1 * var(--gut)); height: 56px; }
.stage.wide .introw > .mq .mq-t > span { font-size: 26px; }
.stage.wide .introw.one .intro-n { grid-column: 1 / -1; }
.stage.wide .introw .intro-n .num { height: 340px; font-size: 410px; line-height: 340px; }
.stage.wide .introw .intro-n .ready { padding-bottom: 110px; padding-right: 20px; }
.stage.wide .introw .intro-n .ready b { font-size: 72px; }
.stage.wide .introw .intro-n .ready span { font-size: 20px; }
/* остальные экраны на широком — по центру, не шире 760 px */
.stage.wide .narrow { width: 100%; max-width: 760px; margin: 0 auto; }
.stage.wide .stage-foot.narrowfoot { align-items: center; }
.stage.wide .stage-foot.narrowfoot > * { width: 100%; max-width: 760px; }
.disp.center-disp { text-align: center; align-items: center; }
.pcard .refs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pcard .aref { margin-top: 12px; animation: none; }