/* Mancala Stones: the home screen, the wooden board, its pits and stones. */
:root{--wood-a:#D39C66;--wood-b:#A56C3A;--wood-edge:#7C4C24;--hole-a:#5B3417;--hole-b:#7E4F28;--glow:#FFE08A;--aim:#7FE3CF}

/* home */
.home{align-items:center;justify-content:center;text-align:center;padding:16px}
.home-in{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(30em,100%)}
.logo{width:min(220px,60vw);height:auto;filter:drop-shadow(0 6px 14px rgba(124,76,36,.3))}
.home .title{font-size:clamp(2.3em,10vw,3.6em)}
.tagline{margin:0;color:var(--ink-soft);font-size:1.1em}
#levels .choice{min-width:4.6em;position:relative;font-size:1.05em}
#levels .choice[data-won]::after{content:"✓";position:absolute;top:-.55em;right:-.4em;width:1.35em;height:1.35em;line-height:1.35em;border-radius:50%;
  background:#2E9E5B;color:#fff;font-size:.75em;font-weight:800;box-shadow:0 0 0 2px var(--paper)}
.go{display:flex;gap:.6em;flex-wrap:wrap;justify-content:center}
.links{display:flex;gap:.2em;flex-wrap:wrap;justify-content:center}
@media (max-height:560px){.logo{display:none}}
@media (max-height:430px){.tagline{display:none}.home-in{gap:8px}.home .title{font-size:2.3em}.foot{display:none}}

/* the game */
#game{align-items:stretch}
.bar{display:flex;align-items:center;gap:10px;padding:max(8px,env(safe-area-inset-top)) 12px 4px;width:min(100%,980px);margin:0 auto;flex:none}
.status{flex:1;margin:0;text-align:center;font-weight:700;font-size:1.12em;line-height:1.25;min-height:1.25em}
.felt{flex:1;min-height:0;display:grid;place-items:center;padding:8px;position:relative}

/* the wide board: North's store, two rows of six, South's store */
.board{--u:min(calc((100vw - 108px)/8),calc((100vh - 116px)/2),132px);--st:calc(var(--u)*.2);--fs:clamp(15px,calc(var(--u)*.25),26px);
  display:grid;grid-template-columns:repeat(8,var(--u));grid-template-rows:repeat(2,var(--u));gap:8px;padding:12px;
  border-radius:calc(var(--u)*.55);background:linear-gradient(180deg,var(--wood-a),var(--wood-b));
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(0,0,0,.18),0 0 0 2px var(--wood-edge),0 14px 34px rgba(90,52,20,.35)}
@supports (height:100dvh){.board{--u:min(calc((100vw - 108px)/8),calc((100dvh - 116px)/2),132px)}}
.p13{grid-area:1/1/3/2}.p6{grid-area:1/8/3/9}
.p0{grid-area:2/2}.p1{grid-area:2/3}.p2{grid-area:2/4}.p3{grid-area:2/5}.p4{grid-area:2/6}.p5{grid-area:2/7}
.p12{grid-area:1/2}.p11{grid-area:1/3}.p10{grid-area:1/4}.p9{grid-area:1/5}.p8{grid-area:1/6}.p7{grid-area:1/7}

.pit,.store{position:relative;border:0;padding:0;margin:0;border-radius:999px;
  background:radial-gradient(ellipse at 50% 38%,var(--hole-a),var(--hole-b) 78%);
  box-shadow:inset 0 calc(var(--u)*.06) calc(var(--u)*.12) rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.35);touch-action:manipulation;transition:box-shadow .15s,transform .15s}
.pit{cursor:pointer}
.stones{position:absolute;inset:0;pointer-events:none}
.st{position:absolute;width:var(--st);height:var(--st);margin:calc(var(--st)/-2) 0 0 calc(var(--st)/-2);border-radius:50%;
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.85) 0 14%,rgba(255,255,255,0) 30%),radial-gradient(circle at 50% 50%,var(--c) 55%,color-mix(in srgb,var(--c) 70%,#000) 100%);
  box-shadow:0 calc(var(--st)*.08) calc(var(--st)*.14) rgba(0,0,0,.5)}
.n{position:absolute;top:-8px;right:-8px;min-width:1.75em;height:1.75em;padding:0 .3em;border-radius:999px;display:grid;place-items:center;z-index:2;
  font:800 var(--fs)/1 var(--sans);color:var(--ink);background:var(--paper-hi);box-shadow:0 2px 6px rgba(60,30,10,.35);font-variant-numeric:tabular-nums;pointer-events:none}
.store .n{top:10px;left:50%;right:auto;transform:translateX(-50%);font-size:calc(var(--fs)*1.25)}
.store .lab{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-weight:800;font-size:clamp(13px,calc(var(--u)*.17),18px);color:#FFF4E2;
  text-shadow:0 1px 2px rgba(0,0,0,.6);pointer-events:none;z-index:2;white-space:nowrap}
.store.turn{box-shadow:inset 0 calc(var(--u)*.06) calc(var(--u)*.12) rgba(0,0,0,.5),0 0 0 3px var(--glow),0 0 18px rgba(255,224,138,.7)}

/* whose pits can be played, where the last stone lands, the last move */
.pit.legal{box-shadow:inset 0 calc(var(--u)*.06) calc(var(--u)*.12) rgba(0,0,0,.5),0 0 0 3px rgba(255,224,138,.75)}
@media (hover:hover){.pit.legal:hover{transform:translateY(-2px);box-shadow:inset 0 calc(var(--u)*.06) calc(var(--u)*.12) rgba(0,0,0,.4),0 0 0 4px var(--glow),0 0 20px rgba(255,224,138,.8)}}
.pit:focus{outline:none}
.pit:focus-visible{box-shadow:inset 0 calc(var(--u)*.06) calc(var(--u)*.12) rgba(0,0,0,.4),0 0 0 4px #fff,0 0 0 7px var(--accent)}
.pit.aim,.store.aim{box-shadow:inset 0 calc(var(--u)*.06) calc(var(--u)*.12) rgba(0,0,0,.5),0 0 0 3px var(--aim),0 0 16px rgba(127,227,207,.8)}
.pit.from::after{content:"";position:absolute;left:50%;bottom:6%;width:12%;height:6%;margin-left:-6%;border-radius:4px;background:rgba(255,224,138,.65)}
.board.wait .pit{cursor:default}
.pit.hit,.store.hit{animation:hit .2s ease-out}
@keyframes hit{45%{transform:scale(1.07)}}
.st.pop{animation:drop .26s cubic-bezier(.3,1.5,.5,1)}
@keyframes drop{from{transform:translateY(-70%) scale(1.5);opacity:0}}
.pit.cap{animation:cap .5s ease-in-out}
@keyframes cap{50%{box-shadow:0 0 0 5px var(--glow),0 0 28px var(--glow);transform:scale(1.08)}}
.pit.shake{animation:shake .28s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.float{position:absolute;left:50%;top:40%;z-index:6;font:900 calc(var(--fs)*1.4)/1 var(--sans);color:var(--glow);text-shadow:0 2px 4px rgba(0,0,0,.6);
  pointer-events:none;animation:floatup 1.05s ease-out forwards}
@keyframes floatup{from{transform:translate(-50%,0) scale(.7);opacity:0}20%{opacity:1;transform:translate(-50%,-10%) scale(1.15)}to{transform:translate(-50%,-120%);opacity:0}}

/* the tall board (portrait): your pits down the left, your store at the bottom */
@media (max-aspect-ratio:1/1){
  .board{--cw:min(calc((100vw - 52px)/2),210px);--ch:min(calc((100vh - 150px)/8),100px);--u:var(--ch);--st:calc(var(--ch)*.24);--fs:clamp(15px,calc(var(--ch)*.32),26px);
    grid-template-columns:repeat(2,var(--cw));grid-template-rows:repeat(8,var(--ch));gap:6px;padding:10px;border-radius:calc(var(--ch)*.6)}
  @supports (height:100dvh){.board{--ch:min(calc((100dvh - 150px)/8),100px)}}
  .p13{grid-area:1/1/2/3}.p6{grid-area:8/1/9/3}
  .p0{grid-area:2/1}.p1{grid-area:3/1}.p2{grid-area:4/1}.p3{grid-area:5/1}.p4{grid-area:6/1}.p5{grid-area:7/1}
  .p7{grid-area:7/2}.p8{grid-area:6/2}.p9{grid-area:5/2}.p10{grid-area:4/2}.p11{grid-area:3/2}.p12{grid-area:2/2}
  .pit .n{top:50%;transform:translateY(-50%)}
  .pit.side0 .n{left:6px;right:auto}
  .pit.side1 .n{right:6px}
  .store .lab{left:16px;top:50%;bottom:auto;transform:translateY(-50%)}
  .store .n{right:12px;left:auto;top:50%;transform:translateY(-50%)}
}

.banner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(43,33,24,.92);color:#fff;padding:.7em 1.3em;border-radius:16px;
  font-weight:700;font-size:1.1em;text-align:center;pointer-events:none;z-index:8;animation:pop .25s cubic-bezier(.2,.9,.3,1.3);max-width:90%}
@keyframes pop{from{opacity:0;transform:translate(-50%,-50%) scale(.85)}}
.confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:25}

/* cards */
.veil{z-index:40}
.result .kicker{text-align:center;color:var(--ink-dim);font-weight:700;font-size:.85em;letter-spacing:.04em;margin:-.3em 0 .4em}
.result .final{display:flex;justify-content:center;align-items:flex-end;gap:.8em;margin:.1em 0 .4em;font-size:1.9em;font-weight:800;font-variant-numeric:tabular-nums}
.result .final span{display:flex;flex-direction:column;align-items:center;line-height:1.05}
.result .final small{font-size:.42em;color:var(--ink-soft);font-weight:700}
.result .final .dash{color:var(--ink-dim)}
.how li{margin:.25em 0}
.how ul{padding-left:1.1em;margin:.2em 0}
.card .choices{margin-bottom:.6em}
@media (max-height:520px){
  .card{padding:.7em 1.1em .7em}
  .card h2{margin-bottom:.3em}
  .card .actions{flex-direction:row;flex-wrap:wrap;justify-content:center;margin-top:.4em}
  .card .pill{padding:.5em 1.4em}
  .result .final{margin:0 0 .1em;font-size:1.6em}
  .bar{padding-top:max(4px,env(safe-area-inset-top));padding-bottom:0}
  .bar .jewel{width:44px;height:44px}
}
/* the tall board: stones step aside from the count */
@media (max-aspect-ratio:1/1){.pit.side0 .stones{left:22%}.pit.side1 .stones{right:22%}}