/* ═══════════════════════════════════════════════════════════
   MyPod — arcade cabinet
   Mobile first. No webfonts: first paint is one request.
   ═══════════════════════════════════════════════════════════ */

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

/* An author `display` rule beats the UA's `[hidden] { display: none }`, so
   anything laid out with grid/flex would keep rendering while hidden. */
[hidden] { display: none !important; }

:root {
  /* the machine */
  --void:      #0a0705;
  --cabinet:   #150e0a;
  --plastic-a: #2c2018;
  --plastic-b: #16100c;
  --plastic-c: #0e0907;
  --edge:      rgba(255, 186, 120, .11);

  /* phosphor — accent flips wholesale in game mode */
  --amber:     #ff9d2e;
  --amber-hot: #ffd9a3;
  --amber-dim: #b06718;
  --phos:      #4dff8f;
  --phos-hot:  #c8ffdd;
  --phos-dim:  #1f8a4a;
  --pink:      #ff2e88;
  --cyan:      #2ee6f0;

  --hot:   var(--amber-hot);
  --lit:   var(--amber);
  --dim:   var(--amber-dim);
  --glow:  rgba(255, 157, 46, .30);
  --screen-bg: radial-gradient(125% 125% at 50% -10%, #2a1c07, #0c0904 68%);

  /* Secondary text. The originals here were around 2:1 against the plastic —
     decorative, but genuinely hard to read, and worse now that artwork sits
     behind the page. These clear ~4.5:1 while still reading as "off". */
  --faint:   #a37c56;
  --fainter: #8a6849;

  --mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;
  --pod-w: 22.5rem;
}

/* ── GAME MODE: the whole cabinet changes character ── */
html[data-mode="game"] {
  --hot:  var(--phos-hot);
  --lit:  var(--phos);
  --dim:  var(--phos-dim);
  --glow: rgba(77, 255, 143, .28);
  --screen-bg: radial-gradient(125% 125% at 50% -10%, #06281a, #030b07 68%);
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--mono);
  color: var(--lit);
  background:
    radial-gradient(80% 45% at 50% 0%, color-mix(in srgb, var(--glow) 55%, transparent), transparent 70%),
    radial-gradient(120% 80% at 50% 120%, #1a0f07, transparent 60%),
    var(--void);
  background-attachment: fixed;
  transition: background-color .5s ease;
  overflow-x: hidden;
}

/* ═══ THE ROOM ═══
   His covers, blurred to colour, drifting behind the machine. Four fixed
   layers, all pointer-transparent, all below the content. */

.bg, .bg__film, .bg__tint, .bg__grain {
  position: fixed; inset: 0;
  pointer-events: none;
}

.bg        { z-index: -4; overflow: hidden; }
.bg__film  { z-index: -3; }
.bg__tint  { z-index: -2; }
.bg__grain { z-index: -1; }

.bg__layer {
  position: absolute;
  /* oversized so the slow drift never exposes an edge */
  inset: -10%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 2.6s ease;
  /* blur is the whole trick: cover titles become shape, and a 620px source
     is indistinguishable from a 2000px one once it's this soft */
  filter: blur(17px) saturate(1.05) contrast(1.02) brightness(.95);
  will-change: opacity, transform;
}
.bg__layer.is-on { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .bg__layer.is-on { animation: drift 15s ease-out forwards; }
  .bg__layer[data-drift="1"].is-on { animation-name: drift-b; }
  .bg__layer[data-drift="2"].is-on { animation-name: drift-c; }
  .bg__layer[data-drift="3"].is-on { animation-name: drift-d; }

  @keyframes drift   { from { transform: scale(1.00) translate(0, 0);        } to { transform: scale(1.10) translate(-1.5%, -1%); } }
  @keyframes drift-b { from { transform: scale(1.10) translate(1%, -1%);     } to { transform: scale(1.00) translate(0, 0);       } }
  @keyframes drift-c { from { transform: scale(1.02) translate(-1%, 1%);     } to { transform: scale(1.11) translate(1%, -1.5%);  } }
  @keyframes drift-d { from { transform: scale(1.11) translate(0, 1.5%);     } to { transform: scale(1.02) translate(-1%, 0);     } }
}

/* Ground for the type. The first pass put the brightest part of the film at
   the top — exactly where the marquee's pale tagline sits, which wiped it out.
   The open area is now around the device, and the top and bottom are held down. */
.bg__film {
  background:
    radial-gradient(95% 65% at 50% 40%, rgba(8, 6, 4, .06) 0%, rgba(8, 6, 4, .30) 60%, rgba(8, 6, 4, .52) 100%),
    linear-gradient(180deg,
      rgba(8, 6, 4, .46) 0%,
      rgba(8, 6, 4, .22) 20%,
      rgba(8, 6, 4, .24) 60%,
      rgba(8, 6, 4, .52) 100%);
}

/* pull everything toward the current phosphor — amber, then green in game mode */
.bg__tint {
  background: var(--lit);
  opacity: .5;
  mix-blend-mode: color;
  transition: background .6s ease;
}

/* film grain: one tiny SVG noise tile, nudged around so it never sits still */
.bg__grain {
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference) {
  .bg__grain { animation: grain 700ms steps(4) infinite; }
  @keyframes grain {
    0%   { background-position: 0 0; }
    25%  { background-position: -18px 12px; }
    50%  { background-position: 14px -16px; }
    75%  { background-position: -10px -8px; }
    100% { background-position: 0 0; }
  }
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: .6rem .9rem; background: var(--lit); color: var(--void);
  font: 700 .8rem/1 var(--mono);
}
.skip:focus { left: .5rem; top: .5rem; }

:focus-visible {
  outline: 2px solid var(--hot);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Text sitting straight on the artwork gets a dark halo, so it stays readable
   no matter which picture happens to be behind it. */
.marquee__tag,
.pod__hint,
.library__head h2,
.library__head p,
.rack__empty,
.cabinet__foot {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 10px rgba(0, 0, 0, .7);
}

/* mode-conditional text: only one twin is ever visible */
html[data-mode="music"] .marquee__game,
html[data-mode="game"]  .marquee__music { display: none; }

/* ═══ CABINET ═══ */

.cabinet {
  max-width: 68rem;
  margin: 0 auto;
  padding: max(1rem, env(safe-area-inset-top)) 1rem 6rem;
}

/* ═══ MARQUEE ═══ */

.marquee { text-align: center; padding: 1.4rem 0 1.9rem; }

.marquee__bulbs {
  height: 5px;
  background-image: radial-gradient(circle, var(--lit) 0 1.4px, transparent 1.8px);
  background-size: 15px 5px;
  background-position: center;
  opacity: .5;
  filter: drop-shadow(0 0 4px var(--glow));
}

.marquee__name {
  margin: .85rem 0 .4rem;
  font-size: clamp(1.55rem, 8.5vw, 3.4rem);
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1;
  color: var(--hot);
  text-shadow:
    0 0 6px var(--lit),
    0 0 22px var(--glow),
    0 0 48px var(--glow);
}

.marquee__tag {
  margin: 0;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--faint);
  padding-bottom: .95rem;
}

@media (prefers-reduced-motion: no-preference) {
  [data-flicker] { animation: flicker 7s infinite steps(1); }
  @keyframes flicker {
    0%, 96%, 100% { opacity: 1; }
    97%           { opacity: .55; }
    98%           { opacity: 1; }
    98.6%         { opacity: .72; }
  }
}

/* ═══ STAGE ═══ */

.stage { display: grid; gap: 2.6rem; }

@media (min-width: 56rem) {
  .stage {
    grid-template-columns: var(--pod-w) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
  }
  .pod { position: sticky; top: 1.5rem; }
}

/* ═══ THE POD ═══ */

.pod { justify-self: center; width: 100%; max-width: var(--pod-w); }

.pod__body {
  padding: .85rem .85rem 0;
  border: 1px solid var(--edge);
  border-radius: 1.75rem;
  background: linear-gradient(177deg, var(--plastic-a), var(--plastic-b) 55%, var(--plastic-c));
  box-shadow:
    inset 0 1px 0 rgba(255, 200, 140, .16),
    inset 0 -2px 3px rgba(0, 0, 0, .7),
    0 2px 3px rgba(0, 0, 0, .5),
    0 28px 64px -18px rgba(0, 0, 0, .95),
    0 0 90px -26px var(--glow);
  transition: box-shadow .6s ease;
}

/* ── SCREEN ── */

.screen {
  position: relative;
  aspect-ratio: 5 / 4;
  padding: .6rem .65rem;
  border-radius: .7rem;
  background: var(--screen-bg);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .95),
    inset 0 0 34px rgba(0, 0, 0, .85),
    0 0 0 1px rgba(255, 200, 140, .07),
    0 0 30px -6px var(--glow);
  overflow: hidden;
  transition: background .55s ease;
}

/* scanlines + vignette, inside the glass */
.screen__crt {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.34) 0 1px, transparent 1px 3px),
    radial-gradient(110% 110% at 50% 50%, transparent 55%, rgba(0,0,0,.55));
}

/* soft diagonal reflection */
.screen__glass {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(148deg, rgba(255,255,255,.10) 0%, transparent 42%);
  border-radius: inherit;
}

/* CRT power-cycle flash, driven by JS */
.screen__flash {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: var(--hot);
  opacity: 0;
  transform: scaleY(.008);
}
.screen__flash.is-on { animation: crt-cycle .42s ease-in-out; }
@keyframes crt-cycle {
  0%   { opacity: 0;   transform: scaleY(.008); }
  22%  { opacity: .95; transform: scaleY(.008); }
  45%  { opacity: .8;  transform: scaleY(1); }
  100% { opacity: 0;   transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .screen__flash.is-on { animation: none; }
}

/* the two screen views share the box */
.view {
  position: absolute; inset: 0; z-index: 2;
  padding: .6rem .65rem;
  display: flex; flex-direction: column;
  transition: opacity .22s ease;
}
html[data-mode="music"] .view--game,
html[data-mode="game"]  .view--music { opacity: 0; pointer-events: none; }

/* ── music view ── */

.lcd-bar {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .58rem; letter-spacing: .16em;
  color: var(--dim);
}
.lcd-bar__state { color: var(--lit); }

/* artwork is the hero: the art row absorbs whatever height is spare,
   the three text rows always keep their own space so nothing collides */
.np {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto auto;
  align-content: center; justify-items: center;
  gap: .1rem;
  padding: .45rem 0 .4rem;
  text-align: center;
}

.np__art {
  height: 100%;
  max-width: 100%;
  aspect-ratio: 1;
  margin-bottom: .5rem;
  border-radius: .35rem;
  background: rgba(0, 0, 0, .55);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--lit) 26%, transparent),
    0 4px 14px -4px rgba(0, 0, 0, .9),
    0 0 24px -10px var(--glow);
  overflow: hidden;
  display: grid; place-items: center;
  color: var(--dim);
  font-size: 1.1rem;
}
.np__art svg { width: 70%; height: 70%; }
.np__art img { width: 100%; height: 100%; object-fit: cover; display: block; }

.np__title {
  margin: 0; max-width: 100%;
  font-size: .92rem; font-weight: 700; line-height: 1.45;
  color: var(--hot);
  text-shadow: 0 0 10px var(--glow);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.np__line {
  margin: 0; max-width: 100%;
  display: flex; gap: .3rem; justify-content: center;
  font-size: .57rem; line-height: 1.7; letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--dim);
  overflow: hidden; white-space: nowrap;
}
.np__line > span { overflow: hidden; text-overflow: ellipsis; }
.np__genre:not(:empty)::before { content: "· "; }

.np__note {
  margin: 0; max-width: 96%;
  font-size: .55rem; line-height: 1.75; letter-spacing: .04em;
  color: var(--faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.np__note b { color: var(--lit); font-weight: 700; }

.scrub {
  margin-top: auto;
  display: flex; align-items: center; gap: .45rem;
  font-size: .56rem; letter-spacing: .08em;
  color: var(--dim);
}
.scrub__t { flex: 0 0 auto; font-variant-numeric: tabular-nums; }

.scrub__track {
  position: relative; flex: 1;
  height: 14px;               /* generous touch target */
  display: flex; align-items: center;
  cursor: pointer;
}
.scrub__track::before {
  content: ""; position: absolute; left: 0; right: 0; height: 3px;
  background: rgba(0, 0, 0, .6);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lit) 22%, transparent);
  border-radius: 2px;
}
.scrub__fill {
  position: absolute; left: 0; height: 3px; width: 0;
  background: var(--lit);
  box-shadow: 0 0 7px var(--lit);
  border-radius: 2px;
}
.scrub__head {
  position: absolute; left: 0; width: 7px; height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: var(--hot);
  box-shadow: 0 0 8px var(--lit);
  opacity: 0;
  transition: opacity .15s;
}
.scrub__track:hover .scrub__head,
.scrub__track:focus-visible .scrub__head,
.scrub__track.is-live .scrub__head { opacity: 1; }

.viz {
  margin-top: .35rem;
  width: 100%; height: 1.7rem;
  display: block;
  opacity: .95;
  filter: drop-shadow(0 0 5px var(--glow));
}

/* ── game view ── */

.view--game { padding: 0; }

.game {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  image-rendering: pixelated;
  touch-action: none;
}

.game__hud {
  position: absolute; top: .55rem; left: .65rem; right: .65rem;
  z-index: 2;
  display: flex; justify-content: space-between;
  font-size: .58rem; letter-spacing: .16em;
  color: var(--lit);
  text-shadow: 0 0 8px var(--glow);
  pointer-events: none;
}

/* what's playing, visible while you play — the whole point of game mode */
.game__np {
  position: absolute; bottom: .5rem; left: .65rem; right: .65rem;
  z-index: 2; margin: 0;
  font-size: .55rem; letter-spacing: .13em;
  color: var(--dim);
  text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  pointer-events: none;
}

.game__overlay {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-content: center; gap: .4rem;
  text-align: center;
  background: color-mix(in srgb, var(--void) 86%, transparent);
  backdrop-filter: blur(1.5px);
  transition: opacity .2s ease;
}
.game__overlay[hidden] { display: none; }

.game__big {
  margin: 0;
  font-size: 1.5rem; font-weight: 800; letter-spacing: .2em;
  color: var(--hot);
  text-shadow: 0 0 10px var(--lit), 0 0 30px var(--glow);
}
.game__small {
  margin: 0;
  font-size: .6rem; letter-spacing: .2em;
  color: var(--dim);
}
@media (prefers-reduced-motion: no-preference) {
  .game__small { animation: blink 1.5s steps(1) infinite; }
  @keyframes blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .25; } }
}

/* ── MODE SWITCH ── */

.flip {
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  padding: .9rem 0 .55rem;
}

.flip__label {
  font-size: .58rem; font-weight: 700; letter-spacing: .19em;
  color: var(--fainter);
  transition: color .3s, text-shadow .3s;
}
html[data-mode="music"] .flip__label[data-for="music"],
html[data-mode="game"]  .flip__label[data-for="game"] {
  color: var(--hot);
  text-shadow: 0 0 10px var(--lit);
}

.switch {
  --sw-w: 3.35rem;
  width: var(--sw-w); height: 1.6rem;
  padding: 0; border: 0; background: none;
  cursor: pointer;
  display: grid; place-items: center;
  -webkit-tap-highlight-color: transparent;
}
.switch__track {
  position: relative;
  width: 100%; height: 1.15rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #090605, #1c1410);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, .95),
    inset 0 -1px 0 rgba(255, 200, 140, .08);
}
.switch__knob {
  position: absolute; top: 50%; left: 3px;
  width: 1.5rem; height: .82rem;
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg, #d9cabb, #8a7767 55%, #5f4f42);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .3) inset,
    0 2px 5px rgba(0, 0, 0, .8);
  transition: left .26s cubic-bezier(.5, 1.7, .5, 1);
}
.switch[aria-checked="true"] .switch__knob {
  left: calc(100% - 1.5rem - 3px);
}
/* the LED in the knob takes the accent colour — amber, then green */
.switch__knob::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 4px; height: 4px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--lit);
  box-shadow: 0 0 8px var(--lit), 0 0 2px #000 inset;
  transition: background .4s, box-shadow .4s;
}

/* ── CONTROL CLUSTER ── */

.cluster {
  position: relative;
  height: 9.6rem;
  display: grid; place-items: center;
}

/* both clusters occupy the same footprint and trade places */
.wheel, .dpad {
  position: absolute;
  width: 8.9rem; height: 8.9rem;
  transition: opacity .3s ease, transform .42s cubic-bezier(.4, 1.5, .5, 1);
}
html[data-mode="music"] .dpad,
html[data-mode="game"]  .wheel {
  opacity: 0; pointer-events: none;
  transform: scale(.72) rotate(-32deg);
}
html[data-mode="music"] .wheel,
html[data-mode="game"]  .dpad {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* click wheel */
.wheel {
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 22%, #35271e, #1b130f 62%, #0f0a08);
  box-shadow:
    inset 0 2px 0 rgba(255, 210, 160, .13),
    inset 0 -3px 6px rgba(0, 0, 0, .75),
    0 5px 14px -4px rgba(0, 0, 0, .9);
}

.wheel__btn, .dpad__btn {
  position: absolute;
  border: 0; background: none; padding: 0;
  color: var(--dim);
  font: 700 .74rem/1 var(--mono);
  cursor: pointer;
  min-width: 2.6rem; min-height: 2.6rem;
  display: grid; place-items: center;
  border-radius: .5rem;
  transition: color .15s, transform .08s, text-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.wheel__btn:hover, .dpad__btn:hover { color: var(--hot); }
.wheel__btn:active, .dpad__btn:active,
.wheel__btn.is-hit, .dpad__btn.is-hit {
  color: var(--hot);
  text-shadow: 0 0 12px var(--lit);
  transform: scale(.9);
}

.wheel__btn--prev   { left: .25rem;  top: 50%; transform: translateY(-50%); }
.wheel__btn--next   { right: .25rem; top: 50%; transform: translateY(-50%); }
.wheel__btn--vol    { bottom: .18rem; left: 50%; transform: translateX(-50%) translateX(-1.15rem); font-size: 1.05rem; }
.wheel__btn--volup  { bottom: .18rem; left: 50%; transform: translateX(-50%) translateX(1.15rem); font-size: 1.05rem; }
.wheel__btn--prev:active, .wheel__btn--prev.is-hit { transform: translateY(-50%) scale(.9); }
.wheel__btn--next:active, .wheel__btn--next.is-hit { transform: translateY(-50%) scale(.9); }

.wheel__center, .dpad__center {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 3.9rem; height: 3.9rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 200, 140, .1);
  background: radial-gradient(circle at 50% 30%, #2b1f18, #130d0a 70%);
  color: var(--lit);
  font: 700 1.15rem/1 var(--mono);
  cursor: pointer;
  display: grid; place-items: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 210, 160, .16),
    0 4px 12px -3px rgba(0, 0, 0, .9),
    0 0 20px -8px var(--glow);
  transition: transform .09s, color .15s, box-shadow .2s;
  -webkit-tap-highlight-color: transparent;
}
.wheel__center:hover, .dpad__center:hover { color: var(--hot); }
.wheel__center:active, .dpad__center:active,
.wheel__center.is-hit, .dpad__center.is-hit {
  transform: translate(-50%, -50%) scale(.93);
  color: var(--hot);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.8), 0 0 26px -6px var(--lit);
}

/* d-pad: a cross, not a wheel */
.dpad {
  border-radius: 1.1rem;
  background: radial-gradient(circle at 50% 22%, #2e2118, #180f0c 65%, #0d0806);
  box-shadow:
    inset 0 2px 0 rgba(255, 210, 160, .1),
    inset 0 -3px 6px rgba(0, 0, 0, .75),
    0 5px 14px -4px rgba(0, 0, 0, .9);
}
.dpad__btn {
  width: 2.8rem; height: 2.8rem;
  background: linear-gradient(180deg, #2a1e17, #150e0b);
  box-shadow: inset 0 1px 0 rgba(255,210,160,.12), 0 2px 5px rgba(0,0,0,.7);
  font-size: .8rem;
}
.dpad__btn--up    { top: .3rem;    left: 50%; transform: translateX(-50%); border-radius: .55rem .55rem .2rem .2rem; }
.dpad__btn--down  { bottom: .3rem; left: 50%; transform: translateX(-50%); border-radius: .2rem .2rem .55rem .55rem; }
.dpad__btn--left  { left: .3rem;   top: 50%;  transform: translateY(-50%); border-radius: .55rem .2rem .2rem .55rem; }
.dpad__btn--right { right: .3rem;  top: 50%;  transform: translateY(-50%); border-radius: .2rem .55rem .55rem .2rem; }
.dpad__btn--up:active,    .dpad__btn--up.is-hit    { transform: translateX(-50%) scale(.9); }
.dpad__btn--down:active,  .dpad__btn--down.is-hit  { transform: translateX(-50%) scale(.9); }
.dpad__btn--left:active,  .dpad__btn--left.is-hit  { transform: translateY(-50%) scale(.9); }
.dpad__btn--right:active, .dpad__btn--right.is-hit { transform: translateY(-50%) scale(.9); }

.dpad__center { width: 3.1rem; height: 3.1rem; font-size: .8rem; }

/* ── POD FOOT ── */

.pod__foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 .5rem .8rem;
}
.pod__brand {
  margin: 0;
  font-size: .72rem; font-weight: 700; letter-spacing: .3em;
  color: var(--fainter);
}
.mute {
  border: 0; background: none; padding: .4rem .3rem;
  color: var(--fainter); font: 700 .55rem/1 var(--mono);
  letter-spacing: .16em;
  cursor: pointer; border-radius: .3rem;
  min-height: 2rem;
}
.mute[aria-pressed="true"] { color: var(--lit); text-shadow: 0 0 8px var(--glow); }

.pod__hint {
  margin: .9rem 0 0;
  text-align: center;
  font-size: .58rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--faint);
}

/* ═══ LIBRARY ═══ */

.library { min-width: 0; }

.library__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--edge);
  margin-bottom: .3rem;
}
.library__head h2 {
  margin: 0;
  font-size: 1rem; font-weight: 800; letter-spacing: .26em;
  color: var(--hot);
  text-shadow: 0 0 14px var(--glow);
}
.library__head p {
  margin: 0;
  font-size: .6rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--dim);
}

.rack { list-style: none; margin: 0; padding: 0; }

.rack__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: .4rem;
  border-bottom: 1px solid rgba(255, 186, 120, .07);
  transition: background .16s, box-shadow .16s;
}
.rack__row:hover { background: color-mix(in srgb, var(--lit) 7%, transparent); }
.rack__row.is-current {
  background: color-mix(in srgb, var(--lit) 11%, transparent);
  box-shadow: inset 3px 0 0 var(--lit);
}

/* the whole left side is one button: number, art and text */
.rack__hit {
  display: grid;
  grid-template-columns: 1.6rem 2.6rem minmax(0, 1fr);
  align-items: center; gap: .7rem;
  min-width: 0;
  padding: .65rem .35rem .65rem .5rem;
  border: 0; background: none;
  color: inherit; font: inherit; text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.rack__n {
  font-size: .62rem; font-variant-numeric: tabular-nums;
  color: var(--dim);
  text-align: right;
}
.rack__row.is-current .rack__n { color: var(--hot); }

.rack__art {
  width: 2.6rem; height: 2.6rem;
  border-radius: .25rem;
  background: rgba(0, 0, 0, .5);
  box-shadow: inset 0 0 0 1px rgba(255, 186, 120, .13);
  overflow: hidden;
  display: grid; place-items: center;
  color: var(--fainter); font-size: .8rem;
}
.rack__art img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rack__t { min-width: 0; display: grid; }
.rack__title {
  font-size: .84rem; font-weight: 600; line-height: 1.3;
  color: var(--hot);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rack__sub {
  margin-top: .1rem;
  font-size: .58rem; letter-spacing: .12em; text-transform: uppercase;
  line-height: 1.4;
  color: var(--dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.rack__end {
  display: flex; align-items: center; gap: .5rem;
  padding-right: .4rem;
  font-size: .6rem; color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.rack__dur { flex: 0 0 auto; }
.rack__dl {
  color: var(--dim);
  text-decoration: none;
  padding: .4rem .5rem;
  border: 1px solid rgba(255, 186, 120, .18);
  border-radius: .3rem;
  font-size: .55rem; letter-spacing: .14em;
  transition: color .15s, border-color .15s, background .15s;
}
.rack__dl:hover {
  color: var(--void); background: var(--lit); border-color: var(--lit);
}

/* the equalizer that marks the playing row */
.rack__eq { display: none; gap: 2px; align-items: flex-end; height: .85rem; }
.rack__row.is-current .rack__eq { display: flex; }
.rack__eq i {
  width: 2px; background: var(--lit); border-radius: 1px;
  height: 45%;
  box-shadow: 0 0 5px var(--glow);
}
@media (prefers-reduced-motion: no-preference) {
  .rack__row.is-current.is-playing .rack__eq i { animation: eq .9s ease-in-out infinite; }
  .rack__eq i:nth-child(2) { animation-delay: .15s; }
  .rack__eq i:nth-child(3) { animation-delay: .3s; }
  @keyframes eq { 0%,100% { height: 25%; } 50% { height: 100%; } }
}

.rack__empty {
  padding: 2.6rem 1rem;
  text-align: center;
  font-size: .74rem; line-height: 1.85;
  color: var(--dim);
}
.rack__empty-big {
  font-size: .95rem; font-weight: 800; letter-spacing: .2em;
  color: var(--lit);
  margin: 0 0 .8rem;
}
.rack__empty a { color: var(--hot); }

/* library recedes in game mode — the game is the point now */
html[data-mode="game"] .library {
  opacity: .3;
  filter: saturate(.4);
  transition: opacity .5s, filter .5s;
}

/* ═══ FOOT ═══ */

.cabinet__foot {
  margin-top: 3.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--edge);
  text-align: center;
  font-size: .58rem; letter-spacing: .13em;
  color: var(--fainter);
}
.cabinet__foot p { margin: 0; }

/* ═══ MINIBAR (mobile, after the pod scrolls away) ═══ */

.minibar {
  position: fixed;
  left: .6rem; right: .6rem;
  bottom: max(.6rem, env(safe-area-inset-bottom));
  z-index: 20;
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .7rem;
  border: 1px solid var(--edge);
  border-radius: .9rem;
  background: color-mix(in srgb, var(--plastic-b) 94%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 34px -10px rgba(0, 0, 0, .95), 0 0 40px -22px var(--glow);
  transform: translateY(140%);
  transition: transform .32s cubic-bezier(.3, 1.3, .5, 1);
}
.minibar.is-up { transform: translateY(0); }
.minibar[hidden] { display: none; }

.minibar__play, .minibar__up {
  flex: 0 0 auto;
  width: 2.3rem; height: 2.3rem;
  border: 1px solid rgba(255, 186, 120, .16);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #2b1f18, #130d0a);
  color: var(--lit);
  font: 700 .8rem/1 var(--mono);
  cursor: pointer;
  display: grid; place-items: center;
}
.minibar__meta { min-width: 0; flex: 1; }
.minibar__meta p {
  margin: 0 0 .3rem;
  font-size: .7rem; font-weight: 600;
  color: var(--hot);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.minibar__prog { height: 2px; background: rgba(0, 0, 0, .6); border-radius: 2px; }
.minibar__prog div {
  height: 100%; width: 0;
  background: var(--lit); box-shadow: 0 0 6px var(--lit);
  border-radius: 2px;
}

@media (min-width: 56rem) { .minibar { display: none !important; } }

/* ═══ GLOBAL CRT ═══ */

.crt-overlay {
  position: fixed; inset: 0; z-index: 50;
  pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
    radial-gradient(125% 105% at 50% 50%, transparent 58%, rgba(0,0,0,.5));
  mix-blend-mode: multiply;
  opacity: .55;
}
@media (prefers-reduced-motion: reduce) { .crt-overlay { opacity: .28; } }