/* MIRROR V4 — Digital Social Identity Card */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#0a0614;--surface:#120d20;--surface2:#1a1330;--border:rgba(255,255,255,.06);
  --text:#f0eaff;--text2:#a89cc4;--text3:#6b5e8a;
  --accent:#c084fc;--accent2:#f59e0b;--gold:#fbbf24;--rose:#fb7185;--mint:#34d399;--sky:#38bdf8;
  --radius:24px;--radius-sm:16px;--radius-xs:10px;--font:"Segoe UI",system-ui,-apple-system,sans-serif;
}

html{font-size:16px;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font);min-height:100dvh;overflow-x:hidden;-webkit-font-smoothing:antialiased}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.blob,.grain,.scan-orb-ring{display:none}}

/* ── BG ── */
.bg-layer{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.blob{position:absolute;border-radius:50%;opacity:.28;will-change:transform;filter:blur(70px)}
.blob-1{width:42vmax;height:42vmax;background:radial-gradient(circle,#c084fc,transparent 70%);top:-18%;left:-8%;animation:blobFloat 20s ease-in-out infinite}
.blob-2{width:38vmax;height:38vmax;background:radial-gradient(circle,#f59e0b,transparent 70%);top:52%;right:-12%;animation-delay:-7s;animation-duration:22s}
.blob-3{width:32vmax;height:32vmax;background:radial-gradient(circle,#fb7185,transparent 70%);bottom:-12%;left:22%;animation-delay:-14s;animation-duration:24s}
.blob-4{width:28vmax;height:28vmax;background:radial-gradient(circle,#34d399,transparent 70%);top:28%;left:42%;animation-delay:-3s;animation-duration:18s}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.022;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes blobFloat{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(5%,-3%) scale(1.05)}50%{transform:translate(-2%,5%) scale(.96)}75%{transform:translate(-4%,-2%) scale(1.03)}}

/* ── OFFLINE ── */
.offline-banner{position:fixed;top:0;left:0;right:0;z-index:100;background:#b45309;color:#fff;text-align:center;padding:.45rem;font-size:.75rem;font-weight:600}
.mutation-nudge{position:fixed;top:0;left:0;right:0;z-index:99;background:linear-gradient(135deg,rgba(192,132,252,.9),rgba(147,51,234,.9));color:#fff;text-align:center;padding:.4rem;font-size:.72rem;animation:fadeUp .3s ease-out}
/* ── INTENTION OVERLAY ── */
.intention-overlay{position:fixed;inset:0;z-index:80;background:rgba(10,6,20,.92);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;animation:overlayIn .2s ease-out}
.intention-modal{text-align:center;padding:1.5rem;max-width:380px;width:92%}
.intention-modal h3{font-size:1.1rem;margin-bottom:.2rem}
.intention-sub{font-size:.72rem;color:var(--text3);margin-bottom:1rem}
.intention-options{display:flex;flex-direction:column;gap:.5rem}
.intention-btn{display:flex;align-items:center;gap:.7rem;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:.8rem 1rem;color:var(--text);cursor:pointer;transition:all .15s;text-align:left;width:100%;font-family:var(--font)}
.intention-btn:hover,.intention-btn:focus-visible{border-color:var(--accent);background:var(--surface2)}
.intent-icon{font-size:1.6rem;flex-shrink:0;width:44px;text-align:center}
.intent-label{font-size:.82rem;font-weight:700;display:block}
.intent-desc{font-size:.62rem;color:var(--text3);display:block}
@keyframes overlayIn{from{opacity:0}to{opacity:1}}

/* ── CHAPTER PROGRESS BAR ── */
.chapter-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:50;background:rgba(255,255,255,.05)}
.chapter-bar{height:100%;background:var(--accent,#c084fc);transition:width .2s ease-out;width:0}
.screen{display:none;flex-direction:column;align-items:center;justify-content:center;min-height:100dvh;padding:1.25rem .75rem calc(1.25rem + var(--safe-b));position:relative;z-index:1;opacity:0;transition:opacity .3s}
.screen.active{display:flex;opacity:1}

/* ── LANDING ── */
.landing-inner{display:flex;flex-direction:column;align-items:center;width:100%;max-width:400px;animation:fadeUp .7s cubic-bezier(.16,1,.3,1);position:relative;z-index:1}
.referral-banner{background:linear-gradient(135deg,rgba(192,132,252,.15),rgba(245,158,11,.1));border:1px solid rgba(192,132,252,.2);border-radius:var(--radius-sm);padding:.7rem .9rem;margin-bottom:.8rem;display:flex;align-items:center;gap:.6rem;font-size:.78rem;color:var(--text);font-weight:600;animation:fadeUp .4s ease-out .2s both;line-height:1.3}
.referral-icon{font-size:1.8rem;flex-shrink:0}
.landing-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.landing-particle{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--accent);animation:particleFloat 8s ease-in-out infinite;opacity:0}
.landing-particle:nth-child(1){left:10%;top:20%;animation-delay:0s;background:var(--accent)}
.landing-particle:nth-child(2){left:85%;top:15%;animation-delay:1s;background:var(--accent2)}
.landing-particle:nth-child(3){left:70%;top:60%;animation-delay:2s;background:var(--mint)}
.landing-particle:nth-child(4){left:25%;top:45%;animation-delay:3s;background:var(--rose)}
.landing-particle:nth-child(5){left:50%;top:10%;animation-delay:4s;background:var(--sky)}
.landing-particle:nth-child(6){left:90%;top:40%;animation-delay:5s;background:var(--accent)}
.landing-particle:nth-child(7){left:15%;top:70%;animation-delay:6s;background:var(--accent2)}
.landing-particle:nth-child(8){left:60%;top:80%;animation-delay:7s;background:var(--mint)}
@keyframes particleFloat{0%{opacity:0;transform:translateY(0) scale(0)}10%{opacity:.8}50%{opacity:.4;transform:translateY(-60px) scale(1.5)}90%{opacity:.1}100%{opacity:0;transform:translateY(-120px) scale(0.3)}}
.logo-text{font-size:clamp(2.5rem,11vw,4.5rem);font-weight:900;letter-spacing:-.03em;background:linear-gradient(135deg,#c084fc,#f59e0b 40%,#fb7185 70%,#34d399);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 25px rgba(192,132,252,.25));line-height:1;margin-bottom:.3rem;animation:logoShimmer 4s ease-in-out infinite}
@keyframes logoShimmer{0%,100%{background-position:0% 50%;filter:drop-shadow(0 0 20px rgba(192,132,252,.2))}50%{background-position:100% 50%;filter:drop-shadow(0 0 35px rgba(245,158,11,.35))}}
.lang-flags{display:flex;gap:.35rem;margin-bottom:.6rem}
.lang-flag{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xs);padding:.3rem .4rem;font-size:1rem;cursor:pointer;transition:all .2s cubic-bezier(.22,.61,.36,1);line-height:1}
.lang-flag:hover,.lang-flag:focus-visible{border-color:var(--accent);background:var(--surface2);transform:translateY(-2px)}
.lang-flag:active{transform:scale(.96)}
.tagline{font-size:1.05rem;color:var(--text2);text-align:center;margin-bottom:.5rem;line-height:1.5}
.micro-promise{font-size:.72rem;color:var(--text3);text-align:center;margin-bottom:.5rem;font-style:italic;opacity:.7}
.trust-badge-row{display:flex;gap:.4rem;justify-content:center;margin-bottom:1.2rem;flex-wrap:wrap}
.trust-badge-pill{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:50px;padding:.25rem .7rem;font-size:.6rem;color:rgba(255,255,255,.5);white-space:nowrap}
.input-group{width:100%;display:flex;flex-direction:column;align-items:center;gap:.6rem}
.input-wrap{position:relative;width:100%;max-width:320px}
.input-wrap input{width:100%;background:var(--surface);border:1.5px solid var(--border);color:var(--text);padding:.9rem 1.2rem;border-radius:50px;font-size:1rem;outline:none;font-family:var(--font);transition:border-color .3s,box-shadow .3s}
.input-wrap input:focus{border-color:var(--accent);box-shadow:0 0 30px rgba(192,132,252,.18)}
.input-wrap input::placeholder{color:var(--text3)}
.input-error{display:block;font-size:.7rem;color:var(--rose);margin-top:.3rem;padding-left:1rem;min-height:1em}
.input-glow{position:absolute;inset:-2px;border-radius:54px;padding:2px;background:conic-gradient(from 0deg,transparent,var(--accent),transparent,var(--accent2),transparent);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s;pointer-events:none}
.input-wrap input:focus~.input-glow{opacity:.45;animation:rotateGlow 4s linear infinite}
@keyframes rotateGlow{to{transform:rotate(360deg)}}

.btn-primary,.btn-secondary,.btn-accent,.btn-ghost,.btn-large{
  padding:.75rem 1.8rem;border-radius:50px;font-size:.88rem;font-weight:700;cursor:pointer;border:none;font-family:var(--font);transition:all .2s cubic-bezier(.22,.61,.36,1);text-decoration:none;display:inline-block;text-align:center;position:relative;overflow:hidden
}
.btn-primary::after,.btn-secondary::after,.btn-accent::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,0);transition:background .3s;border-radius:50px;pointer-events:none}
.btn-primary:hover::after,.btn-secondary:hover::after,.btn-accent:hover::after{background:rgba(255,255,255,.07)}
.btn-primary:hover,.btn-secondary:hover,.btn-accent:hover,.btn-ghost:hover{transform:translateY(-1px)}
.btn-primary:active,.btn-secondary:active,.btn-accent:active,.btn-ghost:active{transform:scale(.94)}
.btn-primary:focus-visible,.btn-secondary:focus-visible,.btn-accent:focus-visible,.btn-ghost:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn-primary{background:linear-gradient(135deg,var(--accent),#9333ea);color:#fff}
.btn-secondary{background:var(--surface2);color:var(--text);border:1px solid var(--border)}
.btn-accent{background:linear-gradient(135deg,var(--accent2),#d97706);color:#000;font-weight:800}
.btn-ghost{background:transparent;color:var(--text2);border:1px solid var(--border)}
.btn-large{padding:1rem 2.5rem;font-size:.95rem;width:100%;max-width:340px}
.btn-large.btn-primary{position:relative;box-shadow:0 0 30px rgba(192,132,252,.25)}
@keyframes ctaGlow{0%,100%{box-shadow:0 0 20px rgba(192,132,252,.2)}50%{box-shadow:0 0 45px rgba(192,132,252,.45),0 0 80px rgba(147,51,234,.2)}}
.btn-large.btn-primary::before{content:'';position:absolute;inset:-3px;border-radius:54px;padding:3px;background:conic-gradient(from 0deg,transparent,var(--accent),var(--accent2),transparent);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:ctaSpin 4s linear infinite;opacity:.5;pointer-events:none}
@keyframes ctaSpin{to{transform:rotate(360deg)}}

.landing-meta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.2rem;align-items:center;justify-content:center}
.streak-badge{color:var(--gold);font-size:.82rem;font-weight:600}
.badge-pills{display:flex;gap:.3rem;flex-wrap:wrap}
.badge-pill{background:var(--surface2);border:1px solid var(--border);border-radius:50px;padding:.2rem .7rem;font-size:.7rem;color:var(--text2)}
.friction-hint{font-size:.65rem;color:var(--text3);margin-top:.35rem;text-align:center;opacity:.7}

/* ── SAMPLE PREVIEW CARD ── */
.sample-card{margin:.6rem 0;animation:fadeUp .6s ease-out .3s both;max-width:320px;width:100%}
.sample-card-inner{background:var(--surface);border:1px solid var(--accent);border-radius:var(--radius);padding:1rem 1rem .8rem;text-align:center;position:relative;opacity:.85}
.sample-icon{font-size:2.2rem;margin-bottom:.1rem}
.sample-name{font-size:1.1rem;font-weight:900;color:var(--text)}
.sample-role{font-size:.78rem;color:var(--accent);font-weight:700;margin-bottom:.5rem}
.sample-score-wrap{display:flex;align-items:baseline;justify-content:center;gap:.2rem;margin-bottom:.3rem}
.sample-score-label{font-size:.55rem;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;display:block}
.sample-score{font-size:1.8rem;font-weight:900;color:var(--text)}
.sample-score-max{font-size:.75rem;color:var(--text3)}
.sample-phrase{font-size:.72rem;color:var(--text2);font-style:italic;margin-bottom:.5rem;line-height:1.4}
.sample-badge{display:inline-block;background:var(--accent2);color:#000;font-size:.62rem;font-weight:800;padding:.15rem .5rem;border-radius:50px;letter-spacing:.05em}
.sample-cta{text-align:center;margin-top:.35rem;font-size:.62rem;color:var(--text3);animation:pulse 2s ease-in-out infinite}

/* ── TRUST BLOCK ── */
.trust-block{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1rem;margin-top:1rem;max-width:400px;width:100%;text-align:left;animation:fadeUp .5s ease-out .5s both}
.trust-block h4{font-size:.75rem;color:var(--accent);margin-bottom:.5rem;text-align:center}
.trust-steps{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.5rem}
.trust-step{font-size:.65rem;color:var(--text2);display:flex;align-items:flex-start;gap:.4rem;line-height:1.4}
.trust-num{background:var(--surface2);border:1px solid var(--border);border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:700;color:var(--accent);flex-shrink:0}
.trust-privacy{font-size:.6rem;color:var(--text3);text-align:center;font-style:italic;line-height:1.4}

/* ── EXPLORER TOGGLE ── */
.explorer-toggle-wrap{margin-top:1.5rem;width:100%}
.explorer-toggle{width:100%;background:linear-gradient(135deg,#c084fc22,#f59e0b18,#38bdf822);border:2px solid rgba(192,132,252,.25);border-radius:20px;padding:1.1rem 1.2rem;color:var(--text);cursor:pointer;font-family:var(--font);display:flex;flex-direction:column;align-items:center;gap:.15rem;transition:all .35s cubic-bezier(.22,.61,.36,1);position:relative;overflow:hidden;animation:explorerGlow 2.5s ease-in-out infinite}
.explorer-toggle::before{content:'';position:absolute;inset:-2px;border-radius:22px;padding:2px;background:conic-gradient(from 0deg,transparent,#c084fc,transparent,#f59e0b,transparent,#38bdf8,transparent);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:ctaSpin 3s linear infinite;opacity:.25}
.explorer-toggle::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(192,132,252,.08),transparent);transform:translateX(-100%);animation:tileShine 4s ease-in-out infinite}
.explorer-toggle:hover,.explorer-toggle:focus-visible{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 12px 40px rgba(192,132,252,.2),0 0 0 6px rgba(192,132,252,.04);background:linear-gradient(135deg,#c084fc33,#f59e0b22,#38bdf833)}
.explorer-toggle:active{transform:scale(.96)}
.explorer-tile-icon{font-size:1.8rem;display:block;filter:drop-shadow(0 0 8px rgba(192,132,252,.4))}
.explorer-tile-label{font-size:.88rem;font-weight:800;display:block;color:var(--text);background:linear-gradient(135deg,var(--accent),var(--accent2),var(--sky));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.explorer-tile-sub{font-size:.6rem;color:var(--text2);display:block;margin-top:.05rem}
.explorer-arrow{transition:transform .35s;font-size:.75rem;opacity:.4;margin-top:.2rem}
.explorer-arrow.open{transform:rotate(180deg);opacity:.7}
.explorer-content{padding-top:.8rem}
@keyframes explorerGlow{0%,100%{box-shadow:0 0 15px rgba(192,132,252,.06),inset 0 0 30px rgba(192,132,252,.02)}50%{box-shadow:0 0 35px rgba(192,132,252,.15),inset 0 0 50px rgba(192,132,252,.04)}}

/* ── LOADING ── */
.loading-inner{display:flex;flex-direction:column;align-items:center;gap:1.2rem;width:100%;max-width:360px}
.skeleton{width:100%;animation:pulse 1.4s ease-in-out infinite}
.skeleton>*{background:var(--surface);border-radius:var(--radius);margin-bottom:.6rem}
.sk-hero{height:70px;width:65%;margin:0 auto}
.sk-block{height:40px;width:100%}.sk-block.short{width:55%}
.sk-row{display:flex;gap:.5rem}.sk-row span{height:50px;flex:1;border-radius:var(--radius-sm);background:var(--surface)}
.loading-active{display:flex;flex-direction:column;align-items:center;gap:1rem}
.scan-orb{position:relative;width:75px;height:75px}
.scan-orb-ring{position:absolute;inset:0;border-radius:50%;border:3px solid transparent;border-top-color:var(--accent);border-right-color:var(--accent2);animation:orbSpin 1.2s cubic-bezier(.6,0,.4,1) infinite}
.scan-orb-core{position:absolute;inset:15px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));animation:orbPulse 1.5s ease-in-out infinite;filter:blur(7px)}
@keyframes orbSpin{to{transform:rotate(360deg)}}@keyframes orbPulse{0%,100%{transform:scale(.8);opacity:.6}50%{transform:scale(1.2);opacity:1}}
.loading-text{font-size:.95rem;font-weight:600}
.loading-dots{display:flex;gap:.3rem}.loading-dots span{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:dotBounce 1s ease-in-out infinite}
.loading-dots span:nth-child(2){animation-delay:.15s}.loading-dots span:nth-child(3){animation-delay:.3s}
@keyframes dotBounce{0%,100%{transform:translateY(0);opacity:.3}50%{transform:translateY(-7px);opacity:1}}

/* ── RESULT CONTAINER ── */
.result-container{width:100%;max-width:500px;display:flex;flex-direction:column;gap:1.5rem;padding-bottom:var(--safe-b)}

/* ── SCENE ── */
.scene{animation:fadeUpStagger .55s cubic-bezier(.22,.61,.36,1) both}
.scene:nth-child(1){animation-delay:.04s}.scene:nth-child(2){animation-delay:.1s}.scene:nth-child(3){animation-delay:.17s}
.scene:nth-child(4){animation-delay:.24s}.scene:nth-child(5){animation-delay:.31s}.scene:nth-child(6){animation-delay:.38s}
.scene:nth-child(7){animation-delay:.45s}.scene:nth-child(8){animation-delay:.52s}.scene:nth-child(9){animation-delay:.59s}
.scene:nth-child(10){animation-delay:.66s}.scene:nth-child(11){animation-delay:.73s}.scene:nth-child(12){animation-delay:.8s}
.scene-title{font-size:.8rem;color:var(--text3);text-transform:uppercase;letter-spacing:.12em;margin-bottom:.8rem;text-align:center}
.mt{margin-top:1.5rem}
.continue-hint{text-align:center;color:var(--text3);font-size:.75rem;margin-top:1rem;animation:pulse 2s ease-in-out infinite}
@keyframes fadeUpStagger{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:.7}}

/* ── SCENE 1: IDENTITY CARD ── */
.identity-card{
  background:var(--surface);border:1px solid var(--border);border-radius:24px;
  padding:2rem 1.2rem 1.5rem;text-align:center;
  position:relative;overflow:hidden;
}
.identity-card{animation:bounceInCard .7s cubic-bezier(.22,.61,.36,1) both}
.id-rarity{position:absolute;top:12px;right:14px;background:var(--accent2);color:#000;font-size:.68rem;font-weight:800;padding:.2rem .7rem;border-radius:50px;letter-spacing:.05em}
.id-icon{font-size:3.5rem;margin-bottom:.3rem;animation:bounceInCard .7s cubic-bezier(.22,.61,.36,1) .1s both, iconFloat 3s ease-in-out .8s infinite}
@keyframes iconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes bounceInCard{0%{transform:scale(.88);opacity:0}50%{transform:scale(1.03);opacity:1}70%{transform:scale(.97)}100%{transform:scale(1);opacity:1}}
.id-name{font-size:2.4rem;font-weight:900;letter-spacing:-.02em;line-height:1;margin-bottom:.15rem}
.id-archetype{font-size:1rem;color:var(--accent);font-weight:700;margin-bottom:1.2rem}
.id-score-wrap{display:flex;align-items:baseline;justify-content:center;gap:.2rem;margin-bottom:.4rem;position:relative}
.id-score-wrap::before{content:'';position:absolute;inset:-10px -20px;border-radius:24px;background:radial-gradient(ellipse at center,var(--accent) 0%,transparent 70%);opacity:.1;animation:scorePulse 2s ease-in-out infinite;pointer-events:none}
@keyframes scorePulse{0%,100%{opacity:.05;transform:scale(.95)}50%{opacity:.15;transform:scale(1.05)}}
.id-score-label{font-size:.65rem;color:var(--text3);text-transform:uppercase;letter-spacing:.1em;display:block;margin-bottom:.2rem}
.id-score{font-size:3.5rem;font-weight:900;line-height:1;background:linear-gradient(135deg,var(--text),var(--accent));background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:scoreShimmer 2s ease-in-out infinite}
@keyframes scoreShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.id-score-max{font-size:1rem;color:var(--text3)}
.id-rarity-bar{height:6px;background:rgba(255,255,255,.06);border-radius:10px;margin:.8rem auto;max-width:260px;overflow:hidden;position:relative}
.id-rarity-fill{height:100%;border-radius:10px;transition:width 1.5s cubic-bezier(.16,1,.3,1);width:0;position:relative}
.id-rarity-fill::after{content:'';position:absolute;right:0;top:-2px;width:10px;height:10px;border-radius:50%;background:inherit;box-shadow:0 0 10px currentColor;animation:rarityGlow 1.5s ease-in-out infinite}
@keyframes rarityGlow{0%,100%{box-shadow:0 0 6px currentColor}50%{box-shadow:0 0 16px currentColor,0 0 24px currentColor}}
.id-rarity-text{font-size:.78rem;color:var(--text2);margin-bottom:.6rem}
.id-phrase{font-size:.9rem;color:var(--text);font-style:italic;font-weight:500;line-height:1.5;margin-bottom:.8rem;padding:0 .5rem}
.id-colors{display:flex;justify-content:center;gap:.4rem;margin-bottom:1rem}
.id-colors span{width:14px;height:14px;border-radius:50%}
.id-actions{display:flex;flex-direction:column;gap:.45rem;max-width:300px;margin:0 auto}

/* ── POST-RESULT CTA ROW ── */
.post-result-ctas{display:flex;gap:.5rem;margin-top:1rem;justify-content:center;flex-wrap:wrap}
.post-cta{flex:1;min-width:90px;max-width:130px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.7rem .5rem;text-align:center;cursor:pointer;transition:all .2s cubic-bezier(.22,.61,.36,1);display:flex;flex-direction:column;align-items:center;gap:.2rem}
.post-cta:hover,.post-cta:focus-visible{border-color:var(--accent);background:var(--surface);transform:translateY(-2px)}
.post-cta:active{transform:scale(.96)}
.post-cta-icon{font-size:1.4rem}
.post-cta-label{font-size:.75rem;font-weight:700;color:var(--text)}
.post-cta-sub{font-size:.6rem;color:var(--text3);line-height:1.2}
.post-cta-share{border-color:rgba(192,132,252,.25)}
.post-cta-compare{border-color:rgba(56,189,248,.25)}
.post-cta-premium{border-color:rgba(245,158,11,.25)}

/* ── SCENE 2: DEEP DIVE ── */
.deep-grid{display:grid;grid-template-columns:1fr;gap:.6rem}
.deep-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem}
#radarCard{text-align:center}
#radarCard canvas{max-width:100%}
.stats-mini{display:flex;flex-direction:column;gap:.4rem;margin-top:.5rem}
.stat-gauge{display:flex;align-items:center;gap:.5rem;font-size:.68rem}
.stat-gauge-icon{font-size:.85rem;width:18px;text-align:center;flex-shrink:0}
.stat-gauge-label{color:var(--text3);text-transform:capitalize;width:32px;flex-shrink:0;text-align:right;font-size:.62rem}
.stat-gauge-bar-wrap{flex:1;height:6px;background:rgba(255,255,255,.06);border-radius:10px;overflow:hidden}
.stat-gauge-bar{height:100%;border-radius:10px;transition:width .2s cubic-bezier(.22,.61,.36,1);position:relative}
.stat-gauge-bar::after{content:'';position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(to bottom,rgba(255,255,255,.3),transparent);border-radius:10px 10px 0 0}
.stat-gauge-val{color:var(--text);font-weight:700;font-size:.7rem;width:32px;flex-shrink:0}
.stat-pill{font-size:.68rem;color:var(--text2);background:var(--surface2);padding:.2rem .6rem;border-radius:50px}
#shadowCard{font-size:.85rem;line-height:1.5}
#vibeCard{font-size:.85rem}
#compatCard{font-size:.82rem}
.compat-mini{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.4rem}
.compat-ch{font-size:.72rem;background:var(--surface2);padding:.2rem .7rem;border-radius:50px;color:var(--text)}

/* ── SCENE 3: MISSIONS + COLLECTION + CIRCLE ── */
.missions-list{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.2rem}
.mission-item{display:flex;align-items:center;gap:.6rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.7rem 1rem;font-size:.82rem}
.mission-check{font-size:1.2rem;flex-shrink:0}
.mission-reward{font-size:.68rem;color:var(--accent);margin-left:auto}

.collection-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;margin-bottom:1.2rem}
.collection-badge{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.5rem;text-align:center;font-size:.65rem}
.collection-badge.owned{border-color:var(--accent);background:var(--surface2)}
.collection-badge.locked{opacity:.35;position:relative}
.collection-missing{display:block;font-size:.5rem;color:var(--rose);margin-top:.1rem}
.collection-icon{font-size:1.5rem;display:block;margin-bottom:.2rem}

.circle-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.2rem}
.circle-teaser{background:var(--surface);border:1px solid var(--accent);border-radius:var(--radius);padding:.7rem 1rem;display:flex;align-items:center;gap:.7rem;cursor:pointer;transition:all .2s cubic-bezier(.22,.61,.36,1);margin-bottom:.8rem;max-width:320px;width:100%}
.circle-teaser:hover,.circle-teaser:focus-visible{border-color:var(--accent2);background:var(--surface2);transform:translateY(-2px)}
.circle-teaser:active{transform:scale(.96)}
.circle-teaser-icon{font-size:1.6rem;flex-shrink:0}
.circle-teaser-text{flex:1;display:flex;flex-direction:column;gap:.15rem;min-width:0}
.circle-teaser-title{font-size:.78rem;font-weight:700;color:var(--accent)}
.circle-teaser-sub{font-size:.65rem;color:var(--text2);line-height:1.3}
.circle-teaser-arrow{font-size:.8rem;color:var(--text3);flex-shrink:0}
.circle-desc{font-size:.8rem;color:var(--text2);text-align:center;margin-bottom:.8rem;line-height:1.5}
.circle-avatars{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:.8rem;min-height:40px}
.circle-avatar{background:var(--surface2);border:1px solid var(--border);border-radius:50px;padding:.35rem .8rem;font-size:.78rem;display:flex;align-items:center;gap:.3rem;cursor:pointer;transition:all .2s cubic-bezier(.22,.61,.36,1)}
.circle-avatar:hover{transform:translateY(-2px)}
.circle-avatar:active{transform:scale(.96)}
.circle-remove{color:var(--rose);font-weight:700;cursor:pointer;font-size:.85rem}
.circle-actions{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center}
.circle-input{display:block;width:100%;max-width:300px;margin:.4rem auto;background:var(--surface2);border:1px solid var(--border);color:var(--text);padding:.6rem .8rem;border-radius:50px;font-size:.78rem;font-family:var(--font);text-align:center}
.circle-analysis{padding:.8rem;background:var(--surface2);border-radius:var(--radius-sm);margin-top:.8rem;font-size:.82rem;line-height:1.6}

/* ── SCENE 4: PREMIUM ── */
.premium-card{
  background:linear-gradient(135deg,#1a1030,#1a0a20);border:1px solid rgba(245,158,11,.2);
  border-radius:24px;padding:1.8rem 1.2rem;text-align:center;position:relative;overflow:hidden
}
.premium-glow{position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(245,158,11,.06),transparent 60%);pointer-events:none}
.premium-mystery{font-size:3rem;display:block;margin-bottom:.5rem}
.premium-subtitle{font-size:.8rem;color:var(--text2);margin-bottom:1rem;font-style:italic}
.premium-card h3{font-size:1.1rem;margin-bottom:1rem}
.premium-features{list-style:none;text-align:left;margin-bottom:1.2rem;display:flex;flex-direction:column;gap:.5rem}
.premium-features li{font-size:.82rem;color:var(--text2);padding-left:1.5rem;position:relative}
.premium-features li::before{content:'✓';position:absolute;left:0;color:var(--mint);font-weight:700}
.premium-price{display:flex;align-items:baseline;justify-content:center;gap:.3rem;margin-bottom:1rem}
.premium-amount{font-size:2.2rem;font-weight:900;color:var(--accent2)}
.premium-once{font-size:.75rem;color:var(--text3)}
.pricing-grid{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin:.6rem 0}
.btn-small{padding:.45rem .9rem;font-size:.75rem;border-radius:var(--radius-xs);cursor:pointer;border:none;font-family:var(--font);transition:all .2s cubic-bezier(.22,.61,.36,1);text-decoration:none;display:inline-block;text-align:center;font-weight:700}
.btn-small.btn-primary{background:linear-gradient(135deg,var(--accent),#9333ea);color:#fff}
.btn-small.btn-accent{background:linear-gradient(135deg,var(--accent2),#d97706);color:#000}

/* ── SCENE 5: MONETIZATION ── */
.product-grid{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;margin-bottom:.8rem}
.product-card{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.7rem;text-align:center;text-decoration:none;color:var(--text);transition:all .2s cubic-bezier(.22,.61,.36,1);display:block;cursor:pointer}
.product-card:active{transform:scale(.96)}
.product-icon{font-size:1.5rem;margin-bottom:.2rem}
.product-name{font-size:.72rem;font-weight:600;line-height:1.3}
.product-price{font-size:.68rem;color:var(--accent);margin-top:.1rem}
.video-preview{border-radius:var(--radius-sm);overflow:hidden;background:#000;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;margin-bottom:.6rem}
.video-play{position:absolute;width:42px;height:42px;background:rgba(0,0,0,.6);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;transition:transform .2s}
.cpc-list{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.6rem}
.cpc-item{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.6rem .8rem;text-decoration:none;color:var(--text);display:flex;align-items:center;gap:.6rem;transition:all .2s cubic-bezier(.22,.61,.36,1);cursor:pointer}
.cpc-item:active{transform:scale(.98)}
.cpc-icon{font-size:1.1rem}.cpc-info{flex:1}.cpc-title{font-size:.75rem;font-weight:600}.cpc-domain{font-size:.62rem;color:var(--text3)}
.adblock-msg{background:var(--surface);border:1px solid rgba(251,113,133,.15);border-radius:var(--radius-sm);padding:.8rem 1rem;text-align:center;font-size:.78rem;color:var(--text2);line-height:1.4;margin-bottom:.6rem}
.monet-footnote{font-size:.6rem;color:rgba(255,255,255,.15);text-align:center;margin-top:.4rem}

/* ── SCENE 6: SOCIAL ── */
.lb-list{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.8rem}
.lb-row{display:flex;align-items:center;gap:.4rem;padding:.45rem .5rem;background:var(--surface2);border-radius:var(--radius-xs);font-size:.78rem}
.lb-rank{font-weight:800;min-width:24px;font-size:.8rem}.lb-rank.gold{color:var(--gold)}.lb-rank.silver{color:#94a3b8}.lb-rank.bronze{color:#d97706}
.lb-name{flex:1;font-weight:600}.lb-archetype{color:var(--text2);font-size:.66rem}.lb-score{font-weight:700;color:var(--accent)}
.lb-source{font-size:.6rem;text-align:center;margin-bottom:.8rem}
.lb-badge{display:inline-block;padding:.15rem .5rem;border-radius:50px;font-size:.6rem}
.lb-local{background:rgba(255,255,255,.05);color:var(--text3)}
.lb-global{background:rgba(56,189,248,.1);color:var(--sky)}

.trending-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;margin-bottom:.8rem}
.trending-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.5rem;text-align:center;font-size:.6rem}
.trending-icon{font-size:1.4rem;display:block;margin-bottom:.15rem}
.trending-name{font-weight:700;font-size:.65rem}.trending-pct{color:var(--accent2);font-size:.6rem}

.duel-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;text-align:center}
.duel-vs{display:flex;align-items:center;justify-content:center;gap:.8rem;margin-bottom:.5rem}
.duel-side{text-align:center}
.duel-side-icon{font-size:2rem}.duel-side-name{font-size:.75rem;font-weight:700}
.duel-center{font-size:1.2rem;font-weight:900;color:var(--accent)}
.duel-verdict{font-size:.8rem;color:var(--text2);margin-bottom:.5rem}
.duel-btn{padding:.5rem 1.5rem;font-size:.8rem}

/* ── COOKIE BANNER ── */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:70;background:var(--surface);border-top:1px solid var(--border);padding:.6rem 1rem;display:flex;align-items:center;justify-content:center;gap:.8rem;font-size:.68rem;color:var(--text2);flex-wrap:wrap;text-align:center;animation:fadeUp .3s ease-out}

/* ── EMAIL MODAL ── */
.email-overlay{position:fixed;inset:0;z-index:65;background:rgba(0,0,0,.8);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:1rem;animation:fadeUp .3s ease-out}
.email-modal{background:var(--surface);border:1.5px solid var(--accent);border-radius:var(--radius);padding:1.5rem;max-width:350px;width:100%;text-align:center;position:relative}
.email-close{position:absolute;top:.5rem;right:.5rem;color:var(--text2);cursor:pointer;font-size:1.1rem;background:none;border:none}
.email-modal h3{color:var(--accent);margin-bottom:.3rem}
.email-modal p{color:var(--text2);font-size:.8rem;margin-bottom:.8rem}
.email-form{display:flex;flex-direction:column;gap:.5rem}
.email-form input{background:var(--surface2);border:1px solid var(--border);color:var(--text);padding:.7rem 1rem;border-radius:50px;font-size:.85rem;outline:none;font-family:var(--font)}
.email-form input:focus{border-color:var(--accent)}
.email-note{font-size:.6rem;color:var(--text3);margin-top:.5rem}

.scene-footer{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}
.scene-footer-links{text-align:center;margin-top:.3rem;font-size:.6rem;color:var(--text3)}
.footer-link{color:var(--text3);text-decoration:none}
.footer-link:hover{color:var(--accent)}

/* ── COMPARE OVERLAY ── */
.compare-overlay{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.75);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:1rem}
.compare-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;max-width:380px;width:100%;position:relative;animation:fadeUp .3s ease-out}
.compare-close{position:absolute;top:.6rem;right:.6rem;background:none;border:none;color:var(--text2);font-size:1.2rem;cursor:pointer}
.compare-intro{font-size:.82rem;color:var(--text2);text-align:center;margin:.6rem 0 1rem}
.compare-result{margin-top:1rem;text-align:center}
.compare-profiles{display:flex;align-items:center;justify-content:center;gap:.8rem;margin-bottom:.8rem}
.compare-profile{text-align:center}
.compare-score{font-size:2rem;font-weight:900;color:var(--accent)}.compare-vs{font-size:.9rem;font-weight:800;color:var(--accent2)}
.compare-detail{font-size:.82rem;color:var(--text);line-height:1.5;margin-bottom:.8rem}
.compare-share-btn{margin-top:.5rem}
.compare-duo-btn{margin-top:.5rem}

/* ── SHARE DIALOG ── */
.share-dialog{border:none;border-radius:var(--radius);background:var(--surface);color:var(--text);padding:0;max-width:92vw;max-height:92vh}
.share-dialog::backdrop{background:rgba(0,0,0,.75);backdrop-filter:blur(6px)}
.share-dialog-inner{padding:1rem;text-align:center}
.share-dialog-inner img{max-width:100%;max-height:70vh;border-radius:var(--radius-sm);display:block;margin:0 auto}
.share-text{font-size:.75rem;color:var(--text2);background:var(--surface2);padding:.6rem .8rem;border-radius:var(--radius-xs);margin:.6rem 0;text-align:left;white-space:pre-wrap;line-height:1.5;max-height:100px;overflow-y:auto;word-break:break-word}
.share-dialog-actions{display:flex;gap:.5rem;justify-content:center;margin-top:.8rem;flex-wrap:wrap}
.share-format-tabs{display:flex;gap:.3rem;justify-content:center;margin-bottom:.6rem}
.share-tab{background:transparent;border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.4);padding:.35rem .7rem;border-radius:50px;font-size:.65rem;font-family:var(--font);cursor:pointer;transition:all .15s}
.share-tab:hover{color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.15)}
.share-tab.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}

/* ── HISTORY ── */
.history-inner{max-width:400px;width:100%}
.history-inner h2{text-align:center;margin-bottom:1rem;font-size:1.2rem}
.history-list{display:flex;flex-direction:column;gap:.4rem;margin-bottom:.8rem}
.history-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.6rem .8rem;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:all .2s cubic-bezier(.22,.61,.36,1)}
.history-item:active{transform:scale(.98)}.history-item:hover{border-color:var(--accent)}
.history-item-name{font-weight:600;font-size:.85rem}
.history-item-detail{font-size:.7rem;color:var(--text2);display:flex;align-items:center;gap:.3rem}
.history-delete-btn{background:none;border:none;color:var(--rose);cursor:pointer;font-size:.85rem;padding:.2rem .35rem}

/* ── CONFETTI ── */
#confettiCanvas{position:fixed;inset:0;z-index:10;pointer-events:none}

/* ── RESPONSIVE ── */
@media(min-width:560px){
  .result-container{max-width:560px}
  .deep-grid{grid-template-columns:1fr 1fr}
  #radarCard{grid-column:1/-1}
}
@media(min-width:800px){
  .result-container{max-width:640px}
  .deep-grid{grid-template-columns:1fr 1fr 1fr}
  #radarCard{grid-column:1/3}#shadowCard{grid-column:3/4}
}

/* ── MOBILE RESPONSIVE (max-width:480px) ── */
@media(max-width:480px){
  body{overflow-x:hidden}
  /* Landing page — compact for above-the-fold */
  .screen{padding-top:.5rem;min-height:auto}
  .landing-inner{padding:0 .5rem;max-width:100%}
  .logo-text{font-size:1.8rem;margin-bottom:.15rem}
  .tagline{font-size:.8rem;margin-bottom:.25rem}
  .micro-promise{font-size:.6rem;margin-bottom:.3rem}
  /* Hide trust badge pills on mobile */
  .trust-badge-row{display:none}
  .sample-card{max-width:100%;margin:.3rem 0}
  .sample-card-inner{padding:.6rem .6rem .4rem}
  .sample-icon{font-size:1.4rem}
  .sample-name{font-size:.85rem}
  .sample-score{font-size:1.3rem}
  .sample-phrase{font-size:.6rem}
  /* Input fields */
  .input-wrap{max-width:100%}
  .input-wrap input{font-size:16px;padding:.7rem 1rem}
  /* Buttons */
  .btn-primary,.btn-secondary,.btn-accent,.btn-ghost{width:100%;min-height:44px;font-size:.82rem}
  .btn-large{width:100%;max-width:100%;padding:.8rem 1.2rem;font-size:.88rem}
  /* Compact spacing for above the fold */
  .input-group{gap:.4rem}
  .friction-hint{font-size:.58rem;margin-top:.2rem}
  .energy-header{margin-top:.3rem}
  .landing-meta{margin-top:.4rem}
  /* Result cards */
  .result-container{gap:1rem}
  .scene-title{font-size:.7rem;margin-bottom:.5rem}
  .identity-card{padding:1.2rem .8rem 1rem}
  .id-name{font-size:1.8rem}
  .id-score{font-size:2.5rem}
  .id-phrase{font-size:.78rem}
  .id-actions{max-width:100%}
  /* Share dialog */
  .share-dialog{max-width:100vw;max-height:100vh}
  .share-dialog-inner{padding:.6rem}
  .share-dialog-inner img{max-height:50vh}
  .share-text{font-size:.68rem;max-height:80px}
  /* Circle section */
  .circle-section{padding:.8rem}
  .circle-teaser{max-width:100%}
  .circle-avatars{gap:.3rem}
  .circle-avatar{font-size:.7rem;padding:.25rem .5rem}
  /* Premium section */
  .premium-card{padding:1.2rem .8rem}
  .premium-features li{font-size:.72rem}
  .premium-amount{font-size:1.8rem}
  .pricing-grid{flex-direction:column}
  .pricing-grid .btn-small{width:100%}
  /* Trust badges */
  .trust-badge-pill{font-size:.55rem;padding:.2rem .5rem}
  .trust-block{padding:.7rem}
  /* Intention overlay */
  .intention-modal{width:100%;padding:1rem}
  .intention-btn{font-size:.75rem;padding:.6rem .8rem}
  .intent-icon{font-size:1.3rem;width:36px}
  /* Lang flags wrap */
  .lang-flags{flex-wrap:wrap;justify-content:center}
  .lang-flag{font-size:.85rem;padding:.25rem .35rem}
  /* Sample card no overflow */
  .sample-card-inner{overflow:hidden;word-break:break-word}
  /* Identity card fits 320px */
  .identity-card{min-width:0;width:100%}
  .id-rarity-bar{max-width:100%}
  .id-colors{gap:.3rem}
  .id-colors span{width:12px;height:12px}
  /* Deep grid */
  .deep-grid{grid-template-columns:1fr}
  /* Products */
  .product-grid{grid-template-columns:1fr 1fr}
  /* Leaderboard */
  .lb-row{font-size:.7rem}
  /* Prevent horizontal scroll */
  *,*::before,*::after{max-width:100%}
  img,canvas,svg{max-width:100%;height:auto}
  /* Compact cookie banner on small screens */
  @media(max-height:600px){.cookie-banner{font-size:.55rem;padding:.3rem}}
}

/* ── lang-flags wrap on small screens ── */
@media(max-width:360px){
  .lang-flags{gap:.2rem}
  .lang-flag{padding:.2rem .3rem;font-size:.8rem}
}

/* ── ENERGY ORBS ── */
.energy-header{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:.5rem;flex-direction:column}
.energy-orbs-row{display:flex;align-items:center;gap:.35rem}
.energy-label{font-size:.58rem;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.15rem}
.energy-premium{font-size:.72rem;font-weight:700;color:var(--accent2);background:var(--surface2);padding:.2rem .7rem;border-radius:50px}
/* Streak calendar */
.streak-calendar{display:flex;justify-content:center;margin:.5rem 0}.streak-calendar-row{display:flex;gap:.3rem}.streak-day{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.62rem;font-weight:700;transition:all .3s}.streak-day.future{background:rgba(255,255,255,.04);color:rgba(255,255,255,.2)}.streak-day.past{background:rgba(52,211,153,.15);color:#34d399}.streak-day.today{background:var(--accent);color:#fff;box-shadow:0 0 12px var(--accent);transform:scale(1.1)}
/* Founder offer banner */
.founder-offer{display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap;padding:.6rem 1rem;background:linear-gradient(135deg,rgba(192,132,252,.15),rgba(245,158,11,.1));border:1px solid rgba(192,132,252,.2);border-radius:12px;margin:.6rem 0;animation:fadeUp .4s ease-out}.founder-badge{font-size:.6rem;font-weight:800;background:var(--accent2);color:#000;padding:.2rem .6rem;border-radius:50px}.founder-text{font-size:.68rem;color:var(--text);line-height:1.3}.founder-countdown{font-size:.65rem;font-weight:700;color:var(--accent2);background:rgba(0,0,0,.3);padding:.2rem .6rem;border-radius:50px}
.orb{width:14px;height:14px;border-radius:50%;display:inline-block;position:relative;transition:all .3s cubic-bezier(.22,.61,.36,1)}
.orb::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid transparent;transition:all .4s ease}
.orb.active{background:var(--accent);box-shadow:0 0 12px var(--accent),0 0 24px rgba(192,132,252,.44);animation:orbGlow 1.8s ease-in-out infinite}
.orb.active::after{border-color:rgba(192,132,252,.33);animation:orbRing 2s ease-in-out infinite}
.orb.empty{background:rgba(255,255,255,.06);box-shadow:none;transform:scale(.65);animation:none}
.orb.empty::after{border-color:rgba(255,255,255,.04)}
.energy-count{font-size:.68rem;font-weight:700;color:var(--text2);margin-left:.4rem}
.depleted .orb.active{background:var(--rose);box-shadow:0 0 12px var(--rose),0 0 24px rgba(251,113,133,.44);animation:orbUrgent .8s ease-in-out infinite}
@keyframes orbGlow{0%,100%{box-shadow:0 0 12px var(--accent),0 0 24px rgba(192,132,252,.44)}50%{box-shadow:0 0 20px var(--accent),0 0 40px rgba(192,132,252,.55)}}
@keyframes orbRing{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.6);opacity:0}}
@keyframes orbUrgent{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(1.3)}}
@keyframes energyBarFill{0%{width:0%;filter:brightness(1.5)}70%{filter:brightness(1.1)}100%{width:100%;filter:brightness(1)}}

/* ── ENERGY MODAL ── */
.energy-overlay{position:fixed;inset:0;z-index:80;background:rgba(10,6,20,.94);backdrop-filter:blur(16px);display:flex;align-items:center;justify-content:center;padding:1rem}
.energy-modal{background:linear-gradient(135deg,var(--surface),var(--surface2));border:1.5px solid rgba(255,255,255,.08);border-radius:28px;padding:1.8rem 1.5rem;max-width:360px;width:100%;text-align:center;animation:bounceIn .5s cubic-bezier(.34,1.56,.64,1);box-shadow:0 0 60px rgba(192,132,252,.08)}
.energy-modal h3{color:var(--accent);margin-bottom:.3rem;font-size:1.1rem}
.energy-modal .energy-desc{color:var(--text2);font-size:.78rem;margin-bottom:1rem;line-height:1.5}
.energy-bars{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.2rem}
.energy-bar-row{display:flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.02);border-radius:12px;padding:.5rem .6rem}
.energy-bar-label{font-size:.65rem;color:var(--text2);font-weight:600;min-width:55px;text-align:right}
.energy-bar-track{flex:1;height:10px;background:rgba(255,255,255,.05);border-radius:10px;overflow:hidden;position:relative}
.energy-bar-fill{height:100%;border-radius:10px;transition:width 1.2s cubic-bezier(.22,.61,.36,1);position:relative}
.energy-bar-fill::after{content:'';position:absolute;inset:0;border-radius:10px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);background-size:200% 100%;animation:shimmer 2s infinite}
.energy-bar-fill.scans{background:linear-gradient(90deg,var(--accent),var(--accent2))}
.energy-bar-fill.bonus{background:linear-gradient(90deg,#34d399,#10b981)}
.energy-bar-val{font-size:.6rem;color:var(--text3);min-width:32px;text-align:left;font-weight:600}
.energy-options{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.6rem}
.energy-premium-tile{display:block;background:linear-gradient(135deg,var(--accent),#9333ea);border:none;border-radius:16px;padding:1rem;color:#fff;cursor:pointer;text-align:center;transition:all .3s ease;position:relative;overflow:hidden;animation:premiumTilePulse 2.5s ease-in-out infinite;text-decoration:none;width:100%}
.energy-premium-tile::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);transform:translateX(-100%);animation:tileShine 3s ease-in-out infinite}
.energy-premium-tile:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(192,132,252,.4)}
.energy-premium-tile .tile-icon{font-size:1.5rem;display:block;margin-bottom:.2rem}
.energy-premium-tile .tile-title{font-size:.85rem;font-weight:800;display:block}
.energy-premium-tile .tile-sub{font-size:.62rem;opacity:.85;display:block;margin-top:.15rem}
@keyframes premiumTilePulse{0%,100%{box-shadow:0 4px 20px rgba(192,132,252,.2)}50%{box-shadow:0 8px 40px rgba(192,132,252,.4)}}
@keyframes tileShine{0%{transform:translateX(-100%)}50%,100%{transform:translateX(200%)}}
.energy-sub{font-size:.62rem;color:var(--text3);margin-top:.6rem}

/* ── TRAIT REVEAL OVERLAY ── */
.trait-reveal-overlay{position:fixed;inset:0;z-index:55;background:rgba(10,6,20,.92);display:flex;align-items:center;justify-content:center;flex-direction:column}
.trait-card{text-align:center;animation:fadeUp .4s ease-out}
.trait-icon{font-size:3rem;margin-bottom:.3rem}
.trait-label{font-size:.8rem;color:var(--text3);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.4rem}
.trait-bar-wrap{width:200px;height:8px;background:rgba(255,255,255,.06);border-radius:10px;margin:0 auto .3rem;overflow:hidden}
.trait-bar{height:100%;border-radius:10px;transition:width .05s linear}
.trait-val{font-size:1.8rem;font-weight:900;color:var(--text)}

/* ── THRESHOLD TOAST ── */
.threshold-toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);z-index:70;display:flex;align-items:center;gap:.5rem;background:var(--surface);border:2px solid var(--accent2);border-radius:50px;padding:.8rem 1.8rem;animation:bounceIn .5s cubic-bezier(.34,1.56,.64,1);font-size:1.1rem;font-weight:800;color:var(--accent2);pointer-events:none}
.threshold-text{color:var(--text)}

/* ── ECLIPSE BANNER ── */
.eclipse-banner{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:30;border-radius:50px;padding:.5rem 1.2rem;animation:fadeUp .3s ease-out;cursor:pointer;pointer-events:auto;max-width:90vw}
.eclipse-active{background:linear-gradient(135deg,#6b21a8,#9333ea);color:#fff;font-size:.78rem;font-weight:700;text-align:center;padding:.5rem 1rem;border-radius:50px;cursor:pointer;transition:transform .1s}
.eclipse-active:active{transform:scale(.96)}
.eclipse-countdown{background:rgba(107,33,168,.3);color:rgba(255,255,255,.6);font-size:.72rem;text-align:center;padding:.35rem .8rem;border-radius:50px;border:1px solid rgba(107,33,168,.2)}
.eclipse-captured{background:linear-gradient(135deg,#22c55e,#10b981);color:#000;font-size:.78rem;font-weight:700;text-align:center;padding:.5rem 1rem;border-radius:50px}

/* ── SHADOW PAYWALL ── */
.shadow-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;text-align:center}
.shadow-card.unlocked{border-color:rgba(180,83,9,.4);background:linear-gradient(135deg,#1a1030,#100a1a)}
.shadow-badge{display:inline-block;background:var(--surface2);color:var(--rose);font-size:.65rem;font-weight:700;padding:.2rem .7rem;border-radius:50px;letter-spacing:.05em;margin-bottom:.8rem}
.shadow-icon,.shadow-icon-unlocked{font-size:2.5rem;margin-bottom:.3rem}
.shadow-name,.shadow-name-unlocked{font-size:1.2rem;font-weight:700;color:var(--rose);margin-bottom:.5rem}
.shadow-score,.shadow-score-unlocked{font-size:.9rem;color:var(--text2);margin-bottom:.4rem}
.shadow-desc,.shadow-desc-unlocked{font-size:.8rem;color:var(--text2);line-height:1.4;margin-bottom:.8rem;padding:0 .5rem}
.shadow-dual,.shadow-dual-score{display:flex;justify-content:center;gap:.5rem;font-size:.75rem;color:var(--text3)}
.shadow-mystery{padding:1.5rem 0}
.shadow-blur-icon{font-size:2.5rem;opacity:.25;filter:blur(4px);margin-bottom:.4rem}
.shadow-tease{font-size:.85rem;color:var(--text3);line-height:1.5;margin-bottom:1rem}
.shadow-hint{font-size:.62rem;color:var(--text3);margin-top:.6rem}

/* ── NAME SPIRAL ── */
.spiral-chips{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center}
.spiral-chip{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.5rem .8rem;cursor:pointer;text-align:center;font-size:.68rem;color:var(--text);animation:fadeUpStagger .4s ease-out both;min-width:80px}
.spiral-chip:hover,.spiral-chip:focus-visible{border-color:var(--accent);background:var(--surface)}
.spiral-chip:active{transform:scale(.95)}
.spiral-result{display:block;font-weight:700;color:var(--accent);margin-top:.15rem;font-size:.8rem}

/* ── TRAIT CROWNS ── */
.crowns-grid{display:grid;grid-template-columns:1fr 1fr;gap:.35rem}
.crown-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xs);padding:.4rem .6rem;font-size:.7rem;display:flex;align-items:center;gap:.3rem}
.crown-item.crown-mine{border-color:var(--accent);background:var(--surface2)}
.crown-emoji{font-size:1rem;flex-shrink:0}
.crown-trait{text-transform:capitalize;color:var(--text3);min-width:55px}
.crown-holder{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crown-score{color:var(--accent);font-weight:700;flex-shrink:0}

/* ── FRACTURED / DECAY / GOLDEN / ASCENDED ── */
.identity-card.fractured{filter:saturate(.4) brightness(.8);position:relative}
.identity-card.fractured::after{content:'';position:absolute;inset:0;border-radius:24px;background:repeating-linear-gradient(45deg,transparent,transparent 3px,rgba(255,255,255,.02) 3px,rgba(255,255,255,.02) 6px);pointer-events:none}
.identity-card.golden{border-color:rgba(251,191,36,.4);box-shadow:0 0 30px rgba(251,191,36,.12)}
.identity-card.ascended{background:linear-gradient(135deg,#1a1030,#0a0614);border-color:var(--accent);box-shadow:0 0 40px rgba(192,132,252,.15);animation:ascendedShimmer 3s ease-in-out infinite}
@keyframes ascendedShimmer{0%,100%{box-shadow:0 0 25px rgba(192,132,252,.12)}50%{box-shadow:0 0 50px rgba(192,132,252,.25)}}

/* ── SCENE ANIMATION EXTENSIONS ── */
.scene:nth-child(9){animation-delay:.85s}
.scene:nth-child(10){animation-delay:.95s}
.scene:nth-child(11){animation-delay:1.05s}

/* ── A11Y ── */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── WEEKLY RECAP OVERLAY ── */
.weekly-overlay{position:fixed;inset:0;z-index:58;background:rgba(0,0,0,.85);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:1rem}
.weekly-modal{background:var(--surface);border:1.5px solid var(--accent);border-radius:var(--radius);padding:1.5rem;max-width:380px;width:100%;position:relative;animation:fadeUp .3s ease-out}
.weekly-modal h3{color:var(--accent);margin-bottom:.2rem;text-align:center}
.weekly-subtitle{font-size:.72rem;color:var(--text3);text-align:center;margin-bottom:1rem}
.weekly-stats{display:flex;gap:.6rem;justify-content:center;margin-bottom:.5rem}
.weekly-stat{text-align:center;flex:1}
.weekly-stat-val{display:block;font-size:1.8rem;font-weight:900;color:var(--accent);line-height:1}
.weekly-stat-label{display:block;font-size:.6rem;color:var(--text3);text-transform:uppercase;letter-spacing:.08em}
.weekly-tip{font-size:.62rem;color:var(--text3);text-align:center;margin-top:.8rem;line-height:1.4}

/* ── SCIENCE MODE ── */
body.mode-science{--bg:#0f1117;--surface:#1a1d27;--surface2:#242834;--text:#e4e6f0;--text2:#8a8fa0;--text3:#5a5f70}
body.mode-science .logo-text{background:linear-gradient(135deg,#60a5fa,#818cf8,#c084fc);-webkit-background-clip:text;background-clip:text}
body.mode-science .tagline{color:var(--text2);font-weight:400}
body.mode-science .micro-promise{font-style:normal}
body.mode-science .id-phrase{font-style:normal;font-weight:500}
body.mode-science .sample-phrase{font-style:normal}
body.mode-science .blob{opacity:.12}
body.mode-science .btn-large.btn-primary{box-shadow:0 0 20px rgba(96,165,250,.15);animation:none}
body.mode-science .btn-large.btn-primary::before{display:none}
body.mode-science #scienceToggle{color:var(--accent);font-weight:700}
body.mode-science :focus-visible{outline-color:#60a5fa}
body.mode-science .science-banner{display:flex!important}
.science-banner{position:fixed;top:0;left:0;right:0;z-index:50;background:linear-gradient(135deg,rgba(96,165,250,.9),rgba(129,140,248,.9));color:#fff;text-align:center;padding:.35rem;font-size:.68rem;font-weight:600}

/* ── REFERRAL BADGE ── */
.referral-badge-pill{display:inline-block;background:linear-gradient(135deg,rgba(192,132,252,.15),rgba(245,158,11,.1));border:1px solid rgba(192,132,252,.2);border-radius:50px;padding:.2rem .7rem;font-size:.68rem;color:var(--accent)}

/* ── TIMELINE ── */
.timeline-placeholder{text-align:center;padding:2rem;opacity:.5}
.timeline-track{position:relative;margin-bottom:.5rem}
.timeline-line{position:absolute;left:50%;top:30px;bottom:30px;width:2px;background:rgba(255,255,255,.06);transform:translateX(-50%)}
.timeline-dot{position:absolute;left:50%;width:10px;height:10px;border-radius:50%;transform:translateX(-50%)}
.timeline-dot.past{top:0;background:#6b7280;box-shadow:0 0 8px #6b7280}
.timeline-dot.present{top:50%;background:var(--accent);box-shadow:0 0 12px var(--accent);width:14px;height:14px;transform:translate(-50%,-50%)}
.timeline-dot.future{bottom:0;background:#34d399;box-shadow:0 0 8px #34d399}
.timeline-cards{display:flex;flex-direction:column;gap:.6rem;position:relative;z-index:1}
.timeline-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.8rem;text-align:center;position:relative;transition:transform .2s}
.timeline-card:hover{transform:scale(1.02)}
.timeline-era{display:inline-block;font-size:.58rem;font-weight:800;letter-spacing:.08em;padding:.15rem .7rem;border-radius:50px;margin-bottom:.4rem;border:1px solid}
.timeline-icon{font-size:2.5rem;display:block;margin-bottom:.2rem}
.timeline-arch-name{font-size:.95rem;font-weight:700;margin-bottom:.2rem}
.timeline-score{font-size:1.8rem;font-weight:900;color:var(--text)}
.timeline-score-label{font-size:.55rem;color:var(--text3);text-transform:uppercase;letter-spacing:.06em}
.timeline-rarity{display:inline-block;font-size:.6rem;font-weight:700;color:var(--accent2);background:rgba(245,158,11,.1);padding:.1rem .5rem;border-radius:50px;margin:.3rem 0}
.timeline-minibars{display:flex;flex-direction:column;gap:.2rem;margin-top:.4rem;padding:0 .5rem}
.timeline-minibar{display:flex;align-items:center;gap:.3rem;font-size:.6rem}
.tmb-label{color:var(--text3);width:28px;text-align:right;flex-shrink:0}
.tmb-track{flex:1;height:4px;background:rgba(255,255,255,.05);border-radius:4px;overflow:hidden}
.tmb-fill{height:100%;border-radius:4px}
.tmb-val{color:var(--text);font-weight:600;width:22px;flex-shrink:0;text-align:right}
.timeline-narrative{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.8rem 1rem;display:flex;align-items:center;gap:.7rem}
.tn-icon{font-size:1.8rem;flex-shrink:0}
.tn-title{font-size:.78rem;font-weight:700;color:var(--text)}
.tn-desc{font-size:.68rem;color:var(--text2);line-height:1.4;margin-top:.1rem}

/* ── COMPATIBILITY MATRIX ── */
.circle-matrix{margin-top:.8rem;overflow-x:auto}
.compat-matrix{width:100%;border-collapse:collapse;font-size:.62rem}
.compat-matrix td{padding:.3rem .25rem;text-align:center;border:1px solid rgba(255,255,255,.04)}
.matrix-header{font-weight:700;color:var(--text2);font-size:.58rem;white-space:nowrap}
.matrix-cell{font-weight:700;min-width:28px}
.matrix-self{color:var(--text3);opacity:.3}
.matrix-high{color:var(--mint);background:rgba(52,211,153,.08)}
.matrix-mid{color:var(--accent2);background:rgba(245,158,11,.06)}
.matrix-low{color:var(--text3);background:rgba(255,255,255,.02)}

/* ── REPLAY INSIGHT ── */
.replay-insight{display:flex;align-items:center;gap:.6rem;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.7rem .8rem;margin:.6rem 0}
.replay-icon{font-size:1.6rem;flex-shrink:0}

/* ── MIRROR TEAMS B2B ── */
.teams-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;text-align:center;margin-top:1rem}
.teams-badge{display:inline-block;font-size:.6rem;font-weight:700;background:rgba(56,189,248,.1);color:var(--sky);padding:.15rem .6rem;border-radius:50px;margin-bottom:.5rem}
.teams-features{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin:.6rem 0;text-align:left}
.teams-feature{font-size:.62rem;color:var(--text2);padding:.3rem .5rem;background:var(--surface2);border-radius:var(--radius-xs);display:flex;align-items:center;gap:.3rem}

/* ── PUBLIC API ── */
.api-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem}
.api-endpoint{font-family:monospace;font-size:.7rem;background:var(--surface2);padding:.4rem .6rem;border-radius:var(--radius-xs);margin:.3rem 0;display:flex;align-items:center;gap:.5rem}
.api-method{font-weight:700;font-size:.6rem;padding:.1rem .3rem;border-radius:3px}
.api-method.get{background:rgba(52,211,153,.15);color:var(--mint)}
.api-method.post{background:rgba(192,132,252,.15);color:var(--accent)}

/* ═══════════════════════════════════════
   ANIMATIONS VISIBLES CONTINUES
   ═══════════════════════════════════════ */

/* ── BOUTON PRINCIPAL GLOW PERMANENT ── */
.btn-large.btn-primary{animation:btnPulse 2s ease-in-out infinite;box-shadow:0 0 20px rgba(192,132,252,.3)}
@keyframes btnPulse{0%,100%{box-shadow:0 0 12px rgba(192,132,252,.3),0 0 40px rgba(147,51,234,.1)}50%{box-shadow:0 0 30px rgba(192,132,252,.6),0 0 80px rgba(147,51,234,.3)}}

/* ── CARD BORDER GLOW CONTINUELLE ── */
.identity-card{border-color:var(--accent)!important;animation:cardGlow 3s ease-in-out infinite}
@keyframes cardGlow{0%,100%{box-shadow:0 0 15px rgba(192,132,252,.08),inset 0 0 15px rgba(192,132,252,.02)}50%{box-shadow:0 0 35px rgba(192,132,252,.18),inset 0 0 25px rgba(192,132,252,.04)}}

/* ── SAMPLE CARD FLOAT + GLOW ── */
.sample-card-inner{animation:sampleFloatGlow 4s ease-in-out infinite;border-color:var(--accent)!important}
@keyframes sampleFloatGlow{0%,100%{transform:translateY(0);box-shadow:0 0 10px rgba(192,132,252,.08)}50%{transform:translateY(-6px);box-shadow:0 8px 30px rgba(192,132,252,.18)}}

/* ── RARITY BAR SHIMMER FILL ── */
.id-rarity-fill{background-size:200% 100%!important;animation:rarityShimmer 2s linear infinite}
@keyframes rarityShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}


/* ── SCORE NUMBER GLOW ── */
.id-score{filter:drop-shadow(0 0 8px var(--accent));animation:scoreGlow 2.5s ease-in-out infinite}
@keyframes scoreGlow{0%,100%{filter:drop-shadow(0 0 6px var(--accent))}50%{filter:drop-shadow(0 0 20px var(--accent)),drop-shadow(0 0 35px rgba(192,132,252,.4))}}

/* ── LOGO TEXT SHIMMER ── */
.logo-text{animation:logoShimmer 4s ease-in-out infinite}
@keyframes logoShimmer{0%,100%{background-position:0% 50%;filter:drop-shadow(0 0 20px rgba(192,132,252,.2))}50%{background-position:100% 50%;filter:drop-shadow(0 0 35px rgba(245,158,11,.35))}}

/* ── PREMIUM CARD BORDER PULSE ── */
.premium-card{border-color:rgba(245,158,11,.2)!important;animation:premGlow 3s ease-in-out infinite}
@keyframes premGlow{0%,100%{box-shadow:0 0 10px rgba(245,158,11,.05)}50%{box-shadow:0 0 30px rgba(245,158,11,.15)}}

/* ── POST CTA PERMANENT GLOW ── */
.post-cta-share{animation:postCtaGlow 2.5s ease-in-out infinite}
@keyframes postCtaGlow{0%,100%{box-shadow:0 0 8px rgba(192,132,252,.08)}50%{box-shadow:0 0 20px rgba(192,132,252,.2)}}
.post-cta-compare{animation:postCtaGlowB 2.5s ease-in-out infinite .5s}
@keyframes postCtaGlowB{0%,100%{box-shadow:0 0 8px rgba(56,189,248,.08)}50%{box-shadow:0 0 20px rgba(56,189,248,.2)}}
.post-cta-premium{animation:postCtaGlowC 2.5s ease-in-out infinite 1s}
@keyframes postCtaGlowC{0%,100%{box-shadow:0 0 8px rgba(245,158,11,.08)}50%{box-shadow:0 0 20px rgba(245,158,11,.2)}}

/* ── CIRCLE TEASER GLOW ── */
.circle-teaser{border-color:var(--accent)!important;animation:circleTeaseGlow 3s ease-in-out infinite}
@keyframes circleTeaseGlow{0%,100%{box-shadow:0 0 8px rgba(192,132,252,.06)}50%{box-shadow:0 0 22px rgba(192,132,252,.15)}}

/* ── DUEL CENTER CLASH ── */
.duel-center{animation:duelClash 1.5s ease-in-out infinite}
@keyframes duelClash{0%,100%{transform:scale(1)}50%{transform:scale(1.25);filter:drop-shadow(0 0 8px var(--accent))}}

/* ── ECLIPSE BANNER GLOW ── */
.eclipse-active{animation:eclipseGlow 1.5s ease-in-out infinite}
@keyframes eclipseGlow{0%,100%{box-shadow:0 0 10px rgba(147,51,234,.3)}50%{box-shadow:0 0 30px rgba(147,51,234,.6),0 0 60px rgba(107,33,168,.3)}}

/* ── TIMELINE PRESENT DOT GLOW ── */
.timeline-dot.present{animation:timelinePulse 1.5s ease-in-out infinite}
@keyframes timelinePulse{0%,100%{box-shadow:0 0 12px var(--accent)}50%{box-shadow:0 0 28px var(--accent),0 0 45px var(--accent)}}

/* ── SHADOW CARD MYSTERY PULSE ── */
.shadow-card.locked{animation:shadowMystery 3s ease-in-out infinite}
@keyframes shadowMystery{0%,100%{box-shadow:0 0 0 rgba(107,33,168,0)}50%{box-shadow:0 0 30px rgba(107,33,168,.12)}}

/* ── ID COLORS PULSE ── */
.id-colors span{animation:colorPulse 2s ease-in-out infinite}
.id-colors span:nth-child(1){animation-delay:0s}.id-colors span:nth-child(2){animation-delay:.4s}.id-colors span:nth-child(3){animation-delay:.8s}
@keyframes colorPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.7}}

/* ── TRENDING PULSE ── */
.trending-pct{animation:trendPulse 2s ease-in-out infinite}
@keyframes trendPulse{0%,100%{opacity:.6}50%{opacity:1}}

/* ── SUBSCRIPTION OFFER GLOW ── */
.subscription-offer{animation:subGlow 3s ease-in-out infinite}
@keyframes subGlow{0%,100%{box-shadow:0 0 8px rgba(52,211,153,.06)}50%{box-shadow:0 0 20px rgba(52,211,153,.15)}}

/* ── CARD HOVER LIFT ── */
.identity-card,.premium-card,.shadow-card,.timeline-card,.deep-card,.circle-section,
.duel-card,.history-item,.product-card,.cpc-item,.compare-card,.weekly-modal,
.collection-badge.owned,.mission-item,.trending-item,.lb-row,.circle-avatar,
.sample-card-inner{transition:all .2s cubic-bezier(.22,.61,.36,1)}
.identity-card:hover,.timeline-card:hover,.duel-card:hover,.compare-card:hover,
.collection-badge.owned:hover,.deep-card:hover,.circle-section:hover,.mission-item:hover,.trending-item:hover,
.lb-row:hover,.history-item:hover,.product-card:hover,.cpc-item:hover,
.sample-card-inner:hover{transform:translateY(-2px);box-shadow:0 4px 20px rgba(0,0,0,.2);border-color:rgba(192,132,252,.15)}
.product-card:active,.cpc-item:active,.trending-item:active,.history-item:active,
.circle-avatar:active,.mission-item:active{transform:scale(.96)}

/* ── POST CTA HOVER ENHANCED ── */
.post-cta:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.15)}
.post-cta:active{transform:scale(.96)}
.post-cta-share:hover{border-color:var(--accent);box-shadow:0 0 20px rgba(192,132,252,.15)}
.post-cta-compare:hover{border-color:var(--sky);box-shadow:0 0 20px rgba(56,189,248,.15)}
.post-cta-premium:hover{border-color:var(--accent2);box-shadow:0 0 20px rgba(245,158,11,.15)}

/* ── SCORE COUNTER POP ── */
@keyframes scorePopIn{0%{transform:scale(.3);opacity:0;filter:blur(8px)}60%{transform:scale(1.08)}80%{transform:scale(.96)}100%{transform:scale(1);opacity:1;filter:blur(0)}}
.id-score{animation:scorePopIn .6s cubic-bezier(.34,1.56,.64,1) .3s both, scoreGlow 2.5s ease-in-out 1.2s infinite}
.id-icon{animation:bounceInCard .7s cubic-bezier(.22,.61,.36,1) .1s both,iconFloat 3s ease-in-out .8s infinite}

/* ── PROGRESS BAR PULSE ── */
.id-rarity-fill::after{content:'';position:absolute;right:-1px;top:-2px;width:12px;height:12px;border-radius:50%;background:inherit;box-shadow:0 0 12px currentColor;animation:rarityDotPulse 1.5s ease-in-out infinite}
@keyframes rarityDotPulse{0%,100%{box-shadow:0 0 8px currentColor}50%{box-shadow:0 0 20px currentColor,0 0 32px currentColor}}

/* ── STAT GAUGE FILL ANIMATION ── */
.stat-gauge-bar::after{content:'';position:absolute;top:-1px;right:-3px;width:8px;height:8px;border-radius:50%;background:inherit;box-shadow:0 0 6px currentColor;opacity:0;animation:statDotReveal .4s ease-out forwards}
@keyframes statDotReveal{to{opacity:1}}
.stat-gauge-bar[style*="width:100"]::after{box-shadow:0 0 14px currentColor}

/* ── CHAPTER PROGRESS BAR ── */
.chapter-bar{transition:width .4s cubic-bezier(.22,.61,.36,1);position:relative}
.chapter-bar::after{content:'';position:absolute;top:-1px;right:-2px;width:6px;height:5px;border-radius:2px;background:rgba(255,255,255,.6);box-shadow:0 0 6px var(--accent)}




/* ── MISSION CHECK BOUNCE ── */
.mission-item{transition:all .2s cubic-bezier(.22,.61,.36,1)}
.mission-check{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.mission-item:hover .mission-check{transform:scale(1.2)}

/* ── COLLECTION BADGE REVEAL ── */
.collection-badge.owned{animation:badgeReveal .5s cubic-bezier(.34,1.56,.64,1) both}
@keyframes badgeReveal{0%{transform:scale(0) rotate(-10deg);opacity:0}80%{transform:scale(1.1) rotate(2deg)}100%{transform:scale(1) rotate(0);opacity:1}}

/* ── LEADERBOARD ROW SLIDE ── */
.lb-row{animation:rowSlide .4s cubic-bezier(.22,.61,.36,1) both}
.lb-row:nth-child(1){animation-delay:.05s}.lb-row:nth-child(2){animation-delay:.1s}.lb-row:nth-child(3){animation-delay:.15s}
.lb-row:nth-child(4){animation-delay:.2s}.lb-row:nth-child(5){animation-delay:.25s}.lb-row:nth-child(6){animation-delay:.3s}
.lb-row:nth-child(7){animation-delay:.35s}.lb-row:nth-child(8){animation-delay:.4s}
@keyframes rowSlide{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}

/* ── DUEL CARD GLOW ── */
.duel-card{transition:all .2s cubic-bezier(.22,.61,.36,1)}
.duel-card:hover{border-color:rgba(192,132,252,.3);box-shadow:0 0 25px rgba(192,132,252,.08)}

/* ── TIMELINE DOT PULSE ── */
.timeline-dot.present{animation:timelinePulse 2s ease-in-out infinite}
@keyframes timelinePulse{0%,100%{box-shadow:0 0 12px var(--accent)}50%{box-shadow:0 0 28px var(--accent),0 0 45px var(--accent)}}

/* ── TIMELINE CARD ENTRANCE ── */
.timeline-card{animation:timelineCardIn .5s cubic-bezier(.22,.61,.36,1) both}
.timeline-card:nth-child(1){animation-delay:.1s}
.timeline-card:nth-child(2){animation-delay:.25s}
.timeline-card:nth-child(3){animation-delay:.4s}
@keyframes timelineCardIn{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ── MATRIX CELL HOVER ── */
.matrix-cell{transition:all .2s cubic-bezier(.22,.61,.36,1)}
.matrix-cell:not(.matrix-self):hover{transform:scale(1.3);font-size:.82rem;z-index:1;position:relative}

/* ── TRENDING PULSE ── */
.trending-pct{animation:trendPulse 2.5s ease-in-out infinite}
@keyframes trendPulse{0%,100%{opacity:.7}50%{opacity:1}}

/* ── SAMPLE CARD SUBTLE FLOAT ── */
.sample-card{animation:sampleFloat 4s ease-in-out infinite}
@keyframes sampleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* ── REFERRAL BANNER SLIDE ── */
.referral-banner{animation:refSlide .5s cubic-bezier(.22,.61,.36,1) both}
@keyframes refSlide{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}

/* ── TRUST STEPS ENTRANCE ── */
.trust-step{animation:trustFade .4s ease-out both}
.trust-step:nth-child(1){animation-delay:.2s}
.trust-step:nth-child(2){animation-delay:.35s}
.trust-step:nth-child(3){animation-delay:.5s}
@keyframes trustFade{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}

/* ── STRONG TAP FEEDBACK ── */
input,button,.product-card,.cpc-item,.history-item,.circle-avatar,.post-cta,
.collection-badge,.trending-item,.sample-card-inner,.mission-item{-webkit-tap-highlight-color:transparent}
@media(hover:hover){
  .btn-primary:hover,.btn-secondary:hover,.btn-accent:hover,.btn-ghost:hover,
  .btn-large:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,.15)}
};

/* ── ECLIPSE ACTIVE GLOW ── */
.eclipse-active{animation:eclipseGlow 2s ease-in-out infinite}
@keyframes eclipseGlow{0%,100%{box-shadow:0 0 10px rgba(147,51,234,.3)}50%{box-shadow:0 0 30px rgba(147,51,234,.6),0 0 60px rgba(107,33,168,.3)}}

/* ── SPIRAL CHIP FLOAT ── */
.spiral-chip{transition:all .2s cubic-bezier(.22,.61,.36,1)}
.spiral-chip:hover{transform:translateY(-3px) scale(1.04);border-color:var(--accent);box-shadow:0 6px 20px rgba(192,132,252,.12)}

/* ── CROWN ITEM HOVER ── */
.crown-item{transition:all .2s cubic-bezier(.22,.61,.36,1)}
.crown-item:hover{transform:scale(1.03)}
.crown-item.crown-mine:hover{border-color:var(--accent2);box-shadow:0 0 16px rgba(245,158,11,.15)}

/* ── SHADOW CARD MYSTERY ── */
.shadow-card.locked{animation:shadowMystery 3s ease-in-out infinite}
@keyframes shadowMystery{0%,100%{box-shadow:0 0 0 rgba(107,33,168,0)}50%{box-shadow:0 0 30px rgba(107,33,168,.08)}}

/* ── REPLAY INSIGHT SLIDE ── */
.replay-insight{animation:replaySlide .5s cubic-bezier(.22,.61,.36,1) both}
@keyframes replaySlide{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}

/* ── WEEKLY STATS COUNTER ── */
.weekly-stat-val{animation:statBounce .5s cubic-bezier(.34,1.56,.64,1) both}
@keyframes statBounce{0%{transform:scale(0);opacity:0}70%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}

/* ── COMPARE RESULT BOUNCE ── */
.compare-result{animation:bounceInCard .5s cubic-bezier(.34,1.56,.64,1) both}
.compare-score{animation:scorePopIn .6s cubic-bezier(.34,1.56,.64,1) .2s both}

/* ── PRODUCT CARD HOVER ── */
.product-card{position:relative;overflow:hidden}
.product-card::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.04),transparent 70%);opacity:0;transition:opacity .3s}
.product-card:hover::after{opacity:1}
.product-icon{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.product-card:hover .product-icon{transform:scale(1.2)}

/* ── PREMIUM CARD SHAKE ON HOVER ── */
.premium-card{transition:all .2s cubic-bezier(.22,.61,.36,1)}
.premium-card:hover{transform:scale(1.01);border-color:rgba(245,158,11,.3)}

/* ── IDENTITY CARD COLOR PULSE ── */
.id-colors span{transition:all .2s cubic-bezier(.22,.61,.36,1);animation:colorPulse 3s ease-in-out infinite}
.id-colors span:nth-child(1){animation-delay:0s}.id-colors span:nth-child(2){animation-delay:.5s}.id-colors span:nth-child(3){animation-delay:1s}
@keyframes colorPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.8}}

/* ── OFF z-reduced motion override ── */
@media(prefers-reduced-motion:reduce){
  .identity-card,.timeline-card,.product-card,.cpc-item,.collection-badge.owned,
  .trending-item,.mission-item,.lb-row,.history-item,.post-cta,.sample-card,
  .spiral-chip,.crown-item,.duel-card{animation:none!important;transition:none!important;transform:none!important}
  .id-rarity-fill{transition:none!important}
}

/* ── ONBOARDING OVERLAY ── */
.onboarding-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.7);backdrop-filter:blur(3px)}
.onboarding-spotlight{position:fixed;z-index:201;border-radius:12px;box-shadow:0 0 0 9999px rgba(0,0,0,.7),0 0 30px rgba(192,132,252,.25) inset;pointer-events:none;animation:spotlightPulse 2s ease-in-out infinite}
@keyframes spotlightPulse{0%,100%{box-shadow:0 0 0 9999px rgba(0,0,0,.7),0 0 20px rgba(192,132,252,.2) inset}50%{box-shadow:0 0 0 9999px rgba(0,0,0,.7),0 0 40px rgba(192,132,252,.35) inset}}
.onboarding-tooltip{position:fixed;z-index:202;background:var(--surface);border:1.5px solid var(--accent);border-radius:var(--radius);padding:1.2rem 1rem;max-width:320px;animation:fadeUp .4s cubic-bezier(.22,.61,.36,1)}
.onb-step{font-size:.58rem;color:var(--accent);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.3rem}
.onboarding-tooltip h3{font-size:.9rem;margin-bottom:.3rem;color:var(--text)}
.onboarding-tooltip p{font-size:.72rem;color:var(--text2);line-height:1.5;margin-bottom:.8rem}
.onb-actions{display:flex;gap:.4rem;justify-content:flex-end}

/* ── SUBSCRIPTION OFFER ── */
.subscription-offer{background:linear-gradient(135deg,rgba(52,211,153,.08),rgba(192,132,252,.06));border:1px solid rgba(52,211,153,.2);border-radius:var(--radius-sm);padding:.8rem 1rem;margin-top:.5rem;text-align:center}
.sub-badge{display:inline-block;font-size:.55rem;font-weight:800;background:rgba(52,211,153,.2);color:var(--mint);padding:.1rem .5rem;border-radius:50px;letter-spacing:.06em;margin-bottom:.3rem}
.sub-title{font-size:.85rem;font-weight:700;margin-bottom:.15rem}
.sub-desc{font-size:.65rem;color:var(--text2);line-height:1.4;margin-bottom:.2rem}

/* ── ANIMATION KEYFRAMES ── */
@keyframes wowReveal{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.1);opacity:1}100%{transform:scale(1);opacity:1}}
[class*="animation"],.orb,.blob,.landing-particle,.logo-text,.sample-card,.btn-large,.explorer-toggle,.identity-card,.id-icon,.id-score,.id-rarity-fill,.post-cta,.premium-card,.circle-teaser,.shadow-card,.loading-dots span,.scan-orb-ring,.scan-orb-core,.skeleton,.subscription-offer,.timeline-dot,.duel-center{will-change:transform,opacity}
[class*="shimmer"],[class*="Glow"],[class*="glow"],.energy-premium-tile,.energy-bar-fill,.id-score,.logo-text{will-change:background-position,box-shadow}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 5px var(--accent),0 0 20px var(--accent)33}50%{box-shadow:0 0 15px var(--accent),0 0 50px var(--accent)55}}
@keyframes slideUpFade{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes sparkle{0%,100%{filter:brightness(1)}50%{filter:brightness(1.3) saturate(1.5)}}
@keyframes premiumSlideIn{0%{opacity:0;transform:translateY(40px) scale(.95)}60%{opacity:1;transform:translateY(-10px) scale(1.02)}100%{opacity:1;transform:translateY(0) scale(1)}}
.wow-reveal{animation:wowReveal .8s cubic-bezier(.22,.61,.36,1) both}
.shimmer-bg{background:linear-gradient(90deg,var(--surface),var(--surface2) 50%,var(--surface) 100%);background-size:200% 100%;animation:shimmer 2s ease-in-out infinite}
.pulse-glow{animation:pulseGlow 2s ease-in-out infinite}
.slide-up{animation:slideUpFade .5s ease-out both}
.slide-up-d1{animation:slideUpFade .5s ease-out .1s both}
.slide-up-d2{animation:slideUpFade .5s ease-out .2s both}
.slide-up-d3{animation:slideUpFade .5s ease-out .3s both}
.premium-slide{animation:premiumSlideIn .7s cubic-bezier(.34,1.56,.64,1) 1.5s both}
.sparkle-effect{animation:sparkle .6s ease-in-out}
#identityCardWrapper:not(.revealed) .identity-card > *{opacity:0;transform:translateY(20px);transition:all .4s ease-out}
#identityCardWrapper.revealed .identity-card > *{animation:slideUpFade .5s ease-out both}
#identityCardWrapper.revealed .id-icon{animation-delay:0s}
#identityCardWrapper.revealed .id-name{animation-delay:.1s}
#identityCardWrapper.revealed .id-role{animation-delay:.2s}
#identityCardWrapper.revealed .id-score-wrap{animation-delay:.3s}
#identityCardWrapper.revealed .id-phrase{animation-delay:.4s}
#identityCardWrapper.revealed .post-result-ctas{animation-delay:.5s}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 10px rgba(192,132,252,.2)}50%{box-shadow:0 0 35px rgba(192,132,252,.5),0 0 60px rgba(147,51,234,.25)}}
@keyframes slideUpFade{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ── SHARE TOAST ── */
.share-toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;padding:.6rem 1.2rem;border-radius:50px;font-size:.75rem;font-weight:600;z-index:100;animation:slideUpFade .3s ease-out,slideUpFade .3s ease-out 2.5s reverse;pointer-events:none;white-space:nowrap}

/* ── PREMIUM CARD STYLES ── */
.premium-locked-teaser{
  position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:1.5rem 1rem;text-align:center;
  filter:blur(3px);user-select:none;pointer-events:none
}
.premium-locked-teaser::after{
  content:'🔒';position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:2.5rem;background:rgba(10,6,20,.5);
  z-index:1
}
.referral-progress-bar{
  width:100%;height:8px;background:rgba(255,255,255,.06);
  border-radius:10px;overflow:hidden;margin:.5rem 0
}
.referral-progress-fill{
  height:100%;border-radius:10px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  transition:width .4s cubic-bezier(.22,.61,.36,1);
  position:relative
}
.referral-progress-fill::after{
  content:'';position:absolute;right:0;top:-2px;
  width:12px;height:12px;border-radius:50%;
  background:var(--accent2);box-shadow:0 0 10px var(--accent2);
  animation:pulseGlow 1.5s ease-in-out infinite
}
.card-variant-selector{
  display:flex;gap:.3rem;justify-content:center;margin:.5rem 0;flex-wrap:wrap
}
.card-variant-selector .variant-pill{
  background:var(--surface2);border:1px solid var(--border);
  border-radius:50px;padding:.3rem .7rem;font-size:.68rem;
  color:var(--text2);cursor:pointer;transition:all .2s cubic-bezier(.22,.61,.36,1);
  font-family:var(--font);white-space:nowrap
}
.card-variant-selector .variant-pill:hover,
.card-variant-selector .variant-pill:focus-visible{
  border-color:var(--accent);color:var(--text);transform:translateY(-1px)
}
.card-variant-selector .variant-pill.active{
  background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700
}
.card-variant-selector .variant-pill:active{transform:scale(.95)}