/* Радио Грана — лендинг «свободной радиоволны». Бренд-палитра проекта (тёмный + золото/
   оранж), мобильный в первую очередь, без тяжёлых ассетов (фон и обложка — CSS). */
:root{
  --bg:#070706; --amber:#F28A2D; --gold:#D4A14B; --ivory:#F6E6C5;
  --dim:rgba(246,230,197,.62); --faint:rgba(246,230,197,.4);
  --border:rgba(212,161,75,.35);
}
*{box-sizing:border-box;}
html,body{margin:0;}
/* Кольца вокруг кнопки намеренно шире экрана (.rings: width:min(560px,120vw)) — на 390px это
   468px, и страница ехала вбок на ~31px. Кольца НЕ трогаем (фирменная анимация — канон),
   просто обрезаем лишнее по горизонтали.
   ГРАБЛЯ: правило обязано стоять на html, а не на body. `clip`, в отличие от `hidden`, НЕ
   передаётся с body на область просмотра (спецификация CSS) — на body оно вычислялось, а
   страница всё равно уезжала на 46px. Проверка не «scrollWidth» (при clip он врёт, считая
   вылезшее), а по факту: scrollTo(200,0) → scrollX обязан остаться 0. */
html{overflow-x:clip;}
body{
  background:radial-gradient(130% 90% at 50% -10%, #1a1510 0%, #0d0b09 45%, #070706 100%);
  color:var(--ivory);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  min-height:100vh;
  padding-top:var(--mg-bar-h,50px);           /* место под фиксированный бар-плеер */
  display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased;
}

.wrap{
  position:relative; z-index:1;
  /* Обрезаем декоративные кольца ЗДЕСЬ (19.07). Правило html{overflow-x:clip} выше по
     файлу на деле не держало: проверка из его же комментария (scrollTo(200,0) → scrollX
     обязан остаться 0) на 390px давала 46px — страница реально ездила вбок пальцем.
     Решающий опыт: спрятать .rings → сдвиг исчезает, вернуть → появляется.
     Почему клип именно на контейнере, а не «сузить кольца»: кольца намеренно шире
     экрана (канон), и width:100vw не спасает — vw включает полосу прокрутки и
     оставляет ещё ~7px. Клип на полноширинном блоке-предке чинит наглухо и не зависит
     от толщины полосы. Вид не меняется: кольца и так уходили за край. */
  overflow-x:clip;
  flex:1 0 auto;
  width:100%; max-width:640px; margin:0 auto;
  padding:clamp(40px,9vh,88px) 22px 48px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}

/* Обложка = концентрические «радиоволны» (вещание в мир). Лёгкая CSS-анимация,
   уважает prefers-reduced-motion. Кольца центрованы РОВНО на кнопке «Слушать»
   (обёртка .listen-wrap) — одинаково на всех ширинах. */
.listen-wrap{position:relative; display:flex; align-items:center; justify-content:center;
  margin:clamp(30px,6vh,52px) 0 0;}
.rings{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(560px,120vw); aspect-ratio:1; pointer-events:none;}
.rings span{position:absolute; inset:0; margin:auto; width:120px; height:120px;
  border:1px solid var(--amber); border-radius:50%; opacity:0;
  animation:ring 6s ease-out infinite;}
.rings span:nth-child(2){animation-delay:2s;}
.rings span:nth-child(3){animation-delay:4s;}
@keyframes ring{
  0%{opacity:.5; transform:scale(.4);}
  70%{opacity:.08;}
  100%{opacity:0; transform:scale(3.2);}
}

.kicker{margin:0 0 8px; text-transform:uppercase; letter-spacing:.22em;
  font-size:.72rem; font-weight:600; color:var(--amber);}
.title{margin:0; font-family:'Oswald',sans-serif; font-weight:700;
  letter-spacing:.03em; line-height:1.02; font-size:clamp(2.4rem,10vw,4rem);
  text-shadow:0 2px 40px rgba(242,138,45,.18);}
.tagline{margin:12px 0 0; color:var(--gold); font-weight:500;
  font-size:clamp(1rem,3.4vw,1.22rem);}

/* Большая кнопка «Слушать» — управляет тем же плеером (window.mgRadio).
   position/z-index — чтобы кнопка была НАД кольцами (кольца — фон обёртки). */
.listen{position:relative; z-index:1; margin:0; cursor:pointer;
  width:clamp(128px,34vw,150px); aspect-ratio:1; border-radius:50%;
  border:1px solid rgba(242,138,45,.5);
  background:radial-gradient(120% 120% at 50% 30%, #F7A24B, #E4791E 70%);
  color:#1a1206; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; box-shadow:0 10px 40px rgba(242,138,45,.35), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .18s ease, box-shadow .18s ease;}
.listen:hover{transform:translateY(-2px) scale(1.02); box-shadow:0 14px 52px rgba(242,138,45,.5);}
.listen:active{transform:scale(.98);}
.listen:focus-visible{outline:3px solid var(--ivory); outline-offset:4px;}
.listen__icon{width:0; height:0; border-style:solid; border-width:15px 0 15px 26px;
  border-color:transparent transparent transparent #1a1206; margin-left:6px;}
.listen__label{font-family:'Oswald',sans-serif; font-weight:700; letter-spacing:.06em;
  font-size:1.02rem; text-transform:uppercase;}
/* Состояние «играет»: пауза-иконка + мягкая пульсация ободка. */
.listen.playing .listen__icon{width:22px; height:26px; border:0; margin:0;
  background:linear-gradient(#1a1206,#1a1206); position:relative;}
.listen.playing .listen__icon::before,.listen.playing .listen__icon::after{
  content:''; position:absolute; top:0; width:7px; height:26px; background:#1a1206;}
.listen.playing .listen__icon::before{left:2px;} .listen.playing .listen__icon::after{right:2px;}
.listen.playing{animation:pulse 2.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{box-shadow:0 10px 40px rgba(242,138,45,.35);}
  50%{box-shadow:0 10px 54px rgba(242,138,45,.7);}}

/* Автостарт заблокирован браузером (нет жеста) → зовём к кнопке: пульсирующее кольцо
   вокруг неё + подсказка под ней. Ставится классом .attn из app.js, снимается первым
   же нажатием. Обычный заход без ?play=1 этого не видит. */
.listen.attn{animation:call 1.5s ease-out infinite;}
@keyframes call{
  0%,100%{box-shadow:0 10px 40px rgba(242,138,45,.35), 0 0 0 0 rgba(242,138,45,.55);}
  50%{box-shadow:0 10px 40px rgba(242,138,45,.35), 0 0 0 18px rgba(242,138,45,0);}
}
.play-hint{margin:18px auto 0; max-width:340px; color:var(--amber); font-size:.86rem;
  line-height:1.45; font-weight:500;}
.play-hint[hidden]{display:none;}

.now{margin:16px 0 0; color:var(--faint); font-size:.82rem; letter-spacing:.02em;}
.lead{margin:26px auto 0; max-width:520px; line-height:1.6; color:var(--dim); font-size:.96rem;}

.links{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:30px 0 0;}
.chip{text-decoration:none; padding:11px 20px; border-radius:100px;
  font-size:.92rem; font-weight:500; transition:all .2s;
  background:var(--amber); color:#1a1206; border:1px solid var(--amber);}
.chip:hover{background:#F7A24B;}
.chip--ghost{background:transparent; color:var(--ivory); border:1px solid var(--border);}
.chip--ghost:hover{border-color:var(--amber); color:var(--amber);}

.flags{display:flex; gap:8px; justify-content:center; margin:34px 0 0;}
/* min-height 44px — палец, а не курсор: было 36px, в такую кнопку на телефоне
   промахиваешься (44px — общепринятый минимум тач-цели). Вид не меняется:
   ширина и текст те же, добираем высоту центрированием. */
.flags button{cursor:pointer; background:rgba(212,161,75,.07); border:1px solid var(--border);
  color:var(--ivory); border-radius:100px; padding:7px 14px; font-size:.86rem;
  min-height:44px; display:inline-flex; align-items:center; justify-content:center;
  font-family:'Oswald',sans-serif; letter-spacing:.05em; transition:all .2s;}
.flags button:hover{border-color:var(--amber); color:var(--amber);}
.flags button[aria-current="true"]{border-color:var(--amber); color:var(--amber);
  background:rgba(242,138,45,.12);}

.foot{margin:40px auto 0; max-width:460px; color:var(--faint); font-size:.76rem; line-height:1.5;}

@media (prefers-reduced-motion: reduce){
  .rings span{animation:none; opacity:.14;}
  .rings span:nth-child(1){transform:scale(1);}
  .rings span:nth-child(2){transform:scale(1.9);}
  .rings span:nth-child(3){transform:scale(2.8);}
  .listen.playing{animation:none;}
  /* Кольцо не пульсирует, но кнопка всё равно должна выделяться — держим ободок статикой. */
  .listen.attn{animation:none; box-shadow:0 10px 40px rgba(242,138,45,.35), 0 0 0 6px rgba(242,138,45,.3);}
}

/* ── Бар-плеер на телефоне: правила УБРАНЫ 21.07 ────────────────────────────
   Здесь с 19.07 жил блок @media(max-width:640px), который через !important
   перекраивал чужой элемент — верхний бар: włączał flex-wrap, уводил
   #mg-radio-now отдельной строкой на всю ширину, добавлял тач-минимумы 44px.

   Почему снято. Это была починка бара СНАРУЖИ, со стороны страницы-носителя.
   Пока правила жили тут, бар на radiograna физически не мог совпасть с баром
   на mamagrana: на одном сайте название ехало вторым рядом, на другом нет —
   ровно то, на что жаловался автор («бары разные на двух сайтах»).

   Что вместо. С 21.07 (раунды Р1/Р3) бар самодостаточен: мобильную раскладку,
   тач-цели 44px и раскрывающуюся панель он держит сам, внутри mg-radio.js,
   одинаково на обоих доменах. Страница-носитель бар больше не трогает.

   НЕ возвращать сюда правила для #mg-radio-*: чинить надо в mg-radio.js,
   иначе сайты снова разъедутся. */