@import"https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;500;600;700&display=swap";:root{--primary: #00f5d4;--secondary: #7b2cbf;--accent: #ff6b6b;--success: #4ade80;--warning: #fbbf24;--bg-dark: #0a0a1a;--bg-card: rgba(15, 15, 35, .85);--text: #e0e0ff;--text-dim: #8888aa}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Rajdhani,sans-serif;background:var(--bg-dark);color:var(--text);overflow:hidden;min-height:100vh}#game-container{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10}#canvas-container{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1}.game-header{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:20px 40px;background:linear-gradient(180deg,rgba(10,10,26,.95) 0%,transparent 100%);z-index:100}.stat-box{display:flex;flex-direction:column;align-items:center;padding:10px 25px;background:var(--bg-card);border-radius:12px;border:1px solid rgba(0,245,212,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.stat-label{font-size:11px;text-transform:uppercase;letter-spacing:2px;color:var(--text-dim);margin-bottom:4px}.stat-value{font-family:Orbitron,monospace;font-size:24px;font-weight:700;color:var(--primary);text-shadow:0 0 20px var(--primary)}.stat-value.score{color:var(--warning);text-shadow:0 0 20px var(--warning)}.stat-value.combo{color:var(--accent);text-shadow:0 0 20px var(--accent)}.level-progress{display:flex;align-items:center;gap:15px}.progress-bar{width:200px;height:8px;background:#ffffff1a;border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:4px;transition:width .3s ease;box-shadow:0 0 15px var(--primary)}.game-area{display:flex;flex-direction:column;align-items:center;gap:40px;padding:20px}.word-display{text-align:center;padding:40px 60px;background:var(--bg-card);border-radius:20px;border:1px solid rgba(0,245,212,.3);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 0 60px #00f5d41a,inset 0 0 60px #00f5d40d;min-width:500px}.level-badge{font-family:Orbitron,monospace;font-size:14px;color:var(--secondary);text-transform:uppercase;letter-spacing:3px;margin-bottom:20px;display:flex;align-items:center;justify-content:center;gap:10px}.level-badge:before,.level-badge:after{content:"";width:30px;height:1px;background:linear-gradient(90deg,transparent,var(--secondary))}.level-badge:after{background:linear-gradient(90deg,var(--secondary),transparent)}.target-word{font-family:Orbitron,monospace;font-size:42px;font-weight:700;letter-spacing:8px;margin-bottom:25px;min-height:60px}.char{display:inline-block;transition:all .15s ease}.char.correct{color:var(--success);text-shadow:0 0 20px var(--success);animation:correctPulse .3s ease}.char.incorrect{color:var(--accent);text-shadow:0 0 20px var(--accent);animation:shake .3s ease}.char.current{color:var(--primary);text-shadow:0 0 25px var(--primary);position:relative}.char.current:after{content:"";position:absolute;bottom:-5px;left:0;right:0;height:3px;background:var(--primary);border-radius:2px;animation:cursorBlink 1s infinite}.char.pending{color:var(--text-dim);opacity:.5}@keyframes correctPulse{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}@keyframes cursorBlink{0%,50%{opacity:1}51%,to{opacity:.3}}.input-area{position:relative}.hidden-input{position:absolute;opacity:0;pointer-events:none}.input-display{font-family:Orbitron,monospace;font-size:28px;padding:20px 40px;background:#00f5d40d;border:2px solid rgba(0,245,212,.3);border-radius:15px;color:var(--text);letter-spacing:4px;min-width:400px;text-align:center;transition:all .3s ease}.input-display:focus{outline:none;border-color:var(--primary);box-shadow:0 0 30px #00f5d44d}.input-display.error{border-color:var(--accent);box-shadow:0 0 30px #ff6b6b4d;animation:inputShake .3s ease}@keyframes inputShake{0%,to{transform:translate(0)}20%{transform:translate(-10px)}40%{transform:translate(10px)}60%{transform:translate(-10px)}80%{transform:translate(10px)}}.hint-text{margin-top:15px;font-size:14px;color:var(--text-dim);letter-spacing:1px}.screen{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:200;background:#0a0a1af2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);opacity:0;visibility:hidden;transition:all .5s ease}.screen.active{opacity:1;visibility:visible}.screen-content{text-align:center;max-width:600px;padding:40px}.game-title{font-family:Orbitron,monospace;font-size:64px;font-weight:900;background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:20px;text-shadow:none;filter:drop-shadow(0 0 30px rgba(0,245,212,.5))}.game-subtitle{font-size:18px;color:var(--text-dim);letter-spacing:4px;text-transform:uppercase;margin-bottom:50px}.btn{font-family:Orbitron,monospace;font-size:16px;font-weight:600;padding:18px 50px;border:none;border-radius:12px;cursor:pointer;text-transform:uppercase;letter-spacing:3px;transition:all .3s ease;position:relative;overflow:hidden}.btn-primary{background:linear-gradient(135deg,var(--primary),#00c4a7);color:var(--bg-dark);box-shadow:0 0 30px #00f5d466}.btn-primary:hover{transform:translateY(-3px);box-shadow:0 0 50px #00f5d499}.btn-secondary{background:transparent;border:2px solid var(--secondary);color:var(--secondary)}.btn-secondary:hover{background:var(--secondary);color:#fff}.btn-group{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}.level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:15px;margin:40px 0}.level-btn{width:70px;height:70px;font-family:Orbitron,monospace;font-size:20px;font-weight:700;background:var(--bg-card);border:2px solid rgba(0,245,212,.2);border-radius:12px;color:var(--text);cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.level-btn:hover:not(:disabled){border-color:var(--primary);box-shadow:0 0 20px #00f5d44d;transform:scale(1.1)}.level-btn:disabled{opacity:.3;cursor:not-allowed}.level-btn.completed{background:linear-gradient(135deg,#00f5d433,#7b2cbf33);border-color:var(--success)}.level-btn.current{border-color:var(--warning);box-shadow:0 0 25px #fbbf2466;animation:pulse 2s infinite}@keyframes pulse{0%,to{box-shadow:0 0 25px #fbbf2466}50%{box-shadow:0 0 40px #fbbf2499}}.results-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:40px 0}.result-stat{padding:25px;background:var(--bg-card);border-radius:15px;border:1px solid rgba(0,245,212,.2)}.result-stat-value{font-family:Orbitron,monospace;font-size:36px;font-weight:700;color:var(--primary);text-shadow:0 0 20px var(--primary)}.result-stat-label{font-size:12px;color:var(--text-dim);text-transform:uppercase;letter-spacing:2px;margin-top:8px}.result-grade{font-family:Orbitron,monospace;font-size:80px;font-weight:900;margin:30px 0}.grade-s{color:gold;text-shadow:0 0 40px #ffd700}.grade-a{color:var(--success);text-shadow:0 0 40px var(--success)}.grade-b{color:var(--primary);text-shadow:0 0 40px var(--primary)}.grade-c{color:var(--warning);text-shadow:0 0 40px var(--warning)}.grade-f{color:var(--accent);text-shadow:0 0 40px var(--accent)}.combo-popup{position:fixed;font-family:Orbitron,monospace;font-size:32px;font-weight:700;color:var(--accent);text-shadow:0 0 30px var(--accent);pointer-events:none;z-index:300;animation:comboFloat 1s ease-out forwards}@keyframes comboFloat{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-80px) scale(1.5)}}.score-popup{position:fixed;font-family:Orbitron,monospace;font-size:24px;font-weight:700;color:var(--warning);text-shadow:0 0 20px var(--warning);pointer-events:none;z-index:300;animation:scoreFloat .8s ease-out forwards}@keyframes scoreFloat{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-50px) scale(.8)}}.perfect-effect{position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle,rgba(0,245,212,.3) 0%,transparent 70%);pointer-events:none;z-index:150;opacity:0;animation:perfectFlash .5s ease-out}@keyframes perfectFlash{0%{opacity:1}to{opacity:0}}.level-desc{font-size:14px;color:var(--text-dim);margin-top:20px;letter-spacing:1px}@media (max-width: 768px){.game-header{flex-wrap:wrap;gap:10px;padding:15px}.stat-box{padding:8px 15px}.stat-value{font-size:18px}.word-display{min-width:auto;padding:25px 30px}.target-word{font-size:28px;letter-spacing:4px}.input-display{min-width:auto;font-size:22px;padding:15px 25px}.game-title{font-size:36px}.level-grid{grid-template-columns:repeat(5,1fr)}.results-stats{grid-template-columns:1fr}}