/* Chess. The board is a container, so pieces and coordinates scale with it
   (cqw) and a phone's 390px and a laptop's 30rem both look right. */
.ch { width: min(30rem, 100%); }

.ch-board {
  container-type: inline-size;
  display: grid; grid-template-columns: repeat(8, 1fr);
  border: 3px solid var(--felt-dark); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); user-select: none; -webkit-user-select: none;
}

.ch-sq {
  --sq-light: var(--paper-2);
  --sq-dark: color-mix(in srgb, var(--felt) 55%, var(--paper));
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1; box-sizing: border-box; min-width: 0;
  margin: 0; padding: 0; border: 0; font: inherit; color: inherit; line-height: 1;
}
.ch-sq.light { background-color: var(--sq-light); }
.ch-sq.dark { background-color: var(--sq-dark); }

/* The newest move, and a king in check. Both are overlays so they work on
   either square colour. */
.ch-sq { background-image: var(--ov-dot, none), var(--ov-check, none), var(--ov-last, none); }
.ch-sq.last { --ov-last: linear-gradient(rgb(224 117 45 / 0.42), rgb(224 117 45 / 0.42)); }
.ch-sq.check { --ov-check: radial-gradient(circle, rgb(194 69 59 / 0.95) 0 35%, rgb(194 69 59 / 0) 75%); }
.ch-sq.sel { box-shadow: inset 0 0 0 0.5cqw var(--accent); }

/* The drawn pieces (`Chess.Figurine`): sized by what holds them, a share
   of the square on the board, so a copy that leaves the board (the glide's,
   sized in px) keeps its size. Both colours draw in dark ink: White's light
   is its duotone body layer, made solid here; Black is the fill shape. */
.ch-piece { display: block; width: 84%; height: 84%; color: #2b2620; }
.ch-piece svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ch-piece.white [opacity="0.2"] { opacity: 1; fill: #fffdf8; }

/* The coordinates sit outside the board, on its left and bottom edges, so
   they never fight the pieces for the corner of a square. The frame is a
   two-column grid; the gutters are padded by the board's border so each
   label lines up with its row and column. */
.ch-frame { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: 0.2rem 0.25rem; }
.ch-ranks, .ch-files {
  display: grid; font-size: 0.8rem; font-weight: 700; line-height: 1; color: var(--ink-soft);
  user-select: none; -webkit-user-select: none;
}
.ch-ranks { grid-template-rows: repeat(8, 1fr); padding: 3px 0; align-items: center; justify-items: center; }
.ch-files { grid-column: 2; grid-template-columns: repeat(8, 1fr); padding: 0 3px; justify-items: center; }

/* Squares you can act on. */
button.ch-sq { cursor: pointer; }
button.ch-sq.mine { touch-action: none; }
button.ch-sq.mine:hover { box-shadow: inset 0 0 0 0.4cqw rgb(224 117 45 / 0.6); }
button.ch-sq:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

/* A destination: a dot on an empty square, a ring around a capture. Drawn
   as a background layer, like the last-move and check overlays, so it works
   on either square colour. */
.ch-sq.dest {
  --ov-dot: radial-gradient(circle, rgb(43 38 32 / 0.5) 0 1.7cqw, transparent calc(1.7cqw + 0.5px));
}
.ch-sq.dest.capture {
  --ov-dot: radial-gradient(circle, transparent 0 4.7cqw, rgb(194 69 59 / 0.75) calc(4.7cqw + 0.5px) 5.6cqw, transparent calc(5.6cqw + 0.5px));
}
.ch-sq.dest:hover { box-shadow: inset 0 0 0 0.5cqw var(--accent); }

/* While dragging, any square that could take a piece is ready. */
.ch-sq.legal.gn-drop-ready { box-shadow: inset 0 0 0 0.3cqw rgb(224 117 45 / 0.5); }
.ch-sq.legal.gn-drop-over { box-shadow: inset 0 0 0 0.7cqw var(--accent); }
.ch-sq.gn-dragging .ch-piece { opacity: 0.35; }
.ch-sq.gn-drag-ghost { background: none; background-image: none; box-shadow: none; }
/* The ghost is bigger than its square on a phone, so a finger doesn't hide
   it, and lifted: its shadow falls further and fainter. */
.ch-sq.gn-drag-ghost .ch-piece { flex: none; width: 3.2rem; height: 3.2rem; }
.gn-drag-ghost .ch-shadow { transform: translate(0, 28px); opacity: 0.18; }

/* The promotion choice sits under the board so the board doesn't move. */
.ch-promote {
  display: flex; justify-content: center; gap: 0.5rem; margin-top: 0.6rem;
  padding: 0.5rem; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius);
}
.ch-promo {
  width: 3.4rem; height: 3.4rem; padding: 0; font: inherit; cursor: pointer;
  background: var(--sq-dark, color-mix(in srgb, var(--felt) 55%, var(--paper)));
  border: 2px solid var(--felt-dark); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
}
.ch-promo .ch-piece { width: 2.6rem; height: 2.6rem; }
.ch-promo:hover, .ch-promo:focus-visible { border-color: var(--accent); outline: none; }

/* Move list: one line per pair of plies, numbered by the list. The box
   opens at the newest moves and stays there (`GameKit.MoveList`):
   a column-reverse scroller whose one child, the list, sits at its end. */
.ch-moves {
  display: flex; flex-direction: column-reverse; margin: 0.8rem 0 0; max-height: 9rem; overflow-y: auto;
  font-family: var(--mono); font-size: 0.9rem; color: var(--ink);
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius);
}
.ch-moves ol {
  flex: none; margin: 0; padding: 0.5rem 0.5rem 0.5rem 2.2rem;
  display: flex; flex-wrap: wrap; gap: 0.15rem 1rem; list-style-position: inside;
}
.ch-moves li { min-width: 8.5rem; padding: 0; }
.ch-moves li::marker { color: var(--ink-soft); }
.ch-ply { display: inline-block; min-width: 3.4rem; margin-right: 0.3rem; }

/* What the last move was, said above the board. */
.ch-last { margin: 0.1rem 0 0.4rem; color: var(--ink-soft); }

/* What each side has taken: one row above the board and one below, there
   from the first move so the board never jumps when the first capture comes. */
.ch-taken { display: flex; align-items: center; gap: 0.5rem; margin: 0.3rem 0; min-height: 1.8rem; font-size: 0.9rem; }
.ch-lost { display: inline-flex; flex-wrap: wrap; align-items: center; }
.ch-lost .ch-piece { width: 1.5rem; height: 1.5rem; margin-right: -0.2rem; }