/* The Draughts board — /arcade/draughts. Loaded after arcade-game.css, which
   carries everything a rules page shares (facts, numbered rules, figures,
   questions) and the wood-and-brass frame this board sits in: the frame, the
   tally rows, the status line and the New game button are that file's
   .ayo-* classes, reused as they are. This file is only the 8 by 8 grid, the
   pieces, and the rings that say what you can touch. */

.dr { max-width: 560px; }
.dr-board { border-radius: clamp(10px, 2.6vw, 16px); }
.dr-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(234, 212, 145, .32), 0 0 0 4px rgba(0, 0, 0, .28);
}

/* Light squares are bare wood and nothing ever stands on them. Dark squares
   are the game. */
.dr-sq {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  font: inherit;
  color: inherit;
  opacity: 1;
  background: linear-gradient(135deg, #B58B56, #9A7241);
  -webkit-tap-highlight-color: transparent;
}
.dr-sq--dark { background: #22140A; box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55); }
button.dr-sq { cursor: default; }
.is-live button.dr-sq:not(:disabled) { cursor: pointer; }
button.dr-sq:focus-visible { outline: 2px solid #EAD491; outline-offset: -3px; }

/* The turn just played: where the piece left from and where it stopped. */
.dr-sq.is-from, .dr-sq.is-to { background: #3A2714; }

/* ── Pieces ──────────────────────────────────────────────────────────
   Yours are bone, Aura's are oxblood. A king carries a brass band and a K,
   so the difference never rests on colour alone. */
.dr-pc {
  display: grid;
  place-items: center;
  width: 76%;
  aspect-ratio: 1;
  border-radius: 50%;
  font-style: normal;
  --dr-ring: 0 0 0 0 transparent;
  --dr-band: inset 0 0 0 2px rgba(0, 0, 0, .16);
  box-shadow: var(--dr-band), inset 0 -3px 4px rgba(0, 0, 0, .28), 0 2px 3px rgba(0, 0, 0, .65), var(--dr-ring);
  transition: box-shadow .18s ease, transform .18s ease;
}
.dr-pc--you { background: radial-gradient(circle at 35% 30%, #F6F1E2, #D2C9B1 60%, #A0977F); color: #3B2512; }
.dr-pc--aura { background: radial-gradient(circle at 35% 30%, #CC5A41, #8F3021 62%, #5C1C12); color: #EAD491; }
.dr-pc.is-king { --dr-band: inset 0 0 0 3px #CEAB64; }
.dr-pc.is-king::after {
  content: "K";
  font-family: var(--cat-mono);
  font-weight: 700;
  font-size: clamp(.68rem, 2.7vw, 1rem);
  line-height: 1;
}

/* ── What you can touch ──────────────────────────────────────────────
   Gold ring: a piece you may pick up, or a square it may land on. Green
   ring: a piece that is about to be jumped, or a square one was just taken
   from. Nothing is greyed out. */
.is-live .dr-sq.is-can .dr-pc { --dr-ring: 0 0 0 2px rgba(234, 212, 145, .8); }
.is-live button.dr-sq.is-can:hover .dr-pc,
.is-live button.dr-sq.is-can:focus-visible .dr-pc {
  transform: translateY(-2px);
  --dr-ring: 0 0 0 2.5px #EAD491, 0 6px 16px rgba(234, 212, 145, .28);
}
.is-live .dr-sq.is-sel .dr-pc {
  transform: translateY(-2px);
  --dr-ring: 0 0 0 3px #EAD491, 0 0 18px rgba(234, 212, 145, .45);
}
.is-live .dr-sq.is-dest::after {
  content: "";
  width: 36%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid #EAD491;
  box-shadow: 0 0 12px rgba(234, 212, 145, .3);
  transition: background-color .18s ease;
}
.is-live button.dr-sq.is-dest:hover::after,
.is-live button.dr-sq.is-dest:focus-visible::after { background: rgba(234, 212, 145, .45); }
.dr-sq.is-over .dr-pc { --dr-ring: 0 0 0 2.5px var(--cat-good), 0 0 16px rgba(53, 200, 138, .4); }
.dr-sq.is-taken {
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55), inset 0 0 0 2px var(--cat-good), inset 0 0 14px rgba(53, 200, 138, .3);
}

/* ── The small boards in the worked example ──────────────────────── */
.fig .dr-grid { border-radius: 3px; }
.fig .dr-pc.is-king::after { font-size: .6rem; }
.fig .dr-sq.from .dr-pc { --dr-ring: 0 0 0 2px #EAD491; }
.fig .dr-sq.took {
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55), inset 0 0 0 2px var(--cat-good);
}
.fig .dr-sq.via::after {
  content: "";
  width: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(234, 212, 145, .7);
}

@media (prefers-reduced-motion: reduce) {
  .dr-pc, .dr-sq.is-dest::after { transition: none; }
  .is-live button.dr-sq.is-can:hover .dr-pc,
  .is-live button.dr-sq.is-can:focus-visible .dr-pc,
  .is-live .dr-sq.is-sel .dr-pc { transform: none; }
}