body{position:fixed;left:var(--view-left,0px);top:var(--view-top,0px);width:var(--view-width,100%);height:var(--view-height,100dvh)}
#app{position:relative;width:min(1420px,100%);height:min(800px,100%);overflow:hidden;background:#b8c3b0;border-radius:12px}
#game-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.topbar{position:absolute;left:3%;right:3%;top:1%;height:9%;display:flex;align-items:center;gap:24px;z-index:2;color:#334d43;font-size:15px}.topbar strong{font-size:20px}#clock{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:bold;font-size:22px}.topbar button{min-height:36px;padding:6px 15px}.topbar span{white-space:nowrap}
main{position:absolute;inset:0;pointer-events:none}main section,main button{pointer-events:auto}
#app>main,#app>.topbar,#app>.pause-cover,#app>.rotate-hint{touch-action:none;-webkit-touch-callout:none}
.prepare-strip{position:absolute;left:51%;top:43%;width:43%;height:43%;padding:4%;background:#fff8e9ed;border-radius:14px;display:flex;flex-direction:column;justify-content:center;gap:14px}.prepare-strip p{font-size:14px;line-height:1.6}.prepare-actions{display:flex;gap:10px;flex-wrap:wrap}.prepare-actions #start{width:100%}
.customers{position:absolute;left:3%;top:12%;width:94%;height:28%}.order-grid{display:grid;gap:12px;height:100%}.customer{position:relative;min-width:0;border:0;opacity:0;padding:0;border-radius:12px}.customer.empty{pointer-events:none}#order-meta{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;font-size:15px;color:#47645a}
.workbench{position:absolute;left:3%;top:43%;width:94%;height:36%;display:grid;grid-template-columns:minmax(0,1fr) 31%;gap:3%}.grill-panel,.serving{display:flex;flex-direction:column;min-height:0}.section-heading{height:22px;display:flex;align-items:center;justify-content:space-between;color:#42594f;font-size:12px}.section-heading h2{font-size:13px}.grill-grid{display:grid;gap:8px;flex:1;min-height:0;padding:4px}.slot{opacity:0;border:0;padding:0;min-height:0;min-width:0}.slot>*{display:none}.stock-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:5px;flex:1;min-height:0;padding:4px}.stock-card{opacity:0;min-width:0;min-height:0;border:0;padding:0;touch-action:none}.stock-card>*{display:none}
.ingredient-panel{position:absolute;left:3%;width:94%;bottom:2%;height:17%;display:grid;grid-template-columns:minmax(0,1fr) 10%;gap:3%}.ingredient-row{display:flex;min-width:0;gap:8px}.ingredient-list{display:flex;gap:10px;flex:1;min-width:0}.ingredient{flex:1;min-width:0;opacity:0;border:0;padding:0;touch-action:none}.ingredient>*{display:none}.food-page{width:48px;padding:4px;border:1px solid #b9a482;border-radius:10px;background:#eee2c8;font-size:11px}.season-dock{min-height:0}.season-jar{width:100%;height:100%;opacity:0;padding:0;border:0;touch-action:none}.jar-icon{display:block;width:100%;height:100%}
#app:not(.playing) .customers,#app:not(.playing) .workbench,#app:not(.playing) .ingredient-panel{display:none}
@media(orientation:landscape) and (max-height:540px){body{padding:max(8px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}#app{width:100%;height:100%;border-radius:8px}.topbar{gap:18px;font-size:12px;min-height:32px}.topbar strong{font-size:16px}#clock{font-size:18px}.customers{top:13%;height:29%}.order-grid{gap:8px}.workbench{top:45%;bottom:calc(max(48px,17%) + 4%);height:auto}.section-heading{height:18px;font-size:10px}.section-heading h2{font-size:11px}.ingredient-panel{height:max(48px,17%)}.ingredient-list{gap:8px}.grill-grid{gap:6px;padding:3px}.stock-grid{gap:4px;padding:2px}.prepare-strip{gap:8px;padding:3%;top:38%;height:55%}.prepare-strip p{font-size:12px}.prepare-actions{gap:6px}.prepare-actions button{min-height:36px;padding:6px 12px}.drag-ghost{width:68px;height:68px}}

.customer,.slot,.stock-card,.ingredient,.season-jar{opacity:0!important}

/* Restore the painted shop, giving order tickets the space formerly taken by
   the sign. Geometry still follows the same accessible drag targets. */
:root{background:#271f19;color:#503821}
#app{background:#503923}
.topbar{left:0;right:0;top:0;height:10%;padding:0 3%;color:#ffedce;background:linear-gradient(#32231bec,#453225dc);gap:18px}
.shop-name{font-family:"Kaiti SC","STKaiti",serif;font-size:18px;position:absolute;left:50%;transform:translateX(-50%);color:#efdab5;letter-spacing:2px}
#clock{color:#ffedce}
.customers{top:12%;height:31%}
.workbench{top:46%;height:33%;grid-template-columns:minmax(0,1fr) 30%;gap:3%}
.section-heading,.section-heading h2{color:#ffedca;text-shadow:0 1px 3px #302115}
.grill-grid{padding:7px 8% 17px;gap:6px}
.stock-grid{padding:5px 5%;gap:3px}
.ingredient-panel{height:16%;bottom:2%;grid-template-columns:minmax(0,1fr) 9%;gap:3%}
.ingredient-list{flex:0 1 880px}
.ingredient{max-width:280px}
.primary{background:#995633;border-color:#784025;color:#fff1d4;box-shadow:0 2px 0 #713e28}
.secondary,.icon-button,.food-page{background:#eedbb6;border-color:#bda071;color:#654626}
.shop-tabs .selected{background:#7b8956}
.prepare-strip{background:#f8edcfed;border:2px solid #be9e6b;color:#614126}
dialog{background:#f5e8cc;border:4px solid #a58357;color:#583c27}
.shop-tabs{background:#f5e8cc}
.drag-ghost{border-radius:0;overflow:visible;filter:drop-shadow(0 3px 3px #39241688)}
@media(orientation:landscape) and (max-height:540px){
  .topbar{font-size:12px;gap:14px}.shop-name{font-size:15px;letter-spacing:1px}
  .customers{top:12%;height:32%}
  .workbench{top:46%;height:auto;bottom:calc(max(48px,16%) + 4%)}
  .ingredient-panel{height:max(48px,16%)}
  .grill-grid{padding:5px 7% 12px;gap:5px}
  .stock-grid{padding:4px 5%;gap:2px}
  .ingredient-list{flex:0 1 100%}.ingredient{max-width:230px}
  .expanded-grill .grill-grid{padding:4px 7% 10px;gap:3px}
}
@media(max-width:700px){.shop-name{font-size:12px;letter-spacing:0;left:52%}.topbar{gap:9px}.topbar strong{font-size:14px}}
@media(orientation:landscape) and (max-height:540px){
  .expanded-grill .customers{height:28%}
  .expanded-grill .workbench{top:42%}
}

/* Extension/content-script nodes can be appended to body. Keep the game out
   of its flow so those siblings cannot split the viewport into implicit rows. */
body{display:block;--game-top:env(safe-area-inset-top,0px);--game-right:env(safe-area-inset-right,0px);--game-bottom:env(safe-area-inset-bottom,0px);--game-left:env(safe-area-inset-left,0px)}
#app{position:absolute;inset:var(--game-top) var(--game-right) var(--game-bottom) var(--game-left);margin:auto;width:min(1420px,calc(100% - var(--game-left) - var(--game-right)));height:min(800px,calc(100% - var(--game-top) - var(--game-bottom)))}
@media(orientation:landscape) and (max-height:540px){body{--game-top:max(8px,env(safe-area-inset-top));--game-right:max(16px,env(safe-area-inset-right));--game-bottom:max(24px,env(safe-area-inset-bottom));--game-left:max(16px,env(safe-area-inset-left))}}
