#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-echo{border-radius:50%}
.ock-echo::before{content:"";position:absolute;inset:12%;border-radius:50%;border:3px dashed var(--ec,#58cc02);opacity:.9}
.ock-echo .pc{animation:ockEcho 2.4s ease-in-out infinite}
@keyframes ockEcho{50%{transform:translateY(-5%)}}
.sq.ock-one::after{content:"";position:absolute;top:7%;left:7%;width:20%;height:20%;border-radius:50%;z-index:3;pointer-events:none;background:#ffc800;border:2px solid #fff;box-shadow:0 2px 0 #e0a800;animation:ockDot .8s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes ockDot{0%{transform:scale(0)}30%{transform:scale(1.25)}45%{transform:scale(.92)}60%,80%{transform:scale(1);opacity:1}100%{transform:scale(.6);opacity:0}}
@media (update:none){.ock-echo .pc,.sq.ock-one::after{animation:none}}