/* ---------------------------------------------------------------------
   Site-wide theme tokens.

   game-select.html is the reference design: a hue-driven gradient page
   background, white cards with a soft deep shadow, and every accent
   derived from --theme-hue instead of the old hard-coded red (#d9312b).
   The public pages (index, contact-us, faq, about-us, privacy-policy)
   used to each carry their own palette, so they looked like a different
   site. They now all pull from the tokens below.

   --theme-sat-mult is the "colorful vs. white/gray" switch from the
   header's theme picker: 1 = colored, 0 = neutral. Every color here
   multiplies its saturation by it, so a single toggle desaturates the
   whole site consistently.
   --------------------------------------------------------------------- */
:root {
    --theme-hue: 201;
    --theme-sat-mult: 1;

    /* Accents, dark -> light. --accent is the primary action color
       (header gradient start, buttons, active states). */
    --accent-deep:  hsl(var(--theme-hue), calc(100% * var(--theme-sat-mult, 1)), 30%);
    --accent:       hsl(var(--theme-hue), calc(100% * var(--theme-sat-mult, 1)), 38%);
    --accent-mid:   hsl(var(--theme-hue), calc(71%  * var(--theme-sat-mult, 1)), 59%);
    --accent-light: hsl(var(--theme-hue), calc(74%  * var(--theme-sat-mult, 1)), 71%);
    --accent-tint:  hsl(var(--theme-hue), calc(70%  * var(--theme-sat-mult, 1)), 96%);
    --accent-line:  hsl(var(--theme-hue), calc(55%  * var(--theme-sat-mult, 1)), 86%);
    --accent-shadow: hsla(var(--theme-hue), calc(100% * var(--theme-sat-mult, 1)), 38%, 0.28);

    --page-bg: linear-gradient(180deg,
        hsl(var(--theme-hue), calc(100% * var(--theme-sat-mult, 1)), 96%) 0%,
        hsl(var(--theme-hue), calc(78%  * var(--theme-sat-mult, 1)), 89%) 45%,
        hsl(var(--theme-hue), calc(72%  * var(--theme-sat-mult, 1)), 82%) 100%);
    --header-bg: linear-gradient(135deg, var(--accent) 0%, var(--accent-mid) 55%, var(--accent-light) 100%);

    /* Card surface - same numbers as game-select's .panel/.sidebar. */
    --card-bg: #fff;
    --card-radius: 16px;
    --card-shadow: 0 18px 35px rgba(0, 0, 0, .08);
    --card-border: #eceef4;

    --ink: #222;
    --ink-soft: #555;
    --ink-muted: #8a93a6;
    --danger: #d9312b;

    --font-stack: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    margin: 0;
    font-family: var(--font-stack);
    color: var(--ink);
    background: var(--page-bg);
    background-attachment: fixed;
    min-height: 100vh;
}

/* Shared page furniture --------------------------------------------- */

.themed-main {
    padding: 24px 20px 40px;
    max-width: 900px;
    margin: 0 auto;
}

.themed-card {
    background: var(--card-bg);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: 24px;
}

.page-title {
    text-align: center;
    color: var(--accent-deep);
    margin: 22px 0 6px;
    font-size: 26px;
}

.page-subtitle {
    text-align: center;
    color: var(--ink-soft);
    font-size: 14px;
    margin: 0 0 24px;
}

/* Pill button in the accent color - the site's primary action. */
.themed-btn {
    display: inline-block;
    padding: 12px 26px;
    border: none;
    border-radius: 14px;
    background: var(--accent);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: filter .2s, transform .2s, box-shadow .2s;
}

.themed-btn:hover {
    filter: brightness(1.12);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px var(--accent-shadow);
}

.themed-btn.outline {
    background: #fff;
    color: var(--accent);
    border: 2px solid var(--accent);
}

@media (max-width: 600px) {
    .themed-main { padding: 14px 12px 30px; }
    .themed-card { padding: 16px; border-radius: 14px; }
    .page-title { font-size: 22px; }
    .page-subtitle { font-size: 13px; }
}