/* ============================================================
   Ciberdefensa — estilos
   ============================================================ */

*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }

html,body{
  height:100%;
  background:#04060e;
  color:#e2e8f0;
  font-family:"Segoe UI", system-ui, -apple-system, sans-serif;
  overflow:hidden;
  overscroll-behavior:none;
}

#app{
  position:fixed;
  inset:0;
  overflow:hidden;
}

#cv{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  background:#05060f;
  touch-action:none;   /* evita scroll/zoom al jugar */
}

/* ======================= Pantallas (overlays DOM) ======================= */

.screen{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right))
          max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  background:rgba(4,7,18,.88);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  z-index:10;
  overflow-y:auto;
  animation:fade .18s ease;
}
.screen.hidden{ display:none; }
@keyframes fade{ from{opacity:0} to{opacity:1} }

.panel{
  width:100%;
  max-width:560px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:12px;
}
.panel.wide{ max-width:820px; }

h1{
  font-size:clamp(26px, 7vw, 46px);
  letter-spacing:2px;
  background:linear-gradient(90deg,#38bdf8,#a78bfa,#4ade80);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
h2{ font-size:clamp(18px, 4.6vw, 28px); color:#c4b5fd; line-height:1.25; }

.sub{ font-size:clamp(13px, 3.4vw, 16px); color:#cbd5e1; line-height:1.55; max-width:44ch; }
.muted{ color:#64748b; font-size:clamp(11px, 2.8vw, 13px); line-height:1.5; max-width:46ch; }
.label{ font-size:clamp(11px, 2.6vw, 13px); letter-spacing:2px; color:#64748b; text-transform:uppercase; }
.best{ color:#facc15; font-size:clamp(12px, 3vw, 15px); }

/* ============================ Botones ============================ */

.btn{
  font-family:inherit;
  font-size:clamp(14px, 3.6vw, 17px);
  font-weight:600;
  color:#06121f;
  background:linear-gradient(90deg,#38bdf8,#4ade80);
  border:none;
  border-radius:12px;
  padding:12px 22px;
  cursor:pointer;
  transition:transform .12s ease, filter .12s ease;
  box-shadow:0 0 22px rgba(56,189,248,.35);
}
.btn:active{ transform:scale(.96); }
.btn:hover{ filter:brightness(1.08); }

.btn.ghost{
  background:rgba(56,189,248,.08);
  color:#93c5fd;
  border:1px solid rgba(56,189,248,.35);
  box-shadow:none;
  padding:10px 18px;
}
.btn.play{ width:min(320px, 78vw); font-size:clamp(16px, 4.2vw, 20px); }
.btn.on{ color:#06121f; }

.row{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.col{ display:flex; flex-direction:column; gap:10px; width:min(320px, 80vw); }

/* ============================ Dificultades ============================ */

.modes{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  gap:8px;
  width:100%;
}
.mode{
  font-family:inherit;
  background:rgba(148,163,184,.07);
  border:1.5px solid rgba(148,163,184,.22);
  border-radius:10px;
  padding:10px 8px;
  color:#cbd5e1;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:2px;
  align-items:center;
  transition:all .12s ease;
}
.mode small{ font-size:clamp(9px, 2.3vw, 11px); color:#64748b; }
.mode.sel{
  border-color:#38bdf8;
  background:rgba(56,189,248,.14);
  color:#e2e8f0;
  box-shadow:0 0 18px rgba(56,189,248,.25);
}
.mode:active{ transform:scale(.97); }

/* ============================== Cómo jugar ============================== */

.howto{
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:clamp(12px, 3.1vw, 15px);
  color:#cbd5e1;
  line-height:1.5;
  padding-left:18px;
  max-width:52ch;
}
.howto b{ color:#93c5fd; }

/* ================================ Codex ================================ */

.codexGrid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:8px;
  width:100%;
  margin:2px 0 6px;
}
.card{
  text-align:left;
  background:rgba(56,189,248,.06);
  border:1px solid rgba(56,189,248,.22);
  border-radius:10px;
  padding:10px;
  font-size:clamp(11px, 2.7vw, 13px);
  color:#cbd5e1;
  line-height:1.4;
}
.card .em{ font-size:22px; }
.card .t{ color:#e2e8f0; font-weight:700; }
.card .c{ color:#4ade80; font-size:.92em; }
.card .f{ color:#94a3b8; margin-top:4px; display:block; font-size:.92em; }
.card.locked{ opacity:.5; }
.card.locked .t{ color:#64748b; }

/* =============================== Quiz =============================== */

.quizOpts{
  display:flex;
  flex-direction:column;
  gap:8px;
  width:min(520px, 92vw);
}
.opt{
  font-family:inherit;
  text-align:left;
  font-size:clamp(12px, 3.2vw, 15px);
  color:#e2e8f0;
  background:rgba(148,163,184,.08);
  border:1.5px solid rgba(148,163,184,.25);
  border-radius:10px;
  padding:12px 14px;
  cursor:pointer;
  transition:all .12s ease;
}
.opt:active{ transform:scale(.98); }
.opt:disabled{ cursor:default; }
.opt.good{ border-color:#4ade80; background:rgba(74,222,128,.16); }
.opt.bad{ border-color:#f87171; background:rgba(248,113,113,.14); }
.quizFb{ min-height:1.2em; font-size:clamp(12px, 3vw, 14px); color:#facc15; line-height:1.45; max-width:50ch; }

/* ============================== Fin ============================== */

.stats{
  display:flex;
  gap:clamp(12px, 4vw, 26px);
  flex-wrap:wrap;
  justify-content:center;
}
.stats span{ font-size:clamp(12px, 3.1vw, 15px); color:#94a3b8; display:flex; flex-direction:column; gap:2px; }
.stats b{ color:#4ade80; font-size:clamp(16px, 4.2vw, 22px); }

.chips{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; max-width:60ch; }
.chips .chip{
  background:rgba(74,222,128,.1);
  border:1px solid rgba(74,222,128,.35);
  border-radius:20px;
  padding:5px 12px;
  font-size:clamp(10px, 2.6vw, 12px);
  color:#bbf7d0;
}
.chips .chip.none{ background:rgba(148,163,184,.08); border-color:rgba(148,163,184,.25); color:#94a3b8; }