/* 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.

   v5 "One Realm" — the wiki now speaks the GAME's visual language (see
   project_ui_identity / main.css): same background, same system-sans body with
   Cinzel display, SQUARE frames, violet borders at rest (--brd #3a2c62), GOLD
   on hover/active, and the gold shoulder on panel frames + primary buttons.
   Full-screen-width shell. Category gems survive from v4 — they are the
   wiki's own signature and collide with nothing in the game. */

:root {
    /* Game tokens — keep in step with main.css */
    --bg:        #080a16;
    --panel:     #151125;
    --panel-2:   #100c1a;
    --raise:     #1c1428;
    --ink:       #cccccc;
    --ink-dim:   #a297b8;
    --ink-faint: #71688c;
    --gold:      #e8c84a;
    --gold-2:    #c9a020;
    --violet:    #b69cea;
    --violet-2:  #8f74d6;
    --brd:       #3a2c62;   /* frame at rest  (main.css --brd)      */
    --brd-soft:  #241a3e;   /* quiet inner divisions (--brd-soft)   */
    --brd-gold:  #6a5a1a;   /* active/important (--brd-gold)        */
    --line:      var(--brd-soft);
    --line-2:    var(--brd);
    --shadow:    0 1px 0 rgba(255,255,255,0.03), 0 14px 40px -22px rgba(0,0,0,0.9);
    /* The gold shoulder — same gradients as main.css */
    --shoulder-t: linear-gradient(90deg, rgba(201,160,32,0) 0, rgba(201,160,32,0) 9px, var(--gold-2) 25%, var(--gold-2) 75%, rgba(201,160,32,0) calc(100% - 9px), rgba(201,160,32,0) 100%);
    --shoulder-b: linear-gradient(90deg, rgba(201,160,32,0) 0, rgba(201,160,32,0) 9px, rgba(201,160,32,.42) 25%, rgba(201,160,32,.42) 75%, rgba(201,160,32,0) calc(100% - 9px), rgba(201,160,32,0) 100%);
    /* 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 130% 50% at 50% 0%,   #10103c 0%, transparent 65%),
        radial-gradient(ellipse 60%  30% at 85% 100%, #080f1c 0%, transparent 60%);
    background-attachment: fixed;
    color: var(--ink);
    font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 15.5px; line-height: 1.72; min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--violet); text-decoration: none; transition: color .15s; }
a:hover { color: var(--gold); }
::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(--brd-soft); padding: 1px 6px; color: #e0cf94; }
kbd { background: #1a1426; border: 1px solid var(--brd); border-bottom-width: 2px; padding: 1px 7px; color: #cdbce8; font-size: 0.8em; }
hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--brd), transparent); margin: 26px 0; position: relative; }

/* ── Masthead — the game's topbar language ────────────────────────────────── */
.wiki-top {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 20px;
    padding: 12px 30px;
    background: linear-gradient(180deg, rgba(14,11,24,0.97), rgba(8,10,22,0.88));
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--brd);
    box-shadow: 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: 1600px; margin: 20px auto 0; padding: 0 30px; }
.wiki-hero img {
    display: block; width: 100%; height: auto;
    border: 1px solid var(--brd);
    box-shadow: 0 0 34px -6px rgba(232,200,74,0.10), 0 18px 44px -24px #000;
    transition: border-color .2s, box-shadow .2s;
}
.wiki-hero:hover img {
    border-color: var(--gold-2);
    box-shadow: 0 0 40px -4px rgba(232,200,74,0.2), 0 18px 44px -24px #000;
}

/* ── Shell — full screen width ────────────────────────────────────────────── */
.wiki-shell { width: 100%; max-width: none; 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: 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);
    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(--brd); border-left: 3px solid var(--gold-2);
    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(--brd-soft); margin-bottom: 8px; }

/* ── Content panel — a game panel frame with the gold shoulder ────────────── */
.wiki-panel {
    position: relative;
    background: linear-gradient(180deg, var(--panel), var(--panel-2));
    border: 1px solid var(--brd);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), var(--shadow);
    padding: 30px 38px 38px;
}
.wiki-panel::after {
    content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
    background-image: var(--shoulder-t), var(--shoulder-b);
    background-repeat: no-repeat;
    background-size: 100% 1px, 100% 1px;
    background-position: 0 0, 0 1px;
    pointer-events: none;
}
.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 12px; margin-bottom: 8px;
    border: 1px solid var(--brd); 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-left: 2px solid transparent;
    transition: background .14s, color .14s, border-color .14s;
}
.wiki-side nav a:hover { background: var(--raise); color: var(--gold); }
.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(--brd);
    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.12);
}
.wiki-search::placeholder { color: var(--ink-faint); }

/* ── Action bar + buttons — square, violet at rest, gold on hover ─────────── */
.wiki-bar { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin: -4px 0 20px; padding-bottom: 14px; border-bottom: 1px solid var(--brd-soft); }
.wiki-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 14px; background: var(--raise); border: 1px solid var(--brd);
    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: var(--gold); transform: translateY(-1px); }
.wiki-btn:active { transform: translateY(0); border-color: var(--gold); }
.wiki-btn.gold {
    position: relative;
    border-color: var(--brd-gold); color: var(--gold);
    background: linear-gradient(180deg, #241a04, #170f03);
    box-shadow: 0 0 14px -6px rgba(232,200,74,0.35);
}
.wiki-btn.gold::after {
    content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
    background-image: var(--shoulder-t), var(--shoulder-b);
    background-repeat: no-repeat;
    background-size: 100% 1px, 100% 1px;
    background-position: 0 0, 0 1px;
    pointer-events: none;
}
.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); box-shadow: 0 0 7px 0 currentColor;
}

/* ── Flash ────────────────────────────────────────────────────────────────── */
.wiki-flash { background: linear-gradient(180deg, #0c1a0c, #0a140a); border: 1px solid #244a24; color: #9ada7c; 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(--brd) 70%, transparent); }
.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); }
.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(--gold); }
.wiki-panel blockquote { margin: 16px 0; padding: 4px 18px; border-left: 3px solid var(--brd); color: var(--ink-dim); font-style: italic; }

/* ── Tables — game ledgers: square, violet-framed, gold heads ─────────────── */
.wiki-panel table, .manual-table {
    width: 100%; border-collapse: separate; border-spacing: 0; margin: 18px 0;
    background: var(--panel-2); border: 1px solid var(--brd); overflow: hidden;
    font-size: 0.96em;
}
.wiki-panel th, .manual-table th { background: #14101f; 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(--brd); }
.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; padding: 13px 16px 13px 18px; margin: 18px 0; border: 1px solid var(--brd); background: var(--panel-2); }
.box::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 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; 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(--brd-soft); font-size: 0.92em; transition: border-color .14s, background .14s; }
.wiki-revrow:hover { border-color: var(--gold-2); 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 — square, like every game button ─────────────────────────── */
.wiki-totop {
    position: fixed; right: 22px; bottom: 22px; z-index: 30;
    width: 42px; height: 42px;
    background: linear-gradient(180deg, #241a04, #170f03);
    border: 1px solid var(--brd-gold); 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, border-color .15s;
}
.wiki-totop.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
.wiki-totop:hover { color: #ffe27a; border-color: var(--gold); }

/* ── Responsive ───────────────────────────────────────────────────────────── */
/* ── Sprite gallery (the `sprite-gallery` page) ────────────────── */
/* Every selector is scoped under .sprite-gallery. The page body may only carry class/id (the
   sanitiser strips style=), so the whole look has to live here — which is also what makes the page
   survive being opened and saved in the wiki editor. */
.sg-jump { line-height: 2.1; }
.sg-jump a { display: inline-block; padding: 2px 9px; margin: 0 2px 3px 0; font-size: 0.86em;
             border: 1px solid var(--brd-soft); background: var(--panel-2); }
.sg-jump a:hover { border-color: var(--brd-gold); }
.sprite-gallery details { scroll-margin-top: 14px; }
.sprite-gallery .sg-base { margin: 2px 0 8px; font-size: 0.88em; color: var(--ink-faint); }
.sprite-gallery .sg-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
    gap: 9px; margin: 10px 0 12px;
}
.sprite-gallery .sg-cell {
    margin: 0; padding: 9px 6px 7px; text-align: center;
    background: var(--panel-2); border: 1px solid var(--brd-soft);
}
.sprite-gallery .sg-cell:hover { border-color: var(--brd); }
/* The art is 256px square and shown at 88 — not an integer ratio, so leave the browser's smooth
   downscale alone. image-rendering:pixelated here drops three pixels in four and eats the detail. */
.sprite-gallery .sg-cell img { width: 88px; height: 88px; vertical-align: bottom; }
.sprite-gallery .sg-cell figcaption {
    margin-top: 6px; font-family: 'Cinzel', Georgia, serif;
    font-size: 0.8em; letter-spacing: 0.03em; color: var(--ink-dim);
}
.sprite-gallery .sg-start figcaption { color: var(--gold-2); }
/* ⚠ MEASURED, not guessed. On a 375px phone the chain is 375 shell → 343 main → 301 page body →
   265 inside <details>'s own 16px padding. Two columns therefore need 2*min + gap <= 265, and the cell's
   own padding has to leave room for two sprites side by side. 152px looked reasonable and silently gave
   ONE column; 126/5 with a tighter cell gives two. Re-measure before changing any number here. */
@media (max-width: 520px) {
    .sprite-gallery .sg-grid { grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); gap: 5px; }
    .sprite-gallery .sg-cell { padding: 7px 3px 5px; }
    .sprite-gallery .sg-cell img { width: 58px; height: 58px; }
    .sprite-gallery .sg-cell figcaption { font-size: 0.72em; }
}

.sprite-gallery .sg-cell a { display: inline-block; cursor: zoom-in; line-height: 0; }
.sprite-gallery .sg-cell a:hover img { filter: brightness(1.15); }
/* ⚠ pixelated IS right here and WRONG in the grid above: 256→512 is an exact 2x upscale, which is
   what nearest-neighbour is for. The grid's 256→88 is not an integer ratio and would lose detail. */
.sg-lightbox { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 900;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    background: rgba(6,5,12,0.93); cursor: zoom-out; }
.sg-lightbox[hidden] { display: none; }
.sg-lightbox img { width: 512px; height: 512px; max-width: 78vmin; max-height: 78vmin;
    image-rendering: pixelated; border: 1px solid var(--brd); background: var(--panel-2); }
.sg-lb-cap { font-family: 'Cinzel', Georgia, serif; color: var(--gold); font-size: 0.95em;
    letter-spacing: 0.04em; text-align: center; padding: 0 16px; }

@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; }
}

/* ── Pet gallery (the `tamers-pets` page, installers/wiki_pet_sprites.php) ────────────────── */
/* Scoped under .pet-gallery, like the sprite gallery: the page body may only carry class/id. */
.pet-gallery .pg-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 9px; margin: 10px 0 12px;
}
.pet-gallery .pg-cell {
    margin: 0; padding: 9px 6px 7px; text-align: center;
    background: var(--panel-2); border: 1px solid var(--brd-soft);
}
.pet-gallery .pg-cell:hover { border-color: var(--brd); }
/* 80px art shown at 80: exact, so pixelated keeps every edge crisp. */
.pet-gallery .pg-cell img { width: 80px; height: 80px; vertical-align: bottom; image-rendering: pixelated; }
.pet-gallery .pg-cell figcaption { margin-top: 6px; font-size: 0.8em; line-height: 1.35; color: var(--ink-dim); }
.pet-gallery .pg-cell figcaption strong { display: block; font-family: 'Cinzel', Georgia, serif; letter-spacing: 0.03em; color: var(--gold-2); margin-bottom: 2px; }
.pet-gallery .pg-cell figcaption span { display: block; color: var(--ink-faint); font-size: 0.92em; }
@media (max-width: 520px) {
    .pet-gallery .pg-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 5px; }
    .pet-gallery .pg-cell { padding: 7px 3px 5px; }
    .pet-gallery .pg-cell img { width: 64px; height: 64px; }
    .pet-gallery .pg-cell figcaption { font-size: 0.72em; }
}