@charset "UTF-8";
/* ESTILOS GENERALES */
body {
  margin: 0;
  padding: 0;
  background-color: #0b1022; /* Fondo madera */
  font-family: 'Inter', sans-serif;
  color: #000;
}

.pantalla-inicio,
.pantalla-juego,
.pantalla-final {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.2rem 1rem;
  max-width: 700px;
  margin: auto;
  gap: 1rem;
}

/* === PANTALLA INICIO (solo lo necesario) === */

.pantalla-inicio-nueva {
  background-color: #0b1022;
  min-height: 100vh;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Inter', sans-serif;
}

/* Header con logo y lema */
.header-quinteto {
  background-color: #0b1022;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 0 0.5rem;
  width: 100%;
}

/* (para mantener comportamiento de la clase adicional en el <img>) */
.logo-jueguitos {
  max-width: 100%;
  height: auto;
}

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

.lema-quinteto {
  font-family: 'League Spartan', sans-serif;
  font-size: 14px;
  color: #FFFFFF;
  margin: 0;
  text-align: center;
}

/* Bloques de título, subtítulo e instrucciones */
.bloque {
  width: 100%;
  text-align: center;
  padding: 2rem 1rem;
  box-sizing: border-box;
}

.titulo-quinteto {
  background-color: #1e6bff;
  color: #ffffff;
  font-family: 'League Spartan', sans-serif;
  font-weight: 900;
  font-size: 2.8rem;
}

.subtitulo-quinteto {
  background-color: #e0b84f;
  color: #000000;
  font-family: 'League Spartan', sans-serif;
  font-weight: 700;
  font-size: 2rem;
}

.instrucciones-quinteto {
  color: #ffffff;
  text-align: center;
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 700px;
  font-family: 'Inter', sans-serif;
}

.instrucciones-quinteto h2 {
  margin-top: 0;
  font-weight: 700;
  font-size: 1.6rem;
  color: #ffffff;
}

.instrucciones-quinteto p {
  margin: 0.5rem 0;
  font-weight: 400;
}

/* Botón iniciar */
.btn-iniciar-nueva {
  background-color: #f5f1e8;
  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 0.3s ease;
  text-transform: uppercase;
}

.btn-iniciar-nueva:hover {
  background-color: #f5f1e8;
}

a.btn-iniciar-nueva {
  text-decoration: none;
  display: inline-block;
}

/* Contenedor de los dos botones (columna, centrados) */
.botones-final {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: .5rem;
  align-items: center;
}

/* Botones de la pantalla final (mismo look & feel) */
.pantalla-final .btn-iniciar {
  background-color: #f5f1e8;
  color: #000000;
  font-family: 'Urbanist', sans-serif;
  font-weight: 900;
  font-size: 1.2rem;
  text-transform: uppercase;
  padding: 1.2rem 2rem;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease;
  width: 280px;
}

.pantalla-final .btn-iniciar:hover {
  background-color: #e2dbc8;
}

.btn-rendirse{
  background: #000000;
  color: #ffffff;
  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; }

/* === PREMIOS NBA (scoped) === */
.premios-nba {
  --nba-bg: #0B1022;      /* Arena Night */
  --nba-gold: #E0B84F;    /* Trophy Gold */
  --nba-ivory: #F5F1E8;   /* Ballot Ivory */
  --nba-blue: #1E6BFF;    /* Scoreboard Blue */
  --text-on-dark: #F5F1E8;
  --text-on-light: #0B1022;
}

/* Bloque de logo 3C (Graduate solo aquí) */
.premios-nba #logoTemporadaHTML.logo-3c-temporada{
  display:inline-block;
  font-weight: 700;
  text-transform: uppercase;

  /* tamaño + aire (compacto) */
  font-size: clamp(24px, 6vw, 44px);
  line-height: 1.05;
  margin: 14px 24px 6px;   /* reducido para acercarlo al texto guía */
  padding: 16px 26px 14px;

  /* contorno (solo stroke, sin sombra) */
  -webkit-text-stroke-width: .5px; /* ancho controlado desde CSS */
  -webkit-text-stroke-color: #000;  /* color por defecto; JS puede sobrescribir */
  text-shadow: none !important;
  border: 2px solid rgba(0,0,0,0.15); /* marco sutil por si coincide con el fondo */
}

/* Texto guía (este bloque es .bloque → trae padding grande; lo reducimos aquí) */
.premios-nba #texto-guia.bloque{
  padding: 8px 1rem 6px;   /* override del padding: antes 2rem */
  margin: 4px auto 6px;
  text-align: center;
  max-width: 720px;
  color: var(--text-on-dark);
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  line-height: 1.25;
}
.premios-nba #texto-guia p{ margin: 6px 0; }

/* Formulario de premios (más pegado) */
.premios-nba .form-premios{
  margin: 0 24px 20px;   /* elimina margen-top sobrante */
  position: relative;
  font-family: "Inter", system-ui, sans-serif;
}

.premios-nba .form-premios .campo{
  margin: 10px 0 12px;
}

.premios-nba .form-premios .campo:first-child{
  margin-top: 6px;
}

.premios-nba .form-premios label{
  display:block;
  margin-bottom: 6px;
  font-weight: 700; /* Inter Bold */
  color: var(--nba-gold);
}

.premios-nba .form-premios input[type="text"]{
  width: 100%;
  height: 15px;            /* como lo dejaste */
  border: 2px solid transparent;
  background: #ffffff;     /* cuadro blanco */
  color: #000000;          /* texto negro */
  padding: 10px 12px;
  font-size: 16px;
  font-weight: 400;        /* Inter Regular */
  outline: none;
}

.premios-nba .form-premios input[type="text"]:focus{
  box-shadow: 0 0 0 3px var(--nba-blue);
}

/* Estado de acierto (bloqueado) */
.premios-nba .form-premios input.is-correct{
  background: var(--nba-blue) !important;
  color: #ffffff !important;
  pointer-events: none;
}

/* Sugerencias (autocomplete) */
.premios-nba .sugs{
  position: absolute;
  width: calc(100% - 4px);
  background: #ffffff;
  border: 2px solid #e6e6e6;
  border-radius: 4px;
  margin-top: 4px;
  z-index: 600;
  max-height: 220px;
  overflow: auto;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.premios-nba .sugs.hidden{ display:none; }

.premios-nba .sugs li{
  list-style: none;
  padding: 10px 12px;
  color: #111;
  cursor: pointer;
  border-bottom: 1px solid #f1f1f1;
}
.premios-nba .sugs li:last-child{ border-bottom: 0; }
.premios-nba .sugs li:hover{ background: #f7f9ff; }

/* Responsive: aún más compacto en móvil */
@media (max-width: 480px){
  .premios-nba #logoTemporadaHTML.logo-3c-temporada{ margin: 12px 16px 4px; padding: 14px 20px 12px; }
  .premios-nba #texto-guia.bloque{ padding: 6px 1rem 4px; margin: 2px auto 4px; }
  .premios-nba .form-premios .campo{ margin: 8px 0 10px; }
}

/* FINAL: igualar el logo 3C al de juego */
.premios-nba #logoTemporadaHTML.logo-3c-temporada{
  font-family: 'Graduate', serif;   /* misma typo */
  -webkit-text-stroke-width: .5px; /* usa el mismo valor que en juego */
  text-shadow: none;                /* solo stroke */
}

/* FINAL: quitar bullets de la lista de respuestas */
.premios-nba #lista-correctas{
  list-style: none;
  margin: 0;
  padding: 0;
}
.premios-nba #lista-correctas li{
  margin: 8px 0;
  padding-left: 0;
}

/* Grosor único del logo 3C (juego + final) */
.premios-nba #logoTemporadaHTML.logo-3c-temporada{
  -webkit-text-stroke-width: .5px !important; /* ajusta el número a tu gusto */
  font-family: 'Graduate', serif;               /* misma fuente en ambas pantallas */
  text-shadow: none;
}

/* FINAL: elimina el hueco grande antes de los botones */
.premios-nba .pantalla-final{
  margin: 0;          /* anula el margin:auto del layout general */
  padding: 0;         /* opcional: sin relleno extra */
  display: block;     /* evita efectos de flex + auto margins */
  align-items: center;/* por si lo dejas como flex en otro lado */
}

.premios-nba .botones-final{
  margin-top: 12px;   /* separa un poco del listado (ajusta al gusto) */
}