:root {
  --gold-bright: #ffd86a;
  --gold: #d4a02a;
  --gold-deep: #8a6614;
  --red: #c8232c;
  --cream: #fff4d6;
  --cabinet: #140a04;
  --black: #050200;
  --tile-bg: #fff4d6;           /* tan/cream tile face */
  --tile-bg-pressed: #ffe79a;   /* gold-tan on press */
  --tile-ink: #1a1a1a;          /* dark ink on tan */
  --tile-ink-muted: #6b6b6b;
  --wood: #3d2410;
  --ink: #1a1a1a;
  --ink-muted: #6b6b6b;
  /* Jukebox display font: Alfa Slab One — bold Americana slab, readable for
     Skip & Bev. (Replaced Monoton, whose striped neon outline was hard to read.) */
  --font-display: 'Alfa Slab One', 'Impact', 'Arial Black', sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  --tap: 72px;
  /* Single selector-screen anchor box (computed in JS from the cabinet's
     rendered rect). One opaque bezeled screen replaces the old dual
     translucent tile/body panels — nothing behind it bleeds through. */
  --screen-cx: 50vw;
  --screen-top: 42vh;
  --screen-w: 60vw;
  --screen-maxh: 42vh;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; background: var(--cabinet); color: var(--cream); font-family: var(--font-body); overflow: hidden; -webkit-font-smoothing: antialiased; user-select: none; }

/* ---- Cabinet canvas (the photoreal jukebox) ---- */
.canvas { position: fixed; inset: 0; z-index: 0; background: var(--cabinet); overflow: hidden; }
/* Ambient fill: a blurred, darkened cover of the diner scene sits behind the
   contained jukebox so the letterbox areas (portrait sides, landscape right)
   are never flat black. */
.canvas::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: url('assets/jukebox-vert.png') center center / cover no-repeat;
  filter: blur(30px) brightness(0.5) saturate(1.1);
  transform: scale(1.15);
}
.canvas-media { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 0.6s ease; pointer-events: none; }
.canvas-media.is-visible { opacity: 1; }
.canvas-tint { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse at 50% 55%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.22) 95%); }
@media (prefers-reduced-motion: reduce) { #hero-video { display: none; } }

.overlay { position: relative; z-index: 1; width: 100%; height: 100dvh; }

/* ---- Back button ---- */
#btn-back { position: fixed; bottom: calc(env(safe-area-inset-bottom) + 16px); right: calc(env(safe-area-inset-right) + 16px); z-index: 4; }
.icon-btn { width: 48px; height: 48px; border-radius: 50%; background: rgba(0,0,0,0.62); border: 2px solid var(--gold); color: var(--gold-bright); font-size: 18px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.5); }
.icon-btn:active { background: rgba(255,216,106,0.20); }
.icon-btn.hidden { visibility: hidden; }

/* ===========================================================
   THE SELECTOR SCREEN — one opaque, chrome-bezeled insert that
   reads as part of the jukebox. Every panel renders inside it.
   =========================================================== */
.screen {
  position: fixed;
  left: var(--screen-cx);
  top: var(--screen-top);            /* top edge locked just above the "47" strip */
  width: var(--screen-w);
  height: auto;                      /* content-sized: grows down with content */
  max-width: 94vw;
  max-height: var(--screen-maxh);    /* cap at cabinet base, then scroll inside */
  transform: translateX(-50%);
  display: flex;
  z-index: 2;
  /* chrome bezel: brushed-metal gradient frame */
  padding: clamp(6px, 1.3vw, 11px);
  border-radius: 18px;
  background:
    linear-gradient(150deg,
      #e9e7e3 0%, #b7b5b0 18%, #6f6f6f 42%,
      #4a4a4a 52%, #8d8b87 68%, #c4c2be 84%, #6a6a6a 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 0 0 2px rgba(0,0,0,0.55),
    0 18px 40px rgba(0,0,0,0.7),
    0 4px 10px rgba(0,0,0,0.5);
}

.screen-inner {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 11px;
  overflow: hidden;
  /* lit dark glass */
  background:
    radial-gradient(ellipse at 50% 22%, rgba(255,180,70,0.10) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(180deg, #271707 0%, #190d05 55%, #0e0703 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,216,106,0.14),
    inset 0 2px 10px rgba(0,0,0,0.85),
    inset 0 -10px 30px rgba(0,0,0,0.65);
}

/* ---- Panels: flow inside the screen so the screen sizes to content.
       Only .active is shown. Scroll regions inside a panel cap the growth. ---- */
.panel {
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: clamp(12px, 2.2vw, 18px);
  min-height: 0;
  flex: 0 1 auto;
}
.panel.active { display: flex; }

/* Name plate covering the painted "47" display (landscape only) */
.nameplate { display: none; }

/* ===========================================================
   LANDSCAPE — two-column: jukebox on the left, controls on the
   right. The user-select stays ON the jukebox over the "47"
   display; every later step opens in the right-hand column.
   =========================================================== */
@media (orientation: landscape) {
  .canvas-media { object-fit: contain; object-position: 8% center; }   /* tall jukebox, pushed left */
  /* default position = right column (groups, browse, consult, …). Equal gaps to
     the jukebox and both edges (JS-computed), as tall as the space allows. */
  .screen {
    left: var(--rpanel-left);
    right: auto;
    top: var(--rpanel-top);
    width: var(--rpanel-w);
    height: var(--rpanel-h);
    max-height: none;
    transform: none;
  }
  /* fill the taller panel: the active panel fills the screen, rows spread out,
     and the cards grow bigger to use the space. */
  .screen:not(.on-jukebox) .panel.active { flex: 1 1 auto; min-height: 0; }
  .screen:not(.on-jukebox) .cards { align-content: space-around; }
  .screen:not(.on-jukebox) .cards .tile { min-height: clamp(92px, 14vh, 150px); }
  /* user-select = over the jukebox's "47" display (left), via JS-computed vars */
  .screen.on-jukebox {
    left: var(--juke-cx);
    right: auto;
    top: var(--juke-top);
    width: var(--juke-w);
    max-height: var(--juke-maxh);
    transform: translateX(-50%);
  }
  /* the active user's name, covering the painted "47 ROCK AROUND THE CLOCK" strip */
  .nameplate.show {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    position: fixed;
    left: var(--np-cx); top: var(--np-cy);
    width: var(--np-w); height: var(--np-h);
    transform: translate(-50%, -50%);
    z-index: 3;
    background: linear-gradient(180deg, #fffaf0 0%, #f1e3c4 100%);
    border-radius: 5px;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.28), 0 3px 8px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.8);
    color: var(--ink);
    overflow: hidden;
  }
  .nameplate.show .np-dot { width: clamp(8px, 1.4vh, 13px); aspect-ratio: 1; border-radius: 50%; background: var(--red); flex: 0 0 auto; }
  .nameplate.show .np-name { font-family: var(--font-display); font-size: clamp(15px, 3.2vh, 30px); letter-spacing: 0.06em; line-height: 1; white-space: nowrap; }
}

/* ---- Shared text bits ---- */
.panel-label { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-bright); text-align: center; flex: 0 0 auto; text-shadow: 0 0 8px rgba(255,180,60,0.4); }
.panel-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(20px, 3.6vw, 28px); letter-spacing: 0.04em; color: var(--gold-bright); text-align: center; text-shadow: 0 0 10px rgba(255,180,60,0.45); flex: 0 0 auto; }
.panel-body-text { margin: 0; font-size: clamp(15px, 2.4vw, 18px); line-height: 1.45; color: var(--cream); text-align: center; opacity: 0.94; flex: 0 0 auto; }

/* ===========================================================
   FLIP CARD — the universal tile/button affordance
   =========================================================== */
/* §11 flip card: white-cream rectangle, black text, red line underneath,
   chrome slot frame. The universal selector affordance. */
.tile { position: relative; min-width: 0; background: var(--tile-bg); color: var(--tile-ink); border: 3px solid #cbc9c4; border-radius: 8px; padding: 12px 10px; min-height: 64px; cursor: pointer; transition: transform 0.12s cubic-bezier(0.2,0.7,0.3,1), background 0.12s ease, box-shadow 0.12s ease; box-shadow: 0 0 0 1px rgba(255,255,255,0.5) inset, 0 4px 0 #8f8d88, 0 6px 12px rgba(0,0,0,0.55); font-family: var(--font-body); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; }
/* red selector line under flip cards (user + category) — flows below the text
   (a flex child) so it never overlaps multi-line names. */
.user-grid .tile::after, .cards .tile::after { content: ''; flex: 0 0 auto; width: 54%; height: 3px; margin-top: 7px; background: var(--red); border-radius: 2px; }
.cards .tile[aria-pressed="true"]::after, .user-grid .tile[aria-pressed="true"]::after { background: rgba(0,0,0,0.35); }
.tile:active { transform: translateY(3px); background: var(--tile-bg-pressed); box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 1px 0 #b9b7b2, 0 3px 8px rgba(0,0,0,0.5), 0 0 18px rgba(255,200,80,0.55); }
.tile[aria-pressed="true"] { background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 100%); box-shadow: 0 0 0 3px var(--gold-bright), 0 4px 0 var(--gold-deep), 0 6px 14px rgba(0,0,0,0.5), 0 0 20px rgba(255,200,80,0.6); }
.tile[aria-pressed="true"] .tile-title { color: var(--black); }
.tile[aria-pressed="true"] .tile-sub { color: rgba(5,2,0,0.7); }
.tile-title { font-weight: 700; font-size: 16px; line-height: 1.18; color: var(--tile-ink); letter-spacing: 0.01em; }
.tile-sub { font-weight: 600; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tile-ink-muted); }
.tile-code { font-family: var(--font-display); font-weight: 400; font-size: 10px; letter-spacing: 0.14em; color: var(--red); opacity: 0.9; margin-bottom: 1px; }
.tile.tile-center { overflow: hidden; }
.tile.tile-center .tile-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(20px, 4.2vw, 28px); letter-spacing: 0.04em; color: var(--tile-ink); white-space: nowrap; max-width: 100%; }
.tile.tile-center .tile-sub { font-size: 10px; letter-spacing: 0.18em; margin-top: 4px; }

/* ---- Welcome: SKIP / BEV / GUEST stacked vertically down the center ---- */
.user-grid { display: flex; flex-direction: column; gap: 9px; align-items: center; }
.user-grid .tile { width: 100%; max-width: 300px; min-height: 68px; }

/* ===========================================================
   BUTTONS
   =========================================================== */
.btn-apple { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--tap); padding: 14px 24px; margin: 2px auto; font-family: var(--font-body); font-weight: 700; font-size: clamp(15px, 2.4vw, 18px); letter-spacing: 0.06em; text-transform: uppercase; background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 100%); color: var(--black); border: 3px solid var(--gold-deep); border-radius: 9999px; cursor: pointer; box-shadow: 0 5px 0 var(--gold-deep), 0 10px 20px rgba(0,0,0,0.5); transition: transform 0.12s ease, box-shadow 0.12s ease; width: fit-content; max-width: 100%; flex: 0 0 auto; }
.btn-apple:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--gold-deep), 0 4px 10px rgba(0,0,0,0.5); }
.apple-glyph { width: 22px; height: 22px; flex: 0 0 auto; }
.fine { text-align: center; font-size: 12px; letter-spacing: 0.04em; color: rgba(255,244,214,0.72); flex: 0 0 auto; }

.btn-ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 60px; padding: 12px 22px; font-family: var(--font-body); font-weight: 700; font-size: clamp(14px, 2.2vw, 16px); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-bright); background: transparent; border: 2px solid var(--gold); border-radius: 9999px; cursor: pointer; margin: 0 auto; width: fit-content; max-width: 100%; flex: 0 0 auto; }
.btn-ghost:active { background: rgba(255,216,106,0.14); }

/* Random-list shortcut — secondary, bottom-right of Browse (only after the user
   is browsing; they still go through selection for a real curated build). */
.browse-foot { display: flex; justify-content: center; flex: 0 0 auto; padding-top: 2px; }
.btn-spin-corner { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 16px; font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-bright); background: rgba(255,216,106,0.10); border: 2px solid var(--gold); border-radius: 9999px; cursor: pointer; }
.btn-spin-corner:active { background: rgba(255,216,106,0.20); transform: translateY(1px); }
.btn-spin-corner .spin-icon { font-size: 15px; }

/* Spin shortcut (legacy top button — no longer used) */
.btn-spin { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 12px 20px; margin: 0 auto; font-family: var(--font-body); font-weight: 700; font-size: clamp(14px, 2.3vw, 16px); letter-spacing: 0.07em; text-transform: uppercase; background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 100%); color: var(--black); border: 2px solid var(--gold-deep); border-radius: 9999px; cursor: pointer; box-shadow: 0 4px 0 var(--gold-deep), 0 8px 16px rgba(0,0,0,0.45); width: fit-content; max-width: 100%; flex: 0 0 auto; }
.btn-spin:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--gold-deep), 0 3px 8px rgba(0,0,0,0.5); }
.btn-spin .spin-icon { font-size: 17px; }

/* ===========================================================
   BROWSE — tabs + card grid
   =========================================================== */
.tabs { display: flex; gap: 7px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 2px 2px 6px; scrollbar-width: none; flex: 0 0 auto; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: 0 0 auto; min-height: 44px; padding: 9px 15px; font-family: var(--font-body); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream); background: rgba(255,244,214,0.09); border: 2px solid rgba(255,216,106,0.28); border-radius: 999px; white-space: nowrap; cursor: pointer; transition: all 0.15s ease; }
.tab.active { background: var(--gold); color: var(--black); border-color: var(--gold-bright); box-shadow: 0 0 14px rgba(255,200,80,0.5), inset 0 0 8px rgba(255,255,255,0.25); }

/* Flex-wrap + centered so a partial last row reads as intentional (centered,
   uniform cards) instead of a left-stuck gap. 2-up on phone, 3-up on tablet. */
.cards { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-content: flex-start; overflow-y: auto; flex: 1 1 auto; padding: 3px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--gold-deep) transparent; min-height: 0; }
.cards::-webkit-scrollbar { width: 7px; }
.cards::-webkit-scrollbar-thumb { background: var(--gold-deep); border-radius: 4px; }
.cards .tile { flex: 0 1 calc(33.333% - 7px); min-height: 76px; padding: 14px 10px; }
.cards .tile-title { font-size: clamp(13px, 2.2vw, 16px); }
/* Phones: compact cards so even the 9-group screen fits without scrolling under
   the locked overlay top. */
@media (max-width: 480px) {
  .panel { padding: 9px; gap: 5px; }
  .panel-label { font-size: 10px; letter-spacing: 0.12em; }
  .cards { gap: 6px; }
  .cards .tile { min-height: 50px; padding: 7px 7px; }
  .cards .tile-title { font-size: 12.5px; line-height: 1.1; }
  .cards .tile-sub { font-size: 9px; }
  .cards .tile-code { font-size: 9px; }
  .cards .tile::after { margin-top: 3px; width: 46%; }
  .more-select { min-height: 44px; font-size: 12px; }
  .btn-spin-corner { min-height: 44px; font-size: 11px; }
}

/* Type Your Own — distinct gold-tinted flip card (LLM free-text request) */
.tile-tyo { background: linear-gradient(180deg, #fff7e0 0%, #ffe9b8 100%); border-color: var(--gold); }
.tile-tyo .tile-code { color: var(--gold-deep); }
.tile-tyo::after { background: var(--gold-deep); }

/* "More …" overflow dropdown under the card grid */
#browse-more { flex: 0 0 auto; padding-top: 8px; }
.more-select { width: 100%; min-height: 52px; padding: 12px 16px; font-family: var(--font-body); font-weight: 700; font-size: 14px; letter-spacing: 0.04em; color: var(--gold-bright); background: rgba(255,216,106,0.10); border: 2px solid var(--gold); border-radius: 12px; cursor: pointer; }
.more-select option { color: #1a1a1a; }

/* ===========================================================
   CONSULT — questions + artist input
   =========================================================== */
.consult-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(17px, 3vw, 23px); letter-spacing: 0.03em; color: var(--gold-bright); text-shadow: 0 0 10px rgba(255,180,60,0.42); text-align: center; margin: 0; flex: 0 0 auto; line-height: 1.18; }
.consult-questions { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; flex: 1 1 auto; padding: 4px 3px; scrollbar-width: thin; scrollbar-color: var(--gold-deep) transparent; min-height: 0; }
.consult-questions::-webkit-scrollbar { width: 7px; }
.consult-questions::-webkit-scrollbar-thumb { background: var(--gold-deep); border-radius: 4px; }
.q-block { display: flex; flex-direction: column; gap: 7px; }
.q-label { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream); opacity: 0.92; text-align: center; }
.q-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.q-options.cols-2 { grid-template-columns: 1fr 1fr; }
.q-options .tile { min-height: 64px; }
.consult-artist { padding: 14px 14px; font-family: var(--font-body); font-size: 16px; border: 0; border-radius: 10px; width: 100%; background: var(--tile-bg); color: var(--ink); box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 4px 10px rgba(0,0,0,0.3); }
.consult-artist::placeholder { color: #8a8a8a; }

/* ===========================================================
   BUILD — spinning record
   =========================================================== */
.build { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 22px; flex: 1 1 auto; }
.record { width: clamp(110px, 30vw, 150px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at center, var(--red) 0 16%, #1a1a1a 16% 19%, #2a2a2a 19% 28%, #1a1a1a 28% 31%, #2a2a2a 31% 42%, #1a1a1a 42% 45%, #2a2a2a 45% 100%); position: relative; animation: spin 1.6s linear infinite; box-shadow: 0 10px 26px rgba(0,0,0,0.65), 0 0 26px rgba(255,200,80,0.32); }
.record::after { content: ''; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: var(--gold-bright); border-radius: 50%; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .record { animation: none; } }
.status { font-family: var(--font-body); font-weight: 600; font-size: clamp(15px, 2.4vw, 18px); letter-spacing: 0.03em; color: var(--gold-bright); text-shadow: 0 0 10px rgba(255,180,60,0.32); min-height: 1.4em; padding: 0 6px; }

/* ===========================================================
   PREVIEW — editable name + track list
   =========================================================== */
.preview-name-input { width: 100%; padding: 12px 14px; background: #fff8e8; color: #1a1a1a; border: 0; border-radius: 10px; font-family: var(--font-display); font-weight: 400; font-size: clamp(15px, 3vw, 20px); letter-spacing: 0.02em; text-align: center; box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 4px 10px rgba(0,0,0,0.35); flex: 0 0 auto; }
.preview-name-input:focus { outline: 3px solid var(--gold-bright); }
.preview-meta { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream); opacity: 0.85; text-align: center; flex: 0 0 auto; }
.preview-list { display: flex; flex-direction: column; overflow-y: auto; flex: 1 1 auto; background: rgba(255,244,214,0.06); border-radius: 10px; padding: 4px; scrollbar-width: thin; scrollbar-color: var(--gold-deep) transparent; min-height: 60px; }
.preview-list::-webkit-scrollbar { width: 7px; }
.preview-list::-webkit-scrollbar-thumb { background: var(--gold-deep); border-radius: 4px; }
.preview-track { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 6px; }
.preview-track + .preview-track { border-top: 1px solid rgba(255,244,214,0.09); }
.preview-track-num { font-family: var(--font-display); font-weight: 400; font-size: 12px; color: var(--gold); text-align: right; letter-spacing: 0.04em; }
.preview-track-meta { display: flex; flex-direction: column; min-width: 0; }
.preview-track-title { font-family: var(--font-body); font-weight: 600; font-size: 14px; line-height: 1.25; color: var(--cream); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-track-artist { font-family: var(--font-body); font-weight: 400; font-size: 12px; line-height: 1.25; color: rgba(255,244,214,0.68); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-actions { display: flex; flex-direction: column; gap: 8px; align-items: center; flex: 0 0 auto; }
.preview-actions .btn-apple, .preview-actions .btn-ghost { width: 100%; max-width: 380px; }

/* ===========================================================
   DELIVERED
   =========================================================== */
.delivered { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; flex: 1 1 auto; justify-content: center; }
.delivered .count { font-family: var(--font-display); font-weight: 400; font-size: clamp(48px, 12vw, 76px); color: var(--gold-bright); text-shadow: 0 0 20px rgba(255,180,60,0.6); line-height: 1; letter-spacing: 0.02em; }
.delivered .count small { display: block; font-family: var(--font-body); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cream); margin-top: 8px; opacity: 0.85; }
.delivered .playlist-name { background: #fff8e8; color: #1a1a1a; border-radius: 10px; padding: 13px 16px; font-family: var(--font-display); font-weight: 400; font-size: clamp(13px, 2.6vw, 17px); letter-spacing: 0.02em; width: 100%; text-align: center; box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 4px 10px rgba(0,0,0,0.35); }
.delivered .quip { font-size: clamp(14px, 2.2vw, 16px); color: var(--cream); opacity: 0.94; line-height: 1.4; }
.delivered .actions { display: flex; flex-direction: column; gap: 10px; width: 100%; align-items: center; }
.delivered .actions .btn-apple, .delivered .actions .btn-ghost { width: 100%; max-width: 340px; }

/* ---- Set the Stage (profile builder) ---- */
.setup-body { display: flex; flex-direction: column; gap: 9px; overflow-y: auto; flex: 1 1 auto; padding: 3px 3px 2px; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--gold-deep) transparent; }
.setup-body::-webkit-scrollbar { width: 6px; }
.setup-body::-webkit-scrollbar-thumb { background: var(--gold-deep); border-radius: 4px; }

.chip-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.chip { min-height: 44px; padding: 9px 13px; font-family: var(--font-body); font-weight: 700; font-size: 14px; letter-spacing: 0.03em; color: var(--cream); background: rgba(255,244,214,0.09); border: 2px solid rgba(255,216,106,0.30); border-radius: 999px; cursor: pointer; white-space: nowrap; }
.chip.on, .chip[aria-pressed="true"] { background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 100%); color: var(--black); border-color: var(--gold-bright); box-shadow: 0 0 14px rgba(255,200,80,0.5), inset 0 0 8px rgba(255,255,255,0.25); }

.setup-list { display: flex; flex-direction: column; gap: 10px; }
.setup-person-row { display: flex; align-items: center; gap: 8px; }
.setup-person-row .consult-artist { flex: 1 1 auto; }
.setup-card-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.setup-card-row .consult-artist { flex: 1 1 140px; }
.setup-remove { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,0.5); border: 2px solid var(--gold); color: var(--gold-bright); font-size: 22px; line-height: 1; cursor: pointer; }
.setup-add { margin: 2px auto 0; }
.setup-toggle-row { display: flex; justify-content: center; margin-top: 4px; }

.setup-nav { display: flex; gap: 10px; justify-content: center; align-items: center; margin-top: 6px; flex: 0 0 auto; }
.setup-nav .btn-apple, .setup-nav .btn-ghost { width: auto; min-width: 130px; }

.setup-review { display: flex; flex-direction: column; gap: 10px; }
.setup-review-item { background: rgba(255,244,214,0.07); border: 1px solid rgba(255,216,106,0.22); border-radius: 12px; padding: 10px 14px; text-align: left; }
.setup-review-name { font-family: var(--font-display); font-weight: 400; font-size: 16px; letter-spacing: 0.03em; color: var(--gold-bright); }
.setup-review-tastes { font-family: var(--font-body); font-size: 13px; color: var(--cream); opacity: 0.9; line-height: 1.35; margin-top: 3px; }

/* Discreet "Set up this jukebox" entry on the landing screen. */
.setup-link { margin: 14px auto 0; display: block; background: transparent; border: 0; color: var(--cream); opacity: 0.55; font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
.setup-link:active { opacity: 0.9; }

/* Single-person landing: the name plate sits on the "47" strip and IS the
   "press to begin" button (all orientations, via the JS-computed --np-* vars). */
#single-begin { display: none; }
/* A cream flip-card on the "47" strip: name, red line, "press to play" inside. */
#single-begin.show {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  position: fixed; left: var(--np-cx); top: var(--np-cy);
  width: var(--np-w); min-width: 160px; height: var(--np-h);
  box-sizing: border-box;
  transform: translate(-50%, -50%); z-index: 5;
  background: linear-gradient(180deg, #fffaf0 0%, #f1e3c4 100%);
  border: 3px solid #cbc9c4; border-radius: 8px; cursor: pointer; overflow: hidden;
  padding: 6px 12px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.55) inset, 0 4px 0 #8f8d88, 0 6px 12px rgba(0,0,0,0.55);
}
#single-begin.show:active { transform: translate(-50%, -50%) translateY(3px); }
#single-begin .sb-title { font-family: var(--font-display); font-weight: 400; color: var(--ink); font-size: clamp(14px, 2.6vh, 24px); letter-spacing: 0.03em; line-height: 1.1; white-space: nowrap; }
#single-begin .sb-line { flex: 0 0 auto; width: 54%; height: 3px; background: var(--red); border-radius: 2px; }
#single-begin .sb-play { font-family: var(--font-body); font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tile-ink-muted); }
/* On the single-person landing, suppress the empty overlay box. */
.screen.single-landing { display: none; }

/* END-OF-FILE-MARKER */