:root{
  --pink:#ff4fa8;--bonbon:#ff8ad8;--magenta:#ff00c8;--fuchsia:#d4006f;--neon:#ff2bd6;--violet:#9b00ff;--dark:#1a0020;
  --title:'Bungee','Impact','Arial Black',sans-serif;
  --script:'Pacifico','Comic Sans MS','Brush Script MT',cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
  font-family:var(--script);color:#fff;
  background:linear-gradient(135deg,var(--magenta),var(--pink),var(--violet),var(--fuchsia),var(--bonbon));
  
}
@keyframes bgmove{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.halo{position:fixed;border-radius:50%;opacity:.5;pointer-events:none;z-index:0}
.h1{width:55vw;height:55vw;left:-15vw;top:-15vw;background:radial-gradient(circle,var(--neon),transparent 70%)}
.h2{width:50vw;height:50vw;right:-12vw;bottom:-18vw;background:radial-gradient(circle,var(--violet),transparent 70%)}
.h3{width:40vw;height:40vw;left:30vw;top:20vh;background:radial-gradient(circle,var(--bonbon),transparent 70%);opacity:.3}
@keyframes halo{from{transform:translate(0,0) scale(1)}to{transform:translate(8vw,6vh) scale(1.25)}}

#app{position:relative;z-index:1;width:100%;height:100%}
.screen{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:2.2vh;padding:3vh 4vw;overflow:hidden}
.screen.active{display:flex;animation:screenIn .55s ease both}
@keyframes screenIn{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
.hidden{display:none!important}
#app.shake{animation:shake .6s}
@keyframes shake{0%,100%{transform:translate(0)}10%{transform:translate(-14px,6px) rotate(-.6deg)}20%{transform:translate(12px,-8px) rotate(.6deg)}30%{transform:translate(-10px,-6px)}40%{transform:translate(10px,8px)}50%{transform:translate(-8px,4px)}60%{transform:translate(8px,-4px)}80%{transform:translate(-4px,2px)}}

/* ----- texte néon ----- */
.title,.good-title,.ficha-title{font-family:var(--title);text-align:center;line-height:1.1;color:#fff;text-shadow:0 0 10px var(--neon),0 0 26px var(--magenta),0 4px 0 var(--fuchsia);animation:pulse 1.6s ease-in-out infinite}
@keyframes shine{to{background-position:300% 0}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.title{font-size:clamp(34px,4.6vw,76px)}
.sub{font-size:clamp(22px,2.4vw,40px);text-shadow:0 0 14px var(--neon),0 3px 0 var(--fuchsia)}

/* ----- cartes néon ----- */
.neon{
  background:linear-gradient(160deg,rgba(26,0,32,.78),rgba(90,0,90,.7));
  border:5px solid var(--bonbon);border-radius:42px;
  box-shadow:0 0 12px #fff,0 0 30px var(--neon),0 0 60px var(--magenta);
  
}
@keyframes neonflick{from{box-shadow:0 0 10px #fff,0 0 24px var(--neon),0 0 60px var(--magenta),inset 0 0 26px rgba(255,43,214,.45)}to{box-shadow:0 0 18px #fff,0 0 44px var(--neon),0 0 110px var(--magenta),inset 0 0 40px rgba(255,43,214,.7)}}

/* ----- boutons ----- */
.btn{
  position:relative;overflow:hidden;cursor:pointer;display:inline-block;text-decoration:none;text-align:center;
  font-family:var(--title);font-size:clamp(16px,1.5vw,26px);color:#fff;padding:14px 30px;
  border:4px solid #fff;border-radius:60px;
  background:linear-gradient(90deg,var(--bonbon),var(--magenta),var(--violet),var(--magenta),var(--bonbon));background-size:300% 100%;
  text-shadow:0 2px 0 #7a0057;
  box-shadow:0 0 14px var(--neon),0 0 30px var(--magenta);
  transition:transform .18s,filter .18s;
}
.btn.big{font-size:clamp(20px,2vw,34px);padding:18px 44px}
.btn::after{content:"";position:absolute;top:0;left:0;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);transform:translateX(-200%) skewX(-20deg);animation:sweep 2.8s ease-in-out infinite}
@keyframes sweep{0%{transform:translateX(-200%) skewX(-20deg)}60%,100%{transform:translateX(400%) skewX(-20deg)}}
@keyframes btnbg{to{background-position:300% 0}}
.btn:hover{transform:scale(1.08) rotate(-1deg);filter:brightness(1.2)}
.btn:active{transform:scale(.96)}
.btn:disabled{opacity:.6;cursor:wait}

/* ----- PAGE MOT DE PASSE ----- */
#bg{position:fixed;inset:0;z-index:0;overflow:hidden}
#wall{position:absolute;inset:0;z-index:0;overflow:hidden;background:linear-gradient(135deg,var(--violet),var(--fuchsia))}
.tile{position:absolute;will-change:transform;transform:rotate(var(--r)) scale(var(--s));transition:transform 1.3s cubic-bezier(.55,0,.9,.4),opacity 1.3s ease-in;animation:tilein .9s ease both;animation-delay:var(--d)}
@keyframes tilein{from{opacity:0;transform:rotate(var(--r)) scale(.2)}to{opacity:1}}
.tile .ti{width:100%;height:100%;will-change:transform;animation:floaty var(--t) ease-in-out infinite alternate;animation-delay:var(--d)}
.tile img{width:100%;height:100%;object-fit:cover;display:block;border:6px solid #fff;border-radius:16px}
@keyframes floaty{from{transform:translate(0,0)}to{transform:translate(var(--fx),var(--fy))}}
.tile.out{transform:translate(var(--ex),var(--ey)) rotate(calc(var(--r) * 8)) scale(2.4);opacity:0}
.wall-tint{position:absolute;inset:0;z-index:1;background:linear-gradient(135deg,rgba(255,0,200,.35),rgba(155,0,255,.35));pointer-events:none}
@keyframes tint{from{opacity:.6}to{opacity:1}}
.vignette{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at center,rgba(26,0,32,.3) 20%,rgba(26,0,32,.78) 100%);pointer-events:none}
.gate-card{position:relative;z-index:2;width:min(900px,86vw);padding:5vh 4vw;display:flex;flex-direction:column;align-items:center;gap:2.4vh;transition:transform 1s ease-in,opacity 1s}
.gate-card.launch{transform:scale(3);opacity:0}
.gate-card.shake{animation:shake .6s}
.gate-q{font-family:var(--title);font-size:clamp(20px,2.3vw,38px);text-align:center;text-shadow:0 0 14px var(--neon)}
.field{display:flex;gap:18px;align-items:center;justify-content:center;flex-wrap:wrap;width:100%}
#pw{
  flex:1 1 300px;min-width:240px;font-family:var(--script);font-size:clamp(22px,2.2vw,36px);text-align:center;color:#fff;
  padding:16px 24px;border-radius:60px;border:5px solid var(--bonbon);background:rgba(255,255,255,.14);outline:none;
  box-shadow:0 0 16px var(--neon),0 0 34px var(--magenta);
}
#pw::placeholder{color:rgba(255,255,255,.7)}
#pw:focus{border-color:#fff;background:rgba(255,255,255,.22)}
@keyframes inputglow{from{box-shadow:0 0 12px var(--neon),0 0 30px var(--magenta),inset 0 0 14px rgba(255,43,214,.5)}to{box-shadow:0 0 26px #fff,0 0 66px var(--neon),inset 0 0 26px rgba(255,43,214,.85)}}

.denied{position:absolute;inset:0;z-index:5;display:none;flex-direction:column;align-items:center;justify-content:center;gap:3vh;pointer-events:none;background:radial-gradient(circle,rgba(120,0,40,.55),rgba(26,0,32,.85))}
.denied.on{display:flex;animation:deniedin 2.6s ease both}
@keyframes deniedin{0%{opacity:0}8%{opacity:1}85%{opacity:1}100%{opacity:0}}
.d-big{font-family:var(--title);font-size:clamp(46px,7vw,120px);color:#fff;text-shadow:0 0 14px #ff2b6a,0 0 50px #ff0040,0 6px 0 #7a0020;animation:denypop .5s cubic-bezier(.2,1.6,.4,1),denyshake .35s .5s 4}
.d-msg{font-size:clamp(24px,3vw,50px);text-align:center;max-width:80vw;text-shadow:0 0 16px var(--neon);animation:pop .6s .5s both}
@keyframes denypop{from{transform:scale(0) rotate(-20deg)}to{transform:scale(1) rotate(0)}}
@keyframes denyshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-18px) rotate(-2deg)}75%{transform:translateX(18px) rotate(2deg)}}
@keyframes pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
.unlock-text{position:absolute;z-index:6;font-family:var(--title);font-size:clamp(40px,6vw,100px);text-align:center;opacity:0;pointer-events:none;text-shadow:0 0 20px var(--neon),0 0 60px var(--magenta)}
.unlock-text.on{animation:unlock 1.6s ease both}
@keyframes unlock{0%{opacity:0;transform:scale(.2) rotate(-10deg)}30%{opacity:1;transform:scale(1.15) rotate(2deg)}80%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(2)}}

/* ----- QUIZ ----- */
#screen-quiz{gap:4vh}
.quiz-card{width:min(1200px,90vw);padding:4.5vh 4vw;text-align:center;animation:qin .6s cubic-bezier(.2,1.4,.4,1) both}
@keyframes qin{from{opacity:0;transform:translateY(-60px) scale(.8)}to{opacity:1;transform:none}}
.quiz-card h2{font-family:var(--title);font-weight:400;font-size:clamp(26px,3.1vw,54px);line-height:1.25;text-shadow:0 0 12px var(--neon),0 4px 0 var(--fuchsia)}
.badge{font-size:clamp(16px,1.5vw,26px);margin-bottom:1.4vh;color:var(--bonbon);text-shadow:0 0 10px var(--neon)}
.badge:empty{display:none}
.answers{width:min(1200px,90vw);display:grid;grid-template-columns:1fr 1fr;gap:2.4vh 2vw}
.ans{
  position:relative;overflow:hidden;cursor:pointer;min-height:12vh;padding:2vh 26px;
  font-family:var(--title);font-size:clamp(17px,1.65vw,29px);line-height:1.25;color:#fff;text-align:center;
  border:5px solid #fff;border-radius:70px;
  background:linear-gradient(90deg,var(--bonbon),var(--magenta),var(--violet),var(--magenta),var(--bonbon));background-size:300% 100%;
  text-shadow:0 3px 0 #7a0057;box-shadow:0 0 14px var(--neon),0 0 32px var(--magenta);
  animation:ansin .5s cubic-bezier(.2,1.5,.4,1) both;animation-delay:calc(var(--i)*.1s + .3s);
  transition:transform .18s,filter .18s;
}
@keyframes ansin{from{opacity:0;transform:translateY(50px) scale(.6)}to{opacity:1;transform:none}}
.ans::after{content:"";position:absolute;top:0;left:0;width:35%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:translateX(-250%) skewX(-20deg);transition:transform .6s}
.ans:hover{transform:scale(1.05) rotate(-.7deg);filter:brightness(1.2)}
.ans:hover::after{transform:translateX(450%) skewX(-20deg)}
.ans.chosen{animation:chosen .4s ease both;border-color:#fff700}
.ans.locked{pointer-events:none;opacity:.55}
.ans.chosen.locked{opacity:1}
@keyframes chosen{50%{transform:scale(1.12)}100%{transform:scale(1.06)}}

/* ----- BONNE RÉPONSE ----- */
.good-title{font-size:clamp(46px,7.5vw,130px);animation:goodpop .8s cubic-bezier(.2,1.6,.4,1) both}
@keyframes goodpop{from{transform:scale(0) rotate(-15deg)}to{transform:scale(1) rotate(0)}}
.good-sub{font-family:var(--title);font-size:clamp(28px,4vw,70px);text-shadow:0 0 20px var(--neon),0 5px 0 var(--fuchsia);animation:pop .6s .5s both,pulse 1s 1s ease-in-out infinite}

/* ----- FICHA ----- */
#screen-ficha{background:radial-gradient(circle at center,rgba(26,0,32,.5),rgba(26,0,32,.88))}
.ficha-title{font-size:clamp(36px,5.5vw,96px);animation:denypop .7s cubic-bezier(.2,1.6,.4,1) both,pulse 1s 1s ease-in-out infinite}
.ficha-sub{font-family:var(--title);font-size:clamp(22px,3vw,52px);text-shadow:0 0 16px var(--neon),0 4px 0 var(--fuchsia);animation:pop .6s .4s both}
.frame{position:relative;border:8px solid #fff;border-radius:30px;overflow:hidden;background:#000;
  box-shadow:0 0 18px #fff,0 0 50px var(--neon),0 0 90px var(--magenta)}
@keyframes framepulse{from{box-shadow:0 0 14px #fff,0 0 36px var(--neon),0 0 90px var(--magenta)}to{box-shadow:0 0 26px #fff,0 0 70px var(--neon),0 0 160px var(--magenta)}}
#ficha-media{max-width:80vw}
#ficha-media img,#ficha-media video{display:block;max-height:54vh;max-width:78vw;width:auto;height:auto}
#ficha-media img{animation:slowzoom 14s ease-out both,fadezoom .9s ease both}
@keyframes slowzoom{from{transform:scale(1)}to{transform:scale(1.18)}}
@keyframes fadezoom{from{opacity:0}to{opacity:1}}

/* ----- CADEAU ----- */
.gift-stage{display:flex;flex-direction:column;align-items:center;gap:3vh;text-align:center}
.gift-teaser{font-size:clamp(50px,7vw,110px);animation:bounce 1s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-24px) rotate(3deg)}}
.gift-box{font-size:clamp(100px,16vw,260px);cursor:pointer;filter:drop-shadow(0 0 30px var(--neon)) drop-shadow(0 0 70px var(--magenta));animation:giftwobble 1.2s ease-in-out infinite}
@keyframes giftwobble{0%,100%{transform:rotate(-6deg) scale(1)}50%{transform:rotate(6deg) scale(1.1)}}
.gift-card{width:min(860px,88vw);padding:4vh 3vw;display:flex;flex-direction:column;align-items:center;gap:2vh;animation:qin .7s cubic-bezier(.2,1.4,.4,1) both}
.gift-card h2{font-family:var(--title);font-weight:400;font-size:clamp(28px,3.4vw,58px);text-shadow:0 0 14px var(--neon),0 4px 0 var(--fuchsia)}
.gift-card p{font-size:clamp(18px,1.8vw,30px);line-height:1.4;text-shadow:0 0 10px var(--neon)}
#gift-media img,#gift-media video{max-height:40vh;max-width:100%;border:6px solid #fff;border-radius:22px;box-shadow:0 0 24px var(--neon),0 0 60px var(--magenta);display:block}

/* ----- MYSTÈRE ----- */
#screen-mystery{background:radial-gradient(circle,rgba(60,0,80,.85),rgba(0,0,0,.96))}
.mystery{font-family:var(--title);font-size:clamp(40px,6vw,104px);text-align:center;text-shadow:0 0 18px var(--neon),0 0 60px var(--magenta);animation:mysteryin 2.4s ease both}
@keyframes mysteryin{0%{opacity:0;transform:scale(.7)}30%{opacity:1;transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:scale(1.15)}}

/* ----- FINALE ----- */
#screen-final{gap:2.4vh}
.player{width:min(1100px,86vw);aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;transition:opacity 1.3s ease,transform 1.3s ease}
.player.fade-out{opacity:0;transform:scale(.8)}
.player video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.player #final-play{position:absolute;z-index:3}
.missing{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2vh;background:rgba(26,0,32,.92);text-align:center;padding:2vw;font-size:clamp(18px,1.8vw,30px)}
#photo-wrap{display:flex;flex-direction:column;align-items:center;gap:2.4vh;animation:fadezoom 2.2s ease both}
.frame.photo img{display:block;max-height:68vh;max-width:86vw;width:auto;height:auto;animation:slowzoom 20s ease-out both}
.caption{font-size:clamp(28px,3.6vw,64px)}

/* ----- Divers ----- */
#flash{position:fixed;inset:0;background:radial-gradient(circle,#fff,var(--bonbon) 60%,var(--magenta));opacity:0;pointer-events:none;z-index:40}
#flash.on{animation:flash .6s ease-out}
@keyframes flash{0%{opacity:.95}100%{opacity:0}}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}
#sound-btn,#reset-btn{z-index:60;cursor:pointer;border:3px solid #fff;border-radius:50%;color:#fff;background:linear-gradient(135deg,var(--magenta),var(--violet));
  box-shadow:0 0 14px var(--neon),0 0 30px var(--magenta);transition:transform .2s,opacity .2s}
#sound-btn{position:static;width:58px;height:58px;font-size:26px}
#reset-btn{position:fixed;bottom:16px;left:16px;width:38px;height:38px;font-size:20px;opacity:.35}
#sound-btn:hover,#reset-btn:hover{transform:scale(1.15) rotate(10deg);opacity:1}

@media (max-width:900px){.answers{grid-template-columns:1fr}.ans{min-height:9vh}}

/* ----- MESSAGES VIDÉO ----- */
#screen-messages{justify-content:flex-start;overflow-y:auto;padding-top:5vh;padding-bottom:5vh}
.msg-grid{width:min(1200px,92vw);display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2.4vh 2vw;margin:2vh 0}
.msg-btn{padding:4vh 20px;font-size:clamp(18px,1.8vw,30px);animation:ansin .5s cubic-bezier(.2,1.5,.4,1) both;animation-delay:calc(var(--i)*.08s)}
.msg-btn.watched{filter:saturate(.7) brightness(.9)}
.msg-btn.watched::before{content:"✔ ";}
.msg-modal{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3vh;background:rgba(26,0,32,.92)}
.msg-modal.hidden{display:none}
.msg-frame{background:#000}
.msg-frame video{display:block;max-width:86vw;max-height:72vh;width:auto;height:auto;min-width:40vw}
#to-messages,#final-next{animation:pulse 1.4s ease-in-out infinite}

/* ----- PAGE DE FIN ----- */
.end-text{font-family:var(--script);font-size:clamp(34px,4.6vw,84px);line-height:1.4;text-align:center;max-width:82vw;color:#fff;
  text-shadow:0 0 12px var(--neon),0 0 34px var(--magenta),0 4px 0 var(--fuchsia);animation:endin 2.5s ease both}
@keyframes endin{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}

/* ----- Contrôle de la musique (haut droite) ----- */
#audio-ctl{position:fixed;top:18px;right:18px;z-index:60;display:flex;align-items:center;gap:12px;padding:6px 8px 6px 18px;border:3px solid #fff;border-radius:40px;
  background:rgba(26,0,32,.55);box-shadow:0 0 14px var(--neon),0 0 30px var(--magenta)}
#audio-ctl input[type=range]{width:130px;height:8px;accent-color:var(--neon);cursor:pointer}
#audio-ctl #sound-btn{border:3px solid #fff}