/* Couleurs · mgx.css : section « plus de jeux » de l'app (24 oct. 2026), sous la grille des univers.
   Vignettes vivantes = export figé des cartes de /jeux/ (pv-static.js, règles .pv* comprises), classements = podium.css.
   Téléphone d'abord (390 px) : une grande carte (le tri), puis 2 colonnes ; tablette 3 colonnes ; ordinateur 4.
   Mouvement : transform et opacity seulement ; boucles des vignettes en pause hors écran ; rien en mouvement réduit. */
.mgx{ margin:34px 0 8px; }
.mgx__title{ display:flex; align-items:center; gap:10px; margin:0; font-size:var(--cg-fs-h2, 30px); font-weight:500; letter-spacing:var(--cg-track-tight, -.04em); }
.mgx__title .jx-n{ display:inline-grid; place-items:center; min-width:30px; height:26px; padding:0 8px; border-radius:var(--cg-r-pill, 999px);
  background:var(--cg-raised-3, #262626); font-size:14px; font-weight:600; letter-spacing:0; color:var(--cg-fg, #FAFAFA); }
.mgx__lead{ margin:6px 0 16px; max-width:40ch; font-size:15px; color:var(--cg-fg-2, #A6A6A6); text-wrap:pretty; }

.mgx__hero, .mgx__card{ position:relative; isolation:isolate; display:flex; flex-direction:column; overflow:hidden; color:var(--cg-fg, #FAFAFA);
  text-decoration:none; -webkit-tap-highlight-color:transparent; border-radius:26px;
  background:radial-gradient(130% 85% at 50% 0%, color-mix(in oklab, var(--acc) 26%, transparent), transparent 68%), var(--cg-raised, #141414);
  box-shadow:inset 0 0 0 1px var(--cg-line, rgba(255,255,255,.08)), inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .16s ease-out; }
.mgx__hero:active, .mgx__card:active{ transform:scale(.97); }
@media (hover:hover) and (pointer:fine){
  .mgx__hero, .mgx__card{ transition:transform .34s var(--cg-ease-out, cubic-bezier(.22,1,.36,1)); }
  .mgx__hero:hover, .mgx__card:hover{ transform:translateY(-3px); }
  .mgx__hero:active, .mgx__card:active{ transform:scale(.97); transition-duration:.16s; }
}
.mgx__hero:focus-visible, .mgx__card:focus-visible{ outline:2px solid var(--cg-fg, #FAFAFA); outline-offset:3px; }

/* la vignette : boîte fixe (pas de saut quand elle arrive), la scène est centrée et posée au bas */
.mgx__art{ display:flex; align-items:center; justify-content:center; height:132px; overflow:hidden; pointer-events:none; }
.mgx__art .pv{ flex:none; }
.mgx__hero .mgx__art{ height:210px; }

.mgx__hero{ margin-bottom:10px; }
.mgx__body{ display:flex; flex-direction:column; gap:4px; padding:4px 18px 18px; }
.mgx__k{ font-size:12px; font-weight:600; color:var(--acc); text-transform:lowercase; }
.mgx__hero .mgx__name{ font-size:26px; font-weight:500; letter-spacing:-.04em; }
.mgx__meta{ font-size:15px; color:var(--cg-fg-2, #A6A6A6); text-wrap:pretty; }
.mgx__go{ align-self:flex-start; display:inline-flex; align-items:center; gap:8px; margin-top:10px; min-height:44px; padding:0 18px; border-radius:var(--cg-r-pill, 999px);
  background:#FFFFFF; color:#0A0A0A; font-size:15px; font-weight:600; }
.mgx__go svg{ width:18px; height:18px; fill:currentColor; transition:transform .34s var(--cg-ease-out, ease); }
@media (hover:hover) and (pointer:fine){ .mgx__hero:hover .mgx__go svg{ transform:translateX(3px); } }

.mgx__grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.mgx__card{ height:100%; padding-bottom:14px; }
.mgx__card .mgx__name{ margin:2px 14px 0; font-size:16px; font-weight:600; letter-spacing:-.02em; line-height:1.2; }
.mgx__tag{ margin:3px 14px 0; font-size:13px; color:var(--cg-fg-2, #A6A6A6); line-height:1.3; }
.mgx__name::before{ content:""; display:inline-block; width:8px; height:8px; margin-right:7px; border-radius:2.5px; vertical-align:.12em; background:var(--acc); }

.mgx__foot{ display:grid; grid-template-columns:1fr; gap:8px; margin-top:14px; }
.mgx__foot .cg-btn{ width:100%; }
.mgx__foot svg{ width:18px; height:18px; fill:currentColor; }

@media (min-width:600px){
  .mgx__grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .mgx__foot{ grid-template-columns:1fr 1fr; }
  .mgx__hero{ display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr); align-items:center; }
  .mgx__body{ padding:18px 22px 18px 0; }
}
@media (min-width:960px){ .mgx__grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }

/* arrivée à l'écran, une seule fois : les cartes montent en cascade (40 ms) */
@media (prefers-reduced-motion:no-preference){
  .mgx.is-pre .mgx__grid > li{ opacity:0; transform:translateY(12px); }
  .mgx__grid > li{ transition:opacity .4s ease-out calc(var(--i, 0) * 40ms), transform .5s var(--cg-ease-out, cubic-bezier(.22,1,.36,1)) calc(var(--i, 0) * 40ms); }
}

/* entrée du classement (écran classement de l'app) */
.lg-mg{ display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:12px; width:100%; margin:12px 0 4px; padding:12px 14px;
  border:0; border-radius:var(--cg-r-lg, 22px); background:var(--cg-raised, #141414); box-shadow:inset 0 0 0 1px var(--cg-line, rgba(255,255,255,.08));
  color:var(--cg-fg, #FAFAFA); font:inherit; text-align:left; cursor:pointer; transition:transform .16s ease-out; -webkit-tap-highlight-color:transparent; }
.lg-mg:active{ transform:scale(.98); }
.lg-mg__ico{ display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--cg-gold, #FFD23F); color:#0A0A0A; }
.lg-mg__ico svg, .lg-mg > svg{ width:20px; height:20px; fill:currentColor; }
.lg-mg__t{ display:block; font-size:16px; font-weight:600; }
.lg-mg__p{ display:block; font-size:13px; color:var(--cg-fg-2, #A6A6A6); }

/* feuille « classement des mini-jeux » : les podiums en liste */
.mgx-sheet .pd-grid{ grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:1fr; overflow:visible; margin:14px 0 0; padding:0; }
.mgx-sheet .pdh__lead{ margin:0 0 14px; }
.mgx-sheet .pd-card{ background:var(--cg-raised-2, #1C1C1C); }
.mgx-sheet__acts{ display:flex; justify-content:flex-end; margin-top:16px; }
@media (min-width:768px){ .mgx-sheet.cg-sheet{ width:min(560px, calc(100% - 32px)); } }