/* ——— Página de estatísticas no estilo do jogo ———
   Carregada depois do <style> da página. Mesma linguagem do pós-jogo e da home:
   números em blocos compactos lado a lado, rótulos pequenos em caixa alta,
   botão verde para voltar a jogar. Só aparência — os ids que o stats.js
   preenche continuam os mesmos. */

body.stats-page,
body.stats-page h1,
body.stats-page h2,
body.stats-page h3,
body.stats-page .stats-value,
body.stats-page .hero-title,
body.stats-page .stats-page-title,
body.stats-page .stats-section-title {
    font-family: var(--font-family-base, 'Segoe UI', Inter, 'Helvetica Neue', Arial, sans-serif);
}

body.stats-page .stats-container {
    max-width: 440px;
    padding: 12px 12px 120px;
    gap: 12px;
}

/* Cabeçalho em uma linha: voltar, logo e título */
body.stats-page .stats-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin: 0 0 4px;
    padding: 0;
}

body.stats-page .stats-header-copy {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

body.stats-page .stats-brand-mini {
    margin: 0;
    padding: 0;
}

body.stats-page .stats-brand-mini img {
    width: auto;
    height: 52px;
}

body.stats-page .stats-overline {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: #8fd3ff;
    color: rgb(from var(--wb-accent, rgb(131 184 255)) clamp(0, calc(r + 12), 255) clamp(0, calc(g + 27), 255) b); /* wb-theme */
}

body.stats-page .stats-page-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0;
}

/* Resumo do topo */
body.stats-page .hero-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: 22px;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(64, 140, 255, 0.28), transparent 70%),
        linear-gradient(180deg, rgba(24, 44, 88, 0.9), rgba(12, 24, 52, 0.9));
    background: radial-gradient(120% 90% at 50% 0%, rgb(from var(--wb-accent, rgb(131 184 255)) clamp(0, calc(r - 67), 255) clamp(0, calc(g - 44), 255) b / 0.28), transparent 70%), linear-gradient(180deg, rgb(from var(--wb-surface, rgb(18 36 72)) clamp(0, calc(r + 6), 255) clamp(0, calc(g + 8), 255) clamp(0, calc(b + 16), 255) / 0.9), rgb(from var(--wb-surface, rgb(18 36 72)) clamp(0, calc(r - 6), 255) clamp(0, calc(g - 12), 255) clamp(0, calc(b - 20), 255) / 0.9)); /* wb-theme */
    border: 1px solid rgba(131, 184, 255, 0.24);
    border: 1px solid rgb(from var(--wb-accent, rgb(131 184 255)) r g b / 0.24); /* wb-theme */
}

body.stats-page .hero-copy,
body.stats-page .hero-side {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
}

body.stats-page .hero-badge {
    display: none;
}

body.stats-page .hero-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0;
}

body.stats-page .hero-text {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.35;
    color: #c7dbf7;
    color: rgb(from var(--wb-ink, rgb(235 244 255)) clamp(0, calc(r - 36), 255) clamp(0, calc(g - 25), 255) clamp(0, calc(b - 8), 255)); /* wb-theme */
}

body.stats-page .hero-quick-row,
body.stats-page .hero-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

body.stats-page .hero-pill,
body.stats-page .hero-mini-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 9px 10px;
    border-radius: 14px;
    background: rgba(18, 36, 72, 0.72);
    background: rgb(from var(--wb-surface, rgb(18 36 72)) r g b / 0.72); /* wb-theme */
    border: 1px solid rgba(131, 184, 255, 0.16);
    border: 1px solid rgb(from var(--wb-accent, rgb(131 184 255)) r g b / 0.16); /* wb-theme */
}

body.stats-page .hero-pill span,
body.stats-page .hero-mini-stat span {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9fbce6;
    color: rgb(from var(--wb-accent, rgb(131 184 255)) clamp(0, calc(r + 28), 255) clamp(0, calc(g + 4), 255) clamp(0, calc(b - 25), 255)); /* wb-theme */
}

body.stats-page .hero-pill strong,
body.stats-page .hero-mini-stat strong {
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1.15;
    color: #ffffff;
    color: rgb(from var(--wb-ink, rgb(235 244 255)) clamp(0, calc(r + 20), 255) clamp(0, calc(g + 11), 255) b); /* wb-theme */
    overflow-wrap: anywhere;
}

body.stats-page .hero-side-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

body.stats-page .hero-side-kicker {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #8fd3ff;
    color: rgb(from var(--wb-accent, rgb(131 184 255)) clamp(0, calc(r + 12), 255) clamp(0, calc(g + 27), 255) b); /* wb-theme */
}

body.stats-page .hero-side-main {
    margin: 0;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.35;
    color: #eaf4ff;
    color: rgb(from var(--wb-ink, rgb(235 244 255)) clamp(0, calc(r - 1), 255) g b); /* wb-theme */
}

/* Botão de voltar a jogar no topo */
body.stats-page .stats-play-cta {
    margin-top: 2px;
    text-decoration: none;
}

/* Seções */
body.stats-page .stats-section-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

body.stats-page .section-group-label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 6px 0 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

body.stats-page .section-kicker {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #8fd3ff;
    color: rgb(from var(--wb-accent, rgb(131 184 255)) clamp(0, calc(r + 12), 255) clamp(0, calc(g + 27), 255) b); /* wb-theme */
}

body.stats-page .stats-section-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0;
}

body.stats-page .section-subtitle {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.35;
    color: #c7dbf7;
    color: rgb(from var(--wb-ink, rgb(235 244 255)) clamp(0, calc(r - 36), 255) clamp(0, calc(g - 25), 255) clamp(0, calc(b - 8), 255)); /* wb-theme */
}

body.stats-page .section-chip {
    align-self: flex-start;
    margin-top: 2px;
    padding: 4px 10px;
    font-size: 0.74rem;
}

body.stats-page .section-sub {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 12px;
    border-radius: 18px;
    background: rgba(12, 26, 56, 0.72);
    background: rgb(from var(--wb-surface, rgb(18 36 72)) clamp(0, calc(r - 6), 255) clamp(0, calc(g - 10), 255) clamp(0, calc(b - 16), 255) / 0.72); /* wb-theme */
    border: 1px solid rgba(131, 184, 255, 0.16);
    border: 1px solid rgb(from var(--wb-accent, rgb(131 184 255)) r g b / 0.16); /* wb-theme */
    box-shadow: none;
}

body.stats-page .section-sub::before {
    content: none;
}

body.stats-page .sub-panel-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
}

body.stats-page .sub-panel-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    font-size: 0.9rem;
}

/* Números: blocos pequenos, dois por linha */
body.stats-page .stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

body.stats-page .stats-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    min-height: 0;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(18, 36, 72, 0.72);
    background: rgb(from var(--wb-surface, rgb(18 36 72)) r g b / 0.72); /* wb-theme */
    border: 1px solid rgba(131, 184, 255, 0.16);
    border: 1px solid rgb(from var(--wb-accent, rgb(131 184 255)) r g b / 0.16); /* wb-theme */
    box-shadow: none;
    transform: none;
}

body.stats-page .stats-card::before,
body.stats-page .stats-card::after {
    content: none;
}

body.stats-page .stats-card-wide {
    grid-column: span 2;
}

body.stats-page .stats-card-icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin: 0 0 4px;
    border-radius: 9px;
    font-size: 0.85rem;
    box-shadow: none;
}

body.stats-page .stats-label {
    order: 2;
    margin: 0;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.2;
    color: #9fbce6;
    color: rgb(from var(--wb-accent, rgb(131 184 255)) clamp(0, calc(r + 28), 255) clamp(0, calc(g + 4), 255) clamp(0, calc(b - 25), 255)); /* wb-theme */
}

body.stats-page .stats-value {
    order: 1;
    margin: 0;
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: 0;
    color: #ffffff;
    color: rgb(from var(--wb-ink, rgb(235 244 255)) clamp(0, calc(r + 20), 255) clamp(0, calc(g + 11), 255) b); /* wb-theme */
    overflow-wrap: anywhere;
}

/* Perfil */
body.stats-page .profile-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 12px;
    border-radius: 18px;
    text-align: left;
    background: rgba(18, 36, 72, 0.72);
    background: rgb(from var(--wb-surface, rgb(18 36 72)) r g b / 0.72); /* wb-theme */
    border: 1px solid rgba(131, 184, 255, 0.16);
    border: 1px solid rgb(from var(--wb-accent, rgb(131 184 255)) r g b / 0.16); /* wb-theme */
    box-shadow: none;
}

body.stats-page .profile-avatar-wrapper {
    flex: none;
    width: 56px;
    height: 56px;
    margin: 0;
}

body.stats-page .profile-avatar-wrapper img {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    object-fit: cover;
}

body.stats-page .profile-info {
    flex: 1;
    min-width: 0;
    text-align: left;
}

body.stats-page .profile-name {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

body.stats-page .profile-vocabulary-badge {
    margin: 2px 0 0;
    font-size: 0.78rem;
    color: #8fd3ff;
    color: rgb(from var(--wb-accent, rgb(131 184 255)) clamp(0, calc(r + 12), 255) clamp(0, calc(g + 27), 255) b); /* wb-theme */
}

body.stats-page .profile-brand-mark {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 6px 12px;
    border-radius: 14px;
    background: linear-gradient(135deg, #ffe27a, #ffb347);
}

body.stats-page .profile-brand-level-label {
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #2b1a00;
}

body.stats-page .profile-brand-level-value {
    font-size: 1.3rem;
    font-weight: 900;
    line-height: 1;
    color: #2b1a00;
}

/* Missões: mesma barra laranja do "ritmo do dia" */
body.stats-page .mission-summary-card {
    margin: 0;
    padding: 12px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 196, 80, 0.16), rgba(255, 140, 60, 0.1));
    border: 1px solid rgba(255, 196, 80, 0.38);
    box-shadow: none;
}

body.stats-page .mission-summary-rate {
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1;
    color: #ffd166;
    color: rgb(from var(--wb-warm, rgb(255 209 102)) r g b); /* wb-theme */
}

body.stats-page .mission-progress-track {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    background: rgb(from var(--wb-ink, rgb(235 244 255)) clamp(0, calc(r + 20), 255) clamp(0, calc(g + 11), 255) b / 0.12); /* wb-theme */
    overflow: hidden;
}

body.stats-page .mission-progress-track > * {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ffd166, #ff9f43);
}

body.stats-page .section-block-title {
    margin: 4px 0 0;
    font-size: 0.9rem;
    font-weight: 800;
}

body.stats-page .section-divider {
    margin: 2px 0;
}

body.stats-page .comparison-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

body.stats-page .words-container {
    gap: 6px;
}

/* Cartão do perfil: avatar, nome e nível numa linha só */
body.stats-page .profile-card {
    position: relative;
    flex-wrap: nowrap;
    overflow: visible;
}

body.stats-page .profile-avatar {
    position: static;
    width: 56px;
    height: 56px;
    margin: 0;
    border-radius: 16px;
    object-fit: cover;
    transform: none;
}

body.stats-page .profile-info {
    margin: 0;
    padding: 0;
}

body.stats-page .profile-vocabulary-description {
    margin: 2px 0 0;
    font-size: 0.74rem;
    line-height: 1.3;
    color: #c7dbf7;
    color: rgb(from var(--wb-ink, rgb(235 244 255)) clamp(0, calc(r - 36), 255) clamp(0, calc(g - 25), 255) clamp(0, calc(b - 8), 255)); /* wb-theme */
}

body.stats-page .profile-brand-mark {
    position: static;
    inset: auto;
    transform: none;
    opacity: 1;
    box-shadow: none;
}

/* Textos de "ainda sem dados": antes ficavam escuros sobre fundo escuro */
body.stats-page .text-muted,
body.stats-page .fst-italic {
    color: #9fbce6 !important;
    color: rgb(from var(--wb-accent, rgb(131 184 255)) clamp(0, calc(r + 28), 255) clamp(0, calc(g + 4), 255) clamp(0, calc(b - 25), 255)) !important; /* wb-theme */
}

/* Cabeçalho: o título ocupa o espaço que sobra e não quebra em três linhas */
body.stats-page .stats-header-copy {
    flex: 1;
}

body.stats-page .stats-header-text {
    flex: 1;
    min-width: 0;
}

body.stats-page .stats-overline {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Modos mais jogados: linhas compactas */
body.stats-page .modes-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

body.stats-page .mode-item {
    margin: 0;
    padding: 9px 12px;
    border-radius: 14px;
    background: rgba(18, 36, 72, 0.72);
    background: rgb(from var(--wb-surface, rgb(18 36 72)) r g b / 0.72); /* wb-theme */
    border: 1px solid rgba(131, 184, 255, 0.16);
    border: 1px solid rgb(from var(--wb-accent, rgb(131 184 255)) r g b / 0.16); /* wb-theme */
    box-shadow: none;
}

/* ============ Página viva: foco no jogador ============ */

/* Anel de vocabulário dominado + título do nível, no cartão do topo */
.sp-ring-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 4px 0 14px;
}

.sp-ring {
    --sp-p: 0;
    --sp-ring-color: var(--stats-accent, #71ddff);
    position: relative;
    flex: none;
    width: 112px;
    height: 112px;
}
@supports (color: rgb(from red r g b)) { .sp-ring { --sp-ring-color: var(--stats-accent, rgb(from var(--wb-accent-bg, var(--wb-accent, rgb(131 184 255))) clamp(0, calc(r - 18), 255) clamp(0, calc(g + 37), 255) b)); } } /* wb-theme */

.sp-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.sp-ring circle {
    fill: none;
    stroke-width: 10;
}

.sp-ring-track {
    stroke: rgba(143, 187, 255, 0.16);
    stroke: rgb(from var(--wb-accent, rgb(131 184 255)) clamp(0, calc(r + 12), 255) clamp(0, calc(g + 3), 255) b / 0.16); /* wb-theme */
}

/* Circunferência de r=52 ≈ 326.7; o traço cresce até a porcentagem */
.sp-ring-fill {
    stroke: var(--sp-ring-color);
    stroke-linecap: round;
    stroke-dasharray: 326.7;
    stroke-dashoffset: 326.7;
    transition: stroke-dashoffset 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}

.sp-in .sp-ring-fill {
    stroke-dashoffset: calc(326.7 - (326.7 * var(--sp-p) / 100));
}

.sp-ring-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.sp-ring-center strong {
    font-size: 1.25rem;
    font-weight: 900;
    color: #ffffff;
    color: rgb(from var(--wb-ink, rgb(235 244 255)) clamp(0, calc(r + 20), 255) clamp(0, calc(g + 11), 255) b); /* wb-theme */
    line-height: 1.1;
}

.sp-ring-center span {
    max-width: 76px;
    font-size: 0.75rem;
    line-height: 1.2;
    color: #c7dbf7;
    color: rgb(from var(--wb-ink, rgb(235 244 255)) clamp(0, calc(r - 36), 255) clamp(0, calc(g - 25), 255) clamp(0, calc(b - 8), 255)); /* wb-theme */
}

.sp-level-track {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.sp-level-kicker {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ffd166;
    color: rgb(from var(--wb-warm, rgb(255 209 102)) r g b); /* wb-theme */
}

.sp-level-title {
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1.15;
    color: #ffffff;
    color: rgb(from var(--wb-ink, rgb(235 244 255)) clamp(0, calc(r + 20), 255) clamp(0, calc(g + 11), 255) b); /* wb-theme */
}

.sp-level-note {
    font-size: 0.8125rem;
    line-height: 1.35;
    color: #c7dbf7;
    color: rgb(from var(--wb-ink, rgb(235 244 255)) clamp(0, calc(r - 36), 255) clamp(0, calc(g - 25), 255) clamp(0, calc(b - 8), 255)); /* wb-theme */
}

/* Comparativo: barra com a posição do jogador entre os demais */
.sp-bar {
    height: 8px;
    margin-top: 10px;
    border-radius: 999px;
    background: rgba(143, 187, 255, 0.14);
    background: rgb(from var(--wb-accent, rgb(131 184 255)) clamp(0, calc(r + 12), 255) clamp(0, calc(g + 3), 255) b / 0.14); /* wb-theme */
    overflow: hidden;
}

.sp-bar i {
    display: block;
    height: 100%;
    width: var(--sp-w, 0%);
    border-radius: inherit;
    background: linear-gradient(90deg, #8ef0a6, #71ddff);
    background: linear-gradient(90deg, #8ef0a6, rgb(from var(--wb-accent-bg, var(--wb-accent, rgb(131 184 255))) clamp(0, calc(r - 18), 255) clamp(0, calc(g + 37), 255) b)); /* wb-theme */
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

.sp-in .sp-bar i {
    transform: scaleX(1);
}

/* Barra de missões e barras por modo também enchem quando aparecem */
.mission-progress-fill,
.mode-bar-fill {
    transform-origin: left center;
    transition:
        width 0.35s ease,
        transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

.sp-wait .mission-progress-fill,
.sp-wait .mode-bar-fill {
    transform: scaleX(0);
}

/* Seções abaixo da dobra esperam a rolagem para entrar */
.stats-shell.is-ready .stats-reveal.sp-wait,
.stats-shell.is-ready .sp-wait .stats-reveal,
.stats-shell.is-ready .sp-wait .metric-reveal {
    opacity: 0;
    transform: translateY(22px) scale(0.985);
    filter: none;
}

/* Fichas de palavras entram uma a uma */
.sp-in .word-tag {
    animation: sp-tag-pop 0.42s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.sp-in .word-tag:nth-child(2) { animation-delay: 40ms; }
.sp-in .word-tag:nth-child(3) { animation-delay: 80ms; }
.sp-in .word-tag:nth-child(4) { animation-delay: 120ms; }
.sp-in .word-tag:nth-child(5) { animation-delay: 160ms; }
.sp-in .word-tag:nth-child(6) { animation-delay: 200ms; }
.sp-in .word-tag:nth-child(7) { animation-delay: 240ms; }
.sp-in .word-tag:nth-child(8) { animation-delay: 280ms; }
.sp-in .word-tag:nth-child(n + 9) { animation-delay: 320ms; }

@keyframes sp-tag-pop {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.7);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sp-ring-fill,
    .sp-bar i,
    .mission-progress-fill,
    .mode-bar-fill {
        transition: none;
    }
    .sp-wait .mission-progress-fill,
    .sp-wait .mode-bar-fill,
    .sp-bar i {
        transform: none;
    }
    .sp-in .word-tag {
        animation: none;
    }
}

/* ============ Painel em grade (dashboard) ============
   Os buracos vinham de grades de 2 colunas com contagens ímpares: 8 métricas
   com uma ocupando 2 colunas (9 células) e 5 cartões no comparativo. Aqui cada
   grade fecha as linhas sozinha e, do tablet para cima, as seções viram uma
   grade de painéis com áreas nomeadas que esticam até a altura da linha. */

body.stats-page .stats-grid {
    grid-auto-flow: row dense;
}

/* Ranking: as duas posições lado a lado e as fichas na linha inteira */
body.stats-page .dash-ranking .stats-card-wide {
    grid-column: 1 / -1;
}

/* Comparativo: com quantidade ímpar, o último ocupa a linha toda */
body.stats-page .comparison-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

/* Faixa de KPIs do topo */
body.stats-page .hero-kpis .hero-mini-stat strong {
    font-size: 1.2rem;
}

/* Cartões que absorvem a sobra quando o painel estica */
body.stats-page .dash-profile .profile-card,
body.stats-page .dash-missions .mission-summary-card {
    flex: 1;
}

/* Link de compartilhar: campo na linha de cima, botões dividindo a de baixo */
body.stats-page .profile-share-input-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

body.stats-page .profile-share-input {
    grid-column: 1 / -1;
}

body.stats-page .profile-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    width: 100%;
    padding: 10px 12px;
    white-space: nowrap;
}

body.stats-page .profile-share-btn.hidden + .profile-share-btn,
body.stats-page .profile-share-btn:has(+ .profile-share-btn.hidden) {
    grid-column: 1 / -1;
}

body.stats-page .dash-missions .mission-summary-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
}

@media (min-width: 768px) {
    body.stats-page .stats-container {
        max-width: 1040px;
        padding: 20px 24px 120px;
        gap: 16px;
    }

    body.stats-page .hero-panel {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        grid-template-areas:
            'copy side'
            'cta  side'
            'kpis kpis';
        gap: 14px 20px;
        padding: 20px;
    }

    body.stats-page .hero-copy {
        grid-area: copy;
    }

    body.stats-page .hero-side {
        grid-area: side;
        justify-content: center;
    }

    body.stats-page .stats-play-cta {
        grid-area: cta;
        align-self: end;
        margin: 0;
    }

    body.stats-page .hero-kpis {
        grid-area: kpis;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    body.stats-page .hero-kpis .hero-mini-stat {
        padding: 12px 14px;
    }

    body.stats-page .hero-kpis .hero-mini-stat strong {
        font-size: 1.45rem;
    }

    body.stats-page .stats-section-group {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            'label    label'
            'profile  metrics'
            'ranking  missions'
            'compare  compare'
            'words    words';
        gap: 14px;
        align-items: stretch;
    }

    body.stats-page .section-group-label {
        grid-area: label;
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 16px;
    }

    body.stats-page .section-chip {
        align-self: flex-end;
        flex: none;
    }

    body.stats-page .dash-profile { grid-area: profile; }
    body.stats-page .dash-metrics { grid-area: metrics; }
    body.stats-page .dash-ranking { grid-area: ranking; }
    body.stats-page .dash-missions { grid-area: missions; }
    body.stats-page .dash-compare { grid-area: compare; }
    body.stats-page .dash-words { grid-area: words; }

    body.stats-page .section-sub {
        min-width: 0;
        padding: 14px;
    }

    /* Métricas preenchem o painel: linhas iguais que crescem juntas */
    body.stats-page .dash-metrics .stats-grid {
        flex: 1;
        grid-auto-rows: 1fr;
    }

    body.stats-page .dash-metrics .stats-card {
        justify-content: center;
    }

    /* Ranking acompanha a altura do vizinho */
    body.stats-page .dash-ranking .stats-grid {
        flex: 1;
    }

    /* Comparativo na largura toda: todos os cartões numa linha só */
    body.stats-page .dash-compare .comparison-grid {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
    }

    body.stats-page .dash-compare .comparison-card:last-child:nth-child(odd) {
        grid-column: auto;
    }

    body.stats-page .dash-compare .comparison-card {
        padding: 14px;
    }
}

@media (min-width: 1200px) {
    body.stats-page .stats-container {
        max-width: 1240px;
    }

    body.stats-page .stats-section-group {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-areas:
            'label   label    label'
            'profile metrics  metrics'
            'ranking  compare  compare'
            'missions words    words';
    }

    body.stats-page .dash-metrics .stats-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    body.stats-page .dash-metrics .stats-value {
        font-size: 1.7rem;
    }
}