/* Tema escuro padrão ("Preto quase puro"). Na Fase 3 estas variáveis passam a ser
   setadas em runtime a partir de ThemeProvider (CSS custom properties no :root). */
:root {
    --bg: #1e1e24;
    --text-primary: #e2e8f0;
    --text-untyped: #6b7280;
    --text-correct: #e2e8f0;
    --text-incorrect: #ef4444;
    --accent: #3b82f6;
    --mono: "Cascadia Mono", "Consolas", ui-monospace, monospace;
    --elegant: "Outfit", "Inter", system-ui, sans-serif;
    --type-size: 1.75rem;
    --line-h: 2.6rem;
    /* CubicEase EaseOut do desktop ≈ ease-out cúbico */
    --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--bg);
    color: var(--text-primary);
    font-family: var(--elegant);
}

.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    box-sizing: border-box;
}

/* ---- controlador do teste (Fase 2) ---- */
.test-shell {
    width: min(56rem, 90vw);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.test-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Marca do app, no estilo da logo do desktop: "clean" forte, "typing" leve, "." accent */
.logo {
    font-family: var(--elegant);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    user-select: none;
    white-space: nowrap;
}
.logo-light { font-weight: 300; color: var(--text-untyped); }
.logo-dot { color: var(--accent); }

.menus {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.menus select {
    background: transparent;
    color: var(--text-untyped);
    border: none;
    border-radius: 0.4rem;
    padding: 0.3rem 0.5rem;
    font-family: var(--mono);
    font-size: 0.85rem;
    cursor: pointer;
    transition: color 120ms ease, background 120ms ease;
}
.menus select:hover:not(:disabled) { color: var(--text-primary); background: rgba(255, 255, 255, 0.04); }
.menus select:disabled { opacity: 0.4; cursor: default; }
.menus option { background: var(--bg); color: var(--text-primary); }

.timer {
    font-family: var(--mono);
    font-size: 1.5rem;
    color: var(--accent);
    min-width: 3ch;
    text-align: right;
    transition: opacity 200ms ease;
}
.timer.dim { opacity: 0.25; }

.custom-text {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem;
    padding: 0.6rem 0.8rem;
    font-family: var(--mono);
    font-size: 0.9rem;
    resize: vertical;
    outline: none;
}
.custom-text:focus { border-color: var(--accent); }

.stage { position: relative; }

/* ---- superfície de digitação (Fase 1) ---- */
.typing-area { width: 100%; }

.caps-warn {
    font-family: var(--mono);
    font-size: 0.85rem;
    color: var(--text-incorrect);
    text-align: right;
    height: 1.2rem;
    transition: opacity 150ms ease;
}
.caps-warn.hidden { opacity: 0; }

.typing-viewport {
    position: relative;
    height: calc(3 * var(--line-h));
    overflow: hidden;
    outline: none;
    font-family: var(--mono);
    font-size: var(--type-size);
    line-height: var(--line-h);
    cursor: text;
}

.typing-scroller {
    position: relative;
    white-space: pre-wrap;   /* preserva espaços E quebra por palavra */
    overflow-wrap: normal;   /* nunca quebra no meio de uma palavra */
    word-break: normal;
    transition: transform 150ms var(--ease-out);  /* rolagem Monkeytype */
    will-change: transform;
}

.typing-scroller span { color: var(--text-untyped); }
.typing-scroller .ch-correct { color: var(--text-correct); }
.typing-scroller .ch-incorrect { color: var(--text-incorrect); }

/* Espaço-alvo errado: "·" centralizado em cima do espaço (real preservado p/ a quebra) */
.sp-bad { position: relative; }
.sp-bad::after {
    content: "·";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    text-align: center;
    color: var(--text-incorrect);
}

/* Caret fluido: barra de 2.5px na cor accent, glide de 85ms; pisca após 500ms parado */
.caret {
    position: absolute;
    top: 0;
    left: 0;
    width: 2.5px;
    height: var(--type-size);
    background: var(--accent);
    border-radius: 1px;
    transition: transform 85ms var(--ease-out), height 85ms var(--ease-out);
    will-change: transform, height;
}
.caret.idle { animation: caret-blink 1.06s steps(1, end) infinite; }
@keyframes caret-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ---- tela de resultados (Fase 2) ---- */
.results-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* ~93% do fundo, no estilo do LoadingScrim do desktop */
    background: color-mix(in srgb, var(--bg) 93%, transparent);
    animation: fade-in 180ms ease;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.results-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    width: 100%;
}

.result-main {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}
.result-big { display: flex; align-items: baseline; gap: 0.4rem; }
.result-big .num { font-family: var(--mono); font-size: 3.5rem; color: var(--accent); line-height: 1; }
.result-big .unit { font-family: var(--mono); font-size: 1rem; color: var(--text-untyped); }

.result-pair { display: flex; gap: 2rem; }
.result-pair > div { display: flex; flex-direction: column; }
.result-pair .num { font-family: var(--mono); font-size: 1.6rem; color: var(--text-primary); }
.result-pair .lbl { font-family: var(--mono); font-size: 0.75rem; color: var(--text-untyped); }

.consistency-chart { width: 100%; height: 160px; }
.chart-axis { stroke: var(--text-untyped); stroke-width: 1; opacity: 0.4; }
.chart-label { fill: var(--text-untyped); font-family: var(--mono); font-size: 11px; }
.chart-avg { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart-instant { fill: none; stroke: var(--text-untyped); stroke-width: 1.5; opacity: 0.5; stroke-linecap: round; stroke-linejoin: round; }
.chart-avg-dot { fill: var(--accent); }

.continue-btn {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    padding: 0.55rem 1.6rem;
    font-family: var(--elegant);
    font-size: 0.95rem;
    cursor: pointer;
    transition: filter 120ms ease;
}
.continue-btn:hover { filter: brightness(1.1); }

.enter-hint { font-family: var(--mono); font-size: 0.78rem; color: var(--text-untyped); }

.page-hint { font-size: 0.8rem; color: var(--text-untyped); text-align: center; }

/* ---- header: ícones + agrupamento (Fase 3) ---- */
.header-right { display: flex; align-items: center; gap: 1rem; }
.icon-buttons { display: flex; gap: 0.25rem; }
.icon-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    line-height: 0;
    padding: 0.35rem;
    border-radius: 0.4rem;
    color: var(--text-untyped);
    transition: color 120ms ease, background 120ms ease;
}
.icon-btn svg { width: 17px; height: 17px; display: block; fill: currentColor; }
.icon-btn:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.06); }

/* ---- banners (recorde / conquista) ---- */
.banner {
    font-family: var(--mono);
    font-size: 0.9rem;
    padding: 0.35rem 0.9rem;
    border-radius: 0.5rem;
    animation: fade-in 220ms ease;
}
.banner.record { color: var(--accent); }
.banner.achievement { color: var(--text-primary); background: rgba(255, 255, 255, 0.05); }

/* ---- overlays genéricos ---- */
.overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    box-sizing: border-box;
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    outline: none;
    animation: fade-in 160ms ease;
}
.overlay-card {
    background: var(--bg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    padding: 1.5rem 1.75rem;
    width: min(28rem, 92vw);
    max-height: 86vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.overlay-card.wide { width: min(44rem, 94vw); }
.overlay-card h2 { font-family: var(--elegant); font-weight: 400; font-size: 1.2rem; margin: 0; color: var(--text-primary); }
.overlay-card h2 .muted, .muted { color: var(--text-untyped); font-size: 0.85rem; font-weight: 400; }
.overlay-hint { font-family: var(--mono); font-size: 0.78rem; color: var(--text-untyped); text-align: center; cursor: pointer; margin-top: 0.25rem; }

.field { display: flex; flex-direction: column; gap: 0.35rem; font-family: var(--mono); font-size: 0.85rem; color: var(--text-untyped); }
.field.row { flex-direction: row; align-items: center; gap: 0.5rem; cursor: pointer; }
.field select {
    background: var(--bg); color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.4rem;
    padding: 0.4rem 0.5rem; font-family: var(--mono); font-size: 0.85rem;
}

/* ---- conquistas ---- */
.achievement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: 0.75rem;
}
.achievement {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 0.25rem; padding: 0.75rem 0.5rem;
    border-radius: 0.6rem; border: 2px solid var(--ring, var(--text-untyped));
    background: rgba(255, 255, 255, 0.03);
}
.achievement.locked { opacity: 0.4; --ring: var(--text-untyped) !important; }
.achievement.tier-bronze { --ring: #cd7f32; }
.achievement.tier-prata { --ring: #c0c7d0; }
.achievement.tier-ouro { --ring: #ffcc4d; }
.achievement .medal { font-size: 1.8rem; line-height: 1; }
.achievement .ach-name { font-family: var(--mono); font-size: 0.8rem; color: var(--text-primary); }
.achievement .ach-desc { font-family: var(--mono); font-size: 0.68rem; color: var(--text-untyped); }

/* ---- histórico ---- */
.history-stats { display: flex; gap: 2rem; justify-content: center; }
.history-stats > div { display: flex; flex-direction: column; align-items: center; }
.history-stats .num { font-family: var(--mono); font-size: 1.6rem; color: var(--accent); }
.history-stats .lbl { font-family: var(--mono); font-size: 0.72rem; color: var(--text-untyped); }

.history-list { display: flex; flex-direction: column; gap: 0.2rem; }
.history-row {
    display: grid; grid-template-columns: 5rem 3.5rem 1fr auto; gap: 0.5rem;
    font-family: var(--mono); font-size: 0.8rem; color: var(--text-primary);
    padding: 0.3rem 0.5rem; border-radius: 0.35rem;
}
.history-row:nth-child(odd) { background: rgba(255, 255, 255, 0.03); }
.history-row .hr-acc, .history-row .hr-src, .history-row .hr-date { color: var(--text-untyped); }

.history-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
.ghost-btn {
    background: transparent; color: var(--text-untyped);
    border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0.45rem;
    padding: 0.4rem 0.9rem; font-family: var(--mono); font-size: 0.8rem; cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease;
}
.ghost-btn:hover:not(:disabled) { color: var(--text-primary); border-color: var(--accent); }
.ghost-btn:disabled { opacity: 0.4; cursor: default; }
.file-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.action-status { font-family: var(--mono); font-size: 0.78rem; color: var(--accent); text-align: center; }

#blazor-error-ui {
    background: #2a2a32;
    color: var(--text-primary);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

.loading-progress-text {
    font-family: var(--elegant);
    font-weight: 300;
    color: var(--text-untyped);
    text-align: center;
    margin-top: 3rem;
}