/* Путь к миллиону — оформление в стиле телестудии */
:root {
  /* 1% ширины кадра 16:9, вписанного в окно: всё масштабируется вместе с окном */
  --u: min(1vw, 1.7778vh);
  --text: #f2f6ff;
  --muted: #9fb0dc;
  --gold: #ffc23d;
  --gold2: #ffe08a;
  --ok: #22c55e;
  --bad: #ef4444;
  --sel: #ff9a1f;
  --easy: #4fe3c1;
  --medium: #ffc84a;
  --hard: #ff5c8a;
  --silver: linear-gradient(180deg, #ffffff 0%, #dde6f6 40%, #7f90b8 52%, #e8eefa 64%, #9fb0d2 100%);
  --edge: linear-gradient(180deg, #f6f9ff 0%, #b4c3e6 42%, #5a6c9c 54%, #d9e3fa 100%);
  --fill: linear-gradient(180deg, #2a58dc 0%, #15349a 47%, #0c2172 53%, #1a3eae 100%);
  --fill-dark: linear-gradient(180deg, #1a3a9e 0%, #0e2575 50%, #091a5a 100%);
  --serif: 'Playfair Display', 'Times New Roman', Georgia, serif;
  --sans: 'Jost', 'Segoe UI', Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: #020722;
  color: var(--text);
  font-family: var(--sans);
  font-size: calc(var(--u) * 1.35);
  overflow: hidden;
}
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }

.app { position: fixed; inset: 0; overflow: hidden; }

/* ---------- Фон: объёмная студия (CSS 3D) ----------
   Комната в единицах --u: ширина 130, пол на y=+22, потолок на y=-40,
   задняя стена на z=-70, передний край на z=+30. Камера смотрит из z=0. */
.bg { position: absolute; inset: 0; z-index: 0; background: #020722; overflow: hidden; }
.scene {
  position: absolute; inset: 0;
  perspective: calc(var(--u) * 70);
  perspective-origin: 50% 42%;
}
.rig {
  position: absolute; left: 50%; top: 42%;
  transform-style: preserve-3d;
  /* наклон за мышью вокруг центра сцены */
  transform:
    translateZ(calc(var(--u) * -35))
    rotateX(calc(var(--py, 0) * -2.5deg))
    rotateY(calc(var(--px, 0) * 4deg))
    translateZ(calc(var(--u) * 35));
  transition: transform .8s ease-out;
}
.room {
  position: absolute; left: 0; top: 0;
  transform-style: preserve-3d;
  animation: camDrift 28s ease-in-out infinite alternate;
}
/* Плавный облёт камеры */
@keyframes camDrift {
  0% { transform: translateZ(calc(var(--u) * -35)) rotateY(-3.5deg) rotateX(.6deg) translateZ(calc(var(--u) * 35)); }
  50% { transform: translateZ(calc(var(--u) * -35)) rotateY(0deg) rotateX(-.4deg) translateZ(calc(var(--u) * 33)); }
  100% { transform: translateZ(calc(var(--u) * -35)) rotateY(3.5deg) rotateX(.6deg) translateZ(calc(var(--u) * 35)); }
}
.room .face { position: absolute; left: 0; top: 0; }
.room .face svg { width: 100%; height: 100%; display: block; }
.room .back {
  width: calc(var(--u) * 130); height: calc(var(--u) * 62);
  margin: calc(var(--u) * -31) 0 0 calc(var(--u) * -65);
  transform: translate3d(0, calc(var(--u) * -9), calc(var(--u) * -70));
}
.room .floor {
  width: calc(var(--u) * 130); height: calc(var(--u) * 100);
  margin: calc(var(--u) * -50) 0 0 calc(var(--u) * -65);
  transform: translate3d(0, calc(var(--u) * 22), calc(var(--u) * -20)) rotateX(90deg);
}
.room .floor .rings { animation: ringPulse 4s ease-in-out infinite; }
@keyframes ringPulse { 50% { opacity: .75; } }
.room .ceil {
  width: calc(var(--u) * 130); height: calc(var(--u) * 100);
  margin: calc(var(--u) * -50) 0 0 calc(var(--u) * -65);
  transform: translate3d(0, calc(var(--u) * -40), calc(var(--u) * -20)) rotateX(-90deg);
  background:
    radial-gradient(circle at 25% 20%, rgba(220, 235, 255, .9) 0 .35%, rgba(150, 190, 255, .35) .6%, transparent 3%),
    radial-gradient(circle at 50% 20%, rgba(220, 235, 255, .9) 0 .35%, rgba(150, 190, 255, .35) .6%, transparent 3%),
    radial-gradient(circle at 75% 20%, rgba(220, 235, 255, .9) 0 .35%, rgba(150, 190, 255, .35) .6%, transparent 3%),
    repeating-linear-gradient(90deg, rgba(120, 150, 230, .18) 0 2px, transparent 2px 8%),
    linear-gradient(0deg, #071450, #01051a);
}
.room .wall-l, .room .wall-r {
  width: calc(var(--u) * 100); height: calc(var(--u) * 62);
  margin: calc(var(--u) * -31) 0 0 calc(var(--u) * -50);
  background:
    linear-gradient(90deg, rgba(2, 6, 30, .0) 0%, rgba(2, 6, 30, .75) 100%),
    linear-gradient(90deg, transparent 18%, rgba(255, 110, 230, .9) 18.3%, rgba(255, 110, 230, .9) 18.7%, transparent 19%,
                           transparent 46%, rgba(160, 200, 255, .8) 46.2%, rgba(160, 200, 255, .8) 46.5%, transparent 46.7%),
    radial-gradient(circle, rgba(175, 205, 255, .6) 0 calc(var(--u) * .14), transparent calc(var(--u) * .2)) 0 0 / calc(var(--u) * 1.2) calc(var(--u) * 1.2),
    linear-gradient(180deg, #0b2370, #102c86 50%, #071653);
}
.room .wall-l { transform: translate3d(calc(var(--u) * -65), calc(var(--u) * -9), calc(var(--u) * -20)) rotateY(90deg); }
.room .wall-r { transform: translate3d(calc(var(--u) * 65), calc(var(--u) * -9), calc(var(--u) * -20)) rotateY(-90deg) scaleX(-1); }

/* Светящиеся колонны у задней стены */
.room .pillar {
  width: calc(var(--u) * 1.1); height: calc(var(--u) * 62);
  margin: calc(var(--u) * -31) 0 0 calc(var(--u) * -.55);
  background: linear-gradient(180deg, rgba(200, 220, 255, .2), #e7f0ff 30%, #b9cfff 70%, rgba(200, 220, 255, .3));
  box-shadow: 0 0 calc(var(--u) * 1.5) rgba(140, 180, 255, .9), 0 0 calc(var(--u) * 4) rgba(80, 130, 255, .6);
  border-radius: 99px;
}
.room .p1 { transform: translate3d(calc(var(--u) * -42), calc(var(--u) * -9), calc(var(--u) * -62)); }
.room .p2 { transform: translate3d(calc(var(--u) * 42), calc(var(--u) * -9), calc(var(--u) * -62)); }
.room .p3 { transform: translate3d(calc(var(--u) * -58), calc(var(--u) * -9), calc(var(--u) * -30)); }
.room .p4 { transform: translate3d(calc(var(--u) * 58), calc(var(--u) * -9), calc(var(--u) * -30)); }

/* Лучи прожекторов: две скрещённые плоскости дают объём */
.room .beam { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.room .beam i {
  position: absolute;
  width: calc(var(--u) * 22); height: calc(var(--u) * 62);
  margin: calc(var(--u) * -31) 0 0 calc(var(--u) * -11);
  background: linear-gradient(180deg, rgba(225, 236, 255, .55), rgba(170, 200, 255, .12) 70%, transparent);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  mix-blend-mode: screen;
  filter: blur(calc(var(--u) * .5));
  animation: beamFlicker 6s ease-in-out infinite;
}
.room .beam i:nth-child(2) { transform: rotateY(90deg); }
.room .bl { transform: translate3d(calc(var(--u) * -34), calc(var(--u) * -9), calc(var(--u) * -45)) rotateZ(-8deg); }
.room .bc { transform: translate3d(0, calc(var(--u) * -9), calc(var(--u) * -55)); }
.room .bc i { animation-delay: -2s; opacity: .7; }
.room .br { transform: translate3d(calc(var(--u) * 34), calc(var(--u) * -9), calc(var(--u) * -45)) rotateZ(8deg); }
.room .br i { animation-delay: -4s; }
@keyframes beamFlicker { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }

/* Дымка и виньетка поверх сцены */
.haze {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 50% 45%, rgba(90, 140, 255, .18), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 50%, transparent 55%, rgba(1, 4, 24, .75) 100%);
}

/* ---------- Экраны: кадр 16:9 по центру окна ---------- */
.screen {
  position: absolute; z-index: 2;
  left: 50%; top: 50%;
  width: calc(var(--u) * 100); height: calc(var(--u) * 56.25);
  transform: translate(-50%, -50%);
  display: none;
  padding: calc(var(--u) * 2);
}
.screen.active { display: flex; animation: fadeIn .45s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Окна вебки и чата в правом верхнем углу (на всех экранах) ---------- */
.cams {
  position: absolute; z-index: 1; pointer-events: none;
  left: 50%; top: 50%;
  width: calc(var(--u) * 100); height: calc(var(--u) * 56.25);
  transform: translate(-50%, -50%);
}
body[data-screen=settings] .cams { display: none; }
body.no-cams .cam { display: none; }
.cam {
  position: absolute;
  left: calc(var(--u) * 74.5); width: calc(var(--u) * 23.5);
  padding: calc(var(--u) * .45);
  border-radius: calc(var(--u) * 1);
  background: var(--edge);
  /* толщина рамки и тень */
  box-shadow:
    0 calc(var(--u) * .25) 0 #3b52a8,
    0 calc(var(--u) * .5) 0 #13246a,
    0 calc(var(--u) * 1.2) calc(var(--u) * 1.5) rgba(0, 3, 25, .75),
    0 0 calc(var(--u) * 2.5) rgba(110, 160, 255, .45);
}
/* Вебка 16:9 */
.cam-player { top: calc(var(--u) * 1.6); height: calc(var(--u) * 13.7); }
/* Чат под вебкой (ниже таблички с именем) */
.chat-box {
  top: calc(var(--u) * 18.4); height: calc(var(--u) * 29.6);
  display: flex; flex-direction: column; gap: calc(var(--u) * .35);
}
.chat-head {
  display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * .5);
  height: calc(var(--u) * 2); flex-shrink: 0;
  border-radius: calc(var(--u) * .6) calc(var(--u) * .6) calc(var(--u) * .2) calc(var(--u) * .2);
  background: var(--fill-dark);
  font-size: calc(var(--u) * .95); font-weight: 600; letter-spacing: .18em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}
.chat-head svg { width: calc(var(--u) * 1.1); fill: #c6d5f6; }
.chat-box .cam-screen { flex: 1; height: auto; min-height: 0; }
.chat-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; }
.cam-screen {
  position: relative; width: 100%; height: 100%;
  border-radius: calc(var(--u) * .65);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(80, 120, 230, .35), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, #0a1a5c, #040b30);
  box-shadow: inset 0 0 calc(var(--u) * 2) rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(200, 220, 255, .35);
  display: flex; align-items: center; justify-content: center;
}
.cam-screen::after { /* блик стекла */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(255, 255, 255, .12) 0 22%, transparent 22.5%);
  pointer-events: none;
}
.cam-ph svg { width: calc(var(--u) * 3.5); fill: rgba(170, 195, 255, .25); }
.chat-screen.has-widget .cam-ph { display: none; }
body.chroma .cam-player .cam-screen { background: #00ff00; box-shadow: none; }
body.chroma .cam-player .cam-screen::after, body.chroma .cam-player .cam-ph { display: none; }
/* Табличка с именем — шеврон (общие стили шевронов ниже); здесь только место и размер */
.cam .cam-name {
  --c: calc(var(--u) * 1.4);
  position: absolute; left: 50%; bottom: calc(var(--u) * -1.9);
  transform: translateX(-50%);
  min-width: calc(var(--u) * 15);
  padding: calc(var(--u) * .55) calc(var(--u) * 2.6);
  text-align: center; white-space: nowrap;
  font-size: calc(var(--u) * 1.25); font-weight: 500; letter-spacing: .02em;
}
.cam .cam-name::before { background: var(--fill-dark); }

/* ---------- Хром-текст ---------- */
.chrome {
  background: var(--silver);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 .05em 0 #26325a) drop-shadow(0 0 .3em rgba(120, 170, 255, .45));
}
.chrome-h {
  margin: 0 0 .6em;
  font-family: var(--serif);
  font-weight: 800;
  letter-spacing: .06em;
  font-size: calc(var(--u) * 2.2);
  display: flex; align-items: center; justify-content: center; gap: .5em;
  background: var(--silver);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.chrome-h .ll-icon { -webkit-text-fill-color: initial; font-size: calc(var(--u) * 1.2); }

/* ---------- Шестигранные «шевроны» (кнопки, вопрос, ответы, строки таблицы) ---------- */
.btn-show, .answer, .question, .price-list li[data-level], .cam-name {
  --c: calc(var(--u) * 1.6);
  --bw: 2px;
  position: relative;
  isolation: isolate;
  border: 0;
  background: var(--edge);
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% 50%, calc(100% - var(--c)) 100%, var(--c) 100%, 0 50%);
}
.btn-show::before, .answer::before, .question::before, .price-list li[data-level]::before, .cam-name::before {
  content: '';
  position: absolute; inset: var(--bw);
  z-index: -1;
  background: var(--fill);
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% 50%, calc(100% - var(--c)) 100%, var(--c) 100%, 0 50%);
  transition: filter .2s;
}

/* Главная кнопка */
.btn-show {
  cursor: pointer;
  color: #fff;
  font-weight: 500;
  letter-spacing: .1em;
  font-size: calc(var(--u) * 1.5);
  padding: calc(var(--u) * 1) calc(var(--u) * 5);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
  transition: transform .15s;
}
.btn-show.big { --c: calc(var(--u) * 2.4); font-size: calc(var(--u) * 2.1); padding: calc(var(--u) * 1.5) calc(var(--u) * 9); }
.btn-show.small { --c: calc(var(--u) * 1.2); font-size: calc(var(--u) * 1.2); padding: calc(var(--u) * .8) calc(var(--u) * 3.2); }
.btn-show:hover:not(:disabled)::before { filter: brightness(1.3); }
.btn-show:active:not(:disabled) { transform: scale(.98); }
.btn-show:disabled { opacity: .45; cursor: default; }

/* Вторичная кнопка */
.btn-ghost {
  cursor: pointer;
  background: rgba(10, 25, 80, .6);
  border: 1px solid rgba(190, 210, 255, .45);
  border-radius: 999px;
  padding: calc(var(--u) * .55) calc(var(--u) * 1.6);
  font-size: calc(var(--u) * 1.1);
  color: #dbe5ff;
  backdrop-filter: blur(4px);
  transition: background .2s, border-color .2s;
}
.btn-ghost:hover:not(:disabled) { background: rgba(30, 60, 170, .7); border-color: #dbe5ff; }
.btn-ghost:disabled { opacity: .4; cursor: default; }

/* Толщина (объём снизу) и свечение под шевронами — на родителе, т.к. тень не пробивает clip-path */
.menu-actions, .intro-actions, .q-row, .answers, .actions, .row, .price-board {
  filter:
    drop-shadow(0 calc(var(--u) * .18) 0 #3b52a8)
    drop-shadow(0 calc(var(--u) * .18) 0 #16276e)
    drop-shadow(0 calc(var(--u) * .5) calc(var(--u) * .4) rgba(0, 4, 30, .7))
    drop-shadow(0 0 calc(var(--u) * .7) rgba(110, 160, 255, .4));
}

/* 3D-появление таблицы, вопроса и ответов */
#screen-intro.active .price-board { animation: boardIn .7s cubic-bezier(.2, .8, .2, 1) both; }
#screen-intro.active .price-list li[data-level] { animation: rowIn .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.25s + var(--d, 0) * 35ms); }
@keyframes boardIn { from { opacity: 0; transform: perspective(1400px) rotateX(38deg) translateY(8%) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes rowIn { from { opacity: 0; transform: perspective(600px) rotateX(-80deg); } to { opacity: 1; transform: none; } }

.row { display: flex; gap: calc(var(--u) * .8); align-items: center; flex-wrap: wrap; margin: calc(var(--u) * .8) 0; }
.row.center { justify-content: center; margin-top: calc(var(--u) * 1.6); }

/* ---------- Главное меню ---------- */
/* Пока справа окна вебки и чата — содержимое меню и таблицы центрируется в оставшейся части */
body:not(.no-cams) #screen-menu, body:not(.no-cams) #screen-intro { padding-right: calc(var(--u) * 27); }
#screen-menu { flex-direction: column; align-items: center; justify-content: space-between; padding-top: calc(var(--u) * 1.5); padding-bottom: calc(var(--u) * 4.5); }
.title-block { text-align: center; line-height: 1; }
.title-small {
  font-family: var(--serif); font-weight: 800;
  font-size: calc(var(--u) * 3.4);
  letter-spacing: .38em; margin-right: -.38em;
}
.title-big {
  margin: 0;
  font-family: var(--serif); font-weight: 900;
  font-size: calc(var(--u) * 8.6);
  letter-spacing: .02em;
  line-height: 1.05;
}
.ornament { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * .6); margin-top: calc(var(--u) * .4); }
.ornament i { width: calc(var(--u) * 22); height: 2px; background: linear-gradient(90deg, transparent, #dfe8ff); }
.ornament i:last-child { transform: scaleX(-1); }
.ornament b { width: calc(var(--u) * 1.1); height: calc(var(--u) * 1.1); background: var(--silver); transform: rotate(45deg); box-shadow: 0 0 calc(var(--u) * 1) #9fc0ff; }

/* ---------- 3D-медаль с персонажем ---------- */
.emblem { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.coin3d {
  --s: calc(var(--u) * 22); /* диаметр монеты */
  position: relative;
  width: calc(var(--s) * 1.12); height: calc(var(--s) * 1.12);
  display: flex; align-items: center; justify-content: center;
  perspective: calc(var(--u) * 110);
}
.halo, .sparkles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.halo {
  border-radius: 50%;
  background: radial-gradient(circle, rgba(70, 130, 255, .55) 30%, rgba(70, 130, 255, .25) 50%, transparent 68%);
  box-shadow: inset 0 0 0 1.5px rgba(185, 208, 255, .55);
  animation: haloPulse 4s ease-in-out infinite;
}
@keyframes haloPulse { 50% { opacity: .75; transform: scale(1.02); } }
.sparkles { fill: #fff; z-index: 3; }
.sparkles path { transform-box: fill-box; transform-origin: center; animation: sparkle 2.4s ease-in-out infinite; filter: drop-shadow(0 0 4px #bcd4ff); }
.sparkles path:nth-child(2) { animation-delay: -.6s; }
.sparkles path:nth-child(3) { animation-delay: -1.2s; }
.sparkles path:nth-child(4) { animation-delay: -1.8s; }
@keyframes sparkle { 0%, 100% { opacity: .3; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.25); } }

.coin-shadow {
  position: absolute; left: 18%; right: 18%; bottom: -9%; height: 10%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 4, 30, .75), transparent 70%);
  filter: blur(4px);
  animation: shadowFloat 5s ease-in-out infinite;
}
@keyframes shadowFloat { 50% { transform: scaleX(.86); opacity: .7; } }

/* Наклон за курсором — снаружи, покачивание и оборот — внутри */
.coin-tilt {
  position: relative; z-index: 2;
  width: var(--s); height: var(--s);
  transform-style: preserve-3d;
  transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transition: transform .4s ease-out;
  animation: coinFloat 5s ease-in-out infinite;
}
@keyframes coinFloat { 50% { translate: 0 calc(var(--u) * -.9); } }
.coin {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  animation: coinSpin 16s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes coinSpin {
  0% { transform: rotateY(-20deg); }
  28% { transform: rotateY(20deg); }
  56% { transform: rotateY(-20deg); }
  70% { transform: rotateY(340deg); } /* полный оборот */
  85% { transform: rotateY(380deg); }
  100% { transform: rotateY(340deg); }
}

/* Ребро монеты — стопка дисков */
.coin-edge {
  position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(90deg, #4c5b86, #dde6f8 35%, #8b9ac0 60%, #3f4d76);
}
.coin-face {
  position: absolute; inset: 0; border-radius: 50%;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.coin-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 20deg, #ffffff, #8e9cc2, #eef3ff, #5f6f9c, #ffffff, #a3b2d8, #f6f9ff, #6b7aa6, #ffffff);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7), inset 0 0 calc(var(--u) * 1) rgba(20, 30, 80, .6);
}
.coin-ring::after {
  content: ''; position: absolute; inset: 4.5%; border-radius: 50%;
  background: linear-gradient(180deg, #44558f, #c9d6f5);
}
.coin-photo {
  position: absolute; inset: 6.5%; border-radius: 50%;
  background: #f3a3a3 url(../img/host.webp) 50% 30% / 128% no-repeat;
  box-shadow: inset 0 0 0 calc(var(--u) * .25) rgba(255, 255, 255, .85), inset 0 0 calc(var(--u) * 2.5) rgba(0, 10, 60, .55);
}
.coin-glass {
  position: absolute; inset: 6.5%; border-radius: 50%; overflow: hidden;
  background:
    radial-gradient(ellipse 70% 45% at 40% 18%, rgba(255, 255, 255, .45), transparent 70%),
    linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .55) 47%, transparent 58%);
  background-size: 100% 100%, 260% 100%;
  background-repeat: no-repeat;
  animation: glassSweep 5.5s ease-in-out infinite;
}
@keyframes glassSweep { 0%, 35% { background-position: 0 0, 130% 0; } 75%, 100% { background-position: 0 0, -40% 0; } }

/* ---------- Объёмный заголовок ---------- */
.title-3d { position: relative; isolation: isolate; }
.title-3d .chrome { position: relative; z-index: 1; }
.title-3d::before {
  content: attr(data-text);
  position: absolute; inset: 0; z-index: 0;
  color: #22357a;
  text-shadow:
    0 calc(var(--u) * .07) 0 #2f449a,
    0 calc(var(--u) * .14) 0 #2a3d8b,
    0 calc(var(--u) * .21) 0 #25367c,
    0 calc(var(--u) * .28) 0 #1f2f6d,
    0 calc(var(--u) * .35) 0 #1a285e,
    0 calc(var(--u) * .42) 0 #152150,
    0 calc(var(--u) * .5) 0 #101a42,
    0 calc(var(--u) * 1.2) calc(var(--u) * 1.2) rgba(0, 0, 20, .7);
}
.title-small.title-3d::before { text-shadow: 0 1px 0 #2f449a, 0 2px 0 #24367c, 0 3px 0 #1a285e, 0 4px 0 #121d48, 0 8px 10px rgba(0, 0, 20, .6); }

.menu-actions { margin-top: calc(var(--u) * 1.5); }
.corner-buttons { position: absolute; right: calc(var(--u) * 2); bottom: calc(var(--u) * 2); display: flex; gap: calc(var(--u) * .8); }
.corner-buttons.left { right: auto; left: calc(var(--u) * 2); }

/* ---------- Стоимость вопросов ---------- */
#screen-intro { flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 1.4); }
.price-board {
  width: min(calc(var(--u) * 46), 100%);
  padding: calc(var(--u) * 1.4) calc(var(--u) * 2) calc(var(--u) * 1.6);
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .06) 0 30%, transparent 30% 100%),
    linear-gradient(180deg, #0f2a8c 0%, #0a1d68 60%, #08164f 100%);
  border-radius: calc(var(--u) * .6);
  box-shadow: 0 0 0 2px #c3d2f3, 0 0 0 4px rgba(40, 70, 160, .9), 0 0 0 5px rgba(220, 230, 255, .5);
}
.board-head { text-align: center; margin-bottom: calc(var(--u) * 1); }
.board-head h2 { margin: 0; font-weight: 600; letter-spacing: .06em; font-size: calc(var(--u) * 1.7); }
.board-head p { margin: calc(var(--u) * .3) 0 calc(var(--u) * .6); font-size: calc(var(--u) * .85); letter-spacing: .12em; text-transform: uppercase; color: #c6d3f5; }
.legend { display: flex; justify-content: center; gap: calc(var(--u) * 1.8); font-size: calc(var(--u) * .9); text-transform: uppercase; letter-spacing: .08em; }
.legend span { display: inline-flex; align-items: center; gap: calc(var(--u) * .5); color: var(--tier); }

.tier-easy { --tier: var(--easy); }
.tier-medium { --tier: var(--medium); }
.tier-hard { --tier: var(--hard); }
.pips { display: inline-flex; gap: calc(var(--u) * .3); font-style: normal; }
.pips b, .pips u {
  display: block; width: calc(var(--u) * .65); height: calc(var(--u) * .65);
  transform: rotate(45deg);
  border: 1px solid var(--tier);
}
.pips b { background: var(--tier); box-shadow: 0 0 calc(var(--u) * .5) var(--tier); }

.price-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(var(--u) * .32); }
.price-list li[data-level] {
  --c: calc(var(--u) * 1.1);
  display: grid;
  grid-template-columns: calc(var(--u) * 3.2) calc(var(--u) * 4) 1fr auto;
  align-items: center;
  height: calc(var(--u) * 2.2);
  padding: 0 calc(var(--u) * 2) 0 calc(var(--u) * 1.6);
  font-variant-numeric: tabular-nums;
}
.price-list li[data-level]::before { background: var(--fill-dark); }
.price-list .num { font-size: calc(var(--u) * .95); color: #c9d6f8; font-weight: 500; }
.price-list .tag { text-align: center; font-size: calc(var(--u) * .78); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.price-list .sum { text-align: right; font-size: calc(var(--u) * 1.35); font-weight: 500; letter-spacing: .02em; }
.price-list li.safe::before { background: linear-gradient(180deg, #8e4cf0 0%, #6a2fd0 50%, #5a24b8 100%); }
.price-list li.current { background: linear-gradient(180deg, #fff6d6, #d6a63c 50%, #fff1c2); }
.price-list li.current::before { background: linear-gradient(180deg, #f4d77a 0%, #dcae46 50%, #c9952e 100%); }
.price-list li.current .num, .price-list li.current .sum, .price-list li.current .tag { color: #2a1a00; }
.price-list li.current .pips b, .price-list li.current .pips u { border-color: #3a2500; }
.price-list li.current .pips b { background: #3a2500; box-shadow: none; }
.price-list li.done { opacity: .55; }

/* Таблица сбоку в игре — компактная */
.price-list.side { gap: calc(var(--u) * .25); }
.price-list.side li[data-level] {
  --c: calc(var(--u) * .8);
  grid-template-columns: calc(var(--u) * 2) 1fr auto;
  height: calc(var(--u) * 1.85);
  padding: 0 calc(var(--u) * 1.2);
}
.price-list.side .tag { display: none; }
.price-list.side .sum { font-size: calc(var(--u) * 1.1); }
.price-list.side .num { font-size: calc(var(--u) * .85); }
.price-list.side .pips b, .price-list.side .pips u { width: calc(var(--u) * .5); height: calc(var(--u) * .5); }

.intro-actions { margin-top: calc(var(--u) * .4); }

/* ---------- Рамки и панели ---------- */
.frame {
  background: linear-gradient(180deg, rgba(16, 40, 130, .94), rgba(6, 16, 62, .96));
  border-radius: calc(var(--u) * .8);
  box-shadow: 0 0 0 2px #b9c9ee, 0 0 0 4px rgba(30, 60, 150, .9), 0 0 calc(var(--u) * 3) rgba(80, 130, 255, .4);
}

/* ---------- Настройки ---------- */
#screen-settings { align-items: center; justify-content: center; }
.settings { padding: calc(var(--u) * 2.4) calc(var(--u) * 3); width: min(calc(var(--u) * 44), 100%); max-height: 100%; overflow: auto; }
.settings h3 { margin: calc(var(--u) * 1.4) 0 0; font-size: calc(var(--u) * 1); color: var(--gold2); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.field { display: flex; flex-direction: column; gap: calc(var(--u) * .4); margin: calc(var(--u) * .8) 0; }
.field span { color: var(--muted); }
.field input[type=range] { accent-color: var(--gold); }
.field input[type=text] {
  font: inherit; color: var(--text);
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(190, 210, 255, .35);
  border-radius: calc(var(--u) * .5);
  padding: calc(var(--u) * .5) calc(var(--u) * .8);
}
.field input[type=text]:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1.2); }
.check { display: flex; align-items: center; gap: calc(var(--u) * .6); margin: calc(var(--u) * .8) 0; cursor: pointer; }
.check input { accent-color: var(--gold); width: calc(var(--u) * 1.3); height: calc(var(--u) * 1.3); }

/* ---------- Игра: раскладка в кадре 16:9 ---------- */
#screen-game { padding: 0; }
#screen-game.active { display: block; }

/* Большая панель-пульт за интерфейсом (в слое камер, чтобы не перекрывать их) */
.cams::before {
  content: ''; position: absolute; inset: calc(var(--u) * .8);
  border-radius: calc(var(--u) * 3);
  background:
    radial-gradient(circle, rgba(160, 190, 255, .22) 0 calc(var(--u) * .12), transparent calc(var(--u) * .17)) 0 0 / calc(var(--u) * 1.1) calc(var(--u) * 1.1),
    linear-gradient(180deg, rgba(6, 18, 70, .35), rgba(3, 10, 45, .7));
  box-shadow: inset 0 0 0 1px rgba(160, 190, 255, .35), inset 0 0 calc(var(--u) * 4) rgba(0, 0, 0, .5), 0 0 calc(var(--u) * 3) rgba(40, 80, 200, .3);
  opacity: 0; transition: opacity .6s;
}
body[data-screen=game] .cams::before { opacity: 1; }

.won { position: absolute; left: calc(var(--u) * var(--cx)); top: calc(var(--u) * 1.3); transform: translateX(-50%); text-align: center; line-height: 1.1; }
.won small { display: block; font-size: calc(var(--u) * .85); letter-spacing: .2em; color: #c6d3f5; }
.won b { display: block; font-size: calc(var(--u) * 2.5); font-weight: 600; text-shadow: 0 0 calc(var(--u) * 1) rgba(120, 170, 255, .7); }
.won b.bump { animation: bump .7s ease; }
@keyframes bump { 40% { transform: scale(1.25); color: var(--gold2); } }

.game-coin { --s: calc(var(--u) * 16.5); position: absolute; left: calc(var(--u) * var(--cx)); top: calc(var(--u) * 5.6); transform: translateX(-50%); }

.lifelines { position: absolute; left: calc(var(--u) * var(--cx)); top: calc(var(--u) * 25.4); transform: translateX(-50%); display: flex; gap: calc(var(--u) * 1.1); }
.lifeline { cursor: pointer; background: none; border: 0; padding: 0; }
.lifeline .ll-icon {
  width: calc(var(--u) * 6.4); height: calc(var(--u) * 3.6);
  border-radius: 99px;
  font-size: calc(var(--u) * 1.3);
  background: linear-gradient(180deg, #2e5ee6 0%, #16369e 50%, #0d2478 100%);
  box-shadow:
    0 0 0 2px #c6d5f6, 0 0 0 3px rgba(20, 40, 120, .9),
    0 calc(var(--u) * .3) 0 3px #16276e,
    0 calc(var(--u) * .7) calc(var(--u) * .8) rgba(0, 3, 25, .7),
    inset 0 calc(var(--u) * .3) calc(var(--u) * .4) rgba(255, 255, 255, .25);
  transition: transform .15s, box-shadow .2s;
}
.lifeline:hover:not(:disabled) .ll-icon { transform: translateY(-2px); filter: brightness(1.2); }
.lifeline:disabled { cursor: default; }
.lifeline.used .ll-icon { opacity: .35; filter: grayscale(1); }
.lifeline.used .ll-icon::after {
  content: ''; position: absolute; left: 8%; right: 8%; top: 50%; height: 3px;
  background: var(--bad); transform: rotate(-22deg); border-radius: 2px;
}
.lifeline.active .ll-icon { box-shadow: 0 0 0 2px var(--ok), 0 0 calc(var(--u) * 1.6) var(--ok); }

.ll-icon {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.4em; height: 2.2em;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 35%, #3466ec, #10288a 70%);
  box-shadow: 0 0 0 2px #c6d5f6, 0 0 0 3px rgba(20, 40, 120, .9), 0 0 calc(var(--u) * 1) rgba(110, 160, 255, .5);
  color: #fff;
  font-weight: 600; font-size: .85em; letter-spacing: -.02em;
  flex-shrink: 0;
}
.ll-icon svg { width: 46%; height: 62%; fill: #fff; }

.q-info { position: absolute; left: calc(var(--u) * (var(--cx) - 30)); right: calc(var(--u) * (70 - var(--cx))); top: calc(var(--u) * 30.3); text-align: center; color: #c6d3f5; letter-spacing: .08em; text-transform: uppercase; font-size: calc(var(--u) * .85); }
.q-info b { color: var(--gold2); font-weight: 600; }
.q-info .tier { color: var(--tier); }
.status-line { position: absolute; left: calc(var(--u) * (var(--cx) - 30)); right: calc(var(--u) * (70 - var(--cx))); top: calc(var(--u) * 31.8); text-align: center; min-height: 1.4em; font-weight: 500; color: var(--gold2); font-size: calc(var(--u) * 1.1); text-shadow: 0 0 calc(var(--u) * .8) rgba(0, 0, 0, .8); }
.status-line.ok { color: #6ef29a; }
.status-line.bad { color: #ff7a7a; }

/* Световые линии через ряд */
/* Центр колонки: левее, пока справа окна вебки и чата */
#screen-game { --cx: 37; }
body.no-cams #screen-game { --cx: 50; }
.q-row, .answers { position: absolute; left: calc(var(--u) * (var(--cx) - 32.5)); right: calc(var(--u) * (67.5 - var(--cx))); }
.q-row { top: calc(var(--u) * 34); }
.answers { top: calc(var(--u) * 41.5); }
.q-row::before, .answers::before, .answers::after {
  content: ''; position: absolute; left: calc(var(--u) * -3); right: calc(var(--u) * -2.5); height: 2px; z-index: 0;
  background: linear-gradient(90deg, transparent, #b9cdf8 15%, #b9cdf8 85%, transparent);
  opacity: .55;
}
.q-row::before { top: 50%; }
.answers::before { top: 25%; }
.answers::after { top: 75%; }

.question {
  --c: calc(var(--u) * 3.4);
  z-index: 1;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  min-height: calc(var(--u) * 6.6);
  padding: calc(var(--u) * 1.1) calc(var(--u) * 5);
  font-size: calc(var(--u) * 1.9);
  font-weight: 500;
  line-height: 1.25;
}
.question.swap { animation: flipIn .6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes flipIn { from { opacity: 0; transform: perspective(900px) rotateX(-85deg); } to { opacity: 1; transform: none; } }

.answers { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1) calc(var(--u) * 1.6); }
.answer {
  --c: calc(var(--u) * 1.9);
  z-index: 1;
  cursor: pointer;
  display: flex; align-items: center; gap: calc(var(--u) * 1.4);
  text-align: left;
  min-height: calc(var(--u) * 4.1);
  padding: calc(var(--u) * .7) calc(var(--u) * 3);
  font-size: calc(var(--u) * 1.55);
  transition: transform .12s, opacity .3s;
}
.answer::before { background: var(--fill-dark); }
.answer b { color: #9db0e4; font-weight: 500; flex-shrink: 0; }
.answer span { flex: 1; }
.answer .pct { font-weight: 600; color: var(--gold2); font-size: .8em; }
.answer.swap { animation: flipIn .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.25s + var(--d, 0) * 110ms); }
.answer:hover:not(:disabled)::before { filter: brightness(1.35); }
.answer:disabled { cursor: default; }
.answer.selected::before, .answer.locked::before { background: linear-gradient(180deg, #ffbb55 0%, #ff9a1f 50%, #e07a00 100%); }
.answer.selected, .answer.locked { color: #1f1200; }
.answer.selected b, .answer.locked b, .answer.correct b, .answer.wrong b { color: inherit; }
.answer.locked { animation: pulse .8s ease-in-out infinite; }
@keyframes pulse { 50% { filter: brightness(1.25); } }
.answer.correct::before { background: linear-gradient(180deg, #5fe88f 0%, #22c55e 50%, #15a049 100%); }
.answer.correct { color: #03200d; animation: flash .35s 4; }
@keyframes flash { 50% { filter: brightness(1.5); } }
.answer.wrong::before { background: linear-gradient(180deg, #ff8080 0%, #ef4444 50%, #c62828 100%); }
.answer.wrong { color: #2a0505; }
.answer.removed { opacity: .25; }
.answer.removed span, .answer.removed .pct { visibility: hidden; }
.answer.struck { opacity: .5; }
.answer.struck span { text-decoration: line-through; }

/* Пульт ведущего справа */
.side-ctl { position: absolute; right: calc(var(--u) * 2.2); top: calc(var(--u) * 49.3); display: flex; flex-direction: row; align-items: flex-start; gap: calc(var(--u) * 1.2); }
.ctl {
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .25);
  background: none; border: 0; padding: 0; color: #c6d3f5;
}
.ctl span {
  width: calc(var(--u) * 3.5); height: calc(var(--u) * 3.5);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #2d5be0, #0f2a85 70%);
  box-shadow: 0 0 0 1.5px rgba(200, 220, 255, .8), 0 calc(var(--u) * .3) 0 1.5px #16276e, 0 calc(var(--u) * .6) calc(var(--u) * .8) rgba(0, 3, 25, .7), inset 0 calc(var(--u) * .3) calc(var(--u) * .4) rgba(255, 255, 255, .25);
  transition: transform .15s, filter .2s, opacity .2s;
}
.ctl svg { width: 48%; height: 48%; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ctl em { font-style: normal; font-size: calc(var(--u) * .75); letter-spacing: .04em; }
.ctl:hover:not(:disabled) span { transform: translateY(-2px); filter: brightness(1.25); }
.ctl:disabled { cursor: default; }
.ctl:disabled span { opacity: .35; }
.ctl:disabled em { opacity: .4; }
.ctl.ready span { animation: ready 1.2s ease-in-out infinite; }
@keyframes ready { 50% { box-shadow: 0 0 0 2px #fff, 0 0 calc(var(--u) * 2) rgba(150, 200, 255, 1); } }
.q-count { align-self: center; margin: 0 0 calc(var(--u) * 1.2); order: -1; font-size: calc(var(--u) * .95); color: #9fb0dc; font-variant-numeric: tabular-nums; }

.bottom-left { position: absolute; left: calc(var(--u) * 1.8); bottom: calc(var(--u) * 1.6); display: flex; gap: calc(var(--u) * .8); }

/* Выезжающая таблица */
.ladder-panel {
  position: absolute; z-index: 5;
  left: calc(var(--u) * 2); top: calc(var(--u) * 2);
  width: calc(var(--u) * 27);
  padding: calc(var(--u) * 1.1) calc(var(--u) * 1.2) calc(var(--u) * 1.3);
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .06) 0 30%, transparent 30% 100%),
    linear-gradient(180deg, #0f2a8c 0%, #0a1d68 60%, #08164f 100%);
  border-radius: calc(var(--u) * .6);
  box-shadow: 0 0 0 2px #c3d2f3, 0 0 0 4px rgba(40, 70, 160, .9), 0 calc(var(--u) * 1.5) calc(var(--u) * 3) rgba(0, 3, 25, .8);
  transform-origin: 0 50%;
  transform: perspective(calc(var(--u) * 80)) rotateY(80deg) translateX(calc(var(--u) * -6));
  opacity: 0; pointer-events: none;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .4s;
}
.ladder-panel.open { transform: perspective(calc(var(--u) * 80)) rotateY(0deg); opacity: 1; pointer-events: auto; }
.ladder-panel .board-head { margin-bottom: calc(var(--u) * .7); }
.ladder-panel .board-head h2 { font-size: calc(var(--u) * 1.2); }


/* ---------- Оверлеи ---------- */
.overlay {
  position: absolute; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  background: rgba(2, 6, 30, .7);
  backdrop-filter: blur(3px);
  padding: 16px;
  animation: fadeIn .25s ease;
}
.modal { padding: calc(var(--u) * 2.4) calc(var(--u) * 3); width: min(calc(var(--u) * 40), 100%); text-align: center; line-height: 1.45; max-height: 100%; overflow: auto; }
.modal.wide { width: min(calc(var(--u) * 60), 100%); }
.modal p { margin: .5em 0; }
.modal b { color: var(--gold2); font-weight: 600; }
.rules-lifelines { list-style: none; padding: 0; margin: calc(var(--u) * 1.2) auto; display: grid; gap: calc(var(--u) * .7); text-align: left; width: fit-content; }
.rules-lifelines li { display: flex; align-items: center; gap: calc(var(--u) * 1); }
.rules-lifelines .ll-icon { font-size: calc(var(--u) * 1.1); }

.timer-ring { position: relative; width: calc(var(--u) * 12); height: calc(var(--u) * 12); margin: calc(var(--u) * 1.4) auto 0; }
.timer-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer-ring circle { fill: none; stroke-width: 7; }
.timer-ring .track { stroke: rgba(255, 255, 255, .1); }
.timer-ring .bar { stroke: #bcd2ff; stroke-linecap: round; stroke-dasharray: 276.46; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear, stroke .3s; filter: drop-shadow(0 0 4px #7fa8ff); }
.timer-ring.low .bar { stroke: var(--bad); }
.timer-ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: calc(var(--u) * 4); font-weight: 500; color: #fff !important; font-variant-numeric: tabular-nums; }

.aud-steps { text-align: left; margin: calc(var(--u) * 1) auto; padding-left: 1.4em; max-width: 34em; color: #c6d3f5; }
.aud-steps li { margin: .25em 0; }
.aud-head { display: flex; justify-content: space-between; align-items: center; gap: 1em; margin: calc(var(--u) * 1) 0 .4em; min-height: 2.4em; }
.aud-timer { font-size: calc(var(--u) * 2); font-weight: 600; color: var(--gold2); font-variant-numeric: tabular-nums; }
.aud-total { color: var(--muted); }
.aud-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 1.4); height: calc(var(--u) * 17); align-items: end; padding: .5em 0; }
.aud-bar { display: flex; flex-direction: column; align-items: center; gap: .35em; height: 100%; justify-content: flex-end; }
.aud-bar .pc { font-weight: 600; font-variant-numeric: tabular-nums; }
.aud-bar .col { width: 62%; flex: 1; display: flex; align-items: flex-end; background: rgba(255, 255, 255, .06); border: 1px solid rgba(190, 210, 255, .25); border-bottom: 0; }
.aud-bar .fill { width: 100%; height: 0; background: linear-gradient(0deg, #2b48d8, #9cb8ff); box-shadow: 0 0 calc(var(--u) * 1) rgba(120, 160, 255, .7); transition: height .4s ease; }
.aud-bar.top .fill { background: linear-gradient(0deg, #c9952e, #ffe08a); box-shadow: 0 0 calc(var(--u) * 1) rgba(255, 210, 120, .8); }
.aud-bar .lt { font-weight: 700; color: var(--gold); font-size: 1.25em; }
.aud-bar.off { opacity: .25; }
.aud-bar input {
  width: 4.5em; text-align: center;
  font: inherit; font-size: .9em; color: var(--text);
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(190, 210, 255, .35);
  border-radius: 8px;
  padding: .3em;
}
.aud-bar input:focus { outline: 2px solid var(--gold); }
.aud-bar input:disabled { opacity: .3; }

.end-prize { font-family: var(--serif); font-weight: 900; font-size: calc(var(--u) * 5.5); margin: .2em 0; }

/* Конфетти */
.confetti { position: absolute; inset: 0; pointer-events: none; z-index: 20; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 10px; height: 16px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

/* ---------- Узкие и вертикальные экраны ---------- */
@media (max-aspect-ratio: 1/1) {
  :root { --u: min(2.3vw, 1.4vh); }
  body { overflow: auto; }
  .app { position: relative; min-height: 100%; }
  .bg { position: fixed; }
  .cams { display: none; }
  body:not(.no-cams) #screen-menu, body:not(.no-cams) #screen-intro { padding-right: calc(var(--u) * 2); }
  .screen { position: relative; left: auto; top: auto; transform: none; width: auto; height: auto; min-height: 100vh; }
  .title-big { font-size: min(calc(var(--u) * 7.5), 12.5vw); }
  .ornament i { width: calc(var(--u) * 10); }
  .price-board { width: 100%; }
  .corner-buttons { position: static; justify-content: center; margin-top: calc(var(--u) * 2); }
  #screen-menu { justify-content: flex-start; gap: calc(var(--u) * 3); }
  .emblem { flex: none; }
  .menu-coin { --s: calc(var(--u) * 30); }
  .aud-bars { height: calc(var(--u) * 20); gap: .5em; }

  /* Игра — колонкой */
  #screen-game.active { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.2); padding: calc(var(--u) * 2) calc(var(--u) * 2) calc(var(--u) * 4); }
  .won, .game-coin, .lifelines, .q-info, .status-line, .q-row, .answers, .side-ctl, .bottom-left { position: relative; left: auto; right: auto; top: auto; bottom: auto; transform: none; }
  .game-coin { --s: calc(var(--u) * 22); }
  .q-row, .answers { width: 100%; }
  .answers { grid-template-columns: 1fr; }
  .answers::before, .answers::after { display: none; }
  .side-ctl { flex-direction: row; order: 10; }
  .q-count { margin: 0 0 0 calc(var(--u) * 1); }
  .bottom-left { order: 11; }
  .ladder-panel { position: fixed; left: 4vw; right: 4vw; top: 4vh; width: auto; max-height: 92vh; overflow: auto; }
}