/* Approved A: cream, mint, vivid granular toys. See ART-DIRECTION-A.md. */
:root{--a-cream:#fff8e7;--a-mint:#e2f0e5;--a-ink:#432a21;--a-teal:#13b7ad;--a-coral:#ff6259;--a-shadow:#ad92754a;--a-belt:#425f75}
body{color:var(--a-ink);background:radial-gradient(ellipse at 50% 0,#fffaf0,#eee6d5);font-family:'Arial Rounded MT Bold','Microsoft YaHei','PingFang SC',sans-serif}
#app{background:radial-gradient(ellipse at 50% 6%,#f2f9ea 0,#dfeee3 62%,#e3eedc 100%)}
button{font-weight:700}button:focus-visible{outline:3px solid #efae22;outline-offset:3px}
.topbar{background:transparent;padding:calc(var(--safe-top) + 12px) 18px 9px}.brand{font-weight:900;color:var(--a-ink);font-size:22px}.brand small{font-size:8px;letter-spacing:2px;color:#8b6a51}.brand img{filter:drop-shadow(0 2px 1px #ac805d44)}
.coin-pill{background:#fff9e9;border:1px solid #fffdf3;box-shadow:0 2px 2px #92836734,inset 0 1px #fff;font-size:15px;color:#432a21;padding:5px 10px;min-height:34px;gap:5px}.coin-pill .toy-icon{width:26px;height:26px}
.icon-button{background:linear-gradient(#fffbee,#f2e4ca);box-shadow:inset 0 1px #fff,0 2px #b2a18a44;color:#83624c;min-width:40px;min-height:40px}
.primary-button{min-height:55px;border-radius:22px;background:linear-gradient(#32d7c7,#0aa69f);border:1px solid #089a94;box-shadow:inset 0 2px 0 #a3f5e4,0 4px 0 #087c79,0 6px 8px #60755529;color:#fffef3;font-size:18px;font-weight:900;text-shadow:0 2px #08695b55}
.primary-button.coral{background:linear-gradient(#ff9482,#ff5653);border-color:#f66b5b;box-shadow:inset 0 2px #ffd1ac,0 4px #d8443b,0 6px 8px #8767442b}.primary-button.gold{background:linear-gradient(#ffe784,#ffbb35);border-color:#f1ac2e;color:#6c4315;text-shadow:0 1px #fff4;box-shadow:inset 0 2px #fff1b6,0 4px #d18a25}
.secondary-button{background:linear-gradient(#fffef3,#f7ead0);border:1px solid #e1cfac;box-shadow:inset 0 2px white,0 3px #cbb89055;border-radius:17px;color:#73543f;min-height:44px;font-size:14px}
.bottom-nav{background:linear-gradient(#fff9e9,#fbefd8);border-top:2px solid #fffef7;box-shadow:0 -2px 4px #9e876a1a;border-radius:26px 26px 0 0;padding:7px 10px calc(var(--safe-bottom) + 7px);height:calc(76px + var(--safe-bottom));gap:9px;grid-template-columns:repeat(3,1fr);flex-shrink:0;display:grid}
.nav-button{border-radius:19px;color:#926c50;font-size:12px;font-weight:800;min-height:54px;padding:4px;gap:3px}.nav-button .icon{width:25px;height:25px;stroke-width:2.1;filter:drop-shadow(0 1px #fff)}.nav-button.active{color:#fffef1;background:linear-gradient(#ff8c79,#ff5e56);border:1px solid #ff9b84;box-shadow:inset 0 2px #ffd0ad,0 2px #d85041;text-shadow:0 1px #c0392b55}.nav-button.active:before{display:none}.nav-button.active .icon{filter:drop-shadow(0 1px #c13e3155)}
.eyebrow{color:#a78863}.page-heading{padding:17px 20px 16px;text-align:center}.page-heading>.eyebrow{display:none}.page-heading>.row{justify-content:center;flex-wrap:wrap;gap:9px}.section-title{font-size:27px;color:var(--a-ink);font-weight:900;letter-spacing:1px;text-shadow:0 2px #fff}.page-heading .pill{font-size:10px;background:#fff8e6;color:#88684d}.subtext{color:#82674f;font-size:12px}.mini-banner{background:linear-gradient(#fffbed,#f9efd8);border-color:#fffef5;box-shadow:0 3px #b2ad8a30;border-radius:18px;color:#73563e}.mini-banner strong{font-size:12px}.mini-banner small{color:#977554;font-size:10px}
.map-hero{background:transparent;min-height:216px;padding-top:23px}.map-hero>.eyebrow{display:none}.map-hero h1{color:#513122;font-size:29px;line-height:1.35;text-shadow:0 2px #fff4}.map-hero .subtext{color:#8a6345}.hero-tile{padding:0;background:none!important;border:0;box-shadow:none}.hero-tile:after{display:none}.hero-tile img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(2px 4px 2px #72512c33)}.hero-dots{background:radial-gradient(#ffd32a 1.5px,transparent 2px) 0 0/9px 11px}.hero-art>.bucket{filter:drop-shadow(2px 5px 3px #8f663544)}
.progress-strip{background:linear-gradient(#fffaf0,#fff2da);border:1px solid #fffdf4;box-shadow:0 3px #bbaa7e38;border-radius:19px;color:#94714d}.progress-strip strong{color:#60442e}.progress-strip .icon{color:#ddae39}.chapter-title h2{font-size:24px;color:#59402c}.chapter-title p{color:#8b7155}.chapter-title .eyebrow{color:#6d9c85}.level-node{border:3px solid #fff7dc;background:linear-gradient(#fff3ce,#ead9b0);box-shadow:0 5px #b6a183,0 7px 6px #786b4b20;color:#86633e;font-weight:900}.level-node.current{background:linear-gradient(#ff9680,#ff5c53);border-color:#fff5d6;color:white;box-shadow:0 5px #cf4c3c,0 9px 8px #ad715137}.level-node.passed{background:linear-gradient(#53dbc1,#12b6a5);border-color:#e4ffe9;color:#fff;box-shadow:0 5px #278d7f}.current-label{background:#ffedbc;color:#8d5e26;box-shadow:0 2px #c6a57166}.map-path path{stroke:#c0d3b4;stroke-width:9}.map-decor{color:#93b890}.map-cta{background:linear-gradient(transparent,#e5efdd 25%);padding-bottom:12px}
.game-top{padding:calc(var(--safe-top) + 12px) 15px 10px;gap:7px}.game-top .level-pill{padding:7px 12px;border-radius:17px;background:linear-gradient(#91aaa0,#6e8981);border:1px solid #647f76;color:#fff;box-shadow:inset 0 1px #c6ddd1,0 2px #f7ffe4;font-size:14px;white-space:nowrap}.game-top .clock-pill{font-size:15px;color:#63462f;gap:3px}.game-top .coin-pill{min-height:33px;padding:3px 8px}.pause-button{background:linear-gradient(#ff8b82,#ff524f);border:2px solid #fff4de;box-shadow:inset 0 1px #ffbbb1,0 3px #d65645;color:white;border-radius:13px}
.play-layout{background:transparent;padding:0 14px}.game-hud{margin:0 0 8px;padding:10px 12px;background:linear-gradient(#fffdf3,#fcf3e1);border:1px solid #fffef9;box-shadow:0 3px 4px #7b876730;border-radius:17px;min-height:51px}.game-hud strong{font-size:14px;color:#40332a}.game-hud strong span{color:#382a22;margin-left:5px;font-size:16px}.grain-rule{font-size:8px;color:#8c7859;margin-top:2px}.target-swatches{gap:3px}.target-chip .color-dot{width:22px;height:25px;border:0;border-radius:0;background:none;box-shadow:none;padding:0}.target-chip .target-tile{width:100%;height:100%;object-fit:contain}.target-chip.complete{opacity:.5}.target-chip.complete:after{color:#129b77;font-weight:900;background:#fffbe7}
.board-wrap{background:transparent;box-shadow:none;border:0;padding:2px;border-radius:12px;max-width:406px}.board{gap:2px}.tile{border:0;background:none;box-shadow:none;border-radius:11px;transition:transform .12s;overflow:visible;transform-origin:50% 70%}.tile:after{display:none}.tile-art{width:110%;height:110%;max-width:none;object-fit:contain;pointer-events:none;position:absolute;left:-5%;top:-5%;filter:drop-shadow(0 2px 1px #4c563f22)}.tile.selected{outline:2px solid #fffce0;box-shadow:0 0 0 4px #f4ca58aa;transform:translateY(-2px) scale(1.03)}.tile.hinted{outline:2px solid #fff4aa;animation:aHint 1.3s ease-in-out infinite}.tile.matched{animation:aCrumble 330ms ease-in both}.fall-caption{font-size:10px;color:#8d9c7b;letter-spacing:1px;opacity:.85;bottom:6px}.conveyor{height:117px;margin:0 -8px;overflow:hidden}.bucket-track{height:88px}.bucket-slot{height:87px;width:70px}.bucket{filter:drop-shadow(1px 3px 2px #38504730)}.bucket-body{left:11%;right:11%;top:13%;bottom:13%;background:#ffffff12;border:0;border-radius:4px 4px 10px 10px;clip-path:polygon(0 0,100% 0,94% 100%,6% 100%);box-shadow:none;overflow:hidden}.bucket-sand{min-height:0;background:radial-gradient(circle at 25% 30%,var(--pigment-dark) .65px,transparent 1.05px) 0 0/3px 3px,radial-gradient(circle at 65% 65%,#ffffffb0 .5px,transparent 1px) 0 0/4px 4px,linear-gradient(90deg,var(--pigment),var(--pigment));border-radius:50% 50% 8px 8px/7px 7px 8px 8px;box-shadow:inset 2px 0 #fff4,inset -3px -2px #442b171c;transition:height .1s linear}.bucket-shell{position:absolute;width:100%;height:100%;inset:0;object-fit:fill;pointer-events:none;z-index:2}.bucket-mark{top:48%;width:25%;height:22%;display:grid;place-items:center;z-index:3;color:var(--pigment-dark);filter:none;background:var(--pigment);border-radius:50%;box-shadow:inset 0 1px #fff6;border:1px solid #f7efdb}.bucket-mark>.icon{width:83%;height:83%;fill:var(--pigment);stroke-width:2.5}.bucket-count{left:12%;right:12%;bottom:4%;font-size:9px;background:#fffbeaee;color:#493126;padding:1px;border-radius:0 0 5px 5px;z-index:4}.bucket-cap{position:absolute;top:8%;left:7%;width:86%;height:11%;border-radius:50%;background:linear-gradient(#ffe5b5,#e4ba79);border:1px solid #fff2d3;box-shadow:0 2px #b88a52;opacity:0;z-index:5;transform:translateY(-20px)}.is-full .bucket-cap{animation:aCap 320ms 100ms ease-out both}.bucket-slot.completed{opacity:1;animation:aBucketFull 600ms ease-out both}.bucket-slot.selected{outline:2px dashed #ffd85f;filter:drop-shadow(0 0 4px #fff2a3)}
.belt{height:27px;bottom:4px;background:repeating-linear-gradient(105deg,#3c5c73 0 11px,#526f83 11px 14px);border:3px solid #bbcfce;border-radius:17px;box-shadow:0 3px 0 #263f53,inset 0 2px #a9bdc7,inset 0 -2px #263c50}.belt:before,.belt:after{top:3px;width:13px;height:13px;background:#fff1d5;box-shadow:inset 0 0 0 3px #677785,0 0 0 1px #283e50}.belt-arrows{font-size:20px;color:#bfd2da;line-height:18px;letter-spacing:15px;text-shadow:1px 1px #1d3848}.slow-active .belt{border-color:#5ce6d8;box-shadow:0 3px #188b81,inset 0 2px #b5f8ed}.slow-active .fall-caption{color:#118f86}
.buffer{padding:8px 5px 6px;font-size:9px;color:#80745d;gap:6px}.buffer .progress-track{height:10px;background:#ede2c9;border:1px solid #b7aa89;box-shadow:inset 0 2px 2px #75644c40}.buffer .progress-fill{background:repeating-linear-gradient(90deg,#ff514e 0 9px,#ff9c27 9px 18px,#ffda26 18px 27px,#48d637 27px 36px,#2a85ee 36px 45px);border-top:1px solid #fff6}.buffer.danger .progress-fill{animation:aDanger .7s infinite alternate}
.game-tools{gap:7px;padding:7px 0 10px}.tool-button{height:77px;background:linear-gradient(#fffdf2,#fff2d8);border:1px solid #fffef6;box-shadow:0 3px #b9b69755,inset 0 2px #fff;border-radius:18px;color:#4a3427;font-size:12px;gap:0;overflow:visible}.tool-button .toy-icon{width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 2px 1px #82512422)}.tool-count{width:21px;height:21px;right:1px;top:-4px;font-size:11px;border:1px solid #fff4da;background:linear-gradient(#ff9183,#ff5554);box-shadow:0 1px #b8665055}.tool-button.active{background:#fff3bc;outline:2px solid #ebbb38}.tool-button.used .toy-icon{animation:aTool .4s ease-out}.game-hud+.playfield{margin-top:1px}
.inventory-grid{gap:9px;padding:0 13px}.jar-card{padding:8px 4px 11px;background:linear-gradient(#fffdf0,#fbf4df);border:1px solid #fffef6;border-radius:17px;box-shadow:0 3px #aeb19744;overflow:hidden}.jar-art{width:100%;height:112px;object-fit:contain;display:block;margin:0 auto 2px;filter:drop-shadow(0 2px 1px #6d583c1a)}.jar-card strong{font-size:19px;letter-spacing:0;color:#432d21}.jar-card span.label{font-size:10px;color:#896345}.inventory-total{color:#8a6b4e;border-color:#c6c6a5}.inventory-footer{padding:0 14px 22px}.jar-card.empty .jar-art{opacity:.58;filter:saturate(.7)}
.gallery-grid{gap:10px;padding:0 14px 22px}.art-card{background:linear-gradient(#fffbec,#fff0d5);border:1px solid #fffce9;box-shadow:0 3px #b0a18644;border-radius:19px}.art-thumbnail{border:6px solid #edc792;box-shadow:inset 0 0 0 2px #bc8e57,0 2px #fff9db;background:#fff6e1;border-radius:10px}.art-card h3{font-size:15px;color:#4d3325}.art-card .brand-name{font-size:10px;color:#9b7553}.art-cost small{font-size:10px;color:#886644}.art-tag{color:#795b39;background:#fff8ddf5;font-size:9px}.art-tag.ready{color:#058f7e;background:#e2ffdf}.art-tag.done{background:#ffe99b;color:#9a620f}.art-card.locked .art-thumbnail{filter:saturate(.65);opacity:.75}.gallery-filters{padding:0 14px 15px}.filter{background:#fff4db;color:#886244;border:1px solid #ead9b8}.filter.active{background:linear-gradient(#48d6bf,#16b5a6);border-color:#12a698;color:#fff}
.paint-screen{padding:0 15px 20px}.paint-toolbar{justify-content:center;position:relative;min-height:42px}.paint-toolbar>.icon-button{position:absolute;left:0}.paint-toolbar>div{text-align:center}.paint-toolbar h2{font-size:26px;font-weight:900;color:#4d2e20}.paint-toolbar small{font-size:10px;color:#956a4b}.canvas-frame{height:min(43dvh,390px);min-height:220px;border:12px solid #efcf9b;border-radius:20px;background:#fff5de;box-shadow:inset 0 0 0 3px #b88854,0 3px #bf925e,0 5px 7px #8a6d3b2b;margin:12px auto 15px}.canvas-frame:after{content:'';position:absolute;inset:-8px;border:2px solid #fff0c9;border-radius:12px;pointer-events:none}.canvas-frame .sand-art{padding:5px;filter:drop-shadow(0 3px 1px #81502038)}.paint-progress{background:#fff8e6;border:1px solid #fffdf1;box-shadow:0 2px #b4aa8733;border-radius:13px;padding:11px 10px;color:#61492e;font-size:12px;gap:8px}.paint-progress .progress-track{background:#e7d4b0;box-shadow:inset 0 1px 2px #ab805544;height:12px}.paint-progress .progress-fill{background:linear-gradient(#3cd7c4,#0ba7a2);box-shadow:inset 0 1px #a5f4dd}.paint-palette{gap:9px;background:#fff9e9;border:1px solid #fffef4;border-radius:17px;padding:10px 7px;box-shadow:0 2px #b7ad8838}.paint-color{background:none;border:0;min-width:55px;min-height:60px;padding:3px;gap:5px}.paint-color.selected{border:0;padding:3px;background:none;transform:none}.paint-color .color-dot{width:37px;height:37px;border:2px solid #fff8df;box-shadow:0 0 0 1px #bc967144,inset 0 2px #fff6,0 2px #8d6d3233}.paint-color.selected .color-dot{outline:3px solid #21b6a1;outline-offset:2px}.paint-color small{font-size:10px;color:#7d6041}.painting-hint{color:#946f4d}.painting-reveal{background:#fff5de;animation:aSandReveal .85s ease-out both}.paint-grain{width:2px;height:2px;box-shadow:3px 5px currentColor,-2px 10px currentColor,4px 14px currentColor;border-radius:50%;color:inherit}
.shop-illustration{background:none!important;box-shadow:none}.shop-illustration .toy-icon{width:74px;height:74px;filter:drop-shadow(0 3px 2px #8a5e3922)}.shop-card{background:linear-gradient(#fffbed,#fff0d5);border:1px solid #fffef1;color:#5c3e28;box-shadow:0 3px #b9a78455}.shop-card p{color:#95704f;font-size:11px}.shop-card .buy{background:linear-gradient(#ffde80,#ffc34b);color:#885617;border:1px solid #eeb343;box-shadow:inset 0 1px #fff3bd,0 2px #c5913c44}.owned-count{color:#a88460}
.modal{background:linear-gradient(#fffbed,#fff2db);border:3px solid #fff6de;box-shadow:0 6px 0 #ad8c6066,0 15px 50px #48654b40}.modal h2{color:#543324;text-shadow:0 2px #fff;font-weight:900}.modal p{color:#8b6548;line-height:1.8}.modal-symbol{background:linear-gradient(#fff6d2,#ffe5a5);color:#c89523;box-shadow:inset 0 2px #fff,0 3px #d6bb7b55}.modal-symbol .toy-icon{width:48px;height:48px}.reward-row{background:#f6e7c5;color:#6c4b29}.reward-sand{font-size:12px}.detail-stat{background:#f4e8cb;color:#95714a}.detail-stat strong{color:#604329}.modal-targets>div{background:#fff9e8;color:#654b30;border-color:#ddc69c}.tutorial-demo .demo-tile{background:none;box-shadow:none;border:0;width:62px;height:62px}.demo-tile img{width:100%;height:100%;object-fit:contain}.tutorial-demo{height:90px}.tutorial-demo .bucket{height:85px;width:72px}.modal .eyebrow{color:#b08446}.settings-info{color:#97704e}.combo-pop{font-size:26px;color:#ffd131;-webkit-text-stroke:1px #a46a1f;text-shadow:0 2px #fff3cd,0 4px #99772c55}
.bucket-reward{position:absolute;z-index:12;pointer-events:none;color:#70532c;background:#fff7daf0;border:1px solid #e2c486;border-radius:12px;font-size:12px;font-weight:900;padding:5px 9px;white-space:nowrap;animation:aStored .65s ease-out both;transform:translateX(-50%)}.hammer-strike{position:absolute;z-index:14;width:70px;height:70px;pointer-events:none;transform-origin:80% 80%;animation:aHammer .3s ease-in both}.coin-flight{position:fixed;width:27px;height:27px;z-index:160;pointer-events:none;filter:drop-shadow(0 2px 1px #b47e3433)}.coin-arrive{animation:aCoinPulse .4s ease-out}.buffer-grain{display:block}.magnet-active .bucket-rim{box-shadow:0 0 7px #a1f4d8}
@keyframes aCrumble{0%{transform:scale(1);opacity:1}27%{transform:scale(.88,.83);opacity:1}43%{transform:scale(1.05,.95);opacity:.85}100%{transform:scale(.72,1.05) translateY(8px);opacity:0}}
@keyframes aHint{50%{transform:translateY(-2px) scale(1.035);filter:brightness(1.1)}}@keyframes aBucketFull{20%{transform:translateX(-50%) scale(1.09,.91)}55%{transform:translateX(-50%) translateY(-9px) scale(.97,1.04)}100%{transform:translateX(-50%) translateY(0) scale(1)}}
@keyframes aCap{0%{opacity:0;transform:translateY(-20px)}70%{opacity:1;transform:translateY(2px)}100%{opacity:1;transform:translateY(0)}}@keyframes aStored{0%{opacity:0;translate:0 0}20%{opacity:1}100%{opacity:0;translate:0 -42px}}
@keyframes aHammer{0%{rotate:-38deg;opacity:0}25%{opacity:1}55%{rotate:20deg;translate:-6px 9px}100%{rotate:0deg;opacity:0;translate:0 -8px}}@keyframes aTool{35%{transform:rotate(-12deg) scale(1.08)}70%{transform:rotate(7deg)}100%{transform:none}}@keyframes aDanger{to{filter:brightness(1.3)}}@keyframes aSandReveal{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}@keyframes aCoinPulse{50%{transform:scale(1.12)}}
@media(max-height:710px){.topbar{padding-top:calc(var(--safe-top) + 8px);padding-bottom:6px}.game-top{padding-top:calc(var(--safe-top) + 8px);padding-bottom:7px}.game-hud{min-height:44px;padding:7px 9px;margin-bottom:6px}.game-hud strong{font-size:12px}.game-hud strong span{font-size:14px}.grain-rule{font-size:7px}.game-tools{padding:6px 0 8px}.tool-button{height:65px;font-size:11px}.tool-button .toy-icon{width:41px;height:41px}.bottom-nav{height:calc(65px + var(--safe-bottom));padding-top:5px;padding-bottom:calc(var(--safe-bottom) + 5px);border-radius:21px 21px 0 0}.nav-button{min-height:49px;font-size:11px;border-radius:16px}.nav-button .icon{width:22px;height:22px}.conveyor{height:98px}.bucket-track{height:73px}.bucket-slot{width:61px;height:72px}.bucket-count{font-size:8px}.belt{height:24px}.belt-arrows{line-height:14px}.belt:before,.belt:after{top:1px}.canvas-frame{height:34dvh;min-height:185px}.paint-toolbar h2{font-size:23px}.jar-art{height:97px}.jar-card strong{font-size:17px}.page-heading{padding:10px 15px 12px}.section-title{font-size:25px}.buffer{padding-top:6px;padding-bottom:4px}}
@media(max-width:350px){.game-top{padding-left:11px;padding-right:11px;gap:5px}.game-top .level-pill{font-size:12px;padding:7px 9px}.game-top .coin-pill{font-size:12px;padding:3px 6px}.game-top .clock-pill{font-size:13px}.game-top .coin-pill .toy-icon{width:22px;height:22px}.game-top .icon-button{min-width:36px;min-height:36px}.play-layout{padding:0 10px}.game-hud{margin-left:0;margin-right:0}.target-chip .color-dot{width:17px;height:21px}.target-swatches{gap:2px}.grain-rule{font-size:7px}.tool-button{font-size:10px}.inventory-grid{padding:0 10px;gap:7px}.jar-art{height:93px}.canvas-frame{border-width:10px}.map-hero h1{font-size:26px}.shop-card p{font-size:10px}}
@media(min-width:700px){#app{border-color:#fff7e5;background:radial-gradient(ellipse at 50% 6%,#f2f9ea,#dfeee3 62%,#e3eedc);box-shadow:0 6px 0 #d9c6a6,0 20px 80px #9b775e33}.topbar{padding-top:17px}.game-top{padding-top:15px}body:before{content:'奶油\A玩具工坊';font-family:inherit;color:#65412b2b;font-weight:900;font-size:36px;letter-spacing:3px}.bottom-nav{height:76px;padding-bottom:7px}}
@media(prefers-reduced-motion:reduce){.tile.hinted,.coin-arrive,.bucket-slot.completed,.is-full .bucket-cap,.bucket-reward,.hammer-strike,.tool-button.used .toy-icon{animation:none}.is-full .bucket-cap{opacity:1;transform:none}}

.game-paused .belt-arrows,.game-paused .tile,.game-paused .bucket-slot,.game-paused .bucket-cap,.game-paused .bucket-reward,.game-paused .hammer-strike{animation-play-state:paused!important}.magnet-active .bucket-shell{animation:aMagnet .45s 2 alternate}@keyframes aMagnet{to{filter:drop-shadow(0 0 4px #4de3c2);transform:scale(1.02)}}

.warehouse-create{display:flex;align-items:center;justify-content:center;flex-direction:column;background:linear-gradient(#fff9df,#ffe9b4);gap:5px}.mini-art-bucket{width:73px;height:85px;rotate:-5deg}.mini-art-bucket .bucket-sand{background:linear-gradient(125deg,#ff4b4b 0 20%,#ffc02b 20% 40%,#55d432 40% 60%,#2783f9 60% 80%,#a76d40 80%)}.mini-art-bucket .bucket-count,.mini-art-bucket .bucket-cap{display:none}.warehouse-create strong{font-size:16px}.art-card{content-visibility:auto;contain-intrinsic-size:auto 245px}

.map-cta .primary-button{background:linear-gradient(#ff9482,#ff5653);border-color:#f66b5b;box-shadow:inset 0 2px #ffd1ac,0 4px #d8443b,0 6px 8px #8767442b;color:#fffef3}
.source-link{color:#07958b;text-decoration:underline;text-underline-offset:2px}.source-pending{opacity:.8}.art-tag.source-missing{background:#eee6d5;color:#927b60}.original-art{pointer-events:none}.canvas-frame .original-art{padding:10px}.source-pending text{font-family:inherit}
@media(max-height:620px){.game-top{padding-top:calc(var(--safe-top) + 5px);padding-bottom:5px}.game-hud{min-height:37px;padding:5px 8px;margin-bottom:4px}.game-hud strong{font-size:11px}.game-tools{padding:4px 0 7px;gap:5px}.tool-button{height:58px;font-size:10px}.tool-button .toy-icon{width:35px;height:35px}.conveyor{height:86px}.bucket-track{height:64px}.bucket-slot{height:63px;width:55px}.belt{height:22px;bottom:3px}.bucket-count{font-size:7.5px}.bottom-nav{height:calc(58px + var(--safe-bottom));padding-top:4px;padding-bottom:calc(4px + var(--safe-bottom))}.nav-button{min-height:46px;font-size:10px}.nav-button .icon{width:20px;height:20px}.buffer{padding:4px 4px;font-size:8px}}

/* A button family: softly domed surface, ivory highlight and a short solid base. */
:root{--button-top:#35d5c7;--button-bottom:#08a59e;--button-edge:#068e89;--button-base:#087a76;--button-light:#b5f6df;--button-radius:999px}
.primary-button,.shop-card .buy{--bt:var(--button-top);--bb:var(--button-bottom);--be:var(--button-edge);--bs:var(--button-base);--bh:var(--button-light);background:linear-gradient(180deg,var(--bt),var(--bb));border:1px solid var(--be);border-radius:var(--button-radius);box-shadow:inset 0 2px 1px var(--bh),inset 0 -2px 3px #ffffff19,0 4px 0 var(--bs),0 7px 8px #62744c26;color:#fffdf1;text-shadow:0 2px #086b644d;transition:transform 100ms ease,box-shadow 100ms ease,filter 120ms ease;position:relative;min-height:54px;isolation:isolate}
.primary-button:before,.shop-card .buy:before{content:'';position:absolute;inset:3px 7px 48%;border-radius:999px;background:linear-gradient(#ffffff2b,#ffffff00);pointer-events:none;z-index:-1}
.primary-button.coral,.map-cta .primary-button{--bt:#ff9781;--bb:#ff5c53;--be:#e96250;--bs:#ce4c40;--bh:#ffdcc0;background:linear-gradient(var(--bt),var(--bb));border-color:var(--be);box-shadow:inset 0 2px 1px var(--bh),0 4px var(--bs),0 7px 8px #98764726}
.primary-button.gold,.shop-card .buy{--bt:#ffe78b;--bb:#ffbd39;--be:#dfaa35;--bs:#c28b28;--bh:#fff6bf;color:#684316;text-shadow:0 1px #fffa;box-shadow:inset 0 2px var(--bh),0 4px var(--bs),0 7px 8px #98764726}
.secondary-button{background:linear-gradient(#fffef2,#f6e6c7);border:1px solid #d9c29b;border-radius:var(--button-radius);color:#755338;box-shadow:inset 0 2px #fff,0 3px #c4ab81,0 5px 6px #9b8b6720;transition:transform 100ms,box-shadow 100ms}
.primary-button:active:not(:disabled),.shop-card .buy:active:not(:disabled){transform:translateY(3px);box-shadow:inset 0 2px 2px #ffffff60,0 1px var(--bs)}
.secondary-button:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 2px #fff,0 1px #c4ab81}
.primary-button:disabled,.secondary-button:disabled{opacity:1;background:linear-gradient(#e4e5d7,#cdd3c1);border-color:#b3bca7;color:#8f9b85;box-shadow:inset 0 2px #f3f3e9,0 3px #a6b39a;text-shadow:none}
.icon-button,.modal .close{border:1px solid #e5d2ad;box-shadow:inset 0 2px #fffef5,0 3px #c9b693;background:linear-gradient(#fffcec,#f4e3c2);color:#8c684a;transition:transform 100ms,box-shadow 100ms}.pause-button{background:linear-gradient(#ff9586,#ff5a55);border-color:#ffddc0;color:white;box-shadow:inset 0 2px #ffd1b8,0 3px #d44f46}.modal .close{display:grid;place-items:center;min-width:36px;min-height:36px}
.tool-button{box-shadow:inset 0 2px white,0 3px #bca986,0 5px 5px #74836b1c;border-color:#fffbe9}.tool-button:active:not(:disabled){box-shadow:inset 0 2px #fff,0 1px #bca986;transform:translateY(2px)}.text-button{color:#138e80;font-weight:700}.toggle.on{background:linear-gradient(#42d9bd,#13b5a7)}.shop-card .buy{min-height:42px;font-size:13px}.nav-button{justify-self:center;width:100%}.nav-button.active{box-shadow:inset 0 2px #ffd8b7,0 3px #d15043}
@media(hover:hover){.primary-button:hover:not(:disabled),.secondary-button:hover:not(:disabled),.shop-card .buy:hover:not(:disabled){filter:brightness(1.035)}}

/* Eight jars and the creation action share one 3 × 3 screen. */
.warehouse-screen{display:flex;flex-direction:column;overflow:hidden;padding:0 14px 12px;gap:12px}
.warehouse-heading{padding:10px 0 2px;flex-shrink:0}.warehouse-heading .section-title{font-size:28px;line-height:1.3}
.warehouse-screen .inventory-grid{flex:1;min-height:0;max-height:486px;padding:0;gap:10px;grid-template-rows:repeat(3,minmax(0,1fr))}
.warehouse-screen .jar-card{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:0;min-width:0;padding:8px 4px 7px;border-radius:18px;box-shadow:inset 0 2px white,0 3px #b9b49260}
.warehouse-screen .jar-art{flex:1;min-height:0;height:0;max-height:122px;width:100%;margin:0;object-fit:contain}
.warehouse-screen .jar-card.empty .jar-art{opacity:1;filter:drop-shadow(0 2px 1px #6d583c1a)}
.warehouse-screen .jar-card strong{font-size:22px;line-height:1.15;flex-shrink:0;max-width:100%;overflow-wrap:anywhere;margin-top:2px}
.warehouse-screen .warehouse-create{background:linear-gradient(#39d6c4,#0ca49a);border:1px solid #06978d;box-shadow:inset 0 2px #b9f8dc,0 3px #087c76,0 5px 7px #64806125;gap:3px;padding:8px 5px;transition:transform 100ms,box-shadow 100ms}
.warehouse-screen .warehouse-create strong{font-size:17px;color:#fffef1;text-shadow:0 2px #06776c66;display:flex;align-items:center;justify-content:center;gap:3px}
.warehouse-screen .warehouse-create .mini-art-bucket{width:70px;height:86px;max-height:calc(100% - 27px);min-height:0;flex:0 1 86px;filter:drop-shadow(0 3px 2px #086d6444)}
.warehouse-screen .warehouse-create:active{transform:translateY(2px);box-shadow:inset 0 2px #b9f8dc,0 1px #087c76}
@media(max-height:710px){.warehouse-screen{gap:8px;padding-bottom:10px}.warehouse-heading{padding-top:5px}.warehouse-heading .section-title{font-size:25px}.warehouse-screen .inventory-grid{gap:8px}.warehouse-screen .jar-card{padding:6px 3px}.warehouse-screen .jar-card strong{font-size:19px}.warehouse-screen .warehouse-create strong{font-size:15px}.warehouse-screen .warehouse-create .mini-art-bucket{width:59px;height:72px;flex-basis:72px}}
@media(max-width:350px){.topbar{padding-left:12px;padding-right:12px;gap:6px}.brand{font-size:18px;letter-spacing:0;gap:6px;white-space:nowrap}.brand img{width:32px;height:32px}.brand small{font-size:7px;letter-spacing:1.5px}.top-actions{gap:6px}.topbar .coin-pill{padding:5px 8px}.warehouse-screen{padding-left:11px;padding-right:11px}.warehouse-screen .inventory-grid{gap:7px}.warehouse-screen .jar-card{border-radius:15px}.warehouse-screen .warehouse-create strong{font-size:14px}}