.landing-page{background-color:#1a1a2e;justify-content:center;align-items:center;width:100%;min-height:100vh;padding:40px 20px;display:flex;position:relative}.landing-page:before{content:"";filter:blur(8px);z-index:0;pointer-events:none;background:url(/assets/background.png) 50%/cover no-repeat;position:fixed;inset:-30px}.landing-bg-pattern{pointer-events:none;z-index:0;position:absolute;inset:0;overflow:hidden}.landing-blob{filter:blur(100px);opacity:.3;border-radius:50%;position:absolute}.landing-blob.top-right{background:var(--purple-primary);width:400px;height:400px;top:-100px;right:-100px}.landing-blob.bottom-left{background:var(--bg-orange);width:400px;height:400px;bottom:-100px;left:-100px}.landing-content{z-index:10;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:480px;display:flex;position:relative}.landing-logo{text-align:center;flex-direction:column;align-items:center;gap:8px;margin-bottom:-20px;display:flex}.logo-hex-icon{color:gold;text-shadow:0 0 40px #ffd70066;font-size:4.5rem;animation:3s ease-in-out infinite logoFloat}@keyframes logoFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.landing-title{background:linear-gradient(135deg,gold,#f5a623,#ff6b6b);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:0;font-size:3rem;font-weight:900;line-height:1.2}.landing-subtitle{color:#ffffff8c;margin:0;font-size:1rem;font-weight:600}.landing-actions{flex-direction:column;gap:14px;width:100%;display:flex}.landing-btn{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;border:none;border-radius:18px;flex-direction:column;align-items:center;gap:4px;width:100%;padding:18px 20px;font-family:Cairo,sans-serif;transition:all .3s;display:flex}.landing-btn:hover,.landing-btn:active{transform:translateY(-3px);box-shadow:0 10px 35px #0000004d}.landing-btn:disabled,.join-submit-btn:disabled,.scan-qr-btn:disabled{opacity:.6;cursor:not-allowed;box-shadow:none!important;transform:none!important}.create-btn{background:linear-gradient(135deg,#f47b20,#e86a10);box-shadow:0 5px 20px #f47b204d}.join-btn{background:linear-gradient(135deg,#2db84b,#1a9a35);box-shadow:0 5px 20px #2db84b4d}.spectate-btn{background:linear-gradient(135deg,#7158e2,#5d4abd);box-shadow:0 5px 20px #7158e24d}.btn-icon-img{object-fit:contain;filter:url(#chroma-key-green);width:54px;height:54px;margin-bottom:-4px;transition:transform .3s}.landing-btn:hover .btn-icon-img{transform:scale(1.15)rotate(5deg)}.btn-text{color:#fff;font-size:1.3rem;font-weight:800}.btn-desc{color:#ffffffa6;font-size:.8rem;font-weight:500}.join-form{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:18px;flex-direction:column;gap:12px;padding:20px;display:flex}.name-input{color:#fff;text-align:center;background:#ffffff14;border:2px solid #fff3;border-radius:12px;outline:none;width:100%;padding:14px;font-family:Cairo,sans-serif;font-size:1.1rem;font-weight:700;transition:border-color .2s}.name-input::placeholder{color:#ffffff4d;font-size:.9rem}.name-input:focus{border-color:#2db84b;box-shadow:0 0 15px #2db84b33}.room-input{color:#fff;text-align:center;letter-spacing:8px;text-transform:uppercase;background:#ffffff14;border:2px solid #fff3;border-radius:12px;outline:none;width:100%;padding:14px;font-family:Cairo,monospace;font-size:1.4rem;font-weight:800;transition:border-color .2s}.room-input-group{gap:8px;width:100%;display:flex}.scan-qr-btn{color:#fff;cursor:pointer;background:#ffffff1a;border:2px solid #fff3;border-radius:12px;justify-content:center;align-items:center;padding:0 16px;font-size:1.4rem;transition:all .2s;display:flex}.scan-qr-btn:hover{background:#fff3;border-color:gold;transform:scale(1.05)}.qr-scanner-view{flex-direction:column;align-items:center;animation:.3s ease-out slideDown;display:flex}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.room-input::placeholder{color:#ffffff4d;letter-spacing:0;font-size:.9rem}.room-input:focus{border-color:gold;box-shadow:0 0 15px #ffd70033}.join-error{color:#ff6b6b;text-align:center;margin:0;font-size:.85rem}.join-form-actions{gap:8px;display:flex}.join-submit-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#2db84b,#1a9a35);border:none;border-radius:12px;flex:1;padding:12px;font-family:Cairo,sans-serif;font-size:1rem;font-weight:800}.join-submit-btn:hover{box-shadow:0 4px 16px #2db84b4d}.join-submit-btn:disabled:hover,.scan-qr-btn:disabled:hover,.landing-btn:disabled:hover{box-shadow:none;transform:none}.join-cancel-btn{color:#fff9;cursor:pointer;background:#ffffff1a;border:1px solid #ffffff26;border-radius:12px;padding:12px 18px;font-family:Cairo,sans-serif;font-size:.9rem;font-weight:600}.join-cancel-btn:hover{background:#ffffff26}.landing-footer{color:#ffffff59;text-align:center;font-size:.85rem;font-weight:500}@media (max-width:500px){.landing-title{font-size:2.2rem}.logo-hex-icon{font-size:3rem}}