/* ============================================================================
   Divine X — OSRS Interface Theme
   Wood-panel chrome, parchment panels with iron studs, RuneScape-yellow
   accents. Every page imports this; the look cascades everywhere.
   ============================================================================ */

:root {
    /* ── OSRS palette ── */
    --osrs-bg-dark:       #1f1611;   /* stone / dirt outer */
    --osrs-bg:            #2d231a;   /* default dark behind UI */
    --osrs-bg-soft:       #3a2d1f;

    --wood-light:         #8a6a3f;
    --wood:               #6b5739;
    --wood-dark:          #3c2e1c;
    --wood-edge:          #221710;
    --wood-grain:         #5d4a30;

    --iron:               #4b463e;
    --iron-light:         #7a7064;
    --iron-rust:          #6f3c1b;

    --parchment:          #d6c094;   /* the classic OSRS panel beige */
    --parchment-warm:     #ddc599;
    --parchment-shadow:   #a08658;
    --parchment-edge:     #715a36;

    --osrs-yellow:        #ffff00;   /* level-up + welcome text */
    --osrs-yellow-dim:    #d4d400;
    --osrs-orange:        #ff9040;   /* level-up flash */
    --osrs-green:         #00ff00;   /* chat names */
    --osrs-red:           #ff3030;   /* warnings */
    --osrs-cyan:          #00ffff;   /* private chat */
    --osrs-purple:        #ff00ff;   /* friends chat */

    --text-bone:          #f0e6d2;
    --text-dim:           #b5a583;
    --text-on-parchment:  #1e1408;
    --text-on-parchment-dim: #5a4824;

    --hp-green:           #4caf3a;
    --hp-bg:              #1c2218;
    --prayer-blue:        #54adff;

    /* tokens used by legacy inline styles on store/profile/etc. */
    --primary:            var(--wood-light);
    --primary-dark:       var(--wood);
    --primary-light:      #b08858;
    --dark-bg:            var(--osrs-bg-dark);
    --card-bg:            var(--parchment);
    --text-secondary:     var(--text-dim);
    --gold:               #d4af37;
    --gold-bright:        #ffd84d;
    --accent:             var(--osrs-orange);
    --success:            var(--osrs-green);
    --danger:             var(--osrs-red);

    /* 2026-06-06 user: "for the vote page at the top hard to see the text
       bc itrs black should be white." Several pages (vote.php, etc.) still
       reference grimoire-era CSS variables that this theme dropped. With
       no fallback, `color: var(--bone-dim)` resolves to nothing and the
       browser uses the inherited / default color — which lands as BLACK
       on the dark stone background, making text unreadable. Bridge the
       grimoire token names to OSRS-theme equivalents so the cascading
       inline styles light up correctly. */
    --bone:               var(--text-bone);
    --bone-dim:           #e8dcc4;
    --ash:                #b5a583;
    --ash-dim:            #968163;
    --sigil-gold:         var(--gold);
    --sigil-gold-2:       var(--osrs-yellow);
    --ember:              #d4691a;
    --ember-bright:       var(--osrs-orange);
    --ember-soft:         #ffcb74;
    --ember-hot:          #ff7a1a;
    --vellum:             var(--parchment);
    --vellum-warm:        var(--parchment-warm);
    --vellum-dark:        #6b5739;
    --ink-abyss:          var(--osrs-bg-dark);
    --ink-deep:           var(--osrs-bg);
    --arcane:             #7a3ec0;
    --arcane-bright:      #b97aff;
}

/* ─── base ─── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: 'Arial', 'Helvetica', sans-serif;
    font-size: 14px;
    color: var(--text-bone);
    /* dark stone tile background — repeating noise that reads like compacted dirt */
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='5'/><feColorMatrix values='0 0 0 0 0.13 0 0 0 0 0.10 0 0 0 0 0.06 0 0 0 0.45 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>"),
        linear-gradient(180deg, var(--osrs-bg-dark) 0%, #14100c 100%);
    background-attachment: fixed;
    line-height: 1.5;
    overflow-x: hidden;
    image-rendering: -webkit-optimize-contrast;
}

/* turn off everything the previous themes left behind */
.cosmic-bg, .grid-overlay, .orb, .stars, .rune-corner,
#grimoire-embers, #grimoire-torch, #quill-cursor, .ink-trail,
.ribbon-nav, .ribbon,
.tome-spread, .tome-page, .tome-spine, .codex-spread,
.giveaway-banner {
    display: none !important;
}
body.codex { cursor: auto; }

h1, h2, h3, h4 {
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 700;
    color: var(--osrs-yellow);
    margin: 0 0 .6em;
    text-shadow:
        2px 2px 0 rgba(0,0,0,0.85),
        0 0 8px rgba(0,0,0,0.7);
    letter-spacing: 0.02em;
}
h1 { font-size: clamp(2rem, 4vw, 3.6rem); }
h2 { font-size: clamp(1.5rem, 2.4vw, 2.2rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.05rem; color: var(--osrs-orange); }

a { color: var(--osrs-yellow); text-decoration: none; }
a:hover { color: #fff; text-decoration: underline; }

p { margin: 0 0 0.8em; }
img { max-width: 100%; display: block; }

/* ============================================================================
   NAVBAR — wood plank with hammered iron studs
   ============================================================================ */
.navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='10' viewBox='0 0 200 10'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='2.5 0.6' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0.20 0 0 0 0 0.13 0 0 0 0 0.07 0 0 0 0.45 0'/></filter><rect width='200' height='10' filter='url(%23n)'/></svg>"),
        linear-gradient(180deg, var(--wood-light) 0%, var(--wood) 35%, var(--wood-dark) 100%);
    border-top: 2px solid #2a1f12;
    border-bottom: 4px solid var(--wood-edge);
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 170, 0.18),
        inset 0 -8px 14px rgba(0, 0, 0, 0.45),
        0 6px 0 rgba(0, 0, 0, 0.55),
        0 14px 20px rgba(0, 0, 0, 0.6);
    /* iron studs left + right */
    position: sticky;
}
.navbar::before, .navbar::after {
    content: "";
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, #c6bbab 0%, #6f6657 45%, #2a241b 100%);
    box-shadow: 0 2px 3px rgba(0,0,0,0.7), inset -2px -3px 3px rgba(0,0,0,0.6), inset 2px 2px 2px rgba(255,255,255,0.18);
}
.navbar::before { left: 10px; }
.navbar::after  { right: 10px; }

.nav-container {
    max-width: 1400px; margin: 0 auto;
    padding: 12px 50px;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.nav-brand {
    display: flex; align-items: center; gap: 12px;
    font-family: 'Cinzel', serif; font-weight: 800; font-size: 22px;
    color: var(--osrs-yellow);
    text-shadow: 2px 2px 0 #000, 0 0 12px rgba(255, 220, 70, 0.45);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.nav-brand img {
    width: 40px; height: 40px;
    border-radius: 4px;
    border: 2px solid #2a1f12;
    box-shadow: inset 0 0 0 1px rgba(255, 220, 170, 0.25), 0 2px 4px rgba(0,0,0,0.6);
    image-rendering: pixelated;
}

.nav-links { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nav-links a {
    padding: 8px 16px;
    color: var(--text-bone);
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: 2px solid #2a1f12;
    border-radius: 5px;
    background: linear-gradient(180deg, var(--wood-light) 0%, var(--wood) 50%, var(--wood-dark) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 170, 0.3),
        inset 0 -2px 0 rgba(0, 0, 0, 0.45),
        0 2px 0 #1a120a;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
    transition: transform 0.08s ease, box-shadow 0.08s ease, color 0.15s ease;
}
.nav-links a:hover {
    color: var(--osrs-yellow);
    text-decoration: none;
    background: linear-gradient(180deg, #a68250 0%, var(--wood-light) 50%, var(--wood) 100%);
}
.nav-links a:active, .nav-links a.active {
    transform: translateY(2px);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.65);
    color: var(--osrs-yellow);
}
.nav-links a.nav-cta {
    background: linear-gradient(180deg, #e6a64a 0%, #c47a1c 50%, #7e4a0e 100%);
    color: #1a0c04;
    text-shadow: 1px 1px 0 rgba(255, 220, 170, 0.4);
}
.nav-links a.nav-cta:hover {
    background: linear-gradient(180deg, #ffb858 0%, #d8881e 50%, #8e5a14 100%);
    color: #000;
}

.mobile-menu-btn {
    display: none;
    background: linear-gradient(180deg, var(--wood-light), var(--wood-dark));
    border: 2px solid #2a1f12;
    color: var(--osrs-yellow); width: 42px; height: 42px; border-radius: 5px; cursor: pointer; font-size: 18px;
    box-shadow: inset 0 1px 0 rgba(255,220,170,0.3), 0 2px 0 #1a120a;
}
@media (max-width: 980px) {
    .nav-links { display: none; }
    .mobile-menu-btn { display: inline-flex; align-items: center; justify-content: center; }
    .nav-container { padding: 10px 50px; }
}

/* ============================================================================
   OSRS INTERFACE PANEL — beige parchment + iron rivets at all 4 corners
   This is the workhorse component. Used wherever cards go on the old theme.
   ============================================================================ */
.tome, .grimoire-card, .card, .glass-card,
.osrs-panel, .quest-panel {
    position: relative;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' seed='9'/><feColorMatrix values='0 0 0 0 0.50 0 0 0 0 0.40 0 0 0 0 0.24 0 0 0 0.12 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>"),
        linear-gradient(180deg, var(--parchment-warm) 0%, var(--parchment) 100%);
    background-blend-mode: multiply, normal;
    color: var(--text-on-parchment);
    border: 3px solid var(--wood-edge);
    border-radius: 4px;
    padding: 22px 26px;
    box-shadow:
        0 0 0 2px var(--parchment-edge),
        0 0 0 5px var(--wood),
        0 0 0 7px var(--wood-edge),
        0 10px 30px rgba(0, 0, 0, 0.65),
        inset 0 0 40px rgba(180, 145, 90, 0.25);
}
.tome::before, .grimoire-card::before, .card::before, .glass-card::before,
.osrs-panel::before, .quest-panel::before,
.tome::after, .grimoire-card::after, .card::after, .glass-card::after,
.osrs-panel::after, .quest-panel::after {
    /* iron rivets at the four corners */
    content: "";
    position: absolute;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #d2c8b6 0%, #7a7164 50%, #2a241b 100%);
    box-shadow: 0 1px 2px rgba(0,0,0,0.75), inset -1px -2px 2px rgba(0,0,0,0.55), inset 1px 1px 1px rgba(255,255,255,0.25);
    z-index: 2;
}
.tome::before, .grimoire-card::before, .card::before, .glass-card::before,
.osrs-panel::before, .quest-panel::before { top: 6px; left: 6px; box-shadow: 0 1px 2px rgba(0,0,0,0.75), inset -1px -2px 2px rgba(0,0,0,0.55), inset 1px 1px 1px rgba(255,255,255,0.25); }
.tome::after, .grimoire-card::after, .card::after, .glass-card::after,
.osrs-panel::after, .quest-panel::after { top: 6px; right: 6px; }
/* The bottom two rivets — we faked them with a single utility class */
.osrs-panel, .quest-panel, .tome, .grimoire-card, .card, .glass-card {
    background-attachment: scroll;
}

/* Use this wrapper to get all 4 rivets visible (since pseudos are only 2). */
.rivet-tl, .rivet-tr, .rivet-bl, .rivet-br {
    position: absolute; width: 14px; height: 14px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #d2c8b6 0%, #7a7164 50%, #2a241b 100%);
    box-shadow: 0 1px 2px rgba(0,0,0,0.75), inset -1px -2px 2px rgba(0,0,0,0.55), inset 1px 1px 1px rgba(255,255,255,0.25);
    z-index: 2; pointer-events: none;
}
.rivet-tl { top: 6px; left: 6px; }
.rivet-tr { top: 6px; right: 6px; }
.rivet-bl { bottom: 6px; left: 6px; }
.rivet-br { bottom: 6px; right: 6px; }

/* Headings inside parchment switch to dark ink */
.osrs-panel h1, .osrs-panel h2, .osrs-panel h3, .osrs-panel h4,
.quest-panel h1, .quest-panel h2, .quest-panel h3, .quest-panel h4,
.tome h1, .tome h2, .tome h3, .grimoire-card h1, .grimoire-card h2, .grimoire-card h3,
.card h1, .card h2, .card h3, .glass-card h1, .glass-card h2, .glass-card h3 {
    color: #5a2410;
    text-shadow: 1px 1px 0 rgba(255, 220, 170, 0.35);
}
.osrs-panel p, .quest-panel p, .tome p, .grimoire-card p, .card p, .glass-card p {
    color: var(--text-on-parchment);
}
.osrs-panel a, .quest-panel a { color: #6e2a08; font-weight: bold; }
.osrs-panel a:hover, .quest-panel a:hover { color: #b8480c; }

/* ============================================================================
   WOOD BUTTON — the classic OSRS interface button
   ============================================================================ */
.btn, .seal-btn, .button, button.cta, .osrs-btn,
.vote-card .vote-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 28px;
    border: 2px solid #1a120a;
    border-radius: 6px;
    background: linear-gradient(180deg, var(--wood-light) 0%, var(--wood) 50%, var(--wood-dark) 100%);
    color: var(--osrs-yellow);
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.85);
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 170, 0.32),
        inset 0 -2px 0 rgba(0, 0, 0, 0.5),
        0 3px 0 #1a120a,
        0 5px 10px rgba(0, 0, 0, 0.55);
    cursor: pointer;
    transition: transform 0.08s ease, box-shadow 0.08s ease, color 0.15s ease;
    text-decoration: none;
}
.btn:hover, .seal-btn:hover, .button:hover, button.cta:hover, .osrs-btn:hover,
.vote-card .vote-btn:hover {
    background: linear-gradient(180deg, #a68250 0%, var(--wood-light) 50%, var(--wood) 100%);
    color: #fff;
    text-decoration: none;
}
.btn:active, .seal-btn:active, .button:active, button.cta:active, .osrs-btn:active,
.vote-card .vote-btn:active {
    transform: translateY(3px);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.65),
        0 0 0 #1a120a;
}

/* Orange CTA variant — for primary "Play" actions */
.btn.btn-primary, .osrs-btn.primary {
    background: linear-gradient(180deg, #e6a64a 0%, #c47a1c 50%, #7e4a0e 100%);
    color: #1a0c04;
    text-shadow: 1px 1px 0 rgba(255, 220, 170, 0.45);
    border-color: #3c1f06;
    box-shadow:
        inset 0 1px 0 rgba(255, 240, 200, 0.45),
        inset 0 -2px 0 rgba(0, 0, 0, 0.4),
        0 3px 0 #3c1f06,
        0 5px 14px rgba(196, 122, 28, 0.4);
}
.btn.btn-primary:hover, .osrs-btn.primary:hover {
    background: linear-gradient(180deg, #ffc878 0%, #d8881e 50%, #8e5a14 100%);
    color: #000;
}

/* ============================================================================
   CHATBOX — OSRS chatbox styling used for live activity feeds
   ============================================================================ */
.chatbox {
    background: #000;
    border: 3px solid var(--wood-edge);
    border-radius: 4px;
    box-shadow:
        0 0 0 2px var(--wood),
        0 0 0 4px var(--wood-edge),
        0 10px 20px rgba(0,0,0,0.55),
        inset 0 0 0 1px #5a4824;
    padding: 14px 16px;
    font-family: 'Arial', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: #fff;
    /* 2026-06-07 user: "for the live server news can we also add a scroll
       bar so we can see all server news previous?" Fixed height + custom
       scrollbar so the panel doesn't keep stretching the homepage and the
       player can flick back through history. */
    height: 360px;
    max-height: 360px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--osrs-yellow) #1a1006;
}
.chatbox::-webkit-scrollbar { width: 10px; }
.chatbox::-webkit-scrollbar-track {
    background: #1a1006;
    border-left: 1px solid var(--wood-edge);
}
.chatbox::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #8a6a3f, #3c2e1c);
    border: 1px solid var(--wood-edge);
    border-radius: 2px;
}
.chatbox::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #a68250, #6b5739);
}
.chatbox .line { margin: 2px 0; text-shadow: 1px 1px 0 #000; }
.chatbox .name { color: var(--osrs-green); font-weight: bold; }
.chatbox .name.staff { color: var(--osrs-purple); }
.chatbox .name.system { color: var(--osrs-yellow); }
.chatbox .msg-yellow { color: var(--osrs-yellow); }
.chatbox .msg-orange { color: var(--osrs-orange); }
.chatbox .msg-cyan   { color: var(--osrs-cyan); }
.chatbox .msg-red    { color: var(--osrs-red); }
.chatbox .msg-green  { color: var(--osrs-green); }
.chatbox .ts { color: #888; margin-right: 6px; }

/* ============================================================================
   STATS / HIGHSCORE ROW (the in-game highscores table look)
   ============================================================================ */
.hs-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.hs-table th, .hs-table td {
    padding: 9px 12px;
    border-bottom: 1px solid rgba(0,0,0,0.18);
    text-align: left;
}
.hs-table thead th {
    background: linear-gradient(180deg, var(--wood-light), var(--wood-dark));
    color: var(--osrs-yellow);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11px;
    border: 2px solid #1a120a;
    text-shadow: 1px 1px 0 #000;
}
.hs-table tbody tr:nth-child(odd)  td { background: rgba(255,235,200,0.5); }
.hs-table tbody tr:nth-child(even) td { background: rgba(180,150,100,0.3); }
.hs-table tbody tr:hover td { background: rgba(255,255,0,0.18); }
.hs-table td { color: var(--text-on-parchment); }
.hs-table .rank { font-weight: bold; color: #5a2410; }
.hs-table .rank.gold   { color: #b8870b; }
.hs-table .rank.silver { color: #6a6a6a; }
.hs-table .rank.bronze { color: #8a4a18; }

/* ============================================================================
   SKILL ORBS — the round HP/Prayer/Run/Special tokens
   Decorative only; used in hero strip.
   ============================================================================ */
.orb-strip { display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; }
.osrs-orb {
    position: relative;
    width: 90px; height: 90px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 28%, #c6bbab 0%, #6f6657 40%, #2a241b 100%);
    box-shadow:
        inset 0 -8px 14px rgba(0,0,0,0.6),
        inset 0 4px 6px rgba(255,255,255,0.2),
        0 6px 14px rgba(0,0,0,0.6);
    display: grid; place-items: center;
}
.osrs-orb .inner {
    width: 64px; height: 64px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 28%, rgba(255,255,255,0.55), transparent 55%),
        radial-gradient(circle at 50% 100%, rgba(0,0,0,0.5), transparent 55%),
        var(--orb-fill, #4caf3a);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4);
    display: grid; place-items: center;
    font-family: 'Cinzel', serif; font-weight: 800; font-size: 24px;
    color: #fff;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.8), 0 0 6px rgba(0,0,0,0.6);
}
.osrs-orb.hp     { --orb-fill: #c63b3b; }
.osrs-orb.prayer { --orb-fill: #4f9aff; }
.osrs-orb.run    { --orb-fill: #e0d04b; }
.osrs-orb.spec   { --orb-fill: #9a5edc; }
.osrs-orb .label {
    position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%);
    font-family: 'Arial', sans-serif; font-weight: bold; font-size: 11px;
    color: var(--osrs-yellow); text-shadow: 1px 1px 0 #000;
    text-transform: uppercase; letter-spacing: 0.1em;
    white-space: nowrap;
}

/* ============================================================================
   QUEST SCROLL — banner-shaped panel for hero & special callouts
   ============================================================================ */
.quest-scroll {
    position: relative;
    padding: 36px 60px;
    margin: 30px auto;
    max-width: 920px;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' seed='9'/><feColorMatrix values='0 0 0 0 0.50 0 0 0 0 0.40 0 0 0 0 0.24 0 0 0 0.12 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>"),
        linear-gradient(180deg, #e8d29c 0%, #d4b884 100%);
    background-blend-mode: multiply, normal;
    color: var(--text-on-parchment);
    border-radius: 6px;
    box-shadow:
        inset 0 0 30px rgba(120, 88, 40, 0.4),
        0 10px 30px rgba(0, 0, 0, 0.55);
    text-align: center;
}
.quest-scroll::before, .quest-scroll::after {
    /* rolled scroll ends (left + right) — wood-textured spindles */
    content: "";
    position: absolute;
    top: -10px; bottom: -10px;
    width: 28px;
    background:
        linear-gradient(90deg, var(--wood-dark) 0%, var(--wood) 40%, var(--wood-light) 50%, var(--wood) 60%, var(--wood-dark) 100%);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(0,0,0,0.6);
}
.quest-scroll::before { left: -22px; }
.quest-scroll::after  { right: -22px; }
.quest-scroll h1 { color: #5a2410; margin-bottom: 8px; text-shadow: 1px 1px 0 rgba(255,220,170,0.4); }
.quest-scroll h2 { color: #5a2410; }
.quest-scroll p { color: var(--text-on-parchment); font-size: 16px; }
.quest-scroll .welcome {
    color: var(--osrs-yellow);
    background: #000;
    display: inline-block;
    padding: 6px 14px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #000;
    margin-bottom: 14px;
    font-family: 'Arial', sans-serif;
    letter-spacing: 0.05em;
    font-size: 14px;
    border: 2px solid #5a4824;
}

/* ============================================================================
   HERO LAYOUT
   ============================================================================ */
.hero, .hero-cosmic, .hero-grimoire {
    position: relative;
    padding: 60px 28px 40px;
    text-align: center;
}
.hero h1 {
    text-transform: uppercase;
    background: none;
    -webkit-text-fill-color: var(--osrs-yellow);
    color: var(--osrs-yellow);
    text-shadow:
        3px 3px 0 #000,
        0 0 18px rgba(255, 220, 70, 0.45);
    letter-spacing: 0.04em;
}
.hero p, .hero-grimoire .lede { color: var(--text-bone); }

/* ============================================================================
   FOOTER — thick wood plank
   ============================================================================ */
.footer, footer {
    margin-top: 80px;
    padding: 36px 28px 28px;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='10' viewBox='0 0 200 10'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='2.5 0.6' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0.20 0 0 0 0 0.13 0 0 0 0 0.07 0 0 0 0.45 0'/></filter><rect width='200' height='10' filter='url(%23n)'/></svg>"),
        linear-gradient(180deg, var(--wood-light) 0%, var(--wood) 35%, var(--wood-dark) 100%);
    border-top: 4px solid var(--wood-edge);
    box-shadow: inset 0 8px 14px rgba(0, 0, 0, 0.45);
    color: var(--text-bone);
    text-align: center;
    font-size: 13px;
}
.footer a, footer a { color: var(--osrs-yellow); margin: 0 8px; font-weight: bold; }
.footer a:hover, footer a:hover { color: #fff; }
.footer-brand, .footer .footer-brand {
    font-family: 'Cinzel', serif; font-weight: 800; font-size: 20px;
    color: var(--osrs-yellow);
    text-shadow: 2px 2px 0 #000;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.footer-copy, .footer .footer-copy { color: #b5a583; font-size: 11px; margin-top: 10px; letter-spacing: 0.1em; text-transform: uppercase; }

/* ============================================================================
   FORMS
   ============================================================================ */
input, select, textarea {
    width: 100%;
    padding: 10px 12px;
    background: #0c0a08;
    color: var(--text-bone);
    border: 2px solid #1a120a;
    border-radius: 4px;
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.65);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--osrs-yellow);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.65), 0 0 0 2px rgba(255, 255, 0, 0.25);
}
label {
    display: block;
    margin-bottom: 4px;
    color: var(--osrs-yellow);
    font-weight: bold;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-shadow: 1px 1px 0 #000;
}

/* ============================================================================
   BADGES / ALERTS
   ============================================================================ */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 3px;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: linear-gradient(180deg, var(--wood-light), var(--wood-dark));
    color: var(--osrs-yellow);
    border: 1px solid #1a120a;
    text-shadow: 1px 1px 0 #000;
}
.badge.ember  { background: linear-gradient(180deg, #e6a64a, #7e4a0e); color: #fff; }
.badge.arcane { background: linear-gradient(180deg, #8a4ec0, #3a1f5e); color: #fff; }
.badge.blood, .badge.danger  { background: linear-gradient(180deg, #c63b3b, #5a0e0e); color: #fff; }
.badge.success { background: linear-gradient(180deg, #4caf3a, #1c5512); color: #fff; }

.alert, .notice {
    padding: 12px 16px;
    border: 2px solid var(--wood-edge);
    border-left: 5px solid var(--osrs-yellow);
    background: #0c0a08;
    color: var(--text-bone);
    border-radius: 4px;
    margin: 14px 0;
}
.alert.error, .notice.error { border-left-color: var(--osrs-red); }
.alert.success, .notice.success { border-left-color: var(--osrs-green); }

/* ============================================================================
   CONTAINER + SECTION TOKENS
   ============================================================================ */
.container, .page-wrap { max-width: 1280px; margin: 0 auto; padding: 0 28px; }
.section { padding: 60px 0; }
.section-head { text-align: center; margin-bottom: 36px; }
.section-head h2 { color: var(--osrs-yellow); }
.section-head p { color: var(--text-dim); max-width: 640px; margin: 0 auto; }
.eyebrow {
    display: inline-block; padding: 4px 12px;
    background: #000;
    border: 1px solid #5a4824;
    color: var(--osrs-yellow);
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 14px;
    text-shadow: 1px 1px 0 #000;
}

/* Stat tile (used everywhere) */
.stat, .stat-tile {
    background: linear-gradient(180deg, var(--parchment-warm), var(--parchment));
    border: 3px solid var(--wood-edge);
    border-radius: 4px;
    padding: 18px 12px;
    text-align: center;
    color: var(--text-on-parchment);
    box-shadow: 0 0 0 2px var(--wood), 0 4px 10px rgba(0,0,0,0.45);
}
.stat .number, .stat-tile .number {
    font-family: 'Cinzel', serif; font-weight: 800;
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    color: #5a2410;
    text-shadow: 1px 1px 0 rgba(255, 220, 170, 0.5);
}
.stat .label, .stat-tile .label {
    font-family: 'Arial', sans-serif; font-weight: bold;
    font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
    color: var(--text-on-parchment-dim);
}

/* ============================================================================
   SCROLLBAR + SELECTION — small touches but they sell the theme
   ============================================================================ */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: #0c0a08; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--wood-light), var(--wood-dark));
    border: 2px solid #1a120a;
    border-radius: 3px;
    box-shadow: inset 0 1px 0 rgba(255,220,170,0.25);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #a68250, var(--wood)); }

::selection { background: var(--osrs-yellow); color: #000; }

/* utility */
.text-yellow { color: var(--osrs-yellow); }
.text-orange { color: var(--osrs-orange); }
.text-green  { color: var(--osrs-green); }
.text-red    { color: var(--osrs-red); }
.text-bone   { color: var(--text-bone); }
.text-dim    { color: var(--text-dim); }
.text-center { text-align: center; }

.divider, .divider-rune {
    height: 4px;
    margin: 32px auto;
    max-width: 70%;
    background: linear-gradient(90deg, transparent, var(--wood-edge) 20%, var(--wood-light) 50%, var(--wood-edge) 80%, transparent);
    border-radius: 2px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.5);
}

/* responsive */
@media (max-width: 720px) {
    .nav-container { padding: 10px 50px; }
    .tome, .grimoire-card, .card, .glass-card, .osrs-panel, .quest-panel { padding: 18px; }
    .quest-scroll { padding: 28px 30px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
}