*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,sans-serif;background:#0a0a1a;color:#eee;overflow-x:hidden}#app{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh}.page{display:none;width:100%;max-width:800px;padding:2rem 1rem;flex-direction:column;align-items:center}.page.active{display:flex}#loading-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:#0a0a1a;display:flex;align-items:center;justify-content:center;z-index:9999}.loading-text{font-size:2rem;color:#eee}.title-container{text-align:center;margin-bottom:3rem}.game-title{font-size:4rem;font-weight:900;letter-spacing:.15em;color:#e0e0ff;text-shadow:0 0 20px rgba(100,140,255,.6),0 0 40px rgba(100,140,255,.3);animation:titlePulse 3s ease-in-out infinite}.title-accent{color:#5af;text-shadow:0 0 20px rgba(85,170,255,.8),0 0 60px rgba(85,170,255,.4)}.subtitle{font-size:1.1rem;letter-spacing:.4em;text-transform:uppercase;color:#889;margin-top:.5rem}@keyframes titlePulse{0%,to{text-shadow:0 0 20px rgba(100,140,255,.6),0 0 40px rgba(100,140,255,.3)}50%{text-shadow:0 0 30px rgba(100,140,255,.8),0 0 60px rgba(100,140,255,.5)}}.main-nav{display:flex;flex-direction:column;align-items:center;gap:1rem}.nav-row{display:flex;gap:.75rem}.btn{border:none;cursor:pointer;font-family:inherit;font-weight:600;letter-spacing:.05em;border-radius:6px;transition:transform .15s,box-shadow .15s,background .2s}.btn:active{transform:scale(.96)}.btn-primary{background:linear-gradient(135deg,#36f,#5af);color:#fff;padding:.9rem 3rem;font-size:1.3rem;box-shadow:0 4px 20px #55aaff4d}.btn-primary:hover{box-shadow:0 6px 30px #55aaff80;transform:translateY(-2px)}.btn-large{min-width:220px}.btn-secondary{background:#ffffff14;color:#ccd;padding:.65rem 1.5rem;font-size:.95rem;border:1px solid rgba(255,255,255,.1)}.btn-secondary:hover{background:#ffffff24;border-color:#fff3;transform:translateY(-1px)}.btn-vr{background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;padding:.7rem 2rem;font-size:1rem;margin-top:.5rem;box-shadow:0 4px 16px #7c3aed4d}.btn-vr:hover{box-shadow:0 6px 24px #7c3aed80;transform:translateY(-2px)}.btn-back{background:transparent;color:#889;padding:.5rem 1rem;font-size:.9rem}.btn-back:hover{color:#eee}.star-total{margin-top:2rem;font-size:1.1rem;color:gold}.star-total-small{font-size:.95rem;color:gold}.page-header{display:flex;align-items:center;justify-content:space-between;width:100%;margin-bottom:1.5rem}.page-header h2{font-size:1.4rem;font-weight:700;letter-spacing:.05em}.map-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;width:100%}.map-card{background:#ffffff0d;border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:1.2rem;cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s;position:relative;overflow:hidden}.map-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--card-accent, #5af),transparent);opacity:0;transition:opacity .2s}.map-card:hover:before{opacity:1}.map-card:hover{transform:translateY(-4px);box-shadow:0 8px 30px #0006;border-color:#ffffff26}.map-card:active{transform:translateY(-2px) scale(.98)}.map-card.locked{opacity:.5;cursor:default}.map-card.locked:hover{transform:none;box-shadow:none;border-color:#ffffff14}.map-card-name{font-size:1.15rem;font-weight:700;margin-bottom:.5rem}.map-card-difficulty{display:inline-block;padding:.15rem .6rem;border-radius:4px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.6rem}.difficulty-easy{background:#1a4d2e;color:#4ade80}.difficulty-medium{background:#4a3f1a;color:#fbbf24}.difficulty-hard{background:#4a1a1a;color:#f87171}.difficulty-expert{background:#3b1a4a;color:#c084fc}.map-card-stars{font-size:1.1rem;letter-spacing:.1em;margin-bottom:.3rem}.star-filled{color:gold}.star-empty{color:#333}.map-card-lock{display:flex;align-items:center;gap:.4rem;font-size:.85rem;color:#889;margin-top:.3rem}.lock-icon{font-size:1rem}.settings-sections{width:100%;display:flex;flex-direction:column;gap:1.5rem}.settings-section{background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:1.2rem}.settings-section-title{font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:#5af;margin-bottom:1rem}.setting-row{display:flex;align-items:center;justify-content:space-between;padding:.6rem 0}.setting-row+.setting-row{border-top:1px solid rgba(255,255,255,.05)}.setting-row label:first-child{flex:0 0 140px;font-size:.95rem;color:#ccd}.setting-row input[type=range]{flex:1;margin:0 .75rem;accent-color:#5af}.range-value{flex:0 0 30px;text-align:right;font-size:.9rem;color:#889;font-variant-numeric:tabular-nums}.toggle-switch{position:relative;width:44px;height:24px;cursor:pointer}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;inset:0;background:#ffffff1f;border-radius:12px;transition:background .2s}.toggle-slider:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;background:#ccd;border-radius:50%;transition:transform .2s,background .2s}.toggle-switch input:checked+.toggle-slider{background:#5af6}.toggle-switch input:checked+.toggle-slider:after{transform:translate(20px);background:#5af}.stats-star-progress{width:100%;margin-bottom:1.5rem}.star-progress-label{display:flex;justify-content:space-between;font-size:.9rem;color:#ccd;margin-bottom:.4rem}.star-progress-bar{width:100%;height:10px;background:#ffffff14;border-radius:5px;overflow:hidden}.star-progress-fill{height:100%;background:linear-gradient(90deg,#fbbf24,gold);border-radius:5px;transition:width 1s ease-out}.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem;width:100%}.stat-card{background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:1.2rem;text-align:center;transition:transform .2s,box-shadow .2s}.stat-card:hover{transform:translateY(-3px);box-shadow:0 6px 20px #0000004d}.stat-card-icon{font-size:2rem;margin-bottom:.5rem}.stat-card-value{font-size:1.8rem;font-weight:700;color:#e0e0ff;font-variant-numeric:tabular-nums;margin-bottom:.3rem}.stat-card-label{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:#889}.achievement-count{font-size:.9rem;color:#aab}.achievement-list{display:flex;flex-direction:column;gap:.75rem;width:100%}.achievement-card{display:flex;align-items:center;gap:1rem;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:1rem;opacity:.6}.achievement-card.unlocked{opacity:1;border-color:#ffd7004d;background:#ffd7000f}.achievement-icon{font-size:2rem;flex-shrink:0}.achievement-info{flex:1;display:flex;flex-direction:column;gap:.25rem}.achievement-desc{font-size:.8rem;color:#889}.achievement-bar{height:6px;background:#ffffff1a;border-radius:3px;overflow:hidden;margin-top:.25rem}.achievement-bar-fill{height:100%;background:linear-gradient(90deg,#fbbf24,#f59e0b);border-radius:3px;transition:width .3s ease}.achievement-progress{font-size:.75rem;color:#889}.deck-instructions{font-size:.9rem;color:#889;margin-bottom:1.2rem;text-align:center}.deck-count{font-size:.9rem;color:#5af;font-weight:600}.deck-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem;width:100%;margin-bottom:1.5rem}.deck-card{background:#ffffff0d;border:2px solid rgba(255,255,255,.08);border-radius:10px;padding:1rem;cursor:pointer;transition:transform .15s,border-color .2s,box-shadow .2s;text-align:center;position:relative}.deck-card:hover{transform:translateY(-3px);border-color:#fff3;box-shadow:0 6px 20px #0000004d}.deck-card.selected{border-color:#5af;background:#55aaff1a;box-shadow:0 0 16px #55aaff40}.deck-card-swatch{width:36px;height:36px;border-radius:50%;margin:0 auto .5rem;border:2px solid rgba(255,255,255,.15)}.deck-card-name{font-size:1rem;font-weight:700;margin-bottom:.3rem}.deck-card-cost{font-size:.8rem;color:gold;margin-bottom:.2rem}.deck-card-special{font-size:.75rem;color:#aab}.deck-card-check{position:absolute;top:6px;right:8px;font-size:1.1rem;color:#5af;display:none}.deck-card.selected .deck-card-check{display:block}.deck-tooltip{background:#141428f2;border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:.8rem 1rem;font-size:.8rem;color:#ccd;width:100%;min-height:60px;margin-bottom:1rem;line-height:1.5}#btn-confirm-deck:disabled{opacity:.4;cursor:not-allowed}.achievement-toast{position:fixed;top:1.5rem;left:50%;transform:translate(-50%) translateY(-120%);display:flex;align-items:center;gap:.75rem;background:linear-gradient(135deg,#1a1a2e,#2a2a4e);border:1px solid rgba(255,215,0,.4);border-radius:12px;padding:.75rem 1.25rem;z-index:9999;transition:transform .4s ease;box-shadow:0 4px 20px #00000080}.achievement-toast.show{transform:translate(-50%) translateY(0)}.achievement-toast-icon{font-size:1.75rem}.achievement-toast-text{display:flex;flex-direction:column;color:#eee}.achievement-toast-text strong{color:#fbbf24;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}.achievement-toast-text span{font-size:1rem}.leaderboard-name-section{display:flex;align-items:center;gap:.75rem;width:100%;margin-top:2rem;margin-bottom:1rem}.leaderboard-name-section label{font-size:.9rem;color:#ccd;flex-shrink:0}.leaderboard-name-input{flex:1;max-width:220px;padding:.5rem .75rem;font-size:.9rem;font-family:inherit;background:#ffffff0f;border:1px solid rgba(255,255,255,.12);border-radius:6px;color:#eee;outline:none;transition:border-color .2s}.leaderboard-name-input:focus{border-color:#5af}.leaderboard-section{width:100%;margin-top:1rem}.leaderboard-title{font-size:1.2rem;font-weight:700;margin-bottom:.75rem;color:#e0e0ff}.leaderboard-filter{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}.leaderboard-filter label{font-size:.85rem;color:#889}.leaderboard-select{padding:.4rem .6rem;font-size:.85rem;font-family:inherit;background:#ffffff0f;border:1px solid rgba(255,255,255,.12);border-radius:6px;color:#eee;outline:none;cursor:pointer}.leaderboard-select option{background:#1a1a2e;color:#eee}.leaderboard-select option:disabled{color:#555}.leaderboard-table{width:100%;border-collapse:collapse;font-size:.8rem;font-variant-numeric:tabular-nums}.leaderboard-table thead th{text-align:left;padding:.5rem .4rem;color:#889;font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:.7rem;border-bottom:1px solid rgba(255,255,255,.1);white-space:nowrap}.leaderboard-sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.leaderboard-sortable:hover{color:#ccd}.leaderboard-sort-active{color:#5af}.leaderboard-table tbody tr{border-bottom:1px solid rgba(255,255,255,.04);transition:background .15s}.leaderboard-table tbody tr:hover{background:#ffffff0a}.leaderboard-table td{padding:.45rem .4rem;color:#ccd}.leaderboard-rank{color:#889;font-weight:700}.leaderboard-num{text-align:right}.leaderboard-empty{text-align:center;color:#667;font-size:.9rem;padding:2rem 0}.onboarding-overlay{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:#05050ff2;transition:opacity .3s ease}.onboarding-overlay.fade-out{opacity:0;pointer-events:none}.onboarding-step{display:none;flex-direction:column;align-items:center;text-align:center;max-width:480px;padding:2rem;animation:onboardFadeIn .3s ease forwards}.onboarding-step.active{display:flex}@keyframes onboardFadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.onboarding-logo{font-size:3.5rem;font-weight:900;letter-spacing:.1em;color:#e0e0ff;text-shadow:0 0 20px rgba(100,140,255,.6),0 0 40px rgba(100,140,255,.3);margin-bottom:.5rem}.onboarding-logo .accent{color:#5af}.onboarding-tagline{font-size:1rem;letter-spacing:.3em;text-transform:uppercase;color:#889;margin-bottom:2rem}.onboarding-heading{font-size:1.6rem;font-weight:700;color:#e0e0ff;margin-bottom:.75rem}.onboarding-text{font-size:.95rem;color:#aab;line-height:1.6;margin-bottom:2rem}.onboarding-spotlight{width:120px;height:120px;border-radius:50%;border:3px solid #5af;box-shadow:0 0 0 4px #55aaff26,0 0 30px #55aaff4d;margin-bottom:1.5rem;display:flex;align-items:center;justify-content:center;animation:spotlightPulse 2s ease-in-out infinite}@keyframes spotlightPulse{0%,to{box-shadow:0 0 0 4px #55aaff26,0 0 30px #55aaff4d}50%{box-shadow:0 0 0 8px #55aaff40,0 0 50px #55aaff80}}.onboarding-spotlight-icon{font-size:2.5rem}.onboarding-btn-row{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}.onboarding-btn{border:none;cursor:pointer;font-family:inherit;font-weight:600;letter-spacing:.05em;border-radius:6px;padding:.8rem 2rem;font-size:1rem;transition:transform .15s,box-shadow .15s}.onboarding-btn:active{transform:scale(.96)}.onboarding-btn-primary{background:linear-gradient(135deg,#36f,#5af);color:#fff;box-shadow:0 4px 20px #55aaff4d}.onboarding-btn-primary:hover{box-shadow:0 6px 30px #55aaff80;transform:translateY(-2px)}.onboarding-btn-ghost{background:transparent;color:#889;border:1px solid rgba(255,255,255,.1)}.onboarding-btn-ghost:hover{color:#ccd;border-color:#fff3}.skin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:.75rem;width:100%;margin-bottom:1.5rem}.skin-card{background:#ffffff0d;border:2px solid rgba(255,255,255,.08);border-radius:10px;padding:1rem;text-align:center}.skin-card-swatch{width:40px;height:40px;border-radius:50%;margin:0 auto .5rem;border:2px solid rgba(255,255,255,.15);transition:background .2s}.skin-card-name{font-size:1rem;font-weight:700;margin-bottom:.2rem}.skin-card-cost{font-size:.8rem;color:gold;margin-bottom:.5rem}.skin-card-buttons{display:flex;flex-direction:column;gap:.35rem}.skin-btn{display:flex;align-items:center;gap:.4rem;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:.35rem .5rem;color:#ccd;font-size:.78rem;cursor:pointer;transition:border-color .2s,background .2s;position:relative}.skin-btn:hover{border-color:#ffffff40}.skin-btn.skin-active{border-color:#5af;background:#55aaff1f}.skin-btn.skin-locked{opacity:.6;cursor:default}.skin-btn-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0;border:1px solid rgba(255,255,255,.2)}.skin-btn-label{flex:1;text-align:left}.skin-lock-icon{font-size:.7rem}.skin-progress{width:100%;height:3px;background:#ffffff1a;border-radius:2px;margin-top:.2rem}.skin-progress-fill{height:100%;background:#5af;border-radius:2px}.skin-progress-text{font-size:.65rem;color:#889}.menu-tooltip{position:absolute;left:50%;transform:translate(-50%);top:calc(100% + 8px);background:#141428f2;border:1px solid rgba(255,255,255,.15);border-radius:6px;padding:.45rem .75rem;font-size:.8rem;color:#ccd;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s ease;z-index:100}.menu-tooltip.visible{opacity:1}