/* =============================================================================
   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);
}
/* 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 DE IDENTIDADE — receita do .lvh-welcome + selo do verso equipado
   (reaproveita .lvh-welcome*, .lvh-ladder* de home-v2.css)
   ========================================================================== */
/* Avatar do hero hospeda a moldura cosmética (CosmeticView) — maior que o da Home. */
.pv-hero__avatar {
    width: 92px;
    height: 92px;
    font-size: 38px;
}

/* Selo do verso de carta equipado, à direita do hero. */
.pv-hero__seal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
}
.pv-hero__cardback {
    width: 76px;
    height: 110px;
    border-radius: 9px;
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .8);
}
.pv-hero__cardback-default {
    width: 100%;
    height: 100%;
    border-radius: 9px;
    background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .06) 0 6px, rgba(255, 255, 255, .02) 6px 12px);
    border: 1px dashed rgba(255, 255, 255, .2);
}
.pv-hero__seal-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #6f857d;
}

/* Emblema de patente dentro da linha de ladder do hero. */
.lvh-ladder .pv-ladder__emblem { --emblem-size: var(--emblem-md); flex-shrink: 0; }

/* =============================================================================
   CABEÇALHO DE SEÇÃO (eyebrow com ícone) — reusado nas abas
   ========================================================================== */
.pv-sec {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 2px -4px;
}
.pv-sec .lv-ico { font-size: 18px; color: #f3c43f; }
.pv-sec__title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #9fb0ad;
}
.pv-sec__note { font-size: 12px; color: #65727f; }

/* Painel da aba ativa: ritmo vertical próprio (menor que o gap do palco). */
.pv-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* =============================================================================
   GRADE DE DOIS CARDS (ladder / carreira) — 1 coluna no mobile
   ========================================================================== */
.pv-grid2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 640px) {
    .pv-grid2 { grid-template-columns: 1fr; }
}

/* =============================================================================
   CARD DE LADDER (Visão geral) — superfície .lvh-card + anel de win rate
   ========================================================================== */
.pv-stat { padding: 18px; }
.pv-stat__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.pv-stat__id {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
.pv-stat__rank {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pv-stat__rank .rank-emblem { --emblem-size: var(--emblem-2xl); flex-shrink: 0; }
.pv-stat__rank .lv-ico { font-size: 22px; color: #f3c43f; }
.pv-stat__standing {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 17px;
    color: #eef4f1;
}
.pv-stat__pts { font-size: 12px; color: #7c8d87; }

/* Anel de aproveitamento em CSS puro (conic-gradient) — sem RadzenProgressBarCircular. */
.pv-ring-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
}
.pv-ring {
    position: relative;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    /* Buraco (cor do card) + arco de progresso. --pct e --pv-ring-color vêm inline. */
    background:
        radial-gradient(closest-side, #0e151d 70%, transparent 72%),
        conic-gradient(var(--pv-ring-color, #25d08a) calc(var(--pct, 0) * 1%), rgba(255, 255, 255, .08) 0);
    animation: pv-ring-in .5s ease both;
}
.pv-ring__label {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #f1f6f3;
}
.pv-ring-wrap__label {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #6f857d;
}
@keyframes pv-ring-in {
    from { opacity: 0; transform: scale(.85); }
    to   { opacity: 1; transform: scale(1); }
}

.pv-stat__divider {
    height: 1px;
    background: rgba(255, 255, 255, .08);
    margin: 14px 0;
    border: 0;
}
.pv-stat__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.pv-mini { display: flex; flex-direction: column; gap: 2px; }
.pv-mini--end { align-items: flex-end; text-align: right; }
.pv-mini__val {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1;
    color: #f1f6f3;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.pv-mini__val--win { color: #25d08a; }
.pv-mini__val--loss { color: #ef6a5e; }
.pv-mini__val .lv-ico { font-size: 18px; color: #f3c43f; }
.pv-mini__val .pv-mini__rec {
    font-family: 'Barlow', system-ui, sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: #7c8d87;
}
.pv-mini__label {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #6f857d;
}
.pv-row { display: flex; gap: 20px; }

.pv-empty-note {
    font-size: 13px;
    color: #7c8d87;
    padding: 2px 2px;
}

/* =============================================================================
   CARD DE CARREIRA (totais vitalícios)
   ========================================================================== */
.pv-career {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pv-career__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px 8px;
}
.pv-career__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
    min-width: 0;
}
.pv-career__val {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 19px;
    line-height: 1.1;
    color: #f1f6f3;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.pv-career__val--win { color: #25d08a; }
.pv-career__val--loss { color: #ef6a5e; }
.pv-career__val .lv-ico { font-size: 15px; color: #f3c43f; }
.pv-career__label {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #6f857d;
}
@media (max-width: 420px) {
    .pv-career__stats { grid-template-columns: repeat(2, 1fr); gap: 14px 8px; }
}

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

/* =============================================================================
   TIMELINE DE TEMPORADAS (aba "Temporadas") — trilho v2
   ========================================================================== */
.pv-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-left: 24px;
}
.pv-timeline::before {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 6px;
    width: 2px;
    background: linear-gradient(180deg, rgba(243, 196, 63, .4), rgba(255, 255, 255, .06));
}
.pv-timeline__entry { position: relative; }
.pv-timeline__marker {
    position: absolute;
    left: -22px;
    top: 18px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #f5cf3d, #f3c43f 60%, #d99220);
    box-shadow: 0 0 0 3px rgba(243, 196, 63, .14);
}
.pv-season-card { padding: 16px 18px; }
.pv-season-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.pv-season-card__head .lv-ico { font-size: 19px; color: #f3c43f; }
.pv-season-card__title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: .5px;
    color: #f3e1a0;
}
.pv-season-ladder { padding: 6px 0; }
.pv-season-ladder__top {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pv-season-ladder__top .rank-emblem { --emblem-size: var(--emblem-md); flex-shrink: 0; }
.pv-season-ladder__final {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: #eef4f1;
}
.pv-season-ladder__peak { font-size: 11px; color: #7c8d87; }
.pv-season-ladder__stats {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.pv-season-stat { font-size: 13px; color: #9fb0ad; white-space: nowrap; }
.pv-season-stat b { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; }
.pv-season-stat--win b { color: #25d08a; }
.pv-season-stat--loss b { color: #ef6a5e; }
.pv-season-stat .lv-ico { font-size: 14px; color: #f3c43f; vertical-align: -2px; }

/* =============================================================================
   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: #6f857d;
}
/* 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: #6f857d;
    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; }

/* =============================================================================
   ESTADOS (vazio / erro) — comuns às abas
   ========================================================================== */
.pv-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    padding: 32px 16px;
    color: #7c8d87;
}
.pv-state .lv-ico { font-size: 40px; opacity: .7; }
.pv-state__text { font-size: 13px; max-width: 360px; }

/* =============================================================================
   CONTAINER DA ABA "CONTA" — só decora; o RadzenTemplateForm fica intacto
   ========================================================================== */
.pv-account { padding: 22px; }
.pv-account__guest {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    padding: 12px 4px;
}

/* ---- 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;
}

/* =============================================================================
   SKELETONS de carregamento (linguagem v2)
   ========================================================================== */
.pv-skel-hero {
    height: 150px;
    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; }
}

/* =============================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width: 640px) {
    .pv-hero__avatar { width: 72px; height: 72px; font-size: 30px; }
    .pv-stat { padding: 16px; }
    .pv-stat__foot { gap: 10px; }
    .pv-row { gap: 14px; }
}

/* =============================================================================
   ACESSIBILIDADE — movimento reduzido suprime animações de entrada/contínuas
   (auras/naipes do palco já são congelados por lobby-v2.css)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .pv-ring,
    .pv-skel-hero,
    .pv-skel-card { animation: none !important; }
}