/* ===== Настройки цвета (по логотипу) ===== */
:root{
  --gold:#F5B21C;
  --gold-hi:#FFD45A;
  --gold-lo:#B97A08;
  --steel:#9A9A9A;
  --steel-hi:#E2E2E2;
  --steel-lo:#4A4A4A;
  --bg:#070707;
  --panel:rgba(22,22,22,.72);
  --line:rgba(245,178,28,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--steel-hi);
  font-family:"Exo 2",system-ui,sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ===== Фон ===== */
#bg{position:fixed;inset:0;z-index:0;pointer-events:none}
.glow{
  position:fixed;inset:-20%;z-index:0;pointer-events:none;
  background:
    radial-gradient(40% 35% at 50% 38%, rgba(245,178,28,.16), transparent 70%),
    radial-gradient(30% 30% at 15% 85%, rgba(245,178,28,.07), transparent 70%),
    radial-gradient(30% 30% at 85% 15%, rgba(200,200,200,.05), transparent 70%);
  animation:breathe 9s ease-in-out infinite;
}
body.playing .glow{animation-duration:3.2s}
@keyframes breathe{50%{opacity:.6;transform:scale(1.06)}}
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== Шапка ===== */
header{
  position:relative;z-index:3;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px clamp(18px,4vw,48px);
}
.brand{
  font-family:"Russo One",sans-serif;font-size:15px;letter-spacing:.14em;
  color:var(--steel);text-transform:uppercase;
}
.brand b{color:var(--gold);font-weight:400}
.live{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:800;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  padding:8px 14px;border:1px solid var(--line);border-radius:999px;
  background:rgba(0,0,0,.4);color:var(--steel);
  transition:color .3s,border-color .3s;
}
.live i{width:8px;height:8px;border-radius:50%;background:var(--steel-lo);transition:background .3s}
body.playing .live{color:var(--gold-hi);border-color:rgba(245,178,28,.5)}
body.playing .live i{background:#ff3b30;box-shadow:0 0 0 0 rgba(255,59,48,.7);animation:ping 1.6s infinite}
@keyframes ping{70%{box-shadow:0 0 0 10px rgba(255,59,48,0)}100%{box-shadow:0 0 0 0 rgba(255,59,48,0)}}

/* ===== Основной блок ===== */
main{
  position:relative;z-index:3;
  min-height:calc(100vh - 86px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 18px 40px;
}

/* Логотип с кольцами */
.stage{
  position:relative;
  width:min(400px,78vw);aspect-ratio:1;
  display:grid;place-items:center;
  margin-bottom:10px;
}
.ring{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 8%, var(--gold) 18%, transparent 30% 55%, var(--steel) 65%, transparent 78%);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation:spin 14s linear infinite;
  opacity:.55;transition:opacity .5s;
}
.ring.r2{inset:7%;animation-duration:20s;animation-direction:reverse;opacity:.3}
body.playing .ring{opacity:1;animation-duration:5s}
body.playing .ring.r2{opacity:.7;animation-duration:8s}
@keyframes spin{to{transform:rotate(360deg)}}

.pulse{
  position:absolute;inset:12%;border-radius:50%;
  border:2px solid var(--gold);opacity:0;
}
body.playing .pulse{animation:wave 2.6s cubic-bezier(.2,.6,.3,1) infinite}
body.playing .pulse.p2{animation-delay:.87s}
body.playing .pulse.p3{animation-delay:1.74s}
@keyframes wave{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.55);opacity:0}}

.logo-wrap{
  position:relative;width:84%;aspect-ratio:1;border-radius:50%;
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(245,178,28,.25), 0 30px 80px -20px rgba(245,178,28,.35), inset 0 0 40px #000;
  transform:scale(var(--beat,1));
  transition:transform .08s linear;
}
.logo-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.logo-wrap::after{ /* блик */
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg, transparent 35%, rgba(255,230,160,.22) 50%, transparent 65%);
  transform:translateX(-120%);
  animation:shine 6s ease-in-out infinite 1.5s;
}
@keyframes shine{0%,60%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}

/* Сейчас в эфире */
.now{text-align:center;margin:18px 0 6px;min-height:58px}
.now small{
  display:block;font-size:11px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--steel);
}
.now h1{
  font-family:"Russo One",sans-serif;font-weight:400;
  font-size:clamp(22px,4.2vw,34px);letter-spacing:.02em;margin-top:6px;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,var(--gold-lo));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Визуализатор */
#viz{width:min(720px,94vw);height:90px;display:block;margin:8px auto 4px}

/* Панель управления */
.controls{
  display:flex;align-items:center;justify-content:center;gap:clamp(16px,4vw,40px);
  margin-top:6px;flex-wrap:wrap;
}
.play{
  position:relative;width:96px;height:96px;border-radius:50%;border:0;cursor:pointer;
  background:radial-gradient(circle at 35% 30%, var(--gold-hi), var(--gold) 45%, var(--gold-lo));
  box-shadow:0 0 0 6px rgba(245,178,28,.12), 0 18px 40px -10px rgba(245,178,28,.6), inset 0 -6px 14px rgba(0,0,0,.25), inset 0 3px 6px rgba(255,255,255,.35);
  display:grid;place-items:center;
  transition:transform .18s cubic-bezier(.3,1.6,.5,1), box-shadow .3s;
}
.play:hover{transform:scale(1.06);box-shadow:0 0 0 10px rgba(245,178,28,.16), 0 22px 50px -10px rgba(245,178,28,.75), inset 0 -6px 14px rgba(0,0,0,.25), inset 0 3px 6px rgba(255,255,255,.35)}
.play:active{transform:scale(.95)}
.play:focus-visible{outline:2px solid var(--steel-hi);outline-offset:6px}
.play svg{width:38px;height:38px;fill:#111;position:absolute;transition:opacity .2s, transform .25s}
.play .ic-pause,.play .ic-load{opacity:0;transform:scale(.6)}
body.playing .play .ic-play{opacity:0;transform:scale(.6)}
body.playing .play .ic-pause{opacity:1;transform:scale(1)}
body.loading .play .ic-play{opacity:0}
body.loading .play .ic-load{opacity:1;transform:scale(1);animation:spin 1s linear infinite}

.card{
  display:flex;align-items:center;gap:12px;
  background:var(--panel);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:18px;padding:14px 18px;
}
.icon-btn{
  width:36px;height:36px;border-radius:10px;border:0;background:transparent;cursor:pointer;
  display:grid;place-items:center;color:var(--steel-hi);transition:color .2s, background .2s;
}
.icon-btn:hover{color:var(--gold);background:rgba(245,178,28,.08)}
.icon-btn svg{width:22px;height:22px}

/* Громкость */
.vol input{
  -webkit-appearance:none;appearance:none;width:140px;height:6px;border-radius:6px;cursor:pointer;
  background:linear-gradient(90deg,var(--gold) 0 var(--v,80%), #333 var(--v,80%) 100%);
}
.vol input::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--steel-hi);border:3px solid var(--gold);box-shadow:0 2px 8px rgba(0,0,0,.6);
  transition:transform .15s;
}
.vol input::-webkit-slider-thumb:hover{transform:scale(1.2)}
.vol input::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--steel-hi);border:3px solid var(--gold)}
.vol output{font-variant-numeric:tabular-nums;font-weight:600;font-size:13px;color:var(--steel);width:34px;text-align:right}

/* Слушатели */
.listeners .num{
  font-family:"Russo One",sans-serif;font-size:24px;color:var(--gold);
  font-variant-numeric:tabular-nums;line-height:1;
}
.listeners .lbl{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--steel);margin-top:4px}
.listeners svg{width:26px;height:26px;color:var(--gold)}
.eq-mini{display:flex;gap:2px;align-items:flex-end;height:18px;margin-left:4px}
.eq-mini span{width:3px;background:var(--gold);border-radius:2px;height:30%}
body.playing .eq-mini span{animation:mini 0.9s ease-in-out infinite}
.eq-mini span:nth-child(2){animation-delay:-.3s!important}
.eq-mini span:nth-child(3){animation-delay:-.6s!important}
.eq-mini span:nth-child(4){animation-delay:-.15s!important}
@keyframes mini{50%{height:100%}}

/* Контакты */
.contact{
  margin-top:34px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;
}
.phone{
  display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;
  padding:14px 22px 14px 14px;border-radius:999px;
  background:linear-gradient(90deg, rgba(245,178,28,.12), rgba(160,160,160,.06));
  border:1px solid var(--line);
  transition:border-color .25s, transform .25s;
}
.phone:hover{border-color:rgba(245,178,28,.6);transform:translateY(-2px)}
.phone .ph-ic{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--gold);color:#111;
  animation:ring 4s ease-in-out infinite;
}
.phone .ph-ic svg{width:22px;height:22px}
@keyframes ring{0%,80%,100%{transform:rotate(0)}83%{transform:rotate(-14deg)}86%{transform:rotate(12deg)}89%{transform:rotate(-10deg)}92%{transform:rotate(6deg)}}
.phone small{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel)}
.phone strong{font-family:"Russo One",sans-serif;font-weight:400;font-size:20px;color:var(--steel-hi);letter-spacing:.03em}
.copy{
  font:600 12px "Exo 2",sans-serif;letter-spacing:.12em;text-transform:uppercase;
  background:transparent;color:var(--steel);border:1px solid #333;border-radius:999px;padding:10px 16px;cursor:pointer;
  transition:color .2s,border-color .2s;
}
.copy:hover{color:var(--gold);border-color:var(--gold)}

footer{
  position:relative;z-index:3;text-align:center;padding:0 18px 26px;
  font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#555;
}
footer b{color:var(--gold-lo);font-weight:600}

/* Тост */
.toast{
  position:fixed;left:50%;bottom:24px;z-index:10;transform:translate(-50%,30px);opacity:0;
  background:#141414;border:1px solid var(--line);color:var(--steel-hi);
  padding:12px 18px;border-radius:12px;font-size:14px;max-width:90vw;text-align:center;
  transition:opacity .3s, transform .3s;pointer-events:none;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* Появление */
.rise{opacity:0;transform:translateY(18px);animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}

@media (max-width:560px){
  .play{width:84px;height:84px}
  .controls{gap:14px}
  .controls .play{order:-1;flex-basis:100%;max-width:84px;margin:0 calc(50% - 42px) 6px}
  .brand{font-size:12px}
  .vol input{width:110px}
  #viz{height:70px}
}

/* ===== Всё в один экран ===== */
html,body{height:100%;overflow:hidden}
body{height:100vh;height:100dvh;display:flex;flex-direction:column}
header{padding:clamp(10px,2.4vh,22px) clamp(18px,4vw,48px);flex:none}
main{flex:1;min-height:0;justify-content:space-evenly;padding:0 18px clamp(6px,1.5vh,20px)}
.stage{width:min(400px,78vw,38vh);margin:0}
@media (max-width:560px){ .stage{width:min(78vw,34vh)} }
.now{margin:0;min-height:0}
.now h1{margin-top:clamp(2px,.6vh,6px);font-size:clamp(20px,min(4.2vw,4vh),34px)}
#viz{height:clamp(36px,8vh,90px);margin:0 auto}
.controls{margin:0}
.play{width:clamp(70px,10vh,96px);height:clamp(70px,10vh,96px)}
.contact{margin:0}
.phone{padding:clamp(8px,1.4vh,14px) 22px clamp(8px,1.4vh,14px) clamp(8px,1.4vh,14px)}
footer{flex:none;padding:0 18px clamp(8px,1.8vh,22px);font-size:11px}
@media (max-height:640px){ footer{display:none} }
@media (max-width:560px){
  .controls{display:grid;grid-template-columns:auto auto;justify-content:center;column-gap:10px;row-gap:0}
  .controls .play{order:-1;grid-column:1 / -1;justify-self:center;margin:clamp(14px,2.6vh,26px) 0 clamp(22px,3.6vh,34px)}
  .controls .card{justify-content:center}
  .card{padding:10px 12px;gap:8px;border-radius:14px}
  .vol input{width:80px}
  .vol output{width:26px}
  .listeners .num{font-size:20px}
  .listeners .lbl{font-size:9px;letter-spacing:.12em}
  .listeners svg{width:22px;height:22px}
  .eq-mini{display:none}
  .copy{display:none}
  .phone strong{font-size:18px}
  .phone .ph-ic{width:38px;height:38px}
  footer{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition:none!important}
}