/* Dots and Boxes: the home screen, the board, its lines and boxes. */
:root{--p1:#2F6FDE;--p1-soft:#CFE0FB;--p2:#E8693C;--p2-soft:#FBDCCD;--dot:#1C2530;--guide:#C9D1DC;--sheet:#FFFFFF}

/* the two players' marks, anywhere */
.mark{display:block;flex:none;width:1.3em;height:1.3em}
.mark.p1{border-radius:50%;background:var(--p1)}
.mark.p2{background:var(--p2);transform:rotate(45deg) scale(.86);border-radius:3px}

/* home */
.home{align-items:center;justify-content:center;text-align:center;padding:16px}
.home-in{display:flex;flex-direction:column;align-items:center;gap:12px;width:min(32em,100%)}
.logo{width:68px;height:68px;border-radius:16px;box-shadow:0 6px 18px rgba(28,37,48,.14)}
.home .title{font-size:clamp(2.1em,9vw,3.4em)}
.tagline{margin:0;color:var(--ink-soft);font-size:1.05em}
.pickrow{display:flex;align-items:center;gap:.6em;justify-content:center;flex-wrap:wrap}
.pick-label{font-weight:700;color:var(--ink-soft);font-size:.9em;min-width:2.6em;text-align:right}
#sizes .choice{min-width:3.6em;font-variant-numeric:tabular-nums}
#levels .choice{min-width:4.2em;position:relative}
#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:600px){.logo{display:none}}
@media (max-height:470px){.tagline{display:none}.home-in{gap:6px}.home .title{font-size:2em}.foot{display:none}
  .choice{min-height:44px;padding:.3em .7em}.pill{min-height:44px;padding:.5em 2em}.links .link{min-height:40px}}
@media (max-height:470px) and (min-width:600px){.home-in{display:grid;grid-template-columns:auto auto;gap:6px 18px;width:auto;align-items:center}
  .home .title{grid-column:1/-1}.go{grid-column:1/-1}.links{grid-column:1/-1}}

/* the game: a bar over the board (portrait) or a column beside it (wide) */
#game{align-items:stretch;justify-content:center}
.side{display:grid;grid-template-columns:auto 1fr 1fr auto;grid-template-areas:"menu a b undo" "st st st st";gap:8px 10px;align-items:center;
  padding:max(10px,env(safe-area-inset-top)) 12px 0;width:min(100%,760px);margin:0 auto}
.tools{display:contents}
#menu{grid-area:menu}#undo{grid-area:undo}#score-1{grid-area:a}#score-2{grid-area:b}.status{grid-area:st}
.score{display:flex;align-items:center;gap:.6em;padding:.35em .75em;border-radius:14px;background:var(--paper-hi);border:2px solid transparent;
  box-shadow:0 2px 8px rgba(28,37,48,.06);transition:border-color .2s,box-shadow .2s,transform .2s;min-width:0}
.score b{display:block;font-size:1.45em;line-height:1.05;font-variant-numeric:tabular-nums}
.score small{display:block;color:var(--ink-soft);font-size:.8em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.score.p1.turn{border-color:var(--p1);box-shadow:0 0 0 3px var(--p1-soft)}
.score.p2.turn{border-color:var(--p2);box-shadow:0 0 0 3px var(--p2-soft)}
.status{margin:0;text-align:center;font-weight:600;color:var(--ink-soft);min-height:1.45em;font-size:1em}
.felt{flex:none;min-height:0;display:grid;place-items:center;padding:10px;position:relative}
.board{--bs:min(calc(100vw - 24px),calc(100vh - 160px),720px);width:var(--bs);height:var(--bs);border-radius:calc(var(--bs)*.04);background:var(--sheet);
  box-shadow:0 10px 30px rgba(28,37,48,.14);touch-action:none;outline:none;position:relative}
@supports (height:100dvh){.board{--bs:min(calc(100vw - 24px),calc(100dvh - 160px),720px)}}
.board:focus-visible{box-shadow:0 0 0 3px var(--accent),0 10px 30px rgba(28,37,48,.14)}
@media (min-aspect-ratio:23/20){
  #game{flex-direction:row;justify-content:center}
  .side{display:flex;flex-direction:column;justify-content:center;gap:10px;width:clamp(160px,24vw,250px);margin:0;padding:12px 0 12px max(12px,env(safe-area-inset-left))}
  .tools{display:flex;justify-content:space-between}
  .score{padding:.45em .85em}
  .felt{flex:none;padding:12px}
  .board{--bs:min(calc(100vh - 24px),calc(100vw - clamp(160px,24vw,250px) - 40px),760px)}
  @supports (height:100dvh){.board{--bs:min(calc(100dvh - 24px),calc(100vw - clamp(160px,24vw,250px) - 40px),760px)}}
}
@media (min-aspect-ratio:23/20) and (max-height:420px){.side{gap:6px}.score{padding:.25em .7em}.status{font-size:.9em}}
.board.shake{animation:shake .28s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* the dots, lines and boxes (an SVG in board units: one box is 100) */
.dots{display:block;width:100%;height:100%;cursor:pointer}
.dots.wait{cursor:default}
.dotset circle{fill:var(--dot)}
.guides line{stroke:var(--guide);stroke-width:3;stroke-dasharray:2 10;stroke-linecap:round}
.ln{stroke:transparent;stroke-width:13;stroke-linecap:round;transition:stroke .12s}
.ln.on.p1{stroke:var(--p1)}
.ln.on.p2{stroke:var(--p2)}
.ln.grow{stroke-dasharray:100;animation:grow .2s ease-out}
@keyframes grow{from{stroke-dasharray:0 100;stroke-dashoffset:-50}to{stroke-dasharray:100 0;stroke-dashoffset:0}}
.ln.last{filter:drop-shadow(0 0 5px rgba(28,37,48,.35))}
.dots[data-turn="1"] .ln.hover:not(.on){stroke:var(--p1);opacity:.4}
.dots[data-turn="2"] .ln.hover:not(.on){stroke:var(--p2);opacity:.4}
.dots.wait .ln.hover{opacity:0}
.board.kbd .ln.cur{stroke:#F2B632;opacity:.95;stroke-dasharray:14 9}
.box rect{fill:transparent;transition:fill .2s}
.box .m1,.box .m2{opacity:0}
.box.own.p1 rect{fill:var(--p1-soft)}
.box.own.p2 rect{fill:var(--p2-soft)}
.box.own.p1 .m1{opacity:1;fill:var(--p1)}
.box.own.p2 .m2{opacity:1;fill:var(--p2)}
.box.pop{animation:pop .38s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{0%{transform:scale(.4);opacity:.2}100%{transform:scale(1);opacity:1}}
.plus{font:800 30px/1 var(--sans);text-anchor:middle;pointer-events:none;animation:rise-up .9s ease-out forwards}
.plus.p1{fill:var(--p1)}.plus.p2{fill:var(--p2)}
@keyframes rise-up{from{transform:translateY(10px);opacity:0}25%{opacity:1}to{transform:translateY(-26px);opacity:0}}
.banner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(28,37,48,.92);color:#fff;padding:.7em 1.3em;border-radius:16px;
  font-weight:700;text-align:center;pointer-events:none;z-index:4;max-width:90%}
.confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:25}

/* the result card */
.result .game-name{text-align:center;color:var(--ink-soft);font-weight:600;font-size:.9em;margin:-.3em 0 .2em}
.result .final{display:flex;justify-content:center;align-items:center;gap:1.1em;margin:.2em 0 .5em;font-size:1.7em;font-weight:800;font-variant-numeric:tabular-nums}
.result .final span{display:flex;align-items:center;gap:.4em}
.result .final .mark{width:.8em;height:.8em}
.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:.8em 1.1em .8em}
  .card h2{margin-bottom:.35em}
  .card .actions{flex-direction:row;flex-wrap:wrap;justify-content:center;margin-top:.5em}
  .card .pill{padding:.55em 1.4em}
  .result .final{margin:0 0 .2em}
}