*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0f1117;--surface: #1a1d27;--border: #2a2d3a;--accent: #00c9a7;--accent2: #7c3aed;--text: #e8eaf0;--muted: #8b8fa8;--x-color: #f43f5e;--o-color: #00c9a7;--danger: #f43f5e;--radius: 12px;--shadow: 0 4px 24px rgba(0,0,0,.5)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);min-height:100dvh;display:flex;justify-content:center;align-items:flex-start;padding:1rem}#root{width:100%;max-width:480px;margin:0 auto}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;box-shadow:var(--shadow)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.5rem;border-radius:8px;border:none;font-size:1rem;font-weight:600;cursor:pointer;transition:opacity .15s,transform .1s;width:100%}.btn:hover{opacity:.88}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--accent);color:#000}.btn-purple{background:var(--accent2);color:#fff}.btn-outline{background:transparent;color:var(--text);border:1px solid var(--border)}.btn-danger{background:var(--danger);color:#fff}.input{width:100%;padding:.75rem 1rem;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:1rem;outline:none;transition:border-color .15s}.input:focus{border-color:var(--accent)}.logo{font-size:1.75rem;font-weight:900;letter-spacing:-.03em;color:var(--accent)}.screen-title{font-size:1.4rem;font-weight:700;margin-bottom:.25rem}.muted{color:var(--muted);font-size:.9rem}@keyframes spin{to{transform:rotate(360deg)}}.spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 1rem}.board{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:1.5rem 0}.cell{aspect-ratio:1;border-radius:10px;border:2px solid var(--border);background:var(--bg);font-size:2.5rem;font-weight:900;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s,transform .1s;-webkit-user-select:none;user-select:none}.cell:hover:not(.taken):not(.disabled){background:#00c9a714;border-color:var(--accent);transform:scale(1.04)}.cell.taken{cursor:default}.cell.disabled{cursor:not-allowed}.cell.X{color:var(--x-color)}.cell.O{color:var(--o-color)}.cell.winner-cell{background:#00c9a726;border-color:var(--accent)}.player-bar{display:flex;justify-content:space-between;gap:.5rem;margin-bottom:.5rem}.player-chip{flex:1;padding:.6rem .8rem;border-radius:8px;border:2px solid var(--border);background:var(--bg);text-align:center;transition:border-color .2s}.player-chip.active{border-color:var(--accent)}.player-chip .chip-mark{font-size:1.3rem;font-weight:900}.player-chip .chip-name{font-size:.8rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-chip.X .chip-mark{color:var(--x-color)}.player-chip.O .chip-mark{color:var(--o-color)}.timer{text-align:center;font-size:1.4rem;font-weight:700;color:var(--accent);margin-bottom:.5rem;transition:color .3s}.timer.urgent{color:var(--danger)}.status-banner{text-align:center;padding:.6rem 1rem;border-radius:8px;font-weight:600;margin-bottom:1rem;background:#00c9a71a;border:1px solid var(--accent)}.lb-table{width:100%;border-collapse:collapse;font-size:.9rem}.lb-table th{color:var(--muted);font-weight:600;text-align:left;padding:.5rem .4rem;border-bottom:1px solid var(--border)}.lb-table td{padding:.6rem .4rem;border-bottom:1px solid var(--border)}.lb-table tr:last-child td{border-bottom:none}.lb-table .rank{color:var(--muted);width:28px}.lb-table .me td{background:#00c9a712}.lb-gold{color:#fbbf24}.lb-silver{color:#94a3b8}.lb-bronze{color:#b45309}.match-list{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem}.match-item{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1rem;border-radius:8px;border:1px solid var(--border);background:var(--bg)}.mode-badge{font-size:.75rem;padding:.2rem .5rem;border-radius:99px;font-weight:600}.mode-badge.classic{background:#00c9a726;color:var(--accent)}.mode-badge.timed{background:#7c3aed26;color:var(--accent2)}.game-over-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:100;padding:1rem}.game-over-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;text-align:center;width:100%;max-width:360px;box-shadow:var(--shadow)}.game-over-mark{font-size:5rem;margin-bottom:.5rem}.game-over-title{font-size:1.8rem;font-weight:900;margin-bottom:.25rem}.game-over-sub{color:var(--muted);margin-bottom:1.5rem}