/* =============================================================================
   PROFILE v2 (/perfil, /perfil/{userId}) — adota a linguagem visual "v2" das
   telas-vitrine (Home, Salas, Rank). Escopo: classes pv-*.

   DEPENDE dos primitivos já carregados antes deste arquivo:
     - lobby-v2.css  → .lobby-v2, .lv-bg, .lv-content, .lv-ico (palco + ícones)
     - home-v2.css   → .lvh-card (superfície), .lvh-welcome.lvh-ladder* (hero)
   Cascata em App.razor: truco-theme → lobby-v2 → home-v2 → profile-v2.

   PALETA (hex literais v2, NÃO os tokens --rz-*):
     emerald #25d08a / #27d68f  → destaque / ativo / vitória
     gold    #f3c43f            → patente / destaque
     coral   #ef6a5e            → derrota
     card    #111822 → #0d131b  → superfície (.lvh-card)
     texto   #e8edf2 (sec. #9fb0ad / #7c8d87)

   O controle .pv-tabs/.pv-tab é a 3ª encarnação do padrão segmentado
   (.lv-tabs em Salas, .rg-mode no Rank). É escrito autocontido e neutro de
   propósito, para poder virar um primitivo compartilhado (ex. .truco-seg) no
   futuro — sem retrofit das outras telas agora (decisão D3).
   ========================================================================== */

/* Constrange a coluna do perfil: hub de página única lê melhor mais estreito
   que o grid de 1200px da Home. */
.pv-content {
    max-width: 880px;
}

/* =============================================================================
   ABAS — pílulas segmentadas (.pv-tabs / .pv-tab)
   ========================================================================== */
.pv-tabs {
    display: flex;
    gap: 6px;
    padding: 5px;
    border-radius: 13px;
    background: rgba(8, 11, 17, .8);
    border: 1px solid rgba(255, 255, 255, .08);
    /* No mobile a tira rola em vez de espremer/cortar seções. No-op quando cabe. */
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.pv-tabs::-webkit-scrollbar { display: none; }

.pv-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    padding: 9px 16px;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    white-space: nowrap;
    font-family: 'Barlow', system-ui, sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .5px;
    background: transparent;
    color: #7c8896;
    transition: background .15s, color .15s, box-shadow .15s;
}
.pv-tab:hover { color: #cdd9d4; }
.pv-tab .lv-ico { font-size: 18px;  }
.pv-tab.is-active .lv-ico {
    font-size: 18px;
    color: #04231a;
}
.pv-tab.is-active {
    background: linear-gradient(135deg, #27d68f, #13a06a);
    color: #04231a;
    box-shadow: 0 4px 12px -4px rgba(37, 208, 138, .5);
}
/* Chip "Novo" da aba Personagem até a primeira abertura (sem contador, sem badge no menu). */
.pv-tab__new {
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(243, 196, 63, .14);
    border: 1px solid rgba(243, 196, 63, .45);
    color: #f3c43f;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
}
/* Foco de teclado visível (piso de acessibilidade). */
.pv-tab:focus-visible {
    outline: 2px solid #2ee69a;
    outline-offset: 2px;
}

/* Pista estática de "há mais para o lado" só no mobile (não toca o desktop). */
@media (max-width: 640px) {
    .pv-tabs {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.25rem, #000 calc(100% - 1.25rem), transparent 100%);
                mask-image: linear-gradient(to right, transparent 0, #000 1.25rem, #000 calc(100% - 1.25rem), transparent 100%);
    }
}

/* =============================================================================
   HERO "carteirinha" — o verso equipado inclinado atrás do avatar (carta na
   mão), o nome e a patente de cada ladder: a escada IV→I da liga e quanto
   falta para subir. A patente é o número principal do perfil: lida aqui, não
   se repete nas abas. Casca visual = .lvh-welcome (home-v2.css).
   ========================================================================== */
.pv-hero {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 24px;
}

.pv-hero__id {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 22px;
    min-width: 0;
}

/* Verso + avatar: a carta sai de trás do avatar, como numa mão de truco. */
.pv-hero__badge {
    position: relative;
    flex: 0 0 auto;
    width: 122px;
    height: 100px;
}
.pv-hero__card {
    position: absolute;
    right: 2px;
    top: 0;
    width: 62px;
    height: 90px;
    border-radius: 7px;
    transform: rotate(12deg);
    transform-origin: 30% 95%;
    box-shadow: 0 12px 22px -10px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .08);
    transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}
.pv-hero__badge:hover .pv-hero__card { transform: rotate(17deg) translateY(-3px); }
.pv-hero__avatar-wrap {
    position: absolute;
    left: 0;
    bottom: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    padding: 4px;
    /* Anel na cor do hero: recorta o avatar da carta atrás dele. */
    background: #0f1b19;
}
/* Avatar do hero hospeda a moldura cosmética (CosmeticView). */
.pv-hero__avatar {
    width: 86px;
    height: 86px;
    font-size: 36px;
}

.pv-hero__name {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1;
    letter-spacing: .3px;
    color: #fff;
    overflow-wrap: anywhere;
}

/* Patentes: duas colunas separadas por fio, sem caixa dentro da caixa. */
.pv-hero__ranks {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .07);
}
.pv-rank {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    padding: 0 28px;
}
.pv-rank:first-child { padding-left: 0; }
.pv-rank:last-child { padding-right: 0; }
.pv-rank + .pv-rank { border-left: 1px solid rgba(255, 255, 255, .07); }

/* Emblema sobre um halo dourado suave; mais forte quando o jogador está "em chamas". */
.pv-rank__emblem-wrap {
    position: relative;
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
}
.pv-rank__emblem-wrap::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(243, 196, 63, .16), transparent 74%);
}
.pv-rank.is-hot .pv-rank__emblem-wrap::before {
    background: radial-gradient(closest-side, rgba(243, 196, 63, .34), transparent 74%);
}
.pv-rank__emblem {
    position: relative;
    --emblem-size: var(--emblem-xl);
    flex-shrink: 0;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .55));
}

.pv-rank__body {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
}
.pv-rank__top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 9px;
}
.pv-rank__standing {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
}
.pv-rank__streak {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 10px 3px 7px;
    border-radius: 999px;
    background: rgba(243, 196, 63, .12);
    border: 1px solid rgba(243, 196, 63, .32);
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .3px;
    color: #f3c43f;
    white-space: nowrap;
}
.pv-rank__streak .lv-ico { font-size: 17px; }

/* A escada da liga: IV, III, II, I. Já vencidas cheias, a atual pelos pontos. */
.pv-rank__track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
}
.pv-rank__seg {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
}
.pv-rank__seg.is-current { box-shadow: inset 0 0 0 1px rgba(37, 208, 138, .35); }
.pv-rank__seg-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #25d08a, #2ee69a);
    transform-origin: left center;
}
.pv-rank__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2px 12px;
}
.pv-rank__pts {
    font-size: 13px;
    color: #7c8d87;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.pv-rank__pts .pv-num {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #e8edf2;
}
.pv-rank__cap { margin-left: 1px; }
.pv-rank__next { font-size: 13px; color: #9fb0ad; }

/* Abas + painel formam um grupo: mais juntos entre si que do hero. */
.pv-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Painel da aba ativa: ritmo vertical próprio. */
.pv-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ---- Botões e etiquetas comuns às abas (sobre RadzenButton: só decoram) ---- */
.pv-btn.rz-button {
    border-radius: 11px;
    font-family: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
}
.pv-btn--primary.rz-button {
    background: linear-gradient(135deg, #27d68f, #13a06a) !important;
    color: #04231a !important;
    border: none !important;
    box-shadow: 0 6px 18px -6px rgba(37, 208, 138, .6) !important;
}
.pv-btn--primary.rz-button:hover:not(.rz-state-disabled) { filter: brightness(1.08); }
.pv-btn--primary.rz-button.rz-state-disabled {
    background: rgba(255, 255, 255, .06) !important;
    color: #65727f !important;
    box-shadow: none !important;
}
.pv-btn--sm.rz-button {
    min-height: 30px;
    padding: 4px 14px;
    font-size: 13px;
    box-shadow: 0 4px 12px -6px rgba(37, 208, 138, .55) !important;
}
.pv-btn.rz-button:focus-visible { outline: 2px solid #2ee69a; outline-offset: 2px; }

.pv-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 7px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .8px;
    text-transform: uppercase;
}
.pv-tag .lv-ico { font-size: 14px; }
.pv-tag--on { background: rgba(37, 208, 138, .12); color: #25d08a; }

/* =============================================================================
   PLACAR (Visão geral) — uma tabela, colunas alinhadas: 1v1 × 2v2 e
   temporada atual × carreira se comparam de relance. O aproveitamento é a
   coluna que lidera; a carreira fala um tom abaixo da temporada.
   ========================================================================== */
.pv-board { padding: 4px 22px 18px; }
.pv-board__table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}
.pv-board__table thead th,
.pv-board__corner {
    padding: 14px 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.pv-board__table thead th {
    text-align: right;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #7c8896;
    white-space: nowrap;
}
.pv-board__table thead th:last-child { padding-right: 0; }
.pv-board__corner { width: 1%; padding-left: 0; }
.pv-board__short { display: none; }

.pv-board__group th {
    padding: 18px 0 4px;
    text-align: left;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #9fb0ad;
}
.pv-board__note {
    margin-left: 6px;
    font-family: 'Barlow', system-ui, sans-serif;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
    color: #65727f;
}

.pv-board__table tbody th[scope="row"] {
    width: 1%;
    padding: 9px 14px 9px 0;
    text-align: left;
    white-space: nowrap;
}
.pv-board__table tbody td {
    padding: 9px 8px;
    text-align: right;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.1;
    color: #e8edf2;
    white-space: nowrap;
}
.pv-board__table tbody td:last-child { padding-right: 0; }
/* Fio só entre as linhas de um mesmo grupo. */
.pv-board__table tbody tr:not(.pv-board__group) + tr > * { border-top: 1px solid rgba(255, 255, 255, .05); }

.pv-board__table tbody .pv-board__rate { font-size: 30px; }
.pv-board__rate.is-up { color: #25d08a; }
.pv-board__rate.is-empty { color: #65727f; }
.pv-board__win { color: #25d08a !important; }
.pv-board__loss { color: #ef6a5e !important; }
.pv-board__rec .lv-ico {
    font-size: 16px;
    color: #f3c43f;
    margin-right: 2px;
    vertical-align: 2px;
}

/* Carreira: mesmo desenho, um degrau abaixo (a temporada é o "agora"). */
.pv-board__table .pv-board__career td { font-size: 18px; }
.pv-board__table .pv-board__career .pv-board__rate { font-size: 22px; }

.pv-board__table tbody td.pv-board__msg {
    padding: 8px 0 4px;
    text-align: left;
    font-family: 'Barlow', system-ui, sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: #7c8d87;
}

.pv-empty-note {
    font-size: 13px;
    color: #7c8d87;
    padding: 2px 2px;
}
.pv-board__empty {
    margin: 14px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

/* Chip 1v1/2v2 reusa o .lvh-ladder__chip de home-v2.css (idêntico ao da Home). */

/* =============================================================================
   NÚMEROS ANIMÁVEIS (.pv-num) — o texto é o valor de verdade; na entrada
   (.pv-intro, ver ENTRADA) uma camada só visual conta de 0 até ele e some.
   ========================================================================== */
@property --pv-n {
    syntax: '<integer>';
    inherits: false;
    initial-value: 0;
}
.pv-num {
    position: relative;
    display: inline-block;
}

/* O app pinta todo elemento com a cor de texto do tema (`* { color: var(--rz-text-color) }` em app.css):
   os pedaços internos destas telas herdam a cor de quem os contém (vitória verde, derrota coral, rótulos…). */
.pv-num,
.pv-num__text,
.pv-rank__cap,
.pv-board__full,
.pv-board__short,
.pv-char__status > span,
.pv-char__face-name,
.pv-tag .lv-ico,
.pv-lock-pill .lv-ico,
.pv-first__learn .lv-ico,
.pv-first__cta .lv-ico,
.match-chip .lv-ico,
.pv-state .pv-btn .rzi { color: inherit; }

/* =============================================================================
   PRIMEIRA PARTIDA (Visão geral de conta nova) — a escada das ligas com
   "você está aqui" no Bronze IV e o "Jogar agora" da Home.
   ========================================================================== */
.pv-first {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 32px;
    padding: 28px 30px;
    background:
        radial-gradient(110% 100% at 0% 100%, rgba(37, 208, 138, .12), transparent 58%),
        linear-gradient(180deg, #111822, #0d131b);
}
.pv-first__ladder {
    list-style: none;
    margin: 0;
    padding: 30px 0 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 6px;
}
/* Cada liga um degrau acima da anterior, e o emblema crescendo junto. */
.pv-first__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    transform: translateY(calc(var(--i) * -12px));
}
.pv-first__emblem {
    --emblem-size: calc(2.2rem + var(--i) * .35rem);
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5));
}
.pv-first__step:not(.is-here) .pv-first__emblem { filter: grayscale(.4) brightness(.72) drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
.pv-first__league {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #7c8896;
}
.pv-first__step.is-here .pv-first__league { color: #e8edf2; }
.pv-first__here {
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(37, 208, 138, .14);
    border: 1px solid rgba(37, 208, 138, .4);
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .6px;
    color: #25d08a;
    white-space: nowrap;
}

.pv-first__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}
.pv-first__title {
    margin: 0;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 1.02;
    letter-spacing: .3px;
    color: #fff;
    text-wrap: balance;
}
.pv-first__text {
    margin: 0;
    max-width: 46ch;
    font-size: 14px;
    line-height: 1.55;
    color: #9fb0ad;
}
.pv-first__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-top: 6px;
}
/* O CTA herda gradiente, pulse e sheen do lv-quick__cta de /salas (o único pulse da tela). */
.pv-first__cta {
    margin-top: 0;
    min-height: 52px;
    padding: 0 28px;
    justify-content: center;
    text-transform: uppercase;
}
.pv-first__cta:disabled { opacity: .6; cursor: default; animation: none; }
.pv-first__cta:focus-visible { outline: 2px solid #2ee69a; outline-offset: 3px; }
.pv-first__mode {
    padding: 4px 9px;
    border-radius: 6px;
    background: rgba(243, 196, 63, .12);
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .5px;
    color: #f3c43f;
}
.pv-first__learn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #7fd6a6;
    text-decoration: none;
    text-underline-offset: 3px;
}
.pv-first__learn:hover { text-decoration: underline; }
.pv-first__learn:focus-visible { outline: 2px solid #2ee69a; outline-offset: 2px; border-radius: 4px; }
.pv-first__learn .lv-ico { font-size: 18px; }

/* =============================================================================
   TEMPORADAS (aba "Temporadas") — linha do tempo; cada temporada mostra a
   patente final e o pico de cada ladder, e o mesmo placar da Visão geral.
   ========================================================================== */
.pv-timeline {
    list-style: none;
    margin: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-left: 26px;
}
.pv-timeline::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 6px;
    width: 2px;
    background: linear-gradient(180deg, rgba(243, 196, 63, .45), rgba(255, 255, 255, .05));
}
.pv-timeline__entry { position: relative; }
.pv-timeline__marker {
    position: absolute;
    left: -24px;
    top: 22px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffd968, #f3c43f 60%, #d99220);
    box-shadow: 0 0 0 4px rgba(243, 196, 63, .14);
}
.pv-season-card { padding: 18px 22px 8px; }
.pv-season-card__title {
    margin: 0 0 4px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 21px;
    letter-spacing: .3px;
    color: #fff;
}
.pv-season-ladder {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
}
.pv-season-ladder + .pv-season-ladder { border-top: 1px solid rgba(255, 255, 255, .06); }
.pv-season-ladder__emblem {
    --emblem-size: 2.75rem;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5));
}
.pv-season-ladder__id {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.pv-season-ladder__line {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pv-season-ladder__final {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
}
.pv-season-ladder__peak { font-size: 12.5px; color: #8a97a6; }
.pv-season-ladder__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(52px, auto));
    gap: 4px 14px;
    margin: 0;
    font-variant-numeric: tabular-nums;
}
/* Valor em cima, rótulo embaixo (a ordem no HTML segue dt → dd). */
.pv-season-stat {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 3px;
}
.pv-season-stat dt {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #7c8896;
}
.pv-season-stat dd {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 19px;
    line-height: 1;
    color: #e8edf2;
}
.pv-season-stat--win dd { color: #25d08a; }
.pv-season-stat--loss dd { color: #ef6a5e; }
.pv-season-stat--rec .lv-ico { font-size: 15px; color: #f3c43f; }

/* =============================================================================
   HISTÓRICO (aba "Histórico" — MatchHistoryPanel)
   ========================================================================== */
.pv-hist {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pv-hist__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 18px;
}
.pv-hist__metrics {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
}
.pv-metric { display: flex; flex-direction: column; gap: 2px; }
.pv-metric__val {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1;
    color: #f1f6f3;
}
.pv-metric__val--rate { color: #25d08a; }
.pv-metric__val .pv-metric__unit { font-size: 14px; color: #7c8d87; margin: 0 2px 0 1px; }
.pv-metric__label {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #7c8896;
}
/* Filtro de formato: pílulas compactas que não esticam a largura. */
.pv-tabs--inline { flex: 0 0 auto; }

.pv-hist__group { display: flex; flex-direction: column; gap: 8px; }
.pv-hist__day {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #7c8896;
    margin-top: 6px;
}
.pv-loadmore {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding: 11px 22px;
    border-radius: 11px;
    cursor: pointer;
    background: transparent;
    border: 1px solid rgba(37, 208, 138, .25);
    color: #7fd6a6;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
    transition: background .15s;
}
.pv-loadmore:hover { background: rgba(37, 208, 138, .07); }
.pv-loadmore:disabled { opacity: .55; cursor: default; }
.pv-loadmore .lv-ico { font-size: 18px; }
.pv-loadmore:focus-visible { outline: 2px solid #2ee69a; outline-offset: 2px; }

/* ---- Cartão de partida (MatchHistoryCard): o placar abre o cartão, na cor do desfecho ---- */
.match-card {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(180deg, #111822, #0d131b);
    border: 1px solid rgba(255, 255, 255, .07);
    font-family: 'Barlow', system-ui, sans-serif;
    transition: border-color .15s;
}
.match-card:hover { border-color: rgba(255, 255, 255, .14); }
.match-card__score {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 12px 6px;
}
.match-card--win .match-card__score { background: linear-gradient(160deg, rgba(37, 208, 138, .17), rgba(37, 208, 138, .04)); }
.match-card--loss .match-card__score { background: linear-gradient(160deg, rgba(239, 106, 94, .17), rgba(239, 106, 94, .04)); }
.match-score {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.match-score__me { font-size: 30px; }
.match-card--win .match-score__me { color: #25d08a; }
.match-card--loss .match-score__me { color: #ef6a5e; }
.match-score__sep { font-size: 14px; color: #7c8d87; }
.match-score__them { font-size: 22px; color: #9fb0ad; }
.match-outcome {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.match-card--win .match-outcome { color: #25d08a; }
.match-card--loss .match-outcome { color: #ef6a5e; }

.match-card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    min-width: 0;
}
.match-people {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
.match-people__row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.match-people__label {
    min-width: 1.9rem;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #7c8896;
}
.match-people__label--vs { color: #ef6a5e; font-weight: 700; }
.match-people__avatar {
    width: 1.6rem !important;
    height: 1.6rem !important;
    font-size: .7rem !important;
    flex-shrink: 0;
}
.match-people__avatar--vs { border: 1px solid rgba(239, 106, 94, .5); }
.match-people__names {
    font-size: 14px;
    font-weight: 600;
    color: #e8edf2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.match-card__tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.match-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .06);
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .5px;
    color: #cdd6df;
}
.match-chip .lv-ico { font-size: 14px; }
.match-chip--muted { color: #8a97a6; }
.match-chip--forfeit { color: #f3c43f; background: rgba(243, 196, 63, .12); }
.match-card__time {
    margin-left: auto;
    font-size: 12px;
    color: #7c8d87;
    white-space: nowrap;
}

/* =============================================================================
   ESTADOS (vazio / erro) — comuns às abas
   ========================================================================== */
.pv-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    padding: 36px 20px;
    color: #7c8d87;
}
.pv-state .lv-ico { font-size: 40px; color: #65727f; }
.pv-state__title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #e8edf2;
}
.pv-state__text { max-width: 380px; font-size: 13.5px; line-height: 1.5; color: #9fb0ad; }
.pv-state .pv-btn { margin-top: 8px; }

/* =============================================================================
   ABA "CONTA" — só decora; o RadzenTemplateForm fica intacto
   ========================================================================== */
.pv-account { padding: 22px 24px 24px; }
.pv-account__title {
    margin: 0 0 4px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #e8edf2;
}
.pv-account__text {
    margin: 0 0 18px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #9fb0ad;
}
.pv-account__hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 12.5px;
    color: #9fb0ad;
}
.pv-account__hint .lv-ico { font-size: 16px; color: #7c8896; }

/* Convidado: convite centrado para salvar a conta. */
.pv-account--guest {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 24px;
}
.pv-account--guest .pv-account__text { max-width: 400px; margin-bottom: 20px; }
.pv-account__icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: rgba(243, 196, 63, .12);
    border: 1px solid rgba(243, 196, 63, .32);
    color: #f3c43f;
}
.pv-account__icon .lv-ico { font-size: 28px; }

/* ---- Zona de perigo (excluir conta): card coral, ação destrutiva explícita ---- */
.pv-danger {
    margin-top: 18px;
    padding: 20px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    border: 1px solid rgba(239, 106, 94, 0.35);
}
.pv-danger__info { flex: 1; min-width: 240px; }
.pv-danger__title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.5px;
    color: #ef6a5e;
}
.pv-danger__title .lv-ico { font-size: 1.2rem; }
.pv-danger__text {
    margin: 6px 0 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: #9fb0ad;
    max-width: 460px;
}
.pv-danger__btn.rz-button {
    background: rgba(239, 106, 94, 0.12) !important;
    border: 1px solid rgba(239, 106, 94, 0.45) !important;
    color: #ef6a5e !important;
    box-shadow: none !important;
    border-radius: 11px;
    font-weight: 600;
}
.pv-danger__btn.rz-button:hover {
    background: rgba(239, 106, 94, 0.22) !important;
    border-color: #ef6a5e !important;
}

/* =============================================================================
   VESTIÁRIO (aba "Vestiário" — LockerPanel, pv-lock*) — destaque da temporada
   e as coleções. O que está equipado já aparece no hero do perfil.
   ========================================================================== */
.pv-lock {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.pv-lock__intro {
    margin: 0 2px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #9fb0ad;
}

/* ---- Destaque: a peça mais cobiçada (o Lendário da temporada, quando há) ---- */
.pv-lock-hero {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 26px;
    padding: 24px 26px;
    background:
        radial-gradient(110% 130% at 0% 50%, rgba(243, 196, 63, .11), transparent 55%),
        linear-gradient(180deg, #111822, #0d131b);
}
/* Exclusivo de temporada: a paleta do próprio cosmético (Lenda), não da interface. */
.pv-lock-hero--season {
    border-color: rgba(182, 115, 255, .45);
    background:
        radial-gradient(110% 130% at 0% 50%, rgba(182, 115, 255, .16), transparent 55%),
        linear-gradient(180deg, #111822, #0d131b);
}
.pv-lock-hero__art { flex: 0 0 auto; padding: 4px 6px; }
.pv-lock-hero__cardback {
    width: 112px;
    height: 160px;
    border-radius: 11px;
    transform: rotate(-4deg);
    box-shadow: 0 18px 30px -14px rgba(0, 0, 0, .9);
}
.pv-lock-hero__frame {
    width: 112px;
    height: 112px;
    font-size: 48px;
    color: #fff;
    background: rgba(255, 255, 255, .06);
}
.pv-lock-hero__info {
    flex: 1 1 240px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.pv-lock-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px 4px 8px;
    border-radius: 999px;
    background: rgba(243, 196, 63, .12);
    border: 1px solid rgba(243, 196, 63, .32);
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #f3c43f;
}
.pv-lock-pill--season {
    background: linear-gradient(90deg, #6b2ea8, #b673ff);
    border-color: transparent;
    color: #fff;
}
.pv-lock-pill .lv-ico { font-size: 15px; }
.pv-lock-hero__title {
    margin: 0;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 1.02;
    color: #fff;
}
.pv-lock-hero__text {
    margin: 0;
    max-width: 52ch;
    font-size: 13.5px;
    line-height: 1.5;
    color: #9fb0ad;
}
.pv-lock-hero__hint {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: #cdd6df;
}
.pv-lock-hero__hint .lv-ico { font-size: 16px; color: #f3c43f; margin-top: 1px; }
.pv-lock-hero__btn { margin-top: 4px; }

/* ---- Coleções ---- */
.pv-lock-sec { padding: 20px 22px 22px; }
.pv-lock-sec__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}
.pv-lock-sec__title {
    margin: 0;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #e8edf2;
}
.pv-lock-sec__count {
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #9fb0ad;
    font-variant-numeric: tabular-nums;
}
.pv-lock-sec__text {
    margin: 0 0 16px;
    max-width: 62ch;
    font-size: 13px;
    line-height: 1.5;
    color: #8a97a6;
}
.pv-lock-sec__head + .pv-lock-grid { margin-top: 14px; }
.pv-lock-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
    gap: 12px;
}
.pv-lock-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 10px 12px;
    border-radius: 13px;
    background: rgba(8, 11, 17, .55);
    border: 1px solid rgba(255, 255, 255, .06);
    text-align: center;
    transition: border-color .15s;
}
.pv-lock-item:hover { border-color: rgba(255, 255, 255, .14); }
.pv-lock-item.is-equipped {
    border-color: rgba(37, 208, 138, .5);
    background: rgba(37, 208, 138, .07);
}
.pv-lock-item__thumb {
    position: relative;
    display: inline-flex;
    margin-bottom: 4px;
}
/* Bloqueado: silhueta esmaecida sob o cadeado (o cadeado fica nítido). */
.pv-lock-item.is-locked .pv-lock-item__thumb > :not(.pv-lock-item__lock) {
    filter: grayscale(.85) brightness(.5) contrast(.9);
}
.pv-lock-item__cardback {
    width: 72px;
    height: 104px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
    box-shadow: 0 10px 18px -12px rgba(0, 0, 0, .9);
}
.pv-lock-item__cardback--soon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .45);
    background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .05) 0 6px, rgba(255, 255, 255, .02) 6px 12px);
    border: 1px dashed rgba(255, 255, 255, .25);
}
.pv-lock-item__cardback--soon .lv-ico { font-size: 26px; }
.pv-lock-hero__cardback.pv-lock-item__cardback--soon .lv-ico { font-size: 40px; }
.pv-lock-item__frame {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    font-size: 28px;
    color: #fff;
    background: rgba(255, 255, 255, .08);
}
.pv-lock-item__lock {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .92);
}
.pv-lock-item__lock .lv-ico { font-size: 26px; }
.pv-lock-item__name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    color: #e8edf2;
}
.pv-lock-item__season {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #7c8896;
}
.pv-lock-item__state {
    margin-top: auto;
    padding-top: 4px;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pv-lock-item__hint { font-size: 11.5px; line-height: 1.35; color: #8a97a6; }

/* =============================================================================
   ABA "PERSONAGEM" — editor da aparência na mesa 3D (CharacterEditor, pv-char*)
   Coluna da prévia (.pv-char__aside) presa na rolagem e levando as ações
   junto, escolhas à direita. No celular: prévia presa em cima (mais baixa),
   escolhas no meio e a barra de salvar presa embaixo quando há alteração.
   ========================================================================== */
.pv-char {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.pv-char__aside {
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.pv-char__stage {
    position: relative;
    /* Cabe junto com a barra de ações numa tela de notebook comum. */
    height: clamp(300px, calc(100vh - 340px), 440px);
    height: clamp(300px, calc(100dvh - 340px), 440px);
    background:
        radial-gradient(120% 80% at 50% 100%, rgba(37, 208, 138, .10), transparent 60%),
        linear-gradient(180deg, #111822, #0d131b);
}
.pv-char__preview {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .35s ease;
}
.pv-char__preview.is-ready { opacity: 1; }
.pv-char__preview canvas:focus-visible { outline: 2px solid #2ee69a; }

.pv-char__stage-note {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 24px;
    text-align: center;
    font-size: 13px;
    line-height: 1.45;
    color: #9fb0ad;
}
.pv-char__stage-note--off .lv-ico { font-size: 34px; color: #65727f; }

.pv-char__caption {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    padding: 8px 12px;
    border-radius: 11px;
    background: rgba(7, 10, 15, .72);
    border: 1px solid rgba(255, 255, 255, .07);
    pointer-events: none;
}
.pv-char__name {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: .3px;
    color: #fff;
}
.pv-char__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--pv-swatch, repeating-linear-gradient(45deg, #9fb0ad 0 2px, #3a4450 2px 4px));
    border: 1px solid rgba(255, 255, 255, .25);
}
.pv-char__outfit { font-size: 13px; color: #9fb0ad; }
.pv-char__hint {
    margin-left: auto;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #7c8896;
}

/* ---- Barra de ações: status do rascunho + Salvar / Desfazer / Voltar ao padrão ---- */
.pv-char__bar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 16px;
    background: linear-gradient(180deg, #111822, #0d131b);
    border: 1px solid rgba(255, 255, 255, .07);
    transition: border-color .2s;
}
.pv-char__bar.is-dirty { border-color: rgba(243, 196, 63, .35); }
.pv-char__status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .4px;
    color: #7c8896;
}
.pv-char__status .lv-ico { font-size: 17px; color: #25d08a; }
.pv-char__bar.is-dirty .pv-char__status { color: #f3c43f; }
.pv-char__status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f3c43f;
}
.pv-char__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.pv-char__save.rz-button {
    flex: 1 1 auto;
    background: linear-gradient(135deg, #27d68f, #13a06a) !important;
    color: #04231a !important;
    border: none !important;
    border-radius: 11px;
    font-weight: 700;
    box-shadow: 0 6px 16px -8px rgba(37, 208, 138, .6) !important;
}
.pv-char__save.rz-button.rz-state-disabled {
    background: rgba(255, 255, 255, .06) !important;
    color: #65727f !important;
    box-shadow: none !important;
}
.pv-char__ghost.rz-button { border-radius: 11px; font-weight: 600; color: #cdd9d4 !important; }
.pv-char__apply-note { margin: 0 4px; font-size: 12px; }
.pv-char__credits {
    display: inline-block;
    margin-top: 4px;
    color: #8a97a6;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.pv-char__credits:hover,
.pv-char__credits:focus-visible { color: #25d08a; }

/* ---- Escolhas ---- */
.pv-char__controls {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
.pv-char__group { padding: 18px 20px 20px; }
.pv-char__title {
    margin: 0 0 4px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 19px;
    letter-spacing: .5px;
    color: #e8edf2;
}
/* Sub-rótulo (Pessoas, Uniformes, Cor da roupa, Folclore…): mais espaço acima que abaixo. */
.pv-char__subtitle {
    margin: 16px 0 8px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #8a97a6;
}
.pv-char__title + .pv-char__subtitle { margin-top: 10px; }
.pv-char__title + .pv-char__chips,
.pv-char__title + .pv-char__note { margin-top: 10px; }
.pv-char__note {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.45;
    color: #8a97a6;
}
.pv-char__subtitle + .pv-char__note { margin-bottom: 0; }

/* Escolhas: pílulas no mesmo desenho das abas (.pv-tab), contornadas quando soltas. */
.pv-char__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.pv-char__chip {
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .03);
    color: #cdd9d4;
    font-family: 'Barlow', system-ui, sans-serif;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.pv-char__chip:hover:not(:disabled) { border-color: rgba(37, 208, 138, .45); color: #e8edf2; }
.pv-char__chip.is-active {
    background: linear-gradient(135deg, #27d68f, #13a06a);
    border-color: transparent;
    color: #04231a;
    box-shadow: 0 4px 12px -6px rgba(37, 208, 138, .55);
}
/* Fantasia é um atalho (aplica um conjunto), não uma escolha que fica marcada: contorno dourado. */
.pv-char__chip--costume { border-color: rgba(243, 196, 63, .22); }
.pv-char__chip--costume:hover:not(:disabled) { border-color: rgba(243, 196, 63, .6); background: rgba(243, 196, 63, .06); }
.pv-char__chip:disabled { opacity: .38; cursor: not-allowed; }
.pv-char__chip:focus-visible,
.pv-char__swatch:focus-visible {
    outline: 2px solid #2ee69a;
    outline-offset: 2px;
}

/* Cores: bolinhas da cor do tingimento; a original (sem tinta) é listrada. */
.pv-char__swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.pv-char__swatch {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .14);
    background: var(--pv-swatch);
    cursor: pointer;
    transition: transform .15s, border-color .15s;
}
.pv-char__swatch--original { background: repeating-linear-gradient(45deg, #9fb0ad 0 4px, #3a4450 4px 8px); }
.pv-char__swatch:hover { transform: scale(1.08); }
.pv-char__swatch.is-active {
    border-color: #0d131b;
    box-shadow: 0 0 0 2px #25d08a;
}

/* Peças por slot: nome numa coluna à esquerda, escolhas à direita. */
.pv-char__title + .pv-char__slot { margin-top: 12px; }
.pv-char__slot {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 6px 12px;
    align-items: start;
}
.pv-char__slot + .pv-char__slot {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .06);
}
.pv-char__slot-name {
    padding-top: 10px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #8a97a6;
}
.pv-char__slot-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.pv-char__failed {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 28px 18px;
    text-align: center;
    color: #9fb0ad;
}
.pv-char__failed p { margin: 0; }
.pv-char__failed .lv-ico { font-size: 32px; color: #65727f; }

@media (max-width: 760px) {
    /* A coluna da prévia se desfaz: prévia, escolhas e barra viram itens da grade. */
    .pv-char { grid-template-columns: 1fr; gap: 14px; }
    .pv-char__aside { display: contents; }

    /* Prévia presa no topo da rolagem, baixa, para ver cada troca sem voltar lá em cima. */
    /* top/bottom negativos compensam o padding de 16px da área que rola (.rz-body): a prévia
       encosta no cabeçalho, sem chips passando por cima dela. */
    .pv-char__stage {
        order: 1;
        position: sticky;
        top: -16px;
        z-index: 2;
        height: 230px;
        box-shadow: 0 14px 24px -14px rgba(0, 0, 0, .9);
    }
    .pv-char__controls { order: 2; }
    .pv-char__bar { order: 3; }
    .pv-char__apply-note { order: 4; }

    /* Com alteração pendente, a barra fica presa embaixo até salvar ou desfazer. */
    .pv-char__bar {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        padding: 10px 12px;
    }
    .pv-char__bar.is-dirty {
        position: sticky;
        bottom: -4px;
        z-index: 2;
        gap: 8px;
        box-shadow: 0 -10px 30px -10px rgba(0, 0, 0, .85);
    }
    /* Presa embaixo, a barra só leva salvar/desfazer; "Voltar ao padrão" volta ao sair do rascunho. */
    .pv-char__bar.is-dirty .pv-char__reset { display: none; }
    .pv-char__bar.is-dirty .pv-char__status { flex: 1 0 100%; font-size: 13px; }
    .pv-char__bar.is-dirty .pv-char__actions { flex: 1 0 100%; }
    .pv-char__bar.is-dirty .pv-char__actions .rz-button { flex: 1 1 0; min-width: 0; }
    .pv-char__save.rz-button { flex: 0 0 auto; }

    .pv-char__group { padding: 16px; }
    .pv-char__slot { grid-template-columns: 1fr; gap: 6px; }
    .pv-char__slot-name { padding-top: 0; }
}

/* Telas bem estreitas: botões da barra sem ícone para "Desfazer" caber inteiro. */
@media (max-width: 400px) {
    .pv-char__bar.is-dirty .pv-char__actions .rz-button {
        padding-inline: 8px;
        font-size: 13px;
        letter-spacing: .5px;
    }
    .pv-char__bar.is-dirty .pv-char__actions .rz-button-icon-left { display: none; }
}

/* Celular deitado / tela baixa: a prévia presa tomaria a tela toda. */
@media (max-width: 760px) and (max-height: 560px) {
    .pv-char__stage { position: relative; height: 200px; }
}

/* Personagens: rosto + nome (retratos de `npm run portraits`, wwwroot/images/personagens/). */
.pv-char__faces {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
}
.pv-char__title + .pv-char__faces { margin-top: 12px; }
.pv-char__face {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 9px 4px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .07);
    background: rgba(255, 255, 255, .025);
    color: #cdd9d4;
    font-family: 'Barlow', system-ui, sans-serif;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .15s;
}
.pv-char__face:hover { border-color: rgba(37, 208, 138, .45); transform: translateY(-1px); }
.pv-char__face.is-active {
    border-color: #25d08a;
    background: linear-gradient(180deg, rgba(37, 208, 138, .18), rgba(37, 208, 138, .04));
    box-shadow: 0 6px 16px -10px rgba(37, 208, 138, .7);
    color: #fff;
}
.pv-char__face:focus-visible { outline: 2px solid #2ee69a; outline-offset: 2px; }
.pv-char__face-img {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    background: radial-gradient(circle at 50% 35%, #223040, #0d131b 76%);
}
.pv-char__face-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pv-char__face.is-active .pv-char__face-img { box-shadow: 0 0 0 2px #25d08a; }
.pv-char__face-initial {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 26px;
    color: #9fb0ad;
}
.pv-char__face-name {
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* =============================================================================
   SKELETONS de carregamento (linguagem v2)
   ========================================================================== */
.pv-skel-hero {
    height: 248px;
    border-radius: 20px;
    background: linear-gradient(180deg, #111822, #0d131b);
    border: 1px solid rgba(255, 255, 255, .06);
    animation: pv-pulse 1.4s ease-in-out infinite;
}
.pv-skel-card {
    height: 190px;
    border-radius: 18px;
    background: linear-gradient(180deg, #111822, #0d131b);
    border: 1px solid rgba(255, 255, 255, .06);
    animation: pv-pulse 1.4s ease-in-out infinite;
}
@keyframes pv-pulse {
    0%, 100% { opacity: .55; }
    50% { opacity: 1; }
}

/* =============================================================================
   ENTRADA (.pv-intro) — o único momento animado da página, na primeira visão:
   o verso assenta atrás do avatar, a escada da liga enche degrau a degrau e os
   números sobem de 0. Só existe para quem não pediu movimento reduzido.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    .pv-intro .pv-hero__card {
        animation: pv-card-in .8s cubic-bezier(.16, 1, .3, 1) .1s both;
    }
    .pv-intro .pv-rank__seg-fill {
        animation: pv-fill .7s cubic-bezier(.16, 1, .3, 1) both;
        animation-delay: calc(.25s + var(--i) * .12s);
    }
    .pv-intro .pv-first__step {
        animation: pv-step-in .6s cubic-bezier(.16, 1, .3, 1) both;
        animation-delay: calc(.1s + var(--i) * .08s);
    }

    /* Números: o texto real fica invisível enquanto uma camada só visual (sem texto alternativo para
       leitores de tela) conta de 0 até --v; no fim a camada some e o texto volta. Sem suporte ao
       content com texto alternativo, a regra cai inteira e o número só aparece ao fim da contagem. */
    .pv-intro .pv-num__text { animation: pv-num-reveal .9s steps(1, end) .2s both; }
    .pv-intro .pv-num::after {
        content: counter(pv-n) attr(data-suffix) / "";
        counter-reset: pv-n var(--pv-n);
        position: absolute;
        top: 0;
        right: 0;
        white-space: nowrap;
        pointer-events: none;
        animation:
            pv-count .9s cubic-bezier(.16, 1, .3, 1) .2s both,
            pv-num-hide .9s steps(1, end) .2s both;
    }
}
@keyframes pv-card-in {
    from { opacity: 0; transform: translate(-30px, 12px) rotate(-6deg); }
    to { opacity: 1; transform: rotate(12deg); }
}
@keyframes pv-fill {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}
@keyframes pv-step-in {
    from { opacity: 0; translate: 0 10px; }
    to { opacity: 1; translate: 0 0; }
}
@keyframes pv-count {
    from { --pv-n: 0; }
    to { --pv-n: var(--v); }
}
@keyframes pv-num-reveal {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes pv-num-hide {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* =============================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width: 640px) {
    .pv-hero { gap: 20px; }
    .pv-hero__id { gap: 16px; }
    .pv-hero__badge { width: 100px; height: 84px; }
    .pv-hero__card { width: 50px; height: 73px; }
    .pv-hero__avatar { width: 70px; height: 70px; font-size: 30px; }
    .pv-hero__name { font-size: 30px; }

    /* Patentes empilhadas, separadas por fio horizontal. */
    .pv-hero__ranks { grid-template-columns: 1fr; padding-top: 18px; }
    .pv-rank,
    .pv-rank:first-child,
    .pv-rank:last-child { padding: 0; gap: 14px; }
    .pv-rank + .pv-rank {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .07);
        margin-top: 16px;
        padding-top: 16px;
    }
    .pv-rank__emblem-wrap { width: 3.5rem; height: 3.5rem; }
    .pv-rank__emblem { --emblem-size: 2.9rem; }
    .pv-rank__standing { font-size: 24px; }

    .pv-board { padding: 2px 16px 16px; }
    .pv-board__table thead th,
    .pv-board__corner { padding: 12px 4px 8px; }
    .pv-board__table thead th { font-size: 10px; letter-spacing: 1px; }
    .pv-board__table tbody th[scope="row"] { padding-right: 8px; }
    .pv-board__table tbody td { padding: 8px 4px; font-size: 20px; }
    .pv-board__table tbody .pv-board__rate { font-size: 24px; }
    .pv-board__table .pv-board__career td { font-size: 17px; }
    .pv-board__table .pv-board__career .pv-board__rate { font-size: 19px; }
    .pv-board__rec .lv-ico { font-size: 14px; }

    .pv-first { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 22px 18px; }
    .pv-first__ladder { padding-top: 26px; gap: 2px; }
    .pv-first__emblem { --emblem-size: calc(1.9rem + var(--i) * .3rem); }
    .pv-first__title { font-size: 25px; }
    .pv-first__cta { width: 100%; }

    .pv-season-card { padding: 16px 16px 6px; }
    .pv-season-ladder { grid-template-columns: auto minmax(0, 1fr); row-gap: 12px; }
    .pv-season-ladder__stats {
        grid-column: 1 / -1;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .pv-season-stat { align-items: flex-start; }

    .match-card { grid-template-columns: 78px minmax(0, 1fr); }
    .match-score__me { font-size: 26px; }
    .match-score__them { font-size: 19px; }
    .match-card__body { padding: 11px 12px; }

    .pv-lock-hero { gap: 18px; padding: 20px 18px; }
    .pv-lock-hero__cardback { width: 88px; height: 126px; }
    .pv-lock-hero__frame { width: 88px; height: 88px; font-size: 38px; }
    .pv-lock-hero__title { font-size: 25px; }
    .pv-lock-sec { padding: 18px 16px 18px; }
    .pv-lock-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }

    .pv-char__faces { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }

    .pv-account { padding: 20px 18px; }
}

@media (max-width: 400px) {
    .pv-hero__id { gap: 12px; }
    .pv-hero__badge { width: 86px; height: 72px; }
    .pv-hero__card { width: 42px; height: 62px; }
    .pv-hero__avatar { width: 58px; height: 58px; font-size: 24px; }
    /* Nome longo: no máximo duas linhas (o completo fica no title). */
    .pv-hero__name {
        font-size: 24px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    /* Cabeçalho curto (o completo continua acessível) e colunas mais justas. */
    .pv-board { padding: 2px 12px 14px; }
    .pv-board__full {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .pv-board__short { display: inline; }
    .pv-board__table thead th,
    .pv-board__corner { padding: 12px 3px 8px; }
    .pv-board__table tbody th[scope="row"] { padding-right: 6px; }
    .pv-board__table tbody td { padding: 8px 3px; font-size: 18px; }
    .pv-board__table tbody .pv-board__rate { font-size: 21px; }
    .pv-board__table .pv-board__career td { font-size: 16px; }
    .pv-board__table .pv-board__career .pv-board__rate { font-size: 17px; }

    .pv-first__league { font-size: 9.5px; letter-spacing: .6px; }
    .pv-first__here { font-size: 10px; padding: 1px 6px; }

    .match-card { grid-template-columns: 68px minmax(0, 1fr); }
}

/* =============================================================================
   ACESSIBILIDADE — movimento reduzido suprime animações de entrada/contínuas
   (auras/naipes do palco já são congelados por lobby-v2.css; a entrada
   .pv-intro só existe sob prefers-reduced-motion: no-preference)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .pv-skel-hero,
    .pv-skel-card,
    .pv-first__cta { animation: none !important; }
    .pv-hero__card,
    .pv-char__preview,
    .pv-char__bar,
    .pv-char__chip,
    .pv-char__face,
    .pv-char__swatch { transition: none; }
    .pv-hero__badge:hover .pv-hero__card { transform: rotate(12deg); }
    .pv-char__swatch:hover,
    .pv-char__face:hover { transform: none; }
}

/* =============================================================================
   VER NA MESA (player-avatar-showcase) — o botão contornado do hero/Home e o
   visualizador 3D (AvatarViewerDialog, chrome crd-*). Mesmo palco da prévia do
   editor; sem animação contínua (o personagem só gira sob comando).
   ========================================================================== */
.pv-hero__who {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.pv-hero__who .pv-hero__name { flex: none; max-width: 100%; }

.pv-show-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 6px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .03);
    color: #cdd9d4;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .8px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.pv-show-btn .lv-ico { font-size: 18px; color: inherit; }
.pv-show-btn > span { color: inherit; }
.pv-show-btn:hover { border-color: rgba(37, 208, 138, .45); background: rgba(37, 208, 138, .06); color: #fff; }
.pv-show-btn:focus-visible { outline: 2px solid #2ee69a; outline-offset: 2px; }

.pv-show-dialog.rz-dialog { width: min(520px, calc(100vw - 24px)) !important; }
.pv-show__title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.pv-show__stage {
    position: relative;
    height: 360px;
    flex-shrink: 0;
    background:
        radial-gradient(120% 80% at 50% 100%, rgba(37, 208, 138, .10), transparent 60%),
        linear-gradient(180deg, #111822, #0d131b);
}
.pv-show__preview {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .35s ease;
}
.pv-show__preview.is-ready { opacity: 1; }
.pv-show__preview canvas:focus-visible { outline: 2px solid #2ee69a; outline-offset: -2px; }
.pv-show__note {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 24px;
    text-align: center;
    font-size: 14px;
    color: #9fb0ad;
}
.pv-show__note--off .lv-ico { font-size: 34px; color: #65727f; }
.pv-show__caption {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 12px 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .05);
}
.pv-show__look {
    min-width: 0;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 17px;
    color: #eef4f1;
}
.pv-show__hint {
    margin-left: auto;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #7c8896;
}
/* O .crd-submit nativo não tem cor própria (só a variante coral): aqui o emerald do .crd-submit Radzen. */
.pv-show__customize {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #27d68f, #13a06a);
    color: #04231a;
    box-shadow: 0 8px 20px -8px rgba(37, 208, 138, .55);
}
.pv-show__customize,
.pv-show__customize .lv-ico { color: #04231a; }
.pv-show__customize .lv-ico { font-size: 18px; }
.pv-show__customize:focus-visible { outline: 2px solid #2ee69a; outline-offset: 2px; }

@media (max-width: 640px) {
    .pv-show__stage { height: min(55vh, 380px); height: min(55dvh, 380px); }
    .pv-show__caption { padding: 10px 1rem; }
    .pv-show__hint { margin-left: 0; }
}
@media (max-height: 560px) {
    .pv-show__stage { height: 200px; }
}
@media (prefers-reduced-motion: reduce) {
    .pv-show__preview { transition: none; }
}

/* Perfil a um toque (player-avatar-showcase): nomes do histórico viram links discretos. */
.match-people__link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    transition: border-color .15s ease, color .15s ease;
}
.match-people__link:hover { color: #fff; border-bottom-color: #25d08a; }
.match-people__link:focus-visible { outline: 2px solid #2ee69a; outline-offset: 2px; border-radius: 3px; }
.match-people__names > span { color: inherit; }