:root{--bg: #000000;--bg-card: #0a0a0a;--bg-hover: #141414;--border: #222222;--text: #ffffff;--text-muted: #666666;--accent: #ffffff;--success: #00ff00;--warning: #ffff00;--error: #ff0000}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:SF Mono,Monaco,Inconsolata,Roboto Mono,monospace;background:var(--bg);color:var(--text);line-height:1.5;min-height:100vh;font-size:14px}.app{max-width:900px;margin:0 auto;padding:24px;min-height:100vh}.header{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid var(--border);margin-bottom:32px}.header h1{font-size:16px;font-weight:400;letter-spacing:2px;text-transform:uppercase}.connection-status{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}.status-dot{width:6px;height:6px;border-radius:50%}.status-dot.connected{background:var(--success)}.status-dot.disconnected{background:var(--error)}.main{display:flex;flex-direction:column;gap:32px}section{border:1px solid var(--border);padding:24px}section h2{font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:2px;color:var(--text-muted);margin-bottom:20px}.playing-section{border-color:var(--text)}.playing-section h2{color:var(--text)}.signup-tabs{display:flex;gap:0;margin-bottom:20px;border:1px solid var(--border)}.tab{flex:1;padding:12px;border:none;background:transparent;color:var(--text-muted);font-size:12px;text-transform:uppercase;letter-spacing:1px;cursor:pointer;transition:all .15s;font-family:inherit}.tab:first-child{border-right:1px solid var(--border)}.tab:hover{background:var(--bg-hover);color:var(--text)}.tab.active{background:var(--text);color:var(--bg)}.signup-form{margin-bottom:16px}.input-group{display:flex;gap:0;border:1px solid var(--border)}.input-group input{flex:1;padding:14px 16px;border:none;background:transparent;color:var(--text);font-size:14px;font-family:inherit}.input-group input:focus{outline:none;background:var(--bg-hover)}.input-group input::placeholder{color:var(--text-muted)}.input-group button{padding:14px 24px;background:var(--text);color:var(--bg);border:none;font-size:12px;text-transform:uppercase;letter-spacing:1px;cursor:pointer;font-family:inherit;transition:opacity .15s}.input-group button:hover:not(:disabled){opacity:.8}.input-group button:disabled{opacity:.3;cursor:not-allowed}.slots-info{text-align:center;color:var(--text-muted);font-size:12px;text-transform:uppercase;letter-spacing:1px}.message{padding:12px 16px;margin-top:12px;font-size:12px;border:1px solid}.message.success{border-color:var(--success);color:var(--success)}.message.warning{border-color:var(--warning);color:var(--warning)}.message.error{border-color:var(--error);color:var(--error)}.message.info{border-color:var(--text-muted);color:var(--text-muted)}.group-signup{text-align:center}.group-info-text{color:var(--text-muted);margin-bottom:20px;font-size:12px}.group-options{display:flex;flex-direction:column;gap:16px;align-items:center}.group-btn{width:100%;max-width:280px;padding:14px 24px;font-size:12px;text-transform:uppercase;letter-spacing:1px;border:1px solid var(--border);cursor:pointer;transition:all .15s;font-family:inherit}.group-btn.create{background:var(--text);color:var(--bg);border-color:var(--text)}.group-btn.create:hover{opacity:.8}.divider{color:var(--text-muted);font-size:11px;text-transform:uppercase;letter-spacing:2px}.join-existing{display:flex;gap:0;width:100%;max-width:280px;border:1px solid var(--border)}.join-existing input{flex:1;padding:12px 16px;border:none;background:transparent;color:var(--text);font-size:14px;text-transform:uppercase;letter-spacing:4px;text-align:center;font-family:inherit}.join-existing input:focus{outline:none;background:var(--bg-hover)}.join-existing button{padding:12px 16px;background:transparent;color:var(--text);border:none;border-left:1px solid var(--border);font-size:11px;text-transform:uppercase;letter-spacing:1px;cursor:pointer;font-family:inherit}.join-existing button:hover:not(:disabled){background:var(--bg-hover)}.group-code-display{margin-bottom:24px}.group-code-display p{color:var(--text-muted);margin-bottom:8px;font-size:11px;text-transform:uppercase;letter-spacing:1px}.group-code-display .code{font-size:32px;font-weight:400;letter-spacing:8px;color:var(--text);padding:16px 0;display:inline-block}.group-code-display .hint{font-size:11px;color:var(--text-muted)}.group-status{margin:20px 0;padding:16px;border:1px solid var(--border)}.group-status p{margin-bottom:12px;font-size:12px;color:var(--text-muted)}.player-tag{display:inline-block;padding:4px 8px;border:1px solid var(--border);font-size:11px;margin:2px}.back-btn{margin-top:16px;padding:10px 20px;background:transparent;color:var(--text-muted);border:1px solid var(--border);font-size:11px;text-transform:uppercase;letter-spacing:1px;cursor:pointer;font-family:inherit}.back-btn:hover{color:var(--text);border-color:var(--text)}.teams-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border);border:1px solid var(--border)}.team-card{background:var(--bg);padding:20px}.team-card.on-field{background:var(--bg-card)}.team-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.team-header h3{font-size:14px;font-weight:400;display:flex;align-items:center;gap:8px}.queue-position{font-size:11px;color:var(--text-muted)}.player-count{font-size:12px;color:var(--text-muted)}.playing-badge{display:none}.progress-bar{height:1px;background:var(--border);margin-bottom:16px}.progress-fill{height:100%;background:var(--text);transition:width .3s}.player-list{list-style:none}.player-item{display:flex;align-items:center;gap:12px;padding:6px 0;font-size:13px}.player-item.empty{color:var(--text-muted)}.player-number{width:20px;font-size:11px;color:var(--text-muted)}.player-name{flex:1}.team-status{margin-top:16px;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted)}.team-status.playing{color:var(--text)}.team-status.ready{color:var(--success)}.team-status.forming{color:var(--warning)}.waitlist{text-align:left}.waitlist-info{color:var(--text-muted);margin-bottom:16px;font-size:12px}.waitlist-list{list-style:none;display:flex;flex-wrap:wrap;gap:8px}.waitlist-item{padding:8px 12px;border:1px solid var(--border);font-size:12px}.waitlist-item .position{color:var(--text-muted);margin-right:4px}.empty-state{text-align:center;padding:48px 24px}.empty-state h3{font-size:14px;font-weight:400;margin-bottom:8px;color:var(--text-muted)}.empty-state p{font-size:12px;color:var(--text-muted)}.footer{margin-top:32px;padding:16px 0;border-top:1px solid var(--border)}.admin-toggle{padding:10px 20px;background:transparent;color:var(--text-muted);border:1px solid var(--border);font-size:11px;text-transform:uppercase;letter-spacing:1px;cursor:pointer;font-family:inherit}.admin-toggle:hover{color:var(--text);border-color:var(--text)}.admin-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:1000;padding:24px}.admin-panel{background:var(--bg);border:1px solid var(--border);padding:24px;max-width:500px;width:100%;max-height:90vh;overflow-y:auto}.admin-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--border)}.admin-header h2{font-size:14px;font-weight:400;text-transform:uppercase;letter-spacing:2px;margin:0;color:var(--text)}.close-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border);color:var(--text);font-size:18px;cursor:pointer;font-family:inherit}.close-btn:hover{background:var(--text);color:var(--bg)}.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);margin-bottom:24px}.stat{text-align:center;padding:16px 8px;background:var(--bg)}.stat-value{display:block;font-size:24px;margin-bottom:4px}.stat-label{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}.match-controls{border:1px solid var(--border);padding:20px;margin-bottom:20px}.match-controls h3{font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:2px;color:var(--text-muted);margin-bottom:12px}.match-info{font-size:16px;margin-bottom:16px;text-align:center}.result-buttons{display:flex;gap:1px;background:var(--border);border:1px solid var(--border)}.winner-btn,.draw-btn{flex:1;padding:14px 16px;background:var(--bg);color:var(--text);border:none;font-size:11px;text-transform:uppercase;letter-spacing:1px;cursor:pointer;font-family:inherit;transition:all .15s}.winner-btn:hover:not(:disabled),.draw-btn:hover:not(:disabled){background:var(--text);color:var(--bg)}.winner-btn:disabled,.draw-btn:disabled{opacity:.3;cursor:not-allowed}.draw-btn{background:var(--bg-card)}.match-controls .hint{font-size:10px;color:var(--text-muted);margin-top:12px;text-align:center}.match-controls.inactive{opacity:.5}.waiting-text{color:var(--text-muted);font-size:12px;text-align:center}.admin-actions{margin-bottom:24px}.reset-btn{width:100%;padding:14px;background:transparent;color:var(--error);border:1px solid var(--error);font-size:11px;text-transform:uppercase;letter-spacing:1px;cursor:pointer;font-family:inherit}.reset-btn:hover:not(:disabled){background:var(--error);color:var(--bg)}.admin-teams h3{font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:2px;color:var(--text-muted);margin-bottom:12px}.team-group{margin-bottom:16px}.team-group h4{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}.admin-team{border:1px solid var(--border);margin-bottom:4px}.team-row-header{display:flex;align-items:center;padding:10px 12px;cursor:pointer}.team-row-header:hover{background:var(--bg-hover)}.team-name{flex:1;font-size:13px}.queue-num{color:var(--text-muted);margin-right:8px;font-size:11px}.team-count{margin-right:12px;color:var(--text-muted);font-size:11px}.remove-team-btn{padding:4px 8px;background:transparent;color:var(--text-muted);border:1px solid var(--border);font-size:10px;text-transform:uppercase;letter-spacing:1px;cursor:pointer;margin-right:8px;font-family:inherit}.remove-team-btn:hover:not(:disabled){color:var(--error);border-color:var(--error)}.expand-icon{color:var(--text-muted);font-size:10px}.team-players{list-style:none;padding:0 12px 12px;border-top:1px solid var(--border)}.team-players li{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:12px}.team-players .no-players{color:var(--text-muted);justify-content:center}.remove-btn{padding:2px 6px;background:transparent;color:var(--text-muted);border:1px solid var(--border);font-size:10px;cursor:pointer;font-family:inherit}.remove-btn:hover:not(:disabled){color:var(--error);border-color:var(--error)}.no-teams{color:var(--text-muted);font-size:12px;text-align:center;padding:20px}.admin-waitlist{margin-top:24px;padding-top:16px;border-top:1px solid var(--border)}.admin-waitlist h3{font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:2px;color:var(--text-muted);margin-bottom:12px}.admin-waitlist ul{list-style:none}.admin-waitlist li{padding:6px 0;font-size:12px;color:var(--text-muted)}@media(max-width:640px){.header{flex-direction:column;gap:12px;text-align:center}.input-group{flex-direction:column;border:none}.input-group input{border:1px solid var(--border)}.input-group button{border:1px solid var(--text)}.signup-tabs{flex-direction:column;border:none;gap:4px}.tab{border:1px solid var(--border)}.tab:first-child{border-right:1px solid var(--border)}.admin-stats{grid-template-columns:repeat(2,1fr)}.teams-grid{grid-template-columns:1fr}.result-buttons{flex-direction:column}}.teams-loading{text-align:center;padding:48px;color:var(--text-muted);font-size:12px;text-transform:uppercase;letter-spacing:1px}