/* Les jeux de couleurs vus depuis Color Guesser : section « nos autres jeux » de la landing (mg-),
   carte et accroche du défi dans l'app (jx-). Suppose cg.css chargé. Rendus = SVG statiques du vrai moteur. */
.mg__list{ display:grid; gap:44px 16px; margin:0; padding:40px 0 0; list-style:none; }
/* 4 jeux mis en avant (jeux_textes.FEATURED, 19 oct. 2026) + « tous les jeux N » : 1 colonne, 2, puis 4. Tient pour 10 jeux. */
@media (min-width:760px){ .mg__list{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (min-width:1100px){ .mg__list{ grid-template-columns:repeat(4, minmax(0, 1fr)); gap:44px 14px; } }
.mg__item{ position:relative; isolation:isolate; }
.mg__host{ position:absolute; z-index:0; right:14px; top:-46px; width:88px; height:88px; pointer-events:none; }
.mg__card{ position:relative; z-index:1; display:flex; flex-direction:column; gap:10px; height:100%; padding:10px 10px 18px; border-radius:var(--cg-r-xl, 30px);
  color:var(--cg-fg, #FAFAFA); text-decoration:none; background:var(--lg-sheen, none), #19191C;
  box-shadow:var(--lg-edge, inset 0 0 0 1px rgba(255,255,255,.08)); transition:transform .34s var(--cg-ease-out, ease), box-shadow .22s ease; }
.mg__card:active{ transform:scale(.98); }
@media (hover:hover) and (pointer:fine){
  .mg__card:hover{ transform:translateY(-3px); box-shadow:var(--lg-edge, none), 0 24px 50px -24px color-mix(in oklab, var(--mg-acc) 60%, transparent); }
}
.mg__art{ display:grid; place-items:center; height:180px; border-radius:22px; overflow:hidden;
  background:radial-gradient(90% 110% at 50% 0%, #232323, #151515 72%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.mg__art > div{ display:flex; align-items:flex-end; justify-content:center; }
.mg__name{ margin:4px 8px 0; font-size:22px; font-weight:500; letter-spacing:-.035em; }
.mg__name::before, .jx-dot::before{ content:""; display:inline-block; width:10px; height:10px; margin-right:9px; border-radius:3px; vertical-align:.1em; background:var(--mg-acc);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45); }
.mg__p{ margin:0 8px; font-size:15px; color:var(--lg-fg-2, #C8C8CC); text-wrap:pretty; }
.mg__go{ display:inline-flex; align-items:center; gap:6px; margin:auto 8px 0; padding-top:6px; font-size:15px; font-weight:600; }
.mg__go svg{ width:18px; height:18px; fill:currentColor; transition:transform .34s var(--cg-ease-out, ease); }
.mg__card:hover .mg__go svg{ transform:translateX(3px); }
.mg__all{ display:inline-flex; margin-top:28px; }
.mg-defs{ position:absolute; width:0; height:0; overflow:hidden; }

/* app : une carte « nos autres jeux » sous la grille des univers, une accroche quand le défi est fait */
.jx-card{ position:relative; display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:12px; margin:22px 0 4px; padding:12px 14px 12px 12px;
  border-radius:var(--cg-r-xl, 30px); color:var(--cg-fg, #FAFAFA); text-decoration:none; background:var(--lg-sheen, none), #19191C;
  box-shadow:var(--lg-edge, inset 0 0 0 1px rgba(255,255,255,.08)); transition:transform .3s var(--cg-ease-out, ease); -webkit-tap-highlight-color:transparent; }
.jx-card:active{ transform:scale(.985); }
.jx-card__arts{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; }
.jx-card__art{ display:grid; place-items:center; height:76px; border-radius:18px; overflow:hidden;
  background:radial-gradient(90% 110% at 50% 0%, #232323, #151515 72%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.jx-card__art > div{ display:flex; align-items:flex-end; justify-content:center; }
.jx-card__t{ margin:2px 4px 0; font-size:17px; font-weight:500; letter-spacing:-.025em; }
.jx-card__p{ margin:2px 4px 0; font-size:13px; color:var(--lg-fg-2, #C8C8CC); }
.jx-card__go{ display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--lg-drop, #fff); color:var(--cg-ink, #0A0A0A); }
.jx-card__go svg{ width:18px; height:18px; fill:currentColor; }

.jx-hook{ display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:12px; margin:10px 0 0; padding:8px 10px 8px 8px;
  border-radius:20px; color:var(--cg-fg, #FAFAFA); text-decoration:none; background:var(--lg-sheen, none), #19191C;
  box-shadow:var(--lg-edge, inset 0 0 0 1px rgba(255,255,255,.08)); transition:transform .3s var(--cg-ease-out, ease); -webkit-tap-highlight-color:transparent; }
.jx-hook[hidden]{ display:none; }
.jx-hook:active{ transform:scale(.985); }
.jx-hook__art{ display:flex; align-items:flex-end; justify-content:center; width:64px; height:52px; padding-bottom:4px; border-radius:14px;
  background:radial-gradient(90% 110% at 50% 0%, #232323, #151515 72%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.jx-hook__t{ font-size:14px; line-height:1.3; color:var(--lg-fg-2, #C8C8CC); text-wrap:pretty; }
.jx-hook__t b{ display:block; color:var(--cg-fg, #FAFAFA); font-weight:500; }
.jx-hook__go{ display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--lg-drop, #fff); color:var(--cg-ink, #0A0A0A); }
.jx-hook__go svg{ width:16px; height:16px; fill:currentColor; }
@media (prefers-reduced-motion:reduce){ .mg__card, .mg__card:hover, .mg__card:active, .jx-card, .jx-hook{ transform:none !important; transition:none; } }
#jxHookHome{ margin:12px 0 26px; }
.en-more > .jx-hook{ margin:0 0 18px; }
.jx-card__art .t-svg{ display:block; }

/* pages univers : bloc « autre jeu de couleurs » avant la grille des univers (audit SEO, 19 oct. 2026) ; posé par scripts/seo_univers_sync.py */
.uj{ display:grid; gap:10px; margin:28px 0 0; padding:0; list-style:none; }
/* 4 cartes au plus (jeux mis en avant) : 1 colonne, 2, puis 4 */
@media (min-width:760px){ .uj{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; } }
@media (min-width:1100px){ .uj{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.uj__card{ position:relative; display:grid; align-content:center; gap:4px; height:100%; min-height:88px; padding:16px 52px 16px 18px; border-radius:var(--cg-r-xl, 30px);
  color:var(--cg-fg, #FAFAFA); text-decoration:none; background:var(--lg-sheen, none), #19191C;
  box-shadow:var(--lg-edge, inset 0 0 0 1px rgba(255,255,255,.08)); transition:transform .34s var(--cg-ease-out, ease), box-shadow .22s ease;
  -webkit-tap-highlight-color:transparent; }
.uj__card:active{ transform:scale(.98); }
@media (hover:hover) and (pointer:fine){
  .uj__card:hover{ transform:translateY(-3px); box-shadow:var(--lg-edge, none), 0 22px 46px -24px color-mix(in oklab, var(--uj) 65%, transparent); }
}
.uj__n{ font-size:20px; font-weight:500; letter-spacing:-.03em; }
.uj__n::before{ content:""; display:inline-block; width:10px; height:10px; margin-right:9px; border-radius:3px; vertical-align:.1em; background:var(--uj);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45); }
.uj__k{ font-size:14px; color:var(--lg-fg-2, #C8C8CC); }
.uj__go{ --s:20px; position:absolute; right:18px; top:50%; margin-top:-10px; color:var(--lg-fg-2, #C8C8CC); transition:transform .34s var(--cg-ease-out, ease); }
.uj__card:hover .uj__go{ transform:translate(2px, -2px); }
.uj__more{ display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 0; }
@media (prefers-reduced-motion:reduce){ .uj__card, .uj__card:hover, .uj__card:active, .uj__go{ transform:none !important; transition:none; } }

/* nombre de jeux à côté de « tous les jeux » (mis à jour par build_i18n.py depuis jeux_textes.GAMES) */
.jx-n{ display:inline-grid; place-items:center; min-width:22px; height:20px; margin-left:8px; padding:0 6px; border-radius:99px; font-size:12px; font-weight:600;
  font-variant-numeric:tabular-nums; vertical-align:1px; background:rgba(255,255,255,.1); color:inherit; }
.uj__day{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:12px 0 0; font-size:14px; color:var(--lg-fg-2, #C8C8CC); }
.uj__day a{ display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 13px 0 11px; border-radius:99px; color:var(--cg-fg, #FAFAFA); text-decoration:none;
  font-size:13.5px; font-weight:500; background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); transition:transform .16s var(--cg-ease-out, ease); }
.uj__day a::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--uj); box-shadow:0 0 8px var(--uj); }
.uj__day a:active{ transform:scale(.96); }