:root{font-family:Outfit,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#000;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;padding:0;min-width:320px;min-height:100vh}.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:10px}.tool-button{padding:6px 4px;background:#333;border:1px solid #555;border-radius:4px;color:#fff;cursor:pointer;transition:background-color .2s;display:flex;align-items:center;justify-content:center;font-size:11px;font-family:Outfit,sans-serif;min-height:28px}.tool-button:hover{background:#444}.tool-button.active{background:#4a90e2;border-color:#357abd}.tool-button.danger{background:#d9534f;border-color:#d43f3a}.tool-button.warning{background:#ff9800;border-color:#e68900}.color-swatch{width:30px;height:30px;border-radius:4px;cursor:pointer;box-sizing:border-box;border:1px solid #555;transition:transform .1s}.color-swatch:hover{transform:scale(1.1);z-index:10}.color-swatch.selected{border:2px solid white;box-shadow:0 0 4px #ffffff80}.rainbow-button{background:linear-gradient(135deg,red,#ff7f00,#ff0,#0f0,#00f,indigo,#9400d3);color:#fff;width:65px;height:30px;border-radius:4px;border:1px solid #555;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;text-shadow:0 0 2px black}.rainbow-button.selected{border:2px solid white;box-shadow:0 0 4px #ffffff80}.swap-control{width:65px;height:30px;position:relative;cursor:pointer}.swap-secondary{position:absolute;bottom:0;right:15px;width:20px;height:20px;border:1px solid #555;border-radius:2px;z-index:1}.swap-primary{position:absolute;top:0;left:15px;width:20px;height:20px;border:1px solid #fff;border-radius:2px;z-index:2;box-shadow:1px 1px 2px #00000080}.swap-icon{position:absolute;top:2px;right:2px;font-size:10px;color:#888}.custom-slot{width:30px;height:30px;border-radius:4px;border:1px solid #555;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;color:#555;background:#222;transition:all .2s;position:relative;overflow:hidden}.custom-slot:hover{border-color:#888;color:#888}.custom-slot.selected{border:2px solid white;box-shadow:0 0 4px #ffffff80}#root{width:100%;height:100%;margin:0;padding:0;position:fixed;top:0;left:0}body,html{width:100%;height:100%;margin:0;padding:0}:root{--color-void-black: #0a0b10;--color-crystal-blue: #4a90e2;--color-crystal-glow: #8bc1ff;--color-gold: #cfb53b;--color-gold-light: #f4e4bc;--color-surface: rgba(20, 20, 25, .7);--color-surface-border: rgba(255, 255, 255, .1)}body{margin:0;overflow:hidden}.landing-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;width:100vw;background:transparent;color:#eee;font-family:Outfit,sans-serif;position:relative;overflow-y:auto;padding:20px 0;box-sizing:border-box}.landing-base{position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at center,#1a1b26 0%,var(--color-void-black) 100%);z-index:-2;pointer-events:none}.landing-particles{position:fixed;top:-50%;left:-50%;width:200%;height:200%;background-image:radial-gradient(circle at center,rgba(74,144,226,.1) 1px,transparent 1px),radial-gradient(circle at center,rgba(207,181,59,.05) 1px,transparent 1px);background-size:40px 40px,60px 60px;animation:bg-rotate 120s linear infinite;z-index:-1;pointer-events:none}@keyframes bg-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.landing-content{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;gap:1.5rem;animation:fade-in-up 1s ease-out}@keyframes fade-in-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.title-group{text-align:center}.main-title{font-family:Cinzel,serif;font-size:4rem;font-weight:700;background:linear-gradient(180deg,var(--color-gold-light) 0%,var(--color-gold) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;margin:0;text-shadow:0 4px 20px rgba(207,181,59,.3);letter-spacing:2px}.subtitle{font-size:1.2rem;color:var(--color-crystal-glow);opacity:.8;letter-spacing:4px;text-transform:uppercase;margin-top:.5rem}.glass-card{background:var(--color-surface);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:2rem;border-radius:12px;border:1px solid var(--color-surface-border);box-shadow:0 8px 32px #00000080;width:100%;max-width:400px;display:flex;flex-direction:column;gap:1.2rem;transition:transform .3s ease,box-shadow .3s ease;max-height:80vh;overflow-y:auto}.glass-card:hover{transform:translateY(-2px);box-shadow:0 12px 40px #0009,0 0 20px #4a90e21a;border-color:#fff3}.form-group{display:flex;flex-direction:column;gap:.6rem}.form-label{font-size:.9rem;text-transform:uppercase;letter-spacing:1px;color:#aaa;font-weight:600}.input-field{padding:12px;font-size:1.1rem;background:#0000004d;border:1px solid #444;border-radius:6px;color:#fff;font-family:Outfit,sans-serif;transition:all .3s ease}.input-field:focus{outline:none;border-color:var(--color-crystal-blue);box-shadow:0 0 15px #4a90e233;background:#00000080}.color-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.color-option{width:40px;height:40px;border-radius:50%;cursor:pointer;transition:all .2s cubic-bezier(.175,.885,.32,1.275);position:relative;box-shadow:0 4px 6px #0000004d}.color-option:hover{transform:scale(1.1)}.color-option.selected{transform:scale(1.2);box-shadow:0 0 0 3px #fff,0 0 15px currentColor;z-index:2}.color-option.disabled{cursor:not-allowed;opacity:.25;pointer-events:none}.color-option.disabled:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,transparent 47%,#ccc 47%,#ccc 53%,transparent 53%);border-radius:50%;border:1px solid rgba(255,255,255,.4)}.join-button{margin-top:1rem;padding:14px;font-size:1.2rem;font-weight:600;font-family:Cinzel,serif;background:linear-gradient(135deg,var(--color-crystal-blue) 0%,#2a5298 100%);color:#fff;border:none;border-radius:6px;cursor:pointer;text-transform:uppercase;letter-spacing:1px;transition:all .3s ease;box-shadow:0 4px 15px #2a529866}.join-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #4a90e299;filter:brightness(1.1)}.join-button:active:not(:disabled){transform:translateY(1px)}.join-button:disabled{background:#333;color:#666;cursor:not-allowed;box-shadow:none}@media (max-width: 768px){.main-title{font-size:clamp(2.5rem,8vw,3rem)}.glass-card{padding:2rem;max-width:90%}}@media (max-width: 480px){.main-title{font-size:clamp(2rem,10vw,2.5rem);letter-spacing:1px;margin-bottom:0}.subtitle{font-size:.9rem;letter-spacing:2px;margin-top:0;margin-bottom:1rem}.glass-card{padding:1.2rem;gap:.8rem;width:95%;max-width:95vw;max-height:calc(100vh - 140px)}.landing-content{gap:.5rem}.color-option{width:32px;height:32px}.join-button{padding:10px;font-size:1rem;margin-top:.5rem}.form-group{gap:.4rem}.input-field{padding:10px}}@media (max-height: 650px){.landing-container{justify-content:center;padding:10px 0}.main-title{font-size:2rem;display:block;margin-bottom:.2rem}.subtitle{display:none}.glass-card{padding:1rem;gap:.5rem;max-height:calc(100vh - 60px);overflow-y:auto;width:95%;max-width:95vw}.landing-content{width:100%;height:100%}}@media (max-height: 500px){.glass-card{max-height:calc(100vh - 40px)}}.role-option{flex:1;padding:8px;text-align:center;border-radius:6px;border:1px solid rgba(255,255,255,.2);cursor:pointer;background:#0000004d;font-weight:500;transition:all .2s ease}.role-option:hover{background:#ffffff1a}.role-option.tank{border-color:#4a90e2;color:#4a90e2}.role-option.healer{border-color:#7ed321;color:#7ed321}.role-option.dps{border-color:#d0021b;color:#d0021b}.role-option.spectator{border-color:#888;color:#aaa}.role-option.spectator:hover{color:#fff;border-color:#fff}.role-option.selected{background:#ffffff1a;box-shadow:0 0 10px currentColor;border-width:2px}@media (max-width: 480px){.main-title{font-size:2.5rem;letter-spacing:1px;margin-bottom:.5rem}.subtitle{font-size:.9rem;letter-spacing:2px}.glass-card{padding:1.5rem;gap:.8rem;width:90%;max-width:90vw}.color-option{width:35px;height:35px}.join-button{padding:12px;font-size:1rem}}@media (max-height: 700px){.landing-content{transform:scale(.85);transform-origin:center top;margin-top:-20px}.glass-card{max-height:85vh}}@media (max-height: 550px){.landing-content{transform:scale(.75);margin-top:-40px}.main-title{font-size:2rem}}