:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#060719;color:#fff3cb}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden;touch-action:none}button{border:0;border-radius:999px;padding:12px 16px;color:#08101f;background:#ffe36e;font:inherit;font-weight:800}button:active{transform:scale(.97)}.ghost-button,.hud-back{color:#fff3cb;background:#fff3cb1f;border:1px solid rgba(255,243,203,.18)}.app{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:radial-gradient(circle at 20% 10%,rgba(116,217,255,.16),transparent 28%),radial-gradient(circle at 80% 16%,rgba(255,142,200,.14),transparent 24%),linear-gradient(#060719,#11162c 54%,#1b1740)}.stage{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center}.stage canvas{display:block;max-width:100vw;max-height:100vh;margin:auto}.hud{position:fixed;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));z-index:5;display:flex;gap:8px;pointer-events:none}.hud button{pointer-events:auto}.hud.top{top:max(12px,env(safe-area-inset-top))}.hud span,.share,.hud-back{min-height:36px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;color:#fff3cb;background:#0607199e;border:1px solid rgba(255,243,203,.18);border-radius:999px;box-shadow:0 10px 28px #00000042;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-size:.85rem;font-weight:900}.hud-back{padding:0 12px;color:#fff3cb}.online{color:#8cf39b!important}.offline{color:#ff8ec8!important}.panel{position:relative;z-index:10;width:min(330px,calc(100vw - 32px));display:grid;gap:12px;padding:22px;text-align:center;background:#07091fd6;border:1px solid rgba(255,243,203,.22);border-radius:22px;box-shadow:0 24px 70px #00000061;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.panel h1{margin:0;color:#ffe36e;font-size:clamp(2rem,10vw,3.25rem);line-height:.95}.panel p{margin:0 0 4px;color:#d6c9ff;line-height:1.45}.share{position:fixed;right:max(12px,env(safe-area-inset-right));top:calc(max(12px,env(safe-area-inset-top)) + 46px);z-index:8;color:#fff3cb;background:#060719b3}.room-nudge{position:fixed;right:max(12px,env(safe-area-inset-right));top:calc(max(12px,env(safe-area-inset-top)) + 92px);z-index:8;max-width:min(230px,calc(100vw - 24px));display:grid;gap:2px;padding:10px 13px;color:#d6c9ff;text-align:right;background:#06071994;border:1px solid rgba(255,243,203,.16);border-radius:18px;box-shadow:0 12px 32px #0000003d;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);pointer-events:none}.room-nudge b{color:#8cf39b;font-size:.85rem}.room-nudge span{font-size:.74rem;line-height:1.25}.emotes{position:fixed;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));z-index:7;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.emotes button{min-width:0;padding:11px 8px;color:#fff3cb;background:#fff3cb1f;border:1px solid rgba(255,243,203,.16);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-size:.82rem}.launcher-app,.xo-app{overflow:auto;touch-action:manipulation;background:#eb9a7f;transition:background .36s ease,color .36s ease}.xo-app{place-items:start center}.xo-app.turn-x{background:#eb9a7f;--xo-bg: #eb9a7f}.xo-app.turn-o{background:#80c9f2;--xo-bg: #80c9f2}.xo-app.turn-draw{background:#c7b6ff;--xo-bg: #c7b6ff}.launcher{width:min(720px,calc(100vw - 28px));display:grid;gap:18px;padding:22px;text-align:center}.launcher-kicker,.xo-header p{margin:0;color:#8cf39b;font-size:.76rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.launcher h1{margin:0;color:#ffe36e;font-size:clamp(2.5rem,11vw,5.5rem);line-height:.9}.game-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.game-card{min-height:210px;display:grid;align-content:center;justify-items:center;gap:10px;padding:22px;color:#fff3cb;background:radial-gradient(circle at 50% 24%,color-mix(in srgb,var(--accent) 32%,transparent),transparent 34%),#07091fd1;border:1px solid color-mix(in srgb,var(--accent) 55%,rgba(255,243,203,.14));border-radius:28px;box-shadow:0 24px 70px #00000047;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.game-card-preview{position:relative;width:92px;height:78px;display:grid;place-items:center;background:radial-gradient(circle at 24% 28%,rgba(255,255,255,.9) 0 2px,transparent 3px),radial-gradient(circle at 78% 18%,rgba(255,255,255,.6) 0 2px,transparent 3px),color-mix(in srgb,var(--accent) 18%,rgba(6,7,25,.9));border:2px solid color-mix(in srgb,var(--accent) 72%,#fff3cb);border-radius:18px;box-shadow:inset 0 -10px #00000024,0 10px #0000001f;overflow:hidden}.game-card-preview.star span:first-child{width:28px;height:36px;background:linear-gradient(90deg,#fff3cb 0,#fff3cb 30%,#74d9ff 31%,#74d9ff 69%,#fff3cb 70%);clip-path:polygon(50% 0,82% 64%,66% 100%,50% 84%,34% 100%,18% 64%)}.game-card-preview.star span:nth-child(2),.game-card-preview.star span:nth-child(3){position:absolute;top:12px;width:6px;height:24px;background:#8cf39b;border-radius:999px;box-shadow:0 0 10px #8cf39b8c}.game-card-preview.star span:nth-child(2){left:20px}.game-card-preview.star span:nth-child(3){right:20px}.game-card-preview.xo{grid-template-columns:repeat(3,1fr);gap:0;background:linear-gradient(90deg,transparent 31%,#050505 32% 36%,transparent 37% 64%,#050505 65% 69%,transparent 70%),linear-gradient(0deg,transparent 31%,#050505 32% 36%,transparent 37% 64%,#050505 65% 69%,transparent 70%),color-mix(in srgb,var(--accent) 18%,rgba(255,243,203,.08))}.game-card-preview.xo span{width:20px;height:20px}.game-card-preview.xo span:first-child,.game-card-preview.xo span:nth-child(3){background:linear-gradient(45deg,transparent 34%,#050505 35% 46%,#ff7478 47% 56%,#050505 57% 68%,transparent 69%),linear-gradient(-45deg,transparent 34%,#050505 35% 46%,#ff7478 47% 56%,#050505 57% 68%,transparent 69%)}.game-card-preview.xo span:nth-child(2){border-radius:50%;background:radial-gradient(circle,transparent 0 28%,#050505 29% 39%,#5ac6ff 40% 60%,#050505 61% 74%,transparent 75%)}.game-card strong{font-size:1.6rem}.game-card small{max-width:190px;color:#d6c9ff;line-height:1.35}.xo-shell{position:relative;z-index:2;width:min(560px,calc(100vw - 28px));max-width:calc(100vw - 28px);display:grid;min-height:min(900px,100vh);gap:clamp(10px,2vh,22px);align-content:start;padding:max(18px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom));color:#1b1218;background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible}.xo-topline,.xo-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}.xo-topline{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center}.xo-topline>span{min-height:34px;display:inline-flex;align-items:center;justify-content:center;min-width:0;padding:0 12px;background:#fff3cb1a;border:1px solid rgba(255,243,203,.14);border-radius:999px;font-weight:900;white-space:nowrap}.xo-topline .ghost-button,.xo-topline>span{height:64px;min-width:64px;color:#fff;background:#2d202bd1;border:0;box-shadow:0 8px #2d202b1f}.xo-topline .ghost-button{border-radius:999px}.xo-scoreboard{justify-self:center;width:min(340px,100%);min-height:78px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding:9px 20px;color:#fff6ed;background:linear-gradient(#ffffff08,#0000000f),#412a31e6;border-radius:12px;box-shadow:0 8px #412a3124}.xo-scoreboard span{display:grid;justify-items:center;gap:2px;min-width:0;border-radius:10px;transition:transform .18s ease,background .18s ease}.xo-scoreboard b{color:#ff6f71;font-size:1rem;font-weight:1000}.xo-scoreboard span:last-child b{color:#5ac6ff}.xo-app.turn-x .xo-scoreboard span:first-child,.xo-app.turn-o .xo-scoreboard span:last-child{background:#ffffff1a;transform:translateY(-2px)}.xo-scoreboard strong{font-size:1.28rem;text-transform:uppercase}.xo-scoreboard em{color:#fff;font-size:1.85rem;font-style:normal;font-weight:1000}.xo-header{display:grid;gap:6px;text-align:center;margin-top:clamp(0px,1vh,10px)}.xo-header h1{margin:0;color:#1b1218;font-size:clamp(2.8rem,14vw,5.2rem);line-height:.8;display:none}.xo-header span{color:#1b1218b8;font-weight:900}.xo-notice{min-height:22px;color:#1b1218c7;font-style:normal;font-size:.9rem;font-weight:1000;animation:notice-bump .42s ease both}.xo-start{display:grid}.xo-board{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;min-width:0;width:min(460px,92vw);justify-self:center;margin-top:clamp(20px,9vh,90px);--grid-line: 13px;background:linear-gradient(90deg,transparent calc(33.333% - var(--grid-line) / 2),#050505 calc(33.333% - var(--grid-line) / 2) calc(33.333% + var(--grid-line) / 2),transparent calc(33.333% + var(--grid-line) / 2) calc(66.666% - var(--grid-line) / 2),#050505 calc(66.666% - var(--grid-line) / 2) calc(66.666% + var(--grid-line) / 2),transparent calc(66.666% + var(--grid-line) / 2)),linear-gradient(0deg,transparent calc(33.333% - var(--grid-line) / 2),#050505 calc(33.333% - var(--grid-line) / 2) calc(33.333% + var(--grid-line) / 2),transparent calc(33.333% + var(--grid-line) / 2) calc(66.666% - var(--grid-line) / 2),#050505 calc(66.666% - var(--grid-line) / 2) calc(66.666% + var(--grid-line) / 2),transparent calc(66.666% + var(--grid-line) / 2))}.xo-board.has-win{--win-x: 50%;--win-y: 50%;--win-width: 96%;--win-rotate: 0deg}.xo-win-line{position:absolute;left:var(--win-x);top:var(--win-y);z-index:5;width:var(--win-width);height:16px;background:#fff6ef;border-radius:999px;box-shadow:0 4px #0000001f;transform:translate(-50%,-50%) rotate(var(--win-rotate));pointer-events:none}.xo-board.win-row-1{--win-y: 16.666%}.xo-board.win-row-2{--win-y: 50%}.xo-board.win-row-3{--win-y: 83.333%}.xo-board.win-col-1{--win-x: 16.666%;--win-rotate: 90deg}.xo-board.win-col-2{--win-x: 50%;--win-rotate: 90deg}.xo-board.win-col-3{--win-x: 83.333%;--win-rotate: 90deg}.xo-board.win-diag-main{--win-width: 132%;--win-rotate: 45deg}.xo-board.win-diag-alt{--win-width: 132%;--win-rotate: -45deg}.xo-cell{position:relative;z-index:2;width:100%;min-width:0;aspect-ratio:1;padding:0;background:transparent;border:0;border-radius:0;display:grid;place-items:center;overflow:visible}.xo-cell.filled,.xo-cell.won{background:transparent}.xo-cell:disabled{opacity:1}.xo-cell:active{transform:none}.xo-mark{position:relative;width:56%;aspect-ratio:1;display:block;animation:mark-pop .26s cubic-bezier(.22,1.4,.36,1) both}.xo-mark-x:before,.xo-mark-x:after{content:"";position:absolute;left:50%;top:50%;width:100%;height:22%;background:#ff6f71;border:7px solid #050505;border-radius:8px;transform-origin:center}.xo-mark-x:before{transform:translate(-50%,-50%) rotate(45deg)}.xo-mark-x:after{transform:translate(-50%,-50%) rotate(-45deg)}.xo-mark-o{background:radial-gradient(circle,var(--xo-bg, #eb9a7f) 0 28%,#050505 29% 39%,#5ac6ff 40% 60%,#050505 61% 74%,transparent 75%);border:0;border-radius:50%}.xo-mark-o:before{content:none}.xo-actions button{flex:1;min-width:0;color:#fff;background:#412a31b8;border:0}.xo-rounds{min-height:26px;display:flex;justify-content:center;gap:7px}.xo-rounds span{width:24px;height:24px;display:grid;place-items:center;color:#fff6ef;background:#412a318c;border-radius:999px;font-size:.72rem;font-weight:1000}.xo-rounds .round-x{color:#050505;background:#ff6f71}.xo-rounds .round-o{color:#050505;background:#5ac6ff}.xo-rounds .round-draw{color:#050505;background:#ffe36e}.xo-rounds .round-empty{width:auto;padding:0 10px}.xo-board.has-win .xo-cell.won .xo-mark{animation:winner-pulse .76s ease both}.xo-win-line{animation:win-sweep .36s ease both;transform-origin:center center}.xo-turn-orb{width:min(500px,92vw);aspect-ratio:4.2;justify-self:center;display:grid;place-items:center;margin-top:auto;color:#ffffffc7;background:radial-gradient(circle at 50% 50%,#ffffff1f,#ffffff0a);border:8px solid rgba(255,255,255,.72);border-radius:999px 999px 0 0;border-bottom:0;font-size:clamp(1.35rem,7vw,3rem);font-weight:1000}@keyframes mark-pop{0%{opacity:0;transform:scale(.45) rotate(-8deg)}68%{opacity:1;transform:scale(1.12) rotate(2deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes winner-pulse{0%,to{transform:scale(1)}45%{transform:scale(1.18)}}@keyframes win-sweep{0%{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}@keyframes notice-bump{0%{opacity:0;transform:translateY(-5px)}35%{opacity:1;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}@media(min-width:760px){.stage canvas{width:min(100vw,54.17vh)!important;height:min(100vh,184.62vw)!important}.emotes{left:50%;right:auto;width:390px;transform:translate(-50%)}}@media(max-width:620px){.game-grid{grid-template-columns:1fr}.game-card{min-height:168px}.xo-shell{padding-inline:14px}.xo-topline{grid-template-columns:64px minmax(0,1fr) 64px;gap:8px}.xo-scoreboard{min-height:70px;gap:8px;padding-inline:10px}.xo-scoreboard em{font-size:1.5rem}.xo-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.xo-board{--grid-line: 9px;width:min(390px,84vw,52vh);margin-top:0}}