@font-face{font-family:Bricolage Grotesque;src:url(/fonts/bricolage-grotesque.woff2)format("woff2");font-style:normal;font-weight:400 800;font-display:swap}@font-face{font-family:IBM Plex Mono;src:url(/fonts/ibm-plex-mono.woff2)format("woff2");font-style:normal;font-weight:600;font-display:swap}:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--paper:#120e1c;--panel:#211932;--panel-light:#2d2243;--ink:#f9f5ff;--muted:#beb1d4;--edge:#48375e;--lime:#dbff78;--peach:#ffad85;--shadow:#10091d;--heading:"Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;--mono:"IBM Plex Mono", ui-monospace, monospace}*{box-sizing:border-box}body{min-height:100vh;color:var(--ink);background:radial-gradient(ellipse at 77% 15%, #241833 0, transparent 51%), var(--paper);font:16px/1.5 var(--heading);margin:0}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:default}:is(button:focus-visible,input:focus-visible){outline:2px solid var(--lime);outline-offset:4px}h1,h2,p{margin:0}::selection{background:var(--lime);color:var(--paper)}.shell{width:min(1170px,100% - 72px);margin-inline:auto}.topbar{background:#171020a8;border-bottom:1px solid #342745}.header-inner{justify-content:space-between;align-items:center;gap:14px;min-height:72px;display:flex}.brand{color:var(--ink);font:800 21px var(--heading);letter-spacing:-.035em;background:0 0;border:0;align-items:center;gap:11px;padding:0;display:inline-flex}.brand-icon{width:37px;height:34px;color:var(--lime);background:linear-gradient(#493361,#332447);border:1px solid #6d538a;border-radius:9px;place-items:center;transition:transform .22s;display:grid;box-shadow:0 3px #0b0711,inset 0 1px #a789c133}.brand:hover .brand-icon{transform:rotate(-9deg)}.header-note{color:var(--muted);font:600 11px var(--mono);text-transform:uppercase;white-space:nowrap;border:1px solid #443553;border-radius:7px;align-items:center;gap:7px;padding:6px 9px;display:inline-flex}.header-tools{align-items:center;gap:10px;display:flex}.sound-toggle{min-height:34px;color:var(--muted);font:600 11px var(--mono);white-space:nowrap;background:linear-gradient(#362748,#291d39);border:1px solid #604b77;border-radius:7px;justify-content:center;align-items:center;gap:7px;padding:5px 8px;transition:color .18s,background .18s,transform .18s;display:inline-flex;box-shadow:inset 0 1px #c6a5e41c,0 2px #0b0712}.sound-toggle[aria-pressed=true] svg{color:var(--lime)}.sound-toggle:hover{color:var(--ink);background:#412e58}.sound-toggle:active{transform:translateY(2px)}.lobby-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:clamp(26px,4.4vw,66px);margin-block:clamp(42px,6.6vw,85px) 60px;display:grid}.hero{z-index:1;min-width:0;position:relative}.eyebrow{color:var(--muted);font:600 11px var(--mono);letter-spacing:.13em;align-items:center;gap:9px;display:flex}.eyebrow span,.round i{background:var(--lime);border-radius:50%;width:7px;height:7px;box-shadow:0 0 12px #d6ff6990}.hero h1{font:800 clamp(66px, 8.1vw, 121px)/.84 var(--heading);font-variation-settings:"opsz" 96;letter-spacing:-.063em;word-spacing:.1em;text-shadow:0 4px #09060e;margin:19px 0 18px}.hero h1 em{color:var(--lime);text-shadow:0 3px #738e35,0 7px #09060e;font-style:normal}.hero>p{color:var(--muted);font-size:clamp(16px,2vw,19px)}.card{border:1px solid var(--edge);background:linear-gradient(145deg, var(--panel-light) 0, var(--panel) 58%);border-radius:20px;box-shadow:inset 0 1px #c4a6ec18,0 5px #130d21,0 19px 38px #09061050}.lobby-form{max-width:420px;margin-top:28px;padding:16px}.mode-tabs{background:#181123;border:1px solid #392a4d;border-radius:10px;grid-template-columns:1fr 1fr;gap:4px;padding:4px;display:grid;box-shadow:inset 0 2px 5px #0a0613a0}.mode-tabs button{min-height:40px;color:var(--muted);background:0 0;border:1px solid #0000;border-radius:7px;justify-content:center;align-items:center;gap:7px;padding:7px 5px;font-size:14px;font-weight:700;transition:background .2s,color .2s;display:flex}.mode-tabs button:hover{color:var(--ink)}.mode-tabs button[aria-pressed=true]{color:var(--ink);background:linear-gradient(#473459,#332442);border-color:#5b4673;box-shadow:inset 0 1px #aa87ca24,0 2px #090611}.mode-tabs button[aria-pressed=true] svg{color:var(--lime)}form{gap:8px;margin-top:16px;display:grid}label{color:#e0d5ef;margin-top:3px;font-size:13px;font-weight:700}input{width:100%;min-width:0;color:var(--ink);background:#181123;border:1px solid #4c3a61;border-radius:9px;padding:10px 12px;box-shadow:inset 0 3px 7px #09061070}input::placeholder{color:#ad9bc3}.code-input{font-family:var(--mono);letter-spacing:.12em}.primary{color:#20290c;background:linear-gradient(#e6ff9e,#c8f351);border:1px solid #e7ffae;border-radius:9px;justify-content:space-between;align-items:center;gap:14px;min-height:47px;padding:10px 14px;font-size:15px;font-weight:800;transition:transform .18s,box-shadow .18s,filter .18s;display:inline-flex;box-shadow:inset 0 1px #fff9,0 4px #789737,0 6px #100c15}form .primary{margin-top:5px;margin-bottom:4px}.primary:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-2px);box-shadow:inset 0 1px #fff9,0 6px #789737,0 9px #100c15}.primary:active:not(:disabled){transform:translateY(3px);box-shadow:inset 0 1px #fff9,0 1px #789737,0 3px #100c15}.primary:disabled{opacity:.63}.form-error{color:#ffb4a7;font-size:14px}.demo{isolation:isolate;aspect-ratio:1.1;perspective:940px;background:radial-gradient(at 43% 28%,#7756a269,#0000 60%),radial-gradient(at 72% 77%,#623d6c9c,#0000 48%),linear-gradient(150deg,#30213f,#241734 72%,#1e132c);border:1px solid #513b6a;border-radius:32px;place-items:center;min-width:0;min-height:440px;display:grid;position:relative;box-shadow:inset 0 1px #d6b5ff2c,0 7px #0b0812,0 23px 55px #08060e85}.demo-grid{border-radius:inherit;pointer-events:none;position:absolute;inset:0;overflow:hidden}.demo-grid:before{content:"";background:repeating-linear-gradient(0deg,#b797e727 0 1px,#0000 1px 31px),repeating-linear-gradient(90deg,#b797e727 0 1px,#0000 1px 31px);position:absolute;inset:-22% -40% -30%;transform:perspective(740px)rotateX(38deg)rotate(-22deg)scale(1.12);-webkit-mask-image:radial-gradient(#000 18%,#000a 52%,#0000 77%);mask-image:radial-gradient(#000 18%,#000a 52%,#0000 77%)}.demo-grid:after{content:"";border:1px solid #c8a3ff37;border-radius:50%;position:absolute;inset:10% 7%;transform:rotate(-25deg)scaleY(.66);box-shadow:0 0 0 21px #c8a3ff10,0 0 0 46px #c8a3ff0c}.demo-inner{width:min(66%,383px);transform-style:preserve-3d;margin-top:-19px;transition:transform .55s cubic-bezier(.18,.8,.29,1.24);animation:.85s cubic-bezier(.2,.85,.27,1.15) backwards console-in;position:relative;transform:rotateX(21deg)rotate(-12deg)}@media (hover:hover){.demo:hover .demo-inner{transform:translateY(-6px)rotateX(13deg)rotate(-8deg)}}.demo-inner .board-case{background:radial-gradient(circle at 10px 10px,#b49ace 0 1px,#3d2b57 2px 3px,#0000 4px),radial-gradient(circle at calc(100% - 10px) calc(100% - 10px),#b49ace 0 1px,#3d2b57 2px 3px,#0000 4px),linear-gradient(155deg,#81649e,#523a72 48%,#41305a);border-color:#af86cc;box-shadow:inset 0 2px #f0ccff5a,inset 0 -2px #1d132d,0 7px #523a6f,0 13px #432d5d,0 19px #35234c,0 25px #281a3c,0 32px #170e26,12px 57px 45px #0a051bd6}.demo-spark{z-index:1;aspect-ratio:1;clip-path:polygon(50% 0,61% 36%,100% 50%,62% 60%,50% 100%,39% 60%,0 50%,39% 39%);background:#e9d4ff;width:clamp(18px,3vw,36px);animation:1.45s ease-in-out 3 twinkle;position:absolute}.spark-left{top:28%;left:11%}.spark-right{background:var(--lime);width:clamp(17px,2.5vw,30px);animation-delay:.24s;top:15%;right:15%}.demo-token{z-index:2;aspect-ratio:1;width:clamp(47px,6.8vw,84px);transform:rotate(var(--tilt));background:linear-gradient(148deg,#664d84,#36254d 74%);border:1px solid #a07bbb;border-radius:24%;place-items:center;animation:2.25s ease-in-out 2 token-float;display:grid;position:absolute;box-shadow:inset 0 1px #e5caff75,0 5px #2e2047,0 9px #1e142d,0 16px 22px #0c061ca5}.demo-token .glyph{width:62%}.demo-token-x{--tilt:19deg;top:15%;left:17%}.demo-token-o{--tilt:-17deg;animation-delay:.24s;bottom:16%;right:10%}.board-case{isolation:isolate;--winning-ink:var(--lime);background:radial-gradient(circle at 8px 8px,#9679b8 0 1px,#3d2b57 2px 3px,#0000 4px),radial-gradient(circle at calc(100% - 8px) calc(100% - 8px),#9679b8 0 1px,#3d2b57 2px 3px,#0000 4px),linear-gradient(154deg,#594174,#3b2a53);border:1px solid #785e96;border-radius:22px;width:min(100%,374px);margin-inline:auto;padding:clamp(11px,2vw,21px);position:relative;box-shadow:inset 0 1px #d9b9ff66,inset 0 -2px #20152e,0 6px #2c1b43,0 10px #140c20,0 21px 27px #0d0818a0}.board-case[data-winner=O]{--winning-ink:var(--peach)}.board{--gap:clamp(6px, 1.15vw, 11px);gap:var(--gap);grid-template-columns:repeat(3,minmax(0,1fr));display:grid;position:relative}.square{aspect-ratio:1;color:inherit;background:radial-gradient(at 50% 100%,#362447,#0000 86%),#24182f;border:1px solid #171021;border-radius:clamp(8px,1.3vw,14px);place-items:center;padding:0;transition:background .2s,border-color .2s,box-shadow .2s,transform .18s;display:grid;position:relative;box-shadow:inset 0 3px 7px #100918d6,0 1px #a280c566}:is(.square:not(:disabled):hover,.square:not(:disabled):focus-visible){z-index:1;background:radial-gradient(at 50% 100%,#573e6d,#0000),#30203e;border-color:#9d7dc0;transform:translateY(-2px);box-shadow:inset 0 1px #c8a6f064,0 3px #1d112f,0 5px 10px #0d0817}.square:not(:disabled):active{transform:translateY(2px)scale(.97)}.square[data-mark=X]{background:radial-gradient(at 50% 100%,#4d533b 0,#0000 85%),#261e34}.square[data-mark=O]{background:radial-gradient(at 50% 100%,#633c49 0,#0000 85%),#2b1c35}.square.square-win{border-color:var(--winning-ink);box-shadow:inset 0 0 20px #ffffff15, 0 0 14px color-mix(in srgb, var(--winning-ink) 38%, transparent);animation:.65s cubic-bezier(.22,.78,.23,1.35) both win-tile}.board-case[data-draw]{animation:.58s ease-out draw-settle}.board-case[data-draw] .square:not([data-mark]){background:#21182f;border-color:#604a79}.piece,.ghost{aspect-ratio:1;pointer-events:none;place-items:center;width:62%;display:grid}.board-live .piece{animation:.46s cubic-bezier(.21,.83,.27,1.37) both piece-in}.ghost{opacity:0;transition:opacity .19s,transform .23s;transform:scale(.78)}:is(.square:hover .ghost,.square:focus-visible .ghost){opacity:.45;transform:scale(.9)}.glyph{aspect-ratio:1;flex:none;width:58%;display:inline-block;position:relative}.piece .glyph,.ghost .glyph{width:100%}.glyph:before{content:"";position:absolute;inset:0}.glyph-x{filter:drop-shadow(0 .07em #789637)drop-shadow(0 .15em #394023)drop-shadow(0 0 .4em #d9fc6d54)}.glyph-x:before{clip-path:polygon(18% 1%,50% 33%,82% 1%,99% 18%,67% 50%,99% 82%,82% 99%,50% 67%,18% 99%,1% 82%,33% 50%,1% 18%);background:linear-gradient(140deg,#f5ffcc 12%,#dfff8a 47%,#a4cd3b 100%)}.glyph-o{filter:drop-shadow(0 .07em #a95349)drop-shadow(0 .15em #5d3140)drop-shadow(0 0 .4em #ffa38555)}.glyph-o:before{background:conic-gradient(from 245deg,#ffb38e,#ffe0b6,#ff9b79,#ed7e67,#ffb38e);border-radius:50%;-webkit-mask-image:radial-gradient(circle,#0000 0 43%,#000 45% 69%,#0000 71%);mask-image:radial-gradient(circle,#0000 0 43%,#000 45% 69%,#0000 71%)}.board-case .glyph{font-size:clamp(23px,4vw,56px)}.victory-line{--step:calc((100% + var(--gap)) / 3);z-index:2;left:calc((100% - 2 * var(--gap)) / 6 + var(--line-x) * var(--step));top:calc((100% - 2 * var(--gap)) / 6 + var(--line-y) * var(--step));width:calc(var(--line-length) * var(--step));height:5px;box-shadow:0 0 6px var(--winning-ink), 0 0 15px var(--winning-ink);pointer-events:none;transform:translateY(-50%) rotate(var(--line-angle));transform-origin:0;background:#fff9e7;border-radius:10px;animation:.52s cubic-bezier(.22,.75,.18,1) .14s backwards line-in;position:absolute}.victory-burst{z-index:3;pointer-events:none;position:absolute;inset:0}.victory-burst i{background:var(--lime);opacity:0;width:6px;height:12px;animation:confetti .92s var(--delay) ease-out both;border-radius:2px;position:absolute;top:50%;left:50%}.victory-burst i:nth-child(3n){background:var(--peach)}.victory-burst i:nth-child(3n+1){background:#c6a0ff;border-radius:50%;height:7px}.recent{margin-bottom:36px}.recent h2,.side-card h2{font:800 22px var(--heading);letter-spacing:-.035em;align-items:center;gap:9px;display:flex}.recent h2 svg,.side-card h2 svg{color:var(--lime)}.recent>div{flex-wrap:wrap;gap:9px;margin-top:13px;display:flex}.room-chip{border:1px solid var(--edge);color:var(--lime);background:var(--panel);font:600 12px var(--mono);border-radius:8px;align-items:center;gap:8px;padding:8px 10px;transition:background .2s,transform .2s;display:inline-flex;box-shadow:0 3px #08050e}.room-chip span{color:var(--muted);font:500 13px var(--heading);overflow-wrap:anywhere}.room-chip:hover{background:var(--panel-light);transform:translateY(-2px)}.room-header{justify-content:space-between;align-items:center;gap:12px;margin-block:31px 21px;display:flex}.text-button,.copy-button{color:var(--ink);border:1px solid var(--edge);background:#2b203c;border-radius:9px;align-items:center;gap:8px;padding:9px 12px;font-size:14px;font-weight:750;transition:background .2s,transform .2s;display:inline-flex;box-shadow:0 3px #0b0712}.text-button:hover,.copy-button:hover{background:#3b2a51;transform:translateY(-2px)}.copy-button b{color:var(--lime);font:600 13px var(--mono);letter-spacing:.06em;margin-left:4px}.copy-button svg{color:var(--lime)}.copy-label{color:#ded3ed}.game-grid{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);align-items:start;gap:22px;margin-bottom:42px;display:grid}.game-card{isolation:isolate;text-align:center;background:radial-gradient(at 50% 61%,#6b44804f,#0000 64%),linear-gradient(153deg,#362549,#211730 60%);padding:23px clamp(14px,4.8vw,64px) 30px;position:relative;overflow:hidden}.game-card:before{content:"";z-index:-1;pointer-events:none;background:radial-gradient(circle,#c099e12e 1px,#0000 1.4px) 0 0/18px 18px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(at 50% 65%,#000 1%,#0000 73%);mask-image:radial-gradient(at 50% 65%,#000 1%,#0000 73%)}.board-meta{margin-bottom:21px;position:relative}.round{color:#e1d2f5;font:600 11px var(--mono);letter-spacing:.11em;text-transform:uppercase;align-items:center;gap:7px;display:inline-flex}.board-meta h1{font:800 clamp(31px, 4.3vw, 58px)/1.05 var(--heading);font-variation-settings:"opsz" 76;overflow-wrap:anywhere;letter-spacing:-.047em;word-spacing:.055em;text-shadow:0 3px #140b20;margin:5px 0}.board-meta h1 span{animation:.32s ease-out both status-in;display:inline-block}.board-meta p{color:var(--muted);font-size:14px}.game-card[data-outcome=X] h1{color:var(--lime)}.game-card[data-outcome=O] h1{color:var(--peach)}.game-card[data-outcome=draw] h1{color:#dbc2ff}.game-card[data-outcome=draw] .round i{background:#dbc2ff;box-shadow:0 0 12px #dbc2ffa3}.rematch{width:min(100%,374px);margin-top:22px;animation:.34s ease-out backwards status-in;position:relative}.game-card .form-error{margin-top:14px}.sidebar{gap:19px;display:grid}.side-card{min-width:0;padding:20px}.side-card h2{margin-bottom:14px}.player{--player-color:var(--lime);background:#1c1328;border:1px solid #48365d;border-radius:10px;align-items:center;gap:10px;min-height:54px;margin-top:7px;padding:7px 10px;transition:border-color .25s,background .25s;display:flex;box-shadow:inset 0 2px 5px #10091c9e}.player[data-mark=O]{--player-color:var(--peach)}.player[data-active]{border-color:color-mix(in srgb, var(--player-color) 60%, #48365d);background:linear-gradient(96deg, color-mix(in srgb, var(--player-color) 12%, #241932), #231831 71%)}.player-icon{background:linear-gradient(#4a3661,#342549);border:1px solid #634c7d;border-radius:7px;flex:none;place-items:center;width:35px;height:35px;display:grid;box-shadow:0 2px #130c1e}.player-name{overflow-wrap:anywhere;flex:1;min-width:0;font-weight:750}.player-name small{color:#eadbff;font:600 9px var(--mono);vertical-align:2px;border:1px solid #624c7b;border-radius:4px;margin-left:7px;padding:1px 4px;display:inline-block}.player strong{color:var(--player-color);font:600 21px var(--mono);animation:.3s ease-out both status-in}.draw-score{color:var(--muted);justify-content:space-between;padding:10px 3px 0;font-size:14px;display:flex}.history-list{margin:0;padding:0;list-style:none}.history-list li{overflow-wrap:anywhere;border-top:1px solid #49365d;gap:3px;padding:9px 0;animation:.34s ease-out both status-in;display:grid}.history-list li span{color:var(--muted);font:600 11px var(--mono)}.history-list li strong{font-size:15px}.empty-history{color:var(--muted);font-size:14px}@keyframes console-in{0%{opacity:0;transform:translateY(23px)rotateX(35deg)rotate(-20deg)scale(.93)}to{opacity:1}}@keyframes token-float{0%,to{transform:rotate(var(--tilt))}50%{transform:translateY(-9px) rotate(calc(var(--tilt) + 7deg))}}@keyframes twinkle{0%,to{opacity:.75;transform:scale(.85)}50%{opacity:1;transform:scale(1.12)}}@keyframes piece-in{0%{opacity:.15;transform:translateY(-16px)scale(1.22)rotate(-10deg)}70%{opacity:1;transform:translateY(1px)scale(.94)rotate(1deg)}to{opacity:1;transform:none}}@keyframes win-tile{0%,to{transform:none}48%{transform:translateY(-3px)scale(1.025)}}@keyframes line-in{0%{transform:translateY(-50%) rotate(var(--line-angle)) scaleX(0);opacity:0}to{transform:translateY(-50%) rotate(var(--line-angle)) scaleX(1);opacity:1}}@keyframes confetti{0%{transform:rotate(var(--angle)) translateY(-13px) rotate(0deg);opacity:0}20%{opacity:1}to{transform:rotate(var(--angle)) translateY(calc(-1 * var(--distance))) rotate(230deg);opacity:0}}@keyframes draw-settle{0%,to{transform:none}32%{transform:rotate(-1.3deg)}63%{transform:rotate(.9deg)}}@keyframes status-in{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@media (max-width:960px){.shell{width:calc(100% - 48px)}.lobby-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}.demo{min-height:375px}}@media (max-width:720px){.shell{width:calc(100% - 36px)}.header-inner{min-height:61px}.lobby-grid{grid-template-columns:1fr;gap:30px;margin-block:37px 42px}.hero h1{font-size:clamp(64px,13vw,96px)}.lobby-form{max-width:none}.demo{aspect-ratio:1.24;min-height:0}.demo-inner{width:min(61%,325px)}.demo-token{width:clamp(43px,11vw,78px)}.game-grid{grid-template-columns:1fr}.room-header{margin-top:21px}}@media (max-width:530px){.header-note{display:none}}@media (max-width:390px){.brand{font-size:19px}.lobby-form{padding:12px}.mode-tabs button{white-space:nowrap;gap:4px;padding-inline:3px;font-size:13px}.mode-tabs button svg{flex:none;width:14px}.copy-label{display:none}.side-card{padding:15px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}.victory-burst{display:none}}