@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&family=Playfair+Display:ital,wght@0,600;1,600&display=swap";:root{--bg-color-1:#0f0c29;--bg-color-2:#302b63;--bg-color-3:#24243e;--text-primary:#fff;--text-secondary:#ffb8d1;--accent-color:#ff477e;--accent-glow:#ff477e99;--glass-bg:#ffffff0d;--glass-border:#ffffff1a}*{box-sizing:border-box;margin:0;padding:0}body{background:linear-gradient(135deg, var(--bg-color-1), var(--bg-color-2), var(--bg-color-3));color:var(--text-primary);background-size:400% 400%;justify-content:center;align-items:center;min-height:100vh;font-family:Outfit,sans-serif;animation:15s infinite gradientBG;display:flex;overflow:hidden}@keyframes gradientBG{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}h1,h2,h3{font-family:Playfair Display,serif}.glass-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);text-align:center;border-radius:24px;width:90%;max-width:500px;padding:2.5rem;position:relative;overflow:hidden;box-shadow:0 8px 32px #0000005e}.floating-particles{pointer-events:none;z-index:0;width:100%;height:100%;position:absolute;top:0;left:0}.app-container{z-index:1;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100vh;display:flex}.vault-container{z-index:10;flex-direction:column;gap:20px;animation:.8s ease-out fadeInUp;display:flex}.title{color:var(--text-primary);margin-bottom:.5rem;font-size:2.5rem}.subtitle{color:var(--text-secondary);margin-bottom:2rem;font-size:1.1rem;font-weight:300}.question-text{margin-bottom:2rem;font-size:1.5rem;line-height:1.4}.submit-btn{background:linear-gradient(45deg, var(--accent-color), #ff758c);color:#fff;cursor:pointer;border:none;border-radius:30px;width:100%;margin-top:15px;padding:15px 30px;font-family:Outfit,sans-serif;font-size:1.1rem;font-weight:600;transition:transform .2s,box-shadow .2s}.submit-btn:hover{box-shadow:0 5px 20px var(--accent-glow);transform:translateY(-2px)}.submit-btn:active{transform:translateY(1px)}.progress-bar{justify-content:center;gap:8px;margin-bottom:20px;display:flex}.progress-dot{background:var(--glass-border);border-radius:50%;width:12px;height:12px;transition:all .3s}.progress-dot.active{background:var(--accent-color);box-shadow:0 0 10px var(--accent-glow);transform:scale(1.2)}.progress-dot.completed{background:var(--text-secondary)}.success-container{text-align:center;animation:.6s cubic-bezier(.175,.885,.32,1.275) popIn}.heart-icon{color:var(--accent-color);margin-bottom:1rem;font-size:4rem;animation:1.5s infinite pulseHeart}.final-message{color:#ffffffe6;margin-bottom:2rem;font-size:1.2rem;line-height:1.6}.gift-reveal{border:1px solid var(--accent-glow);background:#ff477e1a;border-radius:16px;margin-top:20px;padding:20px}.gift-title{color:var(--text-secondary);text-transform:uppercase;letter-spacing:2px;margin-bottom:10px;font-size:.9rem;font-weight:700}.gift-text{color:#fff;font-family:Playfair Display,serif;font-size:1.4rem}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes popIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}@keyframes pulseHeart{0%{transform:scale(1)}50%{text-shadow:0 0 20px var(--accent-glow);transform:scale(1.1)}to{transform:scale(1)}}.fade-exit{animation:.5s forwards fadeOutUp}@keyframes fadeOutUp{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-30px)}}.options-grid{flex-direction:column;gap:12px;margin-bottom:20px;display:flex}.option-btn{border:2px solid var(--glass-border);color:#fff;cursor:pointer;text-align:left;background:#ffffff1a;border-radius:12px;padding:15px 20px;font-family:Outfit,sans-serif;font-size:1.1rem;transition:all .2s}.option-btn:hover:not(.correct-option){border-color:var(--accent-color);background:#ff477e33;transform:translate(5px)}.sassy-message{color:#ff477e;background:#0000004d;border-radius:8px;margin-top:10px;padding:10px;font-size:1.1rem;font-weight:600;animation:.4s ease-in-out shake,.3s popIn}.sassy-message.success{color:#00ff73}.lives-container{justify-content:center;gap:10px;margin-bottom:15px;font-size:1.5rem;display:flex}.heart{transition:all .3s}.heart.dead{filter:grayscale();opacity:.3;transform:scale(.8)}.penalty-overlay{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100;color:#fff;text-align:center;background:#0f0c29f2;flex-direction:column;justify-content:center;align-items:center;width:100vw;height:100vh;padding:2rem;display:flex;position:fixed;top:0;left:0}.penalty-overlay h2{color:#ff477e;margin-bottom:1rem;font-size:3rem;animation:1s infinite pulseHeart}.penalty-overlay p{max-width:600px;margin-bottom:1rem;font-size:1.5rem}.catch-btn{color:#fff;cursor:pointer;z-index:101;background:linear-gradient(45deg,#00f2fe,#4facfe);border:none;border-radius:30px;padding:15px 25px;font-size:1.2rem;font-weight:700;transition:left .15s ease-out,top .15s ease-out;position:absolute;box-shadow:0 5px 15px #00f2fe66}.catch-btn:hover{transform:scale(1.1)}.image-options-grid{grid-template-columns:1fr 1fr;gap:15px;margin-bottom:20px;display:grid}.image-option-btn{border:2px solid var(--glass-border);cursor:pointer;aspect-ratio:1;background:#ffffff1a;border-radius:12px;padding:5px;transition:all .2s;position:relative;overflow:hidden}.image-option-btn img{object-fit:cover;border-radius:8px;width:100%;height:100%}.image-option-btn:hover:not(.correct-option){border-color:var(--accent-color);box-shadow:0 5px 15px var(--accent-glow);transform:scale(1.05)}.zoom-modal{z-index:1000;cursor:zoom-out;background:#000000e6;justify-content:center;align-items:center;width:100vw;height:100vh;animation:.3s ease-out popIn;display:flex;position:fixed;top:0;left:0}.zoom-modal img{object-fit:contain;border-radius:12px;max-width:90%;max-height:90%;box-shadow:0 0 30px #ff477e80}.zoom-icon{z-index:2;background:#0009;border-radius:50%;justify-content:center;align-items:center;width:30px;height:30px;font-size:1.2rem;transition:transform .2s;display:flex;position:absolute;top:10px;right:10px}.zoom-icon:hover{transform:scale(1.2)}.wrong-vibrate{animation:.3s ease-in-out fastVibrate,3s ease-out forwards redFade}@keyframes fastVibrate{0%,to{transform:translate(0)}20%{transform:translate(-10px)}40%{transform:translate(10px)}60%{transform:translate(-10px)}80%{transform:translate(10px)}}@keyframes redFade{0%{border-color:red;box-shadow:0 0 20px #f00c}to{border-color:var(--glass-border);box-shadow:none}}.correct-option{background:#00ff731a!important;border-color:#00ff73!important;box-shadow:0 0 20px #00ff7399!important}.input-field{border:2px solid var(--glass-border);color:#fff;background:#ffffff0d;border-radius:12px;outline:none;width:100%;padding:15px 20px;font-family:Outfit,sans-serif;font-size:1.2rem;transition:all .3s;box-shadow:inset 0 2px 5px #0003}.input-field:focus{border-color:var(--accent-color);box-shadow:0 0 15px var(--accent-glow), inset 0 2px 5px #0003;background:#ffffff1a}.input-field::placeholder{color:#ffffff4d}.confetti-container{pointer-events:none;width:100%;height:100%;position:absolute;top:-100px;left:0;overflow:hidden}.confetti-piece{border-radius:2px;width:10px;height:20px;animation:3s linear infinite fall;position:absolute;top:-20px}@keyframes fall{0%{opacity:1;transform:translateY(-20px)rotate(0)}to{opacity:0;transform:translateY(100vh)rotate(360deg)}}.cake-animation{margin-bottom:20px;animation:1.5s cubic-bezier(.68,-.55,.265,1.55) forwards bounceInCake}@keyframes bounceInCake{0%{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(1.2)}70%{transform:scale(.9)}to{transform:scale(1)}}.glass-panel::-webkit-scrollbar{width:10px}.glass-panel::-webkit-scrollbar-track{background:#ffffff05;border-radius:8px}.glass-panel::-webkit-scrollbar-thumb{background:var(--accent-color);border-radius:8px}.glass-panel::-webkit-scrollbar-thumb:hover{background:#ff758c}.vibrating-element{border-radius:16px;max-width:100%;max-height:70vh;margin:0 auto;animation:.1s linear infinite aggressiveVibrate;display:block}@keyframes aggressiveVibrate{0%{transform:translate(0)rotate(0)}25%{transform:translate(-2px,2px)rotate(-.5deg)}50%{transform:translate(2px,-2px)rotate(.5deg)}75%{transform:translate(-2px,-2px)rotate(1deg)}to{transform:translate(2px,2px)rotate(-1deg)}}