/* Error pages (/errors/*.html). Plain HTML so they still work when PHP or
   the database does not; each page draws its own park scene in SVG. */
:root {
    --err-bg: #f3f1ea;
    --err-ink: #243a28;
    --err-muted: #5d6b5f;
    --err-green: #2c5530;
    --err-green-2: #4a7c59;
    --err-sky: #dbe8e0;
    --err-far: #a9c2b0;
    --err-near: #6f9a7b;
    --err-ground: #c9b98f;
    --err-wood: #8a5a33;
    --err-wood-dark: #5e3c20;
    --err-stamp: #7a2b2b;
    --err-card: #ffffff;
    --err-snow: #f7f5ee;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --err-bg: #16201a;
        --err-ink: #e4ece5;
        --err-muted: #a6b5a9;
        --err-green: #7fb58c;
        --err-green-2: #5d9a6c;
        --err-sky: #1f3027;
        --err-far: #2f4a3a;
        --err-near: #3f6650;
        --err-ground: #5b5037;
        --err-wood: #9a6a40;
        --err-wood-dark: #6b4526;
        --err-stamp: #d57a6f;
        --err-card: #1d2a22;
        --err-snow: #b9c9bd;
    }
}
:root[data-theme="dark"] {
    --err-bg: #16201a;
    --err-ink: #e4ece5;
    --err-muted: #a6b5a9;
    --err-green: #7fb58c;
    --err-green-2: #5d9a6c;
    --err-sky: #1f3027;
    --err-far: #2f4a3a;
    --err-near: #3f6650;
    --err-ground: #5b5037;
    --err-wood: #9a6a40;
    --err-wood-dark: #6b4526;
    --err-stamp: #d57a6f;
    --err-card: #1d2a22;
    --err-snow: #b9c9bd;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
    background: var(--err-bg);
    color: var(--err-ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.err-top {
    padding: 14px 20px;
    font-weight: 600;
}
.err-top a { color: var(--err-green); text-decoration: none; }
.err-top a:hover { text-decoration: underline; }
main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 16px 48px;
    text-align: center;
}
.err-scene {
    position: relative;
    width: 100%;
    max-width: 560px;
}
.err-scene svg { width: 100%; height: auto; display: block; border-radius: 18px; }

/* A passport cancellation: the code, the club, and today's date. */
.err-cancel {
    position: absolute;
    right: -6px;
    bottom: -22px;
    width: 128px;
    height: 128px;
    border: 3px solid var(--err-stamp);
    border-radius: 50%;
    color: var(--err-stamp);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: rotate(-14deg);
    background: color-mix(in srgb, var(--err-bg) 80%, transparent);
    font-weight: 700;
    letter-spacing: 0.06em;
    opacity: 0.92;
}
.err-cancel::before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1.5px dashed var(--err-stamp);
    border-radius: 50%;
}
.err-cancel .code { font-size: 1.9rem; line-height: 1; }
.err-cancel .club { font-size: 0.6rem; margin-top: 4px; }
.err-cancel .date { font-size: 0.62rem; margin-top: 3px; min-height: 0.8em; }

h1 {
    margin: 40px 0 8px;
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    line-height: 1.15;
    text-wrap: balance;
}
p.err-line {
    margin: 0 0 24px;
    max-width: 34rem;
    color: var(--err-muted);
    font-size: 1.05rem;
    line-height: 1.5;
}
.err-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.err-actions a {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    border: 2px solid var(--err-green);
    color: var(--err-green);
}
.err-actions a.primary { background: var(--err-green); color: var(--err-bg); }
.err-actions a:hover { filter: brightness(1.08); }
.err-actions a:focus-visible, .err-top a:focus-visible { outline: 3px solid var(--err-green-2); outline-offset: 3px; }
.err-small { margin-top: 20px; font-size: 0.85rem; color: var(--err-muted); }
.err-small a { color: var(--err-green); }

@media (prefers-reduced-motion: no-preference) {
    .err-cancel { animation: err-stamp-in 0.45s ease-out 0.2s both; }
    @keyframes err-stamp-in {
        from { transform: rotate(-14deg) scale(1.6); opacity: 0; }
        to   { transform: rotate(-14deg) scale(1); opacity: 0.92; }
    }
}
@media (max-width: 480px) {
    .err-cancel { width: 96px; height: 96px; right: 4px; bottom: -18px; }
    .err-cancel .code { font-size: 1.4rem; }
    .err-cancel .club, .err-cancel .date { font-size: 0.5rem; }
}

/* Scene colours (SVG presentation attributes cannot use CSS variables). */
.s-sky { fill: var(--err-sky); }
.s-far { fill: var(--err-far); }
.s-snow { fill: var(--err-snow); }
.s-near { fill: var(--err-near); }
.s-ground { fill: var(--err-ground); }
.s-tree { fill: var(--err-green); }
.s-wood { fill: var(--err-wood); }
.s-wood-dark { fill: var(--err-wood-dark); }
.s-label { fill: #fdf8ea; font: 700 22px system-ui, sans-serif; letter-spacing: 1px; }
.s-label-sm { fill: #fdf8ea; font: 700 15px system-ui, sans-serif; letter-spacing: 1px; }
.s-stamp { fill: none; stroke: var(--err-stamp); }
.s-stamp-fill { fill: var(--err-stamp); }
.s-stamp-text { fill: var(--err-stamp); font: 700 15px system-ui, sans-serif; letter-spacing: 2px; }
.s-rock { fill: #8d8577; }
.s-rock-dark { fill: #6e675b; }
.s-road { fill: #6b6b66; }
.s-line { fill: #e9d77a; }
.s-cone { fill: #e0762f; }
.s-white { fill: #f7f3e8; }
.s-card { fill: var(--err-card); }
.s-ink { fill: var(--err-ink); }
@media (prefers-reduced-motion: no-preference) {
    .s-spin { transform-origin: 280px 165px; animation: s-spin 3.2s ease-in-out infinite; }
    @keyframes s-spin {
        0% { transform: rotate(-35deg); } 30% { transform: rotate(160deg); }
        55% { transform: rotate(80deg); } 80% { transform: rotate(250deg); } 100% { transform: rotate(325deg); }
    }
}