@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap";.app-header{z-index:1000;width:100%;position:relative}@media (width<=992px){.app-header{position:sticky;top:0}}.navbar{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);pointer-events:auto;z-index:1000;background:#0a0b1ebf;border:1px solid #ffffff1a;border-radius:20px;justify-content:space-between;align-items:center;width:100%;height:75px;margin-top:20px;margin-bottom:1.5rem;padding:0 1.5rem;transition:all .3s;display:flex;box-shadow:0 10px 30px #0000004d}.navbar.menu-open{z-index:3100}.navbar-content{align-items:center;display:flex}.navbar-brand{color:#fff;margin-right:3rem;font-size:1.5rem;font-weight:800;text-decoration:none}.nav-menu-container.desktop-only{flex:1;justify-content:space-between;align-items:center;gap:2rem;display:flex}.nav-menu-container.mobile-only{display:none}.navbar-links{gap:2rem;display:flex}.nav-link{color:#94a3b8;border-bottom:2px solid #0000;padding:.5rem 0;font-size:.9rem;font-weight:500;text-decoration:none;transition:all .2s}.nav-link:hover{color:#fff;border-bottom-color:#06b6d4}.navbar-actions{align-items:center;gap:1.5rem;display:flex}.lang-switcher{background:#ffffff0d;border-radius:8px;gap:4px;padding:4px;display:flex}.lang-btn{color:#94a3b8;cursor:pointer;background:0 0;border:none;border-radius:6px;align-items:center;gap:6px;padding:4px 12px;font-size:1.2rem;transition:all .2s;display:flex}.lang-btn:hover,.lang-btn.active{color:#fff;background:#ffffff1a}.lang-label{color:#fff;font-size:.8rem;font-weight:700;display:none}.user-menu{align-items:center;gap:1rem;display:flex}.user-info{align-items:center;gap:.75rem;display:flex}.user-avatar{object-fit:cover;border-radius:50%;width:32px;height:32px}.user-name{color:#e2e8f0;font-size:.9rem;font-weight:600}.btn-logout{color:#ef4444;cursor:pointer;background:0 0;border:1px solid #ffffff1a;border-radius:6px;padding:4px 12px;font-size:.8rem;transition:all .2s}.btn-logout:hover{background:#ef44441a;border-color:#ef4444}.mobile-toggle{cursor:pointer;z-index:3000;background:0 0;border:none;flex-direction:column;justify-content:space-around;width:30px;height:24px;padding:0;display:none}.menu-close-btn{display:none}.mobile-toggle .bar{background:#fff;border-radius:10px;width:100%;height:2px;transition:all .3s}.menu-open .mobile-toggle{opacity:0;pointer-events:none}.nav-action-btn{border:1px solid var(--glass-border);cursor:pointer;color:#fff;background:#ffffff0d;border-radius:8px;justify-content:center;align-items:center;margin-right:10px;padding:8px 12px;font-size:1.2rem;transition:all .3s;display:flex}.nav-action-btn:hover{border-color:var(--color-secondary);background:#ffffff1a;transform:translateY(-2px);box-shadow:0 0 10px #06b6d44d}.nav-action-btn.muted{opacity:.5;filter:grayscale()}@media (width<=992px){.navbar{border:1px solid #ffffff1a;border-radius:12px;justify-content:center;width:100%;height:60px;margin-top:15px;margin-bottom:1.5rem;padding:0 1.5rem;display:flex}.navbar-content{justify-content:space-between;align-items:center;width:100%;display:flex}.mobile-toggle{display:flex}.mobile-toggle.open .bar:first-child{transform:rotate(45deg)translate(6px,6px)}.mobile-toggle.open .bar:nth-child(2){opacity:0}.mobile-toggle.open .bar:nth-child(3){transform:rotate(-45deg)translate(5px,-6px)}.navbar-brand{margin-right:0;font-size:1.25rem}.nav-menu-container.desktop-only{display:none}.nav-menu-container.mobile-only{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:5000;visibility:hidden;background:#0a0b1ef2;border-right:1px solid #ffffff1a;flex-direction:column;justify-content:flex-start;gap:2rem;width:280px;height:100vh;margin:0;padding:120px 1.5rem 2rem;transition:transform .4s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:0;left:0;overflow-y:auto;transform:translate(-110%);box-shadow:10px 0 30px #00000080}.nav-menu-container.mobile-open{visibility:visible;transform:translate(0)}.navbar-links{flex-direction:column;gap:1.5rem;width:100%}.nav-link{border-bottom:1px solid #ffffff0d;width:100%;padding:1rem 0;font-size:1.2rem}.navbar-actions{flex-direction:column;align-items:flex-start;gap:2rem;width:100%}.lang-switcher{justify-content:space-around;width:100%;padding:10px}.lang-label{display:inline}.user-menu{flex-direction:column;align-items:flex-start;gap:1.5rem;width:100%}.login-nav-btn{width:100%;padding:1rem;font-size:1.1rem}.menu-close-btn{color:#fff;cursor:pointer;z-index:2600;background:0 0;border:none;padding:10px;font-size:2rem;line-height:1;display:block;position:absolute;top:20px;right:20px}}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#0009;width:100vw;height:100vh;position:fixed;top:0;left:0}.modal-content{text-align:center;width:90%;max-width:400px;padding:2rem}.modal-subtitle{color:var(--text-secondary);margin:1rem 0 2rem;font-size:.95rem;line-height:1.5}.modal-actions{flex-direction:column;gap:1rem;display:flex}.modal-actions .btn{width:100%}.btn-text{color:var(--text-muted);cursor:pointer;background:0 0;border:none;font-family:Outfit,sans-serif;font-size:.9rem;transition:color .3s}.btn-text:hover{color:var(--text-primary);text-decoration:underline}.mt-4{margin-top:1rem}.home-page{padding-top:2rem}.hero-section{width:100%;max-width:800px;padding:0 20px}.logo-container{margin-bottom:2rem;display:inline-block;position:relative}.hero-subtitle{color:var(--text-secondary);margin-bottom:3rem;font-size:1.15rem;line-height:1.6}.hero-actions{justify-content:center;gap:1.5rem;margin-bottom:4rem;display:flex}.btn-large{min-width:200px;padding:1rem 2.5rem;font-size:1.1rem}.features-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-top:3rem;display:grid}.feature-card{text-align:left;padding:1.5rem;transition:transform .3s,box-shadow .3s}.feature-card:hover{border-color:#06b6d44d;transform:translateY(-5px);box-shadow:0 10px 30px #0003}.feature-card h3{color:var(--color-secondary);margin-bottom:.5rem;font-size:1.2rem}.feature-card p{color:var(--text-secondary);font-size:.95rem;line-height:1.5}@media (width<=600px){.home-page{padding-bottom:3rem}.hero-subtitle{margin-bottom:2rem;font-size:1rem}.hero-actions{flex-direction:column;gap:1rem;padding:0 1rem}.btn-large{min-width:100%;padding:.8rem 1.5rem}.features-grid{grid-template-columns:1fr}}.bot-selector{padding:1.5rem}.selector-title{color:var(--text-primary);margin-bottom:1rem;font-size:1.1rem}.bot-list{flex-direction:column;gap:.75rem;display:flex}.bot-card{border:1px solid var(--glass-border);cursor:pointer;text-align:left;color:var(--text-primary);background:#0003;border-radius:8px;outline:none;align-items:center;padding:.75rem;transition:all .2s;display:flex}.bot-card:hover{background:#06b6d41a;border-color:#06b6d44d}.bot-card.selected{border-color:var(--color-accent);background:#10b9811a;box-shadow:0 0 10px #10b98133}.bot-icon{margin-right:1rem;font-size:1.5rem}.bot-info{flex:1}.bot-info h4{color:var(--text-primary);margin-bottom:.25rem;font-size:1rem}.bot-info p{color:var(--text-muted);font-size:.8rem}.checkbox{border:2px solid var(--text-muted);border-radius:4px;width:20px;height:20px;transition:all .2s;position:relative}.bot-card.selected .checkbox{background-color:var(--color-accent);border-color:var(--color-accent)}.bot-card.selected .checkbox:after{content:"✓";color:#000;font-size:12px;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.warning-text{color:var(--color-warning);text-align:center;margin-top:1rem;font-size:.85rem}.docs-panel{flex-direction:column;max-height:400px;padding:1.5rem;display:flex}.docs-panel h3{color:var(--primary-color);border-bottom:1px solid var(--glass-border);margin-top:0;padding-bottom:.5rem;font-size:1.2rem}.docs-scroll{padding-right:.5rem;overflow-y:auto}.docs-section h4{color:var(--text-primary);text-transform:uppercase;letter-spacing:1px;margin:1rem 0 .5rem;font-size:.9rem}.docs-section ul{margin:0;padding:0;list-style:none}.docs-section li{border-left:2px solid var(--glass-border);margin-bottom:.8rem;padding-left:.8rem}.docs-section code{color:var(--secondary-color);font-size:.9rem;font-weight:700}.docs-section p{color:var(--text-secondary);margin:.2rem 0 0;font-size:.8rem}.docs-scroll::-webkit-scrollbar{width:4px}.docs-scroll::-webkit-scrollbar-track{background:#ffffff0d}.docs-scroll::-webkit-scrollbar-thumb{background:var(--primary-color);border-radius:2px}.toast-container{z-index:9999;pointer-events:none;flex-direction:column;gap:12px;display:flex;position:fixed;top:24px;right:24px}.toast-item{pointer-events:auto;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;background:#1e293bcc;border:1px solid #ffffff1a;border-radius:16px;align-items:center;gap:12px;min-width:280px;max-width:400px;padding:16px 20px;animation:.3s cubic-bezier(.68,-.55,.265,1.55) toastSlideIn;display:flex;box-shadow:0 10px 15px -3px #0000004d}@keyframes toastSlideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.toast-icon{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;font-size:14px;font-weight:700;display:flex}.toast-item.success{border-left:4px solid #10b981}.toast-item.success .toast-icon{color:#fff;background:#10b981}.toast-item.error{border-left:4px solid #ef4444}.toast-item.error .toast-icon{color:#fff;background:#ef4444}.toast-message{font-size:.95rem;font-weight:500;line-height:1.4}.editor-page{min-height:100vh;padding-bottom:8rem}.editor-header{margin-top:0;margin-bottom:2.5rem;animation:.8s ease-out fadeIn}.editor-header h1{letter-spacing:-1px;margin-bottom:.15rem;font-size:2.5rem;font-weight:900}.editor-subtitle{color:#94a3b8;max-width:600px;font-size:1rem}.editor-layout{grid-template-columns:2fr 1fr;gap:2rem;height:100%;display:grid}.editor-panel{flex-direction:column;height:100%;padding:1.5rem;display:flex;overflow:hidden}.panel-header{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.panel-header h2{margin:0;font-size:1.5rem}.save-actions{align-items:center;gap:15px;display:flex}.unsaved-tag{color:#fbbf24;background:#fbbf241a;border:1px solid #fbbf244d;border-radius:20px;padding:4px 12px;font-size:.85rem;font-weight:600;animation:2s infinite pulse-unsaved}@keyframes pulse-unsaved{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}.code-container{border:1px solid var(--glass-border);border-radius:8px;flex:1;min-height:400px;position:relative;overflow:hidden}.sidebar-panel{flex-direction:column;gap:1.5rem;display:flex}.action-panel{flex-direction:column;flex:1;padding:1.5rem;display:flex}.action-panel h3{color:var(--text-primary);margin-bottom:1rem}.status-text{color:var(--text-muted);font-size:.95rem}.text-ready{color:var(--color-accent);font-weight:600}.text-warning{color:var(--color-warning);font-weight:600}.w-100{width:100%}.simulating{cursor:wait;animation:1s infinite alternate pulse-glow}.mobile-tabs{gap:.5rem;margin-top:1rem;margin-bottom:1rem;padding:0 5px;display:flex}.tab-btn{background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--text-muted);border-radius:12px;flex:1;padding:.75rem;font-weight:600;transition:all .3s}.tab-btn.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary);box-shadow:0 0 15px #7c3aed66}@media (width>=769px){.d-md-none{display:none!important}}@media (width<=768px){.editor-page{touch-action:auto;flex-direction:column;height:auto;min-height:100vh;padding:0 15px;display:flex;overflow:visible}.editor-layout{flex-direction:column;grid-template-columns:1fr;height:auto;display:flex;overflow:visible}.editor-layout.editor{overflow:visible}.editor-layout.settings{height:auto;display:block;overflow:visible}.d-none-mobile{display:none!important}.editor-panel{flex-direction:column;height:auto;padding:1.5rem;display:flex}.sidebar-panel{padding-bottom:6rem}.code-container{width:100%;height:auto;min-height:500px;margin-top:1rem}.editor-container{height:500px!important}.action-panel{padding:1rem}}.battle-results-screen{z-index:10000;-webkit-overflow-scrolling:touch;color:#fff;box-sizing:border-box;background:#06080a;flex-direction:column;align-items:center;font-family:Space Mono,monospace;animation:.5s ease-out forwards simpleFadeIn;display:flex;position:fixed;inset:0;overflow:hidden auto}.battle-results-screen *{box-sizing:border-box}.tactical-report-container{flex-direction:column;gap:3rem;width:100%;max-width:800px;padding:3rem 2rem;animation:.8s cubic-bezier(.2,.8,.2,1) forwards slideUpIn;display:flex;overflow-x:hidden}.report-header{text-align:center;border-bottom:1px solid #ffffff0d;padding-bottom:1.5rem;position:relative}.glitch-bar{background:var(--color-primary);width:60px;height:2px;box-shadow:0 0 10px var(--color-primary);position:absolute;top:0;left:50%;transform:translate(-50%)}.status-badge{letter-spacing:6px;color:#64748b;margin-bottom:.5rem;font-size:.7rem;display:block}.report-title{letter-spacing:-1px;margin:0;font-size:2.5rem;font-weight:900}.champion-section{flex-direction:column;align-items:center;display:flex;position:relative}.champion-avatar-wrapper{z-index:2;background:#f59e0b0d;border:4px solid #f59e0b;border-radius:50%;width:180px;height:180px;margin-bottom:2rem;padding:10px;position:relative}.champion-img{object-fit:cover;border-radius:50%;width:100%;height:100%}.champion-tag{color:#000;background:#f59e0b;border-radius:20px;padding:5px 15px;font-size:.8rem;font-weight:900;position:absolute;bottom:-12px;left:50%;transform:translate(-50%);box-shadow:0 5px 15px #f59e0b66}.champion-meta{text-align:center}.rank-text{color:#f59e0b;letter-spacing:4px;font-size:.75rem}.champion-name{word-wrap:break-word;overflow-wrap:break-word;max-width:100%;margin:0;font-size:2.2rem;font-weight:900}.section-subtitle{color:#64748b;letter-spacing:3px;text-transform:uppercase;margin-bottom:1.5rem;font-size:.8rem}.performance-list{flex-direction:column;gap:1rem;display:flex}.performance-card{background:#ffffff05;border:1px solid #ffffff0d;border-radius:12px;align-items:center;gap:1.5rem;padding:1rem 1.5rem;transition:all .3s;display:flex}.is-winner{background:#f59e0b0d;border-color:#f59e0b33}.perf-rank{color:#475569;width:30px;font-size:1.1rem;font-weight:900}.perf-thumb{flex-shrink:0;width:50px;height:50px}.perf-thumb img{object-fit:cover;width:100%;height:100%}.is-user{border:2px solid var(--color-primary);border-radius:50%;padding:2px}.perf-info{flex-direction:column;flex:1;gap:6px;display:flex}.perf-name{color:#f8fafc;word-wrap:break-word;overflow-wrap:break-word;font-size:1rem;font-weight:700}.p-bar{background:#ffffff0d;border-radius:4px;align-items:center;height:18px;padding:0 10px;display:flex;position:relative;overflow:hidden}.p-bar-fill{background:var(--color-primary);opacity:.2;height:100%;position:absolute;top:0;left:0}.p-bar-label{color:#fff;z-index:1;font-family:monospace;font-size:.65rem}.perf-score{text-align:right}.score-val{color:#10b981;font-size:1.3rem;font-weight:900;display:block}.score-unit{color:#64748b;font-size:.6rem}.report-actions{justify-content:center;gap:1.5rem;margin-top:2rem;display:flex}.action-btn{cursor:pointer;letter-spacing:1px;border:none;border-radius:12px;justify-content:center;align-items:center;gap:.8rem;min-width:240px;padding:1.2rem 2.5rem;font-family:inherit;font-size:.9rem;font-weight:900;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex}.action-btn.primary{background:var(--color-primary);color:#000;box-shadow:0 10px 25px #06b6d44d}.action-btn.secondary{color:#fff;background:#ffffff0d;border:1px solid #ffffff1a}.action-btn:hover{filter:brightness(1.2);transform:translateY(-4px)}@media (width<=600px){.tactical-report-container{gap:2.5rem;padding:2.5rem 1.5rem}.report-title{font-size:1.8rem}.champion-avatar-wrapper{width:140px;height:140px}.champion-name{font-size:1.8rem}.performance-card{gap:1rem;padding:1rem}.report-actions{flex-direction:column;gap:1rem;width:100%}.action-btn{width:100%;min-width:unset;padding:1.3rem}}@keyframes simpleFadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUpIn{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.battle-page{z-index:1;flex-direction:column;flex:1;width:100%;display:flex;position:relative}.battle-page.full-screen{max-width:100vw;height:100vh;margin:0;padding:0}.arena-container{background-color:#06080a;background-image:linear-gradient(#06b6d40d 1px,#0000 1px),linear-gradient(90deg,#06b6d40d 1px,#0000 1px);background-position:0 0;background-repeat:repeat;background-size:50px 50px;background-attachment:scroll;background-origin:padding-box;background-clip:border-box;flex:1;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}@media (height<=450px){.arena-container{padding-top:5px!important}.hud-panel{transform-origin:bottom!important;border-radius:12px!important;padding:8px 16px!important;bottom:5px!important;transform:translate(-50%)scale(.85)!important}.hud-center h2{display:none}.tick-counter{font-size:.6rem!important}}.arena-container:before{content:"";pointer-events:none;background:radial-gradient(circle,#06b6d41a 0%,#0000 70%);width:150%;height:150%;position:absolute}@media (width<=768px){.arena-container{width:100%;padding:0;overflow-x:hidden}.phaser-wrapper{aspect-ratio:800/600;border:none;width:auto;max-height:60vh;margin:0 auto;max-width:100%!important}.telemetry-box{background:#0f172ab3!important;padding:8px!important;font-size:.6rem!important}.box-top-left{top:10px!important;left:10px!important}.box-top-right{top:10px!important;right:10px!important}.box-bottom-left,.box-bottom-right{display:none!important}.telemetry-box h4{margin-bottom:5px!important;font-size:.65rem!important}}.phaser-wrapper{aspect-ratio:800/600;z-index:20;border:4px solid #ffffff0d;border-radius:8px;width:100%;max-width:800px;min-height:400px;margin:0 auto;transition:all .3s;position:relative;overflow:hidden;box-shadow:0 0 100px #000c,0 0 20px #06b6d433}.telemetry-overlay{pointer-events:none;z-index:5;width:100%;height:100%;position:absolute;top:0;left:0}.telemetry-box{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:var(--color-primary);text-shadow:0 0 5px #06b6d480;text-transform:uppercase;background:#0f172a66;border:1px solid #06b6d433;padding:15px;font-family:Courier New,Courier,monospace;font-size:.7rem;position:absolute}.box-top-left{border-left:4px solid var(--color-primary);top:120px;left:40px}.box-top-right{border-right:4px solid var(--color-primary);top:120px;right:40px}.box-bottom-left{border-left:4px solid var(--color-primary);bottom:120px;left:40px}.box-bottom-right{border-right:4px solid var(--color-primary);bottom:120px;right:40px}.telemetry-box h4{border-bottom:1px solid #06b6d433;margin:0 0 10px;padding-bottom:5px;font-size:.8rem}.telemetry-line{justify-content:space-between;gap:20px;margin-bottom:4px;display:flex}.value-cyan{color:#22d3ee}.battle-intro-overlay{z-index:9999;background:#000;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0;overflow:hidden}.intro-content{justify-content:space-between;align-items:center;width:100%;max-width:1200px;padding:0 50px;display:flex;position:relative}.intro-side{flex-direction:column;flex:1;align-items:center;gap:20px;display:flex}.side-left{animation:.8s cubic-bezier(.2,.8,.2,1) forwards slideInLeft}.side-right{animation:.8s cubic-bezier(.2,.8,.2,1) forwards slideInRight}.robot-avatar-large{border:4px solid var(--color-primary);background:linear-gradient(135deg,#7c3aed33,#7c3aed0d);border-radius:40px;justify-content:center;align-items:center;width:250px;height:250px;font-size:8rem;display:flex;position:relative;overflow:hidden;box-shadow:0 0 50px #7c3aed4d}.robot-avatar-large img{object-fit:cover;width:100%;height:100%}.robot-name-intro{color:#fff;text-transform:uppercase;letter-spacing:5px;text-shadow:0 0 20px #ffffff80;font-size:2.5rem;font-weight:900}.vs-logo-container{animation:.5s cubic-bezier(.175,.885,.32,1.275) .6s forwards popVs;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(0)}.vs-logo-intro{-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 30px #fff6);background:linear-gradient(#fff,#94a3b8);-webkit-background-clip:text;background-clip:text;padding:0 40px;font-size:10rem;font-style:italic;font-weight:900;line-height:1}.intro-flash{opacity:0;pointer-events:none;background:#fff;width:100%;height:100%;animation:.5s 3s forwards flashEffect;position:absolute;top:0;left:0}@keyframes slideInLeft{0%{opacity:0;transform:translate(-100%)skew(-10deg)}to{opacity:1;transform:translate(0)skew(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(100%)skew(10deg)}to{opacity:1;transform:translate(0)skew(0)}}@keyframes popVs{0%{opacity:0;transform:scale(0)skew(-10deg)}to{opacity:1;transform:scale(1)skew(-10deg)}}@keyframes flashEffect{0%{opacity:0}50%{opacity:1}to{opacity:0}}.bots-list-intro{gap:10px;display:flex}.bot-mini-avatar{background:#ffffff0d;border:2px solid #fff3;border-radius:20px;justify-content:center;align-items:center;width:100px;height:100px;font-size:2rem;display:flex}.hud-panel{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:500;background:#0f172a66;border:1px solid #ffffff14;border-radius:24px;justify-content:space-between;align-items:center;width:95%;max-width:800px;padding:12px 24px;display:flex;position:fixed;bottom:20px;left:50%;transform:translate(-50%);box-shadow:0 10px 40px #0006}@media (width<=768px){.hud-panel{width:98%;padding:8px 15px;bottom:10px}}.hud-left,.hud-right{flex:1}.hud-right{justify-content:flex-end;display:flex}.hud-center{text-align:center;flex:2}.hud-center h2{letter-spacing:3px;text-transform:uppercase;color:#fff;margin:0;font-size:1rem;font-weight:900}.status-pill{color:#94a3b8;letter-spacing:1px;background:#ffffff08;border:1px solid #ffffff0d;border-radius:100px;padding:4px 14px;font-size:.7rem;font-weight:800}.status-pill.active{border-color:var(--color-primary);color:var(--color-primary);animation:2s infinite pulse-border;box-shadow:0 0 15px #06b6d433}@keyframes pulse-border{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}.status-pill.finished{color:#10b981;border-color:#10b981}.battle-progress-container{background:#ffffff14;border-radius:4px;width:140px;height:3px;margin:6px auto;position:relative;overflow:hidden}.battle-progress-fill{background:linear-gradient(90deg, var(--color-primary), #fff);height:100%;box-shadow:0 0 10px var(--color-primary);transition:width .1s linear}.tick-counter{color:#64748b;letter-spacing:2px;margin-top:4px;font-family:Courier New,Courier,monospace;font-size:.75rem}.current-tick{color:var(--color-primary);font-weight:900}.btn-tactical{color:#cbd5e1;letter-spacing:1px;background:#ffffff08;border:1px solid #ffffff14;border-radius:14px;align-items:center;gap:10px;padding:8px 18px;font-size:.75rem;font-weight:700;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex}.btn-tactical:hover{border-color:var(--color-primary);color:#fff;background:#ffffff14;transform:translate(-3px);box-shadow:0 0 20px #06b6d433}.btn-tactical span{margin-top:-2px;font-size:1.2rem;line-height:0}.loading-screen{z-index:100;background:#06080a;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.battle-page{flex-direction:column;display:flex}.scanning-line{background:linear-gradient(90deg, transparent, var(--color-primary), transparent);opacity:.3;width:100%;height:2px;animation:3s ease-in-out infinite scan;position:absolute}.loading-text{color:var(--color-primary);letter-spacing:4px;z-index:10;margin-top:20px;font-size:1.5rem;font-weight:900}.tactical-loader-container{z-index:10;width:400px;max-width:90vw;margin-top:40px}.loader-stats{color:var(--color-primary);text-transform:uppercase;letter-spacing:2px;justify-content:space-between;margin-bottom:8px;font-family:Courier New,Courier,monospace;font-size:.8rem;display:flex}.loader-bar-bg{background:#06b6d41a;border-radius:2px;width:100%;height:4px;margin-bottom:12px;position:relative;overflow:hidden}.loader-bar-fill{background:linear-gradient(90deg, var(--color-primary), #fff);height:100%;box-shadow:0 0 15px var(--color-primary);transition:width .3s ease-out}.loading-subtext{text-align:center;color:#64748b;letter-spacing:2px;text-transform:uppercase;font-size:.7rem;display:block}.user-welcome-text{letter-spacing:3px;text-shadow:0 0 20px #06b6d466;white-space:nowrap;text-overflow:ellipsis;max-width:100%;margin:0;font-size:2rem;font-weight:900;overflow:hidden}.text-gradient-red{-webkit-text-fill-color:transparent;background:linear-gradient(#fff,#ef4444);-webkit-background-clip:text;background-clip:text}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes scan{0%{top:0}to{top:100%}}@keyframes scan-avatar{0%{top:0}to{top:100%}}.loading-screen.versus-layout{z-index:9999;background:radial-gradient(circle,#1a1a2e 0%,#0f0c29 100%);flex-direction:column;justify-content:center;align-items:center;width:100vw;height:100vh;padding:2rem;display:flex;position:fixed;top:0;left:0;overflow:hidden}.versus-container{justify-content:space-around;align-items:center;width:100%;max-width:1200px;display:flex}.versus-side{flex-direction:column;align-items:center;gap:1.5rem;width:40%;display:flex}.side-commander{text-align:left}.side-opponents{text-align:right}.user-avatar-wrapper.large{border:4px solid var(--color-primary);background:#06b6d41a;border-radius:50%;width:220px;height:220px;padding:10px;position:relative;overflow:hidden}.vs-badge-large{color:#fff;text-shadow:0 0 20px var(--color-primary), 0 0 40px var(--color-primary);letter-spacing:-5px;font-size:6rem;font-style:italic;font-weight:900;transform:skew(-10deg)}.opponents-preview{flex-wrap:wrap;justify-content:center;gap:1rem;max-width:350px;display:flex}.bot-card-intro{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff08;border:1px solid #ffffff1a;border-radius:20px;width:110px;height:110px;padding:10px;transition:transform .3s}.bot-card-intro:hover{border-color:var(--color-primary);transform:scale(1.05)}.bot-card-intro img{object-fit:contain;width:100%;height:100%}.footer-loader{width:100%;max-width:800px;margin-top:30px}.user-text-details{flex-direction:column;gap:5px;display:flex}.text-right{align-items:flex-end}.animate-slide-left{animation:.8s cubic-bezier(.2,.8,.2,1) forwards slideLeft}.animate-slide-right{animation:.8s cubic-bezier(.2,.8,.2,1) forwards slideRight}.animate-pulse{animation:2s ease-in-out infinite pulse}@keyframes slideLeft{0%{opacity:0;transform:translate(-150px)}to{opacity:1;transform:translate(0)}}@keyframes slideRight{0%{opacity:0;transform:translate(150px)}to{opacity:1;transform:translate(0)}}@keyframes pulse{0%{filter:brightness();transform:scale(1)skew(-10deg)}50%{filter:brightness(1.5);transform:scale(1.1)skew(-10deg)}to{filter:brightness();transform:scale(1)skew(-10deg)}}@media (width<=768px){.loading-screen.versus-layout{justify-content:center!important;padding:5rem 1rem 1.5rem!important}.versus-container{flex-direction:column;justify-content:center;gap:1.5rem!important;transform:none!important}.side-commander,.side-opponents{text-align:center;align-items:center}.user-avatar-wrapper.large{border-width:4px!important;width:160px!important;height:160px!important;padding:6px!important}.user-welcome-text{font-size:1.1rem!important}.commander-rank{white-space:nowrap!important;letter-spacing:1px!important;font-size:.7rem!important}.vs-badge-large{font-size:3.5rem!important}.footer-loader{margin-top:50px!important}}@media (width<=480px){.user-avatar-wrapper.large{width:160px!important;height:160px!important}}@media (height<=450px){.loading-screen.versus-layout{justify-content:center!important;padding-top:0!important}.versus-container{flex-direction:row!important;justify-content:center!important;align-items:center!important;gap:.3rem!important;margin:0!important;transform:scale(.65)!important}.vs-badge-large{margin:0!important;font-size:1.2rem!important}.user-avatar-wrapper.large{border-width:2px!important;width:80px!important;height:80px!important;padding:3px!important}.user-welcome-text{margin:0!important;font-size:.8rem!important}.bot-card-intro{width:35px!important;height:35px!important}.footer-loader{max-width:250px!important;margin-top:0!important}}.lobby-page{justify-content:center;align-items:center;min-height:calc(100vh - 120px);padding:2rem;display:flex}.lobby-container{width:100%;max-width:900px;position:relative}.loading-bar-container{background:#ffffff0d;border-radius:10px;width:200px;height:4px;margin:2rem auto;overflow:hidden}.loading-bar{background:var(--color-accent);border-radius:10px;width:40%;height:100%;animation:1.5s ease-in-out infinite loading-slide}@keyframes loading-slide{0%{transform:translate(-100%)}to{transform:translate(250%)}}.lobby-header{margin-bottom:4rem}.room-id-tag{color:var(--color-accent);background:#ffffff0d;border:1px solid #7c3aed4d;border-radius:100px;padding:6px 16px;font-family:monospace;font-size:.9rem}.players-grid{justify-content:center;align-items:center;width:100%;max-width:1200px;margin:4rem auto;display:flex;position:relative}.versus-container{justify-content:space-around;align-items:center;gap:2rem;width:100%;display:flex}.versus-side{flex-direction:column;align-items:center;gap:1.5rem;width:40%;transition:all .5s cubic-bezier(.4,0,.2,1);display:flex}.side-player1{text-align:left}.side-player2{text-align:right}.user-avatar-wrapper.large{border:4px solid var(--color-primary);background:#06b6d41a;border-radius:50%;width:200px;height:200px;padding:10px;position:relative;overflow:hidden;box-shadow:0 0 30px #06b6d44d}.shadow-neon{box-shadow:0 0 30px #06b6d44d,inset 0 0 20px #06b6d433}.shadow-neon-red{box-shadow:0 0 30px #ef44444d,inset 0 0 20px #ef444433;border-color:#ef4444!important}.user-avatar-wrapper.large img{object-fit:cover;border-radius:50%;width:100%;height:100%}.avatar-scan-line{background:linear-gradient(90deg, transparent, var(--color-primary), transparent);opacity:.5;width:100%;height:2px;animation:3s ease-in-out infinite scan-avatar;position:absolute}.ready .user-avatar-wrapper{box-shadow:0 0 40px #10b98166;border-color:#10b981!important}.versus-center{z-index:10;justify-content:center;align-items:center;display:flex;position:relative}.vs-badge-large{color:#fff;text-shadow:0 0 20px var(--color-primary), 0 0 40px var(--color-primary);letter-spacing:-5px;font-size:6rem;font-style:italic;font-weight:900;animation:.5s cubic-bezier(.175,.885,.32,1.275) popVs;transform:skew(-10deg)}.user-text-details{flex-direction:column;gap:5px;width:100%;display:flex}.commander-rank{letter-spacing:4px;color:var(--color-primary);opacity:.8;font-family:Courier New,Courier,monospace;font-size:.8rem}.user-welcome-text{letter-spacing:2px;text-shadow:0 0 20px #06b6d466;text-transform:uppercase;margin:0;font-size:2.2rem;font-weight:900}.side-player2 .user-text-details{align-items:flex-end}.side-player2 .commander-rank{color:#ef4444}.side-player2 .user-welcome-text{background:linear-gradient(#fff,#ef4444);-webkit-text-fill-color:transparent;-webkit-background-clip:text}@media (width<=900px){.versus-container{flex-direction:column;gap:3rem}.versus-side{width:100%}.vs-badge-large{font-size:4rem}}.player-tag{color:var(--color-secondary);letter-spacing:3px;margin-bottom:5px;font-size:.7rem;font-weight:900;display:block}.match-telemetry-box{background:#0006;border:1px solid #ffffff1a;border-radius:8px;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:2rem;padding:20px;display:grid}.tel-item{flex-direction:column;gap:4px;display:flex}.tel-item span{color:var(--text-muted);font-size:.6rem;font-weight:700}.tel-item strong{color:#fff;font-family:monospace;font-size:.8rem}.card-glitch-line{background:linear-gradient(90deg, transparent, var(--color-secondary), transparent);width:100%;height:2px;animation:4s infinite card-glitch;position:absolute;top:0;left:-100%}@keyframes card-glitch{0%{top:20%;left:-100%}10%{top:20%;left:100%}to{top:20%;left:100%}}.pulse-text{animation:2s infinite textPulse}.invite-section{justify-content:center;margin-bottom:3rem;display:flex}.invite-card{background:#0f172a66;border:1px solid #ffffff14;border-radius:24px;align-items:center;gap:2rem;max-width:650px;padding:1rem;display:flex;overflow:hidden}.invite-visual-container{border-radius:16px;flex-shrink:0;width:180px;height:120px;position:relative;overflow:hidden}.invite-visual{object-fit:cover;filter:brightness(.8)contrast(1.2);width:100%;height:100%}.visual-overlay{background:linear-gradient(90deg,#0000,#0f172a99);position:absolute;inset:0}.invite-content{flex-direction:column;flex:1;align-items:flex-start;gap:1rem;padding-right:1.5rem;display:flex}.invite-text{color:#fff;text-align:left;margin:0;font-size:1rem;font-weight:600;line-height:1.4}.btn-tactical-copy{border:1px solid var(--color-secondary);color:var(--color-secondary);cursor:pointer;letter-spacing:1px;background:#06b6d41a;border-radius:12px;align-items:center;gap:10px;padding:12px 20px;font-size:.85rem;font-weight:700;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex}.btn-tactical-copy:hover{background:var(--color-secondary);color:#000;transform:translateY(-2px);box-shadow:0 0 25px #06b6d466}.lobby-actions-panel{flex-direction:column;align-items:center;gap:2rem;display:flex}.btn-combat-ready{cursor:pointer;background:0 0;border:none;width:280px;height:60px;padding:0;transition:all .3s;position:relative}.btn-combat-ready .btn-content{color:#fff;letter-spacing:2px;z-index:2;background:linear-gradient(90deg,#7c3aed,#9333ea);border-radius:12px;justify-content:center;align-items:center;font-size:1.2rem;font-weight:900;transition:all .3s;display:flex;position:absolute;inset:0;box-shadow:0 10px 25px #7c3aed66}.btn-combat-ready.is-active .btn-content{color:#94a3b8;box-shadow:none;background:#1e293b;border:1px solid #475569}.btn-combat-ready:hover .btn-content{filter:brightness(1.1);transform:translateY(-3px)}.btn-exit-lobby{color:var(--text-muted);cursor:pointer;background:0 0;border:none;padding:10px;font-size:.9rem;font-weight:600;transition:color .3s}.btn-exit-lobby:hover{color:#fff}.status-message{color:var(--color-secondary);letter-spacing:2px;font-size:.9rem;font-weight:700}.ready-action-wrapper{flex-direction:column;align-items:center;gap:1rem;display:flex}.no-code-warning{color:#ef4444;background:#ef44441a;border:1px solid #ef444480;border-radius:8px;align-items:center;gap:8px;padding:8px 16px;font-size:.9rem;font-weight:700;animation:2s infinite bounce;display:flex}.disabled-lock{filter:grayscale()opacity(.5);cursor:not-allowed!important}.disabled-lock:hover .btn-content{filter:none!important;transform:none!important}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}@media (width<=600px){.invite-card{flex-direction:column;gap:1.5rem;width:100%;padding:1rem}.invite-visual-container{width:100%;height:150px}.invite-content{text-align:center;align-items:center;padding-right:0}.invite-text{text-align:center}.btn-combat-ready{width:100%}}@media (width<=900px){.players-grid{flex-direction:column;gap:3rem}.vs-divider{margin:-1.5rem 0;position:relative;top:auto;left:auto;transform:none}.player-card{width:100%;max-width:400px}}@keyframes textPulse{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.waiting-pulse p{animation:1.5s ease-in-out infinite textPulse}.lobby-error-container{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:70vh;padding:4rem 2rem;animation:.8s ease-out fadeIn;display:flex}.error-visual-wrapper{background:linear-gradient(135deg,#ef444433,#0f0c29cc);border:4px solid #ef444480;border-radius:50%;justify-content:center;align-items:center;width:280px;height:280px;margin-bottom:3rem;padding:0;animation:4s ease-in-out infinite float;display:flex;position:relative;overflow:hidden;box-shadow:0 0 50px #ef444433}.broken-robot-img{object-fit:cover;filter:drop-shadow(0 0 15px #ef444466);border-radius:50%;width:100%;height:100%}.error-glitch-overlay{pointer-events:none;background:radial-gradient(circle,#ef444426 0%,#0000 70%);animation:4s infinite pulse-red;position:absolute;inset:0}.error-content-box{z-index:2;max-width:600px}.error-title{letter-spacing:.2em;background:linear-gradient(#fff,#ef4444);-webkit-text-fill-color:transparent;text-shadow:0 0 50px #ef44444d;-webkit-background-clip:text;margin-bottom:1rem;font-size:3.5rem;font-weight:900}.error-subtitle{color:#94a3b8;margin-bottom:3rem;font-size:1.1rem;line-height:1.6}.btn-premium-return{color:#ef4444;letter-spacing:2px;cursor:pointer;text-transform:uppercase;background:#ef44441a;border:1px solid #ef44444d;border-radius:12px;padding:16px 40px;font-size:1rem;font-weight:800;transition:all .3s cubic-bezier(.4,0,.2,1)}.btn-premium-return:hover{color:#fff;background:#ef4444;transform:translateY(-3px)scale(1.05);box-shadow:0 0 40px #ef444466}@keyframes float{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(-20px)rotate(-2deg)}}@keyframes pulse-red{0%,to{opacity:.3;transform:scale(1)}50%{opacity:.6;transform:scale(1.1)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (width<=600px){.error-title{font-size:2.2rem}.error-visual-wrapper{width:240px;height:240px}}.ranking-page{min-height:100vh;padding-top:40px;padding-bottom:80px}.ranking-header{margin-bottom:60px}.ranking-subtitle{color:var(--text-secondary);letter-spacing:2px;margin-top:10px;font-family:Space Mono,monospace;font-size:.9rem}.podium-section{justify-content:center;align-items:flex-end;gap:20px;margin-bottom:80px;padding:0 20px;display:flex}.podium-card{text-align:center;flex-direction:column;flex:1;align-items:center;max-width:280px;padding:40px 20px;transition:transform .3s;display:flex;position:relative}.podium-card:hover{transform:translateY(-10px)}.podium-card.rank-1{z-index:3;border-color:#ffd7004d;padding-bottom:60px;box-shadow:0 0 30px #ffd7001a}.podium-card.rank-2{z-index:2;border-color:#c0c0c04d}.podium-card.rank-3{z-index:1;border-color:#cd7f324d}.rank-badge{filter:drop-shadow(0 0 10px #ffffff4d);margin-bottom:20px;font-size:2.5rem}.rank-badge.gold{font-size:3.5rem}.player-avatar-wrapper{background:var(--glass-bg);border:2px solid var(--border-color);border-radius:50%;width:100px;height:100px;margin-bottom:20px;padding:5px;position:relative;overflow:hidden}.player-avatar-wrapper.large{border-width:3px;border-color:gold;width:140px;height:140px}.player-avatar-wrapper img{object-fit:cover;border-radius:50%;width:100%;height:100%}.avatar-scan{background:linear-gradient(#0000,#0ff3,#0000);width:100%;height:100%;animation:3s linear infinite scan-vertical;position:absolute;top:-100%;left:0}.player-name{color:var(--text-primary);margin-bottom:15px;font-family:Space Mono,monospace;font-weight:700}.player-name.champion{color:gold;text-shadow:0 0 10px #ffd7004d;font-size:1.5rem}.victory-counter{flex-direction:column;gap:2px;display:flex}.victory-counter .count{color:var(--text-primary);font-family:Inter,sans-serif;font-size:2rem;font-weight:800}.victory-counter .label{color:var(--text-secondary);letter-spacing:2px;font-size:.7rem}.victory-counter.main .count{color:gold;font-size:3rem}.ranking-list-container{max-width:900px;margin:0 auto;padding:0;overflow:hidden}.list-header{border-bottom:1px solid var(--border-color);color:var(--text-secondary);letter-spacing:1px;background:#ffffff0d;grid-template-columns:80px 1fr 120px;padding:20px 30px;font-family:Space Mono,monospace;font-size:.8rem;display:grid}.ranking-row{border-bottom:1px solid #ffffff0d;grid-template-columns:80px 1fr 120px;align-items:center;padding:15px 30px;transition:all .2s;display:grid;position:relative}.ranking-row:hover{background:#00ffff08}.row-rank{color:var(--text-secondary);font-family:Space Mono,monospace;font-size:1.1rem}.row-player{align-items:center;gap:15px;display:flex}.mini-avatar{border:1px solid var(--border-color);border-radius:50%;width:32px;height:32px}.row-player .name{color:var(--text-primary);font-weight:600}.row-wins{color:var(--accent-primary);font-family:Space Mono,monospace;font-size:1.2rem;font-weight:700}@keyframes scan-vertical{0%{top:-100%}to{top:100%}}.ranking-loader{flex-direction:column;justify-content:center;align-items:center;padding:100px 0;display:flex}.loader-glitch{border:3px solid var(--accent-primary);border-top-color:#0000;border-radius:50%;width:50px;height:50px;margin-bottom:20px;animation:1s linear infinite spin}@media (width<=768px){.podium-section{flex-direction:column;align-items:center}.podium-card.rank-1{order:-1;width:100%;max-width:100%}.podium-card{width:100%;max-width:100%}.list-header,.ranking-row{grid-template-columns:50px 1fr 80px;padding:15px}}.login-container{background:radial-gradient(circle,#1e1b4b 0%,#0f0c29 100%);flex:1;justify-content:center;align-items:center;padding:20px;display:flex}.login-card{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);text-align:center;background:#1e293bb3;border:1px solid #ffffff1a;border-radius:24px;width:100%;max-width:440px;padding:48px;animation:.6s ease-out slideUp;box-shadow:0 25px 50px -12px #00000080}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.login-header h1{color:#fff;letter-spacing:-1px;margin-bottom:8px;font-size:3rem;font-weight:900}.login-header h1 span{color:#06b6d4;text-shadow:0 0 20px #06b6d466}.login-header p{color:#94a3b8;margin-bottom:40px;font-size:1.1rem}.login-options{flex-direction:column;gap:16px;display:flex}.login-btn{cursor:pointer;border:none;border-radius:12px;justify-content:center;align-items:center;gap:12px;padding:14px;font-size:1rem;font-weight:600;transition:all .2s;display:flex}.login-btn i{font-size:1.2rem}.login-btn.google{color:#1e293b;background:#fff}.login-btn.google:hover{background:#f1f5f9;transform:translateY(-2px);box-shadow:0 10px 15px -3px #ffffff1a}.login-btn.github{color:#fff;background:#24292e}.login-btn.github:hover{background:#2f363d;transform:translateY(-2px);box-shadow:0 10px 15px -3px #0000004d}.login-footer{color:#64748b;margin-top:32px;font-size:.85rem}.login-card:hover{border-color:#06b6d44d}.multiplayer-hub{flex-direction:column;align-items:center;min-height:calc(100vh - 80px);padding-top:4rem;padding-bottom:4rem;display:flex}.hub-header h1{font-size:3.5rem;font-weight:800}.hub-grid{grid-template-columns:1fr 1fr;gap:2.5rem;width:100%;max-width:900px;margin-top:2rem;display:grid}.login-warning-box{background:#f59e0b1a;border:1px solid #f59e0b4d;border-radius:12px;justify-content:center;align-items:center;gap:1.5rem;max-width:600px;margin:2rem auto 0;padding:1rem 2rem;display:flex}.login-warning-box p{color:#f59e0b;margin:0;font-weight:500}.warning-icon{font-size:1.5rem}.hub-card button:disabled{opacity:.5;cursor:not-allowed;filter:grayscale()}.hub-card{text-align:center;cursor:pointer;border-radius:32px;flex-direction:column;align-items:center;padding:3rem;transition:all .4s cubic-bezier(.4,0,.2,1);display:flex}.hub-card:hover{border-color:#7c3aed66;transform:translateY(-10px);box-shadow:0 20px 40px #0000004d}.hub-card.highlight{background:linear-gradient(135deg,#7c3aed1a,#1e293b66);border-color:#7c3aed33}.card-icon{margin-bottom:1.5rem;font-size:3.5rem}.hub-card h2{margin-bottom:1rem;font-size:1.8rem;font-weight:700}.hub-card p{color:var(--text-muted);font-size:1rem;line-height:1.5}.room-input{color:#fff;text-align:center;background:#0003;border:1px solid #ffffff1a;border-radius:12px;width:100%;margin-bottom:1.5rem;padding:14px 20px;font-family:monospace;font-size:1.1rem;transition:all .3s}.room-input:focus{border-color:var(--color-primary);background:#0000004d;outline:none;box-shadow:0 0 15px #7c3aed33}@media (width<=768px){.hub-grid{grid-template-columns:1fr;padding:0 1rem}.hub-card{padding:2rem}}.how-to-play-page{max-width:1000px;padding:4rem 20px}.guide-header{margin-bottom:2rem}.guide-header h1{margin-bottom:1rem;font-size:4rem}.guide-header .subtitle{color:var(--text-muted);font-size:1.2rem}.guide-content{flex-direction:column;gap:2rem;display:flex}.guide-section{border-radius:32px;align-items:center;gap:3rem;padding:3rem;transition:transform .3s;display:flex}.guide-section:hover{border-color:var(--color-primary);transform:translateY(-5px)}.guide-section.reverse{flex-direction:row-reverse}.guide-visual{flex:1;justify-content:center;align-items:center;display:flex}.guide-visual img{border-radius:20px;width:100%;max-width:300px;height:auto}.guide-text{flex:1.5}.guide-text h2{color:var(--color-secondary);margin-bottom:1.5rem;font-size:2.5rem}.guide-text p{color:var(--text-secondary);margin-bottom:1.5rem;font-size:1.1rem;line-height:1.8}.visual-circle{border:4px solid var(--color-primary);background:#7c3aed1a;border-radius:50%;justify-content:center;align-items:center;width:200px;height:200px;display:flex;position:relative;overflow:hidden}.tick-counter-visual{color:#fff;z-index:2;font-family:monospace;font-size:1.5rem;font-weight:900}.radar-ping{background:radial-gradient(circle, var(--color-primary) 0%, transparent 70%);border-radius:50%;width:100%;height:100%;animation:2s ease-out infinite ping;position:absolute}.energy-bar-preview{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:100px;width:100%;height:30px;position:relative;overflow:hidden}.energy-fill{background:linear-gradient(90deg,#f59e0b,#ef4444);width:70%;height:100%;animation:2s infinite energy-pulse;box-shadow:0 0 15px #ef444480}.energy-label{color:#fff;text-shadow:0 0 5px #00000080;font-size:.8rem;font-weight:900;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.code-example{background:#0d1117;border:1px solid #ffffff1a;border-radius:16px;padding:1.5rem}.code-example pre{margin:0}.code-example code{color:#7ee787;font-family:Fira Code,monospace;font-size:1rem}.guide-footer{justify-content:center;margin-top:2rem;margin-bottom:2rem;display:flex}.api-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:0;display:grid}.api-card{border-radius:24px;flex-direction:column;padding:2rem;display:flex}.api-card h3{color:#fff;align-items:center;gap:10px;margin-bottom:.5rem;font-size:1.5rem;display:flex}.api-subtitle{color:var(--text-muted)!important;margin-bottom:1.5rem!important;font-size:.85rem!important}.api-list{flex-direction:column;gap:1rem;padding:0;list-style:none;display:flex}.api-list li{color:var(--text-secondary);font-size:.9rem;line-height:1.4}.api-list code{color:var(--color-secondary);background:#06b6d41a;border-radius:4px;padding:2px 6px;font-family:Fira Code,monospace;font-weight:700}.mb-5{margin-bottom:0}.btn-lg{letter-spacing:2px;padding:1.5rem 4rem;font-size:1.2rem}@keyframes ping{0%{opacity:1;transform:scale(0)}to{opacity:0;transform:scale(2)}}@keyframes energy-pulse{0%,to{opacity:.8}50%{opacity:1}}@media (width<=768px){.guide-section,.guide-section.reverse{text-align:center;flex-direction:column;padding:2rem}.guide-header h1{font-size:2.5rem}}.counter{color:var(--accent);background:var(--accent-bg);border:2px solid #0000;border-radius:5px;margin-bottom:24px;padding:5px 10px;font-size:16px;transition:border-color .3s}.counter:hover{border-color:var(--accent-border)}.counter:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.hero{position:relative}.hero .base,.hero .framework,.hero .vite{margin:0 auto;inset-inline:0}.hero .base{z-index:0;width:170px;position:relative}.hero .framework,.hero .vite{position:absolute}.hero .framework{z-index:1;height:28px;top:34px;transform:perspective(2000px)rotate(300deg)rotateX(44deg)rotateY(39deg)scale(1.4)}.hero .vite{z-index:0;width:auto;height:26px;top:107px;transform:perspective(2000px)rotate(300deg)rotateX(40deg)rotateY(39deg)scale(.8)}#center{flex-direction:column;flex-grow:1;place-content:center;place-items:center;gap:25px;display:flex}@media (width<=1024px){#center{gap:18px;padding:32px 20px 24px}}#next-steps{border-top:1px solid var(--border);text-align:left;display:flex}#next-steps>div{flex:1 1 0;padding:32px}@media (width<=1024px){#next-steps>div{padding:24px 20px}}#next-steps .icon{width:22px;height:22px;margin-bottom:16px}@media (width<=1024px){#next-steps{text-align:center;flex-direction:column}}#docs{border-right:1px solid var(--border)}@media (width<=1024px){#docs{border-right:none;border-bottom:1px solid var(--border)}}#next-steps ul{gap:8px;margin:32px 0 0;padding:0;list-style:none;display:flex}#next-steps ul .logo{height:18px}#next-steps ul a{color:var(--text-h);background:var(--social-bg);border-radius:6px;align-items:center;gap:8px;padding:6px 12px;font-size:16px;text-decoration:none;transition:box-shadow .3s;display:flex}#next-steps ul a:hover{box-shadow:var(--shadow)}#next-steps ul a .button-icon{width:18px;height:18px}@media (width<=1024px){#next-steps ul{flex-wrap:wrap;justify-content:center;margin-top:20px}#next-steps ul li{flex:calc(50% - 8px)}#next-steps ul a{box-sizing:border-box;justify-content:center;width:100%}}#spacer{border-top:1px solid var(--border);height:88px}@media (width<=1024px){#spacer{height:48px}}.ticks{width:100%;position:relative}.ticks:before,.ticks:after{content:"";border:5px solid #0000;position:absolute;top:-4.5px}.ticks:before{border-left-color:var(--border);left:0}.ticks:after{border-right-color:var(--border);right:0}:root{--bg-primary:#0f0c29;--bg-secondary:#302b63;--bg-tertiary:#24243e;--color-primary:#7c3aed;--color-secondary:#06b6d4;--color-accent:#10b981;--color-danger:#ef4444;--color-warning:#f59e0b;--text-primary:#f8fafc;--text-secondary:#cbd5e1;--text-muted:#94a3b8;--border-glow:0 0 10px #06b6d480;--glass-bg:#24243e99;--glass-border:#ffffff1a;--glass-shadow:0 4px 30px #0000001a}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-primary);background:linear-gradient(135deg, var(--bg-primary), var(--bg-secondary), var(--bg-tertiary));color:var(--text-primary);min-height:100vh;font-family:Outfit,sans-serif;overflow-x:hidden}.app-container{flex-direction:column;width:100%;max-width:100vw;min-height:100vh;display:flex;overflow-x:hidden}.main-content,.main-content-full{flex-direction:column;flex:1;width:100%;display:flex}.main-content{max-width:100vw;overflow-x:hidden}.main-content-full{height:100vh;margin:0;padding:0}@media (width<=768px){.main-content{margin-top:0;padding-top:0;padding-bottom:8rem}}@media (height<=450px){.main-content{padding-top:0}}a{color:var(--color-secondary);text-decoration:none;transition:all .3s}a:hover{color:var(--color-accent);text-shadow:0 0 8px var(--color-accent)}.glass-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:16px}.btn{cursor:pointer;border:none;border-radius:8px;outline:none;justify-content:center;align-items:center;padding:.75rem 1.5rem;font-family:Outfit,sans-serif;font-weight:600;transition:all .3s;display:inline-flex}.btn-primary{background:linear-gradient(90deg, var(--color-primary), #9333ea);color:#fff;box-shadow:0 4px 15px #7c3aed66}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #7c3aed99}.btn-secondary{color:var(--color-secondary);border:2px solid var(--color-secondary);background:0 0}.btn-secondary:hover{background:#06b6d41a;transform:translateY(-2px);box-shadow:0 0 15px #06b6d44d}.btn-accent{background:var(--color-accent);color:#000}.btn-accent:hover{box-shadow:0 0 15px var(--color-accent);transform:translateY(-2px)}.btn:disabled{opacity:.6;cursor:not-allowed;box-shadow:none!important;transform:none!important}.animate-fade-in{animation:.5s forwards fadeIn}@keyframes pulse-glow{0%{box-shadow:0 0 10px #06b6d480}50%{box-shadow:0 0 20px #06b6d4cc}to{box-shadow:0 0 10px #06b6d480}}.glow-border{border:1px solid var(--color-secondary);animation:2s infinite pulse-glow}h1,h2,h3,h4,h5,h6{letter-spacing:.5px;font-weight:800}h1{background:linear-gradient(to right, var(--color-secondary), var(--color-primary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:1rem;font-size:3.5rem;line-height:1.2}h1:focus,h1:active,.navbar-brand:focus,.navbar-brand:active{color:inherit;-webkit-tap-highlight-color:transparent;outline:none}@media (width<=768px){h1{font-size:2.5rem}}@media (width<=480px){h1{font-size:2rem}}h2{margin-bottom:.75rem;font-size:2.5rem}@media (width<=768px){h2{font-size:1.8rem}}@media (width<=480px){h2{font-size:1.5rem}}.text-gradient{background:linear-gradient(to right, var(--color-secondary), var(--color-accent));-webkit-text-fill-color:transparent;-webkit-background-clip:text}.container{box-sizing:border-box;width:100%;max-width:1200px;margin:0 auto;padding:0 20px}.flex-center{justify-content:center;align-items:center;display:flex}