:root{--bg: #0d0d1a;--bg-card: #161628;--bg-hover: #1e1e38;--orange: #ff6b35;--orange-dim: #d4561f;--text: #f0f0f0;--text-muted: #7a7a9a;--team-a: #4a9eff;--team-b: #ff4a6b;--border: #252545;--radius: 10px}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;min-height:100vh;display:flex;align-items:center;justify-content:center}#app{width:100%;max-width:860px;padding:1.5rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.75rem 1.5rem;border:2px solid transparent;border-radius:var(--radius);font-size:1rem;font-weight:700;cursor:pointer;transition:all .15s ease;white-space:nowrap}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important}.btn-primary{background:var(--orange);color:#fff;border-color:var(--orange);width:100%;font-size:1.05rem;padding:.9rem 1.5rem}.btn-primary:hover:not(:disabled){background:var(--orange-dim);border-color:var(--orange-dim);transform:translateY(-1px);box-shadow:0 4px 16px #ff6b3559}.btn-secondary{background:transparent;color:var(--text);border-color:var(--border)}.btn-secondary:hover:not(:disabled){border-color:var(--orange);color:var(--orange)}.landing{display:flex;flex-direction:column;align-items:center;gap:2.5rem;padding:3rem 0}.logo{text-align:center}.logo-icon{font-size:5rem;display:block;margin-bottom:.5rem;line-height:1}.logo h1{font-size:3.5rem;font-weight:900;color:var(--orange);letter-spacing:-2px;line-height:1}.logo p{color:var(--text-muted);margin-top:.5rem;font-size:1rem}.name-display{display:flex;align-items:center;gap:.6rem;background:var(--bg-card);border:1px solid var(--border);border-radius:999px;padding:.5rem 1rem .5rem 1.25rem}.name-label{color:var(--text-muted);font-size:.85rem}.player-name-badge{font-weight:700;color:var(--orange);font-size:1rem}.btn-reroll{background:none;border:none;cursor:pointer;font-size:1rem;line-height:1;padding:2px 4px;border-radius:6px;transition:background .15s}.btn-reroll:hover{background:var(--border)}.actions{display:flex;flex-direction:column;align-items:stretch;gap:1rem;width:100%;max-width:400px}.divider{display:flex;align-items:center;gap:.75rem;color:var(--text-muted);font-size:.85rem}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--border)}.join-form{display:flex;gap:.5rem}input[type=text]{flex:1;background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius);padding:.75rem 1rem;color:var(--text);font-size:1.1rem;font-family:inherit;font-weight:700;letter-spacing:6px;text-align:center;text-transform:uppercase;outline:none;transition:border-color .15s}input[type=text]::placeholder{letter-spacing:2px;font-weight:400;color:var(--text-muted);font-size:.85rem}input[type=text]:focus{border-color:var(--orange)}input[type=text].error{border-color:var(--team-b)}.join-error{color:var(--team-b);font-size:.85rem;text-align:center}.lobby{display:flex;flex-direction:column;gap:1.5rem;min-height:80vh;padding:.5rem 0}.lobby-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}.btn-back{background:transparent;border:1px solid var(--border);color:var(--text-muted);padding:.45rem .9rem;border-radius:8px;cursor:pointer;font-size:.85rem;font-family:inherit;transition:all .15s}.btn-back:hover{border-color:var(--text-muted);color:var(--text)}.room-code{display:flex;align-items:center;gap:.75rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:.45rem 1rem;font-size:.85rem;color:var(--text-muted)}.room-code strong{color:var(--orange);font-size:1.5rem;letter-spacing:5px;font-weight:900}.btn-copy{background:var(--border);border:none;color:var(--text-muted);border-radius:6px;padding:.25rem .65rem;cursor:pointer;font-size:.8rem;font-family:inherit;transition:all .15s}.btn-copy:hover{background:var(--orange);color:#fff}.teams{display:grid;grid-template-columns:1fr 1fr;gap:1rem;flex:1}.team{background:var(--bg-card);border-radius:12px;padding:1.25rem;border:2px solid transparent}.team-a{border-color:var(--team-a)}.team-a h2{color:var(--team-a)}.team-b{border-color:var(--team-b)}.team-b h2{color:var(--team-b)}.team h2{font-size:1rem;font-weight:800;margin-bottom:1rem;text-transform:uppercase;letter-spacing:1px}.player-list{display:flex;flex-direction:column;gap:.5rem}.player-slot{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.6rem .8rem;border-radius:8px;background:#ffffff08;border:1px solid transparent;min-height:2.5rem}.player-slot.empty{color:var(--text-muted);font-style:italic;border-color:var(--border);border-style:dashed;font-size:.85rem;justify-content:center}.player-slot.me{background:#ff6b351a;border-color:#ff6b3566}.player-slot-name{font-weight:600;font-size:.95rem}.badges{display:flex;gap:.35rem;flex-shrink:0}.badge{font-size:.6rem;font-weight:800;padding:2px 6px;border-radius:4px;letter-spacing:.5px;text-transform:uppercase}.badge-host{background:var(--orange);color:#fff}.badge-you{background:#ff6b3540;color:var(--orange)}.lobby-footer{display:flex;flex-direction:column;align-items:center;gap:1rem;padding-top:.5rem}.status-msg{color:var(--text-muted);font-size:.9rem}.placeholder{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center;padding:4rem 1rem}.placeholder h2{font-size:1.5rem}.placeholder p{color:var(--text-muted)}@media (max-width: 560px){.logo h1{font-size:2.5rem}.teams{grid-template-columns:1fr}.lobby-header{flex-direction:column;align-items:flex-start}.room-code strong{font-size:1.2rem;letter-spacing:3px}}.jersey-picker{display:flex;align-items:center;gap:.75rem;justify-content:center;flex-wrap:wrap}.jersey-swatches{display:flex;gap:8px}.jersey-swatch{width:28px;height:28px;border-radius:50%;border:3px solid transparent;cursor:pointer;transition:transform .12s,border-color .12s;outline:none}.jersey-swatch:hover{transform:scale(1.2)}.jersey-swatch.active{border-color:#fff;transform:scale(1.25)}.leaderboard-link{display:block;text-align:center;color:var(--text-muted);font-size:.9rem;text-decoration:none;margin-top:.5rem;transition:color .15s}.leaderboard-link:hover{color:var(--orange)}