.back{color:var(--accent);text-decoration:none;font-weight:600}
.cards{display:flex;gap:6px;flex-wrap:wrap}
.cards button{flex:1;min-width:70px;font-size:.85rem}
.cards button.armed{outline:3px solid var(--sel)}
.cards button:disabled{opacity:.35;cursor:default}
.sq.boom{background-image:radial-gradient(#ff7a1acc,transparent 75%)!important}
.sq.shield::before{content:"🛡";position:absolute;top:1px;right:3px;font-size:14px}
.sq.portal{box-shadow:inset 0 0 0 4px var(--pc,#81b64c)}
.sq .plab{position:absolute;top:1px;left:3px;font-size:11px;font-weight:700;color:var(--pc)}
.die{font-size:2.4rem;text-align:center;line-height:1}
.small{font-size:.85rem;color:var(--muted)}

/* ---- 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-vortex{display:flex;align-items:center;justify-content:center}
.ock-vortex svg{width:92%;height:92%;overflow:visible}
.ock-vortex .rim{fill:var(--pc,#ce82ff);filter:brightness(.7)}
.ock-vortex .face{fill:var(--pc,#ce82ff);opacity:.9}
.ock-vortex .sw{transform-origin:20px 20px;animation:ockSwirl 3s linear infinite;animation-delay:var(--ock-t,0s)}
.ock-vortex .sw path{fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;opacity:.9}
.ock-vortex .sw path.t{stroke-width:2.4;opacity:.6}
.ock-vortex .core{fill:#fff;transform-origin:20px 20px;animation:ockCore 2.2s ease-in-out infinite;animation-delay:var(--ock-t,0s)}
.ock-board .sq.portal{box-shadow:none}
.ock-board .sq.portal.boom{background-image:none!important}
@keyframes ockSwirl{to{transform:rotate(360deg)}}
@keyframes ockCore{50%{transform:scale(1.3)}}
.sq.ock-gulp .ock-vortex svg{animation:ockGulp .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes ockGulp{0%{transform:scale(1)}30%{transform:scale(1.25,.85) rotate(-40deg)}60%{transform:scale(.85,1.1) rotate(-80deg)}100%{transform:none}}
.sq.ock-spit .ock-vortex svg{animation:ockSpit .8s cubic-bezier(.34,1.56,.64,1) .35s both}
@keyframes ockSpit{0%{transform:scale(.6)}40%{transform:scale(1.3,.8)}70%{transform:scale(.92,1.08)}100%{transform:none}}
.sq .plab{z-index:3;color:#fff;background:var(--pc);border-radius:6px;padding:0 3px;line-height:1.3;box-shadow:0 2px 0 #0003}
@media (update:none){.ock-vortex *,.ock-vortex svg{animation:none!important}}
.ock-vortex svg{animation:ockPortalIn .55s cubic-bezier(.34,1.56,.64,1) both}
@keyframes ockPortalIn{0%{transform:scale(0) rotate(-200deg);opacity:0}60%{transform:scale(1.15) rotate(10deg);opacity:1}100%{transform:none}}
.sq.wentry{box-shadow:inset 0 0 0 3px var(--pc)}
.ock-vortex.ock-still svg{animation:none}