@import"https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Share+Tech+Mono&display=swap";:root{--bg: #04040a;--bg2: #070712;--border: #1a1a2e;--accent: #aa88ff;--pink: #ff66cc;--cyan: #00ffcc;--green: #00ff88;--red: #ff4444;--yellow: #ffcc00;--white: #f0eeff;--muted: rgba(240,238,255,.4);--grid: rgba(170,136,255,.04)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--bg);font-family:Share Tech Mono,monospace;color:var(--white);min-height:100vh;overflow-x:hidden;position:relative}body:before{content:"";position:fixed;inset:0;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:40px 40px;pointer-events:none;z-index:0}body:after{content:"";position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.03) 2px,rgba(0,0,0,.03) 4px);pointer-events:none;z-index:1}.orb{position:fixed;border-radius:50%;filter:blur(80px);opacity:.12;pointer-events:none;z-index:0;animation:drift 12s ease-in-out infinite alternate}.orb1{width:500px;height:500px;background:var(--accent);top:-100px;left:-150px;animation-delay:0s}.orb2{width:400px;height:400px;background:var(--pink);bottom:-100px;right:-100px;animation-delay:-6s}.orb3{width:300px;height:300px;background:var(--cyan);top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:-3s}@keyframes drift{0%{transform:translate(0) scale(1)}to{transform:translate(30px,20px) scale(1.05)}}.screen{position:relative;z-index:2;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 20px}.pf{font-family:"Press Start 2P",monospace}.neon{text-shadow:0 0 10px currentColor,0 0 30px currentColor,0 0 60px currentColor}@keyframes glitch{0%,to{clip-path:inset(0 0 100% 0);transform:translate(0)}10%{clip-path:inset(20% 0 60% 0);transform:translate(-3px)}20%{clip-path:inset(50% 0 30% 0);transform:translate(3px)}30%{clip-path:inset(70% 0 10% 0);transform:translate(-2px)}40%{clip-path:inset(0 0 100% 0);transform:translate(0)}}.glitch-wrap{position:relative;display:inline-block}.glitch-wrap:before,.glitch-wrap:after{content:attr(data-text);position:absolute;inset:0;font-family:inherit;font-size:inherit;color:inherit;opacity:0}.glitch-wrap:hover:before{color:var(--pink);animation:glitch .3s steps(1) infinite;opacity:.7}.glitch-wrap:hover:after{color:var(--cyan);animation:glitch .3s steps(1) infinite reverse;opacity:.7}.pixel-card{position:relative;border:2px solid}.pixel-card:before,.pixel-card:after{content:"";position:absolute;width:10px;height:10px;background:currentColor}.pixel-card:before{top:-2px;left:-2px}.pixel-card:after{top:-2px;right:-2px}.pc-bl{position:absolute;bottom:-2px;left:-2px;width:10px;height:10px;background:currentColor}.pc-br{position:absolute;bottom:-2px;right:-2px;width:10px;height:10px;background:currentColor}.intro-screen{text-align:center;gap:0}.intro-tag{font-size:10px;color:var(--accent);letter-spacing:3px;margin-bottom:16px;opacity:0;animation:fadeUp .6s .2s forwards}.intro-title{font-size:clamp(22px,5vw,36px);line-height:1.3;color:#fff;margin-bottom:8px;opacity:0;animation:fadeUp .6s .4s forwards}.intro-title span{color:var(--accent)}.intro-subtitle{font-size:clamp(18px,4vw,28px);color:var(--pink);margin-bottom:40px;opacity:0;animation:fadeUp .6s .6s forwards}.emoji-row{display:flex;gap:16px;justify-content:center;margin-bottom:40px;opacity:0;animation:fadeUp .6s .8s forwards}.emoji-badge{font-size:28px;filter:drop-shadow(0 0 10px currentColor);animation:float 3s ease-in-out infinite}.emoji-badge:nth-child(2){animation-delay:.5s}.emoji-badge:nth-child(3){animation-delay:1s}.emoji-badge:nth-child(4){animation-delay:1.5s}.emoji-badge:nth-child(5){animation-delay:2s}.emoji-badge:nth-child(6){animation-delay:2.5s}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.intro-meta{font-size:10px;color:var(--muted);letter-spacing:2px;margin-bottom:32px;opacity:0;animation:fadeUp .6s 1s forwards}.btn-start{font-family:"Press Start 2P",monospace;font-size:10px;padding:16px 36px;background:linear-gradient(135deg,var(--accent),var(--pink));border:none;color:#fff;cursor:pointer;position:relative;letter-spacing:2px;transition:transform .1s,box-shadow .2s;box-shadow:0 0 30px #aa88ff80,0 0 60px #f6c3;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));opacity:0;animation:fadeUp .6s 1.2s forwards}.btn-start:hover{transform:translateY(-2px);box-shadow:0 0 40px #aa88ffb3,0 0 80px #f6c6}.btn-start:active{transform:translateY(0)}.watermark{position:fixed;bottom:16px;right:16px;font-family:"Press Start 2P",monospace;font-size:7px;color:#aa88ff4d;letter-spacing:1px;z-index:10}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.quiz-screen{gap:0;justify-content:flex-start;padding-top:40px}.progress-bar-wrap{width:100%;max-width:480px;margin-bottom:28px}.progress-meta{display:flex;justify-content:space-between;margin-bottom:8px;font-size:9px;color:var(--muted);font-family:"Press Start 2P",monospace}.progress-meta span:last-child{color:var(--accent)}.progress-track{height:6px;background:#ffffff0d;border:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--pink));transition:width .4s cubic-bezier(.4,0,.2,1);box-shadow:0 0 12px var(--accent)}.question-card{width:100%;max-width:480px;background:#070712e6;border:2px solid rgba(170,136,255,.25);padding:24px 20px;margin-bottom:20px;text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#aa88ff40;animation:slideIn .3s ease}@keyframes slideIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.question-text{font-family:"Press Start 2P",monospace;font-size:clamp(8px,2.2vw,11px);color:var(--white);line-height:1.9}.options-list{width:100%;max-width:480px;display:flex;flex-direction:column;gap:10px}.opt-btn{background:#070712d9;border:2px solid rgba(255,255,255,.08);color:#f0eeffb3;font-family:Share Tech Mono,monospace;font-size:13px;padding:14px 16px;text-align:left;cursor:pointer;transition:border-color .15s,color .15s,background .15s,transform .1s,box-shadow .15s;line-height:1.5;display:flex;align-items:center;gap:12px;animation:slideIn .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.opt-label{font-family:"Press Start 2P",monospace;font-size:8px;color:#fff3;flex-shrink:0;width:20px}.opt-btn:not(:disabled):hover{border-color:var(--accent);color:#fff;background:#aa88ff14;transform:translate(4px);box-shadow:0 0 16px #a8f3}.opt-btn.chosen{border-color:var(--accent);color:var(--accent);background:#aa88ff1a;box-shadow:0 0 20px #aa88ff4d}.opt-btn:disabled{cursor:default}.opt-btn:nth-child(2){animation-delay:.05s}.opt-btn:nth-child(3){animation-delay:.1s}.opt-btn:nth-child(4){animation-delay:.15s}.result-screen{gap:0;justify-content:flex-start;padding-top:32px}.result-header{font-family:"Press Start 2P",monospace;font-size:8px;letter-spacing:3px;color:var(--muted);margin-bottom:20px;text-align:center;animation:fadeUp .5s forwards}.result-card{width:100%;max-width:420px;padding:28px 22px;text-align:center;margin-bottom:20px;position:relative;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);animation:fadeUp .5s .1s both}.result-emoji{font-size:56px;margin-bottom:14px;display:block;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}.result-trait{font-family:"Press Start 2P",monospace;font-size:8px;letter-spacing:3px;margin-bottom:8px}.result-name{font-family:"Press Start 2P",monospace;font-size:clamp(8px,2.5vw,11px);color:#fff;margin-bottom:10px;line-height:1.6;white-space:pre-line}.result-eq{font-family:"Press Start 2P",monospace;font-size:clamp(14px,4vw,20px);margin-bottom:18px;letter-spacing:2px}.result-desc{font-size:12px;line-height:2;color:#f0eeffcc;margin-bottom:14px;text-align:left}.result-meme{font-size:10px;line-height:1.8;font-style:italic;border-top:1px solid;padding-top:12px;opacity:.7}.dna-wrap{width:100%;max-width:420px;margin-bottom:16px;animation:fadeUp .5s .2s both}.dna-label{font-family:"Press Start 2P",monospace;font-size:7px;color:var(--muted);margin-bottom:10px;letter-spacing:2px}.dna-row{display:flex;align-items:center;gap:8px;margin-bottom:7px}.dna-emoji{font-size:14px;width:22px;text-align:center}.dna-key{font-family:"Press Start 2P",monospace;font-size:6px;width:54px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dna-track{flex:1;height:7px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);overflow:hidden}.dna-fill{height:100%;transition:width 1s cubic-bezier(.4,0,.2,1)}.dna-score{font-family:"Press Start 2P",monospace;font-size:6px;width:18px;text-align:right;flex-shrink:0}.share-box{width:100%;max-width:420px;background:#070712e6;border:1px solid rgba(255,255,255,.1);padding:12px 14px;margin-bottom:10px;font-size:10px;color:var(--muted);line-height:2;white-space:pre-line;animation:fadeUp .5s .3s both}.btn-copy{width:100%;max-width:420px;font-family:"Press Start 2P",monospace;font-size:7px;padding:11px 16px;background:transparent;border:2px solid rgba(255,255,255,.15);color:#fff9;cursor:pointer;letter-spacing:1px;transition:all .2s;margin-bottom:10px;animation:fadeUp .5s .35s both}.btn-copy:hover{border-color:var(--green);color:var(--green);box-shadow:0 0 16px #0f83}.btn-copy.copied{border-color:var(--green);color:var(--green);box-shadow:0 0 20px #00ff884d}.btn-retake{width:100%;max-width:420px;font-family:"Press Start 2P",monospace;font-size:8px;padding:14px 16px;background:linear-gradient(135deg,var(--accent),var(--pink));border:none;color:#fff;cursor:pointer;letter-spacing:1px;transition:transform .1s,box-shadow .2s;box-shadow:0 0 24px #a8f6;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));animation:fadeUp .5s .4s both}.btn-retake:hover{transform:translateY(-2px);box-shadow:0 0 32px #a8f9}.loading-screen{gap:20px;flex-direction:column}.loading-emoji{font-size:40px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-text{font-family:"Press Start 2P",monospace;font-size:9px;color:var(--accent);letter-spacing:2px;animation:blink 1s step-end infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}@media(max-width:500px){.result-eq{font-size:14px}.intro-title{font-size:18px}.intro-subtitle{font-size:16px}}
