/* ============================================================
   Juego · Formulación inorgánica — estilos propios de esta vista.
   Sin var() por el mismo motivo que main.css: compatibilidad con el
   validador CSS de NetBeans 8.2. Misma paleta que tablaPeriodica.css
   (documentada en la cabecera de main.css), clases propias -sin
   compartir con .tp-*- porque cada vista lleva las suyas.
   ============================================================ */

.fq-menu-main, .fq-main { max-width: 1100px; }

/* ── MENÚ: modo (nombre / fórmula) ───────────────────────────── */
.fq-modo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 6px;
}
.fq-modo-radio {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  pointer-events: none;
}
.fq-modo-card {
  display: block;
  cursor: pointer;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 12px;
  padding: 16px;
  transition: border-color .15s, background .15s, transform .12s ease;
}
.fq-modo-card:hover { transform: translateY(-2px); }
.fq-modo-radio:checked + .fq-modo-card {
  border-color: #e8a020;
  background: rgba(232, 160, 32, 0.12);
}
.fq-modo-radio:focus-visible + .fq-modo-card {
  outline: 2px solid #3b8bd4;
}
.fq-modo-icono {
  display: inline-block;
  font-size: 1.8rem;
  line-height: 1;
  margin-bottom: 8px;
  transition: transform .15s ease;
}
.fq-modo-card:hover .fq-modo-icono { transform: scale(1.15) rotate(-6deg); }
.fq-modo-nombre { font-family: 'Fredoka', 'Playfair Display', serif; font-size: 1rem; margin-bottom: 4px; }
.fq-modo-desc { font-size: 0.78rem; color: #5b6472; }

/* ── MENÚ: bloque (iones/binarios/terciarios/cuaternarios) + nivel ──── */
.fq-menu-form { display: flex; flex-direction: column; gap: 6px; }
.fq-menu-section-title {
  font-family: 'Fredoka', 'Playfair Display', serif;
  font-size: 1.1rem;
  margin: 20px 0 10px;
}
.fq-bloque-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.fq-bloque-tab-btn {
  background: none;
  border: 1px solid rgba(15, 23, 42, 0.15);
  color: #5b6472;
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 0.8rem;
  cursor: pointer;
}
.fq-bloque-tab-activo { color: #1b2433; background: #e8a020; border-color: #e8a020; }
.fq-nivel-panel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 6px;
}
.fq-nivel-panel[hidden] { display: none; }
.fq-nivel-option-radio {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  pointer-events: none;
}
.fq-nivel-option-card {
  display: block;
  cursor: pointer;
  text-align: center;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 10px;
  padding: 14px 10px;
  font-size: 0.86rem;
  transition: border-color .15s, background .15s, transform .12s ease;
}
.fq-nivel-option-card:hover { transform: translateY(-2px); }
.fq-nivel-option-radio:checked + .fq-nivel-option-card {
  border-color: #3ddc84;
  background: rgba(61, 220, 132, 0.14);
  color: #1f9d5c;
}
.fq-nivel-option-radio:focus-visible + .fq-nivel-option-card {
  outline: 2px solid #3b8bd4;
}
.fq-menu-footer { margin-top: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.fq-menu-aviso { font-size: 0.75rem; color: #5b6472; margin: 0; }

/* ── MENÚ: layout de dos columnas (formulario + ranking del nivel elegido) ── */
.fq-menu-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 28px;
  align-items: start;
}
.fq-menu-rankings {
  position: sticky;
  top: 16px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 16px;
  padding: 18px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
.fq-menu-rankings-titulo {
  font-family: 'Fredoka', 'Playfair Display', serif;
  font-size: 1.1rem;
  color: #a8710f;
  margin: 0 0 12px;
  min-height: 1.3em;
}
.fq-menu-ranking-jugar {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #1b2433;
  background: linear-gradient(135deg, #e8a020, #c07010);
  border-radius: 16px;
  padding: 6px 16px;
  text-decoration: none;
  transition: transform .1s ease;
}
.fq-menu-ranking-jugar:hover { transform: translateY(-1px); }
@media (max-width: 900px) {
  .fq-menu-layout { grid-template-columns: 1fr; }
  .fq-menu-rankings { position: static; max-height: none; }
}

/* ── BOTONES COMUNES ─────────────────────────────────────────── */
.fq-btn-empezar {
  display: inline-block;
  background: linear-gradient(135deg, #e8a020, #c07010);
  color: #1b2433;
  font-weight: 600;
  border: none;
  border-radius: 24px;
  padding: 10px 26px;
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 0 #8a4f0a;
  transition: transform .08s ease, box-shadow .08s ease;
}
.fq-btn-empezar:hover { transform: translateY(-1px); }
.fq-btn-empezar:active { transform: translateY(3px); box-shadow: 0 1px 0 #8a4f0a; }
.fq-btn-secundario {
  display: inline-block;
  background: none;
  color: #5b6472;
  border: 1px solid rgba(15, 23, 42, 0.15);
  border-radius: 24px;
  padding: 10px 26px;
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .12s ease, color .12s ease;
}
.fq-btn-secundario:hover { border-color: rgba(15, 23, 42, 0.32); color: #1b2433; }

/* ── PANTALLA DE JUEGO: cabecera (cronómetro + progreso + comprobar) ── */
.fq-jugar-layout { display: block; }
.fq-jugar-principal { position: relative; min-width: 0; }
.fq-jugar-header { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.fq-timer { display: flex; align-items: baseline; gap: 8px; }
.fq-timer-label { font-size: 0.75rem; color: #5b6472; text-transform: uppercase; letter-spacing: .06em; }
.fq-timer-valor { font-family: 'Fira Mono', monospace; font-size: 1.3rem; color: #a8710f; }
.fq-progreso { font-size: 0.85rem; color: #5b6472; margin-left: auto; }
.fq-btn-comprobar {
  background: linear-gradient(135deg, #ff6b5b, #e2503f);
  color: #2a1310;
  border: none;
  border-radius: 20px;
  padding: 8px 20px;
  font-size: 0.85rem;
  cursor: pointer;
  font-weight: 600;
  box-shadow: 0 4px 0 #a8321f;
  transition: transform .08s ease, box-shadow .08s ease;
}
.fq-btn-comprobar:hover { transform: translateY(-1px); }
.fq-btn-comprobar:active { transform: translateY(3px); box-shadow: 0 1px 0 #a8321f; }

/* ── TARJETAS DE COMPUESTO ───────────────────────────────────── */
.fq-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.fq-card {
  background: #f5f7fb;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 10px;
  padding: 14px 10px 10px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.fq-card-formula {
  text-align: center;
  font-family: 'Fira Mono', monospace;
  font-weight: 600;
  font-size: 1.15rem;
  color: #1b2433;
}
.fq-card-formula sub { font-size: 0.7em; }
.fq-card-formula sup { font-size: 0.65em; }
.fq-card-input-wrap { position: relative; }
.fq-card-input {
  width: 100%;
  background: #eef2f7;
  color: #1b2433;
  border: 1px solid rgba(15, 23, 42, 0.15);
  border-radius: 6px;
  text-align: center;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.82rem;
  padding: 8px 6px;
  box-sizing: border-box;
}
.fq-card-input:focus-visible { outline: 2px solid #3b8bd4; }

/* Vista previa en vivo (modo "formula"): mismo formato químico que el
   enunciado, para que escribir subíndices/carga a teclado normal sea
   fácil -se ve al instante cómo queda, sin teclado especial-. */
.fq-card-previa {
  min-height: 1.1em;
  text-align: center;
  font-family: 'Fira Mono', monospace;
  font-size: 0.95rem;
  color: #5b6472;
}
.fq-card-previa sub, .fq-card-previa sup { color: #a8710f; }

.fq-input-correct { border-color: #3ddc84 !important; color: #1f9d5c !important; }
.fq-input-incorrect { border-color: #ff5470 !important; color: #d0335a !important; }

/* Información adicional al acertar: el mismo nombre en el idioma "hermano" */
.fq-card-traduccion { font-size: 0.7rem; color: #1f9d5c; text-align: center; }
.fq-card-traduccion[hidden] { display: none; }

.fq-porque-btn {
  position: absolute;
  bottom: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ff6b5b;
  color: #2a1310;
  border: none;
  font-size: 0.65rem;
  line-height: 18px;
  padding: 0;
  cursor: pointer;
}

.fq-nota-nivel { font-size: 0.72rem; color: #5b6472; margin: 10px 0 4px; }

/* ── OVERLAY "EMPEZAR" ───────────────────────────────────────── */
.fq-listo-overlay {
  position: absolute;
  inset: 0;
  background: rgba(238, 242, 247, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  z-index: 5;
}
.fq-listo-overlay[hidden] { display: none; }
.fq-listo-caja { text-align: center; max-width: 360px; padding: 20px; }
.fq-listo-caja h2 { font-family: 'Fredoka', 'Playfair Display', serif; margin-bottom: 8px; }
.fq-listo-caja p { color: #5b6472; margin-bottom: 18px; }

/* ── PANEL DE VICTORIA ───────────────────────────────────────── */
.fq-victoria-panel {
  background: #ffffff;
  border: 1px solid rgba(232, 160, 32, 0.4);
  border-radius: 14px;
  padding: 24px;
  margin-top: 18px;
  text-align: center;
}
.fq-victoria-panel h2 { font-family: 'Fredoka', 'Playfair Display', serif; color: #a8710f; margin-bottom: 6px; }
.fq-victoria-panel form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; margin-top: 14px; }
.fq-victoria-panel label { font-size: 0.8rem; color: #5b6472; }
.fq-victoria-panel input[type="text"] {
  background: #eef2f7;
  color: #1b2433;
  border: 1px solid rgba(15, 23, 42, 0.15);
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 0.85rem;
}

/* ── POPOVER "¿POR QUÉ?" ─────────────────────────────────────── */
.fq-porque-popover {
  position: fixed;
  max-width: 300px;
  background: #ffffff;
  border: 1px solid rgba(232, 160, 32, 0.4);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.20);
  z-index: 20;
  font-size: 0.8rem;
}
.fq-porque-titulo { font-weight: 600; margin-bottom: 6px; color: #a8710f; padding-right: 16px; }
.fq-porque-texto { color: #1b2433; }
.fq-porque-cerrar {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  color: #5b6472;
  font-size: 1rem;
  cursor: pointer;
  line-height: 1;
}

.fq-volver { margin-top: 12px; font-size: 0.85rem; }
.fq-volver a { color: #2b6cb0; text-decoration: none; }

/* ── RANKING (debajo de las tarjetas) ─────────────────────────── */
.fq-ranking {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 14px;
  padding: 12px 16px;
  max-width: 480px;
  margin: 18px auto 0;
}
.fq-ranking h2 { font-family: 'Fredoka', 'Playfair Display', serif; font-size: 1rem; margin: 0 0 12px; }
.fq-ranking-vacio { font-size: 0.8rem; color: #5b6472; margin: 0; }
.fq-ranking-tabla { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.fq-ranking-tabla th {
  text-align: left;
  color: #5b6472;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.10);
}
.fq-ranking-tabla td { padding: 6px 4px; border-bottom: 1px solid rgba(15, 23, 42, 0.06); }
.fq-menu-rankings .fq-ranking-tabla { font-size: 0.72rem; }

/* ── PANEL "GUARDADO" ────────────────────────────────────────── */
.fq-guardado-panel { max-width: 640px; margin: 0 auto; text-align: center; padding: 40px 20px; }
.fq-guardado-panel h1 { font-family: 'Fredoka', 'Playfair Display', serif; color: #a8710f; }
.fq-guardado-panel p { color: #5b6472; margin-bottom: 20px; }
.fq-guardado-acciones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  .fq-modo-grid, .fq-nivel-panel { grid-template-columns: 1fr; }
  .fq-cards { grid-template-columns: repeat(2, 1fr); }
  .fq-ranking { max-width: none; }
}