/* Hand-crafted world; puzzle rules and browser saves stay unchanged. */
:root{--bg:#d8b689;--ink:#39291c;--muted:#705640;--paper:#fff2d9;--accent:#3f5d70;--teal:#57766d;--line:#c4a077;background:#66503d;color:var(--ink);font-family:"STKaiti","Kaiti SC","KaiTi","Songti SC",serif}
body{background:#66503d;background-image:linear-gradient(#39291c55,#39291c55),url('assets/counter-scene.jpg');background-size:cover;background-attachment:fixed}
#app{position:relative;max-width:500px;padding:0;min-height:100svh;background:#dcb88e url('assets/counter-scene.jpg') center top/100% 100% no-repeat;box-shadow:0 0 70px #291b1d65;overflow:hidden}
button{font-family:inherit}button:focus-visible{outline:3px solid #164f74;outline-offset:3px}button:disabled{opacity:.5}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#app[data-screen="shop"] .top{display:none}
#app[data-screen="shop"]{background-position:center bottom;background-size:100% 1600px}
.shop-stage{position:relative;width:100%;aspect-ratio:941/1672;isolation:isolate}
.shop-scene{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.shop-shelf{position:absolute;inset:18% 0 auto;height:24%;display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0}
.shelf-item,.shelf-item:nth-child(2),.shelf-item:nth-child(3){border-radius:8px;transform:none;background:none;box-shadow:none;padding:0;position:relative}
.shelf-item small{position:absolute;top:100%;left:50%;transform:translateX(-50%);white-space:nowrap;padding:4px 6px;font-size:10px;color:#60462b;background:#fff1d3ed;box-shadow:1px 2px 4px #4d281d25;border-radius:1px;margin:0}
.shelf-item.is-ready small{background:#315669;color:#fff4dc}
.shelf-item.is-ready:after{content:'';position:absolute;inset:3% 10% 15%;border:1px solid #fff5da66;border-radius:42%;box-shadow:0 0 12px #fff2c950;pointer-events:none;animation:invitation 3s ease-in-out infinite}
.shelf-item.is-done small{color:#2e554a;background:#f3ecd0}
.shop-guide{position:absolute;left:24%;top:46.5%;margin:0;font-size:clamp(12px,3.3vw,16px);text-shadow:0 1px 2px #fff3d5;padding:5px 8px;background:#fff1d6d9;transform:rotate(-2deg);box-shadow:1px 2px 3px #56351e25}
.bag-hotspot{position:absolute;right:0;top:43%;width:24%;height:25%;padding:0}
.bag-hotspot span{position:absolute;top:78%;right:3%;background:#f9edcfdc;white-space:nowrap;padding:6px 8px;font-size:12px;transform:rotate(5deg);box-shadow:1px 2px 3px #57391b35}
.bag-hotspot b{font-size:10px;font-weight:400}
.counter-hotspot{position:absolute;left:9%;top:63%;width:66%;height:34%;padding:0}
.counter-hotspot span{position:absolute;bottom:0;left:8%;right:0;background:#f6e6c8ed;padding:10px 7px;box-shadow:1px 3px 5px #5e382b40;font-size:15px;transform:rotate(-1deg)}
.top{height:52px!important;padding:8px 16px 3px;align-items:flex-start;position:relative;z-index:1}
.brand{visibility:hidden}.icon-button{background:linear-gradient(110deg,#fff0c944,#ad682322),url('assets/counter-scene.jpg') center 55%/500px;border-radius:5px;border:1px solid #a9703770;box-shadow:inset 0 1px 1px #fff4da,0 3px 1px #996334,1px 5px 7px #633b2950;color:#422c15;font-size:24px}
#home{width:84px;display:flex;gap:7px;align-items:center;justify-content:center;transform:rotate(-4deg)}#home small{font-size:13px}#sound{width:40px;transform:rotate(4deg)}
#play{padding:0 13px 16px;transform-origin:50% 80%}
.level-heading{height:76px;padding:0 4px!important;gap:12px;align-items:center}
.level-ticket{position:relative;background:#f7e9cc;border:5px solid #365b76;border-left-width:7px;border-right-width:7px;padding:9px 12px;box-shadow:1px 4px 6px #64411c45;transform:rotate(-2deg);flex:1;text-align:center}
.level-ticket:before{content:'';position:absolute;width:9px;height:24px;border:2px solid #ad7f3e;border-radius:8px;top:-17px;left:48%;background:linear-gradient(90deg,#a37432,#e9c782,#b48948);box-shadow:1px 2px 3px #6e421e55}
.level-heading .eyebrow{font-family:Georgia,serif;font-size:11px;letter-spacing:1px;margin:0 0 5px;color:#3c5261}.level-heading h1{font-size:clamp(18px,5vw,25px);font-weight:500;color:#23455e;white-space:nowrap}
.preview-button{background:#f9edce;padding:4px 8px 5px;box-shadow:1px 3px 5px #68401e50;transform:rotate(6deg);color:#4e351f;font-size:12px}
.preview-button canvas{width:59px;height:59px;background:transparent;border-radius:0;margin:0}
.level-note{text-align:center;display:table;margin:3px auto 0;padding:3px 12px;background:#fff0d6e8;box-shadow:1px 2px 3px #6e442822;font-size:13px;transform:rotate(-1deg)}
.progress-line{height:12px;margin:3px 6px 1px;gap:8px}.progress-line>div{height:3px;background:#845b2f33}.progress-line i{background:#536c6d}.progress-line span{font:10px Georgia,serif;color:#412e1c}
.instruction{font-family:-apple-system,"PingFang SC",sans-serif;font-size:10px;min-height:14px;line-height:1.4;margin:2px 0 5px;color:#4c3421;text-shadow:0 1px 0 #f6dfbb}
.board-scroll{padding:11px;border:1px solid #bc884d;border-radius:8px;background:linear-gradient(125deg,#fff2cf77,#be7e3540),url('assets/counter-scene.jpg') center 65%/560px;box-shadow:inset 0 2px 2px #fff1d5,inset 0 -3px 2px #996332,0 5px 0 #9c6636,0 8px 10px #56301c65;overflow:auto;scrollbar-width:thin;scrollbar-color:#b48a5f #e5c498;touch-action:pan-x pan-y}
.board{gap:0;background:#e8c994;border:1px solid #98734f;box-shadow:inset 1px 2px 4px #69451e55;isolation:isolate}
.board.zoomed{width:640px}
.board-scroll:has(.zoomed){max-height: min(95vw,420px)}
.cell{aspect-ratio:1;background:color-mix(in srgb,var(--target) 42%,#f7e7c1);border-radius:0;box-shadow:inset -1px -1px 0 #79532e35;overflow:visible}
.cell:empty:after{inset:26%;border-radius:50%;background:var(--target);border:1px solid #4e39277a;box-shadow:inset 1px 2px 2px #5d3b2445,0 1px 0 #fff4d0}
.bead{inset:7% 9% 12%;border-radius:44%;background:radial-gradient(ellipse at 35% 12%,#ffffff50,transparent 51%),var(--bead);border:0;box-shadow:inset 1px 2px 1px #fff9,inset -2px -3px 2px #0005,0 2px 0 color-mix(in srgb,var(--bead) 65%,#3d2c20),1px 4px 3px #3e251b60;transition:transform .16s,box-shadow .16s}
.bead:before{inset:7% 13% 47%;border-radius:50%;transform:none;background:linear-gradient(#ffffff60,transparent)}
.bead,.buffer .bead{border-radius:50%}
.instruction{display:table;margin:3px auto 6px;padding:3px 7px;background:#fff0d6e0;font-size:11px}
.tools svg{width:29px;height:29px;fill:currentColor}
.bead:after{width:38%;height:38%;left:31%;top:26%;background:color-mix(in srgb,var(--bead) 24%,#17140d);border-radius:50%;box-shadow:inset 0 2px 2px #0009,0 1px 1px #fff9;outline:1px solid #ffffff35}
.cell.selected{z-index:3;background:var(--target)}
.cell.selected .bead{transform:translateY(-5px) scale(1.06);outline:1px solid #fff4c6;box-shadow:inset 1px 2px 1px #fffa,inset -2px -3px 2px #0005,0 3px 0 color-mix(in srgb,var(--bead) 65%,#3d2c20),2px 8px 4px #3e251b80}
.cell.destination{outline:2px solid #2c6359;outline-offset:-2px;animation:breath 1.8s ease-in-out infinite}
.selection-bar{min-height:27px;margin:3px 0 0;font-size:11px;color:#4a3321;font-family:-apple-system,"PingFang SC",sans-serif}.selection-bar button{background:#f7ebd1;border-radius:2px;min-height:28px;box-shadow:1px 2px 2px #59331c35}
.tray-label{background:linear-gradient(#efc894aa,#cb935477),url('assets/counter-scene.jpg') center 65%/450px;margin:3px 0 0;padding:2px 10px;font-size:16px;border:1px solid #bd894c;border-bottom:0;border-radius:6px 6px 0 0;box-shadow:inset 0 1px 1px #fff4de}
.tray-label small{color:#66472d;font:10px Georgia,serif}.tray-label button{color:#493222;min-height:30px;font-size:12px}
.buffer{gap:7px 4px;padding:9px 10px 12px;border:1px solid #bd894c;border-top:0;border-radius:0 0 7px 7px;background:linear-gradient(#f7d39d77,#d7a26466),url('assets/counter-scene.jpg') center 60%/480px;box-shadow:inset 0 -3px 2px #ac753a,0 4px 0 #9e6636,0 7px 8px #59321f50}
.buffer .cell{border-radius:50%;background:#c7955e;box-shadow:inset 1px 3px 4px #67401e99,inset -1px -1px 1px #efc98d,0 1px 1px #ffedcc}
.buffer .cell:empty:after{display:none}.buffer .bead{inset:5% 6% 10%;border-radius:44%}
.tools{gap:10px;margin:12px 5px 0;padding:4px 5px 8px;background:repeating-linear-gradient(0deg,#d5c4a744 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,#d5c4a744 0 1px,#f5ebd5aa 1px 3px);box-shadow:0 2px 3px #6b4c2d20}
.tools button{font-size:12px;min-height:62px;border:1px solid #ae784275;border-radius:5px;background:linear-gradient(120deg,#fff2d566,#c9914d22),url('assets/counter-scene.jpg') center 50%/400px;box-shadow:inset 0 1px 2px #fff1ce,0 3px 1px #986336,1px 5px 5px #65402155;padding:6px 0}
.tools b{background:none;box-shadow:none;border-radius:0;font-size:29px;font-weight:700;width:auto;height:31px;color:#452d1d;margin:0 auto 2px}
.footnote{font-size:10px;color:#513922;margin:8px 0 0}
#rewards{padding:35px 20px;background:#f3e0bdc9;min-height:calc(100svh - 70px)}
.shop-title{padding:15px 5px}.shop-title h1{font-size:28px}.reward-item{background:#fff2d9;box-shadow:1px 3px 5px #68422540;border-radius:2px;border:1px solid #dfc69f;transform:rotate(-1deg)}.reward-item:nth-child(even){transform:rotate(1deg)}
.primary{background:#35576a;border-radius:3px;box-shadow:0 3px 0 #243e50;min-height:48px;color:#fff5df;font-weight:400}.secondary{border:1px solid #bca17e;border-radius:2px;background:#ecdbbb66}.text-button span{background:#e5d0ac;color:#5d472e}
dialog{background-color:#fff0d4;background-image:repeating-linear-gradient(0deg,#cdb89009 0 1px,transparent 1px 3px);border-radius:3px;border:1px solid #cfb792;box-shadow:3px 9px 0 #e8d2ac,0 24px 70px #2b1b0c80;padding:28px 24px 22px}dialog::backdrop{background:#3928198c;backdrop-filter:blur(3px)}
.close{color:#6c5134}.modal-title{font-weight:500}.reward-copy,.letter{font-family:"Songti SC","STSong",serif}.photo{border:6px solid #fff9e9;border-radius:1px;box-shadow:1px 3px 5px #7b573c30}.wish{border-radius:1px;border-color:#c9ad83;background:#fff8e9;font-family:inherit}.coupon{border-color:#bea078}.save-image{border-radius:1px}#toast{background:#f9edcfee;color:#422e1e;border:1px solid #b1946d;border-radius:3px;box-shadow:1px 4px 12px #38241245;font-family:-apple-system,"PingFang SC",sans-serif}
@keyframes invitation{50%{box-shadow:0 0 18px #fff2c985;border-color:#fff5daaa}}
@media(min-width:700px){#app{min-height:100vh}.shop-stage{max-width:500px}#play{padding-left:18px;padding-right:18px}}
@media(max-width:360px){#play{padding-left:8px;padding-right:8px}.top{padding-left:12px;padding-right:12px}.level-heading{gap:8px}.level-ticket{padding:8px 5px}.level-heading h1{font-size:18px}.preview-button canvas{width:48px;height:48px}.board-scroll{padding:8px}.tools{gap:7px}.shop-guide{font-size:11px}.shelf-item small{font-size:9px}}
@media(max-height:740px) and (max-width:500px){.top{height:44px!important;padding-top:4px}.icon-button{height:34px}.level-heading{height:60px}.level-ticket{padding-top:5px;padding-bottom:5px}.preview-button canvas{width:42px;height:42px}.level-note{margin-top:0;padding-top:1px;padding-bottom:1px}.selection-bar{min-height:23px}.tools{margin-top:8px;padding-bottom:5px}.tools button{min-height:48px;padding:3px 0;font-size:11px}.tools b{height:25px;font-size:24px}.tools svg{width:24px;height:24px}.buffer{padding-top:6px;padding-bottom:8px;row-gap:5px}.footnote{margin-top:6px;font-size:9px}}
/* Painted pattern on a wooden pegboard: target colours must stay readable. */
.board .cell{background:var(--target);box-shadow:inset -1px -1px 0 #30261c28}
.board .cell:before{content:'';position:absolute;inset:0;border-style:solid;border-width:var(--region-edges,0);border-color:var(--region-line);pointer-events:none;z-index:1}
.board .bead{inset:17% 18% 22%;box-shadow:inset 1px 2px 1px #fff9,inset -1px -2px 1px #0005,0 2px 0 color-mix(in srgb,var(--bead) 65%,#3d2c20),1px 3px 2px #281b164d}
.board .cell:empty:after{inset:21%;border-radius:24%;background:color-mix(in srgb,var(--target) 86%,#fff);border:1px solid #2d261f55;box-shadow:inset 1px 2px 2px #1a171a4d,0 1px 0 #fff6}
.board .cell.destination{outline:0;animation:none}
.board .cell.destination:after{outline:2px solid #fff;outline-offset:0;box-shadow:0 0 0 3px #243a45,inset 1px 2px 2px #1a171a4d}
.board.peek .bead{visibility:hidden}.board.peek .cell:empty:after{display:none}
#peek-board{flex-shrink:0;border:1px solid #9b794e;background:#fff0d5;color:#352718;min-height:32px;padding:4px 9px;font-size:12px}
#peek-board[aria-pressed="true"]{background:#35576a;color:#fff9ed}
.selection-bar{gap:6px}.selection-bar>span{flex:1;text-align:center;font-size:10px}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}