.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:none!important;box-shadow:inset 0 0 0 4px #58cc02}
.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}}
.sq.ock-recruit::after{content:"";position:absolute;inset:10%;border-radius:50%;pointer-events:none;z-index:1;background:#58cc02;box-shadow:0 4px 0 #46a302;animation:ockRecruit 1.2s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes ockRecruit{0%,30%{transform:scale(0);opacity:1}48%{transform:scale(1.1)}60%{transform:scale(1);opacity:.9}80%{opacity:.9;transform:scale(1)}100%{transform:scale(.6);opacity:0}}
@media (update:none){.sq.ock-recruit::after{animation:none!important;display:none}}