/* ============================================================
   LAYOUT.CSS — ESTRUCTURA Y MAQUETACIÓN UNIFICADA DE MARCADORES
   Estándar de diseño: Dark Glassmorphism (Referencia: Minivoley)
   ============================================================ */

/* ===== CONTENEDOR PRINCIPAL DEL MARCADOR =====
   Aplica a todos los marcadores actuales y a cualquier nuevo marcador
   que se cree usando clases semánticas estándar o prefijadas. */
.scoreboard,
[class*="scoreboard-"]:not(table):not(.scoreboard-table):not(.players-scoreboard),
.scoreboard-container,
.scoreboard-mobile {
  display: flex !important;
  flex-direction: row !important;
  gap: 12px;
  margin-bottom: 18px;
  align-items: stretch;
  justify-content: center;
  width: 100%;
}

/* ===== TARJETA DE EQUIPO O JUGADOR ===== */
.team,
[class*="team-"]:not([class*="team-name"]):not([class*="team-header"]):not([class*="team-stats"]):not([class*="team-meta"]):not([class*="team-players"]):not([class*="team-fouls"]):not(.team-entry):not(.team-item),
.team-card,
.team-scoreboard,
.team-mobile,
.team-score {
  flex: 1;
  min-width: 0;
  border-radius: 18px;
  padding: 20px 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;

  background: var(--c-glass, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--c-glass-border, rgba(255, 255, 255, 0.11));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.team:hover,
[class*="team-"]:hover,
.team-card:hover,
.team-scoreboard:hover,
.team-mobile:hover,
.team-score:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

/* ===== BORDE SUPERIOR DE COLOR Y HALO POR EQUIPO ===== */
/* Equipo 1 / Local (Rojo luminoso) */
#team1::before,
.team-local::before,
.theme-card-left::before,
:first-child:is(.team, [class*="team-"], .team-score)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c-local, #ff4757), rgba(255, 71, 87, 0.4));
  border-radius: 18px 18px 0 0;
}

#team1,
.team-local,
.theme-card-left,
:first-child:is(.team, [class*="team-"], .team-score) {
  background: linear-gradient(160deg, rgba(255, 71, 87, 0.07) 0%, rgba(255, 255, 255, 0.03) 60%);
}

/* Equipo 2 / Visitante (Azul luminoso) */
#team2::before,
.team-visitor::before,
.theme-card-right::before,
:last-child:is(.team, [class*="team-"], .team-score)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c-visitor, #1e90ff), rgba(30, 144, 255, 0.4));
  border-radius: 18px 18px 0 0;
}

#team2,
.team-visitor,
.theme-card-right,
:last-child:is(.team, [class*="team-"], .team-score) {
  background: linear-gradient(160deg, rgba(30, 144, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 60%);
}

/* ===== NOMBRE DEL EQUIPO O JUGADOR ===== */
[class*="team-name"],
.team-name,
.player-name,
[class*="player-name"] {
  font-family: var(--font-body, 'Outfit', sans-serif);
  font-size: clamp(0.85rem, 2vw, 1.1rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted, rgba(240, 244, 255, 0.55));
  cursor: pointer;
  padding: 4px 12px;
  border-radius: 6px;
  transition: color 0.2s ease, background 0.2s ease;
  text-align: center;
  margin-bottom: 4px;
  margin-top: 4px;
  word-break: break-word;
  max-width: 95%;
}

[class*="team-name"]:hover,
.team-name:hover,
.player-name:hover,
[class*="player-name"]:hover {
  color: var(--c-text, #ffffff);
  background: rgba(255, 255, 255, 0.08);
}

/* Sub-información de jugadores o alineación */
.team-players-padel,
.team-players-tenis,
.team-players,
.players-info-mobile {
  width: 100%;
  background: rgba(0, 0, 0, 0.2);
  padding: 8px 10px;
  border-radius: 8px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.player-entry {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.serve-indicator {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
}

.serve-indicator.active {
  color: var(--c-gold, #ffd700) !important;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
  transform: scale(1.15);
}

/* ===== CIFRAS DEL MARCADOR (NÚMEROS GIGANTES BEBAS NEUE) ===== */
.score,
[class*="score-"]:not(.score-controls):not(.score-display):not(.score-input-group):not(.score-item):not(.score-label):not([class*="score-label"]):not(.score-row):not(.scorecard-wrapper):not(.scorecard-header):not([class*="chart"]):not([class*="history"]),
.score-number,
.score-value-mobile,
.main-score,
.team-score-display,
.total-number {
  font-family: var(--font-display, 'Bebas Neue', sans-serif) !important;
  font-size: clamp(5.5rem, 18vw, 9rem) !important;
  line-height: 1 !important;
  margin: 6px 0 !important;
  text-shadow: none;
  letter-spacing: 0.02em;
  transition: transform 0.15s ease;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Color y resplandor para Equipo 1 / Local */
#team1 .score,
#team1 [class*="score-"],
#team1-score,
.team-local .score,
.team-local [class*="score-"],
.theme-card-left .score-number,
:first-child:is(.team, [class*="team-"], .team-score) .score,
:first-child:is(.team, [class*="team-"], .team-score) [class*="score-"],
:first-child:is(.team, [class*="team-"], .team-score) .score-number {
  color: var(--c-local, #ff4757) !important;
  filter: drop-shadow(0 0 18px var(--c-local-glow, rgba(255, 71, 87, 0.35))) !important;
}

/* Color y resplandor para Equipo 2 / Visitante */
#team2 .score,
#team2 [class*="score-"],
#team2-score,
.team-visitor .score,
.team-visitor [class*="score-"],
.theme-card-right .score-number,
:last-child:is(.team, [class*="team-"], .team-score) .score,
:last-child:is(.team, [class*="team-"], .team-score) [class*="score-"],
:last-child:is(.team, [class*="team-"], .team-score) .score-number {
  color: var(--c-visitor, #1e90ff) !important;
  filter: drop-shadow(0 0 18px var(--c-visitor-glow, rgba(30, 144, 255, 0.35))) !important;
}

/* Animación de punto (+1) */
@keyframes scoreBump {
  0%   { transform: scale(1.45); }
  55%  { transform: scale(0.94); }
  100% { transform: scale(1); }
}

.score.bump,
[class*="score-"].bump,
.score-number.bump,
.bump {
  animation: scoreBump 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Juegos ganados y displays secundarios (Tenis / Pádel) */
.games-display-padel,
.games-display-tenis,
.games-display {
  font-size: 1rem;
  margin: 6px 0;
  color: var(--c-muted, rgba(240, 244, 255, 0.7));
  text-align: center;
}

.games-display strong,
.games-display-padel strong,
.games-display-tenis strong {
  color: var(--c-gold, #ffd700);
}

.games-display span,
.games-display-padel span,
.games-display-tenis span {
  font-family: var(--font-display, 'Bebas Neue', sans-serif);
  font-size: 1.5rem;
  color: #ffffff;
  margin-left: 4px;
}

.tie-break-score {
  font-family: var(--font-display, 'Bebas Neue', sans-serif);
  font-size: 2.2rem;
  color: var(--warning-color, #f39c12);
  margin-top: 4px;
  letter-spacing: 0.05em;
}

/* ===== INDICADOR DE SETS O RONDAS ===== */
.sets-container,
[class*="sets-container-"],
.sets-container-padel,
.sets-container-tenis,
.sets-container-voleibol,
.sets-container-minivoley,
.sets-container-balonmano,
.sets-container-jugger {
  display: flex !important;
  justify-content: center;
  gap: 7px;
  margin: 6px 0 12px;
  flex-wrap: wrap;
  min-height: 26px;
}

.set,
[class*="set-"],
.set-box-padel,
.set-minivoley,
.set-voleibol {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--c-muted, rgba(240, 244, 255, 0.5));
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.set.won,
[class*="set-"].won,
.set-box-padel.set-won-padel,
.set-won-padel,
.set.active {
  background: rgba(255, 215, 0, 0.2) !important;
  border-color: var(--c-gold, #ffd700) !important;
  color: var(--c-gold, #ffd700) !important;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.35) !important;
}

/* ===== GRÁFICO HISTORIAL DE PUNTUACIÓN ===== */
.score-history-chart-section {
  background: var(--c-glass, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--c-glass-border, rgba(255, 255, 255, 0.11));
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 20px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.score-history-chart-container {
  width: 100%;
  min-height: 180px;
  position: relative;
}

/* ===== RESPONSIVE PARA DISPOSITIVOS MÓVILES ===== */
@media (max-width: 600px) {
  .scoreboard,
  [class*="scoreboard-"]:not(table):not(.scoreboard-table):not(.players-scoreboard),
  .scoreboard-container,
  .scoreboard-mobile {
    gap: 8px !important;
    flex-direction: row !important; /* Mantener siempre lado a lado */
  }

  .team,
  [class*="team-"]:not([class*="team-name"]):not([class*="team-header"]):not([class*="team-stats"]):not([class*="team-meta"]):not([class*="team-players"]):not([class*="team-fouls"]):not(.team-entry):not(.team-item),
  .team-card,
  .team-scoreboard,
  .team-mobile,
  .team-score {
    padding: 14px 10px 14px;
    border-radius: 14px;
  }

  .score,
  [class*="score-"]:not(.score-controls):not(.score-display):not(.score-input-group):not(.score-item):not(.score-label):not([class*="score-label"]):not(.score-row):not(.scorecard-wrapper):not(.scorecard-header):not([class*="chart"]):not([class*="history"]),
  .score-number,
  .score-value-mobile,
  .main-score,
  .team-score-display,
  .total-number {
    font-size: clamp(5rem, 22vw, 7rem) !important;
  }

  /* Evitar que los controles de partido colapsen en columnas gigantes en pantallas pequeñas */
  .match-controls,
  .export-controls {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
  }
}

@media (max-width: 400px) {
  .team,
  [class*="team-"]:not([class*="team-name"]):not([class*="team-header"]):not([class*="team-stats"]):not([class*="team-meta"]):not([class*="team-players"]):not([class*="team-fouls"]):not(.team-entry):not(.team-item),
  .team-card,
  .team-scoreboard,
  .team-mobile,
  .team-score {
    padding: 12px 6px 12px;
  }

  .score,
  [class*="score-"]:not(.score-controls):not(.score-display):not(.score-input-group):not(.score-item):not(.score-label):not([class*="score-label"]):not(.score-row):not(.scorecard-wrapper):not(.scorecard-header):not([class*="chart"]):not([class*="history"]),
  .score-number,
  .score-value-mobile,
  .main-score,
  .team-score-display,
  .total-number {
    font-size: clamp(4.5rem, 24vw, 6.5rem) !important;
  }
}

/* Modo paisaje móvil (Landscape) — Marcador gigante de alta visibilidad */
@media (orientation: landscape) and (max-height: 500px) {
  body {
    padding: 6px 10px;
  }

  .scoreboard,
  [class*="scoreboard-"]:not(table):not(.scoreboard-table):not(.players-scoreboard),
  .scoreboard-container,
  .scoreboard-mobile {
    margin: 4px 0 8px !important;
    gap: 8px !important;
  }

  .score,
  [class*="score-"]:not(.score-controls):not(.score-display):not(.score-input-group):not(.score-item):not(.score-label):not([class*="score-label"]):not(.score-row):not(.scorecard-wrapper):not(.scorecard-header):not([class*="chart"]):not([class*="history"]),
  .score-number,
  .score-value-mobile,
  .main-score,
  .team-score-display,
  .total-number {
    font-size: clamp(4.5rem, 14vh, 7rem) !important;
  }

  .team,
  [class*="team-"]:not([class*="team-name"]):not([class*="team-header"]):not([class*="team-stats"]):not([class*="team-meta"]):not([class*="team-players"]):not([class*="team-fouls"]):not(.team-entry):not(.team-item),
  .team-card,
  .team-scoreboard,
  .team-mobile,
  .team-score {
    padding: 8px !important;
  }

  .current-set-info,
  [class*="current-set-info-"] {
    padding: 5px 10px;
    font-size: 0.78rem;
    margin-bottom: 6px;
  }
}