/* === Import Font și Resetare === */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Fredoka', sans-serif;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    /* Fundalul animat solicitat: nuanțe de albastru și verde estompate */
    background: linear-gradient(-45deg, #a1c4fd, #c2e9fb, #d1f2eb, #e8f8f5);
    background-size: 400% 400%;
    animation: gradientAnim 15s ease infinite;
}

@keyframes gradientAnim {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* === Containerul Principal (Cardul) === */
.container {
    background: white;
    padding: 35px;
    border-radius: 30px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1), inset 0 0 0 10px #f8fafc;
    max-width: 600px;
    width: 100%;
    text-align: center;
    animation: bounceIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes bounceIn {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* === Tipografie === */
h1 { color: #2d3436; font-size: 2rem; margin-bottom: 10px; }
h2 { color: #0369a1; font-size: 1.5rem; margin-bottom: 20px; }
p { color: #636e72; font-size: 1.1rem; margin-bottom: 20px; }

/* === Formulare și Input-uri === */
label {
    display: block;
    text-align: left;
    font-weight: 600;
    margin-bottom: 8px;
    color: #2d3436;
    margin-top: 15px;
}

select {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    font-family: inherit;
    font-size: 1rem;
    margin-bottom: 10px;
    cursor: pointer;
}

/* === Opțiunile de răspuns (Stil Card) === */
.option {
    margin-bottom: 12px;
    text-align: left;
}

.option input[type="radio"] {
    display: none;
}

.option label {
    display: block;
    background: #f1f2f6;
    padding: 15px;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.2s;
    border: 3px solid transparent;
    margin: 0;
}

.option input[type="radio"]:checked + label {
    border-color: #74b9ff;
    background: #e3f2fd;
    color: #0984e3;
}

/* === Butoane === */
button {
    width: 100%;
    padding: 18px;
    font-size: 1.2rem;
    font-weight: 700;
    border: none;
    border-radius: 15px;
    background: #10b981; /* Verde principal */
    color: white;
    box-shadow: 0 6px 0 #059669;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
    margin-top: 20px;
}

button:hover { transform: translateY(-2px); filter: brightness(1.1); }
button:active { transform: translateY(4px); box-shadow: 0 2px 0 #059669; }

.btn-renunta {
    background: #ff7675;
    box-shadow: 0 6px 0 #d63031;
    margin-top: 10px;
}

/* === Feedback și Mesaje === */
.feedback {
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 20px;
    font-weight: 700;
}

.feedback.correct { background: #e8f8f0; color: #10b981; border: 2px solid #10b981; }
.feedback.incorrect { background: #fff5f5; color: #ff7675; border: 2px solid #ff7675; }

.alert { color: #d63031; font-weight: bold; margin-bottom: 10px; display: none; }