:root {
    --bg-main: linear-gradient(135deg, #f2f7fd 0%, #fff9e5 100%);
    --card-bg: #f7fafe;
    --card-bg-accent: #fffbe8;
    --option-bg: #e9f1ff;
    --option-bg-selected: #fff3d1;
    --option-border: #cddffa;
    --primary: #3a86ff;
    --secondary: #fcb900;
    --purple: #b388ff;
    --orange: #ff9100;
    --lilla: #d1c4e9;
    --lilla-dark: #7c4dff;
    --yellow: #ffe082;
    --yellow-dark: #ffb300;
    --blue: #3a86ff;
    --blue-dark: #1d3557;
    --arancione: #ffd180;
    --arancione-dark: #ff6d00;
    --white: #fff;
    --text-main: #21243d;
    --text-light: #666a7d;
    --radius: 1.25rem;
    --transition: 0.21s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow: 0 8px 32px 0 rgba(180,136,255,0.13);
    --shadow-card: 0 3px 18px 0 rgba(58,134,255,0.11), 0 0.5px 2px 0 rgba(255,145,0,0.04);
}

body {
    background: var(--bg-main);
    min-height: 100vh;
    font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
    margin: 0;
    color: var(--text-main);
    letter-spacing: 0.04em;
    background-attachment: fixed;
}

.container {
    max-width: 600px;
    margin: 2rem auto 1.5rem auto;
    background: transparent;
    border-radius: var(--radius);
    box-shadow: none;
    padding: 0;
    position: relative;
}

h1 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 1.1rem;
    font-size: 2.25rem;
    font-weight: 900;
    letter-spacing: 0.01em;
    color: var(--primary);
    background: linear-gradient(90deg, var(--primary) 60%, var(--secondary) 90%, var(--purple) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.intro {
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    background: var(--card-bg-accent);
    color: var(--text-main);
    padding: 1.15rem 1.15rem 1.05rem 1.15rem;
    border-radius: 1.3rem;
    box-shadow: var(--shadow-card);
    opacity: 0.99;
    font-weight: 500;
}

.note {
    color: var(--text-light);
    font-size: 0.97rem;
    margin-top: 0.8rem;
    background: #fffbe6;
    padding: 0.7rem 1.05rem;
    border-radius: 0.8rem;
}

form {
    display: flex;
    flex-direction: column;
    gap: 2.1rem;
}

.question-block {
    background: var(--card-bg);
    border-radius: 1.25rem;
    box-shadow: var(--shadow-card);
    padding: 1.45rem 1.3rem 1.15rem 1.3rem;
    margin-bottom: 0.5rem;
    position: relative;
    overflow: hidden;
    border: 1.5px solid #e8eefd;
    animation: fadein 0.5s;
}

@keyframes fadein {
    from { opacity: 0; transform: translateY(30px);}
    to   { opacity: 1; transform: translateY(0);}
}

.question {
    margin-bottom: 1rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 0.01em;
    text-shadow: 0 1px 1px #fff3;
}

.options {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-top: 0.2rem;
}

.option-label {
    display: flex;
    align-items: center;
    background: var(--option-bg);
    border-radius: 0.9rem;
    padding: 0.85rem 1.2rem;
    cursor: pointer;
    transition: 
        background var(--transition), 
        box-shadow var(--transition), 
        transform var(--transition), 
        color var(--transition),
        border var(--transition);
    font-size: 1.09rem;
    font-weight: 600;
    border: 2px solid var(--option-border);
    box-shadow: var(--shadow-card);
    color: var(--text-main);
    position: relative;
    overflow: hidden;
}

.option-label:hover, .option-label.selected {
    color: var(--primary);
    background: var(--option-bg-selected);
    border-color: var(--secondary);
    transform: scale(1.017) translateY(-1px);
    box-shadow: 0 3px 20px 0 rgba(252,185,0,0.11);
}

input[type="radio"] {
    accent-color: var(--primary);
    margin-right: 0.95em;
    width: 1.18em;
    height: 1.18em;
    transition: accent-color var(--transition);
}

button[type="submit"], #restart-btn {
    margin: 2.5rem auto 0 auto;
    display: block;
    background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 80%, var(--orange) 100%);
    background-size: 300% 300%;
    animation: gradientflow 5s ease-in-out infinite alternate;
    color: var(--text-main);
    border: none;
    padding: 1.05rem 3.1rem;
    border-radius: 2.5rem;
    font-size: 1.17rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    box-shadow: 0 6px 24px 0 rgba(252,185,0,0.12), var(--shadow);
    cursor: pointer;
    transition: background var(--transition), transform var(--transition), opacity var(--transition), color var(--transition);
}
button[type="submit"]:hover, #restart-btn:hover {
    opacity: 0.92;
    transform: scale(1.028) translateY(-2px);
    background-position: 70% 30%;
    color: var(--purple);
}

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

/* Risultato: base, modificato poi per colore */
.result {
    padding: 2.1rem 1.6rem 1.5rem 1.6rem;
    margin-top: 1.7rem;
    border-radius: var(--radius);
    box-shadow: 0 8px 36px 0 rgba(255,145,0,0.09), 0 2px 12px 0 rgba(58,134,255,0.10);
    font-size: 1.18rem;
    text-align: center;
    border: 3px solid var(--primary);
    animation: fadein 0.9s;
    background: var(--card-bg-accent);
    color: var(--text-main);
}
.result .color-title {
    font-size: 1.85rem;
    font-weight: 900;
    margin-bottom: 0.55rem;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 0 #fff7, 0 2px 8px var(--yellow), 0 0.5px 2px var(--purple);
}

.result .traits {
    margin-top: 1.1rem;
    font-size: 1.09rem;
    font-weight: 700;
}
.result .desc {
    margin-bottom: 0.3rem;
    font-size: 1.11rem;
}

/* --- BLU --- */
.result.blu {
    background: linear-gradient(135deg, var(--blue) 0%, #e3f0ff 100%);
    border-color: var(--blue-dark);
    color: var(--blue-dark);
}
.result.blu .color-title {
    background: linear-gradient(90deg, var(--blue-dark), var(--blue));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 1px 10px #b3d0ff;
}
.result.blu .traits {
    color: var(--blue);
}

/* --- GIALLO --- */
.result.giallo {
    background: linear-gradient(135deg, var(--yellow) 0%, #fffde7 100%);
    border-color: var(--yellow-dark);
    color: #8d6c00;
}
.result.giallo .color-title {
    background: linear-gradient(90deg, var(--yellow-dark) 30%, var(--secondary) 80%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 1px 10px #fff9c4;
}
.result.giallo .traits {
    color: var(--yellow-dark);
}

/* --- LILLA --- */
.result.lilla {
    background: linear-gradient(135deg, var(--lilla) 0%, #f8f3ff 100%);
    border-color: var(--lilla-dark);
    color: var(--lilla-dark);
}
.result.lilla .color-title {
    background: linear-gradient(90deg, var(--lilla-dark) 40%, var(--lilla) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 1px 10px #ede7f6;
}
.result.lilla .traits {
    color: var(--lilla-dark);
}

/* --- ARANCIONE --- */
.result.arancione {
    background: linear-gradient(135deg, var(--arancione) 0%, #fff3e0 100%);
    border-color: var(--arancione-dark);
    color: #bf360c;
}
.result.arancione .color-title {
    background: linear-gradient(90deg, var(--arancione-dark), var(--orange));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 1px 10px #ffe0b2;
}
.result.arancione .traits {
    color: var(--arancione-dark);
}

.result button {
    background: linear-gradient(90deg, var(--secondary), var(--orange), var(--purple));
    color: var(--text-main);
    font-weight: 700;
    font-size: 1.06rem;
    margin-top: 1.1rem;
    padding: 0.62rem 2.1rem;
    border-radius: 1.6rem;
    border: none;
    box-shadow: 0 3px 16px 0 rgba(255,145,0,0.09);
    transition: background var(--transition), transform var(--transition), color var(--transition);
}
.result button:hover {
    filter: brightness(1.07);
    transform: scale(1.05) translateY(-1px);
    color: var(--primary);
}

.hidden { display: none; }

footer {
    text-align: center;
    margin: 2.2rem 0 1.1rem 0;
    color: var(--purple);
    font-size: 1.04rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    opacity: 0.89;
}

/* Responsive */
@media (max-width: 700px) {
    .container { padding: 0.3rem 0.1rem 1.3rem 0.1rem; }
    .result { padding: 1.3rem 0.2rem 1rem 0.2rem; }
    h1 { font-size: 1.3rem;}
}