:root{--bg-primary: #0f0f1a;--bg-secondary: #1a1a2e;--bg-tertiary: #252547;--accent-primary: #e94560;--accent-secondary: #4361ee;--accent-success: #2ecc71;--accent-warning: #f39c12;--text-primary: #ffffff;--text-secondary: #a0a0b0;--text-muted: #6c6c7c;--border-color: rgba(255, 255, 255, .1);--glass-bg: rgba(26, 26, 46, .8);--shadow-glow: 0 0 30px rgba(233, 69, 96, .3)}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{height:100%;display:flex;flex-direction:column}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes glow{0%,to{box-shadow:var(--shadow-glow)}50%{box-shadow:0 0 50px #e9456080}}.animate-fade-in{animation:fadeIn .3s ease-out}.animate-slide-up{animation:slideUp .4s ease-out}.animate-pulse{animation:pulse 2s ease-in-out infinite}.animate-glow{animation:glow 2s ease-in-out infinite}.glass{background:var(--glass-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--border-color);border-radius:16px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease;text-decoration:none}.btn-primary{background:linear-gradient(135deg,var(--accent-primary),#ff6b6b);color:#fff;box-shadow:0 4px 16px #e9456066}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 24px #e9456080}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{background:var(--bg-secondary);border-color:var(--accent-primary)}.btn-success{background:linear-gradient(135deg,var(--accent-success),#27ae60);color:#fff;box-shadow:0 4px 16px #2ecc7166}.btn-success:hover{transform:translateY(-2px);box-shadow:0 6px 24px #2ecc7180}.input{width:100%;padding:16px 20px;background:var(--bg-tertiary);border:2px solid var(--border-color);border-radius:12px;color:var(--text-primary);font-size:24px;font-weight:700;text-align:center;letter-spacing:8px;text-transform:uppercase;transition:border-color .2s ease}.input:focus{outline:none;border-color:var(--accent-primary)}.input::placeholder{color:var(--text-muted);letter-spacing:4px;font-weight:400}.status-indicator{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:20px;font-size:14px;font-weight:500}.status-connected{background:#2ecc7133;color:var(--accent-success)}.status-disconnected{background:#e9456033;color:var(--accent-primary)}.status-connecting{background:#f39c1233;color:var(--accent-warning)}.game-flow-badge{display:inline-block;padding:8px 16px;border-radius:8px;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:1px}.game-flow-none{background:var(--bg-tertiary);color:var(--text-muted)}.game-flow-lobby{background:#4361ee33;color:var(--accent-secondary)}.game-flow-matchmaking{background:#f39c1233;color:var(--accent-warning)}.game-flow-readycheck{background:#e945604d;color:var(--accent-primary)}.game-flow-champselect{background:#2ecc7133;color:var(--accent-success)}.game-flow-ingame{background:#9b59b633;color:#9b59b6}.card{padding:20px;border-radius:16px;background:var(--bg-secondary);border:1px solid var(--border-color)}.team-list{display:flex;flex-direction:column;gap:8px}.team-member{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;background:var(--bg-tertiary);transition:background .2s ease}.team-member.is-local{border:2px solid var(--accent-primary)}.champion-icon{width:48px;height:48px;border-radius:50%;background:var(--bg-primary);object-fit:cover}.champion-name{flex:1;font-weight:500}.position-badge{padding:4px 8px;border-radius:4px;font-size:12px;font-weight:600;background:var(--bg-primary);color:var(--text-secondary);text-transform:uppercase}.scroll-container{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}.scroll-container::-webkit-scrollbar{display:none}.scroll-container{-ms-overflow-style:none;scrollbar-width:none}