/* 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); }
/* iOS в Low Power Mode блокирует автоплей и рисует поверх видео свою кнопку play.
   прячем её — тогда при заблокированном автоплее остаётся статичный постер (первый кадр), без артефакта. */
.scene-video::-webkit-media-controls,
.scene-video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}
.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; }

/* ───── экран входа: вариант A (погружение) ───── */
/* комната фоном (а не title), затемнение градиентом только снизу — верх сцены чистый */
#gameMenu .scene-bg { background-image: url("assets/title.jpg"); }
/* затемнение только низ — звезда/туманность сверху остаются яркими */
#gameMenu .veil { background: linear-gradient(180deg,
  transparent 45%, rgba(11,12,20,.55) 70%, rgba(11,12,20,.97) 100%); }
#gameMenu .menu-inner { padding-bottom: 7vh; }
#gameMenu .kicker { font-size: 8px; letter-spacing: .18em; margin-bottom: 18px; }
#gameMenu .logo { font-size: clamp(1.05rem, 5.2vw, 1.5rem); line-height: 1.5; color: var(--ink);
  text-shadow: 0 2px 16px rgba(0,0,0,.85); margin-bottom: 16px; }
/* акцент даты в подзаголовке меню: мятный + пульс-свечение → взгляд цепляет ключевой смысл */
.hl-date { color: var(--accent2); white-space: nowrap;
  animation: dateGlow 1.8s ease-in-out infinite; }
@keyframes dateGlow {
  0%,100% { opacity: .85; text-shadow: 0 0 8px rgba(159,224,192,.4); }
  50%     { opacity: 1;   text-shadow: 0 0 16px rgba(159,224,192,.95); } }
/* подзаголовок — читаемым системным шрифтом (длинная фраза), не аркадным */
#gameMenu .menu-sub { font-family: system-ui, -apple-system, sans-serif; font-size: 14px;
  color: var(--muted); line-height: 1.5; margin: 0 auto 30px; max-width: 300px; }
#gameMenu .btn.big { width: 100%; max-width: 360px; padding: 18px; font-size: 15px;
  box-shadow: 0 8px 28px rgba(255,126,176,.38); }
/* «лидерборд» — вторичная кнопка под «играть»: та же ширина, по центру, с зазором (не слипается) */
#gameMenu #menuBoardBtn { display: block; width: 100%; max-width: 360px; margin: 14px auto 0;
  padding: 15px; font-size: 13px; }
.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 (леттербокс: верх · картинка · низ) ───── */
#game { display: flex; flex-direction: column; background: #07080e; }
/* картинка-комната в средней полосе. размер холста задаёт сам phaser (Scale.FIT +
   autoCenter) — НЕ форсим width/height у canvas, иначе FIT перебивается и картинка тянется.
   пиксельная рамка: холодный бордюр + L-уголки — поля леттербокса = часть «корпуса». */
.phaser-host { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden;
  border: 2px solid rgba(111,134,201,.45);
  box-shadow: inset 0 0 0 4px rgba(111,134,201,.10); }
/* CRT-слой + 4 угловые скобки поверх сцены. pointer-events:none → клики проходят сквозь */
.scene-fx { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.scene-fx::before { content: ""; position: absolute; inset: 0;     /* сканлайны */
  background: repeating-linear-gradient(to bottom,
    transparent 0, transparent 2px, rgba(0,0,0,.16) 2px, rgba(0,0,0,.16) 3px); }
.corner { position: absolute; width: 16px; height: 16px; }
.corner.tl { top: 5px; left: 5px;  border-top: 2px solid var(--accent); border-left: 2px solid var(--accent); }
.corner.tr { top: 5px; right: 5px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); }
.corner.bl { bottom: 5px; left: 5px;  border-bottom: 2px solid var(--accent); border-left: 2px solid var(--accent); }
.corner.br { bottom: 5px; right: 5px; border-bottom: 2px solid var(--accent); border-right: 2px solid var(--accent); }

/* калибровка: поле готовых координат (моноширинный, читаемый, скролл) */
.calib-out { width: 100%; box-sizing: border-box; margin: 10px 0; padding: 10px;
  font-family: ui-monospace, Menlo, monospace; font-size: 11px; line-height: 1.5;
  color: var(--ink); background: #0e1020; border: 2px solid var(--cold); resize: none; }

/* mute-кнопка фоновой музыки: сквозная, верх-право. app.js снимает .hidden только на игровых экранах.
   z 12 > reveal(10) → можно мьютить и на экране финиша; под pixel-wipe(20) прячется на миг перехода. */
.mute-btn { position: fixed; z-index: 12; top: max(10px, env(safe-area-inset-top)); right: 12px;
  width: 34px; height: 34px; padding: 6px; border: none; border-radius: 9px; cursor: pointer;
  background: rgba(11,12,20,.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; }
.mute-btn svg { width: 100%; height: 100%; fill: var(--ink); display: block; }
.mute-btn .ico-off { display: none; }
.mute-btn.muted svg.ico-on { display: none; }
.mute-btn.muted .ico-off { display: block; }
.mute-btn.muted { opacity: .7; }
/* на игровом экране диалог сверху и длинный → отводим текст от кнопки в углу */
#game .dialog { padding-right: 42px; }

/* верхняя полоса: назад · таймер · прогресс */
.game-top { flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top));
  background: #0b0c14; }

/* эксперимент: верх↔низ местами — диалог наверх, управление (таймер/пипсы/назад) вниз.
   #game = flex-column, поэтому достаточно order + перенос safe-area на нужный край. */
.game-bottom { order: 1; padding-top: max(14px, env(safe-area-inset-top)); }
.phaser-host { order: 2; }
/* HUD-полоса той же min-height что и диалог → рамка-картинка симметрична по вертикали */
.game-top { order: 3; min-height: 104px; justify-content: flex-start;
  padding-top: 14px; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
.game-back { flex: 0 0 auto; border: none; cursor: pointer;
  background: rgba(255,255,255,.06); color: var(--ink);
  font-size: 18px; line-height: 1; width: 34px; height: 34px; border-radius: 9px; }
.game-timer { font-family: "PressStart2P", sans-serif; font-variant-numeric: tabular-nums;
  color: var(--accent); font-size: 13px; }
/* лоток найденных: миниатюры предметов вместо точек, справа (margin-left:auto).
   found = живой кроп из комнаты + мятная рамка со свечением; не найдено = тёмный сокет.
   нагляднее «N из M» — видно ЧТО собрал. */
.pips { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.slot { width: 34px; height: 34px; box-sizing: border-box; border-radius: 6px;
  border: 2px solid #2a2f45; background: #0e1020;
  background-repeat: no-repeat; image-rendering: pixelated; }
.slot.on { border-color: var(--accent2); box-shadow: 0 0 8px rgba(159,224,192,.55); }
.slot.just.landed { animation: slotPulse .45s ease-out; }   /* вспышка в момент прилёта искры */
@keyframes slotPulse { 0%{transform:scale(1)}
  45%{transform:scale(1.4); box-shadow:0 0 16px var(--accent2)} 100%{transform:scale(1)} }

/* искра: летит от найденного предмета к лотку, по прилёту ячейка вспыхивает */
.spark { position: fixed; z-index: 9; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  background: var(--accent2); border-radius: 50%; box-shadow: 0 0 12px var(--accent2);
  pointer-events: none; transition: transform .5s cubic-bezier(.5,0,.25,1), opacity .5s ease-in; }

/* ───────── ambient «живая комната» (оверлеи поверх сцены, тапы проходят) ───────── */
.ambient { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.amb-vignette { position: absolute; inset: 0;
  box-shadow: inset 0 0 130px 46px rgba(0,0,0,.55);
  animation: vigBreath 7s ease-in-out infinite; }               /* «дыхание» кадра */
@keyframes vigBreath { 0%,100% { opacity: .68; } 50% { opacity: 1; } }
.amb-lamp { position: absolute; left: 50%; top: 40%; width: 66%; height: 55%;
  transform: translate(-50%,-50%); mix-blend-mode: screen;      /* тёплый свет лампы, центр-верх */
  background: radial-gradient(ellipse at center, rgba(255,198,120,.17), rgba(255,198,120,0) 62%);
  animation: lampFlick 5s ease-in-out infinite; }
@keyframes lampFlick { 0%,100%{opacity:.82} 42%{opacity:1} 48%{opacity:.72} 54%{opacity:.94} }  /* мягкий фликер, не диско */
.amb-dust { position: absolute; inset: 0; }
.mote { position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: rgba(255,240,214,.5); box-shadow: 0 0 4px rgba(255,240,214,.4);
  animation: drift linear infinite; }                           /* пылинки в свете */
@keyframes drift {
  0%   { transform: translate(0,0);        opacity: 0; }
  12%  { opacity: .55; } 88% { opacity: .55; }
  100% { transform: translate(14px,-46px); opacity: 0; } }

/* бурст искр в точке находки (джус на действии) */
.burst { position: fixed; z-index: 9; width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%; background: var(--accent2); box-shadow: 0 0 8px var(--accent2);
  pointer-events: none; transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .5s ease-out; }

/* нижняя полоса = диалог-окно (JRPG): загадка — голос комнаты (без аватара),
   коммент — лизер говорит (аватар + подпись «ЛИЗЕР»). текст печатается. */
/* ФИКСИРОВАННАЯ высота полосы: не растёт под текст → средняя (phaser) = константа, картинка
   не дёргается на переходе загадка↔коммент. длинный текст скроллит внутри бокса. */
.game-bottom { flex: 0 0 auto; height: 22vh; min-height: 128px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 14px 16px; padding-bottom: max(14px, env(safe-area-inset-bottom));
  background: #0b0c14; }
/* .dialog = контейнер двух отдельных плашек (аватар + текст), без своей рамки */
.dialog { position: relative; display: flex; gap: 10px; align-items: flex-start;
  width: 100%; max-width: 360px; }
/* текст-плашка: своя рамка (цвет задаёт mode-* по спикеру) */
.dialog-text-box { flex: 1 1 auto; min-width: 0; padding: 12px 14px;
  background: #12141f; border: 2px solid var(--cold);
  box-shadow: 4px 4px 0 0 rgba(0,0,0,.35); }
.dialog-ava { flex: 0 0 auto; width: 32px; height: 32px; box-sizing: border-box;
  border: 2px solid var(--accent); }
.dialog-cat { image-rendering: pixelated; object-fit: cover; }   /* кот-проводник (коммент) */
.dialog-ava-q { display: flex; align-items: center; justify-content: center;  /* «?» (загадка) */
  font-family: "PressStart2P", sans-serif; font-size: 14px; color: var(--accent);
  background: #12141f; animation: qBlink 1.1s ease-in-out infinite; }  /* мигает = «тебе дают подсказку» */
@keyframes qBlink { 0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: .4; transform: scale(1.14); } }
.dialog-ava-q.hidden, .dialog-cat.hidden { display: none; }      /* .hidden бьёт display:flex */
.riddle-text { font-family: "PressStart2P", sans-serif; font-size: 10px;
  line-height: 1.9; color: var(--ink); text-align: left;
  max-height: calc(22vh - 48px); overflow-y: auto; }   /* влезает в фикс-полосу, длинный текст скроллит */
.riddle-text::after { content: "▮"; margin-left: 2px; color: var(--accent);
  animation: caretBlink 1s steps(1) infinite; }

/* цвет плашек по спикеру: загадка = синий (--cold), коммент кота = мятный (--accent2) */
.dialog.mode-riddle .dialog-ava-q,
.dialog.mode-riddle .dialog-text-box { border-color: var(--cold); }
.dialog.mode-riddle .dialog-ava-q,
.dialog.mode-riddle .riddle-text,
.dialog.mode-riddle .riddle-text::after { color: var(--cold); }
.dialog.mode-comment .dialog-cat,
.dialog.mode-comment .dialog-text-box { border-color: var(--accent2); }
.dialog.mode-comment .riddle-text,
.dialog.mode-comment .riddle-text::after { color: var(--accent2); }
/* коммент лизера появляется → плашка даёт мятную вспышку-свечение + мягко пульсирует =
   взгляд игрока притягивается к тексту. forwards → лёгкое свечение держится, пока читаешь. */
.dialog.mode-comment .dialog-text-box {
  animation: commentPop 1.4s ease-out both; }
@keyframes commentPop {
  0%   { box-shadow: 4px 4px 0 0 rgba(0,0,0,.35), 0 0 0 rgba(159,224,192,0); }
  18%  { box-shadow: 4px 4px 0 0 rgba(0,0,0,.35), 0 0 20px rgba(159,224,192,.95); }
  60%  { box-shadow: 4px 4px 0 0 rgba(0,0,0,.35), 0 0 8px rgba(159,224,192,.35); }
  80%  { box-shadow: 4px 4px 0 0 rgba(0,0,0,.35), 0 0 16px rgba(159,224,192,.7); }
  100% { box-shadow: 4px 4px 0 0 rgba(0,0,0,.35), 0 0 9px rgba(159,224,192,.4); } }

/* центр-кнопка «дальше» — по центру экрана после коммента, пульсирует */
.continue-btn { position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); z-index: 7;
  font-family: "PressStart2P", sans-serif; font-size: 11px;
  color: #0b0c14; background: var(--accent); border: none; cursor: pointer;
  padding: 14px 22px; box-shadow: 4px 4px 0 0 rgba(0,0,0,.45);
  animation: continuePulse 1.6s ease-in-out infinite; }
@keyframes continuePulse {
  0%,100% { transform: translate(-50%, -50%) scale(1); }
  50%     { transform: translate(-50%, -50%) scale(1.06); }
}
@keyframes caretBlink { 50% { opacity: 0; } }

/* ───── ПИКСЕЛЬ-ПЕРЕХОД (loading-мост заглавный→игра) ───── */
/* сетка блоков поверх всего; блоки заливаются/гаснут в рандомном порядке (per-block delay из JS) */
.pixel-wipe { position: fixed; inset: 0; z-index: 20; display: grid;
  pointer-events: auto; }                 /* active = блокирует тапы во время перехода */
.pixel-wipe.hidden { display: none; }
.pixel-wipe .px { background: var(--bg); opacity: 0; transition: opacity 200ms linear; }
.pixel-wipe.filled .px { opacity: 1; }
.pixel-wipe.instant .px { transition: none; }        /* мгновенное закрытие без анимации заливки */

/* ───── REVEAL (язык игры: рамка-корпус + уголки + сканлайны + палитра) ───── */
.overlay { position: fixed; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: radial-gradient(120% 80% at 50% 0%, rgba(22,24,42,.96) 0%, rgba(7,8,16,.97) 70%); }
/* карточка = «корпус»: острая холодная рамка + внутреннее свечение + жёсткая тень, без скруглений */
.reveal-card { position: relative; text-align: center; width: 100%; max-width: 340px;
  padding: 30px 24px; background: linear-gradient(180deg, #0d0f1c, #0a0b14);
  border: 2px solid var(--cold); box-sizing: border-box;
  display: flex; flex-direction: column; max-height: 100%;   /* влезает в экран: список топа скроллится внутри */
  box-shadow: inset 0 0 26px rgba(111,134,201,.10), 6px 6px 0 0 rgba(0,0,0,.5); }
.reveal-card::before { content: ""; position: absolute; inset: 0; pointer-events: none;  /* сканлайны как в игре */
  background: repeating-linear-gradient(to bottom,
    transparent 0, transparent 2px, rgba(0,0,0,.16) 2px, rgba(0,0,0,.16) 3px); }
.reveal-card > * { position: relative; z-index: 1; flex: 0 0 auto; }   /* контент поверх сканлайнов, не сжимается */
.reveal-card > .corner { position: absolute; z-index: 2; }   /* уголки — обратно absolute (> * их сбивает) */
.reveal-small { color: var(--cold); font-size: 10px; font-family: "PressStart2P", sans-serif;
  letter-spacing: .04em; }
.reveal-big { font-size: 24px; font-weight: 700; color: var(--accent); margin: 16px 0;
  font-family: "PressStart2P", sans-serif; line-height: 1.35; }
.reveal-time { color: var(--ink); font-size: 10px; font-family: "PressStart2P", sans-serif;
  line-height: 2; 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: var(--accent); color: #0b0c14; }

/* игра + лидерборд под стримингами (релиз первичен, они — артефакты сбоку) */
.release-actions { max-width: 320px; margin: 6px auto 0; display: flex; flex-direction: column; gap: 12px; }
.release-actions .btn { display: block; width: 100%; margin: 0; }
.release-actions .btn.big { font-size: 14px; padding: 15px; }

/* доска: растёт по остатку карточки, список скроллится внутри (топ-10 всегда доступен, кнопки не уезжают) */
.board { text-align: left; margin: 0 auto 22px; max-width: 320px; width: 100%;
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.board-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.board-title { flex: 0 0 auto; font-family: "PressStart2P", sans-serif; color: var(--cold);
  font-size: 10px; text-transform: lowercase; letter-spacing: .06em; margin-bottom: 10px; }
.board-list { list-style: none; counter-reset: r; }
/* строки = острые плашки как диалог/лоток (без скруглений), холодный контур */
.board-list li { counter-increment: r; display: flex; justify-content: space-between;
  align-items: center; padding: 9px 12px; background: #12141f;
  border: 1px solid rgba(111,134,201,.28); margin-bottom: 6px; font-size: 13px; }
.board-list li::before { content: counter(r); font-family: "PressStart2P", sans-serif;
  font-size: 9px; color: var(--accent); margin-right: 10px; }
.board-list li b { font-variant-numeric: tabular-nums; color: var(--accent2); }  /* время = мятный (как найденное) */
.board-list li span { flex: 1; }
.board-list .muted { color: var(--muted); justify-content: center; }
.board-list .muted::before { content: ''; margin: 0; }

/* кнопки слайда стопкой по центру */
#shareStoryBtn, #againBtn { display: block; width: 100%; max-width: 300px; margin: 0 auto; }
/* «поделиться в сторис» = вторичная, мятная (найденное), острая */
#shareStoryBtn { font-family: "PressStart2P", sans-serif; font-size: 10px;
  color: #0b0c14; background: var(--accent2); border: none; border-radius: 0; cursor: pointer;
  padding: 13px 18px; box-shadow: 4px 4px 0 0 rgba(0,0,0,.45); margin-bottom: 12px; }
/* «ещё раз» = кнопка в языке игры (острая, розовая, жёсткая тень), не скруглённый .btn */
#againBtn { font-family: "PressStart2P", sans-serif; font-size: 11px;
  color: #0b0c14; background: var(--accent); border: none; border-radius: 0; cursor: pointer;
  padding: 14px 22px; box-shadow: 4px 4px 0 0 rgba(0,0,0,.45); }

/* ═══════════ КАССЕТНИК («нарисована», фаза snippet) ═══════════
   фон и кассета — слои одного фотокадра; катушки, счётчик, шкала и лампа
   накладываются поверх и живут от механики ленты. */
#cassette{background:#0B0D10}
.cass-wrap{width:100%;max-width:440px;margin:0 auto;padding:14px 14px calc(22px + env(safe-area-inset-bottom));
           display:flex;flex-direction:column;gap:13px;align-items:center}
.cass-kicker{font-family:var(--mono,ui-monospace,monospace);font-size:10px;letter-spacing:.18em;
             text-transform:uppercase;color:#7E8B98;align-self:flex-start}

.deck{position:relative;width:100%;aspect-ratio:846/1185;border-radius:10px;overflow:hidden;
      touch-action:none;-webkit-user-select:none;user-select:none;
      -webkit-tap-highlight-color:transparent;box-shadow:0 6px 30px rgba(0,0,0,.55)}
.deck img.deck-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
                     display:block;pointer-events:none}

#cassGroup{position:absolute;left:5.91%;top:9.54%;width:86.17%;pointer-events:none;
           transform:translateY(-150%) scale(1.04);opacity:0;filter:brightness(1);
           transition:transform 1s cubic-bezier(.22,.78,.2,1),opacity .38s,filter .6s}
.deck img#cassImg{display:block;width:100%;height:auto}
.deck.inserting #cassGroup{transform:translateY(0) scale(1);opacity:1;filter:brightness(.82)}
.deck.loaded #cassGroup{opacity:1}
.deck.ejecting #cassGroup{opacity:1;filter:brightness(1.04) drop-shadow(0 16px 20px rgba(0,0,0,.7));
           transform:translateY(-31%) scale(1.015) rotate(-1.1deg);
           transition:transform .42s cubic-bezier(.24,-.35,.3,1),opacity .12s,filter .3s}
.deck.shake{animation:deckKick .34s ease-out}
@keyframes deckKick{0%{transform:translateY(0)}22%{transform:translateY(-3px)}
                    48%{transform:translateY(1.5px)}100%{transform:translateY(0)}}

/* катушки принадлежат кассете и едут вместе с ней */
#cassGroup img.deck-reel{position:absolute;display:block;pointer-events:none;
      height:auto;top:63.6%;transform:translate(-50%,-50%) rotate(0rad)}
/* вырезаны разными радиусами (левая с намоткой крупнее) — ширины тоже разные */
#reelL{left:30%;width:16.7%} #reelR{left:71.7%;width:16.7%}

/* этикетка: машинописная, едет вместе с кассетой */
#cassTag{position:absolute;left:7%;top:8%;width:86%;height:28%;
         display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2em;
         color:#1B1D20;pointer-events:none;transform:rotate(-.7deg)}
#cassTag b{font-family:"Courier New","Nimbus Mono PS",monospace;font-weight:700;
       font-size:clamp(16px,5.9vw,26px);line-height:1;letter-spacing:.005em;color:#15171A}
#cassTag i{font-family:"Courier New","Nimbus Mono PS",monospace;font-style:normal;
       font-weight:400;font-size:clamp(8px,2.8vw,12px);letter-spacing:.14em;color:#33383E}

/* под счётчиком и шкалой гасим фотографические сегменты, иначе наши плывут поверх рисунка */
.deck-mask{position:absolute;background:#07080A;border-radius:2px;pointer-events:none}
#maskCnt{left:7.3%;top:59.1%;width:27%;height:5%}
#maskMet{left:40.4%;top:58.8%;width:53.8%;height:5.5%}
#deckCnt{position:absolute;left:7.3%;top:59.1%;width:27%;height:5%;
       display:flex;align-items:center;justify-content:center;
       font-family:var(--mono,ui-monospace,monospace);font-size:clamp(13px,4.4vw,19px);
       color:#FF9A2E;letter-spacing:.04em;font-variant-numeric:tabular-nums;
       text-shadow:0 0 10px rgba(255,150,20,.6);pointer-events:none}
.deck-meter{position:absolute;left:40.8%;width:53%;height:1.85%;display:flex;gap:1.8%;
            pointer-events:none}
#meterL{top:59.4%} #meterR{top:62.1%}
.deck-meter i{flex:1;border-radius:1px;background:#3A2A18;transition:background .06s}
.deck-meter i.on{background:#FF9A2E}
.deck-meter i.hot{background:#3A1A16}
.deck-meter i.hot.on{background:#FF4A3D}
#deckLamp{position:absolute;left:94.3%;top:71.5%;width:2.1%;aspect-ratio:1;border-radius:50%;
       background:#3a1408;pointer-events:none;transition:.12s}
#deckLamp.on{background:#FF5C3A;box-shadow:0 0 14px 3px rgba(255,92,58,.7)}

.deck-hit{position:absolute;background:transparent;border:0;padding:0;cursor:pointer;
       touch-action:none;-webkit-tap-highlight-color:transparent;border-radius:8px}
.deck-hit::after{content:"";position:absolute;inset:0;border-radius:8px;
       background:rgba(255,154,46,0);transition:background .1s}
.deck-hit.lit::after{background:rgba(255,154,46,.22);box-shadow:inset 0 0 0 1px rgba(255,154,46,.55)}
#hitEject{left:4.8%;top:73.4%;width:24.2%;height:12.2%}
#hitRew{left:37.7%;top:73.4%;width:24.2%;height:12.2%}
#hitPlay{left:70.6%;top:73.4%;width:24.1%;height:12.2%}

/* подсказка жеста: без неё человек не поймёт, что клавишу надо ДЕРЖАТЬ */
#deckRing{position:absolute;left:70.6%;top:73.4%;width:24.1%;height:12.2%;
       border:2px solid #FF9A2E;border-radius:9px;pointer-events:none;opacity:0;transition:opacity .45s}
.deck.hint #deckRing{opacity:1;animation:deckPulse 1.8s ease-out infinite}
@keyframes deckPulse{0%{transform:scale(1);opacity:.95}70%{transform:scale(1.13);opacity:0}100%{opacity:0}}
#deckHint{position:absolute;left:59%;top:87.2%;width:36%;
       display:flex;align-items:center;justify-content:center;gap:.32em;
       font-family:var(--mono,ui-monospace,monospace);font-size:clamp(9px,2.6vw,11px);
       letter-spacing:.01em;line-height:1;color:#FF9A2E;pointer-events:none;opacity:0;
       transition:opacity .45s}
#deckHint span{font-size:1.15em;animation:deckNudge 1.6s ease-in-out infinite}
@keyframes deckNudge{0%,100%{transform:translateY(.5px)}50%{transform:translateY(-2px)}}
.deck.hint #deckHint{opacity:.92}

.cass-after[hidden]{display:none}
.cass-after{width:100%;border:1px solid #232A31;border-radius:8px;padding:13px;
            display:flex;flex-direction:column;gap:9px;background:#11151A}
.cass-after p{margin:0;font-size:13px;color:#7E8B98;line-height:1.5;text-align:center;
       font-family:"Courier New","Nimbus Mono PS",monospace}

/* клавиши блока «после» — одеты под аппарат, а не под пиксельный ui вселенной */
.deck-key{appearance:none;display:block;width:100%;box-sizing:border-box;cursor:pointer;
       font-family:"Courier New","Nimbus Mono PS",monospace;font-size:14px;text-align:center;
       text-decoration:none;padding:11px 10px;border-radius:6px;transition:.12s;
       border:1px solid #2C343C;background:#161B21;color:#8E9BA8}
.deck-key:active{background:#1D242B;transform:translateY(1px)}
.deck-key--main{border-color:#7A4A18;background:linear-gradient(#22190F,#181209);
       color:#FF9A2E;padding:10px;box-shadow:0 0 0 1px rgba(255,154,46,.09)}
.deck-key--main:active{background:#2A1E10}
.deck-key--main b{display:block;font-weight:700;letter-spacing:.04em;font-size:15px}
.deck-key--main i{display:block;font-style:normal;font-size:11px;margin-top:3px;
       color:#9A7038;letter-spacing:.02em}
.cass-archive{appearance:none;background:none;border:0;color:#6C7883;cursor:pointer;
       font-family:"Courier New","Nimbus Mono PS",monospace;font-size:15px;letter-spacing:.02em;
       padding:10px 6px;align-self:center}
.cass-archive:active{color:#8E9BA8}
/* вход в конкурс: главнее архива, поэтому рамка и краска, а не служебная серая строка */
/* ───── хаб «нарисована»: конкурс / сниппет ───── */
#hub{background:#0B0D10}
.hub-wrap{height:100%;max-width:440px;margin:0 auto;box-sizing:border-box;
          padding:calc(24px + env(safe-area-inset-top)) 22px calc(22px + env(safe-area-inset-bottom));
          display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px}
.hub-title{text-align:center;font-family:"Courier New","Nimbus Mono PS",monospace;color:#D8DEE5}
.hub-title b{display:block;font-size:22px;font-weight:700;letter-spacing:.02em}
.hub-title i{display:block;font-style:normal;font-size:11px;color:#7E8B98;margin-top:8px;letter-spacing:.16em}
.hub-keys{width:100%;display:flex;flex-direction:column;gap:12px}
.hub-keys .deck-key{padding:16px 12px}
.hub-keys .deck-key b{display:block;font-weight:700;font-size:17px;letter-spacing:.04em}
.hub-keys .deck-key i{display:block;font-style:normal;font-size:11px;margin-top:4px;color:#6C7883;letter-spacing:.02em}
.hub-keys .deck-key--main i{color:#9A7038}
/* третья кнопка тише двух главных: без рамки-подложки, только контур */
.hub-keys .deck-key--soft{background:transparent;border-color:#2C343C;color:#A9B4BF}
.hub-keys .deck-key--soft:active{background:#161B21}
/* «стриминги» мигает, «конкурс» под ней подсвечен ровно: две оранжевые кнопки подряд
   читались одинаково, а после выхода главная дорога - к треку */
@keyframes hubPulse{0%,100%{border-color:#7A4A18;box-shadow:0 0 0 1px rgba(255,154,46,.09)}
  50%{border-color:#FF9A2E;box-shadow:0 0 0 1px rgba(255,154,46,.5),0 0 22px 2px rgba(255,154,46,.35)}}
#hubStreams{animation:hubPulse 1.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){#hubStreams{animation:none}}
/* подвал: архив прошлого дропа в самом низу, не спорит с кнопками */
.hub-foot{position:absolute;left:0;right:0;bottom:calc(22px + env(safe-area-inset-bottom));text-align:center}

/* ───── экран «условия» ───── */
#rules{background:#0B0D10;overflow-y:auto;-webkit-overflow-scrolling:touch}
.rules-wrap{max-width:440px;margin:0 auto;box-sizing:border-box;
            padding:calc(58px + env(safe-area-inset-top)) 22px calc(28px + env(safe-area-inset-bottom));
            display:flex;flex-direction:column;gap:26px;
            font-family:"Courier New","Nimbus Mono PS",monospace;color:#D8DEE5}
.rules-title{margin:0;font-size:24px;font-weight:700;letter-spacing:.02em;text-align:center}
.rules-block h3{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.14em;
                text-transform:uppercase;color:#FF9A2E}
.rules-block p{margin:0;font-size:15px;line-height:1.6;color:#B8C2CC}
/* даты столбиком: число фиксированной ширины, чтобы выстроились друг под другом */
.rules-dates{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.rules-dates li{display:flex;gap:12px;font-size:15px;line-height:1.4}
.rules-dates b{flex:0 0 66px;font-weight:700;color:#D8DEE5}
.rules-dates span{color:#B8C2CC}
.rules-note{margin-top:12px!important;font-size:13px!important;color:#7E8B98!important}
#rulesDraw{margin-top:4px}

/* ───── экран «стриминги» («нарисована» после выхода) ─────
   свои классы st-*, а не .player/.cover дома «вселенной»: те одеты в её розовый пиксель */
#streams{background:#0B0D10;overflow-y:auto;-webkit-overflow-scrolling:touch}
.st-wrap{min-height:100%;max-width:440px;margin:0 auto;box-sizing:border-box;
         padding:calc(58px + env(safe-area-inset-top)) 22px calc(28px + env(safe-area-inset-bottom));
         display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}
/* 220, а не 300: иначе в телеграме на обычном айфоне (~740 px по высоте) площадки уезжают под сгиб */
.st-cover{width:100%;max-width:220px;aspect-ratio:1;border-radius:6px;overflow:hidden;
          border:1px solid #232A31;background:#11151A;box-shadow:0 18px 50px rgba(0,0,0,.55)}
.st-cover img{display:block;width:100%;height:100%;object-fit:cover}
.st-player{width:100%;max-width:300px;display:flex;align-items:center;gap:14px}
.st-play{flex:none;width:48px;height:48px;border-radius:50%;cursor:pointer;
         display:flex;align-items:center;justify-content:center;
         border:1px solid #7A4A18;background:linear-gradient(#22190F,#181209)}
.st-play:active{background:#2A1E10}
.st-play svg{width:22px;height:22px;fill:#FF9A2E}
.st-body{flex:1}
.st-bar{height:6px;border-radius:3px;background:#161B21;cursor:pointer;overflow:hidden}
.st-fill{height:100%;width:0;background:#FF9A2E;border-radius:3px}
.st-times{display:flex;justify-content:space-between;margin-top:6px;font-size:12px;color:#6C7883;
          font-family:"Courier New","Nimbus Mono PS",monospace;font-variant-numeric:tabular-nums}
.st-label{font-family:"Courier New","Nimbus Mono PS",monospace;font-size:12px;font-weight:700;
          letter-spacing:.14em;text-transform:uppercase;color:#FF9A2E;margin-bottom:-10px}
.st-keys{max-width:300px;gap:8px}
.hub-keys .st-platform{padding:13px 12px;font-size:15px;color:#C9D2DA}
/* площадка без https-ссылки не показывается: трек на ней ещё не вышел или адрес не вписан */
.st-platform:not([href^="https://"]){display:none}
/* пока ни у одной площадки нет ссылки, «слушать на» не висит над пустотой. webview без
   поддержки :has выбросит правило целиком - подпись просто останется видна, как раньше */
.st-wrap:not(:has(.st-platform[href^="https://"])) .st-label{display:none}
/* переход в рисовалку: мазки поверх всего (z выше pixel-wipe), тапы на время перехода блокируются */
.brush-wipe{position:fixed;inset:0;z-index:21;width:100%;height:100%;pointer-events:auto}
.brush-wipe.hidden{display:none}
/* рисовалка занимает экран целиком: у неё свой внутренний layout и свои отступы */
/* полосу сверху занимает «назад» родителя - без неё кнопка ложится на шапку инструмента */
.draw-frame{position:absolute;left:0;right:0;bottom:0;width:100%;border:0;background:#0B0C0D;
       top:calc(46px + env(safe-area-inset-top));height:calc(100% - 46px - env(safe-area-inset-top))}
#draw{background:#0B0C0D}
@media (prefers-reduced-motion:reduce){.deck *,#cassGroup{transition-duration:.01ms!important;
       animation-duration:.01ms!important}}


/* возврат из архива к кассетнику — тем же машинописным */
.rel-back{position:absolute;left:12px;top:calc(10px + env(safe-area-inset-top));z-index:5;
       appearance:none;background:rgba(10,12,15,.6);border:0;border-radius:8px;
       color:#8E9BA8;cursor:pointer;padding:8px 12px;
       font-family:"Courier New","Nimbus Mono PS",monospace;font-size:14px;letter-spacing:.02em}
.rel-back:active{color:#E6EAEE}
.rel-back.hidden{display:none}
/* строка про дедлайн конкурса справа от «назад» над рисовалкой: полоса там уже есть, высоту у холста не берёт */
.draw-note{position:absolute;right:12px;top:calc(8px + env(safe-area-inset-top));height:30px;z-index:5;
       max-width:calc(100% - 140px);display:flex;align-items:center;justify-content:flex-end;text-align:right;
       color:#8E9BA8;font-family:"Courier New","Nimbus Mono PS",monospace;font-size:12px;line-height:1.25}
.draw-note.hidden{display:none}


/* ═══ gate: перехватчик для браузера (вне телеграма) ═══
   свои классы, а не общие .veil/.kicker/.teaser-inner — их делят тизер и меню игры.
   кадр держим почти в полной яркости, затемняем только низ под текстом: глухая вуаль
   поверх видео гасила его целиком и экран читался как просто чёрный */
/* padding на #gate НЕ вешать: safari считает height:100% абсолютного потомка от
   content box, chrome — от padding box, и фон не дотягивался до низа ровно на padding.
   отступ живёт на .gate-in, у видео только inset — растяжка однозначна в обоих */
#gate{display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.gate-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
      filter:grayscale(.2) brightness(.88) contrast(1.06) saturate(.85)}
.gate-veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,
      rgba(8,9,11,.15) 0%,rgba(8,9,11,.05) 30%,rgba(8,9,11,.72) 62%,rgba(8,9,11,.96) 88%)}
.gate-in{position:relative;z-index:2;text-align:center;width:100%;max-width:378px;
      box-sizing:border-box;padding:0 24px;
      margin-bottom:calc(78px + env(safe-area-inset-bottom));
      font-family:"Courier New","Nimbus Mono PS",monospace}
.gate-tt{color:#F7FAFC;font-size:31px;font-weight:700;letter-spacing:.02em;margin-bottom:10px;
      text-shadow:0 2px 26px rgba(0,0,0,.9)}
.gate-dt{color:#FF9A2E;font-size:14px;letter-spacing:.2em;margin-bottom:32px;
      text-shadow:0 2px 18px rgba(0,0,0,.85)}
.gate-btn{display:block;width:100%;padding:15px;border-radius:7px;text-decoration:none;
      box-sizing:border-box;border:1px solid #8A5520;color:#FF9A2E;font-size:15px;
      font-weight:700;letter-spacing:.05em;transition:.12s;
      font-family:"Courier New","Nimbus Mono PS",monospace;
      background:linear-gradient(rgba(38,27,15,.96),rgba(26,19,10,.96))}
.gate-btn:active{background:rgba(48,34,19,.97);transform:translateY(1px)}
.gate-sub{color:#97A1AC;font-size:12.5px;margin-top:15px;line-height:1.6;
      text-shadow:0 1px 14px rgba(0,0,0,.9)}
@media (max-height:640px){.gate-tt{font-size:26px}.gate-in{margin-bottom:52px}}