/* ===========================================================
   UOWOS — dark fantasy theme
   Palette: parchment gold on deep stone with bronze accents
   =========================================================== */

:root {
    --bg-0:        #0e0c0a;            /* deepest */
    --bg-1:        #1a1612;            /* page */
    --bg-2:        #221c16;            /* card */
    --bg-3:        #2b241c;            /* card hover */
    --border:      #3b3024;
    --border-soft: #2a221a;

    --text:        #e8dcc4;            /* parchment */
    --text-dim:    #b6a685;
    --text-mute:   #7a6a52;

    --gold:        #d4a84a;            /* primary accent */
    --gold-hi:     #f0c563;
    --gold-lo:     #8a6a26;
    --bronze:      #a26a3a;
    --blood:       #8a2a2a;
    --green:       #5a8a3a;

    --radius:      6px;
    --radius-lg:   10px;
    --shadow:      0 8px 24px rgba(0,0,0,0.45);
    --shadow-soft: 0 2px 8px rgba(0,0,0,0.35);

    --font-body:   "IM Fell English", "Segoe UI", "Inter", system-ui, -apple-system, Roboto, Arial, sans-serif;
    --font-display:"MedievalSharp", "Cinzel", "Trajan Pro", "Times New Roman", Georgia, serif;
    --font-brand:  "MedievalSharp", "Cinzel", "Trajan Pro", serif;
    --font-mono:   ui-monospace, "JetBrains Mono", Consolas, "Courier New", monospace;

    /* Wood-grain palette for cards and the header */
    --wood-deep:   #150d06;
    --wood-base:   #2a1d10;
    --wood-mid:    #38291a;
    --wood-warm:   #4a3320;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg-1);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    min-height: 100%;
}

/* Site background: dimmed fantasy painting + a heavy dark veil so the
   content cards always remain readable. The veil is two stacked layers:
   1) a near-opaque dark wash (top), then
   2) a soft golden vignette for warmth,
   above the actual photo. The image is fixed so it doesn't scroll. */
body {
    background-image:
        radial-gradient(1200px 600px at 50% -100px, rgba(212,168,74,0.05), transparent 60%),
        linear-gradient(to bottom, rgba(14,12,10,0.62), rgba(14,12,10,0.78)),
        url('/assets/img/site-bg.jpg');
    background-size: auto, auto, cover;
    background-position: center top, center, center center;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-attachment: fixed, fixed, fixed;
    background-color: var(--bg-1);
}

a {
    color: var(--gold);
    text-decoration: none;
    transition: color .15s ease;
}
a:hover { color: var(--gold-hi); }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--text);
    letter-spacing: 0.02em;
    margin: 0 0 .6em;
    font-weight: 600;
}
h1 { font-size: 2.1rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; }

code {
    font-family: var(--font-mono);
    background: var(--bg-0);
    border: 1px solid var(--border-soft);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: .92em;
    color: var(--text-dim);
}

/* ----- Layout ------------------------------------------------------- */

.wrap {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.site-header {
    /* Same wood photo as the cards, with a slightly heavier veil so
       the menu text is comfortable to read against the plank lights.
       `cover` keeps the planks horizontal across the full width of
       any screen. */
    background-color: #1a110a;
    background-image:
        linear-gradient(rgba(15,9,4,0.52), rgba(15,9,4,0.70)),
        url('/assets/img/wood.jpg');
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    border-bottom: 2px solid #0d0805;
    box-shadow:
        inset 0 1px 0 rgba(212,168,74,0.18),
        inset 0 -2px 0 rgba(0,0,0,0.55),
        var(--shadow-soft);
    position: sticky;
    top: 0;
    z-index: 20;
}
.site-header .wrap {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 64px;
}

.brand {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--font-brand);
    font-size: 1.8rem;
    letter-spacing: 0.04em;
    color: var(--text);
    text-shadow: 0 2px 0 rgba(0,0,0,0.65), 0 0 18px rgba(212,168,74,0.15);
}
.brand-mark {
    color: var(--gold);
    text-shadow: 0 2px 0 rgba(0,0,0,0.7), 0 0 12px rgba(212,168,74,0.35);
}
.brand-name { color: var(--gold-hi); }

.nav-main {
    display: flex;
    gap: 4px;
    flex: 1;
    margin-left: 12px;
}
.nav-main a {
    color: #d8c697;
    padding: 10px 12px;
    border-radius: var(--radius);
    font-family: var(--font-display);
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 0 rgba(0,0,0,0.65);
    white-space: nowrap;
}
.nav-main a:hover {
    color: var(--gold-hi);
    background: rgba(212,168,74,0.10);
    text-shadow: 0 1px 0 rgba(0,0,0,0.7), 0 0 10px rgba(212,168,74,0.35);
}
/* Shop entry in main nav: keep 💎 + label on one line, give the word
   itself a permanent gold glow so it pops next to plain nav links. */
.nav-main a.nav-shop {
    white-space: nowrap;
    color: var(--gold-hi);
    text-shadow:
        0 1px 0 rgba(0,0,0,0.7),
        0 0 8px rgba(212,168,74,0.45),
        0 0 14px rgba(212,168,74,0.25);
}
.nav-main a.nav-shop:hover {
    color: #fff2c4;
    text-shadow:
        0 1px 0 rgba(0,0,0,0.75),
        0 0 10px rgba(240,197,99,0.65),
        0 0 18px rgba(240,197,99,0.35);
}

/* Owner ⚙ gear icon in nav (top-right). */
.nav-admin { padding: 6px 10px; font-size: 1.1rem; line-height: 1; }

/* Admin dashboard cards/grid (/?q=admin). */
.admin-stats        { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 14px 0; }
.admin-stats .card  { padding: 10px 14px; text-align: center; }
.admin-stats .card h3       { font-size: 0.95rem; color: var(--gold); margin: 0 0 4px; border: 0; padding: 0; }
/* Override the global .stat-value display font with a clean sans/mono
   so the big numbers in the admin grid stay legible. The home page
   intentionally uses the medieval display font for atmosphere; admin
   is a dashboard, readability wins. */
.admin-stats .stat-value    {
    font-family: var(--font-mono);
    font-size: 1.9rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    text-shadow: none;
    color: var(--gold-hi);
}
.admin-stats .stat-label    { font-size: 0.72rem; }

/* Tabular numerics for the admin tables — same monospace look so
   columns line up cleanly and figures are easy to scan. */
.admin-table td.num,
.admin-table th.num         {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
    color: var(--text);
}
.admin-table td.num strong  { color: var(--gold-hi); }

.admin-filter   { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 14px; }
.admin-filter label { color: var(--text-dim); font-size: 0.9rem; }
.admin-filter input { padding: 6px 10px; background: rgba(0,0,0,0.25); border: 1px solid var(--border-soft); border-radius: 4px; color: var(--text); font-family: var(--font-mono); }
.admin-filter .muted { margin-left: auto; }

.admin-table code   { font-size: 0.82rem; }

/* Country flag icons rendered by GeoIp::flag() (SVG, lipis/flag-icons). */
.flag-icon {
    width: 22px; height: 16px;
    vertical-align: middle;
    border: 1px solid rgba(0,0,0,0.45);
    border-radius: 2px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.45);
    object-fit: cover;
}

.nav-right {
    display: flex;
    gap: 8px;
    align-items: center;
}

.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    background: var(--bg-2);
    border: 1px solid var(--border);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.92rem;
}
.user-chip .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 6px var(--green);
}

.lang-switch select {
    background: var(--bg-2);
    color: var(--text-dim);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 6px 8px;
    font-size: 0.85rem;
    cursor: pointer;
}

.site-main {
    padding: 32px 0 56px;
    min-height: 60vh;
}
/* On the home page the hero+bar provide visual top spacing already */
body.has-big-hero .site-main {
    padding-top: 0;
}

.site-footer {
    border-top: 1px solid var(--border);
    background: var(--bg-0);
    padding: 22px 0;
    color: var(--text-mute);
    font-size: 0.88rem;
}

/* ----- Buttons ------------------------------------------------------ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--border);
    background: var(--bg-2);
    color: var(--text);
    padding: 8px 16px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.2;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
    text-decoration: none;
}
.btn:hover { background: var(--bg-3); border-color: var(--gold-lo); color: var(--gold-hi); }
.btn:active { transform: translateY(1px); }
.btn.lg { padding: 12px 22px; font-size: 1rem; }

.btn-gold {
    background: linear-gradient(to bottom, #e8c160, #b58a2e);
    border-color: #6b4d14;
    color: #1a1206;
    text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}
.btn-gold:hover {
    background: linear-gradient(to bottom, #f3cd6c, #c5982e);
    color: #14100a;
    border-color: #8a6a26;
}

.btn-ghost {
    background: transparent;
    color: var(--text-dim);
}
.btn-ghost:hover { color: var(--gold-hi); background: rgba(212,168,74,0.05); }

.btn-danger {
    background: linear-gradient(to bottom, #a83a3a, #6e1f1f);
    border-color: #3a1010;
    color: #fde8e8;
}

/* Discord button — official brand colour */
.btn-discord {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(to bottom, #5865F2, #4752c4);
    border: 1px solid #313a8c;
    color: #ffffff;
    padding: 8px 16px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, transform .05s, box-shadow .15s;
    box-shadow: 0 2px 0 rgba(0,0,0,0.25);
}
.btn-discord:hover {
    background: linear-gradient(to bottom, #6973ff, #525ed4);
    color: #ffffff;
    box-shadow: 0 3px 0 rgba(0,0,0,0.3), 0 0 0 2px rgba(88,101,242,0.25);
}
.btn-discord:active { transform: translateY(1px); }
.btn-discord.lg { padding: 12px 22px; font-size: 1rem; }
.btn-discord .discord-icon { width: 20px; height: 20px; }
.btn-discord.lg .discord-icon { width: 22px; height: 22px; }

/* Compact variant for navbar */
.btn-discord-nav { padding: 6px 12px; font-size: 0.85rem; }
.btn-discord-nav .discord-icon { width: 18px; height: 18px; }
.btn-discord-nav .discord-label { /* hidden on small screens */ }

/* ----- Page hero (centered banner on home) ------------------------- */

.page-hero {
    width: 70%;
    max-width: 1400px;
    margin: 28px auto 32px;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow:
        0 12px 36px rgba(0,0,0,0.6),
        inset 0 0 0 1px rgba(212,168,74,0.1);
}
.page-hero-image {
    width: 100%;
    aspect-ratio: 1972 / 511;  /* matches the natural ratio of hero.jpg */
    background-image: url('/assets/img/hero.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #0a0908;
    position: relative;
}
/* Very gentle vignette — keep it minimal so the panoramic image stays
   visible edge-to-edge (knight on the left, blacksmith on the right). */
.page-hero-image::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 100% at center, transparent 75%, rgba(0,0,0,0.25) 100%);
    pointer-events: none;
}

/* Slim banner for inner pages */
.page-banner-slim {
    height: 110px;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid var(--gold-lo);
    margin-bottom: 28px;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.4);
}
.page-banner-slim-image {
    position: absolute; inset: 0;
    background-image: url('/assets/img/hero.jpg');
    background-size: cover;
    background-position: center center;
    filter: brightness(0.7) saturate(0.85);
}
.page-banner-slim::after {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%),
        radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.4) 100%);
}

/* ----- Home 3-column layout ---------------------------------------- */

.home-grid {
    display: grid;
    grid-template-columns: 1fr 2.5fr 1fr;
    gap: 18px;
    align-items: start;
}

/* On the home page only, let the 3-column grid extend out to the
   same 70%-of-viewport (capped at 1400px) width as the hero banner
   sitting above it. Without this override the grid is constrained to
   the global 1100px `.wrap`, so the side columns end up narrower
   than the banner and visually mis-aligned. */
body.has-big-hero .site-main > .wrap {
    max-width: none;
    padding: 0;
}
body.has-big-hero .home-grid,
body.has-big-hero .site-main > .wrap > .flash {
    width: 70%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}
body.has-big-hero .home-grid {
    padding: 0 4px;   /* tiny gutter so card borders don't kiss the viewport on narrow widths */
}
.home-side                  { display: flex; flex-direction: column; gap: 14px; }
.home-main                  { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.home-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 0 4px 4px;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 6px;
}
.home-section-head h2 {
    font-size: 1.4rem;
    margin: 0;
    color: var(--gold);
}
.home-section-head .muted { color: var(--text-mute); font-size: 0.85rem; }

/* Status card - center the big number */
.home-status .stat-value    { text-align: center; }
.home-status .stat-label    { text-align: center; }
.home-status-link           {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform .12s, border-color .15s, box-shadow .15s;
}
.home-status-link:hover     {
    transform: translateY(-1px);
    border-color: var(--gold-lo);
    box-shadow:
        inset 0 1px 0 rgba(212,168,74,0.22),
        inset 0 -1px 0 rgba(0,0,0,0.55),
        0 6px 18px rgba(0,0,0,0.45);
}

/* News cards */
.news-empty                 { text-align: center; color: var(--text-mute); }
.news-card                  { padding: 18px 22px; }
.news-card-head             { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); }
.news-card-head h3          { margin: 0 0 4px; font-size: 1.1rem; }
.news-card-head h3 a        { color: var(--text); }
.news-card-head h3 a:hover  { color: var(--gold-hi); }
.news-meta                  {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    color: var(--text-mute);
    font-size: 0.82rem;
    margin: 0;
}
.news-meta strong           { color: var(--text-dim); }
.news-meta .dot-sep         { margin: 0 2px; }
.news-avatar                {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1px solid var(--border);
    object-fit: cover;
    vertical-align: middle;
}
.news-snippet               { color: var(--text-dim); margin: 8px 0 10px; font-size: 0.95rem; line-height: 1.5; }
.muted                      { color: var(--text-mute); }
.muted:hover                { color: var(--gold-hi); }

/* Donation card */
/* Override the generic .card-stone wood texture for the "Support the
   Shard" panel — use the user-supplied gold.jpg as the backdrop, with
   a moderate dark veil so the gold button and parchment text stay
   readable against the bright background.
   Important: use the combined .card-stone.home-donate selector so
   this rule wins against the later .card-stone block (CSS rule order
   would otherwise let wood.jpg win at equal specificity). */
.card-stone.home-donate     {
    text-align: left;
    background-color: #1f150b;
    background-image:
        linear-gradient(rgba(15,9,4,0.55), rgba(15,9,4,0.72)),
        url('/assets/img/gold.jpg');
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    /* Jewelled frame — thicker gold border, multilayer gold glow,
       and a subtle inner-bevel so the panel looks like a treasure
       chest inset rather than a regular card. */
    border: 2px solid #d4a84a;
    box-shadow:
        inset 0 0 0 1px rgba(212,168,74,0.55),
        inset 0 0 18px rgba(20,12,4,0.6),
        0 0 0 1px rgba(0,0,0,0.55),
        0 0 22px rgba(212,168,74,0.22),
        0 8px 24px rgba(0,0,0,0.55);
    position: relative;
    overflow: visible;
    isolation: isolate;
}

/* Two diamond gems at the top corners — pure CSS, no images.
   Overrides the generic .card-stone::before thin-strip for this panel
   only (sacrificed in favour of the corner-gem accent + thicker gold
   border already supplying the same upper-edge highlight). */
.card-stone.home-donate::before,
.card-stone.home-donate::after {
    content: '';
    position: absolute;
    top: -10px;
    width: 16px; height: 16px;
    background:
        linear-gradient(135deg, #fff2c4 0%, #f0c563 40%, #d4a84a 60%, #8a6a26 100%);
    transform: rotate(45deg);
    border: 1px solid #5c4317;
    border-radius: 1px;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.30),
        0 0 10px rgba(212,168,74,0.65),
        0 1px 3px rgba(0,0,0,0.7);
    z-index: 2;
    height: 16px;
}
.card-stone.home-donate::before { left:  -10px; }
.card-stone.home-donate::after  { right: -10px; }
/* Stronger text-shadow + lighter base colour for legibility on top of
   the bright golden backdrop. */
.home-donate h3              { color: var(--gold-hi); text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.5); }
.home-donate p,
.home-donate .donate-perks li,
.home-donate .donate-note    { color: #f0e3c0 !important; text-shadow: 0 1px 2px rgba(0,0,0,0.9); }
.home-donate p              { font-size: 0.92rem; margin: 0 0 12px; }
.home-donate .donate-note a  { color: var(--gold-hi); }

/* "Visit the shop" — donate CTA. Wood-plank backdrop with gold
   lettering, plus a slow gold-glow pulse so the button visibly
   "breathes" and pulls the eye. Pulse pauses on hover and gives
   way to a brighter highlight to confirm the click target. */
.home-donate .donate-btn {
    position: relative;
    background:
        linear-gradient(rgba(15,9,4,0.40), rgba(15,9,4,0.60)),
        url('/assets/img/wood.jpg');
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    color: var(--gold-hi);
    text-shadow: 0 1px 0 rgba(0,0,0,0.85), 0 0 6px rgba(0,0,0,0.55);
    border-color: var(--gold);
    box-shadow:
        inset 0 1px 0 rgba(212,168,74,0.30),
        inset 0 -1px 0 rgba(0,0,0,0.55),
        0 3px 10px rgba(0,0,0,0.45);
    animation: donate-pulse 2.4s ease-in-out infinite;
    overflow: hidden;
}
/* Animated highlight sweep — a soft golden glint sliding left→right
   across the button face. Decorative; doesn't block clicks. */
.home-donate .donate-btn::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: -40%;
    width: 30%;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255,240,200,0.0)  10%,
        rgba(255,240,200,0.35) 50%,
        rgba(255,240,200,0.0)  90%,
        transparent 100%
    );
    transform: skewX(-20deg);
    animation: donate-sheen 3.6s linear infinite;
    pointer-events: none;
}
.home-donate .donate-btn:hover {
    background:
        linear-gradient(rgba(15,9,4,0.22), rgba(15,9,4,0.40)),
        url('/assets/img/wood.jpg');
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    color: #fff2c4;
    transform: translateY(-1px);
    animation-play-state: paused;
    box-shadow:
        inset 0 1px 0 rgba(212,168,74,0.55),
        inset 0 -1px 0 rgba(0,0,0,0.55),
        0 0 18px rgba(240,197,99,0.55),
        0 0 36px rgba(212,168,74,0.30),
        0 6px 16px rgba(0,0,0,0.55);
}
.home-donate .donate-btn:active { transform: translateY(0); }

@keyframes donate-pulse {
    0%, 100% {
        box-shadow:
            inset 0 1px 0 rgba(212,168,74,0.30),
            inset 0 -1px 0 rgba(0,0,0,0.55),
            0 0 0 rgba(212,168,74,0),
            0 3px 10px rgba(0,0,0,0.45);
    }
    50% {
        box-shadow:
            inset 0 1px 0 rgba(212,168,74,0.55),
            inset 0 -1px 0 rgba(0,0,0,0.55),
            0 0 14px rgba(240,197,99,0.55),
            0 0 28px rgba(212,168,74,0.30),
            0 4px 14px rgba(0,0,0,0.55);
    }
}
@keyframes donate-sheen {
    0%   { left: -40%; }
    60%  { left: 110%; }    /* travel + brief pause off-screen */
    100% { left: 110%; }
}

/* Screenshots widget below "Support the Shard" */
.home-screenshots .shots-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 8px;
}
.home-screenshots .shots-cell {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    background: rgba(0,0,0,0.25);
    transition: transform .12s, border-color .15s;
}
.home-screenshots .shots-cell:hover {
    border-color: var(--gold-lo);
    transform: scale(1.02);
}
.home-screenshots .shots-cell img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.home-screenshots-link             {
    display: block; color: inherit; text-decoration: none;
    transition: transform .12s, border-color .15s, box-shadow .15s;
}
.home-screenshots-link:hover       {
    transform: translateY(-1px);
    border-color: var(--gold-lo);
    box-shadow:
        inset 0 1px 0 rgba(212,168,74,0.20),
        inset 0 -1px 0 rgba(0,0,0,0.55),
        0 6px 18px rgba(0,0,0,0.45);
}

/* Events table on home (compact version) */
.home-events  { padding: 8px 14px 14px; }
.home-events .events-table th { font-size: 0.85rem; padding: 8px 10px; }
.home-events .events-table td { padding: 10px; font-size: 1rem; }

/* Gallery + moderation grid */
.shots-page-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    margin-top: 12px;
}
.shots-card                  { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.shots-card .shots-cell      {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 6px;
    background: rgba(0,0,0,0.25);
}
.shots-card .shots-cell img  { width: 100%; height: 100%; object-fit: cover; display: block; }
.shots-card .shots-title     { margin: 0; font-weight: 500; color: var(--text); }
.shots-card .shots-meta      { margin: 0; font-size: 0.85rem; }
.shots-mod-actions           { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.shots-mod-actions .btn      { font-size: 0.85rem; padding: 4px 10px; }
.donate-perks               { list-style: none; padding: 0; margin: 0 0 14px; }
.donate-perks li            {
    padding: 6px 0 6px 22px;
    position: relative;
    color: var(--text-dim);
    font-size: 0.88rem;
    border-bottom: 1px dashed var(--border-soft);
}
.donate-perks li:last-child { border-bottom: 0; }
.donate-perks li::before    { content: '✦'; position: absolute; left: 4px; color: var(--gold); }
.donate-btn                 {
    width: 100%; justify-content: center;
    font-family: var(--font-display);
    font-size: 1.25rem;
    letter-spacing: 0.04em;
}
.donate-note                { color: var(--text-mute) !important; font-size: 0.8rem !important; margin-top: 12px !important; text-align: center; }
.donate-note a              { color: var(--bronze); }

/* Responsive */
@media (max-width: 1100px) {
    .home-grid                { grid-template-columns: 1fr 2fr; }
    .home-side-right          { grid-column: 1 / -1; order: 3; }
    body.has-big-hero .home-grid,
    body.has-big-hero .site-main > .wrap > .flash { width: 90%; }
}
@media (max-width: 720px) {
    .home-grid                { grid-template-columns: 1fr; }
    .home-side-left,
    .home-side-right          { grid-column: 1; }
    .page-hero                { width: 92%; margin: 14px auto 22px; }
    body.has-big-hero .home-grid,
    body.has-big-hero .site-main > .wrap > .flash { width: 92%; }
}

/* ----- Cards grid --------------------------------------------------- */

.cards {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.card {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px;
    transition: border-color .2s ease, transform .2s ease;
}
.card:hover {
    border-color: var(--gold-lo);
    transform: translateY(-1px);
}

/* Wood-plank card variant — uses the real wood photo as a background
   under a soft dark veil for text contrast.
     1) `linear-gradient(...)` is a very thin tint that keeps light
        text readable even on the lighter knot areas of the photo.
     2) `url(/assets/img/wood.jpg)` is the photo, sized `cover` so it
        fills any card shape (square, tall, wide). The photo is a
        repeating plank texture so cropping is invisible — wide narrow
        cards still look like wood.
   `background-color` is a fallback for the brief moment before the
   image loads (and if it ever 404s). */
.card-stone {
    background-color: #1f150b;
    background-image:
        linear-gradient(rgba(15,9,4,0.42), rgba(15,9,4,0.58)),
        url('/assets/img/wood.jpg');
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    border: 1px solid #4a3320;
    box-shadow:
        inset 0 1px 0 rgba(212,168,74,0.14),
        inset 0 -1px 0 rgba(0,0,0,0.55),
        0 4px 14px rgba(0,0,0,0.40);
    position: relative;
}
.card-stone::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(212,168,74,0.5) 50%, transparent 100%);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.card-stone:hover {
    border-color: var(--gold-lo);
    box-shadow:
        inset 0 1px 0 rgba(212,168,74,0.2),
        inset 0 -1px 0 rgba(0,0,0,0.5),
        0 6px 18px rgba(0,0,0,0.45);
}
.card h3 {
    color: var(--gold);
    border-bottom: 1px solid var(--border-soft);
    padding-bottom: 8px;
    margin-bottom: 12px;
}
.stat-value {
    font-family: var(--font-display);
    font-size: 3.6rem;
    line-height: 1;
    color: var(--gold-hi);
    margin: 6px 0 0;
    text-shadow: 0 2px 0 rgba(0,0,0,0.55), 0 0 14px rgba(212,168,74,0.25);
}

/* Sphere online/offline indicator inside the Server status card.
   A pulsing green dot when alive, steady red when down. */
.server-state               {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 4px 0 8px;
    font-family: var(--font-display);
    font-size: 1.4rem;
    letter-spacing: 0.05em;
}
.server-state-dot           {
    display: inline-block;
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.6);
    flex-shrink: 0;
}
.server-state.is-online     { color: #8ee08e; }
.server-state.is-online  .server-state-dot {
    background: #57c957;
    box-shadow: 0 0 0 3px rgba(87,201,87,0.18), 0 0 10px rgba(87,201,87,0.55);
    animation: server-pulse 1.6s ease-in-out infinite;
}
.server-state.is-offline    { color: #e08e8e; }
.server-state.is-offline .server-state-dot {
    background: #c95757;
    box-shadow: 0 0 0 3px rgba(201,87,87,0.18), 0 0 10px rgba(201,87,87,0.45);
}
@keyframes server-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(87,201,87,0.18), 0 0 10px rgba(87,201,87,0.55); }
    50%      { box-shadow: 0 0 0 6px rgba(87,201,87,0.10), 0 0 16px rgba(87,201,87,0.85); }
}
.stat-label {
    color: var(--text-mute);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
}
.kv {
    display: flex;
    justify-content: space-between;
    margin: 4px 0;
    color: var(--text-dim);
}
.kv span { color: var(--text-mute); }

/* ----- Forms -------------------------------------------------------- */

.form-block {
    max-width: 460px;
    margin: 0 auto;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px;
}
.form-row { margin-bottom: 14px; }
.form-row label {
    display: block;
    color: var(--text-dim);
    font-size: 0.85rem;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.form-row input[type=text],
.form-row input[type=email],
.form-row input[type=password] {
    width: 100%;
    background: var(--bg-0);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px 12px;
    border-radius: var(--radius);
    font-size: 0.98rem;
    font-family: inherit;
}
.form-row input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(212,168,74,0.15);
}
.form-error {
    background: rgba(168,58,58,0.12);
    border: 1px solid #5a2222;
    color: #f0bcbc;
    padding: 10px 14px;
    border-radius: var(--radius);
    margin-bottom: 14px;
    font-size: 0.92rem;
}
.form-ok {
    background: rgba(90,138,58,0.12);
    border: 1px solid #324d20;
    color: #cfe6b6;
    padding: 10px 14px;
    border-radius: var(--radius);
    margin-bottom: 14px;
}

/* ----- Flash messages ----------------------------------------------- */

.flash {
    padding: 16px 20px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    border: 1px solid var(--border);
    font-size: 1.6rem;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}
.flash-ok    { background: rgba(90,138,58,0.12);  border-color: #324d20; color: #cfe6b6; }
.flash-error { background: rgba(168,58,58,0.12);  border-color: #5a2222; color: #f0bcbc; }
.flash-info  { background: rgba(212,168,74,0.10); border-color: #6b4d14; color: #f0d68f; }

/* ----- Form extras -------------------------------------------------- */

.form-block .hint {
    color: var(--text-mute);
    font-size: 0.92rem;
    margin: -4px 0 18px;
}
.form-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 18px;
    flex-wrap: wrap;
}
.form-aside {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border-soft);
    color: var(--text-mute);
    font-size: 0.92rem;
    text-align: center;
}

.options-page h1 { margin-bottom: 20px; }
.options-page .cards { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.options-page .card form { margin-top: 4px; }

/* ----- Forum -------------------------------------------------------- */

.forum-page                 { max-width: 1100px; margin: 0 auto; }
.forum-head                 { margin-bottom: 22px; }
.forum-head h1              { margin-bottom: 4px; }
.forum-head .hint           { color: var(--text-mute); margin: 0 0 16px; }

.forum-crumbs               { font-size: 0.9rem; color: var(--text-mute); margin-bottom: 14px; }
.forum-crumbs a             { color: var(--text-dim); }
.forum-crumbs strong        { color: var(--text); }
.dot-sep                    { color: var(--text-mute); margin: 0 6px; }

.forum-cat-list             { display: flex; flex-direction: column; gap: 12px; }
.forum-cat                  {
    display: grid;
    grid-template-columns: 1fr 200px 240px;
    gap: 18px;
    align-items: center;
    padding: 18px 22px;
    background-color: #1f150b;
    background-image:
        linear-gradient(rgba(15,9,4,0.50), rgba(15,9,4,0.66)),
        url('/assets/img/wood.jpg');
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: border-color .2s, transform .2s, box-shadow .2s;
    box-shadow:
        inset 0 1px 0 rgba(212,168,74,0.10),
        inset 0 -1px 0 rgba(0,0,0,0.5),
        0 3px 10px rgba(0,0,0,0.35);
}
.forum-cat:hover            {
    border-color: var(--gold-lo);
    transform: translateY(-1px);
    background-image:
        linear-gradient(rgba(15,9,4,0.38), rgba(15,9,4,0.55)),
        url('/assets/img/wood.jpg');
    box-shadow:
        inset 0 1px 0 rgba(212,168,74,0.18),
        inset 0 -1px 0 rgba(0,0,0,0.5),
        0 5px 14px rgba(0,0,0,0.45);
}
.forum-cat h3               { color: var(--gold); margin: 0 0 4px; font-size: 1.1rem; }
.forum-cat-desc             { color: var(--text-dim); font-size: 0.92rem; margin: 0; }
.forum-cat-stats            { color: var(--text-dim); font-size: 0.85rem; }
.forum-cat-stats .kv        { margin: 2px 0; }
.forum-cat-last             { font-size: 0.85rem; color: var(--text-dim); border-left: 1px solid var(--border-soft); padding-left: 14px; }
.forum-last-title           { color: var(--text); margin: 0 0 2px; font-weight: 500; }
.forum-last-meta            { color: var(--text-mute); margin: 0; font-size: 0.82rem; }
.forum-empty                { font-style: italic; }

.tag-locked, .tag-staff     { font-size: 0.65rem; padding: 1px 6px; border-radius: 3px; vertical-align: middle; margin-left: 6px; letter-spacing: 0.05em; }
.tag-locked                 { background: #4a2222; color: #f0bcbc; }
.tag-staff                  { background: #4a3a14; color: #f0d68f; }

/* Wood card wrapping the topic list table inside a category. */
.forum-topic-list-card      { padding: 8px 18px 18px; }

/* Topic list table */
.forum-topic-table          { width: 100%; border-collapse: collapse; margin-top: 6px; }
.forum-topic-table th       {
    text-align: left;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.95rem;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}
.forum-topic-table th.num   { text-align: center; }
.forum-topic-table td       { padding: 16px 14px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
/* Reply/view counts and last-post date — 2x the previous size. */
.forum-topic-table td.num   {
    text-align: center;
    color: var(--text);
    font-size: 1.7rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.topic-title                { color: var(--text); font-weight: 600; font-size: 1.2rem; }
.topic-title:hover          { color: var(--gold-hi); }
.topic-by                   { margin: 4px 0 0; font-size: 1rem; color: var(--text-mute); }
.topic-by strong            { color: var(--text-dim); }
.topic-flag                 { font-size: 1.05rem; margin-right: 4px; }
.topic-last                 { font-size: 1.05rem; }
.topic-last p               { margin: 2px 0; }
.topic-last p:first-child   { font-size: 1.15rem; }
.topic-last .muted          { color: var(--text-mute); margin: 0; font-size: 1.15rem; font-variant-numeric: tabular-nums; }

.row-sticky                 { background: rgba(212,168,74,0.04); }
.row-sticky .topic-title    { color: var(--gold); }
.row-today .topic-title     { color: var(--gold-hi); }

/* Staff badges */
.staff-badge                { font-size: 0.6rem; padding: 1px 5px; border-radius: 3px; letter-spacing: 0.06em; font-weight: 700; vertical-align: middle; margin-left: 5px; }
.badge-owner                { background: #6b0d18; color: #ffd0d0; }
.badge-gm                   { background: #5b2c8a; color: #e0c8ff; }
.badge-cnsl                 { background: #8a5c1a; color: #ffe0a8; }
.badge-mgr                  { background: #8a5c1a; color: #ffe0a8; }

/* Forum posts (topic + replies) */
.forum-post                 {
    display: grid;
    grid-template-columns: 180px 1fr;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 14px;
    overflow: hidden;
}
.forum-post-author          {
    background: var(--bg-0);
    padding: 16px;
    text-align: center;
    border-right: 1px solid var(--border);
}
.post-avatar                { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; border: 2px solid var(--border); background: var(--bg-2); }
.post-name                  { margin: 8px 0 2px; color: var(--text); }
.post-rank                  { color: var(--gold); font-size: 0.82rem; margin: 2px 0; letter-spacing: 0.04em; }
.post-postcount             { color: var(--text-mute); font-size: 1.2rem; margin: 4px 0 0; font-variant-numeric: tabular-nums; }
.forum-post-body            { padding: 16px 20px; }
.forum-post-meta            { color: var(--text-mute); font-size: 1.65rem; font-variant-numeric: tabular-nums; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); }

.forum-post-topic           { border-left: 3px solid var(--gold-lo); }

/* Markdown rendering */
.md-content                 { line-height: 1.6; word-wrap: break-word; }
.md-content p               { margin: 0 0 0.7em; }
.md-content strong          { color: var(--text); font-weight: 700; }
.md-content em              { color: var(--text); }
.md-content del             { color: var(--text-mute); }
.md-content a               { color: var(--gold-hi); text-decoration: underline; }
.md-content code.md-inline  { background: var(--bg-0); padding: 1px 6px; border-radius: 3px; font-size: 0.9em; color: var(--text-dim); }
.md-content pre.md-code     { background: var(--bg-0); border: 1px solid var(--border-soft); padding: 10px 14px; border-radius: var(--radius); overflow-x: auto; margin: 0.6em 0; }
.md-content pre.md-code code{ color: var(--text-dim); font-family: var(--font-mono); font-size: 0.88em; }
.md-content blockquote.md-quote { border-left: 3px solid var(--bronze); background: rgba(162,106,58,0.06); padding: 8px 14px; margin: 0.6em 0; color: var(--text-dim); font-style: italic; }
.md-content ul.md-list, .md-content ol.md-list { padding-left: 24px; margin: 0.5em 0; }
.md-content hr              { border: 0; border-top: 1px solid var(--border-soft); margin: 1em 0; }

/* Forum reply form */
.forum-reply-form           { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 22px; margin-top: 18px; }
.forum-reply-form h3        { color: var(--gold); margin: 0 0 14px; }
.forum-reply-form textarea  {
    width: 100%;
    background: var(--bg-0);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px 12px;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
    min-height: 110px;
}
.forum-reply-form textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,168,74,0.15); }

.form-row textarea          {
    width: 100%;
    background: var(--bg-0);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px 12px;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
}

.forum-mod-bar              { display: flex; gap: 8px; margin: 10px 0 14px; flex-wrap: wrap; }

/* Markdown toolbar */
.md-toolbar                 {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    padding: 6px 8px;
    background: var(--bg-0);
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: var(--radius) var(--radius) 0 0;
}
.md-tb-btn                  {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-dim);
    cursor: pointer;
    padding: 4px 10px;
    font-family: var(--font-mono);
    font-size: 0.88rem;
    font-weight: 600;
    min-width: 32px;
    border-radius: 3px;
    transition: background .15s, color .15s, border-color .15s;
}
.md-tb-btn:hover            { background: var(--bg-3); color: var(--gold-hi); border-color: var(--border); }
.md-tb-btn:active           { background: var(--bg-2); transform: translateY(1px); }
.md-tb-spacer               { flex: 1; }

/* When toolbar is present, textarea below should join visually */
.md-toolbar + textarea      { border-radius: 0 0 var(--radius) var(--radius) !important; border-top: 0 !important; }

/* Emoji picker dropdown */
.md-emoji-picker            {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 6px;
    z-index: 100;
    max-width: 320px;
}
.md-emoji-grid              {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
}
.md-emoji-cell              {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 1.3rem;
    line-height: 1;
    width: 34px;
    height: 34px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .12s, border-color .12s;
    padding: 0;
}
.md-emoji-cell:hover        { background: var(--bg-3); border-color: var(--gold-lo); }

/* Vote buttons */
.forum-post-actions         {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border-soft);
    align-items: center;
}
.vote-btn                   {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.88rem;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.vote-btn:not([disabled]):hover { background: var(--bg-3); border-color: var(--gold-lo); color: var(--text); }
.vote-btn[disabled]         { cursor: default; opacity: 0.6; }
.vote-btn .vote-count       { font-weight: 600; min-width: 12px; text-align: left; }

.vote-like.is-active        {
    background: rgba(90,138,58,0.18);
    border-color: #5a8a3a;
    color: #cfe6b6;
}
.vote-dislike.is-active     {
    background: rgba(168,58,58,0.18);
    border-color: #8a2a2a;
    color: #f0bcbc;
}

/* Post signature */
.forum-post-signature       {
    margin-top: 16px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-soft);
    font-size: 0.82rem;
    color: var(--text-mute);
    font-style: italic;
    opacity: 0.85;
}
.forum-post-signature p     { margin: 0 0 0.3em; }
.forum-post-signature a     { color: var(--bronze); }

/* Avatar picker (in /options) */
.card-wide                  { grid-column: 1 / -1; }

.avatar-current             {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-0);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 14px;
}
.avatar-current img         {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid var(--gold);
    object-fit: cover;
}
.avatar-current span        { color: var(--text-mute); font-size: 0.9rem; }
.avatar-current code        { font-size: 0.82rem; }

.avatar-grid                {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 6px;
    max-height: 420px;
    overflow-y: auto;
    padding: 10px;
    background: var(--bg-0);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 14px;
}
.avatar-cell                {
    position: relative;
    cursor: pointer;
    border-radius: 6px;
    padding: 2px;
    border: 2px solid transparent;
    transition: border-color .12s, background .12s, transform .08s;
    background: var(--bg-2);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.avatar-cell input          { position: absolute; opacity: 0; pointer-events: none; }
.avatar-cell img            { max-width: 100%; max-height: 100%; object-fit: cover; border-radius: 4px; display: block; }
.avatar-cell:hover          { border-color: var(--gold-lo); background: var(--bg-3); transform: scale(1.06); z-index: 1; }
.avatar-cell.is-selected,
.avatar-cell:has(input:checked) {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(212,168,74,0.25);
}

/* Custom scrollbar in dark theme */
.avatar-grid::-webkit-scrollbar         { width: 10px; }
.avatar-grid::-webkit-scrollbar-track   { background: var(--bg-0); border-radius: 5px; }
.avatar-grid::-webkit-scrollbar-thumb   { background: var(--border); border-radius: 5px; }
.avatar-grid::-webkit-scrollbar-thumb:hover { background: var(--gold-lo); }

.forum-empty-state          { text-align: center; padding: 36px; color: var(--text-mute); background: var(--bg-2); border: 1px dashed var(--border); border-radius: var(--radius-lg); }

/* Pagination */
.pagination                 { display: flex; gap: 4px; justify-content: center; margin: 18px 0; flex-wrap: wrap; }
.pagination .page           { padding: 6px 12px; border: 1px solid var(--border); background: var(--bg-2); color: var(--text-dim); border-radius: var(--radius); font-size: 0.9rem; }
.pagination .page:hover     { border-color: var(--gold-lo); color: var(--gold-hi); }
.pagination .page.active    { background: var(--gold-lo); border-color: var(--gold); color: var(--bg-0); font-weight: 700; }

/* Forum responsive */
@media (max-width: 720px) {
    .forum-cat                  { grid-template-columns: 1fr; gap: 8px; padding: 14px 16px; }
    .forum-cat-last             { border-left: 0; border-top: 1px solid var(--border-soft); padding-left: 0; padding-top: 10px; }
    .forum-post                 { grid-template-columns: 1fr; }
    .forum-post-author          { display: flex; align-items: center; gap: 12px; text-align: left; padding: 10px 16px; border-right: 0; border-bottom: 1px solid var(--border); }
    .post-avatar                { width: 48px; height: 48px; }
    .post-name, .post-rank, .post-postcount { margin: 0; font-size: 0.8rem; }
    .forum-topic-table th, .forum-topic-table td { padding: 8px 6px; font-size: 0.85rem; }
}

/* ----- Library ------------------------------------------------------- */

.library-page                 { max-width: 1100px; margin: 0 auto; }

.library-group                { margin-bottom: 32px; }
.library-group-title          {
    color: var(--gold);
    font-size: 1.3rem;
    border-bottom: 1px solid var(--border-soft);
    padding-bottom: 8px;
    margin-bottom: 16px;
}
.library-grid                 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}
.library-tile                 {
    display: block;
    background-color: #1f150b;
    background-image:
        linear-gradient(rgba(15,9,4,0.50), rgba(15,9,4,0.66)),
        url('/assets/img/wood.jpg');
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px 18px;
    text-decoration: none;
    transition: border-color .2s, transform .15s, box-shadow .2s, background-image .2s;
    box-shadow:
        inset 0 1px 0 rgba(212,168,74,0.10),
        inset 0 -1px 0 rgba(0,0,0,0.5),
        0 3px 10px rgba(0,0,0,0.35);
}
.library-tile:hover           {
    border-color: var(--gold-lo);
    transform: translateY(-2px);
    background-image:
        linear-gradient(rgba(15,9,4,0.38), rgba(15,9,4,0.55)),
        url('/assets/img/wood.jpg');
    box-shadow:
        inset 0 1px 0 rgba(212,168,74,0.18),
        inset 0 -1px 0 rgba(0,0,0,0.5),
        0 6px 16px rgba(0,0,0,0.45);
}
.library-tile-icon            { font-size: 2rem; line-height: 1; display: block; margin-bottom: 8px; }
.library-tile h3              { color: var(--gold); margin: 0 0 6px; font-size: 1.05rem; }
.library-tile p               { color: var(--text-dim); margin: 0; font-size: 0.88rem; }

.library-body                 { padding: 22px 26px; margin-bottom: 18px; }
.library-table-wrap           { padding: 18px 22px; margin-bottom: 18px; }
.library-table-title          {
    color: var(--gold);
    font-size: 1.1rem;
    margin: 0 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-soft);
}
.library-table-scroll         { overflow-x: auto; }
.library-table                {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.05rem;
}
.library-table thead th       {
    text-align: left;
    color: var(--gold);
    font-size: 0.86rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    background: rgba(212,168,74,0.04);
}
.library-table thead th.num   { text-align: center; width: 48px; }
.library-table tbody td       {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-soft);
    color: var(--text-dim);
    vertical-align: middle;
}
.library-table tbody td.num   { text-align: center; font-variant-numeric: tabular-nums; font-size: 1.15rem; color: var(--text); font-family: var(--font-mono); }

/* Forum date / timestamps — same monospaced family as the home Connect
   info-card values so numbers line up visually across the site. */
.forum-post-meta time,
.forum-last-meta time,
.forum-date { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Home page — About card */
.home-about-lede   { color: var(--text); margin: 0 0 12px; line-height: 1.45; }
.home-about-list   { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.home-about-list li{ display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px;
                     background: rgba(0,0,0,0.18); border: 1px solid var(--border-soft);
                     border-radius: 4px; font-size: 0.92rem; line-height: 1.35; color: var(--text-dim); }
.home-about-list li strong { color: #d8b34a; margin-right: 4px; }
.home-about-list .ico       { font-size: 1.15rem; line-height: 1.2; flex-shrink: 0; }
.library-table tbody tr:hover { background: rgba(212,168,74,0.03); }
.library-cell-name            { color: var(--text); font-weight: 600; }
.library-row-ico              {
    width: 32px; height: 32px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 8px;
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    image-rendering: pixelated;
}
.library-table .md-content p  { margin: 0; }
.library-table td .muted      { color: var(--text-mute); }

/* Accordion groups inside a library table */
.library-accordion-hint       {
    color: var(--text-mute);
    font-size: 0.82rem;
    margin: 0 0 12px;
    font-style: italic;
}
.library-accordion            {
    background: var(--bg-0);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 8px;
    overflow: hidden;
    transition: border-color .15s;
}
.library-accordion[open]      { border-color: var(--gold-lo); }
.library-accordion-head       {
    list-style: none;
    cursor: pointer;
    padding: 11px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    user-select: none;
    transition: background .15s;
    color: var(--text);
    font-weight: 600;
}
.library-accordion-head::-webkit-details-marker { display: none; }
.library-accordion-head:hover { background: var(--bg-3); color: var(--gold-hi); }
.library-accordion-arrow      {
    color: var(--gold);
    transition: transform .15s ease;
    display: inline-block;
    width: 14px;
    font-size: 0.85rem;
}
.library-accordion[open] > .library-accordion-head .library-accordion-arrow {
    transform: rotate(90deg);
}
.library-accordion-name       { flex: 1; }
.library-accordion-count      {
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--gold);
    padding: 1px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    min-width: 28px;
    text-align: center;
}
.library-accordion[open] > .library-accordion-head {
    background: linear-gradient(180deg, rgba(212,168,74,0.06), transparent);
    border-bottom: 1px solid var(--border-soft);
}
.library-accordion .library-table-scroll {
    padding: 4px 10px 10px;
}
.library-accordion .library-table tbody td { background: transparent; }

.library-pager                {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-top: 22px;
    flex-wrap: wrap;
}
.library-pager-link           {
    background: var(--bg-2);
    border: 1px solid var(--border);
    padding: 10px 18px;
    border-radius: var(--radius);
    color: var(--text-dim);
    text-decoration: none;
    transition: border-color .15s, color .15s, background .15s;
    max-width: 48%;
}
.library-pager-link:hover     { border-color: var(--gold-lo); color: var(--gold-hi); background: var(--bg-3); }
.library-pager-prev           { text-align: left; }
.library-pager-next           { text-align: right; margin-left: auto; }

@media (max-width: 720px) {
    .library-table             { font-size: 0.82rem; }
    .library-table thead th,
    .library-table tbody td    { padding: 6px 8px; }
}

/* ----- Ranking ------------------------------------------------------ */

.rank-page                  { max-width: 1100px; margin: 0 auto; }
.rank-tabs                  {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 18px;
    overflow-x: auto;
}
.rank-tab                   {
    padding: 10px 18px;
    color: var(--text-mute);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s, background .15s;
    white-space: nowrap;
}
.rank-tab:hover             { color: var(--gold-hi); background: var(--bg-2); }
.rank-tab.active            { color: var(--gold); border-bottom-color: var(--gold); font-weight: 600; }

.rank-grid                  {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
}
.rank-mini                  { font-size: 0.88rem; }
.rank-mini thead th         { font-size: 0.72rem; }
.rank-mini tbody td         { padding: 6px 8px; }

.rank-medal-1               { color: #f0c563 !important; font-weight: 700; }
.rank-medal-2               { color: #c4c4c4 !important; font-weight: 700; }
.rank-medal-3               { color: #cd7f32 !important; font-weight: 700; }
.rank-diff-pos              { color: #b5e082 !important; }
.rank-diff-neg              { color: #f0bcbc !important; }
.rank-flag                  { font-size: 1.25rem; line-height: 1; min-width: 32px; }
.rank-guild                 { color: var(--gold); font-size: 0.88rem; font-style: italic; }
.rank-guild:empty::before   { content: '—'; color: var(--text-mute); font-style: normal; }

.rank-titles-table          { font-size: 0.92rem; }
.rank-titles-table .rank-color-red    td  { color: #f0bcbc !important; }
.rank-titles-table .rank-color-orange td  { color: #f7c585 !important; }
.rank-titles-table .rank-color-green  td  { color: #b5e082 !important; }
.rank-titles-table .rank-col-gol      { color: #6c7eff; }
.rank-titles-table .rank-col-sod      { color: #f0848f; }
.rank-titles-table .rank-col-vamp     { color: #8a8a8a; }

/* ----- Shop --------------------------------------------------------- */

.shop-page                  { max-width: 1100px; margin: 0 auto; }

/* Toolbar row above shop categories / items / tiers — keeps the
   "← Back" button on the left and the WGP balance on the right so
   the user can always escape to the shop index in one click. */
.shop-toolbar               {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 10px 0 14px;
}
.shop-toolbar .shop-balance { margin: 0; }
.shop-back-btn              { padding: 6px 14px; font-size: 0.95rem; }

.shop-balance               {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--bg-2);
    border: 1px solid var(--gold-lo);
    border-radius: 999px;
    margin: 8px 0;
    font-size: 0.95rem;
}
.shop-balance strong        { color: var(--gold-hi); font-size: 1.35rem; font-family: var(--font-display); letter-spacing: 0.04em; }
.shop-balance .muted        { color: var(--text-mute); font-size: 0.95rem; font-family: var(--font-display); letter-spacing: 0.03em; }
/* Make every numeric strong/big-price inside a shop page render in the
   same medieval display font used by the WGP balance, so prices,
   "after purchase" previews, quantity totals and tier prices all share
   one look. */
.shop-page strong,
.shop-page .btn.btn-gold.lg { font-family: var(--font-display); letter-spacing: 0.03em; }
.shop-balance-low           { color: #f0bcbc !important; }

.shop-cat-grid              {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}
.shop-cat                   {
    display: block;
    text-decoration: none;
    background-color: #1f150b;
    background-image:
        linear-gradient(rgba(15,9,4,0.50), rgba(15,9,4,0.66)),
        url('/assets/img/wood.jpg');
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px 20px;
    text-align: center;
    transition: border-color .2s, transform .15s, box-shadow .2s, background-image .2s;
    box-shadow:
        inset 0 1px 0 rgba(212,168,74,0.10),
        inset 0 -1px 0 rgba(0,0,0,0.5),
        0 3px 10px rgba(0,0,0,0.35);
}
.shop-cat:hover             {
    border-color: var(--gold-lo);
    transform: translateY(-2px);
    background-image:
        linear-gradient(rgba(15,9,4,0.38), rgba(15,9,4,0.55)),
        url('/assets/img/wood.jpg');
    box-shadow:
        inset 0 1px 0 rgba(212,168,74,0.18),
        inset 0 -1px 0 rgba(0,0,0,0.5),
        0 6px 16px rgba(0,0,0,0.45);
}
.shop-cat-icon              { font-size: 2.4rem; display: block; margin-bottom: 8px; }
.shop-cat h3                { color: var(--gold); margin: 0 0 4px; font-size: 1.05rem; }
.shop-cat p                 { color: var(--text-dim); margin: 0; font-size: 0.85rem; }

.shop-item-grid             {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.shop-item-card             {
    display: flex;
    flex-direction: column;
    background-color: #1f150b;
    background-image:
        linear-gradient(rgba(15,9,4,0.50), rgba(15,9,4,0.66)),
        url('/assets/img/wood.jpg');
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px 16px 16px;
    text-decoration: none;
    transition: border-color .2s, transform .12s, box-shadow .2s, background-image .2s;
    position: relative;
    box-shadow:
        inset 0 1px 0 rgba(212,168,74,0.10),
        inset 0 -1px 0 rgba(0,0,0,0.5),
        0 3px 10px rgba(0,0,0,0.35);
}
.shop-item-card:hover       {
    border-color: var(--gold-lo);
    transform: translateY(-1px);
    background-image:
        linear-gradient(rgba(15,9,4,0.38), rgba(15,9,4,0.55)),
        url('/assets/img/wood.jpg');
    box-shadow:
        inset 0 1px 0 rgba(212,168,74,0.18),
        inset 0 -1px 0 rgba(0,0,0,0.5),
        0 5px 14px rgba(0,0,0,0.45);
}
.shop-item-card h3          { color: var(--text); font-size: 1rem; margin: 8px 0 6px; }
.shop-item-card:hover h3    { color: var(--gold-hi); }
.shop-item-desc             { color: var(--text-dim); font-size: 0.85rem; margin: 0 0 12px; flex: 1; line-height: 1.4; }

/* Item thumbnail */
.shop-item-img              {
    position: relative;
    width: 100%;
    height: 90px;
    background: var(--bg-0);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
}
.shop-item-img img          {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    /* default smoothing — looks much nicer than pixelated for these small sprites */
}
.shop-item-img-fallback     {
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    display: none;
    font-size: 2.6rem;
    color: var(--text-mute);
    background: linear-gradient(180deg, var(--bg-2), var(--bg-0));
}
.shop-item-img-fallback span{ opacity: 0.5; }

/* Item detail page — bigger image side by side with info */
.shop-item-detail-head      {
    display: flex;
    gap: 22px;
    align-items: flex-start;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.shop-item-detail-img       {
    position: relative;
    width: 200px;
    height: 200px;
    background: var(--bg-0);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.shop-item-detail-img img   {
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
    object-fit: contain;
}
.shop-item-detail-fallback  { font-size: 4rem; }
.shop-item-detail-info      { flex: 1; min-width: 220px; }
.shop-item-detail-info h1   { margin: 0 0 8px; }

@media (max-width: 720px) {
    .shop-item-detail-img   { width: 100%; height: 200px; }
}
.shop-item-price            {
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid var(--border-soft);
    color: var(--gold);
}
.shop-item-price strong     { font-size: 1.35rem; color: var(--gold-hi); font-family: var(--font-display); letter-spacing: 0.04em; }
.shop-item-price span       { font-size: 0.8rem; color: var(--text-mute); margin-left: 4px; }
/* Note: we no longer dim unaffordable items — the price tag is the
   affordability indicator, and the buy button is disabled on the detail
   page when the user lacks WGP. */

.shop-item-detail           { padding: 24px 28px; }
.shop-item-detail h1        { margin: 0 0 8px; }
.shop-item-price-big        {
    margin: 0 0 16px;
    color: var(--gold);
}
.shop-item-price-big strong { font-size: 2.4rem; color: var(--gold-hi); font-family: var(--font-display); letter-spacing: 0.04em; }
.shop-item-price-big span   { color: var(--text-mute); font-size: 0.95rem; margin-left: 6px; }

.shop-item-fulldesc         {
    background: var(--bg-0);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 14px 16px;
    color: var(--text-dim);
    margin-bottom: 14px;
    line-height: 1.5;
}
.shop-item-meta             { margin-bottom: 18px; }
.shop-item-meta code        { word-break: break-all; }

.shop-buy-section           {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}
.shop-radio                 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: var(--bg-0);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-right: 10px;
    margin-bottom: 14px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.shop-radio:has(input:checked) { border-color: var(--gold); background: rgba(212,168,74,0.06); }
.shop-radio input           { margin: 0; }

.shop-buy-form              { margin-top: 12px; }

.shop-qty-row               {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 10px;
}
.shop-qty-row input[type=number] {
    width: 92px;
    height: 38px;
    padding: 0 10px;
    text-align: center;
    font-size: 20px;
    font-family: var(--font-display);
    letter-spacing: 0.04em;
    color: var(--gold-hi);
    border: 1px solid var(--border-soft, #5a4a2e);
    background: rgba(0,0,0,0.25);
    border-radius: 6px;
    -moz-appearance: textfield;
}
.shop-qty-row input[type=number]::-webkit-outer-spin-button,
.shop-qty-row input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.shop-qty-btn               {
    min-width: 36px;
    height: 36px;
    padding: 0;
    font-size: 18px;
    line-height: 1;
}
.shop-qty-max               { font-size: 14px; font-family: var(--font-display); color: var(--text-dim); }
.shop-buy-total             { margin-left: 6px; opacity: 0.95; font-family: var(--font-display); letter-spacing: 0.03em; }

/* Shop /?q=shop&c=skills — skill picker + live total */
.shop-skills select         {
    width: 100%;
    padding: 8px 10px;
    background-color: #1a1208;
    color: var(--gold-hi);
    border: 1px solid var(--gold-lo);
    border-radius: 6px;
    font-size: 1rem;
    font-family: var(--font-display);
    letter-spacing: 0.03em;
}
.shop-skills select:focus  { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,168,74,0.18); }
/* Dropdown OPTIONS use the OS chrome on most browsers, but Chromium
   and Firefox now respect explicit colors. Keep them dark + gold. */
.shop-skills select option { background-color: #1a1208; color: var(--gold-hi); }
.shop-skills select option:checked,
.shop-skills select option:hover { background-color: #3a2a14; color: var(--gold-hi); }
.shop-skill-total           {
    margin: 12px 0 6px;
    font-size: 1.1rem;
}
.shop-skill-total strong    {
    color: var(--gold-hi);
    font-family: var(--font-display);
    font-size: 1.6rem;
    letter-spacing: 0.04em;
    padding: 0 6px;
}

/* ===================================================================
   Talents reference page (/?q=talents)
   =================================================================== */
.talents-class             { margin: 0 0 28px; }
.talents-class-head        {
    color: var(--gold);
    font-family: var(--font-display);
    font-size: 1.6rem;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--border-soft);
    padding-bottom: 6px;
    margin: 0 0 14px;
}
.talents-grid              { display: flex; flex-direction: column; gap: 10px; }
.talents-group-head        {
    color: var(--gold-hi);
    font-family: var(--font-display);
    letter-spacing: 0.03em;
    background: rgba(212,168,74,0.06);
    border-left: 3px solid var(--gold);
    padding: 4px 10px;
    margin: 10px 0 4px;
    border-radius: 0 4px 4px 0;
}
.talents-card              { padding: 8px 14px; }
.talents-card > summary    {
    cursor: pointer;
    display: flex; align-items: center; gap: 12px;
    list-style: none;
    padding: 6px 0;
}
.talents-card > summary::-webkit-details-marker { display: none; }
.talents-card > summary::after {
    content: '▾';
    margin-left: auto;
    color: var(--text-mute);
    transition: transform .15s;
}
.talents-card[open] > summary::after { transform: rotate(180deg); color: var(--gold); }
.talents-ico               {
    width: 44px; height: 44px;
    object-fit: contain;
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    image-rendering: pixelated;
}
.talents-name              {
    color: var(--gold-hi);
    font-family: var(--font-display);
    font-size: 1.2rem;
    letter-spacing: 0.03em;
}
.talents-group             { font-size: 0.88rem; }
.talents-desc              {
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(0,0,0,0.20);
    border-left: 3px solid var(--gold);
    border-radius: 0 6px 6px 0;
    color: var(--text-dim);
    line-height: 1.55;
}
.talents-desc strong       { color: var(--gold-hi); }
.talents-desc u            { color: var(--text); text-decoration-color: var(--gold-lo); }
.talents-link              { margin: 8px 0 0; font-size: 0.84rem; }
.talents-link code         { user-select: all; }
.talents-card.is-target    {
    border-color: var(--gold);
    box-shadow:
        inset 0 1px 0 rgba(212,168,74,0.25),
        0 0 0 3px rgba(212,168,74,0.15),
        0 4px 14px rgba(0,0,0,0.45);
}

/* ===================================================================
   Shop reorder — Owner-only drag-and-drop on /?q=shop&c=<slug>
   =================================================================== */
.shop-reorder-bar           { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.shop-reorder-status        { font-size: 0.9rem; color: var(--text-dim); min-height: 1.2em; }
.shop-reorder-status.is-info{ color: var(--gold-hi); }
.shop-reorder-status.is-ok  { color: #8ee08e; }
.shop-reorder-status.is-err { color: #f0bcbc; }

.shop-item-grid.is-editing .shop-item-card {
    cursor: grab;
    user-select: none;
}
.shop-item-grid.is-editing .shop-item-card.is-shaking {
    animation: shop-wiggle 0.4s ease-in-out infinite alternate;
}
.shop-item-grid.is-editing .shop-item-card.is-dragging {
    animation: none;
    opacity: 0.45;
    cursor: grabbing;
    transform: scale(0.96);
}
@keyframes shop-wiggle {
    0%   { transform: rotate(-0.6deg) translateY(0); }
    100% { transform: rotate( 0.6deg) translateY(-1px); }
}

/* Owner-only price editor on item detail card */
.shop-price-edit            {
    margin: 8px 0 0;
    padding: 8px 12px;
    background: rgba(0,0,0,0.18);
    border: 1px dashed var(--border-soft);
    border-radius: 6px;
    max-width: 360px;
}
.shop-price-edit > summary  {
    cursor: pointer;
    color: var(--gold);
    font-size: 0.9rem;
    list-style: none;
}
.shop-price-edit > summary::-webkit-details-marker { display: none; }
.shop-price-form            {
    display: flex; align-items: center; gap: 8px;
    margin-top: 8px; flex-wrap: wrap;
}
.shop-price-form label      { font-size: 0.85rem; color: var(--text-dim); flex-basis: 100%; }
.shop-price-form input      {
    flex: 1; min-width: 140px;
    padding: 6px 10px;
    border: 1px solid var(--border-soft);
    background: rgba(0,0,0,0.25);
    color: var(--gold-hi);
    border-radius: 4px;
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: 0.03em;
}

.class-pick                 {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.account-perk-list          {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 6px 18px;
}
.account-perk-list li       {
    padding: 6px 0;
    color: var(--text-dim);
    font-size: 0.92rem;
    border-bottom: 1px dashed var(--border-soft);
}
.account-perk-list li:last-child { border-bottom: 0; }
.class-pick .shop-radio     {
    flex: 1;
    min-width: 110px;
    justify-content: center;
    margin-right: 0;
    margin-bottom: 0;
    font-size: 1rem;
    padding: 14px 18px;
}

/* Big class-pick cards with images */
.class-pick-cards           { gap: 12px; }
.class-card                 {
    flex: 1;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg-0);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 12px 8px 10px;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .1s;
    position: relative;
}
.class-card input           { position: absolute; opacity: 0; pointer-events: none; }
.class-card:hover           { background: var(--bg-3); border-color: var(--gold-lo); transform: translateY(-1px); }
.class-card:has(input:checked) {
    border-color: var(--gold);
    background: rgba(212,168,74,0.08);
    box-shadow: 0 0 0 2px rgba(212,168,74,0.2);
}
.class-card img             {
    width: 130px;
    height: 170px;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    margin-bottom: 6px;
}
.class-card-name            {
    font-weight: 600;
    color: var(--text);
    font-size: 0.95rem;
}
.class-card:has(input:checked) .class-card-name { color: var(--gold-hi); }

/* Tier-purchase grid (gold/exp) */
.tier-grid                  {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.tier-card                  {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 18px 16px;
    background: var(--bg-0);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .1s;
    position: relative;
    text-align: center;
}
.tier-card input            { position: absolute; opacity: 0; pointer-events: none; }
.tier-card:hover            { background: var(--bg-3); border-color: var(--gold-lo); transform: translateY(-1px); }
.tier-card:has(input:checked) {
    border-color: var(--gold);
    background: rgba(212,168,74,0.08);
    box-shadow: 0 0 0 2px rgba(212,168,74,0.2);
}
.tier-card-disabled         {
    cursor: not-allowed;
    background: var(--bg-0);
}
.tier-card-disabled:hover   { transform: none; background: var(--bg-0); border-color: var(--border); }
.tier-amount                {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gold-hi);
}
.tier-card-disabled .tier-amount { color: var(--text-mute); }
.tier-price                 {
    color: var(--text-dim);
    font-size: 0.92rem;
    padding-top: 6px;
    border-top: 1px solid var(--border-soft);
    width: 100%;
}
.tier-price strong          { color: var(--gold-hi); font-family: var(--font-display); font-size: 1.3rem; letter-spacing: 0.04em; }
.tier-price span            { color: var(--text-mute); margin-left: 4px; }

/* ----- Error page --------------------------------------------------- */

.error-page {
    text-align: center;
    padding: 80px 20px;
}
.error-page h1 {
    font-size: 5rem;
    color: var(--gold);
    margin-bottom: 0;
}

/* ----- Responsive --------------------------------------------------- */

@media (max-width: 720px) {
    .site-header .wrap { flex-wrap: wrap; min-height: 0; padding: 10px 16px; }
    .nav-main {
        order: 3;
        width: 100%;
        margin: 8px 0 0;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
    }
    .nav-main a { white-space: nowrap; }
    /* Hide Discord text label on narrow screens, keep icon */
    .btn-discord-nav .discord-label { display: none; }
    .btn-discord-nav { padding: 6px 8px; }
    /* Tighten hero strip */
    .page-hero-bar { padding: 16px 0; }
    .page-hero-bar .wrap { gap: 8px; }
    .page-banner-slim { height: 100px; margin-bottom: 18px; }
}

/* ===================================================================
   Changelog page + home snippet
   =================================================================== */
.cl-list                { list-style: none; padding: 0; margin: 16px 0; }
.cl-day-head            {
    margin: 18px 0 6px;
    padding: 4px 8px;
    font-family: var(--font-display);
    color: var(--gold-hi);
    border-left: 3px solid var(--gold);
    background: rgba(212,168,74,0.04);
    border-radius: 0 4px 4px 0;
}
.cl-entry               {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    gap: 12px;
    align-items: start;
    padding: 10px 14px;
    margin-bottom: 6px;
}
.cl-entry .cl-time      { color: var(--text-dim); font-family: var(--font-mono); font-size: .92em; }
.cl-entry .cl-text      { white-space: pre-wrap; word-break: break-word; }
.cl-admin               { display: flex; gap: 4px; }
.cl-admin .btn          { padding: 2px 8px; font-size: 14px; }

.home-changelog         { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.home-changelog .cl-entry { display: block; }
.home-changelog .cl-entry-head time { color: var(--gold-hi); font-family: var(--font-display); font-size: .98em; }
.home-changelog .cl-text { margin-top: 6px; white-space: pre-wrap; word-break: break-word; }

/* ===================================================================
   Recent forum topics widget (left column on home)
   =================================================================== */
.home-forum-recent .recent-topics { list-style: none; padding: 0; margin: 8px 0 6px; display: flex; flex-direction: column; gap: 10px; }
.home-forum-recent .recent-topics li { padding-bottom: 8px; border-bottom: 1px dashed rgba(212,168,74,0.10); }
.home-forum-recent .recent-topics li:last-child { border-bottom: none; }
.home-forum-recent .rt-title { display: block; font-weight: 500; font-size: 1.05rem; }
.home-forum-recent .rt-meta  { font-size: 1rem; color: var(--text-dim); margin-top: 4px; line-height: 1.5; }
.home-forum-recent .rt-meta time { font-variant-numeric: tabular-nums; font-size: 1.1rem; color: var(--text); }
.home-forum-recent .rt-cat   { color: var(--gold-hi); }

/* ===================================================================
   Bugtraq
   =================================================================== */
.bt-table tbody tr:hover         { background: rgba(212,168,74,0.03); }
.bt-row-link td                  { padding: 2px 12px 10px; }
.bt-row-link a                   { font-size: .9em; }
.bt-pill                         {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: .82em;
    border: 1px solid var(--border-soft);
    background: rgba(0,0,0,0.25);
    color: var(--text-dim);
    font-weight: 600;
    letter-spacing: 0.02em;
}
.bt-status-new              { color: #5ec9c8; border-color: #1f5f5e; }
.bt-status-viewed           { color: #c9a058; border-color: #6e4c1d; }
.bt-status-fixed            { color: #6cce6c; border-color: #2e6e2e; background: rgba(110,206,110,0.06); }
.bt-status-duplicate        { color: #b8b8b8; border-color: #4a4a4a; }
.bt-status-corebug          { color: #ff6b6b; border-color: #6b1f1f; }
.bt-status-notabug          { color: #b6d6ff; border-color: #2a4d6e; }
.bt-status-notenoughinfo    { color: #f48fc9; border-color: #6e2a52; }
.bt-status-falseinfo        { color: #7c84ff; border-color: #2a306e; }
.bt-status-cantreproduce    { color: #b1adff; border-color: #3f3d6e; }
.bt-status-unknown          { color: #777; border-color: #333; }
.bt-pill.bt-hidden          { margin-left: 4px; background: rgba(248,59,168,0.07); border-color: #6e2a52; color: #f48fc9; }
.bt-private                 { color: #f48fc9; }

.bt-view-head               { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.bt-meta                    { display: grid; grid-template-columns: 130px 1fr; gap: 6px 14px; margin: 14px 0; }
.bt-meta dt                 { color: var(--text-dim); font-size: .92em; }
.bt-meta dd                 { margin: 0; }
.bt-text                    {
    margin-top: 14px;
    padding: 12px 14px;
    border-left: 3px solid var(--gold);
    background: rgba(0,0,0,0.18);
    border-radius: 0 6px 6px 0;
    white-space: pre-wrap;
    word-break: break-word;
}
.bt-admin-form              { margin-top: 10px; }
.bt-admin-line              { display: inline-block; margin: 6px 8px 0 0; }
.btn.danger:hover           { color: #ff6b6b; border-color: rgba(255,107,107,0.4); }

.inline-form                { display: inline; }

/* Make the left column slightly more breathing room with the new widget */
@media (min-width: 920px) {
    .home-forum-recent .recent-topics li { padding-bottom: 6px; }
}

/* ===========================================================
   Sosaria Pass page (/?q=pass)
   =========================================================== */
.pass-page                       { max-width: 1100px; margin: 0 auto; }

.pass-progress                   { padding: 16px 20px; margin-bottom: 14px; }
.pass-progress-row               {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 8px;
}
.pass-progress-label             {
    font-family: var(--font-display);
    color: var(--gold);
    font-size: 1.15rem;
    font-weight: 600;
}
.pass-progress-xp                {
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}
.pass-progress-pct               {
    margin-left: auto;
    color: var(--gold-hi);
    font-weight: 600;
}

.pass-bar-trough                 {
    position: relative;
    width: 100%;
    height: 14px;
    background: #0f0c08;
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.6);
}
.pass-bar-fill                   {
    height: 100%;
    background: linear-gradient(90deg, #4a8d4a 0%, #6cc26c 60%, #c8e8a0 100%);
    transition: width 0.3s ease;
}
.pass-bar-fill.is-done           {
    background: linear-gradient(90deg, #8a6a26 0%, #d4a84a 60%, #f0c563 100%);
}

/* Quest list */
.pass-quest-list                 {
    list-style: none;
    padding: 0;
    margin: 12px 0 0 0;
}
.pass-quest                      {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-soft);
}
.pass-quest:last-child           { border-bottom: none; }
.pass-quest.is-done              { opacity: 0.55; }

.pass-quest-head                 {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
}
.pass-quest-cad                  {
    color: var(--text-mute);
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}
.pass-quest-title                { color: var(--text); }
.pass-quest.is-done .pass-quest-title { text-decoration: line-through; color: var(--text-mute); }
.pass-quest-right                {
    color: var(--gold);
    font-variant-numeric: tabular-nums;
    font-size: 0.92rem;
}

.pass-quest-bar                  {
    height: 6px;
    background: #0f0c08;
    border: 1px solid var(--border-soft);
    border-radius: 3px;
    overflow: hidden;
}

/* Rewards ladder — premium column highlight */
.pass-premium-col                {
    color: #d8b34a;
    font-weight: 600;
}

/* History feed */
.pass-history                    {
    list-style: none;
    padding: 0;
    margin: 12px 0 0 0;
}
.pass-history-row                {
    display: grid;
    grid-template-columns: 110px 1fr auto 90px;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-soft);
}
.pass-history-row:last-child     { border-bottom: none; }
.pass-history-tag                {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-mute);
}
.pass-history-row.is-reward .pass-history-tag  { color: #e8dcc4; }
.pass-history-row.is-level  .pass-history-tag  { color: #d8b34a; }
.pass-history-row.is-quest  .pass-history-tag  { color: #6cc26c; }
.pass-history-row.is-premium .pass-history-tag { color: #f0c563; }

.pass-history-title              { color: var(--text); }
.pass-history-right              {
    color: var(--gold);
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
}
.pass-history-time               {
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    text-align: right;
}

/* Active tab highlight (overrides .rank-tab.active for the pass page) */
.pass-page .rank-tab.active      { color: #ff9a8a; border-bottom-color: #ff9a8a; }

/* Buy-on-shop button: wood.jpg background, a touch lighter than card-stone */
.pass-page .btn-gold             {
    background-color: #3a2916;
    background-image:
        linear-gradient(rgba(255,225,170,0.18), rgba(15,9,4,0.30)),
        url('/assets/img/wood.jpg');
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    border: 1px solid #6b4d14;
    color: #f4e3b6;
    text-shadow: 0 1px 2px rgba(0,0,0,0.65);
    box-shadow:
        inset 0 1px 0 rgba(255,220,160,0.18),
        inset 0 -1px 0 rgba(0,0,0,0.45),
        0 2px 6px rgba(0,0,0,0.35);
}
.pass-page .btn-gold:hover       {
    background-image:
        linear-gradient(rgba(255,225,170,0.28), rgba(15,9,4,0.18)),
        url('/assets/img/wood.jpg');
    border-color: var(--gold);
    color: #fff2cc;
}
.pass-page .btn-gold:disabled    {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.pass-reroll-bar                 {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0 0;
}
/* White label on the re-roll buttons — the parchment-gold default
   looked muddy against the wood-stained .btn-gold background. */
.pass-reroll-bar .btn-gold       { color: #ffffff; }
.pass-reroll-bar .btn-gold:hover { color: #ffffff; }
.pass-reroll-bar .btn-gold .muted { margin-left: 6px; font-weight: 500; color: rgba(255,255,255,0.7); }

@media (max-width: 720px) {
    .pass-progress-row           { flex-wrap: wrap; }
    .pass-quest-head             { grid-template-columns: 70px 1fr; }
    .pass-quest-right            { grid-column: 1 / -1; }
    .pass-history-row            { grid-template-columns: 90px 1fr; }
    .pass-history-right,
    .pass-history-time           { grid-column: 1 / -1; text-align: left; }
}