/* ============================================================
   Juego · Tabla periódica — estilos propios de esta vista.
   Sin var() por el mismo motivo que main.css: compatibilidad con el
   validador CSS de NetBeans 8.2. Colores de categoría reutilizan tonos
   ya presentes en pila.css/pilaSimulator.js para no introducir una
   paleta nueva.
   ============================================================ */

/* La pantalla de juego (no el menú) usa todo el ancho disponible: el grid de
   18 columnas se ve pequeño si se queda encajado en el ancho de lectura
   normal (jv-main, max-width 1100px) — aquí interesa más espacio, no texto
   cómodo de leer. */
/* Padding vertical mucho más ajustado que el de una página de lectura
   normal (jv-main de base usa 40px/60px): aquí cada píxel de alto cuenta
   para que la tabla quepa entera sin scroll. */
.tp-main { max-width: none; width: 100%; box-sizing: border-box; padding-top: 14px; padding-bottom: 18px; }

/* ── MENÚ: modo + nivel ─────────────────────────────────────── */
.tp-menu-form { display: flex; flex-direction: column; gap: 6px; }
.tp-menu-section-title {
  font-family: 'Fredoka', 'Playfair Display', serif;
  font-size: 1.1rem;
  margin: 20px 0 10px;
}
.tp-modo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.tp-modo-radio, .tp-nivel-option-radio {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  pointer-events: none;
}
.tp-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;
}
.tp-modo-card:hover { transform: translateY(-2px); }
.tp-modo-radio:checked + .tp-modo-card {
  border-color: #e8a020;
  background: rgba(232, 160, 32, 0.12);
}
.tp-modo-radio:focus-visible + .tp-modo-card {
  outline: 2px solid #3b8bd4;
}
.tp-modo-icono {
  display: inline-block;
  font-size: 1.8rem;
  line-height: 1;
  margin-bottom: 8px;
  transition: transform .15s ease;
}
.tp-modo-card:hover .tp-modo-icono { transform: scale(1.15) rotate(-6deg); }
.tp-modo-nombre { font-family: 'Fredoka', 'Playfair Display', serif; font-size: 1rem; margin-bottom: 4px; }
.tp-modo-desc { font-size: 0.78rem; color: #5b6472; }

.tp-nivel-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.tp-nivel-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;
}
.tp-nivel-tab-activo { color: #1b2433; background: #e8a020; border-color: #e8a020; }
.tp-nivel-panel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 6px;
}
.tp-nivel-panel[hidden] { display: none; }
.tp-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: 10px 8px;
  font-size: 0.82rem;
  transition: border-color .15s, background .15s, transform .12s ease;
}
.tp-nivel-option-card:hover { transform: translateY(-2px); }
.tp-nivel-option-radio:checked + .tp-nivel-option-card {
  border-color: #3ddc84;
  background: rgba(61, 220, 132, 0.14);
  color: #1f9d5c;
}
.tp-nivel-option-radio:focus-visible + .tp-nivel-option-card {
  outline: 2px solid #3b8bd4;
}
/* Modo "números de oxidación": nivel fijado en "formulación", no elegible */
.tp-nivel-tab-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.tp-nivel-option-radio:disabled + .tp-nivel-option-card { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.tp-menu-footer { margin-top: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.tp-menu-aviso { font-size: 0.75rem; color: #5b6472; margin: 0; }

/* ── MENÚ: layout de dos columnas (formulario + ranking a la derecha) ──── */
.tp-menu-main { max-width: 1320px; }
.tp-menu-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 28px;
  align-items: start;
}

/* ── MENÚ: decoración de la cabecera (átomo + moléculas) ────────────────
   Puramente decorativo (aria-hidden en el contenedor): un átomo tipo Bohr
   (núcleo + 3 órbitas girando a velocidades distintas) y unas moléculas
   pequeñas flotando detrás del título. Solo SVG + CSS, cero imágenes. */
.tp-menu-hero { position: relative; overflow: visible; }
.tp-menu-hero h1, .tp-menu-hero p { position: relative; z-index: 1; }
.tp-menu-hero-deco {
  position: absolute;
  top: -10px;
  right: 0;
  width: 260px;
  height: 150px;
  pointer-events: none;
  z-index: 0;
}
.tp-hero-atom { position: absolute; top: 0; right: 15px; width: 130px; height: 130px; opacity: 0.9; }
.tp-hero-atom-nucleus { fill: #e8a020; }
.tp-hero-atom-orbit { transform-box: view-box; transform-origin: 100px 100px; }
.tp-hero-atom-orbit ellipse { fill: none; stroke: rgba(232, 160, 32, 0.45); stroke-width: 2; }
/* Inclinación de cada anillo en reposo (también el estado con
   prefers-reduced-motion: reduce, ya que ahí no se aplica la animación de
   abajo); la animación, cuando corre, arranca desde este mismo ángulo. */
.tp-hero-atom-orbit-1 { transform: rotate(0deg); }
.tp-hero-atom-orbit-2 { transform: rotate(60deg); }
.tp-hero-atom-orbit-3 { transform: rotate(120deg); }
.tp-hero-atom-electron-1 { fill: #3b8bd4; }
.tp-hero-atom-electron-2 { fill: #ff5470; }
.tp-hero-atom-electron-3 { fill: #3ddc84; }
.tp-hero-molecula { position: absolute; opacity: 0.35; }
.tp-hero-molecula line { stroke: #5b6472; stroke-width: 2; }
.tp-hero-molecula circle { fill: #3b8bd4; }
.tp-hero-molecula-1 { width: 46px; height: 46px; top: 6px; right: 160px; }
.tp-hero-molecula-2 { width: 32px; height: 32px; top: 92px; right: 205px; }
.tp-hero-molecula-3 { width: 26px; height: 26px; top: 10px; right: 232px; }
@media (max-width: 780px) {
  .tp-menu-hero-deco { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes tp-orbit-spin-1 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
  @keyframes tp-orbit-spin-2 { from { transform: rotate(60deg); } to { transform: rotate(420deg); } }
  @keyframes tp-orbit-spin-3 { from { transform: rotate(120deg); } to { transform: rotate(480deg); } }
  .tp-hero-atom-orbit-1 { animation: tp-orbit-spin-1 5s linear infinite; }
  .tp-hero-atom-orbit-2 { animation: tp-orbit-spin-2 7s linear infinite reverse; }
  .tp-hero-atom-orbit-3 { animation: tp-orbit-spin-3 6s linear infinite; }

  @keyframes tp-molecula-flotar {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }
  .tp-hero-molecula-1 { animation: tp-molecula-flotar 4s ease-in-out infinite; }
  .tp-hero-molecula-2 { animation: tp-molecula-flotar 5.5s ease-in-out infinite .6s; }
  .tp-hero-molecula-3 { animation: tp-molecula-flotar 3.5s ease-in-out infinite 1.2s; }
}

/* ── MENÚ: ranking lateral (un TOP por modo + acceso directo) ───────────── */
.tp-menu-rankings {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 16px;
  padding: 18px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
.tp-menu-rankings-titulo {
  font-family: 'Fredoka', 'Playfair Display', serif;
  font-size: 1.1rem;
  color: #a8710f;
  margin: 0;
}
.tp-menu-rankings-lista { display: flex; flex-direction: column; gap: 14px; }
.tp-menu-ranking-card {
  background: #f5f7fb;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 12px;
  padding: 12px 14px;
}
.tp-menu-ranking-card-titulo {
  font-family: 'Fredoka', 'Playfair Display', serif;
  font-size: 0.85rem;
  color: #1b2433;
  margin: 0 0 8px;
}
.tp-menu-ranking-card .tp-ranking-tabla { font-size: 0.72rem; }
.tp-menu-ranking-card .tp-ranking-vacio { font-size: 0.72rem; margin: 0 0 8px; }
.tp-menu-ranking-card-jugar {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #1b2433;
  background: linear-gradient(135deg, #e8a020, #c07010);
  border-radius: 16px;
  padding: 6px 14px;
  text-decoration: none;
  transition: transform .1s ease;
}
.tp-menu-ranking-card-jugar:hover { transform: translateY(-1px); }
@media (max-width: 900px) {
  .tp-menu-layout { grid-template-columns: 1fr; }
  .tp-menu-rankings { position: static; max-height: none; }
}

/* ── BOTONES COMUNES ─────────────────────────────────────────── */
/* Relieve "de goma": una sombra sólida a modo de canto inferior que se
   hunde al pulsar — más táctil que un botón plano, sin animaciones raras. */
.tp-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;
}
.tp-btn-empezar:hover { transform: translateY(-1px); }
.tp-btn-empezar:active { transform: translateY(3px); box-shadow: 0 1px 0 #8a4f0a; }
.tp-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;
}
.tp-btn-secundario:hover { border-color: rgba(15, 23, 42, 0.32); color: #1b2433; }

/* ── PANTALLA DE JUEGO: layout ───────────────────────────────── */
/* Una sola columna: el ranking va DEBAJO del grid (no al lado), para que
   la tabla se quede con todo el ancho — es lo importante de esta vista. */
.tp-jugar-layout { display: block; }
.tp-jugar-principal { position: relative; min-width: 0; }

.tp-jugar-header { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.tp-timer { display: flex; align-items: baseline; gap: 8px; }
.tp-timer-label { font-size: 0.75rem; color: #5b6472; text-transform: uppercase; letter-spacing: .06em; }
.tp-timer-valor { font-family: 'Fira Mono', monospace; font-size: 1.3rem; color: #a8710f; }
.tp-progreso { font-size: 0.85rem; color: #5b6472; margin-left: auto; }
.tp-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;
}
.tp-btn-comprobar:hover { transform: translateY(-1px); }
.tp-btn-comprobar:active { transform: translateY(3px); box-shadow: 0 1px 0 #a8321f; }

/* ── GRID DE LA TABLA ────────────────────────────────────────── */
/* Sin scroll a propósito: las columnas se encogen (minmax(0,1fr)) para que
   las 18 quepan siempre en el ancho disponible y se vea la tabla entera. */
.tp-grid-scroll { overflow-x: visible; padding-bottom: 4px; }
.tp-grid {
  display: grid;
  grid-template-columns: repeat(18, minmax(0, 1fr));
  gap: 1px;
  width: 100%;
}
.tp-grid-f { margin-top: 6px; }

.tp-cell {
  background: #f5f7fb;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 4px;
  padding: 3px 2px 1px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1px;
  position: relative;
  min-width: 0;
}
.tp-cell-num {
  position: absolute;
  top: 1px;
  left: 3px;
  font-size: clamp(0.36rem, min(0.4vw, 0.7vh), 0.52rem);
  color: #5b6472;
}
/* min(vw, vh): el tamaño respeta el ancho Y el alto de la ventana a la vez,
   para que el grid entero (18 columnas × ~9 filas) quepa siempre sin scroll
   en ningún sentido — antes solo miraba el ancho y en pantallas no muy
   altas se salía por abajo. */
.tp-cell-field { position: relative; margin-top: clamp(5px, min(0.6vw, 0.85vh), 9px); }
.tp-cell-field + .tp-cell-field { margin-top: 1px; }
/* input/button son inline-block por defecto: sin este display:block, la
   caja reserva la altura de línea heredada del body (mucho mayor que el
   propio campo cuando la letra es pequeña) y sobra un hueco invisible en
   cada celda — multiplicado por 118 casillas, era buena parte del scroll
   vertical de más. */
.tp-cell-field > input,
.tp-cell-field > button {
  display: block;
}
.tp-cell input {
  width: 100%;
  min-width: 0;
  background: #eef2f7;
  color: #1b2433;
  border: 1px solid rgba(15, 23, 42, 0.15);
  border-radius: 3px;
  text-align: center;
  font-family: 'Fira Mono', monospace;
  padding: 2px 0;
  box-sizing: border-box;
}
.tp-cell-symbol input { font-size: clamp(0.44rem, min(0.85vw, 1.35vh), 0.8rem); font-weight: 600; }
.tp-cell-name input { font-size: clamp(0.28rem, min(0.5vw, 0.8vh), 0.5rem); font-family: 'Source Sans 3', sans-serif; }

@media (max-width: 640px) {
  .tp-grid { gap: 1px; }
  .tp-cell { padding: 3px 2px 1px; border-radius: 4px; }
}
.tp-cell input:disabled {
  background: transparent;
  border-color: transparent;
  color: #1b2433;
  font-weight: 600;
}
.tp-cell-inactive { opacity: 0.35; }
.tp-cell-inactive input { pointer-events: none; }

/* Celda sobrevolada mientras se arrastra una ficha: transform es solo
   pintado (no afecta layout ni altura de fila), así que la celda se ve
   más grande y fácil de acertar sin mover ni encoger a las vecinas. */
.tp-cell-drag-over {
  z-index: 40;
  transform: scale(1.35);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.35);
  transition: transform .08s ease;
}

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

/* ── MODO ARRASTRAR: casillas de destino y banco de fichas ──────── */
.tp-cell-slot { margin-top: clamp(5px, min(0.6vw, 0.85vh), 9px); }
.tp-drop-slot {
  min-height: clamp(16px, min(1.6vw, 2.4vh), 26px);
  border: 1px dashed rgba(15, 23, 42, 0.28);
  border-radius: 4px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  cursor: pointer;
}
.tp-drop-slot:focus-visible { outline: 2px solid #3b8bd4; }

#tp-banco-wrap { margin: 16px 0; }
.tp-banco-titulo {
  font-size: 0.7rem;
  color: #5b6472;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 8px;
}
.tp-banco {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 10px;
  min-height: 58px;
}
.tp-tile {
  width: 60px;
  background: #f5f7fb;
  border: 1px solid rgba(232, 160, 32, 0.4);
  border-radius: 6px;
  padding: 4px 2px;
  text-align: center;
  cursor: grab;
  touch-action: none;
  user-select: none;
  box-sizing: border-box;
  transition: transform .12s ease;
}
.tp-tile:hover { transform: translateY(-2px); }
.tp-drop-slot .tp-tile { width: 100%; }
.tp-tile-simbolo { font-family: 'Fira Mono', monospace; font-weight: 600; font-size: clamp(0.6rem, min(1vw, 1.6vh), 0.95rem); color: #1b2433; }
.tp-tile-nombre {
  font-size: clamp(0.32rem, min(0.55vw, 0.9vh), 0.6rem);
  color: #5b6472;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tp-tile-seleccionada { border-color: #3ddc84; box-shadow: 0 0 0 2px rgba(61, 220, 132, 0.4); }
.tp-tile-arrastrando { position: fixed; z-index: 999; cursor: grabbing; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.35); }
.tp-tile:focus-visible { outline: 2px solid #3b8bd4; }

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

/* ── MODO OPCIÓN MÚLTIPLE ────────────────────────────────────── */
.tp-cell-opcion { margin-top: clamp(5px, min(0.6vw, 0.85vh), 9px); }
.tp-opcion-btn {
  width: 100%;
  background: #eef2f7;
  color: #1b2433;
  border: 1px solid rgba(15, 23, 42, 0.15);
  border-radius: 3px;
  font-family: 'Fira Mono', monospace;
  font-size: clamp(0.44rem, min(0.85vw, 1.35vh), 0.8rem);
  font-weight: 600;
  padding: 2px 0;
  cursor: pointer;
}
.tp-opcion-btn:focus-visible { outline: 2px solid #3b8bd4; }
.tp-opciones-lista {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-top: 8px;
}
.tp-opcion-elegible {
  background: #ffffff;
  color: #1b2433;
  border: 1px solid rgba(15, 23, 42, 0.15);
  border-radius: 6px;
  padding: 8px;
  font-family: 'Fira Mono', monospace;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease, transform .12s ease;
}
.tp-opcion-elegible:hover, .tp-opcion-elegible:focus-visible {
  border-color: #3ddc84;
  background: rgba(61, 220, 132, 0.12);
  transform: translateY(-1px);
}

/* ── MODO NÚMEROS DE OXIDACIÓN: banco superior (fichas grandes para
   arrastrar cómodo) + zona pequeña embebida en cada celda ──────────────── */
/* Formato "transparente": fondo transparente, solo borde y texto de color
   — el color indica el signo (azul = positivo, rojo = negativo), no la
   categoría del elemento. */
#tp-panel-quimico-wrap { margin: 0 0 16px; }
.tp-panel-quimico-titulo {
  font-size: 0.7rem;
  color: #5b6472;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 8px;
}
.tp-panel-quimico {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 10px;
}

/* Fichas grandes del banco: pensadas para agarrarlas cómodo al arrastrar. */
.tp-quimchip {
  background: transparent;
  border: 2px solid;
  border-radius: 10px;
  padding: 14px 20px;
  min-width: 52px;
  font-family: 'Fira Mono', monospace;
  font-weight: 700;
  font-size: 1.3rem;
  text-align: center;
  cursor: grab;
  touch-action: none;
  user-select: none;
  line-height: 1;
  transition: transform .12s ease;
}
.tp-quimchip:hover { transform: translateY(-2px); }
.tp-quimchip-positivo { border-color: #3b8bd4; color: #2b6cb0; }
.tp-quimchip-negativo { border-color: #ff5470; color: #d0335a; }

/* Ficha ya colocada en la celda: mismo formato transparente, mucho más
   pequeña para no forzar la altura de la fila más de lo necesario. */
.tp-quimchip-celda {
  padding: 0 3px;
  min-width: 0;
  border-width: 1px;
  border-radius: 3px;
  font-size: clamp(0.36rem, min(0.65vw, 1vh), 0.58rem);
  font-weight: 600;
}
.tp-quimchip-seleccionada { border-color: #3ddc84 !important; box-shadow: 0 0 0 2px rgba(61, 220, 132, 0.4); }
.tp-quimchip-arrastrando { position: fixed; z-index: 999; cursor: grabbing; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.35); }
/* Arrastrando varias a la vez: la ficha que se mueve lleva pegado cuántas
   van con ella. Solo existe mientras dura el arrastre, y cuelga de la
   propia ficha, que en ese momento ya es position:fixed — por eso aquí no
   se toca "position", que le ganaría a la regla de arriba y la dejaría
   clavada en el panel. */
.tp-quimchip-arrastrando.tp-quimchip-grupo::after {
  content: attr(data-cuenta);
  position: absolute;
  top: -9px;
  right: -9px;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  border-radius: 11px;
  background: #3ddc84;
  color: #07361d;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 21px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.35);
}
.tp-quimchip:focus-visible { outline: 2px solid #3b8bd4; }

/* Zona de destino embebida en la celda: mismo lenguaje visual que
   .tp-drop-slot del modo arrastrar (hueco discontinuo), pero admite varias
   fichas a la vez y crece con ellas en vez de tener altura fija. */
.tp-cell-oxid { margin-top: clamp(5px, min(0.6vw, 0.85vh), 9px); }
.tp-oxid-zona {
  min-height: clamp(16px, min(1.6vw, 2.4vh), 26px);
  border: 1px dashed rgba(15, 23, 42, 0.28);
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  gap: 2px;
  padding: 1px;
  cursor: pointer;
}
.tp-oxid-zona:focus-visible { outline: 2px solid #3b8bd4; }

/* Categorías (decorativo; no delata símbolo ni nombre) */
.tp-cat-hidrogeno      { background: rgba(15, 23, 42, 0.08); }
.tp-cat-alcalino       { background: rgba(224, 80, 80, 0.16); }
.tp-cat-alcalinoterreo { background: rgba(232, 160, 32, 0.16); }
.tp-cat-transicion     { background: rgba(59, 139, 212, 0.14); }
.tp-cat-terreo         { background: rgba(159, 127, 212, 0.16); }
.tp-cat-carbonoideo    { background: rgba(76, 175, 130, 0.16); }
.tp-cat-nitrogenoideo  { background: rgba(200, 104, 48, 0.18); }
.tp-cat-anfigeno       { background: rgba(122, 176, 184, 0.18); }
.tp-cat-halogeno       { background: rgba(217, 164, 65, 0.20); }
.tp-cat-noble          { background: rgba(136, 168, 176, 0.18); }
.tp-cat-lantanido      { background: rgba(95, 191, 110, 0.16); }
.tp-cat-actinido       { background: rgba(224, 192, 64, 0.16); }

/* Animación ambiente por categoría ("que los átomos se comporten distinto
   según el material"): cada familia tiene su propio ritmo, inspirado en
   una propiedad real (metales de transición = brillo metálico; gases
   nobles = el clásico tubo de neón; actínidos = parpadeo más nervioso por
   radiactivos; etc.). Solo box-shadow/filter/background-position —NUNCA
   transform—, para no pelearse con el scale() de .tp-cell-drag-over al
   arrastrar una ficha encima. Respeta prefers-reduced-motion: el tinte de
   categoría de arriba se ve igual, solo se pierde el movimiento. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes tp-anim-hidrogeno {
    0%, 44%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.5); }
  }
  .tp-cat-hidrogeno { animation: tp-anim-hidrogeno 3.4s ease-in-out infinite; }

  @keyframes tp-anim-alcalino {
    0%, 100% { box-shadow: inset 0 0 0 rgba(224, 80, 80, 0); }
    50% { box-shadow: inset 0 0 10px rgba(224, 80, 80, 0.55); }
  }
  .tp-cat-alcalino { animation: tp-anim-alcalino 2.6s ease-in-out infinite; }

  @keyframes tp-anim-alcalinoterreo {
    0%, 100% { box-shadow: inset 0 0 0 rgba(232, 160, 32, 0); }
    50% { box-shadow: inset 0 0 8px rgba(232, 160, 32, 0.45); }
  }
  .tp-cat-alcalinoterreo { animation: tp-anim-alcalinoterreo 3.8s ease-in-out infinite; }

  @keyframes tp-anim-transicion {
    0% { background-position: 150% 0; }
    100% { background-position: -150% 0; }
  }
  .tp-cat-transicion {
    background-image: linear-gradient(115deg, transparent 20%, rgba(43, 108, 176, 0.45) 50%, transparent 80%);
    background-size: 300% 100%;
    animation: tp-anim-transicion 4.5s linear infinite;
  }

  @keyframes tp-anim-terreo {
    0%, 100% { box-shadow: inset 0 0 0 rgba(159, 127, 212, 0); }
    50% { box-shadow: inset 0 0 8px rgba(159, 127, 212, 0.4); }
  }
  .tp-cat-terreo { animation: tp-anim-terreo 4.2s ease-in-out infinite; }

  @keyframes tp-anim-carbonoideo {
    0%, 92%, 100% { filter: brightness(1); }
    96% { filter: brightness(1.4) drop-shadow(0 0 6px rgba(76, 175, 130, 0.6)); }
  }
  .tp-cat-carbonoideo { animation: tp-anim-carbonoideo 5s ease-in-out infinite; }

  @keyframes tp-anim-nitrogenoideo {
    0%, 100% { box-shadow: inset 0 0 0 rgba(200, 104, 48, 0); }
    50% { box-shadow: inset 0 0 8px rgba(200, 104, 48, 0.4); }
  }
  .tp-cat-nitrogenoideo { animation: tp-anim-nitrogenoideo 4.6s ease-in-out infinite; }

  @keyframes tp-anim-anfigeno {
    0%, 100% { box-shadow: inset 0 0 0 rgba(122, 176, 184, 0); }
    50% { box-shadow: inset 0 0 10px rgba(122, 176, 184, 0.5); }
  }
  .tp-cat-anfigeno { animation: tp-anim-anfigeno 5.5s ease-in-out infinite; }

  @keyframes tp-anim-halogeno {
    0%, 100% { box-shadow: inset 0 0 0 rgba(217, 164, 65, 0); }
    50% { box-shadow: inset 0 0 10px rgba(217, 164, 65, 0.6); }
  }
  .tp-cat-halogeno { animation: tp-anim-halogeno 2.2s ease-in-out infinite; }

  @keyframes tp-anim-noble {
    0%, 100% { box-shadow: inset 0 0 4px rgba(136, 168, 176, 0.25); }
    50% { box-shadow: inset 0 0 14px rgba(136, 168, 176, 0.7); }
  }
  .tp-cat-noble { animation: tp-anim-noble 3.2s ease-in-out infinite; }

  @keyframes tp-anim-lantanido {
    0%, 100% { box-shadow: inset 0 0 0 rgba(95, 191, 110, 0); }
    50% { box-shadow: inset 0 0 9px rgba(95, 191, 110, 0.5); }
  }
  .tp-cat-lantanido { animation: tp-anim-lantanido 4s ease-in-out infinite; }

  @keyframes tp-anim-actinido {
    0%, 100% { box-shadow: inset 0 0 2px rgba(224, 192, 64, 0.3); }
    50% { box-shadow: inset 0 0 16px rgba(224, 192, 64, 0.85); }
  }
  .tp-cat-actinido { animation: tp-anim-actinido 1.8s ease-in-out infinite; }
}

/* ── LEYENDA / NOTAS ─────────────────────────────────────────── */
.tp-leyenda { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; font-size: 0.72rem; color: #5b6472; }
.tp-leyenda-item { display: flex; align-items: center; gap: 5px; }
.tp-leyenda-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.tp-nota-nivel { font-size: 0.72rem; color: #5b6472; margin: 2px 0 8px; }

/* ── OVERLAY "EMPEZAR" ───────────────────────────────────────── */
.tp-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;
}
.tp-listo-overlay[hidden] { display: none; }
.tp-listo-caja { text-align: center; max-width: 360px; padding: 20px; }
.tp-listo-caja h2 { font-family: 'Fredoka', 'Playfair Display', serif; margin-bottom: 8px; }
.tp-listo-caja p { color: #5b6472; margin-bottom: 18px; }

/* ── PANEL DE VICTORIA ───────────────────────────────────────── */
.tp-victoria-panel {
  background: #ffffff;
  border: 1px solid rgba(232, 160, 32, 0.4);
  border-radius: 14px;
  padding: 24px;
  margin-top: 18px;
  text-align: center;
}
.tp-victoria-panel h2 { font-family: 'Fredoka', 'Playfair Display', serif; color: #a8710f; margin-bottom: 6px; }
.tp-victoria-panel form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; margin-top: 14px; }
.tp-victoria-panel label { font-size: 0.8rem; color: #5b6472; }
.tp-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É?" ─────────────────────────────────────── */
.tp-porque-popover {
  position: fixed;
  max-width: 280px;
  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;
}
.tp-porque-titulo { font-weight: 600; margin-bottom: 6px; color: #a8710f; padding-right: 16px; }
.tp-porque-texto { color: #1b2433; }
.tp-porque-cerrar {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  color: #5b6472;
  font-size: 1rem;
  cursor: pointer;
  line-height: 1;
}

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

/* ── RANKING (debajo del grid, no al lado: no hace falta que sea ancho) ── */
.tp-ranking {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 14px;
  padding: 12px 16px;
  max-width: 480px;
  margin: 12px auto 0;
}
.tp-ranking h2 { font-family: 'Fredoka', 'Playfair Display', serif; font-size: 1rem; margin: 0 0 12px; }
.tp-ranking-vacio { font-size: 0.8rem; color: #5b6472; margin: 0; }
.tp-ranking-tabla { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.tp-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);
}
.tp-ranking-tabla td { padding: 6px 4px; border-bottom: 1px solid rgba(15, 23, 42, 0.06); }

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

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

/* ── Enlace al Gusano quimico ────────────────────────────────
   El gusano no es un modo de este juego (mecanica distinta, ranking al
   reves: alli gana la puntuacion mas alta), pero se llega desde aqui
   porque es donde la gente lo busca: es "el otro juego de la tabla". */
.tp-otro-juego {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 4px;
  padding: 14px 18px;
  border: 1px dashed rgba(232, 160, 32, 0.7);
  border-radius: 14px;
  background: #fff8ec;
  text-decoration: none;
  color: #1b2433;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tp-otro-juego:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

.tp-otro-juego-icono {
  font-size: 1.7rem;
  line-height: 1;
  flex: none;
}

.tp-otro-juego-texto {
  flex: 1 1 auto;
  font-size: 0.92rem;
  line-height: 1.4;
}

.tp-otro-juego-boton {
  flex: none;
  background: #e8a020;
  color: #1b2433;
  font-weight: 600;
  font-size: 0.88rem;
  border-radius: 10px;
  padding: 8px 14px;
  white-space: nowrap;
}

@media (max-width: 620px) {
  .tp-otro-juego {
    flex-wrap: wrap;
  }
  .tp-otro-juego-boton {
    margin-left: auto;
  }
}