/* ==========================================================
   HORROR SOLITAIRE - themes
   ========================================================== */

body[data-theme="bloodmoon"] {
    --table: #190606;
    --accent: #9b111e;

    background:
        radial-gradient(
            circle at 72% 8%,
            rgba(170, 20, 20, 0.32),
            transparent 42%
        ),
        radial-gradient(
            circle at 20% 90%,
            rgba(90, 10, 10, 0.28),
            transparent 45%
        ),
        #190606;
}

body[data-theme="graveyard"] {
    --table: #0d1510;
    --accent: #4c6b4a;

    background:
        radial-gradient(
            circle at 50% 12%,
            rgba(110, 150, 110, 0.16),
            transparent 45%
        ),
        radial-gradient(
            circle at 80% 88%,
            rgba(40, 70, 45, 0.28),
            transparent 45%
        ),
        #0d1510;
}

body[data-theme="haunted"] {
    --table: #171018;
    --accent: #6d3f70;

    background:
        radial-gradient(
            circle at 35% 10%,
            rgba(140, 80, 150, 0.2),
            transparent 45%
        ),
        radial-gradient(
            circle at 75% 85%,
            rgba(70, 35, 80, 0.3),
            transparent 45%
        ),
        #171018;
}

/* Vignette. Sits under the header and above the felt. */
body::before {
    content: "";

    position: fixed;
    inset: 0;
    z-index: 1;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center,
            transparent 38%,
            rgba(0, 0, 0, 0.55) 100%
        );
}

/* Film grain, drawn as SVG noise rather than a texture file. */
body::after {
    content: "";

    position: fixed;
    inset: 0;
    z-index: 2;

    pointer-events: none;
    opacity: 0.04;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Cards and controls must sit above the vignette. */
#game-board,
.game-header,
.game-footer {
    position: relative;
    z-index: 3;
}

body[data-theme="bloodmoon"] .game-header h1 { color: #d8b57c; }
body[data-theme="graveyard"] .game-header h1 { color: #a9bda4; }
body[data-theme="haunted"]   .game-header h1 { color: #c7a8c9; }