@charset "UTF-8";

/* базовые */
*{ box-sizing: border-box; }
html,body{ height:100%; }
body{ margin:0; background:#000; color:#0f0; font:16px/1.25 "Lucida Console", Menlo, Monaco, Consolas, monospace; }
.screen{ max-width:820px; margin:0 auto; padding:12px; overflow-x:hidden; }

/* логотип и вышка — строго моношир */
.logo,.tower{ font-family:"Lucida Console", Menlo, Monaco, Consolas, monospace; white-space:pre; margin:0 auto; text-align:left; display:block; }

/* заголовок и тикер */
.onair{ text-align:center; font-weight:bold; margin:10px 0 4px; }

/* тикер: высота + два режима */
.ticker{ position:relative; overflow:hidden; height:1.6em; }
.marquee{ display:inline-block; white-space:nowrap; will-change:transform; }
.marquee span{ display:inline-block; padding-right:40px; } /* GAP = 40 */

/* центрирование коротких строк — без правого отступа у спанов */
.ticker.center .marquee{ display:flex; justify-content:center; transform:none !important; animation:none !important; }
.ticker.center .marquee span{ padding-right:0 !important; }

/* управление */
.controls{ display:flex; justify-content:center; align-items:center; gap:16px; margin:10px 0 8px; }

/* HQ: большие скобки и фиксированный слот */
.hqbtn{ font:inherit; border:none; background:none; color:#0f0; cursor:pointer; padding:4px 10px; }
.hqbtn .brackets{ font-size:28px; letter-spacing:2px; display:inline-flex; align-items:center; }
.hqbtn .brackets .slot{ display:inline-block; width:1ch; text-align:center; } /* скобки не «гуляют» */
.hqbtn:focus{ outline:none; }

/* станции */
.stations{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  margin:12px 0 6px;
}
.stations .btn{
  appearance:none; -webkit-appearance:none;
  font:inherit; color:#0f0; background:#000; cursor:pointer;
  border:2px dashed #0f0; border-radius:10px;
  padding:0 14px;
  height:64px;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
}
.stations .btn.selected{ border-style:solid; background:#042; }
.stations .btn:focus{ outline:none; }
.stations .btn:active{ transform:translateY(1px); }

@media (min-width:560px){
  .stations{ gap:16px; }
  .stations .btn{ height:68px; }
}

/* часы */
.clock{ text-align:left; margin:8px 0 0; }

/* мобильные хайлайты */
button,.btn{ outline:none; }
*{ -webkit-tap-highlight-color:transparent; }