.board{display:grid;border-radius:6px;overflow:hidden;box-shadow:0 8px 30px #0008}
.board .sq{aspect-ratio:1}
.pc.z{color:#7fdc5a;text-shadow:0 0 2px #000,0 0 1px #000}
.back{color:var(--accent)}
.row{display:flex;gap:8px;flex-wrap:wrap}
.row button{flex:1}
.small{font-size:.85rem;color:var(--muted)}
.choices{display:flex;flex-direction:column;gap:8px}
.choices button{text-align:left}
button:disabled{opacity:.45;cursor:default}

/* ---- 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 *{animation:none!important;transition:none!important}}
/* flat waving flags (replace the tiny text flag) */
.ock-board .sq>span[style*="right:3px"]{opacity:0}
.ock-flag{inset:auto;top:-4%;right:-2%;width:52%;height:57%;z-index:3}
.ock-flag svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 2px 0 #0004)}
.ock-flag .ock-cloth{transform-origin:11px 16px;animation:ockWave 1.8s ease-in-out infinite}
.ock-flag-w .ock-cloth{fill:#fff;stroke:#1cb0f6}
.ock-flag-b .ock-cloth{fill:#ff4b4b;stroke:#ea2b2b}
@keyframes ockWave{0%,100%{d:path("M11 7 C18 3 24 11 36 7 L36 25 C24 29 18 21 11 25 Z")}50%{d:path("M11 7 C18 11 26 3 36 9 L36 27 C26 21 18 29 11 25 Z")}}
.sq:has(.ock-flag) .pc{z-index:2}