*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#111;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;color:#fff}#app{position:absolute;inset:0;z-index:0}.ui-screen{position:absolute;inset:0;z-index:10}.hidden{display:none!important}.pointer-events-none{pointer-events:none}.pointer-events-none>*{pointer-events:auto}#lobby{display:flex;justify-content:center;align-items:flex-start;gap:40px;padding-top:10vh;background:#111;overflow-y:auto;width:100%}.auth-card,.panel{width:320px;padding:30px;background:#222;border:1px solid #444;border-radius:16px;box-shadow:0 10px 30px #00000080;display:flex;flex-direction:column}.auth-header,.panel-header{font-size:20px;font-weight:600;margin-bottom:25px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #333;padding-bottom:15px}.panel-desc{font-size:14px;color:#aaa;margin-bottom:20px}.input-group{position:relative;width:100%;height:52px;margin-bottom:15px}.input-group input{width:100%;height:100%;padding:18px 12px 6px;background:#333;border:1px solid #555;border-radius:8px;color:#fff;font-size:15px;outline:none;transition:border-color .2s,background .2s}.input-group input:focus{border-color:#3b82f6;background:#2a2a2a}.input-group label{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:14px;color:#aaa;pointer-events:none;transition:.2s;line-height:1}.input-group input:focus~label,.input-group input:valid~label{top:8px;transform:none;font-size:10px;color:#3b82f6;font-weight:700;text-transform:uppercase}.btn-row{display:flex;gap:10px;margin-top:10px}.btn-auth{height:40px;border:none;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;transition:.2s;display:flex;align-items:center;justify-content:center}.btn-auth.full-width{width:100%;margin-top:10px}.btn-auth.primary{background:#3b82f6;color:#fff;flex:2}.btn-auth.primary:hover{background:#2563eb}.btn-auth.secondary{background:transparent;border:1px solid #555;color:#ccc;flex:1}.btn-auth.secondary:hover{border-color:#888;color:#fff}.file-upload-wrapper{margin-bottom:20px}.file-upload-wrapper input{width:100%}.control-group{background:#333;padding:15px;border-radius:8px;margin-bottom:20px;border:1px solid #444}.control-group label{display:flex;justify-content:space-between;margin-bottom:10px;font-size:14px;color:#ccc}input[type=range]{width:100%;cursor:pointer}.user-card{display:flex;align-items:center;gap:15px}.avatar-circle{width:50px;height:50px;background:#10b981;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px}.user-details{flex:1;display:flex;flex-direction:column}.welcome-text{font-size:12px;color:#888}.username-text{font-size:18px;font-weight:700}.btn-icon{background:none;border:none;font-size:24px;cursor:pointer;opacity:.6}.btn-icon:hover{opacity:1}.top-bar{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;background:#222222f2;border-bottom:1px solid #444}.info{display:flex;gap:10px;font-size:14px}.btn{padding:8px 16px;border:none;border-radius:6px;cursor:pointer;font-weight:600;background:#444;color:#fff;font-size:13px}.btn.primary{background:#3b82f6}.toast{position:absolute;bottom:30px;left:50%;transform:translate(-50%);background:#10b981;padding:10px 20px;border-radius:20px;font-weight:700;opacity:0;transition:.3s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%) translateY(-10px)}#auth-forms{display:flex;flex-direction:column}#lobby{flex-wrap:wrap;align-items:flex-start;padding-bottom:50px}.rooms-panel{width:320px;max-height:500px;display:flex;flex-direction:column}.rooms-grid{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding-right:5px}.room-card{display:flex;align-items:center;gap:10px;background:#0000004d;border:1px solid #444;border-radius:8px;padding:8px;cursor:pointer;transition:.2s}.room-card:hover{background:#ffffff0d;border-color:#3b82f6;transform:translate(5px)}.room-preview{width:50px;height:50px;object-fit:cover;border-radius:6px;background:#333}.room-info{flex:1;display:flex;flex-direction:column;justify-content:center}.room-id{font-size:14px;font-weight:700;color:#eee}.room-date{font-size:11px;color:#888}.rooms-grid::-webkit-scrollbar{width:6px}.rooms-grid::-webkit-scrollbar-thumb{background:#444;border-radius:3px}.divider-text{display:flex;align-items:center;text-align:center;margin:20px 0;color:#666;font-size:12px;font-weight:700;text-transform:uppercase}.divider-text:before,.divider-text:after{content:"";flex:1;border-bottom:1px solid #444}.divider-text:before{margin-right:10px}.divider-text:after{margin-left:10px}.join-row{display:flex;gap:10px;height:40px}#joinInput{flex:2;background:#333;border:1px solid #444;border-radius:8px;padding:0 12px;color:#fff;outline:none;font-family:monospace}#joinInput:focus{border-color:#3b82f6}#joinBtn{flex:1;height:100%;margin:0}.top-bar{display:flex;justify-content:space-between;align-items:center;padding:8px 15px;background:#1e1e1ef2;border-bottom:1px solid #444;height:60px;gap:20px}.left-section,.right-section{display:flex;align-items:center;gap:10px;flex:1}.right-section{justify-content:flex-end}.center-section{flex:2;display:flex;justify-content:center}.progress-wrapper{width:100%;max-width:400px;display:flex;flex-direction:column;align-items:center}.progress-text{font-size:14px;font-weight:700;margin-bottom:4px;color:#eee;display:flex;gap:8px;align-items:baseline}.progress-track{width:100%;height:8px;background:#444;border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#10b981,#34d399);width:0%;transition:width .5s ease}.mini-avatars{display:flex;margin-right:10px}.mini-avatar{width:30px;height:30px;border-radius:50%;border:2px solid #222;margin-left:-10px;display:flex;justify-content:center;align-items:center;font-size:14px;color:#fff;font-weight:700;background:#555;cursor:default;position:relative}.mini-avatar:first-child{margin-left:0}.mini-avatar:hover{z-index:10;transform:scale(1.1)}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;justify-content:center;align-items:center;z-index:2000;pointer-events:auto}.modal-content{background:#222;width:400px;border-radius:12px;border:1px solid #444;box-shadow:0 20px 50px #00000080;overflow:hidden;display:flex;flex-direction:column}.modal-header{padding:15px 20px;background:#2a2a2a;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #444}.modal-header h3{margin:0;font-size:18px}.close-btn{background:none;border:none;color:#888;font-size:24px;cursor:pointer}.close-btn:hover{color:#fff}.modal-body{padding:20px}#leaderboard-table{width:100%;border-collapse:collapse;color:#ddd}#leaderboard-table th{text-align:left;border-bottom:1px solid #444;padding-bottom:10px;color:#888;font-size:12px}#leaderboard-table td{padding:10px 0;border-bottom:1px solid #333;font-size:14px}#leaderboard-table tr:last-child td{border-bottom:none}.lb-percent{font-weight:700;color:#10b981}@media(max-width:600px){.progress-text span:last-child{display:none}.mini-avatars{display:none}}@media(max-width:768px){#lobby{flex-direction:column;align-items:center;padding-top:20px;padding-bottom:50px}.auth-card,.panel{width:90%;max-width:350px}}