/* =============================================================================
   HOME v2 (Lobby Principal) — mesma linguagem visual verde do lobby-v2.css
   (RoomIndex /salas) e do bloco rg-* (RankIndex /rank). Escopo: classes lvh-*.
   Reaproveita os primitivos lv-* (lv-bg, lv-ico, lv-quick, lv-sheen, lv-blink,
   lv-stat*) e as animações greenPulse/sheen/liveBlink de lobby-v2.css.
   Apenas apresentação: nenhuma lógica nova.
   ========================================================================== */

/* ---- Superfície/cartão base da Home (igual ao .lv-card / rg-podium) -------- */
.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;
}

/* =============================================================================
   HERÓI DE BOAS-VINDAS
   ========================================================================== */
.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 (eyebrow/nome/ladders) encolher para que o nome quebre
   em vez de estourar a largura no celular; o avatar tem flex-shrink:0 fixo. */
.lvh-welcome__main > div { min-width: 0; }
.lvh-welcome__ladders {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.lvh-welcome__muted {
    color: #9fb0ad;
    font-size: 14px;
}

/* ---- Linha de ladder (1v1 / 2v2) ------------------------------------------ */
.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);
}

/* ---- Bloco de stats (Sequência / V-D) ------------------------------------- */
.lvh-welcome__stats {
    display: flex;
    gap: 34px;
    position: relative;
    z-index: 1;
}
.lvh-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.lvh-stat__val {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 38px;
    line-height: 1;
    color: #f1f6f3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.lvh-stat__val .lv-ico { font-size: 24px; color: #f3c43f; }
.lvh-stat__val--win { color: #25d08a; }
.lvh-stat__val--loss { color: #ef6a5e; }
.lvh-stat__val--sep { color: #3a4641; }
.lvh-stat__label {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 1.5px;
    color: #6f857d;
}
.lvh-stat__sep { width: 1px; background: rgba(255, 255, 255, .08); align-self: stretch; }

.lvh-welcome__msg {
    color: #9fb0ad;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* =============================================================================
   FAIXA DE TEMPORADA
   ========================================================================== */
.lvh-season {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 15px 22px;
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(243, 196, 63, .10), rgba(13, 19, 27, 0) 60%), #0d131b;
    border: 1px solid rgba(243, 196, 63, .18);
}
.lvh-season__ico { font-size: 22px; color: #f3c43f; }
.lvh-season__name {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 1px;
    color: #f3e1a0;
}
.lvh-season__desc { font-size: 13px; color: #9aa6b3; }
.lvh-season__bar {
    flex: 1;
    min-width: 80px;
    max-width: 360px;
    height: 7px;
    border-radius: 5px;
    background: #0a0e0d;
    overflow: hidden;
    margin: 0 6px;
}
.lvh-season__fill {
    height: 100%;
    border-radius: 5px;
    background: linear-gradient(90deg, #f5cf3d, #dca60d);
}
.lvh-season__pct {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #f3d774;
}
.lvh-season__spacer { flex: 1; }

/* ---- Herói "Partida Rápida": texto à esquerda, ações à direita ------------ */
/* (sobrepõe o layout em coluna do lv-quick de /salas; aqui é duas colunas) */
.lvh-quick {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.lvh-quick__text {
    flex: 1 1 280px;
    min-width: 0;
    position: relative;
    z-index: 1;
}
.lvh-quick__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    z-index: 1;
}
/* Anula o margin-top que o lv-quick__cta usava no layout em coluna. */
.lvh-quick__cta { margin-top: 0; justify-content: center; }
.lvh-quick__row { display: flex; gap: 10px; flex-direction: row; }
.lvh-quick__row .lvh-ghost { flex: 1; }

.lvh-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 16px;
    border-radius: 10px;
    cursor: pointer;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    color: #cdd9d4;
    font-family: 'Barlow', system-ui, sans-serif;
    font-weight: 600;
    font-size: 13px;
    transition: .15s;
}
.lvh-ghost:hover { background: rgba(255, 255, 255, .08); }
.lvh-ghost .lv-ico { font-size: 18px; color: #cdd9d4; }

/* Oferta da prática guiada (1ª vez no app): faixa esmeralda, dispensável. Mesma linguagem
   da faixa de temporada, com o acento verde de "começar/aprender". */
.lvh-tutorial {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 15px 22px;
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(37, 208, 138, .12), rgba(13, 19, 27, 0) 60%), #0d131b;
    border: 1px solid rgba(37, 208, 138, .22);
}
.lvh-tutorial__ico { font-size: 24px; color: #25d08a; }
.lvh-tutorial__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.lvh-tutorial__title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: .5px;
    color: #eafff5;
}
.lvh-tutorial__desc { font-size: 13px; color: #9aa6b3; }
.lvh-tutorial__actions { display: flex; align-items: center; gap: 10px; }
.lvh-tutorial__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 18px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    background: linear-gradient(135deg, #2ee69a, #13a06a);
    color: #04231a;
    font-family: 'Barlow', system-ui, sans-serif;
    font-weight: 700;
    font-size: 13px;
    transition: .15s;
}
.lvh-tutorial__cta:hover { filter: brightness(1.08); }
.lvh-tutorial__cta .lv-ico { font-size: 18px; }

/* =============================================================================
   DUAS COLUNAS
   ========================================================================== */
.lvh-cols {
    display: flex;
    gap: 22px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.lvh-cols__main { flex: 1; min-width: 360px; }
.lvh-cols__side {
    flex: 0 0 340px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
@media (max-width: 760px) {
    .lvh-cols__side { flex-basis: 100%; }
}

/* ---- Header de cartão (compartilhado main/side) --------------------------- */
.lvh-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.lvh-head__ico { font-size: 20px; }
.lvh-head__ico--gold { color: #f3c43f; }
.lvh-head__ico--muted { color: #9aa6b3; }
.lvh-head__title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: .5px;
    color: #f1f6f3;
}
.lvh-head__count { font-size: 12px; color: #6f857d; margin-left: auto; }
.lvh-head__link {
    margin-left: auto;
    font-size: 12px;
    color: #5fe49a;
    text-decoration: none;
}
.lvh-head__link:hover { text-decoration: underline; }

/* ---- MESAS AO VIVO -------------------------------------------------------- */
.lvh-tables__rows {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 12px 14px 14px;
}
.lvh-trow {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #0c1211;
    border: 1px solid rgba(255, 255, 255, .05);
    border-left: 3px solid #25d08a;
    transition: background .15s;
}
.lvh-trow--private { border-left-color: #ef6a5e; }
.lvh-trow:hover { background: #0e1514; }
.lvh-trow__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(37, 208, 138, .08);
    border: 1px solid rgba(37, 208, 138, .12);
    color: #7fd6a6;
    flex-shrink: 0;
}
.lvh-trow__ico .lv-ico { font-size: 21px; }
.lvh-trow--private .lvh-trow__ico {
    background: rgba(239, 106, 94, .08);
    border-color: rgba(239, 106, 94, .14);
    color: #f0837f;
}
.lvh-trow__info { flex: 1 1 auto; min-width: 0; }
.lvh-trow__name {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #eef4f1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lvh-trow__meta { font-size: 12px; color: #7c8d87; margin-top: 1px; }
.lvh-trow__right {
    display: flex;
    align-items: center;
    gap: 14px;
}
.lvh-badge {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(37, 208, 138, .13);
    color: #5fe49a;
    white-space: nowrap;
}
.lvh-badge--private { background: rgba(239, 106, 94, .13); color: #f0837f; }
.lvh-trow__count {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #aebcb6;
    min-width: 30px;
    text-align: center;
}
.lvh-enter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    background: linear-gradient(135deg, #27d68f, #13a06a);
    color: #04231a;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1px;
    transition: filter .15s, transform .15s;
}
.lvh-enter:hover { filter: brightness(1.07); transform: translateY(-1px); }
.lvh-enter .lv-ico { font-size: 16px; }

.lvh-allrooms {
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    border-radius: 11px;
    cursor: pointer;
    background: transparent;
    border: 1px solid rgba(37, 208, 138, .2);
    color: #7fd6a6;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 1px;
    transition: background .15s;
}
.lvh-allrooms:hover { background: rgba(37, 208, 138, .06); }
.lvh-allrooms .lv-ico { font-size: 18px; }

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

/* ---- Cartões laterais (Top 3 / Últimas partidas) -------------------------- */
.lvh-side__rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
}
.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);
}
.lvh-srow--history { border-left: 3px solid #25d08a; }
.lvh-srow--history.lvh-srow--loss { border-left-color: #ef6a5e; }
.lvh-srow__pos {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}
.lvh-srow__av {
    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);
    flex-shrink: 0;
}
.lvh-srow__info { min-width: 0; }
.lvh-srow__name {
    font-weight: 600;
    font-size: 14px;
    color: #eef4f1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lvh-srow__sub {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #7c8d87;
    margin-top: 1px;
}
.lvh-srow__sub .rank-emblem { --emblem-size: 1.4rem; }
.lvh-srow__pts {
    margin-left: auto;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: #f3d774;
    white-space: nowrap;
}
.lvh-srow__ico { font-size: 22px; }
.lvh-srow__ico--win { color: #25d08a; }
.lvh-srow__ico--loss { color: #ef6a5e; }
.lvh-srow__result--win { color: #25d08a; }
.lvh-srow__result--loss { color: #ef6a5e; }
.lvh-srow__time { margin-left: auto; font-size: 11px; color: #5e6f69; white-space: nowrap; }

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

/* =============================================================================
   RESPONSIVO
   ========================================================================== */

/* Tablet: heróis encolhem; o bloco de ações da Partida Rápida ocupa a largura
   toda quando quebra para baixo (botões deixam de "flutuar" no canto). */
@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__stats { width: 100%; gap: 24px; }
    /* Quando os stats descem para a linha de baixo, a coluna de texto/ranks passa
       a crescer e ocupar toda a largura do __main — senão sobra uma faixa morta
       ("buraco") à direita dos ranks. O avatar (flex-shrink:0) é excluído. */
    .lvh-welcome__main > div:not(.lvh-welcome__avatar) { flex: 1; }

    .lvh-quick__actions { flex-basis: 100%; }
    .lvh-quick__cta { width: 100%; }
}

/* Celular: empilha de fato; linha de mesa quebra a faixa de ações para baixo. */
@media (max-width: 540px) {
    .lv-content { gap: 18px; }

    .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__stats { justify-content: space-between; gap: 12px; }
    .lvh-stat__val { font-size: 30px; }

    /* Cada ladder (1v1/2v2) empilha seu conteúdo no celular; no desktop fica em linha. */
    .lvh-ladder { flex-direction: column; align-items: flex-start; gap: 6px; }
    .lvh-ladder__bar { width: 100%; }

    .lvh-season { padding: 13px 16px; gap: 10px; }
    .lvh-season__desc { display: none; }
    .lvh-season__bar { max-width: none; }

    .lv-quick__title { font-size: 30px; }

    .lvh-cols { gap: 16px; }
    .lvh-cols__main { min-width: 0; }

    .lvh-head { padding: 16px 18px; }
    .lvh-tables__rows,
    .lvh-side__rows { padding: 10px 12px; }

    /* Linha 1: ícone + nome/meta; linha 2 (cheia): badge · contagem · ENTRAR. */
    .lvh-trow { flex-wrap: wrap; gap: 10px; padding: 12px; }
    .lvh-trow__right { flex-basis: 100%; justify-content: space-between; gap: 10px; }
    .lvh-quick__row {flex-direction: column; }

    /* Naipe decorativo menor para não invadir os stats no celular. */
    .lvh-welcome__suit { font-size: 130px; right: 8px; }

    /* Tutorial (antes sem regras responsivas): as ações passam para a linha de
       baixo em largura cheia e os dois botões dividem o espaço meio a meio. */
    .lvh-tutorial { padding: 13px 16px; gap: 10px; }
    .lvh-tutorial__actions { flex-basis: 100%; gap: 10px; }
    .lvh-tutorial__actions .lvh-ghost,
    .lvh-tutorial__actions .lvh-tutorial__cta { flex: 1; justify-content: center; }
}