#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}}
#timer{position:relative;height:16px;border-radius:10px;background:#e5e5e5;box-shadow:inset 0 3px 0 #0000001a;overflow:hidden;transform-origin:50% 50%}
#timer div{position:relative;border-radius:10px;background:#58cc02!important;box-shadow:inset 0 -4px 0 #46a302;transition:background-color .2s}
#timer div::after{content:"";position:absolute;left:8px;right:8px;top:3px;height:4px;border-radius:3px;background:#ffffff59}
#timer.ock-mid div{background:#ffc800!important;box-shadow:inset 0 -4px 0 #e0a800}
#timer.ock-low div{background:#ff4b4b!important;box-shadow:inset 0 -4px 0 #d33131}
#timer.ock-low{animation:ockTimerBeat .5s cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes ockTimerBeat{0%,100%{transform:none}30%{transform:scale(1.03,1.25) rotate(-.6deg)}60%{transform:scale(.99,.95) rotate(.4deg)}}
@media (update:none){#timer.ock-low{animation:none!important}}

/* layout: status + timer bar sit above the board, so the board leaves room for both and never wraps beside them */
.oc-center{flex-wrap:nowrap!important}
.oc-center #board{width:min(100cqw,100cqh - 96px)!important}
.oc-center #timer{width:min(100cqw,100cqh - 96px);flex:none}