/* Native 32 x 40 sprite, always displayed at an integer 3x scale. */
.mascot-zone{display:flex;justify-content:flex-end;margin-top:28px;padding-top:84px}
.mascot-perch{position:relative;width:260px;max-width:100%;height:64px;border-top:3px solid var(--border)}
.mascot-perch::before,.mascot-perch::after{content:"";position:absolute;top:-5px;width:5px;height:9px;background:var(--green)}
.mascot-perch::before{left:0}.mascot-perch::after{right:0}
#perch-note{position:absolute;top:44px;left:0;right:0;color:var(--muted);font-size:8px;letter-spacing:.3px;text-align:right}
#parrot{position:absolute;top:-81px;right:20px;width:96px;height:120px;min-height:0;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;z-index:3;touch-action:manipulation}
#parrot[hidden]{display:none}
#parrot:hover,#parrot:disabled{background:transparent;opacity:1}
#parrot:focus-visible{outline:1px dashed var(--green);outline-offset:5px}
#parrot canvas{display:block;width:96px;height:120px;image-rendering:pixelated;transform:scaleX(-1)}
#parrot[data-state=leaving]{pointer-events:none}
#parrot[data-state=excursion]{z-index:5}
#parrot[data-location=pause],#parrot[data-location=play]{clip-path:polygon(0 0,100% 0,100% 100%,75% 100%,75% 65%,0 65%)}
#bird-food{position:absolute;right:73px;top:-20px;width:30px;height:25px;min-height:0;padding:0;border:0;background:transparent;z-index:4}
#bird-food::before{content:"";position:absolute;left:4px;top:10px;width:22px;height:12px;background:#b69a6f;box-shadow:inset 3px 0 #e0c99b,inset -3px -3px #68583e;clip-path:polygon(0 0,100% 0,86% 100%,14% 100%)}
.bird-seed{position:absolute;left:5px;top:7px;width:20px;height:5px;background:#e8d284;box-shadow:inset 4px 0 #806237,inset -4px 0 #b9a455}
#bird-food[hidden]{display:none}
#bird-food:disabled{opacity:1}
.bird-guest{position:absolute;width:96px;height:120px;image-rendering:pixelated;pointer-events:none;z-index:4}
.owl-rat{position:absolute;top:-24px;width:48px;height:24px;image-rendering:pixelated;pointer-events:none;z-index:4}
body{overflow-x:clip}
@media(max-width:650px){.mascot-zone{margin-top:20px}.mascot-perch{width:240px}}

/* The bird owns the right-hand grid cell beneath Signal Status. */
.modules{grid-template-areas:"player signal" "player bird";grid-template-rows:auto 1fr}
.modules>section{grid-area:player}
.modules>aside{grid-area:signal}
.modules>.mascot-zone{grid-area:bird;margin-top:0;align-self:end;justify-content:center}
@media(max-width:650px){.modules{grid-template-areas:"player" "signal" "bird";grid-template-rows:auto auto auto}}