:root{--bg: #0b1220;--panel: #101a2e;--panel-hover: #16223a;--border: #1e2a44;--text: #e2e8f0;--text-dim: #8b9bb4;--x: #38bdf8;--o: #fbbf24;--accent: #6366f1;--success: #34d399;--danger: #f87171;--radius: 16px;--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:var(--font);color:var(--text);background:radial-gradient(1100px 550px at 50% -10%,#17223d 0%,var(--bg) 55%) fixed,var(--bg);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}button{font-family:inherit}.app{min-height:100%;max-width:480px;margin:0 auto;padding:24px 16px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:18px}.app__header{text-align:center}.app__title{margin:0;font-size:1.5rem;font-weight:800;letter-spacing:.1em;color:#fff}.app__main{width:100%;flex:1;display:flex;flex-direction:column}.app__footer{margin-top:auto;color:var(--text-dim);font-size:.75rem;text-align:center}.screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px 0}.screen__text{color:var(--text-dim);margin:0}.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:30px 26px;max-width:340px;width:100%}.card__title{font-size:1.2rem;font-weight:800;margin:0 0 8px;color:#fff}.card__sub{color:var(--text-dim);margin:0 0 22px;line-height:1.55}.spinner{width:38px;height:38px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--accent);animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.home__bestof{display:flex;align-items:center;gap:10px;color:var(--text-dim);font-size:.9rem}.home__select{border:1px solid var(--border);border-radius:999px;padding:8px 16px;font-size:1rem;font-weight:700;color:var(--text);background:var(--panel);cursor:pointer}.home__select:focus{border-color:var(--accent);outline:none}.home__select:disabled{opacity:.6;cursor:not-allowed}.home__buttons{display:flex;flex-direction:column;gap:12px;width:min(100%,260px)}.home__join{display:flex;gap:10px;width:min(100%,300px)}.home__input{flex:1;min-width:0;border:1px solid var(--border);border-radius:999px;padding:14px 20px;font-size:1.1rem;font-weight:700;letter-spacing:.2em;text-align:center;color:var(--text);background:var(--panel);outline:none;text-transform:uppercase}.home__input:focus{border-color:var(--accent)}.home__error{margin:0;color:var(--danger);font-size:.9rem}.game{display:flex;flex-direction:column;gap:16px}.game__code{align-self:center;color:var(--text-dim);font-size:.8rem;letter-spacing:.08em}.game__code .room-code{color:var(--text);font-weight:800;letter-spacing:.18em;background:#6366f129;padding:3px 8px;border-radius:8px}.game__bestof{margin-left:10px}.players{display:flex;align-items:stretch;gap:12px}.players__vs{align-self:center;color:var(--text-dim);font-weight:700;font-size:.85rem}.player-card{flex:1;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:12px 10px 10px;display:flex;flex-direction:column;gap:2px;text-align:center;transition:border-color .15s,box-shadow .15s}.player-card--turn{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.player-card__symbol{font-size:1.9rem;font-weight:800;line-height:1}.player-card--x .player-card__symbol{color:var(--x)}.player-card--o .player-card__symbol{color:var(--o)}.player-card__score{font-size:1.5rem;font-weight:700;color:#fff}.player-card__meta{font-size:.68rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em}.player-card__offline{color:var(--danger)}.status{min-height:1.4rem;margin:0;text-align:center;font-size:1rem;font-weight:600}.status--dim{color:var(--text-dim);font-weight:500}.board-wrap{position:relative;width:min(92vw,360px);aspect-ratio:1;margin:0 auto}.board{position:absolute;top:0;right:0;bottom:0;left:0;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:10px}.board__cell{min-width:0}.cell{width:100%;height:100%;border:1px solid var(--border);border-radius:14px;background:var(--panel);color:transparent;font-size:clamp(2.4rem,17vw,4rem);font-weight:800;display:grid;place-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .1s,transform .1s,border-color .1s}.cell:not(:disabled):hover{background:var(--panel-hover)}.cell:not(:disabled):active{transform:scale(.96)}.cell:disabled{cursor:default}.cell--x{color:var(--x)}.cell--o{color:var(--o)}.cell--win{border-color:currentColor;box-shadow:inset 0 0 0 1px currentColor,0 0 20px #6366f126}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;text-align:center;border-radius:20px;background:#0b1220d1;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.overlay--success .overlay__title{color:var(--success)}.overlay--info .overlay__title{color:#fff}.overlay__title{margin:0;font-size:1.3rem;font-weight:800}.overlay__sub{margin:0;color:var(--text-dim);font-size:.9rem;line-height:1.5}.overlay__score{margin:0;color:var(--text-dim);font-size:1.15rem;font-weight:700}.btn{border:0;border-radius:999px;padding:14px 30px;font-size:1rem;font-weight:700;color:#fff;background:var(--accent);cursor:pointer;text-decoration:none;transition:filter .15s,transform .1s}.btn--ghost{background:transparent;border:1px solid var(--border);color:var(--text)}.btn:disabled{opacity:.55;cursor:default}.card code{background:#6366f129;padding:2px 6px;border-radius:6px;font-size:.82em;word-break:break-word}.btn:hover{filter:brightness(1.12)}.btn:active{transform:scale(.97)}@media(max-width:360px){.player-card{padding:10px 6px}.player-card__symbol{font-size:1.6rem}.player-card__score{font-size:1.3rem}}@media(prefers-reduced-motion:reduce){.spinner{animation-duration:1.8s}}