/* A v4: the entire map uses one repeating raster, including its continuous road. */
body:before,body:after{display:none}
#app[data-view="map"]{background-color:#f7e9c7;background-image:url('./assets/revision-v4/route.webp');background-repeat:repeat-y;background-size:100% var(--route-height,100dvh);background-position:0 var(--route-offset,0px);background-origin:border-box}
#app[data-view="map"]:before,#app[data-view="map"]:after{background:transparent}
#app .journey-topbar{background:transparent;box-shadow:none;padding-bottom:12px;align-items:flex-start}
.journey-title h1{font-size:27px;line-height:1.25;text-shadow:0 2px 1px #fff6e9}
.journey-progress{display:block;padding:7px 0 0;background:none;font-size:12px;color:#67472d;font-weight:800;text-shadow:0 1px #fff6e9}
.journey-topbar .top-actions{padding-top:1px}
.journey-topbar .icon-button,.topbar .icon-button{width:43px;height:43px;min-width:43px;background:linear-gradient(#fffdf1,#f8e7c5);border:2px solid #fffcf0;box-shadow:inset 0 1px #fff,0 3px #c6a475}
.icon-button .toy-icon{width:33px;height:33px;object-fit:contain}
.map-screen{background:transparent}
.journey-world{height:calc(var(--route-height) * 8.35);padding:0;background:transparent}
.journey-node:disabled{opacity:1}
.journey-node.is-locked .node-face{color:#ad987b;background:linear-gradient(135deg,#fff9e7,#e8d7b6);text-shadow:0 1px #fff8e9}
.node-lock{position:absolute;right:-4px;bottom:3px;z-index:4;width:32px;height:35px;filter:drop-shadow(0 2px 1px #8c754349)}
.node-lock img{width:100%;height:100%;object-fit:contain}
.journey-action{padding:18px 34px 13px;background:none}
.journey-action button{border:2px solid #fff3d6;box-shadow:inset 0 2px #ffd5b4,0 4px #cb4e3c,0 7px 11px #81613744}
.entry-targets{margin-bottom:22px;gap:8px}
.entry-targets:has(.entry-target:nth-child(5)):not(:has(.entry-target:nth-child(6))){grid-template-columns:repeat(5,minmax(0,1fr))}
.entry-target{padding:4px 1px 8px;background:linear-gradient(#fffdf4,#fff4df)}
.many-targets .entry-bucket{height:72px}
.entry-target strong{font-variant-numeric:tabular-nums}
.bucket-body{left:20%;right:20%;top:25%;bottom:21%;border:0;border-radius:3px 3px 25% 25% / 4px 4px 13% 13%;clip-path:polygon(0 0,100% 0,91% 100%,9% 100%);background:transparent;box-shadow:none;overflow:hidden}
.bucket-sand{left:0;right:0;bottom:0;min-height:0;background:var(--pigment);isolation:isolate;border-radius:50% 50% 16% 16% / 5px 5px 8% 8%;box-shadow:inset 0 3px 2px #fff7,inset 2px 0 3px #fff4,inset -2px -2px 4px #2b1c2128;transition:height .14s linear;overflow:hidden}
.bucket-sand:after{content:'';position:absolute;inset:0;background:url('./assets/revision-v4/sand.webp') 0 0/52px 52px;opacity:.35;mix-blend-mode:multiply;pointer-events:none}
.bucket-shell{z-index:2}
.bucket-mark{top:50%;width:21%;height:18%;font-size:10px;opacity:.9;border:1px solid #fff5dc;box-shadow:0 1px 1px #765b3a33}
.bucket-count{left:17%;right:17%;bottom:2%;padding:0;background:#fff7e4ed;font-size:9px;border-radius:5px;line-height:1.4}
.bucket-cap{left:15%;width:70%;top:13%;height:10%}
.entry-bucket .bucket{filter:drop-shadow(0 2px 2px #856e3a20)}
.entry-bucket .bucket-sand{background-size:50px 50px}
.tile{touch-action:none;user-select:none;-webkit-user-select:none}
.tile.selected,.tile.held{z-index:10;outline:3px solid #fff9de;outline-offset:1px;box-shadow:0 0 0 5px #ff976d,0 8px 9px #4c442744;transform:translateY(-5px) scale(1.12);animation:none}
.tile.displaced{z-index:5;animation:none;outline:0}
.tile.held .tile-art,.tile.selected .tile-art{filter:drop-shadow(0 4px 2px #5b493d42) brightness(1.05)}
.board[aria-busy="true"] .tile{pointer-events:none}
.board{overflow:visible}.belt-arrows{display:none}
.belt{animation:beltTexture 1.3s linear infinite}
.slow-active .belt{animation-duration:4.33s}
.game-paused .belt{animation-play-state:paused}
@keyframes beltTexture{from{background-position:0 0}to{background-position:28px 0}}
.canvas-frame{width:min(100%,calc(40dvh * var(--art-ratio)));height:auto;aspect-ratio:var(--art-ratio);min-height:0;max-height:none;flex-shrink:0;margin:12px auto 15px}
.canvas-frame .sand-art{display:block;width:100%;height:100%;padding:0;filter:none}
.paint-toolbar{justify-content:center;gap:10px}
.paint-toolbar>div{flex:1;text-align:center}
.paint-toolbar>.secondary-button{min-width:65px;position:absolute;left:0}
.art-tag:empty{display:none}.art-thumbnail .sand-art{width:100%;height:100%}
.grain-rule{font-size:9px}.fall-caption{letter-spacing:0;color:#70593e}
.game-hud{flex-wrap:wrap;gap:5px}
.target-swatches{margin-left:auto}
@media(max-width:350px){.journey-title h1{font-size:23px}.journey-progress{font-size:11px}.journey-topbar .top-actions{gap:5px}.journey-topbar .coin-pill{padding:4px 7px}.journey-topbar .icon-button{width:39px;height:39px;min-width:39px}.node-lock{width:28px;height:31px}.many-targets .entry-bucket{height:56px}.entry-targets{gap:5px}.entry-target strong{font-size:10px}.grain-rule{font-size:8px}}
@media(max-height:710px){.journey-title h1{font-size:24px}.journey-progress{padding-top:5px}.many-targets .entry-bucket{height:54px}.entry-targets{margin-bottom:15px}.bucket-count{font-size:8px}.canvas-frame{width:min(100%,calc(34dvh * var(--art-ratio)))}.paint-screen{padding-bottom:16px}}
@media(max-height:620px){
 #app[data-view="game"] .game-top{padding:3px 10px 6px;min-height:42px}
 #app[data-view="game"] .pause-button{min-width:34px;min-height:34px;width:34px;height:34px}
 #app[data-view="game"] .game-hud{min-height:30px;padding:4px 8px;margin-bottom:4px;flex-wrap:nowrap}
 #app[data-view="game"] .grain-rule{display:none}
 #app[data-view="game"] .conveyor{height:76px}
 #app[data-view="game"] .bucket-track{height:55px}
 #app[data-view="game"] .bucket-slot{height:55px;width:53px}
 #app[data-view="game"] .belt{height:21px}
 #app[data-view="game"] .fall-zone{min-height:14px}
 #app[data-view="game"] .game-tools{padding:4px 0 7px;gap:6px}
 #app[data-view="game"] .tool-button{height:50px;border-radius:14px;font-size:10px}
 #app[data-view="game"] .tool-button .toy-icon{width:33px;height:33px}
 #app[data-view="game"] .buffer{padding:4px 2px;font-size:8px}
 #app[data-view="game"] .bottom-nav{height:48px;padding:2px 10px}
 #app[data-view="game"] .nav-button{min-height:42px;padding:2px;gap:1px;font-size:10px}
 #app[data-view="game"] .nav-button .icon{width:19px;height:19px}
}