:root{--bg-dark: #0d1117;--bg-card: #161b22;--bg-hover: #1c2333;--green: #2ea043;--green-light: #3fb950;--red: #da3633;--orange: #d29922;--text-primary: #f0f6fc;--text-secondary: #8b949e;--border: #30363d;--radius: 12px;--shadow: 0 8px 24px rgba(0, 0, 0, .4)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;background:var(--bg-dark);color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,sans-serif}.app{min-height:100vh;display:flex;align-items:center;justify-content:center}.screen{width:100%;max-width:480px;padding:2rem;text-align:center}.logo-text{font-size:2.5rem;background:linear-gradient(135deg,var(--green-light),#58a6ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:.25rem}.logo-sub{color:var(--text-secondary);font-size:1.1rem;margin-bottom:2rem}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin-bottom:1.5rem}.tabs{display:flex;border-bottom:1px solid var(--border)}.tab{flex:1;padding:.875rem;background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:1rem;font-weight:600;transition:all .2s}.tab:hover{color:var(--text-primary);background:var(--bg-hover)}.tab.active{color:var(--green-light);border-bottom:3px solid var(--green-light);background:var(--bg-hover)}form{padding:1.5rem;display:flex;flex-direction:column;gap:1rem}form label{text-align:left;font-size:.875rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}form input{padding:.75rem 1rem;background:var(--bg-dark);border:1px solid var(--border);border-radius:8px;color:var(--text-primary);font-size:1rem;outline:none;transition:border-color .2s}form input:focus{border-color:var(--green-light)}.btn-primary{padding:.875rem 2rem;background:var(--green);color:#fff;border:none;border-radius:8px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-primary:hover{background:var(--green-light);transform:translateY(-1px)}.btn-primary:active{transform:translateY(0)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.error{color:var(--red);font-size:.875rem}.hint{color:var(--text-secondary);font-size:.875rem}.buzzer-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}.buzzer-header h2{font-size:1.5rem;background:linear-gradient(135deg,var(--green-light),#58a6ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.room-pin{color:var(--text-secondary);font-size:.875rem}.room-pin strong{color:var(--green-light);letter-spacing:.1em}.btn-leave{padding:.4rem .8rem;background:transparent;border:1px solid var(--border);border-radius:6px;color:var(--text-secondary);cursor:pointer;font-size:.8rem;transition:all .2s}.btn-leave:hover{border-color:var(--red);color:var(--red)}.waiting-panel h3{color:var(--text-secondary);font-size:1.1rem;margin-bottom:.75rem}.pin-display{font-size:2.5rem;font-weight:800;letter-spacing:.3em;color:var(--green-light);background:#2ea0431a;border:2px dashed var(--green);border-radius:12px;padding:.5rem 1rem;display:inline-block;margin-bottom:1.5rem}.player-slots{display:flex;flex-direction:column;gap:.5rem;align-items:center;margin-bottom:1rem}.slot{padding:.625rem 1.5rem;border-radius:8px;font-weight:600;font-size:1rem;width:80%}.slot.occupied{background:#2ea04333;color:var(--green-light);border:1px solid var(--green)}.slot.empty{border:2px dashed var(--border);color:var(--text-secondary);opacity:.5}.waiting-text{color:var(--text-secondary);font-size:.875rem}.buzzer-status{color:var(--orange);font-size:1.125rem;font-weight:600;margin-bottom:1rem}.buzzer-btn{width:200px;height:200px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#ff6b35,#e84118);border:6px solid #c23616;color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 0 40px #e8411866,inset 0 -4px 12px #0000004d;transition:all .1s;margin:2rem auto}.buzzer-btn:hover{transform:scale(1.05);box-shadow:0 0 60px #e8411899,inset 0 -4px 12px #0000004d}.buzzer-btn:active{transform:scale(.95);box-shadow:0 0 30px #e841184d,inset 0 4px 12px #0006}.buzzer-icon{font-size:3rem}.buzzer-text{font-size:1.75rem;font-weight:800;letter-spacing:.1em;text-shadow:0 2px 4px rgba(0,0,0,.3)}.result{animation:fadeUp .5s ease-out}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.trophy{font-size:4rem;margin-bottom:.5rem}.result h2{font-size:2rem;color:var(--green-light)}.result>p{color:var(--text-secondary);margin-bottom:1.5rem}.result-my-won .win-text,.result-my-lost .win-text{display:block;font-size:1.25rem;color:var(--orange);margin-top:.75rem}.player-names{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;margin:1.5rem 0}.player-chip{padding:.5rem 1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:999px;font-weight:600}.player-chip.winner{background:#2ea0434d;color:var(--green-light);border-color:var(--green-light)}.flash .screen-buzzer{animation:flashBg .5s ease-out}@keyframes flashBg{0%{background:#e841181a}to{background:transparent}}@media (max-width: 500px){.logo-text{font-size:1.75rem}.pin-display{font-size:2rem;letter-spacing:.2em}.buzzer-btn{width:160px;height:160px}.buzzer-icon{font-size:2.5rem}.buzzer-text,.result h2{font-size:1.5rem}}