/* Rematchess — a chessboard's palette: cream paper, green and pale squares, a dark wood neutral.
   DaisyUI 5 from the CDN does the rest. */

[data-theme="rematchess"] {
  color-scheme: light;
  --color-base-100: oklch(95.5% 0.022 81);      /* the page: warm cream (#F8EFE0) */
  --color-base-200: oklch(89.5% 0.054 79);      /* tiles and bands: a light square's cream (#F0D9B5) */
  --color-base-300: oklch(84.6% 0.066 79);      /* borders (#E4C89C) */
  --color-base-content: oklch(26.1% 0.006 78);  /* near-black ink (#262421) */
  --color-primary: oklch(63.3% 0.097 130);      /* a dark square's green (#769656) */
  --color-primary-content: oklch(20% 0.006 78); /* dark ink on green: white fails contrast there */
  --color-secondary: oklch(94.2% 0.037 107);    /* a light square (#EEEED2) */
  --color-secondary-content: oklch(26.1% 0.006 78);
  --color-accent: oklch(66.1% 0.075 60);        /* walnut, the other board (#B58863) */
  --color-accent-content: oklch(20% 0.006 78);
  --color-neutral: oklch(30.3% 0.007 68);       /* dark wood (#312E2B) */
  --color-neutral-content: oklch(95.5% 0.022 81);
  --color-info: oklch(58% 0.12 240);
  --color-info-content: oklch(100% 0 0);
  --color-success: oklch(58.2% 0.121 133);      /* a good move (#5D8A3A) */
  --color-success-content: oklch(100% 0 0);
  --color-warning: oklch(76% 0.15 70);
  --color-warning-content: oklch(20% 0.006 78);
  --color-error: oklch(55% 0.19 29);            /* a blunder */
  --color-error-content: oklch(100% 0 0);
  --radius-selector: 1rem;
  --radius-field: 0.5rem;
  --radius-box: 1rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* The board (Public/js/board.js): 8 by 8 squares, as wide as fits beside or above the round's
   controls on a phone or a desktop. */
.board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  width: min(100%, 70dvh, 36rem);
  aspect-ratio: 1;
  border-radius: 0.5rem;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.board .arrows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.8; }
.board .square { position: relative; display: grid; place-items: center; }
.board .square.light { background: #eeeed2; }
.board .square.dark { background: #769656; }
.board .square.last.light { background: #f6f68a; }
.board .square.last.dark { background: #bbcb44; }
.board .square.premove.light { background: #e8836f; }
.board .square.premove.dark { background: #d0604c; }
.board .square.hint.light { background: #8fd4c4; }
.board .square.hint.dark { background: #4aa391; }
.board .square.selected { box-shadow: inset 0 0 0 4px rgb(0 0 0 / 0.25); }
.board .square img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.board .square .mark { position: absolute; inset: 0; opacity: 0.75; }
.board .square .dot { position: absolute; width: 30%; height: 30%; border-radius: 50%; background: rgb(0 0 0 / 0.2); }
.board .square .ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 5px rgb(0 0 0 / 0.2); }
.board .square[data-rank]::before, .board .square[data-file]::after {
  position: absolute; font-size: 0.65rem; font-weight: 600; opacity: 0.7; pointer-events: none;
}
.board .square[data-rank]::before { content: attr(data-rank); top: 2px; left: 3px; }
.board .square[data-file]::after { content: attr(data-file); bottom: 1px; right: 3px; }
.ghost { position: fixed; z-index: 50; pointer-events: none; transform: translate(-50%, -60%); }