/* ── MODO VISITANTE (C1.3) ───────────────────────────────────────────────
   Usa os tokens de base.css — funciona no tema claro e no dark gamer. */

.vst-page { min-height: 100vh; background: var(--bg-page); color: var(--text-1); overflow-y: auto; }

.vst-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 2rem; border-bottom: 1px solid var(--border);
    background: var(--bg-glass); backdrop-filter: blur(10px);
    position: sticky; top: 0; z-index: 10;
}
.vst-brand { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.vst-brand-icon { width: 36px; height: 36px; }
.vst-brand-icon img{width:100%;height:100%;object-fit:cover;border-radius:10px}
.vst-brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.vst-brand-name { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 14px; color: var(--text-1); }
.vst-brand-sub { font-size: 11px; color: var(--text-3); }
.vst-topbar-actions { display: flex; gap: 10px; }

.vst-btn-solid {
    padding: 8px 18px; border-radius: 10px; border: none; cursor: pointer;
    background: linear-gradient(135deg, #0D1B48, #1996C8); color: #fff;
    font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 700; transition: all 0.2s;
}
.vst-btn-solid:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(25,150,200,0.3); }
.vst-btn-ghost {
    padding: 8px 18px; border-radius: 10px; cursor: pointer;
    background: transparent; border: 1px solid var(--border-mid); color: var(--text-2);
    font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 700; transition: all 0.2s;
}
.vst-btn-ghost:hover { border-color: var(--blue-400); color: var(--text-1); }
.vst-btn-lg { padding: 12px 26px; font-size: 14px; border-radius: 12px; }

.vst-hero { max-width: 760px; margin: 0 auto; padding: 4rem 2rem 3rem; text-align: center; }
.vst-hero h1 { font-family: 'Playfair Display', serif; font-size: 38px; margin-bottom: 14px; color: var(--text-1); }
.vst-hero p { font-size: 15px; color: var(--text-3); line-height: 1.7; margin-bottom: 1.75rem; }

.vst-main { max-width: 900px; margin: 0 auto; padding: 0 2rem 3rem; }
.vst-section { margin-bottom: 2.5rem; }
.vst-section-head { margin-bottom: 1rem; }
.vst-section-head h2 { font-family: 'Playfair Display', serif; font-size: 22px; color: var(--text-1); }
.vst-section-sub { font-size: 12px; color: var(--text-4); }

.vst-card {
    background: var(--bg-card, var(--bg-primary)); border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px); padding: 1rem 1.25rem; margin-bottom: 10px;
    box-shadow: var(--shadow-xs);
}
.vst-card-title { font-size: 14px; font-weight: 700; color: var(--text-1); margin-top: 6px; }
.vst-card-sub { font-size: 12px; color: var(--text-3); margin-top: 4px; line-height: 1.6; }
.vst-card-meta { font-size: 11px; color: var(--text-4); margin-top: 2px; }
.vst-badge {
    display: inline-block; padding: 3px 10px; border-radius: 99px;
    font-size: 10px; font-weight: 700; background: var(--bg-input); color: var(--text-3);
    text-transform: uppercase; letter-spacing: 0.4px;
}

.vst-evento {
    display: flex; align-items: center; gap: 14px;
    background: var(--bg-card, var(--bg-primary)); border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px); padding: 0.9rem 1.25rem; margin-bottom: 10px;
    box-shadow: var(--shadow-xs);
}
.vst-evento-data {
    flex-shrink: 0; min-width: 84px; text-align: center; padding: 8px 10px;
    background: var(--bg-input); border-radius: 10px;
    font-size: 12px; font-weight: 800; color: var(--text-2); text-transform: uppercase;
}
.vst-evento-body { flex: 1; min-width: 0; }
.vst-evento-body .vst-card-title { margin-top: 0; }

.vst-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.vst-grid .vst-card { margin-bottom: 0; }

/* ── C1.5: expandir ementa + "ver todos" ── */
.vst-link { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--blue-400); cursor: pointer; }
.vst-link:hover { text-decoration: underline; }
.vst-ver-todos {
    text-align: center; padding: 10px; margin-top: 4px; border-radius: 10px;
    border: 1px dashed var(--border-mid); font-size: 12.5px; font-weight: 700;
    color: var(--text-3); cursor: pointer; transition: all 0.15s;
}
.vst-ver-todos:hover { border-color: var(--blue-400); color: var(--blue-400); }

/* No dark a escala azul e' espelhada por luminancia: --blue-400 vira #102060
   (ilegivel sobre o fundo escuro); o mesmo tom de acento la e' --blue-700.
   Inclui 2 casos pre-existentes da mesma familia (ghost hover e link do login). */
[data-theme="dark"] .vst-link,
[data-theme="dark"] .vst-ver-todos:hover,
[data-theme="dark"] .login-visitante-link span { color: var(--blue-700); }
[data-theme="dark"] .vst-ver-todos:hover,
[data-theme="dark"] .vst-btn-ghost:hover { border-color: var(--blue-700); }

.vst-cta {
    text-align: center; padding: 2.5rem 2rem; border-radius: 16px;
    background: var(--bg-card, var(--bg-primary)); border: 1px solid var(--border);
}
.vst-cta h2 { font-family: 'Playfair Display', serif; font-size: 24px; color: var(--text-1); margin-bottom: 10px; }
.vst-cta p { font-size: 14px; color: var(--text-3); line-height: 1.7; max-width: 560px; margin: 0 auto 1.5rem; }
.vst-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.vst-vazio { text-align: center; padding: 2rem 1rem; color: var(--text-3); font-size: 13px; }
.vst-footer { text-align: center; padding: 1.5rem; font-size: 11px; color: var(--text-4); border-top: 1px solid var(--border); }

/* Link "Explorar sem login" na tela de login */
.login-visitante-link { margin-top: 10px; text-align: center; font-size: 12px; color: var(--text-3); }
.login-visitante-link span { color: var(--blue-400); font-weight: 700; cursor: pointer; }
.login-visitante-link span:hover { text-decoration: underline; }

@media (max-width: 640px) {
    .vst-topbar { padding: 12px 1rem; }
    .vst-hero { padding: 2.5rem 1.25rem 2rem; }
    .vst-hero h1 { font-size: 28px; }
    .vst-main { padding: 0 1rem 2rem; }
    .vst-evento { flex-wrap: wrap; }
    /* o .cal-tipo reusado do hub ganha margin-left:68px no mobile (hub.css,
       alinhado ao cal-item de la); aqui o chip quebra de linha — zera */
    .vst-evento .cal-tipo { margin-left: 0; }
}

/* ── E3: torneios no visitante ──────────────────────────────────────────
   A secao reusa as classes .trn-* do hub.css (o SPA merged carrega as 5
   folhas). Aqui vive so o que e' do visitante: toolbar do detalhe, CTA de
   cadastro, o modo telao e o espelho dark dos overrides que no hub.css
   sao escopados em .hub-page (o visitante e' .vst-page — sem isto o
   vencedor cairia no --blue-700 em vez do #58A6FF padronizado no dark). */
.vst-trn-toolbar { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 4px; }
.vst-trn-toolbar .vst-link { margin-top: 0; }
.vst-trn-cta {
    margin-top: 16px; display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap; font-size: 14px; font-weight: 700; color: var(--text-1);
}

/* Fullscreen: sem a classe o container e' transparente no fluxo normal;
   com ela (ligada no fullscreenchange) vira a tela do telao. */
.vst-telao { background: var(--bg-page); }
.vst-telao-on { padding: 28px 32px; overflow: auto; }
.vst-telao-on .trn-det-head h2 { font-size: 30px; }
.vst-telao-on .trn-round { min-width: 300px; }
.vst-telao-on .trn-round-title { font-size: 13px; }
.vst-telao-on .trn-bteam { font-size: 17px; }
.vst-telao-on .trn-score { font-size: 19px; }
.vst-telao-on .trn-bmeta { font-size: 13px; }
.vst-telao-on .trn-campeao { font-size: 20px; }

[data-theme="dark"] .vst-page .trn-bteam.venc { color: #58A6FF; background: rgba(88,166,255,0.12); }
[data-theme="dark"] .vst-page .trn-badge-andamento { color: #58A6FF; }