:root {
  --bg: #0b0b0d;
  --fg: #f2f2f3;
  --muted: #8d8d95;
  --line: rgba(255, 255, 255, .09);
  --accent: #e8b04a;
  --live: #ff4d4d;
  --font: "Inter", "SF Pro Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  background-image: radial-gradient(60% 40% at 50% 0%, rgba(232, 176, 74, .07), transparent 70%);
}

.app {
  min-height: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top)) 24px max(20px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

/* ---------- topo ---------- */
.top { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 10px; }
.mark { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--accent); position: relative; }
.mark::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent); }
.name { font-size: 12px; letter-spacing: .32em; font-weight: 600; }

.live { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .18em; font-weight: 600; color: var(--muted); }
.live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.live[data-state="live"] { color: var(--fg); }
.live[data-state="live"] .dot { background: var(--live); animation: pulse 2s ease-in-out infinite; }
.live[data-state="off"] .dot { background: #5a5a62; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------- vinil + capa ---------- */
.stage { position: relative; width: min(100%, 460px); aspect-ratio: 1.28; margin-top: 4px; }

.sleeve {
  position: absolute; left: 0; top: 7.7%; width: 66%; aspect-ratio: 1;
  border-radius: 6px; overflow: hidden; z-index: 2;
  background: #17171a;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
}
.sleeve img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sleeve.nocover img { display: none; }
.sleeve.nocover::before {
  content: "S"; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 22vmin; font-weight: 200; color: rgba(255, 255, 255, .12);
  background: linear-gradient(135deg, #1d1d22, #121215);
}

/* Light Sweep: só transform, barato para a GPU */
.sweep { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sweep::before {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -45%; width: 30%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .05) 35%, rgba(255, 255, 255, .17) 50%, rgba(255, 255, 255, .05) 65%, transparent 100%);
  transform: skewX(-18deg) translateX(0);
  animation: sweep 8s ease-in-out infinite;
  will-change: transform;
}
@keyframes sweep {
  0%   { transform: skewX(-18deg) translateX(0); }
  40%  { transform: skewX(-18deg) translateX(620%); }
  100% { transform: skewX(-18deg) translateX(620%); }
}

.vinyl { position: absolute; right: 0; top: 10.3%; width: 62%; aspect-ratio: 1; border-radius: 50%; z-index: 1; filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .55)); }
.disc {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 31%, #050506 31.2% 32%, transparent 32.4%),
    repeating-radial-gradient(circle, #151518 0 1.5px, #0d0d0f 1.5px 3px);
  animation: spin 9s linear infinite;
  animation-play-state: paused;
}
.vinyl.playing .disc { animation-play-state: running; }
/* Reflexo fixo: não gira junto com o disco */
.vinyl::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 30deg, transparent 0 8%, rgba(255, 255, 255, .09) 14%, transparent 22%, transparent 55%, rgba(255, 255, 255, .06) 62%, transparent 70%);
}
.label {
  position: absolute; left: 34%; top: 34%; width: 32%; height: 32%; border-radius: 50%;
  overflow: hidden; background: #26221a; border: 1px solid rgba(255, 255, 255, .06);
}
.label img { width: 100%; height: 100%; object-fit: cover; display: block; }
.label::after { content: ""; position: absolute; left: 47%; top: 47%; width: 6%; height: 6%; border-radius: 50%; background: var(--bg); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- informações ---------- */
.meta { text-align: center; width: 100%; min-height: 92px; }
.program { margin: 0 0 8px; min-height: 14px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
h1 { margin: 0; font-size: clamp(22px, 5.5vw, 30px); font-weight: 600; letter-spacing: -.01em; line-height: 1.2; overflow-wrap: anywhere; }
.artist { margin: 6px 0 0; font-size: 15px; color: var(--muted); min-height: 22px; }

.spectrum { width: 100%; height: 64px; display: block; }

/* ---------- controles ---------- */
.controls { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.play {
  width: 72px; height: 72px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--fg); color: #0b0b0d; display: grid; place-items: center;
  transition: transform .15s ease, background .2s ease;
}
.play:hover { transform: scale(1.04); }
.play:active { transform: scale(.97); }
.play svg { width: 30px; height: 30px; fill: currentColor; grid-area: 1 / 1; }
.play .i-pause { display: none; }
.play[data-playing="true"] .i-play { display: none; }
.play[data-playing="true"] .i-pause { display: block; }

.volume { display: flex; align-items: center; gap: 10px; width: min(100%, 240px); }
.icon { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 6px; display: grid; place-items: center; }
.icon:hover { color: var(--fg); }
.icon svg { width: 22px; height: 22px; grid-area: 1 / 1; }
.icon .i-mute { display: none; }
.icon[aria-pressed="true"] .i-vol { display: none; }
.icon[aria-pressed="true"] .i-mute { display: block; }

input[type="range"] { -webkit-appearance: none; appearance: none; flex: 1; height: 24px; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient(to right, var(--fg) var(--fill, 80%), var(--line) var(--fill, 80%)); }
input[type="range"]::-moz-range-track { height: 3px; border-radius: 2px; background: var(--line); }
input[type="range"]::-moz-range-progress { height: 3px; border-radius: 2px; background: var(--fg); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5.5px; border-radius: 50%; background: var(--fg); border: 0; }
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--fg); border: 0; }

button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- relógio ---------- */
.clock { margin-top: auto; padding-top: 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--muted); }
.clock time { font-size: 20px; font-weight: 300; letter-spacing: .1em; font-variant-numeric: tabular-nums; color: var(--fg); }
.clock span { font-size: 12px; letter-spacing: .06em; }

@media (prefers-reduced-motion: reduce) {
  .sweep::before { animation: none; opacity: 0; }
  .disc { animation-duration: 24s; }
}