#log{margin:0;padding-left:20px;overflow:auto;font-size:.82rem;font-family:ui-monospace,monospace}
.sq.fog{background:#6c6862 !important}.sq.fog.l{background:#716d67 !important}
.pc.hid{opacity:.95}
.row{display:flex;gap:8px}.row>*{flex:1}
.btn2{background:#3c3a37;border:1px solid #4b4845}

/* ---- 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-cloud{inset:-30% -16% -8% -16%;z-index:1;animation:ockBob 3s ease-in-out infinite;animation-delay:var(--ock-cd,0s)}
.sq .ock-cloud svg{display:block;width:100%;height:100%;overflow:visible}
@keyframes ockBob{0%,100%{transform:translate(0,0)}50%{transform:translate(3%,-4%)}}
.sq.caught{background-image:none}
.sq.caught::after{content:"";position:absolute;inset:6%;border-radius:18%;pointer-events:none;z-index:4;box-shadow:inset 0 0 0 4px #ff4b4b;animation:ockCaught 1.2s cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes ockCaught{0%,100%{transform:scale(1)}50%{transform:scale(.9)}}
@media (update:none){.sq .ock-cloud,.sq.caught::after{animation:none!important}}
/* user preference: plain grey fog squares, no cloud overlay */
.sq .ock-cloud{display:none!important}