/* Juegos — game hub: feature cards + leaderboard del hincha (capa sobre estadio.css) */

/* ---- feature cards: qué podés jugar ---- */
.gamegrid { display: grid; gap: 12px; margin-top: 18px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .gamegrid { grid-template-columns: repeat(3, 1fr); } }

.gamecard { --g: #ffc233; display: flex; flex-direction: column; gap: 9px; padding: 18px; min-height: 184px;
    border-radius: 18px; text-decoration: none; color: inherit; position: relative; overflow: hidden;
    background: linear-gradient(150deg, color-mix(in srgb, var(--g) 16%, #0e1f44), #0a1733 72%);
    /* OLA 1 — duraciones a tokens (.18s/.22s eran tres valores casi iguales escritos a mano) y
       fuera el fallback `var(--ease-out, ease)`: estadio.css SIEMPRE carga antes que este archivo
       en las 3 páginas que lo usan, así que la rama del fallback era código muerto. */
    border: 1px solid color-mix(in srgb, var(--g) 30%, transparent); transition: transform var(--mo) var(--ease-out), box-shadow var(--mo) var(--ease-out), border-color var(--mo) var(--ease-out); }
.gamecard::before { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--g) 22%, transparent), transparent 60%); }
.gamecard > * { position: relative; }
.gamecard--trivia { --g: #ffc233; } .gamecard--penca { --g: #28c281; } .gamecard--fantasy { --g: #3d7bff; }
@media (hover: hover) { .gamecard:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); border-color: color-mix(in srgb, var(--g) 60%, transparent); } }
.gamecard:active { transform: scale(.985); }

.gamecard__top { display: flex; align-items: center; justify-content: space-between; }
.gamecard__ic { width: 50px; height: 50px; flex: none; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.55rem; color: #0a1430; background: linear-gradient(180deg, color-mix(in srgb, var(--g) 82%, #fff), var(--g));
    box-shadow: 0 8px 18px color-mix(in srgb, var(--g) 40%, transparent); }
/* figura inline (SVG) por juego: no depende del icon-font de CDN → nunca queda el bloque vacío */
.gamecard__fig { width: 30px; height: 30px; display: block; }
.gamecard__tag { font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--g);
    background: color-mix(in srgb, var(--g) 16%, transparent); border: 1px solid color-mix(in srgb, var(--g) 34%, transparent); padding: 4px 9px; border-radius: 999px; }
.gamecard__t { font-family: var(--disp, Anton), sans-serif; font-weight: 400; letter-spacing: .01em; font-size: 1.5rem; line-height: 1; margin-top: 2px; }
.gamecard__d { font-size: var(--fs-body-sm); color: var(--tx-2); line-height: 1.35; flex: 1; }
.gamecard__d a { color: var(--gold-2); }
.gamecard__cta { width: 100%; justify-content: center; margin-top: auto; }
.gamecard__cta .bi { font-size: 1.15rem; }

/* ---- paneles de juego ---- */
/* reusa el keyframe rv8 (de estadio.css). El apagado por reduced-motion NO va acá: estadio.css
   lo lista junto al keyframe (.jpanel, .mcdet, .morefilt.open) para que el próximo reuso se vea
   al leer el keyframe. Duplicarlo acá volvería a partir la política en dos archivos. */
.jpanel { animation: rv8 var(--mo-slow) var(--ease-out); }
/* Mobile: al abrir un panel se hace scrollIntoView (juegos.js → enfocarPanel). scroll-margin-top
   descuenta el header sticky (.topstrip ≈ 53px) para que el título del panel no quede tapado. */
@media (max-width: 768px) {
    .jpanel { scroll-margin-top: 64px; }
}
/* El foco del panel es programático (tabindex=-1, solo para scroll + anuncio a11y; no entra al tab
   order). El anillo dorado global de :focus-visible (estadio.css `body.est :focus-visible`) marcaría
   TODA la card al abrirla y se leería como "seleccionado". Lo anulamos con la especificidad del
   proyecto (prefijo body.est, igual que las supresiones de estadio.css). No afecta teclado. */
body.est .jpanel:focus,
body.est .jpanel:focus-visible { outline: none; }
.jpanel__hd { display: flex; align-items: center; gap: 8px; font-family: var(--disp, Anton), sans-serif; font-size: 1.1rem; letter-spacing: .02em;
    color: var(--gold-2); margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line, rgba(255,255,255,.08)); }

/* ---- Penca: detalle de fecha (scoreboard por partido + Guardar todo) ---- */
.pdet__hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line, rgba(255, 255, 255, .08)); }
.pdet__t { font-family: var(--disp, Anton), sans-serif; font-size: 1.15rem; letter-spacing: .02em; color: var(--gold-2); }
.pdet__meta { display: flex; align-items: center; gap: 8px; font-size: var(--fs-body-sm); }
.pstate-chip { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; }
.pstate-chip.abierta { color: #6ef0a6; background: rgba(40, 194, 129, .15); border: 1px solid rgba(40, 194, 129, .4); }
.pstate-chip.cerrada { color: #ffce6a; background: rgba(255, 194, 51, .13); border: 1px solid rgba(255, 194, 51, .36); }
.pstate-chip.final { color: var(--tx-2); background: rgba(255, 255, 255, .06); border: 1px solid var(--line-2, rgba(255, 255, 255, .1)); }
.pdet__cierre { display: inline-flex; align-items: center; gap: 5px; color: var(--gold-2); font-weight: 700; }

.pmatch { background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2, rgba(255, 255, 255, .08)); border-radius: 14px; padding: 12px 13px; margin-bottom: 9px; }
/* slip vertical: local arriba, visita abajo. Cada equipo = fila completa (escudo + nombre + gol),
   así el nombre tiene todo el ancho y no se parte (en 390 un scoreboard horizontal con inputs
   de 44px táctiles no entra). */
.pmatch__teams { display: grid; gap: 7px; }
.pcrests { display: flex; gap: 6px; margin: 8px 0 2px; flex-wrap: wrap; }
.pcrests .pteam-av { width: 26px; height: 26px; }
.pteamline { display: flex; align-items: center; gap: 10px; }
.pteam-nm { flex: 1; min-width: 0; font-weight: 800; font-size: var(--fs-body); color: #eaf1ff; line-height: 1.15; overflow-wrap: break-word; }
.pteam-av { flex: none; width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--disp, Anton), sans-serif; font-size: var(--fs-body-sm); color: var(--gold-2); letter-spacing: .02em;
    background: linear-gradient(180deg, #16294f, #0c1b3c); border: 1px solid var(--line-2, rgba(255, 255, 255, .12)); overflow: hidden; }
.pteam-av--ol { padding: 0; border-color: rgba(255, 194, 51, .4); }
.pteam-av--ol img { width: 100%; height: 100%; object-fit: cover; }
/* escudo real de la biblioteca local (OlimarCrest); fallback a iniciales si el archivo falla */
.pteam-av--crest { padding: 3px; background: #fff; border-color: rgba(255, 255, 255, .18); }
.pteam-av--crest img { width: 100%; height: 100%; object-fit: contain; }
.pteam-av--crest .pteam-av__ini { display: none; }
.pteam-av--crest.no-img { background: linear-gradient(180deg, #16294f, #0c1b3c); }
.pteam-av--crest.no-img img { display: none; }
.pteam-av--crest.no-img .pteam-av__ini { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.pscore { flex: none; width: 52px; height: 44px; text-align: center; font-family: var(--disp, Anton), sans-serif; font-size: 1.2rem; color: #fff;
    background: #0a1733; border: 1px solid var(--line-2, rgba(255, 255, 255, .14)); border-radius: 10px; -moz-appearance: textfield; }
.pscore::-webkit-outer-spin-button, .pscore::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pscore:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 194, 51, .16); }
.pres { flex: none; width: 40px; text-align: center; font-family: var(--disp, Anton), sans-serif; font-size: 1.3rem; color: #fff; }
.pmatch__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; }
.pmatch__kick { font-size: .7rem; color: var(--tx-3); }
.pmatch__kick b { color: var(--tx-2); }
.pmatch__state { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--tx-3); }
.pmatch__state.is-saved { color: #6ef0a6; }
.pmatch__pts { font-family: var(--disp, Anton), sans-serif; font-size: var(--fs-body-strong); color: var(--tx-3); }
.pmatch__pts.is-hit { color: var(--gold); }

.psave { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap;
    margin-top: 12px; padding: 10px 0 4px; background: linear-gradient(180deg, transparent, #060f28 45%); }
.psave__btn { min-width: 190px; }
.psave__msg { font-size: var(--fs-body-sm); color: var(--tx-2); margin-right: auto; }
.psave__msg.is-ok { color: #6ef0a6; }
.psave__msg.is-err { color: #ff8a93; }

/* ---- leaderboard del hincha ---- */
.jrank { margin-top: 26px; }
.jrank__hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.jrank__t { font-family: var(--disp, Anton), sans-serif; font-weight: 400; font-size: 1.45rem; line-height: 1; display: flex; align-items: center; gap: 8px; }
.jrank__t .bi { color: var(--gold); font-size: 1.15rem; }
.jrank__sub { display: block; font-size: var(--fs-body-sm); color: var(--tx-3); margin-top: 4px; }
.jrank #segRank { flex: none; }

/* podio top-3 (2 · 1 · 3) */
.jpodium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: end; margin-bottom: 12px; }
/* 1–2 participantes: card(s) centradas con ancho fijo (no estiradas a toda la banda,
   que dejaba un hueco navy en desktop). Mismo patrón que el podio de Fantasy. */
.jpodium--few { display: flex; flex-wrap: wrap; justify-content: center; }
.jpodium--few .jpod { width: min(240px, 100%); }
.jpod { --c: #6f86b8; position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
    padding: 16px 10px 14px; border-radius: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 16%, #0e1f44), #0a1733);
    border: 1px solid color-mix(in srgb, var(--c) 34%, transparent); }
.jpod--1 { --c: #ffc233; padding-top: 24px; box-shadow: 0 14px 36px rgba(255, 194, 51, .16); }
.jpod--2 { --c: #cdd7ee; } .jpod--3 { --c: #e6915b; }
.jpod.me { outline: 2px solid var(--gold); outline-offset: 1px; }
.jpod__rk { font-family: var(--disp, Anton), sans-serif; font-size: 1.1rem; color: var(--c); line-height: 1; }
.jpod--1 .jpod__rk { font-size: 1.5rem; }
.jpod__av { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-family: var(--disp, Anton), sans-serif; font-size: 1.05rem; color: #0a1430;
    background: linear-gradient(180deg, color-mix(in srgb, var(--c) 85%, #fff), var(--c)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent); }
.jpod--1 .jpod__av { width: 62px; height: 62px; font-size: 1.25rem; }
.jpod__n { font-size: var(--fs-body-sm); font-weight: 700; line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.jpod__n b { display: block; font-size: .6rem; color: var(--gold-2); }
.jpod__v { font-family: var(--disp, Anton), sans-serif; font-size: 1.35rem; line-height: 1; color: #fff; }
.jpod__v small { font-size: .56rem; color: var(--tx-3); margin-left: 2px; }

/* lista del 4° en adelante (2 columnas en desktop para llenar el ancho) */
.jrows { display: grid; gap: 7px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .jrows { grid-template-columns: 1fr 1fr; gap: 7px 14px; } }
.jrow { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 11px;
    background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .06); }
.jrow.me { background: color-mix(in srgb, var(--gold) 12%, transparent); border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.jrow__rk { width: 22px; flex: none; text-align: center; font-weight: 800; color: var(--tx-3); font-variant-numeric: tabular-nums; }
.jrow__n { flex: 1; min-width: 0; font-weight: 700; font-size: var(--fs-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jrow__you { font-size: .58rem; font-weight: 800; color: #0a1430; background: var(--gold); padding: 1px 6px; border-radius: 999px; margin-left: 4px; vertical-align: middle; }
.jrow__bd { font-size: .68rem; color: var(--tx-3); flex: none; white-space: nowrap; }
.jrow__v { font-family: var(--disp, Anton), sans-serif; font-size: 1rem; color: #fff; min-width: 30px; text-align: right; }

/* nota de baja participación (1–2): invita a jugar en vez de dejar la banda solitaria */
.jrank__seed { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 13px 16px; border-radius: 14px;
    background: rgba(255, 255, 255, .03); border: 1px dashed color-mix(in srgb, var(--gold) 32%, transparent); }
.jrank__seed > .bi { font-size: 1.4rem; color: var(--gold); flex: none; }
.jrank__seed__tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.jrank__seed__tx b { font-size: var(--fs-body); color: #fff; }
.jrank__seed__tx span { font-size: var(--fs-body-sm); color: var(--tx-3); line-height: 1.35; }
.jrank__seed__cta { flex: none; }
@media (max-width: 460px) { .jrank__seed { flex-wrap: wrap; } .jrank__seed__cta { width: 100%; } }
/* estado "vas liderando": el seed pasa de invitación punteada a logro dorado sólido */
.jrank__seed--lead { border-style: solid; border-color: color-mix(in srgb, var(--gold) 45%, transparent);
    background: linear-gradient(110deg, color-mix(in srgb, var(--gold) 13%, transparent), transparent 72%); }
.jrank__seed--lead > .bi { color: var(--gold); }
.jrank__seed--lead .jrank__seed__tx b { color: var(--gold-2); }

/* Desktop, baja participación: medalla + invitación NO se estiran a toda la banda
   (quedaban como una medalla chica sobre una barra ancha, perdida). Las agrupamos en
   una columna centrada angosta para que lean como un bloque compuesto. */
@media (min-width: 760px) {
    #rankList .jpodium--few { max-width: 460px; margin-inline: auto; }
    #rankList .jpodium--few ~ .jrank__seed {
        max-width: 460px; margin-inline: auto;
        flex-direction: column; text-align: center; gap: 8px;
    }
    #rankList .jpodium--few ~ .jrank__seed .jrank__seed__tx { align-items: center; }
}

/* ============================================================
   HUB v2 (Fase 1) — poster comprimido + "Tu día en Olimar"
   El hero gigante pasa a franja fina y arriba de las cards va un panel de estado
   accionable (Trivia pendiente/hecha · Penca te faltan N · mi mes) + un CTA prioritario.
   Solo capa visual sobre datos ya disponibles; no toca reglas ni sheets.
   ============================================================ */

/* Fase 1B: el hub deja de duplicar módulos. El bloque "Tu día en Olimar" (filas + CTA)
   es el acceso a Trivia/Penca/Fantasy; las cards grandes de la .gamegrid ya no se muestran
   (se ocultan, no se borran, para no romper el contrato de juegos.js que escribe en
   #triviaResumen/#pencaResumen/#btnJugar/#btnPenca dentro de ellas). El ranking sube en el scroll. */
body.page-juegos .gamegrid { display: none; }

/* poster comprimido: sale el ghost/pasto/sub, el título baja a un renglón */
.poster--slim { padding-top: 8px; padding-bottom: 2px; }
.poster--slim::before,
.poster--slim .poster__lines,
.poster--slim .poster__ghost,
.poster--slim .poster__sub { display: none; }
.poster--slim .poster__title { font-size: clamp(2.1rem, 8vw, 2.7rem); line-height: 1; margin-top: 4px; }

/* hero panel */
.today { position: relative; margin-top: 14px; padding: 14px 14px 15px; border-radius: var(--r-lg, 22px); overflow: hidden;
    background: radial-gradient(90% 80% at 100% -10%, rgba(255,194,51,.16), transparent 55%), var(--card);
    border: 1px solid rgba(255,194,51,.32); box-shadow: var(--sh); }
.today__hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
/* tipografía: .kick8 (estadio.css) — era un clon a mano de .tile__k */
.today__lb { color: var(--tx-3); display: flex; align-items: center; gap: 7px; }
.today__lb i { color: var(--gold); font-size: var(--fs-body); }
.today__me { text-align: right; flex: none; min-width: 0; }
.mchip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-body-sm); font-weight: 700; color: var(--tx-2);
    background: rgba(22,41,92,.55); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; white-space: nowrap; }
.mchip i { color: var(--gold); }
.mchip b { color: var(--tx); font-family: var(--disp, Anton), sans-serif; font-weight: 400; font-size: var(--fs-body-strong); letter-spacing: .02em; }
.today__days { display: block; margin-top: 5px; font-size: .64rem; color: var(--tx-3); }
.today__days b { color: var(--tx-2); }

/* filas de estado por juego */
.today__rows { display: flex; flex-direction: column; gap: 8px; }
.trow { --g: var(--gold); display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; min-height: 52px;
    padding: 9px 11px; border-radius: 14px; background: rgba(255,255,255,.035); border: 1px solid var(--line);
    position: relative; overflow: hidden; cursor: pointer; color: inherit; font-family: inherit; -webkit-appearance: none; appearance: none;
    transition: transform var(--mo-fast) var(--ease-out), border-color var(--mo) var(--ease-out), background var(--mo) var(--ease-out); }
.trow::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--g); opacity: .9; }
.trow--trivia { --g: #ffc233; } .trow--penca { --g: #28c281; } .trow--fantasy { --g: #3d7bff; }
.trow:active { transform: scale(.99); }
@media (hover: hover) { .trow:hover { border-color: color-mix(in srgb, var(--g) 45%, transparent); background: rgba(255,255,255,.05); } }
.trow__ic { width: 38px; height: 38px; flex: none; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
    color: #0a1430; background: linear-gradient(180deg, color-mix(in srgb, var(--g) 82%, #fff), var(--g));
    box-shadow: 0 6px 14px color-mix(in srgb, var(--g) 40%, transparent); }
.trow__ic svg { width: 22px; height: 22px; display: block; }
.trow__bd { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.trow__t { font-weight: 800; font-size: var(--fs-body); color: var(--tx); line-height: 1.1; display: flex; align-items: center; gap: 7px; }
.trow__s { font-size: var(--fs-body-sm); color: var(--tx-2); line-height: 1.25; }
.trow__s .n { color: var(--gold-2); font-weight: 800; }
.trow__s .ok { color: var(--win-t, #8ef5bd); }
.trow__chev { flex: none; color: var(--tx-3); font-size: 1.15rem; }
/* punto de estado: solo visible (y pulsante) en la fila del pendiente prioritario */
.trow__dot { display: none; width: 8px; height: 8px; border-radius: 50%; background: var(--g); flex: none; }
/* 1.8s queda como literal a propósito: es un latido INFINITO de atención, no un gesto de UI, y la
   escala de tokens llega hasta --mo-bar (700ms). Meterlo ahí lo aceleraría 2,5× y lo volvería
   nervioso. Sí se saca el fallback muerto del easing. El apagado por reduced-motion es local
   (línea de abajo) porque `trowpulse` es un keyframe propio de esta página, no un reuso de rv8. */
.trow--prio .trow__dot { display: inline-block; animation: trowpulse 1.8s var(--ease-out) infinite; }
@keyframes trowpulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--g) 55%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.trow--done { background: rgba(52,217,123,.06); border-color: rgba(52,217,123,.22); }
#todayCta { width: 100%; margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .trow--prio .trow__dot { animation: none; } }

/* ============================================================
   DESKTOP — dos columnas (OLA 3 · P3.2)

   Diagnóstico: a 1440 Juegos era UNA columna estirada. Cada `.trow` medía ~1150px
   para ~250px de contenido, así que el chevron quedaba a 850px del texto que lo
   explica: el ojo perdía la relación entre la fila y su acción, y el ranking del
   hincha —el módulo con más densidad— tenía que scrollearse entero después de
   tres bloques casi vacíos.

   Solución: el mismo orden semántico de mobile, repartido en dos columnas.
     · izquierda  = QUÉ JUGAR — Tu día en Olimar (Trivia/Penca/Fantasy),
                    lo mejor de la fecha y el acceso al ranking de jugadores.
     · derecha    = DÓNDE ESTOY — el ranking del hincha, visible sin scrollear.
   El poster cruza las dos columnas y cierra el encabezado.

   Sin masonry ni motor de prioridad: el equilibrio de alturas sale de repartir el
   módulo LARGO (el leaderboard: podio + lista) contra los tres cortos. El truco
   estructural es `grid-row: 2 / span 8` en la columna derecha — sin eso el grid
   alinea por filas y el ranking arrancaría a la altura de la fila más alta de la
   izquierda, con una banda navy muerta arriba.

   El breakpoint es 1024, el mismo en el que estadio.css cambia al chrome de
   desktop (aparece el rail y `.arena` descuenta sus 86px). Antes era 1100 y eso
   dejaba una franja —1024 justo, la resolución de tablet horizontal y de netbook—
   con rail de desktop pero UNA columna de 874px: cada `.trow` medía 874px para
   ~250px de contenido, o sea 600px de vacío horizontal por fila.
   Medido a 1024: dos columnas de 438 y 412px. Por debajo de 1024 sigue en una
   columna a propósito: ahí el chrome es el mobile (dock, sin rail) y `.arena__in`
   mide 720px, así que dos columnas darían ~345px cada una — MENOS que el ancho de
   un teléfono de 390px, apretando el podio y las filas más que en mobile.
   Los sheets (Trivia/Penca) y el historial no se tocan: viven fuera de `.arena__in`.
   ============================================================ */
@media (min-width: 1024px) {
    body.page-juegos .arena__in {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, .94fr);
        column-gap: var(--sp-5);
        align-items: start;
    }
    body.page-juegos .arena__in > .poster { grid-column: 1 / -1; grid-row: 1; }
    /* todo lo demás cae en la izquierda salvo el leaderboard, que es el último hijo */
    body.page-juegos .arena__in > :not(.poster) { grid-column: 1; }
    body.page-juegos .arena__in > .jrank:last-child {
        grid-column: 2; grid-row: 2 / span 8;
        margin-top: 14px;   /* alinea su primera línea con la de "Tu día en Olimar" */
    }
    /* en una columna de ~490px la lista a 2 columnas trunca los nombres: el leaderboard
       vuelve a ser una lista vertical, que además es lo que equilibra las dos alturas. */
    body.page-juegos .arena__in > .jrank:last-child .jrows { grid-template-columns: minmax(0, 1fr); }
    /* el filtro Histórico/Mensual ya no cabe al lado del título en la columna angosta */
    body.page-juegos .arena__in > .jrank:last-child .jrank__hd { align-items: flex-start; }
}