/* =========================================================
   BRASFOOT 22-23 - CSS OFICIAL DAS TELAS DE PARTIDA & PÓS-JOGO
   Idêntico aos screenshots oficiais do Brasfoot 22-23
   ========================================================= */

/* CONTAINER DA TELA DE JOGO / INTERVALO / PÓS-JOGO */
.bf-match-fullscreen {
  width: 900px;
  max-width: 96vw;
  background-color: #123d24;
  border: 2px solid #004d1a;
  border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.9);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ---------------------------------------------------------
   1. TELA DE PARTIDA AO VIVO (SCREENSHOT 1)
--------------------------------------------------------- */
.live-match-header {
  background: #082914 url('../assets/img/campo_diminuido.jpg') center/cover;
  background-color: #0b3319;
  border-bottom: 2px solid #004d1a;
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.6);
}

.live-match-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: bold;
  color: var(--bf-yellow);
}

.live-match-progressbar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.live-match-prog-track {
  width: 120px;
  height: 10px;
  background: #ffffff;
  border: 1px solid #000;
  border-radius: 2px;
  overflow: hidden;
}

.live-match-prog-fill {
  height: 100%;
  background: #27ae60;
  width: 10%;
  transition: width 0.3s linear;
}

.live-match-scoreboard-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.live-team-badge-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.live-team-shield-img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.live-team-bar {
  flex: 1;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: bold;
  color: #000000;
  display: flex;
  align-items: center;
  border-radius: 2px;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.4), 1px 1px 3px rgba(0,0,0,0.4);
}

.live-team-bar.home {
  background: #ffd600; /* Amarelo */
  justify-content: flex-end;
}

.live-team-bar.away {
  background: #00a651; /* Verde */
  color: #ffffff;
  justify-content: flex-start;
}

.live-score-center-display {
  font-family: 'Segoe UI', 'Impact', sans-serif;
  font-size: 24px;
  font-weight: 900;
  color: #ffffff;
  padding: 0 10px;
  text-shadow: 1px 1px 3px #000;
  white-space: nowrap;
}

/* Estatísticas Rápidas no Cabeçalho */
.live-header-stats-table {
  font-size: 10px;
  color: #ffffff;
  border-collapse: collapse;
  margin-left: 10px;
}

.live-header-stats-table td {
  padding: 1px 4px;
}

.live-header-stats-table td.stat-label {
  text-align: center;
  color: #e0e0e0;
  font-weight: bold;
}

.live-header-stats-table td.stat-num {
  font-weight: bold;
}

/* Corpo Verde com a lista dos 10 jogos da rodada */
.live-round-matches-board {
  background: #143d22;
  padding: 12px 16px;
  min-height: 440px;
  max-height: 500px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.live-round-title-label {
  font-size: 11px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 6px;
}

.live-match-row-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11px;
  font-weight: bold;
}

.live-row-team {
  width: 140px;
  padding: 3px 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 2px;
  color: #000;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.live-row-team.home {
  background: #c0392b;
  color: #fff;
  justify-content: flex-start;
}

.live-row-team.away {
  background: #f1c40f;
  color: #000;
  justify-content: flex-start;
}

.live-row-team.user-home {
  background: #ffd600;
  color: #000;
}

.live-row-team.user-away {
  background: #00a651;
  color: #fff;
}

.live-row-score-box {
  background: #041421;
  color: #ffffff;
  padding: 3px 8px;
  border-radius: 2px;
  min-width: 44px;
  text-align: center;
  font-size: 11px;
  font-weight: 900;
}

/* ---------------------------------------------------------
   2. TELA DE INTERVALO & ESCALAÇÃO TÁTICA (SCREENSHOT 2 & 3)
--------------------------------------------------------- */
.tactics-interval-grid {
  display: grid;
  grid-template-columns: 180px 1fr 260px;
  background: #0d2c18;
  padding: 10px;
  gap: 10px;
  min-height: 480px;
}

/* Banco de reservas à esquerda */
.tactics-bench-panel {
  background: #092011;
  border: 1px solid #145a32;
  border-radius: 3px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  max-height: 450px;
}

.bench-player-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: #ffffff;
  padding: 3px;
  border-radius: 2px;
  cursor: pointer;
}

.bench-player-item:hover {
  background: rgba(255, 255, 255, 0.15);
}

.bench-jersey-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

/* Campinho Verde no Centro */
.tactics-pitch-box {
  background: #237a3b url('../assets/img/campo_diminuido.jpg') center/cover;
  border: 2px solid #f1c40f;
  border-radius: 4px;
  position: relative;
  height: 450px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px 10px;
  box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
}

.pitch-line-center {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
}

.pitch-circle-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
}

.tactics-pitch-row {
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 2;
}

.pitch-starter-token {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  text-shadow: 1px 1px 2px #000;
  transition: transform 0.15s ease;
}

.pitch-starter-token:hover {
  transform: scale(1.1);
}

.pitch-starter-jersey {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.pitch-starter-name {
  font-size: 10px;
  font-weight: bold;
  color: #ffffff;
  margin-top: 1px;
  white-space: nowrap;
}

.pitch-starter-sub {
  font-size: 8px;
  color: #e0e0e0;
}

/* Coluna Direita: Placar, Relógio e Eventos */
.tactics-right-sidebar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tactics-sidebar-scoreboard {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tactics-side-team-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: bold;
  border-radius: 2px;
}

.tactics-side-team-bar.home {
  background: #c0392b;
  color: #fff;
}

.tactics-side-team-bar.away {
  background: #f1c40f;
  color: #000;
}

.tactics-clock-card {
  background: #000000;
  border: 1px solid #333;
  border-radius: 3px;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  font-size: 11px;
}

.tactics-events-box {
  background: #061c0d;
  border: 1px solid #145a32;
  border-radius: 3px;
  padding: 8px;
  height: 180px;
  overflow-y: auto;
  font-size: 10px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tactics-stats-table {
  width: 100%;
  font-size: 10px;
  color: #fff;
  text-align: center;
  border-collapse: collapse;
}

.tactics-stats-table td {
  padding: 2px;
}

/* Barra de Controles Inferior do Intervalo */
.tactics-bottom-actionbar {
  background: #05160b;
  border-top: 1px solid #145a32;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: #fff;
}

.tactics-dropdown-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tactics-dropdown-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 10px;
  font-weight: bold;
}

.tactics-dropdown-item select {
  background: #ffffff;
  color: #000;
  border: 1px solid #707070;
  padding: 3px 6px;
  border-radius: 2px;
  font-size: 11px;
}

/* ---------------------------------------------------------
   3. TELA PÓS-JOGO / RESUMO DA PARTIDA (SCREENSHOT 4)
--------------------------------------------------------- */
.postmatch-modal-container {
  background: #0b3456; /* Fundo Azul Escuro do Screenshot */
  width: 820px;
  border: 2px solid #1a5276;
  border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.9);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.postmatch-top-scoreboard-badge {
  background: radial-gradient(circle, #082944 0%, #031422 100%);
  border: 2px solid #1a5276;
  border-radius: 6px;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 440px;
  margin: 0 auto;
  box-shadow: 0 4px 10px rgba(0,0,0,0.6);
}

.postmatch-top-shield {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.postmatch-top-score-text {
  font-family: 'Segoe UI', 'Impact', sans-serif;
  font-size: 32px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 4px;
}

.postmatch-body-layout {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  gap: 10px;
  background: #ffffff;
  border-radius: 3px;
  padding: 8px;
  color: #000000;
  min-height: 380px;
}

.postmatch-round-list-panel {
  background: #eef3f7;
  border-right: 1px solid #ccc;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
}

.postmatch-squad-ratings-column {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 10px;
}

.postmatch-player-rating-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 4px;
  border-bottom: 1px solid #f0f0f0;
}

.postmatch-player-rating-num {
  font-weight: bold;
  color: #006622;
}

.postmatch-center-events-wrap {
  background: #f7f9fa;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 6px;
  font-size: 10px;
  margin-top: 6px;
}

.postmatch-stats-table-full {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
  margin-top: 8px;
}

.postmatch-stats-table-full td {
  padding: 2px 4px;
  text-align: center;
}

.postmatch-footer-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #031422;
  padding: 8px 12px;
  border-radius: 3px;
}

.postmatch-icons-group {
  display: flex;
  gap: 6px;
}