/* ═══════════════════════════════════════════════════════════
   GUESS UR PET — skin calda, giocosa & iper-animata
   ═══════════════════════════════════════════════════════════ */
:root{
  --bg:#FFF6EC;
  --ink:#33294A;
  --ink-soft:#6C6280;
  --card:#FFFFFF;
  --line:#EFE6DA;

  --coral:#FF7A6B;
  --peach:#FFB067;
  --yellow:#FFD25E;
  --teal:#38C6B4;
  --sky:#5FBEE8;
  --lilac:#B49CF0;
  --pink:#FF8FB3;
  --green:#8FD86F;

  --shadow:0 22px 50px -26px rgba(80,50,60,.5);
  --shadow-sm:0 12px 26px -16px rgba(80,50,60,.45);
  --r:26px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Nunito',system-ui,sans-serif;
  color:var(--ink);
  background:var(--bg);
  min-height:100vh;overflow-x:hidden;
  display:flex;flex-direction:column;align-items:center;
  line-height:1.5;
}
::selection{background:var(--yellow)}
button{font-family:inherit;cursor:pointer;color:inherit}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:8px}

#fx{position:fixed;inset:0;z-index:90;pointer-events:none}

/* ── sfondo vivo ────────────────────────────────────────── */
.blobs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.blobs i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;animation:blobmove 18s ease-in-out infinite alternate}
.blobs i:nth-child(1){width:44vw;height:44vw;left:-12vw;top:-10vw;background:radial-gradient(circle,var(--peach),transparent 70%)}
.blobs i:nth-child(2){width:40vw;height:40vw;right:-12vw;top:18vh;background:radial-gradient(circle,var(--teal),transparent 70%);animation-delay:-6s}
.blobs i:nth-child(3){width:38vw;height:38vw;left:20vw;bottom:-14vw;background:radial-gradient(circle,var(--lilac),transparent 70%);animation-delay:-12s}
@keyframes blobmove{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(4vw,-3vh) scale(1.12)}
  100%{transform:translate(-3vw,3vh) scale(.94)}
}
.drift{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.drift span{
  position:absolute;bottom:-40px;opacity:0;
  animation:floatUp linear forwards;
  filter:saturate(.8);
}
@keyframes floatUp{
  0%{transform:translateY(0) rotate(-12deg);opacity:0}
  12%{opacity:.35}
  85%{opacity:.28}
  100%{transform:translateY(-110vh) rotate(14deg);opacity:0}
}

/* ── topbar & logo ──────────────────────────────────────── */
.topbar{
  width:100%;max-width:1020px;padding:20px clamp(16px,4vw,32px) 6px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  position:relative;z-index:5;
}
.logo{
  position:relative;background:none;border:none;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transform-style:preserve-3d;
  animation:logoIdle 7.5s ease-in-out infinite;
  transition:transform .15s ease-out;
}
.logo.tilting{animation:none}
.logo:active{transform:scale(.95)}
/* piccola oscillazione continua e autonoma, stesso linguaggio della card animale */
@keyframes logoIdle{
  0%,100%{transform:rotateY(-5deg) rotateX(2.6deg) translateY(0)}
  28%{transform:rotateY(4.5deg) rotateX(-2.2deg) translateY(-4px)}
  55%{transform:rotateY(5.5deg) rotateX(2.8deg) translateY(2px)}
  80%{transform:rotateY(-3.8deg) rotateX(-2.4deg) translateY(-2px)}
}
.logo-img{
  position:relative;z-index:1;height:78px;width:auto;display:block;
  filter:drop-shadow(0 10px 15px rgba(80,50,60,.32)) drop-shadow(0 2px 4px rgba(80,50,60,.22));
}
.logo.tilting .logo-img{
  filter:drop-shadow(0 14px 18px rgba(80,50,60,.38)) drop-shadow(0 3px 6px rgba(80,50,60,.24));
}
/* riflessi mascherati sulla sagoma vera del logo (via alpha del PNG): un
   luccichio che deriva lentamente da solo, e un riflesso che insegue il
   puntatore quando ci passi sopra — stesso trattamento della card animale */
.logo-holo, .logo-glare{
  position:absolute;inset:0;pointer-events:none;
  -webkit-mask-image:url('../img/logo.png'); mask-image:url('../img/logo.png');
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  transition:opacity .3s;
}
.logo-holo{
  z-index:2;mix-blend-mode:color-dodge;opacity:.28;filter:blur(.5px);
  background:linear-gradient(115deg,
    transparent 24%, rgba(255,140,230,.55) 38%, rgba(130,225,255,.6) 48%,
    rgba(255,235,140,.55) 58%, transparent 74%);
  background-size:280% 280%;
  background-position:var(--hx,20%) var(--hy,20%);
  animation:logoHoloIdle 9s ease-in-out infinite alternate;
}
@keyframes logoHoloIdle{from{background-position:14% 20%}to{background-position:86% 76%}}
.logo-glare{
  z-index:3;opacity:0;mix-blend-mode:soft-light;
  background:radial-gradient(circle at var(--gx,28%) var(--gy,22%), rgba(255,255,255,.9), transparent 48%);
}
.logo.tilting .logo-holo{animation:none;opacity:.55}
.logo.tilting .logo-glare{opacity:.8}

/* selettore lingua */
.lang-picker{position:relative}
.lang-btn{
  display:flex;align-items:center;gap:7px;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:.88rem;
  background:#fff;border:2px solid var(--line);border-radius:999px;padding:9px 15px;
  box-shadow:var(--shadow-sm);transition:transform .15s;
}
.lang-btn:hover{transform:translateY(-2px)}
.lang-caret{font-size:.7rem;color:var(--ink-soft);transition:transform .2s}
.lang-picker.open .lang-caret{transform:rotate(180deg)}
.lang-menu{
  position:absolute;right:0;top:calc(100% + 8px);min-width:170px;z-index:50;
  background:#fff;border:2px solid var(--line);border-radius:18px;padding:7px;
  box-shadow:var(--shadow);display:none;transform-origin:top right;
}
.lang-picker.open .lang-menu{display:block;animation:menuPop .22s cubic-bezier(.2,.9,.3,1.4) both}
@keyframes menuPop{from{opacity:0;transform:scale(.86) translateY(-6px)}to{opacity:1;transform:none}}
.lang-item{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:none;border:none;border-radius:12px;padding:10px 12px;
  font-weight:700;font-size:.92rem;transition:background .12s,transform .12s;
}
.lang-item:hover{background:var(--bg);transform:translateX(3px)}
.lang-item.on{background:#FFEDE9;color:#B24437}

/* ── stage / screens ────────────────────────────────────── */
.stage{
  position:relative;z-index:1;width:100%;max-width:680px;
  padding:clamp(8px,3vw,22px) clamp(16px,4vw,32px) 30px;
  margin:auto 0;
}
.screen{display:none}
.screen.active{display:block;animation:pop .5s cubic-bezier(.2,.9,.3,1.1) both}
@keyframes pop{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}}
.pop-in{animation:popIn .4s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes popIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}

/* ── intro (ingresso scaglionato) ───────────────────────── */
.intro{position:relative;padding:clamp(10px,3vw,26px) 0}
#s-intro.active .kicker{animation:popIn .5s .05s both}
#s-intro.active .mega{animation:popIn .55s .14s both}
#s-intro.active .sub{animation:popIn .5s .26s both}
#s-intro.active .chips{animation:popIn .5s .36s both}
#s-intro.active .btn.big{animation:popIn .55s .46s both}
#s-intro.active .reassure{animation:popIn .5s .58s both}
.kicker{
  display:inline-block;font-weight:800;font-size:.82rem;
  color:var(--ink);background:#fff;border:2px solid var(--line);border-radius:999px;padding:8px 16px;
  box-shadow:var(--shadow-sm);margin-bottom:22px;transform:rotate(-1deg);
}
.mega{
  font-family:'Fredoka',sans-serif;font-weight:700;
  font-size:clamp(2.6rem,8.5vw,4.4rem);line-height:1.04;letter-spacing:-.01em;
}
.mega .hl{position:relative;color:var(--coral);white-space:nowrap;display:inline-block}
.mega .hl::after{
  content:"";position:absolute;left:-2%;right:-2%;bottom:.06em;height:.28em;z-index:-1;
  background:var(--yellow);border-radius:8px;transform:rotate(-1deg);
  animation:markerPulse 3.2s ease-in-out infinite;
}
@keyframes markerPulse{0%,100%{transform:rotate(-1deg) scaleX(1)}50%{transform:rotate(-1.6deg) scaleX(1.04)}}
.sub{font-size:clamp(1.04rem,2.5vw,1.22rem);color:#544a66;max-width:50ch;margin:24px 0 4px}
.sub b{color:var(--ink);font-weight:800}
.sub em{font-style:normal;color:var(--coral);font-weight:800}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 30px}
.chip{
  font-weight:700;font-size:.88rem;background:#fff;border:2px solid var(--line);border-radius:999px;
  padding:9px 16px;box-shadow:var(--shadow-sm);transition:transform .18s;
}
.chip:nth-child(odd){transform:rotate(-1deg)}
.chip:nth-child(even){transform:rotate(1.2deg)}
.chip:hover{transform:rotate(0) translateY(-3px) scale(1.04)}
.reassure{font-size:.82rem;color:var(--ink-soft);margin-top:18px}

.float-emoji{position:absolute;font-size:2.3rem;animation:bob 5.5s ease-in-out infinite;pointer-events:none;z-index:-1;filter:drop-shadow(0 8px 10px rgba(80,50,60,.18))}
.fe-1{top:-4px;right:6%;animation-delay:0s}
.fe-2{top:30%;right:-4px;animation-delay:1.4s}
.fe-3{top:56%;right:9%;animation-delay:2.4s}
.fe-4{bottom:-2%;right:1%;animation-delay:.7s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-14px) rotate(6deg)}}

/* ── bottoni ────────────────────────────────────────────── */
.btn{
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.02rem;
  background:#fff;color:var(--ink);border:2px solid var(--line);border-radius:16px;
  padding:15px 26px;box-shadow:var(--shadow-sm);
  position:relative;overflow:hidden;
  transition:transform .15s cubic-bezier(.2,.9,.3,1.2),box-shadow .15s,background .15s;
}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px) scale(.98)}
.btn.primary{background:var(--coral);color:#fff;border-color:transparent;box-shadow:0 16px 30px -14px rgba(255,122,107,.9)}
.btn.primary:hover{box-shadow:0 22px 38px -14px rgba(255,122,107,.95)}
.btn.primary::after{
  content:"";position:absolute;top:-40%;bottom:-40%;left:-70%;width:34%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-20deg);transition:left .05s;
}
.btn.primary:hover::after{left:140%;transition:left .55s ease}
.btn.big{font-size:1.2rem;padding:19px 40px;border-radius:20px}
.btn.glow{animation:breathe 2.6s ease-in-out infinite}
@keyframes breathe{
  0%,100%{box-shadow:0 16px 30px -14px rgba(255,122,107,.9)}
  50%{box-shadow:0 16px 40px -10px rgba(255,122,107,1),0 0 0 8px rgba(255,122,107,.12)}
}
.btn.shake{animation:softShake 3.4s ease-in-out infinite}
@keyframes softShake{
  0%,86%,100%{transform:rotate(0)}
  89%{transform:rotate(-2.4deg) scale(1.03)}
  92%{transform:rotate(2.2deg) scale(1.03)}
  95%{transform:rotate(-1.4deg)}
}
.btn.tiny{font-size:.82rem;padding:9px 16px;box-shadow:none}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--ink-soft)}
.btn.ghost:hover{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}
.btn.block{display:block;width:100%}
.btn:disabled{opacity:.45;cursor:wait;transform:none;animation:none}

/* ── card base ──────────────────────────────────────────── */
.card{
  background:var(--card);border:2px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,4.5vw,42px);box-shadow:var(--shadow);
}

/* ── quiz ───────────────────────────────────────────────── */
.progress-wrap{display:flex;align-items:center;gap:14px;margin-bottom:16px;padding:0 4px}
.progress{position:relative;flex:1;height:14px;background:#fff;border:2px solid var(--line);border-radius:999px;overflow:visible}
.progress i{
  display:block;height:100%;width:0;border-radius:999px;
  background:repeating-linear-gradient(-55deg,var(--peach) 0 14px,var(--coral) 14px 28px);
  background-size:200% 100%;animation:stripeflow 1.6s linear infinite;
  transition:width .5s cubic-bezier(.2,.9,.3,1);
}
@keyframes stripeflow{to{background-position:-40px 0}}
.progress .paw{
  position:absolute;top:50%;left:0;transform:translate(-50%,-58%);font-size:1.15rem;
  transition:left .5s cubic-bezier(.2,.9,.3,1);filter:drop-shadow(0 3px 3px rgba(0,0,0,.15));
}
.progress .paw.hop{animation:hop .5s cubic-bezier(.2,.9,.3,1.4)}
@keyframes hop{
  0%,100%{transform:translate(-50%,-58%) rotate(0)}
  45%{transform:translate(-50%,-130%) rotate(-14deg) scale(1.25)}
}
.progress-lab{font-family:'Fredoka',sans-serif;font-weight:600;font-size:.9rem;color:var(--ink-soft);white-space:nowrap}
.progress-lab b{color:var(--coral)}

.q-theme{font-weight:800;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-bottom:10px}
.q{font-family:'Fredoka',sans-serif;font-weight:600;font-size:clamp(1.4rem,4vw,1.95rem);line-height:1.18;margin-bottom:22px}
.opts{display:grid;gap:12px}
.opt{
  display:flex;align-items:center;gap:15px;text-align:left;width:100%;
  background:#fff;border:2px solid var(--line);border-radius:16px;padding:15px 18px;
  color:var(--ink);font-weight:700;font-size:1.03rem;line-height:1.35;
  box-shadow:var(--shadow-sm);
  animation:optIn .4s calc(var(--i) * 75ms) cubic-bezier(.2,.9,.3,1.25) both;
  transition:transform .14s,box-shadow .14s,border-color .14s,background .14s;
}
@keyframes optIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.opt .em{font-size:1.5rem;flex:0 0 auto;transition:transform .18s}
.opt:hover{transform:translateX(6px);border-color:var(--coral);background:#FFF6F4}
.opt:hover .em{transform:scale(1.3) rotate(-8deg)}
.opt:active,.opt.picked{transform:scale(.98);border-color:var(--coral);background:#FFEDE9}
.qslide-out{animation:qout .2s ease both}
@keyframes qout{to{opacity:0;transform:translateX(-26px)}}
.quiz-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding:0 6px}
.kbd-hint{font-size:.78rem;color:var(--ink-soft)}
.kbd-hint b{color:var(--ink)}

/* ── elaborazione ───────────────────────────────────────── */
.load-card{text-align:center}
.load-orbit{position:relative;width:180px;height:180px;margin:6px auto 20px}
.load-core{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:3.2rem;animation:beat 1.4s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.16)}}
.load-sat{position:absolute;font-size:1.7rem;animation:orbit 3.4s linear infinite}
.load-sat.s1{top:0;left:50%;margin-left:-14px}
.load-sat.s2{top:50%;right:0;margin-top:-14px;animation-delay:-1.1s}
.load-sat.s3{bottom:0;left:50%;margin-left:-14px;animation-delay:-2.2s}
@keyframes orbit{from{transform:rotate(0) translateY(-84px) rotate(0)}to{transform:rotate(360deg) translateY(-84px) rotate(-360deg)}}
.load-title{font-family:'Fredoka',sans-serif;font-weight:600;font-size:clamp(1.35rem,4vw,1.85rem);margin-bottom:6px}
.load-msg{color:var(--ink-soft);font-weight:700;min-height:1.4em}
.load-pct{
  font-family:'Fredoka',sans-serif;font-weight:700;font-size:clamp(2.6rem,9vw,3.6rem);line-height:1.1;
  margin-top:10px;
  background:linear-gradient(90deg,var(--coral),var(--peach),var(--teal),var(--coral));
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:hueflow 4s linear infinite;
}
@keyframes hueflow{to{background-position:300% 0}}
.load-bar{height:14px;background:#fff;border:2px solid var(--line);border-radius:999px;overflow:hidden;max-width:380px;margin:12px auto 0}
.load-bar i{
  display:block;height:100%;width:0;border-radius:999px;
  background:repeating-linear-gradient(-55deg,var(--teal) 0 14px,var(--sky) 14px 28px);
  animation:stripeflow 1.2s linear infinite;
  transition:width .3s linear;
}
.skipwrap{margin-top:26px;padding-top:22px;border-top:2px dashed var(--line)}
.skipnote{font-size:.94rem;color:var(--ink-soft);font-weight:700;max-width:44ch;margin:0 auto 16px}

/* ── overlay annuncio ───────────────────────────────────── */
.overlay{position:fixed;inset:0;z-index:60;background:rgba(51,41,74,.55);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:22px}
.overlay.show{display:flex}
.overlay.show .adbox{animation:adPop .45s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes adPop{from{opacity:0;transform:translateY(30px) scale(.9)}to{opacity:1;transform:none}}
.adbox{
  width:100%;max-width:440px;background:#fff;border:2px solid var(--line);border-radius:24px;
  padding:28px;text-align:center;box-shadow:var(--shadow);
}
.ad-tag{
  display:inline-block;font-family:'Fredoka',sans-serif;font-weight:600;font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;background:var(--yellow);border-radius:999px;padding:7px 16px;transform:rotate(-1.5deg);
}
.ad-note{font-size:.88rem;color:var(--ink-soft);font-weight:700;margin-top:12px}
.adframe{
  border:3px dashed var(--line);border-radius:16px;padding:44px 20px;margin:18px 0;
  background:repeating-linear-gradient(45deg,rgba(51,41,74,.04) 0 12px,transparent 12px 24px);
  font-weight:700;font-size:.8rem;color:var(--ink-soft);
}
.adframe b{display:block;font-size:1rem;color:var(--ink);margin-bottom:6px}
.adcount{font-family:'Fredoka',sans-serif;font-weight:600;font-size:.95rem;margin-bottom:16px;color:var(--coral)}

/* ── risultato ──────────────────────────────────────────── */
.result-card{text-align:center}
#s-result.active .r-top{animation:popIn .4s .05s both}
#s-result.active .r-species{animation:popIn .4s .5s both}
#s-result.active .r-name{animation:popIn .5s .58s both}
#s-result.active .match{animation:popIn .5s .7s both}
#s-result.active .r-why{animation:popIn .5s .95s both}
#s-result.active .traits{animation:popIn .5s 1.05s both}
.r-top{font-weight:800;color:var(--ink-soft);margin-bottom:6px}
.portrait{width:min(360px,92%);margin:6px auto;perspective:700px}
.portrait.spring .p-card{animation:springIn .8s cubic-bezier(.2,.9,.3,1.1) both}
@keyframes springIn{
  0%{opacity:0;transform:scale(.5) rotate(-5deg)}
  55%{opacity:1;transform:scale(1.06) rotate(1.5deg)}
  78%{transform:scale(.97) rotate(-.6deg)}
  100%{transform:scale(1) rotate(0)}
}
/* card fotografica: raggi concentrici (esterno 32 = interno 18 + padding 14) */
.p-card{
  position:relative;border-radius:32px;padding:14px;
  background:linear-gradient(135deg,var(--pc1),var(--pc2));
  border:4px solid #fff;
  box-shadow:
    0 36px 60px -22px rgba(80,50,60,.55),
    0 14px 30px -18px var(--pc2),
    0 0 0 1px rgba(80,50,60,.06);
  transition:transform .18s ease-out;will-change:transform;
  transform-style:preserve-3d;
  animation:cardIdle 7.5s ease-in-out infinite;
}
/* piccola oscillazione continua, come una carta che "respira" */
@keyframes cardIdle{
  0%,100%{transform:rotateY(-2.6deg) rotateX(1.4deg) translateY(0)}
  28%{transform:rotateY(2.2deg) rotateX(-1.2deg) translateY(-5px)}
  55%{transform:rotateY(2.8deg) rotateX(1.6deg) translateY(2px)}
  80%{transform:rotateY(-1.8deg) rotateX(-1.4deg) translateY(-3px)}
}
/* ombra "a terra" sotto la carta: profondità */
.portrait::after{
  content:"";display:block;width:68%;height:20px;margin:16px auto 0;
  background:radial-gradient(ellipse at center, rgba(80,50,60,.3), transparent 70%);
  filter:blur(4px);
  animation:groundPulse 7.5s ease-in-out infinite;
}
@keyframes groundPulse{
  0%,100%{transform:scaleX(1);opacity:.9}
  28%{transform:scaleX(.94);opacity:.7}
  55%{transform:scaleX(1.02);opacity:1}
  80%{transform:scaleX(.96);opacity:.8}
}
.p-photo{
  position:relative;border-radius:18px;overflow:hidden;aspect-ratio:1/1.02;background:#fff;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.55), inset 0 -18px 30px -18px rgba(51,41,74,.35);
}
/* la foto riempie tutto il riquadro; il punto focale (muso) è regolato via JS
   in base all'orientamento + override per razza in PHOTO_FOCUS */
.p-photo img{
  width:100%;height:100%;object-fit:cover;object-position:50% 42%;display:block;
  transform:scale(1.02);
}
.p-photo .p-em{display:none}
.p-photo.noimg{background:linear-gradient(135deg,var(--pc1),var(--pc2))}
.p-photo.noimg .p-em{
  display:flex;align-items:center;justify-content:center;
  position:absolute;inset:0;font-size:7rem;
}
/* ── effetti da carta da gioco ── */
.p-holo{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  mix-blend-mode:color-dodge;opacity:.26;filter:blur(1px);
  background:linear-gradient(115deg,
    transparent 22%, rgba(255,119,225,.5) 36%, rgba(122,229,255,.55) 47%,
    rgba(255,241,143,.5) 58%, transparent 74%);
  background-size:280% 280%;
  background-position:var(--hx,20%) var(--hy,20%);
  animation:holoIdle 9s ease-in-out infinite alternate;
  transition:opacity .3s;
}
@keyframes holoIdle{from{background-position:12% 18%}to{background-position:88% 78%}}
.p-glare{
  position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  mix-blend-mode:soft-light;transition:opacity .3s;
  background:radial-gradient(circle at var(--gx,28%) var(--gy,22%), rgba(255,255,255,.9), transparent 46%);
}
.p-card.tilting .p-holo{animation:none;opacity:.55}
.p-card.tilting .p-glare{opacity:.75}
.p-card.tilting{animation:none}
.p-shine{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.16),transparent 30%);
}
.p-shine::after{
  content:"";position:absolute;top:-30%;bottom:-30%;left:-80%;width:36%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);animation:shineSweep 1.4s .7s ease both;
}
@keyframes shineSweep{to{left:150%}}
.p-spark{position:absolute;font-size:1.1rem;pointer-events:none;animation:twinkle 2.6s ease-in-out infinite}
.p-spark.s1{top:9%;left:8%;animation-delay:.2s}
.p-spark.s2{top:16%;right:24%;animation-delay:1.1s;font-size:.85rem}
.p-spark.s3{bottom:14%;left:16%;animation-delay:1.9s;font-size:.95rem}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.4) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(24deg)}}
.p-doodle{
  position:absolute;font-size:1.75rem;z-index:3;pointer-events:none;
  filter:drop-shadow(0 4px 6px rgba(80,50,60,.3));animation:bob 4.5s ease-in-out infinite;
}
.p-doodle.pd1{top:-12px;left:-10px;animation-delay:0s}
.p-doodle.pd2{top:22%;right:-14px;animation-delay:1.2s}
.p-doodle.pd3{bottom:16%;left:-14px;animation-delay:2.1s}
.p-doodle.pd4{bottom:-10px;right:8%;animation-delay:.6s}
.p-badge{
  position:absolute;top:-16px;right:-12px;z-index:4;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:86px;height:86px;border-radius:50%;
  background:#fff;border:4px solid var(--ink);
  box-shadow:0 10px 22px -8px rgba(80,50,60,.5);
  transform:rotate(8deg);
  animation:stampIn .55s .9s cubic-bezier(.2,.9,.3,1.4) both;
}
@keyframes stampIn{
  0%{opacity:0;transform:rotate(30deg) scale(2.4)}
  70%{opacity:1;transform:rotate(4deg) scale(.94)}
  100%{transform:rotate(8deg) scale(1)}
}
.p-badge b{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.35rem;color:var(--coral);line-height:1}
.p-badge small{font-weight:800;font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-top:2px}
.p-label{
  margin:13px auto 0;width:fit-content;max-width:96%;
  background:rgba(255,255,255,.95);border-radius:999px;padding:10px 20px;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:16px;letter-spacing:.05em;
  color:var(--pink);white-space:nowrap;overflow:hidden;text-align:center;
  box-shadow:0 6px 14px -8px rgba(80,50,60,.4);
}
.r-species{font-weight:800;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:20px}
.r-perfect{font-style:italic;font-weight:700;font-size:1.05rem;color:var(--ink-soft);margin:10px 0 2px}
#s-result.active .r-perfect{animation:popIn .4s .54s both}
.r-name{font-family:'Fredoka',sans-serif;font-weight:700;font-size:clamp(1.9rem,6vw,2.8rem);line-height:1.04;margin:4px 0 2px}
.r-tag{font-style:italic;font-weight:700;font-size:1.02rem;color:var(--coral);margin:0 0 20px}
#s-result.active .r-tag{animation:popIn .5s .64s both}
.match{display:flex;align-items:center;gap:12px;max-width:420px;margin:0 auto 24px}
.match-lab{font-weight:800;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.match-track{flex:1;height:16px;background:var(--bg);border:2px solid var(--line);border-radius:999px;overflow:hidden}
.match-track i{
  display:block;height:100%;width:0;border-radius:999px;
  background:repeating-linear-gradient(-55deg,var(--green) 0 14px,var(--teal) 14px 28px);
  animation:stripeflow 1.6s linear infinite;
  transition:width 1.1s cubic-bezier(.2,.9,.3,1);
}
.match-val{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.2rem;min-width:58px;text-align:right;color:var(--teal)}
.reasons{display:grid;gap:10px;max-width:480px;margin:0 auto 22px;text-align:left}
.reason{
  display:flex;align-items:flex-start;gap:12px;background:var(--bg);border:2px solid var(--line);
  border-radius:14px;padding:12px 15px;font-weight:700;font-size:.98rem;
  animation:reasonIn .45s calc(.75s + var(--i) * 130ms) cubic-bezier(.2,.9,.3,1.25) both;
}
@keyframes reasonIn{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.reason .rc{font-size:1.2rem;flex:0 0 auto;line-height:1.3}
.r-why{font-size:1.06rem;line-height:1.62;max-width:54ch;margin:0 auto;color:#4d4363}
.sect-h{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.05rem;margin:30px 0 14px;text-align:left}
.traits{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px;text-align:left}
.trait{
  background:var(--bg);border:2px solid var(--line);border-radius:14px;padding:13px 15px;
  transition:transform .16s,box-shadow .16s;
}
.trait:hover{transform:translateY(-3px) rotate(-.5deg);box-shadow:var(--shadow-sm)}
.trait .lab{font-weight:800;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.trait .val{font-family:'Fredoka',sans-serif;font-weight:500;font-size:1rem;margin-top:4px;line-height:1.28}
.statgrid{display:grid;gap:10px;text-align:left}
.stat-row{display:grid;grid-template-columns:96px 1fr 34px;align-items:center;gap:12px}
.stat-row .sl{font-weight:800;font-size:.72rem}
.stat-row .sv{font-weight:800;font-size:.78rem;text-align:right;color:var(--ink-soft)}
.stat-track{position:relative;height:14px;border:2px solid var(--line);border-radius:999px;background:#fff;overflow:visible}
.stat-track i{position:absolute;inset:0;width:0;background:linear-gradient(90deg,var(--sky),var(--teal));border-radius:999px;transition:width .9s cubic-bezier(.2,.9,.3,1)}
.stat-track .mk{position:absolute;top:50%;width:12px;height:12px;background:var(--coral);border:2px solid #fff;border-radius:50%;transform:translate(-50%,-50%);z-index:2;box-shadow:0 2px 5px rgba(0,0,0,.2)}
.stat-legend{font-size:.72rem;color:var(--ink-soft);margin-top:12px;text-align:left}
.dot-you,.dot-an{display:inline-block;width:11px;height:11px;border-radius:50%;vertical-align:middle;margin-right:2px}
.dot-you{background:linear-gradient(90deg,var(--sky),var(--teal))}
.dot-an{background:var(--coral)}
.alt{
  margin-top:26px;padding:18px 20px;border:2px solid var(--line);border-radius:18px;
  background:linear-gradient(120deg,#FFF9F1,#FEF3FA);text-align:left;
  transition:transform .16s;
}
.alt:hover{transform:translateY(-3px)}
.alt .h{font-weight:800;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:10px}
.alt .row{display:flex;align-items:center;gap:14px}
.alt .row .em{font-size:2.2rem}
.alt .row .txt b{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.06rem}
.alt .row .txt span{display:block;color:var(--ink-soft);font-size:.9rem;margin-top:2px;font-weight:700}
.actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:30px}
.responsible{font-size:.82rem;color:var(--ink-soft);max-width:52ch;margin:22px auto 0;line-height:1.55}

/* ── overlay condivisione ───────────────────────────────── */
.sharebox{
  position:relative;width:100%;max-width:480px;max-height:92vh;overflow:auto;
  background:#fff;border:2px solid var(--line);border-radius:26px;
  padding:26px 24px 22px;text-align:center;box-shadow:var(--shadow);
}
.overlay.show .sharebox{animation:adPop .45s cubic-bezier(.2,.9,.3,1.3) both}
.share-close{
  position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;
  background:var(--bg);border:2px solid var(--line);font-weight:800;font-size:.95rem;
  display:flex;align-items:center;justify-content:center;transition:transform .15s,background .15s;
}
.share-close:hover{transform:rotate(90deg) scale(1.08);background:#FFEDE9}
.share-title{
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.08rem;line-height:1.35;
  margin:4px 26px 16px;
}
.share-preview{
  width:min(200px,52%);margin:0 auto 18px;border-radius:16px;overflow:hidden;
  border:3px solid var(--line);box-shadow:0 14px 30px -14px rgba(80,50,60,.5);
  transform:rotate(-2deg);transition:transform .25s;
  background:var(--bg);aspect-ratio:1080/2012;max-height:56vh;
}
.share-preview:hover{transform:rotate(0) scale(1.03)}
.share-preview img{width:100%;height:100%;object-fit:contain;display:block}
.share-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.share-btn{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  font-weight:800;font-size:.76rem;color:#fff;border:none;border-radius:16px;
  padding:13px 6px 11px;cursor:pointer;
  box-shadow:0 10px 20px -10px rgba(80,50,60,.55);
  transition:transform .15s cubic-bezier(.2,.9,.3,1.3),box-shadow .15s;
}
.share-btn:hover{transform:translateY(-4px) scale(1.04)}
.share-btn:active{transform:translateY(-1px) scale(.98)}
.share-btn svg{width:26px;height:26px;fill:currentColor}
.share-btn.wa{background:#25D366}
.share-btn.ig{background:linear-gradient(45deg,#F58529,#DD2A7B 55%,#8134AF)}
.share-btn.fb{background:#1877F2}
.share-btn.tw{background:#1a1a1a}
.share-btn.em{background:var(--sky)}
.share-btn.dl{background:var(--coral)}
.share-note{font-size:.76rem;color:var(--ink-soft);font-weight:700;margin-top:14px}

/* ── varie ──────────────────────────────────────────────── */
.foot{
  position:relative;z-index:1;margin:8px 0 26px;
  font-size:.76rem;color:var(--ink-soft);font-weight:700;text-align:center;padding:0 20px;
}
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:#fff;font-weight:800;padding:14px 22px;border-radius:14px;
  box-shadow:var(--shadow);opacity:0;transition:all .3s;z-index:70;max-width:90vw;text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:520px){
  .traits{grid-template-columns:1fr}
  .actions .btn{flex:1 1 100%}
  .stat-row{grid-template-columns:78px 1fr 30px}
  .logo-img{height:56px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .screen.active{opacity:1;transform:none}
  .opt,.reason{opacity:1;transform:none}
}