/* =====================================================================
   Онлайн-квиз. Две темы: .theme-game (игрок, экран трансляции — «сцена»)
   и .theme-admin (конструктор и пульт — рабочий инструмент).
   ===================================================================== */

:root {
  --font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 14px;
  --radius-sm: 9px;
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* светлая рабочая тема */
  --bg: #f4f5f8;
  --bg-2: #eceef4;
  --surface: #ffffff;
  --surface-2: #f7f8fb;
  --line: #dfe2ea;
  --text: #1b1e2b;
  --muted: #5b6173;  /* подсказки: контраст ≥ 5:1 на всех фонах админки (9.4, читаемость) */
  --accent: #e8900c;
  --accent-ink: #1b1e2b;
  --primary: #3a45c9;
  --primary-ink: #ffffff;
  --ok: #1f9d63;
  --ok-bg: #e3f6ec;
  --bad: #d23b4b;
  --bad-bg: #fbe7e9;
  --warn: #b7700b;
  --warn-bg: #fdf1dc;
  --focus: 0 0 0 3px rgba(58, 69, 201, .28);
  --shadow: 0 1px 2px rgba(20, 24, 40, .06), 0 4px 16px rgba(20, 24, 40, .06);
}

/* сцена: игрок и экран трансляции */
.theme-game {
  --bg: #0d1024;
  --bg-2: #141838;
  --surface: #181d42;
  --surface-2: #20265a;
  --line: #2c3370;
  --text: #f1f2ff;
  --muted: #9ca3d4;
  --accent: #ffb547;
  --accent-ink: #1a1400;
  --primary: #ffb547;
  --primary-ink: #1a1400;
  --ok: #3ddc97;
  --ok-bg: rgba(61, 220, 151, .14);
  --bad: #ff6b7a;
  --bad-bg: rgba(255, 107, 122, .14);
  --warn: #ffc86b;
  --warn-bg: rgba(255, 181, 71, .14);
  --focus: 0 0 0 3px rgba(255, 181, 71, .45);
  --shadow: 0 10px 40px rgba(0, 0, 0, .35);
  color: var(--text);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
body.theme-game {
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(255, 181, 71, .13), transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(98, 88, 255, .16), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
a { color: var(--primary); }
.theme-game a { color: var(--accent); }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .6em; }
h3 { font-size: 1.1rem; }
h4 { font-size: 1rem; margin-top: 1.4em; }
code { background: var(--bg-2); padding: 2px 6px; border-radius: 6px; font-size: .9em; }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
.center { text-align: center; }
.pad { padding: 24px; }
.spacer { flex: 1; }
.nowrap { white-space: nowrap; }
.upper { text-transform: uppercase; }
.w80 { width: 90px !important; }
.w120 { width: 130px !important; }
.w-auto { width: auto !important; }
.error { color: var(--bad); margin: 8px 0; }
.ok { color: var(--ok); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 18px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 18px; align-items: start; }

/* ------------------------------------------------------------ элементы форм */
input, select, textarea {
  font: inherit; color: var(--text);
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
.theme-game input, .theme-game select { background: var(--bg-2); }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: none; box-shadow: var(--focus); border-color: var(--primary); }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--primary); }
input[type="range"] { padding: 0; border: 0; background: transparent; accent-color: var(--primary); }
input.invalid { border-color: var(--bad); }
textarea { resize: vertical; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.field > span { font-size: .92rem; color: var(--text); font-weight: 500; }  /* подпись — обычным текстом, подсказка — .hint (9.4) */
.field--inline { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px; }
.check { display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 4px 0; }
.check--field { margin-top: 26px; }

.btn {
  font: inherit; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
  transition: transform .08s, background .15s, border-color .15s, opacity .15s;
  color: var(--text);
  background: var(--surface-2);
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--primary { background: var(--primary); color: var(--primary-ink); }
.btn--primary:hover:not(:disabled) { filter: brightness(1.07); }
.btn--accent { background: var(--accent); color: var(--accent-ink); }
.btn--ghost { background: transparent; border-color: var(--line); color: var(--text); }
.btn--ghost:hover:not(:disabled) { background: var(--surface-2); }
.btn--danger { background: var(--bad); color: #fff; }
.btn--danger-ghost { background: transparent; border-color: var(--line); color: var(--bad); }
.btn--danger-ghost:hover:not(:disabled) { background: var(--bad-bg); }
.btn--ok { background: transparent; border-color: var(--line); color: var(--ok); }
.btn--ok.active { background: var(--ok); color: #fff; border-color: var(--ok); }
.btn--bad { background: transparent; border-color: var(--line); color: var(--bad); }
.btn--bad.active { background: var(--bad); color: #fff; border-color: var(--bad); }
.btn--sm { padding: 5px 10px; font-size: .88rem; }
.btn--lg { padding: 13px 22px; font-size: 1.05rem; }
.btn--xl { padding: 16px 26px; font-size: 1.15rem; min-width: 260px; }
.iconbtn { font-size: 1.15rem; background: transparent; border: 0; cursor: pointer; padding: 6px 8px; border-radius: 8px; color: var(--text); }
.iconbtn:hover { background: var(--surface-2); }
.linkbtn { background: none; border: 0; padding: 0 4px; color: var(--primary); cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 2px; }
.linkbtn.danger { color: var(--bad); }
.chip {
  font: inherit; font-size: .84rem; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer;
}
.chip.on { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.badge { display: inline-block; font-size: .75rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--bg-2); color: var(--muted); vertical-align: middle; }
.badge--warn { background: var(--warn-bg); color: var(--warn); }
.badge--bad { background: var(--bad-bg); color: var(--bad); }
.tag { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--surface-2); margin: 4px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.notice { background: var(--warn-bg); color: var(--text); border-radius: var(--radius-sm); padding: 10px 14px; margin: 10px 0; }
.notice--warn { border-left: 4px solid var(--warn); }

/* =====================================================================
   ИГРОК
   ===================================================================== */
.app--player { min-height: 100vh; display: flex; flex-direction: column; }

.join { flex: 1; display: grid; place-items: center; padding: 16px; }
.join__card { width: 100%; max-width: 480px; }
.join__cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 14px; }
.join__title { font-size: 1.6rem; }
.join__form { margin-top: 18px; display: flex; flex-direction: column; gap: 6px; }
.join__team { padding: 12px; background: var(--surface-2); border-radius: var(--radius-sm); margin-bottom: 10px; }
.teampick { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.teampick__btn { font: inherit; padding: 12px 10px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--bg-2); color: var(--text); cursor: pointer; }
.teampick__btn.on { border-color: var(--accent); background: var(--warn-bg); font-weight: 700; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar__team { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.conn { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); }
.conn i { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); display: inline-block; }
.conn--online i, .conn--poll i { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.conn--reconnecting i, .conn--connecting i { background: var(--warn); animation: blink 1s infinite; }
.conn__text { display: none; }
.conn--reconnecting .conn__text { display: inline; }
@keyframes blink { 50% { opacity: .3; } }

.soundpanel { position: relative; }
.soundpanel__pop {
  position: absolute; right: 0; top: 110%; z-index: 30;
  width: 290px; padding: 14px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 10px;
}
.soundpanel__row { display: grid; grid-template-columns: 1fr; gap: 4px; font-size: .9rem; }
.soundpanel__row { grid-template-columns: 110px 1fr auto; align-items: center; }

.soundbar {
  position: sticky; top: 52px; z-index: 19;
  margin: 8px 16px 0; padding: 12px 16px; border-radius: var(--radius-sm);
  background: var(--accent); color: var(--accent-ink); font-weight: 700; text-align: center; cursor: pointer;
  animation: pulse 1.6s infinite;
}
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(255, 181, 71, .2); } }

.announce {
  position: relative; z-index: 4; /* над декоративными слоями тем (сцена «Аркады») */
  margin: 10px 16px 0; padding: 12px 16px; border-radius: var(--radius-sm);
  background: linear-gradient(90deg, #5b4bff, #8a4bff); color: #fff; font-weight: 600;
  display: flex; gap: 10px; align-items: center; box-shadow: var(--shadow);
}
.drop-enter-active, .drop-leave-active { transition: all .35s var(--ease); }
.drop-enter-from, .drop-leave-to { opacity: 0; transform: translateY(-12px); }

.stage { flex: 1; width: 100%; max-width: 860px; margin: 0 auto; padding: 16px; position: relative; }
.stage__title { font-size: 1.8rem; text-align: center; margin: 12px 0 18px; }

.lobby { display: flex; flex-direction: column; gap: 14px; }
.soundcheck { text-align: center; }
.soundcheck.ok { border-color: var(--ok); }
.memo ol { margin: 8px 0 0; padding-left: 20px; }
.memo li { margin: 4px 0; }

/* заставка раунда */
.round-intro { text-align: center; padding: 24px 8px; animation: rise .5s var(--ease); }
.round-intro__kicker { color: var(--accent); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .9rem; }
.round-intro__name { font-size: clamp(1.8rem, 6vw, 3rem); margin: 8px 0 14px; }
.round-intro__img { max-width: 100%; max-height: 40vh; border-radius: var(--radius); margin: 8px 0 14px; }
.round-intro__desc { font-size: 1.1rem; color: var(--muted); }
.round-intro__rules { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; text-align: left; max-width: 640px; margin: 14px auto 0; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

.ready { text-align: center; padding: 60px 8px; animation: rise .4s var(--ease); }
.ready__kicker { color: var(--accent); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ready__num { font-size: clamp(2rem, 8vw, 3.4rem); font-weight: 800; margin: 10px 0; }

/* вопрос */
.question { display: flex; flex-direction: column; gap: 14px; position: relative; animation: rise .35s var(--ease); }
.qhead { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; font-size: .9rem; color: var(--muted); }
.qhead__num { color: var(--text); font-weight: 700; }
.qhead__pts { margin-left: auto; color: var(--accent); font-weight: 600; }
.question__text { font-size: clamp(1.15rem, 3.2vw, 1.5rem); font-weight: 600; white-space: pre-wrap; overflow-wrap: anywhere; }
.hint { color: var(--muted); font-size: max(13px, .88rem); line-height: 1.45; }
.review__kicker { color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .9rem; }

/* таймер */
.timer { display: flex; align-items: center; gap: 14px; }
.timer__digits { font-size: 2.2rem; font-weight: 800; min-width: 2.2em; text-align: center; line-height: 1; font-variant-numeric: tabular-nums; }
.timer__icon { font-size: 1.6rem; color: var(--accent); }
.timer__side { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.timer__bar { height: 10px; border-radius: 999px; background: var(--bg-2); overflow: hidden; border: 1px solid var(--line); }
.timer__fill { height: 100%; width: 100%; transform-origin: left; background: linear-gradient(90deg, var(--accent), #ffd98a); transition: transform .12s linear; }
.timer__label { font-size: .88rem; color: var(--muted); min-height: 1.2em; }
.timer--urgent .timer__digits { color: var(--bad); animation: throb 1s infinite; }
.timer--urgent .timer__fill { background: linear-gradient(90deg, var(--bad), #ff9aa4); }
.timer--paused .timer__digits { color: var(--muted); }
.timer--ended .timer__digits { color: var(--muted); }
.timer--reading .timer__fill, .timer--media .timer__fill { background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 10px, var(--line) 10px, var(--line) 20px); animation: slide 1s linear infinite; background-size: 28px 28px; }
@keyframes throb { 50% { transform: scale(1.12); } }
@keyframes slide { to { background-position: 28px 0; } }
.timer--big .timer__digits { font-size: 5rem; min-width: 2em; }
.timer--big .timer__bar { height: 18px; }
.timer--big .timer__label { font-size: 1.2rem; }

/* медиа */
.media { border-radius: var(--radius); overflow: hidden; }
.media__img { display: block; max-width: 100%; max-height: 50vh; margin: 0 auto; border-radius: var(--radius); cursor: zoom-in; }
.media__img--zoom { max-height: none; cursor: zoom-out; }
.media__video { width: 100%; max-height: 55vh; background: #000; border-radius: var(--radius); display: block; }
.media__audio { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.media__audio audio { flex: 1; min-width: 200px; }
.media__audio-label { font-weight: 600; }
.media__wave { display: flex; gap: 3px; align-items: center; height: 26px; }
.media__wave i { width: 4px; height: 6px; border-radius: 2px; background: var(--accent); display: block; }
.media__audio.is-playing .media__wave i { animation: wave 1s infinite ease-in-out; }
.media__wave i:nth-child(2) { animation-delay: .1s !important; } .media__wave i:nth-child(3) { animation-delay: .2s !important; }
.media__wave i:nth-child(4) { animation-delay: .3s !important; } .media__wave i:nth-child(5) { animation-delay: .4s !important; }
.media__wave i:nth-child(6) { animation-delay: .5s !important; } .media__wave i:nth-child(7) { animation-delay: .6s !important; }
@keyframes wave { 50% { height: 24px; } }
.media--big .media__img { max-height: 58vh; }

/* варианты */
.options { display: grid; grid-template-columns: 1fr; gap: 10px; }
.stage { container-type: inline-size; }
@container (min-width: 520px) { .options { grid-template-columns: 1fr 1fr; } }
.option {
  font: inherit; color: var(--text); text-align: left;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px; min-height: 58px;
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius);
  cursor: pointer; transition: border-color .15s, background .15s, transform .1s;
}
button.option:hover:not(:disabled) { border-color: var(--muted); }
.option:disabled { cursor: default; opacity: .8; }
.option__letter { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--bg-2); font-weight: 800; flex: none; }
.option__text { flex: 1; font-weight: 600; min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.option__hint { width: 100%; font-size: .8rem; color: var(--accent); }
.option.chosen { border-color: var(--accent); background: var(--warn-bg); }
.option.chosen .option__letter { background: var(--accent); color: var(--accent-ink); }
.option.armed { border-style: dashed; border-color: var(--accent); }
.option.correct { border-color: var(--ok); background: var(--ok-bg); }
.option.correct .option__letter { background: var(--ok); color: #062015; }
.options--static .option { cursor: default; }

.answerform { display: flex; gap: 8px; }
.answerform input { font-size: 1.1rem; padding: 13px 14px; }
.answerform .btn { flex: none; }

.confirm { background: var(--surface); border: 1px solid var(--accent); border-radius: var(--radius); padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.confirm p { margin: 0; flex-basis: 100%; }

.teamanswer { padding: 12px 16px; border-radius: var(--radius-sm); background: var(--surface-2); border-left: 4px solid var(--accent); }
.teamanswer--none { border-left-color: var(--line); }

.reveal { background: var(--ok-bg); border: 1px solid var(--ok); border-radius: var(--radius); padding: 16px 18px; animation: rise .4s var(--ease); }
.reveal__label { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ok); font-weight: 700; }
.reveal__answer { font-size: 1.5rem; font-weight: 800; margin: 4px 0; }
.reveal__expl { color: var(--text); opacity: .9; }
.reveal__img { max-width: 100%; max-height: 40vh; border-radius: var(--radius-sm); margin-top: 10px; display: block; }
.reveal--big .reveal__answer { font-size: 2.6rem; }
.reveal--big .reveal__expl { font-size: 1.3rem; }

.pause-overlay { position: absolute; inset: -8px; display: grid; place-items: center; background: rgba(13, 16, 36, .66); backdrop-filter: blur(3px); border-radius: var(--radius); z-index: 5; }
.pause-overlay span { font-size: 2.4rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }

/* таблица */
.board { text-align: center; }
.final__kicker { color: var(--accent); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.final__title { font-size: clamp(1.6rem, 5vw, 2.6rem); margin: 8px 0 18px; }
.myplace { margin: 0 0 14px; font-size: 1.1rem; }
.scores { text-align: left; max-width: 640px; margin: 0 auto; }
.scores__title { font-weight: 700; color: var(--muted); text-transform: uppercase; font-size: .85rem; letter-spacing: .06em; margin-bottom: 8px; }
.scores__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.scores__row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); animation: rise .5s var(--ease) both; animation-delay: calc(var(--i) * 60ms); }
.scores__row.is-me { border-color: var(--accent); background: var(--warn-bg); }
.scores__place { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-2); font-weight: 800; flex: none; }
.scores__row.place-1 .scores__place { background: #ffd35c; color: #3a2a00; }
.scores__row.place-2 .scores__place { background: #d7dbea; color: #22263a; }
.scores__row.place-3 .scores__place { background: #e0a26b; color: #2d1500; }
.scores__team { flex: 1; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.scores__score { font-weight: 800; font-size: 1.2rem; }
.scores__delta { font-size: .85rem; font-weight: 700; }
.scores__delta.up { color: var(--ok); }
.scores__delta.down { color: var(--bad); }
.rank-move { transition: transform .8s var(--ease); }
.scores--big { max-width: 1000px; }
.scores--big .scores__row { padding: 16px 22px; font-size: 1.5rem; }
.scores--big .scores__place { width: 48px; height: 48px; }
.scores--big .scores__score { font-size: 2rem; }

/* телефон: плотнее */
@media (max-width: 520px) {
  .stage { padding: 12px; }
  .timer__digits { font-size: 1.8rem; }
  .answerform { flex-direction: column; }
  .topbar { padding: 8px 12px; }
  .soundpanel__pop { position: fixed; left: 12px; right: 12px; top: 56px; width: auto; }
}

/* =====================================================================
   ЭКРАН ТРАНСЛЯЦИИ
   ===================================================================== */
.app--screen { min-height: 100vh; display: flex; flex-direction: column; }
.screen-tools { position: fixed; right: 12px; top: 10px; z-index: 40; display: flex; gap: 6px; align-items: center; opacity: .25; transition: opacity .2s; }
.screen-tools:hover { opacity: 1; }
.screen-center { flex: 1; display: grid; place-items: center; text-align: center; padding: 24px; }
.stage--screen { max-width: 1500px; padding: 32px 48px; font-size: 1.3rem; }
.stage--screen .question__text { font-size: clamp(1.8rem, 3.2vw, 3rem); }
.stage--screen .qhead { font-size: 1.3rem; }
.stage--screen .round-intro__name { font-size: clamp(2.6rem, 6vw, 5rem); }
.stage--screen .round-intro__desc, .stage--screen .round-intro__rules { font-size: 1.5rem; }
.stage--screen .ready__num { font-size: 5rem; }
.screen-q { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
.screen-q:has(.screen-q__media) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.options--big .option { font-size: 1.6rem; padding: 18px 22px; }
.options--big .option__letter { width: 48px; height: 48px; font-size: 1.4rem; }
.answered { font-size: 1.3rem; color: var(--muted); }
.screen-lobby { text-align: center; padding-top: 3vh; }
.screen-lobby__cover { max-width: 60%; max-height: 40vh; border-radius: var(--radius); box-shadow: var(--shadow); }
.screen-lobby__title { font-size: clamp(2.4rem, 5vw, 4.5rem); margin: 24px 0 10px; }
.screen-lobby__desc { font-size: 1.5rem; color: var(--muted); }
.screen-lobby__join { font-size: 1.8rem; margin: 26px 0; }
.screen-lobby__join b { color: var(--accent); }
.board--big .final__title { font-size: 4rem; }

/* =====================================================================
   АДМИНКА
   ===================================================================== */
.admin { min-height: 100vh; }
.nav {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 0 20px; height: 56px;
  background: #151934; color: #fff;
  position: sticky; top: 0; z-index: 30;
}
.nav a { color: #c7cbef; text-decoration: none; padding: 8px 10px; border-radius: 8px; font-weight: 500; }
.nav a.on, .nav a:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.nav .linkbtn { color: #c7cbef; }
.nav__brand { font-weight: 800; margin-right: 14px; color: #ffb547; letter-spacing: .02em; }

.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: #151934; }
.login__card { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 4px; }

.page { max-width: 1200px; margin: 0 auto; padding: 24px 20px 60px; }
.page--narrow { max-width: 520px; }
.page__head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.page__head h2 { margin: 0; }
.empty { text-align: center; padding: 60px 20px; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px; box-shadow: var(--shadow); }
.panel__title { margin: 0 0 12px; font-size: 1.05rem; }
.links { display: flex; flex-direction: column; gap: 6px; margin: 14px 0; font-size: .92rem; overflow-wrap: anywhere; }

.table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.table th { text-align: left; font-weight: 600; color: var(--muted); font-size: .82rem; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.table td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.teams-table input { padding: 6px 8px; }
@media (max-width: 760px) {
  .teams-table thead { display: none; }
  .teams-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .teams-table td { border: 0; padding: 0; }
}

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.qcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.qcard__cover { height: 130px; background: linear-gradient(135deg, #252a6a, #151934) center/cover; display: grid; place-items: center; color: #ffb547; font-size: 3rem; font-weight: 800; }
.qcard__body { padding: 14px 16px 6px; flex: 1; }
.qcard__name { margin: 0 0 4px; font-size: 1.1rem; }
.qcard__name a { color: var(--text); text-decoration: none; }
.qcard__actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px 16px; }

/* редактор */
.editor { max-width: 1400px; margin: 0 auto; padding: 16px 20px 80px; }
.editor__top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; position: sticky; top: 56px; z-index: 20; background: var(--bg); padding: 10px 0; }
.editor__title { margin: 0; font-size: 1.3rem; }
.editor__body { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 8px; }
@media (max-width: 900px) { .editor__body { grid-template-columns: 1fr; } }
.problems { background: var(--warn-bg); border-radius: var(--radius-sm); padding: 8px 14px; margin: 6px 0; }
.problems summary { cursor: pointer; font-weight: 600; }
.tree { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; position: sticky; top: 120px; max-height: calc(100vh - 140px); overflow: auto; }
.tree__item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; font: inherit; background: none; border: 0; padding: 7px 10px; border-radius: 8px; cursor: pointer; color: var(--text); }
.tree__item:hover { background: var(--surface-2); }
.tree__item.on { background: #e6e8fb; color: var(--primary); font-weight: 600; }
.tree__item--round { font-weight: 700; justify-content: space-between; margin-top: 6px; }
.tree__item--q { padding-left: 18px; font-size: .92rem; }
.tree__type { font-size: .7rem; font-weight: 800; background: var(--bg-2); color: var(--muted); border-radius: 5px; padding: 2px 4px; min-width: 26px; text-align: center; flex: none; }
.tree__qtext { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree__add { font: inherit; font-size: .85rem; background: none; border: 0; color: var(--primary); padding: 4px 18px; cursor: pointer; }
.tree__actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 6px 4px; border-top: 1px solid var(--line); margin-top: 8px; }
.form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; min-width: 0; }
.form.locked { opacity: .75; }
.form__tools { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.form__tools select { width: auto; padding: 5px 8px; font-size: .88rem; }
.subform { background: var(--surface-2); border-radius: var(--radius-sm); padding: 14px 16px 6px; margin-bottom: 14px; }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.seg button { font: inherit; padding: 8px 14px; border: 0; background: var(--surface); cursor: pointer; color: var(--text); border-right: 1px solid var(--line); }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--primary); color: #fff; }
.optrow { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.optrow__radio { display: flex; gap: 4px; align-items: center; font-weight: 700; width: 48px; cursor: pointer; }

.mediafield { margin-bottom: 14px; }
.mediafield__label { font-size: .92rem; color: var(--text); font-weight: 500; margin-bottom: 5px; }
.mediafield__body { border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.mediafield__preview img, .mediafield__preview video { max-width: 100%; max-height: 180px; border-radius: 8px; display: block; }
.mediafield__preview audio { width: 100%; }
.progress { height: 6px; background: var(--bg-2); border-radius: 999px; overflow: hidden; }
.progress div { height: 100%; background: var(--primary); transition: width .2s; }
.library { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; max-height: 240px; overflow: auto; }
.library__item { font: inherit; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 6px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; overflow: hidden; }
.library__item img { width: 100%; height: 60px; object-fit: cover; border-radius: 5px; }
.library__item .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; }
.library__icon { font-size: 1.8rem; height: 60px; display: grid; place-items: center; color: var(--muted); }

/* пульт ведущего */
.host { max-width: 1500px; margin: 0 auto; padding: 16px 20px 60px; }
.host__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.host__session { font-size: .9rem; color: var(--muted); }
.host__state { font-size: 1.3rem; font-weight: 700; }
.host__links { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.host__links .conn__text { display: inline; }
.host__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .host__grid { grid-template-columns: 1fr; } }
.control { border-width: 2px; }
.control .timer { margin-bottom: 14px; }
.control__buttons { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.control__secondary { display: flex; gap: 8px; flex-wrap: wrap; }
.control__tail { margin-top: 14px; text-align: right; font-size: .88rem; }
.tiebreak { margin-top: 14px; box-shadow: none; }
.hq__head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.hq__text { font-size: 1.15rem; font-weight: 600; white-space: pre-wrap; margin-bottom: 8px; }
.hq__answer { font-size: 1.1rem; background: var(--ok-bg); padding: 8px 12px; border-radius: 8px; margin: 8px 0; }
.answers-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.tchip { padding: 6px 12px; border-radius: 999px; background: var(--bg-2); color: var(--muted); font-weight: 500; }
.tchip.on { background: var(--ok-bg); color: var(--ok); font-weight: 700; }
.groups { display: flex; flex-direction: column; gap: 6px; }
.group { display: grid; grid-template-columns: minmax(120px, 1.2fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); border-left-width: 5px; }
.group--correct { border-left-color: var(--ok); }
.group--incorrect { border-left-color: var(--bad); }
.group--pending, .group--mixed { border-left-color: var(--warn); background: var(--warn-bg); }
.group__value { font-weight: 700; overflow-wrap: anywhere; }
.group__teams { color: var(--muted); font-size: .92rem; }
.group__verdict { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) { .group { grid-template-columns: 1fr; } .group__verdict { justify-content: flex-start; } }
.vbadge { font-size: .75rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-right: 4px; }
.vbadge--correct { background: var(--ok-bg); color: var(--ok); }
.vbadge--incorrect { background: var(--bad-bg); color: var(--bad); }
.vbadge--pending, .vbadge--mixed { background: var(--warn-bg); color: var(--warn); }
.nolist { margin-top: 10px; }
.review-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.review-nav__btn { font: inherit; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.review-nav__btn.on { background: var(--primary); color: #fff; border-color: var(--primary); }
.review-nav__btn.warn:not(.on) { background: var(--warn-bg); }
.announce-now { background: #ece9ff; padding: 8px 12px; border-radius: 8px; margin-bottom: 10px; }
.presets { display: flex; flex-wrap: wrap; gap: 6px; }
.presets .chip { text-align: left; }
.hteam { border-bottom: 1px solid var(--line); padding: 8px 0; }
.hteam:last-of-type { border-bottom: 0; }
.hteam__head { display: flex; align-items: center; gap: 6px; }
.hteam__score { margin-left: auto; font-weight: 800; font-size: 1.1rem; }
.players { list-style: none; margin: 4px 0 0; padding: 0; }
.player { display: flex; align-items: center; gap: 8px; padding: 3px 0 3px 4px; font-size: .92rem; }
.player__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.player__actions { display: flex; gap: 4px; align-items: center; opacity: .55; }
.player:hover .player__actions { opacity: 1; }
.player__actions select { width: 46px; padding: 2px 4px; font-size: .85rem; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.dot--on { background: var(--ok); }
.dot--off { background: #c4c8d4; }
.adjlist { list-style: none; padding: 0; margin: 10px 0 0; font-size: .92rem; }
.adjlist li { padding: 4px 0; border-bottom: 1px solid var(--line); }
.adjlist li.cancelled { text-decoration: line-through; color: var(--muted); }

/* модальные окна, уведомления */
.modal { position: fixed; inset: 0; z-index: 100; background: rgba(15, 18, 38, .55); display: grid; place-items: center; padding: 16px; }
.modal__box { background: var(--surface); color: var(--text); border-radius: var(--radius); padding: 20px 22px; width: 100%; max-width: 640px; max-height: 90vh; overflow: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.modal__box--sm { max-width: 440px; display: flex; flex-direction: column; gap: 14px; }
.modal__msg { margin: 0; font-size: 1.05rem; }
.modal--wide .modal__box { max-width: 1500px; }
.toasts { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 120; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { background: #151934; color: #fff; padding: 10px 18px; border-radius: 10px; box-shadow: var(--shadow); animation: rise .25s var(--ease); }
.toast--warn { background: var(--warn); }
.toast--error { background: var(--bad); color: #fff; }

/* предпросмотр */
.preview { padding: 14px; }
.preview__bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.preview__frames { display: grid; grid-template-columns: 360px 600px minmax(0, 1fr); gap: 14px; align-items: start; border-radius: var(--radius); padding: 14px; background: #0a0c1d; overflow-x: auto; }
@media (max-width: 1400px) { .preview__frames { grid-template-columns: 360px minmax(0, 1fr); } .pframe--screen { grid-column: 1 / -1; } }
@media (max-width: 800px) { .preview__frames { grid-template-columns: 1fr; } }
.pframe__label { color: #9ca3d4; font-size: .8rem; margin-bottom: 6px; font-weight: 600; }
.pframe__viewport { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; overflow: auto; max-height: 72vh; min-height: 0; }
.pframe--phone .pframe__viewport { width: 360px; }
.pframe--half .pframe__viewport { width: 100%; max-width: 600px; }
.pframe__scaler { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; position: relative; border-radius: 12px; border: 1px solid var(--line); }
.pframe--screen .pframe__viewport { position: absolute; top: 0; left: 0; width: 1600px; height: 900px; max-height: none; transform-origin: 0 0; transform: scale(var(--scale, .5)); border: 0; border-radius: 0; }
.theme-admin .preview__frames .pframe__viewport { color: var(--text); }
.pframe .app--player, .pframe .app--screen { min-height: 0; }
.stage--screen .round-intro__rules { max-width: 1100px; }
.stage--screen .screen-lobby__teams .tag { font-size: 1.3rem; padding: 8px 18px; }

/* ---------- v3 */
.autoreveal { margin-top: 12px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--warn-bg); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.group__note { font-size: .82rem; color: var(--warn); margin-top: 2px; }
.group__similar { color: var(--accent); font-weight: 600; margin-top: 2px; }
.trash { border-top: 1px solid var(--line); margin-top: 8px; padding: 8px 6px 2px; }
.trash__list { list-style: none; margin: 6px 0 0; padding: 0; font-size: .88rem; }
.trash__list li { display: flex; justify-content: space-between; gap: 6px; padding: 3px 0; }
.tree__empty { padding: 8px 10px; }
.archive { margin-top: 22px; }
.scores__tb { font-weight: 500; color: var(--muted); font-size: .8em; }
.memo-body h3 { margin-top: 0; }
.memo-body ol { padding-left: 20px; margin: 8px 0 14px; }
.memo-body li { margin: 6px 0; }
.memo-body p { margin: 6px 0; }
.join__memo { margin-top: 16px; }
.join__memo summary { cursor: pointer; color: var(--accent); }
.theme-game .modal__box { background: var(--surface); border: 1px solid var(--line); }
.help h3 { margin-top: 0; }
.help ol, .help ul { padding-left: 22px; }
.help li { margin: 6px 0; }
.help__toc { margin: 0 0 16px; font-size: .95rem; }
.help .memo-body { background: var(--surface-2); padding: 12px 16px; border-radius: var(--radius-sm); }

/* ---------- сообщения ведущему */
.msgbtn { position: relative; white-space: nowrap; }
.msgbtn__badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bad); color: #fff; font-size: .72rem; display: grid; place-items: center; }
.msgbox { display: flex; flex-direction: column; gap: 10px; }
.msgbox h3 { margin: 0; }
.thread { max-height: 34vh; overflow: auto; display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--bg-2); border-radius: var(--radius-sm); }
.thread__msg { padding: 8px 10px; border-radius: 10px; background: var(--surface); max-width: 88%; align-self: flex-end; }
.thread__msg--host { align-self: flex-start; border-left: 3px solid var(--accent); }
.thread__meta { font-size: .75rem; color: var(--muted); margin-bottom: 2px; }
.messages .row { margin-bottom: 8px; }
.hmsg { border: 1px solid var(--line); border-left-width: 4px; border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.hmsg--new { border-left-color: var(--bad); background: var(--bad-bg); }
.hmsg--read { border-left-color: var(--warn); }
.hmsg--resolved { border-left-color: var(--ok); opacity: .75; }
.hmsg__meta { font-size: .8rem; color: var(--muted); display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.hmsg__text { margin: 4px 0; font-weight: 600; overflow-wrap: anywhere; }
.hmsg__reply { font-size: .88rem; color: var(--muted); margin: 2px 0 4px 8px; }
@media (max-width: 520px) { .msgbtn { padding: 5px 8px; } }

/* ---- v3.1: медиатека, состояние сервиса */
.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-bottom: 12px; }
.statgrid--2 { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.statgrid .panel { margin: 0; }
.logline { font-size: 13px; padding: 6px 0; border-top: 1px solid var(--line, rgba(127,127,127,.2)); word-break: break-word; }
.logline pre { white-space: pre-wrap; font-size: 11px; max-height: 240px; overflow: auto; }
.thumb { width: 56px; height: 40px; object-fit: cover; border-radius: 4px; display: block; }
code.break { word-break: break-all; }

/* ---- волна 1: эффекты поверх игры (не перекрывают поле ответа надолго, отключаются «меньше анимаций») */
.timer--final3 .timer__digits { font-size: 3.4rem; color: var(--bad); animation: shake .35s infinite; }
.timer--big.timer--final3 .timer__digits { font-size: 7rem; }
@keyframes shake { 0%, 100% { transform: translate(0, 0) } 25% { transform: translate(-2px, 1px) rotate(-2deg) } 75% { transform: translate(2px, -1px) rotate(2deg) } }

.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 60; display: grid; place-items: center; }
.fx-layer > * { grid-area: 1 / 1; }
.fx-vs, .fx-plaque { opacity: 0; transform: scale(.85); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.fx-vs.is-on, .fx-plaque.is-on { opacity: 1; transform: scale(1); }
.fx-vs { background: rgba(8, 10, 30, .92); color: #fff; border-radius: 22px; padding: 28px 36px; text-align: center; box-shadow: 0 20px 80px rgba(0, 0, 0, .5); max-width: 92vw; }
.fx-vs__kicker { text-transform: uppercase; letter-spacing: .2em; color: #ffb547; font-weight: 800; margin-bottom: 14px; }
.fx-vs__row { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.fx-vs__card { background: #20265a; border: 2px solid #ffb547; border-radius: 16px; padding: 14px 22px; min-width: 140px; }
.fx-vs__name { font-size: 1.4rem; font-weight: 800; }
.fx-vs__score { font-size: 2.4rem; font-weight: 900; color: #ffb547; }
.fx-vs__vs { font-size: 2.6rem; font-weight: 900; color: #ff6b7a; text-shadow: 0 0 18px rgba(255, 107, 122, .6); }
.fx-plaque { background: linear-gradient(135deg, #ffb547, #ff6b7a); color: #1a1400; border-radius: 20px; padding: 22px 40px; text-align: center; box-shadow: 0 20px 80px rgba(0, 0, 0, .4); }
.fx-plaque__title { font-size: clamp(2rem, 7vw, 4.5rem); font-weight: 900; letter-spacing: .04em; }
.fx-plaque__sub { font-size: 1.2rem; font-weight: 700; }
.fx-confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; }

.dist { margin-top: 14px; display: grid; gap: 6px; }
.dist__title { font-size: .85rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.dist__row { display: grid; grid-template-columns: minmax(80px, 1.2fr) 2fr 3.2em; gap: 10px; align-items: center; font-size: .95rem; }
.dist__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dist__bar { height: 12px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.dist__bar i { display: block; height: 100%; background: var(--muted); border-radius: 6px; transition: width .6s var(--ease); }
.dist__row--ok .dist__bar i { background: var(--ok); }
.dist__row--ok .dist__label { color: var(--ok); font-weight: 700; }
.dist__row--muted { color: var(--muted); }
.dist__pct { text-align: right; font-variant-numeric: tabular-nums; }
.reveal--big .dist__row { font-size: 1.3rem; }
.reveal--big .dist__bar { height: 18px; }

/* саундборд на пульте */
.soundboard { display: flex; flex-wrap: wrap; gap: 6px; }
.soundboard .btn.is-playing { outline: 2px solid var(--primary); }
.features-summary { font-size: .9rem; }
.featgrid { display: grid; gap: 6px; }
.featgrid .check small { display: block; }

/* «меньше анимаций»: без тряски, конфетти, пульсаций */
.less-motion *, .less-motion *::before, .less-motion *::after { animation: none !important; transition-duration: .01ms !important; }
.featgrid .check { display: block; line-height: 1.4; }
.featgrid .check input { margin-right: 6px; vertical-align: -2px; }
.featgrid .check small { display: block; margin-left: 24px; }

/* ---- общий чат */
.chat { display: flex; flex-direction: column; gap: 8px; min-height: 0; height: 100%; }
.chat__list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; min-height: 120px; max-height: 420px; padding-right: 4px; }
.chatside .chat__list { max-height: none; }
.chat__msg { font-size: .92rem; line-height: 1.35; padding: 6px 9px; border-radius: 10px; background: var(--surface-2); position: relative; }
.chat__msg--host { background: var(--warn-bg); border-left: 3px solid var(--accent); }
.chat__msg--me { background: color-mix(in srgb, var(--primary) 14%, var(--surface-2)); }
.chat__who { font-weight: 700; font-size: .82rem; }
.chat__who small { font-weight: 400; color: var(--muted); }
.chat__time { float: right; font-size: .72rem; color: var(--muted); margin-left: 8px; }
.chat__del { float: right; }
.chat__text { word-break: break-word; white-space: pre-wrap; }
.chat__form { display: flex; gap: 6px; position: relative; }
.chat__form input { flex: 1; min-width: 0; }
.chat__pause { position: absolute; inset: -2px; border-radius: 10px; background: var(--surface); border: 1px dashed var(--line);
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; font-size: .9rem; font-weight: 700; color: var(--muted); }
.chat__melt { width: 70%; height: 4px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.chat__melt i { display: block; height: 100%; background: var(--accent); transform-origin: left; transition: transform .2s linear; }

/* игрок: справа колонка на широком экране, выезжающая панель на узком */
.chatside { display: none; }
.chatside--open { display: flex; flex-direction: column; gap: 8px; position: fixed; z-index: 40; background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow); padding: 12px; }
.chatside--open { left: 8px; right: 8px; bottom: 8px; height: 62vh; border-radius: 16px; }
@media (min-width: 721px) { .chatside--open { left: auto; width: 420px; } }
.chatside__head { display: flex; justify-content: space-between; align-items: center; }

/* реакции */
.reactbar { position: fixed; left: 12px; bottom: 12px; z-index: 35; display: flex; gap: 6px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 8px; box-shadow: var(--shadow); }
.reactbar__btn { font-size: 1.3rem; background: none; border: 0; cursor: pointer; padding: 2px 4px; border-radius: 8px; }
.reactbar__btn:disabled { opacity: .45; cursor: default; }
.reactbar__btn:not(:disabled):hover { transform: scale(1.15); }
.react-layer { position: fixed; inset: 0; pointer-events: none; z-index: 55; }
.react-fly { position: absolute; bottom: 60px; font-size: 2rem; animation: reactfly 2.2s var(--ease) forwards; opacity: 0; }
@keyframes reactfly { 0% { transform: translate(0, 0) scale(.6); opacity: 0 } 15% { opacity: 1 } 100% { transform: translate(var(--drift), -55vh) scale(1.1); opacity: 0 } }
.react-tally { position: absolute; left: 14px; bottom: 64px; background: var(--surface); color: var(--text); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 12px; font-size: 1.05rem; box-shadow: var(--shadow); animation: fadeout 2.6s forwards; }
@keyframes fadeout { 0%, 70% { opacity: 1 } 100% { opacity: 0 } }
.app--screen ~ .react-layer .react-fly, .react-layer .react-fly { will-change: transform, opacity; }
.chatside--open ~ .reactbar { bottom: calc(62vh + 16px); }
.is-dim { opacity: .55; }

/* =====================================================================
   ЛОГОТИП QUIZ ENGINE (постановка, раздел 9.8)
   Задаётся одна сторона, вторая — по пропорциям файла; без теней, обводок и перекраски.
   Свободное поле — не меньше четверти высоты логотипа.
   ===================================================================== */
.brand { display: block; height: auto; user-select: none; -webkit-user-drag: none; }
.brand--lockup { width: auto; }
/* эмблема: не уже 160 px — меньше не читается подпись на ленте */
.join { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; }
.brand--join { width: clamp(160px, 42vw, 240px); margin: 8px auto 28px; }
.brand--lobby { width: clamp(160px, 30vw, 220px); margin: 4px auto 18px; }
.brand--final { width: clamp(160px, 22vw, 240px); margin: 0 auto 22px; }
.brand--screen-lobby { width: auto; height: clamp(150px, 22vh, 260px); margin: 0 auto 2.5vh; }
.screen-lobby:has(.brand--screen-lobby) { padding-top: 1vh; }
.screen-lobby .screen-lobby__cover { max-height: 24vh; }
.screen-lobby .screen-lobby__title { margin-top: 2.5vh; }
.screen-lobby .screen-lobby__join { margin: 2.5vh 0; }
.brand--break { width: auto; height: clamp(180px, 30vh, 320px); margin: 2vh auto 4vh; }
.board--big .brand--final { width: auto; height: clamp(180px, 26vh, 300px); }
@media (min-width: 1200px) {
  .brand--join { width: 320px; }
}
@media (max-height: 700px) {
  .brand--lobby, .brand--final { width: 160px; margin-bottom: 12px; }
}
/* знак с надписью: 32 px в шапках служебных экранов */
.nav__brand { display: flex; align-items: center; padding: 0 !important; margin-right: 18px; background: none !important; }
.brand--nav { height: 32px; }
.brand--login { height: 32px; margin: 4px 0 14px; }
.about { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.brand--about { height: 32px; }
.about__ver { font-size: .9rem; }
/* заставка начала игры */
.fx-splash { display: flex; flex-direction: column; align-items: center; gap: 18px; opacity: 0; transform: scale(.9);
  transition: opacity .45s var(--ease), transform .45s var(--ease); }
.fx-splash.is-on { opacity: 1; transform: scale(1); }
.fx-splash img { width: auto; height: min(56vh, 70vw); }
.fx-splash__sub { font-size: clamp(1.1rem, 2.4vw, 1.8rem); font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .6); }
.fx-layer:has(.fx-splash.is-on) { background: rgba(8, 10, 26, .82); transition: background .4s; }
.less-motion .fx-splash { transform: none; transition: opacity .2s; }

/* выбор темы в конструкторе */
.mt0 { margin-top: 0; }
.themepick { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 8px 0 12px; }
.themepick__btn { font: inherit; text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; cursor: pointer;
  border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.themepick__btn.on { border-color: var(--primary); box-shadow: var(--focus); }
.themepick__btn small { color: var(--muted); font-size: .78rem; line-height: 1.3; }
.themepick__sw { display: flex; height: 34px; border-radius: 6px; overflow: hidden; margin-bottom: 4px; border: 1px solid var(--line); }
.themepick__sw i { flex: 1; }
.themepick__btn--clean .themepick__sw i:nth-child(1) { background: #F3F5F8; } .themepick__btn--clean .themepick__sw i:nth-child(2) { background: #FFFFFF; } .themepick__btn--clean .themepick__sw i:nth-child(3) { background: #2950D8; }
.themepick__btn--corp .themepick__sw i:nth-child(1) { background: #F3F5F8; } .themepick__btn--corp .themepick__sw i:nth-child(2) { background: #FFFFFF; } .themepick__btn--corp .themepick__sw i:nth-child(3) { background: #0F7B6C; }
.themepick__btn--arcade .themepick__sw i:nth-child(1) { background: linear-gradient(180deg, #1B0548, #9B1C74); } .themepick__btn--arcade .themepick__sw i:nth-child(2) { background: #FF2E97; } .themepick__btn--arcade .themepick__sw i:nth-child(3) { background: #2DE2E6; }
.themepick__btn--stage .themepick__sw i:nth-child(1) { background: #0d1024; } .themepick__btn--stage .themepick__sw i:nth-child(2) { background: #181d42; } .themepick__btn--stage .themepick__sw i:nth-child(3) { background: #ffb547; }
.swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; display: inline-grid; place-items: center; overflow: hidden; }
.swatch.on { box-shadow: 0 0 0 2px var(--text); }
.swatch--custom { background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); position: relative; }
.swatch--custom input { opacity: 0; position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; padding: 0; border: 0; }
.themeacc { margin: 0 0 12px; }
.corpfields { margin-bottom: 8px; }
.preview__frames.t-arcade .pframe__viewport { background: linear-gradient(180deg, #07011A, #1B0548 60%, #4A0C66); }
input[type="color"] { padding: 3px; height: 40px; cursor: pointer; }
.theme-game { font-family: var(--font); }
.preview__frames .pframe__label { font-family: "Inter", "Segoe UI", system-ui, sans-serif; }
.fx-splash img { max-width: 80vw; object-fit: contain; }
.fx-splash--corp img { height: auto; max-height: 28vh; width: auto; max-width: 60vw; }

/* ---------------------------------------------------------------- общие настройки и «своё» в квизе (V1.5) */
.notice--soft { background: var(--surface-2); border: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; justify-content: space-between; }
.ownmark { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; font-weight: 400; vertical-align: middle; white-space: nowrap; }
.ownmark__tag { font-size: .72rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: rgba(58, 69, 201, .1); color: var(--primary); }
.ownmark__reset { font-size: .78rem; }
.mediafield + .ownmark { margin: 4px 0 0; }
.sbgrid { display: grid; gap: 14px 20px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.sbrow { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--surface-2); }
.conflicts { display: grid; gap: 8px; max-height: 40vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px; }
.conflict { align-items: flex-start; }
.defaults .panel h3 { margin-top: 18px; }
.defaults .panel h3.mt0 { margin-top: 0; }

/* ---------------------------------------------------------------- счётчики реакций (V1.5.1) */
.reactbar__btn { display: inline-flex; align-items: baseline; gap: 3px; }
.reactbar__n { font-size: .85rem; font-weight: 800; color: var(--text); opacity: .8; font-variant-numeric: tabular-nums; }
.reacttotals { display: grid; gap: 4px; margin: 6px 0 10px; }
.reacttotals__i { margin-left: 10px; white-space: nowrap; }

/* ---------------------------------------------------------------- подсказки и отмена вопроса (V1.6) */
.hintbox { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--warn-bg); color: var(--text); border-left: 4px solid var(--warn); }
.hintbox--offer { background: transparent; border: 1px dashed var(--line); border-left: 4px solid var(--warn); }
.qcancel { margin: 0; font-weight: 600; }
.hq__cancel { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 8px 12px; margin: 6px 0; border-radius: var(--radius-sm);
  background: var(--bad-bg); color: var(--bad); font-weight: 600; }
.hq__tools { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }

/* ---------------------------------------------------------------- айдентика команд, награды, пасхалки (V1.6) */
.tavatar { flex: none; display: inline-block; vertical-align: middle; image-rendering: pixelated; }
.topbar__avatar { margin-right: 8px; align-self: center; }
.teamstyle { display: grid; gap: 12px; text-align: left; }
.teamstyle__head { display: flex; gap: 16px; align-items: center; }
.teamstyle__head p { margin: 4px 0 8px; }
.teamstyle__colors { display: flex; flex-wrap: wrap; gap: 8px; }
.teamstyle__colors .swatch { width: 30px; height: 30px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; padding: 0; position: relative; }
.teamstyle__colors .swatch.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface) inset; }
.teamstyle__colors .swatch.taken::after { content: ""; position: absolute; right: -3px; top: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--muted); }
.teamstyle__cry input { flex: 1; min-width: 0; }
.warn-text { color: var(--warn); font-weight: 600; margin: 0; }
.cries { display: grid; gap: 10px; margin-top: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); text-align: left; }
.cry { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--surface);
  border: 1px solid var(--line); border-left: 6px solid var(--team, var(--accent)); }
.cry__team { font-weight: 700; font-size: .9em; }
.cry__text { font-size: 1.1em; font-weight: 600; font-style: italic; }
.round-intro--big .cries { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.hteam__cry { margin: 2px 0 6px 32px; font-style: italic; }
.awards { display: grid; gap: 10px; margin: 8px 0 18px; }
.awards__title { font-weight: 800; font-size: 1.2rem; }
.awards--row { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 18px; }
.award { display: flex; gap: 14px; align-items: center; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); text-align: left; }
.award--mine { border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.award--fresh { animation: awardin .5s var(--ease); }
.award__icon { font-size: 2rem; line-height: 1; width: 2.6rem; flex: none; text-align: center; }
.award__title { font-weight: 800; font-size: 1.1rem; }
.award__teams { font-weight: 700; color: var(--accent); }
.award__why { font-size: .9rem; color: var(--muted); }
.award--big { max-width: 900px; margin: 2vh auto; padding: 3vh 4vw; gap: 3vw; }
.award--big .award__icon { font-size: 9vh; width: auto; }
.award--big .award__title { font-size: 5vh; }
.award--big .award__teams { font-size: 4vh; }
.award--big .award__why { font-size: 2.4vh; }
@keyframes awardin { from { transform: scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
.awardsp__row { align-items: flex-start; margin: 4px 0; }
.fx-award { opacity: 0; transform: scale(.8); transition: opacity .35s var(--ease), transform .35s var(--ease);
  background: linear-gradient(135deg, #ffd56b, #ff8a5c); color: #1a1400; border-radius: 22px; padding: 26px 48px; text-align: center;
  box-shadow: 0 20px 80px rgba(0, 0, 0, .4); max-width: min(92vw, 720px); }
.fx-award.is-on { opacity: 1; transform: scale(1); }
.fx-award__icon { font-size: 4rem; line-height: 1.1; }
.fx-award__title { font-size: 2rem; font-weight: 800; }
.fx-award__teams { font-size: 1.4rem; font-weight: 700; margin-top: 6px; }
.fx-coin { position: fixed; top: -40px; font-size: 1.8rem; animation: coinfall 2.4s linear forwards; pointer-events: none; z-index: 80; }
@keyframes coinfall { to { transform: translateY(110vh) rotate(540deg); } }
.brand--lobby { cursor: default; user-select: none; }

/* ---------------------------------------------------------------- аудиопульт ведущего (V1.7) */
.audiocon__row { display: grid; grid-template-columns: 150px 1fr 48px; align-items: center; gap: 10px; margin: 4px 0; font-size: .92rem; }
.audiocon__row b { text-align: right; font-variant-numeric: tabular-nums; }
.audiocon__quick { margin-bottom: 8px; }

/* ---------------------------------------------------------------- мини-экран «что видят игроки» (V1.7) */
.mini__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mini__head select { font-size: .85rem; padding: 4px 6px; }
.mini__tools { margin-bottom: 8px; gap: 6px 14px; }
.mini__box { position: relative; overflow: hidden; width: 100%; background: #000; border-radius: var(--radius-sm); }
.mini__box iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; pointer-events: none; }
.mini--big { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92vw, 1500px); max-height: 94vh; overflow: auto; z-index: 90; box-shadow: 0 30px 90px rgba(0, 0, 0, .45); }
.mini__backdrop { position: fixed; inset: 0; background: rgba(15, 18, 38, .45); z-index: 89; }
/* режим просмотра на экранах игрока и трансляции: ничего нажать нельзя */
.app--preview .stage, .app--preview .sidecol, .app--preview .chatside, .app--preview .reactbar, .app--preview .playgrid { pointer-events: none; }
.app--preview .topbar .btn, .app--preview .topbar .iconbtn, .app--preview .soundpanel, .app--preview .soundbar, .app--preview .fsbtn { display: none !important; }
.is-preview { overflow: hidden; }

/* ---------------------------------------------------------------- «Команда готова» (V1.7) */
.readycard { text-align: center; display: grid; gap: 8px; justify-items: center; }
.btn--ready { background: var(--ok); color: #fff; border-color: var(--ok); }
.tag--ready { border-color: var(--ok); color: var(--ok); }

/* ---------------------------------------------------------------- растущие списки (V1.7) */
.chat { position: relative; }
.chat__list { resize: vertical; }
.chat__new { position: absolute; left: 50%; transform: translateX(-50%); bottom: 58px; z-index: 2; border: 0; border-radius: 999px; padding: 6px 14px;
  background: var(--primary); color: var(--primary-ink); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; box-shadow: var(--shadow); }
.hmsgs { max-height: 420px; overflow-y: auto; resize: vertical; padding-right: 4px; }
.journal__scroll { max-height: 360px; overflow-y: auto; resize: vertical; }
.problems--soft { background: var(--surface-2); border: 1px solid var(--line); }

/* плейлист музыки между фазами (6.10) */
.playlist { margin-bottom: 14px; }
.playlist__list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.playlist__item { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 8px; background: var(--surface); }
.playlist__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.playlist__play { min-width: 36px; }
.playlist__tools { display: flex; gap: 6px; }
.playlist .mediafield { margin-bottom: 6px; }
.roundmusic { margin: 6px 0 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; }
.roundmusic summary { cursor: pointer; font-weight: 600; }
.nowplaying { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: .9rem; }
.nowplaying__name { font-weight: 600; }
/* захват пульта (9.2) */
.consolebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 12px; border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); }
.consolebar--viewer { background: var(--surface); border-color: var(--line); }
.control--viewer .control__buttons { opacity: .75; }
.consolelabel { white-space: nowrap; }
.estimate { font-size: .9rem; white-space: nowrap; }
/* отзыв после игры (9.1) */
.feedback { display: flex; flex-direction: column; gap: 10px; max-width: 560px; margin: 18px auto 0; text-align: left; }
.feedback__stars { display: flex; gap: 4px; }
.feedback__star { font-size: 2rem; line-height: 1; background: none; border: 0; cursor: pointer; color: var(--line); padding: 2px 4px; }
.feedback__star.on { color: #f5b301; }
.feedback__star:focus-visible { outline: 2px solid var(--accent); border-radius: 6px; }
.feedback textarea { width: 100%; }
.teampick__btn--any { border-style: dashed; }
.waiting .soundcheck { margin: 12px 0; }
/* рассадка и зрители в пульте */
.unassigned { margin: 8px 0; padding: 8px 10px; border: 1px dashed var(--line); border-radius: var(--radius-sm); }
.viewers { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fbsum__item { border-top: 1px solid var(--line); padding: 6px 0; }
.fbsum__stars { color: #f5b301; letter-spacing: 1px; }
/* эфир ведущего */
.onairpanel--live { border-color: #d92d20; box-shadow: 0 0 0 2px rgba(217, 45, 32, .25); }
.onair-badge { display: inline-flex; align-items: center; gap: 6px; background: #d92d20; color: #fff; font-weight: 700; font-size: .85rem; padding: 2px 10px; border-radius: 999px; margin-left: 8px; animation: onairPulse 1.6s ease-in-out infinite; }
.onair-badge .linkbtn { color: #fff; text-decoration: underline; }
.onair-badge--nav { margin: 0 8px; white-space: nowrap; flex: none; }
.onair__tools select { width: auto; max-width: 320px; }
@keyframes onairPulse { 50% { opacity: .75; } }
@media (prefers-reduced-motion: reduce) { .onair-badge { animation: none; } }
.onair__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.onair__talk { user-select: none; touch-action: none; min-width: 300px; }
.btn--danger { background: #d92d20; color: #fff; border-color: #d92d20; }
.onair__busy { margin-top: 8px; }
.onair__meter { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; margin: 10px 0 6px; }
.onair__meter i { display: block; height: 100%; background: #16a34a; transition: width .1s linear; }
.onair__meter i.hot { background: #d92d20; }
.onair__tools { gap: 12px; flex-wrap: wrap; }
/* игрок и экран: плашка «Ведущий говорит» */
.onair-plaque { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 30; background: #d92d20; color: #fff; padding: 6px 16px; border-radius: 999px; font-weight: 700; box-shadow: 0 4px 16px rgba(0,0,0,.25); display: flex; gap: 8px; align-items: center; pointer-events: none; }
.onair-plaque small { font-weight: 500; opacity: .9; }
.app--screen .onair-plaque { top: 18px; font-size: 1.3rem; }
/* группы настроек: в «Настройках» — навигация слева, в конструкторе — вкладки сверху */
.setgroups { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 16px; }
.setgroups__btn { font: inherit; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 14px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.setgroups__btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.setgroups__n { font-size: .75rem; background: rgba(0,0,0,.12); border-radius: 999px; padding: 0 6px; }
@media (min-width: 900px) {
  .settingsform:has(.setgroups--global) { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 0 24px; align-items: start; }
  .settingsform:has(.setgroups--global) > .ownsummary { grid-column: 1 / -1; }
  .setgroups--global { flex-direction: column; position: sticky; top: 76px; }
  .setgroups--global .setgroups__btn { border-radius: var(--radius-sm); justify-content: space-between; }
}
.resetlist { max-height: 50vh; overflow: auto; }
/* автопилот на пульте */
.autopilot { display: flex; flex-direction: column; gap: 8px; }
.ap-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.ap-switch button { font: inherit; font-weight: 600; border: 0; background: var(--surface); padding: 8px 16px; cursor: pointer; }
.ap-switch button + button { border-left: 1px solid var(--line); }
.ap-switch button.on.m-manual { background: #64748b; color: #fff; }
.ap-switch button.on.m-semi { background: #d97706; color: #fff; }
.ap-switch button.on.m-auto { background: #16a34a; color: #fff; }
.ap-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ap-wait { background: #fff4d6; border: 1px solid #f5c04a; color: #6b4a00; border-radius: var(--radius-sm); padding: 6px 10px; font-weight: 600; }
/* обратный отсчёт у игроков и на экране */
.ap-countdown { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 25; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: 8px 20px; box-shadow: var(--shadow); font-weight: 600; font-size: 1.15rem; pointer-events: none; }
.ap-countdown b { font-variant-numeric: tabular-nums; }
.app--screen .ap-countdown { font-size: 1.8rem; bottom: 28px; }
/* промежуточные экраны: крупный отсчёт в начале экрана, по центру (замечание 3, V2.3) */
.apc { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: .3em .5em; margin: 4px auto 18px; padding: 10px 22px;
  width: fit-content; max-width: 100%; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.apc__label { font-size: 1.25rem; font-weight: 600; color: var(--muted); }
.apc__num { font-size: 3rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--accent, var(--primary)); }
.apc__unit { font-size: 1.25rem; font-weight: 600; color: var(--muted); }
.app--screen .apc__label, .app--screen .apc__unit { font-size: 2rem; }
.app--screen .apc__num { font-size: 5.5rem; }

/* «Проверить ответ» в редакторе (V2.1) */
.anscheck { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line, rgba(127,127,127,.3)); }
.anscheck__res { margin-top: -4px; }
.anscheck__res code { background: rgba(127,127,127,.15); padding: 0 4px; border-radius: 4px; }
.verdict--correct { color: var(--ok, #2e9e5b); }
.verdict--pending { color: var(--warn); }
.verdict--incorrect { color: var(--bad, #d64545); }

/* Аварийный режим пульта (V2.1) */
.emergency { position: fixed; inset: 0; z-index: 900; background: rgba(10, 12, 20, .72); display: flex; align-items: flex-start; justify-content: center; padding: 24px 16px; overflow-y: auto; }
.emergency__box { background: var(--surface); color: var(--text); border-radius: 14px; border: 3px solid var(--bad); max-width: 640px; width: 100%; padding: 18px 20px; box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.emergency__head { display: flex; align-items: center; gap: 10px; color: var(--bad); font-size: 1.15rem; }
.emergency__pos { margin: 6px 0 10px; }
.emergency__table { width: 100%; border-collapse: collapse; margin: 6px 0 14px; }
.emergency__table th, .emergency__table td { text-align: left; padding: 4px 8px; border-bottom: 1px solid rgba(127,127,127,.25); }
.emergency__table td:first-child, .emergency__table th:first-child { width: 60px; }
.emergency__memo { margin-top: 14px; font-size: .92rem; }
.emergency__memo ol { padding-left: 20px; margin: 4px 0 0; }
.emergency__memo li { margin: 4px 0; }
.preload-ready { margin: 0 0 8px; }
.weight { margin: 4px 0 8px; }

/* Церемония финала (27.1, V2.3): заголовок, таблица рекордов, грамота */
.cer { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; }
.cer__title { margin: 4px 0 0; text-align: center; font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: .01em; line-height: 1.15;
  background: linear-gradient(90deg, #D4A51E, #F5D76E, #D4A51E); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cer--big .cer__title { font-size: clamp(2.6rem, 5vw, 4.4rem); }
.hiscore { text-align: left; width: 100%; max-width: 760px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; }
.cer--big .hiscore { max-width: 1200px; }
.hiscore__head, .hiscore__row { display: grid; grid-template-columns: 4.2em minmax(0, 1fr) 5.5em minmax(3em, auto); align-items: center; gap: 10px; padding: 8px 14px; }
.hiscore__head { position: sticky; top: 0; z-index: 1; background: var(--surface-2); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.hiscore__body { max-height: min(60vh, 640px); overflow-y: auto; }
.cer--big .hiscore__body { max-height: 62vh; }
.hiscore__row { border-top: 1px solid var(--line); font-size: 1.05rem; }
.cer--big .hiscore__row { font-size: 1.6rem; padding: 12px 22px; }
.hiscore__num { text-align: right; font-variant-numeric: tabular-nums; }
.hiscore__place { font-weight: 800; font-size: 1.2em; font-variant-numeric: tabular-nums; }
.hiscore__place small { font-size: .55em; margin-left: 1px; }
.hiscore__team { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hiscore__name { font-weight: 700; overflow-wrap: anywhere; }
.hiscore__swatch { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.hiscore__score { font-weight: 800; }
.hiscore__awards { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-start; }
.hiscore__award { position: relative; border: 0; background: none; padding: 0 2px; font-size: 1.2em; line-height: 1; cursor: help; }
.hiscore__tip { position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 3; white-space: nowrap; font-size: .8rem; font-weight: 600; padding: 4px 8px;
  border-radius: 6px; background: var(--text); color: var(--surface); }
.hiscore__row.place-1 { background: linear-gradient(90deg, rgba(245, 215, 110, .38), transparent 70%); }
.hiscore__row.place-2 { background: linear-gradient(90deg, rgba(200, 206, 216, .45), transparent 70%); }
.hiscore__row.place-3 { background: linear-gradient(90deg, rgba(222, 160, 104, .35), transparent 70%); }
.hiscore__row.place-1 .hiscore__place { color: #B8860B; }
.hiscore__row.place-2 .hiscore__place { color: #7D8696; }
.hiscore__row.place-3 .hiscore__place { color: #A0602A; }
.hiscore__row.is-me { outline: 3px solid var(--primary); outline-offset: -3px; }
.cer--fresh .hiscore__row { animation: hiIn .5s var(--ease) both; animation-delay: calc(2.5s + var(--i) * .08s); }
@keyframes hiIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.less-motion .cer--fresh .hiscore__row { animation: none; }
.cer__after { width: 100%; display: flex; flex-direction: column; align-items: center; }
.cer__certs { font-size: 1.6rem; font-weight: 700; margin: 6px 0 0; }
@media (max-width: 520px) {
  .hiscore__head, .hiscore__row { grid-template-columns: 3.2em minmax(0, 1fr) 3.6em auto; gap: 6px; padding: 8px 10px; }
  .hiscore__head { font-size: .66rem; letter-spacing: .02em; }
}
.finalplaque { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; margin: 10px 0; }
.finalplaque__text { font-size: 1.1rem; }
.finalplaque__btn { width: min(100%, 360px); }
.fx-champagne { position: fixed; left: 50%; bottom: -80px; font-size: 6rem; transform: translateX(-50%); animation: champ 3s var(--ease) forwards; z-index: 81; }
.fx-champagne--pixel { image-rendering: pixelated; filter: drop-shadow(0 0 12px #FF2E97); }
@keyframes champ { 0% { bottom: -80px; transform: translateX(-50%) rotate(-30deg); } 40% { bottom: 35vh; transform: translateX(-50%) rotate(15deg); } 70% { bottom: 30vh; transform: translateX(-50%) rotate(-10deg) scale(1.15); } 100% { bottom: 30vh; opacity: 0; transform: translateX(-50%) rotate(0) scale(1.3); } }
#print-cert { display: none; }
@media print {
  body.printing-cert > *:not(#print-cert) { display: none !important; }
  body.printing-cert #print-cert { display: block; width: 100vw; height: 100vh; overflow: hidden; }
  body.printing-cert #print-cert img { width: 100vw; height: 100vh; object-fit: contain; display: block; }
  @page { size: A4 landscape; margin: 0; }
}
.hallstrip { margin: 10px auto; max-width: 720px; text-align: center; font-size: .95rem; }
.hallstrip--big { font-size: 1.25rem; max-width: 1100px; margin-top: 24px; }
.hallstrip__list { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 2px; font-size: .9em; }
.certmaker { max-width: 1200px; }
.certmaker__grid { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 18px; align-items: start; }
.certmaker__preview canvas { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
@media (max-width: 860px) { .certmaker__grid { grid-template-columns: 1fr; } }
.hallrec__podium { display: flex; flex-wrap: wrap; gap: 14px; margin: 6px 0; font-size: 1.05rem; }

/* Сцены и живые фоны (V2.2, scene.js) */
.scenes { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.scenes__item { position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--ease); }
.scenes__item.is-on { opacity: 1; }
.scene2 { position: absolute; inset: 0; overflow: hidden; }
.scene2__box { position: absolute; overflow: hidden; }
.scene2__bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene2__layer { position: absolute; display: block; height: auto; will-change: transform, opacity; }
.scene2__ribbon { display: flex; }
.scene2__ribbon img { display: block; height: auto; flex: none; }
.scene2--pixel img { image-rendering: pixelated; image-rendering: crisp-edges; }
.scene2__dim { position: absolute; inset: 0; background: #000; }
.less-motion .scene2__layer, .less-motion .scene2__ribbon { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .scene2__layer, .scene2__ribbon { animation: none !important; } }
/* содержимое — над сценой в любой теме */
.theme-game .stage, .theme-game .playgrid, .theme-game .join, .theme-game .screen-center { position: relative; z-index: 1; }
.scenes-page__grid { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .scenes-page__grid { grid-template-columns: 1fr; } }
.scenes-lib__item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 0; }
.scenes-lib__item.on { font-weight: 800; }
.scene-card .grow { flex: 1; }
.layer { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.layer__head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.spv__label { font-size: .8rem; color: var(--muted); margin-bottom: 4px; }
.spv__frame { position: relative; overflow: hidden; border-radius: 8px; background: #0D0221; border: 1px solid var(--line); }
.spv__frame .scene2 { position: absolute; }
.spv__ui { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px; z-index: 2; }
.spv__q { background: rgba(255,255,255,.88); color: #1b1e2b; font-weight: 700; font-size: .7rem; padding: 6px 10px; border-radius: 6px; text-align: center; max-width: 85%; }
.spv__t { background: rgba(0,0,0,.6); color: #fff; font-weight: 800; font-size: .8rem; padding: 2px 8px; border-radius: 999px; }
.focuspick { position: relative; display: inline-block; cursor: crosshair; max-width: 100%; }
.focuspick img { display: block; max-width: 100%; max-height: 200px; border-radius: 6px; }
.focuspick img.pixel { image-rendering: pixelated; }
.focuspick__dot { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px #000; pointer-events: none; }
.row.wrap { flex-wrap: wrap; }
.layer__builtin { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.layer__builtin img { max-width: 120px; max-height: 40px; background: #0D0221; border-radius: 4px; }
.layer__builtin img.pixel { image-rendering: pixelated; }

/* Fair play (9.4, V2.3): текст вопроса и вариантов у игрока не выделяется */
.fairplay .question__text, .fairplay .option__text, .fairplay .option__letter, .fairplay .reveal, .fairplay .hintbox {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}

/* выпадающее меню (меню «Экспорт» квиза, V2.3) */
.menu { position: relative; display: inline-block; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu__list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; min-width: 280px; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(20, 30, 60, .16); padding: 4px; }
.menu__item { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 8px 10px; border-radius: 8px; border: 0; background: none;
  color: inherit; text-decoration: none; font: inherit; cursor: pointer; }
.menu__item:hover, .menu__item:focus-visible { background: var(--surface-2); }
.menu__item small { color: var(--muted); font-size: .8rem; }

/* спецэффекты ведущего (раздел 19, V2.3): надпись в стиле «Паники» — один вид во всех темах */
/* как «Паника» в V1.6 (замечание 4): жёлтая полоса во всю ширину по центру, прямые углы, Russo One заглавными */
.fx-say { pointer-events: auto; cursor: pointer; justify-self: stretch; width: 100vw; padding: 22px 4vw; border-radius: 0; text-align: center;
  background: rgba(249, 200, 14, .94); color: #120330; font: 400 clamp(1.8rem, 6vw, 4.2rem)/1.15 "Russo One", "Exo 2", system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: .04em; box-shadow: 0 0 0 4px #120330, 0 16px 60px rgba(0, 0, 0, .35);
  opacity: 0; transform: scaleY(.6); transition: opacity .25s var(--ease), transform .25s var(--ease); overflow-wrap: anywhere; }
.fx-say.is-on { opacity: 1; transform: none; }
.fx-say--still, .less-motion .fx-say { transform: none; transition: opacity .2s linear; }
.fx-eimg { pointer-events: auto; cursor: pointer; opacity: 0; transition: opacity .3s var(--ease); }
.fx-eimg.is-on { opacity: 1; }
.fx-eimg img { display: block; max-width: min(40vw, 420px); max-height: 38vh; object-fit: contain; }
.fx-eimg--tl { justify-self: start; align-self: start; margin: 16px; }
.fx-eimg--tr { justify-self: end; align-self: start; margin: 16px; }
.fx-eimg--bl { justify-self: start; align-self: end; margin: 16px; }
.fx-eimg--br { justify-self: end; align-self: end; margin: 16px; }
.fx-eimg--above { transform: translateY(calc(-50% - 70px)); }
.fx-eimg--tl img, .fx-eimg--tr img, .fx-eimg--bl img, .fx-eimg--br img { max-width: min(26vw, 260px); max-height: 26vh; }
.effectsboard { max-height: 220px; overflow-y: auto; }
/* «Настройки» → «Спецэффекты» */
.effects__list { list-style: none; padding: 0; margin: 10px 0; display: flex; flex-direction: column; gap: 6px; }
.effects__item { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--surface); }
.effects__item.is-hidden { opacity: .55; }
.effects__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.effects__order { display: inline-flex; gap: 2px; }
.effects__label { width: 220px; max-width: 100%; }
.effects__parts { display: inline-flex; gap: 4px; align-items: center; }
.effects__edit { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }

/* банк вопросов (V2.5, раздел 9.9) */
.bank__body { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 960px) { .bank__body { grid-template-columns: 1fr; } }
.bank__list { position: sticky; top: 8px; display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 140px); overflow: hidden; }
.bank__list .banklist { overflow-y: auto; }
.bank__form { min-width: 0; }
.bank__meta { margin-bottom: 8px; align-items: start; }
.bank__versions li.on { font-weight: 700; }
.bank__oldver { border: 1px dashed var(--line); border-radius: 10px; padding: 10px; margin-top: 8px; background: var(--surface-2); }
.bankfilters { display: flex; flex-direction: column; gap: 6px; }
.bankfilters .row { flex-wrap: wrap; gap: 6px; }
.bankfilters__q { flex: 1 1 200px; min-width: 160px; }
.bankfilters__tags { display: flex; flex-wrap: wrap; gap: 4px; }
.banklist { display: flex; flex-direction: column; gap: 4px; }
.banklist--pick { max-height: 55vh; overflow-y: auto; }
.bankitem { display: flex; gap: 8px; align-items: flex-start; text-align: left; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: inherit; font: inherit; cursor: pointer; width: 100%; }
.bankitem:hover { background: var(--surface-2); }
.bankitem.on { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.bankitem__type { flex: none; width: 2em; text-align: center; font-weight: 700; color: var(--muted); }
.bankitem__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.bankitem__played { color: var(--muted); }
.bankbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 10px; }
.diff td { vertical-align: top; }
.diff__old { color: var(--bad); text-decoration: line-through; text-decoration-color: rgba(210, 59, 75, .4); }
.diff__new { color: var(--ok); }
.modal__box--wide { max-width: 980px; }

/* сцена из арт-пака (V2.3.1, artpack.js): холст 2560×1440, масштабируется целиком */
.ap { position: absolute; inset: 0; overflow: hidden; background: #12081F; }
.ap__frame { position: absolute; inset: 0; overflow: hidden; }
.ap__box { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; }
.ap__img, .ap-spot { position: absolute; display: block; max-width: none; }
.ap-spot { opacity: 0; }
.ap-star { position: absolute; display: block; max-width: none; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.ap-meteors { overflow: hidden; }
.ap-meteor { position: absolute; background: linear-gradient(90deg, rgba(255, 236, 255, 0), rgba(255, 236, 255, .95)); border-radius: 3px; transform-origin: 100% 50%; will-change: transform, opacity; }
.ap__layer { position: absolute; inset: 0; }
.ap-mover { position: absolute; left: 0; top: 0; will-change: transform; }
.ap-mover img { display: block; max-width: none; }
.ap-glint { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.ap-glint__band { position: absolute; top: 0; bottom: 0; left: 0; opacity: 0; will-change: transform, opacity; }
.ap-crt { pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, var(--scan)) 0 2px, transparent 2px 5px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, var(--vig)) 100%); }
.less-motion .ap__img { animation: none !important; }

/* режим витрины (9.1): интерфейс уходит (0,6 с) и открывает сцену; возвращается за 0,3 с */
.app--player .topbar, .app--player .playgrid, .app--player .chatside, .app--player .reactbar, .app--player .tfoot, .app--player .soundbar, .app--player .ap-countdown {
  transition: opacity .3s var(--ease), visibility 0s linear 0s; }
.app--showcase .topbar, .app--showcase .playgrid, .app--showcase .chatside, .app--showcase .reactbar, .app--showcase .tfoot,
.app--showcase .soundbar, .app--showcase .ap-countdown {
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .6s var(--ease), visibility 0s linear .6s; }
.less-motion .app--player .topbar, .less-motion .app--player .playgrid, .less-motion .app--player .chatside, .less-motion .app--player .reactbar,
.less-motion .app--player .tfoot { transition: none !important; }
.showcase-plaque { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; max-width: calc(100vw - 32px); background: rgba(18, 8, 31, .9); color: #F6EEFF; border: 2px solid var(--accent, #19E6FF);
  border-radius: 12px; cursor: pointer; font-weight: 600; }
.showcase-plaque__team { font-size: 1.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.showcase-plaque__chat { font-weight: 700; }
.showcase-toggle { position: fixed; right: 14px; bottom: 14px; z-index: 31; padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(246, 238, 255, .5);
  background: rgba(18, 8, 31, .82); color: #F6EEFF; font: 600 .85rem/1.2 inherit; cursor: pointer; }
.app--showcase .showcase-toggle { opacity: .8; }
@media (max-width: 720px) { .showcase-plaque { bottom: 60px; } }

/* ---------------------------------------------------------------- метаигра (V2.6, раздел 29) */
.tactics { position: relative; display: inline-flex; align-items: center; }
.tactics__btn { white-space: nowrap; }
.tactics__q { display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; border-radius: 50%; border: 1px solid currentColor; font-size: .75em; margin-left: 2px; }
.tactics__toast { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; background: var(--surface); color: var(--text); border: 1px solid var(--line);
  border-left: 4px solid var(--accent); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 8px 12px; font-size: .9rem; width: max-content; max-width: min(80vw, 360px); }
.tactics__rules { max-width: 560px; }
.tactics__item { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line); }
.tactics__icon { flex: 0 0 2.2em; height: 2.2em; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--surface-2); font-weight: 800; }
.tactics-slot { display: flex; flex-direction: column; gap: 8px; margin: 12px auto 0; max-width: 640px; width: 100%; }
.joker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; border-left: 4px solid var(--accent); }
.joker--on { background: var(--ok-bg); border-left-color: var(--ok); }
.modcard { margin: 14px auto; max-width: 640px; padding: 14px 18px; border-radius: var(--radius); background: var(--surface); border: 2px solid var(--accent); text-align: center; }
.modcard__title { font-size: clamp(1.4rem, 6vw, 2.4rem); font-weight: 900; letter-spacing: .06em; color: var(--accent); }
.modcard__rule { margin-top: 6px; }
.modcard--super { border-color: var(--warn); } .modcard--super .modcard__title { color: var(--warn); }
.modcard--wager { border-color: var(--primary); } .modcard--wager .modcard__title { color: var(--primary); }
.modcard--big { max-width: 1000px; font-size: 1.4rem; }
.modbadges { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0; }
.modbadge { display: inline-block; font-size: .75rem; font-weight: 800; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: var(--accent-ink, #fff); margin-right: 4px; }
.modbadge--super { background: var(--warn); color: #120330; }
.modbadge--wager { background: var(--primary); color: var(--primary-ink, #fff); }
.modbadge--joker { background: var(--ok); color: #fff; }
.wager { margin: 12px auto; max-width: 640px; text-align: left; border-left: 4px solid var(--primary); }
.wager__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.wager__left { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.wager__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.wager__chip { min-width: 3em; min-height: 44px; font-size: 1.1rem; font-weight: 700; justify-content: center; }
.wager-result { margin: 12px 0; padding: 12px 16px; border-radius: var(--radius-sm); font-weight: 800; font-size: 1.15rem; text-align: center; }
.wager-result.is-win { background: var(--ok-bg); color: var(--ok); }
.wager-result.is-lose { background: var(--bad-bg); color: var(--bad); }
.wager-result.is-pending { background: var(--warn-bg); color: var(--warn); }
.wager-screen { margin: 18px auto; font-size: 2rem; font-weight: 800; }
.burnwarn { margin: 0; }
.tacticslist { margin-top: 14px; text-align: left; }
.tacticslist ul { margin: 6px 0 0; padding-left: 1.2em; }
.hosttactics { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; padding: 8px 10px; border: 1px dashed var(--line); border-radius: var(--radius-sm); }
.hosttactics__pause { margin: 0; }
.wagerhost__list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tree__mod { font-size: .8em; font-weight: 800; color: var(--accent); margin: 0 2px; }
.theme-game.t-arcade .modcard, .theme-game.t-arcade .modbadge { border-radius: 0; }
.theme-game.t-arcade .modcard__title { font-family: var(--font-label, inherit); text-transform: uppercase; }
@media (max-width: 560px) { .tactics__word { display: none; }
  .tactics__toast { position: fixed; top: 8px; left: 12px; right: 12px; width: auto; max-width: none; } }

/* ---------------------------------------------------------------- босс-баттл (V2.7, раздел 30; 33.6) */
.bt { position: absolute; inset: 0; overflow: hidden; background: #12081F; color: #F6EEFF; --alarm: #FF2B4E; --bt-yel: #FFE14D; --bt-cyan: #19E6FF; --bt-mag: #FF2BD6;
  font-family: "Exo 2", var(--font, system-ui), sans-serif; touch-action: manipulation; }
.bt-box { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; }
.bt-world { position: absolute; left: 0; top: 0; width: 2560px; height: 1440px; }
.bt-char { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
.bt-char__bob, .bt-char__act, .bt-char__flip { position: absolute; inset: 0; transform-origin: 50% 100%; }
.bt-char__img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; user-select: none; }
.bt-flash { opacity: 0; }
.bt-hidden { visibility: hidden; }
.bt--edit .bt-char { pointer-events: auto; cursor: grab; outline: 4px dashed var(--bt-yel); outline-offset: 8px; }
.bt--edit { cursor: default; }
.bt-ret { position: absolute; border: 2px solid rgba(255, 43, 78, .28); box-sizing: border-box; opacity: 0; pointer-events: none; }
.bt-ret.on { opacity: 1; }
.bt-ret .c { position: absolute; width: 64px; height: 64px; border: 0 solid var(--alarm); filter: drop-shadow(0 0 6px rgba(255, 43, 78, .8)); animation: btbreathe 1s ease-in-out infinite alternate; }
.bt-ret .tl { left: -8px; top: -8px; border-width: 8px 0 0 8px; } .bt-ret .tr { right: -8px; top: -8px; border-width: 8px 8px 0 0; }
.bt-ret .bl { left: -8px; bottom: -8px; border-width: 0 0 8px 8px; } .bt-ret .br { right: -8px; bottom: -8px; border-width: 0 8px 8px 0; }
.bt-ret b { position: absolute; font: 22px/1 "Press Start 2P", monospace; color: var(--alarm); letter-spacing: .06em; white-space: nowrap;
  text-shadow: 2px 2px 0 #12081F, -2px -2px 0 #12081F, 2px -2px 0 #12081F, -2px 2px 0 #12081F; }
.bt-ret .t1 { left: 0; top: -48px; color: var(--bt-yel); } .bt-ret .t2 { right: 0; top: -48px; animation: btlock 1s steps(1) infinite; }
.bt-ret .t3 { left: 0; bottom: -44px; font-size: 18px; color: #FF8FA3; } .bt-ret .t4 { right: 0; bottom: -44px; font-size: 18px; color: #FF8FA3; }
.bt-ret .scan { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 43, 78, .55), transparent) top / 100% 3px no-repeat; animation: btscan 4s linear infinite; }
@keyframes btbreathe { from { opacity: .65; } to { opacity: 1; } }
@keyframes btlock { 0%, 60% { opacity: 1; } 62%, 98% { opacity: .25; } }
@keyframes btscan { 0% { background-position: 0 0; opacity: 0; } 10%, 90% { opacity: 1; } 100% { background-position: 0 100%; opacity: 0; } }
.bt--still .bt-ret .c, .bt--still .bt-ret .t2 { animation: none; }
.bt-allytag { position: absolute; pointer-events: none; }
.bt-allytag b { font: 20px/1 "Press Start 2P", monospace; color: var(--bt-cyan); letter-spacing: .06em; white-space: nowrap; text-shadow: 2px 2px 0 #12081F, -2px -2px 0 #12081F; }
.bt-sfx { position: absolute; left: 0; top: 0; width: 2560px; height: 1440px; pointer-events: none; }
.bt-muz { position: absolute; width: 160px; height: 160px; opacity: 0; max-width: none; }
.bt-dmg { position: absolute; font: 64px "Press Start 2P", monospace; color: #fff; text-shadow: 4px 4px 0 var(--alarm), -2px -2px 0 #12081F; white-space: nowrap; }
.bt-dmg--crit { color: var(--bt-yel); }
.bt-vig { position: absolute; left: 0; top: 0; width: 2560px; height: 1440px; background: radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(255, 43, 78, .55) 100%); opacity: 0; pointer-events: none; }
.bt-vig.on { animation: btvig 2.4s linear both; }
@keyframes btvig { 0% { opacity: 0; } 25% { opacity: 1; } 50% { opacity: .4; } 75% { opacity: 1; } 100% { opacity: 0; } }
.bt-alert { position: absolute; left: 0; top: 560px; width: 2560px; height: 300px; background: var(--bt-yel); display: grid; place-items: center; animation: btalert 2.4s both; }
.bt-alert span { font: 150px/1 "Russo One", sans-serif; color: #12081F; letter-spacing: .04em; }
@keyframes btalert { 0% { opacity: 0; transform: scaleY(.2); } 10% { opacity: 1; transform: scaleY(1); } 85% { opacity: 1; } 100% { opacity: 0; } }
.bt-say { position: absolute; max-width: 760px; padding: 22px 30px; background: rgba(18, 8, 31, .9); border: 3px solid var(--alarm); font: 600 34px/1.3 "Exo 2", sans-serif; }
.bt-say b { font: 26px "Russo One", sans-serif; color: var(--alarm); margin-right: 10px; }
.bt-count { position: absolute; left: 0; top: 200px; width: 2560px; text-align: center; font: 150px/1 "Press Start 2P", monospace; color: var(--bt-yel); text-shadow: 10px 10px 0 var(--bt-mag), -4px -4px 0 #12081F; animation: btcount .95s ease-out both; pointer-events: none; }
@keyframes btcount { from { transform: scale(1.4); opacity: 0; } 25% { transform: scale(1); opacity: 1; } to { opacity: 1; } }
.bt--still .bt-alert, .bt--still .bt-vig.on, .bt--still .bt-count { animation: none; opacity: 1; }
.bt--still .bt-vig.on { opacity: .6; }
.bt-paused { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(7, 1, 26, .55); }
.bt-paused span { font: 90px "Press Start 2P", monospace; color: var(--bt-yel); }
/* интерфейс боя в координатах холста */
.bt-hp { position: relative; background: rgba(18, 8, 31, .88); border: 4px solid var(--alarm); box-sizing: border-box; }
.bt-hp i { position: absolute; left: 8px; top: 8px; bottom: 8px; width: calc((100% - 16px) * var(--hp, 1)); background: var(--alarm); transition: width .5s; }
.bt-hp--rage i { background: linear-gradient(90deg, var(--alarm), #FF8A00); }
.bt-hp span { position: absolute; left: 28px; top: 14px; font: 34px "Russo One", sans-serif; letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 2px 0 #12081F, 2px 0 0 #12081F, -2px 0 0 #12081F; }
.bt-hp b { position: absolute; right: 28px; top: 16px; font: 28px "Press Start 2P", monospace; color: var(--bt-yel); text-shadow: 3px 3px 0 #12081F; }
.bt-box .bt-q, .bt-box .bt-tac, .bt-box .bt-next { position: absolute; left: 1180px; top: 176px; width: 1220px; box-sizing: border-box; }
.bt-q { background: rgba(18, 8, 31, .88); border: 4px solid var(--bt-cyan); padding: 30px 44px; }
.bt-q__top { display: flex; justify-content: space-between; font: 30px "Russo One", sans-serif; color: var(--bt-yel); letter-spacing: .06em; }
.bt-q__hot { color: var(--alarm); }
.bt-q__text { font: 600 40px/1.3 "Exo 2", sans-serif; margin: 26px 0 30px; }
.bt-q__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.bt-q__opt { text-align: left; border: 3px solid var(--bt-mag); background: rgba(42, 18, 72, .9); color: #F6EEFF; padding: 20px 26px; font: 600 30px "Exo 2", sans-serif; cursor: pointer; border-radius: 0; }
.bt-q__opt span { font: 26px "Russo One", sans-serif; color: var(--bt-cyan); margin-right: 14px; }
.bt-q__opt:disabled { cursor: default; }
.bt-q__opt.chosen { border-color: var(--bt-yel); box-shadow: 0 0 0 3px var(--bt-yel) inset; }
.bt-q__opt.correct { border-color: #3BFF8A; background: rgba(20, 90, 50, .85); }
.bt-q__form { display: flex; gap: 16px; }
.bt-q__form input { flex: 1; font: 600 32px "Exo 2", sans-serif; padding: 16px 20px; background: #0C0418; color: #F6EEFF; border: 3px solid var(--bt-mag); border-radius: 0; }
.bt-btn { font: 28px "Russo One", sans-serif; letter-spacing: .04em; padding: 16px 26px; background: var(--bt-yel); color: #12081F; border: 0; border-radius: 0; cursor: pointer; }
.bt-btn:disabled { opacity: .45; cursor: default; }
.bt-btn--ghost { background: transparent; color: var(--bt-cyan); border: 3px solid var(--bt-cyan); }
.bt-btn.on { background: #3BFF8A; }
.bt-q__status, .bt-q__correct, .bt-q__scroll { margin-top: 20px; font: 600 28px "Exo 2", sans-serif; color: #D9C8F2; }
.bt-q__correct b { color: #3BFF8A; }
.bt-q__err { margin-top: 12px; color: #FF8FA3; font-size: 26px; }
.bt-tac { background: rgba(18, 8, 31, .88); border: 4px solid var(--bt-yel); padding: 24px 32px; }
/* тактика — внизу слева, на дороге под боссом: не закрывает союзника и вопрос */
.bt-box .bt-tac { left: 128px; top: auto; bottom: 236px; width: 1000px; }
.bt-box:has(.bt-plate:nth-child(7)) .bt-tac { bottom: 364px; }
.bt-tac__top { font: 28px "Russo One", sans-serif; color: var(--bt-yel); margin-bottom: 16px; display: flex; gap: 12px; }
.bt-tac__tok { margin-left: auto; color: #F6EEFF; }
.bt-tac__row { display: flex; gap: 18px; flex-wrap: wrap; }
.bt-next { font: 34px "Russo One", sans-serif; color: var(--bt-yel); text-shadow: 3px 3px 0 #12081F; text-align: right; }
.bt-box .bt-plates { position: absolute; left: 128px; top: 1228px; width: 2304px; }
.bt-plates { display: grid; grid-template-columns: repeat(var(--cols, 6), 1fr); gap: 22px; }
.bt-box .bt-plates:has(.bt-plate:nth-child(7)) { top: 1100px; }
.bt-plate { position: relative; background: rgba(18, 8, 31, .88); border: 3px solid var(--bt-cyan); padding: 14px 20px; font: 600 30px "Exo 2", sans-serif; }
.bt-plate.me { border-color: var(--bt-yel); box-shadow: 0 0 0 3px var(--bt-yel); }
.bt-plate.shake { animation: btshake .5s; }
@keyframes btshake { 20% { transform: translateX(-10px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }
.bt--still .bt-plate.shake { animation: none; }
.bt-plate__name { display: flex; justify-content: space-between; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-plate__pts { color: var(--bt-yel); font-family: "Press Start 2P", monospace; font-size: .7em; }
.bt-plate__hp { display: block; height: 22px; margin-top: 12px; background: var(--bt-cyan); transition: width .5s; }
.bt-plate__tag { position: absolute; right: 14px; top: -34px; font: 26px "Russo One", sans-serif; color: var(--bt-yel); text-shadow: 2px 2px 0 #12081F; }
.bt-plate__tag--ko { color: #B9A3D6; }
.bt-res { position: absolute; left: 680px; top: 300px; width: 1200px; background: rgba(18, 8, 31, .94); border: 5px solid var(--bt-yel); padding: 40px 50px; box-sizing: border-box; }
.bt-res__title { font: 64px "Press Start 2P", monospace; color: var(--bt-yel); text-align: center; text-shadow: 6px 6px 0 var(--bt-mag); }
.bt-res__sub, .bt-res__note { text-align: center; font: 600 28px "Exo 2", sans-serif; color: #D9C8F2; margin: 18px 0; }
.bt-res__table { width: 100%; border-collapse: collapse; font: 600 30px "Exo 2", sans-serif; }
.bt-res__table th { text-align: left; color: var(--bt-cyan); font-family: "Russo One", sans-serif; padding: 8px; }
.bt-res__table td { padding: 10px 8px; border-top: 2px solid #5B1E6B; }
.bt-res__table tr.me td { color: var(--bt-yel); }
/* телефон: полоса сцены сверху, интерфейс боя под ней */
.bt-panel { position: absolute; left: 0; right: 0; bottom: 0; overflow-y: auto; padding: 10px 12px 16px; display: flex; flex-direction: column; gap: 10px; background: #12081F; }
.bt-panel .bt-hp { height: 34px; border-width: 3px; }
.bt-panel .bt-hp i { left: 4px; top: 4px; bottom: 4px; width: calc((100% - 8px) * var(--hp, 1)); }
.bt-panel .bt-hp span { font-size: 14px; left: 10px; top: 6px; } .bt-panel .bt-hp b { font-size: 12px; top: 8px; right: 10px; }
.bt-panel .bt-q { padding: 12px 14px; border-width: 3px; }
.bt-panel .bt-q__top { font-size: 14px; } .bt-panel .bt-q__text { font-size: 18px; margin: 10px 0 12px; }
.bt-panel .bt-q__opts { grid-template-columns: 1fr; gap: 8px; }
.bt-panel .bt-q__opt { font-size: 16px; padding: 12px 14px; border-width: 2px; } .bt-panel .bt-q__opt span { font-size: 14px; }
.bt-panel .bt-q__form input { font-size: 16px; padding: 10px; border-width: 2px; }
.bt-panel .bt-btn { font-size: 15px; padding: 10px 14px; }
.bt-panel .bt-q__status, .bt-panel .bt-q__correct, .bt-panel .bt-q__scroll, .bt-panel .bt-q__err { font-size: 14px; margin-top: 10px; }
.bt-panel .bt-tac { padding: 12px 14px; border-width: 3px; } .bt-panel .bt-tac__top { font-size: 14px; margin-bottom: 8px; }
.bt-panel .bt-next { font-size: 16px; text-align: left; }
.bt-panel .bt-plates { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.bt-panel .bt-plate { font-size: 14px; padding: 8px 10px; border-width: 2px; }
.bt-panel .bt-plate__hp { height: 8px; margin-top: 6px; } .bt-panel .bt-plate__tag { font-size: 12px; top: -14px; right: 8px; }
.bt-panel .bt-res { position: static; width: auto; padding: 14px; border-width: 3px; }
.bt-panel .bt-res__title { font-size: 20px; } .bt-panel .bt-res__sub, .bt-panel .bt-res__note { font-size: 13px; margin: 8px 0; }
.bt-panel .bt-res__table { font-size: 14px; }
/* обёртки на экранах игрока и трансляции */
.battle-wrap { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; }
.hostbattle { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; padding: 8px 10px; border: 2px solid #FF2B4E; border-radius: var(--radius-sm); }
.app--battle .chatside, .app--battle .reactbar, .app--battle .tfoot { display: none !important; }

/* V2.7: библиотека боссов */
.bosscard__stage { position: relative; width: 100%; max-width: 960px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #12081F; }
.bosscard textarea { width: 100%; font: inherit; }
.bossimp { border-top: 1px solid var(--line, #ddd); padding-top: 8px; }
.check--inline { display: inline-flex; margin-left: 12px; }
.ok-text { color: #1a8a3a; }

/* V2.8: импорт и экспорт банка, сложность 1–5 */
.bankimp__table { max-height: 46vh; overflow: auto; border: 1px solid var(--line); border-radius: 6px; }
.bankimp__table table { margin: 0; }
.bankimp__table td { vertical-align: top; }
.bankimp--error td:nth-child(2) { color: var(--bad); }
.bankimp--dup td:nth-child(2) { color: #a15c00; }
.bankimp--update td:nth-child(2) { color: var(--accent, #3b5bdb); }
.bankimp__counts .chip { cursor: default; }
.chip--warn { border-color: #e0a100; background: rgba(224, 161, 0, .14); }
.chip--bad { border-color: #d92d20; background: rgba(217, 45, 32, .12); }
.difffield select { max-width: 220px; }
.difffield--quiz { margin: 6px 0 10px; }

/* V2.9: перерыв на время */
.brk { margin: 18px auto; text-align: center; }
.brk__label { font-size: 18px; opacity: .85; }
.brk__num { font-size: 56px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.brk--big .brk__label { font-size: 30px; } .brk--big .brk__num { font-size: 110px; }
.brk__soon { display: inline-block; margin-top: 12px; padding: 10px 22px; background: #FFE14D; color: #12081F; font: 700 22px "Russo One", sans-serif; letter-spacing: .03em; }
.brk--big .brk__soon { font-size: 40px; padding: 16px 40px; }
.breaktimer-host { margin: 8px 0; }
.tree__item--boss span:first-child { font-weight: 600; }
.breakfield .row { gap: 10px; align-items: center; }

/* ---------------- V2.10: читаемость редактора (9.4) — секции, «?», вкладки в шапке */
.fsec { border-top: 1px solid var(--line); padding: 14px 0 6px; margin-top: 10px; }
.fsec:first-child { border-top: 0; margin-top: 0; padding-top: 2px; }
.fsec__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.fsec__head h3.fsec__title, .fsec__title { line-height: 1.3; }
.fsec__title { font: inherit; font-size: 1.08rem; font-weight: 700; margin: 0; color: var(--text); background: none; border: 0; padding: 0; text-align: left; }
button.fsec__title { cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
button.fsec__title:hover { color: var(--primary); }
.fsec__chev { width: 1em; color: var(--muted); }
.fsec--closed { padding-bottom: 2px; }
.fsec--closed .fsec__head { margin-bottom: 0; }
.fsec__changed { font-size: 13px; color: var(--primary); background: #e6e8fb; border-radius: 999px; padding: 1px 8px; font-weight: 600; }
.fsec__body > .field, .fsec__body > .check { margin-bottom: 10px; }
.helptip { position: relative; display: inline-block; vertical-align: middle; }
.helptip__btn { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--muted); background: var(--surface); color: var(--muted); font: 700 12px/1 var(--font); cursor: pointer; padding: 0; }
.helptip__btn:hover, .helptip__btn[aria-expanded="true"] { border-color: var(--primary); color: var(--primary); }
.helptip__pop { position: absolute; z-index: 40; left: -10px; top: 26px; width: min(420px, 80vw); background: var(--surface); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: 0 8px 28px rgba(20, 24, 40, .18); padding: 10px 12px; font-size: 14px; font-weight: 400; line-height: 1.45; white-space: normal; text-align: left; }
/* вкладки категорий настроек квиза — жирные, в закреплённой шапке панели */
.setgroups--quiz { position: sticky; top: 112px; z-index: 15; background: var(--surface); margin: 0 -24px 16px; padding: 10px 24px 0; border-bottom: 2px solid var(--line); gap: 2px; flex-wrap: wrap; }
.setgroups--quiz .setgroups__btn { border: 0; border-radius: 8px 8px 0 0; background: none; padding: 9px 14px 10px; font-size: 1.02rem; font-weight: 800; color: var(--muted); margin-bottom: -2px; border-bottom: 3px solid transparent; }
.setgroups--quiz .setgroups__btn:hover { color: var(--text); background: var(--surface-2); }
.setgroups--quiz .setgroups__btn.on { color: var(--primary); background: none; border-bottom-color: var(--primary); }
.setgroups--quiz .setgroups__n { background: #e6e8fb; color: var(--primary); }
.setgroups--global .setgroups__btn { font-weight: 700; }
/* вкладка «Боссы» */
.bosses-page__search { flex: 0 1 280px; width: 280px; }
.bossgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-bottom: 18px; }
.bosstile { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.bosstile__pic { display: block; height: 170px; background: radial-gradient(circle at 50% 70%, #2a1946, #12081f); border: 0; padding: 10px; cursor: pointer; overflow: hidden; }
.bosstile__pic img { display: block; width: 100%; height: 100%; object-fit: contain; }
.bosstile--ally .bosstile__pic { height: 120px; }
.bosstile__body { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.bosstile__name { margin: 0; font-size: 1.08rem; }
.bosstile__name a { color: var(--text); text-decoration: none; }
.bosstile__name a:hover { color: var(--primary); }
.bosstile__facts { list-style: none; margin: 0; padding: 0; font-size: 14px; display: flex; flex-direction: column; gap: 2px; }
.bosscard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 24px; }
.bosscard__tools { margin-bottom: 6px; }
.bosscard__ally { width: 120px; height: 90px; object-fit: contain; background: #12081f; border-radius: 8px; }
.bosscard__arenas { margin: 0 0 10px; padding-left: 18px; font-size: 14px; }
.bosscard__pool { margin: 8px 0 0; }
.bosscheck { max-width: 1200px; width: 96vw; max-height: 96vh; overflow: auto; }
.bosscheck__stage { max-width: min(100%, calc((96vh - 190px) * 16 / 9)); margin: 8px auto; }
/* конструктор: перетаскивание и ↑↓ (9.4) */
.tree__round { position: relative; border-radius: 8px; }
.tree__row { position: relative; display: flex; align-items: center; gap: 2px; border-radius: 8px; }
.tree__row > .tree__item { flex: 1; min-width: 0; }
.tree__row[draggable="true"] { cursor: grab; }
.tree__grip { width: 14px; flex: none; color: var(--muted); font-size: 13px; line-height: 1; text-align: center; opacity: .55; user-select: none; }
.tree__row:hover > .tree__grip { opacity: 1; }
.tree__round > .tree__row:first-child { margin-top: 6px; }
.tree__round > .tree__row:first-child > .tree__item { margin-top: 0; }
.tree__row--q { padding-left: 0; }
.tree__updown { display: inline-flex; gap: 2px; flex: none; }
.iconbtn--sm { width: 24px; height: 24px; font-size: 13px; padding: 0; }
.tree__round--dragging, .tree__row--dragging { opacity: .45; }
.drop-before::before, .drop-after::after { content: ""; position: absolute; left: 4px; right: 4px; height: 3px; border-radius: 2px; background: var(--primary); z-index: 2; pointer-events: none; }
.drop-before::before { top: -2px; }
.drop-after::after { bottom: -2px; }
.drop-into { outline: 2px dashed var(--primary); outline-offset: 1px; background: #eef0fd; }
.tree__item--pause { font-weight: 600; color: var(--warn); }
.tree__hint { margin: 6px 6px 0; font-size: 13px; color: var(--muted); }
/* V2.11 (30.5): полоса ХП босса — под окном наведения, «ЗАРЯЖЕНО», «Готовы N из M» */
.bt-ret .bt-hp--ret { position: absolute; left: 0; right: 0; top: calc(100% + 56px); height: 28px; border-width: 3px; background: rgba(18, 8, 31, .9); }
.bt-ret .bt-hp--ret i { left: 3px; top: 3px; bottom: 3px; width: calc((100% - 6px) * var(--hp, 1)); }
.bt-hp--compact { height: 34px; }
.bt-plate.charged { border-color: var(--bt-yel); box-shadow: 0 0 22px rgba(255, 210, 63, .55), inset 0 0 18px rgba(255, 210, 63, .25); animation: btcharge 1s ease-in-out infinite alternate; }
.bt-plate.me.charged { box-shadow: 0 0 0 3px var(--bt-yel), 0 0 26px rgba(255, 210, 63, .6); }
.bt-plate__tag--charged { color: var(--bt-yel); letter-spacing: .12em; font-family: "Press Start 2P", monospace; font-size: .62em; }
@keyframes btcharge { from { box-shadow: 0 0 10px rgba(255, 210, 63, .35); } to { box-shadow: 0 0 30px rgba(255, 210, 63, .75); } }
.bt--still .bt-plate.charged { animation: none; }
.bt-q__ready { margin-top: 18px; font: 600 28px "Exo 2", sans-serif; color: var(--bt-yel); }
.bt-q__all { font-family: "Press Start 2P", monospace; font-size: 24px; letter-spacing: .06em; animation: btlock 1s steps(1) infinite; }
.bt--still .bt-q__all { animation: none; }
.bt-panel .bt-q__ready { font-size: 15px; margin-top: 8px; } .bt-panel .bt-q__all { font-size: 12px; }
.bt-panel .bt-plate__tag--charged { font-size: 10px; }
/* звуки босса и союзника: выключение по строке и общее (30.1) */
.soundsw { font-weight: 600; }
.soundrow { display: flex; gap: 8px; align-items: flex-start; }
.soundrow > .mediafield, .soundrow > div:last-child { flex: 1; min-width: 0; }
.soundrow__sw { margin-top: 26px; }
.soundrow--muted > :last-child, .soundrows--off .soundrow > :last-child { opacity: .45; }