.game-dots-and-boxes{--db-p1:var(--lake);--db-p2:var(--canyon)}.game-dots-and-boxes .db-play{gap:14px;width:max(min(100%,350px),min(100%,540px,100dvh - 330px));margin:0 auto;display:grid}.game-dots-and-boxes .db-meta{color:var(--muted);margin:0;font-size:14px;font-weight:700;line-height:1.5}.game-dots-and-boxes .db-meta b{color:var(--ink)}.game-dots-and-boxes .db-swatch{border:2px solid var(--ink);background:#fff;border-radius:8px;flex:none;width:26px;height:26px;display:block}.game-dots-and-boxes .db-fill-1{fill:var(--db-p1)}.game-dots-and-boxes .db-fill-2{fill:var(--db-p2)}.game-dots-and-boxes .db-texture{fill:#ffffff80}.game-dots-and-boxes .db-scores{justify-content:space-between;align-items:center;gap:8px;display:flex}.game-dots-and-boxes .db-score{align-items:center;gap:8px;min-width:0;display:flex}.game-dots-and-boxes .db-score[data-player="2"]{flex-direction:row-reverse}.game-dots-and-boxes .db-score[data-turn=true] .db-swatch{box-shadow:0 0 0 3px var(--signpost)}.game-dots-and-boxes .db-score-name{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:800;overflow:hidden}.game-dots-and-boxes .db-score-count{font-family:var(--font-display);font-variant-numeric:tabular-nums;font-size:28px;font-weight:600;line-height:1}.game-dots-and-boxes .db-scores-left{letter-spacing:1px;text-transform:uppercase;color:var(--muted);flex:none;font-size:11.5px;font-weight:800}@media (width<=480px){.game-dots-and-boxes .db-scores{grid-template-columns:1fr 1fr;display:grid}.game-dots-and-boxes .db-score[data-player="2"]{justify-self:end}.game-dots-and-boxes .db-scores-left,.game-dots-and-boxes .db-again{order:3;grid-column:1/-1;justify-self:center}}.game-dots-and-boxes .db-again{background:var(--sunbeam-tint);border:2px solid var(--ink);font-family:var(--font-display);color:var(--ink);white-space:nowrap;border-radius:999px;flex:none;padding:4px 12px;font-size:15px;font-weight:600;line-height:1.2}.game-dots-and-boxes .db-frame{border:2px solid var(--ink);border-radius:var(--radius-card);box-shadow:var(--shadow-card);background:#fff;padding:4px;position:relative}.game-dots-and-boxes .db-board{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;width:100%;display:block}.game-dots-and-boxes .db-dot{fill:var(--ink);pointer-events:none}.game-dots-and-boxes .db-guide{stroke:#c9d4e5;stroke-width:.04px;stroke-linecap:round;stroke-dasharray:.06 .1;pointer-events:none}.game-dots-and-boxes .db-line{stroke:var(--ink);stroke-width:.1px;stroke-linecap:round;pointer-events:none}.game-dots-and-boxes .db-line[data-last][data-player="1"]{stroke:var(--db-p1)}.game-dots-and-boxes .db-line[data-last][data-player="2"]{stroke:var(--db-p2)}.game-dots-and-boxes .db-box{stroke:var(--ink);stroke-width:.03px;pointer-events:none;transform-box:fill-box;transform-origin:50%}.game-dots-and-boxes .db-hit{fill:#0000;stroke:none;pointer-events:fill}.game-dots-and-boxes .db-edge{outline:none}.game-dots-and-boxes .db-edge[data-live]{cursor:pointer}.game-dots-and-boxes .db-preview{stroke:var(--ink);stroke-width:.1px;stroke-linecap:round;opacity:0;pointer-events:none;transition:opacity .12s}.game-dots-and-boxes .db-board[data-turn="1"] .db-preview{stroke:var(--db-p1)}.game-dots-and-boxes .db-board[data-turn="2"] .db-preview{stroke:var(--db-p2)}@media (hover:hover){.game-dots-and-boxes .db-edge[data-live]:hover .db-preview{opacity:.45}}.game-dots-and-boxes .db-edge[data-live]:focus-visible .db-preview{opacity:.45}.game-dots-and-boxes .db-focus{stroke:var(--lake);stroke-width:.26px;stroke-linecap:round;opacity:0;pointer-events:none}.game-dots-and-boxes .db-edge:focus-visible .db-focus{opacity:.4}.game-dots-and-boxes .db-board[data-animate] .db-box-new{animation:.22s ease-out both db-reveal}@media (prefers-reduced-motion:no-preference){.game-dots-and-boxes .db-board[data-animate] .db-box-new{animation:.38s cubic-bezier(.2,.9,.3,1.2) 90ms both db-claim}.game-dots-and-boxes .db-board[data-animate] .db-line[data-last]{stroke-dasharray:1;animation:.17s ease-out both db-draw}.game-dots-and-boxes .db-again{animation:.36s cubic-bezier(.2,.9,.3,1.3) both db-pop}}.game-dots-and-boxes .db-result-layer{z-index:10;border-radius:var(--radius-card);background:#cde2f78c;justify-content:center;align-items:center;padding:12px;display:flex;position:absolute;inset:0}.game-dots-and-boxes .db-result-layer .dt-result{width:min(360px,100%)}.game-dots-and-boxes .db-result-of{font-weight:700}.game-dots-and-boxes .db-result-note{margin-top:6px;font-weight:700}.game-dots-and-boxes .db-foot{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 14px;display:flex}.game-dots-and-boxes .db-lead{border-radius:10px;width:38px;height:38px}.game-dots-and-boxes .db-modes{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:6px;display:grid}.game-dots-and-boxes .db-mode{text-align:left;color:var(--ink);border:2px solid var(--ink);border-radius:var(--radius-card);box-shadow:var(--shadow-card);cursor:pointer;font:inherit;background:#fff;flex-direction:column;gap:6px;padding:18px;transition:box-shadow .14s;display:flex}.game-dots-and-boxes .db-mode p{color:var(--muted);margin:0;font-size:14.5px;font-weight:600;line-height:1.45}.game-dots-and-boxes .db-mode:hover{box-shadow:var(--shadow-card-hover)}.game-dots-and-boxes .db-mode:focus-visible{outline:3px solid var(--lake);outline-offset:3px}.game-dots-and-boxes .db-mode-title{font-family:var(--font-display);align-items:center;gap:10px;font-size:20px;font-weight:600;display:flex}.game-dots-and-boxes .db-mode-title svg{width:22px;height:22px}.game-dots-and-boxes .db-code{font-family:var(--font-display);letter-spacing:.25em;text-align:center;border:2px dashed var(--sky-deep);border-radius:var(--radius-card);font-variant-numeric:tabular-nums;padding-left:.25em;margin:12px 0 16px;padding-block:10px;font-size:clamp(36px,10vw,52px);font-weight:700}.game-dots-and-boxes .db-code-input{font-family:var(--font-display);letter-spacing:.3em;text-transform:uppercase;width:11ch;font-weight:600}.game-dots-and-boxes .db-seats{gap:10px;margin:0;padding:0;list-style:none;display:grid}.game-dots-and-boxes .db-seats li{align-items:center;gap:10px;font-size:15px;font-weight:700;display:flex}.game-dots-and-boxes .db-seats li[data-taken=false]{color:var(--muted)}.game-dots-and-boxes .db-seats li[data-taken=false] .db-swatch{opacity:.35}.game-dots-and-boxes .db-help{gap:14px;margin:0;padding:0;list-style:none;display:grid}.game-dots-and-boxes .db-help-step{grid-template-columns:84px minmax(0,1fr);align-items:center;gap:14px;display:grid}.game-dots-and-boxes .db-help-step h3{font-family:var(--font-display);margin:0 0 2px;font-size:17px;font-weight:600;line-height:1.2}.game-dots-and-boxes .db-help-step p{margin:0;font-size:14.5px;font-weight:600;line-height:1.4}.game-dots-and-boxes .db-help-art{justify-content:center;display:flex}.game-dots-and-boxes .db-help-art .db-board{border:2px solid var(--ink);background:#fff;border-radius:8px}.game-dots-and-boxes .db-help-foot{justify-content:flex-end;margin-top:18px;display:flex}@media (width<=420px){.game-dots-and-boxes .db-help{gap:12px}.game-dots-and-boxes .db-help-step{grid-template-columns:72px minmax(0,1fr);gap:12px}.game-dots-and-boxes .db-help-step h3{font-size:16px}.game-dots-and-boxes .db-help-step p{font-size:14px;line-height:1.35}}@media (width<=359px),(height<=600px){.game-dots-and-boxes .db-help{gap:10px}.game-dots-and-boxes .db-help-step{grid-template-columns:56px minmax(0,1fr);gap:10px}.game-dots-and-boxes .db-help-step h3{font-size:15px}.game-dots-and-boxes .db-help-step p{font-size:13px;line-height:1.3}.game-dots-and-boxes .db-help-foot{margin-top:12px}.dt-modal:has(.db-help){padding:10px 14px 14px}.dt-modal:has(.db-help) .dt-modal-title{margin:6px 0 0;font-size:18px}.dt-modal:has(.db-help) .dt-icon-btn{width:38px;height:38px}}@keyframes db-reveal{0%{opacity:0}to{opacity:1}}@keyframes db-claim{0%{opacity:0;transform:scale(.6)}40%{opacity:1}65%{transform:scale(1.08)}to{opacity:1;transform:scale(1)}}@keyframes db-draw{0%{stroke-dashoffset:1px}to{stroke-dashoffset:0}}@keyframes db-pop{0%{transform:scale(.7)}60%{transform:scale(1.1)}to{transform:scale(1)}}