/* Board achtergrond over de hele pagina */
body {
    --accent: #1a73e878; /* clubblauw */
    --decor-opacity: 0.075; /* subtielheid */
    position: relative;
    isolation: isolate;
}

/* Diagonaal schaakbord patroon over de hele pagina */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    opacity: var(--decor-opacity);
    transform: rotate(-16deg) scale(1.5);
    background: repeating-conic-gradient(
        from 45deg,
        var(--accent) 0 25%,
        transparent 0 50%
      )
      0 0 / clamp(90px, 14vw, 160px) clamp(90px, 14vw, 160px);
    filter: saturate(1.05);
    pointer-events: none;
}

/* Het formulier component met witte achtergrond */
#dsc-faces-form-container > dsc-faces-form {
    display: block;
    max-width: 800px;
    margin: 30px auto;
    background: #fff;
    padding: clamp(30px, 5vw, 50px);
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 2;
}

/* Responsive aanpassing voor kleinere schermen */
@media (max-width: 720px) {
    #dsc-faces-form-container::before {
        transform: rotate(-14deg) scale(1.35);
    }

    #dsc-faces-form-container > dsc-faces-form {
        padding: clamp(20px, 4vw, 30px);
    }
}

/* Respect voor reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    #dsc-faces-form-container::before {
        transition: none;
    }
}