/* One portrait game frame, with scenery and controls anchored inside it. */
body{background:#dfd2b4;min-height:100dvh}
.game-shell{position:relative;isolation:isolate;container-type:inline-size;display:flex;flex-direction:column;width:min(100%,720px,calc(max(800px,100dvh)*.75));max-width:720px;height:auto;min-height:max(800px,100dvh);margin:0 auto;padding:0;border:0;border-radius:0;box-shadow:none;overflow:hidden;--side:13px;--panel-width:min(660px,calc((max(800px,100dvh) - 552px)*1.5));--content-width:min(var(--panel-width),calc(100cqw - var(--side)*2));--nav-height:calc(57px + env(safe-area-inset-bottom));--scene-top:max(79px,calc(env(safe-area-inset-top) + 67px));--day-height:36px}
#world.world-backdrop{position:absolute;inset:0;z-index:-1;display:block;width:100%;height:100%;aspect-ratio:auto;pointer-events:none}
.wallet-bar{position:absolute;z-index:2;top:max(12px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:min(var(--panel-width),calc(100% - var(--side)*2));display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:6px;align-items:center;margin:0;padding:0;border:0}
.stat-card{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;height:59px;padding:8px;border:2px solid var(--edge);border-radius:10px;background:var(--paper);box-shadow:0 3px 0 #68472c38;min-width:0}
.stat-card.wallet{background:#f8dfaa;border-color:#c29a5d}
.stat-card strong,.stat-card strong b{font-family:ui-monospace,'BIZ UDPGothic',monospace;font-size:var(--stat-size,clamp(12px,3.8cqw,18px));font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums;letter-spacing:-.5px;white-space:nowrap}
.stat-card strong small{font-size:9px;letter-spacing:0;font-weight:500;margin-left:2px;color:var(--muted)}
.stat-card .small{font-size:10px}
.top-controls{display:flex;gap:6px;align-items:center;grid-column:auto;grid-row:auto}
.square{width:36px;height:46px;padding:4px;gap:3px}.square small{font-size:9px}.square svg{width:18px;height:18px}
.store-layout{display:flex;flex-direction:column;align-items:center;flex-shrink:0;padding-top:var(--scene-top);padding-bottom:10px}.shop-column{width:var(--content-width);min-width:0}.scene-frame{position:relative;width:100%;border:0;border-radius:0;box-shadow:none;background:none;overflow:visible;pointer-events:none}
.day-bar{display:flex;align-items:center;height:var(--day-height);gap:12px;padding:6px 11px 10px;background:var(--paper);font-size:11px;border:2px solid var(--edge);border-radius:11px;box-shadow:0 3px 0 #68472c38}.day-bar strong{font-size:11px;white-space:nowrap}.day-bar #day-time{display:flex;align-items:center;gap:5px;white-space:nowrap}.day-bar i svg{width:16px;height:16px}.day-bar #open-status{margin-left:auto;font-size:10px;white-space:nowrap;color:#6a8548}.day-bar #open-status::before{content:"";display:inline-block;width:5px;height:5px;background:#7e9854;margin-right:5px}
#day-progress{height:3px;top:calc(var(--day-height) - 7px);left:10px;width:calc(100% - 20px);border-radius:3px;opacity:.7}
.scene{position:relative;isolation:isolate;aspect-ratio:3/2;width:100%;margin-top:8px}
/* 95 room pixels = pavement bottom + equal lawn gap - room canvas bottom. */
.management{position:relative;z-index:2;width:var(--content-width);margin-top:calc(var(--content-width)*.123697916667);display:flex;flex-direction:column;gap:8px;min-width:0}
.quest{box-shadow:0 3px 0 #68472c38}.quest-label{padding:7px 10px 0;min-height:19px;font-size:9px}.quest-main{padding:3px 10px 7px;gap:9px}.quest-main strong{font-size:12px;line-height:1.5}.quest-main small{font-size:9px;line-height:1.5;margin-top:2px}.quest-main>i{width:26px;height:26px}.quest-main i svg{width:13px;height:13px}
.quest-label{position:relative;padding-right:38px}.quest-label button{position:absolute;right:5px;top:0;width:28px;height:26px}
#quest-complete{min-height:31px;margin-bottom:8px;padding:5px}
.workbench{padding:8px 11px;box-shadow:0 3px 0 #68472c38}.work-row{gap:11px;min-height:40px}.work-row+.work-row{padding-top:7px;margin-top:7px}.resource-label{margin-bottom:5px}.resource-label b{font-size:13px}.resource-label b small{font-size:9px}.resource-label i svg{width:13px;height:13px}
.stock-meter,progress{height:7px}.work-note{font-size:8px;margin-top:3px;line-height:1.3}#supply-state{display:none}.workbench[data-supply-auto=true] #supply-state{display:block}
.work-button{width:78px;min-height:40px;gap:2px;padding:4px}.work-button b{font-size:12px}.work-button small{font-size:9px}.attention{margin-top:6px;padding-top:5px;font-size:9px;line-height:1.4}
.store-links{flex-direction:row;gap:8px}.store-links>button{flex:1;min-width:0;gap:7px;padding:7px 9px;min-height:49px;background:#fff5dc;box-shadow:0 3px 0 #68472c38}.store-links b{font-size:11px}.store-links small{font-size:8px;white-space:nowrap}.store-links button>i:last-child{display:none}
.operations-link>i:first-child{width:25px}.operations-link>i:first-child svg{width:23px;height:23px}.menu-pictures{width:39px}.menu-pictures img{width:28px;height:28px}.menu-pictures img+img{margin-left:-17px;transform:translateY(-5px)}
.special-order{grid-template-columns:30px minmax(0,1fr) auto;gap:8px;padding:7px 10px;min-height:56px;box-shadow:0 3px 0 #68472c38}.special-order canvas{grid-row:1;width:30px;height:38px}.special-order h2{font-size:12px;margin-bottom:4px}.special-order p{font-size:9px}.special-order .primary{grid-column:3;grid-row:1;font-size:10px;padding:8px 10px;margin:0;min-height:36px}
.bottom-tabs{position:relative;z-index:3;flex-shrink:0;width:min(calc(var(--panel-width) + 26px),100%);max-width:100%;height:var(--nav-height);margin:auto auto 0;display:flex;gap:8px;background:#f5e7c7;border:2px solid var(--edge);border-bottom:0;border-radius:12px 12px 0 0;padding:7px 12px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -2px 0 #68472c38}
.bottom-tabs a{flex:1;width:auto;min-height:0;font-size:11px}.bottom-tabs i svg{width:20px;height:20px}
@media(max-width:370px){.stat-card{padding:7px 5px}.stat-card strong small{font-size:8px}.stat-card .small{font-size:9px}.top-controls{gap:5px}.square{width:32px;height:44px}.wallet-bar{gap:5px}.day-bar{gap:8px;padding-left:8px;padding-right:8px;font-size:10px}.day-bar strong{font-size:10px}.day-bar #day-time{font-size:10px}.day-bar #open-status{font-size:9px}.resource-label{font-size:10px}.work-button{width:68px}.store-links>button{gap:5px;padding:7px}.store-links b{font-size:10px}.menu-pictures{width:30px}.menu-pictures img{width:25px;height:25px}.special-order{padding:7px;gap:5px}.special-order h2{font-size:11px}.special-order p{font-size:8px}.special-order .primary{padding:7px;font-size:9px}}
dialog{max-width:min(660px,calc(100vw - 24px),calc(max(800px,100dvh)*.75 - 24px));}