:root{--bg-dark:#0f172a;--bg-deep:#020617;--accent-pink:#f472b6;--accent-purple:#a78bfa;--accent-blue:#38bdf8;--text-primary:#f8fafc;--text-secondary:#94a3b8;--glass-bg:#ffffff08;--glass-border:#ffffff1a}*{box-sizing:border-box;margin:0;padding:0}html,body{max-width:100%;overflow-x:hidden}body{background:var(--bg-dark);color:var(--text-primary);perspective:1000px;background:var(--bg-deep);justify-content:center;align-items:center;min-height:100vh;font-family:Outfit,sans-serif;line-height:1.6;display:flex;overflow:hidden}.blob{filter:blur(80px);z-index:-2;opacity:.4;pointer-events:none;border-radius:50%;animation:12s ease-in-out infinite alternate floatBlob;position:absolute}.blob-1{background:var(--accent-pink);width:50vw;height:50vw;top:-10%;left:-10%}.blob-2{background:var(--accent-purple);width:40vw;height:40vw;animation-duration:15s;animation-direction:alternate-reverse;bottom:-10%;right:-10%}.blob-3{background:var(--accent-blue);width:45vw;height:45vw;animation-duration:18s;top:30%;left:50%}@keyframes floatBlob{0%{transform:translate(0)scale(1)rotate(0)}to{transform:translate(50px,-50px)scale(1.1)rotate(20deg)}}#background-elements{pointer-events:none;z-index:-1;width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}.floating-heart{opacity:.6;font-size:24px;animation:linear forwards floatUp;position:absolute;bottom:-50px}@keyframes floatUp{0%{opacity:0;transform:translateY(0)rotate(0)}10%{opacity:.6}90%{opacity:.6}to{opacity:0;transform:translateY(-120vh)rotate(360deg)}}#app{width:100%;max-width:500px;padding:2.5rem;padding-top:max(2.5rem, env(safe-area-inset-top));padding-bottom:max(2.5rem, env(safe-area-inset-bottom));text-align:center;z-index:10}.step{opacity:0;flex-direction:column;align-items:center;gap:2rem;transition:all .6s cubic-bezier(.2,.8,.2,1);display:none;transform:translateY(20px)scale(.98)}.step.active{opacity:1;display:flex;transform:translateY(0)scale(1)}.step.active>*{opacity:0;animation:.6s cubic-bezier(.2,.8,.2,1) forwards slideUpFade}.step.active>:first-child{animation-delay:.1s}.step.active>:nth-child(2){animation-delay:.3s}.step.active>:nth-child(3){animation-delay:.5s}.step.active>:nth-child(4){animation-delay:.7s}@keyframes slideUpFade{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.step.fading{opacity:0;filter:blur(10px);transform:translateY(-20px)scale(1.02)}h1{letter-spacing:-.02em;background:linear-gradient(90deg,#fff,#94a3b8);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:2.8rem;font-weight:800;line-height:1.2}.highlight{background:linear-gradient(to right, var(--accent-pink), var(--accent-purple));-webkit-text-fill-color:transparent;-webkit-background-clip:text}p{color:var(--text-secondary);max-width:90%;font-size:1.2rem;font-weight:300}.btn{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;cursor:pointer;letter-spacing:.5px;background:linear-gradient(135deg,#f472b666,#a78bfa66);border:1px solid #ffffff4d;border-radius:12px;margin-top:1rem;padding:1rem 2.8rem;font-size:1.1rem;font-weight:600;transition:all .2s cubic-bezier(.23,1,.32,1);box-shadow:0 4px 6px #0000001a,inset 0 -2px #0003}.btn:hover{background:linear-gradient(135deg,#f472b699,#a78bfa99);border-color:#fff9;transform:translateY(-2px);box-shadow:0 8px 12px #0003,inset 0 -2px #0003}.btn:active{transform:translateY(2px);box-shadow:0 2px 4px #0000001a,inset 0 0 #0000}.button-group{flex-direction:column;gap:1rem;width:100%;display:flex}.button-group .btn{width:100%;margin-top:0;padding:.8rem 1.5rem;font-size:1rem}#step-1 h1{font-family:Playfair Display,serif;font-style:italic}.game-card-container{filter:drop-shadow(0 25px 50px #00000080);width:280px;height:400px;transition:transform .8s cubic-bezier(.175,.885,.32,1.275);position:relative}.game-card-container:hover{transform:rotateY(10deg)rotateX(10deg)}.game-card{background:#fff;border:6px solid #fff;border-radius:8px;flex-direction:column;width:100%;height:100%;display:flex;overflow:hidden}.game-card img{object-fit:cover;width:100%;height:100%}.micina-text{color:#fff;margin-top:2rem;font-family:Caveat,cursive;font-size:2.2rem;font-weight:600;line-height:1.2}.coming-soon{color:var(--accent-pink);text-transform:uppercase;letter-spacing:4px;opacity:0;margin-top:1rem;font-size:1rem;font-weight:800}#step-8 .coming-soon{animation:1.2s cubic-bezier(.2,.8,.2,1) .6s forwards slideUpFade}.director{color:var(--text-secondary);letter-spacing:2px;opacity:0;margin-top:3rem;font-family:Outfit,sans-serif;font-size:1.1rem}#step-8 .director{animation:1.2s cubic-bezier(.2,.8,.2,1) 1.2s forwards slideUpFade}.heart{color:var(--accent-pink);-webkit-text-fill-color:initial;filter:drop-shadow(0 0 10px var(--accent-pink));animation:1.5s infinite heartRate;display:inline-block}@keyframes heartRate{0%{transform:scale(1)}15%{transform:scale(1.25)}30%{transform:scale(1)}45%{transform:scale(1.15)}60%{transform:scale(1)}}#app:after{content:"";opacity:.05;pointer-events:none;z-index:-1;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");width:200%;height:200%;position:absolute;top:-50%;left:-50%}body.reveal-mode{background:radial-gradient(circle,#1e1b4b 0%,#020617 100%)}body.reveal-mode:before{background:radial-gradient(circle at 20% 30%,#f472b64d 0%,#0000 60%),radial-gradient(circle at 80% 70%,#38bdf84d 0%,#0000 60%)}