/* Dots and Boxes: play page, landing page and diagrams. Themes swap the table, the ink and the tiles. */
.dots-app{overflow-x:clip;--bg:#f3ede3;--panel:#fffdf8;--text:#201b38;--muted:#6a6379;--track:#e7dfd2;--line:#ded3c2;--focus:#201b38;--p0:#e4473d;--p1:#2c63c9;background:var(--bg);color:var(--text);padding:26px 16px 44px}
.dots-app[data-theme=chalk]{--bg:#17221e;--panel:#22322c;--text:#f5f1e4;--muted:#b6c6bd;--track:#ffffff1c;--line:#ffffff24;--focus:#fff3c4}
.dots-app[data-theme=halloween]{--bg:#130e28;--panel:#211a46;--text:#fbefd9;--muted:#c3b6e6;--track:#ffffff1a;--line:#ffffff22;--focus:#ffd27a;background:radial-gradient(ellipse at 80% 0,#3a2a7a66,transparent 55%),var(--bg)}
.dots-wrap{max-width:1120px;margin:auto}
.dots-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.dots-head h1{font-size:clamp(30px,4.2vw,48px);letter-spacing:-.04em}
.dots-head a{display:inline-flex;align-items:flex-end;min-height:44px;font-weight:700;font-size:14px;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
.dots-layout{display:grid;gap:18px;grid-template-areas:"players" "stage" "side"}
.dots-top{grid-area:players;display:grid;gap:10px}
.dots-stage{grid-area:stage;position:relative;isolation:isolate;width:100%;justify-self:center;max-width:max(300px,min(100%,calc(100vh - 340px)));max-width:max(300px,min(100%,calc(100svh - 340px)))}
.dots-side{grid-area:side;display:grid;gap:14px;align-content:start}
@media (min-width:900px){.dots-app{padding:34px 4% 64px}.dots-layout{grid-template-columns:minmax(0,1fr) 344px;grid-template-areas:"stage players" "stage side";grid-template-rows:auto 1fr;column-gap:40px}.dots-stage{max-width:min(100%,calc(100vh - 250px));min-width:min(100%,470px);justify-self:center;width:100%}}
/* Players and the running count */
.dots-players{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.dots-chip{--c:var(--p0);display:flex;align-items:center;gap:8px;min-width:0;min-height:62px;padding:9px 11px;border-radius:16px;background:var(--panel);border:2px solid var(--line);transition:transform .25s,box-shadow .25s,border-color .25s}
.dots-chip.p1{--c:var(--p1)}
.dots-chip.is-turn,.dots-chip.is-winner{border-color:var(--c);transform:translateY(-2px);box-shadow:0 10px 22px -14px var(--c),inset 0 -4px 0 var(--c)}
.dots-chip-icon{flex:none;width:30px;height:30px}.dots-chip-icon svg{width:30px;height:30px}
.dots-chip-name{font-weight:800;font-size:15px;line-height:1.15;min-width:0;overflow:hidden}
.dots-chip-name small{display:block;font-weight:600;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dots-chip.is-turn small,.dots-chip.is-winner small{color:var(--text)}
.dots-chip small i{display:inline-block;width:4px;height:4px;margin-left:3px;border-radius:50%;background:currentColor;animation:dots-blink 1.1s infinite}
.dots-chip small i:nth-child(2){animation-delay:.18s}.dots-chip small i:nth-child(3){animation-delay:.36s}
.dots-chip strong{margin-left:auto;font:800 30px/1 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.dots-chip strong.is-bump{animation:dots-bump .5s cubic-bezier(.3,1.8,.5,1)}
.dots-tally{display:flex;height:9px;border-radius:99px;overflow:hidden;background:var(--track)}
.dots-tally span{transition:width .45s cubic-bezier(.3,1.2,.5,1)}.dots-tally .dots-tally-rest{flex:1}
/* The board */
.dots-paper{position:relative;border-radius:16px;padding:clamp(4px,1.6vw,16px);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;outline:none;cursor:pointer}
.dots-paper.is-locked{cursor:progress}
.dots-paper:focus-visible{box-shadow:0 0 0 4px var(--bg),0 0 0 7px var(--focus)!important}
.dots-app[data-theme=paper] .dots-paper{color:#2b2540;background:linear-gradient(90deg,transparent 26px,#f2a49c80 26px 28px,transparent 28px),repeating-linear-gradient(180deg,transparent 0 30px,#b7d0ec80 30px 31px),#fffbf2;box-shadow:0 1px 0 #e8dcc6,6px 7px 0 -1px #f4e9d6,6px 7px 0 0 #e3d5bd,0 26px 44px -26px rgba(70,46,20,.55)}
.dots-app[data-theme=paper] .dots-paper::before,.dots-app[data-theme=paper] .dots-paper::after{display:none;content:'';position:absolute;top:-1px;width:62px;height:20px;background:#f3dd94a6;box-shadow:0 1px 2px rgba(0,0,0,.12);pointer-events:none}
.dots-app[data-theme=paper] .dots-paper::before{left:-15px;transform:rotate(-38deg)}.dots-app[data-theme=paper] .dots-paper::after{right:-15px;transform:rotate(38deg)}
@media (min-width:600px){.dots-app[data-theme=paper] .dots-paper::before,.dots-app[data-theme=paper] .dots-paper::after{display:block}}
@media (max-width:599px){.dots-app[data-theme=paper] .dots-paper{background:repeating-linear-gradient(180deg,transparent 0 30px,#b7d0ec80 30px 31px),#fffbf2}}
.dots-app[data-theme=chalk] .dots-paper{color:#f6f1e3;border-radius:6px;border:12px solid #7b4f2c;background:radial-gradient(ellipse at 28% 22%,#ffffff14,transparent 48%),radial-gradient(ellipse at 74% 78%,#ffffff10,transparent 44%),linear-gradient(170deg,#2c5446,#21443a);box-shadow:inset 0 0 0 2px #5a381d,inset 0 0 46px rgba(0,0,0,.45),0 22px 40px -22px #000}
.dots-app[data-theme=chalk] .dots-lines{filter:url(#dots-chalk)}
.dots-app[data-theme=chalk] .dots-dots{filter:url(#dots-chalk)}
.dots-app[data-theme=halloween] .dots-paper{color:#ffe9b8;border:1px solid #ffffff1f;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%23d9ccff' stroke-opacity='.2' stroke-width='1.4'%3E%3Cpath d='M0 0L120 60M0 0L95 95M0 0L60 120M0 0L120 18M0 0L18 120'/%3E%3Cpath d='M30 9Q22 22 9 30M58 17Q44 44 17 58M88 26Q64 64 26 88M112 36Q82 82 36 112'/%3E%3C/svg%3E") no-repeat 0 0/110px,radial-gradient(1.6px 1.6px at 22% 14%,#fff 60%,transparent),radial-gradient(1.4px 1.4px at 64% 8%,#fff 60%,transparent),radial-gradient(1.2px 1.2px at 46% 92%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 8% 72%,#fff 60%,transparent),radial-gradient(1.3px 1.3px at 93% 58%,#fff 60%,transparent),linear-gradient(165deg,#2c2266,#1b1546 58%,#130f31);box-shadow:0 26px 50px -26px #000,0 0 0 1px #0004}
.dots-app[data-theme=halloween] .dots-lines{filter:url(#dots-glow)}
.dots-svg{display:block;width:100%;height:auto;overflow:visible;--w:11px}
.dots-svg[data-n="3"]{--w:12px}.dots-svg[data-n="5"]{--w:12px}.dots-svg[data-n="6"]{--w:13px}
.dots-labels text{font:700 17px DM,Arial,sans-serif;fill:currentColor;opacity:.32;text-anchor:middle}
.dots-guides path{fill:none}
.dots-ink{fill:none;stroke-width:var(--w);stroke-linecap:round}
.dots-ink2{fill:none;stroke-width:calc(var(--w)*.55);stroke-linecap:round;opacity:.3;transform:translate(1.5px,2px)}
.dots-app[data-theme=chalk] .dots-ink2{opacity:.18}
.dots-line.is-last .dots-ink2{opacity:.22;stroke-width:calc(var(--w)*2.2);transform:none}
.dots-line.is-new .dots-ink,.dots-line.is-new .dots-ink2{stroke-dasharray:1 1;stroke-dashoffset:1;animation:dots-ink .36s cubic-bezier(.35,.7,.3,1) forwards}
.dots-line.is-new .dots-ink2{animation-delay:.07s}
.dots-claim{transform-box:fill-box;transform-origin:center}
.dots-claim.is-new{animation:dots-pop .62s cubic-bezier(.2,1.5,.4,1) both}
.dots-claim.is-cheer{animation:dots-cheer .8s cubic-bezier(.3,1.4,.5,1) both}
.dots-app[data-theme=chalk] .dots-hatch{opacity:1}
.dots-preview{fill:none;stroke-width:var(--w);stroke-linecap:round;stroke-dasharray:16 13;opacity:.62}
.dots-preview.is-soft{opacity:.34}
.dots-cursor{fill:none;stroke-width:4;stroke-dasharray:9 7;animation:dots-march 1.2s linear infinite}
.dots-cursor.is-taken{opacity:.45}
.dots-confetti{transform-box:fill-box;transform-origin:center;animation:dots-fly 1.6s cubic-bezier(.15,.7,.3,1) both}
.dots-keys{margin:14px 0 0;text-align:center;font-size:13px;color:var(--muted)}
.dots-keys kbd{font:700 12px DM,Arial,sans-serif;border:1.5px solid var(--line);border-bottom-width:3px;border-radius:6px;padding:1px 6px;background:var(--panel);color:var(--text)}
.dots-keys .k-touch{display:none}
@media (hover:none){.dots-keys .k-touch{display:inline}.dots-keys .k-mouse{display:none}}
/* Side panel */
.dots-status{min-height:3.1em;font-weight:650;font-size:16px;line-height:1.45}
.dots-actions{display:flex;gap:10px;flex-wrap:wrap}
.dots-btn{min-height:46px;padding:10px 20px;border-radius:99px;border:2px solid var(--text);background:transparent;color:var(--text);font-weight:750;font-size:15px;transition:transform .2s,box-shadow .2s}
.dots-btn:hover:not(:disabled){transform:translateY(-2px)}
.dots-btn:disabled{opacity:.38;cursor:not-allowed}
.dots-btn--main{background:var(--text);color:var(--bg)}
.dots-btn.is-pending{box-shadow:0 0 0 4px var(--bg),0 0 0 6px var(--p0)}
.dots-btn:focus-visible,.dots-options select:focus-visible,.dots-help summary:focus-visible,.dots-result .button:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.dots-options{display:grid;gap:10px;padding:14px;border-radius:16px;background:var(--panel);border:1.5px solid var(--line)}
.dots-options label{display:grid;gap:4px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.dots-options select{min-height:44px;padding:8px 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);color:var(--text);font-size:15px;font-weight:650;text-transform:none;letter-spacing:0}
.dots-options p{font-size:13px;color:var(--muted)}
@media (min-width:600px) and (max-width:899px){.dots-options{grid-template-columns:repeat(3,1fr)}.dots-options p{grid-column:1/-1}}
.dots-result{padding:16px 18px;border-radius:18px;background:var(--panel);border:2px solid var(--line);animation:dots-rise .45s cubic-bezier(.3,1.3,.5,1) both}
.dots-result-head{font:800 24px/1.15 var(--display);letter-spacing:-.03em;margin-bottom:4px;text-wrap:balance}
.dots-result p{color:var(--muted)}.dots-result .dots-result-head{color:var(--text)}
.dots-result-actions{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 8px}
.dots-result .button{min-height:46px;padding:10px 20px;gap:10px;font-size:15px}
.dots-result .button.secondary{background:transparent;color:var(--text);border-color:var(--text)}
.dots-app[data-theme=chalk] .dots-result .button:not(.secondary),.dots-app[data-theme=halloween] .dots-result .button:not(.secondary){background:var(--text);color:var(--bg);border-color:var(--text)}
.dots-result-tip a,.dots-foot a,.dots-help a{font-weight:700;border-bottom:1.5px solid currentColor}
.dots-help{border-top:1.5px solid var(--line);padding-top:6px}
.dots-help summary{cursor:pointer;font-weight:800;min-height:44px;display:flex;align-items:center}
.dots-help p,.dots-help li{font-size:14px;color:var(--muted)}.dots-help ul{padding-left:18px;margin:6px 0}
.dots-foot{margin-top:26px;font-size:14px;color:var(--muted);text-align:center}
@keyframes dots-ink{to{stroke-dashoffset:0}}
@keyframes dots-pop{0%{transform:scale(.15) rotate(-14deg);opacity:0}45%{opacity:1}100%{transform:none;opacity:1}}
@keyframes dots-cheer{0%,100%{transform:none}35%{transform:translateY(-9px) scale(1.1) rotate(-4deg)}65%{transform:translateY(2px) scale(.97)}}
@keyframes dots-fly{0%{transform:translate(0,0) scale(.3);opacity:0}12%{opacity:1}75%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(1.05);opacity:0}}
@keyframes dots-bump{0%{transform:scale(1)}40%{transform:scale(1.4)}100%{transform:scale(1)}}
@keyframes dots-blink{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes dots-march{to{stroke-dashoffset:-32}}
@keyframes dots-rise{from{transform:translateY(10px);opacity:0}}
@media (prefers-reduced-motion:reduce){.dots-app *,.dots-app *::before,.dots-app *::after{animation:none!important;transition:none!important}.dots-line.is-new .dots-ink,.dots-line.is-new .dots-ink2{stroke-dasharray:none;stroke-dashoffset:0}}
/* Landing page */
.dots-landing .dots-hero{display:grid;gap:38px;align-items:center}
@media (min-width:900px){.dots-landing .dots-hero{grid-template-columns:1fr 1.05fr}}
.dots-hero h1{font-size:clamp(46px,6vw,84px)}
.dots-lede{font-size:19px;max-width:560px;margin:18px 0 22px}
.dots-ctas{display:flex;gap:12px;flex-wrap:wrap}
.dots-ctas .button{gap:14px}
.dots-ctas .button.secondary{background:white;color:var(--ink)}
.dots-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;margin:26px 0 0;padding:0;list-style:none;font-size:14px}
.dots-facts b{display:block;font-size:15px}
.dots-cover{position:relative;display:block;border-radius:22px;overflow:hidden;background:#f3ede3;box-shadow:0 30px 60px -34px rgba(32,27,56,.55)}
.dots-cover img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.dots-steps{display:grid;gap:18px;counter-reset:dots}
@media (min-width:760px){.dots-steps{grid-template-columns:repeat(3,1fr)}}
.dots-steps article,.dots-tip{background:#f6f1e8;border-radius:20px;padding:22px}
.dots-steps h3,.dots-tip h3{font-size:22px;margin:12px 0 8px}
.dots-steps .dots-svg{max-width:230px;margin:auto}.dots-tip .dots-svg{max-width:300px;margin:auto}
.dots-zone{fill:#ffd36a38;stroke:#d39a12;stroke-width:3;stroke-dasharray:10 8}
.dots-note{font:800 22px Manrope,Arial,sans-serif;fill:#201b38;text-anchor:middle;paint-order:stroke;stroke:#fffbf2;stroke-width:7px;stroke-linejoin:round}
.dots-diagram{background:#fffbf2;border-radius:14px;padding:8px;box-shadow:inset 0 0 0 1.5px #e9dfcc}
.dots-tips{display:grid;gap:18px}
@media (min-width:760px){.dots-tips{grid-template-columns:repeat(2,1fr)}}
.dots-tip p{color:#4a4458}
.dots-tips+p{margin-top:24px}
.dots-section-head{max-width:720px;margin-bottom:28px}.dots-section-head p{margin-top:12px;font-size:17px}
.dots-skins{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.dots-skins a{display:grid;gap:10px;font-weight:800;border-radius:18px;padding:12px;border:1.5px solid var(--line)}
.dots-skins a:hover{transform:translateY(-3px)}
.dots-skin-board{border-radius:12px;padding:6px}
.dots-skin-board--paper{background:#fffbf2}.dots-skin-board--chalk{background:linear-gradient(170deg,#2c5446,#21443a);border:6px solid #7b4f2c;color:#f6f1e3}.dots-skin-board--halloween{background:linear-gradient(165deg,#2c2266,#1b1546 58%,#130f31);color:#ffe9b8}
.dots-faq details{border-bottom:1.5px solid var(--line);padding:4px 0}
.dots-faq summary{cursor:pointer;font-weight:750;font-size:17px;min-height:52px;display:flex;align-items:center}
.dots-faq details p{padding:0 0 16px;max-width:760px}
.dots-app[data-theme=halloween] .dots-head h1::after{content:'';display:inline-block;width:.6em;height:.6em;margin-left:.28em;border-radius:50%;box-shadow:inset -.17em .07em 0 #ffe3a0;transform:rotate(-18deg);vertical-align:.02em}