/* ============================================================
   theme.css — the site's colours and textures (Oct 1, 2026)

   Designer: "more rustic, like board game design" — colours and
   textures only; fonts unchanged, and the lobby's / rankings' wooden
   tables keep their own colours (set in those pages).

   Linked by index.php, login.php, account.php, admin.php,
   rankings.php and manual.php, AFTER each page's own <style>, so the
   texture rules here win. Every colour the site pages use is a
   variable below: change it here and every page follows. (The
   variable names are the old ones — --purple is now terracotta,
   --teal is now sage — so the pages didn't all need rewriting.)

   Textures are CSS gradients and one tiny inline SVG (no image files
   to download). Cached for a year by .htaccess; the pages add
   ?v=<file time>, so an upload is seen at once.

   The game pages and the manuals' own content keep their own looks.
   ============================================================ */

:root {
    /* Wood */
    --bg:        #2a1a0f;   /* walnut tabletop */
    --surface:   #3a2415;   /* stained panels, top bar */
    --surface2:  #24160c;   /* inset: inputs, tab strips */
    --border:    #6e4a2a;   /* worn wood edge */

    /* Paint and metal */
    --purple:    #d0784a;   /* terracotta: main buttons, headings */
    --purple-hi: #e08c5c;   /* its hover */
    --teal:      #a9bf7a;   /* sage: names, Enter */
    --gold:      #e0b04a;   /* brass: premium, Watch */
    --red:       #cf5640;   /* barn red: delete, errors */
    --green:     #8db552;   /* moss: public, success */

    /* Ink */
    --text:      #eadcc0;   /* parchment */
    --muted:     #b09878;   /* faded ink */
    --title:     #f0d9a8;   /* the site's name */

    --radius:    8px;
}

/* ── The tabletop: horizontal walnut boards ─────────────────── */
body {
    background-color: var(--bg);
    background-image:
        /* lamp light from above, darker at the edges */
        radial-gradient(ellipse 90% 70% at 50% 25%, rgba(255,214,150,.07), transparent 70%),
        radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.45) 100%),
        /* board seams */
        repeating-linear-gradient(180deg,
            transparent 0 157px,
            rgba(0,0,0,.40) 157px 159px,
            rgba(255,225,180,.05) 159px 160px),
        /* grain */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='320'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0035 0.11' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.03 0 0 0 0 0.01 1.6 0 0 0 -0.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    background-attachment: fixed;
}

/* ── Top bar: a darker rail with a brass edge ───────────────── */
.topbar {
    background-color: #2e1b0e;
    background-image:
        linear-gradient(180deg, rgba(255,225,180,.07), rgba(0,0,0,.25)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.16' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.04 0 0 0 0 0.02 0 0 0 0 0.01 1.6 0 0 0 -0.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    border-bottom: 3px solid #8a5a2b;
    box-shadow: inset 0 -1px 0 rgba(224,176,74,.45), 0 4px 12px rgba(0,0,0,.55);
}
/* Two colours, as the old purple / teal (designer, Oct 1, 2026): the plain
   "Digital Tabletop Games by" in terracotta, the linked "Abram Jones" in sage. */
.site-name   { color: var(--purple); text-shadow: 0 1px 0 #000; }
.site-name a { color: var(--teal); }
.site-name a:hover { color: var(--gold); }

/* ── Panels: wooden box lids ────────────────────────────────── */
.card, .section, .modal, .panel, .popup {
    background-color: var(--surface);
    background-image: linear-gradient(180deg, rgba(255,235,200,.045), rgba(0,0,0,.10));
    box-shadow: inset 0 1px 0 rgba(255,230,190,.08), 0 6px 18px rgba(0,0,0,.45);
}
.card-header, .section-header {
    background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.22));
}
.tab-bar { background: var(--surface2); }

/* ── Inputs: pressed into the wood ──────────────────────────── */
input[type=text], input[type=email], input[type=password], .form-group input {
    background: var(--surface2);
    color: var(--text);
    border-color: var(--border);
    box-shadow: inset 0 2px 4px rgba(0,0,0,.45);
}
input:focus, .form-group input:focus { border-color: var(--gold); }

/* ── Buttons: painted wooden tokens ─────────────────────────── */
.btn-purple, .btn-teal, .btn-gold, .btn-red, .btn-green,
.play-btn, .btn-submit, .btn {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -2px 0 rgba(0,0,0,.25), 0 2px 3px rgba(0,0,0,.35);
}
.btn-ghost { background: rgba(0,0,0,.18); }
.btn-ghost:hover { border-color: var(--purple); color: var(--purple); }
.btn-purple, .play-btn.begin, .btn-submit, .btn { color: #1e1208; }
.btn-purple:hover, .play-btn.begin:hover, .btn-submit:hover, .btn:hover { background: var(--purple-hi); }
.btn-red { color: #fff4e6; }