.typing-game{background:#fff;border:1px solid #dee2e6;border-radius:16px;padding:28px;color:#212529}
.typing-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}
.typing-kicker{display:inline-flex;align-items:center;color:#0d6efd;font-size:.72rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:8px}
.typing-header h2{font-size:1.6rem;font-weight:800;margin:0 0 5px;color:#212529}
.typing-header p{color:#6c757d;font-size:.85rem;margin:0}
.typing-timer{display:flex;align-items:center;gap:7px;background:#f8f9fa;border:1px solid #dee2e6;border-radius:10px;padding:11px 16px;color:#0d6efd;font-size:28px;font-weight:700;white-space:nowrap;transition:.25s}
.typing-timer i{font-size:1rem}
.typing-timer.typing-warning{color:#d39e00;border-color:#ffe69c;background:#fff9e6}
.typing-timer.typing-danger{color:#dc3545;border-color:#f1aeb5;background:#fff5f5;animation:typingPulse .8s infinite}
.typing-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.typing-stat{background:#f8f9fa;border:1px solid #999999;border-radius:10px;padding:13px 15px;text-align:center}
.typing-stat span{display:block;color:#6c757d;font-size:.68rem;text-transform:uppercase;letter-spacing:.8px;margin-bottom:4px}
.typing-stat strong{display:block;color:#212529;font-size:1.15rem;font-weight:800}
.typing-stat:first-child strong{color:#0d6efd}
.typing-progress{height:5px;background:#e9ecef;border-radius:10px;overflow:hidden;margin-bottom:18px}
.typing-progress>div{height:100%;width:0;background:linear-gradient(90deg,#0d6efd,#6610f2);border-radius:10px;transition:width .12s linear}
.typing-line{position:relative;background:#f8f9fa;border:1px solid #007fff;border-radius:12px;padding:0 24px;height:80px;overflow:hidden;display:flex;align-items:center;cursor:text}
.typing-text{position:relative;flex-shrink:0;white-space:nowrap;color:#6c757d;font-size:36px;font-weight:500;letter-spacing:.15px;user-select:none;transition:transform .06s linear}
.typing-text .typing-correct{color:#adb5bd}
.typing-text .typing-wrong{color:#dc3545;background:#f8d7da;border-radius:3px}
.typing-text .typing-current{position:relative;color:#212529;background:#cfe2ff;border-radius:2px}
.typing-text .typing-untyped{color:#212529}
.typing-text .typing-current::after{content:'';position:absolute;left:-1px;top:-2px;bottom:-2px;width:2px;background:#0d6efd;-webkit-animation:typingCaret 1s step-end infinite;animation:typingCaret 1s step-end infinite}
.typing-input-hidden{position:absolute;width:1px;height:1px;padding:0;margin:0;border:0;opacity:0;overflow:hidden;pointer-events:none}
.typing-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:14px}
.typing-hint{color:#6c757d;font-size:.72rem}
.typing-hint i{color:#ffc107}
.typing-restart{border:1px solid #ced4da;background:#fff;color:#495057;border-radius:8px;padding:8px 13px;font-size:.78rem;font-weight:600;cursor:pointer;transition:.2s}
.typing-restart:hover{background:#f8f9fa}
.typing-result{margin-top:16px}
.typing-result-card{background:#fff;border:1px solid #dee2e6;border-radius:16px;padding:30px;text-align:center;color:#212529}
.typing-result-icon{font-size:3.5rem;line-height:1;margin-bottom:12px}
.typing-result-card h2{font-size:1.45rem;font-weight:800;margin:10px 0 4px;color:#212529}
.typing-result-score{font-size:4rem;line-height:1.1;font-weight:900;color:#0d6efd;margin:14px 0}
.typing-result-score small{font-size:1rem;color:#6c757d;font-weight:700}
.typing-new-best{display:inline-flex;align-items:center;gap:6px;background:#fff3cd;border:1px solid #ffda6a;color:#997404;border-radius:30px;padding:6px 12px;font-size:.7rem;font-weight:800;letter-spacing:.5px}
.typing-personal-best{color:#6c757d;font-size:.75rem;margin-top:10px}
.typing-personal-best strong{color:#0d6efd}
.typing-result-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:620px;margin:22px auto 0}
.typing-result-grid>div{background:#f8f9fa;border:1px solid #e9ecef;border-radius:10px;padding:12px 8px}
.typing-result-grid span{display:block;color:#6c757d;font-size:.65rem;text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px}
.typing-result-grid strong{color:#212529;font-size:.9rem}
.typing-login-prompt{max-width:620px;margin:18px auto 0;background:#f8f9fa;border:1px solid #dee2e6;border-radius:10px;padding:13px;color:#6c757d;font-size:.78rem}
.typing-login-prompt i{color:#ffc107}
.typing-login-actions{display:flex;justify-content:center;gap:8px;margin-top:9px}
.typing-login-btn,.typing-register-btn{display:inline-block;text-decoration:none;border-radius:7px;padding:7px 13px;font-size:.72rem;font-weight:600;transition:.2s}
.typing-login-btn{background:#0d6efd;color:#fff}
.typing-login-btn:hover{background:#0b5ed7}
.typing-register-btn{border:1px solid #0d6efd;color:#0d6efd}
.typing-register-btn:hover{background:#0d6efd;color:#fff}
.typing-score-saved{display:inline-block;margin-top:15px;color:#198754;font-size:.75rem}
.typing-score-saved i{margin-right:4px}
.typing-result-actions{display:flex;justify-content:center;gap:10px;margin-top:22px}
.typing-play-again,.typing-leaderboard-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;padding:9px 15px;font-size:.78rem;font-weight:600;text-decoration:none;cursor:pointer;transition:.2s}
.typing-play-again{border:1px solid #ced4da;background:#fff;color:#495057}
.typing-play-again:hover{background:#f8f9fa}
.typing-leaderboard-btn{background:#0d6efd;color:#fff;border:1px solid #0d6efd}
.typing-leaderboard-btn:hover{background:#0b5ed7}
@keyframes typingCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
@-webkit-keyframes typingCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes typingPulse{0%,100%{box-shadow:0 0 0 0 rgba(220,53,69,.05)}50%{box-shadow:0 0 0 5px rgba(220,53,69,.08)}}
@media(max-width:767px){
.typing-game{padding:18px;border-radius:12px}
.typing-header{align-items:flex-start;margin-bottom:18px}
.typing-header h2{font-size:1.3rem}
.typing-timer{padding:9px 12px;font-size:.9rem}
.typing-stats{grid-template-columns:repeat(2,1fr)}
.typing-stat{padding:10px}
.typing-line{padding:0 16px;height:64px}
.typing-text{font-size:1.15rem}
.typing-footer{align-items:flex-start;flex-direction:column}
.typing-restart{width:100%}
.typing-result-card{padding:22px 16px}
.typing-result-score{font-size:3.2rem}
.typing-result-grid{grid-template-columns:repeat(2,1fr)}
.typing-result-actions{flex-direction:column}
.typing-play-again,.typing-leaderboard-btn{width:100%}
}
@media(max-width:420px){
.typing-header{flex-direction:column}
.typing-timer{align-self:flex-start}
.typing-kicker{font-size:.65rem}
.typing-header h2{font-size:1.2rem}
.typing-text{font-size:30px;}
}