/* PressStart2P = пиксельный шрифт серии. self-host woff2-сабсет (latin+cyrillic, 17КБ) */
@font-face {
  font-family: "PressStart2P";
  src: url("assets/pressstart2p.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* палитра + типографика серии «один день» — единый язык с питч-деком */
:root {
  --bg: #0b0c14;
  --bg2: #11131f;
  --ink: #ede9f0;
  --muted: #c2bed4;
  --accent: #ff7eb0;       /* pink — ведущий акцент дека */
  --pink-soft: #f6a8cf;
  --cold: #6f86c9;         /* холодный синий */
  --gold: #f3b765;         /* свет фонаря */
  --accent2: #9fe0c0;      /* мятный — найденное в игре */
  --line: rgba(255,255,255,.12);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "PressStart2P", monospace, sans-serif;   /* единый шрифт везде */
  overflow: hidden;
}
.hidden { display: none !important; }

.screen { position: fixed; inset: 0; }

/* veil — затемняющий градиент поверх пиксельных сцен-фонов (приём дека) */
.veil { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,12,20,.45) 0%, rgba(11,12,20,.82) 100%); }

/* ───── кнопки ───── */
.btn {
  display: inline-block; border: none; cursor: pointer;
  background: var(--accent); color: #0b0c14;
  font-family: "PressStart2P", sans-serif; font-weight: 600;
  font-size: 12px; padding: 14px 22px; border-radius: 12px; line-height: 1.4;
  text-decoration: none; text-align: center; letter-spacing: .02em;
  box-shadow: 0 6px 20px rgba(255,126,176,.25);
}
.btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--muted);
  box-shadow: none; }

/* ───── общие kicker / logo (Pixelify, язык дека) ───── */
/* Press Start 2P шире/жирнее обычного — размеры уменьшены под него */
.kicker { font-family: "PressStart2P", sans-serif; font-size: 11px; letter-spacing: .04em;
  color: var(--pink-soft); margin-bottom: 16px; text-shadow: 0 1px 8px rgba(0,0,0,.7); line-height: 1.5; }
.logo { font-family: "PressStart2P", sans-serif; font-weight: 700;
  font-size: clamp(1.5rem, 7vw, 2.4rem); line-height: 1.2; letter-spacing: .02em; }

/* ───── общая сцена-фон (teaser / game-menu / release-menu) ───── */
.scene-bg { position: absolute; inset: 0;
  background: url("assets/title_vselenaya.jpg") center/cover no-repeat; }
/* видео-фон (teaser + gate): постер виден мгновенно, видео догружается и подменяет */
.scene-video { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; background: var(--bg); }
.teaser-glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 62% 47%, rgba(243,183,101,.18), transparent 22%);
  animation: glowPulse 4s ease-in-out infinite; }
@keyframes glowPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

/* ───── TEASER / GATE ───── */
#gameMenu, #releaseMenu { display: flex; align-items: flex-end;
  justify-content: center; overflow: hidden; }
/* gate — контент по центру; teaser — группа сверху (по запросу) */
#gate { display: flex; align-items: center; justify-content: center; overflow: hidden; }
/* блок к верху (align-items=cross/vertical), по центру горизонтали (justify=main) */
#teaser { display: flex; align-items: flex-start; justify-content: center; overflow: hidden; }
/* teaser-inner на весь экран → обёртка кнопки по центру вертикали */
#teaser .teaser-inner { padding-top: 8vh; height: 100%; }
/* кнопка по центру: обёртка на всю ширину (flex justify-center = центр без translateX-багов),
   по вертикали — центр экрана через top 50% + translateY. */
#teaser .notify-wrap { position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%); display: flex; justify-content: center; z-index: 3; }
.gate-hint { color: var(--muted); font-size: 8px; margin-top: 18px; line-height: 1.8;
  font-family: "PressStart2P", sans-serif; letter-spacing: .02em;
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
  max-width: 240px; margin-left: auto; margin-right: auto;
  white-space: normal; overflow-wrap: break-word; }
.menu-inner { position: relative; z-index: 2; text-align: center; padding: 0 24px 12vh;
  width: 100%; max-width: 420px; }
.teaser-inner { position: relative; z-index: 2; text-align: center; padding: 0 24px;
  width: 100%; max-width: 420px; }
/* сабтайтл вплотную к счётчику (одна группа). Press Start 2P широкий → мельче + перенос */
.teaser-sub { color: var(--ink); margin: 0 0 18px; font-size: 9px; line-height: 1.6;
  letter-spacing: .02em; white-space: nowrap; text-shadow: 0 1px 10px rgba(0,0,0,.7); }
/* анимированное многоточие после «расширяется»: точки появляются 1→2→3 циклично.
   width-резерв, чтобы текст не прыгал при смене числа точек. */
.dots { display: inline-block; width: 2.4em; text-align: left; }
.dots::after { content: ""; animation: dots 1.8s steps(1) infinite; }
@keyframes dots {
  0%   { content: ""; }
  25%  { content: "."; }
  50%  { content: ".."; }
  75%  { content: "..."; }
  100% { content: ""; }
}
.notify-done { color: var(--accent2); margin-top: 16px; font-size: 10px; line-height: 1.6;
  font-family: "PressStart2P", sans-serif; }
/* мини-иконка-медальон в кнопке/подтверждении (галактика, зажигалка) */
.btn-ico { width: 20px; height: 20px; border-radius: 50%; object-fit: cover;
  vertical-align: -5px; margin-right: 8px; }

/* дождь: вертикальные капли, app.js наполняет */
.rain { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.drop { position: absolute; top: -22px; width: 1.5px;
  background: linear-gradient(transparent, rgba(174,194,224,.9));
  animation: rainFall linear infinite; }
@keyframes rainFall { to { transform: translateY(112vh); } }

/* countdown — главный элемент тизера. плашка-подложка = читаемость на любом кадре фона */
.countdown { display: inline-flex; gap: 14px; justify-content: center; margin: 0 0 40px;
  padding: 16px 18px; border-radius: 16px; background: rgba(11,12,20,.55);
  border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(8px);
  box-shadow: 0 8px 28px rgba(0,0,0,.4); }
.cd-cell { display: flex; flex-direction: column; align-items: center; }
.cd-cell b { font-family: "PressStart2P", sans-serif; font-size: clamp(22px, 7vw, 30px);
  line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.cd-cell span { font-size: 10px; color: var(--pink-soft); letter-spacing: .06em;
  margin-top: 11px; text-transform: uppercase; text-shadow: 0 1px 4px rgba(0,0,0,.8); }

/* анимация подписки: пульс колокольчика */
.notify-btn { animation: bellPulse 2.4s ease-in-out infinite; }
@keyframes bellPulse {
  0%,100% { box-shadow: 0 6px 20px rgba(255,126,176,.25); transform: translateY(0); }
  50% { box-shadow: 0 8px 30px rgba(255,126,176,.5); transform: translateY(-2px); }
}

/* большие меню-кнопки (фулл-ширина) */
.btn.big { display: block; width: 100%; max-width: 340px; margin: 10px auto 0;
  font-size: 13px; padding: 16px; }
.back-btn { margin-top: 8px; }

/* кнопки тизера/gate — стеклянные, ночная палитра (не кислотный розовый), компактнее */
/* кнопки тизера/gate — розовый акцент (референс) с лёгкой прозрачностью, мягкие тени */
#gate .btn, #teaser .btn {
  background: rgba(255,126,176,.8); color: #0b0c14;
  border: none; box-shadow: 0 4px 16px rgba(255,126,176,.28);
  font-size: 12px; padding: 13px 24px; text-shadow: none;
}
#gate .btn.big, #teaser .btn.big { max-width: 290px; padding: 15px; font-size: 12px; }
/* кнопка «уведомить» — компактная, ровно по центру */
.notify-btn { padding: 12px 26px; }
/* мягкий пульс «уведомить» без розового свечения */
.notify-btn { animation: notifyPulse 2.8s ease-in-out infinite; }
@keyframes notifyPulse {
  0%,100% { transform: translateY(0); box-shadow: 0 4px 16px rgba(255,126,176,.28); }
  50% { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255,126,176,.5); }
}

/* ───── GAME ───── */
.phaser-host { position: absolute; inset: 0; }
.hud-top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; background: linear-gradient(var(--bg), transparent);
  font-size: 15px;
}
.hud-timer { font-family: "PressStart2P", sans-serif; font-variant-numeric: tabular-nums;
  color: var(--accent); font-weight: 600; }
.hud-back { border: none; cursor: pointer; background: rgba(11,12,20,.6);
  color: var(--ink); font-size: 20px; line-height: 1; width: 38px; height: 38px;
  border-radius: 10px; backdrop-filter: blur(4px); }
.hud-silhouettes {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 5;
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  padding: 14px; background: linear-gradient(transparent, var(--bg));
}
.sil { width: 34px; height: 34px; border-radius: 7px; opacity: 0.85;
  border: 2px solid transparent; transition: all .2s; }
.sil.done { opacity: 0.15; border-color: var(--accent2); }

/* ───── REVEAL ───── */
.overlay { position: fixed; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 8, 18, 0.92); }
.reveal-card { text-align: center; padding: 30px; }
.reveal-small { color: var(--muted); font-size: 14px; }
.reveal-big { font-size: 28px; font-weight: 700; color: var(--accent); margin: 16px 0;
  font-family: "PressStart2P", sans-serif; line-height: 1.3; }
.reveal-time { color: var(--ink); margin-bottom: 24px; }

/* ───── RELEASE ───── */
#release { display: block; overflow-y: auto;
  background: radial-gradient(120% 60% at 70% 0%, #2a2440 0%, var(--bg) 55%); }
.release-inner { text-align: center; padding: 28px 22px 40px; width: 100%; max-width: 440px; margin: 0 auto; }

/* обложка */
.cover { width: 100%; max-width: 320px; aspect-ratio: 1; margin: 0 auto 18px;
  border-radius: 16px; overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.55);
  background: var(--bg2); }
.cover-img { width: 100%; height: 100%; object-fit: cover;
  image-rendering: pixelated; }   /* пиксель-кадр без сглаживания */
.release-title { font-family: "PressStart2P", sans-serif; font-size: 18px;
  font-weight: 700; letter-spacing: 1px; line-height: 1.3; }
.release-artist { font-family: "PressStart2P", sans-serif; color: var(--cold);
  margin: 4px 0 22px; }

/* плеер-бар */
.player { display: flex; align-items: center; gap: 14px; margin: 0 auto 30px;
  max-width: 320px; }
.play-btn { flex: none; width: 52px; height: 52px; border-radius: 50%; border: none;
  background: var(--accent); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.play-btn svg { width: 24px; height: 24px; fill: #fff; }
.player-body { flex: 1; }
.progress { height: 6px; border-radius: 3px; background: var(--bg2); cursor: pointer; overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: var(--accent); border-radius: 3px; }
.times { display: flex; justify-content: space-between; margin-top: 6px;
  font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* площадки */
.platforms-title { font-family: "PressStart2P", sans-serif; color: var(--cold);
  font-size: 14px; text-transform: lowercase; letter-spacing: .1em; margin-bottom: 12px; }
.platforms { display: flex; flex-direction: column; gap: 8px; max-width: 320px;
  margin: 0 auto 30px; }
.platform { display: block; padding: 13px 16px; border-radius: 12px; background: var(--bg2);
  color: var(--ink); text-decoration: none; font-size: 15px; transition: background .15s; }
.platform:active { background: #2a2348; }

.board { text-align: left; margin: 0 auto 24px; max-width: 320px; }
.board-title { font-family: "PressStart2P", sans-serif; color: var(--cold);
  font-size: 14px; text-transform: lowercase; letter-spacing: .1em; margin-bottom: 10px; }
.board-list { list-style: none; counter-reset: r; }
.board-list li { counter-increment: r; display: flex; justify-content: space-between;
  padding: 9px 12px; border-radius: 10px; background: var(--bg2); margin-bottom: 6px; }
.board-list li::before { content: counter(r); color: var(--accent); font-weight: 700;
  margin-right: 10px; }
.board-list li b { font-variant-numeric: tabular-nums; }
.board-list li span { flex: 1; }
.board-list .muted { color: var(--muted); justify-content: center; }
.board-list .muted::before { content: ''; margin: 0; }