/* Lane-defense arena, aligned with the Hatch & Grow toy-box world. */
#ld.ld{padding:20px max(18px,calc((100vw - 1120px)/2)) 22px;gap:12px;background:linear-gradient(#28172b55,#27172bbf),var(--ldbg) center/cover fixed;isolation:isolate}
#ld .ld-top{background:linear-gradient(#b17a46,#774426);border:2px solid #e9bd7e;border-radius:17px;padding:10px 16px;box-shadow:0 5px 14px #341e3444}
#ld .ld-top h2{font-size:30px;color:#fff0c9;text-shadow:0 2px 2px #593020}#ld .ld-top small{color:#fff0cf;font-size:12px}
#ld .ld-lives{display:flex;gap:5px;align-items:center}.boss-life{width:25px;height:32px;object-fit:contain;filter:drop-shadow(0 2px 2px #44262466)}.boss-life.lost{filter:grayscale(1) brightness(.5);opacity:.55}
#ld .ld-boss{position:relative;min-height:130px;padding:12px 22px 12px 155px;background:linear-gradient(110deg,#51314f,#2c223b);border:3px solid #bd8957;border-radius:18px;box-shadow:inset 0 2px 2px #e8bc7944,0 6px 15px #21142644;overflow:visible}
#ld .ld-boss>img{position:absolute;left:14px;bottom:0;height:145px;width:130px;object-fit:contain;transform-origin:50% 90%;filter:drop-shadow(0 7px 6px #1c112977)}
#ld .ld-boss .msg{font:23px var(--display);line-height:1.2;color:#fff1cc;min-height:30px}#ld .ld-hp{height:18px;border:2px solid #e1b474;background:#24182d;border-radius:12px;box-shadow:inset 0 3px 4px #0e071955}#ld .ld-hp i{background:linear-gradient(90deg,#e78f42,#ffda7f);transition:none}#ld .ld-boss small{display:block;margin-top:6px;color:#eed5ba;font-size:12px}
#ld .ld-field{gap:12px;height:clamp(270px,43vh,450px);padding:12px;border:3px solid #e9bd7e;border-radius:22px;background:linear-gradient(#bb8147,#8a502c);box-shadow:inset 0 0 0 4px #764328,0 8px 20px #26172f66}
#ld .ld-lane{background:linear-gradient(#5b3e58,#7a5776 70%,#4b384f);border:2px solid #b18ba4;border-radius:13px;box-shadow:inset 0 4px 7px #2a192e66;isolation:isolate}
#ld .ld-lane::before{content:attr(data-label);position:absolute;left:50%;top:8px;transform:translateX(-50%);font:12px var(--display);color:#f3d9b6;background:#342338a6;padding:3px 10px;border-radius:8px;pointer-events:none}
#ld .ld-lane .line{border-top:2px dashed #ffd98c88;z-index:-1}#ld .ld-lane .nest{height:11%;background:#603c29;border-top:2px solid #b6824b;box-shadow:inset 0 4px 6px #3b232b55}.nest img{height:90%;width:35px;object-fit:contain}
#ld .ld-lane.pick{background:linear-gradient(#745746,#94805b);border-color:#ffe4a4}#ld .ld-lane.over{border-color:#fff1c6;box-shadow:inset 0 0 0 3px #ffcf6d}
#ld .ld-guard img{height:clamp(45px,7vh,72px)}#ld .ld-guard div{animation:guard-arrive .35s cubic-bezier(.2,.8,.2,1)}
#ld .ld-guard i{height:6px;border:1px solid #fff0b0}#ld .ld-cards{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
#ld .ld-card{background:linear-gradient(#fff0d2,#eac89a);border:2px solid #cb9659;border-radius:14px;color:#5d3927;padding:7px;min-height:104px;box-shadow:inset 0 2px 2px #fff8e6,0 4px 7px #28182e44}
#ld .ld-card img{height:61px;filter:drop-shadow(0 3px 2px #67453355)}#ld .ld-card small{font-size:12px;color:#674529}#ld .ld-card .tag{font-size:10px;color:#6b4225;min-height:13px}#ld .ld-card.ready{border-color:#ffd877}#ld .ld-card.sel{background:#ffe2a2;border:3px solid #fff2c4;box-shadow:0 3px 12px #ffcf6266}#ld .ld-card.out{opacity:.7}
#ld .ld-help{font-size:12px;line-height:1.5;color:#fff0d4;background:#2f2038cc;border-radius:10px;padding:8px 12px}#ld .ld-quit{align-self:center;min-height:40px;padding:8px 25px;border:1px solid #dab183;color:#ffe6bf;background:#533728;border-radius:12px}
#ld .ld-p{width:56px;margin-left:-28px;transform-origin:center;}#ld .ld-p.big{width:74px;margin-left:-37px}.clutter-sprite{display:block;width:100%;aspect-ratio:1;background-image:url('art/boss-clutter.webp');background-size:500% 200%;background-position:var(--cx) var(--cy);background-repeat:no-repeat;pointer-events:none;animation:clutter-wobble 1.2s ease-in-out infinite alternate}#ld .ld-p b{width:70%;height:5px}#ld .ld-p.hit .clutter-sprite{filter:brightness(1.7)}
#ld .ld-lane.boss-impact{animation:lane-impact .3s ease-out}#ld .ld-lane.boss-danger{animation:lane-danger .6s ease-in-out 2}#ld .ld-boss.boss-power{animation:boss-charge .45s ease-out}#ld .ld-boss img.throw{animation:boss-toss .35s ease-out}
.howto .howto-card{background:linear-gradient(#fff0d3,#eac99d);border:3px solid #c58d4e;box-shadow:0 15px 40px #1b102888;color:#573a29;border-radius:20px;padding:22px}.howto .howto-card h3{color:#6b3926;font-size:29px}.howto .howto-card .hsub{color:#765039}.howto .howto-card li{background:#fff6e3;color:#5b3e2a}.howto .howto-card li b{color:#793e20}.howto-go{border:2px solid #ffe9a1;box-shadow:0 4px 6px #6e422655}
@keyframes guard-arrive{from{transform:translateY(18px) scale(.65);opacity:.3}to{transform:none;opacity:1}}
@keyframes clutter-wobble{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
@keyframes lane-impact{35%{filter:brightness(1.45);transform:translateY(3px)}100%{filter:none;transform:none}}
@keyframes lane-danger{50%{box-shadow:inset 0 0 25px #ff804999;border-color:#ffb06d}}
@keyframes boss-charge{45%{filter:brightness(1.4)}100%{filter:none}}
@keyframes boss-toss{35%{transform:translateY(-7px) rotate(7deg)}65%{transform:translateY(7px) rotate(-6deg)}100%{transform:none}}
@media(max-width:650px){#ld.ld{padding:10px;gap:8px}#ld .ld-top{padding:9px}#ld .ld-top h2{font-size:24px}.boss-life{width:19px;height:26px}#ld .ld-boss{padding-left:100px;min-height:108px}#ld .ld-boss>img{width:85px;height:115px;left:5px}#ld .ld-boss .msg{font-size:17px}#ld .ld-field{gap:6px;padding:8px;height:42vh;min-height:260px}#ld .ld-cards{grid-template-columns:repeat(3,1fr);gap:6px}#ld .ld-card{min-height:90px}#ld .ld-card img{height:46px}#ld .ld-help{font-size:11px}#ld .ld-p{width:44px;margin-left:-22px}}
@media(prefers-reduced-motion:reduce){#ld *,#ld *::before,.howto *{animation:none!important;transition:none!important}}