/* Slot restaurant: the game scene remains pixel art; controls stay in CSS pixels. */
#ui .sl-shell {
  position: absolute; inset: 0; padding: calc(var(--safe-top) + 8px) calc(var(--safe-right) + 10px) calc(var(--safe-bottom) + 8px) calc(var(--safe-left) + 10px);
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 40px minmax(110px, .25fr) 88px minmax(0, 1fr) 100px 60px;
  gap: 6px; color: #fff2d6; pointer-events: none;
}
.sl-header { display: flex; align-items: center; gap: 8px; min-width: 0; text-shadow: 0 2px #1b0c09; }
.sl-header > div { flex: 1; min-width: 0; }
.sl-header > div > b { color: #ffd77a; font-size: 21px; }
.sl-header small { display: block; font-size: 11px; font-weight: normal; color: #ead0a6; }
.sl-wallet { border: 1px solid #e7b65a; background: #20110ded; border-radius: 7px; padding: 3px 7px; white-space: nowrap; }
.sl-money, .sl-spins, .sl-summary-total { font-family: var(--font-px); }
.sl-earned { color: #ffdb73!important; text-align: right; }
.sl-remaining { text-align: center; min-width: 42px; background: #25150edb; border-radius: 6px; }
.sl-spins { font-size: 22px; color: #ffe298; }
.sl-room { min-height: 0; }
.sl-juice { position: fixed; inset: 0; overflow: hidden; z-index: 22; pointer-events: none; }
.sl-head-bubble { position: absolute; pointer-events: none; image-rendering: pixelated; transform-origin: 50% 100%; animation: sl-bubble-in .3s cubic-bezier(.2,1.5,.4,1); }
.sl-head-bubble img { position: absolute; image-rendering: pixelated; object-fit: contain; }
.sl-bubble-bg { inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 2px 0 #150b06); }
.sl-bubble-ring { inset: 7%; width: 86%; height: 80%; filter: sepia(1) saturate(4) hue-rotate(55deg); }
.sl-bubble-dish { top: 17%; left: 17%; width: 66%; height: 57%; }
.sl-bubble-seconds { position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); color: #dfffbd; background: #21150df2; border: 1px solid #d7ba8266; border-radius: 3px; font: bold 10px var(--font-zh); line-height: 12px; padding: 0 2px; white-space: nowrap; }
.sl-head-bubble.urgent .sl-bubble-ring { filter: sepia(1) saturate(6) hue-rotate(325deg); }
.sl-head-bubble.urgent .sl-bubble-seconds { color: #ff9f8b; }
.sl-head-bubble.serving .sl-bubble-ring { opacity: .45; }
.sl-spark { position: absolute; width: 10px; height: 10px; image-rendering: pixelated; filter: drop-shadow(0 0 4px var(--spark-color)); animation: sl-sparks .7s ease-out forwards; }
.sl-match-label { position: absolute; transform: translate(-50%,-50%); white-space: nowrap; font-size: 15px; color: #fff5d1; text-shadow: 0 2px #311a0c,0 0 8px #000; animation: sl-match-text 1.1s ease-out both; }
.sl-match-label.combo { font-size: 27px; color: #ffe58b; text-shadow: 0 3px #b32840,0 5px #4e0923,0 0 14px #ff7a8b; }
.sl-match-label.premium { font-size: 22px; color: #b3efff; text-shadow: 0 3px #27309b,0 0 12px #5bbcff; }
.sl-match-label.gold { font-size: 25px; color: #ffe185; border: 2px solid #ffd77e; border-radius: 8px; padding: 6px 14px; background: #3b230ee8; box-shadow: 0 0 22px #ffb83c99; }
.sl-cooked-flight, .sl-coin-flight { position: absolute; width: 38px; height: 38px; object-fit: contain; image-rendering: pixelated; transform: translate(-50%,-50%); animation: sl-dish-arc .75s ease-in-out both; }
.sl-coin-flight { width: 15px; height: 15px; animation: sl-coin-arc .45s ease-in both; filter: drop-shadow(0 0 3px #ffda67); }
.sl-payment { position: absolute; z-index: 3; transform: translateX(-50%); pointer-events: none; }
.sl-payment-chip { position: relative; display: flex; align-items: center; gap: 4px; padding: 3px 5px; color: #fff3b1; background: #4b2b10; border: 2px solid #ffdb65; box-shadow: 0 2px 0 #9d5b16, 2px 0 #291508, -2px 0 #291508, 0 -2px #291508, 0 4px #291508, inset 0 2px #fff2ad40; font: bold 22px/28px var(--font-px); white-space: nowrap; animation: sl-payment-pop 1.3s steps(12,end) both; }
.sl-payment-chip::after { content:''; position:absolute; left:var(--pay-pointer,50%); bottom:-7px; border:4px solid transparent; border-top-color:#ffdb65; transform:translateX(-50%); }
.sl-payment-chip img { width: 28px; height: 28px; image-rendering: pixelated; animation: sl-payment-coin .45s steps(4,end) 2; }
.sl-payment-chip b { text-shadow: 1px 2px #8c4510; }
.sl-payment.compact .sl-payment-chip { font-size: 16px; line-height: 22px; padding: 1px 2px; gap: 2px; }
.sl-payment.compact img { width: 22px; height: 22px; }
.sl-pay-glint { position: absolute; width: 4px; height: 4px; right: -5px; top: -5px; background: #fff6bc; box-shadow: -4px 0 #ffc84e, 4px 0 #ffc84e, 0 -4px #ffc84e, 0 4px #ffc84e; animation: sl-payment-glint .6s steps(2,end) 2; }
@keyframes sl-payment-pop { 0% { opacity: 0; transform: scale(.7); } 15%,70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
@keyframes sl-payment-coin { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(.25); } }
@keyframes sl-payment-glint { 0%,100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes sl-bubble-in { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes sl-sparks { 0% { opacity: 1; transform: translate(-50%,-50%) scale(.5); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.3); } }
@keyframes sl-match-text { 0% { opacity: 0; transform: translate(-50%,-20%) scale(.6); } 20% { opacity: 1; transform: translate(-50%,-70%) scale(1.12); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-150%) scale(1); } }
@keyframes sl-dish-arc { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.3); } 22% { opacity: 1; transform: translate(-50%,-85%) scale(1.25); } 90% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(var(--dx) - 50%),calc(var(--dy) - 50%)) scale(.65); } }
@keyframes sl-coin-arc { 0% { opacity: 1; transform: translate(-50%,-50%); } 30% { transform: translate(-50%,-150%) scale(1.15); } 100% { opacity: 0; transform: translate(var(--dx),var(--dy)) scale(.6); } }
.sl-guests, .sl-service { min-width: 0; min-height: 0; background: #1c100dd9; border: 1px solid #e4b76b66; border-radius: 8px; padding: 4px 6px; }
.sl-label { height: 15px; display: flex; justify-content: space-between; color: #f4cd91; font-size: 11px; line-height: 15px; }
.sl-label > span { color: #c8b8a2; }
.sl-orders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 4px; height: calc(100% - 15px); }
.sl-order { min-width: 0; display: flex; align-items: center; gap: 3px; border-radius: 5px; border: 1px solid #e6b77566; background: #58332366; padding: 2px 3px; }
.sl-order img { width: 26px; height: 26px; object-fit: contain; flex: none; image-rendering: pixelated; }
.sl-order div { min-width: 0; flex: 1; }
.sl-order b { font-size: 11px; font-weight: normal; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-order small { display: flex; justify-content: space-between; gap: 2px; font-size: 10px; color: #c8ecb2; white-space: nowrap; }
.sl-order small em { font-style: normal; }
.sl-order.urgent { border-color: #fc8472; background: #67261c88; }
.sl-order.urgent small { color: #ffb5a3; }
.sl-order.vacant { justify-content: center; color: #a58e7699; font-size: 11px; border-style: dashed; background: #0002; }
.sl-board-area { min-height: 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.sl-board { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); grid-template-rows: repeat(7,minmax(0,1fr)); flex: none; overflow: hidden; border: 4px solid #d4a95e; outline: 2px solid #29130c; box-shadow: 0 4px 0 #1b0d08, 0 0 0 3px #81512a; background: #e1bf8b; }
.sl-cell { min-width: 0; min-height: 0; position: relative; display: grid; place-items: center; background: #dfbc84; border: 1px solid #82593455; }
.sl-cell:nth-child(even) { background: #cba46f; }
.sl-cell img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 2px 0 #563b2966); }
.sl-ingredient { position:absolute; inset:0; display:grid; place-items:center; }
.sl-cell.gold { background: #ecc767; }
.sl-cell.matched { background: #fff0a3; z-index: 1; }
.sl-cell.matched img { animation: sl-pop .24s ease-in forwards; }
.sl-cell .falling { animation: sl-fall .32s cubic-bezier(.15,.7,.25,1) both; animation-delay: var(--delay,0ms); }
.sl-board.rolling .falling { animation-duration: .46s; }
.sl-status { font-size: 11px; color: #ffe7bd; text-shadow: 0 1px 3px #000; line-height: 16px; min-height: 16px; text-align: center; }
.sl-service { display: grid; grid-template-rows: 15px minmax(0,1fr) 15px 24px; }
.sl-stock, .sl-counter { min-width: 0; min-height: 0; display: flex; align-items: center; gap: 5px; overflow-x: auto; overflow-y: hidden; pointer-events: auto; touch-action: pan-x; overscroll-behavior: contain; scrollbar-width: thin; }
.sl-chip { flex: none; display: inline-flex; align-items: center; gap: 3px; font-size: 11px; border: 1px solid #d4a55a66; border-radius: 5px; padding: 1px 4px; background: #2a1712; white-space: nowrap; }
.sl-chip img { width: 21px; height: 21px; object-fit: contain; image-rendering: pixelated; }
.sl-chip.plate img { width: 28px; height: 26px; }
.sl-chip small { display: block; color: #ffda79; font-size: 10px; }
.sl-empty { font-size: 11px; color: #c9b49a; white-space: nowrap; }
.sl-controls { display: flex; align-items: stretch; justify-content: center; gap: 12px; min-width: 0; }
.sl-controls > span { font-size: 10px; color: #e0ccb0; line-height: 1.65; align-self: center; text-shadow: 0 1px 3px #000; }
#ui .sl-spin { position: relative; padding: 5px 18px 5px 47px; min-width: 155px; flex: 1; max-width: 300px; min-height: 48px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.sl-spin strong { font-size: 22px; font-weight: normal; }
#ui .sl-auto { flex:0 0 84px; min-width:72px; min-height:48px; padding:5px 10px; font-size:17px; color:#e7ffe8; border-color:#174527; background:linear-gradient(#368c4d,#246b39); box-shadow:0 4px 0 #153f24,inset 0 2px 0 #79c88d; touch-action:manipulation; }
#ui .sl-auto[aria-pressed="true"] { color:#102e17; background:linear-gradient(#b1ef8c,#65cd62); box-shadow:0 4px 0 #245b2c,inset 0 2px 0 #e0ffd1; }
#ui .sl-auto:active { transform:translateY(3px); box-shadow:0 1px 0 #153f24,inset 0 2px 0 #b7ecaa; }
#ui .sl-auto:focus-visible { outline:2px solid #d8ffb9; outline-offset:3px; }
.sl-lever { position: absolute; left: 15px; top: 8px; width: 16px; height: 33px; border-radius: 3px; background: #745638; border: 2px solid #3b2303; }
.sl-lever i { position: absolute; left: 4px; top: -2px; height: 24px; width: 5px; background: #eef3e4; border: 1px solid #665137; transform-origin: center bottom; transition: transform .2s; }
.sl-lever i::before { content: ''; position: absolute; width: 15px; height: 15px; border: 2px solid #6a201c; border-radius: 50%; background: #f45943; left: -6px; top: -7px; }
.sl-spin.pulled .sl-lever i { transform: rotate(150deg); }
.sl-fly { position: fixed; width: 38px; height: 38px; image-rendering: pixelated; object-fit: contain; z-index: 24; pointer-events: none; animation: sl-deliver .6s ease-in-out both; }
#ui .sl-summary { position: absolute; inset: 0; z-index: 40; padding: calc(var(--safe-top) + 12px) calc(var(--safe-right) + 12px) calc(var(--safe-bottom) + 12px) calc(var(--safe-left) + 12px); display: flex; align-items: center; justify-content: center; background: #080808bb; pointer-events: auto; }
#ui .sl-summary .sh-card { width: min(430px,100%); max-height: 100%; text-align: center; }
.sl-summary p { margin: 6px 0; font-size: 13px; color: #e8cda3; }
.sl-summary-total { font-size: 34px; color: #ffd86c; margin: 8px 0; }
.sl-summary dl { margin: 6px 0 12px; }
.sl-summary dl div { display: flex; justify-content: space-between; padding: 5px 2px; font-size: 15px; }
.sl-summary dd { margin: 0; color: #ffdb8e; }
.suspended *, .suspended *::before { animation-play-state: paused!important; }
@keyframes sl-fall { from { transform: translateY(calc(-1 * var(--drop))); opacity: .1; } to { transform: none; opacity: 1; } }
@keyframes sl-pop { 40% { transform: scale(1.18); filter: brightness(1.5); } to { transform: scale(.15); opacity: 0; } }
@keyframes sl-deliver { to { transform: translate(var(--fly-x),var(--fly-y)) scale(.7); } }
@media (orientation: portrait) and (max-height: 680px) {
  #ui .sl-shell { grid-template-rows: 32px 100px 17px minmax(0,1fr) 82px 52px; gap: 4px; padding-top: calc(var(--safe-top) + 6px); padding-bottom: calc(var(--safe-bottom) + 6px); }
  .sl-guests { padding-block: 1px; }
  .sl-guests .sl-orders { display: none; }
  .sl-header > div > b { font-size: 17px; }
  .sl-header > div > small { font-size: 10px; }
  .sl-order img { width: 21px; height: 21px; }
  .sl-order b, .sl-order small { font-size: 10px; }
  .sl-service { grid-template-rows: 13px minmax(0,1fr) 13px 21px; padding-block: 2px; }
  .sl-label { height: 13px; line-height: 13px; }
  .sl-guests .sl-orders { height: calc(100% - 13px); }
  .sl-controls { gap: 7px; }
}
@media (orientation: landscape) {
  #ui .sl-shell { grid-template-columns: minmax(0,43fr) minmax(0,57fr); grid-template-rows: 40px minmax(40px,1fr) 92px minmax(84px,.55fr) 60px; gap: 8px; }
  .sl-header { grid-column: 1; grid-row: 1; }
  .sl-room { grid-column: 1; grid-row: 2; }
  .sl-guests { grid-column: 1; grid-row: 3; }
  .sl-service { grid-column: 1; grid-row: 4; }
  .sl-controls { grid-column: 1; grid-row: 5; }
  .sl-board-area { grid-column: 2; grid-row: 1 / 6; }
  .sl-service { grid-template-rows: 17px minmax(28px,1fr) 17px 28px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  #ui .sl-shell { grid-template-rows: 30px minmax(85px,1fr) 17px 76px 48px; gap: 4px; padding-top: calc(var(--safe-top) + 4px); padding-bottom: calc(var(--safe-bottom) + 6px); }
  .sl-guests { padding-block: 1px; }
  .sl-guests .sl-orders { display: none; }
  .sl-header > div > b { font-size: 15px; }
  .sl-header > div > small { display: none; }
  .sl-spins { font-size: 18px; }
  .sl-order img { width: 19px; height: 19px; }
  .sl-order b, .sl-order small { font-size: 9px; }
  .sl-order { padding: 1px; gap: 1px; }
  .sl-service { grid-template-rows: 12px minmax(0,1fr) 12px 20px; padding: 2px 5px; }
  .sl-label { font-size: 10px; height: 12px; line-height: 12px; }
  .sl-controls { gap: 4px; }
  .sl-controls > span { display: none; }
  #ui .sl-spin { min-width: 120px; padding-block: 2px; }
  .sl-spin strong { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-cell .falling, .sl-cell.matched img, .sl-fly, .sl-head-bubble, .sl-cooked-flight, .sl-coin-flight, .sl-match-label { animation-duration: .01ms!important; animation-delay: 0ms!important; }
  .sl-payment-chip, .sl-payment-chip img, .sl-pay-glint { animation: none; }
  .sl-lever i { transition: none; }
}

/* V3 finite pantry and serving lane. Tier colors follow the ingredient through drops. */
.tier-1 { --tier-color: #d49258; }
.tier-2 { --tier-color: #e0efff; }
.tier-3 { --tier-color: #ffd22f; }
.sl-cell:is(.tier-1,.tier-2,.tier-3) img {
  filter: drop-shadow(1px 0 0 var(--tier-color)) drop-shadow(-1px 0 0 var(--tier-color)) drop-shadow(0 1px 0 var(--tier-color)) drop-shadow(0 -1px 0 var(--tier-color));
}
.sl-tier-tag { position: absolute; right: 1px; bottom: 1px; font: 9px var(--font-zh); line-height: 12px; padding: 0 2px; color: var(--tier-color); background: #281710ee; border: 1px solid var(--tier-color); border-radius: 2px; z-index: 2; pointer-events: none; }
.sl-demand-frame { position:absolute; inset:1px; border:2px solid #58eeff; box-shadow:inset 0 0 0 1px #075366,0 0 0 1px #075366; z-index:3; pointer-events:none; }
.sl-demand-frame b { position:absolute; right:-2px; top:-2px; padding:0 2px; color:#e9fdff; background:#075366; border:1px solid #58eeff; font:bold 13px/16px var(--font-zh); }
.sl-chip:is(.tier-1,.tier-2,.tier-3) { border-color: var(--tier-color); }
.sl-cooked-flight:is(.tier-1,.tier-2,.tier-3) { filter: drop-shadow(0 0 3px var(--tier-color)); }
.sl-cell.serving-row { background: #d9a648; border-top: 2px solid #ffe68d; box-shadow: inset 0 -3px #976016; }
.sl-cell.serving-row::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg,transparent 20%,#fff5b344 50%,transparent 80%); background-size: 200% 100%; animation: sl-lane-glow 2.4s linear infinite; }
.sl-row-label { position: absolute; left: 0; top: 0; padding: 0 2px; font-size: 8px; line-height: 11px; white-space: nowrap; color: #fff5ce; background: #694315ee; border-radius: 2px; z-index: 3; pointer-events: none; }
.sl-cell.serving-out { box-shadow: inset 0 0 12px #fff4ac; }
.sl-cell.upgrading img { animation: sl-tier-up .28s ease-out; }
.sl-supplies { display: flex; gap: 3px; min-width: 0; overflow-x: auto; overflow-y: hidden; pointer-events: auto; touch-action: pan-x; scrollbar-width: thin; }
.sl-supplies .sl-chip { flex: 1; justify-content: center; padding: 0 2px; font-size: 10px; }
.sl-supplies .sl-chip img { width: 18px; height: 18px; }
.sl-chip.exhausted { opacity: .45; }
.finite-night .sl-service { grid-template-rows: 15px minmax(28px,1fr) 15px 24px 15px 24px; overflow-y: auto; pointer-events: auto; touch-action: pan-y; }
#ui .sl-shell.finite-night { grid-template-rows: 40px minmax(110px,.25fr) 88px minmax(0,1fr) 142px 60px; }
@keyframes sl-lane-glow { from { background-position: 200% 0; } to { background-position: 0 0; } }
@keyframes sl-tier-up { 50% { transform: scale(1.2); opacity: .65; } }
@media (orientation:portrait) and (max-height:680px) {
  #ui .sl-shell.finite-night { grid-template-rows: 32px 110px 17px minmax(0,1fr) 124px 52px; }
  .finite-night .sl-service { grid-template-rows: 13px minmax(24px,1fr) 13px 21px 13px 22px; }
}
@media (orientation:landscape) {
  #ui .sl-shell.finite-night { grid-template-rows: 40px minmax(110px,1fr) 92px minmax(142px,.55fr) 60px; }
}
@media (orientation:landscape) and (max-height:500px) {
  #ui .sl-shell.finite-night { grid-template-rows: 30px minmax(100px,1fr) 17px 105px 44px; gap: 3px; }
  .finite-night .sl-service { grid-template-rows: 13px minmax(20px,1fr) 13px 16px 13px 20px; }
  .sl-supplies .sl-chip { font-size: 9px; gap: 1px; }
  .sl-supplies .sl-chip img { width: 14px; height: 16px; }
}
@media (prefers-reduced-motion:reduce) {
  .sl-cell.serving-row::before, .sl-cell.upgrading img { animation: none; }
}

/* V4 has no pantry counts or completed-food shelf; give that space to the board. */
.direct-night .sl-service { grid-template-rows: 17px minmax(24px,1fr); }
#ui .sl-shell.direct-night { grid-template-rows: 40px minmax(110px,.25fr) 88px minmax(0,1fr) 56px 60px; }
.sl-fly:is(.tier-1,.tier-2,.tier-3) { filter: drop-shadow(0 0 3px var(--tier-color)); }
@media (orientation:portrait) and (max-height:680px) {
  #ui .sl-shell.direct-night { grid-template-rows: 32px 100px 17px minmax(0,1fr) 48px 52px; }
  .direct-night .sl-service { grid-template-rows: 13px minmax(21px,1fr); }
}
@media (orientation:landscape) {
  #ui .sl-shell.direct-night { grid-template-rows: 40px minmax(110px,1fr) 92px 56px 60px; }
}
@media (orientation:landscape) and (max-height:500px) {
  #ui .sl-shell.direct-night { grid-template-rows: 30px minmax(85px,1fr) 17px 46px 48px; }
  .direct-night .sl-service { grid-template-rows: 13px minmax(20px,1fr); }
}

/* Arcade presentation: all durations fit the committed model stages. */
.sl-board-wrap { position:relative; flex:none; line-height:0; }
.sl-cell { background-image:var(--sl-wood-a); background-size:100% 100%; image-rendering:pixelated; }
.sl-cell:nth-child(even) { background-image:var(--sl-wood-b); }
.sl-cell.serving-row { background-image:linear-gradient(#e5aa3c66,#d8941f66),var(--sl-wood-a); }
.sl-cell.gold { background-image:linear-gradient(#ffd55055,#ffd55055),var(--sl-wood-a); }
.sl-cell.matched { box-shadow:inset 0 0 0 2px #fff6b4; }
.sl-cell.matched::after { content:''; position:absolute; inset:2px; pointer-events:none; background:#fff8c8; animation:sl-cell-flash .38s ease-out both; }
.sl-cell.matched img { animation:sl-arcade-pop .38s ease-in both; }
.sl-cell .falling { animation:sl-arcade-fall .42s linear both; animation-delay:0ms; transform-origin:50% 100%; }
.sl-cell.upgrading::after { content:''; position:absolute; inset:3px; border:2px solid var(--tier-color); box-shadow:0 0 8px var(--tier-color); animation:sl-upgrade-ring .28s ease-out both; pointer-events:none; }
.sl-cell.serving-out::after { border-radius:50%; background:transparent; border:2px solid #fff0a0; animation:sl-upgrade-ring .38s ease-out both; }
.sl-board.rolling > .sl-cell > img, .sl-board.rolling > .sl-cell > .sl-tier-tag, .sl-board.rolling > .sl-cell > .sl-ingredient { visibility:hidden; }
.sl-reels { position:absolute; inset:4px; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); overflow:hidden; pointer-events:none; z-index:4; }
.sl-reel { position:relative; min-width:0; overflow:hidden; }
.sl-reel-strip { height:300%; display:grid; grid-template-rows:repeat(21,minmax(0,1fr)); will-change:transform; }
.sl-reel-cell, .sl-reel-cell:nth-child(even) { background:none; border-color:transparent; line-height:normal; }
.sl-reel:not(.stopped) .sl-reel-cell img { filter:drop-shadow(0 -6px #fff2bb66) drop-shadow(0 -13px #ffc64d22); }
.sl-reel::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent 14%,#fff7b522 15%,transparent 17%,transparent 80%,#ffed9b33 81%,transparent 83%); pointer-events:none; }
.sl-reel.stopped::after { opacity:0; }
.sl-spin.pulled .sl-lever i { transform:none; transition:none; animation:sl-lever-pull .7s ease-out both; }
.sl-impact-ring { position:absolute; border:2px solid var(--ring-color); box-shadow:0 0 6px var(--ring-color); pointer-events:none; animation:sl-impact .38s ease-out both; }
.sl-match-label.combo { max-width:calc(100vw - 24px); font-size:clamp(16px,3vw,25px); padding:3px 10px; background:#392316e8; border:2px solid #ffe6a1; border-radius:3px; }
.sl-match-label.combo-3 { color:#d0faff; border-color:#8febff; }
.sl-match-label.combo-4 { color:#fff3a3; border-color:#ffd042; text-shadow:0 2px #55310b,0 0 6px #f9c349; }
.sl-flight-trail { position:fixed; width:38px; height:38px; image-rendering:pixelated; object-fit:contain; pointer-events:none; opacity:var(--trail-opacity); animation:sl-deliver .65s ease-in-out both; }
@keyframes sl-cell-flash { 0%,65%,100% { opacity:0; } 22% { opacity:.65; } }
@keyframes sl-arcade-pop { 0% { transform:scale(1); opacity:1; } 25% { transform:scale(1.16,.9); } 46% { transform:scale(.94,1.18); opacity:1; } 100% { transform:scale(.12); opacity:0; } }
@keyframes sl-arcade-fall { 0% { transform:translateY(calc(-1 * var(--drop))); opacity:.3; } 72% { transform:translateY(0) scale(1.12,.85); opacity:1; } 86% { transform:translateY(-5%) scale(.95,1.05); } 100% { transform:none; opacity:1; } }
@keyframes sl-lever-pull { 0% { transform:rotate(0); } 20%,32% { transform:rotate(145deg); } 58% { transform:rotate(-12deg); } 76%,100% { transform:rotate(0); } }
@keyframes sl-upgrade-ring { 0% { transform:scale(.6); opacity:0; } 25% { opacity:1; } 100% { transform:scale(1.22); opacity:0; } }
@keyframes sl-impact { 0% { transform:translate(-50%,-50%) scale(.4) rotate(0); opacity:1; } 100% { transform:translate(-50%,-50%) scale(1.6) rotate(25deg); opacity:0; } }
@media (prefers-reduced-motion:reduce) {
  .sl-reels,.sl-impact-ring,.sl-flight-trail { display:none; }
  .sl-board.rolling > .sl-cell > img,.sl-board.rolling > .sl-cell > .sl-tier-tag,.sl-board.rolling > .sl-cell > .sl-ingredient { visibility:visible; }
  .sl-spin.pulled .sl-lever i,.sl-cell.matched::after,.sl-cell.upgrading::after,.sl-cell.serving-out::after { animation:none; }
  .sl-cell.matched::after { opacity:.2; }
  .sl-cell .falling,.sl-cell.matched img { animation:none; }
}

/* Selected classic A / A2 inertia: subpixel travel with no reverse bounce. */
.sl-reel-strip{backface-visibility:hidden}
.sl-reel:not(.stopped) .sl-reel-cell img{filter:none}
.sl-reel::after{background:none}
.sl-spin.pulled .sl-lever i{animation-duration:1.2s}
.sl-cell.matched img{animation-name:sl-classic-pop}
@keyframes sl-classic-pop{0%{transform:scale(1);opacity:1}24%{transform:scale(1.19);opacity:1}55%{opacity:1}100%{transform:scale(.05);opacity:0}}
@keyframes sl-deliver{
0%{transform:translate(calc(var(--fly-x) * 0.000000 - 50%),calc(var(--fly-y) * 0.000000 - var(--fly-arc,0px) * 0.000000 - 50%)) scale(1.000000)}
5%{transform:translate(calc(var(--fly-x) * 0.007250 - 50%),calc(var(--fly-y) * 0.007250 - var(--fly-arc,0px) * 0.156434 - 50%)) scale(0.987500)}
10%{transform:translate(calc(var(--fly-x) * 0.028000 - 50%),calc(var(--fly-y) * 0.028000 - var(--fly-arc,0px) * 0.309017 - 50%)) scale(0.975000)}
15%{transform:translate(calc(var(--fly-x) * 0.060750 - 50%),calc(var(--fly-y) * 0.060750 - var(--fly-arc,0px) * 0.453990 - 50%)) scale(0.962500)}
20%{transform:translate(calc(var(--fly-x) * 0.104000 - 50%),calc(var(--fly-y) * 0.104000 - var(--fly-arc,0px) * 0.587785 - 50%)) scale(0.950000)}
25%{transform:translate(calc(var(--fly-x) * 0.156250 - 50%),calc(var(--fly-y) * 0.156250 - var(--fly-arc,0px) * 0.707107 - 50%)) scale(0.937500)}
30%{transform:translate(calc(var(--fly-x) * 0.216000 - 50%),calc(var(--fly-y) * 0.216000 - var(--fly-arc,0px) * 0.809017 - 50%)) scale(0.925000)}
35%{transform:translate(calc(var(--fly-x) * 0.281750 - 50%),calc(var(--fly-y) * 0.281750 - var(--fly-arc,0px) * 0.891007 - 50%)) scale(0.912500)}
40%{transform:translate(calc(var(--fly-x) * 0.352000 - 50%),calc(var(--fly-y) * 0.352000 - var(--fly-arc,0px) * 0.951057 - 50%)) scale(0.900000)}
45%{transform:translate(calc(var(--fly-x) * 0.425250 - 50%),calc(var(--fly-y) * 0.425250 - var(--fly-arc,0px) * 0.987688 - 50%)) scale(0.887500)}
50%{transform:translate(calc(var(--fly-x) * 0.500000 - 50%),calc(var(--fly-y) * 0.500000 - var(--fly-arc,0px) * 1.000000 - 50%)) scale(0.875000)}
55%{transform:translate(calc(var(--fly-x) * 0.574750 - 50%),calc(var(--fly-y) * 0.574750 - var(--fly-arc,0px) * 0.987688 - 50%)) scale(0.862500)}
60%{transform:translate(calc(var(--fly-x) * 0.648000 - 50%),calc(var(--fly-y) * 0.648000 - var(--fly-arc,0px) * 0.951057 - 50%)) scale(0.850000)}
65%{transform:translate(calc(var(--fly-x) * 0.718250 - 50%),calc(var(--fly-y) * 0.718250 - var(--fly-arc,0px) * 0.891007 - 50%)) scale(0.837500)}
70%{transform:translate(calc(var(--fly-x) * 0.784000 - 50%),calc(var(--fly-y) * 0.784000 - var(--fly-arc,0px) * 0.809017 - 50%)) scale(0.825000)}
75%{transform:translate(calc(var(--fly-x) * 0.843750 - 50%),calc(var(--fly-y) * 0.843750 - var(--fly-arc,0px) * 0.707107 - 50%)) scale(0.812500)}
80%{transform:translate(calc(var(--fly-x) * 0.896000 - 50%),calc(var(--fly-y) * 0.896000 - var(--fly-arc,0px) * 0.587785 - 50%)) scale(0.800000)}
85%{transform:translate(calc(var(--fly-x) * 0.939250 - 50%),calc(var(--fly-y) * 0.939250 - var(--fly-arc,0px) * 0.453990 - 50%)) scale(0.787500)}
90%{transform:translate(calc(var(--fly-x) * 0.972000 - 50%),calc(var(--fly-y) * 0.972000 - var(--fly-arc,0px) * 0.309017 - 50%)) scale(0.775000)}
95%{transform:translate(calc(var(--fly-x) * 0.992750 - 50%),calc(var(--fly-y) * 0.992750 - var(--fly-arc,0px) * 0.156434 - 50%)) scale(0.762500)}
100%{transform:translate(calc(var(--fly-x) * 1.000000 - 50%),calc(var(--fly-y) * 1.000000 - var(--fly-arc,0px) * 0.000000 - 50%)) scale(0.750000)}
}

.sl-fly{animation-timing-function:linear}

/* No duplicate guest list: orders remain above the restaurant customers. */
#ui .sl-shell.ledger-layout { --service-height:100px; grid-template-columns:minmax(0,1fr); grid-template-rows:40px minmax(110px,.35fr) minmax(0,1fr) var(--service-height) 60px; }
#ui .sl-shell.ledger-layout.direct-night { --service-height:56px; }
#ui .sl-shell.ledger-layout.finite-night { --service-height:142px; }
.ledger-layout .sl-header { grid-column:1; grid-row:1; }
.ledger-layout .sl-room { grid-column:1; grid-row:2; }
.ledger-layout .sl-board-area { grid-column:1; grid-row:3; }
.ledger-layout .sl-service { grid-column:1; grid-row:4; }
.ledger-layout .sl-controls { grid-column:1; grid-row:5; }
#ui .sl-summary .sh-card { width:min(470px,100%); overflow:hidden; scrollbar-width:none; }
#ui .sl-summary .sh-card::-webkit-scrollbar,.ledger-layout .sl-stock::-webkit-scrollbar,.ledger-layout .sl-counter::-webkit-scrollbar,.ledger-layout .sl-supplies::-webkit-scrollbar { display:none; }
.ledger-layout .sl-stock,.ledger-layout .sl-counter,.ledger-layout .sl-supplies { scrollbar-width:none; }
.sl-summary dl { text-align:left; }
.sl-summary dl div { align-items:center; gap:8px; }
.sl-summary dt { min-width:0; overflow-wrap:anywhere; }
.sl-summary dd { flex:none; white-space:nowrap; font-variant-numeric:tabular-nums; text-align:right; }
.sl-summary .sl-summary-tier { --tier-color:#cccccc; padding-left:15px; font-size:13px; }
.sl-summary .sl-summary-tier.tier-1 { --tier-color:#d49258; }
.sl-summary .sl-summary-tier.tier-2 { --tier-color:#e0efff; }
.sl-summary .sl-summary-tier.tier-3 { --tier-color:#ffd22f; }
.sl-summary .sl-summary-tier dt,.sl-summary .sl-summary-tier dd { color:var(--tier-color); }
.sl-summary-tier dt::before { content:''; display:inline-block; width:6px; height:6px; border:1px solid var(--tier-color); background:#2b1b10; margin-right:6px; }
.sl-summary .sl-summary-penalties { margin-top:4px; border-top:1px solid #e6b77b44; }
.sl-summary .sl-summary-penalties dd,.sl-match-label.penalty { color:#ff9b8c; }
.sl-summary-discard small { display:block; margin-top:3px; font-size:10px; color:#c8b8a2; }
.sl-summary .sl-summary-discard dd { color:#d0c1a9; font-size:13px; }
@media (orientation:portrait) and (max-height:680px) {
 #ui .sl-shell.ledger-layout { grid-template-rows:32px 100px minmax(0,1fr) var(--service-height) 52px; }
 #ui .sl-shell.ledger-layout.direct-night { --service-height:48px; }
 #ui .sl-shell.ledger-layout.finite-night { --service-height:124px; }
}
@media (orientation:landscape) {
 #ui .sl-shell.ledger-layout { grid-template-columns:minmax(0,43fr) minmax(0,57fr); grid-template-rows:40px minmax(100px,1fr) var(--service-height) 60px; }
 .ledger-layout .sl-board-area { grid-column:2; grid-row:1 / 5; }
 .ledger-layout .sl-service { grid-column:1; grid-row:3; }
 .ledger-layout .sl-controls { grid-column:1; grid-row:4; }
}
@media (orientation:landscape) and (max-height:500px) {
 #ui .sl-shell.ledger-layout { grid-template-rows:30px minmax(65px,1fr) var(--service-height) 48px; }
 #ui .sl-shell.ledger-layout.direct-night { --service-height:46px; }
 #ui .sl-shell.ledger-layout.finite-night { --service-height:105px; }
 #ui .sl-summary .sh-card { padding:10px 14px; }
 .sl-summary-total { font-size:28px; margin:5px 0; }
}
@media (max-width:360px) {
 .sl-summary dl div { font-size:13px; gap:5px; }
 .sl-summary .sl-summary-tier { font-size:12px; padding-left:10px; }
 .sl-summary .sl-summary-discard dd { font-size:11px; }
}

#ui .sl-auto.locked{background:linear-gradient(#b8bec5,#78828c);color:#18232a;border-color:#404b56;box-shadow:0 4px 0 #414b55,inset 0 2px 0 #e2e6e9}
.sl-unlock{position:absolute;inset:0;z-index:100;display:grid;place-items:center;background:#03121ddd;padding:16px;pointer-events:auto}
.sl-unlock .sh-card{width:min(480px,100%);max-height:100%;overflow:auto;scrollbar-width:none;touch-action:pan-y;text-align:center}
.sl-unlock header{display:flex;align-items:center;gap:12px}.sl-unlock h2{flex:1;font-size:20px}.sl-unlock p{line-height:1.6}
.sl-unlock .unlock-note{color:#ffe08a}.sl-unlock .unlock-confirm{max-width:100%;white-space:normal}

#ui .layer-cook-unlock{z-index:100;pointer-events:auto}
#ui .sl-unlock .sh-card{animation:none;opacity:1;transform:none}