.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-die-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ock-dice{position:relative;width:64px;height:64px;margin:10px auto 18px;perspective:420px;transform-origin:50% 100%}
.ock-dice .cube{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(-18deg) rotateY(24deg);transition:transform .95s cubic-bezier(.3,1.18,.45,1)}
.ock-dice .f{position:absolute;inset:0;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 3px #e5e5e5,inset 0 -6px 0 #e5e5e5;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:9px 9px 11px;backface-visibility:hidden}
.ock-dice .f i{display:block;width:64%;height:64%;margin:auto;border-radius:50%}
.ock-dice .f i.on{background:#3c3c3c;box-shadow:inset 0 -3px 0 #1f1f1f}
.ock-dice .f1 i.on{background:#ff4b4b;box-shadow:inset 0 -4px 0 #d33131;width:84%;height:84%}
.ock-dice .f1{transform:translateZ(32px)}.ock-dice .f6{transform:rotateY(180deg) translateZ(32px)}
.ock-dice .f2{transform:rotateY(90deg) translateZ(32px)}.ock-dice .f5{transform:rotateY(-90deg) translateZ(32px)}
.ock-dice .f3{transform:rotateX(90deg) translateZ(32px)}.ock-dice .f4{transform:rotateX(-90deg) translateZ(32px)}
.ock-dice .core{position:absolute;inset:2px;border-radius:8px;background:#e5e5e5;backface-visibility:visible}.ock-dice .cx{transform:rotateY(90deg)}.ock-dice .cy{transform:rotateX(90deg)}
.ock-dice .shadow{position:absolute;left:14%;right:14%;bottom:-16px;height:9px;border-radius:50%;background:#0000002e;transform-origin:50% 50%}
.sq.ock-hop .pc{animation:ockHop .6s cubic-bezier(.34,1.56,.64,1) var(--ock-dl,0ms) both}
@keyframes ockHop{0%{transform:none}15%{transform:translateY(4%) scale(1.12,.86)}45%{transform:translateY(-26%) scale(.92,1.1)}72%{transform:translateY(0) scale(1.12,.88)}86%{transform:scale(.97,1.04)}100%{transform:none}}
.sq.ock-hop::after{content:"";position:absolute;left:22%;right:22%;bottom:8%;height:9%;border-radius:50%;background:#58cc02;box-shadow:0 2px 0 #46a302;z-index:1;pointer-events:none;animation:ockHopPad .6s cubic-bezier(.34,1.56,.64,1) var(--ock-dl,0ms) both}
@keyframes ockHopPad{0%{transform:scale(0);opacity:1}40%{transform:scale(1.15);opacity:1}100%{transform:scale(1);opacity:0}}
@media (update:none){.ock-dice .cube{transition:none}.sq.ock-hop .pc,.sq.ock-hop::after{animation:none}}
.ock-die2{position:relative;width:62px;height:62px;margin:12px auto 20px}
.ock-die2 .body{position:absolute;inset:0;transform-origin:50% 100%}
.ock-die2 .face{position:absolute;inset:0;border-radius:14px;background:#fafafa;box-shadow:inset 0 -5px 0 #d9d9d9,0 2px 0 #bdbdbd;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:9px 9px 12px}
.ock-die2 .face i{display:block;width:13px;height:13px;margin:auto;border-radius:50%}
.ock-die2 .face i.on{background:#2b2b2b;box-shadow:inset 0 -2px 0 #000}
.ock-die2 .face.f1 i.on{background:#e53935;box-shadow:inset 0 -2px 0 #a31d1a;width:17px;height:17px}
.ock-die2 .shadow{position:absolute;left:12%;right:12%;bottom:-12px;height:8px;border-radius:50%;background:#0000003a}
.ock-die3{width:120px;height:120px;margin:0 auto 4px}.ock-die3 canvas{width:120px;height:120px;display:block}