/* TYPEFLOW - Code Mode Typing Test */

:root {
    --primary-hue: 220;
    --primary-color: hsl(var(--primary-hue), 85%, 60%);
    --primary-light: hsl(var(--primary-hue), 85%, 70%);
    --primary-dark: hsl(var(--primary-hue), 85%, 45%);
    --primary-glow: hsla(var(--primary-hue), 85%, 60%, 0.4);
    --success-color: hsl(150, 70%, 45%);
    --success-glow: hsla(150, 70%, 45%, 0.3);
    --error-color: hsl(0, 75%, 60%);
    --error-glow: hsla(0, 75%, 60%, 0.3);
    --warning-color: hsl(40, 90%, 55%);
    --bg-primary: hsl(220, 20%, 97%);
    --bg-secondary: hsl(220, 15%, 94%);
    --surface-color: hsl(0, 0%, 100%);
    --text-primary: hsl(220, 25%, 20%);
    --text-secondary: hsl(220, 15%, 45%);
    --text-muted: hsl(220, 10%, 60%);
    --border-color: hsl(220, 15%, 88%);
    --syntax-keyword: hsl(280, 70%, 50%);
    --syntax-string: hsl(150, 60%, 40%);
    --syntax-number: hsl(30, 80%, 50%);
    --syntax-function: hsl(210, 80%, 50%);
    --syntax-comment: hsl(220, 10%, 55%);
    --syntax-operator: hsl(0, 70%, 55%);
    --syntax-property: hsl(200, 70%, 45%);
    --syntax-tag: hsl(0, 70%, 55%);
    --syntax-attribute: hsl(30, 70%, 50%);
    --syntax-punctuation: hsl(220, 15%, 40%);
    --font-display: 'Inter', -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-xxl: 48px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
    --shadow-sm: 0 1px 2px hsla(220, 25%, 10%, 0.04);
    --shadow-md: 0 4px 12px hsla(220, 25%, 10%, 0.08);
    --shadow-lg: 0 8px 24px hsla(220, 25%, 10%, 0.12);
    --transition-fast: 150ms ease-out;
    --transition-normal: 250ms ease-out;
}

body.dark-mode {
    --primary-color: hsl(215, 90%, 65%);
    --primary-light: hsl(215, 90%, 75%);
    --primary-glow: hsla(215, 90%, 65%, 0.35);
    --success-color: hsl(160, 70%, 50%);
    --error-color: hsl(0, 80%, 65%);
    --bg-primary: hsl(225, 25%, 8%);
    --bg-secondary: hsl(225, 20%, 12%);
    --surface-color: hsl(225, 20%, 14%);
    --text-primary: hsl(220, 20%, 92%);
    --text-secondary: hsl(220, 15%, 70%);
    --text-muted: hsl(220, 10%, 50%);
    --border-color: hsl(225, 15%, 22%);
    --syntax-keyword: hsl(280, 80%, 70%);
    --syntax-string: hsl(150, 70%, 55%);
    --syntax-number: hsl(30, 90%, 65%);
    --syntax-function: hsl(200, 90%, 70%);
    --syntax-comment: hsl(220, 10%, 50%);
    --syntax-operator: hsl(0, 80%, 70%);
    --syntax-property: hsl(200, 80%, 65%);
    --syntax-tag: hsl(0, 80%, 70%);
    --syntax-punctuation: hsl(220, 15%, 65%);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: var(--font-display);
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-lg);
    transition: background-color 0.4s, color 0.4s;
}

.container {
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) 0;
}

header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

#toggle-theme-btn {
    position: relative;
    width: 56px;
    height: 32px;
    border-radius: var(--radius-full);
    border: 2px solid var(--border-color);
    background: var(--surface-color);
    cursor: pointer;
    transition: var(--transition-fast);
    font-size: 0;
}

#toggle-theme-btn::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    transition: var(--transition-normal);
    box-shadow: 0 2px 8px hsla(40, 100%, 50%, 0.4);
}

body.dark-mode #toggle-theme-btn::before {
    transform: translateX(24px);
    background: linear-gradient(135deg, #a0aec0, #718096);
}

#toggle-theme-btn:hover {
    border-color: var(--primary-color);
}

.mode-toggle-container {
    display: flex;
    justify-content: center;
}

.mode-toggle {
    display: inline-flex;
    background: var(--surface-color);
    border-radius: var(--radius-lg);
    padding: 4px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}

.mode-btn {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-lg);
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: var(--transition-fast);
}

.mode-btn:hover {
    color: var(--text-primary);
    background: var(--bg-secondary);
}

.mode-btn.active {
    background: var(--primary-color);
    color: white;
}

.mode-icon {
    font-size: 1.1rem;
}

.card {
    background: var(--surface-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-lg);
    border: 1px solid var(--border-color);
    transition: box-shadow var(--transition-fast);
}

.card:hover {
    box-shadow: var(--shadow-lg);
}

#text-display-card {
    cursor: text;
    position: relative;
    padding: var(--space-xl);
}

#text-display-card::before {
    content: 'Click here or start typing';
    position: absolute;
    bottom: var(--space-sm);
    right: var(--space-md);
    font-size: 0.75rem;
    color: var(--text-muted);
    opacity: 0.7;
}

#text-display-card.typing::before {
    opacity: 0;
}

#text-display-card.code-mode {
    background: linear-gradient(135deg, var(--surface-color), var(--bg-secondary));
}

#text-display {
    font-family: var(--font-mono);
    font-size: 1.4rem;
    line-height: 2;
    max-height: 200px;
    overflow-y: auto;
    user-select: none;
    color: var(--text-muted);
    white-space: pre-wrap;
    word-break: break-word;
}

#text-display span {
    position: relative;
    transition: color 0.1s;
    border-radius: 2px;
    padding: 1px 0;
}

#text-display span.correct {
    color: var(--success-color);
}

#text-display span.incorrect {
    color: var(--error-color);
    background-color: var(--error-glow);
    text-decoration: underline wavy var(--error-color);
    text-underline-offset: 4px;
}

#text-display span.current {
    color: var(--text-primary);
}

#text-display span.current::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--primary-color);
    animation: blink 1s infinite;
}

@keyframes blink {
    50% {
        opacity: 0.3;
    }
}

/* Syntax highlighting */
#text-display span.syntax-keyword {
    color: var(--syntax-keyword);
}

#text-display span.syntax-string {
    color: var(--syntax-string);
}

#text-display span.syntax-number {
    color: var(--syntax-number);
}

#text-display span.syntax-function {
    color: var(--syntax-function);
}

#text-display span.syntax-comment {
    color: var(--syntax-comment);
    font-style: italic;
}

#text-display span.syntax-operator {
    color: var(--syntax-operator);
}

#text-display span.syntax-property {
    color: var(--syntax-property);
}

#text-display span.syntax-tag {
    color: var(--syntax-tag);
}

#text-display span.syntax-attribute {
    color: var(--syntax-attribute);
}

#text-display span.syntax-punctuation {
    color: var(--syntax-punctuation);
}

#text-display span.correct.syntax-keyword,
#text-display span.correct.syntax-function,
#text-display span.correct.syntax-operator,
#text-display span.correct.syntax-property,
#text-display span.correct.syntax-tag,
#text-display span.correct.syntax-punctuation,
#text-display span.correct.syntax-number {
    color: var(--success-color);
}

.stats-progression-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
}

.stat-item,
.progress-item {
    background: var(--surface-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    padding: var(--space-md);
    text-align: center;
    transition: var(--transition-fast);
}

.stat-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.stat-item h3,
.progress-item h3 {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-xs);
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--primary-color);
    line-height: 1;
}

.stat-item:first-child .stat-value {
    font-size: 2.5rem;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.progress-item h3 span {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--primary-color);
}

.progress-bar-container {
    width: 100%;
    height: 8px;
    background: var(--bg-secondary);
    border-radius: var(--radius-full);
    margin-top: var(--space-sm);
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    border-radius: var(--radius-full);
    transition: width var(--transition-normal);
}

.settings-grid {
    display: flex;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

.setting-group {
    flex: 1;
    min-width: 200px;
}

.setting-group label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-sm);
}

.btn-group {
    display: flex;
    gap: var(--space-xs);
    background: var(--bg-secondary);
    padding: 4px;
    border-radius: var(--radius-md);
}

.btn {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    font-size: 0.875rem;
    font-weight: 600;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);
    min-height: 44px;
    font-family: var(--font-display);
}

.btn:hover {
    background: var(--surface-color);
    color: var(--text-primary);
}

.btn.active {
    background: var(--surface-color);
    color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

.language-btns {
    flex-wrap: wrap;
}

.lang-btn {
    flex: 0 0 auto;
    min-width: 52px;
    padding: var(--space-sm);
}

.lang-icon {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 700;
}

.lang-btn[data-lang="javascript"].active .lang-icon {
    color: hsl(50, 90%, 50%);
}

.lang-btn[data-lang="typescript"].active .lang-icon {
    color: hsl(210, 80%, 55%);
}

.lang-btn[data-lang="python"].active .lang-icon {
    color: hsl(210, 60%, 50%);
}

.lang-btn[data-lang="css"].active .lang-icon {
    color: hsl(200, 80%, 50%);
}

.lang-btn[data-lang="sql"].active .lang-icon {
    color: hsl(30, 80%, 55%);
}

.lang-btn[data-lang="html"].active .lang-icon {
    color: hsl(15, 80%, 55%);
}

.main-actions {
    display: flex;
    justify-content: center;
    padding: var(--space-sm) 0;
}

.action-btn {
    min-width: 200px;
    min-height: 52px;
    padding: var(--space-md) var(--space-xl);
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-fast);
    font-family: var(--font-display);
}

#restart-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    box-shadow: 0 4px 16px var(--primary-glow);
}

#restart-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px var(--primary-glow);
}

#text-input {
    position: absolute;
    top: -9999px;
    left: -9999px;
    opacity: 0;
}

.results-overlay {
    position: fixed;
    inset: 0;
    background: hsla(220, 25%, 10%, 0.8);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-normal);
}

.results-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.results-content {
    background: var(--surface-color);
    border-radius: var(--radius-xl);
    padding: var(--space-xxl);
    width: 90%;
    max-width: 480px;
    text-align: center;
    transform: scale(0.9);
    transition: transform var(--transition-normal);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
}

.results-overlay.visible .results-content {
    transform: scale(1);
}

.results-content h2 {
    font-size: 1.75rem;
    margin-bottom: var(--space-lg);
    background: linear-gradient(135deg, var(--primary-color), var(--success-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.result-item {
    background: var(--bg-secondary);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
}

.result-item:first-child {
    grid-column: span 2;
    background: linear-gradient(135deg, var(--primary-glow), var(--success-glow));
}

.result-item:first-child p {
    font-size: 4rem;
    background: linear-gradient(135deg, var(--primary-color), var(--success-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.result-item h3 {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-xs);
}

.result-item p {
    font-size: 2rem;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text-primary);
    margin: 0;
}

#next-test-btn {
    width: 100%;
    background: linear-gradient(135deg, var(--success-color), hsl(160, 70%, 40%));
    color: white;
    box-shadow: 0 4px 16px var(--success-glow);
}

#next-test-btn:hover {
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    body {
        padding: var(--space-md);
    }

    .container {
        gap: var(--space-md);
    }

    #text-display {
        font-size: 1.15rem;
        max-height: 150px;
    }

    .stats-progression-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-value {
        font-size: 1.5rem;
    }

    .stat-item:first-child .stat-value {
        font-size: 2rem;
    }

    .settings-grid {
        flex-direction: column;
    }

    .result-item:first-child p {
        font-size: 3rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

.btn:focus-visible,
.action-btn:focus-visible,
.mode-btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}