:root{--bg: #313338;--bg-2: #2b2d31;--bg-3: #1e1f22;--card: #2b2d31;--border: #3f4147;--text: #f2f3f5;--text-muted: #b5bac1;--text-dim: #949ba4;--blurple: #5865f2;--blurple-hover: #4752c4;--green: #23a55a;--yellow: #f0b232;--red: #f23f43;--x-color: #5865f2;--o-color: #f0b232;--radius: 16px;font-family:gg sans,Segoe UI,system-ui,-apple-system,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:radial-gradient(1200px 800px at 50% -10%,#3a3d44 0%,var(--bg) 45%,var(--bg-3) 100%);color:var(--text);-webkit-font-smoothing:antialiased}.app{min-height:100%;display:flex;align-items:safe center;justify-content:center;padding:20px;overflow-y:auto}.card{width:100%;max-width:360px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:32px 28px;text-align:center;box-shadow:0 20px 60px #00000073;animation:rise .4s ease both}@keyframes rise{0%{opacity:0;transform:translateY(10px)}}.logo{display:grid;place-items:center;margin-bottom:18px}.logoGrid{display:grid;grid-template-columns:repeat(3,34px);grid-template-rows:repeat(3,34px);gap:4px;padding:8px;background:var(--bg-3);border-radius:14px;border:1px solid var(--border)}.logoGrid .mark{display:grid;place-items:center;font-weight:800;font-size:20px;border-radius:8px;background:var(--bg-2)}.markX{color:var(--x-color)}.markO{color:var(--o-color)}.title{margin:0;font-size:26px;letter-spacing:3px;font-weight:800}.subtitle{margin:4px 0 22px;color:var(--text-dim);font-size:13px;letter-spacing:1px;text-transform:uppercase}.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font-size:13px;font-weight:600;border:1px solid var(--border);background:var(--bg-3)}.pillDot{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px color-mix(in srgb,currentColor 22%,transparent)}.pill--ok{color:var(--green)}.pill--wait{color:var(--yellow)}.pill--dev{color:var(--blurple)}.pill--err{color:var(--red)}.pill--wait .pillDot{animation:blink 1s ease-in-out infinite}@keyframes blink{50%{opacity:.25}}.infoBox{margin-top:18px;padding:14px;background:var(--bg-3);border:1px solid var(--border);border-radius:12px;text-align:left;font-size:13px;display:flex;flex-direction:column;gap:8px}.infoRow{display:flex;justify-content:space-between;gap:12px}.infoLabel{color:var(--text-dim)}.infoValue{color:var(--text);font-variant-numeric:tabular-nums;font-family:ui-monospace,Cascadia Code,monospace;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}.infoBox.error{color:var(--text-muted)}.errCode{display:block;margin-top:6px;font-family:ui-monospace,monospace;font-size:11px;color:var(--red);word-break:break-word}.infoBox.dev{align-items:flex-start}.devTitle{color:var(--blurple);font-weight:700}.devText{color:var(--text-muted);line-height:1.5}.footer{margin:22px 0 0;color:var(--text-dim);font-size:11px;letter-spacing:.5px}.userCard{margin-top:18px;padding:14px;background:var(--bg-3);border:1px solid var(--border);border-radius:12px;display:flex;align-items:center;gap:12px;text-align:left}.avatarImg,.avatarFallback{width:44px;height:44px;border-radius:50%;flex-shrink:0}.avatarImg{object-fit:cover;border:2px solid var(--blurple)}.avatarFallback{display:grid;place-items:center;background:var(--blurple);color:#fff;font-weight:800;font-size:18px}.userMeta{display:flex;flex-direction:column;gap:6px;min-width:0}.userName{font-weight:700;font-size:15px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.badge{display:inline-flex;align-items:center;font-size:11px;font-weight:600;padding:3px 8px;border-radius:999px;width:fit-content}.badge--ok{color:var(--green);background:color-mix(in srgb,var(--green) 15%,transparent)}.badge--warn{color:var(--yellow);background:color-mix(in srgb,var(--yellow) 15%,transparent)}.badge--err{color:var(--red);background:color-mix(in srgb,var(--red) 15%,transparent)}.card--game{max-width:min(94vw,540px);padding:24px 24px 22px}.ttLogo{display:block;margin:0 auto 12px;filter:drop-shadow(0 8px 20px rgba(0,0,0,.35))}.gHeader{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:20px}.gTitle{font-size:22px;font-weight:800;letter-spacing:3px}.muted{color:var(--text-dim);font-size:13px;text-align:center;margin:8px 0}.errorMsg{color:var(--red);font-size:13px;text-align:center;margin:6px 0 0}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:10px;padding:12px 18px;font-size:15px;font-weight:600;font-family:inherit;cursor:pointer;background:var(--bg-3);color:var(--text);transition:background .15s,transform .05s,opacity .15s}.btn:hover:not(:disabled){background:#26272b}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--blurple)}.btn-primary:hover:not(:disabled){background:var(--blurple-hover)}.btn-ghost{background:transparent;color:var(--text-dim)}.btn-ghost:hover:not(:disabled){background:var(--bg-3);color:var(--text)}.menu{display:flex;flex-direction:column;gap:4px}.menu .btn-primary{width:100%}.confirmRow{display:flex;gap:8px;justify-content:center;margin-bottom:14px;flex-wrap:wrap}.miniBadge{font-size:11px;font-weight:600;color:var(--green);background:color-mix(in srgb,var(--green) 14%,transparent);padding:4px 10px;border-radius:999px}.divider{display:flex;align-items:center;gap:10px;color:var(--text-dim);font-size:12px;margin:10px 0}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--border)}.joinRow{display:flex;gap:8px}.codeInput{flex:1;min-width:0;background:var(--bg-3);border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:20px;font-weight:700;letter-spacing:6px;text-align:center;text-transform:uppercase;padding:10px 12px;font-family:ui-monospace,monospace}.codeInput:focus{outline:none;border-color:var(--blurple)}.codeInput::placeholder{color:var(--text-dim);letter-spacing:4px}.codeBox{display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--bg-3);border:1px solid var(--border);border-radius:14px;padding:20px;margin:14px 0}.codeLabel{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-dim)}.codeValue{font-size:44px;font-weight:800;letter-spacing:10px;color:var(--blurple);font-family:ui-monospace,monospace;padding-left:10px}.codeHint{font-size:12px;color:var(--text-dim);text-align:center}.spinner{width:26px;height:26px;border:3px solid var(--border);border-top-color:var(--blurple);border-radius:50%;margin:10px auto 16px;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.playersBar{display:flex;align-items:center;gap:10px;margin-bottom:14px}.playerTag{flex:1;display:flex;align-items:center;gap:10px;padding:10px;background:var(--bg-3);border:1px solid var(--border);border-radius:12px;min-width:0;transition:border-color .2s,box-shadow .2s}.playerTag--active{border-color:var(--blurple);box-shadow:0 0 0 1px var(--blurple),0 0 18px color-mix(in srgb,var(--blurple) 30%,transparent)}.gAvatar{width:38px;height:38px;border-radius:50%;flex-shrink:0;object-fit:cover}.gAvatarFb{display:grid;place-items:center;font-weight:800;color:#fff}.gAvatar--X{border:2px solid var(--x-color)}.gAvatarFb.gAvatar--X{background:var(--x-color)}.gAvatar--O{border:2px solid var(--o-color)}.gAvatarFb.gAvatar--O{background:var(--o-color)}.playerInfo{display:flex;flex-direction:column;min-width:0}.playerName{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.youTag{color:var(--text-dim);font-weight:400}.playerSeat{font-size:11px;font-weight:700}.seat--X{color:var(--x-color)}.seat--O{color:var(--o-color)}.vs{font-size:12px;font-weight:800;color:var(--text-dim);flex-shrink:0}.timer{position:relative;height:8px;background:var(--bg-3);border-radius:999px;overflow:hidden;margin-bottom:14px}.timerBar{height:100%;background:var(--blurple);border-radius:999px;transition:width .2s linear,background .3s}.timerBar--low{background:var(--red)}.timerText{position:absolute;right:8px;top:-20px;font-size:11px;font-weight:700;color:var(--text-dim);font-variant-numeric:tabular-nums}.board{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;aspect-ratio:1;width:min(100%,56vh);margin:6px auto 18px}.cell{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--border);background:var(--bg-3);border-radius:12px;font-size:clamp(44px,9vh,68px);font-weight:800;color:var(--text);cursor:default;display:grid;place-items:center;transition:background .12s,transform .06s,box-shadow .2s;font-family:inherit;-webkit-user-select:none;user-select:none}.cell--X{color:var(--x-color)}.cell--O{color:var(--o-color)}.cell--clickable{cursor:pointer}.cell--clickable:hover{background:#26272b}.cell--clickable:active{transform:scale(.96)}.cell--win{background:color-mix(in srgb,var(--green) 22%,var(--bg-3));border-color:var(--green);box-shadow:0 0 16px color-mix(in srgb,var(--green) 40%,transparent)}.board--over .cell:not(.cell--win){opacity:.65}.statusLine{text-align:center;font-size:15px;font-weight:600;margin:0 0 14px;min-height:20px}.statusLine--win{color:var(--green)}.statusLine--lose{color:var(--red)}.actions{display:flex;flex-direction:column;gap:8px}