/* ============================================================================
   RS2011 THEME — single, self-contained stylesheet for the frontend.

   How it works (mirrors site.css's approach, just recoloured to the parchment
   palette): it re-themes Bootstrap through the standard --bs-* variables, so you
   can build any page with plain Bootstrap markup —

       <div class="card"><div class="card-header">…</div><div class="card-body">…</div></div>

   — and it automatically matches the theme. Where a component needs a second
   look, use a MODIFIER class on the standard element, e.g.

       <div class="card-header accent">   (maroon header instead of the grey one)

   Only the connected page "frame" (header bar / nav / footer) and a handful of
   genuinely-bespoke RS components (hiscores tiles, clan motif, quest guide…)
   carry their own class names — same names site.css uses, for consistency.

   This file is loaded ALONE by resources/views/rs2011/layouts/app.blade.php.
   It does NOT touch the admin panel (admin uses site.css + admin.css).
   ============================================================================ */

:root {
    /* ---- signature palette ---- */
    --maroon:      #6e3a33;   /* primary accent: headings, active states, primary buttons */
    --maroon-dk:   #4c3433;
    --maroon-hover:#9a4034;
    --ink:         #2f2c26;   /* body text on parchment */
    --ink-soft:    #5a5346;
    --link:        #6b4a18;
    --link-hover:  #9a6d18;

    --card:        #F7F3ED;   /* card surface — a touch lighter than the panel */
    --card-border: #9a958b;
    --panel:       #e3ded8;   /* content panel (parchment) */
    --panel-2:     #e9e4de;
    --panel-edge:  #b8b2a6;
    --panel-edge-light: #cdc6b8;

    /* chrome gold (header/nav/footer only — content accents are maroon) */
    --gold-1:      #f4d97f;
    --header:      #1b1b1c;

    /* site.css uses --gold / --gold-2 as the signature accent across components;
       remap them to maroon so every ported component recolours in one place. */
    --gold:        var(--maroon);
    --gold-2:      #8a4a3f;
    --accent:      #2f6f66;    /* verdigris secondary accent (kept, darkened for light bg) */
    --accent-2:    #3f8a80;
    --accent-rgb:  47, 111, 102;

    /* ---- Bootstrap variable overrides ---- */
    --bs-body-bg: #0e0f12;            /* the page behind the frame stays dark (fantasy backdrop) */
    --bs-body-color: var(--ink);
    --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --bs-body-font-size: 1.05rem;
    --bs-emphasis-color: #1a160e;
    --bs-secondary-color: var(--ink-soft);
    --bs-tertiary-color: #837a66;
    --bs-heading-color: var(--maroon);

    --bs-primary: #6e3a33;
    --bs-primary-rgb: 110, 58, 51;
    --bs-link-color: var(--link);
    --bs-link-color-rgb: 107, 74, 24;
    --bs-link-hover-color: var(--link-hover);

    --bs-border-color: var(--panel-edge);
    --bs-border-color-translucent: rgba(60, 55, 45, 0.18);

    --bs-secondary-bg: #e0dacd;
    --bs-tertiary-bg: #ebe6dc;

    --bs-card-bg: var(--card);
    --bs-card-border-color: var(--card-border);
    --bs-card-cap-bg: #e8e2d6;

    --bs-border-radius: 0.4rem;
}

/* ============================================================================
   Base
   ============================================================================ */
body {
    margin: 0; color: #cdbf9f;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
    /* Fantasy backdrop: warm fire-lit on the right, cooler/mossy on the left. */
    background:
        radial-gradient(1000px 500px at 90% -70px, rgba(255,150,55,.26), transparent 60%),
        radial-gradient(820px 720px at 2% 26%, rgba(74,92,72,.30), transparent 55%),
        linear-gradient(180deg, #15140f 0%, #0d0c08 52%, #070604 100%);
    background-attachment: fixed;
}
a { text-decoration: none; }
.serif, .cinzel { font-family: var(--bs-body-font-family); }
h1, h2, h3, h4, h5, h6, .card-title { font-family: 'Inter', serif; letter-spacing: 0.02em; }
.text-accent { color: var(--accent) !important; }
.text-gold   { color: var(--maroon) !important; }   /* legacy utility → maroon on parchment */

/* ============================================================================
   Bootstrap components (standard markup → themed automatically)
   ============================================================================ */

/* ---- buttons ---- */
.btn { font-family: 'Inter', serif; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; }
.btn-primary {
    --bs-btn-color: #f3e7e3; --bs-btn-bg: var(--maroon); --bs-btn-border-color: var(--maroon-dk);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--maroon-hover); --bs-btn-hover-border-color: var(--maroon-hover);
    --bs-btn-active-bg: #5a2e28; --bs-btn-active-border-color: #5a2e28;
    font-weight: 700;
}
.btn-outline-primary {
    --bs-btn-color: var(--maroon); --bs-btn-border-color: var(--maroon);
    --bs-btn-hover-color: #f3e7e3; --bs-btn-hover-bg: var(--maroon); --bs-btn-hover-border-color: var(--maroon);
    --bs-btn-active-color: #f3e7e3; --bs-btn-active-bg: var(--maroon); --bs-btn-active-border-color: var(--maroon);
}
.btn-secondary {
    --bs-btn-color: #f3efe6; --bs-btn-bg: #6c645a; --bs-btn-border-color: #564f46;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #7b7367; --bs-btn-hover-border-color: #7b7367;
}
.btn-outline-secondary {
    --bs-btn-color: var(--link); --bs-btn-border-color: var(--card-border);
    --bs-btn-hover-color: #f3e7e3; --bs-btn-hover-bg: var(--maroon); --bs-btn-hover-border-color: var(--maroon);
    --bs-btn-active-color: #f3e7e3; --bs-btn-active-bg: var(--maroon); --bs-btn-active-border-color: var(--maroon);
}

/* ---- cards ---- */
/* main content cards: no border, just a soft shadow */
.card {
    background: var(--card);
    border: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
/* default header: quiet cap, like the default theme (recoloured). Add `.accent` for maroon. */
.card-header {
    font-family: 'Inter', serif; font-weight: 700; color: #2c2a26;
    background: var(--bs-card-cap-bg);
    border-bottom: 1px solid var(--bs-border-color);
}
.card-header.accent {
    background: var(--maroon); color: #f3e7e3; border-bottom: 0;
}
.card-header.accent a, .card-header.accent .nav-link { color: #f3e7e3; }
/* Inside .parchment, `.parchment a:not(.btn)` (gold link colour, defined later, equal specificity) was
   winning — so the maroon header's title link rendered dark gold and got the inline hover underline.
   Re-scope under .parchment to win on specificity and keep header links light + underline-free. */
.parchment .card-header.accent a, .parchment .card-header.accent .nav-link { color: #f3e7e3; }
.parchment .card-header.accent a:hover, .parchment .card-header.accent .nav-link:hover { color: #fff; }
.card-footer { background: rgba(0, 0, 0, 0.04); border-top: 1px solid var(--panel-edge); color: var(--ink-soft); }
.card-title {
    color: var(--maroon); border-bottom: 1px solid var(--bs-border-color);
    padding-bottom: 0.6rem; margin-bottom: 1rem;
}
.page-title { color: var(--maroon); margin: 1.6rem 0 1rem; font-family: 'Inter', serif;
    font-weight: 800; line-height: 1.15; font-size: clamp(1.3rem, 1rem + 1vw, 1.6rem); }

/* ---- list groups ---- */
.list-group { --bs-list-group-bg: var(--card); --bs-list-group-color: var(--ink);
    --bs-list-group-border-color: var(--panel-edge);
    --bs-list-group-action-hover-bg: rgba(110,58,51,.06); --bs-list-group-action-hover-color: var(--maroon);
    --bs-list-group-active-bg: var(--maroon); --bs-list-group-active-border-color: var(--maroon-dk); }

/* ---- page header (below nav, when a page renders its own) ---- */
.page-header { padding: 1.6rem 0 0; }
.page-header > .container { padding-bottom: 0.8rem; border-bottom: 1px solid var(--panel-edge); }
.page-header-title { margin: 0; color: var(--maroon); line-height: 1.2;
    font-family: 'Inter', serif; font-size: clamp(1.4rem, 3vw, 1.85rem); letter-spacing: 0.01em; }
.page-header-sub { margin: 0.3rem 0 0; color: var(--ink-soft); }

/* ---- tables ---- */
.table { --bs-table-bg: transparent; --bs-table-color: var(--ink); --bs-table-border-color: var(--panel-edge); }
.table > thead th {
    font-family: 'Inter', serif; text-transform: uppercase; font-size: 0.78rem;
    letter-spacing: 0.03em; color: var(--maroon); border-bottom-color: var(--panel-edge);
}
.table.table-hover > tbody > tr:hover > * { --bs-table-hover-bg: rgba(110, 58, 51, 0.06); }
.table .col-num, .text-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- forms ---- */
.form-control, .form-select {
    background-color: #fbf8f1; border-color: var(--card-border); color: var(--ink); color-scheme: light;
}
.form-control::placeholder { color: #9a8f78; }
.form-control:focus, .form-select:focus {
    background-color: #fbf8f1; color: var(--ink);
    border-color: var(--maroon); box-shadow: 0 0 0 0.2rem rgba(110, 58, 51, 0.18);
}
.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236e3a33' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.form-select option { background-color: #fbf8f1; color: var(--ink); }
.form-select option:checked { background-color: var(--maroon); color: #f3e7e3; }
.form-check-input:checked { background-color: var(--maroon); border-color: var(--maroon); }
.form-label { font-family: 'Inter', serif; font-size: 0.78rem; text-transform: uppercase; color: var(--maroon); }
.form-text { color: var(--bs-tertiary-color); }

/* ---- badges ---- */
.badge.text-bg-gold, .badge.text-bg-primary, .badge.bg-primary { background: var(--maroon) !important; color: #f3e7e3 !important; }
.iron-badge { color: #4a6c8c; }

/* ---- pagination ---- */
.pagination {
    --bs-pagination-bg: var(--card); --bs-pagination-color: var(--link);
    --bs-pagination-border-color: var(--panel-edge);
    --bs-pagination-hover-bg: var(--maroon); --bs-pagination-hover-color: #fff;
    --bs-pagination-hover-border-color: var(--maroon);
    --bs-pagination-active-bg: var(--maroon); --bs-pagination-active-border-color: var(--maroon-dk);
    --bs-pagination-active-color: #fff;
    --bs-pagination-disabled-bg: var(--card); --bs-pagination-disabled-color: #a39c8c;
    --bs-pagination-disabled-border-color: var(--panel-edge);
    --bs-pagination-font-family: 'Inter', serif;
}

/* ---- alerts / breadcrumb ---- */
.breadcrumb { --bs-breadcrumb-divider-color: #9a8f78; font-size: 0.85rem; }
.breadcrumb-item.active { color: var(--ink-soft); }
.breadcrumb a { color: var(--link); font-weight: 600; }

/* ---- dropdowns (content) — the dark nav dropdowns are themed under .topnav below ---- */
.dropdown-menu {
    --bs-dropdown-bg: var(--card); --bs-dropdown-border-color: var(--panel-edge);
    --bs-dropdown-link-color: var(--ink);
    --bs-dropdown-link-hover-bg: rgba(110,58,51,.08); --bs-dropdown-link-hover-color: var(--maroon);
    --bs-dropdown-link-active-bg: var(--maroon); --bs-dropdown-link-active-color: #f3e7e3;
    --bs-dropdown-divider-bg: var(--panel-edge);
}

/* ---- nav tabs / pills ---- */
.nav-tabs {
    --bs-nav-tabs-border-color: var(--panel-edge);
    --bs-nav-tabs-link-hover-border-color: transparent transparent var(--maroon);
    --bs-nav-tabs-link-active-color: var(--maroon);
    --bs-nav-tabs-link-active-bg: var(--card);
    --bs-nav-tabs-link-active-border-color: var(--panel-edge) var(--panel-edge) var(--card);
}
.nav-tabs .nav-link { color: var(--ink-soft); font-family: 'Inter', serif; font-size: 0.9rem; }
.nav-tabs .nav-link:hover { color: var(--maroon); }
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--maroon); --bs-nav-pills-link-active-color: #f3e7e3;
    --bs-nav-pills-border-radius: 0.4rem; gap: 0.3rem;
}
.nav-pills .nav-link { font-family: 'Inter', serif; font-size: 0.84rem; color: var(--ink-soft); border: 1px solid transparent; }
.nav-pills .nav-link:hover { color: var(--maroon); background: rgba(110,58,51,.06); }

/* ---- accordion ---- */
.accordion {
    --bs-accordion-bg: var(--card);
    --bs-accordion-color: var(--ink);
    --bs-accordion-border-color: var(--panel-edge);
    --bs-accordion-btn-color: var(--maroon);
    --bs-accordion-btn-bg: #ece7db;
    --bs-accordion-active-bg: var(--card);
    --bs-accordion-active-color: var(--maroon);
    --bs-accordion-btn-focus-border-color: var(--maroon);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(110,58,51,.18);
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236e3a33'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
}
.accordion-button { font-family: 'Inter', serif; letter-spacing: 0.02em; }

/* ============================================================================
   Page frame / chrome  (header bar + nav + parchment panel + footer = one unit)
   ============================================================================ */
.shell { max-width: 1000px; }
.frame { border-radius: 8px; box-shadow: 0 12px 34px rgba(0,0,0,.6); }

/* combined top bar = brand + nav links + players-online + user (replaces the old utility+nav split) */
.topnav .navbar-brand.topbrand { display:inline-flex; align-items:center; gap:.45rem;
    font-family:'Inter',serif; font-weight:700; font-size:1.4rem; color:#fff;
    letter-spacing:.5px; text-shadow:0 1px 2px rgba(0,0,0,.6); padding:.5rem 1rem; margin:0; }
/* brand crest mark — maroon shield + white sparkle; scales with the brand text, used in nav + footer */
.brand-mark { height:1.45em; width:auto; flex:none; display:block; }
.topnav .navbar-brand.topbrand:hover { color:#f3e7e3; }
/* players online: a people icon (green when populated, red when offline) + the count */
.online-pill { display:inline-flex; align-items:center; gap:.45rem; padding:.6rem .9rem; white-space:nowrap; }
.online-ico { font-size:1.2rem; color:#56d364; filter:drop-shadow(0 0 4px rgba(86,211,100,.55)); }
.online-ico.off { color:#d9534f; filter:drop-shadow(0 0 4px rgba(217,83,79,.55)); }
.online-count { color:#e9e9e6; font-weight:700; font-size:.95rem; }
/* user: profile icon (avatar) with an unread-message badge, in place of the username text */
.topnav .nav-user { position:relative; }
.topnav .nav-user.dropdown-toggle::after { display:none; }   /* drop the caret — the avatar is the affordance */
.nav-avatar { width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.20); color:#e7d9c6; font-weight:700; font-size:.8rem; line-height:1; }
.topnav .nav-user:hover .nav-avatar, .topnav .nav-item.show .nav-avatar { border-color:var(--maroon-hover); background:rgba(110,58,51,.35); }
.nav-avatar-badge { position:absolute; top:.35rem; right:.5rem; min-width:1rem; height:1rem; padding:0 .22rem;
    display:inline-flex; align-items:center; justify-content:center; border-radius:1rem;
    background:var(--maroon); color:#f3e7e3; font-size:.65rem; font-weight:700; line-height:1; box-shadow:0 0 0 2px #161617; }

/* nav — standard Bootstrap navbar, charcoal, collapses on mobile */
.topnav { margin:0; padding:0; background:#161617;
    border:1px solid #000; border-radius:8px 8px 0 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 1px 0 0 #2c2c2c, inset -1px 0 0 #2c2c2c; }
.topnav .nav-link { position:relative; color:#e9e9e6; font-weight:700; font-size:.95rem; letter-spacing:.4px;
    padding:1rem 1.15rem !important; transition:color .15s ease, background .15s ease; font-family:'Inter',serif; text-transform:none; }
.topnav .nav-link:hover, .topnav .nav-link:focus { color:#f3e7e3; background:rgba(110,58,51,.32); }
.topnav .nav-link.active, .topnav .nav-item.show > .nav-link { color:#f7ede9; text-shadow:0 1px 2px rgba(0,0,0,.4); background:rgba(110,58,51,.46); }
.topnav .navbar-toggler { color:#d7c79f; border-color:rgba(255,255,255,.22); padding:.3rem .65rem; margin:.45rem; }
.topnav .navbar-toggler:focus { box-shadow:none; }
@media (min-width:992px){
    .topnav .nav-link.active::before { content:""; position:absolute; left:8%; right:8%; top:0; height:3px;
        background:linear-gradient(90deg, transparent, var(--maroon-hover), transparent); }
    /* vertical divider line between nav items (faded so it's subtle) */
    .topnav .navbar-nav > .nav-item + .nav-item {
        border-left:1px solid transparent;
        border-image:linear-gradient(180deg, transparent, rgba(255,255,255,.20), transparent) 1; }
}
@media (max-width:991.98px){
    .topnav .navbar-nav { padding:.25rem .5rem .5rem; width:100%; }
    .topnav .nav-item + .nav-item { border-top:1px solid rgba(255,255,255,.07); }
    .topnav .nav-link { padding:.8rem .6rem; border-left:3px solid transparent; }
    .topnav .nav-link.active, .topnav .nav-link:hover { border-left-color:var(--maroon-hover); }
}
.topnav .dropdown-toggle::after { vertical-align:.12em; margin-left:.4em; }
.topnav .dropdown-menu {
    --bs-dropdown-min-width:13rem; --bs-dropdown-padding-x:.35rem; --bs-dropdown-padding-y:.35rem; --bs-dropdown-font-size:.85rem;
    --bs-dropdown-bg:#1d1b1a; --bs-dropdown-border-color:#000; --bs-dropdown-border-radius:.6rem;
    --bs-dropdown-link-color:#ddd2c4;
    --bs-dropdown-link-hover-bg:rgba(110,58,51,.55); --bs-dropdown-link-hover-color:#f7ede9;
    --bs-dropdown-link-active-bg:var(--maroon); --bs-dropdown-link-active-color:#f7ede9;
    margin-top:.4rem !important; overflow:hidden; box-shadow:0 12px 28px rgba(0,0,0,.55); }
.topnav .dropdown-item { padding:.5rem .7rem; border-radius:.4rem; transition:background .12s ease, color .12s ease; }
.topnav .dropdown-header { color:#b6a39b; text-transform:uppercase; letter-spacing:.06em; font-size:.72rem; font-weight:700; padding:.5rem .7rem .35rem; }
.topnav .dropdown-divider { border-color:rgba(255,255,255,.12); margin:.3rem .25rem; }

/* content panel */
.parchment { margin:0; color:var(--ink);
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    border-left:1px solid #000; border-right:1px solid #000; padding:.5rem; }
.parchment a:not(.btn) { color:var(--link); }
.parchment a:not(.btn):hover { color:var(--link-hover); text-decoration:underline; }
/* block "card" links never get the inline underline-on-hover (their inner text styles win) */
.parchment .card-header a, .parchment .card-header a:hover,
.parchment a.list-group-item-action, .parchment a.list-group-item-action:hover,
.parchment a.feature-btn, .parchment a.feature-btn:hover,
.parchment a.featured-news, .parchment a.featured-news:hover,
.parchment a.home-news-item, .parchment a.home-news-item:hover,
.parchment a.hero-box, .parchment a.hero-box:hover { text-decoration:none; }

/* breadcrumb bar — a recessed box between the nav and the content panel; spans the full content width
   (black side borders connect it to the frame) and reuses the active news article's surface + inset shadow */
.rs-crumbbar { margin:0; padding:.5rem .55rem;
    background: var(--panel);
    box-shadow: inset 0 0 8px rgba(0,0,0,.16);
    border-left:1px solid #000; border-right:1px solid #000; }
.rs-crumbbar .rs-breadcrumb { margin:0; padding:0; }

/* arrow / triangle breadcrumb — adapted from the Bootsnipp "triangle-breadcrumbs" snippet to the
   rs2011 <ol class="breadcrumb"> markup + parchment palette. Each crumb is a flat band segment; the
   right-edge arrow is TWO stacked triangles: ::after = fill colour (on top), ::before = outline colour
   shifted 1px right so it reads as the arrow's edge. Recolour via --bc-fill / --bc-edge. */
.rs-breadcrumb { display:flex; flex-wrap:wrap; align-items:stretch; gap:0; list-style:none; margin:0; padding:0; font-size:.9rem;
    --bc-fill:var(--card); --bc-edge:#8a7d68; }
.rs-breadcrumb .breadcrumb-item { position:relative; display:flex; align-items:center; min-height:40px;
    margin:0; padding:8px 14px 8px 28px; background:var(--bc-fill);
    border-top:1px solid var(--bc-edge); border-bottom:1px solid var(--bc-edge); }
.rs-breadcrumb .breadcrumb-item:first-child { padding-left:14px; border-left:1px solid var(--bc-edge); border-radius:4px 0 0 4px; }
.rs-breadcrumb .breadcrumb-item:last-child { padding-right:22px; border-right:1px solid var(--bc-edge); border-radius:0 4px 4px 0; }
/* fill triangle (painted on top) — border-top/bottom = half the segment height so the arrow fills the band */
.rs-breadcrumb .breadcrumb-item:not(:last-child)::after {
    content:""; position:absolute; top:50%; left:100%; margin-top:-20px; z-index:3; width:0; height:0;
    border-top:20px solid transparent; border-bottom:20px solid transparent; border-left:12px solid var(--bc-fill); }
/* outline triangle (1px to the right, behind the fill → shows as the arrow's edge) */
.rs-breadcrumb .breadcrumb-item:not(:last-child)::before {
    content:""; position:absolute; top:50%; left:100%; margin-top:-20px; margin-left:1px; z-index:3; width:0; height:0;
    border-top:20px solid transparent; border-bottom:20px solid transparent; border-left:12px solid var(--bc-edge); }
.rs-breadcrumb .breadcrumb-item:last-child::before { content:none; }   /* kill Bootstrap's leftover slash on the final crumb */
/* graduated shading: Home (base fill) -> middle steps slightly darker -> current page (active) maroon + white.
   Overriding --bc-fill on an item recolours BOTH the segment and its arrow (::after reads the same var). */
.rs-breadcrumb .breadcrumb-item:not(:first-child):not(:last-child) { --bc-fill:#e3dccd; }
.rs-breadcrumb .breadcrumb-item.active { --bc-fill:var(--maroon); --bc-edge:var(--maroon-dk); color:#fff; }
.rs-breadcrumb a { color:var(--link); font-weight:600; }
.rs-breadcrumb a:hover { color:var(--link-hover); text-decoration:none; }
.rs-breadcrumb .breadcrumb-home { font-size:1rem; line-height:1; vertical-align:-.05em; }
/* page header — the title (+ optional sub-title/description) block at the top of the content panel.
   A panel-edge rule separates it from the page body, with a short maroon accent tab for character. */
.rs-pagehead { position:relative; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
    gap:.5rem 1rem; margin:.1rem 0 1.1rem; padding:0 0 .7rem; border-bottom:1px solid var(--panel-edge); }
.rs-pagehead-main { min-width:0; }                                  /* lets a long title wrap instead of shoving the button */
.rs-pagehead-action { flex:none; display:flex; align-items:center; gap:.5rem; }   /* the right-side button slot */
.rs-pagehead::after { content:""; position:absolute; left:0; bottom:-1px; width:60px; height:2px;
    background:linear-gradient(90deg, var(--maroon), rgba(110,58,51,0)); }
.rs-page-title { margin:0; color:var(--maroon); font-family:'Inter',serif; font-weight:800; line-height:1.15;
    font-size:clamp(1.3rem, 1rem + 1vw, 1.6rem); letter-spacing:.005em; }
.rs-page-sub { margin:.4rem 0 0; max-width:72ch; color:var(--ink-soft); font-size:.92rem; line-height:1.5; }

/* footer — a simple dark bar at the bottom of the frame: brand + social, then copyright + legal links */
.rs-foot { margin:0; padding:16px; background:#161617; color:#fff;
    border-left:1px solid #000; border-right:1px solid #000; border-bottom:1px solid #000; border-radius:0 0 8px 8px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 1px 0 0 #2c2c2c, inset -1px 0 0 #2c2c2c; }
.rs-foot-top { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:.75rem 1rem; }
.rs-foot-brand { display:inline-flex; align-items:center; gap:.45rem; font-family:'Inter',serif; font-weight:700; font-size:1.4rem; color:#fff; letter-spacing:.5px; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.rs-foot-blurb { font-size:.82rem; color:#9a9488; max-width:46ch; margin:.3rem 0 0; line-height:1.4; }
.rs-foot-social a { display:inline-flex; width:32px; height:32px; align-items:center; justify-content:center;
    border-radius:50%; background:rgba(255,255,255,.08); color:#cfcabf; margin-left:7px; font-size:.95rem;
    border:1px solid rgba(255,255,255,.12); transition:background .15s, color .15s, transform .15s; }
.rs-foot-social a:hover { background:var(--maroon-hover); color:#fff; border-color:var(--maroon); transform:translateY(-2px); text-decoration:none; }
.rs-foot-hr { border-color:rgba(255,255,255,.14); opacity:1; margin:.85rem 0; }
.rs-foot-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.4rem 1.25rem; }
.rs-foot-copy { color:#9a9488; font-size:.8rem; margin:0; }
.rs-foot-links { list-style:none; display:flex; flex-wrap:wrap; gap:.4rem 1.25rem; margin:0; padding:0; font-size:.82rem; }
.rs-foot a { color:#cfcabf; }
.rs-foot a:hover { color:#f3e7e3; }
@media (max-width:575.98px){
    .rs-foot-top, .rs-foot-bottom { justify-content:center; text-align:center; }
    .rs-foot-social a { margin:0 4px; }
}

/* ============================================================================
   Bespoke RS components (ported from site.css, recoloured for parchment).
   Same class names as the default theme so copied pages keep working.
   ============================================================================ */

/* hero (home carousel frame) */
.hero-box { position:relative; border:1px solid var(--card-border); border-radius:6px; overflow:hidden; min-height:230px; }
.hero-fill { min-height:230px; height:100%; background: linear-gradient(135deg,#46453d,#23221d); background-size:cover; background-position:center; }
/* fixed hero height on desktop so it never changes (matches the signed-in account box) */
@media (min-width:992px) { .hero-row .hero-box { height:253px !important; } }
/* full-cover gradient dims the image so the label/title/excerpt read clearly, content anchored bottom */
.hero-cap { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:10px; color:#f3eee2;
    background:linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.30) 42%, rgba(0,0,0,.85) 100%); }
.hero-cap h3 { font-family:'Inter',serif; margin:0 0 2px; font-size:1.25rem; line-height:1.2; color:#fff; }
.hero-cap .small { color:#e6ddcb; }

/* news */
.news-cat { display:inline-block; font-family:'Inter',serif; font-size:.7rem; text-transform:uppercase;
    letter-spacing:.06em; color:#f3e7e3; background:var(--maroon); padding:.1rem .5rem; border-radius:.2rem; }
.news-card-img { min-height:160px; background-size:cover; background-position:center; background-color:#e7e1d4; }
.article-body { font-size:1.1rem; }
.article-body p { margin-bottom:1rem; }
.article-hero { height:280px; background-size:cover; background-position:center; border-radius:.4rem; border:1px solid var(--panel-edge); background-color:#e7e1d4; }

/* hiscores */
.hiscores-select { max-width:220px; flex:0 0 auto; margin:0; }
.hs-side-title { font-family:'Inter',serif; color:var(--maroon); font-size:.92rem; text-transform:uppercase; letter-spacing:.03em;
    margin-bottom:.6rem; padding-bottom:.4rem; border-bottom:1px solid var(--panel-edge); }
.hs-sidebar-inner { height:100%; padding:1.25rem; background:rgba(0,0,0,.04); border:1px solid var(--panel-edge); border-radius:.5rem; }
.overall-row > * { background:rgba(110,58,51,.08) !important; border-top:2px solid var(--panel-edge); border-bottom:2px solid var(--panel-edge); }
.vs { color:var(--bs-tertiary-color); font-family:'Inter',serif; }
.hs-skill-icon { width:22px; height:22px; object-fit:contain; vertical-align:middle; }
.hs-name { color:var(--link); font-weight:600; }
.hs-name:hover { color:var(--link-hover); }
.skill-icon { width:22px; height:22px; object-fit:contain; flex-shrink:0; }
.skill-icon-lg { width:28px; height:28px; object-fit:contain; }
.skill-icon-overall { color:var(--maroon); font-size:1.1rem; width:22px; text-align:center; flex-shrink:0; }
.skill-cell { display:inline-flex; align-items:center; gap:.55rem; }

/* hiscores medals (top 3) — metallic, kept */
.hs-medal { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%;
    font-family:'Inter',serif; font-weight:700; font-size:.85rem; border:1px solid var(--panel-edge); }
.hs-medal-1 { background:linear-gradient(160deg,#f7e08a,#caa12f); color:#3a2c05; border-color:#caa12f; box-shadow:0 0 8px rgba(202,161,47,.4); }
.hs-medal-2 { background:linear-gradient(160deg,#e6e6ea,#a7adb6); color:#26282c; border-color:#a7adb6; }
.hs-medal-3 { background:linear-gradient(160deg,#e3a16a,#aa6a37); color:#2e1a0c; border-color:#aa6a37; }

/* hiscores stat tiles + versus */
.hs-stat { height:100%; text-align:center; padding:.9rem .5rem; border:1px solid var(--panel-edge); border-radius:.5rem; background:rgba(0,0,0,.04); }
.hs-stat-lead { border-color:var(--maroon); box-shadow:0 0 0 1px rgba(110,58,51,.3) inset; }
.hs-stat-label { font-family:'Inter',serif; text-transform:uppercase; font-size:.7rem; letter-spacing:.06em; color:var(--maroon); }
.hs-stat-value { font-family:'Inter',serif; font-size:1.6rem; color:var(--gold-2); line-height:1.15; }
.compare-table .win, .vs-table .win { color:var(--gold-2); font-weight:700; }
.vs-table { border-collapse:separate; border-spacing:0; }
.vs-table th, .vs-table td { border:0; padding:.45rem .6rem; }
.vs-table .vs-a, .vs-table .vs-b { background:rgba(0,0,0,.04); }
.vs-table .vs-center { background:transparent; width:64px; }
.vs-table .vs-edge-l { border-left:1px solid var(--panel-edge); }
.vs-table .vs-edge-r { border-right:1px solid var(--panel-edge); }
.vs-table thead tr.vs-subhead .vs-a, .vs-table thead tr.vs-subhead .vs-b,
.vs-table tbody tr .vs-a, .vs-table tbody tr .vs-b { border-bottom:1px solid var(--panel-edge); }
.vs-table thead tr.vs-inputs .vs-a, .vs-table thead tr.vs-inputs .vs-b { border-top:1px solid var(--panel-edge); }
.vs-table thead tr.vs-inputs .vs-edge-l { border-top-left-radius:.5rem; }
.vs-table thead tr.vs-inputs .vs-edge-r { border-top-right-radius:.5rem; }
.vs-table tbody tr:last-child .vs-edge-l { border-bottom-left-radius:.5rem; }
.vs-table tbody tr:last-child .vs-edge-r { border-bottom-right-radius:.5rem; }
.vs-table .vs-inputs .form-control { font-size:.95rem; padding:.45rem .7rem; }
.vs-table tbody tr:hover .vs-a, .vs-table tbody tr:hover .vs-b { background:rgba(110,58,51,.08); }
.vs-pill { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%;
    font-family:'Inter',serif; text-transform:uppercase; color:var(--maroon); background:rgba(0,0,0,.04); border:1px solid var(--maroon); }

/* player skill grid */
.skill-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(82px, 1fr)); gap:.5rem; }
.skill-tile { display:flex; align-items:center; justify-content:center; gap:.4rem; padding:.5rem .4rem;
    border:1px solid var(--panel-edge); border-radius:.4rem; background:rgba(0,0,0,.04); cursor:default; }
.skill-tile:hover { border-color:var(--maroon); }
.skill-tile-icon { width:24px; height:24px; object-fit:contain; flex-shrink:0; }
.skill-tile-level { font-family:'Inter',serif; font-weight:700; color:var(--gold-2); font-size:1.05rem; }

/* public profile */
.profile-avatar { width:84px; height:84px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-family:'Inter',serif; font-size:2.2rem; color:var(--c, #8a4a3f); background:rgba(0,0,0,.06); border:2px solid var(--c, #8a4a3f); }

/* clan motif */
.motif-flag { width:90px; height:110px; border-radius:.3rem; border:2px solid var(--panel-edge-light);
    display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(0,0,0,.25); }
.motif-initial { font-family:'Inter',serif; font-size:2.6rem; font-weight:700; color:rgba(255,255,255,.92); text-shadow:0 2px 6px #000; }
.clan-motto { font-style:italic; font-size:1.2rem; color:var(--gold-2); }
.swatch { width:22px; height:22px; border-radius:.25rem; border:1px solid var(--panel-edge-light); display:inline-block; }

/* game guide */
.guide-card { transition:border-color .12s, transform .12s; }
.guide-card:hover { border-color:var(--maroon); transform:translateY(-2px); }
.guide-article-body { line-height:1.7; }
.guide-article-body img { max-width:100%; height:auto; border-radius:.4rem; }
.guide-article-body h2, .guide-article-body h3 { font-family:'Inter',serif; color:var(--maroon); margin-top:1.4rem; }
.guide-article-body table { width:100%; margin:1rem 0; }
.guide-article-body table, .guide-article-body th, .guide-article-body td { border:1px solid var(--panel-edge); padding:.4rem .6rem; }

/* quest guide */
.guide-block { border:1px solid var(--panel-edge); }
.guide-block > .card-header { font-family:'Inter',serif; text-transform:uppercase; letter-spacing:.06em; font-size:.82rem;
    color:var(--maroon); background:rgba(110,58,51,.06); border-bottom:1px solid var(--panel-edge); }
.quest-h { font-family:'Inter',serif; text-transform:uppercase; letter-spacing:.06em; font-size:.95rem;
    color:var(--maroon); margin:1.6rem 0 .7rem; padding-bottom:.35rem; border-bottom:1px solid var(--panel-edge); }
.quest-guide .card-body > .quest-h:first-child { margin-top:0; }
.quest-overview { margin:0; }
.quest-overview th { width:1%; white-space:nowrap; vertical-align:top; padding-right:1.5rem !important;
    font-family:'Inter',serif; font-weight:600; color:var(--gold-2); background:rgba(110,58,51,.04); }
.quest-overview td { vertical-align:top; }
.quest-overview > tbody > tr > * { padding:.7rem 1rem; }
@media (max-width:575.98px) { .quest-overview th { white-space:normal; } }
.quest-reqs { margin:0; padding-left:1.25rem; }
.quest-reqs > li { margin-bottom:.2rem; }
.req-label { display:block; font-weight:600; color:var(--gold-2); margin-bottom:.15rem; }
.quest-links { padding-left:1rem; }
.quest-links > li { margin-bottom:.15rem; }
.quest-link-marker { color:var(--bs-tertiary-color); margin-right:.35rem; }
.quest-links .quest-links { margin:.15rem 0 .2rem .25rem; padding-left:.95rem; border-left:1px solid var(--panel-edge); }
.quest-links .quest-links .quest-links { border-left-color:var(--gold-2); border-left-style:dotted; }
.quest-checklist .form-check { padding:.25rem 0 .25rem 1.9rem; border-bottom:1px solid var(--panel-edge); }
.quest-checklist .form-check:last-child { border-bottom:0; }
.quest-checklist .form-check-input, .quest-checklist .form-check-label { cursor:pointer; }
.quest-steps { display:flex; flex-direction:column; gap:1.4rem; }
.quest-step { line-height:1.6; }
.quest-step-title { margin-bottom:.35rem; }
.quest-step-body::after { content:''; display:block; clear:both; }
.quest-step-img { height:auto; display:block; border-radius:6px; border:1px solid var(--panel-edge); background:#e7e1d4; }
.quest-step-img.qs-img-left { float:left; margin:.2rem 1.2rem .7rem 0; }
.quest-step-img.qs-img-right { float:right; margin:.2rem 0 .7rem 1.2rem; }
.quest-step-img.qs-img-center { float:none; margin:.2rem auto .9rem; }
.quest-step-img.qs-img-above { float:none; margin:0 0 .9rem 0; }
.quest-step-img.qs-img-below { float:none; margin:.9rem 0 0 0; }
.quest-cols { display:flex; gap:1.2rem; align-items:flex-start; }
.quest-cols.cols-right { flex-direction:row-reverse; }
.quest-cols > .quest-step-img { float:none; flex:0 0 auto; margin:0; }
.quest-cols-text { flex:1 1 auto; min-width:0; }
.quest-step-img.qs-size-small { width:190px; max-width:45%; }
.quest-step-img.qs-size-medium { width:320px; max-width:50%; }
.quest-step-img.qs-size-large { width:470px; max-width:60%; }
.quest-step-img.qs-size-original { max-width:100%; }
@media (max-width:575.98px) {
    .quest-step-img, .quest-step-img.qs-img-left, .quest-step-img.qs-img-right,
    .quest-step-img.qs-img-center, .quest-step-img.qs-img-above, .quest-step-img.qs-img-below {
        float:none; width:100%; max-width:100%; margin:0 0 .7rem 0; }
    .quest-cols { flex-direction:column; }
    .quest-cols > .quest-step-img { width:100%; max-width:100%; }
}
.quest-rewards { list-style:none; padding-left:0; }
.quest-rewards > li { padding-left:1.4rem; position:relative; margin-bottom:.3rem; }
.quest-rewards > li::before { content:'\2666'; position:absolute; left:0; color:var(--maroon); }

/* news list / featured (news index) */
.featured-news { display:block; text-decoration:none; overflow:hidden; border:1px solid var(--panel-edge);
    border-radius:.5rem; background:var(--card); margin-bottom:1.5rem; transition:border-color .15s; }
.featured-news:hover { border-color:var(--maroon); }
.featured-news:hover .featured-news-title { color:var(--maroon); }
.featured-news-img { height:190px; background-size:cover; background-position:center; background-color:#e7e1d4;
    display:flex; align-items:center; justify-content:center; color:#a39c8c; font-size:2.2rem; }
.featured-news-body { display:block; padding:1rem 1.15rem 1.15rem; }
.featured-news-title { display:block; font-family:'Inter',serif; font-size:1.3rem; line-height:1.2; color:var(--maroon); margin:.45rem 0 .4rem; transition:color .15s; }
.featured-news-excerpt { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; color:var(--ink-soft); margin:0; }
.home-news-item { display:flex; gap:1rem; align-items:center; padding:.85rem 0; text-decoration:none; border-bottom:1px solid var(--panel-edge); }
.home-news-item:last-child { border-bottom:0; }
.home-news-item:hover .home-news-title { color:var(--maroon); }
.home-news-thumb { flex-shrink:0; width:112px; height:74px; border-radius:.35rem; background-size:cover; background-position:center;
    background-color:#e7e1d4; border:1px solid var(--panel-edge); display:flex; align-items:center; justify-content:center; color:#a39c8c; font-size:1.4rem; }
.home-news-body { display:flex; flex-direction:column; min-width:0; }
.home-news-meta { display:flex; align-items:center; gap:.5rem; margin-bottom:.3rem; }
.home-news-date { font-size:.75rem; color:var(--bs-tertiary-color); font-style:italic; }
.home-news-title { font-family:'Inter',serif; color:var(--ink); font-weight:600; line-height:1.25; }
.home-news-excerpt { color:var(--ink-soft); font-size:.9rem; margin-top:.2rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
@media (max-width:420px) { .home-news-thumb { display:none; } }

/* forum */
.forum-thread-list td { padding-top:.85rem; padding-bottom:.85rem; }
.thread-title { font-family:'Inter',serif; font-size:1.02rem; }
.forum-avatar { flex-shrink:0; width:38px; height:38px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,.06); border:1px solid var(--panel-edge-light); color:var(--gold-2); font-family:'Inter',serif; font-weight:700; font-size:1rem; }
.forum-post .forum-profile { background:rgba(0,0,0,.04); border-right:1px solid var(--panel-edge); }
.forum-post-head { background:rgba(0,0,0,.04); border-bottom:1px solid var(--panel-edge); }
.forum-post-author { font-family:'Inter',serif; color:var(--gold-2); font-weight:700; }
.forum-avatar-lg { width:56px; height:56px; font-size:1.5rem; }
.forum-post-content { line-height:1.6; }
.forum-post-content p:last-child { margin-bottom:0; }
.forum-post-content blockquote { border-left:3px solid var(--panel-edge-light); padding-left:.75rem; color:var(--ink-soft); }
.forum-post-content ul, .forum-post-content ol { padding-left:1.4rem; }
.forum-post-content a { text-decoration:underline; }
.post-deleted { opacity:.9; border-color:rgba(178,58,46,.6); }
@media (max-width:767.98px) { .forum-post .forum-profile { border-right:0; border-bottom:1px solid var(--panel-edge); } }
.forum-quote { border-left:3px solid var(--maroon); background:rgba(110,58,51,.06); padding:.6rem .85rem; border-radius:0 .3rem .3rem 0; }
.forum-quote-author { font-family:'Inter',serif; font-size:.8rem; color:var(--gold-2); margin-bottom:.25rem; }
.forum-quote-body { color:var(--ink-soft); }
.forum-quote-body p:last-child { margin-bottom:0; }
.forum-signature { margin-top:1rem; padding-top:.7rem; border-top:1px solid var(--panel-edge); font-size:.85rem; color:var(--ink-soft); }
.forum-signature p:last-child { margin-bottom:0; }
.forum-signature a { color:var(--gold-2); }
.thread-title { font-family:'Inter',serif; }
/* category thread list: a fully-rounded maroon header bar (like the rs-card headers), status icons
   instead of text tags, dotted row separators, and a tinted background on pinned/locked rows. */
.forum-threads-body { padding:.6rem; }
.forum-thread-list { margin:0; border-collapse:separate; border-spacing:0; }
.forum-thread-list > :not(caption) > * > * { border:0; }   /* drop Bootstrap's solid cell borders */
.forum-thread-list thead th { background:var(--maroon); color:#f3e7e3; padding:.5rem .85rem;
    font-family:'Inter',serif; font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:.74rem; }
.forum-thread-list thead th:first-child { border-radius:7px 0 0 7px; }
.forum-thread-list thead th:last-child  { border-radius:0 7px 7px 0; }
.forum-thread-list tbody tr:first-child td { padding-top:.85rem; }              /* gap so the rounded header floats */
.forum-thread-list tbody td { border-bottom:1px dotted var(--panel-edge); }     /* dotted separators, not solid lines */
.forum-thread-list tbody tr:last-child td { border-bottom:0; }
/* pinned keeps priority over locked: pinned = maroon tint, locked-only = light grey */
.forum-thread-list tbody tr.thread-pinned td { background:rgba(110,58,51,.06); }
.forum-thread-list tbody tr.thread-locked td { background:rgba(60,55,45,.10); }
.thread-flag { margin-right:.3rem; font-size:.95rem; vertical-align:-.05em; }
.flag-pin  { color:var(--maroon); }
.flag-lock { color:#b8b2a6; }
.flag-del  { color:#b3402f; }
/* tooltips — white text on a dark background (the default was rendering the text too dark to read) */
.tooltip { --bs-tooltip-bg:#332a26; --bs-tooltip-color:#fff; --bs-tooltip-opacity:1; }
.tooltip-inner { color:#fff; background-color:#332a26; }

/* rich-text editor */
.rt-editor .rt-toolbar { margin-bottom:.4rem; }
.rt-editor .rt-surface { min-height:160px; max-height:480px; overflow-y:auto; height:auto; background:#fbf8f1; }
.rt-editor .rt-surface:focus { outline:none; border-color:var(--maroon); box-shadow:0 0 0 .2rem rgba(110,58,51,.18); }
.rt-editor .rt-surface blockquote { border-left:3px solid var(--panel-edge-light); padding-left:.75rem; color:var(--ink-soft); }
.rt-editor .rt-surface:empty::before { content:'Write your message…'; color:var(--bs-tertiary-color); }

/* news embed (forum) */
.news-embed { display:flex; gap:1rem; align-items:stretch; overflow:hidden; border:1px solid var(--panel-edge); border-radius:.5rem; background:var(--card); margin-bottom:1rem; }
.news-embed-thumb { flex-shrink:0; width:170px; display:block; text-decoration:none; background-size:cover; background-position:center; background-color:#e7e1d4; }
.news-embed-body { padding:.85rem 1rem; min-width:0; }
.news-embed-cat { display:inline-block; font-family:'Inter',serif; text-transform:uppercase; font-size:.68rem; letter-spacing:.06em;
    color:#f3e7e3; background:var(--maroon); padding:.1rem .5rem; border-radius:.2rem; margin-bottom:.4rem; }
.news-embed-title { display:block; text-decoration:none; font-family:'Inter',serif; font-size:1.15rem; line-height:1.2; color:var(--maroon); margin-bottom:.35rem; }
.news-embed-title:hover { color:var(--link-hover); }
.news-embed-excerpt { color:var(--ink-soft); margin-bottom:.45rem; }
.news-embed-link { font-family:'Inter',serif; font-size:.8rem; }
@media (max-width:575.98px) { .news-embed { display:block; } .news-embed-thumb { width:100%; height:150px; } }

/* settings split card + avatar/colour pickers */
.split-card { overflow:hidden; }
.split-col { padding:1.5rem; }
.split-col.alt { background:rgba(0,0,0,.04); }
.split-col-title { font-family:'Inter',serif; color:var(--maroon); font-size:1.15rem; letter-spacing:.03em;
    margin-bottom:1rem; padding-bottom:.6rem; border-bottom:1px solid var(--panel-edge); }
@media (min-width:992px) { .split-col { padding:1.75rem 2rem; } .split-col.alt { border-left:1px solid var(--panel-edge); } }
@media (max-width:991.98px) { .split-col.alt { border-top:1px solid var(--panel-edge); } }
.avatar-picker, .color-picker { display:flex; flex-wrap:wrap; gap:.5rem; }
.avatar-picker input, .color-picker input { position:absolute; opacity:0; pointer-events:none; }
.avatar-opt { width:46px; height:46px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center;
    font-size:1.3rem; font-family:'Inter',serif; font-weight:700; background:radial-gradient(circle at 30% 25%, #efe7d4, #ddd3bd);
    border:1px solid var(--panel-edge); color:var(--gold-2); transition:border-color .15s, transform .1s; }
.avatar-opt:hover { transform:translateY(-1px); border-color:var(--panel-edge-light); }
.avatar-picker input:checked + .avatar-opt { border-color:var(--maroon); box-shadow:0 0 0 2px rgba(110,58,51,.35); }
.color-opt { width:28px; height:28px; border-radius:50%; cursor:pointer; border:2px solid transparent; box-shadow:0 0 0 1px var(--panel-edge); transition:transform .1s; }
.color-opt:hover { transform:translateY(-1px); }
.color-picker input:checked + .color-opt { border-color:#fff; box-shadow:0 0 0 2px var(--maroon); }

/* profile / summary stat numbers */
.stat-num { font-family:'Inter',serif; font-size:1.9rem; color:var(--maroon); display:block; line-height:1.1; }
.stat-label { color:var(--bs-tertiary-color); font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; }

/* misc */
.info-list dt { color:var(--bs-tertiary-color); font-family:'Inter',serif; font-size:.8rem; font-weight:normal; }
.text-closed { color:#b23a2e; }
.msg-subject { text-transform:none; letter-spacing:normal; font-family:var(--bs-body-font-family); font-size:1rem; vertical-align:baseline; }
.infraction-row { padding:.85rem 0; border-bottom:1px solid var(--panel-edge); }
.infraction-row:first-of-type { padding-top:.35rem; }
.infraction-row:last-child { border-bottom:0; padding-bottom:0; }

/* ============================================================================
   Home page components — these are genuine widgets (not Bootstrap primitives):
   a collapsible news list, hot-topics list, quick poll, and feature tiles.
   They sit inside standard .card / .card-header.accent shells.
   ============================================================================ */

/* card component used across the home widgets (lighter than the panel, maroon header) */
.rs-card { background:var(--card); border:0; border-radius:7px; color:var(--ink); box-shadow:0 1px 4px rgba(0,0,0,.12); }
.rs-card .card-body { color:var(--ink); }
.rs-card a { color:var(--link); }
.rs-card > .card-header { background:var(--maroon); color:#f3e7e3; font-family:'Inter',serif; font-weight:700;
    border:0; border-radius:5px; margin:8px 8px 0; padding:.42rem .5rem; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.rs-card > .card-header i { color:#f0d9cf; }
.rs-card.head-normal > .card-header { background:linear-gradient(180deg,#ddd6c9,#d1c9b9); color:#2c2a26; margin:0;
    border-radius:7px 7px 0 0; border-bottom:1px solid var(--panel-edge); box-shadow:none; }

/* tab strip in a card header (Latest News) */
.blendtabs { gap:2px; }
.blendtabs .nav-link { color:var(--ink-soft); background:transparent; border:0; border-radius:4px;
    font-family:'Inter',serif; font-weight:700; padding:.26rem .9rem; }
.blendtabs .nav-link:hover { background:rgba(0,0,0,.08); }
.blendtabs .nav-link.active { background:var(--maroon); color:#f3e7e3; }

/* shared icon square (news / hot topics) */
.ni-icon { flex:none; width:34px; height:34px; border-radius:5px; border:1px solid var(--panel-edge);
    background:linear-gradient(135deg,#cbc6bb,#a39c8c); display:flex; align-items:center; justify-content:center;
    color:#4a4337; font-size:1.05rem; }

/* collapsible news list */
.news-item { border-radius:6px; margin-bottom:4px; background:#ece7db; }
.news-item:last-of-type { margin-bottom:0; }
.news-item:hover, .news-item.open { background:var(--panel); box-shadow: inset 0 0 8px rgba(0,0,0,.16); }
.news-item .collapse, .news-item .collapsing { transition:none; }   /* no slide; instant open */
.news-head { display:flex; gap:8px; align-items:center; cursor:pointer; padding:8px; }
.news-head:not(.collapsed) { padding-bottom:2px; }
.news-head.collapsed .when-open { display:none; }
.news-head:not(.collapsed) .when-collapsed { display:none; }
.ni-main { flex:1; min-width:0; }
.ni-titlerow { display:flex; align-items:center; gap:8px; }
.ni-title { font-family:'Inter',serif; font-weight:700; color:var(--maroon); line-height:1.1; }
.ni-date-inline { color:var(--ink-soft); font-size:.8rem; white-space:nowrap; }
.ni-date-open { color:var(--ink-soft); font-size:.8rem; margin-top:-2px; }
.ni-line { display:flex; align-items:center; gap:8px; margin-top:-3px; }
.ni-ellip { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink-soft); font-size:.85rem; }
.ni-plus { flex:none; width:24px; height:24px; display:flex; align-items:center; justify-content:center;
    color:#f3e7e3; background:var(--maroon); border-radius:4px; font-size:.95rem; box-shadow:0 1px 2px rgba(0,0,0,.25); }
.ni-body { display:flex; gap:8px; padding:0 8px 8px 50px; }
.ni-img { flex:none; width:104px; height:74px; border-radius:5px; border:1px solid var(--panel-edge);
    background:linear-gradient(135deg,#cbc6bb,#9b8f78) center/cover; display:flex; align-items:center; justify-content:center; color:#4a4337; font-size:1.6rem; }
.ni-full { flex:1; min-width:0; font-size:.9rem; line-height:1.25; }
.ni-more-row { margin-top:.4rem; }
.ni-more { font-family:'Inter',serif; font-size:.8rem; color:var(--link); font-weight:700; }

/* hot forum topics list */
.forum-topic { display:flex; gap:8px; align-items:flex-start; padding:8px; border-bottom:1px dashed var(--panel-edge); }
.forum-topic:last-child { border-bottom:0; }
/* empty filler rows: reserve a row's height so the box is always sized for 5 topics */
.forum-topic-empty { border-bottom-color:transparent; }
.forum-topic-empty .ni-icon { visibility:hidden; }
.forum-topic .flex-grow-1 { min-width:0; }
.forum-title { font-family:'Inter',serif; font-weight:700; color:var(--maroon); font-size:.9rem; line-height:1.2;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.forum-title:hover { color:var(--maroon-hover); }
.forum-meta { font-size:.72rem; color:var(--ink-soft); margin-top:1px; }

/* forum INDEX board: one card = column-label strip + maroon section bars + sub-forum rows (Topics / Posts / Latest) */
.forum-board { overflow:hidden; }
.forum-board-head, .forum-board .forum-row { display:flex; align-items:center; gap:.6rem; }
.forum-board-head { padding:.45rem .85rem; background:var(--bs-card-cap-bg); border-bottom:1px solid var(--panel-edge);
    color:var(--ink-soft); font-family:'Inter',serif; font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:.72rem; }
.forum-board .forum-section { padding:.45rem .85rem; background:var(--maroon); color:#f3e7e3;
    font-family:'Inter',serif; font-weight:700; font-size:.95rem; }
.forum-board .forum-row { padding:.6rem .85rem; border-bottom:1px dashed var(--panel-edge); }
.forum-board .forum-row:last-child,
.forum-board .forum-row:has(+ .forum-section) { border-bottom:0; }   /* last row of a section (before the next bar) has no rule */
.forum-board .fcol-name { flex:1 1 auto; min-width:0; }
.forum-board .fcol-topics, .forum-board .fcol-posts { flex:0 0 56px; width:56px; text-align:center; }
.forum-board .fcol-latest { flex:0 0 195px; width:195px; min-width:0; }
.forum-board .forum-row .fcol-topics, .forum-board .forum-row .fcol-posts { font-weight:700; color:var(--ink); font-size:1rem; }
.forum-board .forum-desc { display:block; font-size:.8rem; color:var(--ink-soft); margin-top:1px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.forum-board .latest-title { display:block; font-size:.84rem; font-weight:600;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.forum-board .latest-meta { display:block; font-size:.72rem; color:var(--ink-soft); }
/* links: beat .parchment a:not(.btn) on specificity, and never inline-underline on hover */
.parchment .forum-board a, .parchment .forum-board a:hover { text-decoration:none; }
.parchment .forum-board .forum-section a { color:#f3e7e3; }
.parchment .forum-board .forum-section a:hover { color:#fff; }
.parchment .forum-board .forum-name { color:var(--maroon); font-weight:700; }
.parchment .forum-board .forum-name:hover { color:var(--maroon-hover); }
.parchment .forum-board .latest-title { color:var(--link); }
.parchment .forum-board .latest-title:hover { color:var(--link-hover); }
@media (max-width:767.98px){
    .forum-board .fcol-topics, .forum-board .fcol-posts, .forum-board .fcol-latest { display:none; }
}

/* quick poll */
.poll-q { font-family:'Inter',serif; font-weight:700; color:var(--maroon); font-size:.95rem; line-height:1.25; margin-bottom:.35rem; }
.poll-opt { display:flex; align-items:center; gap:.5rem; margin:0; padding:.5rem; cursor:pointer;
    font-size:.85rem; color:var(--ink); border-bottom:1px dashed var(--panel-edge); transition:background .12s; }
.poll-opt:last-of-type { border-bottom:0; }
.poll-opt:hover { background:rgba(110,58,51,.06); }
.poll-opt .form-check-input { float:none; margin:0; }
.btn-vote { background:var(--maroon); color:#f3e7e3; border:0; font-weight:700; font-size:.85rem; padding:.4rem 1.5rem; border-radius:5px; }
.btn-vote:hover { background:var(--maroon-hover); color:#fff; }

/* empty-state box — dashed box that fills its area with a centered message (e.g. no poll) */
.empty-box { border:1px dashed var(--panel-edge); border-radius:6px; padding:1rem .75rem; color:var(--ink-soft); }

/* user block avatar + greeting card (home account box) */
.user-badge { flex:none; width:42px; height:42px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,#8a4a3f,var(--maroon)); color:#fff; font-weight:700; font-size:1.2rem; }
.user-greeting { background:rgba(0,0,0,.05); border:1px solid rgba(0,0,0,.05); border-radius:7px; padding:.5rem .6rem; }

/* feature tiles (sidebar) — borderless like the other content cards, just a shadow */
.feature-btn { display:flex; align-items:center; gap:8px; padding:8px; margin-bottom:8px; border-radius:7px;
    background:var(--card); border:0; color:var(--ink); box-shadow:0 1px 4px rgba(0,0,0,.12);
    transition:background .12s; }
.feature-btn:last-child { margin-bottom:0; }
.feature-btn:hover { background:#efe9dd; color:var(--ink); text-decoration:none; }
.feature-btn .fi { flex:none; width:42px; height:42px; border-radius:7px; display:flex; align-items:center; justify-content:center;
    font-size:1.2rem; color:#4a4337; background:linear-gradient(135deg,#cbc6bb,#a39c8c); border:1px solid var(--panel-edge); box-shadow:0 1px 2px rgba(0,0,0,.15); }
.feature-btn .ttl { font-family:'Inter',serif; font-weight:700; color:var(--maroon); font-size:.95rem; line-height:1.15; }
.feature-btn .sub { font-size:.82rem; color:var(--ink-soft); line-height:1.2; }
.feature-btn .arrow { margin-left:auto; color:var(--gold-2); }