: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}.screen-wide{max-width:1180px}.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}.auth-actions{display:flex;justify-content:center;gap:.5rem;margin-bottom:1rem}.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)}form input[type=checkbox]{width:20px;height:20px;padding:0;align-self:flex-start}.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)}.game-layout{display:block}.game-main{min-width:0}.leader-layout{display:grid;grid-template-columns:minmax(420px,1fr) minmax(320px,420px);gap:1.25rem;align-items:start;text-align:left}.leader-panel{min-width:0}.player-score-list{display:flex;flex-direction:column;gap:.75rem;margin-top:.75rem}.player-score-row{background:var(--bg-hover);border:1px solid var(--border);border-radius:8px;padding:.6rem .75rem}.player-score-row-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap;margin-bottom:.5rem}.player-score-name{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.player-score-value{color:var(--green-light);font-weight:600;cursor:pointer;white-space:nowrap}.player-score-value:hover{text-decoration:underline}.player-score-edit{display:flex;align-items:center;gap:.35rem}.player-score-edit input{padding:.25rem .4rem}.player-score-controls{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}.player-score-controls button{padding:.35rem .6rem;font-size:.85rem}.player-score-controls input{padding:.35rem .4rem}.dashboard-item{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem 0;border-top:1px solid var(--border)}.notice-stack{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.notice-item{border:1px solid var(--border);border-left:4px solid #58a6ff;border-radius:8px;padding:.6rem .8rem;background:var(--bg-card);color:var(--text-primary);text-align:left;font-size:.9rem}.notice-item.warning{border-left-color:var(--orange)}.notice-item.error{border-left-color:var(--red)}.flash .screen-buzzer{animation:flashBg .5s ease-out}@keyframes flashBg{0%{background:#e841181a}to{background:transparent}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease-out}.modal-content{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;max-width:500px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:var(--shadow);animation:slideUp .3s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes popIn{0%{transform:scale(0) rotate(-45deg);opacity:0}50%{transform:scale(1.1)}to{transform:scale(1) rotate(0);opacity:1}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.avatar-display{animation:popIn .6s cubic-bezier(.34,1.56,.64,1)}.avatar-display.bounce{animation:bounce 1.5s ease-in-out infinite}.avatar-image{max-width:250px;max-height:250px;border-radius:12px;border:3px solid var(--green-light);object-fit:cover;filter:drop-shadow(0 0 20px rgba(47,208,131,.5))}@media (max-width: 960px){.leader-layout{grid-template-columns:1fr}}.avatar-popup-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:2000;pointer-events:none;animation:avatarOverlayFade 2.5s ease-in-out forwards}@keyframes avatarOverlayFade{0%{opacity:0}12%{opacity:1}80%{opacity:1}to{opacity:0}}.avatar-popup-content{position:relative;width:320px;height:320px;display:flex;align-items:center;justify-content:center}.avatar-popup-card{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;animation:avatarPopupPop 2.5s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes avatarPopupPop{0%{transform:scale(0) rotate(-12deg);opacity:0}15%{transform:scale(1.15) rotate(4deg);opacity:1}25%{transform:scale(1) rotate(0);opacity:1}80%{transform:scale(1) rotate(0);opacity:1}to{transform:scale(.85) rotate(0);opacity:0}}.avatar-popup-image{width:220px;height:220px;border-radius:50%;border:6px solid var(--green-light);object-fit:cover;box-shadow:0 0 60px #2fd083b3,0 0 120px #58a6ff66}.avatar-popup-name{margin-top:1rem;font-size:1.75rem;font-weight:800;color:var(--text-primary);text-shadow:0 2px 12px rgba(0,0,0,.8)}.avatar-popup-sparkles{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.sparkle{position:absolute;font-size:2rem;animation:sparkleTwinkle 1.1s ease-in-out infinite;filter:drop-shadow(0 0 6px rgba(255,255,255,.8))}@keyframes sparkleTwinkle{0%,to{transform:scale(.5) rotate(0);opacity:.3}50%{transform:scale(1.3) rotate(25deg);opacity:1}}.sparkle-1{top:4%;left:22%;animation-delay:0s}.sparkle-2{top:10%;right:12%;animation-delay:.2s}.sparkle-3{bottom:14%;left:8%;animation-delay:.4s}.sparkle-4{bottom:6%;right:20%;animation-delay:.6s}.sparkle-5{top:48%;left:-2%;animation-delay:.3s}.sparkle-6{top:42%;right:-2%;animation-delay:.5s}@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}}