/* Reset simple */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-user-select: none;
  user-select: none;
}

/* evita scroll lateral SIEMPRE */
html,
body {
  overflow-x: hidden;
}

.logo {
  width: 70px;
}

/* ===== Background y layout base ===== */
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Inter", "Roboto", sans-serif;
  color: #ffffff;
  min-height: 100vh;

  /* usamos flex-column en mobile/desktop para mantener orden */
  display: flex;
  flex-direction: column;
  align-items: center;

  /* === BACKGROUND === */
  background-image: url("img/bg-neon.png");
  background-size: cover;        /* que llene la pantalla */
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;  /* efecto fijo tipo parallax en desktop */
}

/* contenedor de texto/redes/etc */
.wrapper {
  text-align: center;
  max-width: 500px;
  width: 100%;
  padding: 2rem 1rem 4rem;
}

/* Titular y subtítulo escalan mejor con clamp() */
.title {
  font-size: clamp(1.3rem, 1vw + 1rem, 1.6rem);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 8px rgba(180, 0, 255, 0.9), 0 0 18px rgba(255, 255, 255, 0.4);
  letter-spacing: -0.03em;
}

.subtitle {
  font-size: clamp(0.9rem, 0.3vw + 0.8rem, 0.95rem);
  font-weight: 400;
  color: #e5cffc;
  margin-top: 0.5rem;
  line-height: 1.4;
}

/* ========================= */
/*        GAME AREA          */
/* ========================= */

/*
  Reglas importantes:
  - En desktop: el juego tiene márgenes laterales grandes (look vitrina).
  - En tablet/mobile: el juego se hace más alto y más ancho relativo,
    sin recortar.
  - Nada sale del viewport horizontal.
*/

#gameArea {
  position: relative;

  /* ancho flexible:
     - desktop: deja un buen margen (500px total = 250px por lado aprox)
     - pero nunca más chico que 320px
     - y nunca más ancho que 1100px para que no quede infinito
  */
  width: min(
    max(calc(100vw - 500px), 320px),
    1100px
  );

  left: 50%;
  transform: translateX(-50%);

  /* altura base en desktop */
  height: 200px;

  background: linear-gradient(#1a0122 0%, #000 60%);
  border-top: 3px solid #7a2bff;
  border-bottom: 3px solid #7a2bff;
  margin: 2rem 0;
  overflow: hidden;
  box-shadow:
    inset 0 0 20px rgba(122, 43, 255, 0.6),
    0 0 60px rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  z-index: 2;
}

/* Suelo visual */
#ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24px;
  background: repeating-linear-gradient(
    -45deg,
    #3a0066 0 10px,
    #000000 10px 20px
  );
  border-top: 2px solid #b06bff;
  filter: drop-shadow(0 0 6px #b06bff);
}

/* Hamburguesa / jugador */
#burger {
  position: absolute;
  left: 40px;
  bottom: 24px; /* justo arriba del suelo */
  width: 48px;
  height: 48px;

  background-image: url("img/burger.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  image-rendering: pixelated; /* si usas PNG HD puedes quitarlo */
}

/* Obstáculos */
.obstacle {
  position: absolute;
  bottom: 24px;
  width: 16px;
  height: 35px; /* se sobreescribe por JS igual */
  left: 480px;
  background-color: #ff004c;
  border: 2px solid #000;
  border-radius: 4px;
  box-shadow:
    0 0 8px rgba(255, 0, 76, 0.6),
    0 0 20px rgba(255, 255, 255, 0.15);
}

/* panel info bajo el juego */
.info {
  color: #c7aaff;
  font-size: 0.8rem;
  line-height: 1.4;
  min-height: 3.5rem;
}

.info strong {
  color: #fff;
  text-shadow: 0 0 8px rgba(180, 0, 255, 0.9);
}

#score {
  color: #fff;
  font-weight: 600;
}

/* ========================= */
/*         OVERLAYS          */
/* ========================= */

#statusOverlay,
#couponOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: grid;
  place-items: center;
  z-index: 999;
  font-family: inherit;
}

#statusOverlay.hidden,
#couponOverlay.hidden {
  display: none;
}

.overlayBox {
  background: radial-gradient(circle at 20% 20%, #2b003a 0%, #000000 60%);
  border: 2px solid #7a2bff;
  border-radius: 16px;
  padding: 1.5rem 2rem;
  min-width: 240px;
  max-width: 90%;
  text-align: center;
  box-shadow:
    0 0 20px rgba(122, 43, 255, 0.6),
    0 0 60px rgba(255,255,255,0.15);
  color: #fff;
}

/* Overlay GAME OVER */
#statusBig {
  font-size: 1.2rem;
  font-weight: 700;
  color: #ff6188;
  text-shadow: 0 0 8px rgba(255, 97, 136, 0.8);
  margin-bottom: 0.5rem;
}

#statusDetail {
  font-size: 0.9rem;
  color: #ffffff;
  margin-bottom: 1rem;
}

/* Overlay CUPÓN */
.couponBox .couponTitle {
  font-size: 1.1rem;
  font-weight: 700;
  color: #00ffa6;
  text-shadow: 0 0 8px rgba(0,255,166,0.8);
  margin-bottom: 0.5rem;
}

.couponBox .couponMsg {
  font-size: 0.8rem;
  color: #ffffff;
  line-height: 1.4;
  margin-bottom: 0.75rem;
}

.couponCode {
  font-family: monospace;
  font-size: 0.9rem;
  color: #fff;
  background: #000;
  border: 2px solid #00ffa6;
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  display: inline-block;
  text-shadow: 0 0 8px rgba(0,255,166,0.8);
  box-shadow:
    0 0 12px rgba(0,255,166,0.5),
    0 0 30px rgba(0,0,0,0.8);
  margin-bottom: 0.75rem;
  word-break: break-word;
}

/* Botón OK neón */
.btn-ok-neon {
  background-color: #000;
  color: #ff00c8;
  font-family: "Arial", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  padding: 10px 24px;
  border: 2px solid #ff00c8;
  border-radius: 8px;
  cursor: pointer;
  text-shadow: 0 0 6px #ff00c8, 0 0 12px #ff00c8;
  box-shadow:
    0 0 8px #ff00c8,
    0 0 16px #ff00c8,
    0 0 32px rgba(255,0,200,0.4);
  background-image: radial-gradient(circle at 50% 0%, rgba(255,0,200,0.25) 0%, rgba(0,0,0,0) 60%);
  transition: box-shadow 0.12s ease, transform 0.12s ease;
  animation: fadeInUp 0.6s ease both;
}

.btn-ok-neon:hover {
  box-shadow:
    0 0 10px #ff00c8,
    0 0 20px #ff00c8,
    0 0 40px #ff00c8,
    0 0 80px rgba(255,0,200,0.5);
  transform: scale(1.05);
}

.btn-ok-neon:active {
  transform: scale(0.97);
}

/* animación aparición */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* HUD de puntaje dentro del área de juego */
#scoreHUD {
  position: absolute;
  top: 8px;
  right: 12px;
  background: rgba(0, 0, 0, 0.4);
  border: 2px solid #7a2bff;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 600;
  color: #fff;
  text-shadow:
    0 0 6px rgba(180, 0, 255, 0.8),
    0 0 14px rgba(255,255,255,0.4);
  box-shadow:
    0 0 10px rgba(122, 43, 255, 0.7),
    0 0 30px rgba(255,255,255,0.15);
  pointer-events: none;
}

/* ========================= */
/*  RESPONSIVE BREAKPOINTS   */
/* ========================= */

/* Tablets (~<=1024px) */
@media (max-width: 1024px) {

  #gameArea {
    width: min(
      max(calc(100vw - 240px), 320px),
      900px
    );
    height: 220px; /* un poquito más alto en pantallas medianas */
  }

  #burger {
    left: 32px;
    width: 48px;
    height: 48px;
  }

  .subtitle {
    font-size: clamp(0.9rem, 1vw + 0.6rem, 1rem);
  }
}

/* Celulares en horizontal y phablets (~<=768px) */
@media (max-width: 768px) {

  body {
    background-attachment: scroll; /* en móvil fixed a veces parpadea/lag */
  }

  #gameArea {
    width: calc(100vw - 32px); /* casi full ancho con margen 16px por lado */
    max-width: 700px;
    height: 220px;
    border-radius: 10px;
  }

  #burger {
    left: 24px;
    width: 44px;
    height: 44px;
  }

  .obstacle {
    bottom: 24px;
  }

  #ground {
    height: 22px;
  }

  #scoreHUD {
    font-size: 13px;
    padding: 5px 8px;
    top: 6px;
    right: 8px;
  }

  .wrapper {
    padding: 1.5rem 1rem 3rem;
  }

  .title {
    font-size: clamp(1.2rem, 1vw + 1rem, 1.4rem);
  }

  .subtitle {
    font-size: 0.9rem;
  }

  .info {
    font-size: 0.75rem;
  }
}

/* Celulares chicos (~<=480px) */
@media (max-width: 480px) {

  #gameArea {
    width: calc(100vw - 24px); /* margen ~12px por lado */
    max-width: 440px;
    height: 180px; /* bajamos altura total para que quepa en pantallas mini */
    border-radius: 10px;
  }

  #burger {
    left: 20px;
    width: 40px;
    height: 40px;
    bottom: 20px;
  }

  .obstacle {
    bottom: 20px;
  }

  #ground {
    height: 20px;
  }

  #scoreHUD {
    font-size: 12px;
    padding: 4px 7px;
    top: 6px;
    right: 6px;
  }

  .title {
    font-size: 1.2rem;
  }

  .subtitle {
    font-size: 0.8rem;
  }

  .info {
    font-size: 0.7rem;
    min-height: 3rem;
  }
}

/* Footer */
.footer {
  margin-top: 2rem;
  font-size: 0.7rem;
  color: #4a4a4a;
}
.footer span {
  color: #fff;
}