/* Reset y configuracion general */
* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
  color: #ffffff;
  background: linear-gradient(160deg, #0059d6 0%, #08a8ff 48%, #004aa8 100%);
}

button,
img {
  display: block;
}

button {
  font: inherit;
}

/* Pantallas principales */
.loader-screen,
.intro-screen,
.green-hill-screen {
  position: fixed;
  inset: 0;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px 20px;
}

.loader-screen,
.intro-screen {
  background: radial-gradient(circle at top, rgba(255, 255, 255, 0.24), transparent 38%),
    linear-gradient(160deg, #0059d6 0%, #08a8ff 48%, #004aa8 100%);
}

.loader-screen {
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  transition: opacity 700ms ease, visibility 700ms ease;
}

.intro-screen {
  z-index: 2;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  align-items: center;
  justify-items: center;
  gap: 14px;
  overflow: hidden;
  text-align: center;
  opacity: 1;
  transition: opacity 1100ms ease;
}

.is-hidden {
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
}

/* Loader con logo, texto y anillos */
.loader-logo {
  width: min(76vw, 310px);
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(0, 29, 89, 0.45));
}

.loader-text {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.3;
  text-shadow: 0 3px 0 rgba(0, 43, 130, 0.5);
}

.rings-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.loader-ring {
  width: 34px;
  height: 34px;
  object-fit: contain;
  opacity: 0.35;
  filter: saturate(0.7) brightness(0.75);
  animation: ring-glow 1.8s ease-in-out infinite;
}

.loader-ring:nth-child(2) {
  animation-delay: 150ms;
}

.loader-ring:nth-child(3) {
  animation-delay: 300ms;
}

.loader-ring:nth-child(4) {
  animation-delay: 450ms;
}

.loader-ring:nth-child(5) {
  animation-delay: 600ms;
}

.loader-screen.is-loaded {
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
}

@keyframes ring-glow {
  0%,
  100% {
    opacity: 0.32;
    transform: translateY(0) scale(0.9);
    filter: saturate(0.8) brightness(0.8);
  }

  45%,
  55% {
    opacity: 1;
    transform: translateY(-6px) scale(1.13);
    filter: saturate(1.35) brightness(1.55) drop-shadow(0 0 12px rgba(255, 225, 67, 0.95));
  }
}

/* Introduccion previa al juego */
.intro-logo {
  width: min(70vw, 280px);
  height: auto;
  opacity: 0;
  transform: translateY(-70px);
  filter: drop-shadow(0 12px 18px rgba(0, 25, 80, 0.42));
}

.intro-sonic {
  width: min(72vw, 280px);
  max-height: 42dvh;
  object-fit: contain;
  align-self: end;
  opacity: 0;
  transform: translateX(-110vw);
  filter: drop-shadow(0 14px 20px rgba(0, 25, 80, 0.45));
}

.intro-message {
  width: min(100%, 420px);
  margin: 0;
  opacity: 0;
  font-size: clamp(1.3rem, 6.4vw, 2rem);
  line-height: 1.12;
  text-wrap: balance;
  text-shadow: 0 4px 0 rgba(0, 43, 130, 0.58);
}

.start-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(100%, 260px);
  min-height: 54px;
  border: 0;
  border-radius: 999px;
  opacity: 0;
  color: #073a90;
  background: linear-gradient(180deg, #fff176 0%, #ffc400 100%);
  box-shadow: 0 8px 0 #d88900, 0 16px 24px rgba(0, 23, 79, 0.35);
  font-size: 1.15rem;
  font-weight: 900;
  cursor: pointer;
  transform: translateY(0) scale(1);
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.start-button::after {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: -1;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.3);
  opacity: 0;
  transform: scale(0.82);
}

.start-button:hover {
  filter: brightness(1.06) saturate(1.08);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 0 #d88900, 0 20px 28px rgba(0, 23, 79, 0.38);
}

.start-button:active {
  filter: brightness(0.98);
  transform: translateY(6px) scale(0.98);
  box-shadow: 0 2px 0 #d88900, 0 8px 16px rgba(0, 23, 79, 0.3);
}

.start-button:focus-visible {
  outline: 4px solid #ffffff;
  outline-offset: 4px;
}

/* Secuencia de entrada de la introduccion */
.intro-screen.is-presented .intro-logo {
  animation: logo-drop-in 700ms ease-out forwards;
}

.intro-screen.is-presented .intro-sonic {
  animation: sonic-slide-in 750ms 450ms ease-out forwards;
}

.intro-screen.is-presented .intro-message {
  animation: fade-in 600ms 1050ms ease forwards;
}

.intro-screen.is-presented .start-button {
  animation: fade-in-up 600ms 1450ms ease forwards;
}

.intro-screen.is-presented .start-button::after {
  animation: start-button-idle 2400ms 2300ms ease-in-out infinite;
}

.intro-screen.is-leaving {
  pointer-events: none;
  opacity: 0;
}

.intro-screen.is-leaving .intro-message,
.intro-screen.is-leaving .start-button {
  animation: fade-out 260ms ease forwards;
}

.intro-screen.is-leaving .intro-sonic {
  animation: sonic-run-out 1150ms ease-in forwards;
}

/* Escenario Green Hill preparado para el siguiente sprint */
.green-hill-screen {
  z-index: 1;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  background-image: linear-gradient(rgba(0, 89, 214, 0.08), rgba(0, 44, 120, 0.18)),
    url("assets/green hill.jpg");
  background-position: center;
  background-size: cover;
  transition: opacity 1100ms ease, visibility 1100ms ease;
}

.green-hill-screen.is-visible {
  visibility: visible;
  opacity: 1;
}

.green-hill-sonic {
  position: absolute;
  left: clamp(32px, 18vw, 180px);
  bottom: clamp(42px, 12vh, 110px);
  width: min(42vw, 190px);
  height: auto;
  opacity: 0;
  transform: translateX(-120vw) rotate(-8deg);
  filter: drop-shadow(0 14px 18px rgba(0, 35, 75, 0.38));
}

.green-hill-screen.is-sonic-arriving .green-hill-sonic {
  animation: green-sonic-enter 1300ms ease-out forwards;
}

@keyframes logo-drop-in {
  0% {
    opacity: 0;
    transform: translateY(-70px) scale(0.96);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes sonic-slide-in {
  0% {
    opacity: 0;
    transform: translateX(-110vw) rotate(-8deg);
  }

  72% {
    opacity: 1;
    transform: translateX(10px) rotate(2deg);
  }

  100% {
    opacity: 1;
    transform: translateX(0) rotate(0);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes start-button-idle {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.82);
  }

  50% {
    opacity: 0.32;
    transform: scale(1);
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes sonic-run-out {
  0% {
    opacity: 1;
    transform: translateX(0) rotate(0) skewX(0deg) scaleY(1);
  }

  18% {
    opacity: 1;
    transform: translateX(10px) rotate(-8deg) skewX(-8deg) scaleY(0.92);
  }

  100% {
    opacity: 1;
    transform: translateX(140vw) rotate(-10deg) skewX(-10deg) scaleY(0.9);
  }
}

@keyframes green-sonic-enter {
  0% {
    opacity: 1;
    transform: translateX(-120vw) rotate(-10deg) skewX(-8deg) scaleY(0.92);
  }

  72% {
    opacity: 1;
    transform: translateX(18px) rotate(-4deg) skewX(-5deg) scaleY(0.95);
  }

  100% {
    opacity: 1;
    transform: translateX(0) rotate(0) skewX(0deg) scaleY(1);
  }
}

/* Ajustes para pantallas mas grandes */
@media (min-width: 720px) {
  .intro-screen {
    padding: 48px 28px;
    grid-template-rows: minmax(0, 1fr) auto auto;
  }

  .loader-ring {
    width: 42px;
    height: 42px;
  }

  .intro-logo {
    width: min(44vw, 340px);
  }
}

/* Ajuste para celulares con poca altura disponible */
@media (max-height: 680px) {
  .intro-screen {
    padding-block: 18px;
    gap: 10px;
  }

  .intro-sonic {
    width: min(62vw, 230px);
    max-height: 34dvh;
  }

  .intro-message {
    font-size: clamp(1.15rem, 5.8vw, 1.6rem);
  }

  .start-button {
    min-height: 50px;
  }
}

/* =========================================
   Sprint 3 - Inicio de la misión
========================================= */

.mission-progress {
  position: absolute;
  top: 24px;
  left: 50%;
  z-index: 5;
  width: min(86vw, 360px);
  transform: translateX(-50%);
  opacity: 0;
  text-align: center;
  transition: opacity 400ms ease;
}

.green-hill-screen.is-mission-starting .mission-progress {
  opacity: 1;
}

.mission-progress > span {
  display: block;
  margin-bottom: 8px;
  font-size: 1.1rem;
  font-weight: 900;
  text-shadow: 0 3px 0 rgba(0, 43, 130, 0.5);
}

.progress-bar {
  width: 100%;
  height: 14px;
  overflow: hidden;
  border: 3px solid #ffffff;
  border-radius: 999px;
  background: rgba(0, 30, 100, 0.45);
  box-shadow: 0 4px 10px rgba(0, 30, 100, 0.35);
}

.progress-fill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffe45c, #ffc400);
  transition: width 350ms ease;
}

/* Objetivo */

.mission-objective {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 6;
  width: min(86vw, 360px);
  padding: 24px 20px;
  border: 3px solid #ffffff;
  border-radius: 20px;
  background: rgba(253, 253, 253, 0.95);
  box-shadow: 0 12px 30px rgba(0, 20, 80, 0.4);
  opacity: 0;
  text-align: center;
  transform: translate(-50%, -50%) scale(0.85);
}

.mission-objective.is-visible {
  animation: mission-objective-in 500ms ease-out forwards;
}

.mission-objective.is-hidden {
  animation: mission-objective-out 400ms ease forwards;
}

.mission-label {
  margin: 0 0 8px;
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #004aa8;
}

.mission-objective h2 {
  margin: 0 0 8px;
  font-size: clamp(1.5rem, 7vw, 2.2rem);
  color: #004aa8;
}

.mission-objective p:last-child {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #004aa8;
}

/* Cuenta regresiva */

.countdown {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 7;
  font-size: clamp(5rem, 28vw, 9rem);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 8px 0 rgba(0, 43, 130, 0.55);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
}

.countdown.is-visible {
  animation: countdown-pop 500ms ease-out forwards;
}

/* Anillo */

.game-ring {
  position: absolute;
  z-index: 4;

  /* Zona táctil */
  width: 125px;
  height: 125px;

  padding: 0;
  border: 0;
  background: transparent;

  display: flex;
  justify-content: center;
  align-items: center;

  cursor: pointer;

  opacity: 0;

  touch-action: manipulation;
}

.game-ring img {
  width: 70px;
  height: 70px;

  object-fit: contain;

  pointer-events: none;

  filter: drop-shadow(0 0 12px rgba(255, 225, 67, 0.9));
}


.game-ring.is-caught {
  pointer-events: none;
  animation: ring-caught 300ms ease-out forwards;
}

/* Animaciones */

@keyframes mission-objective-in {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.85);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes mission-objective-out {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
}

@keyframes countdown-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }

  60% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}



@keyframes ring-caught {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1.5) rotate(20deg);
  }
}

/* anillo volador */
.flying-ring{
    position:fixed;
    width:70px;
    pointer-events:none;
    z-index:9999;
}