:root{--bg-primary:#0a0a1a;--bg-secondary:#0f0f2a;--bg-card:#0f0f2ad9;--bg-glass:#0f0f2a99;--border-glow:#00ffff4d;--border-glow-strong:#0ff9;--accent-primary:#0ff;--accent-secondary:#f0f;--accent-tertiary:#ff0;--accent-success:#0f8;--accent-danger:#f36;--accent-warning:#fa0;--text-primary:#e0e0ff;--text-secondary:#88b;--text-muted:#557;--text-bright:#fff;--glow-cyan:0 0 10px #0ff6, 0 0 30px #00ffff26;--glow-pink:0 0 10px #f0f6, 0 0 30px #ff00ff26;--glow-success:0 0 10px #0f86, 0 0 30px #00ff8826;--glow-danger:0 0 10px #f366, 0 0 30px #ff336626;--finger-pinky-l:#ff6b6b;--finger-ring-l:#ffa06b;--finger-middle-l:#ffd06b;--finger-index-l:#6bff6b;--finger-thumb:#6bccff;--finger-index-r:#6bff6b;--finger-middle-r:#ffd06b;--finger-ring-r:#ffa06b;--finger-pinky-r:#ff6b6b;--font-display:"Outfit", sans-serif;--font-mono:"JetBrains Mono", monospace;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--space-3xl:64px;--radius-sm:6px;--radius-md:12px;--radius-lg:20px;--radius-xl:28px;--radius-full:9999px;--transition-fast:.15s ease;--transition-normal:.3s ease;--transition-slow:.5s ease}[data-theme=crimson]{--bg-primary:#0a0505;--bg-secondary:#1a0a0a;--bg-card:#1a0a0ad9;--bg-glass:#1a0a0a99;--border-glow:#ff32324d;--border-glow-strong:#ff323299;--accent-primary:#f33;--accent-secondary:#f80;--glow-cyan:0 0 10px #ff323266, 0 0 30px #ff323226;--glow-pink:0 0 10px #f806, 0 0 30px #ff880026}[data-theme=vaporwave]{--bg-primary:#1a0a2e;--bg-secondary:#2a1050;--bg-card:#2a1050d9;--bg-glass:#2a105099;--border-glow:#c864ff4d;--border-glow-strong:#c864ff99;--accent-primary:#c864ff;--accent-secondary:#ff64c8;--glow-cyan:0 0 10px #c864ff66, 0 0 30px #c864ff26;--glow-pink:0 0 10px #ff64c866, 0 0 30px #ff64c826}[data-theme=matrix]{--bg-primary:#000a00;--bg-secondary:#001a00;--bg-card:#001a00d9;--bg-glass:#001a0099;--border-glow:#00ff004d;--border-glow-strong:#0f09;--accent-primary:#0f0;--accent-secondary:#8f8;--accent-tertiary:#0c0;--glow-cyan:0 0 10px #0f06, 0 0 30px #00ff0026;--glow-pink:0 0 10px #8f86, 0 0 30px #88ff8826}[data-theme=frost]{--bg-primary:#0a0f1a;--bg-secondary:#101828;--bg-card:#101828b3;--bg-glass:#c8dcff14;--border-glow:#96c8ff40;--border-glow-strong:#96c8ff80;--accent-primary:#8cf;--accent-secondary:#adf;--glow-cyan:0 0 10px #88ccff4d, 0 0 30px #88ccff1a;--glow-pink:0 0 10px #aaddff4d, 0 0 30px #aaddff1a}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{font-family:var(--font-display);background:var(--bg-primary);color:var(--text-primary);min-height:100vh;line-height:1.5;overflow-x:hidden}:focus-visible{outline:3px solid var(--accent-primary);outline-offset:3px}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}[data-reduced-effects] *,[data-reduced-effects] :before,[data-reduced-effects] :after{box-shadow:none!important;text-shadow:none!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}@media (width<=1100px),(height<=760px){html{font-size:14px}.virtual-keyboard{transform-origin:top;margin-bottom:-24px;transform:scale(.92)}}body:before{content:"";pointer-events:none;z-index:0;background-color:#0000;background-image:linear-gradient(#00ffff08 1px,#0000 1px),linear-gradient(90deg,#00ffff08 1px,#0000 1px);background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:60px 60px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;animation:20s linear infinite gridDrift;position:fixed;inset:0}@keyframes gridDrift{0%{transform:translate(0)}to{transform:translate(60px,60px)}}#root{z-index:1;min-height:100vh;position:relative}.glass-panel{background:var(--bg-glass);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-glow);border-radius:var(--radius-md);box-shadow:var(--glow-cyan)}.neon-text{color:var(--accent-primary);text-shadow:0 0 8px var(--accent-primary), 0 0 20px #00ffff4d}.neon-text-pink{color:var(--accent-secondary);text-shadow:0 0 8px var(--accent-secondary), 0 0 20px #ff00ff4d}.btn{font-family:var(--font-display);padding:var(--space-sm) var(--space-lg);border:1px solid var(--border-glow);border-radius:var(--radius-sm);background:var(--bg-glass);color:var(--text-primary);cursor:pointer;transition:all var(--transition-fast);letter-spacing:.5px;font-size:.95rem;font-weight:600;position:relative;overflow:hidden}.btn:before{content:"";opacity:0;transition:opacity var(--transition-fast);background:linear-gradient(135deg,#0000,#00ffff14);position:absolute;inset:0}.btn:hover{border-color:var(--border-glow-strong);box-shadow:var(--glow-cyan);transform:translateY(-2px)}.btn:hover:before{opacity:1}.btn:active{transform:translateY(0)}.btn-primary{border-color:var(--accent-primary);color:var(--accent-primary);background:linear-gradient(135deg,#0ff3,#ff00ff26)}.btn-primary:hover{background:linear-gradient(135deg,#00ffff59,#ff00ff40);box-shadow:0 0 15px #0ff6,0 0 40px #00ffff26}.btn-danger{border-color:var(--accent-danger);color:var(--accent-danger)}.btn-danger:hover{box-shadow:var(--glow-danger)}.btn-success{border-color:var(--accent-success);color:var(--accent-success)}.btn-success:hover{box-shadow:var(--glow-success)}.btn-lg{padding:var(--space-md) var(--space-xl);border-radius:var(--radius-md);font-size:1.15rem}.progress-bar{background:var(--bg-secondary);border-radius:var(--radius-full);border:1px solid #ffffff0d;width:100%;height:8px;overflow:hidden}.progress-bar__fill{border-radius:var(--radius-full);background:linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));height:100%;transition:width var(--transition-normal);box-shadow:0 0 8px var(--accent-primary)}.progress-bar__fill--danger{background:linear-gradient(90deg, var(--accent-danger), var(--accent-warning));box-shadow:0 0 8px var(--accent-danger)}.progress-bar__fill--success{background:linear-gradient(90deg, var(--accent-success), var(--accent-primary));box-shadow:0 0 8px var(--accent-success)}.stat-badge{align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);background:var(--bg-glass);border:1px solid var(--border-glow);border-radius:var(--radius-sm);font-family:var(--font-mono);color:var(--accent-primary);font-size:.85rem;display:inline-flex}@keyframes pulseGlow{0%,to{box-shadow:var(--glow-cyan)}50%{box-shadow:0 0 20px #0ff9,0 0 50px #00ffff40}}@keyframes slideInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}@keyframes comboFire{0%{text-shadow:0 0 4px var(--accent-primary)}25%{text-shadow:0 0 12px var(--accent-primary), 0 0 24px var(--accent-secondary)}50%{text-shadow:0 0 20px var(--accent-secondary), 0 0 40px var(--accent-primary), 0 0 60px var(--accent-tertiary)}75%{text-shadow:0 0 12px var(--accent-primary), 0 0 24px var(--accent-secondary)}to{text-shadow:0 0 4px var(--accent-primary)}}@keyframes floatUp{0%{opacity:1;transform:translateY(0)scale(1)}to{opacity:0;transform:translateY(-60px)scale(.5)}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--border-glow);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--border-glow-strong)}::selection{color:var(--text-bright);background:#00ffff4d}.virtual-keyboard{width:100%;max-width:900px;padding:var(--space-md);-webkit-user-select:none;user-select:none;margin:0 auto}.keyboard-row{justify-content:center;gap:4px;margin-bottom:4px;display:flex}.keyboard-row:nth-child(2){padding-left:20px}.keyboard-row:nth-child(3){padding-left:40px}.kb-key{background:var(--bg-secondary);border-radius:var(--radius-sm);width:52px;height:48px;font-family:var(--font-mono);color:var(--text-secondary);cursor:default;border:1px solid #ffffff14;justify-content:center;align-items:center;font-size:.8rem;font-weight:500;transition:all .1s;display:flex;position:relative}.kb-key:after{content:"";opacity:.4;border-radius:2px;width:60%;height:2px;transition:opacity .1s;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.kb-key[data-finger=pinky-l]:after{background:var(--finger-pinky-l)}.kb-key[data-finger=ring-l]:after{background:var(--finger-ring-l)}.kb-key[data-finger=middle-l]:after{background:var(--finger-middle-l)}.kb-key[data-finger=index-l]:after{background:var(--finger-index-l)}.kb-key[data-finger=thumb]:after{background:var(--finger-thumb)}.kb-key[data-finger=index-r]:after{background:var(--finger-index-r)}.kb-key[data-finger=middle-r]:after{background:var(--finger-middle-r)}.kb-key[data-finger=ring-r]:after{background:var(--finger-ring-r)}.kb-key[data-finger=pinky-r]:after{background:var(--finger-pinky-r)}.kb-key.pressed{border-color:var(--accent-primary);color:var(--accent-primary);background:#00ffff26;transform:translateY(2px);box-shadow:0 0 10px #00ffff4d}.kb-key.next-key{border-color:var(--accent-secondary);color:var(--text-bright);background:#ff00ff1f;animation:1s ease-in-out infinite keyPulse}.kb-key.next-key:after{opacity:1}@keyframes keyPulse{0%,to{box-shadow:0 0 8px #ff00ff4d}50%{box-shadow:0 0 20px #f0f9,0 0 40px #f0f3}}.kb-key.error-key{border-color:var(--accent-danger);background:#f363;animation:.3s shake}.kb-key.home-bump:before{content:"";background:var(--text-muted);border-radius:1px;width:10px;height:2px;position:absolute;bottom:8px;left:50%;transform:translate(-50%)}.kb-key.key-space{width:320px}.kb-key.key-wide{width:72px;font-size:.65rem}.kb-key.key-extra-wide{width:96px;font-size:.65rem}.kb-key.heat-green{background:#00ff8826;border-color:#0f86}.kb-key.heat-yellow{background:#ffff001f;border-color:#ffff0059}.kb-key.heat-orange{background:#ffaa0026;border-color:#fa06}.kb-key.heat-red{background:#f363;border-color:#ff336680}@media (width<=768px){.kb-key{width:32px;height:34px;font-size:.6rem}.kb-key.key-space{width:180px}.kb-key.key-wide{width:48px}.kb-key.key-extra-wide{width:60px}.keyboard-row{gap:2px;margin-bottom:2px}}.app-wrapper{flex-direction:column;min-height:100vh;display:flex}.welcome-screen{min-height:100vh;padding:var(--space-2xl) var(--space-lg);text-align:center;animation:fadeIn var(--transition-slow);flex-direction:column;justify-content:center;align-items:center;display:flex}.welcome-title-container{margin-bottom:var(--space-2xl)}.welcome-subtitle{font-family:var(--font-mono);color:var(--text-secondary);letter-spacing:2px;text-transform:uppercase;margin-top:var(--space-sm);font-size:1.1rem}.profile-setup-card{width:100%;max-width:420px;padding:var(--space-2xl) var(--space-xl);gap:var(--space-md);flex-direction:column;display:flex}.input-field{font-family:var(--font-display);border:1px solid var(--border-glow);border-radius:var(--radius-sm);padding:var(--space-sm) var(--space-md);color:var(--text-bright);text-align:center;transition:all var(--transition-fast);background:#0000004d;outline:none;font-size:1rem}.input-field:focus{border-color:var(--accent-primary);box-shadow:var(--glow-cyan)}.hub-container{width:100%;max-width:1100px;padding:var(--space-xl) var(--space-lg);align-items:center;gap:var(--space-xl);animation:fadeIn var(--transition-normal);flex-direction:column;margin:0 auto;display:flex}.hub-profile-panel{width:100%;padding:var(--space-md) var(--space-lg);border-radius:var(--radius-md);justify-content:space-between;align-items:center;gap:var(--space-md);flex-wrap:wrap;display:flex}.profile-summary-info{align-items:center;gap:var(--space-md);display:flex}.profile-avatar-emoji{font-size:2.5rem;line-height:1}.profile-name-section{flex-direction:column;align-items:flex-start;display:flex}.profile-level-badge{text-transform:uppercase;color:var(--accent-secondary);font-size:.8rem;font-weight:700;font-family:var(--font-mono)}.profile-xp-progress{gap:var(--space-xs);flex-direction:column;width:250px;display:flex}.xp-numbers{font-family:var(--font-mono);color:var(--text-secondary);justify-content:space-between;font-size:.75rem;display:flex}.modes-selection-grid{gap:var(--space-lg);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));width:100%;display:grid}.mode-select-card{padding:var(--space-xl) var(--space-lg);background:var(--bg-card);border:1px solid var(--border-glow);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);text-align:left;flex-direction:column;align-items:flex-start;display:flex}.mode-select-card:hover{border-color:var(--accent-primary);box-shadow:var(--glow-cyan);transform:translateY(-4px)}.mode-select-card.card-pink:hover{border-color:var(--accent-secondary);box-shadow:var(--glow-pink)}.mode-card-header{align-items:center;gap:var(--space-sm);margin-bottom:var(--space-md);display:flex}.mode-card-icon{font-size:2rem;line-height:1}.mode-card-title{color:var(--text-bright);letter-spacing:.5px;font-size:1.3rem;font-weight:800}.mode-card-desc{color:var(--text-secondary);margin-bottom:var(--space-md);flex-grow:1;font-size:.85rem;line-height:1.4}.mode-card-action{font-family:var(--font-mono);color:var(--accent-primary);text-transform:uppercase;font-size:.8rem;font-weight:700}.mode-select-card.card-pink .mode-card-action{color:var(--accent-secondary)}.app-footer{text-align:center;padding:var(--space-md);color:var(--text-muted);font-size:.8rem;font-family:var(--font-mono);margin-top:auto}.loading-screen{min-height:70vh;color:var(--accent-primary);place-items:center;font-size:1.2rem;display:grid}.hub-utility-actions{gap:var(--space-sm);flex-wrap:wrap;display:flex}.system-notice{margin:var(--space-sm);padding:var(--space-sm) var(--space-md);border:1px solid var(--accent-warning);background:var(--bg-secondary);justify-content:space-between;gap:var(--space-md);display:flex}.system-notice button{color:inherit;cursor:pointer;background:0 0;border:0;font-size:1.2rem}@media (width<=768px){.hub-profile-panel{flex-direction:column;align-items:stretch}.profile-xp-progress{width:100%}}