/* Pocket Artillery · game styles (tokens + HUD + screens). Core components live in core.css. */
:root{--bg:#4fb0ff;--load-bg:linear-gradient(180deg,#4fb0ff,#bfe6ff);--accent:#ff6a3d;--accent-d:#c2441f;--you:#ff6a3d;--bot:#4b6bff;--mint:#2fcf8f}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;pointer-events:none;z-index:5}
#hud .top{position:absolute;top:calc(8px + var(--sat));left:calc(10px + var(--sal));right:calc(10px + var(--sar));display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:start}
.pl{display:flex;align-items:center;gap:6px;min-width:0}.pl.r{flex-direction:row-reverse}
.face{flex:none;width:30px;height:30px;border-radius:50%;position:relative;box-shadow:0 3px 0 rgba(20,18,44,.25);background:var(--you)}
.face::before,.face::after{content:"";position:absolute;top:10px;width:6px;height:8px;border-radius:50%;background:#fff;box-shadow:inset 0 2px 0 var(--ink)}
.face::before{left:7px}.face::after{right:7px}
.face.bot{background:var(--bot)}
.hpw{flex:1;min-width:0;max-width:220px;display:grid;gap:3px}
.hp{height:14px;border-radius:8px;background:rgba(20,18,44,.45);border:2px solid var(--ink);overflow:hidden;position:relative}
.hp i{position:absolute;inset:0 auto 0 0;background:var(--mint);transition:width .2s}
.pl.r .hp i{inset:0 0 0 auto;background:var(--danger)}
.hp s{position:absolute;top:0;bottom:0;right:0;background:#7fdcff;opacity:.9}.pl.r .hp s{right:auto;left:0}
.pips{display:flex;gap:4px;min-height:10px}.pl.r .pips{justify-content:flex-end}
.pip{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.6);border:2px solid var(--ink)}
.pip.on.you{background:var(--you)}.pip.on.bot{background:var(--bot)}
.mid{display:grid;justify-items:center;gap:4px}
.chip.wind,.chip.timer{font-size:15px;padding:2px 10px}
.chip.wind .ico{color:var(--ink)}.chip.timer .ico{color:var(--gold)}
.chip.timer.late{opacity:.6}.chip.timer.late .ico{color:var(--muted)}
.wind .arr{display:inline-block;transition:transform .3s}
.rise{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:#fff;background:#2f8fe0;padding:1px 8px;border-radius:999px;animation:cg-breathe 1s infinite}
.rise.lava{background:#e0401c}
#floats{position:absolute;inset:0;overflow:hidden}
.ft{position:absolute;transform:translate(-50%,-50%);font-size:21px;color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;white-space:nowrap;animation:fup .9s ease-out forwards}
.ft.big{font-size:28px;color:var(--gold)}.ft.good{color:#9dffcf}.ft.me{color:#ffd0d6}
@keyframes fup{0%{opacity:0;margin-top:6px;transform:translate(-50%,-50%) scale(1.4)}20%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;margin-top:-44px}}
#msg{position:absolute;left:0;right:0;top:28%;text-align:center;font-size:clamp(40px,10vw,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}}
#edge{position:absolute;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;background:var(--bot);display:grid;place-items:center;color:#fff;font-size:12px;box-shadow:0 3px 0 rgba(20,18,44,.3)}
#edge::after{content:"";position:absolute;width:0;height:0;border:8px solid transparent;border-left-color:var(--bot);left:100%;top:50%;margin-top:-8px;transform-origin:-21px 50%;transform:rotate(var(--a,0deg))}
.act{position:absolute;bottom:calc(22px + var(--sab));width:88px;height:88px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--c) calc(var(--p,1)*1turn),rgba(20,18,44,.3) 0);box-shadow:0 5px 0 rgba(20,18,44,.3)}
.act::before{content:"";position:absolute;inset:6px;border-radius:50%;background:#fff}
.act .ico{position:relative;color:var(--c)}.act.cd .ico{opacity:.35}
#jumpB{left:calc(18px + var(--sal));--c:#8a5cff}
#fireB{right:calc(18px + var(--sar));--c:var(--you)}
#ammo{position:absolute;right:calc(92px + var(--sar));bottom:calc(92px + var(--sab));width:44px;height:44px;border-radius:50%;background:var(--gold);color:var(--ink);display:grid;place-items:center;box-shadow:0 3px 0 rgba(20,18,44,.3)}
#ammo.pop{animation:pop .4s cubic-bezier(.2,1.6,.4,1)}
#buffs{position:absolute;left:calc(12px + var(--sal));top:calc(68px + var(--sat));display:flex;gap:6px}
#buffs div{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 3px 0 rgba(20,18,44,.2)}
.hudbtn{top:calc(58px + var(--sat));pointer-events:auto}
#joy{position:absolute;width:110px;height:110px;margin:-55px 0 0 -55px;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:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:#fff;box-shadow:0 4px 0 rgba(20,18,44,.25)}
#joy.jump{border-color:#b49bff}#joy.jump i{background:#8a5cff}
.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));animation:pull 1.4s ease-in-out infinite}
#coachJ{left:calc(30px + var(--sal));bottom:calc(126px + var(--sab))}
#coachF{right:calc(30px + var(--sar));bottom:calc(126px + var(--sab))}
@keyframes pull{0%{transform:translate(0,0)}60%{transform:translate(-22px,26px)}100%{transform:translate(-22px,26px);opacity:0}}
#coachJ .hand{animation:walkjump 2.2s ease-in-out infinite}
@keyframes walkjump{0%{transform:translate(0,0)}25%{transform:translate(26px,0)}50%{transform:translate(-10px,0)}75%{transform:translate(14px,-34px)}100%{transform:translate(14px,-34px);opacity:0}}

/* ---------- home ---------- */
.home{background:linear-gradient(180deg,rgba(20,18,44,0) 40%,rgba(20,18,44,.35))}
.rot{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:#fff;background:rgba(20,18,44,.6);padding:4px 12px;border-radius:999px}

#skinPreview{width:120px;height:120px}
@media (prefers-reduced-motion:reduce){#msg.pop,#ammo.pop,.stars span,.lv.next,.rise{animation:none}}