#app[data-game=delivery]{height:100dvh;overflow:hidden;background:radial-gradient(ellipse at top,#e6f6ff,#b8dce8);font-family:Nunito,'Trebuchet MS',sans-serif;color:#234b76}
#app[data-game=delivery]>header,#app[data-game=delivery]>.bottom-nav{display:none}
#app[data-game=delivery]>main{height:100%;max-width:470px;width:100%;margin:auto;padding:0 8px 8px;display:flex;flex-direction:column;background:linear-gradient(#f3fbff,#dbf0e4);box-shadow:0 0 40px #456f8926}
.delivery-top{display:flex;align-items:center;justify-content:space-between;flex:0 0 69px;padding:3px 8px;gap:6px}
.delivery-top h1{font-family:Nunito,'Trebuchet MS',sans-serif;font-weight:1000;font-size:23px;line-height:1.05;text-align:center;margin:0;color:#164880;letter-spacing:-1px;text-shadow:0 2px #fff}
.delivery-top h1 span{display:block;font-size:24px}
.delivery-nav{min-width:39px;min-height:39px;border-radius:13px;background:linear-gradient(#fffef7,#ecf5ef);border:2px solid white;box-shadow:0 3px 0 #8eb7b0,0 4px 7px #375f7930;color:#24658d;font-size:23px}
.delivery-layout.game-layout{display:grid;grid-template-rows:42px minmax(0,1fr) 52px 27px 42px;gap:5px;flex:1;min-height:0;margin:0;padding:0}
.delivery-hud{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(#7fa75c,#b8cf7d);border:2px solid #e1edb5;border-radius:16px;padding:3px 8px;box-shadow:0 3px 0 #6d955c;z-index:3}
.delivery-level{font-size:13px;font-weight:1000;color:white;background:linear-gradient(#67c6ed,#2484ba);border:2px solid #d3f3ff;border-radius:10px;padding:4px 10px;box-shadow:0 2px #37708d}
.delivery-count{display:flex;align-items:center;gap:7px;padding:4px 13px;border-radius:24px;background:#fff9e5;box-shadow:0 2px 3px #6e784344;color:#83502c;font-size:17px}.delivery-count small{font-size:10px}.delivery-hud .delivery-nav{min-width:31px;min-height:30px;font-size:19px;border-radius:10px;background:linear-gradient(#65c7ed,#1a8bbd);color:#fff}
.delivery-layout #play-area{min-height:0;position:relative;overflow:hidden;border-radius:14px;box-shadow:0 3px 0 #739467;isolation:isolate;background:#aac981}
.delivery-map{position:relative;width:100%;height:100%;background:#b5ce8f url('assets/delivery-map.png') center/100% 100% no-repeat;overflow:hidden;touch-action:none}
.delivery-roads{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.delivery-roads path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.delivery-hit-grid{position:absolute;inset:1.111% 0 12.222%;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));gap:0}
.delivery-hit.cell{position:relative;width:100%;height:100%;min-width:0;min-height:0;aspect-ratio:auto;padding:0;border:0;background:none;border-radius:0;box-shadow:none;overflow:visible;touch-action:none}
.delivery-hit.cell:disabled{opacity:1;cursor:default}.delivery-hit.cell.selected{outline:3px solid #fff6ae;outline-offset:-10px;border-radius:18px;background:#fff5bf40}
.delivery-sprite{display:block;aspect-ratio:1;background:url('assets/delivery-sprites.png') no-repeat;background-size:300% 200%;pointer-events:none;filter:drop-shadow(0 3px 1px #493a3133)}
.shop-art{position:absolute;width:150%;left:-25%;bottom:12%;z-index:3}
.shop-pin{position:absolute;top:0;left:35%;z-index:5;background:#fffdf2;border:2px solid var(--route);color:var(--route);border-radius:50%;width:25px;height:25px;font-size:17px;font-weight:1000;box-shadow:0 2px 3px #3333}
.delivery-courier{position:absolute;width:15%;aspect-ratio:1;transform:translate(-50%,-45%);pointer-events:none;z-index:8}.delivery-courier .delivery-sprite{width:100%;height:100%}.delivery-courier.chosen:before{content:'';position:absolute;inset:29% 6% 0;border:2px solid #fff9bd;border-radius:50%;background:#fffab036;box-shadow:0 0 0 3px var(--route)}
.delivered-check{position:absolute;top:-5px;right:0;background:#fff;color:#548b43;width:23px;height:23px;border-radius:50%;font-weight:1000;border:2px solid #85b35e}
.delivery-map-caption{position:absolute;bottom:2%;left:10%;width:80%;text-align:center;font-size:9px;font-weight:900;color:#fff;text-shadow:0 1px 3px #315c6b;pointer-events:none}
.delivery-tree{position:absolute;width:67%;height:63%;left:16%;top:10%;filter:drop-shadow(1px 4px 1px #54653655);pointer-events:none}.delivery-tree:before{content:'';position:absolute;width:14%;height:70%;background:#a08349;left:45%;bottom:0;border-radius:4px}.delivery-tree i,.delivery-tree b{position:absolute;border-radius:44%;background:radial-gradient(circle at 33% 22%,#b4d754,#7cb544 46%,#458f3f 85%);width:90%;height:73%;left:5%;top:4%;box-shadow:inset 2px 2px 3px #d6e68c,0 2px 0 #477e3b}.delivery-tree b{width:65%;height:57%;left:30%;top:18%;background:radial-gradient(circle at 30% 20%,#bad950,#75aa3f 55%,#4b883b)}
.delivery-routes.tray{display:flex;justify-content:center;align-items:stretch;gap:7px;padding:0;margin:0;overflow:hidden;min-height:0}
.courier-choice{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:2px;background:#f6fbf1;border:2px solid #d0dec3;border-radius:13px;color:#44624b;font:900 11px Nunito,sans-serif;padding:0 5px;box-shadow:0 2px #9fbaa4}.courier-choice .delivery-sprite{width:45px;flex-shrink:0}.courier-choice.selected{border-color:var(--route);background:#fffdf2;box-shadow:inset 0 0 0 1px var(--route),0 2px #9fbaa4}
.delivery-layout .hint-note{font-size:10px;line-height:13px;text-align:center;color:#466c70;margin:0;align-self:center;min-height:0}
.delivery-layout .tools{display:flex;gap:7px;margin:0;min-height:0}.delivery-layout .tools .quiet{flex:1;min-height:38px;padding:3px 8px;background:linear-gradient(#fffefa,#e7f0e3);border:2px solid #fff;border-radius:13px;box-shadow:0 3px #a3bbb0;color:#346179;font:900 12px Nunito,sans-serif}
@media(max-height:650px){.delivery-top{flex-basis:53px}.delivery-top h1{font-size:18px}.delivery-top h1 span{font-size:19px}.delivery-layout.game-layout{grid-template-rows:36px minmax(0,1fr) 44px 24px 37px;gap:4px}.courier-choice .delivery-sprite{width:36px}.delivery-map-caption{display:none}}
@media(orientation:landscape) and (max-height:550px){#app[data-game=delivery]>main{max-width:850px;flex-direction:row;gap:10px}.delivery-top{flex:0 0 130px;flex-wrap:wrap;justify-content:center;align-content:center}.delivery-top h1{order:-1;width:100%;margin-bottom:14px}.delivery-layout.game-layout{grid-template-columns:minmax(0,1fr) 150px;grid-template-rows:38px minmax(0,1fr) 38px;gap:8px}.delivery-layout #play-area{grid-column:1;grid-row:1/4}.delivery-hud{grid-column:2;grid-row:1}.delivery-count small{display:none}.delivery-count{padding:3px 5px;font-size:12px}.delivery-level{padding:3px;font-size:11px}.delivery-routes.tray{grid-column:2;grid-row:2;flex-direction:column}.delivery-layout .tools{grid-column:2;grid-row:3;gap:3px}.delivery-layout .tools .quiet{font-size:10px;padding:2px}.delivery-layout .hint-note{display:none}}

.shop-art{width:140%;left:-20%;bottom:0}.delivery-hit:nth-child(6n) .shop-art{left:-40%}.delivery-hit:nth-child(6n+1) .shop-art{left:0}
.delivery-tree i{border-radius:38% 47% 35% 44%;background:radial-gradient(circle at 23% 27%,#bbd86b 0 14%,transparent 15%),radial-gradient(circle at 70% 22%,#aaca53 0 19%,transparent 20%),radial-gradient(circle at 72% 67%,#69a340 0 26%,transparent 27%),radial-gradient(circle at 30% 65%,#82b147 0 25%,transparent 26%),radial-gradient(circle at 45% 40%,#a0c458,#528c3d);box-shadow:inset 1px 2px 3px #cfdf7e,0 2px #4f7b38}
.delivery-tree b{border-radius:45% 37% 48% 32%;width:59%;height:48%;top:29%;background:radial-gradient(circle at 35% 25%,#a9cc5e,#6f9d41 75%);box-shadow:none}

.delivery-layout .tools .quiet{font-size:11px;padding:3px 5px}.delivery-layout .tools [data-action=delivery-clear]{flex:1.25}

.courier-choice:disabled{opacity:1;cursor:default;background:#e1edda;color:#48733f;border-color:#9fc18b}.delivery-courier.delivered{filter:drop-shadow(0 0 3px #d6f3bd)}
.courier-choice:disabled .delivery-sprite{width:32px}.courier-choice:disabled span:last-child{font-size:10px}