/* KOUYA Family Games - styles
   Toute l'interface est dessinée sur une toile 16:9 de 192 x 108 rem ; 1rem = 10 px à 1920 x 1080.
   La taille de la police racine est recalculée par js/ui.js pour tenir sur n'importe quel écran. */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{font-size:10px}
html,body{width:100%;height:100%;overflow:hidden;background:#120a3c}
body{font-family:"Fredoka","Trebuchet MS","Segoe UI",system-ui,sans-serif;font-weight:500;color:#fff;display:flex;align-items:center;justify-content:center;
  -webkit-user-select:none;user-select:none;cursor:default}
img{-webkit-user-drag:none}

/* ---------- Décors (un par monde) ---------- */
body{background:radial-gradient(circle at 20% 10%,#7b2ff7 0%,#2a1a7a 55%,#120a3c 100%)}
body[data-theme=rainbow]{background:linear-gradient(160deg,#ff8a65 0%,#ffb74d 32%,#4db6ac 70%,#5c6bc0 100%)}
body[data-theme=farm]{background:linear-gradient(170deg,#7cc576 0%,#2e7d32 60%,#1b5e20 100%)}
body[data-theme=candy]{background:linear-gradient(160deg,#ff80ab 0%,#ba68c8 60%,#7e57c2 100%)}
body[data-theme=ocean]{background:linear-gradient(170deg,#4fc3f7 0%,#0288d1 55%,#01579b 100%)}
body[data-theme=sunset]{background:linear-gradient(160deg,#ffca28 0%,#ff7043 50%,#8e24aa 100%)}
body[data-theme=space]{background:radial-gradient(circle at 70% 20%,#3949ab 0%,#1a237e 50%,#0b0f33 100%)}
body[data-theme=forest]{background:linear-gradient(170deg,#26a69a 0%,#00695c 55%,#004d40 100%)}
body[data-theme=gold]{background:linear-gradient(160deg,#ffd54f 0%,#ff8f00 55%,#bf360c 100%)}
body[data-theme=sky]{background:linear-gradient(170deg,#81d4fa 0%,#4fc3f7 35%,#7986cb 100%)}
.th-rainbow{background:linear-gradient(160deg,#ff8a65,#ffb74d 50%,#4db6ac)}
.th-farm{background:linear-gradient(160deg,#81c784,#2e7d32)}
.th-candy{background:linear-gradient(160deg,#ff80ab,#8e24aa)}
.th-ocean{background:linear-gradient(160deg,#4fc3f7,#01579b)}
.th-sunset{background:linear-gradient(160deg,#ffca28,#e64a19 60%,#8e24aa)}
.th-space{background:linear-gradient(160deg,#5c6bc0,#1a237e)}
.th-forest{background:linear-gradient(160deg,#4db6ac,#00695c)}
.th-gold{background:linear-gradient(160deg,#ffd54f,#e65100)}
.th-sky{background:linear-gradient(160deg,#81d4fa,#5c6bc0)}
.th-night{background:linear-gradient(160deg,#7e57c2,#311b92)}

#bg{position:fixed;left:0;top:0;width:100%;height:100%;overflow:hidden;pointer-events:none}
#bg i{position:absolute;bottom:-20rem;border-radius:50%;background:rgba(255,255,255,.08);animation:floatup linear infinite}
@keyframes floatup{to{transform:translateY(-135vh)}}

#app{position:relative;flex:none;width:192rem;height:108rem;display:flex;flex-direction:column;padding:2.5rem 5rem 1.5rem}
#top{display:flex;align-items:center;justify-content:space-between;height:10rem;flex:none}
#left,#right{width:50rem;display:flex;align-items:center;gap:2rem}
#right{justify-content:flex-end}
#logo{font-size:4.6rem;font-weight:700;letter-spacing:.02em;text-shadow:0 .6rem 0 rgba(0,0,0,.28);white-space:nowrap}
#logo span{color:#ffd600}
#crumb{font-size:2.6rem;opacity:.95;display:flex;align-items:center;gap:1rem;white-space:nowrap}
body.is-splash #top{visibility:hidden}
#stage{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}
body.is-splash #stage{justify-content:flex-start;padding-top:1rem}
#hint{height:4.5rem;line-height:4.5rem;text-align:center;font-size:2.2rem;opacity:.7;flex:none}
body.is-splash #hint{visibility:hidden}

.hide{display:none!important}
.ic{display:block;object-fit:contain}
.ic.xs{display:inline-block;width:3.6rem;height:3.6rem;vertical-align:middle}
.ic.xl{width:20rem;height:20rem}
.off.ic{filter:grayscale(1) opacity(.35)}

/* ---------- Boutons et focus télécommande ---------- */
.btn{cursor:pointer;border:.4rem solid transparent;border-radius:3rem;transition:transform .12s,box-shadow .12s}
.btn.focus{transform:scale(1.06);border-color:#fff;box-shadow:0 0 0 .8rem #ffd600,0 2rem 4rem rgba(0,0,0,.5);position:relative;z-index:3}
.mini{font-size:2.4rem;padding:1rem 2.6rem;background:rgba(255,255,255,.2);border-radius:5rem;white-space:nowrap;display:inline-flex;align-items:center;gap:1rem}
.mini.off{opacity:.6}
.pill{font-size:3rem;padding:1.6rem 4.4rem;border-radius:7rem;background:#ffd600;color:#3b2a00;font-weight:700;display:inline-flex;align-items:center;gap:1.4rem;white-space:nowrap;box-shadow:0 .8rem 0 rgba(0,0,0,.2)}
.pill.alt{background:#fff;color:#2b1a6b}
.pill.big{font-size:4.6rem;padding:2.2rem 9rem}
.pill.ready{background:#ff9100;color:#fff;animation:pulse 1.2s ease-in-out infinite}
.dot{font-style:normal;background:#ff5252;color:#fff;font-size:2rem;min-width:3.2rem;height:3.2rem;border-radius:2rem;display:inline-flex;align-items:center;justify-content:center;padding:0 .8rem}
@keyframes pulse{50%{box-shadow:0 0 0 1.2rem rgba(255,145,0,.45),0 .8rem 0 rgba(0,0,0,.2)}}

/* ---------- Accueil ---------- */
.hello{font-size:5.8rem;font-weight:700;text-align:center;margin-bottom:3.5rem;text-shadow:0 .6rem 0 rgba(0,0,0,.25)}
.hello-sub{font-size:3rem;text-align:center;margin-bottom:3rem;opacity:.95}
.cards{display:flex;gap:3rem;justify-content:center;flex-wrap:wrap}
.card{text-align:center;padding:2.6rem 1.6rem;border:.5rem solid rgba(255,255,255,.4);border-radius:4rem;box-shadow:0 1.2rem 3rem rgba(0,0,0,.35)}
.cards.p4 .card{width:38rem}
.card .av{display:flex;justify-content:center;margin-bottom:1rem}
.card img.av{width:19rem;height:19rem}
.card .nm{font-size:4.4rem;font-weight:700;line-height:1.1}
.card .sub{font-size:2.4rem;opacity:.95}
.card .ttl{display:inline-block;margin-top:1.4rem;background:rgba(0,0,0,.25);padding:.5rem 2rem;border-radius:3rem;font-size:2.4rem}
.card .st{font-size:2.8rem;margin-top:1.2rem;font-weight:700}
.homebar{display:flex;gap:4rem;margin-top:5rem}

/* ---------- Carte des mondes ---------- */
.wh{display:flex;align-items:center;gap:3rem;width:160rem;margin-bottom:3rem}
.wh-av img{width:12rem;height:12rem}
.wh-info{flex:1}
.wh-name{font-size:5.4rem;font-weight:700;line-height:1}
.wh-title{font-size:2.8rem;opacity:.95;margin:.6rem 0 1rem}
.xp{width:70rem;height:1.8rem;border-radius:1rem;background:rgba(0,0,0,.28);overflow:hidden}
.xp i{display:block;height:100%;background:linear-gradient(90deg,#ffd600,#ff9100);border-radius:1rem}
.wh-st{font-size:2.6rem;margin-top:.8rem;font-weight:700}
.wh-btns{display:flex;gap:2.5rem}
.wgrid{display:grid;grid-template-columns:repeat(4,38rem);gap:3rem;justify-content:center}
.wcard{height:29rem;padding:2rem 1rem}
.wi-box{height:11rem;display:flex;align-items:center;justify-content:center}
.wi-box .ic.wi{width:10.5rem;height:10.5rem}
.wi-box .shp{width:10rem;height:10rem}
.wcard .nm{font-size:3.2rem;min-height:7.2rem;display:flex;align-items:center;justify-content:center;margin-top:.6rem}
.wcard .pr{display:flex;gap:.9rem;justify-content:center;margin:.4rem 0}
.wcard .pr i{width:2rem;height:2rem;border-radius:50%;background:rgba(0,0,0,.25);display:block}
.wcard .pr i.open{background:#fff}
.wcard .pr i.done{background:#ffd600}
.wcard .st{font-size:2.6rem;margin-top:.8rem}

/* ---------- Chemin des niveaux ---------- */
.lh{display:flex;align-items:center;gap:3rem;margin-bottom:4rem}
.lh-ic img{width:13rem;height:13rem}
.lh-ic .shp{width:12rem;height:12rem}
.lh-t{font-size:7.4rem;font-weight:700;text-shadow:0 .8rem 0 rgba(0,0,0,.25)}
.path{position:relative;display:flex;gap:4rem;justify-content:center;align-items:flex-start}
.path:before{content:"";position:absolute;left:14rem;right:14rem;top:11rem;border-top:1.2rem dotted rgba(255,255,255,.45)}
.node{position:relative;width:27rem;display:flex;flex-direction:column;align-items:center;padding:1.8rem 1rem;border-radius:4.4rem}
.nc{width:16rem;height:16rem;border-radius:50%;background:#ffd600;color:#3b2a00;display:flex;align-items:center;justify-content:center;font-size:8.4rem;font-weight:700;box-shadow:0 1.2rem 0 #c79100;border:.8rem solid #fff}
.node.locked .nc{background:#9e9e9e;box-shadow:0 1.2rem 0 #6d6d6d}
.node.current .nc{animation:pulse2 1.4s ease-in-out infinite}
@keyframes pulse2{50%{transform:scale(1.08)}}
.nlock{width:7.5rem;height:7.5rem}
.nst{display:flex;gap:.6rem;margin:2.8rem 0 1rem}
.nst .ns{width:4.4rem;height:4.4rem}
.nl{font-size:2.4rem;text-align:center;min-height:6.4rem;line-height:1.15}
.node.locked .nl{opacity:.6}
.shake{animation:shake .45s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-1.4rem)}75%{transform:translateX(1.4rem)}}

/* ---------- Questions ---------- */
.dots{display:flex;gap:1.4rem;justify-content:center;height:2.8rem;margin-bottom:.6rem}
.dots span{width:2rem;height:2rem;border-radius:50%;background:rgba(255,255,255,.28)}
.dots span.on{background:#ffd600}
.dots span.cur{background:#fff;transform:scale(1.5)}
.qbox{width:100%;display:flex;flex-direction:column;align-items:center}
.qwrap{display:flex;flex-direction:column;align-items:center;max-width:170rem}
.prompt{font-size:5.6rem;font-weight:700;text-align:center;margin:.6rem 0;text-shadow:0 .6rem 0 rgba(0,0,0,.22);line-height:1.15}
.prompt b{color:#ffd600}
.prompt.small{font-size:4.2rem;max-width:150rem}
.chip{display:inline-block;padding:0 2rem;border-radius:2.4rem;border:.5rem solid #fff;text-shadow:0 .4rem 0 rgba(0,0,0,.4)}
.visual{font-size:10rem;font-weight:700;min-height:14rem;display:flex;align-items:center;justify-content:center;max-width:150rem;margin:1rem 0;line-height:1.1;text-shadow:0 .8rem 0 rgba(0,0,0,.2)}
.visual .q{color:#ffd600}
.visual .word{font-size:12rem;letter-spacing:.5rem}
.visual .ic.vis{width:19rem;height:19rem}
.cntbox{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 1.4rem;max-width:80rem}
.ic.cnt{width:9rem;height:9rem}
.clkbox .clk{width:30rem;height:30rem;filter:drop-shadow(0 1rem 1.5rem rgba(0,0,0,.3))}
.pz{display:grid;gap:.6rem;padding:1rem;background:rgba(255,255,255,.25);border-radius:3rem;box-sizing:content-box}
.pc{background-color:#fff;border-radius:1.4rem;background-repeat:no-repeat}
.pc.miss{background:rgba(0,0,0,.28);border:.5rem dashed rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center;font-size:7rem;color:#fff}
.pc.fill{animation:pop .5s}
.pcs{background-repeat:no-repeat;background-color:#fff;border-radius:1.2rem;outline:.4rem solid #e8e0ff}

.opts{display:flex;gap:3rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}
.opt{min-width:30rem;min-height:26rem;display:flex;align-items:center;justify-content:center;background:#fff;color:#2b1a6b;border-radius:4.4rem;padding:1.5rem 3rem;font-size:10rem;font-weight:700;box-shadow:0 1.2rem 0 rgba(0,0,0,.2);text-align:center}
.opt .ic.oi{width:19rem;height:19rem}
.opt.blob{width:26rem;height:26rem;min-width:0;min-height:0;border-radius:50%;border:.9rem solid #fff;padding:0}
.opt.num{min-width:28rem;font-size:11rem}
.opt.shapeopt .shp{width:19rem;height:19rem}
.opt.wordopt{font-size:7.6rem;min-width:36rem}
.opt.tm{font-size:6.6rem;min-width:36rem}
.opt.pieceopt{min-width:0;min-height:0;padding:2.6rem}
.opts.n2 .opt{min-width:40rem}
.opts.n2 .opt.blob{min-width:0}
.opts.txt{max-width:150rem}
.opts.txt .opt{font-size:3.5rem;font-weight:500;min-width:70rem;min-height:15rem;line-height:1.2;border-radius:3.4rem}
.opts.txt .opt.num{min-width:34rem;font-size:7.4rem;font-weight:700;min-height:20rem}
.opt.good{outline:1rem solid #00e676;animation:pop .5s}
.opt.bad{animation:shake .45s}
.opt.off{opacity:.3;transform:scale(.92)}
.opt.hint{animation:hintpulse .9s ease-in-out infinite}
.opts.txt .opt.good{background:#2e7d32;color:#fff;outline:none}
.opts.txt .opt.bad{background:#c62828;color:#fff}
@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.18)}100%{transform:scale(1.06)}}
@keyframes hintpulse{50%{transform:scale(1.1);box-shadow:0 0 0 1.2rem rgba(255,214,0,.8),0 1.2rem 0 rgba(0,0,0,.2)}}
.mini.repeat{margin-top:2.6rem}
.timer{width:110rem;height:2.2rem;border-radius:1.2rem;background:rgba(0,0,0,.28);overflow:hidden;margin-top:3rem}
.timer i{display:block;height:100%;width:100%;border-radius:1.2rem;background:#69f0ae;animation-name:tcol;animation-timing-function:linear;animation-fill-mode:forwards}
@keyframes tcol{0%{background:#69f0ae}55%{background:#ffd600}100%{background:#ff5252}}

/* ---------- Mémoire ---------- */
.mem-info{display:flex;gap:6rem;align-items:center;font-size:3rem;margin-bottom:2.4rem}
.mem-info b{font-size:4.6rem}
.mem-info span{display:inline-flex;align-items:center;gap:1rem}
.mgrid{display:grid;justify-content:center}
.mcard{perspective:150rem;border-radius:3rem;background:transparent;padding:0}
.mc-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:transform .45s}
.mcard.up .mc-in,.mcard.done .mc-in{transform:rotateY(180deg)}
.mc-f{position:absolute;left:0;top:0;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:2.6rem;display:flex;align-items:center;justify-content:center}
.mc-back{background:linear-gradient(135deg,#ff7043,#ffb300);border:.6rem solid rgba(255,255,255,.65)}
.mc-back .mcs{width:42%;opacity:.8}
.mc-front{background:#fff;transform:rotateY(180deg)}
.mc-front .mci{width:70%;height:70%}
.mcard.done{opacity:.55}

/* ---------- Résultats, podium ---------- */
.res{display:flex;flex-direction:column;align-items:center;text-align:center}
.res-t{font-size:8rem;font-weight:700;text-shadow:0 .8rem 0 rgba(0,0,0,.25)}
.res-stars{display:flex;gap:2.4rem;margin:2.4rem 0 1.6rem}
.rs .rsi{width:17rem;height:17rem}
.rs.off .rsi{filter:grayscale(1) opacity(.3)}
.rs.earn .rsi{filter:grayscale(1) opacity(.3);transform:scale(.3);transition:transform .5s cubic-bezier(.3,1.8,.5,1),filter .3s}
.rs.earn.on .rsi{filter:drop-shadow(0 1rem 1rem rgba(0,0,0,.3));transform:scale(1)}
.res-sub{font-size:3.6rem}
.res-note{font-size:3.6rem;color:#ffd600;margin-top:2rem;display:flex;gap:1rem;align-items:center;font-weight:700}
.res-btns{display:flex;gap:3.5rem;margin-top:4.4rem}
.podium{display:flex;align-items:flex-end;gap:3rem;margin:2rem 0 3rem;min-height:44rem}
.pl{width:32rem;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.pl .pav{width:13rem;height:13rem}
.pn{font-size:3.4rem;font-weight:700}
.pp{font-size:2.8rem;margin-bottom:1rem}
.pb{width:100%;border-radius:2.4rem 2.4rem 0 0;background:rgba(255,255,255,.28);display:flex;align-items:flex-start;justify-content:center;padding-top:1.2rem}
.pl0 .pb{height:19rem}.pl1 .pb{height:13rem}.pl2 .pb{height:8.5rem}
.pm{width:8rem;height:8rem}
.fboard{display:flex;gap:2rem;margin-bottom:1.6rem}
.fchip{display:flex;align-items:center;gap:1.2rem;padding:.8rem 2.6rem .8rem 1.4rem;border-radius:4rem;background:rgba(0,0,0,.28);font-size:3.2rem;font-weight:700}
.fchip.cur{background:#ffd600;color:#3b2a00}
.fchip .fav{width:5.4rem;height:5.4rem}
.fturn{text-align:center;padding:2rem 0 4rem}
.fturn .ic{margin:0 auto}
.cards.fam .fcard{width:34rem;padding:2.4rem 1rem}
.fcard:not(.on){filter:grayscale(.9) brightness(.75)}
.fcard .chk{height:6rem;margin-top:1rem}
.fcard:not(.on) .chk{opacity:0}
.fcard .chki{width:6rem;height:6rem;margin:0 auto}
.fam{margin-bottom:4rem}

/* ---------- Récompenses ---------- */
.tabs{display:flex;gap:3rem;margin-bottom:3rem}
.tab{padding:1.4rem 4.4rem;border-radius:5rem;font-size:3rem;background:rgba(255,255,255,.2);display:inline-flex;align-items:center;gap:1.2rem;font-weight:700}
.tab.on{background:#fff;color:#2b1a6b}
.sgrid{display:grid;grid-template-columns:repeat(10,15rem);gap:2rem;justify-content:center}
.slot{position:relative;width:15rem;height:15rem;background:rgba(255,255,255,.2);border-radius:3rem;display:flex;align-items:center;justify-content:center}
.slot.empty{background:rgba(0,0,0,.22)}
.slot .ic.sl{width:11rem;height:11rem}
.slot .ic.sl.off{filter:brightness(0) opacity(.28)}
.slot em{position:absolute;font-style:normal;font-size:2rem;font-weight:700}
.slot .new{top:-1.2rem;right:-1.4rem;background:#ff5252;padding:.4rem 1.2rem;border-radius:2rem}
.slot .cnt2{bottom:.6rem;right:1.2rem;background:rgba(0,0,0,.35);padding:0 1rem;border-radius:2rem}
.scap{margin-top:3.4rem;font-size:3.4rem;text-align:center;min-height:5rem}
.tgrid{display:grid;grid-template-columns:repeat(3,56rem);gap:2rem}
.tro{display:flex;align-items:center;gap:2.2rem;padding:1.2rem 2.4rem;border-radius:3rem;background:rgba(255,255,255,.2);height:12rem}
.tro.locked{opacity:.55}
.tro-i img{width:8rem;height:8rem}
.tro-i img.off{filter:grayscale(1) opacity(.5)}
.tro-t b{font-size:2.8rem;display:block;line-height:1.1}
.tro-t span{font-size:2.1rem;opacity:.92;line-height:1.1;display:block}

/* ---------- Écran titre, à propos ---------- */
.splash{text-align:center;margin-top:2rem}
.sp-title{font-size:14rem;font-weight:700;line-height:1;text-shadow:0 1rem 0 rgba(0,0,0,.3)}
.sp-title span{color:#ffd600}
.sp-sub{font-size:3.8rem;margin-top:2rem;opacity:.95}
.sp-foot{position:absolute;left:0;right:0;bottom:3rem;display:flex;justify-content:center}
.about{max-width:130rem;background:rgba(255,255,255,.16);border-radius:5rem;padding:5rem 7rem;text-align:center;margin-bottom:4rem}
.ab-t{font-size:6.4rem;font-weight:700}
.ab-v{font-size:2.6rem;opacity:.8;margin-bottom:2.5rem}
.about p{font-size:3.2rem;line-height:1.35;margin-bottom:2rem}
.about .ab-s{font-size:2.4rem;opacity:.85}

/* ---------- Mascotte Kouki ---------- */
#mascot{position:absolute;z-index:6;pointer-events:none}
#mascot.mode-off{display:none}
#mascot.mode-corner{left:2.5rem;bottom:1.5rem;width:17rem}
#mascot.mode-mini{left:1.5rem;bottom:1rem;width:10rem}
#mascot.mode-center{left:50%;margin-left:-15rem;top:50rem;width:30rem}
.msvg svg{display:block;width:100%;height:auto;overflow:visible}
.mbubble{position:absolute;left:100%;bottom:58%;margin-left:1.2rem;background:#fff;color:#2b1a6b;border-radius:2.6rem;padding:1.4rem 2.4rem;font-size:2.8rem;font-weight:500;line-height:1.2;width:max-content;max-width:38rem;box-shadow:0 .8rem 2rem rgba(0,0,0,.3);opacity:0;transform:scale(.8);transform-origin:left bottom;transition:opacity .2s,transform .2s}
.mbubble:before{content:"";position:absolute;left:-1.6rem;bottom:1.6rem;border:1rem solid transparent;border-right:1.8rem solid #fff;border-left:0}
.mbubble.on{opacity:1;transform:none}
#mascot.mode-center .mbubble{left:50%;bottom:100%;margin:0 0 1rem -19rem;max-width:38rem;text-align:center;font-size:3.2rem}
#mascot.mode-center .mbubble:before{display:none}
.mk .brows,.mk .sweat,.mk .qmark,.mk .mouth{opacity:0}
.mk.m-oops .brows,.mk.m-oops .sweat{opacity:1}
.mk.m-think .qmark{opacity:1}
.mk.m-cheer .mouth{opacity:1}
.mk .beakLow{transition:transform .15s}
.mk.m-cheer .beakLow{transform:translateY(7px)}
.mk .body{transform-origin:100px 206px;animation:breathe 3.2s ease-in-out infinite}
.mk .lid{transform:scaleY(0);animation:blink 4.4s infinite}
.mk .lid.l{transform-origin:68px 69px}
.mk .lid.r{transform-origin:132px 69px}
.mk .wingL{transform-origin:56px 118px}
.mk .wingR{transform-origin:144px 118px}
.mk.m-cheer{animation:hop .55s ease-out 3}
.mk.m-cheer .wingL{animation:flapL .3s ease-in-out infinite alternate}
.mk.m-cheer .wingR{animation:flapR .3s ease-in-out infinite alternate}
.mk.m-oops{animation:shake .5s}
.mk.m-think .body{animation:none;transform:rotate(-5deg)}
.mk.m-think .pupils{transform:translate(-5px,-5px)}
@keyframes breathe{50%{transform:scale(1,1.025)}}
@keyframes blink{0%,92%,100%{transform:scaleY(0)}95%{transform:scaleY(1)}}
@keyframes hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-14%)}}
@keyframes flapL{from{transform:rotate(0)}to{transform:rotate(-38deg)}}
@keyframes flapR{from{transform:rotate(0)}to{transform:rotate(38deg)}}

/* ---------- Fenêtres, confettis, message ---------- */
#overlay{position:absolute;left:0;top:0;width:100%;height:100%;z-index:30;display:flex;align-items:center;justify-content:center}
#overlay:empty{display:none}
.pu-shade{position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(10,5,40,.78)}
.popup{position:relative;width:100rem;padding:4.4rem 6rem 5rem;text-align:center;background:linear-gradient(160deg,#8b6cff,#3d2aa8);border:.8rem solid #fff;border-radius:6rem;box-shadow:0 3rem 8rem rgba(0,0,0,.6);animation:popin .45s cubic-bezier(.3,1.5,.5,1)}
.pu-img{display:flex;justify-content:center}
.pu-img img.pu{width:25rem;height:25rem;filter:drop-shadow(0 1.4rem 1.4rem rgba(0,0,0,.35))}
.pu-sticker .pu-img img{animation:spinin .9s cubic-bezier(.3,1.4,.5,1)}
.pu-chest .pu-img img{animation:rattle .5s ease-in-out infinite}
.pu-title{font-size:5.8rem;font-weight:700;margin:1rem 0}
.pu-text{font-size:3.6rem;margin-bottom:2.4rem;line-height:1.3}
.popup .pill{margin-top:1rem}
@keyframes popin{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes spinin{0%{transform:scale(.2) rotate(-200deg)}100%{transform:scale(1) rotate(0)}}
@keyframes rattle{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.conf{position:absolute;top:-12rem;z-index:25;pointer-events:none;animation:fall linear forwards}
.conf img{width:6.4rem;height:6.4rem}
@keyframes fall{to{transform:translateY(125rem) rotate(400deg)}}
#toast{position:absolute;left:50%;bottom:10rem;transform:translateX(-50%);background:#fff;color:#2b1a6b;padding:1.6rem 4.4rem;border-radius:5rem;font-size:3.2rem;font-weight:700;opacity:0;transition:opacity .25s;z-index:40;pointer-events:none;white-space:nowrap}
#toast.on{opacity:1}