*{box-sizing:border-box}
html,body{min-height:100%;overflow-x:hidden}
html.radio-shell-open,body.radio-shell-open{height:100%!important;overflow:hidden!important}
body.radio-page{
  margin:0;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:#04070d;
  color:#edf2f8;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
button,input{font:inherit}
.radio-backdrop{
  position:fixed;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  pointer-events:none;
  background:radial-gradient(circle at 20% 15%,rgba(74,120,170,.12),transparent 22%),
             radial-gradient(circle at 78% 18%,rgba(103,159,223,.08),transparent 24%),
             linear-gradient(180deg,#060911 0%,#04070d 100%);
}
.radio-page-content,
.radio-footer{position:relative;z-index:2;background:transparent!important}
.radio-page-content{flex:1 0 auto}
.radio-footer{flex:0 0 auto;margin-top:auto!important}
.radio-page-content::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(4,7,13,.24),rgba(4,7,13,.52));
}
.radio-wrap{
  width:min(1280px,calc(100% - 36px));
  margin:0 auto;
  padding:18px 0 18px;
  display:grid;
  grid-template-columns:352px minmax(0,1fr);
  gap:18px;
  align-items:start;
}
.radio-player-square{
  position:sticky;
  top:92px;
  min-height:352px;
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:0;
  border:1px solid rgba(255,255,255,.10);
  border-radius:28px;
  background:linear-gradient(160deg,rgba(17,24,35,.95),rgba(7,11,18,.92));
  box-shadow:0 26px 74px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(18px);
  overflow:hidden;
}
.radio-player-square::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:radial-gradient(circle,rgba(95,164,235,.14),transparent 52%);
  transform:translate(-15%,-18%);
  pointer-events:none;
}
.radio-player-top,.radio-marquee,.radio-now-meta,.radio-square-visual,.radio-square-controls{position:relative;z-index:1}
.radio-player-top{display:flex;align-items:center;gap:11px;min-height:29px;color:rgba(255,255,255,.60);font-size:.76rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase}
.radio-player-live{width:10px;height:10px;border-radius:50%;background:#6f7783;transition:background .18s ease, box-shadow .18s ease}
body.radio-playing .radio-player-live{background:#39d98a;box-shadow:0 0 0 4px rgba(57,217,138,.12),0 0 18px rgba(57,217,138,.36)}
.radio-marquee{margin-top:18px;overflow:hidden;white-space:nowrap}
.radio-marquee>div{display:inline-block;min-width:100%;font-size:clamp(1.45rem,2.1vw,1.95rem);font-weight:950;letter-spacing:-.05em;animation:radio-marquee 11s linear infinite;animation-play-state:paused}
.radio-marquee.is-overflowing>div{padding-left:100%;animation-play-state:running}
.radio-now-meta{margin-top:9px;color:rgba(255,255,255,.60);font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.radio-square-visual{
  flex:1;
  min-height:118px;
  padding:12px 0 13px;
  display:block;
}
.radio-player-visualizer{
  display:block;
  width:100%;
  height:118px;
  border:1px solid rgba(154,208,255,.16);
  border-radius:13px;
  background:linear-gradient(180deg,rgba(1,8,8,.96),rgba(1,3,5,.98));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),inset 0 -20px 44px rgba(36,255,133,.025),0 12px 28px rgba(0,0,0,.22);
}
body.radio-playing .radio-player-visualizer{border-color:rgba(111,231,166,.24)}
.radio-square-controls{display:grid;grid-template-columns:minmax(0,1fr) 70px;align-items:center;gap:14px}
.radio-volume-control{min-width:0;display:grid;grid-template-columns:35px minmax(0,1fr) 35px;align-items:center;gap:8px}
.radio-volume-control button{height:35px;border:0;border-radius:11px;background:rgba(255,255,255,.08);color:#fff;font-weight:900;cursor:pointer}
.radio-volume-control input{width:100%;accent-color:#60c895}
.radio-master-toggle{width:70px;height:70px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.88);border-radius:20px;background:linear-gradient(180deg,#fff,#e1ecf6);color:#071019;box-shadow:0 14px 30px rgba(0,0,0,.28),inset 0 1px 0 #fff;cursor:pointer}
.radio-master-icon{font-size:1.12rem;font-weight:950;transform:translateX(1px)}
.radio-master-toggle.is-playing .radio-master-icon{transform:none}
.radio-library{
  margin-top:10px;
  padding:14px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  background:rgba(6,10,17,.78);
  box-shadow:0 18px 56px rgba(0,0,0,.26);
  backdrop-filter:blur(12px);
}
.radio-stations{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.radio-station-card{
  min-height:148px;
  padding:18px 18px 17px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 48px;
  gap:10px 14px;
  align-items:start;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(14,20,30,.96),rgba(9,14,22,.94));
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.radio-station-card:hover{transform:translateY(-2px);border-color:rgba(111,186,255,.28);background:linear-gradient(180deg,rgba(18,25,36,.98),rgba(10,15,23,.96));box-shadow:0 12px 28px rgba(0,0,0,.20)}
.radio-station-card.active{border-color:rgba(103,177,238,.38);background:linear-gradient(180deg,rgba(15,40,72,.84),rgba(9,16,25,.96))}
.radio-station-card.playing{border-color:rgba(57,217,138,.70);box-shadow:0 0 0 1px rgba(57,217,138,.10),0 0 28px rgba(57,217,138,.10)}
.radio-station-card.unavailable{opacity:.45;filter:saturate(.55)}
body.radio-page .radio-station-copy{min-width:0;display:grid;gap:8px;align-content:start;justify-items:start;text-align:left}
.radio-station-card h3{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.06rem;line-height:1.28;font-weight:900;letter-spacing:-.02em}
body.radio-page .radio-station-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;color:rgba(255,255,255,.60);font-size:.72rem;font-weight:700}
body.radio-page .radio-station-meta span{min-width:0;overflow:hidden;text-overflow:ellipsis}
body.radio-page .radio-station-meta span+span::before{content:'•';margin-right:6px;color:rgba(255,255,255,.28)}
.radio-select-btn{align-self:center;width:48px;height:48px;padding:0;display:grid;place-items:center;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.07);color:#fff;font-size:.92rem;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .15s ease}
.radio-select-btn:hover{transform:scale(1.03)}
.radio-station-card.playing .radio-select-btn{background:#edfff6;color:#07120c;border-color:#edfff6}
.radio-select-btn:disabled{cursor:not-allowed}
.radio-empty{grid-column:1/-1;padding:28px;border:1px dashed rgba(255,255,255,.12);border-radius:16px;text-align:center;color:rgba(255,255,255,.56)}
.radio-footer{margin:0!important;min-height:46px!important;padding:0 12px!important}
.radio-page-shell{position:fixed;inset:0;z-index:5200;display:none;overflow:hidden;background:#05070b}
.radio-page-shell.active{display:block}
.radio-page-shell iframe{display:block;width:100%;height:100%;border:0;background:#05070b;opacity:1;transition:opacity .12s ease}
.radio-page-shell iframe.is-loading{opacity:.68}
.radio-shell-open #czRadioMini{display:grid}
.radio-page:not(.radio-shell-open) #czRadioMini{display:none!important}

/* Suicideboys dynamic monochrome storm — no graves, bones or static symbols. */
.radio-suicide-ambience{
  --bolt-a-x:20%;--bolt-b-x:72%;--bolt-c-x:48%;
  position:fixed;
  inset:76px 0 46px;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
  opacity:0;
  transition:opacity .45s ease;
  isolation:isolate;
}
body.radio-suicide-mode .radio-suicide-ambience{opacity:1}
body.radio-suicide-mode .radio-page-content::before{
  background:
    radial-gradient(circle at 50% 22%,rgba(255,255,255,.025),transparent 26%),
    linear-gradient(180deg,rgba(0,0,0,.50),rgba(0,0,0,.74))!important;
}
.radio-suicide-fog,
.radio-suicide-haze,
.radio-suicide-rain{position:absolute;inset:-10%}
.radio-suicide-fog{
  background:
    radial-gradient(ellipse at 14% 76%,rgba(225,229,235,.13),transparent 28%),
    radial-gradient(ellipse at 78% 68%,rgba(202,208,216,.11),transparent 27%),
    radial-gradient(ellipse at 46% 92%,rgba(235,238,242,.09),transparent 24%);
  filter:grayscale(1) blur(18px) contrast(1.15);
  mix-blend-mode:screen;
  animation:radio-fog-shift 11s ease-in-out infinite alternate;
}
.radio-suicide-haze{
  inset:0;
  background:
    radial-gradient(circle at 50% 48%,transparent 0 22%,rgba(0,0,0,.38) 68%,rgba(0,0,0,.78) 100%),
    linear-gradient(115deg,rgba(255,255,255,.02),transparent 38%,rgba(255,255,255,.018) 62%,transparent);
  animation:radio-haze-breathe 5.5s ease-in-out infinite alternate;
}
.radio-suicide-rain{
  inset:-35% -15%;
  opacity:.16;
  background:repeating-linear-gradient(112deg,transparent 0 16px,rgba(235,240,246,.22) 17px,transparent 18px 34px);
  filter:blur(.45px);
  transform:translate3d(0,-15%,0);
  animation:radio-rain-fall 1.15s linear infinite;
}
.radio-suicide-ambience::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
  opacity:.10;
  background:
    repeating-radial-gradient(circle at 40% 50%,rgba(255,255,255,.12) 0 1px,transparent 1px 4px),
    linear-gradient(180deg,transparent,rgba(255,255,255,.025),transparent);
  background-size:7px 7px,100% 100%;
  mix-blend-mode:overlay;
  animation:radio-grain .24s steps(2,end) infinite;
}
.radio-suicide-ambience::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:5;
  opacity:0;
  background:radial-gradient(circle at var(--flash-x,50%) 12%,rgba(255,255,255,.90),rgba(220,232,242,.24) 18%,transparent 50%);
  mix-blend-mode:screen;
}
.radio-suicide-ambience.storm-strike::after{animation:radio-screen-flash .76s steps(1,end)}
.radio-suicide-lightning{
  position:absolute;
  z-index:6;
  top:-4%;
  width:clamp(22px,2.7vw,42px);
  height:clamp(230px,48vh,520px);
  opacity:0;
  background:linear-gradient(180deg,#fff 0%,#e8f1f8 38%,rgba(255,255,255,.12) 100%);
  clip-path:polygon(50% 0,88% 0,58% 31%,82% 31%,39% 62%,62% 62%,16% 100%,35% 67%,12% 67%,43% 37%,23% 37%);
  filter:grayscale(1) drop-shadow(0 0 7px rgba(255,255,255,.96)) drop-shadow(0 0 26px rgba(217,232,244,.68)) drop-shadow(0 0 60px rgba(255,255,255,.30));
  transform-origin:top center;
}
.lightning-a{left:var(--bolt-a-x);transform:rotate(var(--bolt-a-r,-7deg)) scaleY(var(--bolt-a-s,1))}
.lightning-b{left:var(--bolt-b-x);transform:rotate(var(--bolt-b-r,9deg)) scale(.76,1.12)}
.lightning-c{left:var(--bolt-c-x);transform:rotate(var(--bolt-c-r,-2deg)) scale(.54,.86)}
.radio-suicide-ambience.storm-strike .lightning-a{animation:radio-bolt-a .74s steps(1,end)}
.radio-suicide-ambience.storm-strike .lightning-b{animation:radio-bolt-b .74s steps(1,end)}
.radio-suicide-ambience.storm-strike .lightning-c{animation:radio-bolt-c .74s steps(1,end)}

@keyframes radio-marquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@keyframes radio-fog-shift{from{transform:translate3d(-3%,1%,0) scale(1.03)}to{transform:translate3d(4%,-2%,0) scale(1.12)}}
@keyframes radio-haze-breathe{from{opacity:.72;filter:contrast(1)}to{opacity:1;filter:contrast(1.22)}}
@keyframes radio-rain-fall{to{transform:translate3d(-5%,25%,0)}}
@keyframes radio-grain{0%{transform:translate(0,0)}25%{transform:translate(-1.5%,1%)}50%{transform:translate(1%,-1.5%)}75%{transform:translate(1.5%,1%)}100%{transform:translate(-1%,-1%)}}
@keyframes radio-screen-flash{0%,100%{opacity:0}8%{opacity:.88}13%{opacity:.12}19%{opacity:.62}27%{opacity:0}42%{opacity:.24}49%{opacity:0}}
@keyframes radio-bolt-a{0%,100%{opacity:0}7%{opacity:1}13%{opacity:.08}19%{opacity:.96}27%{opacity:0}}
@keyframes radio-bolt-b{0%,17%,100%{opacity:0}20%{opacity:.78}28%{opacity:.04}34%{opacity:.72}42%{opacity:0}}
@keyframes radio-bolt-c{0%,36%,100%{opacity:0}39%{opacity:.66}45%{opacity:.05}49%{opacity:.54}55%{opacity:0}}

@media(max-width:1180px){
  .radio-wrap{grid-template-columns:330px minmax(0,1fr)}
  .radio-stations{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:820px){
  .radio-wrap{display:block;width:calc(100% - 18px);padding-top:14px}
  .radio-player-square{position:relative;top:auto;width:min(506px,100%);min-height:0;margin:0 auto 14px}
  .radio-library{margin-top:0;padding:12px}
  .radio-stations{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
@media(max-width:560px){
  .radio-player-square{padding:18px;border-radius:22px}
  .radio-square-controls{grid-template-columns:minmax(0,1fr) 56px}
  .radio-master-toggle{width:56px;height:56px;border-radius:17px}
  .radio-volume-control{grid-template-columns:28px minmax(0,1fr) 28px;gap:6px}
  .radio-stations{grid-template-columns:1fr;gap:10px}
  .radio-station-card{min-height:124px;padding:14px 14px 13px;grid-template-columns:minmax(0,1fr) 46px;gap:8px 12px}
  .radio-station-card h3{font-size:.96rem}
  .radio-footer{font-size:.66rem!important}
  .legal-footer-links{gap:7px!important}
  .radio-suicide-ambience{inset:68px 0 52px}
}
@media(prefers-reduced-motion:reduce){
  .radio-station-card,.radio-page-shell iframe,.radio-suicide-ambience{transition:none!important}
  .radio-marquee>div,.radio-suicide-fog,.radio-suicide-rain,.radio-suicide-lightning,.radio-suicide-ambience::before,.radio-suicide-ambience::after{animation:none!important}
}


/* V32: audio-synchronised monochrome storm and modern glitch light. */
body.radio-suicide-mode .radio-backdrop{filter:grayscale(1) contrast(1.28) brightness(.68)}
body.radio-suicide-mode .radio-player-square{
  animation:radio-thunder-shell 3.8s ease-in-out infinite;
  border-color:rgba(235,241,247,.18)
}
.radio-suicide-haze::before,.radio-suicide-haze::after{
  content:"";
  position:absolute;
  left:-10%;right:-10%;
  height:11%;
  opacity:.0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);
  mix-blend-mode:screen;
  filter:blur(3px)
}
.radio-suicide-haze::before{top:28%;animation:radio-glitch-band-a 4.7s steps(1,end) infinite}
.radio-suicide-haze::after{top:63%;animation:radio-glitch-band-b 6.1s steps(1,end) infinite}
.radio-suicide-lightning::after{
  content:"";
  position:absolute;
  left:47%;top:28%;
  width:88%;height:52%;
  opacity:.76;
  background:inherit;
  clip-path:polygon(48% 0,70% 0,52% 43%,77% 43%,18% 100%,38% 55%,14% 55%);
  transform:rotate(36deg) scale(.62);
  transform-origin:top center
}
.radio-suicide-ambience.storm-strike{filter:contrast(1.16)}
.radio-suicide-ambience.storm-strike .radio-suicide-rain{opacity:.28;filter:blur(.2px) brightness(1.8)}
@keyframes radio-thunder-shell{
  0%,80%,100%{box-shadow:0 26px 74px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.03)}
  82%{box-shadow:0 26px 84px rgba(0,0,0,.64),0 0 42px rgba(235,242,248,.15),inset 0 0 28px rgba(255,255,255,.04)}
  84%{box-shadow:0 26px 74px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.03)}
  87%{box-shadow:0 26px 92px rgba(0,0,0,.68),0 0 58px rgba(235,242,248,.19),inset 0 0 34px rgba(255,255,255,.05)}
}
@keyframes radio-glitch-band-a{0%,77%,100%{opacity:0;transform:translateX(-7%)}78%{opacity:.62;transform:translateX(4%)}79%{opacity:.08;transform:translateX(-2%)}80%{opacity:.42;transform:translateX(8%)}81%{opacity:0}}
@keyframes radio-glitch-band-b{0%,88%,100%{opacity:0;transform:translateX(5%)}89%{opacity:.38;transform:translateX(-5%)}90%{opacity:.05;transform:translateX(3%)}91%{opacity:.28;transform:translateX(-8%)}92%{opacity:0}}
@media(max-width:560px){.radio-player-visualizer{height:104px}.radio-square-visual{min-height:104px}}


/* V33: only the player display is audio-reactive. */
.radio-backdrop{display:none!important}
.radio-page-shell iframe,.radio-page-shell iframe.is-loading{opacity:1!important;transition:none!important}
.radio-shell-open .radio-suicide-ambience{display:none!important}
.cz-radio-shell-document *{view-transition-name:none!important}
@media(max-width:720px){
  .radio-suicide-rain{opacity:.24!important}
  .radio-suicide-fog{filter:blur(8px)!important}
  .radio-suicide-grain{display:none!important}
}