/* ════════════════════════════════════════════════════════════════════════
   DWOReborn Wiki — Design System  (light default + dark theme via [data-theme])
   A 2026 redesign: parchment-light / deep-ink-dark, gold + crimson + jade.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* brand accents (shared across themes) */
  --gold:      #c69a3a;
  --gold-2:    #e0b84e;
  --crimson:   #b3122b;
  --crimson-2: #d83a4f;
  --jade:      #1f9e7a;
  --jade-2:    #2cc096;

  /* rank ladder (shared) */
  --rank1: #8a8f99;  --rank2: #4d9be6;  --rank3: #2fb37a;
  --rank4: #e0962f;  --rank5: #ec6b2d;  --rank6: #e0454f;  --rank7: #c69a3a;

  /* ── LIGHT THEME (default) ── */
  --bg:        #f6f1e7;
  --bg-grad:   radial-gradient(1200px 600px at 80% -10%, #fff7e6 0%, transparent 60%),
               radial-gradient(1000px 500px at -10% 0%, #fdeef0 0%, transparent 55%);
  --surface:   #fffdf8;
  --surface-2: #f3ecdd;
  --surface-3: #eae2cf;
  --header-bg: rgba(255,253,248,.82);
  --text:      #2c241a;
  --text-dim:  #6f6149;
  --text-mut:  #9a8a6d;
  --border:    #e6dcc4;
  --border-2:  #d8cbab;
  --shadow:    0 1px 2px rgba(60,45,20,.06), 0 8px 24px rgba(60,45,20,.08);
  --shadow-lg: 0 12px 40px rgba(60,45,20,.16);
  --link:      #a8121f;
  --link-h:    #d83a4f;
  --ring:      rgba(198,154,58,.35);
  --img-bg:    linear-gradient(135deg, #f3ecdd, #e7dcc4);

  --sidebar-w: 240px;
  --radius:    14px;
  --radius-sm: 9px;
  --maxw:      1340px;
}

[data-theme="dark"] {
  --bg:        #0c0a11;
  --bg-grad:   radial-gradient(1100px 560px at 82% -12%, #2a1c10 0%, transparent 58%),
               radial-gradient(900px 480px at -8% -4%, #241018 0%, transparent 55%);
  --surface:   #15121d;
  --surface-2: #1d1929;
  --surface-3: #272136;
  --header-bg: rgba(18,15,26,.78);
  --text:      #ece5d4;
  --text-dim:  #ab9f8a;
  --text-mut:  #7c7263;
  --border:    #2a2440;
  --border-2:  #38314f;
  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.5);
  --shadow-lg: 0 16px 50px rgba(0,0,0,.6);
  --link:      #e0b84e;
  --link-h:    #f4d378;
  --ring:      rgba(224,184,78,.4);
  --img-bg:    linear-gradient(135deg, #1d1929, #15121d);
  --gold:      #e0b84e;
  --crimson-2: #ff6076;
  --jade-2:    #3fd9a8;
}

* , *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  background-image: var(--bg-grad);
  background-attachment: fixed;
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Noto Sans JP", "Noto Sans", sans-serif;
  font-size: 15px; line-height: 1.65; min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration: none; transition: color .15s; }
a:hover { color: var(--link-h); }
img { max-width: 100%; }
h1,h2,h3,h4 { line-height: 1.25; }

/* ── Layout shell ──────────────────────────────────────────────────────── */
#wiki-wrap { display: flex; flex-direction: column; min-height: 100vh; }
#wiki-body { display: flex; flex: 1; max-width: var(--maxw); margin: 0 auto;
             width: 100%; padding: 0 18px; gap: 30px; }
#wiki-main { flex: 1; min-width: 0; padding: 28px 0 64px; }
#wiki-sidebar { width: var(--sidebar-w); flex-shrink: 0; padding: 28px 0 64px; }

/* ── Header ────────────────────────────────────────────────────────────── */
#wiki-header {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 0 22px;
  background: var(--header-bg);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(255,255,255,.04), var(--shadow);
}
#wiki-logo {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 20px; letter-spacing: .3px;
  color: var(--text); padding: 12px 0; white-space: nowrap;
}
#wiki-logo .logo-mark {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--gold), var(--crimson));
  color: #fff; font-weight: 900; box-shadow: 0 4px 14px var(--ring);
}
#wiki-logo .logo-mark svg { width: 18px; height: 18px; }
#wiki-logo .logo-img {
  height: 48px; width: auto; border-radius: 9px; object-fit: cover;
  box-shadow: 0 4px 14px var(--ring); border: 1px solid var(--border-2);
}
#wiki-logo b { color: var(--gold); }
#wiki-logo span { color: var(--text-dim); font-weight: 500; font-size: 13px; }
#wiki-logo .logo-txt { color: var(--text); font-weight: 800; font-size: 20px; margin-left: 4px; }
#wiki-logo .logo-txt b { color: var(--gold); }
#wiki-logo .logo-txt > span { margin-left: 4px; }

#wiki-nav { display: flex; gap: 3px; flex-wrap: wrap; flex: 1; }
#wiki-nav a {
  color: var(--text-dim); padding: 7px 12px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; white-space: nowrap;
  transition: color .15s, background .15s;
}
#wiki-nav a:hover { color: var(--text); background: var(--surface-2); }
#wiki-nav a.active {
  color: #fff; background: linear-gradient(135deg, var(--gold), var(--crimson));
  box-shadow: 0 4px 14px var(--ring);
}

#wiki-search-wrap { margin-left: auto; display: flex; align-items: center; gap: 10px; }
#wiki-search {
  background: var(--surface); border: 1px solid var(--border-2); color: var(--text);
  border-radius: 999px; padding: 8px 14px; font-size: 13.5px; width: 190px;
  transition: box-shadow .15s, border-color .15s, width .2s;
}
#wiki-search:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px var(--ring); width: 230px; }

/* theme toggle + lang switch */
#wiki-theme-btn {
  display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 50%; border: 1px solid var(--border-2); background: var(--surface);
  color: var(--gold); cursor: pointer; font-size: 17px; transition: transform .2s, box-shadow .15s, background .15s;
}
#wiki-theme-btn:hover { transform: rotate(-15deg) scale(1.05); box-shadow: 0 0 0 4px var(--ring); }
#wiki-lang-sw { display: flex; gap: 3px; background: var(--surface-2); padding: 3px; border-radius: 999px; }
.wlang-btn {
  border: none; background: transparent; color: var(--text-dim); cursor: pointer;
  font-size: 12px; font-weight: 700; padding: 5px 9px; border-radius: 999px; transition: all .15s;
}
.wlang-btn:hover { color: var(--text); }
.wlang-btn.active { background: var(--surface); color: var(--gold); box-shadow: var(--shadow); }

/* ── Sidebar ───────────────────────────────────────────────────────────── */
.sidebar-box {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow); position: sticky; top: 84px;
}
.sidebar-box h3 {
  margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--text-mut);
}
.sidebar-box ul { list-style: none; margin: 0; padding: 0; }
.sidebar-box li { margin: 1px 0; }
.sidebar-box a {
  display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: var(--radius-sm);
  color: var(--text-dim); font-weight: 600; font-size: 14px; transition: all .13s;
}
.sidebar-box a:hover { background: var(--surface-2); color: var(--text); }
.sidebar-box a.cur {
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 18%, transparent), transparent);
  color: var(--gold); box-shadow: inset 3px 0 0 var(--gold);
}

/* ── Hero (index) ──────────────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden; border-radius: 22px; margin-bottom: 30px;
  border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  min-height: 320px; display: flex; align-items: flex-end;
}
.hero img.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(8,6,12,.05) 0%, rgba(8,6,12,.55) 60%, rgba(8,6,12,.86) 100%);
}
.hero-inner { position: relative; z-index: 2; padding: 38px 40px; color: #fff; max-width: 760px; }
.hero-inner h1 { margin: 0 0 10px; font-size: 42px; font-weight: 900; letter-spacing: -.5px;
  text-shadow: 0 2px 24px rgba(0,0,0,.5); }
.hero-inner h1 .accent { color: var(--gold-2); }
.hero-inner p { margin: 0; font-size: 16px; color: #f3ead7; text-shadow: 0 1px 12px rgba(0,0,0,.6); }
.hero-badges { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.hero-badge {
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(6px); color: #fff; padding: 6px 13px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700;
}

/* ── Hub cards ─────────────────────────────────────────────────────────── */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 18px; }
.hub-card {
  position: relative; display: block; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow);
  transition: transform .18s, box-shadow .18s, border-color .18s; overflow: hidden;
}
.hub-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--crimson)); opacity: 0; transition: opacity .18s;
}
.hub-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--border-2); color: var(--text); }
.hub-card:hover::before { opacity: 1; }
.hub-icon { font-size: 30px; margin-bottom: 12px; }
.hub-title { font-size: 17px; font-weight: 800; color: var(--text); margin-bottom: 5px; }
.hub-desc { font-size: 13.5px; color: var(--text-dim); }

/* ── Headings / prose ──────────────────────────────────────────────────── */
#wiki-main h1 { font-size: 30px; font-weight: 900; margin: 0 0 6px; letter-spacing: -.4px; }
#wiki-main h2 {
  font-size: 21px; font-weight: 800; margin: 34px 0 14px; padding-bottom: 9px;
  border-bottom: 2px solid var(--border); position: relative;
}
#wiki-main h2::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 56px; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--crimson)); }
#wiki-main h3 { font-size: 17px; font-weight: 800; margin: 22px 0 10px; color: var(--text); }
.text-dim { color: var(--text-dim); }
.lead { font-size: 16px; color: var(--text-dim); max-width: 70ch; }

/* ── Tables ────────────────────────────────────────────────────────────── */
.wiki-table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border);
  box-shadow: var(--shadow); background: var(--surface); }
.wiki-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.wiki-table thead th {
  background: var(--surface-2); color: var(--text-dim); font-weight: 700; text-align: left;
  padding: 11px 13px; border-bottom: 1px solid var(--border-2); white-space: nowrap;
  position: sticky; top: 0;
}
.wiki-table.sortable thead th { cursor: pointer; user-select: none; }
.wiki-table.sortable thead th::after { content: " ⇅"; color: var(--text-mut); font-size: 11px; }
.wiki-table.sortable thead th[data-sort="asc"]::after { content: " ↑"; color: var(--gold); }
.wiki-table.sortable thead th[data-sort="desc"]::after { content: " ↓"; color: var(--gold); }
.wiki-table td { padding: 10px 13px; border-bottom: 1px solid var(--border); }
.wiki-table tbody tr:last-child td { border-bottom: none; }
.wiki-table tbody tr:hover { background: color-mix(in srgb, var(--gold) 7%, transparent); }
.wiki-table td.jp { color: var(--text-dim); font-size: 12.5px; }
.wiki-table .num { font-variant-numeric: tabular-nums; font-weight: 600; }

.rank-cell { font-weight: 800; text-align: center; border-radius: 6px; color: #fff; white-space: nowrap; }
.rank-1{background:var(--rank1)}.rank-2{background:var(--rank2)}.rank-3{background:var(--rank3)}
.rank-4{background:var(--rank4)}.rank-5{background:var(--rank5)}.rank-6{background:var(--rank6)}
.rank-7{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#3a2a00}

/* stat grid (weapon base stats) */
.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 10px 22px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow); }
.statline { display: grid; grid-template-columns: 86px 1fr; align-items: center; gap: 12px; }
.slabel { font-size: 12.5px; font-weight: 700; color: var(--text-dim); }

/* stat bars inside cells */
.statbar { position: relative; display: flex; align-items: center; gap: 8px; min-width: 90px; }
.statbar .bar { flex: 1; height: 7px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.statbar .bar > i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--jade), var(--gold)); }
.statbar .val { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 26px; }

/* ── Weapon header / infobox ───────────────────────────────────────────── */
.weapon-header {
  display: grid; grid-template-columns: 280px 1fr; gap: 26px; align-items: start;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow); margin-bottom: 8px;
}
.weapon-img-box {
  background: var(--img-bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  aspect-ratio: 4/3; display: grid; place-items: center; overflow: hidden; padding: 12px;
}
.weapon-img-box img { max-height: 100%; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(0,0,0,.28)); }
.weapon-info h1 { margin: 0 0 4px; }
.weapon-info dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 12px 0; font-size: 13.5px; }
.weapon-info dt { color: var(--text-mut); font-weight: 700; }
.weapon-info dd { margin: 0; color: var(--text); }
.officer-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--crimson) 12%, transparent); color: var(--crimson-2); font-weight: 700; font-size: 13px; }

.ability-box {
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 14%, var(--surface)), var(--surface));
  border: 1px solid var(--border-2); border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm); padding: 13px 15px; margin-top: 12px;
}
.ability-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-mut); font-weight: 800; }
.ability-name { font-size: 17px; font-weight: 800; color: var(--gold); margin: 2px 0; }
.ability-jp { font-size: 13px; color: var(--text-dim); }
.ability-desc { font-size: 13.5px; color: var(--text); margin-top: 4px; }

/* Advance+ panel */
.advance-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 14px; }
.advance-card { background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--jade);
  border-radius: var(--radius-sm); padding: 14px 16px; box-shadow: var(--shadow); }
.advance-card .form { font-size: 12.5px; color: var(--text-dim); }
.advance-card .aname { font-size: 18px; font-weight: 800; color: var(--jade-2); }

/* Emblem badges */
.emblem-list { display: grid; gap: 10px; }
.emblem {
  display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: start;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 13px 15px; box-shadow: var(--shadow);
}
.emblem .glyph { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 10px;
  font-size: 22px; font-weight: 900; color: #fff;
  background: linear-gradient(135deg, var(--crimson), var(--gold)); }
.emblem .ename { font-weight: 800; }
.emblem .eeffect { font-size: 13px; color: var(--text-dim); }
.emblem .tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border); }
.tag.gold { background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold); border-color: transparent; }
.tag.jade { background: color-mix(in srgb, var(--jade) 16%, transparent); color: var(--jade-2); border-color: transparent; }

/* ── Card grids (weapons / gear / lieutenants) ─────────────────────────── */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px,1fr)); gap: 16px; }
.wiki-card {
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  transition: transform .16s, box-shadow .16s, border-color .16s; color: var(--text);
}
.wiki-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--gold); }
.wiki-card .thumb { aspect-ratio: 4/3; background: var(--img-bg); display: grid; place-items: center; padding: 10px; }
.wiki-card .thumb img { max-height: 100%; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0,0,0,.25)); }
.wiki-card .no-img { font-size: 34px; opacity: .5; }
.wiki-card .meta { padding: 11px 13px; }
.card-name { font-weight: 800; font-size: 14px; }
.card-sub { font-size: 12px; color: var(--text-dim); }
.card-foot { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }

/* filter bar */
.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0 20px; }
.chip {
  border: 1px solid var(--border-2); background: var(--surface); color: var(--text-dim);
  padding: 6px 13px; border-radius: 999px; font-size: 13px; font-weight: 700; cursor: pointer; transition: all .14s;
}
.chip:hover { color: var(--text); border-color: var(--gold); }
.chip.active { background: linear-gradient(135deg, var(--gold), var(--crimson)); color: #fff; border-color: transparent; box-shadow: 0 4px 12px var(--ring); }

/* gendered gear sections */
.gear-section { margin-top: 14px; }
.gear-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow); margin-bottom: 16px; }
.gear-item > h3 { margin-top: 0; }
.gender-tab-row { display: flex; gap: 8px; margin-bottom: 16px; }
.gender-tab {
  flex: 1; text-align: center; padding: 12px; border-radius: var(--radius); cursor: pointer; font-weight: 800;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); transition: all .15s;
}
.gender-tab.female.active { background: linear-gradient(135deg, #e85a8a, #b3122b); color: #fff; border-color: transparent; }
.gender-tab.male.active   { background: linear-gradient(135deg, #4d9be6, #1f5fa8); color: #fff; border-color: transparent; }

/* ── Content tabs (weapons index) ─────────────────────────────────────── */
.wtab-row { display: flex; gap: 6px; margin: 4px 0 18px; flex-wrap: wrap; }
.wtab {
  padding: 9px 18px; border-radius: var(--radius); cursor: pointer; font-weight: 800; font-size: 14px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); transition: all .15s;
}
.wtab:hover { color: var(--text); }
.wtab.active { background: linear-gradient(135deg, var(--gold), var(--crimson)); color: #fff; border-color: transparent; }

/* non-gendered gear section (capes / back / accessories) */
.gear-unisex { margin-top: 22px; padding-top: 18px; border-top: 2px dashed var(--border-2); }
.gear-unisex > h2 { margin-top: 0; }

/* officer portrait inside the chip */
.officer-portrait { width: 22px; height: 22px; border-radius: 50%; object-fit: cover;
  margin: -2px 2px -2px -4px; background: var(--surface-2); }
.tag.elem { background: color-mix(in srgb, var(--jade) 14%, transparent); color: var(--jade-2); border-color: transparent; }

/* ── Cape faction color-coding ─────────────────────────────────────────── */
.cape-set { border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; border-left: 4px solid; }
.cape-wei   { border-color: #4d9be6;       background: color-mix(in srgb, #4d9be6 8%,       var(--surface)); }
.cape-wu    { border-color: var(--crimson); background: color-mix(in srgb, var(--crimson) 8%, var(--surface)); }
.cape-shu   { border-color: var(--jade);   background: color-mix(in srgb, var(--jade) 8%,   var(--surface)); }
.cape-yuan  { border-color: var(--gold);   background: color-mix(in srgb, var(--gold) 8%,   var(--surface)); }
.cape-lubu  { border-color: #9b4de6;       background: color-mix(in srgb, #9b4de6 8%,       var(--surface)); }
.cape-jin   { border-color: #9a9a9a;       background: color-mix(in srgb, #9a9a9a 8%,       var(--surface)); }
.cape-ap    { border-color: var(--gold-2); background: color-mix(in srgb, var(--gold-2) 8%, var(--surface)); }
.cape-event { border-color: var(--text-mut); background: var(--surface); }
.cape-rank  { border-color: var(--rank4);  background: color-mix(in srgb, var(--rank4) 8%,  var(--surface)); }
.cape-set h3 { margin: 0 0 10px; font-size: 15px; }

/* ── Gear slot accordion (native <details>/<summary>) ──────────────────── */
.gear-slot { border: 1px solid var(--border); border-radius: var(--radius);
             margin-bottom: 12px; background: var(--surface); box-shadow: var(--shadow); }
.gear-slot > summary {
  padding: 14px 18px; cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 10px;
  border-radius: var(--radius); transition: background .13s;
}
.gear-slot > summary:hover { background: var(--surface-2); }
.gear-slot > summary::-webkit-details-marker { display: none; }
.gear-slot > summary::before {
  content: "▶"; font-size: 11px; color: var(--text-mut);
  transition: transform .15s; flex-shrink: 0;
}
details[open].gear-slot > summary::before { transform: rotate(90deg); }
.gear-slot-body { padding: 0 18px 18px; }
.weapon-desc { font-size: 14px; margin: 8px 0 14px; }

/* ── Officer cards (officers page grid) ────────────────────────────────── */
.officer-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 12px; text-align: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  transition: transform .16s, box-shadow .16s;
}
.officer-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.officer-card-portrait {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--border-2); background: var(--surface-2);
}
.officer-placeholder {
  width: 72px; height: 72px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 700; color: var(--gold);
  background: var(--surface-2); border: 2px solid var(--border-2);
}
.officer-card .aname { font-size: 14px; font-weight: 800; }
.officer-card .tags { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-top: 4px; }

/* ── Image gallery (per-rank weapon renders) ──────────────────────────── */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px,1fr)); gap: 12px; }
.gallery figure { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden; box-shadow: var(--shadow); }
.gallery .gimg { aspect-ratio: 1; background: var(--img-bg); display: grid; place-items: center; padding: 8px; cursor: zoom-in; }
.gallery .gimg img { max-height: 100%; object-fit: contain; }
.gallery figcaption { padding: 7px 9px; font-size: 11.5px; color: var(--text-dim); text-align: center; }

/* notice / callout */
.notice { background: color-mix(in srgb, var(--jade) 10%, var(--surface)); border: 1px solid var(--border);
  border-left: 3px solid var(--jade); border-radius: var(--radius-sm); padding: 13px 16px; margin: 14px 0; font-size: 14px; }
.notice.warn { background: color-mix(in srgb, var(--crimson) 10%, var(--surface)); border-left-color: var(--crimson); }

/* ── Footer ────────────────────────────────────────────────────────────── */
#wiki-footer { border-top: 1px solid var(--border); background: var(--surface);
  color: var(--text-dim); font-size: 13px; padding: 22px; text-align: center; }
#wiki-footer a { color: var(--gold); }

/* ── Lightbox ──────────────────────────────────────────────────────────── */
#wiki-lb { position: fixed; inset: 0; z-index: 2000; display: none; place-items: center;
  background: rgba(6,4,10,.86); backdrop-filter: blur(6px); cursor: zoom-out; padding: 5vh; }
#wiki-lb.open { display: grid; }
#wiki-lb img { max-width: 92vw; max-height: 90vh; object-fit: contain;
  filter: drop-shadow(0 20px 60px rgba(0,0,0,.6)); border-radius: 10px; }

/* search hide */
.search-hide, .filter-hide { display: none !important; }

/* ── Quests & Campaigns (migrated from the legacy wiki) ──────────────────── */
.no-img { font-size: 30px; opacity: .5; display: grid; place-items: center; height: 100%; width: 100%; }

.tag.quest-cat { background: color-mix(in srgb, var(--crimson) 14%, transparent); color: var(--crimson-2); border-color: transparent; }
.tag.rank-s { background: color-mix(in srgb, var(--gold) 20%, transparent); color: var(--gold); border-color: transparent; }
.tag.rank-a { background: color-mix(in srgb, #9b59d0 18%, transparent); color: #b57fe0; border-color: transparent; }
.tag.rank-b { background: color-mix(in srgb, var(--rank2) 18%, transparent); color: var(--rank2); border-color: transparent; }
.tag.rank-c { background: color-mix(in srgb, var(--jade) 16%, transparent); color: var(--jade-2); border-color: transparent; }
.tag.rank-d { background: var(--surface-2); color: var(--text-dim); }
.tag.rank-e { background: var(--surface-2); color: var(--text-mut); }

.quest-stars { color: var(--gold); font-size: 15px; letter-spacing: 1px; }
.quest-credits { font-style: italic; font-size: 12.5px; }

.quest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap: 16px; margin-bottom: 26px; }
.quest-card {
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); color: var(--text);
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.quest-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--gold); }
.quest-card-img { aspect-ratio: 4/3; background: var(--img-bg); display: grid; place-items: center; overflow: hidden; }
.quest-card-img img { width: 100%; height: 100%; object-fit: cover; }
.quest-card-body { padding: 11px 13px; display: flex; flex-direction: column; gap: 6px; }
.quest-card-body h3 { margin: 0; font-size: 14.5px; }
.quest-card-body .tag { align-self: flex-start; }
.quest-card-body p { margin: 0; font-size: 12px; line-height: 1.4; }
.campaign-card .quest-card-img { aspect-ratio: 16/9; }

/* Campaign narrative pages — hero banner + reading-width prose column */
.campaign-hero { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); margin-bottom: 18px;
  height: clamp(180px, 30vw, 360px); }
.campaign-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.campaign-body { max-width: 720px; font-size: 15px; line-height: 1.75; }
.campaign-body p { margin: 0 0 16px; }
.campaign-body .gimg { cursor: zoom-in; margin: 0 0 16px; aspect-ratio: auto; padding: 0; }
.campaign-body figure { margin: 0 0 16px; }
.campaign-body .gimg img { border-radius: var(--radius-sm); box-shadow: var(--shadow); }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  #wiki-sidebar { display: none; }
  .weapon-header { grid-template-columns: 1fr; }
  .weapon-img-box { max-width: 320px; }
}
@media (max-width: 640px) {
  #wiki-nav { order: 3; width: 100%; }
  #wiki-search { width: 140px; } #wiki-search:focus { width: 160px; }
  .hero-inner h1 { font-size: 30px; }
  #wiki-main h1 { font-size: 24px; }
}

/* RTL (Arabic) */
[dir="rtl"] .ability-box { border-left: none; border-right: 3px solid var(--gold); }
[dir="rtl"] .sidebar-box a.cur { box-shadow: inset -3px 0 0 var(--gold); }
[dir="rtl"] .notice { border-left: none; border-right: 3px solid var(--jade); }