/* ═══════════════════════════════════════════════════════════════
   PÁGINAS DE RANKING DEL SALÓN DE LA FAMA
   ───────────────────────────────────────────────────────────────
   Lo que hall/index.html no tenía y necesitan las páginas creadas desde el
   panel (sección 96 del esquema): la pestaña propia de cada página, la
   barra comunitaria, la ficha de "cómo se puntúa" y el pie del cofre.

   Todo cuelga de las variables --hall-* que define el aura activa
   (css/salon/hall-auras.css). Ni una regla de aquí nombra un color de una
   paleta concreta: si mañana hay un aura nueva, esto la pinta sola.
   ═══════════════════════════════════════════════════════════════ */

/* ── La pestaña de cada página ────────────────────────────────
   La de siempre (Global) está escrita en el HTML; estas las genera
   hall.js al arrancar. Cada una lleva su propia clase de
   aura para adelantar el color de la pestaña ANTES de entrar: elegir
   entre cinco botones grises y descubrir el color al pulsar es peor
   que verlo desde fuera. */
.hall-modo-btn.hall-modo-pagina:not(.is-active) {
  border-color: rgba(var(--hall-haz), 0.45);
  color: var(--hall-tenue);
}
.hall-modo-btn.hall-modo-pagina.is-active {
  border-color: rgba(var(--hall-haz), 0.95);
  background: linear-gradient(140deg,
    rgba(var(--hall-haz), 0.22), rgba(var(--hall-haz), 0.05));
  color: var(--hall-texto);
  box-shadow: 0 0 18px -6px rgba(var(--hall-haz), 0.85);
}
.hall-modo-borrador {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase; opacity: 0.75;
  padding: 0.1rem 0.35rem; border-radius: 999px;
  border: 1px dashed currentColor;
}

/* Las brasas del fondo se tiñen con el aura. Pintadas siempre de
   naranja —como estaban cuando solo las usaba un evento— un ranking
   esmeralda tenía fuego de otra fiesta cayéndole encima. */
.hall-escena.modo-pagina .hall-ember {
  background: radial-gradient(circle,
    #fff 0%,
    rgb(var(--hall-haz)) 45%,
    rgba(var(--hall-haz), 0.25) 78%,
    transparent 100%);
  box-shadow: 0 0 6px rgba(var(--hall-haz), 0.8), 0 0 14px rgba(var(--hall-haz), 0.5);
}
/* Mismo criterio que el tema claro: las estrellas son un cielo
   nocturno y no pintan nada sobre un fondo de brasas. */
.hall-escena.modo-pagina .hall-estrella-capa { display: none; }

/* El título y las cifras grandes toman el degradado del aura. */
.hall-escena.modo-pagina .hall-title {
  background-image:
    linear-gradient(105deg, transparent 43%, #fff 50%, transparent 57%),
    linear-gradient(180deg,
      var(--hall-acento-1) 0%, var(--hall-acento-2) 52%, var(--hall-acento-3) 100%);
  text-shadow:
    0 0 8px  rgba(var(--hall-haz), 0.55),
    0 0 26px rgba(var(--hall-haz), 0.4),
    0 0 52px rgba(var(--hall-haz), 0.22);
  overflow-wrap: anywhere;
}
.hall-escena.modo-pagina .hall-resumen-num,
.hall-escena.modo-pagina .hall-cifra,
.hall-escena.modo-pagina .hall-loot-titulo {
  background-image: linear-gradient(120deg,
    var(--hall-acento-1), var(--hall-acento-2) 50%, var(--hall-acento-3));
}
.hall-escena.modo-pagina .hall-dato { color: var(--hall-acento-2); }
.hall-escena.modo-pagina .hall-fila:hover { background: rgba(var(--hall-haz), 0.12); }

/* La fila de lista de una página lleva fichas de desglose además
   del dato. */
.hall-fila.modo-pagina { grid-template-columns: 2.4rem auto 1fr auto auto; }
@media (max-width: 560px) {
  .hall-fila.modo-pagina { grid-template-columns: 2.2rem auto 1fr auto; }
  .hall-fila.modo-pagina .hall-extra { display: none; }
}

/* ── Barra comunitaria ────────────────────────────────────────
   Va arriba del todo, encima del podio y del resumen, porque es la
   única cifra de la página que no es de nadie en concreto: si estuviera
   debajo de la tabla parecería un dato más del primero. */
.hall-meta {
  margin: 0 auto 1.6rem;
  max-width: 44rem;
  padding: 1.1rem 1.2rem 1.2rem;
  border-radius: var(--hall-radio, 20px);
  border: 1px solid var(--hall-linea);
  background: linear-gradient(165deg, var(--hall-caja-1) 0%, var(--hall-caja-2) 100%);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.8);
  text-align: center;
}
.hall-meta-titulo {
  margin: 0 0 0.55rem;
  font-family: var(--font-heading);
  font-size: 1rem; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--hall-texto);
}
.hall-meta-pct {
  font-size: 0.86rem; color: var(--hall-acento-2);
  font-variant-numeric: tabular-nums;
}
.hall-meta-carril {
  height: 1.15rem; border-radius: 999px; overflow: hidden;
  border: 1px solid var(--hall-linea);
  background: rgba(0, 0, 0, 0.32);
}
body.theme-light .hall-meta-carril { background: rgba(0, 0, 0, 0.08); }
.hall-meta-relleno {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--hall-acento-3), var(--hall-acento-2));
  box-shadow: 0 0 14px -2px rgba(var(--hall-haz), 0.9);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Llena: un brillo que recorre la barra. Es la única animación de esta
   hoja y solo aparece cuando de verdad hay algo que celebrar. */
.hall-meta.is-llena .hall-meta-relleno {
  background-image: linear-gradient(90deg,
    var(--hall-acento-3), var(--hall-acento-2) 45%, #fff 50%, var(--hall-acento-2) 55%, var(--hall-acento-3));
  background-size: 250% 100%;
  animation: hallMetaBrillo 2.8s steps(30) infinite;
}
@keyframes hallMetaBrillo {
  from { background-position: 120% 0; }
  to   { background-position: -20% 0; }
}
body.perf-low .hall-meta.is-llena .hall-meta-relleno { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .hall-meta.is-llena .hall-meta-relleno { animation: none; }
  .hall-meta-relleno { transition: none; }
}

.hall-meta-cifras {
  margin: 0.5rem 0 0; font-size: 0.84rem; color: var(--hall-tenue);
  font-variant-numeric: tabular-nums;
}
.hall-meta-texto {
  margin: 0.55rem auto 0; max-width: 34rem;
  font-size: 0.86rem; line-height: 1.55; color: var(--hall-apagado);
}
.hall-meta-sello {
  margin: 0.7rem 0 0; font-size: 0.86rem; font-weight: 800;
  color: var(--hall-acento-2);
}

/* ── "Cómo se puntúa" ─────────────────────────────────────────
   Plegado por defecto: la mayoría entra a ver quién va ganando, no a
   leer la fórmula. Quien quiera auditarla la tiene a un clic, y es la
   misma que usa el servidor para contar. */
.hall-reglas { max-width: 44rem; margin: 0 auto 1.8rem; }
.hall-reglas-caja {
  border-radius: var(--hall-radio, 20px);
  border: 1px solid var(--hall-linea);
  background: var(--hall-panel);
  overflow: hidden;
}
.hall-reglas-caja > summary {
  cursor: pointer; list-style: none;
  padding: 0.75rem 1.1rem;
  font-weight: 800; font-size: 0.88rem; color: var(--hall-tenue);
}
.hall-reglas-caja > summary::-webkit-details-marker { display: none; }
.hall-reglas-caja > summary::after {
  content: "▾"; float: right; transition: transform 0.2s ease;
}
.hall-reglas-caja[open] > summary::after { transform: rotate(180deg); }
.hall-reglas-caja > summary:hover { color: var(--hall-texto); }
.hall-reglas-desc {
  margin: 0; padding: 0 1.1rem 0.4rem;
  font-size: 0.86rem; line-height: 1.6; color: var(--hall-apagado);
}
.hall-reglas-lista {
  list-style: none; margin: 0; padding: 0.4rem 1.1rem 0.2rem;
  display: flex; flex-direction: column; gap: 0.1rem;
}
.hall-regla {
  display: grid; grid-template-columns: 1.6rem 1fr auto;
  gap: 0.55rem; align-items: baseline;
  padding: 0.42rem 0; font-size: 0.86rem;
  border-bottom: 1px solid var(--hall-linea);
}
.hall-regla:last-child { border-bottom: none; }
.hall-regla-ico { font-size: 1rem; line-height: 1; }
.hall-regla-txt { color: var(--hall-tenue); overflow-wrap: anywhere; }
.hall-regla-det { color: var(--hall-apagado); font-size: 0.8rem; }
.hall-regla-peso {
  font-family: var(--font-heading); font-weight: 900;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--hall-acento-2);
}
.hall-reglas-pie {
  margin: 0; padding: 0.6rem 1.1rem 0.9rem;
  font-size: 0.79rem; line-height: 1.55; color: var(--hall-apagado);
  border-top: 1px solid var(--hall-linea);
}

/* ── Pie del cofre ────────────────────────────────────────────── */
.hall-loot-pie {
  margin: 0.8rem 0 0; font-size: 0.82rem; color: var(--hall-apagado);
}

/* Pixel: sin curvas, igual que el resto del Salón en ese tema. */
body.theme-pixel .hall-meta,
body.theme-pixel .hall-meta-carril,
body.theme-pixel .hall-reglas-caja,
body.theme-pixel .hall-modo-borrador { border-radius: 0; }