/* ---------- TRIVIAL-QUESITOS NEON SKIN ---------- */
:root{
  /* colores de quesito clásicos en versión neón */
  --c-rojo    : #ff2a6c; /* Deporte       */
  --c-verde   : #00ff9f; /* Ciencia       */
  --c-amarillo: #fff500; /* Espectáculos  */
  --c-azul    : #00f2ff; /* Literatura    */
  --c-naranja : #ff8a00; /* Historia      */
  --c-morado  : #c300ff; /* Arte          */
  --c-gris    : #3a3a52; /* fondo general */
  --c-fondo   : #0d0f1c;

  --shadow-rojo    : 0 0 12px var(--c-rojo),    0 0 20px rgba(255,42,108,.35);
  --shadow-verde   : 0 0 12px var(--c-verde),   0 0 20px rgba(0,255,159,.35);
  --shadow-amarillo: 0 0 12px var(--c-amarillo),0 0 20px rgba(255,245,0,.35);
  --shadow-azul    : 0 0 12px var(--c-azul),    0 0 20px rgba(0,242,255,.35);
  --shadow-naranja : 0 0 12px var(--c-naranja), 0 0 20px rgba(255,138,0,.35);
  --shadow-morado  : 0 0 12px var(--c-morado),  0 0 20px rgba(195,0,255,.35);

  --text: #ffffff;
  --radius: 18px;
  --font: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

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

body{
  background:var(--c-fondo) url('data:image/svg+xml;utf8,\
    <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60">\
    <polygon points="30,5 45,15 45,35 30,45 15,35 15,15" fill="%23fff500" opacity=".06"/>\
    </svg>');
  color:var(--text);
  font-family:var(--font);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* ---------- HEADER ---------- */
header{
  width:100%;
  max-width:900px;
  margin:1.5rem auto;
  text-align:center;
}
header h1{
  font-size:2.6rem;
  letter-spacing:2px;
  text-transform:uppercase;
  background:linear-gradient(90deg,var(--c-amarillo),var(--c-azul));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:var(--shadow-amarillo);
}

/* ---------- BOTONES GENERICOS ---------- */
button{
  border:none;
  border-radius:var(--radius);
  padding:.9rem 2rem;
  font-size:1.1rem;
  font-weight:700;
  cursor:pointer;
  transition:transform .2s,box-shadow .2s;
}
button:hover{transform:translateY(-4px);}
button:active{transform:translateY(0);}

/* ---------- GRID DE TEMAS (quesitos) ---------- */
.botones{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1.2rem;
  margin-top:1.5rem;
}

.botones button{
  position:relative;
  background:var(--c-gris);
  color:var(--text);
  border:3px solid;
  overflow:hidden;
  transition:all .3s;
}

/* asignamos color de quesito a cada botón (puedes cambiar orden) */
.botones button:nth-child(1){border-color:var(--c-rojo);    text-shadow:var(--shadow-rojo);}
.botones button:nth-child(2){border-color:var(--c-verde);   text-shadow:var(--shadow-verde);}
.botones button:nth-child(3){border-color:var(--c-amarillo);text-shadow:var(--shadow-amarillo);}
.botones button:nth-child(4){border-color:var(--c-azul);    text-shadow:var(--shadow-azul);}
.botones button:nth-child(5){border-color:var(--c-naranja); text-shadow:var(--shadow-naranja);}
.botones button:nth-child(6){border-color:var(--c-morado);  text-shadow:var(--shadow-morado);}

.botones button::before{
  content:"";
  position:absolute;
  inset:0;
  background:currentColor;
  opacity:.15;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s;
}
.botones button:hover::before{transform:scaleX(1);}
.botones button:hover{
  box-shadow:0 8px 24px currentColor;
}

/* ---------- CONTENEDORES ---------- */
main{
  width:100%;
  max-width:900px;
  padding:1rem;
}
#menu,#juego,#resultados{
  background:rgba(26,28,46,.75);
  backdrop-filter:blur(10px);
  border:2px solid var(--c-azul);
  border-radius:var(--radius);
  box-shadow:var(--shadow-azul);
  padding:2rem;
  margin-bottom:2rem;
}

/* ---------- PREGUNTA ---------- */
#preguntaBox{
  font-size:1.6rem;
  font-weight:700;
  text-align:center;
  margin-bottom:1.5rem;
  letter-spacing:.5px;
}

/* ---------- OPCIONES ---------- */
#opcionesBox{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.opcion{
  background:var(--c-gris);
  border:3px solid transparent;
  border-radius:var(--radius);
  padding:1.2rem 1.8rem;
  font-size:1.15rem;
  cursor:pointer;
  transition:all .25s;
}
.opcion:hover{
  border-color:var(--c-amarillo);
  box-shadow:var(--shadow-amarillo);
  transform:scale(1.02);
}
.opcion.correcta{
  background:var(--c-verde);
  color:var(--c-fondo);
  border-color:var(--c-verde);
  box-shadow:var(--shadow-verde);
}
.opcion.incorrecta{
  background:var(--c-rojo);
  color:var(--c-fondo);
  border-color:var(--c-rojo);
  box-shadow:var(--shadow-rojo);
}

/* ---------- RESULTADOS ---------- */
#resumen{
  font-size:1.4rem;
  text-align:center;
  margin-bottom:1.5rem;
}
#detalles{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.fila{
  background:var(--c-gris);
  border-left:6px solid var(--c-azul);
  padding:1rem 1.2rem;
  border-radius:var(--radius);
}
.fila.ok{border-color:var(--c-verde);}
.fila.error{border-color:var(--c-rojo);}

/* ---------- IMAGEN HERO ---------- */
#hero-img img{
  width:100%;
  border-radius:var(--radius);
  margin-top:1.5rem;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}