/* Mesa de noche: la lectora asoma arriba, los discos quedan sueltos abajo,
   el reproductor flota a la derecha (abajo en el teléfono). */
:root {
  color-scheme: dark;
  --desk: #0c0c0b;
  --lamp: #1f1e1b;
  --ink: #ecebe5;
  --muted: #8f8d85;
  --line: #2e2d29;
  --panel: #151513;
  --tip: #fff8cf;
  --tip-ink: #1d1b12;
  --lcd: #b4bd9c;
  --lcd-ink: #1b2315;
  --led: #5ee173;
  --amber: #ffb43a;
  --f-ui: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-lcd: "Doto", "VT323", ui-monospace, Menlo, monospace;
  --f-hand: "Permanent Marker", "Marker Felt", "Comic Sans MS", cursive;
  --D: 240px;
  --u: 2.4px;
  --tray-ms: 1050ms;
}
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font: 15px/1.45 var(--f-ui);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
button, input { font: inherit; color: inherit; }

.stage {
  position: relative;
  height: 100%;
  overflow: hidden;
  overflow: clip;
  user-select: none;
  -webkit-user-select: none;
  background:
    radial-gradient(70% 60% at 50% 30%, var(--lamp) 0%, rgba(31,30,27,0) 70%),
    var(--desk);
}

/* ---------- títulos y bordes ---------- */
.brand {
  position: absolute; z-index: 1300; margin: 0;
  top: 22px; left: max(24px, env(safe-area-inset-left, 0px));
  pointer-events: none;
}
.brand h1, .brand .brand-nombre {
  margin: 0;
  font-size: clamp(22px, 2.6vw, 36px);
  font-weight: 650;
  font-stretch: 116%;
  letter-spacing: -0.02em;
  line-height: 1;
}
.vol {
  display: inline-block;
  margin-left: .25em;
  font: 400 .52em/1 var(--f-hand);
  color: var(--tip);
  transform: rotate(-7deg) translateY(-.35em);
}
.sound {
  position: absolute; z-index: 1300;
  top: 18px; right: max(20px, env(safe-area-inset-right, 0px));
  display: flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 8px 6px; cursor: pointer;
  font-size: 14px; color: var(--ink);
}
.sound svg { width: 18px; height: 18px; flex: none; }
.sound:focus-visible, .linkish:focus-visible, .btn:focus-visible, .eject-key:focus-visible, .x:focus-visible {
  outline: 2px solid var(--tip); outline-offset: 3px; border-radius: 6px;
}
.foot {
  position: absolute; z-index: 1300;
  left: max(24px, env(safe-area-inset-left, 0px));
  right: max(24px, env(safe-area-inset-right, 0px));
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  pointer-events: none;
}
.foot > * { pointer-events: auto; }
.foot p { margin: 0; font-size: 15px; color: var(--ink); }
.foot .mini-brand { display: none; font-weight: 650; font-stretch: 116%; font-size: 18px; letter-spacing: -0.02em; }
.linkish {
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  font-size: 15px; color: var(--ink);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #5d5b55;
}
.linkish:hover { text-decoration-color: var(--ink); }

/* ---------- lectora ---------- */
.drive {
  position: absolute; top: 0; left: 0; z-index: 1100;
  width: calc(var(--u) * 126);
  height: calc(var(--u) * 156);
  pointer-events: none;
}
.casing {
  position: absolute; left: 0; top: 0; z-index: 2;
  width: 100%; height: calc(var(--u) * 40);
  pointer-events: auto;
}
.casing svg { display: block; width: 100%; height: 100%; }
.casing::after {
  content: ""; position: absolute; top: 100%;
  left: calc(var(--u) * 2); right: calc(var(--u) * 2);
  height: calc(var(--u) * 7);
  background: linear-gradient(rgba(0,0,0,.62), rgba(0,0,0,0));
  pointer-events: none;
}
.led { fill: #2d3a2f; transition: fill .2s; }
.drive[data-led="idle"] .led { fill: #3f7d49; }
.drive[data-led="read"] .led { fill: var(--amber); animation: blink .18s steps(2) infinite; }
.drive[data-led="busy"] .led { fill: var(--amber); }
.drive[data-led="play"] .led { fill: var(--led); animation: blink 1.6s steps(2) infinite; }
@keyframes blink { 50% { fill: #5b4a22; } }
.drive[data-led="play"] .led { animation-name: blinkg; }
@keyframes blinkg { 50% { fill: #3b8a48; } }

.eject-key {
  position: absolute;
  left: calc(var(--u) * 103); top: calc(var(--u) * 37);
  width: max(40px, calc(var(--u) * 16)); height: max(32px, calc(var(--u) * 10));
  transform: translate(-50%, -50%);
  background: none; border: 0; padding: 0; cursor: pointer;
}
.tray {
  position: absolute; z-index: 1;
  left: calc(var(--u) * 2); top: calc(var(--u) * 32);
  width: calc(var(--u) * 122); height: calc(var(--u) * 124);
  transition: transform var(--tray-ms) cubic-bezier(.55, 0, .3, 1);
  filter: drop-shadow(0 calc(var(--u) * 2) calc(var(--u) * 3) rgba(0,0,0,.75));
  pointer-events: auto;
}
.tray.closed { transform: translateY(calc(var(--u) * -116)); }
.tray svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tray .ring { stroke: var(--tip); opacity: 0; transition: opacity .2s; }
.tray.target .ring { opacity: .75; }
.casing.target { filter: brightness(1.12); }

.tip {
  position: absolute; z-index: 3;
  max-width: 240px; width: max-content;
  padding: 6px 10px;
  background: var(--tip); color: var(--tip-ink);
  border: 1px solid #b9b08a;
  border-radius: 6px;
  font-size: 14px; line-height: 1.3;
  box-shadow: 0 4px 14px rgba(0,0,0,.45);
  pointer-events: none;
  transition: top .9s cubic-bezier(.55, 0, .3, 1), opacity .2s;
}
.tip[data-side="right"] { transform: translateY(-50%); }
.tip[data-side="below"] { transform: translateX(-50%); max-width: 200px; text-align: center; }
.tip::before {
  content: ""; position: absolute; width: 9px; height: 9px;
  background: var(--tip); border: 1px solid #b9b08a;
  transform: rotate(45deg);
}
.tip[data-side="right"]::before { left: -5.5px; top: calc(50% - 5px); border-top: 0; border-right: 0; }
.tip[data-side="below"]::before { top: -5.5px; left: calc(50% - 5px); border-bottom: 0; border-right: 0; }

/* ---------- discos ---------- */
.disc {
  position: absolute; left: 0; top: 0; z-index: 10;
  width: var(--D); height: var(--D);
  border-radius: 50%;
  touch-action: none;
  cursor: grab;
  outline: none;
  --lift: 0;
  --sheen: .6;
}
.disc.held { cursor: grabbing; }
.disc-shadow {
  position: absolute; inset: 1.5%;
  border-radius: 50%;
  box-shadow:
    calc(var(--lift) * 10px) calc(3px + var(--lift) * 18px) calc(6px + var(--lift) * 26px) rgba(0,0,0,.78);
}
.disc-spin { position: absolute; inset: 0; border-radius: 50%; }
.disc canvas { display: block; width: 100%; height: 100%; }
.disc-sheen {
  position: absolute; inset: 0; border-radius: 50%;
  pointer-events: none;
  background:
    conic-gradient(from 200deg,
      rgba(255,255,255,0) 0deg, rgba(255,255,255,.22) 20deg, rgba(255,255,255,0) 46deg,
      rgba(255,255,255,0) 176deg, rgba(255,255,255,.14) 200deg, rgba(255,255,255,0) 226deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 27%, #000 27.6%, #000 98.5%, transparent 99.5%);
  mask: radial-gradient(circle closest-side, transparent 27%, #000 27.6%, #000 98.5%, transparent 99.5%);
  mix-blend-mode: screen;
  opacity: var(--sheen);
}
.disc:focus-visible::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 2px solid var(--tip);
}
.disc.deal { animation: deal .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes deal { from { opacity: 0; translate: 0 calc(var(--D) * .45); } }
.tray .disc { z-index: 2; cursor: grab; }

/* ---------- reproductor ---------- */
.player {
  position: absolute; z-index: 1200;
  top: 96px; right: max(24px, env(safe-area-inset-right, 0px));
  width: clamp(300px, 28vw, 420px);
  display: grid; gap: 10px;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
  opacity: 0; visibility: hidden;
  transform: translateY(14px) scale(.985);
  transition: opacity .35s, transform .35s, visibility 0s linear .35s;
}
.player.on {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .35s, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.lcd {
  position: relative;
  padding: 7px 11px 6px;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 40%),
    var(--lcd);
  color: var(--lcd-ink);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.35);
  font-family: var(--f-lcd);
  font-weight: 700;
  overflow: hidden;
}
.lcd::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, transparent 1px 3px);
}
.lcd-row { display: flex; align-items: baseline; gap: 10px; font-size: 15px; letter-spacing: .06em; }
.lcd-row .lcd-label { font-size: 11px; opacity: .75; }
.lcd-time { margin-left: auto; font-size: 22px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.lcd-icon { width: 1.2em; }
.lcd-scroll { overflow: hidden; white-space: nowrap; font-size: 17px; letter-spacing: .08em; margin-top: 1px; }
.lcd-scroll span { display: inline-block; }
.lcd-scroll span.scroll { animation: marquee 9s ease-in-out infinite alternate; }
@keyframes marquee { 0%, 12% { transform: translateX(0); } 88%, 100% { transform: translateX(var(--shift, 0px)); } }

.screen {
  position: relative;
  aspect-ratio: 16 / 9; max-width: 100%;
  border-radius: 6px;
  overflow: hidden;
  background: #050505;
  box-shadow: inset 0 0 0 1px #000;
}
.screen-art {
  position: absolute; inset: 0;
  display: grid; place-items: center;
}
.screen-art canvas {
  width: 46%; aspect-ratio: 1; height: auto;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.7));
}
.screen-art.spinning canvas { animation: spin 1.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.yt-wrap { position: absolute; inset: 0; }
.yt-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }
.yt-wrap.off { visibility: hidden; }
.screen-msg {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 12px;
  text-align: center;
  background: linear-gradient(rgba(5,5,5,0) 30%, rgba(5,5,5,.88) 75%);
}
.screen-msg p { margin: 0; font-size: 12.5px; line-height: 1.35; color: #c9c7bf; max-width: 34ch; }
.screen.has-msg .screen-art { justify-items: start; padding-left: 5%; }
.screen.has-msg .screen-art canvas { width: 40%; }
.screen.has-msg .screen-msg {
  left: 49%; background: none;
  align-items: flex-start; justify-content: center; text-align: left;
  padding: 10px 14px 10px 0;
}
.now { display: grid; gap: 2px; min-width: 0; padding: 0 2px; }
.now-title {
  margin: 0;
  font: 400 24px/1.15 var(--f-hand);
  overflow-wrap: anywhere;
}
.now-artist { margin: 0; color: var(--muted); font-size: 14px; }
.controls { display: flex; gap: 8px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 0 12px;
  border-radius: 7px;
  border: 1px solid #3a3934;
  background: linear-gradient(#26251f, #1b1a17);
  color: var(--ink);
  font-size: 13.5px; font-weight: 550;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 0 #000;
}
.btn:hover { border-color: #57554d; }
.btn:active { transform: translateY(1px); }
.btn.solid { background: var(--tip); color: var(--tip-ink); border-color: #b9b08a; }
.btn.ghost { margin-left: auto; background: none; box-shadow: none; }

/* ---------- lista ---------- */
.drawer {
  position: absolute; z-index: 3000;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 100%);
  box-sizing: border-box;
  display: flex; flex-direction: column;
  background: #121210;
  border-left: 1px solid var(--line);
  box-shadow: -30px 0 60px rgba(0,0,0,.5);
  transform: translateX(104%);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
  user-select: text; -webkit-user-select: text;
}
.drawer.open { transform: none; }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-block: 18px 10px;
  padding-left: 20px; padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.drawer h2 { margin: 0; font-size: 20px; font-weight: 650; font-stretch: 112%; letter-spacing: -0.01em; }
.x { background: none; border: 0; font-size: 26px; line-height: 1; padding: 4px 8px; cursor: pointer; color: var(--ink); }
.drawer-body {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding-block: 4px 28px;
  padding-left: 20px; padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.disc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.disc-list li {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #22211e;
}
.disc-list canvas { width: 48px; height: 48px; display: block; }
.disc-list b { display: block; font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.disc-list span { display: block; color: var(--muted); font-size: 13px; }
.row-actions { display: flex; gap: 6px; }
.row-actions .btn { min-height: 30px; padding: 0 10px; font-size: 12.5px; }
.add { display: grid; gap: 6px; margin-top: 26px; }
.add h3 { margin: 0 0 4px; font-size: 16px; font-weight: 650; }
.add label { font-size: 12.5px; color: var(--muted); letter-spacing: .02em; }
.add input {
  min-height: 38px; padding: 0 10px; box-sizing: border-box; width: 100%;
  border-radius: 7px; border: 1px solid #3a3934; background: #0b0b0a;
}
.add input:focus { outline: 2px solid var(--tip); outline-offset: 1px; }
.add .btn { justify-self: start; margin-top: 8px; }
.form-err { margin: 2px 0 0; min-height: 1.2em; font-size: 13px; color: #ffb4a4; }
.hint { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; max-width: 46ch; }
.hint code { font-size: 12px; color: var(--ink); }

/* ---------- teléfono ---------- */
@media (max-width: 759px) {
  .brand { display: none; }
  .foot .mini-brand { display: block; }
  .foot .tagline { display: none; }
  .sound .sound-label { display: none; }
  .sound { top: 10px; right: max(10px, env(safe-area-inset-right, 0px)); }
  .player {
    top: auto;
    left: max(12px, env(safe-area-inset-left, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    width: auto;
    padding: 10px; gap: 8px;
  }
  .now { display: none; }
  .lcd-time { font-size: 19px; }
  .tip { font-size: 13px; }
  .tip[data-side="below"] { max-width: 220px; }
  .btn.ghost { margin-left: 0; }
  .foot { left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-height: 520px) and (min-width: 760px) {
  .player { top: 70px; width: clamp(260px, 30vw, 340px); }
  .now { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --tray-ms: 280ms; }
  .disc.deal { animation: none; }
  .screen-art.spinning canvas, .lcd-scroll span.scroll { animation: none; }
  .tip { transition: none; }
}