:root{
  --navy:#12234A; --cream:#FFF8EC; --gold:#FFC857; --red:#E0443A; --green:#2F9E6E;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--navy);color:var(--cream);font-family:'Nunito',system-ui,sans-serif}
body{overflow-x:hidden}
button{font-family:inherit}
[hidden]{display:none!important}

/* ----- Décor : étoiles, neige, congère ----- */
#bg{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none}
#bg .star{position:absolute;border-radius:50%;background:var(--gold);animation:twinkle 2.5s ease-in-out infinite}
#bg .flake{position:absolute;top:0;border-radius:50%;background:#fff}
#drift{position:fixed;left:0;right:0;bottom:0;height:130px;z-index:1;pointer-events:none;animation:pile 60s ease-out forwards}
#drift svg{width:100%;height:100%;display:block}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes snowA{0%{transform:translate(0,-20px)}50%{transform:translate(16px,55vh)}100%{transform:translate(-6px,110vh)}}
@keyframes snowB{0%{transform:translate(0,-20px)}50%{transform:translate(-16px,55vh)}100%{transform:translate(8px,110vh)}}
@keyframes pile{0%{transform:translateY(56px)}100%{transform:translateY(0)}}

/* ----- Musique ----- */
#music{position:fixed;top:max(14px,env(safe-area-inset-top));left:14px;z-index:6;width:48px;height:48px;border-radius:50%;border:2px solid var(--gold);background:rgba(18,35,74,.6);padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}
#music:focus-visible,.cta:focus-visible,.ghost:focus-visible,.hub:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ----- Écrans ----- */
.screen{display:none;position:relative;z-index:2;max-width:430px;margin:0 auto;min-height:100vh;min-height:100dvh;padding:0 20px 150px;flex-direction:column;align-items:center}
.screen.on{display:flex;animation:fadein .5s ease-out}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.title{margin:84px 12px 0;font-family:'Fredoka',sans-serif;font-weight:600;font-size:36px;line-height:1.1;text-align:center}
.title span{color:var(--gold)}
.lead{margin:10px 24px 0;font-size:17px;text-align:center}
.nojs{padding:40px 20px;text-align:center}
.cta{margin-top:22px;min-height:56px;padding:0 30px;border:0;border-radius:28px;background:var(--red);color:#fff;font-weight:800;font-size:17px;cursor:pointer}
.cta:disabled{opacity:.6;cursor:wait}
.cta.pop{animation:pop .4s ease-out}
@keyframes pop{0%{transform:scale(.7);opacity:0}100%{transform:scale(1);opacity:1}}
.ghost{min-height:48px;padding:0 20px;border:1px solid var(--gold);border-radius:24px;background:transparent;color:var(--gold);font-weight:800;font-size:15px;cursor:pointer}
.row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:26px}

/* ----- Page 1 ----- */
.logo-title{margin:52px 0 0;text-align:center;line-height:1;font-weight:400}
.logo-title .noel{display:block;font-family:'Mountains of Christmas',cursive;font-weight:700;font-size:54px;color:var(--cream)}
.logo-title .magique{position:relative;display:inline-block;margin-top:-4px;padding:0 8px 16px;font-family:'Great Vibes',cursive;font-size:96px;color:var(--gold);text-shadow:0 0 22px rgba(255,200,87,.55)}
.sp{position:absolute;width:18px;height:18px;background:var(--cream);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:twinkle 1.8s ease-in-out infinite}
.sp.s1{top:10px;left:-14px}.sp.s2{top:0;right:4px;width:13px;height:13px;animation-delay:.5s}.sp.s3{bottom:20px;right:-14px;animation-delay:1s}
.peek{position:relative;width:min(330px,100%);height:96px;margin-top:8px;overflow:hidden}
.peek .elf{position:absolute;bottom:0;width:110px;height:96px;animation:peek 4.4s ease-in-out infinite}
.peek .elf:nth-child(1){left:calc(50% - 125px)}
.peek .elf:nth-child(2){left:calc(50% + 15px);animation-delay:-2.2s}
@keyframes peek{0%,100%{transform:translateY(66px)}35%,70%{transform:translateY(0)}}
.card{width:min(330px,100%);padding:22px;border-radius:26px;background:var(--cream);color:var(--navy);display:flex;flex-direction:column;gap:6px}
.card label{font-size:14px;font-weight:800;margin-top:8px}
.card label:first-child{margin-top:0}
.card input{height:48px;border:2px solid var(--navy);border-radius:14px;padding:0 14px;background:#fff;color:var(--navy);font-family:inherit;font-size:16px;width:100%}
.card input.mono{font-size:18px;letter-spacing:.5px}
.card input::placeholder{color:#6B7690;text-transform:none}
.card .cta{margin-top:14px}
.err{margin:8px 0 0;padding:10px 12px;border-radius:12px;background:#FFE3E0;color:#8A1F19;font-weight:700;font-size:14px}

/* ----- Page 2 ----- */
.scene{position:relative;width:300px;max-width:100%;height:168px;margin-top:28px}
.scene .elf{position:absolute;top:0;width:100px;height:138px;z-index:1;animation:work .9s ease-in-out infinite}
.scene .gift{position:absolute;top:76px;width:46px;height:46px;z-index:3;animation:hop 1.2s ease-in-out infinite}
.scene .bench{position:absolute;top:118px;left:0;width:100%;height:50px;z-index:2;border-radius:12px;background:#8B5A3C;border-top:6px solid #A8714B}
@keyframes work{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-12px)}}
.armL,.armR{transform-box:fill-box;transform-origin:50% 0}
.armL{animation:armL .9s ease-in-out infinite}.armR{animation:armR .9s ease-in-out infinite}
@keyframes armL{0%,100%{transform:rotate(14deg)}50%{transform:rotate(-26deg)}}
@keyframes armR{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(26deg)}}
.bar{margin-top:26px;width:300px;max-width:100%;height:16px;border:2px solid var(--gold);border-radius:8px;overflow:hidden}
#bar-fill{height:100%;width:0;background:var(--gold)}
#bar-fill.run{animation:grow 10s linear forwards}
@keyframes grow{0%{width:0}100%{width:100%}}
.wait{margin:22px 0 0;min-height:56px;display:flex;align-items:center;font-size:17px;font-weight:800;color:var(--gold)}
#to-wheel{margin-top:22px;position:relative;z-index:6}

/* ----- Page 3 ----- */
.wheelbox{position:relative;margin-top:22px;width:300px;height:322px}
.pointer{position:absolute;top:0;left:130px;z-index:2}
.wheel{position:absolute;top:22px;left:0;width:300px;height:300px;transition:transform 9s cubic-bezier(.25,.1,.15,1)}
.wheel.instant{transition:none}
.hub{position:absolute;top:134px;left:112px;z-index:3;width:76px;height:76px;padding:0;border:3px solid var(--gold);border-radius:50%;background:var(--navy);cursor:pointer;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hub:disabled{cursor:wait}
.status{margin-top:20px;min-height:56px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:var(--gold);text-align:center}
.pillcta{display:inline-flex;align-items:center;height:56px;padding:0 28px;border-radius:28px;background:var(--red);color:#fff;font-size:17px}
.result{position:relative;z-index:2;margin-top:12px;width:min(330px,100%);padding:12px 20px 14px;border-radius:26px;background:var(--cream);color:var(--navy);text-align:center;animation:pop2 .6s ease-out}
.result.solid{margin-top:34px;padding:26px 20px 28px;animation:none}
@keyframes pop2{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.06);opacity:1}100%{transform:scale(1)}}
.result .small{font-size:14px;font-weight:700;margin-top:6px}
.result .who{font-family:'Fredoka',sans-serif;font-weight:600;font-size:46px;line-height:1.15;color:var(--red);overflow-wrap:anywhere}
.result.solid .who{font-size:52px}
.result .note{font-size:13px}
.result.solid .note{font-size:14px;margin-top:8px}
.cheer{position:absolute;bottom:34px;width:92px;height:127px;z-index:1;animation:cheer 1.1s ease-in-out infinite}
.cheer.cl{left:2px}.cheer.cr{right:2px;animation-delay:.4s}
.cheer .armL{animation:wavL 1.1s ease-in-out infinite}.cheer .armR{animation:wavR 1.1s ease-in-out infinite}
@keyframes cheer{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes wavL{0%,100%{transform:rotate(20deg)}50%{transform:rotate(-150deg)}}
@keyframes wavR{0%,100%{transform:rotate(-20deg)}50%{transform:rotate(150deg)}}
.confetti{position:fixed;top:0;width:10px;height:14px;z-index:4;pointer-events:none;animation:confall linear infinite}
@keyframes confall{0%{transform:translateY(-30px) rotate(0)}100%{transform:translateY(110vh) rotate(360deg)}}

/* ----- Signature ----- */
.sig{position:fixed;bottom:12px;left:0;right:0;z-index:5;text-align:center;font-size:12px;color:var(--navy);pointer-events:none}
.sig a,.sig .ver{pointer-events:auto;color:var(--navy)}
.sig .ver{cursor:default;user-select:none;-webkit-user-select:none}

@media (prefers-reduced-motion:reduce){
  #bg .flake,#bg .star,#drift,.peek .elf,.scene .elf,.scene .gift,.armL,.armR,.cheer,.cheer .armL,.cheer .armR,.sp,.confetti{animation:none!important}
  .peek .elf{transform:none}
  #drift{transform:none}
}