*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#fff;font-family:Arial,Helvetica,sans-serif}
body{display:flex;justify-content:center;align-items:flex-start}
.player-shell{width:100%;display:flex;justify-content:center}
.player-card{width:min(540px,100%);height:430px;background:linear-gradient(180deg,#2a2a2a 0%,#181818 100%);color:#fff;padding:12px 24px 10px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px;overflow:hidden}
.artwork-wrap{position:relative;width:230px;height:230px;border:11px solid #666;border-radius:50%;overflow:hidden;background:#171717;flex:0 0 auto}
.artwork-wrap img{width:100%;height:100%;object-fit:cover;display:none}
.artwork-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:66px;font-weight:800;letter-spacing:7px}
.meta{text-align:center;width:100%;line-height:1.05}
.station{font-size:27px;font-weight:400;margin-bottom:3px;color:#007aa5}
.track{font-size:25px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:96%;margin:0 auto;color:#fff}
.play-button{width:64px;height:64px;border-radius:50%;border:none;background:#9c7c38;color:#111;font-size:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.volume-row{width:92%;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;font-size:14px;color:#ddd}
.speaker{font-size:19px}
#volume{width:100%;accent-color:#9c7c38}
.status{font-size:13px;color:#aaa;line-height:1}
@media (max-width:560px){
  .player-card{width:100%;height:420px;padding:10px 16px 8px;gap:6px}
  .artwork-wrap{width:220px;height:220px}
  .artwork-fallback{font-size:62px}
  .station{font-size:24px}
  .track{font-size:22px}
  .play-button{width:60px;height:60px;font-size:28px}
}