/* wiki.css — Crystaria Wiki design system (hand-crafted, authoritative).
   Loaded AFTER wiki_manual.css so it sets the global look while the manual's
   bespoke content classes still style migrated content underneath. The importer
   never overwrites this file.

   v4 "The Arcane Library" — art direction from images/news/gamewiki.png:
   candlelit stacks over deep aubergine, brass-and-gold framework, glowing
   crystal accents. Category gems are keyed by [data-cat] on the sidebar
   groups and the page crumb (wiki.php emits both). */

:root {
    --bg:        #0a0712;
    --panel:     #141020;
    --panel-2:   #0e0a1a;
    --raise:     #1c1428;
    --ink:       #ddd5e6;
    --ink-dim:   #a297b8;
    --ink-faint: #71688c;
    --gold:      #e8c84a;
    --gold-2:    #c9a020;
    --brass:     #4a3820;
    --brass-dim: #32250f;
    --violet:    #b69cea;
    --violet-2:  #8f74d6;
    --ember:     #e09a40;
    --line:      #262038;
    --line-2:    #363050;
    --radius:    10px;
    --shadow:    0 1px 0 rgba(255,255,255,0.03), 0 14px 40px -22px rgba(0,0,0,0.9);
    /* Crystal gems — one per shelf of the library (sidebar categories) */
    --gem-basics:     #e8c84a;
    --gem-character:  #b06ce8;
    --gem-world:      #58d894;
    --gem-combat:     #e0685a;
    --gem-activities: #e09a40;
    --gem-quests:     #5ac8e0;
    --gem-endgame:    #d86cc8;
    --gem-social:     #e88ca0;
    --gem-guide:      #b8b8c8;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0; padding: 0;
    background-color: var(--bg);
    background-image:
        radial-gradient(ellipse 120% 60% at 50% -10%, #1e1240 0%, transparent 60%),
        radial-gradient(ellipse 55% 34% at 8% 88%, #241408 0%, transparent 62%),
        radial-gradient(ellipse 45% 30% at 96% 12%, #0c2418 0%, transparent 58%);
    background-attachment: fixed;
    color: var(--ink);
    font-family: 'IM Fell English', Georgia, serif;
    font-size: 17px; line-height: 1.78; min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--violet); text-decoration: none; transition: color .15s; }
a:hover { color: #d8c6ff; }
::selection { background: rgba(232,200,74,0.28); color: #fff; }

code, kbd, pre, samp { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.86em; }
code { background: #0c0916; border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; color: #e0cf94; }
kbd { background: #1a1426; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; padding: 1px 7px; color: #cdbce8; font-size: 0.8em; }
hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--brass), transparent); margin: 26px 0; position: relative; }

/* ── Masthead — brass rail under a gold rune-edge ─────────────────────────── */
.wiki-top {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 20px;
    padding: 12px 30px;
    background: linear-gradient(180deg, rgba(16,11,26,0.96), rgba(10,7,18,0.86));
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--brass-dim);
    box-shadow: 0 1px 0 rgba(232,200,74,0.07), 0 10px 30px -20px #000;
}
.wiki-top::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
    background: linear-gradient(90deg, transparent 2%, var(--gold-2) 18%, #f4dc86 50%, var(--gold-2) 82%, transparent 98%);
    opacity: 0.75;
}
.wiki-mark { display: flex; align-items: baseline; gap: 8px; font-family: 'Cinzel', Georgia, serif; letter-spacing: 0.04em; white-space: nowrap; }
.wiki-mark-c { color: var(--gold); font-weight: 700; font-size: 1.32em; text-shadow: 0 0 18px rgba(232,200,74,0.3); }
.wiki-mark-w { color: var(--violet); font-weight: 600; font-size: 1.06em; opacity: 0.85; }
.wiki-mark:hover .wiki-mark-c { color: #ffe27a; }
.wiki-topsearch { position: relative; margin-left: auto; width: min(360px, 42vw); }
.wiki-topsearch-ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%) rotate(45deg); color: var(--ink-faint); font-size: 0.95em; pointer-events: none; }
.wiki-top .wiki-search { margin: 0; padding-left: 32px; }

/* ── Hero banner (images/news/gamewiki.png) ───────────────────────────────── */
.wiki-hero { display: block; max-width: 1240px; margin: 20px auto 0; padding: 0 30px; }
.wiki-hero img {
    display: block; width: 100%; height: auto;
    border: 1px solid var(--brass); border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(232,200,74,0.08),
                0 0 34px -6px rgba(232,200,74,0.14),
                0 18px 44px -24px #000;
    transition: box-shadow .2s;
}
.wiki-hero:hover img {
    box-shadow: inset 0 0 0 1px rgba(232,200,74,0.14),
                0 0 40px -4px rgba(232,200,74,0.22),
                0 18px 44px -24px #000;
}

/* ── Shell ────────────────────────────────────────────────────────────────── */
.wiki-shell { max-width: 1240px; margin: 0 auto; padding: 22px 30px 80px; display: flex; gap: 30px; align-items: flex-start; }
.wiki-side { width: 262px; flex: 0 0 262px; position: sticky; top: 74px; max-height: calc(100vh - 92px); overflow-y: auto; padding: 4px 4px 20px; }
.wiki-side::-webkit-scrollbar { width: 9px; }
.wiki-side::-webkit-scrollbar-thumb { background: #241c34; border-radius: 6px; border: 2px solid var(--bg); }
.wiki-side::-webkit-scrollbar-thumb:hover { background: #322848; }
.wiki-main { flex: 1 1 auto; min-width: 0; }

/* ── Sidebar: shelf filter ────────────────────────────────────────────────── */
.wiki-navfilter { margin: 0 0 10px; font-size: 0.9em; }
.navhide { display: none !important; }

/* ── Collapsible nav categories ───────────────────────────────────────────── */
.wiki-cat-group { margin: 0 0 2px; }
.wiki-cat-group > summary.wiki-cat { cursor: pointer; list-style: none; user-select: none; display: flex; align-items: center; gap: 7px; }
.wiki-cat-group > summary.wiki-cat::-webkit-details-marker { display: none; }
.wiki-cat-group > summary.wiki-cat::before { content: '\25B8'; color: var(--ink-faint); font-size: 0.85em; transition: transform .15s; }
.wiki-cat-group[open] > summary.wiki-cat::before { content: '\25BE'; }
.wiki-cat-group > summary.wiki-cat:hover { color: var(--gold); }

/* Category gems — a lit crystal per shelf, colour keyed by data-cat */
.cat-gem {
    width: 8px; height: 8px; flex: none; transform: rotate(45deg);
    background: var(--gem-guide); border-radius: 1px;
    box-shadow: 0 0 7px 0 currentColor;
}
[data-cat="Basics"]     .cat-gem, .wiki-crumb[data-cat="Basics"]::before     { background: var(--gem-basics);     color: var(--gem-basics); }
[data-cat="Character"]  .cat-gem, .wiki-crumb[data-cat="Character"]::before  { background: var(--gem-character);  color: var(--gem-character); }
[data-cat="World"]      .cat-gem, .wiki-crumb[data-cat="World"]::before      { background: var(--gem-world);      color: var(--gem-world); }
[data-cat="Combat"]     .cat-gem, .wiki-crumb[data-cat="Combat"]::before     { background: var(--gem-combat);     color: var(--gem-combat); }
[data-cat="Activities"] .cat-gem, .wiki-crumb[data-cat="Activities"]::before { background: var(--gem-activities); color: var(--gem-activities); }
[data-cat="Quests"]     .cat-gem, .wiki-crumb[data-cat="Quests"]::before     { background: var(--gem-quests);     color: var(--gem-quests); }
[data-cat="Endgame"]    .cat-gem, .wiki-crumb[data-cat="Endgame"]::before    { background: var(--gem-endgame);    color: var(--gem-endgame); }
[data-cat="Social"]     .cat-gem, .wiki-crumb[data-cat="Social"]::before     { background: var(--gem-social);     color: var(--gem-social); }
[data-cat="Guide"]      .cat-gem, .wiki-crumb[data-cat="Guide"]::before      { background: var(--gem-guide);      color: var(--gem-guide); }

/* ── In-page collapsibles: recipe tables & long lists ─────────────────────── */
.wiki-main details {
    border: 1px solid var(--line); border-left: 2px solid var(--brass);
    border-radius: var(--radius);
    background: var(--panel-2); margin: 12px 0; padding: 2px 16px;
}
.wiki-main details > summary {
    cursor: pointer; user-select: none;
    font-family: 'Cinzel', Georgia, serif; color: var(--gold-2);
    padding: 11px 2px; font-size: 1.0em; letter-spacing: 0.02em;
}
.wiki-main details > summary:hover { color: var(--gold); }
.wiki-main details[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 8px; }

/* ── Content panel — the reading desk ─────────────────────────────────────── */
.wiki-panel {
    background:
        radial-gradient(ellipse 90% 40% at 50% 0%, rgba(232,200,74,0.045), transparent 55%),
        linear-gradient(180deg, var(--panel), var(--panel-2));
    border: 1px solid var(--brass-dim); border-radius: 14px;
    box-shadow: inset 0 0 0 1px rgba(232,200,74,0.05), var(--shadow);
    padding: 30px 38px 38px;
}
.wiki-panel > *:first-child { margin-top: 0; }

/* ── Sidebar nav ──────────────────────────────────────────────────────────── */
.wiki-recent {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--ink-dim); font-size: 0.85em; padding: 5px 10px; margin-bottom: 8px;
    border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2);
}
.wiki-recent:hover { border-color: var(--gold-2); color: var(--gold); }
.wiki-cat {
    color: var(--gold-2); font-family: 'Cinzel', Georgia, serif;
    font-size: 0.74em; letter-spacing: 0.14em; text-transform: uppercase;
    margin: 18px 0 5px; padding-left: 2px; position: relative;
}
.wiki-side nav a, .wiki-side > a:not(.wiki-recent) {
    display: block; color: var(--ink-dim); font-size: 0.95em;
    padding: 5px 11px; border-radius: 7px; border-left: 2px solid transparent;
    transition: background .14s, color .14s, border-color .14s;
}
.wiki-side nav a:hover { background: var(--raise); color: var(--ink); }
.wiki-side nav a.active { background: linear-gradient(90deg, rgba(232,200,74,0.13), transparent); color: var(--gold); border-left-color: var(--gold); }

/* ── Inputs ───────────────────────────────────────────────────────────────── */
.wiki-search, .wiki-editor, select.wiki-search {
    width: 100%; background: var(--panel-2); border: 1px solid var(--line-2);
    border-radius: 9px; color: var(--ink); font-size: 0.95em; padding: 9px 12px;
    transition: border-color .15s, box-shadow .15s;
}
.wiki-search:focus, .wiki-editor:focus, select.wiki-search:focus {
    outline: none; border-color: var(--gold-2); box-shadow: 0 0 0 3px rgba(232,200,74,0.14);
}
.wiki-search::placeholder { color: var(--ink-faint); }

/* ── Action bar + buttons ─────────────────────────────────────────────────── */
.wiki-bar { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin: -4px 0 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.wiki-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 14px; background: var(--raise); border: 1px solid var(--line-2);
    border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 0.85em;
    cursor: pointer; transition: transform .1s, background .14s, border-color .14s, color .14s;
}
.wiki-btn:hover { background: #241c34; border-color: var(--gold-2); color: #f4ecd8; transform: translateY(-1px); }
.wiki-btn:active { transform: translateY(0); }
.wiki-btn.gold { border-color: #5a4416; color: var(--gold); background: linear-gradient(180deg, #241a04, #170f03); box-shadow: 0 0 14px -6px rgba(232,200,74,0.35); }
.wiki-btn.gold:hover { border-color: var(--gold-2); color: #ffe27a; }
.wiki-btn.danger { border-color: #4a2230; color: #d98aa0; background: #1a0e15; }
.wiki-btn.danger:hover { border-color: #7a3450; color: #ffaabf; }
.wiki-meta { color: var(--ink-faint); font-size: 0.82em; }
.wiki-locked { color: #d59a3a; font-size: 0.82em; }

/* ── Category crumb above the page title ──────────────────────────────────── */
.wiki-crumb {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: 'Cinzel', Georgia, serif; font-size: 0.72em;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim);
    margin: 0 0 2px;
}
.wiki-crumb::before {
    content: ''; width: 7px; height: 7px; transform: rotate(45deg);
    background: var(--gem-guide); border-radius: 1px; box-shadow: 0 0 7px 0 currentColor;
}

/* ── Flash ────────────────────────────────────────────────────────────────── */
.wiki-flash { background: linear-gradient(180deg, #0c1a0c, #0a140a); border: 1px solid #244a24; color: #9ada7c; border-radius: 10px; padding: 11px 16px; margin-bottom: 20px; box-shadow: var(--shadow); }
.wiki-flash.err { background: linear-gradient(180deg, #1a0d0d, #150a0a); border-color: #4a2424; color: #e09182; }

/* ── Typography (content) ─────────────────────────────────────────────────── */
.wiki-panel h1, .manual-hero h1 { font-family: 'Cinzel', Georgia, serif; color: var(--gold); }
h2.section-title, .wiki-panel .section-title {
    font-family: 'Cinzel', Georgia, serif; color: #f0d873;
    font-size: 1.74em; line-height: 1.25; letter-spacing: 0.01em;
    margin: 6px 0 18px; padding-bottom: 14px; position: relative;
    border: 0; text-shadow: 0 0 26px rgba(232,200,74,0.2);
}
h2.section-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 110px; height: 2px; background: linear-gradient(90deg, var(--gold), var(--brass) 70%, transparent); border-radius: 2px; }
.s-num { color: var(--violet); margin-right: 8px; opacity: 0.8; }
.wiki-panel h3 {
    color: #cdbce8; font-family: 'Cinzel', Georgia, serif; font-size: 1.18em;
    margin: 30px 0 8px; padding-left: 14px; position: relative;
}
.wiki-panel h3::before { content: ''; position: absolute; left: 0; top: 0.18em; bottom: 0.18em; width: 3px; background: linear-gradient(180deg, var(--gold-2), transparent); border-radius: 3px; }
.wiki-panel h4 { color: var(--ink-dim); font-family: 'Cinzel', Georgia, serif; font-size: 1.02em; margin: 20px 0 5px; }
.wiki-panel p { margin: 11px 0; }
.wiki-panel ul, .wiki-panel ol { padding-left: 24px; }
.wiki-panel li { margin: 5px 0; }
.wiki-panel ul li::marker { color: var(--gold-2); }
.wiki-panel a { text-decoration: underline; text-decoration-color: rgba(143,116,214,0.35); text-underline-offset: 2px; }
.wiki-panel a:hover { text-decoration-color: var(--violet); }
.wiki-panel blockquote { margin: 16px 0; padding: 4px 18px; border-left: 3px solid var(--brass); color: var(--ink-dim); font-style: italic; }

/* ── Tables — brass-bound ledgers ─────────────────────────────────────────── */
.wiki-panel table, .manual-table {
    width: 100%; border-collapse: separate; border-spacing: 0; margin: 18px 0;
    background: var(--panel-2); border: 1px solid var(--brass-dim); border-radius: 10px; overflow: hidden;
    font-size: 0.96em;
}
.wiki-panel th, .manual-table th { background: #1c1408; color: var(--gold); text-align: left; padding: 10px 13px; font-family: 'Cinzel', Georgia, serif; font-size: 0.8em; letter-spacing: 0.05em; text-transform: uppercase; border-bottom: 1px solid var(--brass); }
.wiki-panel td, .manual-table td { padding: 9px 13px; border-top: 1px solid #171226; }
.wiki-panel tbody tr:nth-child(odd) td { background: rgba(255,255,255,0.012); }
.wiki-panel tbody tr:hover td { background: rgba(232,200,74,0.05); }

/* ── Callout boxes ────────────────────────────────────────────────────────── */
.box { position: relative; border-radius: 10px; padding: 13px 16px 13px 18px; margin: 18px 0; border: 1px solid var(--line-2); background: var(--panel-2); }
.box::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 3px 0 0 3px; background: var(--violet-2); }
.box-tip  { border-color: #234a30; } .box-tip::before  { background: #46c878; }
.box-note { border-color: #243a52; } .box-note::before { background: #4a9be0; }
.box-warn { border-color: #523320; } .box-warn::before { background: #e0883a; }

/* ── Stat chips (migrated content) ────────────────────────────────────────── */
.stat { display: inline-block; padding: 0 6px; border-radius: 4px; font-weight: bold; font-size: 0.84em; }
.stat.str { color: #e0685a; } .stat.acc { color: #e0c05a; } .stat.dex { color: #5ac0e0; }
.stat.def { color: #5a9ae0; } .stat.int { color: #a06ae0; } .stat.spi { color: #5ae0a0; }

/* ── Rows (search / history / recent) ─────────────────────────────────────── */
.wiki-revrow { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 11px 14px; margin: 7px 0; background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px; font-size: 0.92em; transition: border-color .14s, background .14s; }
.wiki-revrow:hover { border-color: var(--brass); background: var(--raise); }

/* ── Editor ───────────────────────────────────────────────────────────────── */
.wiki-editor { min-height: 480px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.6; resize: vertical; }
.wiki-help { color: var(--ink-faint); font-size: 0.85em; line-height: 1.8; }
.wiki-help code { font-size: 0.92em; }

/* ── Hero (edit page / fallback) ──────────────────────────────────────────── */
.manual-hero { text-align: center; padding: 16px 14px 4px; }
.manual-hero h1 { color: var(--gold); letter-spacing: 0.05em; margin: 0; }
.manual-subtitle { color: var(--ink-faint); font-style: italic; margin: 3px 0 0; }

label.wiki-cat { display: block; margin: 0 0 5px; }

/* ── Back to top ──────────────────────────────────────────────────────────── */
.wiki-totop {
    position: fixed; right: 22px; bottom: 22px; z-index: 30;
    width: 42px; height: 42px; border-radius: 50%;
    background: linear-gradient(180deg, #241a04, #170f03);
    border: 1px solid var(--gold-2); color: var(--gold);
    font-size: 1.1em; line-height: 40px; text-align: center; cursor: pointer;
    box-shadow: 0 0 18px -4px rgba(232,200,74,0.4), 0 8px 20px -10px #000;
    opacity: 0; pointer-events: none; transform: translateY(8px);
    transition: opacity .2s, transform .2s;
}
.wiki-totop.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
.wiki-totop:hover { color: #ffe27a; border-color: var(--gold); }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .wiki-shell { flex-direction: column; padding: 18px 16px 60px; gap: 18px; }
    .wiki-side { width: 100%; flex-basis: auto; position: static; max-height: none; }
    .wiki-panel { padding: 22px 20px 28px; }
    .wiki-top { padding: 11px 16px; }
    .wiki-topsearch { width: 46vw; }
    .wiki-hero { padding: 0 16px; margin-top: 14px; }
    h2.section-title { font-size: 1.45em; }
    /* Wide ledgers scroll inside their own rails on small screens */
    .wiki-panel table, .manual-table { display: block; overflow-x: auto; }
    .wiki-totop { right: 14px; bottom: 14px; }
}