@import url('../global.css');

:root {
  --title-color: var(--color-chess);
  --chess-light: #e4d1aa;
  --chess-dark: #4d3931;
  --chess-cabinet: #211817;
  --chess-brass: #c9a460;
  --chess-select: #b83d4d;
  --chess-target-on-light: #37221e;
  --chess-target-on-dark: #f6e4bb;
}

.chess-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0;
  width: 100%;
  aspect-ratio: 1;
  container-type: inline-size;
  padding: clamp(0.28rem, 0.7vw, 0.5rem);
  background:
    linear-gradient(135deg, rgb(255 229 168 / 20%), transparent 28%),
    repeating-linear-gradient(90deg, rgb(255 255 255 / 4%) 0 1px, transparent 1px 0.5rem),
    var(--chess-cabinet);
  border: 0.18rem solid var(--chess-brass);
  border-radius: 0.7rem;
  box-shadow:
    0 0.7rem 1.4rem rgb(18 9 8 / 48%),
    inset 0 0 0 0.14rem rgb(248 217 156 / 16%);
  overflow: hidden;
}
.chess-board[data-visual-theme='arcade'] {
  --chess-light: #f2c3e6;
  --chess-dark: #6b1450;
  --chess-cabinet: #2c0a22;
  --chess-brass: #ff8fe0;
}
.chess-board[data-visual-theme='midnight'] {
  --chess-light: #c3d9ec;
  --chess-dark: #1c3550;
  --chess-cabinet: #0c1a2c;
  --chess-brass: #6fb8e8;
}
.chess-board[data-visual-theme='daylight'] {
  --chess-light: #ded0f7;
  --chess-dark: #4c2c73;
  --chess-cabinet: #2c1a47;
  --chess-brass: #c9a8f2;
}
.chess-board[data-visual-theme='amber'] {
  --chess-light: #e9cf9a;
  --chess-dark: #5c3c10;
  --chess-cabinet: #2c1c06;
  --chess-brass: #f0b94a;
}

.chess-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  min-width: 0;
  border: 0;
  border-radius: 0;
  font: inherit;
  font-size: clamp(1rem, 7cqw, 3rem);
  line-height: 1;
  cursor: pointer;
  color: var(--text-color);
  transition: box-shadow 0.12s ease;
}

.chess-cell.is-light {
  background: linear-gradient(135deg, rgb(255 255 255 / 20%), transparent 62%), var(--chess-light);
}

.chess-cell.is-dark {
  background: linear-gradient(135deg, rgb(255 235 185 / 10%), transparent 58%), var(--chess-dark);
}

/* Both piece colours need an outline: Unicode glyphs otherwise disappear on
   one of the two square tones, especially on small mobile boards. */
.chess-cell.is-white-piece {
  color: #f7ecd2;
  -webkit-text-stroke: 1px #34231f;
  text-shadow:
    0 0.11em 0 #806546,
    0 0.15em 0.18em rgb(27 15 11 / 55%);
}

.chess-cell.is-black-piece {
  color: #231a19;
  -webkit-text-stroke: 1px #d8b87b;
  text-shadow:
    0 0.1em 0 #090707,
    0 0.14em 0.2em rgb(0 0 0 / 65%);
}

.chess-cell:disabled {
  cursor: default;
}

/* Selected piece — inset ring. */
.chess-cell.is-selected {
  box-shadow:
    inset 0 0 0 0.25rem var(--chess-select),
    inset 0 0 1rem rgb(202 64 80 / 34%);
}

/* Legal destination — a centred dot for empty squares, a ring for captures. */
.chess-cell.is-target::after {
  content: '';
  position: absolute;
  width: 28%;
  height: 28%;
  border-radius: 50%;
  background: var(--chess-target-on-light);
}

.chess-cell.is-dark.is-target::after {
  background: var(--chess-target-on-dark);
}

.chess-cell.is-target:not(:empty)::after {
  width: 82%;
  height: 82%;
  background: transparent;
  border: 4px solid var(--chess-target-on-light);
}

.chess-cell.is-dark.is-target:not(:empty)::after {
  border-color: var(--chess-target-on-dark);
}

/* King in check. */
.chess-cell.is-check {
  box-shadow:
    inset 0 0 0 0.25rem var(--danger),
    inset 0 0 1rem rgb(229 73 93 / 38%);
}