/* ===== Ballons ===== */
.bln-banner{position:absolute;left:50%;top:calc(8*var(--u));translate:-50% 0;z-index:3;display:flex;align-items:center;gap:calc(10*var(--u));padding:calc(6*var(--u)) calc(18*var(--u)) calc(6*var(--u)) calc(10*var(--u));border-radius:99px;background:rgba(255,255,255,.93);color:var(--ink);font-weight:700;font-size:calc(19*var(--u));box-shadow:0 calc(6*var(--u)) 0 rgba(60,30,140,.2),0 calc(12*var(--u)) calc(22*var(--u)) rgba(20,5,70,.28);white-space:nowrap}
.bln-banner.flip{animation:bannerin .6s cubic-bezier(.2,1.5,.4,1)}
@keyframes bannerin{0%{transform:scale(.5) rotate(-6deg);opacity:0}100%{transform:none;opacity:1}}
.bb-img{height:calc(52*var(--u));width:calc(42*var(--u));object-fit:contain;margin:calc(-4*var(--u)) 0}
.bb-img.hint{animation:hintpulse .7s}
@keyframes hintpulse{0%,100%{transform:scale(1)}40%{transform:scale(1.5) rotate(-8deg)}}
.bb-txt b{color:var(--c);-webkit-text-stroke:calc(1*var(--u)) rgba(0,0,0,.18)}
.bb-pips{display:flex;gap:calc(4*var(--u))}
.bb-pips i{width:calc(14*var(--u));height:calc(14*var(--u));border-radius:50%;background:#e4dcf8;box-shadow:inset 0 2px 3px rgba(0,0,0,.18);transition:.25s}
.bb-pips i.on{background:linear-gradient(180deg,#ffe56a,#ff9d00);transform:scale(1.25);box-shadow:0 0 8px #ffd24a}
.bln-field{position:absolute;inset:0;overflow:hidden}
.bln{position:absolute;bottom:calc(-160*var(--u));animation:blnrise linear forwards;touch-action:none;cursor:pointer}
.bln::before{content:'';position:absolute;inset:-14%;border-radius:50%}
@keyframes blnrise{from{transform:translateY(0)}to{transform:translateY(calc(-1*var(--rise)))}}
.bimg{position:absolute;left:0;top:0;width:100%;height:84%;object-fit:contain;transform-origin:50% 100%;animation:blnsway ease-in-out infinite alternate;pointer-events:none;filter:drop-shadow(0 calc(6*var(--u)) calc(8*var(--u)) rgba(30,10,90,.25))}
.bln.gift .bimg{height:75%;filter:drop-shadow(0 0 14px #fff3a8) drop-shadow(0 calc(6*var(--u)) calc(8*var(--u)) rgba(30,10,90,.25))}
.bstring{position:absolute;left:50%;top:78%;width:2px;height:22%;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.3));transform-origin:50% 0;animation:blnsway ease-in-out infinite alternate;animation-duration:2.6s}
@keyframes blnsway{from{transform:rotate(-7deg) translateX(-5%)}to{transform:rotate(7deg) translateX(5%)}}
.bln.wobble .bimg{animation:wob .5s}
@keyframes wob{0%,100%{transform:rotate(0)}20%{transform:rotate(-16deg) scale(.92,1.06)}40%{transform:rotate(14deg) scale(1.06,.94)}60%{transform:rotate(-9deg)}80%{transform:rotate(6deg)}}

/* ===== Mémoire ===== */
.mem-wrap{position:absolute;inset:0;display:grid;place-items:center}
.mem-grid{display:grid;justify-content:center;perspective:900px}
.mcard{position:relative;padding:0;border:0;background:none;perspective:700px;touch-action:none;transform-style:preserve-3d}
@keyframes mcin{from{opacity:0;transform:translateY(40px) scale(.5) rotate(-8deg)}to{opacity:1;transform:none}}
.mflip{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.3,1.35,.5,1)}
.mcard.up .mflip{transform:rotateY(180deg)}
.mback,.mfront{position:absolute;inset:0;border-radius:calc(18*var(--u));backface-visibility:hidden;-webkit-backface-visibility:hidden;display:grid;place-items:center;box-shadow:0 calc(6*var(--u)) 0 rgba(40,10,110,.3),0 calc(10*var(--u)) calc(16*var(--u)) rgba(20,5,70,.3),inset 0 0 0 calc(3*var(--u)) rgba(255,255,255,.75)}
.mback{background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.55),rgba(255,255,255,0) 45%),radial-gradient(rgba(255,255,255,.28) 2px,transparent 2.5px) 0 0/calc(16*var(--u)) calc(16*var(--u)),linear-gradient(145deg,#8e5dff,#ff62c7)}
.mback img{width:56%;filter:drop-shadow(0 4px 4px rgba(0,0,0,.3));animation:iconjig 3s ease-in-out infinite}
.mfront{transform:rotateY(180deg);background:linear-gradient(160deg,#fff,var(--bg))}
.mfront img{width:80%;height:80%;object-fit:contain;filter:drop-shadow(0 5px 5px rgba(0,0,0,.2))}
.mcard.ok .mflip{animation:cardok .7s;transform:rotateY(180deg)}
.mcard.ok .mfront{box-shadow:0 0 0 calc(4*var(--u)) #ffe34d,0 0 24px 6px rgba(255,230,90,.85),0 calc(6*var(--u)) 0 rgba(40,10,110,.3)}
@keyframes cardok{0%{transform:rotateY(180deg) scale(1)}40%{transform:rotateY(180deg) scale(1.2) rotate(4deg)}100%{transform:rotateY(180deg) scale(1)}}
.mcard.no .mflip{animation:cardno .45s;transform:rotateY(180deg)}
@keyframes cardno{0%,100%{transform:rotateY(180deg) translateX(0)}25%{transform:rotateY(180deg) translateX(-8px)}75%{transform:rotateY(180deg) translateX(8px)}}
.mcard.wig{animation:wiggle .7s}

/* ===== Qui manque ? ===== */
.mis-wrap{position:absolute;inset:0}
.mis-top{position:absolute;left:0;right:0;top:calc(14*var(--u));height:46%;display:grid;place-items:center}
.mis-shelf{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(10*var(--u)) calc(12*var(--u));width:100%}
.mis-item{position:relative;width:var(--is);height:calc(var(--is)*1.08);animation:misin .55s var(--d) backwards cubic-bezier(.2,1.6,.4,1)}
@keyframes misin{from{opacity:0;transform:translateY(-60px) scale(.3)}to{opacity:1;transform:none}}
.mis-item img{position:absolute;left:8%;top:0;width:84%;height:84%;object-fit:contain;filter:drop-shadow(0 calc(8*var(--u)) calc(8*var(--u)) rgba(20,60,120,.28));animation:iconjig 3.6s ease-in-out infinite;animation-delay:var(--d)}
.mis-item .plat{position:absolute;left:0;right:0;bottom:0;height:22%;border-radius:50%;background:radial-gradient(ellipse at 50% 30%,#fff,#d9ecff 70%);box-shadow:0 calc(6*var(--u)) 0 rgba(30,70,140,.25),inset 0 0 0 calc(2*var(--u)) rgba(255,255,255,.8);z-index:-1}
.mis-item.hop img{animation:hop .6s}
.mis-item.hole .plat{background:radial-gradient(ellipse at 50% 40%,#fff6a8,#ffd23f 70%);animation:holepulse 1s ease-in-out infinite}
.mis-item.hole::after{content:'?';position:absolute;left:0;right:0;top:6%;text-align:center;font-weight:700;font-size:calc(var(--is)*.6);color:#fff;text-shadow:0 3px 0 #e0a000,0 0 18px rgba(255,230,100,.9);animation:holepulse 1s ease-in-out infinite}
@keyframes holepulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.mis-item.back img{animation:misback .8s cubic-bezier(.2,1.6,.4,1)}
@keyframes misback{from{transform:scale(0) rotate(-180deg)}to{transform:none}}
.mis-curtain{position:absolute;left:calc(-10*var(--u));right:calc(-10*var(--u));top:0;bottom:calc(-8*var(--u));background:linear-gradient(180deg,#ffffff,#d8ecff 70%,#c3e0ff);border-radius:0 0 calc(60*var(--u)) calc(60*var(--u));box-shadow:0 calc(10*var(--u)) 0 rgba(60,100,200,.3),inset 0 0 0 calc(4*var(--u)) rgba(255,255,255,.9);transform:translateY(-130%);transition:transform .7s cubic-bezier(.3,1.25,.5,1);display:flex;align-items:center;justify-content:space-around;z-index:5;pointer-events:none}
.mis-curtain.down{transform:translateY(0)}
.mis-curtain i{font-style:normal;font-weight:700;font-size:calc(46*var(--u));color:#8fb8ff;text-shadow:0 3px 0 #fff;animation:holepulse 1.2s ease-in-out infinite}
.mis-curtain i:nth-child(2){animation-delay:-.3s}.mis-curtain i:nth-child(3){animation-delay:-.6s}.mis-curtain i:nth-child(4){animation-delay:-.9s}
.mis-timer{position:absolute;left:12%;right:12%;top:calc(54%);height:calc(10*var(--u));border-radius:99px;background:rgba(255,255,255,.4);overflow:hidden;box-shadow:inset 0 2px 4px rgba(0,0,0,.2)}
.mis-timer i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#fff59d,#ffb300);border-radius:99px}
.mis-opts{position:absolute;left:0;right:0;top:calc(58% + 4*var(--u));display:flex;justify-content:center;gap:calc(12*var(--u));flex-wrap:wrap;padding:0 12px;opacity:0;pointer-events:none;transition:opacity .3s}
.mis-opts.on{opacity:1;pointer-events:auto}
.mis-opt{width:calc(98*var(--u));height:calc(104*var(--u));border:0;border-radius:calc(24*var(--u));background:linear-gradient(160deg,#fff,#ece3ff);display:grid;place-items:center;box-shadow:0 calc(7*var(--u)) 0 rgba(60,30,150,.28),0 calc(12*var(--u)) calc(18*var(--u)) rgba(20,5,70,.3),inset 0 0 0 calc(3*var(--u)) rgba(255,255,255,.9);animation:misin .5s var(--d) backwards cubic-bezier(.2,1.6,.4,1);transition:transform .1s}
.mis-opt:active{transform:translateY(calc(5*var(--u)))}
.mis-opt img{width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 4px 4px rgba(0,0,0,.2));pointer-events:none}
.mis-opt.dim{opacity:.35;filter:grayscale(.6)}
.mis-opt.shakeit{animation:shake .4s}
.mis-opt.right{animation:cardok .7s;box-shadow:0 0 0 calc(5*var(--u)) #3de07a,0 0 26px 6px rgba(80,255,150,.8)}
.mis-opt.hint{animation:holepulse .8s ease-in-out infinite;box-shadow:0 0 0 calc(5*var(--u)) #ffe34d,0 0 26px 6px rgba(255,230,90,.85)}

/* ===== Formes ===== */
.sh-wrap{position:absolute;inset:0}
.sh-holes,.sh-tray{position:absolute;left:0;right:0;display:grid;justify-content:center;gap:calc(14*var(--u)) calc(12*var(--u));transition:opacity .4s,transform .4s}
.sh-holes{top:calc(12*var(--u))}
.sh-tray{bottom:calc(112*var(--u));padding:calc(12*var(--u)) 0;border-radius:calc(30*var(--u));background:rgba(255,255,255,.2);margin:0 calc(10*var(--u));box-shadow:inset 0 0 0 calc(3*var(--u)) rgba(255,255,255,.45)}
body.land .sh-tray{bottom:calc(10*var(--u))}
.sh-holes.swap,.sh-tray.swap{opacity:0;transform:scale(.8)}
.sh-hole{position:relative;width:var(--s);height:var(--s);margin:calc(6*var(--u));border-radius:calc(var(--s)*.26);background:rgba(20,10,80,.26);box-shadow:inset 0 calc(5*var(--u)) calc(10*var(--u)) rgba(0,0,0,.35),0 0 0 calc(3*var(--u)) rgba(255,255,255,.45);display:grid;place-items:center;animation:misin .5s var(--d) backwards cubic-bezier(.2,1.6,.4,1)}
.sh-hole img{position:absolute;width:84%;height:84%;object-fit:contain}
.sh-hole .shadow{filter:brightness(0) opacity(.45) blur(.4px)}
.sh-hole .real{opacity:0;transform:scale(.4)}
.sh-hole.filled{background:rgba(255,255,255,.3);box-shadow:0 0 22px 4px rgba(255,235,120,.8),0 0 0 calc(3*var(--u)) #ffe34d}
.sh-hole.filled .shadow{opacity:0}
.sh-hole.filled .real{opacity:1;transform:scale(1);transition:transform .5s cubic-bezier(.2,1.8,.4,1),opacity .15s;filter:drop-shadow(0 4px 4px rgba(0,0,0,.25))}
.sh-hole.near{box-shadow:inset 0 5px 10px rgba(0,0,0,.3),0 0 0 calc(4*var(--u)) #7dffa8,0 0 24px 6px rgba(120,255,170,.85);transform:scale(1.06)}
.sh-hole.no{animation:shake .4s}
.sh-hole.pulse{animation:holepulse .6s ease-in-out infinite;box-shadow:inset 0 5px 10px rgba(0,0,0,.3),0 0 0 calc(4*var(--u)) #ffe34d,0 0 24px 6px rgba(255,230,90,.85)}
.sh-cell{position:relative;width:var(--s);height:var(--s);margin:calc(6*var(--u))}
.sh-piece{position:absolute;inset:0;touch-action:none;cursor:grab;animation:misin .5s var(--d) backwards cubic-bezier(.2,1.6,.4,1);z-index:2}
.sh-piece img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 calc(6*var(--u)) calc(6*var(--u)) rgba(30,10,90,.3));pointer-events:none}
.sh-piece.drag{z-index:30;cursor:grabbing}
.sh-piece.drag img{filter:drop-shadow(0 calc(18*var(--u)) calc(14*var(--u)) rgba(30,10,90,.35))}
.sh-piece.wig{animation:wiggle .7s}

/* ===== Compter ===== */
.cnt-wrap{position:absolute;inset:0}
.cnt-q{position:absolute;left:50%;top:calc(6*var(--u));translate:-50% 0;z-index:3;display:flex;align-items:center;gap:calc(10*var(--u));padding:calc(5*var(--u)) calc(18*var(--u)) calc(5*var(--u)) calc(8*var(--u));border-radius:99px;background:rgba(255,255,255,.94);color:var(--ink);font-weight:700;font-size:calc(19*var(--u));box-shadow:0 calc(6*var(--u)) 0 rgba(60,30,140,.2),0 calc(12*var(--u)) calc(22*var(--u)) rgba(20,5,70,.25);white-space:nowrap}
.cnt-q.in{animation:bannerin .6s cubic-bezier(.2,1.5,.4,1)}
.cnt-q img{width:calc(46*var(--u));height:calc(46*var(--u));object-fit:contain}
.cnt-field{position:absolute;left:calc(12*var(--u));right:calc(12*var(--u));top:calc(68*var(--u));height:calc(50% - 76*var(--u));border-radius:calc(30*var(--u));background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 calc(3*var(--u)) rgba(255,255,255,.5),inset 0 calc(6*var(--u)) calc(14*var(--u)) rgba(0,40,100,.12)}
.cnt-obj{position:absolute;width:var(--os);height:var(--os);translate:-50% -50%;border:0;background:none;padding:0;touch-action:none;animation:misin .5s var(--d) backwards cubic-bezier(.2,1.6,.4,1)}
.cnt-obj img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 calc(6*var(--u)) calc(6*var(--u)) rgba(20,60,120,.28));animation:iconjig 3.4s ease-in-out infinite;animation-delay:var(--b);pointer-events:none}
.cnt-obj b{position:absolute;right:-6%;top:-10%;min-width:calc(30*var(--u));height:calc(30*var(--u));border-radius:50%;background:#ff5d8f;color:#fff;font-size:calc(17*var(--u));display:none;place-items:center;box-shadow:0 0 0 calc(3*var(--u)) #fff,0 calc(4*var(--u)) 0 rgba(0,0,0,.2);pointer-events:none}
.cnt-obj.counted b{display:grid;animation:popin .35s cubic-bezier(.2,1.8,.4,1)}
.cnt-obj.jump img{animation:hop .6s}
.cnt-obj.counted img{filter:drop-shadow(0 0 10px rgba(255,255,255,.9)) drop-shadow(0 calc(6*var(--u)) calc(6*var(--u)) rgba(20,60,120,.28))}
.cnt-auto{position:absolute;right:calc(18*var(--u));top:calc(74*var(--u));z-index:4}
.cnt-opts{position:absolute;left:0;right:0;top:calc(50% + 14*var(--u));display:flex;justify-content:center;gap:calc(12*var(--u));flex-wrap:wrap;padding:0 12px;opacity:0;pointer-events:none;transition:opacity .3s}
.cnt-opts.on{opacity:1;pointer-events:auto}
.cnt-opt{width:calc(94*var(--u));height:calc(118*var(--u));border:0;border-radius:calc(26*var(--u));background:linear-gradient(170deg,rgba(255,255,255,.45),rgba(255,255,255,0) 45%),var(--c);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(4*var(--u));color:#fff;box-shadow:0 calc(8*var(--u)) 0 rgba(0,0,0,.25),0 calc(14*var(--u)) calc(18*var(--u)) rgba(20,5,70,.3),inset 0 0 0 calc(3*var(--u)) rgba(255,255,255,.55);animation:misin .5s var(--d) backwards cubic-bezier(.2,1.6,.4,1);transition:transform .1s}
.cnt-opt:active{transform:translateY(calc(6*var(--u)))}
.cnt-opt .num{font-weight:700;font-size:calc(58*var(--u));line-height:1;text-shadow:0 calc(4*var(--u)) 0 rgba(0,0,0,.25)}
.cnt-opt .dots{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(3*var(--u));max-width:80%;min-height:calc(14*var(--u))}
.cnt-opt .dots i{width:calc(9*var(--u));height:calc(9*var(--u));border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 1px 0 rgba(0,0,0,.2)}
.cnt-opt.dim{opacity:.3;filter:grayscale(.7)}
.cnt-opt.shakeit{animation:shake .4s}
.cnt-opt.right{animation:cardok .7s;box-shadow:0 0 0 calc(5*var(--u)) #fff,0 0 28px 8px rgba(255,255,255,.9)}

/* ===== Étoiles ===== */
.st-cv{position:absolute;inset:0;touch-action:none}
.st-hud{position:absolute;left:calc(12*var(--u));top:calc(8*var(--u));display:flex;align-items:center;gap:calc(6*var(--u));padding:calc(4*var(--u)) calc(16*var(--u)) calc(4*var(--u)) calc(6*var(--u));border-radius:99px;background:rgba(10,0,60,.4);box-shadow:inset 0 0 0 2px rgba(255,255,255,.5);font-weight:700;pointer-events:none}
.st-hud img{width:calc(34*var(--u));height:calc(34*var(--u));object-fit:contain}
.st-hud b{font-size:calc(28*var(--u));min-width:calc(30*var(--u));text-align:center}
.st-hud span{font-size:calc(15*var(--u));opacity:.8}
.st-hud.bump{animation:bump .25s}
.st-count{position:absolute;left:0;right:0;top:36%;text-align:center;font-weight:700;font-size:calc(80*var(--u));color:#fff;text-shadow:0 calc(5*var(--u)) 0 #e0336f,0 calc(10*var(--u)) calc(20*var(--u)) rgba(0,0,0,.4);pointer-events:none}
.st-count.pop{animation:popin .45s cubic-bezier(.2,1.6,.4,1)}

/* ===== Musique ===== */
.mu-wrap{position:absolute;inset:0;display:flex;flex-direction:column;padding:0 calc(10*var(--u)) calc(8*var(--u))}
.mu-tabs{display:flex;justify-content:center;gap:calc(8*var(--u));padding:calc(2*var(--u)) 0}
.mu-tab{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:0;padding:calc(4*var(--u)) calc(4*var(--u));border:0;border-radius:calc(22*var(--u));background:rgba(255,255,255,.18);font-weight:700;font-size:calc(12.5*var(--u));box-shadow:inset 0 0 0 calc(2*var(--u)) rgba(255,255,255,.35);transition:.2s}
.mu-tab img{width:calc(34*var(--u));height:calc(34*var(--u));object-fit:contain}
.mu-tab.on{background:linear-gradient(180deg,#ffe27a,#ffb12e);color:#6a3a00;box-shadow:0 calc(4*var(--u)) 0 #cf7a00,inset 0 0 0 calc(2*var(--u)) rgba(255,255,255,.7);transform:translateY(calc(-2*var(--u)))}
.mu-stage{position:relative;display:flex;justify-content:space-between;align-items:flex-end;height:calc(128*var(--u));margin-top:calc(2*var(--u))}
.mu-ch{position:relative}
.mu-songprog{position:absolute;left:50%;top:calc(8*var(--u));translate:-50% 0;display:none;gap:calc(4*var(--u));flex-wrap:wrap;justify-content:center;max-width:42%}
.mu-songprog.on{display:flex}
.mu-songprog i{width:calc(11*var(--u));height:calc(11*var(--u));border-radius:50%;background:rgba(255,255,255,.3);transition:.25s}
.mu-songprog i.on{background:#ffe34d;box-shadow:0 0 8px #ffd24a;transform:scale(1.2)}
.mu-area{position:relative;flex:1;min-height:0}
.mu-foot{position:absolute;right:calc(12*var(--u));bottom:calc(10*var(--u));z-index:5}
.mu-bars{position:absolute;left:0;right:0;top:0;bottom:calc(60*var(--u));display:flex;align-items:flex-end;justify-content:center;gap:calc(6*var(--u));touch-action:none}
.mu-wrap .mu-bars:last-child{bottom:calc(8*var(--u))}
.mu-bar{position:relative;border-radius:calc(16*var(--u));background:linear-gradient(90deg,rgba(255,255,255,.55) 0,rgba(255,255,255,0) 28%,rgba(0,0,0,.12) 100%),var(--c);box-shadow:0 calc(7*var(--u)) 0 rgba(0,0,0,.28),0 calc(12*var(--u)) calc(16*var(--u)) rgba(10,0,50,.35),inset 0 0 0 calc(3*var(--u)) rgba(255,255,255,.5);transform-origin:50% 100%;transition:filter .1s}
.mu-bar span{position:absolute;left:0;right:0;bottom:calc(14*var(--u));text-align:center;font-weight:700;font-size:calc(15*var(--u));color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.3);pointer-events:none}
.mu-bar .bolt{position:absolute;left:50%;width:calc(9*var(--u));height:calc(9*var(--u));translate:-50% 0;border-radius:50%;background:rgba(255,255,255,.85);box-shadow:inset 0 -2px 2px rgba(0,0,0,.25)}
.mu-bar .bolt.t{top:calc(12*var(--u))}.mu-bar .bolt.b{bottom:calc(46*var(--u))}
.mu-bar.hit{animation:barhit .35s}
@keyframes barhit{0%{transform:scale(1,1);filter:brightness(1)}20%{transform:scale(1.08,.94);filter:brightness(1.6) saturate(1.3)}100%{transform:scale(1,1);filter:brightness(1)}}
.mu-bar.next{animation:barnext .8s ease-in-out infinite;box-shadow:0 0 0 calc(4*var(--u)) #fff,0 0 30px 10px rgba(255,255,255,.85),0 calc(7*var(--u)) 0 rgba(0,0,0,.28)}
.mu-bar.next::before{content:'';position:absolute;left:50%;top:calc(-30*var(--u));translate:-50% 0;border:calc(13*var(--u)) solid transparent;border-top:calc(18*var(--u)) solid #fff;border-bottom:0;animation:arrowb .6s ease-in-out infinite alternate}
@keyframes barnext{0%,100%{filter:brightness(1.1)}50%{filter:brightness(1.5)}}
@keyframes arrowb{from{transform:translateY(0)}to{transform:translateY(calc(-10*var(--u)))}}
.mu-bar.wrong{animation:shake .3s}
.mu-instr{position:absolute;left:0;right:calc(70*var(--u));bottom:calc(6*var(--u));height:calc(52*var(--u));display:flex;gap:calc(8*var(--u));align-items:center;justify-content:center}
.mu-in{width:calc(50*var(--u));height:calc(50*var(--u));border:0;border-radius:calc(16*var(--u));background:rgba(255,255,255,.2);box-shadow:inset 0 0 0 calc(2*var(--u)) rgba(255,255,255,.4);display:grid;place-items:center;transition:.2s}
.mu-in img{width:80%;height:80%;object-fit:contain}
.mu-in.on{background:#fff;box-shadow:0 0 0 calc(3*var(--u)) #ffe34d,0 0 18px rgba(255,226,90,.8);transform:translateY(calc(-4*var(--u)))}
.mu-drums{position:absolute;inset:calc(6*var(--u)) 0 calc(70*var(--u)) 0;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:calc(10*var(--u));padding:0 calc(6*var(--u));justify-items:center;align-items:center}
body.land .mu-drums{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}
.mu-pad{border:0;background:none;width:100%;height:100%;display:grid;place-items:center;touch-action:none;transform-origin:50% 70%}
.mu-pad img{max-width:min(100%,calc(150*var(--u)));max-height:100%;object-fit:contain;filter:hue-rotate(var(--h)) drop-shadow(0 calc(8*var(--u)) calc(8*var(--u)) rgba(0,0,30,.35));pointer-events:none}
.mu-pad.hit{animation:padhit .3s}
@keyframes padhit{0%{transform:scale(1,1)}25%{transform:scale(1.12,.84)}60%{transform:scale(.96,1.06)}100%{transform:scale(1,1)}}
.mu-songs{position:absolute;inset:calc(8*var(--u)) 0;display:grid;grid-template-columns:repeat(2,1fr);gap:calc(12*var(--u));padding:0 calc(6*var(--u));align-content:start}
.mu-song{position:relative;border:0;border-radius:calc(26*var(--u));padding:calc(12*var(--u)) calc(8*var(--u));display:flex;flex-direction:column;align-items:center;gap:calc(2*var(--u));background:linear-gradient(170deg,rgba(255,255,255,.4),rgba(255,255,255,0) 50%),linear-gradient(135deg,#ff6ad5,#7c5cff);box-shadow:0 calc(7*var(--u)) 0 rgba(0,0,0,.25),inset 0 0 0 calc(3*var(--u)) rgba(255,255,255,.5);animation:misin .5s var(--d) backwards cubic-bezier(.2,1.6,.4,1)}
.mu-song:nth-child(2){background:linear-gradient(170deg,rgba(255,255,255,.4),rgba(255,255,255,0) 50%),linear-gradient(135deg,#ffb300,#ff6a3d)}
.mu-song:nth-child(3){background:linear-gradient(170deg,rgba(255,255,255,.4),rgba(255,255,255,0) 50%),linear-gradient(135deg,#2fd37f,#1ca6c9)}
.mu-song:nth-child(4){background:linear-gradient(170deg,rgba(255,255,255,.4),rgba(255,255,255,0) 50%),linear-gradient(135deg,#4f7bff,#9b5cff)}
.mu-song img{width:calc(76*var(--u));height:calc(76*var(--u));object-fit:contain;filter:drop-shadow(0 6px 6px rgba(0,0,0,.25));animation:iconjig 3s ease-in-out infinite}
.mu-song span{font-weight:700;font-size:calc(15*var(--u));line-height:1.15;text-align:center;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.mu-song em{font-style:normal;font-weight:500;font-size:calc(12*var(--u));opacity:.9}

/* ===== Dessin magique ===== */
.dr-wrap{position:absolute;inset:0;display:flex;flex-direction:column;padding:calc(4*var(--u)) calc(8*var(--u)) calc(8*var(--u));gap:calc(6*var(--u))}
.dr-paper{position:relative;flex:1;min-height:0;border-radius:calc(22*var(--u));background:#fff;overflow:hidden;box-shadow:0 0 0 calc(5*var(--u)) #fff,0 0 0 calc(8*var(--u)) rgba(120,70,255,.55),0 calc(10*var(--u)) calc(24*var(--u)) rgba(20,0,80,.35);transition:background .3s;touch-action:none;
  background-image:radial-gradient(rgba(120,100,200,.13) calc(1.4*var(--u)),transparent calc(1.6*var(--u)));background-size:calc(22*var(--u)) calc(22*var(--u))}
.dr-paper.dark{background-image:radial-gradient(rgba(255,255,255,.14) calc(1.4*var(--u)),transparent calc(1.6*var(--u)))}
.dr-cv{position:absolute;inset:0;touch-action:none;cursor:crosshair}
.dr-guides{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .4s}
.dr-guides.on{opacity:1}
.dr-guides line{stroke:rgba(255,80,190,.8);stroke-width:1.2;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.dr-hint{position:absolute;left:0;right:0;top:42%;text-align:center;font-weight:700;font-size:calc(30*var(--u));color:rgba(110,80,200,.35);pointer-events:none;transition:opacity .5s;transform:rotate(-4deg)}
.dr-paper.dark .dr-hint{color:rgba(255,255,255,.35)}
.dr-hint.gone{opacity:0}
.dr-dock{display:flex;flex-direction:column;gap:calc(6*var(--u));padding-bottom:env(safe-area-inset-bottom)}
.dr-colors{display:flex;justify-content:space-between;gap:calc(3*var(--u));padding:0 calc(2*var(--u))}
.dr-col{flex:1;max-width:calc(36*var(--u));aspect-ratio:1;border-radius:50%;border:calc(2.5*var(--u)) solid rgba(255,255,255,.9);box-shadow:0 calc(3*var(--u)) 0 rgba(0,0,40,.3);padding:0;transition:transform .15s}
.dr-col.on{transform:translateY(calc(-7*var(--u))) scale(1.18);border-color:#fff;box-shadow:0 0 0 calc(3*var(--u)) #ffe34d,0 calc(6*var(--u)) 0 rgba(0,0,40,.3)}
.dr-tools{display:flex;justify-content:center;flex-wrap:wrap;gap:calc(5*var(--u))}
.dr-tool{position:relative;width:calc(41*var(--u));height:calc(41*var(--u));border:0;border-radius:calc(14*var(--u));background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 calc(2*var(--u)) rgba(255,255,255,.42);display:grid;place-items:center;padding:calc(4*var(--u));color:#fff;transition:.15s}
.dr-tool img,.dr-tool svg{width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
.dr-tool.on{background:#fff;box-shadow:0 0 0 calc(3*var(--u)) #ffe34d,0 0 14px rgba(255,226,90,.75);transform:translateY(calc(-4*var(--u)))}
.dr-tool.sz i{display:block;border-radius:50%;background:#fff;box-shadow:0 2px 2px rgba(0,0,0,.3)}
.dr-tool.sz.on i,.dr-tool.mir.on svg{background:#7a5cff}
.dr-tool.mir svg{width:80%;height:80%;fill:#fff}
.dr-tool.mir.on{background:#ff5fb0}
.dr-tool.mir em{position:absolute;right:calc(-3*var(--u));top:calc(-5*var(--u));min-width:calc(18*var(--u));height:calc(18*var(--u));border-radius:calc(9*var(--u));background:#ffd21f;color:#6a3a00;font-style:normal;font-weight:700;font-size:calc(12*var(--u));display:grid;place-items:center}
.dr-tool.pap i{display:block;width:calc(26*var(--u));height:calc(26*var(--u));border-radius:calc(7*var(--u));box-shadow:0 0 0 calc(2.5*var(--u)) #fff,0 2px 4px rgba(0,0,0,.35)}
.dr-tool.act svg{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.dr-tool.save{background:linear-gradient(180deg,#5de0ff,#1c9bd8)}
.dr-tool.ok{background:linear-gradient(180deg,#7ee87a,#1fb85a)}
.dr-stamps{display:none;gap:calc(6*var(--u));overflow-x:auto;padding:calc(4*var(--u)) calc(2*var(--u)) calc(6*var(--u));scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x}
.dr-stamps::-webkit-scrollbar{display:none}
.dr-stamps.on{display:flex}
.dr-st{flex:0 0 auto;width:calc(48*var(--u));height:calc(48*var(--u));border:0;border-radius:calc(14*var(--u));background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 calc(2*var(--u)) rgba(255,255,255,.4);padding:calc(4*var(--u));display:grid;place-items:center}
.dr-st img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.dr-st.on{background:#fff;box-shadow:0 0 0 calc(3*var(--u)) #ffe34d}
body.land .dr-wrap{flex-direction:row;align-items:stretch}
body.land .dr-dock{width:calc(300*var(--u));flex:0 0 auto;justify-content:center;overflow:hidden}
body.land .dr-colors{flex-wrap:wrap;justify-content:center;gap:calc(6*var(--u))}
body.land .dr-col{flex:0 0 calc(34*var(--u))}
body.land .dr-stamps{flex-wrap:wrap;overflow:visible;justify-content:center}

/* ===== Coloriage ===== */
.co-wrap{position:absolute;inset:0;display:flex;flex-direction:column;padding:calc(4*var(--u)) calc(10*var(--u)) calc(8*var(--u));gap:calc(6*var(--u))}
.co-title{text-align:center;font-weight:700;font-size:calc(26*var(--u));text-shadow:0 calc(3*var(--u)) 0 rgba(60,20,120,.45);padding:calc(2*var(--u)) 0}
.co-grid{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:calc(12*var(--u));padding:calc(4*var(--u)) calc(4*var(--u)) calc(16*var(--u));align-content:start;touch-action:pan-y;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.co-grid::-webkit-scrollbar{display:none}
body.land .co-grid{grid-template-columns:repeat(4,1fr)}
.co-card{border:0;border-radius:calc(24*var(--u));padding:calc(8*var(--u)) calc(8*var(--u)) calc(6*var(--u));display:flex;flex-direction:column;gap:calc(4*var(--u));align-items:center;background:linear-gradient(170deg,rgba(255,255,255,.45),rgba(255,255,255,0) 45%),linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 calc(6*var(--u)) 0 rgba(40,10,100,.4),inset 0 0 0 calc(2.5*var(--u)) rgba(255,255,255,.55);color:#fff;font-weight:700;font-size:calc(17*var(--u));text-shadow:0 2px 0 rgba(0,0,0,.28);animation:misin .5s var(--d) backwards;transition:transform .15s}
.co-card:active{transform:scale(.95)}
.co-thumb{width:100%;aspect-ratio:1;background:#fff;border-radius:calc(16*var(--u));overflow:hidden;box-shadow:inset 0 0 0 calc(2*var(--u)) rgba(60,30,140,.18)}
.co-thumb svg{width:100%;height:100%;display:block}
.co-wrap.play{justify-content:center}
.co-paper{position:relative;flex:1 1 0;min-height:0;max-height:calc(372*var(--u));border-radius:calc(22*var(--u));background:#fff;box-shadow:0 0 0 calc(5*var(--u)) #fff,0 0 0 calc(8*var(--u)) rgba(255,120,60,.6),0 calc(10*var(--u)) calc(24*var(--u)) rgba(20,0,80,.3);overflow:hidden;display:grid;place-items:center;padding:calc(8*var(--u));
  background-image:radial-gradient(rgba(120,100,200,.12) calc(1.4*var(--u)),transparent calc(1.6*var(--u)));background-size:calc(22*var(--u)) calc(22*var(--u))}
.co-art{width:100%;height:100%;touch-action:none;display:block}
.co-art.in{animation:popin .45s cubic-bezier(.3,1.5,.5,1) backwards}
.co-art .r,.th .r{stroke:#3b2a7a;stroke-width:4.5;stroke-linejoin:round;cursor:pointer;transition:fill .12s}
.co-art .d,.th .d{pointer-events:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:4}
.co-art .d:not([fill]),.th .d:not([fill]){fill:none}
.co-art .d:not([stroke]),.th .d:not([stroke]){stroke:#3b2a7a}
.co-art .r.pop{animation:copop .45s}
@keyframes copop{0%{filter:brightness(1.7) saturate(1.4)}100%{filter:brightness(1) saturate(1)}}
.co-dock{display:flex;flex-direction:column;gap:calc(8*var(--u));padding-bottom:env(safe-area-inset-bottom)}
.co-colors{display:grid;grid-template-columns:repeat(6,1fr);justify-items:center;gap:calc(9*var(--u)) calc(6*var(--u));padding:calc(6*var(--u)) calc(8*var(--u)) 0}
.co-col{width:calc(46*var(--u));aspect-ratio:1;border-radius:50%;border:calc(2.5*var(--u)) solid rgba(255,255,255,.92);box-shadow:0 calc(3*var(--u)) 0 rgba(0,0,40,.3);padding:0;display:grid;place-items:center;overflow:hidden;transition:transform .15s}
.co-col svg{width:84%;height:84%}
.co-col.rb,.co-col.er{background:#fff}
.co-col.on{transform:scale(1.2);box-shadow:0 0 0 calc(3*var(--u)) #ffe34d,0 calc(6*var(--u)) 0 rgba(0,0,40,.3)}
.co-tools{display:flex;justify-content:center;gap:calc(10*var(--u))}
.co-btn{width:calc(54*var(--u));height:calc(54*var(--u));border:0;border-radius:calc(18*var(--u));background:rgba(255,255,255,.24);box-shadow:inset 0 0 0 calc(2*var(--u)) rgba(255,255,255,.45);display:grid;place-items:center;padding:calc(10*var(--u));color:#fff}
.co-btn svg{width:100%;height:100%;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.co-btn.ok{width:calc(96*var(--u));background:linear-gradient(180deg,#7ee87a,#1fb85a);box-shadow:0 calc(5*var(--u)) 0 #0f7a3a,inset 0 0 0 calc(2*var(--u)) rgba(255,255,255,.5)}
.co-btn.ok.pulse{animation:cobtn .8s ease-in-out infinite}
@keyframes cobtn{0%,100%{transform:scale(1)}50%{transform:scale(1.14);box-shadow:0 0 0 calc(4*var(--u)) #fff,0 0 24px rgba(255,255,255,.9),0 calc(5*var(--u)) 0 #0f7a3a}}
body.land .co-wrap.play{flex-direction:row}
body.land .co-dock{width:calc(300*var(--u));flex:0 0 auto;justify-content:center}
body.land .co-wrap.play{justify-content:flex-start}
body.land .co-paper{max-height:none}
body.land .co-colors{grid-template-columns:repeat(4,1fr)}

/* ===== Histoires ===== */
.sy-wrap{position:absolute;inset:0}
.sy-title{text-align:center;font-weight:700;font-size:calc(26*var(--u));text-shadow:0 calc(3*var(--u)) 0 rgba(60,20,120,.5);padding:calc(8*var(--u)) 0 calc(4*var(--u))}
.sy-list{display:flex;flex-direction:column;gap:calc(14*var(--u));padding:calc(10*var(--u)) calc(14*var(--u));overflow-y:auto;max-height:calc(100% - 60*var(--u));touch-action:pan-y}
body.land .sy-list{flex-direction:row;align-items:stretch}
.sy-card{flex:1;position:relative;border:0;border-radius:calc(28*var(--u));padding:calc(12*var(--u)) calc(14*var(--u));display:flex;align-items:center;gap:calc(14*var(--u));text-align:left;color:#fff;background:linear-gradient(170deg,rgba(255,255,255,.45),rgba(255,255,255,0) 45%),linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 calc(7*var(--u)) 0 rgba(40,10,100,.4),inset 0 0 0 calc(2.5*var(--u)) rgba(255,255,255,.55);animation:misin .5s var(--d) backwards;min-height:calc(112*var(--u))}
body.land .sy-card{flex-direction:column;text-align:center;justify-content:center}
.sy-card img{width:calc(88*var(--u));height:calc(88*var(--u));object-fit:contain;filter:drop-shadow(0 6px 6px rgba(0,0,0,.28));animation:iconjig 3s ease-in-out infinite}
.sy-card div{flex:1;display:flex;flex-direction:column;gap:calc(2*var(--u))}
.sy-card strong{font-size:calc(21*var(--u));line-height:1.12;text-shadow:0 2px 0 rgba(0,0,0,.28);text-wrap:balance}
.sy-card em{font-style:normal;font-weight:500;font-size:calc(14*var(--u));opacity:.92}
.sy-card span{width:calc(40*var(--u));height:calc(40*var(--u));border-radius:50%;background:rgba(255,255,255,.9);color:#d0457a;display:grid;place-items:center;padding:calc(9*var(--u))}
.sy-card span svg{width:100%;height:100%;fill:currentColor}
body.land .sy-card span{display:none}
.sy-scene{position:absolute;left:0;right:0;top:0;bottom:calc(132*var(--u));overflow:hidden}
.sy-scene.out{opacity:0;transition:opacity .35s}
.sy-scene.in{animation:fadein .5s}
.sy-wrap.dim .sy-scene{filter:brightness(.5) saturate(.8);transition:filter 1.8s}
.sy-ch{position:absolute;translate:-50% 0;z-index:3;isolation:isolate}
.sy-it{position:absolute;translate:-50% 0;isolation:isolate;touch-action:manipulation}
.sy-it>img{width:100%;display:block;pointer-events:none;filter:drop-shadow(0 calc(6*var(--u)) calc(6*var(--u)) rgba(0,0,40,.3))}
.sy-it.pop{animation:popin .5s backwards}
.sy-it.bob>img{animation:syBob 3s ease-in-out var(--d) infinite}
.sy-it.sway>img{transform-origin:50% 100%;animation:sySway 3.2s ease-in-out var(--d) infinite}
@keyframes syBob{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(-9*var(--u)))}}
@keyframes sySway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.syglow{cursor:pointer}
.syglow::before{content:'';position:absolute;inset:-14%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.8),rgba(255,255,255,0) 66%);animation:syGlow 1.1s ease-in-out infinite;z-index:-1;pointer-events:none}
@keyframes syGlow{0%,100%{opacity:.45;transform:scale(.92)}50%{opacity:1;transform:scale(1.08)}}
.sy-it.hopit{animation:syHop .5s}
@keyframes syHop{0%{transform:translateY(0) scale(1,1)}30%{transform:translateY(calc(-26*var(--u))) scale(.94,1.08)}60%{transform:translateY(0) scale(1.1,.9)}100%{transform:translateY(0) scale(1,1)}}
.sy-it.launch{animation:syLaunch 1.6s cubic-bezier(.5,0,1,.55) forwards}
@keyframes syLaunch{0%{transform:translateY(0) scale(1)}15%{transform:translateY(calc(8*var(--u))) scale(1.04,.96)}100%{transform:translateY(-130vh) scale(.7)}}
.sy-it.caught>img{animation:none;filter:drop-shadow(0 0 14px #fff) brightness(1.2)}
.sy-badge{position:absolute;left:50%;top:-6%;translate:-50% 0;min-width:calc(30*var(--u));height:calc(30*var(--u));padding:0 calc(6*var(--u));border-radius:calc(15*var(--u));background:#ff5d8f;color:#fff;font-weight:700;font-size:calc(19*var(--u));display:grid;place-items:center;box-shadow:0 calc(3*var(--u)) 0 rgba(0,0,0,.25);animation:popin .3s backwards;z-index:3}
.sy-big{position:absolute;left:50%;top:14%;translate:-50% 0;width:calc(132*var(--u));height:calc(132*var(--u));border-radius:50%;border:0;background:radial-gradient(circle at 35% 30%,#fff6b0,#ffb300 60%,#ff6a3d);color:#fff;font-weight:700;font-size:calc(84*var(--u));line-height:1;text-shadow:0 calc(4*var(--u)) 0 rgba(150,60,0,.5);box-shadow:0 calc(8*var(--u)) 0 #c25a10,inset 0 0 0 calc(4*var(--u)) rgba(255,255,255,.6);z-index:6;animation:syBig 1s ease-in-out infinite}
@keyframes syBig{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.sy-big.pop{animation:syBigPop .35s}
@keyframes syBigPop{0%{transform:scale(1.4)}100%{transform:scale(1)}}
.sy-text{position:absolute;left:calc(10*var(--u));right:calc(10*var(--u));bottom:calc(10*var(--u));min-height:calc(112*var(--u));border-radius:calc(28*var(--u));background:rgba(255,255,255,.95);box-shadow:0 calc(6*var(--u)) 0 rgba(60,30,140,.35),inset 0 0 0 calc(3*var(--u)) #ffd9f0;display:flex;align-items:center;padding:calc(10*var(--u)) calc(66*var(--u)) calc(10*var(--u)) calc(20*var(--u));z-index:5}
.sy-text p{margin:0;color:#3b2a7a;font-weight:700;font-size:calc(19*var(--u));line-height:1.3;text-wrap:pretty}
.sy-text p.in{animation:fadein .5s}
.sy-read{position:absolute;right:calc(10*var(--u));top:50%;translate:0 -50%;width:calc(48*var(--u));height:calc(48*var(--u));border:0;border-radius:50%;background:linear-gradient(180deg,#8f7bff,#5a3df0);box-shadow:0 calc(4*var(--u)) 0 #3a22b0;padding:calc(11*var(--u));display:grid;place-items:center}
.sy-read svg{width:100%;height:100%;fill:#fff}
.sy-next{display:none;position:absolute;right:calc(18*var(--u));bottom:calc(128*var(--u));z-index:8}
.sy-next.on{display:grid;animation:syNext .9s ease-in-out infinite}
@keyframes syNext{0%,100%{transform:translateX(0) scale(1)}50%{transform:translateX(calc(8*var(--u))) scale(1.1)}}
.sy-choices{position:absolute;left:0;right:0;bottom:calc(138*var(--u));display:flex;justify-content:center;gap:calc(12*var(--u));z-index:7;pointer-events:none}
.sy-opt{pointer-events:auto;width:calc(104*var(--u));border:0;border-radius:calc(22*var(--u));padding:calc(8*var(--u)) calc(4*var(--u)) calc(6*var(--u));display:flex;flex-direction:column;align-items:center;background:rgba(255,255,255,.95);box-shadow:0 calc(5*var(--u)) 0 rgba(60,30,140,.4);animation:misin .45s var(--d) backwards;color:#3b2a7a;font-weight:700;font-size:calc(14*var(--u))}
.sy-opt img{width:calc(70*var(--u));height:calc(70*var(--u));object-fit:contain}
.sy-opt.right{background:#b8ffcf;box-shadow:0 0 0 calc(4*var(--u)) #3fd16a;animation:bump .5s}
.sy-opt.dim{opacity:.45}
.sy-opt.shake{animation:shake .4s}
.sy-inv{position:absolute;right:calc(10*var(--u));top:calc(8*var(--u));display:flex;gap:calc(6*var(--u));z-index:6}
.sy-slot{width:calc(50*var(--u));height:calc(50*var(--u));border-radius:calc(16*var(--u));background:rgba(255,255,255,.3);box-shadow:inset 0 0 0 calc(2.5*var(--u)) rgba(255,255,255,.65);display:grid;place-items:center;padding:calc(5*var(--u))}
.sy-slot img{width:100%;height:100%;object-fit:contain;animation:popin .4s backwards}
.sy-fly{position:fixed;z-index:60;pointer-events:none;object-fit:contain}
.sy-candles{position:absolute;left:0;right:0;bottom:58%;height:0;pointer-events:none}
.sy-candle{position:absolute;left:calc(50% + var(--x));bottom:0;translate:-50% 0;width:calc(9*var(--u));height:calc(30*var(--u));border-radius:calc(3*var(--u));background:repeating-linear-gradient(135deg,#fff 0 5px,var(--h) 5px 10px);box-shadow:0 1px 3px rgba(0,0,0,.3);animation:popin .4s backwards;pointer-events:auto}
.sy-candle::after{content:'';position:absolute;inset:calc(-16*var(--u)) calc(-8*var(--u)) calc(-4*var(--u))}
.sy-candle b{position:absolute;left:50%;top:calc(-15*var(--u));translate:-50% 0;width:calc(11*var(--u));height:calc(16*var(--u));border-radius:50% 50% 50% 50%/65% 65% 35% 35%;background:radial-gradient(circle at 50% 70%,#fff6b0,#ffb300 55%,#ff5d1f);box-shadow:0 0 12px 4px rgba(255,190,60,.7);opacity:0;transition:opacity .2s}
.sy-candle.lit b{opacity:1;animation:syFlame .35s ease-in-out infinite alternate}
@keyframes syFlame{from{transform:scale(1,1) rotate(-4deg)}to{transform:scale(.9,1.12) rotate(4deg)}}
.sy-candle.tapme{animation:syTapme .7s ease-in-out infinite}
@keyframes syTapme{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(-5*var(--u)))}}
body.land .sy-text{left:15%;right:15%}
.dr-wrap,.co-wrap.play{padding:calc(10*var(--u)) calc(16*var(--u)) calc(14*var(--u))}
body.land .dr-wrap,body.land .co-wrap.play{padding:calc(14*var(--u)) calc(22*var(--u)) calc(20*var(--u));gap:calc(18*var(--u))}