html {
  box-sizing: border-box;
  font-size: 16px;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body {
  font-family: Arial, sans-serif;
  text-align: center;
  background: #f2f2f2;
  margin: 0;
  min-height: 100vh;
  color: #222;
}

/* Info del juego */
#game-info {
  font-size: clamp(1em, 2vw, 1.2em);
  margin-bottom: 1em;
}

/* Área de juego */
#game-area {
  width: 100vw;
  max-width: 420px;
  height: 100vw;
  max-height: 420px;
  margin: 2.2rem auto 1.3rem auto;
  background: #fff;
  border: 2px solid #2196f3;
  position: relative;
  overflow: hidden;
  border-radius: 0.9em;
  box-shadow: 0 2px 14px #bbb4;
  aspect-ratio: 1/1;
}

/* Círculo responsive */
.circle {
  width: clamp(38px, 12vw, 54px);
  height: clamp(38px, 12vw, 54px);
  background: #4caf50;
  border-radius: 50%;
  position: absolute;
  cursor: pointer;
  box-shadow: 0 3px 10px #999;
  transition: background 0.2s;
  touch-action: manipulation;
}
.circle:active {
  background: #388e3c;
}

/* Botón Start */
#start-btn {
  font-size: clamp(1em, 3vw, 1.15em);
  padding: 0.7em 2em;
  margin-top: 1em;
  cursor: pointer;
  background: #2196f3;
  color: white;
  border: none;
  border-radius: 0.45em;
  box-shadow: 0 2px 8px #2196f366;
  transition: background 0.2s;
}
#start-btn:hover,
#start-btn:active {
  background: #1976d2;
}

/* Game Over */
#game-over {
  margin-top: 1.3em;
  font-size: clamp(1em, 2vw, 1.15em);
}

/* Oculto */
.hidden {
  display: none !important;
}

/* ==== Pantallas móviles ==== */
@media (max-width: 728px) {
  #game-area {
    max-width: 98vw;
    max-height: 98vw;
    border-radius: 6vw;
    box-shadow: 0 2px 8px #2196f350;
    margin-top: 5vw;
    margin-bottom: 4vw;
  }
  .circle {
    width: clamp(33px, 20vw, 54px);
    height: clamp(33px, 20vw, 54px);
  }
  #start-btn {
    font-size: clamp(1em, 8vw, 1.5em);
    padding: 1em 14vw;
    border-radius: 5vw;
    margin-top: 4vw;
  }
  #game-info {
    font-size: clamp(1em, 6vw, 1.25em);
    margin-bottom: 4vw;
  }
}

/* ==== Pantallas muy pequeñas ==== */
@media (max-width: 340px) {
  #game-area {
    max-width: 94vw;
    max-height: 94vw;
    border-radius: 13vw;
  }
  .circle {
    width: clamp(22px, 33vw, 38px);
    height: clamp(22px, 33vw, 38px);
  }
  #start-btn {
    font-size: clamp(0.9em, 10vw, 1.2em);
    padding: 0.5em 8vw;
    border-radius: 8vw;
  }
}

/* ::::::::::::::::::::::::::::::::: */