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

:root {
  --deck-h: 138px;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

#gif-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 0;
}

#overlay-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  pointer-events: none;
  z-index: 3;
}

#fx-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  pointer-events: none;
  z-index: 4;
}

#hud-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  pointer-events: none;
  z-index: 5;
}

#block-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  z-index: 1;
}

#ident-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  background: #0b0b0a;
  pointer-events: none;
  z-index: 6;
}

#ident-canvas.on {
  display: block;
}

/* Startup thumbnail prewarm cycles every visual; keep them off-screen so the
   user doesn't see them flash by. Rendering still happens (opacity only). */
body.prewarming canvas.p5Canvas,
body.prewarming #gif-bg,
body.prewarming #overlay-canvas,
body.prewarming #block-canvas {
  opacity: 0 !important;
}

/* ---- Deck: retractable toolbar ---- */
#deck {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 36px;
  background: linear-gradient(#e9e6df, #d8d4cb);
  font-family: "IBM Plex Mono", "Courier New", monospace;
  letter-spacing: 0.04em;
  color: #1a1a1a;
  z-index: 10;
  transition: height 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
  overflow: hidden;
  display: flex;
  align-items: center;
}

#deck.expanded {
  height: var(--deck-h);
  background: linear-gradient(#e9e6df, #d8d4cb);
  border-bottom: 1px solid #b9b4a8;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
  color: #1a1a1a;
}

#deck.ejected {
  height: 100vh;
  background: linear-gradient(#e9e6df, #d8d4cb);
  border-bottom: 1px solid #b9b4a8;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
  color: #1a1a1a;
  transition: height 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

#deck.ejected.closing {
  transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.deck-hit-zone {
  position: fixed;
  top: 36px;
  left: 0;
  right: 0;
  height: 24px;
  z-index: 5;
}

/* ---- Deck logo (left, always visible) ---- */
.deck-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  height: 36px;
  align-self: flex-start;
  flex-shrink: 0;
  cursor: default;
}

.speaker {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: transparent;
  background-image: radial-gradient(circle at center, rgba(255,255,255,0.6) 0 1.2px, transparent 1.5px);
  background-size: 7px 7px;
  background-position: center;
  opacity: 0.55;
  transition: opacity 0.3s ease, transform 0.3s ease, width 0.3s ease, height 0.3s ease, margin-top 0.3s ease;
}

.deck-logo:hover .speaker {
  opacity: 1;
  transform: scale(1.1);
}

#deck.expanded .deck-logo,
#deck.ejected .deck-logo {
  flex: 0 0 116px;
  width: 116px;
  padding: 0;
  align-items: center;
  justify-content: center;
}

#deck.expanded .deck-logo { height: 100%; }
#deck.ejected .deck-logo { height: var(--deck-h); }

#deck.expanded .speaker,
#deck.ejected .speaker {
  width: 80px;
  height: 80px;
  align-self: center;
  margin-top: 0;
  background-image: radial-gradient(circle at center, #2a2a2a 0 1.3px, transparent 1.7px);
  background-size: 7px 7px;
  opacity: 1;
}

#deck.expanded .logo-text,
#deck.expanded .logo-cursor,
#deck.ejected .logo-text,
#deck.ejected .logo-cursor { display: none; }

.logo-text {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: inherit;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.logo-text.has-text {
  opacity: 1;
}

.logo-cursor {
  font-size: 15px;
  color: #ff5a1f;
  display: none;
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ---- Mini track info (visible when retracted) ---- */
.deck-mini {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 18px;
  height: 100%;
  min-width: 0;
  transition: opacity 0.25s ease;
}

#deck.expanded .deck-mini {
  opacity: 0;
  pointer-events: none;
  flex: none;
  width: 0;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

.mini-track {
  font-family: "Plus Jakarta Sans", "IBM Plex Mono", "Courier New", monospace;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #817a69;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
}

/* ---- Expanded content (fades in on expand) ----
   A flow item in the deck's own row, so it starts after the speaker column and
   cannot overlap it. The mini bar is out of the flow, so opening the deck never
   shoves the controls sideways. */
.deck-content {
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: safe center;
  gap: 28px;
  padding: 0 16px;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

#deck.expanded .deck-content,
#deck.ejected .deck-content {
  opacity: 1;
}

#deck.ejected .deck-content {
  height: var(--deck-h);
  align-self: flex-start;
}

/* Stagger the three control clusters (transport, npd-stack, display) on expand */
#deck.expanded .deck-content > *,
#deck.ejected .deck-content > * {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: auto;
}

#deck.expanded .deck-content > *,
#deck.ejected .deck-content > * {
  opacity: 1;
  transform: translateY(0);
}

#deck.expanded .deck-content > .deck-transport { transition-delay: 0.02s; }
#deck.expanded .deck-content > .npd-stack     { transition-delay: 0.06s; }
#deck.expanded .deck-content > .deck-display   { transition-delay: 0.1s; }

#deck:not(.expanded):not(.ejected) .deck-content > * {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  transition-delay: 0s !important;
}

.deck-transport {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  align-self: center;
}

/* Waveform now lives inside the LED screen (see .npd-wave). */

/* ---- Display controls (knob + gallery + np-display) ---- */
.deck-display {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 8px;
}

.ctrl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b7b4ab;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .3);
}

.led.on {
  background: #ff5a1f;
  box-shadow: 0 0 5px rgba(255, 90, 31, .8), inset 0 0 1px rgba(255, 255, 255, .6);
}

/* Flat matte push buttons */
.abtn {
  --c: #d9d4ca;
  --txt: #2a2a2a;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  color: var(--txt);
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 92%, #fff), var(--c));
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .18),
    inset 0 1px 1px rgba(255, 255, 255, .55),
    inset 0 -2px 3px rgba(0, 0, 0, .16),
    0 1px 2px rgba(0, 0, 0, .2);
  transition: transform .05s ease, box-shadow .05s ease;
}

.abtn:active {
  transform: translateY(1px);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .18),
    inset 0 2px 4px rgba(0, 0, 0, .3);
}

/* Light-grey buttons with a single orange accent (Rams) */
#btn-play    { --c: #ec6a1f; --txt: #fff; }
#btn-play.stop { --c: #3b3f44; }
#btn-gallery { --c: #8d9aa6; --txt: #fff; }
#btn-request { font-size: 17px; }
.abtn.vote { font-size: 20px; }
.abtn.vote:disabled { cursor: default; color: rgba(42, 42, 42, .3); }

/* ---- Request card: a dark card over the artwork, fades like a TV ---- */
/* ---- Request line: a full-screen page in the deck's colours (Rams, TE) ---- */
.request-card {
  position: fixed;
  inset: 0;
  /* Above the artwork labels (100) too. */
  z-index: 101;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 28px clamp(16px, 6vw, 96px) clamp(24px, 6vh, 64px);
  background: #e9e6df;
  color: #1b1b1b;
  font-family: "Plus Jakarta Sans", "IBM Plex Mono", "Courier New", sans-serif;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.request-card.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease;
}

.rq-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rq-head,
.rq-num,
.rq-lab,
.rq-go-label {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a857b;
}

.rq-close {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  line-height: 1;
  color: #2a2a2a;
  background: #d9d4ca;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), inset 0 -2px 0 rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: background 0.2s ease;
}

.rq-close:hover { background: #cfc9bd; }

.rq-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
}

.rq-lede {
  margin: 0;
  max-width: 16em;
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.rq-form { display: flex; flex-direction: column; }

/* Sent: the request, large, where the form was. */
.rq-sent { padding: 32px 0 24px; border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
.rq-sent-title, .rq-sent-artist {
  margin: 0; font-size: clamp(22px, 3.2vw, 40px); line-height: 1.2; font-weight: 500; letter-spacing: -0.01em; color: #1b1b1b;
}
.rq-sent-artist { color: #8a857b; font-weight: 400; }

/* 01  ARTIST  [ big input ] on one hairline row. */
.rq-row {
  display: grid;
  grid-template-columns: 32px 72px 1fr;
  align-items: end;
  gap: 0 12px;
  padding: 18px 0 12px;
  border-bottom: 1px solid #cfc9bd;
  transition: border-color 0.2s ease;
}

.rq-row:focus-within { border-bottom-color: #ec6a1f; }

.rq-input {
  min-width: 0;
  font: inherit;
  font-size: clamp(22px, 3.2vw, 40px);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #1b1b1b;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  outline: none;
}

.rq-row .rq-num,
.rq-row .rq-lab { padding-bottom: 0.6em; }

.rq-input::placeholder { color: #bdb7ab; font-weight: 400; }

.rq-foot {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 40px;
}

.rq-mark {
  background: #ec6a1f;
  color: #fff;
  padding: 1px 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.rq-msg {
  flex: 1;
  margin: 0;
  padding-right: 8%;
  font-size: 16px;
  line-height: 1.5;
  color: #3a3a3a;
}

/* The day's three requests as three small square lights. */
.rq-leds { display: flex; gap: 6px; }

.rq-leds i {
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: #c9c4b8;
}

.rq-leds i.on {
  background: #ec6a1f;
  box-shadow: 0 0 5px rgba(236, 106, 31, 0.55);
}

/* Square key, Teenage Engineering style: the name printed top-left, the
   arrow bottom-right. */
.rq-go {
  position: relative;
  width: 64px;
  height: 64px;
  padding: 0;
  border: none;
  border-radius: 4px;
  color: #fff;
  background: #ec6a1f;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), inset 0 -3px 0 rgba(0, 0, 0, 0.16);
  cursor: pointer;
  transition: background 0.2s ease;
}

.rq-go:hover { background: #d45a14; }
.rq-go:disabled { background: #d9d4ca; color: #9a948a; cursor: default; }

.rq-go .rq-go-label {
  position: absolute;
  top: 8px;
  left: 9px;
  color: inherit;
  font-size: 10px;
}

.rq-go-arrow {
  position: absolute;
  right: 9px;
  bottom: 9px;
  font-size: 16px;
  line-height: 1;
}

.rq-note {
  margin: 0;
  position: absolute;
  left: clamp(16px, 6vw, 96px);
  bottom: 28px;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #8a857b;
}

@media (max-width: 600px) {
  .rq-row { grid-template-columns: 24px 1fr; }
  .rq-note { position: static; margin-top: 32px; }
  .rq-lab { display: none; }
  .rq-foot { flex-wrap: wrap; gap: 20px; }
  .rq-msg { flex-basis: 100%; }
}

/* Info card: the same black glass as the menubar display. */
#info-card {
  position: fixed;
  z-index: 9;
  box-sizing: border-box;
  background: linear-gradient(160deg, #1c1c1c 0%, #101010 45%, #060606 100%);
  border-radius: 6px;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 12px 32px rgba(0, 0, 0, 0.45);
  color: #fff;
  font-family: "Plus Jakarta Sans", "IBM Plex Mono", "Courier New", monospace;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

#info-card.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease;
}

/* ---- Info: the "i" in the bottom-left corner ---- */
#info-btn {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 9;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 50%;
  font: 600 12px "Plus Jakarta Sans", "IBM Plex Mono", sans-serif;
  color: #2a2a2a;
  background: linear-gradient(160deg, #f1eee8, #d9d4ca);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.18),
    inset 0 1px 1px rgba(255, 255, 255, 0.55),
    0 1px 3px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}

#info-btn:hover,
#info-btn.on { color: #fff; background: #ec6a1f; }

#info-card {
  left: 16px;
  bottom: 52px;
  width: min(320px, calc(100vw - 32px));
  padding: 18px 20px;
}

#info-card p { margin: 0; }

#info-card .info-lead {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: #ec6a1f;
}

#info-card .info-dim {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}

/* ---- Display controls (knob + gallery) ---- */
.display-ctrl {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.dc-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 12px;
  background: linear-gradient(#e2ded4, #cdc8bd);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .7),
    inset 0 -1px 2px rgba(0, 0, 0, .18),
    0 1px 2px rgba(0, 0, 0, .2);
}

.dc-label {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: .35;
  color: #1a1a1a;
}

/* ---- Rams arcade push button ---- */
.rams-pushbtn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  background: linear-gradient(160deg, #cfcbc0, #b8b3a8);
  box-shadow:
    0 0 0 3px rgba(0,0,0,.08),
    0 0 0 5px #c8c3b8,
    0 0 0 6px rgba(0,0,0,.1),
    inset 0 1px 3px rgba(255,255,255,.5),
    0 2px 6px rgba(0,0,0,.25);
  position: relative;
  transition: box-shadow .1s ease, transform .08s ease;
  touch-action: none;
}

.rams-pushbtn:active,
.rams-pushbtn.active {
  box-shadow:
    0 0 0 3px rgba(0,0,0,.12),
    0 0 0 5px #c0baae,
    0 0 0 6px rgba(0,0,0,.14),
    inset 0 2px 5px rgba(0,0,0,.35),
    0 1px 2px rgba(0,0,0,.15);
  transform: translateY(2px);
}

.pushbtn-face {
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #c8c3b8, #d8d3c8 60%, #e2ded5 100%);
  transition: background .15s ease;
}

.rams-pushbtn.active .pushbtn-face {
  background: radial-gradient(circle at 50% 55%, #b0a898, #c8c3b8 60%, #d0cbc2 100%);
}

.pushbtn-dot {
  display: none;
}

/* ---- Rams rotary knob ---- */
.rams-knob {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  cursor: ns-resize;
  position: relative;
  background: linear-gradient(145deg, #d4d0c6, #c2bdb2);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.15),
    inset 0 1px 2px rgba(255,255,255,.6),
    inset 0 -2px 3px rgba(0,0,0,.2),
    0 1px 2px rgba(0,0,0,.15);
  transition: box-shadow .1s ease;
  touch-action: none;
}

.rams-knob.dragging {
  box-shadow:
    0 0 0 1px rgba(0,0,0,.15),
    inset 0 2px 4px rgba(0,0,0,.25);
}

.knob-body {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: linear-gradient(160deg, #e0dcd3, #c8c3b8);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.4);
}

.knob-tick {
  position: absolute;
  top: 4px;
  left: 50%;
  width: 2.5px;
  height: 11px;
  margin-left: -1.25px;
  border-radius: 1px;
  background: #1a1a1a;
  transform-origin: 50% 14px;
  transform: rotate(-60deg);
  transition: transform .03s ease;
}

.knob-label {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: 7px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #000;
  text-align: center;
  white-space: nowrap;
}

/* Slot knob: shorter tick indicator */
.slot-knob .knob-tick {
  height: 7px;
  transform-origin: 50% 12px;
}

/* Tick marks around the slot knob (10 positions) */
.slot-ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.slot-tick {
  position: absolute;
  top: 3px;
  left: 50%;
  width: 1px;
  height: 3px;
  margin-left: -0.5px;
  background: rgba(0,0,0,.3);
  transform-origin: 50% 20px;
}

/* Visual divider between main knobs and slot section */
.ctrl-divider {
  width: 1px;
  height: 36px;
  background: rgba(0, 0, 0, .1);
  flex-shrink: 0;
}

/* ---- Synth LED now-playing display ---- */
.npd-stack {
  position: relative;
  /* Grows into spare width so the knob bank sits as close to the right edge as the speaker does to the left. */
  flex: 1 1 900px;
  max-width: 900px;
  min-width: 0;
  align-self: stretch;
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dial-readout {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  text-align: center;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ff5a1f;
  height: 11px;
  line-height: 11px;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.dial-readout.show {
  opacity: 0.85;
}

#np-display {
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  height: 76px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 22px;
  padding: 8px 18px;
  background: linear-gradient(160deg, #1c1c1c 0%, #101010 45%, #060606 100%);
  border-radius: 6px;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.06),
    inset 0 2px 10px rgba(0,0,0,0.7),
    0 1px 0 rgba(255,255,255,0.08);
  overflow: hidden;
}

.npd-group {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.npd-navpair {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.npd-lines {
  width: 210px;
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}

.npd-wave {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  display: block;
  background: transparent;
}

/* Prev/next song controls inside the LED */
.npd-songnav {
  flex: 0 0 auto;
  display: flex;
  gap: 5px;
}

.npd-nav {
  width: 26px;
  height: 19px;
  border: none;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease, color 0.12s ease;
}

.npd-nav:hover {
  background: rgba(255, 90, 31, 0.25);
  color: #ff5a1f;
}

.npd-nav:active {
  background: rgba(255, 90, 31, 0.45);
  color: #fff;
}

.npd-line {
  position: relative;
  padding-left: 52px;
  font-family: "Plus Jakarta Sans", "IBM Plex Mono", "Courier New", monospace;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Small white uppercase field labels in a left gutter, vertically centered
   on each line regardless of the value's font size. */
.npd-line::before {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  text-align: right;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  pointer-events: none;
}

.npd-show::before    { content: "Show"; }
.npd-track::before   { content: "Song"; }
.npd-artist::before  { content: "Artist"; }
.npd-artwork::before { content: "Art"; }

.npd-show {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}

.npd-track {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #c94814;
}

.npd-artist {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: #fff;
}

.npd-artwork {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5);
}

#visual-notification {
  position: fixed;
  inset: 0;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

#visual-notification.visible {
  opacity: 1;
}

#visual-notification svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#visual-notification line {
  stroke: rgba(255, 255, 255, 0.8);
  stroke-width: 1;
}

#visual-notification .vn-halo {
  stroke: rgba(0, 0, 0, 0.6);
  stroke-width: 3;
}

#visual-notification circle {
  fill: #fff;
  stroke: #000;
}

.vn-label {
  position: absolute;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: 14px;
  color: #fff;
  background: #000;
  padding: 6px 10px;
  white-space: nowrap;
}

/* ---- Gallery Drawer ---- */


.deck-gallery {
  position: absolute;
  top: var(--deck-h);
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px);
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0s 0.3s;
  pointer-events: none;
}

#deck.ejected .deck-gallery {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.35s ease 0.15s, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s, visibility 0s 0s;
}

#deck.ejected.closing .deck-gallery {
  opacity: 0;
  transform: translateY(-16px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.25s ease, visibility 0s 0.25s;
}

.gallery-title {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.35);
}

.gallery-close {
  position: absolute;
  top: 8px;
  right: 20px;
  z-index: 2;
  height: 44px;
  min-width: 44px;
  padding: 0 20px;
  border-radius: 22px;
  border: none;
  background: linear-gradient(#e9e6df, #d8d4cb);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.16),
    inset 0 1px 1px rgba(255, 255, 255, 0.6),
    0 1px 2px rgba(0, 0, 0, 0.14);
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: color 0.15s ease, box-shadow 0.15s ease;
}

.gallery-close:hover {
  color: rgba(0, 0, 0, 0.85);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.28),
    inset 0 1px 1px rgba(255, 255, 255, 0.6),
    0 1px 2px rgba(0, 0, 0, 0.14);
}

/* ---- FX unit in the menubar: four-row display beside the knobs ---- */

.deck-display .ctrl.idle .rams-knob {
  opacity: 0.45;
}

.fx-lcd {
  flex: 0 0 auto;
  width: 168px;
  align-self: stretch;
  padding-left: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.fx-row {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 15px;
  padding: 0 4px;
  border-radius: 2px;
  cursor: pointer;
  font-family: "Plus Jakarta Sans", "IBM Plex Mono", "Courier New", monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.fx-row.on { color: rgba(255, 255, 255, 0.92); }
.fx-row[data-slot="0"], .fx-row[data-slot="1"], .fx-row[data-slot="2"] { touch-action: none; }
.fx-row.dragging { background: rgba(255, 90, 31, 0.18); cursor: grabbing; }
.fx-row.drop { box-shadow: inset 0 1px 0 #ff5a1f, inset 0 -1px 0 #ff5a1f; }
.fx-row.focus { background: rgba(255, 255, 255, 0.08); }
.fx-row.focus .fx-name { color: #ff5a1f; }

.fx-num {
  width: 8px;
  font-size: 8px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
}

.fx-name {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fx-on {
  width: 26px;
  height: 12px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 2px;
  background: none;
  cursor: pointer;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: 7px;
  line-height: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.fx-row.on .fx-on {
  color: #ff5a1f;
  border-color: #ff5a1f;
}

.fx-on:disabled {
  opacity: 0.3;
  cursor: default;
}

/* ---- Artwork wall: square panels, crosses, artworks among black ---- */

.gallery-wall {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.35s ease;
}

#deck.ejected .gallery-wall {
  opacity: 1;
  transition-delay: 0.3s;
}

#deck.ejected.closing .gallery-wall {
  opacity: 0;
  transition-delay: 0s;
  transition-duration: 0.15s;
}

.wall-board {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-auto-rows: var(--ph);
  align-content: start;
}

.wall-panel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: #000 center / cover no-repeat;
}

.wall-panel.art {
  cursor: pointer;
}

/* Orange wash on hover. */
.wall-panel.art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 90, 31, 0.22);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.wall-panel.art:hover::after {
  opacity: 1;
}

.wall-x {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 15px;
  margin: -7px 0 0 -7px;
  mix-blend-mode: difference;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.wall-x::before,
.wall-x::after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.92);
}

.wall-x::before { left: 7px; top: 0; width: 1px; height: 15px; }
.wall-x::after { top: 7px; left: 0; width: 15px; height: 1px; }

.wall-panel.active .wall-x { mix-blend-mode: normal; }
.wall-panel.active .wall-x::before { background: #ff5a1f; width: 2px; }
.wall-panel.active .wall-x::after { background: #ff5a1f; height: 2px; }

.wall-panel.art:hover .wall-x {
  opacity: 0;
}

/* The name takes the cross's place. */
.wall-name {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: max-content;
  max-width: 84%;
  padding: 3px 6px 2px;
  transform: translate(-50%, -50%);
  background: #000;
  color: #ff5a1f;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: 10.5px;
  line-height: 1.35;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.wall-panel.art:hover .wall-name {
  opacity: 1;
}

/* ---- Welcome Splash ---- */
#welcome-splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.8s ease;
}

#welcome-splash.fade-out {
  opacity: 0;
  pointer-events: none;
}



#welcome-ident {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 1;
  pointer-events: none;
  background: #0e0e0d;
}

#welcome-noise {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.7;
  z-index: 1;
}

.welcome-letterbox {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(22px, 6vh, 56px);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-align: center;
  pointer-events: none;
}

#welcome-dir {
  display: none;
}

.welcome-prompt {
  font-family: "IBM Plex Mono", "Plus Jakarta Sans", "Courier New", monospace;
  font-size: clamp(10px, 1.05vw, 13px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 10px 16px;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.25);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

@media (prefers-reduced-motion: reduce) {
  #gif-bg,
  #overlay-canvas,
  #block-canvas {
    display: none;
  }

  body {
    background: #000;
  }
}

/* ---- Listener report: occasional poster of what the browser gives away ---- */
/* Anka/Coder (OFL), a narrow mono, for the listener poster. */
@font-face {
  font-family: "Dogica";
  src: url("fonts/dogica.otf") format("opentype");
}

@font-face {
  font-family: "Anka Coder";
  src: url("fonts/AnkaCoder-r.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Anka Coder";
  src: url("fonts/AnkaCoder-b.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

#listener-report {
  position: fixed;
  inset: 0;
  z-index: 6;
  color: rgba(255, 255, 255, 0.6);
  font-family: "Anka Coder", "IBM Plex Mono", "Courier New", monospace;
  font-weight: 400;
  font-size: var(--fs, 64px);
  line-height: 1.02;
  letter-spacing: 0;
  text-transform: uppercase;
  padding: 4vh 4vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

/* Flashes: on and off with no fade, like a signal cutting in. */
#listener-report.lr-on {
  opacity: 1;
  visibility: visible;
}

#listener-report .lr-row {
  display: flex;
  justify-content: space-between;
  white-space: nowrap;
}

#listener-report .lr-label {
  justify-content: center;
  padding-right: 18%;
}


/* ---- Narrow screens: the menubar gives up the spectrum first, then the
   artwork/show lines, then shrinks its knobs and buttons ---- */
@media (max-width: 1400px) {
  .npd-wave { display: none; }
}

/* Slot saved: a black box in the middle of the screen. */
#saved-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  padding: 14px 22px;
  background: #000;
  color: #fff;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: 14px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#saved-box.show { opacity: 1; }
/* ---- Small screens ---- */

@media (max-width: 1439px) {
  :root { --deck-h: 180px; }

  .deck-content {
    flex-wrap: wrap;
    align-content: center;
    gap: 12px 20px;
    padding: 0 12px;
  }

  #deck.expanded .deck-logo,
  #deck.ejected .deck-logo {
    flex-basis: 92px;
    width: 92px;
  }

  #deck.expanded .speaker,
  #deck.ejected .speaker {
    width: 64px;
    height: 64px;
  }

  .npd-stack {
    order: 0;
    flex: 0 0 100%;
    max-width: none;
  }

  .deck-transport { order: 1; }
  .deck-display { order: 2; }

  #np-display {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
  }

  .npd-lines {
    flex: 0 1 auto;
    width: auto;
  }

  .deck-transport,
  .deck-display {
    flex: 0 0 auto;
    justify-content: center;
    gap: 10px;
    padding-right: 0;
  }

  .gallery-close { right: 16px; }
}

@media (max-width: 767px) {
  :root { --deck-h: min(392px, calc(100vh - 100px)); }

  .deck-content {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: flex-start;
    gap: 8px;
    padding: 10px 12px;
    overflow-y: auto;
  }

  .npd-stack {
    order: 0;
    flex: 0 0 auto;
    width: 100%;
  }

  .deck-transport { order: 1; }
  .deck-display { order: 2; width: 100%; gap: 8px; }
  .ctrl { gap: 6px; }

  #deck.expanded .deck-logo,
  #deck.ejected .deck-logo {
    flex-basis: 0;
    width: 0;
    overflow: hidden;
  }

  #deck.expanded .speaker,
  #deck.ejected .speaker { display: none; }

  #np-display {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    gap: 6px;
    padding: 8px 12px;
  }

  .npd-group { width: 100%; }

  .npd-navpair {
    flex-direction: row;
    gap: 6px;
  }

  .fx-lcd {
    width: 100%;
    align-self: auto;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 6px 0 0;
  }

  .fx-row { height: 24px; }

  .fx-on {
    min-width: 44px;
    height: 22px;
  }

  .deck-mini { padding: 0 12px; }

  .gallery-close { top: 6px; right: 12px; }

  .welcome-prompt {
    font-size: 11px;
    padding: 14px 20px;
  }

  #visual-notification {
    right: 16px;
    bottom: 20px;
    font-size: 12px;
  }

  #listener-report { padding: 4vh 5vw; }
  #listener-report .lr-label {
    justify-content: flex-start;
    padding-right: 0;
  }

  .rq-close {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }

  #info-btn { left: 12px; bottom: 12px; }

  #info-card {
    left: 12px;
    bottom: 64px;
    width: calc(100vw - 24px);
  }
}

/* ---- Touch ---- */

@media (hover: none) {
  .npd-nav {
    position: relative;
    width: 34px;
    height: 30px;
    font-size: 12px;
  }

  .npd-nav::after {
    content: "";
    position: absolute;
    inset: -7px -5px;
  }

  .npd-navpair { gap: 8px; }

  .fx-row { height: 18px; }

  .fx-on {
    min-width: 44px;
    height: 18px;
  }

  .knob-label { font-size: 8px; }
  .npd-line::before { font-size: 9px; }

  #info-btn {
    width: 44px;
    height: 44px;
    font-size: 15px;
  }

  .rq-close {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }

  .mini-dot {
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: 11px;
    line-height: 1;
    color: #817a69;
  }

  .mini-dot::after { content: "▾"; }
}

@media (hover: none) and (max-width: 767px) {
  .npd-nav {
    width: 44px;
    height: 44px;
  }

  .npd-nav::after { inset: 0; }

  .fx-row { height: 24px; }

  .fx-on { height: 22px; }
}

/* ---- Short viewports ---- */

@media (max-height: 560px) and (max-width: 1439px) {
  :root { --deck-h: 180px; }

  .deck-content {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 16px;
    padding: 8px 12px;
  }

  .npd-stack {
    order: 0;
    flex: 0 0 100%;
    max-width: none;
  }

  .deck-transport { order: 1; }
  .deck-display { order: 2; width: auto; }
  .ctrl { gap: 6px; }

  #np-display {
    flex-direction: row;
    height: 76px;
    gap: 14px;
    padding: 6px 12px;
  }

  .npd-group { width: auto; }

  .npd-navpair {
    flex-direction: column;
    gap: 8px;
  }

  .npd-nav {
    width: 34px;
    height: 30px;
  }

  .fx-lcd {
    width: 150px;
    align-self: stretch;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    border-top: none;
    padding: 0 0 0 12px;
  }

  .fx-row { height: 15px; }

  .knob-label { font-size: 7px; }
}