.game-connect-4 .c4-chip{flex:none;width:28px;height:28px;display:block;overflow:visible}.game-connect-4 .c4-chip-disc{stroke:var(--ink);stroke-width:.07px}.game-connect-4 .c4-stamp{fill:var(--ink)}.game-connect-4 .c4-stamp-line{fill:none;stroke:var(--ink);stroke-width:.1px;stroke-linecap:round}.game-connect-4 .c4-faces{gap:8px;display:grid}.game-connect-4 .c4-faces+.c4-faces{margin-top:16px}.game-connect-4 .c4-face-row{flex-wrap:wrap;gap:8px;display:flex}.game-connect-4 .c4-face-opt{background:var(--detour-card);cursor:pointer;border:2px solid #0000;border-radius:50%;place-items:center;width:46px;height:46px;padding:0;display:grid}.game-connect-4 .c4-face-opt .c4-chip{width:34px;height:34px}.game-connect-4 .c4-face-opt[aria-pressed=true]{border-color:var(--ink);box-shadow:0 0 0 3px var(--signpost)}.game-connect-4 .c4-face-opt:focus-visible{outline:3px solid var(--lake);outline-offset:3px}.game-connect-4 .c4-face-opt[data-taken]{opacity:.4;cursor:not-allowed;position:relative}.game-connect-4 .c4-face-opt[data-taken]:after{content:"";background:linear-gradient(to top right, transparent calc(50% - 1.5px), var(--ink) calc(50% - 1.5px) calc(50% + 1.5px), transparent calc(50% + 1.5px));position:absolute;inset:4px}.game-connect-4 .c4-face-opt:disabled:not([data-taken]){cursor:default}.game-connect-4 .c4-play{gap:14px;width:max(min(100%,320px),min(100%,520px,100dvh - 330px));margin:0 auto;display:grid}.game-connect-4 .c4-meta{color:var(--muted);margin:0;font-size:14px;font-weight:700;line-height:1.5}.game-connect-4 .c4-meta b{color:var(--ink)}.game-connect-4 .c4-versus{align-items:center;gap:10px;display:flex}.game-connect-4 .c4-players{justify-content:space-between;align-items:center;gap:8px;display:flex}.game-connect-4 .c4-player{border:2px solid #0000;border-radius:999px;align-items:center;gap:8px;min-width:0;padding:4px 12px 4px 4px;display:flex}.game-connect-4 .c4-player[data-player="2"]{flex-direction:row-reverse;padding:4px 4px 4px 12px}.game-connect-4 .c4-player[data-turn=true]{background:var(--detour-card);border-color:var(--ink);box-shadow:0 0 0 3px var(--signpost)}.game-connect-4 .c4-player-name{font-family:var(--font-display);white-space:nowrap;text-overflow:ellipsis;font-size:16px;font-weight:600;overflow:hidden}.game-connect-4 .c4-players-note{letter-spacing:1px;text-transform:uppercase;color:var(--muted);text-align:center;flex:none;font-size:11.5px;font-weight:800}@media (width<=480px){.game-connect-4 .c4-players{grid-template-columns:1fr 1fr;display:grid}.game-connect-4 .c4-player{justify-self:start}.game-connect-4 .c4-player[data-player="2"]{justify-self:end}.game-connect-4 .c4-players-note{order:3;grid-column:1/-1;justify-self:center}}.game-connect-4 .c4-frame{position:relative}.game-connect-4 .c4-board{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;position:relative}.game-connect-4 .c4-board svg{width:100%;display:block;overflow:visible}.game-connect-4 .c4-back{fill:var(--sky)}.game-connect-4 .c4-front{fill:var(--detour-card);stroke:var(--ink);stroke-width:.06px;filter:drop-shadow(0 .1px 0 var(--shade))}.game-connect-4 .c4-rim{fill:none;stroke:var(--ink);stroke-width:.05px}.game-connect-4 .c4-ghost{opacity:.32}.game-connect-4 .c4-arrow{fill:var(--ink);opacity:.22}.game-connect-4 .c4-cols{grid-template-columns:repeat(7,1fr);display:grid;position:absolute;inset:0 1.65746%}.game-connect-4 .c4-col{appearance:none;cursor:default;-webkit-tap-highlight-color:transparent;background:0 0;border:0;border-radius:14px;padding:0}.game-connect-4 .c4-col[data-live]{cursor:pointer}.game-connect-4 .c4-col:focus-visible{outline:3px solid var(--lake);outline-offset:-3px}@media (prefers-reduced-motion:no-preference){.game-connect-4 .c4-board[data-animate] .c4-fall{animation:c4-drop calc((.11s + var(--c4-rows) * 55ms) / .7) linear both}.game-connect-4 .c4-board[data-animate] .c4-win-ring{animation:c4-ring-in .26s ease-out var(--c4-land) both, c4-ring-pulse 1.1s ease-in-out calc(var(--c4-land) + .26s) infinite alternate}.game-connect-4 .c4-board[data-animate] .c4-piece{transition:opacity .26s ease var(--c4-land)}}.game-connect-4 .c4-win-ring{fill:none;stroke:var(--signpost);stroke-width:.1px;transform-box:fill-box;transform-origin:50%;filter:drop-shadow(0 0 .04px var(--signpost));pointer-events:none}.game-connect-4 .c4-board[data-over=win] .c4-piece:not([data-win]){opacity:.38}.game-connect-4 .c4-result-layer{z-index:10;background:color-mix(in srgb, var(--sky) 55%, transparent);border-radius:var(--radius-card);justify-content:center;align-items:center;padding:12px;display:flex;position:absolute;inset:0}.game-connect-4 .c4-result-layer>div{width:min(360px,100%)}.game-connect-4 .c4-result-note{margin-top:6px;font-weight:700}.game-connect-4 .c4-foot{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 14px;display:flex}.game-connect-4 .c4-lead{width:38px;height:38px}.game-connect-4 .c4-modes{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:6px;display:grid}.game-connect-4 .c4-mode{text-align:left;background:var(--detour-card);color:var(--ink);border:2px solid var(--ink);border-radius:var(--radius-card);box-shadow:var(--shadow-card);cursor:pointer;font:inherit;flex-direction:column;gap:6px;padding:18px;transition:box-shadow .14s;display:flex}.game-connect-4 .c4-mode p{color:var(--muted);margin:0;font-size:14.5px;font-weight:600;line-height:1.45}.game-connect-4 .c4-mode:hover{box-shadow:var(--shadow-card-hover)}.game-connect-4 .c4-mode:focus-visible{outline:3px solid var(--lake);outline-offset:3px}.game-connect-4 .c4-mode-title{font-family:var(--font-display);align-items:center;gap:10px;font-size:20px;font-weight:600;display:flex}.game-connect-4 .c4-mode-title svg{width:22px;height:22px}.game-connect-4 .c4-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-connect-4 .c4-code-input{font-family:var(--font-display);letter-spacing:.3em;text-transform:uppercase;width:11ch;font-weight:600}.game-connect-4 .c4-seats{gap:10px;margin:0;padding:0;list-style:none;display:grid}.game-connect-4 .c4-seats li{align-items:center;gap:10px;font-size:15px;font-weight:700;display:flex}.game-connect-4 .c4-seats li[data-taken=false]{color:var(--muted)}.game-connect-4 .c4-seats li[data-taken=false] .c4-chip{opacity:.35}.game-connect-4 .c4-help{gap:14px;margin:0;padding:0;list-style:none;display:grid}.game-connect-4 .c4-help-step{grid-template-columns:92px minmax(0,1fr);align-items:center;gap:14px;display:grid}.game-connect-4 .c4-help-step h3{font-family:var(--font-display);margin:0 0 2px;font-size:17px;font-weight:600;line-height:1.2}.game-connect-4 .c4-help-step p{margin:0;font-size:14.5px;font-weight:600;line-height:1.4}.game-connect-4 .c4-help-art .c4-front,.game-connect-4 .c4-help-art .c4-rim{stroke-width:.09px}.game-connect-4 .c4-help-art .c4-front{filter:none}.game-connect-4 .c4-help-foot{justify-content:flex-end;margin-top:18px;display:flex}@media (width<=420px){.game-connect-4 .c4-help{gap:12px}.game-connect-4 .c4-help-step{grid-template-columns:78px minmax(0,1fr);gap:12px}.game-connect-4 .c4-help-step h3{font-size:16px}.game-connect-4 .c4-help-step p{font-size:14px;line-height:1.35}}@media (width<=359px),(height<=600px){.game-connect-4 .c4-help{gap:8px}.game-connect-4 .c4-help-step{grid-template-columns:60px minmax(0,1fr);gap:10px}.game-connect-4 .c4-help-step h3{font-size:15px}.game-connect-4 .c4-help-step p{font-size:13px;line-height:1.3}.game-connect-4 .c4-help-foot{margin-top:10px}.dt-modal:has(.c4-help){padding:10px 14px 14px}.dt-modal:has(.c4-help) .dt-modal-title{margin:6px 0 0;font-size:18px}.dt-modal:has(.c4-help) .dt-icon-btn{width:38px;height:38px}}@keyframes c4-drop{0%{transform:translateY(calc(var(--c4-rows) * -1px));animation-timing-function:cubic-bezier(.45,0,.9,.6)}70%{animation-timing-function:cubic-bezier(.1,.6,.4,1);transform:translateY(0)}85%{transform:translateY(calc(var(--c4-rows) * -.03px - .05px));animation-timing-function:cubic-bezier(.6,0,.9,.5)}to{transform:translateY(0)}}@keyframes c4-ring-in{0%{opacity:0;transform:scale(1.5)}to{opacity:1;transform:scale(1)}}@keyframes c4-ring-pulse{0%{stroke-width:.1px}to{stroke-width:.15px}}