.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}}
.sq.ock-holed::after{content:"";position:absolute;left:50%;top:50%;width:20%;height:20%;margin:-10%;border-radius:50%;z-index:3;pointer-events:none;background:#3c3c3c;box-shadow:0 0 0 3px #fff,0 3px 0 3px #0002;animation:ockHole 1.5s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes ockHole{0%{transform:scale(0)}18%{transform:scale(1.25)}30%{transform:scale(1)}75%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:0}}
.sq.shot{background-image:none;box-shadow:inset 0 0 0 4px #ff4b4b}
.sq.shot{animation:ockShotPulse .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes ockShotPulse{0%{box-shadow:inset 0 0 0 0 #ff4b4b}45%{box-shadow:inset 0 0 0 9px #ff4b4b}100%{box-shadow:inset 0 0 0 4px #ff4b4b}}
@media (update:none){.sq.shot,.sq.ock-holed::after{animation:none!important}}
/* reload rule: piece that just fired cannot fire next turn */
.sq.reload::before{content:"";position:absolute;inset:12%;border-radius:50%;border:3px dashed #ff9d2e;z-index:3;pointer-events:none;opacity:.9}