@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600&family=Roboto:wght@400;500;700;900&display=swap');

:root{
  --red:#ef1826;
  --white:#eef2f4;
  --muted:#9aa7af;
  --panel:rgba(5,10,13,.78);
  --line:rgba(185,199,208,.30);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--white);
  background:#020507;
  font-family:Roboto,Arial,sans-serif;
  overflow-x:hidden;
  position:relative;
}
a{color:inherit}
body{
  margin:0;
  min-height:100vh;
  color:var(--white);
  background:#020507;
  font-family:Roboto,Arial,sans-serif;
  overflow-x:hidden;
  position:relative;
}
.site-bg{
  position:fixed;
  inset:0;
  width:100%;
  height:100vh;
  min-height:100vh;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  background:#020507;
}
.site-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(to bottom,rgba(0,3,5,.08) 0%,rgba(0,3,5,.18) 42%,rgba(0,3,5,.48) 68%,rgba(2,5,7,.98) 100%),url("radio-background.jpg");
  background-position:center top,center top;
  background-repeat:no-repeat,no-repeat;
  background-size:100% auto,100% auto;

}
.site-bg::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.03) 42%,rgba(0,0,0,.28) 70%,rgba(2,5,7,.98) 100%);
}
.topbar{
  position:relative;
  z-index:1;
  width:min(1180px,92vw);
  margin:auto;
  height:66px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:2;
}
.places,.motto{
  font:500 15px Oswald,sans-serif;
  letter-spacing:.16em;
  color:#d7dee3;
  text-transform:uppercase;
  text-shadow:0 3px 12px #000;
}
.motto{text-align:right}
.places i{font-style:normal;opacity:.55;margin:0 5px}
.wrap{width:min(1160px,92vw);margin:0 auto;position:relative;z-index:1}
.hero-brand{
  position:relative;
  min-height:180px;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:15px 20px 24px;
}
.hero-brand img{
  width:min(620px,78vw);
  max-height:180px;
  object-fit:contain;
  filter:drop-shadow(0 7px 13px rgba(0,0,0,.90));
  position:relative;
  z-index:2;
}
 .panel{
  position:relative;
  background-color:var(--panel);
  background-image:url("punk-frame.svg");
  background-size:100% 100%;
  background-position:center;
  background-repeat:no-repeat;
  border:0;
  box-shadow:0 18px 55px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.025);
  overflow:hidden;
}
.panel::before,.panel::after{content:none;}
.panel > *{position:relative;z-index:4;}
.promo-banners{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  padding:18px;
}
.promo-banner{
  display:block;
  width:100%;
  aspect-ratio:1 / 1;
  overflow:hidden;
  border-radius:16px;
  background:#050a0d;
  border:1px solid rgba(185,199,208,.24);
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.promo-banner[href]:hover{
  transform:translateY(-3px);
  border-color:rgba(239,24,38,.55);
  box-shadow:0 16px 34px rgba(0,0,0,.48),0 0 18px rgba(239,24,38,.12);
}
.promo-banner img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.radio-layout{
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(330px,.82fr);
  gap:18px;
  align-items:stretch;
}
.player,.recent{min-height:430px;border-radius:22px}
.player{padding:28px}
.player-main{
  display:grid;
  grid-template-columns:minmax(240px,38%) 1fr;
  gap:30px;
  align-items:center;
  height:100%;
}
.cover{
  width:100%;
  aspect-ratio:1;
  border:2px solid #6d7880;
  border-radius:17px;
  overflow:hidden;
  background:#070a0c;
  display:grid;
  place-items:center;
  box-shadow:0 12px 34px rgba(0,0,0,.55);
}
.cover img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;padding:12px;box-sizing:border-box}
.cover-fallback{text-align:center;font-style:italic;transform:skew(-7deg);line-height:.85}
.cover-fallback b{display:block;font-size:28px;color:#fff}
.cover-fallback strong{display:block;font-size:32px;color:var(--red)}
.meta{min-width:0}
.onair{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:8px 12px;
  border:1px solid rgba(239,24,38,.55);
  border-radius:8px;
  color:#ff3340;
  font:500 14px Oswald,sans-serif;
  letter-spacing:.12em;
  transform:rotate(-1deg);
  box-shadow:0 0 20px rgba(239,24,38,.12);
}
.dot{width:14px;height:14px;border-radius:50%;background:var(--red);box-shadow:0 0 14px var(--red)}
.meta h1{
  font-size:clamp(27px,3.6vw,45px);
  font-weight:500 !important;
  margin:5px 0 4px !important;
  line-height:1.08;
  min-width:0;
  max-width:100%;
  overflow:hidden;
  overflow-wrap:anywhere;
  word-break:break-word;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.meta h2{
  font-size:clamp(18px,1.8vw,22px);
  font-weight:400;
  color:#a8b5bd;
  margin:0 0 26px;
  min-width:0;
  max-width:100%;
  overflow:hidden;
  overflow-wrap:anywhere;
  word-break:break-word;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.progress-wrap{width:100%;transform:skewX(-8deg)}
.progress-wrap input{width:100%;accent-color:var(--red);cursor:pointer}
.times{display:flex;justify-content:space-between;color:#d6dde1;font-size:13px;margin-top:3px}
.controls{
  display:flex;
  align-items:center;
  gap:13px;
  margin-top:21px;
  flex-wrap:nowrap;
  min-width:0;
  width:100%;
  overflow:hidden;
}
.btn{
  flex:0 0 54px;
  width:54px;
  height:54px;
  aspect-ratio:1 / 1;
  padding:0;
  border-radius:50%;
  border:2px solid #29343b;
  background:rgba(4,9,12,.88);
  color:#eef2f4;
  font-size:19px;
  cursor:pointer;
  transition:border-color .15s,transform .15s;
}
.btn:hover{border-color:#77848c;transform:translateY(-1px)}
.btn.play{
  flex:0 0 78px;
  width:78px;
  height:78px;
  aspect-ratio:1 / 1;
  border:3px solid var(--red);
  font-size:28px;
  box-shadow:0 0 24px rgba(239,24,38,.24);
}
.volume{
  margin-left:auto;
  min-width:0;
  width:190px;
  max-width:190px;
  height:30px;
  display:flex;
  align-items:center;
  overflow:visible;
}
.volume input{
  appearance:none;
  -webkit-appearance:none;
  display:block;
  width:190px;
  max-width:190px;
  min-width:0;
  height:18px;
  margin:0;
  padding:0;
  background:transparent;
  accent-color:auto;
  cursor:pointer;
}
.volume input::-webkit-slider-runnable-track{
  height:6px;
  border-radius:0;
  background:linear-gradient(to right,var(--red) 0%,var(--red) var(--volume,50%),rgba(225,231,234,.82) var(--volume,50%),rgba(225,231,234,.82) 100%);
}
.volume input::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:14px;
  height:14px;
  margin-top:-4px;
  border-radius:50%;
  border:2px solid #11181d;
  background:var(--red);
}
.volume input::-moz-range-track{height:6px;border-radius:0;background:rgba(225,231,234,.82);}
.volume input::-moz-range-progress{height:6px;background:var(--red);}
.volume input::-moz-range-thumb{width:14px;height:14px;border-radius:50%;border:2px solid #11181d;background:var(--red);}
audio{display:none}

.recent{display:flex;flex-direction:column;min-width:0}
.recent .panel-head{background:linear-gradient(90deg,rgba(255,255,255,.035),transparent)}
.panel-head{
  min-height:65px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  padding:17px 20px;
  border-bottom:1px solid rgba(170,185,195,.22);
  position:relative;
  z-index:2;
}
.panel-head h2{margin:0;font-size:18px;letter-spacing:.11em}
.panel-head span{color:#8f9ca5;font:400 14px Oswald,sans-serif;letter-spacing:.08em}
.recent-list{flex:1}
.recent-row{
  display:grid;
  grid-template-columns:80px minmax(0,1fr);
  min-height:78px;
  gap:12px;
  align-items:center;
  padding:10px 20px;
  border-bottom:1px solid rgba(170,185,195,.14);
}
.recent-row time{color:#84939d;font:400 14px Oswald,sans-serif}
.recent-row span{color:#aab6bd;font-size:14px;line-height:1.35;min-width:0;overflow:hidden;display:block;word-break:break-word}
.recent-row b{color:#f0f2f3;white-space:normal}
.recent-row.active{background:rgba(239,24,38,.08)}
.empty{padding:24px;color:#84939d;font-size:14px}

.groups{margin-top:18px;border-radius:19px}
.groups .panel-head{padding:18px 20px 8px}
.groups .panel-head h2{font-size:18px;line-height:1.35;letter-spacing:.08em}
.group-links{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
  padding:18px;
}
.group-card{
  min-height:86px;
  display:grid;
  place-items:center;
  text-decoration:none;
  color:#aab6bd;
  font:500 13px Oswald,sans-serif;
  letter-spacing:.09em;
  border:0;
  position:relative;
  transform:rotate(-.55deg);
  background:rgba(3,8,10,.48);
}
.group-card:nth-child(even){transform:rotate(.7deg)}
.group-card:hover{color:#fff;border-color:rgba(239,24,38,.7)}

.rights{margin-top:18px;border-radius:18px;padding:27px 30px 25px}
.rights h2{margin:0 0 12px;font-size:19px;letter-spacing:.12em}
.rights p{margin:7px 0;color:#aebac1;line-height:1.6;font-size:14px;max-width:930px}
.rights a{color:#fff;text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:4px}
.rights .geo{color:#d8dfe3;font-weight:500}

.footer{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:28px 0 42px;
  margin-top:18px;
  color:#87949d;
  font:400 13px Oswald,sans-serif;
  letter-spacing:.13em;
  text-transform:uppercase;
  border-top:1px solid rgba(170,185,195,.22);
}

@media(max-width:900px){
  .topbar{padding:0 2vw}
  .radio-layout{grid-template-columns:1fr}
  .recent{min-height:330px}
  .group-links{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:650px){
  .topbar{height:54px}
  .places,.motto{font-size:10px;letter-spacing:.08em}
  .hero-brand{min-height:130px}
  .hero-brand img{width:92vw}
  .radio-layout{gap:12px}
  .player{padding:17px}
  .player-main{grid-template-columns:1fr;gap:20px}
  .cover{max-width:280px;margin:auto}
  .controls{gap:7px;flex-wrap:wrap}
  .btn{flex:0 0 47px;width:47px;height:47px}
  .btn.play{flex:0 0 68px;width:68px;height:68px}
  .volume{flex:1 1 100%;width:auto;max-width:none;margin-left:0}
  .volume input{flex:1;max-width:none;width:auto}
  .group-links{grid-template-columns:1fr 1fr;padding:13px}
  .panel-head{align-items:flex-start;flex-direction:column;gap:4px}
  .footer{flex-direction:column;gap:9px}
}

/* final frame: angular black-metal / xerox border */
.panel{
  position:relative;
  border:26px solid transparent;
  border-image-source:url("punk-frame.svg");
  border-image-slice:32 fill;
  border-image-width:26px;
  border-image-outset:0;
  border-image-repeat:stretch;
  border-radius:0;
  background-color:var(--panel);
  background-image:none;
}
.panel::before,.panel::after{content:none !important;}
.panel > *{position:relative;z-index:2;}

/* Daily group voting */
.vote{margin-top:18px;border-radius:18px;overflow:hidden}
.vote-body{padding:14px 18px 16px}
.vote-groups{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.vote-option{min-height:40px;display:flex;align-items:center;gap:7px;padding:7px 9px;background:rgba(3,8,10,.58);color:#d8e0e4;font:500 12px Oswald,sans-serif;letter-spacing:.025em;cursor:pointer;border:1px solid rgba(185,199,208,.10);border-radius:3px;transition:background .15s,border-color .15s}
.vote-option{position:relative}
.vote-group-name{display:inline-block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.artist-info-btn{margin-left:auto;flex:0 0 24px;width:24px;height:24px;padding:0;border:1px solid rgba(255,255,255,.9);border-radius:50%;background:rgba(5,9,12,.86);color:#fff;font:700 14px Arial,sans-serif;line-height:22px;text-align:center;cursor:pointer;box-shadow:0 0 0 1px rgba(0,0,0,.25);transition:background .15s,border-color .15s,transform .15s}
.artist-info-btn:hover,.artist-info-btn:focus-visible{background:rgba(5,9,12,.86);border-color:var(--red);outline:none;transform:scale(1.06)}
.artist-info-btn:active{background:rgba(5,9,12,.86);border-color:var(--red);transform:scale(1.03)}
.artist-info-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px}
.artist-info-modal[hidden]{display:none}
.artist-info-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(3px)}
.artist-info-dialog{position:relative;z-index:1;width:min(420px,100%);padding:25px 24px 24px;background:rgba(5,9,12,.98);border:1px solid rgba(239,24,38,.72);box-shadow:0 12px 45px rgba(0,0,0,.65);border-radius:4px;color:#e9eef0}
.artist-info-kicker{margin-bottom:9px;color:var(--red);font:700 10px Oswald,sans-serif;letter-spacing:.16em}
.artist-info-dialog h3{margin:0 36px 14px 0;color:#fff;font:700 clamp(24px,5vw,32px) Oswald,sans-serif;line-height:1.05}
.artist-info-city{padding-top:12px;border-top:1px solid rgba(185,199,208,.16);color:#dbe1e4;font:500 16px Oswald,sans-serif;letter-spacing:.03em}
.artist-info-text{margin-top:14px;color:#aeb9bf;font:400 14px/1.5 Oswald,sans-serif;white-space:pre-wrap}
.artist-info-close{position:absolute;top:8px;right:9px;width:30px;height:30px;padding:0;border:0;background:transparent;color:#aeb9bf;font:400 28px/28px Arial,sans-serif;cursor:pointer}
.artist-info-close:hover,.artist-info-close:focus-visible{color:#fff;outline:none}
body.modal-open{overflow:hidden}
.vote-option input{accent-color:var(--red);width:14px;height:14px;flex:0 0 auto;margin:0}
.vote-option:has(input:checked){background:rgba(239,24,38,.14);border-color:rgba(239,24,38,.50);box-shadow:inset 0 0 0 1px rgba(239,24,38,.22)}
.vote-actions{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.vote-submit{border:1px solid rgba(239,24,38,.72);background:var(--red);color:#fff;padding:8px 14px;font:600 12px Oswald,sans-serif;letter-spacing:.08em;cursor:pointer;border-radius:2px}
.vote-submit:disabled{opacity:.5;cursor:default}
.vote-message{color:#9eabb3;font-size:12px}
.vote-results{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px 10px;margin-top:13px;padding-top:11px;border-top:1px solid rgba(185,199,208,.13)}
.vote-result{min-width:0;padding:6px 8px;background:rgba(3,8,10,.38);border:1px solid rgba(185,199,208,.08);border-radius:3px}
.vote-result>div{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#d9e0e4;font-size:11px;margin-bottom:4px;white-space:nowrap}
.vote-result b{overflow:hidden;text-overflow:ellipsis}
.vote-result span{color:#84929b;font-size:10px;flex:0 0 auto}
.vote-result>i{display:block;height:3px;background:rgba(220,227,231,.12);overflow:hidden;border-radius:2px}
.vote-result em{display:block;height:100%;background:var(--red);border-radius:2px}
@media(max-width:1100px){.vote-groups{grid-template-columns:repeat(4,minmax(0,1fr))}.vote-results{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.vote-groups{grid-template-columns:repeat(3,minmax(0,1fr))}.vote-results{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.vote-groups,.vote-results{grid-template-columns:1fr}.vote-body{padding:12px}}


/* Requested radio layout fixes */
.radio-layout .player,
.radio-layout .recent{
  height:380px;
  min-height:0;
}
.recent{
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.recent-list{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:rgba(239,24,38,.65) rgba(255,255,255,.08);
}
.recent-list::-webkit-scrollbar{width:7px}
.recent-list::-webkit-scrollbar-track{background:rgba(255,255,255,.06)}
.recent-list::-webkit-scrollbar-thumb{background:rgba(239,24,38,.65);border-radius:4px}

.panel-head > div:first-child{min-width:0}
.panel-head > div:first-child span{
  display:block;
  margin-top:4px;
  color:#8f9ca5;
  font:400 12px Oswald,sans-serif;
  letter-spacing:.06em;
}
.radio-stats-loading{opacity:.7}

.share{
  margin-top:18px;
  border-radius:18px;
}
.share-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:22px 24px;
}
.share-copy h2{
  margin:0 0 7px;
  font-size:18px;
  letter-spacing:.08em;
}
.share-copy p{
  margin:0;
  color:#aebac1;
  font:400 15px Oswald,sans-serif;
  letter-spacing:.04em;
}
.share-links{
  display:flex;
  gap:10px;
  flex:0 0 auto;
}
.share-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:125px;
  min-height:44px;
  padding:10px 16px;
  background:rgba(239,24,38,.12);
  border:1px solid rgba(239,24,38,.55);
  color:#eef2f4;
  text-decoration:none;
  font:600 13px Oswald,sans-serif;
  letter-spacing:.08em;
  transform:rotate(-.5deg);
}
.share-links a:nth-child(2){transform:rotate(.6deg)}
.share-links a:hover{background:rgba(239,24,38,.22);color:#fff}

@media(max-width:900px){
  .radio-layout .player,
  .radio-layout .recent{
    height:auto;
    min-height:330px;
  }
  .recent-list{max-height:270px}
  .share-inner{align-items:flex-start;flex-direction:column}
  .share-links{width:100%}
  .share-links a{flex:1}
}
@media(max-width:650px){
  .radio-layout .player{min-height:0}
  .radio-layout .recent{min-height:330px}
  .share-inner{padding:18px 16px}
  .share-links{flex-direction:column}
  .share-links a{width:100%}
}

/* Animated concert light behind the interface panels. */
.site-light{
  position:absolute;
  top:-22vh;
  bottom:-22vh;
  width:55vw;
  min-width:320px;
  max-width:760px;
  pointer-events:none;
  z-index:2;
  opacity:.72;
  filter:blur(12px) saturate(1.5);
  mix-blend-mode:screen;
  border-radius:50%;
  will-change:transform,filter;
}
.site-light::after{
  content:"";
  position:absolute;
  top:8%;
  bottom:8%;
  width:34%;
  border-radius:50%;
  background:radial-gradient(ellipse at center, currentColor 0%, rgba(255,255,255,.18) 16%, rgba(255,255,255,0) 68%);
  opacity:.32;
  filter:blur(18px);
  box-shadow:0 0 90px currentColor;
}
.light-left{
  left:-22%;
  color:#ef1826;
  background:radial-gradient(ellipse at center,rgba(239,24,38,.95) 0,rgba(239,24,38,.58) 22%,rgba(239,24,38,.22) 48%,transparent 72%);
  animation:concertLightLeft 9s ease-in-out infinite alternate,concertHueLeft 14s linear infinite;
}
.light-left::after{left:55%;}
.light-right{
  right:-22%;
  color:#ffd21a;
  background:radial-gradient(ellipse at center,rgba(255,210,26,.95) 0,rgba(255,210,26,.58) 22%,rgba(255,210,26,.22) 48%,transparent 72%);
  animation:concertLightRight 11s ease-in-out infinite alternate,concertHueRight 17s linear infinite;
}
.light-right::after{right:55%;}
@keyframes concertLightLeft{
  0%{transform:translate3d(-8vw,4vh,0) rotate(-22deg) scale(.78)}
  50%{transform:translate3d(18vw,-3vh,0) rotate(8deg) scale(1.12)}
  100%{transform:translate3d(4vw,5vh,0) rotate(24deg) scale(.88)}
}
@keyframes concertLightRight{
  0%{transform:translate3d(8vw,3vh,0) rotate(22deg) scale(.78)}
  50%{transform:translate3d(-18vw,-4vh,0) rotate(-8deg) scale(1.12)}
  100%{transform:translate3d(-4vw,5vh,0) rotate(-24deg) scale(.88)}
}
@keyframes concertHueLeft{
  0%{filter:blur(12px) saturate(1.5) hue-rotate(0deg)}
  20%{filter:blur(12px) saturate(1.5) hue-rotate(65deg)}
  40%{filter:blur(12px) saturate(1.5) hue-rotate(130deg)}
  60%{filter:blur(12px) saturate(1.5) hue-rotate(200deg)}
  80%{filter:blur(12px) saturate(1.5) hue-rotate(285deg)}
  100%{filter:blur(12px) saturate(1.5) hue-rotate(360deg)}
}
@keyframes concertHueRight{
  0%{filter:blur(12px) saturate(1.5) hue-rotate(55deg)}
  20%{filter:blur(12px) saturate(1.5) hue-rotate(120deg)}
  40%{filter:blur(12px) saturate(1.5) hue-rotate(185deg)}
  60%{filter:blur(12px) saturate(1.5) hue-rotate(245deg)}
  80%{filter:blur(12px) saturate(1.5) hue-rotate(305deg)}
  100%{filter:blur(12px) saturate(1.5) hue-rotate(415deg)}
}

@media (max-width:700px){
  .recent-row{grid-template-columns:60px minmax(0,1fr);min-height:68px;padding:5px 14px;gap:10px}
  .recent-cover{width:60px;height:60px;min-width:60px;min-height:60px}
}


/* Radio history artwork: fixed square frame, image keeps its original proportions. */
.recent-row .recent-cover{
  width:70px !important;
  height:70px !important;
  min-width:70px !important;
  min-height:70px !important;
  max-width:70px !important;
  max-height:70px !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 70px !important;
  background:rgba(4,9,12,.62) !important;
}
.recent-row .recent-cover img{
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
  display:block !important;
  padding:0 !important;
}
@media(max-width:700px){
  .recent-row .recent-cover{
    width:60px !important;height:60px !important;min-width:60px !important;min-height:60px !important;max-width:60px !important;max-height:60px !important;flex-basis:60px !important;
  }
}


/* Stage effects controls */
.volume-wrap{
  flex:1 1 260px;
  min-width:220px;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.fx-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
}
.fx-btn{
  height:30px;
  min-width:86px;
  padding:0 10px;
  border:1px solid rgba(239,24,38,.62);
  border-radius:7px;
  background:rgba(5,10,13,.82);
  color:#dce3e7;
  font:600 11px Oswald,sans-serif;
  letter-spacing:.07em;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:.2s ease;
}
.fx-btn:hover{border-color:#ef1826;box-shadow:0 0 14px rgba(239,24,38,.2)}
.fx-btn[aria-pressed="true"]{background:rgba(239,24,38,.24);color:#fff;border-color:#ef1826;box-shadow:0 0 16px rgba(239,24,38,.28)}
.site-bg.effects-off .site-light{animation:none!important;opacity:0!important}
 .smoke-machine{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:2;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  overflow:hidden;
  transition:opacity .25s ease;
}
.smoke-machine.active{opacity:1;visibility:visible}

.smoke-machine::before,
.smoke-machine::after{
  content:"";
  position:absolute;
  bottom:-28vh;
  width:72vw;
  height:130vh;
  background:url("smoke.png") center bottom / 100% 100% no-repeat;
  pointer-events:none;
  will-change:transform,opacity;
  opacity:0;
  /* Fade the texture at every edge so its rectangular boundary can never appear. */
  -webkit-mask-image:linear-gradient(to bottom,
    transparent 0%,
    rgba(0,0,0,.18) 8%,
    #000 22%,
    #000 72%,
    rgba(0,0,0,.72) 86%,
    transparent 100%);
  mask-image:linear-gradient(to bottom,
    transparent 0%,
    rgba(0,0,0,.18) 8%,
    #000 22%,
    #000 72%,
    rgba(0,0,0,.72) 86%,
    transparent 100%);
}
.smoke-machine::before{left:-28vw}
.smoke-machine::after{
  right:-28vw;
  transform:scaleX(-1);
}

.smoke-machine.active::before{animation:smokeTextureLeft 11s ease-in-out infinite}
.smoke-machine.active::after{animation:smokeTextureRight 11.7s ease-in-out .7s infinite}

@keyframes smokeTextureLeft{
  0%{transform:translate3d(-2vw,5vh,0) scale(.86);opacity:0}
  10%{opacity:.90}
  32%{transform:translate3d(2vw,-3vh,0) scale(.94);opacity:.84}
  56%{transform:translate3d(8vw,-15vh,0) scale(1.04);opacity:.64}
  78%{transform:translate3d(14vw,-29vh,0) scale(1.16);opacity:.36}
  100%{transform:translate3d(20vw,-43vh,0) scale(1.28);opacity:0}
}
@keyframes smokeTextureRight{
  0%{transform:translate3d(2vw,5vh,0) scale(.86) scaleX(-1);opacity:0}
  10%{opacity:.90}
  32%{transform:translate3d(-2vw,-3vh,0) scale(.94) scaleX(-1);opacity:.84}
  56%{transform:translate3d(-8vw,-15vh,0) scale(1.04) scaleX(-1);opacity:.64}
  78%{transform:translate3d(-14vw,-29vh,0) scale(1.16) scaleX(-1);opacity:.36}
  100%{transform:translate3d(-20vw,-43vh,0) scale(1.28) scaleX(-1);opacity:0}
}

@media(max-width:650px){
  .fx-btn{min-width:58px;padding:0 9px;font-size:11px}
  .smoke-machine{width:360px}
}


/* Air stats and share layout */
.share-inner{
  display:grid;
  grid-template-columns:minmax(300px,1.05fr) minmax(360px,1.35fr) auto;
  align-items:center;
  gap:34px;
  padding:22px 24px;
}
.air-stats{
  position:relative;
  min-width:0;
  padding:12px 14px 14px;
  border:1px solid rgba(239,24,38,.62);
  border-radius:4px;
  background:linear-gradient(180deg,rgba(20,7,10,.92),rgba(7,10,14,.88));
  box-shadow:inset 0 0 18px rgba(239,24,38,.08),0 0 10px rgba(239,24,38,.08);
  transform:rotate(-.25deg);
}
.air-stats::before{
  content:"";
  position:absolute;
  inset:4px;
  border:1px solid rgba(255,255,255,.08);
  pointer-events:none;
}
.air-stats-title{
  display:block;
  margin:0 0 9px 2px;
  color:#ef2b35;
  font:700 13px Oswald,sans-serif;
  letter-spacing:.14em;
}
.scoreboard{
  display:flex;
  align-items:flex-start;
  gap:18px;
}
.scoreboard-counter{
  min-width:0;
  flex:1 1 0;
  text-align:center;
}
.scoreboard-digits{
  display:flex;
  justify-content:center;
  gap:3px;
  min-height:58px;
}
.flip-digit{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:35px;
  height:58px;
  overflow:hidden;
  color:#f2f2f2;
  background:linear-gradient(180deg,#282828 0%,#171717 47%,#090909 50%,#222 53%,#151515 100%);
  border:1px solid #050505;
  border-radius:4px;
  box-shadow:0 2px 0 #000, inset 0 1px 1px rgba(255,255,255,.18), inset 0 -2px 4px rgba(0,0,0,.8);
  font:700 45px/1 Oswald,sans-serif;
  text-shadow:0 2px 1px #000;
}
.flip-digit::before{
  content:"";
  position:absolute;
  left:0; right:0; top:50%;
  height:2px;
  transform:translateY(-1px);
  background:rgba(0,0,0,.8);
  box-shadow:0 1px 0 rgba(255,255,255,.08);
}
.flip-digit::after{
  content:"";
  position:absolute;
  left:4px; right:4px; top:2px;
  height:1px;
  background:rgba(255,255,255,.16);
}
.scoreboard-caption{
  display:block;
  margin-top:7px;
  color:#d4d8da;
  font:700 13px Oswald,sans-serif;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.scoreboard-error{
  color:#aebac1;
  font:400 14px Oswald,sans-serif;
}
.share-copy{
  min-width:0;
  margin-left:24px;
}
.share-copy h2{
  margin:0 0 7px;
  font-size:18px;
  letter-spacing:.08em;
}
.share-copy p{
  margin:0;
  color:#aebac1;
  font:400 15px Oswald,sans-serif;
  letter-spacing:.04em;
}
.share-links{
  position:relative;
  padding-left:24px;
}
@media(max-width:1100px){
  .share-inner{grid-template-columns:minmax(270px,1fr) minmax(300px,1.2fr) auto;gap:18px;padding:20px 18px}
  .share-copy{margin-left:8px}
  .share-copy h2{font-size:16px}
  .flip-digit{width:31px;height:52px;font-size:40px}
  .scoreboard-digits{min-height:52px}
}
@media(max-width:900px){
  .share-inner{display:grid;grid-template-columns:1fr 1fr;align-items:center}
  .air-stats{grid-column:1}
  .share-copy{grid-column:2;margin-left:0}
  .share-links{grid-column:1 / -1;width:100%;padding-left:0}
  .share-links::before{display:none}
}
@media(max-width:650px){
  .share-inner{display:flex;align-items:stretch;flex-direction:column;padding:18px 16px}
  .air-stats,.share-copy,.share-links{width:100%}
  .share-copy{margin:0}
  .share-links{padding-left:0}
  .scoreboard{gap:10px}
  .flip-digit{width:28px;height:48px;font-size:36px}
  .scoreboard-digits{min-height:48px}
}


/* RuStore app */
.rustore-app{margin-top:18px;border-radius:18px}
.rustore-app-inner{
  min-height:142px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding:22px 28px;
}
.rustore-app-copy{min-width:0}
.rustore-app-copy h2{margin:0 0 7px;font-size:19px;letter-spacing:.09em}
.rustore-app-copy p{margin:0;color:#aebac1;font-size:14px;line-height:1.5}
.rustore-badge{display:block;flex:0 0 auto;line-height:0}
.rustore-badge img{display:block;width:333px;height:120px;max-width:100%;object-fit:contain}

/* Android-only RuStore install suggestion */
.android-install-prompt{
  position:fixed;
  left:50%;
  bottom:18px;
  z-index:10000;
  width:min(560px,calc(100vw - 24px));
  transform:translate(-50%,calc(140% + 20px));
  opacity:0;
  pointer-events:none;
  transition:transform .28s ease,opacity .28s ease;
  background:rgba(7,10,14,.97);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 14px 45px rgba(0,0,0,.65),0 0 24px rgba(239,24,38,.12);
  border-radius:14px;
  padding:15px 16px;
}
.android-install-prompt.is-visible{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.android-install-prompt-inner{display:flex;align-items:center;gap:13px}
.android-install-prompt-text{min-width:0;flex:1;color:#eef2f4;font-size:14px;line-height:1.35}
.android-install-prompt-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.android-install-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:38px;padding:0 14px;
  border:1px solid rgba(255,255,255,.75);
  border-radius:8px;
  background:#fff;color:#080b0d;
  text-decoration:none;
  font:700 12px Oswald,sans-serif;
  letter-spacing:.08em;
  white-space:nowrap;
}
.android-install-close{
  width:34px;height:34px;padding:0;
  border:1px solid rgba(255,255,255,.24);
  border-radius:8px;
  background:transparent;color:#b8c0c5;
  font-size:20px;line-height:1;cursor:pointer;
}
.android-install-close:hover{color:#fff;border-color:rgba(255,255,255,.55)}
@media(max-width:650px){
  .rustore-app-inner{padding:18px 16px;flex-direction:column;align-items:flex-start;gap:14px}
  .rustore-badge{width:100%}
  .rustore-badge img{width:min(330px,100%)}
  .android-install-prompt{bottom:10px}
  .android-install-prompt-inner{align-items:flex-start}
  .android-install-prompt-actions{flex-direction:column}
  .android-install-btn{min-height:34px;padding:0 12px}
}



/* Share / app / stats three-tile layout */
.share-tiles{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  padding:14px;
}
.share-tile{
  min-height:142px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:16px 14px;
  border:1px solid rgba(185,199,208,.28);
  border-radius:14px;
  background:rgba(2,7,10,.48);
}
.share-tile-title{
  color:#eef2f4;
  font:600 14px Oswald,sans-serif;
  letter-spacing:.09em;
  text-align:center;
}
.share-tile-subtitle{
  margin-top:-7px;
  color:#cbd3d8;
  font:500 10px Oswald,sans-serif;
  letter-spacing:.11em;
  text-align:center;
}
.rustore-tile .rustore-badge{
  width:170px;
  max-width:82%;
}
.rustore-tile .rustore-badge img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}
.stats-tile .air-stats{
  width:100%;
}
.stats-tile .scoreboard{
  justify-content:center;
  gap:24px;
}
.stats-tile .scoreboard-caption{
  margin-top:6px;
}
.send-music-btn{
  width:100%;
  max-width:260px;
  min-height:38px;
  border:1px solid rgba(239,24,38,.55);
  border-radius:5px;
  background:rgba(239,24,38,.08);
  color:#f1f3f4;
  font:600 11px Oswald,sans-serif;
  letter-spacing:.07em;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease;
}
.send-music-btn:hover{background:rgba(239,24,38,.2);border-color:rgba(239,24,38,.85)}
.social-tile .share-links{
  display:flex;
  flex-direction:column;
  width:100%;
  justify-content:center;
  gap:6px;
  padding:0;
}
.social-tile .share-links::before{display:none}
.social-tile .share-links a{
  width:100%;
  min-width:0;
  min-height:40px;
  padding:8px 6px;
  font-size:11px;
  letter-spacing:.04em;
  transform:none;
}
.social-tile .share-links a:nth-child(2){transform:none}
@media(max-width:900px){
  .share-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:12px}
  .share-tile{min-height:128px;padding:13px 9px}
  .rustore-tile .rustore-badge{width:145px}
  .stats-tile .scoreboard{gap:12px}
  .social-tile .share-links{gap:5px}
  .social-tile .share-links a{font-size:10px}
}
@media(max-width:650px){
  .share-tiles{grid-template-columns:1fr;gap:10px;padding:12px}
  .share-tile{min-height:112px}
  .rustore-tile .rustore-badge{width:170px}
  .social-tile .share-links a{font-size:11px}
}


/* Send music modal */
.music-modal[hidden]{display:none}
.music-modal{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:20px}
.music-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(3px)}
.music-modal-card{position:relative;width:min(520px,100%);padding:28px 26px 24px;border:1px solid rgba(239,24,38,.6);border-radius:14px;background:rgba(5,9,12,.97);box-shadow:0 20px 70px rgba(0,0,0,.65);text-align:center}
.music-modal-title{margin-bottom:16px;color:#fff;font:600 18px Oswald,sans-serif;letter-spacing:.1em}
.music-modal-card p{margin:0 auto 22px;max-width:420px;color:#cbd3d8;font-size:15px;line-height:1.55}
.music-modal-close{position:absolute;top:7px;right:10px;border:0;background:none;color:#d5dadd;font-size:28px;line-height:1;cursor:pointer}
.music-modal-send{display:inline-flex;align-items:center;justify-content:center;min-width:190px;min-height:42px;padding:9px 18px;border:1px solid rgba(239,24,38,.7);border-radius:5px;background:rgba(239,24,38,.1);color:#fff;text-decoration:none;font:600 12px Oswald,sans-serif;letter-spacing:.08em}


/* Mobile-safe artist information button */
.vote-option{display:flex !important;align-items:center !important;min-width:0 !important;}
.vote-check{display:flex;align-items:center;gap:7px;min-width:0;flex:1 1 auto;cursor:pointer;}
.vote-check input{flex:0 0 auto;}
.vote-check .vote-group-name{flex:1 1 auto;min-width:0;}
.artist-info-btn{display:flex !important;visibility:visible !important;opacity:1 !important;position:relative !important;z-index:20 !important;pointer-events:auto !important;align-items:center;justify-content:center;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
@media(max-width:650px){
  .vote-groups{grid-template-columns:1fr !important;}
  .vote-option{min-height:46px !important;padding:8px 10px !important;}
  .artist-info-btn{flex:0 0 30px !important;width:30px !important;height:30px !important;min-width:30px !important;font-size:16px !important;line-height:28px !important;}
}


/* Final mobile group info button */
.vote-option{display:flex !important;align-items:center !important;justify-content:space-between !important;gap:10px !important;}
.vote-check{display:flex !important;align-items:center !important;gap:8px !important;min-width:0 !important;flex:1 1 auto !important;cursor:pointer !important;}
.artist-info-btn{
  flex:0 0 28px !important;
  width:28px !important;
  height:28px !important;
  min-width:28px !important;
  min-height:28px !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid rgba(255,255,255,.95) !important;
  border-radius:50% !important;
  background:transparent !important;
  color:#fff !important;
  font:700 14px/1 Arial,sans-serif !important;
  box-shadow:none !important;
  position:relative !important;
  z-index:20 !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
  touch-action:manipulation !important;
}
.artist-info-btn:hover,.artist-info-btn:focus-visible,.artist-info-btn:active{
  background:rgba(255,255,255,.08) !important;
  border-color:#fff !important;
  color:#fff !important;
  outline:none !important;
  transform:none !important;
}
.artist-info-modal{
  position:fixed !important;
  inset:0 !important;
  z-index:2147483647 !important;
  display:grid !important;
  place-items:center !important;
  padding:18px !important;
  pointer-events:auto !important;
}
.artist-info-modal[hidden]{display:none !important;pointer-events:none !important;}
.artist-info-dialog{
  position:relative !important;
  z-index:2 !important;
  width:min(420px,calc(100vw - 30px)) !important;
  max-height:calc(100vh - 36px) !important;
  overflow:hidden !important;
}
@media(max-width:650px){
  .vote-option{min-height:46px !important;padding:8px 10px !important;}
  .artist-info-btn{width:30px !important;height:30px !important;min-width:30px !important;min-height:30px !important;font-size:15px !important;}
}

@media(max-width:700px){
  .groups .panel-head{padding:16px 14px 6px}
  .groups .panel-head h2{font-size:16px;line-height:1.35}
  .promo-banners{grid-template-columns:1fr;gap:12px;padding:10px 14px 16px}
}


/* Clean, single source of truth for the application download tile */
.rustore-tile{
  position:relative;
  overflow:visible;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:0;
  min-width:0;
  min-height:190px;
  padding:14px 18px 14px 8px;
}
.rustore-tile .app-phone{
  position:absolute;
  left:0;
  top:50%;
  z-index:3;
  width:170px;
  height:190px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translate(-18px,-50%);
  overflow:visible;
  pointer-events:none;
}
.rustore-tile .app-phone img{
  display:block;
  width:165px;
  max-width:none;
  height:auto;
  transform:rotate(-10deg);
  transform-origin:center center;
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.65));
}
.rustore-tile .share-tile-content{
  position:relative;
  z-index:2;
  flex:1 1 auto;
  width:auto;
  min-width:0;
  margin-left:145px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  text-align:center;
}
.rustore-tile .share-tile-title{
  margin:0;
  white-space:nowrap;
  font-size:clamp(13px,1.35vw,19px);
  line-height:1.15;
  letter-spacing:.08em;
}
.rustore-tile .share-tile-subtitle{
  margin:0;
  white-space:nowrap;
  font-size:clamp(9px,.85vw,13px);
  line-height:1.2;
}
.rustore-tile .rustore-badge{
  display:block;
  width:clamp(145px,62%,210px);
  max-width:100%;
  flex:0 0 auto;
}
.rustore-tile .rustore-badge img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}

@media(max-width:900px){
  .rustore-tile{min-height:175px;padding:10px 12px 10px 6px}
  .rustore-tile .app-phone{
    width:145px;
    height:170px;
    transform:translate(-14px,-50%);
  }
  .rustore-tile .app-phone img{width:142px}
  .rustore-tile .share-tile-content{margin-left:125px;gap:7px}
  .rustore-tile .share-tile-title{font-size:12px;letter-spacing:.06em}
  .rustore-tile .share-tile-subtitle{font-size:9px}
  .rustore-tile .rustore-badge{width:150px}
}

@media(max-width:650px){
  .share-tiles{grid-template-columns:1fr;gap:10px;padding:12px}
  .rustore-tile{
    width:100%;
    min-width:0;
    min-height:175px;
    height:175px;
    box-sizing:border-box;
    padding:10px 10px 10px 4px;
  }
  .rustore-tile .app-phone{
    width:100px;
    height:150px;
    transform:translate(-8px,-50%);
  }
  .rustore-tile .app-phone img{width:98px}
  .rustore-tile .share-tile-content{
    margin-left:88px;
    width:calc(100% - 88px);
    gap:6px;
    min-width:0;
    overflow:visible;
  }
  .rustore-tile .share-tile-title{
    white-space:normal;
    overflow-wrap:normal;
    font-size:14px;
    line-height:1.1;
    letter-spacing:.04em;
  }
  .rustore-tile .share-tile-subtitle{
    white-space:normal;
    font-size:9px;
    line-height:1.15;
  }
  .rustore-tile .rustore-badge{width:145px;max-width:100%}
}

@media(max-width:390px){
  .rustore-tile{min-height:160px;height:160px;padding-right:8px}
  .rustore-tile .app-phone{width:88px;height:138px;transform:translate(-6px,-50%)}
  .rustore-tile .app-phone img{width:86px}
  .rustore-tile .share-tile-content{margin-left:78px;width:calc(100% - 78px);gap:5px}
  .rustore-tile .share-tile-title{font-size:12px}
  .rustore-tile .share-tile-subtitle{font-size:8px}
  .rustore-tile .rustore-badge{width:132px}
}

/* Android WebView: use the same compact mobile layout, without a second phone rule set. */
.mobile-webview .share-tiles{grid-template-columns:1fr;width:100%;box-sizing:border-box}