:root {
  --bg: #ffffff;
  --text: #000000;
  --text-2: #8a8a8e;
  --text-3: #bcbcc1;
  --surface: #f2f2f7;
  --surface-2: #e6e6eb;
  --line: #d6d6db;
  --accent: #fa233b;        /* Apple Music red */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%;
  background: var(--bg); color: var(--text); font-family: var(--font);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overscroll-behavior: none;
}

/* ---- Stage: full-screen mobile, iPhone frame on desktop ---- */
#stage { position: relative; overflow: hidden; width: 100vw; height: 100vh; height: 100dvh; background: var(--bg); }
@media (min-width: 480px) and (min-height: 640px) {
  body { display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #f3f3f5, #e6e6ea); }
  #stage {
    width: 440px; height: 956px; max-height: calc(100dvh - 32px);
    border-radius: 52px; box-shadow: 0 30px 70px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.07);
  }
}
#app { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; }

/* ---- Screens ---- */
.screen { display: none; flex: 1; flex-direction: column; min-height: 100%; }
.screen.active { display: flex; }
.load-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding: 40px 28px; }
.brand { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.subtitle { color: var(--text-2); margin: 0; font-size: 16px; }
.note { color: var(--text-3); font-size: 13px; max-width: 30ch; margin: 6px 0 0; line-height: 1.4; }
.loaders { width: min(360px, 82vw); display: flex; flex-direction: column; gap: 18px; margin-top: 10px; }
.loader-row { display: flex; flex-direction: column; gap: 8px; }
.loader-head { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-2); }
.loader-pct { font-variant-numeric: tabular-nums; }
.bar { height: 4px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; width: 0%; background: var(--text); border-radius: 999px; transition: width 0.18s ease; }
.bar-fill.indeterminate { width: 30% !important; animation: slide 1.1s ease-in-out infinite; }
@keyframes slide { 0% { margin-left: -30%; } 100% { margin-left: 100%; } }

/* ======================================================================
 * Now-playing player (Apple Music style)
 * ==================================================================== */
.player {
  flex: 1; display: flex; flex-direction: column;
  padding: 6px 24px calc(18px + env(safe-area-inset-bottom));
}
.player-grip { width: 38px; height: 5px; border-radius: 999px; background: var(--line); margin: 12px auto 10px; }

.art-wrap { display: flex; justify-content: center; margin-top: 8px; }
.art {
  width: min(100%, 360px); aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 12px; box-shadow: 0 16px 38px rgba(0,0,0,0.20);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; }
.meta-text { min-width: 0; }
.song { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.artist { font-size: 18px; color: var(--accent); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.more { width: 30px; height: 30px; border-radius: 50%; border: none; background: var(--surface-2); color: var(--text-2); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; cursor: pointer; }
.more svg { width: 16px; height: 16px; fill: currentColor; }
.more:active { transform: scale(0.94); }
.more:disabled { opacity: 0.4; }

/* Progress bars */
.progress { display: flex; flex-direction: column; gap: 7px; margin-top: 18px; }
.progress-sub { margin-top: 10px; }
.times { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.tl-seek { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; margin: 0; cursor: pointer; --pct: 0%; }
.tl-seek::-webkit-slider-runnable-track { height: 5px; border-radius: 999px; background: linear-gradient(to right, var(--text-2) var(--pct), var(--surface-2) var(--pct)); }
.tl-seek::-moz-range-track { height: 5px; border-radius: 999px; background: var(--surface-2); }
.tl-seek::-moz-range-progress { height: 5px; border-radius: 999px; background: var(--text-2); }
.tl-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; margin-top: -4.5px; box-shadow: 0 0 0 0.5px rgba(0,0,0,0.16), 0 1px 4px rgba(0,0,0,0.25); }
.tl-seek::-moz-range-thumb { width: 14px; height: 14px; border: none; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0.5px rgba(0,0,0,0.16), 0 1px 4px rgba(0,0,0,0.25); }
.tl-seek:active::-webkit-slider-thumb { transform: scale(1.2); }
/* Read-only return bar: thinner, no knob */
.progress-sub .tl-seek { height: 16px; }
.progress-sub .tl-seek::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(to right, var(--text-3) var(--pct), var(--surface-2) var(--pct)); }
.progress-sub .tl-seek::-webkit-slider-thumb { width: 0; height: 0; opacity: 0; }
.progress-sub .tl-seek::-moz-range-thumb { width: 0; height: 0; opacity: 0; border: none; }
.progress-sub .tl-seek::-moz-range-progress { background: var(--text-3); }
.progress-sub .times { font-size: 11px; }

/* Dev-only seek chips */
.timeline-quick { display: none; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
body.dev .timeline-quick { display: flex; }
.chip { background: var(--surface-2); color: var(--text-2); border: none; font-family: var(--font); font-size: 13px; font-weight: 500; padding: 8px 12px; border-radius: 999px; cursor: pointer; font-variant-numeric: tabular-nums; }
.chip:active { background: var(--line); color: var(--text); }

/* Transport */
.transport { display: flex; align-items: center; justify-content: center; gap: 56px; margin-top: auto; padding: 14px 0 6px; }
.tbtn { background: none; border: none; padding: 8px; cursor: pointer; color: var(--text); display: flex; align-items: center; justify-content: center; }
.tbtn .ic { width: 42px; height: 36px; fill: currentColor; display: block; }
.tbtn-skip .ic { width: 50px; }
.tbtn:active { transform: scale(0.9); }
.tbtn .ic-pause { display: none; }
.tbtn.is-playing .ic-play { display: none; }
.tbtn.is-playing .ic-pause { display: block; }
#next-btn:disabled { color: var(--text-3); cursor: not-allowed; }
#next-btn.armed { color: var(--accent); animation: tpulse 1.1s ease-in-out infinite; }
@keyframes tpulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* Bottom utility row */
.util { display: flex; justify-content: center; gap: 28px; padding-top: 10px; }
.util-btn { background: none; border: none; color: var(--text-2); cursor: pointer; padding: 8px; }
.util-btn svg { width: 26px; height: 26px; display: block; }
.util-btn:active { transform: scale(0.92); }
.util-btn.locked { color: var(--accent); }
.util-btn .ic-lock-closed { display: none; }
.util-btn.locked .ic-lock-open { display: none; }
.util-btn.locked .ic-lock-closed { display: block; }

/* Transient status toast (notifications / errors) */
.toast {
  position: absolute; top: calc(12px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.86); color: #fff; font-size: 13px; font-weight: 500;
  padding: 9px 15px; border-radius: 999px; max-width: 84%; text-align: center;
  opacity: 0; transition: opacity 0.2s ease; pointer-events: none; z-index: 30;
}
.toast.show { opacity: 1; }

/* Generic buttons (loading/error/settings) */
.btn { border: none; border-radius: 16px; font-family: var(--font); font-weight: 600; cursor: pointer; transition: transform 0.06s ease, opacity 0.15s ease; }
.btn:active { transform: scale(0.97); }
.btn:disabled { cursor: not-allowed; opacity: 0.4; }
.btn-ghost { background: var(--surface-2); color: var(--text); padding: 12px 18px; font-size: 15px; }
.btn-sm { padding: 9px 14px; font-size: 14px; font-weight: 500; }

/* ---- Settings sheet ---- */
.settings {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 20;
  max-height: 88vh; max-height: 88dvh; overflow-y: auto;
  background: var(--surface); border-radius: 22px 22px 0 0;
  padding: 8px 20px calc(28px + env(safe-area-inset-bottom));
  box-shadow: 0 -16px 44px rgba(0,0,0,0.18); display: flex; flex-direction: column; gap: 18px;
}
.sheet-grip { width: 38px; height: 5px; border-radius: 999px; background: var(--line); margin: 8px auto 2px; }
.settings-head { display: flex; align-items: center; justify-content: space-between; }
.settings h2 { margin: 0; font-size: 22px; font-weight: 700; }
.btn-done { background: none; color: var(--accent); font-size: 17px; font-weight: 600; padding: 6px 4px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field > label { font-size: 13px; color: var(--text-2); }
.field-row { flex-direction: row; align-items: center; justify-content: space-between; }
.field-inline { display: flex; gap: 10px; align-items: center; }
.field-inline input { flex: 1; }
.field input[type="number"], .field select {
  background: var(--surface-2); border: none; color: var(--text);
  border-radius: 12px; padding: 13px 14px; font-size: 16px; font-family: var(--font); width: 100%;
  -webkit-appearance: none; appearance: none;
}
.field input[type="range"] { width: 100%; accent-color: var(--text); }
.nudge-quick { display: flex; gap: 8px; }
.tiny-readout { font-size: 12px; color: var(--text-2); min-height: 14px; }
.settings-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; }
.settings-hint { font-size: 12px; color: var(--text-3); }
.switch { -webkit-appearance: none; appearance: none; width: 50px; height: 30px; border-radius: 999px; background: var(--surface-2); position: relative; cursor: pointer; transition: background 0.2s ease; flex: 0 0 auto; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 26px; height: 26px; border-radius: 50%; background: #fff; transition: transform 0.2s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.switch:checked { background: var(--text); }
.switch:checked::after { transform: translateX(20px); }

/* ======================================================================
 * Fun FX — falling hearts (Play) + party fireworks (drop at 0:23)
 * ==================================================================== */
#fireworks { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: none; pointer-events: none; }
body.party #fireworks { display: block; }
.fx { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.flash { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: #fff4cf; opacity: 0; mix-blend-mode: screen; }
.heart { position: absolute; will-change: transform, opacity; user-select: none; line-height: 1; animation-name: heart-fall; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes heart-fall {
  0%   { transform: translate(0, 0) scale(0.2) rotate(0deg); opacity: 0; }
  18%  { transform: translate(calc(var(--drift) * 0.18), 22px) scale(1) rotate(calc(var(--rot) * 0.18)); opacity: 1; }
  70%  { opacity: 0.85; }
  100% { transform: translate(var(--drift), 150px) scale(0.8) rotate(var(--rot)); opacity: 0; }
}

/* Party theme — inverse of light (black/white), gold fireworks; only the phone
 * interior flips, the desktop surround stays light. */
#stage { transition: background-color 0.5s ease; }
body.party {
  --bg: #000000; --text: #ffffff; --text-2: #98989f; --text-3: #5a5a5e;
  --surface: #1c1c1e; --surface-2: #2c2c2e; --line: #38383a;
}
body.party .art { opacity: 0.12; box-shadow: none; }

/* Locked-for-show: hide the seekable bar + dev chips (keep the return readout) */
.screen.locked .progress:not(.progress-sub), .screen.locked .timeline-quick { display: none; }

.hidden { display: none !important; }