.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{position:relative}
.ock-board.ock-gl .sq:nth-child(8n+1)::after,.ock-board.ock-gr .sq:nth-child(8n)::after{content:"";position:absolute;top:50%;width:26%;height:26%;margin-top:-13%;pointer-events:none;z-index:1;opacity:.85;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 5 8 12l7 7' fill='none' stroke='%2346a302' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15 5 8 12l7 7' fill='none' stroke='%2358cc02' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;animation:ockPull 2.4s cubic-bezier(.34,1.56,.64,1) infinite;animation-delay:var(--ock-t,0s)}
.ock-board.ock-gl .sq:nth-child(8n+1)::after{left:3%;--ock-px:-18%}
.ock-board.ock-gr .sq:nth-child(8n)::after{right:3%;transform:scaleX(-1);--ock-px:18%}
.ock-board.ock-gl .sq:nth-child(8n+1)::before,.ock-board.ock-gr .sq:nth-child(8n)::before{content:"";position:absolute;top:8%;bottom:8%;width:6%;border-radius:99px;background:#58cc02;box-shadow:0 2px 0 #46a302;pointer-events:none;z-index:1}
.ock-board.ock-gl .sq:nth-child(8n+1)::before{left:0}
.ock-board.ock-gr .sq:nth-child(8n)::before{right:0}
@keyframes ockPull{0%,55%,100%{translate:0 0}30%{translate:var(--ock-px) 0}}
@media (update:none){.ock-board .sq::after{animation:none!important}}