/* =============================================================================
   HOME v2 (Lobby Principal) — mesma linguagem visual do lobby-v2.css (RoomIndex
   /salas). Escopo: classes lvh-*. Reaproveita os primitivos lv-* (lv-bg, lv-ico,
   lv-quick__cta, lv-sheen) e as animações greenPulse/sheen de lobby-v2.css.

   Hierarquia da página (de cima para baixo):
     1. lvh-hero  — um pedaço do FELTRO da mesa: título, "Jogar agora" (o único
                    elemento pulsante da tela) e a mão de cartas com o verso
                    equipado do jogador.
     2. lvh-grid  — coluna principal (Mesas abertas → lvh-me "Sua temporada":
                    patente + prazo + prêmio da virada) | lateral (Últimas
                    partidas → Topo da temporada). No celular, uma coluna só.

   ATENÇÃO: o Perfil (Profile.razor) reutiliza lvh-card, lvh-welcome*, lvh-ladder*,
   lvh-srow e lvh-fill — esses blocos ficam no fim do arquivo e não devem sair.
   ========================================================================== */

/* ---- Utilitários ----------------------------------------------------------- */
.lvh-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Ícones Material Symbols preenchidos (FILL 1). */
.lvh-fill { font-variation-settings: 'opsz' 24, 'wght' 400, 'FILL' 1, 'GRAD' 0; }

.lvh-win  { color: #25d08a; }
.lvh-loss { color: #ef6a5e; }

.lvh-muted {
    color: #7c8d87;
    font-size: 13px;
    padding: 4px 2px;
    margin: 0;
}

/* Link-botão de texto (ações terciárias: Ver perfil, Ver todas, Agora não...). */
.lvh-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    /* Alvo de toque de 44px (polegar) sem mudar o peso visual do link. */
    min-height: 44px;
    padding: 0 2px;
    border: none;
    background: none;
    cursor: pointer;
    font-family: 'Barlow', system-ui, sans-serif;
    font-weight: 600;
    font-size: 13.5px;
    color: #5fe49a;
    text-decoration: none;
    text-underline-offset: 3px;
    white-space: nowrap;
}
.lvh-link:hover { text-decoration: underline; }
.lvh-link .lv-ico { font-size: 17px; color: currentColor; transition: transform .2s cubic-bezier(.16, 1, .3, 1); }
.lvh-link:hover .lv-ico { transform: translateX(2px); }
.lvh-link--strong { color: #2ee69a; font-weight: 700; }

.lvh-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 16px;
    border-radius: 11px;
    cursor: pointer;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #e3f3ec;
    font-family: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: background .15s, border-color .15s;
}
.lvh-ghost:hover { background: rgba(37, 208, 138, .12); border-color: rgba(37, 208, 138, .4); }
.lvh-ghost .lv-ico { font-size: 19px; color: #e3f3ec; }

/* Foco visível em todo controle próprio da Home. */
.lobby-v2 .lvh-link:focus-visible,
.lobby-v2 .lvh-ghost:focus-visible,
.lobby-v2 .lvh-enter:focus-visible,
.lobby-v2 .lvh-hero__cta:focus-visible {
    outline: 2px solid #2ee69a;
    outline-offset: 2px;
    border-radius: 11px;
}

/* =============================================================================
   1. HERÓI — o feltro da mesa
   ========================================================================== */
.lvh-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px;
    padding: 38px 40px 34px;
    border-radius: 22px;
    overflow: hidden;
    isolation: isolate;
    /* Poço de luz esmeralda sobre a mão + feltro radial (mesmo core/mid/edge da mesa). */
    background:
        radial-gradient(55% 70% at 80% 48%, rgba(46, 230, 154, .16), transparent 70%),
        radial-gradient(140% 150% at 72% 40%, #134d38 0%, #0b3327 42%, #06140e 100%);
    border: 1px solid rgba(243, 196, 63, .24);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .05),
        inset 0 0 90px rgba(0, 0, 0, .45),
        0 26px 50px -30px rgba(0, 0, 0, .85);
}
/* Trama do feltro: fibra diagonal quase invisível. */
.lvh-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .014) 0 1px, transparent 1px 4px);
}

.lvh-hero__copy { min-width: 0; }

.lvh-hero__title {
    margin: 0;
    font-family: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(38px, 4.2vw, 58px);
    line-height: .92;
    letter-spacing: .2px;
    color: #fff;
    text-wrap: balance;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}

.lvh-hero__lead {
    margin: 14px 0 0;
    max-width: 44ch;
    font-size: 15.5px;
    line-height: 1.5;
    color: #b9d6c9;
}
.lvh-hero__lead strong { color: #fff; font-weight: 600; overflow-wrap: anywhere; }

/* Linha viva: "● 2 mesas de [Paulista 2v2] esperando" + "Trocar modo". */
.lvh-hero__live {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 14px;
    margin: 12px 0 0;
}
.lvh-hero__live-text {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin: 0;
    padding: 6px 0;
    font-size: 14px;
    line-height: 1.6;
    color: #b9d6c9;
}
.lvh-hero__count {
    font-family: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #fff;
    margin-right: 2px;
}
/* O modo é a regra da mesa: tag dourada, como as tags de regra dos cards do lobby. */
.lvh-mode-tag {
    display: inline-block;
    padding: 0 7px;
    border-radius: 6px;
    background: rgba(243, 196, 63, .14);
    color: #f3c43f;
    font-family: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
    font-weight: 700;
    font-size: 15.5px;
    letter-spacing: .4px;
    white-space: nowrap;
}
.lvh-hero__switch { color: #8fe9bd; }
.lvh-hero__switch .lv-ico { font-size: 18px; }
.lvh-hero__switch:hover .lv-ico { transform: none; }

/* Escolha do modo/formato: dois segmentados (skin global crd-seg) + a legenda da regra. */
.lvh-mode {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 200px));
    gap: 8px 10px;
    margin-top: 4px;
    animation: lvhModeIn .28s cubic-bezier(.16, 1, .3, 1);
}
.lvh-mode .rz-selectbar .rz-button { min-height: 40px; font-family: 'Barlow Condensed', 'Barlow', system-ui, sans-serif; font-weight: 700; font-size: 15px; letter-spacing: .5px; }
.lvh-mode .rz-selectbar .rz-button:focus-visible { outline: 2px solid #2ee69a; outline-offset: 2px; }
.lvh-mode__hint { grid-column: 1 / -1; margin: 0; font-size: 13px; line-height: 1.45; color: #9fd9bd; }

@keyframes lvhModeIn {
    from { opacity: 0; transform: translateY(-4px); }
}
.lvh-hero__live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2ee69a;
    box-shadow: 0 0 0 4px rgba(46, 230, 154, .16);
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 8px;
}

.lvh-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}
/* O CTA herda gradiente, pulse e sheen do lv-quick__cta de /salas. */
.lvh-hero__cta {
    margin-top: 0;
    min-height: 56px;
    padding: 0 32px;
    justify-content: center;
    font-size: 20px;
    text-transform: uppercase;
    transition: filter .15s, transform .15s;
}
.lvh-hero__cta:hover { transform: translateY(-1px); }
.lvh-hero__cta:disabled { opacity: .6; cursor: default; animation: none; transform: none; }
.lvh-hero__cta .lv-ico { font-size: 23px; color: #04231a !important; }
.lvh-hero__ghost {
    min-height: 56px;
    padding: 0 24px;
    background: rgba(3, 18, 12, .45);
    border-color: rgba(255, 255, 255, .16);
    font-size: 17px;
}

/* Oferta da prática guiada (1ª vez): linha discreta ABAIXO do herói, dispensável — o herói
   fica com uma decisão só (jogar/criar). Night card + hairline, sem cor de estado. */
.lvh-learn {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 6px 16px;
    border-radius: 16px;
    background: linear-gradient(180deg, #111822, #0d131b);
    border: 1px solid rgba(255, 255, 255, .07);
    font-size: 14px;
    color: #cdd6df;
}
.lvh-learn > .lv-ico { font-size: 20px; color: #7c8896; }
.lvh-learn__text { flex: 1 1 220px; min-width: 0; padding: 8px 0; }
.lvh-learn__actions { display: inline-flex; gap: 14px; }
.lvh-learn .lvh-link:not(.lvh-link--strong) { color: #9aa6b3; }

/* ---- A mão: verso equipado (monte) + três cartas em leque ------------------ */
.lvh-hand {
    /* Posição do monte (verso): as cartas saem dali no "deal". */
    --deal-from: -136px;
    position: relative;
    width: 330px;
    height: 250px;
    flex: none;
}
.lvh-hand__shadow {
    position: absolute;
    left: 56%;
    bottom: 14px;
    width: 250px;
    height: 34px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse, rgba(0, 0, 0, .55), transparent 70%);
    filter: blur(5px);
}
.lvh-hand__card {
    --fan-x: 0px;
    --fan-y: 0px;
    --fan-r: 0deg;
    position: absolute;
    left: 52%;
    bottom: 30px;
    width: 116px;
    aspect-ratio: 2 / 3;
    border-radius: 10px;
    object-fit: contain;
    transform-origin: 50% 100%;
    transform: translateX(calc(-50% + var(--fan-x))) translateY(var(--fan-y)) rotate(var(--fan-r));
    filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .5));
    transition: transform .45s cubic-bezier(.16, 1, .3, 1);
    /* Entrada: as cartas saem do monte e abrem o leque (uma vez só). */
    animation: lvhDeal .8s cubic-bezier(.16, 1, .3, 1) backwards;
}
.lvh-hand__card--back {
    --fan-x: var(--deal-from);
    --fan-y: -4px;
    --fan-r: -11deg;
    overflow: hidden;
    animation: none;
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .55));
}
/* O verso (cosmético ou padrão) preenche o host da carta. */
.lvh-hand__back { position: absolute; inset: 0; border-radius: inherit; }
/* Leque aberto o bastante para o índice de cada carta (7♥, A♠, 4♣) ficar legível. */
.lvh-hand__card--1 { --fan-x: -60px; --fan-y: 6px;  --fan-r: -14deg; z-index: 1; animation-delay: .12s; }
.lvh-hand__card--2 { --fan-x: 0px;   --fan-y: -8px; --fan-r: 0deg;   z-index: 2; animation-delay: .2s; }
.lvh-hand__card--3 { --fan-x: 60px;  --fan-y: 6px;  --fan-r: 14deg;  z-index: 3; animation-delay: .28s; }

/* Ao passar o mouse no herói, a mão abre um pouco mais. */
.lvh-hero:hover .lvh-hand__card--1 { --fan-x: -70px; --fan-r: -19deg; }
.lvh-hero:hover .lvh-hand__card--2 { --fan-y: -14px; }
.lvh-hero:hover .lvh-hand__card--3 { --fan-x: 70px;  --fan-r: 19deg; }

@keyframes lvhDeal {
    from { transform: translateX(calc(-50% + var(--deal-from))) translateY(-4px) rotate(-11deg); }
}

/* =============================================================================
   2. SUA TEMPORADA — identidade + patentes
   ========================================================================== */
.lvh-me {
    position: relative;
    padding: 22px 24px;
    border-radius: 20px;
    background: linear-gradient(180deg, #111822, #0d131b);
    border: 1px solid rgba(255, 255, 255, .07);
    box-shadow: 0 10px 30px -16px rgba(0, 0, 0, .7);
}

.lvh-me__head {
    display: flex;
    align-items: center;
    gap: 14px;
}
.lvh-me__avatar {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 23px;
    color: #e8edf2;
    background: rgba(255, 255, 255, .06);
    flex-shrink: 0;
}
.lvh-me__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lvh-me__name {
    margin: 0;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 25px;
    line-height: 1.05;
    color: #fff;
    overflow-wrap: anywhere;
}
.lvh-me__season { font-size: 13.5px; color: #9aa6b3; }
.lvh-me__profile { margin-left: auto; align-self: center; }
.lvh-me__state { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; margin-top: 16px; font-size: 14px; }
.lvh-me__state .lvh-muted { display: flex; align-items: center; gap: 8px; font-size: 14px; }

.lvh-me__ladders {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.lvh-rank {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    border-radius: 14px;
    background: rgba(8, 11, 17, .6);
    border: 1px solid rgba(255, 255, 255, .06);
}
/* A ladder principal (maior liga) ganha o fio dourado. */
.lvh-rank--main {
    background: linear-gradient(135deg, rgba(243, 196, 63, .07), rgba(8, 11, 17, .6) 55%);
    border-color: rgba(243, 196, 63, .26);
}
.lvh-rank__emblem { --emblem-size: 3.6rem; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); }
.lvh-rank__body { flex: 1; min-width: 0; }
.lvh-rank__top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.lvh-rank__format {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1px;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .07);
    color: #cdd6df;
}
.lvh-rank--main .lvh-rank__format { background: rgba(243, 196, 63, .14); color: #f3c43f; }
.lvh-rank__standing {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 21px;
    line-height: 1.1;
    color: #fff;
}
.lvh-rank__bar {
    height: 6px;
    margin: 9px 0 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
}
.lvh-rank__fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #13a06a, #2ee69a);
}
/* #9aa6b3 (text-soft): o #7c8896 anterior ficava em ~4,3:1 sobre o fio dourado da ladder principal. */
.lvh-rank__pts { display: block; font-size: 12px; color: #9aa6b3; }
.lvh-rank__pts strong {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #e8edf2;
}
.lvh-rank__record {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 9px;
    font-size: 12.5px;
    color: #9aa6b3;
}
.lvh-rank__record > span { display: inline-flex; align-items: center; gap: 4px; }
.lvh-rank__record strong {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #e8edf2;
    font-variant-numeric: tabular-nums;
}
.lvh-rank__record strong.lvh-win  { color: #25d08a; }
.lvh-rank__record strong.lvh-loss { color: #ef6a5e; }
.lvh-rank__streak--hot, .lvh-rank__streak--hot strong { color: #f3c43f; }
.lvh-rank__streak--hot .lv-ico { font-size: 17px; color: #f3c43f; }

.lvh-me__season-bar {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .06);
}
/* O prêmio da virada: nota discreta na temporada toda; na reta final (≤ 3 dias) vira o recado
   principal do bloco, em dourado (a cor do que está em jogo). */
.lvh-me__reward {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: #9aa6b3;
}
.lvh-me__reward > .lv-ico { font-size: 19px; color: #7c8896; margin-top: 1px; flex: none; }
.lvh-me__reward--soon {
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(243, 196, 63, .08);
    border: 1px solid rgba(243, 196, 63, .26);
    font-size: 14.5px;
    color: #e8dcb4;
}
.lvh-me__reward--soon > .lv-ico { color: #f3c43f; font-size: 21px; }
.lvh-me__reward--soon strong {
    font-family: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: .3px;
    color: #f3c43f;
}

/* "Ver 1v1 e 2v2" só existe no celular (no desktop as duas ladders já aparecem lado a lado). */
.lvh-me__more { display: none; }
.lvh-me__chev { transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
.lvh-me--open .lvh-me__chev { transform: rotate(180deg); }
.lvh-me__more:hover .lvh-me__chev { transform: none; }
.lvh-me--open .lvh-me__more:hover .lvh-me__chev { transform: rotate(180deg); }

/* =============================================================================
   3. MESAS ABERTAS + ÚLTIMAS PARTIDAS
   ========================================================================== */
/* Principal (mesas → sua temporada) | lateral (partidas → topo). */
.lvh-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}
.lvh-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

.lvh-panel {
    padding: 20px 22px 16px;
    border-radius: 18px;
    background: linear-gradient(180deg, #111822, #0d131b);
    border: 1px solid rgba(255, 255, 255, .07);
    box-shadow: 0 10px 30px -16px rgba(0, 0, 0, .7);
}
.lvh-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.lvh-panel__title {
    margin: 0;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: .3px;
    color: #f1f6f3;
}

.lvh-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.lvh-list > li + li { border-top: 1px solid rgba(255, 255, 255, .06); }

.lvh-empty { padding: 14px 0 8px; }
.lvh-empty p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: #9aa6b3; }
.lvh-empty p:last-child { margin-bottom: 0; }
.lvh-empty p strong { color: #f3c43f; font-weight: 600; white-space: nowrap; }
.lvh-empty .lvh-link { margin-top: -8px; }

/* ---- Linha de mesa -------------------------------------------------------- */
.lvh-table {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "info seats enter";
    align-items: center;
    gap: 18px;
    padding: 13px 0;
}
.lvh-table__info { grid-area: info; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lvh-table__name {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #eef4f1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lvh-table__lock { font-size: 16px; color: #f0837f; flex-shrink: 0; }
.lvh-table__meta { font-size: 12.5px; color: #7c8896; }

.lvh-seats { grid-area: seats; display: flex; gap: 6px; }
.lvh-seat {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #141b25;
    border: 1.5px dashed #3d4a59;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 13px;
}
.lvh-seat--taken {
    background: rgba(37, 208, 138, .16);
    border: 1px solid rgba(37, 208, 138, .38);
    color: #5fe49a;
}

.lvh-enter {
    grid-area: enter;
    height: 44px;
    padding: 0 18px;
    border-radius: 10px;
    cursor: pointer;
    background: transparent;
    border: 1px solid rgba(37, 208, 138, .45);
    color: #5fe49a;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.lvh-enter:hover {
    background: linear-gradient(135deg, #27d68f, #13a06a);
    border-color: transparent;
    color: #04231a;
    box-shadow: 0 6px 18px -6px rgba(37, 208, 138, .6);
}

/* ---- Linha de partida ----------------------------------------------------- */
.lvh-match {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
}
.lvh-match__result {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 16px;
}
.lvh-match--win .lvh-match__result  { background: rgba(37, 208, 138, .14); color: #25d08a; }
.lvh-match--loss .lvh-match__result { background: rgba(239, 106, 94, .14); color: #ef6a5e; }
.lvh-match__info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lvh-match__score {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 6px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 19px;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.lvh-match__nums { white-space: nowrap; }
.lvh-match__x { color: #7c8896; font-weight: 600; margin: 0 2px; }
.lvh-match__vs {
    font-size: 12.5px;
    color: #7c8896;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* #9aa6b3 (text-soft): o #65727f anterior media 3,6:1 — abaixo do AA para 12px. */
.lvh-match__time { font-size: 12px; color: #9aa6b3; white-space: nowrap; }
.lvh-match__reason {
    font-family: 'Barlow', sans-serif;
    font-weight: 500;
    font-size: 12.5px;
    color: #f0837f;
    white-space: nowrap;
}
/* Desistências seguidas agrupadas: a linha fala por si, sem placar. */
.lvh-match__reason--grouped {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 17px;
    color: #e8edf2;
}

/* ---- Coluna lateral: Últimas partidas + Topo da temporada ------------------ */
.lvh-side { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

.lvh-panel__chip {
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .07);
    color: #cdd6df;
    font-size: 12px;
    letter-spacing: 1px;
}

.lvh-top {
    display: grid;
    grid-template-columns: 18px auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 11px 0;
}
.lvh-top__pos {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 18px;
    /* #9aa6b3 (text-soft): o #65727f anterior media ~3,7:1 — abaixo do AA (18px bold não é "texto grande"). */
    color: #9aa6b3;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.lvh-top--first .lvh-top__pos { color: #f3c43f; }

/* Perfil a um toque (player-avatar-showcase): a linha do topo é um <a>. */
a.lvh-top { color: inherit; text-decoration: none; border-radius: 10px; }
a.lvh-top[href]:hover .lvh-top__name { text-decoration: underline; text-underline-offset: 3px; }
.lobby-v2 a.lvh-top:focus-visible { outline: 2px solid #2ee69a; outline-offset: 2px; }

/* ---- Seu personagem (player-avatar-showcase, D5): rosto + visual em palavras + ações secundárias ---- */
.lvh-char {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding-bottom: 18px;
}
.lvh-char__face {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 50% 35%, #1b2633, #0d131b);
    border: 1px solid rgba(255, 255, 255, .1);
}
.lvh-char__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lvh-char__initial {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 30px;
    color: #cdd6df;
}
.lvh-char__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lvh-char__title { font-size: 20px; }
.lvh-char__look { margin: 0; font-size: 14px; line-height: 1.4; color: #b8c4cf; overflow-wrap: anywhere; }
.lvh-char__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-top: 8px;
}
.lvh-char__edit { padding: 8px 13px; font-size: 14px; text-decoration: none; }
.lvh-char__edit .lv-ico { font-size: 17px; }
.lvh-char__view { background: none; border: 0; padding: 4px 0; cursor: pointer; font: inherit; font-weight: 700; }
.lvh-char__view .lv-ico { color: currentColor; }
.lvh-top__avatar {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: #e8edf2;
    background: rgba(255, 255, 255, .06);
}
.lvh-top__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lvh-top__name {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-weight: 600;
    font-size: 14px;
    color: #eef4f1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lvh-top__you {
    flex-shrink: 0;
    padding: 1px 6px;
    border-radius: 5px;
    background: rgba(37, 208, 138, .16);
    color: #5fe49a;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.lvh-top__standing {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #7c8896;
}
.lvh-top__standing .rank-emblem { --emblem-size: 1.25rem; }
.lvh-top__pts {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 17px;
    color: #e8edf2;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.lvh-top--first .lvh-top__pts { color: #f3d774; }
.lvh-top__pts small { margin-left: 3px; font-size: 11px; font-weight: 600; color: #9aa6b3; }

.lvh-rank__hint { margin: 9px 0 0; font-size: 12.5px; line-height: 1.45; color: #9aa6b3; }

/* =============================================================================
   RESPONSIVO (Home)
   ========================================================================== */
@media (max-width: 1100px) {
    .lvh-hand { --deal-from: -112px; width: 270px; height: 220px; }
    .lvh-hand__card { width: 98px; }
    .lvh-hand__card--1 { --fan-x: -50px; }
    .lvh-hand__card--3 { --fan-x: 50px; }
}

@media (max-width: 960px) {
    .lvh-grid { grid-template-columns: minmax(0, 1fr); }

    /* Uma coluna só: as duas colunas se desfazem e "Seu personagem" entra logo depois de "Mesas abertas"
       (player-avatar-showcase, D5) — reordenado aqui, sem duplicar marcação. */
    .lvh-main,
    .lvh-side { display: contents; }
    .lvh-main > :first-child { order: 1; }
    .lvh-char { order: 2; }
    .lvh-me { order: 3; }
    .lvh-side > .lvh-panel:not(.lvh-char) { order: 4; }
}

/* Celular: o herói vira uma coluna e a mão encolhe para o canto — o CTA
   continua acima da dobra. */
@media (max-width: 640px) {
    .lv-content { gap: 18px; }

    .lvh-hero {
        grid-template-columns: minmax(0, 1fr);
        padding: 26px 20px 22px;
        border-radius: 18px;
    }
    /* A mão fica no canto sup. direito, só com o verso + o A♠ — grandes o bastante para o verso
       equipado (o prêmio da temporada) ser visto. Um float vazio reserva a área dela só nas
       primeiras linhas do título/lead — nada de texto coberto pela mão. */
    .lvh-hero__title { font-size: 34px; }
    .lvh-hero__title::before {
        content: '';
        float: right;
        width: 112px;
        height: 86px;
    }
    .lvh-hero__lead { font-size: 15px; }
    .lvh-hand {
        --deal-from: -44px;
        position: absolute;
        top: 12px;
        right: 8px;
        width: 210px;
        height: 214px;
        transform: scale(.5);
        transform-origin: top right;
        pointer-events: none;
    }
    .lvh-hand__card { left: 50%; }
    .lvh-hand__card--1,
    .lvh-hand__card--3 { display: none; }
    .lvh-hand__card--2 { --fan-x: 36px; --fan-y: 0px; --fan-r: 9deg; animation-delay: .15s; }
    .lvh-hand__shadow { left: 50%; width: 200px; }
    .lvh-hero:hover .lvh-hand__card--2 { --fan-y: 0px; }

    .lvh-mode { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lvh-hero__actions { gap: 10px; margin-top: 18px; }
    .lvh-hero__cta { flex: 1 1 100%; }
    .lvh-hero__ghost { flex: 1 1 100%; min-height: 48px; }

    /* Sua temporada compacta: cabeçalho numa linha, só a ladder principal; a outra e o
       retrospecto ficam atrás de "Ver 1v1 e 2v2". */
    .lvh-me { padding: 16px 16px 14px; }
    .lvh-me__head { gap: 12px; }
    .lvh-me__avatar { width: 44px; height: 44px; font-size: 19px; }
    .lvh-me__name { font-size: 21px; }
    .lvh-me__season { font-size: 13px; }
    .lvh-me__ladders { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 14px; }
    .lvh-me:not(.lvh-me--open) .lvh-rank:not(.lvh-rank--main),
    .lvh-me:not(.lvh-me--open) .lvh-rank__record { display: none; }
    .lvh-me__more { display: inline-flex; margin-top: 2px; }
    .lvh-me__season-bar { margin-top: 10px; padding-top: 12px; }
    .lvh-rank { padding: 12px 14px; gap: 14px; }
    .lvh-rank__emblem { --emblem-size: 3rem; }

    .lvh-panel { padding: 18px 16px 12px; }
    .lvh-panel__title { font-size: 20px; }
    .lvh-panel__chip { white-space: nowrap; }

    /* Mesa: nome/meta em cima, lugares embaixo, ENTRAR à direita ocupando as duas linhas. */
    .lvh-table {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "info  enter"
            "seats enter";
        gap: 8px 14px;
    }
    /* Folga no fim da página para o botão fixo "Cookies" (canto inf. esquerdo) não cobrir o
       último conteúdo quando a rolagem chega ao fim. */
    .lvh-grid { padding-bottom: 56px; }
}

@media (max-width: 360px) {
    .lvh-hero { padding: 22px 16px 18px; }
    .lvh-hero__title { font-size: 28px; }
    .lvh-hero__title::before { width: 82px; height: 70px; }
    .lvh-hand { transform: scale(.39); right: 2px; top: 10px; }
    .lvh-hero__cta { padding: 0 16px; font-size: 18px; white-space: nowrap; }

    .lvh-me__name { font-size: 20px; }
    .lvh-me__profile .lv-ico { display: none; }

    .lvh-rank { padding: 12px; gap: 10px; }
    .lvh-rank__emblem { --emblem-size: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .lvh-hand__card { animation: none !important; transition: none; }
    .lvh-link .lv-ico,
    .lvh-me__chev { transition: none; }
    .lvh-mode { animation: none; }
}

/* =============================================================================
   BLOCOS COMPARTILHADOS COM O PERFIL (Profile.razor / LockerPanel /
   MatchHistoryPanel / FriendsPanel) — não são mais usados pela Home.
   ========================================================================== */
.lvh-card {
    position: relative;
    border-radius: 18px;
    background: linear-gradient(180deg, #111822, #0d131b);
    border: 1px solid rgba(255, 255, 255, .07);
    box-shadow: 0 10px 30px -16px rgba(0, 0, 0, .7);
    font-family: 'Barlow', system-ui, sans-serif;
    overflow: hidden;
}

.lvh-welcome {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
    padding: 26px 30px;
    border-radius: 20px;
    background: radial-gradient(130% 120% at 12% 0%, rgba(37, 208, 138, .12), rgba(13, 19, 27, 0) 55%),
               linear-gradient(120deg, #11201b, #0d131b);
    border: 1px solid rgba(37, 208, 138, .14);
    overflow: hidden;
}
.lvh-welcome__suit {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 230px;
    line-height: 1;
    color: rgba(37, 208, 138, .05);
    pointer-events: none;
    font-family: 'Barlow';
    font-weight: 700;
}
.lvh-welcome__main {
    display: flex;
    align-items: center;
    gap: 22px;
    flex: 1;
    min-width: 280px;
    position: relative;
    z-index: 1;
}
.lvh-welcome__avatar {
    width: 74px;
    height: 74px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 32px;
    color: #e8edf2;
    background: rgba(255, 255, 255, .06);
    flex-shrink: 0;
}
.lvh-welcome__eyebrow {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #6f857d;
}
.lvh-welcome__name {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 34px;
    line-height: 1.05;
    color: #fff;
    margin: 1px 0 11px;
    overflow-wrap: anywhere;
}
/* Deixa a coluna de texto encolher para que o nome quebre em vez de estourar. */
.lvh-welcome__main > div { min-width: 0; }
.lvh-welcome__ladders {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.lvh-ladder {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    padding: 6px 12px;
    border-radius: 9px;
    background: rgba(8, 11, 17, .55);
    border: 1px solid rgba(255, 255, 255, .06);
}
.lvh-ladder__chip {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .5px;
    padding: 2px 7px;
    border-radius: 5px;
    background: rgba(90, 169, 245, .16);
    color: #6db0fb;
    flex-shrink: 0;
}
.lvh-ladder__chip--2v2 {
    background: rgba(243, 196, 63, .16);
    color: #f3c43f;
}
.lvh-ladder__standing {
    font-size: 13px;
    color: #cdd9d4;
    font-weight: 600;
    white-space: nowrap;
}
.lvh-ladder__pts {
    font-size: 12px;
    color: #7c8d87;
    white-space: nowrap;
}
.lvh-ladder__bar {
    width: 86px;
    height: 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
}
.lvh-ladder__fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #25d08a, #2ee69a);
}

.lvh-srow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 11px;
    background: #0c1211;
    border: 1px solid rgba(255, 255, 255, .05);
}

@media (max-width: 720px) {
    .lvh-welcome { padding: 22px 20px; gap: 22px; }
    .lvh-welcome__suit { font-size: 170px; right: 14px; }
    .lvh-welcome__name { font-size: 28px; }
    .lvh-welcome__main > div:not(.lvh-welcome__avatar) { flex: 1; }
}

@media (max-width: 540px) {
    .lvh-welcome { padding: 20px 16px; }
    .lvh-welcome__main { gap: 16px; }
    .lvh-welcome__avatar { width: 60px; height: 60px; font-size: 26px; }
    .lvh-welcome__name { font-size: 26px; }
    .lvh-welcome__suit { font-size: 130px; right: 8px; }
    .lvh-ladder { flex-direction: column; align-items: flex-start; gap: 6px; }
    .lvh-ladder__bar { width: 100%; }
}