/* Accueil : fond, carte, logo, cartes de monde. */
#homebg { position:fixed; inset:0; width:100%; height:100%; }
#home .veil { position:fixed; inset:0; background:radial-gradient(ellipse at center, rgba(21,23,31,.55), rgba(21,23,31,.92) 80%); }
.home-wrap { position:relative; min-height:100%; display:flex; align-items:center; justify-content:center; padding:24px 16px; }
.home-card { width:min(760px, 100%); padding:26px 28px 22px; background:rgba(31,34,48,.96); border:1px solid var(--line); border-radius:16px; box-shadow:0 24px 60px rgba(0,0,0,.45); }
.homeHead { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.logo { margin:0; text-align:left; }
.logo { position:relative; padding-top:14px; }
.logo .gb { position:absolute; left:2px; top:-2px; z-index:1; padding:1px 11px 3px; font:900 italic clamp(15px, 3.6vw, 19px)/1.1 system-ui, sans-serif;
            letter-spacing:.02em; color:#fff; background:var(--accent); border:3px solid #0b0c11; box-shadow:3px 3px 0 #0b0c11; border-radius:6px; transform:rotate(-4deg); transform-origin:left bottom; }
.logo .words { display:block; padding-top:10px; font:900 clamp(34px, 8.5vw, 52px)/.9 system-ui, sans-serif; letter-spacing:-.02em; text-transform:uppercase; color:var(--text);
               text-shadow:3px 3px 0 #0b0c11; white-space:nowrap; }
/* le U de GAUNTLET est une coupe ou le cube attend, yeux ronds qui le suivent du regard */
.logo .uCube { display:inline-block; height:.74em; width:auto; margin:0 .015em; overflow:visible; vertical-align:-.03em; }
.uCube .cup { filter:drop-shadow(3px 3px 0 #0b0c11); }
.uCube .gob { animation:gobHop 2.6s ease-in-out infinite; transform-box:fill-box; transform-origin:50% 100%; }
.uCube .pup { animation:gobLook 5.2s ease-in-out infinite; }
@keyframes gobHop { 0%, 55%, 100% { transform:none; } 62% { transform:translateY(2px) scale(1.12, .86); } 72% { transform:translateY(-9px) scale(.92, 1.1); } 84% { transform:translateY(0) scale(1.08, .92); } 92% { transform:none; } }
@keyframes gobLook { 0%, 20%, 100% { transform:translate(0, 0); } 30%, 50% { transform:translate(-1px, 0); } 60%, 80% { transform:translate(1px, -.6px); } }
@media (prefers-reduced-motion:reduce) { .uCube .gob, .uCube .pup { animation:none; } }
.headTools { display:flex; align-items:center; gap:6px; flex:none; padding-top:2px; }
.accountPill { display:flex; align-items:center; gap:6px; padding:3px 4px 3px 10px; border:1px solid var(--line); border-radius:99px; background:var(--panel2); font-size:12px; color:var(--muted); white-space:nowrap; }
.accountPill b { color:var(--text); }
.accountPill .linkBtn { padding:3px 9px; border-radius:99px; background:rgba(255,255,255,.06); color:var(--text); }
.accountPill .linkBtn:hover { background:rgba(255,255,255,.12); }
.iconBtn { display:grid; place-items:center; width:30px; height:30px; border:1px solid var(--line); border-radius:50%; background:var(--panel2); color:var(--muted); cursor:pointer; }
.iconBtn:hover { color:var(--text); border-color:var(--line2); }
.iconBtn .hudIcon { width:15px; height:15px; }
.homeCorner { position:fixed; top:14px; right:16px; z-index:30; display:flex; align-items:center; gap:8px; }
.profNameRow { display:inline-flex; align-items:center; gap:6px; min-width:0; max-width:100%; vertical-align:middle; }
.profNameRow b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.adminBadge, .adminStarBadge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:19px;
  height:19px;
  box-sizing:border-box;
  padding:0;
  margin:0;
  border-radius:5px;
  background:var(--goldBg);
  border:1px solid rgba(255,207,107,.45);
  color:var(--gold);
  line-height:0;
  flex-shrink:0;
  cursor:help;
  box-shadow:0 0 8px rgba(255,207,107,.2);
  vertical-align:middle;
}
.adminBadge[hidden], .adminStarBadge[hidden] { display:none !important; }
.adminStarIcon { display:block; width:11px; height:11px; margin:auto; fill:currentColor; pointer-events:none; }
.stats { display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 18px; }
.stats div { display:flex; align-items:baseline; gap:6px; padding:4px 11px; border:1px solid var(--line); border-radius:99px; background:var(--panel2); }
.stats b { font-size:13px; font-variant-numeric:tabular-nums; }
.stats span { color:var(--muted); font-size:12px; }
.stats .live { align-self:center; width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 3px rgba(95,214,168,.18); }
.secTitle { margin:0 0 8px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); }
.worldsBlock { margin-bottom:6px; }
.worlds { display:flex; flex-direction:column; gap:10px; }
.home-card .tabs { margin:16px 0 16px; padding:0 0 0; gap:2px; }
.home-card .tabs button { padding:10px 16px; font-size:14px; }
.home-card .tabs button.on { color:var(--text); border-bottom-width:3px; }
.home-card .secTitle { margin-top:2px; }
/* bannieres de monde : fond illustre par theme, etat, progression, actions */
.world { overflow:hidden; border:1px solid var(--line2); border-radius:14px; background:#181a24; }
.world.locked { opacity:.6; }
/* Brume devant un monde verrouille (voir fogMode dans 220-menu.js). Un voile flou, des nappes de brouillard (bruit fractal SVG, en tuiles
   raccordees) qui derivent a des vitesses differentes, quelques volutes : le tout deborde un peu du cadre et s'estompe sur les bords.
   .reveal : les nappes filent vers les bords et le voile se dissipe (une seule fois, au deblocage). */
.world { position:relative; }
.world.fogged { opacity:1; overflow:visible; }
.wFog { position:absolute; inset:-16px -12px; z-index:5; display:grid; place-items:center; pointer-events:auto;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite:source-in; mask-image:linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-composite:intersect; }
.wFog .veil { position:absolute; inset:16px 12px; border-radius:14px; background:rgba(132,140,168,.5); -webkit-backdrop-filter:blur(5px) saturate(.5); backdrop-filter:blur(5px) saturate(.5); }
.wFog .mist { position:absolute; inset:-10% -35%; background-repeat:repeat; filter:blur(1.5px); animation:mistDrift 60s linear infinite; animation-delay:var(--fogT, 0s); }
.wFog .m1 { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='640' height='320'><filter id='f' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.003 .008' numOctaves='3' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .9  0 0 0 0 .92  0 0 0 0 .98  0 0 0 1.35 -.3'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>"); background-size:640px 320px; opacity:.9; }
.wFog .m2 { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='640' height='320'><filter id='f' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.005 .013' numOctaves='3' seed='11' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .9  0 0 0 0 .92  0 0 0 0 .98  0 0 0 1.25 -.36'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>"); background-size:520px 260px; opacity:.6; animation-duration:38s; animation-direction:reverse; }
.wFog .m3 { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='640' height='320'><filter id='f' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.009 .022' numOctaves='3' seed='23' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .9  0 0 0 0 .92  0 0 0 0 .98  0 0 0 1.1 -.4'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>"); background-size:420px 210px; opacity:.4; animation-duration:24s; }
@keyframes mistDrift { from { background-position:0 0; } to { background-position:640px 0; } }
.wFog .m2 { animation-name:mistDrift2; }
@keyframes mistDrift2 { from { background-position:0 0; } to { background-position:520px 0; } }
.wFog .m3 { animation-name:mistDrift3; }
@keyframes mistDrift3 { from { background-position:0 0; } to { background-position:420px 0; } }
.wFog .puff { position:absolute; width:42%; height:120%; border-radius:50%; background:radial-gradient(closest-side, rgba(226,230,244,.55), rgba(226,230,244,0)); filter:blur(10px);
  animation:fogDriftL 16s ease-in-out infinite alternate; animation-delay:var(--fogT, 0s); }
.wFog .puff.r { animation-name:fogDriftR; }
.wFog .p1 { left:-8%; top:-30%; } .wFog .p2 { right:-6%; top:-35%; animation-duration:21s; } .wFog .p3 { left:18%; bottom:-45%; animation-duration:13s; } .wFog .p4 { right:14%; bottom:-40%; animation-duration:18s; }
@keyframes fogDriftL { from { transform:translateX(-8%) scale(1); } to { transform:translateX(16%) scale(1.15); } }
@keyframes fogDriftR { from { transform:translateX(10%) scale(1.1); } to { transform:translateX(-14%) scale(1); } }
.fogLabel { position:relative; z-index:2; display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:99px; background:rgba(16,18,28,.8);
  border:1px solid rgba(255,255,255,.16); box-shadow:0 6px 20px rgba(0,0,0,.35); color:#e3e6f2; font-size:13px; font-weight:700; }
.fogLabel .lock-ico { width:16px; height:16px; }
.wFog.reveal { pointer-events:none; }
.wFog.reveal .veil { animation:fogClear 2.8s ease-in forwards; animation-delay:var(--revT, 0s); }
.wFog.reveal .l { animation:fogOutL 2.7s cubic-bezier(.5,0,.8,.6) forwards; animation-delay:var(--revT, 0s); }
.wFog.reveal .r { animation:fogOutR 2.7s cubic-bezier(.5,0,.8,.6) forwards; animation-delay:var(--revT, 0s); }
.wFog.reveal::after { content:''; position:absolute; top:16px; bottom:16px; width:40%; left:-40%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  animation:fogShine 1.6s ease-out forwards; animation-delay:calc(var(--revT, 0s) + .6s); }
@keyframes fogClear { 0% { opacity:1; } 40% { opacity:.8; } 100% { opacity:0; -webkit-backdrop-filter:blur(0); backdrop-filter:blur(0); } }
@keyframes fogOutL { to { transform:translateX(-30%) scale(1.15); opacity:0; } }
@keyframes fogOutR { to { transform:translateX(30%) scale(1.15); opacity:0; } }
@keyframes fogShine { to { left:110%; } }
@media (prefers-reduced-motion:reduce) { .wFog .puff, .wFog .mist { animation:none; } }
.world.current { border-color:rgba(255,90,95,.6); }
.wBody { position:relative; display:flex; box-sizing:border-box; min-height:196px; padding:18px 20px; }   /* meme hauteur pour tous les mondes */
.wMain { position:relative; z-index:1; flex:1; min-width:0; display:flex; flex-direction:column; justify-content:space-between; gap:14px; }
.wArt { position:absolute; top:0; right:0; bottom:0; width:32%; pointer-events:none; background-size:cover; background-position:right center; background-repeat:no-repeat;  -webkit-mask-image:linear-gradient(to right, transparent, #000 70%); mask-image:linear-gradient(to right, transparent, #000 70%); }
.world.locked .wArt { filter:hue-rotate(var(--hue, 0deg)) grayscale(1) brightness(.6); }
.wHead { display:flex; align-items:center; gap:12px; }
.wNum { flex:none; width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:#12141d; border:1px solid var(--line2); font-weight:900; font-size:17px; color:#c3c8db; }
.world.current .wNum { background:var(--accent); border-color:transparent; color:#fff; }
.world.done .wNum { background:var(--mint); border-color:transparent; color:#15171f; }
.wInfo { flex:1; min-width:0; }
.wInfo b { display:block; font-size:16px; line-height:1.25; }
.wInfo span { display:block; margin-top:1px; color:#8f96b0; font-size:12.5px; }
.wFoot { display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap; margin-top:auto; }
.wSide { display:flex; align-items:center; gap:8px; }
.wSide:empty { display:none; }
.wTrack { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.wTrack .d { position:relative; flex:none; width:14px; height:14px; border-radius:50%; background:rgba(21,23,31,.7); border:1.5px solid rgba(255,255,255,.28); box-sizing:border-box; }
.wTrack .d.cleared { background:rgba(95,214,168,.45); border-color:rgba(95,214,168,.85); }
.wTrack .d.m-bronze { background:#d98a52; border-color:#d98a52; } .wTrack .d.m-argent { background:#c9cedd; border-color:#c9cedd; }
.wTrack .d.m-or { background:#ffcf6b; border-color:#ffcf6b; }
.wTrack .d.m-diamant { --c:#7fe3ff; width:17px; height:17px; background:none; border:0; border-radius:0; margin:-1px 0; }
.wTrack .d.boss, .wTrack .d.boss.cleared { width:19px; height:19px; margin:-2.5px 0 -2.5px 6px; border:0; border-radius:0; background:none; }   /* dessin = 14.7 px, comme les medailles (14 px) */
.wTrack .d.here::after { content:''; position:absolute; left:50%; bottom:-8px; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:#fff; opacity:.85; }
.wVit { align-self:flex-start; max-width:100%; }
.wVit .shelf { display:flex; flex-wrap:nowrap; gap:9px; align-items:flex-end; position:relative; }
.wVit .shelf::after { content:''; position:absolute; left:-4px; right:-4px; top:35px; height:2px; border-radius:1px; background:rgba(255,255,255,.1); }
.wVit .it { position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; }
.wVit .it.boss { margin-left:6px; }
.wVit .alv { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; margin-bottom:7px; position:relative; }
.wVit .alv:not(.has):not(.boss) svg { display:none; }
.wVit .alv:not(.has):not(.boss)::before { content:''; width:20px; height:20px; box-sizing:border-box; border-radius:50%; border:1.5px dashed rgba(255,255,255,.14); }
.wVit .alv svg { width:28px; height:28px; display:block; }
.wVit .alv svg.gem { --c:#7fe3ff; }
.wVit .alv svg.ghost { opacity:.16; filter:grayscale(1); }
.wVit .alv.boss svg { width:26px; height:26px; }
.wVit .it.here .alv { outline:2px solid #ff5a5f; outline-offset:2px; }
.wVit .pl { min-width:20px; font-size:10px; font-weight:800; text-align:center; color:#565c75; }
.wVit .pl.on { color:#e0b657; }
.world.tease { border-style:dashed; opacity:.85; }
.world.tease .wArt { filter:none; }
.world.tease .wRule { max-width:38%; }
.chains { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.chain { position:absolute; left:-12%; top:50%; width:124%; height:18px; margin-top:-9px; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='18' viewBox='0 0 40 18' fill='none'><rect x='1.5' y='2.5' width='22' height='13' rx='6.5' stroke='%238a90ab' stroke-width='3'/><rect x='19' y='6' width='19' height='6' rx='3' stroke='%23596079' stroke-width='3'/></svg>") repeat-x 0 0 / 40px 18px; opacity:.5; filter:drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.chain.a { transform:rotate(-15deg); animation:chainA 4s ease-in-out infinite, creepA 7s linear infinite; }
.chain.b { transform:rotate(15deg); animation:chainB 4s ease-in-out infinite, creepB 7s linear infinite; }
.padlock { position:absolute; left:50%; top:50%; width:58px; height:58px; margin:-29px 0 0 -29px; display:grid; place-items:center; border-radius:50%; background:#1a1d2e; border:2px solid #3a3f58; box-shadow:0 0 0 5px rgba(26,29,46,.8); transform-origin:50% 8%; animation:padRattle 4s ease-in-out infinite, padGlow 2.8s ease-in-out infinite; }
.padlock svg { width:30px; height:30px; }
@keyframes chainA { 0%, 55%, 100% { transform:rotate(-15deg); } 60% { transform:rotate(-16.5deg) translateY(2px); } 66% { transform:rotate(-13.8deg); } 72% { transform:rotate(-15.8deg); } 80% { transform:rotate(-14.7deg); } }
@keyframes chainB { 0%, 55%, 100% { transform:rotate(15deg); } 60% { transform:rotate(13.6deg) translateY(-2px); } 66% { transform:rotate(16.2deg); } 72% { transform:rotate(14.4deg); } 80% { transform:rotate(15.5deg); } }
@keyframes creepA { to { background-position-x:40px; } }
@keyframes creepB { to { background-position-x:-40px; } }
@keyframes padGlow { 0%, 100% { box-shadow:0 0 0 5px rgba(26,29,46,.8), 0 0 10px 2px rgba(169,130,255,0); } 50% { box-shadow:0 0 0 5px rgba(26,29,46,.8), 0 0 22px 6px rgba(169,130,255,.4); } }
@keyframes padRattle { 0%, 55%, 100% { transform:rotate(0); } 59% { transform:rotate(-16deg); } 63% { transform:rotate(14deg); } 67% { transform:rotate(-10deg); } 71% { transform:rotate(6deg); } 75% { transform:rotate(-3deg); } }
@media (prefers-reduced-motion:reduce) { .chain, .padlock { animation:none; } }
@media (max-width:640px) { .world.tease .wRule { max-width:none; } }
.world.tease .wInfo span { color:#a982ff; letter-spacing:.3em; font-weight:800; }
.wFoot .wRule { flex:1 1 200px; }
.wRule { margin:0; font-size:12.5px; line-height:1.45; color:#8f96b0; }
.wRule b { color:#e3e6f2; }
.wBtn { box-sizing:border-box; height:34px; display:inline-flex; align-items:center; justify-content:center; line-height:1; padding:7px 14px; border:1px solid var(--line2); border-radius:9px; background:rgba(21,23,31,.85); color:var(--text); font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.wBtn:hover { border-color:var(--accent); }
.wBtn.drop::after { content:''; margin:2px 0 0 8px; border:4px solid transparent; border-top-color:currentColor; border-bottom-width:0; transition:transform .15s; }
.wBtn.drop.open::after { transform:rotate(180deg); }
.wBtn.primary { background:var(--accent); border-color:transparent; color:#fff; }
.wBtn.primary:hover { filter:brightness(1.07); }
.world > .pickGrid { margin:0 16px 16px; padding:14px 0 0; border-top:1px solid rgba(255,255,255,.1); }
@media (max-width:640px) { .wArt { display:none; } .wBody { padding:14px; } .world > .pickGrid { grid-template-columns:1fr; } }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:8px; }
.grid[hidden], h2[hidden], section[hidden], .tabs button[hidden], #worldPicker[hidden] { display:none; }
#worldPicker { margin-top:12px; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--panel2); }
#worldPicker h3 { margin:0 0 8px; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.wbGrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:10px; }
.wbCard { padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--panel2); }
.wbCard h4 { margin:0 0 6px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.wbCard ol { margin:0; padding:0 0 0 20px; font-size:13px; font-variant-numeric:tabular-nums; }
.wbCard li { padding:2px 0; } .wbCard li span { float:right; color:var(--muted); }
.wbCard li.me { color:var(--accent); font-weight:700; }
.wbCard li:nth-child(1)::marker { color:var(--gold); font-weight:800; }
.wbCard .empty { list-style:none; margin-left:-20px; color:var(--muted); font-size:12px; }
#name[readonly] { color:var(--muted); cursor:default; }
.seg { display:flex; gap:4px; padding:3px; margin-bottom:10px; border-radius:9px; background:var(--panel2); border:1px solid var(--line); }
.seg button { flex:1; padding:7px 8px; border:0; border-radius:6px; background:none; color:var(--muted); font:inherit; font-size:12px; font-weight:700; cursor:pointer; }
.seg button.on { background:var(--panel); color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.3); }
.fld { display:block; margin-bottom:10px; font-size:11px; font-weight:700; color:var(--muted); letter-spacing:.04em; }
.fld input, .fld textarea { display:block; width:100%; margin-top:4px; padding:9px 10px; box-sizing:border-box; border-radius:8px; border:1px solid var(--line2);
             background:var(--panel2); color:var(--text); font:inherit; font-size:14px; letter-spacing:0; font-weight:400; }
.fld input:focus, .fld textarea:focus { outline:none; border-color:rgba(255,255,255,.4); }
.fld textarea { resize:vertical; min-height:96px; line-height:1.4; }
.formErr { margin:0 0 10px; padding:7px 10px; border-radius:8px; background:rgba(255,90,95,.12); border:1px solid rgba(255,90,95,.35); color:#ff8e92; font-size:12px; }
.formErr[hidden] { display:none; }
.primaryBtn { width:100%; padding:10px; border:0; border-radius:8px; background:var(--accent); color:#fff; font:inherit; font-weight:800; font-size:14px; cursor:pointer; }
.primaryBtn:disabled { opacity:.6; cursor:wait; }
/* Onglet Versus : annonce « bientot » */
.soonPill { display:inline-block; margin-left:5px; padding:1px 7px; border-radius:99px; font-size:10px; font-weight:800; letter-spacing:.04em; color:#ffcf6b; background:rgba(255,207,107,.12); border:1px solid rgba(255,207,107,.35); vertical-align:2px; }
.soonPill.big { font-size:12px; padding:2px 10px; vertical-align:4px; }
.vsSoon { display:flex; flex-direction:column; align-items:center; gap:18px; padding:22px 18px 24px; border:1px solid var(--line2); border-radius:14px; background:#181a24; }
.vsArt { width:min(100%, 640px); height:auto; display:block; border:3px solid #0b0c11; border-radius:14px; box-shadow:5px 5px 0 #0b0c11; }
.vsRunA { animation:vsRunA 2.8s ease-in-out infinite; }
.vsRunB { animation:vsRunB 2.8s ease-in-out infinite; }
@keyframes vsRunA { 0% { transform:translateX(0); } 50% { transform:translateX(150px); } 100% { transform:translateX(0); } }
@keyframes vsRunB { 0% { transform:translateX(0); } 50% { transform:translateX(120px); } 100% { transform:translateX(0); } }
.vsBadge { transform-box:fill-box; transform-origin:center; animation:vsPulse 1.6s ease-in-out infinite; }
@keyframes vsPulse { 0%, 100% { transform:scale(1); } 50% { transform:scale(1.07); } }
@media (prefers-reduced-motion:reduce) { .vsRunA, .vsRunB, .vsBadge { animation:none; } }
/* « Bientot disponible » : seul texte de l'onglet, on garde le secret sur le mode */
.vsSoonMsg { margin:0; }
.vsSoonMsg .soonPill { margin:0; padding:6px 18px; font-size:14px; letter-spacing:.08em; vertical-align:0; animation:vsSoonGlow 2.4s ease-in-out infinite; }
@keyframes vsSoonGlow { 0%, 100% { opacity:.75; } 50% { opacity:1; } }
/* Onglet Communaute */
.commHead { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.commNote { margin:0; font-size:12.5px; color:var(--muted); }
.commMake { flex:none; padding:8px 14px; border:2.5px solid #0b0c11; border-radius:9px; box-shadow:3px 3px 0 #0b0c11; background:var(--accent); color:#fff; font-weight:800; font-size:13px; text-decoration:none; }
.commList { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:14px; }
.commCard { display:flex; flex-direction:column; border:2.5px solid #0b0c11; border-radius:11px; box-shadow:4px 4px 0 #0b0c11; background:#1c2032; color:var(--text); text-decoration:none; overflow:hidden; transition:transform .12s, box-shadow .12s; }
.commCard:hover { transform:translate(-2px, -2px); box-shadow:6px 6px 0 #0b0c11; }
.commPrev { display:block; width:100%; height:auto; image-rendering:pixelated; border-bottom:2.5px solid #0b0c11; }
.commInfo { display:flex; flex-direction:column; gap:2px; padding:9px 11px 11px; }
.commInfo b { font-size:13.5px; }
.commInfo small { color:var(--muted); font-size:12px; }
.commEmpty { color:var(--muted); }