/* ============ nico.css — menús de nuestra versión (MOD nico) ============
 * Se carga después de css/style.css y css/tokens-dex.css (dev.html). No toca style.css de upstream:
 * sólo vuelve a declarar. Dos bloques:
 *
 *   1. SIEMPRE (los dos estilos): arreglos que no son estética. Menús sin el de detrás, gacha de
 *      un móvil en horizontal sin recortar a los legendarios y con sus botones dentro de la pantalla,
 *      tiradas ×1 y ×10 sin desplazar, «Volver al menú» siempre a la vista y los lienzos del
 *      compañero y del premio al tamaño en que se ven (los crea js/ui/estilo.js).
 *   2. html.estilo-dex: la piel «Dex de Expedición» (cristal petróleo, carcasa roja, M PLUS Rounded 1c)
 *      en las 21 pantallas. Sólo consume las variables de css/tokens-dex.css. Criterio de Nico tras ver las
 *      maquetas (12-10-2026): COMPACTA (paneles con poco relleno, nada de cajas grandes que tapen el mundo),
 *      el banner del gacha con su fondo y su escena del original, y el logo, el menú principal, el inicio
 *      de sesión y «Pulsa para empezar» con la composición del original (sólo letra, bordes y colores).
 *
 * Pantallas bajas = alto < 520 px CSS (móvil en horizontal), como style.css.
 */

/* =====================================================================
 * 1. SIEMPRE
 * ===================================================================== */

/* Los submenús se abren sin el menú principal detrás (se veía a través del velo). */
body:has(.scr.dim:not(.hidden)) #scr-menu { visibility: hidden; }

/* Compañero del menú: en Clásico, el lienzo de upstream (260x200, sin cortes: estilo.js) con el escalado por CSS
   de upstream; en Dex, un lienzo que ya mide lo que se ve (bloque 2). */

/* Menú principal en una pantalla estrecha y alta (el Magic V6 abierto en vertical, 724x784; upstream lo pone en
   columna por debajo de 760 de ancho): la caja de opciones se encogía hasta enseñar 2 de las 8, la barra superior
   tapaba el logotipo y la línea de créditos se montaba en la caja de estadísticas. Ahora el logotipo empieza bajo
   la barra, el compañero va más pequeño, la lista en dos columnas (como upstream en un portátil bajo) y nada se
   encoge: si aun así no cabe, se desplaza la pantalla entera. Abajo queda sitio para los créditos (dos renglones). */
@media (max-width: 760px) and (min-height: 521px) {
  #scr-menu { justify-content: flex-start; }
  #scr-menu .menu-left { flex: 0 0 auto; padding: 60px 12px 2px; margin-top: auto; }   /* centrado si sobra alto */
  #scr-menu .menu-left .logo { margin-bottom: 4px; }
  #scr-menu .menu-left .logo .t1 { font-size: 34px; }
  #scr-menu .partner-card { margin-top: 2px; }
  #scr-menu .partner-card .nm { font-size: 20px; }
  #scr-menu #menu-partner { height: min(17vh, 140px); width: auto; }
  #scr-menu .menu-right { flex: 0 0 auto; overflow: visible; padding: 4px 12px 6px; gap: 6px; margin-bottom: auto; }
  #scr-menu .menu-right > :first-child { margin-top: 0; }
  #scr-menu .menu-right .box { padding: 8px 14px; }
  #scr-menu .menu-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; }
  #scr-menu .menu-item { font-size: 17px; padding: 4px 10px; }
  #scr-menu .menu-item.play { grid-column: span 2; font-size: 24px; }
  #scr-menu .menu-item small { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* Si además es algo más baja (el navegador con sus barras: 724x740 a 640), sin las explicaciones de cada opción (como
   upstream en una pantalla muy baja), menos la de «Jugar». */
@media (max-width: 760px) and (min-height: 521px) and (max-height: 779.98px) {
  #scr-menu .menu-item small { display: none; }
  #scr-menu .menu-item.play small { display: block; }
  /* Y el logotipo al lado del compañero (si no caben, uno debajo del otro): así, con la barra del navegador (724x740 a
     640), el menú cabe entero por encima de la línea de créditos sin desplazar. */
  #scr-menu .menu-left { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 18px; padding-top: 56px; }
  #scr-menu .menu-left .logo { margin-bottom: 0; }
}
/* Menú principal de Clásico en un portátil o plegable algo bajo (de 660 a 740 de alto y más de 760 de ancho: el Magic V6
   girado con la barra del navegador, 784x700 a 680): con la Guardería (9 opciones, 14-10-2026) la columna de upstream no
   cabía (27-47 px de más), así que pasa a las dos columnas que upstream usa por debajo de 660. En Dex manda su fila de
   botones (css/portada.css, reglas más específicas). */
@media (min-width: 760.02px) and (max-height: 739.98px) and (min-height: 661px) {
  #scr-menu .menu-right { width: min(500px, 52vw); }
  #scr-menu .menu-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; }
  #scr-menu .menu-item.play { grid-column: span 2; }
  #scr-menu .menu-item small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* El menú principal acaba por encima de la línea de créditos (fija abajo, de upstream; uno o dos renglones según el
   ancho): estilo.js mide lo que ocupa en --hueco-creditos. Con la barra del navegador en el plegable (724x740 a 640,
   784x700 a 680) la línea se montaba en la caja de estadísticas; ahora, si no cabe todo, el menú se desplaza por encima
   de ella. En pantallas bajas upstream oculta la línea (0). */
@media (min-height: 521px) { #scr-menu { bottom: var(--hueco-creditos, 0px); } }
/* Y la línea sólo se ve con el menú principal: en los submenús (.scr.dim) se montaba en el pie de las cajas que llegan
   abajo (el gacha, la colección, las mejoras o las misiones del plegable: 724x784, 784x724 y con la barra del
   navegador), también en Clásico. El aviso legal sigue a mano en Ajustes > Acerca de y en el inicio de sesión.
   visibility y no display: conserva su alto, así que --hueco-creditos no cambia por debajo. */
body:has(.scr.dim:not(.hidden)) .credits-line { visibility: hidden; }
/* Las cajas de la columna del menú no se encogen: si no caben, se desplaza la columna (como quiere upstream), en vez de
   recortar la lista de opciones dentro de su caja. */
#scr-menu .menu-right > .box { flex-shrink: 0; }

/* Barra superior en una pantalla estrecha (menos de 680 px de ancho, en vertical: desde que «Gira el móvil» no bloquea
   con aspecto 0,8 o más, o una ventana estrecha): compacta, en una fila (antes se partía en dos o se salía por la
   izquierda). Por debajo de 520 px, la cuenta se queda en su icono. Si aun así no cabe (unos 400 px), se parte en dos
   filas pegadas a la derecha, sin salirse; el logotipo del menú baja lo que haga falta. */
@media (max-width: 679.98px) {
  #topbar { top: 6px; right: 6px; left: 6px; gap: 4px; justify-content: flex-end; flex-wrap: wrap; }
  #topbar .pill { padding: 2px 8px; gap: 4px; font-size: 13px; white-space: nowrap; }
  #user-pill { max-width: 128px; overflow: hidden; }
  #user-pill > span { overflow: hidden; text-overflow: ellipsis; }
  #user-pill .sync { margin-left: 4px; }
  #topbar .btn.small { min-width: 32px; padding: 0 6px; }
}
@media (max-width: 519.98px) { #user-pill > span { display: none; } }
@media (max-width: 419.98px) and (min-height: 521px) { #scr-menu .menu-left { padding-top: 92px; } }

/* Premio del gacha: lienzos al tamaño en que se ven (estilo.js), nunca escalados por CSS. */
#pull-results .pcard canvas { width: auto; height: auto; display: block; margin: 0 auto; }
#pull-results .pcard.premio-1 { width: auto; min-width: 150px; }
#pull-results .pcard.premio-10 { width: 146px; padding: 6px 4px; }   /* 132 + relleno + borde: caben 5 por fila en un plegable (800 de ancho) */
/* ×10 en una pantalla alta de menos de 800 de ancho (el Magic V6 abierto, 724 o 784): cartas de 130 con el premio en
   120x110 (estilo.js), para que quepan cinco por fila y las diez en dos filas sin desplazar (con 146, cuatro por fila,
   tres filas y, con repetidos que desbloquean su evolución, había que desplazar). */
@media (max-width: 799.98px) and (min-height: 520px) {
  #pull-results { gap: 6px; }
  #pull-results .pcard.premio-10 { width: 130px; padding: 6px 2px; }
}
/* ×10 en una pantalla de 520 a 700 px de alto (el plegable con la barra del navegador: 724x640, 784x640; un portátil
   bajo): la evolución de un repetido sin su sprite de 40 px, como en las pantallas bajas (el nombre, siempre). Con él,
   las diez no cabían sin desplazar (20-29 px) y «Continuar» pisaba el pie de una carta. Y menos aire alrededor (el
   hueco de 18 px de upstream sale tres veces: también lo cuentan los dos márgenes que centran). */
@media (min-height: 520px) and (max-height: 699.98px) {
  #pull-results .pcard.premio-10 .tag canvas { display: none !important; }
  #pull-fx { gap: 10px; padding-top: 10px; padding-bottom: 10px; }
}

/* Gacha en pantallas de 760 a 920 px de ancho (un plegable desplegado): el banner a todo el ancho y las
   probabilidades debajo. Con la columna de 300 px al lado, los tres destacados (170 px cada uno) no
   cabían y la caja se desplazaba en horizontal (upstream sólo pasaba a una columna por debajo de 760). */
#scr-gacha .split > * { min-width: 0; }
@media (max-width: 920px) and (min-height: 520px) { #scr-gacha .split { grid-template-columns: 1fr; } }

/* Fin de partida: «Volver al menú» siempre a la vista, aunque las estadísticas no quepan. Las estadísticas
   conservan su alto (no se encogen) y la caja se desplaza por debajo del botón: así se llega a ver entero cada
   panel (encogidas, se salían por debajo del botón y algunos no se veían nunca). */
#scr-over .box { display: flex; flex-direction: column; max-height: calc(100dvh - 16px); }
#scr-over #over-stats { flex-shrink: 0; }
#btn-again { position: sticky; bottom: 0; z-index: 1; flex-shrink: 0; align-self: center; }

/* Los avisos de logro sólo informan: que no se queden con los toques de lo que tapan (abajo, en un móvil en
   horizontal, tapaban los botones de tirar del gacha durante 2,8 s). */
.ach-pop { pointer-events: none; }

/* El aviso flotante (toast) en partida (la barra superior sólo se oculta en partida: G.UI.chrome) va por encima de la
   fila de ranuras: a 30 px del borde tapaba unos segundos las ranuras de escritorio al empezar («¡Bulbasaur se une a
   ti!» del menú seguía en pantalla), también en Clásico. Clásico: la fila de upstream (ranuras de 54 px a 18 del borde,
   la activa 6 más arriba y los nombres encima) acaba a unos 94 px. Dex: en el bloque 2. */
.toast { pointer-events: none; }
body:has(#topbar.hidden) .toast { bottom: 104px; }

/* Avisos centrados (logros y mensajes): la animación «pop» de upstream cambia el transform y anulaba su
   translateX(-50%), así que entraban desplazados medio ancho a la derecha durante 0,2 s (PLAN.md). La misma
   animación, con el centrado dentro. */
.toast, .ach-pop { animation-name: pop-centrado; }
@keyframes pop-centrado { from { transform: translateX(-50%) scale(.94); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
/* Pantalla dividida (js/ui/pantalla-dividida.js; en los dos estilos, porque en esa mitad va el HUD Dex): el aviso de
   logro y el flotante, centrados en la mitad del juego (--div-centro) y no a caballo de la división; el de logro bajo la
   banda de arriba del HUD y el flotante por encima de lo que ocupa abajo (el panel de los mandos, si va debajo). */
html.pantalla-dividida .toast, html.pantalla-dividida .ach-pop { left: var(--div-centro, 50%); }
html.pantalla-dividida.hud-dex-logro .ach-pop { top: calc(var(--hud-dex-sup, 56px) + 8px); bottom: auto; }
html.pantalla-dividida.hud-dex-logro body:has(#topbar.hidden) .toast { bottom: calc(var(--hud-dex-inf, 0px) + 12px); }

/* Pestañas de región del gacha, si no caben (una tira que se desplaza en horizontal: en un móvil en horizontal o en
   una pantalla estrecha): la elegida se ve siempre entera (estilo.js la trae a la vista, fuera del degradado) y un
   degradado avisa en el lado por el que hay más pestañas (sólo en ése: clases mas-izq y mas-der). */
#scr-gacha #gacha-gens.mas-der { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
#scr-gacha #gacha-gens.mas-izq { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px); mask-image: linear-gradient(90deg, transparent, #000 36px); }
#scr-gacha #gacha-gens.mas-izq.mas-der { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); }

/* Gacha: el botón «Probabilidades» y su capa sólo existen en pantallas bajas. */
#gacha-prob { display: none; }
#gacha-prob-capa { position: fixed; z-index: 46; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); overflow-y: auto;
  box-shadow: 0 0 0 100vmax rgba(2, 8, 11, .72), 0 18px 50px rgba(0, 0, 0, .55); animation: none; }
#gacha-prob-capa { display: block; }
#gacha-prob-capa > .row.between { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; }
#gacha-prob-capa > .row.between > h3 { margin: 0; min-width: 0; }
#gacha-prob-capa > .row.between > .btn { flex-shrink: 0; white-space: nowrap; }
#gacha-prob-capa .rates { margin-top: 6px; }

@media (max-height: 519.98px) {
  /* --- Gacha en pantallas bajas: banner en dos columnas, destacados a su tamaño (170x190, sin
   *     márgenes negativos ni altura fija: eso los cortaba) y los tres botones a la vista. --- */
  body:has(#scr-gacha:not(.hidden)) #topbar { display: none; }   /* los tickets ya salen en el banner y en cada botón */
  #scr-gacha { padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); }
  #scr-gacha > .box:not(#gacha-prob-capa) { width: 100%; height: 100%; max-height: none; padding: 6px 10px; overflow-x: hidden; overflow-y: auto;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-rows: 44px minmax(0, 1fr); column-gap: 8px; row-gap: 6px; }
  #scr-gacha > .box:not(#gacha-prob-capa) > .row.between { display: contents; }
  #scr-gacha > .box:not(#gacha-prob-capa) > .row.between > h2 { grid-column: 1; grid-row: 1; align-self: center; margin: 0; }
  /* Pestañas de región: en la fila del título, sin barra de desplazamiento (el degradado, en el bloque de arriba). Con 1 px a
     cada lado: una pestaña de ancho fraccionario al final (la del Multiverso, con Dex) se recortaba menos de un píxel. */
  #scr-gacha #gacha-gens { grid-column: 2; grid-row: 1; margin: 0; padding: 0 1px; align-items: stretch; scrollbar-width: none; }
  #scr-gacha #gacha-gens::-webkit-scrollbar { display: none; }
  #scr-gacha #gacha-gens .gen-tab { min-height: 44px; justify-content: center; padding: 2px 10px; }
  #gacha-prob { display: inline-flex; align-items: center; grid-column: 3; grid-row: 1; min-height: 44px; }
  #scr-gacha [data-back] { grid-column: 4; grid-row: 1; min-height: 44px; }
  #scr-gacha .split { grid-column: 1 / -1; grid-row: 2; display: flex; flex-direction: column; min-height: 0; margin: 0 !important; gap: 0; }
  #scr-gacha .split > div:first-child { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(198px, 1fr) auto auto;
    column-gap: 12px; row-gap: 6px; flex: 1 0 auto; min-height: 0; }
  #scr-gacha #gacha-rates { display: none; }
  #banner { grid-column: 1 / -1; min-height: 198px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto 1fr;
    column-gap: 10px; padding: 4px 4px 4px 12px; }
  #banner > h3 { grid-column: 1; grid-row: 1; margin: 2px 0 0; font-size: 18px; }
  #banner-desc { grid-column: 1; grid-row: 2; margin: 2px 0 !important; font-size: 13px;
    display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  #gacha-owned { grid-column: 1; grid-row: 3; font-size: 13px; }
  #banner .feat { grid-column: 2; grid-row: 1 / -1; align-self: end; height: auto; margin: 0; gap: 0; overflow: visible; }
  #banner .feat canvas { width: auto; height: auto; }
  #scr-gacha .split > div:first-child > .row { grid-column: 1 / -1; margin: 0 !important; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  #scr-gacha .split > div:first-child > .row .btn { min-height: 44px; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #gacha-tickets, #gacha-pity { margin: 0 !important; font-size: 12px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #gacha-tickets { grid-column: 1; } #gacha-pity { grid-column: 2; text-align: right; }   /* en una sola línea */
  /* Si la pantalla es estrecha, los destacados se acercan (sus lienzos son transparentes por los lados). */
  @media (max-width: 760px) { #banner .feat canvas + canvas { margin-left: -46px; } }

  /* --- Tiradas: ×10 en dos filas (seis y cuatro) sin desplazar y «Continuar» en la esquina. --- */
  #pull-fx { justify-content: flex-start; padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 6px max(10px, env(safe-area-inset-left)); }
  #pull-fx::before, #pull-fx::after { display: none; }   /* el centrado vertical de upstream: aquí sólo restaba alto */
  #pull-close { position: fixed; right: max(8px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); min-height: 44px; }
  #pull-results .pcard.premio-10 { width: 110px; min-width: 0; padding: 4px; }
  /* Seis por fila en una rejilla (la segunda, de cuatro, a la izquierda): «Continuar», en la esquina de abajo a la
     derecha, nunca pisa una carta. Con menos de 690 px útiles (640x360, 667x375) no caben seis de 110: cartas de 96 con
     el premio en 88x76 (estilo.js, clase premio-10e); antes iban cinco y cinco y «Continuar» pisaba la última. */
  #pull-results:has(> .premio-10) { display: grid; grid-template-columns: repeat(auto-fill, var(--carta-x10, 110px)); justify-content: center;
    width: 100%; max-width: calc(6 * var(--carta-x10, 110px) + 30px); gap: 6px; }
  #pull-results:has(> .premio-10e) { --carta-x10: 96px; }
  #pull-results .pcard.premio-10e { width: 96px; padding: 4px 1px; }
  #pull-results .pcard.premio-10 .stars { line-height: 12px; height: 12px; }
  #pull-results .pcard.premio-10 .stars img { width: 12px; height: 12px; }
  #pull-results .pcard.premio-10 b { font-size: 12px; line-height: 1.2; max-width: 100%; margin: 0 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #pull-results .pcard.premio-10 .tag { font-size: 10px; line-height: 1.2; max-width: 100%; margin: 1px auto 0; overflow-wrap: anywhere; }
  /* La evolución desbloqueada de un repetido: en la ×10 de una pantalla baja, el texto entero, con el nombre de
     la evolución (hasta tres renglones), y sin su sprite de 40 px, que no cabe en dos filas; en la ×1 y en
     escritorio, también con su sprite. */
  #pull-results .pcard.premio-10 .tag canvas { display: none !important; }

  /* --- Gacha: los avisos de logro, arriba (abajo están los botones de tirar). --- */
  body:has(#scr-gacha:not(.hidden)) .ach-pop { top: max(6px, env(safe-area-inset-top)); bottom: auto; }

  /* --- Fin de partida --- */
  #scr-over .box { max-height: calc(100dvh - 12px); }

  /* --- Sala: «Empezar partida» siempre a la vista (las tarjetas de los cuatro jugadores llenan el alto). --- */
  #scr-lobby .box > .row:has(#lobby-start) { position: sticky; bottom: 0; z-index: 1; }
}

/* ---------- «Elige a tu compañero» sin el test de personalidad (G.MODS.sinTest, js/ui/elegir-companero.js) ----------
 * La pantalla de iniciales de upstream con la clase sin-test: título, rejilla y nuestra fila (Al azar, lo elegido y
 * «Elegir a X»); la fila de upstream («Volver», su texto y «Elegir»), escondida. La rejilla la reparte el JS (columnas
 * en --ec-cols, el lienzo de cada sprite y cómo van los tipos) con los altos de línea de aquí (--ec-nombre, --ec-tipo
 * y --ec-tipo2, dos líneas de píldoras). En una pantalla baja, letra un punto menor, menos hueco, y el título y
 * nuestra fila comparten la línea de arriba: el alto queda para la rejilla. Sin la clase (el «Elegir otro» del
 * test), la pantalla de upstream tal cual. */
#scr-starters.sin-test { padding: 12px max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left)); }
#scr-starters.sin-test > .box { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "titulo" "sub" "rejilla" "pie";
  width: min(1040px, 100%); max-height: 100%; }
#scr-starters.sin-test > .box > h2 { grid-area: titulo; margin: 0 0 2px; }
#scr-starters.sin-test > .box > .sub { grid-area: sub; margin: 0 0 8px; }
#scr-starters.sin-test > .box > .row { display: none; }
#scr-starters:not(.sin-test) .ec-pie { display: none; }
#scr-starters.sin-test #starter-grid { --ec-nombre: 16px; --ec-tipo: 15px; --ec-tipo2: 31px;
  grid-area: rejilla; grid-template-columns: repeat(var(--ec-cols, 6), minmax(0, 1fr)); gap: 5px;
  max-height: none; overflow: visible; padding: 3px; align-content: start; }
#scr-starters.sin-test #starter-grid.ec-desplaza { overflow-x: hidden; overflow-y: auto; }
#scr-starters.sin-test #starter-grid.ec-midiendo { grid-template-columns: minmax(0, 1fr); }
#scr-starters .ec-celda { appearance: none; font: inherit; color: inherit; margin: 0; min-width: 0; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 1px; padding: 3px 2px; }
#scr-starters .ec-celda canvas { display: block; flex: none; margin: 0; }
#scr-starters .ec-celda b { display: block; flex: none; max-width: 100%; height: var(--ec-nombre); font-size: 13px; line-height: var(--ec-nombre); }
#scr-starters .ec-tipos { display: flex; justify-content: center; max-width: 100%; min-height: var(--ec-tipo); }
#scr-starters .ec-txt { display: flex; flex-wrap: wrap; justify-content: center; gap: 1px 2px; }
#scr-starters .ec-tipos .type { margin: 0; padding: 1px 5px; font-size: 11px; line-height: 13px; border-radius: 4px; white-space: nowrap; }
#scr-starters .ec-emb { display: none; gap: 2px; }
#scr-starters .ec-emb img { display: block; width: 14px; height: 14px; }
#starter-grid.ec-emblema .ec-txt { display: none; }
#starter-grid.ec-emblema .ec-emb { display: flex; }
#starter-grid.ec-texto2 .ec-tipos { min-height: var(--ec-tipo2); align-items: flex-start; }
#starter-grid.ec-texto .ec-txt { flex-wrap: nowrap; }
#starter-grid.ec-midiendo .ec-celda b, #starter-grid.ec-midiendo .ec-txt, #starter-grid.ec-midiendo .ec-emb { display: inline-flex; flex-wrap: nowrap;
  width: max-content; max-width: none; }
#scr-starters .ec-celda:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
/* En una pantalla táctil, la celda tocada no se queda levantada (el :hover de upstream sigue tras el toque). */
@media (hover: none) { #scr-starters .ec-celda:hover { transform: none; } }
.ec-pie { grid-area: pie; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 10px; }
.ec-pie .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
#ec-info { flex: 1 1 160px; min-width: 0; color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ec-info .type { font-size: 11px; padding: 1px 6px; }
#ec-info .ec-mov { white-space: nowrap; }
#ec-info .ec-mov img { vertical-align: -3px; }
@media (max-height: 519.98px) {
  #scr-starters.sin-test > .box { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "titulo pie" "rejilla rejilla"; }
  #scr-starters.sin-test > .box > h2 { align-self: center; margin: 0 12px 6px 0; }
  #scr-starters.sin-test > .box > .sub { display: none; }
  /* Diez columnas en un móvil (tres filas: los Pokémon más grandes): celdas sin relleno a los lados, con borde de 1 px
     (la elegida, con el oro por dentro), 3 px entre ellas y el nombre en 10 px (Pixelify es ancha: «Charmander» en 11
     no cabe en una décima de 784; con Dex, 11); y la caja fuera de la muesca. */
  #scr-starters.sin-test { padding: 6px max(10px, env(safe-area-inset-right)) 6px max(10px, env(safe-area-inset-left)); }
  #scr-starters.sin-test #starter-grid { --ec-nombre: 14px; --ec-tipo: 14px; --ec-tipo2: 29px; gap: 3px; }
  #scr-starters .ec-celda { padding: 2px 0; border-width: 1px; }
  #scr-starters .ec-celda.on { box-shadow: inset 0 0 0 1px var(--gold); }
  #scr-starters .ec-celda b { font-size: 10px; }
  #scr-starters .ec-tipos .type { padding: 1px 4px; font-size: 10px; line-height: 12px; }
  .ec-pie { margin: 0 0 6px; flex-wrap: nowrap; }
}

/* Guardería (js/systems/guarderia.js), su pantalla (#scr-guarderia, desde el menú principal): cinco plazas en fila (en
   un móvil, se reparten el ancho) y el botón de dejar o sacar al Pokémon elegido. Y su fila en el fin de partida.
   Empieza bajo la barra superior, como las demás pantallas que la dejan a la vista (css/style.css). */
@media (min-height: 521px) { #scr-guarderia { padding-top: 66px; } }
.guarderia { margin: 0 0 10px; padding: 10px 12px; }
.guarderia-cab { gap: 10px; flex-wrap: wrap; align-items: baseline; }
.guarderia-cab small { color: var(--muted); font-size: 12px; }
.guarderia-plazas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 8px 0; }
.guarderia-plaza { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 76px; padding: 4px;
  border-radius: 8px; background: rgba(0,0,0,.25); border: 2px solid rgba(244,248,255,.14); cursor: pointer; text-align: center; min-width: 0; }
.guarderia-plaza.vacia { border-style: dashed; cursor: default; color: var(--muted); }
.guarderia-plaza.on { border-color: var(--gold); }
.guarderia-plaza canvas { width: 72px; height: 60px; image-rendering: pixelated; max-width: 100%; }
.guarderia-plaza small { font-size: 11px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guarderia-pie { gap: 10px; align-items: center; flex-wrap: wrap; }
.guarderia-pie small { color: var(--muted); font-size: 12px; }
.guarderia-fin div { font-size: 14px; }
.guarderia-fin div b { font-size: inherit; display: inline; color: var(--ink, #fff); }
.guarderia-fin .nota { font-size: 12px; color: var(--muted); }
@media (max-height: 519.98px) {
  .guarderia { padding: 8px 10px; }
  .guarderia-plaza { min-height: 60px; }
  .guarderia-plaza canvas { width: 54px; height: 45px; }
}

/* =====================================================================
 * 2. ESTILO DEX («Dex de Expedición»): sólo con html.estilo-dex
 * ===================================================================== */

html.estilo-dex body { background: var(--color-fondo); font-family: var(--font-datos); -webkit-font-smoothing: antialiased; }
html.estilo-dex .scr.dim { background: radial-gradient(circle at 50% 40%, rgba(6, 22, 28, .5), rgba(2, 8, 11, .86)); }

/* ---------- pantalla de cristal (antes, la caja PMD azul de doble borde) ---------- */
html.estilo-dex .box {
  background: linear-gradient(180deg, #132F3A, var(--color-cristal));
  border: 1px solid var(--color-bisel); border-radius: var(--radius-3);
  box-shadow: var(--shadow-panel), var(--shadow-panel-brillo);
  padding: var(--space-4); text-shadow: none;
}
/* Lengüeta roja colgando del borde superior. */
html.estilo-dex .box::before {
  content: ''; position: absolute; top: 0; left: var(--space-4); width: 36px; height: 4px; pointer-events: none;
  border-radius: 0 0 4px 4px; background: var(--color-rojo); box-shadow: 0 1px 0 var(--color-rojo-borde);
}
html.estilo-dex .box.center::before { left: 50%; transform: translateX(-50%); }
html.estilo-dex .box h1, html.estilo-dex .box h2, html.estilo-dex .box h3 { font-weight: 800; letter-spacing: 0; line-height: var(--lh-titulo); }
html.estilo-dex .box h2 { font-size: var(--fs-4); }
html.estilo-dex .box h3 { font-size: 16px; }
html.estilo-dex .sub, html.estilo-dex .note { color: var(--color-tinta-2); font-size: var(--fs-1); line-height: var(--lh-cuerpo); }
html.estilo-dex .sub { font-size: var(--fs-1); }
html.estilo-dex p { line-height: var(--lh-cuerpo); }
html.estilo-dex .gold { color: var(--color-oro); }
html.estilo-dex .err { color: var(--color-peligro-texto); font-size: var(--fs-1); }

/* ---------- botones ---------- */
html.estilo-dex .btn {
  font-family: var(--font-datos); font-weight: 800; font-size: 15px; color: var(--color-tinta);
  min-height: 38px; padding: 0 14px; line-height: 1.2;
  background: var(--color-cristal-2); border: 1px solid var(--color-borde-control); border-radius: var(--radius-2);
  box-shadow: var(--shadow-boton); text-shadow: none; filter: none;
  transition: background var(--dur-micro) var(--curva), border-color var(--dur-micro) var(--curva), transform .06s;
}
html.estilo-dex .btn:hover { filter: none; background: var(--color-cristal-3); border-color: var(--color-pantalla); }
html.estilo-dex .btn:active { transform: translateY(2px); box-shadow: var(--shadow-boton-pulsado); }
html.estilo-dex .btn:disabled { filter: saturate(.3) brightness(.75); cursor: not-allowed; transform: none; }
html.estilo-dex .btn:disabled:hover { background: var(--color-cristal-2); border-color: var(--color-borde-control); }
html.estilo-dex .btn.gold { background: var(--color-rojo); color: #fff; border-color: #F0566A; box-shadow: var(--shadow-boton-rojo); }
html.estilo-dex .btn.gold:hover, html.estilo-dex .btn.gold:focus-visible { background: var(--color-rojo-pulsado); border-color: #FFB3BE; }
html.estilo-dex .btn.gold:disabled:hover { background: var(--color-rojo); border-color: #F0566A; }
html.estilo-dex .btn.ghost { background: transparent; border-color: var(--color-borde-control); box-shadow: none; }
html.estilo-dex .btn.ghost:hover { background: var(--color-cristal-2); }
html.estilo-dex .btn.small { position: relative; min-height: 32px; padding: 0 var(--space-3); font-size: var(--fs-1); }
html.estilo-dex .btn.small::after { content: ''; position: absolute; inset: -6px -2px; }   /* zona de toque de 44 */
html.estilo-dex body.touch .btn:not(.small) { min-height: var(--tap-min); }
html.estilo-dex .btn.danger { background: #6E1424; border-color: var(--color-peligro-texto); color: #fff; }
html.estilo-dex .btn.danger:hover { background: #7E1A2C; }
html.estilo-dex .btn.google { background: #F4F8FA; color: #1F2A44; border-color: var(--color-borde-control); }
html.estilo-dex a.btn { display: inline-flex; align-items: center; justify-content: center; }
html.estilo-dex .row { gap: var(--space-3); }

/* Foco visible con Tab en todo lo que se pulsa. */
html.estilo-dex :is(.btn, .menu-item, .card, .cell, .pcard, .gen-tab, .chip, .tab, .answer, .seg button, .fav-slot, a, select, input, [tabindex]):focus-visible {
  outline: var(--focus-anillo); outline-offset: var(--focus-separacion);
}
html.estilo-dex .field:focus-visible { outline: var(--focus-anillo); outline-offset: 0; }

/* ---------- pestañas, chips, campos, paneles ---------- */
html.estilo-dex .gen-tab, html.estilo-dex .tab, html.estilo-dex .chip, html.estilo-dex .seg { text-shadow: none; }
html.estilo-dex .gen-tab {
  min-height: 38px; justify-content: center; padding: 2px var(--space-3);
  background: var(--color-cristal-2); border: 1px solid var(--color-borde-control); border-radius: var(--radius-2);
}
html.estilo-dex body.touch .gen-tab, html.estilo-dex body.touch .tab { min-height: var(--tap-min); }
html.estilo-dex .gen-tab b { font-size: var(--fs-1); font-weight: 800; }
html.estilo-dex .gen-tab small { font-size: 11px; color: var(--color-tinta-2); font-weight: 500; }
html.estilo-dex .gen-tab:hover { border-color: var(--color-pantalla); }
html.estilo-dex .gen-tab.on { background: var(--color-cristal-3); border-color: var(--color-borde-control); box-shadow: inset 0 -3px 0 var(--color-rojo); }
html.estilo-dex .gen-tab.on b { color: #fff; }
html.estilo-dex #set-tabs .gen-tab { font-weight: 800; font-size: 15px; }
html.estilo-dex #set-tabs .gen-tab.on { color: #fff; }
html.estilo-dex .tab {
  display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 var(--space-2); font-weight: 800;
  background: var(--color-cristal-2); border: 1px solid var(--color-borde-control); border-radius: var(--radius-2);
}
html.estilo-dex .tab.on { background: var(--color-cristal-3); border-color: var(--color-pantalla); box-shadow: inset 0 -3px 0 var(--color-rojo); }
html.estilo-dex .chip {
  position: relative; min-height: 32px; padding: 0 var(--space-3); font-size: var(--fs-1); font-weight: 800; color: var(--color-tinta);
  background: var(--color-cristal-2); border: 1px solid var(--color-borde-control); border-radius: var(--radius-pildora);
  display: inline-flex; align-items: center; gap: 4px;
}
html.estilo-dex .chip::after { content: ''; position: absolute; inset: -6px 0; }
html.estilo-dex .chip.on { border-color: var(--color-pantalla); color: var(--color-pantalla); background: var(--color-cristal-3); }
html.estilo-dex .estilo-chips .chip { min-height: 40px; min-width: 112px; justify-content: center; font-size: 15px; }
html.estilo-dex .seg { border: 1px solid var(--color-borde-control); border-radius: var(--radius-2); }
html.estilo-dex .seg button { background: var(--color-cristal-2); text-shadow: none; min-height: 36px; font-weight: 800; }
html.estilo-dex .seg button.on { background: var(--color-cristal-3); color: var(--color-pantalla); }
html.estilo-dex label { color: var(--color-tinta-2); font-size: var(--fs-1); font-weight: 800; }
html.estilo-dex .field { background: #0B1E26; color: var(--color-tinta); border: 1px solid var(--color-borde-control); border-radius: var(--radius-2); font-size: 16px; }
html.estilo-dex .field:focus { border-color: var(--color-pantalla); }
html.estilo-dex .panel { background: rgba(2, 8, 11, .22); border: 1px solid var(--color-bisel); border-radius: var(--radius-2); }
html.estilo-dex kbd { border: 1px solid var(--color-borde-control); border-bottom-width: 2px; background: rgba(2, 8, 11, .35);
  font-weight: 800; font-size: var(--fs-1); color: var(--color-tinta); border-radius: var(--radius-1); }
html.estilo-dex .type { border-radius: var(--radius-0); font-weight: 800; font-size: 11px; text-shadow: none; color: var(--color-tinta-oscura); }
/* Píldoras de tipo (G.UI.typeChips pone el color de upstream en línea): Fantasma, Dragón y Siniestro, con la letra
   clara (con la oscura daban 4,18, 3,95 y 2,90:1) y Fantasma con el fondo de G.MARCA.tipoPildora; todas ≥ 4,5:1. */
html.estilo-dex .type[style*="#7a6bc4" i] { background: var(--tipo-ghost) !important; color: #fff; }
html.estilo-dex .type[style*="#6b58ff" i], html.estilo-dex .type[style*="#6b5c52" i] { color: #fff; }
html.estilo-dex .progress { background: var(--color-carril); }
html.estilo-dex .progress i { background: var(--color-pantalla); }
html.estilo-dex input[type=range] { background: var(--color-carril); }
html.estilo-dex input[type=range]::-webkit-slider-thumb { background: var(--color-pantalla); border: 2px solid var(--color-tinta); }
html.estilo-dex input[type=range]::-moz-range-thumb { background: var(--color-pantalla); border: 2px solid var(--color-tinta); }
html.estilo-dex ::-webkit-scrollbar-thumb { background: rgba(90, 138, 150, .55); }

/* ---------- barra superior, avisos ---------- */
html.estilo-dex .pill {
  background: rgba(15, 38, 48, .94); border: 1px solid var(--color-bisel); box-shadow: 0 0 0 1px rgba(2, 8, 11, .6);
  text-shadow: none; font-weight: 800; color: var(--color-tinta);
}
html.estilo-dex .topbar .btn.small { min-width: 36px; padding: 0 var(--space-2); }
html.estilo-dex .credits-line { color: var(--color-tinta-2); text-shadow: none; background: rgba(15, 38, 48, .88); padding: 2px var(--space-2); border-radius: var(--radius-1); }
html.estilo-dex .toast, html.estilo-dex .ach-pop { background: rgba(15, 38, 48, .97); border: 1px solid var(--color-bisel); text-shadow: none; color: var(--color-tinta); }
html.estilo-dex .ach-pop { border-color: var(--color-bisel) !important; box-shadow: var(--shadow-panel), inset 4px 0 0 var(--color-oro); }
html.estilo-dex .ach-pop b { color: var(--color-oro); }
html.estilo-dex .ach-pop small { color: var(--color-tinta-2); }
/* En partida, el aviso de logro va bajo la banda de arriba del HUD Dex (a 64 px tapaba la ranura de avisos o la
   entrada del jefe): G.Estilo.colocarLogro() pone la clase y --hud-dex-sup (al salir cada aviso y al pintarse el
   HUD, sólo si cambian). En pantallas bajas
   (móvil en horizontal) sigue abajo, como en upstream. */
@media (min-height: 521px) {
  html.estilo-dex.hud-dex-logro .ach-pop { top: calc(var(--hud-dex-sup, 56px) + 8px); }
}
/* El aviso flotante (toast) en partida, por encima de lo que ocupa abajo el HUD Dex (--hud-dex-inf, de estilo.js: la
   fila de ranuras de escritorio); en compacto, con las ranuras a la derecha, por encima del aviso de logro (abajo en
   una pantalla baja). */
html.estilo-dex.hud-dex-logro body:has(#topbar.hidden) .toast { bottom: calc(var(--hud-dex-inf, 0px) + 12px); }
@media (max-height: 520px) { html.estilo-dex.hud-dex-logro body:has(#topbar.hidden) .toast { bottom: calc(var(--hud-dex-inf, 0px) + 64px); } }
/* Pantalla de carga, «Pulsa para empezar» e inicio de sesión: los del original (decisión de Nico). Sólo se
   conserva la letra pixel del título y se ponen a mano las sombras que el original saca de --shadow. */
html.estilo-dex .boot-in h1 { font-family: var(--font-logo); text-shadow: 3px 3px 0 #a55f00, 6px 6px 0 #071318; }
/* «Gira el móvil», opaco: al 94 %, la tarjeta de «Pulsa para empezar» (css/portada.css, más ancha y sin velo) asomaba
   detrás de la suya (el exterior del plegable en vertical, 360x807). */
html.estilo-dex #rotate { background: rgb(5, 14, 18); }

/* ---------- logotipos (menú, inicio de sesión y Acerca de): el nombre en pixel con su sombra y el lema, decisión de Nico ---------- */
html.estilo-dex .logo .t1, html.estilo-dex .logo .t2, html.estilo-dex .about-logo { font-family: var(--font-logo); }
html.estilo-dex .logo .t1 { text-shadow: 3px 3px 0 #a55f00, 6px 6px 0 #071318; }
html.estilo-dex .logo .t2 { text-shadow: 2px 2px 0 #071318; }
html.estilo-dex .login-tag { color: var(--color-tinta-2); }
html.estilo-dex .legal-link, html.estilo-dex .login-links a { color: var(--color-tinta-2); }
html.estilo-dex .legal-link:hover { color: var(--color-tinta); }
html.estilo-dex .about-logo { text-shadow: 2px 2px 0 #a55f00, 4px 4px 0 #071318; }

/* ---------- menú principal ---------- */
/* El compañero: su lienzo ya mide lo que se ve (320x240; 208x150 en pantallas bajas y en la columna estrecha). */
html.estilo-dex #scr-menu #menu-partner { width: auto; height: auto; }
html.estilo-dex .stage {
  background: radial-gradient(ellipse at 50% 88%, rgba(98, 227, 221, .18), transparent 60%), linear-gradient(180deg, rgba(18, 52, 64, .9), rgba(11, 30, 38, .92));
  border: 3px solid var(--stage-c, var(--color-bisel)); border-radius: var(--radius-3);
  box-shadow: 0 0 0 3px #071318, 0 10px 26px rgba(2, 8, 11, .4);
}
html.estilo-dex .stage.shiny { box-shadow: 0 0 0 3px #071318, 0 0 22px rgba(154, 230, 255, .45); }
html.estilo-dex .partner-card .nm { font-weight: 800; text-shadow: 2px 2px 0 #071318; }
html.estilo-dex .partner-card .lv { text-shadow: 1px 1px 0 #071318; }
html.estilo-dex #scr-menu .menu-right { background: linear-gradient(90deg, transparent, rgba(6, 18, 24, .7) 30%); }
html.estilo-dex .menu-right .box { padding: var(--space-3); }
html.estilo-dex .menu-item { font-weight: 800; font-size: 19px; text-shadow: none; color: var(--color-tinta); border-radius: var(--radius-2); letter-spacing: 0; }
html.estilo-dex .menu-item small { font-weight: 500; font-size: var(--fs-1); color: var(--color-tinta-2); }
html.estilo-dex .menu-item small.gold { color: var(--color-oro); }
html.estilo-dex .menu-item:hover, html.estilo-dex .menu-item:focus-visible { background: var(--color-cristal-2); }
html.estilo-dex .menu-item.play { font-size: 25px; color: var(--color-oro); }
/* Con menos de 780 de alto, las opciones con las cifras de upstream (17 y 11 px): con la barra del navegador en el plegable
   girado (784x700 a 670) la lista, con sus explicaciones, no cabía por encima de la línea de créditos. */
@media (min-height: 521px) and (max-height: 779.98px) {
  html.estilo-dex .menu-right .box { padding: 8px 12px; }
  html.estilo-dex .menu-item { font-size: 17px; }
  html.estilo-dex .menu-item small { font-size: 12px; }
  html.estilo-dex .menu-item.play { font-size: 22px; }
}
html.estilo-dex #menu-stats { color: var(--color-tinta-2) !important; font-size: var(--fs-1) !important; }
html.estilo-dex #menu-stats b { color: var(--color-tinta) !important; font-weight: 800; }

/* ---------- colección, iniciales, mejoras (rejillas de Pokémon) ---------- */
html.estilo-dex .cell { background: rgba(2, 8, 11, .25); border: 1px solid rgba(59, 100, 112, .8); border-radius: var(--radius-2); }
html.estilo-dex .cell:hover { border-color: var(--color-pantalla); background: rgba(98, 227, 221, .06); }
html.estilo-dex .cell.on { border: 2px solid var(--color-oro); background: rgba(255, 203, 61, .10); }
html.estilo-dex .cell.locked:hover { border-color: rgba(59, 100, 112, .8); background: rgba(2, 8, 11, .25); }
html.estilo-dex .cell .no { color: var(--color-tinta-2); font-size: 11px; font-weight: 500; }
html.estilo-dex .cell b { font-weight: 800; }
/* «Elige a tu compañero» sin el test: la elegida con el oro en dos px sin mover nada (el borde sigue en 1) y el anillo de foco del Dex. */
html.estilo-dex #scr-starters .ec-celda.on { border-width: 1px; box-shadow: inset 0 0 0 1px var(--color-oro); }
html.estilo-dex #scr-starters .ec-celda:focus-visible { outline: var(--focus-anillo); outline-offset: var(--focus-separacion); }
html.estilo-dex #scr-starters .ec-tipos .type { border-radius: var(--radius-0); }
html.estilo-dex #ec-info { color: var(--color-tinta-2); font-size: var(--fs-1); }
@media (max-height: 519.98px) { html.estilo-dex #scr-starters .ec-celda b { font-size: 11px; } }
html.estilo-dex .stat .bar, html.estilo-dex .mission .bar, html.estilo-dex .ach .bar { background: var(--color-carril); }
html.estilo-dex .stat .bar i { background: var(--color-pantalla); }
html.estilo-dex .mission .bar i, html.estilo-dex .ach .bar i { background: var(--color-oro); }
html.estilo-dex .pips i { background: var(--color-carril); }
html.estilo-dex .pips i.on { background: var(--color-oro); }
html.estilo-dex .upg-item { border-radius: var(--radius-2); }
html.estilo-dex select.field { font-family: var(--font-datos); }

/* ---------- test de personalidad ---------- */
html.estilo-dex .q { font-weight: 800; font-size: var(--fs-4); }
html.estilo-dex .answer {
  text-shadow: none; font-size: var(--fs-2); min-height: var(--tap-min); color: var(--color-tinta);
  background: var(--color-cristal-2); border: 1px solid var(--color-borde-control); border-radius: var(--radius-2); padding-left: 20px;
}
html.estilo-dex .answer::before { display: none; }
html.estilo-dex .answer:hover { background: var(--color-cristal-3); border-color: var(--color-pantalla); }
html.estilo-dex .result .trait { color: var(--color-pantalla); font-weight: 800; }

/* ---------- gacha: el banner conserva el fondo y la escena del original (decisión de Nico); sólo cambian el marco y la letra ---------- */
html.estilo-dex .banner { border: 1px solid var(--color-bisel); border-radius: var(--radius-3); text-shadow: 2px 2px 0 rgba(2, 8, 11, .75); }
html.estilo-dex .banner h3 { font-weight: 800; letter-spacing: 0; }
html.estilo-dex .rates div { border-bottom: 1px solid rgba(169, 195, 201, .14); }
html.estilo-dex .rates h3 { font-weight: 800; }
html.estilo-dex #pull-fx { background: radial-gradient(circle at 50% 45%, #15404C, var(--color-fondo) 70%); }
html.estilo-dex .pcard {
  background: linear-gradient(180deg, var(--color-cristal-2), var(--color-cristal));
  border: 2px solid var(--rc, var(--color-bisel)); border-radius: var(--radius-3); text-shadow: none;
  box-shadow: 0 0 0 1px rgba(2, 8, 11, .7), 0 0 18px color-mix(in srgb, var(--rc, #fff) 40%, transparent);
}
html.estilo-dex .pcard b { font-weight: 800; }
html.estilo-dex .pcard .tag { color: var(--color-tinta-2); }
html.estilo-dex .pcard .new { color: var(--color-oro); font-weight: 800; }

/* ---------- cartas de subida de nivel, objeto y vínculo: entradas del Dex ---------- */
html.estilo-dex .cards { gap: var(--space-2); }
html.estilo-dex .card {
  position: relative; overflow: hidden; gap: var(--space-3); min-height: 56px;
  background: var(--color-cristal-2); border: 1px solid var(--color-borde-control); border-radius: var(--radius-2);
  padding: 10px 14px 10px 22px;   /* 8 de franja + 14 */
  transition: background var(--dur-micro) var(--curva), border-color var(--dur-micro) var(--curva), transform .06s;
}
/* Franja de tipo de 8 px (de Estadio de la Liga) con el color de su tipo (--tc, js/ui/estilo.js). */
html.estilo-dex .card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--tc, var(--color-bisel)); }
html.estilo-dex .card.tc-filo::before { box-shadow: inset -1px 0 0 var(--tipo-filo); }
html.estilo-dex .card:hover { background: var(--color-cristal-3); border-color: var(--color-pantalla); transform: none; }
html.estilo-dex .card:active { transform: translateY(1px); }
/* Icono tintado del tipo. */
html.estilo-dex .card .ico {
  flex: 0 0 44px; height: 44px; border-radius: var(--radius-2);
  background: color-mix(in srgb, var(--tc, var(--color-bisel)) 34%, var(--color-cristal)) !important;
  border: 1px solid color-mix(in srgb, var(--tc, var(--color-bisel)) 60%, transparent);
}
html.estilo-dex .card .nm { font-weight: 800; font-size: 16px; }
html.estilo-dex .card .ds { color: var(--color-tinta-2); font-size: 14px; font-weight: 500; }
html.estilo-dex .card .key { color: var(--color-tinta); border: 1px solid var(--color-borde-control); border-bottom-width: 2px;
  background: rgba(2, 8, 11, .35); font-weight: 800; min-width: 28px; height: 28px; display: grid; place-items: center; padding: 0; }
html.estilo-dex .tag-chip { border-radius: var(--radius-0); font-weight: 800; font-size: 11px; padding: 2px 8px; text-shadow: none; color: var(--color-tinta-oscura); }
html.estilo-dex .card.evo { --tc: var(--color-oro); border-color: rgba(255, 203, 61, .7); background: linear-gradient(90deg, rgba(255, 203, 61, .16), var(--color-cristal-2) 60%); }
html.estilo-dex .card.evo .nm { color: var(--color-oro); }
html.estilo-dex .card.bond { --tc: var(--color-vinculo); border-color: rgba(255, 138, 216, .7); background: linear-gradient(90deg, rgba(255, 138, 216, .14), var(--color-cristal-2) 60%); }
html.estilo-dex .card.bond .nm, html.estilo-dex .bond-title { color: var(--color-vinculo); }
html.estilo-dex #item-cards .card { --tc: var(--color-oro); }
html.estilo-dex .cards.done .card.picked { border: 2px solid var(--color-oro); opacity: 1; }
html.estilo-dex .cards.done .card { opacity: .55; }
html.estilo-dex #scr-levelup h2, html.estilo-dex #scr-item h2, html.estilo-dex #scr-bond h2, html.estilo-dex #scr-over h2, html.estilo-dex #scr-pause h2 { font-size: var(--fs-4); }
html.estilo-dex #lvl-num { color: var(--color-pantalla); }
html.estilo-dex #lvl-wait { color: var(--color-oro); }
html.estilo-dex #scr-levelup .box, html.estilo-dex #scr-item .box { width: min(520px, 100%); }

/* ---------- pausa y fin de partida ---------- */
html.estilo-dex #btn-quit { color: var(--color-peligro-texto); }
html.estilo-dex #btn-again { align-self: stretch; width: 100%; min-height: 48px; }
html.estilo-dex .stats > div { background: var(--color-cristal-2); border: 1px solid var(--color-bisel); border-radius: var(--radius-2); }
html.estilo-dex .stats > div > span:first-child { text-transform: none; color: var(--color-tinta-2); font-size: var(--fs-1); font-weight: 800; }
html.estilo-dex .stats b { font-weight: 800; font-size: 20px; }
html.estilo-dex .caught > span { text-transform: none; color: var(--color-tinta-2); }

/* ---------- ajustes y aviso legal ---------- */
html.estilo-dex .set-h { color: var(--color-tinta); font-weight: 800; font-size: 16px; }
html.estilo-dex .set-row { border-bottom: 1px solid rgba(169, 195, 201, .14); min-height: 40px; }
html.estilo-dex .set-row small { color: var(--color-tinta-2); font-size: var(--fs-1); }
html.estilo-dex .set-row .switch { min-width: 58px; }
html.estilo-dex #scr-settings .sub, html.estilo-dex .legal p, html.estilo-dex .credits { max-width: 65ch; }
html.estilo-dex .keys span { color: var(--color-tinta-2); }
html.estilo-dex .credits { color: var(--color-tinta-2); }
html.estilo-dex .credits b { color: var(--color-tinta); }
html.estilo-dex .legal h3 { color: var(--color-tinta); }
html.estilo-dex .legal a, html.estilo-dex .boot-in a { color: var(--color-lente-brillo); }
html.estilo-dex .sync { box-shadow: 0 0 0 2px #071318; }

/* ---------- amigos, sala, invitación, ranking ---------- */
html.estilo-dex .fr-row, html.estilo-dex .rk-row, html.estilo-dex .mission, html.estilo-dex .ach, html.estilo-dex .leg-cell, html.estilo-dex .rk-me, html.estilo-dex .prof-marks div {
  background: rgba(2, 8, 11, .25); border: 1px solid rgba(59, 100, 112, .7); border-radius: var(--radius-2);
}
html.estilo-dex .fr-row b, html.estilo-dex .rk-row .who b { font-weight: 800; }
html.estilo-dex .fr-row .st, html.estilo-dex .rk-row .who small, html.estilo-dex .mission small, html.estilo-dex .ach small, html.estilo-dex .leg-cell small,
html.estilo-dex .prof-marks span, html.estilo-dex .prof-medals small, html.estilo-dex .lob-card small { color: var(--color-tinta-2); }
html.estilo-dex .dot.on { background: var(--color-ps-alto); box-shadow: 0 0 6px var(--color-ps-alto); }
html.estilo-dex .dot.play { background: var(--color-oro); }
html.estilo-dex .lob-card { background: rgba(2, 8, 11, .25); border-width: 2px; border-radius: var(--radius-3); }
html.estilo-dex .lob-card b { font-weight: 800; }
html.estilo-dex .lob-card.empty { border-color: rgba(90, 138, 150, .45); color: var(--color-tinta-2); }
html.estilo-dex .rk-row.mine { border-color: var(--color-oro); background: rgba(255, 203, 61, .1); }
html.estilo-dex .rk-row .pos, html.estilo-dex .rk-row .time { font-weight: 800; }
html.estilo-dex .rk-row .time { color: var(--color-tinta); }
html.estilo-dex .mission.ready { border-color: var(--color-oro); background: rgba(255, 203, 61, .1); }
html.estilo-dex .ach.ok, html.estilo-dex .leg-cell.ok { border-color: rgba(255, 203, 61, .6); }
html.estilo-dex .fav-slot { background: rgba(2, 8, 11, .28); border: 2px dashed rgba(90, 138, 150, .55); border-radius: var(--radius-3); }
html.estilo-dex .fav-slots.view .fav-slot { border-style: solid; border-color: rgba(255, 203, 61, .55); }
html.estilo-dex .prof-title { color: var(--color-oro); border: 1px solid var(--color-oro); border-radius: var(--radius-2); font-weight: 800; }
html.estilo-dex a.plink { border-bottom-color: rgba(169, 195, 201, .5); }
html.estilo-dex a.plink:hover { color: var(--color-pantalla); }

/* ---------- pantallas bajas (móvil en horizontal) ---------- */
@media (max-height: 519.98px) {
  html.estilo-dex .box { padding: var(--space-2) var(--space-3); }
  html.estilo-dex .box::before { left: var(--space-3); width: 36px; height: 4px; }
  html.estilo-dex .box.center::before { left: 50%; }
  html.estilo-dex .btn { min-height: 40px; padding: 0 var(--space-3); }
  html.estilo-dex .btn.small { min-height: 32px; padding: 0 var(--space-2); }
  html.estilo-dex .sub { margin-bottom: var(--space-2); }
  html.estilo-dex .note { margin-top: var(--space-2); }
  html.estilo-dex .menu-right .box { padding: 6px 8px; }
  html.estilo-dex .menu-item { font-size: 15px; padding: 4px 6px; }
  html.estilo-dex .menu-item small { font-size: 11px; }
  html.estilo-dex .menu-item.play { font-size: 20px; }
  html.estilo-dex .box h2 { font-size: 18px; }
  html.estilo-dex .card { min-height: 52px; padding: 6px 10px 6px 18px; }
  html.estilo-dex .card .ico { flex-basis: 38px; height: 38px; }
  html.estilo-dex .card .nm { font-size: 15px; }
  html.estilo-dex .card .ds { font-size: var(--fs-1); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  html.estilo-dex #scr-levelup h2, html.estilo-dex #scr-item h2, html.estilo-dex #scr-bond h2, html.estilo-dex #scr-over h2, html.estilo-dex #scr-pause h2 { font-size: 18px; }
  html.estilo-dex .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 6px 0 10px; }
  html.estilo-dex .stats b { font-size: 16px; }
  html.estilo-dex #scr-pause .row .btn { flex: 1 1 0; }
  html.estilo-dex .lob-card { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html.estilo-dex .btn, html.estilo-dex .menu-item, html.estilo-dex .card { transition: none; }
}