:root {
  --bg: #0d1117;
  --panel: #161b27;
  --panel2: #1c2333;
  --text: #e6e9f0;
  --muted: #8b93a7;
  --accent: #7c5cff;
  --accent2: #00d4a6;
  --ok: #2ecc71;
  --ko: #ff5470;
  --radius: 16px;
  font-size: 17px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: radial-gradient(1200px 600px at 50% -200px, #1b2340 0%, var(--bg) 60%);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
main { width: 100%; max-width: 560px; padding: 0 1rem 3rem; display: flex; flex-direction: column; min-height: 100vh; }
header { text-align: center; padding: 2rem 1rem 0.5rem; }
h1 { font-size: 2.2rem; letter-spacing: -0.02em; }
h1 .ia { color: var(--accent); }
h1 .no { color: var(--accent2); }
.tagline { color: var(--muted); margin-top: 0.4rem; font-size: 0.95rem; }
.day { color: var(--muted); font-size: 0.85rem; margin-top: 0.3rem; }

#dots { display: flex; gap: 6px; justify-content: center; margin: 1.2rem 0; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: #2a3247; }
.dot.current { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.dot.ok { background: var(--ok); }
.dot.ko { background: var(--ko); }

#card {
  background: var(--panel);
  border: 1px solid #232c42;
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  height: 460px; /* Altura fija para que los botones no salten */
  touch-action: pan-y; /* Previene gestos de navegación horizontal del navegador */
  -webkit-user-select: none; /* Previene selección de texto en iOS/Safari */
  user-select: none; /* Previene selección de texto que interfiere con el swipe */
}
#game { flex-grow: 1; display: flex; flex-direction: column; }
#round-text {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
  line-height: 1.5;
  text-align: center;
  flex-grow: 1; /* Ocupar el espacio disponible */
  display: flex;
  align-items: center;
  justify-content: center;
}
#round-image {
  margin: 0;
  flex-grow: 1; /* Ocupar el espacio disponible */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #10141f;
  border-radius: 12px;
  overflow: hidden;
}
#round-image.loading::after {
  content: "Cargando… 🖼️";
  color: var(--muted);
  font-size: 0.9rem;
  position: absolute;
}
#round-image { position: relative; }
#round-img {
  max-width: 100%;
  max-height: 340px;
  border-radius: 12px;
  display: block;
}
#reveal-attr a { color: var(--accent2); }
.question { text-align: center; color: var(--muted); margin-top: auto; font-size: 0.9rem; }
.choices { display: flex; gap: 0.8rem; margin-top: 0.8rem; }
.choices button {
  flex: 1;
  padding: 1rem;
  font-size: 1.05rem;
  font-weight: 700;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  color: #fff;
  transition: transform 0.1s, filter 0.15s;
}
.choices button:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.15); }
.choices button:disabled { opacity: 0.45; cursor: default; }
#btn-human { background: linear-gradient(135deg, #00b894, #00d4a6); }
#btn-ai { background: linear-gradient(135deg, #6c5ce7, #7c5cff); }

#reveal {
  margin-top: 1rem;
  background: var(--panel2);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  text-align: center;
  animation: pop 0.25s ease;
}
@keyframes pop { from { transform: scale(0.95); opacity: 0; } }
#reveal-title { font-size: 1.2rem; font-weight: 800; }
#reveal-title.ok { color: var(--ok); }
#reveal-title.ko { color: var(--ko); }
#reveal-attr { color: var(--muted); margin-top: 0.5rem; font-size: 0.95rem; line-height: 1.4; }
#btn-next {
  margin-top: 1rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0.7rem 1.6rem;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
#btn-next:hover { filter: brightness(1.15); }

#end { text-align: center; background: var(--panel); border-radius: var(--radius); padding: 2rem 1.5rem; border: 1px solid #232c42; }
#end h2 { font-size: 1.4rem; }
#score { font-size: 3rem; font-weight: 900; color: var(--accent2); margin: 0.4rem 0; }
#share-grid { font-size: 1.4rem; letter-spacing: 2px; margin-bottom: 1rem; }
#btn-share {
  background: linear-gradient(135deg, var(--accent), #9b7bff);
  color: #fff; border: none; border-radius: 12px;
  padding: 0.9rem 2rem; font-size: 1.05rem; font-weight: 800; cursor: pointer;
}
#btn-share:hover { filter: brightness(1.15); }
#stats { display: flex; justify-content: center; gap: 1.8rem; margin-top: 1.6rem; }
#stats div { display: flex; flex-direction: column; }
#stats b { font-size: 1.4rem; }
#stats span { color: var(--muted); font-size: 0.75rem; }
.next-in { color: var(--muted); margin-top: 1.4rem; font-size: 0.9rem; }
#countdown { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 700; }

.ad-slot { margin: 1.5rem auto; min-height: 0; text-align: center; }

.about { margin-top: 4rem; color: var(--muted); font-size: 0.9rem; line-height: 1.6; }
.about h2 { color: var(--text); font-size: 1.05rem; margin-bottom: 0.4rem; }
.about p + h2 { margin-top: 1.2rem; }
footer { color: #5a6376; font-size: 0.8rem; text-align: center; padding: 2rem 1rem; }
footer a { color: #7f8aa3; }
[hidden] { display: none !important; }

#consent-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--panel2);
  border-top: 1px solid #2a3247;
  padding: 1rem 1.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--muted);
  z-index: 100;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.5);
}
#consent-banner p { max-width: 560px; line-height: 1.45; margin: 0; }
#consent-banner a { color: var(--accent2); }
.consent-actions { display: flex; gap: 0.6rem; }
.consent-actions button {
  border: none; border-radius: 10px; padding: 0.6rem 1.3rem;
  font-weight: 700; font-size: 0.9rem; cursor: pointer; color: #fff;
}
/* AEPD: aceptar y rechazar al mismo nivel, mismo tamaño y contraste no engañoso */
#consent-accept { background: var(--accent); }
#consent-reject { background: #4a5470; }

/* Optimización "Above the fold" para móviles y pantallas pequeñas */
@media (max-width: 600px), (max-height: 800px) {
  body {
    min-height: 100svh; /* Usar svh para evitar la barra de navegación del móvil */
  }
  main { padding: 0 0.8rem 1rem; }
  header { padding: 0.8rem 0.5rem 0.2rem; }
  h1 { font-size: 1.7rem; }
  .tagline { display: none; } /* Ocultar para ahorrar espacio vertical */
  .day { margin-top: 0.2rem; font-size: 0.8rem; }
  
  #dots { margin: 0.5rem 0; gap: 5px; }
  .dot { width: 10px; height: 10px; }
  
  #card { padding: 1.2rem 1rem; height: 55svh; min-height: 380px; }
  #round-text { font-size: 1.1rem; }
  #round-image { }
  #round-img { max-height: 28vh; } /* Que la imagen no ocupe toda la pantalla */
  
  .question { margin-top: 0.8rem; font-size: 0.85rem; }
  .choices { margin-top: 0.6rem; gap: 0.6rem; }
  .choices button { padding: 0.8rem; font-size: 0.95rem; }
  
  /* Con el revelado abierto, compactar la tarjeta: la pregunta y los botones
     de respuesta (ya deshabilitados) se ocultan para que «Siguiente» quede
     siempre above the fold */
  #game.revealed #card { height: auto; min-height: 0; }
  #game.revealed .question,
  #game.revealed .choices { display: none; }

  #reveal { margin-top: 0.8rem; padding: 0.8rem 1rem; }
  #reveal-title { font-size: 1.1rem; }
  #reveal-attr { font-size: 0.85rem; margin-top: 0.3rem; }
  #btn-next { margin-top: 0.6rem; padding: 0.6rem 1.2rem; font-size: 0.95rem; }
  
  .ad-slot { margin: 0.5rem auto; }
}