.board{display:grid;border-radius:6px;overflow:hidden;box-shadow:0 8px 30px #0008}
.board .sq{aspect-ratio:1;position:relative;display:flex;align-items:center;justify-content:center}
.small{font-size:.85rem;color:var(--muted)}
button:disabled{opacity:.45;cursor:default}
/* Necromancer: normal queen piece wrapped in a pulsing purple aura */
.sq.necro-sq::before{content:"";position:absolute;inset:4%;border-radius:50%;background:radial-gradient(circle,#b46bff99 0%,#9d4dff55 40%,transparent 70%);animation:necroAura 2.4s ease-in-out infinite;pointer-events:none;z-index:1}
.pc.necro{position:relative;z-index:2;filter:drop-shadow(0 0 4px #9d4dff) drop-shadow(0 0 9px #9d4dffaa)}
@keyframes necroAura{0%,100%{opacity:.65;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
/* undead */
.pc.undead{opacity:.82;filter:sepia(1) hue-rotate(225deg) saturate(3.5) drop-shadow(0 0 5px #9d4dff);animation:ghost 2.6s ease-in-out infinite}
@keyframes ghost{0%,100%{transform:translateY(0)}50%{transform:translateY(-6%)}}
.sq.raise{box-shadow:inset 0 0 0 4px #9d4dff;cursor:pointer}
.sq.raise::after{content:"";position:absolute;width:30%;height:30%;border-radius:50%;background:#9d4dff99}
.sq.risen .pc{animation:rise .8s cubic-bezier(.34,1.56,.64,1)}
@keyframes rise{0%{transform:translateY(60%) scale(.4);opacity:0;filter:blur(3px)}100%{transform:none;opacity:.85}}
/* graveyard */
.gy{display:flex;flex-wrap:wrap;gap:4px;min-height:2.2em}
.gy button{font-size:1.6rem;line-height:1;padding:2px 8px;min-width:0}
.gy button.on{outline:3px solid #9d4dff;background:#9d4dff33}
.gy span{font-size:1.5rem;opacity:.7}
@media (prefers-reduced-motion:reduce){.sq.necro-sq::before,.pc.undead,.sq.risen .pc{animation:none}}

/* ---- 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}}