/* Idiotychess board widget styles. Everything is scoped under .chess, which
   chess.start() adds to the container, so this file won't touch the host page. */
.chess{
  --light:#e9e2cf; --dark:#9a7b56; --sel:#f6e96b; --dot:rgba(40,40,40,.35);
  --last:#cde89a; --panel:#2a2c31; --ink:#f2efe6; --accent:#7ec46b;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  text-align:center;
}
.chess *{box-sizing:border-box; -webkit-tap-highlight-color:transparent}

.chess-status{min-height:2.6em; display:flex; align-items:center; justify-content:center;
  font-size:1.02rem; font-weight:600; padding:.3em .6em; line-height:1.25; EEEcolor:var(--ink)}

.chess-board{width:min(94vw,460px); aspect-ratio:1/1; margin:0 auto;
  display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(8,1fr);
  border:3px solid #11120f; border-radius:6px; overflow:hidden; touch-action:manipulation}

.chess-sq{display:flex; align-items:center; justify-content:center; position:relative;
  font-size:min(8.6vw,42px); line-height:1; user-select:none; cursor:pointer}
.chess-sq.l{background:var(--light)} .chess-sq.d{background:var(--dark)}
.chess-sq.sel{background:var(--sel)!important}
.chess-sq.last::after{content:""; position:absolute; inset:0; background:var(--last); opacity:.4; pointer-events:none}

.chess-pc{position:relative; z-index:2}
.chess-pc.w{color:#fff; text-shadow:0 0 1px #000,0 1px 1px #000,1px 0 1px #000,-1px 0 1px #000,0 -1px 1px #000}
.chess-pc.b{color:#15130f; text-shadow:0 0 1px #777}

.chess-mv::before{content:""; position:absolute; width:30%; height:30%; border-radius:50%;
  background:var(--dot); z-index:1}
.chess-mv.cap::before{width:84%; height:84%; background:transparent;
  border:4px solid var(--dot); border-radius:50%}

.chess-btns{margin-top:16px}
.chess button{font:inherit; font-weight:600; padding:.6em 1.2em; border:0; border-radius:8px;
  background:var(--accent); color:#10210c; cursor:pointer}
.chess button:active{transform:translateY(1px)}