/* Splat Arena · game styles (tokens + HUD). Shared menus/components are in core.css. */
:root{--bg:#4fae5c;--load-bg:linear-gradient(180deg,#7ccf6a,#3e9a52);--accent:#ff5a3c;--accent-d:#c63a20;--you:#ff5a3c;--bot:#3e64ff;--mint:#2fcf8f}
.stage canvas{display:block;width:100%;height:100%;touch-action:none}
#hud{position:absolute;inset:0;pointer-events:none;z-index:5}
.score{position:absolute;top:calc(10px + var(--sat));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;background:var(--panel);padding:4px 14px 2px;border-radius:999px;box-shadow:0 4px 0 rgba(20,18,44,.2);font-variant-numeric:tabular-nums}
.score .k{font-size:26px;min-width:20px;text-align:center}.score .k.you{color:var(--you)}.score .k.bot{color:var(--bot)}
.score .goal{font-size:13px;color:var(--muted);margin-left:-6px}
#timer{font-size:15px;color:var(--muted);min-width:44px;text-align:center}#timer.sd{color:var(--danger)}
.dot{width:14px;height:14px;border-radius:50%;background:var(--you)}.dot.bot{background:var(--bot)}
.final .dot{width:22px;height:22px}
#bars{position:absolute;inset:0;overflow:hidden}
.bar{position:absolute;width:64px;margin-left:-32px;display:grid;gap:2px;justify-items:center}
.bar .hp{width:100%;height:9px;border-radius:5px;background:rgba(20,18,44,.55);border:2px solid var(--ink);overflow:hidden;box-sizing:content-box;position:relative}
.bar .hp i{display:block;height:100%;background:var(--mint);transition:width .1s linear}
.bar .hp s{position:absolute;top:0;bottom:0;right:0;background:#6fd3ff;opacity:.9}
.bar.bot .hp i{background:var(--danger)}
.bar .num{font-size:13px;line-height:1;color:#fff;-webkit-text-stroke:2.5px var(--ink);paint-order:stroke fill}
.ammo{display:flex;gap:2px;width:100%}.ammo i{flex:1;height:5px;border-radius:2px;background:rgba(20,18,44,.45);overflow:hidden;position:relative}.ammo i b{position:absolute;inset:0;width:0;background:var(--gold)}
#floats{position:absolute;inset:0;overflow:hidden}
.ft{position:absolute;transform:translate(-50%,-50%);font-size:19px;color:#fff;-webkit-text-stroke:2.5px var(--ink);paint-order:stroke fill;white-space:nowrap;animation:fup .7s ease-out forwards}
.ft.hurt{color:#ffd0d6}.ft.heal{color:#9dffcf}.ft.gold{color:var(--gold)}
@keyframes fup{0%{opacity:0;margin-top:6px;transform:translate(-50%,-50%) scale(1.3)}20%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;margin-top:-36px}}
#msg{position:absolute;left:0;right:0;top:30%;text-align:center;font-size:clamp(40px,11vw,64px);line-height:1;color:#fff;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;text-shadow:0 6px 0 var(--ink)}
#msg small{display:block;font-size:22px;-webkit-text-stroke:2px var(--ink);text-shadow:0 3px 0 var(--ink);margin-top:6px}
#msg.pop{animation:pop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{0%{transform:scale(.3);opacity:0}100%{transform:none;opacity:1}}
.stick{position:absolute;border-radius:50%;pointer-events:none}
#move{width:118px;height:118px;margin:-59px 0 0 -59px;background:rgba(255,255,255,.22);border:3px solid rgba(255,255,255,.75)}
#move i,#aim i,#roll i{position:absolute;left:50%;top:50%;border-radius:50%;background:#fff;box-shadow:0 4px 0 rgba(20,18,44,.25)}
#move i{width:50px;height:50px;margin:-25px 0 0 -25px}
#aim{right:calc(18px + var(--sar));bottom:calc(30px + var(--sab));width:122px;height:122px;background:rgba(255,90,60,.28);border:3px solid rgba(255,255,255,.8)}
#aim i{width:54px;height:54px;margin:-27px 0 0 -27px;background:var(--you);display:grid;place-items:center;color:#fff}
#roll{right:calc(152px + var(--sar));bottom:calc(36px + var(--sab));width:76px;height:76px;background:conic-gradient(#fff calc(var(--p,1)*1turn),rgba(20,18,44,.35) 0);border:3px solid rgba(255,255,255,.8)}
#roll i{width:56px;height:56px;margin:-28px 0 0 -28px;background:var(--ink);color:#fff;display:grid;place-items:center}
#roll.cd i{background:#5d6688;color:#c9cde0}
#wslot{position:absolute;right:calc(42px + var(--sar));bottom:calc(160px + var(--sab));display:flex;align-items:center;gap:4px;background:var(--panel);padding:3px 10px 3px 6px;border-radius:999px;box-shadow:0 3px 0 rgba(20,18,44,.2);font-size:16px}
#wslot .ic{color:var(--you)}#wslot.special{background:var(--gold)}#wslot.special .ic{color:var(--ink)}
#wslot.pop{animation:pop .4s cubic-bezier(.2,1.6,.4,1)}
#buffs{position:absolute;left:calc(12px + var(--sal));top:calc(62px + var(--sat));display:flex;gap:6px}
#buffs div{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--gold) calc(var(--p)*1turn),rgba(20,18,44,.3) 0);position:relative}
#buffs div::before{content:"";position:absolute;inset:3px;border-radius:50%;background:#fff}#buffs svg{position:relative}
.hudbtn{top:calc(10px + var(--sat));pointer-events:auto}
.coach{position:absolute;display:grid;justify-items:center;gap:4px;pointer-events:none}
.coach b{font-size:15px;color:#fff;background:rgba(20,18,44,.72);padding:2px 12px;border-radius:999px;white-space:nowrap}
.coach .hand{color:#fff;filter:drop-shadow(0 3px 0 rgba(20,18,44,.5))}
#coachMove{left:18%;bottom:calc(150px + var(--sab))}#coachMove .hand{animation:cdrag 1.4s ease-in-out infinite}
#coachAim{right:calc(32px + var(--sar));bottom:calc(166px + var(--sab))}#coachAim .hand{animation:caim 1.4s ease-in-out infinite}
#coachLoot{left:0;right:0;top:40%}
@keyframes cdrag{0%,100%{transform:translate(-26px,8px)}50%{transform:translate(26px,-8px)}}
@keyframes caim{0%{transform:translate(0,0)}60%{transform:translate(-30px,-30px)}100%{transform:translate(-30px,-30px);opacity:0}}
.home{background:linear-gradient(180deg,rgba(20,18,44,0) 40%,rgba(20,18,44,.35))}
.skin-name{margin:0;font-size:24px;--sw:3px;--sd:3px}
@media (prefers-reduced-motion:reduce){#msg.pop,#wslot.pop{animation:none}}