.board{display:grid;border-radius:6px;overflow:hidden;box-shadow:0 8px 30px #0008}
.board .sq{aspect-ratio:1}
.pc.z{color:#7fdc5a;text-shadow:0 0 2px #000,0 0 1px #000}
.back{color:var(--accent)}
.row{display:flex;gap:8px;flex-wrap:wrap}
.row button{flex:1}
.small{font-size:.85rem;color:var(--muted)}
.choices{display:flex;flex-direction:column;gap:8px}
.choices button{text-align:left}
button:disabled{opacity:.45;cursor:default}

/* ---- 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-zed .pc{text-shadow:0 2px 0 #46a302,0 0 1px #2b6400,0 0 1px #2b6400;animation:ockShamble 2.4s cubic-bezier(.45,0,.55,1) infinite;animation-delay:var(--zd,0s);transform-origin:50% 90%}
@keyframes ockShamble{0%,100%{transform:rotate(-4deg) scale(1,1)}25%{transform:rotate(1deg) scale(1.03,.97)}50%{transform:rotate(4deg) scale(1,1)}75%{transform:rotate(0) scale(.98,1.03)}}
.ock-miasma{overflow:hidden}
.ock-miasma::before{content:"";position:absolute;left:18%;right:18%;bottom:7%;height:11%;border-radius:50%;background:#58cc02;opacity:.35}
.ock-miasma i{position:absolute;bottom:12%;width:12%;height:12%;border-radius:50%;background:#89e219;border:2px solid #46a302;box-sizing:border-box;opacity:0;animation:ockSpore 2.8s cubic-bezier(.4,0,.6,1) infinite}
.ock-miasma i:nth-child(1){left:18%;animation-delay:-.3s}.ock-miasma i:nth-child(2){left:50%;animation-delay:-1.3s;width:9%;height:9%}.ock-miasma i:nth-child(3){left:72%;animation-delay:-2.1s}
@keyframes ockSpore{0%{transform:translateY(0) scale(.3);opacity:0}15%{transform:translateY(-40%) scale(1.15);opacity:1}25%{transform:translateY(-80%) scale(1)}85%{opacity:1;transform:translateY(-420%) scale(1)}100%{transform:translateY(-470%) scale(1.5);opacity:0}}
.sq.ock-turned .pc{animation:ockTurn .9s cubic-bezier(.34,1.56,.64,1)}
@keyframes ockTurn{0%{transform:scale(.6,1.3) rotate(0)}20%{transform:scale(1.3,.75) rotate(-14deg)}40%{transform:scale(.9,1.12) rotate(10deg)}60%{transform:scale(1.06,.95) rotate(-6deg)}80%{transform:rotate(3deg)}100%{transform:none}}
.sq.ock-ripple::after{content:"";position:absolute;inset:8%;pointer-events:none;z-index:3;border-radius:22%;background:#89e219;box-shadow:inset 0 -4px 0 #58cc02;opacity:0;animation:ockRipple .65s cubic-bezier(.34,1.56,.64,1) var(--ock-dl,0ms) both}
@keyframes ockRipple{0%{opacity:0;transform:scale(.3)}35%{opacity:.55;transform:scale(1.05)}100%{opacity:0;transform:scale(.9)}}
@media (update:none){.sq.ock-zed .pc,.sq.ock-turned .pc,.ock-miasma i,.sq.ock-ripple::after{animation:none!important}.ock-miasma i{opacity:0}}