/* =============================================================================
   GAMBLING CULT // SLUS-77777 · UI SHELL v3 · styles.css (owner: SHELL)
   The discs of a Memphis tape collective (RUBY DREDD × LELXX): PS1 system menus, Pen & Pixel gold,
   photocopied flyers, rubber stamps, a DOOM status bar and memory cards.

   COLOUR ROLES (one job per colour)
     blood     #B81D13 #E62E22   audio + danger: play/pause, SOLD, errors, DOOM numerals
     gold      #C99A2E #F2C14E   money: prices, LEASE, memory card 2, totals, bundle
     phosphor  #68C964           system: OSD, LCDs, option values, AVAILABLE, save bar
     bone-inv  #D8CFB8 on ink    selection: active tab / pill / row, focused tier
     purple    #7B2CBF #B565FF   screwed (tape speed < 0.9) and nothing else
   TYPE RAMP
     UnifrakturCook 700   logo only
     Jacquard 24          24 | 48 px      titles, area banner, flyer
     Press Start 2P       8 | 16 | 24 px  micro labels (<= 12 chars), DOOM numerals, PRESS START
     VT323                18 | 22 | 28 | 40 px  buttons, tabs, lists, meta, OSD, LCD
     IBM Plex Mono        12 | 13 px      fine print, the slip (15 px: Silent Hill HUD box)
     Cinzel 600           Dark Souls HUD band only
   RULES
     Hard shadows only (1-3 px offsets, no blur). The one exception: .osd phosphor bloom <= 6 px.
     2D motion uses steps(). No scanlines over UI. No translate(-50%) on text (blurs pixel fonts).
     Runtime textures (--bayer --win --toner --toner-mask --stone --glove) come from ui-textures.js;
     every use has a solid fallback.
   ============================================================================= */

/* ---------- 1. TOKENS ---------- */
:root {
  --void: #09080A;
  --ink: #000;
  --bone: #D8CFB8;
  --bone-mid: #938976;
  --bone-dark: #5E5649;
  --paper: #E4DCC5;
  --paper-ink: #17120E;
  --paper-mid: #5C5246;
  --text-hi: #EFE7D2;
  --text: #D8CFB8;
  --text-mid: #A89E88;
  --text-low: #6E6556;
  --blood: #B81D13;
  --blood-hi: #E62E22;
  --blood-dark: #4E0A06;
  --gold: #C99A2E;
  --gold-hi: #F2C14E;
  --gold-dark: #7A5414;
  --gold-ink: #5A3A06;
  --phos: #68C964;
  --phos-dark: #2F5E2C;
  --phos-ink: #07120A;
  --purple: #7B2CBF;
  --purple-hi: #B565FF;
  --purple-dark: #3B1A5A;
  --stone-0: #0E0C0E;
  --stone-1: #1C181B;
  --stone-2: #2A242C;
  --stone-3: #3A3238;
  --stone-4: #4D434A;
  --panel: #120E15;
  --panel-2: #1A151E;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --shadow-hard: 3px 3px 0 #000;

  --f-black: 'UnifrakturCook', 'Jacquard 24', serif;
  --f-title: 'Jacquard 24', 'UnifrakturCook', serif;
  --f-pixel: 'Press Start 2P', 'Courier New', monospace;
  --f-vt: 'VT323', 'Courier New', monospace;
  --f-mono: 'IBM Plex Mono', Consolas, monospace;
  --f-ds: 'Cinzel', 'Times New Roman', serif;

  --hdr-h: 56px;
  --bar-h: 88px;
  --rack-w: clamp(460px, 34vw, 600px);
  --panel-w: clamp(260px, 34%, 320px);
  --sheet-peek: 92px;

  /* monochrome face-button discs: bone symbol, black disc, 1 px bone ring (9x9 pixel art) */
  --g-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' shape-rendering='crispEdges'%3E%3Cpath fill='%2309080A' d='M2 1h5v1h-5zM1 2h7v5h-7zM2 7h5v1h-5z'/%3E%3Cpath fill='%23D8CFB8' d='M2 0h5v1h-5zM1 1h1v1h-1zM7 1h1v1h-1zM0 2h1v5h-1zM8 2h1v5h-1zM1 7h1v1h-1zM7 7h1v1h-1zM2 8h5v1h-5zM2 2h1v1h-1zM6 2h1v1h-1zM3 3h1v1h-1zM5 3h1v1h-1zM4 4h1v1h-1zM3 5h1v1h-1zM5 5h1v1h-1zM2 6h1v1h-1zM6 6h1v1h-1z'/%3E%3C/svg%3E");
  --g-o: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' shape-rendering='crispEdges'%3E%3Cpath fill='%2309080A' d='M2 1h5v1h-5zM1 2h7v5h-7zM2 7h5v1h-5z'/%3E%3Cpath fill='%23D8CFB8' d='M2 0h5v1h-5zM1 1h1v1h-1zM7 1h1v1h-1zM0 2h1v5h-1zM8 2h1v5h-1zM1 7h1v1h-1zM7 7h1v1h-1zM2 8h5v1h-5zM3 2h3v1h-3zM2 3h1v3h-1zM6 3h1v3h-1zM3 6h3v1h-3z'/%3E%3C/svg%3E");
  --g-t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' shape-rendering='crispEdges'%3E%3Cpath fill='%2309080A' d='M2 1h5v1h-5zM1 2h7v5h-7zM2 7h5v1h-5z'/%3E%3Cpath fill='%23D8CFB8' d='M2 0h5v1h-5zM1 1h1v1h-1zM7 1h1v1h-1zM0 2h1v5h-1zM8 2h1v5h-1zM1 7h1v1h-1zM7 7h1v1h-1zM2 8h5v1h-5zM4 2h1v1h-1zM3 3h1v2h-1zM5 3h1v2h-1zM2 5h1v1h-1zM6 5h1v1h-1zM2 6h5v1h-5z'/%3E%3C/svg%3E");
  --g-s: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' shape-rendering='crispEdges'%3E%3Cpath fill='%2309080A' d='M2 1h5v1h-5zM1 2h7v5h-7zM2 7h5v1h-5z'/%3E%3Cpath fill='%23D8CFB8' d='M2 0h5v1h-5zM1 1h1v1h-1zM7 1h1v1h-1zM0 2h1v5h-1zM8 2h1v5h-1zM1 7h1v1h-1zM7 7h1v1h-1zM2 8h5v1h-5zM2 2h5v1h-5zM2 3h1v3h-1zM6 3h1v3h-1zM2 6h5v1h-5z'/%3E%3C/svg%3E");
  /* same discs inverted (black symbol + ring on a bone disc) for bone-inverted surfaces */
  --g-x-inv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' shape-rendering='crispEdges'%3E%3Cpath fill='%23D8CFB8' d='M2 1h5v1h-5zM1 2h7v5h-7zM2 7h5v1h-5z'/%3E%3Cpath fill='%2309080A' d='M2 0h5v1h-5zM1 1h1v1h-1zM7 1h1v1h-1zM0 2h1v5h-1zM8 2h1v5h-1zM1 7h1v1h-1zM7 7h1v1h-1zM2 8h5v1h-5zM2 2h1v1h-1zM6 2h1v1h-1zM3 3h1v1h-1zM5 3h1v1h-1zM4 4h1v1h-1zM3 5h1v1h-1zM5 5h1v1h-1zM2 6h1v1h-1zM6 6h1v1h-1z'/%3E%3C/svg%3E");
  --g-s-inv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' shape-rendering='crispEdges'%3E%3Cpath fill='%23D8CFB8' d='M2 1h5v1h-5zM1 2h7v5h-7zM2 7h5v1h-5z'/%3E%3Cpath fill='%2309080A' d='M2 0h5v1h-5zM1 1h1v1h-1zM7 1h1v1h-1zM0 2h1v5h-1zM8 2h1v5h-1zM1 7h1v1h-1zM7 7h1v1h-1zM2 8h5v1h-5zM2 2h5v1h-5zM2 3h1v3h-1zM6 3h1v3h-1zM2 6h5v1h-5z'/%3E%3C/svg%3E");
  /* d-pad arrow, skull keys, select chevron */
  --arrow-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath fill='%23D8CFB8' d='M3 1h1v1h-1zM2 2h3v1h-3zM1 3h5v1h-5zM0 4h7v1h-7z'/%3E%3C/svg%3E");
  --key-lit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%23F2C14E' d='M1 0h5v1h-5zM0 1h7v1h-7zM0 2h1v1h-1zM3 2h1v1h-1zM6 2h1v1h-1zM0 3h7v1h-7zM1 4h1v1h-1zM3 4h1v1h-1zM5 4h1v1h-1zM3 5h1v1h-1zM3 6h3v1h-3zM3 7h2v1h-2z'/%3E%3C/svg%3E");
  --key-dim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%23463C42' d='M1 0h5v1h-5zM0 1h7v1h-7zM0 2h1v1h-1zM3 2h1v1h-1zM6 2h1v1h-1zM0 3h7v1h-7zM1 4h1v1h-1zM3 4h1v1h-1zM5 4h1v1h-1zM3 5h1v1h-1zM3 6h3v1h-3zM3 7h2v1h-2z'/%3E%3C/svg%3E");
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath fill='%23D8CFB8' d='M0 2h7v1h-7zM1 3h5v1h-5zM2 4h3v1h-3zM3 5h1v1h-1z'/%3E%3C/svg%3E");
  --memcard-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%23F2C14E' d='M0 0h6v1h-6zM0 1h7v1h-7zM0 2h1v2h-1zM6 2h1v2h-1zM0 4h7v2h-7zM0 6h1v1h-1zM2 6h1v1h-1zM4 6h1v1h-1zM6 6h1v1h-1zM0 7h7v1h-7z'/%3E%3C/svg%3E");
}

/* ---------- 2. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  height: 100%;
  background: var(--void);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: grid;
  grid-template-rows: var(--hdr-h) minmax(0, 1fr) var(--bar-h);
  grid-template-columns: minmax(0, 1fr);
  background: var(--void);
  color: var(--text);
  font-family: var(--f-vt);
  font-size: 18px;
  line-height: 1.15;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
}

h1, h2, h3, h4, p, dl, dd, figure, pre { margin: 0; }
h1, h2, h3, h4 { font-weight: normal; }
img, canvas, svg { display: block; }
a { color: inherit; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}
button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* text is selectable (names, keys, prices can be copied); controls are not */
button, summary, [role="button"], .ps1-btn, .shoulder, .world-tab, .rack-tab,
.filter-pill, .tier-row, .mc-block-item .mc-idx, .doom-cell-label, .stamp, .flyer,
#ps1-webgl-canvas, #waveform-scrubber, .hint-bar, .vp-hud .osd {
  -webkit-user-select: none;
  user-select: none;
}

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--bone);
  outline-offset: 2px;
}

::selection { background: var(--bone); color: var(--void); }

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* pixel icons from the sprite: 8x8 art at 2x */
.i {
  width: 16px;
  height: 16px;
  flex: none;
  fill: currentColor;
  shape-rendering: crispEdges;
}

/* scrollbars: square, stone */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--bone-dark) var(--stone-0);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--stone-0); }
::-webkit-scrollbar-thumb { background: var(--bone-dark); border: 2px solid var(--stone-0); }
::-webkit-scrollbar-thumb:hover { background: var(--bone-mid); }
::-webkit-scrollbar-corner { background: var(--stone-0); }

/* ---------- 3. PRIMITIVES ---------- */

/* .win — PS1 system window: dithered Gouraud purple -> black, bone frame, black rings, hard shadow */
.win {
  color: var(--text);
  background-color: #0B080D;
  background-image: var(--win, none);
  background-repeat: repeat-x;
  background-position: 0 0;
  border: 2px solid;
  border-color: var(--bone) var(--bone-mid) var(--bone-mid) var(--bone);
  border-radius: 3px;
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #000, 3px 3px 0 1px #000;
  image-rendering: pixelated;
}

/* .osd — TV on-screen display: phosphor VT323, 1 px black outline, the one allowed bloom */
.osd {
  font-family: var(--f-vt);
  font-size: 22px;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--phos);
  text-shadow:
    1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000,
    1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000,
    0 0 4px rgba(104, 201, 100, .45);
}

/* .gilded / .chrome — Pen & Pixel lettering: hard-stop horizon, black outline, never animated */
.gilded, .chrome {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(1px 0 0 #1A0C02) drop-shadow(-1px 0 0 #1A0C02)
    drop-shadow(0 1px 0 #1A0C02) drop-shadow(0 -1px 0 #1A0C02)
    drop-shadow(2px 2px 0 #000);
}
.gilded {
  background-image: linear-gradient(180deg,
    #FFF4CC 0 14%, #F7D06A 14% 34%, #F2C14E 34% 47%,
    #6B4509 47% 53%, #A2711A 53% 66%, #D9A43A 66% 82%, #FFE7A0 82% 100%);
}
.chrome {
  background-image: linear-gradient(180deg,
    #FFFFFF 0 16%, #DCE3E8 16% 38%, #AEB8C0 38% 47%,
    #3B3F46 47% 53%, #6D747C 53% 68%, #B6BEC5 68% 84%, #F1F4F6 84% 100%);
  filter:
    drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000)
    drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000)
    drop-shadow(2px 2px 0 #000);
}

/* .flyer — photocopied paper, rotated, taped */
.flyer {
  position: relative;
  color: var(--paper-ink);
  background-color: var(--paper);
  background-image: var(--toner, none);
  transform: rotate(-2.5deg);
  box-shadow: 3px 3px 0 #000;
}
.flyer::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  width: 54px;
  height: 17px;
  margin-left: -27px;
  background: rgba(216, 207, 184, .62);
  border-left: 2px dotted rgba(23, 18, 14, .25);
  border-right: 2px dotted rgba(23, 18, 14, .25);
  transform: rotate(4deg);
}

/* .stamp — rubber stamp, toner-masked ink */
.stamp {
  display: inline-block;
  padding: 1px 6px 0;
  font-family: var(--f-vt);
  font-size: 18px;
  line-height: 18px;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--phos);
  border: 2px solid currentColor;
  transform: rotate(-4deg);
  -webkit-mask-image: var(--toner-mask, none);
  mask-image: var(--toner-mask, none);
  -webkit-mask-size: 64px 64px;
  mask-size: 64px 64px;
}
.stamp--sold, .stamp[data-status="SOLD"] { color: var(--blood-hi); }
.stamp--hold, .stamp[data-status="RESERVED"] { color: var(--bone); }
.stamp--pick { color: var(--gold-hi); }

/* .kbd — keycap */
.kbd, kbd {
  display: inline-block;
  min-width: 22px;
  height: 22px;
  padding: 1px 5px 0;
  font-family: var(--f-vt);
  font-size: 18px;
  line-height: 18px;
  text-align: center;
  color: var(--text-hi);
  background: var(--stone-3);
  border: 1px solid #000;
  border-bottom-width: 3px;
  border-radius: 2px;
  box-shadow: inset 1px 1px 0 var(--stone-4);
}

/* [data-glyph]::before — monochrome face-button disc in front of the label */
[data-glyph]::before {
  content: "";
  flex: none;
  display: inline-block;
  width: 18px;
  height: 18px;
  background: var(--g-x) center / 18px 18px no-repeat;
  image-rendering: pixelated;
}
[data-glyph="o"]::before { background-image: var(--g-o); }
[data-glyph="t"]::before { background-image: var(--g-t); }
[data-glyph="s"]::before { background-image: var(--g-s); }

/* .btn-glyph — context key; shows the variant for the last input device */
.btn-glyph {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-right: 6px;
}
.btn-glyph::before {
  content: attr(data-kbd);
  display: inline-block;
  min-width: 22px;
  height: 22px;
  padding: 1px 5px 0;
  font-family: var(--f-vt);
  font-size: 18px;
  line-height: 18px;
  text-align: center;
  white-space: nowrap;
  color: var(--text-hi);
  background: var(--stone-3);
  border: 1px solid #000;
  border-bottom-width: 3px;
  border-radius: 2px;
}
body[data-input="pad"] .btn-glyph::before {
  content: attr(data-pad);
  border-radius: 9px;
  border-bottom-width: 1px;
  background: #000;
  border-color: var(--bone);
}
body[data-input="pad"] .btn-glyph:is([data-pad="x"], [data-pad="o"], [data-pad="t"], [data-pad="s"])::before {
  content: "";
  min-width: 0;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  background: var(--g-x) center / 18px 18px no-repeat;
  image-rendering: pixelated;
}
body[data-input="pad"] .btn-glyph[data-pad="o"]::before { background-image: var(--g-o); }
body[data-input="pad"] .btn-glyph[data-pad="t"]::before { background-image: var(--g-t); }
body[data-input="pad"] .btn-glyph[data-pad="s"]::before { background-image: var(--g-s); }
body[data-input="touch"] .btn-glyph::before {
  content: attr(data-touch);
  border-radius: 2px;
  border-bottom-width: 1px;
  background: transparent;
  border-color: var(--bone-mid);
}

/* ---------- 4. BUTTONS ---------- */
.ps1-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  font-family: var(--f-vt);
  font-size: 22px;
  line-height: 1;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--text-hi);
  background: var(--panel-2);
  border: 2px solid;
  border-color: #5A4F57 #08070A #08070A #5A4F57;
  box-shadow: 0 0 0 1px #000, 2px 2px 0 1px #000;
  cursor: pointer;
}
.ps1-btn .lbl { display: inline-block; padding-top: 2px; }
.ps1-btn:hover { border-color: var(--bone) var(--bone-dark) var(--bone-dark) var(--bone); color: #fff; }
.ps1-btn:active { transform: translate(1px, 1px); box-shadow: 0 0 0 1px #000; }
.ps1-btn.active { background: var(--bone); color: var(--void); border-color: #fff var(--bone-mid) var(--bone-mid) #fff; }
.ps1-btn.small { min-height: 28px; padding: 0 8px; font-size: 18px; gap: 6px; }
.ps1-btn.small .i { width: 16px; height: 16px; }
.icon-btn { padding: 0; min-width: 34px; }

/* blood = audio */
.ps1-btn.blood {
  color: #FFF1EC;
  background: var(--blood);
  border-color: #EF6A5F #520B06 #520B06 #EF6A5F;
}
.ps1-btn.blood:hover { background: var(--blood-hi); border-color: #FFB3AA #520B06 #520B06 #FFB3AA; }
.ps1-btn.blood[data-state="pause"] {
  color: #FFC2BB;
  background: var(--blood-dark);
  border-color: var(--blood-hi) #210403 #210403 var(--blood-hi);
}
[data-state="loading"] .lbl { animation: blink-soft .6s steps(1) infinite; }

/* gold = money (outlined; the hero / examine LEASE buttons are filled, below) */
.ps1-btn.gold {
  color: var(--gold-hi);
  background: #1E1606;
  border-color: var(--gold-hi) #3D2904 #3D2904 var(--gold-hi);
}
.ps1-btn.gold:hover { color: #FFE7A0; background: #2E2108; border-color: #FFE7A0 var(--gold-dark) var(--gold-dark) #FFE7A0; }
.ps1-btn.danger { color: #FF9A90; border-color: #6E1A14 #08070A #08070A #6E1A14; }

#hero-btn-lease, #shrine-card-lease, #btn-quick-save {
  color: #1A0F02;
  background: linear-gradient(180deg, #F8D36E 0 50%, #D9A63A 50% 100%);
  border-color: #FFF1C2 #6B4509 #6B4509 #FFF1C2;
}
#hero-btn-lease:hover, #shrine-card-lease:hover, #btn-quick-save:hover {
  background: linear-gradient(180deg, #FFE08A 0 50%, #EBB648 50% 100%);
}
/* disabled always wins over the colour variants */
.ps1-btn:disabled, .ps1-btn[aria-disabled="true"],
.ps1-btn.blood:disabled, .ps1-btn.blood[aria-disabled="true"],
.ps1-btn.gold:disabled, .ps1-btn.gold[aria-disabled="true"] {
  cursor: not-allowed;
  color: var(--text-low);
  background: var(--stone-1);
  border-color: var(--stone-3) #000 #000 var(--stone-3);
}
.ps1-btn:disabled::before, .ps1-btn[aria-disabled="true"]::before { opacity: .4; }
#hero-btn-lease:disabled, #shrine-card-lease:disabled {
  color: var(--text-low);
  background: var(--stone-1);
  border-color: var(--stone-3) #000 #000 var(--stone-3);
}

/* ---------- 5. HEADER ---------- */
#top-osd-bar {
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  height: var(--hdr-h);
  padding: 0 16px;
  background-color: #0D0B0E;
  background-image: var(--bayer, none);
  border-bottom: 2px solid #000;
  box-shadow: 0 1px 0 var(--stone-3);
  image-rendering: pixelated;
}

.brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  text-decoration: none;
  line-height: 1;
}
.brand-logo {
  font-family: var(--f-black);
  font-weight: 700;
  font-size: 31px;
  line-height: 30px;
  white-space: nowrap;
  padding: 0 3px;
  margin-left: -3px;
}
.brand-serial {
  font-family: var(--f-vt);
  font-size: 18px;
  line-height: 15px;
  letter-spacing: .08em;
  color: var(--text-mid);
  white-space: nowrap;
}

.disc-select {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}
.shoulder {
  display: inline-grid;
  place-items: center;
  flex: none;
  min-width: 34px;
  height: 26px;
  padding: 0 6px;
  font-family: var(--f-pixel);
  font-size: 8px;
  line-height: 1;
  color: var(--text-mid);
  background: var(--stone-2);
  border: 2px solid #000;
  border-radius: 10px 10px 3px 3px;
  box-shadow: inset 0 2px 0 var(--stone-4), inset 0 -2px 0 #0B090B;
}
.shoulder:hover { color: var(--text-hi); background: var(--stone-3); }
.shoulder:active { box-shadow: inset 0 2px 0 #0B090B; }
.sh-lbl { padding-top: 1px; }

.world-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  font-family: var(--f-vt);
  font-size: 22px;
  line-height: 1;
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--text-mid);
  border: 2px solid transparent;
}
.world-tab .i { color: var(--bone-dark); }
.world-tab .disc-lbl { padding-top: 2px; }
.world-tab:hover { color: var(--text-hi); border-color: var(--stone-3); }
.world-tab:hover .i { color: var(--bone-mid); }
.world-tab.active {
  color: var(--void);
  background: var(--bone);
  border-color: #000;
  box-shadow: 0 0 0 1px var(--bone-mid), 3px 3px 0 1px #000;
}
.world-tab.active .i {
  color: var(--void);
  animation: disc-spin .8s steps(4) infinite;
}
@keyframes disc-spin { to { transform: rotate(360deg); } }

.osd-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}
#btn-options { min-height: 36px; }

/* six worlds (GC: CULT ROULETTE ... CULT DECK, ~66 label characters) need ~1020 px at 22 px: full labels only from
   1920 up (10 px padding). 1440-1919: every label steps to 18 px and only the active disc keeps its spinning icon;
   1440-1679 packs the tabs tighter (§23 holds the other GC header re-tunes). */
@media (min-width: 1920px) {
  .world-tab { padding: 0 10px; }
}
@media (min-width: 1440px) and (max-width: 1919px) {
  .world-tab { gap: 6px; padding: 0 7px; font-size: 18px; letter-spacing: .02em; }
  .world-tab:not(.active) .i { display: none; }
}
@media (min-width: 1440px) and (max-width: 1679px) {
  .disc-select { gap: 2px; }
  .shoulder { min-width: 30px; padding: 0 4px; }
  .world-tab { gap: 4px; padding: 0 4px; letter-spacing: 0; }
}

.links-menu { position: relative; }
.links-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 10px;
  list-style: none;
  font-family: var(--f-vt);
  font-size: 22px;
  color: var(--text-mid);
  border: 2px solid var(--stone-3);
  background: var(--stone-1);
  cursor: pointer;
}
.links-menu > summary::-webkit-details-marker { display: none; }
.links-menu > summary:hover { color: var(--text-hi); border-color: var(--bone-mid); }
.links-menu[open] > summary { color: var(--void); background: var(--bone); border-color: #000; }
.links-menu > summary .lbl { padding-top: 2px; }
.social-row { display: flex; gap: 4px; }
.sq-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 34px;
  height: 34px;
  color: var(--text-mid);
  text-decoration: none;
  background: var(--stone-1);
  border: 2px solid var(--stone-3);
}
.sq-link:hover { color: var(--void); background: var(--bone); border-color: #000; }
.sq-lbl {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (min-width: 1100px) {
  .links-menu > summary { display: none; }
}
@media (max-width: 1099px) {
  .links-menu .social-row {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 40;
    flex-direction: column;
    gap: 2px;
    min-width: 190px;
    padding: 6px;
    background-color: #0B080D;
    background-image: var(--win, none);
    border: 2px solid;
    border-color: var(--bone) var(--bone-mid) var(--bone-mid) var(--bone);
    box-shadow: 0 0 0 1px #000, 3px 3px 0 1px #000;
  }
  .links-menu .sq-link { width: auto; justify-content: flex-start; padding: 0 10px; height: 40px; border-color: transparent; background: transparent; color: var(--text); }
  .links-menu .sq-link:hover { background: var(--bone); color: var(--void); }
  .links-menu .sq-lbl { position: static; width: auto; height: auto; clip-path: none; font-size: 22px; padding-top: 2px; }
  /* the dropdown only shows while the menu is in use, even if [open] lingers */
  .links-menu:not(:hover):not(:focus-within) .social-row { display: none; }
  .links-menu[open]:not(:hover):not(:focus-within) > summary { color: var(--text-mid); background: var(--stone-1); border-color: var(--stone-3); }
}

#btn-open-cart-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 10px;
  font-family: var(--f-vt);
  font-size: 22px;
  line-height: 1;
  white-space: nowrap;
  color: var(--gold-hi);
  background: #171005;
  border: 2px solid;
  border-color: var(--gold-hi) var(--gold-dark) var(--gold-dark) var(--gold-hi);
  box-shadow: 0 0 0 1px #000, 3px 3px 0 1px #000;
}
#btn-open-cart-top:hover { background: #2A1E07; }
#btn-open-cart-top .i { color: var(--gold-hi); }
#btn-open-cart-top .mc-lbl { font-size: 18px; letter-spacing: .06em; color: var(--gold); padding-top: 2px; }
#top-cart-count {
  min-width: 40px;
  padding: 3px 5px 1px;
  text-align: center;
  color: var(--text-hi);
  background: #000;
  border: 1px solid var(--gold-dark);
}
#top-cart-count::after { content: "/15"; color: var(--text-low); }
#top-cart-total { padding-top: 2px; color: var(--gold-hi); }
#btn-open-cart-top.bump { animation: bump .36s steps(3) 1; }
@keyframes bump {
  0% { transform: translateY(-4px); }
  34% { transform: translateY(1px); }
  67% { transform: translateY(-1px); }
  100% { transform: none; }
}

/* ---------- 6. MAIN STAGE + CRT GLASS ---------- */
#main-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rack-w);
  min-width: 0;
  min-height: 0;
}

#viewport-container {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 10px;
  background-color: var(--stone-2);
  background-image: var(--stone, none);
  border-right: 2px solid #000;
  image-rendering: pixelated;
}
/* power LED on the bezel: phosphor standby, blood while audio plays */
#viewport-container::after {
  content: "";
  position: absolute;
  right: 22px;
  bottom: 3px;
  width: 4px;
  height: 4px;
  background: var(--phos-dark);
  box-shadow: 0 0 0 1px #000;
}
body.is-playing #viewport-container::after { background: var(--blood-hi); }

.crt-glass {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  border-radius: 16px / 13px;
  box-shadow:
    0 0 0 2px #000,
    -2px -2px 0 2px #0A080A,
    2px 2px 0 2px #4D434A;
}
/* hard glass glare: two flat bands, no gradient blending */
.crt-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(118deg,
      rgba(255, 255, 255, .055) 0 13%, transparent 13% 15.5%,
      rgba(255, 255, 255, .03) 15.5% 18%, transparent 18% 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .05), inset 0 -2px 0 rgba(0, 0, 0, .6);
}
html.crt-off .crt-glass { border-radius: 3px; }
html.crt-off .crt-glass::after { display: none; }

#ps1-webgl-canvas {
  position: absolute;
  left: var(--cx, 0);
  top: var(--cy, 0);
  z-index: 0;
  display: block;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  touch-action: none;
  outline: none;
}

#crt-overlay, #crt-vignette { display: none; }

#vhs-tracking-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: -24px;
  z-index: 1;
  height: 14px;
  display: none;
  pointer-events: none;
  background-color: rgba(216, 207, 184, .08);
  background-image: var(--toner, none);
  border-top: 1px solid rgba(255, 255, 255, .12);
}
#vhs-tracking-bar.glitch-active {
  display: block;
  animation: tracking .42s steps(7) 1 forwards;
}
@keyframes tracking {
  from { transform: translateY(0); }
  to { transform: translateY(110vh); }
}

.vp-hud {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* ---------- 7. GLASS HUD: OSD, FLYER, PROMPTS, HINTS ---------- */
/* top-left OSD row: the world name, then the DISC n/5 tag (§22). The name truncates first; the tag never does */
.osd-tl {
  position: absolute;
  top: 14px;
  left: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  width: calc(100% - 240px);
  pointer-events: none;
  container: osdtl / inline-size;   /* §22: the DISC tag steps out when the row can't hold a world name beside it */
}
#tel-world-name {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#deal-banner-btn {
  position: absolute;
  top: 18px;
  right: 22px;
  display: flex;
  flex-direction: column;
  width: 190px;
  padding: 9px 12px 7px;
  pointer-events: auto;
  cursor: pointer;
}
#deal-banner-btn:hover { background-color: #EFE8D4; }
#deal-banner-btn:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }
.fl-kicker {
  font-family: var(--f-pixel);
  font-size: 8px;
  line-height: 10px;
  letter-spacing: .04em;
  color: var(--paper-mid);
}
.fl-line {
  margin-top: 3px;
  font-family: var(--f-title);
  font-size: 24px;
  line-height: 24px;
  color: var(--paper-ink);
  white-space: nowrap;
}
.fl-stamp {
  position: absolute;
  top: 6px;
  right: -12px;
  color: var(--blood);
  background: rgba(228, 220, 197, .35);
  transform: rotate(14deg);
}
.fl-meter {
  margin-top: 4px;
  padding-top: 3px;
  border-top: 1px dashed var(--paper-mid);
  font-family: var(--f-vt);
  font-size: 18px;
  line-height: 18px;
  color: var(--paper-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#deal-banner-btn.unlocked .fl-stamp {
  color: #FFF1EC;
  background: var(--blood);
  border-color: var(--blood);
}
#deal-banner-btn.unlocked .fl-meter { color: var(--gold-ink); }
#deal-banner-btn.unlocked::after {
  content: "UNLOCKED";
  position: absolute;
  right: -10px;
  bottom: -12px;
  padding: 2px 6px 0;
  font-family: var(--f-pixel);
  font-size: 8px;
  line-height: 12px;
  color: #1A0F02;
  background: var(--gold-hi);
  border: 2px solid #000;
  transform: rotate(4deg);
}

/* gate fix: id-level selectors so #examine-prompt's display:flex can't show an empty box */
.prompt:empty, #pedestal-prompt:empty, #examine-prompt:empty { display: none; }

#pedestal-prompt {
  position: fixed;
  left: clamp(8px, calc(var(--x, -2000px) + 14px), calc(100vw - 316px));
  top: calc(var(--y, -2000px) + 14px);
  z-index: 50;
  max-width: 300px;
  padding: 5px 10px 4px;
  font-family: var(--f-vt);
  font-size: 22px;
  line-height: 1.05;
  color: var(--text-hi);
  white-space: nowrap;
  pointer-events: none;
}
#pedestal-prompt .gold, #examine-prompt .gold { color: var(--gold-hi); }
#pedestal-prompt .sold, #examine-prompt .sold { color: var(--blood-hi); }

#examine-prompt {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 54px;
  width: fit-content;
  max-width: calc(100% - 32px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px 4px 8px;
  font-family: var(--f-vt);
  font-size: 22px;
  line-height: 1;
  color: var(--text-hi);
  white-space: nowrap;
  background: rgba(9, 8, 10, .86);
  border: 2px solid var(--bone-mid);
  box-shadow: 0 0 0 1px #000, 3px 3px 0 1px #000;
}
.vp-hud:has(#active-shrine-card[data-state="open"]) #examine-prompt {
  left: calc(var(--panel-w) + 24px);
}

.hint-bar {
  position: absolute;
  right: 14px;
  bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 14px;
  max-width: calc(100% - 28px);
  padding: 5px 10px 4px;
  font-family: var(--f-vt);
  font-size: 18px;
  line-height: 22px;
  letter-spacing: .04em;
  color: var(--text-mid);
  background: rgba(9, 8, 10, .78);
  border: 1px solid var(--stone-3);
}
.hint { display: inline-flex; align-items: center; white-space: nowrap; }
.vp-hud:has(#active-shrine-card[data-state="open"]) .hint-bar {
  max-width: calc(100% - var(--panel-w) - 40px);
}
.vp-hud:has(#active-shrine-card[data-state="docked"]) .hint-bar { max-width: 50%; }

/* leader line from the examine panel to the record (D1 writes the points) */
.leader {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  display: none;
  pointer-events: none;
}
.vp-hud:has(#active-shrine-card[data-state="open"]) .leader { display: block; }
.leader polyline { fill: none; stroke: var(--bone); stroke-width: 2; shape-rendering: crispEdges; }
.leader rect { fill: var(--void); stroke: var(--bone); stroke-width: 2; shape-rendering: crispEdges; }

/* ---------- 8. EXAMINE PANEL (hidden | open | docked) ---------- */
#active-shrine-card {
  position: absolute;
  left: 12px;
  top: 50px;
  max-height: calc(100% - 62px);   /* ends 12 px above the glass edge: the hint bar and prompts sit right of the panel */
  z-index: 3;
  width: var(--panel-w);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 10px 10px;
  overflow: hidden;
  pointer-events: auto;
}
#active-shrine-card[data-state="hidden"] { display: none; }
#active-shrine-card > * { flex: none; }

.ex-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--stone-3);
}
#shrine-card-code {
  min-width: 0;
  font-family: var(--f-vt);
  font-size: 18px;
  letter-spacing: .02em;
  color: var(--text-mid);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#shrine-card-status { flex: none; margin-left: auto; color: var(--phos); }
#shrine-card-status[data-status="SOLD"], #active-shrine-card[data-status="SOLD"] #shrine-card-status { color: var(--blood-hi); }
#shrine-card-status[data-status="RESERVED"], #active-shrine-card[data-status="RESERVED"] #shrine-card-status { color: var(--bone); }

.ex-body {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.ex-cover {
  width: 96px;
  height: 96px;
  object-fit: cover;
  background: #000;
  box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--stone-3), 3px 3px 0 3px #000;
}
.ex-info { min-width: 0; padding-top: 2px; }
#shrine-card-title {
  font-family: var(--f-title);
  font-size: 24px;
  line-height: 26px;
  color: var(--text-hi);
  text-shadow: 2px 2px 0 #000;
  overflow-wrap: anywhere;
}
#shrine-card-meta {
  margin-top: 4px;
  font-family: var(--f-vt);
  font-size: 18px;
  line-height: 18px;
  color: var(--text-mid);
  overflow-wrap: anywhere;
}

#shrine-card-stats, .hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}
#shrine-card-stats > div, .hero-stats > div {
  min-width: 0;
  padding: 4px 5px 3px;
  background: #07060A;
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 var(--stone-3);
}
#shrine-card-stats dt, .hero-stats dt {
  font-family: var(--f-pixel);
  font-size: 8px;
  line-height: 10px;
  color: var(--text-low);
}
#shrine-card-stats dd, .hero-stats dd {
  margin: 2px 0 0;
  font-family: var(--f-vt);
  font-size: 22px;
  line-height: 20px;
  color: var(--text-hi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#shrine-card-stats dd a, .hero-stats dd a { color: var(--text-hi); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
#shrine-card-stats dd a:hover, .hero-stats dd a:hover { color: #fff; background: var(--stone-3); }

.tier-ladder {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 0 1 auto !important;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 2px 2px 16px;      /* 6 px headroom: the first row's IN CARD sticker straddles its top edge */
  margin-right: -4px;
}
.tier-ladder .tier-row { padding-left: 18px; }
/* rows keep their natural height; only the ladder scrolls (a shrunken row cut its licence line in half) */
.tier-ladder > .tier-row { flex: none; }
.tier-ladder .tier-row.is-focused::before { left: -16px; }
/* licence terms wrap instead of ending in "…" (short desktop screens hide them, §20) */
.tier-ladder .tier-meta { white-space: normal; overflow: visible; text-overflow: clip; text-wrap: balance; }
/* IN CARD rides on the row's top edge (like the STUDIO PICK stamp on the opposite corner), so it never
   fights the tier name and price for the row's width */
.tier-ladder .tier-row.is-in-card .tier-flag {
  grid-area: auto;                /* placed against the row box, not the name's grid cell */
  position: absolute;
  top: -6px;
  left: 18px;
  max-width: none;
  z-index: 1;
}

.ex-actions {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  grid-template-areas: "prev play next" "lease lease share";
  gap: 6px;
  padding-top: 4px;
}
#shrine-card-prev { grid-area: prev; }
#shrine-card-play { grid-area: play; }
#shrine-card-next { grid-area: next; }
#shrine-card-lease { grid-area: lease; }
#shrine-card-share { grid-area: share; }
.ex-actions .ps1-btn { min-height: 38px; padding: 0 6px; gap: 6px; }
.ex-actions .icon-btn { padding: 0; }

.ex-docked { display: none; }

/* docked: a single 44 px line — title · FROM $ · PLAY */
#active-shrine-card[data-state="docked"] {
  top: auto;
  bottom: 12px;
  height: 44px;
  width: auto;
  max-width: min(440px, 48%);
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 0 4px 0 10px;
  overflow: hidden;
}
#active-shrine-card[data-state="docked"] .ex-head,
#active-shrine-card[data-state="docked"] .ex-body,
#active-shrine-card[data-state="docked"] .tier-ladder,
#active-shrine-card[data-state="docked"] #shrine-card-stats { display: none; }
#active-shrine-card[data-state="docked"] .ex-docked {
  order: -1;
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
  cursor: pointer;
}
#active-shrine-card[data-state="docked"] .ex-actions { display: flex; margin: 0; padding: 0; }
#active-shrine-card[data-state="docked"] .ex-actions > :not(#shrine-card-play) { display: none; }
#active-shrine-card[data-state="docked"] #shrine-card-play { min-height: 32px; padding: 0 10px; }
/* 900-1099: the glass is too narrow for the chip and the hint bar side by side, so the chip takes the
   bottom row (record names stop truncating) and the hint bar steps aside until the chip closes */
@media (min-width: 900px) and (max-width: 1099px) {
  #active-shrine-card[data-state="docked"] { max-width: min(440px, calc(100% - 24px)); }
  .vp-hud:has(#active-shrine-card[data-state="docked"]) .hint-bar { display: none; }
}
.exd-title {
  min-width: 0;
  font-family: var(--f-vt);
  font-size: 22px;
  letter-spacing: .03em;
  color: var(--text-hi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.exd-price { flex: none; font-family: var(--f-vt); font-size: 22px; color: var(--gold-hi); white-space: nowrap; }
#active-shrine-card[data-status="SOLD"] .exd-price { color: var(--blood-hi); }

/* SOLD examine: D1 replaces the ladder with this block */
.ladder-sold {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 4px 4px 0;
}
.ladder-sold .stamp { font-size: 22px; line-height: 22px; padding: 3px 8px 1px; }

/* ---------- 9. TIER ROWS (examine ladder + shop menu) ---------- */
.tier-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "name flag price" "meta meta meta";
  align-items: baseline;
  column-gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 5px 10px 4px 14px;
  text-align: left;
  text-decoration: none;
  color: var(--text);
  background: #100C13;
  border: 2px solid;
  border-color: #2E2731 #060507 #060507 #2E2731;
  cursor: pointer;
}
.tier-name {
  grid-area: name;
  font-family: var(--f-vt);
  font-size: 22px;
  line-height: 20px;
  letter-spacing: .03em;
  color: var(--text-hi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tier-meta {
  grid-area: meta;
  font-family: var(--f-vt);
  font-size: 18px;
  line-height: 18px;
  color: var(--text-mid);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tier-price {
  grid-area: price;
  justify-self: end;
  font-family: var(--f-vt);
  font-size: 28px;
  line-height: 22px;
  color: var(--gold-hi);
  white-space: nowrap;
}
.tier-flag {
  grid-area: flag;
  justify-self: start;
  align-self: center;
  display: none;
  padding: 2px 4px 1px;
  font-family: var(--f-pixel);
  font-size: 8px;
  line-height: 9px;
  white-space: nowrap;
  color: #1A0F02;
  background: var(--gold-hi);
}
.tier-row.is-in-card .tier-flag { display: inline-block; max-width: 100%; overflow: hidden; }
.tier-row.is-in-card { border-left-color: var(--gold-hi); }
.tier-row:hover { border-color: var(--bone-mid) #060507 #060507 var(--bone-mid); }

.tier-row.is-featured { border-color: var(--gold-hi) var(--gold-dark) var(--gold-dark) var(--gold-hi); }
.tier-row.is-featured::after {
  content: "STUDIO PICK";
  position: absolute;
  top: -11px;
  right: 4px;
  padding: 1px 4px 0;
  font-family: var(--f-vt);
  font-size: 18px;
  line-height: 15px;
  letter-spacing: .06em;
  color: var(--gold-hi);
  background: #0B080D;
  border: 1px solid var(--gold-hi);
  transform: rotate(4deg);
  -webkit-mask-image: var(--toner-mask, none);
  mask-image: var(--toner-mask, none);
}
.tier-row.is-featured .tier-price { padding-top: 4px; }

/* selection = bone-inverted + glove cursor */
.tier-row.is-focused {
  color: var(--void);
  background: var(--bone);
  border-color: #fff var(--bone-mid) var(--bone-mid) #fff;
}
.tier-row.is-focused .tier-name { color: var(--void); }
.tier-row.is-focused .tier-meta { color: #3E362D; }
.tier-row.is-focused .tier-price { color: var(--gold-ink); }
.tier-row.is-focused::before, .mc-block-item.is-active::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -24px;
  width: 32px;
  height: 24px;
  margin-top: -12px;
  background: var(--glove, none) 0 0 / 32px 24px no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
  z-index: 2;
}

.tier-row--exclusive .tier-price { font-size: 22px; }
.tier-row--exclusive.is-hold { cursor: default; opacity: .72; }
.tier-row--exclusive.is-hold .tier-price { color: var(--bone); }
.tier-row--exclusive.is-hold:hover { border-color: #2E2731 #060507 #060507 #2E2731; }

/* ---------- 10. SAVE TOAST, AREA BANNER, LOADING, FALLBACK ---------- */
#save-toast {
  position: absolute;
  top: 132px;
  right: 18px;
  z-index: 6;
  width: 316px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-areas: "icon l1" "icon l2" "bar bar" "deal deal" "act act";
  gap: 3px 10px;
  padding: 10px 12px 10px;
  pointer-events: auto;
}
.st-icon {
  grid-area: icon;
  width: 48px;
  height: 48px;
  align-self: start;
  background: #000 var(--memcard-gold) center / 32px 32px no-repeat;
  box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--stone-3);
  image-rendering: pixelated;
}
.st-icon:not(:empty) { background-image: none; }
.st-icon > img, .st-icon > canvas { width: 48px; height: 48px; image-rendering: pixelated; }
.st-line1 {
  grid-area: l1;
  align-self: end;
  font-family: var(--f-vt);
  font-size: 22px;
  line-height: 22px;
  letter-spacing: .04em;
  color: var(--text-hi);
}
.st-line2 {
  grid-area: l2;
  font-family: var(--f-vt);
  font-size: 18px;
  line-height: 18px;
  color: var(--text-mid);
  overflow-wrap: anywhere;
}
.st-bar {
  grid-area: bar;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2px;
  height: 12px;
  margin-top: 6px;
  padding: 2px;
  background: #000;
  border: 1px solid var(--stone-3);
}
.st-bar i { display: block; background: var(--stone-2); }
#save-toast[data-phase="saving"] .st-bar i { animation: save-cell 520ms steps(1) forwards; }
#save-toast[data-phase="saving"] .st-bar i:nth-child(2) { animation-delay: 40ms; }
#save-toast[data-phase="saving"] .st-bar i:nth-child(3) { animation-delay: 80ms; }
#save-toast[data-phase="saving"] .st-bar i:nth-child(4) { animation-delay: 120ms; }
#save-toast[data-phase="saving"] .st-bar i:nth-child(5) { animation-delay: 160ms; }
#save-toast[data-phase="saving"] .st-bar i:nth-child(6) { animation-delay: 200ms; }
#save-toast[data-phase="saving"] .st-bar i:nth-child(7) { animation-delay: 240ms; }
#save-toast[data-phase="saving"] .st-bar i:nth-child(8) { animation-delay: 280ms; }
#save-toast[data-phase="saving"] .st-bar i:nth-child(9) { animation-delay: 320ms; }
#save-toast[data-phase="saving"] .st-bar i:nth-child(10) { animation-delay: 360ms; }
#save-toast[data-phase="saving"] .st-bar i:nth-child(11) { animation-delay: 400ms; }
#save-toast[data-phase="saving"] .st-bar i:nth-child(12) { animation-delay: 440ms; }
@keyframes save-cell { from { background: var(--stone-2); } 1%, to { background: var(--phos); } }
#save-toast[data-phase="saving"] .st-line2 { animation: blink-soft .8s steps(1) infinite; }
#save-toast[data-phase="saved"] .st-bar i { background: var(--phos); }
#save-toast[data-phase="saved"] .st-line1 { color: var(--phos); }
.st-deal {
  grid-area: deal;
  font-family: var(--f-vt);
  font-size: 18px;
  line-height: 18px;
  color: var(--gold-hi);
}
.st-deal:empty { display: none; }
.st-actions { grid-area: act; display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.st-actions .ps1-btn { min-height: 30px; font-size: 18px; padding: 0 8px; gap: 6px; }
#save-toast[data-phase="saving"] .st-actions { visibility: hidden; }

/* the save icon flying into MEMORY CARD 2 (D1: Web Animations translate + scale(.5), steps(10)).
   Origin top-left so the half-size icon lands centred on the target D1 computes. */
.rd-fly {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1500;
  width: 48px;
  height: 48px;
  transform-origin: 0 0;
  image-rendering: pixelated;
  pointer-events: none;
  box-shadow: 0 0 0 1px #000, 0 0 0 3px #3A3238;
}

#hud-layer { position: absolute; inset: 0; z-index: 5; pointer-events: none; }

#hud-doom {
  position: absolute;
  top: 46px;
  left: 18px;
  right: 236px;                /* ends left of the BUY 2 GET 1 flyer: right 22 + width 190 + 24 clear */
  max-height: 88px;
  overflow: hidden;
  font-family: var(--f-pixel);
  font-size: 16px;
  line-height: 22px;
  color: var(--blood-hi);
  text-shadow: 1px 1px 0 #000;
  text-transform: uppercase;
}
.vp-hud:has(#active-shrine-card[data-state="open"]) #hud-doom { left: calc(var(--panel-w) + 30px); }
/* narrow glass + open panel: no room between panel and flyer, so the lines drop under the flyer */
@media (min-width: 900px) and (max-width: 1279px) {
  .vp-hud:has(#active-shrine-card[data-state="open"]) #hud-doom { top: 132px; right: 18px; }
}
.hud-line { overflow-wrap: anywhere; }

#hud-sh {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 56px;
  width: min(560px, calc(100% - 48px));
  margin: 0 auto;
  padding: 12px 16px;
  background: rgba(0, 0, 0, .85);
  border: 1px solid #8C8C8C;
}
.hud-sh-text {
  font-family: var(--f-mono);
  font-size: 15px;
  line-height: 1.55;
  color: #E4E4E4;
  white-space: pre-wrap;
}
/* examine panel open: the text box centres in the free glass right of the panel */
@media (min-width: 900px) {
  .vp-hud:has(#active-shrine-card[data-state="open"]) #hud-sh {
    left: calc(var(--panel-w) + 30px);
    right: 18px;
    width: auto;
    max-width: 560px;
    margin: 0 auto;
  }
}
/* 900-1099: the hint bar beside the panel folds to two rows, so the text box sits above both */
@media (min-width: 900px) and (max-width: 1099px) {
  .vp-hud:has(#active-shrine-card[data-state="open"]) #hud-sh { bottom: 96px; }
}

#hud-ds {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 96px;
  margin-top: -48px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(6, 5, 4, .62);
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
}
.hud-ds-text {
  font-family: var(--f-ds);
  font-weight: 600;
  font-size: 44px;
  line-height: 1;
  letter-spacing: .18em;
  color: #E9DCB4;
  text-shadow: 2px 2px 0 #000;
  white-space: nowrap;
  animation: ds-track 3s steps(24) forwards;
}
/* long area names: D1 steps down until the band fits (handheld steps live in §21) */
.hud-ds-text.ds-m { font-size: 32px; }
/* the last step may still be too long on a narrow glass: it folds into two balanced lines inside the band */
.hud-ds-text.ds-s {
  font-size: 24px;
  max-width: calc(100% - 32px);
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  text-wrap: balance;
}
@keyframes ds-track { from { letter-spacing: .18em; } to { letter-spacing: .26em; } }
/* an easter egg's line (PRAISE THE SUN): a band in the upper quarter, over the sky; the egg stands on the
   ground in the lower half of the glass, so the band never covers it */
#hud-ds.ds-low { top: 24%; }
/* examine panel open: the band runs across the free glass right of the panel (same offset as the area
   banner), so BEAT ACQUIRED never covers the tier the buyer just clicked; D1 steps the text down to fit */
@media (min-width: 900px) {
  .vp-hud:has(#active-shrine-card[data-state="open"]) #hud-ds { left: calc(var(--panel-w) + 30px); }
}

#hud-flash { position: absolute; inset: 0; opacity: 0; }
#hud-flash.flash-gold { background: var(--gold-hi); animation: hud-flash 66ms steps(1, end) forwards; }
#hud-flash.flash-red { background: var(--blood-hi); animation: hud-flash 66ms steps(1, end) forwards; }
@keyframes hud-flash { from { opacity: .26; } to { opacity: 0; } }

#area-banner {
  position: absolute;
  left: 0;
  right: 0;
  top: 34%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 24px;
}
#area-banner::before, #area-banner::after {
  content: "";
  flex: 1 1 0;
  max-width: 140px;
  height: 1px;
  background: var(--bone);
  box-shadow: 0 1px 0 #000;
}
.area-name {
  font-family: var(--f-title);
  font-size: 48px;
  line-height: 48px;
  color: var(--text-hi);
  text-align: center;
  text-shadow: 2px 2px 0 #000, -1px -1px 0 #000;
}
/* "E1M1" / "MEMPHIS '96" kicker in pixel gold over the blackletter name (mixed case: blackletter capitals don't read) */
.area-name { display: flex; flex-direction: column; align-items: center; gap: 8px; }
/* the rule lines run through the blackletter line, not between kicker and name */
#area-banner::before, #area-banner::after { align-self: flex-end; margin-bottom: 24px; }
.area-kicker {
  font-family: var(--f-pixel);
  font-size: 16px;
  line-height: 16px;
  letter-spacing: .12em;
  color: var(--gold-hi);
  text-shadow: 2px 2px 0 #000;
}
/* examine panel open: the banner centres in the free glass right of the panel instead of crossing it */
@media (min-width: 900px) {
  /* lower third: the framed record (glass centre +-17%) and its nameplate stay clear while the name shows */
  #area-banner { top: 69%; }
  .vp-hud:has(#active-shrine-card[data-state="open"]) #area-banner { left: calc(var(--panel-w) + 30px); right: 18px; padding: 0 8px; }
}
#area-banner.show { animation: area-fade 3.4s steps(17) forwards; }
@keyframes area-fade {
  0% { opacity: 0; }
  12% { opacity: 1; }
  78% { opacity: 1; }
  100% { opacity: 0; }
}

/* belt and braces for app.js span.nowrap (J-card caption code; a word joiner already holds it) */
.nowrap { white-space: nowrap; }

#osd-track {
  position: absolute;
  top: 14px;
  left: 0;
  right: 0;
  width: fit-content;
  margin: 0 auto;
}

#vp-loading {
  position: absolute;
  right: 18px;
  bottom: 58px;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-pixel);
  font-size: 16px;
  line-height: 16px;
  color: var(--text-hi);
  text-shadow: 2px 2px 0 #000;
}
#vp-loading .i { width: 32px; height: 32px; color: var(--bone); animation: disc-spin .6s steps(4) infinite; }

#webgl-fallback {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  background: #000;
  pointer-events: auto;
}
.wf-head {
  font-family: var(--f-pixel);
  font-size: 16px;
  line-height: 24px;
  color: var(--blood-hi);
}
.wf-sub { max-width: 440px; font-family: var(--f-vt); font-size: 22px; color: var(--text-mid); }

/* ---------- 11. OPTIONS PANEL + CONTROLS MANUAL ---------- */
#options-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 8;
  bottom: 0;
  width: min(460px, calc(100% - 32px));
  height: fit-content;
  max-height: calc(100% - 24px);
  margin: auto;
  overflow-y: auto;
  padding: 14px 16px 12px;
  pointer-events: auto;
}
.opt-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--stone-3);
}
.opt-title { font-family: var(--f-pixel); font-size: 16px; line-height: 20px; color: var(--text-hi); }
.opt-sub { font-family: var(--f-vt); font-size: 18px; color: var(--text-low); }
.opt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  padding: 0 4px 0 34px;
}
.opt-row { position: relative; }
.opt-row:hover, .opt-row:focus-within { background: rgba(216, 207, 184, .07); }
.opt-row:focus-within::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 32px;
  height: 24px;
  margin-top: -12px;
  background: var(--glove, none) 0 0 / 32px 24px no-repeat;
  image-rendering: pixelated;
}
.opt-name { font-family: var(--f-vt); font-size: 22px; letter-spacing: .04em; color: var(--text); padding-top: 2px; }
.opt-val {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 150px;
  height: 32px;
  padding: 0 4px;
  font-family: var(--f-vt);
  font-size: 22px;
  color: var(--phos);
  background: #050805;
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 var(--stone-3);
}
.opt-val .lbl { flex: 1; text-align: center; padding-top: 2px; white-space: nowrap; }
.opt-val .i { color: var(--phos-dark); }
.opt-val:hover .i, .opt-val:focus-visible .i { color: var(--phos); }
.opt-val:focus-visible { outline: 2px solid var(--bone); outline-offset: 1px; }
.opt-links { display: none; }
.opt-social { display: flex; gap: 4px; }
.opt-social .sq-link { width: 40px; height: 40px; }
.opt-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--stone-3);
  font-family: var(--f-vt);
  font-size: 18px;
  color: var(--text-mid);
}
.opt-foot[role="button"] { cursor: pointer; }
.opt-foot[role="button"]:hover { color: var(--text-hi); }

/* the manual page: bone paper, black ink, folio */
.manual {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9;
  bottom: 0;
  width: min(600px, calc(100% - 32px));
  height: fit-content;
  max-height: calc(100% - 24px);
  margin: auto;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px 12px;
  color: var(--paper-ink);
  background-color: var(--paper);
  background-image: var(--toner, none);
  border: 1px solid #000;
  box-shadow: 4px 4px 0 #000;
  pointer-events: auto;
}
.man-head { border-bottom: 2px solid var(--paper-ink); padding-bottom: 4px; }
.man-kicker { font-family: var(--f-mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--paper-mid); }
.man-title { font-family: var(--f-title); font-size: 48px; line-height: 46px; color: var(--paper-ink); }
.man-keys {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 18px;
}
.man-keys > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 8px; }
.man-keys dt { display: flex; gap: 4px; flex-wrap: wrap; }
.man-keys dt .man-br { flex-basis: 100%; height: 0; }   /* SHIFT over [ ]: the combo does not fit the 92 px key column */
/* SHIFT + over [ ] / 1 – 6: the combo reads as one chord (two bare keycaps mean 'either key') */
.man-keys dt .man-op { align-self: center; font-family: var(--f-vt); font-size: 24px; font-style: normal; line-height: 18px; color: var(--paper-ink); }
.man-keys dd {
  margin: 0;
  font-family: var(--f-vt);
  font-size: 18px;
  line-height: 18px;
  color: var(--paper-ink);
}
.manual .kbd { color: var(--paper-ink); background: #F3EEDF; border-color: var(--paper-ink); box-shadow: none; }
.man-note {
  font-family: var(--f-mono);
  font-size: 13px;
  line-height: 1.45;
  color: var(--paper-mid);
  border-top: 1px dashed var(--paper-mid);
  padding-top: 8px;
}
.man-foot { display: flex; align-items: center; justify-content: space-between; }
.folio { font-family: var(--f-mono); font-size: 13px; color: var(--paper-mid); }
/* the manual is a page of its own: the deal flyer (the other cream paper, top right) steps aside while it is open */
.vp-hud:has(> #controls-card:not([hidden])) > #deal-banner-btn { visibility: hidden; }
/* a short desktop glass (1280x720: 530 px for the GC card's 552): the rows pack 3 px tighter, so the folio and OK
   stay on the page instead of under an internal scroll */
@media (min-width: 900px) and (max-height: 800px) {
  .manual { gap: 8px; }
  .man-keys { row-gap: 3px; }
}

/* ---------- 12. TOUCH CONTROLS (coarse pointers only) ---------- */
#touch-dpad, #touch-examine, #touch-play { display: none; }
@media (pointer: coarse) {
  #touch-dpad {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(3, 44px);
    grid-template-rows: repeat(3, 44px);
    pointer-events: auto;
  }
  #touch-dpad button {
    background: rgba(28, 24, 27, .82) var(--arrow-up) center / 21px 21px no-repeat;
    border: 2px solid #000;
    box-shadow: inset 1px 1px 0 var(--stone-4);
    image-rendering: pixelated;
    touch-action: none;
  }
  #touch-dpad button:active { background-color: var(--bone-dark); }
  #touch-dpad [data-key="KeyW"] { grid-area: 1 / 2; border-radius: 6px 6px 0 0; }
  #touch-dpad [data-key="KeyA"] { grid-area: 2 / 1; border-radius: 6px 0 0 6px; transform: rotate(-90deg); }
  #touch-dpad [data-key="KeyD"] { grid-area: 2 / 3; border-radius: 0 6px 6px 0; transform: rotate(90deg); }
  #touch-dpad [data-key="KeyS"] { grid-area: 3 / 2; border-radius: 0 0 6px 6px; transform: rotate(180deg); }
  #touch-examine, #touch-play {
    position: absolute;
    right: 12px;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    pointer-events: auto;
    touch-action: manipulation;
  }
  #touch-examine { bottom: 12px; }
  #touch-examine::before { width: 54px; height: 54px; background-size: 54px 54px; }
  #touch-play {
    bottom: 76px;
    width: 48px;
    height: 48px;
    color: #FFF1EC;
    background: var(--blood);
    border: 2px solid #000;
    box-shadow: 0 0 0 1px var(--bone), 2px 2px 0 1px #000;
  }
  #touch-play .i { width: 24px; height: 24px; }
  body.is-playing #touch-play { background: var(--blood-dark); }
}

/* ---------- 13. RIGHT RACK ---------- */
#right-rack {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background-color: #0C0A0E;
  background-image: var(--bayer, none);
  image-rendering: pixelated;
}

/* jewel-case hero */
#selected-beat-hero {
  flex: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "jewel kicker" "jewel title" "jewel stats" "actions actions";
  gap: 6px 16px;
  padding: 14px 16px 12px 14px;
  background-color: #0B080D;
  background-image: var(--win, none);
  background-repeat: repeat-x;
  border-bottom: 2px solid #000;
  box-shadow: 0 1px 0 var(--stone-3);
}
.jewel {
  grid-area: jewel;
  display: grid;
  grid-template-columns: 18px 112px;
  grid-template-rows: 112px 26px;
  align-self: start;
  border: 1px solid #6A6168;
  box-shadow: 0 0 0 2px #000, 3px 3px 0 2px #000;
  background: #000;
}
.jewel-spine {
  grid-row: 1 / span 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0 2px;
  writing-mode: vertical-rl;
  font-family: var(--f-vt);
  font-size: 18px;
  line-height: 17px;
  letter-spacing: 0;
  color: var(--bone);
  background: #000;
  border-right: 1px solid #2E2A2D;
  overflow: hidden;
  white-space: nowrap;
}
.spine-artist { color: var(--gold); }
.jewel-art { position: relative; width: 112px; height: 112px; overflow: hidden; }
.jewel-art img { width: 112px; height: 112px; object-fit: cover; }
/* jewel-case plastic: hinge line + hard glare band */
.jewel-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(125deg, transparent 0 58%, rgba(255, 255, 255, .1) 58% 66%, transparent 66% 100%);
  box-shadow: inset 2px 0 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(0, 0, 0, .6);
}
#hero-status-pill {
  position: absolute;
  right: 4px;
  bottom: 6px;
  z-index: 1;
  font-size: 18px;
  color: var(--phos);
  background: rgba(0, 0, 0, .55);
}
#hero-status-pill.sold, #hero-status-pill[data-status="SOLD"] { color: var(--blood-hi); }
#hero-status-pill.reserved, #hero-status-pill[data-status="RESERVED"] { color: var(--bone); }
.jewel-band {
  grid-column: 2;
  display: flex;
  align-items: center;
  padding: 2px 3px 0;
  font-family: var(--f-vt);
  font-size: 18px;
  line-height: 1;
  letter-spacing: .04em;          /* "DISC 1/5 · 01" (13 chars) fits the 112 px band */
  color: var(--text-mid);
  background: #000;
  border-top: 1px solid #2E2A2D;
  white-space: nowrap;
  overflow: hidden;
}

.hero-meta-col { display: contents; }
.hero-kicker {
  grid-area: kicker;
  min-width: 0;
  font-family: var(--f-vt);
  font-size: 18px;
  line-height: 18px;
  letter-spacing: .04em;
  color: var(--text-mid);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#hero-beat-title {
  grid-area: title;
  justify-self: start;
  max-width: 100%;
  font-family: var(--f-title);
  font-size: 48px;
  line-height: 46px;
  padding: 0 3px;
  margin-left: -3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-stats { grid-area: stats; align-self: end; max-width: 440px; }
.hero-quick-actions {
  grid-area: actions;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 0;
  margin-top: 6px;
}
.hero-quick-actions .ps1-btn { flex: none; }
.hero-quick-actions #hero-btn-play { min-width: 104px; }
.hero-quick-actions #hero-btn-lease { flex: 1 1 auto; min-width: 0; max-width: 300px; }
#hero-btn-lease .lbl { overflow: hidden; text-overflow: ellipsis; }
.hero-quick-actions .small { min-height: 34px; min-width: 34px; }
.hero-quick-actions .small { color: var(--text-mid); }
.hero-quick-actions .small:hover { color: var(--text-hi); }

/* rack tabs */
.rack-tabs {
  flex: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  background: #000;
  border-bottom: 2px solid #000;
}
.rack-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 8px;
  font-family: var(--f-vt);
  font-size: 22px;
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
  color: var(--text-mid);
  background: var(--stone-1);
  border-right: 2px solid #000;
  box-shadow: inset 0 2px 0 var(--stone-3);
}
.rack-tab:last-child { border-right: 0; }
.rack-tab .lbl { padding-top: 2px; overflow: hidden; text-overflow: ellipsis; }
.rack-tab .i { color: var(--bone-dark); }
.rack-tab:hover { color: var(--text-hi); background: var(--stone-2); }
.rack-tab.active { color: var(--void); background: var(--bone); box-shadow: inset 0 2px 0 #fff; }
.rack-tab.active .i { color: var(--void); }

.rack-view { display: none; flex: 1 1 auto; min-height: 0; flex-direction: column; }
.rack-view.active { display: flex; }

/* catalog toolbar */
.catalog-toolbar {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 8px;
}
.filter-pills {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.filter-pills::-webkit-scrollbar { display: none; }
.filter-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 5px 0 6px;
  font-family: var(--f-vt);
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--text-mid);
  background: var(--stone-1);
  border: 2px solid var(--stone-3);
}
.filter-pill .f-lbl { padding-top: 2px; }
.filter-pill .cnt {
  min-width: 14px;
  padding: 2px 2px 0;
  text-align: center;
  color: var(--text-hi);
  background: #000;
}
.filter-pill:hover { color: var(--text-hi); border-color: var(--bone-mid); }
.filter-pill.active { color: var(--void); background: var(--bone); border-color: #000; }
.filter-pill.active .cnt { color: var(--bone); background: var(--void); }

.search-row { display: flex; align-items: center; gap: 8px; }
.search-field {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 8px;
  color: var(--text-mid);
  background: #050406;
  border: 2px solid;
  border-color: #000 var(--stone-3) var(--stone-3) #000;
}
.search-field:focus-within { border-color: var(--bone-mid) var(--bone) var(--bone) var(--bone-mid); color: var(--text-hi); }
#catalog-search {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 2px 0 0;
  font-family: var(--f-vt);
  font-size: 22px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-hi);
  background: transparent;
  border: 0;
  outline: none;
  caret-color: var(--phos);
  -webkit-appearance: none;
  appearance: none;
}
#catalog-search::placeholder { color: var(--text-low); opacity: 1; letter-spacing: .02em; }
#catalog-search::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
#catalog-sort, #lic-beat {
  height: 36px;
  padding: 2px 30px 0 8px;
  font-family: var(--f-vt);
  font-size: 18px;
  color: var(--text-hi);
  background: var(--stone-1) var(--chev) right 8px center / 14px 14px no-repeat;
  border: 2px solid var(--stone-3);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  image-rendering: pixelated;
  cursor: pointer;
}
#catalog-sort option, #lic-beat option { background: #0C0A0E; color: var(--text-hi); }
/* the sort picker is a raised PS1 menu button next to the sunken NAME ENTRY well */
#catalog-sort {
  flex: none;
  max-width: 150px;
  border-color: #5A4F57 #08070A #08070A #5A4F57;
  box-shadow: 0 0 0 1px #000;
}
#catalog-sort:hover { color: #fff; border-color: var(--bone) var(--bone-dark) var(--bone-dark) var(--bone); }
#catalog-sort:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }
#mc-blocks-count {
  flex: none;
  font-family: var(--f-vt);
  font-size: 18px;
  letter-spacing: .04em;
  color: var(--phos);
  white-space: nowrap;
}

#trust-strip {
  flex: none;
  padding: 3px 12px 4px;
  font-family: var(--f-vt);
  font-size: 18px;
  letter-spacing: .06em;
  color: var(--text-mid);
  border-top: 1px solid var(--stone-2);
  border-bottom: 1px solid #000;
  background: #08070A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* the GC line (+ '2 PRODUCERS') packs to v3's narrow-rack spacing before it drops the producer count (app.js fitTrust) */
#trust-strip.is-tight { letter-spacing: .03em; }

/* memory card list (§4.13 rows) */
#memory-card-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 10px 12px 22px;
}
#memory-card-list:focus-visible { outline: 2px solid var(--bone-mid); outline-offset: -2px; }

.mc-block-item {
  position: relative;
  display: grid;
  grid-template-columns: 26px 52px minmax(0, 1fr) auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 2px;
  min-height: 64px;
  margin-bottom: 4px;
  padding: 6px 8px 6px 6px;
  color: var(--text);
  text-decoration: none;
  background: #151119;
  border: 2px solid;
  border-color: #2E2731 #060507 #060507 #2E2731;
  cursor: pointer;
}
.mc-block-item:hover { background: #1D1822; border-color: var(--bone-dark) #060507 #060507 var(--bone-dark); }
.mc-idx {
  grid-column: 1;
  grid-row: 1 / span 2;
  justify-self: end;
  font-family: var(--f-vt);
  font-size: 22px;
  color: var(--text-low);
}
.mc-icon {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 48px;
  height: 48px;
  margin: 0 2px;
  image-rendering: pixelated;
  background: #000;
  box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--stone-3);
}
.mc-info {
  grid-column: 3;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.mc-title {
  font-family: var(--f-vt);
  font-size: 28px;
  line-height: 24px;
  letter-spacing: .02em;
  color: var(--text-hi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mc-title.is-long { font-size: 22px; }   /* app.js fitRowTitles(): a name that would end in "…" on a narrow rack */
.mc-sub-line {
  font-family: var(--f-vt);
  font-size: 18px;
  line-height: 18px;
  color: var(--text-mid);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mc-eq {
  grid-column: 4;
  grid-row: 1 / span 2;
  display: none;
  align-items: flex-end;
  gap: 2px;
  height: 22px;
}
.mc-eq i {
  display: block;
  width: 4px;
  height: calc(3px + var(--b, .2) * 19px);
  background: var(--blood-hi);
}
.mc-eq i:nth-child(2) { height: calc(3px + var(--m, .2) * 19px); }
.mc-eq i:nth-child(3) { height: calc(3px + var(--h, .2) * 19px); }
.mc-block-item.is-playing .mc-eq { display: flex; }
.mc-price {
  grid-column: 5;
  grid-row: 1;
  justify-self: end;
  align-self: end;
  font-family: var(--f-vt);
  font-size: 22px;
  line-height: 20px;
  color: var(--gold-hi);
  white-space: nowrap;
}
.mc-block-item .btn-RowLease {
  grid-column: 5;
  grid-row: 2;
  justify-self: end;
  align-self: start;
  min-height: 28px;
  padding: 0 8px 0 6px;
  font-size: 18px;
  gap: 6px;
}
.mc-block-item .stamp {
  position: absolute;
  left: 40px;
  top: 50%;
  margin-top: -12px;
  z-index: 1;
  background: rgba(9, 8, 10, .7);
  pointer-events: none;
}
.mc-block-item .stamp--sold { transform: rotate(-12deg); }
.mc-block-item .stamp--hold { top: auto; bottom: 3px; margin-top: 0; transform: rotate(-6deg); }
.mc-similar {
  grid-column: 3 / span 3;
  grid-row: 2;
  justify-self: start;
  font-family: var(--f-vt);
  font-size: 18px;
  line-height: 18px;
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}
.mc-similar:hover { color: #fff; background: var(--stone-3); }
.mc-block-item.is-sold .mc-info { grid-row: 1; }
.mc-block-item.is-sold .mc-title { color: var(--text-mid); }
.mc-block-item.is-sold .mc-price { color: var(--blood-hi); grid-row: 1; align-self: center; }

/* active row = bone-inverted selection + glove */
.mc-block-item.is-active {
  color: var(--void);
  background: var(--bone);
  border-color: #fff var(--bone-mid) var(--bone-mid) #fff;
}
.mc-block-item.is-active .mc-title { color: var(--void); }
.mc-block-item.is-active .mc-sub-line, .mc-block-item.is-active .mc-idx { color: #3E362D; }
.mc-block-item.is-active .mc-price { color: var(--gold-ink); }
.mc-block-item.is-active.is-sold .mc-price { color: #8E140C; }
.mc-block-item.is-active .mc-icon { box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--void); }
.mc-block-item.is-active .mc-eq i { background: var(--blood); }
.mc-block-item.is-active .mc-similar { color: var(--void); }
.mc-block-item.is-active::before { left: -22px; }

/* keyboard list cursor: blinking bone/gold frame */
.mc-block-item.is-cursor { outline: 2px solid var(--gold-hi); outline-offset: 2px; animation: cursor-blink 1s steps(1) infinite; }
@keyframes cursor-blink { 50% { outline-color: var(--bone); } }

/* free block rows (S12 COULD) */
.mc-block-item.is-free { background: transparent; border: 2px dashed var(--stone-3); color: var(--text-low); }
.mc-block-item.is-free .mc-title { color: var(--text-mid); font-size: 22px; }
.mc-icon--empty { display: block; background: transparent; box-shadow: none; border: 2px dashed var(--stone-3); }
.mc-wave { grid-column: 4; grid-row: 1 / span 2; width: 48px; height: 8px; image-rendering: pixelated; }

/* empty search state (D1 writes .mc-empty) */
.mc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 16px;
  text-align: center;
  font-family: var(--f-vt);
  font-size: 22px;
  color: var(--text-mid);
  border: 2px dashed var(--stone-3);
}

/* ---------- 14. TAPE LAB = GC-77 HARDWARE ---------- */
#view-tapelab { overflow-y: auto; }
.hw {
  position: relative;
  margin: 10px 12px 12px;
  padding: 12px 22px 14px;
  color: #2A2520;
  background-color: #CBC2AB;
  background-image: var(--toner, none);
  border: 2px solid;
  border-color: #E9E2CE #6F6656 #6F6656 #E9E2CE;
  border-radius: 4px;
  box-shadow: 0 0 0 1px #000, 4px 4px 0 1px #000;
}
.hw::before, .hw::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, transparent 0 40%, #4A4236 40% 60%, transparent 60%) , #9C937F;
  border: 1px solid #4A4236;
  border-radius: 50%;
}
.hw::after { left: auto; right: 5px; }
.hw-top {
  display: grid;
  /* the LCD always keeps its longest word (BYPASSED, VARISPEED); on a narrow rack the badge text wraps
     instead. Where both fit this lays out exactly like "auto 1fr". */
  grid-template-columns: minmax(0, auto) minmax(min-content, 1fr);
  gap: 12px;
  align-items: stretch;
  padding-bottom: 12px;
  border-bottom: 2px solid #8E8573;
  box-shadow: 0 1px 0 #EAE3D0;
}
.hw-badge { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.hw-brand {
  font-family: var(--f-pixel);
  font-size: 16px;
  line-height: 16px;
  color: #1A1612;
}
.hw-model, .hw-label, .hw-note {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #4A4236;
}
.hw-model { text-wrap: balance; }   /* on a narrow rack the badge folds as "RHYTHM SAMPLER · / TAPE DECK" */
.hw-note { font-weight: 400; letter-spacing: .02em; text-transform: none; font-size: 12px; }
.hw-lcd {
  min-height: 52px;
  padding: 6px 10px 4px;
  font-family: var(--f-vt);
  font-size: 22px;
  line-height: 20px;
  letter-spacing: .04em;
  white-space: pre-line;
  text-transform: uppercase;
  color: #11210E;
  background-color: #8FB35A;
  background-image: var(--bayer, none);
  border: 3px solid #26231E;
  box-shadow: inset 2px 2px 0 #5E7D36, 0 0 0 1px #E9E2CE;
  overflow: hidden;
  image-rendering: pixelated;
}
body.is-screwed .hw-lcd { color: #1C0A2C; }

.hw-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 2px solid #8E8573;
  box-shadow: 0 1px 0 #EAE3D0;
}
.footswitch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 14px 0 12px;
  font-family: var(--f-vt);
  font-size: 22px;
  line-height: 1;
  color: #E9E2CE;
  background: #2B2724;
  border: 2px solid;
  border-color: #5B5550 #0D0B0A #0D0B0A #5B5550;
  border-radius: 4px;
  box-shadow: 0 3px 0 #0D0B0A, 0 0 0 1px #000;
}
.footswitch:active { transform: translateY(2px); box-shadow: 0 1px 0 #0D0B0A, 0 0 0 1px #000; }
.footswitch .lbl { padding-top: 2px; white-space: nowrap; }
.led {
  width: 10px;
  height: 10px;
  flex: none;
  background: #3B0805;
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15);
}
.footswitch.active .led { background: var(--blood-hi); box-shadow: inset 1px 1px 0 #FFB3AA, 0 0 0 1px #6E1008; }

.hw-section { padding: 9px 0 8px; border-bottom: 2px solid #8E8573; box-shadow: 0 1px 0 #EAE3D0; }
.hw-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.hw-readout {
  min-width: 64px;
  padding: 2px 6px 0;
  text-align: right;
  font-family: var(--f-vt);
  font-size: 22px;
  line-height: 20px;
  color: #11210E;
  background: #8FB35A;
  border: 2px solid #26231E;
  white-space: nowrap;
}
body.is-screwed #tape-speed-val { color: #F3E8FF; background: var(--purple); }

/* faders: slot + cap; pitch fader has a centre detent at 1.00 (63.6 % of 0.65..1.20) */
.fader { position: relative; padding: 2px 0; }
.hw-range {
  display: block;
  width: 100%;
  height: 30px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.hw-range::-webkit-slider-runnable-track {
  height: 10px;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), #26231E calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) 0 0 / 100% 100%,
    #1B1815;
  border: 2px solid;
  border-color: #6F6656 #F1EBDA #F1EBDA #6F6656;
}
.fader--pitch .hw-range::-webkit-slider-runnable-track {
  background:
    linear-gradient(90deg, transparent calc(63.6% - 2px), #C99A2E calc(63.6% - 2px) calc(63.6% + 2px), transparent calc(63.6% + 2px)),
    #1B1815;
}
.hw-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 28px;
  margin-top: -11px;
  background: linear-gradient(180deg, #3A3530 0 44%, #E9E2CE 44% 56%, #3A3530 56% 100%);
  border: 2px solid;
  border-color: #6A625A #0D0B0A #0D0B0A #6A625A;
  box-shadow: 0 0 0 1px #000;
}
.hw-range::-moz-range-track { height: 10px; background: #1B1815; border: 2px solid #6F6656; }
.hw-range::-moz-range-thumb { width: 14px; height: 24px; border-radius: 0; background: #3A3530; border: 2px solid #0D0B0A; }
.hw-range:focus-visible { outline: 2px solid #1A1612; outline-offset: 2px; }
.fader-scale {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-top: 2px;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 600;
  color: #4A4236;
}
.fader-scale .detent { position: absolute; left: 63.6%; margin-left: -2ch; color: var(--gold-ink); }

.preset-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
/* narrow racks (900-1199 desktop, phones): "MEMPHIS .84" / "CLEAN 1.00" overflowed 4-across buttons */
@media (min-width: 900px) and (max-width: 1199px), (max-width: 599px) {
  .preset-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.btn-speed-preset {
  min-height: 34px;
  padding: 2px 4px 0;
  font-family: var(--f-vt);
  font-size: 18px;
  line-height: 1;
  white-space: nowrap;
  color: #E9E2CE;
  background: #3A3530;
  border: 2px solid;
  border-color: #6A625A #0D0B0A #0D0B0A #6A625A;
  border-radius: 3px;
  box-shadow: 0 2px 0 #0D0B0A;
}
.btn-speed-preset:active { transform: translateY(1px); box-shadow: none; }
.btn-speed-preset.active { color: var(--void); background: var(--bone); border-color: #fff var(--bone-mid) var(--bone-mid) #fff; }
.btn-speed-preset[data-speed="0.72"].active, .btn-speed-preset[data-speed="0.84"].active { color: #F3E8FF; background: var(--purple); border-color: var(--purple-hi) var(--purple-dark) var(--purple-dark) var(--purple-hi); }

.hw-twin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
/* with FILTER at max and GRIT at 0 the two thumbs met in the 14 px gap and read as one fader: a wider gap + a groove between them */
.hw-twin .hw-cell { display: flex; flex-direction: column; justify-content: space-between; }
.hw-twin .hw-label { white-space: nowrap; }
.hw-twin .hw-label-row { flex-wrap: wrap; row-gap: 4px; }
.hw-twin .hw-readout { margin-left: auto; }
.hw-twin .hw-cell + .hw-cell { position: relative; }
.hw-twin .hw-cell + .hw-cell::before { content: ""; position: absolute; left: -13px; top: 2px; bottom: 2px; width: 2px; background: #6F6656; box-shadow: 1px 0 0 #F1EBDA; }

.hw-pads {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding-top: 12px;
}
.mpc-pad {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  height: 64px;
  padding: 7px 7px 6px;
  text-align: left;
  color: #CFC7B4;
  background: #55504A;
  border: 2px solid;
  border-color: #7A746C #2B2724 #2B2724 #7A746C;
  border-radius: 6px;
  box-shadow: 0 0 0 2px #26231E, 0 4px 0 2px #1A1715;
}
.mpc-pad:active, .mpc-pad.pad-hit {
  transform: translateY(2px);
  color: #FFF1EC;
  background: var(--blood);
  border-color: #EF6A5F #520B06 #520B06 #EF6A5F;
  box-shadow: 0 0 0 2px #26231E, 0 2px 0 2px #1A1715;
}
.pad-key { font-family: var(--f-pixel); font-size: 16px; line-height: 16px; }
.pad-name { font-family: var(--f-vt); font-size: 18px; line-height: 16px; white-space: nowrap; }
@media (max-width: 374px) { .mpc-pad { padding-left: 4px; padding-right: 3px; } .pad-name { letter-spacing: 0; } }

/* ---------- 15. LICENSES = J-CARD ---------- */
#view-licenses { overflow-y: auto; padding: 12px; gap: 12px; }
.lic-head { display: flex; align-items: center; gap: 10px; }
.lic-pick { display: flex; align-items: center; gap: 10px; width: 100%; }
.lic-pick-lbl { font-family: var(--f-pixel); font-size: 8px; color: var(--text-mid); }
#lic-beat { flex: 1 1 auto; min-width: 0; }

#license-table-root:empty { display: none; }
/* J-card: paper insert, black title band, spine fold on the left. Each tier is a 2-line grid row:
   [TIER + desc ......] [PRICE] [ADD]
   [FILES] [STREAMS]    [PRICE] [ADD]                                 (thead kept for AT, hidden) */
.lic-table.jcard {
  position: relative;
  display: block;
  width: 100%;
  color: var(--paper-ink);
  background-color: var(--paper);
  background-image: var(--toner, none);
  border-left: 14px solid #15110E;
  box-shadow: 0 0 0 1px #000, 4px 4px 0 1px #000, inset 1px 0 0 #4A4236;
  font-family: var(--f-vt);
  font-size: 18px;
  line-height: 18px;
}
.lic-table.jcard caption {
  display: block;
  padding: 8px 12px 6px;
  text-align: left;
  font-family: var(--f-vt);
  font-size: 22px;
  letter-spacing: .04em;
  color: var(--bone);
  background: #000;
  border-bottom: 3px solid var(--blood);
}
.lic-table.jcard thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.lic-table.jcard tbody { display: block; }
.lic-table.jcard tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) auto auto;
  grid-template-areas: "tier tier price add" "files streams price add";
  align-items: center;
  gap: 4px 12px;
  padding: 10px 12px 10px 12px;
  border-bottom: 1px dashed #9A907B;
}
.lic-table.jcard tr:last-child { border-bottom: 0; }
.lic-table.jcard td { display: block; min-width: 0; padding: 0; border: 0; }
.lic-table.jcard td:nth-child(1) { grid-area: tier; display: flex; flex-wrap: wrap; align-items: center; font-size: 22px; line-height: 20px; color: var(--paper-ink); }
.lic-table.jcard td:nth-child(1) small { flex: 1 0 100%; order: 2; }
.lic-table.jcard td:nth-child(2) { grid-area: files; }
.lic-table.jcard td:nth-child(3) { grid-area: streams; }
.lic-table.jcard td:nth-child(4) { grid-area: price; }
.lic-table.jcard td:nth-child(5) { grid-area: add; justify-self: end; }
.lic-table.jcard td:nth-child(2)::before, .lic-table.jcard td:nth-child(3)::before {
  content: attr(data-label);
  display: block;
  margin-bottom: 2px;
  font-family: var(--f-pixel);
  font-size: 8px;
  line-height: 8px;
  color: var(--paper-mid);
}
/* licence small print: 13 px, darker ink, and a 1 px paper knock-out round every glyph so the toner
   specks never cross the letters (same paper, same speckle everywhere else) */
.lic-table.jcard td small {
  display: block;
  margin-top: 3px;
  font-family: var(--f-mono);
  font-size: 13px;
  line-height: 1.35;
  color: #3E362D;
  text-shadow: 1px 0 0 var(--paper), -1px 0 0 var(--paper), 0 1px 0 var(--paper), 0 -1px 0 var(--paper);
}
.lic-table.jcard .lic-price { font-size: 28px; line-height: 24px; color: var(--gold-ink); white-space: nowrap; text-align: right; }
.lic-table.jcard .ps1-btn { min-height: 32px; font-size: 18px; padding: 0 10px; }
@media (pointer: coarse) { .lic-table.jcard .ps1-btn { min-height: 44px; } }
.lic-table.jcard tr.is-in-card td:first-child::after {
  content: "IN CARD";
  display: inline-block;
  margin-left: 8px;
  padding: 2px 4px 1px;
  font-family: var(--f-pixel);
  font-size: 8px;
  line-height: 9px;
  vertical-align: middle;
  color: #1A0F02;
  background: var(--gold-hi);
}
.lic-table.jcard tr[data-tier="exclusive"] .lic-price { color: var(--blood); }
.lic-table.jcard a:not(.ps1-btn) { color: var(--blood); }
.lic-note {
  font-family: var(--f-mono);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-mid);
}

/* ---------- 16. DOOM STATUS BAR ---------- */
#doom-status-bar {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: 104px 112px 104px 88px 150px 52px minmax(320px, 1fr);
  grid-template-rows: minmax(0, 1fr);
  height: var(--bar-h);
  min-height: 0;
  padding: 3px 3px 3px;
  background-color: var(--stone-2);
  background-image: var(--stone, none);
  border-top: 3px solid #000;
  box-shadow: inset 0 1px 0 var(--stone-4);
  image-rendering: pixelated;
}
.doom-cell {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 6px;
  background: rgba(0, 0, 0, .3);
  border: 2px solid;
  border-color: #0B090B #554A51 #554A51 #0B090B;
}
.doom-cell-label {
  font-family: var(--f-vt);
  font-size: 18px;
  line-height: 14px;
  letter-spacing: .1em;
  color: #A3998A;
  text-shadow: 1px 1px 0 #000;
  white-space: nowrap;
}

/* DOOM numerals: hard-stop red, gold for money, purple when screwed */
.doom-num {
  display: inline-block;
  font-family: var(--f-pixel);
  font-size: 24px;
  line-height: 26px;
  white-space: nowrap;
  background-image: linear-gradient(180deg, #FFB49C 0 19%, #F2503A 19% 46%, #C41B10 46% 73%, #7A0C06 73% 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(2px 2px 0 #000);
}
.doom-num.gold, body.cheat-god .doom-num {
  background-image: linear-gradient(180deg, #FFF0B8 0 19%, #F7CB5C 19% 46%, #C99A2E 46% 73%, #6B4509 73% 100%);
}
body.is-screwed #st-bpm, #st-bpm.screwed {
  background-image: linear-gradient(180deg, #E6CCFF 0 19%, #B565FF 19% 46%, #7B2CBF 46% 73%, #3B1A5A 73% 100%);
}

.st-arms .arms-grid { display: grid; grid-template-columns: repeat(2, 30px); gap: 3px 6px; }
.arms-key {
  height: 20px;
  font-family: var(--f-pixel);
  font-size: 16px;
  line-height: 16px;
  color: #8D8478;
  text-shadow: 1px 1px 0 #000;
  background: rgba(0, 0, 0, .35);
  border: 1px solid #000;
}
.arms-key .lbl { display: inline-block; padding-top: 2px; }
.arms-key:hover { color: var(--text-hi); }
.arms-key.lit { color: #FFE3DF; background: var(--blood); }

.doom-mugshot-cell { padding: 0; background: #070607; }
#doom-face-canvas {
  width: 64px;
  height: 64px;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  background: #1A1517;
  box-shadow: 0 0 0 2px #000, 0 0 0 3px #3A3238;
}

.st-mc2 { gap: 3px; }
#btn-doom-checkout { min-height: 24px; padding: 0 8px 0 5px; font-size: 18px; gap: 5px; }
#btn-doom-checkout::before { width: 16px; height: 16px; background-size: 16px 16px; }

.st-keys { gap: 3px; padding: 4px 2px; }
.key-slot {
  display: block;
  width: 28px;
  height: 20px;
  background: #050405 var(--key-dim) center / 16px 16px no-repeat;
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #3A3238;
  image-rendering: pixelated;
}
.key-slot.is-lit { background-image: var(--key-lit); background-color: #1E1504; }
.key-slot.is-blink { animation: key-blink .5s steps(1) infinite; }
@keyframes key-blink { 50% { background-image: var(--key-dim); background-color: #050405; } }

/* CD player */
.st-cd {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-rows: 32px minmax(0, 1fr);
  grid-template-areas: "btns marquee vol time" "wave wave wave wave";
  align-items: stretch;
  gap: 4px 6px;
  padding: 4px 6px 5px;
}
.transport-btns { grid-area: btns; display: flex; gap: 4px; }
.transport-btns .ps1-btn { min-height: 32px; height: 32px; box-shadow: 0 0 0 1px #000; }
.transport-btns .icon-btn { width: 32px; min-width: 32px; }
#btn-transport-play { min-width: 92px; padding: 0 10px 0 8px; gap: 6px; }
#btn-transport-play .u-pause { display: none; }
#btn-transport-play[data-state="pause"] .u-play { display: none; }
#btn-transport-play[data-state="pause"] .u-pause { display: inline; }
#st-marquee {
  grid-area: marquee;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 2px 8px 0;
  font-family: var(--f-vt);
  font-size: 22px;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--phos);
  background: #040805;
  border: 2px solid;
  border-color: #000 #2D3A2C #2D3A2C #000;
  white-space: nowrap;
}
#st-marquee > span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#st-marquee.is-overflowing > span {
  overflow: visible;
  text-overflow: clip;
  padding-left: 100%;
  animation: marquee 14s steps(140) infinite;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
body.is-screwed #st-marquee { color: var(--purple-hi); }
#transport-time {
  grid-area: time;
  display: flex;
  align-items: center;
  padding: 2px 8px 0;
  font-family: var(--f-vt);
  font-size: 22px;
  line-height: 1;
  letter-spacing: .06em;
  color: var(--phos);
  background: #040805;
  border: 2px solid;
  border-color: #000 #2D3A2C #2D3A2C #000;
  white-space: nowrap;
}
.wf-wrap { grid-area: wave; position: relative; min-height: 0; }
#waveform-scrubber {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #050405;
  border: 1px solid #000;
  box-shadow: inset 0 0 0 1px #2A242C;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  cursor: ew-resize;
  touch-action: none;
}
#waveform-scrubber:focus-visible { outline: 2px solid var(--bone); outline-offset: 1px; }
#wf-tip {
  position: absolute;
  left: var(--x, 0);
  bottom: calc(100% + 6px);
  z-index: 5;
  margin-left: -24px;
  min-width: 48px;
  padding: 2px 6px 0;
  text-align: center;
  font-family: var(--f-vt);
  font-size: 18px;
  line-height: 18px;
  color: var(--phos);
  background: #040805;
  border: 1px solid var(--phos-dark);
  pointer-events: none;
}

/* ---------- 17. MODALS ---------- */
.ps1-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background-color: rgba(5, 4, 6, .74);
  background-image: var(--bayer, none);
  image-rendering: pixelated;
}
.ps1-modal-backdrop.open { display: flex; }
.ps1-modal {
  position: relative;
  width: min(760px, 100%);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 14px 18px 16px;
}
.modal-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "kicker close" "title close";
  align-items: center;
  gap: 2px 12px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--stone-3);
}
#license-modal-kicker, .modal-kicker {
  grid-area: kicker;
  font-family: var(--f-vt);
  font-size: 18px;
  letter-spacing: .08em;
  color: var(--text-mid);
}
.modal-head h2 {
  grid-area: title;
  font-family: var(--f-pixel);
  font-size: 16px;
  line-height: 22px;
  color: var(--text-hi);
}
.btn-close-modal { grid-area: close; }

/* shop menu */
.shop { width: min(820px, 100%); }
#license-modal-beat {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 12px -3px;
  padding: 0 3px;
  font-family: var(--f-title);
  font-size: 48px;
  line-height: 48px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shop-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; align-items: start; }
#license-modal-tiers { display: flex; flex-direction: column; gap: 6px; padding-left: 20px; }
#license-modal-tiers .tier-row { min-height: 52px; padding-top: 7px; padding-bottom: 6px; }
#license-modal-detail {
  min-height: 160px;
  padding: 12px 14px;
  font-family: var(--f-vt);
  font-size: 18px;
  line-height: 20px;
  color: var(--text);
  background: #07060A;
  border: 2px solid;
  border-color: #000 var(--stone-3) var(--stone-3) #000;
}
#license-modal-detail:empty::before { content: "SELECT A TIER."; color: var(--text-low); }
#license-modal-detail h3, #license-modal-detail .d-title { font-family: var(--f-vt); font-size: 28px; line-height: 26px; color: var(--text-hi); margin-bottom: 6px; }
#license-modal-detail .d-price { font-size: 40px; line-height: 36px; color: var(--gold-hi); }
#license-modal-detail ul { margin: 8px 0 0; padding: 0; list-style: none; }
#license-modal-detail li { padding: 3px 0 2px 14px; position: relative; }
#license-modal-detail li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; background: var(--bone-mid); }
#license-modal-detail small, #license-modal-detail p { display: block; margin-top: 8px; font-family: var(--f-mono); font-size: 13px; line-height: 1.45; color: var(--text-mid); }

/* checkout */
.checkout {
  width: min(900px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  grid-template-areas:
    "head head"
    "grid slip"
    "detail slip"
    "items slip"
    "summary slip"
    "completer slip"
    "field slip"
    "ctas ctas"
    "sent sent"
    "quick quick";
  grid-template-rows: auto auto auto auto auto auto 1fr auto auto auto;
  column-gap: 18px;
}
.checkout .modal-head { grid-area: head; }
/* cells are 64 px wherever 5 fit (>= 390 px phones and up); narrower phones shrink them square */
#mc-grid { grid-area: grid; display: grid; grid-template-columns: repeat(5, minmax(0, 64px)); gap: 6px; margin-bottom: 12px; }
#mc-detail { grid-area: detail; margin-bottom: 12px; }
#checkout-items-list { grid-area: items; display: flex; flex-direction: column; gap: 4px; }
#checkout-summary { grid-area: summary; margin-top: 10px; }
#bundle-completer { grid-area: completer; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.checkout .field { grid-area: field; align-self: end; margin-top: 12px; }
.checkout .slip { grid-area: slip; }
.checkout-ctas { grid-area: ctas; }
#checkout-sent { grid-area: sent; }
#btn-quick-save { grid-area: quick; justify-self: center; margin-top: 12px; }

/* S13 (COULD): 5x3 memory-card block grid + detail pane + bundle completer chips */
.mc-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  max-width: 64px;
  height: auto;
  aspect-ratio: 1;
  background: #07060A;
  border: 2px solid;
  border-color: #000 var(--stone-3) var(--stone-3) #000;
}
.mc-cell canvas { width: 32px; height: 32px; image-rendering: pixelated; opacity: .25; }
.mc-cell-tier { font-family: var(--f-pixel); font-size: 8px; line-height: 8px; color: var(--text-low); }
.mc-cell.is-filled { background: #151119; border-color: var(--bone-mid) #060507 #060507 var(--bone-mid); }
.mc-cell.is-filled canvas { opacity: 1; }
.mc-cell.is-filled .mc-cell-tier { color: var(--gold-hi); }
.mc-cell.is-gift .mc-cell-tier { color: var(--phos); }
.mc-cell.is-cursor { outline: 2px solid var(--gold-hi); outline-offset: 1px; animation: cursor-blink 1s steps(1) infinite; }
#mc-detail { padding: 8px 10px; font-family: var(--f-vt); font-size: 18px; color: var(--text); background: #07060A; border: 1px solid var(--stone-3); }
/* bundle completer: 2 records in the card -> up to 3 gold "price sticker" chips for the free 3rd */
#bundle-completer {
  padding: 8px 8px 9px;
  background: #0E0B06;
  border: 1px dashed var(--gold-dark);
}
#bundle-completer::before {
  content: "PICK A 3RD · CHEAPEST OF 3 IS FREE";
  flex: 0 0 100%;
  font-family: var(--f-pixel);
  font-size: 8px;
  line-height: 10px;
  letter-spacing: .04em;
  color: var(--gold);
}
#bundle-completer .bc-chip {
  min-height: 30px;
  max-width: 100%;
  padding: 0 9px;
  font-size: 18px;
  letter-spacing: .04em;
  color: var(--gold-hi);
  background: #1E1606;
  border-color: var(--gold-hi) #3D2904 #3D2904 var(--gold-hi);
  box-shadow: 0 0 0 1px #000, 2px 2px 0 1px #000;
}
#bundle-completer .bc-chip .lbl { overflow: hidden; text-overflow: ellipsis; }
#bundle-completer .bc-chip:hover,
#bundle-completer .bc-chip:focus-visible { color: #1A0F02; background: var(--gold-hi); border-color: #FFF1C2 #6B4509 #6B4509 #FFF1C2; }
.cart-item-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 6px 4px 8px;
  font-family: var(--f-vt);
  font-size: 18px;
  color: var(--text);
  background: #100C13;
  border: 2px solid;
  border-color: #2E2731 #060507 #060507 #2E2731;
}
.cart-item-row .ci-block { font-family: var(--f-vt); font-size: 22px; color: var(--text-low); }
.cart-item-row .ci-icon { width: 32px; height: 32px; image-rendering: pixelated; background: #000; }
.cart-item-row .ci-name { min-width: 0; font-size: 22px; color: var(--text-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-item-row .ci-tier { color: var(--text-mid); white-space: nowrap; }
.cart-item-row .ci-price { font-size: 22px; color: var(--gold-hi); white-space: nowrap; }
.cart-item-row .btn-remove-cart { min-height: 30px; font-size: 18px; padding: 0 8px; }
/* the free record: its list price is struck out (FREE in the tier text carries the meaning) */
.cart-item-row.is-gift .ci-price { color: var(--text-mid); text-decoration: line-through; text-decoration-thickness: 2px; }
.co-empty {
  padding: 18px 12px;
  text-align: center;
  font-family: var(--f-vt);
  font-size: 22px;
  color: var(--text-mid);
  border: 2px dashed var(--stone-3);
}
.sum-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 12px;
  padding: 3px 4px;
  font-family: var(--f-vt);
  font-size: 22px;
  color: var(--text);
}
/* narrow slip: a long value drops whole onto its own right-aligned line instead of breaking mid-phrase */
.sum-row > span { white-space: nowrap; }
.sum-row > span:last-child { margin-left: auto; text-align: right; }
.sum-row.sum-bundle { color: var(--gold-hi); }
.sum-row.sum-total {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 2px solid var(--stone-3);
  font-size: 28px;
  color: var(--gold-hi);
}
.field { display: flex; flex-direction: column; gap: 4px; }
.field-lbl { font-family: var(--f-pixel); font-size: 8px; line-height: 10px; color: var(--text-mid); }
#buyer-artist {
  height: 38px;
  padding: 2px 10px 0;
  font-family: var(--f-vt);
  font-size: 22px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-hi);
  background: #050406;
  border: 2px solid;
  border-color: #000 var(--stone-3) var(--stone-3) #000;
  border-radius: 0;
  caret-color: var(--phos);
}
#buyer-artist::placeholder { color: var(--text-low); opacity: 1; }
#buyer-artist:focus { border-color: var(--bone-mid) var(--bone) var(--bone) var(--bone-mid); outline: none; }

/* the photocopied order slip with a torn zigzag bottom */
.slip {
  position: relative;
  min-height: 160px;
  margin-bottom: 8px;
  padding: 14px 16px 26px;
  font-family: var(--f-mono);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--paper-ink);
  background-color: var(--paper);
  background-image: var(--toner, none);
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 18px 9px repeat-x;
  mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 18px 9px repeat-x;
  -webkit-user-select: text;
  user-select: text;
}
.slip:empty::before { content: "MEMORY CARD 2 IS EMPTY."; color: var(--paper-mid); }

.checkout-ctas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--stone-3);
  /* the send buttons stay pinned to the bottom edge of the scrolling modal (short laptops, phones,
     long carts): same block, same rule, on the window's own bottom colour */
  position: sticky;
  bottom: 0;
  z-index: 1;
  background-color: #0B080D;
  box-shadow: 0 16px 0 #0B080D;   /* also covers the modal's bottom padding strip while stuck */
}
.checkout-ctas .cta-main {
  grid-column: 1 / -1;
  min-height: 52px;
  font-size: 28px;
  gap: 12px;
}
.checkout-ctas .cta-main .i { width: 24px; height: 24px; }
.checkout-ctas .ps1-btn { min-height: 38px; }
#btn-format-card { font-size: 18px; padding: 0 10px; }
.checkout-ctas a[aria-disabled="true"] { pointer-events: none; }
#checkout-sent {
  margin-top: 12px;
  padding: 10px 12px;
  font-family: var(--f-vt);
  font-size: 18px;
  color: var(--phos);
  background: #040805;
  border: 1px solid var(--phos-dark);
}

/* ---------- 18. BOOT CONTAINER ---------- */
#ps1-boot-screen {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: #000;
}
#ps1-boot-screen.hidden, #ps1-boot-screen.boot-hidden, #ps1-boot-screen[hidden] { display: none; }
/* gate fix (D2 request): the S5 DOOM melt reveals the live store, not black */
#ps1-boot-screen[data-stage="5"], #ps1-boot-screen.is-melting { background: transparent; }
#boot-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}
#btn-boot-enter {
  position: relative;
  z-index: 1;
  margin-bottom: 16vh;
  padding: 16px 24px 14px;
  font-family: var(--f-pixel);
  font-size: 16px;
  line-height: 16px;
  letter-spacing: .06em;
  color: var(--text-hi);
  text-shadow: 2px 2px 0 #000;
  background: none;
  border: 0;
  animation: blink 1.1s steps(1) infinite;
}
#btn-boot-enter:hover, #btn-boot-enter:focus-visible { color: #fff; outline: 2px solid var(--bone-mid); outline-offset: 2px; }

@keyframes blink { 50% { opacity: 0; } }
@keyframes blink-soft { 50% { opacity: .35; } }

/* ---------- 19. STATE HOOKS ---------- */
body.modal-open .vp-hud { pointer-events: none; }
body.cheat-hell .doom-cell-label { color: var(--blood-hi); }
body.cheat-hell #doom-status-bar { background-color: #3A0F0B; }

/* list mode / no WebGL: one column, the 3D view collapses to a strip */
body.list-mode #main-stage, body.no-webgl #main-stage {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
}
body.list-mode #viewport-container, body.no-webgl #viewport-container { padding: 6px 12px; border-right: 0; border-bottom: 2px solid #000; }
body.list-mode .crt-glass, body.no-webgl .crt-glass { height: auto; min-height: 40px; border-radius: 4px; overflow: visible; }
body.list-mode .crt-glass::after, body.no-webgl .crt-glass::after { display: none; }
body.list-mode #ps1-webgl-canvas, body.no-webgl #ps1-webgl-canvas { display: none; }
body.list-mode .vp-hud, body.no-webgl .vp-hud { position: static; }
body.list-mode .vp-hud > :not(#webgl-fallback, #save-toast, #options-panel, #controls-card, #hud-layer),
body.no-webgl .vp-hud > :not(#webgl-fallback, #save-toast, #options-panel, #controls-card, #hud-layer) { display: none !important; }
body.list-mode #webgl-fallback, body.no-webgl #webgl-fallback { position: static; flex-direction: row; flex-wrap: wrap; gap: 4px 16px; padding: 8px 12px; background: transparent; }
body.list-mode:not(.no-webgl) .crt-glass::before {
  content: "LIST MODE: 3D VIEW OFF";
  display: block;
  padding: 10px 14px 8px;
  font-family: var(--f-vt);
  font-size: 22px;
  letter-spacing: .06em;
  color: var(--phos);
}
body.list-mode :is(#save-toast, #options-panel, #controls-card), body.no-webgl :is(#save-toast, #options-panel, #controls-card) { position: fixed; }
/* the toast rises from the status bar here: at the top it would sit on the 3D-OFF notice */
body.list-mode #save-toast, body.no-webgl #save-toast { top: auto; bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px) + 12px); }
body.list-mode #right-rack, body.no-webgl #right-rack { width: 100%; max-width: 1040px; margin: 0 auto; border-left: 2px solid #000; border-right: 2px solid #000; }

/* reduced motion: nothing loops, nothing slides */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
  #area-banner.show { animation: none; }
  #st-marquee.is-overflowing > span { animation: none; padding-left: 0; overflow: hidden; text-overflow: ellipsis; }
}
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
}
html.reduce-motion #area-banner.show { animation: none; }
html.reduce-motion #st-marquee.is-overflowing > span { animation: none; padding-left: 0; overflow: hidden; text-overflow: ellipsis; }

/* ---------- 20. RESPONSIVE ---------- */

/* short screens: the examine panel drops the ladder meta and shrinks the cover so the actions stay in view */
@media (max-height: 860px) and (min-width: 900px) {
  #active-shrine-card { gap: 6px; }
  .ex-body { grid-template-columns: 72px minmax(0, 1fr); }
  .ex-cover { width: 72px; height: 72px; }
  #shrine-card-meta { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .tier-ladder .tier-meta { display: none; }
  .tier-ladder .tier-row { min-height: 36px; padding-top: 6px; padding-bottom: 5px; }
  .tier-ladder .tier-row.is-featured::after { top: -9px; }
}
/* very short glass (900x700): all five tiers stay in view. The stat boxes repeat the hero right beside
   the glass, so they step out, and the cover steps down to 56 px */
@media (max-height: 720px) and (min-width: 900px) {
  #shrine-card-stats { display: none; }
  .ex-body { grid-template-columns: 56px minmax(0, 1fr); }
  .ex-cover { width: 56px; height: 56px; }
}

/* the small hero buttons keep their words only on the widest rack, and even there JUMP TO DROP is the
   icon (title kept): the 600 px rack can't hold LEASE FROM $NN next to two worded buttons */
@media (max-width: 1759px) {
  .hero-quick-actions .small { padding: 0; width: 34px; }
  .hero-quick-actions .small .lbl {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
.hero-quick-actions #hero-btn-drop { padding: 0; width: 34px; }
.hero-quick-actions #hero-btn-drop .lbl {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 1440+ : full labels everywhere (rack = clamp(460px, 34vw, 600px)) */

@media (max-width: 1439px) {
  :root { --rack-w: clamp(400px, 36vw, 480px); }
  .vp-hud:has(#active-shrine-card:not([data-state="hidden"])) .hint-bar .hint:nth-child(n+4) { display: none; }
  .world-tab:not(.active) .disc-lbl { display: none; }
  .world-tab:not(.active) { padding: 0 10px; }
  #hero-beat-title { font-size: 24px; line-height: 28px; }
}
@media (min-width: 1280px) and (max-width: 1439px) {
  #hero-beat-title { font-size: 48px; line-height: 46px; }
  /* a name too long for the 461-480 px rack at 48 px steps down to the 24 px size (D1 sets .is-long
     when the title overflows after it writes it, like .is-overflowing on the marquee) */
  #hero-beat-title.is-long { font-size: 24px; line-height: 28px; }
}
/* rack < 490 px: NAME ENTRY + sort picker keep the row; the block count repeats the ALL pill and the trust strip */
@media (min-width: 900px) and (max-width: 1439px) {
  #mc-blocks-count { display: none; }
}

@media (max-width: 1280px) {
  #doom-status-bar { grid-template-columns: 104px 112px 88px 150px 52px minmax(0, 1fr); }
  .st-arms { display: none; }
}

@media (max-width: 1279px) {
  #btn-open-cart-top .mc-lbl { display: none; }
  .rack-tab .i { display: none; }
  .rack-tab { letter-spacing: 0; padding: 0 4px; }
  #hero-btn-play::before, #hero-btn-lease::before { display: none; }
  .hint-bar .hint:nth-child(n+4) { display: none; }
}

@media (max-width: 1099px) {
  :root { --rack-w: 380px; }
  #btn-options .lbl { display: none; }
  #btn-options { padding: 0 8px; }
  .catalog-toolbar { padding: 8px 10px 6px; }
  #memory-card-list { padding-left: 20px; padding-right: 8px; }
  .hero-quick-actions { gap: 6px; }
  .hero-quick-actions #hero-btn-play { min-width: 0; }
  #selected-beat-hero { padding: 12px 12px 10px; column-gap: 12px; }
  .mc-block-item { grid-template-columns: 22px 52px minmax(0, 1fr) auto auto; column-gap: 8px; }
  /* the 380 px rack: the trust line packs a little tighter instead of ending in "…" (60 BEATS · 225.3K ...: 45 chars) */
  #trust-strip { letter-spacing: .03em; }
}
/* desktop: the five filter pills need ~425 px; the rack gives 360-437 below ~1250 px and a mouse can't
   swipe a hidden scrollbar, so they wrap to a second row instead of cutting AVAILABLE (one row wherever
   they fit; phones keep the swipe row, §21) */
@media (min-width: 900px) {
  /* the pills and the DISC chip group (§22) wrap as one flow: .filter-pills hands its pills to the toolbar, so
     the disc group joins whichever pill row has room for it; the search row always takes a row of its own */
  .catalog-toolbar { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px; }
  .filter-pills { display: contents; }
  .catalog-toolbar > .search-row { flex: 1 0 100%; min-width: 0; margin-top: 4px; }
}
/* 900-979: the disc row packs tighter so it keeps clear air to the brand and OPTIONS */
@media (min-width: 900px) and (max-width: 979px) {
  .disc-select { gap: 2px; }
  .world-tab:not(.active) { padding: 0 7px; }
}
/* save toast (I3): bottom-right of the glass, 8 px above the hint bar and the docked chip, so the framed
   record and its nameplate stay clear. 900-1023 with the panel open has no free column right of the
   panel, so the toast keeps its old top slot there instead of covering the panel's PLAY/LEASE */
@media (min-width: 900px) {
  #save-toast { top: auto; bottom: 64px; }
}
@media (min-width: 900px) and (max-width: 1023px) {
  .vp-hud:has(#active-shrine-card[data-state="open"]) #save-toast { top: 132px; bottom: auto; }
}

/* ---------- 21. HANDHELD (<= 899 px; D1 mirrors this with body.handheld) ---------- */
@media (max-width: 899px) {
  :root {
    --hdr-h: 48px;
    --bar-h: 64px;
    --sheet-peek: 92px;
  }
  body {
    grid-template-rows:
      calc(var(--hdr-h) + env(safe-area-inset-top, 0px))
      minmax(0, 1fr)
      calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
  }

  /* header 48 (+ the notch inset, which the padding takes, so the 48 px row is never squeezed) */
  #top-osd-bar {
    height: calc(var(--hdr-h) + env(safe-area-inset-top, 0px));
    gap: 6px;
    padding: env(safe-area-inset-top, 0px) max(8px, env(safe-area-inset-right, 0px)) 0 max(8px, env(safe-area-inset-left, 0px));
  }
  .brand-serial { display: none; }
  .brand-logo { font-size: 25px; line-height: 26px; }
  .disc-select { gap: 3px; }
  .shoulder { min-width: 30px; height: 26px; padding: 0 4px; }
  .world-tab { height: 34px; padding: 0 8px; font-size: 18px; gap: 6px; }
  .osd-right { gap: 4px; }
  #btn-options { min-height: 34px; padding: 0 7px; }
  .links-menu > summary { height: 34px; padding: 0 8px; }
  .links-menu > summary .lbl { display: none; }
  #btn-open-cart-top { height: 36px; padding: 0 6px; gap: 6px; font-size: 18px; }
  #btn-open-cart-top .i { display: none; }
  #top-cart-count { min-width: 0; padding: 2px 4px 0; }

  /* stage: viewport strip on top, rack below */
  #main-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: clamp(200px, 34dvh, 300px) minmax(0, 1fr);
  }
  body.list-mode #main-stage, body.no-webgl #main-stage { grid-template-rows: auto minmax(0, 1fr); }
  #viewport-container { padding: 5px 6px; border-right: 0; border-bottom: 2px solid #000; }
  #viewport-container::after { right: 14px; bottom: 1px; }
  .crt-glass { border-radius: 10px / 8px; }
  .osd-tl { top: 8px; left: 10px; gap: 8px; width: calc(100% - 150px); }
  #tel-world-name { font-size: 18px; }
  #deal-banner-btn { top: 10px; right: 14px; width: auto; max-width: 60%; padding: 6px 10px 5px 10px; }
  .fl-kicker { display: none; }
  .fl-line { font-size: 24px; line-height: 24px; }
  .fl-meter { font-size: 18px; }
  .hint-bar, .leader, #pedestal-prompt { display: none !important; }
  #examine-prompt { bottom: 10px; font-size: 18px; }
  #hud-doom { top: 34px; left: 10px; right: 10px; font-size: 16px; line-height: 20px; max-height: 40px; }
  .area-name { font-size: 24px; line-height: 26px; }
  #area-banner::before, #area-banner::after { max-width: 40px; margin-bottom: 13px; }
  #hud-ds { height: 64px; margin-top: -32px; }
  .hud-ds-text { font-size: 22px; }
  #hud-ds .hud-ds-text.ds-m { font-size: 18px; }
  #hud-ds .hud-ds-text.ds-s { font-size: 16px; }
  #vp-loading { bottom: 12px; right: 12px; }

  #selected-beat-hero { display: none; }
  #right-rack { background-image: none; }
  .rack-tab { height: 40px; font-size: 18px; }
  .catalog-toolbar { padding: 8px 8px 6px; gap: 6px; }
  #trust-strip { display: none; }
  #memory-card-list { padding: 6px 8px 8px 18px; }
  /* TAPE LAB / LICENSES: their last pads and the DM button scroll clear of a docked sheet, as memory card 1 does */
  body:has(#active-shrine-card:not([data-state="hidden"])) :is(#view-tapelab, #view-licenses) { padding-bottom: calc(var(--sheet-peek) + 8px); }
  body:has(#active-shrine-card:not([data-state="hidden"])) #memory-card-list {
    padding-bottom: calc(var(--sheet-peek) + 8px);
    /* scrollIntoView on select / list cursor stops above the docked chip, not behind it */
    scroll-padding-bottom: calc(var(--sheet-peek) + 8px);
  }
  .mc-block-item { grid-template-columns: 0 52px minmax(0, 1fr) auto auto; column-gap: 8px; padding-left: 4px; }
  .mc-idx { display: none; }
  .mc-block-item .stamp { left: 18px; }
  .mc-block-item.is-active::before { left: -20px; }

  /* examine panel -> bottom sheet over the list, above the mini-player */
  #active-shrine-card,
  #active-shrine-card[data-state="docked"] {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
    z-index: 25;
    width: auto;
    max-width: none;
    border-radius: 6px 6px 0 0;
    border-bottom: 0;
    box-shadow: 0 0 0 1px #000, 0 -3px 0 #000;
  }
  #active-shrine-card::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 50%;
    width: 40px;
    height: 4px;
    margin-left: -20px;
    background: var(--bone-dark);
  }
  #active-shrine-card[data-state="open"] { max-height: 62dvh; padding-top: 14px; }
  #active-shrine-card[data-state="docked"] {
    height: var(--sheet-peek);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr;
    grid-template-areas: "head head" "docked play";
    align-items: center;
    gap: 4px 10px;
    padding: 14px 10px 8px;
  }
  #active-shrine-card[data-state="docked"] .ex-head { display: flex; grid-area: head; padding-bottom: 4px; }
  #active-shrine-card[data-state="docked"] .ex-docked { grid-area: docked; }
  #active-shrine-card[data-state="docked"] .ex-actions { grid-area: play; }
  #active-shrine-card[data-state="docked"] #shrine-card-play { min-height: 44px; }
  /* sheet open: it covers the glass, so the walk pad and examine button (sliced by its edge) step out */
  .vp-hud:has(#active-shrine-card[data-state="open"]) :is(#touch-dpad, #touch-examine) { visibility: hidden; }

  /* overlays that need more room than the strip */
  #options-panel, .manual {
    position: fixed;
    inset: 0;
    z-index: 60;
  }
  /* the toast lies over the rack, just above the mini-player, so the 3D view and its nameplate stay clear
     (I3); with the sheet open it covers the glass strip above the sheet instead of the PLAY/LEASE row */
  #save-toast {
    position: fixed;
    top: auto;
    bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px) + 8px);
    left: 8px;
    right: 8px;
    width: auto;
    z-index: 60;
  }
  .vp-hud:has(#active-shrine-card[data-state="open"]) #save-toast {
    top: calc(var(--hdr-h) + env(safe-area-inset-top, 0px) + 6px);
    bottom: auto;
  }
  /* the OSD line sits 10 px higher so it clears the top of the framed nameplate (360x740) */
  #osd-track { top: 4px; }

  /* status bar -> 64 px mini-player: CD player + memory card 2 only */
  #doom-status-bar {
    height: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));   /* the home-indicator inset is extra, not taken from the 64 px */
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 2px 2px calc(2px + env(safe-area-inset-bottom, 0px));
    border-top-width: 2px;
  }
  .st-bpm, .st-808, .st-arms, .doom-mugshot-cell, .st-keys { display: none; }
  .st-cd { grid-column: 1; grid-row: 1; }
  .st-mc2 { grid-column: 2; grid-row: 1; }
  .st-cd {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-rows: 36px minmax(0, 1fr);
    gap: 3px 4px;
    padding: 2px 4px 3px;
    min-width: 0;
  }
  .transport-btns .ps1-btn { height: 36px; min-height: 36px; }
  .transport-btns .icon-btn { width: 36px; min-width: 36px; }
  #btn-transport-play { min-width: 0; padding: 0 8px; }
  #btn-transport-play .lbl { display: none; }
  #st-marquee, #transport-time { font-size: 18px; padding: 2px 6px 0; }
  #waveform-scrubber { min-height: 10px; }
  .st-mc2 { flex-direction: column; gap: 3px; padding: 2px 6px; min-width: 96px; }
  .st-mc2 .doom-cell-label { display: none; }
  .st-mc2 .doom-num { font-size: 16px; line-height: 18px; }
  #btn-doom-checkout { min-height: 28px; font-size: 18px; }

  .checkout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "grid" "detail" "items" "summary" "completer" "field" "slip" "ctas" "sent" "quick";
    grid-template-rows: none;
  }
  .checkout .slip { margin-top: 12px; }
  .shop-body { grid-template-columns: minmax(0, 1fr); }
  #license-modal-beat { font-size: 24px; line-height: 28px; }
  .ps1-modal { padding: 12px 12px 14px; }
  .ps1-modal-backdrop { padding: 8px; }
  .checkout-ctas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .man-keys { grid-template-columns: minmax(0, 1fr); }

  /* J-card: rows are already stacked 2-line cards; tighten for phones */
  .lic-table.jcard tr { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) auto; grid-template-areas: "tier tier price" "files streams add"; }
}

@media (max-width: 599px) {
  .world-tab:not(.active) { display: none; }
  .world-tab.active .disc-lbl { display: none; }
  .world-tab.active { padding: 0 8px; }
  .links-menu { display: none; }
  .opt-links { display: flex; }
  .brand-logo { font-size: 22px; }
  .fl-meter { display: none; }
  .fl-line { margin-top: 0; }
  #deal-banner-btn { padding-right: 46px; }
  .fl-stamp { top: 4px; right: -6px; }
  /* phones: the flyer folds to two lines and moves to the free strip right of the framed record,
     so it no longer covers the nameplate at the top of the glass */
  #deal-banner-btn { top: 40px; right: 8px; max-width: 108px; padding: 5px 30px 5px 8px; }
  #deal-banner-btn .fl-line { white-space: normal; }
  #deal-banner-btn .fl-stamp { top: -9px; right: -6px; }
  .opt-row { padding-left: 8px; }
  .opt-row:focus-within::before { display: none; }
  .opt-val { min-width: 124px; }
  .cart-item-row {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "blk icon name del" "blk icon tier price";
    row-gap: 0;
  }
  .cart-item-row .ci-block { grid-area: blk; }
  .cart-item-row .ci-icon { grid-area: icon; }
  .cart-item-row .ci-name { grid-area: name; }
  .cart-item-row .ci-tier { grid-area: tier; }
  .cart-item-row .ci-price { grid-area: price; justify-self: end; }
  .cart-item-row .btn-remove-cart { grid-area: del; }
  #st-marquee { min-width: 60px; }
  .st-cd { grid-template-areas: "btns marquee vol vol" "wave wave wave wave"; }
  .st-vol .vol-bar { display: none; }                 /* phones: the mute button only; the level is in OPTIONS */
  #transport-time { display: none; }
  .st-mc2 .doom-num { display: none; }
}
/* 600-719: five icon discs + both shoulders only fit once the active label goes too */
@media (min-width: 600px) and (max-width: 719px) {
  .world-tab.active .disc-lbl { display: none; }
  .world-tab.active { padding: 0 8px; }
}
@media (max-width: 419px) {
  #top-cart-count::after { content: none; }
}
/* 360-374: "ORDER SLIP. NOT A RECEIPT." needs 225 px at .08em but its column next to BACK is 212, so the
   tracking tightens to .04em (206 px) and it keeps one line; narrower phones still wrap it cleanly (UI-19) */
@media (max-width: 374px) {
  .checkout .modal-kicker { letter-spacing: .04em; }
}
/* phones: the active disc (icon only) sits between L1 and R1 so it reads as "one of several worlds".
   It is an indicator there (tapping the current world does nothing), and it steps out whenever the
   header row is too tight for L1 + disc + R1 (narrow phone, long cart total): the nav measures itself */
@media (max-width: 599px) {
  .disc-select { container-type: inline-size; }
}
@media (pointer: coarse) and (max-width: 599px) {
  .world-tab.active { pointer-events: none; }
}
@container (max-width: 101px) {
  .world-tab.active { display: none; }
}
@media (pointer: coarse) {
  @container (max-width: 129px) {
    .world-tab.active { display: none; }
  }
}

/* coarse pointers: every target >= 44 px */
@media (pointer: coarse) {
  .ps1-btn, .filter-pill, .rack-tab, .opt-val, .tier-row, .btn-speed-preset { min-height: 44px; }
  .filter-pill { height: 44px; }
  .search-field, #catalog-sort, #lic-beat, #buyer-artist { height: 44px; }
  .mc-block-item .btn-RowLease { min-height: 44px; }
  .mc-block-item { min-height: 72px; }
  .shoulder { min-width: 44px; height: 44px; }
  .world-tab, #btn-options, .links-menu > summary, #btn-open-cart-top { height: 44px; min-height: 44px; }
  .sq-link { width: 44px; height: 44px; }
  .rack-tab { height: 44px; }
  .transport-btns .ps1-btn { height: 44px; min-height: 44px; }
  .transport-btns .icon-btn { width: 44px; min-width: 44px; }
  .ex-actions .ps1-btn { min-height: 44px; }
  .ex-actions { grid-template-columns: 44px minmax(0, 1fr) 44px; }
  #btn-doom-checkout { min-height: 44px; }
  .hint-bar { display: none; }
  .brand { min-height: 44px; }
  #btn-options, #btn-transport-play { min-width: 44px; }
  #deal-banner-btn { min-height: 44px; }
  .search-field { height: 48px; }
  .mc-similar { display: inline-block; padding: 8px 0; margin: -8px 0; }
  #shrine-card-stats dd a, .hero-stats dd a { display: block; margin: -17px -5px -7px; padding: 17px 5px 7px; }
  /* these smaller variants out-rank the .ps1-btn rule above: lift them to 44 px too */
  #save-toast .st-actions .ps1-btn, .cart-item-row .btn-remove-cart, #bundle-completer .bc-chip,
  .checkout-ctas .ps1-btn { min-height: 44px; }
  .cart-item-row .btn-remove-cart { min-width: 44px; }
  .opt-social .sq-link { width: 44px; height: 44px; }
  .opt-foot[role="button"] { min-height: 44px; }   /* D1 makes the ESC BACK footer a button */
}
@media (pointer: coarse) and (max-width: 899px) {
  .st-cd { grid-template-rows: 44px minmax(0, 1fr); }
  #doom-status-bar { --bar-h: 64px; }
  .st-mc2 { flex-direction: row; }
  .st-mc2 .doom-num { display: none; }
  /* mini-player seek strip: it stays a thin strip fully inside the 64 px bar, but its touch target is
     >= 44 px tall: the canvas grows a transparent top border over the now-playing line (text only); the
     transport buttons sit above it and keep their taps. The strip's top rule moves to .wf-wrap. */
  #doom-status-bar { padding-top: 1px; padding-bottom: calc(1px + env(safe-area-inset-bottom, 0px)); }
  .st-cd { padding-top: 1px; padding-bottom: 1px; row-gap: 2px; }
  .st-cd .transport-btns .ps1-btn, .st-cd .st-vol #btn-mute { z-index: 1; }
  .wf-wrap { border-top: 1px solid #000; }
  #waveform-scrubber {
    top: -38px;
    height: calc(100% + 38px);
    min-height: 0;
    border-top: 38px solid transparent;
    background-clip: padding-box;
  }
}

/* ---------- 22. DISCS: 12 RECORDS PER DISC, PER ARTIST (GC 2026-10-16; v3 had 5 global discs) ----------
   Each artist's records (newest first) are cut into discs of 12 (store-model.js GC.discs). Every walk world keeps 12
   altars: they show the disc in the tray of its pool; a partial last disc shows NEXT DROP altars. GC additions
   (pager prev/next/GO TO DISC, data-pool) are in §23.
   DOM CONTRACT. C writes the static markup (index.html); D1 writes state, text and the generated rows
   (app.js wires every hook below as of 2026-10-16: buildDiscChips, syncDiscUI, discHead, swapScreen).
   Static:
     .catalog-toolbar > .disc-chips[role=group][hidden]       D1 removes hidden once the chips work
        > span#disc-readout.dc-readout                        D1 writes the disc in the tray: "DISC 2/5" (Disc.label)
        > span.dc-lbl "DISC"                                  CSS shows it instead of the readout at <= 599 px
        > button.disc-chip[data-disc=1..5][aria-pressed] > span.sr-only "DISC " + span.lbl "n"
            .active + aria-pressed="true"   the rack's disc filter (state.discFilter); the active chip again = every disc
            .is-loaded                      the disc in the tray (state.disc): phosphor numeral + tray bar
            .is-empty                       optional: the other filters / search leave that disc no record (dimmed)
        While the group shows, #mc-blocks-count ("12 BLOCKS · DISC 2/5") steps out: the readout and the headers
        say the same, and NAME ENTRY gets the room.
     .vp-hud > .osd-tl > #tel-world-name (★) + #osd-disc.osd[hidden]
            D1 writes "DISC 2/5" into #osd-disc and removes hidden. While #tel-world-name is ducked ([hidden])
            the tag steps out with it; add #osd-disc to the duck test too if the OSD line can reach it alone.
            On a narrow glass (the row can't hold the longest world name beside the tag) the tag steps out by a
            container query, so the world name never truncates for it.
     .vp-hud > #disc-swap[hidden][aria-hidden=true] > .dsw-box > .dsw-disc + .dsw-line1 "PLEASE INSERT"
            + .dsw-line2 "DISC " > span.dsw-n + .dsw-cue + .dsw-skip
            D1: write .dsw-n ("3") and .dsw-cue (e.g. SLUS-031 "SNEAKY"; empty = no line), remove hidden, restart
            .show (remove, read offsetWidth, add), re-add hidden after <= 1.2 s, or at once on any key or a
            pointerdown on #disc-swap (skip). Announce through #sr-live if wanted (the overlay is aria-hidden).
            .show timeline: black and text at 0 ms, the disc drops in over 0-240 ms, then spins (8 frames / 0.48 s).
            Reduce motion (html.reduce-motion or the media query): static disc, no drop; D1 shows it ~0.4 s or skips it.
            Layer: covers the glass at z 8, over the examine panel, HUD, toast and NOW LOADING; under OPTIONS and the
            manual. The rack and the status bar stay live. list mode / no WebGL hide it with the rest of .vp-hud.
   Generated by D1 (C styles exactly these):
     catalog row  .mc-block-item.is-hit   one of the 5 channel hits (beat.hit): a gold HIT tag after the title (CSS
                                          text). If D1 prefers real text: span.mc-hit "HIT" as the last child of
                                          .mc-title; the CSS tag then steps aside.
     disc header  one per disc in #memory-card-list, before that disc's first row; sticky while its rows scroll:
                  <div class="mc-disc-head [is-loaded]" data-disc="2" aria-hidden="true">
                    <svg class="i"><use href="#i-disc"/></svg><span class="mdh-name">DISC 2</span>
                    <span class="mdh-meta">SLUS-013 - 024</span><span class="mdh-count">12 BLOCKS</span></div>
                  .is-loaded = the disc in the tray: phosphor icon (spins while body.is-playing) + INSERTED tag.
                  D1 sets hidden on a header whose disc shows no row (filters, search) and on all of them while the
                  sort is not SLUS ORDER (rows then mix discs). The list gets scroll-padding-top for them.
     hero / examine  #selected-beat-hero and #active-shrine-card get data-hit="true" (or .is-hit): HIT sticker on
                  the cover, like data-status.
   ============================================================================= */
:root {
  /* 8x8 star from the sprite (#i-star): gold for the dark tag, ink for the gold sticker */
  --star-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%23F2C14E' d='M3 0h2v2h-2zM0 2h8v1h-8zM1 3h6v1h-6zM2 4h4v1h-4zM1 5h6v1h-6zM1 6h2v1h-2zM5 6h2v1h-2zM0 7h2v1h-2zM6 7h2v1h-2z'/%3E%3C/svg%3E");
  --star-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%231A0F02' d='M3 0h2v2h-2zM0 2h8v1h-8zM1 3h6v1h-6zM2 4h4v1h-4zM1 5h6v1h-6zM1 6h2v1h-2zM5 6h2v1h-2zM0 7h2v1h-2zM6 7h2v1h-2z'/%3E%3C/svg%3E");
}

/* rack: the DISC chip group. One unit that never breaks: on desktop it rides the pill flow (§20), on
   handhelds it sits beside NAME ENTRY so the list keeps its height */
.disc-chips {
  flex: none;
  display: inline-flex;
  align-items: stretch;
  height: 32px;
  background: var(--stone-1);
  border: 2px solid var(--stone-3);
}
.dc-readout {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px 0;
  font-family: var(--f-vt);
  font-size: 18px;
  line-height: 1;
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--phos);
  background: #000;
  border-right: 2px solid var(--stone-3);
}
.dc-lbl {
  display: none;
  align-items: center;
  padding: 1px 6px 0;
  font-family: var(--f-pixel);
  font-size: 8px;
  line-height: 1;
  color: var(--text-mid);
  background: #000;
  border-right: 2px solid var(--stone-3);
}
.disc-chip {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  padding: 2px 8px 0;
  font-family: var(--f-vt);
  font-size: 22px;
  line-height: 1;
  color: var(--text-mid);
}
.disc-chip + .disc-chip { border-left: 2px solid #000; }
.disc-chip:hover { color: var(--text-hi); background: var(--stone-2); }
.disc-chip:focus-visible { outline: 2px solid var(--bone); outline-offset: -5px; }
.disc-chip.is-empty { color: var(--text-low); }
/* the readout names the disc in the tray and each header counts its blocks, so the block count line steps out
   while the chips are up (NAME ENTRY gets the room) */
.catalog-toolbar:has(> .disc-chips:not([hidden])) #mc-blocks-count { display: none; }
/* the disc in the tray: phosphor numeral over a phosphor tray bar */
.disc-chip.is-loaded { color: var(--phos); }
.disc-chip.is-loaded::after {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 3px;
  height: 2px;
  background: var(--phos);
}
/* the filtered disc: bone-inverted selection, like the active pill */
.disc-chip.active { color: var(--void); background: var(--bone); }
.disc-chip.active::after { background: var(--phos-dark); }
.disc-chip.active:focus-visible { outline-color: var(--void); }

/* glass: DISC n/5 tag after the world name (same OSD voice, framed like an indicator) */
#osd-disc {
  flex: none;
  padding: 2px 5px 0;
  font-size: 18px;
  line-height: 18px;
  background: rgba(7, 18, 10, .6);     /* reads over fog and the bonfire glow */
  border: 2px solid currentColor;
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #000;
}
.osd-tl:has(> #tel-world-name[hidden]) > #osd-disc { visibility: hidden; }
/* the row must hold the longest world name (28 chars) beside the tag, or the tag steps out: the name never
   truncates for it. Desktop names are 22 px (needs 375 px), handheld names 18 px (needs 320 px). A narrow
   glass still names the disc next door: the rack readout (>= 600 px), the sheet head and the chip (phones) */
@container osdtl (max-width: 374px) {
  #osd-disc { display: none; }
}
@media (max-width: 899px) {
  @container osdtl (min-width: 320px) {
    #osd-disc { display: block; }
  }
}

/* list: one sticky header per disc. It spans the list's gutters so the glove scrolls under it */
.mc-disc-head {
  position: sticky;
  top: -8px;            /* = the list's padding-top: it sticks at the list's edge, no row strip above it */
  z-index: 3;
  container-type: inline-size;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  margin: 4px -10px 6px -22px;
  padding: 2px 10px 0 22px;
  font-family: var(--f-vt);
  font-size: 18px;
  line-height: 1;
  letter-spacing: .06em;
  white-space: nowrap;
  color: var(--text-mid);
  background: #08070A;
  border-top: 2px solid #000;
  border-bottom: 2px solid var(--stone-3);
  box-shadow: 0 2px 0 #000;
}
.mc-disc-head:first-child { margin-top: 0; }
.mc-disc-head .i { color: var(--bone-dark); }
.mdh-name { flex: none; font-size: 22px; letter-spacing: .04em; color: var(--text-hi); }
.mdh-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mdh-count { flex: none; margin-left: auto; color: var(--phos); }
/* a narrow rack (<= 1099 px, phones) can't hold the INSERTED tag, the code range and the block count: every
   disc has 12 blocks, so the count steps out first */
@container (max-width: 379px) {
  .mdh-count { display: none; }
  .mc-disc-head.is-loaded .mdh-meta { letter-spacing: .02em; }   /* 'LELXX · DISC 1' + INSERTED left 'SLES-001 - 0…' */
}
.mc-disc-head.is-loaded .i { color: var(--phos); }
body.is-playing .mc-disc-head.is-loaded .i { animation: disc-spin .8s steps(4) infinite; }
.mc-disc-head.is-loaded .mdh-name::after {
  content: "INSERTED";
  display: inline-block;
  margin-left: 10px;
  padding: 3px 4px 2px;
  vertical-align: 3px;
  font-family: var(--f-pixel);
  font-size: 8px;
  line-height: 8px;
  letter-spacing: .04em;
  color: var(--phos);
  border: 1px solid var(--phos-dark);
}
/* rows scrolled into view (select, list cursor) stop below the sticky header, not under it */
#memory-card-list:has(> .mc-disc-head:not([hidden])) { scroll-padding-top: 42px; }

/* HIT: the 5 channel hits. A gold tag after the row title, a sticker on the hero and examine covers */
.mc-block-item.is-hit .mc-title::after,
.mc-title .mc-hit {
  content: "HIT";
  display: inline-block;
  margin-left: 10px;
  padding: 3px 4px 2px 15px;
  vertical-align: 5px;
  font-family: var(--f-pixel);
  font-size: 8px;
  line-height: 8px;
  letter-spacing: .06em;
  color: var(--gold-hi);
  background: #1E1606 var(--star-gold) 4px 50% / 8px 8px no-repeat;
  border: 1px solid var(--gold-dark);
  box-shadow: 1px 1px 0 #000;
  image-rendering: pixelated;
}
.mc-block-item.is-hit:has(.mc-hit) .mc-title::after { content: none; }
.mc-block-item.is-active.is-hit .mc-title::after, .mc-block-item.is-active .mc-hit { border-color: #000; }
.ex-body { position: relative; }
#selected-beat-hero:is([data-hit="true"], .is-hit) .jewel-art::before,
#active-shrine-card:is([data-hit="true"], .is-hit) .ex-body::before {
  content: "HIT";
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  padding: 4px 5px 3px 18px;
  font-family: var(--f-pixel);
  font-size: 8px;
  line-height: 8px;
  letter-spacing: .06em;
  color: #1A0F02;
  background: var(--gold-hi) var(--star-ink) 5px 50% / 8px 8px no-repeat;
  border: 2px solid #000;
  box-shadow: 2px 2px 0 #000;
  transform: rotate(-6deg);
  image-rendering: pixelated;
  pointer-events: none;
}
#active-shrine-card:is([data-hit="true"], .is-hit) .ex-body::before { top: -4px; left: -4px; }

/* the disc swap: a black PS1 system screen over the glass */
#disc-swap {
  --dsw-disc: 72px;               /* the 24 px disc art at 3x (2x on handhelds) */
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: #000;
  pointer-events: auto;
  cursor: pointer;
}
.dsw-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  text-align: center;
}
.dsw-disc {
  position: relative;
  width: var(--dsw-disc);
  height: var(--dsw-disc);
  margin-bottom: 22px;
  background: var(--cd-spin, none) 0 0 / 800% 100% no-repeat;
  image-rendering: pixelated;
}
.dsw-fb { width: 100%; height: 100%; color: var(--bone-mid); }
.dsw-line1 {
  font-family: var(--f-pixel);
  font-size: 16px;
  line-height: 16px;
  letter-spacing: .06em;
  color: var(--text-mid);
}
.dsw-line2 {
  margin-top: 14px;
  font-family: var(--f-pixel);
  font-size: 24px;
  line-height: 24px;
  letter-spacing: .06em;
  color: var(--text-hi);
  white-space: nowrap;
}
.dsw-cue {
  max-width: 100%;
  margin-top: 16px;
  font-family: var(--f-vt);
  font-size: 22px;
  line-height: 22px;
  letter-spacing: .06em;
  color: var(--phos);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dsw-cue:empty { display: none; }
.dsw-skip {
  display: inline-flex;
  align-items: center;
  margin-top: 18px;
  font-family: var(--f-vt);
  font-size: 18px;
  line-height: 22px;
  letter-spacing: .04em;
  color: var(--text-mid);
}
#disc-swap.show .dsw-disc { animation: dsw-drop .24s steps(3) both, dsw-spin .48s steps(8, jump-none) .24s infinite; }
@keyframes dsw-drop { from { transform: translateY(-36px); } to { transform: none; } }
@keyframes dsw-spin { from { background-position: 0% 0; } to { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) {
  #disc-swap .dsw-disc { animation: none !important; }
}
html.reduce-motion #disc-swap .dsw-disc { animation: none !important; }

/* 900-1099: the list's gutters are 20 / 8 px */
@media (max-width: 1099px) {
  .mc-disc-head { margin-left: -20px; margin-right: -8px; padding-left: 20px; padding-right: 8px; }
}

/* handhelds: the chips sit beside NAME ENTRY (no extra toolbar row, so the list keeps >= 280 px) */
@media (max-width: 899px) {
  .catalog-toolbar:has(> .disc-chips:not([hidden])) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "pills pills" "search discs";
    align-items: center;
  }
  .catalog-toolbar > .filter-pills { grid-area: pills; }
  .catalog-toolbar > .search-row { grid-area: search; min-width: 0; }
  .catalog-toolbar > .disc-chips { grid-area: discs; }
  .mc-disc-head { top: -6px; margin: 4px -8px 6px -18px; padding: 2px 8px 0 18px; }
  .mc-disc-head:first-child { margin-top: 0; }
  #disc-swap { --dsw-disc: 48px; padding: 8px; }
  .dsw-disc { margin-bottom: 14px; }
  .dsw-line2 { margin-top: 10px; }
  .dsw-cue { margin-top: 10px; font-size: 18px; line-height: 18px; }
  .dsw-skip { margin-top: 10px; }
}
@media (max-width: 599px) {
  .dc-readout { display: none; }
  .dc-lbl { display: inline-flex; }
  .disc-chip { min-width: 0; padding: 2px 9px 0; }
}
@media (pointer: coarse) {
  .disc-chips { height: 44px; }
}

/* ===================================================================== master volume (2026-10-16)
   The CD player's level: a mute button + a 10-segment LCD wedge in the same phosphor as the time readout.
   .vol-mini is the same wedge inside the OPTIONS row. */
.st-vol { grid-area: vol; display: flex; align-items: stretch; gap: 4px; min-width: 0; }
.st-vol #btn-mute { height: 32px; min-height: 32px; width: 32px; min-width: 32px; box-shadow: 0 0 0 1px #000; }
#btn-mute[aria-pressed="true"] .i { color: var(--blood-hi, #E62E22); }
.vol-bar {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 4px 6px;
  background: #040805;
  border: 2px solid;
  border-color: #000 #2D3A2C #2D3A2C #000;
  cursor: pointer;
  touch-action: none;
  user-select: none;
}
.vol-bar > i { display: block; width: 4px; background: #13261A; }
.vol-bar > i:nth-child(1) { height: 30%; } .vol-bar > i:nth-child(2) { height: 37%; }
.vol-bar > i:nth-child(3) { height: 45%; } .vol-bar > i:nth-child(4) { height: 52%; }
.vol-bar > i:nth-child(5) { height: 60%; } .vol-bar > i:nth-child(6) { height: 67%; }
.vol-bar > i:nth-child(7) { height: 75%; } .vol-bar > i:nth-child(8) { height: 82%; }
.vol-bar > i:nth-child(9) { height: 90%; } .vol-bar > i:nth-child(10) { height: 100%; }
.vol-bar > i.on { background: var(--phos); }
.vol-bar > i.on:nth-child(n+9) { background: var(--gold-hi, #F2C14E); }
.vol-bar.is-muted > i { background: #2A1210; }
.vol-bar:focus-visible { outline: 2px solid var(--bone); outline-offset: 1px; }
.vol-mini { height: 16px; padding: 2px 3px; gap: 1px; border-width: 1px; cursor: inherit; }
.vol-mini > i { width: 3px; }
#btn-volume { gap: 6px; }
#btn-volume .lbl { flex: none; min-width: 5ch; }

/* HELP: a quiet key-card button next to OPTIONS (opens the same manual page as H) */
#btn-help-top { min-height: 36px; padding: 0 8px; gap: 6px; color: var(--text-low, #8F846E); }
#btn-help-top:hover, #btn-help-top:focus-visible { color: var(--bone, #D8CFB8); }
#btn-help-top .hq {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; font-family: var(--f-vt); font-size: 18px; line-height: 1;
  color: #09080A; background: var(--text-low, #8F846E); border-radius: 50%;
}
#btn-help-top:hover .hq, #btn-help-top:focus-visible .hq { background: var(--bone, #D8CFB8); }
#btn-help-top .hk {
  font-family: var(--f-vt); font-size: 16px; line-height: 1; padding: 1px 4px 0;
  border: 1px solid currentColor; opacity: .7;
}
@media (max-width: 1099px) { #btn-help-top .lbl, #btn-help-top .hk { display: none; } #btn-help-top { padding: 0 8px; } }
@media (max-width: 899px) { #btn-help-top { min-height: 34px; padding: 0 7px; } }
@media (max-width: 899px) and (pointer: coarse) { #btn-help-top { min-height: 44px; } }   /* the header's touch height */
@media (max-width: 899px) { .st-vol #btn-mute { height: 36px; min-height: 36px; width: 36px; min-width: 36px; } }

/* ---------- 23. GAMBLING CULT (SPEC_GC §5.8, §7, §8): stage bars, the roulette card row, producer pills, the disc
   pager, LINKS groups, the checkout artist tag. Every piece is built from an existing look (no new fonts, colours,
   blur or unstepped motion).
   DOM CONTRACT (index.html static, app.js state):
     .vp-hud > #roulette-bar.stage-bar > button#btn-spin.ps1-btn[data-glyph=x] > .lbl "SPIN" + kbd.hk "R"
     .vp-hud > #deck-bar.stage-bar > button#btn-reshuffle.ps1-btn > .lbl "RESHUFFLE" + kbd.hk "R"
        CSS shows each bar only in its world (body[data-world]) while #active-shrine-card is hidden or docked;
        app.js may add [hidden] on top (e.g. a deck without shuffle). Desktop: centred 64 px above the glass floor
        (above the hint bar and the 44 px docked chip). Handheld: fixed above the mini-player (+ the docked sheet).
     .ex-actions > #shrine-card-open + #shrine-card-spin [hidden]: app.js removes hidden in the roulette only; under
        body[data-world=roulette] the actions get a third row OPEN | SPIN (two equal halves; prev/next and share keep
        their 38/44 px columns, so rows 1-2 look exactly as before).
     .catalog-toolbar > .artist-pills[hidden] > button.filter-pill[data-artist][aria-pressed] (> .f-lbl + .cnt), or a
        <select> past 8 producers (add .is-strip on the row past 4 producers: a swipe strip, never wraps).
        .filter-pill.is-empty = a pill whose count is 0 (dimmed, like .disc-chip.is-empty).
     .disc-chips[data-pool] > #disc-prev + #disc-readout + #disc-next + .dc-lbl + .disc-chip x <= 5 + select#disc-goto
     .links-group[data-artist] > span.lg-lbl (artist name) + a.sq-link (YT / IG / Spotify); shared links are plain
        .sq-link after the groups. While the header menu holds a group (or .is-dropdown), it is a closed dropdown at
        every width.
     .cart-item-row .ci-name > span.ci-artist (the record's producer, VT323 text-mid). */

/* stage bars: one big button over the glass floor */
.stage-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 64px;
  z-index: 3;
  display: none;
  justify-content: center;
  width: fit-content;
  max-width: calc(100% - 32px);
  margin: 0 auto;
  pointer-events: auto;
}
body[data-world="roulette"] #roulette-bar,
body[data-world="inspector"] #deck-bar { display: flex; }
.vp-hud:has(#active-shrine-card[data-state="open"]) .stage-bar { display: none; }
/* a prompt line (bottom 54 px) or a wrapped hint bar under a docked chip: the bar steps up instead of covering it */
.vp-hud:has(#examine-prompt:not(:empty)) .stage-bar,
.vp-hud:has(#active-shrine-card[data-state="docked"]) .stage-bar { bottom: 96px; }
.stage-bar .ps1-btn {
  min-height: 44px;
  padding: 0 16px;
  gap: 10px;
  box-shadow: 0 0 0 1px #000, 3px 3px 0 1px #000;
}
/* SPIN: the bone-inverted selection look (= .ps1-btn.active) with the inverted face-button disc */
#btn-spin { color: var(--void); background: var(--bone); border-color: #fff var(--bone-mid) var(--bone-mid) #fff; }
#btn-spin:hover { color: #000; background: var(--text-hi); border-color: #fff var(--bone-mid) var(--bone-mid) #fff; }
#btn-spin[data-glyph]::before { background-image: var(--g-x-inv); }
#btn-spin:disabled, #btn-spin[aria-disabled="true"] { color: var(--text-low); background: var(--stone-1); border-color: var(--stone-3) #000 #000 var(--stone-3); }
/* the R key hint inside SPIN / RESHUFFLE: the HELP button's keycap */
.stage-bar .hk {
  min-width: 0;
  height: auto;
  font-family: var(--f-vt);
  font-size: 16px;
  line-height: 1;
  padding: 1px 4px 0;
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 0;
  box-shadow: none;
  opacity: .7;
}

/* the roulette card: a third action row OPEN | SPIN under PLAY and LEASE */
body[data-world="roulette"] .ex-actions {
  grid-template-columns: 38px minmax(0, 1fr) minmax(0, 1fr) 38px;
  grid-template-areas: "prev play play next" "lease lease lease share" "open open spin spin";
}
#shrine-card-open { grid-area: open; }
#shrine-card-spin { grid-area: spin; }
@media (pointer: coarse) {
  body[data-world="roulette"] .ex-actions { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr) 44px; }
}
#shrine-card-open .lbl, #shrine-card-spin .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* producer filter: the category pills' look on a row of its own */
.artist-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}
.artist-pills.is-strip { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.artist-pills.is-strip::-webkit-scrollbar { display: none; }
@media (min-width: 900px) {
  .catalog-toolbar > .artist-pills { flex: 1 0 100%; }
}
.filter-pill.is-empty { color: var(--text-low); }
.artist-pills select {
  height: 32px;
  max-width: 100%;
  padding: 2px 30px 0 8px;
  font-family: var(--f-vt);
  font-size: 18px;
  color: var(--text-hi);
  background: var(--stone-1) var(--chev) right 8px center / 14px 14px no-repeat;
  border: 2px solid;
  border-color: #5A4F57 #08070A #08070A #5A4F57;
  border-radius: 0;
  box-shadow: 0 0 0 1px #000;
  -webkit-appearance: none;
  appearance: none;
  image-rendering: pixelated;
  cursor: pointer;
}
.artist-pills select option { background: #0C0A0E; color: var(--text-hi); }
.artist-pills select:hover { color: #fff; border-color: var(--bone) var(--bone-dark) var(--bone-dark) var(--bone); }
.artist-pills select:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }

/* disc pager: prev / next steps beside the readout (the chip look), GO TO DISC (the sort picker look) */
#disc-prev, #disc-next {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  padding: 0 6px;
  color: var(--text-mid);
  border-right: 2px solid #000;
}
#disc-next { border-right-color: var(--stone-3); }
#disc-prev:hover, #disc-next:hover { color: var(--text-hi); background: var(--stone-2); }
#disc-prev:focus-visible, #disc-next:focus-visible { outline: 2px solid var(--bone); outline-offset: -5px; }
#disc-prev:disabled, #disc-next:disabled { color: var(--text-low); background: transparent; cursor: default; }
#disc-goto {
  flex: none;
  max-width: 132px;
  padding: 2px 26px 0 8px;
  font-family: var(--f-vt);
  font-size: 18px;
  line-height: 1;
  color: var(--text-hi);
  background: var(--stone-1) var(--chev) right 6px center / 14px 14px no-repeat;
  border: 0;
  border-left: 2px solid #000;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  image-rendering: pixelated;
  cursor: pointer;
}
#disc-goto option { background: #0C0A0E; color: var(--text-hi); }
#disc-goto:hover { color: #fff; background-color: var(--stone-2); }
#disc-goto:focus-visible { outline: 2px solid var(--bone); outline-offset: -4px; }
@media (max-width: 599px) {
  #disc-prev, #disc-next { min-width: 0; padding: 0 5px; }
  #disc-goto { max-width: 96px; }
}
/* phones: with a chip for every disc the ◀ ▶ steps only repeat the chips and squeezed NAME ENTRY to 76 px ('NAME ENTI');
   they step out, and every pager target keeps the 36 px touch floor */
@media (max-width: 599px) {
  .disc-chips.is-all > :is(#disc-prev, #disc-next) { display: none; }
}
@media (max-width: 599px) and (pointer: coarse) {
  .disc-chip, #disc-prev, #disc-next { min-width: 36px; }
}

/* LINKS groups: a producer name over his links */
.links-group { display: flex; align-items: center; gap: 4px; min-width: 0; }
.lg-lbl {
  font-family: var(--f-pixel);
  font-size: 8px;
  line-height: 10px;
  letter-spacing: .04em;
  color: var(--text-low);
  white-space: nowrap;
}
/* in the header dropdown each group is a column: name, then one row per link */
.links-menu .links-group { flex-direction: column; align-items: stretch; gap: 2px; }
.links-menu .lg-lbl { padding: 6px 10px 2px; }
.links-menu .links-group + .links-group, .links-menu .links-group + .sq-link { margin-top: 4px; border-top: 1px solid var(--stone-3); }
.links-menu .links-group + .links-group .lg-lbl { padding-top: 8px; }
/* > 4 links (any group, or app.js .is-dropdown): the header menu is a closed dropdown at every width */
@media (min-width: 1100px) {
  .links-menu:is(.is-dropdown, :has(.links-group)) > summary { display: inline-flex; }
  .links-menu:is(.is-dropdown, :has(.links-group)) .social-row {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 40;
    flex-direction: column;
    gap: 2px;
    min-width: 190px;
    padding: 6px;
    background-color: #0B080D;
    background-image: var(--win, none);
    border: 2px solid;
    border-color: var(--bone) var(--bone-mid) var(--bone-mid) var(--bone);
    box-shadow: 0 0 0 1px #000, 3px 3px 0 1px #000;
  }
  .links-menu:is(.is-dropdown, :has(.links-group)) .sq-link { width: auto; justify-content: flex-start; padding: 0 10px; height: 40px; border-color: transparent; background: transparent; color: var(--text); }
  .links-menu:is(.is-dropdown, :has(.links-group)) .sq-link:hover { background: var(--bone); color: var(--void); }
  .links-menu:is(.is-dropdown, :has(.links-group)) .sq-lbl { position: static; width: auto; height: auto; clip-path: none; font-size: 22px; padding-top: 2px; }
  .links-menu:is(.is-dropdown, :has(.links-group)):not(:hover):not(:focus-within) .social-row { display: none; }
  .links-menu:is(.is-dropdown, :has(.links-group))[open]:not(:hover):not(:focus-within) > summary { color: var(--text-mid); background: var(--stone-1); border-color: var(--stone-3); }
}
/* OPTIONS: one line per producer, right-aligned like the single row before */
.opt-social:has(.links-group) { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
.opt-social .links-group { flex: 1 0 100%; justify-content: flex-end; }   /* a producer per line; the shared links share the last */
.opt-social .lg-lbl { padding-right: 4px; }

/* list disc head of a partial disc: "10 BLOCKS · 2 EMPTY". The " · 2 EMPTY" part (span.mdh-empty inside .mdh-count)
   steps out first on a narrow rack, so the code range "SLES-001 - 010" keeps its room (the NEXT DROP rows say it) */
@container (max-width: 599px) {
  .mdh-empty { display: none; }
}

/* the roulette has nothing to walk (a stage camera ignores W A S D): the touch d-pad would only cover the wheel */
body[data-world="roulette"] #touch-dpad { display: none; }

/* manual foot: the producers' credit after the page number ("- 4 - · RUBY DREDD × LELXX"; app.js fills
   [data-gc=credit] from GC.brand). It shortens with an ellipsis before it can push the OK button */
.man-foot { gap: 12px; }
.man-foot .folio { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.man-credit { text-transform: uppercase; }
.man-credit:not(:empty)::before { content: " · "; }

/* checkout: the producer tag after the record name (only in a cart of 2+ producers). The name ellipsizes, the tag never */
.cart-item-row .ci-name:has(> .ci-artist) { display: flex; align-items: baseline; }
.cart-item-row .ci-name > .ci-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cart-item-row .ci-artist {
  flex: none;
  margin-left: 8px;
  font-family: var(--f-vt);
  font-size: 18px;
  letter-spacing: .04em;
  color: var(--text-mid);
}
@media (max-width: 599px) {
  /* a 2-producer cart: the producer tag drops to the tier line, the name keeps the whole first line */
  .cart-item-row:has(.ci-artist) { grid-template-columns: auto auto minmax(0, 1fr) auto auto; grid-template-areas: "blk icon name name del" "blk icon tier art price"; }
  .cart-item-row .ci-name:has(> .ci-artist) { display: contents; }
  .cart-item-row .ci-name:has(> .ci-artist) > .ci-title { grid-area: name; }
  .cart-item-row .ci-artist { grid-area: art; margin-left: 0; }
}

/* header re-tune for the longer GC strings (six tabs, the 'Gambling Cult' wordmark): the HELP keycap steps out below
   1680, the wordmark steps to 27 px at 900-1439, inactive icon tabs pack to 7 px below 1280, and LINKS keeps only its
   icon at 900-999 */
@media (max-width: 1679px) {
  #btn-help-top .hk { display: none; }
}
@media (min-width: 900px) and (max-width: 1439px) {
  .brand-logo { font-size: 27px; }
}
@media (min-width: 900px) and (max-width: 1279px) {
  .world-tab:not(.active) { padding: 0 7px; }
}
/* 1100-1279: HELP and LINKS get their labels back, so the disc row packs like 1440-1679 */
@media (min-width: 1100px) and (max-width: 1279px) {
  .disc-select { gap: 2px; }
  .shoulder { min-width: 30px; padding: 0 4px; }
  .world-tab:not(.active) { padding: 0 6px; }
}
/* 1100-1679: the GC LINKS dropdown (new at these widths: v3 showed its icons inline) keeps only its icon, so a full
   memory card 2 readout ("15/15 $1350") still leaves the six tabs their room */
@media (min-width: 1100px) and (max-width: 1679px) {
  .links-menu:is(.is-dropdown, :has(.links-group)) > summary { padding: 0 8px; }
  .links-menu:is(.is-dropdown, :has(.links-group)) > summary .lbl { display: none; }
}
@media (min-width: 900px) and (max-width: 999px) {
  .links-menu > summary { padding: 0 8px; }
  .links-menu > summary .lbl { display: none; }
  .world-tab.active { padding: 0 8px; font-size: 18px; }
}

/* handhelds: the bars stay on the glass. Above the mini-player (the first GC build) they floated over memory card 1's
   rows and LEASE buttons (§5.8: never over another control). A touch glass has no hint bar: the bar sits at its foot,
   centred between the walk pad (deck) and the examine / play buttons */
@media (max-width: 899px) and (pointer: coarse) {
  .stage-bar,
  .vp-hud:has(#examine-prompt:not(:empty)) .stage-bar,
  .vp-hud:has(#active-shrine-card[data-state="docked"]) .stage-bar { bottom: 10px; }
  .stage-bar { left: 76px; right: 76px; max-width: none; }   /* clear of the 56 px examine / play buttons (right 12) */
  #deck-bar.stage-bar { left: 150px; }                       /* the deck keeps the 132 px walk pad (left 10) */
}
@media (pointer: coarse) { .stage-bar .hk { display: none; } }   /* no keyboard: no R keycap (the hint bar hides too) */
@media (max-width: 899px) {
  /* the manual grew three GC key rows: on a phone it now fills the screen, so it stops above the mini-player
     (its last 52 px, the OK button included, sat under the bar) */
  .manual {
    top: calc(var(--hdr-h) + env(safe-area-inset-top, 0px));     /* below the header (L1 R1 sat over the kicker) */
    bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
    max-height: calc(100% - var(--hdr-h) - env(safe-area-inset-top, 0px) - var(--bar-h) - env(safe-area-inset-bottom, 0px) - 16px);
  }
  /* the one-column GC card scrolls on a phone: its folio and OK stay on the page's foot */
  .manual > .man-foot { position: sticky; bottom: -12px; margin: 0 -20px -12px; padding: 8px 20px 12px; background-color: var(--paper); background-image: var(--toner, none); }
  /* producer row above the category pills when the pager sits beside NAME ENTRY (§22 grid) */
  .catalog-toolbar > .artist-pills { grid-area: artists; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .catalog-toolbar > .artist-pills::-webkit-scrollbar { display: none; }
  .catalog-toolbar:has(> .disc-chips:not([hidden])):has(> .artist-pills:not([hidden])) {
    grid-template-areas: "artists artists" "pills pills" "search discs";
  }
}

/* PAY BY CARD receipt (pay.js) */
.paid-files { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.paid-files li { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-flow: column; grid-auto-columns: auto; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--stone-3); }
.paid-files .pf-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paid-files .ps1-btn { min-height: 38px; }
.paid-note { margin: 14px 0 0; opacity: .8; }

.paid-side { display: grid; align-content: start; gap: 12px; }
.paid-side .paid-note { margin: 0; }
.paid-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.paid-actions .ps1-btn { min-height: 38px; }
@media (max-width: 599px) {
  .paid-files li { grid-template-columns: 1fr 1fr; grid-auto-flow: row; }
  .paid-files .pf-name { grid-column: 1 / -1; white-space: normal; }
}