@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Outfit', sans-serif; }

body { 
    background: linear-gradient(135deg, #0f0c29, #302b63, #24243e); 
    display: flex; justify-content: center; align-items: center; min-height: 100vh;
    overflow: hidden; position: relative;
}

/* Floating Circles Background */
.circles div {
    position: absolute; border: 2px solid rgba(255, 255, 255, 0.1); border-radius: 50%;
    animation: bubble 15s linear infinite;
}
.circles div:nth-child(1){ width: 100px; height: 100px; top: 10%; left: 10%; }
.circles div:nth-child(2){ width: 150px; height: 150px; top: 70%; left: 80%; }
.circles div:nth-child(3){ width: 50px; height: 50px; top: 40%; left: 50%; }

@keyframes bubble { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(-1000px) rotate(720deg); opacity: 0; } }

.glass-container { 
    background: rgba(255, 255, 255, 0.1); width: 90%; max-width: 400px; min-height: 550px;
    padding: 30px; border-radius: 30px; border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px); color: white; text-align: center;
    box-shadow: 0 20px 45px rgba(0,0,0,0.4);
}

.hidden { display: none !important; }

.premium-title { font-size: 2.5rem; margin-bottom: 20px; text-shadow: 0 5px 15px rgba(0,0,0,0.3); }
.info-badges { display: flex; justify-content: center; gap: 10px; margin-bottom: 40px; }
.info-badges span { background: rgba(255,255,255,0.2); padding: 5px 15px; border-radius: 10px; font-size: 0.8rem; }

.glow-btn { 
    background: linear-gradient(45deg, #b21f1f, #fdbb2d); color: white; border: none;
    padding: 18px 30px; border-radius: 15px; font-weight: 700; width: 100%;
    cursor: pointer; box-shadow: 0 10px 20px rgba(178, 31, 31, 0.4); transition: 0.2s;
}
.glow-btn:active { transform: scale(0.96); }

.option-btn {
    display: block; width: 100%; padding: 15px; margin: 10px 0;
    background: rgba(255,255,255,0.9); color: #333; border: none;
    border-radius: 15px; font-weight: 600; cursor: pointer; transition: 0.3s;
}
.option-btn:hover { background: #fff; transform: translateY(-2px); }

.correct-flash { background: #27ae60 !important; color: white !important; }
.wrong-shake { background: #e74c3c !important; color: white !important; animation: shake 0.4s; }

@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-10px); } 75% { transform: translateX(10px); } }

.modern-review { max-height: 250px; overflow-y: auto; background: rgba(0,0,0,0.2); border-radius: 15px; padding: 10px; margin: 20px 0; }
.review-item { background: white; color: #333; padding: 10px; margin-bottom: 8px; border-radius: 10px; text-align: left; }