:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; --cream:#fff5df; }
* { box-sizing:border-box; }
html,body { width:100%; min-height:100%; margin:0; background:#100807; overflow:hidden; }
button,a { font:inherit; }
.scene { position:relative; min-height:100svh; isolation:isolate; color:var(--cream); overflow:hidden; }
.scene__art,.scene__art img,.scene__shade { position:absolute; inset:0; width:100%; height:100%; }
.scene__art { z-index:-4; }
.scene__art img { object-fit:cover; object-position:center; }
.scene__shade { z-index:-3; background:linear-gradient(180deg,rgba(5,2,2,.34),transparent 22%,transparent 70%,rgba(4,2,1,.24)); }
.flame-glow { position:absolute; z-index:-2; width:19vw; aspect-ratio:1; right:8%; top:32%; border-radius:50%; background:radial-gradient(circle,rgba(255,139,40,.3),rgba(255,66,12,.1) 43%,transparent 70%); mix-blend-mode:screen; filter:blur(15px); animation:flicker 2.5s ease-in-out infinite alternate; pointer-events:none; }
@keyframes flicker { 0%,100%{opacity:.54;transform:scale(.95)} 42%{opacity:.88;transform:scale(1.04)} 66%{opacity:.64;transform:scale(.98)} }

.topbar { position:relative; z-index:5; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:20px; color:#fff; font-size:14px; font-weight:500; text-shadow:0 1px 8px #000; }
.clock { display:flex; align-items:baseline; gap:4px; }
.clock strong { font-size:14px; line-height:1; letter-spacing:-.03em; }
.clock span { margin-left:2px; font-size:12px; opacity:.7; text-transform:uppercase; }
.listeners { display:flex; align-items:center; gap:5px; }
.listeners i { width:10px; height:10px; border-radius:50%; background:#58df8b; box-shadow:0 0 8px #58df8b; animation:pulse 1.7s ease-out infinite; }
.listeners strong { font-weight:500; }
.youtube-link { justify-self:end; padding:7px 10px; border-radius:6px; color:#fff; background:rgba(255,255,255,.08); text-decoration:none; backdrop-filter:blur(7px); }

.player-shell { position:absolute; z-index:6; left:50%; bottom:8vh; transform:translateX(-50%); display:grid; grid-template-columns:80px minmax(0,1fr) auto; align-items:center; gap:16px; width:min(576px,calc(100% - 48px)); min-height:104px; padding:12px 20px 12px 12px; border:1px solid rgba(255,255,255,.2); border-radius:999px; background:linear-gradient(100deg,rgba(74,42,34,.76),rgba(160,64,50,.78)); box-shadow:0 8px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.25); backdrop-filter:blur(24px) saturate(1.5); transition:transform .22s ease,background .25s ease; }
.track-art-wrap { position:relative; width:80px; height:80px; flex:none; }
.track-art { width:100%; height:100%; border-radius:50%; object-fit:cover; box-shadow:0 5px 16px rgba(0,0,0,.3); outline:1px solid rgba(255,255,255,.2); animation:record-spin 8s linear infinite; animation-play-state:paused; }
.track-art-wrap i { position:absolute; left:50%; top:50%; width:12px; height:12px; transform:translate(-50%,-50%); border:2px solid rgba(255,255,255,.4); border-radius:50%; background:rgba(0,0,0,.72); }
.player-shell.playing .track-art { animation-play-state:running; }
.player-copy { min-width:0; }
.player-copy h1 { overflow:hidden; margin:0 0 3px; font-size:15px; font-weight:600; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; text-shadow:0 1px 3px rgba(0,0,0,.25); }
.player-copy a { display:block; overflow:hidden; margin:0 0 8px; color:rgba(255,255,255,.7); font-size:13px; text-decoration:none; text-overflow:ellipsis; white-space:nowrap; transition:color .15s ease; }
.player-copy a:hover { color:#fff; }
.progress { position:relative; height:12px; border-radius:9px; cursor:pointer; touch-action:none; }
.progress::before { content:""; position:absolute; inset:4px 0; border-radius:9px; background:rgba(255,255,255,.2); }
.progress span { position:absolute; left:0; top:4px; width:0; height:4px; border-radius:9px; background:#fff; }
.progress span::after { content:""; position:absolute; right:-6px; top:50%; width:12px; height:12px; border-radius:50%; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.3); opacity:0; transform:translateY(-50%) scale(.75); transition:opacity .15s ease,transform .15s ease; }
.progress:hover span::after,.progress.dragging span::after { opacity:1; transform:translateY(-50%) scale(1); }
.times { display:flex; justify-content:flex-start; gap:4px; margin-top:6px; color:rgba(255,255,255,.6); font-size:11px; font-variant-numeric:tabular-nums; }
.times span+span::before { content:"/ "; }
.player-actions { display:flex; align-items:center; gap:4px; }
.player-actions button { appearance:none; -webkit-appearance:none; display:flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; border:0; border-radius:50%; color:rgba(255,255,255,.8); background:transparent; font-size:0; line-height:0; cursor:pointer; transition:transform .16s ease,background .16s ease,color .16s ease; }
.player-actions .skip-icon { display:block; width:18px; height:18px; fill:currentColor; }
.player-actions .play { width:44px; height:44px; padding:0; color:#111; background:#fff; box-shadow:0 5px 18px rgba(0,0,0,.24),inset 0 0 0 1px rgba(0,0,0,.06); }
.player-actions .play #play-icon { position:relative; display:block; width:22px; height:22px; margin:0; flex:0 0 22px; }
.player-actions .play svg { position:absolute; left:50%; top:50%; width:22px; height:22px; fill:currentColor; transform-origin:50% 50%; transition:opacity .15s ease,transform .15s ease; }
.player-actions .play .icon-play { opacity:1; transform:translate(-50%,-50%) scale(1); }
.player-actions .play .icon-pause { opacity:0; transform:translate(-50%,-50%) scale(.72); }
.player-shell.playing .player-actions .icon-play { opacity:0; transform:translate(-50%,-50%) scale(.72); }
.player-shell.playing .player-actions .icon-pause { opacity:1; transform:translate(-50%,-50%) scale(1); }
.player-actions button:hover { transform:scale(1.05); color:#fff; background:rgba(255,255,255,.14); }
.player-actions button:active { transform:scale(.95); }
.player-actions .play:hover { color:#111; background:#fff; }

.soundcloud-engine { position:absolute; width:1px; height:1px; overflow:hidden; border:0; opacity:.01; pointer-events:none; }
.track-art:not([src]) { background:linear-gradient(135deg,#f36f2a,#712b27); }

@media (max-width:700px) {
  .scene__art img { object-position:center top; }
  .scene__shade { background:linear-gradient(180deg,rgba(6,2,2,.32),transparent 22%,transparent 75%,rgba(4,2,1,.32)); }
  .topbar { padding:max(15px,env(safe-area-inset-top)) 15px 0; font-size:12px; }
  .youtube-link { display:flex; align-items:center; justify-content:center; width:38px; height:38px; padding:0; font-size:12px; }
  .youtube-link span { display:none; }
  .flame-glow { width:54vw; right:-11%; top:32%; }
  .player-shell { bottom:max(22px,env(safe-area-inset-bottom)); grid-template-columns:60px minmax(0,1fr) auto; gap:10px; width:calc(100% - 20px); min-height:88px; padding:10px 12px 10px 10px; }
  .track-art-wrap { width:60px; height:60px; }
  .player-copy h1 { font-size:13px; }
  .player-copy a { font-size:11px; }
  .times { font-size:9px; }
  .player-actions { gap:0; }
  .player-actions button { width:32px; height:32px; }
  .player-actions .play { width:42px; height:42px; }
  .player-actions .play #play-icon { width:21px; height:21px; }
}
@media (max-width:390px) {
  .player-shell { grid-template-columns:54px minmax(0,1fr) auto; gap:8px; width:calc(100% - 14px); padding:9px 9px 9px 8px; }
  .track-art-wrap { width:54px; height:54px; }
  .player-copy h1 { font-size:12px; }
  .player-copy a { margin-bottom:5px; font-size:10px; }
  .player-actions button { width:29px; height:29px; }
  .player-actions .play { width:40px; height:40px; }
}
@media (max-width:340px) {
  .player-shell { grid-template-columns:48px minmax(0,1fr) auto; gap:6px; }
  .track-art-wrap { width:48px; height:48px; }
  .player-actions button { width:26px; height:26px; }
  .player-actions .play { width:38px; height:38px; }
}
@media (prefers-reduced-motion:reduce) { .flame-glow{animation:none} }
@keyframes record-spin { to { transform:rotate(360deg); } }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(88,223,139,.7)} 70%{box-shadow:0 0 0 7px rgba(88,223,139,0)} 100%{box-shadow:0 0 0 0 rgba(88,223,139,0)} }