/* Esconde a barra de rolagem visualmente em todo o /painel (continua
   rolavel por toque, roda do mouse ou teclado — so a barra em si some,
   pra parecer mais com um app nativo). */
html, body, * {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Edge legado */
}
*::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge novo */
}

/* Historico de Partidas: cada linha agora abre o replay das jogadas
   (ver assets/game-history-bridge.js) — cursor e feedback ao toque avisam
   que a linha e clicavel. */
.hist-list .tx-item {
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.hist-list .tx-item:active {
    opacity: 0.65;
}

/* ===================================================================
   Indicar Amigos — organizacao e responsividade
   =================================================================== */

/* Ritmo vertical unico pros 4 blocos da folha (card verde, link, niveis,
   historico). O bug real: .ref-levels (cards N1/N2) nao tinha NENHUMA
   margem inferior no CSS original — por isso colava direto no Historico
   de Comissoes logo abaixo, enquanto os outros blocos tinham mais respiro
   entre si. Agora os 4 usam o mesmo espacamento. */
.ref-card,
.sheet-section:has(> .ref-link-label),
.ref-levels {
    margin-bottom: 20px;
}

/* O link do "Seu link exclusivo" e o botao "Copiar" sao blocos separados
   no layout original (o botao fica pequeno e solto embaixo do texto).
   Onde o navegador suporta :has() (todos os relevantes hoje), agrupamos
   os dois visualmente: link acima, botao de copiar abaixo, largura total
   — sem :has() o botao so continua como estava, sem quebrar nada. */
.sheet-section:has(> .ref-link-label) {
    display: flex;
    flex-direction: column;
}
.sheet-section:has(> .ref-link-label) .ref-link-value {
    margin: 8px 0 10px;
}
.sheet-section:has(> .ref-link-label) .ref-copy-btn {
    width: 100%;
    padding: 13px;
    border-radius: 12px;
    font-size: 0.85rem;
}

/* Cards de nivel (N1/N2): respiro interno maior e alinhamento mais solido
   entre os dois — o valor grande (contagem) fica visualmente mais perto
   do rotulo dele do que do rotulo de cima, criando 2 grupos claros em vez
   de 3 linhas soltas. */
.ref-level {
    padding: 18px 14px;
}
.ref-level .tier-sub {
    margin-bottom: 14px;
}
.ref-level .count {
    margin-bottom: 2px;
}

/* Telas bem estreitas (~<380px): 2 colunas fica apertado com "volume
   depositado" quebrando em varias linhas — empilha em 1 coluna. */
@media (max-width: 380px) {
    .ref-levels {
        grid-template-columns: 1fr;
    }
}

/* Historico de comissoes: garante que nome/valor nunca estourem a linha
   em telas estreitas, mesmo com nome longo + selo de nivel juntos. */
.ref-history-item {
    flex-wrap: wrap;
    row-gap: 6px;
}
.ref-history-info {
    min-width: 0;
    flex: 1 1 auto;
}
.ref-history-name {
    min-width: 0;
}
.ref-history-value {
    flex-shrink: 0;
}