:root{--ink:#02060b;--panel:#07131d;--cyan:#63e4ff;--gold:#ffc96c;--violet:#ad80ff;--text:#eaf8ff;--muted:#93aebb;--green:#5ae39c}
*{box-sizing:border-box}.preview-shell{width:100%;height:100%;margin:0;overflow:hidden;background:var(--ink);font-family:Arial,"Segoe UI",sans-serif}.homepage{position:fixed;inset:0;width:100%;height:100%;border:0}.preview-label{position:fixed;z-index:20;top:92px;right:22px;padding:9px 13px;border:1px solid rgba(255,201,108,.45);background:rgba(2,7,12,.9);color:var(--gold);font-size:9px;font-weight:700;letter-spacing:1.8px;backdrop-filter:blur(12px)}
.radio-overlay{position:fixed;z-index:30;left:50%;top:112px;bottom:auto;transform:translateX(-50%);width:min(980px,calc(100% - 44px));min-height:154px;display:grid;grid-template-columns:104px 1fr 80px;align-items:center;gap:22px;padding:22px 28px;border:1px solid rgba(99,228,255,.38);background:linear-gradient(115deg,rgba(3,10,16,.97),rgba(7,25,37,.96) 55%,rgba(26,15,43,.97));box-shadow:0 25px 80px rgba(0,0,0,.62),0 0 38px rgba(99,228,255,.09);backdrop-filter:blur(24px);clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%,0 16px);transition:.35s ease}.radio-overlay:before{content:"";position:absolute;top:0;left:16px;width:34%;height:2px;background:linear-gradient(90deg,var(--cyan),transparent);box-shadow:0 0 14px var(--cyan)}.radio-overlay.is-hidden{opacity:0;transform:translate(-50%,-35px);pointer-events:none}.radio-glow{position:absolute;inset:auto 8% -40px 8%;height:70px;background:radial-gradient(ellipse,rgba(173,128,255,.17),transparent 70%);pointer-events:none}
.radio-overlay.in-community{position:relative;z-index:5;left:auto;top:auto;bottom:auto;transform:none;width:88%;max-width:960px;min-height:168px;margin:30px auto 26px;grid-template-columns:104px 80px 1fr;background-color:#020812;background-image:linear-gradient(90deg,rgba(2,8,14,.97) 0%,rgba(3,12,21,.91) 45%,rgba(5,12,29,.32) 68%,rgba(10,8,31,.12) 100%),url('/assets/radiomika-wolf-banner-v1.png');background-size:100% 100%,auto 100%;background-repeat:no-repeat;background-position:center,right center;box-shadow:0 22px 65px rgba(0,0,0,.48),0 0 42px rgba(99,228,255,.12)}.radio-overlay.in-community.is-hidden{opacity:1;transform:none;pointer-events:auto}.radio-overlay.in-community .station-mark{grid-column:1}.radio-overlay.in-community .radio-controls{grid-column:2;grid-row:1}.radio-overlay.in-community .radio-main{grid-column:3;grid-row:1}.radio-overlay.in-community .close-button{display:none}
.station-mark{width:90px;height:90px;display:grid;place-items:center;position:relative;overflow:hidden;padding:5px;border:1px solid rgba(255,201,108,.55);background:radial-gradient(circle at 50% 55%,#342510,#08121b 68%);box-shadow:inset 0 0 28px rgba(255,201,108,.11),0 0 25px rgba(255,201,108,.12);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}.station-mark img{display:block;width:100%;height:100%;max-width:100%;object-fit:contain;filter:saturate(1.08) contrast(1.04)}
.radio-main{min-width:0}.radio-kicker{display:flex;align-items:center;gap:8px;color:var(--cyan);font-size:9px;font-weight:700;letter-spacing:2.6px}.live-dot{width:8px;height:8px;border-radius:50%;background:#ff4f68;box-shadow:0 0 13px #ff4f68;animation:pulse 1.6s infinite}.track-line{margin-top:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-size:clamp(18px,2.2vw,29px);font-weight:800;letter-spacing:.3px}.artist-line{margin-top:3px;color:var(--gold);font-size:13px;letter-spacing:.7px}.show-row{display:grid;grid-template-columns:.8fr 1.7fr .45fr;gap:14px;margin-top:17px}.show-row>span{min-width:0;border-left:1px solid rgba(99,228,255,.19);padding-left:12px}.show-row small,.show-row strong{display:block}.show-row small{color:#6f8d9b;font-size:8px;letter-spacing:1.5px}.show-row strong{margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#c9dce4;font-size:11px;letter-spacing:.4px}#radioHost{overflow:visible;text-overflow:clip;white-space:normal;line-height:1.35}.listeners{display:flex!important;align-items:center;gap:7px}.listeners i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 9px var(--green)}.listeners b{font-size:14px;color:var(--green)}
.play-button{width:66px;height:66px;border-radius:50%;border:1px solid var(--gold);background:linear-gradient(145deg,#ffd888,#f3b942);display:grid;place-items:center;cursor:pointer;box-shadow:0 0 30px rgba(255,201,108,.15);transition:.2s}.play-button:hover{transform:scale(1.06);box-shadow:0 0 38px rgba(255,201,108,.28)}.play-icon{width:0;height:0;margin-left:5px;border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:14px solid #061018}.play-button.is-playing .play-icon{width:14px;height:18px;margin:0;border:0;border-left:5px solid #061018;border-right:5px solid #061018}.close-button{position:absolute;right:12px;top:8px;border:0;background:transparent;color:#75909e;font-size:22px;cursor:pointer}.close-button:hover{color:var(--text)}.reopen-button{display:none;position:fixed;z-index:31;right:24px;top:100px;bottom:auto;padding:13px 18px;border:1px solid var(--gold);background:#08131be8;color:var(--gold);font-size:10px;font-weight:700;letter-spacing:1.2px;cursor:pointer}.reopen-button.is-visible{display:block}
.radio-controls{display:flex;flex-direction:column;align-items:center;gap:6px}.volume-control{width:66px;display:grid;grid-template-columns:12px 48px;align-items:center;gap:4px;color:var(--cyan);font-size:10px}.volume-control input{width:48px;height:4px;margin:0;accent-color:var(--gold);cursor:pointer}.volume-control output{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@keyframes pulse{50%{opacity:.35;transform:scale(.82)}}
@media(max-width:700px){.preview-label{top:auto;right:12px;bottom:12px}.radio-overlay,.radio-overlay.in-community{top:auto;bottom:auto;width:100%;min-height:190px;grid-template-columns:62px 1fr 58px;gap:13px;padding:22px 17px}.radio-overlay.in-community .station-mark,.radio-overlay.in-community .radio-main,.radio-overlay.in-community .radio-controls{grid-column:auto;grid-row:auto}.station-mark{width:58px;height:58px}.station-mark b{font-size:17px}.signal-one{width:40px;height:40px}.signal-two{width:50px;height:50px}.show-row{grid-template-columns:1fr 1fr;gap:11px}.show-row>span:last-child{grid-column:1/-1}.play-button{width:52px;height:52px}.volume-control{width:58px;grid-template-columns:12px 1fr;gap:3px}.volume-control input{width:42px}.track-line{font-size:17px}.artist-line{font-size:11px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}