.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-board .sq .hp{opacity:0}
.ock-hpbar{inset:auto 12% 6% 12%;height:16%;min-height:7px;border-radius:999px;background:#4b4b4b;box-shadow:0 2px 0 #2a2a2a;border:2px solid #fff;box-sizing:border-box;overflow:hidden;z-index:3;transform-origin:50% 100%}
.ock-hpbar i,.ock-hpbar b{position:absolute;left:0;top:0;bottom:0;border-radius:999px}
.ock-hpbar i{background:#ffc800}
.ock-hpbar b{background:#58cc02;box-shadow:inset 0 -2px 0 #46a302;transition:width .3s cubic-bezier(.34,1.56,.64,1)}
.ock-hpbar b::after{content:"";position:absolute;left:12%;right:12%;top:18%;height:24%;border-radius:999px;background:#fff;opacity:.45}
.ock-hpbar em{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(100%/var(--n,3) - 2px),#4b4b4b calc(100%/var(--n,3) - 2px) calc(100%/var(--n,3)))}
.ock-hpbar.mid b{background:#ffc800;box-shadow:inset 0 -2px 0 #e5a800}
.ock-hpbar.low b{background:#ff4b4b;box-shadow:inset 0 -2px 0 #ea2b2b;animation:ockLow 1.2s ease-in-out infinite;animation-delay:var(--ock-t,0s)}
@keyframes ockLow{50%{background:#ff7676}}
.sq.ock-hit::after{content:"";position:absolute;inset:6%;z-index:1;pointer-events:none;border-radius:22%;background:#ff4b4b;box-shadow:inset 0 -4px 0 #ea2b2b;animation:ockHit .55s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes ockHit{0%{opacity:.7;transform:scale(.5)}35%{opacity:.6;transform:scale(1.04)}100%{opacity:0;transform:scale(.95)}}
@media (update:none){.ock-hpbar b,.sq.ock-hit::after{animation:none!important;transition:none!important}}