/* Fans Of · estilos de la ventana NOVEDADES de la librería (index.html de la raíz; su código en novedades/ventana.js) */
/* la ventana NOVEDADES: sale al cargar la página y desde la pestaña del menú (los textos, en novedades/lista.js y en los NEWS de cada juego) */
.nov-fondo { position: fixed; inset: 0; z-index: 20; background: var(--modal); display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; }
.nov-fondo[hidden] { display: none; }
.nov-caja { position: relative; width: 100%; max-width: 560px; max-height: 100%; display: flex; flex-direction: column; box-sizing: border-box; text-align: left; color: var(--ink);
  border: 4px solid var(--outline); border-radius: 20px; background: linear-gradient(170deg, var(--tray-hi) 0%, var(--tray) 40%, var(--bg) 100%); box-shadow: 0 6px 0 var(--outline); }
.nov-cabeza { padding: 16px 52px 8px 18px; border-bottom: 3px solid var(--outline); }
.nov-cabeza h2 { font-family: var(--font-display); font-weight: 400; font-size: 34px; line-height: 1; margin: 0; color: var(--gold); }
.nov-cabeza p { margin: 4px 0 0; font-size: 14px; font-weight: 700; color: var(--ink-dim); }
.nov-x { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 10px; border: 3px solid var(--outline); background: var(--panel); color: var(--ink); font-family: var(--font-display); font-size: 18px; line-height: 1; cursor: pointer; padding: 3px 0 0; }
.nov-cuerpo { overflow-y: auto; padding: 4px 18px 12px; -webkit-overflow-scrolling: touch; }
.nov-cuerpo h3 { font-family: var(--font-display); font-weight: 400; font-size: 20px; color: var(--player-lite); margin: 14px 0 6px; }
.nov-cuerpo p.nov-nota { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--ink-dim); }
/* juegos nuevos: una tarjeta pequeña con su color, una frase y JUGAR */
.nov-nuevo { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 10px 12px; border: 3px solid var(--outline); border-radius: 14px;
  background: linear-gradient(110deg, var(--wc, var(--tray-hi)) 0%, var(--tray) 80%); }
.nov-nuevo div { flex: 1; min-width: 0; }
.nov-nuevo b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 17px; line-height: 1.1; }
.nov-nuevo span { display: block; margin-top: 2px; font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--ink-dim); }
.nov-nuevo a { flex: none; text-decoration: none; font-family: var(--font-display); font-size: 15px; padding: 7px 12px 3px; border-radius: 10px; border: 3px solid var(--outline);
  background: linear-gradient(to bottom, var(--player-lite), var(--player)); color: var(--ink); box-shadow: 0 3px 0 var(--outline); }
/* actualizaciones: una línea por juego */
.nov-fila { display: block; text-decoration: none; color: var(--ink); padding: 7px 4px; border-bottom: 2px solid var(--tray-hi); }
.nov-fila:last-child { border-bottom: 0; }
.nov-fila b { font-family: var(--font-display); font-weight: 400; font-size: 15px; color: var(--gold); }
.nov-fila small { margin-left: 6px; font-size: 12px; font-weight: 800; color: var(--ink-dim); }
.nov-fila span { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; }
.nov-det ul { margin: 4px 0 0; padding-left: 18px; font-size: 13px; font-weight: 600; line-height: 1.35; }
.nov-det li { margin: 2px 0; } .nov-det li b { color: var(--player-lite); font-family: inherit; font-size: inherit; }
.nov-det ul.joke { color: var(--ink-dim); font-style: italic; }
.nov-fila[hidden], #nov-nuevos[hidden] { display: none; }
.nov-todas { display: block; margin: 10px auto 0; cursor: pointer; font: 800 14px var(--font-ui); color: var(--ink); padding: 7px 14px; border-radius: 10px; border: 3px solid var(--outline); background: var(--tray-hi); }
.nov-todas[hidden] { display: none; }
.nov-fila:hover b { color: var(--player-lite); }
.nov-pie { padding: 10px 18px 14px; border-top: 3px solid var(--outline); display: flex; justify-content: center; }
.nov-pie button { font-family: var(--font-display); font-size: 20px; padding: 9px 26px 5px; border-radius: 14px; border: 3px solid var(--outline); cursor: pointer;
  background: linear-gradient(to bottom, var(--player-lite), var(--player)); color: var(--ink); box-shadow: 0 3px 0 var(--outline); }
.nov-pie button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--outline); }
.nov-x:focus-visible, .nov-pie button:focus-visible, .nov-nuevo a:focus-visible, .nov-fila:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
@media (max-width: 420px) { .nov-cabeza h2 { font-size: 28px; } .nov-cuerpo { padding: 2px 14px 10px; } }