/* Nine Men's Morris: a wooden board on the warm lacquer table. */
body{background:radial-gradient(ellipse at 50% 30%,#3a2814,var(--lacquer) 70%)}
:root{--wood:#CB9A58;--wood-hi:#DDB273;--wood-lo:#A87538;--groove:#3B2412}

/* home */
.home{align-items:center;justify-content:center;padding:1.2em 1em 2.6em;text-align:center;overflow:auto}
.home-in{display:flex;flex-direction:column;align-items:center;gap:.9em;max-width:34em;margin:auto}
.logo{width:84px;height:84px;border-radius:20px;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.home .title{font-size:clamp(2.1em,9vw,3.8em)}
.tagline{margin:0;color:var(--ink);font-size:1.15em}
#levels{justify-content:center}
#levels .choice{display:flex;flex-direction:column;align-items:center;min-width:6.2em;padding:.5em .9em;font-size:1.05em}
#levels .choice small{font-size:.72em;color:var(--ink-soft);font-weight:400}
#levels .choice[aria-pressed=true] small{color:#3B220C}
#levels .check{color:var(--jade)}
#levels .choice[aria-pressed=true] .check{color:#12503F}
.go{display:flex;gap:.6em;flex-wrap:wrap;justify-content:center}
.pill.quiet{background:rgba(246,236,212,.08);color:var(--brass-hi);box-shadow:0 0 0 1.5px var(--brass) inset}
.links{display:flex;gap:.3em;justify-content:center;flex-wrap:wrap}

/* the game: tools, words and the two sides over the board (portrait), or beside it (wide) */
.play{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto auto minmax(0,1fr);
  grid-template-areas:"tools" "status" "panels" "felt";padding:max(.4em,env(safe-area-inset-top)) max(.6em,env(safe-area-inset-right)) max(.4em,env(safe-area-inset-bottom)) max(.6em,env(safe-area-inset-left));gap:.3em}
.tools{grid-area:tools;display:flex;gap:.6em;align-items:center}
.tools #menu{margin-right:auto}
.tools .jewel{width:2.8em;height:2.8em}
.status{grid-area:status;margin:0;text-align:center;font:700 1.2em/1.25 var(--sans);color:var(--brass-hi);min-height:1.25em}
.status.bump{animation:bump .3s ease-out}
@keyframes bump{40%{transform:scale(1.06)}}
.panels{grid-area:panels;display:grid;grid-template-columns:1fr 1fr;gap:.5em}
.side{display:flex;flex-wrap:wrap;align-items:center;row-gap:.2em;gap:.55em;padding:.4em .6em;border-radius:.9em;border:1.5px solid var(--hair);background:rgba(27,18,10,.6);transition:background .2s,border-color .2s,box-shadow .2s;min-width:0}
.side.on{border-color:var(--brass);background:rgba(224,189,109,.14);box-shadow:0 0 0 3px rgba(224,189,109,.16)}
.side.won{border-color:var(--jade);background:rgba(28,109,88,.3)}
.side > span:first-of-type{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.side b{font-size:1.05em}
.side small{color:var(--ink-soft);font-size:.85em}
.side .man{width:1.7em;height:1.7em;flex:none}
.hand{display:flex;gap:3px;flex-basis:100%;padding-left:2.25em;min-height:.62em}
.hand i{width:.62em;height:.62em;border-radius:50%}
.hand i.light{background:#F1E3C4}
.hand i.dark{background:#2A1A10;box-shadow:0 0 0 1px var(--brass-lo)}

@media (min-aspect-ratio:5/4){
  .play{grid-template-columns:minmax(11em,30%) minmax(0,1fr);grid-template-rows:auto auto auto 1fr;grid-template-areas:"tools felt" "status felt" "panels felt" ". felt";column-gap:1em}
  .panels{grid-template-columns:1fr}
  .status{text-align:left;min-height:2.5em}
  .tools #menu{margin-right:0}
}
@media (min-width:1000px) and (min-height:700px){body{font-size:20px}}
@media (max-height:420px){
  body{font-size:16px}
  .hand{display:none}
  .side{padding:.25em .5em}
  .tools .jewel{width:2.6em;height:2.6em}
}

/* the board */
.felt{grid-area:felt;min-width:0;min-height:0;display:grid;place-items:center;container-type:size}
.board{position:relative;width:min(100cqw,100cqh);height:min(100cqw,100cqh);border-radius:5%;
  background:radial-gradient(circle at 30% 25%,var(--wood-hi),var(--wood) 55%,var(--wood-lo));
  box-shadow:inset 0 0 0 2px rgba(255,240,200,.25),inset 0 -6px 18px rgba(80,40,10,.35),0 14px 34px rgba(0,0,0,.55)}
.lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.lines path{fill:none;stroke:var(--groove);stroke-width:.075;stroke-linejoin:round}
.lines circle{fill:var(--groove)}
.flash{stroke:#FFF4C9;stroke-width:.2;stroke-linecap:round;filter:drop-shadow(0 0 .08px #fff);animation:flash 1.05s ease-out forwards}
@keyframes flash{0%{opacity:0;stroke-width:.05}20%{opacity:1;stroke-width:.24}100%{opacity:0;stroke-width:.14}}

.pt{position:absolute;width:calc(100% / 7);height:calc(100% / 7);transform:translate(-50%,-50%);padding:0;border:0;border-radius:50%;background:none;z-index:3;touch-action:manipulation}
.pt::after{content:"";position:absolute;inset:34%;border-radius:50%;opacity:0;transition:opacity .15s}
.pt.open::after{opacity:.35;background:#FFF4C9;inset:38%}
.pt.open:hover::after{opacity:.8}
.pt.target::after{opacity:1;background:rgba(255,244,201,.85);box-shadow:0 0 0 .35em rgba(255,244,201,.3);animation:pulse 1s ease-in-out infinite}
.pt.take::after{opacity:1;inset:6%;background:none;border:3px solid #E5533F;box-shadow:0 0 12px #E5533F;animation:pulse .9s ease-in-out infinite}
.pt.hinted::after{opacity:1;inset:4%;background:none;border:3px dashed #7CE0B9;box-shadow:0 0 14px #1C6D58;animation:pulse .9s ease-in-out infinite}
.pt.last::before,.pt.trail::before{content:"";position:absolute;inset:2%;border-radius:50%;border:2px solid rgba(246,227,171,.75);z-index:-1}
.pt.trail::before{inset:30%;border-style:dashed;border-color:rgba(59,36,18,.6)}
.pt:focus{outline:none}
.pt:focus-visible{outline:3px solid #FFF4C9;outline-offset:-3px}
.pt.shake{animation:shake .3s}
@keyframes pulse{50%{transform:scale(1.15)}}

.man{display:block;border-radius:50%;position:relative}
.man.light{background:radial-gradient(circle at 35% 30%,#FFFDF6,#F1E3C4 50%,#C9B184);box-shadow:inset 0 -3px 0 rgba(120,90,40,.25),0 3px 7px rgba(0,0,0,.45)}
.man.dark{background:radial-gradient(circle at 35% 30%,#6E4D35,#2A1A10 58%,#120A05);box-shadow:inset 0 0 0 2px var(--brass-lo),0 3px 7px rgba(0,0,0,.55)}
.man::after{content:"";position:absolute;inset:24%;border-radius:50%;border:1.5px solid rgba(120,90,40,.35)}
.man.dark::after{border-color:rgba(224,189,109,.4)}
.piece{position:absolute;width:calc(100% / 7 * .74);height:calc(100% / 7 * .74);transform:translate(-50%,-50%);pointer-events:none;z-index:2;
  transition:left .28s cubic-bezier(.3,.7,.3,1),top .28s cubic-bezier(.3,.7,.3,1),transform .15s,opacity .3s}
.piece.moving{z-index:4;transform:translate(-50%,-50%) scale(1.12)}
.piece.sel{transform:translate(-50%,-50%) scale(1.15);box-shadow:0 0 0 3px #FFF4C9,0 0 18px #FFF4C9,0 8px 14px rgba(0,0,0,.5)}
.piece.pop{animation:pop .3s cubic-bezier(.3,1.6,.5,1)}
.piece.glow{animation:glow .9s ease-out}
.piece.gone{transform:translate(-50%,-50%) scale(.2);opacity:0}
.piece.shake{animation:shake2 .3s}
@keyframes pop{0%{transform:translate(-50%,-50%) scale(.4);opacity:.3}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes glow{30%{box-shadow:0 0 0 4px #FFF4C9,0 0 26px #FFF4C9}}
@keyframes shake2{25%{transform:translate(calc(-50% - 4px),-50%)}75%{transform:translate(calc(-50% + 4px),-50%)}}
.spark{position:absolute;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:#E0BD6D;pointer-events:none;z-index:5;animation:spark .6s ease-out forwards}
.spark.light{background:#FFF4C9}
@keyframes spark{to{transform:translate(var(--dx),var(--dy)) scale(.3);opacity:0}}
@keyframes shake{25%{transform:translate(calc(-50% - 4px),-50%)}75%{transform:translate(calc(-50% + 4px),-50%)}}

.confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:25}

/* cards */
.card.result h2{font-size:2em}
.card.win h2,.card.over h2{color:var(--brass-hi)}
.card .how{margin:0 0 .6em;padding-left:1.3em;display:flex;flex-direction:column;gap:.3em}
.card .stats span{display:flex;flex-direction:column;align-items:center;font-size:.85em}
.card .links{margin-top:.2em}
.stats-rows .row{flex-direction:column;align-items:flex-start;gap:.1em}
@media (max-height:500px){
  .logo,.tagline{display:none}
  .home-in{gap:.5em}
  .home{padding-bottom:2em}
  #levels .choice small{display:none}
  .home .title{font-size:2.3em}
  .card{padding:.8em 1.1em .8em}
  .card h2,.card.result h2{font-size:1.35em;margin-bottom:.3em}
  .card .actions{flex-direction:row;flex-wrap:wrap;justify-content:center;margin-top:.5em}
  .card .stats{margin:0 0 .2em}
  .card .how{gap:0;font-size:.9em}
}
@media (prefers-reduced-motion:reduce){.piece{transition:none}}