/* =============================================================================
   Tema "Cassino Premium" — TrucoOnlineMTJ
   -----------------------------------------------------------------------------
   Carregado DEPOIS do <RadzenTheme Theme="material-dark"> em App.razor.
   A ordem da cascata garante que estes overrides de --rz-* vençam o material-dark
   sem reescrever nenhum componente. Apenas apresentação: nenhuma lógica muda.

   Paleta normativa (spec visual-theme):
     fundo preto-azulado  #0B0F1A
     esmeralda            #1FA971  (primary / success / "Nós")
     dourado champagne    #D4AF37  (warning / destaque / "sua vez" / "Truco!")
     rubi                 #C0392B  (danger / "Eles")
     texto platina        #ECECEC
   ========================================================================== */

:root {
    /* ---- Tipografia ----------------------------------------------------- */
    --rz-text-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* Fonte display (condensada/bold) para placar e "Truco!" */
    --truco-display-font-family: 'Oswald', 'Inter', sans-serif;

    /* ---- Tokens de raio e elevação (task 1.4) --------------------------- */
    --truco-radius-sm: 6px;
    --truco-radius-md: 10px;
    --truco-radius-lg: 16px;
    --truco-elevation-1: 0 2px 6px rgba(0, 0, 0, 0.35);
    --truco-elevation-2: 0 6px 18px rgba(0, 0, 0, 0.45);
    /* Filete dourado padrão para realces premium */
    --truco-gold-hairline: rgba(212, 175, 55, 0.35);

    /* ---- Fundos base ---------------------------------------------------- */
    /* Fundo near-black do mock v2 (#070a0f) — antes era #0B0F1A (azulado). */
    --rz-body-background-color: #070A0F;
    --rz-base-background-color: #070A0F;
    --rz-base: #070A0F;
    --rz-base-50: #161B29;
    --rz-base-100: #131826;
    --rz-base-200: #1B2233;
    --rz-base-300: #232C40;
    --rz-base-light: #131826;
    --rz-base-lighter: #1B2233;
    --rz-base-dark: #070A12;
    --rz-base-darker: #04060C;
    --rz-panel-background-color: #131826;
    --rz-card-background-color: #131826;

    /* ---- Texto ---------------------------------------------------------- */
    --rz-text-color: #ECECEC;
    --rz-text-contrast-color: #ECECEC;
    --rz-text-secondary-color: #B8BECC;
    --rz-text-disabled-color: #6B7283;
    --rz-text-title-color: #FFFFFF;

    /* ---- Esmeralda (primary) ------------------------------------------- */
    --rz-primary: #1FA971;
    --rz-primary-light: #3DBE8B;
    --rz-primary-lighter: rgba(31, 169, 113, 0.18);
    --rz-primary-dark: #178A5C;
    --rz-primary-darker: #0F5E3F;

    /* ---- Esmeralda (success / "Nós") ----------------------------------- */
    --rz-success: #1FA971;
    --rz-success-light: #3DBE8B;
    --rz-success-lighter: rgba(31, 169, 113, 0.18);
    --rz-success-dark: #178A5C;
    --rz-success-darker: #0F5E3F;

    /* ---- Rubi (danger / "Eles") ---------------------------------------- */
    --rz-danger: #C0392B;
    --rz-danger-light: #D45A4D;
    --rz-danger-lighter: rgba(192, 57, 43, 0.18);
    --rz-danger-dark: #9C2D22;
    --rz-danger-darker: #6E1F18;

    /* ---- Dourado champagne (warning / destaque / aposta) --------------- */
    --rz-warning: #D4AF37;
    --rz-warning-light: #E1C463;
    --rz-warning-lighter: rgba(212, 175, 55, 0.18);
    --rz-warning-dark: #B5942A;
    --rz-warning-darker: #8A6F1F;

    /* ---- Info (azul de apoio, coerente com a paleta) ------------------- */
    --rz-info: #3B6FB0;
    --rz-info-light: #5B8AC8;
    --rz-info-lighter: rgba(59, 111, 176, 0.18);
    --rz-info-dark: #2F5A91;
    --rz-info-darker: #1F3E66;

    /* ---- Raio global ---------------------------------------------------- */
    --rz-border-radius: var(--truco-radius-md);
}

/* Corpo em Inter sobre o fundo Cassino Premium */
body {
    font-family: var(--rz-text-font-family);
    background-color: var(--rz-body-background-color);
}

/* Fonte display: placar e chamado de "Truco!" (task 2.2) */
.truco-display {
    font-family: var(--truco-display-font-family) !important;
    letter-spacing: 0.02em;
    font-weight: 700;
}

/* -----------------------------------------------------------------------------
   Legibilidade sobre o fundo escuro (task 2.3): placeholder, disabled e hover.
   -------------------------------------------------------------------------- */
::placeholder {
    color: var(--rz-text-secondary-color) !important;
    opacity: 0.8;
}

.rz-state-disabled,
[disabled] {
    opacity: 0.55;
}

/* =============================================================================
   REDESIGN "Cassino Premium" — sistema visual do LOBBY (todas as telas fora da
   mesa). Apenas apresentação e utilitários por CLASSE: não altera o
   comportamento global dos componentes que a mesa (Room.razor) consome.
   ========================================================================== */

/* ---- Fundo rico do lobby: gradiente profundo + brilhos esmeralda/dourado --- */
body {
    background-color: var(--rz-body-background-color);
    background-image:
        radial-gradient(1100px 520px at 12% -12%, rgba(31, 169, 113, 0.12), transparent 60%),
        radial-gradient(1000px 640px at 112% 4%, rgba(212, 175, 55, 0.12), transparent 55%),
        linear-gradient(160deg, #0B0F1A 0%, #0E1422 48%, #0A0E18 100%);
    background-attachment: fixed;
}

/* ---- Scrollbar premium ----------------------------------------------------- */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 175, 55, 0.35) transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.5), rgba(212, 175, 55, 0.22));
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

    *::-webkit-scrollbar-thumb:hover {
        background: rgba(212, 175, 55, 0.7);
        background-clip: padding-box;
    }

/* ---- Superfície de vidro (glassmorphism) — card padrão do lobby ------------ */
.truco-surface {
    background: linear-gradient(180deg, rgba(27, 34, 51, 0.72), rgba(19, 24, 38, 0.74)) !important;
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    border: 1px solid var(--truco-gold-hairline) !important;
    border-radius: var(--truco-radius-lg) !important;
    box-shadow: var(--truco-elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* Variante "raised" com brilho dourado para heros/CTAs */
.truco-surface-raised {
    background: linear-gradient(180deg, rgba(31, 38, 57, 0.86), rgba(17, 22, 36, 0.88)) !important;
    backdrop-filter: blur(16px) saturate(125%);
    -webkit-backdrop-filter: blur(16px) saturate(125%);
    border: 1px solid rgba(212, 175, 55, 0.28) !important;
    border-radius: var(--truco-radius-lg) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(212, 175, 55, 0.12) !important;
}

/* ---- Realce no hover de cards interativos ---------------------------------- */
.truco-hover {
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

    .truco-hover:hover {
        transform: translateY(-4px);
        border-color: rgba(212, 175, 55, 0.55) !important;
        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(212, 175, 55, 0.18) !important;
    }

/* ---- Texto com gradiente dourado ------------------------------------------- */
.truco-gold-text {
    background: linear-gradient(92deg, #F4D67A 0%, #D4AF37 55%, #B5942A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ---- Etiqueta de seção (eyebrow) ------------------------------------------- */
.truco-eyebrow {
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .72rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
}

/* ---- CTA dourado com glow (aplicar a class no RadzenButton) ---------------- */
.truco-cta.rz-button {
    background: linear-gradient(180deg, #E9C766, #D4AF37 55%, #B5942A) !important;
    color: #1A1206 !important;
    border: none !important;
    border-radius: var(--truco-radius-md) !important;
    font-weight: 700 !important;
    letter-spacing: .03em;
    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

    .truco-cta.rz-button:hover {
        filter: brightness(1.05);
        transform: translateY(-2px);
        box-shadow: 0 12px 34px rgba(212, 175, 55, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    }

/* CTA esmeralda (ação principal "jogar") */
.truco-cta-emerald.rz-button {
    background: linear-gradient(180deg, #2BD08C, #1FA971 55%, #178A5C) !important;
    color: #04130C !important;
    border: none !important;
    border-radius: var(--truco-radius-md) !important;
    font-weight: 700 !important;
    box-shadow: 0 8px 24px rgba(31, 169, 113, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

    .truco-cta-emerald.rz-button:hover {
        filter: brightness(1.06);
        transform: translateY(-2px);
        box-shadow: 0 12px 34px rgba(31, 169, 113, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
    }

/* ---- Pílula de ícone (estatísticas/realces) -------------------------------- */
.truco-icon-pill {
    width: 3rem;
    height: 3rem;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.12);
    border: 1px solid var(--truco-gold-hairline);
}

/* ---- Emblema de patente (arte ~3:2: dimensionar pela altura, largura livre) - */
/* Escala de tamanhos por contexto. Teto: 4.5rem (72px) — os PNGs têm 160px de
   altura e acima disso o emblema borra em telas hi-DPI 2×. */
:root {
    --emblem-sm: 1.5rem;   /* linhas densas: boards, pódio */
    --emblem-md: 2.2rem;   /* padrão: linhas de rank */
    --emblem-lg: 3rem;     /* destaque: hero do perfil */
    --emblem-xl: 3.5rem;   /* destaque maior: ladder principal do lobby */
    --emblem-2xl: 4rem;    /* vitrine: cards de stats do perfil */
}

.rank-emblem {
    height: var(--emblem-size, 1.6rem);
    width: auto;
    flex-shrink: 0;
}

/* ---- Divisor com brilho dourado -------------------------------------------- */
.truco-divider {
    height: 1px;
    border: 0;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.45), transparent);
    margin: 0;
}

/* ---- Animação de entrada --------------------------------------------------- */
@keyframes trucoFadeUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.truco-in {
    animation: trucoFadeUp .5s ease both;
}

/* =============================================================================
   REDESIGN do LOBBY DE SALAS (RoomIndex / RoomCard) — faixa de status, ponto
   "live", card inativo e avatares de iniciais. Apenas apresentação por classe;
   coexistem com .truco-surface / .truco-hover sem alterar o card existente.
   ========================================================================== */

/* ---- Faixa de status no topo do card (ABERTA / EM JOGO) -------------------- */
.truco-status-strip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-family: var(--truco-display-font-family);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.74rem;
}

.truco-status-strip--open {
    color: #4FD9A2;
    background: rgba(31, 169, 113, 0.14);
    border: 1px solid rgba(31, 169, 113, 0.42);
}

.truco-status-strip--playing {
    color: #E8746A;
    background: rgba(192, 57, 43, 0.16);
    border: 1px solid rgba(192, 57, 43, 0.46);
}

/* ---- Ponto pulsante "live" para a faixa EM JOGO --------------------------- */
.truco-live-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: #E8746A;
    animation: trucoLivePulse 1.4s ease-out infinite;
}

@keyframes trucoLivePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(192, 57, 43, 0.55);
    }

    70% {
        box-shadow: 0 0 0 0.5rem rgba(192, 57, 43, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(192, 57, 43, 0);
    }
}

/* ---- Card inativo (sala em jogo): atenua e neutraliza o hover-lift -------- */
.truco-card-inactive {
    opacity: 0.7;
}

    .truco-card-inactive.truco-hover:hover {
        transform: none;
        border-color: var(--truco-gold-hairline) !important;
        box-shadow: var(--truco-elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    }

/* ---- Avatares de iniciais (jogadores na sala) ----------------------------- */
.truco-avatar,
.truco-avatar-empty {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--truco-display-font-family);
    font-weight: 700;
    font-size: 0.82rem;
    box-shadow: 0 0 0 2px var(--rz-card-background-color);
    user-select: none;
    flex: 0 0 auto;
}

/* Empilhamento sobreposto: cada avatar (cheio ou fantasma) recua sobre o anterior */
.truco-avatar + .truco-avatar,
.truco-avatar + .truco-avatar-empty,
.truco-avatar-empty + .truco-avatar-empty,
.truco-avatar-empty + .truco-avatar {
    margin-left: -0.6rem;
}

/* Assento ocupado: esmeralda preenchido */
.truco-avatar {
    color: #04130C;
    background: linear-gradient(180deg, #2BD08C, #1FA971 60%, #178A5C);
    cursor: default;
}

/* Assento livre: contorno fantasma */
.truco-avatar-empty {
    color: var(--rz-text-disabled-color);
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.18);
}

/* =============================================================================
   CHAT "Cassino Premium" — redesign minimalista do RadzenChat (mesa de jogo).
   Reaproveita os tokens do tema (esmeralda / dourado champagne / platina) por
   CLASSE (.truco-chat). Apenas apresentação; escopo restrito ao chat, nenhum
   outro componente é afetado. Sobrescreve as variáveis --rz-chat-* (pontos de
   customização oficiais do componente) + alguns refinamentos estruturais.
   ========================================================================== */
.truco-chat.rz-chat {
    /* Superfície de vidro coerente com o feltro e o lobby */
    --rz-chat-background-color: transparent;

    /* Cabeçalho discreto: sem fundo, apenas um filete dourado */
    --rz-chat-header-background-color: transparent;
    --rz-chat-header-bottom-border: 1px solid var(--truco-gold-hairline);
    --rz-chat-header-shadow: none;
    --rz-chat-header-title-font-weight: 700;

    /* Balões: a própria fala em esmeralda; as demais em superfície neutra */
    --rz-chat-message-user-background-color: var(--rz-primary);
    --rz-chat-message-user-color: #04130C;
    --rz-chat-message-assistant-background-color: rgba(236, 236, 236, 0.07);
    --rz-chat-message-assistant-color: var(--rz-text-color);
    --rz-chat-message-text-border-radius: 14px;
    --rz-chat-message-callout-radius: 4px;
    --rz-chat-message-text-padding: 0.45rem 0.7rem;

    /* Avatares compactos e circulares */
    --rz-chat-avatar-size: 1.75rem;
    --rz-chat-avatar-border-radius: 50%;
    --rz-chat-avatar-font-size: 0.78rem;

    background: linear-gradient(180deg, rgba(27, 34, 51, 0.55), rgba(11, 15, 26, 0.62));
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    border: 1px solid var(--truco-gold-hairline);
    border-radius: var(--truco-radius-lg);
    box-shadow: var(--truco-elevation-2);
}

/* Título do cabeçalho em platina */
.truco-chat .rz-chat-header-title {
    color: var(--rz-text-title-color);
    letter-spacing: 0.01em;
}

/* Respiro entre mensagens e largura máxima do balão */
.truco-chat .rz-chat-messages {
    gap: 0.75rem;
    padding: 0.75rem;
}

.truco-chat .rz-chat-message {
    max-width: 85%;
}

/* Texto legível (corrige o line-height apertado do padrão) + leve elevação */
.truco-chat .rz-chat-message-text {
    line-height: 1.4;
    box-shadow: var(--truco-elevation-1);
}

/* Própria fala: brilho esmeralda sutil */
.truco-chat .rz-chat-message-user .rz-chat-message-text {
    box-shadow: 0 2px 8px rgba(31, 169, 113, 0.28);
}

/* Nome do remetente e horário discretos */
.truco-chat .rz-chat-message-participant-name,
.truco-chat .rz-chat-message-user-name {
    color: var(--rz-text-secondary-color);
}

.truco-chat .rz-chat-message-time {
    color: var(--rz-text-disabled-color);
}

/* Avatares: própria fala em esmeralda; demais neutros com filete dourado */
.truco-chat .rz-chat-message-user .rz-chat-message-avatar {
    background: var(--rz-primary);
    color: #04130C;
}

.truco-chat .rz-chat-message-participant .rz-chat-message-avatar,
.truco-chat .rz-chat-message-assistant .rz-chat-message-avatar {
    background: rgba(236, 236, 236, 0.08);
    color: var(--rz-text-color);
    border: 1px solid var(--truco-gold-hairline);
}

/* Estado vazio mais suave */
.truco-chat .rz-chat-empty {
    color: var(--rz-text-disabled-color);
}

/* ---- Área de digitação ----------------------------------------------------- */
.truco-chat .rz-chat-input {
    background: transparent;
    border-top: 1px solid var(--truco-gold-hairline);
}

.truco-chat .rz-chat-textarea {
    background: rgba(0, 0, 0, 0.25);
    color: var(--rz-text-color);
    border: 1px solid var(--truco-gold-hairline);
    border-radius: var(--truco-radius-md);
    transition: border-color .2s ease, box-shadow .2s ease;
}

    .truco-chat .rz-chat-textarea:focus {
        outline: none;
        border-color: rgba(212, 175, 55, 0.7);
        box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
    }

/* Botão de enviar: cantos coerentes + brilho esmeralda (cor herda do primary) */
.truco-chat .rz-chat-send-btn {
    border-radius: var(--truco-radius-md);
    box-shadow: 0 4px 12px rgba(31, 169, 113, 0.3);
    transition: filter .2s ease, transform .2s ease;
}

    .truco-chat .rz-chat-send-btn:hover {
        filter: brightness(1.06);
        transform: translateY(-1px);
    }

/* ---- Avatares dos participantes no cabeçalho ------------------------------- */
/* Respiro entre os avatares (o padrão é apertado: gap .25rem). */
.truco-chat .rz-chat-users {
    gap: 0.4rem;
    padding-inline: 0.15rem;
    flex-wrap: wrap;
}

/* Recipiente perfeitamente circular, com anel dourado e leve realce no hover. */
.truco-chat .rz-chat-user-avatar,
.truco-chat .rz-chat-participant-avatar,
.truco-chat .rz-chat-user-more {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(236, 236, 236, 0.08);
    color: var(--rz-text-color);
    box-shadow: 0 0 0 1px var(--truco-gold-hairline);
    transition: transform .2s ease, box-shadow .2s ease;
}

    .truco-chat .rz-chat-user-avatar:hover,
    .truco-chat .rz-chat-participant-avatar:hover {
        transform: translateY(-1px) scale(1.06);
        box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.6);
        z-index: 1;
    }

/* A imagem em si vira um círculo perfeito (corrige o aspecto "quadrado"). */
.truco-chat .rz-chat-users img,
.truco-chat .rz-chat-user-image,
.truco-chat .rz-chat-avatar-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* =============================================================================
   COSMÉTICOS — "do barro à joia" + brasão de naipe Truco
   -----------------------------------------------------------------------------
   Renderizados pelo componente CosmeticView (verso de carta + moldura de avatar).
   Cada liga adiciona uma CAMADA, não só troca de cor: material → padrão → emblema
   → filete → movimento (só Platina+). Variáveis por liga (--cv-*) mantêm a paleta
   normativa num só lugar. Movimento contínuo só a partir de Platina; respeita
   prefers-reduced-motion. Apenas apresentação no client.
   ========================================================================== */

.cv {
    box-sizing: border-box;
}

/* ---- Paleta por liga (dark → mid → hi) + acento + cor do emblema ---------- */
.cv-bronze {
    --cv-dark: #6E5230;
    --cv-mid: #B08D57;
    --cv-hi: #D8B783;
    --cv-accent: #B08D57;
    --cv-emblem: #3A2A15;
}

.cv-prata {
    --cv-dark: #8A8A8A;
    --cv-mid: #C0C0C0;
    --cv-hi: #F2F2F2;
    --cv-accent: #C0C0C0;
    --cv-emblem: #5A5A5A;
}

.cv-ouro {
    --cv-dark: #9C7A1E;
    --cv-mid: #D4AF37;
    --cv-hi: #F7E59B;
    --cv-accent: #D4AF37;
    --cv-emblem: #5A3F00;
}

.cv-platina {
    --cv-dark: #3E7A8C;
    --cv-mid: #6AC0D8;
    --cv-hi: #CDEFF6;
    --cv-accent: #6AC0D8;
    --cv-emblem: #11323B;
}

.cv-diamante {
    --cv-dark: #2E9BA0;
    --cv-mid: #5BE0E6;
    --cv-hi: #D6FBFD;
    --cv-accent: #5BE0E6;
    --cv-emblem: #0C3D40;
}

.cv-lenda {
    --cv-dark: #6B2EA8;
    --cv-mid: #B673FF;
    --cv-hi: #E6CCFF;
    --cv-accent: #B673FF;
    --cv-emblem: #2A1046;
}

/* =============================================================================
   VERSO DE CARTA
   ========================================================================== */
.cv-back {
    position: relative;
    overflow: hidden;
    border-radius: inherit;
    isolation: isolate;
    color: var(--cv-emblem);
}

.cv-back--default {
    background: transparent;
}

/* Quando o verso é renderizado dentro de um host que já tem o tamanho (ex.: .card
   da mesa, cujo CSS é scoped e não alcança o DOM do componente filho): o host marca
   o contexto de posicionamento e o verso preenche-o por completo. */
.cv-card-host {
    position: relative;
}

/* O verso agora é uma imagem real (não mais um gradiente que tolerava qualquer caixa):
   travamos a proporção 2:3 do baralho — a largura segue a altura, então quando o board
   aperta a carta diminui proporcionalmente em vez de distorcer. Os assentos LATERAIS
   sobrescrevem isto em Room.razor.css com caixa deitada 3:2 + conteúdo girado (mesma
   carta de top/bottom, só com rotate de 90). */
.card.cv-card-host {
    width: auto;
    aspect-ratio: 2 / 3;
}

.cv-back--fill {
    position: absolute;
    inset: 0;
}

/* A <img> do verso preenche o host (.cv-back--fill, absoluto) em fluxo normal —
   exatamente como as cartas/faces da mesa em Room.razor.css. Como o host é absoluto,
   o tamanho intrínseco da imagem não vaza para o flex da .card (top/bottom == left/right). */
.cv-back--img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}

/* =============================================================================
   MOLDURA DE AVATAR
   ========================================================================== */
.cv-frame {
    --cv-ring: 2px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}

/* O conteúdo (inicial/ícone) num círculo limpo. */
.cv-frame__fill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

/* O anel é um gradiente recortado em formato de aro (padding + máscara): fica nítido,
   acompanha o círculo do avatar e é onde mora o material/animação de cada liga — sem
   recortar o avatar nem cortar o brilho, como as silhuetas faziam. */
.cv-frame::before {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--cv-ring));
    border-radius: 50%;
    padding: var(--cv-ring);
    background: linear-gradient(135deg, var(--cv-dark), var(--cv-mid) 50%, var(--cv-hi));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}

/* Cosmético equipado: o anel substitui qualquer borda do host. */
.cv-frame:not(.cv-frame--default) {
    border: none;
}

/* Sem cosmético: sem anel (o host mantém cor/tamanho/borda padrão). */
.cv-frame--default::before {
    content: none;
}

/* Espessura do aro cresce com a raridade. */
.cv-frame.cv-ouro,
.cv-frame.cv-platina,
.cv-frame.cv-diamante,
.cv-frame.cv-lenda {
    --cv-ring: 3px;
}

/* Prata+ ganham aro cônico (mais rico que o linear do Bronze). */
.cv-frame.cv-prata::before,
.cv-frame.cv-ouro::before,
.cv-frame.cv-platina::before,
.cv-frame.cv-diamante::before {
    background: conic-gradient(from 0deg, var(--cv-dark), var(--cv-hi), var(--cv-mid), var(--cv-hi), var(--cv-dark));
}

/* Lendário: aro iridescente ametista. */
.cv-frame.cv-lenda::before {
    background: conic-gradient(from 0deg, #6B2EA8, #B673FF, #E6CCFF, #B673FF, #6B2EA8);
}

/* Brilho (halo suave, sem recorte) a partir de Ouro. */
.cv-frame.cv-ouro { box-shadow: 0 0 5px var(--cv-mid); }
.cv-frame.cv-platina { box-shadow: 0 0 6px var(--cv-mid); }
.cv-frame.cv-diamante { box-shadow: 0 0 7px var(--cv-mid); }
.cv-frame.cv-lenda { box-shadow: 0 0 9px var(--cv-mid); }

/* ---- Movimento da moldura: aro girando (Platina+), brilho pulsante (Diamante/Lenda
   fora da mesa) e iridescência (Lendário). Compositável; Bronze–Ouro estáticos. ---- */
@keyframes cv-ring-spin {
    to { transform: rotate(360deg); }
}

@keyframes cv-ring-hue {
    to { filter: hue-rotate(360deg); }
}

@keyframes cv-glow-soft {
    0%, 100% { box-shadow: 0 0 5px 0 var(--cv-mid); }
    50% { box-shadow: 0 0 13px 2px var(--cv-mid); }
}

@keyframes cv-frame-sheen {
    0% { opacity: 0.35; }
    30% { opacity: 1; }
    100% { opacity: 0.9; }
}

/* Prata: brilho único no load (o aro acende e assenta). */
.cv-frame.cv-prata::before {
    animation: cv-frame-sheen 1.2s ease-out 1 both;
}

/* Platina+: aro girando continuamente. */
.cv-frame.cv-platina::before {
    animation: cv-ring-spin 9s linear infinite;
}

.cv-frame.cv-diamante::before {
    animation: cv-ring-spin 6s linear infinite;
}

.cv-frame.cv-lenda::before {
    animation: cv-ring-spin 6s linear infinite, cv-ring-hue 7s linear infinite;
}

/* Diamante/Lenda: brilho pulsante só fora da mesa (não sobrecarrega os assentos). */
.cv-frame.cv-diamante:not(.cv-frame--compact),
.cv-frame.cv-lenda:not(.cv-frame--compact) {
    animation: cv-glow-soft 2.6s ease-in-out infinite;
}

/* =============================================================================
   EFEITO DE ESTADO "EM CHAMAS" (cv-fire)
   -----------------------------------------------------------------------------
   Camada de ESTADO derivada da streak atual (CosmeticVisual.FireClass) — não é
   cosmético: compõe POR FORA de qualquer moldura equipada (ou do avatar sem
   moldura) no mesmo elemento host que recebe FrameClass/CosmeticView. Regra de
   performance: transform/opacity/box-shadow animados livremente (compositável)
   + carve-out para efeitos de estado: clip-path STEPPED (poses discretas que
   saltam, 1 repaint a cada ~300ms) é permitido; segue proibido blur/filter
   animado e interpolação CONTÍNUA de propriedades de paint. Brasas é o nível
   mais comum e o mais leve. Pode animar continuamente em QUALQUER liga
   (carve-out de efeitos de estado na spec de cosméticos).
   ========================================================================== */
.cv-fire {
    /* Paleta quente (Brasas/Chamas); o Fogo Azul só troca as variáveis.
       core = base/centro da chama (quase amarelo), glow = corpo, deep = pontas. */
    --fire-glow: rgba(249, 115, 22, 0.75);
    --fire-core: rgba(253, 224, 71, 0.95);
    --fire-deep: rgba(220, 38, 38, 0.85);
    position: relative;
    /* z-index negativo do ::after fica contido no host (não some atrás de fundos). */
    isolation: isolate;
}

.cv-fire--blue {
    --fire-glow: rgba(56, 189, 248, 0.6);
    --fire-core: rgba(186, 230, 253, 0.95);
    --fire-deep: rgba(29, 78, 216, 0.85);
}

/* Brasas (6–9): glow quente pulsando na borda — só box-shadow no host. */
.cv-fire--embers {
    box-shadow: 0 0 8px 2px var(--fire-glow);
    animation: cv-fire-embers 2.4s ease-in-out infinite;
}

@keyframes cv-fire-embers {
    0%, 100% { box-shadow: 0 0 6px 1px var(--fire-glow); }
    50% { box-shadow: 0 0 14px 4px var(--fire-glow); }
}

/* Chamas (10–14) e Fogo azul (15+): halo mais forte + FOGUEIRA ENVOLVENTE. O
   ::after vira um envelope ao redor do avatar inteiro (línguas bem acima da
   moldura, fogo nos lados, base despontando abaixo), pintado pelo gradiente das
   vars --fire-* e recortado por POSES de clip-path com contagem de vértices
   DIFERENTE por keyframe: o browser não consegue interpolar e SALTA de forma em
   forma (stop-motion), que é como fogo real tremula. blur(1px) ESTÁTICO suaviza
   as bordas dos polígonos; o glow do host (cv-fire-embers, duração diferente)
   segue como segunda camada dessincronizada.
   Filho com z-index NEGATIVO pinta ACIMA do background do próprio host (ordem
   de pintura CSS), então "fogo atrás" é feito por máscara: um furo transparente
   do tamanho do disco do avatar — visualmente idêntico a estar atrás. Este é o
   MODO A; o MODO B (línguas na frente do aro, furo só no rosto) foi avaliado
   na validação e descartado — decisão: o avatar fica SEMPRE inteiro visível,
   com o fogo em volta e subindo. */
.cv-fire--flames,
.cv-fire--blue {
    box-shadow: 0 0 13px 3px var(--fire-glow), 0 0 30px 9px var(--fire-glow);
    animation: cv-fire-halo 2.1s ease-in-out infinite;
}

/* Luz ambiente da fogueira (papel da .fireplace__light na referência): uma
   segunda camada de box-shadow bem aberta pulsando — o fogo "ilumina" o que
   está em volta. Duração diferente das poses (2.1s vs 2.5s) e do surge (3.4s)
   para os ritmos nunca baterem iguais. */
@keyframes cv-fire-halo {
    0%, 100% { box-shadow: 0 0 10px 2px var(--fire-glow), 0 0 22px 6px var(--fire-glow); }
    50% { box-shadow: 0 0 16px 4px var(--fire-glow), 0 0 44px 15px var(--fire-glow); }
}

.cv-fire--flames::after,
.cv-fire--blue::after {
    content: "";
    position: absolute;
    /* Os polígonos do repro2 concentram a massa no centro do retângulo: o
       retângulo precisa ser BEM maior que o avatar para a chama ter corpo —
       o avatar fica na metade de baixo da fogueira, com a chama alta acima. */
    inset: -150% -60% -12% -60%;
    z-index: -1;
    pointer-events: none;
    /* Rampa do repro2: amarelo só na basezinha, vira laranja rápido e o corpo
       todo é vermelho — o que dá o "miolo quente" da fogueira de referência. */
    background: linear-gradient(to top, var(--fire-core) 10%, var(--fire-glow) 16%, var(--fire-deep) 55%);
    filter: blur(1px);
    /* Furo-disco do MODO A. O centro do avatar no espaço do ::after (insets
       assimétricos → retângulo 2.2w × 2.62h) fica em 50% x / ~76% y; os eixos
       da elipse compensam a proporção do retângulo para o furo sair circular. */
    -webkit-mask-image: radial-gradient(24% 20% at 50% 76%, transparent 92%, #000 100%);
            mask-image: radial-gradient(24% 20% at 50% 76%, transparent 92%, #000 100%);
    /* Pose de descanso = 1º keyframe; também é a pose congelada do
       prefers-reduced-motion (clip-path declarado fora do @keyframes). */
    clip-path: polygon(48% 97%, 43% 97%, 38% 97%, 34% 94%, 33% 91%, 32% 87%, 29% 83%, 26% 80%, 21% 75%, 20% 71%, 20% 66%, 20% 59%, 20% 65%, 24% 68%, 28% 67%, 28% 62%, 25% 60%, 21% 52%, 21% 43%, 24% 32%, 23% 39%, 24% 46%, 28% 48%, 33% 44%, 33% 39%, 31% 32%, 28% 23%, 30% 14%, 31% 22%, 35% 28%, 39% 28%, 41% 25%, 40% 21%, 39% 13%, 41% 6%, 42% 15%, 45% 23%, 49% 25%, 52% 22%, 51% 13%, 54% 21%, 56% 29%, 53% 35%, 50% 41%, 53% 46%, 58% 46%, 60% 39%, 60% 34%, 64% 39%, 65% 45%, 63% 51%, 61% 56%, 64% 61%, 68% 59%, 71% 55%, 73% 48%, 73% 40%, 76% 48%, 77% 56%, 76% 62%, 74% 66%, 69% 71%, 71% 74%, 75% 74%, 79% 71%, 81% 65%, 82% 72%, 81% 77%, 77% 82%, 73% 86%, 73% 89%, 78% 89%, 82% 85%, 81% 91%, 78% 95%, 72% 97%, 65% 98%, 59% 98%, 53% 99%, 47% 97%);
    /* Três ritmos dessincronizados além do snap das poses: surge = a chama
       inteira respira em altura a partir da base (transform, compositável);
       glimmer = tremular rápido de brilho (opacity, compositável). */
    transform-origin: 50% 100%;
    animation: cv-fire-burn 2.5s linear infinite,
               cv-fire-surge 3.4s ease-in-out infinite,
               cv-fire-glimmer 0.45s ease-in-out infinite alternate;
    will-change: transform, opacity;
}

@keyframes cv-fire-surge {
    0%, 100% { transform: scaleY(1) scaleX(1); }
    50% { transform: scaleY(1.06) scaleX(1.025); }
}

@keyframes cv-fire-glimmer {
    from { opacity: 1; }
    to { opacity: 0.84; }
}

/* 10 poses do repro2 (ciclo burn_alt do CodePen fireplace, polígonos verbatim):
   60–80 vértices por pose com vales profundos e línguas finas; contagens
   diferentes entre poses vizinhas forçam o snap (sem interpolação): ~250ms
   por pose. */
@keyframes cv-fire-burn {
    0%, 100% { clip-path: polygon(48% 97%, 43% 97%, 38% 97%, 34% 94%, 33% 91%, 32% 87%, 29% 83%, 26% 80%, 21% 75%, 20% 71%, 20% 66%, 20% 59%, 20% 65%, 24% 68%, 28% 67%, 28% 62%, 25% 60%, 21% 52%, 21% 43%, 24% 32%, 23% 39%, 24% 46%, 28% 48%, 33% 44%, 33% 39%, 31% 32%, 28% 23%, 30% 14%, 31% 22%, 35% 28%, 39% 28%, 41% 25%, 40% 21%, 39% 13%, 41% 6%, 42% 15%, 45% 23%, 49% 25%, 52% 22%, 51% 13%, 54% 21%, 56% 29%, 53% 35%, 50% 41%, 53% 46%, 58% 46%, 60% 39%, 60% 34%, 64% 39%, 65% 45%, 63% 51%, 61% 56%, 64% 61%, 68% 59%, 71% 55%, 73% 48%, 73% 40%, 76% 48%, 77% 56%, 76% 62%, 74% 66%, 69% 71%, 71% 74%, 75% 74%, 79% 71%, 81% 65%, 82% 72%, 81% 77%, 77% 82%, 73% 86%, 73% 89%, 78% 89%, 82% 85%, 81% 91%, 78% 95%, 72% 97%, 65% 98%, 59% 98%, 53% 99%, 47% 97%); }
    10% { clip-path: polygon(44% 100%, 39% 100%, 35% 99%, 32% 99%, 32% 99%, 27% 97%, 24% 95%, 21% 92%, 19% 89%, 18% 86%, 16% 83%, 16% 79%, 17% 73%, 18% 68%, 17% 64%, 16% 64%, 12% 60%, 13% 52%, 16% 45%, 18% 40%, 17% 47%, 17% 53%, 21% 57%, 26% 59%, 29% 56%, 30% 48%, 28% 45%, 25% 38%, 25% 33%, 27% 23%, 29% 15%, 28% 23%, 29% 31%, 32% 38%, 36% 49%, 39% 52%, 40% 59%, 41% 64%, 47% 66%, 52% 64%, 50% 56%, 47% 48%, 47% 42%, 51% 34%, 53% 29%, 51% 40%, 53% 46%, 55% 52%, 59% 54%, 62% 53%, 64% 49%, 63% 43%, 67% 46%, 68% 54%, 67% 60%, 64% 65%, 63% 71%, 66% 75%, 71% 77%, 75% 75%, 76% 68%, 78% 72%, 79% 76%, 77% 80%, 73% 82%, 72% 86%, 77% 88%, 82% 87%, 84% 81%, 84% 88%, 83% 92%, 77% 96%, 73% 99%, 68% 99%, 62% 98%, 57% 100%, 53% 100%, 53% 95%, 50% 94%, 44% 93%); }
    20% { clip-path: polygon(44% 99%, 41% 99%, 35% 98%, 29% 97%, 24% 93%, 21% 86%, 20% 80%, 16% 74%, 16% 64%, 16% 71%, 21% 75%, 25% 72%, 25% 65%, 22% 59%, 19% 53%, 19% 44%, 21% 52%, 25% 59%, 29% 57%, 29% 51%, 26% 44%, 26% 38%, 30% 32%, 31% 26%, 30% 18%, 34% 25%, 33% 35%, 33% 44%, 34% 50%, 39% 53%, 44% 52%, 45% 49%, 44% 44%, 42% 38%, 44% 33%, 48% 26%, 45% 35%, 47% 41%, 50% 44%, 51% 52%, 49% 60%, 48% 65%, 53% 69%, 58% 65%, 57% 59%, 58% 51%, 62% 41%, 66% 40%, 64% 47%, 61% 58%, 63% 66%, 66% 68%, 70% 67%, 72% 62%, 73% 57%, 71% 48%, 75% 53%, 79% 57%, 79% 64%, 76% 70%, 72% 75%, 70% 78%, 74% 80%, 78% 79%, 82% 76%, 84% 71%, 85% 66%, 84% 62%, 88% 67%, 89% 72%, 89% 79%, 87% 83%, 84% 89%, 81% 93%, 76% 97%, 69% 98%, 60% 99%, 54% 99%, 48% 100%, 45% 97%); }
    30% { clip-path: polygon(38% 100%, 34% 99%, 28% 96%, 25% 93%, 23% 89%, 19% 85%, 18% 79%, 21% 74%, 24% 68%, 24% 62%, 22% 55%, 20% 50%, 24% 53%, 28% 61%, 31% 68%, 36% 68%, 38% 69%, 43% 67%, 41% 59%, 35% 54%, 33% 46%, 35% 39%, 41% 32%, 41% 26%, 38% 17%, 42% 21%, 46% 29%, 46% 39%, 43% 45%, 43% 51%, 47% 55%, 52% 56%, 55% 54%, 55% 49%, 54% 42%, 52% 34%, 59% 43%, 61% 51%, 60% 58%, 58% 63%, 65% 68%, 69% 67%, 72% 63%, 72% 57%, 71% 51%, 76% 39%, 73% 50%, 77% 56%, 81% 55%, 82% 49%, 84% 59%, 79% 69%, 72% 74%, 69% 76%, 71% 81%, 77% 81%, 81% 77%, 84% 70%, 87% 75%, 86% 81%, 84% 84%, 81% 87%, 81% 91%, 79% 94%, 77% 96%, 74% 97%, 71% 95%, 68% 96%, 67% 99%, 63% 100%, 60% 100%, 55% 100%, 53% 100%, 50% 100%, 48% 100%, 46% 100%, 44% 100%, 44% 100%, 42% 100%, 41% 100%); }
    40% { clip-path: polygon(45% 99%, 40% 98%, 34% 98%, 31% 96%, 28% 93%, 26% 89%, 27% 84%, 26% 81%, 23% 77%, 20% 73%, 18% 70%, 19% 65%, 19% 60%, 20% 53%, 20% 43%, 24% 41%, 28% 32%, 28% 40%, 28% 48%, 29% 53%, 33% 52%, 35% 49%, 36% 42%, 36% 35%, 36% 27%, 39% 19%, 42% 12%, 40% 23%, 39% 29%, 41% 37%, 43% 41%, 44% 47%, 45% 52%, 47% 55%, 50% 57%, 52% 54%, 53% 48%, 52% 42%, 51% 33%, 50% 26%, 54% 36%, 55% 39%, 57% 46%, 57% 52%, 55% 58%, 55% 61%, 58% 65%, 62% 64%, 64% 60%, 65% 54%, 64% 49%, 65% 43%, 68% 38%, 67% 44%, 69% 51%, 72% 53%, 72% 59%, 70% 65%, 68% 69%, 68% 74%, 71% 75%, 74% 73%, 76% 69%, 78% 63%, 82% 58%, 81% 63%, 81% 69%, 81% 75%, 76% 80%, 75% 85%, 79% 87%, 82% 84%, 83% 91%, 79% 94%, 75% 96%, 71% 97%, 64% 98%, 58% 99%, 53% 98%, 46% 100%); }
    50% { clip-path: polygon(40% 99%, 35% 99%, 31% 98%, 25% 95%, 23% 92%, 21% 88%, 20% 83%, 21% 80%, 22% 76%, 21% 70%, 20% 68%, 18% 64%, 21% 68%, 23% 71%, 25% 75%, 26% 79%, 31% 84%, 31% 79%, 28% 69%, 23% 60%, 17% 53%, 19% 41%, 25% 31%, 24% 24%, 24% 19%, 26% 24%, 28% 30%, 26% 37%, 25% 44%, 28% 49%, 33% 50%, 39% 48%, 40% 43%, 39% 35%, 37% 29%, 42% 34%, 43% 40%, 44% 47%, 43% 53%, 45% 59%, 51% 60%, 53% 56%, 51% 49%, 51% 44%, 53% 36%, 55% 32%, 54% 22%, 57% 29%, 57% 44%, 56% 50%, 58% 56%, 62% 59%, 66% 59%, 68% 53%, 66% 45%, 65% 38%, 70% 44%, 71% 50%, 72% 55%, 71% 62%, 68% 66%, 65% 70%, 67% 74%, 72% 74%, 76% 71%, 78% 65%, 80% 68%, 81% 73%, 78% 81%, 76% 89%, 77% 93%, 75% 97%, 70% 98%, 67% 98%, 62% 98%, 58% 98%, 53% 99%, 50% 99%, 47% 99%, 45% 99%); }
    60% { clip-path: polygon(45% 99%, 41% 99%, 35% 98%, 30% 98%, 25% 94%, 22% 89%, 21% 84%, 23% 77%, 23% 70%, 19% 63%, 23% 66%, 27% 71%, 28% 76%, 32% 78%, 35% 72%, 32% 67%, 28% 64%, 24% 58%, 24% 49%, 27% 42%, 30% 34%, 31% 24%, 29% 13%, 33% 18%, 38% 25%, 38% 36%, 37% 44%, 41% 48%, 45% 48%, 48% 45%, 48% 39%, 46% 33%, 48% 27%, 52% 20%, 50% 29%, 51% 38%, 53% 44%, 54% 52%, 56% 57%, 61% 57%, 64% 55%, 65% 48%, 63% 39%, 63% 32%, 66% 37%, 69% 44%, 70% 52%, 68% 59%, 66% 64%, 67% 69%, 73% 72%, 76% 71%, 77% 66%, 76% 58%, 76% 51%, 80% 57%, 82% 62%, 82% 68%, 80% 73%, 77% 78%, 74% 82%, 75% 87%, 78% 87%, 81% 84%, 84% 79%, 86% 74%, 88% 78%, 87% 83%, 84% 89%, 82% 92%, 78% 97%, 74% 97%, 69% 97%, 66% 98%, 61% 98%, 57% 97%, 53% 99%, 49% 96%, 47% 99%, 48% 99%); }
    70% { clip-path: polygon(41% 99%, 34% 99%, 27% 98%, 23% 96%, 18% 94%, 17% 90%, 16% 85%, 16% 81%, 14% 75%, 12% 68%, 11% 62%, 14% 67%, 19% 72%, 21% 69%, 19% 62%, 18% 57%, 17% 54%, 18% 49%, 22% 43%, 24% 36%, 25% 30%, 24% 23%, 27% 24%, 29% 33%, 28% 39%, 29% 48%, 31% 53%, 36% 53%, 39% 47%, 37% 41%, 40% 43%, 42% 49%, 41% 55%, 42% 57%, 45% 59%, 50% 60%, 53% 55%, 54% 49%, 53% 44%, 50% 39%, 56% 42%, 58% 47%, 58% 56%, 58% 59%, 66% 61%, 67% 58%, 67% 51%, 72% 46%, 70% 55%, 72% 59%, 72% 64%, 68% 69%, 66% 74%, 64% 80%, 68% 82%, 72% 78%, 74% 73%, 76% 77%, 76% 80%, 74% 83%, 73% 87%, 76% 89%, 78% 88%, 79% 85%, 80% 82%, 83% 86%, 83% 90%, 82% 92%, 79% 94%, 76% 96%, 73% 99%, 70% 98%, 66% 98%, 62% 99%, 58% 100%, 54% 100%, 51% 100%, 49% 100%, 46% 100%, 44% 100%); }
    80% { clip-path: polygon(47% 99%, 42% 99%, 37% 98%, 32% 96%, 28% 92%, 26% 89%, 26% 83%, 26% 80%, 26% 72%, 23% 67%, 16% 63%, 14% 52%, 16% 46%, 16% 53%, 20% 60%, 26% 58%, 27% 51%, 25% 46%, 20% 41%, 19% 36%, 19% 30%, 21% 26%, 24% 20%, 23% 13%, 22% 7%, 26% 11%, 28% 17%, 28% 24%, 26% 30%, 30% 34%, 34% 34%, 39% 32%, 40% 27%, 38% 21%, 43% 28%, 43% 36%, 41% 41%, 46% 44%, 51% 41%, 53% 35%, 53% 26%, 57% 26%, 59% 33%, 60% 39%, 57% 46%, 55% 53%, 58% 57%, 64% 56%, 66% 52%, 69% 41%, 70% 48%, 69% 56%, 66% 63%, 64% 67%, 65% 71%, 70% 71%, 74% 68%, 76% 62%, 77% 54%, 79% 60%, 81% 66%, 80% 71%, 76% 75%, 72% 78%, 71% 82%, 75% 84%, 80% 83%, 84% 78%, 86% 83%, 83% 89%, 78% 92%, 74% 92%, 73% 96%, 69% 97%, 65% 96%, 62% 98%, 57% 99%, 54% 97%, 51% 99%, 46% 99%); }
    90% { clip-path: polygon(43% 99%, 39% 99%, 33% 99%, 29% 98%, 25% 97%, 20% 94%, 18% 91%, 17% 87%, 16% 82%, 17% 78%, 17% 73%, 18% 65%, 22% 61%, 23% 56%, 23% 51%, 21% 46%, 25% 51%, 26% 59%, 26% 64%, 28% 65%, 31% 65%, 33% 63%, 33% 59%, 31% 54%, 29% 49%, 28% 43%, 30% 37%, 31% 30%, 31% 24%, 33% 28%, 34% 33%, 33% 39%, 35% 46%, 37% 50%, 39% 55%, 44% 54%, 43% 49%, 43% 44%, 44% 39%, 44% 33%, 46% 38%, 48% 42%, 48% 47%, 52% 49%, 52% 51%, 51% 57%, 52% 60%, 57% 59%, 58% 56%, 59% 50%, 57% 42%, 56% 38%, 61% 44%, 62% 47%, 64% 53%, 64% 57%, 62% 61%, 61% 66%, 63% 69%, 68% 69%, 70% 67%, 71% 64%, 71% 58%, 71% 53%, 73% 49%, 73% 55%, 75% 58%, 76% 63%, 74% 68%, 73% 73%, 76% 78%, 77% 81%, 77% 85%, 77% 90%, 74% 94%, 71% 97%, 68% 99%, 61% 99%, 53% 100%, 48% 100%); }
}

/* Variante compacta (mesa/roster/linhas densas): fogueira um degrau menor que a
   normal para não invadir assentos vizinhos; furo reposicionado para o retângulo
   compacto (2.04w × 2.42h, centro do avatar em 50% x / ~74% y). */
.cv-frame--compact.cv-fire--flames::after,
.cv-frame--compact.cv-fire--blue::after {
    inset: -130% -52% -12% -52%;
    -webkit-mask-image: radial-gradient(26% 22% at 50% 74%, transparent 92%, #000 100%);
            mask-image: radial-gradient(26% 22% at 50% 74%, transparent 92%, #000 100%);
}

.cv-frame--compact.cv-fire--embers { box-shadow: 0 0 6px 1px var(--fire-glow); }

/* Na mesa/roster o halo ambiente seria demais com 4 jogadores em chamas:
   volta para o pulso curto de brasas, halo bem menor. */
.cv-frame--compact.cv-fire--flames,
.cv-frame--compact.cv-fire--blue {
    box-shadow: 0 0 9px 2px var(--fire-glow), 0 0 18px 5px var(--fire-glow);
    animation: cv-fire-embers 1.8s ease-in-out infinite;
}

/* ---- Transições one-shot (o cliente remove a classe após tocar) ------------- */

/* Ignição/level-up: clarão curto que estoura e assenta no estado contínuo. */
.cv-fire-ignite {
    animation: cv-fire-ignite 0.9s ease-out 1;
}

@keyframes cv-fire-ignite {
    0% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
    30% { transform: scale(1.12); box-shadow: 0 0 26px 10px var(--fire-glow, rgba(249, 115, 22, 0.7)); }
    100% { transform: scale(1); box-shadow: 0 0 10px 2px var(--fire-glow, rgba(249, 115, 22, 0.55)); }
}

/* Fumaça de extinção: o jogador em chamas perdeu — nuvem cinza sobe e dissipa.
   Classe autônoma (o host já não tem mais cv-fire); termina invisível (both). */
.cv-fire-smoke {
    position: relative;
    isolation: isolate;
}

.cv-fire-smoke::after {
    content: "";
    position: absolute;
    inset: -34% -16% -6% -16%;
    z-index: 1;
    pointer-events: none;
    border-radius: 50%;
    background:
        radial-gradient(30% 40% at 32% 64%, rgba(148, 163, 184, 0.8), transparent 70%),
        radial-gradient(26% 36% at 60% 52%, rgba(100, 116, 139, 0.7), transparent 70%),
        radial-gradient(22% 30% at 46% 78%, rgba(203, 213, 225, 0.6), transparent 70%);
    animation: cv-fire-smoke 1.6s ease-out 1 both;
    will-change: transform, opacity;
}

@keyframes cv-fire-smoke {
    0% { opacity: 0.9; transform: translateY(4%) scale(0.9); }
    100% { opacity: 0; transform: translateY(-50%) scale(1.3); }
}

/* =============================================================================
   ACESSIBILIDADE — movimento reduzido suprime animações contínuas
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .cv-frame.cv-prata::before,
    .cv-frame.cv-platina::before,
    .cv-frame.cv-diamante::before,
    .cv-frame.cv-lenda::before,
    .cv-frame.cv-diamante,
    .cv-frame.cv-lenda {
        animation: none !important;
    }

    /* Em Chamas: a animação contínua some mas o realce ESTÁTICO do nível permanece
       — box-shadow das classes cv-fire--* e a fogueira CONGELADA na pose de
       descanso (o clip-path do 1º keyframe está declarado fora do @keyframes,
       na regra base do ::after, nas duas variantes) — o estado não desaparece
       da UI. Transições (ignição/fumaça) são puladas: a fumaça nem renderiza
       (terminaria invisível) e o estado final aparece direto. */
    .cv-fire--embers,
    .cv-fire--flames,
    .cv-fire--blue,
    .cv-fire--flames::after,
    .cv-fire--blue::after,
    .cv-fire-ignite {
        animation: none !important;
    }

    .cv-fire-smoke::after {
        content: none;
    }
}

/* =============================================================================
   TOASTS (RadzenNotification) — anatomia compacta "Cassino Premium"
   -----------------------------------------------------------------------------
   Override CSS-only sobre o markup do Radzen (carregado DEPOIS do material-dark):

     .rz-notification-item-wrapper            (carrega a classe de severidade:
        .rz-notification-{success|error|info|warn})
       â”” .rz-notification.rz-notification-item   (a caixa do toast)
           ├ i.rz-notification-icon ...          (ícone padrão — escondido)
           â”” .rz-notification-message-wrapper
               ├ .rz-notification-title          (Summary — não usado, escondido)
               └ .rz-notification-message         (Detail — a mensagem em 1 linha)
       └ .rz-progressbar > .rz-progressbar-value (progresso → vira sublinhado)

   Severidade vira ÍCONE + COR; o rótulo em caixa-alta some (já não é setado pelo
   helper). O ícone reusa a fonte "Material Symbols" que o Radzen já empacota
   (var(--rz-icon-font-family)), sem dependência nova. (tasks 2.x e 3.x)
   ========================================================================== */

/* ---- 2.1 Caixa do toast: glass escuro, blur, sombra, 1 linha, compacta ------ */
.rz-notification-item-wrapper > .rz-notification {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 248px;
    padding: 0.45rem 0.65rem !important;
    border-radius: var(--truco-radius-md) !important;
    background: rgba(15, 19, 31, 0.78) !important;
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
    box-shadow: var(--truco-elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    color: var(--rz-text-color) !important;
}

/* o wrapper é o contexto de posição do sublinhado de progresso e da animação */
.rz-notification-item-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: var(--truco-radius-md);
}

/* mensagem (Detail): Oswald, 1 linha com reticências --------------------- (2.5) */
.rz-notification-item-wrapper > .rz-notification .rz-notification-message-wrapper {
    flex: 1 1 auto;
    min-width: 0;
}

.rz-notification-item-wrapper > .rz-notification .rz-notification-message {
    font-family: var(--truco-display-font-family);
    font-weight: 500;
    font-size: 0.85rem;
    letter-spacing: 0.015em;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* sem Summary: o título redundante em caixa-alta não ocupa espaço */
.rz-notification-item-wrapper > .rz-notification .rz-notification-title {
    display: none;
}

/* botão de fechar discreto, alinhado na linha (CloseOnClick segue ativo) */
.rz-notification-item-wrapper > .rz-notification .rz-notification-close {
    flex: 0 0 auto;
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

.rz-notification-item-wrapper > .rz-notification .rz-notification-close:hover {
    opacity: 1;
}

/* ---- 2.2 Hairline de 1px na cor da severidade ------------------------------- */
.rz-notification-item-wrapper > .rz-notification {
    border: 1px solid var(--truco-gold-hairline) !important;
}

.rz-notification-success > .rz-notification {
    border-color: color-mix(in srgb, var(--rz-success) 55%, transparent) !important;
}

.rz-notification-error > .rz-notification {
    border-color: color-mix(in srgb, var(--rz-danger) 55%, transparent) !important;
}

.rz-notification-warn > .rz-notification {
    border-color: color-mix(in srgb, var(--rz-warning) 55%, transparent) !important;
}

.rz-notification-info > .rz-notification {
    border-color: color-mix(in srgb, var(--rz-info) 55%, transparent) !important;
}

/* ---- 2.3 Ícone por severidade via ::before (Material Symbols, cor do tema) -- */
/* esconde o ícone padrão do Radzen — substituído pelo ::before colorido */
.rz-notification-item-wrapper > .rz-notification > .rz-notification-icon {
    display: none !important;
}

.rz-notification-item-wrapper > .rz-notification::before {
    flex: 0 0 auto;
    font-family: var(--rz-icon-font-family); /* "Material Symbols" — já empacotado */
    font-weight: normal;
    font-style: normal;
    font-size: 1.05rem;
    line-height: 1;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

.rz-notification-success > .rz-notification::before {
    content: 'check_circle';
    color: var(--rz-success);
}

.rz-notification-error > .rz-notification::before {
    content: 'error';
    color: var(--rz-danger);
}

.rz-notification-warn > .rz-notification::before {
    content: 'warning';
    color: var(--rz-warning);
}

.rz-notification-info > .rz-notification::before {
    content: 'info';
    color: var(--rz-info);
}

/* ---- 2.4 Progresso como sublinhado fino na base, na cor da severidade ------- */
.rz-notification-item-wrapper > .rz-progressbar {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    height: 2px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border-radius: 0 !important;
}

.rz-notification-item-wrapper > .rz-progressbar .rz-progressbar-value {
    border-radius: 0 !important;
}

.rz-notification-success > .rz-progressbar .rz-progressbar-value {
    background: var(--rz-success) !important;
}

.rz-notification-error > .rz-progressbar .rz-progressbar-value {
    background: var(--rz-danger) !important;
}

.rz-notification-warn > .rz-progressbar .rz-progressbar-value {
    background: var(--rz-warning) !important;
}

.rz-notification-info > .rz-progressbar .rz-progressbar-value {
    background: var(--rz-info) !important;
}

/* ---- 3.1 Pilha limitada a 3 visíveis (não desce até o assento da direita) --- */
/* Radzen acrescenta toasts ao fim da lista; manter os 3 primeiros (topo, junto ao
   canto) e esconder o excedente. Combinado com as durações curtas, a pilha
   raramente passa de 2-3 na prática. Se a ordem de render se inverter, trocar por
   :nth-child(-n+3) visível / :nth-last-child(n+4) escondido (ajuste de 1 linha). */
.rz-notification-item-wrapper:nth-child(n+4) {
    display: none !important;
}

/* ---- 3.2 Entrada slide+fade (linguagem do trucoFadeUp), respeitando movimento */
@keyframes trucoToastIn {
    from {
        opacity: 0;
        transform: translateY(-8px) translateX(12px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .rz-notification-item-wrapper {
        animation: trucoToastIn 0.28s ease both;
    }
}

/* ---- 3.3 Mobile: toast even tighter so it does not cover the table --------- */
@media (max-width: 640px) {
    .rz-notification-item-wrapper > .rz-notification {
        max-width: 220px;
        gap: 0.45rem;
        padding: 0.4rem 0.55rem !important;
    }

    .rz-notification-item-wrapper > .rz-notification .rz-notification-message {
        font-size: 0.8rem;
    }

    .rz-notification-item-wrapper > .rz-notification::before {
        font-size: 0.95rem;
    }
}

/* =============================================================================
   /login - "Entre na Arena" (single-column redesign from the Login mock)
   -----------------------------------------------------------------------------
   Mobile-first, centered single column. The FORM is pure Radzen; everything here
   is presentation by class (Radzen scoped CSS cannot mark child-component roots,
   so login styles live in the theme, like the other lobby screens). Reuses the
   app tokens: Oswald display (.truco-display), Inter body, emerald --rz-primary,
   gold --rz-warning. Only transform/opacity/box-shadow animate (composited).
   ========================================================================== */

.login-arena {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 33rem;
    min-height: 100dvh;
    margin: 0 auto;
    padding: clamp(1.25rem, 4vw, 2rem) clamp(1rem, 5vw, 1.6rem) 3rem;
    display: flex;
    flex-direction: column;
    color: var(--rz-text-color);
    background:
        radial-gradient(120% 80% at 50% -8%, rgba(31, 169, 113, 0.22) 0%, rgba(8, 19, 16, 0) 46%),
        radial-gradient(90% 60% at 100% 108%, rgba(212, 175, 55, 0.10), transparent 60%);
}

.login-arena > * {
    position: relative;
    z-index: 1;
}

/* ---- Stage / form wrappers: stacked on mobile, split on desktop ---------- */
.login-arena__stage,
.login-arena__panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ---- Tablet (>=640px): the single column gets a little more room ---------- */
/* Still one column (mock is mobile-first), but on tablets we widen the stage so
   the fan + headline don't look cramped in the middle of a large viewport. */
@media (min-width: 640px) and (max-width: 991.98px) {
    .login-arena {
        max-width: 38rem;
    }

    .login-headline__title {
        font-size: clamp(2.6rem, 7vw, 3.2rem);
    }

    .login-headline__sub {
        font-size: 0.95rem;
    }
}

/* >= 992px: full-bleed split-screen. The "arena" show (brand + fan + headline +
   perks) is the LEFT hero panel and fills the larger share of the viewport; the
   login/register card sits in a RIGHT form panel with its own backdrop. No outer
   max-width — the layout occupies 100% of the screen. The footer is pinned to the
   bottom of the hero side. Below 992px the single column stands. */
@media (min-width: 992px) {
    .login-arena {
        flex-direction: row;
        flex-wrap: nowrap;
        /* flex-start (not stretch) so a taller Register form never stretches the
           hero column and shifts it down — each column owns its 100dvh below. */
        align-items: flex-start;
        max-width: none;
        min-height: 100dvh;
        gap: 0;
        padding: 0;
        background:
            radial-gradient(50% 60% at 24% 34%, rgba(31, 169, 113, 0.20) 0%, rgba(8, 19, 16, 0) 60%),
            radial-gradient(42% 55% at 2% 100%, rgba(212, 175, 55, 0.10), transparent 60%);
    }

    /* LEFT hero panel: fills the remaining width, content vertically centered and
       left-aligned like a real desktop split (not a centered mobile card). Its own
       100dvh keeps the hero anchored regardless of the form's height. */
    .login-arena__stage {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 100dvh;
        justify-content: center;
        text-align: left;
        padding: clamp(2.5rem, 5vh, 5rem) clamp(2.5rem, 5vw, 6rem);
    }

    /* RIGHT form panel: fixed comfortable width with its own backdrop + edge, the
       card centered within it both ways so it never stretches too wide. Grows past
       100dvh on its own when Register is tall; the page scrolls, the hero stays put. */
    .login-arena__panel {
        flex: 0 0 clamp(30rem, 34vw, 38rem);
        min-height: 100dvh;
        /* Top-anchored (not center) so the card's top — and the toggle you click —
           stays put when Entrar/Registrar swap heights; the taller form just grows
           downward instead of the whole card recentering and "dropping". */
        justify-content: flex-start;
        align-items: center;
        padding: clamp(3rem, 12vh, 7rem) clamp(2rem, 3vw, 4rem) clamp(2.5rem, 5vh, 4rem);
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.42));
        border-left: 1px solid rgba(255, 255, 255, 0.06);
        box-shadow: -34px 0 70px rgba(0, 0, 0, 0.35);
    }

    .login-arena__panel .login-card {
        width: 100%;
        max-width: 25rem;
    }

    /* The fan stops stretching to the full column and anchors to the left so it
       sits above the headline instead of floating in the column center. */
    .login-arena__stage .login-fan {
        align-self: flex-start;
        width: 22rem;
        height: 14rem;
        margin: 0.25rem 0 1.75rem;
    }

    .login-arena__stage .login-headline {
        text-align: left;
        margin-top: 0;
    }

    .login-arena__stage .login-headline__title {
        font-size: clamp(2.7rem, 3.4vw, 3.6rem);
    }

    .login-arena__stage .login-headline__sub {
        font-size: 1.05rem;
        max-width: 32rem;
    }

    .login-arena__stage .login-perks {
        justify-content: flex-start;
        margin: 1.5rem 0 0;
        max-width: 34rem;
    }

    /* Footer pinned to the bottom-left of the hero side (the arena is positioned). */
    .login-foot {
        position: absolute;
        left: 0;
        bottom: clamp(1rem, 3vh, 2rem);
        width: auto;
        margin: 0;
        padding-left: clamp(2.5rem, 5vw, 6rem);
        text-align: left;
    }
}

/* >= 1280px: large desktops get a bigger hero and a touch more form breathing room. */
@media (min-width: 1280px) {
    .login-arena__stage {
        padding-left: clamp(4rem, 7vw, 9rem);
    }

    .login-arena__stage .login-fan {
        width: 24rem;
        height: 15rem;
    }

    .login-foot {
        padding-left: clamp(4rem, 7vw, 9rem);
    }
}

/* ---- Brand bar + honest "live" badge ------------------------------------- */
.login-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.login-brand__mark {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    color: var(--rz-text-title-color);
}

.login-brand__sub {
    display: block;
    font-family: var(--rz-text-font-family);
    font-weight: 600;
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    color: var(--rz-text-disabled-color);
    margin-top: 0.4rem;
}

.login-live {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: 0 0 auto;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #cfe9df;
    background: rgba(31, 169, 113, 0.10);
    border: 1px solid rgba(31, 169, 113, 0.30);
}

.login-live__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rz-primary);
    box-shadow: 0 0 0 0 rgba(31, 169, 113, 0.55);
    animation: loginLiveDot 1.8s ease-out infinite;
}

@keyframes loginLiveDot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(31, 169, 113, 0.5); }
    70%      { box-shadow: 0 0 0 7px rgba(31, 169, 113, 0); }
}

/* ---- "Mao de truco" floating fan (real card art) ------------------------- */
.login-fan {
    position: relative;
    height: clamp(150px, 38vw, 200px);
    margin: 0.5rem 0 0.25rem;
}

.login-fan__shadow {
    position: absolute;
    left: 50%;
    bottom: 8px;
    width: 230px;
    height: 30px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.55), transparent 70%);
    filter: blur(4px);
}

.login-fan__card {
    position: absolute;
    left: 50%;
    bottom: 12px;
    width: clamp(78px, 21vw, 96px);
    aspect-ratio: 2 / 3;
    object-fit: contain;
    border-radius: 10px;
    transform-origin: bottom center;
    filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.55));
    will-change: transform;
}

.login-fan__card--left {
    transform: translateX(calc(-50% - 64px)) rotate(-15deg);
    animation: loginFloatLeft 4.6s ease-in-out infinite;
    z-index: 1;
}

.login-fan__card--right {
    transform: translateX(calc(-50% + 64px)) rotate(15deg);
    animation: loginFloatRight 4.1s ease-in-out infinite;
    z-index: 1;
}

.login-fan__card--center {
    bottom: 22px;
    width: clamp(82px, 22vw, 100px);
    transform: translateX(-50%);
    z-index: 2;
    filter: drop-shadow(0 22px 40px rgba(0, 0, 0, 0.6));
    animation: loginFloatCenter 3.6s ease-in-out infinite;
}

@keyframes loginFloatLeft {
    0%, 100% { transform: translateX(calc(-50% - 64px)) rotate(-15deg) translateY(0); }
    50%      { transform: translateX(calc(-50% - 64px)) rotate(-16.5deg) translateY(-13px); }
}

@keyframes loginFloatRight {
    0%, 100% { transform: translateX(calc(-50% + 64px)) rotate(15deg) translateY(0); }
    50%      { transform: translateX(calc(-50% + 64px)) rotate(16.5deg) translateY(-11px); }
}

@keyframes loginFloatCenter {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(-19px); }
}

/* ---- Headline ------------------------------------------------------------ */
.login-headline {
    text-align: center;
    margin-top: 0.25rem;
}

.login-headline__title {
    margin: 0;
    /* Scales from 320px phones up without overflowing the line "ENTRE NA ARENA". */
    font-size: clamp(1.9rem, 8.2vw, 2.9rem);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: 0.02em;
    color: var(--rz-text-title-color);
}

.login-headline__title .truco-gold-text {
    text-shadow: 0 0 26px rgba(212, 175, 55, 0.25);
}

.login-headline__sub {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
    color: var(--rz-text-secondary-color);
}

/* ---- Benefit chips ------------------------------------------------------- */
.login-perks {
    list-style: none;
    margin: 1rem 0 1.25rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.login-perk {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    color: var(--rz-text-secondary-color);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.login-perk span {
    font-size: 0.85rem;
    line-height: 1;
}

.login-perk--emerald { background: rgba(31, 169, 113, 0.08); border-color: rgba(31, 169, 113, 0.22); color: #cfe9df; }
.login-perk--emerald span { color: var(--rz-primary-light); }
.login-perk--ruby { background: rgba(192, 57, 43, 0.08); border-color: rgba(192, 57, 43, 0.24); color: #f0d3d4; }
.login-perk--ruby span { color: var(--rz-danger-light); }
.login-perk--gold { background: rgba(212, 175, 55, 0.09); border-color: rgba(212, 175, 55, 0.26); color: #f0e3c2; }
.login-perk--gold span { color: var(--rz-warning); }

/* ---- Glass form card ----------------------------------------------------- */
.login-card {
    background: linear-gradient(180deg, rgba(16, 25, 21, 0.96), rgba(9, 15, 13, 0.96));
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 24px;
    padding: 1.25rem 1.15rem 1.4rem;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
}

/* ---- Brand crest crowning the form card ---------------------------------- */
/* The real logo sits at the top of the card (outside the flip, so it's steady
   when Entrar/Registrar swap). It reads as a seal on the form — the animated fan
   on the hero side stays the page's main card motif. */
.login-card__crest {
    display: block;
    width: auto;
    height: 5.5rem;
    margin: 0.25rem auto 1.1rem;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.55));
}

/* ---- Segmented toggle: Entrar | Registrar -------------------------------- */
.login-toggle {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 5px;
    margin-bottom: 1.25rem;
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 999px;
}

.login-toggle__thumb {
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 5px;
    width: calc(50% - 5px);
    border-radius: 999px;
    background: linear-gradient(135deg, #2BD08C, #178A5C);
    box-shadow: 0 8px 22px rgba(31, 169, 113, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: transform 0.38s cubic-bezier(0.34, 1.4, 0.4, 1);
}

.login-toggle__thumb.is-register {
    transform: translateX(100%);
}

.login-toggle__btn {
    position: relative;
    z-index: 1;
    appearance: none;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0.65rem 0;
    font-family: var(--truco-display-font-family);
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rz-text-secondary-color);
    transition: color 0.3s ease;
}

.login-toggle__btn.is-active {
    color: #04130C;
}

/* ---- Heading inside the card --------------------------------------------- */
.login-card__head {
    text-align: center;
    margin-bottom: 1.1rem;
}

.login-card__heading {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--rz-text-title-color);
}

.login-card__sub {
    margin-top: 0.35rem;
    font-size: 0.82rem;
    color: var(--rz-text-secondary-color);
}

/* ---- Radzen fields, restyled to the mock --------------------------------- */
.login-fields {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.login-field {
    display: flex;
    flex-direction: column;
}

.login-field__label.rz-label {
    display: block;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7c948b;
    margin-bottom: 0.45rem;
}

.login-card .login-input {
    width: 100%;
    box-sizing: border-box;
    background: #0b1512;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    padding: 0.9rem 1rem;
    font-family: var(--rz-text-font-family);
    font-size: 1rem;
    color: var(--rz-text-color);
    outline: none;
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.login-card .login-input.has-eye {
    padding-right: 3rem;
}

.login-card .login-input:focus {
    border-color: var(--rz-primary);
    box-shadow: 0 0 0 3px rgba(31, 169, 113, 0.18);
}

.login-card .login-input::placeholder {
    color: #56695f;
    opacity: 1;
}

.login-card .login-input:-webkit-autofill {
    -webkit-text-fill-color: var(--rz-text-color);
    -webkit-box-shadow: 0 0 0 40px #0b1512 inset;
    caret-color: var(--rz-text-color);
}

.login-input-wrap {
    position: relative;
}

.login-eye.rz-button {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    min-width: 0;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border-radius: 10px;
    color: #7c948b !important;
    background: transparent !important;
    box-shadow: none !important;
    z-index: 2;
}

.login-eye.rz-button:hover {
    color: var(--rz-primary) !important;
    background: rgba(31, 169, 113, 0.10) !important;
}

.login-field__error.rz-messages,
.login-field__error {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--rz-danger-light);
    background: none;
    border: none;
    padding: 0;
}

.login-field__hint {
    margin-top: 0.4rem;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--rz-text-secondary-color);
}

.login-forgot {
    text-align: right;
    margin-top: -0.25rem;
}

.login-forgot a {
    font-size: 0.78rem;
    color: var(--rz-text-secondary-color);
    text-decoration: none;
    border-bottom: 1px solid rgba(184, 190, 204, 0.3);
    padding-bottom: 1px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.login-forgot a:hover {
    color: var(--rz-warning);
    border-color: var(--rz-warning);
}

/* ---- Submit (reuses .truco-cta-emerald) with shimmer sweep --------------- */
.login-submit.rz-button {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.95rem !important;
    border-radius: 14px !important;
    font-family: var(--truco-display-font-family) !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
}

.login-submit.rz-button::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: translateX(-60px) skewX(-18deg);
    animation: loginShimmer 3.8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes loginShimmer {
    0%       { transform: translateX(-60px) skewX(-18deg); }
    55%, 100% { transform: translateX(560px) skewX(-18deg); }
}

/* ---- OR divider ---------------------------------------------------------- */
.login-or {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.1rem 0;
}

.login-or span {
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.10);
}

.login-or small {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--rz-text-disabled-color);
}

/* ---- Guest button -------------------------------------------------------- */
.login-guest.rz-button {
    width: 100%;
    padding: 0.9rem !important;
    border-radius: 14px !important;
    font-family: var(--truco-display-font-family) !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase;
    color: #cfe9df !important;
    background: rgba(31, 169, 113, 0.05) !important;
    border: 1px solid rgba(31, 169, 113, 0.35) !important;
    box-shadow: none !important;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.login-guest.rz-button:hover {
    background: rgba(31, 169, 113, 0.12) !important;
    border-color: var(--rz-primary) !important;
    transform: translateY(-1px);
}

/* ---- Aceite dos termos (registro) + aviso implícito do convidado ---------- */
.login-terms .login-terms__row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.login-terms__label {
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--rz-text-secondary-color);
}

.login-terms__label a,
.login-legal-note a {
    color: var(--rz-warning);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.login-terms__label a:hover,
.login-legal-note a:hover {
    color: #ECECEC;
}

.login-legal-note {
    margin: 0.7rem 0.25rem 0;
    font-size: 0.72rem;
    line-height: 1.55;
    text-align: center;
    color: #6f857c;
}

/* ---- Warning + footer ---------------------------------------------------- */
.login-warning {
    margin: 0.9rem 0.25rem 0;
    font-size: 0.72rem;
    line-height: 1.55;
    text-align: center;
    color: #6f857c;
}

.login-warning b {
    font-weight: 600;
}

.login-foot {
    margin-top: 1.25rem;
    text-align: center;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    color: #445349;
}

.login-foot__links {
    display: block;
    margin-top: 0.3rem;
}

.login-foot__links a {
    color: #6f857c;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.login-foot__links a:hover {
    color: var(--rz-warning);
}

/* ---- Secondary "back" link under account forms (forgot/reset/claim) ------ */
.login-altlink {
    margin-top: 1rem;
    text-align: center;
}

.login-altlink a {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
    text-decoration: none;
    cursor: pointer;
    border-bottom: 1px solid rgba(184, 190, 204, 0.3);
    padding-bottom: 1px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.login-altlink a:hover {
    color: var(--rz-warning);
    border-color: var(--rz-warning);
}

/* ---- Reassurance note inside the card (Salvar conta) --------------------- */
.login-note {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.1rem;
    padding: 0.8rem 0.9rem;
    border-radius: 14px;
    background: rgba(31, 169, 113, 0.06);
    border: 1px solid rgba(31, 169, 113, 0.25);
}

.login-note__icon {
    flex-shrink: 0;
    font-size: 1.4rem !important;
    color: var(--rz-success);
}

.login-note__text {
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--rz-text-secondary-color);
}

.login-note__text b {
    font-weight: 600;
    color: var(--rz-text-color);
}

/* ---- Card-flip on mode change + staggered entrance ----------------------- */
.login-flip {
    transform-origin: center;
    backface-visibility: hidden;
    animation: loginCardFlip 0.5s ease both;
}

@keyframes loginCardFlip {
    from { opacity: 0; transform: perspective(1200px) rotateY(-90deg); }
    60%  { opacity: 1; }
    to   { opacity: 1; transform: perspective(1200px) rotateY(0deg); }
}

.login-arena .truco-in {
    animation: loginRiseIn 0.6s ease both;
    animation-delay: var(--truco-in-delay, 0s);
}

@keyframes loginRiseIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- prefers-reduced-motion --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .login-fan__card--left,
    .login-fan__card--right,
    .login-fan__card--center,
    .login-live__dot,
    .login-submit.rz-button::after {
        animation: none !important;
    }

    .login-arena .truco-in,
    .login-flip {
        animation: loginFade 0.3s ease both;
        animation-delay: 0s !important;
    }

    .login-toggle__thumb {
        transition: none;
    }
}

@keyframes loginFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* =============================================================================
   RESPONSIVO — LOBBY
   Primitivas presentacionais reutilizadas pelas telas do lobby (fora da mesa).
   Breakpoint único de empilhamento: 640px (limite "sm" do Radzen, já usado pelo
   slot do verso no perfil). Tudo aqui é NO-OP visual em >=640px: no desktop os
   estilos inline dos componentes Radzen prevalecem e os contêineres não
   transbordam, então a aparência permanece idêntica à de antes da mudança.
   ========================================================================== */

/* ---- Toolbar adaptável: busca + filtro + contador ------------------------- */
/* >=640px: uma linha (a busca cresce, filtro e contador ficam inline).
   <640px: cada parte ocupa sua própria faixa de largura total. */
.truco-toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

/* Campo de busca: cresce até um teto no desktop; vira largura total no mobile. */
.truco-toolbar__search {
    position: relative;
    flex: 1;
    max-width: 400px;
}

/* Bloco do contador empurrado para a direita no desktop (substitui o
   space-between original ao usar margin-left automática). */
.truco-toolbar__meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
}

@media (max-width: 640px) {
    .truco-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* A busca deixa de ter teto e preenche a faixa. */
    .truco-toolbar__search {
        max-width: none;
    }

    /* O divisor vertical decorativo some quando a toolbar empilha. */
    .truco-toolbar .truco-divider {
        display: none;
    }

    /* O contador volta a alinhar à esquerda, como uma linha discreta. */
    .truco-toolbar__meta {
        margin-left: 0;
        justify-content: flex-start;
    }

    .truco-toolbar__meta .rz-stack {
        align-items: flex-start !important;
    }
}

/* ---- Trilho de rolagem horizontal ----------------------------------------- */
/* Para tiras de controles que NÃO quebram linha (RadzenSelectBar). Em vez de
   transbordar a página, a tira rola dentro dos próprios limites. As regras
   estruturais são no-op quando o conteúdo cabe (sem rolagem, sem barra). */
.truco-scroll-rail {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox */
}

.truco-scroll-rail::-webkit-scrollbar {
    display: none;                  /* WebKit/Blink */
}

/* A máscara de borda (afinamento) é uma pista estática de "há mais para o lado".
   Fica restrita ao mobile para não tocar no visual do desktop (task 1.5). */
@media (max-width: 640px) {
    .truco-scroll-rail {
        -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%);
    }
}

/* ---- Tira de abas rolável (RadzenTabs) ------------------------------------ */
/* Aplica o comportamento de trilho à barra de cabeçalho das abas Radzen
   (.rz-tabview-nav), para que nenhuma aba seja cortada em telas estreitas.
   Utilitario generico (mantido para outras telas com RadzenTabs). */
.truco-tabs-scroll .rz-tabview-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.truco-tabs-scroll .rz-tabview-nav::-webkit-scrollbar {
    display: none;
}

/* As abas mantêm a largura natural e rolam, em vez de espremer. */
.truco-tabs-scroll .rz-tabview-nav-item {
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .truco-tabs-scroll .rz-tabview-nav {
        -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%);
    }
}

/* =============================================================================
   RESPONSIVO — REDE ANTI-OVERFLOW (telas muito estreitas, ~320px)
   Impede que texto/divs "vazem" do card em viewports estreitos. As regras só
   atuam quando o conteúdo realmente não cabe; em telas largas são no-op.
   ========================================================================== */

/* Nomes de jogador e rótulos de UMA palavra longa quebram em vez de empurrar a
   largura do card. overflow-wrap só age quando a palavra excede o espaço. */
.truco-surface .rz-label,
.truco-surface-raised .rz-label,
.truco-surface .rz-text,
.truco-surface-raised .rz-text {
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    /* A ausência de min-width:0 é a causa nº1 de overflow horizontal em flexbox:
       sem isso, um filho de texto recusa-se a encolher e estoura a linha. Ligar
       o encolhimento dentro dos cards do lobby deixa o conteúdo refluir. */
    .truco-surface .rz-stack,
    .truco-surface-raised .rz-stack {
        min-width: 0;
    }
}

/* =============================================================================
   SHELL — SIDEBAR OVERLAY NO MOBILE
   Abaixo de 1024px (limiar do shell) o menu lateral vira drawer SOBREPOSTO,
   seguindo o padrão oficial do Radzen (RadzenLayout position:relative +
   RadzenSidebar position:absolute): cobre o conteúdo em vez de empurrá-lo, com
   um véu clicável que fecha o menu. Em >=1024px nada disso aplica — a sidebar
   continua "docada" no grid exatamente como antes.
   ========================================================================== */
@media (max-width: 1023.98px) {
    /* O .rz-sidebar base é position:fixed; sobrepor para absolute relativo ao
       RadzenLayout (relative) é o que produz o overlay do exemplo oficial. */
    .truco-sidebar.rz-sidebar {
        position: absolute;          /* logo abaixo do header (height: 64px) */
        bottom: 0;
        left: 0;
        z-index: 1100;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    }

    /* Véu: cobre o body mas preserva o header (e o toggle) acessível. */
    .truco-sidebar-backdrop {
        position: absolute;
        inset: 64px 0 0 0;
        z-index: 1090;
        background: rgba(5, 8, 15, 0.55);
        -webkit-backdrop-filter: blur(2px);
                backdrop-filter: blur(2px);
        animation: trucoBackdropFade 0.2s ease both;
    }
}

@keyframes trucoBackdropFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* =============================================================================
   RANK — "O Pódio e a Escada" (redesign-lobby-rank-surfaces)
   -----------------------------------------------------------------------------
   Uma única ousadia no /rank: o topo da ladder de pontos vira um PÓDIO plano
   (hierarquia por TAMANHO + numerais fantasmas em Oswald + linha-base dourada,
   sem blocos 3D), com a moldura cosmética (CosmeticView) em escala de herói. Do
   4º em diante, "a escada" (linhas densas reusam .rank-pos / .rank-avatar do
   RankIndex). O board de streak deixa de ser lista gêmea e vira um TRILHO
   horizontal com o efeito cv-fire. Tudo por classe, reusando tokens do tema;
   o movimento das molduras/chamas já respeita prefers-reduced-motion (bloco
   global dos cosméticos), então o pódio e o trilho herdam isso sem regra nova.
   ========================================================================== */

/* ---- Pódio: 1º central e maior, 2º à esquerda, 3º à direita ---------------- */
.rank-podium {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: clamp(0.85rem, 4vw, 2.75rem);
    /* Headroom no topo para as labaredas do cv-fire subirem (o campeão pega fogo
       quando está em sequência) sem encostar no cabeçalho do card. */
    padding: 2.25rem 0 1.4rem;
    position: relative;
}

/* Linha-base dourada (mesma receita do .truco-divider) sob os pés do pódio. */
.rank-podium::after {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.55), transparent);
}

.rank-podium__slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    text-align: center;
    flex: 0 1 auto;
}

/* Ordem visual no desktop (DOM fica em ordem natural 1·2·3 p/ empilhar limpo no
   mobile): o campeão (1º) ao centro, prata à esquerda, bronze à direita. */
.rank-podium__slot--1 { order: 2; }
.rank-podium__slot--2 { order: 1; }
.rank-podium__slot--3 { order: 3; }

/* Numeral fantasma em Oswald: contorno, sem preenchimento (marcador de posição). */
.rank-podium__numeral {
    line-height: 1;
    font-size: 2.2rem;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.28);
    user-select: none;
}

.rank-podium__slot--1 .rank-podium__numeral {
    font-size: 3rem;
    color: rgba(212, 175, 55, 0.1);
    -webkit-text-stroke-color: rgba(212, 175, 55, 0.6);
}

.rank-podium__slot--2 .rank-podium__numeral { -webkit-text-stroke-color: rgba(192, 192, 192, 0.5); }
.rank-podium__slot--3 .rank-podium__numeral { -webkit-text-stroke-color: rgba(176, 141, 87, 0.55); }

/* Host da moldura cosmética (CosmeticView preenche este círculo). Escala de herói:
   o campeão maior; 2º/3º um degrau abaixo. As molduras Diamante/Lenda já pulsam
   fora da mesa (não compactas), então em tamanho grande viram o brilho da página. */
.rank-podium__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    color: var(--rz-text-color);
    background: rgba(255, 255, 255, 0.08);
    flex: 0 0 auto;
}

.rank-podium__slot--1 .rank-podium__avatar {
    width: 5.25rem;
    height: 5.25rem;
    font-size: 2rem;
}

.rank-podium__slot--2 .rank-podium__avatar,
.rank-podium__slot--3 .rank-podium__avatar {
    width: 3.9rem;
    height: 3.9rem;
    font-size: 1.5rem;
}

.rank-podium__meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    max-width: 9rem;
}

.rank-podium__name {
    font-weight: 600;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rank-podium__rank {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.rank-podium__points {
    font-size: 1.1rem;
    color: var(--rz-text-color);
}

.rank-podium__points small {
    font-family: var(--rz-text-font-family);
    font-weight: 400;
    font-size: 0.7rem;
    color: var(--rz-text-secondary-color);
    margin-left: 0.15rem;
}

/* Campeão: emblema e pontos um pouco maiores (reforça a hierarquia de escala). */
.rank-podium__slot--1 .rank-emblem { --emblem-size: 2rem; }
.rank-podium__slot--1 .rank-podium__points { font-size: 1.4rem; }

/* ---- O pódio de fogo (board de sequências, "A Fogueira") ------------------- */
/* Mesmo esqueleto do pódio de pontos, tematizado em FOGO: numerais e linha-base
   em brasa/rubi, e a moldura mostra o efeito cv-fire (aqui o fogo é o ponto). Por
   isso os avatares são um degrau menores que os de pontos e o container ganha
   headroom no topo, para as labaredas subirem sem encostar no cabeçalho do card. */
.rank-podium--fire {
    padding-top: 2.5rem;
}

.rank-podium--fire::after {
    background: linear-gradient(90deg, transparent, rgba(249, 115, 22, 0.5), transparent);
}

.rank-podium--fire .rank-podium__numeral {
    -webkit-text-stroke-color: rgba(249, 115, 22, 0.35);
}

.rank-podium--fire .rank-podium__slot--1 .rank-podium__numeral {
    color: rgba(249, 115, 22, 0.12);
    -webkit-text-stroke-color: rgba(249, 115, 22, 0.7);
}

.rank-podium--fire .rank-podium__slot--2 .rank-podium__numeral { -webkit-text-stroke-color: rgba(253, 186, 116, 0.6); }
.rank-podium--fire .rank-podium__slot--3 .rank-podium__numeral { -webkit-text-stroke-color: rgba(220, 38, 38, 0.55); }

.rank-podium--fire .rank-podium__slot--1 .rank-podium__avatar {
    width: 4rem;
    height: 4rem;
    font-size: 1.6rem;
}

.rank-podium--fire .rank-podium__slot--2 .rank-podium__avatar,
.rank-podium--fire .rank-podium__slot--3 .rank-podium__avatar {
    width: 3rem;
    height: 3rem;
    font-size: 1.25rem;
}

/* Valor da sequência (número + chama), espelhando o .rank-podium__points. */
.rank-podium__streak {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 1.1rem;
    color: var(--rz-danger-light);
}

.rank-podium--fire .rank-podium__slot--1 .rank-podium__streak {
    font-size: 1.4rem;
}

/* ---- Empilhamento do pódio em telas estreitas (mobile, ≤640 = sm do tema) -- */
/* DOM em ordem natural 1·2·3, então zerar `order` faz o pódio empilhar em
   ordem de classificação, sem overflow horizontal; a linha-base some. */
@media (max-width: 640px) {
    .rank-podium {
        flex-direction: column;
        align-items: center;
        gap: 1.1rem;
    }

    .rank-podium::after { display: none; }

    .rank-podium__slot {
        order: 0 !important;
        width: 100%;
        max-width: 18rem;
    }

    .rank-podium__meta { max-width: 100%; }
}

/* =============================================================================
   SALAS — "A casa cheia": barra de pulso do salão (RoomIndex) + destaque de
   sala aberta (RoomCard). Os contadores derivam 100% da lista já carregada;
   nenhuma chamada nova. Reusa truco-live-dot para o "live".
   ========================================================================== */

/* ---- Pulso do salão: 3 números vivos como herói do lobby ------------------ */
.lobby-pulse {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: clamp(1.25rem, 4vw, 2.75rem);
}

.lobby-pulse__stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.lobby-pulse__value {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: clamp(1.9rem, 5vw, 2.6rem);
    line-height: 1;
    color: var(--rz-text-title-color);
}

/* Cada contador carrega um sentido pela cor do feltro: abertas = esmeralda,
   em jogo = rubi (ao vivo), na mesa agora = dourado. */
.lobby-pulse__value--open { color: var(--rz-success-light); }
.lobby-pulse__value--live { color: var(--rz-danger-light); }
.lobby-pulse__value--seated { color: var(--rz-warning); }

.lobby-pulse__label {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
}

/* ---- Sala ABERTA lidera: hover-lift mais decidido + filete esmeralda ------- */
/* Aditivo sobre .truco-surface/.truco-hover; não toca o .truco-card-inactive
   (sala em jogo continua recuada/atenuada como já definido). */
.truco-card-open {
    border-color: rgba(31, 169, 113, 0.32) !important;
}

.truco-card-open.truco-hover:hover {
    transform: translateY(-6px);
    border-color: rgba(31, 169, 113, 0.6) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 10px 30px rgba(31, 169, 113, 0.18), inset 0 0 0 1px rgba(31, 169, 113, 0.25) !important;
}

/* =============================================================================
   RANKING GLOBAL (RankIndex) — "Hall da fama" com alternador de modo, pódio
   com pedestais e classificação completa. Modo POR PONTOS = dourado (filtra por
   liga); modo WINSTREAK = fogo (sequência GLOBAL, sem filtro de liga). Os ícones
   de patente são os PNGs reais de wwwroot/ranks/ (via .rank-emblem).
   A cor de destaque (--rg-accent) troca por modo e cascateia para todo o board.
   ========================================================================== */

.filled-icon { font-variation-settings: 'FILL' 1; }

.rg {
    --rg-accent: #D4AF37;
    --rg-accent-soft: rgba(212, 175, 55, 0.12);
    --rg-accent-border: rgba(212, 175, 55, 0.3);
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.rg--streak {
    --rg-accent: #EE7A3C;
    --rg-accent-soft: rgba(238, 122, 60, 0.12);
    --rg-accent-border: rgba(238, 122, 60, 0.32);
}

/* ---- Cabeçalho -------------------------------------------------------------- */
.rg-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.rg-head__eyebrow { margin-bottom: 0.35rem; }

.rg-head__titlerow {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.rg-head__title {
    font-size: clamp(2rem, 5vw, 2.9rem);
    line-height: 0.95;
    margin: 0;
}

/* Selo da temporada ao lado do título (pílula dourada com ícone). */
.rg-season-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #E1C463;
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.18), rgba(212, 175, 55, 0.06));
    border: 1px solid rgba(212, 175, 55, 0.32);
    white-space: nowrap;
}

.rg-season-badge__icon { font-size: 0.95rem; color: #E1C463; }

.rg-head__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.6rem;
}

.rg-season-ends {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--rz-text-disabled-color);
}

.rg-season-ends strong { color: var(--rz-text-secondary-color); font-weight: 700; }

/* Abas de formato 1v1 / 2v2 (ativa em esmeralda, como o mock). */
.rg-fmt {
    display: flex;
    gap: 0.35rem;
    padding: 0.3rem;
    border-radius: 11px;
    background: rgba(8, 11, 17, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.rg-fmt__btn {
    padding: 0.4rem 1.05rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background: transparent;
    color: var(--rz-text-secondary-color);
    font-family: var(--rz-text-font-family);
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    transition: 0.15s;
}

.rg-fmt__btn:hover { color: var(--rz-text-color); }
.rg-fmt__btn:focus-visible { outline: 2px solid var(--rz-primary); outline-offset: 2px; }

.rg-fmt__btn--active {
    background: linear-gradient(135deg, var(--rz-primary-light), var(--rz-primary-dark));
    color: #04231A;
}

/* ---- Alternador de modo: dois cards grandes -------------------------------- */
.rg-modes {
    display: flex;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.rg-mode {
    flex: 1 1 16rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.05rem 1.3rem;
    border-radius: var(--truco-radius-lg);
    cursor: pointer;
    text-align: left;
    font-family: var(--rz-text-font-family);
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: var(--rz-text-color);
    transition: 0.2s;
}

.rg-mode:hover { border-color: rgba(255, 255, 255, 0.16); }
.rg-mode:focus-visible { outline: 2px solid var(--rg-accent); outline-offset: 2px; }

.rg-mode__icon {
    font-size: 1.6rem;
    color: var(--rz-text-secondary-color);
    transition: 0.2s;
}

.rg-mode__text { display: flex; flex-direction: column; gap: 0.1rem; }

.rg-mode__title {
    font-size: 1.25rem;
    letter-spacing: 0.5px;
    color: #fff;
    line-height: 1.05;
}

.rg-mode__sub { font-size: 0.78rem; color: var(--rz-text-secondary-color); }

.rg-mode--active.rg-mode--pts {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.14), rgba(212, 175, 55, 0.03));
    border-color: rgba(212, 175, 55, 0.45);
    box-shadow: 0 10px 26px -14px rgba(212, 175, 55, 0.8);
}

.rg-mode--active.rg-mode--pts .rg-mode__icon { color: #D4AF37; }

.rg-mode--active.rg-mode--streak {
    background: linear-gradient(135deg, rgba(238, 122, 60, 0.14), rgba(238, 122, 60, 0.03));
    border-color: rgba(238, 122, 60, 0.45);
    box-shadow: 0 10px 26px -14px rgba(238, 122, 60, 0.8);
}

.rg-mode--active.rg-mode--streak .rg-mode__icon { color: #EE7A3C; }

/* ---- Filtros: fichas de liga (só por pontos) + busca ----------------------- */
.rg-filters {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.rg-tiers {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex: 1;
}

.rg-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.8rem;
    border-radius: 11px;
    cursor: pointer;
    font-family: var(--rz-text-font-family);
    font-weight: 600;
    font-size: 0.82rem;
    background: rgba(255, 255, 255, 0.03);
    color: var(--rz-text-secondary-color);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: 0.15s;
}

.rg-chip:hover { border-color: var(--truco-gold-hairline); color: var(--rz-text-color); }
.rg-chip:focus-visible { outline: 2px solid var(--rg-accent); outline-offset: 2px; }

.rg-chip--active {
    background: var(--truco-gold-hairline);
    color: #fff;
    border-color: rgba(212, 175, 55, 0.5);
}

.rg-chip__emblem { --emblem-size: 1.05rem; }

.rg-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.85rem;
    height: 2.6rem;
    width: 16rem;
    max-width: 100%;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.rg-search:focus-within { border-color: var(--truco-gold-hairline); }
.rg-search__icon { font-size: 1.15rem; color: var(--rz-text-disabled-color); }

.rg-search__input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--rz-text-color);
    font-family: var(--rz-text-font-family);
    font-size: 0.9rem;
    height: 100%;
}

.rg-search__input::placeholder { color: var(--rz-text-disabled-color); }

/* ---- Sub-filtro de divisão (I · II · III · IV dentro da liga escolhida) ------ */
.rg-divs {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.rg-divs__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rz-text-disabled-color);
    margin-right: 0.2rem;
}

.rg-div {
    min-width: 2.1rem;
    padding: 0.3rem 0.7rem;
    border-radius: 9px;
    cursor: pointer;
    font-family: var(--truco-display-font-family);
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    background: rgba(255, 255, 255, 0.03);
    color: var(--rz-text-secondary-color);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: 0.15s;
}

.rg-div:hover { border-color: var(--truco-gold-hairline); color: var(--rz-text-color); }
.rg-div:focus-visible { outline: 2px solid var(--rg-accent); outline-offset: 2px; }

.rg-div--active {
    background: var(--rg-accent-soft);
    color: #fff;
    border-color: var(--rg-accent-border);
}

/* ---- Selo "VOCÊ" (linha e pódio do jogador logado) ------------------------- */
.rg-you {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    border-radius: 7px;
    background: #5AD1E8;
    color: #042027;
    font-family: var(--rz-text-font-family);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    vertical-align: middle;
    margin-left: 0.4rem;
}

/* ---- Pódio: 2º à esquerda, 1º central (coroa, pedestal mais alto), 3º à direita */
.rg-podium {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    padding: 1.7rem 1.4rem 0;
    border: 1px solid var(--rg-accent-border);
    transition: 0.3s;
}

.rg--pts .rg-podium { background: linear-gradient(180deg, rgba(28, 24, 12, 0.7), rgba(13, 19, 27, 0.65)); }
.rg--streak .rg-podium { background: linear-gradient(180deg, rgba(34, 18, 10, 0.7), rgba(13, 19, 27, 0.65)); }

.rg-podium__bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--rg-accent), transparent);
}

.rg-podium__head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.rg-podium__head-icon { font-size: 1.3rem; color: var(--rg-accent); }

.rg-podium__eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--rg-accent);
}

.rg-podium__title {
    position: relative;
    font-size: 1.5rem;
    color: #fff;
    letter-spacing: 0.5px;
    margin-bottom: 0.4rem;
}

.rg-podium__row {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(0.75rem, 3vw, 1.6rem);
    flex-wrap: wrap;
    padding-top: 0.6rem;
}

.rg-podium__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 11.5rem;
    max-width: 42vw;
    animation: rg-rise 0.5s ease both;
}

/* DOM em ordem natural 1·2·3 (empilha limpo no mobile); no desktop o campeão
   vai ao centro, prata à esquerda, bronze à direita. */
.rg-podium__col--1 { order: 2; }
.rg-podium__col--2 { order: 1; }
.rg-podium__col--3 { order: 3; }

.rg-podium__crown {
    font-size: 1.5rem;
    line-height: 1;
    margin-bottom: 0.15rem;
    animation: rg-crown 2.4s ease-in-out infinite;
}

.rg-podium__av {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    color: var(--rz-text-color);
    background: rgba(255, 255, 255, 0.08);
    flex: 0 0 auto;
    width: 3.9rem;
    height: 3.9rem;
    font-size: 1.5rem;
}

.rg-podium__col--1 .rg-podium__av {
    width: 5rem;
    height: 5rem;
    font-size: 1.9rem;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.5);
}

.rg--streak .rg-podium__col--1 .rg-podium__av { box-shadow: 0 0 0 3px rgba(238, 122, 60, 0.5); }
.rg-podium__col--2 .rg-podium__av { box-shadow: 0 0 0 2px rgba(192, 192, 192, 0.45); }
.rg-podium__col--3 .rg-podium__av { box-shadow: 0 0 0 2px rgba(176, 141, 87, 0.5); }

/* Seu avatar no pódio ganha um anel ciano extra por cima do anel de posição. */
.rg-podium__av--me { box-shadow: 0 0 0 3px rgba(90, 209, 232, 0.55) !important; }

.rg-podium__name {
    font-family: var(--truco-display-font-family);
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
    margin-top: 0.7rem;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rg-podium__metric {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    margin: 0.6rem 0 0.8rem;
}

.rg-podium__flame {
    font-size: 1.2rem;
    color: var(--rg-accent);
    align-self: center;
    animation: rg-flame 1.3s ease-in-out infinite;
}

.rg-podium__metric-main { font-size: 1.7rem; color: var(--rg-accent); line-height: 1; }
.rg-podium__metric-sub { font-size: 0.72rem; font-weight: 600; color: var(--rz-text-secondary-color); }

.rg-podium__riser {
    width: 100%;
    border-radius: 14px 14px 0 0;
    border: 1px solid;
    border-bottom: none;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 0.6rem;
}

.rg-podium__riser--1 {
    height: 8rem;
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.22), rgba(212, 175, 55, 0.03));
    border-color: rgba(212, 175, 55, 0.4);
}

.rg-podium__riser--2 {
    height: 6rem;
    background: linear-gradient(180deg, rgba(192, 192, 192, 0.16), rgba(192, 192, 192, 0.02));
    border-color: rgba(192, 192, 192, 0.3);
}

.rg-podium__riser--3 {
    height: 4.6rem;
    background: linear-gradient(180deg, rgba(176, 141, 87, 0.2), rgba(176, 141, 87, 0.03));
    border-color: rgba(176, 141, 87, 0.36);
}

.rg-podium__num { font-size: 3.4rem; line-height: 1; }
.rg-podium__riser--1 .rg-podium__num { color: rgba(212, 175, 55, 0.85); }
.rg-podium__riser--2 .rg-podium__num { color: rgba(192, 192, 192, 0.8); }
.rg-podium__riser--3 .rg-podium__num { color: rgba(176, 141, 87, 0.85); }

/* ---- Ficha de patente (emblema PNG + standing), tingida pela liga ----------- */
.rg-tier {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.rg-tier__emblem { --emblem-size: 1.05rem; }

.rg-tier__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.rg-tier--bronze { background: rgba(176, 141, 87, 0.12); border-color: rgba(176, 141, 87, 0.3); }
.rg-tier--bronze .rg-tier__label { color: #C79C6A; }
.rg-tier--prata { background: rgba(192, 192, 192, 0.12); border-color: rgba(192, 192, 192, 0.26); }
.rg-tier--prata .rg-tier__label { color: #D2D8DE; }
.rg-tier--ouro { background: rgba(212, 175, 55, 0.12); border-color: rgba(212, 175, 55, 0.3); }
.rg-tier--ouro .rg-tier__label { color: #E1C463; }
.rg-tier--platina { background: rgba(106, 192, 216, 0.12); border-color: rgba(106, 192, 216, 0.3); }
.rg-tier--platina .rg-tier__label { color: #8FD3E4; }
.rg-tier--diamante { background: rgba(91, 224, 230, 0.12); border-color: rgba(91, 224, 230, 0.3); }
.rg-tier--diamante .rg-tier__label { color: #7EE8EC; }

/* ---- Classificação completa: título, cabeçalho e linhas (grid alinhado) ----- */
.rg-board-title {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: 0.4rem;
}

.rg-board-title__text {
    font-size: 1.15rem;
    letter-spacing: 1px;
    color: #cdd6df;
    text-transform: uppercase;
}

.rg-board-title__count {
    padding: 0.15rem 0.55rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--rg-accent);
    background: var(--rg-accent-soft);
    border: 1px solid var(--rg-accent-border);
}

.rg-board-title__rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent);
}

/* Busca colada à "Classificação completa": filtra só a escada, nunca o pódio. */
.rg-board-title__search {
    height: 2.4rem;
    width: 15rem;
    flex-shrink: 0;
}

.rg-board-head,
.rg-row {
    display: grid;
    grid-template-columns: 2.2rem minmax(0, 1fr) 8.5rem 5rem 6rem;
    align-items: center;
    gap: 0.8rem;
}

.rg-board-head {
    padding: 0.4rem 1.1rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #56636f;
}

.rg-col-rank { text-align: center; }
.rg-col-liga { display: flex; justify-content: center; }
.rg-col-wins { text-align: center; }
.rg-col-metric { display: flex; align-items: center; justify-content: flex-end; gap: 0.3rem; }

.rg-rows { display: flex; flex-direction: column; gap: 0.5rem; }

.rg-row {
    padding: 0.7rem 1.1rem;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(17, 24, 34, 0.55), rgba(13, 19, 27, 0.55));
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.rg-row:hover {
    transform: translateX(4px);
    border-color: var(--rg-accent-border);
    background: linear-gradient(180deg, rgba(20, 28, 39, 0.8), rgba(15, 21, 30, 0.8));
}

.rg-row__rank { font-size: 1.05rem; color: #6b7888; }
.rg-row__rank--1 { color: #D4AF37; font-size: 1.3rem; }
.rg-row__rank--2 { color: #C0C0C0; font-size: 1.25rem; }
.rg-row__rank--3 { color: #B08D57; font-size: 1.2rem; }

.rg-row__player { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }

.rg-row__av {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--rz-text-color);
    background: rgba(255, 255, 255, 0.08);
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
}

.rg-row__ident { min-width: 0; display: flex; flex-direction: column; gap: 0.05rem; }

.rg-row__nameline { display: flex; align-items: center; gap: 0; min-width: 0; }

.rg-row__name {
    font-weight: 600;
    font-size: 0.95rem;
    color: #eef3f7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.rg-row__handle {
    font-size: 0.72rem;
    color: #65727f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sua linha em destaque ciano (mesmo idioma do selo "VOCÊ"). */
.rg-row--me {
    background: linear-gradient(90deg, rgba(90, 209, 232, 0.1), rgba(90, 209, 232, 0.02)) !important;
    border-color: rgba(90, 209, 232, 0.3) !important;
}

.rg-row__wins { font-size: 1rem; color: var(--rz-text-secondary-color); }
.rg-row__flame { font-size: 1.05rem; color: var(--rg-accent); animation: rg-flame 1.4s ease-in-out infinite; }
.rg-row__metric-main { font-size: 1.2rem; color: var(--rg-accent); }
.rg-row__metric-sub { font-size: 0.7rem; font-weight: 600; color: var(--rz-text-secondary-color); }

/* ---- Estado vazio + aviso anti-manipulação --------------------------------- */
.rg-empty { text-align: center; padding: 3rem 0; color: var(--rz-text-disabled-color); }
/* Vazio só da escada (busca sem match): o pódio acima permanece visível. */
.rg-empty--table { padding: 2rem 0; }
.rg-empty__icon { font-size: 2.6rem; opacity: 0.6; }
.rg-empty__title { font-size: 1.3rem; margin-top: 0.5rem; color: var(--rz-text-secondary-color); }

.rg-shield {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    color: var(--rz-text-secondary-color);
    font-size: 0.78rem;
    text-align: center;
}

.rg-shield__icon { font-size: 1rem; }

/* ---- Paginação visual da classificação completa ---- */
.rg-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 1.1rem 0 0.4rem;
}

/* Instância do topo (acima da escada): margem invertida para respirar antes das linhas. */
.rg-pager--top { margin: 0.2rem 0 1rem; }

.rg-pager__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.45rem 0.9rem;
    border-radius: 11px;
    cursor: pointer;
    font-family: var(--rz-text-font-family);
    font-weight: 600;
    font-size: 0.82rem;
    background: rgba(255, 255, 255, 0.03);
    color: var(--rz-text-secondary-color);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: 0.15s;
}

.rg-pager__btn:hover:not(:disabled) { border-color: var(--truco-gold-hairline); color: var(--rz-text-color); }
.rg-pager__btn:focus-visible { outline: 2px solid var(--rg-accent); outline-offset: 2px; }

.rg-pager__btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.rg-pager__ico { font-size: 1.05rem; }

.rg-pager__label {
    font-family: var(--rz-text-font-family);
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--rz-text-secondary-color);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.rz-navigation-item-icon-children
{
    display: none !important;
}

@keyframes rg-rise {
    from {
        transform: translateY(18px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes rg-crown {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(212, 175, 55, 0.5)); }
    50% { filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.9)); }
}

@keyframes rg-flame {
    0%, 100% { transform: scale(1) rotate(-2deg); }
    50% { transform: scale(1.14) rotate(3deg); }
}

/* ---- Responsivo: pódio empilha e a tabela compacta em telas estreitas ------- */
@media (max-width: 880px) {
    .rg-head__aside { align-items: flex-start; }
}

@media (max-width: 640px) {
    /* Pódio empilha; sem os pedestais, devolve o respiro inferior que eles davam. */
    .rg-podium { padding: 1.4rem 1.1rem 1.2rem; }
    .rg-podium__title { font-size: 1.3rem; }
    .rg-podium__row { flex-direction: column; align-items: center; gap: 0.9rem; }
    .rg-podium__col { order: 0 !important; width: 100%; max-width: 18rem; }
    .rg-podium__riser { display: none; }
    .rg-podium__metric { margin-bottom: 0; }

    /* Cada card de modo ocupa a linha toda. */
    .rg-mode { flex-basis: 100%; }

    .rg-filters { flex-direction: column; align-items: stretch; }
    .rg-tiers { order: 2; }
    .rg-search { width: 100%; }

    /* Busca desce para baixo do título e ocupa a linha; a régua some no empilhamento. */
    .rg-board-title { flex-wrap: wrap; }
    .rg-board-title__rule { display: none; }
    .rg-board-title__search { width: 100%; order: 3; }

    /* Tabela vira #, jogador e métrica (liga/vitórias ficam no toque do perfil). */
    .rg-board-head { display: none; }
    .rg-row { grid-template-columns: 1.8rem minmax(0, 1fr) auto; gap: 0.5rem; padding: 0.7rem 0.85rem; }
    .rg-col-liga,
    .rg-col-wins { display: none; }
}

/* Telefone estreito: aperta o cabeçalho e as fichas de liga. */
@media (max-width: 420px) {
    .rg { gap: 1.1rem; }
    .rg-head__aside { width: 100%; }
    .rg-fmt { width: 100%; }
    .rg-fmt__btn { flex: 1; }
    .rg-chip { font-size: 0.78rem; padding: 0.4rem 0.65rem; }
    .rg-pager { gap: 0.6rem; }
    .rg-pager__btn { padding: 0.4rem 0.65rem; font-size: 0.78rem; }
    .rg-pager__label { font-size: 0.78rem; }
    .rg-pager__txt { display: none; }
}

/* Movimento reduzido: pódio/coroa/chamas em pose estática (a fogueira cv-fire já
   é congelada na regra global de prefers-reduced-motion). */
@media (prefers-reduced-motion: reduce) {
    .rg-podium__col,
    .rg-podium__crown,
    .rg-podium__flame,
    .rg-row__flame { animation: none !important; }
}

/* =============================================================================
   /instalar — tutorial de instalação (PWA) + convite discreto pós-boot
   -----------------------------------------------------------------------------
   Mesma linguagem do lobby/home v2 (lvh-card): HEX LITERAIS, NÃO tokens --rz-*.
   Cards #111822→#0d131b, hairlines BRANCOS (rgba(255,255,255,…)), texto
   #e8edf2/#9fb0ad, emerald #25d08a (acento/ícones), gold #f3c43f reservado a
   TEXTO de destaque (nunca a bordas). Como a página não fica dentro de um wrapper
   .lobby-v2, a cor de cada ícone .lv-ico é DECLARADA explicitamente (a herança não
   chega — por isso vinham brancos). Reusa o fundo ambiente .lv-bg.
   ========================================================================== */

.inst {
    position: relative;
    min-height: 70vh;
    font-family: 'Barlow', system-ui, sans-serif;
    color: #e8edf2;
}

.inst__content {
    position: relative;
    z-index: 1;
    max-width: 44rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ---- Cabeçalho ----------------------------------------------------------- */
.inst__head { text-align: center; }

.inst__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .72rem;
    font-weight: 700;
    color: #25d08a;
}
.inst__eyebrow .lv-ico { font-size: 1.05rem; color: #25d08a; }

.inst__title {
    margin: 0.45rem 0 0;
    font-size: clamp(1.9rem, 6vw, 2.7rem);
    line-height: 1.05;
    letter-spacing: .01em;
    color: #f1f6f3;
}

.inst__sub {
    margin: 0.65rem auto 0;
    max-width: 38ch;
    color: #9fb0ad;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* ---- Aviso de in-app browser (Instagram/Facebook/WebView) ----------------
   Sem borda dourada: hairline branco como os cards v2; o dourado fica só no
   ícone e no texto de destaque. */
.inst__alert {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.9rem 1.1rem;
    border-radius: 14px;
    background: rgba(243, 196, 63, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #cdd9d4;
    font-size: 0.9rem;
    line-height: 1.5;
}
.inst__alert strong { color: #f3c43f; }
.inst__alert em { color: #e8edf2; font-style: normal; font-weight: 600; }
.inst__alert-ico { color: #f3c43f; font-size: 1.4rem; flex-shrink: 0; }

/* ---- Seletor de plataforma (segmented control) --------------------------- */
.inst__tabs {
    display: flex;
    gap: 0.4rem;
    padding: 0.35rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
}
.inst__tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: #9fb0ad;
    font-family: 'Barlow', system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.inst__tab .lv-ico { font-size: 1.15rem; color: inherit; }
.inst__tab:hover { color: #e8edf2; background: rgba(255, 255, 255, 0.04); }
.inst__tab.is-active {
    color: #25d08a;
    background: linear-gradient(90deg, rgba(37, 208, 138, 0.16), rgba(37, 208, 138, 0.05));
    border-color: rgba(37, 208, 138, 0.32);
}
.inst__tab.is-active .lv-ico { color: #25d08a; }

/* ---- Cartão de passos: idêntico ao .lvh-card do home v2 ------------------- */
.inst__card {
    padding: 1.4rem 1.5rem;
    border-radius: 18px;
    background: linear-gradient(180deg, #111822, #0d131b);
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 10px 30px -16px rgba(0, 0, 0, .7);
}

.inst__card-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.1rem;
}
.inst__badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 14px;
    background: linear-gradient(160deg, rgba(37, 208, 138, 0.22), rgba(37, 208, 138, 0.06));
    border: 1px solid rgba(37, 208, 138, 0.3);
    color: #25d08a;
}
.inst__badge .lv-ico { font-size: 1.5rem; color: #25d08a; }
.inst__card-title {
    margin: 0;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: .02em;
    color: #f1f6f3;
}
.inst__card-note {
    margin: 0.15rem 0 0;
    color: #7c8d87;
    font-size: 0.82rem;
}

.inst__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
.inst__steps li {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    color: #cdd9d4;
    font-size: 0.95rem;
    line-height: 1.5;
}
.inst__num {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: rgba(37, 208, 138, 0.14);
    border: 1px solid rgba(37, 208, 138, 0.32);
    color: #25d08a;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
}

/* Chip que destaca o botão a tocar ("Compartilhar", "Instalar app"…):
   dourado no TEXTO + leve fundo dourado, SEM borda dourada. */
.inst__key {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.05rem 0.45rem;
    margin: 0 0.1rem;
    border-radius: 6px;
    background: rgba(243, 196, 63, 0.12);
    color: #f3c43f;
    font-weight: 700;
    white-space: nowrap;
}
.inst__key .lv-ico { font-size: 1rem; color: #f3c43f; }

/* ---- Rodapé reasseguro + voltar ------------------------------------------ */
.inst__foot {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    justify-content: center;
    color: #7c8d87;
    font-size: 0.82rem;
    text-align: center;
}
.inst__foot-ico { color: #25d08a; font-size: 1.1rem; }

.inst__back {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: #cdd9d4;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: background .15s, color .15s, transform .15s;
}
.inst__back:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #e8edf2;
    transform: translateY(-1px);
}
.inst__back .lv-ico { font-size: 1.1rem; color: inherit; }

/* =============================================================================
   Convite discreto pós-boot (.inst-invite) — card flutuante, não-modal
   -----------------------------------------------------------------------------
   Mesma linguagem dos cards do lobby/home v2 (lvh-card): hex literais, fundo
   #111822→#0d131b, hairline branco, Barlow/Barlow Condensed, CTA emerald
   #27d68f→#13a06a e botão fantasma neutro — NÃO os tokens --rz-*.
   ========================================================================== */
.inst-invite {
    position: fixed;
    z-index: 1100;
    right: 1.25rem;
    bottom: 1.25rem;
    width: min(22rem, calc(100vw - 2rem));
    padding: 1rem 1.1rem 1.1rem;
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    border-radius: 18px;
    background: linear-gradient(180deg, #111822, #0d131b);
    border: 1px solid rgba(255, 255, 255, .07);
    box-shadow: 0 18px 44px -16px rgba(0, 0, 0, .8);
    font-family: 'Barlow', system-ui, sans-serif;
    animation: instInviteIn .4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Aura emerald sutil no topo, como os heróis do v2 (lv-quick). */
.inst-invite::before {
    content: "";
    position: absolute;
    inset: -40% 30% auto -10%;
    height: 120px;
    background: radial-gradient(circle, rgba(37, 208, 138, .18), transparent 70%);
    pointer-events: none;
}

@keyframes instInviteIn {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

.inst-invite > * { position: relative; }

.inst-invite__close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #7c8d87;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.inst-invite__close:hover { background: rgba(255, 255, 255, .06); color: #e8edf2; }
.inst-invite__close .lv-ico { font-size: 1.15rem; }

.inst-invite__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 13px;
    background: linear-gradient(160deg, rgba(37, 208, 138, .22), rgba(37, 208, 138, .05));
    border: 1px solid rgba(37, 208, 138, .3);
    color: #25d08a;
}
.inst-invite__icon .lv-ico { font-size: 1.45rem; }

.inst-invite__body { min-width: 0; }
.inst-invite__title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 1.12rem;
    letter-spacing: .3px;
    color: #f1f6f3;
    padding-right: 1.2rem;
}
.inst-invite__desc {
    margin: 0.2rem 0 0.75rem;
    color: #9fb0ad;
    font-size: 0.84rem;
    line-height: 1.45;
}
.inst-invite__actions { display: flex; gap: 0.5rem; align-items: center; }
.inst-invite__cta {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 0.8rem;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #27d68f, #13a06a);
    color: #04231a;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: .5px;
    cursor: pointer;
    box-shadow: 0 8px 20px -8px rgba(37, 208, 138, .6);
    transition: filter .15s, transform .15s;
}
.inst-invite__cta:hover { filter: brightness(1.07); transform: translateY(-1px); }
.inst-invite__ghost {
    padding: 0.6rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    color: #cdd9d4;
    font-family: 'Barlow', system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.84rem;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.inst-invite__ghost:hover { background: rgba(255, 255, 255, .08); color: #e8edf2; }

/* ---- Mobile estreito: convite ancora rente às bordas inferiores ---------- */
@media (max-width: 640px) {
    .inst-invite {
        right: 0.75rem;
        left: 0.75rem;
        bottom: 0.75rem;
        width: auto;
    }
    .inst__card { padding: 1.15rem 1.1rem; }
    .inst__tab { font-size: 0.82rem; padding: 0.55rem 0.35rem; }
    .inst__tab .lv-ico { font-size: 1.05rem; }
}

/* ---- Movimento reduzido: sem deslize de entrada do convite --------------- */
@media (prefers-reduced-motion: reduce) {
    .inst-invite { animation: none !important; }
}

/* ===================================================================== */
/* COACHMARK / SPOTLIGHT OVERLAY                                          */
/* Reusable spotlight machinery (room-tour-foundation): a dim layer with  */
/* a cut-out hole over a [data-tour] anchor + a themed tooltip. Powers     */
/* the just-in-time hints now and the scripted tutorial replay later.      */
/* Palette: Cassino Premium (near-black dim, champagne-gold hairline).     */
/* ===================================================================== */

/* The dim is painted entirely by the hole's huge box-shadow, so the layer
   itself stays transparent and pointer-events:none — every real control
   (including the highlighted one) remains clickable. Only the tooltip
   re-enables pointer events. */
.coach-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    pointer-events: none;
}

/* Cut-out hole over the measured target: a transparent box whose enormous
   box-shadow spread dims everything around it. Click-through by design so a
   timed action (responder Truco, mão de onze) is never blocked. */
.coach-hole {
    position: fixed;
    border-radius: 10px;
    box-shadow: 0 0 0 9999px rgba(7, 10, 15, .72);
    pointer-events: none;
    transition: top .18s ease, left .18s ease, width .18s ease, height .18s ease;
}

/* Themed tooltip card (glass surface + gold hairline). Captures pointer
   events so its buttons work above the click-through overlay. */
.coach-tip {
    position: fixed;
    z-index: 3001;
    width: 300px;
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
    padding: 0.9rem 1rem;
    pointer-events: auto;
    background: linear-gradient(180deg, rgba(17, 24, 34, .98), rgba(13, 19, 27, .98));
    border: 1px solid rgba(212, 175, 55, .35);
    border-radius: 14px;
    box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .7);
    color: #ECECEC;
    transition: top .18s ease, left .18s ease;
}

/* Missing-anchor fallback: no hole, tooltip centered on the viewport. */
.coach-tip--centered {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.coach-tip__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #D4AF37;
    margin-bottom: 0.35rem;
}

.coach-tip__body {
    font-size: 0.86rem;
    line-height: 1.4;
    color: #B8BECC;
}

.coach-tip__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.85rem;
}

.coach-tip__btn {
    padding: 0.45rem 0.95rem;
    border: none;
    border-radius: 8px;
    background: #1FA971;
    color: #06231A;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    transition: filter .15s, transform .15s;
}
.coach-tip__btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

.coach-tip__btn--ghost {
    background: transparent;
    border: 1px solid rgba(212, 175, 55, .35);
    color: #D4AF37;
}

/* ---- Movimento reduzido: posicionamento instantâneo, sem transição ------ */
.coach-overlay--no-motion .coach-hole,
.coach-overlay--no-motion .coach-tip {
    transition: none;
}
@media (prefers-reduced-motion: reduce) {
    .coach-hole,
    .coach-tip {
        transition: none;
    }
}

/* ---- Compacto (≤768px) e estreito (≤640px): cabe sem estourar a viewport - */
@media (max-width: 768px) {
    .coach-tip { width: 280px; }
}
@media (max-width: 640px) {
    .coach-tip {
        width: auto;
        left: 12px !important;
        right: 12px;
    }
    .coach-tip--centered {
        left: 50% !important;
        right: auto;
        width: calc(100vw - 24px);
    }
}

/* ===================================================================== */
/* TUTORIAL — chrome da prática guiada (room-tutorial-practice)           */
/* Cena roteirizada client-only (TutorialRoom). O "cartão de introdução"  */
/* e o "cartão de encerramento" são entregues pelos passos Info do        */
/* coachmark — e aqui ganham a SKIN v2 (.coach-overlay--v2), só no         */
/* tutorial: as dicas JIT da mesa real seguem com o visual padrão. O botão */
/* "Pular" e os links Home/Lobby também seguem a linguagem v2.             */
/* Paleta v2 (lobby-v2 / home-v2): cartão #0d131b, esmeralda #2ee69a,      */
/* fontes Barlow / Barlow Condensed. */
/* ===================================================================== */

/* Skin v2 do tooltip do coachmark — APENAS quando o host marca o overlay com
   .coach-overlay--v2 (o TutorialRoom faz isso). Espelha o cartão dos arquivos
   v2: superfície escura, filete claro, título em Barlow Condensed, botão
   esmeralda em gradiente. As dicas JIT da mesa (sem a marca) não mudam. */
.coach-overlay--v2 .coach-tip {
    background: linear-gradient(160deg, #111822, #0d131b);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
    color: #cdd9d4;
    font-family: 'Barlow', system-ui, sans-serif;
}

.coach-overlay--v2 .coach-tip__title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    letter-spacing: .5px;
    color: #eafff5;
}

.coach-overlay--v2 .coach-tip__body {
    color: #9aa6b3;
}

.coach-overlay--v2 .coach-tip__btn {
    background: linear-gradient(135deg, #2ee69a, #13a06a);
    color: #04231a;
    border: none;
    border-radius: 10px;
    font-family: 'Barlow', system-ui, sans-serif;
    font-weight: 700;
}

.coach-overlay--v2 .coach-tip__btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

/* "Pular tutorial" sempre acessível (canto inf. esquerdo), no visual v2 (ghost). */
.tut-skip {
    position: fixed;
    left: 0.75rem;
    bottom: 0.75rem;
    z-index: 3100; /* acima do feltro e do overlay do coachmark */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(13, 19, 27, .9);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 11px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
    backdrop-filter: blur(4px);
    color: #cfe9df;
    font-family: 'Barlow', system-ui, sans-serif;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tut-skip:hover {
    background: rgba(239, 106, 94, .14);
    border-color: rgba(239, 106, 94, .45);
}

/* =============================================================================
   LEGAL (legal-*) — /privacidade e /termos
   -----------------------------------------------------------------------------
   Páginas legais públicas (change add-app-privacy-terms): prose de leitura
   (~760px) no visual Cassino Premium, sobre o fundo global do body. Tipografia
   de documento: Inter no corpo, Oswald (truco-display) só no H1; H2 em Barlow
   Condensed. A tabela do inventário de dados rola horizontal no mobile
   (wrapper com overflow-x) — a página nunca ganha scroll-x.
   ========================================================================== */
.legal-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* ---- Cabeçalho: marca + voltar --------------------------------------------- */
.legal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--truco-gold-hairline);
    margin-bottom: 2rem;
}

.legal-brand {
    font-size: 1.15rem;
    letter-spacing: .08em;
    color: #ECECEC;
    text-decoration: none;
    white-space: nowrap;
}

.legal-brand__sub {
    font-size: .7em;
    color: #7c8896;
    letter-spacing: .18em;
}

.legal-back {
    font-family: 'Barlow', system-ui, sans-serif;
    font-size: .85rem;
    font-weight: 600;
    color: #9aa6b3;
    text-decoration: none;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 9px;
    background: rgba(255, 255, 255, .03);
    white-space: nowrap;
    transition: color .15s ease, border-color .15s ease;
}

.legal-back:hover {
    color: #ECECEC;
    border-color: rgba(212, 175, 55, .35);
}

/* ---- Prose ------------------------------------------------------------------ */
.legal-prose {
    flex: 1;
}

.legal-prose h1 {
    font-size: clamp(1.9rem, 5vw, 2.6rem);
    line-height: 1.1;
    color: #ECECEC;
    margin: .35rem 0 .5rem;
}

.legal-updated {
    color: #7c8896;
    font-size: .85rem;
    margin: 0 0 1.75rem;
}

.legal-prose h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: .03em;
    color: #ECECEC;
    margin: 2.25rem 0 .6rem;
    padding-left: .75rem;
    border-left: 3px solid #D4AF37;
}

.legal-prose p,
.legal-prose li {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: .95rem;
    line-height: 1.7;
    color: #B8BECC;
}

.legal-prose p {
    margin: 0 0 1rem;
}

.legal-prose ul {
    padding-left: 1.25rem;
    margin: 0 0 1rem;
    display: grid;
    gap: .5rem;
}

.legal-prose strong {
    color: #ECECEC;
}

.legal-prose a {
    color: #D4AF37;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-prose a:hover {
    color: #ECECEC;
}

/* ---- Tabela do inventário de dados (rola no mobile) ------------------------ */
.legal-table-wrap {
    overflow-x: auto;
    margin: 0 0 1rem;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 10px;
    background: rgba(255, 255, 255, .02);
}

.legal-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: .87rem;
}

.legal-table th {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #D4AF37;
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid var(--truco-gold-hairline);
    white-space: nowrap;
}

.legal-table td {
    padding: 11px 14px;
    color: #B8BECC;
    line-height: 1.5;
    vertical-align: top;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.legal-table tbody tr:last-child td {
    border-bottom: none;
}

/* ---- Rodapé ------------------------------------------------------------------ */
.legal-foot {
    margin-top: 3rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .06);
    text-align: center;
    font-family: 'Barlow', system-ui, sans-serif;
    font-size: .78rem;
    letter-spacing: .08em;
    color: #5a6776;
}