:root {
  --bg: #000;
  --text: #e8e8e8;
  --text-shade: #6b6b6b;
  --head: #6e9cf0;
  --head-shade: #233a78;
  --gold-hi: #ffe36a;
  --gold-lo: #e07a00;
  --gold-shade: #6a2c00;
  --dim: #8a8a8a;
  --font: 'Press Start 2P', monospace;
  --fs: clamp(10px, 3.4vw, 18px);
}

* { box-sizing: border-box; }

/* Que ningún display (p. ej. .btn) gane al atributo hidden. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs);
}

/* Scanlines suaves por encima de todo, sin capturar el ratón. */
.crt::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, .28) 2px 3px);
}

.crt {
  max-width: 760px;
  margin: 0 auto;
  padding: 16px;
}

header { text-align: center; }

.logo {
  width: 100%;
  max-width: 640px;
  height: auto;
}

.title {
  margin: 1.2em 0 1em;
  text-align: center;
  font-size: 1.6em;
  font-weight: normal;
  line-height: 1.5;
  letter-spacing: .08em;
  color: var(--gold-hi);
  background: linear-gradient(to bottom, var(--gold-hi) 30%, var(--gold-lo) 75%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(2px 2px 0 var(--gold-shade));
}

.scores {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.scores th, .scores td {
  padding: .55em 0;
  white-space: pre; /* conserva los espacios del nick */
}

.scores th {
  font-weight: normal;
  color: var(--head);
  text-shadow: 2px 2px 0 var(--head-shade);
}

.scores td { text-shadow: 2px 2px 0 var(--text-shade); }

.rank  { width: 24%; text-align: left; }
.name  { width: 22%; text-align: left; }
.score { width: 34%; text-align: right; }
.lvl   { width: 20%; text-align: right; }

.pager {
  display: flex;
  justify-content: center;
  gap: .9em;
  margin: 2em 0 1em;
}

.pager a {
  color: var(--text);
  text-decoration: none;
  padding: .3em .2em;
}

.pager a:hover, .pager a:focus-visible { color: var(--gold-hi); outline: none; }
.pager a.current { color: var(--gold-hi); text-decoration: underline; text-underline-offset: .35em; }
.pager a.disabled { color: var(--dim); opacity: .4; pointer-events: none; }

.step { text-align: center; padding-bottom: 1em; }

/* Ficha del record: etiqueta azul a la izquierda, valor blanco a la derecha. */
.card {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  gap: 1.1em 2.5em;
  margin: 0 0 2.2em;
  text-align: left;
}
.card dt { color: var(--head); text-shadow: 2px 2px 0 var(--head-shade); }
.card dd { margin: 0; text-align: right; white-space: pre; text-shadow: 2px 2px 0 var(--text-shade); }

.step-msg { margin: 1.2em 0; text-shadow: 2px 2px 0 var(--text-shade); }
.step-msg.error { color: #ff5a5a; text-shadow: 2px 2px 0 #5a1010; }
.step-msg.dim { color: var(--dim); font-size: .7em; }

.step-msg.email { color: var(--text); word-break: break-all; text-transform: uppercase; }
.step-msg.dim.email { font-size: .7em; }

.email-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1em;
}
.email-form label { color: var(--head); text-shadow: 2px 2px 0 var(--head-shade); }
.email-form input {
  width: 100%;
  max-width: 26em;
  font: inherit;
  font-size: .75em;
  color: var(--text);
  background: #111;
  border: 2px solid var(--head);
  box-shadow: 3px 3px 0 var(--head-shade);
  padding: .9em;
  text-align: center;
  text-transform: uppercase;
  caret-color: var(--gold-hi);
}
.email-form input:focus { outline: none; border-color: var(--gold-hi); }

.actions { display: flex; flex-direction: column; align-items: center; gap: 1.2em; }
.btn.btn-alt {
  color: var(--text);
  background: #222;
  box-shadow: 3px 3px 0 #000, inset 0 0 0 2px var(--dim);
}

.big-rank {
  margin: .3em 0 1.2em;
  font-size: 2.4em;
  color: var(--gold-hi);
  text-shadow: 3px 3px 0 var(--gold-shade);
}

.btn {
  display: inline-block;
  text-decoration: none;
  font: inherit;
  color: var(--bg);
  background: linear-gradient(to bottom, var(--gold-hi), var(--gold-lo));
  border: 0;
  box-shadow: 3px 3px 0 var(--gold-shade);
  padding: .8em 1.6em;
  cursor: pointer;
}
.btn:hover, .btn:focus-visible { filter: brightness(1.15); outline: none; }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--gold-shade); }
.btn:disabled { filter: grayscale(1); cursor: wait; }

/* Fila del record recién enviado: parpadeo arcade. */
.scores tr.mine td { color: var(--gold-hi); text-shadow: 2px 2px 0 var(--gold-shade); animation: blink 1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .scores tr.mine td { animation: none; } }

.notice {
  text-align: center;
  color: var(--head);
  font-size: .8em;
}

footer {
  margin-top: 2.5em;
  text-align: center;
  color: var(--dim);
  font-size: .7em;
  line-height: 1.6;
  text-shadow: 2px 2px 0 #3a3a3a;
}

footer p { margin: 0; }