/* Оболочка радиостанции: CRT-панель, тюнер, VU, лог диспетчера. */
:root {
  --neon: #ff2d95;
  --neon2: #5cf0c0;
  --amber: #ffb457;
  --ice: #a9d4ff;
  --ink: #05070c;
  --panel: rgba(6, 9, 16, 0.62);
  --line: rgba(169, 212, 255, 0.22);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
body { font-family: var(--mono); color: #dfe9f5; -webkit-font-smoothing: antialiased; }

#stage { position: fixed; inset: 0; }
#screen { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ── HUD ─────────────────────────────────────────────────────────────── */
#hud {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 14px clamp(12px, 2.2vw, 28px);
  pointer-events: none;
  text-shadow: 0 0 12px rgba(0,0,0,0.9);
}
#hud.hidden { opacity: 0; transition: opacity .35s; }
#hud { transition: opacity .35s; }

.deck { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.top { align-items: flex-start; }
.bottom { align-items: flex-end; flex-direction: column; gap: 10px; }

.brand { display: flex; align-items: flex-start; gap: 16px; }
.freq {
  font-size: clamp(38px, 7vw, 74px); line-height .9; font-weight: 700;
  letter-spacing: -0.03em; color: #fff;
  text-shadow: 0 0 18px var(--neon), 0 0 48px rgba(255,45,149,0.45);
  font-variant-numeric: tabular-nums;
}
.freq .dot { opacity: .5; }
.freq .unit { font-size: 0.32em; letter-spacing: .18em; opacity: .75; margin-left: 8px; }
.meta { padding-top: 6px; }
.meta .name {
  font-size: clamp(13px, 1.5vw, 17px); letter-spacing: .16em; color: #fff;
  text-shadow: 0 0 14px rgba(169,212,255,.55);
}
.meta .tag { font-size: clamp(10px, 1vw, 12px); letter-spacing: .12em; opacity: .62; margin-top: 4px; }
.meta .place { font-size: clamp(10px, 1vw, 12px); letter-spacing: .1em; color: var(--amber); margin-top: 6px; }
.meta .np {
  font-size: clamp(11px, 1.05vw, 13px); letter-spacing: .06em; color: var(--neon2);
  margin-top: 7px; text-shadow: 0 0 12px rgba(92,240,192,.45);
  max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.meta .np:empty { display: none; }

.right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.clock { font-size: clamp(15px, 1.6vw, 20px); letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.signal { display: flex; gap: 3px; align-items: flex-end; height: 14px; }
.signal i { width: 4px; background: var(--ice); opacity: .25; border-radius: 1px; }
.signal i.on { opacity: 1; box-shadow: 0 0 8px var(--ice); }
.badge {
  font-size: 10px; letter-spacing: .22em; padding: 3px 8px; border: 1px solid var(--line);
  color: var(--ice); border-radius: 2px; background: var(--panel);
}

/* ── лог диспетчера ──────────────────────────────────────────────────── */
.log {
  position: absolute; right: clamp(12px, 2.2vw, 28px); top: 132px;
  width: min(38ch, 40vw); max-height: 46vh;
  background: var(--panel); border: 1px solid var(--line); border-radius: 3px;
  backdrop-filter: blur(3px);
  display: none; flex-direction: column; overflow: hidden;
}
.log.show { display: flex; }
.loghead {
  font-size: 10px; letter-spacing: .18em; padding: 6px 10px; color: var(--ice);
  border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center;
}
.loghead .tx { color: #ff5a5a; opacity: .5; }
.loghead .tx.live { opacity: 1; text-shadow: 0 0 12px #ff2a3c; }
.logbody { padding: 6px 10px 8px; overflow: hidden; font-size: clamp(10px, 1vw, 12px); line-height: 1.55; }
.log, .logbody { user-select: text; -webkit-user-select: text; }   /* лог можно выделять и копировать */
.logbody div { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.logbody .t { color: #7f93aa; }
.logbody .call { color: #ffd166; }
.logbody .scene { color: #ff8f6b; }
.logbody .code4 { color: #7dd87d; }
.logbody .idle { color: #6d8299; }

/* ── тюнер ───────────────────────────────────────────────────────────── */
.dial {
  position: relative; width: min(760px, 74vw); height: 62px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 3px;
  backdrop-filter: blur(3px); pointer-events: auto; cursor: ew-resize;
  touch-action: none; user-select: none;
}
.scale { position: absolute; inset: 0; }
.scale .tick { position: absolute; bottom: 14px; width: 1px; background: rgba(169,212,255,.35); }
.scale .tick.big { height: 12px; }
.scale .tick.small { height: 6px; opacity: .6; }
.scale .num { position: absolute; bottom: 30px; font-size: 9px; color: #8fa6bd; transform: translateX(-50%); }
.scale .stn {
  position: absolute; bottom: 12px; transform: translateX(-50%);
  font-size: 9px; letter-spacing: .06em; padding: 2px 5px; border-radius: 2px;
  border: 1px solid currentColor; white-space: nowrap; opacity: .75;
}
.needle {
  position: absolute; top: 4px; bottom: 4px; width: 2px; background: var(--neon);
  box-shadow: 0 0 14px var(--neon); transform: translateX(-1px); pointer-events: none;
}
.needle i {
  position: absolute; top: -5px; left: -6px; width: 14px; height: 8px;
  background: var(--neon); clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.dialhint { position: absolute; right: 8px; top: 6px; font-size: 9px; color: #6d8299; letter-spacing: .1em; }
.dialhint b { color: #9fb6cc; }

.row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; width: 100%; }

.presets { display: flex; gap: 6px; pointer-events: auto; }
.presets button {
  font: inherit; font-size: 11px; letter-spacing: .08em; padding: 7px 9px; cursor: pointer;
  background: var(--panel); color: #cfe0f0; border: 1px solid var(--line); border-radius: 2px;
  backdrop-filter: blur(3px); transition: all .15s;
}
.presets button b { display: block; font-size: 9px; opacity: .55; letter-spacing: .14em; }
.presets button:hover { border-color: var(--neon); color: #fff; }
.presets button.active { border-color: var(--neon); color: #fff; box-shadow: 0 0 18px rgba(255,45,149,.5) inset; }

.meters { display: flex; align-items: flex-end; gap: 6px; }
.vu { width: 9px; height: 34px; background: rgba(255,255,255,.06); border: 1px solid var(--line); position: relative; overflow: hidden; }
.vu i {
  position: absolute; bottom: 0; left: 0; right: 0; height: 100%;
  background: linear-gradient(0deg, #7dd87d 0%, #ffd166 62%, #ff4d4d 100%);
  transform: scaleY(0); transform-origin: bottom; transition: transform .05s linear;
}
.eq { display: flex; gap: 2px; align-items: flex-end; height: 34px; }
.eq i { width: 3px; background: var(--neon2); opacity: .8; height: 2px; box-shadow: 0 0 6px var(--neon2); }

.toggles { display: flex; gap: 6px; pointer-events: auto; }
.toggles button {
  font: inherit; font-size: 10px; letter-spacing: .14em; padding: 6px 8px; cursor: pointer;
  background: var(--panel); color: #8fa6bd; border: 1px solid var(--line); border-radius: 2px;
}
.toggles button.on { color: #fff; border-color: var(--neon2); box-shadow: 0 0 14px rgba(92,240,192,.35) inset; }
.toggles button:hover { color: #fff; }

.hint {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  font-size: 10px; letter-spacing: .08em; color: #5f7488; white-space: nowrap;
}

/* режим «минимум интерфейса»: только шапка, лог и кадр */
body.hud-min .deck.bottom, body.hud-min .hint { display: none; }
body.hud-min #hud { opacity: .82; }
body.hud-min .deck.top { opacity: .9; }
.selftest {
  font-size: 10px; color: #4d5f70; letter-spacing: .06em; white-space: pre-line; max-width: 40ch;
  user-select: text; -webkit-user-select: text;      /* отладочную строку можно выделять и копировать */
  pointer-events: auto;
}
/* отладка: кнопка копирования + сама строка (видны только в режиме debug, клавиша D) */
.dbg {
  position: absolute; left: clamp(12px, 2.2vw, 28px); bottom: 152px;
  display: none; flex-direction: column; gap: 5px; align-items: flex-start;
}
body.debug .dbg { display: flex; }
#dbgcopy {
  font: inherit; font-size: 9px; letter-spacing: .12em; padding: 5px 8px; cursor: pointer;
  background: var(--panel); color: #9fb6cc; border: 1px solid var(--line); border-radius: 2px;
  pointer-events: auto;
}
#dbgcopy:hover { color: #fff; border-color: var(--neon2); }
#dbgcopy.done { color: #fff; border-color: var(--neon2); box-shadow: 0 0 12px rgba(92,240,192,.35) inset; }

/* ── стартовый экран ─────────────────────────────────────────────────── */
#boot {
  position: absolute; inset: 0; display: grid; place-items: center; cursor: pointer;
  background: radial-gradient(circle at 50% 60%, rgba(20,0,40,.35), rgba(0,0,0,.86));
  backdrop-filter: blur(3px); transition: opacity .5s; z-index: 10;
}
#boot.gone { opacity: 0; pointer-events: none; }
.boot-inner { text-align: center; }
.b1 { font-size: clamp(28px, 7vw, 76px); letter-spacing: .12em; font-weight: 700; color: #fff;
  text-shadow: 0 0 24px var(--neon), 0 0 70px rgba(255,45,149,.5); }
.b2 { font-size: clamp(16px, 3vw, 34px); letter-spacing: .3em; color: var(--amber); margin-top: 10px;
  text-shadow: 0 0 20px rgba(255,180,87,.6); }
.b3 { font-size: clamp(11px, 1.4vw, 15px); letter-spacing: .22em; color: #cfe0f0; margin-top: 22px; opacity: .85; }
.b4 { font-size: clamp(13px, 1.8vw, 19px); letter-spacing: .26em; color: #fff; margin-top: 30px;
  animation: blink 1.5s steps(2, start) infinite; }
.b5 { font-size: 10px; letter-spacing: .14em; color: #6d8299; margin-top: 26px; }
@keyframes blink { 50% { opacity: .25; } }

@media (max-width: 720px) {
  .log { width: min(34ch, 74vw); max-height: 34vh; top: 118px; }
  .dial { width: 88vw; height: 54px; }
  .hint { display: none; }
  .meta .tag { display: none; }
}

/* ── живая рация LAPD: маленькое CRT-окно ─────────────────────────────────
   Плеер YouTube по ToS нельзя прятать, поэтому он живёт в углу как «монитор
   в стойке». Скрытый (V) — не играет, и станция уходит на процедурный голос. */
#scanner-monitor {
  position: absolute; right: 20px; bottom: 152px; width: 272px; z-index: 6;
  padding: 6px 6px 5px;
  background: linear-gradient(180deg, rgba(9,14,22,.9), rgba(5,8,13,.86));
  border: 1px solid var(--line); border-radius: 7px;
  box-shadow: 0 14px 34px rgba(0,0,0,.55), inset 0 0 26px rgba(60,100,150,.18);
  font-family: var(--mono);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .5s ease, transform .5s ease;
}
#scanner-monitor.show { opacity: .94; transform: none; pointer-events: auto; }

.sm-head { display: flex; align-items: center; gap: 7px;
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--ice); }
.sm-dot { width: 6px; height: 6px; border-radius: 50%; flex: none;
  animation: smFlash 1.7s steps(1) infinite; }
@keyframes smFlash {
  0%, 49% { background: #ff2a3c; box-shadow: 0 0 9px #ff2a3c; }
  50%, 100% { background: #2b6bff; box-shadow: 0 0 9px #2b6bff; }
}
.sm-screen { position: relative; margin-top: 5px; aspect-ratio: 16 / 9;
  background: #04070c; border-radius: 3px; overflow: hidden; }
.sm-holder { position: absolute; inset: 0; }
.sm-holder iframe { width: 100%; height: 100%; display: block; border: 0; }
.sm-crt { position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,.22) 0 1px, rgba(0,0,0,0) 1px 3px),
    radial-gradient(130% 120% at 50% 42%, rgba(120,170,220,.10), rgba(0,0,0,.55) 78%);
}
.sm-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 5px;
  font-size: 8.5px; letter-spacing: .1em; color: #7f9bbb; }
.sm-foot .sm-keys { color: #62788f; }

@media (max-width: 900px) {
  #scanner-monitor { width: 208px; bottom: 132px; right: 12px; }
  .sm-foot .sm-keys { display: none; }
}

/* ── мобильная вертикаль: просим повернуть экран в ландшафт ───────────────── */
#rotate {
  display: none; position: absolute; inset: 0; z-index: 12; place-items: center;
  text-align: center; padding: 24px;
  background: linear-gradient(180deg, #06060d, #12002e 58%, #27043f);
}
#rotate.show { display: grid; }
.rot-icon { font-size: 56px; color: var(--neon); text-shadow: 0 0 28px var(--neon);
  animation: rotSpin 2.4s ease-in-out infinite; }
@keyframes rotSpin { 0%, 45% { transform: rotate(0deg); } 70%, 100% { transform: rotate(90deg); } }
.rot-title { font-size: clamp(20px, 7vw, 34px); letter-spacing: .2em; color: #fff; margin-top: 16px; }
.rot-sub { font-size: 11px; letter-spacing: .14em; color: #9db3c9; margin-top: 10px; }
#rot-go { margin-top: 24px; padding: 11px 20px; border-radius: 4px; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: #fff;
  background: rgba(255, 45, 149, .14); border: 1px solid var(--neon); }
#rot-go:active { background: rgba(255, 45, 149, .3); }
@media (orientation: landscape) { #rotate { display: none !important; } }

/* ── компактная раскладка: маленькие экраны и невысокие окна ───────────────
   Главное правило: не закрывать машину и дорогу. Кнопки уезжают вертикально
   вправо, тюнер становится полосой по низу, из кадра уходят лог, подсказки и
   сцены — на них нет места, а водителю они не нужны. */
@media (max-width: 1100px), (max-height: 620px) {
  #hud { padding: 8px 10px; }

  /* верх — одна компактная строка */
  .freq { font-size: clamp(24px, 5vw, 40px); }
  .freq .unit { font-size: .3em; margin-left: 5px; }
  .meta { padding-top: 2px; }
  .meta .name { font-size: 11px; letter-spacing: .12em; }
  .meta .tag, .meta .place { font-size: 9px; margin-top: 2px; }
  .meta .np { font-size: 10px; max-width: 32ch; margin-top: 3px; }
  .right { gap: 3px; }
  .clock { font-size: 13px; }
  .signal { height: 10px; }
  .signal i { width: 3px; }
  .badge { font-size: 8.5px; padding: 2px 5px; }

  /* в кадре им не место */
  .log, .hint, .selftest { display: none !important; }

  /* низ — полоса тюнера во всю ширину + ряд станций над ней */
  .deck.bottom {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 0 8px 6px; gap: 6px;
    flex-direction: column-reverse;               /* ряд станций сверху, тюнер внизу */
  }
  .dial { width: 100%; height: 48px; }
  .dialhint { display: none; }
  .scale .tick { bottom: 9px; }
  .scale .tick.big { height: 9px; }
  .scale .tick.small { height: 5px; }
  .scale .num { display: none; }                  /* числа частот дублируют подписи станций */
  .scale .stn { bottom: 7px !important; font-size: 8px; padding: 1px 3px; letter-spacing: .02em; }
  .scale .stn b { display: none; }                /* на узкой полосе оставляем только частоту */

  .row { gap: 8px; justify-content: space-between; flex-wrap: nowrap; }
  .presets { gap: 4px; }
  .presets button { font-size: 9px; padding: 3px 5px; letter-spacing: .04em; }
  .presets button b { display: none; }
  .meters { gap: 4px; }
  .vu { width: 6px; height: 22px; }
  .eq { height: 22px; gap: 1px; }
  .eq i { width: 2px; }

  /* кнопки — вертикальная колонка справа по центру высоты.
     position: fixed — иначе колонка привязывается к нижней полосе (ближайший
     позиционированный родитель) и нижние кнопки уезжают за экран. */
  .toggles {
    position: fixed; right: 8px; top: 50%; transform: translateY(-50%);
    flex-direction: column; gap: 5px; z-index: 7;
  }
  .toggles button {
    font-size: 9px; letter-spacing: .06em; padding: 6px 6px; min-width: 58px; text-align: center;
  }

  /* CRT-окно рации: слева, над полосой тюнера */
  #scanner-monitor { width: 152px; right: auto; left: 8px; bottom: 92px; }
  .sm-foot { font-size: 8px; }
  .sm-foot .sm-keys { display: none; }
}

/* ── тихий режим: на входе видно только радио, остальное — от движения ──────────
   quiet (по умолчанию) → awake (шевельнул мышью) → снова quiet через ~3.5 с.
   Ничего не удалено: панели не исчезают из DOM, а растворяются по opacity. */
.log, .meters, .hint, .presets, .toggles button,
.deck.top .clock, .deck.top .signal, .deck.top .badge, .deck.top .place {
  transition: opacity .55s ease, visibility .55s;
}
body.ui-quiet:not(.ui-awake) .log,
body.ui-quiet:not(.ui-awake) .meters,
body.ui-quiet:not(.ui-awake) .hint,
body.ui-quiet:not(.ui-awake) .presets,
body.ui-quiet:not(.ui-awake) .deck.top .clock,
body.ui-quiet:not(.ui-awake) .deck.top .signal,
body.ui-quiet:not(.ui-awake) .deck.top .badge,
body.ui-quiet:not(.ui-awake) .deck.top .place {
  opacity: 0; visibility: hidden; pointer-events: none;
}
/* в тихом режиме от тумблеров остаются только дождь, радио и mute */
body.ui-quiet:not(.ui-awake) .toggles button { opacity: 0; visibility: hidden; pointer-events: none; }
body.ui-quiet:not(.ui-awake) .toggles button[data-act="rain"],
body.ui-quiet:not(.ui-awake) .toggles button[data-act="radio"],
body.ui-quiet:not(.ui-awake) .toggles button[data-act="mute"] { opacity: 1; visibility: visible; pointer-events: auto; }
/* ряд станций открывает кнопка RADIO — в тихом режиме он скрыт */
body.radio-open .presets, body.ui-quiet.radio-open:not(.ui-awake) .presets {
  opacity: 1; visibility: visible; pointer-events: auto;
}

/* ── занавес на входе: мир проявляется из темноты ─────────────────────────
   z-index 1: занавес закрывает сцену (канвас), но НЕ верхнюю деку —
   во время настройки видно, как едет частота. */
#curtain {
  position: absolute; inset: 0; background: #000; z-index: 1; pointer-events: none;
  opacity: 1; transition: opacity 2.6s ease;
}
#curtain.up { opacity: 0; }
#hud { z-index: 2; }

/* ── карточка настройки: имя → дивизион → LIVE ─────────────────────────── */
#introcard {
  position: absolute; left: 0; right: 0; top: 32%; z-index: 9; text-align: center;
  pointer-events: none; opacity: 0; transition: opacity .8s ease;
}
#introcard.show { opacity: 1; }
#introcard.gone { opacity: 0; transition: opacity 1.4s ease; }
#introcard .ic-name {
  font-size: clamp(18px, 3.4vw, 40px); letter-spacing: .26em; color: #fff;
  text-shadow: 0 0 26px rgba(92,240,192,.55), 0 0 70px rgba(255,45,149,.25);
}
#introcard .ic-rule {
  width: 132px; height: 1px; margin: 14px auto;
  background: linear-gradient(90deg, transparent, rgba(169,212,255,.45), transparent);
}
#introcard .ic-tag, #introcard .ic-live { opacity: 0; transition: opacity .8s ease; }
#introcard .ic-tag { font-size: 11px; letter-spacing: .44em; color: #9fb6cc; }
#introcard .ic-live { font-size: 11px; letter-spacing: .3em; color: #ff3355; margin-top: 13px; }
#introcard.tag-in .ic-tag, #introcard.live-in .ic-live { opacity: 1; }
#introcard.live-in .ic-live { text-shadow: 0 0 16px rgba(255,51,85,.75); }

/* ── единственная подсказка на входе ───────────────────────────────────── */
#introhint {
  position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 9;
  font-size: 11px; letter-spacing: .18em; color: #93a9bf; white-space: nowrap;
  background: var(--panel); border: 1px solid var(--line); border-radius: 2px;
  padding: 7px 13px; pointer-events: none; opacity: 0; transition: opacity 1.2s ease;
}
#introhint.show { opacity: 1; }

/* техническая сноска — только в режиме отладки (D) */
.tech { font-size: 10px; color: #4d5f70; max-width: 46ch; line-height: 1.55; }

/* погодные состояния — только в панели отладки (D), в пользовательском HUD их нет */
.wxrow { display: flex; gap: 4px; pointer-events: auto; }
.wxrow button {
  font: inherit; font-size: 9px; letter-spacing: .1em; padding: 4px 7px; cursor: pointer;
  background: var(--panel); color: #9fb6cc; border: 1px solid var(--line); border-radius: 2px;
}
.wxrow button:hover { color: #fff; border-color: var(--neon2); }
.wxrow button.on { color: #fff; border-color: var(--neon2); box-shadow: 0 0 10px rgba(92,240,192,.35) inset; }

/* стартовый экран: тэглайн бренда и фолбэк для краулеров/без-JS */
.b-tag { font-size: clamp(13px, 1.5vw, 17px); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--neon2, #5cf0c0); margin: 10px 0 18px; }
.boot-seo { max-width: 62ch; margin: 26px auto 0; font-size: 12px; line-height: 1.6; color: #7f8fa0; text-align: left; }
.boot-seo a { color: #7fd6ff; }
.boot-note { color: #5d6b7a; }

/* Frequency Journey: после захвата сигнала на ~1.4 с показываем, где мы оказались */
body.ui-identity .deck { opacity: 1 !important; transform: none !important; }
body.ui-identity .deck .name { letter-spacing: .2em; }
body.ui-identity .np { opacity: 1 !important; }