/* The Arena tab (Oct 15 night): goose fights to the left of Home, so Home sits in the middle of the bar.
   Seven tabs now (Hub, Bog Bar, Arena, Home, Food, Shop, Settings), still equal width, edge to edge. */
.tabs{grid-template-columns:repeat(7,1fr)}
@media (max-width:420px){.tabs button{font-size:10px;padding:6px 1px}.tabs button svg{width:22px;height:22px}}
@media (max-width:340px){.tabs button{font-size:9px}.tabs button svg{width:20px;height:20px}}

/* the pen inside the arena: a dusk sky over a plank fence, and a sandy ring */
.pen[data-room=arena]{transition:background .3s;background:linear-gradient(#e6c9a0 0 30%,#a57c52 30% 58%,#5d4c3a 58% calc(58% + 2px),#d9bf8a calc(58% + 2px) 100%)}
.pen[data-room=arena]::before{left:0;right:0;top:30%;height:28%;
 background:repeating-linear-gradient(90deg,transparent 0 22px,rgba(29,27,24,.45) 22px 24px)}
.pen[data-room=arena] .asign{left:50%;top:3px;margin-left:-41px}
.pen[data-room=arena] .ahay{left:2%;bottom:2px;width:calc(46px * var(--fs));height:calc(30px * var(--fs))}
.pen[data-room=arena] .abucket{right:2%;bottom:2px;width:calc(28px * var(--fs));height:calc(30px * var(--fs))}

/* a fight: health bars on top, the goose waddling in from the right */
.afight{position:absolute;inset:0;pointer-events:none;z-index:3}
.abars{position:absolute;left:6px;right:6px;top:30px;display:flex;justify-content:space-between;gap:10px}
.abar{flex:1;max-width:45%;font:700 10px/1.1 Georgia,serif;color:#1d1b18}
.abar.goose{text-align:right}
.abar b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.abar i{display:block;height:7px;border:1.4px solid #1d1b18;border-radius:4px;background:#f5f0dc;overflow:hidden;margin-top:2px}
.abar s{display:block;height:100%;width:100%;background:#6f8f3a;transition:width .3s}
.abar.goose s{background:#b8473a;margin-left:auto}
.agoose{position:absolute;bottom:4px;left:104%;width:64px;height:58px;margin-left:-32px;transition:left .9s ease-out}
.agoose.gosling{width:44px;height:40px;margin-left:-22px}
.agoose.goose_king{width:78px;height:70px;margin-left:-39px}
.agoose svg{width:100%;height:100%;overflow:visible}
.agoose.in{left:66%}
.agoose.in .gleg{animation:gstep .3s ease-in-out 3 alternate}
.agoose.apeck svg{animation:gpeck .32s ease-in-out}
.agoose.ahurt svg{animation:ahit .4s ease-in-out}
.agoose.flee{left:115%;transition:left 1.2s ease-in;opacity:.4}
.agoose.flee svg{transform:scaleX(-1)}
.agoose.strut svg{animation:gstrut .4s ease-in-out 4 alternate}
.ahonk{position:absolute;bottom:100%;right:30%;font:700 11px/1 Georgia,serif;background:#fff;border:1.4px solid #1d1b18;border-radius:8px;padding:3px 5px;white-space:nowrap}
.ahonk[hidden]{display:none}
.walker.alunge{translate:16px 0;transition:left 0s,translate .15s}
.walker.ahurt .pengob{animation:ahit .4s ease-in-out}
.walker.adown .pengob{transform-origin:50% 100%;rotate:-80deg;transition:rotate .3s}
.apop{position:absolute;bottom:62px;font:800 14px/1 Georgia,serif;color:#b8473a;transform:translateX(-50%);animation:apop .9s ease-out forwards;text-shadow:1px 1px 0 #f5f0dc}
.apop.crit{color:#e0782f;font-size:16px}
.apop.miss{color:#5d4c3a;font-size:12px}
.apop.prize{color:#6f8f3a;font-size:15px;bottom:70px}
@keyframes gstep{to{translate:0 -2px}}
@keyframes gpeck{50%{translate:-22px 4px;rotate:-12deg}}
@keyframes gstrut{to{translate:0 -4px;rotate:4deg}}
@keyframes ahit{25%{translate:-4px 0}50%{translate:4px 0;filter:brightness(1.6)}75%{translate:-2px 0}}
@keyframes apop{from{opacity:1;translate:0 0}to{opacity:0;translate:0 -22px}}
@media (prefers-reduced-motion:reduce){.agoose,.agoose svg,.apop{animation:none!important;transition:none!important}}

/* the Shop's weapons: a little picture of each in its chip */
.lab.shopsec{flex-basis:100%;margin-top:4px}
.chip.weapon{display:inline-flex;align-items:center;gap:4px}
.chip .wico svg{display:block}