/* ============================================================
   SPLASH WEB — trois scènes tirées au hasard (≥1024px seulement)
   Maquette validée : brandnew/drafts/splash-web-02-propositions.html
   (1 · STICKERS, 2 · LE PLATEAU, 3 · CHOISIS TON JEU).
   Le calque `.spw` est posé PAR-DESSUS le splash mobile par
   js/splash-web.js ; le téléphone ne le voit jamais.
   Matériaux de la marque uniquement : logo, emojis Noto animés,
   avatars DiceBear, drapeaux locaux, composants du jeu.
   ============================================================ */
/* Les tableaux de bord grand écran (#webHome…, web-common.css) sont en
   position:fixed z-index:1200 : le splash (1000, brutal.css) passait DESSOUS
   et personne ne le voyait sur ordinateur. Il repasse devant tant qu'il vit. */
.splash-screen.sp-web{z-index:5000}
.spw{position:absolute;inset:0;z-index:50;overflow:hidden;font-synthesis:none;
  --ink:#121212;--paper:#FFFCF4;--c1:#FF2E93;--c2:#38CFE3;--c3:#FFD100;
  --fd:'Anton',Impact,sans-serif;--fm:'Space Mono',monospace}
/* avant que GSAP ait posé les états de départ : seul le fond se voit */
.spw.spw-pre>*{visibility:hidden}
.spw.spw-s1{background:var(--c1)}
.spw.spw-s2{background:var(--c3)}
.spw.spw-s3{background:var(--paper)}
.spw.spw-dots::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;visibility:visible;
  background-image:radial-gradient(var(--dotc,rgba(18,18,18,.14)) 1.7px,transparent 2px);background-size:22px 22px}
.spw.spw-s1.spw-dots::before{--dotc:rgba(18,18,18,.16)}
.spw .spw-emo{display:block;width:100%;height:100%;object-fit:contain}
.spw .spw-wm{display:block;width:100%;height:auto}
.spw .spw-ver{position:absolute;right:24px;top:22px;z-index:31;font:13px var(--fd);letter-spacing:1.4px;color:var(--ink);
  background:var(--paper);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:5px 11px}
.spw .spw-load{position:absolute;left:50%;bottom:4.5vh;width:min(40vw,640px);margin-left:max(-20vw,-320px);z-index:30}
.spw .spw-load .spw-bar{height:20px;border:4px solid var(--ink);background:var(--paper);box-shadow:6px 6px 0 var(--ink)}
.spw .spw-load .spw-bar i{display:block;height:100%;width:0;border-right:4px solid var(--ink)}
.spw .spw-load .spw-lbl{display:table;margin:10px auto 0;padding:2px 10px;background:var(--paper);border:3px solid var(--ink);
  font:15px var(--fd);letter-spacing:3px;color:var(--ink)}
.spw .spw-tagx{display:inline-block;font:min(2.6vw,4.4vh) var(--fd);letter-spacing:1px;color:var(--ink);padding:.18em .55em .22em;
  border:4px solid var(--ink);box-shadow:7px 7px 0 var(--ink);white-space:nowrap}

/* ── les stickers : pièces du jeu ───────────────────────────── */
.spw .spw-st{position:absolute;z-index:2}
.spw .spw-st-emo{aspect-ratio:1;border:5px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:1.4vh}
.spw .spw-st-tile{display:flex;align-items:center;gap:1.2vw;padding:1.6vh 1.6vw 1.6vh 1.2vw;border:5px solid var(--ink);box-shadow:8px 8px 0 var(--ink);
  font:min(2.4vw,4.6vh) var(--fd);color:var(--ink);white-space:nowrap}
.spw .spw-st-tile b{width:min(4.4vw,8vh);aspect-ratio:1;display:grid;place-items:center;background:var(--paper);border:4px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);font-weight:400;font-size:.9em;rotate:-4deg}
.spw .spw-st-ava{border:5px solid var(--ink);box-shadow:8px 8px 0 var(--ink);aspect-ratio:1;position:relative}
.spw .spw-st-ava img.spw-a{display:block;width:100%;height:100%}
.spw .spw-st-ava img.spw-f{position:absolute;right:-12px;bottom:-12px;width:38%;border:3px solid var(--ink)}
.spw .spw-st-chip{font:min(2.2vw,4.2vh) var(--fd);color:var(--ink);padding:.25em .6em .3em;border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink);
  white-space:nowrap;display:flex;align-items:center;gap:.35em}
.spw .spw-st-chip img{width:1.25em;height:1.25em}
.spw .spw-tick{display:inline-block;width:.5em;height:.9em;border-right:.18em solid currentColor;border-bottom:.18em solid currentColor;rotate:40deg;translate:0 -.12em;margin:0 .15em}

/* ═══ 1 · STICKERS ═════════════════════════════════════════ */
.spw .spw-core{position:absolute;left:50%;top:46%;width:min(38vw,70vh);margin-left:calc(min(38vw,70vh) / -2);transform:translateY(-50%);z-index:10;text-align:center}
.spw .spw-core .spw-tagx{background:var(--c3);margin-top:-2vh;rotate:-2deg}
.spw.spw-s1 .spw-load .spw-bar i{background:var(--c3)}

/* ═══ 2 · LE PLATEAU ═══════════════════════════════════════ */
.spw .spw-rays{position:absolute;left:50%;top:50%;width:300vmax;height:300vmax;margin:-150vmax 0 0 -150vmax;z-index:0;
  background:repeating-conic-gradient(#FFC400 0deg 7.5deg,var(--c3) 7.5deg 15deg)}
.spw .spw-band{position:absolute;left:-5vw;right:-5vw;height:8.4vh;z-index:6;border-block:5px solid var(--ink);overflow:hidden;display:flex;align-items:center}
.spw .spw-band.spw-top{top:3vh;background:var(--c2);rotate:-2.4deg;box-shadow:0 8px 0 var(--c1)}
.spw .spw-band.spw-bot{bottom:13vh;background:var(--c1);rotate:1.8deg;box-shadow:0 8px 0 var(--c2)}
.spw .spw-track{display:flex;gap:2.4vw;white-space:nowrap;font:min(2.6vw,5vh) var(--fd);letter-spacing:1px;color:var(--ink);padding-left:2vw}
.spw .spw-band.spw-bot .spw-track{color:var(--paper)}
.spw .spw-track i{display:inline-block;width:.42em;height:.42em;background:currentColor;align-self:center;rotate:45deg}
.spw .spw-track span{display:flex;gap:2.4vw;align-items:center}
.spw.spw-s2 .spw-wm.spw-big{position:absolute;left:8vw;top:19vh;width:min(32vw,56vh);z-index:7}
.spw .spw-podium{position:absolute;left:50vw;bottom:19vh;display:flex;align-items:flex-end;gap:1vw;z-index:4}
.spw .spw-pl{width:min(10vw,18vh);display:flex;flex-direction:column;align-items:center}
.spw .spw-pl .spw-st-ava{position:relative;width:100%;margin-bottom:-5px;z-index:2}
.spw .spw-pl .spw-blk{width:100%;border:5px solid var(--ink);box-shadow:8px 8px 0 var(--ink);display:grid;place-items:start center;padding-top:1vh;
  font:min(5vw,9vh) var(--fd);color:var(--ink)}
.spw .spw-trophy{position:absolute;width:min(7vw,12vh);aspect-ratio:1;z-index:8}
.spw .spw-bub{position:absolute;z-index:8;background:var(--paper);border:5px solid var(--ink);box-shadow:8px 8px 0 var(--c1);
  font:min(2.4vw,4.4vh) var(--fd);color:var(--ink);padding:.3em .6em;white-space:nowrap}
.spw .spw-bub::after{content:'';position:absolute;left:24%;bottom:-24px;width:26px;height:26px;background:var(--paper);
  border-right:5px solid var(--ink);border-bottom:5px solid var(--ink);rotate:45deg;translate:0 -9px}
.spw.spw-s2 .spw-load{bottom:2.6vh}
.spw.spw-s2 .spw-load .spw-bar i{background:var(--c1)}

/* ═══ 3 · CHOISIS TON JEU ══════════════════════════════════ */
.spw .spw-cols{position:absolute;inset:-6vh 2vw;display:grid;grid-template-columns:repeat(5,1fr);gap:1.6vw;rotate:-6deg;scale:1.12;z-index:1}
.spw .spw-col{display:flex;flex-direction:column;gap:2.4vh}
.spw .spw-card{height:30vh;flex:none;border:5px solid var(--ink);box-shadow:9px 9px 0 var(--ink);position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;padding:2vh 1.2vw}
.spw .spw-card .spw-gh{position:absolute;right:-3vw;bottom:-4vh;width:22vh;height:22vh;opacity:.32;rotate:-14deg}
.spw .spw-card .spw-box{position:relative;width:12vh;height:12vh;background:var(--paper);border:4px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:1.2vh}
.spw .spw-card b{position:relative;font:min(2.4vw,4.6vh) var(--fd);font-weight:400;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spw .spw-slab{position:absolute;left:-2vw;right:-2vw;top:50%;height:36vh;margin-top:-18vh;background:var(--c2);border-block:6px solid var(--ink);
  box-shadow:0 12px 0 var(--c1);z-index:5;display:flex;align-items:center;justify-content:center;gap:3vw;rotate:-2deg}
.spw .spw-slab .spw-wm{width:min(22vw,40vh)}
.spw .spw-slab .spw-txt{font:min(5.6vw,10.5vh) var(--fd);line-height:.9;color:var(--ink);white-space:nowrap}
.spw .spw-slab .spw-txt small{display:block;font:700 min(1.1vw,2vh) var(--fm);letter-spacing:.3em;margin-top:1.6vh}
.spw.spw-s3 .spw-load .spw-bar i{background:var(--c3)}
.spw.spw-s3 .spw-load .spw-bar{box-shadow:6px 6px 0 var(--c1)}
.spw.spw-s3 .spw-load{z-index:8}