/* The live kitchen is a single play surface; management remains a between-shifts view. */
.game-shell:has(.play-scene) { overflow:clip; max-width: 900px; margin-inline: auto; }
#game-content { position: relative; }
.play-scene.service-grid { display: block; min-height: 0; padding: 0 24px; background: #eee8d7; color: #293c31; }
.play-hud { display: flex; gap: 16px; align-items: center; padding: 12px 0; }
.play-hud .time { font-size: 23px; color: #913a27; }
.play-hud small { display: block; font-size: 11px; margin-top: 3px; color: #4e5d4f; }
.play-hud .shift-progress { margin-left: auto; text-align: right; }
.shift-progress b { font-size: 21px; }
.shift-progress b span { font-size: 12px; }
.play-hud button { font-size: 12px; min-height: 44px; padding: 8px 12px; }
.guest-counter { display: flex; gap: 10px; padding: 3px 0 12px; }
.guest-slot { flex: 1; min-width: 0; display: flex; align-items: end; gap: 10px; background: #e0decb; border: 2px solid transparent; border-radius: 10px; padding: 4px 10px 0; text-align: left; }
.guest-slot.selected { border-color: #40634d; background: #edf0de; }
.guest-portrait { display: block; width: 68px; height: 76px; flex: 0 0 68px; background-repeat: no-repeat; background-size: 200% 200%; }
.portrait-0 { background-position: 0 0; }
.portrait-1 { background-position: 100% 0; }
.portrait-2 { background-position: 0 100%; }
.portrait-3 { background-position: 100% 100%; }
.guest-info { flex: 1; min-width: 0; padding: 8px 0 5px; }
.guest-info b { font-size: 14px; }
.guest-info small { display: block; font-size: 11px; margin-top: 5px; color: #4e5d4f; }
.guest-info progress { margin: 6px 0 0; }
.waiting-seat { background: none; border: 1px dashed #a7ab97; justify-content: center; align-items: center; flex-direction: column; gap: 0; color: #63715d; padding: 8px; }
.waiting-seat>span { font-size: 25px; }
.waiting-seat small { font-size: 11px; }
.order-ticket { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: #fffdf5; border-radius: 8px; }
.order-ticket b { font-size: 13px; }
.order-ticket .text-button { white-space: nowrap; font-size: 11px; color: #4d5e50; }
.recipe-pieces { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 6px; }
.recipe-piece { font-size: 12px; color: #565e4d; }
.recipe-piece.matched { color: #2b6847; font-weight: 650; }
.cooking-coach { display: flex; gap: 12px; align-items: center; padding: 10px 14px; margin: 10px 0; background: #dce5ce; border-radius: 8px; }
.cooking-coach>span { font-size: 26px; color: #446447; }
.cooking-coach b { font-size: 12px; }
.cooking-coach p { font-size: 12px; line-height: 1.5; margin: 3px 0 0; }
.cooking-coach small { font-size: 10px; display: block; margin-top: 3px; color: #4c604d; }
.cooking-board { display: grid; grid-template-columns: 1fr 1fr; min-height: 210px; margin-top: 12px; background: #d2bb92; border-radius: 10px; border-bottom: 6px solid #8e7452; overflow: hidden; }
.station-label { font-size: 10px; letter-spacing: 1.1px; text-align: center; color: #594c33; margin: 12px 0 3px; }
.stove-station { background: #c7b38d; padding: 0 16px 12px; }
.stove-pots { display: flex; align-items: center; justify-content: center; gap: 12px; }
.play-scene .pot { position: relative; background: none; border: none; padding: 6px 6px 9px; min-width: 92px; max-width: 180px; flex: 1; gap: 3px; border-radius: 8px; }
.play-scene .pot-icon { font-size: 72px; line-height: 1.1; filter: drop-shadow(0 4px 2px #57402344); }
.play-scene .pot b { font-size: 11px; }
.play-scene .pot>span:not(.pot-icon):not(.pot-steam) { color: #483d2c; font-size: 11px; }
.play-scene .cook-meter { background: linear-gradient(to right,#dfb650 0 var(--ready-start),#40854f var(--ready-start) var(--ready-end),#b76a45 var(--ready-end)); height: 8px; }
.play-scene .pot.cooking { box-shadow: none; background: #dfb478; }
.play-scene .pot.is-ready { background: #dbe7bb; outline: 2px solid #4a7348; }
.pot-steam { display: none; position: absolute; top: 0; left: 20%; width: 60%; height: 45px; pointer-events: none; }
.cooking .pot-steam { display: flex; gap: 10px; justify-content: center; }
.pot-steam i { display: block; width: 9px; height: 26px; border-radius: 50%; background: #fff8dfb3; animation: kitchen-steam 1.8s ease-out infinite; }
.pot-steam i:nth-child(2) { animation-delay: .55s; }
.pot-steam i:nth-child(3) { animation-delay: 1.1s; }
@keyframes kitchen-steam { from { opacity: .75; transform: translateY(12px) scale(.7); } to { opacity: 0; transform: translateY(-24px) scale(1.3); } }
.assembly-station { display: flex; flex-direction: column; align-items: center; padding-bottom: 8px; }
.bowl-touch { position: relative; width: 100%; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px 10px 10px; }
.play-scene .dish-emoji { font-size: 94px; line-height: 1.15; }
.dish-emoji.with-broth { filter: drop-shadow(0 5px 3px #5a361d44) sepia(.18); }
.bowl-touch b { font-size: 13px; margin-top: 4px; }
.bowl-touch small { font-size: 11px; margin-top: 3px; color: #50442f; }
.bowl-touch .dish-toppings { top: 52px; font-size: 23px; }
.pantry-counter { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: 14px; padding-top: 12px; }
.pantry-group { min-width: 0; }
.pantry-group h3 { font-size: 12px; margin: 0 0 7px; letter-spacing: 0; }
.play-scene .ingredient-strip { gap: 7px; padding: 2px 2px 4px; }
.play-scene .ingredient { min-width: 76px; max-width: 130px; min-height: 74px; border: 1px solid #c1c4af; border-radius: 8px; background: #fbf7e8; padding: 6px 7px; gap: 3px; }
.play-scene .ingredient>span { font-size: 29px; line-height: 1.2; }
.play-scene .ingredient b { font-size: 11px; }
.play-scene .ingredient small { font-size: 10px; color: #58624f; }
.play-scene .ingredient.chosen { background: #dce8cd; border-color: #3c6544; }
.play-scene .ingredient:disabled { opacity: .65; }
.spice-row { display: flex; align-items: center; gap: 15px; padding: 10px 0; }
.spice-row>b { font-size: 12px; flex-shrink: 0; }
.spice-row .spice-controls { flex: 1; gap: 6px; }
.play-scene .spice-controls button { min-height: 44px; background: #f8e5cf; border-color: #c7a684; font-size: 14px; }
.play-scene .spice-controls button.active { background: #a83d25; color: #fff8e9; border-color: #a83d25; }
.play-serve-bar { position: sticky; bottom: 0; z-index: 3; display: flex; gap: 15px; justify-content: space-between; align-items: center; padding: 10px 0; background: #eee8d7; border-top: 1px solid #c5c5b1; }
.play-serve-bar b { font-size: 12px; }
.play-serve-bar small { display: block; margin-top: 4px; font-size: 11px; color: #59634e; }
.play-serve-bar .primary { min-width: 210px; min-height: 50px; font-size: 16px; background: #386047; border-color: #386047; box-shadow: 0 3px 0 #23402c; }
.play-serve-bar .primary:disabled { opacity: .5; box-shadow: none; }
.shift-tools { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 8px; font-size: 11px; color: #54624b; }
.shift-tools .text-button { padding: 8px 0; font-size: 11px; color: #425c42; }
.play-scene[data-lesson=true][data-next=bowl] .bowl-touch,
.play-scene[data-lesson=true][data-next=pot] .pot,
.play-scene[data-lesson=true][data-next=broth] .broth-group,
.play-scene[data-lesson=true][data-next=topping] .topping-group,
.play-scene[data-lesson=true][data-next=spice] .spice-controls,
.play-scene[data-lesson=true][data-next=serve] .play-serve-bar .primary { outline: 2px solid #a57b19; outline-offset: 3px; border-radius: 8px; }
.serve-feedback { position: absolute; top: 230px; left: 50%; transform: translateX(-50%); z-index: 5; width: min(340px,85%); padding: 22px; background: #fcf9e9; color: #315d3e; border: 2px solid #527849; border-radius: 12px; text-align: center; pointer-events: none; animation: serve-in .2s ease-out; }
.serve-feedback span { display: block; font-size: 30px; color: #ad7a14; letter-spacing: 4px; }
.serve-feedback b { display: block; margin: 10px 0 6px; font-size: 17px; }
.serve-feedback small { display: block; font-size: 12px; line-height: 1.6; }
.serve-feedback.retry { border-color: #a24c32; color: #8b3b29; }
@keyframes serve-in { from { opacity: 0; transform: translate(-50%,12px); } to { opacity: 1; transform: translate(-50%,0); } }
.first-order-lobby { display: grid; grid-template-columns: 1fr 1fr; background: #e9e2ca; }
.first-order-scene { position: relative; min-height: 480px; }
.first-order-scene .shop-scene { height: 100%; min-height: 480px; }
.first-order-scene .shop-scene::before { display: none; }
.first-guest { position: absolute; bottom: 12px; left: 20px; right: 20px; display: flex; align-items: center; }
.first-guest .guest-portrait { width: 128px; flex-basis: 128px; height: 135px; }
.first-guest p { background: #fff9e9; border-radius: 10px; padding: 15px; font-size: 13px; line-height: 1.6; margin: 0; }
.first-order-invite { display: flex; flex-direction: column; justify-content: center; align-items: start; padding: 32px; }
.first-order-invite h2 { font: 500 36px/1.2 Georgia,serif; margin: 12px 0 18px; }
.first-order-invite p,.first-order-invite li { font-size: 14px; line-height: 1.8; }
.first-order-invite ul { margin: 0 0 22px; padding-left: 18px; }
.home-hero:has(.first-order-lobby) .intro { display: none; }
.home-hero:has(.first-order-lobby) { padding-top: 20px; }
@media(max-width:760px) {
  .play-scene.service-grid { padding: 0 10px; }
  .game-shell:has(.play-scene) .game-top { padding: 9px 12px; min-height: 52px; }
  .game-shell:has(.play-scene) .day-bar { display: none; }
  .play-hud { gap: 8px; padding: 8px 0; }
  .play-hud .time { font-size: 19px; }
  .play-hud small { font-size: 9px; }
  .play-hud button { padding: 7px 8px; font-size: 10px; }
  .play-hud .shift-progress b { font-size: 16px; }
  .guest-counter { gap: 6px; padding-bottom: 8px; }
  .guest-slot { gap: 4px; padding: 2px 4px 0; align-items: center; min-height: 60px; }
  .guest-portrait { width: 38px; flex-basis: 38px; height: 51px; }
  .guest-info { padding: 3px 0; }
  .guest-info b { font-size: 11px; }
  .guest-info small { font-size: 9px; margin-top: 3px; }
  .waiting-seat { padding: 3px; }
  .waiting-seat small { font-size: 9px; }
  .order-ticket { padding: 9px 10px; }
  .order-ticket b { font-size: 11px; }
  .order-ticket .text-button { padding: 7px 0; font-size: 10px; }
  .recipe-pieces { gap: 3px 9px; margin-top: 4px; }
  .recipe-piece { font-size: 11px; }
  .cooking-coach { gap: 8px; padding: 8px 10px; margin: 8px 0; }
  .cooking-coach b,.cooking-coach p { font-size: 11px; }
  .cooking-coach small { font-size: 9px; }
  .cooking-coach>span { font-size: 21px; }
  .cooking-board { min-height: 170px; margin-top: 8px; }
  .station-label { font-size: 9px; margin: 9px 0 3px; }
  .stove-station { padding: 0 8px 8px; }
  .stove-pots { gap: 4px; }
  .play-scene .pot { min-width: 0; padding: 4px; }
  .play-scene .pot-icon { font-size: 53px; }
  .play-scene .pot>span:not(.pot-icon):not(.pot-steam) { font-size: 9px; }
  .play-scene .pot b { font-size: 10px; }
  .play-scene .dish-emoji { font-size: 66px; }
  .bowl-touch { padding: 3px 6px 8px; }
  .bowl-touch b { font-size: 11px; }
  .bowl-touch small { font-size: 9px; }
  .bowl-touch .dish-toppings { top: 36px; font-size: 19px; }
  .pantry-counter { gap: 9px; padding-top: 9px; }
  .pantry-group h3 { font-size: 10px; margin-bottom: 3px; }
  .play-scene .ingredient { min-width: 63px; min-height: 66px; padding: 4px; }
  .play-scene .ingredient>span { font-size: 25px; }
  .play-scene .ingredient b { font-size: 10px; }
  .play-scene .ingredient small { font-size: 9px; }
  .spice-row { display: block; padding: 7px 0; }
  .spice-row>b { display: block; font-size: 10px; margin-bottom: 5px; }
  .spice-row .spice-controls { gap: 3px; }
  .play-scene .spice-controls button { min-height: 40px; min-width: 0; font-size: 12px; }
  .play-serve-bar { padding: 8px 0 10px; }
  .play-serve-bar>div { display: none; }
  .play-serve-bar .primary { width: 100%; min-height: 48px; font-size: 15px; }
  .shift-tools { font-size: 9px; }
  .shift-tools .text-button { font-size: 10px; }
  .first-order-lobby { display: block; }
  .first-order-scene,.first-order-scene .shop-scene { min-height: 240px; height: 240px; }
  .first-order-invite { padding: 22px; }
  .first-order-invite h2 { font-size: 28px; }
  .first-order-invite h2 br { display: none; }
  .first-order-invite p,.first-order-invite li { font-size: 12px; }
  .first-order-invite .primary { width: 100%; font-size: 13px; }
  .first-guest .guest-portrait { width: 80px; flex-basis: 80px; height: 90px; }
  .first-guest p { padding: 10px; font-size: 11px; }
}
html[data-theme=dark] .play-scene { background:#27372d; color:#f7f0d8; }
html[data-theme=dark] .play-hud small,html[data-theme=dark] .play-hud .time,html[data-theme=dark] .shift-tools,html[data-theme=dark] .shift-tools .text-button { color:#ebdfbe; }
html[data-theme=dark] .play-serve-bar { background:#27372d; }
html[data-theme=dark] .guest-slot,html[data-theme=dark] .order-ticket,html[data-theme=dark] .cooking-coach,html[data-theme=dark] .cooking-board { color:#293c31; }
@media(prefers-reduced-motion:reduce) { .pot-steam i,.serve-feedback { animation: none; } }
.reduce-motion .pot-steam i,.reduce-motion .serve-feedback { animation: none; }

/* These objects communicate cooking state: water heats, broth and toppings build up. */
.guest-portrait>span { display: grid; place-items: center; font-size: 40px; width: 100%; height: 100%; }
.pot-object { display: block; position: relative; width: 116px; height: 96px; margin: 4px auto; }
.pot-body { position: absolute; top: 22px; left: 10px; right: 10px; height: 60px; border-radius: 5px 5px 24px 24px; background: linear-gradient(90deg,#879386,#dbe0cb 25%,#bbc7b5 72%,#788979); border: 2px solid #5e7061; z-index: 1; }
.pot-body::before,.pot-body::after { content: ''; position: absolute; top: 6px; width: 19px; height: 19px; border: 5px solid #506451; border-radius: 6px; }
.pot-body::before { left: -20px; }
.pot-body::after { right: -20px; }
.pot-water { position: absolute; z-index: 2; top: 9px; left: 8px; right: 8px; height: 31px; border: 5px solid #a7b9a3; border-radius: 50%; background: #6f9285; overflow: hidden; }
.pot-water i { display: none; position: absolute; width: 9px; height: 9px; border: 2px solid #d5edcf; border-radius: 50%; left: 20%; top: 5px; }
.pot-water i:nth-child(2) { left: 46%; animation-delay: .3s; }
.pot-water i:nth-child(3) { left: 72%; animation-delay: .6s; }
.cooking .pot-water i { display: block; animation: simmer 1.2s ease-out infinite; }
.burner { position: absolute; bottom: 0; left: 3px; right: 3px; height: 23px; border-radius: 50%; background: #425344; border: 6px solid #6e795f; }
.cooking .burner { background: #d9aa46; border-color: #84673d; }
.bowl-object { width: 150px; height: 103px; display: block; position: relative; margin: 4px auto 8px; filter: drop-shadow(0 5px 2px #5e432d33); }
.bowl-body { position: absolute; left: 6px; right: 6px; top: 26px; height: 72px; background: linear-gradient(90deg,#dbc8a5,#fff7d8 35%,#ead8b8 80%); border-radius: 4px 4px 65px 65px; border: 2px solid #a78864; }
.bowl-rim { position: absolute; top: 8px; left: 0; right: 0; height: 51px; border-radius: 50%; padding: 5px; background: #f3d7a6; border: 3px solid #ac6244; }
.bowl-soup { display: block; position: relative; width: 100%; height: 100%; border-radius: 50%; background: #ded1b4; box-shadow: inset 0 3px 5px #8a694c44; overflow: hidden; }
[data-broth=kimchi] .bowl-soup { background: #c85529; }
[data-broth=tomyum] .bowl-soup { background: #dc8938; }
[data-broth=mushroom] .bowl-soup { background: #c6af7b; }
[data-broth=mala] .bowl-soup { background: #9e391f; }
.bowl-mark { position: absolute; top: 58px; left: 0; right: 0; text-align: center; color: #9a3c27; font: italic 700 28px Georgia,serif; }
.bowl-object:not(.taken) { opacity: .7; }
.noodle-nest { position: absolute; inset: -3px 15px; color: #f6d073; font-size: 38px; line-height: 9px; font-weight: 900; transform: rotate(-8deg); }
.bowl-garnish { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 1px; font-size: 25px; }
@keyframes simmer { from { opacity: .25; transform: scale(.45); } to { opacity: 1; transform: scale(1.15); } }
@media(max-width:760px) { .pot-object { width: 94px; height: 82px; }.pot-body { height: 49px; }.pot-water { height: 27px; }.bowl-object { transform: scale(.8); margin: -7px auto -1px; }.stove-pots:has(.pot:nth-child(2)) .pot-object { width: 61px; }.stove-pots:has(.pot:nth-child(2)) .pot-body::before,.stove-pots:has(.pot:nth-child(2)) .pot-body::after { width: 12px; border-width: 3px; }.stove-pots:has(.pot:nth-child(2)) .pot-body::before { left: -12px; }.stove-pots:has(.pot:nth-child(2)) .pot-body::after { right: -12px; } }
@media(prefers-reduced-motion:reduce) { .cooking .pot-water i { animation: none; } }
.reduce-motion .cooking .pot-water i { animation: none; }

.guest-portrait{background-image:url("/assets/guests.png");background-size:auto 200%}.guest-portrait>span{visibility:hidden}.portrait-0{background-position:16.7% 0}.portrait-1{background-position:83.3% 0}.portrait-2{background-position:16.7% 100%}.portrait-3{background-position:83.3% 100%}

.play-scene[data-paused=true] .pot-water i,.play-scene[data-paused=true] .pot-steam i{animation-play-state:paused}