/* =============================================================
   GAME: Mancala (Kalah)
   ============================================================= */
.board-mancala {
  --cell: min(calc((100vw - 104px) / 8), 60px);
  --mc-glow: #2bffa0;
  display: grid; grid-template-columns: repeat(8, var(--cell)); grid-template-rows: repeat(2, calc(var(--cell) + 17px));
  gap: 6px 3px; padding: 10px 8px; border-radius: 22px;
  --pit: inset 0 5px 9px rgba(0, 0, 0, .8), inset 0 -2px 3px rgba(80, 255, 190, .12), 0 1px 0 rgba(160, 255, 220, .14), 0 -1px 0 rgba(0, 0, 0, .4);
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(120, 255, 200, .12), transparent 60%),
    linear-gradient(180deg, #0f3a33 0%, #0a2724 55%, #061816 100%);
  box-shadow: 0 0 0 2px var(--mc-glow), 0 0 26px rgba(43, 255, 160, .35),
    inset 0 2px 0 rgba(255, 255, 255, .1), inset 0 -6px 0 rgba(0, 0, 0, .3), 0 12px 24px rgba(0, 0, 0, .35);
}
.mc-pit, .mc-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;
}
.mc-pit.top, .mc-store.top { flex-direction: column-reverse; justify-content: flex-start; }
.mc-pit { cursor: default; -webkit-tap-highlight-color: transparent; }
.mc-seeds {
  position: relative; display: block; flex: none; width: var(--cell); height: var(--cell); border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #010806 0%, #03130e 50%, #082a20 85%, #0d3a2c 100%);
  box-shadow: var(--pit);
  transition: background .15s, box-shadow .15s;
}
/* seeds: glossy glass pebbles, slightly oval, each turned a little */
.mc-seeds i {
  --c: #2fe08c;
  position: absolute; width: calc(var(--cell) * .25); height: calc(var(--cell) * .21); border-radius: 50%;
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .95) 0, rgba(255, 255, 255, .5) 14%, transparent 36%),
    radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--c) 85%, #fff) 0%, var(--c) 45%, color-mix(in srgb, var(--c) 45%, #000) 100%);
  box-shadow: 0 1px 1.5px rgba(0, 0, 0, .7), inset 0 -1px 1px rgba(0, 0, 0, .3);
}
.mc-n { display: block; min-width: 20px; text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; }
.mc-pit.legal { cursor: pointer; }
.mc-pit.legal .mc-seeds { box-shadow: var(--pit), 0 0 0 2px var(--mc-glow), 0 0 12px rgba(43, 255, 160, .45); }
.mc-pit.legal .mc-n { color: var(--ink); }
.mc-pit.legal:hover .mc-seeds { background: radial-gradient(circle at 50% 38%, #031510 0%, #072a1f 50%, #0f4434 85%, #155a44 100%); }
.mc-pit:focus-visible { outline: none; }
.mc-pit:focus-visible .mc-seeds { outline: 3px solid var(--focus); outline-offset: 2px; }
.mc-pit.last .mc-seeds { box-shadow: var(--pit), 0 0 0 2px var(--t-gold), 0 0 12px rgba(255, 210, 63, .45); }
.land .mc-n { color: var(--t-gold); }

.mc-store { grid-row: span 2; }
.mc-store .mc-seeds { width: 100%; height: auto; flex: 1; border-radius: 999px; }
.mc-store .mc-seeds { background: radial-gradient(90% 60% at 50% 40%, #010806 0%, #03130e 55%, #082a20 88%, #0d3a2c 100%); }
.mc-store.s1 .mc-seeds { box-shadow: var(--pit), 0 0 0 2px var(--p1), 0 0 14px color-mix(in srgb, var(--p1) 40%, transparent); }
.mc-store.s2 .mc-seeds { box-shadow: var(--pit), 0 0 0 2px var(--p2), 0 0 14px color-mix(in srgb, var(--p2) 40%, transparent); }
.mc-store .mc-n { font-size: 15px; color: #fff; }

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