.sq .tag{position:absolute;top:2px;right:3px;font-size:12px;font-weight:700;line-height:1;padding:1px 3px;border-radius:4px;background:#c0392b;color:#fff;pointer-events:none}
.sq.frz{box-shadow:inset 0 0 0 4px #5fb7ffcc}
.sq.boom{background-image:radial-gradient(#ff8c1acc,transparent 70%)}
#info{color:var(--muted);font-size:.9rem;min-height:1.2em}
a.back{color:var(--accent);text-decoration:none}
button:disabled{opacity:.4;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,.ock-board .ock-a::before,.ock-board .ock-a::after{animation:none!important;transition:none!important}}
.sq.boom{background-image:none!important}
.sq.boom::after{content:"";position:absolute;inset:14%;pointer-events:none;z-index:1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 3l4 9 9-3-4 9 8 4-9 4 3 9-9-4-4 9-3-9-9 3 4-8-8-5 9-3-3-9 9 4z' fill='%23ff9600' fill-opacity='.55' stroke='%23e07b00' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M20 12l-3 6 5 3-4 7M22 21l6-2' fill='none' stroke='%233c3c3c' stroke-opacity='.55' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.sq.ock-blast .pc{animation:ockBlastPc .5s cubic-bezier(.34,1.56,.64,1) var(--ock-dl,0ms) both}
@keyframes ockBlastPc{0%{transform:none}30%{transform:scale(1.15,.85)}100%{transform:none}}
.sq.ock-blast::before{content:"";position:absolute;inset:8%;z-index:3;pointer-events:none;border-radius:28%;background:#ffc800;border:3px solid #ff9600;animation:ockFlash .45s cubic-bezier(.34,1.56,.64,1) var(--ock-dl,0ms) both}
@keyframes ockFlash{0%{transform:scale(.2);opacity:1}45%{transform:scale(1.05);opacity:.9}100%{transform:scale(.9);opacity:0}}
.sq .tag{z-index:4;font:800 12px/1 system-ui,sans-serif;padding:2px 5px;border-radius:99px;background:#3c3c3c;border:2px solid #fff;box-shadow:0 2px 0 #00000055;transition:background .3s}
.sq.ock-crit .tag{background:#ff4b4b}
.sq.ock-tick .tag{animation:ockCount .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes ockCount{0%{transform:scale(1.8)}40%{transform:scale(.85,1.15)}100%{transform:none}}
.ock-bombi{inset:auto auto 4% 4%;width:36%;height:36%;z-index:3}
.ock-bombi svg{width:100%;height:100%;display:block;overflow:visible;transform-origin:50% 90%;animation:ockTickle var(--pulse,1s) ease-in-out infinite}
.ock-bombi .spk{transform-box:fill-box;transform-origin:center;animation:ockSizzle .3s ease-in-out infinite alternate}
.sq.ock-crit .ock-bombi .body{fill:#ff4b4b}
@keyframes ockTickle{0%,100%{transform:scale(1)}50%{transform:scale(1.1,.92)}}
@keyframes ockSizzle{from{transform:scale(.7) rotate(0)}to{transform:scale(1.2) rotate(35deg)}}