/* A small, lively park using the same pixel characters as the game. */
.dog-park{display:grid;grid-template-columns:.85fr 1.45fr;align-items:center;gap:12px;position:relative;isolation:isolate;min-height:288px;margin:0 0 22px;padding:24px 26px;background:#f0eadc;border:2px solid #6e634e;box-shadow:5px 5px 0 #dfd4be;overflow:hidden}
.park-copy{position:relative;z-index:1}.park-kicker{margin:0 0 8px;color:#665c47;font-size:11px;font-weight:700;letter-spacing:2px}.park-paw{color:#917646;margin-right:5px}
.park-copy h1{margin:0;font-size:37px;font-weight:850;line-height:1.3;letter-spacing:2px;color:var(--cocoa-dark);text-shadow:2px 2px 0 #fff8e8}.park-intro{font-size:13px;line-height:1.8;color:#675e4d;margin:12px 0 16px}
.park-choose{display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:42px;padding:8px 13px;border:2px solid #655b46;border-radius:0;background:#fffaf0;color:#493f32;box-shadow:3px 3px 0 #cbbd9e;font:700 12px 'Microsoft JhengHei','Segoe UI',sans-serif;cursor:pointer}.park-choose:hover{background:#fffdf8}.park-choose:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #cbbd9e}.park-choose:focus-visible{outline:3px solid var(--cocoa);outline-offset:4px}
.park-world{position:relative;align-self:stretch;min-width:0;min-height:242px;padding:24px 5px 23px;display:flex;align-items:center;background:linear-gradient(180deg,transparent 0 26%,#d6d8b9 26% 45%,#c9cda7 45% 72%,#bdc399 72% 100%);border-bottom:4px solid #9ca57a;box-shadow:inset 0 -5px #dbe0bb}
.park-pack{position:relative;z-index:1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:end;gap:2px 0;width:100%;padding-bottom:3px}.park-dog{display:block;min-width:0;height:61px;position:relative;transform:translateY(calc((var(--guest) / 18) * -3px))}.park-dog:nth-child(6n+2),.park-dog:nth-child(6n+5){transform:translateY(-7px)}
.park-dog:before{content:'';position:absolute;bottom:0;left:16%;right:11%;height:5px;background:#63744520;box-shadow:3px 1px #63744514}.park-dog .park-sprite{position:relative;display:block;width:100%;height:100%;background-image:url("./assets/dog-park-sprites-v1.webp");background-size:600% 300%;background-position:var(--sprite-x) var(--sprite-y);background-repeat:no-repeat;image-rendering:pixelated;filter:drop-shadow(0 2px 0 #f8f3dc55)}.park-dog:nth-child(4n+1) .park-sprite{animation:park-hop 2.6s steps(2,end) infinite;animation-delay:calc(var(--guest) * -180ms)}
.park-sun{position:absolute;right:17px;top:4px;width:24px;height:24px;background:#d1ad69;box-shadow:4px 0 #e0c28b,-4px 0 #e0c28b,0 4px #e0c28b,0 -4px #e0c28b}
.park-cloud{position:absolute;width:37px;height:7px;background:#fffaf0;box-shadow:8px -6px #fffaf0,18px -10px #fffaf0;opacity:.85}.park-cloud-one{top:11px;left:17%}.park-cloud-two{top:6px;left:55%;transform:scale(.7)}
.park-flower{position:absolute;width:5px;height:5px;background:#e4c17d;box-shadow:5px 0 #f9e7be,-5px 0 #f9e7be,0 5px #f9e7be,0 -5px #f9e7be,0 10px #778455;z-index:2}.park-flower-one{bottom:18px;left:9px}.park-flower-two{bottom:24px;right:11px;transform:scale(.75)}
.park-caption{position:absolute;z-index:2;bottom:-2px;left:0;right:0;margin:0;text-align:center;color:#4d573f;font-size:10px;letter-spacing:1px;line-height:22px;background:#dbe0bb}
@keyframes park-hop{0%,65%,100%{transform:translateY(0)}75%{transform:translateY(-4px)}}
@media(min-width:1000px){.park-dog{height:67px}.park-world{min-height:252px}}
@media(max-width:700px){.dog-park{grid-template-columns:1fr;gap:7px;min-height:0;margin-bottom:18px;padding:13px 11px 9px;box-shadow:3px 3px 0 #dfd4be}.park-copy{text-align:center}.park-kicker{font-size:9px;margin:0 0 2px;letter-spacing:1.5px}.park-copy h1{font-size:26px;letter-spacing:1px;line-height:1.5}.park-copy h1 br{display:none}.park-intro{font-size:12px;line-height:1.6;margin:3px 0 8px}.park-intro br{display:none}.park-choose{min-height:36px;font-size:11px;padding:5px 12px;gap:22px}.park-world{min-height:165px;padding:14px 3px 22px;max-width:420px;width:100%;justify-self:center}.park-pack{gap:0}.park-dog{height:43px}.park-dog:nth-child(6n+2),.park-dog:nth-child(6n+5){transform:translateY(-4px)}.park-sun{width:16px;height:16px;right:13px;top:3px}.park-cloud{transform:scale(.65);top:6px}.park-cloud-two{transform:scale(.5)}.park-caption{font-size:9px;line-height:20px;letter-spacing:.7px}.park-flower-one{bottom:19px;left:6px}.park-flower-two{bottom:21px;right:7px}}
@media(max-width:359px){.park-copy h1{font-size:23px}.park-intro{font-size:11px}.park-dog{height:37px}.park-world{min-height:149px}.dog-park{padding-left:8px;padding-right:8px}}
@media(prefers-reduced-motion:reduce){.park-dog:nth-child(4n+1) .park-sprite{animation:none}}
.park-picked{font-size:11px;line-height:1.6;min-height:18px;margin:0 0 8px;color:var(--cocoa-dark)}
.park-dog{padding:2px;border:2px solid transparent;border-radius:5px;background:transparent;cursor:pointer;touch-action:manipulation;box-shadow:none;color:var(--cocoa-dark)}
.park-dog .park-sprite{pointer-events:none}.park-dog:hover{background:#fff9df55;border-color:#8d846255}.park-dog[aria-pressed="true"]{background:#fffaf0cf;border-color:#65503e;box-shadow:2px 2px 0 #65503e44}.park-dog[aria-pressed="true"]:after{content:'✓';position:absolute;right:0;top:-5px;background:var(--cocoa-dark);color:#fffdf7;font:700 11px/15px sans-serif;width:15px;height:15px;z-index:3}.park-dog:focus-visible{outline:3px solid #65503e;outline-offset:2px}
@media(max-width:700px){.park-dog{height:48px;min-height:44px}.park-world{min-height:180px}.park-picked{font-size:10px;margin-bottom:6px}}
@media(max-width:359px){.park-pack{grid-template-columns:repeat(5,minmax(0,1fr))}.park-world{min-height:210px}.park-dog{height:44px}}
@media(max-width:700px){.park-choose{min-height:44px}}
/* Keep each 128 × 112 sprite frame at its native 8:7 ratio on every screen. */
.park-pack{max-width:780px;margin-inline:auto;justify-items:center}
.park-dog{box-sizing:border-box;width:min(100%,98px);height:auto;min-height:0;aspect-ratio:8/7}
@media(max-width:700px){.park-pack{max-width:420px}.park-dog{width:min(100%,56px);height:auto;min-height:0;aspect-ratio:8/7}}
@media(max-width:359px){.park-dog{width:min(100%,52px);height:auto;min-height:0;aspect-ratio:8/7}}