/* ===================== HUB LOULT PARTY — portail façon jeux Flash, en moderne =====================
   4 jeux "à la une" en grand + catalogue en vignettes. Une vignette = .gt (bouton) > .gt-art (cadre animé
   dessiné en CSS dans la DA du jeu, logo par-dessus) + .gt-cap (nom + description).
   Tout est en unités cqw (relatives à la largeur de la vignette) -> le même cadre sert en grand et en petit.
   Cadre générique paramétré par variables : --fw/--fc (bordure, 4 couleurs = biseau), --lw/--lc (filet
   intérieur), --rw/--rc (anneau extérieur). */

body.on-hub #app-bg{ background:
  radial-gradient(ellipse 70% 50% at 15% 0%, rgba(255,150,40,.13), transparent 70%),
  radial-gradient(ellipse 60% 50% at 90% 10%, rgba(60,140,255,.16), transparent 70%),
  radial-gradient(circle, rgba(255,255,255,.045) 1px, transparent 1.5px) 0 0/22px 22px,
  linear-gradient(#0b1322, #0d192a 45%, #0a213c 80%, #0a3556); }
body.on-hub #app-bg::after{ display:none; }
#hub{ align-items:flex-start; }
.hub-wrap{ width:min(1240px,100%); min-height:100%; margin:0 auto; padding:0 4px 10px; box-sizing:border-box; display:flex; flex-direction:column; color:#fff; font-family:Nunito,sans-serif; }
.hub-brand{ display:block; width:min(230px,52vw); height:auto; margin:-8px auto 26px; }
/* logo collé en haut ; la place libre se répartit entre sous le logo et sous le catalogue (les jeux restent au centre) */
.hub-wrap > .hub-sec:first-of-type{ margin-top:auto; } .hub-foot{ margin-bottom:auto !important; }
.hub-brand{ filter:drop-shadow(0 6px 14px rgba(0,0,0,.5)); }

/* titres de section */
.hub-sec{ display:flex; align-items:center; gap:14px; margin:0 2px 14px; }
.hub-sec h2{ margin:0; font:400 22px/1 'Lilita One',sans-serif; letter-spacing:.06em; text-transform:uppercase; color:#fff; }
.hub-sec::after{ content:""; flex:1; height:2px; border-radius:2px; background:linear-gradient(90deg, rgba(255,180,60,.7), rgba(80,150,255,.35) 40%, transparent); order:1; }
.hub-sec h2::before{ content:""; display:inline-block; width:10px; height:10px; margin-right:10px; vertical-align:2px; border-radius:2px; transform:rotate(45deg);
  background:linear-gradient(135deg,#ffcf4a,#ff7a1a); box-shadow:0 0 10px rgba(255,160,40,.6); }
.hub-online{ order:2; display:flex; align-items:center; gap:7px; font-size:14px; font-weight:800; color:#cfe0ff; font-variant-numeric:tabular-nums; }
.hub-online[hidden]{ display:none; }
.hub-online i{ width:8px; height:8px; border-radius:50%; background:#3ce07a; box-shadow:0 0 8px #3ce07a; animation:gt-pulse 1.6s ease-in-out infinite; }
@keyframes gt-pulse{ 50%{ opacity:.35; } }

.hub-feat{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; margin-bottom:34px; }
.hub-grid{ display:grid; grid-template-columns:repeat(8,1fr); gap:14px; }
.hub-foot{ margin:30px 0 0; text-align:center; font-size:12.5px; color:rgba(200,215,245,.5); font-variant-numeric:tabular-nums; }
.hub-foot[hidden]{ display:none; }

/* ---------- vignette ---------- */
.gt{ font:inherit; color:inherit; background:none; border:0; padding:0; margin:0; cursor:pointer; text-align:left;
  display:flex; flex-direction:column; gap:10px; min-width:0; -webkit-tap-highlight-color:transparent;
  container-type:inline-size; } /* conteneur = la vignette : les cqw de .gt-art (anneau, arrondi) suivent sa largeur, pas celle de la fenêtre */
.gt-art{ position:relative; display:block; aspect-ratio:16/10; border-radius:2.6cqw; overflow:hidden; isolation:isolate;
  box-shadow:0 0 0 var(--rw,0) var(--rc,transparent), 0 10px 24px rgba(0,0,0,.45); transition:transform .18s ease, box-shadow .18s ease; }
.hub-grid .gt-art, .hub-feat .gt-art{ border-radius:14px; }
.gt-art::after{ content:""; position:absolute; inset:0; z-index:6; border-radius:inherit; pointer-events:none;
  border:var(--fw,0) solid; border-color:var(--fc,transparent);
  box-shadow:inset 0 0 0 var(--lw,0) var(--lc,transparent), inset 0 0 7cqw rgba(0,0,0,.38); }
.gt:hover .gt-art{ transform:translateY(-5px); box-shadow:0 0 0 var(--rw,0) var(--rc,transparent), 0 18px 34px rgba(0,0,0,.55), 0 0 26px var(--glow,rgba(255,255,255,.12)); }
.gt:active .gt-art{ transform:translateY(-1px) scale(.99); }
.gt:focus-visible{ outline:none; }
.gt:focus-visible .gt-art{ outline:3px solid #ffd23f; outline-offset:4px; }

img.gt-logo{ position:absolute; inset:0; z-index:3; margin:auto; width:78%; height:62%; object-fit:contain;
  filter:drop-shadow(0 .8cqw 1.4cqw rgba(0,0,0,.55)); transition:transform .25s ease; }
span.gt-logo{ position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center; transition:transform .25s ease; }
.gt:hover .gt-logo{ transform:scale(1.05); }
.gt-svg svg{ width:84%; height:auto; overflow:visible; }

.gt-cap{ display:flex; flex-direction:column; gap:2px; padding:0 2px; }
.gt-cap b{ font-size:15px; font-weight:800; color:#fff; }
.gt-cap small{ font-size:12.5px; line-height:1.3; color:#97a8c9; }
.gt-big .gt-cap b{ font-size:18px; }
.gt-big .gt-cap small{ font-size:13.5px; }
.gt:hover .gt-cap b{ color:#ffd76a; }

.gt-live{ position:absolute; z-index:7; top:max(6px,3.4cqw); left:max(6px,3.4cqw); display:flex; align-items:center; gap:5px;
  padding:3px 9px 3px 7px; border-radius:99px; background:rgba(6,12,24,.78); backdrop-filter:blur(3px);
  font:800 max(10.5px,2.9cqw)/1.2 Nunito,sans-serif; color:#fff; font-variant-numeric:tabular-nums; }
.gt-live::before{ content:""; width:7px; height:7px; border-radius:50%; background:#3ce07a; box-shadow:0 0 7px #3ce07a; animation:gt-pulse 1.6s ease-in-out infinite; }
.gt-live[hidden]{ display:none; }
.gt-play{ position:absolute; z-index:7; right:max(6px,3.4cqw); bottom:max(6px,3.4cqw); padding:max(4px,1.3cqw) max(10px,3.4cqw);
  border-radius:99px; background:#ffd23f; color:#1c1838; font:400 max(12px,3.4cqw)/1 'Lilita One',sans-serif; letter-spacing:.04em; text-transform:uppercase;
  box-shadow:0 3px 0 #b8860b, 0 6px 14px rgba(0,0,0,.4); opacity:0; transform:translateY(6px); transition:opacity .18s, transform .18s; }
.gt-play::before{ content:"▶ "; font-size:.8em; }
.gt:hover .gt-play, .gt:focus-visible .gt-play{ opacity:1; transform:none; }
.gt-ribbon{ position:absolute; z-index:7; top:max(10px,4.4cqw); right:max(-30px,-9cqw); width:max(84px,36cqw); transform:rotate(35deg);
  padding:max(3px,.8cqw) 0; text-align:center; background:linear-gradient(#ff5470,#e0244a); color:#fff;
  font:400 max(9px,2.8cqw)/1 'Lilita One',sans-serif; letter-spacing:.12em; text-transform:uppercase; box-shadow:0 3px 8px rgba(0,0,0,.4); }
.gt-ribbon.upd{ background:linear-gradient(#ffd04a,#f08a12); color:#3a1d00; } /* jeu mis à jour */

/* aperçu vidéo au survol (hub-live.js) : par-dessus la scène et le logo, sous le cadre et les pastilles */
.gt-vid{ position:absolute; inset:0; z-index:5; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .25s; pointer-events:none; background:#000; }
.gt-previewing .gt-vid{ opacity:1; }

/* ===================== cadres par jeu ===================== */

/* POKER LOULT : tapis vert, rail en bois, filet doré ; jeton qui tourne + 2 cartes qui se balancent */
.gt-poker .gt-art{ --fw:1.8cqw; --fc:#8f4d20 #5a290d #3a1a06 #74391a; --lw:.55cqw; --lc:#e2b04a; --rw:.35cqw; --rc:#1e0c03; --glow:rgba(60,200,120,.35);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ctext x='8' y='24' font-size='16' fill='%23000' opacity='.13'%3E♠%3C/text%3E%3Ctext x='38' y='54' font-size='16' fill='%23000' opacity='.13'%3E♥%3C/text%3E%3C/svg%3E") 0 0/10cqw 10cqw,
    radial-gradient(ellipse at 50% 42%, #34b06c 0%, #1a7d46 48%, #0b4024 100%); }
.pk-chip{ position:absolute; z-index:2; left:9%; bottom:13%; width:15cqw; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, #f7f3e8 0 32%, #c8102e 33% 40%, transparent 41%), repeating-conic-gradient(#c8102e 0 22.5deg, #f7f3e8 22.5deg 45deg);
  box-shadow:inset 0 0 0 .8cqw #8a0a1c, 0 1cqw 1.6cqw rgba(0,0,0,.45); animation:pk-flip 3.4s ease-in-out infinite; }
@keyframes pk-flip{ 0%,70%{ transform:rotateY(0); } 85%{ transform:rotateY(180deg) translateY(-3cqw); } 100%{ transform:rotateY(360deg); } }
.pk-cards{ position:absolute; z-index:2; right:7%; top:8%; width:20cqw; height:20cqw; }
.pk-cards i{ position:absolute; top:0; left:0; width:11cqw; height:15.5cqw; border-radius:1.2cqw; background:#fffdf6; box-shadow:0 .8cqw 1.4cqw rgba(0,0,0,.45);
  font:800 4cqw/1 Nunito,sans-serif; font-style:normal; padding:1cqw; color:#1c1838; transform-origin:50% 120%; animation:pk-sway 4s ease-in-out infinite; }
.pk-cards i:nth-child(1){ transform:rotate(-14deg); }
.pk-cards i:nth-child(2){ left:5cqw; color:#d0142c; transform:rotate(12deg); animation-delay:-2s; }
@keyframes pk-sway{ 50%{ translate:0 -1cqw; rotate:4deg; } }

/* CONNEXION : table de jeu de société (papier crème à pois), logo Venn dessiné (connexion.css) */
.gt-cx .gt-art{ --fw:1cqw; --fc:#22203a; --lw:.5cqw; --lc:#ffd23f; --rw:.35cqw; --rc:#22203a; --glow:rgba(255,210,63,.4);
  background:radial-gradient(circle at 12% 18%, rgba(255,107,87,.35) 0 18cqw, transparent 18.2cqw),
    radial-gradient(circle at 90% 92%, rgba(61,125,255,.3) 0 20cqw, transparent 20.2cqw),
    radial-gradient(rgba(34,32,58,.16) .35cqw, transparent .45cqw) 0 0/3.4cqw 3.4cqw, #fbf1de; }
.gt-cx .cxn-logo-hub{ font-size:12cqw; flex-direction:column; gap:.08em; }
.gt-cx .cxn-logo-hub [data-cx-venn]{ width:2.1em; height:1.4em; }

/* LOULT YAMS : tapis rouge du gobelet, jante dorée, liseré bleu ; 2 dés qui roulent */
.gt-yams .gt-art{ --fw:1.6cqw; --fc:#ffe27a #d39a22 #a8740f #f0c040; --lw:.5cqw; --lc:#173fc4; --rw:.4cqw; --rc:#0d2a8a; --glow:rgba(255,80,80,.35);
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.06) 1px, transparent 1.5px) 0 0/1.6cqw 1.6cqw, radial-gradient(ellipse at 50% 45%, #e0303f 0%, #9e1426 55%, #4d0714 100%); }
.ym-die{ position:absolute; z-index:2; width:12cqw; aspect-ratio:1; border-radius:2.4cqw;
  background:radial-gradient(circle, #1c1838 0 40%, transparent 46%) 0 0/50% 50%, linear-gradient(145deg,#fff,#dcdcea);
  box-shadow:inset -.6cqw -.8cqw 0 rgba(0,0,0,.13), 0 1.2cqw 1.6cqw rgba(0,0,0,.45); animation:ym-roll 3.8s cubic-bezier(.3,.7,.4,1) infinite; }
.ym-d1{ left:8%; bottom:12%; }
.ym-d2{ right:9%; top:12%; width:10cqw; border-radius:2cqw; background:radial-gradient(circle, #c8102e 0 13%, transparent 15%), linear-gradient(145deg,#fff,#dcdcea); animation-delay:-1.9s; }
@keyframes ym-roll{ 0%,62%{ transform:none; } 74%{ transform:translate(3cqw,-5cqw) rotate(200deg); } 86%{ transform:translate(5cqw,0) rotate(330deg); } 92%{ transform:translate(5.5cqw,-1cqw) rotate(350deg); } 100%{ transform:translate(0,0) rotate(360deg); } }

/* FLAPPY TRUM : ciel pixel, nuages qui défilent, sol rayé qui avance ; cadre violet/rose du logo */
.gt-flappy .gt-art{ --fw:1.4cqw; --fc:#3a1d62 #24103f #1a0a30 #2e1650; --lw:.5cqw; --lc:#ff5fa8; --rw:.35cqw; --rc:#12062a; --glow:rgba(190,110,255,.4);
  background:linear-gradient(#3fb4f0, #8fdcff 72%); }
.fl-clouds{ position:absolute; inset:0 0 18% 0; z-index:1; image-rendering:pixelated; opacity:.95;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' shape-rendering='crispEdges' fill='%23fff'%3E%3Crect x='8' y='14' width='20' height='6'/%3E%3Crect x='12' y='10' width='10' height='4'/%3E%3Crect x='4' y='18' width='28' height='4'/%3E%3Crect x='48' y='26' width='16' height='4'/%3E%3Crect x='52' y='22' width='8' height='4'/%3E%3Crect x='44' y='30' width='24' height='4'/%3E%3C/svg%3E") 0 0/50cqw 25cqw repeat-x;
  animation:fl-scroll 14s linear infinite; }
.fl-ground{ position:absolute; left:0; right:0; bottom:0; height:16%; z-index:2; border-top:.8cqw solid #2c8a2c;
  background:repeating-linear-gradient(-45deg, #7fe04f 0 2.2cqw, #5cc23a 2.2cqw 4.4cqw) 0 0/6.22cqw 6.22cqw, #5cc23a; animation:fl-ground .6s linear infinite; }
@keyframes fl-scroll{ to{ background-position:-50cqw 0; } }
@keyframes fl-ground{ to{ background-position:-6.22cqw 0; } }
.gt-flappy img.gt-logo{ height:72%; top:-6%; animation:fl-bob 1.2s steps(4) infinite alternate; }
@keyframes fl-bob{ to{ translate:0 -2cqw; } }

/* TOUPIE SMASHLOULT : cuvette d'arène, anneaux concentriques, traînées de rotation ; cadre métal + filet rouge */
.gt-toupie .gt-art{ --fw:1.5cqw; --fc:#eef3fb #8d9ab3 #5b6680 #c4cede; --lw:.5cqw; --lc:#e8303a; --rw:.4cqw; --rc:#173fc4; --glow:rgba(90,150,255,.45);
  background:repeating-radial-gradient(circle at 50% 55%, transparent 0 7cqw, rgba(120,170,255,.12) 7cqw 7.4cqw),
    radial-gradient(circle at 50% 55%, #2147a0 0%, #0c1c4c 48%, #040a1e 100%); }
.tp-spin{ position:absolute; z-index:1; left:50%; top:55%; width:78cqw; aspect-ratio:1; margin:-39cqw 0 0 -39cqw; border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 55%, rgba(110,190,255,.55) 72%, transparent 73% 80%, rgba(255,90,90,.45) 97%, transparent 98%);
  -webkit-mask:radial-gradient(circle, transparent 30%, #000 31% 62%, transparent 63%); mask:radial-gradient(circle, transparent 30%, #000 31% 62%, transparent 63%);
  animation:tp-rot 1s linear infinite; }
@keyframes tp-rot{ to{ transform:rotate(360deg); } }
.gt-toupie img.gt-logo{ width:84%; }

/* PUISSANCE 4 : grille bleue trouée, pions qui tombent et rebondissent ; cadre jaune */
.gt-c4 .gt-art{ --fw:1.4cqw; --fc:#ffe680 #e0aa10 #c08a00 #f5c830; --lw:.5cqw; --lc:#0b2a6b; --rw:.35cqw; --rc:#7a0a1c; --glow:rgba(255,210,60,.35);
  background:radial-gradient(ellipse at 50% 50%, rgba(5,15,45,.55), transparent 70%), radial-gradient(circle, #0a2460 0 3.2cqw, transparent 3.5cqw) 0 0/10cqw 10cqw, linear-gradient(#2a6ae0,#174cb8); }
.c4-tok{ position:absolute; z-index:2; top:51cqw; width:8cqw; aspect-ratio:1; border-radius:50%; animation:c4-drop 4s cubic-bezier(.5,0,.8,.5) infinite; }
.c4-r{ left:11cqw; background:radial-gradient(circle at 35% 30%, #ff9a8a, #e0201f 55%, #8a0d0d); box-shadow:inset 0 0 0 .7cqw rgba(0,0,0,.18); }
.c4-y{ left:81cqw; background:radial-gradient(circle at 35% 30%, #fff1a0, #f5c518 55%, #a57d00); box-shadow:inset 0 0 0 .7cqw rgba(0,0,0,.15); animation-delay:-2s; }
@keyframes c4-drop{ 0%{ transform:translateY(-62cqw); opacity:1; } 20%{ transform:none; } 25%{ transform:translateY(-4cqw); } 30%{ transform:none; } 80%{ opacity:1; } 90%,100%{ transform:none; opacity:0; } }

/* LOULTTOGETHER : ciel de nuit, étoiles qui scintillent, cadre néon rose->bleu qui circule */
.gt-together .gt-art{ --glow:rgba(200,110,255,.45); background:
  radial-gradient(ellipse at 8% 110%, rgba(232,111,217,.55), transparent 55%), radial-gradient(ellipse at 100% 0%, rgba(79,151,255,.55), transparent 55%), linear-gradient(160deg,#1b1f4d,#2a1a55); }
.gt-together .gt-art::before, .gt-line .gt-art::before{ content:""; position:absolute; inset:0; z-index:6; border-radius:inherit; padding:1.2cqw; pointer-events:none;
  background:linear-gradient(90deg,#ff5fd2,#8a6bff,#3fb4ff,#ff5fd2) 0 0/300% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:gt-neon 4s linear infinite; }
@keyframes gt-neon{ to{ background-position:300% 0; } }
.tg-stars, .tg-stars::before{ position:absolute; inset:0; z-index:1;
  background:radial-gradient(circle at 12% 20%, #fff 0 .35cqw, transparent .6cqw), radial-gradient(circle at 30% 70%, #fff 0 .3cqw, transparent .55cqw),
    radial-gradient(circle at 55% 14%, #fff 0 .4cqw, transparent .7cqw), radial-gradient(circle at 78% 64%, #fff 0 .3cqw, transparent .55cqw),
    radial-gradient(circle at 90% 26%, #fff 0 .35cqw, transparent .6cqw), radial-gradient(circle at 44% 86%, #fff 0 .3cqw, transparent .55cqw);
  animation:tg-tw 2.6s ease-in-out infinite alternate; }
.tg-stars::before{ content:""; transform:translate(17cqw,9cqw) scale(.8); animation-delay:-1.3s; }
@keyframes tg-tw{ from{ opacity:.25; } to{ opacity:1; } }
.gt-together img.gt-logo{ width:88%; filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 2.6cqw rgba(200,215,255,.7)); }

/* LOULTLINE : synthwave façon Hotline — soleil rayé à l'horizon, sol quadrillé qui défile, scanlines, néon */
.gt-line .gt-art{ --glow:rgba(255,70,140,.45); background:linear-gradient(#12031c 0%, #3a0a4a 38%, #b0157f 57%, #ff4f6e 60%, #1c0629 60.2%); }
.gt-line .gt-art::before{ background:linear-gradient(90deg,#ff3b6e,#ffb43c,#2df2ff,#ff3b6e) 0 0/300% 100%; }
.ln-sun{ position:absolute; z-index:1; left:50%; top:12%; width:36cqw; aspect-ratio:1; margin-left:-18cqw; border-radius:50%;
  background:linear-gradient(#fff3b0, #ffb43c 40%, #ff4f6e 75%, #c2178f);
  -webkit-mask:linear-gradient(#000 52%, transparent 52% 56%, #000 56% 64%, transparent 64% 69%, #000 69% 76%, transparent 76% 82%, #000 82%);
  mask:linear-gradient(#000 52%, transparent 52% 56%, #000 56% 64%, transparent 64% 69%, #000 69% 76%, transparent 76% 82%, #000 82%);
  filter:drop-shadow(0 0 3cqw rgba(255,90,120,.7)); }
.ln-floor{ position:absolute; z-index:2; left:0; right:0; bottom:0; height:40%; overflow:hidden; perspective:20cqw; background:#1c0629; }
.ln-grid{ position:absolute; left:-60%; right:-60%; top:0; height:200%; transform-origin:50% 0; transform:rotateX(62deg);
  background:repeating-linear-gradient(90deg, rgba(45,242,255,.8) 0 .35cqw, transparent .35cqw 7cqw), repeating-linear-gradient(0deg, rgba(255,59,221,.85) 0 .35cqw, transparent .35cqw 7cqw);
  animation:ln-run .9s linear infinite; }
@keyframes ln-run{ to{ background-position:0 7cqw; } }
.gt-line .gt-art > .gt-svg::after{ content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(transparent 0 .6cqw, rgba(0,0,0,.18) .6cqw .8cqw); }
.gt-line .gt-svg svg{ width:92%; margin-top:-8%; }

/* BOMBERLOULT : arène gazon à damier, murs de pierre, logo animé du jeu (éclat qui tourne, mèche, bombe) */
.gt-bomber .gt-art{ --fw:1cqw; --fc:#1c1838; --lw:.55cqw; --lc:#ffd23f; --rw:.35cqw; --rc:#0d0a20; --glow:rgba(255,180,40,.45);
  background:conic-gradient(#63c94e 25%, #55b842 0 50%, #63c94e 0 75%, #55b842 0) 0 0/10cqw 10cqw; }
.bb-walls{ position:absolute; inset:0; z-index:1; padding:7.5cqw;
  background:linear-gradient(transparent 80%, rgba(40,44,70,.55) 0) 0 0/7.5cqw 7.5cqw, linear-gradient(90deg, transparent 80%, rgba(40,44,70,.4) 0) 0 0/7.5cqw 7.5cqw,
    linear-gradient(rgba(255,255,255,.35) 12%, transparent 0) 0 0/7.5cqw 7.5cqw, #9aa1bb;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.gt-bomber .gt-svg svg{ width:80%; filter:drop-shadow(0 1.6cqw 2cqw rgba(20,10,40,.45)); }
.gt-bomber .bl-burst{ transform-origin:320px 150px; animation:bl-burst 24s linear infinite; }
@keyframes bl-burst{ to{ transform:rotate(360deg); } }
.gt-bomber .bl-spark{ animation:bl-spark .18s steps(2) infinite alternate; transform-box:fill-box; transform-origin:center; }
@keyframes bl-spark{ from{ opacity:1; transform:translate(66px,-66px) scale(1); } to{ opacity:.8; transform:translate(66px,-66px) scale(1.25) rotate(20deg); } }
.gt-bomber .bl-bomb{ animation:bl-bob 1.6s ease-in-out infinite; }
@keyframes bl-bob{ 50%{ transform:translate(240px,92px) rotate(-6deg); } 0%,100%{ transform:translate(240px,98px); } }
.gt-bomber .bl-stars path{ animation:bl-tw 1.8s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.gt-bomber .bl-stars path:nth-child(2){ animation-delay:.6s; } .gt-bomber .bl-stars path:nth-child(3){ animation-delay:1.1s; }
@keyframes bl-tw{ 50%{ transform:scale(.4) rotate(45deg); opacity:.4; } }

/* L CULTURE : rayons de plateau télé qui tournent, enseigne L à ampoules (lculture.css) */
.gt-lc .gt-art{ --fw:1cqw; --fc:var(--lc-choc); --lw:.5cqw; --lc:var(--lc-mustard); --rw:.35cqw; --rc:var(--lc-choc); --glow:rgba(255,160,40,.5); background:#ff8a2a; }
.lc-rays{ position:absolute; left:50%; top:110%; width:240cqw; aspect-ratio:1; margin:-120cqw 0 0 -120cqw; z-index:0;
  background:repeating-conic-gradient(#ffb347 0deg 8deg, #ff7a1a 8deg 16deg); animation:lc-rays 40s linear infinite; }
.gt-lc .lc-logo-hub{ font-size:13cqw; }
.gt-lc span.gt-logo{ inset:0 0 6% 0; background:radial-gradient(ellipse 46% 42% at 50% 52%, rgba(59,31,18,.5), transparent 72%); } /* le L orange se perdait sur les rayons orange */

/* L'IMPOSTEUR : tableau en liège, cadre bois, Polaroid punaisé (le suspect cligne des yeux) + tampon */
.gt-imp .gt-art{ --fw:2.4cqw; --fc:#6b4020 #4a2a12 #3a200c #5a3519; --lw:.4cqw; --lc:#2a170b; --rw:.3cqw; --rc:#1a0d04; --glow:rgba(255,190,110,.35);
  background:radial-gradient(circle at 20% 30%, rgba(0,0,0,.12) 1px, transparent 2px) 0 0/9px 9px, radial-gradient(circle at 70% 60%, rgba(255,255,255,.12) 1px, transparent 2px) 0 0/11px 11px, var(--imp-cork); }
.imp-hub-logo{ flex-direction:column; gap:0; }
.gt-imp .imp-hub-pol{ position:relative; display:block; width:26%; background:var(--imp-paper); padding:2.4% 2.4% 6%; transform:rotate(-5deg); box-shadow:0 1cqw 2cqw rgba(0,0,0,.4); }
.gt-imp .imp-hub-pol::before{ content:""; position:absolute; z-index:1; top:-2.4cqw; left:50%; width:4.4cqw; height:4.4cqw; margin-left:-2.2cqw; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ff8a8a, var(--imp-red) 55%, #6d0013); box-shadow:.4cqw .7cqw .7cqw rgba(0,0,0,.45); }
.gt-imp .imp-hub-pol .imp-av{ display:block; background:#3fa7d6; }
.gt-imp .imp-hub-stamp{ display:block; font-family:'Special Elite',monospace; font-size:8.5cqw; color:var(--imp-red); border:.6cqw solid var(--imp-red); border-radius:1.4cqw;
  padding:0 2.2cqw; transform:rotate(-4deg); margin-top:-2%; background:rgba(251,246,233,.85); }

/* ---------- responsive ---------- */
@media (max-width:1100px){ .hub-grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:1100px){ .hub-feat{ grid-template-columns:repeat(2,1fr); } } /* 4 jeux à la une : 4 de front, puis 2 x 2 */
@media (max-width:600px){
  .hub-brand{ margin:40px auto 16px; }
  .hub-feat{ gap:12px; margin-bottom:24px; }
  .hub-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .hub-sec h2{ font-size:18px; }
  .gt-cap b, .gt-big .gt-cap b{ font-size:14px; } .gt-cap small, .gt-big .gt-cap small{ font-size:12px; }
}
@media (hover:none){ .gt-play{ display:none; } }
@media (prefers-reduced-motion:reduce){ #hub *, #hub *::before, #hub *::after{ animation:none !important; } }

/* GÉODÉSIQUE : vraie Voie lactée (ESO) qui dérive, orbites dorées de la carte, cadre bleu nuit à filet or */
.gt-geo .gt-art{ --fw:.9cqw; --fc:#0b1430 #091026 #060b1c #091026; --lw:.4cqw; --lc:rgba(220,184,114,.85); --rw:.35cqw; --rc:#050914; --glow:rgba(220,184,114,.4); background:#03050d; }
.geo-sky{ position:absolute; inset:-4%; z-index:1; background:url(assets/geo-sky.webp) 0 50%/auto 120% repeat-x; animation:geo-drift 90s linear infinite; opacity:.9; }
@keyframes geo-drift{ to{ background-position:-100cqw 50%; } }
.geo-orbit{ position:absolute; inset:0; z-index:2; width:100%; height:100%; fill:none; stroke:rgba(220,184,114,.45); stroke-width:.5; stroke-dasharray:2 3; }
.geo-dot{ fill:#f3ead8; stroke:none; offset-path:path("M16 54a64 22 0 1 0 128 0a64 22 0 1 0 -128 0"); animation:geo-orbit 9s linear infinite; filter:drop-shadow(0 0 2px #fff); }
@keyframes geo-orbit{ to{ offset-distance:100%; } }
.geo-logo{ flex-direction:column; gap:1.2cqw; text-shadow:0 .6cqw 2cqw rgba(0,0,0,.8); }
.geo-logo svg{ width:15cqw; height:15cqw; filter:drop-shadow(0 0 2cqw rgba(220,184,114,.5)); }
.geo-logo b{ font:700 8.5cqw/1 Nunito,sans-serif; letter-spacing:.04em; color:#f3ead8; }
.geo-logo small{ font:600 3.2cqw/1 Nunito,sans-serif; letter-spacing:.3em; text-transform:uppercase; color:#dcb872; }
@media (prefers-reduced-motion: reduce){ .geo-sky, .geo-dot{ animation:none; } }

/* BLIND ARENA (duel de rayons 3D) : vraie capture du jeu en fond, titre penché façon borne d'arcade */
/* Interloult : image d'une vraie épreuve (les marteaux), logo du jeu (jaune cerné + cartouche rouge) dans sa police */
@font-face{ font-family:Fredoka; src:url(intervilles/assets/ui/fredoka.woff2) format('woff2'); font-weight:400 700; font-display:swap; }
.gt-inter .gt-art{ --glow:rgba(255,201,40,.45); background:#14183a url(intervilles/assets/ui/card.webp) center/cover no-repeat; }
.in-title{ position:absolute; z-index:3; left:4cqw; bottom:5cqw; display:grid; justify-items:start; font:700 13cqw/.86 Fredoka,'Trebuchet MS',sans-serif; transform:rotate(-4deg); filter:drop-shadow(0 1cqw 0 #14183a); }
.in-title i{ font-style:normal; color:#ffc928; -webkit-text-stroke:1.8cqw #14183a; paint-order:stroke fill; }
.in-title b{ color:#fff6e5; background:#ff5a4d; border:.8cqw solid #14183a; border-radius:3cqw; padding:.6cqw 3cqw 1.4cqw; transform:rotate(3deg) translateY(-1.4cqw); }
.gt-blind .gt-art{ --glow:rgba(255,210,31,.45); background:#14121a url(blind-arena/assets/ui/card.webp) center/cover no-repeat; }
.bl-title{ position:absolute; z-index:3; left:4cqw; bottom:4.5cqw; display:flex; flex-direction:column; font:400 12cqw/0.9 'Bungee','Impact',sans-serif; color:#fff3d6; transform:skewX(-8deg) rotate(-3deg);
  text-shadow:.7cqw .7cqw 0 #14121a, -.25cqw -.25cqw 0 #14121a, .25cqw -.25cqw 0 #14121a, -.25cqw .25cqw 0 #14121a; }
.bl-title i{ font-style:normal; color:#ffd21f; }

/* PROJECT ARENA (FPS 3D) : vraie capture du jeu en fond */
.gt-arena .gt-art{ --glow:rgba(255,138,61,.45); background:#0b0d10 url(arena/assets/ui/card.webp) center/cover no-repeat; }
.ar-title{ position:absolute; z-index:3; left:5cqw; bottom:5cqw; display:flex; flex-direction:column; line-height:.85; font:800 13cqw/0.85 'Barlow Condensed','Arial Narrow',sans-serif; color:#f2efe8; letter-spacing:.02em; text-shadow:0 .6cqw 2.4cqw rgba(0,0,0,.7); }
.ar-title i{ font-style:normal; font-size:4.6cqw; color:#ff8a3d; letter-spacing:.3em; }

/* TAMAGOTCHI : vraie capture du jeu (deux Marill qui se font des cœurs), cadre crème et rose « jouet » */
.gt-tama .gt-art{ --fw:1.2cqw; --fc:#fff4e6 #ffd6e2 #f7b3c8 #ffe9f0; --lw:.5cqw; --lc:#ff8fb1; --rw:.35cqw; --rc:#7a3550; --glow:rgba(255,143,177,.45); background:#a8bcd8; }
.tama-pic{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.gt-tama:hover .tama-pic{ transform:scale(1.05); }

/* LES ENCHAÎNÉS (grimpette coop) : vraie capture du jeu en fond */
.gt-ench .gt-art{ --glow:rgba(255,154,60,.5); background:#3a2418 url(enchaines/assets/ui/card.webp) center/cover no-repeat; }
.en-title{ position:absolute; z-index:3; left:5cqw; bottom:5cqw; display:flex; flex-direction:column; line-height:.9; font:900 11.5cqw/0.9 'Lilita One',Fredoka,'Trebuchet MS',sans-serif; color:#fff7ea; letter-spacing:.01em; -webkit-text-stroke:.9cqw #4a2618; paint-order:stroke fill; text-shadow:0 1cqw 0 #4a2618, 0 1cqw 3cqw rgba(0,0,0,.5); }
.en-title i{ font-style:normal; font-size:5cqw; color:#ffbe5c; letter-spacing:.35em; }

/* GALACTIC FOOTBALL (foot 3D) : vraie capture du jeu en fond */
.gt-galactic .gt-art{ --glow:rgba(111,178,255,.5); background:#0b0d22 url(galactic/assets/ui/card.webp) center/cover no-repeat; }
.gf-title{ position:absolute; z-index:3; left:5cqw; bottom:5cqw; display:flex; flex-direction:column; line-height:.9; font:900 11cqw/0.9 'Orbitron','Arial Narrow',sans-serif; color:#fff; letter-spacing:.02em; text-shadow:0 .6cqw 2.4cqw rgba(0,0,0,.8), 0 0 3cqw rgba(60,120,255,.7); }
.gf-title i{ font-style:normal; font-size:4cqw; color:#ffc83d; letter-spacing:.45em; }
.gf-title em{ font-style:normal; font-size:4.6cqw; letter-spacing:.3em; color:#ff6475; }