/* Chess screen. Every class starts with ch-. Board squares are min(11vw, 52px): 8 of them fit a 360px phone. */
.ch-wrap { --ch-sq: min(11vw, 52px); --ch-w: calc(var(--ch-sq) * 8 + 6px); display: grid; justify-items: center; gap: .5rem; }
.ch-wrap > * { width: 100%; max-width: var(--ch-w); }
.ch-wrap > .ch-board { width: auto; max-width: none; }

.ch-board {
  display: grid; grid-template-columns: repeat(8, var(--ch-sq)); grid-template-rows: repeat(8, var(--ch-sq));
  border: 3px solid #4a2f17; border-radius: 6px; overflow: hidden; box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.ch-sq {
  --bg: #f0d9b5; position: relative; width: var(--ch-sq); height: var(--ch-sq); margin: 0; padding: 0; border: 0; border-radius: 0;
  display: flex; align-items: center; justify-content: center; background: var(--bg); color: #1b1b1b; cursor: default;
  font: 400 calc(var(--ch-sq) * .78)/1 "Segoe UI Symbol", "DejaVu Sans", "Noto Sans Symbols 2", "Apple Symbols", serif;
  -webkit-tap-highlight-color: transparent;
}
.ch-light { --bg: #f0d9b5; }
.ch-dark { --bg: #b58863; }
.ch-light.ch-last { --bg: #f3e37a; }
.ch-dark.ch-last { --bg: #d2b44a; }
.ch-light.ch-sel { --bg: #a9d48f; }
.ch-dark.ch-sel { --bg: #78ad5c; }
.ch-check { background: radial-gradient(circle, #ff2b2b 0 22%, rgba(230, 30, 30, .75) 42%, rgba(230, 30, 30, 0) 72%), var(--bg); }
.ch-live .ch-can, .ch-live .ch-dest, .ch-live .ch-hit { cursor: pointer; }
.ch-sq:focus-visible { outline: 3px solid #1565c0; outline-offset: -3px; }
.ch-dest::after {
  content: ''; position: absolute; width: 30%; height: 30%; border-radius: 50%; background: rgba(20, 60, 20, .45); pointer-events: none;
}
.ch-hit::after {
  content: ''; position: absolute; inset: 2px; border-radius: 50%; border: calc(var(--ch-sq) * .09) solid rgba(20, 60, 20, .5); pointer-events: none;
}

/* pieces: the solid glyphs for both sides, White filled cream with a dark outline. The outline is a text-shadow,
   not -webkit-text-stroke: some fonts (Segoe UI Symbol's pawn) have overlapping contours that a stroke fills dark. */
.ch-pc { position: relative; z-index: 1; pointer-events: none; line-height: 1; }
.ch-w {
  color: #fffaf0;
  text-shadow: 1px 0 #1b1b1b, -1px 0 #1b1b1b, 0 1px #1b1b1b, 0 -1px #1b1b1b, 1px 1px #1b1b1b, -1px -1px #1b1b1b,
    1px -1px #1b1b1b, -1px 1px #1b1b1b, 0 2px 3px rgba(0, 0, 0, .45);
}
/* Black keeps a thin same-colour stroke: it fills the see-through details some fonts draw inside black pieces. */
.ch-b { color: #141414; -webkit-text-stroke: .7px #141414; text-shadow: 0 0 1px rgba(255, 255, 255, .55), 0 1px 1px rgba(255, 255, 255, .3); }

/* coordinates, tucked into the corner squares */
.ch-rank, .ch-file { position: absolute; font: 700 max(9px, calc(var(--ch-sq) * .22))/1 var(--body); pointer-events: none; }
.ch-rank { top: 2px; left: 3px; }
.ch-file { bottom: 2px; right: 3px; }
.ch-dark .ch-rank, .ch-dark .ch-file { color: #f0d9b5; }
.ch-light .ch-rank, .ch-light .ch-file { color: #8a6446; }

/* players above and below the board */
.ch-player {
  display: flex; align-items: center; gap: .5rem; min-height: 2.6rem; padding: .3rem .65rem; border-radius: 12px;
  background: rgba(0, 0, 0, .25); border: 2px solid transparent;
}
.ch-player.ch-turn { border-color: var(--gold); }
.ch-player.ch-you { background: rgba(227, 179, 65, .16); }
.ch-dot { flex: none; width: 1rem; height: 1rem; border-radius: 50%; }
.ch-dot-white { background: #fffaf0; border: 2px solid #1b1b1b; }
.ch-dot-black { background: #141414; border: 2px solid #d9d9d9; }
.ch-name { min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-color { font-weight: 400; color: var(--muted); font-size: .85rem; }
.ch-took { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0 .05rem;
  font: 1.15rem/1.1 "Segoe UI Symbol", "DejaVu Sans", "Noto Sans Symbols 2", "Apple Symbols", serif; }
.ch-took .ch-w { text-shadow: .7px 0 #1b1b1b, -.7px 0 #1b1b1b, 0 .7px #1b1b1b, 0 -.7px #1b1b1b; }
.ch-adv { margin-left: .3rem; font: 700 .9rem/1 var(--body); color: var(--good); }

/* promotion picker */
.ch-promo { display: grid; gap: .5rem; justify-items: center; padding: .75rem; border-radius: 14px; background: rgba(0, 0, 0, .4); border: 2px solid var(--gold); }
.ch-promo-title { font-weight: 700; }
.ch-promo-row { display: flex; gap: .5rem; justify-content: center; }
.ch-promo-btn {
  width: 3.4rem; height: 3.4rem; padding: 0; border-radius: 12px; border: 2px solid var(--gold); background: #f0d9b5; cursor: pointer;
  font: 2.5rem/1 "Segoe UI Symbol", "DejaVu Sans", "Noto Sans Symbols 2", "Apple Symbols", serif;
  display: flex; align-items: center; justify-content: center;
}
.ch-promo-btn:disabled { opacity: .5; cursor: not-allowed; }
.ch-promo-cancel { min-height: 44px; }

.ch-offer { margin: 0; }
.ch-offer p { margin: 0 0 .25rem; }
.ch-buttons { margin: .25rem 0 0; }

/* move list: the last 10 moves */
.ch-moves {
  list-style: none; margin: 0; padding: .4rem .75rem; border-radius: 12px; background: rgba(0, 0, 0, .2); font-size: .95rem;
}
.ch-moves li { display: grid; grid-template-columns: 2.8rem 1fr 1fr; gap: .25rem; }
.ch-moves li:last-child { color: #fff; }
.ch-moves .ch-num { color: var(--muted); }