/* A recognizable wooden Kalah board with roomy pits and readable counts. */
:root:not([data-game="mancala"]) .only-mancala { display: none !important; }
:root[data-game="mancala"] .only-gomoku,
:root[data-game="mancala"] .only-xiangqi,
:root[data-game="mancala"] .only-checkers,
:root[data-game="mancala"] .only-hex,
:root[data-game="mancala"] .only-tic-tac-toe,
:root[data-game="mancala"] .only-connect-four,
:root[data-game="mancala"] .only-battleship { display: none !important; }
/* Scoped reference-led exception: the board is a carved object, not page chrome. */
:root[data-game="mancala"] .app { --col: min(100%, 1000px); }
:root[data-game="mancala"] .board-area { --invite-top: calc(100% - 84px); --invite-bottom: auto; --invite-reserve: 196px; }
.mancala-wrap { --mancala-teal: #2f8a8e; --wood: #eed6b2; display: grid; grid-template-columns: .82fr 6.7fr .82fr; align-items: stretch; gap: 2.2%; aspect-ratio: auto; box-sizing: border-box; padding: clamp(32px, 5.4vw, 54px) 2.4% clamp(36px, 6vw, 60px); border: 0; border-radius: 3.4% / 9%; background: linear-gradient(180deg, #fff8ec66, #fff8ec00 22%, #fff8ec00 78%, #b98a5512), repeating-linear-gradient(91deg, #b58a5a0b 0 1px, #00000000 1px 5px, #fff6e612 5px 7px, #00000000 7px 13px), linear-gradient(100deg, #efd8b6, #f2ddbe 38%, #ecd3ad 72%, #f0d9b8); box-shadow: inset 0 0 0 1px #d8b78c80, inset 0 2px 0 #fffaf0e6, inset 0 -2px 1px #b58a5a4d, 0 1px 0 #dcbc91, 0 4px 0 #cfa77a, 0 5px 1px #a77d5040, 0 20px 36px -14px #6e4b2a59; }
.mancala-wrap::before { display: none; }
.mancala-wrap::after { display: none; }
.mancala-pit-grid { position: relative; min-width: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); gap: clamp(48px, 4.8vw, 60px) 2.7%; align-items: center; }
.mancala-pit, .mancala-store { position: relative; box-sizing: border-box; padding: 0; border: 0; color: #3a3835; background: radial-gradient(circle at 50% 64%, #f1dab8 0 34%, #ead0a8 60%, #dfbf92 88%, #d6b184); box-shadow: inset 0 7px 10px -2px #8a5a2a6b, inset 0 2px 3px #8a5a2a40, inset 0 -2px 2px #fff6e5b3, 0 1.5px 0 #fffaf0e0, 0 -1px 0 #ad845859; }
.mancala-pit { width: 100%; aspect-ratio: 1; min-height: 44px; min-width: 44px; border-radius: 50%; cursor: default; -webkit-tap-highlight-color: transparent; }
.mancala-store { border-radius: 30% / 9.5%; min-width: 0; }
.mancala-side-label { position: absolute; z-index: 1; top: 7px; left: 50%; transform: translateX(-50%); color: #254e50; font: 700 12px/1 var(--sans); pointer-events: none; }
.mancala-row-label { --side-color: #2f8794; position: absolute; left: 50%; transform: translateX(-50%); font: 700 clamp(12px, 1.4vw, 16px)/1 var(--sans); pointer-events: none; }
.mancala-row-north { --side-color: #a3c6be; color: #345c56; top: calc(50% - 18px); }
.mancala-row-label::before { content: ""; display: inline-block; width: .65em; height: .65em; margin-right: .4em; border-radius: 50%; background: var(--side-color); box-shadow: inset 0 0 0 1px #254e5033; }
.mancala-row-south { color: #17636d; top: calc(50% + 5px); }
.mancala-wrap[data-bottom="north"] .mancala-row-north { top: calc(50% + 5px); }
.mancala-wrap[data-bottom="north"] .mancala-row-south { top: calc(50% - 18px); }
.mancala-pit:disabled { opacity: 1; }
.mancala-pit.is-own:not(:disabled) { cursor: pointer; }
.mancala-pit.is-preview { outline: 2px solid var(--mancala-teal); outline-offset: -2px; }
@media (hover: hover) { .mancala-pit.is-own:hover:not(:disabled) { outline: 2px solid var(--mancala-teal); outline-offset: -2px; } }
.mancala-pit.is-last .mancala-count, .mancala-store.is-last .mancala-count, .mancala-store.is-capture-store .mancala-count, .mancala-store.is-sweep .mancala-count { color: #17636d; font-weight: 700; }
.mancala-pit.is-source .mancala-count { color: #17636d; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.mancala-pit:focus-visible { outline: 3px solid #225b60; outline-offset: -3px; }
.mancala-seeds { display: block; position: absolute; inset: 8%; pointer-events: none; container-type: size; }
.mancala-store .mancala-seeds { inset: 26px 5% 5%; }
.mancala-seed { display: block; position: absolute; left: var(--x); top: var(--y); width: calc(var(--s) * 1%); width: calc(var(--s) * 1cqmin); aspect-ratio: 1 / .84; transform: translate(-50%, -50%) rotate(var(--a)); border-radius: 50% 47% 45% 52% / 55% 50% 52% 46%; background: radial-gradient(62% 48% at 36% 28%, #ffffff42, #ffffff00 76%), radial-gradient(90% 85% at 68% 82%, var(--stone-deep), #00000000 74%), var(--stone); box-shadow: inset -1px -2px 3px #00203024, inset 1px 1px 1px #ffffff4d, 0 1.5px 1px #5c3c1e4d, 0 3px 5px -1px #5c3c1e33; }
.mancala-shape-1 { border-radius: 44% 56% 50% 50% / 52% 46% 56% 48%; aspect-ratio: 1 / .78; }
.mancala-shape-2 { border-radius: 52% 48% 56% 44% / 48% 56% 44% 52%; aspect-ratio: 1 / .9; }
.mancala-shape-3 { border-radius: 58% 42% 48% 52% / 50% 50% 50% 50%; aspect-ratio: 1 / .74; }
.mancala-stone-0 { --stone: #24578f; --stone-deep: #173d6b; }
.mancala-stone-1 { --stone: #d9e7e3; --stone-deep: #b5ccc6; }
.mancala-stone-2 { --stone: #2f8794; --stone-deep: #1d6573; }
.mancala-stone-3 { --stone: #33987f; --stone-deep: #207461; }
.mancala-stone-4 { --stone: #b7d7d3; --stone-deep: #8fb9b4; }
.mancala-count { position: absolute; left: 0; right: 0; text-align: center; font: 600 clamp(15px, 2.15vw, 23px)/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: 0; color: #3a3835; pointer-events: none; }
.mancala-pit .mancala-count { bottom: calc(-1em - 6px); }
.mancala-pit:nth-child(-n+6) .mancala-count { bottom: auto; top: calc(-1em - 6px); }
.mancala-store .mancala-count { top: calc(100% + 8px); }
/* Reverse positions, not the whole object: lighting and numeric labels stay upright. */
.mancala-wrap[data-bottom="north"] .mancala-north-store { grid-column: 3; grid-row: 1; }
.mancala-wrap[data-bottom="north"] .mancala-south-store { grid-column: 1; grid-row: 1; }
.mancala-wrap[data-bottom="north"] .mancala-pit-grid { grid-column: 2; grid-row: 1; }
.mancala-wrap[data-bottom="north"] .mancala-pit:nth-child(1) { grid-area: 2 / 6; }
.mancala-wrap[data-bottom="north"] .mancala-pit:nth-child(2) { grid-area: 2 / 5; }
.mancala-wrap[data-bottom="north"] .mancala-pit:nth-child(3) { grid-area: 2 / 4; }
.mancala-wrap[data-bottom="north"] .mancala-pit:nth-child(4) { grid-area: 2 / 3; }
.mancala-wrap[data-bottom="north"] .mancala-pit:nth-child(5) { grid-area: 2 / 2; }
.mancala-wrap[data-bottom="north"] .mancala-pit:nth-child(6) { grid-area: 2 / 1; }
.mancala-wrap[data-bottom="north"] .mancala-pit:nth-child(7) { grid-area: 1 / 6; }
.mancala-wrap[data-bottom="north"] .mancala-pit:nth-child(8) { grid-area: 1 / 5; }
.mancala-wrap[data-bottom="north"] .mancala-pit:nth-child(9) { grid-area: 1 / 4; }
.mancala-wrap[data-bottom="north"] .mancala-pit:nth-child(10) { grid-area: 1 / 3; }
.mancala-wrap[data-bottom="north"] .mancala-pit:nth-child(11) { grid-area: 1 / 2; }
.mancala-wrap[data-bottom="north"] .mancala-pit:nth-child(12) { grid-area: 1 / 1; }
.mancala-wrap[data-bottom="north"] .mancala-pit:nth-child(-n+6) .mancala-count { top: auto; bottom: calc(-1em - 6px); }
.mancala-wrap[data-bottom="north"] .mancala-pit:nth-child(n+7) .mancala-count { bottom: auto; top: calc(-1em - 6px); }
.board-motion-layer[data-mancala] .mancala-count { color: #3a3835; }
/* Motion sprites: absolute position comes only from the compositor transform. */
.board-motion-layer[data-mancala] .mancala-seed { left: 0; top: 0; width: auto; transform-origin: 50% 50%; will-change: transform; }
.board-motion-layer[data-mancala] .mancala-seed.is-raised { box-shadow: inset -1px -2px 3px #00203024, inset 1px 1px 1px #ffffff4d, 0 9px 10px -3px #5c3c1e4d; }
@media (max-width: 620px) {
  :root[data-game="mancala"] .board-area { --invite-top: auto; --invite-bottom: -72px; --invite-reserve: 88px; }
  .mancala-wrap { grid-template-columns: 36px minmax(0, 1fr) 36px; grid-template-rows: auto; column-gap: 3px; aspect-ratio: auto; padding: 32px 5px 36px; border-radius: 18px; }
  .mancala-north-store { grid-area: 1 / 1; }
  .mancala-south-store { grid-area: 1 / 3; }
  .mancala-wrap[data-bottom="north"] .mancala-north-store { grid-area: 1 / 3; }
  .mancala-wrap[data-bottom="north"] .mancala-south-store { grid-area: 1 / 1; }
  .mancala-pit-grid, .mancala-wrap[data-bottom="north"] .mancala-pit-grid { grid-area: 1 / 2; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); gap: 48px 2px; }
  .mancala-pit { min-width: 0; min-height: 0; }
  .mancala-store { border-radius: 16px; }
  .mancala-store .mancala-side-label { display: block; position: absolute; z-index: 2; top: 8px; left: 50%; transform: translateX(-50%); color: #176c70; font: 700 12px/1 var(--sans); pointer-events: none; }
  .mancala-store .mancala-count { left: 0; right: 0; top: auto; bottom: 8px; transform: none; min-width: 0; font-size: 17px; }
  .mancala-count { font-size: 16px; }
  .mancala-store .mancala-seeds { inset: 28px 6%; }
  .mancala-pit .mancala-count, .mancala-wrap[data-bottom="north"] .mancala-pit:nth-child(-n+6) .mancala-count { bottom: -24px; }
  .mancala-wrap:not([data-bottom="north"]) .mancala-pit:nth-child(-n+6) .mancala-count, .mancala-wrap[data-bottom="north"] .mancala-pit:nth-child(n+7) .mancala-count { top: -24px; bottom: auto; }
}
@media (prefers-reduced-motion: reduce) { .mancala-pit, .mancala-store { transition: none; } }
.mancala-chip-stone { flex: none; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #64b6b4, #197d8a 67%, #075268); box-shadow: inset 0 0 0 1px rgba(65,37,19,.25), 0 1px 2px rgba(0,0,0,.2); }
.mancala-chip-stone.north { background: radial-gradient(circle at 35% 30%, #d5e6de, #a3c6be 67%, #7daca7); }
.side-pip[data-color="south"] { background: radial-gradient(circle at 35% 30%, #64b6b4, #197d8a 70%); }
.side-pip[data-color="north"] { background: radial-gradient(circle at 35% 30%, #d5e6de, #a3c6be 70%); }
.result-mancala { width: 40px; height: 40px; }
.result-mancala[data-color="north"] { background: radial-gradient(circle at 35% 30%, #d5e6de, #a3c6be 67%, #7daca7); }
.result-mancala[data-color=""] { background: linear-gradient(90deg, #8b552c 50%, #bd9d70 50%); }
.mancala-note { margin: 10px 0 0; color: var(--muted); font-size: 14px; line-height: 1.4; text-align: center; }