/*
 * Realcore Web
 * Classic parchment portal: aged-paper panels on dark wood, gold rules,
 * serif display type and restrained ornaments. Class names are kept stable
 * so every view keeps working.
 */

:root {
    /* Parchment surfaces (sampled from the reference art) */
    --parchment: #d8c8a0;
    --parchment-light: #e2d4b2;
    --parchment-2: #d0b890;
    --parchment-3: #c8b088;
    --parchment-deep: #bfa478;

    /* Wood / leather chrome */
    --wood-950: #0d0904;
    --wood-900: #181008;
    --wood-800: #241a0e;
    --wood-700: #3e2d18;

    /* Deep green of the panel head bars and primary buttons */
    --forest-900: #101808;
    --forest-800: #1b2610;
    --forest-700: #26331a;

    /* Gold */
    --gold: #c9a961;
    --gold-bright: #e8d9a0;
    --gold-dark: #8d6f26;

    /* Ink */
    --ink: #2a1c0c;
    --ink-soft: #5a462a;
    --ink-faint: #7d6942;

    /* Rules */
    --rule: #a08a5e;
    --rule-soft: #bda882;

    /* Links */
    --link: #1e3a9a;
    --link-hover: #142a75;

    /* Legacy aliases (kept so older rules stay consistent) */
    --page: var(--parchment);
    --surface: var(--parchment-light);
    --surface-2: var(--parchment-2);
    --surface-3: var(--parchment-3);
    --paper: var(--parchment);
    --paper-light: var(--parchment-light);
    --paper-deep: var(--parchment-3);
    --line: var(--rule-soft);
    --line-soft: #c4b087;
    --border-strong: var(--rule);
    --night-950: var(--wood-950);
    --night-900: var(--wood-900);
    --night-850: var(--wood-800);
    --night-800: var(--forest-900);
    --night-700: var(--wood-700);
    --accent: var(--gold-dark);
    --accent-bright: var(--gold-bright);
    --accent-dark: var(--link);
    --accent-wash: #e0cda2;

    /* Status colours, earth-toned */
    --danger: #8c2a1e;
    --danger-dark: #5e1a12;
    --danger-bg: #dfbfa4;
    --success: #3c5a24;
    --success-bg: #ccc79a;
    --info: var(--link);
    --info-bg: #c9c8a6;
    --purple: #5e4166;
    --purple-bg: #cebfae;

    /* Side menus: solid dark wood, the same material as the bronze buttons.
       The title bar is the bronze plate itself; the body is a shade darker
       than the buttons so they still sit raised on it. Everything about the
       look is in these values -- change them here, not in the rules below.
       (The top bar keeps the dark glass of --menu-nav-bg.) */
    /* Title bar: a darker charcoal than the body, same grain (12/2026: was the
       bronze plate, linear-gradient(180deg, #4a361d, var(--wood-800) 55%, var(--wood-950))). */
    --menu-title-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 -.42'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.1 -.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='.16'/%3E%3Crect width='100%25' height='100%25' filter='url(%23b)' opacity='.35'/%3E%3C/svg%3E") 0 0 / 180px 180px, linear-gradient(180deg, #141416, #0b0b0c);
    /* Body: dark charcoal with a fine stone grain (12/2026: was dark wood,
       linear-gradient(180deg, #23190d, #170f07)). */
    --menu-body-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 -.42'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.1 -.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='.16'/%3E%3Crect width='100%25' height='100%25' filter='url(%23b)' opacity='.35'/%3E%3C/svg%3E") 0 0 / 180px 180px, linear-gradient(180deg, #222225, #151517);
    /* Buttons: the menus' grain on the darkest charcoal of the set, a shade
       lighter on hover (12/2026: were the bronze plate). */
    --btn-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 -.42'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.1 -.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='.16'/%3E%3Crect width='100%25' height='100%25' filter='url(%23b)' opacity='.35'/%3E%3C/svg%3E") 0 0 / 180px 180px, linear-gradient(180deg, #0f0f11, #050506);
    --btn-bg-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 -.42'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.1 -.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='.16'/%3E%3Crect width='100%25' height='100%25' filter='url(%23b)' opacity='.35'/%3E%3C/svg%3E") 0 0 / 180px 180px, linear-gradient(180deg, #1d1d20, #0c0c0e);
    --menu-frame: var(--gold-dark);
    --menu-nav-bg: rgba(6, 4, 1, .5);   /* top bar, a touch heavier than a panel */
    --menu-texture: .07;          /* paper grain carried over every glass surface */
    --menu-ink: #ead9b4;          /* body text on the glass */
    --menu-ink-soft: #c9b58c;     /* labels and secondary lines */
    --menu-rule: rgba(201, 169, 97, .3);

    --radius: 3px;
    --radius-sm: 2px;
    --radius-btn: 9px;
    --radius-btn-sm: 6px;
    --shadow-hard: 0 8px 24px rgba(30, 20, 8, .35);
    --shadow-soft: 0 2px 8px rgba(30, 20, 8, .22);

    --display: Cinzel, "Trajan Pro", Georgia, "Times New Roman", serif;
    --serif: "EB Garamond", Georgia, "Times New Roman", Times, serif;
    --sans: var(--serif);
}

* {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    scroll-behavior: smooth;
}

body {
    position: relative;
    min-height: 100vh;
    margin: 0;
    background:
        url("/assets/images/ui/background.png?v=2") center top / cover no-repeat fixed,
        var(--wood-900);
    color: var(--ink);
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Scrim over the art: keeps the parchment panels legible on top of it. */
body::before {
    position: fixed;
    z-index: 0;
    content: "";
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 30%, rgba(20, 13, 5, .3), rgba(20, 13, 5, .62) 78%),
        linear-gradient(180deg, rgba(20, 13, 5, .34), rgba(20, 13, 5, .5));
    pointer-events: none;
}

::selection {
    background: var(--gold);
    color: var(--wood-900);
}

a {
    color: var(--link);
    text-decoration: none;
}

a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

button,
input,
select,
textarea {
    font: inherit;
}

img {
    max-width: 100%;
}

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.skip-link {
    position: fixed;
    z-index: 9999;
    top: 8px;
    left: 8px;
    padding: 9px 14px;
    background: var(--parchment);
    border: 1px solid var(--gold-dark);
    color: var(--ink);
    transform: translateY(-160%);
    transition: transform .15s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

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

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #5f7d3a;
    box-shadow: 0 0 0 2px rgba(95, 125, 58, .2);
}

/* Main navigation bar */
.site-nav {
    position: relative;
    z-index: 19;
    /* Dark glass over the art (the side menus are solid wood since 10/2026):
       the bar runs the full width, so it takes this much tint to stay a bar
       rather than a smudge. */
    background: var(--menu-nav-bg);
    -webkit-backdrop-filter: blur(3px) saturate(.92);
    backdrop-filter: blur(3px) saturate(.92);
    isolation: isolate;
    /* Matched to the panels' hairline, so the chrome reads as one system
       rather than a heavy bar over light frames. */
    border-top: 1px solid rgba(201, 169, 97, .28);
    border-bottom: 1px solid rgba(201, 169, 97, .34);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}

/* Three tracks, so the brand is centred on the bar itself and does not drift
   with the width of the buttons on the right. */
.site-nav-inner {
    width: min(1320px, calc(100% - 40px));
    min-height: 66px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 22px;
}

.nav-brand {
    grid-column: 2;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
    position: relative;
    z-index: 25;
    margin-top: 6px;
    margin-bottom: -44px;
}

.nav-brand:hover {
    text-decoration: none;
}

.nav-brand-logo {
    height: 110px;
    max-height: 115px;
    width: auto;
    max-width: 280px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .85)) drop-shadow(0 1px 3px rgba(0, 0, 0, .9));
    transition: transform .18s ease, filter .18s ease;
}

.nav-brand:hover .nav-brand-logo {
    transform: scale(1.03);
    filter: drop-shadow(0 6px 16px rgba(217, 180, 92, .5)) drop-shadow(0 3px 8px rgba(0, 0, 0, .95));
}

/* The name, cut from polished gold.
   The letters are painted with two clipped layers: a vertical gradient that
   gives the metal its highlight, dark waist and warm bottom edge, and a
   diagonal specular streak that travels across it. A drop-shadow pair does the
   rest -- one hard shadow for depth, one warm halo that blooms as the streak
   passes, so the shine and the glow are one gesture rather than two effects.

   Guarded by @supports because it paints the text with a clipped gradient:
   without background-clip the transparent colour would leave the name
   invisible, so browsers that lack it keep the flat gold set above. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .nav-brand {
        background-image:
            linear-gradient(102deg,
                transparent 0 42%,
                rgba(255, 253, 240, .28) 47%,
                rgba(255, 255, 255, .92) 50%,
                rgba(255, 253, 240, .28) 53%,
                transparent 58% 100%),
            linear-gradient(180deg,
                #fff7e0 0%,
                #f2d79a 26%,
                #d9b45c 44%,
                #a87f2a 52%,
                #e4cd8f 66%,
                #f6e6b6 82%,
                #c9a961 100%);
        background-repeat: no-repeat;
        background-size: 260% 100%, 100% 100%;
        background-position: 165% 0, 0 0;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        filter:
            drop-shadow(0 2px 5px rgba(0, 0, 0, .85))
            drop-shadow(0 0 6px rgba(201, 169, 97, .28));
    }

    .nav-brand:hover {
        color: transparent;
        filter:
            drop-shadow(0 2px 5px rgba(0, 0, 0, .85))
            drop-shadow(0 0 16px rgba(255, 226, 150, .6));
    }
}

/* One pass of the streak, with the halo blooming under it, then a long rest.
   Only the first background layer moves; the metal underneath stays put. */
@keyframes brand-shine {
    0% {
        background-position: 165% 0, 0 0;
        filter:
            drop-shadow(0 2px 5px rgba(0, 0, 0, .85))
            drop-shadow(0 0 6px rgba(201, 169, 97, .28));
    }
    14% {
        filter:
            drop-shadow(0 2px 5px rgba(0, 0, 0, .85))
            drop-shadow(0 0 18px rgba(255, 232, 168, .62));
    }
    30% {
        background-position: -65% 0, 0 0;
    }
    42%, 100% {
        background-position: -65% 0, 0 0;
        filter:
            drop-shadow(0 2px 5px rgba(0, 0, 0, .85))
            drop-shadow(0 0 6px rgba(201, 169, 97, .28));
    }
}

@media (prefers-reduced-motion: no-preference) {
    @supports ((-webkit-background-clip: text) or (background-clip: text)) {
        .nav-brand {
            animation: brand-shine 9s cubic-bezier(.4, 0, .2, 1) infinite;
        }

        /* Pointing at it brings the pass forward instead of waiting for it. */
        .nav-brand:hover {
            animation: brand-shine 1.6s cubic-bezier(.4, 0, .2, 1);
        }
    }
}

.nav-cta {
    display: inline-flex;
    align-items: center;
    padding: 9px 22px;
    position: relative;
    background: radial-gradient(ellipse at 50% 0, #a8291a, #7a1509 55%, #3f0800);
    border: 2px solid var(--gold);
    border-radius: var(--radius-btn);
    box-shadow:
        inset 0 0 0 1px rgba(236, 212, 139, .45),
        inset 0 8px 18px rgba(255, 120, 80, .18),
        0 2px 6px rgba(0, 0, 0, .5);
    color: var(--gold-bright);
    font-family: var(--display);
    font-size: .84rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    transition: background .18s ease, box-shadow .18s ease, color .18s ease;
    white-space: nowrap;
}

.nav-cta::before,
.nav-cta::after {
    position: absolute;
    width: 7px;
    height: 7px;
    content: "";
    border: 1px solid rgba(236, 217, 160, .8);
    pointer-events: none;
}

.nav-cta::before {
    top: 2px;
    left: 2px;
    border-right: 0;
    border-bottom: 0;
}

.nav-cta::after {
    right: 2px;
    bottom: 2px;
    border-top: 0;
    border-left: 0;
}

.nav-actions {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-cta:hover {
    background: radial-gradient(ellipse at 50% 0, #c73a25, #8f1a0d 55%, #4a0c02);
    box-shadow:
        inset 0 0 0 1px rgba(236, 212, 139, .6),
        inset 0 8px 22px rgba(255, 140, 95, .38),
        0 0 20px rgba(199, 58, 37, .6),
        0 2px 6px rgba(0, 0, 0, .5);
    color: #fbeec2;
    text-decoration: none;
}

/* Same treatment, cool half of the palette. */
.nav-cta-download {
    background: radial-gradient(ellipse at 50% 0, #2f63a8, #1b3d74 55%, #0b1c3c);
    box-shadow:
        inset 0 0 0 1px rgba(236, 212, 139, .45),
        inset 0 8px 18px rgba(120, 185, 255, .18),
        0 2px 6px rgba(0, 0, 0, .5);
}

.nav-cta-download:hover {
    background: radial-gradient(ellipse at 50% 0, #4a8ada, #24528f 55%, #0e2450);
    box-shadow:
        inset 0 0 0 1px rgba(236, 212, 139, .6),
        inset 0 8px 22px rgba(140, 200, 255, .4),
        0 0 20px rgba(58, 122, 205, .65),
        0 2px 6px rgba(0, 0, 0, .5);
    color: #fbeec2;
}

/* ---- Top bar call-to-action effects ---------------------------------------
   Layered on top of the buttons above without changing their look at rest:
   a metallic sheen that crosses each button now and then (and on hover), a
   2px lift with the gold corner brackets opening up on hover, a pressed
   state, icons that move with intent, and a slow glow on "Play now" -- the
   one action a visitor is meant to take. Everything that moves is switched
   off for people who ask their system for reduced motion. */
.nav-cta {
    gap: 8px;
    overflow: hidden;
    isolation: isolate;
    transform: translateY(0);
    transition:
        background .2s ease,
        box-shadow .25s ease,
        color .2s ease,
        transform .22s cubic-bezier(.2, .8, .2, 1);
    will-change: transform;
}

.nav-cta-label,
.nav-cta-icon {
    position: relative;
    z-index: 1;
}

.nav-cta-label {
    text-shadow: 0 1px 1px rgba(0, 0, 0, .55);
}

.nav-cta-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5));
    transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}

/* The sheen: a soft diagonal band of light parked off the left edge. */
.nav-cta-shine {
    position: absolute;
    inset: -2px;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(110deg,
        transparent 32%,
        rgba(255, 240, 200, 0) 38%,
        rgba(255, 240, 200, .42) 50%,
        rgba(255, 240, 200, 0) 62%,
        transparent 68%);
    transform: translateX(-130%);
}

/* The gold corner brackets open up on hover. */
.nav-cta::before,
.nav-cta::after {
    z-index: 1;
    transition: width .25s ease, height .25s ease, border-color .25s ease;
}

.nav-cta:hover,
.nav-cta:focus-visible {
    transform: translateY(-2px);
}

.nav-cta:hover::before,
.nav-cta:hover::after,
.nav-cta:focus-visible::before,
.nav-cta:focus-visible::after {
    width: 12px;
    height: 12px;
    border-color: #fbeec2;
}

.nav-cta:active {
    transform: translateY(0) scale(.97);
    transition-duration: .06s;
    box-shadow:
        inset 0 0 0 1px rgba(236, 212, 139, .5),
        inset 0 3px 10px rgba(0, 0, 0, .55),
        0 1px 2px rgba(0, 0, 0, .5);
}

.nav-cta:focus-visible {
    outline: 2px solid var(--gold-bright);
    outline-offset: 3px;
}

.nav-cta:hover .nav-cta-icon-play,
.nav-cta:focus-visible .nav-cta-icon-play {
    transform: translateX(2px) rotate(-8deg);
}

.nav-cta:hover .nav-cta-icon-account,
.nav-cta:focus-visible .nav-cta-icon-account {
    transform: scale(1.12);
}

@keyframes nav-cta-sweep {
    0% { transform: translateX(-130%); }
    16%, 100% { transform: translateX(130%); }
}

@keyframes nav-cta-sweep-now {
    from { transform: translateX(-130%); }
    to { transform: translateX(130%); }
}

@keyframes nav-cta-drop {
    0%, 100% { transform: translateY(0); }
    40% { transform: translateY(3px); }
    70% { transform: translateY(-1px); }
}

/* Same layers as .nav-cta at rest, plus an outer glow that breathes. */
@keyframes nav-cta-glow {
    0%, 100% {
        box-shadow:
            inset 0 0 0 1px rgba(236, 212, 139, .45),
            inset 0 8px 18px rgba(255, 120, 80, .18),
            0 0 0 rgba(199, 58, 37, 0),
            0 2px 6px rgba(0, 0, 0, .5);
    }
    50% {
        box-shadow:
            inset 0 0 0 1px rgba(236, 212, 139, .55),
            inset 0 8px 20px rgba(255, 130, 90, .28),
            0 0 16px rgba(199, 58, 37, .55),
            0 2px 6px rgba(0, 0, 0, .5);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .nav-cta .nav-cta-shine {
        animation: nav-cta-sweep 7s cubic-bezier(.4, 0, .2, 1) infinite;
    }

    /* Offset so the two buttons never flash at the same time. */
    .nav-cta-download .nav-cta-shine {
        animation-delay: 3.5s;
    }

    .nav-cta:hover .nav-cta-shine,
    .nav-cta:focus-visible .nav-cta-shine {
        animation: nav-cta-sweep-now .75s cubic-bezier(.4, 0, .2, 1);
    }

    .nav-cta:hover .nav-cta-icon-download,
    .nav-cta:focus-visible .nav-cta-icon-download {
        animation: nav-cta-drop .7s ease-in-out;
    }

    .nav-cta-play {
        animation: nav-cta-glow 2.8s ease-in-out infinite;
    }

    /* Hover has its own, stronger glow; the breathing must not fight it. */
    .nav-cta-play:hover,
    .nav-cta-play:focus-visible,
    .nav-cta-play:active {
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-cta,
    .nav-cta-icon,
    .nav-cta::before,
    .nav-cta::after {
        transition: none;
    }

    .nav-cta:hover,
    .nav-cta:focus-visible,
    .nav-cta:active {
        transform: none;
    }

    .nav-cta-shine {
        display: none;
    }
}

.nav-toggle,
.nav-toggle-label {
    display: none;
}

.nav-links .has-menu {
    position: relative;
}

.nav-menu {
    position: absolute;
    z-index: 60;
    top: 100%;
    left: 0;
    display: none;
    min-width: 210px;
    margin: 0;
    padding: 6px 0;
    background: linear-gradient(180deg, #1d1509, #120d06);
    border: 1px solid var(--gold-dark);
    border-radius: var(--radius);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .55);
    list-style: none;
}

.has-menu:hover .nav-menu,
.has-menu:focus-within .nav-menu {
    display: block;
}

.nav-menu a,
.nav-logout button {
    display: block;
    width: 100%;
    padding: 8px 16px;
    background: none;
    border: 0;
    color: #ddd0ad;
    cursor: pointer;
    font-family: var(--serif);
    font-size: .95rem;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
}

.nav-menu a:hover,
.nav-logout button:hover {
    background: rgba(201, 169, 97, .14);
    color: var(--gold-bright);
    text-decoration: none;
}

.nav-logout {
    margin: 0;
}

/* Main site frame */
.site-frame {
    position: relative;
    z-index: 10;
    position: relative;
    z-index: 10;
    width: min(1320px, calc(100% - 40px));
    margin: 26px auto 0;
    display: grid;
    grid-template-columns: 198px minmax(0, 1fr) 186px;
    align-items: start;
    gap: 18px;
}

.menu-toggle,
.menu-toggle-label {
    display: none;
}

.sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sidebar-box {
    overflow: hidden;
    margin: 0;
    position: relative;
    background: var(--menu-body-bg);
    /* Keeps the grain layer below (z-index -1) inside this box instead of
       letting it slip behind the whole panel. */
    isolation: isolate;
    /* Framed like the bronze buttons: a gold edge with a fainter gold
       hairline inside it, and the drop shadow that lifts the panel off the
       artwork. */
    border: 1px solid var(--menu-frame);
    border-radius: 12px;
    box-shadow:
        inset 0 0 0 1px rgba(236, 212, 139, .12),
        0 6px 18px rgba(10, 6, 2, .45);
}

.sidebar-box h2 {
    margin: 0;
    padding: 5px 10px;
    min-height: 42px;
    background: var(--menu-title-bg);
    border-bottom: 1px solid var(--menu-frame);
    box-shadow: inset 0 0 0 1px rgba(236, 212, 139, .18);
    color: var(--gold-bright);
    font-family: var(--display);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    box-sizing: border-box;
    text-align: center;
}

.sidebar-box ul {
    list-style: none;
    margin: 0;
    padding: 7px;
}

/* Paper grain over the glass -- title bars, menu bodies and the top bar.
   It cannot ride along in `background`: paper.png is opaque, and an opaque
   layer would take the transparency with it. Nor can it be blended in --
   `overlay` and `soft-light` scale with the backdrop, and over a tint this dark
   they move it by about one value out of 255. So it is a plain layer at low
   opacity, sitting behind the text (z-index -1) and above the tint. */
.sidebar-box h2,
.sidebar-box ul,
.sidebar-box-body {
    position: relative;
}

/* The title bar is the one surface here that paints a tint of its own, and a
   z-index:-1 layer would land *under* that tint -- the grain would come through
   at barely half strength. `isolation` makes the bar its own stacking context,
   so the layer sits between its tint and its text, which is where the grain
   belongs. The menu bodies carry no background, so they need none of this. */
.sidebar-box h2 {
    isolation: isolate;
}

.sidebar-box h2::before,
.sidebar-box ul::before,
.sidebar-box-body::before,
.site-nav::before {
    position: absolute;
    z-index: -1;
    content: "";
    inset: 0;
    background: url("/assets/images/ui/paper.png") repeat;
    opacity: var(--menu-texture);
    pointer-events: none;
}

.sidebar-box li {
    margin: 0;
}

.sidebar-box li + li {
    border-top: 1px solid rgba(201, 169, 97, .22);
}

.sidebar-box li a {
    position: relative;
    display: block;
    padding: 6px 11px 6px 22px;
    margin: 1px 0;
    border-radius: var(--radius-btn-sm);
    color: var(--menu-ink);
    font-size: .95rem;
    transition: background .12s ease, color .12s ease;
}

.sidebar-box li a::before {
    position: absolute;
    top: 50%;
    left: 10px;
    width: 5px;
    height: 5px;
    content: "";
    background: rgba(201, 169, 97, .55);
    transform: translateY(-50%) rotate(45deg);
}

.sidebar-box li a:hover {
    background: rgba(255, 246, 214, .08);
    color: #fff4d6;
    text-decoration: none;
}

.sidebar-box li a.active {
    background: rgba(201, 169, 97, .24);
    color: #ffffff;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
    text-decoration: none;
}

.sidebar-box li a.active::before {
    background: #f0cf65;
    box-shadow: 0 0 5px rgba(240, 207, 101, .7);
}

.sidebar-box li a.active:hover {
    color: #ffffff;
    background: rgba(201, 169, 97, .32);
}

.sidebar-box-body {
    padding: 12px;
}

.sidebar-login {
    display: grid;
    gap: 6px;
}

.sidebar-login label {
    color: var(--menu-ink-soft);
    font-size: .84rem;
    font-weight: 600;
}

/* Both selectors on purpose. `.sidebar-login input` alone scores exactly as
   much as the site-wide `input[type="password"]` rule further down the file
   (one class + one type against one attribute + one type), so the later rule
   won and dressed these fields in parchment -- except on focus, where
   `.sidebar-login input:focus` did outrank the generic focus rule. The result
   was a field that turned dark the moment you clicked into it while keeping
   the dark parchment ink: text typed into its own colour. Adding the ancestor
   class settles it for every state at once. */
.sidebar-box .sidebar-login input,
.sidebar-box .sidebar-login input[type="password"],
.sidebar-box .sidebar-login input[type="text"] {
    width: 100%;
    min-width: 0;
    padding: 8px 10px;
    background: rgba(0, 0, 0, .34);
    border: 1px solid var(--menu-rule);
    border-radius: var(--radius-btn-sm);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35);
    color: var(--menu-ink);
    font-size: .92rem;
    /* Chrome paints its own colours over an autofilled field; the inset shadow
       is the one background it cannot repaint, and the text colour is honoured
       through -webkit-text-fill-color. */
    -webkit-text-fill-color: var(--menu-ink);
    caret-color: var(--gold-bright);
}

.sidebar-box .sidebar-login input::placeholder {
    color: rgba(201, 181, 140, .7);
    -webkit-text-fill-color: rgba(201, 181, 140, .7);
}

.sidebar-box .sidebar-login input:focus {
    outline: none;
    background: rgba(0, 0, 0, .44);
    border-color: var(--gold);
    color: var(--menu-ink);
    -webkit-text-fill-color: var(--menu-ink);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35), 0 0 0 3px rgba(201, 163, 62, .25);
}

/* Autofill: Chrome forces a light background of its own through an internal
   animation. The huge inset shadow is the accepted way to cover it, and the
   fill colour keeps the text readable on top. */
.sidebar-box .sidebar-login input:-webkit-autofill,
.sidebar-box .sidebar-login input:-webkit-autofill:hover,
.sidebar-box .sidebar-login input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--menu-ink);
    -webkit-box-shadow: 0 0 0 1000px #1a1408 inset;
    caret-color: var(--gold-bright);
}

/* The show/hide eye lives inside the field, so it follows the field's ink. */
.sidebar-login .field-reveal-btn {
    color: var(--menu-ink-soft);
}

.sidebar-login .field-reveal-btn:hover {
    background: rgba(255, 246, 214, .12);
    color: var(--gold-bright);
}

.sidebar-login button:not(.field-reveal-btn),
.sidebar-button,
.sidebar-logout button {
    position: relative;
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 9px 12px;
    background: var(--btn-bg);
    border: 1px solid var(--gold-dark);
    border-radius: var(--radius-btn);
    box-shadow:
        inset 0 0 0 1px rgba(236, 212, 139, .22),
        inset 0 6px 12px rgba(232, 217, 160, .06);
    color: var(--gold-bright);
    cursor: pointer;
    font-family: var(--display);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-align: center;
    text-transform: uppercase;
}

.sidebar-login button:not(.field-reveal-btn):hover,
.sidebar-button:hover,
.sidebar-logout button:hover {
    background: var(--btn-bg-hover);
    border-color: var(--gold);
    color: #fbeec2;
    text-decoration: none;
}

/* Corner brackets on every side-menu button (Manage account, My tickets,
   Settings, Log out, Login). The donate button draws its own shine in ::before. */
.sidebar-login button:not(.field-reveal-btn)::before,
.sidebar-login button:not(.field-reveal-btn)::after,
.sidebar-button:not(.sidebar-button-donate)::before,
.sidebar-button:not(.sidebar-button-donate)::after,
.sidebar-logout button::before,
.sidebar-logout button::after {
    position: absolute;
    width: 6px;
    height: 6px;
    content: "";
    border: 1px solid rgba(236, 217, 160, .75);
    pointer-events: none;
}

.sidebar-login button:not(.field-reveal-btn)::before,
.sidebar-button:not(.sidebar-button-donate)::before,
.sidebar-logout button::before {
    top: 2px;
    left: 2px;
    border-right: 0;
    border-bottom: 0;
}

.sidebar-login button:not(.field-reveal-btn)::after,
.sidebar-button:not(.sidebar-button-donate)::after,
.sidebar-logout button::after {
    right: 2px;
    bottom: 2px;
    border-top: 0;
    border-left: 0;
}

.account-lost,
.sidebar-link-emphasis {
    display: block;
    padding-top: 10px;
    color: var(--menu-ink-soft);
    font-size: .86rem;
    text-align: center;
}

.sidebar-link-emphasis {
    color: var(--gold-bright);
    font-weight: 600;
}

.account-welcome {
    margin: 0 0 10px;
    color: var(--menu-ink-soft);
    font-size: .9rem;
    text-align: center;
}

.sidebar-logout {
    margin: 8px 0 0;
}

.side-right {
    gap: 16px;
}

.status-list {
    display: grid;
    gap: 2px;
    padding: 6px 10px 10px;
}

.status-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 1px;
}

.status-row + .status-row {
    border-top: 1px solid rgba(201, 169, 97, .22);
}

.status-label {
    color: var(--menu-ink-soft);
    font-size: .8rem;
    font-variant: small-caps;
    letter-spacing: .06em;
}

.status-value {
    color: var(--menu-ink);
    font-family: var(--display);
    font-size: .95rem;
    font-weight: 600;
    text-align: right;
}

.status-value-strong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #9ccc63;
}

.status-value-strong.is-offline {
    color: #e08272;
    font-weight: 700;
}

.status-value-strong.is-offline small {
    color: rgba(224, 130, 114, .75);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border: 1px solid transparent;
    border-radius: 20px;
    font-size: .82rem;
    font-variant: small-caps;
    letter-spacing: .06em;
}

.status-badge-online {
    background: rgba(122, 168, 74, .18);
    border-color: rgba(156, 204, 99, .5);
    color: #9ccc63;
}

.status-badge-offline {
    background: rgba(224, 130, 114, .14);
    border-color: rgba(224, 130, 114, .5);
    color: #e08272;
}

.status-dot-offline {
    background: #e08272;
    box-shadow: 0 0 0 2px rgba(224, 130, 114, .2);
}

.status-value small {
    color: rgba(201, 181, 140, .8);
    font-family: var(--serif);
    font-size: .78rem;
    font-weight: 400;
}

.sidebar-status-heading,
.sidebar-save-heading,
.sidebar-about-heading,
.sidebar-screenshots-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
}

.sidebar-account-heading,
.sidebar-home-heading,
.sidebar-community-heading,
.sidebar-library-heading,
.sidebar-marketplace-heading {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s ease;
}

.sidebar-heading-title {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    padding: 0 28px;
    min-width: 0;
}

.sidebar-collapse-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
    padding: 0;
    margin: 0;
    background: linear-gradient(180deg, rgba(43, 29, 14, 0.88), rgba(24, 16, 8, 0.96));
    border: 1px solid rgba(201, 169, 97, 0.45);
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(236, 212, 139, 0.15), 0 2px 4px rgba(0, 0, 0, 0.4);
    color: var(--gold-bright);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.sidebar-collapse-btn:hover {
    background: linear-gradient(180deg, #442d17, #2c1a0e);
    border-color: var(--gold-bright);
    color: #fff4d6;
    box-shadow: inset 0 0 0 1px rgba(255, 230, 160, 0.3), 0 0 6px rgba(240, 207, 101, 0.4);
    transform: translateY(-50%) scale(1.05);
}

.sidebar-collapse-btn .is-plus {
    display: none;
}

.sidebar-collapse-btn .is-minus {
    display: block;
}

.sidebar-box.is-collapsed h2 {
    border-bottom: none;
}

.sidebar-box.is-collapsed .sidebar-collapse-btn .is-minus {
    display: none;
}

.sidebar-box.is-collapsed .sidebar-collapse-btn .is-plus {
    display: block;
}

.sidebar-box ul,
.sidebar-box .sidebar-box-body {
    transition: max-height 0.22s ease, opacity 0.18s ease, padding 0.2s ease;
    max-height: 1000px;
    opacity: 1;
}

.sidebar-box.is-collapsed ul,
.sidebar-box.is-collapsed .sidebar-box-body {
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

.sidebar-status-icon,
.sidebar-clock-icon,
.sidebar-marketplace-icon,
.sidebar-account-icon,
.sidebar-home-icon,
.sidebar-community-icon,
.sidebar-about-icon,
.sidebar-screenshots-icon {
    display: none !important;
}

/* About subnav tabs */
.about-nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line-soft);
}

.about-tab {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    border-radius: var(--radius-btn-sm);
    background: rgba(232, 220, 190, .55);
    border: 1px solid #bfa478;
    color: var(--ink);
    font-family: var(--display);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all .15s ease;
}

.about-tab:hover {
    background: #fbf5e6;
    border-color: var(--gold-dark);
    color: #120b04;
    text-decoration: none;
    box-shadow: 0 1px 4px rgba(30, 20, 8, .12);
}

.about-tab.active {
    background: linear-gradient(180deg, #243516, #121c0b);
    border-color: #8d6f26;
    color: #ffffff;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .85);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 2px 4px rgba(20, 15, 8, .25);
}

.about-tab.active:hover {
    background: linear-gradient(180deg, #2e431c, #16220d);
    border-color: #bfa048;
    color: #ffffff;
    text-decoration: none;
}

.cam-duration-badge {
    display: inline-block;
    padding: 2px 7px;
    background: rgba(24, 16, 8, .55);
    border: 1px solid rgba(201, 169, 97, .45);
    border-radius: 4px;
    color: var(--gold-bright);
    font-family: monospace, ui-monospace, monospace;
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .05em;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

.cam-stars-display {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    vertical-align: middle;
    font-size: 0.95rem;
    line-height: 1;
}

.cam-stars-display .star-filled {
    color: #eab308;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.cam-stars-display .star-empty {
    color: rgba(140, 118, 78, 0.45);
}

.star-rating-widget {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    font-size: 1.85rem;
    line-height: 1;
    gap: 6px;
    margin: 4px 0;
}

.star-rating-widget input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.star-rating-widget label {
    cursor: pointer;
    color: rgba(140, 118, 78, 0.4);
    transition: color 0.15s ease, transform 0.12s ease;
    user-select: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.star-rating-widget label:hover,
.star-rating-widget label:hover ~ label,
.star-rating-widget input[type="radio"]:checked ~ label {
    color: #f59e0b;
    text-shadow: 0 0 6px rgba(245, 158, 11, 0.5);
}

.star-rating-widget label:hover {
    transform: scale(1.2);
}

.status-save-block {
    margin-top: 8px;
    padding-top: 9px;
    border-top: 1px solid rgba(201, 169, 97, .25);
    text-align: center;
}

.status-save-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--menu-ink-soft);
    font-size: .8rem;
    font-variant: small-caps;
    letter-spacing: .06em;
}

.status-save-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
}

.save-countdown-box {
    padding: 14px 12px 12px;
    text-align: center;
}

.save-countdown {
    margin: 4px 0 0;
    color: var(--gold-bright);
    font-family: var(--display);
    font-size: 1.32rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .06em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}

.save-countdown-note {
    margin: 3px 0 0;
    color: rgba(201, 181, 140, .85);
    font-size: .75rem;
    font-variant: small-caps;
    letter-spacing: .05em;
}

/* Sidebar Screenshots Box & Carousel */
.sidebar-screenshots-body {
    padding: 8px;
}

.sidebar-carousel {
    position: relative;
    width: 100%;
    user-select: none;
}

.carousel-viewport {
    overflow: hidden;
    border-radius: 6px;
    border: 1px solid rgba(201, 169, 97, .38);
    background: #0d0905;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6);
}

.carousel-track {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
    transition: transform .42s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

.carousel-slide {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.carousel-slide-btn {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
    position: relative;
    outline: none;
}

.carousel-slide-btn:focus-visible {
    box-shadow: inset 0 0 0 2px var(--gold-bright);
}

.carousel-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #000;
}

.carousel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease, filter .35s ease;
}

.carousel-slide-btn:hover .carousel-img {
    transform: scale(1.06);
    filter: brightness(1.06);
}

.carousel-zoom-hint {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(18, 12, 7, .82);
    border: 1px solid rgba(201, 169, 97, .5);
    border-radius: 4px;
    color: var(--gold-bright);
    opacity: .85;
    transition: all .2s ease;
    pointer-events: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
}

.carousel-slide-btn:hover .carousel-zoom-hint {
    opacity: 1;
    transform: scale(1.1);
    background: rgba(28, 18, 10, .95);
    border-color: var(--gold-bright);
}

.carousel-info {
    padding: 6px 8px 7px;
    background: linear-gradient(180deg, rgba(26, 18, 11, .98), rgba(16, 10, 6, .98));
    border-top: 1px solid rgba(201, 169, 97, .25);
}

.carousel-title {
    display: block;
    font-family: var(--display);
    font-size: .76rem;
    font-weight: 700;
    color: var(--gold-bright);
    letter-spacing: .03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

.carousel-caption {
    display: block;
    font-family: var(--serif);
    font-size: .69rem;
    color: rgba(216, 198, 160, .85);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.carousel-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    margin-top: 6px;
    padding: 0 2px;
}

.carousel-nav-btn {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    background: rgba(28, 18, 10, .85);
    border: 1px solid rgba(201, 169, 97, .42);
    border-radius: 4px;
    color: var(--gold-bright);
    cursor: pointer;
    transition: all .15s ease;
    flex-shrink: 0;
}

.carousel-nav-btn:hover {
    background: rgba(201, 169, 97, .28);
    border-color: var(--gold-bright);
    color: #fff;
    transform: scale(1.08);
}

.carousel-nav-btn:active {
    transform: scale(.95);
}

.carousel-indicators {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: 1;
    min-width: 0;
}

.carousel-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    border: 1px solid rgba(201, 169, 97, .5);
    background: rgba(201, 169, 97, .25);
    cursor: pointer;
    transition: all .25s ease;
}

.carousel-dot:hover {
    background: rgba(201, 169, 97, .7);
    border-color: var(--gold-bright);
}

.carousel-dot.is-active {
    width: 18px;
    border-radius: 4px;
    background: var(--gold-bright);
    border-color: var(--gold-bright);
    box-shadow: 0 0 6px rgba(236, 212, 139, .6);
}

/* Lightbox overlay for full-size screenshot */
.screenshot-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    padding: 20px;
    box-sizing: border-box;
}

.screenshot-lightbox.is-open {
    opacity: 1;
    visibility: visible;
}

.screenshot-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 4, 2, .86);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    cursor: pointer;
}

.screenshot-lightbox-container {
    position: relative;
    z-index: 1;
    max-width: 96vw;
    max-height: 94vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: lightboxPop .25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes lightboxPop {
    from {
        opacity: 0;
        transform: scale(.94);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.screenshot-lightbox-close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #1a1109;
    border: 2px solid var(--gold-bright);
    color: var(--gold-bright);
    font-size: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .8);
    transition: all .15s ease;
    z-index: 2;
    padding: 0;
}

.screenshot-lightbox-close:hover {
    background: #362211;
    color: #fff;
    transform: scale(1.12);
    border-color: #fff;
}

.screenshot-lightbox-card {
    background: #140d07;
    border: 2px solid #a88147;
    border-radius: 8px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(236, 212, 139, .2);
    overflow: hidden;
    max-width: 1050px;
    display: flex;
    flex-direction: column;
}

.screenshot-lightbox-img-wrap {
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 75vh;
    overflow: hidden;
}

.screenshot-lightbox-img {
    max-width: 100%;
    max-height: 75vh;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.screenshot-lightbox-footer {
    padding: 12px 18px;
    background: linear-gradient(180deg, #1d1309, #130c05);
    border-top: 1px solid rgba(201, 169, 97, .3);
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}

.screenshot-lightbox-title {
    margin: 0;
    font-family: var(--display);
    font-size: 1.15rem;
    color: var(--gold-bright);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}

.screenshot-lightbox-caption {
    margin: 4px 0 0;
    font-family: var(--serif);
    font-size: .88rem;
    color: #d8c6a0;
    line-height: 1.4;
}

/* Framed sheet */
.content-shell {
    position: relative;
    min-width: 0;
    background:
        radial-gradient(circle at 50% 18%, rgba(255, 248, 225, .15), transparent 60%),
        radial-gradient(circle at 50% 85%, rgba(120, 92, 48, .08), transparent 70%),
        url("/assets/images/ui/permaminhobackground.png") repeat,
        var(--parchment);
    border: 1px solid rgba(141, 111, 38, .48);
    border-radius: var(--radius);
    box-shadow:
        0 12px 36px rgba(10, 6, 2, .48),
        inset 0 0 50px rgba(120, 92, 48, .09);
}

.main {
    position: relative;
    z-index: 2;
    min-height: 560px;
    padding: 38px 48px 44px;
}

/* Inner rule that delimits the sheet, plus subtle refined corner accents. */
.main::before {
    position: absolute;
    z-index: 1;
    content: "";
    inset: 12px;
    border: 1px solid rgba(141, 111, 38, .38);
    box-shadow:
        inset 0 0 0 1px rgba(255, 248, 225, .32),
        0 0 0 1px rgba(255, 248, 225, .15);
    background-image:
        url("/assets/images/ornaments/corner-tl.svg"),
        url("/assets/images/ornaments/corner-tr.svg"),
        url("/assets/images/ornaments/corner-bl.svg"),
        url("/assets/images/ornaments/corner-br.svg");
    background-position: left top, right top, left bottom, right bottom;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* Subtle braided cord running delicately along the parchment borders */
.main::after {
    position: absolute;
    z-index: 1;
    content: "";
    inset: 38px 12px;
    background-image:
        url("/assets/images/ornaments/vine-left.svg"),
        url("/assets/images/ornaments/vine-right.svg");
    background-position: left top, right top;
    background-repeat: repeat-y;
    background-size: 12px 20px;
    pointer-events: none;
    opacity: .85;
}

.main > * {
    position: relative;
    z-index: 2;
}

.site-footer {
    position: relative;
    z-index: 10;
    width: min(1320px, calc(100% - 40px));
    margin: 30px auto 0;
    padding: 22px 0 40px;
    color: #8d7c5c;
    font-size: .86rem;
    text-align: center;
}

.site-footer::before {
    display: block;
    width: 190px;
    height: 1px;
    margin: 0 auto 16px;
    content: "";
    background: linear-gradient(90deg, transparent, var(--gold-dark), transparent);
}

.site-footer p {
    margin: 0 0 4px;
}

.footer-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--ink-soft);
    font-variant: small-caps;
    letter-spacing: .04em;
}

.site-footer a {
    margin: 0 6px;
    color: #a08f6c;
}

.site-footer a:hover {
    color: var(--gold-bright);
}

.maintenance-bar {
    position: relative;
    z-index: 30;
    padding: 9px 12px;
    background: #d9b45a;
    border-bottom: 1px solid var(--gold-dark);
    color: #3a2a17;
    font-size: .92rem;
    text-align: center;
}

.maintenance-bar a {
    color: #3a2a17;
    text-decoration: underline;
}

/* ---- Test server notice ----------------------------------------------
   A small plate above the Server status panel. Small, but not quiet: a
   light sweep crosses it, the frame breathes a gold halo and a red lamp
   blinks, so nobody plays here thinking their progress is permanent.
   z-index lifts it over the sidebar panels, whose `isolation: isolate`
   would otherwise paint them on top of the tooltip. */
.test-server-flag {
    position: relative;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* The sidebar is a flex column on desktop and an auto-fit grid below
       1180px; these keep the plate centred and on its own row in both. */
    align-self: center;
    justify-self: center;
    grid-column: 1 / -1;
    margin: 0 0 -6px;
    padding: 4px 9px;
    border: 1px solid rgba(201, 169, 97, .55);
    border-radius: 3px;
    background:
        linear-gradient(180deg, rgba(62, 45, 24, .55), rgba(13, 9, 4, .6)),
        rgba(13, 9, 4, .35);
    color: var(--gold-bright);
    font-family: var(--display);
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .16em;
    line-height: 1.1;
    text-transform: uppercase;
    text-align: center;
    cursor: help;
    animation: test-server-halo 3.2s ease-in-out infinite;
}

/* The travelling highlight. Animating background-position (instead of
   sliding a child) keeps it inside the plate without `overflow: hidden`,
   which would have clipped the tooltip. */
.test-server-flag::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(255, 246, 214, .34) 47%,
        rgba(255, 255, 255, .6) 50%,
        rgba(255, 246, 214, .34) 53%,
        transparent 60%
    );
    background-size: 280% 100%;
    background-position: 140% 0;
    mix-blend-mode: screen;
    pointer-events: none;
    animation: test-server-sweep 3.2s ease-in-out infinite;
}

/* Hairline that brightens with the halo, so the frame itself looks live. */
.test-server-flag::after {
    content: "";
    position: absolute;
    inset: -2px;
    border: 1px solid rgba(232, 217, 160, .35);
    border-radius: 4px;
    pointer-events: none;
    animation: test-server-ring 3.2s ease-in-out infinite;
}

.test-server-dot {
    width: 5px;
    height: 5px;
    flex: none;
    border-radius: 50%;
    background: #e0654f;
    animation: test-server-blink 1.6s ease-in-out infinite;
}

.test-server-label {
    position: relative;
    z-index: 1;
}

@keyframes test-server-halo {
    0%, 100% {
        border-color: rgba(201, 169, 97, .5);
        box-shadow: 0 0 4px rgba(201, 169, 97, .12);
        text-shadow: none;
    }
    50% {
        border-color: rgba(232, 217, 160, .9);
        box-shadow:
            0 0 14px rgba(201, 169, 97, .45),
            0 0 26px rgba(201, 169, 97, .16),
            inset 0 0 9px rgba(201, 169, 97, .16);
        text-shadow: 0 0 7px rgba(232, 217, 160, .55);
    }
}

@keyframes test-server-sweep {
    0%, 12% {
        background-position: 140% 0;
    }
    52%, 100% {
        background-position: -70% 0;
    }
}

@keyframes test-server-ring {
    0%, 100% {
        opacity: 0;
        transform: scale(.94);
    }
    45% {
        opacity: .5;
        transform: scale(1);
    }
    75% {
        opacity: 0;
        transform: scale(1.06);
    }
}

@keyframes test-server-blink {
    0%, 100% {
        opacity: .35;
        box-shadow: 0 0 0 rgba(224, 101, 79, 0);
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 7px rgba(224, 101, 79, .85);
    }
}

.test-server-flag:hover,
.test-server-flag:focus,
.test-server-flag:focus-visible {
    outline: none;
    border-color: rgba(232, 217, 160, .95);
}

@media (prefers-reduced-motion: reduce) {
    .test-server-flag,
    .test-server-flag::before,
    .test-server-flag::after,
    .test-server-dot {
        animation: none;
    }

    .test-server-flag {
        border-color: rgba(232, 217, 160, .8);
        box-shadow: 0 0 10px rgba(201, 169, 97, .3);
    }

    .test-server-flag::after {
        opacity: .4;
        transform: scale(1);
    }
}

/* Anchored to the right edge of the column: this sidebar sits against the
   page edge, so a centred tooltip would hang off-screen. */
.test-server-tip {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    z-index: 10000;
    width: max-content;
    max-width: min(220px, 78vw);
    padding: 8px 10px;
    background: #080c12;
    border: 1px solid #33485e;
    border-radius: 4px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .8), 0 0 10px rgba(69, 171, 183, .2);
    color: #e2d4b2;
    font-family: var(--serif);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.4;
    text-align: left;
    text-transform: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease;
    pointer-events: none;
}

.test-server-flag:hover .test-server-tip,
.test-server-flag:focus .test-server-tip,
.test-server-flag:focus-visible .test-server-tip {
    opacity: 1;
    visibility: visible;
}

/* Typography and content sections */
h1,
h2,
h3,
h4 {
    font-family: var(--display);
    color: #33240f;
    font-weight: 600;
    line-height: 1.25;
}

h1 {
    margin: 0 0 18px;
    font-size: clamp(1.7rem, 3.4vw, 2.35rem);
    letter-spacing: .03em;
}

h2 {
    font-size: 1.24rem;
    letter-spacing: .02em;
}

h3 {
    font-size: 1.06rem;
}

.page-title {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    font-variant: small-caps;
    letter-spacing: .04em;
    text-align: center;
    text-transform: none;
}

/* Headings sit centred in the sheet even when the view wraps them in a
   flex row next to an action button. */
.between:has(.page-title),
.forum-page-heading,
.forum-thread-heading {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.between:has(.page-title) > div,
.forum-page-heading > div,
.forum-thread-heading > div {
    width: 100%;
}

.between:has(.page-title) > a,
.between:has(.page-title) > .btn,
.between:has(.page-title) > form,
.forum-page-heading > a,
.forum-page-heading > .btn,
.forum-thread-actions,
.forum-moderation {
    width: auto;
    justify-content: center;
    flex-wrap: wrap;
}

.between:has(.page-title) .subtitle {
    margin-bottom: 4px;
}

.page-title::before {
    display: block;
    height: 26px;
    margin: 0 auto 10px;
    content: "";
    background:
        url("/assets/images/ornaments/flourish.svg") center / 132px 26px no-repeat,
        linear-gradient(90deg, transparent, rgba(93, 71, 42, .38) 22%, rgba(93, 71, 42, .38) 78%, transparent) center bottom 2px / 100% 1px no-repeat;
}

.page-title::after {
    display: block;
    height: 14px;
    margin: 12px auto 0;
    content: "";
    background:
        url("/assets/images/ornaments/diamond.svg") center / 26px 14px no-repeat,
        linear-gradient(90deg, transparent, rgba(93, 71, 42, .38) 20%, rgba(93, 71, 42, .38) 80%, transparent) center / 100% 1px no-repeat;
}

.subtitle {
    max-width: 70ch;
    margin: 0 auto 26px;
    color: var(--ink-soft);
    font-size: 1rem;
    text-align: center;
}

.welcome-copy {
    margin: 0 0 26px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line-soft);
    text-align: center;
}

.welcome-copy h1 {
    margin: 8px 0 12px;
    font-size: clamp(2rem, 4.4vw, 2.8rem);
    font-variant: small-caps;
    letter-spacing: .04em;
}

.welcome-copy p {
    max-width: 66ch;
    margin: 0 auto 20px;
    color: var(--ink-soft);
    font-size: 1.04rem;
}

.eyebrow {
    color: var(--gold-dark);
    font-family: var(--display);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.welcome-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Cards */
.card {
    position: relative;
    overflow-x: auto;
    margin-bottom: 22px;
    padding: 20px 24px;
    background: rgba(232, 220, 190, .55);
    border: 2px solid #c2a878;
    border-radius: 4px;
    box-shadow:
        0 0 0 1px rgba(93, 71, 42, .45),
        inset 0 0 0 1px rgba(255, 250, 232, .45),
        0 2px 5px rgba(60, 42, 18, .18);
}

.card h2,
.card h3 {
    margin-top: 0;
}

.card-heading {
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line-soft);
}

.card-heading h2 {
    margin: 0;
    font-size: 1.1rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.text-link {
    color: var(--link);
    font-size: .88rem;
    font-weight: 600;
}

/* Panel headers (card with a titled bar) */
.panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 18px 10px 46px;
    box-shadow:
        inset 0 0 0 1px rgba(201, 169, 97, .55),
        inset 0 1px 0 rgba(255, 255, 255, .07);
    /* Content window title (12/2026: was forest green). A cool blue-grey
       graphite, lighter than the side menus' charcoal so the content windows
       read apart from the menus, with the same stone grain, and the gold emblem
       at the left -- which the old `background` shorthand below the image used
       to wipe out, leaving only its empty padding. */
    background:
        url("/assets/images/ornaments/emblem.svg") left 18px center / 20px 20px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 -.42'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.1 -.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='.16'/%3E%3Crect width='100%25' height='100%25' filter='url(%23b)' opacity='.35'/%3E%3C/svg%3E") 0 0 / 180px 180px,
        linear-gradient(180deg, #3b3f46 0%, #292c32 55%, #1d1f24 100%);
    border-bottom: 1px solid var(--gold-dark);
    color: var(--gold-bright);
    font-family: var(--display);
    font-size: .84rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.panel-title .panel-title-meta {
    color: rgba(236, 212, 139, .72);
    font-family: var(--serif);
    font-size: .84rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.panel-body {
    padding: 18px 22px;
}

.changelog-teaser h3 {
    margin: 6px 0;
}

.changelog-teaser p:last-child {
    margin-bottom: 0;
}

.changelog-meta,
.news-date {
    margin: 0;
    color: var(--ink-faint);
    font-family: var(--display);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.news-item {
    padding: 18px 0;
    border-bottom: 1px solid var(--line-soft);
}

.news-item:first-of-type {
    padding-top: 2px;
}

.news-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.news-item-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.news-item h3 {
    margin: 5px 0 8px;
    font-size: 1.16rem;
}

.news-item p {
    margin: 0 0 10px;
    color: #4c3a22;
}

.read-more {
    font-weight: 600;
}

/* Buttons -- a bronze plate: the wood chrome of the menus, framed with the
   gold corner brackets of the header's "My account" button. */
.btn {
    position: relative;
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 9px 22px;
    background: var(--btn-bg);
    border: 1px solid var(--gold-dark);
    border-radius: var(--radius-btn);
    box-shadow:
        inset 0 0 0 1px rgba(236, 212, 139, .22),
        inset 0 6px 12px rgba(232, 217, 160, .06),
        0 2px 5px rgba(20, 12, 4, .35);
    color: var(--gold-bright);
    cursor: pointer;
    font-family: var(--display);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-align: center;
    text-transform: uppercase;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.btn:hover {
    background: var(--btn-bg-hover);
    border-color: var(--gold);
    color: #fbeec2;
    text-decoration: none;
}

/* Corner brackets. The donate and download buttons draw their own effects in
   ::before / ::after, so they keep those. */
.btn:not(.btn-donate):not(.download-btn)::before,
.btn:not(.btn-donate):not(.download-btn)::after {
    position: absolute;
    width: 6px;
    height: 6px;
    content: "";
    border: 1px solid rgba(236, 217, 160, .75);
    pointer-events: none;
}

.btn:not(.btn-donate):not(.download-btn)::before {
    top: 2px;
    left: 2px;
    border-right: 0;
    border-bottom: 0;
}

.btn:not(.btn-donate):not(.download-btn)::after {
    right: 2px;
    bottom: 2px;
    border-top: 0;
    border-left: 0;
}

.btn-small:not(.btn-donate):not(.download-btn)::before,
.btn-small:not(.btn-donate):not(.download-btn)::after {
    width: 4px;
    height: 4px;
}

.btn-small {
    min-height: 30px;
    padding: 4px 12px;
    border-radius: var(--radius-btn-sm);
    font-size: .72rem;
}

.btn-block {
    width: 100%;
}

.btn-secondary {
    background: linear-gradient(180deg, #ece0c1, #dccaa4);
    border-color: var(--rule);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
    color: var(--ink);
}

.btn-secondary:hover {
    background: linear-gradient(180deg, #f4ebd3, #e3d3ae);
    border-color: var(--rule);
    color: var(--ink);
}

/* On the pale button the brackets are drawn in ink instead of gold. */
.btn-secondary:not(.btn-donate):not(.download-btn)::before,
.btn-secondary:not(.btn-donate):not(.download-btn)::after {
    border-color: rgba(90, 70, 42, .55);
}

.btn-danger {
    background: linear-gradient(180deg, #7a1509, #3f0800);
    border-color: var(--gold-dark);
    color: var(--gold-bright);
}

.btn-danger:hover {
    background: linear-gradient(180deg, #94200f, #520c02);
    border-color: var(--gold-dark);
    color: #fbeec2;
}

.inline-form {
    display: inline;
    margin: 0;
}

.link-button {
    padding: 0;
    background: none;
    border: 0;
    color: var(--link);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
}

.link-button:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

/* Forms */
.form-narrow {
    max-width: 540px;
    margin-right: auto;
    margin-left: auto;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    color: var(--ink-soft);
    font-size: .9rem;
    font-weight: 600;
}

.form-group .hint {
    color: var(--ink-faint);
    font-size: .84rem;
    font-weight: 400;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
select,
textarea {
    width: 100%;
    padding: 9px 12px;
    background: linear-gradient(180deg, #f2e6c6, #dccba6);
    border: 2px solid #f0e6cb;
    border-radius: 8px;
    box-shadow:
        0 0 0 1px rgba(120, 94, 52, .55),
        inset 0 -6px 10px rgba(150, 120, 70, .18);
    color: var(--ink);
    font-size: .96rem;
}

select {
    cursor: pointer;
    line-height: 1.4;
    padding-right: 34px;
    background-image:
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%233a2a17' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
        linear-gradient(180deg, #f2e6c6, #dccba6);
    background-position: right 12px center, 0 0;
    background-repeat: no-repeat, no-repeat;
    background-size: 14px 9px, auto;
    -webkit-appearance: none;
    appearance: none;
}

select option {
    background: #f2e6c6;
    color: #2a1c0c;
    padding: 6px 10px;
    font-size: .95rem;
}

.input-select-small,
select.input-select-small {
    width: auto;
    min-width: 170px;
    height: 34px;
    line-height: 22px;
    padding: 4px 28px 4px 10px;
    font-size: 13px;
    vertical-align: middle;
    border-radius: 6px;
    background-position: right 8px center, 0 0;
}

textarea {
    min-height: 120px;
    resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--gold-dark);
    box-shadow: inset 0 1px 3px rgba(90, 68, 33, .16), 0 0 0 3px rgba(201, 163, 62, .25);
}

/* Masked field with a reveal toggle (built by the layout script). */
.field-reveal {
    position: relative;
    display: block;
}

.field-reveal input {
    padding-right: 42px;
}

/* Browsers add their own reveal / autofill icons to password fields; this
   field already has ours, so suppress the native ones. */
.field-reveal input::-ms-reveal,
.field-reveal input::-ms-clear {
    display: none;
}

.field-reveal input::-webkit-credentials-auto-fill-button,
.field-reveal input::-webkit-strong-password-auto-fill-button,
.field-reveal input::-webkit-caps-lock-indicator,
.field-reveal input::-webkit-textfield-decoration-container {
    display: none !important;
    width: 0;
    margin: 0;
    visibility: hidden;
    pointer-events: none;
}

.field-reveal-btn {
    position: absolute;
    top: 50%;
    right: 7px;
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--ink-faint);
    cursor: pointer;
    opacity: .75;
    transform: translateY(-50%);
    transition: background .12s ease, color .12s ease, opacity .12s ease;
}

.field-reveal-btn:hover {
    background: rgba(141, 111, 38, .12);
    color: var(--ink);
    opacity: 1;
}

.field-reveal-btn svg {
    display: block;
    width: 18px;
    height: 18px;
}

.field-reveal-btn .icon-off,
.field-reveal-btn[aria-pressed="true"] .icon-on {
    display: none;
}

.field-reveal-btn[aria-pressed="true"] .icon-off {
    display: block;
}

fieldset {
    min-width: 0;
}

fieldset.card {
    background: rgba(232, 220, 190, .45);
}

legend {
    padding: 0 8px;
    font-family: var(--display);
    font-size: .9rem;
    font-weight: 600;
}

.radio-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.radio-row label {
    font-weight: 400;
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.checkbox-row label {
    margin: 0;
    font-weight: 600;
}

/* Alerts */
.alert {
    margin-bottom: 20px;
    padding: 11px 15px;
    background: var(--info-bg);
    border: 1px solid var(--rule);
    border-left: 4px solid var(--info);
    border-radius: var(--radius-sm);
    color: #33240f;
    font-size: .95rem;
}

.alert-error {
    background: var(--danger-bg);
    border-left-color: var(--danger);
    color: var(--danger-dark);
}

.alert-success {
    background: var(--success-bg);
    border-left-color: var(--success);
    color: #2f5527;
}

.alert-info {
    background: var(--info-bg);
    border-left-color: var(--info);
    color: #2b3d63;
}

.error-list {
    margin: 0;
    padding-left: 18px;
}

/* Statistics */
.stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: hidden;
    margin-bottom: 24px;
    background: linear-gradient(180deg, rgba(255, 251, 238, .6), rgba(220, 201, 163, .45));
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}

.stat {
    padding: 15px 12px;
    text-align: center;
}

.stat + .stat {
    border-left: 1px solid var(--rule-soft);
}

.stat .value {
    color: #33240f;
    font-family: var(--display);
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.1;
}

.stat .label {
    margin-top: 4px;
    color: var(--ink-faint);
    font-family: var(--display);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* Tables */
.table-scroll {
    overflow-x: auto;
}

table.data {
    width: 100%;
    background: #d0b890;
    border: 0;
    border-collapse: collapse;
    border-spacing: 0;
}

table.data th,
table.data td {
    padding: 12px 15px;
    border-top: 1px solid rgba(255, 250, 232, .35);
    border-bottom: 1px solid rgba(93, 71, 42, .28);
    font-size: 1rem;
    text-align: left;
    vertical-align: middle;
}

table.data th {
    /* Column headers (12/2026: was leather brown, #6a5630 -> #514226): the
       content windows' graphite a shade darker than their title bar, with the
       same stone grain, so title, headers and parchment rows step down. */
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 -.42'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.1 -.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='.16'/%3E%3Crect width='100%25' height='100%25' filter='url(%23b)' opacity='.35'/%3E%3C/svg%3E") 0 0 / 180px 180px,
        linear-gradient(180deg, #2a2d33, #1b1d21);
    border-top: 0;
    border-bottom: 1px solid var(--gold-dark);
    color: #f4e8cb;
    font-family: var(--display);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
}

table.data tbody tr:nth-child(odd) {
    background: #c8b088;
}

table.data tbody tr:nth-child(even) {
    background: #d0b890;
}

table.data tbody tr:hover {
    background: var(--accent-wash);
}

table.data tr:last-child td {
    border-bottom: 0;
}

.rank-number {
    display: inline-grid;
    width: 25px;
    height: 25px;
    place-items: center;
    background: var(--parchment-3);
    border: 1px solid var(--rule);
    border-radius: 50%;
    color: #4a3720;
    font-family: var(--display);
    font-size: .78rem;
    font-weight: 700;
}

/* Auctions */
.auction-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px;
}

.auction-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 16px;
    background: rgba(232, 220, 190, .5);
    border: 1px solid var(--rule);
    border-top: 3px solid var(--gold-dark);
    border-radius: var(--radius-sm);
}

.auction-card:hover {
    border-color: var(--wood-700);
}

.auction-card h3 {
    margin: 0;
    font-size: 1.04rem;
}

.auction-meta {
    color: var(--ink-soft);
    font-size: .88rem;
}

.auction-price {
    color: #7a5c17;
    font-family: var(--display);
    font-size: 1.12rem;
    font-weight: 700;
}

.badge {
    display: inline-flex;
    min-height: 21px;
    align-items: center;
    padding: 2px 9px;
    background: var(--parchment-3);
    border: 1px solid var(--rule);
    border-radius: 20px;
    color: #4a3720;
    font-family: var(--display);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .06em;
    line-height: 1.5;
    text-transform: uppercase;
    white-space: nowrap;
}

.badge-online,
.badge-active,
.badge-success {
    background: var(--success-bg);
    border-color: #a9b585;
    color: var(--success);
}

.badge-finished,
.badge-news {
    background: var(--info-bg);
    border-color: #a9b096;
    color: var(--info);
}

.badge-expired,
.badge-cancelled,
.badge-maintenance {
    background: var(--danger-bg);
    border-color: #d3ab92;
    color: var(--danger);
}

.badge-pending,
.badge-pending_items,
.badge-event {
    background: var(--purple-bg);
    border-color: #c3aeb8;
    color: var(--purple);
}

.badge-update {
    background: var(--success-bg);
    border-color: #a9b585;
    color: var(--success);
}

.badge-warning {
    background: #eddcb0;
    border-color: #cdb277;
    color: #7a5c17;
}

.badge-secondary {
    background: var(--parchment-3);
    border-color: var(--rule);
    color: var(--ink-soft);
}

/* Referral programme */
.referral-steps {
    margin: 0 0 22px;
    padding-left: 22px;
}

.referral-steps li {
    margin-bottom: 10px;
}

.referral-rules {
    padding-top: 16px;
    border-top: 1px solid var(--line-soft);
}

.referral-rules h3 {
    margin: 0 0 10px;
}

.referral-rules ul {
    margin: 0;
    padding-left: 22px;
}

.referral-rules li {
    margin-bottom: 8px;
}

.referral-code-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 16px;
    background: rgba(232, 220, 190, .55);
    border: 1px dashed var(--rule);
    border-radius: var(--radius-btn);
}

.referral-code {
    color: #33240f;
    font-family: var(--display);
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: .22em;
}

.referral-code-hint {
    margin: 10px 0 0;
    text-align: center;
}

.referral-pending,
.referral-invited-by {
    margin: -8px 0 22px;
    text-align: center;
}

.referral-cta {
    text-align: center;
}

/* Item snapshots and filters */
.items-heading {
    margin: 16px 0 6px;
    font-size: .96rem;
}

.items-scroll {
    overflow-y: auto;
    max-height: 190px;
    padding: 8px 12px;
    background: rgba(232, 220, 190, .5);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
}

.items-scroll-tall {
    max-height: 280px;
}

.items-line {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: .9rem;
}

.items-line:last-child {
    border-bottom: 0;
}

.filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    align-items: end;
    gap: 12px;
}

.filters .form-group {
    margin-bottom: 0;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 26px;
    flex-wrap: wrap;
}

.pagination a,
.pagination span {
    min-width: 34px;
    padding: 6px 11px;
    background: linear-gradient(180deg, #ece0c1, #dccaa4);
    border: 1px solid var(--rule);
    border-radius: var(--radius-btn-sm);
    color: var(--ink);
    font-size: .88rem;
    text-align: center;
}

.pagination a:hover {
    background: linear-gradient(180deg, #f4ebd3, #e3d3ae);
    text-decoration: none;
}

.pagination .current {
    background: linear-gradient(180deg, var(--forest-700), var(--forest-900));
    border-color: var(--gold-dark);
    color: var(--gold-bright);
}

/* Utilities */
.row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.row > * {
    min-width: 220px;
    flex: 1;
}

.between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.muted {
    color: var(--ink-soft);
}

.text-right {
    text-align: right;
}

.mt {
    margin-top: 16px;
}

.balance-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    background: var(--accent-wash);
    border: 1px solid var(--rule);
    border-radius: 20px;
    color: var(--accent-dark);
    font-size: .8rem;
    font-weight: 650;
}

.dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 7px 18px;
}

.dl dt {
    color: var(--ink-soft);
}

.dl dd {
    margin: 0;
    font-weight: 700;
}

.plain-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.plain-list li {
    padding: 5px 0;
    border-bottom: 1px solid var(--line-soft);
}

.plain-list li:last-child {
    border-bottom: 0;
}

pre {
    padding: 12px 14px;
    background: var(--surface-2) !important;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm) !important;
    color: var(--ink);
}

/* Forum */
.forum-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: -4px 0 16px;
    color: var(--ink-faint);
    font-size: .8rem;
}

.forum-breadcrumbs strong {
    min-width: 0;
    overflow: hidden;
    color: var(--ink-soft);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.forum-page-heading,
.forum-thread-heading {
    align-items: flex-start;
    margin-bottom: 18px;
}

.forum-page-heading .subtitle,
.forum-thread-heading .page-title {
    margin-bottom: 0;
    word-break: break-word;
    overflow-wrap: break-word;
}

.forum-category {
    overflow: hidden;
    margin: 0 0 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.forum-category-title {
    margin: 0;
    padding: 11px 16px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.forum-table-wrap {
    overflow-x: auto;
}

table.forum-board-table,
table.forum-topic-table {
    min-width: 650px;
    border: 0;
    border-radius: 0;
}

table.forum-board-table th,
table.forum-topic-table th {
    /* The site's graphite column headers (12/2026: was var(--surface)). */
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 -.42'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.1 -.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='.16'/%3E%3Crect width='100%25' height='100%25' filter='url(%23b)' opacity='.35'/%3E%3C/svg%3E") 0 0 / 180px 180px,
        linear-gradient(180deg, #2a2d33, #1b1d21);
    border-bottom: 1px solid var(--gold-dark);
    color: #f4e8cb;
    font-size: .65rem;
}

table.forum-board-table td,
table.forum-topic-table td {
    padding-top: 12px;
    padding-bottom: 12px;
}

.forum-icon-cell {
    width: 44px;
    padding-right: 0 !important;
    text-align: center !important;
}

.forum-board-icon,
.forum-topic-icon {
    position: relative;
    display: inline-block;
    width: 26px;
    height: 22px;
    background: var(--accent-wash);
    border: 1px solid var(--gold-dark);
    border-radius: 5px;
}

.forum-board-icon span,
.forum-topic-icon span {
    position: absolute;
    inset: 6px 5px auto;
    height: 2px;
    border-radius: 1px;
    background: var(--accent);
    box-shadow: 0 5px var(--accent);
    opacity: .65;
}

.forum-topic-icon.is-locked {
    background: var(--surface-3);
    border-color: var(--line);
}

.forum-topic-icon.is-locked span {
    background: var(--ink-faint);
    box-shadow: 0 5px var(--ink-faint);
}

.forum-topic-icon.is-pinned {
    background: #fdf2dd;
    border-color: #ecd5a4;
}

.forum-topic-icon.is-pinned span {
    background: #c99a2e;
    box-shadow: 0 5px #c99a2e;
}

.forum-board-name > a,
.forum-topic-name > div > a {
    font-size: .94rem;
    font-weight: 650;
    word-break: break-word;
    overflow-wrap: break-word;
}

.forum-board-name > div,
.forum-topic-name small,
.forum-last-post,
.forum-topic-pages {
    color: var(--ink-faint);
    font-size: .75rem;
}

.forum-topic-name small {
    display: inline-block;
    margin-top: 2px;
}

.forum-topic-pages {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 9px;
}

.forum-topic-pages a {
    min-width: 18px;
    padding: 0 5px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 4px;
    text-align: center;
}

.forum-number {
    width: 70px;
    color: var(--ink-soft);
    font-weight: 650;
    text-align: center !important;
}

.forum-last-post {
    width: 180px;
    line-height: 1.4;
}

.forum-last-topic {
    display: block;
    max-width: 240px;
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.forum-status {
    display: inline-block;
    margin-right: 5px;
    padding: 1px 6px;
    background: var(--accent-wash);
    border-radius: 10px;
    color: var(--accent-dark);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    vertical-align: 1px;
}

.forum-status-locked {
    background: var(--surface-3);
    color: var(--ink-soft);
}

.forum-empty {
    color: var(--ink-soft);
    text-align: center;
}

.forum-pagination-top .pagination {
    justify-content: flex-start;
    margin: 0 0 12px;
}

.pagination .ellipsis {
    min-width: auto;
    padding-right: 4px;
    padding-left: 4px;
    background: transparent;
    border-color: transparent;
}

.forum-thread-heading {
    display: flex;
    justify-content: space-between;
    gap: 14px;
}

.forum-thread-flags:empty {
    display: none;
}

.forum-thread-flags {
    margin-bottom: 6px;
}

.forum-thread-actions,
.forum-moderation {
    display: flex;
    gap: 6px;
}

.forum-topic-nav {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    min-height: 35px;
    margin-bottom: 12px;
}

.forum-topic-nav .pagination {
    justify-content: flex-start;
    margin-top: 0;
}

.forum-topic-nav-bottom {
    margin: 14px 0 22px;
}

.forum-post-list {
    display: grid;
    gap: 12px;
}

.forum-post {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    scroll-margin-top: 16px;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.forum-post:target {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(26, 139, 155, .14);
}

.forum-post-author {
    min-width: 0;
    padding: 16px 12px;
    background: var(--surface-2);
    border-right: 1px solid var(--line);
    text-align: center;
}

.forum-author-name {
    display: block;
    overflow: hidden;
    font-size: .92rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.forum-author-role {
    display: block;
    margin: 2px 0 10px;
    color: var(--ink-faint);
    font-size: .63rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.forum-avatar {
    display: block;
    width: 76px;
    height: 76px;
    margin: 0 auto 10px;
    object-fit: cover;
    background: var(--surface-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.forum-avatar-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-wash);
    color: var(--accent-dark);
    font-size: 1.6rem;
    font-weight: 700;
    text-transform: uppercase;
}

.forum-author-meta {
    margin: 0;
    color: var(--ink-faint);
    font-size: .68rem;
    line-height: 1.5;
    text-align: left;
}

.forum-author-meta > div {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px;
}

.forum-author-meta dt {
    font-weight: 650;
}

.forum-author-meta dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    text-align: right;
}

.forum-post-main {
    display: flex;
    min-width: 0;
    min-height: 220px;
    flex-direction: column;
}

.forum-post-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: .82rem;
}

.forum-post-header time {
    display: block;
    margin-top: 1px;
    color: var(--ink-faint);
    font-size: .7rem;
}

.forum-post-number {
    color: var(--ink-faint);
    font-size: .75rem;
    font-weight: 700;
}

.forum-post-content {
    min-height: 110px;
    padding: 18px 16px 20px;
    overflow-wrap: anywhere;
    font-size: .92rem;
    line-height: 1.65;
}

.forum-post-content p:first-child {
    margin-top: 0;
}

.forum-quote {
    margin: 12px 0;
    padding: 10px 14px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    color: var(--ink);
}

.forum-quote cite {
    display: block;
    margin-bottom: 5px;
    color: var(--accent-dark);
    font-size: .77rem;
    font-style: normal;
    font-weight: 650;
}

.forum-code {
    max-width: 100%;
    margin: 12px 0;
    overflow-x: auto;
    white-space: pre-wrap;
}

.forum-edited {
    margin: auto 16px 8px;
    color: var(--ink-faint);
    font-size: .68rem;
    font-style: italic;
}

.forum-signature {
    margin: 0 16px;
    padding: 10px 0;
    border-top: 1px solid var(--line-soft);
    color: var(--ink-faint);
    font-size: .78rem;
}

.forum-post-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    min-height: 32px;
    margin-top: auto;
    padding: 6px 10px;
    background: var(--surface-2);
    border-top: 1px solid var(--line);
}

.forum-post-actions a,
.forum-post-actions button {
    padding: 2px 9px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-btn-sm);
    color: var(--accent-dark);
    cursor: pointer;
    font-family: var(--sans);
    font-size: .7rem;
    line-height: 1.7;
}

.forum-post-actions a:hover,
.forum-post-actions button:hover {
    background: var(--accent-wash);
    text-decoration: none;
}

.forum-post-actions .forum-action-danger {
    color: var(--danger);
}

.card.forum-reply-box,
.card.forum-compose-card,
.forum-editor,
.forum-editor-toolbar {
    overflow: visible !important;
}

.forum-reply-box {
    scroll-margin-top: 12px;
    margin-top: 24px;
    padding: 22px 24px;
    background-color: var(--surface);
    border: 1px solid var(--gold);
    border-radius: var(--radius);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    overflow: visible !important;
}

.forum-reply-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}

.forum-reply-heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.forum-reply-title {
    margin: 0;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--gold);
    font-family: var(--display);
    letter-spacing: 0.04em;
}

.forum-reply-icon {
    font-size: 1.2rem;
}

.forum-reply-hint {
    font-size: 0.82rem;
    color: var(--ink-faint);
}

.forum-reply-quote-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    background: var(--accent-wash);
    border: 1px solid var(--gold);
    border-radius: 4px;
    font-size: 0.82rem;
    color: var(--gold);
}

.forum-cancel-quote-btn {
    color: var(--danger);
    font-weight: 600;
    text-decoration: none;
    margin-left: 6px;
    padding: 1px 5px;
    border-radius: 3px;
    transition: background 0.12s ease;
}

.forum-cancel-quote-btn:hover {
    background: rgba(217, 83, 79, 0.2);
    text-decoration: none;
}

.forum-reply-notice {
    padding: 14px 16px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--ink-soft);
    font-size: 0.9rem;
}

.forum-reply-notice.forum-reply-locked {
    border-color: #8c734b;
    background: rgba(140, 115, 75, 0.15);
}

.forum-reply-author-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 8px 14px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.forum-reply-author-bar .author-label-icon {
    font-size: 1.1rem;
}

.forum-reply-author-bar .form-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
    width: 100%;
}

.forum-reply-author-bar .form-group label {
    margin-bottom: 0;
    font-size: 0.85rem;
    font-weight: 650;
    color: var(--gold);
    white-space: nowrap;
}

.forum-reply-author-bar .form-group select {
    max-width: 400px;
    height: 36px;
    min-height: 36px;
    padding: 4px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--ink);
    font-size: 0.88rem;
}

.forum-reply-author-bar .forum-posting-as {
    margin: 0;
    font-size: 0.88rem;
    color: var(--ink-soft);
}

.forum-reply-author-bar .forum-posting-as strong {
    color: var(--gold);
}

.forum-reply-editor-wrap {
    margin-bottom: 12px;
}

.forum-reply-submit-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
}

.forum-reply-submit-bar .btn-post-reply {
    min-width: 160px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.86rem;
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

.forum-reply-rules-tip {
    font-size: 0.82rem;
    color: var(--ink-faint);
}

.forum-compose-card {
    max-width: 820px;
    overflow: visible !important;
}

/* Editor */
.forum-editor {
    margin-bottom: 14px;
}

.forum-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 7px 8px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-bottom: 0;
    border-top-left-radius: var(--radius-sm);
    border-top-right-radius: var(--radius-sm);
}

.forum-toolbar-group {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.forum-toolbar-separator {
    width: 1px;
    height: 20px;
    margin: 0 4px;
    background: var(--line);
}

.forum-editor-toolbar button {
    min-width: 28px;
    min-height: 26px;
    padding: 3px 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 5px;
    color: var(--ink-soft);
    cursor: pointer;
    font-size: .75rem;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.forum-editor-toolbar button:hover,
.forum-editor-toolbar button:focus-visible {
    background: var(--accent-wash);
    border-color: var(--gold);
    color: var(--accent-dark);
}

.forum-editor-toolbar .btn-upload-image {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
    color: #fff;
    font-weight: 650;
}

.forum-editor-toolbar .btn-upload-image:hover {
    background: var(--link-hover);
    border-color: var(--link-hover);
    color: #fff;
}

.forum-editor-toolbar .btn-toolbar-youtube {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #1c1511;
    border-color: rgba(201, 169, 97, 0.45);
    color: #e8d9a0;
    font-weight: 650;
    transition: all 0.15s ease;
}

.forum-editor-toolbar .btn-toolbar-youtube:hover,
.forum-editor-toolbar .btn-toolbar-youtube:focus-visible {
    background: #2a1b14;
    border-color: #ff3333;
    color: #ffffff;
    box-shadow: 0 0 6px rgba(255, 51, 51, 0.35);
}

.forum-editor-toolbar .btn-toolbar-youtube .toolbar-yt-icon {
    font-size: 11px;
    line-height: 1;
}

.forum-editor-toolbar .btn-editor-preview {
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink-soft);
}

.forum-editor-toolbar .btn-editor-preview.is-active {
    background: var(--success-bg);
    border-color: #a9b585;
    color: var(--success);
}

/* Forum Emoji Picker */
.forum-emoji-container {
    position: relative;
}

.forum-editor-toolbar .btn-emoji-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink-soft);
    font-weight: 600;
}

.forum-editor-toolbar .btn-emoji-trigger:hover,
.forum-editor-toolbar .btn-emoji-trigger.is-active {
    background: var(--accent-wash);
    border-color: var(--gold);
    color: var(--accent-dark);
}

.forum-editor-toolbar .btn-emoji-trigger .emoji-trigger-icon {
    font-size: 14px;
    line-height: 1;
}

.forum-emoji-popover {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1050;
    width: 385px;
    max-width: min(385px, calc(100vw - 16px));
    background: #181410;
    border: 1px solid var(--gold);
    border-radius: var(--radius-sm);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.85), 0 3px 12px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-align: left;
    user-select: none;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    animation: forumEmojiFadeIn 0.14s ease-out;
}

.forum-emoji-popover.is-open-up {
    animation: forumEmojiFadeInUp 0.14s ease-out;
}

@keyframes forumEmojiFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes forumEmojiFadeInUp {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.emoji-picker-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: #201a14;
    border-bottom: 1px solid rgba(201, 169, 97, 0.3);
    box-sizing: border-box;
}

.emoji-search-wrap {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.emoji-search-icon {
    position: absolute;
    left: 8px;
    font-size: 12px;
    color: var(--gold);
    pointer-events: none;
}

.emoji-search-input {
    width: 100%;
    height: 30px;
    padding: 0 28px;
    background: #110e0b;
    border: 1px solid rgba(201, 169, 97, 0.4);
    border-radius: 4px;
    color: #f3ebd7;
    font-size: 12px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.emoji-search-input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px rgba(205, 168, 105, 0.45);
    color: #ffffff;
}

.emoji-search-input::placeholder {
    color: #8c7a5e;
}

.emoji-search-clear {
    position: absolute;
    right: 6px;
    background: transparent;
    border: none;
    color: #c9b58c;
    font-size: 12px;
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
    border-radius: 3px;
}

.emoji-search-clear:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.emoji-close-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(201, 169, 97, 0.25);
    border-radius: 4px;
    color: #c9b58c;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.12s ease;
}

.emoji-close-btn:hover {
    background: rgba(205, 168, 105, 0.2);
    color: #ffffff;
    border-color: var(--gold);
}

.emoji-quick-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #14100c;
    border-bottom: 1px solid rgba(201, 169, 97, 0.22);
    width: 100%;
    box-sizing: border-box;
}

.emoji-quick-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gold);
    margin-right: 2px;
    white-space: nowrap;
    flex-shrink: 0;
}

.emoji-quick-items {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    min-width: 0;
    gap: 2px;
}

.emoji-quick-btn {
    flex: 1 1 0;
    min-width: 0;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    box-sizing: border-box;
    transition: transform 0.1s ease, background-color 0.12s ease;
}

.emoji-quick-btn:hover {
    background: rgba(205, 168, 105, 0.22);
    border-color: var(--gold);
    transform: scale(1.25);
    z-index: 2;
}

/* Category Tabs Bar - 100% visible, no cut off buttons */
.emoji-tabs-bar {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 2px;
    padding: 5px 6px;
    background: #100d0a;
    border-bottom: 1px solid rgba(201, 169, 97, 0.3);
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.emoji-tabs-bar::-webkit-scrollbar {
    display: none;
}

.emoji-tab-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 5px 3px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #c9b58c;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    white-space: nowrap;
    box-sizing: border-box;
    transition: all 0.12s ease;
    user-select: none;
}

.emoji-tab-btn .tab-icon {
    font-size: 13px;
    line-height: 1;
    flex-shrink: 0;
    display: inline-block;
}

.emoji-tab-btn .tab-label {
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
    font-weight: 600;
}

.emoji-tab-btn:hover {
    background: rgba(205, 168, 105, 0.16);
    color: #ffffff;
}

.emoji-tab-btn.is-active {
    background: rgba(205, 168, 105, 0.28);
    border-color: var(--gold);
    color: #ffd679;
}

@media (max-width: 380px) {
    .emoji-tab-btn {
        padding: 5px 1px;
    }
    .emoji-tab-btn .tab-label {
        font-size: 10px;
    }
}

.emoji-scroll-container {
    height: 195px;
    max-height: 195px;
    overflow-y: auto;
    padding: 6px 8px 24px 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--gold) rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    background: #181410;
}

.emoji-scroll-container::-webkit-scrollbar {
    width: 6px;
}

.emoji-scroll-container::-webkit-scrollbar-thumb {
    background: var(--gold);
    border-radius: 3px;
}

.emoji-scroll-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
}

.emoji-category-heading {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gold);
    padding: 6px 4px 3px 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    position: sticky;
    top: 0;
    background: #181410;
    z-index: 2;
}

.emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 3px;
    padding: 2px 0 6px 0;
}

.emoji-btn {
    width: 100%;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    overflow: visible;
    box-sizing: border-box;
    transition: transform 0.1s ease, background 0.12s ease;
}

.emoji-btn:hover,
.emoji-btn:focus-visible {
    background: rgba(205, 168, 105, 0.25);
    border-color: var(--gold);
    transform: scale(1.22);
    z-index: 2;
    outline: none;
}

.emoji-empty-msg {
    padding: 24px 10px;
    text-align: center;
    color: #c9b58c;
    font-size: 12px;
    font-style: italic;
}

.emoji-picker-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #120f0c;
    border-top: 1px solid rgba(201, 169, 97, 0.25);
    min-height: 32px;
    font-size: 11px;
    color: #c9b58c;
    box-sizing: border-box;
}

.emoji-footer-preview {
    font-size: 18px;
    line-height: 1;
    width: 22px;
    text-align: center;
}

.emoji-footer-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    color: #ead9b4;
}

.forum-editor textarea {
    display: block;
    width: 100%;
    min-height: 180px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    resize: vertical;
}

.forum-editor textarea.is-dragover {
    border: 2px dashed var(--accent) !important;
    background: var(--accent-wash) !important;
}

.forum-editor-preview-pane {
    min-height: 180px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 0;
    border-bottom-left-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
    color: var(--ink);
    font-size: .92rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.forum-upload-tray {
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--ink-soft);
    font-size: 12px;
}

.forum-upload-thumbnails {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.forum-uploaded-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
}

.forum-uploaded-chip img {
    border-radius: 3px;
    object-fit: cover;
}

.forum-uploaded-chip .chip-name {
    max-width: 120px;
    overflow: hidden;
    color: var(--ink-soft);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.forum-uploaded-chip .btn-insert-again {
    padding: 2px 7px;
    background: var(--accent-dark);
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-size: 10px;
}

.forum-editor-footer-help {
    margin-top: 8px;
    color: var(--ink-faint);
    font-size: 11px;
}

.forum-image {
    display: block;
    max-width: min(100%, 720px);
    max-height: 550px;
    margin: 12px 0;
    object-fit: contain;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: zoom-in;
    transition: border-color .15s ease;
}

.forum-image:hover {
    border-color: var(--accent);
}

/* Forum YouTube Video Card & Facade Player */
.forum-video-card {
    display: block;
    max-width: min(100%, 640px);
    width: 100%;
    margin: 14px 0;
    background: #14100c;
    border: 1px solid var(--gold);
    border-radius: var(--radius-sm);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    user-select: none;
}

.forum-video-viewport {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000000;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.forum-video-viewport.is-playing {
    cursor: default;
}

.forum-video-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.28s ease, filter 0.28s ease;
}

.forum-video-viewport:hover .forum-video-thumb {
    transform: scale(1.025);
    filter: brightness(1.06);
}

.forum-video-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.58) 100%);
    gap: 8px;
    z-index: 2;
    transition: background 0.2s ease;
}

.forum-video-viewport:hover .forum-video-overlay {
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.45) 100%);
}

.forum-video-play-btn {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    line-height: 0;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.7));
    transition: transform 0.18s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.18s ease;
}

.forum-video-viewport:hover .forum-video-play-btn {
    transform: scale(1.15);
    filter: drop-shadow(0 6px 20px rgba(255, 0, 0, 0.55));
}

.forum-video-play-btn .yt-play-bg {
    transition: fill 0.18s ease;
}

.forum-video-viewport:hover .forum-video-play-btn .yt-play-bg {
    fill: #ff1a1a;
}

.forum-video-hint {
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
    background: rgba(0, 0, 0, 0.72);
    padding: 3px 9px;
    border-radius: 4px;
    letter-spacing: 0.3px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.forum-video-viewport:hover .forum-video-hint {
    background: rgba(0, 0, 0, 0.88);
    border-color: var(--gold);
    color: var(--gold-bright);
}

.forum-video-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    background: rgba(18, 14, 10, 0.85);
    color: #ff4444;
    border: 1px solid rgba(255, 68, 68, 0.35);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.forum-video-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.forum-video-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    background: #110e0b;
    border-top: 1px solid rgba(201, 169, 97, 0.25);
    font-size: 11.5px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.forum-video-note {
    color: #c9b58c;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
}

.forum-video-direct-link {
    color: var(--gold);
    text-decoration: none;
    font-weight: 600;
    font-size: 11px;
    transition: color 0.12s ease;
}

.forum-video-direct-link:hover {
    color: #ffffff;
    text-decoration: underline;
}

.forum-spoiler {
    overflow: hidden;
    margin: 12px 0;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.forum-spoiler-summary {
    padding: 7px 12px;
    background: var(--surface-2);
    color: var(--accent-dark);
    cursor: pointer;
    font-size: 12px;
    font-weight: 650;
    user-select: none;
}

.forum-spoiler-summary:hover {
    background: var(--accent-wash);
}

.forum-spoiler-content {
    padding: 10px 14px;
    background: var(--surface);
    border-top: 1px solid var(--line);
}

.forum-align-center {
    margin: 8px 0;
    text-align: center;
}

/* Lightbox Modal */
.forum-lightbox-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.forum-lightbox-content {
    position: relative;
    max-width: 94vw;
    max-height: 94vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.forum-lightbox-content img {
    max-width: 100%;
    max-height: 82vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.9);
    border: 1px solid #334155;
}

.forum-lightbox-close {
    position: absolute;
    top: -38px;
    right: -4px;
    color: #e2d4b2;
    font-size: 32px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    transition: color 0.15s ease;
}

.forum-lightbox-close:hover {
    color: var(--danger);
}

.forum-lightbox-caption {
    margin-top: 12px;
    text-align: center;
}

.forum-lightbox-caption a {
    color: var(--gold-bright);
    font-size: 12px;
    text-decoration: underline;
}

.forum-profile-head {
    display: flex;
    align-items: center;
    gap: 17px;
}

.forum-profile-head h2,
.forum-profile-head p {
    margin: 0;
}

.forum-profile-avatar {
    display: flex;
    width: 96px;
    height: 96px;
    flex: 0 0 96px;
    align-items: center;
    justify-content: center;
    object-fit: cover;
    border: 1px solid var(--rule);
    border-radius: 2px;
}

.forum-profile-details {
    margin-top: 18px;
}

@media (max-width: 980px) {
    .main {
        padding: 32px 30px 36px;
    }
}

@media (max-width: 620px) {
    .main {
        padding: 22px 16px 28px;
    }

    .main::before {
        inset: 8px;
        background-image: none;
    }

    .main::after {
        display: none;
    }
}

@media (max-width: 1180px) {
    .site-frame {
        grid-template-columns: 240px minmax(0, 1fr);
    }

    .side-right {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        align-items: start;
    }
}

@media (max-width: 850px) {
    .site-frame {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .sidebar.side-right {
        display: grid;
        grid-column: 1;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .menu-toggle {
        position: absolute;
        display: block;
        width: 1px;
        height: 1px;
        opacity: 0;
    }

    .menu-toggle-label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 11px 15px;
        background: linear-gradient(180deg, var(--forest-800), var(--forest-900));
        border: 1px solid var(--gold-dark);
        border-radius: var(--radius-btn);
        color: var(--gold-bright);
        cursor: pointer;
        font-family: var(--display);
        font-size: .78rem;
        font-weight: 600;
        letter-spacing: .14em;
        text-transform: uppercase;
    }

    .menu-toggle:focus-visible + .menu-toggle-label {
        outline: 2px solid var(--gold);
        outline-offset: 2px;
    }

    .menu-toggle-label span:last-child {
        font-size: 1.2rem;
        line-height: 1;
        transition: transform .15s ease;
    }

    .sidebar:not(.side-right) {
        display: none;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .menu-toggle:checked + .menu-toggle-label + .sidebar {
        display: grid;
    }

    .menu-toggle:checked + .menu-toggle-label span:last-child {
        transform: rotate(45deg);
    }

    .account-box {
        grid-row: span 2;
    }

    .site-nav-inner {
        width: min(100% - 28px, 760px);
        padding: 10px 0;
    }

    .nav-brand {
        font-size: 1.45rem;
    }



    .nav-cta {
        padding: 8px 16px;
        font-size: .78rem;
    }

    .nav-cta {
        gap: 6px;
    }

    .nav-cta-icon {
        width: 14px;
        height: 14px;
        flex-basis: 14px;
    }

    .site-frame {
        width: min(100% - 28px, 760px);
        margin-top: 18px;
    }

    .site-footer {
        width: min(100% - 28px, 760px);
    }

    .forum-post {
        grid-template-columns: 130px minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    .sidebar,
    .side-right {
        grid-template-columns: minmax(0, 1fr);
    }

    .account-box {
        grid-row: auto;
    }

    /* Two rows instead of three tracks: the name keeps the top line to itself,
       still centred, and the buttons sit under it. */
    .site-nav-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .nav-brand {
        grid-column: 1;
        margin-top: 4px;
        margin-bottom: -18px;
    }

    .nav-brand-logo {
        height: 82px;
        max-height: 86px;
        max-width: 220px;
    }

    .nav-actions {
        grid-column: 1;
        justify-self: center;
    }

    .server-status {
        font-size: .7rem;
    }

    .main {
        min-height: 480px;
    }

    .card {
        padding: 16px 15px;
    }

    .stats {
        grid-template-columns: 1fr;
    }

    .stat + .stat {
        border-top: 1px solid var(--line-soft);
        border-left: 0;
    }

    .between {
        align-items: stretch;
    }

    .between > .row {
        width: 100%;
    }

    .news-item-header {
        flex-direction: column;
        gap: 5px;
    }

    .row {
        flex-direction: column;
    }

    .row > * {
        min-width: 0;
    }

    .filters {
        grid-template-columns: 1fr;
    }

    .dl {
        grid-template-columns: 1fr;
        gap: 1px;
    }

    .dl dd {
        margin-bottom: 9px;
    }

    .forum-breadcrumbs {
        overflow: hidden;
    }

    .forum-thread-heading {
        flex-direction: column;
    }

    .forum-topic-nav {
        align-items: flex-start;
        flex-direction: column;
    }

    .forum-post {
        grid-template-columns: minmax(0, 1fr);
    }

    .forum-post-author {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-items: center;
        gap: 0 10px;
        padding: 10px 12px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
        text-align: left;
    }

    .forum-author-name,
    .forum-author-role {
        grid-column: 2;
    }

    .forum-author-role {
        margin: 0;
    }

    .forum-avatar,
    .forum-avatar-empty {
        width: 44px;
        height: 44px;
        grid-column: 1;
        grid-row: 1 / span 2;
        margin: 0;
    }

    .forum-author-meta {
        display: flex;
        grid-column: 1 / -1;
        gap: 4px 12px;
        margin-top: 8px;
        flex-wrap: wrap;
    }

    .forum-author-meta > div {
        display: flex;
        gap: 4px;
    }

    .forum-author-meta dd {
        text-align: left;
    }

    .forum-post-main {
        min-height: 200px;
    }

    .forum-post-content {
        padding: 15px 13px 18px;
    }

    .forum-profile-head {
        align-items: flex-start;
    }

    .forum-profile-avatar {
        width: 68px;
        height: 68px;
        flex-basis: 68px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* ---- item icons ------------------------------------------------------- */
/* Item pictures come out of the client files at 32x32 with hard pixel edges,
   so they are scaled with nearest-neighbour: smoothing turns 1-pixel outlines
   into mush. The amount sits in the corner the way the game client draws it. */
.item-icon {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    flex: none;
    line-height: 0;
}

.item-icon img {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.item-icon-count {
    position: absolute;
    right: -2px;
    bottom: -4px;
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    color: #fff;
    /* Outline instead of a background box: the count has to stay readable over
       both bright and dark sprites without hiding the art behind it. */
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    pointer-events: none;
}

.item-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ---- Container Inspector & Tibia Slots System ------------------------- */
.container-inspector-card {
    margin-bottom: 20px;
    padding: 20px 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.container-inspector-card h3 {
    margin-top: 0;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.container-inspector-layout {
    display: grid;
    grid-template-columns: minmax(280px, 350px) 1fr;
    gap: 20px;
    align-items: start;
}

@media (max-width: 860px) {
    .container-inspector-layout {
        grid-template-columns: 1fr;
    }
}

.container-view-box {
    background: #090e15;
    border: 1px solid #1a2838;
    border-radius: 4px;
    padding: 14px;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.7);
}

.container-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #1a2838;
}

.container-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    font-size: 13px;
    color: #8c9ba5;
}

.container-breadcrumbs .crumb-link {
    color: var(--gold);
    cursor: pointer;
    font-weight: 600;
    transition: color 0.15s ease;
}

.container-breadcrumbs .crumb-link:hover {
    color: var(--gold-bright);
    text-decoration: underline;
}

.container-breadcrumbs .crumb-current {
    color: #e2d4b2;
    font-weight: 700;
}

.container-breadcrumbs .crumb-sep {
    color: #4a5c68;
    font-size: 11px;
}

.container-up-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 12px;
    background: #172433;
    border: 1px solid #2e4359;
    border-radius: 3px;
    color: #aebdc4;
    cursor: pointer;
    transition: all 0.15s ease;
}

.container-up-btn:hover {
    background: #23374c;
    color: #fff;
    border-color: var(--gold);
}

/* Authentic Tibia Slots Matrix */
.tibia-slots-matrix {
    display: grid;
    gap: 5px;
    padding: 10px;
    background: #06090e;
    border: 1px solid #141e2a;
    border-radius: 4px;
    width: fit-content;
    margin: 0 auto;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.85);
}

.tibia-slot {
    width: 42px;
    height: 42px;
    background: #121922;
    border: 1px solid #0a0f15;
    border-top: 1px solid #1a2533;
    border-left: 1px solid #1a2533;
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.7);
    border-radius: 2px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.tibia-slot.is-filled {
    cursor: pointer;
}

.tibia-slot.is-filled:hover {
    background: #1b2735;
    border-color: #38536e;
    transform: scale(1.04);
    z-index: 5;
}

.tibia-slot.is-container {
    border-color: #277984;
    box-shadow: inset 0 0 4px rgba(69, 171, 183, 0.3), 0 0 4px rgba(69, 171, 183, 0.2);
}

.tibia-slot.is-container:hover {
    background: #1a323d;
    border-color: var(--gold);
    box-shadow: 0 0 8px rgba(69, 171, 183, 0.5);
}

.tibia-slot.is-empty {
    opacity: 0.35;
    background: #0a0f15;
}

.tibia-slot.is-highlighted {
    background: #2a3c20 !important;
    border-color: #5bb334 !important;
    box-shadow: 0 0 8px rgba(91, 179, 52, 0.6) !important;
}

.tibia-slot.is-dimmed {
    opacity: 0.25;
}

.tibia-slot img {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    pointer-events: none;
}

.tibia-slot .slot-amount {
    position: absolute;
    right: 2px;
    bottom: 0px;
    font-family: 'Verdana', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    pointer-events: none;
    line-height: 1;
}

.tibia-slot .slot-charges {
    position: absolute;
    right: 2px;
    top: 2px;
    font-family: 'Verdana', sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: #b794f4;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    pointer-events: none;
    line-height: 1;
}

.tibia-slot .slot-container-badge {
    position: absolute;
    left: 2px;
    top: 2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 4px var(--gold);
    pointer-events: none;
}

.container-footer-hint {
    margin-top: 10px;
    font-size: 12px;
    color: #7b8e9b;
    text-align: center;
}

/* Cargo Manifest & Statistics */
.manifest-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.manifest-stat-card {
    padding: 12px 14px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.manifest-stat-card .stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-faint);
    font-weight: 650;
}

.manifest-stat-card .stat-value {
    margin-top: 2px;
    color: var(--ink);
    font-size: 18px;
    font-weight: 700;
}

.manifest-stat-card.stat-warning {
    background: var(--danger-bg);
    border-color: #d3ab92;
}

.manifest-stat-card.stat-warning .stat-value {
    color: var(--danger);
}

.manifest-search-box {
    margin-bottom: 12px;
    position: relative;
}

.manifest-search-box input {
    width: 100%;
    padding: 8px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-size: 13px;
}

.manifest-search-box input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(26, 139, 155, .14);
}

.manifest-table-wrapper {
    max-height: 280px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.manifest-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.manifest-table th {
    position: sticky;
    top: 0;
    /* The site's graphite column headers (12/2026: was var(--surface-2)). */
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 -.42'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.1 -.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='.16'/%3E%3Crect width='100%25' height='100%25' filter='url(%23b)' opacity='.35'/%3E%3C/svg%3E") 0 0 / 180px 180px,
        linear-gradient(180deg, #2a2d33, #1b1d21);
    color: #f4e8cb;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 8px 10px;
    border-bottom: 1px solid var(--gold-dark);
    text-align: left;
    z-index: 2;
}

.manifest-table td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink);
}

.manifest-table tr:hover td {
    background: var(--surface-2);
}

.manifest-table .item-cell-mini {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Custom Tooltip */
.tibia-tooltip {
    position: fixed;
    z-index: 10000;
    pointer-events: none;
    background: #080c12;
    border: 1px solid #33485e;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.8), 0 0 10px rgba(69, 171, 183, 0.2);
    border-radius: 4px;
    padding: 10px 12px;
    color: #e2d4b2;
    font-size: 12px;
    line-height: 1.4;
    max-width: 260px;
    display: none;
}

.tibia-tooltip .tooltip-title {
    font-weight: 700;
    font-size: 13px;
    color: var(--gold-bright);
    margin-bottom: 4px;
    border-bottom: 1px solid #1e2c3a;
    padding-bottom: 3px;
}

.tibia-tooltip .tooltip-prop {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #94a3b8;
    font-size: 11px;
}

.tibia-tooltip .tooltip-prop strong {
    color: #e2d4b2;
}

.tibia-tooltip .tooltip-action {
    margin-top: 6px;
    padding-top: 4px;
    border-top: 1px dashed #1e2c3a;
    font-size: 11px;
    color: var(--gold-bright);
}

/* ---- Depot Loading Screen & Progress Bar ------------------------------ */
.depot-loading-card {
    max-width: 600px;
    margin: 20px auto;
    padding: 36px 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-align: center;
}

.depot-loading-radar {
    position: relative;
    display: flex;
    width: 80px;
    height: 80px;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.radar-ring {
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    border-top-color: var(--accent);
    border-right-color: var(--accent-bright);
    border-radius: 50%;
    animation: radarSpin 1.4s linear infinite;
}

.radar-pulse {
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(26, 139, 155, .16) 0%, transparent 70%);
    animation: radarPulse 2s ease-in-out infinite;
}

.radar-icon {
    position: relative;
    z-index: 2;
    font-size: 30px;
}

@keyframes radarSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes radarPulse {
    0%, 100% { transform: scale(0.9); opacity: 0.5; }
    50% { transform: scale(1.15); opacity: 1; }
}

.depot-loading-card h2 {
    margin: 0 0 6px;
    color: var(--ink);
    font-size: 20px;
}

.depot-loading-card p.subtitle {
    margin-bottom: 24px;
    color: var(--ink-soft);
    font-size: 14px;
}

/* Progress Bar */
.progress-bar-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 14px;
    margin-bottom: 12px;
    padding: 2px;
    background: var(--surface-3);
    border: 1px solid var(--line);
    border-radius: 20px;
}

.progress-bar-fill {
    position: relative;
    width: 15%;
    height: 100%;
    background: var(--accent);
    border-radius: 16px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-bar-fill::after {
    position: absolute;
    content: '';
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
    animation: progressShimmer 1.8s infinite;
}

@keyframes progressShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

.progress-status-text {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 600;
}

.depot-loading-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: 13px;
    text-align: left;
}

.loading-step {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink-faint);
}

.loading-step.is-done {
    color: var(--success);
    font-weight: 600;
}

.loading-step.is-active {
    color: var(--accent-dark);
    font-weight: 600;
}

.loading-step .step-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rule-soft);
}

.loading-step.is-done .step-dot {
    background: var(--success);
}

.loading-step.is-active .step-dot {
    background: var(--accent);
    animation: dotPulse 1s infinite alternate;
}

@keyframes dotPulse {
    from { transform: scale(0.8); opacity: 0.6; }
    to { transform: scale(1.3); opacity: 1; }
}

/* ---- Depot Toolbar & Town Filter -------------------------------------- */
.depot-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
    padding: 12px 16px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.depot-filter-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.depot-filter-label {
    color: var(--ink-faint);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.depot-select-dropdown,
.depot-search-input {
    padding: 7px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-size: 13px;
}

.depot-select-dropdown {
    min-width: 180px;
    cursor: pointer;
    font-weight: 600;
}

.depot-search-input {
    min-width: 220px;
}

.depot-select-dropdown:focus,
.depot-search-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(26, 139, 155, .14);
}

.depot-category-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.category-pill-btn {
    padding: 5px 11px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 20px;
    color: var(--ink-soft);
    cursor: pointer;
    font-size: 12px;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.category-pill-btn:hover {
    background: var(--surface-2);
    border-color: var(--rule);
    color: var(--ink);
}

.category-pill-btn.is-active {
    background: var(--accent-wash);
    border-color: var(--gold);
    color: var(--accent-dark);
    font-weight: 650;
}

/* ---- Depot Item Selection Cards Grid ---------------------------------- */
.depot-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    overflow-y: auto;
    max-height: 520px;
    gap: 12px;
    margin-bottom: 24px;
    padding-right: 4px;
}

.depot-item-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
    user-select: none;
    transition: border-color .12s ease, background .12s ease;
}

.depot-item-card:hover {
    background: var(--surface-2);
    border-color: var(--rule);
}

.depot-item-card.is-selected {
    background: var(--accent-wash) !important;
    border-color: var(--accent) !important;
}

.depot-item-card.is-container {
    border-left: 3px solid var(--accent);
}

.depot-item-card input[type="radio"] {
    position: absolute;
    top: 12px;
    right: 12px;
    accent-color: var(--accent-dark);
    cursor: pointer;
    transform: scale(1.15);
}

.depot-item-card .card-icon-box {
    position: relative;
    display: flex;
    width: 40px;
    height: 40px;
    flex: none;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 4px;
}

.depot-item-card .card-content {
    min-width: 0;
    flex: 1;
    padding-right: 18px;
}

.depot-item-card .card-name {
    overflow: hidden;
    margin-bottom: 2px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.depot-item-card .card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    color: var(--ink-faint);
    font-size: 11px;
}

.depot-item-card .card-town-tag {
    padding: 1px 6px;
    background: var(--surface-3);
    border-radius: 3px;
    color: var(--ink-soft);
    font-size: 10px;
}

.depot-item-card .card-charges-tag {
    color: var(--purple);
    font-weight: 600;
}

/* Sticky Action & Listing Form */
.listing-action-panel {
    padding: 16px 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.selected-item-preview-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding: 10px 14px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.selected-item-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.no-item-selected-hint {
    color: var(--ink-faint);
    font-size: 13px;
    font-style: italic;
}

/* Bundled items inside containers */
.depot-item-card.is-bundled {
    background: var(--success-bg) !important;
    border-color: #a9b585 !important;
}

.depot-item-card.is-bundled .card-name {
    color: var(--success);
}

.bundle-indicator-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 1px 7px;
    background: var(--success-bg);
    border: 1px solid #a9b585;
    border-radius: 10px;
    color: var(--success);
    font-size: 10px;
    font-weight: 700;
}

.parent-container-hint {
    margin-top: 2px;
    color: var(--success);
    font-size: 10px;
}

/* Container Group Blocks */
.container-group-wrapper,
.standalone-group-wrapper {
    margin-bottom: 16px;
    padding: 14px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.container-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}

.container-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--accent-dark);
    font-size: 14px;
    font-weight: 650;
}

.container-nested-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    margin-top: 10px;
    padding-left: 12px;
    border-left: 2px solid var(--line);
}

.inside-container-badge {
    display: inline-block;
    margin-top: 2px;
    padding: 1px 6px;
    background: var(--accent-wash);
    border-radius: 3px;
    color: var(--accent-dark);
    font-size: 10px;
}

.standalone-group-header {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 14px;
    font-weight: 650;
}

/* Seller Depot Slot Inspector */
.depot-inspector-wrapper {
    margin-bottom: 20px;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.depot-inspector-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.depot-container-action-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}

.depot-container-action-banner:hover {
    background: var(--accent-wash);
    border-color: var(--gold);
}

.depot-container-action-banner.is-selected {
    background: var(--accent-wash) !important;
    border-color: var(--accent) !important;
}

/* Slot selection stays bright: it sits on the dark sprite matrix. */
.tibia-slot.is-slot-selected {
    background: #0f2d1e !important;
    border-color: #22c55e !important;
    box-shadow: 0 0 10px rgba(34, 197, 94, .7), inset 0 0 6px rgba(34, 197, 94, .4) !important;
}

.tibia-slot.is-slot-selected::after {
    position: absolute;
    top: 1px;
    left: 2px;
    z-index: 5;
    width: 12px;
    height: 12px;
    content: '✓';
    background: #16a34a;
    border-radius: 2px;
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    line-height: 12px;
    text-align: center;
    pointer-events: none;
}

.slot-drilldown-badge {
    position: absolute;
    right: -4px;
    bottom: -4px;
    padding: 0 3px;
    background: var(--accent-dark);
    border-radius: 2px;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 12px;
}

.inspector-actions-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-ghost-small {
    padding: 5px 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-btn-sm);
    color: var(--ink-soft);
    cursor: pointer;
    font-size: 11px;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.btn-ghost-small:hover {
    background: var(--surface-2);
    border-color: var(--rule);
    color: var(--ink);
}

/* Casters & Live Stream System */
.live-pulse-dot {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    width: 10px;
    height: 10px;
    background: #d94a45;
    border-radius: 50%;
    box-shadow: 0 0 0 rgba(217, 74, 69, .55);
    animation: livePulse 1.8s infinite;
}

@keyframes livePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(217, 74, 69, .5);
    }
    70% {
        box-shadow: 0 0 0 9px rgba(217, 74, 69, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(217, 74, 69, 0);
    }
}

.caster-card {
    display: flex;
    overflow: hidden;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color .15s ease;
}

.caster-card:hover {
    border-color: var(--rule);
}

.caster-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
}

.caster-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    background: var(--danger-bg);
    border: 1px solid #d3ab92;
    border-radius: 12px;
    color: #b3403c;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
}

.caster-live-badge-green {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 7px;
    background: rgba(122, 168, 74, 0.22);
    border: 1px solid rgba(156, 204, 99, 0.6);
    border-radius: 12px;
    color: #9ccc63;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    vertical-align: middle;
    box-shadow: 0 0 6px rgba(156, 204, 99, 0.25);
}

.live-dot-mini {
    width: 6px;
    height: 6px;
    background: #d94a45;
    border-radius: 50%;
    animation: livePulse 1.5s infinite;
}

.live-dot-green {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #9ccc63;
    border-radius: 50%;
    box-shadow: 0 0 0 rgba(156, 204, 99, .6);
    animation: livePulseGreen 1.6s infinite;
}

@keyframes livePulseGreen {
    0% {
        box-shadow: 0 0 0 0 rgba(156, 204, 99, .7);
    }
    70% {
        box-shadow: 0 0 0 7px rgba(156, 204, 99, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(156, 204, 99, 0);
    }
}

.caster-viewers-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--accent-dark);
    font-size: 12px;
    font-weight: 650;
}

.caster-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

.caster-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.caster-name {
    margin: 0;
    color: var(--ink);
    font-size: 17px;
    font-weight: 650;
}

.caster-description {
    padding: 10px 14px;
    background: var(--surface-2);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    color: var(--ink);
    font-size: 13.5px;
    font-style: normal;
    line-height: 1.5;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
}

.caster-meta-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 12px;
}

.caster-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.caster-meta-item .meta-label {
    color: var(--ink-faint);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.caster-meta-item .meta-value {
    overflow: hidden;
    color: var(--ink);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.caster-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--surface-2);
    border-top: 1px solid var(--line);
}

.caster-watch-hint code {
    padding: 2px 6px;
    background: var(--accent-wash);
    border-radius: 4px;
    color: var(--accent-dark);
    font-size: 11px;
    font-weight: 700;
}

.cast-instructions-card {
    background-color: var(--surface-2);
    border-left: 3px solid var(--accent);
}

/* The in-game cast walkthrough plate. The art is a wide sepia sketch, so it is
   framed rather than stretched: the card decides the width, the image keeps its
   own aspect ratio, and the full-resolution PNG stays one click away for anyone
   who wants to read the dialog labels closely. */
.cast-guide-figure {
    margin: 0 0 18px;
}

.cast-guide-figure a {
    display: block;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--parchment-light);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.cast-guide-figure a:hover,
.cast-guide-figure a:focus-visible {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.38);
    transform: translateY(-1px);
}

.cast-guide-figure img {
    display: block;
    width: 100%;
    height: auto;
}

.cast-guide-figure figcaption {
    margin-top: 6px;
    font-size: 11px;
    text-align: center;
    color: var(--ink-muted);
}

/* The About page opening plate: the founding illustration carries the story
   before a single word is read, so it runs the full width of the column and
   sits above the first section rather than beside it. Same framing language as
   the cast guide figure, one notch heavier because it opens the page. */
.about-hero {
    margin: 0 0 22px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--parchment-light);
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.3);
}

.about-hero img {
    display: block;
    width: 100%;
    height: auto;
}

.about-hero figcaption {
    padding: 10px 16px;
    border-top: 1px solid var(--line);
    background: var(--surface-2);
    font-size: 12px;
    font-style: italic;
    text-align: center;
    color: var(--ink-soft);
}

/* The founding promise. It is the one claim the whole project is built on, so
   it reads as a pledge set apart from the surrounding prose, not as a list item. */
.about-pledge {
    margin: 18px 0;
    padding: 14px 18px;
    border-left: 3px solid var(--gold);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.16);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ink);
}

.about-pledge strong {
    color: var(--gold-bright);
}

/* ==========================================================================
   Donations (Realcoins bought with Pix or a credit card)
   ========================================================================== */

/* The donate call to action reads as gold on the green chrome, so it stands
   apart from the ordinary account buttons without inventing a new shape.
   Enhanced with high-converting golden shimmer, breathing aura & social engineering cues. */

@keyframes donateShimmerSweep {
    0% {
        left: -130%;
        opacity: 0;
    }
    12% {
        opacity: 0.95;
    }
    30% {
        left: 140%;
        opacity: 0.95;
    }
    31%, 100% {
        left: 140%;
        opacity: 0;
    }
}

@keyframes donatePulseGlow {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(255, 220, 110, 0.45),
            0 2px 6px rgba(120, 85, 15, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.7),
            inset 0 -1px 0 rgba(100, 70, 10, 0.35);
    }
    50% {
        box-shadow:
            0 0 0 2px rgba(255, 235, 140, 0.9),
            0 0 16px rgba(245, 185, 45, 0.65),
            0 3px 12px rgba(130, 95, 20, 0.4),
            inset 0 1px 1px rgba(255, 255, 255, 0.95),
            inset 0 -1px 0 rgba(100, 70, 10, 0.5);
    }
}

@keyframes donateSparkleTwinkle {
    0%, 100% {
        opacity: 0.85;
        transform: scale(0.95) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.18) rotate(12deg);
        filter: drop-shadow(0 0 4px #ffe694);
    }
}

.btn-donate,
.sidebar-button-donate {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #deb03c 0%, #ba8b21 50%, #946c14 100%);
    border: 1px solid #ffd875;
    border-radius: var(--radius-btn);
    color: #1a1103;
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(255, 245, 200, 0.7);
    box-shadow:
        0 0 0 1px rgba(255, 220, 110, 0.45),
        0 2px 6px rgba(120, 85, 15, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -1px 0 rgba(100, 70, 10, 0.35);
    animation: donatePulseGlow 3s ease-in-out infinite;
    transition: transform 0.2s cubic-bezier(0.2, 0, 0.2, 1), box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

/* Light gleam / shimmer sweep across the button */
.btn-donate::before,
.sidebar-button-donate::before {
    content: "";
    position: absolute;
    top: 0;
    left: -130%;
    width: 65%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.15) 20%,
        rgba(255, 255, 255, 0.8) 50%,
        rgba(255, 255, 255, 0.15) 80%,
        transparent
    );
    transform: skewX(-25deg);
    pointer-events: none;
    animation: donateShimmerSweep 3.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    z-index: 1;
}

.sidebar-button-donate {
    display: flex !important;
    width: 100%;
    box-sizing: border-box;
    margin-top: 8px;
    padding: 8px 6px !important;
    font-family: var(--display);
    font-size: .73rem !important;
    letter-spacing: .05em !important;
    text-transform: uppercase;
    justify-content: center;
    align-items: center;
    gap: 5px !important;
    white-space: nowrap;
}

.sidebar-button-donate .donate-btn-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.sidebar-button-donate .donate-btn-label {
    flex-shrink: 1;
    white-space: nowrap;
}

.sidebar-button-donate .donate-btn-badge {
    font-size: 0.56rem;
    padding: 1px 4px;
    letter-spacing: 0.03em;
    flex-shrink: 0;
    white-space: nowrap;
}

.btn-donate:hover,
.sidebar-button-donate:hover {
    background: linear-gradient(180deg, #f2c34a 0%, #d1a129 50%, #a87b1a 100%);
    border-color: #fff2b0;
    color: #120a01;
    transform: translateY(-2px) scale(1.025);
    box-shadow:
        0 0 0 2px #ffe694,
        0 0 20px rgba(255, 195, 45, 0.75),
        0 6px 14px rgba(50, 35, 10, 0.35),
        inset 0 1px 1px rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 1px rgba(255, 250, 220, 0.85);
    text-decoration: none;
}

.btn-donate:active,
.sidebar-button-donate:active {
    transform: translateY(1px) scale(0.98);
    box-shadow:
        0 0 0 1px rgba(255, 220, 110, 0.5),
        0 1px 3px rgba(60, 40, 10, 0.5),
        inset 0 2px 4px rgba(70, 45, 10, 0.4);
}

.donate-btn-icon {
    display: inline-block;
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    vertical-align: middle;
    filter: drop-shadow(0 1px 2px rgba(35, 20, 5, 0.4));
    animation: donateSparkleTwinkle 2.8s ease-in-out infinite;
    position: relative;
    z-index: 2;
}

.donate-btn-badge {
    font-family: var(--sans);
    font-size: 0.62rem;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 9px;
    background: rgba(26, 17, 3, 0.85);
    color: #ffe699;
    border: 1px solid rgba(255, 220, 120, 0.65);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    line-height: 1.25;
    position: relative;
    z-index: 2;
}

.donate-btn-teaser {
    padding: 7px 16px;
    font-size: 0.85rem;
}

@media (prefers-reduced-motion: reduce) {
    .btn-donate,
    .sidebar-button-donate {
        animation: none;
    }
    .btn-donate::before,
    .sidebar-button-donate::before {
        display: none;
    }
    .donate-btn-icon {
        animation: none;
    }
}

.donate-card .form-group + .form-group {
    margin-top: 4px;
}

.donate-select {
    font-size: 1rem;
    font-weight: 600;
}

.donate-methods {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    margin-top: 6px;
}

.donate-method {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: var(--parchment-light);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-btn);
    cursor: pointer;
    transition: all .18s ease-in-out;
    position: relative;
}

.donate-method:hover {
    border-color: var(--rule);
    background: rgba(255, 255, 255, 0.6);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
}

.donate-method:has(input:checked),
.donate-method.is-selected {
    background: var(--accent-wash);
    border-color: var(--gold-dark);
    box-shadow: 0 0 0 1px var(--gold-dark), 0 3px 10px rgba(141, 111, 38, .15);
}

.donate-method input[type="radio"] {
    margin-top: 4px;
    accent-color: var(--gold-dark);
    cursor: pointer;
}

.donate-method-icon-wrap {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.donate-gateway-icon {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.donate-method-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.donate-method-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.donate-method-header strong {
    font-size: 0.95rem;
    color: var(--ink);
}

.gateway-badge {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    border-radius: 4px;
    line-height: 1.4;
}

.gateway-badge-efi {
    background: #FFF0E6;
    color: #D35400;
    border: 1px solid rgba(243, 112, 33, 0.35);
}

.gateway-badge-stripe {
    background: #F0EFFF;
    color: #5345EE;
    border: 1px solid rgba(99, 91, 255, 0.35);
}

.donate-channel-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: var(--gold-dark);
    background: rgba(141, 111, 38, 0.1);
    border: 1px solid rgba(141, 111, 38, 0.25);
    padding: 1px 6px;
    border-radius: 4px;
    line-height: 1.4;
}

.donate-method-body .muted {
    font-size: .8rem;
    line-height: 1.4;
}

.donate-method-brands {
    margin-top: 4px;
}

.donate-brands-img {
    height: 20px;
    width: auto;
    display: block;
}

.donate-payer {
    margin: 16px 0;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-btn);
}

.donate-payer legend {
    padding: 0 6px;
    color: var(--ink-soft);
    font-family: var(--display);
    font-size: .85rem;
}

.donate-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    justify-content: space-between;
    margin: 14px 0;
    padding: 12px 14px;
    background: var(--accent-wash);
    border: 1px solid var(--rule);
    border-radius: var(--radius-btn);
    font-size: .95rem;
}

.donate-terms {
    margin-top: 14px;
    font-size: .8rem;
}

/* Payment page ------------------------------------------------------------ */

.donate-pix-body {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
    margin-top: 12px;
}

.donate-qr {
    width: 256px;
    height: 256px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: var(--radius-btn);
    image-rendering: pixelated;
}

.donate-pix-code {
    flex: 1 1 260px;
}

.donate-pix-code textarea {
    width: 100%;
    font-family: monospace;
    font-size: .75rem;
    word-break: break-all;
}

/* A quiet pulse so the page reads as "still waiting" without a spinner. */
.donate-waiting {
    margin-top: 16px;
    animation: donate-pulse 1.8s ease-in-out infinite;
}

@keyframes donate-pulse {
    0%, 100% { opacity: .55; }
    50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .donate-waiting { animation: none; }
}

@media (max-width: 640px) {
    .donate-qr {
        width: 100%;
        height: auto;
        max-width: 280px;
    }
}

/* Former character names (paid renames).
   Shown under the current name on a character's profile for six months, struck
   through, so the player behind a new name stays recognisable. */
.former-name {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.4;
}

.former-name s {
    color: var(--ink-soft);
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    font-weight: 700;
}

.former-name-note {
    margin-left: 6px;
    font-size: 11px;
    color: var(--ink-soft);
    opacity: .8;
}

/* Profile comment: the owner's own line on a character's public profile.
   Long words (a pasted URL) must wrap instead of stretching the table. */
.profile-comment {
    max-width: 60ch;
    line-height: 1.5;
    overflow-wrap: anywhere;
    white-space: normal;
}

/* Realcoin transfers: the live recipient check and the confirmation step. */
.transfer-lookup {
    min-height: 20px;
    margin-top: 6px;
    font-size: .88rem;
}

.transfer-lookup.is-good { color: var(--success); }
.transfer-lookup.is-bad  { color: var(--danger); }

.transfer-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.transfer-confirm {
    margin-top: 14px;
    padding: 14px 16px;
    background: var(--parchment-2);
    border: 1px solid var(--gold-dark);
    border-radius: var(--radius-btn);
}

.transfer-confirm h4 {
    margin: 0 0 6px;
    font-family: var(--display);
    font-size: .82rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* ==========================================================================
   Highscores
   ========================================================================== */

/* The filter row used to force `height: 36px` on the selects. A select here is
   9px of padding top and bottom, a 2px border and a ~25px line box: 46px of
   content pushed into 36px, which cropped the words inside ("All worlds",
   "Level", the vocations). Sizing comes from padding and a min-height now, and
   the tighter line-height lands the controls on the same 40px as the .btn next
   to them so the row reads as one strip. */
.highscores-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

.highscores-filters .form-group {
    margin-bottom: 0;
    min-width: 150px;
}

.highscores-filters .form-group.is-wide {
    min-width: 180px;
}

.highscores-filters label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.highscores-filters select {
    min-height: 40px;
    padding: 7px 34px 7px 12px;
    line-height: 1.3;
}

/* Rank column.
   The top three used to be marked with medal emoji. Dropping those left the
   distinction resting on coloured numerals, and gold on parchment measures
   2.5:1 -- unreadable, and invisible to anyone who cannot separate the hues.
   So the medal is drawn instead: a struck metal disc with the number cut into
   it, which carries the same meaning at 8:1 and needs no emoji font to exist
   on the reader's machine. */
.rank-cell {
    text-align: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ink-soft);
}

.rank-medal {
    display: inline-grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(58, 42, 15, .35);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .55),
        inset 0 -2px 3px rgba(90, 62, 18, .25),
        0 1px 2px rgba(40, 28, 10, .3);
    font-size: .82rem;
    font-weight: 700;
    line-height: 1;
}

.rank-medal-1 { background: linear-gradient(180deg, #f6dd92, #c9a02c); color: #3b2a05; }
.rank-medal-2 { background: linear-gradient(180deg, #eceff2, #a8adb5); color: #2b2f33; }
.rank-medal-3 { background: linear-gradient(180deg, #efc496, #b87a3a); color: #2a1705; }

/* ==========================================================================
   Registration check: identify the item
   ========================================================================== */

/* Present in the page without scripting, lifted into a dialog with it. */
.item-check {
    margin: 0 0 18px;
    padding: 16px 18px;
    background: var(--parchment-light);
    border: 1px solid var(--gold-dark);
    border-radius: var(--radius-btn);
}

.item-check-head h3 {
    margin: 0 0 2px;
    font-family: var(--display);
    font-size: 1rem;
}

.item-check-head p {
    margin: 0 0 12px;
    font-size: .86rem;
}

.item-check-error {
    margin: 0 0 12px;
    padding: 8px 10px;
    background: var(--danger-bg);
    border-left: 3px solid var(--danger);
    border-radius: var(--radius-sm);
    color: var(--danger-dark);
    font-size: .88rem;
    font-weight: 600;
}

.item-check-body {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
}

.item-check-plate {
    margin: 0;
    flex: 0 0 auto;
    line-height: 0;
    border: 2px solid var(--rule);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-soft);
}

/* The item is pixel art scaled by whole pixels; let the browser keep it that
   way instead of smoothing it into a smudge. */
.item-check-plate img {
    display: block;
    image-rendering: pixelated;
}

.item-check-options {
    display: grid;
    flex: 1 1 220px;
    gap: 8px;
}

.item-check-option {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 9px 12px;
    background: var(--parchment);
    border: 1px solid var(--rule-soft);
    border-radius: var(--radius-btn-sm);
    cursor: pointer;
    font-size: .95rem;
    transition: background .12s ease, border-color .12s ease;
}

.item-check-option:hover {
    background: var(--parchment-2);
    border-color: var(--rule);
}

.item-check-option:has(input:checked) {
    background: var(--accent-wash);
    border-color: var(--gold-dark);
    font-weight: 600;
}

.item-check-option input {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    accent-color: var(--gold-dark);
    cursor: pointer;
}

.item-check-refresh {
    flex: 0 0 auto;
    align-self: center;
}

.item-check-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

/* Dialog form */
.item-check-backdrop {
    position: fixed;
    z-index: 90;
    inset: 0;
    display: grid;
    padding: 20px;
    place-items: center;
    background: rgba(10, 6, 2, .68);
    overflow-y: auto;
}

/* `display: grid` above beats the browser's own `[hidden] { display: none }`,
   because an author rule outranks the user-agent stylesheet. Without this the
   backdrop ignores `hidden` completely: the dialog stands open from page load
   and Back, Escape and the click-outside all appear to do nothing. */
.item-check-backdrop[hidden] {
    display: none;
}

.item-check.is-dialog {
    width: min(560px, 100%);
    margin: 0;
    background: var(--parchment);
    border: 2px solid var(--gold-dark);
    box-shadow: 0 18px 46px rgba(6, 4, 1, .6);
}

body.has-dialog {
    overflow: hidden;
}

@media (max-width: 560px) {
    .item-check-body {
        justify-content: center;
    }
}

/* ==========================================================================
   File fields
   ========================================================================== */

/* The native control is kept, laid invisibly over the visible one: clicks,
   keyboard focus and `required` validation all still land on a real, focusable
   input -- which `display: none` would break, since the browser refuses to
   report an invalid control it cannot focus. Only the wording changes, and
   that wording is now this site's rather than the browser's. */
.file-field {
    position: relative;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.file-field input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
}

.file-field-button {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    padding: 9px 18px;
    background: linear-gradient(180deg, #e9dcbb, #dbcaa4);
    border: 1px solid var(--rule);
    border-radius: var(--radius-btn);
    color: var(--ink);
    font-family: var(--display);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.file-field:hover .file-field-button {
    background: linear-gradient(180deg, #f2e7ca, #e2d2ac);
    border-color: var(--gold-dark);
}

/* The focus ring belongs on the button: the input it really lands on is
   invisible. */
.file-field input[type="file"]:focus-visible + .file-field-button {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.file-field-name {
    color: var(--ink-soft);
    font-size: .9rem;
    overflow-wrap: anywhere;
}

.file-field.has-file .file-field-name {
    color: var(--ink);
    font-weight: 600;
}

/* Who is online tabs */
.online-voc-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--ink);
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}

.online-voc-tab:hover {
    background: #fbf5e6;
    border-color: var(--gold-dark);
    color: #120b04;
    text-decoration: none;
}

.online-voc-tab.active {
    background: linear-gradient(180deg, #243516, #121c0b);
    border-color: #8d6f26;
    color: #ffffff;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .85);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}

.online-voc-tab.active:hover {
    background: linear-gradient(180deg, #2e431c, #16220d);
    border-color: #bfa048;
    color: #ffffff;
    text-decoration: none;
}

/* ==========================================================================
   Realcoin Vault / Account Balance Showcase
   ========================================================================== */
.realcoin-vault-card {
    position: relative;
    margin-bottom: 22px;
    padding: 18px 24px;
    background:
        radial-gradient(ellipse 60% 100% at 12% 50%, rgba(255, 248, 225, 0.82) 0%, rgba(243, 230, 196, 0.45) 50%, transparent 100%),
        linear-gradient(135deg, #eee3c4 0%, #dec79b 60%, #d3bb8d 100%);
    border: 2px solid #bfa163;
    border-radius: 6px;
    box-shadow:
        0 0 0 1px rgba(75, 52, 20, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        inset 0 -1px 0 rgba(160, 125, 55, 0.3),
        0 4px 14px rgba(45, 30, 10, 0.16);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    overflow: hidden;
}

.realcoin-vault-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 0.9) 80%, transparent);
    pointer-events: none;
}

.realcoin-vault-left {
    display: flex;
    align-items: center;
    gap: 18px;
}

.realcoin-vault-icon-wrap {
    position: relative;
    flex-shrink: 0;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff7dc 0%, #e6ca82 40%, #b88d33 80%, #7d5914 100%);
    padding: 3px;
    box-shadow:
        0 0 0 1px rgba(85, 60, 16, 0.45),
        0 4px 10px rgba(40, 26, 7, 0.28),
        inset 0 1px 2px rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.2, 0, 0.2, 1), box-shadow 0.3s ease;
}

.realcoin-vault-card:hover .realcoin-vault-icon-wrap {
    transform: scale(1.06) rotate(5deg);
    box-shadow:
        0 0 0 1px rgba(85, 60, 16, 0.55),
        0 6px 16px rgba(40, 26, 7, 0.35),
        0 0 18px rgba(212, 175, 55, 0.45),
        inset 0 1px 2px rgba(255, 255, 255, 1);
}

.realcoin-vault-icon {
    display: block;
    width: 50px;
    height: 50px;
    filter: drop-shadow(0 2px 4px rgba(40, 25, 5, 0.3));
}

.realcoin-vault-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.realcoin-vault-label {
    font-family: var(--sans);
    font-size: 0.73rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #6e5223;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.realcoin-vault-label::after {
    content: "";
    display: inline-block;
    width: 28px;
    height: 1px;
    background: linear-gradient(90deg, rgba(189, 152, 70, 0.7), transparent);
}

.realcoin-vault-amount {
    display: flex;
    align-items: baseline;
    gap: 8px;
    line-height: 1.1;
}

.realcoin-vault-num {
    font-family: var(--display);
    font-size: 2.15rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #3b280a;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75), 0 2px 4px rgba(60, 42, 15, 0.15);
    line-height: 1;
}

.realcoin-vault-currency {
    font-family: var(--display);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #70521e;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.realcoin-vault-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.realcoin-vault-actions .btn {
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

@media (max-width: 640px) {
    .realcoin-vault-card {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        padding: 18px 16px;
        gap: 14px;
    }

    .realcoin-vault-left {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .realcoin-vault-label {
        justify-content: center;
    }

    .realcoin-vault-label::after {
        display: none;
    }

    .realcoin-vault-amount {
        justify-content: center;
    }

    .realcoin-vault-actions {
        justify-content: center;
        width: 100%;
    }

    .realcoin-vault-actions .btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* ==========================================================================
   Cookie & Privacy Consent Banner
   ========================================================================== */
.rc-cookie-banner {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    width: min(920px, calc(100% - 32px));
    z-index: 99999;
    background: linear-gradient(180deg, rgba(28, 20, 10, .98), rgba(16, 11, 5, .99));
    border: 1px solid var(--gold);
    box-shadow: 0 12px 36px rgba(0, 0, 0, .75), 0 0 0 1px rgba(201, 169, 97, .3);
    border-radius: var(--radius-btn);
    padding: 16px 22px;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease;
    backdrop-filter: blur(8px);
}

.rc-cookie-banner.rc-cookie-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.rc-cookie-content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.rc-cookie-icon-wrap {
    width: 44px;
    height: 44px;
    background: rgba(201, 169, 97, .12);
    border: 1px solid rgba(201, 169, 97, .35);
    border-radius: var(--radius-btn-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rc-cookie-icon {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.rc-cookie-text {
    min-width: 0;
}

.rc-cookie-title {
    margin: 0 0 4px 0;
    font-family: var(--display);
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--gold-bright);
    text-transform: uppercase;
}

.rc-cookie-desc {
    margin: 0;
    font-size: .88rem;
    line-height: 1.5;
    color: #e2d4b2;
}

.rc-cookie-desc strong {
    color: #ffffff;
}

.rc-cookie-link {
    color: var(--gold-bright);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .15s ease;
}

.rc-cookie-link:hover {
    color: #ffffff;
    text-decoration: underline;
}

.rc-cookie-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.btn-cookie-accept {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 18px;
    background: linear-gradient(180deg, #2a3d18, #16220c);
    border: 1px solid #8d6f26;
    border-radius: var(--radius-btn-sm);
    color: #ffffff;
    font-family: var(--display);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .85);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 2px 5px rgba(20, 15, 8, .3);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .1s ease;
    white-space: nowrap;
}

.btn-cookie-accept:hover {
    background: linear-gradient(180deg, #35502a, #1c2b10);
    border-color: #bfa048;
    color: #ffffff;
    text-decoration: none;
}

.btn-cookie-accept:active {
    transform: translateY(1px);
}

.btn-cookie-reject {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 15px;
    background: rgba(201, 169, 97, .12);
    border: 1px solid rgba(201, 169, 97, .35);
    border-radius: var(--radius-btn-sm);
    color: #dfcdab;
    font-family: var(--display);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
    white-space: nowrap;
}

.btn-cookie-reject:hover {
    background: rgba(201, 169, 97, .24);
    border-color: var(--gold);
    color: #ffffff;
    text-decoration: none;
}

.btn-cookie-reject:active {
    transform: translateY(1px);
}

@media (max-width: 768px) {
    .rc-cookie-banner {
        bottom: 10px;
        width: calc(100% - 16px);
        flex-direction: column;
        align-items: stretch;
        padding: 14px 16px;
        gap: 14px;
    }

    .rc-cookie-content {
        align-items: flex-start;
        gap: 12px;
    }

    .rc-cookie-actions {
        width: 100%;
        justify-content: stretch;
    }

    .btn-cookie-accept,
    .btn-cookie-reject {
        flex: 1;
        text-align: center;
    }
}

/* ==========================================================================
   Donation Orders Analytics Dashboard
   ========================================================================== */
.donation-dashboard-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.donation-kpi-card {
    background: linear-gradient(180deg, rgba(255, 251, 238, .7), rgba(226, 210, 175, .5));
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 16px 18px;
    position: relative;
    box-shadow: 0 2px 5px rgba(30, 20, 8, .08);
    transition: transform .15s ease, box-shadow .15s ease;
}

.donation-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(30, 20, 8, .14);
}

.donation-kpi-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.donation-kpi-title {
    font-family: var(--display);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-soft);
}

.donation-kpi-badge {
    font-size: .7rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
}

.donation-kpi-badge-up {
    background: #d1fae5;
    color: #065f46;
}

.donation-kpi-badge-down {
    background: #fee2e2;
    color: #991b1b;
}

.donation-kpi-badge-neutral {
    background: rgba(201, 169, 97, .2);
    color: var(--wood-800);
}

.donation-kpi-val {
    font-family: var(--display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--wood-900);
    line-height: 1.15;
    margin-bottom: 4px;
}

.donation-kpi-val.highlight-green {
    color: #24581f;
}

.donation-kpi-sub {
    font-size: .78rem;
    color: var(--ink-faint);
    line-height: 1.3;
}

/* Daily Trend Bar Chart */
.donation-chart-card {
    margin-bottom: 24px;
}

.donation-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line-soft);
}

.donation-chart-container {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 180px;
    padding: 20px 10px 0;
    position: relative;
    border-bottom: 2px solid var(--rule);
}

.donation-chart-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
    position: relative;
    cursor: pointer;
}

.donation-chart-bar-wrap {
    width: 100%;
    max-width: 38px;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
}

.donation-chart-bar {
    width: 100%;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, #3d6b2f, #234418);
    border: 1px solid #1a3312;
    border-bottom: none;
    transition: height .3s ease, filter .15s ease;
    min-height: 4px;
    position: relative;
}

.donation-chart-col:hover .donation-chart-bar {
    filter: brightness(1.25);
}

.donation-chart-bar.is-peak {
    background: linear-gradient(180deg, var(--gold), #8d6f26);
    border-color: #695015;
}

.donation-chart-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(16, 11, 5, .95);
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: .72rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
    border: 1px solid var(--gold);
    text-align: center;
}

.donation-chart-col:hover .donation-chart-tooltip {
    opacity: 1;
}

.donation-chart-labels {
    display: flex;
    gap: 10px;
    margin-top: 8px;
    padding: 0 10px;
}

.donation-chart-lbl {
    flex: 1;
    text-align: center;
    font-size: .7rem;
    font-family: var(--display);
    color: var(--ink-faint);
    font-weight: 600;
}

/* Comparative Analysis Grid */
.donation-breakdown-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

@media (max-width: 860px) {
    .donation-breakdown-grid {
        grid-template-columns: 1fr;
    }
}

.donation-progress-item {
    margin-bottom: 14px;
}

.donation-progress-item:last-child {
    margin-bottom: 0;
}

.donation-progress-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
    font-size: .84rem;
}

.donation-progress-name {
    font-weight: 600;
    color: var(--wood-900);
}

.donation-progress-val {
    font-family: var(--display);
    font-weight: 700;
    color: var(--wood-900);
}

.donation-progress-track {
    width: 100%;
    height: 7px;
    background: rgba(160, 138, 94, .25);
    border-radius: 4px;
    overflow: hidden;
}

.donation-progress-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #3d6b2f, #234418);
    transition: width .4s ease;
}

.donation-progress-fill.fill-gold {
    background: linear-gradient(90deg, #d4af37, #aa820a);
}

.donation-progress-fill.fill-blue {
    background: linear-gradient(90deg, #2563eb, #1d4ed8);
}

/* Quick Filter Pills */
.filter-pills-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.filter-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: var(--radius-btn-sm);
    background: rgba(232, 220, 190, .5);
    border: 1px solid var(--rule-soft);
    color: var(--ink);
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .12s ease;
}

.filter-pill:hover {
    background: rgba(232, 220, 190, .9);
    border-color: var(--gold-dark);
    color: var(--wood-950);
    text-decoration: none;
}

.filter-pill.active {
    background: linear-gradient(180deg, #243516, #121c0b);
    border-color: #8d6f26;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.8);
    font-weight: 700;
}

/* ==========================================================================
   Insomniacs Leaderboards
   ========================================================================== */
.insomniacs-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.insomniacs-kpi-card {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-btn);
    padding: 14px 16px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.insomniacs-kpi-card.is-highlight {
    background: linear-gradient(180deg, var(--surface) 0%, rgba(212, 168, 83, 0.08) 100%);
    border-color: var(--gold-dark);
}

.insomniacs-kpi-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.insomniacs-kpi-title {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-soft);
}

.insomniacs-kpi-value {
    font-family: var(--display, serif);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.2;
}

.insomniacs-kpi-sub {
    font-size: .75rem;
    color: var(--ink-muted);
    margin-top: 4px;
}

.insomniacs-top-name {
    font-family: var(--display, serif);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--gold-dark);
}

.insomniacs-top-stats {
    font-size: .84rem;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.insomniacs-top-time {
    font-weight: 700;
    color: var(--gold-dark);
}

/* Period Pills & Filter Toolbar */
.insomniacs-filter-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.insomniacs-period-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.insomniacs-filter-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.insomniacs-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.insomniacs-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius-btn-sm);
    background: rgba(232, 220, 190, .5);
    border: 1px solid var(--rule-soft);
    color: var(--ink);
    font-size: .84rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .15s ease;
}

.insomniacs-pill:hover {
    background: rgba(232, 220, 190, .9);
    border-color: var(--gold-dark);
    color: var(--wood-950);
    text-decoration: none;
}

.insomniacs-pill.active {
    background: linear-gradient(180deg, #243516, #121c0b);
    border-color: #8d6f26;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 700;
}

/* Podium Top 3 */
.insomniacs-podium-container {
    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;
    gap: 14px;
    align-items: end;
    margin: 24px 0 16px 0;
}

@media (max-width: 640px) {
    .insomniacs-podium-container {
        grid-template-columns: 1fr;
    }
}

.podium-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-btn);
    padding: 16px 14px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
    position: relative;
    transition: transform .15s ease;
}

.podium-card:hover {
    transform: translateY(-2px);
}

.podium-card.is-champion {
    padding-top: 22px;
    padding-bottom: 20px;
    border-color: var(--gold-dark);
    background: linear-gradient(180deg, var(--surface) 0%, rgba(212, 168, 83, 0.12) 100%);
    box-shadow: 0 4px 14px rgba(212, 168, 83, .2);
}

.podium-card.podium-silver {
    border-color: rgba(168, 173, 181, .5);
}

.podium-card.podium-bronze {
    border-color: rgba(184, 122, 58, .5);
}

.podium-rank-badge {
    margin-bottom: 8px;
}

.podium-name {
    font-family: var(--display, serif);
    font-size: 1.05rem;
    font-weight: 700;
    display: block;
    margin-bottom: 2px;
}

.podium-char-info {
    font-size: .8rem;
    color: var(--ink-soft);
    margin-bottom: 6px;
}

.podium-time {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* Endurance Progress Bar in Table */
.insomniacs-bar-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.insomniacs-bar-track {
    flex: 1;
    height: 7px;
    background: rgba(0, 0, 0, .08);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.insomniacs-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #4a752c, #5f9738);
    border-radius: 4px;
    transition: width .3s ease;
}

.insomniacs-bar-fill.fill-gold {
    background: linear-gradient(90deg, #d4a853, #f5d77f);
}

.insomniacs-bar-fill.fill-silver {
    background: linear-gradient(90deg, #9ca3af, #d1d5db);
}

.insomniacs-bar-fill.fill-bronze {
    background: linear-gradient(90deg, #b87a3a, #e0a368);
}

.insomniacs-bar-pct {
    font-size: .72rem;
    font-weight: 600;
    color: var(--ink-soft);
    min-width: 38px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.insomniacs-dot-offline {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #9ca3af;
    border-radius: 50%;
    opacity: .7;
}






/* ---- Client download page (/download) --------------------------------- */
.download-card {
    padding: 24px;
    margin-bottom: 20px;
    text-align: center;
}

.download-file {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    text-align: center;
}

.download-file-meta {
    text-align: center;
}

.download-file-meta h2 {
    margin: 0;
    font-size: 1.05rem;
    letter-spacing: .02em;
    word-break: break-all;
}

.download-file-meta p {
    margin: 3px 0 0;
    font-size: .85rem;
}

/* Premium Download Button */
.download-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 13px 34px;
    margin: 6px auto 16px;
    background: radial-gradient(ellipse at 50% 0%, #2f4e22 0%, #192f13 55%, #0f1d0b 100%);
    border: 1px solid var(--gold);
    border-radius: 8px;
    box-shadow: 
        inset 0 1px 0 rgba(255, 245, 195, 0.45),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5),
        0 4px 18px rgba(15, 25, 10, 0.4),
        0 0 12px rgba(201, 169, 97, 0.25);
    color: var(--gold-bright);
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    animation: downloadBtnPulse 4s ease-in-out infinite;
}

/* Subtle border highlight */
.download-btn::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 7px;
    border: 1px solid rgba(232, 217, 160, 0.2);
    pointer-events: none;
    transition: border-color 0.3s ease;
}

/* Animated Shimmer Light Sweep */
.download-btn::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -120%;
    width: 80%;
    height: 200%;
    background: linear-gradient(
        115deg,
        transparent 20%,
        rgba(255, 255, 255, 0.08) 40%,
        rgba(255, 245, 195, 0.35) 50%,
        rgba(255, 255, 255, 0.08) 60%,
        transparent 80%
    );
    transform: rotate(22deg);
    pointer-events: none;
    animation: downloadBtnShimmer 4.5s ease-in-out infinite;
}

/* Icon container */
.download-btn-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(201, 169, 97, 0.25) 0%, rgba(201, 169, 97, 0.08) 100%);
    border: 1px solid rgba(232, 217, 160, 0.35);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2), 0 2px 5px rgba(0, 0, 0, 0.3);
    color: var(--gold-bright);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.download-btn-icon-wrap svg {
    display: block;
    width: 20px;
    height: 20px;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Typography inside the button */
.download-btn-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    line-height: 1.25;
}

.download-btn-title {
    font-family: var(--display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff4d0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 12px rgba(232, 217, 160, 0.35);
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.download-btn-sub {
    font-family: var(--sans);
    font-size: 0.76rem;
    letter-spacing: .03em;
    color: #c4b693;
    text-transform: none;
    margin-top: 2px;
    transition: color 0.3s ease;
}

/* Hover Interaction */
.download-btn:hover {
    background: radial-gradient(ellipse at 50% 0%, #3e662c 0%, #223f18 55%, #14250e 100%);
    border-color: #ffd875;
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-2.5px) scale(1.012);
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(0, 0, 0, 0.4),
        0 8px 24px rgba(18, 40, 12, 0.55),
        0 0 20px rgba(232, 217, 160, 0.5);
}

.download-btn:hover::before {
    animation: downloadBtnShimmerFast 1.2s ease-in-out;
}

.download-btn:hover::after {
    border-color: rgba(255, 235, 170, 0.55);
}

.download-btn:hover .download-btn-icon-wrap {
    background: linear-gradient(180deg, rgba(201, 169, 97, 0.45) 0%, rgba(201, 169, 97, 0.15) 100%);
    border-color: #ffe699;
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.4), 0 3px 8px rgba(0, 0, 0, 0.4), 0 0 10px rgba(232, 217, 160, 0.4);
}

.download-btn:hover .download-btn-icon-wrap svg {
    transform: translateY(2.5px);
}

.download-btn:hover .download-btn-title {
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 16px rgba(255, 230, 140, 0.65);
}

.download-btn:hover .download-btn-sub {
    color: #f5e8c6;
}

/* Active Click Interaction */
.download-btn:active {
    transform: translateY(1px) scale(0.995);
    box-shadow: 
        inset 0 2px 6px rgba(0, 0, 0, 0.6),
        0 2px 8px rgba(10, 20, 8, 0.4),
        0 0 10px rgba(201, 169, 97, 0.25);
    transition-duration: 0.1s;
}

/* Mirror variant (secondary style) */
.download-btn-mirror {
    background: radial-gradient(ellipse at 50% 0%, #363024 0%, #241f17 55%, #15120c 100%);
    animation: none;
}

.download-btn-mirror:hover {
    background: radial-gradient(ellipse at 50% 0%, #4a4232 0%, #2f291e 55%, #1a160f 100%);
}

/* Subtle Breathing Pulse Glow */
@keyframes downloadBtnPulse {
    0%, 100% {
        box-shadow: 
            inset 0 1px 0 rgba(255, 245, 195, 0.45),
            inset 0 -1px 0 rgba(0, 0, 0, 0.5),
            0 4px 18px rgba(15, 25, 10, 0.4),
            0 0 12px rgba(201, 169, 97, 0.25);
    }
    50% {
        box-shadow: 
            inset 0 1px 0 rgba(255, 245, 195, 0.6),
            inset 0 -1px 0 rgba(0, 0, 0, 0.5),
            0 6px 22px rgba(15, 25, 10, 0.45),
            0 0 20px rgba(201, 169, 97, 0.45);
    }
}

/* Periodic Elegant Light Sweep */
@keyframes downloadBtnShimmer {
    0% {
        left: -120%;
    }
    30%, 100% {
        left: 140%;
    }
}

@keyframes downloadBtnShimmerFast {
    0% {
        left: -120%;
    }
    100% {
        left: 140%;
    }
}

.download-hash {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 4px;
}

.download-hash span {
    color: var(--ink-faint);
    font-family: var(--display);
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.download-hash code {
    max-width: 100%;
    padding: 3px 7px;
    background: rgba(255, 251, 238, .6);
    border: 1px solid var(--rule-soft);
    border-radius: 3px;
    color: var(--ink-soft);
    font-size: .72rem;
    /* A 64-character hash has no spaces to break at; let it wrap anywhere
       rather than push the card into a horizontal scroll. */
    overflow-wrap: anywhere;
}

.download-hash-note {
    margin: 0 auto;
    max-width: 440px;
    font-size: .78rem;
}

.download-about {
    padding: 22px 24px;
    margin-bottom: 20px;
}

.download-about h2 {
    margin: 0 0 10px;
}

.download-about h3 {
    margin: 20px 0 8px;
    font-size: 1.02rem;
}

.download-about p {
    margin: 0 0 12px;
    line-height: 1.65;
}

.download-steps {
    margin: 0;
    padding-left: 20px;
    line-height: 1.7;
}

.download-note {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--rule-soft);
    font-size: .82rem;
}

.download-older {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.download-older li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 7px 1px;
    border-bottom: 1px solid var(--rule-soft);
    font-size: .88rem;
}

.download-older li:last-child {
    border-bottom: 0;
}

@media (max-width: 560px) {
    .download-file {
        flex-direction: column;
        text-align: center;
    }

    .download-btn {
        display: flex;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 12px 18px;
        gap: 12px;
    }

    .download-btn-title {
        font-size: .95rem;
    }

    .download-btn-sub {
        font-size: .72rem;
    }
}

/* Cam route map: the automap of the area with the recorded route over it.
   The picture is one pixel per tile, scaled up without smoothing; the SVG on
   top shares its tile grid, so the route lines up with the tiles at any size. */
.cam-route-map {
    position: relative;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    border: 1px solid var(--gold-dark);
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(236, 212, 139, .18), 0 2px 6px rgba(30, 20, 8, .3);
}

.cam-route-map img,
.cam-route-map svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.cam-route-map img {
    max-width: none;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.cam-route-casing,
.cam-route-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.cam-route-casing {
    stroke: rgba(13, 9, 4, .85);
    stroke-width: 6px;
}

.cam-route-line {
    stroke: var(--gold-bright);
    stroke-width: 3px;
}

.cam-route-marker > * {
    stroke: #0d0904;
    stroke-width: 1.5px;
    vector-effect: non-scaling-stroke;
}

.cam-route-start > * { fill: #4caf50; }
.cam-route-end > * { fill: #d23c2f; }
.cam-route-up > *,
.cam-route-down > * { fill: #5aa0ff; }
.cam-route-teleport > *,
.cam-route-teleport-out > *,
.cam-route-floor-in > * { fill: #c27bff; }

.cam-route-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 12px 0 0;
    padding: 0;
    border: 0;
    color: var(--ink-soft);
    font-size: .92rem;
}

.cam-route-legend legend {
    flex-basis: 100%;
    margin-bottom: 4px;
    padding: 0;
    color: var(--ink);
    font-family: var(--display);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.cam-route-legend label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}

.cam-route-legend input {
    margin: 0;
    accent-color: var(--gold-dark);
}

.cam-route-legend input:focus-visible {
    outline: 2px solid var(--gold-dark);
    outline-offset: 2px;
}

/* Filters: the card carries one class per hidden layer. */
.cam-route-hide-path .cam-route-casing,
.cam-route-hide-path .cam-route-line,
.cam-route-hide-start .cam-route-start,
.cam-route-hide-end .cam-route-end,
.cam-route-hide-stairs .cam-route-up,
.cam-route-hide-stairs .cam-route-down,
.cam-route-hide-jump .cam-route-teleport,
.cam-route-hide-jump .cam-route-teleport-out,
.cam-route-hide-jump .cam-route-floor-in {
    display: none;
}

.cam-route-key {
    display: inline-block;
    width: 11px;
    height: 11px;
    border: 1.5px solid #0d0904;
}

.cam-route-key-start { background: #4caf50; border-radius: 50%; }
.cam-route-key-end { background: #d23c2f; border-radius: 50%; }
.cam-route-key-floor { background: #5aa0ff; clip-path: polygon(50% 0, 100% 100%, 0 100%); border: 0; }
.cam-route-key-jump { background: #c27bff; transform: rotate(45deg); width: 9px; height: 9px; }
.cam-route-key-path { width: 18px; height: 5px; background: var(--gold-bright); border: 1px solid #0d0904; border-radius: 3px; }

/* Creature portraits (monsters killed during a cam, bazaar tasks): each
   drawn at its real size (32 or 64 px) and centred in the same frame, so a
   rat stays smaller than a dragon; the name gets its own column that may
   shrink and wrap. */
.cam-kill-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cam-kill-grid li {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 8px 12px 8px 8px;
    background: rgba(232, 220, 190, .55);
    border: 1px solid var(--rule-soft);
    border-radius: 4px;
}

.creature-portrait {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    background: rgba(42, 28, 12, .12);
    border: 1px solid rgba(141, 111, 38, .35);
    border-radius: 3px;
}

.creature-portrait-text {
    flex: 1;
    min-width: 0;
    line-height: 1.25;
}

.creature-portrait-text strong {
    display: block;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.creature-portrait-text .muted {
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

/* Loot collected during a cam: one row per item, icon, name and amount. */
.cam-loot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cam-loot-grid li {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 6px 10px;
    background: rgba(232, 220, 190, .55);
    border: 1px solid var(--rule-soft);
    border-radius: 4px;
}

.cam-loot-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(42, 28, 12, .12);
    border: 1px solid rgba(141, 111, 38, .35);
    border-radius: 3px;
}

.cam-loot-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cam-loot-grid .cam-loot-name {
    display: block;
}

/* Bazaar sales history: the three headline figures of the summary. */
.bazaar-history-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}

.bazaar-history-stats > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    background: rgba(232, 220, 190, .55);
    border: 1px solid var(--rule-soft);
    border-radius: 4px;
}

.bazaar-history-stats strong {
    color: var(--ink);
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
}

/* Live Casters: most watched casters of the week. Each row is rank, outfit,
   who, and four labelled figures in fixed tracks, so the figures line up from
   one row to the next; on a phone the figures drop below the name. */
.cast-top-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cast-top-list li {
    display: grid;
    grid-template-columns: 1.6em 68px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: rgba(232, 220, 190, .55);
    border: 1px solid var(--rule-soft);
    border-radius: 4px;
}

.cast-top-rank {
    color: var(--ink-soft);
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.cast-top-who .muted {
    display: block;
    font-size: 11px;
}

.cast-top-who .muted strong {
    display: inline;
    color: var(--ink);
    font-weight: 600;
}

.cast-top-figures {
    display: grid;
    grid-template-columns: repeat(4, 92px);
    margin: 0;
}

.cast-top-figures > div {
    padding: 2px 10px;
    border-left: 1px solid var(--rule-soft);
    text-align: center;
}

.cast-top-figures dt {
    color: var(--ink-soft);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.cast-top-figures dd {
    margin: 2px 0 0;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cast-top-figures .is-key dd {
    color: var(--accent-dark);
    font-weight: 700;
}

@media (max-width: 720px) {
    .cast-top-list li {
        grid-template-columns: 1.6em 68px minmax(0, 1fr);
    }

    .cast-top-figures {
        grid-column: 1 / -1;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .cast-top-figures > div:first-child {
        border-left: 0;
    }
}


/* Menu ornaments: removed on 12/10/2026 at the user's request (the side
   panels and the top bar keep only their gold frame). Formerly: gold caps on
   the four outer corners of every side panel, and a small gem on the line under each panel title and under the top
   bar, in the same golds as the frames. SVG backgrounds only, so they cost no
   requests and never take a click. */
/* The panel does not clip its overflow (it did while corner ornaments sat
   outside it); its title bar and body round their own corners, grain included. */
.sidebar-box {
    overflow: visible;
}

.sidebar-box h2 {
    border-radius: 11px 11px 0 0;
}

.sidebar-box.is-collapsed h2 {
    border-radius: 11px;
}

.sidebar-box > ul:last-child,
.sidebar-box > .sidebar-box-body:last-child {
    border-radius: 0 0 11px 11px;
}

.sidebar-box h2::before,
.sidebar-box ul::before,
.sidebar-box-body::before {
    border-radius: inherit;
}



.sidebar-box h2 {
    z-index: 1;
    overflow: visible;
}

/* Card ornaments (10/2026): the menus' corner filigree and title gem, in the
   dark golds that read on parchment. The corners are background layers of the
   card itself, not a pseudo-element: they stay put while a wide table scrolls
   inside the card, sit under the content and never take a click. A card that
   sets its own `background` inline simply goes without them. */
.card {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg transform='translate(0 0)'%3E%3Cpath d='M1.5 13V7A5.5 5.5 0 0 1 7 1.5h6' fill='none' stroke='%238d6f26' stroke-width='1.1' stroke-linecap='round'/%3E%3Cpath d='M4.3 9.5V8A3.7 3.7 0 0 1 8 4.3h1.5' fill='none' stroke='%23a5741a' stroke-opacity='.6' stroke-width='.9' stroke-linecap='round'/%3E%3Ccircle cx='13.6' cy='1.5' r='1' fill='%23a5741a'/%3E%3Ccircle cx='1.5' cy='13.6' r='1' fill='%23a5741a'/%3E%3Cpath d='M4.4 4.4l1.3 1.3' stroke='%23a5741a' stroke-width='1.1' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg transform='matrix(-1 0 0 1 16 0)'%3E%3Cpath d='M1.5 13V7A5.5 5.5 0 0 1 7 1.5h6' fill='none' stroke='%238d6f26' stroke-width='1.1' stroke-linecap='round'/%3E%3Cpath d='M4.3 9.5V8A3.7 3.7 0 0 1 8 4.3h1.5' fill='none' stroke='%23a5741a' stroke-opacity='.6' stroke-width='.9' stroke-linecap='round'/%3E%3Ccircle cx='13.6' cy='1.5' r='1' fill='%23a5741a'/%3E%3Ccircle cx='1.5' cy='13.6' r='1' fill='%23a5741a'/%3E%3Cpath d='M4.4 4.4l1.3 1.3' stroke='%23a5741a' stroke-width='1.1' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg transform='matrix(1 0 0 -1 0 16)'%3E%3Cpath d='M1.5 13V7A5.5 5.5 0 0 1 7 1.5h6' fill='none' stroke='%238d6f26' stroke-width='1.1' stroke-linecap='round'/%3E%3Cpath d='M4.3 9.5V8A3.7 3.7 0 0 1 8 4.3h1.5' fill='none' stroke='%23a5741a' stroke-opacity='.6' stroke-width='.9' stroke-linecap='round'/%3E%3Ccircle cx='13.6' cy='1.5' r='1' fill='%23a5741a'/%3E%3Ccircle cx='1.5' cy='13.6' r='1' fill='%23a5741a'/%3E%3Cpath d='M4.4 4.4l1.3 1.3' stroke='%23a5741a' stroke-width='1.1' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg transform='matrix(-1 0 0 -1 16 16)'%3E%3Cpath d='M1.5 13V7A5.5 5.5 0 0 1 7 1.5h6' fill='none' stroke='%238d6f26' stroke-width='1.1' stroke-linecap='round'/%3E%3Cpath d='M4.3 9.5V8A3.7 3.7 0 0 1 8 4.3h1.5' fill='none' stroke='%23a5741a' stroke-opacity='.6' stroke-width='.9' stroke-linecap='round'/%3E%3Ccircle cx='13.6' cy='1.5' r='1' fill='%23a5741a'/%3E%3Ccircle cx='1.5' cy='13.6' r='1' fill='%23a5741a'/%3E%3Cpath d='M4.4 4.4l1.3 1.3' stroke='%23a5741a' stroke-width='1.1' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
    background-position: left 4px top 4px, right 4px top 4px, left 4px bottom 4px, right 4px bottom 4px;
    background-size: 16px 16px;
    background-repeat: no-repeat;
}

.card-heading {
    position: relative;
}

.card-heading::after {
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 72px;
    height: 9px;
    content: "";
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='9' viewBox='0 0 72 9'%3E%3Cdefs%3E%3ClinearGradient id='l' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%238d6f26' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%238d6f26'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='1' x2='0'%3E%3Cstop offset='0' stop-color='%238d6f26' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%238d6f26'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 4.5H28.0' stroke='url(%23l)' stroke-width='1'/%3E%3Cpath d='M44.0 4.5H72' stroke='url(%23r)' stroke-width='1'/%3E%3Ccircle cx='30.5' cy='4.5' r='1' fill='%23a5741a'/%3E%3Ccircle cx='41.5' cy='4.5' r='1' fill='%23a5741a'/%3E%3Cpath d='M36.0 0.5L40.0 4.5L36.0 8.5L32.0 4.5Z' fill='%23efe4c6' stroke='%238d6f26' stroke-width='1'/%3E%3Ccircle cx='36.0' cy='4.5' r='1' fill='%23a5741a'/%3E%3C/svg%3E") center / 72px 9px no-repeat;
    transform: translateX(-50%);
    pointer-events: none;
}


/* A dark card (the bazaar's character preview): the corners in the menus'
   light gold, over its own night-blue gradient. */
.card.card-dark {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg transform='translate(0 0)'%3E%3Cpath d='M1.5 13V7A5.5 5.5 0 0 1 7 1.5h6' fill='none' stroke='%23c9a961' stroke-width='1.1' stroke-linecap='round'/%3E%3Cpath d='M4.3 9.5V8A3.7 3.7 0 0 1 8 4.3h1.5' fill='none' stroke='%23e8d9a0' stroke-opacity='.55' stroke-width='.9' stroke-linecap='round'/%3E%3Ccircle cx='13.6' cy='1.5' r='1' fill='%23e8d9a0'/%3E%3Ccircle cx='1.5' cy='13.6' r='1' fill='%23e8d9a0'/%3E%3Cpath d='M4.4 4.4l1.3 1.3' stroke='%23e8d9a0' stroke-width='1.1' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg transform='matrix(-1 0 0 1 16 0)'%3E%3Cpath d='M1.5 13V7A5.5 5.5 0 0 1 7 1.5h6' fill='none' stroke='%23c9a961' stroke-width='1.1' stroke-linecap='round'/%3E%3Cpath d='M4.3 9.5V8A3.7 3.7 0 0 1 8 4.3h1.5' fill='none' stroke='%23e8d9a0' stroke-opacity='.55' stroke-width='.9' stroke-linecap='round'/%3E%3Ccircle cx='13.6' cy='1.5' r='1' fill='%23e8d9a0'/%3E%3Ccircle cx='1.5' cy='13.6' r='1' fill='%23e8d9a0'/%3E%3Cpath d='M4.4 4.4l1.3 1.3' stroke='%23e8d9a0' stroke-width='1.1' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg transform='matrix(1 0 0 -1 0 16)'%3E%3Cpath d='M1.5 13V7A5.5 5.5 0 0 1 7 1.5h6' fill='none' stroke='%23c9a961' stroke-width='1.1' stroke-linecap='round'/%3E%3Cpath d='M4.3 9.5V8A3.7 3.7 0 0 1 8 4.3h1.5' fill='none' stroke='%23e8d9a0' stroke-opacity='.55' stroke-width='.9' stroke-linecap='round'/%3E%3Ccircle cx='13.6' cy='1.5' r='1' fill='%23e8d9a0'/%3E%3Ccircle cx='1.5' cy='13.6' r='1' fill='%23e8d9a0'/%3E%3Cpath d='M4.4 4.4l1.3 1.3' stroke='%23e8d9a0' stroke-width='1.1' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg transform='matrix(-1 0 0 -1 16 16)'%3E%3Cpath d='M1.5 13V7A5.5 5.5 0 0 1 7 1.5h6' fill='none' stroke='%23c9a961' stroke-width='1.1' stroke-linecap='round'/%3E%3Cpath d='M4.3 9.5V8A3.7 3.7 0 0 1 8 4.3h1.5' fill='none' stroke='%23e8d9a0' stroke-opacity='.55' stroke-width='.9' stroke-linecap='round'/%3E%3Ccircle cx='13.6' cy='1.5' r='1' fill='%23e8d9a0'/%3E%3Ccircle cx='1.5' cy='13.6' r='1' fill='%23e8d9a0'/%3E%3Cpath d='M4.4 4.4l1.3 1.3' stroke='%23e8d9a0' stroke-width='1.1' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(180deg, #101c2b, #09101a);
    background-position: left 4px top 4px, right 4px top 4px, left 4px bottom 4px, right 4px bottom 4px, 0 0;
    background-size: 16px 16px, 16px 16px, 16px 16px, 16px 16px, auto;
    background-repeat: no-repeat;
}


/* Button ornaments (10/2026): the corner filigree of the menus and cards, in
   miniature, on all four corners of every bronze button (it replaces the two
   plain L brackets). ::before carries the two top corners and ::after the two
   bottom ones; --btn-orn is their size, so the small buttons get smaller ones
   and the top bar's buttons still open theirs up on hover. The donate and
   download buttons keep their own effects in these pseudo-elements. */
.btn:not(.btn-donate):not(.download-btn),
.sidebar-login button:not(.field-reveal-btn),
.sidebar-button:not(.sidebar-button-donate),
.sidebar-logout button,
.nav-cta {
    --btn-orn: 9px;
}

.btn-small:not(.btn-donate):not(.download-btn) {
    --btn-orn: 7px;
}

.btn:not(.btn-donate):not(.download-btn)::before,
.sidebar-login button:not(.field-reveal-btn)::before,
.sidebar-button:not(.sidebar-button-donate)::before,
.sidebar-logout button::before,
.nav-cta::before,
.btn:not(.btn-donate):not(.download-btn)::after,
.sidebar-login button:not(.field-reveal-btn)::after,
.sidebar-button:not(.sidebar-button-donate)::after,
.sidebar-logout button::after,
.nav-cta::after {
    left: 2px;
    right: 2px;
    width: auto;
    height: var(--btn-orn);
    border: 0;
    transition: height .25s ease, background-size .25s ease;
}

.btn:not(.btn-donate):not(.download-btn)::before,
.sidebar-login button:not(.field-reveal-btn)::before,
.sidebar-button:not(.sidebar-button-donate)::before,
.sidebar-logout button::before,
.nav-cta::before {
    top: 2px;
    bottom: auto;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cg transform='translate(0 0)'%3E%3Cpath d='M1 8V4.2A3.2 3.2 0 0 1 4.2 1H8' fill='none' stroke='%23ecd9a0' stroke-opacity='.85' stroke-width='1' stroke-linecap='round'/%3E%3Ccircle cx='8.6' cy='1' r='.8' fill='%23fbeec2'/%3E%3Ccircle cx='1' cy='8.6' r='.8' fill='%23fbeec2'/%3E%3Ccircle cx='3.4' cy='3.4' r='.7' fill='%23fbeec2'/%3E%3C/g%3E%3C/svg%3E") left top / var(--btn-orn) var(--btn-orn) no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cg transform='matrix(-1 0 0 1 10 0)'%3E%3Cpath d='M1 8V4.2A3.2 3.2 0 0 1 4.2 1H8' fill='none' stroke='%23ecd9a0' stroke-opacity='.85' stroke-width='1' stroke-linecap='round'/%3E%3Ccircle cx='8.6' cy='1' r='.8' fill='%23fbeec2'/%3E%3Ccircle cx='1' cy='8.6' r='.8' fill='%23fbeec2'/%3E%3Ccircle cx='3.4' cy='3.4' r='.7' fill='%23fbeec2'/%3E%3C/g%3E%3C/svg%3E") right top / var(--btn-orn) var(--btn-orn) no-repeat;
}

.btn:not(.btn-donate):not(.download-btn)::after,
.sidebar-login button:not(.field-reveal-btn)::after,
.sidebar-button:not(.sidebar-button-donate)::after,
.sidebar-logout button::after,
.nav-cta::after {
    top: auto;
    bottom: 2px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cg transform='matrix(1 0 0 -1 0 10)'%3E%3Cpath d='M1 8V4.2A3.2 3.2 0 0 1 4.2 1H8' fill='none' stroke='%23ecd9a0' stroke-opacity='.85' stroke-width='1' stroke-linecap='round'/%3E%3Ccircle cx='8.6' cy='1' r='.8' fill='%23fbeec2'/%3E%3Ccircle cx='1' cy='8.6' r='.8' fill='%23fbeec2'/%3E%3Ccircle cx='3.4' cy='3.4' r='.7' fill='%23fbeec2'/%3E%3C/g%3E%3C/svg%3E") left bottom / var(--btn-orn) var(--btn-orn) no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cg transform='matrix(-1 0 0 -1 10 10)'%3E%3Cpath d='M1 8V4.2A3.2 3.2 0 0 1 4.2 1H8' fill='none' stroke='%23ecd9a0' stroke-opacity='.85' stroke-width='1' stroke-linecap='round'/%3E%3Ccircle cx='8.6' cy='1' r='.8' fill='%23fbeec2'/%3E%3Ccircle cx='1' cy='8.6' r='.8' fill='%23fbeec2'/%3E%3Ccircle cx='3.4' cy='3.4' r='.7' fill='%23fbeec2'/%3E%3C/g%3E%3C/svg%3E") right bottom / var(--btn-orn) var(--btn-orn) no-repeat;
}

/* The pale button takes them in ink, as it did its brackets. */
.btn-secondary:not(.btn-donate):not(.download-btn)::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cg transform='translate(0 0)'%3E%3Cpath d='M1 8V4.2A3.2 3.2 0 0 1 4.2 1H8' fill='none' stroke='%235a462a' stroke-opacity='.6' stroke-width='1' stroke-linecap='round'/%3E%3Ccircle cx='8.6' cy='1' r='.8' fill='%238d6f26'/%3E%3Ccircle cx='1' cy='8.6' r='.8' fill='%238d6f26'/%3E%3Ccircle cx='3.4' cy='3.4' r='.7' fill='%238d6f26'/%3E%3C/g%3E%3C/svg%3E") left top / var(--btn-orn) var(--btn-orn) no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cg transform='matrix(-1 0 0 1 10 0)'%3E%3Cpath d='M1 8V4.2A3.2 3.2 0 0 1 4.2 1H8' fill='none' stroke='%235a462a' stroke-opacity='.6' stroke-width='1' stroke-linecap='round'/%3E%3Ccircle cx='8.6' cy='1' r='.8' fill='%238d6f26'/%3E%3Ccircle cx='1' cy='8.6' r='.8' fill='%238d6f26'/%3E%3Ccircle cx='3.4' cy='3.4' r='.7' fill='%238d6f26'/%3E%3C/g%3E%3C/svg%3E") right top / var(--btn-orn) var(--btn-orn) no-repeat;
}

.btn-secondary:not(.btn-donate):not(.download-btn)::after {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cg transform='matrix(1 0 0 -1 0 10)'%3E%3Cpath d='M1 8V4.2A3.2 3.2 0 0 1 4.2 1H8' fill='none' stroke='%235a462a' stroke-opacity='.6' stroke-width='1' stroke-linecap='round'/%3E%3Ccircle cx='8.6' cy='1' r='.8' fill='%238d6f26'/%3E%3Ccircle cx='1' cy='8.6' r='.8' fill='%238d6f26'/%3E%3Ccircle cx='3.4' cy='3.4' r='.7' fill='%238d6f26'/%3E%3C/g%3E%3C/svg%3E") left bottom / var(--btn-orn) var(--btn-orn) no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cg transform='matrix(-1 0 0 -1 10 10)'%3E%3Cpath d='M1 8V4.2A3.2 3.2 0 0 1 4.2 1H8' fill='none' stroke='%235a462a' stroke-opacity='.6' stroke-width='1' stroke-linecap='round'/%3E%3Ccircle cx='8.6' cy='1' r='.8' fill='%238d6f26'/%3E%3Ccircle cx='1' cy='8.6' r='.8' fill='%238d6f26'/%3E%3Ccircle cx='3.4' cy='3.4' r='.7' fill='%238d6f26'/%3E%3C/g%3E%3C/svg%3E") right bottom / var(--btn-orn) var(--btn-orn) no-repeat;
}

.nav-cta:hover::before,
.nav-cta:hover::after,
.nav-cta:focus-visible::before,
.nav-cta:focus-visible::after {
    width: auto;
    --btn-orn: 12px;
}

.nav-cta:hover,
.nav-cta:focus-visible {
    --btn-orn: 12px;
}

@media (prefers-reduced-motion: reduce) {
    .nav-cta::before,
    .nav-cta::after {
        transition: none;
    }
}


/* Powergamers / Insomniacs podium: the character's outfit above the name. */
.podium-outfit {
    margin: 4px auto 8px;
}

/* ===========================================================================
   Button style B, "gold outline" (12/10/2026, chosen from /button-preview.html):
   dark glass inside a thin double gold frame, filling with gold on hover. It
   replaces the charcoal plate and its corner filigree on every site button --
   .btn and the side-menu buttons (log in, create account, manage account, my
   tickets, settings, log out) and the cookie banner. Not here: the donate and
   download buttons and the top bar's buttons, which keep their own effects.
   =========================================================================== */
.btn:not(.btn-donate):not(.download-btn),
.sidebar-login button:not(.field-reveal-btn),
.sidebar-button:not(.sidebar-button-donate),
.sidebar-logout button,
.btn-cookie-accept,
.btn-cookie-reject {
    background: rgba(12, 12, 14, .55);
    border: 1px solid #c9a961;
    border-radius: 2px;
    box-shadow:
        inset 0 0 0 2px rgba(12, 12, 14, .9),
        inset 0 0 0 3px rgba(201, 169, 97, .45);
    color: #ecd9a0;
    text-shadow: none;
    transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}

.btn:not(.btn-donate):not(.download-btn):hover,
.btn:not(.btn-donate):not(.download-btn):focus-visible,
.sidebar-login button:not(.field-reveal-btn):hover,
.sidebar-login button:not(.field-reveal-btn):focus-visible,
.sidebar-button:not(.sidebar-button-donate):hover,
.sidebar-button:not(.sidebar-button-donate):focus-visible,
.sidebar-logout button:hover,
.sidebar-logout button:focus-visible,
.btn-cookie-accept:hover,
.btn-cookie-reject:hover {
    background: #c9a961;
    border-color: #e8d9a0;
    box-shadow:
        inset 0 0 0 2px #c9a961,
        inset 0 0 0 3px rgba(23, 18, 10, .5),
        0 0 12px rgba(232, 217, 160, .35);
    color: #17120a;
    text-decoration: none;
}

.btn:not(.btn-donate):not(.download-btn):active,
.sidebar-login button:not(.field-reveal-btn):active,
.sidebar-button:not(.sidebar-button-donate):active,
.sidebar-logout button:active {
    transform: translateY(1px);
}

/* The frame is the ornament now: no corner filigree inside these. */
.btn:not(.btn-donate):not(.download-btn)::before,
.btn:not(.btn-donate):not(.download-btn)::after,
.sidebar-login button:not(.field-reveal-btn)::before,
.sidebar-login button:not(.field-reveal-btn)::after,
.sidebar-button:not(.sidebar-button-donate)::before,
.sidebar-button:not(.sidebar-button-donate)::after,
.sidebar-logout button::before,
.sidebar-logout button::after {
    display: none;
}

/* On parchment, the pale button: the same double frame in ink. */
.btn.btn-secondary:not(.btn-donate):not(.download-btn),
.btn.btn-ghost-small:not(.btn-donate):not(.download-btn) {
    background: transparent;
    border-color: #5a462a;
    box-shadow:
        inset 0 0 0 2px rgba(232, 220, 190, .9),
        inset 0 0 0 3px rgba(90, 70, 42, .4);
    color: #3d2c0f;
}

.btn.btn-secondary:not(.btn-donate):not(.download-btn):hover,
.btn.btn-secondary:not(.btn-donate):not(.download-btn):focus-visible,
.btn.btn-ghost-small:not(.btn-donate):not(.download-btn):hover {
    background: #5a462a;
    border-color: #5a462a;
    box-shadow:
        inset 0 0 0 2px #5a462a,
        inset 0 0 0 3px rgba(244, 232, 203, .35);
    color: #f4e8cb;
}

/* Destructive actions: the same frame in red. */
.btn.btn-danger:not(.btn-donate):not(.download-btn) {
    border-color: #c0503c;
    box-shadow:
        inset 0 0 0 2px rgba(12, 12, 14, .9),
        inset 0 0 0 3px rgba(192, 80, 60, .45);
    color: #f2b8aa;
}

.btn.btn-danger:not(.btn-donate):not(.download-btn):hover,
.btn.btn-danger:not(.btn-donate):not(.download-btn):focus-visible {
    background: #a63a28;
    border-color: #e07a62;
    box-shadow:
        inset 0 0 0 2px #a63a28,
        inset 0 0 0 3px rgba(255, 220, 210, .35),
        0 0 12px rgba(224, 122, 98, .35);
    color: #fff3ee;
}

/* The cookie banner's second choice is the quieter one. */
.btn-cookie-reject {
    border-color: rgba(201, 169, 97, .6);
    color: #dfcdab;
}

.btn:disabled,
.btn[aria-disabled="true"],
.sidebar-login button:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .btn,
    .sidebar-login button,
    .sidebar-button,
    .sidebar-logout button {
        transition: none;
    }
}


/* Community -> Monsters: one card per monster, its picture and figures on
   top and the loot as a grid of item icons (amount in the corner, the way the
   client draws a stack; the name is the tooltip). */
.monster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.monster-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 14px 16px 12px;
    overflow: visible;
}

.monster-card-who {
    flex: 1;
    min-width: 0;
}

.monster-name {
    margin: 0;
    color: var(--ink);
    font-family: var(--display);
    font-size: 15px;
    letter-spacing: .03em;
    overflow-wrap: anywhere;
}

.monster-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.monster-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 8px 0 0;
}

.monster-stats > div {
    padding: 3px 8px;
    background: rgba(42, 28, 12, .08);
    border: 1px solid var(--rule-soft);
    border-radius: 3px;
}

.monster-stats dt {
    color: var(--ink-soft);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.monster-stats dd {
    margin: 1px 0 0;
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.monster-section {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--rule-soft);
}

.monster-section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 8px;
    color: var(--ink-soft);
    font-family: var(--serif);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.monster-section-count {
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.monster-summons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.monster-summons li {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.monster-loot-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.monster-loot-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: rgba(42, 28, 12, .12);
    border: 1px solid rgba(141, 111, 38, .35);
    border-radius: 3px;
}

.monster-loot-amount {
    position: absolute;
    right: 2px;
    bottom: 0;
    color: #f4f0e4;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
    font-variant-numeric: tabular-nums;
}


/* Community -> NPC Traders. One card per trader: who and where on the left
   (picture, place, the automap around its home with a marker), its price
   lists on the right -- side by side, each scrolling on its own. */
.npc-notice {
    margin: 0 0 18px;
    padding: 12px 16px 12px 18px;
    background: rgba(201, 169, 97, .16);
    border: 1px solid var(--gold-dark);
    border-left-width: 4px;
    border-radius: 3px;
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.5;
}

.npc-notice > strong:first-child {
    margin-right: 4px;
    color: #6b4f12;
    font-family: var(--display);
    font-size: .82rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.npc-stats {
    margin-bottom: 18px;
}

.npc-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 28px;
}

.npc-card {
    display: grid;
    grid-template-columns: 252px minmax(0, 1fr);
    gap: 18px;
    margin: 0;
    padding: 16px 18px;
    overflow: visible;
}

.npc-card-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.npc-card-who {
    display: flex;
    align-items: center;
    gap: 12px;
}

.npc-name {
    margin: 0 0 2px;
    color: var(--ink);
    font-family: var(--display);
    font-size: 16px;
    letter-spacing: .03em;
}

.npc-map {
    margin: 0;
}

/* The automap is one pixel per tile, shown at 4x. */
.npc-map-frame {
    position: relative;
    width: calc(56px * 4);
    height: calc(40px * 4);
    overflow: hidden;
    background: #000;
    border: 1px solid var(--gold-dark);
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), 0 2px 5px rgba(20, 12, 4, .3);
}

.npc-map-frame {
    background-color: #000;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    image-rendering: pixelated;
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

/* The NPC's tile: tile 28,20 of the 56x40 picture. */
.npc-map-marker {
    position: absolute;
    left: calc(28 * 4px - 5px);
    top: calc(20 * 4px - 5px);
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .7), 0 0 8px rgba(255, 255, 255, .8);
}

.npc-map-marker::after {
    position: absolute;
    inset: 3px;
    content: "";
    background: #e63b2e;
    border-radius: 50%;
}

@media (prefers-reduced-motion: no-preference) {
    .npc-map-marker {
        animation: npcMarkerPulse 1.8s ease-in-out infinite;
    }
}

@keyframes npcMarkerPulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(0, 0, 0, .7), 0 0 4px rgba(255, 255, 255, .5); }
    50%      { box-shadow: 0 0 0 2px rgba(0, 0, 0, .7), 0 0 12px rgba(255, 255, 255, 1); }
}

/* The NPC itself standing on its tile of the map (the round marker is only
   the fallback for an NPC without an outfit picture). */
.npc-map-figure {
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, .95)) drop-shadow(0 2px 2px rgba(0, 0, 0, .8));
    pointer-events: none;
}

.npc-map figcaption { /* unused since 12/10/2026: the page shows no position or floor */
    margin-top: 5px;
    color: var(--ink-soft);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.npc-trades {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    min-width: 0;
}

.npc-trades.is-single {
    grid-template-columns: minmax(0, 1fr);
}

.npc-trade {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: rgba(255, 250, 232, .25);
    border: 1px solid var(--rule-soft);
    border-radius: 3px;
}

.npc-trade-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0;
    padding: 7px 10px;
    background:
        linear-gradient(180deg, #2a2d33, #1b1d21);
    border-bottom: 1px solid var(--gold-dark);
    border-radius: 3px 3px 0 0;
    color: #f4e8cb;
    font-family: var(--display);
    font-size: .74rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.npc-trade-sells .npc-trade-title { box-shadow: inset 3px 0 0 #6fa34a; }
.npc-trade-buys .npc-trade-title  { box-shadow: inset 3px 0 0 #d0a24a; }

.npc-trade-count {
    color: rgba(236, 212, 139, .72);
    font-family: var(--serif);
    font-size: .8rem;
    letter-spacing: 0;
    text-transform: none;
}

.npc-trade-empty {
    margin: 0;
    padding: 10px;
    font-size: 12px;
}

.npc-items {
    max-height: 296px;
    margin: 0;
    padding: 4px 0;
    overflow-y: auto;
    list-style: none;
}

.npc-items li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 2px 10px;
}

.npc-items li:nth-child(even) {
    background: rgba(93, 71, 42, .07);
}

.npc-items li.is-match {
    background: rgba(201, 169, 97, .35);
    box-shadow: inset 3px 0 0 var(--gold-dark);
}

.npc-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
}

.npc-item-name {
    overflow: hidden;
    color: var(--ink);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.npc-item-price {
    color: var(--gold-dark);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
    .npc-card {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 620px) {
    .npc-trades {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* ===========================================================================
   Admin donations: tabs, dashboard and coupons (12/10/2026)
   =========================================================================== */
.admin-donation-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0 0 18px;
    padding: 4px;
    background: rgba(42, 28, 12, .1);
    border: 1px solid var(--rule-soft);
    border-radius: 4px;
}

.admin-donation-nav a {
    padding: 7px 16px;
    border-radius: 3px;
    color: var(--ink);
    font-family: var(--display);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
}

.admin-donation-nav a:hover {
    background: rgba(201, 169, 97, .25);
}

.admin-donation-nav a.is-active {
    background: linear-gradient(180deg, #2a2d33, #1b1d21);
    box-shadow: inset 0 0 0 1px var(--gold-dark);
    color: #f4e8cb;
}

.dash-periods {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* The "right now" strip above the period figures. */
.dash-live {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1px;
    margin-bottom: 18px;
    overflow: hidden;
    background: var(--rule-soft);
    border: 1px solid var(--rule-soft);
    border-radius: 4px;
}

.dash-live > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    background: rgba(255, 250, 232, .55);
}

.dash-live span {
    color: var(--ink-soft);
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.dash-live strong {
    color: var(--ink);
    font-family: var(--display);
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
}

.dash-live em {
    color: var(--ink-faint);
    font-size: .78rem;
    font-style: normal;
}

.dash-live .is-alert {
    background: rgba(230, 126, 34, .14);
}

.dash-live .is-alert strong {
    color: #a0480b;
}

.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 0 18px;
}

.dash-grid > .card {
    min-width: 0;
}

.dash-title {
    margin: 0 0 12px;
    font-size: 1rem;
}

.dash-title .muted {
    font-family: var(--serif);
    font-size: .8rem;
    font-weight: normal;
}

/* Many bars (up to 90 days): thinner and closer. */
.donation-chart-container.is-dense {
    gap: 2px;
    padding-left: 4px;
    padding-right: 4px;
}

.donation-chart-labels.is-dense {
    gap: 2px;
}

.donation-chart-labels.is-dense .donation-chart-lbl {
    overflow: visible;
    white-space: nowrap;
}

/* Revenue by hour of the day: 24 slim bars. */
.dash-hours {
    display: grid;
    grid-template-columns: repeat(24, minmax(0, 1fr));
    align-items: end;
    gap: 3px;
    height: 120px;
    padding-bottom: 2px;
    border-bottom: 2px solid var(--rule);
}

.dash-hour {
    display: flex;
    align-items: flex-end;
    height: 100%;
}

.dash-hour span {
    display: block;
    width: 100%;
    background: linear-gradient(180deg, #3d6b2f, #234418);
    border-radius: 2px 2px 0 0;
}

.dash-hour:hover span {
    filter: brightness(1.3);
}

.dash-hours-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    color: var(--ink-faint);
    font-size: .72rem;
}

.donation-progress-fill.dash-status-paid     { background: linear-gradient(90deg, #3d6b2f, #234418); }
.donation-progress-fill.dash-status-expired,
.donation-progress-fill.dash-status-canceled { background: linear-gradient(90deg, #9b8b6e, #7a6b51); }
.donation-progress-fill.dash-status-failed,
.donation-progress-fill.dash-status-refunded { background: linear-gradient(90deg, #a63a28, #7a1509); }
.donation-progress-fill.dash-status-pending,
.donation-progress-fill.dash-status-waiting  { background: linear-gradient(90deg, #d0a24a, #a5741a); }

.coupon-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .04em;
}

.coupon-code-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.checkbox-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    cursor: pointer;
}

/* Coupon field on the donation page. */
.donate-coupon-row {
    display: flex;
    gap: 8px;
    max-width: 380px;
}

.donate-coupon-row input {
    flex: 1;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.hint.donate-coupon-ok {
    color: #24581f;
    font-weight: 600;
}

.hint.donate-coupon-error {
    color: var(--danger, #b23);
    font-weight: 600;
}

.donate-price-was {
    color: var(--ink-faint);
    font-weight: normal;
}

.donate-coupon-badge {
    display: inline-block;
    padding: 1px 7px;
    background: rgba(36, 88, 31, .14);
    border: 1px solid rgba(36, 88, 31, .45);
    border-radius: 3px;
    color: #24581f;
    font-size: .82em;
    font-weight: 700;
    letter-spacing: .03em;
}

@media (max-width: 520px) {
    .dash-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* While the side menus take their saved open / closed state on page load,
   no open / close animation (see the script after the sidebar in layout.php). */
.sidebar.is-initialising .sidebar-box ul,
.sidebar.is-initialising .sidebar-box .sidebar-box-body {
    transition: none !important;
}

/* ==========================================================================
   Realcore Wiki Styles
   ========================================================================== */
.wiki-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
}

.wiki-badge-legendary {
    background: rgba(155, 89, 182, .25);
    color: #e08cf8;
    border: 1px solid rgba(155, 89, 182, .55);
    text-shadow: 0 0 8px rgba(155, 89, 182, .6);
}

.wiki-badge-very-hard {
    background: rgba(231, 76, 60, .25);
    color: #ff6b6b;
    border: 1px solid rgba(231, 76, 60, .55);
}

.wiki-badge-hard {
    background: rgba(230, 126, 34, .25);
    color: #ffa502;
    border: 1px solid rgba(230, 126, 34, .5);
}

.wiki-badge-medium {
    background: rgba(241, 196, 15, .2);
    color: #ffd32a;
    border: 1px solid rgba(241, 196, 15, .45);
}

.wiki-badge-easy,
.wiki-badge-standard {
    background: rgba(46, 204, 113, .2);
    color: #2ed573;
    border: 1px solid rgba(46, 204, 113, .45);
}

.wiki-featured-card {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.wiki-featured-card:hover {
    transform: translateY(-2px);
    border-color: rgba(224, 187, 107, .55) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}