/* ==========================================================================
   CHAI KI TAPRI — style.css
   Design tokens
   ------------------------------------------------------------------------
   Body / deck   : #1c130c (deep roasted-chai brown), #120c08 (charcoal edge)
   Brass trim    : #c99a4b -> #f0d089 (gradient brass)
   Cream text    : #f3e6c8
   Ember accent  : #ff8a3d (play button glow, active states)
   Online dot    : #7ddc7d
   Type          : "Space Mono" (digital/dial numerals), "DM Serif Display"
                    is NOT used — brief forbids extra headline typography.
                    Only the HUD + player carry type; the poster is silent.
   ========================================================================== */

@font-face {
  /* System fallbacks are intentional — no webfont blocking first paint.
     Space Mono / a monospace stack reads as "digital dial", which is the point. */
  font-family: 'TapriMono';
  src: local('Space Mono'), local('SFMono-Regular'), local('Consolas');
}

:root {
  --deck-dark: #1c130c;
  --deck-charcoal: #120c08;
  --deck-edge: #0a0705;
  --brass-1: #f0d089;
  --brass-2: #c99a4b;
  --brass-3: #8a611f;
  --cream: #f3e6c8;
  --cream-dim: #cbb894;
  --ember: #ff8a3d;
  --ember-dim: #b5602a;
  --online-dot: #7bdc7b;
  --shadow-deep: 0 18px 40px rgba(0,0,0,0.55);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  /* ---- 70s hi-fi equalizer palette (player component only) ---- */
  --eq-orange: #d6711f;
  --eq-orange-lt: #e8822f;
  --eq-orange-dk: #a85512;
  --eq-cream: #d9d6d0;
  --eq-cream-lt: #ece9e3;
  --eq-cream-dk: #b3afa6;
  --eq-screen: #1a1410;
  --eq-screen-2: #0f0b08;
  --eq-amber: #ff9d42;
  --eq-amber-dim: #c96f22;
  --eq-wood: #4a2a18;
  --eq-wood-lt: #6b3d22;
  --eq-chrome-hi: #f2f0ec;
  --eq-chrome-mid: #97928a;
  --eq-chrome-lo: #35322d;
  --eq-text-dk: #2a1c10;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  background: var(--deck-edge);
  font-family: 'TapriMono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100dvh;
  position: relative;
}

img { -webkit-user-drag: none; user-select: none; }

/* ============ POSTER (the hero) ============ */

.poster-wrap {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  background: #05030200; /* transparent — object-fit:contain fill handled below */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Blurred cover backdrop of the same image, so contain never leaves bare edges */
.poster-wrap::before {
  content: "";
  position: absolute;
  inset: -30px;
  background-image: url('/assets/desktop-poster.jpg');
  background-size: cover;
  background-position: center;
  filter: blur(38px) brightness(0.55) saturate(1.1);
  transform: scale(1.1);
  z-index: 0;
}

@media (max-width: 767px) {
  .poster-wrap::before {
    background-image: url('/assets/mobile-poster.jpg');
  }
}

.poster-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100dvh;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* ============ HUD: clock + online ============ */

.hud {
  position: fixed;
  z-index: 10;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--cream);
  text-shadow: 0 0 10px rgba(255, 200, 120, 0.45), 0 1px 2px rgba(0,0,0,0.6);
  opacity: 0.92;
  pointer-events: none;
  user-select: none;
}

.clock {
  top: 24px;
  left: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.online {
  top: 24px;
  right: 28px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  text-transform: lowercase;
}

.online .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--online-dot);
  box-shadow: 0 0 6px 1px rgba(123, 220, 123, 0.9);
  display: inline-block;
  animation: pulse-dot 2.4s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.85); }
}

@media (max-width: 767px) {
  .clock { top: 16px; left: 16px; font-size: 13px; }
  .online { top: 16px; right: 16px; font-size: 12px; }
}

/* ============ ORDER BILL — 90s receipt, top right below online HUD ============ */

.order-bill {
  position: fixed;
  z-index: 15;
  top: 66px;
  right: 28px;
  width: 190px;
}

/* Bill (and its top-right slot) only appears once something's actually been
   ordered — an empty "VIEW BILL" sitting there permanently was just clutter.
   #tapriLighter occupies the exact same slot and is shown instead while
   the bill is empty; JS toggles both together in updateBill(). */
.order-bill.is-empty {
  display: none;
}

/* Compact tab — hidden on desktop, the receipt is always open there */
.order-bill-tab {
  display: none;
}

.order-bill-badge {
  display: none;
}

.order-bill-content {
  font-family: inherit;
  color: #2a1c10;
  background: repeating-linear-gradient(0deg, #efe4c8 0px, #efe4c8 2px, #e8dbb9 2px, #e8dbb9 4px);
  border: 1px solid #c9b98a;
  box-shadow: var(--shadow-deep);
  padding: 12px 12px 16px;
  clip-path: polygon(
    0% 0%, 100% 0%, 100% 95%,
    92% 100%, 84% 95%, 76% 100%, 68% 95%, 60% 100%, 52% 95%, 44% 100%,
    36% 95%, 28% 100%, 20% 95%, 12% 100%, 4% 95%, 0% 100%
  );
}

.order-bill-header {
  text-align: center;
  border-bottom: 1px dashed #8a7a52;
  padding-bottom: 6px;
  margin-bottom: 6px;
}
.order-bill-title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.order-bill-close {
  display: none;
}

.order-bill-empty {
  font-size: 10px;
  text-align: center;
  color: #8a7a52;
  padding: 10px 0;
}

.order-bill-line {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: 10px;
  margin: 3px 0;
}
.order-bill-line .bl-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-bill-line .bl-qty { color: #6b5c38; flex: 0 0 auto; }
.order-bill-line .bl-amt { flex: 0 0 auto; min-width: 30px; text-align: right; }

.order-bill-total-row {
  display: flex;
  justify-content: space-between;
  border-top: 1px dashed #8a7a52;
  margin-top: 8px;
  padding-top: 6px;
  font-size: 12px;
  font-weight: 700;
}
.order-bill-total-amt { color: #a34a12; }

.order-bill-note {
  margin-top: 10px;
  text-align: center;
  font-size: 9.5px;
  line-height: 1.5;
  color: #4a3a1c;
}

.order-bill-share {
  margin-top: 8px;
  width: 100%;
  padding: 7px 0;
  border-radius: 5px;
  border: 1.5px solid var(--brass-3);
  background: linear-gradient(180deg, var(--brass-1), var(--brass-2));
  color: #2a1c10;
  font-family: inherit;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.order-bill-share:active { transform: translateY(1px); }

@media (max-width: 767px) {
  .order-bill { top: 54px; right: 16px; width: auto; }

  /* On mobile the tab is the only thing visible until opened */
  .order-bill-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #2a1608;
    background: linear-gradient(180deg, var(--brass-1), var(--brass-2) 60%, var(--brass-3));
    border: 1px solid #6f4d1a;
    border-radius: 8px;
    padding: 7px 11px;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 3px 6px rgba(0,0,0,0.35);
    transition: transform 0.08s ease;
  }
  .order-bill-tab:active { transform: translateY(1px); }

  .order-bill-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--ember);
    color: #2a1608;
    font-size: 9px;
    font-weight: 700;
  }

  /* Content becomes a dropdown from the tab — closed until .order-bill.is-open */
  .order-bill-content {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 158px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    padding-top: 0;
    padding-bottom: 0;
    transition: max-height 0.28s ease, opacity 0.2s ease;
  }

  .order-bill.is-open .order-bill-content {
    max-height: min(360px, 65dvh);
    opacity: 1;
    overflow-y: auto;
    pointer-events: auto;
    padding: 12px 12px 16px;
  }

  .order-bill-title { font-size: 10.5px; }
  .order-bill-note { font-size: 9px; }
}

@media (max-width: 359px) {
  .order-bill { right: 10px; }
  .order-bill-content { width: 144px; }
}

/* ============ PLAYER (cassette / radio deck) ============ */

.player {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 20;
  width: min(360px, calc(100vw - 32px));
  padding-bottom: var(--safe-b);
}

.player-shell {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: var(--eq-cream);
  border: 1px solid var(--eq-wood);
  box-shadow:
    0 10px 26px rgba(0,0,0,0.55),
    inset 0 0 0 1px rgba(255,255,255,0.25);
}

/* Wood side trim, matching the reference cabinet edges */
.player-shell::before,
.player-shell::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, var(--eq-wood-lt), var(--eq-wood));
  z-index: 5;
}
.player-shell::before { left: 0; }
.player-shell::after { right: 0; }

@media (max-width: 767px) {
  .player {
    bottom: 16px;
    width: calc(100vw - 24px);
    max-width: 340px;
  }
  .player-shell { border-radius: 9px; }
}

.eq-brand {
  padding: 5px 12px 3px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--eq-chrome-mid);
  background: linear-gradient(180deg, #2b2b2b, #161616);
}
.eq-brand span { color: var(--eq-chrome-hi); }

.player-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.eq-screen {
  margin: 0 7px;
  padding: 4px;
  background: linear-gradient(180deg, var(--eq-chrome-hi), var(--eq-chrome-mid) 12%, var(--eq-chrome-lo) 100%);
  border-radius: 4px 4px 0 0;
}

.eq-display {
  height: 34px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  padding: 4px 6px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent 30%),
    linear-gradient(180deg, var(--eq-screen), var(--eq-screen-2));
  border-radius: 2px;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.8);
  overflow: hidden;
}

.eq-bar {
  flex: 1 1 0;
  max-width: 6px;
  height: 18%;
  border-radius: 1px 1px 0 0;
  background: linear-gradient(180deg, #ffd18a, var(--eq-amber) 40%, var(--eq-amber-dim) 100%);
  box-shadow: 0 0 4px rgba(255, 157, 66, 0.35);
  animation: eq-bounce 1.6s ease-in-out infinite;
  animation-play-state: paused;
  opacity: 0.5;
}
.player.is-playing .eq-bar { opacity: 1; animation-play-state: running; }

.eq-bar:nth-child(1)  { animation-duration: 1.3s; animation-delay: -0.9s; }
.eq-bar:nth-child(2)  { animation-duration: 0.9s; animation-delay: -0.2s; }
.eq-bar:nth-child(3)  { animation-duration: 1.5s; animation-delay: -1.1s; }
.eq-bar:nth-child(4)  { animation-duration: 1.1s; animation-delay: -0.5s; }
.eq-bar:nth-child(5)  { animation-duration: 1.7s; animation-delay: -0.3s; }
.eq-bar:nth-child(6)  { animation-duration: 0.95s; animation-delay: -0.8s; }
.eq-bar:nth-child(7)  { animation-duration: 1.4s; animation-delay: -1.3s; }
.eq-bar:nth-child(8)  { animation-duration: 1.05s; animation-delay: -0.1s; }
.eq-bar:nth-child(9)  { animation-duration: 1.6s; animation-delay: -0.7s; }
.eq-bar:nth-child(10) { animation-duration: 0.85s; animation-delay: -0.4s; }
.eq-bar:nth-child(11) { animation-duration: 1.35s; animation-delay: -1.0s; }
.eq-bar:nth-child(12) { animation-duration: 1.15s; animation-delay: -0.6s; }
.eq-bar:nth-child(13) { animation-duration: 1.55s; animation-delay: -0.15s; }
.eq-bar:nth-child(14) { animation-duration: 1.0s; animation-delay: -0.95s; }

@keyframes eq-bounce {
  0%, 100% { height: 15%; }
  50% { height: 92%; }
}

@media (prefers-reduced-motion: reduce) {
  .eq-bar { animation: none !important; height: 45% !important; }
}

.player-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin: 0 7px;
  background: linear-gradient(180deg, #241a12, #17110a);
  border-radius: 0 0 3px 3px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.6);
}

.track-info {
  flex: 1 1 auto;
  min-width: 0;
}

.track-title {
  color: var(--eq-amber);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0 6px rgba(255,157,66,0.35);
}

.track-artist {
  color: var(--cream-dim);
  font-size: 8.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 1px;
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(180deg, #35281a, #1e150c);
  border: 1px solid var(--eq-wood-lt);
  color: var(--eq-amber);
  font-family: inherit;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 5px 7px;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 1px 3px rgba(0,0,0,0.4);
  transition: transform 0.08s ease;
}
.list-btn:hover { border-color: var(--eq-amber-dim); }
.list-btn:active { transform: translateY(1px); }
.list-icon { font-size: 9px; }

@media (max-width: 767px) {
  .track-title { font-size: 10px; }
  .track-artist { font-size: 8px; }
  .list-label { display: none; }
  .list-btn { padding: 6px; }
}

/* ---- Seek row ---- */

.seek-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.time {
  flex: 0 0 auto;
  width: 32px;
  text-align: center;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  color: var(--eq-amber);
  background: var(--eq-screen);
  border-radius: 2px;
  padding: 2px 0;
  text-shadow: 0 0 5px rgba(255,157,66,0.6);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.7);
}

.seek {
  flex: 1 1 auto;
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--eq-orange) var(--seek-pct, 0%), var(--eq-cream-dk) var(--seek-pct, 0%));
  cursor: pointer;
}
.seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--eq-chrome-hi), var(--eq-chrome-mid) 60%, var(--eq-chrome-lo) 100%);
  border: 1px solid var(--eq-chrome-lo);
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  margin-top: -0.5px;
}
.seek::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--eq-chrome-hi), var(--eq-chrome-mid) 60%, var(--eq-chrome-lo) 100%);
  border: 1px solid var(--eq-chrome-lo);
}
.seek::-moz-range-track {
  height: 3px;
  border-radius: 3px;
  background: var(--eq-cream-dk);
}

/* ---- Controls row ---- */

.knob-band {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px 14px;
  background: linear-gradient(180deg, var(--eq-orange-lt), var(--eq-orange) 60%, var(--eq-orange-dk));
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.25), inset 0 -3px 6px rgba(0,0,0,0.25);
}

.deco-switch {
  flex: 0 0 auto;
  width: 8px;
  height: 16px;
  border-radius: 2px;
  background: linear-gradient(180deg, #2a2a2a, #111);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.8), 0 1px 1px rgba(255,255,255,0.15);
  position: relative;
}
.deco-switch::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  top: 2px;
  height: 6px;
  border-radius: 1px;
  background: linear-gradient(180deg, #8a8a8a, #4a4a4a);
}

.controls-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.ctrl-btn {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Chrome knob styling, shared by side + play buttons */
.ctrl-side,
.ctrl-play {
  border-radius: 50%;
  position: relative;
  background:
    conic-gradient(from 0deg,
      rgba(255,255,255,0.35) 0deg, rgba(0,0,0,0.15) 15deg,
      rgba(255,255,255,0.3) 30deg, rgba(0,0,0,0.15) 45deg,
      rgba(255,255,255,0.35) 60deg, rgba(0,0,0,0.15) 75deg,
      rgba(255,255,255,0.3) 90deg, rgba(0,0,0,0.15) 105deg,
      rgba(255,255,255,0.35) 120deg, rgba(0,0,0,0.15) 135deg,
      rgba(255,255,255,0.3) 150deg, rgba(0,0,0,0.15) 165deg,
      rgba(255,255,255,0.35) 180deg, rgba(0,0,0,0.15) 195deg,
      rgba(255,255,255,0.3) 210deg, rgba(0,0,0,0.15) 225deg,
      rgba(255,255,255,0.35) 240deg, rgba(0,0,0,0.15) 255deg,
      rgba(255,255,255,0.3) 270deg, rgba(0,0,0,0.15) 285deg,
      rgba(255,255,255,0.35) 300deg, rgba(0,0,0,0.15) 315deg,
      rgba(255,255,255,0.3) 330deg, rgba(0,0,0,0.15) 345deg, rgba(255,255,255,0.35) 360deg),
    radial-gradient(circle at 38% 32%, var(--eq-chrome-hi) 0%, var(--eq-chrome-mid) 55%, var(--eq-chrome-lo) 100%);
  border: 1px solid #241f1a;
  color: var(--eq-text-dk);
  box-shadow:
    0 2px 5px rgba(0,0,0,0.45),
    inset 0 1px 1px rgba(255,255,255,0.5);
  transition: transform 0.08s ease;
}
.ctrl-side::after,
.ctrl-play::after {
  /* center cap, hides the conic seam in the middle */
  content: "";
  position: absolute;
  inset: 28%;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, var(--eq-chrome-hi), var(--eq-chrome-mid) 70%, var(--eq-chrome-lo));
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
}
.ctrl-side span,
.ctrl-play span {
  position: relative;
  z-index: 1;
}

.ctrl-side {
  width: 30px;
  height: 30px;
  font-size: 9px;
}
.ctrl-side:active { transform: translateY(1px) scale(0.96); }

.ctrl-play {
  width: 46px;
  height: 46px;
  font-size: 14px;
}
.ctrl-play:active { transform: translateY(1px) scale(0.97); }
.ctrl-play span { transform: translateX(1px); }

@media (max-width: 767px) {
  .knob-band { gap: 10px; padding: 9px 12px; }
  .controls-row { gap: 11px; }
  .ctrl-side { width: 26px; height: 26px; font-size: 8px; }
  .ctrl-play { width: 42px; height: 42px; font-size: 13px; }
}

/* ---- Order Your Chai button + menu panel + toast ---- */

.chassis-band {
  padding: 9px 12px 10px;
  background: linear-gradient(180deg, var(--eq-cream-lt), var(--eq-cream));
}

.order-toggle-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 5px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--eq-amber);
  background: linear-gradient(180deg, #2e2118, #17110b);
  border: 1px solid #100b07;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 4px rgba(0,0,0,0.35);
  transition: transform 0.08s ease;
}
.order-toggle-btn:active { transform: translateY(1px) scale(0.99); }
.order-cup { font-size: 12px; }

@media (max-width: 767px) {
  .chassis-band { padding: 8px 10px 9px; }
  .order-toggle-btn { font-size: 9.5px; padding: 6px 9px; }
}

.order-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 10px);
  max-height: 0;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(180deg, #211609, #150e07);
  border: 1px solid var(--eq-wood-lt);
  box-shadow: var(--shadow-deep);
  transition: max-height 0.28s ease, opacity 0.2s ease;
  opacity: 0;
}

.player.order-open .order-panel {
  max-height: min(420px, 60dvh);
  opacity: 1;
}

.order-panel-inner {
  max-height: min(420px, 60dvh);
  overflow-y: auto;
  padding: 12px 12px 6px;
}
.order-panel-inner::-webkit-scrollbar { width: 6px; }
.order-panel-inner::-webkit-scrollbar-thumb { background: var(--eq-wood-lt); border-radius: 4px; }
.order-panel-inner::-webkit-scrollbar-track { background: transparent; }

.order-group-title {
  color: var(--eq-amber);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 10px 4px 6px;
  text-transform: uppercase;
}
.order-group-title:first-child { margin-top: 2px; }

.order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.order-item:hover { background: rgba(255,255,255,0.05); }
.order-item:active { background: rgba(255, 138, 61, 0.12); }

.order-item-meta { min-width: 0; }
.order-item-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--cream);
}
.order-item-price {
  font-size: 10px;
  color: var(--eq-amber-dim);
  margin-top: 1px;
}
.order-item-desc {
  font-size: 10.5px;
  color: var(--cream-dim);
  margin-top: 2px;
  line-height: 1.4;
}

/* ---- Quantity stepper (replaces the old single-tap ORDER pill) ---- */

.order-item-stepper {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.order-step-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  color: var(--eq-text-dk);
  background: radial-gradient(circle at 38% 32%, var(--eq-chrome-hi) 0%, var(--eq-chrome-mid) 55%, var(--eq-chrome-lo) 100%);
  border: 1px solid #241f1a;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.45),
    inset 0 1px 1px rgba(255,255,255,0.5);
  transition: transform 0.08s ease;
}
.order-step-btn:active {
  transform: translateY(1px) scale(0.94);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
}

.order-item-qty {
  min-width: 14px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--ember);
  font-variant-numeric: tabular-nums;
}

.order-toast {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translate(-50%, 8px);
  z-index: 30;
  width: max-content;
  max-width: min(340px, calc(100vw - 48px));
  background: linear-gradient(180deg, #2a1c0d, #170f08);
  border: 1px solid var(--eq-amber-dim);
  color: var(--cream);
  font-size: 12.5px;
  padding: 10px 16px;
  border-radius: 10px;
  box-shadow: var(--shadow-deep);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.order-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 767px) {
  .order-toast { font-size: 11.5px; max-width: min(280px, calc(100vw - 32px)); }
}

/* ---- Song list panel ---- */

.song-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 10px);
  max-height: 0;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(180deg, #211609, #150e07);
  border: 1px solid var(--eq-wood-lt);
  box-shadow: var(--shadow-deep);
  transition: max-height 0.28s ease, opacity 0.2s ease;
  opacity: 0;
}

.player.list-open .song-panel {
  max-height: min(320px, 50dvh);
  opacity: 1;
}

.song-panel-inner {
  max-height: min(320px, 50dvh);
  overflow-y: auto;
  padding: 6px;
}

.song-panel-loading {
  padding: 16px;
  text-align: center;
  color: var(--cream-dim);
  font-size: 12px;
  letter-spacing: 0.06em;
}

.song-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 8px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--cream-dim);
  transition: background 0.12s ease;
}
.song-row:hover { background: rgba(255,255,255,0.05); }

.song-row .idx {
  flex: 0 0 auto;
  width: 22px;
  font-size: 10px;
  color: var(--eq-amber-dim);
  text-align: right;
}

.song-row .meta { flex: 1 1 auto; min-width: 0; }

.song-row .s-title {
  font-size: 12.5px;
  color: var(--cream);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.song-row .s-artist {
  font-size: 10px;
  color: var(--cream-dim);
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.song-row .now-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 6px 1px rgba(255,138,61,0.9);
  opacity: 0;
}

.song-row.active {
  background: rgba(240, 208, 137, 0.08);
}
.song-row.active .s-title { color: var(--eq-amber); }
.song-row.active .now-dot { opacity: 1; animation: pulse-dot 1.6s ease-in-out infinite; }

/* Scrollbar (webkit) — kept subtle */
.song-panel-inner::-webkit-scrollbar { width: 6px; }
.song-panel-inner::-webkit-scrollbar-thumb { background: var(--eq-wood-lt); border-radius: 4px; }
.song-panel-inner::-webkit-scrollbar-track { background: transparent; }

/* ---- Hidden YouTube host ---- */

.yt-host {
  position: fixed;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  bottom: 0;
  left: 0;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .reel-spin, .online .dot, .song-row.active .now-dot { animation: none !important; }
}

/* ---- Focus visibility (accessibility, kept subtle to match retro deck) ---- */
button:focus-visible, .seek:focus-visible {
  outline: 2px solid var(--eq-amber);
  outline-offset: 2px;
}

/* ---- Very small phones ---- */
@media (max-width: 359px) {
  .player { width: calc(100vw - 16px); }
  .controls-row { gap: 8px; }
  .knob-band { gap: 8px; padding: 8px 10px; }
}


/* ==========================================================================
   REQUESTED POLISH — keep the original design, only add the requested UX.
   ========================================================================== */

/* ---- Supplied poster videos: exact 16:9 desktop / 9:16 mobile fit ---- */
.poster-wrap {
  isolation: isolate;
}
.poster-fallback {
  z-index: 1;
  object-fit: cover;
  object-position: center center;
}
.poster-video {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.poster-video.is-ready { opacity: 1; }
.poster-video.is-error { display: none; }
.poster-video-mobile { display: none; }

@media (max-width: 767px) {
  .poster-video-desktop { display: none; }
  .poster-video-mobile { display: block; }
}

/* ---- Left-middle Chai sound button: OFF on first visit ---- */
.chai-sound-btn {
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 25;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(240,208,137,0.85);
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #2a1c10;
  background: radial-gradient(circle at 35% 30%, #f7e5a9, #c99a4b 70%, #8a611f);
  box-shadow: 0 5px 14px rgba(0,0,0,0.45), inset 0 1px 2px rgba(255,255,255,0.55);
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
}
.chai-sound-btn:hover { filter: brightness(1.08); }
.chai-sound-btn:active { transform: translateY(-50%) scale(.95); }
.chai-sound-icon {
  font-size: 23px;
  line-height: 1;
  transform: translateY(-1px);
}
.chai-sound-wave {
  position: absolute;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(255,218,145,0);
  border-radius: 50%;
  pointer-events: none;
}
.chai-sound-btn.is-on {
  box-shadow: 0 0 0 5px rgba(255,157,66,.10), 0 5px 18px rgba(255,138,61,.35), inset 0 1px 2px rgba(255,255,255,.55);
}
.chai-sound-btn.is-on .chai-sound-wave {
  border-color: rgba(255,218,145,.72);
  animation: chai-sound-pulse 1.45s ease-out infinite;
}
@keyframes chai-sound-pulse {
  0% { transform: scale(.72); opacity: .9; }
  100% { transform: scale(1.22); opacity: 0; }
}
@media (max-width: 767px) {
  .chai-sound-btn {
    left: 12px;
    width: 44px;
    height: 44px;
  }
  .chai-sound-icon { font-size: 21px; }
}

/* ---- 90s handwritten bill ---- */
.order-bill-content {
  position: relative;
}
.order-bill-ready {
  text-align: center;
  padding: 6px 2px 4px;
}
.order-bill-ready-title {
  font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  font-size: 15px;
  font-weight: 700;
  transform: rotate(-1deg);
}
.order-bill-ready-sub {
  margin-top: 5px;
  font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  font-size: 9px;
  line-height: 1.45;
  color: #6b5c38;
}
.order-bill-view {
  margin-top: 8px;
  width: 100%;
  padding: 7px 0;
  border-radius: 5px;
  border: 1.5px solid var(--brass-3);
  background: linear-gradient(180deg, var(--brass-1), var(--brass-2));
  color: #2a1c10;
  font-family: inherit;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: .05em;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,.3);
}
.order-bill-view:active { transform: translateY(1px); }

.bill-name-form {
  display: grid;
  gap: 7px;
  padding: 2px 0 4px;
  font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
}
.bill-name-kicker {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  transform: rotate(-1deg);
}
.bill-name-form label {
  font-size: 10px;
  color: #6b5c38;
}
.bill-name-input {
  width: 100%;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid #8a7a52;
  outline: none;
  background: transparent;
  color: #2a1c10;
  font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  font-size: 13px;
  padding: 5px 2px;
}
.bill-name-input::placeholder { color: #9a8b69; }
.bill-name-submit {
  margin-top: 2px;
  border: 1px solid #8a611f;
  border-radius: 5px;
  padding: 7px 6px;
  background: #d9c18a;
  color: #2a1c10;
  font-family: inherit;
  font-size: 9.5px;
  font-weight: 800;
  cursor: pointer;
}
.bill-name-submit:active { transform: translateY(1px); }

.bill-customer-name {
  margin: 2px 0 8px;
  padding-bottom: 5px;
  border-bottom: 1px dashed #8a7a52;
  font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  font-size: 11px;
  font-weight: 700;
  transform: rotate(-.6deg);
}
.bill-customer-name span { font-size: 13px; }

.handwritten-line {
  font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  font-size: 10.5px;
  transform: rotate(-.35deg);
}
.handwritten-line:nth-child(odd) { transform: rotate(.35deg); }
.handwritten-line .bl-name,
.handwritten-line .bl-qty,
.handwritten-line .bl-amt { font-family: inherit; }

.order-bill-share {
  font-size: 9.5px;
  padding: 7px 4px;
}

/* Desktop still keeps the bill in its original top-right location, but now
   the actual receipt appears only after VIEW BILL + customer name. */
@media (min-width: 768px) {
  .order-bill { width: 205px; }
  .order-bill-close { display: none; }
}

/* Mobile bill: a real tab to open, and a clear close control after opening. */
@media (max-width: 767px) {
  .order-bill-tab {
    min-width: 118px;
    justify-content: center;
  }
  .order-bill-content {
    width: min(260px, calc(100vw - 32px));
    max-height: 0;
  }
  .order-bill.is-open .order-bill-content {
    max-height: min(520px, 72dvh);
  }
  .order-bill-close {
    display: inline-flex;
    position: absolute;
    top: 5px;
    right: 6px;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #6b5c38;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
  }
  .order-bill-title { padding-right: 18px; }
  .bill-name-input { font-size: 14px; }
  .handwritten-line { font-size: 10.5px; }
}

/* ---- Music player: slightly smaller, same component/design ---- */
.player {
  transform: translateX(-50%) scale(.90);
  transform-origin: center bottom;
}
@media (max-width: 767px) {
  .player {
    width: calc(100vw - 24px);
    max-width: 340px;
    transform: translateX(-50%) scale(.88);
    transform-origin: center bottom;
  }
}
@media (max-width: 359px) {
  .player {
    width: calc(100vw - 16px);
    transform: translateX(-50%) scale(.86);
  }
}

/* ============ TAPRI LIGHTER — tiny discoverable Easter egg ============
   Shares the order-bill's exact top-right slot (see .order-bill.is-empty
   above); JS toggles which one is visible depending on whether the bill
   has items. NOTE: the lighter/cigarette here are built from CSS gradients
   and radial-gradient "smoke" puffs, not photographs — this repo has no
   image-generation tool available to produce the photoreal PNG/WebP assets
   the brief calls for. Swap-in point: replace .tapri-lighter-body and
   .tapri-cigarette's CSS-drawn shapes with <img> tags pointing at real
   photographed/rendered assets once you have them; the position, sizing,
   click handling, and lit/unlit animation state below all keep working
   unchanged either way. */

.tapri-lighter {
  position: fixed;
  z-index: 15;
  top: 54px; /* was 66px — moved slightly upward on desktop only; the
                existing @media (max-width: 767px) override below still
                sets the mobile position independently and is untouched */
  right: 28px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.72;
  transition: opacity 0.2s ease, transform 0.15s ease;
}
.tapri-lighter:hover,
.tapri-lighter:focus-visible { opacity: 1; transform: scale(1.06); }
.tapri-lighter:active { transform: scale(0.94); }
.tapri-lighter.is-empty-slot-hidden { display: none; }

.tapri-lighter-body {
  position: relative;
  width: 15px;
  height: 24px;
  display: block;
}
.tapri-lighter-case {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 18px;
  border-radius: 3px 3px 4px 4px;
  background: linear-gradient(115deg, #d8d0bd 0%, #f4efdf 22%, #a99a72 48%, #efe6cc 66%, #8f7f56 100%);
  border: 1px solid #6f5d33;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.65), inset 0 -2px 2px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.4);
}
.tapri-lighter-lid {
  position: absolute;
  left: 1px; right: 1px; top: 0;
  height: 9px;
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(115deg, #efe6cc 0%, #b7a878 50%, #efe6cc 100%);
  border: 1px solid #6f5d33;
  border-bottom: none;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.6);
  transform-origin: bottom center;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tapri-lighter.is-lit .tapri-lighter-lid {
  transform: rotate(-38deg) translateY(-1px);
}

.tapri-lighter-flame {
  position: absolute;
  left: 50%;
  top: -2px;
  width: 6px;
  height: 10px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 50% 70%, #fff6d6 0%, var(--ember) 45%, #b5340f 85%, transparent 100%);
  transform: translateX(-50%) scale(0);
  transform-origin: bottom center;
  opacity: 0;
  pointer-events: none;
  filter: blur(0.2px);
}
.tapri-lighter.is-lit .tapri-lighter-flame {
  animation: tapriFlameFlicker 0.7s ease-in-out 1;
}
@keyframes tapriFlameFlicker {
  0%   { opacity: 0; transform: translateX(-50%) scale(0); }
  25%  { opacity: 1; transform: translateX(-50%) scale(1.1) rotate(-4deg); }
  45%  { opacity: 1; transform: translateX(-48%) scale(0.9) rotate(3deg); }
  70%  { opacity: 1; transform: translateX(-50%) scale(1) rotate(-2deg); }
  100% { opacity: 0; transform: translateX(-50%) scale(0.7); }
}

.tapri-cigarette {
  position: absolute;
  left: -19px;
  top: 6px;
  width: 16px;
  height: 4px;
  border-radius: 1px;
  background: linear-gradient(90deg, #efe9da 0%, #fbf8f0 55%, #c98a3a 55%, #a5651c 100%);
  border: 1px solid rgba(0,0,0,0.15);
  opacity: 0;
  transform: translateX(4px);
  transition: opacity 0.4s ease 0.5s, transform 0.4s ease 0.5s;
}
.tapri-lighter.is-lit .tapri-cigarette {
  opacity: 1;
  transform: translateX(0);
}
.tapri-cigarette-ember {
  position: absolute;
  left: -1.5px;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: var(--ember);
  box-shadow: 0 0 2px 1px var(--ember);
  opacity: 0;
}
.tapri-lighter.is-lit .tapri-cigarette-ember {
  opacity: 1;
  animation: tapriEmberPulse 1.6s ease-in-out 0.7s infinite;
}
@keyframes tapriEmberPulse {
  0%, 100% { box-shadow: 0 0 2px 1px var(--ember); }
  50%      { box-shadow: 0 0 4px 2px var(--ember), 0 0 7px 3px rgba(255,138,61,0.5); }
}

.tapri-cigarette-smoke {
  position: absolute;
  left: -3px;
  top: -1px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  pointer-events: none;
}
.tapri-lighter.is-lit .tapri-cigarette-smoke::before,
.tapri-lighter.is-lit .tapri-cigarette-smoke::after {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230,225,215,0.55) 0%, rgba(230,225,215,0) 70%);
  opacity: 0;
  animation: tapriSmokeDrift 3.2s ease-out 1s infinite;
}
.tapri-lighter.is-lit .tapri-cigarette-smoke::after {
  animation-delay: 2.2s;
}
@keyframes tapriSmokeDrift {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.6); }
  15%  { opacity: 0.55; }
  100% { opacity: 0; transform: translate(-6px, -22px) scale(2.4); }
}

@media (max-width: 767px) {
  .tapri-lighter { top: 54px; right: 16px; }
}
@media (max-width: 359px) {
  .tapri-lighter { right: 10px; }
}

/* ============ PLAYLIST TABS — directly above the player shell ============
   Child of #player (which is position:fixed; bottom:24px), placed before
   .player-shell in the DOM. #player has no fixed height, so adding this
   row simply grows the box upward from its bottom-anchored edge — the
   shell's own on-screen bottom position is unaffected, and the tabs
   automatically match the player's exact centered width on every
   breakpoint without a separate positioning system. */

.playlist-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 7px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 1px;
}
.playlist-tabs::-webkit-scrollbar { display: none; }

.playlist-tab {
  flex: 0 0 auto;
  font: 700 10.5px/1 'Arial', sans-serif;
  letter-spacing: 0.02em;
  white-space: nowrap;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--eq-wood);
  background: var(--eq-cream);
  color: var(--eq-text-dk);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.playlist-tab:active { transform: scale(0.96); }
.playlist-tab.is-active {
  background: linear-gradient(180deg, var(--eq-amber), var(--ember));
  border-color: var(--ember-dim);
  color: #2a1607;
  box-shadow: 0 0 0 2px rgba(255, 138, 61, 0.25), 0 1px 3px rgba(0,0,0,0.3);
}
.playlist-tab:not(.is-active):hover {
  background: var(--eq-cream-lt);
}

@media (max-width: 359px) {
  .playlist-tab { padding: 6px 9px; font-size: 10px; }
}