/* Bump Brawl · game styles. Shared menus/components are in core.css. */
:root{--bg:#5fb8ff;--load-bg:linear-gradient(180deg,#5fb8ff,#cdeeff);--accent:#ff5a4f;--accent-d:#c4362c;--you:#ff5a4f}
.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:10px;background:var(--panel);padding:5px 14px;border-radius:999px;box-shadow:0 4px 0 rgba(20,18,44,.2)}
.side{display:flex;align-items:center;gap:4px}
.side.out{opacity:.35}
.face{width:28px;height:28px;border-radius:50%;position:relative;box-shadow:0 2px 0 rgba(20,18,44,.25);flex:none}
.face::before,.face::after{content:"";position:absolute;top:8px;width:6px;height:8px;border-radius:50%;background:#fff;box-shadow:inset 0 2px 0 var(--ink)}
.face::before{left:6px}.face::after{right:6px}
.face.me{outline:3px solid var(--ink);outline-offset:1px}
.pips{display:flex;gap:3px}.pip{width:9px;height:9px;border-radius:50%;background:rgba(20,18,44,.15);border:2px solid var(--ink)}.pip.on{background:var(--gold)}
#round{position:absolute;top:calc(56px + var(--sat));left:50%;transform:translateX(-50%);font-size:13px;color:#fff;background:rgba(20,18,44,.55);padding:1px 10px;border-radius:999px}
#buffs{position:absolute;left:calc(12px + var(--sal));top:calc(12px + var(--sat));display:flex;gap:6px}
#buffs div{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 3px 0 rgba(20,18,44,.2)}
#floats{position:absolute;inset:0;overflow:hidden}
.ft{position:absolute;transform:translate(-50%,-50%);font-size:20px;color:#fff;-webkit-text-stroke:2.5px var(--ink);paint-order:stroke fill;white-space:nowrap;animation:fup .8s ease-out forwards}
.ft.gold{color:var(--gold)}.ft.bad{color:#ffd0d6}
@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:-40px}}
#msg{position:absolute;left:0;right:0;top:28%;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}}
#joy{position:absolute;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;background:rgba(255,255,255,.22);border:3px solid rgba(255,255,255,.8);pointer-events:none}
#joy i{position:absolute;left:50%;top:50%;width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;background:#fff;box-shadow:0 4px 0 rgba(20,18,44,.25)}
#dashB{position:absolute;right:calc(22px + var(--sar));bottom:calc(28px + var(--sab));width:104px;height:104px;border-radius:50%;border:0;pointer-events:auto;cursor:pointer;color:#fff;
  background:conic-gradient(var(--you) calc(var(--p,1)*1turn),rgba(20,18,44,.35) 0);box-shadow:0 6px 0 rgba(20,18,44,.3);display:grid;place-items:center;touch-action:none}
#dashB::before{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--you);filter:brightness(.92)}
#dashB .ico{position:relative}
#dashB.cd::before{background:#8a8fae}
#dashB.bolt::before{background:#ffc23a}#dashB.bolt{box-shadow:0 0 0 6px rgba(255,194,58,.5),0 6px 0 rgba(20,18,44,.3)}
#dashB:active{transform:translateY(3px)}
.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:16%;bottom:calc(140px + var(--sab))}#coachMove .hand{animation:cdrag 1.4s ease-in-out infinite}
#coachDash{right:calc(28px + var(--sar));bottom:calc(150px + var(--sab))}#coachDash .hand{animation:tap 1s ease-in-out infinite}
@keyframes cdrag{0%,100%{transform:translate(-26px,8px)}50%{transform:translate(26px,-8px)}}
@keyframes tap{50%{transform:translateY(10px) scale(.9)}}
.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}
.final{gap:10px;font-size:22px;padding:6px 14px}
.final .rk{display:flex;align-items:center;gap:6px}.final .rk b{font-size:26px}
@media (prefers-reduced-motion:reduce){#msg.pop{animation:none}}