:root {
  color-scheme: dark;
  --ink: #181326;
  --paper: #fffdf8;
  --panel: rgba(24, 19, 38, 0.9);
  --panel-solid: #181326;
  --pink: #ff2bd6;
  --purple: #7657ff;
  --cyan: #16d9ff;
  --green: #31ef8b;
  --yellow: #ffe64a;
  --orange: #ff8a2b;
  --red: #ff3e4d;
  --white: #ffffff;
  --muted: #bbb4ce;
  --pixel-shadow: 5px 5px 0 var(--pink);
  --safe-top: max(10px, env(safe-area-inset-top));
  --safe-right: max(10px, env(safe-area-inset-right));
  --safe-bottom: max(10px, env(safe-area-inset-bottom));
  --safe-left: max(10px, env(safe-area-inset-left));
  font-family: "SFMono-Regular", "Cascadia Mono", "Roboto Mono", Consolas, monospace;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
}

body {
  min-width: 320px;
  min-height: 100dvh;
  color: var(--paper);
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

button {
  min-height: 44px;
  border: 0;
  border-radius: 7px;
  color: inherit;
  font: inherit;
  font-weight: 900;
  letter-spacing: 0.02em;
  cursor: pointer;
  touch-action: manipulation;
}

button:focus-visible,
canvas:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

button:disabled {
  cursor: not-allowed;
}

[hidden] {
  display: none !important;
}

.game-app {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: var(--ink);
}

.game-frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  background: #c9c0ed;
}

.game-frame::before,
.game-frame::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  pointer-events: none;
}

.game-frame::before {
  background:
    linear-gradient(180deg, rgba(13, 7, 29, 0.58) 0, transparent 24%),
    linear-gradient(0deg, rgba(13, 7, 29, 0.76) 0, transparent 31%);
}

.game-frame::after {
  opacity: 0;
  background: rgba(49, 239, 139, 0.24);
  transition: opacity 160ms ease;
}

.game-frame.is-success::after {
  opacity: 1;
  animation: scene-flash 560ms steps(2, end);
}

.game-frame.is-error {
  animation: scene-shake 430ms steps(2, end);
}

.game-frame.is-error::after {
  opacity: 1;
  background: rgba(255, 62, 77, 0.26);
  animation: scene-flash 430ms steps(2, end);
}

#game-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #eee9ff url("assets/neon-pour-bar-v2.png?v=restaurant-6") left center / cover
    no-repeat;
  object-fit: cover;
  object-position: center 48%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  transition: transform 160ms steps(2, end), filter 160ms ease;
}

.game-frame.is-mixing #game-canvas {
  transform: scale(1.012);
  filter: saturate(1.08);
}

.game-frame.is-happy-hour::before {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 230, 74, 0.13), transparent 46%),
    linear-gradient(180deg, rgba(13, 7, 29, 0.5) 0, transparent 24%),
    linear-gradient(0deg, rgba(13, 7, 29, 0.7) 0, transparent 31%);
  box-shadow: inset 0 0 0 3px rgba(255, 230, 74, 0.72);
}

.game-frame.is-happy-hour #game-canvas {
  filter: saturate(1.16) brightness(1.04);
}

.game-hud {
  position: absolute;
  top: var(--safe-top);
  right: var(--safe-right);
  left: var(--safe-left);
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(210px, 0.65fr) minmax(420px, 1.4fr) auto;
  gap: 10px;
  align-items: stretch;
  pointer-events: none;
}

.brand-lockup,
.scoreboard,
.header-actions {
  pointer-events: auto;
}

.brand-lockup {
  display: flex;
  min-width: 0;
  height: 66px;
  align-items: center;
  padding: 5px 14px 5px 7px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 10px;
  background: rgba(24, 19, 38, 0.86);
  box-shadow: 4px 4px 0 rgba(22, 217, 255, 0.72);
  backdrop-filter: blur(12px);
}

.brand-mark {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  object-fit: contain;
  image-rendering: pixelated;
}

.brand-copy {
  min-width: 0;
  margin-left: 6px;
}

.brand-copy h1,
.brand-copy p {
  margin: 0;
}

.brand-copy h1 {
  overflow: hidden;
  font-size: clamp(19px, 2vw, 29px);
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.eyebrow {
  margin-bottom: 3px !important;
  overflow: hidden;
  color: var(--pink);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.scoreboard {
  display: grid;
  min-width: 0;
  height: 66px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 10px;
  background: rgba(24, 19, 38, 0.86);
  box-shadow: 4px 4px 0 rgba(118, 87, 255, 0.66);
  backdrop-filter: blur(12px);
}

.stat {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px clamp(9px, 1.4vw, 18px);
  transition: color 140ms ease, background 140ms ease;
}

.stat + .stat {
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.stat-label {
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.09em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.stat strong {
  color: var(--white);
  font-size: clamp(17px, 1.6vw, 25px);
  line-height: 1;
  white-space: nowrap;
}

.stat-streak.is-hot {
  color: var(--yellow);
  background: rgba(255, 230, 74, 0.13);
}

.stat-streak.is-hot strong,
.stat-streak.is-max strong {
  color: var(--yellow);
}

.stat-streak.is-max {
  background: linear-gradient(90deg, rgba(255, 43, 214, 0.3), rgba(118, 87, 255, 0.35));
  animation: max-pulse 900ms steps(2, end) infinite;
}

.stat-streak.is-happy-hour {
  background: linear-gradient(90deg, rgba(255, 230, 74, 0.92), rgba(255, 43, 214, 0.74));
}

.stat-streak.is-happy-hour .stat-label,
.stat-streak.is-happy-hour strong {
  color: var(--ink);
}

.stat-time.is-urgent {
  background: rgba(255, 62, 77, 0.24);
  animation: urgent-pulse 700ms steps(2, end) infinite;
}

.stat-time.is-urgent strong {
  color: #ff9ba4;
}

.header-actions {
  display: flex;
  gap: 8px;
}

.happy-hour-banner {
  position: absolute;
  top: calc(var(--safe-top) + 76px);
  left: 50%;
  z-index: 8;
  display: flex;
  min-height: 29px;
  align-items: center;
  gap: 8px;
  padding: 5px 9px;
  border: 2px solid var(--ink);
  background: var(--yellow);
  box-shadow: 4px 4px 0 var(--pink), -2px -2px 0 var(--cyan);
  color: var(--ink);
  font-size: 7px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: translateX(-50%);
  animation: happy-hour-pop 240ms steps(4, end), happy-hour-glow 900ms steps(2, end) infinite;
}

.happy-hour-banner span {
  font-weight: 1000;
  white-space: nowrap;
}

.happy-hour-banner strong {
  font-size: 6px;
  white-space: nowrap;
}

.happy-hour-banner em {
  color: #9c076f;
  font-size: 9px;
  font-style: normal;
}

.utility-action {
  min-width: 66px;
  height: 66px;
  padding: 7px 10px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  background: rgba(24, 19, 38, 0.88);
  box-shadow: 4px 4px 0 var(--pink);
  backdrop-filter: blur(12px);
  transition: transform 100ms steps(1, end), color 100ms ease, background 100ms ease;
}

.utility-action:hover:not(:disabled),
.utility-action:focus-visible {
  color: var(--ink);
  background: var(--green);
}

.utility-action:active:not(:disabled) {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--pink);
}

.utility-action > span:first-child {
  display: block;
  color: var(--pink);
  font-size: 20px;
  line-height: 1;
}

.utility-label,
.action-label {
  display: block;
  margin-top: 5px;
  font-size: 8px;
  text-transform: uppercase;
}

.order-stack {
  position: absolute;
  top: calc(var(--safe-top) + 78px);
  right: var(--safe-right);
  z-index: 8;
  width: min(310px, calc(100vw - 20px));
  filter: drop-shadow(7px 8px 0 rgba(24, 19, 38, 0.6));
}

.next-order {
  display: flex;
  width: calc(100% - 20px);
  min-height: 35px;
  margin-left: 20px;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border: 2px solid var(--ink);
  border-bottom: 0;
  background: rgba(255, 253, 248, 0.94);
  color: var(--ink);
}

.next-order span {
  color: var(--purple);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.next-order strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.next-order em,
.vip-badge {
  margin-left: auto;
  color: #9f005c;
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.order-ticket {
  position: relative;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-left: 7px solid var(--pink);
  background: rgba(255, 253, 248, 0.96);
  color: var(--ink);
  backdrop-filter: blur(12px);
}

.order-ticket::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 6px;
  background: var(--cyan);
  content: "";
}

.order-ticket.is-vip {
  border-left-color: var(--yellow);
  box-shadow: inset 0 0 0 3px rgba(255, 230, 74, 0.7);
}

.order-ticket.is-arriving {
  animation: ticket-arrive 650ms steps(4, end);
}

.order-heading {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  padding: 10px 11px 4px;
  color: var(--purple);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.order-heading strong {
  margin-left: auto;
  color: var(--ink);
  font-size: 16px;
}

.order-heading strong::after {
  content: "s";
}

.order-heading strong.is-urgent {
  color: var(--red);
  animation: urgent-pulse 550ms steps(2, end) infinite;
}

.order-ticket h2 {
  margin: 4px 11px 9px;
  color: #bb0e97;
  font-size: 22px;
  line-height: 1;
  text-transform: uppercase;
}

.order-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border-top: 2px solid var(--ink);
}

.order-details div {
  min-width: 0;
  padding: 8px 9px 9px;
}

.order-details div + div {
  border-left: 1px solid rgba(24, 19, 38, 0.3);
}

.order-details dt {
  margin-bottom: 3px;
  color: #777081;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.order-details dd {
  overflow: hidden;
  margin: 0;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
}

.state-panel {
  position: absolute;
  top: 48%;
  left: 50%;
  z-index: 12;
  width: min(560px, calc(100vw - 32px));
  padding: clamp(20px, 3vw, 34px);
  border: 3px solid var(--ink);
  background: rgba(255, 253, 248, 0.96);
  color: var(--ink);
  text-align: center;
  box-shadow: 8px 8px 0 var(--pink), -7px -7px 0 var(--cyan);
  transform: translate(-50%, -50%);
  backdrop-filter: blur(14px);
  animation: panel-in 280ms steps(4, end);
}

.state-kicker {
  margin: 0 0 7px;
  color: #b60b91;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.state-panel h2 {
  margin: 0;
  font-size: clamp(31px, 5vw, 56px);
  line-height: 0.94;
  text-transform: uppercase;
}

.state-panel > p:not(.state-kicker, .unlock-banner) {
  max-width: 440px;
  margin: 14px auto 0;
  color: var(--purple);
  font-size: clamp(11px, 1.2vw, 14px);
  font-weight: 900;
  line-height: 1.45;
}

.primary-action {
  min-width: 200px;
  margin-top: 20px;
  padding: 12px 21px;
  border: 2px solid var(--ink);
  background: var(--ink);
  box-shadow: 5px 5px 0 var(--pink);
  color: var(--white);
  text-transform: uppercase;
  transition: transform 100ms steps(1, end), box-shadow 100ms steps(1, end), background 100ms ease;
}

.primary-action:hover,
.primary-action:focus-visible {
  background: #312848;
}

.primary-action:active {
  transform: translate(4px, 4px);
  box-shadow: 1px 1px 0 var(--pink);
}

.state-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 16px;
  overflow: hidden;
  border: 2px solid var(--ink);
}

.state-metrics div {
  padding: 8px 4px;
}

.state-metrics div + div {
  border-left: 1px solid rgba(24, 19, 38, 0.35);
}

.state-metrics span {
  display: block;
  color: #777081;
  font-size: 7px;
  font-weight: 900;
  text-transform: uppercase;
}

.state-metrics strong {
  display: block;
  margin-top: 4px;
  font-size: 17px;
}

.unlock-banner {
  margin: 13px 0 0;
  padding: 7px 9px;
  background: #ece7ff;
  color: var(--purple);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.mixing-controls {
  position: absolute;
  right: var(--safe-right);
  bottom: var(--safe-bottom);
  left: var(--safe-left);
  z-index: 9;
  display: grid;
  grid-template-columns: 1.05fr 1.35fr 1.05fr auto;
  grid-template-rows: auto 1fr;
  gap: 8px;
  align-items: stretch;
  min-height: 136px;
  padding: 10px 12px 12px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 12px;
  background: rgba(24, 19, 38, 0.91);
  box-shadow: 6px 6px 0 rgba(22, 217, 255, 0.72);
  backdrop-filter: blur(16px);
}

.mix-status {
  display: grid;
  min-width: 0;
  min-height: 42px;
  grid-column: 1 / -1;
  grid-template-columns: auto repeat(3, minmax(0, 1fr));
  gap: 7px;
  align-items: stretch;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
}

.mix-status-label {
  display: flex;
  align-items: center;
  padding: 0 9px;
  color: var(--cyan);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mix-status-item {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding: 3px 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.mix-status-item > span:last-child {
  min-width: 0;
}

.mix-status-item small,
.mix-status-item strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mix-status-item small {
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 6px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mix-status-item small em {
  margin-left: 4px;
  color: var(--purple);
  font-style: normal;
}

.mix-status-item.is-complete {
  background: rgba(49, 239, 139, 0.08);
}

.mix-status-item.is-complete small em {
  color: var(--green);
}

.mix-status-item strong {
  color: var(--white);
  font-size: clamp(8px, 0.9vw, 11px);
}

.mix-status.has-selection {
  border-color: rgba(22, 217, 255, 0.72);
  background: rgba(22, 217, 255, 0.1);
}

.mix-status.is-ready {
  border-color: var(--green);
  box-shadow: inset 0 0 0 1px rgba(49, 239, 139, 0.42);
}

.mix-status.is-perfect {
  background: linear-gradient(90deg, rgba(49, 239, 139, 0.14), rgba(255, 230, 74, 0.1));
  box-shadow: inset 0 0 0 2px var(--green), 0 0 14px rgba(49, 239, 139, 0.26);
}

.control-group {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-rows: auto 1fr;
  gap: 6px;
  padding-right: 8px;
  border-right: 1px solid rgba(255, 255, 255, 0.17);
}

.control-group::before,
.control-group::after {
  position: absolute;
  bottom: 7px;
  z-index: 4;
  display: grid;
  width: 28px;
  height: 54px;
  place-items: center;
  color: var(--cyan);
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.control-group::before {
  left: 0;
  content: "‹";
  background: linear-gradient(90deg, rgba(24, 19, 38, 0.98), transparent);
}

.control-group::after {
  right: 8px;
  content: "›";
  background: linear-gradient(270deg, rgba(24, 19, 38, 0.98), transparent);
}

.control-group.can-scroll-left::before,
.control-group.can-scroll-right::after {
  opacity: 1;
}

.control-label {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  color: var(--white);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.control-label b {
  color: var(--cyan);
  font-size: 8px;
}

.control-hint {
  margin-left: auto;
  color: var(--purple);
  font-size: 7px;
}

.segmented-control,
.swatch-control {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.segmented-control {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.swatch-control {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.segmented-control button,
.swatch-control button {
  position: relative;
  min-width: 0;
  min-height: 48px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 7px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.09);
  color: var(--paper);
  font-size: clamp(8px, 0.78vw, 11px);
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: transform 90ms steps(1, end), border-color 90ms ease, color 90ms ease, background 90ms ease;
}

.segmented-control button:hover:not(:disabled),
.swatch-control button:hover:not(:disabled) {
  border-color: var(--cyan);
  background: rgba(22, 217, 255, 0.17);
}

.segmented-control button:active:not(:disabled),
.swatch-control button:active:not(:disabled) {
  transform: translateY(2px);
}

.segmented-control button.is-selected,
.swatch-control button.is-selected {
  border: 2px solid var(--cyan);
  background: linear-gradient(135deg, var(--cyan), var(--green));
  box-shadow: inset 0 -4px 0 rgba(0, 117, 137, 0.32), 0 0 13px rgba(22, 217, 255, 0.56);
  color: var(--ink);
}

.segmented-control button.is-new::after,
.swatch-control button.is-new::after {
  position: absolute;
  top: 3px;
  left: 3px;
  padding: 2px 3px;
  border: 1px solid var(--ink);
  background: var(--yellow);
  color: var(--ink);
  content: "NEW";
  font-size: 5px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.segmented-control button:disabled,
.swatch-control button:disabled {
  opacity: 0.42;
}

.segmented-control button.is-selected:disabled,
.swatch-control button.is-selected:disabled {
  opacity: 0.85;
}

.choice-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.choice-icon {
  position: relative;
  display: inline-block;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  image-rendering: pixelated;
  transition: transform 90ms steps(2, end), filter 90ms ease;
}

button.is-selected .choice-icon {
  filter: drop-shadow(2px 2px 0 rgba(255, 255, 255, 0.78));
  transform: scale(1.12);
}

.choice-icon::before,
.choice-icon::after {
  position: absolute;
  display: block;
  content: "";
}

.icon-rocks::before {
  top: 4px;
  left: 4px;
  width: 17px;
  height: 16px;
  border: 3px solid #bdf7ff;
  background: linear-gradient(0deg, var(--orange) 0 48%, transparent 48%);
  clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%);
}

.icon-rocks::after {
  top: 12px;
  left: 8px;
  width: 4px;
  height: 4px;
  background: var(--white);
  box-shadow: 6px -2px 0 #c5f9ff;
}

.icon-coupe::before,
.icon-glass-preview::before {
  top: 4px;
  left: 2px;
  width: 21px;
  height: 9px;
  border: 3px solid #bdf7ff;
  border-top-color: var(--pink);
  background: rgba(22, 217, 255, 0.38);
  clip-path: polygon(0 0, 100% 0, 72% 100%, 28% 100%);
}

.icon-coupe::after,
.icon-glass-preview::after {
  top: 13px;
  left: 11px;
  width: 3px;
  height: 8px;
  background: #bdf7ff;
  box-shadow: -6px 8px 0 #bdf7ff, -3px 8px 0 #bdf7ff, 0 8px 0 #bdf7ff, 3px 8px 0 #bdf7ff;
}

.icon-highball::before {
  top: 2px;
  left: 6px;
  width: 13px;
  height: 21px;
  border: 3px solid #bdf7ff;
  background: linear-gradient(0deg, var(--orange) 0 54%, rgba(22, 217, 255, 0.28) 54%);
}

.icon-highball::after {
  top: 10px;
  left: 10px;
  width: 4px;
  height: 4px;
  background: var(--white);
  box-shadow: 3px 6px 0 rgba(255, 255, 255, 0.75);
}

.icon-citrus::before {
  top: 3px;
  left: 3px;
  width: 19px;
  height: 19px;
  border: 3px solid var(--yellow);
  border-radius: 50%;
  background: var(--orange);
  box-shadow: inset 0 0 0 3px #ffc764;
}

.icon-citrus::after {
  top: 6px;
  left: 11px;
  width: 3px;
  height: 13px;
  background: var(--yellow);
  box-shadow: -5px 5px 0 -1px var(--yellow), 5px 5px 0 -1px var(--yellow);
}

.icon-berry::before {
  top: 5px;
  left: 5px;
  width: 8px;
  height: 8px;
  background: var(--pink);
  box-shadow: 8px 2px 0 #ff72e5, 3px 8px 0 #c51daf, 10px 10px 0 #f63dcc;
}

.icon-berry::after {
  top: 2px;
  left: 10px;
  width: 4px;
  height: 6px;
  background: var(--green);
  transform: rotate(45deg);
}

.icon-mint::before {
  top: 4px;
  left: 4px;
  width: 10px;
  height: 16px;
  background: var(--green);
  clip-path: polygon(50% 0, 100% 35%, 70% 100%, 0 70%);
}

.icon-mint::after {
  top: 5px;
  left: 12px;
  width: 9px;
  height: 15px;
  background: #8dffbd;
  clip-path: polygon(50% 0, 100% 35%, 70% 100%, 0 70%);
  transform: scaleX(-1);
}

.icon-soda::before,
.icon-pour-preview::before {
  top: 5px;
  left: 7px;
  width: 12px;
  height: 17px;
  border: 3px solid #bdf7ff;
  background: var(--cyan);
}

.icon-soda::after,
.icon-pour-preview::after {
  top: 1px;
  left: 10px;
  width: 7px;
  height: 5px;
  background: #bdf7ff;
  box-shadow: 1px 10px 0 -2px var(--white), 5px 14px 0 -2px var(--white);
}

.icon-cherry::before,
.icon-finish-preview::before {
  top: 11px;
  left: 3px;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--red);
  box-shadow: 9px 1px 0 #ff7782;
}

.icon-cherry::after,
.icon-finish-preview::after {
  top: 3px;
  left: 12px;
  width: 3px;
  height: 11px;
  background: var(--green);
  transform: rotate(24deg);
  transform-origin: bottom;
}

.icon-lime::before {
  top: 3px;
  left: 3px;
  width: 19px;
  height: 19px;
  border: 3px solid #8dff4c;
  border-radius: 50%;
  background: #2cc86f;
  box-shadow: inset 0 0 0 3px #b8ff73;
}

.icon-lime::after {
  top: 6px;
  left: 11px;
  width: 3px;
  height: 13px;
  background: #d5ff9b;
  box-shadow: -5px 5px 0 -1px #d5ff9b, 5px 5px 0 -1px #d5ff9b;
}

.icon-strawberry::before {
  top: 6px;
  left: 4px;
  width: 18px;
  height: 17px;
  background: var(--red);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  box-shadow: inset 0 4px 0 #ff6b78;
}

.icon-strawberry::after {
  top: 2px;
  left: 6px;
  width: 13px;
  height: 7px;
  background: var(--green);
  clip-path: polygon(0 100%, 18% 0, 50% 55%, 82% 0, 100% 100%);
}

kbd {
  position: absolute;
  top: 3px;
  right: 4px;
  border: 0;
  background: transparent;
  color: currentColor;
  font: 700 7px/1 inherit;
  opacity: 0.52;
}

.swatch {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  vertical-align: -1px;
}

.swatch.citrus {
  background: var(--orange);
}

.swatch.berry {
  background: var(--pink);
}

.swatch.mint {
  background: var(--green);
}

.swatch.soda {
  background: var(--cyan);
}

.command-row {
  display: grid;
  min-width: 234px;
  grid-template-columns: minmax(96px, 0.8fr) minmax(126px, 1.2fr);
  gap: 8px;
  align-items: end;
}

.secondary-action,
.serve-action {
  height: 100%;
  min-height: 74px;
  overflow: visible;
  padding: 8px 16px;
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
}

.secondary-action {
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: var(--paper);
}

.serve-action {
  border: 2px solid var(--ink);
  background: var(--green);
  box-shadow: 4px 4px 0 var(--pink);
  color: var(--ink);
  font-size: 13px;
  transition: transform 90ms steps(1, end), box-shadow 90ms steps(1, end), background 90ms ease;
}

.serve-action:hover:not(:disabled),
.serve-action:focus-visible {
  background: #8dffbd;
}

.serve-action.is-perfect:not(:disabled) {
  background: var(--yellow);
  box-shadow: 4px 4px 0 var(--pink), 0 0 16px rgba(255, 230, 74, 0.62);
  animation: ready-pulse 900ms steps(2, end) infinite;
}

.serve-action:active:not(:disabled) {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--pink);
}

.secondary-action:disabled,
.serve-action:disabled {
  opacity: 0.42;
}

.stage-feedback {
  position: absolute;
  top: 56%;
  left: 50%;
  z-index: 11;
  min-width: min(410px, calc(100vw - 24px));
  padding: 13px 20px;
  border: 3px solid var(--ink);
  background: var(--ink);
  box-shadow: 6px 6px 0 var(--pink);
  color: var(--green);
  font-size: clamp(14px, 2.2vw, 23px);
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  opacity: 0;
  transform: translate(-50%, -40%) scale(0.92);
  pointer-events: none;
}

.stage-feedback.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: feedback-in 180ms steps(3, end);
}

.stage-feedback.is-close {
  color: var(--yellow);
}

.stage-feedback.is-miss {
  color: #ff7d89;
}

.reaction-bubble {
  position: absolute;
  top: 35%;
  left: 21%;
  z-index: 7;
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 5px 5px 0 var(--pink);
  color: var(--purple);
  font-size: 28px;
  opacity: 0;
  transform: translateY(12px) scale(0.7);
  pointer-events: none;
}

.reaction-bubble.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: reaction-pop 920ms steps(4, end);
}

.celebration-pixels {
  position: absolute;
  inset: 0;
  z-index: 13;
  overflow: hidden;
  pointer-events: none;
}

.celebration-pixels span {
  position: absolute;
  top: -24px;
  width: 14px;
  height: 14px;
  background: var(--pink);
  opacity: 0;
}

.celebration-pixels span:nth-child(1) {
  left: 8%;
  background: var(--cyan);
}

.celebration-pixels span:nth-child(2) {
  left: 23%;
  width: 9px;
  background: var(--yellow);
}

.celebration-pixels span:nth-child(3) {
  left: 42%;
  background: var(--pink);
}

.celebration-pixels span:nth-child(4) {
  left: 61%;
  width: 10px;
  background: var(--green);
}

.celebration-pixels span:nth-child(5) {
  left: 77%;
  background: var(--orange);
}

.celebration-pixels span:nth-child(6) {
  left: 91%;
  width: 9px;
  background: var(--purple);
}

.celebration-pixels.is-active span {
  opacity: 1;
  animation: pixel-fall 1500ms steps(10, end) forwards;
}

.celebration-pixels.is-active span:nth-child(2),
.celebration-pixels.is-active span:nth-child(5) {
  animation-delay: 130ms;
}

.celebration-pixels.is-active span:nth-child(3),
.celebration-pixels.is-active span:nth-child(6) {
  animation-delay: 250ms;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  padding: 0;
  border: 0;
  margin: -1px;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

@media (orientation: portrait) {
  #game-canvas {
    object-position: left 48%;
  }
}

@media (max-width: 980px) {
  .game-hud {
    grid-template-columns: minmax(180px, 0.55fr) minmax(390px, 1.45fr) auto;
    gap: 7px;
  }

  .brand-lockup,
  .scoreboard,
  .utility-action {
    height: 60px;
  }

  .brand-mark {
    width: 51px;
    height: 51px;
  }

  .utility-action {
    min-width: 58px;
    padding: 6px;
  }

  .mixing-controls {
    gap: 6px;
    padding: 8px;
  }

  .choice-icon {
    width: 21px;
    height: 21px;
    flex-basis: 21px;
    transform: scale(0.9);
  }

  .command-row {
    min-width: 205px;
    grid-template-columns: minmax(84px, 0.8fr) minmax(112px, 1.2fr);
  }

  .control-hint,
  kbd {
    display: none;
  }

  .segmented-control button,
  .swatch-control button {
    padding: 7px 4px;
    font-size: 8px;
  }
}

@media (max-width: 760px) {
  :root {
    --safe-top: max(7px, env(safe-area-inset-top));
    --safe-right: max(7px, env(safe-area-inset-right));
    --safe-bottom: max(7px, env(safe-area-inset-bottom));
    --safe-left: max(7px, env(safe-area-inset-left));
  }

  .game-hud {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
  }

  .brand-lockup {
    height: 48px;
    padding: 3px 10px 3px 4px;
    border-radius: 8px;
    box-shadow: 3px 3px 0 rgba(22, 217, 255, 0.72);
  }

  .brand-mark {
    width: 42px;
    height: 42px;
  }

  .brand-copy {
    margin-left: 4px;
  }

  .brand-copy h1 {
    font-size: 17px;
  }

  .eyebrow {
    margin-bottom: 2px !important;
    font-size: 7px;
  }

  .header-actions {
    gap: 5px;
  }

  .utility-action {
    min-width: 48px;
    height: 48px;
    padding: 4px 6px;
    border-radius: 8px;
    box-shadow: 3px 3px 0 var(--pink);
  }

  .utility-action > span:first-child {
    font-size: 17px;
  }

  .utility-label,
  .action-label {
    display: none;
  }

  .scoreboard {
    height: 47px;
    grid-column: 1 / -1;
    grid-row: 2;
    border-radius: 8px;
    box-shadow: 3px 3px 0 rgba(118, 87, 255, 0.7);
  }

  .stat {
    display: grid;
    gap: 2px;
    justify-items: center;
    padding: 4px 2px;
  }

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

  .stat strong {
    font-size: 16px;
  }

  .order-stack {
    top: calc(var(--safe-top) + 108px);
    right: var(--safe-right);
    left: var(--safe-left);
    width: auto;
    filter: drop-shadow(4px 5px 0 rgba(24, 19, 38, 0.55));
  }

  .next-order {
    display: none;
  }

  .order-ticket {
    border-width: 2px;
    border-left-width: 6px;
  }

  .order-heading {
    min-height: 28px;
    padding: 8px 9px 2px;
    font-size: 8px;
  }

  .order-heading strong {
    font-size: 14px;
  }

  .order-ticket h2 {
    margin: 3px 9px 7px;
    font-size: 18px;
  }

  .order-details div {
    padding: 6px 7px 7px;
  }

  .order-details dt {
    font-size: 6px;
  }

  .order-details dd {
    font-size: 8px;
  }

  .reaction-bubble {
    top: 43%;
    left: 10%;
    width: 50px;
    height: 50px;
    font-size: 22px;
  }

  .stage-feedback {
    top: 48%;
    min-width: calc(100vw - 28px);
    padding: 11px 10px;
    font-size: 13px;
  }

  .mix-status-label {
    padding-inline: 5px;
  }

  .mix-status-item {
    gap: 5px;
    padding-inline: 5px;
  }
}

@media (max-width: 640px) and (orientation: portrait) {
  #game-canvas {
    object-position: left 48%;
  }

  .state-panel {
    top: 43%;
    width: calc(100vw - 24px);
    padding: 18px 14px;
    border-width: 2px;
    box-shadow: 5px 5px 0 var(--pink), -4px -4px 0 var(--cyan);
  }

  .state-panel h2 {
    font-size: clamp(29px, 10vw, 44px);
  }

  .state-panel > p:not(.state-kicker, .unlock-banner) {
    margin-top: 10px;
    font-size: 10px;
  }

  .primary-action {
    min-width: 170px;
    min-height: 46px;
    margin-top: 14px;
    padding: 9px 14px;
  }

  .state-metrics {
    margin-top: 11px;
  }

  .state-metrics div {
    padding: 6px 2px;
  }

  .state-metrics strong {
    font-size: 13px;
  }

  .unlock-banner {
    margin-top: 9px;
    padding: 5px 6px;
    font-size: 7px;
  }

  .mixing-controls {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 7px;
    border-radius: 10px;
    box-shadow: 4px 4px 0 rgba(22, 217, 255, 0.72);
  }

  .mix-status {
    min-height: 48px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
    padding: 4px;
  }

  .mix-status-label {
    display: none;
  }

  .mix-status-item {
    gap: 4px;
    padding: 2px 4px;
  }

  .mix-status-item:first-of-type {
    border-left: 0;
  }

  .mix-status-item .choice-icon {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
    transform: scale(0.82);
  }

  .mix-status-item strong {
    font-size: 7px;
  }

  .control-group {
    display: grid;
    grid-template-columns: 63px minmax(0, 1fr);
    grid-template-rows: 1fr;
    gap: 5px;
    align-items: stretch;
    padding: 0 0 5px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }

  .control-label {
    display: grid;
    align-content: center;
    gap: 2px;
    padding: 0 4px;
    font-size: 8px;
  }

  .control-label b {
    font-size: 7px;
  }

  .control-hint,
  kbd {
    display: none;
  }

  .segmented-control button,
  .swatch-control button {
    min-height: 48px;
    gap: 2px;
    padding: 5px 2px;
    border-radius: 5px;
    font-size: 8px;
  }

  .segmented-control button .choice-icon,
  .swatch-control button .choice-icon {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
    transform: scale(0.82);
  }

  .command-row {
    width: 100%;
    min-width: 0;
    height: 58px;
    grid-template-columns: 0.7fr 1.3fr;
  }

  .secondary-action,
  .serve-action {
    min-height: 58px;
    padding: 6px 10px;
    font-size: 11px;
  }
}

@media (max-width: 390px) and (orientation: portrait) {
  .brand-copy h1 {
    font-size: 15px;
  }

  .eyebrow {
    max-width: 150px;
  }

  .stat strong {
    font-size: 14px;
  }

  .order-ticket h2 {
    font-size: 16px;
  }

  .control-group {
    grid-template-columns: 54px minmax(0, 1fr);
  }

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

  .segmented-control button,
  .swatch-control button {
    font-size: 7px;
  }

  .mix-status-item small {
    display: none;
  }
}

@media (orientation: landscape) and (max-height: 520px) and (min-width: 650px) {
  :root {
    --safe-top: max(5px, env(safe-area-inset-top));
    --safe-right: max(6px, env(safe-area-inset-right));
    --safe-bottom: max(6px, env(safe-area-inset-bottom));
    --safe-left: max(6px, env(safe-area-inset-left));
  }

  .game-hud {
    grid-template-columns: minmax(150px, 0.45fr) minmax(390px, 1.55fr) auto;
    gap: 5px;
  }

  .brand-lockup,
  .scoreboard,
  .utility-action {
    height: 46px;
  }

  .brand-lockup {
    padding: 2px 8px 2px 3px;
  }

  .brand-mark {
    width: 41px;
    height: 41px;
  }

  .brand-copy h1 {
    font-size: 15px;
  }

  .eyebrow {
    font-size: 6px;
  }

  .stat {
    padding: 3px 8px;
  }

  .stat strong {
    font-size: 16px;
  }

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

  .utility-action {
    min-width: 46px;
    padding: 3px;
  }

  .utility-label,
  .action-label {
    display: none;
  }

  .order-stack {
    top: calc(var(--safe-top) + 53px);
    width: 235px;
  }

  .next-order {
    display: none;
  }

  .order-heading {
    min-height: 25px;
    padding: 8px 8px 1px;
  }

  .order-ticket h2 {
    margin: 2px 8px 5px;
    font-size: 15px;
  }

  .order-details div {
    padding: 5px 6px;
  }

  .mixing-controls {
    gap: 5px;
    min-height: 108px;
    padding: 5px;
  }

  .mix-status {
    min-height: 30px;
    padding: 2px 4px;
  }

  .mix-status-label {
    display: none;
  }

  .mix-status-item {
    padding-block: 0;
  }

  .mix-status-item small {
    display: none;
  }

  .mix-status-item .choice-icon {
    transform: scale(0.72);
  }

  .control-group {
    gap: 3px;
    padding-right: 5px;
  }

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

  .control-hint,
  kbd {
    display: none;
  }

  .segmented-control button,
  .swatch-control button {
    min-height: 42px;
    gap: 2px;
    padding: 3px 2px;
    font-size: 7px;
  }

  .secondary-action,
  .serve-action {
    min-height: 58px;
    font-size: 9px;
  }

  .state-panel {
    top: 47%;
    width: min(480px, calc(100vw - 260px));
    padding: 14px 20px;
  }

  .state-panel h2 {
    font-size: 33px;
  }

  .state-panel > p:not(.state-kicker, .unlock-banner) {
    margin-top: 7px;
    font-size: 9px;
  }

  .primary-action {
    min-height: 40px;
    margin-top: 10px;
    padding: 6px 14px;
  }
}

/* Restaurant floor pass: guests live in the bar scene and every station stays player-driven. */
.order-stack {
  display: none !important;
}

.bar-guests {
  position: absolute;
  right: clamp(12px, 1.7vw, 28px);
  bottom: calc(max(10px, env(safe-area-inset-bottom)) + 162px);
  z-index: 5;
  display: flex;
  width: min(49vw, 720px);
  height: min(61vh, 560px);
  align-items: flex-end;
  justify-content: flex-end;
  gap: clamp(3px, 0.55vw, 10px);
  pointer-events: none;
}

.bar-guests::before {
  position: absolute;
  right: 0;
  bottom: 1px;
  z-index: 3;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 4px 4px 0 0;
  background: rgba(15, 10, 34, 0.82);
  color: var(--cyan);
  content: attr(data-queue-label);
  font-size: 6px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bar-guest {
  position: relative;
  display: block;
  width: clamp(104px, 11.1vw, 178px);
  min-width: 0;
  height: 100%;
  flex: 0 1 clamp(104px, 11.1vw, 178px);
  padding: 0;
  border: 0;
  border-radius: 0;
  outline-offset: -2px;
  background: transparent;
  pointer-events: auto;
  transform-origin: center bottom;
  transition:
    filter 160ms ease,
    transform 180ms steps(2, end);
}

.bar-guest:hover,
.bar-guest:focus-visible,
.bar-guest.is-active {
  z-index: 4;
  transform: translateY(-7px) scale(1.035);
  filter: drop-shadow(0 0 12px rgba(22, 217, 255, 0.58));
}

.bar-guest.is-active {
  flex-basis: clamp(136px, 14vw, 210px);
  width: clamp(136px, 14vw, 210px);
}

.bar-guest-person {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  height: 48%;
  min-height: 150px;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
}

.bar-guest-person::after {
  position: absolute;
  right: 3%;
  bottom: -2px;
  left: 3%;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  background: rgba(22, 217, 255, 0.38);
  box-shadow: 0 0 18px rgba(22, 217, 255, 0.75);
  content: "";
  transform: perspective(20px) rotateX(62deg);
}

.bar-guest-person > img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  image-rendering: pixelated;
  filter: drop-shadow(5px 7px 0 rgba(5, 3, 16, 0.52));
  animation: guest-idle 2.6s steps(2, end) infinite;
}

.bar-guest:nth-child(2n) .bar-guest-person > img {
  animation-delay: -1.1s;
}

.bar-guest:nth-child(3n) .bar-guest-person > img {
  animation-delay: -1.8s;
}

.bar-guest-person > em {
  position: absolute;
  right: 5px;
  bottom: 8px;
  z-index: 3;
  padding: 4px 5px;
  border: 2px solid var(--ink);
  background: var(--yellow);
  color: var(--ink);
  font-size: 7px;
  font-style: normal;
  text-transform: uppercase;
}

.bar-ready {
  position: absolute;
  bottom: 2px;
  left: 50%;
  z-index: 4;
  width: max-content;
  padding: 4px 7px;
  border: 2px solid var(--ink);
  background: var(--green);
  color: var(--ink);
  font-size: 7px;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.guest-request {
  position: absolute;
  top: 1%;
  left: 50%;
  z-index: 4;
  display: grid;
  width: calc(100% + 10px);
  min-width: 122px;
  gap: 4px;
  padding: 8px 8px 9px;
  border: 2px solid rgba(255, 255, 255, 0.78);
  border-top: 5px solid var(--cyan);
  border-radius: 6px;
  background: rgba(15, 10, 34, 0.94);
  color: var(--white);
  box-shadow: 4px 5px 0 rgba(255, 43, 214, 0.76);
  text-align: left;
  transform: translateX(-50%);
  backdrop-filter: blur(10px);
}

.guest-request::after {
  position: absolute;
  bottom: -11px;
  left: 50%;
  width: 16px;
  height: 16px;
  border-right: 2px solid rgba(255, 255, 255, 0.78);
  border-bottom: 2px solid rgba(255, 255, 255, 0.78);
  background: rgba(15, 10, 34, 0.96);
  content: "";
  transform: translateX(-50%) rotate(45deg);
}

.guest-request-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--cyan);
  font-size: clamp(6px, 0.55vw, 8px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.guest-request-meta time {
  color: var(--yellow);
  font-size: clamp(8px, 0.72vw, 11px);
  font-weight: 900;
}

.guest-request > strong {
  overflow: hidden;
  color: var(--white);
  font-size: clamp(10px, 1vw, 16px);
  line-height: 1.05;
  text-overflow: ellipsis;
  text-transform: uppercase;
}

.bar-guest.is-active .guest-request {
  width: calc(100% + 18px);
  border-top-color: var(--pink);
  box-shadow:
    5px 6px 0 var(--cyan),
    0 0 20px rgba(255, 43, 214, 0.38);
}

.bar-guest.is-active .guest-request > strong {
  font-size: clamp(15px, 1.55vw, 25px);
  line-height: 0.98;
  white-space: normal;
}

.guest-request > small {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 2px;
  color: var(--muted);
  font-size: 5.5px;
  text-transform: uppercase;
}

.guest-request > small img {
  width: clamp(19px, 1.75vw, 28px);
  height: clamp(19px, 1.75vw, 28px);
  flex: 0 0 auto;
  object-fit: contain;
  image-rendering: pixelated;
}

.guest-request > small span {
  overflow: hidden;
  max-width: 45px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guest-tip {
  overflow: hidden;
  color: var(--yellow);
  font-size: clamp(5px, 0.48vw, 7px);
  font-style: normal;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.guest-request > i {
  display: block;
  height: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.14);
}

.guest-request > i span {
  display: block;
  height: 100%;
  background: var(--cyan);
  transition: width 100ms linear;
}

.bar-guest.is-urgent .guest-request {
  animation: guest-urgent 500ms steps(2, end) infinite;
  border-color: var(--red);
}

.bar-guest.is-urgent .guest-request > i span {
  background: var(--red);
}

.bar-guest.has-ready-drink .guest-request {
  border-color: var(--green);
}

.bartender-motion {
  --action-x: 6vw;
  --action-y: -4vh;
  position: absolute;
  left: 37%;
  bottom: calc(max(10px, env(safe-area-inset-bottom)) + 185px);
  z-index: 6;
  width: 82px;
  height: 82px;
  opacity: 0;
  pointer-events: none;
}

.game-frame[data-bartender-action="glass"] .bartender-motion {
  --action-x: -14vw;
  --action-y: -3vh;
}

.game-frame[data-bartender-action="pour"] .bartender-motion {
  --action-x: 9vw;
  --action-y: -8vh;
}

.game-frame[data-bartender-action="finish"] .bartender-motion {
  --action-x: 19vw;
  --action-y: -1vh;
}

.game-frame[data-bartender-action="serve"] .bartender-motion {
  --action-x: 33vw;
  --action-y: -2vh;
}

.bartender-action-sprite {
  position: absolute;
  inset: 14px;
  width: 54px;
  height: 54px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 8px var(--cyan));
}

.bartender-action-label {
  position: absolute;
  bottom: -16px;
  left: 50%;
  width: max-content;
  max-width: 150px;
  padding: 4px 6px;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-size: 7px;
  font-weight: 900;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.bartender-motion > i {
  position: absolute;
  width: 7px;
  height: 7px;
  background: var(--pink);
  box-shadow: 0 0 8px var(--pink);
}

.bartender-motion > i:nth-of-type(1) {
  top: 4px;
  left: 7px;
}

.bartender-motion > i:nth-of-type(2) {
  top: 11px;
  right: 0;
  background: var(--cyan);
}

.bartender-motion > i:nth-of-type(3) {
  right: 9px;
  bottom: 10px;
  background: var(--yellow);
}

.bartender-motion.is-active {
  opacity: 1;
  animation: bartender-pickup 620ms steps(5, end);
}

.game-frame.is-bartender-moving #game-canvas {
  transform-origin: 35% 54%;
  animation: bartender-shift 520ms steps(4, end);
  filter: saturate(1.12) brightness(1.035);
}

@keyframes guest-idle {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes guest-urgent {
  0%,
  100% {
    transform: translateX(-50%);
  }
  50% {
    transform: translateX(calc(-50% + 3px));
  }
}

@keyframes bartender-pickup {
  0% {
    opacity: 0;
    transform: translate(0, 12px) scale(0.45);
  }
  24% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  72% {
    opacity: 1;
    transform: translate(var(--action-x), var(--action-y)) scale(0.88);
  }
  100% {
    opacity: 0;
    transform: translate(var(--action-x), var(--action-y)) scale(0.65);
  }
}

@keyframes bartender-shift {
  0%,
  100% {
    transform: scale(1);
  }
  30% {
    transform: translateX(-4px) scale(1.009);
  }
  65% {
    transform: translateX(4px) scale(1.014);
  }
}

@media (max-width: 760px) {
  .bar-guests {
    top: calc(var(--safe-top) + 135px);
    right: 4px;
    bottom: calc(var(--safe-bottom) + 228px);
    width: min(76vw, 480px);
    height: auto;
    min-height: 260px;
    gap: 2px;
  }

  .bar-guests::before {
    display: none;
  }

  .bar-guest {
    width: 68px;
    height: 100%;
    flex: 0 0 68px;
  }

  .bar-guest:not(.is-active) {
    order: 2;
    margin-left: -14px;
    opacity: 0.78;
  }

  .bar-guest.is-active {
    order: 1;
    width: min(48vw, 190px);
    flex-basis: min(48vw, 190px);
  }

  .bar-guest-person {
    min-height: 92px;
    height: 43%;
  }

  .bar-guest.is-active .bar-guest-person {
    min-height: 142px;
    height: 51%;
  }

  .bar-guest:not(.is-active) .guest-request {
    display: none;
  }

  .bar-guest.is-active .guest-request {
    top: 0;
    width: min(56vw, 218px);
    min-width: 188px;
    padding: 7px;
  }

  .bar-guest.is-active .guest-request > strong {
    font-size: clamp(17px, 5vw, 23px);
  }

  .guest-request > small img {
    width: 24px;
    height: 24px;
  }

  .guest-request > small span {
    max-width: 54px;
  }

  .bartender-motion {
    left: 31%;
    bottom: calc(var(--safe-bottom) + 250px);
    width: 66px;
    height: 66px;
  }

  .bartender-action-sprite {
    inset: 10px;
    width: 46px;
    height: 46px;
  }

  .game-frame[data-bartender-action="serve"] .bartender-motion {
    --action-x: 42vw;
  }

  .drink-preview {
    right: auto;
    left: var(--safe-left);
  }

  .score-pop {
    right: auto;
    left: var(--safe-left);
  }
}

@media (max-width: 390px) and (orientation: portrait) {
  .bar-guests {
    top: calc(var(--safe-top) + 128px);
    width: 81vw;
    min-height: 248px;
  }

  .bar-guest {
    width: 58px;
    flex-basis: 58px;
  }

  .bar-guest.is-active {
    width: 50vw;
    flex-basis: 50vw;
  }

  .bar-guest.is-active .guest-request {
    min-width: 176px;
  }
}

@media (orientation: landscape) and (max-height: 520px) and (min-width: 650px) {
  .bar-guests {
    right: 238px;
    bottom: calc(var(--safe-bottom) + 110px);
    width: min(43vw, 540px);
    height: calc(100dvh - 164px);
  }

  .bar-guest {
    width: clamp(82px, 10vw, 112px);
    flex-basis: clamp(82px, 10vw, 112px);
  }

  .bar-guest:not(.is-active) {
    margin-left: -10px;
  }

  .bar-guest.is-active {
    width: clamp(132px, 18vw, 158px);
    flex-basis: clamp(132px, 18vw, 158px);
  }

  .bar-guest-person {
    min-height: 98px;
  }

  .guest-request {
    min-width: 104px;
    padding: 5px;
  }

  .bar-guest.is-active .guest-request {
    width: calc(100% + 12px);
  }

  .bar-guest.is-active .guest-request > strong {
    font-size: clamp(11px, 1.5vw, 16px);
  }

  .guest-request > small img {
    width: 17px;
    height: 17px;
  }

  .guest-request > small span,
  .guest-tip {
    display: none;
  }

  .bartender-motion {
    bottom: calc(var(--safe-bottom) + 126px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bar-guest-person > img,
  .bar-guest.is-urgent .guest-request,
  .bartender-motion.is-active,
  .game-frame.is-bartender-moving #game-canvas {
    animation: none !important;
  }
}

@media (max-height: 650px) and (max-width: 649px) and (orientation: portrait) {
  .order-details {
    display: none;
  }

  .order-ticket h2 {
    margin-bottom: 8px;
  }

  .state-panel {
    top: 42%;
  }

  .state-panel > p:not(.state-kicker, .unlock-banner) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@keyframes scene-flash {
  0%,
  100% {
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
}

@keyframes scene-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(5px);
  }
  75% {
    transform: translateX(-3px);
  }
}

@keyframes max-pulse {
  50% {
    box-shadow: inset 0 0 0 3px var(--yellow);
  }
}

@keyframes happy-hour-pop {
  from {
    opacity: 0;
    transform: translate(-50%, -8px) scale(0.86);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

@keyframes happy-hour-glow {
  50% {
    box-shadow: 4px 4px 0 var(--cyan), -2px -2px 0 var(--pink);
  }
}

@keyframes urgent-pulse {
  50% {
    filter: brightness(1.35);
  }
}

@keyframes ready-pulse {
  50% {
    filter: brightness(1.15);
    transform: translateY(-1px);
  }
}

@keyframes ticket-arrive {
  from {
    transform: translateX(32px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translate(-50%, -46%) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes feedback-in {
  from {
    opacity: 0;
    transform: translate(-50%, -38%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes reaction-pop {
  0%,
  100% {
    opacity: 0;
    transform: translateY(12px) scale(0.7);
  }
  20%,
  72% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes pixel-fall {
  from {
    transform: translateY(-20px) rotate(0);
  }
  to {
    transform: translateY(105vh) rotate(520deg);
  }
}

/* Restaurant rush mode */

.order-stack {
  top: calc(var(--safe-top) + 78px);
  width: min(390px, calc(100vw - 20px));
  filter: drop-shadow(6px 7px 0 rgba(24, 19, 38, 0.56));
}

.queue-heading {
  display: flex;
  min-height: 31px;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  background: rgba(24, 19, 38, 0.94);
  color: var(--paper);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}

.queue-heading b {
  color: var(--green);
}

.queue-heading strong {
  color: var(--cyan);
  font-size: 8px;
}

.order-rail {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.guest-ticket {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 76px;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 8px;
  overflow: hidden;
  padding: 6px 9px 6px 5px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 0;
  background: rgba(24, 19, 38, 0.92);
  box-shadow: 3px 3px 0 rgba(118, 87, 255, 0.68);
  color: var(--paper);
  text-align: left;
  backdrop-filter: blur(12px);
  transition: transform 100ms steps(1, end), border-color 100ms ease, background 100ms ease;
}

.guest-ticket:hover,
.guest-ticket:focus-visible {
  border-color: var(--cyan);
  background: rgba(38, 30, 57, 0.97);
}

.guest-ticket:active {
  transform: translate(2px, 2px);
}

.guest-ticket.is-active {
  border-color: var(--cyan);
  box-shadow: 4px 4px 0 var(--pink), inset 0 0 0 2px rgba(22, 217, 255, 0.28);
}

.guest-ticket.is-urgent {
  border-color: #ff7d89;
  animation: urgent-pulse 650ms steps(2, end) infinite;
}

.guest-ticket.is-vip {
  border-color: var(--yellow);
}

.guest-ticket.has-ready-drink {
  box-shadow: 4px 4px 0 var(--green), inset 0 0 0 2px rgba(49, 239, 139, 0.34);
}

.guest-portrait {
  position: relative;
  display: grid;
  height: 64px;
  place-items: end center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(118, 87, 255, 0.3), rgba(255, 43, 214, 0.12));
}

.guest-portrait img {
  width: 100%;
  height: 72px;
  object-fit: contain;
  object-position: center bottom;
  image-rendering: pixelated;
}

.guest-portrait em {
  position: absolute;
  top: 3px;
  left: 3px;
  padding: 2px 4px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 6px;
  font-style: normal;
}

.guest-portrait .ticket-ready {
  position: absolute;
  right: 3px;
  bottom: 3px;
  padding: 3px 4px;
  border: 1px solid var(--ink);
  background: var(--green);
  box-shadow: 2px 2px 0 var(--ink);
  color: var(--ink);
  font-size: 6px;
  line-height: 1;
  text-transform: uppercase;
}

.ticket-copy,
.ticket-meta {
  display: flex;
  min-width: 0;
}

.ticket-copy {
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}

.ticket-meta {
  align-items: center;
  justify-content: space-between;
  color: var(--cyan);
  font-size: 7px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ticket-meta > span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.ticket-tip {
  color: var(--green);
  font-size: 5px;
  font-style: normal;
  white-space: nowrap;
}

.guest-ticket.has-good-tip .ticket-tip {
  color: var(--yellow);
}

.guest-ticket:not(.has-fast-tip, .has-good-tip) .ticket-tip {
  color: var(--muted);
}

.ticket-meta time {
  color: var(--yellow);
  font-size: 11px;
  font-weight: 900;
}

.ticket-copy > strong,
.ticket-copy > small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-copy > strong {
  color: var(--paper);
  font-size: 13px;
  line-height: 1.05;
  text-transform: uppercase;
}

.ticket-copy > small {
  color: var(--muted);
  font-size: 6px;
  line-height: 1.2;
}

.ticket-copy > i {
  display: block;
  height: 4px;
  overflow: hidden;
  margin-top: 2px;
  background: rgba(255, 255, 255, 0.13);
}

.ticket-copy > i span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--pink), var(--cyan));
  transition: width 100ms linear;
}

.guest-ticket.is-urgent .ticket-copy > i span {
  background: var(--red);
}

.drink-preview {
  position: absolute;
  bottom: calc(var(--safe-bottom) + 178px);
  left: 54%;
  z-index: 6;
  display: grid;
  width: 205px;
  height: 252px;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  place-items: center;
  pointer-events: none;
  transform: translateX(-50%);
  filter: drop-shadow(8px 10px 0 rgba(24, 19, 38, 0.28));
}

.active-target {
  display: grid;
  width: 100%;
  min-height: 42px;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
  border: 2px solid var(--cyan);
  background: rgba(24, 19, 38, 0.94);
  box-shadow: 4px 4px 0 var(--pink);
  color: var(--paper);
  text-align: left;
  backdrop-filter: blur(9px);
}

.active-target > img {
  width: 38px;
  height: 38px;
  align-self: end;
  object-fit: contain;
  object-position: center bottom;
  image-rendering: pixelated;
}

.active-target > span {
  min-width: 0;
  padding: 4px 7px;
  border-left: 1px solid rgba(255, 255, 255, 0.17);
}

.active-target small,
.active-target b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.active-target small {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  margin-bottom: 2px;
  color: var(--cyan);
  font-size: 6px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.active-target small em {
  color: var(--green);
  font-style: normal;
  white-space: nowrap;
}

.active-target.has-fast-tip #active-target-bonus {
  color: var(--green);
}

.active-target.has-good-tip #active-target-bonus {
  color: var(--yellow);
}

.active-target:not(.has-fast-tip, .has-good-tip) #active-target-bonus {
  color: var(--muted);
}

.active-target b {
  font-size: 8px;
  text-transform: uppercase;
}

.active-target.is-rushing {
  border-color: var(--yellow);
}

.active-target.is-rushing small em {
  color: var(--yellow);
}

.active-target.is-urgent {
  border-color: #ff7d89;
  animation: urgent-pulse 650ms steps(2, end) infinite;
}

.active-target.is-urgent small em {
  color: #ff7d89;
}

.active-target.is-vip {
  box-shadow: 4px 4px 0 var(--yellow);
}

.drink-preview strong {
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(24, 19, 38, 0.82);
  color: var(--cyan);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.drink-preview > #prepared-drink {
  width: 100%;
  height: 174px;
  object-fit: contain;
  image-rendering: pixelated;
  transform-origin: bottom center;
  animation: drink-arrive 180ms steps(3, end);
}

.drink-preview.is-awaiting-build > #prepared-drink {
  opacity: 0.28;
  filter: grayscale(0.3) drop-shadow(0 0 8px rgba(22, 217, 255, 0.5));
}

.drink-preview strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--paper);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drink-preview.is-complete strong {
  border-color: var(--green);
  color: var(--green);
}

.drink-components {
  display: flex;
  min-height: 34px;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 3px 5px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-top: 0;
  background: rgba(24, 19, 38, 0.88);
  backdrop-filter: blur(8px);
}

.drink-components img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(1px 2px 0 rgba(22, 217, 255, 0.38));
}

.drink-components:empty {
  display: none;
}

.score-pop {
  position: absolute;
  bottom: calc(var(--safe-bottom) + 410px);
  left: 54%;
  z-index: 10;
  padding: 8px 12px;
  border: 2px solid var(--ink);
  background: var(--yellow);
  box-shadow: 4px 4px 0 var(--pink);
  color: var(--ink);
  font-size: clamp(13px, 1.8vw, 21px);
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0;
  transform: translate(-50%, 10px) scale(0.75);
  pointer-events: none;
}

.score-pop.is-visible {
  animation: score-pop 900ms steps(5, end);
}

.score-pop.is-close {
  background: var(--paper);
  color: var(--purple);
}

.score-pop.is-miss {
  background: #ff7d89;
  color: var(--ink);
}

.mixing-controls {
  min-height: 166px;
}

.segmented-control,
.swatch-control {
  display: flex;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  grid-template-columns: none;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.segmented-control::-webkit-scrollbar,
.swatch-control::-webkit-scrollbar,
.order-rail::-webkit-scrollbar {
  display: none;
}

.segmented-control button,
.swatch-control button {
  min-width: 76px;
  min-height: 64px;
  flex: 1 0 76px;
  flex-direction: column;
  gap: 3px;
  scroll-snap-align: start;
}

.choice-sprite {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  object-fit: contain;
  image-rendering: pixelated;
  transition: transform 90ms steps(2, end), filter 90ms ease;
}

.mix-status-sprite,
.mix-status-sprites {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  object-fit: contain;
  image-rendering: pixelated;
}

.mix-status-sprites {
  display: flex;
  width: clamp(34px, 5vw, 72px);
  align-items: center;
  overflow: hidden;
}

.mix-status-sprites img {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  object-fit: contain;
  image-rendering: pixelated;
}

.mix-status-sprites img + img {
  margin-left: -9px;
}

.mix-status-sprite.is-empty,
.mix-status-sprites.is-empty {
  opacity: 0.24;
  filter: grayscale(0.65);
}

button.is-selected .choice-sprite {
  filter: drop-shadow(2px 2px 0 rgba(255, 255, 255, 0.72));
  transform: scale(1.13);
}

.icon-peach::before {
  top: 5px;
  left: 4px;
  width: 18px;
  height: 17px;
  border-radius: 45% 45% 52% 52%;
  background: #ff9569;
  box-shadow: inset -4px -3px 0 #ef5f67;
}

.icon-peach::after {
  top: 1px;
  left: 13px;
  width: 8px;
  height: 7px;
  background: #50d779;
  clip-path: polygon(0 50%, 100% 0, 72% 100%);
}

.icon-tonic::before {
  top: 3px;
  left: 7px;
  width: 13px;
  height: 20px;
  border: 3px solid #bdf7ff;
  background: rgba(22, 217, 255, 0.48);
}

.icon-tonic::after {
  top: 0;
  left: 10px;
  width: 7px;
  height: 5px;
  background: var(--cyan);
  box-shadow: 1px 10px 0 -2px var(--white), 5px 15px 0 -2px var(--white);
}

.icon-espresso::before {
  top: 7px;
  left: 3px;
  width: 17px;
  height: 13px;
  border: 3px solid #f6d4b0;
  background: #633b35;
  box-shadow: 0 4px 0 #f6d4b0;
}

.icon-espresso::after {
  top: 10px;
  left: 18px;
  width: 7px;
  height: 8px;
  border: 3px solid #f6d4b0;
  border-left: 0;
}

.icon-coconut::before {
  top: 6px;
  left: 3px;
  width: 20px;
  height: 16px;
  border-radius: 50%;
  background: #754536;
  box-shadow: inset 0 0 0 4px #fff0d1, inset 0 0 0 7px #dca376;
}

.icon-coconut::after {
  top: 2px;
  left: 11px;
  width: 3px;
  height: 8px;
  background: var(--green);
  transform: rotate(28deg);
}

.icon-orange::before {
  top: 3px;
  left: 3px;
  width: 19px;
  height: 19px;
  border: 3px solid var(--yellow);
  border-radius: 50%;
  background: var(--orange);
  box-shadow: inset 0 0 0 3px #ffc764;
}

.icon-orange::after {
  top: 6px;
  left: 11px;
  width: 3px;
  height: 13px;
  background: var(--yellow);
  transform: rotate(46deg);
}

.icon-olive::before {
  top: 8px;
  left: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #a6c83c;
  box-shadow: 8px 3px 0 #6f932e, inset 3px 2px 0 #d7ee6f;
}

.icon-olive::after {
  top: 3px;
  left: 13px;
  width: 3px;
  height: 22px;
  background: #f4d9b0;
  transform: rotate(48deg);
}

.icon-pineapple::before {
  top: 9px;
  left: 5px;
  width: 16px;
  height: 15px;
  background:
    linear-gradient(45deg, transparent 40%, #e79b24 40% 55%, transparent 55%),
    #ffc841;
  clip-path: polygon(15% 0, 85% 0, 100% 70%, 50% 100%, 0 70%);
}

.icon-pineapple::after {
  top: 0;
  left: 6px;
  width: 15px;
  height: 11px;
  background: var(--green);
  clip-path: polygon(0 100%, 18% 0, 45% 65%, 65% 0, 100% 100%);
}

.icon-mint-sprig::before {
  top: 3px;
  left: 11px;
  width: 3px;
  height: 21px;
  background: #13884c;
  transform: rotate(-12deg);
}

.icon-mint-sprig::after {
  top: 3px;
  left: 4px;
  width: 10px;
  height: 10px;
  background: var(--green);
  clip-path: polygon(50% 0, 100% 50%, 55% 100%, 0 50%);
  box-shadow: 8px 8px 0 #8dffbd, -1px 13px 0 #25c96f;
}

@keyframes drink-arrive {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes score-pop {
  0%,
  100% {
    opacity: 0;
    transform: translate(-50%, 10px) scale(0.75);
  }
  16%,
  72% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

@media (max-width: 760px) {
  .happy-hour-banner {
    display: none;
  }

  .order-stack {
    top: calc(var(--safe-top) + 106px);
    right: var(--safe-right);
    left: var(--safe-left);
    width: auto;
  }

  .queue-heading {
    min-height: 25px;
    padding: 4px 7px;
  }

  .order-rail {
    flex-direction: row;
    gap: 5px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .guest-ticket {
    min-width: 224px;
    min-height: 75px;
    flex: 0 0 224px;
    grid-template-columns: 60px minmax(0, 1fr);
    scroll-snap-align: start;
  }

  .guest-portrait {
    height: 62px;
  }

  .drink-preview {
    bottom: calc(var(--safe-bottom) + 282px);
    left: 50%;
    width: 150px;
    height: 190px;
  }

  .active-target {
    min-height: 36px;
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .active-target > img {
    width: 32px;
    height: 32px;
  }

  .active-target > span {
    padding: 3px 5px;
  }

  .active-target b {
    font-size: 7px;
  }

  .score-pop {
    bottom: calc(var(--safe-bottom) + 462px);
    left: 50%;
  }

  .drink-preview > #prepared-drink {
    height: 124px;
  }

  .drink-components {
    min-height: 28px;
    padding: 2px 4px;
  }

  .drink-components img {
    width: 22px;
    height: 22px;
  }

  .mix-status-sprite,
  .mix-status-sprites {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
  }

  .mix-status-sprites img {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
  }

  .mixing-controls {
    min-height: 0;
  }
}

@media (max-width: 640px) and (orientation: portrait) {
  .segmented-control button,
  .swatch-control button {
    min-width: 76px;
    min-height: 50px;
    flex-basis: 76px;
    flex-direction: row;
  }

  .choice-sprite {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  .drink-preview {
    height: 180px;
    grid-template-rows: minmax(0, 1fr) auto auto;
  }

  .active-target {
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: min(186px, calc(100vw - 32px));
    transform: translateX(-50%);
  }

  .drink-preview > #prepared-drink {
    height: 112px;
  }
}

@media (max-width: 390px) and (orientation: portrait) {
  .guest-ticket {
    min-width: 202px;
    flex-basis: 202px;
  }

  .ticket-copy > strong {
    font-size: 11px;
  }

  .drink-preview {
    bottom: calc(var(--safe-bottom) + 272px);
    width: 132px;
  }
}

@media (orientation: landscape) and (max-height: 520px) and (min-width: 650px) {
  .order-stack {
    top: calc(var(--safe-top) + 51px);
    width: 272px;
  }

  .queue-heading {
    min-height: 22px;
    padding: 3px 7px;
  }

  .order-rail {
    gap: 4px;
  }

  .guest-ticket {
    min-height: 56px;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 6px;
    padding: 3px 6px 3px 3px;
  }

  .guest-portrait {
    height: 49px;
  }

  .guest-portrait img {
    height: 55px;
  }

  .ticket-copy > strong {
    font-size: 10px;
  }

  .ticket-copy > small {
    display: none;
  }

  .ticket-meta time {
    font-size: 9px;
  }

  .drink-preview {
    bottom: calc(var(--safe-bottom) + 116px);
    left: 56%;
    width: 120px;
    height: 142px;
    grid-template-rows: minmax(0, 1fr) auto auto;
  }

  .active-target {
    position: absolute;
    bottom: 100%;
    left: 50%;
    min-height: 31px;
    width: 148px;
    grid-template-columns: 28px minmax(0, 1fr);
    transform: translateX(-50%);
  }

  .active-target > img {
    width: 28px;
    height: 28px;
  }

  .score-pop {
    bottom: calc(var(--safe-bottom) + 245px);
    left: 56%;
  }

  .drink-preview > #prepared-drink {
    height: 80px;
  }

  .drink-components {
    min-height: 22px;
    padding: 1px 2px;
  }

  .drink-components img {
    width: 18px;
    height: 18px;
  }

  .mixing-controls {
    min-height: 108px;
  }

  .segmented-control button,
  .swatch-control button {
    min-width: 65px;
    min-height: 42px;
    flex-basis: 65px;
    flex-direction: row;
  }

  .choice-sprite {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }
}

/* Option B: the bar itself is the interface. */

#game-canvas {
  background: #100b22 url("assets/neon-pour-workstation-bar.png?v=restaurant-7") center / cover
    no-repeat;
  object-position: center;
}

.game-frame::before {
  background:
    linear-gradient(180deg, rgba(6, 3, 17, 0.82) 0, rgba(6, 3, 17, 0.16) 16%, transparent 31%),
    linear-gradient(0deg, rgba(6, 3, 17, 0.88) 0, rgba(6, 3, 17, 0.2) 24%, transparent 39%);
}

.game-hud {
  top: max(8px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
  left: max(8px, env(safe-area-inset-left));
  grid-template-columns: minmax(225px, 0.72fr) minmax(430px, 1.45fr) auto;
  gap: 7px;
}

.brand-lockup,
.scoreboard,
.utility-action {
  height: 58px;
  border-color: rgba(255, 255, 255, 0.58);
  background: rgba(15, 10, 34, 0.88);
  backdrop-filter: blur(14px);
}

.brand-lockup {
  padding: 3px 12px 3px 5px;
}

.brand-mark {
  width: 50px;
  height: 50px;
}

.brand-copy h1 {
  font-size: clamp(18px, 1.8vw, 26px);
}

.scoreboard {
  box-shadow: 3px 3px 0 rgba(118, 87, 255, 0.78);
}

.stat {
  padding: 6px clamp(8px, 1.1vw, 15px);
}

.stat strong {
  font-size: clamp(17px, 1.45vw, 23px);
}

.utility-action {
  min-width: 58px;
  padding: 5px 8px;
  box-shadow: 3px 3px 0 var(--pink);
}

.happy-hour-banner {
  top: calc(max(8px, env(safe-area-inset-top)) + 66px);
}

.order-stack {
  top: calc(max(8px, env(safe-area-inset-top)) + 68px);
  right: max(12px, env(safe-area-inset-right));
  width: clamp(250px, 24vw, 348px);
  max-height: calc(100dvh - 270px);
  filter: drop-shadow(5px 6px 0 rgba(5, 3, 16, 0.55));
}

.queue-heading {
  min-height: 27px;
  padding: 4px 8px;
  border-color: rgba(255, 255, 255, 0.58);
  background: rgba(15, 10, 34, 0.9);
}

.order-rail {
  max-height: calc(100dvh - 310px);
  overflow-x: hidden;
  overflow-y: auto;
}

.guest-ticket {
  min-height: 66px;
  grid-template-columns: 55px minmax(0, 1fr);
  gap: 7px;
  padding: 4px 7px 4px 4px;
  border-color: rgba(255, 255, 255, 0.56);
  background: rgba(15, 10, 34, 0.9);
}

.guest-portrait {
  height: 55px;
}

.guest-portrait img {
  height: 62px;
}

.ticket-copy > strong {
  font-size: 11px;
}

.ticket-copy > small {
  font-size: 5.5px;
}

.station-tabs {
  display: none;
}

.mixing-controls {
  right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  left: max(10px, env(safe-area-inset-left));
  grid-template-columns: 0.95fr 1.45fr 1fr 0.76fr;
  grid-template-rows: 34px minmax(0, 1fr);
  gap: 6px;
  height: 158px;
  min-height: 0;
  padding: 7px;
  border-color: rgba(255, 255, 255, 0.56);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(12, 8, 29, 0.85), rgba(12, 8, 29, 0.96));
  box-shadow: 4px 4px 0 rgba(22, 217, 255, 0.78);
  backdrop-filter: blur(14px);
}

.mix-status {
  min-height: 0;
  grid-column: 1 / -1;
  grid-row: 1;
  grid-template-columns: auto repeat(3, minmax(0, 1fr));
  gap: 3px;
  padding: 2px 4px;
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.035);
}

.mix-status-label {
  padding-inline: 7px;
  font-size: 6px;
}

.mix-status-item {
  gap: 5px;
  padding: 1px 7px;
}

.mix-status-item small {
  margin: 0;
  font-size: 5px;
}

.mix-status-item strong {
  font-size: 7px;
}

.mix-status-sprite,
.mix-status-sprites {
  width: 26px;
  height: 26px;
  flex-basis: 26px;
}

.mix-status-sprites {
  width: clamp(26px, 4vw, 58px);
}

.mix-status-sprites img {
  width: 22px;
  height: 22px;
  flex-basis: 22px;
}

.control-group {
  grid-row: 2;
  gap: 4px;
  padding: 6px 6px 5px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-top-width: 2px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.045);
}

.glass-group {
  grid-column: 1;
  border-top-color: var(--pink);
}

.pour-group {
  grid-column: 2;
  border-top-color: var(--cyan);
}

.garnish-group {
  grid-column: 3;
  border-top-color: var(--pink);
}

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

.control-label b {
  font-size: 7px;
}

.control-hint {
  color: var(--cyan);
  font-size: 5.5px;
}

.segmented-control,
.swatch-control {
  gap: 4px;
}

.segmented-control button,
.swatch-control button {
  min-width: 66px;
  min-height: 65px;
  flex-basis: 66px;
  gap: 2px;
  padding: 4px 3px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.075);
  font-size: 7px;
}

.choice-sprite {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
}

.command-row {
  position: relative;
  display: grid;
  min-width: 0;
  height: auto;
  grid-column: 4;
  grid-row: 2;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 5px;
  padding: 27px 6px 6px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-top: 2px solid var(--cyan);
  border-radius: 6px;
  background: rgba(22, 217, 255, 0.055);
}

.command-row::before {
  position: absolute;
  top: 8px;
  left: 8px;
  color: var(--white);
  content: "04  SERVE";
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.secondary-action,
.serve-action {
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 5px;
  font-size: clamp(7px, 0.7vw, 10px);
}

.drink-preview {
  right: clamp(20px, 4.4vw, 74px);
  bottom: calc(max(10px, env(safe-area-inset-bottom)) + 166px);
  left: auto;
  width: clamp(130px, 12vw, 182px);
  height: clamp(170px, 24vh, 230px);
  grid-template-rows: minmax(0, 1fr) auto auto;
  transform: none;
  filter: drop-shadow(5px 7px 0 rgba(5, 3, 16, 0.45));
}

.active-target {
  display: none;
}

.drink-preview > #prepared-drink {
  height: 100%;
  max-height: 168px;
}

.drink-preview strong {
  background: rgba(15, 10, 34, 0.88);
}

.drink-components {
  background: rgba(15, 10, 34, 0.9);
}

.score-pop {
  right: clamp(20px, 4vw, 70px);
  bottom: calc(max(10px, env(safe-area-inset-bottom)) + 390px);
  left: auto;
  transform: none;
}

.score-pop.is-visible {
  animation-name: workstation-score-pop;
}

@keyframes workstation-score-pop {
  0%,
  100% {
    opacity: 0;
    transform: translateY(10px) scale(0.75);
  }
  16%,
  72% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 760px) {
  #game-canvas {
    object-position: 35% center;
  }

  .game-frame::before {
    background:
      linear-gradient(180deg, rgba(6, 3, 17, 0.82) 0, rgba(6, 3, 17, 0.2) 23%, transparent 39%),
      linear-gradient(0deg, rgba(6, 3, 17, 0.92) 0, rgba(6, 3, 17, 0.24) 35%, transparent 54%);
  }

  .game-hud {
    top: var(--safe-top);
    right: var(--safe-right);
    left: var(--safe-left);
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px;
  }

  .brand-lockup,
  .utility-action {
    height: 43px;
  }

  .brand-lockup {
    padding: 2px 7px 2px 3px;
  }

  .brand-mark {
    width: 38px;
    height: 38px;
  }

  .brand-copy h1 {
    font-size: 15px;
  }

  .eyebrow {
    max-width: 180px;
    font-size: 6px;
  }

  .utility-action {
    min-width: 43px;
    padding: 3px;
  }

  .scoreboard {
    height: 41px;
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .stat {
    padding: 3px 2px;
  }

  .stat-label {
    font-size: 6px;
  }

  .stat strong {
    font-size: 14px;
  }

  .order-stack {
    top: calc(var(--safe-top) + 91px);
    right: var(--safe-right);
    left: var(--safe-left);
    width: auto;
    max-height: 70px;
  }

  .queue-heading {
    display: none;
  }

  .order-rail {
    max-height: 70px;
    flex-direction: row;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
  }

  .guest-ticket {
    min-width: 174px;
    min-height: 66px;
    flex: 0 0 174px;
    grid-template-columns: 52px minmax(0, 1fr);
    scroll-snap-align: start;
  }

  .guest-portrait {
    height: 56px;
  }

  .ticket-copy > small,
  .ticket-tip {
    display: none;
  }

  .ticket-meta time {
    font-size: 9px;
  }

  .station-tabs {
    display: grid;
    min-width: 0;
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
  }

  .station-tabs button {
    display: flex;
    min-width: 0;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 3px 2px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.045);
    color: var(--muted);
    font-size: 6px;
    text-transform: uppercase;
  }

  .station-tabs button img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    image-rendering: pixelated;
    opacity: 0.58;
  }

  .station-tabs button span {
    display: grid;
    gap: 1px;
    text-align: left;
  }

  .station-tabs button b {
    color: var(--purple);
    font-size: 5px;
  }

  .station-tabs button.is-current {
    border-color: var(--cyan);
    background: rgba(22, 217, 255, 0.14);
    box-shadow: inset 0 -3px 0 var(--cyan);
    color: var(--white);
  }

  .station-tabs button.is-current img,
  .station-tabs button.is-complete img {
    opacity: 1;
  }

  .station-tabs button.is-complete b {
    color: var(--green);
  }

  .mixing-controls {
    right: var(--safe-right);
    bottom: var(--safe-bottom);
    left: var(--safe-left);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 42px 39px minmax(0, 1fr);
    gap: 5px;
    height: 224px;
    padding: 6px;
  }

  .mix-status {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 39px;
  }

  .mix-status-label {
    display: none;
  }

  .mix-status-item {
    gap: 3px;
    padding: 1px 4px;
  }

  .mix-status-item:first-of-type {
    border-left: 0;
  }

  .mix-status-item strong {
    font-size: 6px;
  }

  .mix-status-item small {
    font-size: 5px;
  }

  .mix-status-sprite,
  .mix-status-sprites {
    width: 25px;
    height: 25px;
    flex-basis: 25px;
  }

  .mix-status-sprites img {
    width: 21px;
    height: 21px;
    flex-basis: 21px;
  }

  .mixing-controls .control-group,
  .mixing-controls .command-row {
    display: none;
  }

  .mixing-controls[data-stage="glass"] .glass-group,
  .mixing-controls[data-stage="pour"] .pour-group,
  .mixing-controls[data-stage="finish"] .garnish-group {
    display: grid;
    grid-column: 1;
    grid-row: 3;
  }

  .mixing-controls[data-stage="serve"] .command-row {
    display: grid;
    grid-column: 1;
    grid-row: 3;
  }

  .control-group {
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: 19px minmax(0, 1fr);
    gap: 3px;
    padding: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  }

  .control-label {
    display: flex;
    padding: 0 3px;
    font-size: 7px;
  }

  .control-hint {
    display: block;
  }

  .segmented-control button,
  .swatch-control button {
    min-width: 78px;
    min-height: 67px;
    flex-basis: 78px;
    flex-direction: column;
    font-size: 7px;
  }

  .choice-sprite {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .command-row {
    height: auto;
    padding-top: 30px;
    grid-template-columns: 0.7fr 1.3fr;
  }

  .secondary-action,
  .serve-action {
    min-height: 70px;
    font-size: 11px;
  }

  .drink-preview {
    right: var(--safe-right);
    bottom: calc(var(--safe-bottom) + 231px);
    left: auto;
    width: 118px;
    height: 148px;
    transform: none;
  }

  .drink-preview > #prepared-drink {
    height: 94px;
  }

  .drink-preview strong {
    max-width: 118px;
    font-size: 5.5px;
  }

  .drink-components {
    min-height: 25px;
  }

  .drink-components img {
    width: 20px;
    height: 20px;
  }

  .score-pop {
    right: var(--safe-right);
    bottom: calc(var(--safe-bottom) + 386px);
    left: auto;
    font-size: 11px;
  }

  .stage-feedback {
    top: 47%;
    min-width: calc(100vw - 28px);
  }
}

@media (max-width: 390px) and (orientation: portrait) {
  #game-canvas {
    object-position: 32% center;
  }

  .station-tabs button span {
    font-size: 5.5px;
  }

  .station-tabs button img {
    width: 22px;
    height: 22px;
  }

  .mix-status-item strong {
    display: none;
  }

  .mix-status-item small {
    font-size: 5.5px;
  }

  .guest-ticket {
    min-width: 160px;
    flex-basis: 160px;
  }
}

@media (orientation: landscape) and (max-height: 520px) and (min-width: 650px) {
  #game-canvas {
    object-position: center;
  }

  .game-hud {
    grid-template-columns: minmax(150px, 0.48fr) minmax(355px, 1.52fr) auto;
  }

  .brand-lockup,
  .scoreboard,
  .utility-action {
    height: 43px;
  }

  .order-stack {
    top: calc(var(--safe-top) + 49px);
    width: 235px;
    max-height: calc(100dvh - 172px);
  }

  .order-rail {
    max-height: calc(100dvh - 200px);
  }

  .station-tabs {
    display: none;
  }

  .mixing-controls {
    grid-template-columns: 0.95fr 1.45fr 1fr 0.76fr;
    grid-template-rows: 24px minmax(0, 1fr);
    height: 108px;
    padding: 4px;
  }

  .mixing-controls .control-group {
    display: grid;
    grid-row: 2;
  }

  .mixing-controls .command-row {
    display: grid;
    grid-column: 4;
    grid-row: 2;
  }

  .mix-status {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 24px;
  }

  .control-group {
    grid-template-columns: 1fr;
    grid-template-rows: 14px minmax(0, 1fr);
    padding: 2px 3px;
  }

  .control-label {
    font-size: 6px;
  }

  .segmented-control button,
  .swatch-control button {
    min-width: 54px;
    min-height: 52px;
    flex-basis: 54px;
    flex-direction: column;
    padding: 2px;
    font-size: 5.5px;
  }

  .choice-sprite {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }

  .command-row {
    height: auto;
    padding: 20px 3px 3px;
  }

  .command-row::before {
    top: 5px;
    left: 5px;
    font-size: 5.5px;
  }

  .secondary-action,
  .serve-action {
    min-height: 0;
    font-size: 7px;
  }

  .drink-preview {
    right: 246px;
    bottom: calc(var(--safe-bottom) + 112px);
    width: 100px;
    height: 122px;
  }

  .drink-preview > #prepared-drink {
    height: 76px;
  }

  .score-pop {
    right: 248px;
    bottom: calc(var(--safe-bottom) + 238px);
  }
}