@charset "UTF-8";

/* ===== BASE ===== */
:root{
  /* ancho del jersey dentro de cada slot (puedes cambiar a 64px si prefieres fijo) */
  --jerseyW: 50%;
}

body{
  margin:0; padding:0;
  background:#7b7b7b;          /* 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;
}

/* ===== INICIO ===== */
.pantalla-inicio-nueva{
  background:#7b7b7b; min-height:100vh;
  display:flex; flex-direction:column; align-items:center;
  font-family:'Inter',sans-serif;
}

.header-quinteto{
  background:#7b7b7b; display:flex; flex-direction:column; align-items:center;
  padding:1.5rem 0 .5rem; width:100%;
}
.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:#fff; margin:0; text-align:center;
}

/* Bloques título/subtítulo */
.bloque{ width:100%; text-align:center; padding:2rem 1rem; box-sizing:border-box; }
.titulo-quinteto{
  background:#1c1c1c; color:#fff;
  font-family:'League Spartan',sans-serif; font-weight:900; font-size:2.8rem;
}
.subtitulo-quinteto{
  background:#dc0000; color:#000;
  font-family:'League Spartan',sans-serif; font-weight:700; font-size:2rem;
}

/* ===== INSTRUCCIONES + INPUT + SUGERENCIAS ===== */
.instrucciones-quinteto{
  color:#fff; 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:#fff; }
.instrucciones-quinteto p{ margin:.5rem 0; font-weight:400; }

.instruccion,
.titulo-secundario{
  font-family:'League Spartan',sans-serif;
  font-size:1.4rem; text-align:center; text-transform:uppercase; letter-spacing:.5px;
}
.instruccion{ font-family:'Inter',sans-serif; font-weight:600; color:#fff; }

/* Botón iniciar / rendirse */
.btn-iniciar-nueva{
  background:#ffffff; 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:#f4f4f4; }

.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; }
.pie-juego{ margin-top:30px; display:flex; justify-content:center; }

/* Quitar línea bajo el texto del botón INICIAR */
a.btn-iniciar-nueva,
.btn-iniciar-nueva,
.btn-iniciar-nueva:link,
.btn-iniciar-nueva:visited,
.btn-iniciar-nueva:hover,
.btn-iniciar-nueva:active{
  text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* =========================
   F1 – JUEGO (estructura visual)
   ========================= */

/* Audiowide solo donde aplica */
.font-audiowide{ font-family:'Audiowide', cursive; }

/* —— Bloque TEMPORADA —— */
.bloque-temporada{
  width:100%;
  box-sizing:border-box;
  padding:1rem;
  display:flex; justify-content:center; align-items:center;
}

.texto-temporada{
  background:#1C1C1C;
  color:#DC0000;
  -webkit-text-stroke: 1.5px #7b7b7b; /* trazo más grueso */
  text-stroke: 3px #FFFFFF;
  padding:.8rem 13.8rem;            /* más aire interno */
  font-size:2rem;                 /* tamaño de fuente mayor */
  letter-spacing:2px;
  text-align:center;
  display:inline-block;
}

/* —— Zona de juego: 3 cards —— */
.zona-juego{
  width:100%;
  max-width:800px;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:16px;
  box-sizing:border-box;
}

.card-piloto{
  background:#2B2B2B; /* fallback si no hay color de escudería */
  color:#FFFFFF;
  padding:16px 12px 12px;
  box-sizing:border-box;
  display:flex; flex-direction:column; gap:10px; align-items:center;
  min-height:170px;
  justify-content:center;
}
.card-piloto__nombre{
  font-size:1.1rem; text-align:center; line-height:1.15;
}
.card-piloto__equipo{
  font-size:.7rem; text-align:center; opacity:.95; line-height:1.1;
}

.card-piloto__nombre,
.card-piloto__equipo{
  display:block;
  text-align:center;
  line-height:1.2;
  word-break:break-word;
  -webkit-text-stroke: .5px #000;

}
.card-piloto__nombre br,
.card-piloto__equipo br{ content:""; }

/* —— Botonera 1° 2° 3° —— */
.botonera-posiciones{
  display:flex; gap:12px; justify-content:center; width:100%;
}

/* base de botón */
.posicion{
  font-size:1.3rem;  /* aumenta o reduce el número */
  font-family:'Audiowide', cursive;
  width:44px; height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  border:.5px solid #000;
  cursor:pointer;
  background:#9a9a9a; /* se sobrescribe abajo según lugar */
  /* estado “normal”: texto solo con contorno */
  color:transparent;
  -webkit-text-stroke: 1px #000;
  text-stroke: 2px #000;
  user-select:none;
  outline:none;
}

/* Colores por lugar (oro/plata/bronce) */
.posicion[data-valor="1"]{ background:#D1B800; } /* oro */
.posicion[data-valor="2"]{ background:#9A9A9A; } /* plata */
.posicion[data-valor="3"]{ background:#7A5A12; } /* bronce */

/* hover/focus suaves (opcional) */
.posicion:hover{ filter:brightness(0.95); }
.posicion:focus-visible{ box-shadow:0 0 0 3px rgba(0,128,255,.6); }

/* estado seleccionado: relleno negro (como en tu mock) */
.posicion.sel{
  color:#000;
  -webkit-text-stroke: 0;
  text-stroke: 0;
}

/* estado off (lugar ya usado por otra card) */
.posicion.off{
  opacity:.45;
  pointer-events:none;
}

/* —— Acciones: RESET + ME RINDO (lado a lado) —— */
.acciones-juego{
  width:100%;
  max-width:900px;
  display:flex; gap:18px; justify-content:center;
  padding:16px 0 28px;
}

/* usa el mismo estilo del “me rindo” para reset */
.btn-rendirse,
.btn-reset{
  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-reset:hover,
.btn-rendirse:hover{ opacity:.9; }

/* —— Vibración de error —— */
@keyframes shake-kf{
  10%,90%{ transform:translateX(-1px); }
  20%,80%{ transform:translateX(2px); }
  30%,50%,70%{ transform:translateX(-4px); }
  40%,60%{ transform:translateX(4px); }
}
.shake{ animation:shake-kf .5s linear; }

/* —— Responsive —— */
@media (max-width: 760px){
  .zona-juego{ grid-template-columns:1fr; }
  .acciones-juego{ padding-bottom:20px; }
  .texto-temporada{ font-size:1.2rem; }
  .card-piloto__nombre{ font-size:1rem; }
  .card-piloto__equipo{ font-size:.85rem; }
}

/* ===== Instrucciones en juego ===== */
.instrucciones-f1{
  color:#fff;
  text-align:center;
  font-family:'Inter',sans-serif;
  font-size:1.2rem;
  line-height:1.4;
  margin:10px auto;
}
.instrucciones-f1 p{
  margin:2px 0;
}

.botones-final {
  display: flex;
  flex-direction: column; /* uno encima del otro */
  align-items: center;    /* centrados horizontalmente */
  gap: 20px;              /* espacio entre botones */
  margin-top: 20px;
}

.boton-final {
  background: #ffffff;
  color: #111;
  font-family: 'Urbanist', sans-serif;
  font-weight: 900;
  font-size: 1.2rem;
  border: none;
  padding: 15px 0;
  width: 280px;           /* mismo ancho para ambos */
  text-align: center;
  cursor: pointer;
}

.boton-final:hover {
  background: #ddd;
}