.sma-stage { place-items: stretch; }
.o66 { width: 100%; height: 100%; overflow: auto; padding: 10px 12px 96px; display: flex; flex-direction: column; gap: 10px; background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 95, 141, .12), transparent 60%), linear-gradient(180deg, #0f1220, #0b0d14); }
:root[data-large="1"] .o66 { font-size: 118%; }
.o66 button { font: inherit; }
.o66 > * { flex: none; }
.o66-hud { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; font-size: 14px; color: var(--sma-muted); }
.o66-hud b { color: var(--sma-ink); font-size: 18px; }
.o66-hud .clock { font-variant-numeric: tabular-nums; } .o66-hud .clock.low { color: var(--sma-bad); }
.o66-hud .combo { color: var(--sma-accent); }
.o66-section { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--sma-faint); margin: 4px 0 -4px; }
.o66-tickets { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 6px; min-height: 128px; scroll-snap-type: x proximity; }
.ticket { flex: 0 0 200px; background: #fff7e6; color: #2a1d0a; border-radius: 10px; padding: 8px 10px; position: relative; scroll-snap-align: start; box-shadow: 0 4px 14px rgba(0,0,0,.35); border-top: 6px solid var(--hue, #ffb547); transition: transform .25s, opacity .25s; }
.ticket.special { background: #ffe4e4; border-top-color: #ff3b4e; flex-basis: 260px; }
.ticket.leaving { opacity: 0; transform: translateY(-20px); }
.ticket .num { font-weight: 800; font-size: 13px; } .ticket .who { font-size: 12px; color: #6b5a3a; margin-bottom: 4px; }
.ticket .dish { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; margin: 2px 0; }
.ticket .dish.done { text-decoration: line-through; opacity: .5; }
.ticket .hint { display: flex; gap: 3px; flex-wrap: wrap; margin: 2px 0 6px; }
.ticket .pat { height: 6px; background: #e5d5b8; border-radius: 3px; overflow: hidden; margin-top: 6px; } .ticket .pat i { display: block; height: 100%; background: #41b36a; width: 100%; transition: width .3s linear; }
.ticket.hurry .pat i { background: #e7a917; } .ticket.panic .pat i { background: #e0393e; }
.ticket .serve { margin-top: 6px; width: 100%; background: var(--sma-accent); color: var(--sma-accent-ink); border: 0; border-radius: 8px; min-height: 40px; font-weight: 700; cursor: pointer; }
.ticket .serve[hidden] { display: none; }
.chip { display: inline-flex; align-items: center; gap: 4px; background: #1e2538; color: #fff; border-radius: 99px; padding: 2px 8px; font-size: 12px; border: 1px solid #343d58; }
.chip i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c, #999); } .chip.cooked { border-style: dashed; }
.ticket .chip { background: #efe3cc; color: #2a1d0a; border-color: #d8c6a2; }
.o66-kitchen { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.station { background: var(--sma-panel); border: 2px solid #262d42; border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 6px; min-height: 150px; cursor: pointer; position: relative; transition: border-color .15s, box-shadow .15s; }
.station.selected { border-color: var(--sma-accent); box-shadow: 0 0 0 3px rgba(255,181,71,.25); }
.station .head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; } .station .head .key { font-weight: 400; }
.station .state { font-size: 12px; color: var(--sma-muted); min-height: 16px; }
.station.cooking .state { color: var(--sma-info); } .station.ready .state { color: var(--sma-good); font-weight: 700; } .station.burnt .state, .station.jammed .state { color: var(--sma-bad); font-weight: 700; }
.station .load { display: flex; gap: 4px; flex-wrap: wrap; min-height: 22px; }
.station .bar { height: 8px; background: #0b0d14; border-radius: 4px; overflow: hidden; } .station .bar i { display: block; height: 100%; width: 0; background: var(--sma-info); transition: width .2s linear; }
.station.ready .bar i { background: var(--sma-good); } .station.burnt .bar i { background: var(--sma-bad); width: 100% !important; }
.station .act { margin-top: auto; display: flex; gap: 6px; }
.station .act .main { flex: 1; min-height: 48px; border-radius: 10px; border: 0; background: var(--sma-raised); color: var(--sma-ink); font-weight: 700; cursor: pointer; }
.station.ready .act .main { background: var(--sma-good); color: #06321a; } .station.burnt .act .main, .station.jammed .act .main { background: var(--sma-bad); color: #fff; } .station.idle.loaded .act .main { background: var(--sma-accent); color: var(--sma-accent-ink); }
.station .act .clear { min-width: 48px; min-height: 48px; border-radius: 10px; border: 1px solid #343d58; background: transparent; color: var(--sma-muted); cursor: pointer; }
.station.pass { background: linear-gradient(180deg, #1a2030, #151a28); }
.station.jammed { animation: shake .4s; } @keyframes shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.station.ready { animation: readypulse 1s infinite alternate; } @keyframes readypulse { to { box-shadow: 0 0 0 4px rgba(94,227,154,.25); } }
.o66-tray { background: var(--sma-panel); border: 1px solid #262d42; border-radius: 12px; padding: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.o66-tray .slots { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-height: 40px; align-items: center; }
.o66-tray .slot { min-height: 40px; border-radius: 99px; padding: 4px 12px; border: 1px solid #343d58; background: var(--sma-raised); color: var(--sma-ink); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.o66-tray .slot.plated { background: var(--sma-accent); color: var(--sma-accent-ink); font-weight: 700; border-color: transparent; cursor: default; }
.o66-tray .empty { color: var(--sma-faint); font-size: 13px; }
.o66-pantry { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.ing { position: relative; min-height: 58px; border-radius: 12px; border: 1px solid #343d58; background: var(--sma-raised); color: var(--sma-ink); display: flex; align-items: center; gap: 8px; padding: 6px 30px 6px 8px; cursor: pointer; text-align: left; font-size: 13px; line-height: 1.15; }
.ing .dot { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #000; font-size: 15px; background: var(--c); box-shadow: inset 0 -4px 0 rgba(0,0,0,.25); }
.ing .k { position: absolute; top: 5px; right: 6px; } .ing:active { transform: scale(.97); }
.o66-msg { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(11,13,20,.94); border-top: 1px solid #262d42; padding: 10px 14px; font-size: 15px; min-height: 44px; display: flex; align-items: center; gap: 8px; z-index: 10; }
.o66-empty { color: var(--sma-faint); font-size: 14px; align-self: center; padding: 10px; }
.o66-msg.bad { color: var(--sma-bad); } .o66-msg.good { color: var(--sma-good); }
.o66-banner { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 18; }
.o66-banner div { background: #ff3b4e; color: #fff; font-family: var(--sma-display); font-size: clamp(40px, 10vw, 96px); padding: 10px 30px; border-radius: 16px; letter-spacing: .05em; transform: rotate(-4deg); box-shadow: 0 20px 60px rgba(0,0,0,.6); animation: bannerIn .5s ease-out; }
@keyframes bannerIn { from { transform: rotate(-4deg) scale(2); opacity: 0; } }
:root[data-motion="reduce"] .ticket, :root[data-motion="reduce"] .station, :root[data-motion="reduce"] .station .bar i, :root[data-motion="reduce"] .ticket .pat i { transition: none; animation: none; }
:root[data-motion="reduce"] .o66-banner div { animation: none; transform: none; }
.o66-help { font-size: 13px; color: var(--sma-muted); } .o66-help .sma-kbd { margin: 0 2px; }
@media (max-width: 640px) { .o66 { padding: 8px 8px 96px; } .o66-kitchen { grid-template-columns: 1fr 1fr; } .ticket { flex-basis: 170px; } .station { min-height: 140px; padding: 8px; } }

/* ---------- diner presentation ---------- */
.o66-art svg { display: block; width: 100%; height: 100%; }
.o66-backdrop { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.o66-backdrop svg { width: 100%; height: 100%; min-width: 900px; position: absolute; left: 50%; top: 0; transform: translateX(-50%); }
.o66-backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,13,20,.05) 0%, rgba(11,13,20,.25) 40%, rgba(11,13,20,.8) 62%, #0b0d14 100%); }
.o66-stars { animation: starDrift 60s linear infinite; }
@keyframes starDrift { to { transform: translateX(-50px); } }
.o66-lamps { animation: lampFlicker 4s ease-in-out infinite alternate; } @keyframes lampFlicker { to { opacity: .82; } }
.o66 { position: relative; z-index: 1; background: none; }
.o66-tickets, .o66-kitchen, .o66-tray, .o66-pantry { position: relative; }
.station { --st: #8d98b8; border-top: 4px solid var(--st); background: linear-gradient(180deg, color-mix(in srgb, var(--st) 10%, var(--sma-panel)), var(--sma-panel) 60%); }
.station[data-id="grill"] { --st: #ff8a3d; } .station[data-id="vat"] { --st: #4fd1ff; } .station[data-id="blender"] { --st: #c084fc; } .station[data-id="oven"] { --st: #ffd84a; } .station[data-id="plating"] { --st: #6ee7b7; }
.station .head .key { background: color-mix(in srgb, var(--st) 25%, var(--sma-raised)); border-color: var(--st); }
.station .art-wrap { height: 64px; position: relative; margin: -2px 0 2px; }
.o66-station-art { height: 64px; }
.o66-station-art .flames, .o66-station-art .bubbles, .o66-station-art .smoke, .o66-station-art .sparks, .o66-station-art .food, .o66-station-art .glow { opacity: 0; }
.station.loaded .o66-station-art .food, .station.cooking .o66-station-art .food, .station.ready .o66-station-art .food { opacity: 1; }
.station.cooking .o66-station-art .flames, .station.cooking .o66-station-art .bubbles, .station.cooking .o66-station-art .glow { opacity: 1; }
.station.cooking .flame { transform-origin: 50% 100%; animation: flicker .35s ease-in-out infinite alternate; } .station.cooking .flame.f1 { animation-delay: .1s; } .station.cooking .flame.f2 { animation-delay: .2s; } .station.cooking .flame.f3 { animation-delay: .05s; }
@keyframes flicker { from { transform: scaleY(.7) scaleX(.9); } to { transform: scaleY(1.15) scaleX(1.05); } }
.station.cooking .bubble { animation: rise 1.4s linear infinite; } .station.cooking .bubble.b1 { animation-delay: .4s; } .station.cooking .bubble.b2 { animation-delay: .8s; } .station.cooking .bubble.b3 { animation-delay: 1.1s; }
@keyframes rise { from { transform: translateY(0); opacity: .9; } to { transform: translateY(-30px); opacity: 0; } }
.station.cooking .spin { animation: spin .5s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }
.station.cooking .float { animation: floatY 1.6s ease-in-out infinite alternate; } .station.cooking .float.f1 { animation-delay: .6s; } @keyframes floatY { from { transform: translateY(2px); } to { transform: translateY(-5px); } }
.station.cooking .glow { animation: glowPulse 1.2s ease-in-out infinite alternate; } @keyframes glowPulse { to { opacity: .4; } }
.station.ready .o66-station-art .food { animation: readyBob 1s ease-in-out infinite alternate; } @keyframes readyBob { to { transform: translateY(-3px); } }
.station.burnt .o66-station-art .food { opacity: 1; filter: brightness(.3) saturate(.3); }
.station.burnt .o66-station-art .smoke { opacity: 1; } .station.burnt .puff { animation: smoke 1.6s ease-out infinite; } .station.burnt .puff.p1 { animation-delay: .5s; } .station.burnt .puff.p2 { animation-delay: 1s; }
@keyframes smoke { from { transform: translateY(0) scale(.6); opacity: .8; } to { transform: translateY(-26px) scale(1.6); opacity: 0; } }
.station.jammed .o66-station-art { transform: rotate(-3deg); filter: saturate(.5); } .station.jammed .o66-station-art .sparks { opacity: 1; }
.station.jammed .spark { animation: sparkle .6s steps(2) infinite; } .station.jammed .spark.s1 { animation-delay: .2s; } .station.jammed .spark.s2 { animation-delay: .4s; } @keyframes sparkle { 50% { opacity: 0; } }
.station.jammed { animation: jamShake .5s; } @keyframes jamShake { 0%, 100% { transform: none; } 25% { transform: translateX(-4px) rotate(-1deg); } 75% { transform: translateX(4px) rotate(1deg); } }
.chip[data-st] { border-color: var(--st); } .chip[data-st] i { background: var(--st); }
.ticket { padding-left: 64px; }
.ticket .face { position: absolute; left: 8px; top: 10px; width: 48px; height: 48px; }
.ticket .face .o66-face { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; }
.ticket .ring { position: absolute; inset: -5px; border-radius: 50%; background: conic-gradient(var(--ring, #41b36a) calc(var(--p, 1) * 360deg), #e5d5b8 0); mask: radial-gradient(circle, transparent 60%, #000 62%); -webkit-mask: radial-gradient(circle, transparent 60%, #000 62%); }
.ticket.hurry .ring { --ring: #e7a917; } .ticket.panic .ring { --ring: #e0393e; animation: ringBlink .6s steps(2) infinite; } @keyframes ringBlink { 50% { opacity: .4; } }
.ticket.special .face .o66-face { box-shadow: 0 0 0 3px #ff3b4e; }
.ticket.arrive { animation: ticketIn .35s ease-out; } @keyframes ticketIn { from { transform: translateY(-16px) rotate(-3deg); opacity: 0; } }
.ticket.served-flash { animation: servedFlash .5s; } @keyframes servedFlash { 30% { background: #d7ffe3; transform: scale(1.03); } }
.o66-dish { width: 40px; height: 37px; display: inline-block; vertical-align: middle; }
.o66-tray .slot.plated { padding: 2px 14px 2px 6px; gap: 8px; }
.station.pass .o66-dish { width: 64px; height: 60px; position: absolute; right: 8px; top: 2px; }
.o66-mini { width: 16px; height: 16px; display: inline-block; }
.chip .o66-mini { margin-left: -2px; }
.o66-fly { position: absolute; z-index: 19; pointer-events: none; width: 44px; height: 41px; animation: fly .55s cubic-bezier(.3,.8,.4,1) forwards; }
@keyframes fly { 70% { opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(.6); opacity: 0; } }
.o66-puff { position: absolute; z-index: 19; pointer-events: none; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle, rgba(200,205,220,.9), rgba(200,205,220,0) 70%); animation: puff .9s ease-out forwards; }
@keyframes puff { to { transform: translateY(-50px) scale(2.2); opacity: 0; } }
.o66-banner div { animation: slam .6s cubic-bezier(.2,1.4,.4,1); } @keyframes slam { from { transform: rotate(-4deg) scale(3); opacity: 0; } 60% { transform: rotate(-4deg) scale(.95); opacity: 1; } }
.o66.quake { animation: quake .5s; } @keyframes quake { 0%, 100% { transform: none; } 20% { transform: translate(-6px, 3px); } 40% { transform: translate(5px, -4px); } 60% { transform: translate(-4px, 2px); } 80% { transform: translate(3px, -2px); } }
.ing { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 12%, var(--sma-raised)), var(--sma-raised)); }
.ing[data-st] { border-left: 4px solid var(--st); }
.o66-hud { background: rgba(11,13,20,.55); border-radius: 10px; padding: 6px 10px; backdrop-filter: blur(3px); }
.o66-section { text-shadow: 0 1px 2px #000; }
:root[data-motion="reduce"] .o66-stars, :root[data-motion="reduce"] .o66-lamps, :root[data-motion="reduce"] .flame, :root[data-motion="reduce"] .bubble, :root[data-motion="reduce"] .spin, :root[data-motion="reduce"] .float, :root[data-motion="reduce"] .glow, :root[data-motion="reduce"] .puff, :root[data-motion="reduce"] .spark, :root[data-motion="reduce"] .station.ready .o66-station-art .food, :root[data-motion="reduce"] .ticket.panic .ring, :root[data-motion="reduce"] .ticket.arrive, :root[data-motion="reduce"] .ticket.served-flash, :root[data-motion="reduce"] .o66-banner div, :root[data-motion="reduce"] .o66.quake, :root[data-motion="reduce"] .station.jammed { animation: none; }
:root[data-motion="reduce"] .o66-fly, :root[data-motion="reduce"] .o66-puff { display: none; }
:root[data-motion="reduce"] .station.cooking .bubble, :root[data-motion="reduce"] .station.burnt .puff { opacity: .6; }
@media (max-width: 640px) { .o66-backdrop svg { min-width: 700px; } .station .art-wrap, .o66-station-art { height: 52px; } .ticket { padding-left: 56px; } .ticket .face { width: 42px; height: 42px; } .ticket .face .o66-face { width: 42px; height: 42px; } }