/* =========================================
   TIBM - RESULTADOS PUBLIC
   Dark Moderno Refinado · Mobile First
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:          #0d1117;
    --surface-1:   #161b24;
    --surface-2:   #1c2333;
    --surface-3:   #222c3c;
    --border:      rgba(255,255,255,0.07);
    --border-md:   rgba(255,255,255,0.12);

    --blue:        #3b82f6;
    --blue-dark:   #1d4ed8;
    --blue-dim:    rgba(59,130,246,0.12);

    --text:        #e2e8f0;
    --text-mid:    #94a3b8;
    --text-faint:  #f0a500;

    --verde:       #10b981;
    --vermelho:    #ef4444;
    --laranja:     #f59e0b;
    --ciano:       #06b6d4;
    --dourado:     #facc15;

    --radius:      12px;
    --radius-lg:   18px;
}

/* =========================================
   BASE
   ========================================= */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* =========================================
   HEADER
   ========================================= */
header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(13,17,23,0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    padding: 12px 16px;
    text-align: center;
}

.header-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.logo  { width: 100px; }
.logo2 { width: 120px; }

header h2 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.3px;
    margin-top: 4px;
}

/* =========================================
   CONTAINER
   ========================================= */
.container {
    max-width: 860px;
    margin: 0 auto;
    padding: 14px 12px 32px;
}

/* =========================================
   CATEGORIAS
   ========================================= */
.categoriasBox {
    margin-bottom: 20px;
    background: var(--surface-1);
    border-radius: var(--radius-lg);
    padding: 14px;
    border: 1px solid var(--border);
}

.categoriasTitulo {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
    padding-left: 2px;
}

.categorias {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
}

.btnCategoria {
    padding: 9px 6px;
    border: 1px solid var(--border-md);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text-mid);
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Inter', sans-serif;
    line-height: 1.2;
    text-align: center;
}

.btnCategoria:hover {
    background: var(--surface-3);
    color: var(--text);
    border-color: var(--blue);
}

.btnCategoria.ativo {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
    font-weight: 700;
    box-shadow: 0 0 16px rgba(59,130,246,0.35);
}

/* =========================================
   RODADA TÍTULO
   ========================================= */
.rodadaTitulo {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 24px 0 10px 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rodadaTitulo::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* =========================================
   CARD BASE
   ========================================= */
.card {
    background: var(--surface-1);
    border-radius: var(--radius-lg);
    padding: 14px;
    margin-bottom: 10px;
    border: 1px solid var(--border);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    overflow: hidden;
}

/* =========================================
   CARD STATUS — GLOWS
   ========================================= */
@keyframes glow-red {
    0%, 100% { box-shadow: 0 0 6px rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.25); }
    50%       { box-shadow: 0 0 22px rgba(239,68,68,0.45); border-color: rgba(239,68,68,0.6); }
}

@keyframes glow-orange {
    0%, 100% { box-shadow: 0 0 6px rgba(245,158,11,0.15); border-color: rgba(245,158,11,0.25); }
    50%       { box-shadow: 0 0 18px rgba(245,158,11,0.45); border-color: rgba(245,158,11,0.6); }
}

@keyframes glow-cyan {
    0%, 100% { box-shadow: 0 0 5px rgba(6,182,212,0.12); border-color: rgba(6,182,212,0.2); }
    50%       { box-shadow: 0 0 16px rgba(6,182,212,0.4); border-color: rgba(6,182,212,0.55); }
}

.card-ao-vivo   { animation: glow-red    2s infinite; }
.card-intervalo { animation: glow-orange 2s infinite; }
.card-em-breve  { animation: glow-cyan   2.5s infinite; }

.card-finalizado {
    border-color: rgba(16,185,129,0.35) !important;
    box-shadow: 0 0 14px rgba(16,185,129,0.2) !important;
}

.card-clicavel { cursor: pointer; }

.card-finalizado:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 28px rgba(16,185,129,0.4) !important;
    border-color: var(--verde) !important;
}

/* =========================================
   JOGO HEADER (status)
   ========================================= */
.jogoHeader {
    display: none;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-mid);
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.statusText {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 5px;
}

.tempoText {
    flex: 1;
    text-align: center;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--text);
}

.periodoText {
    flex: 1;
    text-align: right;
    color: var(--text-mid);
}

/* DOT piscante */
.dot { width: 7px; height: 7px; border-radius: 50%; display: none; flex-shrink: 0; }
.dot-blink {
    display: inline-block;
    background: var(--vermelho);
    animation: blink 1s infinite;
    box-shadow: 0 0 6px var(--vermelho);
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.25; }
}

.status-ao-vivo  { color: var(--vermelho); }
.status-intervalo{ color: var(--laranja); }
.status-final    { color: var(--verde); }
.status-em-breve { color: var(--ciano); }

/* =========================================
   JOGO BODY
   ========================================= */
.jogo {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.timeA {
    font-size: 11px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.timeB {
    font-size: 11px;
    font-weight: 700;
    color: var(--text);
    text-align: right;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* =========================================
   PLACAR BOX
   ========================================= */
.placarBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.placar {
    font-weight: 900;
    font-size: 15px;
    padding: 6px 14px;
    border-radius: 8px;
    background: var(--surface-3);
    color: var(--text);
    min-width: 60px;
    text-align: center;
    letter-spacing: 1px;
    border: 1px solid var(--border-md);
}

/* Placar com resultado */
.card-finalizado .placar {
    background: rgba(16,185,129,0.1);
    border-color: rgba(16,185,129,0.3);
    color: #fff;
}

/* Placar ao vivo */
.card-ao-vivo .placar {
    background: rgba(239,68,68,0.1);
    border-color: rgba(239,68,68,0.3);
}

/* =========================================
   BADGE W.O.
   ========================================= */
.badge-wo {
    background: var(--vermelho);
    color: white;
    font-size: 9px;
    font-weight: 900;
    padding: 2px 7px;
    border-radius: 4px;
    margin-top: 4px;
    letter-spacing: 0.5px;
    animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.05); }
}

/* =========================================
   JOGO FOOTER (data/ginásio)
   ========================================= */
.jogoFooter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    gap: 8px;
    flex-wrap: wrap;
}

.jogoFooter span {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-mid);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    background: var(--surface-3);
    padding: 4px 9px;
    border-radius: 6px;
    border: 1px solid var(--border-md);
}

/* =========================================
   PÓDIO
   ========================================= */
.podioLinha {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 16px;
    border-radius: var(--radius);
    font-weight: 700;
    margin-bottom: 8px;
    font-size: 14px;
    gap: 8px;
}

.campeao {
    background: linear-gradient(135deg, #fde68a, var(--dourado));
    color: #000;
    box-shadow: 0 0 20px rgba(250,204,21,0.35);
}

.vice {
    background: linear-gradient(135deg, #cbd5e1, #94a3b8);
    color: #0f172a;
}

.terceiro {
    background: linear-gradient(135deg, #fed7aa, #f59e0b);
    color: #000;
}

/* =========================================
   CLASSIFICAÇÃO
   ========================================= */
.card h3 {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 16px 0 10px 2px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card h3::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

.card h3:first-child { margin-top: 0; }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    border-radius: var(--radius);
    overflow: hidden;
}

th {
    background: var(--surface-3);
    color: var(--text-mid);
    padding: 9px 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--border-md);
}

th:first-child { text-align: left; padding-left: 12px; }

td {
    padding: 10px 8px;
    text-align: center;
    border-bottom: 1px solid var(--border);
    color: var(--text-mid);
    background: transparent;
}

td:first-child {
    text-align: left;
    padding-left: 12px;
    font-weight: 700;
    color: var(--text);
}

tr:last-child td { border-bottom: none; }

tr:hover td {
    background: rgba(255,255,255,0.03);
}

/* posição ranking */
td:first-child::before {
    display: none;
}

/* =========================================
   RESPONSIVO
   ========================================= */
@media (max-width: 480px) {
    header { padding: 10px 12px; }
    .logo  { width: 80px; }
    .logo2 { width: 95px; }
    header h2 { font-size: 13px; }

    .container { padding: 10px 10px 28px; }

    .categorias { grid-template-columns: repeat(auto-fill, minmax(85px, 1fr)); gap: 7px; }
    .btnCategoria { font-size: 11px; padding: 8px 4px; }

    .timeA, .timeB { font-size: 10px; }
    .placar { font-size: 13px; min-width: 52px; padding: 5px 10px; }

    .jogoFooter span { font-size: 9px; padding: 3px 7px; }
    .podioLinha { font-size: 12px; padding: 11px 12px; }
    table { font-size: 11px; }
    th { padding: 8px 6px; font-size: 9px; }
    td { padding: 9px 6px; }
}

@media (min-width: 600px) {
    .categorias { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
    .timeA, .timeB { font-size: 14px; }
    .placar { font-size: 16px; min-width: 68px; }
}

@media (min-width: 860px) {
    .container { padding: 16px 12px 40px; }
    .card { padding: 16px; }
}
/* ════════════════════════════════════════
   LOGOS NOS CARDS DE JOGO
   Adicionar ao final do assets/style.css
   ════════════════════════════════════════ */

.jogo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.time-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0; /* permite o nome encolher/quebrar se for muito longo */
}

.time-wrapper.home {
    justify-content: flex-start;
}

.time-wrapper.away {
    justify-content: flex-end;
    flex-direction: row;
}

.logo-time {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 4px;
}

.logo-space {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

/* Garante que os nomes dos times não estourem o layout */
.timeA,
.timeB {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.time-wrapper.home .timeA {
    text-align: left;
}

.time-wrapper.away .timeB {
    text-align: right;
}