#status{font-weight:600;min-height:1.5em;margin:6px 0}
.cd{position:absolute;inset:auto 0 0 0;height:5px;background:#ff5a5a;pointer-events:none}
.boost{box-shadow:inset 0 0 0 4px #33d6a6}
.boost::before{position:absolute;top:2px;right:4px;font-size:12px;font-weight:700;color:#0b6b52}
.boost.x::before{content:"+1"}.boost.g::before{content:"⇱"}
.charged .pc{filter:drop-shadow(0 0 6px #33d6a6)}
.pend{background-image:linear-gradient(#81b64c66,#81b64c66)!important}
#timer{height:8px;background:#3c3a37;border-radius:4px;overflow:hidden;width:100%;margin:0 auto}
#timer div{height:100%;background:var(--accent);width:100%}
a.back{color:var(--accent);text-decoration:none}

/* ---- animation layer (ockit.js + anim.js) ---- */
.ock-d{position:absolute;inset:0;pointer-events:none;z-index:1}
.ock-board .sq .pc{position:relative;z-index:2}
@media (update:none){.ock-board .ock-d,.ock-board .ock-d *,.ock-board .ock-a,.ock-board .ock-a .pc{animation:none!important;transition:none!important}}
.ock-resting .cd{opacity:0}
.ock-resting .pc{opacity:.72}
.ock-cool{display:flex;align-items:center;justify-content:center}
.ock-cool svg{width:88%;height:88%;transform:rotate(-90deg);overflow:visible}
.ock-cool circle{fill:none;stroke-width:4}
.ock-cool .bg{stroke:#00000026}
.ock-cool .fg{stroke:#ff9600;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0;animation:ockDrain 1s linear forwards}
.ock-cw .ock-cool .fg{stroke:#58cc02}
@keyframes ockDrain{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}
.sq.ock-ready .pc{animation:ockReady .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes ockReady{0%{transform:scale(.8)}35%{transform:translateY(-14%) scale(.92,1.12)}65%{transform:scale(1.12,.9)}100%{transform:none}}
@media (update:none){.ock-cool .fg{animation:none}.sq.ock-ready .pc{animation:none}}