/* board.css — shared board primitives the game engines build on.
   Engines may use these classes or add their own; see CONTRACT.md §A. */

:root{
  --sq-light:#e9d8b6; --sq-dark:#8a5a34;
  --sq-sel:#f6d365; --sq-dest:#7bd88f; --sq-last:#f5b94233; --sq-cap:#ff6b6b;
  --board-frame:#20140b;
}

/* generic square grid; engines set --n via inline style or the board3/board8 helpers */
.gboard{
  --n:8; --cell:min(11.4vw,58px);
  display:grid; grid-template-columns:repeat(var(--n),var(--cell));
  grid-template-rows:repeat(var(--n),var(--cell));
  border:10px solid var(--board-frame); border-radius:12px;
  box-shadow:0 18px 46px rgba(0,0,0,.5); user-select:none;
}
.board8{--n:8}
.board3{--n:3; --cell:min(24vw,96px)}

.sq{display:grid;place-items:center;position:relative;font-size:calc(var(--cell)*.72);line-height:1;cursor:default}
.sq.light{background:var(--sq-light)}
.sq.dark{background:var(--sq-dark)}
.sq.playable{cursor:pointer}
.sq.sel{box-shadow:inset 0 0 0 4px var(--sq-sel)}
.sq.last{background-image:linear-gradient(var(--sq-last),var(--sq-last))}
.sq.check{box-shadow:inset 0 0 0 4px var(--sq-cap)}
/* a small dot marking a legal destination */
.sq.dest::after{content:"";position:absolute;width:30%;height:30%;border-radius:50%;background:var(--sq-dest);opacity:.85}
.sq.dest.occ::after{width:82%;height:82%;background:transparent;border:5px solid var(--sq-dest);border-radius:50%;opacity:.8}

/* coordinates (optional) */
.sq .coord{position:absolute;font-size:10px;color:#0004;font-weight:700}
.sq.dark .coord{color:#fff4}
.coord.file{right:3px;bottom:1px}
.coord.rank{left:3px;top:1px}

/* a generic disc piece (checkers) */
.disc{position:relative;width:74%;height:74%;border-radius:50%;box-shadow:0 3px 6px rgba(0,0,0,.4),inset 0 3px 6px rgba(255,255,255,.25)}
/* Frank's signature: a unique moustache per piece */
.disc .mo{position:absolute;left:50%;top:54%;width:70%;transform-origin:center;pointer-events:none;line-height:0}
.disc .mo svg{display:block}
.disc.p0{background:radial-gradient(circle at 35% 30%,#ff7b6b,#c62a1c)}
.disc.p1{background:radial-gradient(circle at 35% 30%,#4a5568,#161b24)}
.disc.king::after{content:"♚";position:absolute;color:#ffd76a;font-size:calc(var(--cell)*.4);text-shadow:0 1px 2px #0008}

/* chess/ttt glyph pieces */
.glyph{position:relative;z-index:1;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.glyph.p0{color:#f7f3ea} /* white/X */
.glyph.p1{color:#20242c} /* black/O */

/* chess promotion chooser */
.promo-chooser{margin:12px auto 0;max-width:280px;text-align:center;background:var(--panel,#151b25);border:1px solid var(--line,#2a3342);border-radius:12px;padding:10px}
.promo-title{font-size:12px;color:var(--mut,#8a97a9);text-transform:uppercase;letter-spacing:.12em;margin-bottom:6px}
.promo-row{display:flex;gap:8px;justify-content:center}
.promo-btn{width:52px;height:52px;font-size:30px;line-height:1;border:1px solid var(--line,#2a3342);border-radius:10px;background:#0c1119;cursor:pointer}
.promo-btn:hover{border-color:var(--accent,#ffbf47)}
.promo-btn.p0{color:#f7f3ea}.promo-btn.p1{color:#c9d2df}

/* checkers optional multi-jump control */
.jump-controls{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:12px}

/* AI move button (Hank only) */
.aibar{display:flex;justify-content:center;margin:0 0 12px}
.aibar-empty{display:none}
.btn.ai{background:linear-gradient(180deg,#7c5cff,#5a3fe0);color:#fff;border-color:transparent}
.btn.ai.ghost{background:transparent;color:#9a8cff;border:1px solid #3a3560}
.ai-think{color:#9a8cff;font-weight:600;font-size:14px;padding:9px 14px}

/* tic-tac-toe cells (neon on slate) */
.ttt{--cell:min(26vw,104px);gap:8px;border:none;box-shadow:none;background:transparent}
.ttt .sq{background:var(--panel2,#1b2331);border:1px solid var(--line,#2a3342);border-radius:14px;font-weight:800}
.ttt .sq.playable:hover{border-color:var(--accent,#ffbf47)}
.ttt .sq.win{box-shadow:inset 0 0 0 3px var(--accent,#ffbf47)}
.ttt .glyph.p0{color:#ffbf47} .ttt .glyph.p1{color:#43d1a0}