@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* =====================================================================
   ESAForum SKIN · "rpgfantasy"  (CSDARK · Guildhall edition)
   Dark arcane canvas · ARCANE PURPLE + engraved GOLD accents ·
   parchment-tone body text · Cinzel display serif for every heading ·
   ornate medieval framing, soft magical glows.
   Everything scoped under [data-skin="rpgfantasy"] so it never leaks
   into other skins or the ACP.  Derived from /home/rpgfantasy.html.
   ===================================================================== */

/* ── 1. DESIGN TOKENS ───────────────────────────────────────────────── */
:root[data-skin="rpgfantasy"] {
    /* Deep violet-night canvas → arcane stone panels */
    --bg-0: #120F1A;
    --bg-1: #171322;
    --bg-2: #1C1728;
    --surface: #1C1728;
    --surface-2: #231C31;
    --surface-3: #2C2440;
    --elev: #241D33;
    --border: #2E2542;
    --border-soft: #251E36;

    /* Parchment ink on violet */
    --text: #EFE9DC;
    --text-dim: #CFC7B6;
    --text-mute: #8B8299;

    /* Arcane purple — the primary spell-light */
    --primary: #B9A2F2;
    --primary-rgb: 185, 162, 242;
    --primary-2: #CBB8F7;

    /* Engraved gold — the secondary accent */
    --accent: #C9A227;
    --accent-2: #E8C55A;
    --accent-rgb: 201, 162, 39;
    --on-accent: #231A05;

    /* Signals */
    --pink: #D98BC8;
    --green: #57D98A;      /* life / online */
    --amber: #E8C55A;
    --red: #E06666;

    --grad-primary: linear-gradient(135deg, #CBB8F7 0%, #8E6FD8 100%);
    --grad-cyan: linear-gradient(135deg, #E8C55A 0%, #C9A227 55%, #8C6F1B 100%);
    --grad-surface: linear-gradient(180deg, rgba(185,162,242,.06), rgba(185,162,242,0));

    /* Softened, slightly engraved geometry */
    --radius: 5px;
    --radius-sm: 3px;
    --radius-lg: 8px;

    --shadow: 0 18px 46px rgba(0,0,0,.62);
    --shadow-glow: 0 0 0 1px rgba(201,162,39,.28), 0 14px 38px rgba(142,111,216,.24);
    --ring: 0 0 0 3px rgba(201,162,39,.34);
    --primary-glow: rgba(185,162,242,.22);

    --font: 'Inter', system-ui, -apple-system, sans-serif;
    --serif: 'Cinzel', Georgia, 'Times New Roman', serif;
    --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

    /* extra local aliases */
    --gold: #C9A227;
    --gold-hi: #E8C55A;
    --gold-lo: #8C6F1B;
    --arc: #8E6FD8;
    --line-2: #463A63;
}

/* ── 2. CANVAS ──────────────────────────────────────────────────────── */
[data-skin="rpgfantasy"] body {
    background:
        radial-gradient(1100px 640px at 82% -8%, rgba(142,111,216,.16), transparent 62%),
        radial-gradient(900px 600px at -6% 34%, rgba(201,162,39,.06), transparent 60%),
        linear-gradient(180deg, var(--bg-1), var(--bg-0));
    /* NOTE: no 'background-attachment: fixed' — it made Chromium drop the hero
       <video> and forum banner backgrounds on repaint (hover). */
    color: var(--text);
}
[data-skin="rpgfantasy"] ::selection { background: var(--gold); color: #231A05; }
[data-skin="rpgfantasy"] ::-webkit-scrollbar-thumb { background: #352B4E; border-radius: 8px; }
[data-skin="rpgfantasy"] ::-webkit-scrollbar-thumb:hover { background: var(--arc); }
[data-skin="rpgfantasy"] a { color: var(--primary); }
[data-skin="rpgfantasy"] a:hover { color: var(--gold-hi); }
[data-skin="rpgfantasy"] :focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; border-radius: 2px; }

/* Engraved Cinzel serif for every heading + display surface */
[data-skin="rpgfantasy"] h1,
[data-skin="rpgfantasy"] h2,
[data-skin="rpgfantasy"] h3,
[data-skin="rpgfantasy"] h4 {
    font-family: var(--serif);
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--text);
}

/* ── 3. HEADER / NAV ────────────────────────────────────────────────── */
[data-skin="rpgfantasy"] .site-header {
    background: rgba(18,15,26,.94);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 0 rgba(201,162,39,.14), 0 8px 30px rgba(0,0,0,.4);
    backdrop-filter: blur(8px);
}
[data-skin="rpgfantasy"] .brand,
[data-skin="rpgfantasy"] .brand .name {
    font-family: var(--serif);
    font-weight: 900;
    letter-spacing: .1em;
    color: var(--text);
}
[data-skin="rpgfantasy"] .brand-logo {
    border-radius: var(--radius-sm);
    border: 1px solid var(--gold-lo);
    background: linear-gradient(180deg, var(--surface-3), var(--surface));
    color: var(--gold-hi);
    box-shadow: 0 0 16px -4px rgba(201,162,39,.4);
}
[data-skin="rpgfantasy"] .main-nav a {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: .1em;
    color: var(--text-dim);
    border-radius: var(--radius-sm);
    position: relative;
}
[data-skin="rpgfantasy"] .main-nav a:hover { background: var(--surface-2); color: var(--text); }
[data-skin="rpgfantasy"] .main-nav a.active { color: var(--gold-hi); background: transparent; }
[data-skin="rpgfantasy"] .main-nav a.active::after {
    content: "◆"; position: absolute; left: 50%; bottom: -1px;
    transform: translateX(-50%) scale(.62); color: var(--gold);
}
[data-skin="rpgfantasy"] .icon-btn {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-dim);
}
[data-skin="rpgfantasy"] .icon-btn:hover { color: var(--gold-hi); border-color: var(--gold-lo); background: var(--surface-2); }
[data-skin="rpgfantasy"] .search-mini {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
}
[data-skin="rpgfantasy"] .search-mini:focus-within { border-color: var(--gold); box-shadow: var(--ring); }
[data-skin="rpgfantasy"] .badge-count {
    background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo));
    color: #231A05;
    border-radius: 999px;
    font-family: var(--mono);
    font-weight: 700;
    box-shadow: 0 0 10px rgba(201,162,39,.5);
}

/* Dropdowns / header panels / user menu */
[data-skin="rpgfantasy"] .dropdown,
[data-skin="rpgfantasy"] .hdr-panel {
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
[data-skin="rpgfantasy"] .dropdown a,
[data-skin="rpgfantasy"] .dropdown button { border-radius: var(--radius-sm); }
[data-skin="rpgfantasy"] .dropdown a:hover,
[data-skin="rpgfantasy"] .dropdown button:hover { background: var(--surface-3); color: var(--gold-hi); }
[data-skin="rpgfantasy"] .hdr-panel-head { border-bottom: 1px solid var(--line-2); font-family: var(--serif); }
[data-skin="rpgfantasy"] .user-menu .trigger { border-radius: var(--radius-sm); }
[data-skin="rpgfantasy"] .user-menu .trigger:hover { background: var(--surface-2); }
[data-skin="rpgfantasy"] .mini-user .name { font-family: var(--serif); font-weight: 700; }

/* Announcement bar */
[data-skin="rpgfantasy"] .announce-bar {
    background: linear-gradient(90deg, rgba(201,162,39,.14), transparent 70%);
    border-bottom: 1px solid var(--border);
    letter-spacing: .04em;
}

/* ── 4. BUTTONS (engraved gold plates) ──────────────────────────────── */
[data-skin="rpgfantasy"] .btn {
    font-family: var(--serif);
    font-weight: 700;
    letter-spacing: .08em;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    position: relative;
}
[data-skin="rpgfantasy"] .btn-primary {
    background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo));
    color: #231A05;
    border-color: var(--gold-lo);
    box-shadow: 0 6px 18px rgba(201,162,39,.28);
}
[data-skin="rpgfantasy"] .btn-primary:hover {
    filter: brightness(1.08);
    color: #171103;
    box-shadow: 0 8px 26px rgba(201,162,39,.5);
    transform: translateY(-1px);
}
[data-skin="rpgfantasy"] .btn-ghost {
    background: linear-gradient(180deg, #2A2138, #1C1728);
    color: var(--gold-hi);
    border-color: var(--gold);
}
[data-skin="rpgfantasy"] .btn-ghost:hover {
    color: #F4DE9E;
    box-shadow: 0 0 24px -6px rgba(201,162,39,.55);
    background: linear-gradient(180deg, #322746, #201a2e);
}
[data-skin="rpgfantasy"] .btn-danger {
    background: transparent;
    color: var(--red);
    border-color: rgba(224,102,102,.5);
}
[data-skin="rpgfantasy"] .btn-danger:hover { background: rgba(224,102,102,.14); color: #fff; }

/* ── 5. CARDS / CONTAINERS ──────────────────────────────────────────── */
[data-skin="rpgfantasy"] .card,
[data-skin="rpgfantasy"] .card-pad {
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 12px 30px -20px rgba(0,0,0,.7);
}
[data-skin="rpgfantasy"] .card-head,
[data-skin="rpgfantasy"] .card__header {
    border-bottom: 1px solid var(--line-2);
    background: linear-gradient(180deg, rgba(44,36,64,.6), transparent);
}
[data-skin="rpgfantasy"] .card__title { font-family: var(--serif); letter-spacing: .04em; font-weight: 700; }
[data-skin="rpgfantasy"] .card__header::before { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
[data-skin="rpgfantasy"] .empty-state,
[data-skin="rpgfantasy"] .locked-note {
    background: var(--surface);
    border: 1px dashed var(--line-2);
    border-radius: var(--radius);
    color: var(--text-dim);
}
[data-skin="rpgfantasy"] .breadcrumbs {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .06em;
}
[data-skin="rpgfantasy"] .breadcrumbs a:hover { color: var(--gold-hi); }
[data-skin="rpgfantasy"] .pagination a,
[data-skin="rpgfantasy"] .pagination span {
    border-radius: var(--radius-sm);
    font-family: var(--mono);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-dim);
}
[data-skin="rpgfantasy"] .pagination a:hover { border-color: var(--gold); color: var(--gold-hi); }
[data-skin="rpgfantasy"] .pagination .current {
    background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo));
    color: #231A05;
    border-color: var(--gold-lo);
}

/* Alerts — left accent bar */
[data-skin="rpgfantasy"] .alert {
    border-radius: var(--radius-sm);
    border-width: 1px 1px 1px 3px;
    background: var(--surface-2);
}

/* ── 6. BOARD-INDEX HERO ────────────────────────────────────────────── */
[data-skin="rpgfantasy"] .fi-hero {
    background:
        radial-gradient(60% 70% at 50% 24%, rgba(142,111,216,.18), transparent 70%),
        radial-gradient(1200px 560px at 82% 8%, rgba(201,162,39,.10), transparent 60%),
        linear-gradient(180deg, var(--bg-2), var(--bg-1));
    border: 1px solid var(--line-2);
    border-radius: var(--radius-lg);
    box-shadow: 0 0 0 1px rgba(201,162,39,.10), 0 24px 60px rgba(0,0,0,.55);
}
[data-skin="rpgfantasy"] .fi-hero h1 {
    font-family: var(--serif);
    font-weight: 900;
    letter-spacing: .03em;
    line-height: 1.1;
    text-shadow: 0 4px 34px rgba(0,0,0,.6);
}
[data-skin="rpgfantasy"] .fi-hero h1 .grad {
    background: linear-gradient(180deg, var(--gold-hi) 20%, var(--gold) 55%, var(--gold-lo));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: 0 0 30px rgba(201,162,39,.4);
}
[data-skin="rpgfantasy"] .fi-hero p { color: var(--text-dim); text-shadow: 0 2px 10px rgba(0,0,0,.7); }
[data-skin="rpgfantasy"] .fi-eyebrow {
    border-radius: 999px;
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: .28em;
    font-size: 10px;
    font-weight: 700;
    background: rgba(201,162,39,.10);
    border: 1px solid rgba(201,162,39,.35);
    color: var(--gold-hi);
    text-shadow: 0 2px 12px rgba(0,0,0,.7);
}
[data-skin="rpgfantasy"] .fi-eyebrow-dot { background: var(--green); box-shadow: 0 0 8px var(--green); border-radius: 50%; }

/* Hero stat plaques */
[data-skin="rpgfantasy"] .fi-stat {
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, rgba(35,28,49,.82), rgba(28,23,40,.7));
    border: 1px solid var(--line-2);
    backdrop-filter: blur(6px);
}
[data-skin="rpgfantasy"] .fi-stat:hover { background: rgba(201,162,39,.10); border-color: var(--gold-lo); }
[data-skin="rpgfantasy"] .fi-stat b {
    font-family: var(--serif);
    font-weight: 900;
    background: linear-gradient(180deg, var(--gold-hi) 20%, var(--gold) 55%, var(--gold-lo));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
[data-skin="rpgfantasy"] .fi-stat span { font-family: var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--text-mute); }
[data-skin="rpgfantasy"] .fi-stat.fi-stat-online b {
    -webkit-text-fill-color: var(--green);
    color: var(--green);
    text-shadow: 0 0 16px rgba(87,217,138,.5);
}

/* ── 7. BOARD INDEX: categories + forum rows ────────────────────────── */
[data-skin="rpgfantasy"] .fi-category { background: transparent; }
[data-skin="rpgfantasy"] .fi-cat-bar {
    border-radius: var(--radius) var(--radius) 0 0;
    background: linear-gradient(180deg, var(--surface-3), var(--surface));
    border: 1px solid var(--line-2);
    border-bottom: 0;
}
[data-skin="rpgfantasy"] .fi-cat-accent { background: var(--gold); box-shadow: 0 0 10px var(--gold); }
[data-skin="rpgfantasy"] .fi-cat-title { font-family: var(--serif); letter-spacing: .05em; font-weight: 700; }
[data-skin="rpgfantasy"] .fi-cat-ico,
[data-skin="rpgfantasy"] .fi-cat-emoji {
    background: var(--surface-3);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-sm);
}
[data-skin="rpgfantasy"] .fi-cat-count {
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: 10px;
    color: var(--text-mute);
}
[data-skin="rpgfantasy"] .fi-forum-list {
    border: 1px solid var(--border);
    border-radius: 0 0 var(--radius) var(--radius);
    background: linear-gradient(180deg, var(--surface), var(--bg-2));
}
[data-skin="rpgfantasy"] .fi-row { border-bottom: 1px solid var(--border-soft); }
[data-skin="rpgfantasy"] .fi-row::before { background: var(--line-2); width: 2px; }
/* Row hover flattened to match the default theme: no background/stripe change on
   hover. Overriding the `background` shorthand here wiped per-forum banner images
   (and the repaint dropped the hero video). Only the icon animates. */
[data-skin="rpgfantasy"] .fi-icon,
[data-skin="rpgfantasy"] .fi-icon-emoji {
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    border: 1px solid var(--line-2);
}
[data-skin="rpgfantasy"] .fi-row:hover .fi-icon { border-color: var(--gold-lo); }
[data-skin="rpgfantasy"] .fi-info h3 { font-family: var(--serif); font-weight: 700; letter-spacing: .02em; }
[data-skin="rpgfantasy"] .fi-info h3 a:hover { color: var(--gold-hi); }
[data-skin="rpgfantasy"] .fi-desc { color: var(--text-dim); }
[data-skin="rpgfantasy"] .fi-sf-chip {
    border-radius: var(--radius-sm);
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .02em;
    background: var(--surface-3);
    border: 1px solid var(--line-2);
    color: var(--text-dim);
}
[data-skin="rpgfantasy"] .fi-sf-chip:hover { border-color: var(--gold); color: #231A05; background: var(--gold); }
[data-skin="rpgfantasy"] .fi-sf-dot { background: var(--arc); }
[data-skin="rpgfantasy"] .fi-sf-more { color: var(--text-mute); }
[data-skin="rpgfantasy"] .fi-stats b,
[data-skin="rpgfantasy"] .fi-stats-row b {
    font-family: var(--serif);
    font-weight: 900;
    background: linear-gradient(180deg, var(--gold-hi) 20%, var(--gold) 55%, var(--gold-lo));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
[data-skin="rpgfantasy"] .fi-stats-row span { font-family: var(--mono); text-transform: uppercase; letter-spacing: .16em; font-size: 9px; color: var(--text-mute); }
[data-skin="rpgfantasy"] .fi-last-topic b { font-weight: 700; color: var(--text-dim); }
[data-skin="rpgfantasy"] .fi-last-by,
[data-skin="rpgfantasy"] .fi-last-empty,
[data-skin="rpgfantasy"] .fi-last-meta {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-mute);
}
[data-skin="rpgfantasy"] .fi-last-ava { border-radius: 50%; border: 2px solid var(--gold-lo); }

/* Board-index resume + toolbar + discord cta */
[data-skin="rpgfantasy"] .fi-resume-card {
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
}
[data-skin="rpgfantasy"] .fi-resume-card:hover { border-color: var(--gold-lo); }
[data-skin="rpgfantasy"] .fi-resume-title { font-family: var(--serif); font-weight: 700; }
[data-skin="rpgfantasy"] .fi-toolbar-label { font-family: var(--mono); text-transform: uppercase; letter-spacing: .16em; color: var(--text-mute); }
[data-skin="rpgfantasy"] .fi-discord-cta {
    background: linear-gradient(135deg, rgba(142,111,216,.16), var(--surface));
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
}
[data-skin="rpgfantasy"] .fi-divider { border-color: var(--line-2); }

/* ── 8. SIDEBAR WIDGETS ─────────────────────────────────────────────── */
[data-skin="rpgfantasy"] .widget,
[data-skin="rpgfantasy"] .fi-widget {
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
[data-skin="rpgfantasy"] .widget-head,
[data-skin="rpgfantasy"] .fi-widget-head {
    font-family: var(--serif);
    font-weight: 700;
    letter-spacing: .06em;
    font-size: 13px;
    color: var(--text);
    border-bottom: 1px solid var(--line-2);
    background: linear-gradient(180deg, var(--surface-3), transparent);
}
[data-skin="rpgfantasy"] .fi-pill,
[data-skin="rpgfantasy"] .pill-count {
    font-family: var(--mono);
    border-radius: 999px;
    background: var(--surface-3);
    border: 1px solid var(--line-2);
    color: var(--gold-hi);
}
[data-skin="rpgfantasy"] .fi-board-stats { border: 1px solid var(--line-2); border-radius: var(--radius-sm); overflow: hidden; }
[data-skin="rpgfantasy"] .fi-bs-item { border-color: var(--line-2) !important; background: var(--surface-3); }
[data-skin="rpgfantasy"] .fi-bs-val {
    font-family: var(--serif);
    font-weight: 900;
    background: linear-gradient(180deg, var(--gold-hi) 20%, var(--gold) 55%, var(--gold-lo));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
[data-skin="rpgfantasy"] .fi-bs-val.online { -webkit-text-fill-color: var(--green); color: var(--green); }
[data-skin="rpgfantasy"] .fi-bs-label { font-family: var(--mono); text-transform: uppercase; letter-spacing: .2em; font-size: 8.5px; color: var(--text-mute); }

/* Rank rows (top members / trending / contributors) */
[data-skin="rpgfantasy"] .rank-row { border-radius: var(--radius-sm); border-top: 1px solid var(--border-soft); }
[data-skin="rpgfantasy"] .rank-row:hover { background: var(--surface-3); }
[data-skin="rpgfantasy"] .rank-row .rk {
    border-radius: var(--radius-sm);
    font-family: var(--serif);
    font-weight: 900;
    background: var(--surface-3);
    color: var(--gold-lo);
}
[data-skin="rpgfantasy"] .rank-row .rk.gold { background: linear-gradient(135deg, var(--gold-hi), var(--gold-lo)); color: #231A05; box-shadow: 0 0 12px rgba(201,162,39,.5); }
[data-skin="rpgfantasy"] .rank-row .rk.silver { background: var(--surface-3); color: var(--primary-2); }
[data-skin="rpgfantasy"] .rank-row .rk.bronze { background: var(--surface-3); color: var(--gold-lo); }
[data-skin="rpgfantasy"] .rank-row .val { font-family: var(--mono); font-weight: 600; color: var(--text-dim); }
[data-skin="rpgfantasy"] .rank-list .name { font-weight: 700; }

/* Champion block */
[data-skin="rpgfantasy"] .fi-champion {
    border-bottom: 1px solid var(--line-2) !important;
    background: rgba(201,162,39,.06);
}

/* Online strip + activity feed */
[data-skin="rpgfantasy"] .online-strip img { border-radius: 50%; border: 2px solid var(--gold-lo); }
[data-skin="rpgfantasy"] .online-dot.on,
[data-skin="rpgfantasy"] .online-dot,
[data-skin="rpgfantasy"] .unread-dot { background: var(--green); box-shadow: 0 0 8px var(--green); }
[data-skin="rpgfantasy"] .act-item .avatar { border-radius: 50% !important; }
[data-skin="rpgfantasy"] .ai-ico { border-radius: var(--radius-sm); background: var(--surface-3); border: 1px solid var(--line-2); }
[data-skin="rpgfantasy"] .ai-time { font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: var(--text-mute); }
[data-skin="rpgfantasy"] .ai-txt a:hover { color: var(--gold-hi); }

/* Shoutbox */
[data-skin="rpgfantasy"] .shoutbox { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
[data-skin="rpgfantasy"] .shout-messages { border-color: var(--line-2); }

/* Group legend (bottom of board index) */
[data-skin="rpgfantasy"] .fi-legend {
    background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
[data-skin="rpgfantasy"] .fi-legend-title { font-family: var(--serif); letter-spacing: .05em; font-weight: 700; }
[data-skin="rpgfantasy"] .fi-legend-sub { font-family: var(--mono); font-size: 11px; color: var(--text-mute); }
[data-skin="rpgfantasy"] .fi-legend-item {
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 700;
    border: 1px solid var(--line-2);
    background: var(--surface);
    clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
}
[data-skin="rpgfantasy"] .fi-legend-item:hover { border-color: var(--gold); color: var(--gold-hi); background: var(--surface-2); }
[data-skin="rpgfantasy"] .fi-legend-count { font-family: var(--serif); font-weight: 900; color: var(--gold-lo); }
[data-skin="rpgfantasy"] .fi-legend-dot { box-shadow: 0 0 8px currentColor; }

/* TeamSpeak / misc chip in sidebar */
[data-skin="rpgfantasy"] .chip {
    border-radius: var(--radius-sm);
    font-family: var(--mono);
    background: var(--surface-3);
    border: 1px solid var(--line-2);
    color: var(--text-dim);
}
[data-skin="rpgfantasy"] .chip:hover { border-color: var(--gold); color: var(--gold-hi); }

/* ── 9. FORUM VIEW + TOPIC LIST ─────────────────────────────────────── */
[data-skin="rpgfantasy"] .forum-banner {
    border-radius: var(--radius);
    border: 1px solid var(--line-2);
    background: linear-gradient(135deg, rgba(142,111,216,.16), var(--surface));
}
[data-skin="rpgfantasy"] .forum-banner-inner h1 { font-family: var(--serif); }
[data-skin="rpgfantasy"] .fb-icon,
[data-skin="rpgfantasy"] .fb-icon-emoji { border-radius: var(--radius-sm); background: var(--surface-3); border: 1px solid var(--line-2); }
[data-skin="rpgfantasy"] .subforum-card {
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
[data-skin="rpgfantasy"] .subforum-card:hover { border-color: var(--gold-lo); box-shadow: 0 10px 30px -18px rgba(201,162,39,.4); }
[data-skin="rpgfantasy"] .sc-icon { border-radius: var(--radius-sm); background: var(--surface-3); border: 1px solid var(--line-2); }
[data-skin="rpgfantasy"] .sc-title { font-family: var(--serif); font-weight: 700; }
[data-skin="rpgfantasy"] .sc-count { font-family: var(--mono); font-size: 11px; color: var(--text-mute); }
[data-skin="rpgfantasy"] .topic-list,
[data-skin="rpgfantasy"] .topic-list-head {
    background: linear-gradient(180deg, var(--surface), var(--bg-2));
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
[data-skin="rpgfantasy"] .topic-list-head {
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 10.5px;
    color: var(--text-mute);
    background: var(--surface-2);
}
[data-skin="rpgfantasy"] .topic-row { border-bottom: 1px solid var(--border-soft); position: relative; }
[data-skin="rpgfantasy"] .topic-row::before {
    content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px;
    background: transparent; transition: background .15s;
}
[data-skin="rpgfantasy"] .topic-row:hover { background: linear-gradient(90deg, rgba(142,111,216,.09), transparent 55%); }
[data-skin="rpgfantasy"] .topic-row:hover::before { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
[data-skin="rpgfantasy"] .topic-row.unread { background: rgba(142,111,216,.05); }
[data-skin="rpgfantasy"] .topic-icon,
[data-skin="rpgfantasy"] .ti-ava { border-radius: 50%; border: 1px solid var(--line-2); }
[data-skin="rpgfantasy"] .tm-title,
[data-skin="rpgfantasy"] .tl-title { font-weight: 700; letter-spacing: .01em; }
[data-skin="rpgfantasy"] .tl-title:hover { color: var(--gold-hi); }
[data-skin="rpgfantasy"] .tm-meta,
[data-skin="rpgfantasy"] .topic-last,
[data-skin="rpgfantasy"] .tl-lastby { font-family: var(--mono); font-size: 10.5px; letter-spacing: .03em; color: var(--text-mute); }
[data-skin="rpgfantasy"] .topic-stat b,
[data-skin="rpgfantasy"] .ts-val { font-family: var(--serif); font-weight: 900; color: var(--text-dim); }
[data-skin="rpgfantasy"] .tl-lastby-ava,
[data-skin="rpgfantasy"] .ti-ava { border-radius: 50%; }

/* ── 10. TOPIC VIEW: hero + posts ───────────────────────────────────── */
[data-skin="rpgfantasy"] .topic-hero {
    background:
        radial-gradient(700px 300px at 90% -40%, rgba(142,111,216,.18), transparent 60%),
        linear-gradient(180deg, var(--surface-2), var(--surface));
    border: 1px solid var(--line-2);
    border-radius: var(--radius-lg);
}
[data-skin="rpgfantasy"] .topic-hero-main h1 { font-family: var(--serif); font-weight: 900; letter-spacing: .02em; }
[data-skin="rpgfantasy"] .topic-hero-meta { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--text-dim); }
[data-skin="rpgfantasy"] .post,
[data-skin="rpgfantasy"] .reply-card {
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
[data-skin="rpgfantasy"] .post-author {
    background: linear-gradient(180deg, var(--surface-3), var(--surface));
    border-right: 1px solid var(--line-2);
}
[data-skin="rpgfantasy"] .post-author .avatar { border-radius: 50% !important; border: 2px solid var(--gold-lo); }
[data-skin="rpgfantasy"] .pa-name { font-family: var(--serif); font-weight: 700; }
[data-skin="rpgfantasy"] .pa-title,
[data-skin="rpgfantasy"] .pa-role { color: var(--gold-hi); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
[data-skin="rpgfantasy"] .pa-xp-track { background: #0E0B16; border: 1px solid var(--line-2); border-radius: 999px; }
[data-skin="rpgfantasy"] .pa-xp-fill { background: linear-gradient(90deg, #5A3FA8, var(--arc) 60%, var(--primary)); box-shadow: 0 0 10px rgba(142,111,216,.5); }
[data-skin="rpgfantasy"] .post-num { font-family: var(--mono); color: var(--text-mute); }
[data-skin="rpgfantasy"] .post-top,
[data-skin="rpgfantasy"] .post-foot { border-color: var(--line-2); }
[data-skin="rpgfantasy"] .post-content .post-quote {
    border-left: 3px solid var(--arc);
    background: var(--bg-2);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text-dim);
}
[data-skin="rpgfantasy"] .post-content .post-quote cite { color: var(--primary-2); font-family: var(--serif); }
[data-skin="rpgfantasy"] .post-content .code-block,
[data-skin="rpgfantasy"] .post-content pre {
    background: var(--bg-0);
    border: 1px solid var(--line-2);
    border-left: 3px solid var(--gold);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-family: var(--mono);
}
[data-skin="rpgfantasy"] .post-sig { border-top: 1px dashed var(--line-2); color: var(--text-mute); }

/* Reactions */
[data-skin="rpgfantasy"] .react-main,
[data-skin="rpgfantasy"] .react-summary .rs-count,
[data-skin="rpgfantasy"] .quote-btn,
[data-skin="rpgfantasy"] .post-tools button,
[data-skin="rpgfantasy"] .rp-btn {
    border-radius: var(--radius-sm);
}
[data-skin="rpgfantasy"] .react-main {
    background: var(--surface-3);
    border: 1px solid var(--line-2);
    font-family: var(--mono);
    letter-spacing: .04em;
    color: var(--text-dim);
}
[data-skin="rpgfantasy"] .react-main:hover,
[data-skin="rpgfantasy"] .quote-btn:hover,
[data-skin="rpgfantasy"] .post-tools button:hover { border-color: var(--gold); color: var(--gold-hi); }
[data-skin="rpgfantasy"] .rs-count { background: var(--surface); border: 1px solid var(--line-2); color: var(--text-dim); }
[data-skin="rpgfantasy"] .rs-count.reacted { border-color: var(--arc); color: var(--primary-2); background: rgba(142,111,216,.12); }
[data-skin="rpgfantasy"] .react-picker { background: var(--elev); border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: var(--shadow); }
[data-skin="rpgfantasy"] .ptool-danger:hover { color: var(--red); border-color: rgba(224,102,102,.5); }

/* Best-answer box */
[data-skin="rpgfantasy"] .best-answer-box,
[data-skin="rpgfantasy"] .best-banner {
    border: 1px solid rgba(87,217,138,.4);
    border-left: 3px solid var(--green);
    background: rgba(87,217,138,.06);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
[data-skin="rpgfantasy"] .ba-head { font-family: var(--serif); color: var(--green); }

/* Poll */
[data-skin="rpgfantasy"] .poll-card { background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--border); border-radius: var(--radius); }
[data-skin="rpgfantasy"] .poll-bar-wrap { background: #0E0B16; border: 1px solid var(--line-2); border-radius: 999px; }
[data-skin="rpgfantasy"] .poll-bar { background: linear-gradient(90deg, #5A3FA8, var(--arc) 60%, var(--primary)); border-radius: 999px; }
[data-skin="rpgfantasy"] .poll-q { font-family: var(--serif); letter-spacing: .02em; font-weight: 700; }

/* ── 11. PILLS / BADGES / TAGS / PREFIX ─────────────────────────────── */
[data-skin="rpgfantasy"] .badge,
[data-skin="rpgfantasy"] .status-pill,
[data-skin="rpgfantasy"] .role-pill,
[data-skin="rpgfantasy"] .tag,
[data-skin="rpgfantasy"] .prefix,
[data-skin="rpgfantasy"] .new-pill,
[data-skin="rpgfantasy"] .op-badge {
    border-radius: 999px;
    font-family: var(--mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 10px;
}
[data-skin="rpgfantasy"] .new-pill {
    background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo));
    color: #231A05;
    box-shadow: 0 0 10px rgba(201,162,39,.45);
}
[data-skin="rpgfantasy"] .prefix { border-radius: var(--radius-sm); background: rgba(142,111,216,.14); color: var(--primary-2); border: 1px solid rgba(142,111,216,.35); }
[data-skin="rpgfantasy"] .badge-pin { background: rgba(201,162,39,.16); color: var(--gold-hi); }
[data-skin="rpgfantasy"] .badge-lock { background: rgba(224,102,102,.14); color: var(--red); }
[data-skin="rpgfantasy"] .role-pill { background: rgba(142,111,216,.14); color: var(--primary-2); border: 1px solid rgba(142,111,216,.3); }
[data-skin="rpgfantasy"] .op-badge { background: rgba(201,162,39,.16); color: var(--gold-hi); }
[data-skin="rpgfantasy"] .ti-badge { border-radius: var(--radius-sm); }

/* ── 12. FORMS ──────────────────────────────────────────────────────── */
[data-skin="rpgfantasy"] .input,
[data-skin="rpgfantasy"] input[type="text"],
[data-skin="rpgfantasy"] input[type="email"],
[data-skin="rpgfantasy"] input[type="password"],
[data-skin="rpgfantasy"] input[type="search"],
[data-skin="rpgfantasy"] input[type="number"],
[data-skin="rpgfantasy"] input[type="url"],
[data-skin="rpgfantasy"] textarea,
[data-skin="rpgfantasy"] select {
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-sm);
    color: var(--text);
}
[data-skin="rpgfantasy"] .input:focus,
[data-skin="rpgfantasy"] input:focus,
[data-skin="rpgfantasy"] textarea:focus,
[data-skin="rpgfantasy"] select:focus {
    border-color: var(--gold);
    box-shadow: var(--ring);
    outline: none;
}
[data-skin="rpgfantasy"] .form-label,
[data-skin="rpgfantasy"] .ff-label,
[data-skin="rpgfantasy"] .tf-label,
[data-skin="rpgfantasy"] .bm-label {
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 11px;
    color: var(--text-dim);
}
[data-skin="rpgfantasy"] .form-hint,
[data-skin="rpgfantasy"] .input-help { color: var(--text-mute); font-size: 12px; }
[data-skin="rpgfantasy"] .editor-toolbar,
[data-skin="rpgfantasy"] .esa-editor .editor-toolbar {
    background: var(--surface-2);
    border-color: var(--line-2);
}
[data-skin="rpgfantasy"] .editor-toolbar button {
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    background: transparent;
}
[data-skin="rpgfantasy"] .editor-toolbar button:hover { background: var(--surface-3); color: var(--gold-hi); }
[data-skin="rpgfantasy"] .attach-btn:hover { color: var(--gold-hi); }

/* ── 13. TABLES (members / leaderboard / moderation) ────────────────── */
[data-skin="rpgfantasy"] .table-wrap {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow-x: auto;
}
[data-skin="rpgfantasy"] .data,
[data-skin="rpgfantasy"] .leaderboard-table { background: var(--surface); }
[data-skin="rpgfantasy"] .data th,
[data-skin="rpgfantasy"] .leaderboard-table th {
    background: var(--surface-2);
    border-bottom: 1px solid var(--line-2);
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 11px;
    color: var(--text-dim);
}
[data-skin="rpgfantasy"] .data td,
[data-skin="rpgfantasy"] .leaderboard-table td { border-bottom: 1px solid var(--border-soft); }
[data-skin="rpgfantasy"] .data tr:hover td,
[data-skin="rpgfantasy"] .leaderboard-table tr:hover td { background: rgba(142,111,216,.06); }
[data-skin="rpgfantasy"] .lb-username { font-family: var(--serif); font-weight: 700; }
[data-skin="rpgfantasy"] .lb-rank-num { font-family: var(--serif); font-weight: 900; color: var(--gold-lo); }
[data-skin="rpgfantasy"] .lb-rep { font-family: var(--mono); color: var(--gold-hi); }
[data-skin="rpgfantasy"] .lb-posts { font-family: var(--mono); color: var(--text-dim); }
[data-skin="rpgfantasy"] .leaderboard-hero {
    background:
        radial-gradient(800px 320px at 80% -40%, rgba(142,111,216,.18), transparent 60%),
        linear-gradient(180deg, var(--surface-2), var(--surface));
    border: 1px solid var(--line-2);
    border-radius: var(--radius-lg);
}
[data-skin="rpgfantasy"] .lb-subtitle { color: var(--text-dim); }
[data-skin="rpgfantasy"] .leaderboard-tabs .lb-tab,
[data-skin="rpgfantasy"] .lb-tab {
    font-family: var(--serif);
    font-weight: 700;
    letter-spacing: .06em;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line-2);
    background: var(--surface);
    color: var(--text-dim);
}
[data-skin="rpgfantasy"] .lb-tab:hover { border-color: var(--gold); color: var(--gold-hi); }
[data-skin="rpgfantasy"] .lb-tab.active {
    background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo));
    color: #231A05;
    border-color: var(--gold-lo);
}

/* Podium */
[data-skin="rpgfantasy"] .podium-block {
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border: 1px solid var(--line-2);
    border-radius: var(--radius) var(--radius) 0 0;
}
[data-skin="rpgfantasy"] .podium-place.gold .podium-block { border-color: var(--gold); box-shadow: 0 0 28px rgba(201,162,39,.28); }
[data-skin="rpgfantasy"] .podium-avatar-wrap img { border-radius: 50%; border: 2px solid var(--gold-lo); }
[data-skin="rpgfantasy"] .podium-crown { color: var(--gold-hi); text-shadow: 0 0 12px rgba(201,162,39,.6); }
[data-skin="rpgfantasy"] .podium-name { font-family: var(--serif); font-weight: 700; }
[data-skin="rpgfantasy"] .podium-score { font-family: var(--mono); color: var(--gold-hi); }
[data-skin="rpgfantasy"] .podium-rank-num { font-family: var(--serif); font-weight: 900; }

/* ── 14. FOOTER ─────────────────────────────────────────────────────── */
[data-skin="rpgfantasy"] .site-footer {
    background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
    border-top: 1px solid var(--border);
    box-shadow: inset 0 1px 0 rgba(201,162,39,.14);
}
[data-skin="rpgfantasy"] .footer-grid h4 {
    font-family: var(--serif);
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: 11px;
    color: var(--gold);
}
[data-skin="rpgfantasy"] .footer-grid a { color: var(--text-dim); }
[data-skin="rpgfantasy"] .footer-grid a:hover { color: var(--gold-hi); }
[data-skin="rpgfantasy"] .footer-brand { color: var(--text-dim); }
[data-skin="rpgfantasy"] .footer-brand .brand { font-family: var(--serif); }
[data-skin="rpgfantasy"] .footer-bottom {
    border-top: 1px solid var(--line-2);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--text-mute);
}
[data-skin="rpgfantasy"] .lang-switch a { font-family: var(--serif); border: 1px solid var(--line-2); border-radius: var(--radius-sm); color: var(--text-mute); }
[data-skin="rpgfantasy"] .lang-switch a.on {
    background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo));
    border-color: var(--gold-lo);
    color: #231A05;
}

/* ── 15. AUTH / LOGIN PAGES ─────────────────────────────────────────── */
[data-skin="rpgfantasy"] .auth-card {
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border: 1px solid var(--line-2);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glow);
}
[data-skin="rpgfantasy"] .auth-card h1,
[data-skin="rpgfantasy"] .auth-card h2 { font-family: var(--serif); font-weight: 900; letter-spacing: .03em; }

/* ── 16. MISC POLISH ────────────────────────────────────────────────── */
[data-skin="rpgfantasy"] .avatar { border-radius: 50%; }
[data-skin="rpgfantasy"] .mod-bar {
    background: linear-gradient(90deg, rgba(201,162,39,.12), transparent);
    border: 1px solid rgba(201,162,39,.3);
    border-radius: var(--radius);
}
[data-skin="rpgfantasy"] .mod-bar-label { font-family: var(--serif); letter-spacing: .1em; color: var(--gold-hi); }
[data-skin="rpgfantasy"] .viewers-bar,
[data-skin="rpgfantasy"] .vb-label { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--text-mute); }
[data-skin="rpgfantasy"] .cookie-bar { background: var(--elev); border: 1px solid var(--line-2); border-radius: var(--radius); }
[data-skin="rpgfantasy"] .divider { border-color: var(--line-2); }

/* Keep wide/scrolling content contained */
[data-skin="rpgfantasy"] .table-wrap,
[data-skin="rpgfantasy"] .post-content pre,
[data-skin="rpgfantasy"] .post-content .code-block { max-width: 100%; overflow-x: auto; }

/* Themed hero background (replaces the hidden default video). Drop /assets/img/hero-rpgfantasy.jpg
   for a real scene; otherwise the arcane gradient shows. */
[data-skin="rpgfantasy"] .fi-hero {
    background:
        linear-gradient(180deg, rgba(18,15,26,.60), rgba(18,15,26,.92)),
        url('/assets/img/hero-rpgfantasy.jpg') center/cover no-repeat,
        radial-gradient(90% 120% at 18% 15%, rgba(201,162,39,.20), transparent 55%),
        radial-gradient(120% 140% at 75% -10%, #2a2150 0%, #171322 52%, #120f1a 100%) !important;
}