/* Layout: one 16:9 stage centred on a dark ground. Canvas draws the world, HTML panels sit on top for menus. */
:root{
  --ink:#140b1a;       /* page ground */
  --plum:#2b1238;      /* panel fill */
  --rose:#ff4f8b;      /* primary action, hearts */
  --gold:#ffd166;      /* titles, crown, trim */
  --cream:#fff3e0;     /* body text */
  --sky:#6b5bd2;       /* secondary */
  --f-display:'Lilita One','Arial Black',Impact,sans-serif;
  --f-body:'Fredoka','Trebuchet MS',system-ui,sans-serif;
  color-scheme:dark;
}
html,body{height:100%;margin:0}
body{background:var(--ink);color:var(--cream);font-family:var(--f-body);overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;overscroll-behavior:none}
#wrap{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center}
#stage{--u:min(1vw,1.7778vh);position:relative;width:min(100vw,177.78vh);height:min(56.25vw,100vh);background:#000;overflow:hidden}
canvas{position:absolute;top:0;left:0;width:100%;height:100%;display:block}
.panel{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(1.4*var(--u));text-align:center;padding:calc(2*var(--u)) calc(4*var(--u));box-sizing:border-box;background:radial-gradient(ellipse at 50% 40%,rgba(80,20,70,.82),rgba(20,8,28,.94))}
.panel[hidden]{display:none!important}
.panel:not([hidden]){animation:pin .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes pin{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.btn{transition:filter .15s,transform .12s,box-shadow .12s}
.panel.reveal{padding:0;background:radial-gradient(ellipse at 50% 45%,#2a1450,#0b0618 70%);justify-content:flex-end;overflow:hidden}
.reveal img{position:absolute;left:50%;top:50%;height:100%;width:auto;display:block;object-fit:contain;border-radius:calc(1.2*var(--u));transform-origin:50% 50%;transition:transform .9s cubic-bezier(.3,.8,.2,1),opacity .6s;will-change:transform,opacity;backface-visibility:hidden}
.step0 #rLeo{transform:translate(-50%,-50%) scale(1)}
.step0 #rNinu{transform:translate(-50%,-50%) scale(.5);opacity:0}
.step1 #rLeo{transform:translate(calc(-50% - 23*var(--u)),calc(-50% + .2*var(--u))) scale(.58)}
.step1 #rNinu{transform:translate(calc(-50% + 23*var(--u)),calc(-50% + .2*var(--u))) scale(.58);opacity:1}
.rheart{position:absolute;left:50%;top:53%;transform:translate(-50%,-50%) scale(0);font-size:calc(9*var(--u));color:var(--rose);text-shadow:0 0 calc(2*var(--u)) rgba(255,79,139,.8);transition:transform .7s .5s cubic-bezier(.3,1.6,.4,1);will-change:transform}
.step1 .rheart{transform:translate(-50%,-50%) scale(1);animation:hb 1.1s 1.3s ease-in-out infinite}
@keyframes hb{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.22)}}
.rsparks{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s .6s}
.step1 .rsparks{opacity:1}
.rsparks i,.stars-bg i{position:absolute;bottom:-6%;font-style:normal;color:var(--rose);font-size:calc(3*var(--u));animation:rise 5s linear infinite;opacity:0;will-change:transform,opacity}
.rsparks i:nth-child(1){left:8%;animation-delay:0s}.rsparks i:nth-child(2){left:20%;animation-delay:1.3s;font-size:calc(2*var(--u))}.rsparks i:nth-child(3){left:34%;animation-delay:2.4s}.rsparks i:nth-child(4){left:46%;animation-delay:.7s;font-size:calc(2*var(--u))}.rsparks i:nth-child(5){left:58%;animation-delay:3.1s}.rsparks i:nth-child(6){left:70%;animation-delay:1.9s;font-size:calc(2.4*var(--u))}.rsparks i:nth-child(7){left:82%;animation-delay:.3s}.rsparks i:nth-child(8){left:92%;animation-delay:2.8s;font-size:calc(2*var(--u))}
@keyframes rise{0%{transform:translateY(0) scale(.8);opacity:0}15%{opacity:.9}100%{transform:translateY(calc(-70*var(--u))) scale(1.2);opacity:0}}
.rflash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.rflash.go{animation:flash 1.1s ease-out}
@keyframes flash{0%{opacity:.95}100%{opacity:0}}
.reveal h2{position:absolute;top:calc(1.2*var(--u));left:0;right:0;font-size:calc(3.6*var(--u));text-shadow:0 calc(.3*var(--u)) 0 #b3265c,0 0 calc(2*var(--u)) rgba(0,0,0,.8);animation:pin 1s .5s both;z-index:1}
.reveal .btn{position:absolute;right:calc(3*var(--u));bottom:calc(2.4*var(--u));z-index:1}

/* ---------- opening screen ---------- */
.panel.open{--fg:'Cinzel','Trajan Pro',Georgia,serif;overflow:hidden;gap:calc(1.5*var(--u));background:radial-gradient(circle at 50% 18%,rgba(120,80,190,.55),rgba(0,0,0,0) 38%),radial-gradient(ellipse at 50% 100%,#3a0d2a,#0b0618 62%,#050210)}
.panel.open>*:not(.stars-bg){position:relative;z-index:1}
.stars-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.stars-bg i{font-size:calc(2.2*var(--u));color:#ff4f8b;text-shadow:0 0 calc(1.2*var(--u)) rgba(255,79,139,.7)}
.stars-bg i:nth-child(odd){color:#ffd166;text-shadow:0 0 calc(1.2*var(--u)) rgba(255,209,102,.7)}
.stars-bg i:nth-child(1){left:6%;animation-delay:0s}.stars-bg i:nth-child(2){left:15%;animation-delay:2.1s;font-size:calc(1.5*var(--u))}.stars-bg i:nth-child(3){left:27%;animation-delay:.9s}.stars-bg i:nth-child(4){left:38%;animation-delay:3.4s;font-size:calc(1.5*var(--u))}.stars-bg i:nth-child(5){left:49%;animation-delay:1.6s}.stars-bg i:nth-child(6){left:61%;animation-delay:2.8s;font-size:calc(1.5*var(--u))}.stars-bg i:nth-child(7){left:72%;animation-delay:.4s}.stars-bg i:nth-child(8){left:82%;animation-delay:3.9s;font-size:calc(1.5*var(--u))}.stars-bg i:nth-child(9){left:90%;animation-delay:1.2s}.stars-bg i:nth-child(10){left:96%;animation-delay:2.5s;font-size:calc(1.5*var(--u))}
.ask{font-family:var(--fg);font-weight:700;font-size:calc(4.3*var(--u));line-height:1.12;letter-spacing:.05em;color:var(--gold);text-shadow:0 calc(.35*var(--u)) 0 #7a1d33,0 0 calc(2.4*var(--u)) rgba(255,120,60,.45);animation:askpulse 3.2s 1.4s ease-in-out infinite;will-change:transform}
.ask span{display:block;animation:wordin .8s cubic-bezier(.2,.9,.2,1) both}
.ask span:nth-child(1){animation-delay:.15s}.ask span:nth-child(2){animation-delay:.55s}
@keyframes wordin{from{opacity:0;transform:translateY(calc(2*var(--u))) scale(.94)}to{opacity:1;transform:none}}
@keyframes askpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.duo{position:relative;display:flex;align-items:center;justify-content:center;gap:calc(7*var(--u))}
.card{margin:0;height:calc(24*var(--u));aspect-ratio:900/692;border-radius:calc(1.2*var(--u));overflow:hidden;will-change:transform,opacity;backface-visibility:hidden}
.card img{width:100%;height:100%;object-fit:cover;display:block}
.cl{box-shadow:0 0 calc(3*var(--u)) rgba(90,130,255,.6);animation:inL .9s .25s cubic-bezier(.2,.9,.2,1) both,flt 4.6s 1.3s ease-in-out infinite alternate}
.cr{box-shadow:0 0 calc(3*var(--u)) rgba(255,110,170,.6);animation:inR .9s .4s cubic-bezier(.2,.9,.2,1) both,flt 4.6s 1.6s ease-in-out infinite alternate}
@keyframes inL{from{opacity:0;transform:translateX(calc(-30*var(--u))) rotate(-5deg)}to{opacity:1;transform:none}}
@keyframes inR{from{opacity:0;transform:translateX(calc(30*var(--u))) rotate(5deg)}to{opacity:1;transform:none}}
@keyframes flt{from{transform:translateY(calc(-.5*var(--u)))}to{transform:translateY(calc(.6*var(--u)))}}
.oheart{position:absolute;left:50%;top:50%;font-size:calc(8*var(--u));line-height:1;color:var(--rose);text-shadow:0 0 calc(2.4*var(--u)) rgba(255,79,139,.9);transform:translate(-50%,-50%) scale(0);animation:hpop .7s .95s cubic-bezier(.3,1.6,.4,1) both,hb 1s 1.7s ease-in-out infinite;will-change:transform;z-index:2}
@keyframes hpop{from{transform:translate(-50%,-50%) scale(0)}to{transform:translate(-50%,-50%) scale(1)}}
.orow{display:flex;gap:calc(1.6*var(--u));align-items:center;justify-content:center;animation:wordin .8s 1.1s cubic-bezier(.2,.9,.2,1) both}
.btn.go{position:relative;font-size:max(17px,calc(3.4*var(--u)));padding:calc(1*var(--u)) calc(5*var(--u));background:linear-gradient(#ff6b9d,#e03a76);box-shadow:0 calc(.6*var(--u)) 0 #8f1646,0 0 calc(2.4*var(--u)) rgba(255,79,139,.55);letter-spacing:.1em}
.btn.go::after{content:'';position:absolute;inset:calc(-.5*var(--u));border:calc(.3*var(--u)) solid var(--gold);border-radius:calc(1.6*var(--u));opacity:0;animation:ring 1.7s 1.9s ease-out infinite;pointer-events:none;will-change:transform,opacity}
@keyframes ring{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(1.22,1.45)}}

/* ---------- finale ---------- */
.panel.fin{padding:0;display:block;background:#000;overflow:hidden}
.fin .kb{position:absolute;inset:0;overflow:hidden}
.fin .kb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform-origin:50% 55%;animation:kbz 26s ease-out both;will-change:transform}
@keyframes kbz{from{transform:scale(1.08)}to{transform:scale(1)}}
.petals{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.petals i{position:absolute;top:-4%;width:calc(1.3*var(--u));height:calc(1.8*var(--u));background:radial-gradient(circle at 30% 30%,#ff5a6e,#8a0f2a);border-radius:70% 0 70% 0;opacity:0;animation:fall 9s linear infinite;will-change:transform,opacity}
.petals i:nth-child(1){left:8%;animation-delay:0s}.petals i:nth-child(2){left:20%;animation-delay:2.2s;animation-duration:11s}.petals i:nth-child(3){left:33%;animation-delay:4.6s}.petals i:nth-child(4){left:47%;animation-delay:1.1s;animation-duration:10s}.petals i:nth-child(5){left:60%;animation-delay:6s}.petals i:nth-child(6){left:72%;animation-delay:3.2s;animation-duration:12s}.petals i:nth-child(7){left:85%;animation-delay:5.2s}.petals i:nth-child(8){left:94%;animation-delay:.6s;animation-duration:10s}
@keyframes fall{0%{opacity:0;transform:translate(0,0) rotate(0)}10%{opacity:.9}90%{opacity:.8}100%{opacity:0;transform:translate(calc(-9*var(--u)),calc(62*var(--u))) rotate(540deg)}}
.fband{position:absolute;left:50%;top:79.4%;width:58%;height:10%;margin-left:-29%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(.25*var(--u));background:linear-gradient(#3b0a1c,#240612);border:1px solid rgba(255,209,102,.75);border-radius:calc(.8*var(--u));box-shadow:0 0 calc(2*var(--u)) rgba(0,0,0,.7),inset 0 0 calc(1*var(--u)) rgba(255,209,102,.18);font-family:'Cinzel',Georgia,serif;font-weight:700;text-align:center;animation:fbin 1.1s .4s cubic-bezier(.2,.9,.2,1) both}
.fl1{font-size:max(9px,calc(1.7*var(--u)));letter-spacing:.07em;color:#ffe3a3}
.fl2{font-size:max(11px,calc(2.3*var(--u)));letter-spacing:.2em;color:#fff;text-shadow:0 0 calc(1.2*var(--u)) rgba(255,120,150,.9);animation:askpulse 2.6s 1.6s ease-in-out infinite}
@keyframes fbin{from{opacity:0;transform:translateY(calc(2*var(--u)))}to{opacity:1;transform:none}}
.fact{position:absolute;left:50%;top:90.4%;width:68%;height:6.8%;margin-left:-34%;display:flex;align-items:center;justify-content:center;gap:calc(1.2*var(--u));background:linear-gradient(#240612,#14030b);border-radius:calc(.8*var(--u));animation:fbin 1.1s .9s cubic-bezier(.2,.9,.2,1) both}
.fstat{font-family:'Cinzel',Georgia,serif;font-weight:700;font-size:max(9px,calc(1.3*var(--u)));letter-spacing:.06em;color:var(--gold);white-space:nowrap}
.fbtn{font-family:'Cinzel',Georgia,serif;font-weight:700;font-size:max(9px,calc(1.3*var(--u)));letter-spacing:.08em;color:#fff3e0;background:rgba(255,79,139,.22);border:1px solid rgba(255,209,102,.8);border-radius:calc(.6*var(--u));padding:calc(.4*var(--u)) calc(1.1*var(--u));min-height:28px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;white-space:nowrap;transition:background .15s}
.fbtn:hover{background:rgba(255,79,139,.5)}
.fbtn:focus-visible{outline:calc(.3*var(--u)) solid var(--gold)}
.panel.light{background:rgba(20,8,28,.55)}
h1,h2{font-family:var(--f-display);font-weight:400;margin:0;letter-spacing:.04em;text-wrap:balance}
h1{font-size:calc(9*var(--u));line-height:.95;color:var(--gold);text-shadow:0 calc(.5*var(--u)) 0 #b3265c,0 calc(1*var(--u)) calc(2*var(--u)) rgba(0,0,0,.5)}
h2{font-size:calc(6.4*var(--u));line-height:1;color:var(--gold);text-shadow:0 calc(.4*var(--u)) 0 #b3265c}
p{margin:0;font-size:max(13px,calc(2.1*var(--u)));line-height:1.35;max-width:calc(52*var(--u));text-wrap:balance}
.sub{font-size:calc(2.4*var(--u));color:#ffc2d9}
.faces{display:flex;align-items:center;justify-content:center;gap:calc(3*var(--u))}
.who{display:flex;flex-direction:column;align-items:center;gap:calc(.5*var(--u));font-family:var(--f-display);font-size:max(11px,calc(1.7*var(--u)));letter-spacing:.1em;color:var(--gold)}
.who img{width:calc(13*var(--u));height:calc(13*var(--u));border-radius:50%;border:calc(.5*var(--u)) solid #fff;box-shadow:0 calc(.8*var(--u)) calc(2*var(--u)) rgba(0,0,0,.5);display:block}
.who.crown img{border-color:var(--gold)}
.link{font-size:calc(5*var(--u));color:var(--rose);animation:beat 1.1s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.btn{font-family:var(--f-display);min-height:42px;min-width:120px;font-size:max(15px,calc(2.8*var(--u)));letter-spacing:.06em;color:#fff;background:var(--rose);border:0;border-radius:calc(1.2*var(--u));padding:calc(1*var(--u)) calc(3.6*var(--u));cursor:pointer;box-shadow:0 calc(.6*var(--u)) 0 #a31c52;text-decoration:none;display:inline-block}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(calc(.4*var(--u)));box-shadow:0 calc(.2*var(--u)) 0 #a31c52}
.btn:focus-visible{outline:calc(.4*var(--u)) solid var(--gold);outline-offset:calc(.4*var(--u))}
.btn.alt{background:var(--sky);box-shadow:0 calc(.6*var(--u)) 0 #3d3290}
.row{display:flex;gap:calc(1.6*var(--u));align-items:center;justify-content:center;flex-wrap:wrap}
.keys{font-size:max(11px,calc(1.5*var(--u)));color:#e9c9dc;opacity:.9}
.stats{display:flex;gap:calc(3*var(--u));font-family:var(--f-display);font-size:calc(2.6*var(--u));color:var(--cream)}
.stats b{color:var(--rose);font-weight:400}
.stats{flex-wrap:wrap;justify-content:center;gap:calc(.6*var(--u)) calc(3*var(--u))}
.stars{font-size:calc(6*var(--u));line-height:1;letter-spacing:.12em;color:#4a2a45}
.stars .on{color:var(--gold);text-shadow:0 calc(.3*var(--u)) 0 #b3265c}
.best{font-size:max(12px,calc(1.9*var(--u)));color:#ffc2d9}
#touch{position:absolute;left:0;right:0;bottom:0;display:none;justify-content:space-between;align-items:flex-end;padding:0 calc(2.5*var(--u)) calc(2.5*var(--u));padding-left:max(calc(2.5*var(--u)),env(safe-area-inset-left,0px));padding-right:max(calc(2.5*var(--u)),env(safe-area-inset-right,0px));pointer-events:none}
#touch .grp{display:flex;gap:calc(2*var(--u))}
#touch button{pointer-events:auto;width:calc(11*var(--u));height:calc(11*var(--u));border-radius:50%;border:calc(.4*var(--u)) solid rgba(255,255,255,.55);background:rgba(20,8,28,.45);color:#fff;font-size:calc(4.4*var(--u));font-family:var(--f-body);touch-action:none}
#touch button.on{background:rgba(255,79,139,.7)}
#touch #bJ{width:calc(13*var(--u));height:calc(13*var(--u));background:rgba(255,79,139,.4)}
@media (pointer:coarse){#touch{display:flex}.keys.mouse{display:none}.keys.tch{display:block}#tools button{width:calc(6*var(--u));height:calc(6*var(--u));font-size:calc(2.6*var(--u))}}
.keys.tch{display:none}
#tools{position:absolute;top:calc(1.2*var(--u));right:calc(1.4*var(--u));display:flex;gap:calc(.8*var(--u))}
#tools button{width:calc(4.2*var(--u));height:calc(4.2*var(--u));border-radius:50%;border:calc(.2*var(--u)) solid rgba(255,255,255,.5);background:rgba(20,8,28,.5);color:#fff;font-size:calc(1.9*var(--u));cursor:pointer;font-family:var(--f-body);padding:0}
#tools button:focus-visible{outline:calc(.3*var(--u)) solid var(--gold)}
#rotate{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:5;background:var(--ink);color:var(--gold);font-family:var(--f-display);font-size:6vw;text-align:center;align-items:center;justify-content:center;flex-direction:column;gap:3vw;padding:0 16px}
#rotate span{font-size:18vw;color:var(--rose)}
@media (pointer:coarse) and (orientation:portrait){#rotate{display:flex}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.petals i,.stars-bg i,.rsparks i{display:none}}
[hidden]{display:none!important}