.game-frame-page { background: #29241f; }
.is-embedded-game .game-page-header, .is-embedded-game .game-page-info { display: none; }
.game-frame-page .game-topbar { display: none; }
.game-frame-page .game-content.scene-content { position: relative; max-width: 1040px; padding: 0; background: #f6ead4; }
.game-frame-page .game-shell { background: #29241f; }
.game-frame-page .reset-line { color: #d9bca3; font-size: 11px; }
.game-frame-page .reset-line button { color: #edb487; }
.scene-content button { touch-action: manipulation; }
.shop-scene { --counter: #d29a62; --counter-edge: #8b4f2f; color: #392b22; }
.shop-scene.counter-jade { --counter: #83aaa1; --counter-edge: #335c55; }
.shop-scene.counter-cherry { --counter: #c77768; --counter-edge: #783d36; }
.scene-toolbar { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 46px; padding: 7px 15px; background: #233e36; color: #fff6dc; }
.scene-toolbar > div { display: flex; align-items: center; gap: 14px; }
.scene-toolbar strong { font-size: 13px; }
.scene-toolbar span { color: #f8d49a; font-size: 13px; font-weight: 800; }
.scene-toolbar button { min-height: 32px; padding: 6px 11px; border: 1px solid #c9ad73; border-radius: 6px; background: #f8e2b3; color: #353c2a; font-size: 12px; font-weight: 800; }
.scene-toolbar button[aria-pressed="true"] { background: #efaf64; }
.shop-front { position: relative; height: 320px; overflow: hidden; background: #507267 url('/assets/images/shop-interior.png') center center / 100% 100% no-repeat; }
.shop-name { position: absolute; z-index: 2; top: 8px; left: 31%; display: grid; place-items: center; width: 38%; height: 39px; margin: 0; border-radius: 8px; color: #ffe2ae; font: 800 clamp(22px, 3.4vw, 35px)/1 'Fraunces', Georgia, serif; text-shadow: 0 2px #633821; }
.sign-jade .shop-name { background: #2a6759; color: #fff4c9; text-shadow: none; }
.sign-red .shop-name { background: #9f3d30; color: #fff1c8; text-shadow: none; }
.open-sign { position: absolute; top: 68px; left: 20px; padding: 7px 9px; border: 2px solid #e6bc71; border-radius: 4px; background: #3c5947; color: #fff4d6; font-size: 10px; font-weight: 800; transform: rotate(-5deg); }
.seating-row { position: absolute; bottom: 0; left: 13%; right: 13%; display: grid; grid-template-columns: repeat(var(--seat-count), minmax(0, 1fr)); align-items: end; height: 267px; gap: 15px; }
.shop-seat { position: relative; height: 100%; min-width: 0; }
.empty-seat { display: flex; flex-direction: column; align-items: center; justify-content: end; padding-bottom: 14px; }
.empty-seat .tool-art { width: 96px; height: 96px; }
.empty-seat > span:last-child { margin-top: 0; padding: 3px 8px; border-radius: 4px; background: #fff0d6e8; color: #583a2b; font-size: 10px; font-weight: 700; }
.order-bubble { position: absolute; z-index: 3; top: 3px; left: 50%; width: min(100%, 210px); min-height: 79px; padding: 6px 9px 4px; border: 2px solid #825336; border-radius: 10px; background: #fff7e4; transform: translateX(-50%); text-align: center; }
.order-bubble::after { content: ''; position: absolute; left: calc(50% - 6px); bottom: -8px; width: 12px; height: 12px; background: #fff7e4; border-bottom: 2px solid #825336; border-right: 2px solid #825336; transform: rotate(45deg); }
.is-selected .order-bubble { border-color: #29724e; box-shadow: 0 0 0 3px #b5d9a5; }
.order-foods { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 34px; }
.order-foods > span { display: grid; grid-template-columns: 30px auto; align-items: center; }
.order-foods .food { transform: scale(.45); transform-origin: center; margin: -18px; }
.order-foods b { font-size: 12px; }
.order-foods small { grid-column: 1 / -1; font-size: 8px; color: #593e2d; }
.order-sauce { font-size: 9px; font-weight: 800; color: #984325; }
.order-bubble .patience-track { height: 4px; margin-top: 4px; }
.order-bubble .patience-label { display: block; font-size: 8px; color: #674a34; }
.guest-target { position: absolute; bottom: 5px; left: 50%; display: flex; flex-direction: column; align-items: center; width: 158px; padding: 0; border: 0; background: transparent; transform: translateX(-50%); }
.seated-guest { display: block; width: 158px; height: 158px; background: url('/assets/images/seated-customers.png') var(--portrait-x) var(--portrait-y) / 300% 400% no-repeat; }
.guest-target:hover .seated-guest, .is-selected .seated-guest { filter: drop-shadow(0 0 3px #ffe091); }
.guest-name { min-width: 76px; margin-top: 0; padding: 3px 8px; border-radius: 5px; background: #fff0d6; color: #58372a; font-size: 11px; font-weight: 800; }
.guest-name small { display: block; font-size: 8px; font-weight: 500; }
.decline-order { position: absolute; z-index: 4; top: 93px; right: 0; padding: 4px; border: 0; border-radius: 4px; background: #fff2d2; font-size: 8px; }
.decor-art { display: block; width: 100%; aspect-ratio: 1; background: url('/assets/images/shop-decor.png') var(--tile-x) var(--tile-y) / 300% 200% no-repeat; }
.placed-decor { position: absolute; z-index: 1; bottom: 3px; width: 125px; padding: 0; border: 0; background: none; }
.placed-decor > span:last-child { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); padding: 3px 7px; border-radius: 4px; background: #fff0d6; color: #58372a; font-size: 9px; opacity: 0; }
.placed-decor:hover > span:last-child, .placed-decor:focus-visible > span:last-child, .is-editing .placed-decor > span:last-child { opacity: 1; }
.decor-left { left: 4px; }
.decor-right { right: 4px; }
.tool-art { position: relative; display: block; width: 100%; aspect-ratio: 1; flex: none; }
.tool-art::before { content: ''; position: absolute; inset: 0; background-image: url('/assets/images/shop-tools.png'); background-repeat: no-repeat; }
.tool-art--wok::before { top: 5.2%; bottom: 5.2%; background-size: 289.8% 215.6%; background-position: 0 0; }
.tool-art--tray::before { top: 20%; bottom: 20%; background-size: 320% 353.1%; background-position: 50.66% 19.75%; }
.tool-art--plate::before { top: 17%; bottom: 17%; background-size: 323.4% 330.3%; background-position: 98.49% 16.11%; }
.tool-art--red-sauce::before { left: 29%; right: 29%; background-size: 731.4% 209%; background-position: 13.57% 88.95%; }
.tool-art--yellow-sauce::before { left: 30%; right: 30%; background-size: 768% 209%; background-position: 50.9% 88.95%; }
.tool-art--stool::before { top: 6%; bottom: 6%; background-size: 341.3% 256%; background-position: 95.76% 86.54%; }
.work-counter, .counter-preview { position: relative; z-index: 4; border-top: 8px solid #f0bf84; border-bottom: 10px solid var(--counter-edge); background: var(--counter); box-shadow: 0 -5px 0 #714526; }
.ingredient-rail { display: flex; align-items: center; gap: 12px; padding: 9px 16px; border-bottom: 1px solid #6b41274f; background: #fff1d63b; }
.work-label { flex: none; font-size: 10px; font-weight: 800; }
.ingredient-rail > div { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: thin; }
.ingredient-rail button { position: relative; display: flex; align-items: center; gap: 4px; flex: none; min-height: 47px; padding: 4px 22px 4px 8px; border: 2px solid #b7804d; border-radius: 7px; background: #f8ddb0; color: #513421; }
.ingredient-rail button .food { transform: scale(.5); margin: -15px; }
.ingredient-rail button > span:not(.food) { font-size: 10px; font-weight: 800; }
.ingredient-rail button b { position: absolute; right: 5px; top: 5px; font-size: 9px; }
.shop-scene button:disabled { opacity: 1; }
.ingredient-rail button:disabled { filter: saturate(.65); color: #79593d; }
.ingredient-rail button:not(:disabled):hover { background: #ffe8a8; border-color: #704529; }
.work-stations { display: grid; grid-template-columns: 1.35fr .8fr .8fr; gap: 10px; padding: 10px 20px 0; }
.work-stations section { min-width: 0; }
.work-stations h3 { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 0; color: #4c2d1e; font-size: 11px; }
.work-stations h3 small { font-size: 9px; font-weight: 500; }
.wok-row { display: flex; justify-content: center; flex-wrap: wrap; }
.scene-wok { position: relative; width: 50%; max-width: 170px; min-height: 165px; padding: 0 0 21px; border: 0; background: none; color: #472d1e; }
.scene-wok .tool-art { width: 100%; }
.scene-wok .wok-food { position: absolute; top: 21%; left: 50%; transform: translateX(-50%) scale(.7); }
.scene-wok.is-burnt .wok-food { filter: brightness(.25); }
.scene-wok.is-ready .tool-art { filter: drop-shadow(0 0 4px #fff3a1); }
.wok-caption { display: block; margin-top: -18px; font-size: 10px; font-weight: 800; }
.scene-wok > small { display: block; margin-top: 2px; font-size: 9px; }
.scene-wok.is-ready > small { color: #174f32; font-weight: 800; }
.scene-wok.is-burnt > small { color: #8c241e; font-weight: 800; }
.cook-progress { position: absolute; bottom: 9px; left: 20%; width: 60%; height: 4px; overflow: hidden; border-radius: 4px; background: #8054325c; }
.cook-progress i { display: block; height: 100%; background: #f1d384; }
.scene-wok.is-ready .cook-progress i { background: #3c7c46; }
.scene-wok.is-empty .cook-progress { visibility: hidden; }
.oil-bubbles { position: absolute; top: 20%; left: 32%; color: #fff3b2; font-size: 30px; line-height: 1; letter-spacing: 5px; pointer-events: none; }
.is-cooking .oil-bubbles { animation: oil-simmer .65s alternate infinite; }
@keyframes oil-simmer { from { opacity: .25; } to { opacity: .9; } }
.serving-tray, .serving-plate { position: relative; width: min(100%, 185px); aspect-ratio: 1; margin: -6px auto -30px; }
.tray-pieces, .plate-pieces { position: absolute; top: 35%; left: 14%; display: grid; grid-template-columns: repeat(3, 1fr); place-content: center; width: 72%; height: 38%; gap: 0; }
.plate-pieces { top: 27%; left: 22%; width: 56%; height: 40%; grid-template-columns: repeat(2, 1fr); }
.tray-pieces button, .plate-pieces button { display: grid; place-items: center; width: 36px; height: 33px; padding: 0; border: 0; background: none; }
.tray-pieces .food, .plate-pieces .food { transform: scale(.55); margin: -17px; }
.dish-hint { position: absolute; top: 49%; left: 14%; width: 72%; color: #6a614e; font-size: 9px; text-align: center; }
.serve-order { display: block; position: relative; min-height: 34px; width: 90%; margin: 3px auto 0; padding: 7px; border: 0; border-bottom: 3px solid #723027; border-radius: 6px; background: #ae4231; color: white; font-size: 11px; font-weight: 800; }
.serve-order:disabled { background: #946951; border-color: #77533e; }
.counter-bottom { display: flex; justify-content: space-between; align-items: end; min-height: 70px; padding: 0 24px 10px; }
.sauce-bottles { display: flex; align-items: end; gap: 12px; }
.sauce-choice { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 48px; padding: 0 3px 4px; border: 0; border-bottom: 3px solid transparent; background: none; color: #4f301d; }
.sauce-choice.chosen { border-color: #365b3e; }
.sauce-choice .tool-art { width: 44px; height: 44px; }
.sauce-choice > span:last-child { max-width: 70px; font-size: 8px; font-weight: 800; }
.no-sauce-art { display: grid; place-items: center; height: 44px; font-size: 28px; color: #7c4f32; }
.clear-dish { padding: 7px 10px; border: 1px solid #7f5438; border-radius: 5px; background: #fff2d2; color: #593b28; font-size: 10px; }
.clear-dish:disabled { visibility: hidden; }
.scene-status { min-height: 30px; padding: 7px 16px; background: #294a3e; color: #fff0c8; font-size: 11px; line-height: 1.4; text-align: center; }
.shop-start { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 14px 20px; background: #f4e6c9; }
.shop-start strong, .shop-start span { display: block; }
.shop-start strong { font-size: 14px; }
.shop-start span { margin-top: 4px; font-size: 10px; color: #66503b; }
.shop-start .primary { flex: none; min-height: 38px; padding: 9px 15px; font-size: 11px; }
.counter-preview { display: flex; align-items: center; justify-content: center; gap: 35px; height: 86px; }
.counter-preview > span:first-child { font-size: 12px; font-weight: 800; }
.counter-preview .tool-art { width: 84px; height: 84px; }
.decoration-editor { padding: 15px 20px 18px; background: #f7ecd6; }
.editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.editor-heading h3 { margin: 0; color: #493526; font-size: 17px; }
.editor-heading p { margin: 4px 0 0; color: #69513d; font-size: 10px; line-height: 1.5; }
.editor-heading .secondary { min-height: 34px; padding: 7px 12px; font-size: 11px; }
.decor-tabs { display: flex; gap: 7px; margin: 12px 0 10px; }
.decor-tabs button { padding: 6px 13px; border: 1px solid #c4a97b; border-radius: 5px; background: transparent; color: #60462c; font-size: 11px; font-weight: 700; }
.decor-tabs button[aria-pressed="true"] { background: #315d4f; border-color: #315d4f; color: #fff4d2; }
.decor-choices { display: flex; gap: 9px; overflow-x: auto; padding: 3px 3px 6px; }
.decor-choices button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 90px; padding: 5px; border: 2px solid transparent; border-radius: 8px; background: #e6d6b5; color: #503b29; }
.decor-choices button[aria-pressed="true"] { border-color: #2d6650; background: #d7e3c8; }
.decor-choices button > span:last-of-type { font-size: 10px; font-weight: 700; }
.decor-choices .decor-art { width: 63px; height: 63px; }
.decor-choices button b { position: absolute; right: 5px; top: 2px; color: #24523b; }
.style-swatch { display: grid; place-items: center; width: 72px; height: 55px; border: 4px solid #714929; border-radius: 6px; background: #c88b50; color: #ffe5af; font: 800 13px Georgia, serif; }
.swatch-jade { background: #3e8976; border-color: #295d50; }
.swatch-cherry, .swatch-red { background: #b35146; border-color: #743930; }
.shop-overlay { position: absolute; z-index: 10; inset: 0; display: flex; align-items: start; justify-content: center; padding: 60px 25px 25px; background: #132d23a6; }
.shop-dialog { width: min(760px, 100%); max-height: min(80vh, 730px); overflow-y: auto; padding: 24px; border-radius: 12px; background: #fff4dd; box-shadow: 0 6px 0 #61472c; }
.shop-dialog .stock-grid { margin-top: 20px; }
.shop-dialog .stock-note { margin-bottom: 18px; }
.shop-dialog .upgrade-grid { margin-top: 15px; }
.shop-dialog .upgrade-card { border: 1px solid #dfc298; border-radius: 8px; background: #f9e8c9; }
.shop-dialog .upgrade-card .tool-art { width: 70px; height: 70px; margin: auto; }
.shop-dialog .panel { padding: 0; border: 0; background: none; }
.compact-dialog { max-width: 460px; margin-top: 130px; }
.compact-dialog .result h3 { font-size: 2rem; }
@media (max-width: 700px) {
  .scene-toolbar { padding: 6px 10px; }
  .scene-toolbar > div { gap: 8px; }
  .scene-toolbar button { padding: 6px 8px; font-size: 10px; }
  .scene-toolbar strong, .scene-toolbar span { font-size: 11px; }
  .shop-front { height: 300px; background-size: auto 100%; }
  .shop-name { top: 9px; left: 25%; width: 50%; height: 34px; font-size: 24px; }
  .open-sign { top: 49px; left: 8px; padding: 4px; font-size: 7px; }
  .seating-row { left: 8%; right: 8%; height: 246px; gap: 7px; }
  .order-bubble { min-height: 76px; padding: 4px 5px; }
  .guest-target, .seated-guest { width: 142px; }
  .seated-guest { height: 142px; }
  .guest-target { bottom: 5px; }
  .placed-decor { width: 76px; bottom: 6px; }
  .decor-left { left: -5px; }
  .decor-right { right: -5px; }
  .ingredient-rail { padding: 7px 9px; gap: 8px; }
  .work-label { display: none; }
  .ingredient-rail button { min-height: 42px; }
  .work-stations { grid-template-columns: 1fr 1fr; gap: 0 8px; padding: 10px 12px 0; }
  .cooking-zone { grid-column: 1 / -1; }
  .wok-row { flex-wrap: nowrap; }
  .scene-wok { width: 50%; max-width: 142px; min-height: 150px; padding-bottom: 19px; }
  .serving-tray, .serving-plate { max-width: 150px; margin-top: -5px; margin-bottom: -21px; }
  .work-stations h3 { font-size: 10px; }
  .counter-bottom { padding: 0 14px 8px; min-height: 64px; }
  .shop-start { padding: 12px; flex-wrap: wrap; }
  .shop-start .primary { width: 100%; }
  .scene-status { font-size: 10px; }
  .decoration-editor { padding: 12px; }
  .decor-choices button { flex-basis: 74px; }
  .decor-choices .decor-art { width: 54px; height: 54px; }
  .counter-preview { gap: 12px; height: 75px; }
  .counter-preview .tool-art { width: 63px; height: 63px; }
  .counter-preview > span:first-child { font-size: 10px; }
  .shop-overlay { padding: 50px 12px 15px; }
  .shop-dialog { padding: 17px; max-height: 80vh; }
  .compact-dialog { margin-top: 90px; }
}
@media (max-width: 420px) {
  .seating-row { left: 5%; right: 5%; }
  .guest-target, .seated-guest { width: 132px; }
  .seated-guest { height: 132px; }
  .guest-name { font-size: 10px; }
  .order-foods { gap: 2px; }
  .order-foods > span { grid-template-columns: 23px auto; }
  .order-foods .food { transform: scale(.35); margin: -20px; }
  .order-foods b { font-size: 10px; }
  .order-foods small { font-size: 7px; }
  .order-sauce { font-size: 8px; }
  .scene-toolbar > div { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { .is-cooking .oil-bubbles { animation: none; } }

.pause-decor { display: block; margin: 12px auto 0; }

/* Purchased furniture lives in the same scene as the customers. */
.furniture-art { display: block; width: 100%; height: 100%; background: url('/assets/images/renovation-furniture.png') var(--tile-x) var(--tile-y) / 300% 200% no-repeat; clip-path: inset(1%); }
.dining-chair { position: absolute; width: 132px; height: 132px; left: 50%; bottom: 33px; transform: translateX(-50%); pointer-events: none; }
.dining-table { position: absolute; z-index: 2; width: 158px; height: 94px; left: 50%; bottom: 8px; transform: translateX(-50%); pointer-events: none; }
.guest-target .dining-chair { bottom: 31px; z-index: -1; }
.guest-target .dining-table { bottom: 9px; }
.furniture-1 .seated-guest, .furniture-2 .seated-guest { clip-path: inset(0 0 24%); }
.guest-name, .empty-seat > span:last-child { position: relative; z-index: 3; }
.interior-1 .shop-front, .interior-2 .shop-front, .renovation-room { background-image: url('/assets/images/renovation-interiors.png'); background-size: 100% 200%; background-position: center top; }
.interior-2 .shop-front, .room-2 { background-position: center bottom; }
.expansion-plant { position: absolute; bottom: 5px; width: 90px; height: 120px; opacity: .9; pointer-events: none; }
.expansion-plant-left { left: 6%; }
.expansion-plant-right { right: 6%; }
.seats-4 .seating-row { left: 9%; right: 9%; gap: 8px; }
.seats-4 .guest-target, .seats-4 .seated-guest { width: 145px; }
.seats-4 .seated-guest { height: 145px; }
.seats-4 .dining-table { width: 140px; }
.scene-toolbar { flex-wrap: wrap; }
.scene-toolbar > div:last-child { flex-wrap: wrap; gap: 6px; }
.renovation-editor { padding: 15px 20px 20px; background: #f7ecd6; }
.renovation-note { margin: 10px 0; padding: 8px 10px; border-left: 3px solid #ad6c36; background: #eaddbf; color: #5e442c; font-size: 11px; }
.renovation-editor .decor-tabs { flex-wrap: wrap; }
.decor-tabs small { opacity: .75; }
.renovation-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.renovation-option { display: grid; grid-template-columns: 42% 1fr; gap: 12px; padding: 12px; border: 2px solid #dbc39b; border-radius: 9px; background: #fff8e8; }
.renovation-option.is-previewed { border-color: #376e59; background: #eef2da; }
.renovation-picture { position: relative; align-self: start; width: 100%; height: 155px; padding: 0; border: 0; border-radius: 5px; background: #e5d5b7; overflow: hidden; }
.renovation-picture > span:last-child { position: absolute; bottom: 5px; right: 5px; padding: 4px 7px; border-radius: 4px; background: #fff5df; color: #5c432c; font-size: 10px; font-weight: 700; }
.renovation-room { display: block; width: 100%; height: 100%; }
.renovation-furniture-preview { position: absolute; inset: 0; }
.renovation-furniture-preview > span:first-child { position: absolute; width: 65%; height: 70%; top: 0; left: 18%; }
.renovation-furniture-preview > span:last-child { position: absolute; width: 100%; height: 75%; bottom: 0; left: 0; }
.renovation-seats-preview { display: grid; height: 130px; padding: 5px; grid-template-columns: 1fr 1fr; }
.renovation-seats-preview .tool-art { max-width: 64px; margin: auto; }
.renovation-details { display: flex; flex-direction: column; align-items: start; }
.renovation-level { color: #946139; font-size: 10px; font-weight: 800; }
.renovation-details h4 { margin: 4px 0; color: #3d3427; font-size: 15px; }
.renovation-details p { margin: 3px 0 8px; color: #70573e; font-size: 11px; line-height: 1.5; }
.renovation-details > strong { color: #3c6751; font-size: 11px; line-height: 1.5; }
.renovation-buy { width: 100%; margin-top: 10px; padding: 9px 8px; border: 0; border-bottom: 3px solid #74412c; border-radius: 5px; background: #b66536; color: white; font-size: 11px; font-weight: 800; }
.renovation-buy:disabled { background: #e3d8c1; color: #7b6955; border-color: #c1ae8a; cursor: default; }
@media (max-width: 700px) {
  .renovation-editor { padding: 12px; }
  .renovation-options { grid-template-columns: 1fr; }
  .renovation-picture { height: 150px; }
  .renovation-option { grid-template-columns: 40% 1fr; }
  .renovation-editor .decor-tabs button { padding: 7px 9px; font-size: 10px; }
  .dining-table { width: 136px; height: 85px; }
  .dining-chair { width: 112px; height: 122px; }
  .seats-3 .shop-front, .seats-4 .shop-front { height: 520px; }
  .seats-3 .seating-row, .seats-4 .seating-row { height: 455px; left: 8%; right: 8%; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1fr 1fr; gap: 8px; }
  .seats-3 .guest-target, .seats-4 .guest-target, .seats-3 .seated-guest, .seats-4 .seated-guest { width: 126px; }
  .seats-3 .seated-guest, .seats-4 .seated-guest { height: 126px; }
  .seats-3 .dining-table, .seats-4 .dining-table { width: 126px; height: 80px; }
  .seats-3 .dining-chair, .seats-4 .dining-chair { width: 104px; height: 112px; }
  .seats-3 .guest-target, .seats-4 .guest-target { bottom: 0; }
  .seats-3 .order-bubble, .seats-4 .order-bubble { top: 0; }
  .seats-3 .shop-seat:last-child { grid-column: 1 / -1; width: 48%; justify-self: center; }
  .expansion-plant { width: 65px; height: 92px; bottom: 140px; }
  .expansion-plant-left { left: 0; }
  .expansion-plant-right { right: 0; }
}

.furniture-piece-0, .furniture-piece-1, .furniture-piece-2 { clip-path: inset(0 0 9%); }
@media (max-width: 700px) {
  .interior-1 .shop-front, .interior-2 .shop-front { background-size: auto 200%; }
  .seats-3 .shop-front, .seats-4 .shop-front { background-color: #d8a477; background-image: repeating-linear-gradient(0deg, transparent 0 48px, #8d634d55 49px 50px), repeating-linear-gradient(90deg, transparent 0 64px, #8d634d44 65px 66px); background-size: auto; }
  .seats-3.interior-2 .shop-front, .seats-4.interior-2 .shop-front { background-color: #efdab0; }
  .seats-3 .shop-front::before, .seats-4 .shop-front::before { content: ''; position: absolute; inset: 0 0 auto; height: 240px; background: url('/assets/images/shop-interior.png') center / 100% 100%; }
  .seats-3.interior-1 .shop-front::before, .seats-4.interior-1 .shop-front::before { background-image: url('/assets/images/renovation-interiors.png'); background-size: 100% 200%; background-position: top; }
  .seats-3.interior-2 .shop-front::before, .seats-4.interior-2 .shop-front::before { background-image: url('/assets/images/renovation-interiors.png'); background-size: 100% 200%; background-position: bottom; }
}

/* Phase-two handoff: pixel-accurate windows into the original art boards. */
.phase2-art { display: inline-block; flex: none; aspect-ratio: var(--art-ratio); background-repeat: no-repeat; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.shop-front { height: 360px; }
.interior-0 .shop-front { background: #706757; }
.stall-backdrop { position: absolute; inset: 0 0 auto; width: 100%; height: 100%; }
.interior-0 .shop-front::after { content: ''; position: absolute; inset: auto 0 0; height: 135px; background: linear-gradient(#60574800, #5b5044 25%, #938170); pointer-events: none; }
.shop-name { top: 9px; left: 12px; width: 137px; height: 114px; background: none !important; }
.shop-logo { width: 100%; height: 100%; filter: drop-shadow(0 3px 3px #2a1e1399); }
.sign-jade .shop-logo { filter: drop-shadow(0 0 5px #53bca0); }
.sign-red .shop-logo { filter: drop-shadow(0 0 5px #e17765); }
.open-sign { top: 17px; left: auto; right: 16px; transform: none; box-shadow: 0 3px 0 #21392a; }
.seating-row { z-index: 2; height: 241px; left: 17%; right: 17%; }
.placed-decor { z-index: 3; }
.guest-target { bottom: 4px; }
.guest-name { border: 1px solid #b5874e; box-shadow: 0 2px 0 #533923; }
.order-bubble { top: 0; }
.food-sprite { width: 64px; height: 64px; border-radius: 16px; mix-blend-mode: multiply; }
.phase2-tool::before { content: none; }
.phase2-tool { mix-blend-mode: multiply; }
.tool-art--wok.phase2-tool { clip-path: ellipse(49% 45% at 50% 50%); }
.tool-art--tray.phase2-tool { height: auto; aspect-ratio: 117/43; }
.serving-tray > .tool-art--tray.phase2-tool { position: absolute; top: 34%; height: 58px; }
.counter-preview .tool-art--tray.phase2-tool { height: 31px; }
.tool-art--stool.phase2-tool { width: 75px; height: 88px; border-radius: 10px; }
.phase2-decor { height: auto; max-height: 120px; width: 85px; margin: auto; border-radius: 10px; mix-blend-mode: multiply; }
.placed-decor .phase2-decor { margin-bottom: 13px; }
.phase2-sauce { height: 54px !important; width: 30px !important; border-radius: 10px; mix-blend-mode: multiply; }
.work-counter { background-image: repeating-linear-gradient(0deg, transparent 0 45px, #63381412 46px 47px); }
.scene-toolbar { background: #4b3326; border-bottom: 3px solid #ba874e; }
.scene-toolbar button { box-shadow: 0 2px 0 #24180f; }
.scene-toolbar button[data-action="begin"], .serve-order { background: #577b38; border-color: #355421; color: #fff9e4; }
.scene-status { background: #493326; }
@media (max-width: 700px) {
  .shop-front { height: 330px; }
  .stall-backdrop { width: 190%; left: -45%; }
  .shop-name { top: 10px; left: 8px; width: 104px; height: 87px; }
  .open-sign { top: 13px; right: 8px; }
  .seating-row { left: 9%; right: 9%; height: 230px; }
  .placed-decor { width: 55px; }
  .phase2-decor { width: 53px; }
  .seats-3 .stall-backdrop, .seats-4 .stall-backdrop { height: 270px; }
  .seats-3.interior-0 .shop-front::before, .seats-4.interior-0 .shop-front::before { display: none; }
  .seats-3.interior-0 .shop-front, .seats-4.interior-0 .shop-front { background: #938170; }
  .seats-4 .shop-seat:last-child { grid-column: auto; width: auto; justify-self: stretch; }
}

.order-portrait { position: absolute; top: -12px; left: -14px; width: 37px; height: 44px; border: 2px solid #845a38; border-radius: 50%; background-color: #fff8e6; box-shadow: 0 2px 3px #2e201e44; }
.order-bubble { padding-left: 20px; }
.placed-decor:has(.phase2-decor) { padding: 7px 4px 0; border: 3px solid #725536; border-radius: 9px 9px 0 0; background: #eee2cc; bottom: 0; width: 92px; }
.placed-decor .phase2-decor { margin-bottom: 0; }
.scene-wok .phase2-tool { height: auto; aspect-ratio: 101/90; margin: 3px 0 20px; }
.seating-row { height: 259px; }
@media (max-width: 700px) {
  .seating-row { height: 235px; }
  .placed-decor:has(.phase2-decor) { width: 53px; padding: 3px 0 0; }
  .placed-decor .phase2-decor { width: 45px; }
  .order-portrait { width: 29px; height: 34px; top: -10px; left: -7px; }
  .order-bubble { padding-left: 13px; }
}

/* The opening view is a shop, not a labeled diagram of inactive controls. */
.empty-seat > span:last-child { display: none; }
.phase-home .open-sign, .phase-home .work-counter, .phase-home .counter-preview, .phase-home .scene-status { display: none; }
.phase-home .shop-start { border-top: 5px solid #d39d61; }