:root{--primary:#f6c477;--ink:#604332;--muted:#886950;--paper:#fff8ec;--line:#d1ab82;--wood:#ead0ae;--radius:18px}
*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:#cbb598;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}button:focus,canvas:focus{outline:3px solid #8c5640;outline-offset:2px}button:active{transform:translateY(2px)}button:disabled{opacity:.48;cursor:default;transform:none}img{max-width:100%;object-fit:contain;pointer-events:none}p{line-height:1.6;margin:8px 0}h1,h2,h3{margin:0;line-height:1.3}h1{font-size:28px}h2{font-size:22px}h3{font-size:17px}small,.muted{color:var(--muted);font-size:12px}button,.btn{min-height:44px}#app{width:100%;max-width:480px;margin:0 auto;height:100%;height:var(--app-height,100%);position:relative;background:var(--wood);box-shadow:0 0 40px rgba(113,80,57,0.188);overflow:hidden}.page{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 16px 16px;padding-top:12px;padding-top:calc(12px + var(--safe-area-inset-top,env(safe-area-inset-top,0px)));padding-bottom:16px;padding-bottom:calc(16px + var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)));background:var(--paper) url('./assets/backgrounds/bg_paper_clean.svg') center/cover}.page.shop,.page.customer,.page.delivery{background:var(--wood) url('./assets/backgrounds/reference/shop-sunlight.jpg') center/cover}.page.puzzle,.page.ironing{background:var(--wood) url('./assets/backgrounds/bg_workbench_clean.svg') center/cover}header{display:flex;align-items:center;justify-content:space-between;min-height:44px;margin-bottom:14px}header h2{font-size:18px;text-align:center;flex:1;margin:0 8px}.icon-button{width:44px;height:44px;border:1px solid var(--line);border-radius:13px;background:var(--paper);box-shadow:0 3px 0 rgba(174,133,83,0.251);display:flex;align-items:center;justify-content:center;flex-shrink:0}.icon-button img{width:27px;height:27px}.coin{background:var(--paper);border:1px solid var(--line);border-radius:25px;padding:7px 15px;display:flex;align-items:center;font-weight:700}.coin img{width:25px;height:25px;margin-right:8px}.btn{border:1px solid var(--line);border-radius:14px;background:linear-gradient(#fffdf6,#fbedd9);box-shadow:inset 0 0 0 2px rgba(255,255,255,0.565),0 3px 0 rgba(172,133,90,0.220);padding:10px 16px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}.btn img{width:23px;height:23px;margin-right:7px}.btn.primary{background:linear-gradient(#ffdc98,var(--primary))}.btn.wide{width:100%}.btn + .btn{margin-left:8px}.row{display:flex;align-items:center}.row>*{min-width:0}.row.spread{justify-content:space-between}.row.actions>*{flex:1}.panel{background:linear-gradient(#fffcf4,var(--paper));border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:inset 0 0 0 2px rgba(255,255,255,0.600),0 4px 0 rgba(172,133,90,0.173)}.brand{text-align:center;color:#ffe6b5;margin-top:12px;text-shadow:0 2px 3px rgba(88,52,25,0.376)}.brand h1{font-size:38px;letter-spacing:5px}.brand small{color:#ffe6b5;letter-spacing:2px;font-size:10px}.shop-inner{min-height:calc(100% - 60px);display:flex;flex-direction:column;justify-content:space-between}.welcome{margin-top:230px;text-align:center}.welcome h2{font-size:19px}.welcome p{font-size:14px;margin:14px 0 20px}.welcome .actions{margin-top:13px}.welcome footer{margin-top:16px;font-size:12px;color:var(--muted)}.eyebrow{text-align:center;font-size:12px;color:var(--muted);letter-spacing:2px;margin:10px 0}.customer .eyebrow,.delivery .eyebrow{color:var(--paper);text-shadow:0 1px 3px #604332}.character{display:block;margin:0 auto -16px;width:65%;height:260px;object-fit:contain;position:relative;z-index:1}.dialogue{position:relative;z-index:2;text-align:center}.dialogue h2{margin-bottom:12px}.dialogue .quote{font-size:18px;white-space:pre-line;line-height:1.8;margin:14px 0 24px}.tag{display:inline-block;font-size:12px;padding:4px 10px;background:#f2e2ca;border-radius:20px;color:var(--muted)}.intro{text-align:center;margin:10px 0 18px}.product-option{width:100%;display:flex;text-align:left;align-items:center;margin-bottom:12px;padding:10px 14px;min-height:106px;border:1px solid var(--line);border-radius:18px;background:var(--paper)}.product-option.selected{border:2px solid #a97744;background:#fff0d1;box-shadow:0 3px 0 rgba(185,148,96,0.251)}.product-option canvas{width:80px;height:80px;margin-right:18px;flex-shrink:0}.product-option strong{display:block;font-size:17px;margin-bottom:6px}.product-option .pick{margin-left:auto;font-size:20px}.catalog .confirm{margin-top:16px;text-align:center}.catalog .confirm p{font-size:13px;margin:12px 0}.mini-order{display:flex;align-items:center;padding:9px 12px;margin-bottom:10px}.mini-order canvas{width:46px;height:46px;margin-right:12px;flex-shrink:0}.mini-order h3{font-size:16px}.mini-order p{font-size:12px;margin:4px 0 0}.board-wrap{margin:0 auto 10px;position:relative;touch-action:none}.board{display:block;width:100%;height:100%;touch-action:none;border-radius:20px;background:linear-gradient(135deg,#fffdf4,#f2e4cf);border:1px solid var(--line);box-shadow:inset 0 0 0 2px rgba(255,255,255,0.600),0 4px 0 rgba(161,116,73,0.188)}.tool-row{display:flex;margin:12px 0}.tool-row .btn{flex:1;padding:8px 5px;font-size:14px}.tray{padding:10px 12px}.tray-title{display:flex;justify-content:space-between;align-items:center;font-size:13px}.tray-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:6px;margin-top:8px}.piece{position:relative;min-height:62px;border:1px solid transparent;background:#f5ead9;border-radius:11px;touch-action:none;padding:0}.piece.selected{background:#e7d0ab;border-color:#8c6644}.piece canvas{width:64px;height:58px;display:block;margin:auto;pointer-events:none}.piece span{position:absolute;bottom:2px;right:5px;font-size:10px;color:var(--muted)}.pager{display:flex;align-items:center;justify-content:center;margin-top:8px}.pager button{min-width:44px;border:0;background:transparent}.pager span{font-size:12px;padding:0 14px}.hint-line{font-size:12px;text-align:center;margin:10px 0;color:var(--muted)}.puzzle header{margin-bottom:10px}.puzzle-footer{display:flex;justify-content:center}.text-button{border:0;background:transparent;text-decoration:underline;font-size:12px;padding:5px 12px}.finished{text-align:center}.finished .hero-product{position:relative;width:260px;max-width:90%;margin:30px auto 20px;padding-top:45px}.hero-product canvas{width:100%;height:auto}.hardware{width:68px;height:78px;position:absolute;top:0;left:calc(50% - 34px)}.finished .panel{margin:18px 0}.finished .btn{margin-top:12px}.delivery .reward{font-size:32px;font-weight:700;color:#916125;margin:12px 0}.ironing .intro p{font-size:14px}.iron-paper{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:fill;background:#fff8e8;border-radius:20px;pointer-events:none;opacity:.8}.iron-image{position:absolute;top:42%;left:40%;width:100px;height:100px;pointer-events:none;transform:translate(-50%,-50%);filter:drop-shadow(0 6px 3px rgba(96,67,50,0.188))}.progress{height:13px;background:#d7b890;border-radius:10px;overflow:hidden;margin:12px 0}.progress>span{height:100%;display:block;background:#eaaa60;border-radius:10px;width:0}.collection-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:12px}.collection-card{text-align:center;padding:12px 8px}.collection-card canvas{width:100%;height:auto}.collection-card h3{font-size:14px}.collection-card p{font-size:12px}.collection-card .tag{font-size:10px}.empty{text-align:center;padding:55px 22px;margin:25px 0}.empty img{width:64px;height:64px}.settings-row{display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-bottom:1px solid #e8d6bd}.settings-row p{font-size:12px}.switch{width:58px;min-width:58px;height:44px;border:1px solid var(--line);border-radius:24px;background:#ddd0bc;padding:5px;margin-left:10px}.switch:before{content:'';display:block;background:var(--paper);width:30px;height:30px;border-radius:50%;box-shadow:0 2px 4px rgba(96,67,50,0.200)}.switch[aria-checked=true]{background:#8faaa0}.switch[aria-checked=true]:before{margin-left:15px}.settings-note{font-size:13px;text-align:center;margin:22px 0}.modal-shade{position:fixed;z-index:30;top:0;right:0;bottom:0;left:0;background:rgba(57,38,25,0.533);display:flex;align-items:center;justify-content:center;padding:24px}.modal{max-width:380px;width:100%;max-height:90%;overflow-y:auto}.modal header{margin-bottom:6px}.modal h2{font-size:20px}.modal p{font-size:14px}#toast{position:fixed;z-index:50;bottom:24px;left:50%;transform:translateX(-50%);width:calc(100% - 40px);max-width:420px;background:#604332;color:#fff7e6;border-radius:14px;padding:12px 18px;font-size:14px;line-height:1.5;text-align:center;pointer-events:none;opacity:0}#toast.show{opacity:1}.drag-preview{position:fixed;z-index:20;pointer-events:none;filter:drop-shadow(0 5px 3px rgba(96,67,50,0.251))}.loading{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background:var(--paper)}.loading h1{letter-spacing:5px}.art-float{animation:breathe 3s ease-in-out infinite}@keyframes breathe{50%{transform:translateY(-5px)}}.reduced .art-float{animation:none}@media(prefers-reduced-motion:reduce){.art-float{animation:none}button:active{transform:none}}@media(max-height:720px){.welcome{margin-top:160px}.character{height:210px}.dialogue .quote{font-size:16px;margin:10px 0 18px}.tray-grid{grid-gap:4px}.piece{min-height:54px}.piece canvas{height:50px;width:58px}.puzzle header{margin-bottom:6px}.tool-row{margin:8px 0}.finished .hero-product{width:220px;margin-top:15px}}@media(min-height:850px){.character{height:320px}.welcome{margin-top:300px}.intro{margin:22px 0}.tool-row{margin:18px 0}.tray-grid{grid-gap:10px}}

.customer header h2{color:#fff4df;text-shadow:0 1px 3px #604332}.page::-webkit-scrollbar{display:none}.tray .pager{margin-top:0}.tray .pager button{padding:0 12px}.puzzle-footer .text-button{min-height:44px}

/* A neutral surface keeps warm bead palettes distinct from the wooden table. */
.board{background:#fffdf9}.piece{background:#fffdf7}.piece.selected{background:#fff0ce;border:2px solid #8c6644}

.tray.drop-active{background:#e2efd6;border:2px dashed #688256}.puzzle .board{cursor:grab}
/* Reserve both bead rows and pagination even when the tray becomes empty. */
.puzzle .tray{height:221px;position:relative;flex-shrink:0}
.puzzle .tray-grid{grid-auto-rows:62px;align-content:start}
.puzzle .tray .pager{position:absolute;bottom:10px;left:12px;right:12px;height:44px}
.puzzle .tray.drop-active{border-width:1px;outline:2px dashed #688256;outline-offset:-2px}
@media(max-height:739px){.puzzle .tray{height:153px}}
@media(max-height:720px){.puzzle .tray{height:145px}.puzzle .tray-grid{grid-auto-rows:54px}}
@media(min-height:850px){.puzzle .tray{height:225px}}
.puzzle .iron-next{margin-top:12px}

/* Sunlit handmade shop: supplied scene art, with live controls layered above. */
:root{--primary:#ffcd65;--ink:#59351f;--muted:#856043;--paper:#fff8e9;--line:#c2986d;--wood:#d6aa79;--radius:20px}
body{background:#513e2d}
.page.shop{background:#b88c5d url('./assets/backgrounds/reference/shop-sunlight.jpg') center/cover}
.page.customer,.page.delivery{background:#b88c5d url('./assets/backgrounds/reference/counter-sunlight.jpg') center/cover}
.page.puzzle,.page.ironing{background:linear-gradient(rgba(245,221,180,.55),rgba(232,195,146,.87)),url('./assets/backgrounds/reference/counter-sunlight.jpg') center/cover}
.page.catalog,.page.collection,.page.finished{background:linear-gradient(rgba(255,245,222,.92),rgba(249,230,196,.95)),url('./assets/backgrounds/reference/counter-sunlight.jpg') center/cover}
.btn,.icon-button{border:1px solid #b88b61;background:linear-gradient(#fffef6,#f8e5ce);box-shadow:inset 0 0 0 2px #fff8ee,0 3px 0 #b7875b,0 5px 9px rgba(86,49,23,.14);border-radius:17px}
.btn.primary{color:#653408;border:2px solid #c68924;background:linear-gradient(#ffeaa0 0%,#ffda76 48%,#ffc34d 100%);box-shadow:inset 0 0 0 2px #fff0b4,0 4px 0 #b67929,0 7px 14px rgba(90,48,18,.2);text-shadow:0 1px #ffe9a2}
.btn:active,.icon-button:active{box-shadow:inset 0 0 0 2px #fff4df,0 1px 0 #b7875b}
.coin{border:2px solid #e6c58e;color:#fff8e9;background:linear-gradient(#76583f,#573e2e);box-shadow:0 3px 6px rgba(50,26,13,.22),inset 0 1px #fff0be;font-size:17px;min-height:44px}
.panel{border-color:#c89b70;background:linear-gradient(135deg,#fffcf4,#fff2de);box-shadow:inset 0 0 0 3px rgba(255,255,255,.65),0 4px 0 rgba(120,75,35,.24),0 7px 18px rgba(110,64,30,.12)}
.shop-inner{min-height:calc(100% - 65px)}
.brand{align-self:center;position:relative;margin:22px 0 0;padding:16px 30px 19px;border:3px solid #a77543;border-radius:12px;background:linear-gradient(100deg,#81552f,#a46e3c 45%,#79502e);box-shadow:inset 0 0 0 2px #c29560,0 6px 0 #613f25,0 12px 20px rgba(63,36,19,.25);transform:rotate(-2deg)}
.brand:before,.brand:after{content:'';position:absolute;width:5px;height:29px;background:#65472e;border:1px solid #b38b55;border-radius:5px;top:-26px;left:20px}
.brand:after{left:auto;right:20px}
.brand h1{font-size:36px;letter-spacing:5px;color:#ffe1a9;text-shadow:0 3px #5c351d}
.brand small{display:block;margin-top:7px;letter-spacing:3px;font-size:10px}
.shop .welcome{margin:200px 3px 14px;padding:20px;background:linear-gradient(rgba(255,252,240,.97),rgba(255,238,209,.97));border:2px solid #c99b65;border-radius:25px;position:relative}
.shop .welcome:before{content:'小店营业中';display:block;width:108px;margin:-34px auto 17px;padding:5px 8px;border:2px solid #e7d8aa;border-radius:8px;background:#6b8157;color:#fff9e7;font-size:12px;letter-spacing:2px;box-shadow:0 3px 0 #516740}
.shop .welcome h2{font-size:19px}.shop .welcome p{margin:9px 0 18px}.shop .welcome .primary{min-height:60px;font-size:21px;letter-spacing:2px;border-radius:22px}.shop .welcome footer{font-size:11px;margin-top:17px}
.customer .eyebrow,.delivery .eyebrow{display:table;margin:10px auto;padding:4px 14px;background:rgba(84,53,31,.82);border-radius:20px}
.customer .dialogue,.delivery .dialogue{border:3px solid #b58255;padding:22px;box-shadow:inset 0 0 0 3px #fffaf0,0 6px 0 #8f603a,0 10px 24px rgba(80,43,17,.2)}
.dialogue .tag{background:#e9edda;color:#536842}.dialogue .quote{color:#68462b}
.product-option{background:linear-gradient(120deg,#fffdf5,#fff1db);border:2px solid #d6b58d;box-shadow:0 3px 0 rgba(149,101,56,.18)}
.product-option.selected{border:2px solid #a57137;background:linear-gradient(120deg,#fff5d5,#ffe4a1);box-shadow:inset 0 0 0 2px #fff9e3,0 3px 0 #c6a16b}
.product-option canvas{background:#fffaf0;border-radius:12px}.product-option .pick{color:#76824b}
.mini-order{position:relative;background:#fff7e7;border:1px solid #ba956f;box-shadow:0 3px 0 #d2ad80;margin-bottom:20px}
.mini-order:after{content:'';position:absolute;top:-5px;left:40%;width:48px;height:12px;background:rgba(213,163,136,.55);transform:rotate(-3deg);pointer-events:none}
.board-wrap{border-radius:20px;box-shadow:0 0 0 5px #d9c49a,0 0 0 9px #738c76,0 0 0 11px #526f5b,0 7px 0 12px rgba(115,76,43,.4);margin-bottom:20px}
.board{background:#fffaf0;border-color:#bfa884;box-shadow:inset 0 0 0 3px #fffdf6}
.tool-row{margin-top:20px;margin-bottom:16px}.tool-row .btn img{width:25px;height:25px}
.puzzle .tray{border:1px solid #b28458;border-radius:14px;background:linear-gradient(130deg,#fff8e9,#f5e5cc);box-shadow:inset 0 0 0 4px #dec095,inset 0 0 0 6px #f4dfba,0 4px 0 #a87749,0 7px 12px rgba(96,58,27,.15)}
.tray-title{color:#75512f}.tray-title strong{letter-spacing:1px}.piece{background:rgba(255,255,255,.66);box-shadow:inset 0 1px 2px rgba(143,104,61,.13)}
.piece.selected{background:#fff0bd;border-color:#97703a;box-shadow:inset 0 0 0 1px #e1b965}
.puzzle .tray.drop-active{background:#e5eed9;outline-color:#5e7b49}.hint-line{color:#644a32;text-shadow:0 1px #f6e3c6}
.progress{background:#b7a190;border:2px solid #fff9eb;box-shadow:0 0 0 1px #ad825d}.progress span{background:linear-gradient(#b3d47b,#769f4d)}
@media(max-height:720px){.brand{margin-top:8px;padding:12px 24px}.brand h1{font-size:30px}.shop .welcome{margin-top:120px;padding:16px}.shop .welcome .primary{min-height:52px}.tool-row{margin-top:16px;margin-bottom:12px}.mini-order{margin-bottom:17px}}
@media(min-height:850px){.shop .welcome{margin-top:270px}}

/* Larger tray previews, preserving the fixed tray and hit-area dimensions. */
.piece canvas{width:96px;height:58px;max-width:100%;object-fit:contain}
@media(max-height:720px){.piece canvas{width:83px;height:50px}}
.modal .btn.wide + .btn.wide{margin-left:0;margin-top:10px}
/* Customer request floats above the workboard without a backing panel. */
.order-scene{height:158px;display:flex;justify-content:center;align-items:center;margin:0 0 18px;padding:0 12px}
.order-customer{width:138px;height:158px;object-fit:contain;object-position:center bottom;margin-right:26px}
.order-bubble{position:relative;width:148px;flex-shrink:0;padding:7px 12px 9px;border:2px solid #c49a70;border-radius:25px;background:#fff9ed;box-shadow:0 3px 0 rgba(123,81,44,.2);text-align:center}
.order-bubble:before{content:'';position:absolute;left:-13px;top:58%;width:21px;height:21px;background:#fff9ed;border-left:2px solid #c49a70;border-bottom:2px solid #c49a70;transform:rotate(45deg);border-radius:0 0 0 5px}
.order-bubble canvas{display:block;width:112px;height:112px;margin:0 auto;position:relative}
.order-progress{font-size:12px;line-height:18px;color:#795535;margin:2px 0 0;position:relative}
@media(max-height:720px){.order-scene{height:132px;margin-bottom:16px}.order-customer{height:132px;width:112px;margin-right:24px}.order-bubble{width:130px;padding:5px 10px 7px}.order-bubble canvas{width:94px;height:94px}}
@media(max-width:350px){.order-scene{padding:0}.order-customer{width:104px;margin-right:20px}}
/* Pointer clicks do not leave a focus rectangle; keyboard navigation stays visible. */
button:focus{outline:none}
button:focus-visible{outline:3px solid #8c5640;outline-offset:2px}
.collection-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:8px}
.collection-card{min-width:0;padding:10px 5px;color:var(--ink)}
.panel.collection-card,.catalog-list .product-option{color:var(--ink);border:1px solid #c89b70;border-radius:var(--radius);background:linear-gradient(135deg,#fffcf4,#fff2de);box-shadow:inset 0 0 0 3px rgba(255,255,255,.65),0 4px 0 rgba(120,75,35,.24),0 7px 18px rgba(110,64,30,.12)}
.collection-card h3{font-size:12px;line-height:1.4;overflow-wrap:break-word}
.collection-card p{font-size:11px;margin:5px 0}
.collection-card .tag{display:block;font-size:10px;padding:4px;white-space:normal}
.collection-detail{text-align:center}
.collection-detail canvas{display:block;width:100%;max-width:360px;height:auto;margin:8px auto 12px}
.page.atlas{display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(rgba(255,245,222,.94),rgba(249,230,196,.96)),url('./assets/backgrounds/reference/counter-sunlight.jpg') center/cover}
.atlas>header{flex-shrink:0;margin-bottom:4px}.atlas-count{text-align:center;font-size:12px;color:var(--muted);margin:8px 0 14px;flex-shrink:0}
.atlas-scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:2px 2px 12px}
.atlas-tabs{display:flex;flex-shrink:0;padding:12px 0 5px;border-top:1px solid #d4b88c}.atlas-tabs .btn{flex:1;min-height:50px}
.atlas-card{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:130px}.atlas-card h3{margin-top:8px}
.atlas-portrait{display:block;width:100%;height:96px;object-fit:contain}.atlas-large{display:block;width:100%;height:300px;object-fit:contain}
.customer-portrait{max-width:100%;pointer-events:none;overflow:hidden;flex-shrink:0}.profile-button{display:block;margin:4px auto 0;min-height:44px}.customer-profile .atlas-large{height:200px;margin-bottom:12px}.profile-motto{color:var(--ink);font-weight:700}.profile-fields{text-align:left;margin:16px 0 0}.profile-fields dt{font-size:12px;color:var(--muted);font-weight:700;margin-top:14px}.profile-fields dd{margin:4px 0 0;font-size:14px;line-height:1.7;overflow-wrap:break-word}
.atlas-question{height:96px;display:flex;align-items:center;justify-content:center;font-size:48px;font-weight:700;color:#b39b79}.atlas-card.locked{background:#eee5d5;box-shadow:none;color:#9c876b}
/* Home actions share one alignment and have room for their raised shadows. */
.shop .welcome > .btn.wide{display:flex;width:100%;margin-left:0;margin-right:0}
.shop .welcome > .btn.wide + .btn.wide{margin-top:16px;margin-left:0;min-height:50px}
.shop .welcome footer{margin-top:22px}
/* Commission selection: fixed portrait and actions, two visible rows of three. */
.page.commission-catalog{display:flex;flex-direction:column;overflow:hidden}
.commission-catalog>header{flex-shrink:0;margin-bottom:4px}
.catalog-customer{display:block;width:100%;height:24vh;max-height:190px;min-height:80px;flex-shrink:0;margin:auto auto 0}
.commission-catalog>.intro{flex-shrink:0;text-align:center;margin:6px 0 10px}
.commission-catalog>.intro p{margin:0;font-size:12px;line-height:1.5}
.catalog-list{flex:0 1 328px;min-height:0;max-height:328px;padding:3px 4px 18px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));grid-gap:8px;align-content:start;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.catalog-list::-webkit-scrollbar{display:none;width:0;height:0}
.catalog-list .product-option{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;min-height:0;height:100%;margin:0;padding:6px;text-align:center}
.catalog-list .product-option.selected{border-color:#a57137;outline:2px solid #a57137;outline-offset:-3px}
.catalog-list .product-option canvas{display:block;width:100%;height:0;min-height:0;flex:1;object-fit:contain;margin:0 auto 4px;background:transparent;border-radius:0}
.catalog-list .product-option>div{width:100%;min-width:0;flex-shrink:0}
.catalog-list .product-option strong{font-size:12px;line-height:1.4;margin:0;overflow-wrap:break-word}
.catalog-list .product-option small{display:block;font-size:10px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.catalog-list .product-option .pick{position:absolute;top:4px;right:6px;margin:0;font-size:16px;line-height:20px}
.catalog-list .product-option:focus{outline:2px solid #8c5640;outline-offset:-3px}
.commission-catalog>.confirm{flex-shrink:0;margin-top:10px;margin-bottom:auto}
.commission-catalog>.confirm p{margin:0 0 8px;font-size:12px}
@media(max-height:600px){.catalog-customer{height:18vh;min-height:60px}.commission-catalog>.intro{margin:4px 0 6px}.commission-catalog>.confirm{margin-top:6px}.catalog-list .product-option small{display:none}}
.audio-settings .settings-row{border-bottom:0;padding-bottom:8px}.audio-volume{display:flex;align-items:center;min-height:44px;padding:0 0 12px;border-bottom:1px solid #e8d6bd;font-size:12px}.audio-volume input{flex:1;min-width:0;min-height:44px;margin:0 12px}.audio-volume>span:last-child{min-width:34px;text-align:right}
/* Selection is a separate overlay: it never alters bead pigment. */
.selection-ripples{position:absolute;inset:0;top:0;left:0;right:0;bottom:0;pointer-events:none;overflow:hidden;border-radius:20px}
.selection-ripple{position:absolute;transform:translate(-50%,-50%);border:2px solid #ed6a13;border-radius:50%;box-shadow:0 0 5px rgba(237,106,19,.7)}
.selection-ripple:after{content:'';position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;border:2px solid #ff941f;border-radius:50%;animation:bead-ripple 1.25s ease-out infinite}
@keyframes bead-ripple{0%{transform:scale(.92);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.piece.selected{border:2px solid #ed6a13;background:#fff0db;box-shadow:inset 0 0 0 1px #ffc16b,0 0 7px rgba(237,106,19,.45)}
.piece.selected:after{content:'';position:absolute;top:2px;left:2px;right:2px;bottom:2px;border:2px solid #ff941f;border-radius:9px;pointer-events:none;animation:tray-ripple 1.25s ease-out infinite}
@keyframes tray-ripple{0%{opacity:.9;transform:scale(.93)}100%{opacity:0;transform:scale(1.03)}}
.reduced .selection-ripple:after,.reduced .piece.selected:after{animation:none;opacity:.5}
@media(prefers-reduced-motion:reduce){.selection-ripple:after,.piece.selected:after{animation:none;opacity:.5}}
/* Close the gap to the board's outer rim without moving the board or preview. */
.puzzle .order-customer{transform:translateY(8px)}
@media(max-height:720px){.puzzle .order-customer{transform:translateY(6px)}}
/* Shared viewport spacing: reserve breathing room above every page header. */
:root{--page-top-space:32px;--tray-height:221px}
.page{padding-top:32px;padding-top:calc(var(--page-top-space) + var(--safe-area-inset-top,env(safe-area-inset-top,0px)));padding-left:16px;padding-left:calc(16px + var(--safe-area-inset-left,env(safe-area-inset-left,0px)));padding-right:16px;padding-right:calc(16px + var(--safe-area-inset-right,env(safe-area-inset-right,0px)))}
.page>header{margin-bottom:18px;flex-shrink:0}
.page>header h2{min-width:0;overflow-wrap:break-word}
.puzzle .tray{height:var(--tray-height)}
.shop .shop-inner{min-height:0}
.shop .welcome{margin-top:18vh;margin-bottom:8px}
.modal-shade{padding-top:24px;padding-top:calc(24px + var(--safe-area-inset-top,env(safe-area-inset-top,0px)));padding-bottom:24px;padding-bottom:calc(24px + var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)))}
.modal{max-height:100%;min-height:0;-webkit-overflow-scrolling:touch}
#toast{bottom:24px;bottom:calc(24px + var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)))}
@media(min-height:850px){:root{--tray-height:225px}}
@media(max-height:739px){:root{--tray-height:153px}}
@media(max-height:720px){:root{--tray-height:145px}.shop .welcome{margin-top:10vh}.customer .character,.delivery .character{height:180px}}
@media(max-width:350px){.page{padding-left:12px;padding-right:12px}.order-scene{padding:0}.order-customer{margin-right:16px}.order-bubble{width:124px}.order-bubble canvas{width:92px;height:92px}.panel{padding:14px}.dialogue .quote{font-size:15px}}
@media(max-height:540px){.page.commission-catalog{overflow-y:auto}.catalog-customer{height:90px;min-height:90px;margin-top:0}.catalog-list{flex:0 0 270px;min-height:270px}.commission-catalog>.confirm{margin-bottom:8px}.order-scene{height:104px}.order-customer{height:104px}.order-bubble{padding:4px 8px}.order-bubble canvas{height:76px;width:76px}.customer .character,.delivery .character{height:140px}.shop .welcome{margin-top:24px}}
@media(max-width:350px){.page{padding-left:calc(12px + var(--safe-area-inset-left,env(safe-area-inset-left,0px)));padding-right:calc(12px + var(--safe-area-inset-right,env(safe-area-inset-right,0px)))}}
/* Home controls rest at the bottom; short screens retain natural scrolling. */
.page.shop{display:flex;flex-direction:column}
.shop .shop-inner{flex:1 0 auto;min-height:0;justify-content:flex-start}
.shop .brand{flex-shrink:0}
.shop .welcome{flex-shrink:0;margin-top:auto;margin-bottom:0}
.shop .brand{margin-bottom:32px}
/* Lower every page header without shifting its content or modal headers. */
.page>header{transform:translateY(10px)}

/* Bottom home navigation: three small circles and a prominent story entrance. */
.page.start{display:flex;flex-direction:column;background:#b88c5d url('./scene/storefront.webp') center/cover}
.start-actions{margin-top:auto;padding:32px 24px 48px;text-align:center}
.start-actions .btn{width:100%;min-height:64px;font-size:23px;letter-spacing:3px}
.start-actions .btn img{width:30px;height:30px}
@media(max-height:540px){.start-actions{padding-bottom:20px}}
.shop .home-navigation{flex-shrink:0;margin-top:auto;padding:20px 0 16px}
.shop-home-actions{display:flex;align-items:flex-end;justify-content:flex-end;gap:6px;margin-top:20px}
.shop-home-actions .btn{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0;padding:5px;letter-spacing:0;border-radius:50%;line-height:1.25}
.shop-home-actions .home-small{width:clamp(44px,13.8vw,68px);height:clamp(44px,13.8vw,68px);font-size:12px;gap:3px}
.shop-home-actions .home-small img{width:22px;height:22px;margin:0}
.shop .home-navigation .home-main{width:clamp(86px,25vw,118px);height:clamp(86px,25vw,118px);min-height:86px;border-radius:50%;font-size:17px;gap:4px;letter-spacing:0}
.shop-home-actions .home-main img{width:44px;height:44px;margin:0}
@media(max-width:350px){.shop-home-actions{gap:5px}.shop .home-navigation .home-main{font-size:15px}}
/* V6 shopkeeper: flow layout keeps the four game entrances reachable. */
.shop .brand{margin-bottom:8px}
.shopkeeper{position:relative;flex:1;min-height:250px;text-align:center}
.shopkeeper-stage{height:calc(100vh - 340px);min-height:220px;max-height:520px}
.shopkeeper-stage canvas{display:block;height:100%;width:auto;max-width:100%;object-fit:contain;margin:auto}
.shopkeeper-toggle{position:absolute;right:0;bottom:22px;min-height:44px}
.shopkeeper-status{font-size:12px;min-height:18px;color:#fff8ec;text-shadow:0 1px 3px #493628;margin:2px 70px}
.shopkeeper-controls{position:relative;text-align:left;margin-top:8px;padding:12px}
.shopkeeper-controls[hidden]{display:none}
.shopkeeper-controls label{display:flex;align-items:center;justify-content:space-between;font-size:14px;margin:6px 0}
.shopkeeper-controls select{width:74%;min-width:0;min-height:44px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);padding:6px;font:inherit}
.shopkeeper-controls select:focus,.shopkeeper-toggle:focus{outline:2px solid #94673f;outline-offset:2px}
@media(max-height:600px){.shopkeeper-stage{height:250px}.shopkeeper{flex:none}.shop .home-navigation{padding-top:4px}}
/* All scene layers share one canvas and one cover transform. UI never resizes it. */
.page.shop{position:relative;isolation:isolate;background:#b88c5d;min-height:100%}
.shop .shop-inner{position:static;flex:1;min-height:calc(100% - 65px)}
.shop .shopkeeper{position:static;min-height:0;flex:1}
.shop .shopkeeper-stage{position:absolute;left:0;top:0;width:100%;height:100%;min-height:0;max-height:none;z-index:-1;pointer-events:none}
.shop .shopkeeper-stage canvas{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;object-fit:cover;margin:0}
.shop>header,.shop .brand,.shop .home-navigation{position:relative;z-index:2}
.shop .shopkeeper-toggle{right:18px;bottom:180px;z-index:4}
.shop .shopkeeper-status{position:absolute;left:18px;right:85px;bottom:174px;margin:0;z-index:3;pointer-events:none}
.shop .shopkeeper-controls{position:absolute;top:130px;right:18px;width:calc(100% - 36px);max-width:360px;max-height:calc(100% - 320px);overflow-y:auto;-webkit-overflow-scrolling:touch;margin:0;z-index:5;box-sizing:border-box}
@media(max-height:600px){.page.shop{min-height:560px}.shop .shopkeeper-controls{top:105px;max-height:240px}.shop .shopkeeper-toggle{bottom:154px}.shop .shopkeeper-status{bottom:150px}}
/* 独立换装室：全身立绘与右侧衣橱，均为真实交互层。 */
.page.dressing-room{position:relative;isolation:isolate;min-height:600px;height:100%;padding:0;overflow:hidden;background:#e8d6bc url('./scene/dressing-room.webp') center/cover no-repeat}
.dressing-title{position:absolute;top:calc(28px + var(--safe-area-inset-top,env(safe-area-inset-top,0px)));left:22px;margin:0;z-index:2;font-size:24px;text-shadow:0 1px 4px #fff}
.dressing-keeper{position:absolute;inset:0}
.dressing-room .shopkeeper-stage{position:absolute;left:-8%;top:13%;width:95%;height:76%;max-height:none;min-height:0;pointer-events:none}
.dressing-room .shopkeeper-stage canvas{display:block;width:100%;height:100%;max-width:none;object-fit:contain;margin:0}
.dressing-tabs{position:absolute;top:13%;right:12px;display:flex;flex-direction:column;gap:5px;width:62px;z-index:2}
.dressing-tabs button{min-height:44px;border:1px solid #ae906a;border-radius:22px;background:#fff8ecee;color:#604332;font:inherit;font-size:13px;box-shadow:0 2px 5px #60433222}
.dressing-tabs button[aria-pressed=true]{background:#f6c477;border-color:#725232;font-weight:700}
.dressing-list{position:absolute;right:10px;top:calc(13% + 254px);bottom:100px;width:82px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:3px}
.dressing-card{display:block;width:100%;min-height:72px;padding:3px;margin:0 0 7px;border:2px solid transparent;border-radius:10px;background:#fff8ecee;color:#604332;box-sizing:border-box;font:inherit}
.dressing-card img{display:block;width:100%;height:67px;object-fit:contain}
.dressing-card .dressing-price{font-size:11px;color:#886950;padding-top:0}
.wardrobe-checkout{width:100%;max-height:90vh;display:flex;flex-direction:column;overflow:hidden}
.wardrobe-checkout>header,.wardrobe-checkout>p,.wardrobe-checkout>.btn{flex-shrink:0}
.wardrobe-checkout>p{margin:6px 0;font-size:13px}
.checkout-list{min-height:80px;max-height:40vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.checkout-item{display:flex;align-items:center;gap:10px;min-height:66px;padding:5px 0;border-bottom:1px solid #e8d6bd;cursor:pointer}
.checkout-item input{width:22px;height:22px;flex-shrink:0;accent-color:#94673f}
.checkout-item img{width:52px;height:58px;object-fit:contain;flex-shrink:0}
.checkout-info{min-width:0}.checkout-info strong{display:block;font-size:14px}.checkout-info small{display:block;font-size:12px;color:#886950;margin-top:3px}
.checkout-feedback{color:#9b4535}.checkout-total{font-weight:700}.wardrobe-checkout>.btn{margin-top:7px}
.checkout-feedback:empty,.checkout-list:empty{display:none}
.checkout-amount.insufficient{color:#b43c2f}
.dressing-coins{position:absolute;top:calc(24px + var(--safe-area-inset-top,env(safe-area-inset-top,0px)));right:18px;z-index:3;pointer-events:none}
.dressing-card span{display:block;font-size:12px;line-height:1.3;padding:3px 0}
.dressing-card[aria-pressed=true]{border-color:#9c6927;background:#fff1c7;box-shadow:0 0 0 1px #fff6da}
.dressing-room button:focus-visible{outline:3px solid #64492e;outline-offset:2px}
.dressing-room button:active{transform:translateY(1px)}
.dressing-footer{position:absolute;bottom:calc(20px + var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)));left:18px;right:18px;display:flex;gap:10px;justify-content:space-between}
.dressing-footer .btn{min-width:66px;min-height:48px;padding:8px 14px}.dressing-footer .primary{margin-left:auto;min-width:82px}
.dressing-room .shopkeeper-status{position:absolute;left:18px;right:104px;bottom:78px;margin:0;text-align:center;color:#604332;font-size:12px;background:#fff8ecbf;border-radius:12px;pointer-events:none}
.dressing-room [hidden]{display:none!important}
@media(min-height:740px){.dressing-list{top:calc(13% + 254px)}}
/* 分类横排，让右侧单品列表保留足够的连续浏览空间。 */
.dressing-tabs{top:calc(76px + var(--safe-area-inset-top,env(safe-area-inset-top,0px)));left:18px;right:18px;width:auto;flex-direction:row;gap:5px}.dressing-tabs button{flex:1;min-width:44px;padding:4px}
.dressing-list{top:calc(135px + var(--safe-area-inset-top,env(safe-area-inset-top,0px)));bottom:106px;width:84px}
.dressing-room .shopkeeper-stage{top:20%;height:68%;left:-10%}
.page.dressing-room{min-height:0;overflow-y:auto}.dressing-keeper{position:relative;width:100%;height:100%;min-height:600px}
.dressing-room .shopkeeper-toggle{position:absolute;left:24px;top:150px;right:auto;bottom:auto;z-index:4}
/* 换装图标化：保留滑动浏览，隐藏轨道；单品预览放大。 */
.page.dressing-room,.dressing-list{scrollbar-width:none;-ms-overflow-style:none}
.page.dressing-room::-webkit-scrollbar,.dressing-list::-webkit-scrollbar{display:none;width:0;height:0}
.dressing-list{width:108px;right:8px;padding:4px}
.dressing-card{min-height:112px;padding:4px;margin-bottom:9px;border-radius:14px}
.dressing-card img{height:100px;width:100%;margin:0}
.dressing-tabs button{display:flex;justify-content:center;align-items:center;min-height:50px}
.dressing-tabs img{width:34px;height:34px}
.dressing-footer .btn{width:56px;min-width:56px;height:56px;border-radius:50%;padding:10px}
.dressing-footer .btn img{width:32px;height:32px;margin:0}
.dressing-footer .primary{width:64px;min-width:64px;height:64px}
.dressing-footer .primary img{width:36px;height:36px}
.dressing-room .shopkeeper-toggle img{width:30px;height:30px;margin:0}
.dressing-room .shopkeeper-status{right:122px}
/* 图标配短标签，服饰卡保留完整名称。 */
.dressing-tabs button{flex-direction:column;min-height:56px;padding:4px 2px;gap:2px}
.dressing-tabs img{width:28px;height:28px}
.dressing-tabs span{font-size:12px;line-height:16px}
.dressing-list{top:calc(142px + var(--safe-area-inset-top,env(safe-area-inset-top,0px)))}
.dressing-card span{display:block;font-size:12px;line-height:1.35;padding:3px 0;white-space:normal;overflow-wrap:break-word}
.dressing-footer .btn{flex-direction:column;gap:2px;padding:5px}
.dressing-footer .btn img{width:26px;height:26px}
.dressing-footer .primary img{width:30px;height:30px}
.dressing-footer .btn span{font-size:12px;line-height:16px}
/* 日常试穿不显示底部空提示条；仅在加载或异常时显示反馈。 */
.dressing-room .shopkeeper-status:empty{display:none}