/* Page du joueur (téléphone du public) — même identité que remote.html et l'affiche « Salsa du Démon ». */
:root{
  --noir:#0c0305;--braise:#2a070b;--rouge:#5c0d12;--carte:rgba(40,8,12,.72);
  --or:#ffc93c;--or2:#ff8a1f;--feu:#ff4d1a;--rose:#ff3d8b;--cyan:#2be4ff;--vert:#3df07a;--danger:#ff3b4e;
  --texte:#fff7ef;--doux:#f0cdbd;--trait:rgba(255,180,120,.24);
  --rayon:20px;--vite:.16s;
  --titre:"Arial Black","Segoe UI Black","Roboto Black",system-ui,-apple-system,sans-serif;
  --corps:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{touch-action:manipulation;-webkit-text-size-adjust:100%;background:var(--noir)}
html,body{margin:0;color:var(--texte);font-family:var(--corps);overscroll-behavior:none}
body{min-height:100vh;min-height:100dvh;font-size:18px;line-height:1.35;-webkit-user-select:none;user-select:none;
  padding:0 max(16px,env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  background:radial-gradient(120% 60% at 50% 115%,#7a1508 0%,#3a0709 38%,transparent 70%),linear-gradient(180deg,#140305 0%,#1c0407 50%,#100304 100%) fixed}
button,input{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer;touch-action:manipulation;padding:0}
svg.i{width:26px;height:26px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cache{display:none!important}
#feu{position:fixed;left:0;right:0;bottom:0;height:46vh;z-index:-1;pointer-events:none;opacity:.55;
  background:radial-gradient(40% 70% at 12% 100%,#ff5a1a66,transparent 70%),radial-gradient(35% 60% at 88% 100%,#ff2d5a55,transparent 70%),radial-gradient(50% 55% at 50% 105%,#ffb02055,transparent 70%);
  animation:flamme 3.2s ease-in-out infinite alternate}
@keyframes flamme{from{opacity:.42;transform:scaleY(.96)}to{opacity:.62;transform:scaleY(1.04)}}
.or-texte{font-family:var(--titre);font-weight:900;background:linear-gradient(180deg,#fff6c2 0%,#ffd34d 38%,#ff9a1f 70%,#e8480f 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 10px rgba(255,106,0,.45))}

/* en-tête */
#tete{position:sticky;top:0;z-index:4;margin:0 calc(-1 * max(16px,env(safe-area-inset-left)));padding:calc(10px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left));
  display:flex;align-items:center;gap:10px;background:linear-gradient(180deg,rgba(18,3,5,.97) 70%,rgba(18,3,5,.0))}
.logo{font-size:19px;line-height:1;white-space:nowrap}
.logo small{display:block;font-size:10.5px;letter-spacing:.3em;margin-top:3px}
#lien{margin-left:auto;display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:99px;background:rgba(255,255,255,.06);border:1px solid var(--trait);font-size:13.5px;font-weight:700;color:var(--doux);min-height:38px;max-width:52vw}
#lien span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#lien i{width:11px;height:11px;border-radius:50%;background:#777;flex:none}
#lien.ok i{background:var(--vert);box-shadow:0 0 10px var(--vert)}
#lien.ko i{background:var(--danger);box-shadow:0 0 10px var(--danger)}
#lien.att i{background:var(--or);box-shadow:0 0 10px var(--or);animation:clignote .7s ease-in-out infinite alternate}

/* écrans */
.ecran{max-width:560px;margin:0 auto;padding-top:6px;animation:entre .22s ease-out}
@keyframes entre{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
h1{margin:8px 0 6px;font-size:clamp(30px,9.5vw,46px);line-height:1;text-align:center}
h2{margin:18px 2px 10px;font-family:var(--titre);font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--or);display:flex;align-items:center;gap:8px}
.sous{margin:0 0 16px;text-align:center;font-size:14px;letter-spacing:.28em;text-transform:uppercase;color:var(--doux)}
p{margin:10px 2px}
.note{font-size:15.5px;color:var(--doux)}
.err{min-height:1.4em;color:#ff9db0;font-weight:800;font-size:16px;margin:8px 2px}
.carte{position:relative;margin-top:14px;padding:16px;border-radius:24px;background:linear-gradient(160deg,rgba(92,13,18,.85),rgba(28,4,8,.9));border:1.5px solid rgba(255,201,60,.55);box-shadow:0 0 30px rgba(255,90,20,.25),inset 0 1px 0 rgba(255,255,255,.12)}
.pile{display:grid;gap:12px;margin-top:16px}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* boutons « verre néon » */
.btn{position:relative;overflow:hidden;min-height:64px;width:100%;border-radius:var(--rayon);padding:10px 14px;display:flex;align-items:center;justify-content:center;gap:10px;text-align:center;
  font-family:var(--titre);font-size:18px;font-weight:900;letter-spacing:.02em;line-height:1.1;color:var(--texte);
  background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.03));border:1.5px solid var(--trait);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 20px rgba(0,0,0,.45);
  transition:transform var(--vite),border-color var(--vite),box-shadow var(--vite),filter var(--vite),opacity var(--vite)}
.btn small{display:block;font-family:var(--corps);font-size:13.5px;font-weight:600;letter-spacing:0;color:var(--doux);margin-top:3px}
.btn.col{flex-direction:column;gap:4px}
.btn.tape,.btn:active{transform:scale(.97);border-color:var(--or);filter:brightness(1.15)}
.btn:disabled{opacity:.38;filter:grayscale(.4)}
.btn.or{color:#2a0a00;border-color:#ffd56b;background:linear-gradient(180deg,#ffe58a 0%,#ffc23c 45%,#ff8a1f 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.55),0 0 26px rgba(255,138,31,.45),0 10px 24px rgba(0,0,0,.5)}
.btn.or small{color:#5a2300}
.btn.grand{min-height:84px;font-size:24px}
.btn.rose{border-color:rgba(255,61,139,.75);box-shadow:0 0 18px rgba(255,61,139,.30),0 8px 20px rgba(0,0,0,.45)}
.btn.rose svg.i{color:var(--rose)}
.btn.cyan{border-color:rgba(43,228,255,.65);box-shadow:0 0 18px rgba(43,228,255,.22),0 8px 20px rgba(0,0,0,.45)}
.btn.cyan svg.i{color:var(--cyan)}
.btn.discret{min-height:56px;font-family:var(--corps);font-size:15.5px;font-weight:700;color:var(--doux);background:transparent;box-shadow:none;border-style:dashed}
.btn.danger{border-color:rgba(255,59,78,.8);background:linear-gradient(180deg,rgba(255,59,78,.24),rgba(120,10,20,.3))}
.btn.confirmer{color:#2a0a00;border-color:var(--or);background:linear-gradient(180deg,#ffe58a,#ffb02e);animation:clignote .6s ease-in-out infinite alternate}
@keyframes clignote{from{box-shadow:0 0 10px rgba(255,201,60,.4)}to{box-shadow:0 0 30px rgba(255,201,60,.9)}}

/* accueil */
#eAccueil .grosTitre{margin-top:8vh;font-size:clamp(52px,17vw,92px);line-height:.92;text-align:center;letter-spacing:.01em}
#eAccueil .accroche{margin:14px 0 6px;text-align:center;font-family:var(--titre);font-size:clamp(20px,6vw,28px);color:var(--rose);text-shadow:0 0 14px rgba(255,61,139,.7),0 0 2px #fff}
#eAccueil .etapes{display:flex;justify-content:center;gap:16px;margin:22px 0 26px;color:var(--doux);font-size:13.5px;font-weight:700;text-align:center}
#eAccueil .etapes div{display:flex;flex-direction:column;align-items:center;gap:6px;width:78px}
#eAccueil .etapes svg.i{width:38px;height:38px;color:var(--or);padding:7px;border-radius:14px;background:rgba(255,201,60,.1);border:1px solid rgba(255,201,60,.35);box-sizing:content-box}
#bJouer{min-height:min(26vh,180px);font-size:clamp(34px,11vw,50px);border-radius:30px;animation:halo 1.8s ease-in-out infinite alternate}
#bJouer svg.i{width:44px;height:44px;stroke-width:2.6}
@keyframes halo{from{box-shadow:0 0 0 4px rgba(255,140,30,.14),0 0 40px rgba(255,100,20,.5),inset 0 3px 0 rgba(255,255,255,.55)}to{box-shadow:0 0 0 12px rgba(255,140,30,.10),0 0 80px rgba(255,100,20,.85),inset 0 3px 0 rgba(255,255,255,.55)}}

/* consentement */
.coche{display:flex;gap:14px;align-items:flex-start;margin-top:16px;padding:14px;border-radius:18px;background:var(--carte);border:1.5px solid var(--trait);cursor:pointer;min-height:64px}
.coche input{position:absolute;opacity:0;width:1px;height:1px}
.coche .case{flex:none;width:38px;height:38px;border-radius:11px;border:2.5px solid var(--or);display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.3);transition:background-color var(--vite)}
.coche .case svg.i{opacity:0;color:#2a0a00;stroke-width:3.4;width:24px;height:24px}
.coche input:checked + .case{background:var(--or);box-shadow:0 0 14px rgba(255,170,40,.8)}
.coche input:checked + .case svg.i{opacity:1}
.coche input:focus-visible + .case{outline:3px solid var(--cyan);outline-offset:2px}
.coche b{font-size:16.5px}
.liste-icones{display:grid;gap:10px;margin:12px 0 0;padding:0;list-style:none}
.liste-icones li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.35}
.liste-icones svg.i{color:var(--or);margin-top:1px}

/* pseudo */
#champPseudo{width:100%;min-height:68px;padding:12px 18px;border-radius:20px;border:2px solid rgba(255,201,60,.6);background:rgba(0,0,0,.35);font-family:var(--titre);font-size:26px;letter-spacing:.03em;text-align:center;color:var(--texte);-webkit-user-select:text;user-select:text}
#champPseudo:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(43,228,255,.3)}
#compteur{display:block;text-align:right;font-size:14px;color:var(--doux);margin:6px 4px 0}

/* selfie */
.visee{position:relative;width:min(100%,380px);aspect-ratio:3/4;margin:6px auto 0;border-radius:28px;overflow:hidden;background:#000;border:2px solid rgba(255,201,60,.5);box-shadow:0 0 30px rgba(255,90,20,.3)}
.visee video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.visee .ovale{position:absolute;left:50%;top:44%;width:62%;aspect-ratio:3/4;transform:translate(-50%,-50%);border-radius:50%;box-shadow:0 0 0 999px rgba(12,3,5,.55);border:3px dashed var(--or);pointer-events:none}
.visee .aide{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-weight:800;font-size:15px;text-shadow:0 1px 4px #000}
.visee .vide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center;color:var(--doux);font-size:16px}
.visee .vide svg.i{width:56px;height:56px;color:var(--or)}
#bDeclencheur{width:92px;height:92px;min-height:0;border-radius:50%;margin:14px auto 0;padding:0;border:4px solid #ffe49a;background:radial-gradient(circle,#fff1a8 0 34%,#ff8a1f 36% 60%,#c41d0e 62%);box-shadow:0 0 0 6px rgba(255,140,30,.2),0 0 30px rgba(255,100,20,.7)}
#bDeclencheur svg.i{width:40px;height:40px;color:#3a0a00}
label.btn{cursor:pointer}
#fichier{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}

/* avatar : recadrage + aperçu */
.studio{display:grid;grid-template-columns:1fr;gap:14px;justify-items:center}
.recadre{position:relative;width:min(100%,300px,40vh);aspect-ratio:1;border-radius:24px;overflow:hidden;background:#000;touch-action:none;border:2px solid var(--trait)}
.recadre canvas{display:block;width:100%;height:100%}
.recadre .rond{position:absolute;inset:6%;border-radius:50%;box-shadow:0 0 0 999px rgba(12,3,5,.6);border:3px solid var(--or);pointer-events:none}
.recadre .doigts{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-size:13px;font-weight:700;color:var(--doux);text-shadow:0 1px 3px #000;pointer-events:none}
.apercu{display:flex;align-items:center;gap:14px;width:100%}
.apercu canvas,.apercu img{width:112px;height:112px;flex:none;filter:drop-shadow(0 0 14px rgba(255,120,30,.6))}
.apercu .txt{font-size:15.5px;color:var(--doux)}
.apercu .txt b{display:block;font-family:var(--titre);font-size:22px;color:var(--texte);margin-bottom:4px;overflow-wrap:anywhere}
.zoom{display:flex;align-items:center;gap:12px;width:100%}
.zoom svg.i{color:var(--or)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:56px;margin:0;background:transparent;touch-action:pan-x}
input[type=range]:focus{outline:none}
input[type=range]::-webkit-slider-runnable-track{height:14px;border-radius:99px;background:linear-gradient(90deg,var(--cyan),var(--rose));box-shadow:inset 0 1px 3px rgba(0,0,0,.6)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:38px;height:38px;margin-top:-12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6c2,#ffc93c 45%,#ff8a1f);border:2px solid #fff3c4;box-shadow:0 0 16px rgba(255,170,40,.9)}
input[type=range]::-moz-range-track{height:14px;border-radius:99px;background:linear-gradient(90deg,var(--cyan),var(--rose))}
input[type=range]::-moz-range-thumb{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6c2,#ffc93c 45%,#ff8a1f);border:2px solid #fff3c4}
.info{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:16px;background:rgba(255,201,60,.1);border:1.5px solid rgba(255,201,60,.5);font-size:15.5px;font-weight:700;width:100%}
.info svg.i{color:var(--or)}
.attente{display:flex;flex-direction:column;align-items:center;gap:12px;padding:30px 0;text-align:center}
.roue{width:54px;height:54px;border-radius:50%;border:5px solid rgba(255,201,60,.2);border-top-color:var(--or);animation:tourne .8s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}

/* mascottes */
.mascottes{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
.mascotte{aspect-ratio:1;min-height:0;padding:6px;border-radius:20px}
.mascotte img{width:100%;height:100%;pointer-events:none}
.mascotte.cur{border-color:var(--or);background:linear-gradient(180deg,rgba(255,201,60,.24),rgba(255,138,31,.08));box-shadow:0 0 0 2px rgba(255,201,60,.45),0 0 24px rgba(255,170,40,.45)}

/* consignes */
.consignes{display:grid;gap:10px;margin:8px 0 0;padding:0;list-style:none;counter-reset:c}
.consignes li{display:flex;gap:14px;align-items:center;padding:12px 14px;border-radius:18px;background:var(--carte);border:1.5px solid var(--trait);font-size:16.5px;font-weight:700;line-height:1.3}
.consignes li svg.i{width:34px;height:34px;color:var(--or);flex:none}

/* attente / danse : carte joueur */
.joueur{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:10px}
.bulle{position:relative;width:min(50vw,200px);aspect-ratio:1}
.bulle img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover}
.bulle .anneau{position:absolute;inset:-10px;border-radius:50%;border:4px solid var(--rose);opacity:0;box-shadow:0 0 24px var(--rose)}
.bulle .anneau.pulse{animation:pulse .42s ease-out}
.bulle .anneau.pulse.un{border-color:var(--or);box-shadow:0 0 34px var(--or)}
@keyframes pulse{0%{opacity:.95;transform:scale(.94)}100%{opacity:0;transform:scale(1.16)}}
.joueur .nom{font-family:var(--titre);font-size:clamp(26px,8vw,36px);overflow-wrap:anywhere;text-align:center}
.pastille{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.08);border:1px solid var(--trait)}
.pastille svg.i{width:15px;height:15px}
.pastille.vert{color:#071a0c;background:var(--vert);border-color:var(--vert)}
.pastille.or{color:#2a0a00;background:var(--or);border-color:var(--or)}

/* danse */
#eDanse .morceau{text-align:center;font-family:var(--titre);font-size:20px;margin-top:2px;overflow-wrap:anywhere}
#eDanse .figure{text-align:center;color:var(--cyan);font-weight:800;font-size:16px;min-height:1.4em;text-shadow:0 0 10px rgba(43,228,255,.5)}
#mot{text-align:center;font-family:var(--titre);font-size:clamp(34px,11vw,52px);line-height:1;margin:6px 0 4px;min-height:1.05em;transition:transform .15s}
#mot.p{color:var(--or);text-shadow:0 0 18px rgba(255,170,40,.9)}
#mot.s{color:var(--rose);text-shadow:0 0 18px rgba(255,61,139,.8)}
#mot.c{color:var(--cyan);text-shadow:0 0 16px rgba(43,228,255,.7)}
#mot.b{color:var(--doux)}
#mot.saute{transform:scale(1.12)}
.jauge{height:22px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;border:1px solid var(--trait);margin-top:8px}
.jauge i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--cyan),var(--rose) 55%,var(--or));box-shadow:0 0 14px rgba(255,90,40,.7);transition:width .3s ease-out}
.etoiles{display:flex;justify-content:center;gap:8px;margin-top:12px}
.etoiles svg{width:38px;height:38px;fill:rgba(255,255,255,.12);stroke:rgba(255,201,60,.5);stroke-width:1.2;transition:fill .3s}
.etoiles svg.on{fill:var(--or);stroke:#fff1a8;filter:drop-shadow(0 0 8px rgba(255,170,40,.9))}
#bTap{margin-top:14px;min-height:min(34vh,240px);border-radius:32px;font-size:clamp(40px,13vw,60px);letter-spacing:.1em;color:#2a0a00;border-color:#ffb067;background:radial-gradient(circle at 50% 0%,#ffd38a,#ff8a1f 55%,#e2420f);box-shadow:0 0 28px rgba(255,120,30,.55),inset 0 2px 0 rgba(255,255,255,.4);touch-action:none}
#bTap small{color:#4a1600;font-size:15px;letter-spacing:0}
#bTap.frappe{transform:scale(.96);box-shadow:0 0 0 8px rgba(255,201,60,.45),0 0 50px rgba(255,140,30,.95)}

/* retardataire : compte à rebours */
.rebours{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:22px;text-align:center}
.bulle-rebours{width:min(46vw,190px);aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;border:4px solid var(--or);background:radial-gradient(circle,rgba(255,201,60,.18),rgba(40,8,12,.6) 70%);box-shadow:0 0 34px rgba(255,170,40,.55)}
.bulle-rebours span{font-family:var(--titre);font-size:clamp(64px,22vw,110px);line-height:1;color:var(--or);text-shadow:0 0 22px rgba(255,170,40,.9)}
.bulle-rebours.temps{animation:pulse-r .3s ease-out}
.bulle-rebours.go span{font-size:clamp(34px,11vw,52px);color:var(--rose);text-shadow:0 0 18px rgba(255,61,139,.9)}
@keyframes pulse-r{0%{transform:scale(1.08)}100%{transform:scale(1)}}
.rebours b{font-size:18px}
.partiel{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:99px;font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.04em;color:#2a0a00;background:var(--or2);vertical-align:middle;white-space:nowrap}

/* résultats */
.podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:8px;margin-top:14px}
.marche{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;min-width:0}
.marche .socle{width:100%;border-radius:16px 16px 6px 6px;display:flex;align-items:flex-start;justify-content:center;padding-top:8px;font-family:var(--titre);font-size:28px;color:#2a0a00}
.marche.r1 .socle{height:96px;background:linear-gradient(180deg,#fff1a8,#ffc93c 50%,#ff8a1f);box-shadow:0 0 26px rgba(255,170,40,.7)}
.marche.r2 .socle{height:70px;background:linear-gradient(180deg,#ffffff,#cfd6e0 60%,#8d97a6)}
.marche.r3 .socle{height:54px;background:linear-gradient(180deg,#ffd0a0,#d9822f 60%,#8a4a14)}
.marche b{font-family:var(--titre);font-size:15px;overflow-wrap:anywhere;line-height:1.1;max-width:100%}
.marche span{font-weight:800;font-size:14px;color:var(--or)}
.marche.moi b{color:var(--cyan);text-shadow:0 0 10px rgba(43,228,255,.6)}
#monRang{text-align:center;margin-top:14px}
#monRang .gros{font-family:var(--titre);font-size:clamp(40px,13vw,60px);line-height:1}
.classement{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:6px}
.classement li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--carte);border:1px solid var(--trait);font-size:16px}
.classement li .r{flex:none;width:36px;font-family:var(--titre);color:var(--or);text-align:center}
.classement li .p{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800}
.classement li .p .partiel{font-weight:800}
.classement li .s{flex:none;font-variant-numeric:tabular-nums;font-weight:800}
.classement li.moi{border:2px solid var(--cyan);background:linear-gradient(90deg,rgba(43,228,255,.25),rgba(43,228,255,.06));box-shadow:0 0 18px rgba(43,228,255,.35)}

/* pied : supprimer mes données */
#pied{max-width:560px;margin:26px auto 0}
#msg{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translate(-50%,10px);width:min(520px,calc(100% - 32px));padding:14px 16px;border-radius:16px;background:linear-gradient(135deg,#ff3d8b,#c4125a);box-shadow:0 10px 30px rgba(0,0,0,.5);font-size:16px;font-weight:800;text-align:center;opacity:0;pointer-events:none;transition:opacity var(--vite),transform var(--vite);z-index:9}
#msg.on{opacity:1;transform:translate(-50%,0)}
@media (max-height:640px){#eAccueil .grosTitre{margin-top:3vh}.visee{width:min(100%,300px)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- immersion niveau 1 (27 oct.) ---------- */
/* flash de fond sur « PARFAIT » : léger, jamais plus de 2,5 fois par seconde (seuil épilepsie : 3 Hz) */
#flash{position:fixed;inset:0;z-index:8;pointer-events:none;opacity:0;background:radial-gradient(70% 55% at 50% 45%,rgba(255,201,60,.55),rgba(255,120,30,.15) 60%,transparent 80%)}
#flash.on{animation:flash .26s ease-out}
@keyframes flash{0%{opacity:0}30%{opacity:.32}100%{opacity:0}}
/* mot du jugement, au centre, 400 ms */
#jugement{position:fixed;left:50%;top:40%;z-index:9;transform:translate(-50%,-50%);pointer-events:none;opacity:0;white-space:nowrap;
  font-family:var(--titre);font-size:clamp(46px,15vw,84px);letter-spacing:.02em}
#jugement.montre{animation:juge .4s ease-out both}
#jugement.parfait{color:var(--or);text-shadow:0 0 22px rgba(255,170,40,.95),0 2px 0 #7a2a00}
#jugement.super{color:var(--cyan);text-shadow:0 0 20px rgba(43,228,255,.9)}
#jugement.bien{color:#fff;text-shadow:0 0 14px rgba(255,255,255,.6)}
#jugement.rate{color:#a99a9a;font-size:clamp(34px,11vw,60px);text-shadow:none}
@keyframes juge{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}22%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}70%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
@keyframes juge-doux{0%{opacity:0}20%{opacity:1}75%{opacity:1}100%{opacity:0}}
/* jauge d'énergie du public */
#jaugePublic{max-width:560px;margin:2px auto 6px;padding:8px 12px 10px;border-radius:16px;background:rgba(40,8,12,.7);border:1px solid var(--trait)}
.jp-tete{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--doux)}
.jp-tete b{color:var(--or);letter-spacing:.02em;text-transform:none;font-size:14.5px;text-align:right}
.jp-barre{position:relative;height:14px;margin-top:6px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.jp-barre i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--cyan),var(--rose) 55%,var(--or));box-shadow:0 0 12px rgba(255,90,40,.7);transition:width .5s ease-out}
.jp-barre span{position:absolute;top:0;bottom:0;width:2px;background:rgba(255,255,255,.35)}
#jaugePublic.p3 .jp-barre i{background:linear-gradient(90deg,var(--or2),var(--feu),var(--or))}
/* avatar miroir dans le cercle de progression du morceau */
.miroir{position:relative;width:min(56vw,230px);aspect-ratio:1;margin:6px auto 0}
.miroir .progres{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.miroir .progres circle{fill:none;stroke-width:3.5}
.miroir .progres .fond{stroke:rgba(255,255,255,.1)}
.miroir .progres .avance{stroke:var(--or);stroke-linecap:round;stroke-dasharray:295.31;stroke-dashoffset:295.31;transition:stroke-dashoffset .5s linear;filter:drop-shadow(0 0 4px rgba(255,170,40,.8))}
.miroir canvas{position:absolute;left:8%;top:8%;width:84%;height:84%}
.miroir .anneau{position:absolute;inset:4%;border-radius:50%;border:3px solid var(--rose);opacity:0}
.miroir .anneau.pulse{animation:pulse .42s ease-out}
.miroir .anneau.pulse.un{border-color:var(--or)}
.combo{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-top:4px}
.combo b{font-family:var(--titre);font-size:34px;color:var(--or);text-shadow:0 0 12px rgba(255,170,40,.6);font-variant-numeric:tabular-nums}
.combo span{font-size:13px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--doux)}
.combo.zero b{color:var(--doux);text-shadow:none}
.outils{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.outils .btn{min-height:56px;font-size:14.5px;padding:8px}
.outils .btn svg.i{width:22px;height:22px}
.bEffets[aria-pressed="true"]{border-style:solid;border-color:var(--cyan);color:#d6fbff;background:rgba(43,228,255,.12)}
/* résultats : stats, trophées, encouragement */
.stats{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:12px}
.stats .stat{grid-column:span 2}
.stats .stat:nth-child(n+4){grid-column:span 3}
.stat{padding:10px 6px;border-radius:16px;background:var(--carte);border:1px solid var(--trait);text-align:center}
.stat b{display:block;font-family:var(--titre);font-size:24px;color:var(--cyan);font-variant-numeric:tabular-nums}
.stat span{display:block;font-size:12.5px;font-weight:700;color:var(--doux);margin-top:2px}
.stat.or b{color:var(--or)}
.trophees{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:14px}
.trophee{display:flex;flex-direction:column;align-items:center;gap:6px;width:122px;padding:12px 8px;border-radius:20px;text-align:center;
  background:linear-gradient(160deg,rgba(255,201,60,.22),rgba(92,13,18,.85));border:1.5px solid rgba(255,201,60,.7);box-shadow:0 0 22px rgba(255,170,40,.35);animation:trophee .7s cubic-bezier(.2,1.4,.4,1) both}
.trophee .med{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#3a0a00;background:radial-gradient(circle at 35% 30%,#fff6c2,#ffc93c 50%,#ff8a1f);box-shadow:0 0 16px rgba(255,170,40,.9)}
.trophee .med svg.i{width:30px;height:30px;stroke-width:2.4}
.trophee b{font-family:var(--titre);font-size:14px;line-height:1.15}
@keyframes trophee{0%{opacity:0;transform:scale(.5) rotate(-8deg)}60%{opacity:1;transform:scale(1.08) rotate(2deg)}100%{opacity:1;transform:none}}
.encourage{text-align:center;font-weight:800;font-size:17px;color:var(--rose);text-shadow:0 0 12px rgba(255,61,139,.45);margin-top:14px}
/* « Réduire les effets » : pas de flash, pas de pulsation, mots sans zoom, flammes immobiles */
body.doux #flash{display:none}
body.doux #feu{animation:none}
body.doux #jugement.montre{animation:juge-doux .4s linear both}
body.doux .anneau.pulse,body.doux .bulle-rebours.temps,body.doux #bJouer{animation:none}
body.doux .trophee{animation:none}
body.doux #bTap.frappe{box-shadow:0 0 0 4px rgba(255,201,60,.35)}