:root {
  --glass: rgba(14, 22, 44, 0.62);
  --glass-bd: rgba(140, 180, 255, 0.28);
  --txt: #eaf2ff;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  color: var(--txt);
  -webkit-user-select: none;
  user-select: none;
}

/* Fondos por página */
body.earth  { background: radial-gradient(circle at 50% 28%, #1a2750 0%, #0b1124 55%, #05060f 100%); }
body.social { background: radial-gradient(circle at 50% 22%, #4a3625 0%, #2a1d12 55%, #140d08 100%); }
body.menu   { background: linear-gradient(160deg, #1b2a4a 0%, #2a1f3d 55%, #3a1f2e 100%); overflow: auto; }

/* Botón "Menú" (volver) */
#back {
  position: fixed;
  top: 14px; right: 14px;
  z-index: 4;
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 9px 14px;
  border-radius: 12px;
  backdrop-filter: blur(6px);
}
#back:hover { background: rgba(0, 0, 0, 0.6); }

/* Lienzo 3D ocupa toda la pantalla, detrás de la interfaz */
#app { position: fixed; inset: 0; z-index: 0; }

/* Título */
#titulo {
  position: fixed;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  text-align: center;
  pointer-events: none;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
#titulo h1 { margin: 0; font-size: clamp(1.3rem, 3.4vw, 2.2rem); letter-spacing: .5px; }
#titulo p  { margin: 4px 0 0; font-size: clamp(.8rem, 2vw, 1rem); opacity: .85; }

/* Panel de controles */
#panel {
  position: fixed;
  top: 14px; left: 14px;
  z-index: 3;
  width: min(280px, 46vw);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--glass);
  border: 1px solid var(--glass-bd);
  border-radius: 18px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.row { display: flex; gap: 8px; }

button {
  font-family: inherit;
  font-weight: bold;
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 11px 12px;
  cursor: pointer;
  font-size: .95rem;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.28);
}
button:hover  { filter: brightness(1.1); }
button:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.28); }

.big {
  font-size: 1.08rem;
  padding: 14px;
  background: linear-gradient(135deg, #ff7a3c, #ff3d7f);
}
.accion { flex: 1; }
.eq   { background: linear-gradient(135deg, #f6c531, #e89a16); color: #2a2000; }
.mer  { background: linear-gradient(135deg, #ff9d3c, #ff6a00); }
.join { background: linear-gradient(135deg, #38bdf8, #2563eb); }
.mini { background: rgba(255, 255, 255, 0.14); font-weight: normal; box-shadow: none; padding: 8px; }
.mini:active { transform: translateY(2px); }

/* Barra para abrir/cerrar (la controla la nena) */
.slider-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 2px 2px;
}
.slider-wrap label { font-size: .9rem; }
.slider-wrap input[type="range"] {
  width: 100%;
  height: 26px;
  accent-color: #38bdf8;
  cursor: pointer;
}
.slider-wrap input[type="range"]:disabled { opacity: .4; cursor: not-allowed; }

/* Casillas (toggles) */
.toggles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.toggles label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .9rem;
  cursor: pointer;
}
.toggles input { width: 18px; height: 18px; accent-color: #ffcc33; cursor: pointer; }

/* Cartel explicativo */
#info {
  position: fixed;
  bottom: 18px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: min(720px, 92vw);
  padding: 16px 22px;
  background: var(--glass);
  border: 1px solid var(--glass-bd);
  border-radius: 18px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  text-align: center;
}
#info-text { margin: 0; font-size: clamp(1rem, 2.4vw, 1.22rem); line-height: 1.5; }
#info-text b { color: #ffe27a; }

/* Cargando */
#loading {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  background: radial-gradient(circle at 50% 40%, #16224a, #05060f);
  transition: opacity .6s ease;
}
#loading.hidden { opacity: 0; pointer-events: none; }

/* En pantallas chicas, el panel se angosta */
@media (max-width: 560px) {
  #panel { width: 60vw; padding: 10px; gap: 7px; }
  #titulo { top: auto; bottom: 130px; }
}

/* ============================================================
   MENÚ (home)
   ============================================================ */
.home {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 16px;
  text-align: center;
}
.home h1 { margin: 0; font-size: clamp(1.8rem, 5vw, 3rem); }
.home .sub { margin: 8px 0 26px; opacity: .85; font-size: clamp(1rem, 2.5vw, 1.2rem); }
.cards { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; }
.card {
  width: 280px;
  padding: 24px 20px;
  border-radius: 22px;
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.card:hover { transform: translateY(-6px); background: rgba(255, 255, 255, 0.12); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }
.card .emoji { font-size: 4rem; line-height: 1; }
.card .grade { margin-top: 10px; font-size: .9rem; opacity: .85; letter-spacing: .3px; }
.card .topic { margin-top: 4px; font-size: 1.35rem; font-weight: bold; }
.card .desc { margin-top: 8px; font-size: .95rem; opacity: .8; }
.card .go { margin-top: 16px; display: inline-block; font-weight: bold; padding: 9px 18px; border-radius: 12px; }
.c-earth  .go { background: linear-gradient(135deg, #38bdf8, #2563eb); }
.c-social .go { background: linear-gradient(135deg, #f6a23c, #e0612a); }
.pie { margin-top: 30px; opacity: .6; font-size: .9rem; }

/* ============================================================
   LECCIÓN DE SOCIALES — panel del temario
   ============================================================ */
#panel-soc {
  position: fixed;
  top: 84px; right: 14px;
  z-index: 3;
  width: min(380px, 90vw);
  max-height: 76vh;
  overflow-y: auto;
  padding: 18px 20px;
  background: rgba(28, 18, 10, 0.74);
  border: 1px solid rgba(255, 200, 140, 0.35);
  border-radius: 18px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
#prog { font-size: .82rem; letter-spacing: .5px; color: #ffce8a; text-transform: uppercase; }
#s-titulo { margin: 4px 0 2px; font-size: 1.5rem; color: #fff3df; }
#s-sub { margin: 0 0 10px; opacity: .85; font-size: 1rem; }
#s-puntos { margin: 0; padding-left: 4px; list-style: none; }
#s-puntos li {
  margin: 10px 0;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.06);
  border-left: 3px solid #f6a23c;
  border-radius: 10px;
  font-size: 1.02rem;
  line-height: 1.45;
}
#s-puntos li b { color: #ffd98a; }
.nav { display: flex; gap: 10px; margin-top: 14px; }
.nav button {
  flex: 1;
  background: rgba(255, 255, 255, 0.14);
  color: #fff; font-weight: bold; font-family: inherit;
  border: none; border-radius: 12px; padding: 11px; cursor: pointer;
}
.nav button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.24); }
.nav button:disabled { opacity: .35; cursor: not-allowed; }
.quiz {
  width: 100%; margin-top: 10px;
  background: linear-gradient(135deg, #f6a23c, #e0612a);
  color: #fff; font-weight: bold; font-family: inherit;
  border: none; border-radius: 12px; padding: 12px; cursor: pointer;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
}
.quiz:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }

/* ============================================================
   QUIZ (modo práctica)
   ============================================================ */
#quiz {
  position: fixed;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  background: rgba(8, 6, 4, 0.6);
  backdrop-filter: blur(4px);
  padding: 16px;
}
#quiz.hidden { display: none; }
#quiz-card {
  width: min(560px, 94vw);
  padding: 24px;
  background: #241811;
  border: 1px solid rgba(255, 200, 140, 0.35);
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
}
#q-prog { font-size: .82rem; color: #ffce8a; text-transform: uppercase; letter-spacing: .5px; }
#q-text { margin: 8px 0 18px; font-size: 1.3rem; color: #fff3df; line-height: 1.4; }
#q-options { display: flex; flex-direction: column; gap: 10px; }
.opt {
  text-align: left;
  font-family: inherit; font-size: 1.05rem; color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px; padding: 13px 15px; cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.opt:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16); }
.opt:disabled { cursor: default; }
.opt.ok  { border-color: #4ade80; background: rgba(74, 222, 128, 0.22); }
.opt.bad { border-color: #f87171; background: rgba(248, 113, 113, 0.22); }
.feedback { min-height: 1.2em; margin: 14px 0 0; font-size: 1.05rem; line-height: 1.4; }
.feedback.ok  { color: #86efac; }
.feedback.bad { color: #fca5a5; }
.quiz-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }
.quiz-nav button {
  font-family: inherit; font-weight: bold; color: #fff;
  border: none; border-radius: 12px; padding: 11px 20px; cursor: pointer;
}
#q-next { background: linear-gradient(135deg, #f6a23c, #e0612a); }
.quiz-nav .mini { background: rgba(255, 255, 255, 0.14); }
.quiz-nav .hidden { display: none; }

@media (max-width: 560px) {
  #panel-soc { top: auto; bottom: 12px; right: 50%; transform: translateX(50%); width: 94vw; max-height: 44vh; }
  #titulo { position: static; }
}