/* ---------- Accueil façon jeu mobile ---------- */
#scrMenu{background:radial-gradient(90% 70% at 50% 45%,#070b1b55,#070b1bee 75%)}
.home{width:min(1120px,100%);margin:auto;display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:8px}
.home .left{display:contents}.home .logo{order:1}.home .punch{order:2}.home .garage{order:3;width:100%;display:flex;flex-direction:column;align-items:center}.home .play{order:4}
@media (orientation:landscape) and (min-width:640px){
  .home{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:2vw;align-items:center;padding-top:0}
  .home .left{display:flex;flex-direction:column;align-items:center}
  .home .garage{padding:2vh 1vw;border-radius:28px;background:radial-gradient(80% 90% at 50% 60%,#ffffff10,#ffffff03);border:1px solid #ffffff1a}
  .home .garage{min-width:0}
  #showcase{flex:1 1 auto;min-width:0;width:auto;height:clamp(140px,40vh,320px)}
  .arrow{width:clamp(40px,7vh,56px);height:clamp(40px,7vh,56px)}
}
.trophies{position:fixed;top:max(12px,env(safe-area-inset-top));left:14px;z-index:30;display:flex;gap:6px;align-items:center;padding:9px 14px;border-radius:14px;border:1px solid var(--line);background:#0b1130cc;font-weight:800;font-size:15px}
.logo.big{font-size:clamp(46px,min(13vw,19vh),150px);line-height:.8;display:flex;flex-direction:column;align-items:center;animation:logoIn .9s cubic-bezier(.2,1.6,.4,1) both}
.logo.big span{display:block;transform:skewX(-8deg);text-shadow:0 0 30px #ff4ba7aa,0 6px 0 #ff4ba7}
.logo.big i{display:block;margin-top:-.04em;animation:neon 3.2s infinite}
.punch{margin:14px 0 0;font:italic 800 clamp(16px,min(2.6vw,4.6vh),26px)/1.1 'Barlow Condensed',sans-serif;letter-spacing:.02em;color:#fff;background:linear-gradient(90deg,var(--pink),var(--gold),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent;animation:fadeUp .6s .5s both}
.show{position:relative;width:100%;display:flex;align-items:center;justify-content:center;margin-top:4px}
#showcase{width:min(560px,74vw);height:clamp(170px,30vh,250px);display:block;touch-action:pan-y}
.arrow{width:56px;height:56px;flex:none;border-radius:50%;border:2px solid #ffffff40;background:#0b1130cc;display:grid;place-items:center;color:#fff;transition:transform .12s,border-color .12s}
.arrow:hover{border-color:#fff;transform:scale(1.08)}.arrow:active{transform:scale(.92)}
.arrow svg{width:26px;height:26px}
.vname{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:-4px}
  .vname b{font:italic 900 clamp(30px,min(6vw,8vh),56px)/1 'Barlow Condensed',sans-serif;color:var(--vc,#fff);text-shadow:0 0 24px var(--vc,#fff)}
.dots{display:flex;gap:7px}.dots i{width:9px;height:9px;border-radius:50%;background:#ffffff33}.dots i.on{background:var(--vc,#fff);box-shadow:0 0 10px var(--vc)}
.dots i.lk{background:transparent;border:1.5px dashed #ffffff55;width:8px;height:8px}
.vname b{text-align:center}.vtag{display:block;margin-top:6px;font:700 13px/1.2 system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#dfe6ff;text-shadow:none;opacity:.85}
.bonusveh{margin:14px auto 0;max-width:460px;padding:12px 16px;border-radius:16px;background:linear-gradient(90deg,#ff4b3b33,#6a8cff33,#2effa033);border:2px solid #ffd166;color:#fff;font-size:14px;line-height:1.4;animation:bonusPulse 1.2s ease-in-out infinite alternate}
.bonusveh b{color:#ffd166;font-size:17px}
@keyframes bonusPulse{from{box-shadow:0 0 0 #ffd16600}to{box-shadow:0 0 28px #ffd16688}}
.stats3{display:grid;grid-template-columns:auto 140px;gap:6px 14px;align-items:center;margin-top:14px;font-weight:800;font-size:13px;color:#dfe6ff;text-align:left}
.stats3 .b{display:flex;gap:3px}.stats3 .b i{flex:1;height:9px;border-radius:3px;background:#ffffff22}.stats3 .b i.on{background:var(--vc)}
.play{position:relative;overflow:hidden;margin-top:clamp(12px,3.5vh,30px);border:0;border-radius:24px;padding:clamp(12px,2.6vh,22px) clamp(48px,6vw,84px);font:italic 900 clamp(34px,min(6vw,9vh),62px)/1 'Barlow Condensed',sans-serif;letter-spacing:.04em;color:#070b1b;background:linear-gradient(180deg,#e7ff8a,var(--lime) 45%,#6fd61b);box-shadow:0 8px 0 #3f8a0c,0 18px 40px -8px #b5ff52aa;animation:pulse 1.6s ease-in-out infinite}
.play::after{content:"";position:absolute;top:-20%;bottom:-20%;width:40%;left:-60%;background:linear-gradient(100deg,#fff0,#ffffffb0,#fff0);transform:skewX(-20deg);animation:shine 2.6s 1s infinite}
.play:active{transform:translateY(6px);box-shadow:0 2px 0 #3f8a0c}
.bar{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.title2{font:italic 900 clamp(32px,5vw,48px)/1 'Barlow Condensed',sans-serif;margin:0}
.back{font-size:30px;line-height:1}
.trk{min-height:clamp(150px,24vh,190px);padding-top:clamp(52px,8vw,74px);justify-content:flex-end;background:linear-gradient(150deg,var(--c),var(--c2));border:3px solid transparent;color:#070b1b;overflow:hidden}
.trk::before{content:attr(data-ico);position:absolute;right:8px;top:6px;font-size:clamp(34px,5vw,56px);line-height:1;filter:drop-shadow(0 6px 10px #0006);transform:rotate(-8deg)}
.trk b{padding-right:4px;text-shadow:0 1px 0 #ffffff66}
.trk .sw{display:none}
.trk b{font-size:30px;color:#070b1b}.trk small{color:#070b1bcc;font-weight:700}
.trk .rec{color:#070b1b;background:#ffffff8a;border-radius:999px;padding:4px 10px;align-self:flex-start;margin-top:10px}
.trk[aria-pressed="true"]{border-color:#fff;box-shadow:0 0 0 3px #ffffff55,0 16px 40px -10px var(--c);transform:translateY(-4px)}

.worlds .trk{min-height:clamp(120px,19vh,170px)}
.tracks.worlds{grid-template-columns:repeat(5,1fr)}.worlds .trk b{font-size:clamp(19px,2.3vw,26px)}
.trk.locked{filter:grayscale(.9) brightness(.55);cursor:not-allowed}
.trk .lock{position:absolute;left:12px;top:10px;font-size:30px;text-shadow:0 4px 18px #000;filter:none}
.stars-total{margin-left:auto;font:italic 900 26px/1 'Barlow Condensed',sans-serif;color:var(--gold)}
.levels{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.lvl{position:relative;text-align:left;border:2px solid var(--line);background:#0b1130e6;border-radius:20px;padding:14px;min-height:190px;display:flex;flex-direction:column;gap:6px;transition:transform .12s,border-color .12s}
.lvl:not(.locked):hover{transform:translateY(-3px);border-color:var(--c)}
.lvl .num{font:italic 900 40px/1 'Barlow Condensed',sans-serif;color:var(--c)}
.lvl b{font:italic 800 20px/1.05 'Barlow Condensed',sans-serif}
.lvl .st{font-size:18px;letter-spacing:2px;color:var(--gold)}
.lvl .new{align-self:flex-start;font-size:11px;font-weight:800;padding:3px 8px;border-radius:999px;background:var(--c);color:#070b1b}
.lvl .times{margin-top:auto;font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:3px}
.lvl .times strong{color:#fff}
.lvl.locked{opacity:.45;cursor:not-allowed}
.lvl.boss{background:linear-gradient(160deg,#0b1130e6,color-mix(in srgb,var(--c) 30%,#0b1130))}
.netinfo{font-size:13px;color:var(--muted);margin-top:14px}
.pseudo{position:fixed;top:max(12px,env(safe-area-inset-top));left:120px;z-index:30;padding:9px 14px;border-radius:14px;border:1px solid var(--line);background:#0b1130cc;font-weight:800;font-size:14px;color:#fff;max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#nameInput{flex:1;min-width:200px;font:700 20px 'DM Sans',sans-serif;padding:14px 18px;border-radius:16px;border:2px solid var(--line);background:#0b1130;color:#fff}
.res-stars{font-size:40px;letter-spacing:6px;margin-top:6px;color:var(--gold)}
.res-stars .off{color:#ffffff30}
.res-world{margin-top:12px;font-size:15px;color:#dfe6ff}
.res-world b{color:var(--gold)}
@media (max-width:900px){.levels{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.bar{padding-right:104px;flex-wrap:wrap}.stars-total{margin-left:0;font-size:22px}.levels{grid-template-columns:repeat(2,1fr)}.pseudo{left:auto;right:110px;top:max(12px,env(safe-area-inset-top))}}
@keyframes logoIn{0%{opacity:0;transform:scale(.5) rotate(-6deg)}100%{opacity:1;transform:none}}
@keyframes neon{0%,100%{opacity:1}46%{opacity:1}48%{opacity:.5}50%{opacity:1}52%{opacity:.7}54%{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes shine{0%{left:-60%}40%,100%{left:130%}}
@media (max-height:620px){.stats3{margin-top:6px;gap:3px 12px}.punch{margin-top:8px}}
@media (prefers-reduced-motion:reduce){.logo.big,.logo.big i,.punch,.play,.play::after{animation:none}}
@media (max-width:820px){.vehs{grid-template-columns:repeat(3,1fr)}.tracks,.tracks.worlds{grid-template-columns:repeat(2,1fr)}.help{grid-template-columns:repeat(2,auto)}}
@media (orientation:portrait) and (max-width:700px){.portrait{display:block}}
@media (prefers-reduced-motion:reduce){.go,.trk{transition:none}}
