/* A v6: full-bleed map; safe insets live inside the actual navigation surface. */
:root{--safe-bottom:env(safe-area-inset-bottom,0px);--nav-content-height:76px;--nav-height:calc(var(--nav-content-height) + var(--safe-bottom))}
#app{padding-bottom:0}
#app:before,#app:after{content:none;display:none}
#app .bottom-nav{height:var(--nav-height);padding-bottom:calc(7px + var(--safe-bottom));margin-top:0;flex-shrink:0}
#app[data-view="map"] .journey-topbar{position:absolute;top:var(--safe-top);left:var(--safe-left);right:var(--safe-right);z-index:5;pointer-events:none}
.journey-topbar button,.journey-topbar .coin-pill{pointer-events:auto}
#app[data-view="map"] .map-screen{position:absolute;inset:0 var(--safe-right) var(--nav-height) var(--safe-left);padding:0;overflow:hidden;display:block}
#app[data-view="map"] .bottom-nav{margin-top:auto}
.journey-scroll{position:absolute;inset:0;overflow-y:auto;scroll-padding-top:calc(var(--safe-top) + 80px);scroll-padding-bottom:100px}
.journey-action{position:absolute;left:0;right:0;bottom:0;z-index:4;pointer-events:none}
.journey-action button{pointer-events:auto}
.journey-prop{position:absolute;transform:translate(-50%,-50%);object-fit:contain;pointer-events:none;user-select:none;z-index:0;filter:drop-shadow(0 4px 2px #ad834326)}
.journey-node{z-index:2}
#app .topbar .back-button{color:#825b37}
#app .icon-button .toy-icon{transform:none}
.paint-toolbar{justify-content:center;text-align:center}
.warehouse-tabs.gallery-filters{padding:7px 0 2px;flex-shrink:0;margin:0;gap:10px}
.gallery-filters .filter{min-width:110px;min-height:43px;flex:1;max-width:180px;padding:10px 18px;font-size:17px;border:1px solid #fff5db;color:#855b37;background:linear-gradient(#fff8e7,#efd5a8);box-shadow:inset 0 2px #fffdf0,0 3px #c4a16f}
.gallery-filters .filter.active{color:#fffbed;background:linear-gradient(#43d8cd,#0aada4);border-color:#c4ffec;text-shadow:0 1px #07847f;box-shadow:inset 0 2px #adfff0,0 3px #078c85}
.tools-inventory{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;overflow:auto;padding:3px 1px 7px}
.tool-stock{text-align:center;padding:20px 8px 16px;background:linear-gradient(#fffcf0,#f5e6c9);border:2px solid #fff9e6;border-radius:24px;box-shadow:inset 0 -2px #dfc4a3,0 3px #c4ac86}
.tool-stock h3{font-size:18px;margin:7px 0}.tool-stock strong{font-size:24px}.tool-stock small{font-size:13px;color:#967756}
#app .shop-grid{gap:16px 12px;padding:0 16px 24px}
.shop-card{display:flex;flex-direction:column;align-items:center;padding:14px 10px 12px;border:2px solid #fff9e7;border-radius:24px;background:linear-gradient(#fffcef,#f7e9cc);box-shadow:inset 0 -2px #e6cfa8,0 3px #c6b58c}
.shop-card p{flex:1;margin:7px 0 12px;min-height:58px;text-align:center}
.shop-price{display:flex;justify-content:center;align-items:center;gap:6px;width:100%;min-height:39px;padding:5px 9px;background:linear-gradient(#f5e3b8,#ffefc8);border:1px solid #cfb07c;border-bottom-color:#fffdf0;border-radius:13px;box-shadow:inset 0 2px 3px #b38b5336,0 1px #fffef1;color:#81582d;font-size:20px;font-variant-numeric:tabular-nums}
.quantity-picker{display:grid;grid-template-columns:34px minmax(0,1fr) 34px;gap:4px;width:100%;margin:10px 0 12px;align-items:center}
.quantity-picker button{height:36px;display:grid;place-items:center;border:1px solid #fff3d4;border-radius:12px;background:linear-gradient(#fff7df,#efd09b);box-shadow:inset 0 2px #fffbed,0 3px #bf935a;color:#8b5d30;font-size:25px;line-height:1;padding:0}
.quantity-picker input{width:100%;min-width:0;height:36px;appearance:textfield;-moz-appearance:textfield;text-align:center;border-radius:10px;background:#fff9eb;border:1px solid #d5b986;border-bottom-color:#fff8e7;box-shadow:inset 0 2px 3px #b78f5428;color:#6e4c2b;font-size:18px;padding:0 2px}
.quantity-picker input::-webkit-inner-spin-button,.quantity-picker input::-webkit-outer-spin-button{appearance:none;margin:0}
.quantity-picker input:focus{outline:2px solid #13b4a6;outline-offset:1px}
.sold-stamp{position:absolute;right:10px;top:15px;z-index:3;display:block;transform:rotate(12deg);background:none;padding:3px;font-size:24px;letter-spacing:2px;color:#b97453aa;-webkit-text-stroke:.7px #80593888;text-shadow:0 1px #fff9e7a8,0 2px 1px #aa765341;pointer-events:none}
.canvas-frame>.sold-stamp{font-size:30px;top:12%;right:8%}
.sold-actions{grid-template-columns:1fr}
.paint-color .paint-stock{display:block;font-size:10px;color:#8c6a45;line-height:1.4;margin-top:2px}
.paint-color small{font-size:12px;white-space:nowrap}
.paint-palette{align-items:stretch}.paint-color{padding:6px 3px;min-width:0}
.paint-actions .pour-button{font-size:16px;touch-action:none;user-select:none;-webkit-user-select:none}
#painting-canvas{touch-action:none;user-select:none;-webkit-user-select:none}
.paint-progress .progress-fill{transition:width .05s linear}
.pour-stream{position:absolute;inset:0;pointer-events:none;overflow:hidden;opacity:0}
.is-pouring .pour-stream{opacity:1}
.pour-stream i{position:absolute;left:calc(22% + var(--i) * 3.7%);top:-5px;width:3px;height:4px;border-radius:1px;background:var(--pour-color);box-shadow:0 12px var(--pour-color),2px 27px var(--pour-color),-2px 41px var(--pour-color);animation:pourGrains .65s linear infinite;animation-delay:calc(var(--i) * -.041s);animation-play-state:paused}
.is-pouring .pour-stream i{animation-play-state:running}
@keyframes pourGrains{from{transform:translateY(-45px);opacity:1}to{transform:translateY(330px);opacity:.15}}
@media(max-height:710px){:root{--nav-content-height:65px}#app .bottom-nav{padding-top:5px;padding-bottom:calc(5px + var(--safe-bottom))}.warehouse-tabs.gallery-filters{padding-top:3px}.gallery-filters .filter{min-height:39px;font-size:15px}.tool-stock{padding:12px 5px}.tool-stock .icon{width:62px;height:62px}}
@media(max-height:620px){:root{--nav-content-height:58px}#app .bottom-nav{padding-top:4px;padding-bottom:calc(4px + var(--safe-bottom))}.paint-actions .pour-button{font-size:12px}#main-screen.paint-screen .canvas-frame{width:min(100%,calc(clamp(80px,100cqh - 260px,230px) * var(--art-ratio)))}.paint-color .color-dot{width:24px;height:24px}.paint-color small{font-size:10px}.paint-stock{font-size:9px}.gallery-filters .filter{min-height:36px}.tool-stock h3{font-size:16px}.tool-stock .icon{width:50px;height:50px}}
@media(max-width:350px){.gallery-filters .filter{min-width:0;padding:9px 10px}.shop-card h3{font-size:17px}.shop-card{padding:12px 8px}.quantity-picker{grid-template-columns:30px minmax(0,1fr) 30px}.paint-actions .pour-button{font-size:13px}.sold-stamp{font-size:20px}}
@media(prefers-reduced-motion:reduce){.pour-stream{display:none}.paint-progress .progress-fill{transition:none}}
#main-screen.paint-screen .canvas-frame{width:min(100%,calc(clamp(80px,100cqh - 315px,350px) * var(--art-ratio)))}
@media(max-height:620px){#main-screen.paint-screen .canvas-frame{width:min(100%,calc(clamp(70px,100cqh - 270px,230px) * var(--art-ratio)))}}
@media(max-height:710px){
 #main-screen.paint-screen>.paint-screen{padding-bottom:8px}
 .paint-toolbar{height:29px;min-height:29px;margin:0}
 .paint-toolbar>div{display:flex;align-items:baseline;justify-content:center;gap:8px}
 .paint-toolbar h2{font-size:21px;line-height:1.2}.paint-toolbar small{font-size:10px}
 #main-screen.paint-screen .canvas-frame{margin:6px auto;width:min(100%,calc(clamp(100px,100cqh - 222px,300px) * var(--art-ratio)))}
 .paint-progress{height:28px;padding:4px 8px;margin:5px 0;font-size:10px}
 .paint-progress .progress-track{height:9px}
 .paint-palette{margin:5px 0;padding:5px;gap:5px}
 .paint-color,.paint-color.selected{padding:3px 2px;gap:2px;min-height:54px}
 .paint-color .color-dot{width:26px;height:26px}.paint-color small{font-size:10px}
 .paint-color .paint-stock{font-size:9px;line-height:1.1;margin-top:0}
 .paint-actions{margin-top:7px;gap:7px}
 .paint-actions .primary-button,.paint-actions .secondary-button{min-height:47px;font-size:14px}
}
@media(max-height:620px){
 .paint-toolbar{height:25px;min-height:25px}.paint-toolbar h2{font-size:18px}
 #main-screen.paint-screen .canvas-frame{margin:4px auto;width:min(100%,calc(clamp(100px,100cqh - 205px,240px) * var(--art-ratio)))}
 .paint-actions .primary-button,.paint-actions .secondary-button{min-height:44px;font-size:12px}
}
/* Override the legacy compact game rule as well, so its tabs keep the home inset. */
#app[data-view="game"] .bottom-nav{height:var(--nav-height);padding-bottom:calc(7px + var(--safe-bottom))}
@media(max-height:710px){#app[data-view="game"] .bottom-nav{padding-bottom:calc(5px + var(--safe-bottom))}}
@media(max-height:620px){#app[data-view="game"] .bottom-nav{padding-bottom:calc(4px + var(--safe-bottom))}}

.account-entry{font:inherit;font-size:11px;color:#384b43;background:#eff3de;border:1px solid #c8d6ba;border-radius:12px;padding:8px;max-width:90px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.account-overlay button{box-shadow:none}.account-overlay input{user-select:text}