@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:#c6a964;          /* 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:#c6a964; min-height:100vh;
  display:flex; flex-direction:column; align-items:center;
  font-family:'Inter',sans-serif;
}

.header-quinteto{
  background:#c6a964; 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:#1b1b1b; color:#fff;
  font-family:'League Spartan',sans-serif; font-weight:900; font-size:2.8rem;
}
.subtitulo-quinteto{
  background:#f15a29; 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; }

input#inputNombre{
  width:100%; max-width:400px; padding:1rem;
  font-size:1.1rem; font-family:'Inter',sans-serif; text-align:center;
  border:none; outline:none; margin-bottom:1rem; background:#f4f4f4; color:#000;
}
.sugerencias-lista{
  list-style:none; padding:0; margin-top:5px; background:#fff; color:#000;
  max-height:150px; overflow-y:auto; border:1px solid #ccc; width:100%; max-width:400px; margin-left:auto; margin-right:auto;
}
.sugerencias-lista li{ padding:6px 10px; cursor:pointer; }
.sugerencias-lista li:hover{ background:#eee; }

/* Selector posiciones */
.contenedor-secundario{ width:100%; max-width:600px; text-align:center; margin-top:1.5rem; }
.titulo-secundario{ font-size:1.2rem; margin-bottom:1.2rem; letter-spacing:.5px; font-family:'Inter',sans-serif; font-weight:600; color:#fff; }
.fila-posiciones{ display:flex; justify-content:center; flex-wrap:wrap; gap:1rem; }
.pos-mini{
  width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .3s ease;
  font-family:'Inter',sans-serif; font-weight:600; font-size:.95rem;
  background:#f4f4f4; color:#c6a964;
}
.pos-mini:hover{ transform:scale(1.05); background:#f15a29; color:#000; }

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

/* ===== LOGO HTML C3 ===== */
.logo-equipo{ text-align:center; }
.logo-generado{
  font-family:'Graduate',cursive; font-size:2.4rem; padding:1rem 2rem; text-align:center;
  margin:1rem auto; display:inline-block; border-radius:0; line-height:1.3;
}

/* ===== CANCHA / OVERLAY ===== */
.cancha-contenedor{ max-width:500px; margin:0 auto; }
.cancha{ position:relative; width:100%; }
.fondo-cancha{ display:block; width:100%; height:auto; object-fit:contain; }
.zona-juego{ position:absolute; inset:0; width:100%; height:100%; transform:none; z-index:1; }

/* ===== SLOTS (5) ===== */
.zona-juego .posicion{
  width:18%; aspect-ratio:3/4; position:absolute;
  transform:translate(calc(-50% + var(--ox,0px)), calc(-50% + var(--oy,0px)));
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  background:none; border-radius:0;
}
.zona-juego .posicion.ocupado{ background:none !important; }

/* ===== JERSEY 3C + NOMBRE (mismo ancho, mismo centro) ===== */
.zona-juego .posicion .pack{
  width: var(--jerseyW);
  display: flex;
  flex-direction: column;
  align-items: center;   /* centra ambos dentro del MISMO ancho */
  margin: 0 auto;
  box-sizing: border-box;
}

.zona-juego .posicion .jersey-3c{ width: 100%; display: block; }
.zona-juego .posicion .jersey-svg{ width: 100%; height: auto; display: block; }

.nombre-abajo{
  margin-top: 6px;
  text-align: center;          /* centrado exacto bajo el jersey */
  line-height: 1.1;
  font-family:'Inter',sans-serif;
  font-weight:900;
  font-size: clamp(10px, 2.6vw, 12px);
  color:#000;
  text-transform: uppercase;
  white-space: normal;
}

/* Colores del SVG */
.jersey-3c .base, .jersey-3c #base{ fill:var(--colorFondo); }
.jersey-3c .trim, .jersey-3c #trim, .jersey-3c #trim path{ fill:var(--colorTexto); }
.jersey-3c .numero{
  font-family:'Graduate',cursive;
  font-size:6.2rem; text-anchor:middle; dominant-baseline:middle;
  fill:var(--colorStroke);
}

/* === COORDENADAS (dentro de la cancha, más centradas) === */
.zona-juego .pg { top: 25%; left: 40%; } /* base izquierda */
.zona-juego .sg { top: 25%; left: 60%; } /* base derecha  */

.zona-juego .sf { top: 55%; left: 25%; } /* alero izq, dentro del arco */
.zona-juego .pf { top: 55%; left: 75%; } /* ala-pívot der, dentro del arco */

.zona-juego .c  { top: 75%; left: 50%; } /* centro bien dentro de la llave */

/* Mensaje de juego */
.mensaje-juego{
  font-family:'Inter',sans-serif; font-weight:800; color:#fff; font-size:1.2rem; text-align:center; margin-top:1rem;
}

/* ===== RESPONSIVE ===== */
@media (max-width:480px){
  /* tamaño del slot */
  .pantalla-juego .zona-juego .posicion,
  .pantalla-final .zona-juego .posicion{ width:16.5%; height:auto; }

  /* jersey un poco más angosto en móvil */
  :root{ --jerseyW: 50%; }

  /* texto bajo el jersey */
  .pantalla-juego .zona-juego .nombre-abajo,
  .pantalla-final .zona-juego .nombre-abajo{ font-size:10px; }
}

@media (max-width:600px){
  .botones-final{ gap:.6rem; margin-top:.5rem; margin-bottom:.5rem; }
}

.mensaje-juego {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  color: #ffffff;
  font-size: 1.2rem;
  text-align: center;
  margin-top: 1rem;
}

/* 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: #f4f4f4;
  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: #f4f4f4;
}

/* 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;
}