.radio-container{display:flex;align-items:center;justify-content:center;width:100%;position:relative;@media(max-width:600px){overflow:hidden;gap:0;padding-bottom:40px;flex-direction:column}.radio-grid{border:2px solid color-mix(in srgb,var(--block-border) 60%,transparent);background:linear-gradient(to bottom right,color-mix(in srgb,var(--block-border) 50%,transparent),color-mix(in srgb,transparent 80%,var(--accent-color)));margin-block:3em;margin-inline:10px;width:fit-content;border-radius:12px;gap:50px;padding:20px 30px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;cursor:pointer;text-align:center;@media(max-width:600px){width:100%;overflow-x:scroll!important;-webkit-overflow-scrolling:touch;gap:30px;padding:12px 20px;margin-inline:0;margin-block:2em;display:flex;justify-content:start;scroll-snap-type:x mandatory;flex-wrap:nowrap}.radio-card{transition:transform .2s ease;display:flex;align-items:center;flex-shrink:0;&.active{transform:scale(1.15);transform-origin:center;z-index:1;position:relative;& img{opacity:1;filter:brightness(1.05) drop-shadow(2px 2px 1px #000000);@media(max-width:600px){width:90px}}}}& img{width:100px;height:100px;object-fit:contain;border-radius:12px;transition:all .3s ease;opacity:.15;filter:drop-shadow(2px 2px 1px #000000) grayscale(.8);@media(max-width:600px){width:80px}&:hover{opacity:.7;filter:drop-shadow(2px 2px 1px #000000) grayscale(0)}}}#radioDots{@media(max-width:600px){display:flex;justify-content:center;gap:8px;& span{width:10px;height:10px;border-radius:50%;background:color-mix(in srgb,var(--accent-color) 10%,rgba(255,255,255,.15));cursor:pointer;transition:width .25s ease,background .25s ease,border-radius .25s ease;flex-shrink:0;&.active{width:24px;border-radius:3px;background:color-mix(in srgb,var(--accent-color) 50%,#fff)}}}}}#radioInfo{color:var(--block-text);box-shadow:inset 0 0 15px 5px color-mix(in srgb,var(--block-border) 40%,transparent),0 4px 24px color-mix(in srgb,var(--block-border) 70%,transparent),0 1px 0 0 var(--block-border);border:5px solid var(--block-border);display:none;backdrop-filter:blur(12px);transform:translateY(100%);opacity:0;pointer-events:none;grid-template-columns:150px 1fr 1fr;grid-template-rows:auto auto;gap:12px 10px;align-items:center;margin:2em clamp(1rem,6vw,8rem) 1em;padding:15px;border-radius:20px;z-index:3;transition:transform .5s ease,opacity .3s linear;@media(max-width:600px){display:flex!important;flex-direction:column;padding-bottom:7em;border-radius:10px;margin:5px 5px 10px;padding-top:2em;text-align:center;overflow:hidden}@media(min-width:661px)and (max-width:900px){margin:5em 0 1em}@media(min-width:900px)and (max-width:1600px){margin:6em 0 1em}#playlistSelector{display:flex;flex-wrap:wrap;justify-content:start;align-items:center;margin-bottom:15px;gap:4px 16px;@media(max-width:600px){margin-block:15px;align-items:center;flex-direction:column;gap:16px 0}& button{font-size:clamp(10px,4vw,20px);border:none;transition:all .2s ease-in;cursor:pointer;position:relative;font-family:var(--font-title)}}&.active{transform:translateY(0);opacity:1;pointer-events:auto;@media(max-width:600px){display:flex}}& img{width:140px;height:auto;border-radius:15px;grid-row:1 / 4;grid-column:1 / 2;filter:drop-shadow(1px 1px 4px #000);@media(max-width:600px){width:120px;height:auto}}& h3{grid-row:1 / 2;grid-column:2 / 4;font-size:clamp(12px,5vw,26px);@media(max-width:600px){text-align:start}}.tracklist-title{font-size:1.45em;margin-block:8px 10px;letter-spacing:1.5px}#radioDJ,#radioGenre{display:flex;align-items:start;flex-direction:column;justify-content:start;grid-column:2 / 3;gap:2px;@media(max-width:600px){align-items:center}& span{color:#f4eeee;font-weight:100;text-align:center}& p{font-family:GTAArtDeco;color:color-mix(in srgb,var(--block-border) 90%,var(--block-text) 95%);font-weight:600}.dj-tags,.genre-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:5px;@media(max-width:600px){justify-content:center}& p{background:color-mix(in srgb,var(--block-border) 90%,var(--block-text) 95%);font-size:.95em;color:var(--block-color);padding:5px 14px;border-radius:25px;width:max-content}}}#radioDJ{grid-row:2 / 3;@media(max-width:600px){margin-bottom:10px}}#radioGenre{grid-row:3 / 4;margin-bottom:1em}& ol{grid-row:4 / 5;grid-column:1 / 4;border-top:1px solid color-mix(in srgb,var(--block-border) 15%,transparent);padding-top:.5em;display:flex;flex-direction:column;gap:2px;margin:0 5vw;list-style:none;@media(max-width:600px){align-items:start;text-align:start;gap:.35em;width:85%}& li{display:flex;align-items:center;gap:12px;padding:9px 14px;border-radius:10px;border:1px solid transparent;opacity:.46;cursor:pointer;transition:opacity .2s ease,background .2s ease,border-color .2s ease;margin-bottom:0;font-size:1em;margin-left:0;@media(max-width:600px){user-select:none;font-size:.95em;width:100%;flex-wrap:wrap}&:hover{opacity:.72;background:color-mix(in srgb,var(--block-border) 8%,transparent)}&:last-of-type{margin-bottom:20px}&.active{opacity:1;font-size:1.08em;background:color-mix(in srgb,var(--block-border) 12%,transparent);border-color:color-mix(in srgb,var(--block-border) 25%,transparent);@media(max-width:600px){font-weight:700;font-size:1em}.tl-play{display:block;transform:scale(1);animation:icon-pulse 1.8s ease-in-out infinite}.tl-num{display:none}}.tl-num,.tl-play{width:20px;flex-shrink:0;text-align:center}.tl-play{display:none;font-size:18px;color:color-mix(in srgb,var(--block-border) 90%,var(--block-text) 95%);animation:icon-pulse 1.8s ease-in-out infinite}.tl-num{font-size:11px;font-weight:500;color:color-mix(in srgb,var(--block-text) 50%,transparent)}.tl-info{flex:1;min-width:0}.tl-title{font-size:1em;font-weight:inherit;color:#f2f2f2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}.tl-artist{font-size:.8em;color:color-mix(in srgb,#f2f2f2 60%,transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}}}}.radio-footer{user-select:none;display:none;align-items:center;grid-template-columns:1fr auto 1fr;justify-items:space-between;padding:10px 15px;font-size:14px;background:linear-gradient(to right,#8d75efd1 10%,#b475efce,#8d75efd1 90%);border-top:3px solid #833fc3d9;backdrop-filter:blur(12px);position:fixed;bottom:0;left:0;width:100%;z-index:10000;@media(max-width:600px){padding-bottom:1em;gap:0;justify-content:center}&.active{display:grid;@media(max-width:600px){display:flex}@media(min-width:661px)and (max-width:900px){display:flex;justify-content:center}}.footer-left{display:flex;align-items:center;gap:20px;.footer-album{border-radius:10px;border:3px solid color-mix(in srgb,var(--block-border) 30%,var(--block-text) 70%);background:linear-gradient(310deg,color-mix(in srgb,var(--block-text) 30%,var(--block-border) 70%),color-mix(in srgb,var(--block-border) 30%,var(--block-text) 70%));overflow:hidden;& img{width:75px;height:75px;object-fit:contain;filter:drop-shadow(1px 1px 0 rgb(0,0,0))}}.footer-text{display:flex;flex-direction:column;gap:.3em;text-align:left;#artistName{color:#e0e0e0;font-size:14px}#songTitle{color:#fff;font-size:16px;font-weight:600}#artistName,#songTitle{max-width:none;overflow:hidden;white-space:nowrap;display:block;position:relative;@media(max-width:900px){max-width:150px}@media(min-width:1200px){max-width:450px}&.marquee{& span{display:inline-block;animation:marquee 12s linear infinite}}}}}.footer-center{height:100%;display:flex;flex-direction:column;justify-content:center;gap:.5em;.footer-controls{display:flex;align-items:center;gap:1em;transition:all .2s ease-in-out;justify-content:center;user-select:none;@media(max-width:600px){width:100%}.footer-pause,.footer-play{color:#d0f2f8;font-size:64px;text-shadow:2px 2px 3px #0000005e}& span{font-size:42px;color:#cbeef8;text-shadow:2px 2px 3px #0000005e;transition:all .2s ease-in-out;&:hover{transform:scale(1.05)}&:active{transform:scale(.99);color:#e7c1fe}&.disabled{pointer-events:none;opacity:.4}}}.footer-timer{display:flex;align-items:center;gap:1em;width:500px;color:#ebe9e9;font-family:GTAArtDeco;font-weight:600;@media(max-width:600px){max-width:400px}#bar{flex:1;height:7px;background:#c0c0c033;box-shadow:0 0 1px #000;border-radius:12px;overflow:visible;transition:background .3s ease-out;@media(max-width:600px){height:10px}&:hover{background:linear-gradient(to right,#c0c0c04d),transparent}#currentBar{width:15%;height:100%;background:linear-gradient(to right,#e980f7,#f597ff);transition:all .3s ease-out;border-radius:25px;position:relative;&:after{content:"";position:absolute;right:-5px;top:50%;transform:translateY(-50%);width:13px;height:13px;background:#fff;border-radius:50%;z-index:100}&:hover{filter:brightness(.9)}}}& p{text-shadow:1px 1px 2px #000;font-size:1.1em;width:55px;text-align:center}}}.footer-right{display:flex;align-items:center;justify-content:end;.footer-volume{display:flex;align-items:center;gap:1em;padding-right:1.5em;& span{text-shadow:2px 2px 3px #0000005e;font-size:1.7em;color:#f2f2f2;transition:all .15s ease;&:active{filter:brightness(.8)}&:hover{opacity:.8}&[data-state=muted]{opacity:.5}}& input[type=range]{-webkit-appearance:none;appearance:none;width:150px;height:6px;border-radius:21px;background:#c0c0c033;&::-webkit-slider-runnable-track{height:9px;border-radius:999px}&::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;background:#fff;border-radius:50%;margin-top:-1.5px}&::-moz-range-thumb{width:13px;height:13px;background:#fff;border-radius:50%}&::-moz-range-track{height:7px;border-radius:12px;background:#c0c0c033}}}}.footer-left,.footer-right{@media(max-width:900px){display:none}}}