* { box-sizing: border-box; }

/* Резиновая разметка: базовый дизайн 2560x1440, размеры масштабируются
   через clamp() под любой экран; отдельный брейкпоинт — телефоны. */
@property --ladder-w {
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}

:root {
  --ladder-w: 0px;
  --ladder-full: clamp(180px, 11.7vw, 300px);
}

body {
  margin: 0;
  background: #06071c;
  overflow: hidden;
  font-family: 'Manrope', sans-serif;
  color: #eef0ff;
  transition: --ladder-w 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

body.show-ladder {
  --ladder-w: var(--ladder-full);
}

.hidden { display: none !important; }

.stage {
  position: relative;
  width: 100vw;
  /* высота видимой области: vh/dvh на телефонах и встроенных браузерах врут,
     поэтому скрипт измеряет её сам и пишет в --app-h (см. script.js) */
  height: 100vh;
  height: 100dvh;
  height: var(--app-h, 100dvh);
  display: flex;
  overflow: hidden;
}

.stage-bg {
  position: absolute;
  inset: 0;
  /* centered on the play area: the ladder panel is excluded */
  background: radial-gradient(2000px 1100px at calc(50% - var(--ladder-w) / 2) 115%, #1b2a7a 0%, #0d1245 42%, #06071c 78%), #06071c;
}

.rays-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.rays {
  position: absolute;
  top: 50%;
  left: calc(50% - var(--ladder-w) / 2);
  width: 200vw;
  height: 200vw;
  margin-top: -100vw;
  margin-left: -100vw;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(90,110,255,0.07) 12deg, transparent 24deg,
    transparent 40deg, rgba(150,90,255,0.06) 52deg, transparent 64deg,
    transparent 90deg, rgba(90,110,255,0.07) 102deg, transparent 114deg,
    transparent 150deg, rgba(150,90,255,0.06) 162deg, transparent 174deg,
    transparent 210deg, rgba(90,110,255,0.07) 222deg, transparent 234deg,
    transparent 270deg, rgba(150,90,255,0.06) 282deg, transparent 294deg,
    transparent 330deg, rgba(90,110,255,0.07) 342deg, transparent 354deg);
  animation: glowSweep 90s linear infinite;
  pointer-events: none;
}

/* ---------- main stage ---------- */

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(10px, 1.6vw, 40px) clamp(12px, 2.3vw, 60px) clamp(16px, 2.7vw, 70px);
  position: relative;
  z-index: 1;
  min-width: 0;
  /* если вопрос с ответами не влезает по высоте — прокрутка, а не обрезка */
  overflow-y: auto;
}

/* lifelines: ниже панели настроек, чтобы не пересекались с ней */
.lifelines {
  position: absolute;
  top: clamp(80px, 4.7vw, 120px);
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: clamp(10px, 1.1vw, 28px);
  transition: transform 1s cubic-bezier(0.34, 1.3, 0.64, 1), opacity 0.8s ease;
}

body:not(.show-lifelines) .lifelines {
  transform: translateY(-260px);
  opacity: 0;
  pointer-events: none;
}

.lifeline {
  width: clamp(84px, 5.9vw, 150px);
  height: clamp(48px, 3.3vw, 84px);
  border-radius: 999px;
  border: 3px solid #8a97ff;
  background: linear-gradient(180deg, rgba(40,50,140,0.9), rgba(18,24,80,0.9));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Unbounded';
  font-size: clamp(15px, 1vw, 26px);
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #eef0ff;
  cursor: pointer;
  user-select: none;
}

/* иконки подсказок: белые (currentColor), крупные, центрируются флексом */
.lifeline svg {
  display: block;
  width: clamp(26px, 1.8vw, 46px);
  height: clamp(26px, 1.8vw, 46px);
  fill: currentColor;
}

.lifeline.used {
  border-color: #39418f;
  background: rgba(20,24,70,0.5);
  color: #4d5590;
  text-decoration: line-through;
}

/* lifeline result overlay: слева, в свободной зоне над вопросом */
.lifeline-view {
  position: absolute;
  top: clamp(140px, 8.6vw, 220px);
  left: clamp(12px, 3.1vw, 80px);
  z-index: 5;
  background: rgba(8,10,40,0.94);
  border: 3px solid #4d5bd4;
  border-radius: 26px;
  padding: clamp(16px, 1.4vw, 34px) clamp(18px, 1.8vw, 46px);
  min-width: min(620px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.3, 0.64, 1);
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.lifeline-view.hidden {
  display: block !important;
  opacity: 0;
  pointer-events: none;
  transform: translateY(40px) scale(0.95);
}

.ll-title {
  font-family: 'Unbounded';
  font-size: clamp(15px, 0.9vw, 22px);
  color: #9fb0ff;
  margin-bottom: clamp(12px, 0.8vw, 20px);
  text-align: center;
}

.poll-bars {
  display: flex;
  gap: clamp(16px, 1.3vw, 34px);
  align-items: flex-end;
  height: 220px;
  justify-content: center;
}

.poll-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.poll-pct { font-size: clamp(16px, 0.9vw, 22px); font-weight: 800; color: #ffd166; }

.poll-bar {
  width: clamp(40px, 2.7vw, 70px);
  background: linear-gradient(180deg, #8a97ff, #3d4ecf);
  border-radius: 8px 8px 0 0;
  transition: height 0.8s cubic-bezier(0.2,0.8,0.2,1);
}

.poll-letter { font-family: 'Unbounded'; font-size: clamp(15px, 0.8vw, 20px); font-weight: 800; }

.phone-seconds {
  font-family: 'Unbounded';
  font-size: clamp(48px, 3.9vw, 100px);
  font-weight: 800;
  text-align: center;
  color: #ffd166;
}

.phone-seconds.low { color: #ff7a7a; }

.phone-sub { text-align: center; font-size: clamp(15px, 0.9vw, 22px); color: #aab4e8; margin-top: 8px; }

/* question block: прижат к низу через margin-top:auto — в отличие от
   justify-content:flex-end это не ломает прокрутку, когда блок выше экрана */
.question-block {
  width: 100%;
  max-width: 1900px;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1vw, 26px);
  margin-top: auto;
  flex-shrink: 0;
}

.q-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}

.q-number { font-family: 'Unbounded'; font-size: clamp(13px, 0.95vw, 24px); color: #8fa0ff; letter-spacing: 1px; }
.q-prize { font-family: 'Unbounded'; font-size: clamp(13px, 0.95vw, 24px); color: #ffd166; letter-spacing: 1px; }

.question {
  border: 3px solid #4d5bd4;
  border-radius: clamp(26px, 3.5vw, 90px);
  padding: clamp(14px, 1.65vw, 42px) clamp(20px, 3vw, 76px);
  text-align: center;
  font-size: clamp(17px, 1.9vw, 48px);
  font-weight: 700;
  line-height: 1.35;
  background: linear-gradient(180deg, rgba(20,26,84,0.95), rgba(10,13,48,0.95));
  box-shadow: 0 0 60px rgba(60,80,220,0.25);
  min-height: clamp(40px, 2.7vw, 70px);
  text-wrap: pretty;
}

.question .dots { color: #5a68c8; }
.question .q-text { display: inline-block; animation: fadeIn 0.6s ease-out; }

.answers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 0.9vw, 22px) clamp(12px, 1.2vw, 30px);
  margin-top: 6px;
}

.answer {
  border: 3px solid #4d5bd4;
  border-radius: 999px;
  padding: clamp(10px, 1vw, 26px) clamp(16px, 1.7vw, 44px);
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.9vw, 22px);
  font-size: clamp(15px, 1.5vw, 38px);
  font-weight: 700;
  background: linear-gradient(180deg, rgba(20,26,84,0.95), rgba(10,13,48,0.95));
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, opacity 0.3s;
  min-height: clamp(48px, 4vw, 104px);
  user-select: none;
}

.answer .letter {
  font-family: 'Unbounded';
  font-weight: 800;
  color: #ffd166;
  font-size: clamp(13px, 1.25vw, 32px);
}

.answer .text { visibility: hidden; }
.answer.revealed .text { visibility: visible; animation: fadeIn 0.3s ease; }

.answer.killed { opacity: 0.25; cursor: default; }
.answer.killed .text { visibility: hidden; }

.answer.picked {
  border-color: #ff9900;
  background: linear-gradient(180deg, #8a5200, #5c3600);
}
.answer.picked .letter { color: #fff; }

.answer.suspense { animation: lockPulse 0.9s ease-in-out infinite; }

.answer.correct {
  border-color: #35d05a;
  animation: correctFlash 1.1s steps(1) 2 forwards;
}
.answer.correct .letter { color: #fff; }

.answer.wrong {
  border-color: #e04444;
  background: linear-gradient(180deg, #7a1414, #4d0d0d);
}
.answer.wrong .letter { color: #fff; }

/* ---------- prize ladder ---------- */

.ladder {
  width: var(--ladder-full);
  flex: none;
  margin-right: calc(var(--ladder-w) - var(--ladder-full));
  background: linear-gradient(180deg, rgba(10,13,50,0.92), rgba(6,8,30,0.95));
  border-left: 1px solid rgba(90,110,255,0.3);
  padding: clamp(10px, 0.9vw, 22px) clamp(8px, 0.7vw, 18px);
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  gap: 2px;
  z-index: 1;
  overflow-y: auto;
}

.ladder-row {
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.5vw, 12px);
  padding: clamp(4px, 0.3vw, 8px) clamp(8px, 0.55vw, 14px);
  border-radius: 10px;
}

.ladder-row .num {
  font-family: 'Unbounded';
  font-size: clamp(11px, 0.6vw, 16px);
  font-weight: 800;
  width: clamp(22px, 1.25vw, 32px);
  color: #5a68c8;
}

.ladder-row .amount { font-size: clamp(13px, 0.9vw, 23px); font-weight: 600; color: #aab4e8; letter-spacing: 0.4px; }

.ladder-row.passed .amount { color: #6d78b8; }

.ladder-row.current { animation: rowBlink 1.6s ease-in-out infinite; }
.ladder-row.current .num, .ladder-row.current .amount { color: #ffd166; font-weight: 800; }

/* ---------- overlays ---------- */

.overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
}

.celebration {
  gap: clamp(12px, 1vw, 26px);
  background: radial-gradient(1500px 1000px at 50% 40%, rgba(40,30,120,0.97), rgba(6,7,28,0.98));
}

.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

.confetti-piece { position: absolute; top: 0; border-radius: 2px; animation: confettiFall linear infinite; }

.cel-title {
  font-family: 'Unbounded';
  font-size: clamp(18px, 1.65vw, 42px);
  font-weight: 600;
  color: #9fb0ff;
  letter-spacing: 3px;
  animation: bigPop 0.6s ease;
}

.cel-sum {
  font-family: 'Unbounded';
  font-size: clamp(44px, 5.9vw, 150px);
  font-weight: 800;
  color: #ffd166;
  text-shadow: 0 0 90px rgba(255,209,102,0.5);
  animation: bigPop 0.8s cubic-bezier(0.2,1.4,0.3,1);
}

.cel-sub { font-size: clamp(15px, 1.35vw, 34px); color: #c8d0ff; animation: fadeIn 1s ease; }

.cel-btn {
  margin-top: clamp(18px, 1.6vw, 40px);
  font-family: 'Unbounded';
  font-size: clamp(16px, 1.1vw, 28px);
  font-weight: 800;
  padding: clamp(12px, 0.9vw, 22px) clamp(28px, 2.6vw, 66px);
  border-radius: 48px;
  background: linear-gradient(180deg, #ffd166, #e0a92f);
  color: #241a00;
  cursor: pointer;
  animation: fadeIn 1.4s ease;
  user-select: none;
}

.gameover { gap: clamp(12px, 0.9vw, 24px); background: rgba(6,7,28,0.96); }

.go-title {
  font-family: 'Unbounded';
  font-size: clamp(20px, 1.6vw, 40px);
  color: #ff7a7a;
  letter-spacing: 3px;
  animation: bigPop 0.5s ease;
}

.go-correct { font-size: clamp(15px, 1.25vw, 32px); color: #aab4e8; }
.go-correct b { color: #7ee08a; }

.go-sum {
  font-family: 'Unbounded';
  font-size: clamp(36px, 4.3vw, 110px);
  font-weight: 800;
  color: #ffd166;
  animation: bigPop 0.7s ease;
}

.go-sub { font-size: clamp(14px, 1.1vw, 28px); color: #8a94c8; }

.go-btn {
  margin-top: clamp(14px, 1.3vw, 34px);
  font-family: 'Unbounded';
  font-size: clamp(14px, 1vw, 26px);
  font-weight: 800;
  padding: clamp(12px, 0.8vw, 20px) clamp(20px, 2.3vw, 60px);
  border-radius: 44px;
  border: 3px solid #4d5bd4;
  color: #c8d0ff;
  cursor: pointer;
  user-select: none;
}

/* ---------- start screen ---------- */

.startscreen {
  gap: clamp(16px, 1.6vw, 40px);
  background: radial-gradient(1500px 1000px at 50% 40%, rgba(30,24,100,0.98), rgba(6,7,28,0.99));
  z-index: 50;
}

.start-title {
  font-family: 'Unbounded';
  font-size: clamp(24px, 2.7vw, 68px);
  font-weight: 800;
  color: #ffd166;
  letter-spacing: 2px;
  line-height: 1.25;
  text-shadow: 0 0 60px rgba(255,209,102,0.35);
  animation: bigPop 0.7s cubic-bezier(0.2,1.4,0.3,1);
}

.startscreen .cel-btn {
  font-size: clamp(20px, 1.4vw, 36px);
  padding: clamp(16px, 1.2vw, 28px) clamp(44px, 3.5vw, 90px);
}

/* спрятать все кнопки настроек, кроме шестерёнки */
.game-controls.collapsed > *:not(#btn-toggle-controls) { display: none !important; }
.game-controls.collapsed #btn-toggle-controls { opacity: 0.35; }

/* ---------- stats panel ---------- */

.stats-panel {
  position: absolute;
  left: clamp(8px, 0.9vw, 24px);
  top: clamp(64px, 3.6vw, 92px);
  z-index: 30;
  background: rgba(8,10,40,0.94);
  border: 2px solid #7ee08a;
  border-radius: 20px;
  padding: 18px 24px;
  min-width: min(280px, calc(100vw - 32px));
}

.stats-title {
  font-family: 'Unbounded';
  font-size: 16px;
  color: #7ee08a;
  letter-spacing: 1px;
  margin-bottom: 12px;
  text-align: center;
}

.stats-row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-size: 19px;
  color: #aab4e8;
  padding: 3px 0;
}

.stats-row b { color: #eef0ff; }
.stats-row.diff-easy b { color: #7ee08a; }
.stats-row.diff-medium b { color: #ffd166; }
.stats-row.diff-hard b { color: #ff7a7a; }

.stats-dlc {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(126,224,138,0.3);
  font-size: 17px;
  font-weight: 700;
  color: #ffd166;
  text-align: center;
}

.game-controls {
  position: absolute;
  left: clamp(8px, 0.9vw, 24px);
  top: clamp(8px, 0.9vw, 24px);
  z-index: 30;
  display: flex;
  gap: clamp(8px, 0.8vw, 20px);
  align-items: center;
  flex-wrap: wrap;
  max-width: calc(100vw - 32px);
}

.control-group {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(8,10,40,0.6);
  border: 2px solid #4d5bd4;
  border-radius: 20px;
  padding: 10px 16px;
}

.control-label {
  font-size: 20px;
  color: #aab4e8;
}

input[type=range] {
  -webkit-appearance: none;
  background: transparent;
  width: clamp(80px, 4.7vw, 120px);
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  background: #4d5bd4;
  border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: #ffd166;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -6px;
}

/* узкие окна: панель настроек переносится на две строки — подсказки ещё ниже */
@media (max-width: 900px) {
  .lifelines { top: 140px; }
  .lifeline-view { top: 210px; }
}

/* ---------- mobile ---------- */

@media (max-width: 640px) {
  .answers { grid-template-columns: 1fr; }

  /* лестница не сдвигает сцену, а выезжает поверх неё справа */
  body.show-ladder { --ladder-w: 0px; }

  .ladder {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin-right: 0;
    width: min(72vw, 300px);
    transform: translateX(105%);
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 15;
    border-left: 1px solid rgba(90,110,255,0.5);
    box-shadow: -12px 0 40px rgba(0,0,0,0.5);
  }

  body.show-ladder .ladder { transform: none; }

  .lifeline { border-width: 2px; }
  .question, .answer { border-width: 2px; }

  /* отступ под жестовую полосу/панель браузера */
  .main { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }

  /* подсказки ниже панели управления, чтобы не пересекались */
  .lifelines { top: 118px; }

  .lifeline-view {
    top: 190px;
    left: 12px;
    right: 12px;
    min-width: 0;
  }

  .poll-bars { gap: 14px; }

  .stats-panel { top: 120px; }
}

/* ---------- animations ---------- */

@keyframes lockPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,153,0,0.7); }
  50% { box-shadow: 0 0 50px 12px rgba(255,153,0,0.85); }
}

@keyframes correctFlash {
  0%, 20%, 40% { background: linear-gradient(180deg, #0a2a12, #0d3d18); }
  10%, 30%, 50%, 100% { background: linear-gradient(180deg, #0f8a2f, #0a5c1f); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes bigPop {
  0% { opacity: 0; transform: scale(0.6); }
  60% { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes confettiFall {
  0% { transform: translateY(-8vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(108vh) rotate(720deg); opacity: 0.6; }
}

@keyframes glowSweep {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes rowBlink {
  0%, 100% { background: rgba(255,209,102,0.18); }
  50% { background: rgba(255,209,102,0.42); }
}