.g-mancala{--m-wood:#c58b52;--m-wood-2:#a96f3c;--m-pit:#8a5530;--m-pit-in:#6f4224;--m-ink:#fff8ec;container-type:inline-size;margin:0 auto;max-width:100%;padding:8px;border-radius:16px;background:linear-gradient(160deg,var(--m-wood),var(--m-wood-2));box-shadow:var(--shadow);color:var(--m-ink)}:root[data-theme=dark] .g-mancala{--m-wood:#5d4331;--m-wood-2:#46301f;--m-pit:#33241a;--m-pit-in:#281b13}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .g-mancala{--m-wood:#5d4331;--m-wood-2:#46301f;--m-pit:#33241a;--m-pit-in:#281b13}}.g-mancala .m-name{font-size:.85rem;font-weight:600;padding:2px 8px;opacity:.85;letter-spacing:.02em}.g-mancala .m-name--top{text-align:left}.g-mancala .m-name--bot{text-align:right}.g-mancala .m-name.is-turn{opacity:1;color:#ffe27a}.g-mancala .m-grid{display:grid;grid-template-columns:1.2fr repeat(6,1fr)1.2fr;grid-template-rows:auto auto;gap:2cqw}.g-mancala .m-pit,.g-mancala .m-store{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:2px;padding:0;margin:0;background:0 0;border:0;color:inherit;font:inherit;min-width:0}.g-mancala .m-pit--top,.g-mancala .m-store--left{flex-direction:column-reverse}.g-mancala .m-pit{cursor:default;-webkit-tap-highlight-color:transparent}.g-mancala .m-pit.is-active:not(.is-empty){cursor:pointer}.g-mancala .m-dots{position:relative;display:block;width:100%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 40%,var(--m-pit) 0 55%,var(--m-pit-in) 100%);box-shadow:inset 0 3px 6px rgba(0,0,0,.45),0 1px rgba(255,255,255,.25);transition:box-shadow .15s,transform .15s}.g-mancala .m-store{flex:1}.g-mancala .m-store .m-dots{aspect-ratio:auto;flex:1;min-height:0;height:100%;border-radius:999px}.g-mancala .m-store .m-dots{flex:auto}.g-mancala .m-seed{position:absolute;width:17%;aspect-ratio:1;margin:-8.5% 0 0 -8.5%;border-radius:50%;box-shadow:0 1px 1px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.35)}.g-mancala .m-store .m-seed{width:22%;margin:-11% 0 0 -11%}.g-mancala .m-dots[data-size=m] .m-seed{width:13%;margin:-6.5% 0 0 -6.5%}.g-mancala .m-dots[data-size=s] .m-seed{width:10%;margin:-5% 0 0 -5%}.g-mancala .m-store .m-dots[data-size=m] .m-seed{width:17%;margin:-8.5% 0 0 -8.5%}.g-mancala .m-store .m-dots[data-size=s] .m-seed{width:13%;margin:-6.5% 0 0 -6.5%}.g-mancala .m-seed--0{background:radial-gradient(circle at 35% 30%,#fff3b0,#e6b422)}.g-mancala .m-seed--1{background:radial-gradient(circle at 35% 30%,#ffc1a8,#e0543a)}.g-mancala .m-seed--2{background:radial-gradient(circle at 35% 30%,#bfe6ff,#2f86c8)}.g-mancala .m-seed--3{background:radial-gradient(circle at 35% 30%,#cdf2c2,#3f9d4e)}.g-mancala .m-seed--4{background:radial-gradient(circle at 35% 30%,#f1d0ff,#9a52c2)}.g-mancala .m-n{display:block;text-align:center;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;font-size:clamp(13px,4.4cqw,26px);text-shadow:0 1px 2px rgba(0,0,0,.5)}.g-mancala .m-store .m-n{font-size:clamp(16px,5.4cqw,32px)}.g-mancala .m-pit.is-active:not(.is-empty):hover .m-dots{transform:scale(1.05);box-shadow:inset 0 3px 6px rgba(0,0,0,.45),0 0 0 3px rgba(255,226,122,.85)}.g-mancala .m-pit.is-turn .m-dots{box-shadow:inset 0 3px 6px rgba(0,0,0,.45),0 0 0 2px rgba(255,226,122,.55)}.g-mancala .m-pit.is-last .m-dots{box-shadow:inset 0 3px 6px rgba(0,0,0,.45),0 0 0 3px #fff,0 0 12px 3px rgba(255,255,255,.6)}.g-mancala .m-store.is-last .m-dots{box-shadow:inset 0 3px 6px rgba(0,0,0,.45),0 0 0 3px #fff}.g-mancala .m-pit.is-hint .m-dots{box-shadow:inset 0 3px 6px rgba(0,0,0,.45),0 0 0 4px #5ee0a0}.g-mancala .m-pit:focus-visible{outline:none}.g-mancala .m-pit:focus-visible .m-dots{box-shadow:inset 0 3px 6px rgba(0,0,0,.45),0 0 0 4px var(--focus)}.g-mancala .m-seed{transition:none}@media(prefers-reduced-motion:no-preference){.g-mancala .m-pit.is-last .m-seed:last-child,.g-mancala .m-store.is-last .m-seed:last-child{animation:m-drop .18s ease-out}}@keyframes m-drop{from{transform:scale(1.7)}to{transform:scale(1)}}@media(max-width:420px){.g-mancala{padding:6px;border-radius:12px}.g-mancala .m-name{font-size:.78rem}}@media(max-width:420px){.g-mancala .m-grid{grid-template-columns:1fr repeat(6,1fr)1fr;gap:1.6cqw}}@media(max-width:560px){.game__bar{gap:6px}.game__bar select{min-height:36px;font-size:.88rem;padding:0 4px;max-width:100%}.game__bar .btn{min-height:36px;padding:0 10px}.game__stats{margin:8px 0 6px;gap:6px}}