/* =============================================================
   GAME: Chess
   ============================================================= */
.board-chess {
  --cell: min(calc((100vw - 72px) / 8), 56px);
  --chs-glow: #c9d0ff;
  --chs-hint: #3df5ff;
  display: flex; flex-direction: column; gap: 6px; width: calc(var(--cell) * 8 + 12px);
}
.chs-grid {
  position: relative; display: grid; grid-template-columns: repeat(8, var(--cell)); grid-auto-rows: var(--cell);
  padding: 6px; border-radius: 12px; background: #0f0d22;
  box-shadow: 0 0 0 2px var(--chs-glow), 0 0 26px rgba(201, 208, 255, .35);
}
.chs-sq { position: relative; border: 0; padding: 0; margin: 0; display: grid; place-items: center; cursor: default; }
.chs-sq.l { background-color: #3f3a7c; }
.chs-sq.d { background-color: #1e1a44; }
.chs-sq.movable, .chs-sq.dest, .chs-sq.cap { cursor: pointer; }
.chs-sq:focus { outline: none; }
.chs-sq:focus-visible { box-shadow: inset 0 0 0 3px var(--focus); z-index: 2; }
.chs-sq.last::before { content: ""; position: absolute; inset: 0; background: rgba(255, 210, 63, .24); }
.chs-sq.sel::before { content: ""; position: absolute; inset: 0; background: rgba(61, 245, 255, .26); box-shadow: inset 0 0 0 2px var(--chs-hint); }
.chs-sq.check { background-image: radial-gradient(circle, rgba(255, 61, 127, .95) 0%, rgba(255, 61, 127, .5) 42%, transparent 72%); }
.chs-sq.dest::after { content: ""; position: absolute; width: 28%; height: 28%; border-radius: 50%; background: rgba(61, 245, 255, .6); box-shadow: 0 0 8px rgba(61, 245, 255, .8); z-index: 2; }
.chs-sq.dest:hover::after { width: 40%; height: 40%; }
.chs-sq.cap::after { content: ""; position: absolute; inset: 5%; border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(61, 245, 255, .8), 0 0 8px rgba(61, 245, 255, .6); z-index: 2; }

.chs-rank, .chs-file { position: absolute; font: 700 calc(var(--cell) * .2)/1 var(--font-body); pointer-events: none; }
.chs-rank { left: 2px; top: 2px; }
.chs-file { right: 3px; bottom: 2px; }
.chs-sq.l .chs-rank, .chs-sq.l .chs-file { color: #1e1a44; }
.chs-sq.d .chs-rank, .chs-sq.d .chs-file { color: #9690d6; }

.chs-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* pieces: gradient body (defs in chess.js), crisp outline, soft contact shadow + faint side glow */
.chs-pc { position: relative; width: 92%; height: 92%; z-index: 1; pointer-events: none; overflow: visible; transition: transform .15s, filter .15s; }
.chs-pc g { stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.chs-pc.w g { fill: url(#chs-gw); stroke: #221c48; }
.chs-pc.w .pc-eye { fill: #221c48; stroke: none; }
.chs-pc.w { filter: drop-shadow(0 1.6px 1.2px rgba(4, 2, 16, .6)) drop-shadow(0 0 2.5px rgba(61, 245, 255, .3)); }
.chs-pc.b g { fill: url(#chs-gb); stroke: #ff8ad8; }
.chs-pc.b .pc-eye { fill: #ff8ad8; stroke: none; }
.chs-pc.b { filter: drop-shadow(0 1.6px 1.2px rgba(4, 2, 16, .7)) drop-shadow(0 0 3px rgba(255, 79, 176, .55)); }
.chs-sq.movable:hover .chs-pc { transform: translateY(-2px) scale(1.05); }
.chs-sq.sel .chs-pc { transform: translateY(-2px) scale(1.1); filter: drop-shadow(0 3px 2px rgba(4, 2, 16, .6)) drop-shadow(0 0 3px #fff) drop-shadow(0 0 7px rgba(61, 245, 255, .9)); }

.chs-strip { display: flex; align-items: center; gap: 8px; min-height: 26px; padding: 0 4px; font-size: .85rem; font-weight: 600; color: var(--muted); }
.chs-who { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.chs-who.active { color: var(--ink); }
.chs-who .dot { width: 12px; height: 12px; }
.chs-caps { display: flex; flex-wrap: wrap; flex: 1; min-width: 0; }
.chs-pc.cap { width: 18px; height: 18px; margin-right: -5px; filter: drop-shadow(0 1px .6px rgba(0, 0, 0, .55)); }
.chs-adv { font-weight: 700; color: var(--ink); }
.chs-dot.w { background: var(--t-white); box-shadow: 0 0 0 2px #29235a; }
.chs-dot.b { background: var(--t-black); box-shadow: 0 0 0 2px #ff7ad9; }
.chs-chk { color: var(--t-red); text-transform: uppercase; letter-spacing: .04em; }

.chs-moves {
  list-style: none; margin: 0; padding: 6px 8px; display: flex; flex-wrap: wrap; gap: 2px 10px;
  max-height: 64px; overflow-y: auto; background: var(--bg); border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line);
  font: 600 .85rem/1.5 var(--font-body); scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent;
}
.chs-moves[hidden] { display: none; }
.chs-moves li { display: inline-flex; gap: 4px; white-space: nowrap; }
.chs-moves .n { color: var(--muted); }
.chs-moves .cur { color: #140f24; background: var(--t-gold); border-radius: 4px; padding: 0 3px; }

.chs-promo {
  position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; gap: 10px; text-align: center;
  background: rgba(8, 5, 20, .78); border-radius: 12px; animation: fade .15s ease;
}
.chs-promo[hidden] { display: none; }
.chs-promo p { margin: 0; font-weight: 700; }
.chs-promo div { display: flex; gap: 8px; }
.chs-promo button {
  width: calc(var(--cell) * 1.2); height: calc(var(--cell) * 1.2); padding: 0; border: 0; border-radius: 12px; cursor: pointer;
  display: grid; place-items: center; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line);
}
.chs-promo button:hover, .chs-promo button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent), 0 0 16px rgba(183, 104, 255, .6); }
.chs-promo .chs-pc { width: 80%; height: 80%; }