/* =====================================================
   PINOLITAS - estilos generales
   ===================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: "Segoe UI", "Trebuchet MS", system-ui, sans-serif;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* =====================================================
   ESCENARIO 1080x1920 (formato vertical fijo)
   Todo el juego se disena sobre un lienzo de 1080x1920 px.
   El escenario se centra y se escala de forma uniforme
   (--stage-scale lo calcula main.js) para caber en cualquier
   ventana manteniendo la proporcion 9:16; el resto queda en
   negro (letterbox).
   ===================================================== */
#stage {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 1080px;
  height: 1920px;
  transform: translate(-50%, -50%) scale(var(--stage-scale, 1));
  transform-origin: center center;
  overflow: hidden;
  background: #000;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

/* =====================================================
   PANTALLAS (5 secciones que se muestran/ocultan)
   ===================================================== */

.screen {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.screen.active { display: flex; }

.bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

.guia-img {
  position: absolute;
  top: 4%;
  left: 50%;
  transform: translateX(-50%);
  max-width: 60%;
  max-height: 20%;
  z-index: 1;
  pointer-events: none;
}

/* =====================================================
   BOTON PRINCIPAL (reutilizable)
   ===================================================== */
.btn-principal {
  background: linear-gradient(180deg, #f7b500 0%, #e08e00 100%);
  color: #fff;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 0.7em 2.2em;
  border-radius: 999px;
  box-shadow: 0 6px 0 #b56600, 0 10px 20px rgba(0,0,0,0.25);
  transition: transform 0.08s, box-shadow 0.08s;
}
.btn-principal:active {
  transform: translateY(3px);
  box-shadow: 0 3px 0 #b56600, 0 5px 10px rgba(0,0,0,0.25);
}

/* =====================================================
   PANTALLA 1: REGISTRO
   ===================================================== */
/* El fondo Recurso 3 ya trae logo, textos y el recuadro de "Nombre del
   jugador". Aqui solo colocamos el campo blanco y el boton, calzados a
   las coordenadas del diseno de referencia "Mesa de trabajo 1". */
#screen-registro #input-nombre {
  position: absolute;
  left: 164px;
  top: 888px;
  width: 745px;
  height: 64px;
  z-index: 2;
  border: none;
  border-radius: 999px;
  background: #fff;
  color: #4a2400;
  font-size: 30px;
  font-weight: 600;
  text-align: center;
  outline: none;
  padding: 0 1em;
}

#screen-registro #btn-jugar {
  position: absolute;
  left: 260px;
  top: 1225px;
  width: 565px;
  height: 116px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #fff;
  color: #e61839;
  border-radius: 999px;
  font-size: 46px;
  font-weight: 800;
  letter-spacing: 1px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}
#screen-registro #btn-jugar:active {
  transform: translateY(3px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}

#screen-registro .msg-error {
  position: absolute;
  left: 0;
  top: 962px;
  width: 100%;
  text-align: center;
  z-index: 2;
  color: #ffd54a;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* =====================================================
   PANTALLA 2: SELECCION BALON
   ===================================================== */
/* El fondo back.png trae logo, texto y el recuadro. Aqui colocamos los
   dos balones (con su recuadro de seleccion) y el boton, calzados a la
   guia de referencia (balones 377px centrados en y=1118). */
#screen-seleccion .balon-btn {
  position: absolute;
  width: 377px;
  height: 377px;
  z-index: 2;
  transition: transform 0.12s;
}
#screen-seleccion .balon-btn[data-color="amarillo"] { left: 127px; top: 930px; }
#screen-seleccion .balon-btn[data-color="rojo"]     { left: 572px; top: 930px; }
#screen-seleccion .balon-btn:hover { transform: scale(1.04); }

#screen-seleccion .balon-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
  pointer-events: none;
}

/* El recuadro (444x587) incluye la flecha arriba; se centra sobre el
   balon y solo se ve en el balon seleccionado. */
#screen-seleccion .cuadro-sel {
  position: absolute;
  left: 50%;
  top: -177px;
  width: 444px;
  height: 587px;
  transform: translateX(-50%);
  z-index: 0;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
#screen-seleccion .balon-btn.selected .cuadro-sel { opacity: 1; }

#screen-seleccion #btn-siguiente {
  position: absolute;
  left: 252px;
  top: 1507px;
  width: 577px;
  height: 117px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #fff;
  color: #e61839;
  border-radius: 999px;
  font-size: 46px;
  font-weight: 800;
  letter-spacing: 1px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}
#screen-seleccion #btn-siguiente:active {
  transform: translateY(3px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}

/* =====================================================
   PANTALLA 3: CUENTA REGRESIVA
   ===================================================== */
.conteo-caja {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.conteo-circulo-wrap {
  position: relative;
  width: 420px;
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.conteo-circulo-bg,
.conteo-circulo-progreso,
.conteo-cuadro {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.conteo-circulo-progreso { z-index: 2; }
.conteo-cuadro { z-index: 1; width: 60%; height: 60%; inset: 20%; }

#conteo-numero {
  position: relative;
  z-index: 3;
  color: #fff;
  font-size: 170px;
  font-weight: 900;
  text-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* =====================================================
   PANTALLA 4: JUEGO
   ===================================================== */
#screen-juego {
  background: #000;
}

#video-camara {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1); /* efecto espejo natural */
  z-index: 0;
}

#canvas-juego {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

#hud-puntaje {
  position: absolute;
  top: 3%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
#hud-puntaje img {
  height: 150px;
  width: auto;
}
#puntaje-numero {
  position: absolute;
  color: #fff;
  font-size: 60px;
  font-weight: 900;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
  /* La posicion exacta depende del sprite puntaje.png;
     se ajusta empiricamente. */
  transform: translateY(15%);
}

#guia-distancia {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  background: rgba(0,0,0,0.75);
  color: #ffd54a;
  padding: 0.6em 1.4em;
  border-radius: 999px;
  font-size: 30px;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  display: none;
  white-space: nowrap;
}
#guia-distancia.visible { display: block; }

#pantalla-negra {
  position: absolute;
  inset: 0;
  background: #000;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
#pantalla-negra.visible {
  opacity: 1;
  pointer-events: auto;
}

/* =====================================================
   PANTALLA 5: RANKING
   ===================================================== */
/* El fondo Ranking.png trae las 6 barras y las medallas. Cada fila se
   superpone sobre su barra: nombre (rojo) a la izquierda, puntaje
   (naranja) a la derecha. Coordenadas tomadas de la guia. */
#ranking-lista {
  position: absolute;
  inset: 0;
  z-index: 2;
  list-style: none;
  margin: 0;
  padding: 0;
}

#ranking-lista li {
  position: absolute;
  left: 324px;
  width: 526px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 800;
}
#ranking-lista li:nth-child(1) { top: 579px; }
#ranking-lista li:nth-child(2) { top: 741px; }
#ranking-lista li:nth-child(3) { top: 906px; }
#ranking-lista li:nth-child(4) { top: 1072px; }
#ranking-lista li:nth-child(5) { top: 1237px; }
#ranking-lista li:nth-child(6) { top: 1399px; }

#ranking-lista .nombre {
  color: #e61839;
  font-size: 46px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
}
#ranking-lista .puntaje {
  color: #ffbb22;
  font-size: 46px;
}

/* Boton volver: zona transparente sobre el icono de reinicio (abajo-izq). */
#screen-ranking #btn-volver {
  position: absolute;
  left: 18px;
  top: 1775px;
  width: 130px;
  height: 130px;
  z-index: 3;
  background: transparent;
  border-radius: 50%;
}

/* =====================================================
   MODAL DE COMPATIBILIDAD
   ===================================================== */
#aviso-compatibilidad {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-oculto { display: none !important; }

.modal-caja {
  background: #fff;
  border-radius: 16px;
  padding: 2rem 2.5rem;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  text-align: center;
  color: #333;
}
.modal-caja h2 { color: #c0392b; font-size: 28px; }
.modal-caja p { font-size: 18px; line-height: 1.4; }