*{box-sizing:border-box;margin:0;padding:0}body{color:#f1f3f9;background:radial-gradient(circle,#0d0f1a,#04050a);justify-content:center;align-items:center;width:100vw;height:100vh;font-family:Outfit,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;display:flex;overflow:hidden}#app{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.bg-blob{filter:blur(120px);opacity:.15;z-index:0;pointer-events:none;border-radius:50%;animation:25s ease-in-out infinite alternate float;position:absolute}.blob-purple{background:#6366f1;width:400px;height:400px;top:-10%;left:10%}.blob-cyan{background:#06b6d4;width:500px;height:500px;animation-duration:35s;bottom:-10%;right:15%}@keyframes float{0%{transform:translate(0)scale(1)}50%{transform:translate(60px,-40px)scale(1.1)}to{transform:translate(-30px,50px)scale(.9)}}.glass-container{z-index:10;-webkit-backdrop-filter:blur(16px)saturate(180%);text-align:center;background:#11182773;border:1px solid #ffffff14;border-radius:24px;width:100%;max-width:480px;padding:40px;animation:.8s cubic-bezier(.16,1,.3,1) fadeIn;position:relative;box-shadow:0 20px 50px #0006}@keyframes fadeIn{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}h1{background:linear-gradient(135deg,#fff 30%,#a5b4fc 100%);-webkit-text-fill-color:transparent;letter-spacing:-.5px;-webkit-background-clip:text;margin-bottom:8px;font-size:2.2rem;font-weight:800}p.subtitle{color:#9ca3af;margin-bottom:30px;font-size:1rem}.input-group{text-align:left;margin-bottom:20px}.input-label{text-transform:uppercase;letter-spacing:1px;color:#818cf8;margin-bottom:8px;font-size:.85rem;font-weight:600;display:block}.input-field{color:#fff;background:#1f293780;border:1px solid #ffffff1a;border-radius:12px;outline:none;width:100%;padding:14px 18px;font-family:inherit;font-size:1rem;transition:all .3s cubic-bezier(.4,0,.2,1)}.input-field:focus{background:#1f2937bf;border-color:#6366f1;box-shadow:0 0 0 4px #6366f140}.action-button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#6366f1,#4f46e5);border:none;border-radius:14px;width:100%;margin-top:15px;padding:16px 24px;font-family:inherit;font-size:1.1rem;font-weight:700;transition:all .3s cubic-bezier(.16,1,.3,1);box-shadow:0 8px 24px #6366f159}.action-button:hover{background:linear-gradient(135deg,#818cf8,#6366f1);transform:translateY(-2px);box-shadow:0 12px 30px #6366f180}.action-button:active{transform:translateY(1px);box-shadow:0 4px 10px #6366f14d}.action-button:disabled{color:#9ca3af;box-shadow:none;cursor:not-allowed;background:#37415166;transform:none}.action-button.secondary{box-shadow:none;background:0 0;border:1px solid #ffffff26;margin-top:10px}.action-button.secondary:hover{background:#ffffff0d;border-color:#ffffff4d;transform:translateY(-1px)}.action-button.credits-button{letter-spacing:.04em;color:#a5b4fc;border-color:#a5b4fc59;margin-top:12px;padding:12px 20px;font-size:.95rem;font-weight:600}.action-button.credits-button:hover{color:#fff;background:#6366f12e;border-color:#a5b4fc8c;transform:translateY(-2px)scale(1.02)}.action-button.credits-button:active{transform:translateY(0)scale(.98)}.lobby-room-info{letter-spacing:1.5px;text-transform:uppercase;color:#10b981;background:#10b9811a;border:1px solid #10b98133;border-radius:20px;margin-bottom:24px;padding:8px 16px;font-size:.95rem;font-weight:600;display:inline-block}.lobby-players-box{background:#11182799;border:1px solid #ffffff0d;border-radius:16px;max-height:none;margin-bottom:20px;padding:12px;overflow:visible}.lobby-start-btn{background:linear-gradient(135deg,#f59e0b,#d97706);width:100%;margin-top:0;margin-bottom:18px;display:none;box-shadow:0 8px 24px #f59e0b66}.lobby-start-btn.lobby-start-visible{display:block}.lobby-start-btn.lobby-start-visible:hover{background:linear-gradient(135deg,#fbbf24,#f59e0b);box-shadow:0 12px 28px #f59e0b8c}.player-item{text-align:left;background:#ffffff08;border-left:3px solid #64748b;border-radius:10px;align-items:center;min-height:40px;margin-bottom:6px;padding:8px 12px;animation:.3s ease-out slideIn;display:flex}.player-item.is-ready{background:#10b98114;border-left-color:#10b981}.player-item.is-away{border-left-color:#64748b}.player-item:last-child{margin-bottom:0}.player-avatar{color:#1e1b4b;background:linear-gradient(135deg,#a5b4fc,#818cf8);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;margin-right:12px;font-size:.85rem;font-weight:700;display:flex}.player-name{color:#e5e7eb;text-overflow:ellipsis;white-space:nowrap;flex-grow:1;font-size:.95rem;font-weight:600;overflow:hidden}.player-status{flex-shrink:0;font-size:.75rem;font-weight:700}.player-item.is-ready .player-status{color:#10b981}.player-item.is-away .player-status{color:#94a3b8}.action-button.ready-toggle.is-ready-active{background:linear-gradient(135deg,#64748b,#475569);box-shadow:0 8px 24px #47556959}.action-button.ready-toggle.is-away-active{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 8px 24px #10b98159}.lobby-actions-row{gap:10px;margin-top:0;display:flex}.lobby-actions-row .action-button{flex:1;width:auto;margin-top:0}.lobby-container h1{margin-bottom:18px;font-size:1.9rem}@keyframes slideIn{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}.error-message{color:#ef4444;background:#ef44441a;border:1px solid #ef444433;border-radius:10px;margin-bottom:20px;padding:12px;font-size:.9rem;font-weight:600;animation:.5s ease-in-out shake}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.spinner{border:3px solid #6366f11a;border-top-color:#6366f1;border-radius:50%;width:40px;height:40px;margin:0 auto 20px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.app-alert-overlay{z-index:10000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#020617a6;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.app-alert-dialog{text-align:left;background:#1e293b;border:2px solid #ef4444;border-radius:14px;width:min(400px,100vw - 32px);padding:22px 24px 18px;box-shadow:0 20px 50px #00000073}.app-alert-title{color:#f87171;margin-bottom:10px;font-family:Outfit,sans-serif;font-size:.95rem;font-weight:700}.app-alert-message{color:#e2e8f0;word-break:break-word;margin-bottom:18px;font-family:Outfit,sans-serif;font-size:.9rem;line-height:1.45}.app-alert-ok{color:#fff;cursor:pointer;background:#3b82f6;border:none;border-radius:8px;min-width:96px;margin:0 auto;padding:8px 20px;font-family:Outfit,sans-serif;font-size:.9rem;font-weight:700;display:block}.app-alert-ok:hover{background:#2563eb}.app-alert-ok:focus{outline-offset:2px;outline:2px solid #93c5fd}