:root {
    --soft-radius: 16px;
}

body {
    background: radial-gradient(1200px 800px at 20% -10%, rgba(13, 110, 253, .18), transparent 60%),
        radial-gradient(1000px 700px at 80% 0%, rgba(25, 135, 84, .14), transparent 55%),
        #0b0f14;
}

.soft-card {
    border-radius: var(--soft-radius);
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(16, 20, 28, .7);
    backdrop-filter: blur(10px);
}

.choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

@media (min-width: 768px) {
    .choice-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.choice-btn {
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .03);
    padding: .9rem .9rem;
    text-align: left;
    transition: transform .08s ease, border-color .12s ease, background-color .12s ease;
}

.choice-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .06);
}

.choice-btn.active {
    border-color: rgba(13, 110, 253, .8);
    background: rgba(13, 110, 253, .10);
}

.badge-soft {
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .06);
    font-weight: 600;
}

.poster {
    width: 100%;
    border-radius: 14px;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, .10);
}

.muted-link {
    color: rgba(255, 255, 255, .75);
    text-decoration: none;
}

.muted-link:hover {
    color: rgba(255, 255, 255, .92);
    text-decoration: underline;
}

.hr-soft {
    border-color: rgba(255, 255, 255, .10);
}