:root{font-family:'Noto Sans SC','Microsoft Yahei',sans-serif;color:#605344;background:#eae8dc;font-synthesis:none;--cream:#fcf8ee;--mint:#e7f1e8;--teal:#549e8c;--ink:#605344;--muted:#9d917e;--coral:#ed9680;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;min-height:100%;overscroll-behavior:none}body{background:radial-gradient(ellipse at 20% 10%,#f8f3e7 0,transparent 50%),radial-gradient(ellipse at 85% 95%,#dce9df 0,transparent 50%),#eae8dc}button,input{font:inherit}button{cursor:pointer;border:0;color:inherit;background:none;touch-action:manipulation}button:disabled{cursor:default;opacity:.45}button:focus-visible,a:focus-visible{outline:3px solid #519e8d;outline-offset:3px}button:active:not(:disabled){transform:translateY(2px)}svg{vertical-align:middle;flex-shrink:0}h1,h2,h3,p{margin:0}p{line-height:1.7}button .icon{pointer-events:none}#app{width:100%;max-width:460px;margin:auto;height:100vh;height:100dvh;background:var(--cream);display:flex;flex-direction:column;position:relative;overflow:hidden;box-shadow:0 0 80px #84795b1c}.topbar{padding:calc(var(--safe-top) + 16px) 22px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fcf8eef2;z-index:5;flex-shrink:0}.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:1px}.brand img{width:38px;height:38px;filter:drop-shadow(0 2px 1px #ad84551c)}.brand small{font-size:8px;color:#a49681;letter-spacing:2px;display:block;margin-top:2px}.top-actions{display:flex;align-items:center;gap:9px}.coin-pill{border:1px solid #ede0bf;border-radius:30px;background:#fffaf0;display:flex;align-items:center;gap:5px;padding:6px 10px;font-size:13px;font-weight:800;min-height:33px}.coin-pill .icon{color:#d0a443;fill:#f9de7c88}.icon-button{width:36px;height:36px;border-radius:50%;background:#f0eadf;color:#9c8c76;display:grid;place-items:center}.screen{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:none}.screen::-webkit-scrollbar{display:none}.bottom-nav{height:calc(73px + var(--safe-bottom));padding:8px 14px calc(8px + var(--safe-bottom));display:flex;justify-content:space-around;align-items:center;background:#fffaf1;box-shadow:0 -2px 18px #a8987920;border-top:1px solid #eadfcf;z-index:5;flex-shrink:0}.nav-button{flex:1;display:flex;align-items:center;flex-direction:column;gap:4px;padding:7px 5px;border-radius:16px;position:relative;color:#a0937f;font-size:10px;font-weight:600;max-width:84px}.nav-button .icon{width:23px;height:23px}.nav-button.active{background:#e6efe6;color:#4c907c}.nav-button.active:before{content:'';position:absolute;top:2px;width:14px;height:3px;border-radius:2px;background:#78ac97}.eyebrow{font-size:9px;letter-spacing:2.8px;font-weight:700;color:#9d917d}.section-title{font-size:24px;line-height:1.4;letter-spacing:.5px;font-weight:800}.subtext{font-size:12px;color:var(--muted);line-height:1.7}.pill{font-size:10px;font-weight:600;padding:4px 9px;border-radius:20px;background:#fff7e8;color:#a08761}.primary-button{width:100%;min-height:48px;border-radius:17px;background:linear-gradient(#74b5a2,#569e89);color:#fffdf5;box-shadow:0 4px 0 #3f8272,0 7px 14px #5c8d7522;font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;letter-spacing:.6px}.primary-button.coral{background:linear-gradient(#f3ad94,#e9977e);box-shadow:0 4px 0 #c87964,0 7px 15px #c7836b22}.primary-button.gold{background:linear-gradient(#f4d278,#e8bd59);box-shadow:0 4px 0 #c69c42;color:#79633c}.secondary-button{min-height:44px;background:#f1ebde;border:1px solid #e7dece;border-radius:14px;font-size:13px;font-weight:600;padding:10px 17px;display:flex;align-items:center;justify-content:center;gap:6px}.text-button{font-size:12px;color:#659d89;padding:10px 6px;display:inline-flex;gap:4px;align-items:center}.row{display:flex;align-items:center;justify-content:space-between;gap:10px}.color-dot{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--pigment);border:1px solid var(--pigment-dark);box-shadow:inset 0 2px 2px #ffffff5c;color:var(--pigment-dark)}.color-dot .icon{width:12px;height:12px;stroke-width:2}.stars{color:#d6b257;display:flex;gap:3px}.stars .empty{color:#dfd5bc}.stars .filled{fill:#edcb67}.map-hero{padding:19px 25px 0;background:linear-gradient(135deg,#e5eee3,#f5f2df);position:relative;overflow:hidden;min-height:188px;border-bottom:1px solid #e0e6d5}.map-hero .eyebrow{color:#789b88;font-size:9px}.map-hero h1{font-size:28px;letter-spacing:2px;line-height:1.5;margin:5px 0 7px;font-weight:800;color:#526e5b}.map-hero .subtext{font-size:11px;max-width:195px;color:#89997e}.hero-art{position:absolute;right:6px;bottom:-20px;width:175px;height:182px;transform:rotate(8deg)}.hero-art .bucket{position:absolute;width:105px;height:112px;bottom:25px;left:42px;transform:rotate(-8deg)}.hero-tile{position:absolute;width:42px;height:44px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,var(--light),var(--pigment));border:1px solid var(--dark);box-shadow:inset 2px 2px 3px #fff9,0 4px 0 var(--dark),4px 7px 10px #8c79442a;color:var(--dark)}.hero-tile.one{left:16px;top:5px;transform:rotate(-19deg)}.hero-tile.two{left:78px;top:0;transform:rotate(12deg)}.hero-tile.three{right:2px;top:48px;transform:rotate(23deg)}.hero-dots{position:absolute;left:47px;top:55px;width:78px;height:45px;background-image:radial-gradient(#deae4d 1.5px,transparent 2px),radial-gradient(#eb8c72 1px,transparent 2px);background-size:13px 11px,8px 9px;transform:rotate(-8deg);opacity:.75}.progress-strip{margin:0 22px;transform:translateY(-1px);background:#fffcf5;border:1px solid #e8e1d1;border-radius:0 0 17px 17px;padding:12px 15px;display:flex;justify-content:space-around;position:relative;z-index:1;box-shadow:0 4px 10px #a69a7510}.progress-strip>div{display:flex;align-items:center;gap:7px;font-size:10px;color:#9b917e}.progress-strip strong{display:block;color:#73644d;font-size:16px;line-height:1.25}.progress-strip .icon{color:#9fb593}.map-content{position:relative;padding:25px 18px 20px;background:radial-gradient(ellipse at 0 20%,#e8eee055,transparent 50%),#faf7ed}.chapter-title{text-align:center;margin:8px 0 16px}.chapter-title .eyebrow{font-size:8px;color:#b4a78d}.chapter-title h2{font-size:19px;letter-spacing:2px;margin:7px 0 2px;font-weight:800}.chapter-title p{font-size:10px;color:#aa9d86}.chapter-map{height:580px;position:relative;max-width:360px;margin:auto}.map-path{position:absolute;width:100%;height:100%;inset:0;overflow:visible}.map-path path{fill:none;stroke:#e1d6bd;stroke-width:16;stroke-linecap:round;stroke-dasharray:2 24}.level-node{position:absolute;width:61px;height:61px;margin-left:-30px;margin-top:-30px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(#eee6d5,#e7ddc7);border:4px solid #f9f4e8;box-shadow:0 5px 0 #d1c2a5,0 8px 14px #9d8b6122;color:#b6a78b;font-weight:800;font-size:19px;z-index:2}.level-node.locked .icon{width:19px;height:19px;opacity:.65}.level-node.passed{background:linear-gradient(#a8cdb2,#8bbba0);color:white;box-shadow:0 5px 0 #709d82,0 7px 12px #88a17d33}.level-node.current{background:linear-gradient(#f1b79d,#e99780);box-shadow:0 5px 0 #c67f67,0 9px 15px #bd8c6633;color:#fff;width:70px;height:70px;margin:-35px 0 0 -35px;border-color:#fff9e9;animation:breathe 2.7s infinite}.level-node .node-stars{position:absolute;bottom:-15px;display:flex;gap:0;color:#e0ba58;filter:drop-shadow(0 1px 0 white)}.level-node .node-stars svg{width:12px;height:12px;fill:#e0ba58}.current-label{position:absolute;top:-26px;border-radius:12px;padding:4px 9px;background:#fff8ea;color:#b7845d;border:1px solid #e9d7b9;white-space:nowrap;font-size:9px;box-shadow:0 2px 6px #b79d6b1a}.map-decor{position:absolute;opacity:.6;pointer-events:none;color:var(--chapter);filter:drop-shadow(2px 4px 0 #b5b99a15)}.map-decor.d1{left:7%;top:190px;transform:rotate(-15deg)}.map-decor.d2{right:8%;top:390px;transform:rotate(10deg)}.map-decor svg{width:48px;height:48px;stroke-width:1.2}.map-chapter.locked-chapter{opacity:.7}.map-cta{position:sticky;bottom:12px;margin:0 25px 18px;z-index:4}.map-cta .primary-button{background:linear-gradient(#f0ac91,#e6957d);box-shadow:0 4px 0 #c47e67,0 8px 24px #c0967040;min-height:52px}.map-cta small{font-size:10px;font-weight:500;opacity:.85}.page-heading{padding:20px 23px 18px}.page-heading .eyebrow{margin-bottom:5px}.mini-banner{margin:0 22px 18px;padding:15px;border:1px solid #dbe6d9;background:linear-gradient(115deg,#eaf2e8,#f6f5e8);border-radius:18px;display:flex;align-items:center;gap:12px;font-size:12px;line-height:1.7}.mini-banner .icon{color:#80a58a}.mini-banner strong{font-size:12px;display:block}.mini-banner small{font-size:10px;color:#8e9b80}.inventory-grid{padding:0 20px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.jar-card{border-radius:18px;background:linear-gradient(#fffdf7,#f7f0e3);border:1px solid #e8dfcd;text-align:center;padding:14px 8px 11px;box-shadow:0 3px 0 #e9dfcd}.jar-card .jar{height:91px;width:61px;margin:0 auto 10px;position:relative}.jar-cap{position:absolute;top:0;left:6px;width:49px;height:12px;background:linear-gradient(#d9b693,#c49c77);border-radius:5px;box-shadow:inset 0 2px 1px #f3dbb9,0 2px 1px #9e765040;z-index:2}.jar-glass{position:absolute;top:11px;bottom:2px;left:0;right:0;border:2px solid #c8ccc6;border-radius:13px 13px 15px 15px;background:#fff8;overflow:hidden;box-shadow:inset 4px 0 3px #fff9,3px 4px 4px #9c946320}.jar-sand{position:absolute;bottom:0;left:2px;right:2px;height:var(--fill);min-height:6px;background:radial-gradient(var(--pigment-dark) .65px,transparent 1px) 0 0/4px 4px,var(--pigment);border-radius:50% 50% 6px 6px / 6px 6px 6px 6px;box-shadow:inset 0 3px 4px #fff5}.jar-shine{position:absolute;top:22px;left:7px;width:7px;bottom:15px;border-radius:12px;background:#ffffff5c}.jar-card .color-dot{position:absolute;left:19px;bottom:9px;z-index:2;width:23px;height:23px}.jar-card strong{display:block;font-size:18px;color:#6c5944;letter-spacing:.5px}.jar-card span.label{font-size:10px;color:#a38f76}.inventory-total{margin:24px 22px 18px;border-top:1px dashed #dfd4bf;padding-top:15px;display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#a7977f}.inventory-footer{padding:0 22px 27px}.gallery-filters{display:flex;gap:7px;padding:0 22px 18px}.filter{padding:8px 13px;border-radius:15px;font-size:11px;background:#f0eadf;color:#9c8d77}.filter.active{color:#4f8c78;background:#e2eddf;font-weight:700}.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:13px;padding:0 20px 25px}.art-card{border:1px solid #e6ddcd;background:#fffaf2;border-radius:19px;padding:8px;position:relative;text-align:left;box-shadow:0 3px 0 #e9e0d0;overflow:hidden}.art-thumbnail{height:156px;background:radial-gradient(ellipse at 50% 35%,#fffdf8,#f1e9d9);border:5px solid #e5d5b8;border-radius:12px;box-shadow:inset 0 0 8px #af8d4e1e;display:flex;justify-content:center;align-items:center;position:relative}.sand-art{height:100%;width:100%;max-width:100%;filter:drop-shadow(0 3px 1px #a5906e18)}.art-card-info{padding:9px 4px 4px}.art-card h3{font-size:13px;font-weight:800;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.art-card .brand-name{font-size:9px;color:#ac9c83;margin-top:2px}.art-card .art-cost{display:flex;gap:3px;margin:8px 0 5px;align-items:center;justify-content:space-between}.art-card .art-cost>span{display:flex;gap:3px}.art-card .art-cost .color-dot{width:16px;height:16px}.art-card .art-cost .icon{width:9px;height:9px}.art-card small{font-size:9px;color:#9a8c78}.art-tag{position:absolute;left:14px;top:14px;z-index:1;font-size:8px;background:#fcf8edeb;padding:4px 7px;border-radius:8px;box-shadow:0 1px 4px #76684b1a;color:#918368}.art-tag.ready{background:#e7f0df;color:#6f9472}.art-tag.done{background:#f8e6ae;color:#a0833a}.art-card.locked .art-thumbnail{filter:saturate(.45);opacity:.7}.empty-state{padding:40px 26px;text-align:center;color:#9d8d74;font-size:13px}.empty-state .icon{margin-bottom:15px;color:#b4bea2}.paint-screen{padding:0 21px 22px}.paint-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:13px}.paint-toolbar h2{font-size:20px;font-weight:800}.paint-toolbar small{font-size:10px;color:#a39178}.canvas-frame{background:radial-gradient(ellipse at 50% 30%,#fffdf6,#f1e7d6);border:12px solid #dfc9a6;border-radius:19px;box-shadow:inset 0 0 0 2px #bfa17b,0 4px 0 #b99c78,0 10px 22px #8e7b5317;position:relative;height:min(37vh,330px);min-height:215px;margin:12px auto 19px;touch-action:none;overflow:hidden}.canvas-frame .sand-art{padding:8px;cursor:crosshair}.canvas-frame.filling{animation:paintSpark .65s ease-out}.painting-hint{font-size:11px;color:#a5967d;text-align:center;margin:8px 0 15px}.paint-progress{display:flex;gap:10px;align-items:center;font-size:10px;color:#a48f70;margin:10px 0 14px}.progress-track{height:7px;background:#e7e0ce;border-radius:8px;overflow:hidden;flex:1}.progress-fill{height:100%;background:#8bbda5;border-radius:8px;transition:width .5s}.paint-palette{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:10px 0 15px}.paint-color{padding:8px 8px 6px;border-radius:15px;border:1px solid #e5dccb;background:#fffbf1;min-width:58px;min-height:75px;display:flex;align-items:center;flex-direction:column;gap:5px}.paint-color .color-dot{width:31px;height:31px}.paint-color .color-dot svg{width:16px;height:16px}.paint-color.selected{border:2px solid #7ba48e;padding:7px 7px 5px;background:#edf3e7;transform:translateY(-3px)}.paint-color small{font-size:9px;color:#97876e}.paint-color.done{opacity:.65}.paint-color.insufficient small{color:#ca8771}.paint-actions{display:grid;gap:11px;margin-top:17px}.sell-total{display:flex;justify-content:center;gap:8px;font-size:12px;margin-bottom:14px;color:#aa8c49}.shop-grid{padding:0 21px 24px;display:grid;grid-template-columns:1fr 1fr;gap:14px}.shop-card{background:#fffaf1;border:1px solid #e6decd;border-radius:20px;padding:18px 13px 13px;text-align:center;box-shadow:0 3px 0 #e6ddca}.shop-illustration{height:66px;width:66px;border-radius:21px;background:#e7efe3;display:grid;place-items:center;margin:0 auto 13px;color:#78a394;box-shadow:inset 0 2px 2px #fff}.shop-card:nth-child(2) .shop-illustration{background:#f6e3d9;color:#d38f7c}.shop-card:nth-child(3) .shop-illustration{background:#e1ebf1;color:#77a5ba}.shop-card:nth-child(4) .shop-illustration{background:#f6ecd0;color:#c2a45b}.shop-illustration .icon{height:35px;width:35px;stroke-width:1.7}.shop-card h3{font-size:14px}.shop-card p{font-size:10px;color:#a3947c;margin:8px 0 12px;min-height:51px}.shop-card .buy{display:flex;justify-content:center;align-items:center;gap:5px;border-radius:13px;background:#f3dfae;width:100%;min-height:38px;font-size:12px;font-weight:800;color:#9a7e3d}.owned-count{font-size:9px;color:#b6a68b;margin-top:9px}.shop-note{font-size:10px;color:#ad9c80;text-align:center;padding:0 22px 25px}.game-top{padding:calc(var(--safe-top) + 12px) 18px 8px;display:flex;align-items:center;justify-content:space-between;gap:8px}.level-pill{font-size:12px;border:1px solid #d7e0d0;padding:7px 12px;border-radius:13px;background:#edf3e5;color:#7b9270;font-weight:800}.game-top .clock-pill{display:flex;align-items:center;gap:5px;font-size:18px;font-variant-numeric:tabular-nums;font-weight:800;color:#7b6a51}.clock-pill .icon{color:#b2a484;width:17px}.clock-pill.danger{color:#d67460;animation:breathe .8s infinite}.game-hud{display:flex;align-items:center;justify-content:space-between;margin:0 20px 10px;padding:10px 12px;background:#fffaf1;border:1px solid #e4dfcc;border-radius:14px;min-height:48px}.game-hud strong{font-size:12px;color:#7c715a}.game-hud strong span{color:#91b195;margin-left:6px}.target-swatches{display:flex;gap:5px;align-items:center}.target-chip{position:relative}.target-chip.complete{opacity:.45}.target-chip.complete:after{content:'✓';position:absolute;right:-3px;bottom:-3px;background:#fff8ed;font-size:10px;border-radius:50%;color:#6b9b73}.play-layout{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(180deg,#edf3e8,#e3eddf 68%,#f5efe2);padding:0 14px}.playfield{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;padding-top:4px}.board-wrap{width:min(100%,calc((100dvh - var(--safe-top) - var(--safe-bottom) - 337px)*1.1667));min-width:168px;max-width:406px;margin:0 auto;position:relative;flex-shrink:0;aspect-ratio:7/6;padding:7px;border-radius:18px;background:linear-gradient(#d0ddc8,#dfe7d4);border:1px solid #bdcdb5;box-shadow:inset 0 2px 4px #7c99782a,0 3px 0 #c7d6be}.board{display:grid;width:100%;height:100%;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,1fr);gap:4px;touch-action:none}.tile{min-width:0;min-height:0;padding:0;border-radius:10px;position:relative;border:1px solid var(--dark);background:linear-gradient(145deg,var(--light),var(--pigment) 60%);box-shadow:inset 1px 2px 2px #ffffff7a,inset -1px -2px 1px #00000008,0 2px 0 var(--dark);display:grid;place-items:center;color:var(--dark);transition:transform .15s,opacity .2s;user-select:none}.tile:after{content:'';position:absolute;inset:3px;border-radius:7px;pointer-events:none;background:radial-gradient(var(--dark) .45px,transparent .7px) 0 0 /4px 4px;opacity:.12}.tile[data-color="black"]{color:#c8c0b5}.tile[data-color="white"]{color:#c1b39c}.tile .icon{width:57%;height:57%;stroke-width:1.7;filter:drop-shadow(0 1px 0 #fff4);z-index:1}.tile.selected{outline:3px solid #fffbea;outline-offset:1px;transform:scale(1.04);z-index:2;box-shadow:0 0 0 5px #82aa7c88}.tile.matched{animation:crumble .36s ease-in forwards;pointer-events:none}.tile.hinted{animation:tileHint 1.3s infinite;z-index:3;outline:2px solid #fff7ce}.tile.bump{animation:bump .25s}.fall-zone{flex:1;min-height:26px;position:relative;pointer-events:none}.fall-caption{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-size:9px;letter-spacing:2px;color:#a6b39c;opacity:.7}.sand-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6}.conveyor{height:104px;flex-shrink:0;position:relative;margin:0 -9px;z-index:2;overflow:hidden}.bucket-track{height:82px;position:relative;z-index:4}.bucket-slot{position:absolute;bottom:0;width:65px;height:79px;padding:0;transform:translateX(-50%);border-radius:10px;touch-action:manipulation;z-index:3}.bucket-slot:active:not(:disabled){transform:translateX(-50%)}.bucket-slot.selected{filter:drop-shadow(0 0 5px #f0c363);outline:2px dashed #f6d179;outline-offset:3px}.bucket-slot.completed{animation:bucketHappy .65s ease-in-out;opacity:.8}.bucket{height:100%;width:100%;position:relative;filter:drop-shadow(2px 4px 2px #71685022)}.bucket-body{position:absolute;left:5%;right:5%;top:14%;bottom:3%;background:linear-gradient(90deg,#ffffff99,#ffffff44 50%,#ddd6c525);border:2px solid #e3dac7;border-radius:6px 6px 16px 16px;clip-path:polygon(0 0,100% 0,90% 100%,10% 100%);overflow:hidden;box-shadow:inset 4px 0 4px #fff9}.bucket-sand{position:absolute;bottom:0;left:0;right:0;height:var(--fill);min-height:8%;background:radial-gradient(var(--pigment-dark) .8px,transparent 1.1px) 0 0/4px 4px,var(--pigment);border-radius:50% 50% 0 0 /8px 8px 0 0;box-shadow:inset 0 4px 3px #fff3;transition:height .15s}.bucket-rim{position:absolute;top:6%;left:0;right:0;height:19%;border-radius:50%;background:var(--pigment);border:3px solid #fff6e7;box-shadow:0 2px 1px var(--pigment-dark),inset 0 3px 5px #75674b2c}.bucket-rim:after{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(var(--pigment-dark) .7px,transparent 1px) 0 0/4px 4px;opacity:.4}.bucket-mark{position:absolute;left:50%;top:28%;transform:translateX(-50%);color:var(--pigment-dark);filter:drop-shadow(0 1px 0 #fff6);z-index:2}.bucket-count{position:absolute;bottom:2px;left:0;right:0;display:block;text-align:center;font-size:9px;font-weight:800;color:#75664e;background:#fff9e6dd;padding:2px 1px;z-index:3;font-variant-numeric:tabular-nums}.bucket-handle{position:absolute;left:2%;right:2%;top:20%;height:59%;border:2px solid #c9bd9f;border-top:0;border-radius:0 0 45% 45%;transform:rotate(-5deg)}.belt{position:absolute;bottom:4px;left:0;right:0;height:24px;border:3px solid #9ca693;border-radius:16px;background:repeating-linear-gradient(100deg,#b5bda8 0 8px,#bfc5b0 8px 15px);box-shadow:0 4px 0 #86937e,inset 0 2px 2px #e0e4d2;overflow:hidden}.belt:before,.belt:after{content:'';position:absolute;top:3px;width:10px;height:10px;border-radius:50%;background:#e3e4ce;box-shadow:inset 0 0 0 3px #88937d;z-index:1}.belt:before{left:4px}.belt:after{right:4px}.belt-arrows{color:#f1f2e4;white-space:nowrap;letter-spacing:20px;font-size:18px;font-weight:900;line-height:15px;animation:beltMove 1.5s linear infinite}.buffer{padding:8px 7px 6px;flex-shrink:0;display:flex;align-items:center;gap:8px;font-size:9px;color:#9a9f86}.buffer .progress-track{background:#d6dfc8;height:5px}.buffer .progress-fill{background:#b7c29e}.buffer.danger{color:#c38a6a}.buffer.danger .progress-fill{background:#dca287}.buffer-value{font-variant-numeric:tabular-nums}.game-tools{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;padding:12px 9px 12px;flex-shrink:0}.tool-button{background:#fff9eb;border:1px solid #e6dac4;border-radius:16px;box-shadow:0 3px 0 #daceb5;display:flex;flex-direction:column;align-items:center;justify-content:center;height:66px;position:relative;gap:4px;font-size:10px;font-weight:700;color:#9b8b70}.tool-button .icon{width:26px;height:26px;color:#90b7a4;filter:drop-shadow(1px 2px 0 #dfebdb)}.tool-button:nth-child(2) .icon{color:#d99587;filter:drop-shadow(1px 2px 0 #f4e2d3)}.tool-button:nth-child(3) .icon{color:#86abc0}.tool-button:nth-child(4) .icon{color:#c4aa6e}.tool-count{position:absolute;right:-3px;top:-5px;border-radius:50%;background:#eea48a;color:white;width:18px;height:18px;font-size:10px;border:2px solid #fff9eb;display:grid;place-items:center}.tool-button.active{background:#ecf3df;outline:2px solid #8fad7e}.game-bottom{height:calc(40px + var(--safe-bottom));padding:0 20px var(--safe-bottom);display:flex;justify-content:space-between;align-items:center;flex-shrink:0;background:#f6f0e2;font-size:10px;color:#a6957a}.game-bottom button{height:36px;display:flex;align-items:center;gap:4px;font-size:10px}.game-bottom .icon{width:15px;height:15px}.combo-pop{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);font-size:23px;font-weight:900;letter-spacing:1px;color:#efbb58;text-shadow:0 2px 0 white;white-space:nowrap;z-index:10;pointer-events:none;animation:comboPop .8s both}.modal-backdrop{position:fixed;inset:0;background:#4e514742;backdrop-filter:blur(5px);z-index:100;display:flex;align-items:center;justify-content:center;padding:calc(var(--safe-top) + 20px) 25px calc(var(--safe-bottom) + 20px)}.modal{max-width:360px;width:100%;max-height:100%;overflow:auto;border-radius:28px;background:#fffaf0;border:1px solid #fdf7ea;box-shadow:0 14px 65px #423f4c36;padding:26px 25px 24px;text-align:center;position:relative;animation:modalIn .22s ease-out}.modal .close{position:absolute;right:13px;top:13px;width:30px;height:30px;border-radius:50%;background:#f0eadd;color:#aa9a80}.modal .close svg{width:16px;height:16px}.modal-symbol{width:68px;height:68px;border-radius:24px;background:#e7efdf;color:#8dab86;display:grid;place-items:center;margin:0 auto 17px;box-shadow:inset 0 2px 0 #fff}.modal-symbol svg{width:36px;height:36px}.modal h2{font-size:24px;letter-spacing:.8px;font-weight:800;margin-bottom:6px}.modal p{font-size:12px;color:#a19075;margin:7px 0 17px}.modal .eyebrow{margin-bottom:7px;font-size:8px}.modal-actions{display:grid;gap:12px;margin-top:21px}.level-detail-row{display:flex;justify-content:center;gap:10px;margin:20px 0 10px}.detail-stat{padding:13px 18px;background:#f2eddf;border-radius:15px;font-size:10px;color:#aa997d;min-width:100px}.detail-stat strong{display:block;font-size:19px;color:#8d795a;margin-bottom:3px}.modal-targets{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}.modal-targets>div{font-size:10px;display:flex;align-items:center;gap:5px;border:1px solid #e6dcc7;border-radius:13px;padding:6px 8px}.modal-targets .color-dot{width:19px;height:19px}.tutorial-dots{display:flex;justify-content:center;gap:6px;margin:14px 0}.tutorial-dots span{width:6px;height:6px;border-radius:50%;background:#dfd7c3}.tutorial-dots span.on{width:19px;border-radius:5px;background:#8fb59f}.tutorial-demo{display:flex;align-items:center;justify-content:center;gap:8px;height:75px;margin:10px 0}.tutorial-demo .demo-tile{height:43px;width:43px;background:#eea78e;border:2px solid #ffe7cf;border-radius:12px;box-shadow:0 3px 0 #cd8c71;color:#aa6a59;display:grid;place-items:center}.tutorial-demo .demo-tile.white{background:#fff9ed;color:#c6b89b;box-shadow:0 3px 0 #d3c5a7}.tutorial-demo .bucket{width:58px;height:70px}.result-stars{justify-content:center;margin:13px 0}.result-stars .icon{width:35px;height:35px}.reward-row{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;background:#f4efdf;border-radius:16px;padding:14px;margin-top:15px;font-size:12px;font-weight:700}.reward-sand{display:flex;align-items:center;gap:4px;font-size:10px}.result-note{font-size:10px!important;margin-top:12px!important}.settings-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid #e8dfcc;font-size:13px}.toggle{width:43px;height:25px;border-radius:20px;background:#ddd3bd;position:relative;transition:background .2s}.toggle:after{content:'';position:absolute;left:3px;top:3px;width:19px;height:19px;background:#fffaf0;border-radius:50%;box-shadow:0 2px 2px #89775422}.toggle.on{background:#8ab69c}.toggle.on:after{left:21px}.settings-info{font-size:10px;line-height:1.8;text-align:left;margin-top:16px;color:#ab9d84}.confetti{position:fixed;z-index:110;top:-20px;pointer-events:none;width:8px;height:13px;border-radius:2px;animation:confettiFall 2.5s ease-in forwards}.toast{display:none}#toast{position:fixed;left:50%;bottom:calc(95px + var(--safe-bottom));transform:translate(-50%,12px);padding:11px 19px;border-radius:16px;max-width:340px;width:max-content;background:#5d6b58ef;color:#fffaf0;font-size:12px;line-height:1.6;z-index:200;opacity:0;pointer-events:none;transition:all .2s;box-shadow:0 5px 16px #4d61482b;text-align:center}#toast.show{opacity:1;transform:translate(-50%,0)}.footer-note{font-size:9px;line-height:1.8;text-align:center;color:#b2a68e;margin:18px 0}.small-label{font-size:10px;color:#ad9c80}.chapter-divider{height:1px;border-top:1px dashed #e4d9c5;width:70%;margin:20px auto 27px}
@keyframes breathe{0%,100%{filter:brightness(1)}50%{filter:brightness(1.08);box-shadow:0 5px 0 #c67f67,0 0 0 7px #efb89b25}}@keyframes tileHint{0%,100%{transform:scale(1)}50%{transform:scale(.88);filter:brightness(1.12)}}@keyframes crumble{0%{transform:scale(1.08);filter:brightness(1.2)}100%{transform:scale(.3);opacity:0}}@keyframes bump{0%,100%{transform:translateX(0)}33%{transform:translateX(-5px)}66%{transform:translateX(5px)}}@keyframes beltMove{to{transform:translateX(38px)}}@keyframes bucketHappy{50%{transform:translateX(-50%) translateY(-10px) scale(1.05)}}@keyframes comboPop{0%{opacity:0;transform:translate(-50%,-30%) scale(.8)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}100%{opacity:0;transform:translate(-50%,-100%) scale(1)}}@keyframes modalIn{from{opacity:0;transform:translateY(15px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes paintSpark{50%{filter:brightness(1.1);box-shadow:0 0 25px #efd899}}@keyframes confettiFall{to{transform:translateY(105vh) rotate(620deg)}}
@media(min-width:700px){body{display:flex;align-items:center;justify-content:center;height:100vh;height:100dvh}#app{height:min(900px,calc(100dvh - 34px));border:7px solid #fefbf4;border-radius:35px;box-shadow:0 20px 90px #807b5e30;max-width:444px}.topbar{padding-top:17px}.game-top{padding-top:15px}.board-wrap{width:min(100%,calc((100dvh - 390px)*1.1667))}.modal-backdrop{padding:30px}.bottom-nav{padding-bottom:9px;height:72px}.game-bottom{height:38px;padding-bottom:0}body:before{content:'SAND\A ATELIER';white-space:pre;position:fixed;left:max(24px,calc(50% - 510px));top:39%;font-family:Georgia,serif;font-size:41px;line-height:1.25;letter-spacing:5px;color:#b1b49b55;pointer-events:none}body:after{content:'收集色彩  ·  创作快乐';position:fixed;right:max(24px,calc(50% - 465px));top:48%;writing-mode:vertical-rl;font-size:11px;letter-spacing:8px;color:#a1ad9677;pointer-events:none}}
@media(max-height:710px){.topbar{padding-top:calc(var(--safe-top) + 10px);padding-bottom:10px}.game-top{padding-top:calc(var(--safe-top) + 8px);padding-bottom:6px}.game-hud{padding:7px 10px;min-height:38px;margin-bottom:6px}.game-tools{padding-top:8px;padding-bottom:8px;gap:9px}.tool-button{height:57px;border-radius:14px}.tool-button .icon{width:22px;height:22px}.game-bottom{height:calc(32px + var(--safe-bottom))}.conveyor{height:89px}.bucket-track{height:67px}.bucket-slot{width:58px;height:66px}.board-wrap{width:min(100%,calc((100dvh - var(--safe-top) - var(--safe-bottom) - 281px)*1.1667));padding:6px;border-radius:15px}.board{gap:3px}.tile{border-radius:8px}.buffer{padding-top:6px;padding-bottom:4px}.fall-caption{font-size:8px;letter-spacing:1px}.canvas-frame{height:33vh;min-height:180px}.paint-toolbar{margin:0}.paint-screen{padding-top:0}.paint-color{min-height:64px}.page-heading{padding-top:13px;padding-bottom:12px}.bottom-nav{height:calc(64px + var(--safe-bottom))}.nav-button{padding:4px}.nav-button .icon{width:21px;height:21px}.nav-button.active:before{top:-2px}}
@media(max-width:350px){.topbar{padding-left:15px;padding-right:15px}.brand{font-size:18px;gap:6px}.coin-pill{padding:6px 8px}.game-top{padding-left:13px;padding-right:13px}.game-hud{margin-left:13px;margin-right:13px}.target-swatches{gap:3px}.target-chip .color-dot{width:19px;height:19px}.play-layout{padding:0 10px}.game-tools{gap:8px;padding-left:7px;padding-right:7px}.tool-button{font-size:9px}.art-thumbnail{height:130px}.gallery-grid{gap:10px;padding-left:15px;padding-right:15px}.modal{padding:24px 19px}.inventory-grid{gap:9px;padding:0 15px}.map-hero{padding-left:20px}.hero-art{right:-17px;transform:scale(.9) rotate(8deg)}.map-hero h1{font-size:25px}.map-hero .subtext{max-width:170px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

.painting-reveal{position:absolute;inset:0;animation:sandReveal .8s ease-out both;background:radial-gradient(ellipse at 50% 30%,#fffdf6,#f1e7d6);pointer-events:none}.paint-grain{position:absolute;top:10%;width:3px;height:4px;border-radius:1px;animation:paintGrain .6s ease-in both;pointer-events:none;z-index:2}@keyframes sandReveal{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}@keyframes paintGrain{from{transform:translateY(-20px);opacity:0}20%{opacity:.8}to{transform:translateY(230px);opacity:0}}

/* Grain quantities stay explicit and readable on small screens. */
.grain-rule{display:block;font-size:8px;color:#8d9e81;margin-top:3px;white-space:nowrap}.game-hud{gap:6px}.bucket-count{letter-spacing:-.2px;white-space:nowrap}.buffer-value{white-space:nowrap}.jar-card strong{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.paint-color small{font-variant-numeric:tabular-nums}.inventory-total{flex-wrap:wrap;gap:6px}@media(max-width:350px){.grain-rule{font-size:7px}.game-hud{margin-left:5px;margin-right:5px}.target-swatches{gap:2px}.target-chip .color-dot{width:17px;height:17px}}