/* ============================================================
   ÍNDICE — Menú de selección de capítulos, estilo NES.
   Autocontenido: carga VT323 directamente aquí, no depende de
   que iref.css la traiga. VT323 es la única fuente en uso —
   sin mezclas que compitan entre sí.
   Escala fija en múltiplos de 8px. Contraste mínimo AA en
   cada texto (nada por debajo de #a8b4d0 sobre negro).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

:root {
  --sel-bg: #000000;
  --sel-frame: #4068f0;
  --sel-frame-inner: #7ea0ff;
  --sel-text: #ffffff;
  --sel-cursor: #ff5a3c;
  --sel-dim: #a8b4d0;
  --sel-notch: 8px;

  --fs-xs: clamp(13px, 3vw, 16px);  /* eyebrow, footer, ALEATORIO */
  --fs-base: clamp(16px, 4.2vw, 22px);/* ítems del menú */
  --fs-lg: clamp(18px, 5vw, 28px);  /* subtítulo de la tesis */

  --font-body: "VT323", "Courier New", monospace;
}

* { box-sizing: border-box; }

.rpg-screen {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 32px 16px 24px;
  background: var(--sel-bg);
  color: var(--sel-text);
  font-family: var(--font-body);
  overflow-x: hidden;
}

/* --- Marco: 4 muescas cuadradas, una por esquina --- */
.rpg-menu {
  position: relative;
  width: 100%;
  max-width: 100%;
  border: 3px solid var(--sel-frame);
  background: var(--sel-bg);
  padding: 20px 16px 16px;
  overflow: hidden;
}

.rpg-menu::before,
.rpg-menu::after {
  content: "";
  position: absolute;
  width: var(--sel-notch);
  height: var(--sel-notch);
  background: var(--sel-frame);
  z-index: 2;
}

.rpg-menu::before { top: -3px; left: -3px; }
.rpg-menu::after  { top: -3px; right: -3px; }

.rpg-thesis-title {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-align: center;
  color: var(--sel-text);
  margin: 0 0 4px;
}

.rpg-thesis-subtitle {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  text-align: center;
  color: var(--sel-dim);
  margin: 0 0 20px;
  font-style: italic;
}

/* --- ALEATORIO: ahora vive arriba de la lista, bien visible --- */
.rpg-random {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  width: 100%;
  max-width: 100%;
  border: 3px solid var(--sel-cursor);
  background: var(--sel-cursor);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  letter-spacing: 0.08em;
  color: #000;
  padding: 12px 14px;
  margin-bottom: 20px;
  cursor: pointer;
  text-align: left;
  transition: background 0.05s steps(1), color 0.05s steps(1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rpg-random:hover,
.rpg-random:focus-visible {
  background: #000;
  color: var(--sel-cursor);
  outline: none;
}

.rpg-random .rpg-cursor {
  color: #000;
}

.rpg-random:hover .rpg-cursor,
.rpg-random:focus-visible .rpg-cursor {
  color: var(--sel-cursor);
  animation: rpg-hop 0.5s steps(2) infinite;
}

/* Mientras elige: sin temblor, solo un parpadeo lento y legible */
.rpg-random.is-rolling {
  animation: rpg-pulse 0.5s steps(1) infinite;
}

@keyframes rpg-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* Resultado final: sin animaciones, texto quieto para poder leerlo */
.rpg-random.is-picked,
.rpg-random.is-picked .rpg-cursor {
  animation: none !important;
  opacity: 1 !important;
}

.rpg-header-row {
  display: flex;
  justify-content: flex-start;
  padding: 0 8px 10px 34px;
  border-bottom: 2px solid var(--sel-frame-inner);
  margin-bottom: 12px;
}

.rpg-header-row span {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--sel-frame-inner);
  letter-spacing: 0.15em;
}

.rpg-list,
.rpg-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rpg-item + .rpg-item {
  margin-top: 4px;
}

.rpg-link {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 20px;
  align-items: center;
  width: 100%;
  max-width: 100%;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.3;
  color: var(--sel-text);
  text-decoration: none;
  text-align: left;
  padding: 8px 8px;
  cursor: pointer;
  transition: background 0.05s steps(1), color 0.05s steps(1), transform 0.06s steps(2);
  overflow-wrap: break-word;
}

.rpg-sub .rpg-link {
  font-size: var(--fs-base);
}

.rpg-cursor {
  opacity: 0;
  color: var(--sel-cursor);
  font-size: var(--fs-base);
  transition: opacity 0.05s steps(1);
}

.rpg-link:hover,
.rpg-link:focus-visible,
.rpg-link.is-active {
  background: var(--sel-frame);
  color: var(--sel-text);
  outline: none;
  transform: translateX(6px);
}

.rpg-link:hover .rpg-cursor,
.rpg-link:focus-visible .rpg-cursor,
.rpg-link.is-active .rpg-cursor {
  opacity: 1;
  animation: rpg-hop 0.5s steps(2) infinite;
}

@keyframes rpg-hop {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

.rpg-caret {
  font-size: var(--fs-base);
  color: var(--sel-dim);
  transition: transform 0.1s steps(2), color 0.1s steps(1);
  justify-self: end;
}

.rpg-toggle[aria-expanded="true"] .rpg-caret {
  transform: rotate(90deg);
  color: var(--sel-text);
}

.rpg-link:hover .rpg-caret,
.rpg-link:focus-visible .rpg-caret {
  color: var(--sel-text);
}

.rpg-submenu {
  overflow: hidden;
  margin: 4px 0 10px 32px;
  border-left: 2px dashed var(--sel-frame-inner);
  padding-left: 10px;
}

.rpg-submenu[hidden] {
  display: none;
}

/* --- Badge de notificación: punto verde en subcapítulos no visitados --- */
.rpg-badge {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3ddc71;
  box-shadow: 0 0 0 2px #000, 0 0 6px #3ddc71;
  justify-self: end;
}

.rpg-badge:empty {
  visibility: hidden;
}

.rpg-item.is-visited .rpg-badge {
  display: none;
}

.rpg-footer {
  text-align: center;
  margin-top: 20px;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--sel-dim);
  white-space: nowrap;
  overflow-x: auto;
}

@media (prefers-reduced-motion: reduce) {
  .rpg-cursor,
  .rpg-caret,
  .rpg-link,
  .rpg-random {
    animation: none !important;
    transition: none !important;
  }
  .rpg-link:hover,
  .rpg-link:focus-visible {
    transform: none;
  }
}

@media (max-width: 480px) {
  .rpg-screen { padding: 20px 10px 18px; }
  .rpg-menu { padding: 14px 10px 12px; }
  .rpg-link { padding: 8px 4px; }
  .rpg-link:hover,
  .rpg-link:focus-visible,
  .rpg-link.is-active {
    transform: none;
  }
  .rpg-random { padding: 10px 8px; }
  .rpg-footer { white-space: normal; }
}