/* =============================================================
   GAME: Oware — carved dark wood, amber neon, grey nicker seeds
   ============================================================= */
.board-oware {
  --cell: min(calc((100vw - 104px) / 8), 62px);
  --ow-glow: #ffa04d;
  display: grid; grid-template-columns: repeat(8, var(--cell)); grid-template-rows: repeat(2, calc(var(--cell) + 17px));
  gap: 6px 3px; padding: 12px 8px; border-radius: 26px 26px 26px 26px / 40px 40px 40px 40px;
  --pit: inset 0 6px 10px rgba(0, 0, 0, .85), inset 0 -2px 3px rgba(255, 170, 90, .14), 0 1px 0 rgba(255, 200, 140, .16), 0 -1px 0 rgba(0, 0, 0, .45);
  background:
    repeating-linear-gradient(92deg, rgba(255, 190, 120, .035) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(88deg, rgba(0, 0, 0, .12) 0 1px, transparent 1px 13px),
    radial-gradient(120% 70% at 50% -10%, rgba(255, 170, 90, .16), transparent 60%),
    linear-gradient(180deg, #4a2614 0%, #331a0f 55%, #200f09 100%);
  box-shadow: 0 0 0 2px var(--ow-glow), 0 0 26px rgba(255, 160, 77, .35),
    inset 0 2px 0 rgba(255, 220, 180, .12), inset 0 -7px 0 rgba(0, 0, 0, .35), 0 12px 24px rgba(0, 0, 0, .35);
}
.ow-pit, .ow-store {
  position: relative; border: 0; padding: 0; margin: 0; background: transparent; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px;
  font: 700 12px/15px var(--font-body); min-width: 0; min-height: 0;
}
.ow-pit.top, .ow-store.top { flex-direction: column-reverse; }
.ow-pit { cursor: default; -webkit-tap-highlight-color: transparent; }
.ow-seeds {
  position: relative; display: block; flex: none; width: var(--cell); height: var(--cell); border-radius: 46% 46% 50% 50%;
  background: radial-gradient(circle at 50% 36%, #0a0402 0%, #170a05 50%, #2c150a 85%, #3d1f10 100%);
  box-shadow: var(--pit);
  transition: background .15s, box-shadow .15s;
}
/* nicker seeds: hard, round, grey-green with a soft shine */
.ow-seeds i {
  --c: #b9c2b0;
  position: absolute; width: calc(var(--cell) * .25); height: calc(var(--cell) * .225); border-radius: 50%;
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .9) 0, rgba(255, 255, 255, .35) 15%, transparent 36%),
    radial-gradient(circle at 50% 58%, color-mix(in srgb, var(--c) 90%, #fff) 0%, var(--c) 48%, color-mix(in srgb, var(--c) 40%, #000) 100%);
  box-shadow: 0 1.5px 2px rgba(0, 0, 0, .8), inset 0 -1px 1px rgba(0, 0, 0, .3);
}
.ow-n { display: block; min-width: 20px; text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; }
.ow-pit.legal { cursor: pointer; }
.ow-pit.legal .ow-seeds { box-shadow: var(--pit), 0 0 0 2px var(--ow-glow), 0 0 12px rgba(255, 160, 77, .5); }
.ow-pit.legal .ow-n { color: var(--ink); }
.ow-pit.legal:hover .ow-seeds { background: radial-gradient(circle at 50% 36%, #170904 0%, #2a1309 50%, #44210f 85%, #5a2c14 100%); }
.ow-pit:focus-visible { outline: none; }
.ow-pit:focus-visible .ow-seeds { outline: 3px solid var(--focus); outline-offset: 2px; }
.ow-pit.last .ow-seeds { box-shadow: var(--pit), 0 0 0 2px var(--t-gold), 0 0 12px rgba(255, 210, 63, .45); }
.ow-pit.land .ow-n { color: var(--t-gold); }

/* granaries at the ends hold the captured seeds */
.ow-store { grid-row: span 2; }
.ow-store .ow-seeds { width: 100%; height: auto; flex: 1; border-radius: 999px; }
.ow-store .ow-seeds { background: radial-gradient(90% 60% at 50% 40%, #0a0402 0%, #170a05 55%, #2c150a 88%, #3d1f10 100%); }
.ow-store.s1 .ow-seeds { box-shadow: var(--pit), 0 0 0 2px var(--p1), 0 0 14px color-mix(in srgb, var(--p1) 40%, transparent); }
.ow-store.s2 .ow-seeds { box-shadow: var(--pit), 0 0 0 2px var(--p2), 0 0 14px color-mix(in srgb, var(--p2) 40%, transparent); }
.ow-store .ow-n { font-size: 15px; color: #fff; }

.drop .ow-seeds { animation: owdrop .22s ease-out; }
@keyframes owdrop { 40% { transform: scale(1.07); box-shadow: var(--pit), 0 0 0 2px rgba(255, 160, 77, .7), 0 0 14px rgba(255, 160, 77, .5); } }
.drop .ow-seeds i:last-child { animation: owseed .25s ease-out; }
@keyframes owseed { from { transform: translate(-50%, -120%) rotate(var(--r, 0deg)) scale(1.3); opacity: 0; } }
.taken .ow-seeds { animation: owtaken .6s ease-out; }
@keyframes owtaken { 30% { background: #5a1830; box-shadow: 0 0 0 2px var(--t-red), 0 0 18px var(--t-red); } }