.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.ock-wx{position:relative}
.ock-board.ock-wx::after,.ock-board.ock-wx::before{content:"";position:absolute;pointer-events:none;z-index:4}
.ock-board.ock-wx-storm::after{inset:0;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><g stroke='%231cb0f6' stroke-width='4' stroke-linecap='round'><path d='M20 10l-4 14M70 40l-4 14M104 6l-4 14M45 78l-4 14M95 88l-4 14M10 62l-4 14'/></g><g stroke='%23fff' stroke-width='1.6' stroke-linecap='round' opacity='.8'><path d='M19.5 12l-1 4M69.5 42l-1 4M103.5 8l-1 4M44.5 80l-1 4M94.5 90l-1 4M9.5 64l-1 4'/></g></svg>");background-size:30% 30%;opacity:.75;animation:ockRain .7s linear infinite,ockFadeIn .6s ease-out}
@keyframes ockRain{from{background-position:0 0}to{background-position:-4% 30%}}
.ock-board.ock-wx-storm{box-shadow:0 10px 30px #0007,0 0 0 4px #4b5d7a}
.ock-board.ock-wx-bliz::after{inset:0;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><g fill='%23fff' stroke='%23a8e4ff' stroke-width='1.6'><circle cx='20' cy='18' r='5'/><circle cx='90' cy='40' r='4'/><circle cx='50' cy='80' r='6'/><circle cx='120' cy='100' r='4.5'/><circle cx='15' cy='120' r='3.5'/><circle cx='80' cy='128' r='3'/></g></svg>"),url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><g fill='%23fff' opacity='.85'><circle cx='30' cy='20' r='2.6'/><circle cx='75' cy='55' r='2'/><circle cx='12' cy='70' r='2.4'/></g></svg>");background-size:35% 35%,22% 22%;animation:ockSnow 6s linear infinite,ockFadeIn .6s ease-out}
@keyframes ockSnow{from{background-position:0 0,0 0}to{background-position:35% 70%,44% 66%}}
.ock-board.ock-wx-bliz{box-shadow:0 10px 30px #0007,0 0 0 4px #a8e4ff}
.ock-board.ock-wx-clear::before{z-index:1;top:-7%;right:-7%;width:19%;height:19%;border-radius:50%;background:#ffc800;box-shadow:0 0 0 6px #ffc80066,0 0 0 14px #ffc80033;opacity:.8;animation:ockSun 3s ease-in-out infinite,ockFadeIn .6s ease-out}
@keyframes ockSun{50%{box-shadow:0 0 0 9px #ffc80066,0 0 0 20px #ffc80026}}
.ock-board.ock-wx-clear{box-shadow:0 10px 30px #0007,0 0 0 4px #ffc800}
.ock-board.ock-wx-ice{box-shadow:0 10px 30px #0007,0 0 0 4px #5fc4f2}
.ock-board.ock-wx-ice .sq.icy:nth-child(5n+2)::before{content:"";position:absolute;top:12%;right:12%;width:22%;height:22%;z-index:3;pointer-events:none;background:#fff;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:ockTwinkle 2.4s ease-in-out infinite;animation-delay:calc(var(--ock-t,0s) * 7)}
.ock-board.ock-wx-ice .sq.icy:nth-child(7n+3)::before{animation-delay:-1.2s}
@keyframes ockTwinkle{0%,100%{transform:scale(0) rotate(0)}40%{transform:scale(1.15) rotate(45deg)}60%{transform:scale(1) rotate(60deg)}80%{transform:scale(0) rotate(90deg)}}
@keyframes ockFadeIn{from{opacity:0}}
.ock-frost svg,.ock-target svg{display:block;width:100%;height:100%;overflow:visible}
.ock-frost{z-index:3;animation:ockFreeze .5s cubic-bezier(.34,1.56,.64,1) both}
.ock-frost .lip{fill:#5fc4f2}
.ock-frost .blk{fill:#a8e4ff;fill-opacity:.62;stroke:#fff;stroke-width:1.6;stroke-opacity:.8}
.ock-frost .hl,.ock-frost .hl2{stroke:#fff;stroke-width:3;stroke-linecap:round;fill:none}
@keyframes ockFreeze{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.1,.92);opacity:1}100%{transform:none}}
.ock-board .sq.frost{box-shadow:none}
.sq.frost .pc{filter:none}
.ock-board .sq.bolt::before{content:none}
.ock-target{inset:6%;z-index:3}
.ock-target .rg{fill:#ffc80033;stroke:#ffc800;stroke-width:3.4;stroke-dasharray:6 5;stroke-linecap:round;transform-origin:20px 20px;animation:ockSpin 5s linear infinite}
.ock-target .bt{fill:#ffc800;stroke:#3c3c3c;stroke-width:1.6;stroke-linejoin:round;transform-origin:20px 20px;animation:ockWarn 1.2s cubic-bezier(.34,1.56,.64,1) infinite;opacity:.95}
@keyframes ockWarn{0%,100%{transform:scale(.55)}40%{transform:scale(.72) rotate(-6deg)}}
@keyframes ockSpin{to{transform:rotate(360deg)}}
.sq.ock-scorched::after{content:"";position:absolute;inset:18%;z-index:1;pointer-events:none;background:#4b4b4b;opacity:.55;clip-path:polygon(50% 0,61% 30%,95% 20%,72% 48%,100% 70%,64% 68%,55% 100%,42% 70%,8% 86%,28% 56%,0 30%,36% 32%);animation:ockScorch 2.6s ease-out both}
@keyframes ockScorch{0%{transform:scale(0)}12%{transform:scale(1.15)}20%{transform:scale(1)}75%{opacity:.55}100%{opacity:0}}
@media (update:none){.ock-board.ock-wx::after,.ock-board.ock-wx::before,.ock-board .sq.icy::before,.ock-frost,.ock-target *,.sq.ock-scorched::after{animation:none!important}}
.sq.frostnext{box-shadow:inset 0 0 0 3px #7ab8ff}