/* Chess — scoped under .chess */
.chess { --bw: 352px; position: relative; display: grid; gap: 10px; justify-items: center; width: 100%; }
.chess > .k-overlay { inset: -4px -8px; align-items: start; padding-top: 24px; }
.chess .ch-quiet { animation: none; }
.chess .ch-wide { width: 100%; }
.chess .ch-note { font-size: var(--t-sm); color: var(--muted); }

/* players */
.ch-player {
  display: flex; align-items: center; gap: 8px; width: var(--bw); min-height: 38px;
  padding: 4px 12px 4px 6px; border-radius: var(--pill); background: var(--surface-2);
  transition: background-color .2s, box-shadow .2s;
}
.ch-player.is-turn { background: var(--surface); box-shadow: inset 0 0 0 2px var(--c); }
.ch-av { flex: none; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 2.5px #1A1D3A; }
.ch-av.is-w { background: #FFFDF7; }
.ch-av.is-b { background: #2A2D48; box-shadow: inset 0 0 0 2.5px #6B6F8F; }
.ch-name { font-weight: 640; font-size: var(--t-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-caps { display: flex; align-items: center; margin-left: auto; min-width: 0; overflow: hidden; padding-left: 6px; }
.ch-caps svg { flex: none; width: 21px; height: 21px; margin-left: -7px; }
.ch-caps svg:first-child { margin-left: 0; }
.ch-caps b { margin-left: 5px; font-size: 13px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }

/* board: a physical board keeps its colours in light and dark mode */
.ch-board {
  position: relative; width: var(--bw); height: var(--bw);
  border-radius: 10px; overflow: hidden; box-shadow: var(--lift);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.ch-sq {
  position: absolute; width: 12.5%; height: 12.5%;
  margin: 0; padding: 0; border: 0; border-radius: 0; font: inherit;
  background: var(--sq); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ch-sq.lt { --sq: #EEDDBD; --co: #A97C57; }
.ch-sq.dk { --sq: #B88660; --co: #F3E5CA; }
.ch-sq::before, .ch-sq::after { content: ""; position: absolute; pointer-events: none; }
.ch-sq::before { inset: 0; }
.ch-sq.last::before { background: rgb(242 182 48 / .45); }
.ch-sq.sel::before { background: rgb(31 169 122 / .5); }
.ch-sq.hint::before { background: rgb(47 91 234 / .28); box-shadow: inset 0 0 0 3px rgb(47 91 234 / .8); }
.ch-sq.check::before { background: radial-gradient(circle, rgb(229 72 77 / .95) 0, rgb(229 72 77 / .6) 40%, rgb(229 72 77 / 0) 72%); }
.ch-sq.dot::after { left: 35%; top: 35%; width: 30%; height: 30%; border-radius: 50%; background: rgb(26 29 58 / .24); z-index: 3; }
.ch-sq.ring::after { inset: 3%; border-radius: 50%; box-shadow: inset 0 0 0 calc(var(--bw) / 64) rgb(26 29 58 / .28); z-index: 3; }
.ch-sq:focus-visible { outline: 3px solid #2F5BEA; outline-offset: -3px; z-index: 2; }
.ch-sq i, .ch-sq u {
  position: absolute; font-style: normal; text-decoration: none; line-height: 1;
  font-size: max(9px, calc(var(--bw) / 34)); font-weight: 700; color: var(--co); pointer-events: none;
}
.ch-sq i { right: 4%; bottom: 4%; }
.ch-sq u { left: 5%; top: 5%; }

.ch-pieces { position: absolute; inset: 0; pointer-events: none; }
.ch-pc { position: absolute; left: 0; top: 0; width: 12.5%; height: 12.5%; z-index: 2; transition: transform .2s var(--ease); will-change: transform; }
.ch-pc svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 1.5px 1px rgb(26 29 58 / .3)); transition: transform .2s var(--ease); }
.ch-pc.is-moving { z-index: 4; }
.ch-pc.is-drag { z-index: 5; transition: none; }
.ch-pc.is-gone { opacity: 0; transition: transform .2s var(--ease), opacity .22s; }
.ch-pc.is-gone svg { transform: scale(.6); }

.chess .pc-w .o { fill: #FFFDF7; stroke: #1A1D3A; stroke-width: 3; stroke-linejoin: round; }
.chess .pc-w .l { fill: none; stroke: #1A1D3A; stroke-width: 3; stroke-linecap: round; }
.chess .pc-w .d { fill: #1A1D3A; }
.chess .pc-b .o { fill: #2A2D48; stroke: #14162B; stroke-width: 3; stroke-linejoin: round; }
.chess .pc-b .l { fill: none; stroke: #C9CBDA; stroke-width: 2.6; stroke-linecap: round; }
.chess .pc-b .d { fill: #E8E9F2; }

/* promotion picker */
.ch-promo { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: 8px; background: rgb(26 29 58 / .5); border-radius: inherit; }
.ch-promo[hidden] { display: none; }
.ch-promo-box { display: grid; justify-items: center; gap: 10px; padding: 14px 12px 12px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--lift); max-width: 100%; }
.ch-promo-title { font-weight: 680; font-size: var(--t-sm); color: var(--ink); }
.ch-promo-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ch-promo-row button {
  display: grid; justify-items: center; gap: 2px;
  width: 72px; max-width: 100%; padding: 6px 4px 6px; border: 2px solid transparent; border-radius: 14px;
  background: #EEDDBD; color: #1A1D3A; cursor: pointer; font: inherit; font-size: 12px; font-weight: 640;
  touch-action: manipulation;
}
.ch-promo-row button svg { width: 52px; height: 52px; display: block; }
.ch-promo-row button:hover, .ch-promo-row button:focus-visible { background: #F2B630; border-color: #1A1D3A; outline: none; }
.ch-promo-row button:active { transform: scale(.96); }
@media (max-width: 359px) { .ch-promo-row button { width: 62px; } .ch-promo-row button svg { width: 44px; height: 44px; } }

/* status and buttons */
.ch-status { width: var(--bw); text-align: center; font-weight: 640; line-height: 1.3; }
.ch-status small { display: block; margin-top: 2px; color: var(--muted); font-weight: 520; font-size: var(--t-sm); }
.ch-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ch-actions [hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ch-pc, .ch-pc svg { transition: none; }
}
.chess .ch-wide button { flex: 1 1 0; min-width: 0; padding-left: 6px; padding-right: 6px; }