:root{--bg-dark:#07080b;--bg-card:rgba(18,22,33,0.85);--bg-glass:rgba(10,12,18,0.75);--border-glass:rgba(255,255,255,0.08);--neon-cyan:#00f3ff;--neon-purple:#9333ea;--neon-green:#22c55e;--neon-red:#ef4444;--neon-amber:#facc15;--color-knight:#a855f7;--color-soldier:#00f3ff;--color-mage:#facc15;--font-primary:'Outfit',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--font-heading:'Orbitron',sans-serif;--font-mono:'JetBrains Mono',monospace;--ts-normal:all 0.3s cubic-bezier(0.25,0.8,0.25,1);--ts-spring:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275)}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}body,html{width:100%;height:100%;background-color:#020203;color:#ffffff;font-family:var(--font-primary);overflow:hidden;display:flex;justify-content:center;align-items:center}#game-viewport{position:relative;width:100%;height:100%;max-width:460px;max-height:920px;background-color:var(--bg-dark);box-shadow:0 25px 50px -12px rgba(0,0,0,0.8),0 0 40px rgba(0,243,255,0.1);display:flex;flex-direction:column;overflow:hidden;border-radius:0}@media (min-width:768px){#game-viewport{border-radius:24px;border:2px solid rgba(255,255,255,0.05)}}#battlefield-container{position:relative;width:100%;height:72%;background:radial-gradient(circle at center,#111422 0%,#080911 100%);overflow:hidden}#phaser-game-container{width:100%;height:100%}#battle-stats-overlay{position:absolute;top:8px;left:0;right:0;padding:0 16px;display:flex;justify-content:space-between;pointer-events:none;z-index:10}.stat-pill{background:var(--bg-glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--border-glass);padding:3px 10px;border-radius:30px;display:flex;flex-direction:column;align-items:center;box-shadow:0 8px 32px 0 rgba(0,0,0,0.3)}.stat-pill .label{font-family:var(--font-heading);font-size:0.65rem;font-weight:700;letter-spacing:1px;color:rgba(255,255,255,0.5);margin-bottom:2px}.stat-pill .value{font-family:var(--font-mono);font-size:1.1rem;font-weight:700;color:var(--neon-cyan);text-shadow:0 0 8px rgba(0,243,255,0.4)}#wave-pill .value{color:var(--neon-amber);text-shadow:0 0 8px rgba(250,204,21,0.4)}#hud-control-zone{height:24%;background:linear-gradient(180deg,rgba(13,16,26,0.95) 0%,rgba(5,7,12,0.98) 100%);border-top:2px solid rgba(0,243,255,0.2);padding:3px 8px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:inset 0 10px 20px rgba(0,0,0,0.4);z-index:5}#base-health-container{width:100%;margin-bottom:2px}.base-health-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}.base-label{font-family:var(--font-heading);font-size:0.7rem;font-weight:700;letter-spacing:0.5px;color:rgba(255,255,255,0.7)}.base-value{font-family:var(--font-mono);font-size:0.8rem;font-weight:700;color:var(--neon-red);text-shadow:0 0 6px rgba(239,68,68,0.4)}.base-health-bar-bg{width:100%;height:8px;background-color:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:4px;overflow:hidden}#base-health-bar-fill{height:100%;background:linear-gradient(90deg,#ef4444 0%,#b91c1c 100%);box-shadow:0 0 10px rgba(239,68,68,0.6);transition:width 0.3s cubic-bezier(0.1,0.8,0.1,1)}#hero-slots-container{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;flex-grow:1;margin:4px 0}.hero-slot-card{background:var(--bg-card);border:1px solid var(--border-glass);border-radius:12px;padding:4px 3px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;transition:var(--ts-spring);position:relative;overflow:hidden}.hero-slot-card:hover{border-color:rgba(255,255,255,0.15)}#hero-slot-knight{border-left:2px solid var(--color-knight)}#hero-slot-soldier{border-left:2px solid var(--color-soldier)}#hero-slot-mage{border-left:2px solid var(--color-mage)}.hero-slot-card.level-up-pulse{animation:levelUpCardGlow 1.4s ease-out}@keyframes levelUpCardGlow{0%{box-shadow:0 0 0 rgba(250,204,21,0);border-color:rgba(255,255,255,0.08)}30%{box-shadow:0 0 20px #facc15,inset 0 0 15px #facc15;border-color:#facc15;transform:scale(1.05)}100%{box-shadow:0 0 0 rgba(250,204,21,0);border-color:rgba(255,255,255,0.08);transform:scale(1)}}.hero-avatar-wrapper{position:relative;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.1);display:flex;justify-content:center;align-items:center;margin-bottom:0px}.hero-avatar{width:36px;height:36px;border-radius:50%;background-size:cover;background-position:center;background-repeat:no-repeat;transform:scale(1.1)}.knight-avatar{background-image:url('assets/units/knight_sword_thumb.webp')}.soldier-avatar{background-image:url('assets/units/soldier_rifle_thumb.webp')}.mage-avatar{background-image:url('assets/units/mage_staff_thumb.webp')}.hero-lane-indicator{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);background-color:rgba(0,0,0,0.85);color:var(--neon-cyan);font-family:var(--font-heading);font-size:0.45rem;font-weight:900;padding:0px 4px;border-radius:6px;border:1px solid rgba(0,243,255,0.3);white-space:nowrap;letter-spacing:0.5px}#hero-slot-knight .hero-lane-indicator{color:var(--color-knight);border-color:rgba(168,85,247,0.3)}#hero-slot-soldier .hero-lane-indicator{color:var(--color-soldier);border-color:rgba(0,243,255,0.3)}#hero-slot-mage .hero-lane-indicator{color:var(--color-mage);border-color:rgba(250,204,21,0.3)}.hero-header-row{display:flex;width:100%;justify-content:space-between;align-items:center;margin-bottom:2px}.hero-name{font-family:var(--font-heading);font-size:0.65rem;font-weight:900;letter-spacing:0.5px;color:#ffffff}.hero-level{font-family:var(--font-heading);font-size:0.55rem;font-weight:900;color:#000000;background-color:#facc15;padding:1px 4px;border-radius:4px;box-shadow:0 0 5px rgba(250,204,21,0.5);white-space:nowrap}.xp-bar-container{width:100%;height:10px;background-color:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:4px;overflow:hidden;position:relative;margin:2px 0;display:flex;align-items:center;justify-content:center}.xp-bar-fill{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,#0077ff 0%,#00f3ff 100%);box-shadow:0 0 6px rgba(0,243,255,0.4);transition:width 0.3s ease-out}.xp-text{position:relative;font-family:var(--font-mono);font-size:0.5rem;font-weight:800;color:#ffffff;text-shadow:0 1px 3px rgba(0,0,0,0.9);z-index:2;pointer-events:none}.hero-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);width:100%;background:rgba(0,0,0,0.25);border-radius:6px;border:1px solid rgba(255,255,255,0.03);padding:2px 1px;margin:1px 0;gap:2px}.stat-item{display:flex;flex-direction:column;align-items:center;justify-content:center}.stat-lbl{font-family:var(--font-primary);font-size:0.45rem;font-weight:700;color:rgba(255,255,255,0.4)}.stat-val{font-family:var(--font-mono);font-size:0.55rem;font-weight:900;color:#ffffff}#hero-slot-knight .stat-val{color:var(--color-knight)}#hero-slot-soldier .stat-val{color:var(--color-soldier)}#hero-slot-mage .stat-val{color:var(--color-mage)}.energy-bar-bg{width:100%;height:4px;background-color:rgba(255,255,255,0.05);border-radius:2px;overflow:hidden;margin-top:2px}.energy-bar-fill{height:100%;width:0%;border-radius:2px;transition:width 0.2s linear}#hero-slot-knight .energy-bar-fill{background:var(--color-knight);box-shadow:0 0 6px var(--color-knight)}#hero-slot-soldier .energy-bar-fill{background:var(--color-soldier);box-shadow:0 0 6px var(--color-soldier)}#hero-slot-mage .energy-bar-fill{background:var(--color-mage);box-shadow:0 0 6px var(--color-mage)}.hero-slot-card.charged{cursor:pointer;border-width:2px !important;animation:fullCardPulseGlow 0.8s infinite alternate ease-in-out}#hero-slot-knight.charged{border-color:var(--color-knight) !important;--glow-color:rgba(168,85,247,0.85)}#hero-slot-soldier.charged{border-color:var(--color-soldier) !important;--glow-color:rgba(0,243,255,0.85)}#hero-slot-mage.charged{border-color:var(--color-mage) !important;--glow-color:rgba(250,204,21,0.85)}.hero-slot-card.charged::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent);animation:readySlide 1.5s infinite linear;pointer-events:none;z-index:10}.hero-slot-card.charged:active{transform:scale(0.96)}@keyframes fullCardPulseGlow{0%{background-color:rgba(18,22,33,0.85);box-shadow:0 0 10px var(--glow-color),inset 0 0 5px var(--glow-color);filter:brightness(1.0)}100%{background-color:rgba(30,36,58,0.95);box-shadow:0 0 25px var(--glow-color),0 0 45px var(--glow-color),inset 0 0 15px var(--glow-color);filter:brightness(1.35)}}#hud-hint-bar{font-family:var(--font-heading);font-size:0.5rem;font-weight:700;color:rgba(255,255,255,0.35);text-align:center;letter-spacing:0.5px;margin-top:4px}#overlay-screen{position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(2,3,5,0.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:100;transition:opacity 0.4s ease}.menu-panel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:88%;max-width:400px;background:var(--bg-card);border:1px solid var(--border-glass);border-radius:20px;padding:28px 24px;display:flex;flex-direction:column;align-items:center;z-index:101;box-shadow:0 20px 60px rgba(0,0,0,0.8);transition:var(--ts-spring)}.hidden{opacity:0 !important;pointer-events:none !important;display:none !important}.game-logo-wrapper{text-align:center;margin-bottom:24px}.logo-sub{font-family:var(--font-heading);font-size:0.85rem;font-weight:700;letter-spacing:3px;color:rgba(255,255,255,0.4);margin-bottom:4px}.logo-main{font-family:var(--font-heading);font-size:2.3rem;font-weight:900;line-height:1;letter-spacing:1px;color:#ffffff}.logo-main .highlight{color:var(--neon-cyan);text-shadow:0 0 15px rgba(0,243,255,0.5)}.logo-bar{width:60px;height:4px;background-color:var(--neon-cyan);margin:12px auto 0 auto;border-radius:2px;box-shadow:0 0 8px var(--neon-cyan)}.game-description{font-size:0.8rem;line-height:1.5;color:rgba(255,255,255,0.6);text-align:center;margin-bottom:24px}.hero-showcase-preview{display:flex;gap:16px;margin-bottom:28px}.showcase-item{display:flex;flex-direction:column;align-items:center}.showcase-pic{width:48px;height:48px;border-radius:50%;background-size:cover;background-position:center;margin-bottom:6px;border:2px solid rgba(255,255,255,0.1)}.showcase-item.knight .showcase-pic{border-color:var(--color-knight)}.showcase-item.soldier .showcase-pic{border-color:var(--color-soldier)}.showcase-item.mage .showcase-pic{border-color:var(--color-mage)}.showcase-item span{font-family:var(--font-heading);font-size:0.6rem;font-weight:700;color:rgba(255,255,255,0.5)}.menu-btn{width:100%;padding:14px 20px;font-family:var(--font-heading);font-size:0.95rem;font-weight:700;letter-spacing:1px;border-radius:12px;cursor:pointer;margin-bottom:12px;transition:var(--ts-spring);display:flex;justify-content:center;align-items:center}.primary-btn{background:linear-gradient(90deg,#00c3ff 0%,#0077ff 100%);border:none;color:#ffffff;box-shadow:0 8px 24px rgba(0,119,255,0.4)}.primary-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,119,255,0.6)}.primary-btn:active{transform:translateY(1px)}.secondary-btn{background-color:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.7)}.secondary-btn:hover{background-color:rgba(255,255,255,0.08);color:#ffffff}.high-score-display{font-family:var(--font-heading);font-size:0.75rem;font-weight:700;color:rgba(255,255,255,0.4);letter-spacing:1px;margin-top:12px}#best-score-display{color:var(--neon-amber);font-family:var(--font-mono)}.outcome-header{text-align:center;margin-bottom:24px}.outcome-title-large{font-family:var(--font-heading);font-size:1.8rem;font-weight:900;color:var(--neon-red);text-shadow:0 0 15px rgba(239,68,68,0.4);letter-spacing:1px}.outcome-bar{width:40px;height:4px;background-color:var(--neon-red);margin:10px auto 0 auto;border-radius:2px}.final-stats-container{width:100%;background-color:rgba(0,0,0,0.2);border-radius:12px;border:1px solid rgba(255,255,255,0.05);padding:16px;margin-bottom:20px}.stat-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.05)}.stat-row:last-child{border-bottom:none}.stat-row .stat-label{font-size:0.75rem;color:rgba(255,255,255,0.5);font-weight:600}.stat-row .stat-val{font-family:var(--font-mono);font-size:0.95rem;font-weight:700}.stat-row .stat-val.highlight{color:#ffffff}.highlight-row{background-color:rgba(0,243,255,0.05);margin:6px -16px -16px -16px;padding:12px 16px;border-radius:0 0 12px 12px}.highlight-row .stat-label{color:var(--neon-cyan) !important;font-family:var(--font-heading);font-size:0.8rem;font-weight:700}.highlight-row .stat-val{color:var(--neon-cyan);font-size:1.1rem !important;text-shadow:0 0 8px rgba(0,243,255,0.4)}#new-high-score-badge{background-color:var(--neon-amber);color:#000000;font-family:var(--font-heading);font-size:0.75rem;font-weight:900;padding:4px 12px;border-radius:20px;margin-bottom:20px;box-shadow:0 0 12px rgba(250,204,21,0.4)}#loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 50% 40%,#0d0e1a 0%,#020203 100%);display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity 0.5s ease,visibility 0.5s ease}#loading-overlay.loaded{opacity:0;visibility:hidden;pointer-events:none}.loader-content{display:flex;flex-direction:column;align-items:center;gap:16px}.loader-spinner{position:relative;width:56px;height:56px;margin-bottom:8px}.loader-ring{position:absolute;width:100%;height:100%;border-radius:50%;border:3px solid transparent;border-top-color:#00f3ff;border-bottom-color:#a855f7;animation:spin 1.2s cubic-bezier(0.5,0,0.5,1) infinite}.loader-ring-inner{position:absolute;top:7px;left:7px;right:7px;bottom:7px;border-radius:50%;border:2px solid transparent;border-left-color:#facc15;border-right-color:#00f3ff;animation:spin 0.8s cubic-bezier(0.5,0,0.5,1) infinite reverse}.loader-text{display:flex;flex-direction:column;align-items:center;gap:4px}.loader-title{font-family:'Orbitron',sans-serif;font-size:1.1rem;font-weight:900;letter-spacing:3px;color:#ffffff;text-shadow:0 0 12px rgba(0,243,255,0.4)}.loader-sub{font-family:'Outfit',sans-serif;font-size:0.7rem;font-weight:400;letter-spacing:2px;color:rgba(255,255,255,0.4)}.loader-bar-bg{width:200px;height:3px;background:rgba(255,255,255,0.06);border-radius:2px;overflow:hidden}.loader-bar-fill{width:0%;height:100%;background:linear-gradient(90deg,#00f3ff,#a855f7);border-radius:2px;transition:width 0.3s ease;box-shadow:0 0 8px rgba(0,243,255,0.5)}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes pulseGlow{from{box-shadow:0 0 4px rgba(255,255,255,0.2)}to{box-shadow:0 0 12px currentColor}}@keyframes readySlide{0%{transform:translateX(-100%) skewX(-20deg)}100%{transform:translateX(200%) skewX(-20deg)}}.base-heal-gain{position:absolute;top:-24px;right:0;font-family:var(--font-mono);font-size:0.8rem;font-weight:800;color:var(--neon-green);text-shadow:0 0 8px rgba(34,197,94,0.6);pointer-events:none;animation:floatHeal 1.6s ease-out forwards}@keyframes floatHeal{0%{transform:translateY(0) scale(0.8);opacity:0}15%{transform:translateY(-8px) scale(1.1);opacity:1}80%{transform:translateY(-16px) scale(1);opacity:1}100%{transform:translateY(-26px) scale(0.9);opacity:0}}.pulse-wave{animation:waveFlash 0.8s ease}@keyframes waveFlash{0%{transform:scale(1);color:var(--neon-amber)}50%{transform:scale(1.3);color:#ffffff;text-shadow:0 0 12px var(--neon-amber)}100%{transform:scale(1);color:var(--neon-amber)}}#wave-progress-container{flex-grow:1;margin:0 12px;background:var(--bg-glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--border-glass);padding:3px 10px;border-radius:12px;display:flex;flex-direction:column;justify-content:center;box-shadow:0 8px 32px 0 rgba(0,0,0,0.3);max-width:220px;pointer-events:none}.progress-bar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px}.progress-label{font-family:var(--font-heading);font-size:0.52rem;font-weight:700;letter-spacing:0.5px;color:rgba(255,255,255,0.45)}.progress-value{font-family:var(--font-mono);font-size:0.65rem;font-weight:700;color:var(--neon-cyan);text-shadow:0 0 6px rgba(0,243,255,0.3)}.progress-bar-bg{width:100%;height:5px;background-color:rgba(255,255,255,0.05);border-radius:3px;overflow:hidden}#wave-progress-fill{height:100%;background:linear-gradient(90deg,var(--neon-cyan) 0%,#0077ff 100%);box-shadow:0 0 6px var(--neon-cyan);transition:width 0.25s ease-out}#main-footer{width:100%;background:#0d0e12;border-top:1px solid #1f2330;height:4%;min-height:32px;padding:0 16px;display:flex;justify-content:space-between;align-items:center;font-family:'Outfit',sans-serif;font-size:0.68rem;letter-spacing:0.03em;color:#718096;z-index:1000;box-sizing:border-box}.footer-left{display:flex;align-items:center;gap:6px}.footer-brand{font-weight:700;color:var(--neon-cyan);text-shadow:0 0 6px rgba(0,243,255,0.3)}.footer-separator{color:rgba(255,255,255,0.1)}.footer-dev{color:#718096}.glow-text-lime{color:#22C55E;text-shadow:0 0 4px rgba(34,197,94,0.4)}.footer-right{display:flex;align-items:center;gap:10px}.footer-contact-title{font-weight:600;color:#718096}.footer-link{color:#a0aec0;display:inline-flex;align-items:center;justify-content:center;transition:all 0.25s cubic-bezier(0.4,0,0.2,1);cursor:pointer}.footer-link:hover{color:#22C55E;transform:translateY(-2px);filter:drop-shadow(0 0 6px rgba(34,197,94,0.7))}.footer-icon-svg{display:block;pointer-events:none}