@font-face { font-family: 'Noto Sans Arabic'; font-weight: 500; src: url(/fonts/noto-sans-arabic-arabic-500-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+0660-0669; font-display: swap; }
@font-face { font-family: 'Noto Sans Arabic'; font-weight: 700; src: url(/fonts/noto-sans-arabic-arabic-700-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+0660-0669; font-display: swap; }
@font-face { font-family: 'Noto Sans Arabic'; font-weight: 800; src: url(/fonts/noto-sans-arabic-arabic-800-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+0660-0669; font-display: swap; }
@font-face { font-family: 'Noto Sans Arabic'; font-weight: 900; src: url(/fonts/noto-sans-arabic-arabic-900-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+0660-0669; font-display: swap; }

:root {
  --night: #1b1640; --night2: #141236; --indigo: #2e2870; --panel: #2d2856; --panel2: #262150; --line: #4a4380; --frame: #8b7fd0;
  --yellow: #f6cf6e; --yellow-edge: #d98a3a; --red: #d9605a; --red-dark: #a8434a; --cream: #f6e7c1; --teal: #7fd4c8; --gold: #e8b25a;
  --ink: #1b1640; --text: #f4f0ff; --muted: #b8b3d6; --ok: #5cbf7a; --bad: #e2574c;
  --sky1: #52457f; --sky2: #7d6497; --sky3: #b6849a; --sky4: #e8a983; --road: #2a2545;
  --display: 'Noto Sans Arabic', system-ui, sans-serif;
  --body: 'Noto Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'DejaVu Sans Mono', ui-monospace, Menlo, monospace;
}
[hidden] { display: none !important; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(ellipse 90% 60% at 50% 25%, #332b7a 0%, var(--night) 55%, var(--night2) 100%) fixed, var(--night);
  color: var(--text); font-family: var(--body); font-weight: 500;
  touch-action: manipulation; -webkit-user-select: none; user-select: none; overscroll-behavior: none;
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
svg.px { display: block; width: 100%; height: auto; image-rendering: pixelated; }
svg.vx { display: block; width: 100%; height: auto; overflow: visible; }
.mono { font-family: var(--mono); letter-spacing: .25em; font-size: 13px; color: var(--gold); direction: ltr; }
.gold { color: var(--gold); }

/* ---------- pages ---------- */
.page { max-width: 520px; margin: 0 auto; padding: 14px 16px 32px; min-height: 100dvh; }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 4px 0 12px; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 14px; }
.brand { font-weight: 800; font-size: 18px; }
.title { font-family: var(--display); font-weight: 900; color: var(--yellow); text-align: center; font-size: clamp(62px, 19vw, 112px); line-height: 1.25; margin: 10px 0 0; text-shadow: -2px 5px 0 #b8454a, 0 10px 22px rgba(0,0,0,.3); }
.page.wide { max-width: 980px; }
.page.wide .card { max-width: 980px; margin: 0 auto; }
.hero { height: auto; line-height: 0; }
.hero-svg { width: 100%; height: auto; }
.title.small { font-size: 52px; margin-top: 4px; }
.title-sm { font-family: var(--display); font-weight: 900; color: var(--yellow); font-size: 48px; text-shadow: 0 4px 0 var(--red-dark); }
.sub { text-align: center; font-size: 19px; font-weight: 700; margin: 8px 0 4px; }
.meta { text-align: center; color: var(--teal); font-weight: 700; margin: 6px 0 18px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 16px; }
.lbl { display: block; font-weight: 800; margin: 16px 2px 8px; }
.row { display: flex; gap: 10px; }
.row > * { flex: 1 1 0; width: auto; }
.err { color: #ff9c92; min-height: 20px; margin: 8px 0 0; font-weight: 700; }
.foot { text-align: center; color: var(--muted); margin-top: 22px; font-size: 12px; }
.loading { display: grid; place-items: center; min-height: 100dvh; text-align: center; }

.btn { display: block; width: 100%; border-radius: 12px; padding: 15px 12px; font-weight: 800; font-size: 18px; transition: transform .08s, box-shadow .08s, filter .15s; }
.btn:active { transform: translateY(3px); }
.btn.primary { background: var(--yellow); color: var(--ink); box-shadow: 0 5px 0 var(--yellow-edge); }
.btn.primary:active { box-shadow: 0 2px 0 var(--yellow-edge); }
.btn.primary:disabled { background: #5a527f; color: #9d97c4; box-shadow: 0 5px 0 #3c3566; transform: none; }
.btn.big { font-family: var(--display); font-weight: 900; font-size: 26px; padding: 16px; margin-top: 18px; }
.btn.ghost { background: #453a78; border: 2px solid #7e72c4; box-shadow: 0 4px 0 #2a2350; }
.code-in { flex: 1; min-width: 0; background: #16143a; border: 2px solid var(--line); border-radius: 12px; color: var(--text); font: 800 22px var(--mono); letter-spacing: .4em; text-align: center; padding: 12px; }
.code-in::placeholder { color: #5f5a8a; }

/* ---------- outdoor pixel scene ---------- */
.frame { position: relative; border: 2px solid var(--frame); border-radius: 14px; overflow: hidden; }
.sky { position: absolute; inset: 0; background: linear-gradient(to bottom, #3f346f 0%, #7a6299 35%, #d0909a 68%, #f3b486 100%); }
.sun { position: absolute; top: 6%; right: 8%; width: clamp(70px, 22%, 110px); opacity: .95; }
.skyline { position: absolute; left: 0; right: 0; bottom: var(--road-h, 26%); height: 42%; opacity: .95; }
.skyline svg { width: 100%; height: 100%; }
.shop { position: absolute; bottom: var(--road-h, 26%); left: 8%; width: 58%; }
.palm { position: absolute; bottom: var(--road-h, 26%); width: 9%; min-width: 34px; }
.palm-a { left: 1%; } .palm-b { right: 3%; }
.road { position: absolute; left: 0; right: 0; bottom: 0; height: var(--road-h, 26%); background: linear-gradient(#36305a, #221d3d); border-top: 5px solid #5a5288; box-shadow: inset 0 3px 0 #2a2545; }
.road i { position: absolute; left: 0; right: 0; bottom: 18%; height: 5px; border-radius: 3px; background: repeating-linear-gradient(to right, #d8d4ee 0 30px, transparent 30px 56px); opacity: .55; }
.hero-car { position: absolute; bottom: 9%; width: 19%; }
.hero-car:nth-of-type(odd) { animation: idle 1.2s steps(2) infinite; }

/* ---------- lobby ---------- */
.room { display: grid; grid-template-columns: 1fr 120px; grid-template-areas: "code qr" "help qr" "share share"; gap: 6px 14px; align-items: center; }
.room-code { grid-area: code; }
.room-code .lbl { margin: 0 0 4px; color: var(--teal); }
.room-code b { font: 800 40px var(--mono); letter-spacing: .25em; color: var(--yellow); }
.qr { grid-area: qr; width: 120px; height: 120px; border-radius: 10px; background: var(--cream); image-rendering: pixelated; }
.room-help { grid-area: help; margin: 0; color: var(--muted); font-size: 14px; }
.room .btn { grid-area: share; margin-top: 8px; padding: 11px; }
.h2 { font-size: 20px; margin: 22px 2px 10px; font-weight: 800; }
.seats { display: grid; gap: 10px; }
.seat { display: grid; grid-template-columns: 56px 1fr auto; grid-template-areas: "ic name state" "ic job state"; text-align: right; align-items: center; background: var(--panel); border: 2px solid var(--line); border-radius: 16px; padding: 12px 14px; gap: 0 10px; box-shadow: 0 4px 0 #1d1840; transition: transform .1s, border-color .2s; }
.seat:active, .seat.pressed { transform: translateY(3px); box-shadow: 0 1px 0 #1d1840; }
.seat-ic { grid-area: ic; font-size: 40px; text-align: center; }
.seat-name { grid-area: name; font-family: var(--display); font-weight: 900; font-size: 26px; line-height: 1.2; }
.seat-job { grid-area: job; color: var(--muted); font-size: 14px; }
.seat-state { grid-area: state; font-size: 13px; font-weight: 800; padding: 6px 10px; border-radius: 99px; background: #3b3470; max-width: 120px; text-align: center; }
.seat.mine { border-color: var(--yellow); background: #3a3270; }
.seat.mine .seat-state { background: var(--yellow); color: var(--ink); }
.seat.taken { opacity: .55; }
.seat.taken .seat-state { background: #5cbf7a33; color: #a8f0bd; }
.seat.away .seat-state { background: #ee8a3c; color: var(--ink); }
.seat.bot .seat-state { background: #7fd4c8; color: var(--ink); }
.bots-btn { margin-top: 6px; font-size: 16px; padding: 12px; }
.toast.say { border-color: var(--teal); }
.toast.say b { color: var(--teal); font-size: 15px; }
.toast.say .q { display: block; font-size: 19px; font-weight: 800; color: var(--cream); }
.say-ic { font-size: 26px; }
.wait { text-align: center; color: var(--teal); font-weight: 700; min-height: 24px; }

/* ---------- station frame ---------- */
.station { position: relative; height: 100dvh; max-width: 520px; margin: 0 auto; display: grid; overflow: hidden; }
.st-order { grid-template-rows: auto minmax(250px, 1fr) auto 212px; }
.st-kitchen { grid-template-rows: auto 58px minmax(250px, 1fr) auto auto; }
.st-window { grid-template-rows: auto minmax(270px, 1fr) auto; }
.hud { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: rgba(20,18,54,.85); border-bottom: 2px solid var(--line); height: 56px; z-index: 5; }
.badge { font-weight: 800; font-size: 16px; padding: 6px 10px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); white-space: nowrap; }
.clock { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.clock-t { font-family: var(--display); font-weight: 900; font-size: 24px; line-height: 1; color: var(--yellow); }
.clock.practice .clock-t { font-family: var(--body); font-weight: 800; font-size: 14px; color: var(--teal); }
.clock-bar { width: 100%; max-width: 120px; height: 6px; border-radius: 3px; background: #3b3470; overflow: hidden; }
.clock-bar b { display: block; height: 100%; background: var(--yellow); transition: width .2s linear; margin-inline-start: auto; }
.clock.practice .clock-bar b { background: var(--teal); }
.clock.hurry .clock-t { color: #ff8a7a; animation: beat .5s infinite; }
.clock.hurry .clock-bar b { background: var(--bad); }
.score { display: flex; gap: 8px; font-weight: 800; font-size: 17px; }
.score .ok { color: #8be0a4; } .score .bad { color: #ff9c92; }
.mute { flex: none; font-size: 20px; width: 40px; height: 40px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); }
.st-kitchen .practice-banner { top: 124px; }
.practice-banner { position: absolute; top: 62px; left: 50%; transform: translateX(-50%); z-index: 6; background: var(--teal); color: var(--ink); font-weight: 800; font-size: 14px; padding: 5px 14px; border-radius: 99px; white-space: nowrap; box-shadow: 0 3px 0 #3c8f86; pointer-events: none; }

/* scenes inside stations */
.scene { position: relative; overflow: hidden; --road-h: 96px; }
.scene .skyline { height: 120px; }
.scene .palm { width: 70px; }
.scene .shop { left: auto; right: -4%; width: min(78%, 340px); }
.st-order .palm-b { display: none; }
.lane { position: absolute; left: 0; right: 0; bottom: 30px; height: 80px; direction: ltr; }
.car { position: absolute; left: 0; bottom: 0; transition: transform 1.35s cubic-bezier(.25,.8,.3,1); will-change: transform; }
.car.leaving { transition-timing-function: cubic-bezier(.45,0,.85,.6); transition-duration: 1.1s; }
.car.driving .car-body { animation: bob .16s steps(2) infinite; }
.car-tag { position: absolute; left: 50%; bottom: -24px; transform: translateX(-50%); font-weight: 800; font-size: 13px; background: rgba(20,18,54,.8); padding: 1px 8px; border-radius: 6px; white-space: nowrap; direction: rtl; }
.car.waiting .car-tag { background: var(--yellow); color: var(--ink); font-size: 15px; animation: beat 1s infinite; }
.speaker { position: absolute; bottom: 52px; left: calc(50% - 150px); width: 74px; }
.more { position: absolute; right: 6px; bottom: 120px; background: var(--red); color: #fff; font-weight: 800; border-radius: 99px; padding: 2px 9px; font-size: 15px; box-shadow: 0 3px 0 var(--red-dark); }

.bubble { position: absolute; bottom: calc(100% + 18px); left: 52%; transform: translateX(-50%) scale(0); transform-origin: 30% 100%; max-width: 250px; width: max-content; direction: rtl;
  background: var(--cream); color: var(--ink); font: 800 23px/1.3 var(--body); padding: 10px 14px; border: 3px solid var(--ink); border-radius: 8px; box-shadow: 5px 5px 0 rgba(0,0,0,.3); text-align: center; transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.bubble::after { content: ''; position: absolute; top: 100%; left: 26%; border: 11px solid transparent; border-top-color: var(--ink); }
.bubble::before { content: ''; position: absolute; top: calc(100% - 4px); left: calc(26% + 3px); border: 8px solid transparent; border-top-color: var(--cream); z-index: 1; }
.bubble.show { transform: translateX(-50%) scale(1); }

/* ---------- 🎧 order ---------- */
.order-ctl { padding: 10px 14px 6px; background: var(--panel2); border-top: 2px solid var(--line); }
.order-btn { background: var(--yellow); color: var(--ink); font-family: var(--display); font-weight: 900; font-size: 32px; padding: 12px; box-shadow: 0 6px 0 var(--yellow-edge); display: flex; justify-content: center; align-items: center; gap: 10px; height: 72px; }
.order-btn.pressed { transform: translateY(4px); box-shadow: 0 2px 0 var(--yellow-edge); }
.order-btn.off { background: #4a4380; color: #9d97c4; box-shadow: 0 6px 0 #2d2856; }
.order-btn.ready-pop { animation: pop .5s; }
.ob-ic { font-size: 26px; }
.order-sub { text-align: center; margin: 8px 0 0; color: var(--muted); font-size: 14px; font-weight: 700; min-height: 18px; }
.rail { background: var(--panel); padding: 8px 12px 10px; overflow: hidden; display: flex; flex-direction: column; }
.rail-head { display: flex; justify-content: space-between; font-weight: 800; }
.rail-note { color: var(--teal); font-size: 13px; }
.rail-bar { height: 6px; margin: 6px -12px 8px; background: linear-gradient(#9aa0b8, #6d728c); }
.tickets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; overflow-y: auto; align-content: start; flex: 1; }
.tickets .empty { grid-column: 1 / -1; text-align: center; color: var(--muted); margin: 18px 0; }
.ticket { position: relative; background: var(--cream); color: var(--ink); border-radius: 4px 4px 8px 8px; padding: 6px 8px 7px; display: grid; grid-template-columns: 46px 1fr; grid-template-areas: "car name" "order order"; align-items: center; gap: 2px 6px; border-top: 6px solid var(--c, #999); box-shadow: 0 3px 0 rgba(0,0,0,.25); }
.ticket[data-color="red"] { --c: #d9605a; } .ticket[data-color="green"] { --c: #5cbf7a; } .ticket[data-color="yellow"] { --c: #f4c55f; } .ticket[data-color="blue"] { --c: #4f7fd9; }
.ticket[data-color="white"] { --c: #c9c3b8; } .ticket[data-color="purple"] { --c: #9a6ad0; } .ticket[data-color="orange"] { --c: #ee8a3c; } .ticket[data-color="pink"] { --c: #ec8fb3; }
.tk-car { grid-area: car; } .tk-name { grid-area: name; font-weight: 800; font-size: 16px; }
.tk-order { grid-area: order; font-size: 15px; font-weight: 700; }
.tk-order b { font-family: var(--display); font-weight: 900; font-size: 22px; }
.ticket.new { animation: ticketIn .45s cubic-bezier(.3,1.4,.5,1); }
.ticket.done { opacity: .7; transition: opacity 1.2s .4s; }
.stamp { position: absolute; left: 6px; top: 4px; font: 900 34px var(--display); transform: rotate(-14deg); animation: stamp .3s; }
.ticket.is-ok .stamp { color: #2f9a52; } .ticket.is-bad .stamp { color: #c8323a; }

/* ---------- 🍔 kitchen ---------- */
.pass { display: flex; align-items: center; gap: 8px; padding: 0 10px; background: linear-gradient(#b98aa0, #f0b088 58%, #36305a 58%, #221d3d); border-bottom: 5px solid #8d92ab; box-shadow: inset 0 -2px 6px rgba(0,0,0,.3); }
.pass-lbl { font-size: 12px; font-weight: 800; background: rgba(20,18,54,.8); padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.pass-lane { position: relative; flex: 1; height: 100%; overflow: hidden; }
.pass-lane .car { bottom: 6px; transition-duration: 1s; }
.pass-lane .car-tag { display: none; }
.counter { position: relative; display: flex; flex-direction: column; align-items: center; padding: 10px 12px 0; overflow: hidden;
  background: radial-gradient(ellipse 80% 70% at 50% 35%, rgba(255,214,150,.18), transparent 70%), linear-gradient(90deg, rgba(0,0,0,.12) 2px, transparent 2px) 0 0 / 44px 22px, linear-gradient(rgba(0,0,0,.12) 2px, transparent 2px) 0 0 / 44px 22px, linear-gradient(#4a4189, #3a326f); }
.counter-front { align-self: stretch; margin: 0 -12px; height: 64px; flex: none; background: linear-gradient(#f4f5fa 0 3px, #c9cddd 3px, #9aa0b8 60%, #7d8299); box-shadow: inset 0 6px 8px -6px rgba(0,0,0,.35); }
.board { position: relative; display: flex; justify-content: center; align-items: flex-end; width: 100%; flex: 1; min-height: 0; padding-bottom: 6px; }
.board::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: clamp(180px, 56vw, 250px); height: 18px; background: linear-gradient(#d39a5d, #a46a37); border-radius: 9px; box-shadow: 0 5px 0 #6f4626, 0 10px 14px rgba(0,0,0,.3); }
.stack-wrap { position: relative; z-index: 1; width: clamp(120px, 38vw, 168px); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; margin-bottom: 8px; }
.lid { width: 100%; margin-bottom: 16px; filter: drop-shadow(0 10px 0 rgba(0,0,0,.18)); animation: hover 2s ease-in-out infinite; }
.stack { width: 100%; display: flex; flex-direction: column-reverse; }
.layer { width: 100%; margin-top: -3px; }
.layer.drop { animation: drop .32s cubic-bezier(.4,1.6,.6,1); }
.stack.fresh .bun-b { animation: pop .35s; }
.readout { display: flex; gap: 8px; align-items: center; justify-content: center; z-index: 1; flex: none; }
.ro-patties { display: flex; align-items: center; gap: 4px; background: #5e301c; color: #fff; border-radius: 12px; padding: 2px 12px 2px 10px; box-shadow: 0 3px 0 #3e1d10; }
.ro-patties b { font: 900 34px/1.1 var(--display); }
.ro-patties span { font-weight: 800; font-size: 14px; }
.ro-patties.zero { background: #6d728c; box-shadow: 0 3px 0 #4a4e66; }
.ro-name { font: 900 30px/1 var(--display); color: var(--ink); background: var(--yellow); padding: 6px 12px 2px; border-radius: 10px; box-shadow: 0 3px 0 var(--yellow-edge); min-width: 74px; text-align: center; }
.ro-name.warn { background: #ff9c92; box-shadow: 0 3px 0 var(--bad); }
.ro-extras { display: flex; flex-direction: column; gap: 4px; }
.ro-x { font-weight: 800; font-size: 13px; padding: 3px 9px; border-radius: 8px; background: #4a4e66; color: #c9c6dd; white-space: nowrap; }
.ro-x.cheese.on { background: #f6c84a; color: #4a3200; box-shadow: 0 2px 0 #c9921f; }
.ro-x.pickles.on { background: #6fb33f; color: #13300a; box-shadow: 0 2px 0 #467a26; }
.trays { display: flex; gap: 8px; padding: 10px 10px 8px; background: var(--panel2); border-top: 2px solid var(--line); }
.tray { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 96px; background: var(--panel); border: 2px solid var(--line); border-radius: 14px; box-shadow: 0 5px 0 #1d1840; transition: transform .07s, box-shadow .07s; }
.tray-patty { flex: 1.25; } .tray-undo { flex: .65; }
.tray-cheese .tray-art { width: 66%; max-width: 84px; }
.tray-art { width: 82%; max-width: 120px; }
.tray-pickles .tray-art { width: 70%; max-width: 92px; }
.tray-lbl { font-weight: 800; font-size: 16px; }
.undo-ic { font-size: 36px; line-height: 1; font-weight: 800; }
.tray.pressed { animation: press .16s; }

.bags { display: flex; gap: 8px; padding: 10px 10px 14px; justify-content: space-between; }
.st-kitchen .bags { background: linear-gradient(#4a3d5e, #33293f); border-top: 4px solid #6a5a80; }
.bag { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; padding: 6px 2px 4px; border-radius: 12px; border: 2px dashed transparent; transition: transform .1s; }
.bag-art { width: 64px; display: block; }
.bag-n { position: absolute; top: 30px; text-shadow: 0 1px 0 rgba(255,255,255,.35); left: 50%; transform: translateX(-50%); font: 900 34px/1 var(--display); color: #4a2f16; pointer-events: none; }
.bag[data-state="packed"] .bag-n { top: 32px; color: #3a210c; }
.bag-tag { font-weight: 800; font-size: 13px; margin-top: 3px; white-space: nowrap; color: var(--muted); min-height: 18px; }
.bag.full .bag-tag { color: #a8f0bd; }
.bag[data-state="flat"] .bag-n { top: 56px; font-size: 20px; color: #5a4020; }
.can-pack .bag:not(.full) { border-color: var(--yellow); background: rgba(246,207,110,.08); animation: glow 1.2s ease-in-out infinite; }
.bag.filling .bag-art { animation: fill .45s cubic-bezier(.3,1.5,.5,1); }
.bag.returned, .bag.arrived { animation: pop .5s; }

/* ---------- 🛍️ window ---------- */
.inside { background: radial-gradient(ellipse 90% 50% at 50% 0%, rgba(255,214,150,.14), transparent), linear-gradient(#3e3474, #2c2558); --road-h: 80px; }
.win-sign { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 2; background: #1d1838; padding: 4px; border-radius: 3px; }
.win-sign span { display: block; font: 700 15px var(--mono); letter-spacing: .12em; color: var(--cream); background: var(--red-dark); border: 3px solid var(--cream); padding: 3px 12px; white-space: nowrap; }
.win-open { position: absolute; inset: 52px 14px 30px; border: 10px solid #262048; border-radius: 16px; overflow: hidden; box-shadow: inset 0 0 18px rgba(0,0,0,.45), 0 0 0 3px #6a5fa3, 0 8px 18px rgba(0,0,0,.35); }
.win-open .lane { bottom: 22px; }
.win-open .skyline { height: 100px; }
.win-sill { position: absolute; left: 6px; right: 6px; bottom: 14px; height: 22px; background: linear-gradient(#e0ab70, #a96f3c); border-radius: 8px; box-shadow: 0 5px 0 #6f4626, 0 10px 14px rgba(0,0,0,.3); }
.react { position: absolute; bottom: 150px; left: 50%; transform: translateX(-50%) scale(0); display: flex; gap: 8px; align-items: center; background: var(--cream); color: var(--ink); border: 3px solid var(--ink); border-radius: 10px; padding: 8px 12px; max-width: 92%; width: max-content; font: 800 21px/1.3 var(--body); box-shadow: 5px 5px 0 rgba(0,0,0,.3); transition: transform .25s cubic-bezier(.3,1.6,.5,1); z-index: 3; }
.react.show { transform: translateX(-50%) scale(1); }
.react.bad { background: #ffd9d4; border-color: #8a1f2a; }
.r-face { font-size: 30px; }
.win-counter { background: linear-gradient(#c88a52 0 8px, #9a6438 8px, #7c4f2c); padding-top: 6px; box-shadow: inset 0 10px 14px -10px rgba(0,0,0,.45); }
.win-note { text-align: center; margin: 0; padding: 4px 12px 14px; font-weight: 800; font-size: 16px; color: var(--cream); min-height: 38px; }
.st-window .bag-tag { color: #f2d9b8; }
.st-window .bag.full .bag-tag { color: #bff5cf; }
.st-window .bag.full { background: rgba(255,255,255,.06); }

/* ---------- hint, toasts, overlay ---------- */
.hint { position: fixed; z-index: 80; pointer-events: none; background: #fff4cf; color: var(--ink); border: 3px solid var(--ink); border-radius: 12px; padding: 9px 12px; font: 800 18px/1.35 var(--body); box-shadow: 0 6px 0 rgba(0,0,0,.35); text-align: center; animation: hintIn .25s; }
.hint.mistake { background: #ffd9d4; border-color: #8a1f2a; }
.hint-arrow { position: absolute; width: 14px; height: 14px; background: inherit; border: inherit; border-width: 0 3px 3px 0; transform: translateX(-50%) rotate(45deg); }
.hint[data-side="top"] .hint-arrow { bottom: -9px; }
.hint[data-side="bottom"] .hint-arrow { top: -9px; transform: translateX(-50%) rotate(225deg); }
.hint[data-side="none"] .hint-arrow { display: none; }
.hint-on { outline: 3px dashed var(--yellow); outline-offset: 3px; animation: ring 1s ease-in-out infinite; }
.car.hint-on { outline: none; }
.car.hint-on .car-body { filter: drop-shadow(0 0 6px var(--yellow)); }

#toasts { position: fixed; top: 64px; left: 10px; right: 10px; z-index: 70; display: flex; flex-direction: column; gap: 6px; pointer-events: none; max-width: 500px; margin: 0 auto; }
.toast { display: flex; gap: 10px; align-items: center; background: rgba(27,22,64,.96); border: 2px solid var(--line); border-radius: 12px; padding: 8px 12px; font-weight: 700; animation: toastIn .3s cubic-bezier(.3,1.4,.5,1); box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.toast.out { opacity: 0; transform: translateY(-10px); transition: .35s; }
.toast b { display: block; font-size: 17px; }
.toast small { display: block; font-size: 14px; color: #e6e1ff; margin-top: 2px; }
.toast u { text-decoration: none; font-weight: 800; color: var(--yellow); }
.toast .q { display: block; margin-top: 4px; font-weight: 800; color: #ffd0c8; }
.toast.ok { border-color: var(--ok); }
.toast.ok b { color: #a8f0bd; }
.toast.bad { border-color: var(--bad); background: rgba(70,18,40,.97); }
.toast.bad b { color: #ffb0a6; }
.t-car { width: 52px; flex: none; }
.conn { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 90; background: var(--bad); color: #fff; font-weight: 800; padding: 6px 14px; border-radius: 99px; }

.overlay { position: absolute; inset: 56px 0 0; z-index: 20; display: grid; place-items: center; background: rgba(20,18,54,.78); pointer-events: none; }
.overlay.going { animation: fadeOut .6s forwards; }
.ov-card { text-align: center; padding: 20px; }
.ov-top { font-size: 20px; font-weight: 800; margin: 0; }
.ov-top b { color: var(--yellow); }
.ov-num { font: 900 140px/1.1 var(--display); color: var(--yellow); text-shadow: 0 7px 0 var(--red-dark); }
.ov-num.beat { animation: pop .5s; }
.ov-sub { color: var(--teal); font-weight: 800; margin: 0; }

/* ---------- results ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0 12px; }
.stat { background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 10px 6px; text-align: center; }
.stat b { display: block; font: 900 52px/1.1 var(--display); }
.stat span { font-weight: 700; font-size: 14px; color: var(--muted); }
.stat.ok b { color: #8be0a4; } .stat.bad b { color: #ff9c92; } .stat.miss b { color: var(--muted); }
.moment { margin-top: 4px; }
.moment .mono { margin: 0 0 8px; font-size: 12px; text-align: right; direction: rtl; letter-spacing: .05em; }
.moment-row { display: flex; gap: 12px; align-items: center; }
.moment-car { width: 92px; flex: none; }
.moment h3 { margin: 0 0 4px; font-family: var(--display); font-weight: 900; font-size: 26px; color: var(--yellow); }
.moment p { margin: 0; font-weight: 700; font-size: 16px; }
.moment .q { display: inline-block; margin-top: 8px; background: var(--cream); color: var(--ink); font-weight: 800; padding: 6px 12px; border-radius: 8px; border: 2px solid var(--ink); }
.moment.mixup { border-color: var(--bad); }
.cars-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 14px 0 0; }
.mini { position: relative; width: 52px; }
.mini i { position: absolute; top: -8px; left: -2px; font-style: normal; font-weight: 800; font-size: 14px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; }
.mini.ok i { background: var(--ok); color: #0d2b16; } .mini.bad i { background: var(--bad); color: #fff; } .mini.miss { opacity: .45; } .mini.miss i { background: #6d728c; }
.next-role { text-align: center; color: var(--teal); font-weight: 800; margin-top: 14px; }
.next-role b { color: var(--yellow); }

/* ---------- motion ---------- */
@keyframes idle { 50% { transform: translateY(-1px); } }
@keyframes bob { 50% { transform: translateY(-2px); } }
@keyframes beat { 50% { transform: scale(1.08); } }
@keyframes pop { 0% { transform: scale(.85); } 55% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes drop { 0% { transform: translateY(-120px); opacity: .4; } 70% { transform: translateY(4px); opacity: 1; } 100% { transform: none; } }
@keyframes fill { 0% { transform: scale(1); } 35% { transform: scale(1.18, .86); } 70% { transform: scale(.95, 1.08); } 100% { transform: none; } }
@keyframes press { 50% { transform: translateY(4px) scale(.97); box-shadow: 0 1px 0 #1d1840; } }
@keyframes glow { 50% { background: rgba(246,207,110,.2); } }
@keyframes ring { 50% { outline-color: rgba(246,207,110,.35); } }
@keyframes hintIn { from { opacity: 0; transform: translateY(6px); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(-14px) scale(.96); } }
@keyframes ticketIn { from { transform: translateY(-40px) rotate(-4deg); opacity: 0; } }
@keyframes stamp { from { transform: rotate(-14deg) scale(2.2); opacity: 0; } }
@keyframes hover { 50% { transform: translateY(-4px); } }
@keyframes fadeOut { to { opacity: 0; } }
.shake { animation: shake .35s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .car { transition-duration: .4s; } .lid, .hero-car, .can-pack .bag { animation: none !important; } }
@media (max-height: 760px) {
  .st-order { grid-template-rows: auto minmax(200px, 1fr) auto 168px; }
  .st-kitchen { grid-template-rows: auto 40px minmax(150px, 1fr) auto auto; }
  .st-window { grid-template-rows: auto minmax(220px, 1fr) auto; }
  .tray { height: 74px; } .tray-art { width: 64%; } .tray-lbl { font-size: 14px; }
  .bags { padding: 6px 10px 8px; }
  .bag-art { width: 50px; } .bag-n { top: 22px; font-size: 26px; } .bag[data-state="packed"] .bag-n { top: 24px; } .bag[data-state="flat"] .bag-n { top: 44px; font-size: 17px; }
  .order-btn { height: 62px; font-size: 28px; }
  .counter-front { height: 18px; }
  .readout { transform: scale(.85); margin: -4px 0; }
  .stack-wrap { width: min(38vw, 168px, calc((100dvh - 380px) * .62)); }
  .lid { margin-bottom: 8px; }
  .pass .car { bottom: 2px; }
}

/* order chips + mini burger */
.chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.ch { font-style: normal; font-weight: 800; font-size: 13px; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.ch.meat { background: #6a3520; color: #fff; }
.ch.on { background: #ffe08a; color: #4a3200; }
.ch.off { background: #ece4d4; color: #8a8094; }
.mini-burger { display: inline-flex; flex-direction: column-reverse; width: 54px; flex: none; }
.mini-burger .mb-l { display: block; margin-top: -2px; }
.mini-burger svg { display: block; width: 100%; height: auto; }
.bubble { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.bb-pic { display: flex; align-items: flex-end; gap: 8px; }
.bb-pic .chips { flex-direction: column; align-items: stretch; }
.ticket { grid-template-columns: 46px 1fr; grid-template-areas: "car name" "burger order"; }
.tk-burger { grid-area: burger; }
.tk-burger .mini-burger { width: 44px; }
.tk-order { display: flex; flex-direction: column; line-height: 1.2; }
.tk-order small { font-size: 13px; font-weight: 700; }
.toast.say .q { font-size: 18px; }
/* exit */
.exit { font-size: 18px; }
.btn.link { background: none; box-shadow: none; color: var(--muted); font-size: 15px; padding: 10px; margin-top: 14px; text-decoration: underline; text-underline-offset: 4px; }
.sheet { border: 0; padding: 0; margin: auto; background: none; color: inherit; width: min(360px, calc(100% - 40px)); max-width: none; max-height: calc(100% - 40px); overflow: visible; animation: hintIn .2s; }
.sheet::backdrop { background: rgba(12,10,36,.7); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sheet-card { width: 100%; background: var(--panel); border: 2px solid var(--line); border-radius: 18px; padding: 20px; text-align: center; display: grid; gap: 10px; }
.sheet-card h3 { margin: 0; font-size: 24px; font-weight: 900; color: var(--yellow); }
.sheet-card p { margin: 0 0 6px; color: var(--muted); font-weight: 700; }
@media (max-width: 370px) { .badge { font-size: 14px; padding: 5px 7px; } .score { font-size: 15px; gap: 5px; } .mute { width: 36px; height: 36px; } }

/* ---------- v4: till, caddy, patience, compact notes, fits short Android screens ---------- */
.station { height: 100dvh; padding-bottom: env(safe-area-inset-bottom); }
.st-order { grid-template-rows: auto minmax(0, 1fr) auto auto; }
.st-window { grid-template-rows: auto minmax(0, 1fr) auto auto; }
.st-kitchen { grid-template-rows: auto 58px minmax(0, 1fr) auto auto; }
.scene { min-height: 0; }

/* speech: lines appear one by one; a change of mind is highlighted */
.bubble { font-size: 21px; padding: 8px 12px; gap: 2px; max-width: min(260px, 80vw); }
.bubble.pop { animation: pop .35s; }
.bb-line { display: block; }
.bb-line.twist { color: #b8323a; font-size: 23px; }
.dots { display: inline-flex; gap: 4px; justify-content: center; padding: 2px 0 0; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); opacity: .3; animation: dot 1s infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 30% { opacity: 1; transform: translateY(-3px); } }
.bubble.ask { font-size: 20px; bottom: calc(100% + 20px); }

/* patience */
.pat { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); width: 64%; height: 9px; border-radius: 5px; background: rgba(20,18,54,.75); border: 1.5px solid rgba(255,255,255,.35); display: block; }
.pat b { display: block; height: 100%; border-radius: 4px; background: #8be0a4; transition: width .25s linear, background .3s; margin-inline-start: auto; }
.pat.low b { background: var(--bad); }
.pat.low { animation: beat .6s infinite; }
.pat-face { position: absolute; right: -24px; top: -8px; font-size: 18px; font-style: normal; }
.st-window .pat { top: -16px; height: 11px; }

/* 🎧 till */
.till { padding: 8px 10px 8px; background: var(--panel2); border-top: 2px solid var(--line); display: grid; gap: 8px; transition: opacity .2s; }
.till.idle .till-keys { opacity: .55; }
.till-keys { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; background: #1d1840; border-radius: 12px; padding: 3px; gap: 3px; }
.key { height: 50px; border-radius: 10px; background: #3b3470; border: 2px solid #5a5296; font-weight: 800; font-size: 19px; color: #e6e1ff; box-shadow: 0 3px 0 #1d1840; transition: background .12s, transform .07s; }
.seg .key { box-shadow: none; border-width: 0; }
.key.on { background: var(--yellow); color: var(--ink); border-color: var(--yellow-edge); }
.key.tg.on[data-k="cheese"] { background: #f6c84a; border-color: #c9921f; }
.key.tg.on[data-k="pickles"] { background: #8fd16a; border-color: #467a26; color: #13300a; }
.key.pressed { animation: press .16s; }
.till-row { display: grid; grid-template-columns: 1fr 1.15fr; gap: 8px; align-items: stretch; }
.lcd { display: grid; place-items: center; background: #0f2a26; color: #8ff0c8; border: 2px solid #2c6450; border-radius: 10px; font: 800 19px/1.2 var(--body); text-shadow: 0 0 8px rgba(143,240,200,.45); padding: 4px 8px; text-align: center; }
.lcd.blank { color: #4d8a76; text-shadow: none; font-size: 16px; }
.till .order-btn { height: 56px; font-size: 27px; padding: 6px; }

/* rail: one row of tickets that scrolls sideways */
.rail { padding: 6px 10px 8px; }
.rail-head { font-size: 14px; }
.rail-head::after { content: none; }
.tickets { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 6px 2px 4px; min-height: 76px; border-top: 5px solid #8d92ab; margin-top: 4px; scrollbar-width: none; flex: none; }
.tickets::-webkit-scrollbar { display: none; }
.tickets .empty { margin: 14px auto; font-size: 14px; }
.ticket { flex: none; width: 128px; grid-template-columns: 40px 1fr; grid-template-areas: "car name" "order order"; padding: 4px 8px 5px; gap: 0 6px; border-top-width: 5px; }
.tk-name { font-size: 14px; }
.tk-order { flex-direction: row; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.tk-order b { font-size: 19px; }
.tk-order small { font-size: 12px; }
.ticket.is-gone .stamp { color: #c8323a; font-size: 26px; }

/* 🛍️ caddy of extras */
.caddy { display: flex; gap: 8px; padding: 6px 10px; background: linear-gradient(#3b3168, #2e2756); border-top: 2px solid var(--line); }
.extra { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 58px; border-radius: 12px; background: var(--panel); border: 2px solid var(--line); box-shadow: 0 4px 0 #1d1840; }
.ex-art { width: 34px; flex: none; }
.ex-lbl { font-weight: 800; font-size: 16px; }
.ex-ok { position: absolute; top: -8px; left: -6px; width: 24px; height: 24px; border-radius: 50%; background: var(--ok); color: #0d2b16; font: 900 15px/24px var(--body); font-style: normal; text-align: center; transform: scale(0); transition: transform .2s cubic-bezier(.3,1.6,.5,1); }
.extra.on { background: #4b4290; border-color: var(--yellow); }
.extra.on .ex-ok { transform: scale(1); }
.extra.pressed { animation: press .16s; }

/* small notes: one at a time, short; on the order phone they sit low so they never cover the car or its words */
#toasts { top: 62px; gap: 4px; }
.toast { padding: 5px 10px; gap: 8px; border-radius: 10px; font-size: 14px; }
.toast b { font-size: 15px; line-height: 1.35; }
.toast small { font-size: 13px; }
.toast .t-car { width: 36px; }
.toast.say .q { display: inline; font-size: 15px; }
.say-ic { font-size: 18px; }
body[data-st="order"] #toasts { top: auto; bottom: calc(8px + env(safe-area-inset-bottom)); }
body[data-st="window"] #toasts { top: 58px; }

/* results: where it went wrong */
.slips { margin-top: 12px; }
.slips .mono { margin: 0 0 6px; text-align: right; direction: rtl; letter-spacing: .05em; font-size: 12px; }
.slips ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.slips li { font-weight: 700; font-size: 15px; }
.slips b { color: var(--yellow); }

/* short screens (phones with big browser bars, folding phones' cover screens) */
@media (max-height: 700px) {
  .key { height: 44px; font-size: 17px; }
  .till .order-btn { height: 50px; font-size: 24px; }
  .lcd { font-size: 17px; }
  .tickets { min-height: 66px; }
  .ticket { width: 118px; }
  .tk-car { width: 34px; }
  .extra { height: 50px; } .ex-art { width: 28px; }
  .bubble { font-size: 19px; }
  .win-sign { display: none; }
  .win-open { inset: 8px 10px 26px; }
  .win-note { padding: 2px 10px 8px; min-height: 0; font-size: 14px; }
  .hud { height: 50px; padding: 5px 8px; }
  .overlay { inset: 50px 0 0; }
  .st-kitchen { grid-template-rows: auto 36px minmax(0, 1fr) auto auto; }
}
@media (max-height: 600px) {
  .rail-head { display: none; }
  .till { gap: 6px; padding: 6px 8px; }
  .key { height: 40px; }
  .till .order-btn { height: 44px; font-size: 22px; }
  .bags { padding: 4px 8px 6px; }
  .bag-art { width: 42px; } .bag-n { top: 17px; font-size: 22px; } .bag[data-state="packed"] .bag-n { top: 19px; } .bag[data-state="flat"] .bag-n { top: 36px; font-size: 15px; }
  .bag-tag { font-size: 11px; min-height: 14px; }
  .tray { height: 62px; }
}
.hint { font-size: 16px; padding: 7px 10px; }
.car .bubble { bottom: calc(100% + 30px); }
.car.leaving .pat { display: none; }
.key { white-space: nowrap; padding: 0 4px; }
.key.tg { font-size: 17px; }
.ticket.done { opacity: .55; transition: opacity 1.2s .6s; }

/* ---------- call panel (who is talking and what they say) ---------- */
.st-order { grid-template-rows: auto minmax(0, 1fr) auto auto auto; }
.st-window { grid-template-rows: auto minmax(0, 1fr) auto auto auto; }
.call { display: flex; gap: 12px; align-items: center; min-height: 92px; padding: 8px 12px; background: linear-gradient(#2e2870, #262150); border-top: 2px solid var(--line); direction: rtl; }
.call-face { flex: none; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: #7a6299; border: 3px solid #fff4cf; box-shadow: 0 0 0 4px rgba(127,212,200,.3); display: grid; place-items: center; font-size: 28px; }
.call-face svg { width: 100%; height: 100%; }
.call-face.empty { background: #3b3470; border-color: #5a5296; box-shadow: none; opacity: .7; }
.call-body { flex: 1; min-width: 0; }
.call-top { display: flex; align-items: center; gap: 8px; }
.call-who { font: 800 14px var(--body); color: var(--teal); }
.call-state { margin-inline-start: auto; font: 800 12px var(--body); background: var(--red); color: #fff; border-radius: 99px; padding: 2px 9px; }
.call.done .call-state { background: var(--teal); color: var(--ink); }
.call-line { margin: 2px 0 0; font: 800 20px/1.35 var(--body); color: #fff; }
.call-line.twist { color: var(--yellow); }
.call-line.pop { animation: lineIn .35s cubic-bezier(.3,1.5,.5,1); }
@keyframes lineIn { from { opacity: 0; transform: translateY(8px); } }
.call-sub { margin: 2px 0 0; font: 700 13px var(--body); color: var(--muted); }
.call .dots i { background: #fff; }
.call.idle .call-who { color: var(--muted); }
.call.ringing .call-face { animation: ring2 .9s ease-in-out infinite; }
@keyframes ring2 { 50% { box-shadow: 0 0 0 9px rgba(127,212,200,.15); } }
.wave { display: inline-flex; gap: 3px; align-items: center; height: 16px; }
.wave i { display: block; width: 3px; height: 6px; border-radius: 2px; background: var(--teal); }
.call.talking .wave i { animation: wave .7s ease-in-out infinite; }
.wave i:nth-child(2) { animation-delay: .1s; height: 12px; } .wave i:nth-child(3) { animation-delay: .2s; height: 15px; } .wave i:nth-child(4) { animation-delay: .3s; height: 9px; } .wave i:nth-child(5) { animation-delay: .4s; }
@keyframes wave { 50% { transform: scaleY(1.9); } }
.call.done .wave { opacity: .35; }
.win-call { min-height: 80px; }
.win-call .call-face { width: 54px; height: 54px; }
@media (max-height: 700px) {
  .call { min-height: 80px; padding: 6px 10px; gap: 10px; }
  .call-face { width: 52px; height: 52px; }
  .call-line { font-size: 18px; }
  .win-call { min-height: 70px; } .win-call .call-face { width: 46px; height: 46px; }
}
@media (max-height: 600px) { .call-sub { display: none; } .call-line { font-size: 17px; line-height: 1.3; } }

/* ---------- v5: till burgers, bags, home pills ---------- */
.seg .key { display: flex; align-items: center; justify-content: center; gap: 6px; }
.k-burger { display: inline-flex; width: 26px; }
.k-burger .mini-burger { width: 26px; }
.key[data-p="2"] .k-burger, .key[data-p="2"] .k-burger .mini-burger { width: 28px; }
.bag .bag-n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.bag-art { width: 66px; }
.bag-art .steam path { animation: steam 1.8s ease-in-out infinite; }
.bag-art .steam path:nth-child(2) { animation-delay: .4s; } .bag-art .steam path:nth-child(3) { animation-delay: .8s; }
@keyframes steam { 0% { opacity: 0; transform: translateY(4px); } 40% { opacity: .7; } 100% { opacity: 0; transform: translateY(-6px); } }
.bag-tag { font-size: 12px; padding: 1px 8px; border-radius: 99px; }
.bag.full .bag-tag { background: rgba(92,191,122,.18); color: #a8f0bd; }
.st-window .win-counter .bags { padding-top: 10px; }
.st-window .bag { background: radial-gradient(ellipse 60% 18% at 50% 92%, rgba(0,0,0,.18), transparent); }
.st-window .bag.full { background: radial-gradient(ellipse 70% 45% at 50% 70%, rgba(246,207,110,.28), transparent 70%); }
.st-window .bag.full .bag-tag { background: var(--ok); color: #0d2b16; }
.st-window .bag:not(.full) .bag-tag { color: #e8c896; opacity: .8; }
.meta-pills { display: flex; justify-content: center; gap: 8px; margin: 12px 0 18px; flex-wrap: wrap; }
.pill { display: grid; grid-template-columns: auto auto; grid-template-areas: "n i" "l l"; align-items: center; gap: 0 6px; background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 6px 14px 6px; min-width: 92px; justify-content: center; box-shadow: 0 4px 0 #1d1840; }
.pill b { grid-area: n; font: 900 30px/1.1 var(--display); color: var(--yellow); }
.pill i { grid-area: i; font-style: normal; font-size: 15px; letter-spacing: -3px; }
.pill span { grid-area: l; font-weight: 800; font-size: 13px; color: var(--teal); text-align: center; }
@media (max-height: 600px) { .bag-art { width: 46px; } }
@media (max-height: 760px) and (min-height: 601px) { .bag-art { width: 54px; } }

/* ---------- v5: till burgers, bags, home pills ---------- */
.seg .key { display: flex; align-items: center; justify-content: center; gap: 6px; }
.k-burger { display: inline-flex; width: 26px; }
.k-burger .mini-burger { width: 26px; }
.bag .bag-n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.bag-art { width: 66px; }
.bag-art .steam path { animation: steam 1.8s ease-in-out infinite; }
.bag-art .steam path:nth-child(2) { animation-delay: .4s; } .bag-art .steam path:nth-child(3) { animation-delay: .8s; }
@keyframes steam { 0% { opacity: 0; transform: translateY(4px); } 40% { opacity: .7; } 100% { opacity: 0; transform: translateY(-6px); } }
.bag-tag { font-size: 12px; padding: 1px 8px; border-radius: 99px; }
.bag.full .bag-tag { background: rgba(92,191,122,.18); color: #a8f0bd; }
.st-window .win-counter .bags { padding-top: 10px; }
.st-window .bag.full { background: radial-gradient(ellipse 70% 45% at 50% 70%, rgba(246,207,110,.28), transparent 70%); }
.st-window .bag.full .bag-tag { background: var(--ok); color: #0d2b16; }
.st-window .bag:not(.full) .bag-tag { color: #e8c896; opacity: .8; }
.meta-pills { display: flex; justify-content: center; gap: 8px; margin: 12px 0 18px; flex-wrap: wrap; }
.pill { display: grid; grid-template-columns: auto auto; grid-template-areas: "n i" "l l"; align-items: center; gap: 0 6px; background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 6px 14px; min-width: 92px; justify-content: center; box-shadow: 0 4px 0 #1d1840; }
.pill b { grid-area: n; font: 900 30px/1.1 var(--display); color: var(--yellow); }
.pill i { grid-area: i; font-style: normal; font-size: 15px; letter-spacing: -3px; }
.pill span { grid-area: l; font-weight: 800; font-size: 13px; color: var(--teal); text-align: center; }
@media (max-height: 760px) { .bag-art { width: 54px; } }
@media (max-height: 600px) { .bag-art { width: 46px; } }
.foot { font-size: 13px; font-weight: 700; letter-spacing: 0; }

/* ---------- v6: kitchen call-outs from a bot, big window requests ---------- */
.st-kitchen { grid-template-rows: auto 58px auto minmax(0, 1fr) auto auto; }
@media (max-height: 700px) { .st-kitchen { grid-template-rows: auto 36px auto minmax(0, 1fr) auto auto; } }
.calls { display: flex; gap: 6px; align-items: center; overflow-x: auto; scrollbar-width: none; background: #241f4d; padding: 0 8px; }
.calls::-webkit-scrollbar { display: none; }
.calls.on { padding: 6px 8px; border-bottom: 2px solid var(--line); }
.calls-lbl { flex: none; font: 800 12px var(--body); color: var(--teal); }
.callchip { flex: none; display: flex; align-items: center; gap: 5px; background: var(--cream); color: var(--ink); border-radius: 8px; padding: 3px 8px; font: 700 14px var(--body); border-top: 4px solid var(--c, #999); }
.callchip b { font-weight: 900; }
.cc-car { width: 30px; }
.callchip[data-color="red"] { --c: #d9605a; } .callchip[data-color="green"] { --c: #5cbf7a; } .callchip[data-color="yellow"] { --c: #f4c55f; } .callchip[data-color="blue"] { --c: #4f7fd9; }
.callchip[data-color="white"] { --c: #c9c3b8; } .callchip[data-color="purple"] { --c: #9a6ad0; } .callchip[data-color="orange"] { --c: #ee8a3c; } .callchip[data-color="pink"] { --c: #ec8fb3; }

.want { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 84px; padding: 6px 8px; border-radius: 14px; background: var(--yellow); color: var(--ink); box-shadow: 0 4px 0 var(--yellow-edge); animation: wantPulse 1.2s ease-in-out infinite; }
.want-art { width: 32px; }
.want b { font: 900 18px/1.1 var(--body); }
.want i { font-style: normal; font: 800 12px var(--body); color: #8a3a1c; }
.want.got { background: var(--ok); box-shadow: 0 4px 0 #3c8f56; animation: none; }
.want.got i { color: #0d2b16; }
.want.none { background: #3b3470; color: #e6e1ff; box-shadow: 0 4px 0 #1d1840; animation: none; min-width: 0; }
.want.none b { font-size: 14px; }
.want.pop { animation: pop .4s, wantPulse 1.2s .4s ease-in-out infinite; }
@keyframes wantPulse { 50% { transform: scale(1.06); } }
.call-sub b { color: var(--yellow); }
.extra.asked { border-color: var(--yellow); background: #5a4c9e; animation: glow2 1s ease-in-out infinite; }
@keyframes glow2 { 50% { box-shadow: 0 4px 0 #1d1840, 0 0 0 4px rgba(246,207,110,.45); } }
@media (max-height: 700px) { .want { min-width: 70px; padding: 4px 6px; } .want-art { width: 24px; } .want b { font-size: 15px; } }
.calls { flex-wrap: wrap; overflow: visible; }
.callchip { font-size: 13px; padding: 2px 7px; gap: 4px; }
.cc-car { width: 24px; }
body[data-st="kitchen"] #toasts { top: var(--ktop, 200px); max-width: 360px; }
body[data-st="kitchen"] .toast { opacity: .96; }

/* ---------- results v2 ---------- */
.results { padding-top: 22px; }
.res-head { text-align: center; }
.res-eyebrow { display: inline-block; font: 800 14px var(--body); color: var(--teal); background: rgba(127,212,200,.12); border: 1px solid rgba(127,212,200,.35); padding: 4px 12px; border-radius: 99px; }
.res-verdict { margin: 10px 0 4px; font: 900 34px/1.25 var(--display); color: var(--yellow); text-shadow: 0 3px 0 var(--red-dark); }
.res-hero { display: flex; align-items: center; gap: 16px; background: linear-gradient(160deg, #3a3280, #2a2458); border: 1px solid #5a5296; border-radius: 22px; padding: 16px; margin-top: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.ring { position: relative; width: 128px; flex: none; }
.ring svg { display: block; width: 100%; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 12; }
.ring-fg { fill: none; stroke: #8be0a4; stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset 1.1s cubic-bezier(.3,.8,.3,1); }
.ring-in { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring-in b { font: 900 44px/1 var(--display); color: #fff; }
.ring-in span { font: 700 13px var(--body); color: var(--muted); }
.res-stats { flex: 1; display: grid; gap: 8px; }
.rs { display: grid; grid-template-columns: 28px auto 1fr; align-items: center; gap: 8px; background: rgba(255,255,255,.05); border-radius: 12px; padding: 6px 10px; }
.rs i { font-style: normal; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 14px; }
.rs.ok i { background: var(--ok); color: #0d2b16; } .rs.bad i { background: var(--bad); color: #fff; } .rs.miss i { background: #4a4380; }
.rs b { font: 900 24px/1 var(--display); }
.rs span { font: 700 14px var(--body); color: var(--muted); }
.rs.ok b { color: #8be0a4; } .rs.bad b { color: #ff9c92; } .rs.miss b { color: #cfc9ef; }
.strip { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 14px 2px 4px; }
.strip::-webkit-scrollbar { display: none; }
.tile { position: relative; flex: none; width: 52px; height: 40px; border-radius: 10px; background: rgba(255,255,255,.06); display: grid; place-items: center; border-bottom: 3px solid transparent; }
.tile.ok { border-bottom-color: var(--ok); } .tile.bad { border-bottom-color: var(--bad); background: rgba(226,87,76,.12); } .tile.miss { opacity: .5; border-bottom-color: #6d728c; }
.tile-car { width: 42px; }
.tile i { position: absolute; top: -6px; left: -4px; font-style: normal; font: 900 11px/18px var(--body); width: 18px; height: 18px; border-radius: 50%; text-align: center; }
.tile.ok i { background: var(--ok); color: #0d2b16; } .tile.bad i { background: var(--bad); color: #fff; } .tile.miss i { background: #4a4380; color: #fff; }
.mo { margin-top: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 14px; }
.mo.mixup { border-color: rgba(226,87,76,.6); background: linear-gradient(160deg, #3a2550, #2d2856); }
.mo.fast { border-color: rgba(139,224,164,.5); }
.mo-top { display: flex; align-items: center; gap: 12px; }
.mo-face { width: 52px; height: 52px; flex: none; border-radius: 50%; overflow: hidden; border: 3px solid #fff4cf; background: #7a6299; }
.mo-face svg { width: 100%; height: 100%; }
.mo-tag { font: 800 12px var(--body); color: var(--gold); }
.mo h3 { margin: 2px 0 0; font: 900 21px/1.3 var(--display); color: #fff; }
.mo-text { margin: 10px 0 0; font: 700 15px/1.6 var(--body); color: #e6e1ff; }
.cmp { margin-top: 12px; display: grid; gap: 6px; }
.cmp-row { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 8px; background: rgba(255,255,255,.06); border-radius: 10px; padding: 7px 10px; }
.cmp-k { font: 800 13px var(--body); color: var(--muted); }
.cmp-v { font: 800 16px var(--body); color: #fff; }
.cmp-row.bad { background: rgba(226,87,76,.16); }
.cmp-row.bad .cmp-v { color: #ffb0a6; }
.mo-quote { margin: 12px 0 0; display: inline-block; background: var(--cream); color: var(--ink); font: 800 16px var(--body); padding: 6px 14px; border-radius: 16px 16px 16px 4px; }
.slip-list { margin-top: 12px; background: var(--panel2); border-radius: 18px; padding: 12px 14px; display: grid; gap: 10px; }
.slip-list h4 { margin: 0; font: 800 14px var(--body); color: var(--gold); }
.slip { display: flex; gap: 10px; align-items: center; }
.slip-ic { width: 34px; height: 34px; flex: none; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-items: center; font-size: 17px; }
.slip b { display: block; font: 800 15px var(--body); }
.slip small { display: block; font: 600 13px var(--body); color: var(--muted); }
.results .btn.big { margin-top: 16px; font-size: 22px; }
.strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px 6px; overflow: visible; }
.tile { width: auto; }

/* =====================================================================
   v7 redesign: one layout for every station (scene / call + coach line / action dock),
   a colour per station, drawn icons, hints that never float over buttons.
   ===================================================================== */
:root {
  --yellow: #ffc93c; --yellow-edge: #e8891a; --cream: #fff1d0; --ticket: #fff8e7; --ticket-ink: #2a1f55;
  --c-order: #4fd8cb; --c-kitchen: #ff8a3d; --c-window: #ff7ab6;
  --good: #3ddc97; --wrong: #ff5a5f;
  --accent: var(--yellow);
}
body[data-st="order"] { --accent: var(--c-order); }
body[data-st="kitchen"] { --accent: var(--c-kitchen); }
body[data-st="window"] { --accent: var(--c-window); }
[data-st="order"] { --st: var(--c-order); } [data-st="kitchen"] { --st: var(--c-kitchen); } [data-st="window"] { --st: var(--c-window); }
svg.ic { display: inline-block; width: 1.25em; height: 1.25em; flex: none; vertical-align: -.25em; }
.btn.primary { background: var(--yellow); box-shadow: 0 5px 0 var(--yellow-edge); color: #3a1e00; }
.btn.primary:active { box-shadow: 0 2px 0 var(--yellow-edge); }

/* ---------- top bar ---------- */
.hud { gap: 10px; padding: 6px 10px; height: 54px; background: rgba(20,15,51,.92); border-bottom: 1px solid var(--line); }
.hud .badge { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: var(--night); border: 0; border-radius: 14px; padding: 6px 12px 6px 10px; font-weight: 800; font-size: 16px; }
.hud .badge svg.ic { width: 20px; height: 20px; }
.clock-t { font-weight: 800; font-size: 23px; color: #fff; }
.clock-bar { max-width: 140px; height: 6px; }
.clock.hurry .clock-t { color: var(--wrong); }
.score { display: none; }
.menu-btn { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; gap: 3px; }
.menu-btn i { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }
.rush-tag { flex: none; background: var(--wrong); color: #fff; font-weight: 800; font-size: 13px; border-radius: 99px; padding: 3px 10px; animation: beat .6s infinite; }
.menu-card { gap: 8px; text-align: right; }
.menu-row { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; background: rgba(255,255,255,.06); font-weight: 800; font-size: 17px; }
.menu-row svg.ic { width: 24px; height: 24px; color: var(--muted); }
.menu-row.danger { color: #ffb0a6; } .menu-row.danger svg.ic { color: #ffb0a6; }

/* ---------- the coach line: the one home for hints and notes ---------- */
.coach { position: relative; height: 52px; padding: 5px 10px; display: flex; flex-direction: column; justify-content: center; background: var(--panel2); }
.coach .hint { position: static; z-index: auto; inset: auto; width: auto !important; height: 100%; display: flex; align-items: center; gap: 8px; padding: 4px 12px; border: 0; border-radius: 12px; box-shadow: none; background: var(--cream); color: var(--ticket-ink); font: 700 14.5px/1.3 var(--body); text-align: right; animation: none; }
.coach .hint.fresh { animation: lineIn .3s cubic-bezier(.3,1.5,.5,1); }
.coach .hint[hidden] { display: none; }
.hint-ic { flex: none; width: 24px; height: 24px; color: #e8434f; display: none; }
.hint-ic svg { width: 100%; height: 100%; }
.hint[data-kind="shout"] .hint-ic { display: block; }
.hint[data-kind="mistake"], .coach .hint.mistake { background: #ffd9d4; color: #6a1020; }
.hint[data-kind="tip"] { background: rgba(255,241,208,.92); }
#toasts { pointer-events: none; }
.coach #toasts { position: static; inset: auto; margin: 0; max-width: none; height: 100%; display: block; }
.coach:has(#toasts .toast) .hint { display: none; }
.coach #toasts .toast { height: 100%; margin: 0; padding: 4px 10px; border-radius: 12px; gap: 8px; box-shadow: none; overflow: hidden; }
.coach .toast b { font-size: 14.5px; line-height: 1.25; }
.coach .toast small { font-size: 12.5px; margin: 0; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coach .toast > div { min-width: 0; }
.coach .toast .t-car { width: 38px; }
.toast.combo { border-color: var(--yellow); background: linear-gradient(90deg, #4a2a10, #3a2470); }
.toast.combo b { color: var(--yellow); }
.toast.combo svg.ic { width: 26px; height: 26px; color: var(--c-kitchen); }
body:not([data-st]) #toasts, body[data-st=""] #toasts { top: 14px; }
.hint-on { outline: 3px dashed var(--yellow); outline-offset: 2px; }

/* ---------- station grids ---------- */
.st-order { grid-template-rows: auto minmax(0, 1fr) auto auto auto auto; }
.st-kitchen { grid-template-rows: auto 46px auto minmax(0, 1fr) auto auto auto; }
.st-window { grid-template-rows: auto minmax(0, 1fr) auto auto auto auto auto; }

/* call panel: the station colour rings the face */
.call { background: var(--plum, #2a2163); border-top: 1px solid var(--line); min-height: 84px; }
.call-face { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); background: var(--cream); }
.call-face.empty { color: var(--accent); background: var(--panel); border-color: var(--line); padding: 14px; }
.call-face.empty svg { width: 100%; height: 100%; }
.call-who { color: var(--accent); font-weight: 800; }
.wave i { background: var(--accent); }
.call-line { font-weight: 700; font-size: 19px; }
.call-line.twist { color: #ff8f8f; }

/* ---------- 🎧 till ---------- */
.till { background: var(--panel2); border-top: 0; padding: 4px 10px 8px; gap: 8px; }
.till-keys { grid-template-columns: 1fr; gap: 8px; }
.seg { background: var(--night); border-radius: 14px; padding: 4px; }
.seg .key { height: 46px; border-radius: 11px; background: transparent; color: var(--muted); font-size: 18px; }
.seg .key.on { background: var(--ticket); color: var(--ticket-ink); }
.tgs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.key.tg { height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: 14px; background: var(--panel); border: 2px solid var(--line); box-shadow: 0 3px 0 #1d1840; font-size: 17px; color: #fff; }
.key.tg svg.ic { width: 30px; height: 24px; }
.tg-st { margin-inline-start: auto; font-style: normal; font-size: 12px; font-weight: 800; border-radius: 99px; padding: 2px 9px; background: rgba(255,255,255,.1); color: var(--muted); }
.key.tg.on, .key.tg.on[data-k="cheese"], .key.tg.on[data-k="pickles"] { background: #1e4a47; border-color: var(--good); color: #fff; }
.key.tg.on .tg-st { background: var(--good); color: var(--night); }
.till-row { grid-template-columns: 1fr 1fr; }
.lcd { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; background: var(--ticket); color: var(--ticket-ink); border: 0; border-radius: 12px; text-shadow: none; padding: 4px 12px; font: inherit; text-align: right; }
.lcd b { font: 800 19px/1.2 var(--display); }
.lcd small { font: 700 13px/1.2 var(--body); color: #6b5fa8; }
.lcd.blank { background: transparent; border: 2px dashed var(--line); }
.lcd.blank small { color: var(--muted); font-size: 14px; }
.till .order-btn { font-weight: 800; font-size: 24px; height: 54px; }
.order-btn.off { background: #3b3470; color: #8f88c0; box-shadow: 0 5px 0 #241e52; }

/* rail: one row of small tickets in car colours */
.rail { padding: 0 10px 8px; background: var(--panel2); }
.tickets { border-top: 0; margin-top: 0; padding: 2px 0; min-height: 0; gap: 6px; }
.tickets .empty { margin: 6px auto; font-size: 13px; color: var(--dim, #8a80c4); }
.ticket { width: auto; display: flex; align-items: center; gap: 5px; padding: 3px 9px 3px 5px; border-radius: 99px; border: 0; border-inline-start: 5px solid var(--c, #999); background: rgba(255,248,231,.12); color: #fff; box-shadow: none; }
.ticket .tk-car { width: 30px; }
.ticket .tk-name { font-size: 12.5px; font-weight: 800; }
.ticket .tk-order { display: flex; flex-direction: row; gap: 4px; align-items: baseline; }
.ticket .tk-order b { font: 800 13px var(--body); }
.ticket .tk-order small { font-size: 11px; color: var(--muted); }
.ticket .stamp { position: static; font-size: 14px; transform: none; animation: none; }
.ticket.is-ok .stamp { color: var(--good); } .ticket.is-bad .stamp, .ticket.is-gone .stamp { color: var(--wrong); }

/* ---------- 🍔 kitchen ---------- */
.pass-lbl { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; }
.pass-lbl svg.ic { color: var(--c-window); }
.calls-lbl { display: inline-flex; align-items: center; gap: 4px; }
.calls-lbl svg.ic { color: var(--c-order); }
.readout { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 2; }
.ro-name { font: 800 20px/1.2 var(--display); background: var(--ticket); color: var(--ticket-ink); box-shadow: 0 3px 0 rgba(0,0,0,.25); padding: 6px 14px; border-radius: 12px; }
.ro-name.zero { background: rgba(255,255,255,.1); color: var(--muted); box-shadow: none; font-size: 17px; }
.ro-name.warn { background: #ffd9d4; color: #6a1020; }
.counter { padding-top: 54px; }
.trays { background: var(--panel2); border-top: 0; padding: 4px 10px 8px; }
.tray { border-radius: 16px; border: 0; background: var(--panel); box-shadow: 0 4px 0 #1d1840; }
.tray-undo { background: transparent; border: 2px dashed var(--line); box-shadow: none; color: var(--muted); }
.undo-ic svg { width: 36px; height: 28px; display: block; }
.can-pack .bag:not(.full) { border-color: transparent; background: none; animation: none; }
.can-pack .bag.next { border-color: var(--yellow); background: rgba(255,201,60,.08); animation: glow 1.2s ease-in-out infinite; }

/* ---------- 🛍️ window ---------- */
.steps { list-style: none; margin: 0; padding: 6px 10px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; background: var(--panel2); }
.steps li { display: flex; align-items: center; justify-content: center; gap: 5px; border-radius: 10px; padding: 5px 4px; font-size: 12.5px; font-weight: 800; background: rgba(255,255,255,.06); color: var(--muted); white-space: nowrap; }
.steps li i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: rgba(255,255,255,.12); }
.steps li.done { background: rgba(61,220,151,.14); color: var(--good); }
.steps li.done i { background: var(--good); color: var(--night); }
.steps li.now { background: var(--c-window); color: var(--night); }
.steps li.now i { background: var(--night); color: var(--c-window); }
.steps.idle { opacity: .5; }
.want { background: var(--ticket); color: var(--ticket-ink); box-shadow: 0 3px 0 rgba(0,0,0,.25); border: 3px solid var(--yellow); animation: wantPulse 1.2s ease-in-out infinite; min-width: 78px; }
.want i { color: var(--good); font-size: 16px; font-weight: 900; }
.want.got { background: var(--ticket); border-color: var(--good); box-shadow: 0 3px 0 rgba(0,0,0,.25); }
.want.none { background: var(--panel); color: #fff; border: 2px solid var(--line); }
.want.none i { color: var(--muted); font-size: 11px; font-weight: 700; }
.call-sub svg.ic { color: var(--c-order); }
.caddy { background: var(--panel2); border-top: 0; padding: 4px 10px 8px; }
.extra { border: 0; border-radius: 16px; background: var(--panel); box-shadow: 0 4px 0 #1d1840; }
.extra.on { background: #1e4a47; outline: 2px solid var(--good); }
.extra.asked { outline: 3px solid var(--yellow); background: #4a3e8e; }
.st-window .bag:not(.full) { opacity: .5; }
.react .r-face { font-weight: 900; }
.react.ok .r-face { color: #2f9a52; } .react.bad .r-face { color: #c8323a; }

/* role intro card (first practice) */
.intro { position: absolute; inset: 54px 0 0; z-index: 30; display: grid; place-items: center; padding: 18px; background: rgba(15,11,40,.82); backdrop-filter: blur(3px); animation: hintIn .25s; }
.intro.going { animation: fadeOut .3s forwards; }
.intro-card { width: min(340px, 100%); background: var(--panel); border: 2px solid var(--st); border-radius: 24px; padding: 22px 20px 18px; text-align: center; display: grid; gap: 6px; justify-items: center; box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.intro-ic { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--st); color: var(--night); }
.intro-ic svg.ic { width: 38px; height: 38px; }
.intro-top { margin: 6px 0 0; color: var(--muted); font-weight: 700; }
.intro-card h2 { margin: 0; font: 900 38px/1.2 var(--display); color: var(--st); }
.intro-card ol { margin: 6px 0 10px; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 8px; text-align: right; width: 100%; }
.intro-card li { counter-increment: s; display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; }
.intro-card li::before { content: counter(s); flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); font-weight: 800; font-size: 14px; }
.intro-note { margin: 4px 0 0; font-size: 13px; color: var(--muted); font-weight: 700; }

/* rush hour: the last 20 seconds */
body.rush .sky { filter: saturate(1.5) hue-rotate(-18deg) brightness(1.08); transition: filter 1s; }
body.rush .hud { box-shadow: inset 0 -3px 0 var(--wrong); }

/* ---------- home ---------- */
.home .hero { margin-top: 6px; }
.home .title { margin-top: 6px; }
/* small «يلا!» speech bubble at the top right of the home title (brand: Yalla Thru) */
/* tagline: one line, no full stop, yellow dots between the three jobs */
.home .sub.tagline { white-space: nowrap; font-weight: 800; color: var(--cream); font-size: clamp(13px, min(4.4vw, 2.6svh), 19px); }
.sub .sep { display: inline-block; width: .34em; height: .34em; border-radius: 50%; background: var(--yellow); margin: 0 .45em; vertical-align: .14em; }
.title-w { position: relative; display: inline-block; }
.title-w .yalla { position: absolute; top: -.2em; right: -.2em; width: .54em; height: auto; overflow: visible; pointer-events: none; text-shadow: none; }
.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 16px; }
.how-st { display: grid; justify-items: center; gap: 2px; padding: 10px 4px; border-radius: 16px; background: rgba(255,255,255,.05); text-align: center; }
.how-ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--st); color: var(--night); margin-bottom: 2px; }
.how-ic svg.ic { width: 24px; height: 24px; }
.how-st b { font-weight: 800; font-size: 15px; }
.how-st small { color: var(--muted); font-size: 12.5px; font-weight: 700; }
.home-actions { display: grid; gap: 12px; max-width: 520px; margin: 0 auto; }
.join-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.join-row .btn { width: auto; padding-inline: 26px; }
.home-actions .err { margin: 0; min-height: 18px; text-align: center; }

/* ---------- lobby ---------- */
.lobby { display: flex; flex-direction: column; gap: 10px; }
.title-xs { margin: 2px 0 0; text-align: center; font: 900 34px/1.3 var(--display); color: var(--yellow); text-shadow: 0 3px 0 var(--red-dark); }
.room { grid-template-columns: 1fr auto; grid-template-areas: "code qr"; padding: 12px 14px; gap: 12px; }
.room-code { display: grid; gap: 4px; justify-items: start; }
.room-code .lbl { margin: 0; font-size: 13px; color: var(--muted); }
.room-code b { font: 800 40px/1 var(--display); letter-spacing: .14em; direction: ltr; }
.qr { width: 96px; height: 96px; }
.chip-btn { border-radius: 99px; padding: 6px 14px; background: #453a78; border: 1px solid #7e72c4; font-weight: 800; font-size: 13.5px; }
.name-row { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 6px 6px 6px 12px; }
.name-row label { font-weight: 800; font-size: 14px; color: var(--muted); flex: none; }
.name-row input { flex: 1; min-width: 0; background: transparent; border: 0; color: #fff; font: 700 17px var(--body); padding: 6px 4px; outline: none; }
.name-row input::placeholder { color: #6f68a0; }
.lobby .h2 { margin: 6px 2px 0; font-size: 17px; }
.lobby .seats { gap: 8px; }
.lobby .seat { grid-template-columns: 46px 1fr auto; padding: 8px 10px; border-radius: 16px; border: 2px solid transparent; background: rgba(255,255,255,.05); box-shadow: none; gap: 0 10px; }
.lobby .seat-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--st); color: var(--night); font-size: 0; }
.lobby .seat-ic svg.ic { width: 26px; height: 26px; }
.lobby .seat-name { font-weight: 800; font-size: 19px; }
.lobby .seat-job { font-size: 12.5px; }
.lobby .seat-state { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; background: var(--panel); color: #fff; }
.lobby .seat.free { border: 2px dashed var(--line); }
.lobby .seat.free .seat-ic { background: color-mix(in srgb, var(--st) 22%, transparent); color: var(--st); }
.lobby .seat.free .seat-state { background: transparent; border: 1.5px solid var(--line); color: var(--muted); }
.lobby .seat.mine { border-color: var(--yellow); background: rgba(255,201,60,.08); }
.lobby .seat.mine .seat-state { background: var(--yellow); color: #3a1e00; }
.lobby .seat.taken { opacity: 1; }
.lobby .seat.taken .seat-state { background: var(--panel); color: #fff; }
.lobby .seat.bot .seat-state { background: rgba(79,216,203,.18); color: var(--c-order); }
.bots-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin: 0; padding: 6px; font-size: 14px; text-decoration: none; color: var(--c-order); }
.lobby-go { display: grid; gap: 6px; margin-top: 4px; }
.lobby-go .btn.big { margin-top: 0; }
.lobby .wait { margin: 0; font-size: 14px; }
.lobby .exit-link { margin-top: 0; }

/* ---------- results ---------- */
.res-head { display: grid; justify-items: center; gap: 2px; }
.res-title { margin: 0; font: 900 46px/1.25 var(--display); color: var(--yellow); text-shadow: 0 4px 0 var(--red-dark); }
.stars { display: flex; gap: 6px; align-items: flex-end; }
.stars span { color: #3a2e7a; }
.stars span.on { color: var(--yellow); animation: pop .5s backwards; }
.stars span:nth-child(2).on { animation-delay: .15s; } .stars span:nth-child(3).on { animation-delay: .3s; }
.stars svg.ic { width: 44px; height: 44px; }
.stars span:nth-child(2) svg.ic { width: 56px; height: 56px; }
.res-verdict { margin: 4px 0 0; font: 800 18px var(--body); color: #fff; text-shadow: none; }
.res-big { display: grid; justify-items: center; margin-top: 10px; }
.res-big b { font: 900 54px/1 var(--display); color: #fff; }
.res-big span { color: var(--muted); font-weight: 700; font-size: 14px; }
.st-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.st-card { display: grid; justify-items: center; gap: 1px; padding: 10px 4px; border-radius: 16px; background: rgba(255,255,255,.05); border-top: 4px solid var(--st); text-align: center; }
.st-card svg.ic { width: 24px; height: 24px; color: var(--st); }
.st-card b { font-weight: 800; font-size: 14px; }
.st-card .n { font: 900 28px/1.1 var(--display); }
.st-card small { font-size: 11.5px; color: var(--muted); font-weight: 700; }
.res-missed { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px 0 0; color: #ffb0a6; font-weight: 700; font-size: 14px; }
.res-missed svg.ic { color: var(--wrong); }
details.slip-list summary { cursor: pointer; font: 800 14px var(--body); color: var(--gold); list-style: none; display: flex; justify-content: space-between; }
details.slip-list summary::-webkit-details-marker { display: none; }
details.slip-list summary span { background: rgba(255,255,255,.1); color: #fff; border-radius: 99px; padding: 0 9px; }
details.slip-list[open] summary { margin-bottom: 4px; }
.slip-ic { color: var(--st, var(--wrong)); }
.slip-ic svg.ic { width: 18px; height: 18px; }
.res-go { display: grid; gap: 8px; margin-top: 16px; }
.res-go .btn.big { margin-top: 0; }
.swap { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin: 0; font-weight: 800; font-size: 13.5px; }
.swap span { color: var(--st); }

/* ---------- small screens: everything still fits, nothing scrolls ---------- */
@media (max-height: 700px) {
  .coach { height: 46px; padding: 4px 8px; }
  .coach .hint, .coach .toast b { font-size: 13.5px; }
  .seg .key { height: 40px; } .key.tg { height: 42px; }
  .till .order-btn { height: 48px; font-size: 22px; }
  .hud { height: 50px; }
  .intro { inset: 50px 0 0; }
  .call { min-height: 72px; }
  .steps li { padding: 3px 4px; }
  .st-kitchen { grid-template-rows: auto 36px auto minmax(0, 1fr) auto auto auto; }
}
@media (max-height: 600px) {
  .coach { height: 42px; }
  .seg .key { height: 36px; } .key.tg { height: 38px; }
  .till .order-btn { height: 44px; font-size: 20px; }
  .lcd b { font-size: 16px; }
  .ticket .tk-car { width: 24px; }
  .intro-card { padding: 16px; } .intro-card h2 { font-size: 30px; } .intro-card li { font-size: 14.5px; }
}
@media (max-height: 700px) {
  .lobby { gap: 8px; padding-top: 8px; }
  .title-xs { font-size: 28px; }
  .room { padding: 10px 12px; } .room-code b { font-size: 32px; } .qr { width: 78px; height: 78px; }
  .lobby .seat { padding: 6px 10px; } .lobby .seat-ic { width: 38px; height: 38px; } .lobby .seat-name { font-size: 17px; }
  .lobby .btn.big { padding: 12px; font-size: 22px; }
}
/* an empty coach line folds away, so there is never a blank band; the buttons stay put at the bottom */
/* the restaurant always fits under the top bar: its width is capped by the scene's height (sign included) */
.scene.outside { container-type: size; }
.scene.outside .shop { width: min(78%, 340px, calc((100cqh - var(--road-h, 96px) - 6px) * 1.75)); }

/* ---------- installed as an app: keep clear of the notch and status bar ---------- */
.station { padding-top: env(safe-area-inset-top); }
.page { padding-top: calc(14px + env(safe-area-inset-top)); padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
.intro { inset: calc(54px + env(safe-area-inset-top)) 0 0; }
.overlay { inset: calc(56px + env(safe-area-inset-top)) 0 0; }
.install-btn { display: inline-flex; align-items: center; gap: 8px; margin: 14px auto 0; padding: 8px 16px; border-radius: 99px; background: rgba(255,255,255,.06); border: 1px solid var(--line); font-weight: 800; font-size: 14px; color: #fff; }
.install-btn img { width: 26px; height: 26px; border-radius: 7px; }
.home .install-row { display: flex; justify-content: center; }
.ios-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; text-align: right; }
.ios-steps li { display: flex; gap: 10px; align-items: center; font-weight: 700; }
.ios-steps b { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); font-size: 14px; }
.ios-steps small { display: block; margin-top: 3px; font-size: 13px; font-weight: 600; color: var(--muted); }
.ios-ic { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: -.4em; margin: 0 2px; padding: 3px; border-radius: 8px; background: rgba(255,255,255,.12); fill: none; stroke: #4da3ff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ios-dots { font-style: normal; letter-spacing: 1px; padding: 0 6px; border-radius: 8px; background: rgba(255,255,255,.12); }
@media (display-mode: standalone) { .install-row { display: none !important; } }

/* ---------- steady layout: nothing on a station screen changes height while you play ---------- */
/* the coach line always keeps its place; with nothing to say it shows the station's job, quietly */
.coach-idle { display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 12px; border-radius: 12px; border: 1.5px dashed var(--line); color: var(--muted); font-weight: 700; font-size: 13.5px; }
.coach-idle svg.ic { color: var(--accent); width: 18px; height: 18px; }
.coach:has(#hint:not([hidden])) .coach-idle, .coach:has(#toasts .toast) .coach-idle { display: none; }
.call { height: 92px; min-height: 0; overflow: hidden; }
.win-call { height: 92px; }
.tickets { height: 40px; align-items: center; }
/* the window's customer reaction sits at the top of the window frame, never above it */
.react { top: 10px; bottom: auto; max-width: 88%; font-size: 17px; padding: 6px 12px; transform: translateX(-50%) scale(0); transform-origin: 50% 0; }
.react.show { transform: translateX(-50%) scale(1); }
@media (max-height: 700px) { .call, .win-call { height: 78px; } }
@media (max-height: 600px) { .call, .win-call { height: 70px; } }

.st-kitchen .calls { height: 0; padding: 0; overflow: hidden; border: 0; }
.st-kitchen.bot-order .calls { display: flex; height: 38px; padding: 0 8px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid var(--line); }
.call { padding-block: 4px; }
.win-call .call-line { font-size: 16px; line-height: 1.3; }
.win-call .call-who { font-size: 13px; }
.call-line { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ---------- home fits one screen, copyright included ---------- */
.home { display: flex; flex-direction: column; min-height: 100svh; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
.home .hero { width: min(100%, calc(26svh * 2.17)); margin-inline: auto; }
.home .title { font-size: clamp(54px, min(19vw, 12svh), 112px); margin-top: 2px; line-height: 1.2; }
.home .sub { font-size: clamp(15px, 2.6svh, 19px); margin: 2px 0 0; }
.home .how { margin: 12px 0; }
.home .err:empty { min-height: 0; }
.home .install-btn { margin-top: 10px; }
.home .foot { margin-top: 12px; padding-top: 0; }
@media (max-height: 700px) {
  .home .how { margin: 8px 0; gap: 6px; }
  .how-st { padding: 6px 4px; }
  .how-ic { width: 32px; height: 32px; border-radius: 10px; }
  .how-ic svg.ic { width: 20px; height: 20px; }
  .how-st small { display: none; }
  .home-actions { gap: 8px; }
  .home .btn { padding: 12px; }
  .home .code-in { padding: 9px; }
  .home .install-btn { margin-top: 8px; padding: 6px 14px; }
  .home .foot { margin-top: 8px; }
}
@media (max-height: 620px) {
  .home { padding-top: calc(8px + env(safe-area-inset-top)); }
  .home .hero { width: min(100%, calc(21svh * 2.17)); }
  .home .title { font-size: clamp(50px, 11svh, 112px); }
}

/* ---------- home fills the phone: full-size scene and title, free space shared evenly ---------- */
.home .hero { width: min(100%, calc(34svh * 2.17)); }
.home .title { font-size: clamp(54px, min(20vw, 13svh), 120px); }
.home .title, .home .how, .home .home-actions, .home .foot { margin-top: auto; }
/* tall phones: keep the gaps modest and centre the whole page instead of stretching it */
@media (min-height: 701px) {
  .home { justify-content: center; }
  .home .title, .home .how, .home .home-actions, .home .foot { margin-top: clamp(8px, 4.5svh - 18px, 30px); }
}
.home .sub { margin-bottom: 4px; }
.home .how { margin-bottom: 0; }
.home .home-actions { padding-top: 14px; }
.home .foot { padding-top: 14px; }
@media (max-height: 700px) { .home .home-actions, .home .foot { padding-top: 10px; } }
@media (max-height: 620px) {
  .home .hero { width: min(100%, calc(24svh * 2.17)); }
  .home .title { font-size: clamp(50px, 11.5svh, 112px); }
}

/* ---------- home never scrolls: phones with the browser bar showing (about 700–800px tall) ---------- */
@media (max-height: 800px) { .how-st small { display: none; } }
@media (min-height: 701px) and (max-height: 800px) {
  .home { justify-content: flex-start; }
  .home .title, .home .how, .home .home-actions, .home .foot { margin-top: auto; }
}
.home { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }

/* ---------- orders as pictures: same slots, same place, every time ---------- */
.slots { display: inline-flex; align-items: center; gap: 6px; direction: rtl; flex: none; }
.sl { position: relative; display: grid; place-items: center; width: 46px; height: 40px; border-radius: 12px; border: 2px solid var(--line); background: var(--panel2); flex: none; }
.sl svg.ic { width: 32px; height: 24px; }
.sl.on { border-color: #5cbf7a; background: #213f3a; }
.sl.off svg.ic { opacity: .45; }
.sl.off::after { content: ''; position: absolute; inset: 18% 10%; background: linear-gradient(to top left, transparent calc(50% - 2.5px), var(--bad) calc(50% - 2.5px), var(--bad) calc(50% + 2.5px), transparent calc(50% + 2.5px)); border-radius: 4px; }
.sl-n { position: absolute; top: -7px; left: -7px; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 99px; background: var(--yellow); color: var(--ink); font: 900 13px/20px var(--body); text-align: center; box-shadow: 0 1px 0 rgba(0,0,0,.35); }
.sl-n.warn { background: var(--bad); color: #fff; }
.sl-x { border-style: dashed; border-color: var(--c-window); background: #3a2244; }
.sl-x svg { height: 32px; width: auto; }
.sl.chg { box-shadow: 0 0 0 3px var(--yellow); animation: slChg .7s ease-out 2; }
@keyframes slChg { 50% { transform: scale(1.12); } }
.slots.sm { gap: 4px; }
.slots.sm .sl, .sl.sm1 { width: 32px; height: 28px; border-radius: 8px; border-width: 1.5px; }
.slots.sm .sl svg.ic { width: 22px; height: 17px; }
.slots.sm .sl-n { top: -6px; left: -6px; min-width: 16px; height: 16px; font-size: 11px; line-height: 16px; padding: 0 3px; }
.slots.sm .sl.off::after { inset: 16% 8%; }
.slots.sm .sl-x svg, .sl.sm1 svg { height: 22px; }
/* the customer's call shows the order as pictures */
.call-line.vis { display: flex; align-items: center; gap: 8px; margin-top: 6px; overflow: visible; -webkit-line-clamp: unset; }
.call-line.vis .slots { padding-top: 4px; }
.say-no, .say-but { font: 900 15px var(--body); color: var(--yellow); flex: none; }
.say-ref { width: 54px; flex: none; display: block; }
.say-ref svg { width: 100%; height: auto; display: block; }
@media (max-height: 700px) { .call .slots:not(.sm) .sl { width: 40px; height: 34px; } .call .slots:not(.sm) .sl svg.ic { width: 28px; height: 21px; } }
/* tickets, the live ticket, the kitchen label and the bot's calls use the small slots */
.tk-order { display: flex; align-items: center; }
.lcd .slots { margin-inline: auto; }
.ro-name .slots { vertical-align: middle; }
.callchip .slots { margin-inline-start: 4px; }
.cmp-v { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.call-line.vis { margin-top: 4px; }
.call-line.vis .slots { padding-top: 6px; }
.say-ref { width: 62px; }
@media (max-height: 600px) {
  .call-line.vis { margin-top: 0; }
  .call-line.vis .slots { padding-top: 5px; }
  .call .slots:not(.sm) .sl { width: 36px; height: 30px; border-radius: 9px; }
  .call .slots:not(.sm) .sl svg.ic { width: 25px; height: 19px; }
  .call .sl-n { top: -6px; left: -6px; min-width: 17px; height: 17px; font-size: 11.5px; line-height: 17px; }
}
.sl.chg { box-shadow: none; border-color: var(--yellow); border-width: 3px; animation: slChg2 .6s ease-in-out 3; }
@keyframes slChg2 { 50% { background: #5a4a1a; } }

/* the start button and the code row span the same width as the station cards, dead centre */
.home .home-actions { width: 100%; max-width: none; margin-inline: 0; align-self: stretch; }
.home .home-actions .btn { width: 100%; }
.home .join-row .btn { width: auto; }
/* clear breathing room between the start button and the code row */
.home .home-actions { gap: 18px; }
.home .home-actions .err:empty { display: none; }
@media (max-height: 620px) { .home .home-actions { gap: 14px; } }

/* ---------- the customer's order, big and clear: larger slots, «سنقل / دبل» written under the patty ---------- */
.call { height: 112px; }
.slots.big { gap: 8px; }
.slots.big .sl { width: 58px; height: 54px; border-radius: 14px; border-width: 2.5px; }
.slots.big .sl svg.ic { width: 40px; height: 30px; }
.slots.big .sl-patties { grid-template-rows: 1fr auto; padding-top: 4px; }
.slots.big .sl-patties svg.ic { width: 34px; height: 24px; }
.sl-w { font: 900 12.5px/1 var(--body); color: var(--yellow); padding-bottom: 4px; }
.slots.big .sl-n { min-width: 22px; height: 22px; font-size: 14px; line-height: 22px; top: -8px; left: -8px; }
.slots.big .sl.off::after { inset: 20% 12%; }
.call-line.vis .slots.big { padding-top: 8px; }
@media (max-height: 700px) {
  .call { height: 96px; }
  .call .slots.big .sl { width: 50px; height: 46px; }
  .call .slots.big .sl svg.ic { width: 34px; height: 25px; }
  .call .slots.big .sl-patties svg.ic { width: 28px; height: 19px; }
  .sl-w { font-size: 11px; padding-bottom: 3px; }
}
@media (max-height: 600px) {
  .call { height: 88px; }
  .call .slots.big .sl { width: 46px; height: 42px; }
  .call-line.vis .slots.big { padding-top: 6px; }
}

/* the button to press next really glows: a soft pulsing yellow halo instead of a dashed line */
.hint-on:not(.car):not(.scene):not(.rail):not(.till):not(.counter):not(.win-open) { outline: 3px solid var(--yellow); outline-offset: 2px; animation: glowPulse 1.1s ease-in-out infinite; position: relative; z-index: 2; }
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 201, 60, .0), 0 0 10px 2px rgba(255, 201, 60, .55); }
  50% { box-shadow: 0 0 0 6px rgba(255, 201, 60, .25), 0 0 22px 8px rgba(255, 201, 60, .7); }
}
@media (prefers-reduced-motion: reduce) { .hint-on { animation: none !important; } }

/* ---------- «same as the blue car, but…»: the car looks like its ticket on the rail ---------- */
.say-same { font: 900 15px var(--body); color: var(--yellow); flex: none; }
.say-ref { flex: none; display: flex; flex-direction: column; align-items: center; width: auto; background: var(--cream); color: var(--ink); border-radius: 4px 4px 8px 8px; border-top: 5px solid var(--c, #999); padding: 2px 8px 3px; box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.say-ref-car { width: 50px; display: block; }
.say-ref-car svg { width: 100%; height: auto; display: block; }
.say-ref b { font: 900 12px/1.1 var(--body); }
.say-ref[data-color="red"] { --c: #d9605a; } .say-ref[data-color="green"] { --c: #5cbf7a; } .say-ref[data-color="yellow"] { --c: #f4c55f; } .say-ref[data-color="blue"] { --c: #4f7fd9; }
.say-ref[data-color="white"] { --c: #c9c3b8; } .say-ref[data-color="purple"] { --c: #9a6ad0; } .say-ref[data-color="orange"] { --c: #ee8a3c; } .say-ref[data-color="pink"] { --c: #ec8fb3; }
/* every big slot says «مع / بدون» under it, and a changed slot keeps its green/red with a yellow ring outside */
.slots.big .sl { grid-template-rows: 1fr auto; padding-top: 4px; }
.slots.big .sl svg.ic { width: 34px; height: 24px; }
.sl-w.yes { color: #8ee0a5; } .sl-w.no { color: #ff8e85; }
.sl.off .sl-w { position: relative; z-index: 1; }
.sl.chg, .sl.on.chg { border-color: inherit; border-width: 2.5px; box-shadow: none; outline: 3px solid var(--yellow); outline-offset: 2px; animation: slChg3 .6s ease-in-out 3; }
.sl.on.chg { border-color: #5cbf7a; } .sl.off.chg { border-color: var(--line); }
@keyframes slChg3 { 50% { outline-color: transparent; } }
@media (max-height: 700px) { .call .slots.big .sl svg.ic { width: 28px; height: 19px; } .say-ref-car { width: 42px; } }
.say-ref { flex-direction: row; gap: 4px; padding: 2px 8px 2px 6px; border-top-width: 4px; align-self: center; }
.say-ref-car { width: 40px; }
.say-ref b { font-size: 13px; }
/* the red «without» line crosses the picture, not the word under it */
.slots.big .sl.off::after { inset: 10% 14% 36% 14%; }

/* ---------- bag stickers: each packed bag shows the car it's for ---------- */
.st-window .bag.full .bag-tag:has(.bag-sticker) { background: none; padding: 0; }
.bag-sticker { display: inline-flex; align-items: center; gap: 3px; background: var(--cream); color: var(--ink); border-radius: 99px; padding: 1px 7px 1px 4px; border: 2px solid var(--c, #999); }
.bag-sticker .bs-car { width: 26px; display: block; }
.bag-sticker .bs-car svg { width: 100%; height: auto; display: block; }
.bag-sticker b { font: 900 11.5px/1.2 var(--body); }
.bag-sticker[data-color="red"] { --c: #d9605a; } .bag-sticker[data-color="green"] { --c: #5cbf7a; } .bag-sticker[data-color="yellow"] { --c: #f4c55f; } .bag-sticker[data-color="blue"] { --c: #4f7fd9; }
.bag-sticker[data-color="white"] { --c: #c9c3b8; } .bag-sticker[data-color="purple"] { --c: #9a6ad0; } .bag-sticker[data-color="orange"] { --c: #ee8a3c; } .bag-sticker[data-color="pink"] { --c: #ec8fb3; }
/* the bag for the car waiting at the window lifts a little */
.st-window .bag.mine .bag-art { transform: translateY(-4px); filter: drop-shadow(0 0 8px rgba(255, 201, 60, .7)); transition: transform .2s; }

/* ---------- kitchen: the orders to make, big and clear at the top ---------- */
.st-kitchen.bot-order .calls { height: 74px; padding: 0 8px; gap: 8px; align-items: center; background: #241f4d; border-bottom: 2px solid var(--line); }
.st-kitchen .callchip { padding: 4px 8px 4px 6px; gap: 6px; border-radius: 10px; border-top-width: 5px; opacity: .6; transform: scale(.92); transform-origin: center; }
.st-kitchen .callchip.now { opacity: 1; transform: none; box-shadow: 0 0 0 3px var(--yellow), 0 0 16px rgba(255, 201, 60, .5); }
.st-kitchen .cc-car { display: flex; flex-direction: column; align-items: center; width: 44px; }
.st-kitchen .cc-car svg { width: 100%; height: auto; display: block; }
.st-kitchen .cc-car b { font: 900 11px/1.1 var(--body); white-space: nowrap; }
.st-kitchen .callchip .slots.big .sl { width: 46px; height: 46px; background: #2d2856; }
.st-kitchen .callchip .slots.big .sl svg.ic { width: 30px; height: 21px; }
.st-kitchen .callchip .slots.big .sl.on { background: #213f3a; }
.st-kitchen .calls-lbl { font-size: 14px; color: var(--muted); }
@media (max-height: 640px) {
  .st-kitchen.bot-order .calls { height: 62px; }
  .st-kitchen .callchip .slots.big .sl { width: 40px; height: 40px; }
  .st-kitchen .callchip .slots.big .sl svg.ic { width: 26px; height: 18px; }
  .st-kitchen .cc-car { width: 36px; }
}
.st-kitchen.bot-order .calls { padding-block: 6px; overflow-y: visible; }
.st-kitchen .callchip.now { box-shadow: 0 0 0 3px var(--yellow); }

/* ======================================================================
   3-day match + drinks bar (days 4–6)
   ====================================================================== */

/* ======================================================================
   3-day match · coins · restaurants · drinks bar (days 4–6) · tour
   ====================================================================== */
:root { --c-drink: #3aa79a; --coin: #ffc93c; }

/* top bar: which day it is */
.day-pill { flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 4px 9px; border-radius: 99px; background: var(--panel); border: 1px solid var(--line); font: 800 13px var(--body); color: var(--muted); white-space: nowrap; }
.day-pill b { color: #fff; font-weight: 900; }
.day-pill svg.ic { width: 15px; height: 15px; }
.ov-day { display: block; font: 800 14px var(--body); color: var(--yellow); margin-bottom: 2px; }

/* order slots: the drink */
.sl-drink.on { border-color: var(--c-drink); background: #1c3e44; }
.slots .sl-drink svg.ic { width: 28px; }

/* 🎧 till: one drink at a time, tap again for none */
.drk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.key.dk { height: 42px; display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 16px; border-radius: 11px; background: #2a2a5e; border-color: #3f3f80; }
.key.dk svg.ic { width: 26px; height: 22px; }
.key.dk.on { background: #1f5852; border-color: var(--c-drink); color: #fff; box-shadow: 0 3px 0 #10302c, 0 0 0 2px var(--c-drink); }
.st-order.has-drinks .seg .key { height: 42px; }
.st-order.has-drinks .key.tg { height: 42px; }

/* 🛍️ the drinks bar row */
.dbar { display: grid; grid-template-columns: auto 1fr 1fr 1fr 64px; align-items: center; gap: 6px; padding: 6px 10px; background: linear-gradient(90deg, #1c3a46, #232a5c); border-top: 2px solid var(--c-drink); }
.dbar-lbl { writing-mode: vertical-rl; transform: rotate(180deg); font: 900 11px var(--body); color: var(--c-drink); letter-spacing: .5px; }
.dtap { height: 54px; border-radius: 13px; background: var(--panel); box-shadow: 0 4px 0 #13112e; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: #fff; }
.dtap svg.ic { width: 30px; height: 26px; }
.dtap b { font: 800 13px/1 var(--body); }
.dtap.on { outline: 2px solid var(--c-drink); background: #1f4a4a; }
.dtap.pressed { animation: press .16s; }
.cupspot { height: 60px; border-radius: 14px; border: 2px dashed #4f6a86; background: rgba(0,0,0,.18); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; color: var(--muted); }
.cupspot .cup-art { width: 34px; height: 40px; display: grid; place-items: center; }
.cupspot .cup-art svg { width: 100%; height: 100%; }
.cupspot .cup-art svg.ic { width: 26px; height: 22px; opacity: .7; }
.cupspot .cup-lbl { font: 800 11px/1.1 var(--body); }
.cupspot.pouring { border-style: solid; border-color: var(--yellow); color: var(--yellow); }
.cupspot.full { border-style: solid; border-color: var(--good); background: rgba(61,220,151,.12); color: var(--good); }
/* the car's ticket: its drink, as التسليم sees it */
.dticket { flex: none; display: flex; flex-direction: column; align-items: center; gap: 0; min-width: 64px; padding: 3px 6px 4px; border-radius: 8px 8px 10px 10px; background: var(--ticket); color: var(--ticket-ink); border-top: 5px solid var(--c, #999); box-shadow: 0 3px 0 rgba(0,0,0,.25); position: relative; }
.dticket small { font: 800 9.5px var(--body); color: #7a6f9a; }
.dticket .dt-art svg.ic { width: 30px; height: 26px; }
.dticket .dt-art.off { opacity: .45; }
.dticket b { font: 900 13px/1.1 var(--body); }
.dticket i { position: absolute; top: -9px; left: -7px; width: 20px; height: 20px; border-radius: 50%; background: var(--good); color: #0d2b16; font: 900 12px/20px var(--body); text-align: center; font-style: normal; }
.dticket i:empty { display: none; }
.dticket.pouring { box-shadow: 0 0 0 2px var(--yellow); }
.dticket.got { box-shadow: 0 0 0 2px var(--good); }
.dticket[data-color="red"] { --c: #d9605a; } .dticket[data-color="green"] { --c: #5cbf7a; } .dticket[data-color="yellow"] { --c: #f4c55f; } .dticket[data-color="blue"] { --c: #4f7fd9; }
.dticket[data-color="white"] { --c: #c9c3b8; } .dticket[data-color="purple"] { --c: #9a6ad0; } .dticket[data-color="orange"] { --c: #ee8a3c; } .dticket[data-color="pink"] { --c: #ec8fb3; }
.win-call .dticket + .want { margin-inline-start: 6px; }
.car-drink { position: absolute; top: -6px; right: 8%; width: 34px; height: 34px; border-radius: 50%; background: var(--ticket); display: grid; place-items: center; box-shadow: 0 2px 0 rgba(0,0,0,.3); border: 2px solid var(--c-drink); z-index: 2; }
.car-drink svg.ic { width: 24px; height: 20px; }
.st-window.has-drinks .caddy .extra { height: 48px; }
@media (max-height: 700px) {
  .dtap { height: 46px; } .dtap svg.ic { width: 24px; height: 20px; }
  .cupspot { height: 50px; } .cupspot .cup-art { height: 32px; }
  .key.dk { height: 36px; font-size: 14px; } .st-order.has-drinks .seg .key, .st-order.has-drinks .key.tg { height: 36px; }
  .st-window.has-drinks .caddy .extra { height: 42px; }
  .dticket { min-width: 54px; } .dticket .dt-art svg.ic { width: 24px; height: 20px; }
}
@media (max-height: 600px) {
  .dbar { padding: 4px 10px; } .dtap { height: 40px; } .dtap b { font-size: 11.5px; } .cupspot { height: 42px; } .cupspot .cup-lbl { display: none; }
  .key.dk { height: 32px; } .st-order.has-drinks .seg .key, .st-order.has-drinks .key.tg { height: 32px; }
  .st-window.has-drinks .caddy .extra { height: 38px; }
}

/* practice card: what is new; first time at a station */
.intro-new { margin: 0 0 4px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 99px; background: rgba(58,167,154,.2); color: #9ff5e6; font: 800 13px var(--body); }
.intro-card .btn.ghost { margin-top: -2px; }

/* the tour: one part lit at a time */
.tour { position: fixed; inset: 0; z-index: 80; animation: hintIn .2s; }
.tour.going { animation: fadeOut .25s forwards; }
.tour-hole { position: fixed; border-radius: 16px; box-shadow: 0 0 0 9999px rgba(12,9,34,.8); outline: 3px solid var(--yellow); transition: all .3s cubic-bezier(.3,1.2,.5,1); pointer-events: none; }
.tour-tip { position: fixed; left: 16px; right: 16px; max-width: 420px; margin-inline: auto; background: var(--cream); color: var(--ticket-ink); border-radius: 18px; padding: 14px 16px 12px; box-shadow: 0 14px 40px rgba(0,0,0,.45); }
.tour-tip.fresh { animation: lineIn .3s cubic-bezier(.3,1.5,.5,1); }
.tour-tip p { margin: 0 0 10px; font: 800 17px/1.45 var(--body); }
.tour-go { display: flex; align-items: center; gap: 10px; }
.tour-n { font: 800 13px var(--body); color: #7a6f9a; }
.tour-skip { margin-inline-start: auto; font: 800 14px var(--body); color: #7a6f9a; padding: 8px; }
.tour .btn.primary { width: auto; padding: 9px 18px; font-size: 17px; margin: 0; }

/* lobby: the restaurant this team plays */
.rest-card { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border-radius: 16px; background: linear-gradient(100deg, #3a2a6e, #2b2560); border: 1.5px solid #5a4c9e; text-align: right; color: #fff; }
.rest-card:disabled { opacity: 1; }
.rc-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--yellow); color: var(--night); }
.rc-ic svg.ic { width: 24px; height: 24px; }
.rc-txt { flex: 1; display: grid; min-width: 0; }
.rc-txt small { font: 700 11.5px var(--body); color: var(--muted); }
.rc-txt > b { font: 900 18px/1.2 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-meta { display: flex; align-items: center; gap: 4px; font: 700 12.5px var(--body); color: #d9d3f5; }
.rc-meta i { font-style: normal; opacity: .5; } .rc-meta svg.ic { width: 15px; height: 15px; } .rc-meta b { font-weight: 900; color: var(--coin); }
.rc-change { flex: none; font: 800 13px var(--body); color: var(--yellow); padding: 6px 10px; border-radius: 99px; border: 1.5px solid currentColor; }
.rest-note { margin: -4px 4px 0; font: 700 13px var(--body); color: #ffd28a; }
.rest-list { display: grid; gap: 6px; max-height: 40vh; overflow-y: auto; }
.rest-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.06); border: 2px solid transparent; color: #fff; }
.rest-row.on { border-color: var(--yellow); }
.rest-row b { font: 900 17px var(--body); }
.rest-row span { display: inline-flex; align-items: center; gap: 4px; font: 700 13px var(--body); color: var(--muted); }
.rest-row i { font-style: normal; opacity: .5; } .rest-row svg.ic { width: 15px; height: 15px; }
.rest-new { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 4px; }
.rest-new input { min-width: 0; padding: 12px; border-radius: 12px; border: 2px solid var(--line); background: var(--night); color: #fff; font: 700 16px var(--body); }
.rest-new .btn { width: auto; margin: 0; padding: 10px 14px; font-size: 16px; }
.sheet-sub { margin: -4px 0 4px; color: var(--muted); font-size: 14px; }

/* results: day of the match, coins, the three days */
.res-day { margin: 0; display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 99px; background: rgba(255,255,255,.07); font: 800 13px var(--body); color: var(--muted); }
.res-day svg.ic { width: 15px; height: 15px; }
.coins-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 14px; border-radius: 16px; background: linear-gradient(100deg, rgba(255,201,60,.16), rgba(255,201,60,.05)); border: 1px solid rgba(255,201,60,.35); }
.coin-big { display: inline-flex; align-items: center; gap: 5px; }
.coin-big svg.ic { width: 30px; height: 30px; }
.coin-big b { font: 900 26px/1 var(--display); color: var(--coin); }
.coins-row small { flex: 1; font: 700 12px/1.3 var(--body); color: var(--muted); }
.coin-bank { display: inline-flex; align-items: center; gap: 4px; font: 700 13px var(--body); white-space: nowrap; }
.coin-bank b { font: 900 18px var(--body); color: #fff; }
.coin-bank svg.ic { width: 18px; height: 18px; }
.days { display: grid; grid-template-columns: repeat(3, 1fr) 1.05fr; gap: 6px; margin-top: 12px; }
.dcell, .dteam { display: grid; justify-items: center; align-content: center; gap: 1px; padding: 8px 4px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1.5px dashed var(--line); min-height: 74px; }
.dcell small, .dteam small { font: 800 12px var(--body); color: var(--muted); }
.dcell.done { border-style: solid; background: rgba(255,255,255,.07); }
.dcell.now { border-color: var(--yellow); }
.dcell b { font: 900 17px var(--body); }
.dnext { font: 800 13px var(--body); color: var(--muted); }
.dstars { display: flex; gap: 1px; }
.dstars span { width: 14px; height: 14px; color: #4a4380; } .dstars span.on { color: var(--yellow); }
.dstars svg.ic { width: 14px; height: 14px; }
.dteam { background: var(--yellow); border: 0; color: #3a1e00; }
.dteam small { color: #7a4a00; } .dteam b { font: 900 24px/1 var(--display); } .dteam span { font: 800 11px var(--body); }
.next-role { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.05); border-inline-start: 5px solid var(--st); text-align: right; }
.nr-ic { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--st); color: var(--night); }
.nr-ic svg.ic { width: 26px; height: 26px; }
.next-role small { font: 700 12px var(--body); color: var(--muted); }
.next-role > div > b { display: block; font: 900 22px/1.2 var(--display); color: var(--st); }
.next-role ol { margin: 4px 0 0; padding-inline-start: 18px; font: 700 13px/1.5 var(--body); color: #d9d3f5; }

/* end of a match: the team score, then the restaurant drawing */
.team-big { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 8px; }
.team-big b { font: 900 56px/1 var(--display); color: #fff; }
.team-big span { font: 700 14px/1.4 var(--body); color: var(--muted); }
.unlock { margin-top: 14px; display: grid; gap: 8px; justify-items: center; text-align: center; }
.unlock-scene { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden; --road-h: 18%; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.unlock-scene .skyline { height: 40%; }
.unlock-scene .palm { position: absolute; bottom: 14%; width: 15%; }
.unlock-scene .palm-b { display: none; }
.shopbar { position: absolute; left: 2%; right: 2%; bottom: 15%; }
.shopbar svg { width: 100%; height: auto; display: block; }
.bar-annex .shutter { transition: transform 1.3s cubic-bezier(.5,0,.3,1); }
.bar-annex.lit .shutter { transform: translateY(-50px); }
.bar-annex .bar-lock { transition: opacity .4s, transform .4s; transform-box: fill-box; transform-origin: center; }
.bar-annex.lit .bar-lock { opacity: 0; transform: translateY(8px); }
.bar-annex .bar-dim { transition: opacity 1s .6s; }
.bar-annex.lit .bar-dim { opacity: 0; }
.bar-annex .bar-light { transition: opacity 1s .4s; }
.bar-annex.lit .bar-light { opacity: 1; }
.bar-annex .neon { transition: fill .3s 1.1s; }
.bar-annex.lit .neon { fill: #9ff5e6; filter: drop-shadow(0 0 3px #3fe0cc) drop-shadow(0 0 7px #3fe0cc); animation: neonOn 1.4s 1.1s; }
@keyframes neonOn { 0%, 12%, 24% { opacity: 1; } 6%, 18% { opacity: .2; } }
.sparkles { position: absolute; inset: 0; pointer-events: none; }
.sparkles i { position: absolute; right: 16%; top: 30%; width: 8px; height: 8px; border-radius: 2px; background: hsl(calc(var(--i) * 36), 90%, 65%); opacity: 0; }
.unlock.lit .sparkles i { animation: spark 1.4s calc(1.2s + var(--i) * 40ms) ease-out; }
@keyframes spark { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(calc((var(--i) - 4.5) * 14px), calc(-40px - (var(--i) * 7px) % 50px)) rotate(240deg); } }
.price-tag { position: absolute; top: 8%; right: 5%; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 99px; background: rgba(20,15,51,.85); border: 1.5px solid var(--coin); font: 900 16px var(--body); color: var(--coin); }
.price-tag svg.ic { width: 18px; height: 18px; }
#unlockBody { display: grid; gap: 8px; width: 100%; }
.unlock-title { margin: 4px 0 0; font: 900 32px/1.25 var(--display); color: var(--yellow); text-shadow: 0 3px 0 var(--red-dark); }
.unlock.lit .unlock-title { color: #9ff5e6; text-shadow: 0 0 14px rgba(63,224,204,.6), 0 3px 0 #10302c; }
.unlock-sub { margin: 0; font: 700 15px/1.5 var(--body); color: #e6e1ff; }
.unlock-sub b { color: var(--coin); }
.unlock-saved { margin: 0; font: 700 12.5px var(--body); color: var(--muted); }
.unlock .btn.big, .unlock .btn { margin: 0; }
.buy-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.buy-btn svg.ic { width: 26px; height: 26px; }
.save-meter { position: relative; height: 26px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.save-meter i { position: absolute; inset: 0 0 0 auto; background: linear-gradient(90deg, #e8a21a, var(--coin)); border-radius: 99px; }
.save-meter span { position: relative; font: 900 14px/26px var(--body); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.soon-card { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1.5px dashed var(--line); text-align: right; }
.soon-card > svg.ic { width: 40px; height: 40px; }
.soon-card div { flex: 1; display: grid; } .soon-card b { font: 900 18px var(--body); } .soon-card small { color: var(--muted); font-weight: 700; }
.soon-price { display: inline-flex; align-items: center; gap: 4px; font: 900 16px var(--body); color: var(--coin); } .soon-price svg.ic { width: 18px; height: 18px; }
.match-end #nextCard { margin-top: 12px; }
.day-more { margin-top: 12px; border-radius: 16px; background: rgba(255,255,255,.04); padding: 10px 12px; }
.day-more summary { font: 800 15px var(--body); cursor: pointer; }
/* the window view keeps its place when the practice points at it */
.win-open.hint-on { outline: 3px solid var(--yellow); outline-offset: 2px; animation: glowPulse 1.1s ease-in-out infinite; }
.results .res-title { font-size: 38px; white-space: nowrap; }
.cupspot .cup-lbl { white-space: nowrap; font-size: 10.5px; }

/* ---- polish after the first play ---- */
.res-go.top { margin-top: 10px; }
/* a full cup is loud: green, a check, a gentle bounce */
.cupspot { position: relative; }
.cupspot .cup-ok { display: none; position: absolute; top: -9px; left: -8px; width: 22px; height: 22px; border-radius: 50%; background: var(--good); color: #0d2b16; font: 900 13px/22px var(--body); text-align: center; font-style: normal; box-shadow: 0 2px 0 rgba(0,0,0,.3); }
.cupspot.full { border-width: 3px; background: rgba(61,220,151,.22); box-shadow: 0 0 0 3px rgba(61,220,151,.25), 0 0 18px rgba(61,220,151,.55); animation: cupReady 1.1s ease-in-out infinite; }
.cupspot.full .cup-ok { display: block; animation: okPop .35s cubic-bezier(.3,1.6,.5,1); }
.cupspot.full .cup-art { height: 32px; }
.cupspot.full .cup-lbl { display: block !important; font-weight: 900; color: #b9ffd9; }
@keyframes cupReady { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes okPop { from { transform: scale(0); } to { transform: scale(1); } }
.dticket.got { box-shadow: 0 0 0 3px var(--good), 0 0 14px rgba(61,220,151,.6); }
/* no drink on the ticket: a crossed cup, said plainly */
.dticket.none { background: #e9e4f2; border-top-color: #9a93ad; }
.dticket.none .dt-art.off { opacity: .8; position: relative; }
.dticket.none .dt-art.off::after, .car-drink.none::after { content: ''; position: absolute; left: 50%; top: 50%; width: 120%; height: 3px; border-radius: 2px; background: #e0484a; transform: translate(-50%, -50%) rotate(-40deg); }
.dticket.none b { color: #c03a3c; }
.car-drink.none { border-color: #e0484a; }
.car-drink.none svg.ic { opacity: .65; }

/* ---- fries (days 7–9) ---- */
:root { --c-fries: #ffc23a; }
.sl-fries.on { border-color: var(--c-fries); background: #4a3a1a; }
.slots .sl-fries svg.ic { width: 28px; }
/* the till: جبن، مخلل، فرايز in one row */
.st-order.has-fries .tgs { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.st-order.has-fries .key.tg { gap: 4px; padding: 0 6px; font-size: 15px; }
.st-order.has-fries .key.tg svg.ic { width: 24px; height: 20px; }
.st-order.has-fries .tg-st { padding: 2px 6px; font-size: 11px; }
/* the kitchen fryer: empty → frying (bar fills) → ready (glows) → next to the burger */
.st-kitchen.has-fries .trays { gap: 6px; }
.tray-fries { color: var(--muted); }
.tray-fries .fry-art { position: relative; width: 70%; max-width: 64px; display: grid; place-items: center; }
.tray-fries .fry-art svg.ic { width: 100%; height: auto; aspect-ratio: 1; transition: transform .2s, filter .2s; }
.tray-fries.empty .fry-art svg.ic { filter: grayscale(.6) brightness(.8); }
.tray-fries .fry-bar { position: absolute; left: 4%; right: 4%; bottom: -4px; height: 6px; border-radius: 3px; background: rgba(0,0,0,.35); overflow: hidden; }
.tray-fries .fry-bar b { display: block; height: 100%; width: 0; background: var(--c-fries); border-radius: 3px; }
.tray-fries.empty .fry-bar { opacity: 0; }
.tray-fries.frying { color: var(--c-fries); }
.tray-fries.frying .fry-art svg.ic { animation: sizzle .25s steps(2) infinite; }
.tray-fries.ready { color: #fff; background: #4a3a1a; box-shadow: 0 0 0 3px var(--c-fries), 0 0 16px rgba(255,194,58,.6), 0 4px 0 #1d1840; animation: cupReady 1.1s ease-in-out infinite; }
.tray-fries.used { opacity: .55; }
.tray-fries .fry-ok { display: none; position: absolute; top: -8px; left: -6px; width: 22px; height: 22px; border-radius: 50%; background: var(--good); color: #0d2b16; font: 900 13px/22px var(--body); text-align: center; font-style: normal; }
.tray-fries.ready .fry-ok { display: block; animation: okPop .35s cubic-bezier(.3,1.6,.5,1); }
.tray-fries .tray-lbl { white-space: nowrap; font-size: 14px; }
@keyframes sizzle { 0% { transform: translateY(0) rotate(-2deg); } 100% { transform: translateY(-2px) rotate(2deg); } }
.side-fries { position: relative; z-index: 1; width: clamp(44px, 13vw, 60px); margin: 0 0 12px 6px; align-self: flex-end; }
.side-fries svg.ic { width: 100%; height: auto; aspect-ratio: 1; filter: drop-shadow(0 3px 0 rgba(0,0,0,.3)); }
.side-fries.drop { animation: okPop .3s cubic-bezier(.3,1.6,.5,1); }
/* restaurant drawing: the fries sign on the roof */
.fries-sign .neon-f { fill: #6a5a3a; transition: fill .3s .4s; }
.fries-sign .fries-ic { opacity: .35; transition: opacity .4s .3s; }
.fries-sign.lit .neon-f { fill: #ffe08a; filter: drop-shadow(0 0 3px #ffb52e) drop-shadow(0 0 6px #ffb52e); animation: neonOn 1.4s .4s; }
.fries-sign.lit .fries-ic { opacity: 1; }
.fries-sign .fries-lock { transition: opacity .4s; }
.fries-sign.lit .fries-lock { opacity: 0; }
.price-tag.at-fries { right: auto; left: 5%; }

/* ---- the team's map ---- */
.rest-wrap { display: flex; gap: 8px; align-items: stretch; }
.rest-wrap .rest-card { flex: 1; min-width: 0; }
.map-btn { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 74px; border-radius: 16px; background: linear-gradient(160deg, #3a2a6e, #2b2560); border: 1.5px solid #5a4c9e; color: var(--yellow); font: 900 13px var(--body); }
.map-btn svg.ic { width: 30px; height: 30px; }
.map-btn[hidden] { display: none; }
.map-open { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 10px; }
.map-open svg.ic { width: 24px; height: 24px; }
.sheet-card.map-sheet { max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; gap: 8px; }
.map { position: relative; height: calc(var(--rows) * var(--row) + 30px); padding-top: 30px; border-radius: 16px; background: linear-gradient(#2a2160, #1d1a4a 40%, #182c3a); overflow: hidden; }
.map-sky { position: absolute; top: 0; left: 0; right: 0; height: 70px; opacity: .35; pointer-events: none; }
.map-sky svg { width: 100%; height: 100%; }
.map-road { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: calc(var(--rows) * var(--row)); }
.map-road path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.road-bed { stroke: #3c3870; stroke-width: 26; }
.road-line { stroke: #8a84b8; stroke-width: 2; stroke-dasharray: 8 9; }
.road-done { stroke: var(--yellow); stroke-width: 5; opacity: .9; }
.mp-stop { position: absolute; bottom: calc(var(--i) * var(--row) + var(--row) / 2); transform: translateY(50%); display: flex; align-items: center; gap: 8px; width: 64%; }
.mp-stop.left { left: calc(30% - 29px); flex-direction: row-reverse; text-align: left; }
.mp-stop.right { right: calc(30% - 29px); flex-direction: row; text-align: right; }
.mp-stop.left .mp-txt { align-items: flex-end; }
.mp-stop.right .mp-txt { align-items: flex-start; }
.mp-pin { position: relative; flex: none; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); border: 3px solid var(--line); box-shadow: 0 4px 0 rgba(0,0,0,.35); }
.mp-pin svg.ic { width: 34px; height: 34px; }
.mp-ic2 { position: absolute; bottom: -4px; left: -6px; width: 26px; height: 26px; border-radius: 50%; background: var(--panel); display: grid; place-items: center; font-style: normal; }
.mp-ic2 svg.ic { width: 18px; height: 18px; }
.mp-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mp-txt b { font: 900 16px/1.2 var(--body); color: #fff; }
.mp-txt small { font: 700 11.5px var(--body); color: var(--muted); }
.mp-tag { display: inline-flex; align-items: center; gap: 3px; margin-top: 3px; padding: 2px 8px; border-radius: 99px; font: 800 11.5px var(--body); background: rgba(255,255,255,.08); color: var(--muted); white-space: nowrap; }
.mp-tag svg.ic { width: 13px; height: 13px; }
.mp-tag.ok { background: rgba(61,220,151,.16); color: var(--good); }
.mp-tag.here { background: var(--yellow); color: var(--night); }
.mp-tag.buy { background: rgba(255,201,60,.14); color: var(--coin); border: 1px solid var(--coin); }
.mp-tag.soon { background: rgba(236,143,179,.15); color: #f2a9c6; }
.mp-station { position: absolute; top: -18px; font: 900 10.5px var(--body); color: var(--yellow); letter-spacing: .3px; opacity: .85; white-space: nowrap; }
.mp-stop.left .mp-station { left: 0; } .mp-stop.right .mp-station { right: 0; }
.mp-stop.done .mp-pin, .mp-stop.open .mp-pin { border-color: var(--good); }
.mp-stop.here .mp-pin { border-color: var(--yellow); box-shadow: 0 0 0 4px rgba(255,201,60,.25), 0 0 18px rgba(255,201,60,.5); animation: cupReady 1.6s ease-in-out infinite; }
.mp-stop.next .mp-pin { border-color: var(--coin); border-style: dashed; }
.mp-stop.locked .mp-pin svg.ic, .mp-stop.soon .mp-pin svg.ic { filter: grayscale(.7) brightness(.7); }
.mp-stop.soon .mp-pin { border-style: dashed; background: #221d48; }
.mp-stop.soon .mp-txt b { color: #cfc7e6; }
.mp-car { position: absolute; top: -26px; width: 54px; pointer-events: none; filter: drop-shadow(0 3px 2px rgba(0,0,0,.4)); }
.mp-car svg { width: 100%; height: auto; display: block; }
.rest-wrap .rc-meta { white-space: nowrap; }
.map-btn { width: 64px; font-size: 12px; }
.mp-txt .mp-station { position: static; margin-bottom: 1px; }
.mp-txt .mp-station { padding: 1px 7px; border-radius: 99px; background: rgba(20,15,51,.85); }
.mp-txt b, .mp-txt small { text-shadow: 0 1px 3px rgba(10,8,30,.9); }

/* ---- kitchen: the order to make sits right above the burger ---- */
.k-ticket { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 8px; border-radius: 14px; background: var(--ticket); color: var(--ticket-ink); border-top: 6px solid var(--c, #999); box-shadow: 0 4px 0 rgba(0,0,0,.25), 0 0 0 3px var(--yellow), 0 0 18px rgba(255,201,60,.35); margin: 0 auto; width: max-content; max-width: 100%; transition: box-shadow .25s; }
.k-ticket.fresh { animation: okPop .35s cubic-bezier(.3,1.6,.5,1); }
.k-ticket.all-ok { box-shadow: 0 4px 0 rgba(0,0,0,.25), 0 0 0 3px var(--good), 0 0 18px rgba(61,220,151,.5); }
.kt-car { display: flex; flex-direction: column; align-items: center; width: 54px; flex: none; }
.kt-car svg { width: 100%; height: auto; display: block; }
.kt-car b { font: 900 13px/1.1 var(--body); }
.k-ticket .slots.big .sl { width: 52px; height: 56px; position: relative; }
.k-ticket .slots.big .sl svg.ic { width: 34px; height: 24px; }
.k-ticket .sl.m-ok::after, .k-ticket .sl.m-bad::after { position: absolute; top: -7px; left: -7px; width: 20px; height: 20px; border-radius: 50%; font: 900 12px/20px var(--body); text-align: center; animation: okPop .3s cubic-bezier(.3,1.6,.5,1); }
.k-ticket .sl.m-ok::after { content: '✓'; background: var(--good); color: #0d2b16; }
.k-ticket .sl.m-bad::after { content: '!'; background: var(--bad); color: #fff; }
.k-ticket .sl.m-bad { box-shadow: 0 0 0 2px var(--bad); }
.k-ticket[data-color="red"] { --c: #d9605a; } .k-ticket[data-color="green"] { --c: #5cbf7a; } .k-ticket[data-color="yellow"] { --c: #f4c55f; } .k-ticket[data-color="blue"] { --c: #4f7fd9; }
.k-ticket[data-color="white"] { --c: #c9c3b8; } .k-ticket[data-color="purple"] { --c: #9a6ad0; } .k-ticket[data-color="orange"] { --c: #ee8a3c; } .k-ticket[data-color="pink"] { --c: #ec8fb3; }
.st-kitchen .counter { padding-top: 100px; }
@media (max-height: 700px) { .st-kitchen .counter { padding-top: 84px; } .k-ticket .slots.big .sl { width: 44px; height: 46px; } .kt-car { width: 44px; } .k-ticket { padding: 4px 8px; } }
/* the strip on top: what comes after the order being made */
.st-kitchen .calls .calls-lbl { color: var(--muted); }
.st-kitchen .callchip { opacity: .75; transform: scale(.9); }
/* a bag just packed gets a ✓ stamp */
.bag.stamped::after { content: '✓'; position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: 30px; height: 30px; border-radius: 50%; background: var(--good); color: #0d2b16; font: 900 18px/30px var(--body); text-align: center; animation: okPop .35s cubic-bezier(.3,1.6,.5,1); z-index: 3; }
/* التسليم: a bigger car sticker on packed bags, to match the car at the window at a glance */
.st-window .bag-sticker { flex-direction: column; gap: 0; padding: 2px 6px; border-radius: 10px; border-width: 3px; }
.st-window .bag-sticker .bs-car { width: 44px; }
.st-window .bag-sticker b { font-size: 12.5px; }
/* التسليم with the drinks ticket and an extra: keep the driver's line on one row */
.win-call:has(.dticket) .want { min-width: 0; padding: 4px 8px; }
.win-call:has(.dticket) .want-art { width: 24px; }
.win-call:has(.dticket) .want b { font-size: 14px; }
.win-call:has(.dticket) .call-body { min-width: 0; flex: 1; }
.win-call:has(.dticket) .call-who { white-space: nowrap; font-size: 15px; }
.win-call:has(.dticket) .call-face { width: 46px; height: 46px; }
.win-call:has(.dticket) .call-top { flex-wrap: wrap; row-gap: 2px; }
@media (max-height: 700px) { .st-kitchen .stack-wrap { width: min(34vw, 150px, calc((100dvh - 440px) * .62)); } }
@media (max-height: 700px) { .kt-car b { font-size: 11px; } }

/* results: the mistake of the day, big, under the start button */
.oops { margin-top: 14px; border-radius: 20px; padding: 14px; background: linear-gradient(160deg, #4a2340, #2d2856); border: 2px solid rgba(226,87,76,.75); box-shadow: 0 0 0 4px rgba(226,87,76,.12); animation: oopsIn .5s ease-out both; }
@keyframes oopsIn { 0% { transform: translateY(8px) scale(.97); opacity: 0; } 60% { transform: translateX(-4px); opacity: 1; } 80% { transform: translateX(3px); } 100% { transform: none; } }
.oops-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.oops-tag { background: var(--bad); color: #fff; font: 900 14px var(--body); padding: 4px 12px; border-radius: 99px; }
.oops-st { display: inline-flex; align-items: center; gap: 5px; font: 800 13px var(--body); color: #fff; background: rgba(255,255,255,.1); padding: 4px 10px; border-radius: 99px; }
.oops-st svg { width: 18px; height: 18px; }
.oops-car { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.oops-face { width: 58px; height: 58px; flex: none; border-radius: 50%; overflow: hidden; border: 3px solid #fff4cf; background: #7a6299; }
.oops-face svg { width: 100%; height: 100%; }
.oops-car h3 { margin: 0; font: 900 19px/1.3 var(--display); color: #fff; }
.oops-quote { margin: 6px 0 0; display: inline-block; background: var(--cream); color: var(--ink); font: 800 15px var(--body); padding: 5px 12px; border-radius: 14px 14px 14px 4px; }

/* الكافيه sign on the restaurant (offered after the fries) */
.cafe-sign .neon-c { fill: #6a4a5a; transition: fill .3s .4s; }
.cafe-sign g { opacity: .4; transition: opacity .4s .3s; }
.cafe-sign.lit .neon-c { fill: #ffd0e2; filter: drop-shadow(0 0 3px #ec8fb3) drop-shadow(0 0 6px #ec8fb3); animation: neonOn 1.4s .4s; }
.cafe-sign.lit g { opacity: 1; }
.mini-cup .mb-l.b { margin-top: 0; }

/* what's open: a row of tiles under the restaurant drawing */
.parts { list-style: none; margin: 2px 0 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.part { display: grid; grid-template-rows: 34px 22px 18px; align-items: center; justify-items: center; gap: 3px; padding: 8px 2px 6px; border-radius: 14px; background: var(--panel, #2d2856); border: 2px solid rgba(255,255,255,.08); }
.part svg.ic { width: 32px; height: 32px; }
.part b { line-height: 22px; font: 800 12.5px/22px var(--body); color: #fff; white-space: nowrap; }
.part small { display: block; line-height: 18px; font: 800 11.5px/18px var(--body); color: #8be0a4; }
.part.off { opacity: .5; }
.part.off svg.ic { filter: grayscale(.8); }
.part.off small { color: var(--coin); }
.part.next { opacity: 1; border-color: var(--coin); box-shadow: 0 0 0 3px rgba(255,201,60,.18); }
.part.next svg.ic { filter: none; }
.part.on.next { border-color: #8be0a4; box-shadow: 0 0 0 3px rgba(139,224,164,.2); }
.part.pop { animation: partPop .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes partPop { 0% { transform: scale(.85); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .part.pop { animation: none; } }

/* the bots offer in the lobby: a dashed card like an empty seat, not an underlined link */
.btn.link.bots-btn { display: flex; align-items: center; gap: 12px; width: 100%; margin: 2px 0 0; padding: 10px 14px; text-align: right; text-decoration: none;
  background: rgba(79,216,203,.07); border: 2px dashed rgba(79,216,203,.45); border-radius: 16px; color: #fff; box-shadow: none; }
.btn.link.bots-btn[hidden] { display: none; }
.bots-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(79,216,203,.18); color: var(--c-order); }
.bots-ic svg.ic { width: 28px; height: 28px; }
.bots-txt { flex: 1; display: grid; gap: 1px; }
.bots-txt b { font: 900 16px var(--body); color: #fff; }
.bots-txt small { font: 700 13.5px var(--body); color: var(--muted); }
.bots-add { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c-order); color: #10302c; font: 900 24px/1 var(--body); }
.btn.link.bots-btn:active { transform: scale(.98); }

/* tablets (iPad): use the screen's width instead of a narrow phone column */
@media (min-width: 700px) {
  .page:not(.wide) { max-width: 760px; }
  .station { max-width: 760px; }
  #toasts { max-width: 720px; }
  .sheet { width: min(480px, calc(100% - 80px)); }
  .tour-tip { max-width: 520px; }
  /* a bigger restaurant in the outside scenes, so the wider sky isn't empty */
  .scene .shop, .scene.outside .shop { right: -2%; width: min(66%, 500px, calc((100cqh - var(--road-h, 96px) - 6px) * 1.75)); }
}

/* kitchen: the ticket guides the cook (next tray glows, others fade, the free bag glows when it's right) */
.st-kitchen .tray { transition: opacity .25s, box-shadow .25s, border-color .25s; }
.st-kitchen .tray.g-skip { opacity: .38; filter: saturate(.5); }
.st-kitchen .tray.g-next { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255,201,60,.35), 0 0 18px rgba(255,201,60,.45); animation: gNext 1.2s ease-in-out infinite; }
@keyframes gNext { 50% { box-shadow: 0 0 0 5px rgba(255,201,60,.18), 0 0 26px rgba(255,201,60,.55); } }
.k-ticket .sl.g-now { outline: 3px solid var(--yellow); outline-offset: 2px; border-radius: 12px; }
.k-ticket .sl-patties { position: relative; }
.sl-pips { position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); display: flex; gap: 3px; padding: 2px 4px; border-radius: 99px; background: #2a1b3f; }
.sl-pips b { width: 7px; height: 7px; border-radius: 50%; background: #6b5f8c; }
.sl-pips b.f { background: #5cbf7a; }
#bags.g-go .bag.next { box-shadow: 0 0 0 3px var(--yellow), 0 0 22px rgba(255,201,60,.55); animation: gNext 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .st-kitchen .tray.g-next, #bags.g-go .bag.next { animation: none; } }

/* bags: a big car sticker on each packed bag (her pick) */
.bag-art { position: relative; }
.bag-face { position: absolute; inset: 0; pointer-events: none; }
.bag-face[data-color="red"] { --c: #d9605a; } .bag-face[data-color="green"] { --c: #5cbf7a; } .bag-face[data-color="yellow"] { --c: #f4c55f; } .bag-face[data-color="blue"] { --c: #4f7fd9; }
.bag-face[data-color="white"] { --c: #c9c3b8; } .bag-face[data-color="purple"] { --c: #9a6ad0; } .bag-face[data-color="orange"] { --c: #ee8a3c; } .bag-face[data-color="pink"] { --c: #ec8fb3; }
.bf-band { position: absolute; left: 9%; right: 9%; top: 35%; height: 9%; border-radius: 2px; background: var(--c); }
.bf-car { position: absolute; left: 50%; top: 50%; transform: translateX(-50%); width: 90%; padding: 2px 2px 0; border-radius: 8px; background: #fff8e7; border: 3px solid var(--c); box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.bf-car svg { width: 100%; height: auto; display: block; }
.bf-n { position: absolute; top: -4%; left: -6%; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #4a2f16; color: #ffe9c4; font: 900 11px/18px var(--body); text-align: center; border: 2px solid #fff1d0; }
.bag-name { display: inline-block; padding: 1px 8px; border-radius: 99px; background: var(--cream); color: var(--ink); font: 900 12px/1.4 var(--body); border: 2px solid var(--c, #999); }
.bag-name[data-color="red"] { --c: #d9605a; } .bag-name[data-color="green"] { --c: #5cbf7a; } .bag-name[data-color="yellow"] { --c: #f4c55f; } .bag-name[data-color="blue"] { --c: #4f7fd9; }
.bag-name[data-color="white"] { --c: #c9c3b8; } .bag-name[data-color="purple"] { --c: #9a6ad0; } .bag-name[data-color="orange"] { --c: #ee8a3c; } .bag-name[data-color="pink"] { --c: #ec8fb3; }
.st-window .bag.full .bag-tag:has(.bag-name) { background: none; padding: 0; }

/* الطلبات: the ticket on top fills with pictures, three big cashier keys under it (her pick, a mix of two designs) */
.st-order .till2 { gap: 8px; }
.st-order .tt { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 6px 10px; border-radius: 14px; background: var(--ticket); color: var(--ticket-ink); border-top: 7px solid var(--c, #8b7fd0); box-shadow: 0 4px 0 rgba(0,0,0,.25); }
.st-order .tt.blank { background: rgba(255,248,231,.92); }
.tt-car { display: flex; align-items: center; gap: 6px; flex: none; }
.tt-face { display: block; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; border: 2px solid var(--c, #8b7fd0); background: var(--c, #8b7fd0); flex: none; }
.tt-face > svg { display: block; width: 100%; height: 100%; }
.tt-car b { font: 900 15px/1 var(--body); }
.st-order .tt .slots { margin-inline-start: auto; }
.tt-empty { margin-inline-start: auto; font: 800 14px/1.3 var(--body); color: #6b5fa8; }
.tt[data-color="red"] { --c: #d9605a; } .tt[data-color="green"] { --c: #5cbf7a; } .tt[data-color="yellow"] { --c: #f4c55f; } .tt[data-color="blue"] { --c: #4f7fd9; }
.tt[data-color="white"] { --c: #c9c3b8; } .tt[data-color="purple"] { --c: #9a6ad0; } .tt[data-color="orange"] { --c: #ee8a3c; } .tt[data-color="pink"] { --c: #ec8fb3; }
.st-order .till2 .till-keys { display: grid; grid-template-columns: 1fr; gap: 8px; }
.bk-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.st-order.has-fries .bk-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.st-order .till2 .key.bk { position: relative; height: auto; min-height: 96px; display: grid; justify-items: center; align-content: center; gap: 2px; padding: 8px 4px; border-radius: 16px; background: var(--panel); border: 3px solid var(--line); box-shadow: 0 4px 0 #1d1840; color: #fff; font-size: 16px; }
.st-order .till2 .key.bk .bk-ic svg.ic { width: 44px; height: 38px; }
.st-order .till2 .key.bk b { font: 900 17px/1.2 var(--body); }
.st-order .till2 .key.bk.on { background: #1e4a47; border-color: var(--good, #4fd8cb); }
.st-order .till2 .key.bk .tg-st { margin: 0; font-size: 12px; padding: 1px 10px; background: #e2574c; color: #fff; }
.st-order .till2 .key.bk.on .tg-st { background: #5cbf7a; color: #0f2a17; }
.bk-n { position: absolute; top: 6px; left: 8px; min-width: 24px; height: 24px; border-radius: 12px; background: var(--yellow); color: #3a1e00; font: 900 14px/24px var(--body); font-style: normal; text-align: center; }
.bk-n:empty { display: none; }
.bk-sub { font: 700 11px/1.2 var(--body); color: var(--muted); white-space: nowrap; }
.st-order .till2 .order-btn { width: 100%; height: 54px; }
.st-order.has-fries .till2 .key.bk b { font-size: 15px; }
.st-order.has-fries .till2 .key.bk .bk-ic svg.ic { width: 38px; height: 32px; }
.st-order.has-drinks .till2 .key.bk { min-height: 78px; }
.st-order.has-drinks .till2 .key.bk .bk-ic svg.ic { width: 34px; height: 30px; }
@media (max-height: 760px) {
  .st-order .till2 .key.bk { min-height: 76px; padding: 4px; }
  .st-order .till2 .key.bk .bk-ic svg.ic { width: 34px; height: 30px; }
  .st-order .tt { min-height: 54px; padding: 4px 8px; }
  .st-order .till2 .order-btn { height: 48px; }
  .st-order.has-drinks .till2 .key.bk { min-height: 64px; }
  .st-order.has-drinks .till2 .key.bk .bk-sub { display: none; }
}
@media (max-height: 620px) {
  .st-order .till2 .key.bk { min-height: 62px; }
  .st-order .till2 .key.bk .bk-sub { display: none; }
  .st-order .till2 .key.bk .bk-ic svg.ic { width: 28px; height: 24px; }
  .st-order .tt { min-height: 46px; }
  .st-order .tt .slots.big .sl-w { display: none; }
  .st-order .till2 .order-btn { height: 44px; font-size: 22px; }
  .st-order.has-drinks .till2 .key.bk { min-height: 54px; }
}

/* التسليم: a tray in the call panel with a slot per thing the car gets, each filling with colour (her pick) */
.ftray { flex: none; display: flex; gap: 6px; align-items: stretch; margin-inline-start: auto; padding: 5px; border-radius: 14px; background: linear-gradient(#c99a62, #a7773f); box-shadow: inset 0 -4px 0 rgba(0,0,0,.18); }
.ftray .fs, .ftray .fs.want, .ftray .fs.dticket { position: relative; display: grid; justify-items: center; align-content: end; gap: 0; width: 58px; min-width: 0; height: 74px; padding: 2px 2px 3px; border-radius: 11px; background: rgba(255,255,255,.2); border: 2.5px dashed rgba(255,255,255,.6); box-shadow: none; overflow: hidden; color: #fff; animation: none; border-top-width: 2.5px; }
.ftray .fs-liq { position: absolute; left: 0; right: 0; bottom: 0; height: var(--f); background: linear-gradient(rgba(92,191,122,.7), rgba(60,150,90,.9)); }
.ftray .fs-drink .fs-liq { background: linear-gradient(rgba(150,80,40,.75), rgba(100,50,25,.9)); }
.ftray .fs-drink[data-d="orange"] .fs-liq { background: linear-gradient(rgba(255,170,60,.8), rgba(230,130,30,.9)); }
.ftray .fs-drink[data-d="water"] .fs-liq { background: linear-gradient(rgba(140,200,255,.75), rgba(90,160,230,.9)); }
.ftray .fs-art { position: relative; display: grid; place-items: center; width: 40px; height: 42px; }
.ftray .fs-art svg { width: auto; height: 100%; max-width: 100%; }
.ftray .fs-art svg.ic { width: 30px; height: 30px; }
.ftray .fs b { position: relative; font: 900 10.5px/1.25 var(--body); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); white-space: nowrap; }
.ftray .fs.full { border-style: solid; border-color: #5cbf7a; }
.ftray .fs-ok { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #5cbf7a; color: #fff; font: 900 11px/18px var(--body); text-align: center; font-style: normal; }
.ftray .fs:not(.full) .fs-art { opacity: .55; }
.ftray .fs-none { opacity: .55; border-style: solid; border-color: rgba(255,255,255,.3); }
.ftray .fs-none .fs-art { opacity: .6; }
.ftray .fs-x { font: 900 22px/1 var(--body); color: #fff; }
.ftray .fs-drink.pouring { border-style: solid; border-color: var(--yellow); }
.ftray .fs-bag.go { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255,201,60,.4); animation: gNext 1.2s ease-in-out infinite; }
.ftray .fs-bag.go b { color: #ffe9a8; }
.win-call .call-body { min-width: 0; }
@media (max-height: 700px) { .ftray .fs, .ftray .fs.want, .ftray .fs.dticket { width: 52px; height: 62px; } .ftray .fs-art { height: 32px; } .ftray .fs-art svg.ic { width: 24px; height: 24px; } }
@media (max-height: 600px) { .ftray .fs, .ftray .fs.want, .ftray .fs.dticket { height: 56px; } .ftray .fs b { font-size: 9.5px; } }

.st-order .tt .sl-drink svg.ic { color: #6b5fa8; }
.ftray .fs-none svg.ic { color: #fff; }
@media (max-height: 700px) {
  .st-order.has-drinks .till2 .key.bk { min-height: 60px; padding: 3px; gap: 0; }
  .st-order.has-drinks .till2 .key.bk .bk-ic svg.ic { width: 26px; height: 22px; }
  .st-order.has-drinks .till2 .key.bk b { font-size: 14px; }
  .st-order.has-drinks .till2 .key.bk .tg-st { font-size: 10.5px; padding: 0 8px; }
  .st-order.has-drinks .bk-n { top: 3px; left: 4px; min-width: 20px; height: 20px; font-size: 12px; line-height: 20px; }
  .st-order.has-drinks .till2 .key.bk .bk-sub { display: none; }
  .st-order.has-drinks .tt .slots.big .sl-w { display: none; }
  .st-order.has-drinks .tt { min-height: 48px; }
}

/* calmer stations (her ask): no idle hint line, bigger and clearer pickup slots */
.coach-idle { visibility: hidden; }
.ftray { gap: 8px; padding: 6px; }
.ftray .fs, .ftray .fs.want, .ftray .fs.dticket { width: 70px; height: 80px; padding: 3px 3px 4px; border-radius: 13px; border-width: 3px; border-top-width: 3px; }
.ftray .fs-art { width: 50px; height: 48px; }
.ftray .fs-art svg.ic { width: 38px; height: 38px; }
.ftray .fs b { font-size: 13px; line-height: 1.2; background: rgba(27,22,64,.75); padding: 0 6px; border-radius: 99px; text-shadow: none; }
.ftray .fs.full b { background: #2d7a45; }
.ftray .fs-ok { width: 22px; height: 22px; font-size: 13px; line-height: 22px; }
.ftray .fs:not(.full) .fs-art { opacity: .8; }
@media (max-height: 700px) { .ftray .fs, .ftray .fs.want, .ftray .fs.dticket { width: 62px; height: 68px; } .ftray .fs-art { height: 38px; } .ftray .fs-art svg.ic { width: 30px; height: 30px; } .ftray .fs b { font-size: 12px; } }

/* ================================================================ the richer look (her pick, 2026-11-15)
   steel and wood instead of flat purple panels, food drawn with light and shade, paper tickets.
   The top bar stays exactly as it was. */
.station { background: #2a2d35; }
.station > section { --panel: #3a3e49; --panel2: #2c2f38; --line: #4b505d; }
/* order pictures sit on light cells, like printed on paper */
.sl { background: #fbf6ea; border-color: #e2d8c4; }
.sl.on { background: #eaf7ee; border-color: #4fbf72; }
.sl.off { background: #efeae0; }
.sl svg.pic { width: 36px; height: 27px; }
.slots.sm .sl svg.pic { width: 25px; height: 19px; }
.sl-w { color: #2b2350; }
.sl-w.yes { color: #23894a; } .sl-w.no { color: #c8323a; }
.sl-x { background: #fbeaf2; }
svg.pic { overflow: visible; }

/* ---- kitchen: a steel wall with a rail of tickets, a steel counter with a wooden board, steel pans of food ---- */
.st-kitchen .counter { background:
  linear-gradient(#000 0 0) top / 100% 0,
  repeating-linear-gradient(0deg, transparent 0 47px, rgba(0,0,0,.12) 47px 48px),
  linear-gradient(#5c6470, #7f8792 62%, #e8ebef 62%, #e8ebef 63%, #cfd4db 63%, #b3b9c2); }
.st-kitchen .board::after { width: clamp(220px, 70vw, 330px); height: 30px; border-radius: 10px;
  background: repeating-linear-gradient(90deg, transparent 0 38px, rgba(150,80,30,.15) 38px 40px), linear-gradient(#e3a46c, #c47a40);
  box-shadow: 0 8px 0 #8a4a1d, 0 14px 16px rgba(0,0,0,.35); }
.st-kitchen .counter-front { background: linear-gradient(#f4f6f8 0 3px, #d3d8de 3px, #a9b0ba 60%, #8f96a1); }
.k-ticket { background: #fffdf7; border-radius: 6px; position: relative; }
.k-ticket::before { content: ''; position: absolute; top: -13px; left: 50%; width: 30px; height: 12px; margin-left: -15px; border-radius: 3px; background: linear-gradient(#5b616c, #3b404a); }
.st-kitchen .calls, .st-kitchen.bot-order .calls { background: #2c2f38; }
.st-kitchen .callchip .slots.big .sl { background: #fbf6ea; }
.st-kitchen .callchip .slots.big .sl.on { background: #eaf7ee; }
.st-kitchen .pass { background: linear-gradient(#b98aa0, #f0b088 58%, #3a3e49 58%, #2c2f38); border-bottom-color: #a9b0ba; }
.st-kitchen .trays { background: linear-gradient(#cfd4db, #b3b9c2); border-top: 3px solid #eef1f4; gap: 6px; padding: 6px 8px 8px; }
.st-kitchen .tray { background: transparent; border: 0; box-shadow: none; padding: 0; gap: 0; justify-content: flex-end; }
.st-kitchen .tray-art, .st-kitchen .tray-cheese .tray-art, .st-kitchen .tray-pickles .tray-art { width: 100%; max-width: 150px; }
.st-kitchen .tray-art svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 3px 2px rgba(0,0,0,.25)); }
.st-kitchen .tray-lbl { margin-top: -10px; position: relative; padding: 1px 12px; border-radius: 99px; background: rgba(27,22,64,.85); color: #fff; font-size: 14px; }
.st-kitchen .tray.g-next .tray-lbl { background: var(--yellow); color: #3a2400; }
.st-kitchen .tray.g-next .tray-art svg { filter: drop-shadow(0 0 6px #ffd23f) drop-shadow(0 0 3px #ffd23f); }
.st-kitchen .tray-undo { flex: .55; align-self: center; height: auto; background: transparent; border: 0; color: #2b2350; }
.st-kitchen .tray-undo .undo-ic { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: #2b2350; color: #fff; box-shadow: 0 3px 0 #15112e; }
.st-kitchen .tray-undo .undo-ic svg { width: 30px; }
.st-kitchen .tray-undo .tray-lbl { margin-top: 4px; background: none; color: #2b2350; }
.st-kitchen .tray-fries .fry-art { width: 100%; max-width: 150px; }
.st-kitchen .tray-fries .fry-art svg { width: 100%; height: auto; aspect-ratio: auto; display: block; }
.st-kitchen .tray-fries.empty .fry-art svg { filter: grayscale(.5) brightness(.9); }
.st-kitchen .tray-fries.ready { background: transparent; box-shadow: none; animation: none; }
.st-kitchen .tray-fries.ready .fry-art svg { filter: drop-shadow(0 0 6px #ffc23a) drop-shadow(0 0 3px #ffc23a); }
.st-kitchen .tray-fries .fry-bar { bottom: 22px; left: 14%; right: 14%; }
.st-kitchen .bags, .st-window .win-counter { background: linear-gradient(#33363f, #2a2d35); border-top: 4px solid #a9b0ba; box-shadow: inset 0 -10px 0 -4px #6d737d; }

/* ---- orders: we look out of the booth window; the keys are white like a real till ---- */
.st-order .scene::after, .st-window .win-open::after { content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  border: 10px solid #cfd4db; border-bottom-width: 14px; box-shadow: inset 0 0 0 2px #8d949e, inset 0 6px 10px rgba(0,0,0,.25);
  background: linear-gradient(115deg, rgba(255,255,255,.1) 0 18%, transparent 18% 100%); }
.speaker.rich-speaker { width: clamp(84px, 26%, 128px); bottom: 34px; left: 18px; }
.speaker.rich-speaker svg { display: block; width: 100%; height: auto; }
.st-order .call, .st-window .call { background: #2c2f38; border-top: 0; }
.st-order .call .call-body { background: #fffdf7; color: #2b2350; border-radius: 16px; padding: 6px 10px; position: relative; box-shadow: 0 3px 0 rgba(0,0,0,.25); }
.st-order .call .call-body::after { content: ''; position: absolute; right: -9px; top: 22px; border: 8px solid transparent; border-left-color: #fffdf7; border-right: 0; }
.st-order .call .call-who { color: #c8323a; }
.st-order .call .call-line { color: #2b2350; }
.st-order .call .call-state { color: #6b6f7c; }
.st-order .call .wave i { background: #c8323a; }
.st-order .call .dots i { background: #2b2350; }
.st-order .call.idle .call-body { background: transparent; box-shadow: none; color: #b8bccc; }
.st-order .call.idle .call-body::after { display: none; }
.st-order .call.idle .call-who { color: #b8bccc; }
.st-order .tt { background: #fffdf7; border-radius: 6px; }
.st-order .till, .st-order .rail { background: #2c2f38; }
.st-order .till2 .key.bk, .st-order .till2 .key.dk { background: linear-gradient(#ffffff, #ece6da); border: 2px solid #d6cfc0; color: #2b2350; box-shadow: 0 4px 0 #1a1c22; }
.st-order .till2 .key.bk.on, .st-order .till2 .key.dk.on { background: linear-gradient(#f3fff6, #d4f2dd); border: 3px solid #38b25b; }
.st-order .till2 .key.bk .bk-ic svg.pic { width: 56px; height: 42px; }
.st-order .till2 .key.dk svg.pic { width: 30px; height: 24px; }
.st-order .till2 .key.bk b, .st-order .till2 .key.dk span { color: #2b2350; }
.st-order .till2 .bk-sub { color: #6b6f7c; }
.st-order .ticket { background: #fffdf7; color: #2b2350; border-radius: 8px; }

/* ---- التسليم: a steel service window, a red tray, a drinks machine, bottles on the counter ---- */
.st-window .win-sign { display: none; }
.st-window .win-open { inset: 10px 12px 26px; border: 0; border-radius: 6px; box-shadow: 0 8px 18px rgba(0,0,0,.35); }
.st-window .win-open .lane { bottom: 44px; }
.st-order .scene .lane { bottom: 42px; }
.st-window .win-open::before { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 26%; z-index: 5; pointer-events: none;
  background: linear-gradient(110deg, rgba(255,255,255,.3) 0 22%, rgba(190,220,240,.22) 22% 100%); border-left: 4px solid #8d949e; }
.st-window .win-sill { background: linear-gradient(#f1f3f6, #c3c9d1 50%, #959ca7); box-shadow: 0 5px 0 #6d737d, 0 10px 14px rgba(0,0,0,.3); border-radius: 6px; }
.st-window .ftray { background: linear-gradient(#e65a4f, #b8362d); box-shadow: inset 0 0 0 5px #c9433a, 0 4px 0 #7d1f18; border-radius: 16px; padding: 8px; }
.st-window .ftray .fs, .st-window .ftray .fs.want, .st-window .ftray .fs.dticket { background: rgba(0,0,0,.14); border: 3px dashed rgba(255,255,255,.75); }
.st-window .ftray .fs.full { border-style: solid; border-color: #4fd27a; }
.st-window .ftray .fs-drink.pouring { border-color: #ffd23f; }
.st-window .ftray .fs-art svg.pic { width: 44px; height: 40px; }
.st-window .dbar { background: linear-gradient(#e4e7ec, #b9bfc8); border-top: 3px solid #f4f6f8; }
.st-window .dbar-lbl { color: #4b505d; }
.st-window .dtap { background: #2b2f36; color: #fff; box-shadow: 0 4px 0 #15171c; border-top: 6px solid #e2453a; }
.st-window .dtap[data-d="orange"] { border-top-color: #ff9a2e; } .st-window .dtap[data-d="water"] { border-top-color: #5aa6e6; }
.st-window .dtap.on { outline: 3px solid #4fd27a; background: #22413a; }
.st-window .dtap svg.pic { width: 30px; height: 26px; }
.st-window .cupspot { border-color: #6b6f7c; background: rgba(0,0,0,.12); color: #4b505d; }
.st-window .caddy { background: linear-gradient(#cfd4db, #b3b9c2); border-top: 3px solid #eef1f4; }
.st-window .extra { background: transparent; border: 0; box-shadow: none; flex-direction: column; gap: 0; height: auto; padding: 2px 0 4px; color: #2b2350; }
.st-window .extra .ex-art { width: 46px; }
.st-window .extra .ex-art svg { display: block; width: 100%; height: auto; }
.st-window .extra .ex-lbl { margin-top: -4px; padding: 0 10px; border-radius: 99px; background: rgba(27,22,64,.85); color: #fff; font-size: 13px; }
.st-window .extra.on { outline: 0; background: transparent; }
.st-window .extra.on .ex-lbl { background: #2d7a45; }
.st-window .extra.asked { outline: 0; background: transparent; animation: none; }
.st-window .extra.asked .ex-lbl { background: var(--yellow); color: #3a2400; }
.st-window .extra.asked .ex-art svg { filter: drop-shadow(0 0 6px #ffd23f); }

/* ================================================================ kitchen laid out like the mockup (her pick, 2026-11-15)
   tickets on a steel wall at the top, the pans in a row, the board with a tall pan beside it, the bags below */
.st-kitchen.kx { grid-template-rows: auto 46px auto auto minmax(0, 1fr) auto auto; }
@media (max-height: 700px) { .st-kitchen.kx { grid-template-rows: auto 34px auto auto minmax(0, 1fr) auto auto; } }
.kx .krail { display: flex; gap: 10px; align-items: flex-start; padding: 16px 10px 8px;
  background: repeating-linear-gradient(90deg, transparent 0 64px, rgba(0,0,0,.1) 64px 65px), repeating-linear-gradient(0deg, transparent 0 39px, rgba(0,0,0,.12) 39px 40px), linear-gradient(#545b66, #6f7782);
  box-shadow: inset 0 3px 0 #8d949e; }
.kx .krail .readout { position: static; inset: auto; flex: 1.35; min-width: 0; display: block; }
.kx .krail .knext { flex: 1; min-width: 0; }
.kx .krail .knext:empty { display: none; }
.kx .k-ticket { width: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 6px 8px;
  box-shadow: 0 4px 0 rgba(0,0,0,.25); border-top: 7px solid var(--c, #999); }
.kx .k-ticket .kt-car { display: flex; align-items: center; gap: 6px; width: auto; flex-direction: row-reverse; }
.kx .k-ticket .kt-car svg { width: 46px; height: auto; }
.kx .k-ticket .kt-car b { font: 900 15px var(--body); color: #2b2350; }
.kx .k-ticket .slots { justify-content: center; flex-wrap: nowrap; }
.kx .k-next { opacity: .62; transform: rotate(-2deg) scale(.94); transform-origin: top center; }
.kx .k-next .slots.big .sl { width: 40px; height: 40px; }
.kx .k-next .slots.big .sl svg.pic { width: 30px; height: 22px; }
.k-ticket[data-color="red"] { --c: #d9605a; } .k-ticket[data-color="green"] { --c: #5cbf7a; } .k-ticket[data-color="yellow"] { --c: #f4c55f; } .k-ticket[data-color="blue"] { --c: #4f7fd9; }
.k-ticket[data-color="white"] { --c: #c9c3b8; } .k-ticket[data-color="purple"] { --c: #9a6ad0; } .k-ticket[data-color="orange"] { --c: #ee8a3c; } .k-ticket[data-color="pink"] { --c: #ec8fb3; }
.kx .krail .ro-name { min-height: 64px; display: grid; place-items: center; color: #e8ebef; }
.kx .counter.kwork { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 4px; padding: 10px 8px 6px; align-items: stretch;
  background: linear-gradient(170deg, rgba(255,255,255,.35) 0 30%, transparent 30% 100%), linear-gradient(#e3e7eb, #c4cad2 70%, #aeb5be);
  border-top: 4px solid #f4f6f8; box-shadow: inset 0 6px 8px -6px rgba(0,0,0,.35); }
.kx .kback { display: flex; gap: 6px; }
.kx .kback .tray, .kx .kfront .tray { height: auto; flex: 1; min-width: 0; }
.kx .kback .tray-art, .kx .kback .fry-art { width: 100%; max-width: 170px; margin: 0 auto; }
.kx .kfront { display: flex; gap: 8px; min-height: 0; align-items: stretch; }
.kx .kfront .tray-patty { flex: 0 0 34%; justify-content: flex-end; min-height: 0; }
.kx .kfront .tray-patty .tray-art { flex: 1; min-height: 0; width: 100%; max-width: none; display: flex; align-items: flex-end; justify-content: center; }
.kx .kfront .tray-patty .tray-art svg { width: 100%; height: 100%; max-height: 100%; }
.kx .kfront .tray-patty .tray-lbl { margin-top: -14px; }
.kx .board { flex: 1; min-width: 0; min-height: 0; padding: 0 0 14px; align-items: flex-end; }
.kx .board::after { left: 0; right: 0; transform: none; width: auto; bottom: 0; height: 78%; border-radius: 12px; z-index: 0;
  background: repeating-linear-gradient(90deg, transparent 0 34px, rgba(150,80,30,.13) 34px 36px), linear-gradient(#e7aa71, #c98146);
  box-shadow: inset 0 3px 0 #f2c290, 0 6px 0 #8a4a1d, 0 12px 14px rgba(0,0,0,.3); }
.kx .stack-wrap { width: min(70%, 168px, calc((100dvh - 470px) * .62)); margin-bottom: 0; }
.kx .lid { margin-bottom: 6px; }
.kx .tray-undo { position: absolute; top: 2px; left: 4px; z-index: 3; flex: none; width: auto; height: auto; padding: 0; gap: 2px; }
.kx .tray-undo .undo-ic { width: 44px; height: 44px; }
.kx .tray-undo .tray-lbl { margin-top: 0; font-size: 13px; color: #2b2350; background: none; }
.kx .side-fries { margin: 0 0 4px 4px; }
@media (max-height: 700px) {
  .kx .krail { padding: 12px 8px 6px; }
  .kx .k-ticket .slots.big .sl { width: 40px; height: 40px; }
  .kx .k-next .slots.big .sl { width: 34px; height: 34px; }
  .kx .kback .tray-art, .kx .kback .fry-art { max-width: 120px; }
  .kx .stack-wrap { width: min(64%, 130px, calc((100dvh - 420px) * .62)); }
}
.kx .calls, .kx.bot-order .calls { display: none; }
.kx .stack-wrap { width: min(58%, 150px, calc((100dvh - 500px) * .6)); }
@media (max-height: 700px) { .kx .stack-wrap { width: min(54%, 120px, calc((100dvh - 430px) * .6)); } }
.st-kitchen.kx { grid-template-rows: auto 46px auto minmax(0, 1fr) auto auto; }
@media (max-height: 700px) { .st-kitchen.kx { grid-template-rows: auto 34px auto minmax(0, 1fr) auto auto; } }
@media (min-width: 700px) { .kx .stack-wrap { width: min(58%, 210px, calc((100dvh - 520px) * .6)); } .kx .kback .tray-art, .kx .kback .fry-art { max-width: 210px; } }

/* ---- التسليم like the mockup: a bigger red tray, then the bottles and the drinks machine side by side ---- */
.st-window { grid-template-rows: auto minmax(0, 1fr) auto auto auto auto; }
.st-window .win-call { height: auto; min-height: 104px; padding-block: 8px; }
.st-window .ftray { padding: 8px; gap: 8px; }
.st-window .ftray .fs, .st-window .ftray .fs.want, .st-window .ftray .fs.dticket { width: 70px; height: 86px; }
.st-window .ftray .fs-art { width: 50px; height: 52px; }
.st-window .ftray .fs-art svg.pic { width: 50px; height: 46px; }
.st-window .ftray .fs b { font-size: 12px; }
.wbar { display: flex; gap: 8px; align-items: stretch; padding: 8px 10px; background: linear-gradient(#cfd4db, #b3b9c2); border-top: 3px solid #eef1f4; }
.wbar .caddy { flex: 1; min-width: 0; padding: 0; background: none; border: 0; gap: 4px; align-items: flex-end; }
.wbar.two .dbar { flex: 1.15; min-width: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto; gap: 6px; padding: 7px; border-radius: 12px; border: 0;
  background: linear-gradient(#f1f3f6, #c9ced6); box-shadow: inset 0 0 0 2px #9aa1ab, 0 4px 0 #7d848e; }
.wbar.two .dbar-lbl { display: none; }
.wbar.two .dtap { height: 50px; }
.wbar.two .dtap b { font-size: 12px; }
.wbar.two .cupspot { grid-column: 1 / -1; height: 48px; flex-direction: row; gap: 6px; }
.wbar.two .cupspot .cup-art { width: 28px; height: 34px; }
@media (max-height: 700px) {
  .st-window .win-call { min-height: 84px; padding-block: 4px; }
  .st-window .ftray .fs, .st-window .ftray .fs.want, .st-window .ftray .fs.dticket { width: 58px; height: 68px; }
  .st-window .ftray .fs-art { height: 36px; }
  .wbar { padding: 5px 8px; } .wbar.two .dtap { height: 42px; } .wbar.two .cupspot { height: 38px; }
  .wbar .extra .ex-art { width: 36px; }
}
.wbar { align-items: center; padding-bottom: 10px; }
.wbar.two .dbar { flex: 1; }
.wbar.two .caddy { gap: 2px; }
.wbar.two .extra .ex-art { width: 38px; }
.wbar.two .extra .ex-lbl { font-size: 12px; padding: 0 7px; margin-top: -2px; }
.kx .krail:has(.knext:not(:empty)) .readout .slots.big .sl { width: 44px; height: 46px; }
.kx .krail:has(.knext:not(:empty)) .readout .slots.big .sl svg.pic { width: 32px; height: 24px; }
.kx .krail .knext .slots.big .sl { width: 32px; height: 34px; }
.kx .krail .knext .slots.big .sl svg.pic { width: 24px; height: 18px; }
.kx .krail .knext .sl-w { font-size: 9px; }
.kx .krail .knext .kt-car svg { width: 34px; }
.kx .krail .knext .kt-car b { font-size: 12px; }
.kx .krail .knext .k-next { transform: rotate(-1deg) scale(.96); }
.kx .krail .knext .slots { gap: 3px; }
.kx .krail .knext .k-ticket { padding-inline: 4px; }
/* café: the chocolate cap must sit over the round scoop below it */
.stack .layer { position: relative; }
.stack .layer.cheese { z-index: 2; }
/* the drinks machine looks like a real soda fountain: a lit sign on top, a nozzle under each button, a drip tray for the cup */
.wbar.two .dbar { position: relative; padding: 24px 8px 8px; row-gap: 12px; border-radius: 16px 16px 8px 8px;
  background: linear-gradient(90deg, rgba(0,0,0,.08), rgba(255,255,255,.35) 30%, rgba(0,0,0,.06) 70%, rgba(0,0,0,.14)), linear-gradient(#eef1f4, #b9bfc8);
  box-shadow: inset 0 0 0 2px #8d949e, 0 5px 0 #6d737d, 0 8px 10px rgba(0,0,0,.25); }
.wbar.two .dbar-lbl { display: block; position: absolute; top: 4px; left: 10px; right: 10px; height: 15px; writing-mode: horizontal-tb; transform: none; text-align: center;
  font: 900 10.5px/15px var(--body); letter-spacing: 0; color: #fff; border-radius: 5px; background: linear-gradient(#e2453a, #a8231b); box-shadow: 0 0 8px rgba(226,69,58,.6), inset 0 1px 0 rgba(255,255,255,.4); }
.wbar.two .dtap { position: relative; overflow: visible; }
.wbar.two .dtap::after { content: ''; position: absolute; bottom: -11px; left: 50%; width: 10px; height: 9px; margin-left: -5px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, #4b505d, #9aa1ab, #4b505d); }
.wbar.two .cupspot { border: 0; border-radius: 6px; color: #e8ebef;
  background: repeating-linear-gradient(90deg, #3a3e47 0 4px, #5b616c 4px 7px); box-shadow: inset 0 3px 4px rgba(0,0,0,.45), 0 2px 0 #8d949e; }
.wbar.two .cupspot .cup-lbl { color: #e8ebef; }
.wbar.two .cupspot .cup-art svg.ic { opacity: .85; }
.wbar.two .cupspot.pouring { box-shadow: inset 0 0 0 2px var(--yellow), inset 0 3px 4px rgba(0,0,0,.45); }
.wbar.two .cupspot.full { box-shadow: inset 0 0 0 2px #4fd27a, inset 0 3px 4px rgba(0,0,0,.45); }
/* the top bun: a soft shadow under it, not a pale copy of the bun (her ask: golden all round) */
.lid { filter: drop-shadow(0 6px 5px rgba(0,0,0,.28)); }