:root{
  --bg:#eef1f6;
  --card:#ffffff;
  --text:#14171a;
  --sub:#5b6675;
  --accent:#3b82f6;
  --muted:#d3dae6;
  --shadow:0 10px 30px rgba(0,0,0,.15);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);}
.player-card{max-width:760px;margin:4vh auto;padding:18px;background:var(--card);border-radius:16px;box-shadow:var(--shadow)}

.hero-stacked{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:8px}
.hero-stacked .meta{text-align:center}
.hero-stacked .meta h1{margin:0;font-size:22px;line-height:1.2}
.hero-stacked .meta .sub{margin:4px 0 0;font-size:16px;color:var(--sub)}

.hero-stacked .art-wrap{width:100%;display:grid;place-items:center;position:relative;padding:6px 0}
.hero-stacked .cover{display:block;width:180px;height:auto;border-radius:12px;z-index:2;box-shadow:0 8px 18px rgba(0,0,0,.25)}
.hero-stacked .vinyl{position:absolute;width:160px;top:12px;left:50%;transform:translateX(-50%);filter:drop-shadow(0 10px 20px rgba(0,0,0,.35));z-index:1}
.vinyl.spin{animation:turn 3s linear infinite}
@keyframes turn{to{transform:translateX(-50%) rotate(360deg)}}

.volume-below{display:flex;align-items:center;gap:10px;justify-content:center}
.volume-below input[type=range]{width:260px}

.progress-row{display:grid;grid-template-columns:46px 1fr 46px auto;gap:10px;align-items:center;margin:18px 6px 6px}
#seek{width:100%}
#seek,#volume{-webkit-appearance:none;appearance:none;height:8px;border-radius:999px;background:var(--muted)}
#seek::-webkit-slider-thumb,#volume::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);box-shadow:0 2px 6px rgba(0,0,0,.3)}
.rate{opacity:.85;padding:4px 8px;border:1px solid var(--muted);border-radius:8px;cursor:default}

.controls{display:flex;justify-content:center;gap:12px;margin:8px 0 16px}
.controls button{min-width:44px;height:44px;border-radius:10px;border:1px solid var(--muted);background:#fff;cursor:pointer;font-size:18px;box-shadow:0 3px 10px rgba(0,0,0,.06)}
.controls .primary{background:var(--accent);color:#fff;border-color:transparent;font-weight:700}

.playlist{margin-top:8px;border:1px solid var(--muted);border-radius:12px;overflow:hidden}
.track{display:flex;align-items:center;gap:12px;padding:12px;border-bottom:1px solid var(--muted);cursor:pointer;background:#fff}
.track:last-child{border-bottom:0}
.track .thumb{width:44px;height:44px;border-radius:6px;object-fit:cover}
.track .t-title{font-weight:700}
.track .t-artist{color:var(--sub);font-size:14px;margin-top:2px}
.track.active{background:#e7efff}

/* Responsive cover/vinyl resizing */
@media (max-width:900px){
  .hero-stacked .cover{width:150px}
  .hero-stacked .vinyl{width:135px;top:10px}
  .volume-below input[type=range]{width:220px}
}
@media (max-width:600px){
  .hero-stacked .cover{width:120px}
  .hero-stacked .vinyl{width:110px;top:8px}
  .volume-below input[type=range]{width:180px}
}

/* --- Desktop width + safe sizes --- */
.player-card { width: min(92vw, 560px); }
.hero-stacked .art-wrap { overflow: hidden; }

/* Scale cover + vinyl together with variables */
:root { --cover: 160px; --vinyl: 132px; }
.hero-stacked .cover { width: var(--cover); }
.hero-stacked .vinyl { width: var(--vinyl); }

/* Big/medium/small screens */
@media (min-width: 1280px) { :root { --cover: 150px; --vinyl: 124px; } }
@media (max-width: 900px)  { :root { --cover: 150px; --vinyl: 130px; } }
@media (max-width: 600px)  { :root { --cover: 120px; --vinyl: 104px; } }

/* Keep translateX while rotating so the vinyl stays centered */
@keyframes turn { to { transform: translateX(-50%) rotate(360deg); } }