/* 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:20px;--radius-sm:14px;--radius-xs:10px;
  --font:"Segoe UI",system-ui,-apple-system,sans-serif;
  --safe-b:env(safe-area-inset-bottom,16px);
}

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-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!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}

/* ── 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:1.2rem;font-style:italic;opacity:.7}
.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;animation:ctaGlow 2s ease-in-out infinite}
@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:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.7rem 1.2rem;color:var(--text2);font-size:.78rem;font-weight:600;cursor:pointer;font-family:var(--font);display:flex;justify-content:space-between;align-items:center;transition:all .2s cubic-bezier(.22,.61,.36,1)}
.explorer-toggle:hover,.explorer-toggle:focus-visible{border-color:var(--accent);color:var(--text);transform:translateY(-1px)}
.explorer-toggle:active{transform:scale(.96)}
.explorer-arrow{transition:transform .3s;font-size:.7rem}
.explorer-arrow.open{transform:rotate(180deg)}
.explorer-content{padding-top:.8rem}

/* ── 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{margin-top:.5rem;width:100%}
.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:80;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}

/* ── 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}

/* ── 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}
}

/* ── ENERGY ORBS ── */
.energy-header{display:flex;align-items:center;justify-content:center;gap:.3rem;margin-top:.5rem}
.energy-premium{font-size:.72rem;font-weight:700;color:var(--accent2);background:var(--surface2);padding:.2rem .7rem;border-radius:50px}
.orb{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--accent);box-shadow:0 0 6px var(--accent);animation:orbPulse 2s ease-in-out infinite}
.orb.empty{background:rgba(255,255,255,.08);box-shadow:none;animation:none}
.energy-count{font-size:.62rem;color:var(--text3);margin-left:.3rem}
.depleted .orb.active{background:var(--rose);animation:orbUrgent .6s ease-in-out infinite}
@keyframes orbUrgent{0%,100%{opacity:1}50%{opacity:.2}}

/* ── ENERGY MODAL ── */
.energy-overlay{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.8);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:1rem}
.energy-modal{background:var(--surface);border:1.5px solid var(--accent);border-radius:var(--radius);padding:1.5rem;max-width:340px;width:100%;text-align:center;animation:bounceIn .4s cubic-bezier(.34,1.56,.64,1)}
.energy-modal h3{color:var(--accent);margin-bottom:.5rem}
.energy-modal p{color:var(--text2);font-size:.85rem;margin-bottom:1rem}
.energy-options{display:flex;flex-direction:column;gap:.5rem}
.energy-sub{font-size:.62rem;color:var(--text3);margin-top:.8rem}

/* ── TRAIT REVEAL OVERLAY ── */
.trait-reveal-overlay{position:fixed;inset:0;z-index:55;background:rgba(10,6,20,.95);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;top:50%;left:50%;transform:translate(-50%,-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;top:40px;left:50%;transform:translateX(-50%);z-index:45;border-radius:50px;padding:.5rem 1.2rem;animation:fadeUp .3s ease-out;cursor:pointer}
.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 .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)}

/* ═══════════════════════════════════════
   GLOBAL ANIMATION ENHANCEMENTS
   ═══════════════════════════════════════ */

/* ── 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}
.id-icon{animation:bounceInCard .7s cubic-bezier(.22,.61,.36,1) .1s both,iconFloat 3s ease-in-out .8s infinite}
@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}
.id-icon{animation:bounceInCard .7s cubic-bezier(.34,1.56,.64,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)}

/* ── ENERGY ORB DYNAMIC ── */
.orb{transition:all .2s cubic-bezier(.22,.61,.36,1)}
.orb.active{animation:orbPulseDynamic 1.8s ease-in-out infinite}
@keyframes orbPulseDynamic{0%,100%{transform:scale(1);box-shadow:0 0 6px var(--accent)}50%{transform:scale(1.5);box-shadow:0 0 14px var(--accent)}}
.orb.empty{animation:none;transform:scale(.7)}
.depleted .orb.active{background:var(--rose)!important;animation:orbUrgentPulse .5s ease-in-out infinite}
@keyframes orbUrgentPulse{0%,100%{opacity:.5;transform:scale(.8)}50%{opacity:1;transform:scale(1.3)}}

/* ── 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)}
.duel-center{animation:duelClash 2s ease-in-out infinite}
@keyframes duelClash{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}

/* ── 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}