:root {
    --vinho: #3d1524;
    --vinho-fundo: #1c0d12;
    --vinho-card: #2a1219;
    --blush: #e89a8a;
    --blush-forte: #d47264;
    --champanhe: #e6c9a8;
    --creme: #f6efe7;
    --creme-suave: #cbb8b0;
    --verde: #5fad7a;
    --amarelo: #e3b23c;
    --vermelho: #c94b4b;
    --azul-ele: #4a6fa5;
    --rosa-ela: #c45b7a;
    --borda: rgba(230, 201, 168, 0.22);
    --sombra: 0 18px 40px rgba(0, 0, 0, 0.35);

    /* aliases usados no admin antigo */
    --roxo: #c45b7a;
    --roxo-escuro: #3d1524;
    --rosa: #d47264;
    --fundo: var(--vinho-fundo);
    --fundo-cartao: var(--vinho-card);
    --texto: var(--creme);
    --texto-suave: var(--creme-suave);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Outfit", sans-serif;
    color: var(--creme);
    min-height: 100vh;
    background:
        radial-gradient(ellipse 80% 50% at 20% 0%, rgba(212, 114, 100, 0.18), transparent 55%),
        radial-gradient(ellipse 70% 45% at 90% 10%, rgba(230, 201, 168, 0.12), transparent 50%),
        linear-gradient(165deg, #12080c 0%, #1c0d12 45%, #241018 100%);
}

h1, h2, .faixa-vez-titulo, .marca-mini, .cartao-login h1 {
    font-family: "Fraunces", Georgia, serif;
}

a { color: var(--champanhe); }

.oculto { display: none !important; }

/* ---------- Login ---------- */
.tela-centralizada {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}

.cartao-login {
    background: rgba(42, 18, 25, 0.92);
    border: 1px solid var(--borda);
    border-radius: 24px;
    padding: 40px 32px;
    max-width: 400px;
    width: 100%;
    text-align: center;
    box-shadow: var(--sombra);
    backdrop-filter: blur(8px);
}

.cartao-login h1 {
    margin: 0 0 8px;
    font-size: 34px;
    font-weight: 700;
    color: var(--creme);
}

.subtitulo {
    color: var(--creme-suave);
    margin: 0 0 28px;
    font-size: 15px;
}

.cartao-login form {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cartao-login label {
    font-size: 13px;
    color: var(--creme-suave);
    margin-top: 12px;
}

input, select, textarea {
    background: rgba(12, 6, 8, 0.55);
    border: 1px solid var(--borda);
    color: var(--creme);
    padding: 13px 14px;
    border-radius: 12px;
    font-size: 15px;
    width: 100%;
    font-family: inherit;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--blush);
}

.botao {
    border: none;
    border-radius: 14px;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: transform 0.12s ease, opacity 0.15s ease, background 0.15s ease;
}

.botao:active { transform: scale(0.98); }
.botao:disabled { opacity: 0.45; cursor: not-allowed; }

.botao-primario {
    background: linear-gradient(135deg, var(--blush-forte), #b85a6a);
    color: #fff8f5;
    margin-top: 18px;
    box-shadow: 0 10px 24px rgba(184, 90, 106, 0.35);
}

.alerta {
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 14px;
    font-size: 14px;
}

.alerta-erro {
    background: rgba(201, 75, 75, 0.15);
    color: #f0a8a8;
    border: 1px solid rgba(201, 75, 75, 0.4);
}

.alerta-sucesso {
    background: rgba(95, 173, 122, 0.15);
    color: #a8dfb8;
    border: 1px solid rgba(95, 173, 122, 0.4);
}

/* ---------- Jogo ---------- */
.pagina-jogo {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.topo-jogo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(28, 13, 18, 0.85);
    border-bottom: 1px solid var(--borda);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 40;
}

.topo-esquerda {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.marca-mini {
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--champanhe);
}

.ola {
    font-size: 15px;
    font-weight: 600;
}

.moedas {
    font-weight: 700;
    font-size: 14px;
    color: var(--champanhe);
    background: rgba(230, 201, 168, 0.12);
    border: 1px solid var(--borda);
    padding: 8px 14px;
    border-radius: 999px;
}

.topo-direita {
    display: flex;
    gap: 10px;
    align-items: center;
}

.topo-link {
    text-decoration: none;
    color: var(--creme-suave);
    font-size: 13px;
    font-weight: 500;
    padding: 8px 10px;
    border-radius: 10px;
}

.topo-link:hover { color: var(--creme); background: rgba(255,255,255,0.05); }
.topo-admin { color: var(--champanhe); }

.topo-btn {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    line-height: inherit;
}

.topo-btn[aria-pressed="true"] {
    color: var(--champanhe);
    background: rgba(230, 201, 168, 0.12);
}

body:fullscreen,
body:-webkit-full-screen {
    overflow: auto;
}

/* Confortômetro — sticky, impossível de ignorar */
.faixa-conforto {
    position: sticky;
    top: 62px;
    z-index: 35;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 14px 16px;
    background: linear-gradient(135deg, #f0d090 0%, #e3b23c 55%, #d4a02e 100%);
    color: #2a1a08;
    border-bottom: 3px solid #b8861a;
    box-shadow: 0 8px 24px rgba(227, 178, 60, 0.35);
}

.conforto-icone {
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
}

.conforto-titulo {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 2px;
}

.conforto-status {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
}

.conforto-dica {
    font-size: 12px;
    opacity: 0.85;
    line-height: 1.35;
}

/* Barra de intimidade do casal */
.faixa-intimidade {
    position: sticky;
    top: 128px;
    z-index: 34;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 12px 16px 14px;
    background: linear-gradient(135deg, rgba(61, 21, 36, 0.95) 0%, rgba(42, 18, 25, 0.98) 100%);
    border-bottom: 1px solid var(--borda);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.intimidade-topo {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
}

.intimidade-titulo {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--champanhe);
}

.intimidade-rotulo {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--blush);
}

.intimidade-valor {
    font-size: 13px;
    font-weight: 700;
    color: var(--creme);
    font-variant-numeric: tabular-nums;
}

.intimidade-trilha {
    height: 10px;
    border-radius: 999px;
    background: rgba(230, 201, 168, 0.15);
    overflow: hidden;
    border: 1px solid rgba(230, 201, 168, 0.2);
}

.intimidade-preenchimento {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--blush-forte) 0%, var(--blush) 45%, var(--champanhe) 100%);
    box-shadow: 0 0 12px rgba(232, 154, 138, 0.45);
    transition: width 0.55s ease;
}

.intimidade-dica {
    margin-top: 6px;
    font-size: 11px;
    color: var(--creme-suave);
}

.intimidade-dica.ganho {
    color: var(--verde);
    font-weight: 600;
}

.area-jogo {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 16px 110px;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}

.faixa-vez {
    width: 100%;
    border-radius: 20px;
    padding: 22px 20px;
    margin-bottom: 16px;
    text-align: center;
    border: 1px solid var(--borda);
    animation: entra 0.45s ease;
}

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

.faixa-vez.vez-ele {
    background: linear-gradient(145deg, rgba(74, 111, 165, 0.35), rgba(42, 18, 25, 0.9));
    border-color: rgba(74, 111, 165, 0.55);
}

.faixa-vez.vez-ela {
    background: linear-gradient(145deg, rgba(196, 91, 122, 0.35), rgba(42, 18, 25, 0.9));
    border-color: rgba(196, 91, 122, 0.55);
}

.faixa-vez-label {
    margin: 0 0 6px;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--creme-suave);
}

.faixa-vez-titulo {
    margin: 0 0 8px;
    font-size: clamp(28px, 7vw, 36px);
    font-weight: 700;
    line-height: 1.15;
}

.faixa-vez-sub {
    margin: 0;
    font-size: 15px;
    color: var(--creme-suave);
}

.seletor-nivel {
    width: 100%;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    color: var(--creme-suave);
}

.seletor-nivel select {
    width: auto;
    min-width: 140px;
    padding: 10px 12px;
}

.palco-carta {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.carta {
    background:
        linear-gradient(160deg, rgba(61, 21, 36, 0.95), rgba(42, 18, 25, 0.98));
    border: 1px solid var(--borda);
    border-radius: 24px;
    padding: 36px 24px;
    width: 100%;
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: clamp(18px, 4.5vw, 22px);
    line-height: 1.45;
    box-shadow: var(--sombra);
    animation: entra 0.4s ease;
}

.carta-placeholder {
    color: var(--creme-suave);
    font-size: 16px;
    margin: 0;
}

.carta.tipo-pergunta { border-color: rgba(74, 111, 165, 0.7); box-shadow: 0 0 0 1px rgba(74, 111, 165, 0.2), var(--sombra); }
.carta.tipo-desafio { border-color: rgba(212, 114, 100, 0.75); box-shadow: 0 0 0 1px rgba(212, 114, 100, 0.2), var(--sombra); }
.carta.tipo-termometro {
    border-color: #e3b23c;
    background: linear-gradient(160deg, #3a2a12, #2a1219);
    box-shadow: 0 0 0 2px rgba(227, 178, 60, 0.35), var(--sombra);
}

.etiqueta-tipo {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 14px;
    background: rgba(255,255,255,0.08);
    color: var(--champanhe);
}

.instrucao-vez {
    width: 100%;
    background: rgba(255,255,255,0.04);
    border: 1px dashed var(--borda);
    border-radius: 14px;
    padding: 14px 16px;
    font-size: 14px;
    color: var(--creme-suave);
    line-height: 1.45;
    text-align: left;
}

.instrucao-vez strong { color: var(--creme); }

.badge-quem {
    display: inline-block;
    background: var(--blush-forte);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    padding: 8px 18px;
    border-radius: 999px;
    margin-bottom: 8px;
}

.area-timer {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.timer-circulo {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    border: 4px solid var(--blush);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    font-family: "Fraunces", Georgia, serif;
}

.timer-circulo.alerta-tempo {
    border-color: var(--vermelho);
    animation: pulsar 1s infinite;
}

@keyframes pulsar {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

.timer-dica {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--creme-suave);
}

.botao-timer-reiniciar {
    margin-top: 10px;
    font-size: 13px;
    padding: 8px 14px;
}

.area-termometro,
.area-resposta {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.termo-destaque {
    font-family: "Fraunces", Georgia, serif;
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    color: var(--champanhe);
}

.termo-ajuda,
.pergunta-quem {
    color: var(--creme-suave);
    font-size: 14px;
    margin: 0;
}

.botoes-termometro {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.botoes-termometro .botao { width: 100%; }

.botao-termometro {
    border: 1px solid var(--borda);
    color: var(--creme);
}

.termo-ok { background: rgba(95, 173, 122, 0.25); border-color: rgba(95, 173, 122, 0.5); }
.termo-meio { background: rgba(227, 178, 60, 0.22); border-color: rgba(227, 178, 60, 0.5); }
.termo-nao { background: rgba(201, 75, 75, 0.22); border-color: rgba(201, 75, 75, 0.5); }

.botoes-resultado {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.botoes-resultado .botao { width: 100%; }

.botao-feito { background: var(--verde); color: #0c2414; }
.botao-pulou {
    background: transparent;
    color: var(--creme);
    border: 1px solid var(--borda);
}
.botao-depois { background: var(--amarelo); color: #2a1a08; }

.acoes-carta {
    display: flex;
    gap: 10px;
    width: 100%;
}

.acoes-carta .botao-primario {
    flex: 1;
    margin-top: 0;
    font-size: 17px;
    padding: 16px 20px;
}

.botao-fav {
    background: transparent;
    color: var(--champanhe);
    border: 1px solid var(--borda);
}

.botao-fav.ativa {
    background: var(--champanhe);
    color: #2a1a08;
}

.botao-fantasma {
    background: transparent;
    color: var(--creme-suave);
    border: none;
    font-size: 13px;
    text-decoration: underline;
    padding: 8px;
}

.mensagem-evento {
    margin-top: 12px;
    padding: 14px 18px;
    border-radius: 14px;
    background: rgba(232, 154, 138, 0.12);
    border: 1px solid rgba(232, 154, 138, 0.35);
    text-align: center;
    width: 100%;
}

.botao-safeword {
    position: fixed;
    bottom: 18px;
    right: 18px;
    background: var(--vermelho);
    color: white;
    border: none;
    border-radius: 999px;
    padding: 14px 22px;
    font-weight: 700;
    font-size: 14px;
    font-family: inherit;
    box-shadow: 0 8px 24px rgba(201, 75, 75, 0.45);
    cursor: pointer;
    z-index: 50;
}

.overlay {
    position: fixed;
    inset: 0;
    background: rgba(12, 6, 8, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 20px;
}

.cartao-overlay {
    background: var(--vinho-card);
    border: 1px solid var(--borda);
    border-radius: 20px;
    padding: 32px;
    max-width: 380px;
    text-align: center;
}

.cartao-overlay h2 { margin-top: 0; font-family: "Fraunces", Georgia, serif; }
.cartao-overlay button { margin-top: 18px; width: 100%; }

/* ---------- Admin (mantém funcional) ---------- */
.admin-wrapper { display: flex; min-height: 100vh; }
.admin-menu {
    width: 220px;
    background: var(--vinho-card);
    border-right: 1px solid var(--borda);
    padding: 20px 0;
    flex-shrink: 0;
}
.admin-menu h2 { padding: 0 20px; font-size: 16px; margin-bottom: 20px; }
.admin-menu a {
    display: block;
    padding: 12px 20px;
    text-decoration: none;
    color: var(--creme-suave);
    font-size: 14px;
    border-left: 3px solid transparent;
}
.admin-menu a:hover,
.admin-menu a.ativo {
    background: rgba(232, 154, 138, 0.12);
    color: var(--creme);
    border-left-color: var(--blush);
}
.admin-conteudo { flex: 1; padding: 30px; max-width: 1100px; }
.admin-conteudo h1 { margin-top: 0; }

.tabela-admin { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 14px; }
.tabela-admin th,
.tabela-admin td { padding: 10px 12px; border-bottom: 1px solid var(--borda); text-align: left; }
.tabela-admin th { color: var(--creme-suave); font-weight: 600; font-size: 12px; text-transform: uppercase; }
.tabela-admin tr:hover { background: rgba(232, 154, 138, 0.06); }

.tag { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.tag-pergunta { background: rgba(74, 111, 165, 0.25); color: #b7c9e8; }
.tag-desafio { background: rgba(212, 114, 100, 0.25); color: #f0c0b6; }
.tag-termometro { background: rgba(227, 178, 60, 0.25); color: #f5e0a8; }

.form-admin { display: flex; flex-direction: column; gap: 4px; max-width: 640px; margin-top: 20px; }
.form-admin label { font-size: 13px; color: var(--creme-suave); margin-top: 12px; }
.form-admin .linha { display: flex; gap: 16px; }
.form-admin .linha > div { flex: 1; }
.form-admin button { margin-top: 20px; align-self: flex-start; }

.cartoes-dashboard { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
.cartao-metrica {
    background: var(--vinho-card);
    border: 1px solid var(--borda);
    border-radius: 12px;
    padding: 18px 22px;
    min-width: 150px;
}
.cartao-metrica .numero { font-size: 28px; font-weight: 700; }
.cartao-metrica .rotulo { font-size: 12px; color: var(--creme-suave); }

.acoes-linha { display: flex; gap: 8px; }
.acoes-linha a, .acoes-linha button { font-size: 12px; padding: 6px 10px; }
.botao-link { background: none; border: none; color: var(--creme-suave); text-decoration: underline; cursor: pointer; font-size: 13px; padding: 0; }
.botao-perigo { background: var(--vermelho); color: white; }
.botao-secundario { background: transparent; color: var(--creme); border: 1px solid var(--borda); }

.barra-progresso { background: rgba(0,0,0,0.35); border-radius: 20px; height: 8px; width: 120px; overflow: hidden; }
.barra-progresso-preenchida { background: var(--blush); height: 100%; }

.badge-status { font-size: 11px; padding: 3px 9px; border-radius: 20px; }
.badge-bloqueada { background: rgba(148,163,184,0.2); color: #cbd5e1; }
.badge-nao_iniciada { background: rgba(74,111,165,0.25); color: #b7c9e8; }
.badge-em_andamento { background: rgba(227,178,60,0.25); color: #f5e0a8; }
.badge-em_espera { background: rgba(201,75,75,0.25); color: #f0a8a8; }
.badge-concluida { background: rgba(95,173,122,0.25); color: #a8dfb8; }

@media (max-width: 760px) {
    .faixa-conforto { top: 58px; max-width: none; }
    .faixa-intimidade { top: 118px; max-width: none; }
    .admin-wrapper { flex-direction: column; }
    .admin-menu { width: 100%; display: flex; overflow-x: auto; padding: 10px 0; }
    .admin-menu h2 { display: none; }
    .admin-menu a { border-left: none; border-bottom: 3px solid transparent; white-space: nowrap; }
    .admin-menu a.ativo { border-bottom-color: var(--blush); }
    .admin-conteudo { padding: 18px; }
    .form-admin .linha { flex-direction: column; gap: 0; }
}

/* ---- Dado azul / rosa (desafio periódico) ---- */
.area-dado {
    width: 100%;
    margin-top: 14px;
    padding: 18px 16px;
    border-radius: 16px;
    background: rgba(42, 18, 25, 0.75);
    border: 1px solid var(--borda);
    text-align: center;
}
.dado-titulo {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 600;
}
.dado-ajuda {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--creme-suave);
}
.dados-par {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-bottom: 12px;
}
.dado {
    width: 72px;
    height: 72px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    border: 2px solid transparent;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.dado-azul {
    background: linear-gradient(145deg, #5a82b8, #2f4a72);
    box-shadow: 0 6px 16px rgba(74, 111, 165, 0.35);
}
.dado-rosa {
    background: linear-gradient(145deg, #d47896, #8a3554);
    box-shadow: 0 6px 16px rgba(196, 91, 122, 0.35);
}
.dado.girando {
    animation: dado-gira 0.35s linear infinite;
}
.dado.vencedor {
    transform: scale(1.12);
    border-color: var(--creme);
    box-shadow: 0 0 0 3px rgba(245, 230, 211, 0.35), 0 8px 22px rgba(0,0,0,0.35);
}
@keyframes dado-gira {
    from { transform: rotate(0deg) scale(1); }
    to { transform: rotate(360deg) scale(1.05); }
}
.dado-resultado {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 600;
    min-height: 1.3em;
}
.dado-resultado.resultado-ele { color: #9eb6d9; }
.dado-resultado.resultado-ela { color: #e8a0b5; }
.carta-trilha {
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--creme-suave);
    margin: 6px 0 10px;
}

/* Placar Ele vs Ela */
.faixa-ranking {
    position: sticky;
    top: 198px;
    z-index: 33;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 10px 16px 12px;
    background: linear-gradient(135deg, rgba(42, 18, 25, 0.96), rgba(28, 12, 18, 0.98));
    border-bottom: 1px solid var(--borda);
}
.ranking-titulo {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--creme-suave);
    margin-bottom: 8px;
    text-align: center;
}
.ranking-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.ranking-col {
    border-radius: 12px;
    padding: 10px 12px;
    border: 1px solid transparent;
}
.ranking-ele {
    background: rgba(74, 111, 165, 0.22);
    border-color: rgba(74, 111, 165, 0.4);
}
.ranking-ela {
    background: rgba(196, 91, 122, 0.22);
    border-color: rgba(196, 91, 122, 0.4);
}
.ranking-col.em-alta {
    box-shadow: 0 0 0 1px rgba(245, 230, 211, 0.35);
}
.ranking-nome {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 6px;
}
.ranking-ele .ranking-nome { color: #9eb6d9; }
.ranking-ela .ranking-nome { color: #e8a0b5; }
.ranking-linha {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13px;
    color: var(--creme-suave);
    margin-top: 3px;
}
.ranking-linha strong {
    font-size: 18px;
    color: var(--creme);
    font-weight: 700;
}
.ranking-dica {
    margin-top: 8px;
    text-align: center;
    font-size: 11px;
    color: var(--creme-suave);
    opacity: 0.9;
}
@media (max-width: 760px) {
    .faixa-ranking { top: 178px; max-width: none; }
}