/* ---------- DOTS & BOXES ---------- */
.cab[data-world="dots"]{--w1:#EEE8FF;--w2:#C7B6FF}
.cab[data-world="dots"] .cab-world{background:radial-gradient(circle at 2px 2px,rgba(107,60,255,.22) 2.6px,transparent 3.2px) 0 0/30px 30px}
.cart:hover .dots-a-line,.cart:focus-visible .dots-a-line{animation:dotsArtLine 1.1s ease-out infinite}
@keyframes dotsArtLine{55%,100%{stroke-dashoffset:0}}

.dots-game{--S:min(88vw,60vh,520px);--lw:max(9px,calc(var(--S)*.03));position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,2.6vh,22px);padding:4px 12px 100px}
@media (max-height:700px) and (max-width:700px){.dots-game{--S:min(88vw,56vh)}}
@media (min-width:701px){.dots-game{--S:min(70vw,62vh,520px);padding-bottom:28px}}

/* turn pill */
.dots-game .dots-turn{display:flex;align-items:center;gap:12px;padding:6px 14px;background:var(--paper);border:var(--bd);border-radius:99px;box-shadow:0 3px 0 var(--ink)}
.dots-game .dt{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;opacity:.45;transform:scale(.88);transition:transform .3s var(--spring),opacity .25s,box-shadow .25s}
.dots-game .dt svg{width:100%;height:100%;display:block;overflow:visible}
.dots-game .dt.on{opacity:1;transform:translateY(-4px) scale(1.14);box-shadow:0 0 0 5px rgba(255,210,63,.85)}
.dots-game .dt-vs{width:8px;height:8px;border-radius:50%;background:var(--ink);opacity:.35}

/* ruled notebook page */
.dots-game .dots-paper{position:relative;background:#FFFDF6;border:var(--bd);border-radius:20px;box-shadow:0 6px 0 var(--ink);transform:rotate(.8deg);
  background-image:linear-gradient(90deg,transparent calc(var(--S)*.05),rgba(255,95,120,.32) calc(var(--S)*.05),rgba(255,95,120,.32) calc(var(--S)*.05 + 2px),transparent calc(var(--S)*.05 + 2px)),
  repeating-linear-gradient(180deg,transparent 0 calc(var(--S)/12 - 2px),rgba(56,182,255,.2) calc(var(--S)/12 - 2px) calc(var(--S)/12))}
.dots-game .dots-board{position:relative;width:var(--S);height:var(--S)}

/* dots */
.dots-game .dd{position:absolute;width:calc(var(--S)*.05);height:calc(var(--S)*.05);margin:calc(var(--S)*-.025) 0 0 calc(var(--S)*-.025);border-radius:50%;background:var(--ink);z-index:3;pointer-events:none;
  box-shadow:inset -2px -3px 0 rgba(255,255,255,.18);animation:dotsDot .4s var(--spring) backwards;animation-delay:calc(var(--k)*.025s)}
@keyframes dotsDot{from{transform:scale(0)}}

/* boxes */
.dots-game .db{position:absolute;width:25%;height:25%;z-index:0;display:grid;place-items:center;pointer-events:none}
.dots-game .db::before{content:"";position:absolute;inset:5%;border-radius:8px;transform:scale(0);transition:transform .35s var(--spring)}
.dots-game .db.on::before{transform:none}
.dots-game .db.k::before{background:#FFE58A}
.dots-game .db.o::before{background:#FFC2A1}
.dots-game .db svg{position:relative;width:46%;height:46%;animation:dotsPop .5s var(--spring) .1s backwards}
@keyframes dotsPop{from{transform:scale(0) rotate(-30deg)}}

/* lines: each hit area is a diamond between two dots (they tile, never overlap) */
.dots-game .dl{position:absolute;width:25%;height:25%;z-index:2;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);-webkit-tap-highlight-color:transparent;touch-action:manipulation;outline:none}
.dots-game .dl-bar{position:absolute;border-radius:99px;pointer-events:none;transition:background .12s,opacity .12s}
.dots-game .dl.h .dl-bar{left:0;right:0;top:50%;height:4px;margin-top:-2px;background:repeating-linear-gradient(90deg,rgba(26,16,51,.2) 0 7px,transparent 7px 14px)}
.dots-game .dl.v .dl-bar{top:0;bottom:0;left:50%;width:4px;margin-left:-2px;background:repeating-linear-gradient(180deg,rgba(26,16,51,.2) 0 7px,transparent 7px 14px)}
.dots-game.kid-turn .dl:not(.on):hover .dl-bar,.dots-game.kid-turn .dl:not(.on):focus-visible .dl-bar{background:rgba(255,95,176,.5)}
.dots-game.kid-turn .dl:not(.on) {cursor:pointer}
.dots-game .dl:not(.on):focus-visible .dl-bar{background:rgba(255,95,176,.55);box-shadow:0 0 0 3px var(--grape)}
.dots-game .dl.h:not(.on):is(:hover,:focus-visible) .dl-bar,.dots-game .dl.h.on .dl-bar{height:var(--lw);margin-top:calc(var(--lw)/-2)}
.dots-game .dl.v:not(.on):is(:hover,:focus-visible) .dl-bar,.dots-game .dl.v.on .dl-bar{width:var(--lw);margin-left:calc(var(--lw)/-2)}
.dots-game .dl.on{cursor:default}
.dots-game .dl.on .dl-bar{border:3px solid var(--ink)}
.dots-game .dl.k .dl-bar{background:var(--pink)}
.dots-game .dl.o .dl-bar{background:var(--orange)}
.dots-game .dl.h.on .dl-bar{animation:dotsDrawH .28s cubic-bezier(.3,.8,.4,1.15);transform-origin:0 50%}
.dots-game .dl.v.on .dl-bar{animation:dotsDrawV .28s cubic-bezier(.3,.8,.4,1.15);transform-origin:50% 0}
@keyframes dotsDrawH{from{transform:scaleX(0)}}
@keyframes dotsDrawV{from{transform:scaleY(0)}}
.dots-game .dots-hand{width:46px;margin:0}

/* finale: pair the boxes one to one */
.dots-game .dots-tally{--n:9;--t:calc(var(--S)*min(.13,calc(.8/(1.15 + 1.2*var(--n)))));--g:calc(var(--t)*.2);--w:calc(var(--t)*1.15);
  position:absolute;inset:3%;z-index:5;display:grid;place-content:center;justify-items:start;gap:0;border-radius:16px;background:rgba(255,253,246,.97);animation:dotsFade .35s ease-out}
@keyframes dotsFade{from{opacity:0}}
.dots-game .tl-row{display:flex;align-items:center;gap:var(--g);min-height:var(--w)}
.dots-game .tl-who{width:var(--w);height:var(--w);flex:none}
.dots-game .tl-who svg{width:100%;height:100%;display:block;overflow:visible}
.dots-game .tl{width:var(--t);height:var(--t);flex:none;display:grid;place-items:center;border:3px solid var(--ink);border-radius:8px;box-shadow:0 3px 0 var(--ink);transition:opacity .3s,transform .3s var(--spring)}
.dots-game .tl.k{background:#FFE58A}.dots-game .tl.o{background:#FFC2A1}
.dots-game .tl svg{width:78%;height:78%;display:block;overflow:visible}
.dots-game .tl.paired{opacity:.55;transform:scale(.9)}
.dots-game .tl.extra{animation:dotsExtra .6s var(--spring) 3;box-shadow:0 0 0 4px var(--sun),0 3px 0 var(--ink)}
@keyframes dotsExtra{40%{transform:translateY(calc(var(--t)*-.3)) scale(1.12)}}
.dots-game .tl-links{display:flex;gap:var(--g);padding-left:calc(var(--w) + var(--g));height:calc(var(--t)*.9)}
.dots-game .tl-link{width:var(--t);height:100%;display:flex;justify-content:center}
.dots-game .tl-link::before{content:"";width:max(6px,calc(var(--t)*.16));height:100%;border-radius:99px;border:2.5px solid var(--ink);background:linear-gradient(var(--pink),var(--orange));transform:scaleY(0);transform-origin:50% 0;transition:transform .3s var(--spring)}
.dots-game .tl-link.on::before{transform:none}
.dots-game.tallying .dots-board .dl{pointer-events:none}

.dots-game.calm *,.dots-game.calm *::before{animation-duration:.01s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01s!important}