.connect{--bg:#14110e;--ink:#f4efe6;--muted:#b7aa9a;--cream:#f6f1e6;--tile-ink:#1c1712;--gold:#e4b15a;--line:#f4efe61f;--surface:#ffffff09;--sheet:#221c17;--chip:#ffffff0a;--pit:#071216;--frame-top:#1b7590;--frame-bottom:#0a3140;min-height:100dvh;color:var(--ink);background:radial-gradient(circle at 8% -8%, #e4b15a2e, transparent 32%), radial-gradient(circle at 100% 0%, #20809c38, transparent 34%), var(--bg)}.connect[data-theme=light]{--bg:#f4efe4;--ink:#1c1712;--muted:#6b5e52;--cream:#fffaf2;--tile-ink:#1c1712;--gold:#b8862f;--line:#1c171224;--surface:#1c17120b;--sheet:#fffdf8;--chip:#1c17120f;--pit:#10242c;--frame-top:#1a6d86;--frame-bottom:#0c3a48;background:radial-gradient(circle at 8% -8%, #b8862f29, transparent 32%), radial-gradient(circle at 100% 0%, #20809c1f, transparent 34%), var(--bg)}.cn-modes{gap:.45rem;display:grid}@media (min-width:720px){.cn-modes{grid-template-columns:repeat(3,minmax(0,1fr))}}.cn-mode{text-align:left;border:1px solid var(--line);background:0 0;border-radius:1rem;align-items:center;gap:.7rem;min-height:4.6rem;padding:.75rem .8rem;display:flex}.cn-mode.on{background:var(--cream);color:var(--tile-ink);border-color:#0000}.cn-mode-num{font-family:var(--font-tile);letter-spacing:-.05em;min-width:1.4rem;font-size:2rem;font-weight:560;line-height:.9}.cn-mode-num.wide{letter-spacing:-.04em;font-size:1.25rem}.cn-mode-copy{gap:.15rem;min-width:0;display:grid}.cn-mode-copy strong{font-size:.98rem}.cn-mode-copy small{color:var(--muted);font-size:.78rem;line-height:1.3}.cn-mode.on .cn-mode-copy small{color:#6d5844}.cn-sides{grid-template-columns:5.5rem 1fr;align-items:center;gap:.8rem;margin-top:.85rem;display:grid}.cn-sides-mark{width:5.5rem;height:5.5rem}.cn-sides-mark polygon{fill:#e4b15a24;stroke:var(--gold);stroke-width:2.5px;stroke-linejoin:round}.cn-sides-mark text{fill:var(--ink);font-family:var(--font-tile);font-size:22px}.cn-table{width:min(52rem,100% - .4rem);min-height:100dvh;padding:max(.4rem, env(safe-area-inset-top)) max(.45rem, env(safe-area-inset-right)) calc(.7rem + env(safe-area-inset-bottom)) max(.45rem, env(safe-area-inset-left));flex-direction:column;gap:.45rem;margin:0 auto;display:flex}.cn-head{justify-content:space-between;align-items:flex-start;gap:.6rem;display:flex}.cn-head h1{font-family:var(--font-tile);letter-spacing:-.04em;margin:.15rem 0 0;font-size:clamp(2rem,6vw,2.8rem);font-weight:560;line-height:.9}.cn-seats{flex-wrap:wrap;gap:.4rem;display:flex}.cn-seat{border:1px solid var(--line);background:var(--chip);color:var(--muted);border-radius:999px;align-items:center;gap:.45rem;padding:.35rem .7rem;display:flex}.cn-seat.now{color:var(--ink);border-color:#e4b15a73}.cn-seat small{letter-spacing:.08em;text-transform:uppercase;font-size:.68rem}.cn-pip{border-radius:50%;width:.85rem;height:.85rem;box-shadow:inset 0 -2px 3px #00000040}.cn-pip.p1,.cn-disc.p1{background:radial-gradient(circle at 32% 30%,#fff6d8 0%,#f0c14e 34%,#d4921c 70%,#8d5a10 100%)}.cn-pip.p2,.cn-disc.p2{background:radial-gradient(circle at 32% 30%,#ffe0d8 0%,#f07162 36%,#d44740 70%,#8a2828 100%)}.cn-mode-line{color:var(--muted);justify-content:space-between;gap:.8rem;margin:0;font-size:.92rem;display:flex}.cn-status{font-family:var(--font-tile);letter-spacing:-.03em;min-height:1.2em;margin:0;font-size:clamp(1.35rem,4vw,1.8rem);line-height:1.1}.cn-board{margin:.2rem auto 0}.cn-board[data-mode=four]{width:min(100%,34rem)}.cn-board[data-mode=five]{width:min(100%,44rem)}.cn-board[data-mode=orbit]{width:min(100%,38rem)}.cn-frame{background:linear-gradient(180deg, #fff3, transparent 26%), linear-gradient(165deg, var(--frame-top), var(--frame-bottom) 62%);border-radius:1.5rem;padding:.72rem;box-shadow:0 18px 36px #00000052,inset 0 1px #ffffff47,inset 0 -10px 18px #00000038}.cn-grid{display:grid}.cn-lane{appearance:none;background:0 0;border:0;border-radius:999px;gap:0;min-width:0;padding:0;display:grid}.cn-lane:focus-visible{outline-offset:2px;outline:2px solid #f3d48a}.cn-lane:disabled{opacity:1}.cn-hole{aspect-ratio:1;position:relative}.cn-pit{background:radial-gradient(circle at 50% 42%, #16323c 0 58%, var(--pit) 60% 100%);border-radius:50%;position:absolute;inset:.18rem;box-shadow:inset 0 8px 10px #00000073,inset 0 -2px #ffffff0f}.cn-mover{pointer-events:none;place-items:center;display:grid;position:absolute;inset:0}.cn-mover.fall{animation:.42s cubic-bezier(.16,.74,.28,1) both cn-fall}@keyframes cn-fall{0%{transform:translateY(calc(var(--span) * -100%))}}.cn-disc{border-radius:50%;width:78%;height:78%;box-shadow:inset 0 -7px 8px #00000038,0 6px 8px #00000038}.cn-disc.ghost{opacity:.42;box-shadow:none}.cn-disc.win{animation:1.15s ease-in-out infinite cn-glow;box-shadow:0 0 0 3px #fff4cc,0 0 16px #f3d48ad9,inset 0 -7px 8px #00000038}@keyframes cn-glow{50%{filter:brightness(1.18)}}.cn-orbit-wrap{width:100%}.cn-orbit{width:100%;height:auto;display:block;overflow:visible}.cn-well{fill:var(--frame-bottom)}.cn-poly{fill:none;stroke:#f3d48ad9;stroke-width:1.3px;stroke-linejoin:round}.cn-cell{fill:#ffffff0b;stroke:#f3d48a38;stroke-width:.45px}.cn-hit{fill:#0000;stroke:#0000;pointer-events:all;cursor:pointer;touch-action:manipulation}.cn-hit.hot{fill:#f3d48a29}.cn-hit[aria-disabled=true]{cursor:default}.cn-orbit :focus,.cn-orbit :focus-visible,.cn-hit:focus,.cn-hit:focus-visible{outline:none}.cn-hit:focus-visible{stroke:#f3d48a;stroke-width:.8px}.cn-hub{fill:#082028;stroke:#f3d48a66;stroke-width:.4px}.cn-hub-num,.cn-side-num{font-family:var(--font-tile);fill:#f6f1e6;pointer-events:none}.cn-hub-num{font-size:9px}.cn-side-num{fill:var(--ink);font-size:6px}.cn-orbit-disc{stroke:#0000002e;stroke-width:.35px;transform-box:fill-box;transform-origin:50%}.cn-orbit-disc.ghost{opacity:.45}.cn-orbit-disc.fall{animation:.4s cubic-bezier(.16,.74,.28,1) both cn-orbit-fall}@keyframes cn-orbit-fall{0%{transform:translate(var(--px), var(--py))}}.cn-orbit-disc.win{stroke:#fff4cc;stroke-width:.7px;filter:drop-shadow(0 0 2px #f3d48ae6)}.cn-actions{flex-wrap:wrap;gap:.4rem;margin-top:.2rem;display:flex}.cn-scrim{z-index:20;background:#0806049e;place-items:end center;padding:.8rem;display:grid;position:fixed;inset:0}.cn-sheet{background:var(--sheet);width:min(28rem,100%);max-height:min(90dvh,40rem);color:var(--ink);border:1px solid var(--line);border-radius:1.25rem;padding:1rem 1rem 1.1rem;overflow:auto}.cn-sheet h2{letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:.9rem 0 .4rem;font-size:.78rem;font-weight:600}.cn-sheet h2:first-child{margin-top:0}@media (prefers-reduced-motion:reduce){.cn-mover.fall,.cn-orbit-disc.fall,.cn-disc.win{animation:none}}
