/* Stats + Progress */
.typing-stats-progress-combined {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: var(--color-surface-secondary);
    border-radius: 0.5rem;
    border: 1px solid var(--color-gray-200);
}

.typing-stats-compact {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    text-align: center;
}

.typing-stat-item { display: flex; flex-direction: column; align-items: center; }
.typing-stat-value { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.125rem; }
.typing-stat-value.typed { color: var(--color-primary-600); }
.typing-stat-value.errors { color: var(--color-error-500); }
.typing-stat-value.accuracy { color: var(--color-success-500); }
.typing-stat-label { font-size: 0.75rem; color: var(--color-gray-500); font-weight: 500; }

.typing-progress-compact { width: 100%; }
.typing-progress-bar { width: 100%; height: 0.5rem; background: var(--color-gray-200); border-radius: 0.25rem; overflow: hidden; margin-bottom: 0.5rem; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); }
.typing-progress-fill { height: 100%; background: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%); border-radius: 0.25rem; width: 0%; transition: width 0.3s ease; position: relative; overflow: hidden; }
.typing-progress-fill.completed { background: linear-gradient(90deg, var(--color-success-500) 0%, var(--color-success-600) 100%); }

.typing-progress-fill::after {
    content: '';
    position: absolute; inset: 0; 
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
    animation: typing-progress-shine 2s infinite;
}

@keyframes typing-progress-shine { 0% { transform: translateX(-100%);} 100% { transform: translateX(100%);} }

@media (max-width: 768px) {
    .typing-stats-progress-combined { gap: 0.5rem; padding: 0.5rem; margin-bottom: 0.75rem; }
    .typing-stats-compact { gap: 0.5rem; }
    .typing-stat-value { font-size: 1.125rem; }
    .typing-stat-label { font-size: 0.6875rem; }
    .typing-progress-bar { height: 0.375rem; }
}

/* Missed keys popup primitive styles (container is hidden until completion) */
.missed-keys-container { margin-top: 0.5rem; position: relative; }
.view-missed-keys-btn { background: var(--color-error-500); color: white; border: none; border-radius: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }
.view-missed-keys-btn:hover { background: var(--color-error-600); box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1); transform: translateY(-1px); }
.view-missed-keys-btn:active { background: var(--color-error-700); transform: translateY(0); box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }
.missed-keys-popup { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 0.5rem; background: var(--color-surface-primary); border: 1px solid var(--color-gray-200); border-radius: 0.5rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); padding: 1rem; min-width: 200px; max-width: 300px; z-index: 1000; display: none; opacity: 0; transition: all 0.2s ease; pointer-events: none; }
.missed-keys-popup.active { display: block !important; opacity: 1 !important; pointer-events: auto; }
.missed-keys-title { font-size: 0.875rem; font-weight: 600; color: var(--color-gray-700); margin-bottom: 0.75rem; text-align: center; }
.missed-keys-list { display: flex; flex-wrap: wrap; gap: 0.25rem; justify-content: center; }
.missed-key { background: var(--color-error-50); color: var(--color-error-600); border: 1px solid var(--color-error-200); border-radius: 0.25rem; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; font-family: 'JetBrains Mono', monospace; }
.missed-key.space { background: var(--color-gray-100); color: var(--color-gray-500); border-color: var(--color-gray-300); }
.missed-key.space::before { content: 'SPACE'; }