/* =============================================
   5 DE 5 — Newspaper Edition
   FutbolHUB
   ============================================= */

/* ═══════════════════════════════════════════
   RESET + BASE
   ═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --np-paper:    #f4ead2;
  --np-paper2:   #ede0c0;
  --np-paper3:   #e4d3aa;
  --np-ink:      #0f120e;
  --np-red:      #b5221e;
  --np-ink-mid:  rgba(var(--np-ink-rgb, 15,18,14), 0.68);
  --np-ink-soft: rgba(var(--np-ink-rgb, 15,18,14), 0.16);
  --np-white:    #ffffff;
  --shadow:      var(--sh-x,5px) var(--sh-y,5px) var(--sh-b,0) var(--sh-c,var(--np-ink));
  --shadow-soft: var(--sh-x,3px) var(--sh-y,3px) var(--sh-b,0) var(--sh-c,var(--np-ink));
}

html, body {
  min-height: 100%;
  background-color: var(--np-paper);
  background-image:
    radial-gradient(ellipse 115% 95% at 50% 50%,
      transparent 55%, rgba(var(--np-ink-rgb, 15,18,14), 0.07) 100%),
    linear-gradient(180deg,
      rgba(201,168,76,0.06) 0%, transparent 45%),
    repeating-linear-gradient(
      90deg,
      transparent, transparent 159px,
      rgba(var(--np-ink-rgb, 15,18,14), 0.042) 159px, rgba(var(--np-ink-rgb, 15,18,14), 0.042) 160px
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
  background-size: auto, auto, auto, 280px 280px;
  background-attachment: fixed;
  color: var(--np-ink);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

button { cursor: pointer; border: none; outline: none; background: none; font-family: 'Inter', sans-serif; }
input  { outline: none; font-family: 'Inter', sans-serif; }
a      { text-decoration: none; }

/* ═══════════════════════════════════════════
   COLUMNAS LATERALES DE ANUNCIOS (fixed, como Blackjack)
   ═══════════════════════════════════════════ */
.fh-rail {
  position: fixed;
  top: 0; bottom: 0; width: var(--ad-col-w, 72px);
  display: flex; flex-direction: column;
  z-index: 3;
  background: var(--np-paper);
}
.fh-rail--left  { left: 0;  border-right: 1px solid var(--np-ink-soft); }
.fh-rail--right { right: 0; border-left:  1px solid var(--np-ink-soft); }

/* Aqui vivian .ad-strip / .ad-strip--accent / .ad-strip-label: los recuadros
   decorativos que ponian "ESPACIO PUBLICITARIO". La Fase 2 de anuncios los
   quito del HTML (js/ads.js mete ahora un <ins> real), pero las reglas se
   quedaron en los 12 CSS. Sin uso en ningun HTML ni JS del proyecto. */

/* Empuja contenido para no quedar bajo las columnas */
@media (min-width: 760px) {
  .screen { margin-left: var(--ad-col-w, 72px); margin-right: var(--ad-col-w, 72px); }
}
@media (max-width: 759px) { .fh-rail { display: none; } }

/* ═══════════════════════════════════════════
   PANTALLAS
   ═══════════════════════════════════════════ */
.screen { display: none; min-height: 100vh; flex-direction: column; align-items: center; position: relative; isolation: isolate; }
.screen.active { display: flex; }

/* ═══════════════════════════════════════════
   BOTÓN VOLVER — absoluto dentro de cada screen
   ═══════════════════════════════════════════ */
/* La regla .back-btn de este juego se quedo sin ningun elemento al migrar el
   boton de volver/salir a .fh-volver (css/volver.css). El unico juego que
   sigue usando .back-btn es En el Once, para el boton de su modal. */

/* ═══════════════════════════════════════════
   MENÚ
   ═══════════════════════════════════════════ */
#screen-menu {
  justify-content: flex-start;
  padding: clamp(20px,3.5vh,52px) 20px clamp(14px,2.5vh,28px);
  gap: clamp(5px,1.2vh,12px);
  position: relative;
}

.menu-hero {
  text-align: center; width: 100%; max-width: 500px;
  padding-bottom: 12px; border-bottom: 2.5px solid var(--bd-c, var(--np-ink));
}

.menu-title {
  font-family: 'Playfair Display', serif;
  font-style: italic; font-weight: 900;
  font-size: clamp(3rem,11vw,6.2rem);
  color: var(--np-ink); line-height: 0.88;
  letter-spacing: -0.02em; margin: 0; display: block;
}

.menu-subtitle {
  font-family: 'Anton', sans-serif;
  font-size: clamp(0.82rem,2.5vw,1.1rem);
  letter-spacing: 0.4em;
  background: var(--np-ink); color: var(--np-paper);
  padding: 3px 14px 2px; display: inline-block;
  margin-top: 8px; text-transform: uppercase;
}

.menu-wrap {
  width: 100%; max-width: 500px;
  display: flex; flex-direction: column; gap: 11px;
}

/* Tabs */
.menu-tabs {
  display: flex; border-bottom: 2px solid var(--bd-c, var(--np-ink));
}
.menu-tab {
  flex: 1; padding: 9px 6px;
  background: transparent; border: none;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  color: var(--np-ink); opacity: 0.45;
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem; letter-spacing: 0.16em;
  cursor: pointer; touch-action: manipulation;
  transition: opacity 0.14s, border-color 0.14s;
  text-transform: uppercase; user-select: none; -webkit-user-select: none;
}
.menu-tab.active { opacity: 1; border-bottom-color: var(--np-red); }

/* Panels */
.menu-panel { display: none; }
.menu-panel.active { display: flex; flex-direction: column; gap: 9px; }
.panel-hint {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem; color: var(--np-ink-mid);
  text-align: center; letter-spacing: 0.1em; line-height: 1.5;
}

/* Inputs */
.menu-input {
  background: var(--np-paper2); border: 1.5px solid var(--bd-c, var(--np-ink));
  border-radius: var(--r-md, 0); padding: 10px 12px; color: var(--np-ink);
  font-family: 'DM Mono', monospace; font-size: 0.82rem; letter-spacing: 0.06em;
  outline: none; transition: border-color 0.14s, box-shadow 0.14s; width: 100%;
}
.menu-input:focus { border-color: var(--np-red); box-shadow: var(--sh-x,2px) var(--sh-y,2px) var(--sh-b,0) var(--sh-c-red,var(--np-red)); }
.menu-input::placeholder { color: var(--np-ink); opacity: 0.30; }
.menu-code-input { text-transform: uppercase; letter-spacing: 0.44em; text-align: center; font-size: 1.1rem; }

/* Divisor */
.menu-divider { display: flex; align-items: center; gap: 10px; margin: 2px 0; }
.menu-divider::before, .menu-divider::after { content:''; flex:1; height:1px; background: var(--np-ink-soft); }
.menu-divider span { font-family: 'DM Mono', monospace; font-size: 0.7rem; opacity: 0.45; letter-spacing: 2px; color: var(--np-ink); }

/* Errores */
.menu-error { color: var(--np-red); font-family: 'DM Mono', monospace; font-size: 0.72rem; text-align: center; letter-spacing: 0.08em; }
.menu-error.hidden { display: none; }

/* ═══════════════════════════════════════════
   CLASIFICATORIA (ranked 1v1 por ELO)
   PLAN-5-de-5-ranked.md
   ═══════════════════════════════════════════ */
.ranked-locked.hidden, .ranked-unlocked.hidden { display: none; }
.ranked-locked-sub {
  font-family: 'DM Mono', monospace; font-size: 0.72rem; color: var(--np-ink-mid);
  text-align: center; line-height: 1.6; letter-spacing: 0.02em; margin-top: 4px;
}
.ranked-unlocked { display: flex; flex-direction: column; gap: 10px; }
.ranked-tramo-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--np-paper2); border: 1.5px solid var(--bd-c, var(--np-ink));
  border-radius: var(--r-md, 0); padding: 12px 14px;
}
.ranked-tramo-logo { width: 42px; height: 42px; object-fit: contain; flex-shrink: 0; }
.ranked-tramo-info { flex: 1; min-width: 0; }
.ranked-tramo-nombre {
  font-family: 'Anton', sans-serif; font-size: 1rem; letter-spacing: 0.03em;
  color: var(--np-ink); text-transform: uppercase;
}
.ranked-tramo-elo {
  font-family: 'DM Mono', monospace; font-size: 0.72rem; color: var(--np-ink-mid);
  letter-spacing: 0.05em; margin-top: 2px;
}
.ranked-tramo-stats {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  font-family: 'DM Mono', monospace; font-size: 0.7rem; color: var(--np-ink-mid);
  white-space: nowrap;
}
#btn-cancelar-busqueda.hidden { display: none; }
#ranked-search-hint { min-height: 1.2em; }
.ranked-leaderboard-toggle {
  background: none; border: none; color: var(--np-ink-mid);
  font-family: 'DM Mono', monospace; font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; text-align: center; cursor: pointer; padding: 4px;
}
.ranked-leaderboard-toggle:hover { color: var(--np-ink); }
.ranked-leaderboard.hidden { display: none; }
.ranked-leaderboard-list {
  list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto;
  border: 1.5px solid var(--bd-c, var(--np-ink));
}
.ranked-leaderboard-row {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border-bottom: 1px solid var(--np-ink-soft);
  font-family: 'DM Mono', monospace; font-size: 0.72rem; color: var(--np-ink);
  background: var(--np-paper2);
}
.ranked-leaderboard-row:last-child { border-bottom: none; }
.ranked-leaderboard-row--yo { background: var(--np-ink); color: var(--np-paper); }
.ranked-leaderboard-puesto { width: 22px; opacity: 0.6; text-align: right; }
.ranked-leaderboard-nombre { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranked-leaderboard-elo { font-family: 'Anton', sans-serif; font-size: 0.9rem; }

/* ═══════════════════════════════════════════
   BOTONES
   ═══════════════════════════════════════════ */
.btn-primary {
  background: var(--np-ink); color: var(--np-paper);
  border: none; border-radius: var(--r-md, 0);
  padding: 12px 24px;
  font-family: 'DM Mono', monospace;
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  width: 100%; transition: opacity 0.15s;
  box-shadow: var(--sh-x,3px) var(--sh-y,3px) var(--sh-b,0) var(--sh-c-red,var(--np-red));
}
.btn-primary:hover { opacity: 0.82; }
.btn-primary:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; }

.btn-secondary {
  background: transparent; color: var(--np-ink);
  border: 1.5px solid var(--bd-c, var(--np-ink)); border-radius: var(--r-md, 0);
  padding: 11px 24px;
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  width: 100%; transition: background 0.15s, color 0.15s;
}
.btn-secondary:hover { background: var(--np-ink); color: var(--np-paper); }

/* ═══════════════════════════════════════════
   LOBBY
   ═══════════════════════════════════════════ */
/* La caja de la sala (marco, tarjeta del codigo, enlace, filas de jugador,
   pista y cuenta atras de la sala publica) vive ahora en css/sala.css, una
   sola vez para los seis juegos con sala. Aqui se queda solo lo que es de
   5 de 5: el panel de ajustes de partida. */

/* Ajustes lobby */
.lobby-settings {
  width:100%; background: var(--np-paper);
  border: 1px solid var(--np-ink-soft);
  border-top: 2px solid var(--bd-c, var(--np-ink));
  padding: 14px 16px;
}
.lobby-settings-title {
  font-family: 'DM Mono', monospace; font-size:0.62rem; letter-spacing:0.2em;
  color: var(--np-ink-mid); margin-bottom:10px; text-align:center; text-transform: uppercase;
}
.settings-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; gap:8px; }
.settings-row:last-child { margin-bottom:0; }
.settings-label { font-family:'DM Mono',monospace; font-size:0.65rem; color:var(--np-ink-mid); letter-spacing:0.1em; text-transform:uppercase; }
.settings-control { display:flex; align-items:center; gap:8px; }
.settings-btn {
  background:var(--np-paper2); border:1px solid var(--bd-c, var(--np-ink));
  color:var(--np-ink); border-radius:var(--r-md, 0); width:28px; height:28px;
  font-size:1.1rem; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center; line-height:1;
  transition:background 0.15s;
}
.settings-btn:hover:not(:disabled) { background:var(--np-ink); color:var(--np-paper); }
.settings-btn:disabled { opacity:.3; cursor:not-allowed; }
.settings-value { font-family:'Anton',sans-serif; font-size:1.4rem; color:var(--np-red); min-width:28px; text-align:center; line-height:1; }
.settings-unit { font-family:'DM Mono',monospace; font-size:0.62rem; color:var(--np-ink-mid); letter-spacing:1px; }

/* Botón copiar enlace */
/* #btn-copy-link vive ahora en css/sala.css, una sola vez para las seis
   salas. Aquí estaba con !important en casi cada línea, lo que además le
   impedía al tema Moderno convertirlo en píldora de cristal como al resto de
   botones secundarios. */

/* #lobby-link-display y #lobby-mode-badge estaban aqui como reglas de ID con
   !important, o sea que le habrian ganado a la definicion compartida de
   css/sala.css y 5 de 5 habria seguido siendo el unico distinto. Ahora usan
   .lobby-link-display / .lobby-mode-badge como los otros cinco. */

/* ═══════════════════════════════════════════
   PANTALLA DE RONDA
   ═══════════════════════════════════════════ */
#screen-round { padding: 0; }

/* La barra de partida (fondo oscuro, rotulo, cronometro y marcador) vive en
   css/barra-partida.css, compartida con Blackjack. Aqui solo se queda lo
   que es de 5 de 5: donde se ancla el circulo de perfil. */

/* #screen-round no tiene .fh-volver (no se sale de una ronda a mitad
   partida): js/cabecera.js le crea una fila suelta (.fh-cabecera--suelta)
   delante de .round-topbar, empujando el marcador hacia abajo. round-topbar
   ya reserva un hueco a la derecha del cronómetro para el widget
   (padding-right, ver arriba) desde que el círculo flotaba fijo — se le
   devuelve fijo ahí en vez de dejarle abrir una fila nueva. */
#screen-round > .fh-cabecera--suelta {
  position: fixed;
  top: 10px;
  right: 14px;
  width: auto;
  padding: 0;
  z-index: 20;
}


.round-main { width:100%; display:flex; flex-direction:column; gap:14px; padding:16px; flex:1; background:var(--np-paper); }

.round-panel {
  width:100%; background:var(--np-white);
  border: 1px solid var(--np-ink-soft);
  border-top: 2.5px solid var(--bd-c, var(--np-ink));
  border-left: 2.5px solid var(--bd-c, var(--np-ink));
  padding: 16px;
  box-shadow: var(--sh-x,3px) var(--sh-y,3px) var(--sh-b,0) var(--sh-c,var(--np-ink));
}
.round-panel.compact { padding:12px; }
.round-panel-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.round-panel-title span { font-family:'DM Mono',monospace; font-size:0.62rem; letter-spacing:0.24em; color: var(--np-ink-flip, #212121); text-transform:uppercase; }
.round-panel-note  { font-family:'DM Mono',monospace; font-size:0.6rem; letter-spacing:0.14em; color:var(--np-ink-soft); text-transform:uppercase; }

/* Restricciones */
.restrictions-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
@media(max-width:700px){ .restrictions-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media(max-width:420px){ .restrictions-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }

.restriction-card {
  background:var(--np-paper2); border:1px solid var(--np-ink-soft);
  border-top: 2px solid var(--bd-c, var(--np-ink));
  padding:10px 8px;
  display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center;
  opacity:0; transform:translateY(12px); transition:opacity .35s ease,transform .35s ease;
}
.restriction-card.visible { opacity:1; transform:translateY(0); }
.restriction-icon  { font-size:1.7rem; line-height:1; display:flex; align-items:center; justify-content:center; width:52px; height:52px; }
.restriction-icon-fallback { font-size:1.7rem; line-height:1; }
.restriction-img   { width:46px; height:46px; object-fit:contain; display:block; }
.restriction-label { font-family:'DM Mono',monospace; font-size:.68rem; font-weight:500; color:var(--np-ink); line-height:1.3; letter-spacing:0.04em; word-break:break-word; overflow-wrap:break-word; hyphens:auto; }
.rr-badge-img      { width:14px; height:14px; object-fit:contain; vertical-align:middle; }
.rr-badge-icon-wrap{ display:flex; align-items:center; }

/* Tracker envíos */
.submissions-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
@media(max-width:520px){ .submissions-grid{grid-template-columns:1fr;} }

.submission-item {
  display:flex; flex-direction:column; gap:10px;
  background:var(--np-paper); border:1px solid var(--np-ink-soft);
  border-bottom:2px solid var(--bd-c, var(--np-ink));
  padding:12px; min-height:92px;
  transition:border-color .3s, background .3s;
}
.submission-item-head { display:flex; align-items:center; gap:8px; }
.submission-avatar {
  width:28px; height:28px; border-radius:var(--r-md, 0);
  background:var(--np-paper2); border:1.5px solid var(--bd-c, var(--np-ink));
  display:flex; align-items:center; justify-content:center;
  font-family:'DM Mono',monospace; font-size:.72rem; font-weight:700; color:var(--np-ink); flex-shrink:0;
}
.submission-meta { min-width:0; display:flex; flex-direction:column; gap:2px; }
.submission-name { font-size:.84rem; font-weight:700; color:var(--np-ink); }
.submission-status { font-family:'DM Mono',monospace; font-size:0.6rem; opacity:.5; letter-spacing:0.1em; text-transform:uppercase; color:var(--np-ink); }
.submission-choice {
  min-height:40px; display:flex; align-items:center;
  padding:10px 12px; border:1px solid var(--np-ink-soft); background:var(--np-paper2);
  font-family:'Anton',sans-serif; font-size:1.1rem; letter-spacing:1.2px; color:var(--np-ink); line-height:1.05;
}
.submission-choice.pending { color:var(--np-ink-mid); font-family:'DM Mono',monospace; font-size:.75rem; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; }
.submission-item.submitted { border-bottom-color:var(--np-red); background:rgba(181,34,30,0.03); }
.submission-item.submitted .submission-status { color:var(--np-red); opacity:1; }
.submission-item.submitted .submission-choice { border-color:rgba(181,34,30,0.22); }
.submission-item.me .submission-avatar { border-color:var(--np-red); color:var(--np-red); }
.submission-item.me { border-left:3px solid var(--bd-c, var(--np-ink)); }

/* Input futbolista */
.input-section {
  width:100%; padding:12px; display:flex; gap:8px; flex-shrink:0; margin-top:auto;
  background:var(--np-paper2); border-top:2px solid var(--bd-c, var(--np-ink));
}
.input-panel {
  width:100%; background:var(--np-white); border:1px solid var(--np-ink-soft);
  border-top:2px solid var(--bd-c, var(--np-ink));
  padding:12px; display:flex; flex-direction:column; gap:9px;
  box-shadow:var(--shadow-soft);
}
.input-panel-label { font-family:'DM Mono',monospace; font-size:0.62rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--np-ink-mid); }
.input-row { display:flex; gap:8px; }
.player-input {
  width:100%; background:var(--np-paper2);
  border:1.5px solid var(--bd-c, var(--np-ink)); border-radius:var(--r-md, 0);
  padding:11px 13px; color:var(--np-ink); font-size:1rem; font-weight:600;
  transition:border-color .14s, box-shadow .14s;
}
.player-input:focus { border-color:var(--np-red); box-shadow:var(--sh-x,2px) var(--sh-y,2px) var(--sh-b,0) var(--sh-c-red,var(--np-red)); outline:none; }
.player-input:disabled { opacity:.5; cursor:not-allowed; }
.player-input::placeholder { opacity:.32; font-weight:400; color:var(--np-ink); }

.autocomplete-list {
  position:absolute; bottom:calc(100% + 4px); left:0; right:0;
  background:var(--np-white); border:1.5px solid var(--bd-c, var(--np-ink));
  overflow:hidden; z-index:100; box-shadow:var(--shadow);
}
.autocomplete-list.hidden { display:none; }
.autocomplete-item {
  padding:10px 14px; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center;
  font-size:.9rem; font-weight:600; color:var(--np-ink); transition:background .12s;
  border-bottom:1px solid var(--np-ink-soft);
}
.autocomplete-item:hover,
.autocomplete-item.selected { background:var(--np-paper2); }
.autocomplete-item:last-child { border-bottom:none; }
.autocomplete-nat { font-family:'DM Mono',monospace; font-size:.68rem; opacity:.5; margin-left:auto; flex-shrink:0; color:var(--np-ink); }
.autocomplete-highlight { color:var(--np-red); }

.btn-submit {
  background:var(--np-ink); color:var(--np-paper);
  border:none; border-radius:var(--r-md, 0);
  font-family:'DM Mono',monospace; font-size:.76rem; font-weight:500; letter-spacing:0.16em;
  padding:0 16px; height:46px;
  white-space:nowrap; flex-shrink:0; transition:opacity .2s;
  box-shadow:var(--sh-x,3px) var(--sh-y,3px) var(--sh-b,0) var(--sh-c-red,var(--np-red));
}
.btn-submit:hover { opacity:.82; }
.btn-submit:disabled { opacity:.35; cursor:not-allowed; box-shadow:none; }

/* ═══════════════════════════════════════════
   RESULTADOS
   ═══════════════════════════════════════════ */
#screen-results { padding: 0 0 24px; }

.results-header {
  width:100%; background:var(--np-ink);
  padding:16px 20px 14px; text-align:center; flex-shrink:0;
  border-bottom:3px solid var(--np-red);
}
.results-title { font-family:'Playfair Display',serif; font-style:italic; font-weight:900; font-size:clamp(1.8rem,6vw,2.8rem); color:var(--np-paper); }
.results-subtitle { font-family:'DM Mono',monospace; font-size:.65rem; color:rgba(var(--np-paper-rgb, 244,234,210), 0.52); letter-spacing:0.2em; text-transform:uppercase; margin-top:4px; }

/* Racha de rondas ganadas seguidas: solo aparece a partir de ×2, y a partir
   de ×3 crece y se pinta del acento. */
.results-streak {
  font-family:'DM Mono',monospace; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(var(--np-paper-rgb, 244,234,210), 0.6); margin-top:6px;
  transition: color .2s ease, font-size .2s ease;
}
.results-streak.hidden { display: none; }
.results-streak.hot { color:var(--np-red); font-size:.95rem; }
.results-streak.pop { animation: c5StreakPop .32s cubic-bezier(.34,1.56,.64,1); }
@keyframes c5StreakPop { 0% { transform:scale(1); } 40% { transform:scale(1.28); } 100% { transform:scale(1); } }
@media (prefers-reduced-motion: reduce) { .results-streak.pop { animation:none; } }

.results-list { width:100%; display:flex; flex-direction:column; gap:10px; padding:14px; flex:1; overflow-y:auto; background:var(--np-paper); }

.result-card {
  background:var(--np-white); border:1px solid var(--np-ink-soft);
  border-top:2.5px solid var(--bd-c, var(--np-ink));
  border-left:2.5px solid var(--bd-c, var(--np-ink));
  padding:14px; display:flex; flex-direction:column; gap:9px;
  box-shadow:var(--sh-x,3px) var(--sh-y,3px) var(--sh-b,0) var(--sh-c,var(--np-ink));
}
.result-card::before { display:none; }
.result-card.winner { background:var(--np-paper2); border-top-color:var(--np-red); border-top-width:3px; }
.result-card.invalid { opacity:.6; }
.result-card-header { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.result-player-name { font-family:'DM Mono',monospace; font-size:.62rem; opacity:.55; letter-spacing:0.14em; text-transform:uppercase; color:var(--np-ink); }
.result-winner-badge { font-family:'DM Mono',monospace; font-size:.65rem; letter-spacing:0.12em; color:var(--np-red); background:rgba(181,34,30,0.08); border:1px solid rgba(181,34,30,0.32); padding:2px 7px; }
.result-points-badge { font-family:'DM Mono',monospace; font-size:.65rem; color:var(--np-ink); background:var(--np-paper2); border:1px solid var(--np-ink-soft); padding:2px 7px; }
.result-footballer-row { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.result-main-block { display:flex; align-items:flex-start; gap:12px; min-width:0; flex:1; }
.result-footballer { font-family:'Anton',sans-serif; font-size:1.5rem; letter-spacing:2px; line-height:1; color:var(--np-ink); }
.result-footballer.not-found { color:var(--np-red); font-size:1.15rem; text-decoration:line-through; opacity:.6; }
.result-not-found-hint { font-family:'DM Mono',monospace; font-size:.65rem; color:var(--np-red); opacity:.8; }
.result-no-submit { font-family:'DM Mono',monospace; font-size:.75rem; color:var(--np-ink-mid); font-style:italic; }
.result-match-count { font-family:'DM Mono',monospace; font-size:.68rem; color:var(--np-ink-mid); }
.result-match-count .count-value { color:var(--np-red); font-size:.82rem; }
.result-restrictions { display:flex; flex-direction:column; gap:5px; align-items:stretch; min-width:150px; max-width:180px; }
.rr-badge { display:flex; align-items:center; gap:3px; padding:3px 7px; font-family:'DM Mono',monospace; font-size:.62rem; letter-spacing:0.06em; }
.rr-badge.met     { background:rgba(181,34,30,0.08); border:1px solid rgba(181,34,30,0.28); color:var(--np-red); }
.rr-badge.not-met { background:var(--np-paper); border:1px solid var(--np-ink-soft); opacity:.5; color:var(--np-ink); }
.rr-badge-icon { font-size:.78rem; }
.result-footballer-photo { width:64px; height: 89.9974px; object-fit:cover; object-position:top center; border:1px solid var(--np-ink-soft); flex-shrink:0; background:var(--np-paper2); filter:sepia(10%) contrast(1.04); }
.result-footballer-info { display:flex; flex-direction:column; gap:5px; min-width:0; }
#btn-next-round.hidden { display:none; }
.results-actions { width:100%; padding:12px 14px; display:flex; flex-direction:column; gap:8px; flex-shrink:0; background:var(--np-paper2); border-top:1.5px solid var(--bd-c, var(--np-ink)); }
#results-restrictions-legend { background:var(--np-paper); padding:0 14px; }

/* ═══════════════════════════════════════════
   FIN DE PARTIDA
   ═══════════════════════════════════════════ */
#screen-finished { justify-content:center; gap:18px; background:var(--np-paper); padding:28px 24px; }

.finished-trophy { font-size:3.5rem; filter:grayscale(100%); animation:pulse 2.5s infinite; }
@keyframes pulse { 0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:0.72} }

.finished-title { font-family:'Playfair Display',serif; font-style:italic; font-weight:900; font-size:clamp(2rem,7vw,3.5rem); color:var(--np-ink); text-align:center; }
.winner-name { font-family:'Anton',sans-serif; font-size:clamp(1.4rem,5vw,2rem); letter-spacing:0.22em; color:var(--np-paper); text-align:center; background:var(--np-ink); padding:6px 20px; box-shadow:var(--sh-x,4px) var(--sh-y,4px) var(--sh-b,0) var(--sh-c-red,var(--np-red)); }

.final-scores { width:100%; max-width:320px; display:flex; flex-direction:column; border:1.5px solid var(--bd-c, var(--np-ink)); }
.final-score-item { display:flex; justify-content:space-between; align-items:center; padding:9px 14px; background:var(--np-paper2); border-bottom:1px solid var(--np-ink-soft); font-family:'DM Mono',monospace; font-size:0.7rem; letter-spacing:0.08em; color:var(--np-ink); text-transform:uppercase; }
.final-score-item:last-child { border-bottom:none; }
.final-score-item.winner-item { background:var(--np-ink); color:var(--np-paper); }
.final-score-name { opacity:0.78; }
.final-score-pts  { font-family:'Anton',sans-serif; font-size:1.5rem; letter-spacing:1px; color:var(--np-red); line-height:1; }
.final-score-item.winner-item .final-score-pts { color:var(--np-paper); }
.finished-actions { display:flex; flex-direction:column; gap:8px; width:100%; max-width:320px; }

/* ═══════════════════════════════════════════
   RESULTADO CLASIFICATORIA (ELO antes → después)
   PLAN-5-de-5-ranked.md
   ═══════════════════════════════════════════ */
.ranked-result-box.hidden { display: none; }
.ranked-result-box { width: 100%; max-width: 320px; }
.ranked-result-loading, .ranked-result-error {
  font-family: 'DM Mono', monospace; font-size: 0.72rem; color: var(--np-ink-mid);
  text-align: center; letter-spacing: 0.04em; line-height: 1.5;
}
.ranked-result-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: 1.5px solid var(--bd-c, var(--np-ink)); border-radius: var(--r-md, 0);
  padding: 14px; background: var(--np-paper2);
}
.ranked-result-label {
  font-family: 'Anton', sans-serif; font-size: 1.1rem; letter-spacing: 0.1em;
}
.ranked-result-win  .ranked-result-label { color: #1a7a3a; }
.ranked-result-loss .ranked-result-label { color: var(--np-red); }
.ranked-result-tie  .ranked-result-label { color: var(--np-ink-mid); }
.ranked-result-elo {
  display: flex; align-items: baseline; gap: 6px;
  font-family: 'DM Mono', monospace; font-size: 0.85rem; color: var(--np-ink);
}
.ranked-elo-antes { opacity: 0.55; }
.ranked-elo-arrow { opacity: 0.4; }
.ranked-elo-despues { font-family:'Anton',sans-serif; font-size: 1.3rem; }
.ranked-elo-delta { font-weight: 600; }
.ranked-result-win  .ranked-elo-delta { color: #1a7a3a; }
.ranked-result-loss .ranked-elo-delta { color: var(--np-red); }
.ranked-result-tramo {
  display: flex; align-items: center; gap: 8px;
  font-family: 'DM Mono', monospace; font-size: 0.75rem; color: var(--np-ink-mid);
}
.ranked-result-tramo .ranked-tramo-logo { width: 28px; height: 28px; }
.ranked-result-ascenso { color: #1a7a3a; font-family:'DM Mono',monospace; font-size:0.72rem; letter-spacing:0.05em; }
.ranked-result-descenso { color: var(--np-red); font-family:'DM Mono',monospace; font-size:0.72rem; letter-spacing:0.05em; }

/* ═══════════════════════════════════════════
   MUERTE SÚBITA
   ═══════════════════════════════════════════ */
#sudden-death-banner { width:100%; background:var(--np-red); color:var(--np-paper); text-align:center; padding:8px 0; font-family:'DM Mono',monospace; font-size:.75rem; letter-spacing:0.2em; flex-shrink:0; text-transform:uppercase; }
#sd-results-banner   { width:100%; background:var(--np-red); color:var(--np-paper); text-align:center; padding:7px 0; font-family:'DM Mono',monospace; font-size:.7rem; letter-spacing:0.16em; flex-shrink:0; text-transform:uppercase; }

/* ═══════════════════════════════════════════
   CUENTA ATRÁS — solo colores, resto intacto
   ═══════════════════════════════════════════ */
/* La cuenta atras de los 10 segundos vive en css/cuenta-atras.css, una sola
   definicion para 5 de 5, Blackjack y En la Cadena. */

/* Bug movil: ademas del overlay, se oculta por completo el area de enviar
   mientras la cuenta atras esta activa. Asi, aunque en algun navegador movil
   el overlay no cubra el 100% del viewport visible (barra de direcciones
   dinamica), el boton de enviar nunca queda visible ni pulsable debajo. */
body.countdown-active .input-section { display:none !important; }

/* ═══════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════ */
.toast {
  position:fixed; bottom:80px; left:50%;
  transform:translateX(-50%) translateY(16px);
  background:var(--np-ink); padding:8px 18px;
  font-family:'DM Mono',monospace; font-size:0.7rem; letter-spacing:0.14em;
  color:var(--np-paper); text-transform:uppercase;
  z-index:1000; opacity:0; transition:all .22s ease;
  pointer-events:none; white-space:nowrap; box-shadow:var(--sh-x,3px) var(--sh-y,3px) var(--sh-b,0) var(--sh-c-red,var(--np-red));
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast.error   { background:var(--np-red); box-shadow:var(--sh-x,3px) var(--sh-y,3px) var(--sh-b,0) var(--sh-c,var(--np-ink)); }
.toast.warning { background:var(--np-paper3); color:var(--np-ink); box-shadow:var(--sh-x,3px) var(--sh-y,3px) var(--sh-b,0) var(--sh-c,var(--np-ink)); }

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media(max-width:700px){
  .round-main{gap:10px;padding:12px}
  .round-panel{padding:12px;}
  .round-panel.compact{padding:8px}
  .round-panel-title{ align-items:flex-start; flex-direction:column; gap:4px; margin-bottom:10px; }
  .restrictions-grid{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; }
  .restriction-card{ padding:9px 5px; gap:5px; }
  .restriction-icon{ width:36px; height:36px; font-size:1.22rem; }
  .restriction-icon-fallback{font-size:1.22rem}
  .restriction-img{width:32px;height:32px}
  .restriction-label{font-size:.6rem;line-height:1.16;}
  .submissions-grid{gap:6px}
  .submission-item{ min-height:0; padding:8px 9px; gap:6px; flex-direction:row; align-items:center; }
  .submission-item-head{gap:6px;min-width:0;flex:0 0 auto}
  .submission-avatar{width:24px;height:24px;font-size:.65rem}
  .submission-meta{gap:1px}
  .submission-name{font-size:.72rem;line-height:1}
  .submission-status{font-size:0.6rem}
  .submission-choice{ min-height:0; padding:6px 8px; font-size:.76rem; letter-spacing:.55px; line-height:1; margin-left:auto; flex:1; }
  .submission-choice.pending{font-size:.64rem}
  .input-section{ padding:10px 10px calc(10px + env(safe-area-inset-bottom,0px)); position:sticky; bottom:0; z-index:9; }
  .input-panel{padding:9px;gap:7px;}
  .input-panel-label{font-size:.6rem;letter-spacing:0.14em}
  .input-row{gap:6px}
  .player-input{padding:10px 11px;font-size:.95rem;}
  .btn-submit{height:44px;padding:0 12px;font-size:.72rem;letter-spacing:0.12em;}
}
@media(max-width:480px){
  .result-footballer-row{flex-direction:column}
  .result-main-block{width:100%}
  .result-restrictions{min-width:0;max-width:none;width:100%}
}
@media(max-width:420px){
  .round-main{padding:10px}
  .restrictions-grid{gap:5px}
  .restriction-card{padding:8px 4px;}
  .restriction-icon{width:34px;height:34px;font-size:1.14rem;}
  .restriction-img{width:30px;height:30px}
  .restriction-label{font-size:.6rem;line-height:1.12;}
  .input-row{flex-direction:column}
  .btn-submit{width:100%;height:40px;}
}
@media(min-width:768px){
  .results-list{display:grid;grid-template-columns:repeat(2,1fr);align-content:start}
}


/* Aviso de ronda sin puntos por empate total (2026-09-06). Tokenizado, no
   con colores a fuego: en este proyecto un color literal dentro del CSS de
   un juego se queda fuera del tema Moderno. */
.results-empate {
  margin: 0 0 14px;
  padding: 10px 14px;
  text-align: center;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--np-ink);
  background: var(--np-paper2, transparent);
  border: 2px solid var(--bd-c, var(--np-ink));
  border-radius: var(--r-md, 0);
}
.results-empate[hidden] { display: none; }