/* Typing stage --------------------------------------------------------- */
.typing-stage {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: clamp(1.2rem, .6rem + 2vw, 2.2rem);
    box-shadow: var(--shadow-md);
}
.typing-stage.focus-mode { box-shadow: var(--shadow-lg); }

.passage {
    font-family: var(--font-mono);
    font-size: clamp(1.15rem, .9rem + 1vw, 1.5rem);
    line-height: 2.05;
    letter-spacing: .012em;
    user-select: none;
    margin-bottom: var(--sp-4);
    min-height: 6.5rem;
    max-height: 40vh;
    overflow-y: auto;
    overflow-x: hidden;
    overflow-wrap: anywhere;
    color: var(--text-faint);
    scrollbar-width: thin;
}

.passage .tr-word { display: inline-block; white-space: nowrap; }
.passage .ch { position: relative; border-radius: 4px; transition: color .08s var(--ease), background .08s var(--ease); }
.passage .ch.correct { color: var(--text); }
.passage .ch.incorrect { color: var(--danger); background: color-mix(in srgb, var(--danger) 16%, transparent); }
.passage .ch.space.incorrect { background: color-mix(in srgb, var(--danger) 32%, transparent); }

/* caret variants (data-caret on .passage) */
.passage .ch.current { color: var(--text); }
.passage .ch.current::before {
    content: ""; position: absolute; left: -1px; top: 12%; bottom: 12%; width: 2px;
    background: var(--primary); border-radius: 2px; animation: caretBlink 1s step-end infinite;
}
.passage[data-caret="BLOCK"] .ch.current { background: var(--primary); color: var(--on-primary); }
.passage[data-caret="BLOCK"] .ch.current::before { display: none; }
.passage[data-caret="UNDERLINE"] .ch.current::before { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 2px; }

@keyframes caretBlink { 50% { opacity: .25; } }

.typing-input {
    width: 100%;
    min-height: 96px;
    resize: none;
    font-family: var(--font-mono);
    font-size: 1.05rem;
    padding: .9rem 1rem;
    border-radius: var(--r-md);
    border: 1px solid var(--border-strong);
    background: var(--surface-inset);
    color: var(--text);
}
.typing-input:disabled { opacity: .6; }

/* Controls ------------------------------------------------------------- */
.test-toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; margin-bottom: var(--sp-4); }
.test-toolbar .group { display: flex; flex-direction: column; gap: .4rem; }
.test-toolbar .group h4 { margin: 0; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint); }

.custom-panel { margin-bottom: var(--sp-4); }
.custom-panel textarea { min-height: 120px; }

/* Result -------------------------------------------------------------- */
.result-hero { text-align: center; padding: var(--sp-5) 0; }
.result-hero .trophy { font-size: 3rem; animation: pop .5s var(--ease-out); }
.result-big { display: flex; justify-content: center; gap: clamp(1.5rem, 6vw, 3.5rem); margin: var(--sp-4) 0; flex-wrap: wrap; }
.result-big .num { font-family: var(--font-display); font-size: clamp(2.4rem, 1.6rem + 3vw, 3.4rem); font-weight: 800; color: var(--primary); line-height: 1; }
.result-big .cap { color: var(--text-muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; }
.result-table td:last-child { text-align: right; font-weight: 700; }

.finished-banner { display: none; }
.finished-banner.show { display: block; animation: pop .35s var(--ease-out); }

.xp-line { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--primary-strong); }

.dc-hint { font-size: .85rem; color: var(--text-muted); }