﻿.home-discovery #grid{display:grid;grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:22px 16px;overflow:visible}
.saved-links{display:flex;gap:8px;margin-top:12px}.saved-links button{border:1px solid hsl(var(--accent-h,40) 75.8% 59.4% / 0.188);background:hsl(var(--accent-h,40) 75.8% 59.4% / 0.031);color:hsl(var(--accent-h,40) 50.3% 67.6%);border-radius:20px;font-size:11px;padding:8px 14px}
.music-tile{min-width:0;background:#111419;border:1px solid #ffffff08;border-radius:14px;padding:10px;transition:background .2s}
.music-tile:hover{background:#1b1e25}.music-tile>.card{width:100%;display:block}.music-tile .card img{border-radius:9px}.music-tile .card strong{font-size:13px}.music-tile .card .meta{font-size:10px}
.music-tile .card .song-stats{margin-top:7px;color:hsl(var(--accent-h,40) 39.9% 64.1%);font-size:11px;font-variant-numeric:tabular-nums}
#playerPlays{color:hsl(var(--accent-h,40) 34.9% 59.0%);font-size:12px;margin:8px 0 14px;font-variant-numeric:tabular-nums}
.music-list-item{min-width:0;border-bottom:1px solid #ffffff0a;padding:4px 0 8px}.music-list-item>.track-row{border-bottom:0}.track-actions{display:flex;align-items:center;gap:6px;padding-top:10px;flex-wrap:wrap}
.track-action{display:flex;align-items:center;justify-content:center;gap:5px;border:1px solid #ffffff25;background:transparent;border-radius:20px;padding:7px 10px;min-height:34px;color:#bfc2ca;font-size:10px}
.track-action svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.track-action:hover{background:#ffffff0b;color:#fff}.track-action.selected{color:var(--gold);border-color:hsl(var(--accent-h,40) 75.8% 59.4% / 0.400);background:hsl(var(--accent-h,40) 75.8% 59.4% / 0.063)}.track-action.selected svg{fill:hsl(var(--accent-h,40) 75.8% 59.4% / 0.133)}.track-action[aria-disabled=true]{opacity:.4}.music-tile .track-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}.music-tile .track-action{padding:8px 0}.music-tile .track-action span{display:none}.music-list-item .track-actions{padding-left:63px;padding-top:0}.queue .track-action{padding:7px}.queue .track-action span{display:none}.queue .track-actions{gap:7px}.track-play.active{color:var(--gold)}
.player-main .waveform{height:74px;padding:12px 10px;background:linear-gradient(180deg,#ffffff04,#ffffff01);border:1px solid #ffffff0a;border-radius:12px;overflow:hidden;isolation:isolate}
.waveform:before{content:'';position:absolute;inset:0;right:auto;width:var(--wave-progress,0%);background:linear-gradient(90deg,hsl(var(--accent-h,40) 75.8% 59.4% / 0.012),hsl(var(--accent-h,40) 75.8% 59.4% / 0.098));z-index:-1}
#bars{gap:3px}#bars i{flex:1;min-width:1px;max-width:5px;background:linear-gradient(#717783,#363b45);border-radius:4px;transition:background .15s}#bars i.played{background:linear-gradient(hsl(var(--accent-h,40) 100.0% 85.7%),hsl(var(--accent-h,40) 75.9% 61.0%) 55%,hsl(var(--accent-h,40) 63.5% 35.5%));box-shadow:0 0 7px hsl(var(--accent-h,40) 75.8% 59.4% / 0.145)}
#seek{opacity:1;appearance:none;background:transparent;border:0;margin:0;padding:0 8px}#seek::-webkit-slider-runnable-track{background:transparent;height:100%}#seek::-webkit-slider-thumb{appearance:none;width:3px;height:72px;background:hsl(var(--accent-h,40) 100.0% 88.4%);border-radius:3px;box-shadow:0 0 9px hsl(var(--accent-h,40) 75.8% 59.4% / 0.600)}#seek::-moz-range-thumb{width:3px;height:68px;border:0;background:hsl(var(--accent-h,40) 100.0% 88.4%)}.times{padding:0 4px;font-variant-numeric:tabular-nums}
@media(max-width:399px){.home-discovery #grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px}.music-tile{padding:7px}.music-tile .card strong{font-size:11px}.track-action{padding:7px}.music-list-item .track-actions{padding-left:0}}
@media(min-width:1200px){.home-discovery #grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}}
@media(orientation:landscape) and (max-height:500px){.player-main .waveform{height:42px;padding:4px 8px}#bars i{max-height:30px}#seek::-webkit-slider-thumb{height:40px}.queue .music-list-item{padding-bottom:5px}}
#launchSplash{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse at 50% 40%,hsl(var(--accent-h,40) 58.3% 28.2% / 0.333) 0,transparent 45%),radial-gradient(ellipse at 85% 0,hsl(var(--accent-h,40) 52.7% 46.5% / 0.200),transparent 45%),linear-gradient(145deg,#18191c,#08090c 60%,hsl(var(--accent-h,40) 48.0% 9.8%));overflow:hidden;transition:opacity .4s,visibility .4s}
#launchSplash:before{content:'';position:absolute;width:min(72vw,460px);aspect-ratio:1;border:1px solid hsl(var(--accent-h,40) 61.3% 56.5% / 0.200);border-radius:50%;box-shadow:inset 0 0 45px hsl(var(--accent-h,40) 75.8% 59.4% / 0.031),0 0 80px hsl(var(--accent-h,40) 75.8% 59.4% / 0.047);transform:perspective(700px) rotateX(22deg) rotateY(-15deg)}
.splash-emblem{position:relative;width:clamp(130px,38vw,250px);aspect-ratio:1;border-radius:26%;display:grid;place-items:center;background:linear-gradient(145deg,#565046,#151517 45%,#08090b);border:1px solid hsl(var(--accent-h,40) 75.8% 59.4% / 0.333);box-shadow:12px 22px 0 #03040655,0 35px 55px #0009,inset 1px 1px 3px hsl(var(--accent-h,40) 100.0% 85.7% / 0.467);transform:perspective(700px) rotateY(-12deg) rotateX(8deg);animation:logoArrive 1s ease-out both}.splash-emblem img{width:94%;height:94%;object-fit:contain;filter:drop-shadow(0 12px 8px #000a)}#launchSplash h1{position:relative;font-size:38px;margin:38px 0 8px;background:linear-gradient(100deg,hsl(var(--accent-h,40) 65.6% 41.0%),hsl(var(--accent-h,40) 100.0% 85.5%),hsl(var(--accent-h,40) 65.1% 57.3%));background-clip:text;-webkit-background-clip:text;color:transparent;letter-spacing:-.04em}#launchSplash p{position:relative;font-size:9px;letter-spacing:.4em;color:hsl(var(--accent-h,40) 33.3% 60.6%)}.splash-line{position:relative;width:100px;height:2px;margin-top:24px;background:linear-gradient(90deg,transparent,hsl(var(--accent-h,40) 75.8% 59.4%),transparent)}#launchSplash.leaving{opacity:0;visibility:hidden;pointer-events:none}@keyframes logoArrive{from{opacity:0;transform:perspective(700px) rotateY(-25deg) rotateX(15deg) translateY(16px)}to{opacity:1;transform:perspective(700px) rotateY(-12deg) rotateX(8deg)}}
@media(prefers-reduced-motion:reduce){.splash-emblem{animation:none}#launchSplash{transition:none}}
/* Full-width music lists; discovery category and DJ shelves retain their cards. */
#categoryNav .icon{display:flex;align-items:center;justify-content:center;width:30px;height:30px;margin:0 auto 3px;border-radius:10px;transition:background .18s,color .18s}
#categoryNav .icon svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#categoryNav button{color:#8e949f;transition:background .18s,color .18s}
#categoryNav button.active{color:var(--gold)}
#categoryNav button.active .icon{background:hsl(var(--accent-h,40) 75.8% 59.4% / 0.102)}
@media(max-width:999px){
 #categoryNav{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0;padding:5px 4px calc(5px + var(--safe));overflow:visible;background:#0e1118fa;border-top:1px solid #ffffff10}
 #categoryNav button{min-width:0;min-height:56px;width:100%;padding:5px 0;font-size:9px;letter-spacing:-.02em;white-space:nowrap;background:none}
 #categoryNav button[data-category="Home"] .icon{background:linear-gradient(145deg,hsl(var(--accent-h,40) 81.0% 71.2%),hsl(var(--accent-h,40) 60.8% 49.0%));color:hsl(var(--accent-h,40) 64.1% 7.6%);border:1px solid hsl(var(--accent-h,40) 93.5% 81.8% / 0.400);box-shadow:0 3px 10px #0004}
 #categoryNav button[data-category="Home"].active .icon{box-shadow:0 0 12px hsl(var(--accent-h,40) 75.8% 59.4% / 0.188)}
}
@media(min-width:1000px){#categoryNav .icon{margin:0;flex-shrink:0}}
.vinyl-record{position:relative;width:min(100%,350px);aspect-ratio:1;margin:12px auto 24px;border-radius:50%;border:2px solid #3d3c39;background:repeating-radial-gradient(circle at center,#17191b 0px,#17191b 2px,#303135 3px,#111315 4px);box-shadow:0 14px 26px #0007,inset 0 0 0 5px #090a0c,inset 0 0 0 7px #46443e;animation:recordSpin 14s linear infinite;animation-play-state:paused;isolation:isolate}
.vinyl-record.spinning{animation-play-state:running}
.vinyl-record:before{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 20deg,transparent 0deg,#ffffff20 40deg,transparent 75deg,transparent 180deg,#ffffff16 220deg,transparent 255deg);pointer-events:none;z-index:2}
.player-main .vinyl-record .artwork{display:block;position:absolute;left:18%;top:18%;width:64%;height:64%;border-radius:50%;object-fit:cover;border:3px solid hsl(var(--accent-h,40) 50.8% 53.7%);box-shadow:0 0 0 5px #0b0c0e,0 0 0 7px #555044;background:#17191b}
.vinyl-record:after{content:'';position:absolute;left:45%;top:45%;width:10%;height:10%;border-radius:50%;background:radial-gradient(circle,#080a0f 0 30%,#a6a39a 34%,hsl(var(--accent-h,40) 48.8% 83.1%) 45%,hsl(var(--accent-h,40) 22.8% 42.2%) 57%,#151619 62%);box-shadow:0 1px 6px #0009;z-index:3}
@keyframes recordSpin{to{transform:rotate(360deg)}}
@media(orientation:landscape){.vinyl-record{width:min(32vh,220px);margin:8px auto 16px}}
@media(orientation:landscape) and (max-height:500px){.vinyl-record{width:90px;margin:2px auto 10px}}
@media(prefers-reduced-motion:reduce){.vinyl-record{animation:none}}
.vinyl-stage{position:relative;width:fit-content;max-width:100%;margin:auto;min-width:min(100%,350px)}
.vinyl-stage .close{position:absolute;left:0;top:0;display:grid;place-items:center;width:40px;height:40px;z-index:4;border:1px solid hsl(var(--accent-h,40) 75.8% 59.4% / 0.333);background:#191b22e8;color:hsl(var(--accent-h,40) 76.7% 76.5%);box-shadow:0 4px 12px #0005;backdrop-filter:blur(8px)}
.vinyl-stage .close svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.player-main .actions{display:grid;grid-template-columns:1fr 1.35fr 1fr 1fr;gap:8px;margin:18px 0;padding:10px 0;border-top:1px solid #ffffff0b}
.player-main .actions button,.player-main .player-speed{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:60px;padding:8px 4px;border:1px solid #ffffff10;border-radius:12px;background:#ffffff04;color:#b6bbc5;font-size:10px}
.player-main .actions svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.player-main .actions #favorite{font-size:10px}.player-main .actions #favorite.active{color:var(--gold);background:hsl(var(--accent-h,40) 75.8% 59.4% / 0.043);border-color:hsl(var(--accent-h,40) 75.8% 59.4% / 0.251)}.player-main #favorite.active svg{fill:hsl(var(--accent-h,40) 75.8% 59.4% / 0.169)}
.player-main .actions button:hover{background:#ffffff0a;color:var(--gold)}.player-main .actions button[aria-disabled=true]{opacity:.4}
.player-main .player-speed{display:grid;grid-template-columns:20px auto;gap:2px 4px;padding:5px 7px}
.player-speed>span{font-size:10px}.player-main .actions #speed{grid-column:1 / -1;width:100%;min-width:0;padding:4px 3px;text-align:center;background:#15181f;border:0;border-radius:6px;color:hsl(var(--accent-h,40) 76.7% 76.5%);font-size:12px}
@media(orientation:landscape){.vinyl-stage{min-width:min(32vh,220px)}}
@media(orientation:landscape) and (max-height:500px){.vinyl-stage{min-width:140px}.vinyl-stage .close{left:-20px;width:34px;height:34px}.player-main .actions{gap:5px;margin:8px 0;padding-top:6px}.player-main .actions button,.player-main .player-speed{min-height:48px;padding:4px;font-size:9px}.player-main .actions svg{width:17px;height:17px}}
body:not(.home-discovery) #grid,body #mixDiscovery #mixPopularCards,body #mixPreviousCards,body #mixDiscovery #kenyanMixList{display:flex;flex-direction:column;gap:2px;overflow:visible;counter-reset:song}
.music-list-item{display:grid;grid-template-columns:minmax(0,1fr) auto 54px;align-items:center;gap:16px;padding:6px 12px;border:0;border-radius:8px;counter-increment:song;min-height:68px}
.music-list-item:hover,.music-list-item:has(.track-play.active){background:#ffffff0a}
.music-list-item>.track-row{display:grid;grid-template-columns:20px 42px minmax(0,1.3fr) minmax(0,1fr);gap:14px;padding:4px 0;position:relative}
.music-list-item .track-row img{width:42px;height:42px;border-radius:4px}
.music-list-item .song-rank{font-size:12px;color:#aaa;text-align:center}
.song-rank:before{content:counter(song)}
.music-list-item .track-row strong{font-size:13px;font-weight:500}
.music-list-item .song-artist{font-size:12px;margin:0;color:#b9bbc2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.music-list-item .song-stats{font-size:10px;color:#777b85;margin-top:5px}
.music-list-item .track-actions{grid-column:2;grid-row:1;padding:0;gap:4px;flex-wrap:nowrap}
.music-list-item .track-action{border:0;border-radius:7px;padding:8px;min-width:32px;min-height:36px}
.music-list-item .track-action span{display:none}
.music-list-item .song-duration{grid-column:3;grid-row:1;text-align:right;color:#aaa;font-size:12px;font-variant-numeric:tabular-nums}
.music-list-item .waves{position:absolute;left:0;top:15px;width:20px;background:#101216}
.music-list-item:has(.active) .song-rank{visibility:hidden}
.queue{counter-reset:song}
.queue .music-list-item{grid-template-columns:minmax(0,1fr) auto;gap:6px;padding:5px 0}
.queue .music-list-item>.track-row{grid-template-columns:16px 36px minmax(0,1fr);gap:8px}
.queue .song-artist{display:none}.queue .song-duration{display:none}.queue .track-row img{width:36px;height:36px}
@media(max-width:700px){
 .music-list-item{grid-template-columns:minmax(0,1fr) auto;gap:0 8px;padding:9px 4px}
 .music-list-item>.track-row{grid-template-columns:16px 40px minmax(0,1fr);gap:9px;grid-column:1;grid-row:1 / span 2}
 .music-list-item .track-row img{width:40px;height:40px}
 .music-list-item .song-artist{grid-column:3;font-size:10px;margin-top:-5px}
 .music-list-item .song-stats{display:block;font-size:9px;margin-top:3px}
 .music-list-item .track-actions{grid-column:2;grid-row:2;gap:0}
 .music-list-item .track-action{padding:6px;min-width:28px;min-height:30px}
 .music-list-item .track-action svg{width:14px;height:14px}
 .music-list-item .song-duration{grid-column:2;grid-row:1;font-size:10px;padding-right:5px}
 .music-list-item .track-row strong{font-size:12px}
 .queue .music-list-item>.track-row{grid-row:1}.queue .music-list-item .track-actions{grid-row:1}
}
