*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  min-height: 100vh;
  background: #1A1814;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  padding: 40px 24px;
}

/* ════════════════
   META PANEL
════════════════ */
.meta {
  width: 220px;
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .5s, transform .5s;
  pointer-events: none;
}
.meta.visible { opacity: 1; transform: translateX(0); pointer-events: auto; }

.meta-cover {
  width: 160px; height: 160px;
  border-radius: 6px;
  margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 64px;
  border: 1px solid #3A3228;
  background: #2A2420;
  overflow: hidden;
}
.meta-cover img { width: 100%; height: 100%; object-fit: cover; }

.meta-title  { font-size: 18px; font-weight: 600; color: #F0E8D8; margin-bottom: 4px; }
.meta-artist { font-size: 13px; color: #A09080; margin-bottom: 3px; }
.meta-year   { font-size: 11px; color: #6A6058; letter-spacing: .1em; margin-bottom: 16px; }
.meta-desc   {
  font-size: 12px; color: #908070; line-height: 1.7;
  border-left: 2px solid #D96B2A; padding-left: 10px; margin-bottom: 18px;
}

.tracklist { list-style: none; }
.tracklist li {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid #2A2420;
  font-size: 12px; color: #706050; cursor: pointer;
  transition: color .15s;
}
.tracklist li:hover  { color: #C0A880; }
.tracklist li.playing { color: #D96B2A; }
.tnum { min-width: 20px; font-variant-numeric: tabular-nums; color: #504840; font-size: 10px; }
.tracklist li.playing .tnum { color: #A84E18; }
.tname { flex: 1; }
.tdur  { font-variant-numeric: tabular-nums; color: #504840; font-size: 10px; }

/* ════════════════
   PLAYER SHELL
════════════════ */
.wm-wrap { flex-shrink: 0; position: relative; }

.wm {
  width: 240px;
  background: linear-gradient(160deg, #C8C0AE 0%, #B0A898 45%, #A09888 100%);
  border-radius: 12px 12px 16px 16px;
  border: 2px solid #706860;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.25),
    inset 0 -2px 0 rgba(0,0,0,.2),
    0 8px 32px rgba(0,0,0,.6),
    0 2px 4px rgba(0,0,0,.4);
  position: relative;
  overflow: hidden;
}
.wm::before {
  content: '';
  position: absolute; inset: 3px;
  border-radius: 10px 10px 14px 14px;
  border: 1px solid rgba(255,255,255,.18);
  pointer-events: none; z-index: 10;
}

/* top strip */
.wm-top {
  height: 36px;
  background: linear-gradient(180deg, #C0B8A6 0%, #A8A090 100%);
  border-bottom: 2px solid #706860;
  display: flex; align-items: center;
  padding: 0 12px; gap: 8px;
}
.top-eject {
  width: 28px; height: 12px;
  background: linear-gradient(180deg, #383028 0%, #201C18 100%);
  border-radius: 3px; border: 1px solid #141010;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 2px rgba(0,0,0,.5);
  cursor: pointer; margin-right: auto;
}
.top-btn {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(0,0,0,.35); cursor: pointer;
  position: relative;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.4);
  transition: filter .1s;
}
.top-btn::after {
  content: ''; position: absolute;
  top: 2px; left: 3px; right: 3px; height: 4px;
  background: rgba(255,255,255,.35); border-radius: 2px;
}
.top-btn:hover  { filter: brightness(1.15); }
.top-btn:active { filter: brightness(.85); transform: scale(.95); }
.btn-gray   { background: linear-gradient(180deg, #908880 0%, #706860 100%); }
.btn-orange { background: linear-gradient(180deg, #F07830 0%, #C85820 100%); border-color: rgba(0,0,0,.4); }
.btn-orange:hover { background: linear-gradient(180deg, #FF8840 0%, #D96830 100%); }

.wm-inner { padding: 12px 12px 16px; }

/* ────────────────
   TAPE WINDOW
   Pure visual — no text inside
──────────────── */
.tape-window {
  background: #0E0C0A;
  border-radius: 8px;
  padding: 8px;
  border: 2px solid #484038;
  box-shadow: inset 0 4px 12px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05);
  margin-bottom: 12px;
}
.tape-inner {
  background: linear-gradient(180deg, #E8DFC8 0%, #D8CEB8 100%);
  border-radius: 4px;
  height: 110px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  border: 1px solid #C0B498;
  overflow: hidden;
}
/* horizontal grain lines */
.tape-inner::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    180deg, transparent 0, transparent 5px,
    rgba(0,0,0,.03) 5px, rgba(0,0,0,.03) 6px
  );
}
/* bottom tape guide bar */
.tape-inner::after {
  content: ''; position: absolute;
  left: 14px; right: 14px; bottom: 10px;
  height: 3px; background: #C0AA88; border-radius: 2px;
}
/* top tape guide bar */
.tape-guide-top {
  position: absolute;
  left: 14px; right: 14px; top: 10px;
  height: 3px; background: #C0AA88; border-radius: 2px;
}

/* ── REELS ── */
.reel {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3A3430, #1A1410);
  border: 3px solid #484038;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.6),
    inset 0 -1px 2px rgba(255,255,255,.08),
    0 1px 3px rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; position: relative; z-index: 1;
}
.reel-hub {
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #F07830, #A84E18);
  border: 1.5px solid #803810;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.4); position: relative;
}
.reel-hub::after {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: #0E0C0A; box-shadow: inset 0 1px 2px rgba(0,0,0,.6);
}
/* 3-spoke pattern */
.reel-hub::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background:
    linear-gradient(0deg,   #0E0C0A 1.5px, transparent 1.5px) center/100% 100%,
    linear-gradient(60deg,  #0E0C0A 1.5px, transparent 1.5px) center/100% 100%,
    linear-gradient(120deg, #0E0C0A 1.5px, transparent 1.5px) center/100% 100%;
}
.reel.spin { animation: spin 1.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* progress bar (below tape inner, inside tape-window) */
.tape-prog-wrap {
  height: 3px; background: #484038; border-radius: 2px; margin-top: 6px;
}
.tape-prog {
  height: 100%; width: 0%; background: #D96B2A;
  border-radius: 2px; transition: width .3s linear;
}

/* brand plate */
.brand-plate {
  background: linear-gradient(180deg, #F0E8D0 0%, #E0D4B8 100%);
  border-radius: 4px; border: 1px solid #C0AA88;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(0,0,0,.1);
  padding: 5px 10px; margin-bottom: 11px;
  display: flex; align-items: baseline; gap: 10px;
}
.brand-name { font-size: 13px; font-weight: 700; letter-spacing: .2em; color: #2A2018; }
.brand-sub  { font-size: 7px; letter-spacing: .18em; color: #D96B2A; font-weight: 600; }

/* transport */
.ctrl-row {
  display: flex; align-items: center; justify-content: center;
  gap: 5px; margin-bottom: 10px;
}
.cbtn {
  height: 28px; border-radius: 5px;
  border: 1.5px solid #141210;
  background: linear-gradient(180deg, #3A3428 0%, #201C16 100%);
  color: #D8C8A8; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; position: relative;
  transition: filter .1s, transform .08s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 2px 4px rgba(0,0,0,.4);
}
.cbtn::after {
  content: ''; position: absolute;
  top: 2px; left: 3px; right: 3px; height: 4px;
  background: rgba(255,255,255,.12); border-radius: 2px; pointer-events: none;
}
.cbtn:hover  { filter: brightness(1.25); }
.cbtn:active { transform: translateY(1px); filter: brightness(.9); }
.cbtn-sm   { width: 28px; }
.cbtn-play {
  width: 36px;
  background: linear-gradient(180deg, #F07830 0%, #A84E18 100%);
  border-color: #803010;
}
.cbtn-play::after { background: rgba(255,255,255,.2); }

/* volume */
.vol-row { display: flex; align-items: center; gap: 7px; }
.vol-lbl { font-size: 7px; letter-spacing: .12em; color: #808070; text-transform: uppercase; width: 20px; flex-shrink: 0; }
.vol-track {
  flex: 1; height: 5px;
  background: linear-gradient(180deg, #7A7060 0%, #9A9080 100%);
  border-radius: 3px; position: relative; cursor: pointer;
  border: 1px solid #585048;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.3);
}
.vol-fill  { height: 100%; background: linear-gradient(90deg, #A84E18, #F07830); border-radius: 2px; pointer-events: none; }
.vol-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #E0D0B8, #A09080);
  border: 1.5px solid #605848;
  position: absolute; top: 50%; transform: translateY(-50%);
  pointer-events: none; box-shadow: 0 1px 3px rgba(0,0,0,.4);
}

/* album list */
.album-list {
  margin-top: 11px; border-top: 1px solid #484038;
  padding-top: 9px; display: flex; flex-direction: column; gap: 5px;
}
.ach {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 5px; border-radius: 5px;
  border: 1px solid transparent; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.ach:hover { background: rgba(255,255,255,.06); }
.ach.sel   { border-color: #D96B2A; background: rgba(217,107,42,.12); }
.ach-thumb {
  width: 28px; height: 28px; border-radius: 3px;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: 14px; border: 1px solid rgba(255,255,255,.08); overflow: hidden;
}
.ach-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ach-name { font-size: 9px; font-weight: 600; color: #1A1814; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ach-sub  { font-size: 8px; color: #706050; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* side levers */
.wm-side {
  position: absolute; right: -14px; top: 16px; bottom: 16px;
  width: 13px;
  background: linear-gradient(180deg, #9A9280 0%, #807870 100%);
  border-radius: 0 5px 5px 0;
  border: 1.5px solid #686058; border-left: none;
  display: flex; flex-direction: column;
  align-items: center; justify-content: space-evenly; padding: 8px 0;
  box-shadow: 2px 0 4px rgba(0,0,0,.3), inset -1px 0 0 rgba(255,255,255,.1);
}
.side-lever {
  width: 7px; height: 18px;
  background: linear-gradient(180deg, #B0A890 0%, #706858 100%);
  border-radius: 3px; border: 1px solid #585048; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.3);
}
.side-lever:hover { filter: brightness(1.2); }

/* bottom jack row */
.wm-bottom {
  height: 10px;
  background: linear-gradient(180deg, #9A9280 0%, #888070 100%);
  border-top: 1px solid #585048; border-radius: 0 0 14px 14px;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 14px; gap: 5px;
}
.jack { width: 6px; height: 6px; border-radius: 50%; background: #1A1610; border: 1px solid #484038; }

/* screws */
.screw {
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #A09888, #706858);
  border: 1px solid #585048;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.4); z-index: 5;
}
.screw::after {
  content: ''; position: absolute;
  top: 50%; left: 20%; right: 20%; height: 1px;
  background: rgba(0,0,0,.4); transform: translateY(-50%);
}
.s-tl { top: 8px; left: 8px; }
.s-tr { top: 8px; right: 8px; }
.s-bl { bottom: 8px; left: 8px; }
.s-br { bottom: 8px; right: 8px; }

/* loading state */
.loading-msg {
  font-size: 11px; color: #706050; text-align: center; padding: 8px 0;
}

.player-hidden {
  display: none;
}

.yt-player-hidden {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

@media (max-width: 600px) {
  body { flex-direction: column; align-items: center; gap: 32px; }
  .meta { order: 2; }
  .wm-wrap { order: 1; }
}