/*
 * Patriotic theme — red, white, and blue with American flags, stars,
 * and stripes. Falling star particles.
 */

:root[data-theme="patriotic"] {
    --color-bg: #f8fafc;
    --color-border: #cbd5e1;
    --color-text: #0f172a;
    --color-text-muted: #334155;

    --color-primary: #dc2626;
    --color-primary-hover: #991b1b;

    --color-accent: #1e40af;
    --color-accent-soft: #dbeafe;

    --color-called: #fecaca;
    --color-called-text: #7f1d1d;
    --color-current: #dc2626;

    --color-shadow: rgba(30, 64, 175, 0.14);
    --color-shadow-strong: rgba(30, 64, 175, 0.24);
}

[data-theme="patriotic"] body {
    background-color: var(--color-bg);
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg transform='translate(15 18)'%3E%3Crect width='32' height='17' fill='rgba(220,38,38,0.55)'/%3E%3Crect y='2.6' width='32' height='2.4' fill='rgba(255,255,255,0.9)'/%3E%3Crect y='7.8' width='32' height='2.4' fill='rgba(255,255,255,0.9)'/%3E%3Crect y='13' width='32' height='2.4' fill='rgba(255,255,255,0.9)'/%3E%3Crect width='14' height='10' fill='rgba(30,64,175,0.85)'/%3E%3Ccircle cx='3' cy='2.5' r='0.55' fill='white'/%3E%3Ccircle cx='6.5' cy='2.5' r='0.55' fill='white'/%3E%3Ccircle cx='10' cy='2.5' r='0.55' fill='white'/%3E%3Ccircle cx='4.5' cy='5' r='0.55' fill='white'/%3E%3Ccircle cx='8.5' cy='5' r='0.55' fill='white'/%3E%3Ccircle cx='3' cy='7.5' r='0.55' fill='white'/%3E%3Ccircle cx='6.5' cy='7.5' r='0.55' fill='white'/%3E%3Ccircle cx='10' cy='7.5' r='0.55' fill='white'/%3E%3C/g%3E%3Cg transform='translate(125 115) rotate(-12)'%3E%3Crect width='32' height='17' fill='rgba(220,38,38,0.55)'/%3E%3Crect y='2.6' width='32' height='2.4' fill='rgba(255,255,255,0.9)'/%3E%3Crect y='7.8' width='32' height='2.4' fill='rgba(255,255,255,0.9)'/%3E%3Crect y='13' width='32' height='2.4' fill='rgba(255,255,255,0.9)'/%3E%3Crect width='14' height='10' fill='rgba(30,64,175,0.85)'/%3E%3Ccircle cx='3' cy='2.5' r='0.55' fill='white'/%3E%3Ccircle cx='6.5' cy='2.5' r='0.55' fill='white'/%3E%3Ccircle cx='10' cy='2.5' r='0.55' fill='white'/%3E%3Ccircle cx='4.5' cy='5' r='0.55' fill='white'/%3E%3Ccircle cx='8.5' cy='5' r='0.55' fill='white'/%3E%3Ccircle cx='3' cy='7.5' r='0.55' fill='white'/%3E%3Ccircle cx='6.5' cy='7.5' r='0.55' fill='white'/%3E%3Ccircle cx='10' cy='7.5' r='0.55' fill='white'/%3E%3C/g%3E%3Cpolygon points='0,-9 2.2,-3.2 9,-3.2 3.6,1 5.6,7.2 0,3.6 -5.6,7.2 -3.6,1 -9,-3.2 -2.2,-3.2' fill='rgba(30,64,175,0.65)' transform='translate(115 35)'/%3E%3Cpolygon points='0,-9 2.2,-3.2 9,-3.2 3.6,1 5.6,7.2 0,3.6 -5.6,7.2 -3.6,1 -9,-3.2 -2.2,-3.2' fill='rgba(220,38,38,0.6)' transform='translate(35 100)'/%3E%3Cpolygon points='0,-6 1.5,-2.1 6,-2.1 2.4,0.6 4,4.8 0,2.4 -4,4.8 -2.4,0.6 -6,-2.1 -1.5,-2.1' fill='rgba(220,38,38,0.55)' transform='translate(75 60)'/%3E%3Cpolygon points='0,-6 1.5,-2.1 6,-2.1 2.4,0.6 4,4.8 0,2.4 -4,4.8 -2.4,0.6 -6,-2.1 -1.5,-2.1' fill='rgba(30,64,175,0.6)' transform='translate(155 70)'/%3E%3Cpolygon points='0,-5 1.2,-1.7 5,-1.7 2,0.7 3.3,4 0,2 -3.3,4 -2,0.7 -5,-1.7 -1.2,-1.7' fill='rgba(220,38,38,0.55)' transform='translate(90 165)'/%3E%3Cpolygon points='0,-5 1.2,-1.7 5,-1.7 2,0.7 3.3,4 0,2 -3.3,4 -2,0.7 -5,-1.7 -1.2,-1.7' fill='rgba(30,64,175,0.6)' transform='translate(20 145)'/%3E%3Cg transform='translate(60 158)'%3E%3Crect x='0' y='0' width='28' height='2' fill='rgba(220,38,38,0.55)'/%3E%3Crect x='0' y='4' width='28' height='2' fill='rgba(220,38,38,0.55)'/%3E%3Crect x='0' y='8' width='28' height='2' fill='rgba(220,38,38,0.55)'/%3E%3C/g%3E%3Cg transform='translate(155 25)'%3E%3Crect x='0' y='0' width='20' height='2' fill='rgba(220,38,38,0.55)'/%3E%3Crect x='0' y='4' width='20' height='2' fill='rgba(30,64,175,0.55)'/%3E%3Crect x='0' y='8' width='20' height='2' fill='rgba(220,38,38,0.55)'/%3E%3C/g%3E%3Ccircle cx='165' cy='130' r='1.6' fill='rgba(220,38,38,0.65)'/%3E%3Ccircle cx='10' cy='75' r='1.6' fill='rgba(30,64,175,0.65)'/%3E%3Ccircle cx='75' cy='130' r='1.4' fill='rgba(220,38,38,0.6)'/%3E%3Ccircle cx='165' cy='90' r='1.4' fill='rgba(30,64,175,0.6)'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

[data-theme="patriotic"] .state-card {
    border-top: 4px solid var(--color-primary);
}

[data-theme="patriotic"] .grid-pane {
    border-top: 4px solid var(--color-accent);
}