/* Экран (ПК/ТВ): меню игры, отсчёт, рейтинг. Всё поверх полноэкранного canvas. */

:root {
  --night-1: #0b0e1f;
  --night-2: #1b1440;
  --night-3: #3a1d5c;
  --ink: #fff7e8;
  --ink-dim: #b9b3d6;
  --sun: #ffcc33;
  --sun-deep: #ff8a3d;
  --ground: #2b2150;
  --ground-top: #ff8a3d;
  --display: 'Russo One', 'Arial Black', system-ui, sans-serif;
  --text: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html, body { margin: 0; height: 100%; overflow: hidden; background: var(--night-1); color: var(--ink); font-family: var(--text); }
#stage, #game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
canvas { display: block; }
.hidden { display: none !important; }

/* ---------- Меню ---------- */
.menu { position: fixed; inset: 0; pointer-events: none; }
.menu > * { pointer-events: auto; }

.logo {
  position: absolute; top: 4vh; left: 0; right: 0; text-align: center;
  font-family: var(--display); font-size: clamp(48px, 9vw, 140px); line-height: .9; letter-spacing: .02em;
  color: var(--sun); text-shadow: 0 .06em 0 var(--sun-deep), 0 .12em 0 #7a2d4f, 0 .3em .5em rgba(0, 0, 0, .45);
  user-select: none;
}
.logo span { display: inline-block; animation: hop 2.4s cubic-bezier(.3, 0, .3, 1) infinite; }
.logo .space { width: .35em; }
@keyframes hop {
  0%, 60%, 100% { transform: translateY(0) scale(1, 1); }
  66% { transform: translateY(0) scale(1.08, .9); }
  75% { transform: translateY(-.18em) scale(.95, 1.06); }
  85% { transform: translateY(0) scale(1.06, .94); }
}

.carousel { position: absolute; left: 0; right: 0; top: 25vh; height: 38vh; perspective: 1200px; }
.poster {
  position: absolute; left: 50%; top: 0; width: min(46vh, 34vw); height: 100%; margin-left: calc(min(46vh, 34vw) / -2);
  border: none; padding: 0; border-radius: 28px; overflow: hidden; cursor: pointer; font: inherit; color: inherit;
  background: #140f2e; box-shadow: 0 30px 60px rgba(0, 0, 0, .5);
  transition: transform .45s cubic-bezier(.2, .9, .3, 1.2), opacity .35s, filter .35s;
}
.poster canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.poster .caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 24px 20px; text-align: left;
  background: linear-gradient(transparent, rgba(8, 6, 22, .92) 45%);
}
.poster .title { font-family: var(--display); font-size: clamp(26px, 3.4vh, 44px); display: block; }
.poster .hint { color: var(--ink-dim); font-size: clamp(14px, 1.9vh, 22px); display: block; margin-top: 4px; }
.poster.active { outline: 5px solid var(--sun); outline-offset: 6px; }

.arrow {
  position: absolute; top: calc(25vh + 19vh - 40px); width: 80px; height: 80px; border: none; border-radius: 50%;
  background: rgba(255, 255, 255, .08); color: var(--ink); font-size: 36px; cursor: pointer; transition: transform .2s, background .2s;
}
.arrow:hover, .arrow.pulse { background: var(--sun); color: #2a1a00; transform: scale(1.15); }
.arrow.left { left: calc(50% - min(46vh, 34vw) - 140px); }
.arrow.right { right: calc(50% - min(46vh, 34vw) - 140px); }

.call {
  position: absolute; left: 0; right: 0; bottom: 3vh; text-align: center; padding: 0 130px;
  font-family: var(--display); font-size: clamp(20px, 3vh, 36px); letter-spacing: .04em;
}
.call small { display: block; font-family: var(--text); font-size: .55em; color: var(--ink-dim); letter-spacing: 0; margin-top: 6px; }
.call .blink { animation: blink 1.2s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: .35; } }

/* Билет с кодом комнаты */
.ticket {
  border: none; font: inherit; cursor: pointer; padding: 0; text-align: left;
  position: fixed; right: 2.5vw; bottom: 3vh; display: flex; align-items: stretch;
  background: var(--ink); color: #1b1440; border-radius: 18px; box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
  transform: rotate(-2deg); transition: transform .3s;
}
.ticket:hover { transform: rotate(0) scale(1.03); }
.ticket .qr { width: clamp(96px, 13vh, 160px); aspect-ratio: 1; padding: 12px; }
.ticket .qr svg { width: 100%; height: 100%; display: block; }
.ticket .stub { padding: 14px 20px 14px 18px; border-left: 3px dashed #c9bfe6; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.ticket .label { font-size: 13px; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; color: #6b5fa0; }
.ticket .code { font-family: var(--display); font-size: clamp(34px, 5.5vh, 64px); letter-spacing: .12em; line-height: 1; }
.ticket .url { font-size: 13px; color: #6b5fa0; max-width: 200px; word-break: break-all; }
.ticket .dot { width: 10px; height: 10px; border-radius: 50%; background: #d33; display: inline-block; margin-right: 6px; }
.ticket .dot.on { background: #1aa35a; }

/* Маленький код комнаты во время игры: чтобы новые игроки знали, куда подключаться */
.chip {
  position: fixed; right: 16px; bottom: 14px; padding: 6px 12px; border-radius: 999px;
  background: rgba(10, 8, 30, .7); color: var(--ink-dim); font-size: 15px; font-weight: 700; letter-spacing: .06em;
}
.chip b { color: var(--sun); font-family: var(--display); letter-spacing: .12em; }

/* ---------- Отсчёт ---------- */
.countdown { position: fixed; inset: 0; display: grid; place-items: center; pointer-events: none; background: rgba(8, 6, 22, .45); }
.countdown span {
  font-family: var(--display); font-size: 38vh; line-height: 1; color: var(--sun);
  text-shadow: 0 .05em 0 var(--sun-deep), 0 .1em 0 #7a2d4f, 0 .25em .4em rgba(0, 0, 0, .5);
  animation: pop .8s cubic-bezier(.2, 1.4, .4, 1) both;
}
.countdown span.go { font-size: 22vh; }
@keyframes pop { 0% { transform: scale(2.2); opacity: 0; } 30% { transform: scale(1); opacity: 1; } 85% { opacity: 1; } 100% { transform: scale(.85); opacity: 0; } }

/* ---------- Рейтинг ---------- */
.results { position: fixed; inset: 0; pointer-events: none; }
.results h2 {
  position: absolute; left: 0; right: 0; top: 6vh; margin: 0; text-align: center;
  font-family: var(--display); font-weight: 400; font-size: clamp(36px, 8vh, 96px); color: var(--sun);
  text-shadow: 0 .05em 0 var(--sun-deep), 0 .1em 0 #7a2d4f;
}
/* Пьедестал стоит на земле сцены (она на 80% высоты). */
.podium { position: absolute; left: 0; right: 0; bottom: 20vh; display: flex; align-items: flex-end; justify-content: center; gap: 1.2vw; }
.step { display: flex; flex-direction: column; align-items: center; width: clamp(150px, 17vw, 260px); animation: rise .7s cubic-bezier(.2, 1.2, .4, 1) both; }
.step:nth-child(1) { animation-delay: .4s; }
.step:nth-child(2) { animation-delay: .1s; }
.step:nth-child(3) { animation-delay: .7s; }
@keyframes rise { from { transform: translateY(60vh); } }
.step canvas.hero { width: 100%; height: 17vh; display: block; }
.step .block {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: .4vh; padding-top: 1.4vh;
  border-radius: 12px 12px 0 0; background: linear-gradient(#5b3fa3, #2b2150);
  box-shadow: inset 0 5px 0 rgba(255, 255, 255, .18), 0 20px 40px rgba(0, 0, 0, .35);
}
.step .place { font-family: var(--display); font-size: clamp(34px, 6vh, 80px); line-height: 1; color: rgba(255, 255, 255, .92); }
.step .name { font-family: var(--display); font-size: clamp(16px, 2.3vh, 28px); max-width: 92%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step .score { font-size: clamp(13px, 1.8vh, 22px); font-weight: 800; opacity: .8; }
.step.p1 .block { height: 26vh; background: linear-gradient(var(--sun), var(--sun-deep)); color: #4a2200; }
.step.p1 .place { color: #4a2200; }
.step.p2 .block { height: 19vh; }
.step.p3 .block { height: 14vh; background: linear-gradient(#4a3488, #241b45); }
.rest {
  position: absolute; left: 0; right: 0; bottom: 11vh; list-style: none; margin: 0; padding: 0 140px;
  display: flex; gap: 8px 28px; flex-wrap: wrap; justify-content: center; font-size: clamp(15px, 2vh, 24px); color: var(--ink-dim);
}
.rest b { color: var(--ink); }
.results .call { position: absolute; padding: 0 140px; }

/* ---------- Лобби ---------- */
.lobby { position: fixed; inset: 0; pointer-events: none; }
.lobby-poster {
  position: absolute; left: 8vw; top: 9vh; width: min(52vh, 40vw); height: min(52vh, 40vw);
  border-radius: 28px; box-shadow: 0 30px 60px rgba(0, 0, 0, .5); outline: 5px solid var(--sun); outline-offset: 6px;
}
.lobby-info { position: absolute; left: calc(8vw + min(52vh, 40vw) + 6vw); right: 6vw; top: 11vh; }
.lobby-kicker { font-size: clamp(13px, 1.6vh, 18px); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim); }
.lobby h2 {
  margin: .5vh 0 1.5vh; font-family: var(--display); font-weight: 400; font-size: clamp(44px, 9vh, 120px); line-height: 1;
  color: var(--sun); text-shadow: 0 .05em 0 var(--sun-deep), 0 .1em 0 #7a2d4f;
}
.lobby p { margin: 0 0 4vh; font-size: clamp(18px, 2.8vh, 34px); max-width: 26em; }
.controls { list-style: none; margin: 1vh 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.controls li { padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-weight: 800; font-size: clamp(15px, 2vh, 24px); }


/* ---------- Музыка и звук ---------- */
.audio-btns { position: fixed; left: 20px; bottom: 20px; display: flex; gap: 10px; z-index: 5; }
.audio-btns.faded { display: none; }
.audio-btn {
  width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer; font-size: 22px; color: var(--ink);
  background: rgba(255, 255, 255, .1); position: relative; transition: background .2s, transform .15s;
}
.audio-btn:hover { background: rgba(255, 255, 255, .2); transform: scale(1.08); }
.audio-btn.off { color: var(--ink-dim); background: rgba(255, 255, 255, .04); }
.audio-btn.off::after { content: ''; position: absolute; left: 12px; right: 12px; top: 50%; height: 3px; border-radius: 2px; background: #ff6b6b; transform: rotate(-40deg); }

/* ---------- Пауза ---------- */
.pause { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(8, 6, 22, .72); backdrop-filter: blur(6px); z-index: 10; }
.pause-box { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.6vh; }
.pause h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(56px, 12vh, 150px); color: var(--sun); text-shadow: 0 .05em 0 var(--sun-deep), 0 .1em 0 #7a2d4f; }
.pause p { margin: 0 0 2vh; font-size: clamp(18px, 2.6vh, 30px); color: var(--ink-dim); }
.pause small { color: var(--ink-dim); font-size: clamp(13px, 1.7vh, 18px); margin-top: 1vh; }
.pause-items { display: flex; flex-direction: column; gap: 1.4vh; min-width: min(440px, 80vw); }
.pause-items button {
  font-family: var(--display); font-size: clamp(22px, 3.4vh, 38px); padding: 1.4vh 2vw; border-radius: 18px; cursor: pointer;
  border: 3px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .06); color: var(--ink); transition: transform .15s;
}
.pause-items button.on, .pause-items button:hover { background: linear-gradient(var(--sun), var(--sun-deep)); color: #3a1800; border-color: transparent; transform: scale(1.04); }
.pause-count { font-family: var(--display); font-size: 38vh; color: var(--sun); text-shadow: 0 .05em 0 var(--sun-deep), 0 .1em 0 #7a2d4f; animation: pop .7s cubic-bezier(.2, 1.4, .4, 1) both; }

/* Назад в карусель игр (лобби и рейтинг) */
.back-btn {
  position: fixed; left: 20px; top: 20px; z-index: 6; cursor: pointer;
  padding: 12px 22px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, .18);
  background: rgba(10, 8, 30, .55); color: var(--ink); backdrop-filter: blur(4px);
  font-family: var(--display); font-size: clamp(16px, 2.2vh, 24px); letter-spacing: .03em;
  transition: background .2s, transform .15s, color .2s;
}
.back-btn:hover, .back-btn:focus-visible { background: var(--sun); color: #3a1800; border-color: transparent; transform: scale(1.05); outline: none; }