/* Telas do jogo virtual (atleta e administrador). Usa as variaveis de admin.css. */
.jg-chamada { background: linear-gradient(135deg, #0b1a2a 0%, #2e62ad 130%); color: #fff; border-radius: var(--rr-raio); padding: 20px 22px; margin-bottom: 15px; position: relative; overflow: hidden; }
.jg-chamada h4 { margin: 0 0 4px; color: #fff; }
.jg-chamada p { color: #c9d6e3; margin-bottom: 14px; }
.jg-chamada .jg-bola { position: absolute; right: -30px; top: -30px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ecff7a, #d8f03a 55%, #b9d21c); opacity: .9; }
.btn-bola { background: #d8f03a; color: #0b1a2a; border: 0; font-weight: 800; letter-spacing: .5px; position: relative; }
.btn-bola:hover { background: #e6ff5a; color: #0b1a2a; }

.jg-barras { list-style: none; padding: 0; margin: 0; }
.jg-barras li { margin-bottom: .5rem; }
.jg-barra-rotulo { display: flex; justify-content: space-between; gap: .5rem; font-size: .85rem; }
.jg-barra-rotulo span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jg-barra { height: 7px; border-radius: 4px; background: var(--rr-fundo); overflow: hidden; margin-top: 3px; }
.jg-barra div { height: 100%; background: var(--rr-acento); border-radius: 4px; }

.jg-partida { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--rr-borda); }
.jg-partida:last-child { border-bottom: 0; }
.jg-res { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; color: #fff; flex-shrink: 0; }
.jg-res.v { background: var(--rr-ok); } .jg-res.d { background: var(--rr-perigo); } .jg-res.a { background: var(--rr-alerta); }
.jg-info { flex: 1; min-width: 0; }
.jg-placar { font-weight: 800; }
.jg-pts { font-weight: 800; color: var(--rr-acento-escuro); white-space: nowrap; }

.jg-eu { background: rgba(216, 240, 58, .25); }
.jg-pos { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--rr-fundo); font-weight: 800; font-size: 12px; }
.jg-pos.p1 { background: #fbbf24; color: #fff; } .jg-pos.p2 { background: #94a3b8; color: #fff; } .jg-pos.p3 { background: #c2773b; color: #fff; }

.jg-torneio { border-left: 4px solid var(--rr-acento); }
.jg-torneio.encerrado { border-left-color: #cbd5e1; opacity: .85; }
.jg-regras { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.jg-regras span { background: var(--rr-fundo); border-radius: 6px; padding: 2px 8px; font-size: .8rem; font-weight: 600; }

.jg-serie { width: 100%; height: 200px; display: block; }
.jg-legenda { font-size: 12px; color: var(--rr-tinta-suave); }
.jg-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 4px 0 12px; vertical-align: -1px; }
.jg-legenda i:first-child { margin-left: 0; }
/* Monitor largo: as 8 metricas numa linha so (o Bootstrap 4 para no xl). */
@media (min-width: 1680px) {
    .col-jg-m { flex: 0 0 12.5%; max-width: 12.5%; }
    .col-jg-4 { flex: 0 0 33.333%; max-width: 33.333%; }
    .col-jg-5 { flex: 0 0 41.666%; max-width: 41.666%; }
    .col-jg-7 { flex: 0 0 58.333%; max-width: 58.333%; }
    .col-jg-8 { flex: 0 0 66.666%; max-width: 66.666%; }
}