/* ============================================================
   FREE POUR — DESIGN SYSTEM
   ============================================================
   This block is the whole game's design language. Pass 2 (manage
   /career/mixing panels) should build on these tokens and classes
   rather than inventing new ones. Read this before adding CSS.

   PALETTE
     --ink / --ink-2      near-black navy, the room at rest
     --panel / --panel-2  layered dark surfaces panels sit on
     --mahogany           warm dark wood, used for pressed/active fills
     --brass / --brass-dim / --glow   the ONE accent family — brass is
                           primary action + highlight, glow is the
                           lightest "warm bulb" tone for headline text
     --success / --success-dim   the single success/positive treatment.
                           RESERVED for the mixing "serve it" moment —
                           do not use for generic primary buttons.
     --trouble             the single danger/warning treatment
     --text / --text-dim   body text and muted/secondary text

   TYPE SCALE
     --font-display  serif wordmark + panel/section headings
     --font-body     serif for reading copy (descriptions, flavour text)
     --font-ui       sans for interactive UI — buttons, rows, controls
     --font-label    condensed sans for small caps kickers/labels/tabs
     --font-number   tabular-numeral mono for money, stats, counters
     Rule of thumb: if it's a number a player tracks, it's --font-number
     with font-variant-numeric: tabular-nums.

   SPACING / RADIUS / SHADOW / MOTION
     --sp-1..--sp-6   spacing scale (0.25rem steps up to 2rem)
     --r-sm/md/lg      corner radius scale for chips/controls/panels
     --shadow-panel    the standard "panel floating over the room" shadow
     --shadow-lift     stronger shadow for the topmost overlay layer
     --ease-out        the house easing — fast in, gentle settle
     --dur-fast/med/slow  120ms / 220ms / 420ms

   COMPONENTS (defined further down, reusable by class name)
     .mix-btn            button — bare = primary (brass), .ghost =
                          secondary, .serve = success (mixing only),
                          .danger = destructive
     .panel-pop           entrance animation for any floating panel
     .badge / .stock-badge  small pill labels
     .career-section-title / .cc-kicker / etc.  label kicker treatment
     Panels (mix-panel, career-panel, modal-panel, start-panel) share
     one recipe: layered gradient + hairline brass-tinted border +
     --shadow-panel + a subtle inset corner line. Keep new panels on
     that recipe so the whole game reads as one system.
   ============================================================ */
:root {
  --ink: #0d0f14;
  --ink-2: #07090d;
  --panel: #1b232c;
  --panel-2: #26313d;
  --line: #33404e;
  --mahogany: #3a2620;
  --brass: #d99a3d;
  --brass-dim: #9a6f2e;
  --glow: #f4e3c2;
  --success: #6bbf75;
  --success-dim: #3f7a49;
  --trouble: #b3453f;
  --text: #e8e2d6;
  --text-dim: #8b94a0;
  --scroll-track: #10161d;
  --scroll-track-edge: #26313d;
  --scroll-thumb: #9a6f2e;
  --scroll-thumb-hot: #d99a3d;

  --font-display: "Noto Serif Display", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Noto Serif", Georgia, serif;
  --font-ui: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-label: "Noto Sans Condensed", "Noto Sans", system-ui, sans-serif;
  --font-number: "Noto Sans Mono", "SFMono-Regular", Consolas, monospace;

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;

  --r-sm: 5px;
  --r-md: 7px;
  --r-lg: 10px;

  --shadow-panel: 0 18px 60px rgba(0,0,0,0.68), inset 0 0 0 1px rgba(255,255,255,0.035);
  --shadow-lift: 0 1.6rem 5rem rgba(0,0,0,0.7), inset 0 0 0 1px rgba(255,255,255,0.04);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-med: 220ms;
  --dur-slow: 420ms;
}

/* Panel entrance — the one shared "arrives into the room" motion.
   Apply to any floating panel/overlay content node. */
@keyframes panel-pop {
  from { opacity: 0; transform: translateY(0.6rem) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.panel-pop { animation: panel-pop var(--dur-slow) var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .panel-pop { animation: none; }
}

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

html, body {
  height: 100%;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-ui);
  overflow: hidden;
}

* {
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 0.74rem;
  height: 0.74rem;
}
::-webkit-scrollbar-track {
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--scroll-track-edge) 34%, transparent), transparent),
    var(--scroll-track);
  border-left: 1px solid color-mix(in srgb, var(--brass-dim) 22%, transparent);
}
::-webkit-scrollbar-thumb {
  min-height: 2.4rem;
  border: 2px solid var(--scroll-track);
  border-radius: 999px;
  background:
    linear-gradient(180deg, var(--scroll-thumb-hot), var(--scroll-thumb));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--glow) 18%, transparent);
}
::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(180deg, var(--glow), var(--brass));
}
::-webkit-scrollbar-corner {
  background: var(--scroll-track);
}

.mix-pours-list,
.mix-spec-list,
.start-jobs,
#orders-panel,
.career-panel,
.modal-panel {
  scrollbar-color: var(--scroll-thumb-hot) color-mix(in srgb, var(--scroll-track) 92%, transparent);
}

.mix-pours-list::-webkit-scrollbar,
.mix-spec-list::-webkit-scrollbar,
.start-jobs::-webkit-scrollbar,
#orders-panel::-webkit-scrollbar,
.career-panel::-webkit-scrollbar,
.modal-panel::-webkit-scrollbar {
  width: 0.58rem;
  height: 0.58rem;
}

.mix-pours-list::-webkit-scrollbar-track,
.mix-spec-list::-webkit-scrollbar-track,
.start-jobs::-webkit-scrollbar-track,
#orders-panel::-webkit-scrollbar-track,
.career-panel::-webkit-scrollbar-track,
.modal-panel::-webkit-scrollbar-track {
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--brass-dim) 18%, transparent), transparent),
    color-mix(in srgb, var(--scroll-track) 94%, transparent);
  border-left: 1px solid color-mix(in srgb, var(--brass-dim) 20%, transparent);
}

.mix-pours-list::-webkit-scrollbar-thumb,
.mix-spec-list::-webkit-scrollbar-thumb,
.start-jobs::-webkit-scrollbar-thumb,
#orders-panel::-webkit-scrollbar-thumb,
.career-panel::-webkit-scrollbar-thumb,
.modal-panel::-webkit-scrollbar-thumb {
  border-width: 1px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--brass) 82%, var(--glow)), var(--brass-dim));
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}

/* ------------------------------------------------ HUD ------ */
#hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 1.1rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--brass) 8%, transparent), transparent 42%),
    linear-gradient(180deg, #202933 0%, #11161d 100%);
  border-bottom: 1px solid color-mix(in srgb, var(--brass-dim) 56%, var(--line));
  box-shadow: 0 0.45rem 1.6rem rgba(0,0,0,0.36);
  user-select: none;
  z-index: 10;
}

.hud-left, .hud-mid, .hud-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

#logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.14em;
  color: var(--glow);
  line-height: 1;
  text-shadow: 0 0 0.9rem rgba(217,154,61,0.14);
}
#logo .pour {
  color: var(--brass);
  display: inline-block;
  margin-left: 0.18em;
}

#venue-tag {
  border-left: 1px solid color-mix(in srgb, var(--brass-dim) 38%, var(--line));
  padding-left: 1rem;
  line-height: 1.25;
}
#venue-name {
  font-family: var(--font-display);
  font-size: 0.98rem;
  color: var(--text);
}
#venue-sub {
  font-size: 0.66rem;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#clock { text-align: right; }
#clock-time {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-number);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--glow);
  line-height: 1.1;
}
#clock-day {
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

#speed-controls {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
#speed-controls button {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font: 600 0.8rem var(--font-ui);
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  border-right: 1px solid var(--line);
  transition: background 0.12s, color 0.12s;
}
#speed-controls button:last-child { border-right: none; }
#speed-controls button:hover { background: var(--panel-2); color: var(--text); }
#speed-controls button.active { background: var(--brass); color: var(--ink); }
#speed-controls button:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: -2px;
}

.hud-right { padding-left: 0.2rem; }
.hud-stats {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-right: 1rem;
  border-right: 1px solid color-mix(in srgb, var(--brass-dim) 34%, var(--line));
  margin-right: 0.15rem;
}
.hud-controls {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.stat { text-align: right; min-width: 4.5rem; }
.stat-label {
  font-size: 0.63rem;
  color: var(--text-dim);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.stat-value {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-number);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--glow);
  text-shadow: 0 0 0.65rem rgba(217,154,61,0.15);
}
.stat-value.trouble {
  color: color-mix(in srgb, var(--trouble) 85%, var(--glow));
  text-shadow: 0 0 0.65rem color-mix(in srgb, var(--trouble) 40%, transparent);
}

/* ------------------------------------------------ stage ---- */
#stage {
  position: relative;
  flex: 1;
  overflow: hidden;
  background:
    radial-gradient(ellipse at center, transparent 48%, rgba(0,0,0,0.38) 100%),
    #07090d;
}
#stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.34), transparent 18%, transparent 82%, rgba(0,0,0,0.34)),
    linear-gradient(180deg, transparent 70%, rgba(0,0,0,0.42));
  z-index: 2;
}

#bar-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  z-index: 1;
  touch-action: none; /* pan/pinch are ours, not the browser's */
}
#bar-canvas.dragging { cursor: grabbing; }

/* ---------------------------------------- command centre --- */
.command-centre {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 6;
  width: min(19rem, calc(100vw - 2rem));
  pointer-events: auto;
  border: 1px solid color-mix(in srgb, var(--brass-dim) 70%, var(--line));
  border-left: 4px solid var(--brass);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), transparent 18%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 5px),
    color-mix(in srgb, #101820 88%, var(--mahogany));
  box-shadow: 0 1rem 2.8rem rgba(0,0,0,0.46), inset 0 0 0 1px rgba(255,255,255,0.035);
  padding: 0.62rem;
  transform-origin: left top;
  animation: cc-drop 0.28s ease-out;
}
.command-centre.is-hot {
  border-color: color-mix(in srgb, var(--trouble) 45%, var(--brass-dim));
  box-shadow: 0 1rem 2.8rem rgba(0,0,0,0.5), 0 0 1.2rem rgba(179,69,63,0.16);
}
.cc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  padding-bottom: 0.5rem;
}
.cc-title {
  display: grid;
  gap: 0.08rem;
}
.cc-kicker {
  color: var(--text-dim);
  font: 800 0.58rem/1 var(--font-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.cc-title strong {
  color: var(--glow);
  font: 700 1.05rem/1.1 var(--font-display);
}
.cc-state {
  border: 1px solid color-mix(in srgb, #6bbf75 55%, var(--line));
  border-radius: 999px;
  color: #9fe0a8;
  background: color-mix(in srgb, #6bbf75 12%, transparent);
  font: 900 0.58rem/1 var(--font-ui);
  letter-spacing: 0.08em;
  padding: 0.26rem 0.45rem;
  text-transform: uppercase;
}
.cc-state.trouble {
  border-color: color-mix(in srgb, var(--trouble) 68%, var(--line));
  color: color-mix(in srgb, var(--trouble) 82%, var(--glow));
  background: color-mix(in srgb, var(--trouble) 15%, transparent);
}
.cc-meters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
  margin: 0.55rem 0;
}
.cc-meter {
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 5px;
  background: rgba(0,0,0,0.24);
  padding: 0.38rem 0.42rem;
}
.cc-meter.trouble {
  border-color: color-mix(in srgb, var(--trouble) 58%, var(--line));
  background: color-mix(in srgb, var(--trouble) 12%, rgba(0,0,0,0.2));
}
.cc-meter-value {
  display: block;
  color: var(--glow);
  font: 900 1.05rem/1 var(--font-ui);
  font-variant-numeric: tabular-nums;
}
.cc-meter-label {
  display: block;
  margin-top: 0.18rem;
  color: var(--text-dim);
  font: 800 0.54rem/1 var(--font-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cc-actions {
  display: grid;
  gap: 0.4rem;
}
.cc-action {
  display: grid;
  grid-template-columns: 0.55rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  min-height: 3.05rem;
  border: 1px solid color-mix(in srgb, var(--line) 62%, transparent);
  border-radius: 6px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--brass) 12%, transparent), transparent 74%),
    rgba(0,0,0,0.18);
  padding: 0.45rem 0.46rem;
}
.cc-action.quiet {
  background: rgba(0,0,0,0.18);
}
.cc-action.urgent {
  border-color: color-mix(in srgb, var(--trouble) 56%, var(--line));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--trouble) 16%, transparent), transparent 76%),
    rgba(0,0,0,0.2);
  animation: cc-urgent 1.15s ease-in-out infinite alternate;
}
.cc-lamp {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--brass);
  box-shadow: 0 0 0.55rem color-mix(in srgb, var(--brass) 70%, transparent);
}
.cc-action.quiet .cc-lamp {
  background: var(--line);
  box-shadow: none;
}
.cc-action.urgent .cc-lamp {
  background: var(--trouble);
  box-shadow: 0 0 0.7rem color-mix(in srgb, var(--trouble) 78%, transparent);
}
.cc-action-info { min-width: 0; }
.cc-action-title {
  color: var(--text);
  font: 900 0.78rem/1.15 var(--font-ui);
}
.cc-action-meta {
  margin-top: 0.15rem;
  color: var(--text-dim);
  font: 0.68rem/1.32 var(--font-ui);
}
.cc-btn, .cc-link {
  appearance: none;
  border: 1px solid var(--brass-dim);
  border-radius: 5px;
  background: color-mix(in srgb, var(--brass) 14%, transparent);
  color: var(--glow);
  cursor: pointer;
  font: 900 0.62rem var(--font-ui);
  letter-spacing: 0.06em;
  padding: 0.38rem 0.48rem;
  text-transform: uppercase;
}
.cc-btn:hover, .cc-link:hover {
  background: var(--brass);
  color: var(--ink);
}
.cc-footer {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid color-mix(in srgb, var(--line) 62%, transparent);
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}
.cc-link {
  border-color: var(--line);
  background: transparent;
  color: var(--text-dim);
}
@keyframes cc-drop {
  from { opacity: 0; transform: translateY(-0.5rem) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes cc-urgent {
  from { box-shadow: inset 0 0 0 rgba(179,69,63,0); }
  to { box-shadow: inset 0 0 1.1rem rgba(179,69,63,0.14); }
}

/* ------------------------------------------------ ticker --- */
/* Event feed — integrated into the room rather than floating pills:
   newest line brightest, older lines recede, one warm gradient wash
   behind the whole column so it reads as a single surface. */
#ticker {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 6;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.14rem;
  pointer-events: none;
  max-width: min(52ch, 70vw);
  padding: 1rem 2.4rem 1rem 1.1rem;
  /* one wash behind the column, fading up and to the right */
  background:
    radial-gradient(ellipse 120% 130% at 0% 100%, rgba(4,6,9,0.72), transparent 70%);
}
.tick {
  font: 0.78rem/1.4 var(--font-ui);
  color: var(--text);
  border-left: 2px solid var(--brass-dim);
  background: linear-gradient(90deg, color-mix(in srgb, var(--brass) 9%, transparent), transparent 62%);
  padding: 0.22rem 0.6rem;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  animation: tick-in var(--dur-med) var(--ease-out), tick-out 0.9s ease-in 7s forwards;
}
.tick.trouble {
  border-left-color: var(--trouble);
  color: color-mix(in srgb, var(--trouble) 42%, var(--text));
  background: linear-gradient(90deg, color-mix(in srgb, var(--trouble) 11%, transparent), transparent 62%);
}
/* the feed recedes with age: newest bright, older dimmer */
#ticker .tick:nth-child(2) { opacity: 0.82; }
#ticker .tick:nth-child(3) { opacity: 0.66; }
#ticker .tick:nth-child(4) { opacity: 0.52; }
#ticker .tick:nth-child(5) { opacity: 0.4; }
#ticker .tick:nth-child(n+6) { opacity: 0.3; }
@keyframes tick-in {
  from { opacity: 0; transform: translateX(-0.5rem); }
  to   { opacity: 1; transform: none; }
}
@keyframes tick-out {
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tick, .command-centre, .cc-action.urgent { animation: none; }
}

@media (max-width: 980px) {
  .command-centre {
    width: min(17rem, calc(100vw - 2rem));
    transform: scale(0.94);
  }
  #orders-panel {
    width: 14rem;
  }
}

@media (max-width: 760px) {
  .command-centre {
    left: 0.6rem;
    right: 0.6rem;
    top: 0.6rem;
    width: auto;
    transform: none;
  }
  .cc-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cc-action {
    grid-template-columns: 0.55rem minmax(0, 1fr);
  }
  .cc-action .cc-btn {
    grid-column: 2;
    justify-self: start;
  }
  #orders-panel {
    top: auto;
    right: 0.6rem;
    bottom: 0.6rem;
    width: min(16rem, calc(100vw - 1.2rem));
    max-height: 38%;
  }
  #ticker {
    left: 0.6rem;
    bottom: 0.6rem;
    max-width: calc(100vw - 1.2rem);
  }
}

/* ---------------------------------------- service mode ----- */
#btn-service {
  border-color: var(--brass-dim);
  color: var(--brass);
  white-space: nowrap;
}
#btn-service.active { background: var(--brass); color: var(--ink); }

#orders-panel {
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 15.5rem;
  max-height: calc(100% - 2rem);
  overflow-y: auto;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--brass) 7%, transparent), transparent 22%),
    color-mix(in srgb, var(--panel) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--brass-dim) 44%, var(--line));
  border-radius: 7px;
  padding: 0.6rem;
  z-index: 6;
  box-shadow: 0 1rem 2.6rem rgba(0,0,0,0.38);
}
#orders-title {
  font-family: var(--font-display);
  color: var(--glow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
}
.order-card {
  border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  border-radius: 6px;
  padding: 0.45rem 0.55rem;
  margin-bottom: 0.4rem;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--brass) 8%, transparent), transparent 70%),
    var(--panel-2);
}
.order-card.claimed { opacity: 0.55; }
.order-card .oc-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}
.oc-drink { font-weight: 600; font-size: 0.85rem; }
.oc-who { color: var(--text-dim); font-size: 0.72rem; }
.oc-bar {
  height: 3px;
  background: rgba(0,0,0,0.5);
  border-radius: 2px;
  margin: 0.35rem 0;
  overflow: hidden;
}
.oc-bar > div { height: 100%; background: var(--brass); }
.oc-bar.fretting > div { background: var(--trouble); }
.oc-make {
  appearance: none;
  width: 100%;
  border: 1px solid var(--brass-dim);
  border-radius: 4px;
  background: transparent;
  color: var(--brass);
  font: 600 0.72rem var(--font-ui);
  padding: 0.25rem;
  cursor: pointer;
}
.oc-make:hover { background: var(--brass); color: var(--ink); }
.oc-make:disabled { opacity: 0.4; cursor: default; }
.orders-empty { color: var(--text-dim); font-size: 0.78rem; padding: 0.3rem 0.1rem; }

/* ---------------------------------------- mixing overlay --- */
#mix-overlay[hidden] { display: none; }
#mix-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background:
    radial-gradient(circle at 50% 22%, rgba(217,154,61,0.10), transparent 28rem),
    color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 1.5rem;
}
.mix-panel {
  width: min(66rem, 100%);
  max-height: 100%;
  overflow-y: auto;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent 16%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 82%, var(--mahogany)) 0%, #11171e 100%);
  border: 1px solid color-mix(in srgb, var(--brass-dim) 72%, var(--line));
  border-radius: var(--r-lg);
  padding: 1rem 1.2rem 1.2rem;
  box-shadow: var(--shadow-panel);
  position: relative;
  animation: panel-pop var(--dur-slow) var(--ease-out);
}
.mix-panel::before {
  content: "";
  position: absolute;
  inset: 0.35rem;
  border: 1px solid color-mix(in srgb, var(--brass-dim) 42%, transparent);
  border-radius: 6px;
  pointer-events: none;
}
.mix-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  border-bottom: 1px solid color-mix(in srgb, var(--brass-dim) 48%, var(--line));
  padding-bottom: 0.7rem;
  margin-bottom: 0.8rem;
  position: relative;
  z-index: 1;
}
.mix-head-spacer { flex: 1; }
.mix-title-name {
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: var(--glow);
  letter-spacing: 0.04em;
}
.mix-title-price { font-size: 0.75rem; color: var(--text-dim); }
/* ---------------------------------------- button system -----
   .mix-btn is the one button component in the game. Bare = primary
   (brass — the default action), .ghost = secondary/quiet, .serve =
   success (RESERVED for the mixing "serve it" moment, not a generic
   CTA), .danger = destructive. All variants share size, radius and
   motion so the whole game's buttons read as one family. */
.mix-btn {
  appearance: none;
  border: 1px solid var(--brass-dim);
  border-radius: var(--r-sm);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--brass) 12%, transparent), rgba(0,0,0,0.05));
  color: var(--glow);
  font: 800 0.78rem var(--font-label);
  letter-spacing: 0.04em;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.025);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.mix-btn:hover { background: var(--brass); color: var(--ink); border-color: var(--brass); }
.mix-btn:active { transform: translateY(1px); }
.mix-btn:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: 2px;
}
.mix-btn:disabled {
  opacity: 0.4;
  cursor: default;
  transform: none;
}
.mix-btn:disabled:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--brass) 12%, transparent), rgba(0,0,0,0.05));
  color: var(--glow);
  border-color: var(--brass-dim);
}
.mix-btn.ghost {
  border-color: var(--line);
  color: var(--text-dim);
  background: rgba(255,255,255,0.02);
}
.mix-btn.ghost:hover { background: var(--panel-2); color: var(--text); border-color: var(--brass-dim); }
.mix-btn.danger {
  border-color: color-mix(in srgb, var(--trouble) 65%, var(--line));
  color: color-mix(in srgb, var(--trouble) 82%, var(--glow));
  background: color-mix(in srgb, var(--trouble) 12%, rgba(0,0,0,0.08));
}
.mix-btn.danger:hover { background: var(--trouble); color: var(--glow); border-color: var(--trouble); }
/* .serve is the historic "big primary CTA" class name. By default it's
   the same brass primary treatment, just larger/full-width. Inside the
   mixing panel specifically, it becomes the one success/green moment
   in the game — the physical act of serving a poured drink — so that
   green stays a rare, meaningful signal rather than a generic CTA
   color. Do not reuse .serve's green outside .mix-panel. */
.mix-btn.serve {
  font-size: 0.9rem;
  padding: 0.6rem 1rem;
  width: 100%;
  margin-top: 0.6rem;
}
.mix-panel .mix-btn.serve {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--success) 35%, var(--brass)), color-mix(in srgb, var(--success-dim) 60%, var(--panel-2)));
  border-color: color-mix(in srgb, var(--success) 68%, var(--brass-dim));
  color: var(--glow);
}
.mix-panel .mix-btn.serve:hover { background: var(--success); color: #07100a; border-color: var(--success); }
@media (prefers-reduced-motion: reduce) {
  .mix-btn { transition: none; }
}

.mix-body {
  display: grid;
  grid-template-columns: minmax(20rem, 0.86fr) minmax(20rem, 1fr);
  gap: 1.1rem;
  position: relative;
  z-index: 1;
}
.mix-backbar {
  display: grid;
  gap: 0.55rem;
  align-content: start;
  border: 1px solid color-mix(in srgb, var(--brass-dim) 38%, var(--line));
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), transparent 22%),
    rgba(0,0,0,0.16);
  padding: 0.6rem;
}
.mix-cat-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
}
.mix-cat-tab {
  appearance: none;
  min-height: 2rem;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(0,0,0,0.14);
  color: var(--text-dim);
  cursor: pointer;
  font: 900 0.62rem var(--font-label);
  letter-spacing: 0.08em;
  padding: 0.28rem 0.35rem;
  text-transform: uppercase;
}
.mix-cat-tab:hover {
  border-color: var(--brass-dim);
  color: var(--text);
}
.mix-cat-tab.active {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--ink);
}
.mix-shelf {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
}
.mix-cat-name {
  font-family: var(--font-label);
  font-weight: 900;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0.15rem 0 0.05rem;
}
.mix-bottle {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--brass-dim) 35%, var(--line));
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), transparent 42%),
    color-mix(in srgb, var(--panel-2) 82%, #111);
  color: var(--text);
  font: 700 0.74rem var(--font-ui);
  padding: 0.3rem 0.5rem;
  margin-bottom: 0;
  cursor: pointer;
  text-align: left;
  user-select: none;
  touch-action: none;
}
.mix-bottle:hover {
  border-color: var(--brass);
  transform: translateY(-1px);
}
.mix-bottle:active { background: var(--mahogany); transform: none; }
.mix-bottle-dot {
  width: 0.55rem;
  height: 0.9rem;
  border-radius: 2px 2px 1px 1px;
  flex: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
}

.mix-row { margin-bottom: 0.55rem; }
.mix-row-label {
  font-family: var(--font-label);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.3rem;
}
.mix-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.mix-chip {
  appearance: none;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(0,0,0,0.12);
  color: var(--text);
  font: 800 0.7rem var(--font-label);
  letter-spacing: 0.02em;
  padding: 0.22rem 0.6rem;
  cursor: pointer;
}
.mix-chip:hover { border-color: var(--brass-dim); }
.mix-chip.active {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--ink);
  box-shadow: 0 0 0.7rem rgba(217,154,61,0.18);
}

.mix-pours { margin: 0.4rem 0 0.6rem; }
.mix-pours-list {
  border: 1px solid color-mix(in srgb, var(--brass-dim) 35%, var(--line));
  border-radius: 6px;
  background: rgba(0,0,0,0.25);
  padding: 0.35rem 0.5rem;
  min-height: 3.2rem;
  max-height: 8rem;
  overflow-y: auto;
}
.mix-pours-empty { color: var(--text-dim); font-size: 0.75rem; padding: 0.3rem 0; }
.mix-pour-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 0.78rem var(--font-number);
  padding: 0.12rem 0;
}
.mix-pour-x {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--trouble);
  font-size: 0.95rem;
  cursor: pointer;
  padding: 0 0.2rem;
}
.mix-pour-readout {
  position: absolute;
  left: 50%;
  bottom: 1.2rem;
  transform: translateX(-50%);
  background: color-mix(in srgb, var(--brass) 88%, var(--glow));
  color: var(--ink);
  font: 900 0.9rem var(--font-number);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  pointer-events: none;
}

/* [hidden] must win over display:grid/flex on panel sections */
.mix-body[hidden], .mix-specbook[hidden], .mix-result[hidden],
.mix-pour-readout[hidden] { display: none; }

/* spec book */
.mix-specbook {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: 1rem;
  min-height: 20rem;
}
.mix-spec-list { display: flex; flex-direction: column; gap: 0.25rem; overflow-y: auto; }
.mix-spec-item {
  appearance: none;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: transparent;
  color: var(--text);
  font: 800 0.76rem var(--font-label);
  letter-spacing: 0.02em;
  padding: 0.35rem 0.6rem;
  text-align: left;
  cursor: pointer;
}
.mix-spec-item:hover { border-color: var(--brass-dim); }
.mix-spec-item.active { background: var(--mahogany); border-color: var(--brass-dim); }
.mix-spec-card {
  border: 1px solid color-mix(in srgb, var(--brass-dim) 45%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.72), rgba(244,227,194,0.76)),
    #d6bf91;
  padding: 1rem 1.2rem;
  color: #231915;
}
.mix-spec-hint { color: var(--text-dim); font-size: 0.8rem; }
.mix-spec-name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: #241912;
  margin-bottom: 0.5rem;
}
.mix-spec-ings { list-style: none; margin-bottom: 0.6rem; }
.mix-spec-ings li {
  font: 0.9rem var(--font-body);
  padding: 0.15rem 0;
  border-bottom: 1px dashed rgba(35,25,21,0.28);
}
.mix-spec-meta { color: #735021; font: 800 0.76rem var(--font-label); letter-spacing: 0.03em; margin-bottom: 0.6rem; }
.mix-spec-cost { color: rgba(35,25,21,0.68); font: italic 0.72rem var(--font-body); }

/* result */
.mix-result { text-align: center; padding: 1.4rem 1rem 0.6rem; }
.mix-result-score {
  font-family: var(--font-display);
  font-size: 3.6rem;
  color: var(--glow);
  line-height: 1;
  text-shadow: 0 0 1.2rem rgba(217,154,61,0.22);
}
.mix-result-verdict {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--brass);
  margin: 0.4rem 0 0.6rem;
}
.mix-result-notes {
  list-style: none;
  color: var(--text-dim);
  font: 0.82rem var(--font-body);
  margin-bottom: 0.6rem;
}
.mix-result-money { font-weight: 600; margin-bottom: 0.4rem; }
.mix-result .mix-btn.serve { width: auto; padding: 0.55rem 1.4rem; }

@media (max-width: 900px) {
  .mix-body { grid-template-columns: 1fr; }
  .mix-cat-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mix-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------- career button ---- */
.hud-controls button {
  appearance: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-dim);
  font: 600 0.78rem var(--font-ui);
  padding: 0.45rem 0.8rem;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.hud-controls button:hover { background: var(--panel-2); color: var(--text); }
.hud-controls button:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: 1px;
}
.hud-controls button:disabled { opacity: 0.35; cursor: default; }
.hud-controls button:disabled:hover { background: transparent; color: var(--text-dim); }
@media (prefers-reduced-motion: reduce) {
  .hud-controls button { transition: none; }
}

/* ---------------------------------------- overlays shared -- */
#career-overlay, #manage-overlay, #start-overlay, #modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background:
    radial-gradient(circle at 50% 18%, rgba(217,154,61,0.10), transparent 28rem),
    color-mix(in srgb, var(--ink) 84%, transparent);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
#career-overlay[hidden], #manage-overlay[hidden], #start-overlay[hidden], #modal-overlay[hidden] { display: none; }
#modal-overlay { z-index: 80; }
/* Start overlay is a full-bleed title screen, not a centered dialog:
   a dark room with one warm pool of light low in the frame — the bar
   glowing in the night — with the wordmark as the loudest thing on
   screen. All atmosphere is CSS (grain, glow, vignette), no assets. */
#start-overlay {
  z-index: 70;
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  background:
    /* the pool of light: warm ellipse low-centre, like the lit bar */
    radial-gradient(ellipse 74rem 34rem at 50% 96%, rgba(217,154,61,0.17), transparent 62%),
    radial-gradient(ellipse 40rem 20rem at 50% 102%, rgba(244,227,194,0.10), transparent 58%),
    radial-gradient(ellipse 56rem 40rem at 84% -12%, rgba(38,49,61,0.55), transparent 62%),
    linear-gradient(180deg, #06080c 0%, var(--ink) 52%, #100c08 100%);
}
#start-overlay::before {
  /* film grain — CSS-only atmosphere, no image asset */
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#start-overlay::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  box-shadow: inset 0 0 14rem rgba(0,0,0,0.6);
}

/* ---------------------------------------- career panel ----- */
.career-panel {
  width: min(58rem, 100%);
  max-height: 100%;
  overflow-y: auto;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent 18%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.017) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 86%, var(--mahogany)) 0%, #11171e 100%);
  border: 1px solid color-mix(in srgb, var(--brass-dim) 64%, var(--line));
  border-radius: var(--r-lg);
  padding: 1rem 1.2rem 1.2rem;
  box-shadow: var(--shadow-panel);
  animation: panel-pop var(--dur-slow) var(--ease-out);
}
.career-cols {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 1.2rem;
}
@media (max-width: 800px) { .career-cols { grid-template-columns: 1fr; } }
.career-section { margin-bottom: 1.1rem; }
.career-section-title {
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  border-bottom: 1px solid color-mix(in srgb, var(--brass-dim) 42%, var(--line));
  padding-bottom: 0.3rem;
  margin-bottom: 0.55rem;
}
.career-kv {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: 0.82rem;
  padding: 0.18rem 0;
}
.career-k { color: var(--text-dim); font-family: var(--font-label); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.career-v { text-align: right; font-family: var(--font-number); }
.career-bar {
  display: inline-block;
  width: 8rem;
  height: 5px;
  background: rgba(0,0,0,0.5);
  border-radius: 3px;
  overflow: hidden;
  vertical-align: middle;
}
.career-bar > div { height: 100%; background: var(--brass); }
.career-bar.trouble > div { background: var(--trouble); }
.career-bar-num { font-variant-numeric: tabular-nums; font-size: 0.8rem; }
.career-save-row { display: flex; gap: 0.5rem; padding: 0.25rem 0; }
.career-hint { color: var(--text-dim); font-size: 0.76rem; padding: 0.3rem 0; }
.career-hint.trouble { color: var(--trouble); }
.career-cv-line {
  font: 0.82rem var(--font-body);
  padding: 0.2rem 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--line) 60%, transparent);
}
.idle-toggle {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid color-mix(in srgb, var(--brass-dim) 48%, var(--line));
  border-radius: 6px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--brass) 10%, transparent), transparent 72%),
    rgba(0,0,0,0.18);
  color: var(--glow);
  cursor: pointer;
  font: 900 0.72rem var(--font-label);
  letter-spacing: 0.08em;
  margin-bottom: 0.55rem;
  padding: 0.48rem 0.6rem;
  text-transform: uppercase;
}
.idle-toggle input {
  accent-color: var(--brass);
}

/* skill rows */
.skill-row { margin-bottom: 0.65rem; }
.skill-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.skill-name { font-weight: 600; font-size: 0.85rem; }
.skill-level {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--glow);
  font-variant-numeric: tabular-nums;
}
.skill-bar {
  position: relative;
  height: 6px;
  background: rgba(0,0,0,0.5);
  border-radius: 3px;
  overflow: hidden;
  margin: 0.25rem 0 0.2rem;
}
.skill-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--brass);
  z-index: 2;
}
.skill-xp {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--brass-dim);
  z-index: 1;
}
.skill-gates { color: var(--text-dim); font-size: 0.7rem; }

/* ---------------------------------------- start screen -----
   Full-bleed title screen. No box, no card: the overlay itself is
   the poster (dark room, warm pool of light low in frame, grain,
   vignette). The wordmark is the loudest element; the two ways in
   are cardless columns split by a hairline. Entrance is a short
   staggered rise (brand, then the doors). */
.start-panel {
  position: relative;
  z-index: 1;
  width: min(76rem, 100%);
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: clamp(2rem, 7vh, 4.5rem) clamp(1.2rem, 4vw, 3.5rem) 1.6rem;
}
@keyframes start-rise {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: none; }
}
.start-logo {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 9vw, 6.4rem);
  letter-spacing: 0.22em;
  text-indent: 0.22em; /* optically recentre the tracked wordmark */
  color: var(--glow);
  line-height: 0.9;
  text-shadow:
    0 0 2.4rem rgba(217,154,61,0.26),
    0 0 6rem rgba(217,154,61,0.14);
  animation: start-rise 0.7s var(--ease-out) both;
}
.start-logo .pour { color: var(--brass); }
.start-tag {
  color: color-mix(in srgb, var(--text-dim) 80%, var(--brass));
  margin: 1.1rem 0 2rem;
  font: 800 0.74rem var(--font-label);
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  animation: start-rise 0.7s var(--ease-out) 0.08s both;
}
/* hairline "lit bar edge" under the brand block */
.start-tag::after {
  content: "";
  display: block;
  width: min(26rem, 70%);
  height: 1px;
  margin: 1.6rem auto 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brass) 65%, transparent), transparent);
}
.start-name-row { animation: start-rise 0.7s var(--ease-out) 0.14s both; }
.start-name {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--brass-dim) 55%, var(--line));
  border-radius: 0;
  color: var(--glow);
  font: 700 1.5rem var(--font-display);
  letter-spacing: 0.04em;
  text-align: center;
  padding: 0.45rem 1rem 0.55rem;
  width: min(22rem, 90%);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.start-name::placeholder { color: color-mix(in srgb, var(--text-dim) 75%, transparent); font-style: italic; }
.start-name:focus { border-bottom-color: var(--brass); }
.start-name.shake { animation: shake 0.3s; border-bottom-color: var(--trouble); }
@keyframes shake {
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .start-logo, .start-tag, .start-name-row, .start-paths { animation: none; }
  .start-name.shake { animation: none; }
}
/* the two doors: cardless columns divided by one hairline */
.start-paths {
  display: grid;
  grid-template-columns: 1.3fr 1px 1fr;
  gap: 0 clamp(1.4rem, 3.5vw, 3rem);
  margin: clamp(1.6rem, 5vh, 3rem) auto 1rem;
  width: min(66rem, 100%);
  text-align: left;
  flex: 1;
  min-height: 0;
  animation: start-rise 0.7s var(--ease-out) 0.2s both;
}
.start-paths::before {
  /* the divider occupies the middle track */
  content: "";
  grid-column: 2;
  grid-row: 1;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--line) 90%, var(--brass-dim)) 18%, color-mix(in srgb, var(--line) 90%, var(--brass-dim)) 82%, transparent);
}
@media (max-width: 760px) {
  .start-paths { grid-template-columns: 1fr; }
  .start-paths::before { display: none; }
  .start-path + .start-path { margin-top: 1.8rem; }
}
.start-path {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: none;
  border: none;
  padding: 0;
}
.start-paths > .start-path:first-of-type { grid-column: 1; grid-row: 1; }
.start-paths > .start-path:last-of-type { grid-column: 3; grid-row: 1; }
@media (max-width: 760px) {
  .start-paths > .start-path:first-of-type,
  .start-paths > .start-path:last-of-type { grid-column: 1; grid-row: auto; }
}
.start-path-kicker {
  color: var(--brass);
  font: 900 0.64rem var(--font-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.start-path-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  color: var(--glow);
  margin-bottom: 0.5rem;
}
.start-path-desc { color: var(--text-dim); font: 0.88rem/1.55 var(--font-body); margin-bottom: 1rem; max-width: 46ch; }
.start-jobs {
  display: flex;
  flex-direction: column;
  max-height: min(30rem, 44vh);
  overflow-y: auto;
  padding-right: 0.35rem;
}
.start-jobs .stock-cat { margin: 0.6rem 0 0.3rem; }
.start-jobs .stock-cat:first-child { margin-top: 0; }
/* job rows: a manifest list — divider rule, not a boxed card */
.start-job {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.7rem 0.9rem;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  padding: 0.55rem 0.15rem;
  transition: background var(--dur-fast) var(--ease-out);
}
.start-job:hover { background: color-mix(in srgb, var(--brass) 6%, transparent); }
.start-job:last-child { border-bottom: none; }
.start-job-info { min-width: 0; }
.start-job-name-line {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.start-job-name { font: 800 0.9rem var(--font-ui); color: var(--text); }
.start-job-tier {
  color: var(--brass);
  font: 800 0.6rem var(--font-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--brass-dim);
  border-radius: 999px;
  padding: 0.08rem 0.42rem;
}
.start-job-vibe { color: var(--text-dim); font: 0.76rem/1.4 var(--font-body); margin-top: 0.15rem; }
.start-job-meta { text-align: right; white-space: nowrap; }
.start-job-wage {
  font-family: var(--font-number);
  color: var(--glow);
}
.start-job-wage-num { font-size: 0.95rem; font-weight: 700; }
.start-job-wage-label { font-size: 0.68rem; color: var(--text-dim); margin-left: 0.1rem; }
.start-job-skill { margin-top: 0.15rem; color: var(--text-dim); font: 0.68rem var(--font-label); letter-spacing: 0.03em; }
.start-job-apply { min-width: 5rem; }
.start-job-result {
  grid-column: 1 / -1;
  font-size: 0.72rem;
  color: var(--text-dim);
}
.start-job-result.trouble { color: var(--trouble); }
@media (max-width: 620px) {
  .start-job { grid-template-columns: minmax(0, 1fr) auto; }
  .start-job-apply { grid-column: 1 / -1; width: 100%; }
}
.start-path-own { display: flex; flex-direction: column; }
.mix-btn.serve.start-buy-btn {
  width: 100%;
  margin-top: 0.2rem;
  padding: 0.7rem 1rem;
  font-size: 0.92rem;
}
.start-own-note { color: var(--text-dim); font-size: 0.75rem; margin-top: 0.7rem; }
.start-note { color: var(--text-dim); font-size: 0.8rem; margin-top: 0.3rem; }

/* ---------------------------------------- modal ------------ */
#modal-overlay {
  background:
    radial-gradient(circle at 50% 14%, rgba(217,154,61,0.12), transparent 26rem),
    color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: blur(5px);
}
.modal-panel {
  width: min(42rem, 100%);
  max-height: min(46rem, calc(100vh - 3rem));
  overflow: auto;
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent 18%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 84%, var(--mahogany)) 0%, #11171e 100%);
  border: 1px solid color-mix(in srgb, var(--brass-dim) 72%, var(--line));
  border-left: 3px solid var(--brass);
  border-radius: var(--r-lg);
  padding: 1.3rem 1.5rem 1.4rem;
  box-shadow: var(--shadow-panel);
  animation: panel-pop var(--dur-slow) var(--ease-out);
}
.modal-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--glow);
  letter-spacing: 0.02em;
  padding-bottom: 0.55rem;
  margin-bottom: 0.7rem;
  border-bottom: 1px solid color-mix(in srgb, var(--brass-dim) 42%, var(--line));
}
.modal-body { font: 0.92rem/1.5 var(--font-body); margin-bottom: 1.1rem; white-space: pre-line; }
.modal-buttons {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
  padding-top: 0.9rem;
  border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}
.modal-buttons .mix-btn.serve { width: auto; margin-top: 0; }
@media (prefers-reduced-motion: reduce) {
  .modal-panel { animation: none; }
}
.night-summary {
  display: grid;
  gap: 0.8rem;
  white-space: normal;
}
.night-summary-tabs {
  display: flex;
  gap: 0.35rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.45rem;
}
.night-summary-tab {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: transparent;
  color: var(--text-dim);
  font: 900 0.68rem var(--font-label);
  letter-spacing: 0.08em;
  padding: 0.34rem 0.75rem;
  cursor: pointer;
  text-transform: uppercase;
}
.night-summary-tab:hover { background: var(--panel-2); color: var(--text); }
.night-summary-tab.active {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--ink);
}
.night-summary-pane {
  display: grid;
  gap: 0.8rem;
}
.night-summary-pane[hidden] { display: none; }
.night-summary-lede {
  color: var(--text);
  font: 0.95rem/1.45 var(--font-body);
}
.night-summary-hero {
  display: grid;
  grid-template-columns: 5.2rem minmax(0, 1fr);
  gap: 0.8rem;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--brass) 48%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(232, 183, 93, 0.16), rgba(60, 147, 143, 0.08)),
    rgba(7, 10, 14, 0.48);
  padding: 0.75rem;
}
.night-summary-hero.grade-d,
.night-summary-hero.grade-f {
  border-color: color-mix(in srgb, var(--trouble) 55%, var(--line));
  background:
    linear-gradient(135deg, rgba(187, 77, 67, 0.18), rgba(232, 183, 93, 0.08)),
    rgba(7, 10, 14, 0.48);
}
.night-summary-rank {
  display: grid;
  place-items: center;
  min-height: 4.6rem;
  border: 1px solid color-mix(in srgb, var(--brass) 58%, transparent);
  border-radius: 6px;
  color: var(--glow);
  background: rgba(0, 0, 0, 0.22);
  font: 900 2.8rem/1 var(--font-number);
}
.night-summary-hero.grade-d .night-summary-rank,
.night-summary-hero.grade-f .night-summary-rank {
  border-color: color-mix(in srgb, var(--trouble) 58%, transparent);
  color: var(--trouble);
}
.night-summary-hero-copy {
  display: grid;
  gap: 0.22rem;
  min-width: 0;
}
.night-summary-grade-word {
  color: var(--glow);
  font: 900 1rem/1.15 var(--font-label);
  text-transform: uppercase;
}
.night-summary-hero-copy p {
  margin: 0;
  color: var(--text);
  font: 0.82rem/1.38 var(--font-body);
}
.night-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
}
.night-summary-card {
  min-height: 4.2rem;
  border: 1px solid color-mix(in srgb, var(--brass-dim) 38%, var(--line));
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 42%),
    rgba(10, 14, 19, 0.34);
  padding: 0.55rem 0.65rem;
}
.night-summary-card-trouble {
  border-color: color-mix(in srgb, var(--trouble) 56%, var(--line));
}
.night-summary-label {
  color: var(--text-dim);
  font: 900 0.58rem var(--font-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.night-summary-value {
  margin-top: 0.2rem;
  color: var(--glow);
  font: 900 1.05rem var(--font-number);
}
.night-summary-note {
  margin-top: 0.1rem;
  color: var(--text-dim);
  font: 0.72rem var(--font-body);
}
.night-summary-section {
  border-top: 1px solid var(--line);
  padding-top: 0.65rem;
}
.night-summary-section h3 {
  margin: 0 0 0.35rem;
  color: var(--glow);
  font: 900 0.68rem/1 var(--font-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.night-summary-section p {
  margin: 0.22rem 0;
  color: var(--text);
  font-family: var(--font-body);
}
.night-summary-trouble { color: var(--trouble); }
.night-stock {
  display: grid;
  gap: 0.8rem;
}
.night-stock-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem 0.7rem;
}
.night-stock-row {
  display: grid;
  grid-template-columns: minmax(7rem, 1fr) auto;
  gap: 0.12rem 0.45rem;
  align-items: baseline;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 40%, transparent);
  padding: 0.28rem 0;
  font: 0.74rem var(--font-body);
}
.night-stock-row span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-weight: 800;
}
.night-stock-row span:nth-child(2) {
  color: var(--glow);
  font: 900 0.72rem var(--font-number);
}
.night-stock-row span:nth-child(3) {
  grid-column: 1 / -1;
  color: var(--text-dim);
  font: 0.68rem var(--font-number);
}
.night-stock-row.night-summary-trouble span { color: var(--trouble); }

@media (max-width: 720px) {
  #venue-tag, .stat-label { display: none; }
  #logo { font-size: 1.05rem; }
  .night-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .night-stock-grid { grid-template-columns: 1fr; }
  .night-stock-row { grid-template-columns: minmax(0, 1fr) auto; }
  .night-stock-row span:nth-child(3) { grid-column: 1 / -1; }
}

/* ---------------------------------------- bar management --- */
.manage-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.2rem 0 0.9rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.5rem;
}
.manage-tab {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: transparent;
  color: var(--text-dim);
  font: 900 0.72rem var(--font-label);
  letter-spacing: 0.08em;
  padding: 0.35rem 0.9rem;
  cursor: pointer;
  text-transform: uppercase;
}
.manage-tab:hover { background: var(--panel-2); color: var(--text); }
.manage-tab.active { background: var(--brass); border-color: var(--brass); color: var(--ink); }
.stock-cat {
  font: 900 0.68rem var(--font-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0.7rem 0 0.25rem;
}
.stock-row {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 45%, transparent);
}
.stock-info { flex: 1; min-width: 0; }
.stock-line {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  min-width: 0;
}
.stock-name {
  font: 800 0.88rem var(--font-ui);
  color: var(--text);
}
.stock-meta {
  margin-top: 0.25rem;
  font: 0.72rem/1.35 var(--font-body);
  color: var(--text-dim);
}
.stock-meta.trouble { color: var(--trouble); }
.stock-fill {
  height: 0.28rem;
  margin-top: 0.35rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 999px;
  background: rgba(0,0,0,0.24);
}
.stock-fill span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brass-dim), var(--brass));
}
.stock-fill.trouble span {
  background: linear-gradient(90deg, color-mix(in srgb, var(--trouble) 55%, transparent), var(--trouble));
}
.stock-badge, .stock-chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.12rem 0.42rem;
  font: 900 0.62rem var(--font-number);
  white-space: nowrap;
}
.stock-badge {
  background: color-mix(in srgb, var(--brass) 18%, transparent);
  border-color: var(--brass-dim);
  color: var(--glow);
}
.stock-badge.trouble {
  background: color-mix(in srgb, var(--trouble) 18%, transparent);
  border-color: color-mix(in srgb, var(--trouble) 55%, var(--line));
  color: var(--trouble);
}
.stock-chip {
  background: rgba(255,255,255,0.035);
  color: var(--text-dim);
}
.stock-controls {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 62%;
}
.stock-supplier {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
  font: 800 0.68rem var(--font-label);
  letter-spacing: 0.02em;
  padding: 0.3rem 0.4rem;
  max-width: 9.5rem;
}
.stock-qty {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.stock-qty-step { padding: 0.3rem 0.5rem; }
.stock-qty-n {
  font: 800 0.8rem var(--font-number);
  min-width: 1.2rem;
  text-align: center;
}
.cellar-board {
  display: grid;
  gap: 0.75rem;
}
.cellar-scoreboard {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}
.cellar-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--line);
}
.cellar-filter {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,0.025);
  color: var(--text-dim);
  cursor: pointer;
  font: 900 0.62rem var(--font-label);
  letter-spacing: 0.08em;
  padding: 0.28rem 0.62rem;
  text-transform: uppercase;
}
.cellar-filter:hover {
  border-color: var(--brass-dim);
  color: var(--text);
}
.cellar-filter.active {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--ink);
}
.cellar-shelf {
  display: grid;
  gap: 0.28rem;
}
.cellar-shelf-list {
  display: grid;
  gap: 0.24rem;
}
.stock-row.cellar-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem 0.8rem;
  min-height: 3.75rem;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 7px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.03), transparent 42%),
    rgba(4, 7, 10, 0.28);
  padding: 0.52rem 0.62rem;
  cursor: pointer;
}
.stock-row.cellar-line:hover {
  border-color: color-mix(in srgb, var(--brass-dim) 70%, var(--line));
  background:
    linear-gradient(90deg, rgba(232,183,93,0.07), transparent 46%),
    rgba(4, 7, 10, 0.36);
}
.stock-row.cellar-line.urgent {
  border-color: color-mix(in srgb, var(--trouble) 48%, var(--line));
}
.stock-row.cellar-line.open {
  border-color: color-mix(in srgb, var(--brass) 62%, var(--line));
}
.cellar-line .stock-fill {
  max-width: 20rem;
}
.cellar-line-meta {
  white-space: normal;
  overflow-wrap: break-word;
}
.cellar-quick {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.cellar-cost {
  color: var(--glow);
  font: 900 0.88rem var(--font-number);
  min-width: 2.7rem;
  text-align: right;
}
.cellar-toggle {
  min-width: 4rem;
}
.stock-row.cellar-line .stock-controls {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, max-content);
  justify-content: start;
  align-items: center;
  gap: 0.4rem;
  max-width: none;
  padding-top: 0.45rem;
  border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  cursor: default;
}
@media (max-width: 980px) {
  .cellar-scoreboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stock-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .stock-row.cellar-line {
    grid-template-columns: minmax(0, 1fr);
  }
  .cellar-quick {
    justify-content: space-between;
  }
  .stock-controls {
    max-width: none;
    justify-content: flex-start;
  }
  .stock-row.cellar-line .stock-controls {
    grid-template-columns: 1fr;
  }
  .stock-row.cellar-line .stock-controls .mix-btn,
  .stock-row.cellar-line .stock-controls .stock-supplier {
    width: 100%;
    max-width: none;
  }
}
.career-kv.stock-risky .career-v { color: var(--trouble); }
.career-cv-line.trouble { color: var(--trouble); }
.menu-col { max-width: 40rem; margin: 0 auto; }
.menu-step { padding: 0.3rem 0.55rem; }
.menu-price {
  font: 900 0.82rem var(--font-number);
  min-width: 3.6rem;
  text-align: center;
  color: var(--glow, #f4e3c2);
}
.ops-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  margin-bottom: 0.65rem;
}
.ops-pill {
  min-height: 3.1rem;
  border: 1px solid color-mix(in srgb, var(--brass-dim) 70%, var(--line));
  border-radius: 7px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--brass) 13%, transparent), rgba(0,0,0,0.12));
  padding: 0.45rem 0.55rem;
}
.ops-pill-value {
  display: block;
  color: var(--glow);
  font: 900 1.05rem/1 var(--font-number);
}
.ops-pill-label {
  display: block;
  margin-top: 0.22rem;
  color: var(--text-dim);
  font: 900 0.56rem/1.1 var(--font-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ops-list {
  display: grid;
  gap: 0.45rem;
}
.ops-action {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  justify-content: space-between;
  min-height: 3.7rem;
  border-left: 3px solid var(--brass-dim);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--brass) 12%, transparent), transparent 62%);
  padding: 0.5rem 0 0.5rem 0.65rem;
}
.ops-action.urgent {
  border-left-color: var(--trouble);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--trouble) 14%, transparent), transparent 62%);
}
.ops-action-info {
  min-width: 0;
}
.ops-action-title {
  color: var(--text);
  font: 900 0.86rem/1.1 var(--font-ui);
}
.ops-action-meta {
  margin-top: 0.22rem;
  color: var(--text-dim);
  font: 0.74rem/1.35 var(--font-body);
}
.ops-action.urgent .ops-action-meta {
  color: color-mix(in srgb, var(--trouble) 72%, var(--text-dim));
}
.event-row {
  display: grid;
  grid-template-columns: minmax(4.1rem, auto) minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  padding: 0.55rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 45%, transparent);
}
.event-time {
  border: 1px solid var(--brass-dim);
  border-radius: 999px;
  padding: 0.18rem 0.35rem;
  text-align: center;
  color: var(--glow);
  background: color-mix(in srgb, var(--brass) 12%, transparent);
  font: 900 0.64rem var(--font-number);
}
.event-time-long {
  border-radius: 6px;
  padding-inline: 0.45rem;
  white-space: nowrap;
}
.event-name {
  color: var(--text);
  font: 800 0.86rem var(--font-ui);
}
.event-meta {
  margin-top: 0.12rem;
  color: var(--text-dim);
  font: 0.74rem var(--font-body);
  line-height: 1.35;
}
.event-row.trouble .event-time {
  border-color: color-mix(in srgb, var(--trouble) 60%, var(--line));
  background: color-mix(in srgb, var(--trouble) 13%, transparent);
  color: var(--trouble);
}
.event-row.trouble .event-meta { color: color-mix(in srgb, var(--trouble) 70%, var(--text-dim)); }
.analytics-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.analytics-controls {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0.55rem 0;
}
.analytics-calendar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.35rem;
  margin-bottom: 0.7rem;
}
.analytics-day {
  appearance: none;
  min-height: 3.15rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(0,0,0,0.18);
  color: var(--text);
  cursor: pointer;
  padding: 0.38rem;
  text-align: left;
}
.analytics-day:hover,
.analytics-day.active {
  border-color: var(--brass);
  background: color-mix(in srgb, var(--brass) 15%, rgba(0,0,0,0.18));
}
.analytics-day.trouble {
  border-color: color-mix(in srgb, var(--trouble) 50%, var(--line));
}
.analytics-day-num,
.analytics-day-meta {
  display: block;
}
.analytics-day-num {
  color: var(--glow);
  font: 900 0.66rem var(--font-number);
}
.analytics-day-meta {
  margin-top: 0.22rem;
  color: var(--text-dim);
  font: 0.66rem/1.2 var(--font-ui);
}
.analytics-line,
.analytics-need {
  padding: 0.55rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 45%, transparent);
}
.analytics-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(5rem, 28%);
  gap: 0.7rem;
  align-items: center;
}
.analytics-line-info { min-width: 0; }
.analytics-line-name {
  color: var(--text);
  font: 900 0.84rem/1.15 var(--font-ui);
}
.analytics-line-meta {
  margin-top: 0.18rem;
  color: var(--text-dim);
  font: 0.72rem/1.35 var(--font-body);
}
.analytics-share {
  height: 0.35rem;
  border-radius: 999px;
  background: rgba(0,0,0,0.28);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.analytics-share span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brass-dim), var(--brass));
}
@media (max-width: 560px) {
  .ops-strip, .analytics-strip { grid-template-columns: 1fr; }
  .analytics-calendar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-line { grid-template-columns: minmax(0, 1fr); }
  .ops-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }
  .event-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35rem;
  }
  .event-time {
    justify-self: start;
  }
}

/* ============================================================
   MOBILE OVERHAUL + FLUID MOTION PASS
   ============================================================
   Phones get a different chrome layout: compact HUD bar up top,
   a thumb dock for the four actions at the bottom, and the
   Command Centre as a draggable bottom sheet (collapsed to a
   one-line "shift strip" by default so the room is the screen).
   Springs are CSS linear() curves; the sheet gesture lives in
   commandCentre.js. Desktop layout is untouched.
   ============================================================ */
:root {
  --spring-pop: linear(0, 0.0158 1.1%, 0.0625 2.3%, 0.1407 3.6%, 0.5234 8.5%,
    0.8246 12.6%, 0.9468 15.3%, 1.0244 18.5%, 1.0587 21.8%, 1.0616 24.5%,
    1.0342 30%, 1.0096 35.3%, 0.9956 41%, 0.9925 46.4%, 1.0002 59.4%, 1);
  --spring-out: cubic-bezier(0.22, 1, 0.36, 1);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --dock-clear: calc(var(--safe-bottom) + 4.1rem); /* dock height + gap */
}

/* Respond on the press, everywhere — instant in, no dead buttons. */
button:not(:disabled):active { transform: scale(0.96); }
#speed-controls button:not(:disabled):active { transform: none; } /* segmented control stays seated */

/* Sheet scaffolding exists at all sizes; desktop hides the strip
   and lets the body flow exactly as the old panel did. */
.cc-strip { display: none; }
.cc-body { display: contents; }

@media (max-width: 760px) {
  /* ---------------- compact HUD: clock · speed · cash ------- */
  #hud {
    gap: 0.6rem;
    padding: calc(var(--safe-top) + 0.45rem) 0.8rem 0.45rem;
  }
  .hud-left { display: none; } /* wordmark yields to the room */
  .hud-mid { flex: 1; justify-content: space-between; gap: 0.6rem; }
  #clock { text-align: left; }
  #clock-time { font-size: 1.05rem; }
  #speed-controls button { padding: 0.5rem 0.72rem; font-size: 0.78rem; }
  .hud-stats {
    border-right: none;
    padding-right: 0;
    margin-right: 0;
    gap: 0;
  }
  .hud-stats .stat:not(:first-child) { display: none; } /* guests/orders live on the strip */
  .hud-stats .stat { min-width: 0; }
  .hud-stats .stat-label { display: none; }

  /* ---------------- thumb dock: the four actions ------------ */
  .hud-controls {
    position: fixed;
    left: 50%;
    bottom: calc(var(--safe-bottom) + 0.6rem);
    transform: translateX(-50%);
    z-index: 40;
    gap: 0.15rem;
    padding: 0.3rem;
    background: color-mix(in srgb, var(--panel) 74%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid color-mix(in srgb, var(--brass-dim) 45%, var(--line));
    border-radius: 999px;
    box-shadow: 0 14px 34px -12px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06);
  }
  .hud-controls button {
    border: none;
    border-radius: 999px;
    padding: 0.6rem 0.85rem;
    min-height: 2.5rem;
    font: 800 0.7rem var(--font-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: transform 0.35s var(--spring-pop), background var(--dur-fast), color var(--dur-fast);
  }
  #btn-service {
    background: var(--brass);
    color: var(--ink);
    border: none;
  }
  #btn-service.active { background: var(--glow); }
  #btn-service:disabled { background: transparent; color: var(--text-dim); }

  /* ---------------- Command Centre as a bottom sheet -------- */
  .command-centre {
    left: 0;
    right: 0;
    top: auto;
    bottom: var(--dock-clear);
    width: auto;
    z-index: 30;
    display: flex;
    flex-direction: column;
    max-height: min(68dvh, 32rem);
    margin: 0 0.5rem;
    padding: 0;
    border-radius: 14px;
    border-left-width: 1px;
    background: color-mix(in srgb, #101820 82%, var(--mahogany));
    background-blend-mode: normal;
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
    animation: none;
    transform: translateY(calc(100% - 3.55rem));
    transition: transform 0.6s var(--spring-pop);
    will-change: transform;
    touch-action: none;
  }
  .command-centre.cc-open { transform: translateY(0); }
  .command-centre.cc-dragging { transition: none; }
  body.behind-bar .command-centre { display: none; } /* service mode owns the bottom */

  .cc-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "grip grip" "info state";
    align-items: center;
    gap: 0.1rem 0.6rem;
    min-height: 3.55rem;
    padding: 0.3rem 0.9rem 0.55rem;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
  }
  .cc-grip {
    grid-area: grip;
    width: 2.2rem;
    height: 0.28rem;
    border-radius: 999px;
    margin: 0.25rem auto 0.15rem;
    background: color-mix(in srgb, var(--text-dim) 55%, transparent);
  }
  .cc-strip-info {
    grid-area: info;
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    min-width: 0;
  }
  .cc-strip-meters {
    color: var(--glow);
    font: 700 0.8rem var(--font-ui);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cc-strip .cc-state { grid-area: state; }
  .cc-body {
    display: block;
    overflow-y: auto;
    min-height: 0;
    padding: 0 0.7rem calc(var(--safe-bottom) + 0.8rem);
    overscroll-behavior: contain;
  }
  .cc-body .cc-head { padding-top: 0.1rem; }
  .cc-body .cc-head .cc-state { display: none; } /* the strip already says it */
  .cc-actions { grid-template-columns: 1fr; }
  .cc-action { min-height: 3.3rem; }
  .cc-btn { min-height: 2.4rem; padding: 0.45rem 0.7rem; }
  .cc-link { min-height: 2.4rem; }

  /* ---------------- ticker: three quiet lines --------------- */
  #ticker {
    left: 0.6rem;
    right: 0.6rem;
    bottom: calc(var(--dock-clear) + 3.9rem);
    max-width: none;
    padding: 0.3rem 0.5rem;
    background: none;
  }
  body.behind-bar #ticker { bottom: calc(var(--dock-clear) + 9rem); }
  .tick {
    font-size: 0.72rem;
    padding: 0.16rem 0.5rem;
    text-shadow: 0 1px 4px rgba(0,0,0,0.95);
  }
  #ticker .tick:nth-child(n+4) { display: none; }

  /* ---------------- service mode: orders as a card rail ----- */
  #orders-panel {
    top: auto;
    left: 0.5rem;
    right: 0.5rem;
    bottom: var(--dock-clear);
    width: auto;
    max-height: none;
    overflow: visible;
    background: color-mix(in srgb, var(--panel) 76%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
    border-radius: 14px;
    padding: 0.55rem 0.6rem 0.6rem;
  }
  #orders-list {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.15rem;
  }
  #orders-list::-webkit-scrollbar { display: none; }
  .order-card {
    flex: 0 0 70%;
    max-width: 16rem;
    margin-bottom: 0;
    scroll-snap-align: start;
    padding: 0.55rem 0.65rem;
  }
  .oc-make { min-height: 2.5rem; font-size: 0.8rem; }

  /* ---------------- overlays become full sheets -------------- */
  #career-overlay, #manage-overlay, #mix-overlay {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }
  .career-panel, .manage-panel, .mix-panel {
    width: 100%;
    max-height: none;
    height: 100%;
    border-radius: 0;
    border-left: none;
    border-right: none;
    padding: calc(var(--safe-top) + 0.9rem) 0.9rem calc(var(--safe-bottom) + 1.4rem);
    animation: sheet-up 0.5s var(--spring-out);
  }
  #modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .modal-panel {
    width: 100%;
    max-width: none;
    max-height: 88dvh;
    border-radius: 16px 16px 0 0;
    border-bottom: none;
    padding-bottom: calc(var(--safe-bottom) + 1.2rem);
    animation: sheet-up 0.55s var(--spring-pop);
  }
  .manage-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -0.9rem;
    margin-right: -0.9rem;
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }
  .manage-tabs::-webkit-scrollbar { display: none; }
  .manage-tab {
    flex: 0 0 auto;
    min-height: 2.5rem;
    padding: 0.5rem 1rem;
  }
  /* fingers need forty-four points; late-night fingers need more */
  .mix-btn, .cc-btn, .oc-make, .hire-btn, .career-panel button, .manage-panel button, .modal-panel button {
    min-height: 2.5rem;
  }
  /* sub-16px inputs make iOS zoom the page and stay zoomed */
  input, select, textarea { font-size: 1rem; }
}

@keyframes sheet-up {
  from { opacity: 0; transform: translateY(4%); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .command-centre { transition-duration: 0.15s; transition-timing-function: ease; }
  .career-panel, .manage-panel, .mix-panel, .modal-panel { animation: none; }
  button:not(:disabled):active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .hud-controls, .command-centre, #orders-panel {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  @media (max-width: 760px) {
    .hud-controls { background: var(--panel); }
    .command-centre { background: #101820; }
    #orders-panel { background: var(--panel); }
  }
}

/* The dock lives inside #hud, which is a flex item with a z-index —
   that traps its fixed children in a low stacking context. On mobile
   the whole HUD context rides above the sheet so the dock paints. */
@media (max-width: 760px) {
  #hud { z-index: 45; }
  /* collapsed sheet: only the strip reads; the body holds its place
     but goes quiet until the sheet is lifted or grabbed */
  .command-centre:not(.cc-open):not(.cc-dragging) .cc-body { opacity: 0; pointer-events: none; }
  .cc-body { transition: opacity 0.25s ease; }
  /* the strip already says Shift board + state — drop the inner head */
  .cc-body .cc-head { display: none; }
}

/* GAME-WIDE WORKSPACE PASS */
:root {
  --chrome: #10151b;
  --chrome-raised: #171e26;
  --hairline: color-mix(in srgb, var(--brass-dim) 28%, var(--line));
  --hud-height: 5rem;
}
body { background: #05070a; }
button, input, select, textarea { font-family: var(--font-ui); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; }

/* The persistent instrument rail */
#hud {
  min-height: var(--hud-height);
  padding: 0 1.25rem;
  gap: clamp(1rem, 2vw, 2.4rem);
  background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent 48%), var(--chrome);
  border-bottom-color: var(--hairline);
  box-shadow: 0 1rem 2.6rem rgba(0,0,0,0.28);
}
.hud-left { min-width: 19rem; }
.hud-mid { margin-left: auto; }
.hud-right { gap: 1.15rem; }
#logo { font-size: 1.28rem; letter-spacing: 0.18em; white-space: nowrap; }
#venue-tag { display: grid; grid-template-columns: auto 1fr; column-gap: 0.45rem; min-width: 0; }
#venue-status {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.12rem;
  color: var(--text-dim); font: 800 0.55rem/1 var(--font-label); letter-spacing: 0.14em; text-transform: uppercase;
}
#venue-status span {
  width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--success);
  box-shadow: 0 0 0.65rem color-mix(in srgb, var(--success) 72%, transparent);
}
#venue-name, #venue-sub { grid-column: 1 / -1; }
#venue-name { overflow: hidden; font-size: 1.02rem; text-overflow: ellipsis; white-space: nowrap; }
#clock-time { font-size: 1.28rem; }
#speed-controls { border-color: var(--hairline); background: rgba(0,0,0,0.18); }
#speed-controls button { min-width: 2.6rem; min-height: 2.35rem; }
#speed-controls button.active { background: var(--glow); box-shadow: 0 0 1rem rgba(217,154,61,0.14); }
.hud-stats { gap: 1.2rem; border-right-color: var(--hairline); }
.stat { min-width: 4.1rem; }
.stat-label { margin-bottom: 0.15rem; }
.stat-value { font-size: 1rem; }
.hud-controls { gap: 0; }
.hud-controls button {
  min-height: 2.35rem; border: 0; border-left: 1px solid var(--hairline); border-radius: 0;
  padding: 0.45rem 0.72rem; letter-spacing: 0;
}
.hud-controls button:first-child { border-left: 0; }
#btn-service {
  margin-left: 0.55rem; border: 1px solid var(--brass-dim); border-radius: var(--r-sm);
  padding-inline: 0.9rem; background: color-mix(in srgb, var(--brass) 9%, transparent);
}

/* The room stays visually dominant */
#stage { background: #05070a; }
#stage::before {
  content: "FLOOR / LIVE"; position: absolute; right: 1.1rem; bottom: 0.9rem; z-index: 3;
  color: rgba(232,226,214,0.26); font: 800 0.55rem var(--font-label); letter-spacing: 0.18em; pointer-events: none;
}
#stage::after {
  background: linear-gradient(90deg, rgba(0,0,0,0.3), transparent 14%, transparent 86%, rgba(0,0,0,0.3)),
    linear-gradient(180deg, rgba(0,0,0,0.06), transparent 25%, transparent 72%, rgba(0,0,0,0.34));
}

/* Shift board is one ledger, not nested cards */
.command-centre {
  width: min(20rem, calc(100vw - 2rem)); padding: 0.8rem 0.85rem 0.72rem;
  border: 1px solid var(--hairline); border-top: 2px solid var(--brass); border-left-width: 1px;
  background: color-mix(in srgb, var(--chrome) 91%, transparent); backdrop-filter: blur(16px) saturate(125%);
  box-shadow: 0 1.2rem 3rem rgba(0,0,0,0.38);
}
.cc-head { padding-bottom: 0.65rem; }
.cc-title strong { font-size: 1.2rem; }
.cc-meters { gap: 0; margin: 0; border-bottom: 1px solid var(--hairline); }
.cc-meter {
  border: 0; border-right: 1px solid var(--hairline); border-radius: 0; background: transparent; padding: 0.65rem 0.5rem;
}
.cc-meter:first-child { padding-left: 0; }
.cc-meter:last-child { border-right: 0; }
.cc-meter.trouble { background: transparent; }
.cc-actions { gap: 0; }
.cc-action, .cc-action.quiet, .cc-action.urgent {
  min-height: 3.25rem; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 48%, transparent);
  border-radius: 0; background: transparent; padding: 0.55rem 0;
}
.cc-action:last-child { border-bottom: 0; }
.cc-action.urgent { animation: none; }
.cc-lamp { width: 0.38rem; height: 0.38rem; }
.cc-btn, .cc-link { border-radius: 3px; }

/* Deep tools use the whole workspace */
#career-overlay, #manage-overlay, #mix-overlay {
  align-items: stretch; justify-content: stretch; padding: clamp(0.65rem, 1.4vw, 1.2rem);
  background: rgba(5,7,10,0.86); backdrop-filter: blur(12px) saturate(90%);
}
.career-panel, .mix-panel {
  width: min(84rem, 100%); height: 100%; max-height: none; margin: 0 auto; border-radius: 4px;
  padding: 1.1rem clamp(1rem, 2vw, 1.8rem) 1.5rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent 12%), var(--chrome);
  border-color: var(--hairline); box-shadow: 0 2rem 6rem rgba(0,0,0,0.58);
}
.mix-panel::before { display: none; }
.mix-head {
  position: sticky; top: -1.1rem; z-index: 10; min-height: 4.25rem; margin: -1.1rem 0 1rem; padding: 0.75rem 0;
  background: var(--chrome); border-bottom-color: var(--hairline);
}
.mix-title-name { font-size: clamp(1.35rem, 2vw, 1.75rem); letter-spacing: 0; }
.career-cols { gap: clamp(1.5rem, 3vw, 3rem); }
.career-section-title { margin-top: 0.35rem; padding-bottom: 0.5rem; }
.manage-tabs {
  position: sticky; top: 3.15rem; z-index: 9; flex-wrap: nowrap; overflow-x: auto;
  margin: -1rem 0 1.2rem; padding: 0.55rem 0; background: var(--chrome); border-bottom-color: var(--hairline);
}
.manage-tab {
  flex: 0 0 auto; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 0.55rem 0.8rem;
}
.manage-tab.active { color: var(--glow); background: transparent; border-bottom-color: var(--brass); }
.manage-tab:hover { background: rgba(255,255,255,0.035); }
.mix-btn { border-radius: 3px; background: transparent; box-shadow: none; }
.mix-btn:hover { box-shadow: 0 0.45rem 1.2rem rgba(0,0,0,0.2); }
.stock-row { padding-block: 0.65rem; }
.stock-row.cellar-line, .ops-pill, .analytics-day { border-radius: 4px; }

@media (max-width: 1180px) {
  .hud-left { min-width: 0; }
  #venue-tag { display: none; }
  .hud-stats .stat:nth-child(n+3) { display: none; }
}
@media (max-width: 760px) {
  :root { --hud-height: auto; }
  #hud { min-height: 0; padding: calc(var(--safe-top) + 0.45rem) 0.8rem 0.45rem; }
  .hud-left { display: none; }
  .hud-controls { gap: 0.15rem; }
  .hud-controls button { border: 0; border-radius: 999px; padding-inline: 0.8rem; }
  #btn-service { margin-left: 0; border: 0; }
  #stage::before { display: none; }
  .command-centre { width: auto; padding: 0; border-top-width: 1px; border-radius: 12px; }
  .cc-meter { padding-inline: 0.5rem; }
  #career-overlay, #manage-overlay, #mix-overlay { padding: 0; }
  .career-panel, .mix-panel {
    border-radius: 0; padding: calc(var(--safe-top) + 0.9rem) 0.9rem calc(var(--safe-bottom) + 1.4rem);
  }
  .mix-head {
    top: calc(-1 * (var(--safe-top) + 0.9rem)); margin-top: calc(-1 * (var(--safe-top) + 0.9rem));
    padding-top: calc(var(--safe-top) + 0.75rem);
  }
  .manage-tabs { top: calc(3.15rem + var(--safe-top)); }
}
@media (prefers-contrast: more) {
  #hud, .command-centre, .career-panel, .mix-panel { background: #090c10; border-color: var(--text-dim); }
}

/* ============================================================
   OBJECT-FIRST MIXING
   ============================================================ */
.mix-body {
  grid-template-columns: minmax(22rem, 0.9fr) minmax(30rem, 1.35fr);
  min-height: calc(100% - 5rem);
}
.mix-buildcol {
  display: grid;
  grid-template-columns: minmax(16rem, 0.9fr) minmax(18rem, 1.1fr);
  grid-template-areas:
    "theatre glass"
    "theatre ice"
    "theatre prompt"
    "theatre measure"
    "theatre serve"
    "theatre pours"
    "theatre method"
    "theatre garnish"
    "theatre action";
  align-content: start;
  gap: 0 1.15rem;
}
.mix-theatre {
  grid-area: theatre;
  position: sticky;
  top: 4.3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: 30rem;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 75%, rgba(217,154,61,0.16), transparent 35%),
    linear-gradient(180deg, #090c10, #130e0b);
  border-bottom: 3px solid #5a351f;
  box-shadow: inset 0 -1px rgba(244,227,194,0.15);
  padding: 2rem 1rem 1.2rem;
}
.mix-theatre::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 2.9rem, rgba(255,255,255,0.012) 3rem);
}
.mix-coaster {
  position: relative;
  display: grid;
  place-items: end center;
  width: 13rem;
  height: 19rem;
}
.mix-coaster::after {
  content: "";
  position: absolute;
  bottom: -0.45rem;
  width: 9rem;
  height: 1rem;
  border-radius: 50%;
  background: rgba(0,0,0,0.72);
  box-shadow: 0 0.5rem 1.3rem rgba(0,0,0,0.75);
}
.mix-vessel {
  --glass-width: 7rem;
  --glass-height: 10rem;
  position: relative;
  z-index: 1;
  width: var(--glass-width);
  height: var(--glass-height);
  overflow: hidden;
  border: 2px solid rgba(220,235,238,0.48);
  border-top-color: rgba(244,250,250,0.76);
  border-radius: 0.25rem 0.25rem 1.35rem 1.35rem;
  background: linear-gradient(90deg, rgba(255,255,255,0.08), transparent 22% 78%, rgba(255,255,255,0.07));
  box-shadow: inset 0 0 1.4rem rgba(180,220,225,0.08), 0 1rem 2rem rgba(0,0,0,0.38);
  transition: width 280ms var(--ease-out), height 280ms var(--ease-out), border-radius 280ms var(--ease-out);
}
.mix-vessel::before {
  content: "";
  position: absolute;
  z-index: 6;
  left: -2px;
  right: -2px;
  top: -0.22rem;
  height: 0.45rem;
  border: 2px solid rgba(235,248,250,0.68);
  border-radius: 50%;
  background: rgba(210,235,240,0.06);
  box-shadow: inset 0 0 0.25rem rgba(255,255,255,0.18);
}
.mix-vessel.glass-unset { opacity: 0.32; border-style: dashed; }
.mix-vessel.glass-rocks { --glass-width: 7.8rem; --glass-height: 8.5rem; clip-path: polygon(4% 0, 96% 0, 88% 100%, 12% 100%); border-radius: 0.2rem 0.2rem 1.2rem 1.2rem; }
.mix-vessel.glass-coupe { --glass-width: 10rem; --glass-height: 5.5rem; border-radius: 0.3rem 0.3rem 50% 50%; overflow: visible; margin-bottom: 7rem; }
.mix-vessel.glass-coupe::after, .mix-vessel.glass-martini::after {
  content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 6rem;
  background: rgba(220,235,238,0.52); box-shadow: -2.5rem 6rem 0 -1px rgba(220,235,238,0.52), 2.5rem 6rem 0 -1px rgba(220,235,238,0.52);
}
.mix-vessel.glass-martini { --glass-width: 10rem; --glass-height: 6rem; clip-path: polygon(0 0, 100% 0, 58% 100%, 42% 100%); border-radius: 0; overflow: visible; margin-bottom: 6rem; }
.mix-vessel.glass-highball { --glass-width: 6rem; --glass-height: 13rem; border-radius: 0.25rem 0.25rem 0.8rem 0.8rem; }
.mix-vessel.glass-wine { --glass-width: 8rem; --glass-height: 8rem; border-radius: 0.4rem 0.4rem 48% 48%; overflow: visible; margin-bottom: 5rem; }
.mix-vessel.glass-wine::after {
  content: ""; position: absolute; left: calc(50% - 1px); top: 100%; width: 2px; height: 4.6rem;
  background: rgba(220,235,238,0.55); box-shadow: 0 4.25rem 0 1.8rem rgba(220,235,238,0.22);
}
.mix-vessel.glass-pint { --glass-width: 7.5rem; --glass-height: 14rem; clip-path: polygon(5% 0, 95% 0, 86% 100%, 14% 100%); border-radius: 0.3rem 0.3rem 1rem 1rem; }
.mix-liquid {
  position: absolute;
  inset: auto 0.18rem 0.18rem;
  height: 0;
  border-radius: 0 0 1.05rem 1.05rem;
  box-shadow: inset 0 0.6rem rgba(255,255,255,0.12), 0 0 1.5rem rgba(217,154,61,0.18);
  transition: height 350ms var(--spring-out), background 220ms ease;
}
.glass-coupe .mix-liquid { border-radius: 0 0 50% 50%; }
.glass-martini .mix-liquid { clip-path: polygon(0 0, 100% 0, 58% 100%, 42% 100%); }
.glass-wine .mix-liquid { border-radius: 0 0 48% 48%; }
.mix-liquid::after {
  content: ""; position: absolute; inset: 0; opacity: 0.28;
  background: radial-gradient(circle at 30% 25%, white 0 1px, transparent 2px), radial-gradient(circle at 70% 58%, white 0 1px, transparent 2px);
  background-size: 1.7rem 2rem, 2.2rem 2.5rem;
}
.mix-ice-visual { position: absolute; inset: 20% 12% 8%; z-index: 2; pointer-events: none; }
.mix-ice-visual:not([data-ice="none"])::before,
.mix-ice-visual:not([data-ice="none"])::after {
  content: ""; position: absolute; width: 2.2rem; height: 2.2rem; border: 1px solid rgba(235,250,255,0.58);
  border-radius: 0.3rem; background: rgba(210,238,242,0.13); transform: rotate(16deg); box-shadow: inset 0 0 0.7rem rgba(255,255,255,0.14);
}
.mix-ice-visual:not([data-ice="none"])::after { right: 0; bottom: 12%; transform: rotate(-22deg) scale(0.85); }
.mix-garnish-visual:not([data-garnish="none"])::after {
  content: ""; position: absolute; z-index: 4; right: -0.25rem; top: 0.65rem; width: 2.2rem; height: 2.2rem;
  border: 0.35rem solid #b7c64a; border-radius: 50%; background: #dfe891; box-shadow: 0 0.25rem 0.6rem rgba(0,0,0,0.35);
}
.mix-theatre-copy { position: relative; z-index: 2; margin-top: 1rem; text-align: center; }
.mix-theatre-kicker { color: var(--brass); font: 900 0.58rem var(--font-label); letter-spacing: 0.18em; text-transform: uppercase; }
.mix-theatre-state { margin-top: 0.25rem; color: var(--glow); font: 1.35rem var(--font-display); }
.mix-theatre-meta { margin-top: 0.2rem; color: var(--text-dim); font: 0.72rem var(--font-number); }
.mix-row-glass { grid-area: glass; }
.mix-row-ice { grid-area: ice; }
.mix-measure-values { grid-area: measure; }
.mix-serve-values { grid-area: serve; }
.mix-measure-sheet { display: none; }
.mix-measure-sheet.is-visible {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  z-index: 90;
  display: block;
  width: min(31rem, calc(100vw - 4rem));
  padding: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--brass) 55%, var(--line));
  border-radius: 6px;
  background: #151d25;
  box-shadow: 0 1.5rem 4rem rgba(0,0,0,0.62), inset 0 1px rgba(255,255,255,0.05);
  animation: measure-arrive 180ms var(--ease-out);
}
.mix-measure-sheet .mix-measure-prompt.is-visible {
  display: grid;
  grid-template-columns: auto 1fr auto;
}
.mix-measure-sheet .mix-context-measure.is-visible { display: block; }
.mix-buildcol > .mix-pours { grid-area: pours; }
.mix-row-method { grid-area: method; }
.mix-row-garnish { grid-area: garnish; }
.mix-buildcol > .mix-btn.serve { grid-area: action; }
.mix-context-measure, .mix-measure-prompt, .mix-measure-scrim { display: none; }
.mix-context-measure.is-visible { display: block; animation: measure-arrive 180ms var(--ease-out); }
.mix-measure-prompt.is-visible {
  grid-area: prompt;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.65rem;
  align-items: baseline;
  margin-bottom: 0.55rem;
  padding: 0.65rem 0.75rem;
  border-left: 3px solid var(--brass);
  background: linear-gradient(90deg, color-mix(in srgb, var(--brass) 13%, transparent), transparent);
  animation: measure-arrive 180ms var(--ease-out);
}
.mix-measure-prompt-label, .mix-measure-prompt-hint { color: var(--text-dim); font: 800 0.58rem var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; }
.mix-measure-prompt-name { color: var(--glow); font: 1.05rem var(--font-display); }
.mix-measure-prompt-hint { grid-column: 2; }
.mix-measure-cancel {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font: 800 0.66rem var(--font-label);
  text-transform: uppercase;
}
.mix-bottle.is-selected { background: color-mix(in srgb, var(--brass) 10%, transparent); transform: translateY(-0.3rem); }
.mix-bottle.is-selected .mix-bottle-body { box-shadow: 0 0 0 2px var(--brass), 0 0.8rem 1.3rem rgba(0,0,0,0.48); }
@keyframes measure-arrive { from { opacity: 0; transform: translateY(-0.35rem); } }

/* A shelf of identifiable bottles, not a button matrix. */
.mix-backbar {
  background: linear-gradient(180deg, #13100e, #080a0d);
  border: 0;
  border-bottom: 4px solid #58351f;
  box-shadow: inset 0 -1px rgba(244,227,194,0.18);
  padding: 0.8rem;
}
.mix-shelf { grid-template-columns: repeat(4, minmax(4rem, 1fr)); align-items: end; gap: 0.45rem; }
.mix-bottle {
  flex-direction: column; justify-content: flex-end; gap: 0.35rem; min-height: 8rem;
  border: 0; border-radius: 0; background: transparent; padding: 0.5rem 0.2rem 0.2rem; text-align: center;
}
.mix-bottle:hover { background: rgba(217,154,61,0.06); transform: translateY(-0.25rem); }
.mix-bottle-dot { display: none; }
.mix-bottle-body {
  position: relative; display: block; width: 2.5rem; height: 5.4rem; border: 1px solid rgba(255,255,255,0.18);
  border-radius: 0.35rem 0.35rem 0.7rem 0.7rem; background: linear-gradient(90deg, rgba(255,255,255,0.18), transparent 35%), var(--bottle-colour);
  box-shadow: inset 0 0 1rem rgba(0,0,0,0.22), 0 0.5rem 0.8rem rgba(0,0,0,0.35);
}
.mix-bottle-body::before { content: ""; position: absolute; left: 0.75rem; top: -1.15rem; width: 0.85rem; height: 1.3rem; border-radius: 0.15rem 0.15rem 0 0; background: inherit; }
.mix-bottle-label { position: absolute; left: 0.25rem; right: 0.25rem; top: 2rem; height: 1.35rem; background: #e6ddc8; border: 1px solid rgba(30,20,10,0.38); }
.mix-bottle-name { color: var(--text); font: 700 0.66rem/1.15 var(--font-ui); }

/* The serve result is staged like a pass handoff and receipt. */
.mix-result {
  grid-template-columns: minmax(18rem, 0.8fr) minmax(22rem, 1fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 7rem);
  max-width: 62rem;
  margin: 4vh auto 0;
  padding: 3rem;
  border-top: 0;
  background: radial-gradient(circle at 22% 58%, rgba(217,154,61,0.14), transparent 27%);
}
.mix-result-drink {
  position: relative; justify-self: center; width: 11rem; height: 18rem; overflow: hidden;
  border: 3px solid rgba(220,235,238,0.5); border-top-color: rgba(255,255,255,0.8); border-radius: 0.4rem 0.4rem 2rem 2rem;
  box-shadow: 0 2.5rem 4rem rgba(0,0,0,0.5), inset 0 0 2rem rgba(210,240,245,0.08);
}
.mix-result-drink::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(255,255,255,0.16), transparent 25% 70%, rgba(255,255,255,0.06)); }
.mix-result-liquid { position: absolute; inset: 18% 0.2rem 0.2rem; border-radius: 0 0 1.65rem 1.65rem; }
.mix-result-drink.score-good { filter: drop-shadow(0 0 1.5rem rgba(107,191,117,0.25)); }
.mix-result-drink.score-bad { filter: saturate(0.7); }
.mix-result-ticket { border-left: 1px solid var(--hairline); padding-left: clamp(1.5rem, 4vw, 4rem); text-align: left; }
.mix-result-score { font-size: 5rem; line-height: 0.9; }
.mix-result-verdict { font-size: 1.6rem; margin: 0.65rem 0; }
.mix-result-notes { list-style: none; margin: 1rem 0; }
.mix-result-notes li { padding: 0.3rem 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.mix-result-ticket .mix-btn { width: auto; min-width: 10rem; }

@media (max-width: 1050px) {
  .mix-body { grid-template-columns: 1fr; }
  .mix-buildcol { grid-template-columns: minmax(14rem, 0.8fr) minmax(18rem, 1.2fr); }
  .mix-theatre { position: relative; top: auto; }
}
@media (max-width: 700px) {
  .mix-buildcol { display: flex; flex-direction: column; }
  .mix-theatre { min-height: 25rem; order: -1; margin-bottom: 1rem; }
  .mix-backbar { order: 2; }
  .mix-shelf { grid-template-columns: repeat(4, minmax(3.5rem, 1fr)); }
  .mix-result { grid-template-columns: 1fr; padding: 1.5rem 0.5rem; margin-top: 0; }
  .mix-result-drink { width: 7rem; height: 10rem; }
  .mix-result-ticket { border-left: 0; border-top: 1px solid var(--hairline); padding: 1.5rem 0 0; text-align: center; }
  .mix-measure-scrim.is-visible {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 89;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(3,5,7,0.68);
    backdrop-filter: blur(3px);
    animation: measure-scrim-in 160ms ease-out;
  }
  .mix-measure-sheet.is-visible {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: block;
    width: 100%;
    max-height: min(25rem, 72dvh);
    overflow-y: auto;
    margin: 0;
    padding: 0.8rem 1rem calc(env(safe-area-inset-bottom, 0px) + 0.9rem);
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--brass) 55%, var(--line));
    border-radius: 16px 16px 0 0;
    background: #151d25;
    box-shadow: 0 -1.5rem 4rem rgba(0,0,0,0.58), inset 0 1px rgba(255,255,255,0.05);
    animation: measure-sheet-in 320ms var(--spring-out);
  }
  .mix-measure-prompt.is-visible {
    position: relative;
    z-index: auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    margin: 0 0 0.35rem;
    padding: 0.75rem 0 0.45rem;
    border: 0;
    background: transparent;
    box-shadow: none;
    animation: none;
  }
  .mix-measure-prompt::before {
    content: "";
    position: absolute;
    top: 0.45rem;
    left: 50%;
    width: 2.4rem;
    height: 0.24rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-dim) 55%, transparent);
    transform: translateX(-50%);
  }
  .mix-context-measure.is-visible {
    position: relative;
    z-index: auto;
    display: block;
    margin: 0;
    padding: 0;
    background: transparent;
    animation: none;
  }
  .mix-measure-values.is-visible { padding-top: 0.3rem; }
  .mix-serve-values.is-visible { padding-bottom: 0; }
  .mix-context-measure .mix-row-label { margin-top: 0.35rem; }
  .mix-context-measure .mix-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45rem; }
  .mix-context-measure .mix-chip { min-height: 3rem; padding: 0.5rem 0.2rem; font-size: 0.72rem; }
}
@keyframes measure-sheet-in { from { opacity: 0; transform: translateY(100%); } }
@keyframes measure-scrim-in { from { opacity: 0; } }

/* ============================================================
   MIXING WORKSHOP + DRINK MATERIALS
   ============================================================ */
body.mixing-demo #hud,
body.mixing-demo #stage,
body.mixing-demo #career-overlay,
body.mixing-demo #manage-overlay,
body.mixing-demo #start-overlay,
body.mixing-demo #modal-overlay { display: none !important; }
body.mixing-demo #mix-overlay {
  top: 3.4rem;
  height: calc(100dvh - 3.4rem);
}
.mix-workshop-bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  height: 3.4rem;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--chrome) 94%, transparent);
  backdrop-filter: blur(18px) saturate(130%);
}
.mix-workshop-bar > span {
  margin-right: auto;
  color: var(--glow);
  font: 1rem var(--font-display);
}
.mix-workshop-bar select,
.mix-workshop-bar button {
  min-height: 2.25rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--chrome-raised);
  color: var(--text);
  padding: 0.35rem 0.65rem;
  font: 800 0.72rem var(--font-ui);
}
.mix-workshop-bar button { border-color: var(--brass-dim); cursor: pointer; }

.mix-bubbles {
  position: absolute;
  z-index: 3;
  inset: 12% 8% 4%;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 86%, transparent 0 2px, rgba(255,255,255,0.6) 2.5px 3.2px, transparent 3.7px),
    radial-gradient(circle at 72% 70%, transparent 0 1px, rgba(255,255,255,0.48) 1.5px 2.2px, transparent 2.7px),
    radial-gradient(circle at 45% 45%, transparent 0 1.5px, rgba(255,255,255,0.5) 2px 2.8px, transparent 3.2px);
  background-size: 2.2rem 3.4rem, 2.8rem 4.2rem, 3.5rem 5rem;
}
.mix-bubbles.is-active { opacity: 0.72; animation: bubbles-rise 2.4s linear infinite; }
@keyframes bubbles-rise { to { background-position: 0 -3.4rem, 0 -4.2rem, 0 -5rem; } }
.mix-foam {
  position: absolute;
  z-index: 5;
  left: 0.2rem;
  right: 0.2rem;
  height: 0;
  opacity: 0;
  border-radius: 50% 50% 28% 28%;
  background:
    radial-gradient(circle at 18% 55%, #fff8d8 0 0.55rem, transparent 0.6rem),
    radial-gradient(circle at 48% 35%, #fffdf0 0 0.7rem, transparent 0.75rem),
    radial-gradient(circle at 78% 58%, #f7edc6 0 0.6rem, transparent 0.65rem),
    #f4e8be;
  box-shadow: 0 -0.2rem 0.55rem rgba(255,255,255,0.28), 0 0.35rem 0.3rem rgba(102,62,13,0.16);
  transition: bottom 300ms var(--spring-out), height 220ms ease, opacity 180ms ease;
}
.mix-foam.is-active { height: 12%; opacity: 1; transform: translateY(50%); }

/* Garnishes are recognisable objects, not a recoloured generic disc. */
.mix-garnish-visual::before,
.mix-garnish-visual::after { content: none; }
.mix-garnish-visual[data-garnish="lime_wheel"]::after,
.mix-garnish-visual[data-garnish="lemon_slice"]::after,
.mix-garnish-visual[data-garnish="orange_slice"]::after {
  content: ""; position: absolute; z-index: 8; right: -0.35rem; top: 0.75rem; width: 2.25rem; height: 2.25rem;
  border: 0.32rem solid #74a936; border-radius: 50%;
  background: conic-gradient(from 12deg, #ddef8f 0 11%, #f4ffd0 12% 13%, #ddef8f 14% 24%, #f4ffd0 25% 26%, #ddef8f 27% 100%);
  box-shadow: 0 0.25rem 0.6rem rgba(0,0,0,0.35);
}
.mix-garnish-visual[data-garnish="lemon_slice"]::after { border-color: #d8bf32; background: conic-gradient(#fff1a0 0 12%, #fffbd6 13% 14%, #fff1a0 15% 100%); }
.mix-garnish-visual[data-garnish="orange_slice"]::after { border-color: #d66f19; background: conic-gradient(#ffb34a 0 12%, #ffe2a7 13% 14%, #ffb34a 15% 100%); }
.mix-garnish-visual[data-garnish="lime_wedge"]::after,
.mix-garnish-visual[data-garnish="lime_salt"]::after {
  content: ""; position: absolute; z-index: 8; right: -0.25rem; top: 0.45rem; width: 2.5rem; height: 1.5rem;
  border: 0.28rem solid #6f9f32; border-radius: 2.5rem 2.5rem 0.3rem 0.3rem;
  background: linear-gradient(90deg, #d9ed87 48%, #f3ffc5 49% 52%, #c9e16e 53%);
  transform: rotate(22deg);
}
.mix-vessel:has(.mix-garnish-visual[data-garnish="lime_salt"])::before { border-color: #f3eed6; box-shadow: 0 -2px 0 #f7f2df, 0 0 0.35rem rgba(255,255,255,0.42); }
.mix-garnish-visual[data-garnish="lemon_twist"]::after,
.mix-garnish-visual[data-garnish="orange_twist"]::after,
.mix-garnish-visual[data-garnish="grapefruit_twist"]::after {
  content: ""; position: absolute; z-index: 8; right: 0.3rem; top: -0.2rem; width: 2.8rem; height: 1.1rem;
  border-top: 0.32rem solid #ead34e; border-radius: 50%; transform: rotate(-25deg); filter: drop-shadow(0 0.2rem 0.2rem rgba(0,0,0,0.4));
}
.mix-garnish-visual[data-garnish="orange_twist"]::after { border-color: #e47b1f; }
.mix-garnish-visual[data-garnish="grapefruit_twist"]::after { border-color: #ee8d83; }
.mix-garnish-visual[data-garnish="cherry"]::after,
.mix-garnish-visual[data-garnish="lemon_cherry"]::after {
  content: ""; position: absolute; z-index: 8; right: 0.6rem; top: 0.9rem; width: 1.2rem; height: 1.2rem;
  border-radius: 50%; background: radial-gradient(circle at 32% 28%, #ff8b73, #a70f1d 62%); box-shadow: 0.55rem -1rem 0 -0.48rem #507b38;
}
.mix-garnish-visual[data-garnish="olive"]::before {
  content: ""; position: absolute; z-index: 7; right: 1.25rem; top: -0.2rem; width: 1px; height: 4rem; background: #d8bd8b; transform: rotate(28deg);
}
.mix-garnish-visual[data-garnish="olive"]::after {
  content: ""; position: absolute; z-index: 8; right: 0.45rem; top: 1.75rem; width: 1.2rem; height: 0.9rem; border-radius: 50%; background: #7a8735; box-shadow: inset 0.35rem 0 #aab45c;
}
.mix-garnish-visual[data-garnish="mint_sprig"]::after {
  content: ""; position: absolute; z-index: 8; right: 0.1rem; top: -1.2rem; width: 3.2rem; height: 4rem;
  background: radial-gradient(ellipse at 25% 65%, #4e9d57 0 0.55rem, transparent 0.6rem), radial-gradient(ellipse at 68% 50%, #62b46a 0 0.65rem, transparent 0.7rem), radial-gradient(ellipse at 42% 25%, #408d4c 0 0.6rem, transparent 0.65rem);
  transform: rotate(12deg); filter: drop-shadow(0 0.25rem 0.25rem rgba(0,0,0,0.35));
}
.mix-garnish-visual[data-garnish="pineapple_leaf"]::after {
  content: ""; position: absolute; z-index: 8; right: 0.5rem; top: -2.2rem; width: 3rem; height: 5rem;
  background: conic-gradient(from 160deg at 50% 100%, transparent 0 7%, #477d3e 8% 13%, transparent 14% 20%, #5b9447 21% 27%, transparent 28% 35%, #396c35 36% 42%, transparent 43%);
}
.mix-garnish-visual[data-garnish="coffee_beans"]::after {
  content: ""; position: absolute; z-index: 8; left: 42%; top: 30%; width: 0.75rem; height: 1rem; border-radius: 50%;
  background: linear-gradient(100deg, #3a2015 44%, #9b6544 48% 54%, #2b160f 58%); box-shadow: 1.2rem 0.35rem 0 #412318, -1rem 0.5rem 0 #321a12;
}

@media (max-width: 700px) {
  body.mixing-demo #mix-overlay { top: 4rem; height: calc(100dvh - 4rem); }
  .mix-workshop-bar { height: 4rem; padding-inline: 0.65rem; }
  .mix-workshop-bar > span { display: none; }
  .mix-workshop-bar select { flex: 1; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mix-bubbles.is-active { animation: none; }
}

/* ============================================================
   MIXING WORKSHOP: TACTILE GAME CONTROLS + ACCURATE ICE
   ============================================================ */
.mix-ice-visual::before,
.mix-ice-visual::after { content: none !important; }
.mix-ice-piece {
  display: none;
  position: absolute;
  border: 1px solid rgba(232,249,255,0.62);
  background: linear-gradient(135deg, rgba(245,253,255,0.26), rgba(166,213,224,0.08));
  box-shadow: inset 0.18rem 0.2rem 0.35rem rgba(255,255,255,0.26), 0 0.25rem 0.45rem rgba(0,0,0,0.18);
  backdrop-filter: blur(1px);
}
.mix-ice-visual[data-ice="cubed"] .mix-ice-piece:nth-child(-n+8) {
  display: block;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 0.32rem;
}
.mix-ice-visual[data-ice="cubed"] .mix-ice-piece:nth-child(1) { left: 3%; bottom: 4%; transform: rotate(12deg); }
.mix-ice-visual[data-ice="cubed"] .mix-ice-piece:nth-child(2) { right: 2%; bottom: 8%; transform: rotate(-19deg); }
.mix-ice-visual[data-ice="cubed"] .mix-ice-piece:nth-child(3) { left: 29%; bottom: 24%; transform: rotate(31deg); }
.mix-ice-visual[data-ice="cubed"] .mix-ice-piece:nth-child(4) { right: 18%; bottom: 38%; transform: rotate(7deg); }
.mix-ice-visual[data-ice="cubed"] .mix-ice-piece:nth-child(5) { left: 5%; bottom: 48%; transform: rotate(-27deg); }
.mix-ice-visual[data-ice="cubed"] .mix-ice-piece:nth-child(6) { left: 36%; bottom: 58%; transform: rotate(18deg); }
.mix-ice-visual[data-ice="cubed"] .mix-ice-piece:nth-child(7) { right: 0; bottom: 68%; transform: rotate(-8deg); }
.mix-ice-visual[data-ice="cubed"] .mix-ice-piece:nth-child(8) { left: 4%; bottom: 76%; transform: rotate(24deg); }

.mix-ice-visual[data-ice="crushed"] .mix-ice-piece {
  display: block;
  width: 1.15rem;
  height: 0.85rem;
  border-radius: 0.42rem 0.15rem 0.35rem 0.12rem;
  clip-path: polygon(18% 0, 88% 8%, 100% 62%, 68% 100%, 6% 82%, 0 26%);
  box-shadow: inset 0.1rem 0.12rem 0.22rem rgba(255,255,255,0.4), 0 0.12rem 0.2rem rgba(0,0,0,0.14);
}
.mix-ice-visual[data-ice="crushed"] .mix-ice-piece:nth-child(3n+1) { left: 6%; transform: rotate(18deg); }
.mix-ice-visual[data-ice="crushed"] .mix-ice-piece:nth-child(3n+2) { left: 38%; transform: rotate(-21deg) scale(0.82); }
.mix-ice-visual[data-ice="crushed"] .mix-ice-piece:nth-child(3n) { right: 2%; transform: rotate(34deg) scale(1.08); }
.mix-ice-visual[data-ice="crushed"] .mix-ice-piece:nth-child(1),
.mix-ice-visual[data-ice="crushed"] .mix-ice-piece:nth-child(2),
.mix-ice-visual[data-ice="crushed"] .mix-ice-piece:nth-child(3) { bottom: 2%; }
.mix-ice-visual[data-ice="crushed"] .mix-ice-piece:nth-child(4),
.mix-ice-visual[data-ice="crushed"] .mix-ice-piece:nth-child(5),
.mix-ice-visual[data-ice="crushed"] .mix-ice-piece:nth-child(6) { bottom: 15%; }
.mix-ice-visual[data-ice="crushed"] .mix-ice-piece:nth-child(7),
.mix-ice-visual[data-ice="crushed"] .mix-ice-piece:nth-child(8),
.mix-ice-visual[data-ice="crushed"] .mix-ice-piece:nth-child(9) { bottom: 28%; }
.mix-ice-visual[data-ice="crushed"] .mix-ice-piece:nth-child(10),
.mix-ice-visual[data-ice="crushed"] .mix-ice-piece:nth-child(11),
.mix-ice-visual[data-ice="crushed"] .mix-ice-piece:nth-child(12) { bottom: 41%; }
.mix-ice-visual[data-ice="crushed"] .mix-ice-piece:nth-child(13),
.mix-ice-visual[data-ice="crushed"] .mix-ice-piece:nth-child(14),
.mix-ice-visual[data-ice="crushed"] .mix-ice-piece:nth-child(15) { bottom: 54%; }
.mix-ice-visual[data-ice="crushed"] .mix-ice-piece:nth-child(16),
.mix-ice-visual[data-ice="crushed"] .mix-ice-piece:nth-child(17),
.mix-ice-visual[data-ice="crushed"] .mix-ice-piece:nth-child(18) { bottom: 67%; }

.mix-ice-visual[data-ice="block"] .mix-ice-piece:first-child {
  display: block;
  left: 2%;
  right: 2%;
  bottom: 2%;
  width: 96%;
  height: 72%;
  border: 1px solid rgba(239,252,255,0.76);
  border-radius: 0.7rem;
  background:
    linear-gradient(118deg, rgba(255,255,255,0.38), transparent 24% 70%, rgba(215,245,250,0.18)),
    rgba(190,226,232,0.12);
  box-shadow: inset 0 0 1rem rgba(255,255,255,0.22), 0 0.35rem 0.8rem rgba(0,0,0,0.2);
  transform: rotate(-2deg);
}

body.mixing-demo {
  --font-label: var(--font-ui);
}
body.mixing-demo button,
body.mixing-demo select {
  letter-spacing: 0;
  text-transform: none;
}
body.mixing-demo .mix-cat-tab {
  min-height: 2.55rem;
  border-width: 2px;
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: none;
}
body.mixing-demo .mix-cat-tab.active {
  box-shadow: 0 0.32rem 0 #81571f, 0 0.65rem 1.2rem rgba(217,154,61,0.18);
  transform: translateY(-0.18rem);
}
body.mixing-demo .mix-chip {
  min-height: 2.35rem;
  border-width: 2px;
  border-color: #405064;
  border-radius: 6px;
  padding: 0.42rem 0.7rem;
  color: #d9e0e7;
  font-size: 0.73rem;
  font-weight: 800;
}
body.mixing-demo .mix-chip:hover:not(:disabled) {
  border-color: var(--brass);
  background: rgba(217,154,61,0.1);
}
body.mixing-demo .mix-chip.active {
  border-color: #f0b24d;
  background: #e2a03a;
  color: #14100a;
  box-shadow: 0 0.24rem 0 #76501d, 0 0.55rem 1rem rgba(217,154,61,0.22);
  transform: translateY(-0.12rem);
}
body.mixing-demo .mix-chip:disabled {
  opacity: 0.24;
  border-style: dashed;
  cursor: not-allowed;
}
body.mixing-demo .mix-row-label,
body.mixing-demo .mix-cat-name {
  color: #e5a53f;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}
body.mixing-demo .mix-btn.serve {
  min-height: 3.35rem;
  border-width: 2px;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: 0 0.3rem 0 #315f39, 0 0.75rem 1.5rem rgba(49,103,59,0.2);
}
body.mixing-demo .mix-bottle-name { font-size: 0.72rem; font-weight: 850; }
body.mixing-demo .mix-theatre-kicker { letter-spacing: 0.1em; }
.mix-ice-amount {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: max-content;
  margin: -0.15rem 0 1rem;
  border: 0;
  background: transparent;
}
.mix-ice-amount[hidden] { display: none; }
.mix-ice-step {
  appearance: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  min-height: 0;
  border: 2px solid #667789;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #344454, #151d26 68%);
  color: var(--glow);
  cursor: pointer;
  font: 500 1.55rem/1 var(--font-ui);
  box-shadow: 0 0.22rem 0 #080b0f, inset 0 1px rgba(255,255,255,0.12);
}
.mix-ice-step:hover:not(:disabled) { border-color: var(--brass); background: radial-gradient(circle at 35% 28%, #f0b653, #b67522 72%); color: var(--ink); }
.mix-ice-step:active:not(:disabled) { transform: translateY(0.16rem); box-shadow: 0 0.06rem 0 #080b0f; }
.mix-ice-step:disabled { opacity: 0.25; cursor: default; }
.mix-ice-amount-value {
  display: grid;
  gap: 0.28rem;
  min-width: 7.5rem;
  color: var(--text-dim);
  text-align: center;
  font: 800 0.68rem var(--font-ui);
  font-variant-numeric: tabular-nums;
}
.mix-ice-meter {
  display: flex;
  justify-content: center;
  gap: 0.3rem;
}
.mix-ice-meter-cube {
  width: 1rem;
  height: 1rem;
  border: 1px solid #526375;
  border-radius: 0.18rem;
  background: #111820;
  transform: rotate(4deg);
  box-shadow: inset 0.12rem 0.12rem 0.2rem rgba(255,255,255,0.04);
}
.mix-ice-meter-cube:nth-child(even) { transform: rotate(-5deg); }
.mix-ice-meter-cube.active {
  border-color: #bde9f2;
  background: linear-gradient(135deg, rgba(238,253,255,0.85), rgba(118,186,201,0.38));
  box-shadow: inset 0.14rem 0.14rem 0.22rem white, 0 0 0.45rem rgba(142,221,238,0.24);
}
.mix-ice-amount-label { letter-spacing: 0; }

/* The workshop uses a real-time 3D drink; the DOM vessel remains as the
   lightweight fallback used by normal service and reduced-capability clients. */
body.mixing-demo .mix-theatre {
  min-height: 34rem;
  background:
    radial-gradient(circle at 50% 42%, rgba(99,170,193,0.12), transparent 34%),
    radial-gradient(ellipse at 50% 82%, rgba(217,154,61,0.18), transparent 27%),
    linear-gradient(180deg, #070a0e, #110c09);
}
body.mixing-demo .mix-theatre .mix-coaster { visibility: hidden; }
.mix-three-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}
.mix-three-canvas:active { cursor: grabbing; }
body.mixing-demo .mix-theatre-copy { z-index: 3; text-shadow: 0 2px 8px rgba(0,0,0,0.9); }

/* Workshop composition: playfield first, bottle rail second, prep station right. */
body.mixing-demo #mix-overlay { padding: 0; }
body.mixing-demo .mix-panel {
  width: 100%;
  max-width: none;
  border: 0;
  border-radius: 0;
  padding-inline: 1rem;
}
body.mixing-demo .mix-body {
  display: grid;
  grid-template-columns: minmax(32rem, 1fr) 25rem;
  grid-template-rows: minmax(25rem, 1fr) 13.5rem;
  gap: 0.7rem 1rem;
  height: calc(100dvh - 10rem);
}
body.mixing-demo .mix-theatre {
  grid-column: 1;
  grid-row: 1;
  min-height: 0;
  height: 100%;
  border: 1px solid rgba(217,154,61,0.2);
  border-bottom: 3px solid #6e3f22;
}
body.mixing-demo .mix-backbar {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr);
  grid-template-rows: 1fr;
  gap: 0.7rem;
  min-height: 0;
  padding: 0.65rem;
  border: 1px solid rgba(217,154,61,0.18);
  border-bottom: 4px solid #6e3f22;
  overflow: hidden;
}
body.mixing-demo .mix-cat-rail {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
body.mixing-demo .mix-cat-tab {
  flex: 1;
  min-height: 0;
  padding: 0.2rem 0.35rem;
  line-height: 1.1;
  white-space: normal;
  text-wrap: balance;
  overflow-wrap: normal;
}
body.mixing-demo .mix-cat-name { display: none; }
body.mixing-demo .mix-shelf {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 1.5rem 0.25rem;
  scroll-padding-inline: 1.5rem;
}
body.mixing-demo .mix-shelf::before,
body.mixing-demo .mix-shelf::after {
  content: "";
  flex: 1 0 0.2rem;
}
body.mixing-demo .mix-bottle {
  flex: 0 0 5.4rem;
  min-height: 10.2rem;
  padding-top: 0.8rem;
}
body.mixing-demo .mix-bottle-body { width: 2.2rem; height: 5rem; }
body.mixing-demo .mix-buildcol {
  grid-column: 2;
  grid-row: 1 / 3;
  display: block;
  min-height: 0;
  overflow-y: auto;
  padding: 0.2rem 0.35rem 1rem 0;
}
body.mixing-demo .mix-buildcol > .mix-row,
body.mixing-demo .mix-buildcol > .mix-pours { margin-bottom: 0.85rem; }
body.mixing-demo .mix-pours-list { min-height: 4rem; }

@media (max-width: 900px) {
  body.mixing-demo .mix-body {
    display: flex;
    height: auto;
  }
  body.mixing-demo .mix-theatre { order: 0; min-height: 28rem; }
  body.mixing-demo .mix-buildcol { order: 1; overflow: visible; }
  body.mixing-demo .mix-backbar { order: 2; display: block; overflow: visible; }
  body.mixing-demo .mix-cat-rail { display: grid; grid-template-columns: repeat(2, 1fr); }
  body.mixing-demo .mix-shelf { display: grid; grid-template-columns: repeat(4, minmax(3.5rem, 1fr)); overflow: visible; }
  body.mixing-demo .mix-bottle { min-height: 8rem; }
}