/* IMPORTANTE: @import siempre al principio */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

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

body {
  background-color: #5a8a3c;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 31px, rgba(0,0,0,0.1) 31px, rgba(0,0,0,0.1) 32px),
    repeating-linear-gradient(90deg, transparent, transparent 31px, rgba(0,0,0,0.1) 31px, rgba(0,0,0,0.1) 32px);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Press Start 2P', monospace;
  padding: 20px;
}

/* ===== AUTOR ===== */
#autor {
  width: 100%;
  max-width: 600px;
  text-align: center;
  margin: 0 auto 20px auto;
}

#autor img {
  width: 60px !important;
  height: 60px !important;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  border: 4px solid #4caf50;
  box-shadow: 4px 4px 0px #2d6b30;
  display: block;
  margin: 0 auto 8px auto;
}

#autor p {
  font-size: 0.55rem;
  color: #fff7c0;
  margin-bottom: 6px;
}

#autor strong {
  font-size: 0.85rem;
  color: #4caf50;
  text-shadow: 2px 2px #2d1b00;
  display: block;
}

/* ===== PANTALLAS ===== */
.pantalla {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.oculto {
  display: none !important;
}

.caja {
  background-color: #c6a96e;
  border: 4px solid #5a3a1a;
  box-shadow: 6px 6px 0px #5a3a1a;
  padding: 30px;
  width: 100%;
  text-align: center;
}

h1 {
  font-size: 1.4rem;
  color: #2d1b00;
  margin-bottom: 10px;
  text-shadow: 2px 2px #fff7c0;
}

h2 {
  font-size: 1.2rem;
  color: #2d1b00;
  margin-bottom: 15px;
}

p {
  font-size: 0.65rem;
  color: #3b2800;
  margin-bottom: 15px;
  line-height: 1.8;
}

input[type="text"] {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.65rem;
  padding: 10px;
  border: 3px solid #5a3a1a;
  background: #fff7c0;
  width: 100%;
  margin-bottom: 15px;
  outline: none;
}

button {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.65rem;
  background-color: #4caf50;
  color: white;
  border: 3px solid #2d6b30;
  box-shadow: 3px 3px 0px #2d6b30;
  padding: 10px 20px;
  cursor: pointer;
  margin: 5px;
  transition: transform 0.1s;
}

button:hover {
  background-color: #66bb6a;
}

button:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0px #2d6b30;
}

/* ===== INFO ARRIBA DEL QUIZ ===== */
.info-arriba {
  display: flex;
  justify-content: space-between;
  font-size: 0.55rem;
  color: #3b2800;
  margin-bottom: 20px;
  background: #b8935a;
  padding: 8px;
  border: 2px solid #5a3a1a;
}

/* ===== PREGUNTA ===== */
.pregunta {
  font-size: 0.7rem;
  color: #2d1b00;
  margin-bottom: 20px;
  line-height: 2;
  min-height: 60px;
}

/* ===== OPCIONES ===== */
.opciones {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.opcion {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.6rem;
  background-color: #fff7c0;
  color: #2d1b00;
  border: 3px solid #5a3a1a;
  box-shadow: 3px 3px 0px #5a3a1a;
  padding: 12px;
  cursor: pointer;
  text-align: left;
  transition: transform 0.1s;
}

.opcion:hover {
  background-color: #ffe87a;
}

.opcion:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0px #5a3a1a;
}

.opcion.correcta {
  background-color: #a5d6a7;
  border-color: #2e7d32;
  box-shadow: 3px 3px 0px #2e7d32;
}

.opcion.incorrecta {
  background-color: #ef9a9a;
  border-color: #b71c1c;
  box-shadow: 3px 3px 0px #b71c1c;
}

/* ===== FOTO DE PERFIL ===== */
.foto-contenedor {
  margin-bottom: 15px;
  text-align: center;
}

.foto-contenedor input[type="file"] {
  font-size: 0.5rem;
  font-family: 'Press Start 2P', monospace;
  width: 100%;
  margin-bottom: 8px;
  border: none;
  background: none;
  padding: 0;
  box-shadow: none;
}

#foto-preview {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid #5a3a1a;
  object-fit: cover;
  display: none;
  margin: 0 auto;
}

/* ===== FOTOS EN RANKING ===== */
.foto-ranking {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #5a3a1a;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 8px;
}

.foto-ranking.sin-foto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #5a3a1a;
  color: #fff7c0;
  font-size: 0.7rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}

/* ===== RANKING ===== */
#lista-ranking {
  text-align: left;
  padding-left: 20px;
  margin-bottom: 20px;
}

#lista-ranking li {
  font-size: 0.6rem;
  color: #2d1b00;
  margin-bottom: 10px;
  line-height: 1.8;
}

#lista-ranking li:first-child { color: #b8860b; }
#lista-ranking li:nth-child(2) { color: #707070; }
#lista-ranking li:nth-child(3) { color: #7c4d00; }