@charset "UTF-8";
/* ===== NFL — SUPER BOWLS: CSS unificado (INDEX + JUEGO + FINAL) ===== */

/* Paleta */
:root{
  --nfl-azul:   #1b1f3b;  /* fondo general / header / bloque instrucciones */
  --nfl-negro:  #121212;  /* título, franjas */
  --nfl-rojo:   #c62828;  /* subtítulo */
  --nfl-plata:  #b0bec5;  /* botón INICIAR */
  --nfl-blanco: #ffffff;
}

html, body{
  margin:0; padding:0; width:100%; height:100%;
}

/* ===== Pantalla inicio (INDEX) ===== */
.pantalla-inicio-nueva{
  background-color: var(--nfl-azul);
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center;
  font-family:'Inter', sans-serif;
}

.header-quinteto{
  background-color: var(--nfl-azul);
  display:flex; flex-direction:column; align-items:center;
  padding:1.5rem 0 .5rem; width:100%;
}

.logo-quinteto{ width:220px; max-width:100%; margin:0 auto 12px; display:block; }
.logo-jueguitos{ max-width:100%; height:auto; }

.lema-quinteto{
  font-family:'League Spartan', sans-serif;
  font-size:14px; color:var(--nfl-blanco);
  margin:0; text-align:center;
}

.bloque{ width:100%; text-align:center; padding:2rem 1rem; box-sizing:border-box; }

/* Título / Subtítulo index */
.titulo-quinteto{
  background-color: var(--nfl-negro);
  color: var(--nfl-blanco);
  font-family:'League Spartan', sans-serif;
  font-weight:900; /* Black */
  font-size:2.8rem;
}

.subtitulo-quinteto{
  background-color: var(--nfl-rojo);
  color: var(--nfl-blanco);
  font-family:'League Spartan', sans-serif;
  font-weight:700; /* Bold */
  font-size:2rem;
}

/* Instrucciones index */
.instrucciones-quinteto{
  background-color: var(--nfl-azul);
  color: var(--nfl-blanco);
  text-align:center; font-size:1.1rem; line-height:1.6;
  font-family:'Inter', sans-serif;
}
.instrucciones-quinteto h2{
  margin-top:0; font-weight:bold; font-size:1.6rem; color:var(--nfl-blanco);
}
.instrucciones-quinteto p{ margin:.5rem 0; font-weight:400; }

/* Botón INICIAR (index) */
.btn-iniciar-nueva{
  background-color: var(--nfl-plata);
  color:#000;
  font-family:'Urbanist', sans-serif; font-weight:900; font-size:1.2rem;
  padding:1rem 3rem; border:none; margin:2rem auto; cursor:pointer;
  transition: background .3s ease; text-transform:uppercase;
}
.btn-iniciar-nueva:hover{ background-color:#9ea8b0; }

/* ===== Pie y “Me rindo” (juego) ===== */
.pie-juego{ display:flex; justify-content:center; margin:18px 0 28px; }
.btn-rendirse{
  background:#000; color:#fff;
  font-family:'Urbanist', sans-serif; font-weight:900; font-size:1rem;
  padding:12px 28px; border:none; text-transform:uppercase; cursor:pointer;
  transition: opacity .2s ease;
}
.btn-rendirse:hover{ opacity:.9; }

/* ===== Final (botones) ===== */
.botones-final{
  display:flex; flex-direction:column; align-items:center; gap:20px; margin-top:20px;
}
.boton-final{
  background:#f4f4f4; color:#111;
  font-family:'Urbanist', sans-serif; font-weight:900; font-size:1.2rem;
  border:none; padding:15px 0; width:280px; text-align:center; cursor:pointer;
}
.boton-final:hover{ background:#ddd; }

/* ======== Pantalla de juego (JUEGO.HTML) ======== */
.card-evento{ width:92%; max-width:980px; margin:0 auto 28px; }

/* Franjas superior/inferior (SB y estadio) */
.franja-superior,
.franja-inferior{
  background: var(--nfl-negro);
  color: var(--nfl-blanco);
  text-align:center;
  font-family:'League Spartan', sans-serif;
  font-weight:900;
  padding:10px 8px;
  letter-spacing:.02em;
  text-transform:uppercase;
}

/* Participantes (dos bloques + VS) */
.participantes{
  display:flex; flex-direction:column; align-items:stretch;
}

/* Contenedor clickeable de cada equipo (el color viene desde JS) */
.bloque-logo-html{ margin:10px 0; }
.logo-html-nfl{
  font-family:'Black Ops One', sans-serif;  /* typo NFL para equipos */
  font-weight:400;
  text-transform:uppercase;
  text-align:center;
  padding:18px 12px;
  user-select:none;
  cursor:pointer;
  /* Los colores (bg, text, stroke) los define juego.js desde db_colores_nfl.js */
}

/* Separador VS (si decides usar clase en vez de inline) */
.separador-vs{
  font-family:'League Spartan', sans-serif;
  font-weight:700; font-size:1.5rem;
  color: var(--nfl-plata);
  text-align:center; padding:.2rem 0;
}

/* (Compatibilidad con bloques que traía WWE y aquí no usamos) */
.edicion-goat{
  background-color:#ffffff; color:#000000;
  font-family:'League Spartan', sans-serif; font-weight:700; font-size:1.5rem;
  padding:15px; text-align:center; line-height:1; box-shadow: inset 0 0 0 2px #1c1c1c;
}

/* ====== ESTILOS DE JUEGO NFL (adaptados de WWE) ====== */

/* Contenedor general del juego */
.card-evento {
  width: 96%;
  max-width: 1100px;
  margin: 0 auto 30px;
}

/* Franjas superior/inferior (Super Bowl y estadio) */
.franja-superior,
.franja-inferior {
  background: #121212; /* negro NFL */
  color: #ffffff;
  text-align: center;
  font-family: 'League Spartan', sans-serif;
  font-weight: 900;
  padding: 12px;
  font-size: 1rem;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* Participantes */
.participantes {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Cada bloque de equipo (se pinta vía JS con db_colores_nfl.js) */
.bloque-logo-html {
  margin: 0;
  width: 100%;
}

.logo-html-nfl {
  font-family: 'Black Ops One', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;
  font-size: 2.6rem;
  padding: 22px 12px;
  user-select: none;
  cursor: pointer;
  transition: transform .2s ease, opacity .2s ease;
}

.logo-html-nfl:hover {
  transform: scale(1.02);
  opacity: 0.9;
}

/* Separador VS */
.separador-vs {
  background: #888888; /* gris como WWE */
  color: #ffffff;
  font-family: 'League Spartan', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  text-align: center;
  padding: 8px 0;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* --- Barras unificadas (SB / VS / Estadio) --- */
.franja-superior,
.separador-vs,
.franja-inferior {
  background: #b0bec5 !important;
  color: #000000 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: .03em;
  padding: 12px 10px;
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
  /* por si heredaban sombras/bordes del tema anterior */
  text-shadow: none;
  border: 0;
}