@font-face {
    font-family: 'Mona Sans';
    src:
        url('../uploads/Mona-Sans.woff2') format('woff2 supports variations'),
        url('../uploads/Mona-Sans.woff2') format('woff2-variations');
    font-weight: 200 900;
    font-stretch: 75% 125%;
}

@font-face {
    font-family: 'Brittany Signature';
    src: url('../uploads/brittanySignature.ttf') format('truetype');
    font-weight: 400;
}

:root {
    /* Section backgrounds: semi-transparent so parallax image shows through */
    --sdv-bg:        rgba(236, 170, 103, 0.82);
    --sdv-bg-alt:    rgba(217, 142,  74, 0.82);
    --sdv-bg-light:  rgba(240, 180, 114, 0.82);
    /* Cards/inputs: near-opaque for readable text */
    --sdv-input-bg:  rgba(249, 186, 102, 0.96);
    /* Solid structural colours */
    --sdv-dark:      #5B2B2A;
    --sdv-highlight: #D87E00;
    --sdv-border: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAAAwCAYAAABHTnUeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAFJSURBVHhe7d2xLkNRAMbxthODwWjRSMoksQkmDB7AzANYvYA38BQewAtglLAaJU0sRgOJ2KSnR1LtIHfSm+/3S5p+D3D/OT1Lb7czo79QR7G3Mzirs1h7f72sE1pnuLRyXmfRq98QSQBEEwDRZu4Au9sHh3UWpxtfN3UWR/3HuqB9Lq7X6xpzAhBNAEQTANEa3wGO9+uollc364L/9/byVNfYx/D3ndUdACYIgGgCIFrjAEa/+Sc/ME+aPp9OAKIJgGgCIJoAiCYAogmAaAIgmgCIJgCiCYBoAiCaAIgmAKIJgGgCIJoAiCYAogmAaAIgmgCIJgCiCYBoAiBa4wBG/704+YF50vT5dAIQTQBEEwDR/nw/QLfX26qzOBl8ek8wrXX1vOg9wfBDAEQTANFm7gDTpu8E0Gb3D3e3dRZOAKIJgGgCIFin8w1hGzcGhh+qLAAAAABJRU5ErkJggg==');
}

/* ── Parallax background ─────────────────────────────────────────────────── */
html {
    background-image: url('../uploads/background.png');
    background-attachment: fixed;   /* parallax: bg stays put while content scrolls */
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    min-height: 100%;
}

body {
    background-color: transparent;  /* let html background show through */
}

/* On iOS/Android, background-attachment:fixed is unreliable; fall back to
   a stationary tiled background so the image still shows on mobile. */
@media (max-width: 768px) {
    html {
        background-attachment: scroll;
        background-size: cover;
    }
}

/* Pixel border utility — apply to cards, panels, inputs */
.pixel-border {
    border-style: solid;
    border-width: 5px;
    border-image-slice: 20;
    border-image-width: 10px 20px;
    border-image-outset: 0 20px;
    border-image-repeat: round;
    border-image-source: var(--sdv-border);
}

/* Font utility classes — map to Stardew Valley font */
.monasans        { font-family: 'Stardew Valley', sans-serif; }
.monasans-bold   { font-family: 'Stardew Valley', sans-serif; font-weight: 700; }
.monasans-wide   { font-family: 'Stardew Valley', sans-serif; }
.brittanysignature { font-family: 'Brittany Signature'; font-weight: 700; }

.white { color: var(--sdv-dark); }
.area  { min-height: 50vh; }