:root{--x:#ff5277;--o:#00b3ff;--win:#7cff8a;--primary:#ffe14d;--toggle-on:#b9a8ff;--danger:#ff8a8a;--on-color:#000;--border:3px;--cell:clamp(30px, 8.4vw, 50px);--gap:calc(var(--cell) * .1);--side:calc(var(--cell) * 4 + var(--gap) * 5);font-family:Bricolage Grotesque,ui-rounded,system-ui,sans-serif}:root,[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--page:#e4e7ff;--dot:#00000024;--surface:#fff;--surface-2:#f1f2ff;--ink:#000;--muted:#3d3d5c;--line:#000;--shadow:#000;--slab:#ffe14d;--peer:#d9d2ff}[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--page:#15122b;--dot:#f3f0ff1f;--surface:#262147;--surface-2:#1d1938;--ink:#f3f0ff;--muted:#bdb6e6;--line:#f3f0ff;--shadow:#f3f0ff;--slab:#6c5ce7;--peer:#4b3f9e}[data-theme=candy]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--page:#ffc8dd;--dot:#00000024;--surface:#fff;--surface-2:#ffe5ef;--ink:#000;--muted:#5c2a3d;--line:#000;--shadow:#000;--slab:#8ee3dd;--peer:#ffd1e3}[data-theme=mint]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--page:#b6f0cf;--dot:#00000024;--surface:#fff;--surface-2:#e6fbef;--ink:#000;--muted:#24513a;--line:#000;--shadow:#000;--slab:#ff9f43;--peer:#fff1a8}[data-theme=midnight]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--page:#0b1a2e;--dot:#eaf4ff1f;--surface:#16304f;--surface-2:#10243d;--ink:#eaf4ff;--muted:#a9c2dd;--line:#eaf4ff;--shadow:#ff5277;--slab:#1f7a8c;--peer:#2b4f7a}[data-theme=snow]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--page:#fff;--dot:#0000001a;--surface:#fff;--surface-2:#f6f6f6;--ink:#000;--muted:#555;--line:#000;--shadow:#000;--slab:#fff;--peer:#e8eeff}[data-theme=retro]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--page:#f2cf9a;--dot:#2b1a1029;--surface:#fff6e6;--surface-2:#f8e3c2;--ink:#2b1a10;--muted:#6b4a2f;--line:#2b1a10;--shadow:#2b1a10;--slab:#e07a2f;--peer:#f5c26b}[data-theme=synthwave]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--page:#1b0b3a;--dot:#ff6ec729;--surface:#2a1257;--surface-2:#200d45;--ink:#fdf0ff;--muted:#c9a6ff;--line:#ff6ec7;--shadow:#00e5ff;--slab:#4b1d8f;--peer:#5c2aa8}[data-theme=bloodmoon]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--page:#170404;--dot:#ff78781f;--surface:#2e0a0c;--surface-2:#230709;--ink:#ffe3e3;--muted:#dba3a3;--line:#ffd0d0;--shadow:#c0001d;--slab:#7a0f1a;--peer:#5a1a20}[data-theme=coffee]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--page:#1e140f;--dot:#f3e5d81a;--surface:#3b2a20;--surface-2:#2c1f17;--ink:#f3e5d8;--muted:#c7aa90;--line:#f3e5d8;--shadow:#c08552;--slab:#6f4e37;--peer:#57402f}[data-theme=batman]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--page:#0a0a0a;--dot:#ffffff14;--surface:#1c1c1c;--surface-2:#141414;--ink:#f2f2f2;--muted:#a6a6a6;--line:#f2f2f2;--shadow:#f2f2f2;--slab:#3a3a3a;--peer:#333;--x:#f2f2f2;--o:#9a9a9a;--win:#fff;--primary:#d4d4d4;--toggle-on:#bdbdbd;--danger:#6b6b6b}[data-theme=mono]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--page:#e6e6e6;--dot:#00000029;--surface:#fff;--surface-2:#f2f2f2;--ink:#000;--muted:#4a4a4a;--line:#000;--shadow:#000;--slab:#bdbdbd;--peer:#dedede}*{box-sizing:border-box}body{min-height:100dvh;color:var(--ink);background:radial-gradient(var(--dot) 1.2px, transparent 1.6px) 0 0 / 22px 22px, var(--page);margin:0}button,input{font:inherit;color:inherit}[hidden]{display:none!important}:focus-visible{outline:3px solid var(--o);outline-offset:2px}input{border:var(--border) solid var(--line);background:var(--surface);border-radius:8px;min-width:0;padding:.55rem .75rem;font-weight:600}input::placeholder{color:var(--muted);font-weight:400}.actions button,.toggles button,.lock,.online button,.join button,.coords button,.review button,.history button,.end-card-actions button{border:var(--border) solid var(--line);background:var(--surface);box-shadow:3px 3px 0 var(--shadow);cursor:pointer;border-radius:8px;padding:.55rem .85rem;font-weight:700;transition:translate 80ms,box-shadow 80ms,background .15s}:is(.actions,.toggles,.online,.join,.coords,.review,.history,.end-card-actions) button:hover:not(:disabled),.lock:hover:not(:disabled){box-shadow:4px 4px 0 var(--shadow);translate:-1px -1px}:is(.actions,.toggles,.online,.join,.coords,.review,.history,.end-card-actions) button:active:not(:disabled),.lock:active:not(:disabled){box-shadow:0 0 0 var(--shadow);translate:3px 3px}button:disabled,input:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}.app{max-width:74rem;padding:max(1.25rem, env(safe-area-inset-top)) 1rem 2.5rem;grid-template:"brand brand""stage panel""chat panel"1fr/minmax(0,1fr) 21rem;gap:1.75rem 2rem;margin:0 auto;display:grid}.brand{grid-area:brand;justify-content:space-between;align-items:center;gap:1rem;display:flex}.brand-links{flex:none;align-items:center;gap:.6rem;display:flex}.repo-link,.rules-button{box-sizing:border-box;border:var(--border) solid var(--line);background:var(--surface);height:2.5rem;box-shadow:3px 3px 0 var(--shadow);color:var(--ink);cursor:pointer;border-radius:8px;flex:none;align-items:center;gap:.45rem;padding:.45rem .8rem;font-weight:800;text-decoration:none;transition:translate 80ms,box-shadow 80ms;display:inline-flex}.repo-link:hover,.rules-button:hover{box-shadow:4px 4px 0 var(--shadow);translate:-1px -1px}.repo-link:active,.rules-button:active{box-shadow:0 0 0 var(--shadow);translate:3px 3px}.brand h1{letter-spacing:-.05em;margin:0;font-size:clamp(2.4rem,7vw,3.6rem);font-weight:800;line-height:1}.home-link{color:inherit;text-decoration:none}.home-link:focus-visible{outline:3px solid var(--line);outline-offset:4px;border-radius:6px}.brand h1 span{border:var(--border) solid var(--line);background:var(--x);color:var(--on-color);box-shadow:4px 4px 0 var(--shadow);border-radius:8px;margin-left:.08em;padding:0 .14em .04em;display:inline-block;rotate:-5deg}.rules-button{justify-content:center;width:2.5rem;padding:0}@media (width<=30rem){.repo-link span{display:none}.repo-link{justify-content:center;width:2.5rem;padding:0}}.rules-banner{z-index:11;top:max(.75rem, env(safe-area-inset-top));border:var(--border) solid #000;background:var(--primary);width:min(100vw - 2rem,26rem);color:var(--on-color);text-align:left;cursor:pointer;border-radius:12px;gap:.25rem;padding:.7rem .9rem;line-height:1.4;animation:.3s cubic-bezier(.34,1.56,.64,1) banner-in;display:grid;position:fixed;left:50%;translate:-50%;box-shadow:5px 5px #000}.rules-banner b{font-size:1rem;font-weight:800}.rules-banner span{font-size:.9rem;font-weight:600}.rules-banner small{opacity:.75;justify-self:end;font-size:.75rem;font-weight:700}@keyframes banner-in{0%{translate:-50% -150%}}.segmented{border:var(--border) solid var(--line);background:var(--surface-2);box-shadow:3px 3px 0 var(--shadow);border-radius:10px;gap:.25rem;padding:.25rem;display:flex}.segmented button{color:var(--muted);cursor:pointer;background:0 0;border:2px solid #0000;border-radius:6px;flex:1;padding:.45rem .4rem;font-weight:600;line-height:1.15;transition:background .15s,color .15s}.segmented button:hover:not(:disabled):not([aria-pressed=true]){color:var(--ink);border-color:var(--line)}.segmented button[aria-pressed=true]{background:var(--ink);color:var(--surface);font-weight:800}.segmented button:disabled[aria-pressed=true]{opacity:1}.theme-picker{grid-template-columns:repeat(auto-fill,minmax(4.4rem,1fr));gap:.5rem;display:grid}.theme-picker button{border:2px solid var(--line);background:var(--surface);box-shadow:2px 2px 0 var(--shadow);cursor:pointer;border-radius:8px;gap:.3rem;padding:.35rem .35rem .3rem;font-size:.8rem;font-weight:700;transition:translate 80ms,box-shadow 80ms;display:grid}.theme-picker button:hover{box-shadow:3px 3px 0 var(--shadow);translate:-1px -1px}.theme-picker button:active{box-shadow:0 0 0 var(--shadow);translate:2px 2px}.theme-picker button[aria-pressed=true]{background:var(--primary);color:var(--on-color);font-weight:800}.theme-menu summary{border:var(--border) solid var(--line);background:var(--surface);box-shadow:3px 3px 0 var(--shadow);cursor:pointer;border-radius:10px;align-items:center;gap:.6rem;padding:.4rem .6rem;font-weight:800;list-style:none;display:flex}.theme-menu summary::-webkit-details-marker{display:none}.theme-menu summary:after{content:"▾";margin-left:auto;transition:rotate .15s}.theme-menu[open] summary:after{rotate:180deg}.theme-menu summary .swatch{width:3rem;height:1.9rem}.theme-menu .theme-picker{margin-top:.7rem}.swatch{border:2px solid #000;border-radius:5px;height:2.2rem;display:flex;overflow:hidden}.swatch span{background:var(--page);flex:1;place-items:center;display:grid}.swatch span:before{content:"";border:2px solid var(--line);background:var(--slab);width:1rem;height:1rem;box-shadow:2px 2px 0 var(--shadow);border-radius:3px}.stage{flex-direction:column;grid-area:stage;align-items:center;gap:1.1rem;min-width:0;display:flex;position:relative}.status{border:var(--border) solid var(--line);background:var(--surface);box-shadow:5px 5px 0 var(--shadow);text-align:center;border-radius:10px;padding:.6rem 1.3rem;font-size:1.15rem;font-weight:800;transition:background .2s}body[data-turn=X] .status[data-state=playing]{background:var(--x);color:var(--on-color)}body[data-turn=O] .status[data-state=playing]{background:var(--o);color:var(--on-color)}.status[data-state=won],.status[data-state=timeout]{background:var(--win);color:var(--on-color);animation:.4s cubic-bezier(.34,1.56,.64,1) pop}.status[data-state=review]{background:var(--surface-2);color:var(--muted)}.board{gap:.5rem;max-width:100%;display:flex}.board.thinking{cursor:progress}.layer{position:relative}.layer-label{border:2px solid var(--line);background:var(--surface);box-shadow:2px 2px 0 var(--shadow);white-space:nowrap;border-radius:6px;place-self:start;padding:.1rem .5rem;font-size:.8rem;font-weight:800}.grid{grid-template-columns:repeat(4, var(--cell));gap:var(--gap);padding:var(--gap);border:var(--border) solid var(--line);border-radius:calc(var(--cell) * .22);background:var(--slab);box-shadow:6px 6px 0 var(--shadow);display:grid}.board.tower{cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;padding-block:0 calc(var(--side) * .3);flex-direction:column-reverse;align-items:center}.board.tower[data-dragging]{cursor:grabbing}.tower .layer{height:calc(var(--side) * .72);pointer-events:none;width:calc(var(--side) * 1.5);perspective:1400px;place-items:center;display:grid}.tower .layer-label{display:none}.tower .grid,.tower .plate{will-change:transform;transition:transform .35s cubic-bezier(.34,1.3,.64,1)}.board[data-dragging] .grid,.board[data-dragging] .plate{transition:none}.tower .grid{box-shadow:none}.plate{display:none}.tower .plate,.tower .grid{grid-area:1/1}.tower .plate{width:calc(var(--side) + var(--border) * 2);height:calc(var(--side) + var(--border) * 2);border-radius:calc(var(--cell) * .22);background:var(--shadow);display:block}.tower .cell,.tower .cell:hover,.tower .cell:focus-visible,.tower .cell:active{box-shadow:none}.board:not(.tower) :is(.base,.marks){display:none}.tower .grid:not(.base){background:0 0;border-color:#0000}.foot{width:var(--cell);height:var(--cell);border-radius:calc(var(--cell) * .16);background:var(--line)}.mark{width:var(--cell);height:var(--cell);position:relative}.tower .cell .piece{visibility:hidden}.tower .mark.x .piece,.tower .mark.o .piece{filter:drop-shadow(1px 0 0 var(--line)) drop-shadow(-1px 0 0 var(--line)) drop-shadow(0 1px 0 var(--line)) drop-shadow(0 -1px 0 var(--line))}.angle-row{color:var(--muted);justify-content:space-between;align-items:center;gap:.6rem;font-size:.85rem;font-weight:600;display:flex}.angle-row button{border:2px solid var(--line);background:var(--surface);box-shadow:2px 2px 0 var(--shadow);cursor:pointer;border-radius:8px;flex:none;padding:.35rem .7rem;font-weight:700}.board.flat{--cell:clamp(24px, 8vw, 44px);justify-content:safe center;gap:1.25rem;max-width:100%;padding:.25rem .6rem .6rem .25rem;display:grid;overflow-x:auto}.flat.layout-grid{grid-template-columns:repeat(2,auto)}.flat.layout-row{--cell:clamp(20px, 3.4vw, 36px);grid-template-columns:repeat(4,auto)}.flat.layout-column{grid-template-columns:auto}.flat.layout-steps{flex-direction:column-reverse;align-items:flex-start;gap:.6rem;display:flex}.flat.layout-steps .layer{margin-left:calc(var(--i) * var(--cell) * 1.4)}.flat .layer{flex-direction:column;gap:.45rem;display:flex}.cell{pointer-events:auto;width:var(--cell);height:var(--cell);border:2px solid var(--line);border-radius:calc(var(--cell) * .16);background:var(--surface);box-shadow:2px 2px 0 var(--shadow);cursor:pointer;padding:0;transition:background .15s,translate 80ms,box-shadow 80ms;position:relative}.cell:hover,.cell:focus-visible{box-shadow:3px 3px 0 var(--shadow);outline:none;translate:-1px -1px}.cell:focus-visible{background:var(--peer)}.cell:active{box-shadow:0 0 0 var(--shadow);translate:2px 2px}.cell.peer{background:var(--peer)}.cell.last{border-style:dashed;border-width:4px}.piece{transition:scale .22s cubic-bezier(.34,1.56,.64,1);position:absolute;inset:14%;scale:0}:is(.cell,.mark).x .piece,:is(.cell,.mark).o .piece{filter:drop-shadow(1px 0 0 var(--line)) drop-shadow(-1px 0 0 var(--line)) drop-shadow(0 1px 0 var(--line)) drop-shadow(0 -1px 0 var(--line)) drop-shadow(2px 2px 0 var(--shadow));scale:1}.piece:before{content:"";position:absolute;inset:0}:is(.cell,.mark).x .piece:before{background:var(--x);clip-path:polygon(20% 0,50% 30%,80% 0,100% 20%,70% 50%,100% 80%,80% 100%,50% 70%,20% 100%,0 80%,30% 50%,0 20%)}:is(.cell,.mark).o .piece:before{border:calc(var(--cell) * .13) solid var(--o);border-radius:50%;inset:4%}.cell.win{background:var(--win);animation:.9s step-end infinite win-blink}.board.finished :is(.cell,.mark):not(.win) .piece{opacity:.35}.cell.shake{animation:.9s ease-out reject}.panel{border:var(--border) solid var(--line);background:var(--surface);box-shadow:8px 8px 0 var(--shadow);border-radius:14px;flex-direction:column;grid-area:panel;align-self:start;gap:1.1rem;padding:1.25rem;display:flex}.field{flex-direction:column;gap:.45rem;display:flex}.label{font-size:.9rem;font-weight:800}.score{text-align:center;grid-template-columns:repeat(3,1fr);gap:.6rem;display:grid}.tally{border:var(--border) solid var(--line);background:var(--surface-2);box-shadow:3px 3px 0 var(--shadow);border-radius:10px;padding:.45rem .25rem}.tally.X{background:var(--x);color:var(--on-color)}.tally.O{background:var(--o);color:var(--on-color)}.tally b{font-size:1.7rem;font-weight:800;line-height:1.1;display:block}.tally span{font-size:.8rem;font-weight:600}.actions{gap:.6rem;display:flex}.actions button{flex:1;padding:.7rem .8rem}.actions .primary{background:var(--primary);color:var(--on-color);flex:2;font-weight:800}#sound{flex:0 0 3.2rem;place-items:center;padding:0;display:grid}.toggles{gap:.6rem;display:flex}.toggles button{color:var(--muted);flex:1;font-weight:600}.toggles button[aria-pressed=true]{background:var(--toggle-on);color:var(--on-color);font-weight:800}.lock[aria-pressed=true]{opacity:1;background:var(--primary);color:var(--on-color)}.help{color:var(--muted);font-size:.92rem}.help summary,.history summary{cursor:pointer;color:var(--ink);font-weight:800}.help p{margin:.5rem 0 0;line-height:1.45}.online{border:var(--border) solid var(--line);background:var(--o);color:var(--on-color);box-shadow:4px 4px 0 var(--shadow);border-radius:12px;flex-direction:column;gap:.8rem;padding:.9rem;display:flex}.online button,.online input{color:#000;background:#fff;border-color:#000;box-shadow:3px 3px #000}.online button:hover:not(:disabled){box-shadow:4px 4px #000}.online input{box-shadow:none}.online-code{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.online-code b{letter-spacing:.2em;font-size:2.2rem;font-weight:800;line-height:1.1;display:block}.join-row{flex-wrap:wrap;gap:.5rem;display:flex}.join-row input{text-transform:uppercase;letter-spacing:.2em;flex:5rem}.board-hidden{aspect-ratio:1;border:var(--border) dashed var(--line);text-align:center;width:min(100%,22rem);color:var(--muted);background:repeating-linear-gradient(45deg, var(--dot) 0 2px, transparent 2px 14px), var(--surface);border-radius:14px;place-content:center;place-items:center;gap:.4rem;padding:1.5rem;font-weight:600;display:grid}.board-hidden strong{color:var(--ink);font-size:1.6rem;font-weight:800}.coords,.review{flex-wrap:wrap;justify-content:center;align-items:center;gap:.6rem;display:flex}.coords{flex-direction:column;gap:.55rem}.coords-title{font-size:.9rem;font-weight:800}.coords-slots{gap:.5rem;display:flex}.slot{border:var(--border) solid var(--line);background:var(--surface);border-radius:8px;justify-items:center;width:4.6rem;padding:.25rem .3rem .3rem;display:grid}.slot small{color:var(--muted);font-size:.75rem;font-weight:700}.slot b{min-height:1.6rem;font-size:1.4rem;font-weight:800;line-height:1.15}.slot.next{background:var(--primary);color:var(--on-color)}.slot.next small{color:var(--on-color)}.played-x .slot{background:var(--x);color:var(--on-color)}.played-o .slot{background:var(--o);color:var(--on-color)}.played-x .slot small,.played-o .slot small{color:var(--on-color)}.keypad{flex-wrap:wrap;justify-content:center;gap:.5rem;display:flex}.keypad button{min-width:2.9rem;min-height:2.9rem;padding:.4rem .6rem;font-size:1.2rem;font-weight:800}.keypad .place{background:var(--win);color:var(--on-color)}.cell.aim{outline:3px solid var(--o);outline-offset:2px;background:var(--peer)}.review{border:var(--border) solid var(--line);background:var(--surface);box-shadow:4px 4px 0 var(--shadow);border-radius:12px;padding:.7rem .9rem;font-weight:700}.review-buttons{flex-wrap:wrap;gap:.45rem;display:flex}.chat{border:var(--border) solid var(--line);background:var(--surface);width:min(100%,26rem);box-shadow:4px 4px 0 var(--shadow);border-radius:12px;flex-direction:column;grid-area:chat;place-self:start center;gap:.5rem;padding:.7rem;display:flex}.chat-title{font-size:.9rem;font-weight:800}.chat-log{border:2px solid var(--line);background:var(--surface-2);border-radius:8px;flex-direction:column;gap:.4rem;height:9rem;margin:0;padding:.5rem;list-style:none;display:flex;overflow-y:auto}.chat-empty{color:var(--muted);margin:auto;font-weight:600}.chat-message{border:2px solid var(--line);max-width:85%;box-shadow:2px 2px 0 var(--shadow);color:var(--on-color);overflow-wrap:anywhere;border-radius:8px 8px 8px 2px;align-self:flex-start;padding:.3rem .6rem .35rem;display:grid}.chat-message.mine{border-radius:8px 8px 2px;align-self:flex-end}.chat-message.from-x{background:var(--x)}.chat-message.from-o{background:var(--o)}.chat-message b{font-size:.75rem}.chat-form{gap:.5rem;display:flex}.chat-form input{flex:1}.chat-form button{border:var(--border) solid var(--line);background:var(--primary);color:var(--on-color);box-shadow:3px 3px 0 var(--shadow);cursor:pointer;border-radius:8px;padding:.5rem .9rem;font-weight:800;transition:translate 80ms,box-shadow 80ms}.chat-form button:hover:not(:disabled){box-shadow:4px 4px 0 var(--shadow);translate:-1px -1px}.chat-form button:active:not(:disabled){box-shadow:0 0 0 var(--shadow);translate:3px 3px}.chat-notice{z-index:10;top:max(.75rem, env(safe-area-inset-top));border:var(--border) solid #000;background:var(--primary);width:min(100vw - 2rem,26rem);color:var(--on-color);text-align:left;cursor:pointer;border-radius:12px;align-items:center;gap:.6rem;padding:.55rem .8rem;animation:.3s cubic-bezier(.34,1.56,.64,1) notice-in;display:flex;position:fixed;left:50%;translate:-50%;box-shadow:5px 5px #000}.chat-notice.from-x{background:var(--x)}.chat-notice.from-o{background:var(--o)}.chat-notice-icon{font-size:1.3rem}.chat-notice-body{flex:1;min-width:0;display:grid}.chat-notice-body b{font-size:.8rem}.chat-notice-body span{text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}.chat-notice small{color:#000;background:#fff;border:2px solid #000;border-radius:6px;padding:.2rem .5rem;font-weight:800}@keyframes notice-in{0%{translate:-50% -150%}}.history ol{flex-direction:column;gap:.45rem;max-height:14rem;margin:.6rem 0 0;padding:0 .3rem .3rem 0;list-style:none;display:flex;overflow-y:auto}.history li{border:2px solid var(--line);background:var(--surface-2);border-radius:8px;grid-template-columns:auto 1fr auto auto;align-items:center;gap:.6rem;padding:.35rem .5rem;font-size:.9rem;font-weight:700;display:grid}.history li.active{background:var(--win);color:var(--on-color)}.history .result{color:inherit;opacity:.8;font-weight:400}.history button{box-shadow:2px 2px 0 var(--shadow);padding:.2rem .6rem;font-size:.85rem}.limits{border:var(--border) solid var(--line);background:var(--surface-2);box-shadow:3px 3px 0 var(--shadow);border-radius:10px}.limit{gap:.5rem;padding:.6rem .7rem;display:grid}.limit+.limit{border-top:2px solid var(--line)}.limit-switch{cursor:pointer;justify-content:space-between;align-items:center;gap:.6rem;font-weight:700;display:flex}.limit-switch input{appearance:none;border:2px solid var(--line);background:var(--surface);width:44px;height:24px;box-shadow:2px 2px 0 var(--shadow);cursor:pointer;border-radius:4px;flex:none;margin:0;padding:0;transition:background .15s;position:relative}.limit-switch input:after{content:"";box-sizing:border-box;border:2px solid var(--line);background:var(--surface-2);border-radius:2px;width:16px;height:16px;transition:translate .15s,background .15s;position:absolute;top:2px;left:2px}.limit-switch input:checked{background:var(--toggle-on)}.limit-switch input:checked:after{background:var(--surface);translate:20px}.limit-options{border:2px solid var(--line);background:var(--surface);border-radius:8px;gap:.2rem;padding:.2rem;display:flex}.limit-options button,.limit-custom{min-width:0;color:var(--muted);cursor:pointer;background:0 0;border:2px solid #0000;border-radius:5px;flex:1;padding:.3rem .2rem;font-size:.9rem;font-weight:700;transition:background .15s,color .15s}.limit-options button:hover:not(:disabled):not([aria-pressed=true]){color:var(--ink);border-color:var(--line)}.limit-options button[aria-pressed=true],.limit-custom.active{background:var(--ink);color:var(--surface);font-weight:800}.limit-custom{border:2px dashed var(--line);cursor:text;flex:1.6;justify-content:center;align-items:center;gap:.15rem;padding-inline:.35rem;display:flex}.limit-custom input{width:4ch;min-width:0;color:inherit;text-align:right;font-variant-numeric:tabular-nums;appearance:textfield;background:0 0;border:0;border-radius:0;padding:0;font-weight:800}.limit-custom input::-webkit-inner-spin-button{appearance:none;margin:0}.limit-custom input::-webkit-outer-spin-button{appearance:none;margin:0}.limit-custom input:focus-visible{outline:none}.limit-custom:focus-within{color:var(--ink);background:var(--peer);border-style:solid}.limit-custom span{font-size:.8rem;font-weight:700}.limit-custom input:placeholder-shown{width:100%}.limit-custom input::placeholder{color:var(--muted);text-align:center;font-weight:600}.limit-custom input:placeholder-shown+span{display:none}.clock-summary{color:var(--muted);margin:0;font-size:.85rem;font-weight:600}.clocks{flex-wrap:wrap;justify-content:center;align-items:center;gap:.6rem;display:flex}.clock{border:var(--border) solid var(--line);background:var(--surface);box-shadow:3px 3px 0 var(--shadow);font-variant-numeric:tabular-nums;color:var(--muted);border-radius:8px;padding:.3rem .8rem;font-weight:800}.clock.x.active{background:var(--x);color:var(--on-color)}.clock.o.active{background:var(--o);color:var(--on-color)}.clock.low{animation:1s step-end infinite clock-blink}.clock.out{background:var(--danger);color:var(--on-color);text-decoration:line-through}.clock-note{text-align:center;width:100%;color:var(--muted);font-size:.85rem;font-weight:600}@keyframes clock-blink{50%{background:var(--danger);color:var(--on-color)}}.end-card{border:var(--border) solid var(--line);background:var(--surface);width:min(92vw,30rem);max-height:96dvh;color:var(--ink);box-shadow:8px 8px 0 var(--shadow);border-radius:14px;padding:1rem;overflow-y:auto}.end-card[open]{flex-direction:column;gap:.9rem;animation:.3s cubic-bezier(.34,1.56,.64,1) pop;display:flex}.end-card::backdrop{background:#0000008c}.end-card img{object-fit:contain;border:2px solid var(--line);border-radius:10px;width:100%;height:auto;max-height:70dvh}.include-options{flex-wrap:wrap;gap:.4rem 1.2rem;display:flex}.end-card .include{cursor:pointer;align-items:center;gap:.5rem;font-weight:700;display:flex}.end-card .include input{width:1.2rem;height:1.2rem;accent-color:var(--toggle-on);margin:0;padding:0}.end-card-actions{gap:.6rem;display:flex}.end-card-actions button{flex:1}.end-card-actions .primary{background:var(--primary);color:var(--on-color);flex:1.5;font-weight:800}.home-confirm{width:min(92vw,24rem)}.home-confirm p{margin:0;font-weight:700}.toast{left:50%;bottom:max(1.5rem, env(safe-area-inset-bottom));border:var(--border) solid var(--line);background:var(--ink);max-width:calc(100vw - 2rem);color:var(--surface);box-shadow:5px 5px 0 var(--x);opacity:0;pointer-events:none;border-radius:10px;padding:.75rem 1.2rem;font-weight:700;transition:opacity .2s,translate .2s;position:fixed;translate:-50% 1rem}.toast[data-tone=info]{box-shadow:5px 5px 0 var(--o)}.toast.show{opacity:1;translate:-50%}.burst{z-index:5;pointer-events:none;position:fixed;inset:0;overflow:hidden}.burst span{background:var(--c);border:2px solid #000;width:11px;height:11px;animation:1.4s cubic-bezier(.1,.8,.3,1) forwards burst;position:absolute;top:40%;left:50%}@keyframes burst{0%{opacity:1;translate:0;rotate:0deg}to{translate:var(--x) calc(var(--y) + 80px);opacity:0;rotate:540deg}}@keyframes win-blink{50%{background:var(--surface)}}@keyframes reject{0%{background:var(--danger);translate:0}10%{translate:-4px}20%{translate:4px}30%{translate:-3px}40%{background:var(--danger);translate:0}to{translate:0}}@keyframes pop{0%{scale:.85}to{scale:1}}@media (width>=72rem){.app:has(>.chat:not([hidden])){grid-template:"brand brand brand""chat stage panel"1fr/19rem minmax(0,1fr) 21rem;max-width:90rem}.app:has(>.chat:not([hidden])) .chat{justify-self:stretch;width:auto;position:sticky;top:1rem}.app:has(>.chat:not([hidden])) .chat-log{height:min(30rem,100dvh - 10rem)}}@media (width<=52rem){.app{grid-template-rows:none;grid-template-columns:minmax(0,1fr);grid-template-areas:"brand""stage""chat""panel";gap:1.25rem}:root{--cell:clamp(30px, 11.5vw, 50px)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}.brand-links{flex-wrap:wrap;justify-content:flex-end}.account-button{cursor:pointer;font:inherit}.account-button img:not([hidden])+svg{display:none}.avatar{border:2px solid var(--line);vertical-align:middle;object-fit:cover;border-radius:50%;width:1.4rem;height:1.4rem}.offline-badge{border:2px solid var(--line);background:var(--win);color:var(--on-color);border-radius:6px;padding:.2rem .55rem;font-size:.8rem;font-weight:800}.my-games{width:min(94vw,34rem)}.my-games-head{justify-content:space-between;align-items:center;display:flex}.my-games h2,.my-games h3{margin:0;font-weight:800}.my-games h3{margin-block:.4rem;font-size:1rem}.my-games-head button,.account button,.my-games-list button,.login-link{border:2px solid var(--line);background:var(--surface);box-shadow:2px 2px 0 var(--shadow);color:var(--ink);cursor:pointer;border-radius:8px;padding:.35rem .75rem;font-weight:800;text-decoration:none}.login-link{background:var(--primary);color:var(--on-color)}.account{flex-wrap:wrap;align-items:center;gap:.6rem;display:flex}.account .avatar{width:2rem;height:2rem}.my-games-note{color:var(--muted);margin:0;font-weight:600}.my-games-stats{grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:.5rem;display:grid}.my-tally{border:2px solid var(--line);background:var(--surface-2);border-radius:8px;padding:.45rem .6rem;display:grid}.my-tally span{color:var(--muted);font-size:.85rem}.my-games-list{gap:.4rem;margin:0;padding:0;list-style:none;display:grid}.my-games-list li{border:2px solid var(--line);background:var(--surface-2);border-radius:8px;align-items:center;gap:.6rem;padding:.4rem .6rem;display:flex}.my-games-list li>div{flex:1;min-width:0;display:grid}.my-games-list small{color:var(--muted)}.my-games-list .empty{color:var(--muted);font-weight:600}.badge{border:2px solid var(--line);background:var(--primary);color:var(--on-color);white-space:nowrap;border-radius:6px;padding:.1rem .45rem;font-size:.75rem;font-weight:800}.tally.away{opacity:.6;border-style:dashed}.tally .avatar{width:1.1rem;height:1.1rem;margin-right:.25rem}.update-bar{left:50%;top:max(.75rem, env(safe-area-inset-top));z-index:30;border:var(--border) solid var(--line);background:var(--surface);box-shadow:5px 5px 0 var(--shadow);border-radius:10px;align-items:center;gap:.75rem;padding:.55rem .75rem .55rem 1rem;font-weight:700;display:flex;position:fixed;translate:-50%}.update-bar button{border:2px solid var(--line);background:var(--primary);color:var(--on-color);cursor:pointer;border-radius:8px;padding:.35rem .8rem;font-weight:800}.nearby{border:var(--border) solid var(--line);background:var(--surface-2);box-shadow:4px 4px 0 var(--shadow);border-radius:12px;gap:.7rem;padding:.9rem;display:grid}.nearby-intro,.nearby-step-text{margin:0;font-weight:600}.nearby-me{align-items:center;gap:.5rem;display:flex}.nearby-me input{flex:1}.device-icon{border:2px solid var(--line);background:var(--surface);border-radius:8px;flex:none;place-items:center;width:2rem;height:2rem;display:inline-grid}.device-icon svg{width:1.3rem;height:1.3rem}.nearby-start,.nearby-actions{gap:.5rem;display:flex}.nearby button{border:2px solid var(--line);background:var(--surface);box-shadow:2px 2px 0 var(--shadow);cursor:pointer;border-radius:8px;flex:1;padding:.5rem .75rem;font-weight:800}.nearby-start button:first-child{background:var(--primary);color:var(--on-color)}.nearby-step{gap:.6rem;display:grid}.nearby-qr{border:var(--border) solid var(--line);background:#fff;border-radius:10px;justify-self:center;width:min(100%,15rem);padding:.6rem}.nearby-qr svg{width:100%;height:auto;display:block}.nearby-text textarea{word-break:break-all;width:100%;margin-block:.4rem;font:.8rem ui-monospace,monospace}.nearby-input{gap:.5rem;display:grid}.nearby-devices{gap:.4rem;margin:0;padding:0;list-style:none;display:grid}.nearby-devices li{grid-template-rows:auto auto;grid-template-columns:auto 1fr;align-items:center;column-gap:.6rem;display:grid}.nearby-devices .device-icon{grid-row:span 2}.nearby-devices small{color:var(--muted);font-weight:600}.nearby-laptop summary,.nearby-text summary{cursor:pointer;font-weight:700}.nearby-laptop p{color:var(--muted);margin:.4rem 0 0}.lan-host{align-items:center;gap:.5rem;margin:0;font-weight:800;display:flex}.mode-picker{grid-template-columns:1fr 1fr;display:grid}.mode-picker button{justify-content:center;align-items:center;gap:.45rem;padding-block:.5rem;display:flex}.mode-picker svg{flex:none;width:1.2rem;height:1.2rem}.nearby .join-row input{text-transform:none;letter-spacing:normal}.share-buttons{gap:.4rem;display:grid}.online-qr{text-align:center;justify-items:center;gap:.4rem;font-weight:700;display:grid}#share-qr[aria-expanded=true]{background:var(--ink);color:var(--surface)}
