/* ═══════════════════════════════════════════════════════════════════
   PANEL PRINCIPAL · la portada de la consola
   ───────────────────────────────────────────────────────────────────
   El panel es lo único que se ve con los doce juegos juntos: si aquí
   son doce rectángulos iguales, los juegos parecen el mismo juego
   aunque dentro no lo sean. Así que cada ficha ADELANTA su escena:
   la misma luz, el mismo material y el mismo color que se encontrará
   al entrar. Entrar deja de ser un salto.

   Cómo se consigue sin tocar el JS de la página:
     · pintarCatalogo() ya escribe --jc-a (acento) y --jc-f (fondo)
       en línea. Eso se respeta.
     · La TEXTURA y la POSICIÓN DE LA LUZ se añaden aquí por
       [data-id], que el JS también escribe. Como --jc-tex y --jc-luz
       no van en línea, estas reglas ganan sin pelear.
   Cada textura y cada foco están copiados del .escena-fondo del juego
   correspondiente: el ladrillo de la torre es el ladrillo de la torre.

   Especificidad: todo cuelga de #j-menu / #catalogo (id) para ganarle
   al <style> de juegos.html sin depender del orden de carga.

   Nada prohibido: sin degradado sobre texto, sin resplandor de color,
   sin backdrop-filter, sin bordes dorados translúcidos. Relieve por
   sombra negra y por línea, como en las escenas.
   ═══════════════════════════════════════════════════════════════════ */

#j-menu{
  --oro:#f0b429;
  --plata:#b9bcc6;
  --bronce:#b07a48;
  --chapa:#101014;
}

/* El catálogo puede ser largo y se desplaza (body.modo-menu #lienzo).
   Aire abajo para que la última fila no muera contra el borde. */
#j-menu{padding-bottom:var(--e5)}


/* ═══ 1 · EL PUESTO DE MANDO ═══════════════════════════════════════
   Placa y frente conviven en una fila cuando hay sitio. Es flex, no
   grid, a propósito: sin sesión el frente se oculta y la placa ocupa
   el ancho entero sola, en vez de dejar media columna vacía. */
#j-menu .mando{
  display:flex;flex-wrap:wrap;gap:var(--e3);
  margin-bottom:var(--e5);
}
#j-menu .ficha-j  {flex:1 1 360px;margin-bottom:0}
#j-menu .tablero-g{flex:1 1 290px;margin-bottom:0}


/* ── LA PLACA ──────────────────────────────────────────────────────
   Chapa remachada: una pieza sólida con canto biselado, no una
   tarjeta translúcida. El saldo es lo más grande de la pantalla. */
#j-menu .ficha-j{
  position:relative;overflow:hidden;
  display:grid;gap:var(--e3);padding:var(--e4);
  grid-template-columns:1fr auto;
  grid-template-areas:'id eco' 'stats stats' 'nota nota';
  border-radius:var(--r3);
  background:
    repeating-linear-gradient(94deg,
      rgba(255,255,255,.012) 0 1px, transparent 1px 76px),
    linear-gradient(180deg,#16161b 0%,#111116 62%,#0d0d11 100%);
  border:1px solid var(--linea);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -2px 6px rgba(0,0,0,.55),
    0 14px 30px rgba(0,0,0,.45);
}
/* remaches del canto superior */
#j-menu .ficha-j::before,
#j-menu .ficha-j::after{
  content:'';position:absolute;top:9px;width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle at 32% 30%, #56566a, #24242c 70%);
  pointer-events:none;
}
#j-menu .ficha-j::before{left:9px}
#j-menu .ficha-j::after {right:9px}

#j-menu .fj-id{grid-area:id;display:flex;align-items:center;gap:var(--e3);min-width:0}
#j-menu .fj-quien{min-width:0}

/* la chapa de identidad: disco troquelado */
#j-menu .fj-av{
  width:46px;height:46px;flex:none;border-radius:var(--r3);
  display:grid;place-items:center;
  font-family:var(--mono);font-size:16px;font-weight:600;letter-spacing:.04em;
  color:var(--tx);
  background:linear-gradient(180deg,#26262f,#16161c);
  border:1px solid var(--linea-fuerte);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), inset 0 -2px 5px rgba(0,0,0,.6);
}
#j-menu .fj-nom{
  font-size:15px;font-weight:600;letter-spacing:.06em;color:var(--tx);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#j-menu .fj-sub{
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;color:var(--tx3);
  margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

#j-menu .fj-eco{grid-area:eco;display:flex;align-items:center;gap:var(--e3)}
#j-menu .fj-saldo{text-align:right}
#j-menu .fj-cif{
  font-family:var(--mono);font-size:30px;font-weight:600;line-height:1;
  color:var(--tx);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
#j-menu .fj-etq{
  font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--tx3);
  margin-top:4px}

/* el regalo: una pestaña que se pulsa, con tope físico */
#j-menu .fj-bono{
  height:40px;padding:0 var(--e3);border-radius:var(--r2);cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;white-space:nowrap;
  background:var(--f2);border:1px solid var(--linea);color:var(--tx3);
  font-variant-numeric:tabular-nums;
  transition:background .14s,border-color .14s,color .14s,transform .1s}
#j-menu .fj-bono.listo{
  background:var(--ok);border-color:var(--ok);color:#04140a;font-weight:700;
  box-shadow:0 2px 0 #14803b}
#j-menu .fj-bono.listo:active{transform:translateY(2px);box-shadow:0 0 0 #14803b}
#j-menu .fj-bono:disabled{cursor:default}

/* los tres contadores, grabados en la chapa */
#j-menu .fj-stats{
  grid-area:stats;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--linea);border:1px solid var(--linea);border-radius:var(--r2);
  overflow:hidden}
#j-menu .fj-st{
  background:#0c0c10;padding:var(--e3) var(--e2);text-align:center;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.6)}
#j-menu .fj-st .v{
  font-family:var(--mono);font-size:17px;font-weight:600;color:var(--tx);
  font-variant-numeric:tabular-nums;line-height:1}
#j-menu .fj-st .l{
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--tx3);
  margin-top:5px}

/* ── modo sin sesión ──────────────────────────────────────────────
   La página ya oculta guerra, marcador y regalo. Aquí se explica el
   hueco en vez de dejarlo mudo. */
#j-menu .fj-nota{
  grid-area:nota;display:none;
  font-size:11.5px;line-height:1.55;color:var(--tx2);
  padding:var(--e3);border-radius:var(--r2);
  background:#0c0c10;border:1px solid var(--linea);border-left:2px solid var(--fr)}
body.sin-sesion #j-menu .fj-nota{display:block}
body.sin-sesion #j-menu .salon-t h2::after{content:' · MODO LOCAL'}


/* ═══ 2 · EL FRENTE ════════════════════════════════════════════════
   No es una barra de progreso: es una cuerda con una marca en el
   centro. Se lee de un vistazo quién ha ganado terreno. */
#j-menu .tablero-g{
  display:flex;flex-direction:column;justify-content:center;gap:var(--e3);
  padding:var(--e3) var(--e4) var(--e4);
  border-radius:var(--r3);
  background:
    repeating-linear-gradient(93deg,
      rgba(255,255,255,.014) 0 1px, transparent 1px 9px,
      rgba(0,0,0,.14) 9px 10px, transparent 10px 34px),
    linear-gradient(180deg,#17130e 0%,#121016 58%,#0d0d11 100%);
  border:1px solid var(--linea);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 14px 30px rgba(0,0,0,.4);
}
#j-menu .tg-cab{display:flex;justify-content:space-between;align-items:baseline;gap:var(--e2)}
#j-menu .tg-t{
  font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.16em;
  color:var(--tx2)}
#j-menu .tg-temp{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--tx3);
  font-variant-numeric:tabular-nums}

#j-menu .tg-campo{position:relative}
#j-menu .tg-barra{
  display:flex;height:14px;border-radius:3px;overflow:hidden;
  background:#08080a;border:1px solid #000;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.9)}
/* Cada bando lleva su trama: aunque no se distinga el color (o no se
   vea bien), el rayado dice de quién es cada mitad. */
#j-menu .tg-lado{transition:width .9s var(--sal)}
#j-menu .tg-luz{
  background:
    repeating-linear-gradient(58deg,
      rgba(255,255,255,.22) 0 1px, transparent 1px 7px),
    #e8d9a8}
#j-menu .tg-furia{
  margin-left:auto;
  background:
    repeating-linear-gradient(-58deg,
      rgba(0,0,0,.24) 0 1px, transparent 1px 7px),
    #b8443a}
/* la marca del centro: el punto de equilibrio */
#j-menu .tg-eje{
  position:absolute;left:50%;top:-4px;bottom:-4px;width:1px;
  transform:translateX(-.5px);
  background:var(--linea-fuerte);pointer-events:none}
#j-menu .tg-eje::before,
#j-menu .tg-eje::after{
  content:'';position:absolute;left:50%;transform:translateX(-50%);
  border-left:3px solid transparent;border-right:3px solid transparent}
#j-menu .tg-eje::before{top:-1px;border-top:4px solid var(--linea-fuerte)}
#j-menu .tg-eje::after {bottom:-1px;border-bottom:4px solid var(--linea-fuerte)}

#j-menu .tg-pie{
  display:flex;justify-content:space-between;align-items:center;gap:var(--e2)}
#j-menu .tg-bando{
  display:flex;align-items:baseline;gap:6px;
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--tx3)}
#j-menu .tg-bando em{font-style:normal}
#j-menu .tg-p{
  font-family:var(--mono);font-size:15px;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:0}
#j-menu .tg-bando.luz   .tg-p{color:#e8d9a8}
#j-menu .tg-bando.furia .tg-p{color:#d4574c}

#j-menu .tg-ir{
  padding:7px var(--e3);border-radius:var(--r2);cursor:pointer;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;white-space:nowrap;
  background:#1b1a17;border:1px solid var(--linea-fuerte);color:var(--tx2);
  transition:background .14s,border-color .14s,color .14s}
#j-menu .tg-ir:hover{background:#26241e;border-color:#5a5140;color:var(--tx)}
#j-menu .tg-ir:active{transform:translateY(1px)}


/* ═══ 3 · EL SALÓN ═════════════════════════════════════════════════ */
#j-menu .salon-t{
  display:flex;align-items:baseline;gap:var(--e3);flex-wrap:wrap;
  padding-bottom:var(--e3);margin-bottom:var(--e4);
  border-bottom:1px solid var(--linea)}
#j-menu .salon-t h2{
  font-size:19px;font-weight:600;letter-spacing:.2em;color:var(--tx);line-height:1}
#j-menu .salon-t span{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:var(--tx3)}

/* familias numeradas: pasillo 01, 02, 03. El contador va aquí y no en
   el JS; el marcador queda fuera de #catalogo y no se numera. */
#j-menu #catalogo{counter-reset:fam}
#j-menu #catalogo .familia{margin-bottom:var(--e5)}
#j-menu #catalogo .familia:last-child{margin-bottom:var(--e4)}
#j-menu #catalogo .familia-t{
  display:flex;align-items:center;gap:var(--e3);margin-bottom:var(--e3)}
#j-menu #catalogo .familia-t span{
  display:flex;align-items:center;gap:var(--e2);
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--tx2);
  text-transform:uppercase;white-space:nowrap}
#j-menu #catalogo .familia-t span::before{
  counter-increment:fam;content:counter(fam,decimal-leading-zero);
  font-size:9px;letter-spacing:.06em;color:var(--tx3);
  padding:2px 5px;border-radius:3px;
  background:#0d0d11;border:1px solid var(--linea);
  font-variant-numeric:tabular-nums}
#j-menu #catalogo .familia-t::after{content:'';flex:1;height:1px;background:var(--linea)}

#j-menu .rejilla-j{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));
  gap:var(--e3)}


/* ── LA FICHA = LA FACHADA DEL LOCAL ───────────────────────────────
   Marquesina en el color del juego (sombra interior sólida, no borde
   translúcido), material de fondo copiado de la escena y luz en el
   mismo sitio donde la tendrá dentro. */
#j-menu #catalogo .jc{
  position:relative;overflow:hidden;cursor:pointer;
  display:flex;flex-direction:column;gap:6px;
  padding:var(--e3);min-height:164px;
  border-radius:var(--r3);
  background-color:#0a0c10;
  background-image:var(--jc-tex,none),var(--jc-f);
  border:1px solid var(--linea);
  box-shadow:
    inset 0 2px 0 var(--jc-a),                 /* la marquesina */
    inset 0 -1px 0 rgba(255,255,255,.03),
    0 10px 22px rgba(0,0,0,.42);
  transition:transform .2s var(--sal), border-color .2s var(--sal),
             box-shadow .2s var(--sal)}

/* la luz del local, donde la escena la pone de verdad */
#j-menu #catalogo .jc::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 88% 66% at var(--jc-luz,82% 12%),
             var(--jc-a),transparent 64%);
  opacity:.13;transition:opacity .25s var(--sal)}

#j-menu #catalogo .jc:hover{
  transform:translateY(-3px);border-color:var(--jc-a);
  box-shadow:
    inset 0 3px 0 var(--jc-a),
    inset 0 -1px 0 rgba(255,255,255,.04),
    0 16px 30px rgba(0,0,0,.55)}
#j-menu #catalogo .jc:hover::before{opacity:.26}
#j-menu #catalogo .jc:active{transform:translateY(-1px) scale(.99)}

/* si algún día la ficha es enfocable, el foco se ve. Contorno sólido. */
#j-menu #catalogo .jc:focus-visible{
  outline:2px solid var(--jc-a);outline-offset:2px}

/* la placa del emblema, atornillada arriba a la izquierda */
#j-menu #catalogo .jc .jic{
  position:relative;width:34px;height:34px;flex:none;border-radius:var(--r2);
  display:grid;place-items:center;font-size:18px;line-height:1;
  background:rgba(0,0,0,.42);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
#j-menu #catalogo .jc .jn{
  position:relative;margin-top:auto;
  font-size:12.5px;font-weight:600;letter-spacing:.07em;color:#fff;line-height:1.25}
#j-menu #catalogo .jc .jd{
  position:relative;font-size:11px;line-height:1.42;color:rgba(255,255,255,.62)}
/* el cartel del pago: chapita clavada abajo, con su línea de color */
#j-menu #catalogo .jc .jp{
  position:relative;align-self:flex-start;margin-top:4px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
  color:var(--jc-a);padding:3px 7px;border-radius:3px;
  background:rgba(0,0,0,.55);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), inset 2px 0 0 var(--jc-a)}


/* ── EL MATERIAL DE CADA LOCAL ─────────────────────────────────────
   Uno por uno, tomado del .escena-fondo de su juego. Con los ojos
   entrecerrados ya se distingue el ladrillo del agua y de la madera. */

/* RIESGO Y NERVIO */
#j-menu #catalogo .jc[data-id="multiplicador"]{         /* estratosfera */
  --jc-luz:50% 104%;
  --jc-tex:
    linear-gradient(180deg,transparent 0 74%, rgba(150,190,210,.05) 74% 74.7%, transparent 75%),
    linear-gradient(180deg,transparent 0 84%, rgba(150,190,210,.04) 84% 84.6%, transparent 85%),
    linear-gradient(180deg,transparent 0 92%, rgba(150,190,210,.035) 92% 92.5%, transparent 93%)}
#j-menu #catalogo .jc[data-id="minas"]{                 /* tierra removida */
  --jc-luz:30% 22%;
  --jc-tex:
    repeating-linear-gradient(101deg, rgba(255,225,180,.028) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(-8deg, rgba(0,0,0,.22) 0 2px, transparent 2px 15px)}
#j-menu #catalogo .jc[data-id="torre"]{                 /* sillería del pozo */
  --jc-luz:50% -8%;
  --jc-tex:
    repeating-linear-gradient(0deg, rgba(190,205,235,.03) 0 1px, transparent 1px 19px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.26) 0 2px, transparent 2px 52px)}
#j-menu #catalogo .jc[data-id="pesca"]{                 /* niebla sobre el agua */
  --jc-luz:50% 28%;
  --jc-tex:
    linear-gradient(180deg,transparent 34%, rgba(150,190,205,.07) 52%, transparent 70%),
    repeating-linear-gradient(0deg, rgba(190,225,240,.018) 0 1px, transparent 1px 11px)}

/* MESA DE CASINO */
#j-menu #catalogo .jc[data-id="casino:ruleta"]{         /* toldo de feria */
  --jc-luz:50% 14%;
  --jc-tex:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.05) 0 14px, transparent 14px 28px),
    linear-gradient(180deg, rgba(255,255,255,.03) 0 26px, transparent 26px)}
#j-menu #catalogo .jc[data-id="casino:tragamonedas"]{   /* tablones del taller */
  --jc-luz:50% 6%;
  --jc-tex:repeating-linear-gradient(90deg,
    rgba(255,255,255,.028) 0 2px, transparent 2px 34px)}
#j-menu #catalogo .jc[data-id="casino:blackjack"]{      /* fieltro del tapete */
  --jc-luz:50% 24%;
  --jc-tex:
    repeating-linear-gradient(45deg, rgba(255,255,255,.016) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.14) 0 1px, transparent 1px 4px)}
#j-menu #catalogo .jc[data-id="casino:dados"]{          /* muro del foso */
  --jc-luz:18% 4%;
  --jc-tex:
    repeating-linear-gradient(0deg, rgba(0,0,0,.42) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.34) 0 1px, transparent 1px 66px)}
#j-menu #catalogo .jc[data-id="casino:guerra"]{         /* sillería del umbral */
  --jc-luz:50% 22%;
  --jc-tex:
    repeating-linear-gradient(0deg, rgba(255,255,255,.026) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.28) 0 1px, transparent 1px 58px)}
#j-menu #catalogo .jc[data-id="casino:rasca"]{          /* linóleo del mostrador */
  --jc-luz:74% 2%;
  --jc-tex:
    repeating-linear-gradient(38deg, rgba(255,255,255,.022) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, transparent 0 62%, rgba(0,0,0,.28) 62% 64%, transparent 64%)}

/* COMUNIDAD */
#j-menu #catalogo .jc[data-id="guerra"]{                /* mesa de guerra, vetas */
  --jc-luz:50% 24%;
  --jc-tex:repeating-linear-gradient(93deg,
    rgba(255,255,255,.022) 0 1px, transparent 1px 9px,
    rgba(0,0,0,.2) 9px 10px, transparent 10px 34px)}
#j-menu #catalogo .jc[data-id="tienda"]{                /* cajones del archivo */
  --jc-luz:64% 6%;
  --jc-tex:
    repeating-linear-gradient(180deg,
      rgba(255,255,255,.03) 0 1px, transparent 1px 28px,
      rgba(0,0,0,.28) 28px 30px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.3) 0 2px, transparent 2px 84px)}


/* ═══ 4 · EL MARCADOR ══════════════════════════════════════════════
   Libro de cuentas: posición, nombre y cifra alineada a la derecha.
   Podio por color de canto, no por adorno. */
#j-menu .tabla-r{margin-top:0}
#j-menu .tabla-r .familia-t{
  display:flex;align-items:center;gap:var(--e3);margin-bottom:var(--e3)}
#j-menu .tabla-r .familia-t span{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--tx2);
  white-space:nowrap}
#j-menu .tabla-r .familia-t::after{content:'';flex:1;height:1px;background:var(--linea)}

#j-menu .tr-lista{
  border:1px solid var(--linea);border-radius:var(--r2);overflow:hidden;
  background:#0d0d11}
#j-menu .tr-f{
  display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:var(--e3);
  padding:var(--e2) var(--e3);
  background:var(--f1);border-bottom:1px solid var(--linea);
  border-left:2px solid transparent}
#j-menu .tr-f:last-child{border-bottom:none}
#j-menu .tr-pos{
  font-family:var(--mono);font-size:11px;font-weight:600;text-align:center;
  color:var(--tx3);font-variant-numeric:tabular-nums;
  padding:3px 0;border-radius:3px;background:#0a0a0d}
#j-menu .tr-f:nth-child(1) .tr-pos{color:var(--oro)}
#j-menu .tr-f:nth-child(2) .tr-pos{color:var(--plata)}
#j-menu .tr-f:nth-child(3) .tr-pos{color:var(--bronce)}
#j-menu .tr-f:nth-child(1){border-left-color:var(--oro)}
#j-menu .tr-f:nth-child(2){border-left-color:var(--plata)}
#j-menu .tr-f:nth-child(3){border-left-color:var(--bronce)}
#j-menu .tr-nom{
  font-size:12px;color:var(--tx2);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
#j-menu .tr-f.yo{background:var(--f2)}
#j-menu .tr-f.yo .tr-nom{color:var(--tx);font-weight:600}
#j-menu .tr-mon{
  font-family:var(--mono);font-size:12.5px;color:var(--tx);
  font-variant-numeric:tabular-nums}
#j-menu .tr-vacio{
  padding:var(--e4);text-align:center;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.06em;color:var(--tx3);background:var(--f1)}


/* ═══ ENTRADA ══════════════════════════════════════════════════════
   La portada se monta por capas: primero el puesto de mando, luego
   el salón. Las fichas ya entran escalonadas (--d lo pone el JS). */
@keyframes panelEntra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
body.modo-menu #j-menu .mando  {animation:panelEntra .42s var(--sal) both}
body.modo-menu #j-menu .salon-t{animation:panelEntra .42s var(--sal) 80ms both}
body.modo-menu #j-menu .tabla-r{animation:panelEntra .42s var(--sal) 160ms both}
/* La página anima .ficha-j y .tablero-g por separado; ahora entran
   juntos dentro de .mando. Sin esto se desvanecen dos veces. */
body.modo-menu #j-menu .ficha-j,
body.modo-menu #j-menu .tablero-g{animation:none}


/* ═══ TAMAÑOS ══════════════════════════════════════════════════════ */

/* estrecho: todo en una columna, la placa se despliega */
@media(max-width:560px){
  #j-menu .ficha-j{grid-template-columns:1fr;grid-template-areas:'id' 'eco' 'stats' 'nota'}
  #j-menu .fj-eco{justify-content:space-between}
  #j-menu .fj-saldo{text-align:left}
  #j-menu .tg-pie{flex-wrap:wrap;justify-content:center;row-gap:var(--e2)}
  #j-menu .tg-ir{order:3;width:100%;text-align:center}
  #j-menu .rejilla-j{grid-template-columns:repeat(auto-fill,minmax(152px,1fr))}
  #j-menu #catalogo .jc{min-height:146px}
}

/* la ventana baja de Discord: se recorta el aire, no el tamaño de las
   cifras. El catálogo se desplaza, así que lo que importa es que el
   puesto de mando quepa de una vez. */
@media(max-height:820px){
  #j-menu .mando{margin-bottom:var(--e4)}
  #j-menu .ficha-j{padding:var(--e3);gap:var(--e2)}
  #j-menu .fj-av{width:40px;height:40px;font-size:14px}
  #j-menu .fj-cif{font-size:25px}
  #j-menu .fj-st{padding:var(--e2)}
  #j-menu .salon-t{padding-bottom:var(--e2);margin-bottom:var(--e3)}
  #j-menu .salon-t h2{font-size:16px}
  #j-menu #catalogo .familia{margin-bottom:var(--e4)}
  #j-menu .rejilla-j{grid-template-columns:repeat(auto-fill,minmax(164px,1fr));gap:var(--e2)}
  #j-menu #catalogo .jc{min-height:142px;padding:var(--e2)}
  #j-menu #catalogo .jc .jic{width:29px;height:29px;font-size:16px}
}

@media(max-height:600px){
  #j-menu .fj-cif{font-size:22px}
  #j-menu #catalogo .jc{min-height:128px}
  #j-menu #catalogo .jc .jd{display:none}   /* el nombre y el pago bastan */
}

/* Quien pide menos movimiento no se traga el vuelo de doce fichas.
   La página ya anula animaciones; aquí se quita también el relieve
   que se mueve al pasar el puntero. */
@media(prefers-reduced-motion:reduce){
  #j-menu #catalogo .jc:hover{transform:none}
  #j-menu #catalogo .jc:active{transform:none}
}