/* Base oscura: hace falta para OBS y para mirarlo a las 4 AM.
   El "sabor Pokémon" viene de los 18 colores de tipo, los sprites y los detalles,
   NO de imitar la UI de los juegos (eso queda a fan-site de 2008). */

:root {
  --bg:        #0b0d12;
  --bg-2:      #12151d;
  --bg-3:      #1a1f2b;
  --line:      #262c3a;
  --txt:       #e8ecf4;
  --txt-dim:   #8b93a7;
  --accent:    #ee2b3b;   /* rojo pokéball */
  --accent-2:  #3b7ddd;
  --ok:        #3ecf7a;
  --warn:      #f0a83c;

  --radius: 10px;
  /* Fredoka para leer, Pokemon Classic para cifras y etiquetas: la pixel da el
     sabor del juego, pero en párrafos largos cansa la vista a las 4 AM. */
  --font:  "Fredoka", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  /* Press Start 2P fuera de la pila a propósito: es mucho más ancha y los
     dígitos que caen aquí desmontarían las columnas ya medidas. */
  --mono:  "Pokemon Classic", ui-monospace, "JetBrains Mono", "SF Mono", monospace;
  --datos: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
}

/* Los 18 tipos. Se usan como paleta de toda la app. */
:root {
  --t-normal:#9fa19f; --t-fire:#e62829;   --t-water:#2980ef;  --t-electric:#fac000;
  --t-grass:#3fa129;  --t-ice:#3dcef3;    --t-fighting:#ff8000;--t-poison:#9141cb;
  --t-ground:#915121; --t-flying:#81b9ef; --t-psychic:#ef4179;--t-bug:#91a119;
  --t-rock:#afa981;   --t-ghost:#704170;  --t-dragon:#5060e1; --t-dark:#50413f;
  --t-steel:#60a1b8;  --t-fairy:#ef70ef;
}

* { box-sizing: border-box; }

/* El hueco de la barra de scroll se reserva SIEMPRE. Sin esto, al pasar de
   Lista (página larga) a Mundo (alto exacto) desaparece la barra, la ventana
   gana 12 px y los botones de arriba a la derecha dan un salto. */
html { scrollbar-gutter: stable; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Esto es una aplicación, no un documento: arrastrar sobre el mapa o sobre
     una lista seleccionaba texto a lo bestia. Solo se selecciona donde se
     escribe. */
  -webkit-user-select: none; user-select: none;
}
input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; }

a { color: var(--accent-2); }

/* ---------------------------------------------------- estados de los sprites */
/* filter sobre un GIF animado MANTIENE la animación: siluetas negras que se mueven. */

.mon            { image-rendering: pixelated; display: block; width: 100%; height: auto; }
/* sin ver: silueta negra · visto: se distingue pero en blanco y negro ·
   capturado: a color */
.mon.no-visto   { filter: brightness(0); }
.mon.visto      { filter: grayscale(1) contrast(1.08); opacity: .9; }
.mon.capturado  { filter: none; }

/* ---------------------------------------------------- rejilla del bingo */
/* Sprites ESTÁTICOS aquí. 649 GIFs animados revientan el navegador y el Browser
   Source de OBS en un directo de 72 h. Animado solo en la card grande. */

.grid {
  display: grid;
  /* 20 por fila exactas: la primera fila es del 1 al 20 y así sucesivamente */
  grid-template-columns: repeat(20, minmax(0, 1fr));
  gap: 4px;
}
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(10, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .grid { grid-template-columns: repeat(5,  minmax(0, 1fr)); } }

/* ── cabecera de región dentro de la lista ── */
.sep-region {
  grid-column: 1 / -1;                 /* ocupa la fila entera y corta la rejilla */
  margin: 22px 0 8px;
  padding: 12px 14px 11px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--reg) 14%, transparent), transparent 70%);
  border-left: 3px solid var(--reg);
  border-radius: 0 10px 10px 0;
}
.sep-region:first-child { margin-top: 4px; }
.sr-top { display: flex; align-items: center; gap: 16px; }
.sep-region h3 {
  margin: 0; font-size: 17px; font-weight: 700; letter-spacing: .02em;
  color: var(--reg); min-width: 96px;
}
.sr-medallas { display: flex; gap: 5px; flex: 1; }
.sr-medallas img {
  width: 22px; height: 22px; object-fit: contain;
  filter: grayscale(1) brightness(.42); opacity: .5;
  transition: filter .35s ease, opacity .35s ease, transform .35s cubic-bezier(.2,.8,.3,1);
}
.sr-medallas img.on {
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--reg) 70%, transparent));
  opacity: 1; transform: translateY(-1px);
}
.sr-cuenta { font: 700 14px/1 var(--mono); color: var(--txt-dim); white-space: nowrap; }
.sep-region.completa .sr-cuenta { color: var(--ok); }
.sr-barra {
  height: 5px; background: rgba(255,255,255,.09); border-radius: 99px;
  overflow: hidden; margin-top: 10px;
}
.sr-barra > i {
  display: block; height: 100%; width: 0; border-radius: 99px;
  background: var(--reg); transition: width .5s cubic-bezier(.2,.8,.3,1);
}
.sep-region.completa .sr-barra > i { background: var(--ok); }

.celda {
  position: relative;
  aspect-ratio: 1;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease;
}
.celda:hover        { transform: translateY(-2px); border-color: var(--accent-2); }
.celda[data-estado="capturado"] { border-color: #2f4a35; background: #131c16; }
.celda[data-estado="visto"] { border-color: #3a4252; }
.celda .num {
  position: absolute; bottom: 1px; right: 3px;
  font: 9px/1 var(--mono); color: var(--txt-dim);
}

/* ---------------------------------------------------- cabecera / contador */

.topbar {
  display: flex; align-items: center; gap: 20px;
  padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--bg-2);
  position: sticky; top: 0; z-index: 10;
}

.contador { font: 700 26px/1 var(--mono); letter-spacing: -.02em; }
.contador .total { color: var(--txt-dim); font-weight: 400; font-size: 18px; }

.barra { flex: 1; height: 6px; background: var(--bg-3); border-radius: 99px; overflow: hidden; }
.barra > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--warn)); }

nav.tabs { display: flex; gap: 4px; }
nav.tabs button {
  background: transparent; border: 1px solid transparent; color: var(--txt-dim);
  padding: 6px 14px; border-radius: 99px; cursor: pointer; font: inherit;
}
nav.tabs button[aria-selected="true"] { background: var(--bg-3); color: var(--txt); border-color: var(--line); }

/* ---------------------------------------------------- filtros */

/* sin hueco lateral: main ya mete sus 20 px y el buscador salía sangrado
   respecto a la rejilla que tiene debajo */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 0; }
.filtros input, .filtros select {
  background: var(--bg-2); border: 1px solid var(--line); color: var(--txt);
  padding: 7px 11px; border-radius: 8px; font: inherit;
}
.filtros input[type="search"] { min-width: 220px; }

main { padding: 0 20px 40px; }
/* El mapa ocupa el alto exacto de la ventana: con el hueco de abajo la página
   ganaba 40 px, salía barra de scroll y al bajar aparecía una franja negra. */
main:has(#panel-mundo:not([hidden])) { padding-bottom: 0; overflow: hidden; }
/* Y con el mapa delante la PÁGINA no se desplaza nunca: la rueda es del mapa.
   Al llegar al tope de alejar, la rueda seguía bajando y se iba la página
   entera (sobraba un píxel de alto a algunos tamaños, y las listas de dentro
   le pasaban el scroll al acabarse). Las listas siguen bajando por dentro. */
html:has(#panel-mundo:not([hidden])),
html:has(#panel-mundo:not([hidden])) body { overflow: hidden; overscroll-behavior: none; }
.panel[hidden] { display: none; }
/* El mapa NO se quita con display:none al irse a la Lista: se oculta con
   content-visibility, que se salta pintarlo pero se queda con el estilo y la
   maquetación ya calculados de sus 1300 nodos. Con display:none el navegador
   lo tiraba todo y al volver lo rehacía de golpe: un fotograma de 55-65 ms
   justo al empezar la transición. Va fuera del flujo para no ocupar sitio
   debajo de la Lista, y sin recibir ratón ni foco (content-visibility tampoco
   deja enfocar lo de dentro). */
#panel-mundo[hidden] {
  display: block; position: absolute; top: 0; left: 0; right: 0;
  content-visibility: hidden; pointer-events: none;
}
/* ── transición entre pestañas ────────────────────────────────────────────────
   Solo se mueve el contenido; la barra de arriba se queda. El panel que sale
   se va por un lado y el que entra llega por el otro, así se entiende que son
   dos pantallas de lo mismo y no un corte. */
.panel.deslizando {
  transition: transform .26s cubic-bezier(.3,.9,.35,1), opacity .26s ease,
              filter .3s ease;
  will-change: transform, opacity, filter;
}
/* el fotograma en el que el panel entrante se coloca fuera: sin transición, o
   se vería el salto a la posición de partida */
.panel.sin-transicion { transition: none; }
/* mientras dura el viaje no debe salir barra horizontal por el desplazamiento */
main.deslizando { position: relative; overflow-x: hidden; }
/* el que se va flota por encima: así el que entra ocupa YA su sitio en el flujo
   en vez de colocarse debajo, fuera de la pantalla */
.panel.saliendo { position: absolute; top: 0; left: 0; right: 0; z-index: 2; }

/* ── el humo del cambio de pantalla ──────────────────────────────────────────
   Cuatro nubarrones que cruzan en el sentido del viaje y se deshacen al
   llegar. Tapan la costura entre las dos pantallas: sin ellos se ve el corte
   negro del momento en que una se va y la otra todavía no está.
   Van en <body> y no dentro de main para que el desplazamiento de los paneles
   no los arrastre. */
.humo {
  position: fixed; left: 0; right: 0; bottom: 0; top: var(--topbar, 64px);
  z-index: 40; pointer-events: none; overflow: hidden;
}
.humo i {
  position: absolute; top: 50%; left: 50%;
  width: 78vmax; height: 78vmax; margin: -39vmax 0 0 -39vmax;
  border-radius: 50%; opacity: 0;
  /* dos capas: el cuerpo de la nube y un tono frío en el borde, que es lo que
     la hace leerse como humo y no como una mancha blanca */
  background:
    radial-gradient(circle at 42% 38%, rgba(255,255,255,.72) 0%, rgba(255,255,255,.46) 30%, rgba(255,255,255,.16) 52%, transparent 68%),
    radial-gradient(circle at 64% 68%, rgba(186,212,247,.55) 0%, rgba(186,212,247,.2) 40%, transparent 64%);
  filter: blur(22px);
  animation: humo-pasa var(--dur, 620ms) cubic-bezier(.28,.62,.3,1) forwards;
}
.humo i:nth-child(1) { --sube: -30%; --tam: 1;    animation-delay: 0ms; }
.humo i:nth-child(2) { --sube:  22%; --tam: .86;  animation-delay: 60ms; }
.humo i:nth-child(3) { --sube:  -6%; --tam: 1.15; animation-delay: 120ms; }
.humo i:nth-child(4) { --sube:  36%; --tam: .72;  animation-delay: 180ms; }
/* --dir vale 1 o -1: el humo entra por donde viene la pantalla nueva.
   La escala va DENTRO del keyframe: si se pone en el elemento, la animación la
   pisa y todas las nubes salen del mismo tamaño. */
@keyframes humo-pasa {
  0%   { opacity: 0;    transform: translate(calc(var(--dir) * 85%), var(--sube)) scale(calc(var(--tam) * .78)); }
  26%  { opacity: 1; }
  62%  { opacity: .92; }
  100% { opacity: 0;    transform: translate(calc(var(--dir) * -40%), var(--sube)) scale(calc(var(--tam) * 1.55)); }
}
@media (prefers-reduced-motion: reduce) { .humo { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .panel.deslizando { transition: opacity .18s ease; transform: none !important; }
}

/* ---------------------------------------------------- estado de conexión */

.conn { font: 11px/1 var(--mono); color: var(--txt-dim); display: flex; align-items: center; gap: 6px; }
.conn::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: var(--warn); }
.conn[data-on="true"]::before { background: var(--ok); }

/* ═══════════════════════════════ ficha de Pokémon ═══════════════════════════ */

.modal { position: fixed; inset: 0; z-index: 100; display: none; }
.modal[open] { display: grid; place-items: center; }
.modal .velo { position: absolute; inset: 0; background: rgba(5,7,11,.82); backdrop-filter: blur(6px); }

.ficha {
  position: relative; z-index: 1;
  /* toda la ficha escala desde aquí: los hijos usan em */
  --fz: clamp(14px, .30vw + 12.2px, 17px);
  font-size: var(--fz);
  width: min(1080px, 96vw); max-height: 92vh; overflow-y: auto;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0,0,0,.7);
}
.ficha .cerrar {
  position: absolute; top: 12px; right: 14px; z-index: 2;
  background: transparent; border: 0; color: var(--txt-dim);
  font-size: 26px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 8px;
}
.ficha .cerrar:hover { background: var(--bg-3); color: var(--txt); }

.ficha .cabecera { display: flex; gap: 22px; align-items: center; padding: 24px 26px; border-bottom: 1px solid var(--line); }
.ficha .cabecera img { width: clamp(104px, 9vw, 132px); height: clamp(104px, 9vw, 132px); image-rendering: pixelated; flex-shrink: 0; }
.ficha h2 { margin: 0; font-size: clamp(24px, 2.3vw, 33px); letter-spacing: -.02em; }
.ficha .num { font: .82em/1 var(--mono); color: var(--txt-dim); }
.ficha .tipos { display: flex; gap: 6px; margin-top: 9px; }
.ficha .tipo {
  font: 600 .74em/1 var(--font); letter-spacing: .09em; text-transform: uppercase;
  padding: .45em .85em; border-radius: 99px; color: #fff;
}
.ficha .datos { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 12px; font: .84em/1.4 var(--mono); color: var(--txt-dim); }
.ficha .datos b { color: var(--txt); font-size: 1.22em; display: block; }

.ficha .seccion { padding: 20px 26px; border-bottom: 1px solid var(--line); }
.ficha .seccion:last-child { border-bottom: 0; }
.ficha h3 {
  margin: 0 0 13px; font: 600 .84em/1 var(--font); letter-spacing: .17em;
  text-transform: uppercase; color: var(--txt-dim);
}

/* dónde conseguirlo */
.ubic { display: flex; flex-direction: column; gap: 6px; }
.ubic .u {
  display: grid; grid-template-columns: 78px 1fr auto; gap: 14px; align-items: center;
  padding: 11px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 9px;
  font-size: 1em; line-height: 1.45;
}
.ubic .u.evento { border-color: var(--warn); background: rgba(240,168,60,.07); }
.ubic .juego { font: 600 .78em/1.2 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--accent-2); }
.ubic .met { font: .86em/1.3 var(--mono); color: var(--txt-dim); }
.ubic .prob { font: 700 1.05em/1 var(--mono); color: var(--warn); white-space: nowrap; }
.ubic .prob.seguro { color: var(--ok); font-size: .8em; letter-spacing: .08em; text-transform: uppercase; }

/* ── "mostrar más" cuando hay muchas ubicaciones ── */
.ubic .oculta { display: none; }
.ubic.abierta .oculta { display: grid; }
.btn-mas {
  align-self: flex-start; margin-top: 2px; background: transparent; cursor: pointer;
  border: 1px dashed var(--line); border-radius: 8px; color: var(--txt-dim);
  padding: 8px 14px; font: inherit; font-size: .88em;
  transition: border-color .15s, color .15s;
}
.btn-mas:hover { border-color: var(--accent-2); color: var(--txt); }

/* calculadora */
.calc-mandos { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 14px; margin-bottom: 18px; }
.calc-mandos label { display: block; font: .8em/1.3 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--txt-dim); margin-bottom: 6px; }
.calc-mandos input, .calc-mandos select {
  width: 100%; box-sizing: border-box;
  background: var(--bg); border: 1px solid var(--line); color: var(--txt);
  padding: 8px 11px; border-radius: 8px; font: inherit; font-size: .97em;
}
.calc-mandos input[type="range"] { padding: 0; margin: 0; }   /* el margen por defecto se salía 4px */
.calc-flags { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; font-size: .92em; color: var(--txt-dim); }
.calc-flags label { display: flex; align-items: center; gap: 6px; cursor: pointer; }

table.balls { width: 100%; border-collapse: collapse; font-size: .97em; }
table.balls th {
  text-align: left; font: 600 .8em/1 var(--font); letter-spacing: .1em; text-transform: uppercase;
  color: var(--txt-dim); padding: 8px 10px; border-bottom: 1px solid var(--line);
}
table.balls td { padding: 8px 10px; border-bottom: 1px solid var(--bg-3); }
table.balls tr:hover td { background: var(--bg-3); }
table.balls .pct { font: 700 1.1em/1 var(--mono); text-align: right; }
table.balls .barra-p { height: 5px; background: var(--bg-3); border-radius: 99px; overflow: hidden; min-width: 70px; }
table.balls .barra-p > i { display: block; height: 100%; border-radius: 99px; }
table.balls .cond { font-size: .86em; color: var(--txt-dim); }
table.balls .esp { font: .86em/1 var(--mono); color: var(--txt-dim); text-align: right; }
.aviso-gen { font-size: .87em; color: var(--txt-dim); margin-top: 14px; line-height: 1.6; }

/* ═══════════════════════════════ mapa de zonas ══════════════════════════════ */

.zonas { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 10px; }

.zona {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 11px;
  padding: 13px 15px; cursor: pointer; transition: border-color .15s, transform .12s;
}
.zona:hover { border-color: var(--accent-2); transform: translateY(-2px); }
.zona.completa { opacity: .5; }
.zona.aqui { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok) inset; }

.zona .top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.zona h4 { margin: 0; font-size: 14px; font-weight: 600; }
.zona .reg { font: 9px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--txt-dim); }
.zona .cuenta { font: 700 13px/1 var(--mono); white-space: nowrap; }
.zona .barra { height: 4px; background: var(--bg-3); border-radius: 99px; overflow: hidden; margin: 9px 0 10px; }
.zona .barra > i { display: block; height: 100%; border-radius: 99px; transition: width .3s; }
.zona .mons { display: flex; flex-wrap: wrap; gap: 3px; }
.zona .mons img { width: 30px; height: 30px; image-rendering: pixelated; }
.zona .aqui-tag {
  font: 700 9px/1 var(--font); letter-spacing: .1em; text-transform: uppercase;
  background: var(--ok); color: #06210f; padding: 3px 7px; border-radius: 99px;
}

/* recuerdo de captura */
.recuerdo { display: flex; flex-direction: column; gap: 8px; }
.r-fila { display: grid; grid-template-columns: 180px 1fr; gap: 14px; align-items: baseline; font-size: 1em; }
.r-fila > span { color: var(--txt-dim); font-size: .82em; letter-spacing: .06em; text-transform: uppercase; }
/* el recuerdo es de solo lectura: lo escribe el tracker, la web solo lo enseña */

/* movimientos por nivel */
.movs { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 5px; }
.mv {
  display: flex; gap: 9px; align-items: baseline; font-size: .95em;
  padding: 7px 11px; background: var(--bg); border: 1px solid var(--line); border-radius: 7px;
}
.mv.ya { border-color: #2f4a35; background: #131c16; }
.mv .lv { font: .82em/1 var(--mono); color: var(--txt-dim); min-width: 42px; }

/* ── botón que abre la calculadora ── */
.btn-calc {
  width: 100%; display: flex; align-items: center; gap: 14px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 11px;
  padding: 14px 16px; cursor: pointer; color: var(--txt);
  font: inherit; text-align: left;
  transition: border-color .18s, background .18s, transform .12s;
}
.btn-calc:hover { border-color: var(--accent-2); background: var(--bg-3); }
.btn-calc:active { transform: scale(.995); }
.btn-calc { font-size: 1em; }
.btn-calc .bc-ico { font-size: 1.55em; line-height: 1; }
.btn-calc small { color: var(--txt-dim); font-size: .9em; }
.btn-calc .bc-flecha { margin-left: auto; color: var(--txt-dim); font-size: 1.6em; line-height: 1; }

/* la calculadora se muestra por encima de la ficha */
#modal-calc { z-index: 110; }

/* ── el recuerdo, cuando está capturado ── */
.recuerdo.hecho {
  background: linear-gradient(180deg, rgba(62,207,122,.08), transparent);
  border: 1px solid #2f4a35; border-radius: 11px; padding: 14px 16px;
}
.r-destacado {
  display: flex; gap: 22px; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line);
}
.r-destacado div { min-width: 74px; }
.r-destacado span { display: block; font: .8em/1.6 var(--mono); letter-spacing: .08em;
                    text-transform: uppercase; color: var(--txt-dim); }
.r-destacado b { font-size: 1.5em; font-weight: 700; }
.r-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.r-stats i {
  font-style: normal; font: .85em/1 var(--mono);
  background: var(--bg-3); border: 1px solid var(--line);
  padding: 6px 10px; border-radius: 6px; color: var(--txt-dim);
}
.r-stats i b { color: var(--txt); font-size: 1.12em; }

/* ── fila de "dónde conseguirlo" con portada del juego e icono de método ── */
.ubic .u { grid-template-columns: 138px 1fr auto; }
.u-juego { display: flex; align-items: center; gap: 8px; min-width: 0; }
.u-juego img { width: 36px; height: 36px; image-rendering: pixelated; flex: none; }
.u-juego .juego { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-mid { min-width: 0; }
.ubic .met { display: inline-flex; align-items: center; gap: 5px; }
.ico-met { width: 1.25em; height: 1.25em; flex: none; opacity: .85; }
.ico-obj { width: 30px; height: 30px; image-rendering: pixelated; }

.ubic .u.evolucion { border-color: #4b3d6b; background: rgba(145,65,203,.09); }
/* el nombre del Pokémon del que evoluciona puede ser largo: que parta, no que se corte */
.ubic .u.evolucion .juego { white-space: normal; overflow: visible; line-height: 1.3; }
.ubic .u.evolucion .juego { color: #b98ee0; }

/* ── movimientos con tipo, potencia y precisión ── */
/* Columnas FIJAS, no auto: con auto cada tarjeta medía distinto y las etiquetas
   de tipo bailaban de una fila a otra. Así quedan en columna perfecta. */
/* 7.6em en la columna de tipo: es lo que mide "SINIESTRO" con la pixel */
/* Anchos medidos con la fuente pixel sobre los peores casos reales:
   "Nv 100" = 3.76em, "SINIESTRO" = 7.4em, "120/100" = 6.43em. */
/* minmax(): el mínimo mantiene las columnas alineadas entre tarjetas y el
   max-content garantiza que NUNCA se pise el nombre, aunque la fuente mida
   distinto de lo previsto. Con anchos fijos bastaba un píxel de más. */
.mv {
  display: grid; gap: 12px; align-items: center;
  grid-template-columns:
    minmax(5em, max-content) 1fr minmax(7.9em, max-content) 1.8em minmax(6.8em, max-content);
}
.mv .lv { text-align: right; white-space: nowrap; }
.mv .mv-t { justify-self: stretch; text-align: center; }   /* SOLO en la lista */
.mv .mv-d { justify-self: end; }
/* el nombre parte de línea antes que cortarse: "Pantalla de Humo" no cabe en una */
.mv-n { min-width: 0; white-space: normal; line-height: 1.25; overflow-wrap: anywhere; }
.mv-t {
  font: .72em/1 var(--mono); letter-spacing: .02em; text-transform: uppercase;
  color: #fff; padding: .45em .4em; border-radius: 4px; white-space: nowrap; overflow: hidden;
}
.mv-d { font: .84em/1 var(--mono); color: var(--txt-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mv-d i { opacity: .4; font-style: normal; margin: 0 1px; }

/* ── físico / especial / estado ──────────────────────────────────────────────
   Pastilla con borde oscuro, como en los juegos de cuarta en adelante. Los
   colores son los de siempre: naranja pega de cerca, azul lanza, gris no hace
   daño. Es lo primero que se mira de un movimiento. */
.mv-c {
  display: grid; place-items: center;
  width: 1.8em; height: 1.4em; border-radius: 5px;
  border: 1px solid rgba(0,0,0,.45); box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
}
.mv-c svg { width: 74%; height: 74%; fill: #fff; }
.mv-c.c-fisico   { background: linear-gradient(180deg, #f4703c, #c03a12); }
.mv-c.c-especial { background: linear-gradient(180deg, #5a8fe0, #2c56a8); }
.mv-c.c-estado   { background: linear-gradient(180deg, #9aa0ab, #6a707d); }

/* ── selector de generación de los movimientos por nivel ── */
.gen-tabs { display: flex; gap: 5px; margin: 0 0 10px; }
.gen-tabs button {
  padding: 5px 11px; border-radius: 7px; cursor: pointer;
  background: transparent; border: 1px solid var(--line); color: var(--txt-dim);
  font: .78em/1 var(--mono); font-synthesis: none; letter-spacing: .05em;
  transition: background .15s, color .15s, border-color .15s;
}
.gen-tabs button:hover { color: var(--txt); border-color: var(--accent-2); }
.gen-tabs button[aria-pressed="true"] {
  background: var(--bg-3); color: var(--txt); border-color: var(--accent-2);
}
/* solo se ve la generación elegida; las demás siguen en el DOM ya pintadas */
.gen-tabla { display: none; }
.por-gen[data-gen="crystal251"] .gen-tabla[data-gen="crystal251"],
.por-gen[data-gen="emerald386"] .gen-tabla[data-gen="emerald386"],
.por-gen[data-gen="platinum"]   .gen-tabla[data-gen="platinum"],
.por-gen[data-gen="white1"]     .gen-tabla[data-gen="white1"] { display: block; }
.mv[title]:hover { border-color: var(--accent-2); }

/* colores de los 18 tipos, para las etiquetas de movimiento */
.t-normal{background:var(--t-normal)} .t-fire{background:var(--t-fire)}
.t-water{background:var(--t-water)}   .t-electric{background:var(--t-electric)}
.t-grass{background:var(--t-grass)}   .t-ice{background:var(--t-ice)}
.t-fighting{background:var(--t-fighting)} .t-poison{background:var(--t-poison)}
.t-ground{background:var(--t-ground)} .t-flying{background:var(--t-flying)}
.t-psychic{background:var(--t-psychic)} .t-bug{background:var(--t-bug)}
.t-rock{background:var(--t-rock)}     .t-ghost{background:var(--t-ghost)}
.t-dragon{background:var(--t-dragon)} .t-dark{background:var(--t-dark)}
.t-steel{background:var(--t-steel)}   .t-fairy{background:var(--t-fairy)}

/* ═══════════════════════ la ficha en pantallas estrechas ════════════════════ */
/* Sin esto los grids de 3 columnas aplastan el texto hasta hacerlo ilegible. */
@media (max-width: 720px) {
  /* 100% y no 100vw: 100vw ignora la barra de scroll y provoca scroll lateral */
  .ficha { --fz: 15px; width: 100%; max-height: 100vh; border-radius: 0; }
  .ficha .cabecera { flex-direction: column; text-align: center; gap: 14px; padding: 20px 16px; }
  .ficha .cabecera .tipos, .ficha .cabecera .datos { justify-content: center; }
  .ficha .seccion { padding: 16px; }
  .ubic .u { grid-template-columns: 1fr auto; gap: 8px 12px; }
  .u-juego { grid-column: 1 / -1; }
  .r-fila { grid-template-columns: 1fr; gap: 2px; }
  .movs { grid-template-columns: 1fr; }
  table.balls .barra-p { display: none; }
}


/* ═════════════════ el recuerdo: ranuras, stats y género ═════════════════ */

/* Las filas con contenido alto no centran la etiqueta, la alinean arriba */
.r-fila.alto { align-items: start; }
.r-fila.alto > span { padding-top: .35em; }

/* ── los 4 huecos de movimientos, como el menú del juego ── */
.ranuras { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ranura {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center;
  grid-template-areas: "n t" "p t";
  background: var(--bg); border: 1px solid var(--line); border-left: 3px solid var(--tc, var(--line));
  border-radius: 8px; padding: 9px 12px;
}
.ranura .ra-n  { grid-area: n; font-weight: 600; }
.ranura .ra-pp { grid-area: p; font: .78em/1.5 var(--mono); color: var(--txt-dim); }
.ranura .mv-t  { grid-area: t; align-self: center; font-size: .66em; padding: .5em .6em; }
.ranura.vacia { border-left-color: var(--line); border-style: dashed; opacity: .45; }
.ranura.vacia .ra-n { color: var(--txt-dim); font-weight: 400; }

/* ── stats en barras ── */
.stats-barras { display: flex; flex-direction: column; gap: 5px; }
.sb { display: grid; grid-template-columns: 6.6em 1fr 2.8em; gap: 10px; align-items: center; }
.sb-k { font: .72em/1.4 var(--mono); color: var(--txt-dim); text-transform: uppercase; letter-spacing: .02em; }
.sb-pista { height: 9px; background: var(--bg-3); border-radius: 99px; overflow: hidden; }
.sb-pista > i { display: block; height: 100%; border-radius: 99px; transition: width .35s ease; }
.sb-v { font: 700 .95em/1 var(--mono); text-align: right; font-variant-numeric: tabular-nums; }

/* ── género ── */
/* .r-destacado span pone display:block y la pixel (0-2-0): hay que igualar la
   especificidad o el símbolo se va a su propia línea. */
.r-destacado .genero, .genero {
  display: inline; margin-left: .3em; font: .8em/1 var(--font);
  text-transform: none; letter-spacing: 0; vertical-align: baseline;
}
.r-destacado b { white-space: nowrap; }
.genero.m { color: #5aa9ef; }
.genero.f { color: #ef70a9; }
.genero.n { color: var(--txt-dim); }

/* ═══════════ la barra de PS de la calculadora, como la del juego ═══════════ */
/* El color lo pone ficha.js en --hp y el relleno en --p. */
#c-hp {
  -webkit-appearance: none; appearance: none;
  height: 22px; background: transparent; cursor: pointer;
}
#c-hp::-webkit-slider-runnable-track {
  height: 10px; border-radius: 99px; border: 1px solid var(--line);
  background: linear-gradient(to right, var(--hp, var(--ok)) var(--p, 100%), var(--bg-3) var(--p, 100%));
}
#c-hp::-moz-range-track {
  height: 10px; border-radius: 99px; border: 1px solid var(--line);
  background: linear-gradient(to right, var(--hp, var(--ok)) var(--p, 100%), var(--bg-3) var(--p, 100%));
}
#c-hp::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; margin-top: -4px; border-radius: 99px;
  background: #fff; border: 2px solid var(--hp, var(--ok));
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
#c-hp::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 99px;
  background: #fff; border: 2px solid var(--hp, var(--ok));
}
#c-hp-v { font-weight: 700; transition: color .2s; }


/* ════════════════════ ajustes propios de la fuente pixel ════════════════════ */
/* Pokemon Classic no trae negrita: si se pide, el navegador la falsea y emborrona
   los píxeles. Además necesita algo más de interlínea para respirar. */
.contador, .sr-cuenta, .ficha .num, .ficha .datos, .ficha h3, .ficha .tipo,
.ubic .met, .ubic .prob, .mv .lv, .mv-d, .mv-t, .ranura .ra-pp,
.r-destacado span, .sb-k, .sb-v, .zona .reg, .zona .cuenta,
table.balls th, table.balls .pct, table.balls .esp, .calc-mandos label {
  font-synthesis: none;
  letter-spacing: .04em;
}
.ficha h2 { font-family: var(--mono); font-synthesis: none; letter-spacing: 0; }
.ficha .num, .ubic .met, .r-destacado span, .sb-k { line-height: 1.5; }

/* ═════════════════ chips de juego: nombre + sprite de portada ═══════════════ */
.chips-juego { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chips-juego.ancho { margin-bottom: 16px; }
.chip-juego {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 99px;
  color: var(--txt-dim); cursor: pointer; padding: 5px 13px 5px 7px;
  font: inherit; font-size: 13px; line-height: 1;
  transition: border-color .15s, color .15s, background .15s;
}
.chip-juego img { width: 26px; height: 26px; image-rendering: pixelated; filter: grayscale(1); opacity: .55; transition: filter .18s, opacity .18s; }
.chip-juego:hover { border-color: var(--accent-2); color: var(--txt); }
.chip-juego:hover img { filter: none; opacity: 1; }
.chip-juego.on { background: var(--bg-3); border-color: var(--accent-2); color: var(--txt); }
.chip-juego.on img { filter: none; opacity: 1; }
/* el chip "Todos" no lleva sprite, así que se compensa el hueco */
.chip-juego:not(:has(img)) { padding-left: 13px; }

/* ── la ficha de zona lleva la portada de su juego ── */
.ficha .cabecera > img { width: clamp(64px, 6vw, 88px); height: clamp(64px, 6vw, 88px); }

/* ═══════════════════════ sprites de Ball en la calculadora ══════════════════ */
table.balls td.ball { display: flex; align-items: center; gap: 10px; }
.ico-ball { width: 26px; height: 26px; image-rendering: pixelated; flex: none; }

/* ═══════════════════════════ movimientos por MT/MO ══════════════════════════ */
.mv.mt .lv { color: var(--accent-2); }
.movs .oculta { display: none; }
.movs.abierta .oculta { display: grid; }
.ficha h3 .ico-juego { width: 22px; height: 22px; image-rendering: pixelated; vertical-align: -6px; margin-right: 4px; }
/* Sin ámbito de .ficha: si no, en el panel del mapa salía como texto pelado y
   se leía "Caña Vieja 2", como si el 2 fuera parte del nombre. */
.h3-num {
  display: inline-block; vertical-align: middle;
  margin-left: 8px; padding: 2px 7px; border-radius: 99px;
  background: var(--bg-3); color: var(--txt-dim); font-size: .9em; letter-spacing: 0;
}