/* A reference: cream toy surfaces, rounded Chinese type and four persistent tabs. */
@font-face{font-family:SandRounded;src:url('./assets/fonts/sand-rounded.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
:root{--a-type:SandRounded,'PingFang SC','Microsoft YaHei',sans-serif}
body,button,input,select{font-family:var(--a-type);font-weight:700;font-synthesis:none}
#app:not([data-view="map"]){background:#e2f0e5 url('./assets/ui-v5/workshop.webp') center center/cover no-repeat}
#app:before{background:none}#app:after{background:#fcf0db}
#app[data-view="map"]:after{background:#fcf0db}
#app .topbar,#app .game-top,#app .journey-topbar{background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;filter:none}
#app .topbar:before,#app .topbar:after,#app .game-top:before,#app .game-top:after{content:none;display:none}
#app .journey-topbar{align-items:center;padding:8px 17px 10px}
.journey-title h1,.section-title,.paint-toolbar h2,.modal h2{font-family:var(--a-type);font-weight:900;color:#4a2c22;letter-spacing:1px;text-shadow:0 1px #fffbe9,0 2px #fffbe9}
.journey-title h1{font-size:27px;line-height:1.3}.journey-progress{font-size:12px;line-height:1.5;padding:2px 0 0;color:#62462e;background:none;border:0;box-shadow:none;text-shadow:0 1px #fff4df}
.brand{font-size:21px;letter-spacing:0}.section-title{font-size:28px}
.coin-pill{cursor:default;user-select:none;min-width:67px;justify-content:center;min-height:35px;padding:3px 9px;font-size:16px;font-weight:900}
#app .icon-button{padding:0;display:flex;align-items:center;justify-content:center;line-height:0;flex-shrink:0}
#app .icon-button .toy-icon{display:block;flex:none;width:31px;height:31px;margin:0;transform:translate(-.5px,.5px)}
.icon-button svg{display:block;margin:auto}
#app .bottom-nav{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;padding-left:12px;padding-right:12px;border-radius:24px 24px 0 0;background:linear-gradient(100deg,#fff7e6,#fcf0db);border:1px solid #fffdf3;border-bottom:0;box-shadow:0 -1px 3px #94754918}
.nav-button{max-width:none;min-width:0;font-size:13px;line-height:1.15;gap:3px;padding:5px 0;border-radius:19px;border:1px solid transparent;color:#9f7c5f;transition:transform .12s ease,background .15s ease}
.nav-button .nav-toy{width:27px;height:27px;filter:drop-shadow(0 1px #fff9e8);stroke-width:1.5;overflow:visible}
.nav-toy .icon-lid{fill:#c3a185}.nav-toy .icon-face{fill:currentColor}.nav-toy .icon-highlight{fill:none;stroke:#fff7e6;stroke-linecap:round;stroke-linejoin:round}
.nav-button.active{background:linear-gradient(#ff9986 0,#ff7e70 15%,#ff625b 80%,#f9514d);color:#fff7e7;border:1px solid #fff1dc;box-shadow:inset 0 2px 1px #ffd8b8,inset 0 -2px 2px #ef453c,0 2px #db6552,0 3px 3px #94614320;text-shadow:0 1px #c75245}
.nav-button.active .nav-toy{filter:drop-shadow(0 1px #c65649)}.nav-button.active .icon-lid{fill:#fff7e7}.nav-button.active .icon-highlight{stroke:#ff7969}.nav-button.active:before{display:none}
.primary-button,.shop-card .buy,.secondary-button{--button-image:url('./assets/ui-v5/button-teal.webp');position:relative;isolation:isolate;background:none!important;border:0!important;box-shadow:none!important;border-radius:999px;min-height:57px;padding:11px 22px 14px;font-size:20px;line-height:1.25;font-weight:900;color:#fffbed;letter-spacing:.5px;text-shadow:0 2px #086c67;transition:transform .12s ease,filter .12s ease}
.primary-button:before,.shop-card .buy:before,.secondary-button:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;background:var(--button-image) center/100% 100% no-repeat}
.primary-button.coral{--button-image:url('./assets/ui-v5/button-coral.webp');text-shadow:0 2px #bd4939}
.primary-button.gold,.shop-card .buy{--button-image:url('./assets/ui-v5/button-gold.webp');color:#70451c;text-shadow:0 1px #fff0b2}
.secondary-button{--button-image:url('./assets/ui-v5/button-cream.webp');color:#755239;text-shadow:0 1px #fff9e8;min-height:45px;font-size:15px;padding:9px 18px 12px}
.primary-button:active:not(:disabled),.secondary-button:active:not(:disabled),.shop-card .buy:active:not(:disabled){transform:translateY(3px) scale(.985);filter:brightness(.96);box-shadow:none!important}
.primary-button:disabled,.secondary-button:disabled{filter:grayscale(.9);opacity:.6;color:#637369;text-shadow:none}
.journey-action{padding:12px 30px 13px}.journey-action .primary-button{font-size:22px;min-height:62px}
.modal-actions{gap:12px}.modal h2{font-size:26px}.modal .primary-button{font-size:19px}.shop-card .buy{min-height:44px;width:100%;font-size:15px;padding:9px 7px 12px}
.filter{font-size:12px;border-radius:16px;box-shadow:inset 0 1px #fff8,0 2px #c4ae852e}.filter.active{background:linear-gradient(#47dace,#08afa5);box-shadow:inset 0 1px #b6fff0,0 2px #078d85}
.warehouse-screen .warehouse-create{border-radius:19px;background:linear-gradient(#3dd5c9,#09a79f);box-shadow:inset 0 2px #c0fff0,inset 0 -2px #078f86,0 3px #087e76}.warehouse-screen .warehouse-create strong{font-size:18px}
.shop-card h3{font-size:20px}.shop-card p{color:#795c43;font-size:12px;line-height:1.65}.owned-count{color:#8c7154;font-size:12px}
.gallery-grid .sand-art{object-fit:contain}.paint-toolbar small{font-size:12px}.paint-toolbar .secondary-button{min-width:65px;font-size:13px;padding:7px 12px 10px;min-height:38px}
#main-screen.paint-screen{padding:0;container-type:size}
#main-screen.paint-screen>.paint-screen{padding:0 15px 12px}
#main-screen.paint-screen .canvas-frame{width:min(100%,calc(clamp(100px,100cqh - 280px,350px) * var(--art-ratio)));margin:8px auto}
.paint-progress{margin:8px 0;padding:8px 10px}.paint-palette{margin:8px 0;padding:7px}
.paint-actions{grid-template-columns:minmax(0,1.8fr) minmax(86px,1fr);gap:8px;margin-top:10px}
.paint-actions .primary-button{font-size:17px;padding:10px 8px 13px;min-height:54px;letter-spacing:0}
.paint-actions .secondary-button{font-size:13px;padding:10px 8px 13px}
.game-top .level-pill{font-size:16px}.game-hud strong{font-size:14px}.game-tools .tool-button{font-size:13px}
.tile.matched{animation:toyBurst 360ms cubic-bezier(.2,.7,.4,1) both}
.bucket-slot.receiving .bucket-shell{filter:drop-shadow(0 0 3px #fff5a3)}
.bucket-slot.receiving .bucket-sand{box-shadow:inset 0 4px 3px #fff9,inset 2px 0 3px #fff4,inset -2px -2px 4px #2b1c2128}
.sand-canvas{z-index:12!important}
@keyframes toyBurst{0%{transform:scale(1);opacity:1;filter:brightness(1)}23%{transform:scale(.88);opacity:1;filter:brightness(1.25)}42%{transform:scale(1.14);opacity:.85;filter:brightness(1.3)}70%{transform:scale(.92);opacity:.2}100%{transform:scale(.55);opacity:0}}
@media(max-width:350px){.journey-title h1{font-size:24px}#app .journey-topbar{padding-left:12px;padding-right:12px}.brand{font-size:18px}.coin-pill{min-width:60px;font-size:14px}.nav-button{font-size:11px}.nav-button .nav-toy{width:24px;height:24px}#app .bottom-nav{gap:5px;padding-left:9px;padding-right:9px}.journey-action .primary-button{min-height:55px;font-size:20px}.warehouse-screen .warehouse-create strong{font-size:15px}}
@media(max-height:710px){.nav-button{font-size:12px}.nav-button .nav-toy{width:24px;height:24px}.journey-action{padding-top:8px;padding-bottom:10px}.journey-action .primary-button{min-height:54px}.modal h2{font-size:23px}}
@media(max-height:620px){.nav-button{font-size:11px;min-height:45px}.nav-button .nav-toy{width:22px;height:22px}#app[data-view="game"] .nav-button .nav-toy{width:21px;height:21px}.game-top .level-pill{font-size:13px}.game-hud strong{font-size:11px}.game-tools .tool-button{font-size:10px}.primary-button{min-height:50px;font-size:18px}.modal .primary-button{font-size:17px}}
@media(prefers-reduced-motion:reduce){.tile.matched{animation:none;opacity:.25}.nav-button,.primary-button,.secondary-button{transition:none}}
@media(max-height:620px){#main-screen.paint-screen .canvas-frame{width:min(100%,calc(clamp(90px,100cqh - 235px,230px) * var(--art-ratio)));border-width:8px}.paint-color{min-height:44px}.paint-color .color-dot{width:29px;height:29px}.paint-palette{padding:4px}.paint-toolbar h2{font-size:21px}.paint-actions .primary-button{font-size:14px;min-height:47px}.paint-actions .secondary-button{font-size:12px;min-height:47px}.paint-toolbar{min-height:36px}}