/* The Dara board — /arcade/dara. Loaded after arcade-game.css, which carries
   everything a rules page shares (the facts strip, the plank, the tally
   lines, the status line, numbered rules, figures, questions). This file is
   only the 5 by 6 grid of hollows and the stones that sit in them.

   Two kinds of stone, told apart by more than colour: yours are pale river
   stones, Aura's are brass bottle caps with a pressed ring. */

.dara { max-width: 560px; }
.dara-hand {
  font-family: var(--cat-mono);
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
  color: var(--cat-text-3);
  white-space: nowrap;
}

.dara-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(.3rem, 1.6vw, .7rem);
}
.dara-cell {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  aspect-ratio: 1;
  margin: 0;
  padding: 15%;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #1B1008, #0D0703 70%);
  box-shadow:
    inset 0 5px 10px rgba(0, 0, 0, .75),
    0 1px 0 rgba(234, 212, 145, .16);
  color: inherit;
  font: inherit;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow .18s ease, transform .18s ease;
}
.dara-stone {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  opacity: 0;
  transform: scale(.55);
  transition: opacity .18s ease, transform .18s ease;
}
.dara-cell.is-you .dara-stone,
.dara-cell.is-aura .dara-stone { opacity: 1; transform: none; }
.dara-cell.is-you .dara-stone,
.fig .cell .s.you {
  background: radial-gradient(circle at 35% 30%, #F1EFE4, #A9AA9A 62%, #6E6F62);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .55);
}
.dara-cell.is-aura .dara-stone,
.fig .cell .s.aura {
  background:
    radial-gradient(circle, transparent 0 42%, rgba(46, 28, 13, .55) 43% 50%, transparent 51%),
    radial-gradient(circle at 35% 30%, #EAD491, #B8913F 60%, #7A5A24);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .55);
}

/* A space or stone you may play is lit; one you may not is simply not lit.
   Gold for what you can place, lift or slide to. Green for a capture. */
.dara.is-live .dara-cell[aria-disabled="false"] {
  cursor: pointer;
  box-shadow:
    inset 0 5px 10px rgba(0, 0, 0, .75),
    0 0 0 1.5px rgba(234, 212, 145, .55);
}
.dara.is-live .dara-cell[aria-disabled="false"]:hover,
.dara.is-live .dara-cell[aria-disabled="false"]:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    inset 0 5px 10px rgba(0, 0, 0, .75),
    0 0 0 2px #EAD491,
    0 8px 18px rgba(234, 212, 145, .18);
}
.dara-cell:focus-visible { outline: 2px solid var(--cat-gold); outline-offset: 2px; }
.dara.is-live .dara-cell.is-picked {
  transform: translateY(-3px);
  box-shadow:
    inset 0 5px 10px rgba(0, 0, 0, .75),
    0 0 0 2.5px #EAD491,
    0 10px 20px rgba(234, 212, 145, .25);
}
.dara-cell.is-last { box-shadow: inset 0 5px 10px rgba(0, 0, 0, .75), 0 0 0 1.5px var(--cat-accent); }
.dara-cell.is-line {
  box-shadow: inset 0 5px 10px rgba(0, 0, 0, .75), 0 0 0 2px #EAD491, 0 0 18px rgba(234, 212, 145, .3);
}
.dara.is-live .dara-cell.is-prey {
  box-shadow: inset 0 5px 10px rgba(0, 0, 0, .75), 0 0 0 1.5px var(--cat-good);
}
.dara.is-live .dara-cell.is-prey:hover,
.dara.is-live .dara-cell.is-prey:focus-visible,
.dara-cell.is-taken {
  box-shadow:
    inset 0 5px 10px rgba(0, 0, 0, .75),
    0 0 0 2px var(--cat-good),
    0 0 22px rgba(53, 200, 138, .35);
}
.dara-cell.is-taken .dara-stone { opacity: .45; }

/* The worked example: the same board, smaller, with nothing to press. */
.fig .dara-grid { gap: .3rem; }
.fig .cell .s { display: block; width: 68%; aspect-ratio: 1; border-radius: 50%; }
.fig .cell.line { box-shadow: inset 0 3px 7px rgba(0, 0, 0, .75), 0 0 0 1.5px #EAD491; }

@media (max-width: 420px) {
  .dara .ayo-bank { gap: .55rem; }
}
@media (prefers-reduced-motion: reduce) {
  .dara-cell, .dara-stone { transition: none; }
  .dara.is-live .dara-cell[aria-disabled="false"]:hover,
  .dara.is-live .dara-cell[aria-disabled="false"]:focus-visible,
  .dara.is-live .dara-cell.is-picked { transform: none; }
}