/* zaxfun — capa «Los mejores» (la tabla de récords).
   ---------------------------------------------------------------------------
   Compañera de `reto-diario/reto.css`: las dos son de la CASA, no de un juego.
   Todo arcade de zaxfun enlaza estas dos hojas y sus dos módulos, y así la
   tabla se ve igual se entre por donde se entre — que es lo que hace que el
   nombre firmado en un juguete signifique algo en el siguiente.

   Nació dentro de `El Pulso/maqueta/css/pulso.css` y salió de ahí el
   2026-08-11, al montar la tabla en «Un piso más»: copiarla habría dejado dos
   versiones que se separan al primer retoque.

   Como en `reto.css`, cada var() lleva su fallback: un juguete que no traiga
   la paleta de la casa se ve presentable igual. `--dif` es el color de la
   dificultad elegida y solo existe donde hay dificultades («El pulso»); donde
   no la hay, cae al oro y no se nota. */

.top-caja {
  border: 1px solid var(--panel-borde, rgba(255, 255, 255, .09));
  border-radius: var(--radio, 20px);
  background: var(--panel, rgba(255, 255, 255, .045));
  padding: 1.15rem 1.15rem 1.25rem;
  text-align: left;
  font-family: var(--tipo-texto, system-ui, sans-serif);
  color: var(--texto, #e9edfb);
}

.top-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  margin-bottom: .85rem;
}
.top-etiqueta {
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--texto-tenue, #8e97b8);
}
.top-dif {
  font-size: .72rem;
  color: var(--dif, var(--oro, #ffd479));
  font-weight: 600;
}

.top-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.top-lista li {
  display: grid;
  grid-template-columns: 1.6rem 1fr auto;
  align-items: center;
  gap: .6rem;
  padding: .5rem .6rem;
  border-radius: 11px;
  font-size: .88rem;
}
.top-lista b {
  font-family: var(--tipo-titulo, system-ui, sans-serif);
  font-size: .78rem;
  color: var(--texto-tenue, #8e97b8);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
/* Los tres primeros, con el color de la casa; el resto, apagados. Es la
   diferencia entre una lista y un podio. */
.top-lista li:nth-child(1) b { color: var(--oro, #ffd479); }
.top-lista li:nth-child(2) b { color: var(--cian, #6fd3ff); }
.top-lista li:nth-child(3) b { color: var(--violeta, #b98cff); }
.top-lista span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* El sello de «creador». Lo manda el servidor, no se puede conseguir
   escribiendo el nombre. */
.top-sello {
  text-decoration: none;
  margin-left: .3rem;
  padding: .1rem .4rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--oro, #ffd479) 45%, transparent);
  background: color-mix(in srgb, var(--oro, #ffd479) 14%, transparent);
  color: var(--oro, #ffd479);
  font-size: .6rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: middle;
}
.top-lista em {
  font-style: normal;
  font-family: var(--tipo-titulo, system-ui, sans-serif);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.top-lista li.top-yo {
  background: color-mix(in srgb, var(--dif, var(--oro, #ffd479)) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dif, var(--oro, #ffd479)) 32%, transparent);
}

.top-vacio, .top-dentro {
  margin: .2rem 0;
  font-size: .82rem;
  color: var(--texto-tenue, #8e97b8);
}
.top-dentro {
  color: var(--oro, #ffd479);
  font-weight: 600;
  text-align: center;
}

/* El formulario del nombre. Sale SOLO en la pantalla de derrota, la primera
   vez que se entra en la tabla: firmado es firmado (ver `top.js`). */
.top-firma {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  width: min(19rem, 88vw);
  margin: .2rem auto 0;
  text-align: left;
}
.top-firma label {
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--texto-tenue, #8e97b8);
}
.top-firma-fila { display: flex; gap: .4rem; }
.top-firma input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--panel-borde, rgba(255, 255, 255, .09));
  border-radius: 999px;
  padding: .55rem .95rem;
  background: rgba(255, 255, 255, .05);
  color: var(--texto, #e9edfb);
  font-family: var(--tipo-texto, system-ui, sans-serif);
  font-size: .92rem;
}
.top-firma input:focus {
  outline: none;
  border-color: var(--dif, var(--oro, #ffd479));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dif, var(--oro, #ffd479)) 20%, transparent);
}
.top-firmar {
  border: 0;
  border-radius: 999px;
  padding: .55rem 1.15rem;
  font-family: var(--tipo-titulo, system-ui, sans-serif);
  font-weight: 600;
  font-size: .88rem;
  color: #06070f;
  background: linear-gradient(120deg, var(--oro, #ffd479), var(--cian, #6fd3ff));
  cursor: pointer;
}
.top-firmar:disabled { opacity: .5; cursor: default; }
/* El aviso del envío que falló, con su botón de reintentar debajo. No se
   esconde nunca: una marca que desaparece sin decir nada es lo que hizo pensar
   a Zax que el juego no le había guardado el nombre. */
.top-fallo {
  text-align: center;
  margin-bottom: .55rem !important;
}
.top-error {
  margin: 0;
  min-height: 1em;
  font-size: .74rem;
  color: var(--rojo, #ff6b8a);
}