/* =====================================================
   BOTÕES
   ===================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--font-sm);
    font-weight: 600;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    line-height: 1.5;
}

.btn .material-symbols-outlined {
    font-size: 1.1rem;
}

.btn-primary {
    background: var(--primary);
    color: var(--bg-darkest);
}

.btn-primary:hover {
    background: var(--primary-hover);
    box-shadow: var(--shadow-glow);
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-outline {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-light);
}

.btn-outline:hover {
    background: var(--bg-elevated);
    border-color: var(--green);
    color: var(--green);
}

.btn-green {
    background: linear-gradient(135deg, #00E870 0%, #00C853 100%);
    color: #000;
    font-weight: 800;
    border: 1px solid rgba(0, 232, 112, 0.5);
    box-shadow: 0 0 12px rgba(0, 232, 112, 0.25), 0 2px 8px rgba(0, 0, 0, 0.3);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
}

.btn-green:hover {
    background: linear-gradient(135deg, #00FF7F 0%, #00E870 100%);
    box-shadow: 0 0 20px rgba(0, 232, 112, 0.4), 0 0 40px rgba(0, 232, 112, 0.15), 0 4px 12px rgba(0, 0, 0, 0.3);
    transform: translateY(-1px);
    border-color: rgba(0, 255, 127, 0.6);
}

.btn-ghost {
    background: rgba(0, 232, 112, 0.08);
    color: #00E870;
    border: 1px solid rgba(0, 232, 112, 0.2);
    font-weight: 700;
}

.btn-ghost:hover {
    background: rgba(0, 232, 112, 0.15);
    color: #00FF7F;
    border-color: rgba(0, 232, 112, 0.4);
    box-shadow: 0 0 12px rgba(0, 232, 112, 0.15);
    transform: translateY(-1px);
}

.btn-danger {
    background: var(--danger);
    color: white;
}

.btn-danger:hover {
    opacity: 0.9;
}

.btn-deposit {
    background: var(--success);
    color: white;
    font-size: var(--font-xs);
    padding: var(--space-xs) var(--space-md);
}

.btn-deposit:hover {
    opacity: 0.9;
}

.btn-sm {
    padding: var(--space-xs) var(--space-md);
    font-size: var(--font-xs);
}

.btn-lg {
    padding: var(--space-md) var(--space-xl);
    font-size: var(--font-base);
}

.btn-block {
    width: 100%;
}

.btn-place-bet {
    font-size: var(--font-base);
    padding: var(--space-md);
    font-weight: 700;
    letter-spacing: 0.5px;
}

.btn-clear-slip {
    margin-top: var(--space-sm);
    font-size: var(--font-xs);
}

/* =====================================================
   CARDS DE PARTIDA
   ===================================================== */

.match-card {
    background: linear-gradient(165deg, #1c1c1c 0%, #141414 40%, #1a1a1a 100%);
    border: 1px solid rgba(0, 232, 112, 0.12);
    border-radius: 14px;
    padding: var(--space-lg);
    transition: transform 0.3s cubic-bezier(.22,.68,0,1.2), box-shadow 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.match-card:hover {
    border-color: rgba(0, 232, 112, 0.3);
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 40px rgba(0, 232, 112, 0.1), 0 0 0 1px rgba(0, 232, 112, 0.06);
}

.match-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
}

.match-phase {
    background: var(--bg-elevated);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.match-status-live {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--live);
    font-weight: 700;
}

.match-status-live::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--live);
    border-radius: 50%;
    animation: pulse-live 1.5s infinite;
}

.match-teams {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.match-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    flex: 1;
    text-align: center;
}

.team-logo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.team-logo img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.team-logo .flag-emoji {
    font-size: 2rem;
}

.team-name {
    font-size: var(--font-sm);
    font-weight: 600;
    line-height: 1.2;
}

.match-score {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-shrink: 0;
}

.score-value {
    font-size: var(--font-2xl);
    font-weight: 800;
    min-width: 32px;
    text-align: center;
}

.score-separator {
    font-size: var(--font-lg);
    color: var(--text-muted);
    font-weight: 300;
}

.match-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.match-minute {
    font-size: var(--font-xl);
    font-weight: 800;
    color: var(--live);
}

.match-period {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

.match-date-info {
    text-align: center;
}

.match-date-info .date {
    font-size: var(--font-sm);
    font-weight: 600;
}

.match-date-info .time {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

/* Odds dentro do card */
.match-card-odds {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
}

.odd-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 8px;
    background: rgba(0, 232, 112, 0.06);
    border: 1px solid rgba(0, 232, 112, 0.15);
    border-radius: 10px;
    transition: all 0.25s ease;
    cursor: pointer;
}

.odd-btn:hover {
    background: rgba(0, 232, 112, 0.12);
    border-color: rgba(0, 232, 112, 0.35);
    box-shadow: 0 0 12px rgba(0, 232, 112, 0.1);
}

.odd-btn.selected {
    background: rgba(0, 232, 112, 0.18);
    border-color: #00E870;
    box-shadow: 0 0 16px rgba(0, 232, 112, 0.2);
}

.odd-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 600;
    text-transform: uppercase;
}

.odd-value {
    font-size: 15px;
    font-weight: 800;
    color: #00E870;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 8px rgba(0, 232, 112, 0.2);
}

.odd-value.up { color: #00E870; }
.odd-value.down { color: #ef4444; }

/* =====================================================
   TABELA DE CLASSIFICAÇÃO
   ===================================================== */

.standings-table {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.standings-table thead th {
    background: var(--bg-elevated);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-xs);
    font-weight: 700;
    color: var(--text-muted);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border);
}

.standings-table thead th:first-child,
.standings-table thead th:nth-child(2) {
    text-align: left;
}

.standings-table tbody td {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-sm);
    text-align: center;
    border-bottom: 1px solid var(--border);
}

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

.standings-table tbody tr:hover {
    background: var(--bg-card-hover);
}

.standings-table .team-cell {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    text-align: left;
}

.standings-table .position {
    width: 24px;
    text-align: center;
    font-weight: 700;
    color: var(--text-muted);
}

.standings-table .position.qualified {
    color: var(--success);
}

.standings-table .pts {
    font-weight: 800;
    color: var(--green-light);
}

.standings-table .team-flag {
    font-size: 1.2rem;
}

.standings-table .team-name-cell {
    font-weight: 600;
}

/* =====================================================
   BADGES / TAGS
   ===================================================== */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: var(--font-xs);
    font-weight: 600;
    border-radius: var(--radius-full);
}

.badge-live {
    background: var(--danger-bg);
    color: var(--live);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.badge-scheduled {
    background: var(--info-bg);
    color: var(--info);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.badge-finished {
    background: var(--bg-elevated);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.badge-group {
    background: var(--green-glow);
    color: var(--green);
    border: 1px solid rgba(0, 166, 81, 0.2);
    font-weight: 700;
}

/* =====================================================
   FORMULÁRIOS
   ===================================================== */

.form-group {
    margin-bottom: var(--space-lg);
}

.form-group label {
    display: block;
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
}

.form-group input,
.form-group select {
    width: 100%;
    padding: var(--space-md);
}

.form-error {
    font-size: var(--font-xs);
    color: var(--danger);
    margin-top: var(--space-xs);
}

.form-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    max-width: 440px;
    margin: 0 auto;
}

.form-card h2 {
    text-align: center;
    margin-bottom: var(--space-xl);
    font-size: var(--font-xl);
}

/* =====================================================
   ALERTAS
   ===================================================== */

.alert {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    font-size: var(--font-sm);
    margin-bottom: var(--space-lg);
}

.alert-success {
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.alert-error {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.alert-warning {
    background: var(--warning-bg);
    color: var(--warning);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.alert-info {
    background: var(--info-bg);
    color: var(--info);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

/* =====================================================
   TABS
   ===================================================== */

.tabs {
    display: flex;
    gap: var(--space-xs);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-lg);
    overflow-x: auto;
}

.tab-btn {
    padding: var(--space-md) var(--space-lg);
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.tab-btn:hover {
    color: var(--text-secondary);
}

.tab-btn.active {
    color: var(--green);
    border-bottom-color: var(--green);
}

/* =====================================================
   FILTROS
   ===================================================== */

.filters-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: var(--space-xs) var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-size: var(--font-xs);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.filter-chip:hover,
.filter-chip.active {
    background: var(--green-glow);
    border-color: var(--green);
    color: var(--green);
}

/* =====================================================
   LIVE BADGE
   ===================================================== */

.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(239, 68, 68, 0.15);
    color: var(--live);
    font-size: var(--font-xs);
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.live-dot {
    width: 6px;
    height: 6px;
    background: var(--live);
    border-radius: 50%;
    display: inline-block;
    animation: pulse-live 1.5s infinite;
}

.match-card.live {
    border-color: rgba(239, 68, 68, 0.35);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6), 0 0 20px rgba(239, 68, 68, 0.08);
}

.match-card.live:hover {
    border-color: rgba(239, 68, 68, 0.5);
    box-shadow: 0 8px 40px rgba(239, 68, 68, 0.1);
}

.match-card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.match-card-body .team {
    flex: 1;
    text-align: center;
}

.match-league {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

/* =====================================================
   UPCOMING CARD
   ===================================================== */

.upcoming-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: linear-gradient(165deg, #1c1c1c 0%, #141414 40%, #1a1a1a 100%);
    border: 1px solid rgba(0, 232, 112, 0.12);
    border-radius: 14px;
    transition: transform 0.3s cubic-bezier(.22,.68,0,1.2), box-shadow 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
    margin-bottom: var(--space-sm);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.upcoming-card:hover {
    border-color: rgba(0, 232, 112, 0.3);
    transform: translateX(4px);
    box-shadow: 0 8px 40px rgba(0, 232, 112, 0.1), 0 0 0 1px rgba(0, 232, 112, 0.06);
}

.upcoming-teams {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.upcoming-team {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.upcoming-vs {
    font-size: var(--font-xs);
    color: var(--text-muted);
    font-weight: 400;
}

.upcoming-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.upcoming-date {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

.upcoming-time {
    font-size: var(--font-sm);
    font-weight: 700;
    color: var(--green);
}

/* Variante AO VIVO do card de "Criar Aposta" */
.upcoming-card--live {
    border-color: rgba(255, 60, 60, 0.35);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 0 0 1px rgba(255, 60, 60, 0.12);
}

.upcoming-card--live:hover {
    border-color: rgba(255, 60, 60, 0.55);
    box-shadow: 0 8px 40px rgba(255, 60, 60, 0.12);
}

.upcoming-score {
    font-size: var(--font-sm);
    font-weight: 800;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
    padding: 1px 8px;
    border-radius: 8px;
    min-width: 42px;
    text-align: center;
}

/* =====================================================
   ODDS CARD
   ===================================================== */

.odds-card {
    background: linear-gradient(165deg, #1c1c1c 0%, #141414 40%, #1a1a1a 100%);
    border: 1px solid rgba(0, 232, 112, 0.12);
    border-radius: 14px;
    padding: 0;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s cubic-bezier(.22,.68,0,1.2), box-shadow 0.3s ease, border-color 0.3s ease;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.odds-card:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: rgba(0, 232, 112, 0.3);
    box-shadow: 0 8px 40px rgba(0, 232, 112, 0.1), 0 0 0 1px rgba(0, 232, 112, 0.06);
}

.odds-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px 0;
}

.odds-league {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.odds-bookmaker {
    font-size: 10px;
    color: #00E870;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.odds-card-flags {
    font-size: 20px;
    line-height: 1;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}

.odds-card-teams {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    padding: 8px 14px 2px;
}

.odds-vs {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 400;
}

.odds-card-datetime {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    padding: 0 14px 12px;
}

.odds-card .match-card-odds {
    padding: 0 14px 14px;
}

/* =====================================================
   APOSTAS COMBINADAS
   ===================================================== */

/* =====================================================
   ODDS TURBINADAS — PREMIUM FUTURISTIC DESIGN
   ===================================================== */

.combined-section .section-header {
    align-items: center;
}

.combined-badge {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #000;
    font-size: 10px;
    font-weight: 900;
    padding: 5px 14px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.35), 0 0 32px rgba(255, 215, 0, 0.1);
    animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {
    0%, 100% { box-shadow: 0 0 16px rgba(255, 215, 0, 0.35), 0 0 32px rgba(255, 215, 0, 0.1); }
    50% { box-shadow: 0 0 24px rgba(255, 215, 0, 0.5), 0 0 48px rgba(255, 215, 0, 0.2); }
}

.combined-scroll {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px 2px 8px;
    scrollbar-width: none;
}

.combined-scroll::-webkit-scrollbar {
    display: none;
}

/* =====================================================
   REDESIGN v2 2026-07-15 — card COMPACTO premium.
   Timeline nas pernas (conector auto-alinhado) + meta
   (dia/hora + campeonato+país) + odds original→turbinada
   + botão full-width com seta SVG (Material Symbols é
   subconjunto e não traz arrow_forward). Root .combined-card
   e data-attrs preservados (binding do BetSlip).
   ===================================================== */
.combined-section { --tc-neon: #00E870; --tc-neon-soft: rgba(0, 232, 112, 0.5); }

/* ===========================================================
   TURBINADA EXCLUSIVA — CROSS-GAME (17/07)
   MESMO card, MESMO layout (classes tcard-*): aqui só troca a cor pra
   dourado e abre espaço pros dois confrontos. Nada de layout próprio —
   a 1ª tentativa teve classe de escudo própria e a imagem saiu gigante,
   porque o tamanho vem de regras ancoradas em .tbadge.
   =========================================================== */
.combined-card.is-cross {
    background:
        radial-gradient(120% 70% at 50% 0%, rgba(255,215,0,0.09) 0%, transparent 56%),
        linear-gradient(168deg, rgba(38,33,18,0.94) 0%, rgba(20,18,12,0.97) 48%, rgba(10,10,8,0.99) 100%);
    border-color: rgba(255,215,0,0.42);
    box-shadow:
        0 14px 34px -12px rgba(0,0,0,0.8),
        inset 0 1px 0 rgba(255,215,0,0.18);
}
.combined-card.is-cross:hover {
    border-color: rgba(255,215,0,0.7);
    box-shadow:
        0 18px 40px -12px rgba(0,0,0,0.85),
        0 0 22px -4px rgba(255,215,0,0.28),
        inset 0 1px 0 rgba(255,215,0,0.24);
}
/* O card inteiro é pintado por --tc-neon (definida no .combined-section).
   Trocar a variável repinta topo, raio, VS, LINHA das pernas, ponto e odd de
   uma vez — sem regra por elemento. */
.combined-card.is-cross {
    --tc-neon: #FFD700;
    --tc-neon-soft: rgba(255, 215, 0, 0.5);
}
.combined-card.is-cross .combined-card-glow { background: radial-gradient(60% 50% at 50% 0%, rgba(255,215,0,0.16), transparent 70%); }
.combined-card.is-cross .tcard-chip {
    color: var(--primary);
    background: rgba(255,215,0,0.10);
    border-color: rgba(255,215,0,0.30);
}
.combined-card.is-cross .tcard-leg:not(:last-child)::before {
    background: linear-gradient(180deg, var(--tc-neon), rgba(255,215,0,0.30));
}
.combined-card.is-cross .tcard-boostpill {
    color: #1A1403;
    background: linear-gradient(135deg, var(--primary) 0%, #FFEC4D 100%);
    border-color: transparent;
}
.combined-card.is-cross .tcard-cta {
    color: #1A1403;
    background: linear-gradient(135deg, var(--primary) 0%, #FFD84D 100%);
}
.combined-card.is-cross .tcard-cta .tcard-cta-arw { stroke: #1A1403; }

/* DOIS confrontos no mesmo card: o bloco de partida encolhe um pouco.
   NÃO mexer em .tcard-team — ele é o WRAPPER (coluna do grid), não o escudo.
   Dar tamanho a ele espreme a coluna e o escudo estoura pra fora. O escudo é
   .tbadge; o VS é .tcard-vs. */
/* Alturas apertadas: são 2 confrontos + 2 linhas de horário no mesmo card, e
   ele NÃO pode ficar mais alto que os verdes (a fileira toda cresce junto). */
.combined-card.is-cross .tcard-head { padding-top: 7px; padding-bottom: 2px; }
/* Pernas, odd, horários e campeonato ficam com o MESMO respiro do card verde —
   é o que se lê. O espaço vem dos escudos: são DOIS confrontos aqui, então eles
   encolhem pra o card não passar da altura dos verdes. */
/* ESCUDO SEM A BOLA PRETA (roxo e dourado) — 01/09/2026.
   O escudo vinha com dois fundos escuros por cima (o do .tbadge e o do
   .tbadge-img) mais 5px de respiro: num badge de 24px sobrava ~14px de escudo.
   Sem os fundos ele preenche os 26px e o time fica visivel de longe.
   `:has(.tbadge-img)` -> so quando HA imagem; sem escudo continua valendo o
   fundo, senao as iniciais ficam soltas no ar.
   `overflow/border-radius` ficam: e o que mantem BANDEIRA redonda. */
.combined-card.is-cross .tbadge { width: 26px; height: 26px; }
.combined-card.is-cross .tbadge:has(.tbadge-img) {
    background: none;
    border-color: transparent;
    box-shadow: none;
    /* SEM RECORTE: o `overflow:hidden` + `border-radius:50%` herdados desenhavam
       um circulo em volta da imagem — parecia moldura atras da bandeira. */
    overflow: visible;
    border-radius: 0;
    border: 0;
}
.combined-card.is-cross .tbadge-img {
    padding: 0;
    background: none;
    border-radius: 0;
}
/* AS INICIAIS SAO O PLANO B, e tem fundo proprio. Com o recorte redondo ele
   sumia atras do escudo; sem o recorte virava um QUADRADO colorido em volta da
   imagem. Some quando ha imagem — e volta sozinho se ela falhar, porque o
   `onerror` remove o <img> e o `:has` deixa de casar. */
.combined-card.is-cross .tbadge:has(.tbadge-img) .tbadge-mono { display: none; }

/* BANDEIRA DE PAIS: sem o circulo, `cover` (que estica e CORTA as laterais)
   deixaria a bandeira picada. `contain` mostra ela inteira, na proporcao certa. */
.combined-card.is-cross .tbadge-img--flag {
    object-fit: contain;
}
/* VS menor que o escudo — antes ficava 28px contra escudo de 26 e parecia gigante. */
.combined-card.is-cross .tcard-vs {
    width: 24px; height: 24px; font-size: 8px; border-radius: 6px;
    /* o fundo/borda do VS são verdes chumbados (não usam --tc-neon): dourar aqui */
    background: linear-gradient(150deg, rgba(255,215,0,0.16), rgba(255,215,0,0.02));
    border-color: rgba(255,215,0,0.30);
    box-shadow: inset 0 0 10px rgba(255,215,0,0.10);
}
/* Colunas FIXAS e iguais nas duas linhas: é isso que põe o × exatamente
   debaixo do VS. Só centralizar não alinha — o × andava com o tamanho do nome. */
.combined-card.is-cross .tcard-teams,
.combined-card.is-cross .tcard-match {
    display: grid; grid-template-columns: 1fr 24px 1fr;
    align-items: center; gap: 8px; padding-left: 14px; padding-right: 14px;
}
.combined-card.is-cross .tcard-teams { padding-top: 0; padding-bottom: 0; }
/* .tcard-legs: mesmo respiro do verde (2px em cima, 6px embaixo). Sem isto a
   primeira perna cola no confronto de cima. */
.combined-card.is-cross .tcard-legs { padding-top: 2px; padding-bottom: 6px; }
.combined-card.is-cross .tcard-match {
    font-size: 10px; padding-top: 0; padding-bottom: 2px; line-height: 1.15;
    white-space: normal; overflow: visible;
}
.combined-card.is-cross .tcard-match .tcard-x { margin: 0; text-align: center; }
.xcross-t {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    text-align: center;
}
.combined-card.is-cross .tcard-match + .tcard-teams { padding-top: 5px; }
/* Meta (horários + campeonato): mesmo bloco dos outros cards, só mais compacto —
   são DUAS linhas de horário aqui, uma por jogo. */
/* Meta: MESMO respiro do verde (gap 1px, padding 8px, line-height natural).
   Só o corpo é menor, porque aqui são DUAS linhas de horário em vez de uma. */
.combined-card.is-cross .tcard-when { font-size: 9px; font-weight: 600; }
.combined-card.is-cross .tcard-when .material-symbols-outlined { font-size: 11px; }
.combined-card.is-cross .tcard-league { font-size: 8px; }

.combined-card {
    flex: 0 0 232px;
    /* Altura PADRAO uniforme = card verde "APOSTA TOP" (280px). Verde e
       amarelo batem essa altura; o roxo tem min-height maior (destaque).
       .tcard-cta ja tem margin-top:auto -> respiro extra fica acima do botao. */
    min-height: 280px;
    scroll-snap-align: start;
    position: relative;
    display: flex; flex-direction: column;
    border-radius: 16px;
    padding: 0; cursor: pointer; overflow: hidden; isolation: isolate;
    background: linear-gradient(168deg, rgba(31,38,32,0.92) 0%, rgba(17,22,18,0.96) 46%, rgba(10,13,11,0.98) 100%);
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 12px 28px -12px rgba(0,0,0,0.72), inset 0 1px 0 rgba(255,255,255,0.05);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    transition: transform .34s cubic-bezier(.2,.7,0,1.25), box-shadow .34s ease, border-color .3s ease;
}
.combined-card::before {
    content:''; position:absolute; top:0; left:12%; right:12%; height:1.5px; z-index:3;
    background: linear-gradient(90deg, transparent, var(--tc-neon), transparent);
    filter: drop-shadow(0 0 6px var(--tc-neon));
}
.combined-card:hover {
    transform: translateY(-5px);
    border-color: rgba(0,232,112,0.42);
    box-shadow: 0 18px 40px -14px rgba(0,0,0,0.78), 0 0 0 1px rgba(0,232,112,0.16), 0 0 32px -8px rgba(0,232,112,0.34);
}
.combined-card:active { transform: translateY(-2px) scale(.99); }

.combined-card-glow {
    position:absolute; inset:-1px; z-index:0; pointer-events:none;
    background:
        radial-gradient(120% 60% at 50% -12%, rgba(0,232,112,0.11), transparent 60%),
        radial-gradient(85% 55% at 92% 112%, rgba(0,232,112,0.06), transparent 60%);
}
.combined-card > *:not(.combined-card-glow) { position: relative; z-index: 1; }

/* cabeçalho: chip + raio */
.tcard-head { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:10px 12px 4px; }
.tcard-chip {
    font-size:9px; font-weight:900; letter-spacing:.5px; text-transform:uppercase;
    color:#EAF6EE; white-space:nowrap;
    padding:3.5px 8px; border-radius:999px;
    background: rgba(255,255,255,0.055); border:1px solid rgba(255,255,255,0.09);
}
.tcard-bolt {
    font-size:17px; line-height:1; color:var(--tc-neon);
    filter: drop-shadow(0 0 6px var(--tc-neon-soft));
    animation: tc-bolt 1.8s ease-in-out infinite;
}
@keyframes tc-bolt {
    0%,100% { opacity:.82; filter: drop-shadow(0 0 5px var(--tc-neon-soft)); }
    50% { opacity:1; filter: drop-shadow(0 0 11px var(--tc-neon)); }
}

/* JOGO: escudos + VS central */
.tcard-teams {
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px;
    padding: 2px 14px 6px;
}
.tcard-team { display:flex; align-items:center; justify-content:center; min-width:0; }
.tcard-vs {
    display:inline-flex; align-items:center; justify-content:center;
    width:28px; height:28px; flex-shrink:0;
    font-size:9px; font-weight:900; letter-spacing:.5px; color:var(--tc-neon);
    border-radius:8px;
    background: linear-gradient(150deg, rgba(0,232,112,0.16), rgba(0,232,112,0.02));
    border:1px solid rgba(0,232,112,0.30);
    box-shadow: inset 0 0 10px rgba(0,232,112,0.10);
}
.tcard-vs > span { text-shadow: 0 0 8px var(--tc-neon-soft); }

/* legenda do confronto (nomes) */
.tcard-match {
    font-size:11px; font-weight:700; color:var(--text-primary); text-align:center;
    padding: 0 12px 8px; line-height:1.2;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tcard-match .tcard-x { color: var(--text-muted); font-weight:600; margin:0 2px; }

/* badge do time — escudo prioritário, bandeira p/ seleção, monograma no fim */
.tbadge, .tbadge-sm {
    position:relative; border-radius:50%; flex-shrink:0;
    display:inline-flex; align-items:center; justify-content:center; overflow:hidden;
    background: radial-gradient(circle at 30% 24%, #232a24, #12160f);
    border:1px solid rgba(255,255,255,0.10);
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.06), 0 3px 8px rgba(0,0,0,0.45);
}
.tbadge { width:40px; height:40px; }
.tbadge-sm { width:18px; height:18px; }
.tbadge-mono {
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-weight:800; letter-spacing:.2px; color:#E7F3EA;
    background: radial-gradient(circle at 32% 26%, hsl(var(--mh,150deg) 24% 27%), hsl(var(--mh,150deg) 32% 13%));
}
.tbadge .tbadge-mono { font-size:13px; }
.tbadge-sm .tbadge-mono { font-size:7.5px; }
.tbadge-img {
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:contain; padding:5px; background:#12160f;
}
.tbadge-sm .tbadge-img { padding:2px; }
.tbadge-img--flag { object-fit:cover; padding:0; }

/* Marca do time/atleta na tela do jogo. A sombra mora AQUI, e não no `style` inline:
   inline vence a folha de estilo e matava a re-inversão do tema branco, deixando a
   imagem NEGATIVA (cabelo/olho brancos). */
.mk-team { filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.mk-rosto { filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }

/* FOTO DE TENISTA: a fonte manda um recorte 500x500 de cabeca+tronco. Com o
   `object-fit:contain` acima ela entrava inteira no circulo e o rosto ficava com
   ~12px — o dono reclamou, com razao. O recorte no rosto e' feito no ARQUIVO (ver
   cron/tennis_photos_backfill.php); aqui so preenche o circulo. */
.tbadge-img[src*="/img/players-tn/"] {
    object-fit: cover;
    padding: 0;
    /* NAO usar background:none. A foto tem fundo TRANSPARENTE, e por baixo dela fica
       o disco das INICIAIS (.tbadge-mono) — que aparecia como um circulo colorido em
       volta do rosto. No tema branco a pagina e' invertida e esse disco vira um tom
       lavado, o "efeito branco estranho" que o dono viu. Mantendo o fundo do badge,
       a foto assenta num circulo limpo. */
}

/* CARD VERDE: escudo limpo, sem a bola escura atras (19/08, pedido do dono).
   No card cross o badge e 24px e o disco compoe; no verde ele e 40px e o disco
   vira uma bola preta grande. Aqui o escudo ocupa o circulo inteiro. */
.combined-card:not(.is-cross) .tbadge {
    background: none;
    border: 0;
    box-shadow: none;
    overflow: visible;
    border-radius: 0;
}
.combined-card:not(.is-cross) .tbadge .tbadge-img {
    background: none;
    padding: 0;
}
/* O disco das INICIAIS fica atras do escudo; sem o fundo do .tbadge-img ele
   aparecia por baixo do PNG transparente (circulo azulado no print de 19/08).
   Esconde por padrao; o onerror do <img> marca .sem-escudo e ele volta. */
.combined-card:not(.is-cross) .tbadge .tbadge-mono { display: none; }
.combined-card:not(.is-cross) .tbadge.sem-escudo .tbadge-mono {
    display: flex;
    border-radius: 50%;
}

/* MERCADO: pernas em timeline — conector ::before liga cada nó ao próximo */
.tcard-legs { display:flex; flex-direction:column; padding: 2px 12px 6px 14px; }
.tcard-leg { position:relative; display:flex; align-items:center; gap:9px; padding:3px 0; }
.tcard-leg:not(:last-child)::before {
    content:''; position:absolute; left:4px; top:50%; height:100%; width:2px; z-index:0;
    background: linear-gradient(180deg, var(--tc-neon), rgba(0,232,112,0.30));
}
.tcard-leg-dot {
    position:relative; z-index:1; flex-shrink:0; box-sizing:border-box;
    width:8px; height:8px; border-radius:50%;
    background:#101812; border:2px solid var(--tc-neon);
    box-shadow: 0 0 6px var(--tc-neon-soft);
}
.tcard-leg-text {
    flex:1; min-width:0; font-size:10.5px; line-height:1.2; color: rgba(240,245,241,0.74);
    white-space:normal; overflow:visible; overflow-wrap:anywhere;
}

/* ODDS: original riscada → turbinada em destaque + selo */
.tcard-oddrow { display:flex; align-items:baseline; gap:7px; padding: 4px 14px 6px; }
.tcard-odd-old {
    font-size:13px; font-weight:700; color: rgba(255,255,255,0.30);
    text-decoration: line-through; font-variant-numeric: tabular-nums;
}
.tcard-odd-arw { font-size:13px; color: rgba(255,255,255,0.28); font-weight:900; }
.tcard-odd-new {
    font-size:27px; font-weight:900; line-height:.9; color:var(--tc-neon);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 14px rgba(0,232,112,0.45), 0 0 30px rgba(0,232,112,0.18);
}
.tcard-boostpill {
    align-self:center; margin-left:auto;
    font-size:8px; font-weight:800; letter-spacing:.7px; text-transform:uppercase;
    color:#06210f; padding:2.5px 7px; border-radius:999px;
    background: linear-gradient(135deg,#00E870,#00C261);
    box-shadow: 0 2px 8px -2px rgba(0,232,112,0.5);
}

/* META: dia/hora + campeonato+país */
.tcard-meta { display:flex; flex-direction:column; gap:1px; padding: 0 14px 8px; }
.tcard-when {
    display:inline-flex; align-items:center; gap:4px;
    font-size:10px; font-weight:700; color: rgba(240,245,241,0.82);
}
.tcard-when .material-symbols-outlined { font-size:12px; color: var(--text-muted); }
.tcard-league {
    font-size:9px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
    color: var(--text-muted);
    white-space:normal; overflow-wrap:anywhere; line-height:1.25;
}

/* BOTÃO Apostar — barra full-width, seta SVG */
.tcard-cta {
    margin-top:auto;
    display:flex; align-items:center; justify-content:center; gap:5px;
    font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.4px;
    color:#06210f;
    padding:9px 12px;
    background: linear-gradient(135deg,#00E870,#00C261);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
    transition: filter .2s ease;
}
.tcard-cta-arw { display:block; transition: transform .2s ease; }
.combined-card:hover .tcard-cta { filter: brightness(1.07); }
.combined-card:hover .tcard-cta-arw { transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
    .combined-card, .tcard-bolt, .tcard-cta, .tcard-cta-arw { transition:none; animation:none; }
}

/* =====================================================
   AUTENTICAÇÃO
   ===================================================== */

.auth-page {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: calc(100vh - var(--header-height) - 80px);
    padding: var(--space-xl) var(--space-md);
}

.auth-card {
    width: 100%;
    max-width: 440px;
    background: linear-gradient(180deg, #1c1c1c 0%, #141414 100%);
    border: 1px solid rgba(0, 232, 112, 0.12);
    border-radius: 16px;
    padding: var(--space-2xl);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.auth-card.profile-card {
    max-width: 520px;
}

.auth-logo {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.auth-logo img {
    height: 64px;
}

.auth-title {
    text-align: center;
    font-size: var(--font-xl);
    font-weight: 800;
    color: #fff;
    margin-bottom: 4px;
}

.auth-subtitle {
    text-align: center;
    color: var(--text-muted);
    font-size: var(--font-sm);
    margin-bottom: var(--space-xl);
}

.auth-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: var(--font-sm);
    margin-bottom: var(--space-lg);
}

.auth-alert .material-symbols-outlined {
    font-size: 18px;
    flex-shrink: 0;
}

.auth-alert-error {
    background: rgba(255, 68, 68, 0.1);
    border: 1px solid rgba(255, 68, 68, 0.25);
    color: #ff6b6b;
}

.auth-alert-success {
    background: rgba(0, 232, 112, 0.08);
    border: 1px solid rgba(0, 232, 112, 0.2);
    color: #00E870;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-sm);
    color: var(--text-secondary);
    font-weight: 500;
}

.form-group label .material-symbols-outlined {
    font-size: 16px;
    color: #00E870;
}

.form-group label .optional {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 11px;
}

.form-group input {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #fff;
    font-size: var(--font-base);
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.form-group input::placeholder {
    color: rgba(255, 255, 255, 0.25);
}

.form-group input:focus {
    outline: none;
    border-color: #00E870;
    box-shadow: 0 0 0 3px rgba(0, 232, 112, 0.12);
}

.form-group input.input-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

.password-wrapper {
    position: relative;
}

.password-wrapper input {
    padding-right: 44px;
}

.password-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    display: flex;
}

.password-toggle .material-symbols-outlined {
    font-size: 20px;
}

.password-toggle:hover {
    color: #00E870;
}

.password-strength {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    min-height: 16px;
}

.strength-bar {
    flex: 1;
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
}

.strength-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s, background 0.3s;
}

.btn-full {
    width: 100%;
    justify-content: center;
    padding: 14px;
    font-size: var(--font-base);
    font-weight: 700;
    margin-top: var(--space-sm);
}

.auth-footer {
    text-align: center;
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.auth-footer p {
    color: var(--text-muted);
    font-size: var(--font-sm);
}

.auth-footer a {
    color: #00E870;
    text-decoration: none;
    font-weight: 600;
}

.auth-footer a:hover {
    text-decoration: underline;
}

/* Register Modal Overlay */
.register-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.register-overlay.active,
.login-overlay.active {
    opacity: 1;
    visibility: visible;
}

.login-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.login-overlay .register-modal {
    transform: translateY(16px) scale(0.96);
}

.login-overlay.active .register-modal {
    transform: translateY(0) scale(1);
}

.login-logo {
    display: flex;
    justify-content: center;
    padding: 24px 0 8px;
}

.login-logo img {
    height: 80px;
    width: auto;
    display: block;
}

.register-modal {
    width: 88%;
    max-width: 360px;
    max-height: 90vh;
    overflow-y: auto;
    background: linear-gradient(180deg, #1a1a1a 0%, #111 100%);
    border: 1px solid rgba(0, 232, 112, 0.12);
    border-radius: 16px;
    padding: 0 20px 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 30px rgba(0, 232, 112, 0.05);
    position: relative;
    transform: translateY(16px) scale(0.96);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.register-overlay.active .register-modal {
    transform: translateY(0) scale(1);
}

.register-banner {
    text-align: center;
    margin: 16px 0 6px;        /* respeita a margem do card (padding 20px) + inset do topo */
    border-radius: 12px;       /* arredondado igual aos outros elementos */
    overflow: hidden;
}

.register-banner img {
    width: 100%;
    display: block;
}

.register-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.3);
    transition: background 0.2s, color 0.2s;
}

.register-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.register-close .material-symbols-outlined {
    font-size: 18px;
}

.register-modal .auth-title,
.register-modal .auth-subtitle {
    display: none;
}

.register-modal .auth-form {
    margin-top: 4px;
}

.register-modal .auth-form {
    gap: 4px;
}

.register-modal .form-group {
    gap: 2px;
}

.register-modal .form-group label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.4);
    gap: 4px;
}

.register-modal .form-group label .material-symbols-outlined {
    font-size: 13px;
}

.register-modal .form-group input {
    padding: 9px 12px;
    font-size: 13px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.register-modal .form-group input:focus {
    border-color: #00ff7f;
    box-shadow: 0 0 0 2px rgba(0, 255, 127, 0.1);
}

.register-modal .btn-full {
    margin-top: 4px;
    padding: 11px;
    font-size: 14px;
    border-radius: 10px;
    background: #00e85e;
    color: #000;
    font-weight: 800;
    border: none;
    box-shadow: 0 0 20px rgba(0, 232, 94, 0.3);
    animation: btn-pulse 2s ease-in-out infinite;
}

.register-modal .btn-full:hover {
    background: #00ff6a;
    box-shadow: 0 0 28px rgba(0, 255, 106, 0.45);
}

@keyframes btn-pulse {
    0%, 100% { box-shadow: 0 0 16px rgba(0, 232, 94, 0.25); }
    50% { box-shadow: 0 0 28px rgba(0, 232, 94, 0.5), 0 0 6px rgba(0, 232, 94, 0.2); }
}

.register-modal .auth-footer {
    margin-top: 10px;
    padding-top: 10px;
}

.register-modal .auth-footer p {
    font-size: 12px;
}

.register-modal .auth-alert {
    padding: 8px 12px;
    font-size: 12px;
    border-radius: 8px;
    margin-bottom: 10px;
}

.register-modal .password-toggle .material-symbols-outlined {
    font-size: 18px;
}

.register-modal::-webkit-scrollbar {
    width: 3px;
}

.register-modal::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
}

@keyframes spin {
    100% { transform: rotate(360deg); }
}

.spin {
    animation: spin 1s linear infinite;
}

.form-section-title {
    font-size: var(--font-sm);
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: var(--space-md);
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Profile Header */
.profile-header {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(0, 232, 112, 0.1);
    border: 2px solid rgba(0, 232, 112, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-md);
}

.profile-avatar .material-symbols-outlined {
    font-size: 36px;
    color: #00E870;
}

.profile-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 8px;
}

.profile-badge .material-symbols-outlined {
    font-size: 14px;
    color: #00E870;
}

.profile-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.profile-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(0, 232, 112, 0.04);
    border: 1px solid rgba(0, 232, 112, 0.1);
    border-radius: 12px;
}

.profile-stat .material-symbols-outlined {
    font-size: 24px;
    color: #00E870;
}

.profile-stat strong {
    display: block;
    color: #fff;
    font-size: var(--font-base);
    font-weight: 700;
}

.profile-stat small {
    color: var(--text-muted);
    font-size: 11px;
}

/* Spinner animation */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.spin {
    animation: spin 1s linear infinite;
}

@media (max-width: 480px) {
    .auth-card {
        padding: var(--space-lg);
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .profile-stats {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   MINHAS APOSTAS
   ===================================================== */

.bets-tabs {
    display: flex;
    gap: 6px;
    padding: 0 0 16px;
    overflow-x: auto;
    scrollbar-width: none;
}

.bets-tabs::-webkit-scrollbar { display: none; }

.bets-tab {
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: #aaa;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.bets-tab.active {
    background: #00e870;
    color: #000;
    border-color: #00e870;
}

.my-bet-card {
    background: linear-gradient(145deg, #1e1e1e, #161616);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.my-bet-card:hover {
    border-color: rgba(0,232,112,0.3);
}

.my-bet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.my-bet-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.my-bet-status .material-symbols-outlined {
    font-size: 16px;
}

.my-bet-status.active {
    background: rgba(255,193,7,0.15);
    color: #ffc107;
}

.my-bet-status.won {
    background: rgba(0,232,112,0.15);
    color: #00e870;
}

.my-bet-status.lost {
    background: rgba(244,67,54,0.15);
    color: #f44336;
}

.my-bet-status.cashout {
    background: rgba(33,150,243,0.15);
    color: #2196f3;
}

.my-bet-status.void {
    background: rgba(234,179,8,0.15);
    color: #eab308;
}

.my-bet-date {
    font-size: 11px;
    color: #666;
}

.my-bet-body {
    margin-bottom: 10px;
}

.my-bet-type {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 6px;
}

.my-bet-selection {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 0;
    border-top: 1px solid rgba(255,255,255,0.04);
}

.my-bet-market {
    font-size: 11px;
    color: #888;
    font-weight: 500;
}

.my-bet-selection-name {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

.my-bet-leg {
    font-size: 12px;
    font-weight: 600;
    color: #e0e0e0;
    display: block;
    padding-left: 2px;
}

.my-bet-match-name {
    font-size: 11px;
    color: #666;
}

/* Turbinada de DOIS jogos: um por linha (span inline vira bloco pro <br>
   ficar previsivel dentro do .my-bet-selection). */
.my-bet-match-name.is-multi {
    display: block;
    line-height: 1.35;
}

.my-bet-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.my-bet-stake,
.my-bet-return {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.my-bet-stake span,
.my-bet-return span {
    font-size: 10px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.my-bet-stake strong {
    font-size: 14px;
    color: #fff;
}

.my-bet-return strong {
    font-size: 14px;
}

.my-bet-return.active strong { color: #ffc107; }
.my-bet-return.won strong { color: #00e870; }
.my-bet-return.lost strong { color: #f44336; }
.my-bet-return.cashout strong { color: #2196f3; }

.my-bet-pick-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.stepper-check {
    font-size: 14px;
    color: #00e870;
    flex-shrink: 0;
}

.stepper-lost-icon {
    font-size: 14px;
    color: #f44336;
    flex-shrink: 0;
}

.stepper-dot.won {
    background: #00e870;
    box-shadow: 0 0 8px rgba(0, 232, 112, 0.7);
}

.stepper-dot.lost {
    background: #f44336;
    box-shadow: 0 0 8px rgba(244, 67, 54, 0.5);
}

.my-bet-cashout {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    margin: 0 0 10px;
    background: rgba(33, 150, 243, 0.1);
    border: 1px solid rgba(33, 150, 243, 0.25);
    border-radius: 8px;
    font-size: 12px;
    color: #64b5f6;
}

.my-bet-cashout .material-symbols-outlined {
    font-size: 18px;
    color: #2196f3;
}

.my-bet-cashout strong {
    margin-left: auto;
    font-size: 14px;
    color: #2196f3;
}

.bet-detail-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.bet-detail-overlay.active {
    opacity: 1;
    visibility: visible;
}

.bet-detail-modal {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px; /* distância uniforme entre todos os cards/botões */
    width: 92%;
    max-width: 400px;
    max-height: calc(100dvh - 20px);
    overflow-y: auto;
    background: linear-gradient(160deg, #1c1c1c, #141414);
    border: 1px solid rgba(0,232,112,0.15);
    border-radius: 16px;
    padding: 14px; /* mesma distância das margens laterais para todos */
}

/* =====================================================
   Modal de compartilhamento (bottom sheet)
   ===================================================== */
.share-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s;
}
.share-overlay.active { opacity: 1; visibility: visible; }

.share-sheet {
    width: 100%;
    max-width: 480px;
    background: linear-gradient(180deg, #1e1e1e, #151515);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: none;
    border-radius: 20px 20px 0 0;
    padding: 10px 18px calc(18px + env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.share-overlay.active .share-sheet { transform: translateY(0); }

.share-grabber {
    width: 40px; height: 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.2);
    margin: 4px auto 12px;
}
.share-title {
    font-size: 16px; font-weight: 700;
    color: #fff; text-align: center;
    margin-bottom: 3px;
}
.share-subtitle {
    font-size: 12.5px; font-weight: 600;
    color: #00E870; text-align: center;
    margin-bottom: 18px;
}
.share-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px 8px;
    margin-bottom: 18px;
}
.share-opt {
    background: none; border: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    padding: 0;
}
.share-ico {
    width: 56px; height: 56px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    transition: transform 0.15s ease;
}
.share-opt:active .share-ico { transform: scale(0.92); }
.share-ico svg { width: 27px; height: 27px; }
.share-ico-txt { font-size: 25px; font-weight: 800; line-height: 1; color: #fff; }
.share-ico-ig {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.share-opt-name { font-size: 11px; color: rgba(255, 255, 255, 0.75); }

.share-link-row { display: flex; gap: 8px; margin-bottom: 12px; }
.share-link-input {
    flex: 1; min-width: 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px 12px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
}
.share-link-copy {
    background: rgba(0, 232, 112, 0.14);
    border: 1px solid rgba(0, 232, 112, 0.3);
    color: #00E870;
    border-radius: 10px;
    padding: 0 18px;
    font-weight: 700; font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}
.share-cancel {
    width: 100%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 12px;
    padding: 13px;
    font-weight: 600; font-size: 14px;
    cursor: pointer;
}

/* =====================================================
   CASH OUT - Ticket Section
   ===================================================== */

.ticket-cashout-section {
    padding: 0; /* alinha o aviso e o botão com os demais cards */
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ticket-cashout-info {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: rgba(255, 193, 7, 0.08);
    border: 1px solid rgba(255, 193, 7, 0.15);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 11px;
    color: #ffc107;
    line-height: 1.4;
}

.ticket-cashout-info .material-symbols-outlined {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

.ticket-cashout-confirm-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    align-items: center;
}

.ticket-cashout-confirm-text {
    font-size: 13px;
    font-weight: 600;
}

.ticket-cashout-confirm-btns {
    display: flex;
    gap: 10px;
    width: 100%;
}

.ticket-cashout-yes,
.ticket-cashout-no {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.ticket-cashout-yes {
    background: var(--primary);
    color: #111;
}

.ticket-cashout-yes:hover {
    background: #00ff7f;
}

.ticket-cashout-no {
    background: rgba(255,255,255,0.08);
    color: #ccc;
    border: 1px solid rgba(255,255,255,0.1);
}

.ticket-cashout-no:hover {
    background: rgba(255,255,255,0.15);
}

.ticket-cashout-yes .material-symbols-outlined,
.ticket-cashout-no .material-symbols-outlined {
    font-size: 16px;
}

/* Spinning animation */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spinning {
    animation: spin 1s linear infinite;
}

/* Bets loading state */
.bets-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: #aaa;
    font-size: 14px;
}

/* Link "Esqueci minha senha" */
.forgot-password-row { text-align: right; margin: -6px 0 14px; }
.forgot-password-link {
    font-size: 13px;
    color: var(--text-muted, #999);
    text-decoration: none;
    transition: color 0.2s;
}
.forgot-password-link:hover { color: var(--green-neon, #00E870); text-decoration: underline; }

/* Atalho Afiliado no perfil */
.profile-shortcut {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(0,232,112,0.10), rgba(0,232,112,0.03));
    border: 1px solid rgba(0,232,112,0.2);
    text-decoration: none;
    color: inherit;
    transition: all 0.2s;
}
.profile-shortcut:hover { border-color: rgba(0,232,112,0.45); transform: translateY(-1px); }
.profile-shortcut > .material-symbols-outlined { color: var(--green-neon, #00E870); font-size: 26px; }
.profile-shortcut-text { flex: 1; display: flex; flex-direction: column; }
.profile-shortcut-text strong { font-size: 14px; color: #fff; }
.profile-shortcut-text small { font-size: 12px; color: var(--text-muted, #999); }
.profile-shortcut-arrow { color: var(--text-muted, #777); font-size: 20px; }

/* Página Afiliado - em breve */
.affiliate-soon {
    text-align: center;
    padding: 24px 16px;
    margin-bottom: 18px;
    border-radius: 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
}
.affiliate-soon .material-symbols-outlined { font-size: 44px; color: var(--green-neon, #00E870); }
.affiliate-soon h3 { font-size: 18px; color: #fff; margin: 8px 0 6px; }
.affiliate-soon p { font-size: 13px; color: var(--text-muted, #aaa); line-height: 1.5; }

/* Bandeiras como imagem (renderiza igual em todo dispositivo, inclusive Windows) */
.team-flag {
    height: 1em;
    width: 1.5em;            /* largura fixa = todas as bandeiras do mesmo tamanho */
    vertical-align: middle;  /* alinhamento em contextos inline */
    border-radius: 2px;
    object-fit: cover;       /* recorta p/ encaixar sem distorcer */
    display: inline-block;
    box-shadow: 0 0 1px rgba(0,0,0,.3);
}
.team-flag--none { box-shadow: none; width: auto; }
.team-flag + .team-flag { margin-left: 3px; }

/* Progressão ao vivo da aposta (Minhas Apostas) */
/* Etiqueta de status ao vivo — minimalista: texto + ponto, fundo bem sutil. */
.my-bet-progress {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 8px; border-radius: 6px;
    font-size: 11px; font-weight: 500; line-height: 1.25;
}
.my-bet-progress .prog-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.prog-won      { color:#3ddc84; background:rgba(0,232,112,.10); }
.prog-won .prog-dot      { background:#00e870; }
.prog-winning  { color:#3ddc84; background:rgba(0,232,112,.08); }
.prog-winning .prog-dot  { background:#00e870; animation:progPulse 1.6s infinite; }
.prog-losing   { color:#f0967a; background:rgba(239,68,68,.09); }
.prog-losing .prog-dot   { background:#ef6b4d; animation:progPulse 1.6s infinite; }
.prog-push     { color:#eab308; background:rgba(234,179,8,.11); }
.prog-push .prog-dot     { background:#eab308; animation:progPulse 1.6s infinite; }
.prog-lost     { color:#f28b8b; background:rgba(239,68,68,.07); }
.prog-lost .prog-dot     { background:#ef4444; }
.prog-pending  { color:#8b97a3; background:rgba(255,255,255,.04); }
.prog-pending .prog-dot  { background:#8b97a3; }
.prog-void     { color:#94a3b8; background:rgba(148,163,184,.07); }
.prog-void .prog-dot     { background:#94a3b8; }
@keyframes progPulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* Selo de SUBSTITUIÇÃO do jogador apostado — chip âmbar discreto. */
.my-bet-sub-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 8px; border-radius: 6px;
    font-size: 10px; font-weight: 700; letter-spacing: .3px; line-height: 1.1;
    color: #f0b64b; background: rgba(245,158,11,.10);
    text-transform: uppercase; vertical-align: middle;
}
.my-bet-sub-badge .material-symbols-outlined { font-size: 13px; }

/* Progresso ao vivo: etiqueta + selo + barra, empilhados. */
.live-prog-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    margin-top: 6px;
    width: 100%;
}

/* Barra de progresso AO VIVO — minimalista e moderna: fina, verde, com brilho
   sutil; a largura desliza suave conforme o placar/estatística sobe em tempo
   real. Ex.: "Mais de 2.5 gols". */
.live-bar {
    position: relative;
    width: 100%;
    max-width: 240px;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
.live-bar-fill {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    border-radius: 3px;
    background: linear-gradient(90deg, #00c766, #00e870);
    box-shadow: 0 0 6px rgba(0, 232, 112, 0.45);
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.live-bar.done .live-bar-fill {
    background: #00e870;
    box-shadow: 0 0 8px rgba(0, 232, 112, 0.7);
}
@media (prefers-reduced-motion: reduce) {
    .live-bar-fill { transition: none; }
}

/* Aviso: mercado sem Cash Out (liquida só no fim da partida). */
.ticket-no-cashout {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: var(--radius-lg);
    background: rgba(100, 116, 139, 0.10);
    border: 1px solid rgba(100, 116, 139, 0.28);
    color: #94a3b8;
    font-size: 12.5px;
    line-height: 1.35;
}
.ticket-no-cashout .material-symbols-outlined { font-size: 18px; flex-shrink: 0; }

/* PAUSA MOMENTANEA (gol, lance perigoso, intervalo) — ambar e com o icone
   pulsando de leve, para ler como "espera um pouco" e nao como "acabou".
   O cinza continua valendo para o que nao volta mais. */
.ticket-no-cashout.pausado {
    background: rgba(245, 158, 11, 0.10);
    border-color: rgba(245, 158, 11, 0.32);
    color: #fbbf24;
}
.ticket-no-cashout.pausado .material-symbols-outlined {
    animation: cashoutPausaPulse 1.6s ease-in-out infinite;
}
@keyframes cashoutPausaPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .45; }
}
/* contagem regressiva: encostada a direita, tabular pra nao "pular" a cada segundo */
.ticket-cashout-countdown {
    margin-left: auto;
    flex-shrink: 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
}
@media (prefers-reduced-motion: reduce) {
    .ticket-no-cashout.pausado .material-symbols-outlined { animation: none; }
}
.my-bet-sub-badge.stepper-sub { display: inline-flex; margin-left: 8px; }

/* ============================================================
   VISUAL FUTURISTA — Minhas Apostas + Bilhete (inspiração: Odds Turbinada)
   + correção de contraste dos textos cinzas
   ============================================================ */

/* ---- Cartão de aposta (lista) ---- */
.my-bet-card {
    background: linear-gradient(165deg, #1d1d1d 0%, #131313 45%, #1a1a1a 100%) !important;
    border: 1px solid rgba(0,232,112,.14) !important;
    border-radius: 14px !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 22px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
    transition: transform .3s cubic-bezier(.22,.68,0,1.2), box-shadow .3s, border-color .3s;
}
.my-bet-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, #00E870, #00C261, transparent);
    opacity: .75;
}
.my-bet-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0,232,112,.38) !important;
    box-shadow: 0 12px 40px rgba(0,232,112,.10), 0 0 0 1px rgba(0,232,112,.08);
}

/* ---- Contraste dos textos (antes apagados) ---- */
.my-bet-market        { color: #b3c0c9 !important; font-weight: 600; letter-spacing: .4px; }
.my-bet-type          { color: #b3c0c9 !important; }
.my-bet-selection-name{ color: #ffffff !important; font-size: 14px; }
.my-bet-leg           { color: #e8edf0 !important; }
.my-bet-match-name    { color: #93a1ab !important; }
.my-bet-date          { color: #93a1ab !important; }
.my-bet-stake span, .my-bet-return span { color: #9aa7b0 !important; }
.my-bet-stake strong  { color: #ffffff !important; }
.my-bet-selection     { border-top-color: rgba(0,232,112,.08) !important; }
.my-bet-footer        { border-top-color: rgba(255,255,255,.08) !important; }

/* ---- Cash Out em destaque (verde, ação principal) ---- */
.my-bet-cashout {
    background: linear-gradient(135deg, rgba(0,232,112,.12), rgba(0,194,97,.06)) !important;
    border: 1px solid rgba(0,232,112,.30) !important;
    color: #6ff2b0 !important;
}
.my-bet-cashout .material-symbols-outlined,
.my-bet-cashout strong { color: #00E870 !important; }

/* ---- Abas (filtros) ---- */
.bets-tab.active {
    background: linear-gradient(135deg, #00E870, #00C853) !important;
    color: #04150c !important; border-color: transparent !important;
    box-shadow: 0 0 14px rgba(0,232,112,.25);
}

/* ---- Bilhete (modal) ---- */
.ticket-bet-card {
    background: linear-gradient(165deg, rgba(0,232,112,.05) 0%, rgba(255,255,255,.012) 45%) !important;
    border: 1px solid rgba(0,232,112,.16) !important;
    border-left: 3px solid rgba(0,232,112,.55) !important;
    border-radius: 12px !important;
}
.ticket-bet-title     { color: #b3c0c9 !important; font-weight: 600 !important; }
.ticket-bet-pick      { color: #ffffff !important; }
.ticket-bet-match span{ color: #93a1ab !important; }
.ticket-status-sub    { color: #93a1ab !important; }
.ticket-summary-line span { color: #9aa7b0 !important; }
.ticket-bet-stake span    { color: #9aa7b0 !important; }

/* ===========================================================
   TURBINADA ROXA — variante de COR do card cross-game (23/07).
   MESMO layout do .is-cross; só troca o dourado por roxo via --tc-neon +
   overrides pontuais. Seletor .is-cross.is-purple (4 classes) vence o
   .is-cross por especificidade, então funciona independente da ordem.
   =========================================================== */
.combined-card.is-cross.is-purple {
    background:
        radial-gradient(120% 70% at 50% 0%, rgba(168,85,247,0.12) 0%, transparent 56%),
        linear-gradient(168deg, rgba(30,20,44,0.94) 0%, rgba(18,14,26,0.97) 48%, rgba(10,8,14,0.99) 100%);
    border-color: rgba(168,85,247,0.46);
    box-shadow:
        0 14px 34px -12px rgba(0,0,0,0.8),
        inset 0 1px 0 rgba(168,85,247,0.20);
    /* repinta topo, raio, VS, LINHA das pernas, ponto e odd de uma vez */
    --tc-neon: #C084FC;
    --tc-neon-soft: rgba(168,85,247,0.5);
    /* ROXO = card destaque "do dia": maior que o padrao 280 dos demais. */
    min-height: 320px;
}
.combined-card.is-cross.is-purple:hover {
    border-color: rgba(168,85,247,0.75);
    box-shadow:
        0 18px 40px -12px rgba(0,0,0,0.85),
        0 0 22px -4px rgba(168,85,247,0.30),
        inset 0 1px 0 rgba(168,85,247,0.26);
}
.combined-card.is-cross.is-purple .combined-card-glow {
    background: radial-gradient(60% 50% at 50% 0%, rgba(168,85,247,0.18), transparent 70%);
}
.combined-card.is-cross.is-purple .tcard-chip {
    color: #E9D5FF;
    background: rgba(168,85,247,0.12);
    border-color: rgba(168,85,247,0.34);
}
.combined-card.is-cross.is-purple .tcard-leg:not(:last-child)::before {
    background: linear-gradient(180deg, var(--tc-neon), rgba(168,85,247,0.30));
}
.combined-card.is-cross.is-purple .tcard-boostpill {
    color: #fff;
    background: linear-gradient(135deg, #A855F7 0%, #C77DFF 100%);
    border-color: transparent;
}
.combined-card.is-cross.is-purple .tcard-cta {
    color: #fff;
    background: linear-gradient(135deg, #A855F7 0%, #7C3AED 100%);
}
.combined-card.is-cross.is-purple .tcard-cta .tcard-cta-arw { stroke: #fff; }
.combined-card.is-cross.is-purple .tcard-vs {
    background: linear-gradient(150deg, rgba(168,85,247,0.18), rgba(168,85,247,0.02));
    border-color: rgba(168,85,247,0.32);
    box-shadow: inset 0 0 10px rgba(168,85,247,0.12);
}

/* Carrossel de turbinadas: cards com ALTURA NATURAL (não esticar todos pra
   altura do mais alto). Sem isso, um card cross-game de 3 jogos (mais alto)
   obrigava os de 2 jogos a esticar, deixando um vão vazio no meio (23/07). */
.combined-scroll { align-items: flex-start; }

/* ===== Perfil modal — glass/neon + animacao suave abrir/fechar [10/08 v3] ===== */
.pm-overlay {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    padding: 30px 24px;
    background:
        radial-gradient(135% 90% at 50% -8%, rgba(0,232,112,0.14), transparent 55%),
        rgba(5,9,7,0.80);
    -webkit-backdrop-filter: blur(12px) saturate(115%);
    backdrop-filter: blur(12px) saturate(115%);
    /* fechado: invisivel e sem captura de clique, mas SEM display:none pra animar */
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .30s ease, visibility 0s linear .30s;
}
.pm-overlay.active {
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity .30s ease, visibility 0s linear 0s;
}
.pm-card {
    position: relative; width: 100%; max-width: 330px;
    max-height: calc(100vh - 60px); max-height: calc(100dvh - 60px);
    overflow-y: auto;
    padding: 28px 20px 20px;
    border-radius: 22px;
    background: linear-gradient(168deg, rgba(23,31,26,0.94), rgba(9,13,11,0.96));
    border: 1px solid rgba(0,232,112,0.20);
    box-shadow: 0 30px 80px rgba(0,0,0,0.62), 0 0 44px rgba(0,232,112,0.07), inset 0 1px 0 rgba(255,255,255,0.05);
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    /* entrada: sobe + cresce suavemente (easeOutExpo) */
    opacity: 0; transform: translateY(28px) scale(.93);
    transition: transform .40s cubic-bezier(.16, 1, .3, 1), opacity .30s ease;
}
.pm-overlay.active .pm-card { opacity: 1; transform: none; }
.pm-card::before {
    content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,232,112,0.6), transparent);
}
.pm-close {
    position: absolute; top: 13px; right: 13px; z-index: 3;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.09);
    color: rgba(255,255,255,.55); display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .18s, color .18s;
}
.pm-close:hover { background: rgba(255,255,255,0.14); color: #fff; }
.pm-close .material-symbols-outlined { font-size: 20px; }

.pm-head { text-align: center; margin-bottom: 18px; }
.pm-avatar {
    width: 66px; height: 66px; margin: 0 auto 12px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 32%, rgba(0,232,112,0.24), rgba(0,232,112,0.05));
    border: 1.5px solid rgba(0,232,112,0.5);
    box-shadow: 0 0 24px rgba(0,232,112,0.18), inset 0 0 14px rgba(0,232,112,0.10);
}
.pm-avatar .material-symbols-outlined { font-size: 34px; color: #00E870; }
.pm-name { font-size: 19px; font-weight: 800; color: #fff; letter-spacing: -.01em; line-height: 1.2; }
.pm-phone { font-size: 12.5px; color: rgba(255,255,255,.48); margin-top: 3px; }

.pm-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.pm-stat {
    padding: 14px 13px 13px; border-radius: 15px;
    background: linear-gradient(158deg, rgba(0,232,112,0.09), rgba(255,255,255,0.02));
    border: 1px solid rgba(0,232,112,0.16);
}
.pm-stat-ic { font-size: 18px; color: #00E870; opacity: .9; }
.pm-stat-v { font-size: 19px; font-weight: 800; color: #fff; margin-top: 5px; letter-spacing: -.02em; line-height: 1.1; }
.pm-stat-l { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: rgba(255,255,255,.42); margin-top: 2px; }

.pm-links { display: flex; flex-direction: column; gap: 10px; }
.pm-link {
    display: flex; align-items: center; gap: 12px; padding: 14px 14px; border-radius: 15px;
    background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.06);
    text-decoration: none; transition: border-color .18s, background .18s, transform .18s;
}
.pm-link:active, .pm-link:hover { border-color: rgba(0,232,112,0.42); background: rgba(0,232,112,0.06); transform: translateY(-1px); }
.pm-link-ic { font-size: 22px; color: #00E870; }
.pm-link-t { flex: 1; font-size: 13.5px; font-weight: 600; color: #fff; }
.pm-link-arr { font-size: 18px; color: rgba(255,255,255,.32); }

.pm-logout {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    margin-top: 16px; padding: 12px; border-radius: 13px;
    background: rgba(255,80,80,0.08); border: 1px solid rgba(255,80,80,0.22);
    color: #ff6b6b; font-size: 13px; font-weight: 700; text-decoration: none; transition: background .18s;
}
.pm-logout:hover { background: rgba(255,80,80,0.14); }
.pm-logout .material-symbols-outlined { font-size: 18px; }

@media (prefers-reduced-motion: reduce) {
    .pm-overlay, .pm-card { transition: opacity .12s linear, visibility 0s; }
    .pm-card { transform: none; }
}
body.profile-open { overflow: hidden; }

/* Perfil modal v4 — card mais largo + stats clicaveis + submodais (form) [10/08] */
.pm-card { max-width: 400px; }
.pm-stat { text-decoration: none; display: block; cursor: pointer; transition: border-color .18s, background .18s, transform .18s; }
.pm-stat:hover, .pm-stat:active { border-color: rgba(0,232,112,0.42); background: linear-gradient(158deg, rgba(0,232,112,0.13), rgba(255,255,255,0.02)); transform: translateY(-1px); }
/* .pm-link agora tambem e <button> (Editar conta / Alterar senha) */
button.pm-link { width: 100%; cursor: pointer; font: inherit; text-align: left; -webkit-appearance: none; appearance: none; }

.pm-card-form { max-width: 380px; }
.pm-form-head { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; color: #fff; margin-bottom: 16px; }
.pm-form-head .material-symbols-outlined { color: #00E870; font-size: 20px; }
.pm-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.pm-field-l { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: rgba(255,255,255,.5); }
.pm-field input { width: 100%; box-sizing: border-box; padding: 11px 13px; border-radius: 12px; font-size: 14px; color: #fff; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); transition: border-color .18s; }
.pm-field input:focus { outline: none; border-color: rgba(0,232,112,0.55); }
.pm-msg { font-size: 12.5px; margin: 2px 0 10px; }
.pm-msg:empty { margin: 0; }
.pm-msg-ok { color: #00E870; }
.pm-msg-err { color: #ff6b6b; }
.pm-submit { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 12px; border: none; border-radius: 13px; background: #00E870; color: #05140c; font-weight: 800; font-size: 14px; cursor: pointer; transition: filter .18s; }
.pm-submit:hover { filter: brightness(1.06); }
.pm-submit:disabled { opacity: .6; cursor: default; }
.pm-submit .material-symbols-outlined { font-size: 18px; }


/* ============================================================================
   CASH OUT no card de "Minhas Apostas" — BOTAO DE ACAO (28/08/2026)

   Antes era uma faixa informativa: o jogador nao sabia que dava pra agir dali.
   Agora e' um <button> de verdade, com valor em destaque e uma acao explicita.
   NADA de regra de cash-out mudou — o clique cai no mesmo
   `TicketManager.executeCashOutBackend()` e no mesmo endpoint de sempre.

   COR: a tela do jogador roda com `filter: invert(1) hue-rotate(180deg)` (tema
   padrao desde 17/08), que INVERTE A LUMINOSIDADE. Tudo aqui e' PRE-COMPENSADO
   e conferido no ciclo completo com `python3 tests/cor_tema_invertido.py`:

       escrito     o jogador ve                       onde
       #86CEBC  -> esmeralda escuro   luz 18%         fundo (topo)
       #ADDFD2  -> esmeralda profundo luz 11%         fundo (base)
       #52B497  -> esmeralda medio    luz 28%         borda
       #005835  -> verde claro        luz 65%         rotulo "CASH OUT DISPONIVEL"
       #35886F  -> verde medio        luz 45%         "Receba este valor agora"
       #001A09  -> verde bem claro    luz 90%         O VALOR (maior destaque)
       #003E1A  -> verde claro        luz 76%         "FAZER CASH OUT"

   ANIMACAO: usar `box-shadow: inset`. Duas armadilhas ja pagas aqui —
   `!important` VENCE animacao, e o `.my-bet-card` tem `overflow: hidden`
   (components.css:2395), que recorta qualquer brilho que cresca para FORA.
   ============================================================================ */

.cw-co {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0 0 10px;
    padding: 12px 14px;
    background: linear-gradient(160deg, #86CEBC 0%, #ADDFD2 100%);
    border: 1px solid #52B497;
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s ease, filter .12s ease;
    position: relative;
    overflow: hidden;
}

/*
 * O PULSO — POR QUE E' UMA CAMADA COM `opacity`, E NAO `box-shadow`
 *
 * No CELULAR o pulso nao aparecia, e no computador aparecia. A causa: a tela do
 * jogador inteira roda dentro de `filter: invert(1) hue-rotate(180deg)` (tema
 * padrao), e o Safari do iPhone nao repinta `box-shadow` animado dentro de um
 * elemento filtrado — a animacao roda, mas a tela nao redesenha.
 *
 * `opacity` e' composta na GPU e redesenha mesmo dentro do filtro. Por isso o
 * pulso agora e' uma camada `::after` cobrindo o botao, aparecendo e sumindo.
 *
 * As duas armadilhas anteriores continuam valendo aqui: `!important` VENCE
 * animacao, e o `.my-bet-card` tem `overflow: hidden` — nada pode crescer para
 * FORA da caixa. Esta camada e' interna, entao passa nos dois casos.
 *
 * A fase vem de `--co-fase` (atraso negativo posto no HTML): a lista se refaz a
 * cada 10 s e o botao e' recriado, e sem isso o pulso reiniciava do zero e
 * "pulava" a cada atualizacao.
 */
.cw-co::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #001A09;
    opacity: 0;
    pointer-events: none;
    animation: cwCoPulso 2.4s ease-in-out infinite;
    animation-delay: var(--co-fase, 0s);
    /* forca camada propria de composicao: sem isto o Safari do iPhone as vezes
       so redesenha esta area quando algo MAIS na tela muda, e o pulso "some". */
    will-change: opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}
/* o conteudo fica ACIMA da camada do pulso */
.cw-co-esq, .cw-co-dir { position: relative; z-index: 1; }

.cw-co:active            { transform: scale(.985); filter: brightness(.94); }
.cw-co:disabled          { cursor: default; }
.cw-co:disabled::after   { animation: none; opacity: 0; }
.cw-co:focus-visible     { outline: 2px solid #003E1A; outline-offset: 2px; }

@keyframes cwCoPulso {
    0%, 100% { opacity: 0; }
    55%      { opacity: .16; }
}

.cw-co-esq   { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cw-co-tit   {
    display: flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 800; letter-spacing: .7px;
    color: #005835; text-transform: uppercase; white-space: nowrap;
}
.cw-co-tit .material-symbols-outlined { font-size: 15px; }
.cw-co-sub   { font-size: 11px; color: #35886F; font-weight: 600; white-space: nowrap;
               overflow: hidden; text-overflow: ellipsis; }

.cw-co-dir   { margin-left: auto; display: flex; flex-direction: column;
               align-items: flex-end; gap: 3px; flex-shrink: 0; }
.cw-co-valor {
    font-size: 21px; font-weight: 900; line-height: 1;
    color: #001A09; letter-spacing: .2px;
    font-variant-numeric: tabular-nums;
}
.cw-co-acao  {
    display: flex; align-items: center; gap: 3px;
    font-size: 10px; font-weight: 800; letter-spacing: .6px;
    color: #003E1A; text-transform: uppercase;
    border-bottom: 1px solid #35886F; padding-bottom: 1px;
}
.cw-co-acao .material-symbols-outlined { font-size: 13px; }

/* --- estado: processando --- */
.cw-co.processando::after { animation: none; opacity: 0; }
.cw-co.processando { filter: saturate(.8); }
.cw-co.processando .cw-co-acao { border-bottom-color: transparent; }
.cw-co-girando { animation: cwCoGira 1s linear infinite; display: inline-block; }
@keyframes cwCoGira { to { transform: rotate(360deg); } }

/* --- estado: valor mudou (pisca ambar uma vez, sem trocar o layout) --- */
.cw-co.mudou::after { background: #5A3C00; animation: cwCoMudou 1.1s ease-in-out 2; }
@keyframes cwCoMudou {
    0%, 100% { opacity: 0; }
    50%      { opacity: .26; }
}

/* --- estado: indisponivel (nao e botao; so informa o porque) --- */
.cw-co-off {
    display: flex; align-items: center; gap: 7px;
    width: 100%; margin: 0 0 10px; padding: 9px 12px;
    background: #D4DEDA;
    border: 1px solid #BFCCC7;
    border-radius: 12px;
    font-size: 11.5px; font-weight: 600; color: #657A72;
}
.cw-co-off .material-symbols-outlined { font-size: 16px; }

@media (prefers-reduced-motion: reduce) {
    .cw-co::after, .cw-co.mudou::after { animation: none; opacity: 0; }
}

/* ---------- MODAL de confirmacao ---------- */
.cw-cof-fundo {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,.55);
    display: flex; align-items: flex-end; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
.cw-cof-fundo.aberto { opacity: 1; pointer-events: auto; }
.cw-cof {
    width: 100%; max-width: 420px;
    background: #ADDFD2;
    border: 1px solid #52B497;
    border-radius: 16px 16px 0 0;
    padding: 20px 18px calc(18px + env(safe-area-inset-bottom));
    transform: translateY(14px); transition: transform .18s ease;
}
.cw-cof-fundo.aberto .cw-cof { transform: translateY(0); }
@media (min-width: 560px) {
    .cw-cof-fundo { align-items: center; }
    .cw-cof { border-radius: 16px; }
}
.cw-cof-tit  { font-size: 16px; font-weight: 800; color: #001A09; margin: 0 0 6px; }
.cw-cof-txt  { font-size: 13px; color: #005835; font-weight: 600; margin: 0 0 4px; line-height: 1.5; }
.cw-cof-val  { font-size: 26px; font-weight: 900; color: #001A09; margin: 8px 0 16px;
               font-variant-numeric: tabular-nums; }
.cw-cof-aviso{ font-size: 12px; font-weight: 700; color: #6B4A00; background: #F0E2BC;
               border: 1px solid #D8C48A; border-radius: 8px; padding: 8px 10px; margin: 0 0 14px; }
.cw-cof-btns { display: flex; gap: 10px; }
.cw-cof-btns button { flex: 1; padding: 14px 12px; border-radius: 12px; font-size: 13px;
                      font-weight: 800; cursor: pointer; font-family: inherit;
                      -webkit-tap-highlight-color: transparent; transition: transform .12s ease; }
.cw-cof-btns button:active { transform: scale(.97); }
.cw-cof-nao  { background: transparent; border: 1px solid #52B497; color: #005835; }
.cw-cof-sim  { background: #001A09; border: 1px solid #001A09; color: #ADDFD2; }
.cw-cof-sim:disabled { opacity: .65; cursor: default; }


/* ===== CARD DE LUTA (MMA/boxe) — foto, nome, bandeira e a ODD EMBAIXO DO NOME =====
   Desenho pedido pelo dono em 29/08, com o card do ufc.com como referência.
   Sem foto (a TheSportsDB não cobre lutador menos conhecido), cai nas INICIAIS. */
.premium-card.pcc-luta {
    display: block; padding: 14px 12px 16px; cursor: pointer; position: relative;
}
.pcc-luta .lt-topo {
    /* COLUNA de proposito: a tag fica ACIMA do peso, nao ao lado (pedido do dono). */
    display: flex; flex-direction: column; align-items: center; gap: 5px; margin-bottom: 10px;
}
.pcc-luta .lt-peso { font-size: 10.5px; font-weight: 700; letter-spacing: .8px; opacity: .7; text-transform: uppercase; }
.pcc-luta .lt-main {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 9.5px; font-weight: 800; letter-spacing: .8px; padding: 3px 10px; border-radius: 999px;
    /* gradiente CHEIO: os botoes de odd logo abaixo sao verde VAZADO (borda +
        fundo transparente), entao cheio x vazado separa a tag da odd na hora. */
    background: linear-gradient(135deg, #6FF6BC 0%, #00B569 100%); color: #04170e;
}
.pcc-luta .lt-main .material-symbols-outlined { font-size: 13px; margin-left: -2px; }
/* A luta principal de verdade (o headliner) — mesma tag, um degrau acima. */
.pcc-luta .lt-main--cartaz {
    font-size: 10.5px; padding: 4px 12px; letter-spacing: 1px;
    /* SO A LUTA PRINCIPAL e dourada (30/08/2026, pedido do Lucas) — as demais
       lutas do card principal seguem verdes. Dourado do .cs-final da Copa. */
    background: linear-gradient(135deg, #FFF0C4 0%, #E0A81A 55%, #B8860B 100%);
    color: #2a1c00;
    box-shadow: 0 2px 14px -3px rgba(255,193,7,.75);
}
.pcc-luta .lt-main--cartaz .material-symbols-outlined { font-size: 15px; }
.pcc-luta .lt-corpo {
    /* stretch (nao start): as duas colunas ficam da MESMA altura, e a odd la
       embaixo se ancora no rodape. Sem isso, nome que quebra em duas linhas
       empurrava a odd de um lado so e o card ficava torto. */
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 6px;
}
.pcc-luta .lt-lado { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; }
/* a odd desce pro rodape da coluna: alinha sozinha, com qualquer nome */
.pcc-luta .lt-odd-wrap { margin-top: auto; padding-top: 7px; }
.pcc-luta .lt-nome { font-size: 13.5px; font-weight: 700; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.pcc-luta .lt-odd-wrap { width: 100%; display: flex; justify-content: center; }
/* A ODD DO CARD DE LUTA (30/08/2026).
   O problema: os estilos bonitos de odd (.pcc-o-v verde neon com brilho) sao
   escopados em `.premium-card--compact`, e o card de luta NAO e compact. Ele caia
   no `.odd-btn` base — fundo com 6% de opacidade e numero sem cor. Parecia
   apagada, "nem dava vontade de apostar".
   Agora tem corpo, contorno neon e o numero grande. Fica VERDE de proposito: o
   card principal e dourado, entao verde x dourado se separam bem e o verde
   continua sendo o sinal de "aqui se aposta" em todo o site. */
.pcc-luta .lt-odd-wrap .odd-btn {
    position: relative; overflow: hidden;
    /* LARGO: ocupa a coluna do lutador em vez de ser uma pilula estreita.
       O max-width evita que fique gigante em tela larga. */
    width: 100%; max-width: 170px; min-width: 0;
    justify-content: center; gap: 6px;
    padding: 12px 14px; border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(0,255,128,.18) 0%, rgba(0,255,128,.05) 55%, rgba(0,0,0,.35) 100%),
        #0a1410;
    border: 1px solid rgba(0,255,128,.45);
    box-shadow:
        0 0 0 1px rgba(0,0,0,.5) inset,
        0 1px 0 rgba(255,255,255,.10) inset,
        0 6px 18px -10px rgba(0,255,128,.75);
    transition: transform .16s ease, box-shadow .22s ease, border-color .22s ease;
}
/* varredura de luz no hover — o toque futurista, sem exagero */
.pcc-luta .lt-odd-wrap .odd-btn::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.16) 50%, transparent 65%);
    transform: translateX(-120%); transition: transform .55s ease;
}
.pcc-luta .lt-odd-wrap .odd-btn:hover::after { transform: translateX(120%); }
.pcc-luta .lt-odd-wrap .odd-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(0,255,128,.85);
    box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 10px 24px -10px rgba(0,255,128,.95);
}
.pcc-luta .lt-odd-wrap .odd-btn:active { transform: translateY(0) scale(.97); }
/* O NUMERO — era isto que sumia: sem cor propria, herdava o texto do card. */
.pcc-luta .lt-odd-wrap .pcc-o-v {
    font-size: 19px; font-weight: 800; line-height: 1;
    color: #5BFFAE; letter-spacing: -.4px;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 14px rgba(0,255,128,.55);
}
/* selecionado: preenche (mesma linguagem do resto do site) */
.pcc-luta .lt-odd-wrap .odd-btn.selected {
    background: linear-gradient(180deg, #00ff80, #00c765);
    border-color: #7CFFC0;
}
.pcc-luta .lt-odd-wrap .odd-btn.selected .pcc-o-v { color: #04170e; text-shadow: none; }
.pcc-luta .lt-odd-wrap .pcc-o-k { display: none; }   /* "1"/"2" não faz sentido aqui: o nome está acima */
.pcc-luta .lt-odd-vazia { font-size: 14px; opacity: .45; padding: 9px 0; }
.pcc-luta .lt-vs { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 24px 8px 0;
    align-self: start; }   /* o VS fica no alto, nao esticado com a coluna */
.pcc-luta .lt-vs span { font-size: 13px; font-weight: 800; letter-spacing: 1.5px; opacity: .55; }
.pcc-luta .lt-vs small { font-size: 10.5px; opacity: .55; white-space: nowrap; }

@media (max-width: 560px) {
    .pcc-luta .lt-nome { font-size: 12.5px; }
    .pcc-luta .lt-odd-wrap .odd-btn { padding: 10px 10px; max-width: none; }
    .pcc-luta .lt-odd-wrap .pcc-o-v { font-size: 16.5px; }
    .pcc-luta .lt-vs { padding-top: 17px; }
    .pcc-luta .lt-vs span { font-size: 11.5px; }
}

/* Retrato/pais do card de luta ANTIGO removidos em 07/09: quem desenha o retrato
   agora e `.lt-av` (abaixo). A regra `.pcc-luta .lt-lado:not(.sem-foto) .lt-ini`
   chegou a esconder as iniciais do hero — no desenho novo o `.lt-lado` nunca
   recebe `.sem-foto`, entao o :not() casava sempre. */

/* =========================================================================
   HOME DE COMBATE — desenho de 07/09/2026 (arte do dono).
   HERO (luta principal) + LINHAS baixas + separadores de bloco.
   ========================================================================= */

/* titulo do evento em caixa alta — so no combate */
body[data-sport="mma"] .lg-dyn-section .section-title,
body[data-sport="boxe"] .lg-dyn-section .section-title { text-transform: uppercase; letter-spacing: -.2px; }

/* subtitulo do evento: "Sáb, 12/09 • 20:00 • Em 4 dias" */
.lt-ev-sub { font-size: 12.5px; opacity: .6; margin: -4px 2px 12px; }

/* separadores de bloco: barrinha verde + texto a esquerda + fio */
.lt-sep {
    display: flex; align-items: center; gap: 10px; margin: 18px 2px 10px; padding-left: 9px;
    border-left: 3px solid #00E870;
    font-size: 11px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase;
}
.lt-sep::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(127,127,127,.35), transparent); }
.lt-sep--fraco { border-left-color: rgba(127,127,127,.4); opacity: .6; }

/* ---- retrato: foto, ou silhueta + iniciais ---- */
.lt-av {
    position: relative; display: inline-flex; align-items: flex-end; justify-content: center;
    flex: 0 0 auto; border-radius: 50%; overflow: hidden;
    background: rgba(127,127,127,.14); border: 1px solid rgba(127,127,127,.25);
}
/* o hero e o cartaz do evento: retrato grande, como na arte */
.lt-av--g { width: 132px; height: 132px; }
.lt-av--p { width: 56px; height: 56px; }
.lt-av img { width: 100%; height: 100%; object-fit: cover; object-position: top center; position: relative; z-index: 1; }
.lt-av .lt-sil { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .22; }
.lt-av .lt-ini {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-weight: 800; letter-spacing: 1px; opacity: .5;
}
.lt-av--g .lt-ini { font-size: 36px; }
.lt-av--p .lt-ini { font-size: 15px; }
/* com foto, silhueta e iniciais somem */
.lt-av:not(.sem) .lt-ini, .lt-av:not(.sem) .lt-sil { opacity: 0; }
/* bandeira no canto de FORA de cada foto. Precisa de `img.lt-cc` (0,2,0): so
   `.lt-cc` (0,1,0) perderia pra `.lt-av img` (0,1,1) e cobriria o circulo. */
.lt-av img.lt-cc {
    position: absolute; z-index: 2; bottom: 1px;
    width: auto; height: auto; border-radius: 50%; object-fit: cover;
    box-shadow: 0 0 0 1.5px rgba(0,0,0,.55);
}
.lt-av--e img.lt-cc { left: 1px; }
.lt-av--d img.lt-cc { right: 1px; }
/* bandeira legivel: com 22px ela sumia ao lado de um retrato de 132px */
.lt-av--g img.lt-cc { width: 34px; height: 34px; bottom: 3px; }
.lt-av--e.lt-av--g img.lt-cc { left: 3px; }
.lt-av--d.lt-av--g img.lt-cc { right: 3px; }
.lt-av--p img.lt-cc { width: 20px; height: 20px; bottom: 0; }

/* ---- HERO: selo e peso empilhados, logo no meio ---- */
.pcc-luta--cartaz .lt-topo { flex-direction: column; align-items: center; gap: 6px; }
/* marca da promocao (vem de /img/promo/ quando o arquivo existe) */
.lt-marca-img { display: block; width: 54px; height: auto; max-height: 22px; object-fit: contain; margin-bottom: 2px; }
.lt-marca { font-size: 17px; font-weight: 900; font-style: italic; letter-spacing: -.5px; margin-bottom: 2px; }
.lt-marca-img + .lt-marca-bk { display: none; }   /* o texto so entra sem imagem */
.pcc-luta--cartaz .lt-corpo { align-items: start; max-width: 560px; margin: 0 auto; }
.pcc-luta--cartaz .lt-lado { gap: 11px; }
.pcc-luta--cartaz .lt-nome { font-size: 16px; }
/* as duas odds lado a lado no rodape (na arte elas nao ficam sob cada foto) */
.lt-odds--hero {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    max-width: 520px; margin: 14px auto 0;
}
.lt-odds--hero .lt-odd-wrap { width: 100%; display: flex; }
/* botao do hero: sobrenome EM CIMA, numero embaixo */
.lt-odds--hero .odd-btn {
    flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    width: 100%; max-width: none; padding: 12px 10px; border-radius: 12px;
}
/* o sobrenome PRECISA vencer `.pcc-luta .lt-odd-wrap .pcc-o-k{display:none}` (0,3,0),
   que escondia o rotulo quando ele era so "1"/"2". Agora o rotulo e o nome do
   lutador e tem que aparecer — dai o seletor com o mesmo peso. */
.pcc-luta .lt-odds--hero .lt-odd-wrap .pcc-o-k {
    display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .8px; opacity: .9;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lt-odds--hero .pcc-o-v { font-size: 25px; }

/* ---- LINHA: as demais lutas ---- */
/* `.premium-card` no seletor de proposito: sozinho, `.pcc-lt2` empata com ele
   (0,1,0) e PERDE, porque premium-cards.css carrega depois de components.css.
   Foi assim que a linha da luta desmontou em quatro andares no celular. */
.premium-card.pcc-lt2 {
    display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 12px;
    padding: 10px 12px; margin-bottom: 9px; border-radius: 14px; position: relative;
    background: var(--card-bg, #101010);
    border: 1px solid rgba(127,127,127,.22);
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.premium-card.pcc-lt2:hover { border-color: rgba(0,255,128,.45); }
.pcc-lt2, .pcc-lt2 * { box-sizing: border-box; }
.lt2-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lt2-col--dir { align-items: flex-end; }
/* nome corta com reticencias em vez de estourar a linha (nome de lutador e longo) */
.lt2-nome {
    font-size: 14px; font-weight: 700; line-height: 1.2; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lt2-col--dir .lt2-nome { text-align: right; }
.lt2-mid { display: flex; flex-direction: column; align-items: center; line-height: 1.15; min-width: 44px; }
.lt2-mid span { font-size: 11px; font-weight: 800; letter-spacing: 1px; opacity: .55; }
.lt2-mid small { font-size: 10.5px; opacity: .55; white-space: nowrap; }
.pcc-lt2 .lt-odd-wrap { width: 100%; display: flex; }
/* botao da linha: sobrenome a esquerda, numero a direita */
.pcc-lt2 .odd-btn {
    /* row explicito: o `.odd-btn` base empilha em coluna, e na linha o desenho
       pede sobrenome a esquerda e numero a direita, na mesma altura. */
    flex-direction: row; align-items: center; justify-content: space-between;
    width: 100%; max-width: none; gap: 8px;
    padding: 8px 11px; border-radius: 10px;
}
.pcc-lt2 .pcc-o-k {
    display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .5px; opacity: .85;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pcc-lt2 .pcc-o-v { font-size: 15px; flex: 0 0 auto; }

.pcc-lt2 .lt-odd-wrap .odd-btn {
    /* MESMO tratamento da odd do card de luta: verde neon vazado, numero com
       corpo. Sem isto o botao caia no `.odd-btn` base e ficava apagado. */
    position: relative; overflow: hidden;
    background:
        linear-gradient(180deg, rgba(0,255,128,.18) 0%, rgba(0,255,128,.05) 55%, rgba(0,0,0,.35) 100%),
        #0a1410;
    border: 1px solid rgba(0,255,128,.45);
    box-shadow:
        0 0 0 1px rgba(0,0,0,.5) inset,
        0 1px 0 rgba(255,255,255,.10) inset,
        0 6px 18px -10px rgba(0,255,128,.75);
    transition: transform .16s ease, box-shadow .22s ease, border-color .22s ease;
}
.pcc-lt2 .lt-odd-wrap .odd-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(0,255,128,.85);
    box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 10px 24px -10px rgba(0,255,128,.95);
}
.pcc-lt2 .lt-odd-wrap .odd-btn:active { transform: translateY(0) scale(.97); }
.pcc-lt2 .lt-odd-wrap .pcc-o-v {
    color: #5BFFAE; font-weight: 800; line-height: 1; letter-spacing: -.3px;
    font-variant-numeric: tabular-nums; text-shadow: 0 0 12px rgba(0,255,128,.5);
}
.pcc-lt2 .lt-odd-wrap .pcc-o-k { color: #9FF3C8; }
/* selecionado: preenche, mesma linguagem do resto do site */
.pcc-lt2 .lt-odd-wrap .odd-btn.selected {
    background: linear-gradient(180deg, #00ff80, #00c765); border-color: #7CFFC0;
}
.pcc-lt2 .lt-odd-wrap .odd-btn.selected .pcc-o-v { color: #04170e; text-shadow: none; }
.pcc-lt2 .lt-odd-wrap .odd-btn.selected .pcc-o-k { color: #04170e; }

/* cabecalho do evento na arte: nome a esquerda, seta a direita, nada mais */
.section-header--luta .section-title { display: flex; align-items: center; gap: 10px; width: 100%; cursor: pointer; }
.section-header--luta .lg-nome { flex: 1; min-width: 0; }
.section-header--luta .lg-chev { width: 19px; height: 19px; flex: 0 0 auto; opacity: .45; }
.section-header--luta .section-title:hover .lg-chev { opacity: 1; color: #00E870; }
.section-header--luta .section-title:focus-visible { outline: 2px solid #00E870; outline-offset: 3px; border-radius: 6px; }

/* titulo do evento: o maior texto da tela, como na arte (so em combate) */
body[data-sport="mma"] .lg-dyn-section .section-title,
body[data-sport="boxe"] .lg-dyn-section .section-title {
    font-size: 21px; font-weight: 800; line-height: 1.15;
}

/* tarja da janela ("Lutas - 14 dias") em verde COPAWIN, com calendario.
   SVG embutido de proposito: ligadura de fonte que nao carrega imprime o NOME
   do icone na tela — ja mordeu no bilhete ("sync_problem" -> "_PROBLEM"). */
body[data-sport="mma"] .lg-dyn-heading,
body[data-sport="boxe"] .lg-dyn-heading {
    display: flex; align-items: center; gap: 7px;
    color: #00E870; text-transform: uppercase;
    font-size: 11px; font-weight: 800; letter-spacing: 1.1px;
}
body[data-sport="mma"] .lg-dyn-heading::before,
body[data-sport="boxe"] .lg-dyn-heading::before {
    content: ""; width: 15px; height: 15px; flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask: var(--lt-cal) center / contain no-repeat;
    mask: var(--lt-cal) center / contain no-repeat;
}
:root {
    --lt-cal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E");
}

@media (max-width: 560px) {
    body[data-sport="mma"] .lg-dyn-section .section-title,
    body[data-sport="boxe"] .lg-dyn-section .section-title { font-size: 18px; }
    .lt-av--g { width: 112px; height: 112px; }
    .lt-av--g .lt-ini { font-size: 30px; }
    .lt-av--g img.lt-cc { width: 28px; height: 28px; }
    .lt-av--p { width: 50px; height: 50px; }
    .lt-av--p .lt-ini { font-size: 14px; }
    .lt-av--p img.lt-cc { width: 18px; height: 18px; }
    .pcc-luta--cartaz .lt-nome { font-size: 14.5px; }
    .lt-marca-img { width: 46px; max-height: 19px; }
    .lt-odds--hero .pcc-o-v { font-size: 18px; }
    .pcc-lt2 { gap: 8px; padding: 9px 9px; }
    .lt2-nome { font-size: 12.5px; }
    .pcc-lt2 .odd-btn { padding: 7px 9px; }
    .pcc-lt2 .pcc-o-k { font-size: 9.5px; }
    .pcc-lt2 .pcc-o-v { font-size: 13.5px; }
}

/* ===== CARD PRINCIPAL do UFC — versao premium =====
   Mesma mecanica dos cards de mata-mata da Copa (borda em gradiente que corre, brilho
   que pulsa, reflexo que atravessa) — ver a secao "Cards especiais" em home.css.
   A COR e o dourado que a tag ja usava: o verde neon da semifinal brigaria com o verde
   das odds, que no card de luta ficam logo abaixo dos nomes. */
.pcc-luta--main {
    --lt-a: #4DF3A8;
    --lt-b: #087E4E;
    /* fundo ESCURO de proposito: no tema claro a pagina inverte e ele vira claro,
       do mesmo jeito que todo o resto do site. Nao usar #fff aqui. */
    background: radial-gradient(130% 120% at 50% -10%, #0e2018 0%, #0d0d0d 62%);
    border-color: transparent;
    /* cria contexto de empilhamento pro z-index:-1 dos enfeites ficar ACIMA do fundo
       do card e ABAIXO do conteudo. Sem isso eles sumiriam atras do card. */
    isolation: isolate;
    animation: ltBrilhoPulso 2.8s ease-in-out infinite;
}
@keyframes ltBrilhoPulso {
    0%, 100% { box-shadow: 0 6px 24px rgba(0,0,0,.45), 0 0 16px -8px rgba(0,232,112,.28); }
    50%      { box-shadow: 0 6px 24px rgba(0,0,0,.45), 0 0 30px -6px rgba(0,232,112,.62); }
}
/* borda em gradiente que corre */
.pcc-luta--main::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px;
    background: linear-gradient(130deg, var(--lt-a), var(--lt-b), var(--lt-a));
    background-size: 220% 220%;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: ltBorda 4s linear infinite;
    z-index: -1; pointer-events: none;
}
@keyframes ltBorda { to { background-position: 220% 0; } }
/* reflexo que atravessa o card */
.pcc-luta--main .lt-brilho {
    position: absolute; top: 0; left: -60%; width: 38%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.14), transparent);
    transform: skewX(-18deg); animation: ltReflexo 4.8s ease-in-out infinite;
    z-index: -1; pointer-events: none;
}
@keyframes ltReflexo { 0% { left: -60%; } 55%, 100% { left: 130%; } }

.pcc-luta--main .lt-vs { padding-top: 28px; }
.pcc-luta--main .lt-odd-wrap .odd-btn { padding: 13px 16px; max-width: 185px; }
.pcc-luta--main .lt-odd-wrap .pcc-o-v { font-size: 22px; }

/* ============================================================
   O CARTAZ — a luta principal de verdade. Unico card dourado.
   Cores do .cs-final da Copa do Mundo (home.css).
   ============================================================ */
/* O CARTAZ e DOURADO — e precisa do `.premium-card` junto pra vencer o
   `background:#0d0d0d` da base. Sem isso o hero saia branco no tema claro.
   Os holofotes sao gradiente puro: nao ha foto de arena no servidor, e um
   fundo chapado nao aguenta o card mais importante da tela. */
.premium-card.pcc-luta--cartaz {
    --lt-a: #FFDF7E;
    --lt-b: #B8860B;
    background:
        radial-gradient(55% 40% at 20% 6%, rgba(255,214,92,.38) 0%, transparent 72%),
        radial-gradient(55% 40% at 80% 6%, rgba(255,214,92,.38) 0%, transparent 72%),
        radial-gradient(140% 130% at 50% -12%, #3a2f14 0%, #1a160c 66%);
    border: 1.5px solid rgba(212,160,23,.75);
    animation: ltBrilhoOuro 2.8s ease-in-out infinite;
}
@keyframes ltBrilhoOuro {
    0%, 100% { box-shadow: 0 6px 24px rgba(0,0,0,.45), 0 0 16px -8px rgba(255,193,7,.30); }
    50%      { box-shadow: 0 6px 24px rgba(0,0,0,.45), 0 0 32px -6px rgba(255,193,7,.62); }
}
/* A odd do cartaz tambem e dourada — combina com o card em vez de brigar. */
.pcc-luta--cartaz .lt-odd-wrap .odd-btn {
    background:
        linear-gradient(180deg, rgba(255,193,7,.20) 0%, rgba(255,193,7,.06) 55%, rgba(0,0,0,.38) 100%),
        #17130a;
    border-color: rgba(255,208,80,.55);
    box-shadow:
        0 0 0 1px rgba(0,0,0,.5) inset,
        0 1px 0 rgba(255,255,255,.12) inset,
        0 6px 18px -10px rgba(255,193,7,.80);
}
.pcc-luta--cartaz .lt-odd-wrap .odd-btn:hover {
    border-color: rgba(255,223,126,.95);
    box-shadow: 0 1px 0 rgba(255,255,255,.16) inset, 0 10px 24px -10px rgba(255,193,7,1);
}
.pcc-luta--cartaz .lt-odd-wrap .pcc-o-v {
    color: #FFDF7E;
    text-shadow: 0 0 14px rgba(255,193,7,.60);
}
.pcc-luta--cartaz .lt-odd-wrap .odd-btn.selected {
    background: linear-gradient(180deg, #FFDF7E, #D9A21B);
    border-color: #FFF0C4;
}
.pcc-luta--cartaz .lt-odd-wrap .odd-btn.selected .pcc-o-v { color: #2a1c00; text-shadow: none; }
@media (prefers-reduced-motion: reduce) {
    .pcc-luta--cartaz { animation: none; }
}

/* Quem pediu menos movimento no sistema nao ve nenhuma animacao. */
@media (prefers-reduced-motion: reduce) {
    .pcc-luta--main,
    .pcc-luta--main::before,
    .pcc-luta--main .lt-brilho { animation: none; }
}

@media (max-width: 560px) {
    .pcc-luta--main .lt-nome { font-size: 13.5px; }
    .pcc-luta--main .lt-vs { padding-top: 21px; }
    .pcc-luta--main .lt-odd-wrap .odd-btn { padding: 11px 11px; max-width: none; }
    .pcc-luta--main .lt-odd-wrap .pcc-o-v { font-size: 18px; }
}

/* =========================================================================
   POLIMENTO DA HOME DE COMBATE — 08/09/2026 (pedido do dono, sobre a arte).
   SO ACABAMENTO: nao muda HTML, JS, API, odds, mercados nem bilhete. A
   estrutura de 07/09 esta aprovada e continua exatamente a mesma.

   LEMBRETE DO TEMA (vale pra cada cor abaixo): a pagina do jogador roda com
   `filter: invert(1) hue-rotate(180deg)` no <html>. Isso inverte a LUMINOSIDADE
   e PRESERVA a matiz. Entao aqui se escreve ESCURO pra sair CLARO na tela, e
   dourado escrito continua dourado. Por isso o "fundo branco" do cartaz e um
   quase-preto NEUTRO — nao #fff, que sairia preto.

   Medido no navegador (harness com a ordem de CSS do main.php e o padding
   real do .main-content), viewport de 375px:
     cartaz  308px -> 262px  (-15%)
     linha    73px ->  74px  (+1px)
     busca -> cabecalho do evento  18px -> 8px
   ========================================================================= */

/* ---- 1. o cartaz perde o banho de ouro: fundo off-white, ouro so na moldura,
        no selo e num sopro no topo. Sem o pulso dourado, que puxava o olho
        pro fundo em vez dos lutadores. ---- */
.premium-card.pcc-luta--cartaz {
    background:
        radial-gradient(120% 85% at 50% -16%, rgba(212,160,23,.11) 0%, transparent 60%),
        radial-gradient(140% 130% at 50% -12%, #141414 0%, #0d0d0d 72%);
    border: 1.5px solid rgba(212,160,23,.52);
    box-shadow: 0 4px 16px rgba(0,0,0,.32);
    animation: none;
    /* ---- 2. altura: corta o vazio, sem apertar ---- */
    padding: 10px 10px 11px;
}
.pcc-luta--cartaz .lt-topo { gap: 2px; margin-bottom: 5px; }
.pcc-luta--cartaz .lt-main--cartaz {
    font-size: 10px; padding: 3px 11px; letter-spacing: .9px;
    box-shadow: none;                      /* o halo do selo era parte do excesso */
}
.pcc-luta--cartaz .lt-peso { font-size: 10px; line-height: 1.1; }
.pcc-luta--cartaz .lt-lado { gap: 6px; }
.pcc-luta--cartaz .lt-nome { line-height: 1.15; }
.pcc-luta--cartaz .lt-vs { padding: 12px 8px 0; gap: 2px; }
.pcc-luta--cartaz .lt-odds--hero { margin-top: 8px; }

/* ---- 3. retrato maior e enquadrado no rosto/peitoral ----
   As fotos sao QUADRADAS (500x500), e num circulo quadrado o `object-fit: cover`
   nao recorta nada — `object-position` sozinho nao muda uma virgula. O que
   aproxima de verdade e o zoom: 1.12 com origem um pouco acima do centro joga
   os cantos vazios pra fora e deixa rosto/peitoral preenchendo o circulo.
   O `:not(.lt-cc)` fica como cinto de seguranca: a bandeira saiu do `.lt-av`
   (item 5), mas se um dia voltar pra dentro ela nao pega o zoom e nao estica. */
.lt-av > img:not(.lt-cc) {
    object-position: 50% 20%;
    transform: scale(1.12); transform-origin: 50% 30%;
}
.pcc-luta--cartaz .lt-av--g { width: 146px; height: 146px; }
.pcc-luta--cartaz .lt-av--g .lt-ini { font-size: 39px; }

/* ---- 4. logo da promocao menor: e assinatura, nao manchete. O arquivo
        tambem foi recolorido pro cinza-escuro (era o vermelho oficial). ---- */
.lt-marca-img { width: 38px; max-height: 16px; margin-bottom: 1px; opacity: .85; }

/* ---- 5. bandeira FORA do circulo, no mesmo canto de baixo do lado de fora
        (o dado ja vem no evento: `home_cc`/`away_cc`; onde nao vem, nada
        aparece — nada inventado).
        O `.lt-avw` nasceu no home.js justamente pra isto: o `.lt-av` tem
        `overflow:hidden` (e ele que recorta a foto no circulo e segura o zoom
        do enquadramento), e filho de elemento recortado nao escapa por CSS.
        Agora a foto continua recortada no `.lt-av` e a bandeira, IRMA dele
        dentro do `.lt-avw`, encosta por fora da borda.
        A bandeira MORDE UM POUCO a foto (pedido do dono 08/09): ela cavalga a
        borda, com cerca de 30% do diametro por dentro do circulo — e por isso
        que o involucro continua sendo necessario. Dentro do `.lt-av` os outros
        70% seriam RECORTADOS e a bandeira apareceria cortada ao meio, que era
        o desenho antigo.
        O recuo e' conta, nao chute. Com a caixa WxW (raio r=W/2), bandeira de
        diametro f (fr=f/2) e recuo `o` medido pra FORA da caixa, a distancia
        entre os centros e' d = raiz(2) * (r + o - fr); a sobreposicao e'
        p = (r + fr) - d. Resolvendo pra p ~ 0.3f sai o valor de cada tamanho. ---- */
.lt-avw { position: relative; display: inline-flex; flex: 0 0 auto; line-height: 0; }
.lt-avw > img.lt-cc {
    position: absolute; z-index: 3; border-radius: 50%; object-fit: cover;
    box-shadow: 0 0 0 2px rgba(127,127,127,.30), 0 1px 3px rgba(0,0,0,.30);
}
/* cartaz, 146px: o=-5 => 8,2px dos 26px por dentro (32%) */
.lt-avw--g > img.lt-cc { width: 26px; height: 26px; bottom: 5px; }
.lt-avw--g.lt-avw--e > img.lt-cc { left: 5px; }
.lt-avw--g.lt-avw--d > img.lt-cc { right: 5px; }
/* linha, 60px: o=2 => 5,3px dos 17px por dentro (31%). O circulo pequeno pede
   recuo pra FORA da caixa onde o grande pede pra dentro — a tangente a 45graus
   fica mais longe do canto quanto menor o raio. */
.lt-avw--p > img.lt-cc { width: 17px; height: 17px; bottom: -2px; }
.lt-avw--p.lt-avw--e > img.lt-cc { left: -2px; }
.lt-avw--p.lt-avw--d > img.lt-cc { right: -2px; }

/* ---- 6. nome longo: ate DUAS linhas, e so depois reticencias ---- */
.pcc-luta .lt-nome {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden; overflow-wrap: break-word; word-break: normal;
}
.premium-card.pcc-lt2 .lt2-nome {
    white-space: normal;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden; overflow-wrap: break-word; word-break: normal;
}

/* ---- 7. fotos das outras lutas um pouco maiores. O card fica ~3px mais alto,
        e nao por causa da foto (o grid centraliza): e a segunda linha de nome,
        pedida no item 6. Padding e gaps devolvem o resto. ---- */
.premium-card.pcc-lt2 { padding: 8px 11px; }
.pcc-lt2 .lt-av--p { width: 60px; height: 60px; }
.pcc-lt2 .lt-av--p .lt-ini { font-size: 16px; }
.pcc-lt2 .lt2-col { gap: 5px; }
.pcc-lt2 .lt2-nome { line-height: 1.14; }

/* ---- 8. ODD NAO SELECIONADA: quase branca, fio verde fino, zero glow.
        Vale pro cartaz tambem — a odd dourada era outro foco de ouro. ---- */
.premium-card.pcc-luta .lt-odd-wrap .odd-btn,
.premium-card.pcc-luta--cartaz .lt-odd-wrap .odd-btn,
.premium-card.pcc-lt2 .lt-odd-wrap .odd-btn {
    background: linear-gradient(180deg, rgba(0,255,128,.055) 0%, rgba(0,255,128,.018) 100%), #0d100e;
    border: 1px solid rgba(0,255,128,.26);
    box-shadow: none;
}
.premium-card.pcc-luta .lt-odd-wrap .odd-btn:hover,
.premium-card.pcc-luta--cartaz .lt-odd-wrap .odd-btn:hover,
.premium-card.pcc-lt2 .lt-odd-wrap .odd-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(0,255,128,.52);
    box-shadow: none;
}
/* a varredura de luz fica, mas discreta */
.premium-card.pcc-luta .lt-odd-wrap .odd-btn::after {
    background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.07) 50%, transparent 62%);
}
.premium-card.pcc-luta .lt-odd-wrap .pcc-o-v,
.premium-card.pcc-luta--cartaz .lt-odd-wrap .pcc-o-v,
.premium-card.pcc-lt2 .lt-odd-wrap .pcc-o-v {
    color: #3BE79A; text-shadow: none;
}
.premium-card.pcc-luta .lt-odds--hero .lt-odd-wrap .pcc-o-k,
.premium-card.pcc-lt2 .lt-odd-wrap .pcc-o-k { color: #8FE9BF; opacity: 1; }

/* ---- 9. ODD SELECIONADA: verde CHEIO. E o unico verde forte da tela, entao
        da pra ver de relance o que entrou no bilhete. ---- */
.premium-card.pcc-luta .lt-odd-wrap .odd-btn.selected,
.premium-card.pcc-luta--cartaz .lt-odd-wrap .odd-btn.selected,
.premium-card.pcc-lt2 .lt-odd-wrap .odd-btn.selected {
    background: linear-gradient(180deg, #00ff80 0%, #00c765 100%);
    border-color: #00ff80;
    box-shadow: 0 0 0 2px rgba(0,255,128,.28);
}
.premium-card.pcc-luta .lt-odd-wrap .odd-btn.selected .pcc-o-v,
.premium-card.pcc-luta--cartaz .lt-odd-wrap .odd-btn.selected .pcc-o-v,
.premium-card.pcc-lt2 .lt-odd-wrap .odd-btn.selected .pcc-o-v,
.premium-card.pcc-luta .lt-odds--hero .lt-odd-wrap .odd-btn.selected .pcc-o-k,
.premium-card.pcc-lt2 .lt-odd-wrap .odd-btn.selected .pcc-o-k {
    color: #04170e; text-shadow: none; opacity: 1;
}

/* ---- 10. menos ar entre a busca e o cabecalho do evento (so em combate) ---- */
body[data-sport="mma"] #homeSearchBar,
body[data-sport="boxe"] #homeSearchBar { margin-bottom: .5rem; }
body[data-sport="mma"] .lg-dyn-heading,
body[data-sport="boxe"] .lg-dyn-heading { margin: 8px 0 6px; }
body[data-sport="mma"] .lt-ev-sub,
body[data-sport="boxe"] .lt-ev-sub { margin: -3px 2px 9px; }

@media (max-width: 560px) {
    .premium-card.pcc-luta--cartaz { padding: 8px 9px 10px; }
    .pcc-luta--cartaz .lt-topo { margin-bottom: 4px; }
    .pcc-luta--cartaz .lt-lado { gap: 5px; }
    .pcc-luta--cartaz .lt-av--g { width: 118px; height: 118px; }
    .pcc-luta--cartaz .lt-av--g .lt-ini { font-size: 31px; }
    /* cartaz 118px: o=-3 => 6,4px dos 22px por dentro (29%) */
    .lt-avw--g > img.lt-cc { width: 22px; height: 22px; bottom: 3px; }
    .lt-avw--g.lt-avw--e > img.lt-cc { left: 3px; }
    .lt-avw--g.lt-avw--d > img.lt-cc { right: 3px; }
    /* linha 54px: o=3 => 5,1px dos 17px por dentro (30%) */
    .lt-avw--p > img.lt-cc { bottom: -3px; }
    .lt-avw--p.lt-avw--e > img.lt-cc { left: -3px; }
    .lt-avw--p.lt-avw--d > img.lt-cc { right: -3px; }
    .pcc-luta--cartaz .lt-nome { font-size: 13.5px; }
    .pcc-luta--cartaz .lt-vs { padding-top: 9px; }
    .pcc-luta--cartaz .lt-odds--hero { margin-top: 7px; }
    .lt-marca-img { width: 32px; max-height: 14px; }
    .premium-card.pcc-luta--cartaz .lt-odds--hero .odd-btn { padding: 7px 8px; }
    .premium-card.pcc-luta .lt-odds--hero .pcc-o-v { font-size: 16.5px; }
    .premium-card.pcc-luta .lt-odds--hero .lt-odd-wrap .pcc-o-k { font-size: 9.5px; }
    .premium-card.pcc-lt2 { padding: 7px 9px; gap: 8px; }
    .pcc-lt2 .lt-av--p { width: 54px; height: 54px; }
    .pcc-lt2 .lt-av--p .lt-ini { font-size: 14.5px; }
    .pcc-lt2 .lt2-col { gap: 4px; }
    .pcc-lt2 .lt2-nome { font-size: 12px; line-height: 1.12; }
    .premium-card.pcc-lt2 .lt-odd-wrap .odd-btn { padding: 6px 9px; }
}

/* ---- 11. tela estreita (< 400px): a coluna do lutador fica com ~70px e o
        sobrenome DENTRO do botao virava "I..", "M." — texto que nao informa
        nada, e o nome completo esta na linha logo acima. Nesse caso o botao
        mostra so a odd, centrada. Acima de 400px o sobrenome volta sozinho. ---- */
@media (max-width: 399px) {
    .premium-card.pcc-lt2 .lt-odd-wrap .pcc-o-k { display: none; }
    .premium-card.pcc-lt2 .lt-odd-wrap .odd-btn { justify-content: center; }
}

/* ===== FOTO DE LUTADOR NO CARD DE TURBINADA (09/09/2026) =====
   O card verde tira o circulo do badge (regra de 19/08) pra escudo de clube
   assentar limpo. Em ROSTO isso nao serve: a foto ficava pequena e solta.
   Aqui o circulo volta SO na luta, um pouco maior que o padrao, e a foto
   preenche. O enquadramento e o mesmo da home do UFC, pros dois mostrarem
   o rosto na mesma altura. */
.combined-card.is-luta .tbadge {
    width: 52px; height: 52px;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: radial-gradient(circle at 30% 24%, #232a24, #12160f);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.06), 0 3px 10px rgba(0, 0, 0, 0.45);
}
.combined-card.is-luta .tbadge .tbadge-img {
    object-fit: cover;
    padding: 0;
    /* mesmo corte da home: o rosto sobe, o tronco sai */
    object-position: 50% 22%;
    transform: scale(1.12);
    transform-origin: 50% 30%;
    /* NAO usar background:none — por baixo fica o disco das INICIAIS, que
       apareceria como anel colorido em volta do rosto (foto com alpha). */
    background: #12160f;
}
.combined-card.is-luta .tbadge .tbadge-mono { font-size: 16px; }
/* o cross e mais apertado: la o circulo fica menor pra caber os dois confrontos */
.combined-card.is-cross.is-luta .tbadge,
.combined-card.is-cross.is-luta .tbadge:has(.tbadge-img) {
    width: 38px; height: 38px;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: radial-gradient(circle at 30% 24%, #232a24, #12160f);
}
.combined-card.is-cross.is-luta .tbadge .tbadge-mono { font-size: 12px; }

/* =========================================================================
   IDENTIDADE DO CARD DE LUTA NA VITRINE (09/09/2026)

   Mesma receita do cartaz da home: fundo quase-preto NEUTRO, cor so na moldura
   e num sopro no topo. Antes o roxo tomava o card inteiro e o dono viu o que ja
   tinha visto no cartaz — a cor puxa o olho pro fundo em vez do confronto.

   O tema branco inverte a pagina, entao "fundo claro" se escreve como
   quase-preto: #fff aqui sairia preto.
   ========================================================================= */
.combined-card.is-luta,
.combined-card.is-cross.is-luta {
    background:
        radial-gradient(120% 85% at 50% -16%, rgba(127,127,127,.10) 0%, transparent 60%),
        radial-gradient(140% 130% at 50% -12%, #141414 0%, #0d0d0d 72%);
    border: 1.5px solid rgba(127,127,127,.30);
    box-shadow: 0 4px 16px rgba(0,0,0,.32);
    animation: none;
}
.combined-card.is-luta:hover,
.combined-card.is-cross.is-luta:hover {
    box-shadow: 0 8px 22px rgba(0,0,0,.42);
}
/* o glow de fundo era parte do banho de cor: sai */
.combined-card.is-luta .combined-card-glow { background: none; }

/* A COR VIVE NA MOLDURA. Cada cor mantem a sua leitura (roxo = destaque do dia,
   ouro = intermediario, verde = simples) sem pintar o card inteiro. */
.combined-card.is-cross.is-luta.is-purple {
    border-color: rgba(168,85,247,.52);
    background:
        radial-gradient(120% 85% at 50% -16%, rgba(168,85,247,.10) 0%, transparent 60%),
        radial-gradient(140% 130% at 50% -12%, #141414 0%, #0d0d0d 72%);
    --tc-neon: #C084FC;
    --tc-neon-soft: rgba(168,85,247,.42);
}
.combined-card.is-cross.is-luta.is-purple:hover { border-color: rgba(168,85,247,.72); }
.combined-card.is-cross.is-luta.is-purple .combined-card-glow { background: none; }

/* GOLD: o mesmo dourado do cartaz da home, pra ser a mesma familia visual */
.combined-card.is-cross.is-luta.is-gold,
.combined-card.is-luta.is-gold {
    border-color: rgba(212,160,23,.52);
    background:
        radial-gradient(120% 85% at 50% -16%, rgba(212,160,23,.10) 0%, transparent 60%),
        radial-gradient(140% 130% at 50% -12%, #141414 0%, #0d0d0d 72%);
    --tc-neon: #E7C35A;
    --tc-neon-soft: rgba(212,160,23,.42);
}

/* ---- FOTO DO LUTADOR: o MESMO disco da home ----
   `rgba(127,127,127,...)` e neutro: atravessa a inversao do tema branco sem virar
   outra cor. O enquadramento e o do cartaz — num circulo quadrado o object-position
   sozinho nao recorta nada, quem aproxima o rosto e o zoom com origem acima do centro. */
.combined-card.is-luta .tbadge {
    width: 68px; height: 68px;
    overflow: hidden;
    border-radius: 50%;
    background: rgba(127,127,127,.14);
    border: 1px solid rgba(127,127,127,.25);
    box-shadow: none;
}
.combined-card.is-cross.is-luta .tbadge,
.combined-card.is-cross.is-luta .tbadge:has(.tbadge-img) {
    width: 52px; height: 52px;
    overflow: hidden;
    border-radius: 50%;
    background: rgba(127,127,127,.14);
    border: 1px solid rgba(127,127,127,.25);
    box-shadow: none;
}
.combined-card.is-luta .tbadge .tbadge-img {
    object-fit: cover;
    padding: 0;
    background: none;                      /* o disco ja vem do .tbadge */
    object-position: 50% 20%;
    transform: scale(1.12);
    transform-origin: 50% 30%;
}
.combined-card.is-luta .tbadge .tbadge-mono { font-size: 20px; background: none; }
.combined-card.is-cross.is-luta .tbadge .tbadge-mono { font-size: 15px; }
/* VERDE: o neon da casa na moldura, mesma logica das outras duas cores. */
.combined-card.is-luta.is-green {
    border-color: rgba(0,232,112,.34);
    background:
        radial-gradient(120% 85% at 50% -16%, rgba(0,232,112,.07) 0%, transparent 60%),
        radial-gradient(140% 130% at 50% -12%, #141414 0%, #0d0d0d 72%);
}
.combined-card.is-luta.is-green:hover { border-color: rgba(0,232,112,.52); }

/* ---- BANDEIRA MORDENDO A FOTO (09/09/2026) ----
   Igual ao cartaz da home: a bandeira cavalga a borda, ~30% do diametro por
   dentro do circulo. Precisa do involucro porque o `.tbadge` recorta (overflow
   hidden) e filho de elemento recortado nao escapa.
   Recuo pela mesma conta do bloco `.lt-avw`:
     68px com bandeira 19px, o=-2 -> 5,7px dos 19 por dentro (30%)
     52px com bandeira 16px, o=-3 -> 4,8px dos 16 por dentro (30%) */
.tbadge-w { position: relative; display: inline-flex; flex: 0 0 auto; line-height: 0; }
.tbadge-w > img.tbadge-cc {
    position: absolute; z-index: 3; border-radius: 50%; object-fit: cover;
    box-shadow: 0 0 0 2px rgba(127,127,127,.30), 0 1px 3px rgba(0,0,0,.30);
}
.combined-card.is-luta .tbadge-w > img.tbadge-cc { width: 19px; height: 19px; bottom: -2px; }
.combined-card.is-luta .tbadge-w--e > img.tbadge-cc { left: -2px; }
.combined-card.is-luta .tbadge-w--d > img.tbadge-cc { right: -2px; }
.combined-card.is-cross.is-luta .tbadge-w > img.tbadge-cc { width: 16px; height: 16px; bottom: -2.5px; }
.combined-card.is-cross.is-luta .tbadge-w--e > img.tbadge-cc { left: -2.5px; }
.combined-card.is-cross.is-luta .tbadge-w--d > img.tbadge-cc { right: -2.5px; }

/* TURBINADA DE TENIS (11/09/2026, dono): sem a linha de foto/bandeira os textos ficavam colados
   (0px entre titulo, confrontos e selecoes). Respiro proprio so pro card de tenis. */
.combined-card.is-tenis .tcard-head { padding-bottom: 8px; }
.combined-card.is-tenis .tcard-match { padding-top: 6px; padding-bottom: 6px; line-height: 1.3; }
.combined-card.is-tenis .tcard-match + .tcard-match { border-top: 1px solid rgba(255,255,255,0.07); }
.combined-card.is-tenis .tcard-legs { padding-top: 10px; }
.combined-card.is-tenis .tcard-oddrow { margin-top: 4px; }
/* TURBINADA DE TENIS (11/09/2026): campeonato em UMA linha curta, sem quebrar */
.combined-card.is-tenis .tcard-meta { gap: 2px; }
.combined-card.is-tenis .tcard-league {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal;
}
/* TURBINADA (11/09/2026, dono): bolinha antes de cada campeonato pra separar um do outro;
   recuo pendurado = a 2a linha de nome longo alinha com o texto. Todos os esportes. */
.combined-card .tcard-league { position: relative; padding-left: 9px; }
.combined-card .tcard-league::before {
    content: ''; position: absolute; left: 0; top: .45em;
    width: 4px; height: 4px; border-radius: 50%; background: #00E870;
}
.combined-card .tcard-league + .tcard-league { margin-top: 2px; }
/* BASQUETE NO CARD DE TURBINADA (12/09/2026, dono: "bandeiras no formato antigo... ate os escudos
   pretos antigos apareceram"). O card passou a desenhar a identidade da home (teamIdent/.pcc-tid),
   mas as regras dela em premium-cards.css comecam por `body[data-sport="basquete"]` e card de
   basquete tambem aparece na aba de futebol — entao o medalhao ganha tamanho e cor AQUI, sem
   depender do body. Cores no mesmo valor "invertido" das --bk-* (o tema claro inverte a pagina). */
html body .combined-card .pcc-tid.pcc-tid {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%; overflow: hidden;
    background: #000000;
    box-shadow: 0 0 0 1px #151a17, 0 1px 2px rgba(255, 255, 255, .06);
    color: #58615c;
}
html body .combined-card .pcc-tid.pcc-tid img { display: block; width: 100%; height: 100%; }
html body .combined-card .pcc-tid--flag.pcc-tid img {
    width: calc(100% - 5px); height: calc(100% - 5px); border-radius: 50%; object-fit: cover;
}
html body .combined-card .pcc-tid--logo.pcc-tid img { object-fit: contain; padding: 2px; box-sizing: border-box; }
html body .combined-card .pcc-tid--vazio.pcc-tid svg { width: 15px; height: 15px; }
/* card de UM jogo (verde): medalhao maior, como o .tbadge de 40px que ele substitui */
html body .combined-card:not(.is-cross) .pcc-tid.pcc-tid { width: 40px; height: 40px; }
html body .combined-card:not(.is-cross) .pcc-tid--logo.pcc-tid img { padding: 3px; }
html body .combined-card:not(.is-cross) .pcc-tid--vazio.pcc-tid svg { width: 22px; height: 22px; }

/* Print do bilhete no modal de compartilhar (18/09/2026) */
.share-preview { margin: 4px auto 14px; max-width: 240px; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,.14); }
.share-preview img { display: block; width: 100%; max-height: 32vh; object-fit: contain; background: #eef3ef; }

/* PROVA SOCIAL da turbinada (12/10/2026): "143.043 pessoas pegaram essa turbinada" */
.tcard-social {
    display:flex; align-items:center; gap:6px; padding: 0 14px 6px;
    font-size:10px; font-weight:600; letter-spacing:.2px; color: rgba(240,245,241,0.70);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tcard-social-n { font-weight:900; font-variant-numeric: tabular-nums; color: var(--tc-neon, #00E870); text-shadow: 0 0 10px rgba(0,232,112,0.35); }
.tcard-social-dot {
    width:6px; height:6px; border-radius:50%; flex:0 0 6px; background: var(--tc-neon, #00E870);
    box-shadow: 0 0 0 0 rgba(0,232,112,0.55); animation: tcardPulse 1.8s ease-out infinite;
}
.combined-card.is-cross .tcard-social-n { color: var(--primary); text-shadow: 0 0 10px rgba(255,215,0,0.30); }
.combined-card.is-cross .tcard-social-dot { background: var(--primary); box-shadow: 0 0 0 0 rgba(255,215,0,0.5); animation-name: tcardPulseGold; }
@keyframes tcardPulse { 0% { box-shadow: 0 0 0 0 rgba(0,232,112,0.55); } 70% { box-shadow: 0 0 0 7px rgba(0,232,112,0); } 100% { box-shadow: 0 0 0 0 rgba(0,232,112,0); } }
@keyframes tcardPulseGold { 0% { box-shadow: 0 0 0 0 rgba(255,215,0,0.5); } 70% { box-shadow: 0 0 0 7px rgba(255,215,0,0); } 100% { box-shadow: 0 0 0 0 rgba(255,215,0,0); } }

/* PROVA SOCIAL FORA DO CARD (12/10/2026): card + barra "N pessoas pegaram essa turbinada" */
.tcard-wrap { flex: 0 0 232px; display:flex; flex-direction:column; gap:8px; scroll-snap-align:start; }
.tcard-wrap > .combined-card { flex: 0 0 auto; width:100%; scroll-snap-align:unset; }
.tsocial {
    --ts-a: #00E870; --ts-b: #19C3FF;
    position:relative; display:flex; align-items:center; gap:10px;
    padding: 9px 12px; border-radius: 14px; isolation:isolate; overflow:hidden;
    background: linear-gradient(160deg, rgba(14,19,16,0.92), rgba(7,10,8,0.96));
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 10px 24px -14px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.05);
}
/* borda em gradiente (neon -> ciano) desenhada por mascara, sem engordar a caixa */
.tsocial::before {
    content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; z-index:-1;
    background: linear-gradient(120deg, var(--ts-a), var(--ts-b) 55%, transparent 85%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; opacity:.9;
}
/* brilho varrendo de tempos em tempos */
.tsocial::after {
    content:''; position:absolute; top:0; bottom:0; width:40%; left:-50%; z-index:0; pointer-events:none;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.07), transparent);
    animation: tsocialSweep 4.5s ease-in-out infinite;
}
.tsocial-live { position:relative; width:10px; height:10px; flex:0 0 10px; }
.tsocial-live i { position:absolute; inset:2px; border-radius:50%; background: var(--ts-a); box-shadow: 0 0 8px var(--ts-a); }
.tsocial-live::before { content:''; position:absolute; inset:0; border-radius:50%; border:1px solid var(--ts-a); opacity:.8; animation: tsocialPing 1.6s cubic-bezier(0,0,.2,1) infinite; }
.tsocial-n {
    font-size: 20px; font-weight: 900; line-height: 1; letter-spacing: -.3px;
    font-variant-numeric: tabular-nums; color: #fff;
    background: linear-gradient(90deg, #fff 0%, var(--ts-a) 55%, var(--ts-b) 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 10px rgba(0,232,112,0.35));
}
.tsocial-t { font-size: 9.5px; font-weight: 700; line-height: 1.1; letter-spacing: .6px; text-transform: uppercase; color: rgba(240,245,241,0.62); }
.tsocial.is-gold   { --ts-a: #FFD84D; --ts-b: #FF8A3D; }
.tsocial.is-gold .tsocial-n { filter: drop-shadow(0 0 10px rgba(255,216,77,0.35)); }
.tsocial.is-purple { --ts-a: #B377FF; --ts-b: #19C3FF; }
.tsocial.is-purple .tsocial-n { filter: drop-shadow(0 0 10px rgba(179,119,255,0.4)); }
@keyframes tsocialPing { 0% { transform: scale(.8); opacity:.9; } 100% { transform: scale(2.2); opacity:0; } }
.tsocial-n.is-tick { animation: tsocialTick .45s ease-out; }
@keyframes tsocialTick { 0% { transform: translateY(-3px); filter: drop-shadow(0 0 14px rgba(0,232,112,0.7)); } 100% { transform: none; } }
@keyframes tsocialSweep { 0%, 55% { left:-50%; } 100% { left:120%; } }

/* VITRINE DE GANHOS v2 (12/10/2026): COMPACTA e minimalista — uma linha por item, foto do jogador (ou iniciais),
   toque abre as selecoes. Vidro escuro + fio em gradiente; o tema claro do admin inverte tudo (sem override claro). */
.vitrine-section { margin: 4px 0 12px; }
.vt-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }   /* so o ranking desde 12/10 */
.vt-panel { --vt-a: #00E870; --vt-b: #19C3FF; position: relative; isolation: isolate; border-radius: 14px; padding: 9px 10px 6px; overflow: hidden;
    background: linear-gradient(160deg, rgba(14,19,16,0.94), rgba(7,10,8,0.97)); box-shadow: 0 10px 24px -18px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.05); }
.vt-panel::before { content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; z-index:-1;
    background: linear-gradient(120deg, var(--vt-a), var(--vt-b) 55%, transparent 85%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity:.8; }
.vt-rank { --vt-a: #FFD84D; --vt-b: #FF8A3D; }
.vt-head { display:flex; align-items:center; gap:7px; margin-bottom: 6px; }
.vt-ic { font-size: 13px; }
.vt-title { font-size: 11px; font-weight: 900; letter-spacing: 1.1px; text-transform: uppercase; color:#fff;
    background: linear-gradient(90deg, #fff 0%, var(--vt-a) 60%, var(--vt-b) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.vt-sub { margin-left:auto; font-size: 9.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: rgba(240,245,241,0.45); }
.vt-live { position:relative; width:9px; height:9px; flex:0 0 9px; }
.vt-live i { position:absolute; inset:2px; border-radius:50%; background:var(--vt-a); box-shadow:0 0 7px var(--vt-a); }
.vt-live::before { content:''; position:absolute; inset:0; border-radius:50%; border:1px solid var(--vt-a); animation: tsocialPing 1.6s cubic-bezier(0,0,.2,1) infinite; }
.vt-list { display:flex; flex-direction:column; gap:2px; max-height: 196px; overflow-y:auto; scrollbar-width: thin; padding-right:2px; }
.vt-it { position:relative; border-radius: 9px; padding: 4px 6px; cursor: default; }
.vt-it:has(.vt-pernas) { cursor: pointer; }
.vt-it:hover { background: rgba(255,255,255,0.035); }
.vt-l { display:flex; align-items:center; gap:8px; min-height: 28px; }
.vt-pos { width:16px; font-size:10px; font-weight:900; color: rgba(240,245,241,0.45); text-align:center; flex:0 0 16px; font-variant-numeric: tabular-nums; }
.vt-it.top1 .vt-pos { color:#FFD84D; } .vt-it.top2 .vt-pos { color:#D7DEE6; } .vt-it.top3 .vt-pos { color:#E3A86C; }
.vt-av { position:relative; width:28px; height:28px; border-radius:50%; flex:0 0 28px; overflow:hidden; display:grid; place-items:center;
    background: rgba(255,255,255,0.08); box-shadow: 0 0 0 1px rgba(255,255,255,0.08); }
.vt-av img { width:100%; height:100%; object-fit:cover; display:block; }
.vt-av i { display:none; font-style:normal; font-size:10px; font-weight:900; letter-spacing:.3px; color:#fff; }
.vt-av.is-ini { background: linear-gradient(135deg, hsl(var(--h,140) 70% 42%), hsl(calc(var(--h,140) + 40) 70% 32%)); }
.vt-av.is-ini i { display:block; }
.vt-it.top1 .vt-av { box-shadow: 0 0 0 1.5px #FFD84D, 0 0 10px rgba(255,216,77,0.45); }
.vt-txt { display:flex; flex-direction:column; min-width:0; flex:1; line-height:1.15; }
.vt-nome { font-size: 12px; font-weight: 800; color: #f0f5f1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vt-det { font-size: 9.5px; font-weight: 600; color: rgba(240,245,241,0.45); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vt-val { display:flex; flex-direction:column; align-items:flex-end; line-height:1.1; font-size: 12.5px; font-weight: 900; letter-spacing:-.2px; font-variant-numeric: tabular-nums; white-space:nowrap;
    background: linear-gradient(90deg, #fff 0%, var(--vt-a) 55%, var(--vt-b) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.vt-val small { font-size: 8.5px; font-weight: 600; -webkit-text-fill-color: rgba(240,245,241,0.4); }
.vt-pernas { list-style:none; margin:4px 0 2px 36px; padding:5px 0 0; border-top:1px dashed rgba(255,255,255,0.08); display:none; flex-direction:column; gap:2px; }
.vt-it.is-open .vt-pernas { display:flex; }
.vt-pernas li { display:flex; flex-direction:column; font-size:10px; line-height:1.2; }
.vt-pernas li b { color: rgba(240,245,241,0.9); font-weight:700; }
.vt-pernas li span { color: rgba(240,245,241,0.45); }
.vt-pernas .vt-mais { color: rgba(240,245,241,0.45); font-style: italic; }
.vt-vazio { font-size:11px; color: rgba(240,245,241,0.5); padding: 8px 4px; }
.vt-it.is-fake::after { content:''; position:absolute; top:5px; right:5px; width:3px; height:3px; border-radius:50%; background: rgba(255,255,255,0.16); }
.vt-it.vt-f.is-new { animation: vtIn .5s cubic-bezier(.2,.9,.3,1.2) both; }
.vt-it.vt-r.is-new { animation: vtGlow 1.2s ease-out both; }
@keyframes vtIn { 0% { opacity:0; transform: translateY(-10px); } 60% { background: rgba(0,232,112,0.12); } 100% { opacity:1; transform:none; } }
@keyframes vtGlow { 0% { background: rgba(255,216,77,0.16); } 100% { background: transparent; } }
/* foto no modal de perfil */
.pm-avatar { position:relative; overflow:hidden; cursor:pointer; }
.pm-avatar img { width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; }
.pm-avatar-edit { position:absolute; right:-2px; bottom:-2px; width:22px; height:22px; border-radius:50%; background:#00E870; color:#06130a; display:grid; place-items:center; box-shadow:0 2px 8px rgba(0,0,0,.5); }
.pm-avatar-edit .material-symbols-outlined { font-size:14px !important; color:#06130a !important; }
.pm-avatar-hint { font-size:10px; color: rgba(240,245,241,0.5); margin-top:2px; text-align:center; }
/* banco de avatares (12/10/2026) */
.pm-av-grid { display:grid; grid-template-columns: repeat(6, 1fr); gap:8px; max-height: 52vh; overflow-y:auto; padding: 4px 2px; }
@media (max-width: 400px) { .pm-av-grid { grid-template-columns: repeat(5, 1fr); } }
.pm-av-opt { aspect-ratio:1; border-radius:50%; border:2px solid transparent; padding:0; background:rgba(255,255,255,0.05); cursor:pointer; overflow:hidden; transition: transform .15s ease, border-color .15s ease; }
.pm-av-opt img { width:100%; height:100%; display:block; object-fit:cover; }
.pm-av-opt:hover { transform: scale(1.06); }
.pm-av-opt.is-on { border-color:#00E870; box-shadow: 0 0 0 2px rgba(0,232,112,0.35); }

/* PODIO do ranking do dia (12/10/2026): 3 lado a lado, 1o no meio e maior */
.vt-podio { display:grid; grid-template-columns: 1fr 1.25fr 1fr; align-items:end; gap:6px; padding: 2px 0 4px; max-width: 420px; margin: 0 auto; }
.vt-p { display:flex; flex-direction:column; align-items:center; text-align:center; gap:3px; padding: 8px 4px 7px; border-radius: 12px; background: rgba(255,255,255,0.03); position:relative; min-width:0; }
.vt-p .vt-av { width:40px; height:40px; flex-basis:40px; }
.vt-p .vt-av i { font-size:13px; }
.vt-p.pos1 { padding-top: 10px; background: linear-gradient(180deg, rgba(255,216,77,0.10), rgba(255,255,255,0.02)); }
.vt-p.pos1 .vt-av { width:54px; height:54px; flex-basis:54px; box-shadow: 0 0 0 2.5px #F5C026, 0 0 16px rgba(255,216,77,0.5); }
.vt-p.pos1 .vt-av i { font-size:17px; }
/* prata = cinza METALICO medio (o quase-branco sumia no tema claro); aneis de 2 px */
.vt-p.pos2 .vt-av { box-shadow: 0 0 0 2px #9AA5B1, 0 0 10px rgba(154,165,177,0.55); }
.vt-p.pos3 .vt-av { box-shadow: 0 0 0 2px #CD7F32, 0 0 10px rgba(205,127,50,0.45); }
.vt-medal { width: 20px; height: auto; display:block; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5)); }
.vt-p.pos1 .vt-medal { width: 25px; }
.vt-pnome { font-size: 11px; font-weight: 800; color:#f0f5f1; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vt-p.pos1 .vt-pnome { font-size: 12.5px; }
.vt-plucro { font-size: 12px; font-weight: 900; letter-spacing:-.2px; font-variant-numeric: tabular-nums; white-space:nowrap;
    background: linear-gradient(90deg, #fff 0%, #FFD84D 55%, #FF8A3D 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter: drop-shadow(0 0 8px rgba(255,216,77,0.35)); }
.vt-p.pos1 .vt-plucro { font-size: 15px; }
.vt-pdet { font-size: 9px; font-weight: 600; color: rgba(240,245,241,0.45); white-space:nowrap; }
.vt-p.is-new { animation: vtGlow 1.2s ease-out both; }
.vt-eu { display:flex; align-items:center; gap:10px; padding: 9px 12px; border-radius: 14px; isolation:isolate; position:relative; overflow:hidden;
    background: linear-gradient(160deg, rgba(14,19,16,0.92), rgba(7,10,8,0.96)); box-shadow: 0 10px 24px -14px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.05); }
.vt-eu::before { content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; z-index:-1; background: linear-gradient(120deg, #00E870, #19C3FF 55%, transparent 85%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity:.8; }
.vt-eu-ic { font-size: 16px; }
.vt-eu-t { display:flex; flex-direction:column; flex:1; font-size: 11px; font-weight: 800; letter-spacing:.6px; text-transform: uppercase; color: rgba(240,245,241,0.85); line-height:1.15; }
.vt-eu-t small { font-size: 9.5px; font-weight: 600; letter-spacing:.2px; text-transform:none; color: rgba(240,245,241,0.5); margin-top:2px; }
.vt-eu-v { font-size: 18px; font-weight: 900; letter-spacing:-.3px; font-variant-numeric: tabular-nums; color:#fff;
    background: linear-gradient(90deg, #fff 0%, #00E870 55%, #19C3FF 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter: drop-shadow(0 0 10px rgba(0,232,112,0.35)); }
.vt-eu-v.is-top { background: linear-gradient(90deg, #fff 0%, #FFD84D 55%, #FF8A3D 100%); -webkit-background-clip:text; background-clip:text; filter: drop-shadow(0 0 10px rgba(255,216,77,0.4)); }
.vt-eu-fora { font-size: 11px; font-weight: 700; letter-spacing:.2px; }
.vt-pfoto { margin-top:4px; font-size:8.5px; font-weight:800; letter-spacing:.3px; text-transform:uppercase; color:#00E870; cursor:pointer; }
.vt-av-eu { position:relative; display:inline-grid; cursor:pointer; border-radius:50%; }
.vt-av-eu .vt-av { animation: vtAvPulse 2.2s ease-in-out infinite; }
.vt-av-cam { position:absolute; right:-3px; bottom:-3px; width:18px; height:18px; border-radius:50%; background:#00E870; color:#06130a; display:grid; place-items:center; box-shadow:0 2px 6px rgba(0,0,0,.6), 0 0 0 2px #0a0f0c; }
.vt-av-cam svg { width:11px; height:11px; }
.vt-p.pos1 .vt-av-cam { width:21px; height:21px; } .vt-p.pos1 .vt-av-cam svg { width:13px; height:13px; }
@keyframes vtAvPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }   /* escala, nao filtro: o filtro apagaria a re-inversao do tema claro */
@media (prefers-reduced-motion: reduce) { .vt-av-eu .vt-av { animation:none; } }
/* icone de avatar em SVG (a fonte de icones do site nao tem o glifo face) */
.pm-ico-av { width:20px; height:20px; display:inline-block; vertical-align:middle; color:currentColor; }
.pm-avatar-edit .pm-ico-av { width:13px; height:13px; color:#06130a; }
.pm-link-ic .pm-ico-av, .pm-link-ic.pm-ico-av { width:22px; height:22px; }