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

/* ── SCREEN ── */
.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:.6rem 1rem;margin-bottom:.8rem;text-align:center;font-size:.8rem;color:var(--accent);font-weight:600;animation:fadeUp .4s ease-out .2s both}
.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 .12s;line-height:1}
.lang-flag:hover,.lang-flag:focus-visible{border-color:var(--accent);background:var(--surface2);transform:translateY(-1px)}
.lang-flag:active{transform:scale(.92)}
.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 .12s;text-decoration:none;display:inline-block;text-align:center
}
.btn-primary:active,.btn-secondary:active,.btn-accent:active,.btn-ghost:active{transform:scale(.96)}
.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);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}

/* ── 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)}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:.7}}
.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:fadeUp .5s ease-out both}
.scene:nth-child(1){animation-delay:.05s}.scene:nth-child(2){animation-delay:.15s}.scene:nth-child(3){animation-delay:.25s}
.scene:nth-child(4){animation-delay:.35s}.scene:nth-child(5){animation-delay:.45s}.scene:nth-child(6){animation-delay:.55s}
.scene:nth-child(7){animation-delay:.65s}.scene:nth-child(8){animation-delay:.75s}
.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 fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* ── 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;
  animation:bounceIn .6s cubic-bezier(.34,1.56,.64,1);
}
@keyframes bounceIn{0%{transform:scale(.9);opacity:0}60%{transform:scale(1.02)}100%{transform:scale(1);opacity:1}}
.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:bounceIn .7s cubic-bezier(.34,1.56,.64,1) .1s both, iconFloat 3s ease-in-out .8s infinite}
@keyframes iconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.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}

/* ── 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 .05s linear;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 .15s;margin-bottom:.8rem;max-width:320px;width:100%}
.circle-teaser:hover,.circle-teaser:focus-visible{border-color:var(--accent2);background:var(--surface2);transform:translateY(-1px)}
.circle-teaser:active{transform:scale(.98)}
.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 .12s}
.circle-avatar:active{transform:scale(.95)}
.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 .12s;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 .12s;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 .12s;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;color:rgba(255,255,255,.12);text-align:center;margin-bottom:.8rem}

.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 .12s}
.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);transition:all .12s;animation:fadeUp .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}