.hp{position:absolute;top:1px;right:2px;font-size:max(8px,1.4vw);color:#e33;text-shadow:0 0 2px #000;letter-spacing:-1px}
@media(min-width:600px){.hp{font-size:9px}}
.sq.lava{background:radial-gradient(#ffb020,#c2260c 70%,#5a0d00)!important;cursor:not-allowed}
.sq.crack{box-shadow:inset 0 0 0 4px #ff7a00}
.sq.shot{background-image:radial-gradient(#ff3b3bcc,transparent 70%)}
.sq.icy{filter:saturate(.4) brightness(1.15) hue-rotate(160deg)}
.sq.frost{background:#cfe9ff!important;box-shadow:inset 0 0 0 3px #7ab8ff}
.sq.bolt::before{content:"⚡";position:absolute;top:0;left:2px;font-size:14px}
#info{font-size:.9rem;color:var(--muted);min-height:2.6em}
.rules{max-width:720px;margin:0 auto 12px;padding:0 16px;color:var(--muted);font-size:.95rem}
a.back{color:var(--accent);display:inline-block;margin:10px 16px 0}

/* ---- 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-magma svg,.ock-crackle svg{display:block;width:100%;height:100%}
.ock-magma .lip{fill:#e03c00}
.ock-magma .pool{fill:#ff7a00}
.ock-magma .blob{fill:#ffc800;transform-box:fill-box;transform-origin:50% 50%;animation:ockBlob 3s ease-in-out infinite;animation-delay:var(--sd,0s)}
.ock-magma .blob.b2{fill:#ffa000;animation-duration:3.6s}
.ock-magma .shine{stroke:#fff3b0;stroke-width:2.4;stroke-linecap:round;opacity:.85}
.ock-magma .bub{fill:#ffc800;stroke:#e03c00;stroke-width:1.2;transform-box:fill-box;transform-origin:50% 100%;opacity:0;animation:ockBubble 2.6s cubic-bezier(.34,1.56,.64,1) infinite;animation-delay:var(--sd,0s)}
.ock-magma .bub.c2{animation-duration:2.1s;animation-delay:calc(var(--sd,0s) - .8s)}
.ock-magma .bub.c3{animation-duration:3.1s;animation-delay:calc(var(--sd,0s) - 1.6s)}
@keyframes ockBlob{50%{transform:scale(1.15,.9) translateX(6%)}}
@keyframes ockBubble{0%{transform:scale(0);opacity:1}35%{transform:scale(1.15);opacity:1}70%{transform:scale(1);opacity:1}78%{transform:scale(1.5);opacity:0}100%{transform:scale(0);opacity:0}}
.ock-board .sq.lava{box-shadow:none}
.ock-crackle{z-index:1}
.ock-crackle .ck{fill:none;stroke:#5a2a14;stroke-width:4.4;stroke-linecap:round;stroke-linejoin:round}
.ock-crackle .cf{fill:none;stroke:#ff9600;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:ockCrackGlow 1.6s ease-in-out infinite;animation-delay:var(--ock-t,0s)}
@keyframes ockCrackGlow{50%{stroke:#ffc800}}
.ock-board .sq.crack{box-shadow:inset 0 0 0 3px #ff9600,inset 0 -5px 0 #e08600}
.sq.crack .pc{animation:ockSweat 1.4s ease-in-out infinite;animation-delay:var(--ock-t,0s);transform-origin:50% 90%}
@keyframes ockSweat{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
.sq.ock-crk .ock-crackle svg{animation:ockCrk .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes ockCrk{0%{transform:scale(.4);opacity:0}100%{transform:none;opacity:1}}
.sq.ock-erupt .ock-magma svg{animation:ockErupt .7s cubic-bezier(.34,1.56,.64,1) var(--ock-dl,0ms) both}
@keyframes ockErupt{0%{transform:scale(.2);border-radius:50%}55%{transform:scale(1.12,.92)}80%{transform:scale(.97,1.03)}100%{transform:none}}
@media (update:none){.ock-magma *,.ock-crackle *,.ock-d svg,.sq.crack .pc{animation:none!important}.ock-magma .bub{opacity:0}}