/* v0.5.2 (#015) layout after concept v3: L0 bg → L1 counter → L2 chars → L3 UI → L4 board → L5 items → L6 interaction → L7 dock */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{margin:0;background:#2a160c;font-family:"PingFang SC","Noto Sans CJK SC",sans-serif;user-select:none}
/* P1-01/P1-04: stage fills visual viewport (safe-area padded); #app is fixed design size then uniformly scaled */
#stage{position:fixed;inset:0;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none}
#app{width:390px;height:844px;flex-shrink:0;position:relative;overflow:hidden;display:flex;flex-direction:column;background:#3b2112;touch-action:none;transform-origin:center center;will-change:transform}
#bg{position:absolute;left:0;right:0;top:0;height:338px;background:url(bg/bg_zaodianjie.jpg) 62% 100%/auto 100% no-repeat}
#bg::after{content:"";position:absolute;inset:0;background:linear-gradient(#0000 70%,#3b2112)}
/* top bar */
#top{position:relative;z-index:5;display:flex;gap:6px;padding:8px 8px 0;flex-shrink:0}
.pill{flex:1;display:flex;align-items:center;gap:3px;background:linear-gradient(#5a341d,#3a1f10);border:2px solid #2a1308;border-radius:16px;height:34px;padding:0 3px 0 0;box-shadow:inset 0 1px 0 #fff3,0 2px 3px #0008;color:#fff;font-weight:900;font-size:15px}
.pill>img{width:34px;height:34px;margin:-4px -2px -4px -6px;filter:drop-shadow(0 1px 1px #0008)}
.pill>b{flex:1;text-align:center;text-shadow:0 1px 2px #000}
.ebar{flex:1;height:20px;border-radius:10px;background:#1c0d06;position:relative;overflow:hidden;box-shadow:inset 0 1px 3px #000}
.ebar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(#8ef06a,#3aa83a);border-radius:10px}
.ebar b{position:relative;display:block;text-align:center;line-height:20px;font-size:13px;text-shadow:0 1px 2px #000}
.plus{width:26px;height:26px;border:0;padding:0;background:none;cursor:pointer}.plus img{width:100%;height:100%}
/* scene */
#scene{position:relative;z-index:2;height:286px;flex-shrink:0}
#scroll{position:absolute;left:6px;top:6px;width:76px;bottom:28px;height:auto;background:#f3e2bd;border-left:2px solid #c9a774;border-right:2px solid #c9a774;box-shadow:0 3px 6px #0007;display:flex;flex-direction:column;align-items:center;padding:0 0 6px;z-index:3;overflow:hidden}
#scroll .rod{width:88px;height:9px;border-radius:5px;background:linear-gradient(#a0622e,#5a3214);box-shadow:0 1px 2px #0008;flex-shrink:0}
.sc-title{font-weight:900;color:#4a2510;font-size:13px;margin:3px 0 1px;flex-shrink:0}
#tasks{width:100%;padding:0 5px;flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}
.tk{display:flex;gap:2px;align-items:flex-start;font-size:9px;line-height:11px;color:#5b3519;margin-bottom:4px}
.tk i{flex-shrink:0;width:11px;height:11px;border:1.5px solid #5b3519;border-radius:2px;font-style:normal;font-size:10px;line-height:8px;text-align:center;color:#2fa84f;font-weight:900}
.tk.done{opacity:.6}.tk small{display:block;color:#a07a5a}
.trophy{width:38px;height:38px;flex-shrink:0;margin-top:2px}.chest{position:relative;width:48px;height:42px;flex-shrink:0;margin-bottom:4px}.chest img{width:48px}
.chest .lk{position:absolute;right:-4px;bottom:0;width:18px}.chest b{position:absolute;left:0;bottom:-4px;font-size:10px;color:#fff;background:#7a3a12;border-radius:6px;padding:0 3px}
#custbar{position:absolute;left:84px;right:0;top:2px;bottom:28px;display:flex;justify-content:space-around;align-items:flex-end}
.cust{position:relative;width:33%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;}.cust.new{animation:walkin .4s both}
@keyframes walkin{from{transform:translateX(30px);opacity:0}}
.bub{position:relative;background:#fffaf0;border:2px solid #4a2510;border-radius:16px;padding:4px 5px 5px;box-shadow:0 2px 3px #0006;margin-bottom:4px;z-index:2}
.bub::after{content:"";position:absolute;left:50%;bottom:-8px;margin-left:-6px;border:6px solid transparent;border-top:8px solid #4a2510}
.bub .lines{display:flex;gap:3px;justify-content:center}
.line{position:relative;width:34px;height:34px;border-radius:9px;cursor:pointer}
.line img{width:100%;height:100%}.line b{position:absolute;right:-4px;bottom:-4px;background:#b8242a;color:#fff;border-radius:7px;font-size:10px;padding:0 3px;line-height:14px}
.line.ok{background:#d8f5d0}.line.full{opacity:.4}.line.full b{background:#2fa84f}
.line.hot{background:#ffe08a;box-shadow:0 0 0 3px #ffb347;transform:scale(1.12)}
.pat{height:7px;margin-top:3px;border-radius:4px;background:#3a2414;border:1px solid #4a2510;overflow:hidden}
.pat i{display:block;height:100%;background:linear-gradient(90deg,#f6c445,#4aa3ff);border-radius:3px;transition:width .5s linear}
.pat.low i{background:#e04a3a}
.who{position:absolute;bottom:-1px;font-size:9px;color:#fff;background:#0008;border-radius:6px;padding:0 4px;white-space:nowrap;z-index:3}
.chr{width:108px;height:108px;margin-bottom:-6px;filter:drop-shadow(0 2px 2px #0006)}
.cust.happy .chr{animation:hop .35s 2}@keyframes hop{50%{transform:translateY(-8px)}}
.cust.impatient .chr{animation:jit .3s infinite}@keyframes jit{50%{transform:translateX(2px)}}
/* A minimal: completable customer — green + non-color mark + side CTA */
.cust.ready{z-index:4}
.bub.ready{border-color:#2fa84f;background:#e8f8e4;box-shadow:0 0 0 2px #2fa84f66}
.bub.ready::after{border-top-color:#2fa84f}
.ready-mark{display:block;text-align:center;font-size:10px;font-weight:900;color:#1e7a32;line-height:1.2;margin:0 0 2px;letter-spacing:.5px}
/* P1-08: order payout preview — keep below lines, don't cover CTA */
.bub .reward{display:block;text-align:center;font-size:11px;font-weight:900;color:#b8242a;line-height:1.2;margin:2px 0 1px;text-shadow:0 1px 0 #fff8}
.bub .reward.ready{font-size:12px;color:#1e7a32}
.give{margin:0 0 2px;padding:5px 10px;border:2px solid #1a5a24;border-radius:12px;background:linear-gradient(#8ef06a,#2fa84f);color:#fff;font-weight:900;font-size:13px;cursor:pointer;z-index:5;box-shadow:0 2px 0 #1a5a24;text-shadow:0 1px 0 #14501f;flex-shrink:0}
.give:active{transform:translateY(1px);box-shadow:0 1px 0 #1a5a24}
#counterTop{position:absolute;left:84px;right:0;bottom:16px;height:30px;pointer-events:none;z-index:3}
#counterTop .steam{position:absolute;width:40px;bottom:-6px}.s1{left:22%}.s2{left:62%}
#scene::after{content:"";position:absolute;left:0;right:0;bottom:0;height:24px;background:linear-gradient(#c58a4f,#8a5528);border-top:2px solid #e2b07a;box-shadow:0 4px 6px #0009;z-index:2}
/* board — P1-04: square cells; icons keep aspect via object-fit; frame centers a square board */
#frame{position:relative;z-index:2;margin:6px 6px 0;padding:7px;border-radius:14px;background:linear-gradient(#6b3d1d,#4a2812);border:3px solid #2a1308;box-shadow:inset 0 0 0 2px #8a5a30,0 4px 8px #000a;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
#board{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);gap:3px;touch-action:none;aspect-ratio:1/1;height:100%;width:auto;max-width:100%}
.bc{width:100%;height:100%;min-width:0;min-height:0;border-radius:6px;background:linear-gradient(#5a3318,#4a2810);box-shadow:inset 0 0 0 1px #8a5a3055,inset 0 2px 4px #0007;position:relative;display:flex;align-items:center;justify-content:center;cursor:grab;overflow:hidden}
.bc img.it{width:94%;height:94%;object-fit:contain;object-position:center;pointer-events:none;filter:drop-shadow(0 2px 1px #0008)}
.bc.gen{background:linear-gradient(#7a4a24,#5a3318)}
.bc .lk{position:absolute;right:0;bottom:0;width:15px;pointer-events:none}
.bc .lv{position:absolute;left:2px;top:0;font-size:9px;color:#ffe08a;font-weight:900;text-shadow:0 1px 1px #000;pointer-events:none}
.bc .t{position:absolute;right:2px;bottom:0;font-size:9px;color:#ffe08a;font-weight:900;text-shadow:0 1px 1px #000;pointer-events:none}
.bc .cd{position:absolute;left:4px;right:4px;bottom:2px;height:3px;background:#0008;border-radius:2px}.bc .cd i{display:block;height:100%;background:#6cf}
.bc.sel{box-shadow:inset 0 0 0 3px #ffd34d,0 0 10px #ffd34d}
.bc.src{opacity:.35}
.bc.tgt-move{box-shadow:inset 0 0 0 3px #fff8}
.bc.tgt-merge{box-shadow:inset 0 0 0 3px #6f6,0 0 12px #6f6;transform:scale(1.06)}
.bc.tgt-bad{box-shadow:inset 0 0 0 3px #e04a3a}
.bc.pop,.bc.merge-pop{animation:mergepop .28s cubic-bezier(.2,1.4,.4,1)}
@keyframes mergepop{0%{transform:scale(1)}35%{transform:scale(1.22)}70%{transform:scale(.96)}100%{transform:scale(1)}}
.bc.merge-pop::after{content:"";position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle,#fff8 0%,#ffe08a55 40%,transparent 70%);animation:mergeflash .28s ease forwards;pointer-events:none}
@keyframes mergeflash{0%{opacity:0;transform:scale(.6)}40%{opacity:1}100%{opacity:0;transform:scale(1.2)}}
.bc.boom{animation:boom .45s ease}@keyframes boom{0%{background:#ffe08a}}
.bc.special{animation:glow .6s infinite alternate}@keyframes glow{to{box-shadow:inset 0 0 14px #ffb347}}
#ghost{position:fixed;width:64px;height:64px;pointer-events:none;z-index:50;transform:translate(-50%,-60%) scale(1.15);filter:drop-shadow(0 6px 6px #000a);display:none}
#ghost.back{transition:left .15s,top .15s}
#help{position:absolute;right:-6px;bottom:-12px;width:28px;height:28px;border:0;padding:0;background:none;z-index:3}#help img{width:100%}
.plaque{position:absolute;left:50%;top:-22px;transform:translateX(-50%);white-space:nowrap;background:#fff3d6;border:2px solid #4a2510;border-radius:6px;font-size:10px;font-weight:900;color:#4a2510;padding:0 4px;z-index:4;pointer-events:none}
/* dock — A minimal: no bottom 「煮好了」; spacer keeps sell/undo apart (P1-01 safe padding kept) */
#dock{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-shrink:0;padding:12px 12px 10px}
#dock button{border:0;cursor:pointer;font-weight:900}
.dock-spacer{flex:1;min-width:12px;pointer-events:none}
.sq{width:66px;height:58px;border-radius:14px;background:linear-gradient(#fbe9c4,#e8c98f);border:2px solid #4a2510!important;box-shadow:0 3px 0 #2a1308;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#4a2510;font-size:11px}
.sq img{width:30px;height:30px}.sq:disabled{opacity:.45}
.sq.drop{background:#ffe08a;transform:scale(1.08)}
#selinfo{position:relative;z-index:2;text-align:center;font-size:11px;color:#f3d9a4;min-height:16px;padding:4px 0 0;flex-shrink:0}
.foot{position:relative;z-index:2;display:flex;gap:10px;justify-content:center;font-size:10px;color:#a07a5a;padding:2px 2px 6px;flex-shrink:0}.foot a{color:#c9a774}.foot button{font-size:10px;background:none;border:1px solid #a07a5a;color:#c9a774;border-radius:6px}
/* P1-05: hide debug/playtest chrome unless body.debug (?debug=1 / localStorage nm-debug) */
.playtest-debug{display:none!important}
body.debug #selinfo.playtest-debug{display:block!important}
body.debug .foot.playtest-debug{display:flex!important}
#toast{position:absolute;left:50%;top:26%;transform:translateX(-50%);background:#000c;color:#ffe08a;padding:8px 14px;border-radius:12px;font-size:13px;pointer-events:none;opacity:0;transition:opacity .2s;max-width:300px;text-align:center;z-index:40}
#toast.show{opacity:1}
#floaters{position:absolute;inset:0;pointer-events:none;z-index:41}
.fl{position:absolute;left:50%;top:45%;color:#ffe08a;font-weight:900;font-size:16px;transform:translateX(-50%);animation:up 1s forwards;text-shadow:0 2px 2px #000}.fl.big{font-size:22px;color:#ff9b3d}
@keyframes up{to{transform:translate(-50%,-70px);opacity:0}}

/* #020 day session HUD + settle/shop overlays */
#daybar{position:relative;z-index:5;display:flex;align-items:center;gap:8px;padding:4px 10px 0;color:#ffe08a;font-weight:900;font-size:13px;flex-shrink:0}
#daybar #daylabel{background:#5a341d;border:2px solid #2a1308;border-radius:10px;padding:2px 8px}
#daybar #daytimer{flex:1;text-align:center;font-size:18px;letter-spacing:1px;text-shadow:0 1px 2px #000;font-variant-numeric:tabular-nums}
#daybar #daytimer.warn{color:#ff8a6a}
#daybar #daytimer.crit{color:#ff4a3a;animation:blink .6s infinite}
@keyframes blink{50%{opacity:.55}}
#daybar #closeStall{border:2px solid #4a1508;background:linear-gradient(#f0743a,#c43c1c);color:#fff;font-weight:900;font-size:12px;border-radius:10px;padding:4px 10px;cursor:pointer;box-shadow:0 2px 0 #2a1308}
#daybar #closeStall:disabled{opacity:.4;cursor:default}
#buildlabel{font-size:9px;opacity:.55;font-weight:700;max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#overlay{position:absolute;inset:0;z-index:60;background:#000a;display:flex;align-items:center;justify-content:center;padding:16px}
#overlay.hidden{display:none}
.panel{width:100%;max-width:320px;background:linear-gradient(#fff8e8,#f3e2bd);border:3px solid #4a2510;border-radius:18px;padding:16px 14px 14px;box-shadow:0 8px 24px #000a;color:#4a2510}
.panel.hidden{display:none}
.panel h2{margin:0;text-align:center;font-size:22px}
.panel .sub{margin:4px 0 12px;text-align:center;font-size:13px;color:#7a5530}
.panel .stats{list-style:none;margin:0 0 14px;padding:0}
.panel .stats li{display:flex;justify-content:space-between;padding:8px 10px;margin-bottom:6px;background:#fffaf0;border:2px solid #c9a774;border-radius:10px;font-weight:700;font-size:14px}
.panel .stats b{color:#b8242a;font-size:16px}
.btn{display:block;width:100%;margin-top:8px;border:2px solid #4a2510;border-radius:14px;padding:12px;font-weight:900;font-size:15px;cursor:pointer;background:linear-gradient(#fbe9c4,#e8c98f);color:#4a2510;box-shadow:0 3px 0 #2a1308}
.btn.primary{background:linear-gradient(#f0743a,#c43c1c);color:#fff;border-color:#4a1508;text-shadow:0 1px 0 #7a2208}
.btn:disabled{opacity:.45;cursor:default;box-shadow:none}
.shop-item{display:flex;gap:8px;align-items:center;background:#fffaf0;border:2px solid #c9a774;border-radius:12px;padding:8px;margin-bottom:8px}
.shop-item img{width:48px;height:48px;flex-shrink:0}
.shop-item .meta{flex:1;min-width:0}
.shop-item .meta b{display:block;font-size:14px}
.shop-item .meta small{display:block;font-size:11px;color:#7a5530;line-height:1.3}
.shop-item button{flex-shrink:0;border:2px solid #4a2510;border-radius:10px;background:linear-gradient(#f0743a,#c43c1c);color:#fff;font-weight:900;font-size:12px;padding:8px 10px;cursor:pointer}
.shop-item button:disabled{opacity:.45;background:#aaa;border-color:#666;cursor:default}
.shop-item.owned{opacity:.75}