/* Luminous — экраны игрока. Основа (токены, кнопки, поля, занавес) — theatre.css.
   Вход — билетная касса: билет, портрет для афиши, имя в программке. Игра — зрительный зал:
   вопрос опускается с колосников, варианты — камни в золотой оправе, итоги — под прожектором.
   Mobile-first: телефон в руке, крупные зоны нажатия. */

body {
  line-height: 1.45;
  overflow-x: hidden;
}

/* Кулисы по краям экрана — рамка зала на каждой странице */
body::before,
body::after {
  content: '';
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 40;
  width: clamp(9px, 2.6vw, 30px);
  --fold: 13px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent 30%, transparent 80%, rgba(0, 0, 0, 0.4)),
    var(--velvet-folds);
  pointer-events: none;
}

body::before {
  left: 0;
  border-right: 2px solid var(--gold-deep);
  box-shadow: 4px 0 12px rgba(0, 0, 0, 0.45);
  transform-origin: 0 0;
  animation: drape-breathe 9s ease-in-out infinite;
}

body::after {
  right: 0;
  border-left: 2px solid var(--gold-deep);
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.45);
  transform-origin: 100% 0;
  animation: drape-breathe 9s ease-in-out -4.5s infinite;
}

/* На экране игры рамки-кулис нет: сцена с танцем и вопросы — на всю ширину */
body.play::before,
body.play::after {
  content: none;
}

.btn {
  min-height: 56px;
  padding: 14px 22px;
  font-size: 19px;
  user-select: none;
  touch-action: manipulation;
}

.line-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Каркас шагов входа: билетная касса ---------- */

.screen {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: min(480px, 100%);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: calc(20px + var(--safe-top)) clamp(20px, 6vw, 28px) calc(26px + var(--safe-bottom));
}

.logo {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-top: 4vh;
}

.logo .brand-mark {
  width: 98px;
  height: 98px;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 22px rgba(243, 217, 139, 0.25));
  animation: logo-rise 900ms var(--ease-spring) 520ms backwards;
}

.logo .brand-word {
  font-size: 40px;
  animation: rise-in 700ms var(--ease-out) 700ms backwards;
}

.step-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.back-link {
  display: grid;
  flex: none;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1.5px solid rgba(216, 172, 76, 0.6);
  border-radius: 50%;
  background: rgba(26, 9, 16, 0.6);
  color: var(--gold-light);
  font-size: 22px;
  text-decoration: none;
  transition: transform var(--t-micro) var(--ease-out), background-color 200ms ease;
}

.back-link:hover {
  background: rgba(140, 21, 41, 0.55);
}

.back-link:active {
  transform: scale(0.92);
}

/* Шаги — отрывные корешки билета: «акты» I, II, III */
.steps {
  display: flex;
  flex: none;
  align-self: center;
  justify-content: center;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  perspective: 600px;
}

.step-header .steps {
  flex: 1;
}

.steps li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px 6px 11px;
  border: 1.5px dashed rgba(216, 172, 76, 0.5);
  border-radius: 7px;
  background: rgba(247, 236, 212, 0.05);
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  counter-increment: step;
  animation: drop-in 520ms var(--ease-out) backwards;
}

.steps li:nth-child(1) { animation-delay: 420ms; }
.steps li:nth-child(2) { animation-delay: 490ms; }
.steps li:nth-child(3) { animation-delay: 560ms; }

.steps li::before {
  content: counter(step, upper-roman);
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--gold);
}

.steps li.is-active {
  border: 1.5px solid var(--gold-deep);
  background: var(--gold-leaf);
  color: var(--ink);
  box-shadow: inset 0 0 0 2px rgba(255, 244, 210, 0.45), 0 2px 0 var(--gold-deep), 0 8px 18px rgba(0, 0, 0, 0.4);
}

.steps li.is-active::before {
  color: var(--velvet-deep);
}

.steps li.is-done {
  border-style: solid;
  border-color: rgba(216, 172, 76, 0.55);
  color: var(--paper-2);
}

.steps li.is-done::before {
  content: '✓';
  font-family: var(--font);
  color: var(--gold-light);
}

/* Панель — билет: бумага, корешок с перфорацией и вырубками по краям */
.panel {
  --text: var(--ink);
  --muted: var(--ink-soft);
  --border: rgba(143, 106, 34, 0.5);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 22px 24px;
  border-radius: var(--radius);
  color: var(--text);
  background:
    radial-gradient(120% 70% at 50% 0%, #fffaf0 0%, transparent 70%),
    var(--ivory);
  box-shadow: var(--programme-frame), var(--shadow-lift);
  text-align: center;
  transform-origin: 50% 0;
  animation: ticket-out 760ms var(--ease-out) 360ms backwards;
}

/* Вырубки на линии отрыва */
.panel::before,
.panel::after {
  content: '';
  position: absolute;
  top: 37px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--night);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
}

.panel::before {
  left: -11px;
}

.panel::after {
  right: -11px;
}

.panel-stub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 48px;
  margin: 0 -22px 4px;
  padding: 0 26px;
  border-bottom: 2px dashed rgba(143, 106, 34, 0.45);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.panel-stub span:last-child {
  font-family: var(--font-display);
  font-size: 15px;
  font-style: italic;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--velvet);
}

.panel h1 {
  font-size: 32px;
  color: var(--ink);
}

.panel > .muted {
  font-size: 16px;
}

/* ---------- Поля ---------- */

.input {
  min-height: 58px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

.panel .input {
  background: #fffdf7;
}

.code-input {
  min-height: 80px;
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 900;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  background:
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(143, 106, 34, 0.07) 22px 23px),
    #fffdf7;
}

.code-input::placeholder {
  color: rgba(107, 74, 60, 0.32);
}

.nickname-input {
  font-family: var(--font-display);
  font-size: 26px;
}

.hint-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: -6px;
  font-size: 13px;
  text-align: left;
}

.hint-row #counter {
  flex: none;
  font-variant-numeric: tabular-nums;
}

.form-error {
  padding: 10px 14px;
  border: 1px solid rgba(230, 110, 100, 0.55);
  border-radius: var(--radius-sm);
  background: rgba(210, 58, 58, 0.16);
  color: #ffc9c0;
  font-size: 15px;
}

.panel .form-error {
  border-color: rgba(176, 42, 42, 0.4);
  background: rgba(210, 58, 58, 0.09);
  color: #a12424;
}

/* ---------- Портрет для афиши ---------- */

.camera {
  position: relative;
  width: min(236px, 62vw);
  aspect-ratio: 1;
  margin: 18px auto 20px;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(circle at 50% 36%, #5a1a26, var(--night-2) 72%);
  box-shadow:
    0 0 0 3px var(--gold-deep),
    0 0 0 9px var(--gold),
    0 0 0 11px var(--gold-deep),
    0 0 0 18px rgba(216, 172, 76, 0.16),
    0 20px 40px rgba(43, 18, 24, 0.45);
  transition: box-shadow 400ms var(--ease-out);
}

.photo-panel[data-mode='camera'] .camera {
  box-shadow:
    0 0 0 3px var(--gold-deep),
    0 0 0 9px var(--gold-light),
    0 0 0 11px var(--gold-deep),
    0 0 0 18px rgba(255, 233, 176, 0.35),
    0 0 46px rgba(255, 233, 176, 0.5),
    0 20px 40px rgba(43, 18, 24, 0.45);
}

.camera video,
.camera img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.camera video {
  transform: scaleX(-1); /* зеркало, как в обычной фронтальной камере */
}

.camera img.is-new {
  animation: portrait-in 640ms var(--ease-out) backwards;
}

.camera-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: end center;
}

.camera-placeholder svg {
  width: 76%;
  height: 76%;
  fill: rgba(247, 236, 212, 0.18);
}

.camera-busy {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(26, 9, 16, 0.55);
  animation: fade-in 200ms ease both;
}

/* Вспышка — тёплый свет прожектора */
.camera-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, #fffdf2, var(--light) 70%);
  opacity: 0;
  pointer-events: none;
}

.camera-flash.is-active {
  animation: camera-flash 560ms ease-out;
}

/* Два способа добавить фото — две таблички */
.photo-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  perspective: 700px;
}

.photo-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 108px;
  padding: 14px 10px;
  border: 1.5px solid rgba(143, 106, 34, 0.55);
  border-radius: 12px;
  background: linear-gradient(180deg, #fffaf0, var(--paper-2));
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  box-shadow: 0 3px 0 rgba(143, 106, 34, 0.5), 0 10px 18px rgba(43, 18, 24, 0.14);
  animation: rise-in 560ms var(--ease-out) 640ms backwards;
  transition: transform var(--t-micro) var(--ease-out), box-shadow 220ms ease, border-color 220ms ease;
}

.photo-choice + .photo-choice {
  animation-delay: 720ms;
}

.photo-choice:hover {
  transform: perspective(500px) translateY(-2px) rotateX(8deg);
}

.photo-choice:active {
  transform: perspective(500px) translateY(2px) scale(0.98);
  box-shadow: 0 1px 0 rgba(143, 106, 34, 0.5), 0 4px 10px rgba(43, 18, 24, 0.12);
}

.photo-choice-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  color: var(--gold-light);
  background: radial-gradient(circle at 35% 30%, var(--velvet-light), var(--velvet) 58%, var(--velvet-deep));
  box-shadow: var(--gold-frame), 0 4px 10px rgba(43, 18, 24, 0.35);
}

.photo-choice-icon svg {
  width: 27px;
  height: 27px;
}

.photo-choice.is-suggested {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(216, 172, 76, 0.45), 0 3px 0 rgba(143, 106, 34, 0.5);
  animation: nudge 520ms ease 2;
}

/* Фото выбрано: способы становятся компактной строкой */
.photo-panel[data-mode='preview'] .photo-choice {
  flex-direction: row;
  gap: 8px;
  min-height: 52px;
  padding: 8px 10px;
  font-size: 15px;
  animation: none;
}

.photo-panel[data-mode='preview'] .photo-choice-icon {
  width: 32px;
  height: 32px;
}

.photo-panel[data-mode='preview'] .photo-choice-icon svg {
  width: 18px;
  height: 18px;
}

/* Камера включена: галерея — затвор — отмена */
.camera-live {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  justify-items: center;
  gap: 10px;
  animation: fade-in 260ms ease both;
}

.round-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 72px;
  padding: 4px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}

.round-action-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1.5px solid rgba(143, 106, 34, 0.55);
  border-radius: 50%;
  background: linear-gradient(180deg, #fffaf0, var(--paper-2));
  color: var(--ink);
  transition: transform var(--t-micro) var(--ease-out);
}

.round-action-icon svg {
  width: 24px;
  height: 24px;
}

.round-action:active .round-action-icon {
  transform: scale(0.9);
}

/* Затвор — золотой медальон с бархатной серединой */
.btn-shutter {
  width: 84px;
  height: 84px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--gold-leaf);
  box-shadow: 0 0 0 2px var(--gold-deep), 0 0 0 8px rgba(216, 172, 76, 0.25), 0 10px 22px rgba(43, 18, 24, 0.4);
}

.btn-shutter:hover:not(:disabled) {
  transform: perspective(400px) scale(1.04);
}

.btn-shutter:active:not(:disabled) {
  transform: scale(0.92);
}

.shutter-ring {
  width: 62px;
  height: 62px;
  border: 3px solid var(--gold-deep);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, var(--velvet-light), var(--velvet) 55%, var(--velvet-deep));
}

.file-button {
  position: relative;
  overflow: hidden;
}

.file-button input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
}

.file-button:focus-within {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.file-button:focus-within:not(:has(:focus-visible)) {
  outline: none;
}

/* ---------- Имя в программке ---------- */

.avatar-edit {
  position: relative;
  align-self: center;
  margin: 12px 0 4px;
  text-decoration: none;
  animation: portrait-in 700ms var(--ease-out) 560ms backwards;
}

.avatar-edit .avatar-xl {
  width: 132px;
  height: 132px;
}

.avatar-edit-badge {
  position: absolute;
  right: -2px;
  bottom: 4px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--ink);
  background: var(--gold-leaf);
  box-shadow: 0 0 0 2px var(--gold-deep), 0 4px 10px rgba(43, 18, 24, 0.4);
  transition: transform var(--t-element) var(--ease-spring);
}

.avatar-edit-badge svg {
  width: 20px;
  height: 20px;
}

.avatar-edit:hover .avatar-edit-badge {
  transform: rotate(-120deg) scale(1.08);
}

/* ---------- Игра: зал ---------- */

.play {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* Полоса игрока — ламбрекен: портрет в раме, имя, очки на латунной табличке */
.player-bar {
  position: relative;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: calc(9px + var(--safe-top)) clamp(18px, 5vw, 40px) 9px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.32), transparent 45%, rgba(0, 0, 0, 0.22)),
    var(--velvet-folds);
  border-bottom: 3px solid var(--gold);
  box-shadow: 0 1px 0 var(--gold-deep);
  --fold: 34px;
}

.player-bar::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 11px;
  margin-top: 3px;
  background: radial-gradient(ellipse 50% 100% at 50% 0, var(--velvet) 0 62%, var(--gold) 62% 78%, var(--gold-deep) 78% 82%, transparent 84%) 0 0 / 34px 11px repeat-x;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.35));
  pointer-events: none;
}

.player-bar .avatar {
  border-width: 2px;
}

.player-bar-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 19px;
  font-style: italic;
  font-weight: 700;
  color: var(--ivory);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-bar-score {
  flex: none;
  padding: 5px 12px;
  border-radius: 8px;
  background: var(--gold-leaf);
  color: var(--ink);
  font-weight: 800;
  box-shadow: inset 0 0 0 2px rgba(255, 244, 210, 0.45), 0 0 0 1px var(--gold-deep), 0 3px 8px rgba(0, 0, 0, 0.35);
}

.player-bar-score small {
  color: var(--ink-soft);
  font-weight: 700;
}

/* Очки начислены — табличка перелистывается */
.player-bar-score.is-bumped {
  animation: plaque-flip 720ms var(--ease-out);
}

/* Очки скрыты до церемонии награждения */
.player-bar-score.is-hidden {
  color: var(--gold-light);
  background: rgba(26, 9, 16, 0.65);
  box-shadow: inset 0 0 0 1.5px rgba(216, 172, 76, 0.65);
}

.player-bar-score.is-hidden small {
  color: var(--muted);
}

/* «Переподключаемся…» — записка под ламбрекеном, поверх экрана */
.reconnect-banner {
  position: absolute;
  top: calc(100% + 24px);
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: calc(100% - 40px);
  margin-inline: auto;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  border-left: 5px solid var(--amber);
  color: var(--ink);
  background: var(--ivory);
  box-shadow: var(--shadow);
  font-size: 14px;
  font-weight: 700;
  transform-origin: 50% 0;
  animation: note-in 480ms var(--ease-spring) both;
}

.reconnect-banner > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Сцена: экраны стоят друг на друге, смена — анимацией в play.js */
.views {
  position: relative;
  flex: 1;
  min-height: 0;
  perspective: 1400px;
  perspective-origin: 50% 35%;
}

/* Свет на сцене по настроению экрана (верно, неверно, церемония, победа) */
.views::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
}

body[data-mood='correct'] .views::before {
  opacity: 1;
  background:
    radial-gradient(60% 55% at 50% 0%, rgba(255, 233, 176, 0.42), transparent 75%),
    radial-gradient(70% 40% at 50% 100%, rgba(31, 139, 92, 0.42), transparent 75%);
  animation: lights-correct 900ms var(--ease-out) both;
}

body[data-mood='wrong'] .views::before {
  opacity: 1;
  background:
    radial-gradient(80% 60% at 50% 40%, transparent 30%, rgba(5, 1, 3, 0.75) 100%),
    radial-gradient(60% 45% at 50% 20%, rgba(196, 42, 67, 0.32), transparent 75%);
  animation: lights-wrong 900ms var(--ease-out) both;
}

body[data-mood='timeout'] .views::before {
  opacity: 1;
  background:
    radial-gradient(80% 60% at 50% 40%, transparent 30%, rgba(5, 1, 3, 0.7) 100%),
    radial-gradient(60% 45% at 50% 20%, rgba(217, 154, 30, 0.3), transparent 75%);
  animation: lights-timeout 900ms var(--ease-out) both;
}

body[data-mood='ceremony'] .views::before {
  opacity: 1;
  background: radial-gradient(70% 50% at 50% 30%, rgba(255, 233, 176, 0.16), transparent 75%);
  animation: lights-ceremony 1200ms var(--ease-out) both;
}

body[data-mood~='winner'] .views::before,
body[data-mood='final'] .views::before {
  opacity: 1;
  background:
    radial-gradient(45% 60% at 50% 0%, rgba(255, 233, 176, 0.5), rgba(255, 233, 176, 0.1) 60%, transparent 80%),
    radial-gradient(60% 30% at 50% 100%, rgba(140, 21, 41, 0.45), transparent 75%);
  animation: lights-winner 1400ms var(--ease-out) both;
}

body[data-mood='final'] .views::before {
  background: radial-gradient(45% 60% at 50% 0%, rgba(255, 233, 176, 0.26), transparent 80%);
}

.view {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px clamp(20px, 5.5vw, 32px) calc(20px + var(--safe-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  transform-origin: 50% 50% -260px;
  backface-visibility: hidden;
}

.view h1 {
  font-size: 34px;
  color: var(--ivory);
}

.view-center {
  align-items: center;
  text-align: center;
}

/* Центр по вертикали через «пружины»: если содержимое не влезает, верх не обрезается, а прокручивается */
.view-center::before,
.view-center::after {
  content: '';
  flex: none;
}

.view-center::before {
  margin-top: auto;
}

.view-center::after {
  margin-bottom: auto;
}

.view-text {
  max-width: 340px;
  color: var(--muted);
  font-size: 18px;
}

.view .pill {
  align-self: center;
}

/* ---------- Занавес на время подключения ----------
   После «Готово — в игру» занавес закрывается и остаётся закрытым, пока игрок подключается: в разметке
   play.html у него класс is-held, подключение идёт за ним. Когда игрок вошёл (или есть сообщение),
   play.js снимает is-held и открывает занавес — за ним сцена с танцующими джентльменами. */

.curtain.is-held {
  pointer-events: auto;
}

.curtain.is-held .curtain-drape,
.curtain.is-held .curtain-drape > i,
.curtain.is-held .curtain-drape > i::before,
.curtain.is-held .curtain-valance {
  animation: none;
}

#connecting-text {
  animation: fade-in 600ms ease 300ms backwards;
}

/* ---------- «Готовы?» перед первым вопросом ----------
   Ведущий начал игру — занавес закрыт, поверх него надпись (шрифт заголовка «Мои игры» у ведущего)
   и два прожектора сверху: js/ready.js хаотично водит их пятна по ткани. */

.ready {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  animation: fade-in 400ms ease both;
}

.ready[hidden] {
  display: none;
}

/* Луч: конус от прожектора к пятну; длину и поворот задаёт ready.js */
.ready-beam {
  position: absolute;
  left: 0;
  top: 0;
  width: 54vmin;
  height: 60vh;
  margin-left: -27vmin;
  background: linear-gradient(180deg, rgba(255, 244, 214, 0.5), rgba(255, 226, 170, 0.22) 70%, rgba(255, 220, 160, 0.1));
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  filter: blur(8px);
  mix-blend-mode: screen;
  transform-origin: 50% 0;
  will-change: transform;
}

/* Пятно света на бархате */
.ready-pool {
  position: absolute;
  left: 0;
  top: 0;
  width: 62vmin;
  height: 50vmin;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 238, 200, 0.8), rgba(255, 200, 130, 0.38) 45%, rgba(255, 170, 100, 0.1) 75%, transparent);
  mix-blend-mode: screen;
  will-change: transform;
}

.ready-title {
  position: relative;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(64px, 17vw, 168px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ivory);
  text-shadow: 0 0 30px rgba(255, 214, 140, 0.45), 0 6px 18px rgba(0, 0, 0, 0.65);
  animation: ready-in 700ms var(--ease-spring) 120ms both;
}

/* Цифры отсчёта: крупнее надписи, каждая выпрыгивает и чуть гаснет к концу секунды */
.ready-title.is-count {
  font-size: clamp(150px, 46vw, 320px);
  font-variant-numeric: tabular-nums;
  color: var(--gold-light);
  animation: ready-count 1000ms var(--ease-out) both;
}

@keyframes ready-in {
  from { opacity: 0; transform: translateY(18px) scale(0.86); }
  to { opacity: 1; transform: none; }
}

@keyframes ready-count {
  0% { opacity: 0; transform: scale(1.6); }
  18% { opacity: 1; transform: scale(1); }
  80% { opacity: 1; transform: scale(0.96); }
  100% { opacity: 0.35; transform: scale(0.9); }
}

@media (prefers-reduced-motion: reduce) {
  .ready-title,
  .ready-title.is-count { animation: none; }
}

/* ---------- Ожидание старта: канкан ----------
   Сцена на весь экран: задник, прожектор, доски, рампа. На сцене три джентльмена в цилиндрах шеренгой
   танцуют канкан, держась за плечи (позы считает js/cancan.js). Модель одна (#gent в play.html),
   cancan.js дублирует её ещё дважды. Всё векторное: плоские заливки и тонкий золотой кант по силуэту. */

.view-waiting {
  padding: 0;
  overflow: visible;
}

/* На широком экране колонка экранов уже окна — сцена выходит за неё на всю ширину */
.set {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  overflow: hidden;
  background: #14050a;
}

/* Задник: тёмный бархат с лёгкими складками */
.set-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(55% 50% at 50% 45%, rgba(140, 21, 41, 0.7), transparent 75%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.24) 0, transparent 34px, rgba(255, 180, 180, 0.05) 52px, transparent 70px),
    linear-gradient(180deg, #2a0b14, #1a0710 75%);
}

/* Прожектор сверху и круг света на полу */
.set-spot {
  position: absolute;
  left: 50%;
  top: -6%;
  width: min(150%, 1100px);
  height: 100%;
  background: linear-gradient(180deg, rgba(255, 240, 200, 0.42), rgba(255, 226, 170, 0.16) 55%, rgba(255, 220, 160, 0.05) 92%);
  clip-path: polygon(44% 0, 56% 0, 86% 100%, 14% 100%);
  filter: blur(8px);
  mix-blend-mode: screen;
  transform: translateX(-50%);
  animation: footlights 5s ease-in-out infinite;
}

/* Сцена: доски в перспективе */
.set-floor {
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: 0;
  height: 26%;
  background:
    linear-gradient(180deg, rgba(10, 3, 6, 0.55), transparent 30%),
    linear-gradient(180deg, rgba(255, 233, 176, 0.14), transparent),
    var(--boards);
  box-shadow: 0 -1px 0 rgba(255, 220, 160, 0.3);
  transform: perspective(420px) rotateX(28deg);
  transform-origin: 50% 100%;
}

.set-pool {
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: min(110%, 900px);
  height: 16%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 236, 190, 0.5), rgba(255, 210, 140, 0.16) 60%, transparent);
  mix-blend-mode: screen;
  transform: translateX(-50%);
}

.set-footlights {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 14px;
  background-size: 40px 14px;
  background-color: rgba(43, 18, 24, 0.85);
  box-shadow: 0 -2px 0 var(--gold-deep), 0 -4px 0 var(--gold), 0 -20px 30px rgba(255, 220, 160, 0.18);
}

.set-caption {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 16px 16px 0;
  text-align: center;
}

.set-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-style: italic;
  font-weight: 700;
  color: var(--gold-light);
  text-shadow: 0 0 18px rgba(216, 172, 76, 0.35), 0 2px 6px rgba(0, 0, 0, 0.6);
}

/* ---------- Джентльмены ---------- */

.show-line {
  position: absolute;
  left: 2%;
  right: 2%;
  top: 128px;
  z-index: 1;
  width: 96%;
  height: calc(100% - 150px);
  overflow: visible;
}

.gent-tux { fill: #120609; stroke: rgba(216, 172, 76, 0.55); stroke-width: 0.9; stroke-linejoin: round; }
.gent-fill { fill: #120609; }
.gent-satin { fill: #2f1820; }
.gent-shirt { fill: var(--ivory); }
.gent-stud { fill: #120609; }
.gent-skin { fill: #ecc8a2; }
.gent-skin-shade { fill: #cf9f78; }
.gent-hair { fill: #2a1610; }
.gent-bow { fill: var(--velvet-light); stroke: var(--velvet-deep); stroke-width: 0.8; stroke-linejoin: round; }
.gent-bow-knot { fill: var(--velvet); }
.gent-band { fill: var(--velvet); }
.gent-hat-top { fill: #2a141b; }
.gent-shine { fill: none; stroke: rgba(255, 255, 255, 0.2); stroke-width: 2.4; stroke-linecap: round; }
.gent-shadow { fill: rgba(0, 0, 0, 0.5); }

/* Контур силуэта: те же линии чуть толще и золотые, под заливками — снаружи остаётся тонкий кант */
.gent-limb,
.gent-edge,
.gent-cane,
.gent-gloss {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gent-edge { stroke: rgba(216, 172, 76, 0.55); }
.gent-edge-body { stroke-width: 1.8; } /* без подола: пиджак и брюки сливаются */
.gent-limb { stroke: #120609; }
.gent-limb-leg { stroke-width: 15; }
.gent-edge-leg { stroke-width: 16.8; }
.gent-limb-arm { stroke-width: 11; }
.gent-edge-arm { stroke-width: 12.8; }
.gent-shoe { fill: #0a0305; }
.gent-edge-shoe { fill: rgba(216, 172, 76, 0.55); stroke-width: 1.8; }
.gent-gloss { stroke: rgba(255, 255, 255, 0.45); stroke-width: 1.4; }
.gent-glove { fill: var(--ivory); stroke: var(--paper-2); stroke-width: 1; }
.gent-cane { stroke: #a8823a; stroke-width: 3.4; }
.gent-cane-knob { fill: var(--gold); stroke: var(--gold-deep); stroke-width: 1; }

/* Роль в шеренге: крайние держат трость во внешней руке, остальные руки — на плечах соседа */
.arm-cane-l,
.arm-cane-r { display: none; }
.gent-left .arm-hold-l,
.gent-right .arm-hold-r { display: none; }
.gent-left .arm-cane-l,
.gent-right .arm-cane-r { display: inline; }

/* Низкий экран (телефон боком): подпись в одну строку, джентльмены выше */
@media (max-height: 520px) {
  .set-caption {
    grid-auto-flow: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding-top: 10px;
  }

  .set-title { font-size: 19px; }

  .show-line {
    top: 62px;
    height: calc(100% - 84px);
  }
}

/* ---------- Вопрос ---------- */

.view-question {
  gap: 13px;
}

.question-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 54px;
}

#q-number {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--gold-light);
}

.q-kind {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-radius: 8px;
  color: var(--ink);
  background: var(--ivory);
  box-shadow: inset 0 0 0 1px rgba(143, 106, 34, 0.5), 0 3px 8px rgba(0, 0, 0, 0.35);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  transform: rotate(-2deg);
}

.kind-shapes {
  display: inline-flex;
  gap: 3px;
}

.kind-shapes .shape {
  display: block;
  width: 13px;
  height: 13px;
  color: var(--tone);
}

.kind-icon {
  width: 17px;
  height: 17px;
  color: var(--velvet);
}

/* Секунды — латунный медальон */
.q-seconds {
  display: grid;
  place-items: center;
  min-width: 54px;
  height: 54px;
  padding: 0 6px;
  border-radius: 50%;
  color: var(--ink);
  background: radial-gradient(circle at 35% 30%, #fff4d2, var(--gold) 55%, #b98a33);
  box-shadow: 0 0 0 2px var(--gold-deep), 0 0 0 5px rgba(216, 172, 76, 0.2), 0 6px 14px rgba(0, 0, 0, 0.4);
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.view-question[data-phase='reading'] .q-seconds,
.view-question[data-phase='answering'] .q-kind {
  display: none;
}

/* Время — догорающий фитиль с огоньком. --left (0…1) задаёт play.js */
.timebar {
  --left: 1;
  position: relative;
  flex: none;
  height: 10px;
  margin-right: 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, #120509, var(--night-3));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(216, 172, 76, 0.35);
  transition: opacity 300ms ease;
}

/* Во время чтения фитиль прячется, но место под ним остаётся — экран не прыгает */
.view-question[data-phase='reading'] .timebar {
  opacity: 0;
}

.timebar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold) 60%, var(--gold-light));
  transform: scaleX(var(--left));
  transform-origin: left;
}

.timebar-fill.is-urgent {
  background: linear-gradient(90deg, #7d1717, var(--danger) 70%, #ff8a6a);
}

/* Огонёк на конце фитиля: слой шириной с фитиль, сдвигается вместе с остатком времени */
.timebar::after {
  content: '';
  position: absolute;
  inset: -14px -10px -6px auto;
  width: calc(100% + 10px);
  background: radial-gradient(7px 11px at calc(100% - 9px) 52%, #fffbe6 0 30%, var(--light) 45%, rgba(255, 150, 40, 0.85) 70%, rgba(255, 120, 30, 0) 100%) no-repeat;
  transform: translateX(calc((var(--left) - 1) * (100% - 10px)));
  animation: flame 420ms ease-in-out infinite alternate;
  pointer-events: none;
}

.timebar:has(.is-urgent)::after {
  animation-duration: 160ms;
}

/* На телефоне картинка и текст — прямые участники колонки: картинка ужимается первой,
   а кнопки ответа и поле ввода не становятся меньше удобного размера. */
.q-body {
  display: contents;
}

/* Чтение и ответ вручную: вопрос стоит по центру свободного места */
.view-question[data-phase='reading'] .q-media,
.view-question[data-phase='reading'] .q-media[hidden] + .q-text,
.view-question[data-type='text'][data-phase='answering'] .q-media,
.view-question[data-type='text'][data-phase='answering'] .q-media[hidden] + .q-text {
  margin-top: auto;
}

.view-question[data-phase='reading'] .q-text {
  margin-bottom: auto;
}

/* Картинка в золочёной раме: место зарезервировано, сама картинка проявляется после загрузки */
.q-media {
  position: relative;
  flex: 0 1 auto;
  width: 100%;
  height: min(34vh, 300px);
  min-height: 84px;
  margin: 0;
}

.view-question[data-phase='answering'] .q-media {
  height: min(22vh, 190px);
  min-height: 64px;
}

.q-media::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  border: 4px solid var(--gold);
  border-radius: 4px;
  background:
    linear-gradient(100deg, transparent 30%, rgba(255, 233, 176, 0.12) 50%, transparent 70%) 0 0 / 200% 100%,
    var(--night-2);
  box-shadow: 0 0 0 1.5px var(--gold-deep), inset 0 0 0 1.5px var(--gold-deep);
  transform: translateX(-50%);
  animation: shimmer 1.4s linear infinite;
  transition: opacity 300ms ease;
}

.q-media img {
  position: absolute;
  inset: 0;
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  border: 4px solid var(--gold);
  border-radius: 4px;
  background: var(--night-2);
  box-shadow: 0 0 0 1.5px var(--gold-deep), inset 0 0 0 1px rgba(0, 0, 0, 0.3), 0 14px 30px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: perspective(800px) rotateX(10deg) scale(0.96);
  transition: opacity 450ms ease, transform 600ms var(--ease-out);
}

.q-media.is-loaded::before {
  opacity: 0;
  animation: none;
}

.q-media.is-loaded img {
  opacity: 1;
  transform: none;
}

.q-media.is-broken::before {
  animation: none;
}

.q-media.is-broken img {
  display: none;
}

.q-media.is-broken::after {
  content: 'Картинка не загрузилась';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

/* Текст вопроса — табличка, подвешенная на двух шнурах */
.q-text {
  position: relative;
  flex-shrink: 0;
  align-self: center;
  width: 100%;
  max-width: 640px;
  margin-top: 12px;
  padding: 18px 20px;
  border-radius: 12px;
  color: var(--ink);
  background:
    radial-gradient(120% 90% at 50% 0%, #fffaf0 0%, transparent 70%),
    var(--ivory);
  box-shadow: var(--programme-frame), var(--shadow);
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.q-text::before {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 100%;
  height: 13px;
  border-inline: 2px solid var(--gold-deep);
  pointer-events: none;
}

.q-text:empty {
  display: none;
}

.view-question[data-phase='reading'] .q-text {
  padding: 26px 22px;
  font-size: 25px;
  font-weight: 900;
  animation: sign-swing 1600ms var(--ease-out) 300ms backwards;
  transform-origin: 50% -13px;
}

/* Длинный вопрос — шрифт чуть меньше, чтобы осталось место кнопкам */
.view-question[data-long='true'] .q-text {
  font-size: 17px;
}

.view-question[data-long='true'][data-phase='reading'] .q-text {
  font-size: 20px;
}

/* Время подумать: золотой циферблат с обратным отсчётом */
.q-reading {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
  animation: rise-in 600ms var(--ease-out) 200ms backwards;
}

.read-caption {
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 17px;
  font-style: italic;
  font-weight: 700;
}

.read-ring {
  position: relative;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--night-3) 0 52%, transparent 53%),
    repeating-conic-gradient(from -1.5deg, rgba(243, 217, 139, 0.55) 0 3deg, transparent 3deg 30deg),
    var(--night-2);
  box-shadow: 0 0 0 2px var(--gold-deep), 0 10px 26px rgba(0, 0, 0, 0.5);
  animation: tick 1s ease-in-out infinite;
}

.read-ring svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.read-ring circle {
  fill: none;
  stroke-width: 8;
}

.read-ring-track {
  stroke: rgba(0, 0, 0, 0.35);
}

.read-ring-fill {
  stroke: url(#read-gradient);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}

.read-ring-value {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--gold-light);
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

/* Варианты — камни в золотой оправе на деревянном основании */
.answer-buttons {
  display: grid;
  flex: 1 0 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 16px 14px;
  padding: 4px 4px 10px;
  perspective: 900px;
}

.answers-2 {
  grid-template-columns: 1fr;
}

.answers-3 .answer-button:last-child {
  grid-column: 1 / -1;
}

.answer-button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  min-height: 104px;
  padding: 14px 12px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.3), transparent 36%),
    linear-gradient(330deg, rgba(0, 0, 0, 0.34), transparent 52%),
    var(--tone);
  box-shadow:
    inset 0 0 0 2px rgba(255, 240, 200, 0.35),
    0 0 0 3px var(--gold),
    0 0 0 4.5px var(--gold-deep),
    0 7px 0 4.5px var(--wood-dark),
    0 14px 20px 4px rgba(0, 0, 0, 0.4);
  font: inherit;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  transform-origin: 50% 100%;
  animation: tile-rise 620ms var(--ease-out) backwards;
  transition: transform 140ms var(--ease-out), box-shadow 200ms ease, opacity 360ms ease;
}

.answer-button:nth-child(2) { animation-delay: 80ms; }
.answer-button:nth-child(3) { animation-delay: 160ms; }
.answer-button:nth-child(4) { animation-delay: 240ms; }

/* Блик прожектора по граням камня */
.answer-button::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(60% 70% at 50% 0%, rgba(255, 245, 215, 0.55), transparent 70%);
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}

.answer-button:active:not(:disabled) {
  transform: translateY(5px) scale(0.98);
  box-shadow:
    inset 0 0 0 2px rgba(255, 240, 200, 0.35),
    0 0 0 3px var(--gold),
    0 0 0 4.5px var(--gold-deep),
    0 2px 0 4.5px var(--wood-dark),
    0 6px 12px 3px rgba(0, 0, 0, 0.35);
}

.answer-button:disabled {
  cursor: default;
}

/* Выбранный ответ — под лучом прожектора, остальные уходят в тень */
.answer-button.is-chosen {
  transform: scale(1.04);
  box-shadow:
    inset 0 0 0 2px rgba(255, 240, 200, 0.5),
    0 0 0 3px var(--gold-light),
    0 0 0 4.5px var(--gold-deep),
    0 7px 0 4.5px var(--wood-dark),
    0 0 0 12px rgba(255, 233, 176, 0.28),
    0 0 44px 10px rgba(255, 233, 176, 0.45);
  animation: chosen 520ms var(--ease-spring);
}

.answer-button.is-chosen::after {
  opacity: 1;
}

.answer-button.is-faded {
  opacity: 0.26;
  transform: scale(0.95);
}

/* Фигура — в золотом медальоне */
.answer-shape {
  flex: none;
  width: 52px;
  height: 52px;
  padding: 11px;
  border-radius: 50%;
  color: var(--tone);
  background: radial-gradient(circle at 35% 30%, #fffaf0, var(--ivory) 45%, var(--paper-2));
  box-shadow: 0 0 0 2px var(--gold-deep), 0 0 0 4px var(--gold), 0 4px 8px rgba(0, 0, 0, 0.35);
  overflow: visible;
}

.answer-text {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* Длинные варианты (до 80 символов): медальон меньше, текст — до пяти строк, чтобы вариант читался целиком */
.has-long-answers .answer-text {
  -webkit-line-clamp: 5;
}

.has-long-answers .answer-button {
  gap: 7px;
  padding: 10px;
  font-size: 15px;
}

.has-long-answers .answer-shape {
  width: 36px;
  height: 36px;
  padding: 8px;
}

/* Ответ вручную — строка в программке */
.text-answer {
  display: grid;
  flex: none;
  gap: 10px;
  width: min(480px, 100%);
  margin: 4px auto 0;
  animation: rise-in 560ms var(--ease-out) 120ms backwards;
}

.view-question[data-type='text'][data-phase='answering'] .text-answer {
  margin-bottom: auto;
}

.text-answer-input {
  min-height: 66px;
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 700;
}

.text-answer.is-sending .text-answer-input {
  opacity: 0.7;
}

/* Пока поле пустое, кнопка приглушена, но нажимается — и подсказывает, что нужно написать ответ */
.text-answer.is-empty .btn-primary {
  opacity: 0.72;
}

.text-answer-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: -2px;
  padding: 0 4px;
  color: var(--muted);
  font-size: 13px;
  text-align: left;
}

.text-answer-counter {
  flex: none;
  font-variant-numeric: tabular-nums;
}

.text-answer-hint.is-error {
  color: #ffb4a8;
  font-weight: 700;
}

/* ---------- Ответ принят: раскрывающийся веер ---------- */

#answered-shape {
  display: grid;
  place-items: center;
}

/* Веер: 11 бумажных пластин на деревянных спицах, раскрываются от общей заклёпки */
.fan {
  --r: 140px;
  --w: 41px;
  position: relative;
  width: calc(var(--r) * 1.95);
  height: calc(var(--r) + 14px);
  margin: 18px 0 6px;
  animation: fan-rise 620ms var(--ease-out) 120ms backwards;
}

.fan-slats {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.45));
}

.fan-slat {
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: var(--w);
  height: var(--r);
  margin-left: calc(var(--w) / -2);
  transform-origin: 50% calc(100% - 4px);
  transform: rotate(calc(var(--i) * 15deg));
  animation: fan-open 1000ms var(--ease-spring) 380ms backwards;
}

/* Спица */
.fan-slat::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 4px;
  height: 100%;
  margin-left: -2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #4a2a16, var(--wood-light), #4a2a16);
}

/* Бумажная пластина: светло-бежевая, складки чередуются светом и тенью, по краю — золотая кайма */
.fan-slat::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 72%;
  background:
    linear-gradient(180deg, var(--gold) 0 4px, var(--gold-deep) 4px 5px, transparent 5px 12px, rgba(216, 172, 76, 0.65) 12px 14px, transparent 14px),
    linear-gradient(90deg, #fbf2de, #efdcb6);
  clip-path: polygon(0 0, 100% 0, 63% 100%, 37% 100%);
}

.fan-slat:nth-child(even)::after {
  background:
    linear-gradient(180deg, var(--gold) 0 4px, var(--gold-deep) 4px 5px, transparent 5px 12px, rgba(216, 172, 76, 0.65) 12px 14px, transparent 14px),
    linear-gradient(90deg, #e3cda1, #f5e7c9);
}

/* Эмблема ответа на веере */
.fan-emblem {
  position: absolute;
  left: 50%;
  top: calc(var(--r) * 0.2);
  display: grid;
  place-items: center;
  width: calc(var(--r) * 0.46);
  height: calc(var(--r) * 0.46);
  margin-left: calc(var(--r) * -0.23);
  border-radius: 50%;
  color: var(--tone, var(--velvet));
  background: radial-gradient(circle at 35% 30%, #fffaf0, var(--ivory) 50%, var(--paper-2));
  box-shadow: 0 0 0 2px var(--gold-deep), 0 0 0 5px var(--gold), 0 0 0 6px var(--gold-deep), 0 6px 14px rgba(43, 18, 24, 0.35);
  animation: emblem-in 700ms var(--ease-spring) 1050ms backwards;
}

.fan-emblem.is-text {
  color: var(--ink);
}

.fan-icon {
  width: 62%;
  height: 62%;
  overflow: visible;
}

/* Заклёпка, на которой держатся спицы */
.fan-pivot {
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff4d2, var(--gold) 55%, var(--gold-deep));
  box-shadow: 0 0 0 1.5px #5a3d0c, 0 3px 6px rgba(0, 0, 0, 0.45);
}

/* Ваш ответ — строка на бумажке */
.answered-quote {
  max-width: min(360px, 100%);
  padding: 12px 20px;
  border-radius: 8px;
  color: var(--ink);
  background: var(--ivory);
  box-shadow: inset 0 0 0 1px rgba(143, 106, 34, 0.45), var(--shadow);
  font-family: var(--font-display);
  font-size: 22px;
  font-style: italic;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
  transform: rotate(-1.5deg);
  animation: note-in 600ms var(--ease-spring) 380ms backwards;
}

#view-answered h1 {
  animation: rise-in 600ms var(--ease-out) 260ms backwards;
}

/* ---------- Результат вопроса: под прожектором ---------- */

.result-icon,
.message-icon {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  color: var(--velvet);
  background: radial-gradient(circle at 35% 30%, #fffaf0, var(--ivory) 45%, var(--paper-2));
  box-shadow: 0 0 0 4px var(--gold), 0 0 0 6px var(--gold-deep), 0 0 0 14px rgba(216, 172, 76, 0.15), 0 18px 40px rgba(0, 0, 0, 0.5);
  animation: medal-drop 760ms var(--ease-spring) 140ms backwards;
}

.result-icon svg,
.message-icon svg {
  width: 56%;
  height: 56%;
}

body[data-mood='correct'] .result-icon { color: var(--success); }
body[data-mood='wrong'] .result-icon { color: var(--danger); }
body[data-mood='timeout'] .result-icon { color: #a8700f; }

body[data-mood='wrong'] .result-icon {
  animation: medal-drop 760ms var(--ease-spring) 140ms backwards, shake 460ms ease 860ms;
}

/* Верно: золотые лучи за медальоном */
.result-icon::before {
  content: '';
  position: absolute;
  inset: -64px;
  z-index: -1;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 233, 176, 0.38) 0 7deg, transparent 7deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 26%, transparent 70%);
  mask: radial-gradient(circle, #000 26%, transparent 70%);
  opacity: 0;
}

body[data-mood='correct'] .result-icon::before {
  opacity: 1;
  animation: fade-in 900ms ease 500ms backwards, spin 24s linear infinite;
}

#result-title {
  font-size: 40px;
  animation: rise-in 560ms var(--ease-out) 240ms backwards;
}

.result-points {
  color: var(--gold-light);
  font-family: var(--font-display);
  font-size: 54px;
  font-weight: 900;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35), 0 0 30px rgba(243, 217, 139, 0.35);
  animation: points-pop 700ms var(--ease-spring) 380ms backwards;
}

body[data-mood='wrong'] .result-points,
body[data-mood='timeout'] .result-points {
  color: var(--muted);
  text-shadow: none;
}

/* Подробности — бумажка из программки */
.result-details {
  --text: var(--ink);
  --muted: var(--ink-soft);
  display: grid;
  justify-items: center;
  gap: 12px;
  width: min(360px, 100%);
  padding: 18px 20px;
  border-radius: 12px;
  color: var(--ink);
  background: var(--ivory);
  box-shadow: var(--programme-frame), var(--shadow);
  animation: drop-in 600ms var(--ease-out) 520ms backwards;
}

.result-details:empty {
  display: none;
}

.result-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.result-label {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.answer-quote {
  font-family: var(--font-display);
  font-size: 21px;
  font-style: italic;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.answer-quote.is-wrong {
  color: #a12424;
  text-decoration: line-through 2px rgba(161, 36, 36, 0.55);
}

.answer-quote.is-correct {
  color: #1d7a4d;
}

.result-also {
  margin-top: -4px;
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.result-total {
  color: var(--ink-soft);
  font-size: 17px;
  font-weight: 700;
}

/* Правильный вариант — камень в оправе */
.correct-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 7px 15px;
  border-radius: 999px;
  color: #fff;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.28), transparent 45%),
    var(--tone);
  box-shadow: 0 0 0 2px var(--gold), 0 0 0 3px var(--gold-deep);
  font-size: 17px;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  overflow-wrap: anywhere;
}

.correct-chip .shape {
  flex: none;
  width: 18px;
  height: 18px;
}

.correct-chip-text {
  color: var(--gold-light);
  background: var(--night-2);
  font-family: var(--font-display);
  font-size: 19px;
  text-shadow: none;
}

#result-rank,
#result-hidden {
  animation: rise-in 560ms var(--ease-out) 680ms backwards;
}

/* ---------- Церемония: место ещё не показано ---------- */

.drumroll {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 260px;
  height: 236px;
  margin-bottom: 8px;
}

/* Два прожектора ищут победителя */
.drumroll-glow {
  position: absolute;
  inset: -40px -50px 0;
  pointer-events: none;
}

.drumroll-glow::before,
.drumroll-glow::after {
  content: '';
  position: absolute;
  top: -40px;
  width: 120px;
  height: 330px;
  background: linear-gradient(180deg, rgba(255, 233, 176, 0.05), rgba(255, 233, 176, 0.32));
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  transform-origin: 50% 0;
}

.drumroll-glow::before {
  left: 0;
  animation: search-left 2.6s ease-in-out infinite alternate;
}

.drumroll-glow::after {
  right: 0;
  animation: search-right 2.6s ease-in-out infinite alternate;
}

.drumroll-trophy {
  position: relative;
  width: 86px;
  height: 86px;
  margin-bottom: 8px;
  color: var(--gold);
  filter: drop-shadow(0 6px 16px rgba(243, 217, 139, 0.5));
  transform-origin: 50% 90%;
  animation: trophy-wiggle 520ms ease-in-out infinite;
}

.drumroll-trophy svg {
  display: block;
  width: 100%;
  height: 100%;
}

.trophy-cup {
  fill: currentColor;
}

.trophy-handles {
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
}

.trophy-shine {
  fill: none;
  stroke: var(--gold-light);
  stroke-width: 3;
  stroke-linecap: round;
}

/* Пьедестал — ступени сцены с верхней гранью */
.drumroll-podium {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 0 6px;
}

.drumroll-podium::after {
  content: '';
  position: absolute;
  left: -40px;
  right: -40px;
  bottom: -10px;
  height: 10px;
  border-top: 2px solid var(--gold);
  background: var(--boards);
  border-radius: 2px;
}

.drum-step {
  position: relative;
  display: grid;
  place-items: start center;
  width: 66px;
  padding-top: 10px;
  border-radius: 3px 3px 0 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 900;
  box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  animation: drum 900ms ease-in-out infinite;
}

/* Верхняя грань ступени в перспективе */
.drum-step::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 10px;
  background: inherit;
  filter: brightness(1.25);
  transform: perspective(60px) rotateX(48deg);
  transform-origin: 50% 100%;
}

.drum-step-1 {
  height: 92px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold) 50%, #b98a33);
  color: #5a3d0c;
  animation-delay: 300ms;
}

.drum-step-2 {
  height: 66px;
  background: linear-gradient(180deg, #f4f2ec, #c9c8c3 50%, #8f8e8a);
  color: #34322e;
  animation-delay: 150ms;
}

.drum-step-3 {
  height: 48px;
  background: linear-gradient(180deg, #f0b98a, #c47a3e 55%, #8a4f22);
  color: #3b1d08;
  animation-delay: 450ms;
}

.ceremony-note {
  max-width: 300px;
  font-size: 15px;
}

/* ---------- Финал: ваше место под прожектором ---------- */

.view-final {
  gap: 14px;
}

.final-caption {
  color: var(--gold-light);
  font-family: var(--font-display);
  font-size: 22px;
  font-style: italic;
  font-weight: 700;
  animation: drop-in 600ms var(--ease-out) 200ms backwards;
}

.final-place {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 220px;
  height: 214px;
  margin-top: 26px;
}

.final-rays {
  position: absolute;
  inset: -24px;
  border-radius: 50%;
  opacity: 0;
}

.final-place.is-podium .final-rays {
  opacity: 1;
  background: repeating-conic-gradient(from 0deg, rgba(255, 233, 176, 0.34) 0 7deg, transparent 7deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 24%, transparent 68%);
  mask: radial-gradient(circle, #000 24%, transparent 68%);
  animation: fade-in 900ms ease 400ms backwards, spin 22s linear infinite;
}

/* Медаль — литой металл: фрезерованный край, утопленное поле с лавровым венком, выпуклая цифра,
   бегущий блик; висит на бархатной ленте с кольцом и слегка поворачивается в 3D */
.medal {
  --size: 144px;
  --metal-1: #7a5517;
  --metal-2: #f7e3a1;
  --metal-3: #c99a3d;
  --metal-4: #6e4c14;
  --metal-5: #e4c06a;
  --metal-6: #fff2c2;
  --field-1: #fff7d6;
  --field-2: #f0d283;
  --field-3: #d4a84a;
  --field-4: #a87a2a;
  --emboss: #7a5517;
  --glow: rgba(243, 217, 139, 0.5);
  position: relative;
  display: grid;
  justify-items: center;
  animation: medal-in 1100ms var(--ease-spring) 260ms backwards, medal-sway 6s ease-in-out 1.6s infinite;
}

.medal-silver {
  --metal-1: #5f6066;
  --metal-2: #ffffff;
  --metal-3: #b9bac0;
  --metal-4: #55565c;
  --metal-5: #d9dade;
  --metal-6: #ffffff;
  --field-1: #ffffff;
  --field-2: #e6e7ea;
  --field-3: #c2c3c8;
  --field-4: #8c8d93;
  --emboss: #4d4e54;
  --glow: rgba(235, 236, 240, 0.4);
}

.medal-bronze {
  --metal-1: #6a3814;
  --metal-2: #ffd2a6;
  --metal-3: #c47a3e;
  --metal-4: #5c2f10;
  --metal-5: #e3a066;
  --metal-6: #ffe4c8;
  --field-1: #ffe6cc;
  --field-2: #eeaa72;
  --field-3: #c47a3e;
  --field-4: #8a4f22;
  --emboss: #5c2f10;
  --glow: rgba(234, 167, 113, 0.4);
}

.medal-disc {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  isolation: isolate;
  background: conic-gradient(from 200deg, var(--metal-1), var(--metal-2) 12%, var(--metal-3) 25%, var(--metal-4) 38%, var(--metal-5) 52%, var(--metal-6) 62%, var(--metal-3) 76%, var(--metal-1));
  box-shadow:
    0 0 0 1.5px var(--metal-4),
    0 4px 0 var(--metal-4),
    0 6px 0 var(--metal-1),
    0 24px 40px rgba(0, 0, 0, 0.55),
    0 0 64px var(--glow);
}

/* Фрезеровка по краю */
.medal-disc::before {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(40, 26, 6, 0.32) 0 1.4deg, transparent 1.4deg 4deg);
  -webkit-mask: radial-gradient(circle, transparent 86%, #000 87%);
  mask: radial-gradient(circle, transparent 86%, #000 87%);
}

/* Утопленное поле */
.medal-disc::after {
  content: '';
  position: absolute;
  inset: calc(var(--size) * 0.095);
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, var(--field-1) 0, var(--field-2) 24%, var(--field-3) 58%, var(--field-4) 92%);
  box-shadow:
    inset 0 4px 8px rgba(40, 26, 6, 0.55),
    inset 0 -3px 5px rgba(255, 248, 215, 0.55),
    0 -1px 0 rgba(255, 248, 215, 0.6),
    0 1.5px 0 rgba(40, 26, 6, 0.45);
}

.medal-laurel {
  position: absolute;
  inset: calc(var(--size) * 0.13);
  width: calc(100% - var(--size) * 0.26);
  height: calc(100% - var(--size) * 0.26);
  color: var(--emboss);
  opacity: 0.55;
  filter: drop-shadow(0 1px 0 rgba(255, 248, 215, 0.7));
}

.medal-number {
  position: relative;
  color: var(--emboss);
  font-family: var(--font-display);
  font-size: calc(var(--size) * 0.46);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1.5px 0 rgba(255, 246, 210, 0.9), 0 -1px 0 rgba(40, 26, 6, 0.55), 0 3px 4px rgba(40, 26, 6, 0.35);
}

/* Блик бежит по металлу */
.medal-glint {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
}

.medal-glint::before {
  content: '';
  position: absolute;
  inset: -20%;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.65) 48%, rgba(255, 255, 255, 0.1) 54%, transparent 60%);
  transform: translateX(-80%);
  animation: glint 4.2s ease-in-out 1.8s infinite;
}

/* Лента: две бархатные полосы с золотой серединой и складкой */
.medal-ribbon {
  position: absolute;
  top: calc(var(--size) * -0.36);
  left: 50%;
  width: calc(var(--size) * 0.66);
  height: calc(var(--size) * 0.56);
  transform: translateX(-50%);
}

.ribbon-strap {
  position: absolute;
  top: 0;
  width: 46%;
  height: 100%;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.35), transparent 30%),
    linear-gradient(90deg, var(--velvet-deep) 0 10%, var(--velvet) 10% 36%, var(--gold) 36% 44%, var(--gold-light) 44% 56%, var(--gold) 56% 64%, var(--velvet-light) 64% 90%, var(--velvet-deep) 90%);
  box-shadow: inset 0 -6px 8px rgba(0, 0, 0, 0.3);
}

.ribbon-strap:first-child {
  left: 4%;
  transform: skewX(22deg);
}

.ribbon-strap:last-child {
  right: 4%;
  transform: skewX(-22deg);
}

/* Кольцо, на котором висит медаль */
.medal-loop {
  position: absolute;
  top: calc(var(--size) * -0.12);
  left: 50%;
  z-index: 2;
  width: calc(var(--size) * 0.2);
  height: calc(var(--size) * 0.15);
  border: 4px solid var(--metal-3);
  border-radius: 50%;
  box-shadow: inset 0 1px 0 var(--metal-6), 0 2px 3px rgba(0, 0, 0, 0.4);
  transform: translateX(-50%);
}

/* Не призовое место — бархатный медальон с золотой цифрой */
.medal-plain .medal-disc {
  width: calc(var(--size) * 0.9);
  height: calc(var(--size) * 0.9);
  background: radial-gradient(circle at 35% 30%, var(--velvet-light), var(--velvet) 55%, var(--velvet-deep));
  box-shadow: 0 0 0 3px var(--gold), 0 0 0 5px var(--gold-deep), 0 4px 0 5px #3a0712, 0 0 0 14px rgba(216, 172, 76, 0.14), 0 20px 40px rgba(0, 0, 0, 0.5);
}

.medal-plain .medal-disc::before,
.medal-plain .medal-disc::after {
  display: none;
}

.medal-plain .medal-number {
  color: var(--gold-light);
  font-size: calc(var(--size) * 0.4);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}

.final-rank {
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 900;
  line-height: 1.05;
  animation: rise-in 600ms var(--ease-out) 700ms backwards;
}

.view-final .view-text {
  animation: rise-in 600ms var(--ease-out) 820ms backwards;
}

/* Пьедестал — список в программке */
.final-podium-wrap {
  --text: var(--ink);
  --muted: var(--ink-soft);
  display: grid;
  gap: 10px;
  width: min(360px, 100%);
  padding: 18px 18px 16px;
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--ivory);
  box-shadow: var(--programme-frame), var(--shadow);
  animation: programme-in 700ms var(--ease-out) 300ms backwards;
}

.final-podium-title {
  color: var(--velvet);
  font-family: 'Yeseva One', var(--font-display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0.06em;
}

.final-podium {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.final-podium li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: var(--paper-2);
  font-weight: 700;
  animation: rise-in 500ms var(--ease-out) backwards;
}

.final-podium li.is-me {
  background: #fff4d2;
  box-shadow: inset 0 0 0 2px var(--gold);
}

.podium-rank {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--ivory);
  background: var(--velvet);
  font-family: var(--font-display);
  font-weight: 900;
}

.podium-rank-gold { background: radial-gradient(circle at 35% 30%, var(--gold-light), var(--gold) 60%, #a87a2a); color: #4a3008; }
.podium-rank-silver { background: radial-gradient(circle at 35% 30%, #fff, #c9c8c3 60%, #8f8e8a); color: #34322e; }
.podium-rank-bronze { background: radial-gradient(circle at 35% 30%, #ffd9b8, #c47a3e 60%, #8a4f22); color: #fff3e6; }

.podium-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.podium-score {
  flex: none;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

#final-note {
  max-width: 320px;
}

/* Лепестки роз и позолота */
.confetti {
  position: fixed;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  pointer-events: none;
}

.confetti span {
  position: absolute;
  top: -24px;
  left: var(--x);
  width: 11px;
  height: 15px;
  border-radius: 75% 0 75% 0;
  background: var(--color);
  box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.18);
  animation: petal-fall var(--fall) linear var(--delay) both;
}

.confetti span:nth-child(3n) {
  width: 8px;
  height: 8px;
  border-radius: 1px;
}

/* ---------- Сообщение ---------- */

.message-icon {
  color: var(--velvet);
}

.message-actions {
  display: grid;
  gap: 10px;
  width: min(340px, 100%);
  margin-top: 6px;
}

.message-actions:empty {
  display: none;
}

#message-title {
  animation: rise-in 560ms var(--ease-out) 240ms backwards;
}

/* Записка-уведомление поверх экрана */
body > .toast {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(22px + var(--safe-bottom));
  z-index: 200;
  width: fit-content;
  max-width: calc(100% - 48px);
  margin-inline: auto;
}

/* ---------- Анимации ---------- */

@keyframes logo-rise {
  0% { opacity: 0; transform: perspective(500px) translateY(30px) rotateY(-70deg) scale(0.8); }
  100% { opacity: 1; transform: none; }
}

@keyframes ticket-out {
  0% { opacity: 0; transform: perspective(1100px) translateY(46px) rotateX(-62deg); }
  100% { opacity: 1; transform: none; }
}

@keyframes portrait-in {
  0% { opacity: 0; transform: perspective(700px) rotateY(-90deg) scale(0.85); }
  100% { opacity: 1; transform: none; }
}

@keyframes camera-flash {
  0% { opacity: 0.95; }
  100% { opacity: 0; }
}

@keyframes nudge {
  50% { transform: perspective(500px) rotateX(10deg) scale(1.04); }
}

@keyframes shimmer {
  to { background-position: -200% 0, 0 0; }
}

@keyframes plaque-flip {
  0% { transform: perspective(300px) rotateX(0deg); }
  45% { transform: perspective(300px) rotateX(-90deg) scale(1.1); }
  46% { transform: perspective(300px) rotateX(90deg) scale(1.1); }
  100% { transform: perspective(300px) rotateX(0deg); }
}

@keyframes beam-in {
  from { opacity: 0; transform: translateX(-50%) scaleX(0.2); }
}

@keyframes beam-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.72; }
}

@keyframes flame {
  from { opacity: 0.8; }
  to { opacity: 1; }
}

/* Табличка опускается на шнурах и покачивается */
@keyframes sign-swing {
  0% { opacity: 0; transform: perspective(800px) translateY(-60px) rotateX(30deg); }
  45% { opacity: 1; transform: perspective(800px) translateY(4px) rotateX(-8deg); }
  70% { transform: perspective(800px) rotateX(4deg); }
  100% { transform: none; }
}

@keyframes tick {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.05); }
  30% { transform: scale(1); }
}

/* Камень поднимается из люка */
@keyframes tile-rise {
  0% { opacity: 0; transform: perspective(700px) translateY(34px) rotateX(-76deg); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

@keyframes chosen {
  0% { transform: scale(1); }
  45% { transform: scale(1.09); }
  100% { transform: scale(1.04); }
}

/* Веер поднимается сложенным и раскрывается — пластины расходятся с лёгким пружинным отскоком */
@keyframes fan-rise {
  0% { opacity: 0; transform: perspective(700px) translateY(40px) rotateX(30deg) scale(0.7); }
  100% { opacity: 1; transform: none; }
}

@keyframes fan-open {
  from { transform: rotate(0deg); }
}

@keyframes emblem-in {
  0% { opacity: 0; transform: perspective(500px) rotateY(-90deg) scale(0.5); }
  100% { opacity: 1; transform: none; }
}

@keyframes medal-drop {
  0% { opacity: 0; transform: perspective(600px) translateY(-70px) rotateY(180deg) scale(0.7); }
  60% { opacity: 1; transform: perspective(600px) translateY(6px) rotateY(-12deg); }
  100% { opacity: 1; transform: none; }
}

@keyframes points-pop {
  0% { opacity: 0; transform: translateY(20px) scale(0.6); }
  100% { opacity: 1; transform: none; }
}

@keyframes search-left {
  from { transform: rotate(-30deg); }
  to { transform: rotate(18deg); }
}

@keyframes search-right {
  from { transform: rotate(30deg); }
  to { transform: rotate(-18deg); }
}

@keyframes trophy-wiggle {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg); }
}

@keyframes drum {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes medal-sway {
  0%, 100% { transform: perspective(700px) rotateY(-12deg); }
  50% { transform: perspective(700px) rotateY(12deg); }
}

@keyframes glint {
  0%, 55% { transform: translateX(-80%); }
  85%, 100% { transform: translateX(80%); }
}

@keyframes medal-in {
  0% { opacity: 0; transform: perspective(700px) translateY(-120px) rotateY(540deg) scale(0.4); }
  70% { opacity: 1; transform: perspective(700px) translateY(8px) rotateY(-10deg) scale(1.06); }
  100% { opacity: 1; transform: none; }
}

@keyframes petal-fall {
  0% { opacity: 1; transform: translate3d(0, 0, 0) rotate3d(1, 0.4, 0.2, 0deg); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--drift), 105vh, 0) rotate3d(1, 0.4, 0.2, var(--spin)); }
}

/* Свет на сцене: у каждого настроения своя анимация, чтобы она запускалась заново при смене */
@keyframes lights-correct { from { opacity: 0; } }
@keyframes lights-wrong { from { opacity: 0; } }
@keyframes lights-timeout { from { opacity: 0; } }
@keyframes lights-ceremony { from { opacity: 0; } }
@keyframes lights-winner { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .confetti {
    display: none;
  }

  .timebar::after {
    opacity: 1;
  }
}

/* ---------- Широкие экраны (планшет, компьютер) ---------- */

@media (min-width: 720px) {
  .views {
    width: min(760px, 100%);
    margin: 0 auto;
  }

  /* Свет сцены — на всю ширину экрана, а не только на колонку: краёв колонки не видно. */
  .views::before {
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
  }

  .answer-button {
    font-size: 20px;
  }

  .answer-shape {
    width: 64px;
    height: 64px;
    padding: 14px;
  }
}

/* ---------- Телефон: всё компактнее (примерно на 15–20 %) ---------- */

@media (max-width: 600px) {
  .screen {
    gap: 14px;
    padding-top: calc(12px + var(--safe-top));
  }

  .logo {
    gap: 4px;
    margin-top: 1.5vh;
  }

  .logo .brand-mark {
    width: 70px;
    height: 70px;
  }

  .logo .brand-word {
    font-size: 31px;
  }

  .panel {
    gap: 11px;
    padding: 0 16px 18px;
  }

  .panel h1 {
    font-size: 26px;
  }

  .code-input {
    min-height: 64px;
    font-size: 34px;
  }

  .nickname-input {
    font-size: 21px;
  }

  .view h1 {
    font-size: 27px;
  }

  .q-seconds {
    font-size: 21px;
  }

  .view-question[data-phase='reading'] .q-text {
    font-size: 21px;
  }

  .read-ring-value {
    font-size: 34px;
  }

  .text-answer-input {
    font-size: 21px;
  }

  #result-title {
    font-size: 32px;
  }

  .result-points {
    font-size: 42px;
  }

  .drum-step {
    font-size: 20px;
  }

  .final-rank {
    font-size: 36px;
  }
}

/* Самые узкие телефоны: шаги входа помещаются рядом с кнопкой «назад». */
@media (max-width: 360px) {
  .step-header {
    gap: 8px;
  }

  .steps {
    gap: 5px;
  }

  .steps li {
    gap: 5px;
    padding: 5px 9px 5px 8px;
    font-size: 13px;
  }
}

/* Узкие телефоны: длинные варианты ответа — в один столбец во всю ширину, медальон слева,
   чтобы текст варианта читался целиком. */
@media (max-width: 420px) {
  .answer-buttons.has-long-answers {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .answers-3.has-long-answers .answer-button:last-child {
    grid-column: auto;
  }

  .has-long-answers .answer-button {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    min-height: 64px;
    padding: 10px 14px;
    text-align: left;
  }

  .has-long-answers .answer-text {
    -webkit-line-clamp: 4;
  }
}

/* ---------- Низкий экран: телефон боком или открыта клавиатура ---------- */

@media (max-height: 520px) {
  .logo {
    margin-top: 0;
  }

  .logo .brand-mark {
    width: 64px;
    height: 64px;
  }

  .logo .brand-word {
    font-size: 30px;
  }

  .camera {
    width: min(170px, 38vh);
    margin: 10px auto 12px;
  }

  .photo-choice {
    min-height: 84px;
  }

  .view {
    gap: 10px;
    padding-top: 12px;
    padding-bottom: calc(10px + var(--safe-bottom));
  }

  .question-top {
    min-height: 40px;
  }

  .q-seconds {
    min-width: 40px;
    height: 40px;
    font-size: 19px;
  }

  .q-kind {
    padding: 5px 11px;
  }

  .timebar {
    height: 8px;
  }

  .q-media {
    height: min(30vh, 140px);
  }

  .view-question[data-phase='answering'] .q-media {
    height: min(18vh, 96px);
  }

  .q-text {
    padding: 12px 16px;
    font-size: 17px;
  }

  .view-question[data-phase='reading'] .q-text {
    padding: 16px 18px;
    font-size: 20px;
  }

  .read-ring {
    width: 76px;
    height: 76px;
  }

  .read-ring-value {
    font-size: 30px;
  }

  .answer-buttons {
    gap: 12px;
  }

  .answer-button {
    flex-direction: row;
    gap: 10px;
    min-height: 60px;
    padding: 8px 12px;
    font-size: 16px;
  }

  .answer-text {
    -webkit-line-clamp: 2;
  }

  .has-long-answers .answer-text {
    -webkit-line-clamp: 3;
  }

  .answer-shape,
  .has-long-answers .answer-shape {
    width: 34px;
    height: 34px;
    padding: 7px;
  }

  .text-answer-input {
    min-height: 54px;
    font-size: 21px;
  }


  .result-icon,
  .message-icon {
    width: 78px;
    height: 78px;
  }

  .fan {
    --r: 92px;
    --w: 27px;
    margin: 10px 0 4px;
  }

  .result-points {
    font-size: 36px;
  }

  .view h1,
  #result-title {
    font-size: 26px;
  }

  .drumroll {
    width: 190px;
    height: 160px;
  }

  .drumroll-trophy {
    width: 60px;
    height: 60px;
  }

  .drum-step {
    width: 50px;
    font-size: 18px;
  }

  .drum-step-1 { height: 62px; }
  .drum-step-2 { height: 46px; }
  .drum-step-3 { height: 34px; }

  .final-place {
    width: 150px;
    height: 140px;
    margin-top: 18px;
  }

  .medal {
    --size: 96px;
  }

  .final-rank {
    font-size: 32px;
  }
}

/* Телефон боком: вопрос слева, ответы справа */
@media (max-height: 520px) and (min-width: 560px) {
  .view-question {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    column-gap: 18px;
    row-gap: 8px;
  }

  .question-top,
  .timebar {
    grid-column: 1 / -1;
  }

  .q-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    grid-column: 1;
    grid-row: 3;
    min-height: 0;
    max-height: 100%;
  }

  .q-reading,
  .text-answer,
  .view-question[data-type='text'][data-phase='answering'] .text-answer {
    grid-column: 2;
    grid-row: 3;
    align-self: center;
    margin: 0;
  }

  .answer-buttons {
    grid-column: 2;
    grid-row: 3;
  }

  .q-media,
  .view-question[data-phase='answering'] .q-media {
    height: min(34vh, 130px);
    min-height: 56px;
  }

  /* Шаг «Фото»: рама слева, кнопки справа */
  .screen {
    width: min(760px, 100%);
    gap: 12px;
  }

  .photo-panel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 28px;
    row-gap: 10px;
    padding: 0 24px 18px;
    text-align: left;
  }

  .photo-panel > * {
    grid-column: 2;
  }

  .photo-panel > .panel-stub {
    grid-column: 1 / -1;
  }

  .photo-panel > .camera {
    grid-column: 1;
    grid-row: 2 / span 5;
    width: min(200px, 48vh);
    margin: 12px;
  }

  .photo-panel > .muted {
    font-size: 14px;
  }

  /* Результат и финал: две колонки, чтобы всё помещалось без прокрутки */
  .view-result,
  .view-final {
    display: grid;
    align-content: center;
    align-content: safe center;
    justify-content: center;
    column-gap: 36px;
    row-gap: 6px;
  }

  .view-result::before,
  .view-result::after,
  .view-final::before,
  .view-final::after {
    display: none;
  }

  .view-result {
    grid-template-columns: auto minmax(0, 360px);
  }

  .view-result > * {
    grid-column: 2;
    justify-self: start;
    margin-block: 4px;
    text-align: left;
  }

  .view-result > .result-icon {
    grid-column: 1;
    grid-row: 1 / span 6;
    align-self: center;
  }

  .view-result .result-details,
  .view-result .result-line {
    justify-items: start;
    align-items: flex-start;
  }

  .view-final {
    grid-template-columns: auto minmax(0, 360px);
  }

  .view-final > * {
    grid-column: 2;
    justify-self: start;
    text-align: left;
  }

  .view-final > .final-place {
    grid-column: 1;
    grid-row: 1 / span 6;
    align-self: center;
  }

  .view-final > .confetti {
    grid-column: auto;
  }
}

/* ---------- Главная игрока: вход для ведущих и уведомление о данных ---------- */

.host-offer {
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
  animation: fade-in 700ms ease 900ms backwards;
}

.host-offer-rule {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--muted);
}

.host-offer-rule::before,
.host-offer-rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216, 172, 76, 0.55), transparent);
}

.host-offer-note {
  font-size: 15px;
}

.privacy-note {
  margin-top: auto;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  opacity: 0.8;
}

.privacy-note a {
  color: var(--gold-light);
  font-weight: 700;
}

/* ---------- Несколько верных: отмеченные варианты под лучом, галочка в углу ---------- */

.answer-buttons.is-multi .answer-button::before {
  content: '';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border: 2px dashed rgba(255, 244, 210, 0.75);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.18) center / 15px 15px no-repeat;
  transition: background-color 200ms ease, border-color 200ms ease, transform 300ms var(--ease-spring);
}

.answer-buttons.is-multi .answer-button[aria-pressed='true'] {
  box-shadow:
    inset 0 0 0 2px rgba(255, 240, 200, 0.5),
    0 0 0 3px var(--gold-light),
    0 0 0 4.5px var(--gold-deep),
    0 7px 0 4.5px var(--wood-dark),
    0 0 26px 6px rgba(255, 233, 176, 0.4);
}

.answer-buttons.is-multi .answer-button[aria-pressed='true']::after {
  opacity: 1;
}

.answer-buttons.is-multi .answer-button[aria-pressed='true']::before {
  border: 2px solid var(--gold-deep);
  background-color: var(--gold-light);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%235c0f1d' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transform: scale(1.12);
}

.multi-submit {
  margin-top: 18px;
}

.multi-submit[hidden] {
  display: none;
}

.correct-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* ---------- Финал: занавес «Подводим итоги» на телефоне ---------- */

.view-ceremony {
  isolation: isolate;
}

.finale-curtain {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* Половины занавеса: бархатные складки с золотой бахромой внизу */
.finale-drape {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 51%;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.35), transparent 25%, transparent 75%, rgba(0, 0, 0, 0.45)),
    linear-gradient(var(--gold), var(--gold)) 0 100% / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, rgba(20, 2, 8, 0.55) 0, rgba(255, 190, 190, 0.12) 22px, rgba(20, 2, 8, 0.55) 44px),
    var(--velvet);
  transition: transform 1300ms var(--ease-curtain);
}

.finale-drape-left {
  left: 0;
  box-shadow: 14px 0 26px -8px rgba(0, 0, 0, 0.6);
}

.finale-drape-right {
  right: 0;
  box-shadow: -14px 0 26px -8px rgba(0, 0, 0, 0.6);
}

/* Два прожектора из верхних углов сходятся на занавесе */
.finale-beam {
  position: absolute;
  top: -10%;
  width: 90%;
  height: 120%;
  background: linear-gradient(180deg, rgba(255, 242, 210, 0.5), rgba(255, 236, 190, 0.12) 65%, transparent 92%);
  clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%);
  filter: blur(6px);
  mix-blend-mode: screen;
  transform-origin: 50% 0;
  transition: opacity 600ms ease;
}

.finale-beam-left {
  left: -40%;
  transform: rotate(-20deg);
  animation: finale-beam-left 6s ease-in-out infinite alternate;
}

.finale-beam-right {
  right: -40%;
  transform: rotate(20deg);
  animation: finale-beam-right 6s ease-in-out infinite alternate;
}

/* Награждение началось: занавес раздвигается, прожекторы гаснут — видна сцена с пьедесталом */
.view-ceremony[data-started='true'] .finale-drape-left {
  transform: translateX(-100%);
}

.view-ceremony[data-started='true'] .finale-drape-right {
  transform: translateX(100%);
}

.view-ceremony[data-started='true'] .finale-beam {
  opacity: 0;
}

.view-ceremony[data-started='false'] .drumroll {
  visibility: hidden;
}

.view-ceremony > h1 {
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.7);
}

@keyframes finale-beam-left {
  from { transform: rotate(-20deg); }
  to { transform: rotate(-12deg); }
}

@keyframes finale-beam-right {
  from { transform: rotate(20deg); }
  to { transform: rotate(12deg); }
}

@media (prefers-reduced-motion: reduce) {
  .finale-drape {
    transition: none;
  }

  .finale-beam {
    animation: none;
  }
}