/* DARO site v2 — "Crimson Valkyrie" theme (2026-11-03, mockup A in Outil/site/maquettes/theme_valkyrie; was "Celestial night") */
:root {
  --bg: #0c0709;
  --bg-2: #140a0f;
  --surface: #190d14;
  --raised: #22121b;
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .16);
  --text: #f3eaee;
  --muted: #b39aa6;
  --faint: #6f5865;
  --gold: #e8c16d;
  --gold-2: #f6dc9c;
  --aqua: #ff7d95;
  --violet: #c2508f;
  --radius: 16px;
  --title: "Marcellus", Georgia, serif;
  --body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--body); color: var(--text); line-height: 1.6; background: var(--bg);
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 8%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 40% 62%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 44%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 82%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(900px 500px at 85% -10%, rgba(194, 80, 143, .14), transparent 70%),
    radial-gradient(800px 500px at 0% 30%, rgba(255, 125, 149, .08), transparent 70%);
  background-size: 420px 420px, 380px 380px, 520px 520px, 300px 300px, 460px 460px, auto, auto;
}
img { max-width: 100%; display: block; }
a { color: var(--aqua); text-decoration: none; }
a:hover { color: #fff; }
.wrap { width: min(1440px, 100% - 48px); margin-inline: auto; }

/* --- Top bar --- */
.topbar { position: sticky; top: 0; z-index: 30; background: rgba(12, 7, 9, .72); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.topbar .wrap { display: flex; align-items: center; justify-content: center; gap: 18px; height: 68px; }
.brand img { height: 38px; width: auto; }
.nav { display: flex; gap: 6px; font-size: 14px; font-weight: 600; }
.nav.nav-left { justify-content: flex-end; }
.nav.nav-right { justify-content: flex-start; }
.nav a { color: var(--muted); padding: 8px 10px; border-radius: 10px; white-space: nowrap; }
.nav a:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.nav a.on { color: #fff; background: rgba(255, 255, 255, .07); }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 14px; }
.kbd-search { display: flex; align-items: center; gap: 10px; color: var(--faint); border: 1px solid var(--line-strong); border-radius: 10px; padding: 7px 10px 7px 12px; min-width: 210px; }
.kbd-search kbd { margin-left: auto; font: 600 11px var(--body); border: 1px solid var(--line-strong); border-radius: 5px; padding: 1px 6px; color: var(--muted); }
.lang { background: transparent; color: var(--text); border: 1px solid var(--line-strong); border-radius: 10px; padding: 7px 8px; font: inherit; }
.lang option { color: #111; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 11px 20px; border-radius: 12px; font-weight: 700; font-size: 15px; border: 0; cursor: pointer; transition: transform .15s, box-shadow .2s, background .2s; font-family: var(--body); }
.btn:hover { transform: translateY(-1px); }
.btn-gold { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #2a1a00; box-shadow: 0 0 0 1px rgba(255, 220, 150, .5) inset, 0 10px 30px -10px rgba(232, 193, 109, .8); }
.btn-gold:hover { color: #2a1a00; box-shadow: 0 0 0 1px rgba(255, 220, 150, .7) inset, 0 12px 36px -8px rgba(232, 193, 109, .95); }
.btn-line { background: rgba(255, 255, 255, .04); color: var(--text); border: 1px solid var(--line-strong); }
.btn-line:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.btn-small { padding: 8px 14px; font-size: 14px; border-radius: 10px; }
.btn-ghost { background: rgba(255, 255, 255, .04); color: var(--text); border: 1px solid var(--line-strong); }
.btn-ghost:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.status { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 10px #4ade80; }
.burger { display: none; background: transparent; border: 0; color: #fff; font-size: 24px; }

/* --- Hero --- */
/* Hero leaves room for the pulse strip so it shows without scrolling. */
.hero { position: relative; min-height: min(calc(100svh - 68px - 120px), 820px); display: grid; align-items: center; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; background: url("assets/sky.jpg") center / cover; filter: hue-rotate(125deg) saturate(.9) brightness(.85); opacity: .45; mask-image: linear-gradient(180deg, #000 30%, transparent 100%); }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 50% 40%, rgba(12, 7, 9, .1), rgba(12, 7, 9, .85)); z-index: 1; }
.hero .art { position: absolute; z-index: 2; right: max(-2vw, calc(50% - 720px)); bottom: -40px; height: 104%; max-height: 900px; width: auto; filter: drop-shadow(0 0 70px rgba(255, 80, 110, .30)); }
.hero .content { position: relative; z-index: 3; padding: 28px 0 96px; max-width: 640px; }
.hero .logo { width: 320px; margin-bottom: 10px; filter: drop-shadow(0 0 30px rgba(232, 193, 109, .35)); }
.kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); }
.kicker::before { content: ""; width: 26px; height: 1px; background: var(--gold); }
.hero h1.kicker { margin: 0; }
.hero .hero-title { font-family: var(--title); font-weight: 400; font-size: clamp(28px, 4vw, 54px); line-height: 1.05; margin: 14px 0 18px; letter-spacing: -.5px; white-space: nowrap; }
.hero .hero-title em { font-style: normal; background: linear-gradient(90deg, var(--gold-2), var(--aqua)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.lead { font-size: 19px; color: #dcc8d1; margin: 0 0 30px; max-width: 540px; }
.hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.play-ico { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .12); font-size: 10px; }

/* --- Pulse strip --- */
.pulse { position: relative; z-index: 4; margin-top: -64px; }
.pulse-inner { display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(25, 13, 20, .85); backdrop-filter: blur(12px); border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.pulse-item { padding: 20px 24px; border-right: 1px solid var(--line); }
.pulse-item:last-child { border-right: 0; }
.pulse-item small { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--faint); font-weight: 700; }
.pulse-item b { font-family: var(--title); font-weight: 400; font-size: 26px; color: #fff; }
.pulse-item .live { color: #4ade80; font-size: 13px; font-weight: 700; margin-left: 6px; }
.pulse-item .live::before { content: "● "; animation: blink 1.6s infinite; }
.pulse-card { display: flex; align-items: center; gap: 16px; }
.pulse-card img { width: 58px; height: 58px; object-fit: contain; flex: none; filter: drop-shadow(0 4px 12px rgba(0,0,0,.45)); }
.pulse-card b { display: block; font-size: 21px; line-height: 1.2; margin: 2px 0 2px; }
.pulse-card p { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.4; }
@keyframes blink { 50% { opacity: .3; } }

/* --- Sections --- */
section { padding: 96px 0 0; }
.head { display: flex; justify-content: space-between; align-items: end; gap: 12px 20px; margin-bottom: 30px; flex-wrap: wrap; }
.head h2 { font-family: var(--title); font-weight: 400; font-size: clamp(30px, 3.6vw, 44px); margin: 8px 0 0; line-height: 1.1; }
.head p { color: var(--muted); margin: 8px 0 0; max-width: 560px; }
.more { font-weight: 700; font-size: 14px; white-space: nowrap; }

/* Path chooser */
.paths { display: grid; grid-template-columns: 240px 1fr; gap: 24px; }
.tabs { display: grid; gap: 6px; align-content: start; }
.tab { all: unset; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-radius: 12px; color: var(--muted); font-weight: 700; border: 1px solid transparent; }
.tab small { color: var(--faint); font-weight: 600; }
.tab:hover { color: #fff; background: rgba(255, 255, 255, .03); }
.tab[aria-selected="true"] { color: #fff; background: linear-gradient(90deg, rgba(232, 193, 109, .14), rgba(232, 193, 109, 0)); border-color: rgba(232, 193, 109, .35); }
.specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.spec { background: linear-gradient(180deg, var(--raised), var(--surface)); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; color: var(--text); position: relative; overflow: hidden; transition: border-color .2s, transform .2s; }
.spec::after { content: ""; position: absolute; inset: auto -40% -60% auto; width: 220px; height: 220px; background: radial-gradient(circle, rgba(255, 125, 149, .18), transparent 70%); }
.spec:hover { border-color: rgba(255, 125, 149, .45); transform: translateY(-3px); color: var(--text); }
.spec .ico { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-strong); margin-bottom: 18px; }
.spec .ico img { width: 36px; height: 36px; image-rendering: pixelated; }
.spec h3 { font-family: var(--title); font-weight: 400; font-size: 24px; margin: 0 0 8px; }
.spec p { color: var(--muted); font-size: 15px; margin: 0 0 18px; min-height: 72px; }
.spec .go { font-weight: 700; font-size: 14px; color: var(--aqua); }
.paths-note { margin-top: 16px; color: var(--faint); font-size: 14px; }

/* Bento news */
.bento { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 220px 220px; gap: 18px; }
.tile { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--surface) center / cover; color: #fff; display: flex; align-items: end; }
.tile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 7, 9, 0) 30%, rgba(12, 7, 9, .92)); }
.tile:hover { color: #fff; border-color: var(--line-strong); }
.tile:hover::before { background: linear-gradient(180deg, rgba(12, 7, 9, 0) 10%, rgba(12, 7, 9, .95)); }
.tile .in { position: relative; padding: 20px 22px; }
.tile.big { grid-row: span 2; }
.tile.big h3 { font-size: 30px; }
.tile h3 { font-family: var(--title); font-weight: 400; margin: 6px 0 4px; font-size: 21px; line-height: 1.15; }
.tile p { margin: 0; color: #dac6cf; font-size: 14.5px; }
.pill { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; background: rgba(232, 193, 109, .18); color: var(--gold-2); border: 1px solid rgba(232, 193, 109, .35); }
.pill.aqua { background: rgba(255, 125, 149, .12); color: var(--aqua); border-color: rgba(255, 125, 149, .3); }
.tile.plain { background: linear-gradient(160deg, #2a1622, #190d14); align-items: center; }
.tile.plain::before { display: none; }

/* Codex teaser */
.codex { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; background: linear-gradient(135deg, rgba(194, 80, 143, .1), rgba(255, 125, 149, .06)); border: 1px solid var(--line-strong); border-radius: 24px; padding: 48px; }
.codex h2 { font-family: var(--title); font-weight: 400; font-size: clamp(28px, 3vw, 40px); margin: 10px 0 12px; line-height: 1.1; }
.codex p { color: var(--muted); }
.codex .stats { display: flex; gap: 28px; margin-top: 22px; flex-wrap: wrap; }
.codex .stats b { display: block; font-family: var(--title); font-weight: 400; font-size: 30px; color: #fff; }
.codex .stats span { font-size: 13px; color: var(--faint); }
.mock-search { background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); overflow: hidden; }
.mock-search .bar { display: flex; gap: 10px; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line); color: #fff; font-size: 16px; }
.mock-search .bar .caret { width: 2px; height: 20px; background: var(--aqua); animation: blink 1s infinite; }
.mock-search .group { padding: 10px 10px 4px; font-size: 11.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--faint); }
.mock-search .row { display: flex; align-items: center; gap: 12px; padding: 9px 10px; margin: 0 6px; border-radius: 10px; color: var(--text); font-size: 15px; }
.mock-search .row:hover, .mock-search .row.sel { background: rgba(255, 125, 149, .08); color: #fff; }
.mock-search .row img { width: 24px; height: 24px; image-rendering: pixelated; }
.mock-search .row small { margin-left: auto; color: var(--faint); font-size: 13px; }
.mock-search .foot { padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--faint); margin-top: 8px; }

/* Start */
.start { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.start .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.start .num { font-family: var(--title); font-size: 46px; line-height: 1; background: linear-gradient(180deg, var(--gold-2), rgba(232, 193, 109, .2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.start h3 { margin: 14px 0 6px; font-size: 19px; }
.start p { color: var(--muted); margin: 0 0 18px; font-size: 15px; }

footer { margin-top: 110px; border-top: 1px solid var(--line); padding: 44px 0 50px; color: var(--faint); font-size: 14px; }
footer .flinks { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; text-align: center; }
footer .flinks-title { color: var(--text); font-weight: 700; }
footer .flinks-links { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; }
footer .flinks-links a { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
footer .flinks-links a:hover { color: #fff; }
footer .flinks-links a img { width: 18px; height: 18px; object-fit: contain; }
footer .flinks-logo { height: 40px; width: auto; margin-top: 6px; }
footer .flinks-copy { color: var(--faint); font-size: 12px; }
footer .wrap { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; }
footer .cols { display: flex; gap: 56px; flex-wrap: wrap; }
footer h4 { color: var(--text); margin: 0 0 10px; font-size: 14px; }
footer ul { list-style: none; padding: 0; margin: 0; line-height: 2; }
footer a { color: var(--muted); }
footer .langs { display: flex; gap: 10px; margin: 12px 0 0; font-weight: 700; font-size: 13px; }
footer .langs a.on { color: var(--gold-2); }
footer .disclaimer { max-width: 340px; margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--faint); }

/* --- Database page (fiche) --- */
.crumbs { font-size: 14px; color: var(--faint); padding: 26px 0 0; }
.crumbs a { color: var(--muted); }
.page-head { display: flex; gap: 22px; align-items: center; padding: 22px 0 30px; flex-wrap: wrap; }
.page-head .big-ico { width: 84px; height: 84px; border-radius: 20px; display: grid; place-items: center; background: radial-gradient(circle at 30% 20%, rgba(255, 125, 149, .25), rgba(194, 80, 143, .12)); border: 1px solid var(--line-strong); box-shadow: 0 0 40px -10px rgba(255, 125, 149, .5); }
.page-head .big-ico img { width: 52px; height: 52px; image-rendering: pixelated; }
.page-head h1 { font-family: var(--title); font-weight: 400; margin: 0; font-size: clamp(32px, 4.4vw, 48px); line-height: 1.05; }
.page-head p { margin: 8px 0 0; color: var(--muted); }
.layout { display: grid; grid-template-columns: 290px 1fr; gap: 40px; align-items: start; }
.layout > *, .paths > *, .codex > * { min-width: 0; }
.levels td { overflow-wrap: anywhere; }
.side { position: sticky; top: 88px; display: grid; gap: 16px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.side h4 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--faint); }
.side ul { list-style: none; padding: 0; margin: 0; font-size: 15px; line-height: 2.1; }
.side li a { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.side li a img { width: 22px; height: 22px; image-rendering: pixelated; }
.side li a.on { color: #fff; font-weight: 700; }
.side li a.on::after { content: "●"; color: var(--gold); margin-left: auto; font-size: 10px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 14px; margin: 0; }
.kv dt { color: var(--faint); }
.kv dd { margin: 0; font-weight: 700; }
.note { font-size: 14px; color: #d9cfae; background: rgba(232, 193, 109, .07); border: 1px solid rgba(232, 193, 109, .25); border-radius: var(--radius); padding: 16px 18px; }
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.toc a { font-size: 13.5px; font-weight: 600; padding: 7px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); display: inline-flex; gap: 7px; align-items: center; }
.toc a:hover { color: #fff; border-color: var(--line-strong); }
.toc a img { width: 18px; height: 18px; image-rendering: pixelated; }
.skill { background: linear-gradient(180deg, var(--raised), var(--surface) 140px); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 26px; margin-bottom: 16px; scroll-margin-top: 90px; }
.skill:target { border-color: rgba(232, 193, 109, .5); }
.skill-head { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.skill-head img { width: 40px; height: 40px; image-rendering: pixelated; padding: 4px; border-radius: 10px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-strong); }
.skill-head h3 { margin: 0; font-size: 20px; font-family: var(--title); font-weight: 400; }
.skill-head .id { font-size: 12.5px; color: var(--faint); }
.badges { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.badge { font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 8px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-strong); color: var(--muted); }
.badge.passive { color: #f6b8cc; border-color: rgba(194, 80, 143, .4); background: rgba(194, 80, 143, .1); }
.badge.active { color: #86f0c0; border-color: rgba(74, 222, 128, .35); background: rgba(74, 222, 128, .08); }
.skill p { margin: 14px 0 0; color: #d2bfc8; }
.skill .skill-desc { margin-top: 10px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }  /* compact: the level / effect table matters most */
.skill .skill-desc p { margin: 0; color: inherit; }
/* what DARO changed, in the client's blue (skilldescript ^9999FF) */
.skill .daro-mod, .levels tr.daro-mod td { color: #8fb4ff; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .skill .daro-mod, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .levels tr.daro-mod td,
html[data-gtheme="wiki"] body.lib .skill .daro-mod, html[data-gtheme="wiki"] body.lib .levels tr.daro-mod td { color: #2f5fc4; }
.callout { margin-top: 14px; font-size: 14px; border-left: 2px solid var(--gold); background: rgba(232, 193, 109, .06); padding: 10px 14px; border-radius: 0 10px 10px 0; color: #e6d6a8; }
.levels { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 14.5px; }
.levels th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--faint); font-weight: 800; padding: 6px 12px; background: rgba(255, 255, 255, .05); }
.levels th, .levels td { border: 1px solid var(--line-strong); } /* full grid, like the old wiki tables */
.levels td { padding: 9px 12px; color: #e6d4dc; font-size: 15px; }
.levels td:first-child { width: 70px; font-weight: 800; color: var(--gold-2); white-space: nowrap; }
/* Job pages: folded skill cards, levels table on the max level (site.js toggles show-lv-low / show-lv-high) */
.skill.fold { padding: 0; }
.skill.fold > summary { list-style: none; cursor: pointer; padding: 16px 46px 16px 22px; position: relative; }
.skill.fold > summary::-webkit-details-marker { display: none; }
.skill.fold > summary::after { content: "▾"; position: absolute; right: 20px; top: 24px; color: var(--muted); font-size: 16px; transition: transform .2s; }
.skill.fold[open] > summary::after { transform: rotate(180deg); }
.skill.fold[open] > summary { border-bottom: 1px solid var(--line); }
.skill.fold > :not(summary) { margin-left: 22px; margin-right: 22px; }
.skill.fold > :last-child { margin-bottom: 20px; }
.skill.fold .levels { width: calc(100% - 44px); }
.levels tr.lv-low, .levels tr.lv-high { display: none; }
.levels.show-lv-low tr.lv-low, .levels.show-lv-high tr.lv-high { display: table-row; }
.levels tr.lv-high td { background: rgba(232, 193, 109, .07); color: #e6d6a8; }
/* Kugans (_kugan.html): wiki layout, lore frame, folded "Already ..." boxes */
.tbl-wrap { overflow-x: auto; max-width: 100%; } /* wide wiki tables scroll inside the card, not the page */
.kfacts { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; margin: 16px 0 0; font-size: 14.5px; }
.kfacts dt { font-weight: 800; color: #fff; }
.kfacts dd { margin: 0; color: #e6d4dc; }
.levels caption { caption-side: top; text-align: left; font-weight: 800; color: #fff; padding: 0 0 6px; font-size: 13.5px; }
.levels td:first-child:not(:only-child) { text-align: center; }
.already { margin-top: 14px; border: 1px solid rgba(232, 193, 109, .35); background: rgba(232, 193, 109, .07); border-radius: 10px; padding: 0 14px; }
.already summary { cursor: pointer; padding: 10px 0; font-weight: 800; color: var(--gold-2); }
.already[open] { padding-bottom: 12px; }
.already p { color: #e6d6a8; margin-top: 4px; }
.knotes { margin: 14px 0 0; padding-left: 20px; color: var(--muted); font-size: 14px; }
.kw { color: inherit; text-decoration: underline dotted var(--gold); text-underline-offset: 3px; }
.lore { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--radius); padding: 18px 22px; margin-bottom: 18px; }
.lore p { margin: 0 0 10px; color: #d9cfae; font-style: italic; }
.lore.wip { color: var(--muted); font-style: italic; border-left-color: var(--line-strong); }
.lore.wip b { font-style: normal; color: var(--gold-2); margin-right: 8px; letter-spacing: 1px; }
.lore-ratings th { text-align: left; white-space: nowrap; }
.lore-ratings .stars { color: var(--gold-2); white-space: nowrap; letter-spacing: 2px; }
.toc-row { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 18px; }
.toc-row .toc { margin-bottom: 0; flex: 1; }
.already-all { flex: none; margin-left: auto; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; padding: 7px 12px; border-radius: 10px;
  background: rgba(232, 193, 109, .1); border: 1px solid rgba(232, 193, 109, .4); color: var(--gold-2); }
.raised-by { font-size: 14px; color: var(--muted); }
.raised-by small { color: var(--faint); }
/* Stacking groups (templates/_stacking.html, page codex/stacking): effects of the same group do not add up */
.stacking { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; font-size: 13.5px; color: var(--muted); }
.stacking .stack-help { font-weight: 800; color: #fff; text-decoration: none; border-bottom: 1px dotted var(--line-strong); }
.stack-tag { font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: 8px; text-decoration: none; white-space: nowrap;
  border: 1px solid rgba(255, 125, 149, .35); background: rgba(255, 125, 149, .08); color: var(--aqua); }
.stack-tag.k-debuff { border-color: rgba(255, 138, 128, .4); background: rgba(255, 138, 128, .08); color: #ffaaa1; }
.stack-tag.k-status { border-color: rgba(232, 193, 109, .4); background: rgba(232, 193, 109, .08); color: var(--gold); }
a.stack-tag:hover, a.stack-tag:focus-visible { border-color: currentColor; }
.stack-shared { font-size: 12.5px; color: var(--faint); }
.stack-legend { padding: 16px 18px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); margin-bottom: 18px; }
.stack-legend p { margin: 0 0 10px; }
.stack-legend .stacking { margin: 4px 0 0; }
.stack-sub { color: var(--muted); margin: -4px 0 12px; }
.stack-group { scroll-margin-top: 90px; }
.stack-group .id code { font-size: 12.5px; color: var(--muted); }
.stack-members { font-size: 14px; color: #e6d4dc; margin: 10px 0 0; overflow-wrap: break-word; }
.stack-members small { color: var(--faint); }
.kugan-kind { font-family: var(--title); font-weight: 400; font-size: 28px; margin: 30px 0 12px; scroll-margin-top: 90px; }
.lv-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.lv-buttons button { font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; padding: 6px 12px; border-radius: 9px; background: var(--surface); border: 1px solid var(--line-strong); color: var(--muted); }
.lv-buttons button:hover { color: #fff; }
.lv-buttons button.on { color: #2a1a00; background: linear-gradient(180deg, var(--gold-2), var(--gold)); border-color: transparent; }
/* Kugan data tables (not level tables): the first column is a name, not "Lv n" (was forced on one line, 70px, centered:
   a long name like "Solid Husk, Mud Lump, ..." blew the table up); words wrap whole */
.levels.ktable td:first-child { width: auto; white-space: normal; text-align: left; min-width: 7em; }
.levels.ktable td { overflow-wrap: break-word; }
/* Codex tables bigger than config.yml codex_table_modal (templates/_table_modal.html): a button in the page, the table
   in a modal window (<dialog>, site.js). Full screen on phones. */
.tbl-launch { margin-top: 18px; }
.skill .tbl-launch .tbl-cap { margin: 0 0 8px; font-weight: 800; color: #fff; font-size: 13.5px; }
.tbl-open { display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; padding: 9px 14px; border-radius: 10px;
  color: var(--text); background: rgba(255, 125, 149, .07); border: 1px solid rgba(255, 125, 149, .35); text-align: left; }
.tbl-open svg { color: var(--aqua); flex: none; }
.tbl-open small { color: var(--muted); font-weight: 600; font-size: 12.5px; }
.tbl-open:hover { color: #fff; background: rgba(255, 125, 149, .13); }
.tbl-open:focus-visible, .tbl-close:focus-visible, .tbl-modal-body:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; }
dialog.tbl-modal { padding: 0; width: min(1100px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 48px); color: var(--text);
  background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 40px 80px -30px #000; overflow: hidden; }
dialog.tbl-modal[open] { display: flex; flex-direction: column; }
dialog.tbl-modal, .skill > dialog.tbl-modal { margin: auto; } /* not the folded job card's side margins */
dialog.tbl-modal::backdrop { background: rgba(8, 4, 6, .7); backdrop-filter: blur(6px); }
body:has(dialog.tbl-modal[open]) { overflow: hidden; }
.tbl-modal-head { display: flex; gap: 16px; align-items: flex-start; padding: 18px 22px; border-bottom: 1px solid var(--line); background: var(--surface); }
.tbl-modal-head h2 { margin: 0; font-family: var(--title); font-weight: 400; font-size: 22px; line-height: 1.2; }
.tbl-modal-head p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.tbl-modal-head .tbl-note { color: #e6d6a8; }
.tbl-close { margin-left: auto; flex: none; width: 40px; height: 40px; border-radius: 10px; cursor: pointer; font-size: 16px; color: var(--muted);
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line-strong); }
.tbl-close:hover { color: #fff; border-color: rgba(255, 255, 255, .3); }
.tbl-modal-body { overflow: auto; overscroll-behavior: contain; padding: 0 22px 22px; }
.tbl-modal-body .levels, .skill.fold .tbl-modal-body .levels { width: 100%; margin-top: 0; }
.tbl-modal-body .levels tr:first-child th { position: sticky; top: 0; z-index: 1; background: #28151f; box-shadow: 0 1px 0 var(--line-strong); }
.tbl-modal-body .levels tr:nth-child(odd) td { background: rgba(255, 255, 255, .02); }
@media (max-width: 640px) {
  dialog.tbl-modal, .skill > dialog.tbl-modal { width: 100vw; height: 100dvh; max-height: none; margin: 0; border: 0; border-radius: 0; }
  .tbl-modal-head { padding: 14px 16px; }
  .tbl-modal-body { padding: 0 10px 16px; }
  .tbl-modal-body .levels { font-size: 13.5px; }
  .tbl-modal-body .levels td, .tbl-modal-body .levels th { padding: 7px 8px; }
}
/* Phones, in the modal: a wide table (class wide = more than 5 columns) shows each row as a card of "column: value" lines */
@media (max-width: 640px) {
  .tbl-modal-body .levels.wide, .tbl-modal-body .levels.wide tbody, .tbl-modal-body .levels.wide tr { display: block; }
  .tbl-modal-body .levels.wide tr:first-child { display: none; }
  .tbl-modal-body .levels.wide tr { margin: 12px 0 0; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; }
  .tbl-modal-body .levels.wide td, .tbl-modal-body .levels.wide td:first-child { display: grid; grid-template-columns: minmax(0, 40%) 1fr; gap: 10px; width: auto;
    border: 0; border-top: 1px solid var(--line); text-align: left; white-space: normal; background: none; }
  .tbl-modal-body .levels.wide td:first-child { border-top: 0; background: rgba(255, 255, 255, .05); color: #fff; }
  .tbl-modal-body .levels.wide td::before { content: attr(data-label); font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--faint); }
}
/* Phones: the "Already learned" button goes under the Kugan list (on one line with it, its text made the page wider than the screen) */
@media (max-width: 640px) { .toc-row { flex-direction: column; } .already-all { margin-left: 0; } }
.generated { font-size: 13px; color: var(--faint); margin-top: 26px; }
.generated::before { content: "⚙ "; }

/* --- Responsive --- */
@media (max-width: 1020px) {
  .nav, .kbd-search { display: none; }
  .burger { display: inline-flex; }
  .hero .art { opacity: .3; right: -180px; }
  .pulse-inner { grid-template-columns: repeat(2, 1fr); }
  .pulse-item:nth-child(2) { border-right: 0; }
  .pulse-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .paths, .codex, .layout { grid-template-columns: 1fr; }
  .tabs { grid-auto-flow: column; overflow-x: auto; grid-auto-columns: max-content; }
  .specs, .start { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr 1fr; grid-template-rows: 260px 200px 200px; }
  .tile.big { grid-column: span 2; grid-row: auto; }
  .side { position: static; order: 2; }
}
@media (max-width: 560px) {
  .top-right .btn, .lang { display: none; }
  .hero .content { padding: 40px 0 110px; }
  .hero .logo { width: 240px; }
  .bento { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: 220px; }
  .tile.big { grid-column: auto; }
  .codex { padding: 28px; }
  .skill { padding: 18px; }
  .badges { margin-left: 0; width: 100%; }
}

/* --- Site v2 additions (built pages) --- */
button.kbd-search { font: inherit; font-size: 14px; background: transparent; cursor: pointer; }
button.kbd-search:hover { color: var(--text); border-color: var(--muted); }
button.mock-search { all: unset; display: block; cursor: pointer; width: 100%; box-sizing: border-box; background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); overflow: hidden; }
button.mock-search:hover { border-color: rgba(255, 125, 149, .45); }

.search-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(8, 4, 6, .7); backdrop-filter: blur(6px); display: grid; justify-items: center; align-items: start; padding: 12vh 16px 16px; }
.search-overlay[hidden], .specs[hidden] { display: none; }
.search-box { width: min(640px, 100%); background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: 0 40px 80px -30px #000; overflow: hidden; }
.search-box .bar { display: flex; gap: 10px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.search-box input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: #fff; font: 500 17px var(--body); }
.search-box .results { max-height: 52vh; overflow-y: auto; padding: 6px; }
.search-box .row { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; color: var(--text); font-size: 15px; }
.search-box .row img { width: 24px; height: 24px; image-rendering: pixelated; }
.search-box .row small { margin-left: auto; color: var(--faint); font-size: 13px; text-align: right; }
.search-box .row.sel, .search-box .row:hover { background: rgba(255, 125, 149, .09); color: #fff; }
.search-box .empty { padding: 18px; color: var(--faint); }
.search-box .foot { padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--faint); }

.codex-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding-bottom: 20px; }
.spec.soon { opacity: .45; }
.spec.soon p { min-height: 0; }

.tier-title { font-family: var(--title); font-weight: 400; font-size: 26px; margin: 34px 0 16px; color: var(--gold-2); }
.families { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 16px; }
.family { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 12px; }
.family-head { display: flex; align-items: center; gap: 10px; font-weight: 800; margin-bottom: 8px; }
.family-head img { width: 26px; height: 26px; object-fit: contain; }
.family ul { list-style: none; margin: 0; padding: 0; }
.family li a, .family li.planned { display: flex; align-items: center; gap: 10px; padding: 6px 8px; margin: 0 -8px; border-radius: 10px; color: var(--text); font-size: 15px; }
.family li a:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.family li img { width: 22px; height: 22px; image-rendering: pixelated; }
.family li small { margin-left: auto; color: var(--faint); font-size: 12.5px; }
.family li.planned { color: var(--faint); padding-left: 40px; }
.side li.planned span { color: var(--faint); padding-left: 32px; font-size: 14px; }

@media (max-width: 1020px) {
  .codex-grid { grid-template-columns: 1fr; }
  .burger { font-size: 20px; }
}

/* --- New player journey --- */
.journey-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding: 22px 0 34px; flex-wrap: wrap; }
.journey-head h1 { font-family: var(--title); font-weight: 400; font-size: clamp(34px, 4.6vw, 52px); margin: 8px 0 6px; line-height: 1.05; }
.journey-head p { color: var(--muted); margin: 0; max-width: 620px; font-size: 17px; }
.journey-progress { display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 14px 18px; }
.journey-progress .resume { display: block; font-size: 14px; font-weight: 800; max-width: 220px; color: #fff; }
.journey-progress .resume::after { content: " →"; color: var(--aqua); }
.ring { --p: 0; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; align-content: center; background: radial-gradient(closest-side, var(--surface) 78%, transparent 80% 100%), conic-gradient(var(--gold) calc(var(--p) * 1%), rgba(255, 255, 255, .08) 0); }
.ring span { font-family: var(--title); font-size: 22px; line-height: 1; }
.ring small { font-size: 11px; color: var(--faint); }
.link-btn { all: unset; cursor: pointer; font-size: 12.5px; color: var(--faint); margin-top: 4px; display: inline-block; }
.link-btn:hover { color: var(--aqua); }

.journey-layout { display: grid; grid-template-columns: 290px 1fr; gap: 34px; align-items: start; }
.journey-layout > * { min-width: 0; }
.constellation { position: sticky; top: 88px; max-height: calc(100vh - 110px); overflow-y: auto; padding-right: 6px; scrollbar-width: thin; scrollbar-color: rgba(232, 193, 109, .35) transparent; }
.constellation::-webkit-scrollbar { width: 6px; }
.constellation::-webkit-scrollbar-track { background: transparent; }
.constellation::-webkit-scrollbar-thumb { background: rgba(232, 193, 109, .28); border-radius: 3px; }
.constellation::-webkit-scrollbar-thumb:hover { background: rgba(232, 193, 109, .5); }
.chapter { margin-bottom: 18px; }
.chapter-title { display: flex; align-items: baseline; gap: 10px; font-weight: 800; font-size: 14px; color: var(--text); margin-bottom: 6px; flex-wrap: wrap; }
.chapter-title span { font-family: var(--title); font-weight: 400; color: var(--gold); font-size: 18px; }
.chapter-title small { width: 100%; font-weight: 600; color: var(--faint); font-size: 12px; padding-left: 26px; }
.constellation ol { list-style: none; margin: 0; padding: 0 0 0 7px; border-left: 1px dashed rgba(232, 193, 109, .25); }
.constellation li a { display: flex; align-items: center; gap: 12px; padding: 6px 0 6px 0; margin-left: -7px; color: var(--muted); font-size: 14.5px; }
.constellation li a i { flex: none; width: 13px; height: 13px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--faint); transition: all .25s; }
.constellation li a:hover { color: #fff; }
.constellation li a.done { color: var(--faint); }
.constellation li a.done i { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 10px rgba(232, 193, 109, .6); }
.constellation li a.current { color: #fff; font-weight: 700; }
.constellation li a.current i { border-color: var(--aqua); background: var(--aqua); box-shadow: 0 0 0 4px rgba(255, 125, 149, .18), 0 0 16px rgba(255, 125, 149, .8); }

.step { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 26px 28px; margin-bottom: 18px; scroll-margin-top: 90px; transition: border-color .3s, opacity .3s; }
.step.current { border-color: rgba(255, 125, 149, .45); background: linear-gradient(180deg, rgba(255, 125, 149, .06), var(--surface) 160px); box-shadow: 0 30px 60px -40px rgba(255, 125, 149, .5); }
.step:not(.current):not(.done) { opacity: .62; }
.step.done { opacity: .5; }
.step.done .how, .step.done .why, .step.done .tip, .step.done .more-box { display: none; }
.step-top { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--faint); flex-wrap: wrap; }
.step.current .step-num { color: var(--aqua); }
.step h2 { font-family: var(--title); font-weight: 400; font-size: 28px; margin: 8px 0 10px; line-height: 1.15; }
.step .goal { font-size: 17px; color: #fff; margin: 0 0 8px; }
.step .goal b { color: var(--gold-2); font-weight: 800; margin-right: 4px; }
.step .why { color: var(--muted); margin: 0 0 12px; }
.step .how { margin: 0 0 12px; padding-left: 22px; color: #e6d4dc; }
.step .how li { margin: 4px 0; }
.step .how li::marker { color: var(--aqua); font-weight: 800; }
.step .tip { font-size: 14.5px; border-left: 2px solid var(--aqua); background: rgba(255, 125, 149, .06); padding: 10px 14px; border-radius: 0 10px 10px 0; color: #fbd5de; margin-bottom: 12px; }
.step .tip b { color: var(--aqua); margin-right: 4px; }
.step-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.step-foot .btn { margin-left: auto; }
.reward { font-size: 14px; color: var(--gold-2); background: rgba(232, 193, 109, .08); border: 1px solid rgba(232, 193, 109, .25); padding: 5px 12px; border-radius: 999px; }
.more-box summary { cursor: pointer; font-size: 14px; color: var(--aqua); font-weight: 700; }
.more-box ul { margin: 8px 0 0; padding-left: 18px; font-size: 14px; color: var(--muted); }
.journey-end { text-align: center; padding: 40px 20px 10px; }
.journey-end h2 { font-family: var(--title); font-weight: 400; font-size: 32px; margin: 0 0 8px; }
.journey-end p { color: var(--muted); max-width: 520px; margin: 0 auto 18px; }

@media (max-width: 1020px) {
  .journey-layout { grid-template-columns: 1fr; }
  .constellation { position: static; max-height: none; display: none; }
  .step { padding: 20px; }
  .step-foot .btn { margin-left: 0; width: 100%; }
}

/* --- Jobs --- */
.job-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 14px; }
.job-card { text-align: center; justify-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; color: var(--text); display: grid; gap: 4px; transition: border-color .2s, transform .2s; }
.job-card:hover { border-color: rgba(255, 125, 149, .45); transform: translateY(-2px); color: #fff; }
.job-card b { font-family: var(--title); font-weight: 400; font-size: 20px; }
.job-card small { color: var(--faint); font-size: 13px; }
.job-icons { display: flex; gap: 6px; margin-bottom: 6px; min-height: 24px; }
.job-icons img { width: 24px; height: 24px; image-rendering: pixelated; }
.no-icon { display: inline-block; width: 24px; height: 24px; border-radius: 6px; background: rgba(255, 255, 255, .06); flex: none; }
.skill-head .no-icon { width: 40px; height: 40px; border-radius: 10px; }
.skill p.missing { color: var(--faint); font-style: italic; }

.job-sprite { image-rendering: pixelated; width: 118px; height: auto; margin: 2px 0 6px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
.job-sprite.big { width: 150px; margin: 0; filter: drop-shadow(0 0 24px rgba(255, 125, 149, .25)); }
.job-card:hover .job-sprite { filter: drop-shadow(0 0 14px rgba(255, 125, 149, .45)); }

.demo { margin-top: 14px; }
.demo summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 14px; font-weight: 700; color: var(--aqua); padding: 6px 12px; border-radius: 10px; border: 1px solid rgba(255, 125, 149, .3); background: rgba(255, 125, 149, .06); list-style: none; }
.demo summary::-webkit-details-marker { display: none; }
.demo[open] summary { color: #fff; }
.demo img { margin-top: 12px; border-radius: 12px; border: 1px solid var(--line-strong); width: 320px; max-width: 100%; height: auto; image-rendering: pixelated; }

/* --- Items --- */
.sub-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; color: var(--text); display: grid; gap: 4px; }
.sub-card:hover { border-color: rgba(255, 125, 149, .45); color: #fff; }
.sub-card b { font-weight: 800; }
.sub-card small { color: var(--faint); }
.sub-icons { display: flex; gap: 4px; min-height: 24px; margin-bottom: 4px; }
.sub-icons img { width: 24px; height: 24px; image-rendering: pixelated; }
.pager { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.pager a { min-width: 34px; text-align: center; padding: 6px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-weight: 700; font-size: 14px; }
.pager a.on { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #2a1a00; border-color: transparent; }
.item-list { display: grid; gap: 8px; margin-bottom: 18px; }
.item { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; scroll-margin-top: 90px; }
.item[open] { border-color: rgba(255, 125, 149, .4); }
.item summary { display: flex; align-items: center; gap: 12px; padding: 9px 14px; cursor: pointer; list-style: none; }
.item summary::-webkit-details-marker { display: none; }
.item summary img { width: 24px; height: 24px; image-rendering: pixelated; flex: none; }
.item-name { font-weight: 700; color: #fff; }
.item-name em { font-style: normal; color: var(--gold-2); font-weight: 800; }
.tag-daro { font-size: 10.5px; font-weight: 800; letter-spacing: .8px; padding: 1px 6px; border-radius: 6px; background: rgba(194, 80, 143, .15); color: #f6b8cc; vertical-align: 2px; }
.tag-mod { font-size: 10.5px; font-weight: 800; letter-spacing: .5px; padding: 1px 6px; border-radius: 6px; background: rgba(232, 193, 109, .14); color: #f6dc9c !important; vertical-align: 2px; text-decoration: none !important; }
.tag-mod:hover { background: rgba(232, 193, 109, .28); }
.mod-note { flex-basis: 100%; margin: 0; color: var(--muted); font-size: 13.5px; }
.item-facts { margin-left: auto; display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; font-size: 13.5px; color: #e6d4dc; }
.item-facts small { color: var(--faint); font-size: 11.5px; font-weight: 700; }
.item-id { color: var(--faint); font-size: 12.5px; min-width: 52px; text-align: right; }
.item-desc { padding: 4px 16px 14px 50px; color: #e6d4dc; font-size: 14.5px; }
.item-desc p { margin: 2px 0; }
/* Item lists: every description visible, filters on top */
.item-list.open-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 430px), 1fr)); align-items: stretch; }  /* same height on a row: no holes */
.open-list .filter-none { grid-column: 1 / -1; }
.open-list .item { content-visibility: auto; contain-intrinsic-size: auto 220px; }
.open-list .item-desc p { margin: 0; }
.item-desc b.ev { color: var(--gold-2); font-weight: 800; }  /* elite card value (the normal card's value before the arrow) */
.item-desc .ev-base { color: var(--muted); }
.open-list .item:target { border-color: rgba(255, 125, 149, .4); }
.item-head { display: flex; align-items: center; gap: 12px; padding: 9px 14px 2px; }
.item-head img { width: 24px; height: 24px; image-rendering: pixelated; flex: none; }
.open-list .item-desc { padding-top: 2px; font-size: 14px; }
.item-filters { position: sticky; top: 72px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 14px;
  padding: 12px 14px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; font-size: 13.5px; color: var(--muted); }
.item-filters input, .item-filters select { font: inherit; color: #fff; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-strong); border-radius: 8px; padding: 6px 9px; }
.item-filters input[type=search] { flex: 1 1 220px; }
.item-filters input[type=number] { width: 72px; }
.item-filters label { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; }
.item-filters output { margin-left: auto; color: var(--faint); }
.filter-none { color: var(--faint); font-style: italic; }
@media (max-width: 700px) {
  .item summary, .item-head { flex-wrap: wrap; }
  .item-facts { margin-left: 36px; justify-content: flex-start; width: 100%; }
  .item-filters { position: static; }
  .item-id { display: none; }
  .item-desc { padding-left: 16px; }
}

/* --- Monsters --- */
.mob-thumbs { display: flex; align-items: flex-end; gap: 6px; min-height: 48px; margin-bottom: 6px; }
.mob-thumbs img { max-height: 48px; max-width: 48px; image-rendering: pixelated; }
.item.mob summary { min-height: 58px; }
.mob-sprite { width: 48px; height: 48px; object-fit: contain; image-rendering: pixelated; flex: none; }
.item summary img.mob-sprite { width: 48px; height: 48px; }
.mob-sub { display: block; font-weight: 600; color: var(--faint); font-size: 12.5px; }
.tag-mvp { font-size: 10.5px; font-weight: 800; letter-spacing: .8px; padding: 1px 6px; border-radius: 6px; background: rgba(232, 193, 109, .18); color: var(--gold-2); vertical-align: 2px; }
.mob-body { padding: 4px 16px 16px 72px; }
.mob-stats { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.mob-stats div { background: rgba(255, 255, 255, .04); border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; display: flex; gap: 6px; font-size: 13.5px; }
.mob-stats dt { color: var(--faint); font-weight: 800; font-size: 11.5px; align-self: center; }
.mob-stats dd { margin: 0; color: #fff; font-weight: 700; }
.mob-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 18px; }
.mob-cols h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 1.3px; color: var(--faint); }
.mob-cols .elite h4 { color: #f6b8cc; }
.drops, .spawns { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.drops li, .spawns li { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid var(--line); }
.drops a { display: flex; align-items: center; gap: 8px; color: var(--text); min-width: 0; }
.drops a:hover { color: var(--aqua); }
.drops img { width: 24px; height: 24px; image-rendering: pixelated; flex: none; }
.drops .rate, .spawns .rate { margin-left: auto; color: var(--gold-2); font-weight: 700; font-size: 13px; white-space: nowrap; }
.spawns small { color: var(--faint); }
.dropped-by { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dropped-by b { color: var(--faint); font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; margin-right: 4px; }
.dropped-by a { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); color: var(--text); font-size: 13.5px; }
.dropped-by a:hover { border-color: rgba(255, 125, 149, .4); color: #fff; }
.dropped-by img { width: 26px; height: 26px; object-fit: contain; image-rendering: pixelated; }
.dropped-by small { color: var(--gold-2); font-weight: 700; }
.more-count { color: var(--faint); font-size: 13px; }
.obtained-from .src { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); font-size: 13.5px; }
.obtained-from .src i { font-style: normal; color: var(--faint); font-size: 12px; }
.obtained-from .src a { padding: 0; border: 0; background: none; }
.obtained-from .src em { font-style: normal; color: var(--gold-2); font-size: 12.5px; }
@media (max-width: 700px) { .mob-body { padding-left: 16px; } }

/* --- Quests --- */
.quest-mark { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-family: var(--title); color: var(--gold-2); background: rgba(232, 193, 109, .08); border: 1px solid rgba(232, 193, 109, .25); font-size: 15px; }
.quest-body { padding: 4px 16px 16px 62px; color: #e6d4dc; font-size: 14.5px; }
.quest-body > p { margin: 2px 0 10px; }
.quest-body section p { margin: 0; font-size: 14px; }
.mission-desc { color: var(--muted); font-size: 13.5px; margin: 6px 0; }
@media (max-width: 700px) { .quest-body { padding-left: 16px; } }

/* --- Guides --- */
.start-banner { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding: 18px 22px; border-radius: var(--radius); background: linear-gradient(90deg, rgba(232, 193, 109, .14), rgba(255, 125, 149, .08)); border: 1px solid rgba(232, 193, 109, .35); color: #fff; margin-bottom: 10px; }
.start-banner span { color: var(--aqua); font-weight: 700; }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 12px; }
.guide-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; color: var(--text); display: grid; gap: 6px; }
.guide-card:hover { border-color: rgba(255, 125, 149, .45); color: #fff; }
.guide-card b { font-weight: 800; }
.guide-card small { color: var(--muted); font-size: 14px; line-height: 1.45; }
.guide-toc ul, .guide-siblings { list-style: none; margin: 0; padding: 0; font-size: 14px; line-height: 1.5; }
.guide-toc li { padding: 3px 0; }
.guide-toc li.lvl3 { padding-left: 14px; font-size: 13px; }
.guide-toc a, .guide-siblings a { color: var(--muted); }
.guide-toc a:hover, .guide-siblings a:hover, .guide-siblings a.on { color: #fff; }
.guide-siblings li { padding: 3px 0; }
.side .guide-toc, .side .panel:has(.guide-siblings) { max-height: 46vh; overflow-y: auto; }
.guide-body { min-width: 0; color: #e9dbe2; font-size: 15.5px; line-height: 1.7; }
.guide-body h2, .guide-body h3, .guide-body h4 { font-family: var(--title); font-weight: 400; color: #fff; scroll-margin-top: 90px; }
.guide-body h2 { font-size: 28px; margin: 34px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.guide-body h3 { font-size: 21px; margin: 24px 0 8px; color: var(--gold-2); }
.guide-body h4 { font-size: 17px; margin: 18px 0 6px; }
.guide-body a { color: #ffa3b5; }  /* lighter than --aqua: long texts read better */
.guide-body img { display: inline-block; vertical-align: middle; max-width: 100%; height: auto; }
.guide-body a.ref { color: #e9dcb8; text-decoration: none; border-bottom: 1px dotted rgba(233,220,184,.45); }
.guide-body a.ref:hover { color: var(--gold-2); border-bottom-color: var(--gold-2); }
.guide-body a.ref img { width: 24px; height: 24px; object-fit: contain; margin: -4px 4px -2px 0; vertical-align: middle; image-rendering: auto; }
.guide-body a.ref-mob img { width: auto; height: 30px; max-width: 44px; margin: -8px 5px -6px 0; }
.guide-body td > a.ref-mob:only-child img, .guide-body th > a.ref-mob:only-child img { height: 44px; max-width: 64px; margin: 0 6px 0 0; }
.guide-hero { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; margin: 14px 0 28px; padding: 26px 30px; border: 1px solid var(--line); border-radius: 20px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(232,193,109,.10), transparent 55%), radial-gradient(90% 120% at 100% 100%, rgba(255, 125, 149,.08), transparent 60%), var(--surface); }
.guide-hero h1 { font-family: var(--title); font-weight: 400; margin: 8px 0 0; font-size: clamp(32px, 4.4vw, 48px); line-height: 1.05; }
.guide-hero .gh-lead { margin: 12px 0 0; color: #ddc9d2; font-size: 16px; line-height: 1.6; max-width: 720px; }
.guide-hero .gh-lead b, .guide-hero .gh-facts b, .guide-hero .gh-where b { color: var(--gold-2); }
.gh-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; padding: 0; }
.gh-facts li { display: flex; align-items: baseline; gap: 8px; padding: 8px 14px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line-strong); font-size: 14px; color: #e9dbe2; }
.gh-facts li > b { font-family: var(--title); font-weight: 400; font-size: 24px; line-height: 1; color: var(--gold-2); }
.gh-where { margin: 14px 0 0; font-size: 14px; color: #ddc9d2; }
.gh-where span { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); margin-right: 6px; }
.gh-visual { width: 300px; aspect-ratio: 16 / 10; border-radius: 14px; background: center / cover no-repeat; border: 1px solid var(--line-strong); box-shadow: 0 12px 30px rgba(0,0,0,.45); }
.gh-visual.portrait { background-size: contain; background-color: rgba(255,255,255,.02); border-color: var(--line); box-shadow: none; }
.gh-mosaic { display: grid; grid-template-columns: repeat(4, 52px); gap: 8px; }
.gh-mosaic img { width: 52px; height: 52px; object-fit: contain; padding: 8px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.gh-mosaic img.gh-mob { padding: 3px; }
@media (max-width: 820px) { .guide-hero { grid-template-columns: 1fr; padding: 20px; } .gh-visual { width: 100%; aspect-ratio: 16 / 9; } .gh-visual.portrait { aspect-ratio: auto; height: 170px; } .gh-mosaic { grid-template-columns: repeat(6, 44px); } .gh-mosaic img { width: 44px; height: 44px; } }
.guide-body h2 { position: relative; padding-left: 22px; }
.guide-body h2::before { content: ""; position: absolute; left: 0; top: .42em; width: 10px; height: 10px; transform: rotate(45deg); background: linear-gradient(135deg, var(--gold-2), var(--gold)); box-shadow: 0 0 12px rgba(232,193,109,.5); }
.guide-body .npc-card { display: flex; gap: 18px; align-items: flex-start; margin: 14px 0 18px; padding: 16px 18px; border-radius: 16px; background: linear-gradient(90deg, rgba(232,193,109,.07), rgba(255,255,255,.02)); border: 1px solid rgba(232,193,109,.22); }
.guide-body .npc-pic { flex: 0 1 auto; max-width: 42%; display: grid; place-items: end center; min-width: 96px; padding: 6px; border-radius: 12px; background: radial-gradient(circle at 50% 70%, rgba(232,193,109,.18), transparent 70%); }
.guide-body .npc-pic img { max-height: 150px; width: auto; }
.guide-body .npc-text { min-width: 0; flex: 1 1 0; }
.guide-body .npc-text > :first-child { margin-top: 0; }
.guide-body .npc-pic img { max-width: 100%; }
@media (max-width: 640px) { .guide-body .npc-card { flex-direction: column; align-items: stretch; } .guide-body .npc-pic { max-width: 100%; place-items: center; } }
.guide-body .tscroll.wide > table { min-width: 640px; }
@media (min-width: 900px) { .guide-body .tscroll.wide > table { min-width: 0; } }
.guide-body .npc-text > :last-child { margin-bottom: 0; }
.guide-body ul.ref-chips { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 8px; align-items: stretch; }
.guide-body ul.ref-chips li { padding: 7px 10px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.guide-body ul.ref-chips a.ref { border-bottom: 0; }
.guide-body table.guide-table { border-radius: 12px; border: 1px solid var(--line-strong); }
.guide-body table.guide-table th { background: linear-gradient(180deg, rgba(232,193,109,.14), rgba(232,193,109,.06)); color: #f3e6c4; }
.guide-body table.guide-table caption { caption-side: top; text-align: left; font-family: var(--title); font-size: 18px; color: var(--gold-2); padding: 0 0 8px; }
.guide-body table.ref-table a.ref img { width: 32px; height: 32px; }
.guide-body pre { position: relative; }
.guide-body pre::before { content: "i"; position: absolute; left: 14px; top: 13px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 700 13px/1 Georgia, serif; color: #0c0709; background: var(--aqua); }
.guide-body .qmap { position: relative; max-width: 620px; margin: 6px auto 22px; }
.guide-body .qmap img { display: block; width: 100%; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.guide-body .qmap-spot { position: absolute; border-radius: 10px; }
.guide-body .qmap-spot:hover, .guide-body .qmap-spot:focus-visible { box-shadow: 0 0 0 2px var(--gold-2), 0 0 14px rgba(255,214,120,.7); }
.guide-body ul, .guide-body ol { padding-left: 22px; }
.guide-body dl dd { margin-left: 18px; }
.guide-body table.guide-table { width: 100%; border-collapse: collapse; margin: 0; font-size: 14px; }
.guide-body .tscroll { overflow-x: auto; margin: 14px 0; }
.guide-body .tgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 18px 22px; align-items: stretch; margin: 12px 0 22px; }
.guide-body .tcard { min-width: 0; padding: 14px 16px 6px; border-radius: 14px; background: rgba(255, 255, 255, .025); border: 1px solid var(--line); }
.guide-body .tcard > h3, .guide-body .tcard > h4 { margin: 0 0 4px; font-size: 18px; }
.guide-body .tcard .tscroll { margin: 8px 0 10px; }
.guide-body .tcard { display: flex; flex-direction: column; }
.guide-body .tcard table.guide-table { width: 100%; }
.guide-body ul.cols2 { columns: 2 260px; column-gap: 32px; }
/* lists of commands (daro/jeu.py gen:commands): the command as a code chip, its text beside it; one card per command on phones */
.guide-body table.cmd-table tr:not(:first-child) > th:first-child { width: 34%; font: 600 13.5px/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--gold-2); word-break: break-word; }
.guide-body table.cmd-table tr:first-child > th { font: 800 12px var(--body); text-transform: uppercase; letter-spacing: .06em; }
.guide-body table.cmd-table td { line-height: 1.5; }
@media (max-width: 640px) {
  .guide-body table.cmd-table, .guide-body table.cmd-table tbody, .guide-body table.cmd-table tr, .guide-body table.cmd-table th, .guide-body table.cmd-table td { display: block; width: auto !important; }
  .guide-body table.cmd-table tr:first-child { display: none; }
  .guide-body table.cmd-table tr { border-bottom: 1px solid var(--line); }
  .guide-body table.cmd-table th, .guide-body table.cmd-table td { border: 0 !important; }
}
/* bonus lists (daro/guides.py bonus_lists): family badges and value ranges, as in the My Pet window */
.guide-body p.list-head { margin: 4px 0 6px; font: 800 11.5px var(--body); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.guide-body ul.bonus-list { list-style: none; padding: 12px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.guide-body ul.bonus-list > li { padding: 3px 0; }
.guide-body .fam { display: inline-block; min-width: 34px; text-align: center; padding: 1px 6px; margin-right: 4px; border-radius: 6px; font: 800 11px/1.5 var(--body); color: #fff; vertical-align: 1px; }
.guide-body .fam-str { background: #e04848; } .guide-body .fam-vit { background: #e8902c; } .guide-body .fam-dex { background: #2f9e57; }
.guide-body .fam-agi { background: #2f7fd6; } .guide-body .fam-int { background: #8a52d6; } .guide-body .fam-luk { background: #d9a520; }
.guide-body b.rng { color: #2fa35a; font-weight: 800; white-space: nowrap; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body b.rng, html[data-gtheme="wiki"] body.lib .guide-body b.rng { color: #1e7a3f; }
.guide-body .ref-icon img { width: 28px; height: 28px; object-fit: contain; vertical-align: -5px; margin-right: 8px; }
.guide-body .ref-icon.ref-mob img { width: auto; height: 34px; }
.guide-body .lv-sheet { grid-template-columns: 190px 1fr; }
.guide-body .lv-sheet .gem-slots { grid-template-columns: 1fr; }
.guide-body .lv-sheet .gem-pills button { background: var(--raised) !important; color: var(--text); opacity: 1; }
.guide-body .lv-sheet .gem-pills button[aria-pressed="true"] { background: var(--gold) !important; color: #1a0c12; }
.guide-body .lv-sheet .gem-slot li { font-size: 15px; }
@media (max-width: 760px) { .guide-body .lv-sheet { grid-template-columns: 1fr; } }
/* "possible bonus" rows + tabs (daro/guides.py bonus_rows), like the in-game Moon Quality panel */
.guide-body ul.bonus-rows { list-style: none; margin: 6px 0 8px; padding: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.guide-body ul.bonus-rows li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 7px 12px; font-size: 14.5px; }
.guide-body ul.bonus-rows li:nth-child(odd) { background: rgba(255, 255, 255, .035); }
.guide-body ul.bonus-rows li b.rng { flex: none; }
.guide-body .bonus-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 10px; }
.guide-body .bonus-tabs button { font: 700 13px var(--body); padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--muted); cursor: pointer; }
.guide-body .bonus-tabs button[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #1a0c12; }
.guide-body .tgrid.tabbed.on { grid-template-columns: 1fr; }
.guide-body .tgrid.tabbed.on > .tcard[hidden] { display: none; }
/* card titles that are a game name: the whole title links to the Codex (guides.py enrich_refs) */
.guide-body a.ref-head { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.guide-body a.ref-head:hover { color: var(--gold); text-decoration-style: solid; }
.guide-body a.ref-head img.ref-icon { width: 24px; height: 24px; object-fit: contain; image-rendering: pixelated; }
.guide-body .tgrid.tabbed.on > .tcard > h3, .guide-body .tgrid.tabbed.on > .tcard > h4 { display: none; }
/* Zodiac signs grid (zodiac-signs guide), like the in-game ZODIAC SIGNS window */
.guide-body ul.zodiac-grid { list-style: none; padding: 0; margin: 14px 0 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.guide-body ul.zodiac-grid li { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px 8px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); font-size: 0; }
.guide-body ul.zodiac-grid img { width: 104px; height: 104px; object-fit: contain; margin-bottom: 6px; }
.guide-body ul.zodiac-grid b { font: 400 18px/1.2 var(--title); color: var(--gold-2); }
.guide-body ul.zodiac-grid span { font-size: 12.5px; color: var(--muted); }
/* Level cards (Babel inscriptions...): daro/guides.py level_cards, like the in-game Babel window */
.guide-body .lvl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 10px; margin: 10px 0 22px; align-items: stretch; }
.guide-body .lvl { padding: 10px 12px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.guide-body .lvl:first-child { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(232, 193, 109, .25); }
.guide-body .lvl:last-child { border-color: var(--violet); }
.guide-body .lvl-n { display: block; font: 400 18px/1.2 var(--title); color: var(--gold-2); margin-bottom: 4px; }
.guide-body .lvl ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 13.5px; line-height: 1.4; }
.guide-body .lvl li { padding-left: 12px; position: relative; }
.guide-body .lvl li::before { content: "·"; position: absolute; left: 2px; color: var(--muted); }
/* Gem sheets (gemstones guide, Outil/site/gemmes/gem_tables.py): like the in-game Gem Setting window */
.guide-body .gem-sheet { display: grid; grid-template-columns: 210px 1fr; gap: 16px; margin: 10px 0 30px; padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line-strong); }
.guide-body .gem-id { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 14px 10px; border-radius: 14px; background: radial-gradient(circle at 50% 30%, rgba(232, 193, 109, .16), transparent 70%), rgba(255, 255, 255, .02); border: 1px solid var(--line); }
.guide-body .gem-pic { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35)); }
.guide-body .gem-name { margin: 2px 0 0; font: 400 22px/1.1 var(--title); color: var(--gold-2); }
.guide-body .gem-el { margin: 0; font-size: 13.5px; color: var(--muted); }
.guide-body .gem-el b { color: var(--text); }
.guide-body .gem-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 6px; }
.guide-body .gem-pills button { font: 700 11.5px var(--body); border: 1px solid rgba(0, 0, 0, .15); border-radius: 7px; padding: 4px 7px; cursor: pointer; color: #1a0c12; opacity: .55; }
.guide-body .gem-pills button[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--gold-2); }
.guide-body .gem-pills button:nth-child(1) { background: #c9d6e6; } .guide-body .gem-pills button:nth-child(2) { background: #8fe0a0; }
.guide-body .gem-pills button:nth-child(3) { background: #f7df7a; } .guide-body .gem-pills button:nth-child(4) { background: #f7b26a; }
.guide-body .gem-pills button:nth-child(5) { background: #f784a6; } .guide-body .gem-pills button.all { background: transparent; color: var(--muted); border-color: var(--line-strong); }
.guide-body .gem-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.guide-body .gem-slot { padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .025); border: 1px solid var(--line); }
.guide-body .gem-slot > h4 { margin: 0 0 6px; font: 800 11.5px var(--body); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.guide-body .gem-slot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.guide-body .gem-slot li { position: relative; padding-left: 16px; font-size: 14px; line-height: 1.45; }
.guide-body .gem-slot li::before { content: "✦"; position: absolute; left: 0; top: 1px; font-size: 10px; color: var(--gold); }
.guide-body b.gv { color: var(--gold-2); font-weight: 800; white-space: nowrap; }
.guide-body .gem-sheet.one b.gv { font-size: 15px; }
.guide-body li.gv-mixed { color: var(--text); }
@media (max-width: 760px) { .guide-body .gem-sheet { grid-template-columns: 1fr; } .guide-body .gem-slots { grid-template-columns: 1fr; } }
/* guide building blocks (rewritten pages): key facts, numbered steps, tip / warning boxes, cards */
.guide-body ul.keyfacts { list-style: none; padding: 0; margin: 16px 0 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.guide-body ul.keyfacts li { padding: 14px 16px; border-radius: 14px; background: linear-gradient(160deg, rgba(232,193,109,.10), rgba(255,255,255,.02)); border: 1px solid rgba(232,193,109,.25); line-height: 1.4; }
.guide-body ul.keyfacts li b:first-child { display: block; font-family: var(--title); font-weight: 400; font-size: 30px; line-height: 1.1; color: var(--gold-2); margin-bottom: 4px; }
.guide-body ol.steps { list-style: none; counter-reset: step; padding: 0; margin: 16px 0 18px; display: grid; gap: 10px; }
.guide-body ol.steps > li { counter-increment: step; position: relative; padding: 12px 16px 12px 58px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.guide-body ol.steps > li::before { content: counter(step); position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 700 15px/1 var(--title); color: #1a0c12; background: linear-gradient(135deg, var(--gold-2), var(--gold)); }
.guide-body p.tip, .guide-body p.warn { position: relative; padding: 12px 16px 12px 46px; border-radius: 12px; }
.guide-body p.tip { background: rgba(232,193,109,.08); border: 1px solid rgba(232,193,109,.28); }
.guide-body p.warn { background: rgba(255,120,90,.08); border: 1px solid rgba(255,120,90,.3); }
.guide-body p.tip::before, .guide-body p.warn::before { position: absolute; left: 14px; top: 11px; font-size: 18px; line-height: 1; }
.guide-body p.tip::before { content: "💡"; }
.guide-body p.warn::before { content: "⚠️"; }
.guide-body div.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; margin: 14px 0 20px; align-items: stretch; }
.guide-body div.card { padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.guide-body div.card > h4 { margin: 0 0 6px; color: var(--gold-2); }
.guide-body div.card > p { margin: 0; font-size: 14.5px; }
.guide-body div.card > p + p { margin-top: 6px; }
.guide-body ul.cards-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 8px; align-items: stretch; }
.guide-body ul.cards-list > li { padding: 9px 12px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--line); font-size: 14.5px; }

.guide-body ul.cols2 > li { break-inside: avoid; }
.guide-body table.guide-table th, .guide-body table.guide-table td { border: 1px solid var(--line-strong); padding: 7px 10px; text-align: left; vertical-align: middle; }
.guide-body table.guide-table th { background: rgba(255, 255, 255, .05); color: #fff; font-weight: 800; }
.guide-body table.guide-table tr:nth-child(even) td { background: rgba(255, 255, 255, .02); }
/* Tables of icons (social links, job roles): every icon at one size whatever the source image */
.guide-body table.icon-table td { text-align: center; }
.guide-body table.icon-table img { width: 56px; height: 56px; object-fit: contain; max-width: none; }
.guide-body table.icon-table.small img { width: 40px; height: 22px; }
.guide-body table.icon-table.small img[src*="Pticon_"] { width: 26px; height: 26px; image-rendering: pixelated; }
.guide-body hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
.review-note { font-size: 12.5px; color: #b9b096; background: rgba(232, 193, 109, .05); border: 1px solid rgba(232, 193, 109, .18); border-radius: 10px; padding: 7px 12px; margin: 0 0 18px; }
.guide-body pre { white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; font-size: 15px; background: rgba(255, 125, 149, .05); border: 1px solid rgba(255, 125, 149, .2); border-radius: 12px; padding: 12px 16px 12px 44px; color: #e9dbe2; }
.guide-body td, .guide-body th, .guide-body li, .guide-body p { overflow-wrap: anywhere; }

/* News page */
.news-list { display: grid; gap: 22px; padding-bottom: 60px; max-width: 860px; }
.news-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 28px; scroll-margin-top: 90px; }
.news-item h2 { font-family: var(--title); font-weight: 400; margin: 10px 0 6px; font-size: 26px; }
.news-item h2 a { color: inherit; }
.news-single h1 { font-family: var(--title); font-weight: 400; margin: 10px 0 6px; font-size: clamp(30px, 4vw, 42px); }
.news-meta { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--faint); }
.news-item .guide-body { padding: 0; }
.vote-note { color: var(--faint); font-size: 14px; padding: 18px 0 60px; }

/* Guide category icons (animated, from the old wiki menu) */
.guide-cat { display: flex; align-items: center; gap: 12px; }
.guide-cat img { width: 24px; height: 24px; }  /* native size: the wiki GIFs are 24x24, any other size blurs them */
.guide-body li img { max-height: 56px; width: auto; }  /* wiki grade icons inside lists */

/* Guides index: one compact column per category, like the old wiki menu */
.guide-menu { columns: 3 320px; column-gap: 22px; padding-bottom: 60px; }
/* Guides home: the showcase (data/showcase.yml), then the old wiki's layout (templates/guides.html, data/guides_home.yml) */
.show-head { margin: 26px 0 14px; }
.show-head .kicker, .show-client .kicker { font: 800 12px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.show-head h2 { font-family: var(--title); font-weight: 400; font-size: 34px; margin: 2px 0 0; color: #fff; }
.show-head p { color: var(--muted); margin: 2px 0 0; }
.show { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 34px; }
.show-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; transition: transform .2s, border-color .2s, box-shadow .2s; }
.show-card:hover { transform: translateY(-4px); border-color: rgba(232, 193, 109, .5); box-shadow: 0 14px 40px rgba(0, 0, 0, .35); }
.show-card.wide { grid-column: span 2; }
.show-pic { position: relative; display: block; height: 170px; background-size: cover; background-position: center top; border-bottom: 1px solid var(--line); background-color: #12080d; }
.show-pic.contain { background-size: contain; background-repeat: no-repeat; background-position: center; }
.show-pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(25, 13, 20, 1) 0%, rgba(25, 13, 20, 0) 55%); pointer-events: none; }
.show-mosaic { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 12px 14px 30px; align-content: center; background: radial-gradient(420px 160px at 50% 60%, rgba(232, 193, 109, .16), transparent 70%), #12080d; }
.show-mosaic img { width: 100%; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.show-num { position: absolute; z-index: 2; left: 16px; bottom: 10px; font-family: var(--title); font-size: 44px; line-height: 1; color: var(--gold-2); text-shadow: 0 2px 12px rgba(0, 0, 0, .8); }
.show-num small { font: 700 12px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--text); margin-left: 6px; }
.show-new { position: absolute; z-index: 2; top: 12px; right: 12px; font: 800 11px var(--body); letter-spacing: .08em; text-transform: uppercase; color: #082016; background: #4ade80; border-radius: 999px; padding: 3px 10px; }
.show-body { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.show-body h3 { font-family: var(--title); font-weight: 400; font-size: 24px; margin: 0; }
.show-body h3 a { color: #fff; }
.show-hook { color: var(--gold-2); font-weight: 700; font-size: 14.5px; margin: 0; }
.show-body ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.show-body li { font-size: 13.5px; color: var(--muted); padding-left: 16px; position: relative; }
.show-body li::before { content: "◆"; position: absolute; left: 0; top: 1px; font-size: 9px; color: var(--gold); }
.show-body li a { color: var(--muted); }
.show-body li a:hover { color: var(--aqua); }
.show-body li b { color: var(--gold-2); font-weight: 800; }
.show-more { margin-top: auto; padding-top: 4px; color: var(--aqua); font-weight: 700; font-size: 13.5px; }
.show-card.wide .show-body ul { grid-template-columns: 1fr 1fr 1fr; column-gap: 20px; }
.show-client { margin: 16px 0 34px; display: grid; grid-template-columns: 1.1fr 2fr; background: linear-gradient(90deg, rgba(255, 125, 149, .10), rgba(194, 80, 143, .08)); border: 1px solid rgba(255, 125, 149, .3); border-radius: 18px; overflow: hidden; }
.show-client-txt { padding: 20px 24px; display: grid; gap: 10px; align-content: center; }
.show-client-txt h3 { font-family: var(--title); font-weight: 400; font-size: 28px; margin: 0; color: #fff; }
.show-client-txt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.show-client-txt li { font-size: 14px; color: var(--muted); padding-left: 18px; position: relative; }
.show-client-txt li::before { content: "✦"; position: absolute; left: 0; color: var(--aqua); }
.show-shots { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; padding: 14px; }
.show-shots span { border-radius: 12px; border: 1px solid var(--line-strong); background-size: cover; background-position: center top; min-height: 150px; }
@media (max-width: 1150px) { .show { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .show-client { grid-template-columns: 1fr; } .show-card.wide .show-body ul { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .show { grid-template-columns: 1fr; } .show-card.wide { grid-column: auto; } .show-mosaic { grid-template-columns: repeat(8, 1fr); padding-bottom: 14px; } .show-shots { grid-template-columns: 1fr 1fr; } }
.wiki-home { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 26px; align-items: start; padding-bottom: 60px; }
.wiki-side { position: sticky; top: 90px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; font-size: 13.5px; }
.wiki-side h3 { font: 700 11px var(--body); text-transform: uppercase; letter-spacing: .08em; color: var(--gold); margin: 14px 0 6px; padding-bottom: 5px; border-bottom: 1px solid var(--line); }
.wiki-side h3:first-child { margin-top: 0; }
.wiki-side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.wiki-side a { color: var(--text); opacity: .85; }
.wiki-side a:hover { color: var(--aqua); opacity: 1; }
.wiki-sec { padding: 0; }  /* not the home page's section padding */
.wiki-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 34px; }
.wiki-sec h2 { display: flex; align-items: center; gap: 10px; font-family: var(--title); font-weight: 400; font-size: 26px; color: #fff; margin: 0 0 8px !important; padding-bottom: 6px; border-bottom: 1px solid var(--line-strong); }
.wiki-sec h2 img { width: 24px; height: 24px; }
.wiki-sec h4 { font: 800 13.5px var(--body); color: #fff; margin: 14px 0 3px; }
.wiki-sec ul { list-style: none; margin: 0; padding: 0; }
.wiki-sec li { font-size: 14px; padding: 1.5px 0; color: var(--muted); }
.wiki-sec li .tag-codex, .wiki-sec li .tag-new { white-space: nowrap; }
.wiki-sec li::before { content: "•"; color: var(--gold); opacity: .7; margin-right: 7px; }
.wiki-sec a { color: #eedfe5; }
.wiki-sec a:hover { color: var(--aqua); }
.wiki-sec li small { color: var(--faint); }
.tag-codex, .tag-new { font: 700 9.5px var(--body); text-transform: uppercase; letter-spacing: .05em; border-radius: 5px; padding: 0 5px; margin-left: 6px; vertical-align: 1px; }
.tag-codex { color: var(--gold); border: 1px solid rgba(232, 193, 109, .45); }
.tag-new { color: #9ff3b0; border: 1px solid rgba(120, 240, 150, .4); }
@media (max-width: 1100px) { .wiki-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .wiki-home { grid-template-columns: 1fr; } .wiki-side { position: static; } .wiki-grid { grid-template-columns: 1fr; } }
.guide-col { break-inside: avoid; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; margin-bottom: 22px; }
.guide-col h2 { font-family: var(--title); font-weight: 400; font-size: 22px; color: var(--gold-2); margin: 0 0 10px; }
.guide-col ul { list-style: none; margin: 0; padding: 0; font-size: 15px; line-height: 1.5; }
.guide-col li { padding: 4px 0; border-top: 1px solid var(--line); }
.guide-col li:first-child { border-top: 0; }
.guide-col a { color: var(--text); }
.guide-col a:hover { color: var(--aqua); }

/* Download page */
.dl-hero { background: radial-gradient(700px 300px at 85% 0%, rgba(232, 193, 109, .12), transparent 70%), var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 36px; margin: 18px 0 10px; }
.dl-hero:has(.dl-icon) { display: flex; gap: 28px; align-items: flex-start; }
.dl-icon { flex: none; width: 96px; height: 96px; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .45)); }
@media (max-width: 560px) { .dl-hero:has(.dl-icon) { flex-direction: column; gap: 14px; } .dl-icon { width: 72px; height: 72px; } }
.dl-hero h1 { font-family: var(--title); font-weight: 400; font-size: clamp(32px, 4.4vw, 48px); margin: 6px 0 10px; }
.dl-hero p { color: var(--muted); max-width: 640px; margin: 0; }
.dl-mirrors { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 14px; }
.dl-mirrors .btn { padding: 14px 22px; font-size: 16px; }
.dl-mirrors small { font-weight: 600; opacity: .75; margin-left: 4px; }
.dl-account { font-size: 14.5px; }
.dl-steps { list-style: none; counter-reset: d; padding: 0; margin: 0 0 30px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 14px; }
.dl-steps li { counter-increment: d; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 18px 16px; display: grid; gap: 6px; align-content: start; }
.dl-steps li::before { content: counter(d); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800;
  background: rgba(232, 193, 109, .14); border: 1px solid rgba(232, 193, 109, .4); color: var(--gold-2); }
.dl-steps b { font-size: 16px; }
.dl-steps span { color: var(--muted); font-size: 14.5px; }
.dl-tips { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; padding-bottom: 50px; }
.dl-tip { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; }
.dl-tip h3 { font-family: var(--title); font-weight: 400; font-size: 22px; margin: 0 0 10px; }
.dl-tip ul { margin: 0; padding-left: 18px; color: var(--muted); display: grid; gap: 6px; }
.dl-tip p { color: var(--muted); }
@media (max-width: 800px) { .dl-tips { grid-template-columns: 1fr; } }
.family-head img.family-sprite { width: 89px; height: 84px; object-fit: contain; image-rendering: pixelated; }  /* male + female class sprites (assets/jobsprites, 118x111) */

/* Scroll reveal (site.js adds .rv, then .in when the block scrolls into view) */
.rv { transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.rv:not(.in) { opacity: 0; transform: translateY(32px); }
.rv:is(.page-head, .head, .tier-title):not(.in) { transform: translateX(-40px); }
.rv:is(.codex, .dl-hero, .start-banner):not(.in) { transform: translateX(40px); }
/* Specialization families: compact boxes, class sprites at their native size (118x111, crisp) */
.families { grid-template-columns: repeat(auto-fill, minmax(min(215px, 100%), 1fr)); gap: 12px; }
.family { padding: 12px 14px 8px; }
.family-head { gap: 4px; margin-bottom: 4px; font-size: 16px; }
.family-head img.family-sprite { width: 118px; height: 111px; margin: -6px -4px -8px -8px; }
.family li a, .family li.planned { padding: 4px 8px; font-size: 14.5px; }

/* Home news: the latest one large, the previous ones as a dated list */
.news-home { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; }
.news-feature { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--raised), var(--surface)); color: #fff; display: flex; flex-direction: column; }
.news-feature .nf-pic { display: block; width: 100%; height: auto; aspect-ratio: 5 / 2; object-fit: cover; border-bottom: 1px solid var(--line); }
.news-feature:hover { color: #fff; border-color: var(--line-strong); }
.news-feature .in { position: relative; padding: 24px 26px; }
.news-feature h3 { font-family: var(--title); font-weight: 400; font-size: 30px; line-height: 1.15; margin: 10px 0 6px; }
.news-feature p { margin: 0 0 12px; color: #dac6cf; font-size: 15px; max-width: 560px; }
.news-feature .go { color: var(--gold-2); font-weight: 700; font-size: 14px; }
.news-when { display: flex; align-items: center; gap: 10px; }
.news-when time { color: var(--faint); font-size: 13px; font-weight: 600; }
.news-feature .news-when time { color: #dac6cf; }
.news-feed { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.news-row { display: grid; gap: 4px; padding: 16px 20px; border-bottom: 1px solid var(--line); color: var(--text); flex: 1; align-content: center; }
.news-row:last-child { border-bottom: 0; }
.news-row:hover { background: rgba(255, 255, 255, .03); color: #fff; }
.news-row b { font-size: 16px; }
.news-row p { margin: 0; color: var(--muted); font-size: 14px; }
@media (max-width: 900px) { .news-home { grid-template-columns: 1fr; } .news-feature { min-height: 0; } }

/* Features (home) */
.features { display: flex; flex-wrap: wrap; gap: 10px; }
.feature { padding: 10px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--text); font-weight: 600; font-size: 14.5px; }
.feature:hover { border-color: rgba(232, 193, 109, .55); color: var(--gold-2); }
/* Testimonials */
#testimonials { padding-bottom: 20px; }
.testimonials { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.testimonial { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.testimonial .stars { color: var(--gold); letter-spacing: 2px; }
.testimonial blockquote { margin: 0; color: #dcc8d1; font-size: 15px; line-height: 1.65; flex: 1; }
.testimonial blockquote p { margin: 0 0 8px; }
.testimonial figcaption { font-family: var(--title); font-size: 19px; color: #fff; }
.testimonial figcaption::before { content: "— "; color: var(--gold); }
.testimonials-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.testimonials-head { justify-content: space-between; }
.write-testimonial { text-align: center; padding: 34px 0 60px; color: var(--muted); }
/* Server information */
.server-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.server-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; }
.server-card h2 { font-family: var(--title); font-weight: 400; font-size: 24px; margin: 0 0 10px; }
.server-table { width: 100%; border-collapse: collapse; }
.server-table th, .server-table td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.server-table th { color: var(--muted); font-weight: 600; width: 45%; }
.server-table tr:last-child th, .server-table tr:last-child td { border-bottom: 0; }
.server-table .rate { color: var(--gold-2); font-size: 18px; }
.schedule { display: grid; gap: 10px; }
.schedule-row { display: grid; grid-template-columns: 170px 1fr auto; gap: 16px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; }
.schedule-day b { display: block; color: var(--gold-2); }
.schedule-day span { font-family: var(--title); font-size: 22px; }
.schedule-row small { display: block; color: var(--muted); }
.schedule-row small.tz { margin-top: 4px; color: var(--faint); font-size: 12px; }
.schedule-row small.tz b { color: var(--muted); font-weight: 700; }
.schedule-row small.tz b.you { color: var(--aqua); }
.server-more { padding-bottom: 50px; }
.text-page { max-width: 860px; padding-bottom: 60px; }
@media (max-width: 800px) { .server-grid { grid-template-columns: 1fr; } .schedule-row { grid-template-columns: 1fr; } }
/* Home pulse: both War of Emperium (First Edition, Domination) */
.pulse-woe { display: flex; gap: 16px; }
.pulse-woe span { display: grid; font-size: 22px; line-height: 1.15; }
.pulse-woe small { font-family: var(--body); font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--gold); margin-top: 2px; }

/* Videos in guides: YouTube loaded on click (site.js) */
.video-lite { position: relative; aspect-ratio: 16 / 9; width: 100%; border: 0; border-radius: 12px; background: #000 center / cover; cursor: pointer; overflow: hidden; }
.video-lite span { position: absolute; inset: 0; margin: auto; width: 78px; height: 54px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; color: #fff; background: rgba(230, 33, 23, .92); transition: transform .2s; }
.video-lite:hover span { transform: scale(1.08); }
.video-lite iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.guide-body .video-lite { display: block; max-width: 720px; margin: 10px 0 18px; }

.testimonial figcaption time { display: block; font-family: var(--body); font-size: 12px; color: var(--faint); margin-top: 2px; }
#testimonials { padding-bottom: 0; }
.testimonials-cta { margin-bottom: 0; }
footer { margin-top: 64px; }

/* Episodes timeline */
.episodes { display: grid; gap: 18px; max-width: 980px; padding-bottom: 60px; }
.episode { display: grid; grid-template-columns: 340px 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.episode.current { border-color: rgba(232, 193, 109, .6); box-shadow: 0 0 0 1px rgba(232, 193, 109, .25), 0 18px 50px -24px rgba(232, 193, 109, .5); }
.episode.coming { opacity: .8; }
.episode-art { width: 100%; height: 100%; min-height: 170px; object-fit: cover; }
.episode:not(:has(.episode-art)) { grid-template-columns: 1fr; }
.episode-body { padding: 18px 22px; }
.episode-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.episode-meta time { color: var(--faint); font-size: 13px; font-weight: 600; }
.pill.muted { background: rgba(255, 255, 255, .06); color: var(--muted); border-color: var(--line-strong); }
.episode h2 { font-family: var(--title); font-weight: 400; font-size: 26px; margin: 8px 0 6px; }
.episode ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 14.5px; columns: 2 220px; column-gap: 26px; }
.episode li { break-inside: avoid; margin: 2px 0; }
@media (max-width: 760px) { .episode { grid-template-columns: 1fr; } .episode-art { max-height: 180px; } }
/* News banners */
.news-banner { display: block; width: calc(100% + 56px); max-width: none; margin: -24px -28px 16px; aspect-ratio: 5 / 2; height: auto; object-fit: cover; border-bottom: 1px solid var(--line); }  /* 5:2 = the episode banners, shown whole (title included) */
.news-item { overflow: hidden; }
/* About us: team */
.team { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin: 10px 0 24px; }
.team-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 12px; text-align: center; display: grid; gap: 4px; justify-items: center; }
.team-card img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(232, 193, 109, .45); margin-bottom: 6px; }
.team-card b { font-family: var(--title); font-weight: 400; font-size: 19px; color: #fff; }
.team-card span { color: var(--gold-2); font-size: 13.5px; font-weight: 700; }
.team-card small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.team-card .langs { color: var(--faint); }

/* Guide tables: words wrap whole (overflow-wrap: anywhere made columns collapse to one letter), headers on one line */
.guide-body table.guide-table td, .guide-body table.guide-table th { overflow-wrap: break-word; }
.guide-body table.guide-table th { white-space: nowrap; }
.guide-body table.guide-table td ul { margin: 0; padding-left: 18px; }

/* Guides page search */
.guide-search { position: relative; margin: 0 0 22px; }
.guide-search input { width: 100%; min-height: 52px; padding: 0 18px 0 48px; font: 600 16px var(--body); color: var(--text); background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23e8c16d' stroke-width='2'%3E%3Ccircle cx='9' cy='9' r='6'/%3E%3Cpath d='m14 14 4 4'/%3E%3C/svg%3E") no-repeat 16px center; border: 1px solid var(--line-strong); border-radius: 14px; outline: none; }
.guide-search input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232, 193, 109, .15); }
.guide-results { display: grid; gap: 12px; margin-top: 14px; }
.guide-count, .guide-none { color: var(--muted); font-size: 14px; margin: 0; }
.guide-result { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: grid; gap: 4px; }
.guide-result-title { font-family: var(--title); font-size: 21px; color: #fff; text-decoration: none; }
.guide-result-title small { display: block; font-family: var(--body); font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gold); }
.guide-hit { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; text-decoration: none; color: var(--muted); font-size: 14px; line-height: 1.5; }
.guide-hit:hover { background: rgba(255, 255, 255, .04); }
.guide-hit b { color: var(--text); font-size: 14.5px; }
.guide-results mark { background: rgba(232, 193, 109, .28); color: #fff; border-radius: 3px; padding: 0 1px; }
.guide-more { font-size: 13px; font-weight: 700; color: var(--aqua); padding-left: 10px; text-decoration: none; }
body.guide-searching .guide-menu, body.guide-searching .start-banner { display: none; }
.guide-side-search input { width: 100%; min-height: 40px; padding: 0 12px; font: 600 14px var(--body); color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; margin-bottom: 12px; }

/* Monster cards: categories, badges, Normal / Elite switch */
.tag-badge { font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-strong); border-radius: 999px; padding: 1px 7px; vertical-align: middle; }
.tag-world-boss { background: rgba(255, 120, 90, .16); color: #ffb39c; border-color: rgba(255, 120, 90, .45); }
.tag-event-boss { background: rgba(255, 125, 149, .14); color: var(--aqua); border-color: rgba(255, 125, 149, .4); }
.tag-super-mvp { background: rgba(246, 184, 204, .16); color: #f8cddb; border-color: rgba(246, 184, 204, .45); }
.tag-elite-boss { background: rgba(246, 184, 204, .1); color: #f6b8cc; border-color: rgba(246, 184, 204, .35); }
.tag-boss { background: rgba(255, 255, 255, .06); color: var(--muted); border-color: var(--line-strong); }
.mob-switch { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; }
.mob-switch button { background: none; border: 0; color: var(--muted); border-radius: 9px; padding: 6px 16px; font: 700 13.5px var(--body); cursor: pointer; }
.mob-switch button.on { background: rgba(232, 193, 109, .14); color: var(--gold-2); }
.mob-switch button[data-mob-view="elite"].on { background: rgba(246, 184, 204, .16); color: #f8cddb; }
.elite-where { margin: 0 0 10px; color: #f6b8cc; font-size: 13.5px; }
.elite-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 0 0 12px; font-weight: 700; color: #fff; }
.elite-facts small { color: var(--faint); font-weight: 800; font-size: 11.5px; margin-right: 4px; }
.elite-trait { font-size: 11.5px; font-weight: 800; color: #f6b8cc; border: 1px solid rgba(246, 184, 204, .35); border-radius: 999px; padding: 2px 9px; }
.elite-view .mob-stats div { border-color: rgba(246, 184, 204, .25); }
.elite-class { padding: 8px 0; border-bottom: 1px solid var(--line); }
.elite-class b { color: #f8cddb; font-size: 14.5px; }
.elite-class ul { margin: 4px 0 0; padding-left: 18px; color: var(--muted); font-size: 13.5px; columns: 2 160px; column-gap: 18px; }
.elite-class li { break-inside: avoid; }
.elite-class li small { color: var(--faint); font-weight: 700; }
.elite-hint { color: var(--faint) !important; font-size: 12.5px; margin: 8px 0 0 !important; }
.elite-classes h4 { color: #f6b8cc !important; }
.tag-elite { font-style: normal; font-size: 10px; font-weight: 800; color: #f6b8cc; text-transform: uppercase; }
.mob-cols section { padding: 0; }  /* the global section padding (home page blocks) left a 96px hole above the drops */
.mob-area { font-family: var(--title); font-weight: 400; font-size: 24px; color: #fff; margin: 18px 0 2px; }
.mob-area:first-child { margin-top: 0; }
.item summary img.mob-portrait { border-radius: 10px; object-fit: cover; image-rendering: auto; }
.mob-cols h4.elite-boss-drops { margin-top: 14px; color: #f6b8cc; }
.mob-switch button[data-mob-view="boss"].on { background: rgba(255, 120, 90, .16); color: #ffb39c; }
.boss-view .elite-where { color: #ffb39c; }
.boss-view .mob-stats div { border-color: rgba(255, 120, 90, .25); }
.tag-boss-elite { color: #ffb39c; }

/* Home: most chosen specializations */
.top-specs { margin-top: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
.top-specs h3 { font-family: var(--title); font-weight: 400; font-size: 22px; margin: 0 0 12px; color: #fff; }
.top-specs ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 26px; }
.top-specs a { display: grid; grid-template-columns: 22px 32px minmax(0, 1fr) 80px 120px; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; text-decoration: none; color: var(--text); }
.top-specs a:hover { background: rgba(255, 255, 255, .04); }
.top-specs .rank { color: var(--gold); font-weight: 800; text-align: right; }
.top-specs img { width: 32px; height: 32px; image-rendering: pixelated; }
.top-specs .name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-specs .bar { height: 6px; background: rgba(255, 255, 255, .06); border-radius: 999px; overflow: hidden; }
.top-specs .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-2)); border-radius: 999px; }
.top-specs small { color: var(--muted); font-size: 12.5px; text-align: right; white-space: nowrap; }
@media (max-width: 860px) { .top-specs ol { grid-template-columns: 1fr; } }

/* Specialization medallions (static/specs/, round with a gold rim): smooth, no square frame around them */
img[src*="/specs/"] { image-rendering: auto !important; border-radius: 50%; }  /* the skill icon rules force pixelated */
.spec .ico:has(img[src*="/specs/"]), .page-head .big-ico:has(img[src*="/specs/"]) { background: none; border: 0; box-shadow: none; }
.spec .ico img[src*="/specs/"] { width: 56px; height: 56px; }
.page-head .big-ico img[src*="/specs/"] { width: 84px; height: 84px; filter: drop-shadow(0 0 18px rgba(232, 193, 109, .35)); }
.side li a img[src*="/specs/"], .family li img[src*="/specs/"] { width: 26px; height: 26px; }
.top-specs img[src*="/specs/"] { width: 36px; height: 36px; }
.top-right .btn { white-space: nowrap; }
/* Header between tablet and wide screens: the search keeps its icon and key, the menu tightens (no horizontal scroll) */
@media (max-width: 1360px) { .kbd-search { min-width: 0; } .kbd-label { display: none; } .nav { gap: 2px; } .nav a { padding: 8px 8px; } .top-right { gap: 8px; } }
@media (max-width: 1200px) { .nav { font-size: 14px; } .nav a { padding: 8px 6px; } .top-right .btn-gold { display: none; } }  /* the Download menu link covers Play now there */
@media (max-width: 1200px) { .brand img { height: 32px; } }
/* Tablets and phones: the menu goes to a second row that scrolls sideways (Home, News, Guides, Codex visible first);
   My account stays on the right of the first row */
@media (max-width: 1020px) {
  .topbar .wrap { flex-wrap: wrap; height: auto; column-gap: 12px; row-gap: 0; padding-top: 10px; }
  .topbar .nav { display: flex; order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; margin: 6px -8px 0; padding: 0 8px 8px; }
  .topbar .nav::-webkit-scrollbar { display: none; }
  .top-right .btn-line { display: inline-flex; }
}
@media (max-width: 560px) {
  .topbar .nav { font-size: 14px; }
  .topbar .nav a { padding: 7px 9px; }
  .brand img { height: 28px; }
  .top-right { gap: 6px; }
  .top-right .lang { display: inline-block; padding: 6px 4px; }
  .top-right .btn-small { padding: 7px 11px; font-size: 13px; }
}

/* Wipe announcement banner (every page until the wipe day) */
.wipe-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; padding: 9px 16px; text-decoration: none;
  background: linear-gradient(90deg, rgba(255, 120, 90, .18), rgba(232, 193, 109, .18)); border-bottom: 1px solid rgba(255, 120, 90, .35); color: var(--text); font-size: 14px; text-align: center; }
.wipe-banner b { color: #ffb39c; }
.wipe-banner span { color: var(--muted); }
.wipe-banner .wipe-count { font-style: normal; font-weight: 800; color: var(--gold-2); background: rgba(232, 193, 109, .14); border-radius: 999px; padding: 1px 10px; }
.wipe-banner .wipe-count:empty { display: none; }
.wipe-banner u { text-decoration: none; color: var(--aqua); font-weight: 700; }
.wipe-banner:hover u { text-decoration: underline; }

/* Guides + Codex reading theme switch (base.html, site.js) */
.lib-theme { position: fixed; z-index: 40; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 12px;
  background: rgba(12, 7, 9, .88); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(8px); box-shadow: 0 6px 20px rgba(0, 0, 0, .3); font: 600 12.5px/1 var(--body); }
.lib-theme span { color: #b39aa6; padding: 0 6px 0 8px; }
.lib-theme button { font: inherit; color: #f3eaee; background: transparent; border: 0; border-radius: 8px; padding: 7px 10px; cursor: pointer; }
.lib-theme button:hover { background: rgba(255, 255, 255, .08); }
.lib-theme button[aria-pressed="true"] { background: #e8c16d; color: #1a0c12; }
@media (max-width: 640px) { .lib-theme span { display: none; } .lib-theme { right: 10px; bottom: 10px; } }
/* module:qpet:start (Outil/site/qpet/qpet.css) */
/* Custom QPet System page (content/guides/systems/custom-qpet-system.html), laid out like the My Pet and Pet Breeder
   windows of daro.dll. The HTML is written by Outil/site/qpet/qpet_page.py (regions .qp-gen). Everything is scoped
   under .guide-body and uses the theme variables, so it works on the dark theme and on the light ones.
   Reuses from site.css: ol.steps, .fam / .fam-str ... .fam-luk (family badges), b.rng (ranges in green). */

/* in-game punctuation only ("Andre, Seeds: 1/1"): the web shows the parts as blocks */
.guide-body .qp-sep { display: none; }

/* family badges: the stat ones are in site.css; elements and random (colors of pet.inc g_pt_family_colors) */
.guide-body .fam-dark { background: #5a4a6a; }
.guide-body .fam-undead { background: #6a7a5a; }
.guide-body .fam-holy { background: #c9b23a; color: #2a2208; }
.guide-body .fam-fire { background: #e0553a; }
.guide-body .fam-water { background: #3a9ad6; }
.guide-body .fam-wind { background: #3f9f7c; }
.guide-body .fam-earth { background: #9a7a3a; }
.guide-body .fam-neutral { background: #7f7f7f; }
.guide-body .fam-rnd { background: #9a7f92; }
.guide-body a.fam, .guide-body a.fam:hover { color: #fff; text-decoration: none; border: 0; }
.guide-body a.fam-holy, .guide-body a.fam-holy:hover { color: #2a2208; }
.guide-body a.fam:hover { filter: brightness(1.15); }

.guide-body .qp-hint, .guide-body .qp-legend { color: var(--muted); font-size: 14px; }
.guide-body .qp-legend { margin: 0 0 10px; }

/* --- How it works: the 4 steps of the Pet Breeder window --- */
.guide-body ol.steps.qp-steps { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); align-items: stretch; }
.guide-body ol.steps.qp-steps > li { display: flex; align-items: center; gap: 10px; line-height: 1.4; min-height: 64px; }
.guide-body ol.steps.qp-steps > li img { flex: none; width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; }

/* --- Seeds: one card per seed --- */
.guide-body .qp-seedgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 10px 14px; margin: 12px 0 24px; }
.guide-body .qp-seed { padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.guide-body .qp-seed > h4 { margin: 0 0 4px; font-size: 16px; color: var(--gold-2); }
.guide-body .qp-seed > h4 img { width: 28px; height: 28px; object-fit: contain; vertical-align: -6px; margin-right: 6px; }
.guide-body .qp-seed > p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text); }
.guide-body .qp-seed > p.qp-where { margin-top: 6px; font-size: 13px; color: var(--muted); }
.guide-body .qp-seed > p.qp-where b { color: #2fa35a; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body .qp-seed > p.qp-where b,
html[data-gtheme="wiki"] body.lib .guide-body .qp-seed > p.qp-where b { color: #1e7a3f; }
.guide-body .qp-seed .fam { min-width: 0; margin: 0 1px; }

/* --- All pets: one tile per base pet --- */
.guide-body .qp-group { margin: 14px 0 18px; }
.guide-body .qp-group > h4 { margin: 0 0 2px; color: var(--gold-2); }
.guide-body .qp-group > p { margin: 0 0 8px; font-size: 14px; color: var(--muted); }
.guide-body .qp-allpets ul.qp-pets { list-style: none; margin: 0; padding: 0; columns: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.guide-body .qp-allpets ul.qp-pets > li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px 9px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); text-align: center; transition: border-color .2s, transform .2s; }
.guide-body .qp-allpets ul.qp-pets > li:hover { border-color: var(--gold); transform: translateY(-1px); }
.guide-body .qp-allpets a.qp-pet { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--text); text-decoration: none; border: 0; }
.guide-body .qp-allpets a.qp-pet:hover { color: var(--gold-2); }
.guide-body .qp-allpets a.qp-pet img { display: inline-block; height: 46px; width: auto; max-width: 70px; object-fit: contain; }
.guide-body .qp-allpets a.qp-pet img + img { margin-top: -4px; }
.guide-body .qp-allpets .qp-name { font-weight: 700; font-size: 13px; line-height: 1.25; }
.guide-body .qp-allpets .qp-fams { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; }
.guide-body .qp-allpets .qp-fams .fam, .guide-body .qp-bonus .fam, .guide-body .qp-tree .fam { min-width: 0; margin: 0; font-size: 10.5px; }

/* --- Evolution tree: base -> seed + Growth Jellopy -> stage 2 -> stage 3 -> final -> looks --- */
.guide-body .qp-tree { margin: 10px 0 16px; padding: 14px 14px 12px; border-radius: 16px; border: 1px solid var(--line); background: rgba(232, 193, 109, .04); }
.guide-body .qp-cols { display: flex; align-items: center; gap: 4px; overflow-x: auto; padding-bottom: 4px; }
.guide-body .qp-col { flex: 1 1 118px; min-width: 112px; max-width: 170px; }
.guide-body p.qp-stage { margin: 0 0 6px; text-align: center; font: 800 10.5px/1.3 var(--body); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.guide-body .qp-col > ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.guide-body .qp-node { padding: 7px 6px 8px; border-radius: 10px; background: var(--surface); border: 1.5px solid var(--line); text-align: center; font-weight: 700; font-size: 13px; line-height: 1.3; color: var(--text); }
.guide-body .qp-node > img { display: block; margin: 0 auto 3px; height: 48px; width: auto; max-width: 100%; object-fit: contain; }
.guide-body .qp-node .qp-seeds, .guide-body .qp-node .qp-cash, .guide-body .qp-node .qp-five { display: block; margin-top: 2px; font-weight: 400; font-size: 11.5px; color: var(--muted); }
.guide-body .qp-node .qp-cash img { height: 22px; width: auto; max-width: 34px; vertical-align: middle; }
.guide-body .qp-node > .fam { display: inline-block; margin-top: 4px; }
.guide-body .qp-final .qp-node { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(232, 193, 109, .25); }
.guide-body .qp-final .qp-five { color: var(--gold-2); font-weight: 700; }
.guide-body .qp-looks .qp-node { border-style: dashed; font-size: 12.5px; }
.guide-body .qp-looks .qp-node > img { height: 40px; }
.guide-body p.qp-arrow { flex: 0 0 76px; margin: 0; text-align: center; font-size: 11px; line-height: 1.3; color: var(--muted); }
.guide-body p.qp-arrow::before { content: "\2192"; display: block; font-size: 22px; line-height: 1.1; color: var(--gold); }
.guide-body p.qp-arrow-looks::before { content: "\22EF"; }
@media (max-width: 760px) {
  .guide-body .qp-cols { flex-direction: column; align-items: stretch; overflow: visible; }
  .guide-body .qp-col { max-width: none; flex: none; }
  .guide-body .qp-col > ul { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .guide-body p.qp-arrow { flex: none; padding: 2px 0; }
  .guide-body p.qp-arrow::before { content: "\2193"; }
  .guide-body p.qp-arrow-looks::before { content: "\22EE"; }
}

/* --- "<pet> can get": the bonus list of each family, ranges in green, 2 columns --- */
.guide-body .qp-bonus { margin: 6px 0 14px; }
.guide-body .qp-bonus > h4 { margin-bottom: 2px; }
.guide-body .qp-bonus > p.qp-hint { margin: 0 0 8px; }
.guide-body .qp-fam { margin: 0 0 10px; padding: 8px 14px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); scroll-margin-top: 90px; }
.guide-body p.qp-famhead { margin: 0 0 4px; font-weight: 700; color: var(--text); }
.guide-body p.qp-famhead .fam { font-size: 11px; margin-right: 6px; }
.guide-body p.qp-famrandom { margin: 4px 0 10px; font-weight: 400; color: var(--muted); }
.guide-body p.qp-famrandom .fam, .guide-body p.qp-hint .fam { margin: 0 1px; }
.guide-body .qp-bonus ul.qp-opts { list-style: none; margin: 0; padding: 0; columns: 2 230px; column-gap: 28px; font-size: 14px; line-height: 1.45; }
.guide-body .qp-bonus ul.qp-opts > li { break-inside: avoid; position: relative; padding: 2px 0 2px 12px; }
.guide-body .qp-bonus ul.qp-opts > li::before { content: "\2022"; position: absolute; left: 0; color: var(--muted); }
/* module:qpet:end */
/* module:stacking:start (Outil/site/stacking/stacking.css) */
/* Stacking groups page (templates/stacking.html, codex/stacking), 2026-11-04: rule box, group icons, member chips.
   To merge into site.css (after the ".stack-*" block). Theme variables only, so it works on the dark, Parchment and
   Wiki themes. Kind colour: buff = gold, debuff = aqua, other shared statuses = muted. */
.stk-buff { --stk-c: var(--gold); }
.stk-debuff { --stk-c: var(--aqua); }
.stk-status { --stk-c: var(--muted); }

/* Rule box at the top */
.stk-intro { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 22px; }
.stk-rule { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; font-size: 16.5px; font-weight: 700; line-height: 1.45; color: var(--text); }
.stk-points { list-style: none; margin: 0; padding: 0; counter-reset: stk; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.stk-points li { counter-increment: stk; position: relative; padding: 10px 12px 10px 42px; background: var(--raised); border: 1px solid var(--line); border-radius: 12px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.stk-points li::before { content: counter(stk); position: absolute; left: 11px; top: 10px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 800; color: var(--gold); border: 1px solid var(--gold); }
.stk-intro .stk-example { margin: 14px 0 0; }

/* Group icon: a skill icon in a tinted frame, with a small up / down mark for buffs / debuffs */
.stk-ico { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px;
  background: var(--raised); border: 1px solid var(--line-strong); }
@supports (background: color-mix(in srgb, red 10%, blue)) {
  .stk-ico { background: color-mix(in srgb, var(--stk-c) 12%, var(--raised)); border-color: color-mix(in srgb, var(--stk-c) 50%, transparent); }
}
.stk-ico img { width: 24px; height: 24px; image-rendering: pixelated; }
.stk-ico.big { width: 60px; height: 60px; border-radius: 14px; }
.stk-ico.big img { width: 48px; height: 48px; }
.stk-ico.sm { width: 28px; height: 28px; border-radius: 7px; }
.stk-buff.stk-ico::after, .stk-debuff.stk-ico::after { position: absolute; right: -5px; bottom: -5px; width: 17px; height: 17px; border-radius: 50%;
  display: grid; place-items: center; font-size: 9px; line-height: 1; background: var(--stk-c); color: var(--surface); border: 2px solid var(--surface); }
.stk-buff.stk-ico::after { content: "▲"; }
.stk-debuff.stk-ico::after { content: "▼"; }
.stk-ico.sm::after { width: 13px; height: 13px; font-size: 6.5px; right: -4px; bottom: -4px; border-width: 1px; }
.stk-ico.sm::after { display: none; }  /* not in the index chips: it looked like a button (the section title already says buff / debuff) */

/* Section titles (Buffs / Debuffs / Other shared statuses) */
.stk-kind { display: flex; align-items: center; gap: 10px; }
.stk-kind small { font: 800 12px var(--body); color: var(--muted); padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line-strong); }
.stk-mark::before { font-size: 15px; color: var(--stk-c); }
.stk-buff .stk-mark::before { content: "▲"; }
.stk-debuff .stk-mark::before { content: "▼"; }
.stk-status .stk-mark::before { content: "●"; }

/* Index of the groups of a section */
.stk-index { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 18px; }
.stk-index a { display: inline-flex; align-items: center; gap: 8px; padding: 4px 11px 4px 4px; border-radius: 10px; font-size: 13px; font-weight: 600;
  color: var(--muted); background: var(--surface); border: 1px solid var(--line); text-decoration: none; }
.stk-index a:hover, .stk-index a:focus-visible { color: var(--text); border-color: var(--line-strong); }

/* One card per group */
.stk-card { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--stk-c); border-radius: var(--radius);
  padding: 18px 20px; margin-bottom: 14px; scroll-margin-top: 90px; }
@supports (background: color-mix(in srgb, red 10%, blue)) {
  .stk-card { background: linear-gradient(180deg, color-mix(in srgb, var(--stk-c) 6%, var(--raised)), var(--surface) 110px); }
}
.stk-card:target { border-color: var(--stk-c); box-shadow: 0 0 0 1px var(--stk-c); }
.stk-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.stk-title { min-width: 0; }
.stk-title h3 { margin: 0; font-family: var(--title); font-weight: 400; font-size: 20px; line-height: 1.2; color: var(--text); }
.stk-sc { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.stk-sc code { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.stk-counts { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.stk-counts span { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 8px; color: var(--muted); border: 1px solid var(--line-strong); white-space: nowrap; }
.stk-counts b { color: var(--text); margin-left: 3px; }
.stk-part h4 { margin: 16px 0 8px; font: 800 11.5px var(--body); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

/* Kugan / job skill chip: icon, name, specialization or job */
.stk-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.stk-chip { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 6px 10px 6px 6px; border-radius: 10px;
  background: var(--raised); border: 1px solid var(--line); text-decoration: none; }
.stk-chip img, .stk-noico { flex: none; width: 24px; height: 24px; image-rendering: pixelated; padding: 3px; box-sizing: content-box; border-radius: 7px;
  background: var(--surface); border: 1px solid var(--line); }
.stk-chip-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.stk-chip-name { font-size: 13.5px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.stk-chip small { font-size: 11.5px; color: var(--muted); }
.stk-chip:hover, .stk-chip:focus-visible { border-color: var(--line-strong); }
.stk-chip:hover .stk-chip-name, .stk-chip:focus-visible .stk-chip-name { color: var(--aqua); }

.stk-items { margin: 14px 0 0; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 13px; color: var(--muted); }

@media (max-width: 640px) {
  .stk-intro, .stk-card { padding: 14px 14px; }
  .stk-rule { font-size: 15px; }
  .stk-counts { margin-left: 0; width: 100%; }
  .stk-chips { grid-template-columns: 1fr; }
}
/* module:stacking:end */
/* module:reborn:start (Outil/site/reborn/reborn.css) */
/* Reborn System + Mastery System (Lv 100 ~ 103) pages (content/guides/systems/reborn-system.html and
   mastery-system-lv-100-103.html), laid out like the REBORN (Rebirth) and TRANSCENDENCE windows of daro.dll.
   The HTML is written by Outil/site/reborn/reborn_pages.py (regions .rbw-gen / .msw-gen). Everything is scoped under
   .guide-body and uses the theme variables, so it works on the dark theme and on the light ones (Parchment, Wiki).
   The roman numerals (Reborn rows) and tier letters (Mastery) are drawn from data-roman / data-letter: the same
   information is in the text ("Reborn IV", "Master"). */

/* in-game punctuation only ("Reborn I: Base Level 80, +12 Status Points"): the web shows the parts as blocks */
.guide-body .rbw-sep, .guide-body .msw-sep { display: none; }

/* green values (stat points), as b.rng of site.css */
.guide-body .rbw-pts b, .guide-body b.msw-good, .guide-body p.msw-total b { color: #2fa35a; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body .rbw-pts b,
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body b.msw-good,
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body p.msw-total b,
html[data-gtheme="wiki"] body.lib .guide-body .rbw-pts b,
html[data-gtheme="wiki"] body.lib .guide-body b.msw-good,
html[data-gtheme="wiki"] body.lib .guide-body p.msw-total b { color: #1e7a3f; }

/* ============================== REBORN ============================== */

/* --- "Your Base Level after a Reborn": 10 small cards --- */
.guide-body ul.rbw-ladder, .guide-body ul.rbw-ladder.cols2 { list-style: none; columns: auto; margin: 12px 0 22px; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(132px, 100%), 1fr)); gap: 8px; }
.guide-body ul.rbw-ladder > li { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px 10px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line); line-height: 1.3; }
.guide-body ul.rbw-ladder .rbw-k { font-size: 12.5px; color: var(--muted); }
.guide-body ul.rbw-ladder .rbw-k b { font: 400 18px/1.1 var(--title); color: var(--gold-2); }
.guide-body ul.rbw-ladder .rbw-to { font-size: 13.5px; color: var(--text); }
.guide-body ul.rbw-ladder .rbw-to b { color: var(--gold); }

/* --- "List of Reborns": the 10 rows of the window --- */
.guide-body .rbw-list { display: grid; gap: 8px; margin: 12px 0 18px; }
.guide-body .rbw-row { position: relative; display: grid; grid-template-columns: minmax(170px, 230px) minmax(0, 1fr); gap: 4px 20px;
  align-items: center; padding: 10px 16px 10px 70px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
  transition: border-color .2s; }
.guide-body .rbw-row:hover { border-color: var(--gold); }
.guide-body .rbw-row > p { margin: 0; }
/* left: medallion, name, level, points */
.guide-body p.rbw-head { grid-column: 1; grid-row: 1 / span 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.guide-body p.rbw-head::before { content: attr(data-roman); position: absolute; left: 16px; top: 50%; width: 40px; height: 40px;
  margin-top: -20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1.5px solid var(--gold);
  background: radial-gradient(circle at 35% 30%, rgba(246, 220, 156, .22), rgba(232, 193, 109, .05) 70%);
  font: 700 13px/1 var(--title); letter-spacing: -.02em; color: var(--gold); }
.guide-body p.rbw-head[data-roman="VIII"]::before, .guide-body p.rbw-head[data-roman="VII"]::before { font-size: 11px; }
.guide-body p.rbw-head .rbw-name { flex: 1 0 100%; font: 400 18px/1.25 var(--title); color: var(--gold-2); }
.guide-body p.rbw-head .rbw-lv, .guide-body p.rbw-head .rbw-pts { font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.guide-body p.rbw-head .rbw-lv b { color: var(--gold); font-size: 15px; }
.guide-body p.rbw-head .rbw-pts b { font-size: 15px; }
/* right: what your Nth reborn needs, then the level you restart at */
.guide-body p.rbw-needs { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.guide-body p.rbw-needs .rbw-label { flex: 1 0 100%; font: 800 10.5px/1.3 var(--body); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.guide-body p.rbw-needs .rbw-label sup { font-size: 8px; text-transform: none; }
.guide-body .rbw-item { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 9px;
  background: var(--raised); border: 1px solid var(--line-strong); font-size: 14px; line-height: 1.2; color: var(--text); }
.guide-body .rbw-item img { flex: none; width: 28px; height: 28px; padding: 2px; border-radius: 6px; object-fit: contain;
  image-rendering: pixelated; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); }
.guide-body .rbw-item b { flex: none; white-space: nowrap; color: var(--gold); font-size: 15px; }
.guide-body p.rbw-after { grid-column: 2; font-size: 13px; color: var(--muted); }
.guide-body p.rbw-after b { color: var(--gold); }
/* last row: the Valkyrie Wing */
.guide-body .rbw-final { border-color: var(--gold); background: linear-gradient(160deg, rgba(232, 193, 109, .12), rgba(232, 193, 109, .02)); }
.guide-body .rbw-final p.rbw-head { grid-row: 1; }
.guide-body .rbw-final p.rbw-head > img { position: absolute; left: 16px; top: 50%; width: 40px; height: 40px; margin-top: -20px; padding: 6px;
  border-radius: 50%; border: 1.5px solid var(--gold); background: rgba(232, 193, 109, .14); object-fit: contain; image-rendering: pixelated; }
.guide-body .rbw-final p.rbw-after { grid-row: 1; }
@media (max-width: 640px) {
  .guide-body .rbw-row { grid-template-columns: 1fr; padding-left: 64px; }
  .guide-body p.rbw-head, .guide-body .rbw-final p.rbw-head { grid-row: auto; }
  .guide-body p.rbw-needs, .guide-body p.rbw-after, .guide-body .rbw-final p.rbw-after { grid-column: 1; grid-row: auto; }
  .guide-body p.rbw-head::before, .guide-body .rbw-final p.rbw-head > img { top: 14px; margin-top: 0; left: 12px; }
}

/* ============================== MASTERY ============================== */

/* --- "Requirements & Rewards": the tiers of the Transcendence column --- */
.guide-body .msw-ladder { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); gap: 10px; margin: 12px 0 24px; }
.guide-body .msw-tier { position: relative; padding: 12px 14px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.guide-body .msw-tier::before { content: attr(data-letter); position: absolute; left: 14px; top: 12px; width: 32px; height: 34px;
  display: flex; align-items: center; justify-content: center; border-radius: 7px; border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); font: 400 18px/1 var(--title); color: var(--gold); }
.guide-body .msw-tier.msw-classic::before { font-size: 14px; color: var(--muted); }
.guide-body .msw-tier > p.msw-name { margin: 0 0 8px; padding-left: 44px; min-height: 34px; display: flex; flex-direction: column; justify-content: center; line-height: 1.25; }
.guide-body .msw-tier > p.msw-name b { font: 400 18px/1.2 var(--title); color: var(--gold-2); }
.guide-body .msw-tier > p.msw-name .msw-lv { font-size: 13px; color: var(--muted); }
.guide-body .msw-tier > p.msw-name .msw-tag { font: 800 10.5px/1.3 var(--body); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.guide-body ul.msw-facts { list-style: none; margin: 0; padding: 8px 0 0; border-top: 1px solid var(--line); display: grid; gap: 4px; font-size: 13.5px; line-height: 1.35; }
.guide-body ul.msw-facts > li { display: flex; flex-direction: column; gap: 0; }
.guide-body ul.msw-facts .msw-k { font: 800 10.5px/1.3 var(--body); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.guide-body ul.msw-facts .msw-v { color: var(--text); }
.guide-body ul.msw-facts .msw-v b { color: var(--gold); }
.guide-body ul.msw-facts .msw-v b.msw-good { color: #2fa35a; }
.guide-body .msw-tier:not(.msw-classic):not(.msw-soon) { border-color: rgba(232, 193, 109, .35); }
.guide-body .msw-tier.msw-soon { opacity: .55; border-style: dashed; background: transparent; }
.guide-body .msw-tier.msw-soon::before { color: var(--muted); }
.guide-body .msw-tier.msw-soon > p.msw-name { margin: 0; }
.guide-body .msw-tier.msw-soon > p.msw-name b { color: var(--muted); }

/* --- one sheet per tier: Conditions box + Items needed box (the left column of the window) --- */
.guide-body .msw-sheet { display: grid; grid-template-columns: minmax(200px, 250px) minmax(0, 1fr); gap: 12px; align-items: start; margin: 10px 0 26px; }
.guide-body .msw-box { border-radius: 12px; background: var(--surface); border: 1px solid var(--line-strong); overflow: hidden; }
.guide-body p.msw-box-title { margin: 0; padding: 7px 12px; font-weight: 800; font-size: 13.5px; color: var(--gold-2);
  background: linear-gradient(180deg, rgba(232, 193, 109, .14), rgba(232, 193, 109, .05)); border-bottom: 1px solid var(--line-strong); }
.guide-body ul.msw-conds { list-style: none; margin: 0; padding: 6px 12px 10px; }
.guide-body ul.msw-conds > li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.guide-body ul.msw-conds > li:last-child { border-bottom: 0; }
.guide-body ul.msw-conds .msw-k { color: var(--text); }
.guide-body ul.msw-conds .msw-v { color: var(--muted); font-size: 13px; text-align: right; }
.guide-body ul.msw-conds .msw-v b { color: var(--gold); font-size: 15px; }
.guide-body ul.msw-tiles, .guide-body ul.msw-tiles.cols2 { list-style: none; columns: auto; margin: 0; padding: 10px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 6px; }
.guide-body ul.msw-tiles > li { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "icon name" "icon where";
  column-gap: 9px; align-items: center; padding: 5px 8px 5px 5px; border-radius: 9px; background: var(--raised); border: 1px solid var(--line); line-height: 1.25; }
.guide-body ul.msw-tiles > li > img { grid-area: icon; width: 40px; height: 40px; padding: 4px 4px 12px; border-radius: 6px; object-fit: contain;
  image-rendering: pixelated; background: rgba(255, 255, 255, .06); border: 1px solid var(--line-strong); }
.guide-body ul.msw-tiles b.msw-qty { grid-area: icon; align-self: end; justify-self: center; margin-bottom: 1px; white-space: nowrap; font-size: 10.5px; line-height: 1; color: var(--gold); }
.guide-body ul.msw-tiles .msw-iname { grid-area: name; align-self: end; font-weight: 700; font-size: 13.5px; color: var(--text); }
.guide-body ul.msw-tiles .msw-where { grid-area: where; align-self: start; font-size: 12px; color: var(--muted); }
.guide-body ul.msw-tiles .msw-alias { font-weight: 400; font-size: 12px; color: var(--muted); }
.guide-body p.msw-total { margin: 0; padding: 0 12px 10px; font-size: 13px; color: var(--muted); }
.guide-body .msw-noitems p.msw-total { padding-top: 10px; }
@media (max-width: 640px) {
  .guide-body .msw-sheet { grid-template-columns: 1fr; }
}

/* the dark theme draws h4 / titles in white: the light themes keep their ink */
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body ul.msw-facts .msw-v b.msw-good,
html[data-gtheme="wiki"] body.lib .guide-body ul.msw-facts .msw-v b.msw-good { color: #1e7a3f; }
html[data-gtheme="wiki"] body.lib .guide-body .rbw-item img, html[data-gtheme="wiki"] body.lib .guide-body ul.msw-tiles > li > img,
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body .rbw-item img,
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body ul.msw-tiles > li > img { background: rgba(255, 255, 255, .6); }

/* ============================== REBORN WINDOW (reborn.js) ============================== */
/* the warm REBORN window of daro.dll, same colours on every reading theme; .rbw-list stays the fallback */
.guide-body .rbw-list.rbw-hidden { display: none; }
.guide-body figure.rbw-ritual { margin: 12px 0 18px; }
.guide-body figure.rbw-ritual video { display: block; width: 100%; max-width: 560px; height: auto; border-radius: 12px; border: 1px solid var(--line); }
.guide-body figure.rbw-ritual figcaption { margin-top: 6px; font-size: 13px; color: var(--muted); }
.guide-body .rbw-win { --rw-line: #ead5a8; --rw-ink: #4a3218; --rw-gold: #c08a2c; --rw-soft: #8a7255; --rw-panel: #fffaf0;
  --surface: #fffaf0; --raised: #fff; --line: #ead5a8; --line-strong: #dcc08a; --text: #4a3218; --muted: #8a7255; --gold: #b07a1e; --gold-2: #8a5a12;
  margin: 14px 0 12px; border-radius: 8px; overflow: hidden; color: var(--rw-ink); border: 1px solid #d9b978;
  background: radial-gradient(ellipse at 50% 55%, #fff6dc, #f6e6c2 70%); box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.guide-body .rbw-wbar { display: flex; align-items: center; gap: 14px; padding: 4px 12px; font-size: 13px;
  background: linear-gradient(180deg, #fdf8ee, #f1e3c4); border-bottom: 1px solid var(--rw-line); }
.guide-body .rbw-wbar > span:first-child { font-weight: 700; }
.guide-body .rbw-dots { display: flex; gap: 5px; margin: 0 auto; }
.guide-body .rbw-dot { width: 15px; height: 15px; padding: 0; border-radius: 50%; border: 1.5px solid #d9b978; background: #fff; }
.guide-body .rbw-dot.done { background: #e2a93b; border-color: #c08a2c; }
.guide-body .rbw-dot.on { background: #fff; border-color: #c0392b; box-shadow: 0 0 0 2px rgba(192, 57, 43, .25); }
.guide-body .rbw-count { font-size: 12.5px; color: var(--rw-soft); white-space: nowrap; }
.guide-body .rbw-wbody { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(190px, 1fr); gap: 12px; padding: 12px 14px 14px; }
.guide-body .rbw-wleft { display: flex; flex-direction: column; gap: 10px; }
.guide-body .rbw-wbox { border-radius: 10px; border: 1px solid var(--rw-line); background: var(--rw-panel); padding: 10px 12px; }
.guide-body p.rbw-wtitle { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.guide-body p.rbw-wtitle b { font-size: 16px; color: #8a5a12; }
.guide-body .rbw-wtitle .rn, .guide-body .rbw-wt .rn { flex: none; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1.5px solid #d9b978; background: #fff; font: 700 11px/1 var(--title); color: #a0782e; }
.guide-body ul.rbw-wfacts { list-style: none; margin: 0; padding: 0; }
.guide-body ul.rbw-wfacts li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 14px; }
.guide-body ul.rbw-wfacts b { color: #c0392b; }
.guide-body ul.rbw-wfacts b.g { color: #c0392b; }
.guide-body p.rbw-wbt { margin: 0 0 8px; font-size: 14px; font-weight: 800; color: #a0661a; }
.guide-body p.rbw-wbt sup { font-size: 9px; }
.guide-body .rbw-wtiles { display: flex; flex-direction: column; gap: 6px; }
.guide-body .rbw-wtile { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.guide-body .rbw-wtile img { flex: none; width: 34px; height: 34px; padding: 3px; border-radius: 7px; border: 1px solid var(--rw-line); background: #fff;
  object-fit: contain; image-rendering: pixelated; }
.guide-body .rbw-wtile .nm { flex: 1; }
.guide-body .rbw-wtile b { color: #c0392b; }
.guide-body p.rbw-whint { margin: 8px 0 0; font-size: 12px; color: var(--rw-soft); }
.guide-body .rbw-wnote p { margin: 0; font-size: 13px; line-height: 1.45; }
.guide-body .rbw-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 100%; }
.guide-body .rbw-stage figure.rbw-ritual { margin: 0; width: 100%; }
.guide-body .rbw-stage figure.rbw-ritual video { max-width: none; border: 0; border-radius: 10px; -webkit-mask-image: radial-gradient(ellipse at center, #000 60%, transparent 100%);
  mask-image: radial-gradient(ellipse at center, #000 60%, transparent 100%); }
.guide-body .rbw-stage figcaption { display: none; }
.guide-body p.rbw-back { margin: 0; font-style: italic; font-size: 14px; color: #8a6a3a; }
.guide-body .rbw-wright { display: flex; flex-direction: column; gap: 3px; }
.guide-body .rbw-wt { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 9px; border: 1px solid transparent;
  background: none; font: inherit; color: var(--rw-ink); text-align: left; cursor: pointer; }
.guide-body .rbw-wt:hover { border-color: var(--rw-line); background: rgba(255, 255, 255, .55); }
.guide-body .rbw-wt.on { border-color: #e2b65a; background: #fff3d2; }
.guide-body .rbw-wt.on .rn { background: #e2a93b; border-color: #c08a2c; color: #fff; }
.guide-body .rbw-wt .nm { flex: 1; font-size: 14.5px; }
.guide-body .rbw-wt .lp { font-size: 12.5px; color: var(--rw-soft); white-space: nowrap; }
@media (max-width: 760px) {
  .guide-body .rbw-wbody { grid-template-columns: 1fr; }
  .guide-body .rbw-wright { order: -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-body .rbw-wt .lp { display: none; }
  .guide-body .rbw-count { display: none; }
}
/* module:reborn:end */
/* module:worldmap:start (Outil/site/worldmap/worldmap.css) */
/* Codex: Midgard North world map (templates/world_map.html): the map and, on its right, the card of the chosen zone;
   under them the search and the list of every zone on several columns (worldmap.js) */
.wm { display: grid; gap: 18px; }
.wm-top { scroll-margin-top: 84px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.wm-map { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--line-strong); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.wm-map img { display: block; width: 100%; height: auto; }
.wm-zone { position: absolute; border-radius: 3px; outline: 1px solid rgba(255, 255, 255, .0); transition: background .15s, outline-color .15s; scroll-margin: 120px; }
.wm-zone:hover { background: rgba(255, 255, 255, .18); outline-color: rgba(255, 255, 255, .7); }
.wm-zone.on { background: rgba(232, 193, 109, .35); outline: 2px solid #ffe08a; box-shadow: 0 0 0 4px rgba(232, 193, 109, .35), 0 0 24px rgba(255, 214, 120, .9); animation: wm-pulse 1.4s ease-in-out infinite; z-index: 2; }
@keyframes wm-pulse { 50% { box-shadow: 0 0 0 8px rgba(232, 193, 109, .15), 0 0 30px rgba(255, 214, 120, .6); } }

/* the chosen zone, beside the map */
.wm-info { position: sticky; z-index: 1; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; padding: 14px; border-radius: 14px;
  background: var(--surface); border: 1px dashed var(--line-strong); color: var(--muted); scroll-margin-top: 84px; }
.wm-info.full { padding-right: 34px; border: 1px solid var(--gold); color: var(--text);
  background: linear-gradient(180deg, rgba(232, 193, 109, .14), var(--surface)); box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
.wm-info p.wm-pick { margin: 0; font-size: 14px; line-height: 1.5; }
.wm-info img.wm-pic { display: block; width: 160px; height: 160px; margin: 0 auto 10px; object-fit: contain; border-radius: 10px;
  background: rgba(0, 0, 0, .06); border: 1px solid var(--line); }
.wm-info > a { display: block; color: var(--text); }
.wm-info > a b { font-size: 17px; }
.wm-info > a small { display: block; margin-top: 2px; color: var(--muted); }
.wm-info .wm-mobs { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 10px; font-size: 13px; }
.wm-info .wm-sheet { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700; }
.wm-close { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border: 0; border-radius: 6px; background: none;
  color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
.wm-close:hover { color: var(--text); background: var(--line); }

/* under the map: every zone, several columns */
.wm-below { display: grid; gap: 10px; }
.wm-below input { width: 100%; max-width: 420px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font: inherit; }
.wm-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px; }
.wm-list li { padding: 7px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.wm-list li[hidden] { display: none; }
.wm-list li.on { border-color: var(--gold); background: linear-gradient(180deg, rgba(232, 193, 109, .14), var(--surface)); }
.wm-list li > a { display: block; color: var(--text); line-height: 1.3; }
.wm-list li > a small { color: var(--muted); }
.wm-list .wm-mobs, .wm-list .wm-sheet { display: none; }
.wm-mobs a { display: inline-flex; align-items: center; gap: 4px; }
.wm-mobs img { height: 26px; width: auto; max-width: 34px; object-fit: contain; }
.wm-link { color: var(--aqua); }
@media (max-width: 980px) {
  .wm-top { grid-template-columns: 1fr; }
  .wm-info { position: static; max-height: none; }
}
/* module:worldmap:end */
/* module:achievements:start (Outil/site/achievements/achievements.css) */
/* Custom Achievements System page (content/guides/activities/custom-achievements-system.html): the "Adventurer Rank"
   section, laid out like the Adventurer Rank window of daro.dll (rank.inc) and the rank badge of the achievement
   window (adventurer.inc). The HTML is written by Outil/site/achievements/adventurer_rank.py (h2#Adventurer_Rank up to
   h2#Achievements_Pannel). Scoped under .guide-body, theme variables, works on the dark theme and the light ones.
   Reuses from site.css: ul.keyfacts, ol.steps, p.tip.
   Colours of the window: rank part in gold, achievement level part in red (rank.inc "Red: from your achievement
   level - gold: from your rank"); shields = rk_shield (gold #ffe7a3 -> #d9a441, letter #5a3a08). */

.guide-body { --ar-red: #ef6f86; --ar-gold: var(--gold-2); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body,
html[data-gtheme="wiki"] body.lib .guide-body { --ar-red: #b8324d; --ar-gold: #94650c; }

.guide-body .ar-lv { color: var(--ar-red); font-weight: 800; }
.guide-body .ar-gd { color: var(--ar-gold); font-weight: 800; }
.guide-body p.ar-legend { color: var(--muted); font-size: 14px; margin: 0 0 10px; }

/* --- the ladder: one card per rank, G -> A --- */
.guide-body .ar-ladder { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(168px, 100%), 1fr));
  gap: 12px; margin: 14px 0 24px; }
.guide-body .ar-rank { position: relative; display: flex; flex-direction: column; padding: 62px 12px 12px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line); transition: border-color .2s, transform .2s; }
.guide-body .ar-rank:hover { border-color: var(--gold); transform: translateY(-1px); }
.guide-body .ar-rank.ar-top { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(232, 193, 109, .25); }
.guide-body .ar-rank.ar-start { background: transparent; border-style: dashed; }

/* shield (drawn from data-rank; the letter is also in the heading text) */
.guide-body h4.ar-shield { margin: 0 0 4px; text-align: center; font-size: 17px; color: var(--gold-2); }
.guide-body h4.ar-shield::before { content: attr(data-rank); position: absolute; top: 10px; left: 50%; width: 40px; height: 48px;
  transform: translateX(-50%); display: grid; place-items: center; padding-bottom: 6px; box-sizing: border-box;
  font: 700 24px/1 Georgia, var(--title), serif; color: #5a3a08;
  background: linear-gradient(180deg, #fff2c4, #d9a441);
  clip-path: polygon(50% 0, 100% 14%, 100% 60%, 50% 100%, 0 60%, 0 14%);
  filter: drop-shadow(0 1px 0 rgba(150, 104, 30, .9)); }
.guide-body .ar-start h4.ar-shield { color: var(--muted); }
.guide-body .ar-start h4.ar-shield::before { color: #8aa4c8; background: linear-gradient(180deg, #e8f1ff, #c9d8ee); filter: none; }

.guide-body .ar-rank > p { margin: 0; font-size: 13.5px; line-height: 1.45; }
.guide-body .ar-rank > p.ar-need { text-align: center; color: var(--muted); margin-bottom: 8px; }
.guide-body .ar-rank > p.ar-need b { color: var(--text); font-size: 15px; }
.guide-body .ar-rank > p.ar-note { color: var(--muted); text-align: center; }
.guide-body .ar-rank > p.ar-label { margin-top: 6px; font: 800 10.5px/1.3 var(--body); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }

/* hunt: like the monster cards of the window (sprite + name + count) */
.guide-body .ar-rank ul.ar-hunt { list-style: none; margin: 4px 0 2px; padding: 0; display: grid; gap: 4px; }
.guide-body .ar-rank ul.ar-hunt > li { margin: 0; padding: 4px 8px; border-radius: 8px; background: var(--raised); border: 1px solid var(--line);
  font-size: 13px; line-height: 1.3; }
.guide-body .ar-rank ul.ar-hunt > li img { height: 26px; width: auto; max-width: 34px; object-fit: contain; vertical-align: middle; margin-right: 4px; }

/* bonus rows: name left, value right in gold (as in the left column of the window) */
.guide-body ul.ar-bonus, .guide-body ul.ar-rows { list-style: none; margin: 4px 0 0; padding: 0; }
.guide-body ul.ar-bonus > li, .guide-body ul.ar-rows > li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: 2px 8px; margin: 0; padding: 2px 0; border-bottom: 1px dotted var(--line); font-size: 13.5px; }
.guide-body ul.ar-bonus > li:last-child, .guide-body ul.ar-rows > li:last-child { border-bottom: 0; }
.guide-body ul.ar-bonus > li > b { color: var(--ar-gold); white-space: nowrap; }
.guide-body .ar-rank > p.ar-reward { margin-top: auto; padding-top: 8px; font-size: 12.5px; color: var(--muted); }

/* --- the two parts of the bonuses --- */
.guide-body .ar-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 12px; margin: 12px 0 14px; }
.guide-body .ar-part { padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.guide-body .ar-part > h4 { margin: 0 0 6px; font-size: 15px; }
.guide-body .ar-from-lv > h4 { color: var(--ar-red); }
.guide-body .ar-from-rank > h4 { color: var(--ar-gold); }
.guide-body .ar-from-rank { border-color: rgba(232, 193, 109, .45); }
.guide-body ul.ar-rows > li { font-size: 14px; padding: 4px 0; }
.guide-body ul.ar-rows > li > span { font-weight: 700; }
.guide-body ul.ar-rows > li > b { margin-left: auto; }
.guide-body .ar-from-lv ul.ar-rows > li > b { color: var(--ar-red); }
.guide-body .ar-from-rank ul.ar-rows > li > b { color: var(--ar-gold); }
.guide-body ul.ar-rows > li > i { flex-basis: 100%; text-align: right; font-size: 12.5px; font-style: normal; color: var(--muted); }
.guide-body p.ar-example { padding: 10px 14px; border-radius: 12px; background: rgba(232, 193, 109, .07); border: 1px solid rgba(232, 193, 109, .28);
  font-size: 14px; line-height: 1.6; }

/* light themes (Parchment, Wiki): site.css colours every "main b" and ".guide-body h4" with --text; the window colours stay */
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body ul.ar-bonus > li > b,
html[data-gtheme="wiki"] body.lib .guide-body ul.ar-bonus > li > b,
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body .ar-from-rank ul.ar-rows > li > b,
html[data-gtheme="wiki"] body.lib .guide-body .ar-from-rank ul.ar-rows > li > b,
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body .ar-from-rank > h4,
html[data-gtheme="wiki"] body.lib .guide-body .ar-from-rank > h4,
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body .ar-gd,
html[data-gtheme="wiki"] body.lib .guide-body .ar-gd { color: var(--ar-gold); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body .ar-from-lv ul.ar-rows > li > b,
html[data-gtheme="wiki"] body.lib .guide-body .ar-from-lv ul.ar-rows > li > b,
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body .ar-from-lv > h4,
html[data-gtheme="wiki"] body.lib .guide-body .ar-from-lv > h4,
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body .ar-lv,
html[data-gtheme="wiki"] body.lib .guide-body .ar-lv { color: var(--ar-red); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body h4.ar-shield,
html[data-gtheme="wiki"] body.lib .guide-body h4.ar-shield { color: var(--ar-gold); }

/* --- window pictures --- */
.guide-body figure.ar-shot { margin: 12px 0 14px; text-align: center; }
.guide-body figure.ar-shot img { display: block; margin: 0 auto; max-width: 100%; height: auto; border-radius: 14px; box-shadow: 0 6px 22px rgba(0, 0, 0, .28); }
.guide-body figure.ar-shot-small img { border-radius: 6px; box-shadow: none; }
.guide-body figure.ar-shot figcaption { margin-top: 6px; font-size: 13.5px; color: var(--muted); }

@media (max-width: 560px) {
  .guide-body .ar-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .guide-body .ar-rank { padding: 58px 9px 10px; }
}
@media (max-width: 380px) {
  .guide-body .ar-ladder { grid-template-columns: 1fr; }
}
/* module:achievements:end */
/* module:enchant:start (Outil/site/enchant/enchant.css) */
/* Custom Enchant System page (content/guides/systems/custom-enchant-system.html), laid out like the Soul Enchant
   window of daro.dll (Payle Itaki). The HTML is written by Outil/site/enchant/enchant_page.py (regions .en-gen).
   Everything is scoped under .guide-body and uses the theme variables, so it works on the dark theme and on the
   light ones (Parchment, Wiki). Reuses from site.css: .fam / .fam-str ... .fam-luk (stat badges). */

/* in-game punctuation only ("Stat +2: 11%", "ID: 8272"): the web shows the parts as blocks */
.guide-body .en-sep { display: none; }
.guide-body .en-dot { color: var(--muted); font-weight: 400; }

/* window panel + its step titles ("1 - CHOOSE A SOUL") */
.guide-body .en-win { margin: 14px 0 20px; padding: 14px 16px 12px; border-radius: 16px; border: 1px solid var(--line-strong);
  background: linear-gradient(170deg, rgba(150, 124, 255, .10), rgba(232, 193, 109, .04) 70%); }
.guide-body .en-step { margin: 0 0 10px; font: 800 11.5px/1.35 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.guide-body .en-hint { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.guide-body .en-hint b { color: var(--text); }
.guide-body .en-ico { flex: none; width: 44px; height: 44px; object-fit: contain; }

/* --- 1 - Choose a soul: one card per Soul --- */
.guide-body .en-souls, .guide-body .en-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 10px; }
.guide-body .en-soul, .guide-body .en-cat { padding: 10px 12px 11px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); transition: border-color .2s; }
.guide-body .en-soul:hover, .guide-body .en-cat:hover { border-color: var(--gold); }
.guide-body .en-soul { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center; }
.guide-body .en-soul > h4, .guide-body .en-cat > h4 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 17px; line-height: 1.2; }
.guide-body .en-soul > .en-rate { grid-column: 2; grid-row: 1; margin: 0; text-align: right; font-size: 11.5px; line-height: 1.1; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.guide-body .en-soul > .en-rate b { display: block; font: 400 28px/1 var(--title); letter-spacing: 0; color: var(--gold-2); }
.guide-body .en-soul > p:not(.en-rate) { grid-column: 1 / -1; margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; }
.guide-body .en-brill { color: var(--muted); }
.guide-body .en-brill b, .guide-body .en-ups b:last-child { color: #3fbf6f; }
.guide-body .en-break b { color: #ff7b8a; }

/* --- Possible results: bars without / with a Brilliant Soul --- */
.guide-body .en-odds { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 10px 14px; margin: 10px 0 14px; }
.guide-body .en-panel { padding: 11px 14px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.guide-body .en-panel-b { border-color: rgba(232, 193, 109, .35); }
.guide-body .en-odds > .en-wide { grid-column: 1 / -1; margin-top: 0; }
.guide-body .en-panel .en-hint { margin-top: 6px; font-size: 12.5px; }
.guide-body ul.en-bars { list-style: none; margin: 0; padding: 0; columns: auto; }
.guide-body ul.en-bars > li { display: grid; grid-template-columns: 132px minmax(0, 1fr) 50px; align-items: center; gap: 10px; margin: 0; padding: 3px 0; font-size: 13.5px; line-height: 1.3; }
.guide-body ul.en-bars > li > b { text-align: right; color: var(--gold-2); font-variant-numeric: tabular-nums; }
.guide-body ul.en-bars > li.en-zero { color: var(--muted); }
.guide-body ul.en-bars > li.en-zero > b { color: var(--muted); font-weight: 600; }
.guide-body .en-bar { display: block; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .10); overflow: hidden; }
.guide-body .en-bar > i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--violet), var(--gold)); }
@media (max-width: 420px) { .guide-body ul.en-bars > li { grid-template-columns: 110px minmax(0, 1fr) 46px; gap: 8px; font-size: 13px; } }

/* --- 2 - Catalysts --- */
.guide-body .en-cats.en-one { grid-template-columns: minmax(0, 520px); }
.guide-body .en-cat > p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; }
.guide-body .en-cat > p.en-head { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 14px; font-style: italic; color: var(--muted); }
.guide-body .en-cat > p.en-sub { margin-top: 4px; font-size: 13px; font-style: italic; color: var(--muted); }
.guide-body ul.en-ups, .guide-body ul.en-facts { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; columns: auto; }
.guide-body ul.en-ups > li, .guide-body ul.en-facts > li { margin: 0; padding: 3px 10px; border-radius: 999px; background: var(--raised); border: 1px solid var(--line); font-size: 13px; }
.guide-body ul.en-ups b, .guide-body ul.en-facts b { color: var(--gold-2); }
.guide-body ul.en-ups .en-to { font-size: 0; }
.guide-body ul.en-ups .en-to::before { content: "\2192"; font-size: 13px; color: var(--muted); margin: 0 2px; }
.guide-body ul.en-facts > li { display: inline-flex; gap: 6px; }
.guide-body ul.en-facts > li b { font-weight: 700; }
.guide-body .en-stats { display: flex; flex-wrap: wrap; gap: 5px; }
.guide-body .en-stats .fam { min-width: 42px; margin: 0; padding: 2px 8px; font-size: 11.5px; border-radius: 999px; }

/* --- cost strip, warning, 4th slot, equipment tabs --- */
.guide-body .en-costline { display: block; width: fit-content; max-width: 100%; margin: 0; line-height: 1.6;
  padding: 8px 16px; border-radius: 18px; background: var(--raised); border: 1px solid var(--line-strong); font-weight: 600; }
.guide-body .en-costline b { color: var(--gold-2); font-weight: 800; }
.guide-body .en-coin { width: 26px; height: 24px; object-fit: contain; vertical-align: -6px; margin-right: 4px; }
.guide-body .en-costline .en-dot { margin: 0 4px; }
.guide-body .en-warnline { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; font-weight: 700; font-size: 14px;
  color: #ff8a96; background: rgba(224, 72, 88, .10); border: 1px solid rgba(224, 72, 88, .38); }
.guide-body ul.en-slot { margin: 10px 0 14px; padding-left: 20px; font-size: 14px; columns: auto; }
.guide-body ul.en-slot b { color: var(--gold-2); }
.guide-body .en-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.guide-body .en-tab { padding: 4px 12px; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 13.5px; font-weight: 700; color: var(--muted); }
.guide-body .en-tab.on { color: var(--gold-2); border-color: var(--gold); background: rgba(232, 193, 109, .14); }

/* --- Possible enchants: every enchant by tier, compact columns --- */
.guide-body .en-list { margin: 10px 0 20px; }
.guide-body .en-tier { margin: 12px 0 0; padding: 10px 14px 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.guide-body .en-tier > h4 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 17px; }
.guide-body .en-tnum { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 26px; padding: 0 6px; border-radius: 8px;
  font: 800 13px/1 var(--body); color: var(--gold-2); border: 1px solid var(--gold); background: rgba(232, 193, 109, .12); }
.guide-body .en-tier > p.en-count { margin: 2px 0 6px 44px; font-size: 12.5px; color: var(--muted); }
.guide-body ul.en-names, .guide-body ul.en-names.cols2 { list-style: none; margin: 0; padding: 0; columns: 4 150px; column-gap: 18px; }
.guide-body .en-t5 ul.en-names { columns: 6 100px; }
.guide-body ul.en-names > li { break-inside: avoid; margin: 0; padding: 2px 0; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; border-bottom: 1px dashed var(--line); }
.guide-body ul.en-names a.ref { border-bottom: 0; }
.guide-body ul.en-names a.ref img { width: 18px; height: 18px; margin: -3px 5px -2px 0; }

/* light themes (Parchment, Wiki): darker greens and reds */
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body .en-brill b,
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body .en-ups b:last-child,
html[data-gtheme="wiki"] body.lib .guide-body .en-brill b,
html[data-gtheme="wiki"] body.lib .guide-body .en-ups b:last-child { color: #1e7a3f; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body .en-break b,
html[data-gtheme="wiki"] body.lib .guide-body .en-break b { color: #b0263a; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body .en-warnline,
html[data-gtheme="wiki"] body.lib .guide-body .en-warnline { color: #a3202f; background: rgba(176, 38, 58, .07); border-color: rgba(176, 38, 58, .35); }

html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body .en-bar,
html[data-gtheme="wiki"] body.lib .guide-body .en-bar { background: rgba(90, 60, 30, .13); }

/* bar widths (written by enchant_page.py) */
/* en-widths:start (generated) */
.guide-body .en-bar > i.en-w0 { width: 0%; }
.guide-body .en-bar > i.en-w5 { width: 5%; }
.guide-body .en-bar > i.en-w10 { width: 10%; }
.guide-body .en-bar > i.en-w14 { width: 14%; }
.guide-body .en-bar > i.en-w19 { width: 19%; }
.guide-body .en-bar > i.en-w23 { width: 23%; }
.guide-body .en-bar > i.en-w27 { width: 27%; }
.guide-body .en-bar > i.en-w30 { width: 30%; }
.guide-body .en-bar > i.en-w38 { width: 38%; }
.guide-body .en-bar > i.en-w40 { width: 40%; }
.guide-body .en-bar > i.en-w41 { width: 41%; }
.guide-body .en-bar > i.en-w60 { width: 60%; }
.guide-body .en-bar > i.en-w63 { width: 63%; }
.guide-body .en-bar > i.en-w70 { width: 70%; }
/* en-widths:end */
/* module:enchant:end */
/* module:instances:start (Outil/site/instances/instances.css) */
/* Dungeon guide pages laid out like the INSTANCES window of daro.dll (instwin.inc): nightmare-dungeons.html,
   new-dungeons.html, elemental-dungeons.html (content/guides/activities/). The HTML is written by
   Outil/site/instances/instances_pages.py (regions .ig-gen). Everything is scoped under .guide-body and uses the theme
   variables, so it works on the dark theme and on the light Parchment / Wiki themes.
   Pictures: @guides/instances/ (INSTANCES window banners, MVP BOARD portraits, Warper thumbnails). */

/* --- shared --- */
.guide-body .ig-gen { --nm: #e0405a; --ok: #2fa35a; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body .ig-gen,
html[data-gtheme="wiki"] body.lib .guide-body .ig-gen { --nm: #b3203c; --ok: #1e7a3f; }
.guide-body .ig-sep { display: none; }  /* in-game punctuation only */
.guide-body .ig-l { display: inline-block; margin-right: 6px; font: 800 10.5px/1.4 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.guide-body .ig-gen b.ig-ok { color: var(--ok); }
.guide-body .ig-gen figure { margin: 0; }
.guide-body .ig-gen figure img { display: block; }
.guide-body .ig-gen ul.cols2 { columns: auto; }
.guide-body .ig-gen .tscroll { margin: 0; overflow: visible; }
.guide-body .ig-gen .tscroll.wide > table { min-width: 0; }

/* tables shown as tiles (picture | #id | name | value): the site links the name to the Codex with its icon/sprite */
.guide-body table.nm-trade, .guide-body table.el-roster { display: block; width: 100%; border: 0; margin: 8px 0 18px; }
.guide-body table.nm-trade caption { display: block; text-align: left; font-family: var(--title); font-size: 18px; color: var(--gold-2); padding: 0 0 10px; }
.guide-body table.nm-trade tbody, .guide-body table.el-roster tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 8px; }
.guide-body table.nm-trade tr, .guide-body table.el-roster tr { display: grid; grid-template-columns: 40px 1fr auto; grid-template-areas: "pic name val" "pic id val"; align-items: center;
  column-gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.guide-body table.nm-trade td, .guide-body table.el-roster td { display: block; padding: 0; border: 0; background: none; text-align: left; }
.guide-body td.ig-pic { grid-area: pic; text-align: center; }
.guide-body td.ig-pic img { max-width: 40px; max-height: 40px; width: auto; height: auto; object-fit: contain; }
.guide-body tr:has(td.ig-name a.ref) td.ig-pic { display: none; }
.guide-body tr:has(td.ig-name a.ref) { grid-template-columns: 1fr auto; grid-template-areas: "name val" "id val"; }
.guide-body td.ig-id { grid-area: id; font-size: 11.5px; color: var(--muted); }
.guide-body td.ig-name { grid-area: name; font-weight: 700; font-size: 14px; line-height: 1.3; color: var(--text); }
.guide-body td.ig-name a.ref { border-bottom: 0; }
.guide-body td.ig-name a.ref img { width: 34px; height: 34px; max-width: 40px; margin: -6px 6px -6px 0; }
.guide-body td.ig-name a.ref-mob img { width: auto; height: 36px; }

/* --- Nightmare Dungeons --- */
.guide-body ul.nm-rates { list-style: none; padding: 0; margin: 6px 0 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 10px; }
.guide-body ul.nm-rates > li { padding: 10px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); line-height: 1.4; }
.guide-body ul.nm-rates > li .ig-l { display: block; }
.guide-body ul.nm-rates > li b { color: var(--text); }
.guide-body ul.nm-rates > li.nm-rate-1 { border-color: var(--gold); }
.guide-body ul.nm-rates > li.nm-rate-1 b { color: var(--gold-2); }
.guide-body table.nm-trade td.nm-keys { grid-area: val; text-align: right; font-size: 12px; color: var(--muted); white-space: nowrap; }
.guide-body table.nm-trade td.nm-keys b { display: block; font-size: 18px; line-height: 1.1; color: var(--nm); }

.guide-body p.nm-tier { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; font-size: 13px; color: var(--muted); }
.guide-body p.nm-tier b { padding: 3px 10px; border-radius: 10px; border: 1px solid var(--nm); color: var(--nm); font: 800 11.5px/1.3 var(--body); letter-spacing: .12em; }
.guide-body p.nm-tier::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.guide-body .nm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); gap: 14px; margin: 0 0 22px; }
.guide-body .nm-card { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); transition: border-color .2s, transform .2s; }
.guide-body .nm-card:hover { border-color: var(--nm); transform: translateY(-1px); }
.guide-body .nm-pic { position: relative; aspect-ratio: 16 / 8; overflow: hidden; background: var(--raised); border-bottom: 2px solid var(--nm); }
.guide-body .nm-pic img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 30%; }
.guide-body .nm-info { padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.guide-body .nm-info > h4 { margin: 0; font-size: 18px; line-height: 1.25; color: var(--gold-2); }
.guide-body .nm-info > p { margin: 0; font-size: 13.5px; line-height: 1.45; }
.guide-body p.nm-origin { color: var(--muted); font-size: 12.5px; margin-top: -3px; }
.guide-body p.nm-mvp { color: var(--text); }
.guide-body ul.nm-facts { list-style: none; padding: 0; margin: 4px 0 2px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.guide-body ul.nm-facts > li, .guide-body ul.el-facts > li { padding: 4px 2px 5px; border-radius: 8px; background: var(--raised); border: 1px solid var(--line); text-align: center; line-height: 1.2; overflow-wrap: normal; min-width: 0; }
.guide-body ul.nm-facts > li .ig-l, .guide-body ul.el-facts > li .ig-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.guide-body ul.nm-facts > li .ig-l { display: block; margin: 0; font-size: 8.5px; letter-spacing: .06em; }
.guide-body ul.nm-facts > li b { font-size: 12.5px; color: var(--text); white-space: nowrap; }
.guide-body ul.nm-facts > li b.ig-ok { color: var(--ok); }
.guide-body p.nm-cost b { color: var(--nm); }
.guide-body p.nm-chest b { color: var(--gold-2); }
.guide-body p.nm-mode b { color: var(--text); font-weight: 700; }
.guide-body p.nm-win { margin-top: auto !important; padding-top: 4px; font-size: 12px !important; color: var(--muted); font-style: italic; }
@media (max-width: 360px) { .guide-body ul.nm-facts { grid-template-columns: repeat(2, 1fr); } }

/* --- New Dungeons --- */
.guide-body ul.nd-index { list-style: none; padding: 0; margin: 16px 0 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 10px; }
.guide-body ul.nd-index > li { position: relative; display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  padding: 9px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); transition: border-color .2s, transform .2s; }
.guide-body ul.nd-index > li:hover { border-color: var(--gold); transform: translateY(-1px); }
.guide-body ul.nd-index > li > a { display: contents; color: var(--text); text-decoration: none; }
.guide-body ul.nd-index > li > a::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }  /* whole card clickable */
.guide-body ul.nd-index > li > a img { grid-row: 1 / span 2; width: 64px; height: 64px; max-width: none; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--raised); }
.guide-body ul.nd-index .nd-iname { font-weight: 800; font-size: 15px; color: var(--gold-2); align-self: end; }
.guide-body ul.nd-index .nd-where { grid-column: 2; font-size: 12.5px; color: var(--muted); align-self: start; line-height: 1.35; }
.guide-body span.nd-tag { position: absolute; top: 8px; right: 10px; padding: 1px 8px; border-radius: 9px; font: 800 10px/1.5 var(--body); letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold-2); border: 1px solid var(--gold); }

.guide-body .nd-dun { margin: 8px 0 26px; padding: 14px 16px 6px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.guide-body .nd-dun h3 { margin: 4px 0 8px; font-size: 18px; }
.guide-body .nd-top { display: flex; gap: 16px; align-items: flex-start; }
.guide-body figure.nd-map img { width: 96px; height: 96px; max-width: none; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--raised); }
.guide-body .nd-route { flex: 1; min-width: 0; }
.guide-body .nd-route > p { margin: 0 0 6px; font-size: 14px; }
.guide-body ol.nd-steps { list-style: none; counter-reset: nd; padding: 0; margin: 0 0 8px; display: grid; gap: 6px; }
.guide-body ol.nd-steps > li { counter-increment: nd; position: relative; padding: 6px 10px 6px 40px; border-radius: 10px; background: var(--raised); border: 1px solid var(--line); font-size: 14px; line-height: 1.4; }
.guide-body ol.nd-steps > li::before { content: counter(nd); position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font: 700 12px/1 var(--title); color: #1a0c12; background: linear-gradient(135deg, var(--gold-2), var(--gold)); }
.guide-body p.nd-also { font-size: 13.5px; color: var(--muted); }
.guide-body p.nd-warp { font-size: 13px; color: var(--muted); }
.guide-body figure.nd-shot { flex: 0 0 auto; }
.guide-body figure.nd-shot img { width: 220px; max-width: 100%; border-radius: 10px; border: 1px solid var(--line-strong); }
.guide-body .nd-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 14px; margin-top: 10px; }
.guide-body .nd-box { min-width: 0; }
.guide-body ul.nd-mobs { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.guide-body ul.nd-mobs > li { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 10px; background: var(--raised); border: 1px solid var(--line); font-size: 13.5px; line-height: 1.3; }
.guide-body ul.nd-mobs > li img { max-height: 30px; max-width: 44px; width: auto; }
.guide-body ul.nd-mobs > li a.ref { border-bottom: 0; }
.guide-body h4.nd-mvphead { margin: 6px 0 6px; font-family: var(--body); font: 800 11px/1.4 var(--body); letter-spacing: .1em; color: var(--nm); }
.guide-body ul.nd-mvps > li { border-color: var(--nm); }
.guide-body .nd-mines { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 8px; }
.guide-body .nd-mine { padding: 8px 10px 10px; border-radius: 12px; background: var(--raised); border: 1px solid var(--line); }
.guide-body .nd-mine > h4 { margin: 0 0 6px; font-size: 15px; color: var(--gold-2); }
.guide-body .nd-mine > ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.guide-body .nd-mine > ul > li { padding: 2px 8px; border-radius: 8px; font-size: 12.5px; border: 1px solid var(--line-strong); background: var(--surface); }
.guide-body li.nd-ore-4 { border-color: #6f9b5a !important; }
.guide-body li.nd-ore-5 { border-color: #4a8cc9 !important; }
.guide-body li.nd-ore-6 { border-color: #b08a3a !important; }
.guide-body li.nd-ore-7 { border-color: #9a5ac0 !important; }
.guide-body li.nd-ore-8 { border-color: #d0405a !important; }
.guide-body .nd-gallery { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.guide-body figure.nd-prev img, .guide-body figure.el-mapimg img { width: 140px; height: 140px; max-width: none; object-fit: cover; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--raised); transition: transform .2s, border-color .2s; }
.guide-body figure.nd-prev a:hover img, .guide-body figure.el-mapimg a:hover img { border-color: var(--gold); transform: scale(1.03); }
@media (max-width: 640px) {
  .guide-body .nd-top { flex-wrap: wrap; }
  .guide-body .nd-route { flex-basis: calc(100% - 112px); }
  .guide-body figure.nd-shot { flex: 1 1 100%; min-width: 0; }
  .guide-body figure.nd-shot img { width: 100%; }
  .guide-body figure.nd-prev img { width: 110px; height: 110px; }
}

/* --- Elemental Dungeons --- */
.guide-body .el-card { --el: #9a9a9a; }
.guide-body .el-fire { --el: #e0553a; }
.guide-body .el-water { --el: #3a9ad6; }
.guide-body .el-earth { --el: #a07a3a; }
.guide-body .el-wind { --el: #3f9f7c; }
.guide-body .el-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 14px; margin: 14px 0 24px; }
.guide-body .el-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--el); }
.guide-body .el-pics { display: flex; align-items: flex-end; gap: 8px; }
.guide-body figure.el-boss img { width: 96px; height: 96px; max-width: none; object-fit: cover; border-radius: 12px; border: 2px solid var(--el); }
.guide-body figure.el-mini img { width: 64px; height: 64px; max-width: none; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--raised); }
.guide-body .el-card > h4 { margin: 2px 0 0; font-size: 19px; }
.guide-body .el-card > h4 a { color: var(--gold-2); text-decoration: none; border: 0; }
.guide-body .el-card > h4 a:hover { color: var(--el); }
.guide-body ul.el-facts { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.guide-body ul.el-facts > li .ig-l { display: block; margin: 0; font-size: 8.5px; letter-spacing: .05em; }
.guide-body ul.el-facts > li b { font-size: 12.5px; color: var(--text); }
.guide-body ul.el-facts > li.el-elem b { color: var(--el); }
.guide-body .el-card > p { margin: 0; font-size: 13.5px; line-height: 1.45; }
.guide-body p.el-bossline b { color: var(--el); font-size: 15px; }
.guide-body p.el-danger { padding: 6px 10px; border-radius: 10px; border: 1px solid rgba(255, 120, 90, .35); background: rgba(255, 120, 90, .07); }
.guide-body p.el-routehead { margin-top: 2px !important; }
.guide-body ul.el-route { list-style: none; padding: 0; margin: 0; display: grid; gap: 3px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.guide-body ul.el-route > li { padding-left: 14px; position: relative; }
.guide-body ul.el-route > li::before { content: "\203A"; position: absolute; left: 2px; color: var(--el); font-weight: 800; }
.guide-body p.el-video { margin-top: auto !important; padding-top: 4px; }
.guide-body table.el-roster td.el-total { grid-area: val; text-align: right; white-space: nowrap; }
.guide-body table.el-roster td.el-total .ig-l { display: block; margin: 0; font-size: 9px; }
.guide-body table.el-roster td.el-total b { font-size: 17px; color: var(--gold-2); }
.guide-body table.el-roster tr.el-big { border-color: var(--gold); }
.guide-body .el-maps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 10px; margin: 10px 0 22px; }
.guide-body .el-map { display: grid; grid-template-columns: 140px 1fr; grid-template-rows: auto 1fr; column-gap: 12px; padding: 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.guide-body .el-map.el-bossroom { border-color: var(--gold); }
.guide-body figure.el-mapimg { grid-row: 1 / span 2; }
.guide-body .el-map > h4 { margin: 0 0 4px; font-size: 16px; color: var(--gold-2); }
.guide-body table.el-spawn { width: 100%; border-collapse: collapse; margin: 0; border: 0; font-size: 13.5px; }
.guide-body table.el-spawn td { padding: 2px 0; border: 0; background: none; vertical-align: middle; line-height: 1.3; }
.guide-body table.el-spawn td.el-n { width: 34px; padding-right: 6px; text-align: right; font-weight: 800; color: var(--gold-2); white-space: nowrap; }
.guide-body table.el-spawn td.el-n::after { content: "\00D7"; margin-left: 1px; font-weight: 400; color: var(--muted); }
.guide-body table.el-spawn a.ref { border-bottom: 0; }
.guide-body table.el-spawn a.ref-mob img { height: 26px; max-width: 38px; margin: -6px 5px -4px 0; }
@media (max-width: 420px) {
  .guide-body .el-map { grid-template-columns: 100px 1fr; }
  .guide-body figure.el-mapimg img { width: 100px; height: 100px; }
}
/* module:instances:end */
/* module:warper:start (Outil/site/warper/warper.css) */
/* General Features page (content/guides/basics/general-features.html), "Warper destinations" block laid out like
   the Valkyrie window of daro.dll (warper_daro.txt): portrait + bubble, one tab per category, one tile per
   destination (minimap thumbnail, name, map code). The HTML is written by Outil/site/warper/warper_page.py
   (region div.wp-gen). warper.js (optional) turns the h4 headings into tabs and adds the search bar (.wp-js).
   Everything is scoped under .guide-body and uses the theme variables (dark theme and light Parchment/Wiki themes). */

.guide-body .wp-gen { margin: 14px 0 26px; padding: 14px 16px 6px; border-radius: 14px; background: var(--surface);
  border: 1px solid var(--line-strong); }
.guide-body .wp-gen > h3 { margin-top: 0; }

/* --- Valkyrie: portrait and her bubble (the portrait column of the window) --- */
.guide-body .wp-valk { display: flex; align-items: flex-end; gap: 14px; margin: 0 0 12px; }
.guide-body .wp-valk img.wp-portrait { flex: none; width: auto; max-height: 200px; }
.guide-body .wp-bubble { position: relative; flex: 1 1 auto; padding: 10px 14px; border-radius: 12px; background: var(--raised);
  border: 1px solid var(--line); margin-bottom: 12px; }
.guide-body .wp-bubble::before { content: ""; position: absolute; left: -8px; bottom: 18px; width: 14px; height: 14px;
  background: var(--raised); border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: rotate(45deg); }
.guide-body .wp-bubble p { margin: 0 0 4px; line-height: 1.45; }
.guide-body .wp-bubble p.wp-who { color: var(--gold); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 13px; }
.guide-body .wp-bubble p.wp-hint { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
@media (max-width: 560px) {
  .guide-body .wp-valk img.wp-portrait { max-height: 130px; }
}

/* --- one tab = one category --- */
.guide-body .wp-tab { margin: 0 0 14px; }
.guide-body .wp-tab > h4 { margin: 16px 0 8px; padding-bottom: 4px; color: var(--gold-2); border-bottom: 1px solid var(--line); }

/* --- tiles --- */
.guide-body ul.wp-grid { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(min(176px, 100%), 1fr)); }
.guide-body ul.wp-grid > li.wp-card { margin: 0; padding: 6px 8px; display: grid; grid-template-columns: 48px 1fr;
  column-gap: 10px; align-content: center; min-height: 60px; border-radius: 10px; background: var(--raised);
  border: 1px solid var(--line); }
.guide-body ul.wp-grid > li.wp-card:hover { border-color: var(--gold); }
.guide-body li.wp-card > img, .guide-body li.wp-card > .wp-nopic { grid-column: 1; grid-row: 1 / span 4; align-self: center;
  width: 48px; height: 48px; object-fit: contain; }
.guide-body li.wp-card > .wp-nopic { border-radius: 8px; border: 1px dashed var(--line-strong); box-sizing: border-box; }
.guide-body li.wp-card > span, .guide-body li.wp-card > code { grid-column: 2; min-width: 0; overflow-wrap: anywhere; }
.guide-body li.wp-card > .wp-name { color: var(--text); font-weight: 700; font-size: 14px; line-height: 1.3; }
.guide-body li.wp-card > code.wp-code { justify-self: start; padding: 0; background: none; border: 0; color: var(--muted);
  font-size: 12px; line-height: 1.4; }
.guide-body li.wp-card > .wp-note { color: var(--muted); font-size: 12px; font-style: italic; line-height: 1.3; }
.guide-body li.wp-card > .wp-lock { color: var(--gold); font-size: 12px; line-height: 1.3; }

/* --- multi-floor groups (">Glast Heim" sub-list of the window) --- */
.guide-body .wp-group { margin: 4px 0 6px; }
.guide-body .wp-group > h5 { display: inline-block; margin: 6px 8px 6px 0; font-size: 15px; color: var(--text); }
.guide-body .wp-group > p.wp-count { display: inline-block; margin: 0; padding: 1px 8px; border-radius: 999px; font-size: 12px;
  color: var(--aqua); border: 1px solid var(--aqua); }

/* --- warper.js: tab bar, search bar --- */
.guide-body .wp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.guide-body .wp-bar button { padding: 5px 12px; border-radius: 8px 8px 0 0; border: 1px solid var(--line); border-bottom-color: var(--line-strong);
  background: var(--surface); color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.guide-body .wp-bar button:hover { color: var(--text); }
.guide-body .wp-bar button[aria-selected="true"] { background: var(--raised); color: var(--gold); border-color: var(--gold); }
.guide-body .wp-bar input[type="search"] { flex: 1 1 180px; min-width: 0; margin-left: auto; padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--line-strong); background: var(--raised); color: var(--text); font: inherit; font-size: 14px; }
.guide-body .wp-js .wp-tab > h4 { display: none; }
.guide-body .wp-js.wp-searching .wp-tab > h4 { display: block; }
.guide-body .wp-js .wp-off, .guide-body .wp-js .wp-hide { display: none; }
.guide-body .wp-empty { color: var(--muted); font-style: italic; }
/* module:warper:end */
/* module:babel:start (Outil/site/babel/babel.css) */
/* Trial of Babel page (content/guides/activities/trial-of-babel.html), laid out like the TRIAL OF BABEL window (Uriel)
   and the INSCRIPTIONS OF BABEL window (Gabriel) of daro.dll. The HTML is written by Outil/site/babel/babel_page.py
   (regions .bb-gen, rune icons img.bb-rune, summaries p.bb-gsum). Everything is scoped under .guide-body and uses the
   theme variables, so it works on the dark theme and on the light ones (Parchment, Wiki).
   Pictures: assets/guides/babel/ (babel.png, gabriel.png, rune_<god>.png, god_<god>.png). */

/* in-game punctuation only ("Hoder: Blind"): the web shows the parts as blocks */
.guide-body .bb-sep { display: none; }

/* section labels of the windows (TRIAL, MODE, MONSTER RACES) */
.guide-body .bb-gen h4.bb-sec { margin: 14px 0 8px; font: 700 12px/1.2 var(--body, inherit); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.guide-body .bb-gen h4.bb-sec:first-child { margin-top: 0; }
.guide-body .bb-gen .bb-sub { margin: 2px 0 6px; font-size: 13px; font-weight: 700; color: var(--gold-2); }
.guide-body .bb-gen .bb-pname { margin: 8px 0 0; font: 400 19px/1.15 var(--title); color: var(--gold-2); }

/* rune of a god (in_rune of the DLL) on its dark cell, the same on every theme, like in the game */
.guide-body img.bb-rune { flex: none; width: 34px; height: 34px; padding: 2px; border-radius: 8px; object-fit: contain;
  background: linear-gradient(180deg, #2b2150, #1b1433); border: 1px solid rgba(130, 107, 190, .55); box-sizing: border-box; }
.guide-body h3 > img.bb-rune { width: 32px; height: 32px; margin-right: 10px; vertical-align: -7px; }
.guide-body p.bb-gsum { margin: -4px 0 12px; font-size: 14.5px; font-weight: 700; color: var(--gold-2); }

/* --- option cards (TRIAL, MODE, DIFFICULTY) --- */
.guide-body .bb-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 10px; }
.guide-body .bb-opts4 { grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); }
.guide-body .bb-opt { position: relative; padding: 12px 14px; border-radius: 12px; background: var(--raised); border: 1px solid var(--line-strong); }
.guide-body .bb-opt > h5 { margin: 0; font-size: 16.5px; color: var(--text); }
.guide-body .bb-opt > p { margin: 0; font-size: 14px; line-height: 1.5; }
.guide-body .bb-opt > p + p { margin-top: 6px; }
.guide-body .bb-opt > p.bb-sub { margin: 2px 0 8px; }
.guide-body .bb-opt > p.bb-note { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line-strong); font-size: 13px; color: var(--muted); }
.guide-body .bb-opt > ul { list-style: none; margin: 4px 0 0; padding: 0; font-size: 14px; }
.guide-body .bb-opt > ul > li { margin: 0 0 4px; line-height: 1.4; }
.guide-body .bb-opt > ul .bb-k { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.guide-body .bb-asc > h5::before, .guide-body .bb-desc > h5::before { content: ""; display: inline-block; margin: 0 8px 2px 0; vertical-align: middle;
  border-left: 7px solid transparent; border-right: 7px solid transparent; }
.guide-body .bb-asc > h5::before { border-bottom: 11px solid var(--gold); }
.guide-body .bb-desc > h5::before { border-top: 11px solid var(--gold); }
.guide-body .bb-d1 { border-color: var(--line-strong); }
.guide-body .bb-d2 { border-color: var(--gold); }
/* locked difficulties ("Coming soon"): dimmed, dashed, a padlock drawn in CSS */
.guide-body .bb-locked { background: transparent; border-style: dashed; opacity: .62; }
.guide-body .bb-locked > h5 { color: var(--muted); }
.guide-body .bb-locked::after { content: ""; position: absolute; top: 12px; right: 12px; width: 12px; height: 9px; border-radius: 2px; background: var(--muted); }
.guide-body .bb-locked::before { content: ""; position: absolute; top: 5px; right: 14px; width: 8px; height: 8px; border: 2px solid var(--muted); border-bottom: 0; border-radius: 5px 5px 0 0; box-sizing: border-box; }

/* --- TRIAL OF BABEL window: portrait + Uriel + trials --- */
.guide-body .bb-trial { display: grid; grid-template-columns: 190px 1fr; gap: 18px; align-items: start; margin: 12px 0 22px; padding: 16px; border-radius: 18px;
  background: radial-gradient(circle at 12% 0, rgba(232, 193, 109, .10), transparent 55%), var(--surface); border: 1px solid var(--line-strong); }
.guide-body .bb-portrait { text-align: center; }
.guide-body .bb-portrait img { display: block; width: 100%; max-width: 190px; height: auto; margin: 0 auto; border-radius: 14px; border: 1px solid var(--gold); box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .7); }
.guide-body .bb-quote { margin: 0 0 4px; font-size: 14.5px; font-style: italic; line-height: 1.55; color: var(--muted); }
.guide-body .bb-quote .bb-who { display: block; margin-top: 4px; font-style: normal; font-weight: 700; color: var(--gold-2); }
.guide-body .bb-quote .bb-who::before { content: "\2014\00a0"; }
.guide-body .bb-main { min-width: 0; }

/* --- MODE + cooldown + Top 3 --- */
.guide-body .bb-mode { margin: 10px 0 16px; }
.guide-body .bb-cd { display: inline-block; margin: 12px 0 0; padding: 7px 14px; border-radius: 999px; font-size: 14px;
  background: rgba(232, 193, 109, .08); border: 1px solid var(--line-strong); }
.guide-body .bb-cd::before { content: ""; display: inline-block; vertical-align: -1px; margin-right: 8px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--gold); box-sizing: border-box;
  background: linear-gradient(var(--gold), var(--gold)) 50% 18% / 1.5px 40% no-repeat; }
.guide-body .bb-cd b { color: var(--gold-2); }
.guide-body .bb-top { margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; border-left: 3px solid var(--gold); background: rgba(255, 255, 255, .03); }
.guide-body .bb-top > h5 { margin: 0 0 2px; color: var(--gold-2); font-size: 15px; }
.guide-body .bb-top > p { margin: 0; font-size: 14px; }

/* --- DIFFICULTY + MONSTER RACES --- */
.guide-body .bb-diffs { margin: 12px 0 16px; }
.guide-body .bb-races { margin: 0 0 22px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.guide-body .bb-races > p { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.guide-body ul.bb-chips, .guide-body ul.bb-chips.cols2 { list-style: none; columns: auto; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.guide-body ul.bb-chips > li { margin: 0; padding: 4px 11px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--raised); border: 1px solid var(--line-strong); }

/* --- Babel's Benedictions: one card per god, badge of the window --- */
.guide-body .bb-bless { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 10px; margin: 12px 0 24px; }
.guide-body .bb-god { padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.guide-body .bb-god > h4 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 17px; color: var(--text); }
.guide-body .bb-god > h4 img { flex: none; width: 40px; height: 40px; }
.guide-body .bb-god > p.bb-role { margin: -12px 0 8px 50px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-2); }
.guide-body .bb-god > ul { list-style: none; margin: 0; padding: 8px 0 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.guide-body .bb-god > ul > li { position: relative; margin: 0 0 3px; padding-left: 14px; line-height: 1.4; }
.guide-body .bb-god > ul > li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 5px; height: 5px; transform: rotate(45deg); background: var(--gold); }

/* --- INSCRIPTIONS window: Gabriel + the 5 actions --- */
.guide-body .bb-insc { display: grid; grid-template-columns: 180px 1fr; gap: 16px; align-items: start; margin: 12px 0 22px; padding: 16px; border-radius: 18px;
  background: radial-gradient(circle at 10% 0, rgba(232, 193, 109, .10), transparent 55%), var(--surface); border: 1px solid var(--line-strong); }
.guide-body .bb-npc { text-align: center; padding: 8px 6px 12px; border-radius: 14px; background: radial-gradient(circle at 50% 60%, rgba(232, 193, 109, .18), transparent 70%); }
.guide-body .bb-npc img { display: block; width: 100%; max-width: 160px; height: auto; margin: 0 auto; }
.guide-body .bb-npc > p.bb-sub { margin: 2px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.guide-body .bb-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 10px; min-width: 0; }
.guide-body .bb-act { padding: 12px 14px; border-radius: 12px; background: var(--raised); border: 1px solid var(--line-strong); }
.guide-body .bb-act.bb-inscribe { grid-column: 1 / -1; border-color: var(--gold); }
.guide-body .bb-act > h4 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 17px; color: var(--text); }
.guide-body .bb-act > h4::before { content: ""; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--gold); box-sizing: border-box;
  background: radial-gradient(circle, var(--gold) 0 3px, #1b1433 4px); }
.guide-body .bb-act > p { margin: 0; font-size: 14px; line-height: 1.5; }
.guide-body .bb-act > p + p { margin-top: 6px; }
.guide-body .bb-act > p.bb-sub { margin: 2px 0 8px 34px; }
.guide-body .bb-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 10px; }
.guide-body .bb-way { padding: 11px 13px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.guide-body .bb-way > h5 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px; margin: 0 0 4px; font-size: 15.5px; color: var(--text); }
.guide-body .bb-way > p { margin: 0; font-size: 14px; line-height: 1.5; }
.guide-body .bb-way > p + p { margin-top: 5px; }
.guide-body .bb-way > p.bb-alias { color: var(--muted); font-size: 13.5px; }
.guide-body .bb-cost { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font: 700 13px/1.4 var(--body, inherit); white-space: nowrap;
  color: var(--gold-2); background: rgba(232, 193, 109, .12); border: 1px solid rgba(232, 193, 109, .35); }
.guide-body .bb-cost img { width: 18px; height: 18px; }
.guide-body .bb-cost a { color: inherit; }

/* --- Favorites: the odds --- */
.guide-body .bb-favs { margin: 10px 0 12px; }
.guide-body .bb-favs > p { margin: 0 0 8px; }
.guide-body ul.bb-odds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 8px; }
.guide-body ul.bb-odds > li { margin: 0; padding: 10px 12px; border-radius: 12px; text-align: center; font-size: 13.5px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); }
.guide-body ul.bb-odds > li b { display: block; font: 400 26px/1.1 var(--title); color: var(--gold-2); }

/* --- List of Inscriptions: grid of rune cells, like the god grid of the window --- */
.guide-body .bb-gods > h4 { margin: 18px 0 8px; color: var(--gold-2); }
.guide-body ul.bb-runes, .guide-body ul.bb-runes.cols2 { list-style: none; columns: auto; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 6px; }
.guide-body ul.bb-runes > li { display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; align-items: center; margin: 0; padding: 7px 10px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line); transition: border-color .2s, transform .2s; }
.guide-body ul.bb-runes > li:hover { border-color: var(--gold); transform: translateY(-1px); }
.guide-body ul.bb-runes > li > a { display: contents; color: var(--text); text-decoration: none; }
.guide-body ul.bb-runes > li > a > img.bb-rune { grid-column: 1; grid-row: 1 / span 2; }
.guide-body ul.bb-runes > li > a > b { grid-column: 2; grid-row: 1; font-size: 14.5px; line-height: 1.25; }
.guide-body ul.bb-runes > li:hover > a > b { color: var(--gold-2); }
.guide-body ul.bb-runes > li > .bb-what { grid-column: 2; grid-row: 2; font-size: 12.5px; line-height: 1.3; color: var(--muted); }

/* light themes (Parchment, Wiki): softer shadows, readable gold */
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body .bb-portrait img,
html[data-gtheme="wiki"] body.lib .guide-body .bb-portrait img { box-shadow: 0 6px 18px -10px rgba(60, 40, 20, .45); }

@media (max-width: 640px) {
  .guide-body .bb-trial, .guide-body .bb-insc { grid-template-columns: 1fr; padding: 12px; }
  .guide-body .bb-portrait img { max-width: 220px; }
  .guide-body .bb-npc img { max-width: 130px; }
}
/* module:babel:end */
/* module:henzo:start (Outil/site/henzo/henzo.css) */
/* Level 5 Weapons + Refine System modifications pages (content/guides/gear/level-5-weapons.html,
   content/guides/systems/refine-system-modifications.html), laid out like the Henzo Forge window of daro.dll
   (Forge Lv 5 / Refine +11 ~ +15 tabs). The HTML is written by Outil/site/henzo/henzo_page.py (regions .hz-gen).
   Everything is scoped under .guide-body and uses the theme variables, so it works on the dark theme and on the light
   ones (Parchment, Wiki). Reuses from site.css: a.ref (item icon + Codex link), .cards / .card, table.guide-table. */

/* in-game punctuation only ("2H Sword: 7 weapons"): the web shows the parts as blocks */
.guide-body .hz-sep { display: none; }
.guide-body .hz-k { color: var(--muted); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; margin-right: 4px; }
.guide-body .hz-id { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 400; vertical-align: 1px; }
.guide-body .hz-head, .guide-body .hz-sub { margin: 0 0 8px; color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.guide-body .hz-gen a.ref { border-bottom: 0; }
/* the site makes long lists of short lines two columns (ul.cols2): not in these panels */
.guide-body .hz-gen ul.cols2 { columns: auto; }

/* --- Forge: recipe panel (icon, name, count on the right) --- */
.guide-body .hz-recipe { margin: 10px 0 20px; padding: 14px 16px 10px; max-width: 560px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-strong); }
.guide-body ul.hz-rlist { list-style: none; margin: 0; padding: 0; }
.guide-body ul.hz-rlist > li { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; padding: 5px 2px; border-top: 1px solid var(--line); line-height: 1.35; }
.guide-body ul.hz-rlist > li:first-child { border-top: 0; }
.guide-body ul.hz-rlist > li > a.ref { flex: 1 1 auto; }
.guide-body ul.hz-rlist > li > img { width: 24px; height: 24px; object-fit: contain; margin-right: 4px; }
.guide-body ul.hz-rlist .hz-iname { flex: 0 1 auto; }
.guide-body ul.hz-rlist .hz-note { flex: 1 1 200px; color: var(--muted); font-size: 13px; }
.guide-body ul.hz-rlist li.hz-zeny .hz-iname { flex: 1 1 auto; }
.guide-body ul.hz-rlist b.hz-n { margin-left: auto; color: var(--gold-2); font-variant-numeric: tabular-nums; }
.guide-body ul.hz-rlist li.hz-zeny b.hz-n { color: var(--gold); font-size: 17px; }
.guide-body a.hz-go { order: 9; flex-basis: 100%; padding-left: 30px; font-size: 12px; color: var(--aqua); }

/* --- Where to find: one card per material --- */
.guide-body .hz-srcgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 10px; margin: 12px 0 22px; }
.guide-body .hz-src, .guide-body .hz-item { padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.guide-body .hz-item { max-width: 620px; margin: 10px 0 16px; }
.guide-body p.hz-sname { margin: 0 0 4px; font-weight: 700; }
.guide-body p.hz-sname > img { width: 24px; height: 24px; object-fit: contain; vertical-align: middle; margin: -4px 4px -2px 0; }
.guide-body ul.hz-where, .guide-body ul.hz-ieff { margin: 0; padding-left: 18px; font-size: 14px; color: var(--muted); }
.guide-body ul.hz-where p { margin: 0; }
.guide-body p.hz-obt { margin: 6px 0 0; font-size: 14px; }

/* --- Refine +11 ~ +15: tier strip + one card per tier with a bar per material --- */
.guide-body p.hz-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 12px 0; }
.guide-body .hz-pill { display: inline-flex; align-items: baseline; gap: 4px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--raised); color: var(--text); font-weight: 700; }
.guide-body .hz-pill.hz-start { border-color: var(--gold); color: var(--gold); }
.guide-body .hz-pill.hz-max { border-color: var(--gold); background: rgba(232, 193, 109, .14); color: var(--gold-2); }
.guide-body .hz-pill small { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.guide-body .hz-arrow { color: var(--muted); }
.guide-body .hz-tiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); gap: 10px; margin: 0 0 16px; }
.guide-body .hz-tier { padding: 10px 14px 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.guide-body .hz-tier > h4 { margin: 0 0 2px; color: var(--gold-2); font-size: 17px; }
.guide-body p.hz-cost { margin: 0 0 8px; font-size: 14px; color: var(--muted); }
.guide-body p.hz-cost img, .guide-body ul.hz-rlist li.hz-zeny img { width: 22px; height: auto; vertical-align: -4px; margin-right: 6px; }
.guide-body p.hz-cost b { color: var(--gold); font-size: 16px; font-variant-numeric: tabular-nums; }
.guide-body ul.hz-bars { list-style: none; margin: 0; padding: 0; }
.guide-body ul.hz-bars > li { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(60px, 1fr) 3.2em; align-items: center; gap: 8px; padding: 3px 0; font-size: 14px; }
.guide-body ul.hz-bars .hz-mat { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guide-body .hz-bar { display: block; height: 9px; border-radius: 999px; background: var(--line); overflow: hidden; }
.guide-body .hz-fill { display: block; height: 100%; width: var(--w, 0%); min-width: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--gold-2)); }
.guide-body b.hz-pct { text-align: right; color: #4cc47a; font-variant-numeric: tabular-nums; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body b.hz-pct,
html[data-gtheme="wiki"] body.lib .guide-body b.hz-pct { color: #1e7a3f; }

/* --- Characteristics: one card per weapon type (the Details panel of the window) --- */
.guide-body .hz-typegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 10px; margin: 12px 0 22px; }
.guide-body .hz-type { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.guide-body .hz-type > h4 { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--gold-2); font-size: 16px; }
.guide-body .hz-type > h4 > img { width: 30px; height: 30px; object-fit: contain; }
.guide-body ul.hz-stats { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.guide-body ul.hz-stats > li { padding: 3px 10px; border-radius: 8px; background: var(--raised); border: 1px solid var(--line); }
.guide-body ul.hz-stats b { color: var(--gold); }
.guide-body .hz-type > p { margin: 0; font-size: 14px; line-height: 1.45; }
.guide-body p.hz-teff { color: #4cc47a; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body p.hz-teff,
html[data-gtheme="wiki"] body.lib .guide-body p.hz-teff { color: #1e7a3f; }
.guide-body p.hz-teff .hz-k { color: var(--muted); }
.guide-body p.hz-jobs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.guide-body .hz-job { padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); font-size: 12px; }
.guide-body p.hz-from { font-size: 14px; }
.guide-body p.hz-from .hz-plus { color: var(--muted); margin: 0 2px; }
.guide-body p.hz-see { margin-top: auto; font-size: 13px; }

/* --- List: the type tiles of the Forge tab, then one card per weapon --- */
.guide-body ul.hz-typetiles { list-style: none; margin: 14px 0 22px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; }
.guide-body ul.hz-typetiles > li { margin: 0; }
.guide-body ul.hz-typetiles a { display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%; box-sizing: border-box; padding: 12px 6px 10px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(232, 193, 109, .07), transparent 70%), var(--surface); border: 1px solid var(--line-strong); color: var(--text); text-decoration: none; text-align: center; transition: border-color .2s, transform .2s; }
.guide-body ul.hz-typetiles a:hover { border-color: var(--gold); color: var(--gold-2); transform: translateY(-2px); }
.guide-body ul.hz-typetiles img { width: 48px; height: 48px; object-fit: contain; image-rendering: pixelated; margin-bottom: 2px; }
.guide-body ul.hz-typetiles .hz-tname { font-weight: 700; font-size: 14px; }
.guide-body ul.hz-typetiles .hz-tcount { color: var(--muted); font-size: 12px; }
@media (max-width: 520px) { .guide-body ul.hz-typetiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .guide-body ul.hz-typetiles img { width: 40px; height: 40px; } }

/* type section in two columns: the weapons of the type (-> their card) on the left, the cards on the right; phones: list first */
.guide-body .hz-split { display: grid; grid-template-columns: minmax(190px, 240px) minmax(0, 1fr); gap: 14px; align-items: start; margin: 0 0 18px; }
.guide-body ul.hz-wnav { list-style: none; margin: 0; padding: 6px; position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-strong); }
.guide-body ul.hz-wnav > li { margin: 0; }
.guide-body ul.hz-wnav a { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 8px; color: var(--text); text-decoration: none; line-height: 1.25; }
.guide-body ul.hz-wnav a:hover { background: var(--raised); color: var(--gold-2); }
.guide-body ul.hz-wnav img { flex: none; width: 26px; height: 26px; object-fit: contain; }
.guide-body ul.hz-wnav .hz-nname { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; }
.guide-body ul.hz-wnav .hz-id { flex: none; margin-left: 4px; font-size: 11px; }
.guide-body .hz-split > .hz-wgrid { margin: 0; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.guide-body .hz-w { scroll-margin-top: 80px; }
.guide-body .hz-w:target { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(232, 193, 109, .25); }
@media (max-width: 760px) {
  .guide-body .hz-split { grid-template-columns: minmax(0, 1fr); }
  .guide-body ul.hz-wnav { position: static; max-height: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 2px; }
}
.guide-body h4.hz-group { margin: 22px 0 4px; color: var(--gold-2); }
.guide-body .hz-list > p.hz-from { margin: 4px 0 8px; font-size: 14px; color: var(--muted); }
.guide-body .hz-wgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 10px; margin: 0 0 18px; }
.guide-body .hz-w { padding: 10px 12px 8px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); transition: border-color .2s; }
.guide-body .hz-w:hover { border-color: var(--line-strong); }
.guide-body .hz-w > h5 { margin: 0; font-size: 16px; }
.guide-body .hz-w > h5 a.ref { color: var(--gold-2); }
.guide-body .hz-w > h5 a.ref img { width: 32px; height: 32px; margin: -6px 6px -4px 0; }
.guide-body p.hz-meta { margin: 2px 0 6px 38px; color: var(--muted); font-size: 12px; }
.guide-body p.hz-meta b { color: var(--text); font-weight: 700; }
.guide-body p.hz-alias { margin: -4px 0 6px 38px; color: var(--muted); font-size: 12px; font-style: italic; }
.guide-body ul.hz-eff { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.45; }
.guide-body ul.hz-eff li { margin: 2px 0; }
.guide-body ul.hz-eff ul { padding-left: 16px; }
.guide-body ul.hz-eff p { margin: 2px 0; }

/* --- Types of ores: ore icons on the cards --- */
.guide-body .hz-ore p.hz-orepics { display: flex; gap: 6px; margin: 0 0 6px; }
.guide-body .hz-ore a.hz-orepic { border: 0; text-decoration: none; }
.guide-body .hz-ore a.hz-orepic:hover img { border-color: var(--gold); }
.guide-body .hz-ore p.hz-orepics img { width: 32px; height: 32px; object-fit: contain; padding: 3px; border-radius: 8px; background: var(--raised); border: 1px solid var(--line); }

/* --- Refine rates: heat grid, each cell filled from the bottom up to its % --- */
.guide-body table.guide-table.rf-grid th:first-child { white-space: nowrap; text-align: left; }
.guide-body table.guide-table.rf-grid td.rf-c { position: relative; min-width: 46px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700;
  /* !important: the light themes set "background" on the even rows with a stronger selector (site.css) */
  background-image: linear-gradient(to top, var(--rf, rgba(232, 193, 109, .3)) var(--w, 0%), transparent var(--w, 0%)) !important; }
.guide-body table.guide-table.rf-grid td.rf-q4 { --rf: rgba(76, 196, 122, .30); }
.guide-body table.guide-table.rf-grid td.rf-q3 { --rf: rgba(232, 193, 109, .34); }
.guide-body table.guide-table.rf-grid td.rf-q2 { --rf: rgba(230, 140, 60, .36); }
.guide-body table.guide-table.rf-grid td.rf-q1 { --rf: rgba(224, 85, 70, .40); }

/* hz-widths:start (written by henzo_page.py) */
.guide-body .hz-w1 { --w: 1%; }
.guide-body .hz-w2 { --w: 2%; }
.guide-body .hz-w3 { --w: 3%; }
.guide-body .hz-w4 { --w: 4%; }
.guide-body .hz-w5 { --w: 5%; }
.guide-body .hz-w7 { --w: 7%; }
.guide-body .hz-w9 { --w: 9%; }
.guide-body .hz-w10 { --w: 10%; }
.guide-body .hz-w11 { --w: 11%; }
.guide-body .hz-w13 { --w: 13%; }
.guide-body .hz-w15 { --w: 15%; }
.guide-body .hz-w17 { --w: 17%; }
.guide-body .hz-w20 { --w: 20%; }
.guide-body .hz-w21 { --w: 21%; }
.guide-body .hz-w23 { --w: 23%; }
.guide-body .hz-w25 { --w: 25%; }
.guide-body .hz-w30 { --w: 30%; }
.guide-body .hz-w40 { --w: 40%; }
.guide-body .hz-w45 { --w: 45%; }
.guide-body .hz-w50 { --w: 50%; }
.guide-body .hz-w60 { --w: 60%; }
.guide-body .hz-w75 { --w: 75%; }
.guide-body .hz-w80 { --w: 80%; }
.guide-body .hz-w100 { --w: 100%; }
/* hz-widths:end */
/* module:henzo:end */
/* module:interface:start (Outil/site/interface/interface.css) */
/* DARO Interface page (content/guides/basics/daro-interface.html) and the KUGANS window mock of
   content/guides/systems/introduction-to-kugans.html, laid out like the HUD and the windows of daro.dll.
   The HTML is written by Outil/site/interface/interface_page.py (regions .ui-gen). Everything is scoped under
   .guide-body and uses the theme variables, so it works on the dark theme and on the light ones. The mocks of game
   windows (MENU options, CODEX, KUGANS) keep the game's own white panel and blue title band on every theme. */

/* in-game punctuation only ("Inventory: your bag."): the web shows the parts as blocks */
.guide-body .ui-sep { display: none; }

/* --- pictures --- */
.guide-body .ui-shot { margin: 14px 0 20px; max-width: 640px; }
.guide-body .ui-shot.ui-wide { max-width: 100%; }
.guide-body .ui-shot > img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line-strong); }
.guide-body p.ui-cap, .guide-body .ui-shot > p.ui-cap { margin: 6px 2px 0; font-size: 13px; color: var(--muted); font-style: italic; }
.guide-body p.ui-hint { margin: 8px 0 0; font-size: 13.5px; color: var(--muted); }

/* --- facts lists: gold dots --- */
.guide-body ul.ui-facts { list-style: none; padding: 0; margin: 12px 0 18px; }
.guide-body ul.ui-facts > li { position: relative; padding: 5px 0 5px 20px; line-height: 1.5; }
.guide-body ul.ui-facts > li::before { content: ""; position: absolute; left: 4px; top: 13px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }

/* --- round buttons (thin gold ring, deep purple centre, like the HUD) --- */
.guide-body ul.ui-round { list-style: none; padding: 0; margin: 12px 0 20px; columns: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 8px 14px; }
.guide-body ul.ui-round > li { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 8px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.guide-body ul.ui-round > li > img { grid-row: 1 / span 2; width: 40px; height: 40px; padding: 5px; box-sizing: border-box; object-fit: contain; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #4a3474, #231a3a 70%); border: 2px solid #d9b25a; box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35); }
.guide-body ul.ui-round.ui-big > li > img { padding: 2px; }
.guide-body ul.ui-round > li > b { color: var(--gold-2); align-self: end; }
.guide-body ul.ui-round > li > .ui-txt { grid-column: 2; font-size: 14px; line-height: 1.45; color: var(--text); align-self: start; }
.guide-body ul.ui-round > li > b + .ui-key { justify-self: start; }
.guide-body ul.ui-round > li:has(> .ui-key) { grid-template-columns: 44px auto 1fr; }
.guide-body ul.ui-round > li:has(> .ui-key) > .ui-txt { grid-column: 2 / span 2; }
.guide-body .ui-key { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 6px; font-size: 12px; font-weight: 700; color: var(--text); background: var(--raised); border: 1px solid var(--line-strong); align-self: end; }
.guide-body b.ui-cost, .guide-body .ui-cost { color: var(--gold-2); }

/* Menu panel: 4 titled rows of round buttons, name under each icon */
.guide-body .ui-menu { display: grid; gap: 10px; margin: 12px 0 20px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(180deg, var(--raised), var(--surface)); border: 1px solid var(--line-strong); max-width: 560px; }
.guide-body .ui-menurow > h4 { margin: 0 0 6px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-2); }
.guide-body ul.ui-round.ui-icons { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0; }
.guide-body ul.ui-round.ui-icons > li { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 88px; padding: 4px 0; background: none; border: 0; text-align: center; }
.guide-body ul.ui-round.ui-icons > li > img { width: 38px; height: 38px; }
.guide-body ul.ui-round.ui-icons > li > b { font-size: 12.5px; font-weight: 600; color: var(--text); }

/* --- mount portraits: round, gold ring --- */
.guide-body ul.ui-faces { list-style: none; padding: 0; margin: 12px 0 20px; columns: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.guide-body ul.ui-faces > li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); text-align: center; }
.guide-body ul.ui-faces > li > img { width: 76px; height: 76px; border-radius: 50%; border: 2px solid #d9b25a; box-shadow: 0 0 0 1px rgba(0,0,0,.5); object-fit: cover; }
.guide-body ul.ui-faces > li > b { color: var(--gold-2); font-size: 14px; }
.guide-body ul.ui-faces > li > .ui-txt { font-size: 12.5px; line-height: 1.35; color: var(--muted); }

/* --- dailies of the tracker --- */
.guide-body ul.ui-daily { list-style: none; padding: 0; margin: 8px 0 18px; columns: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.guide-body ul.ui-daily > li { display: flex; gap: 10px; align-items: center; padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; }
.guide-body ul.ui-daily .ui-count { color: var(--muted); font-variant-numeric: tabular-nums; }

/* --- CHARACTER stats --- */
.guide-body table.ui-stattable td:first-child b { color: var(--gold-2); }
.guide-body .ui-plus { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-weight: 700; font-size: 15px; line-height: 1; color: #fff; background: linear-gradient(180deg, #4cc46e, #23893f); border: 1px solid #1c6d33; vertical-align: -3px; }
.guide-body .ui-plus.off { background: #9aa3ad; border-color: #7d858e; }

/* --- game window mocks (MENU, CODEX, KUGANS): white panel, blue band, dark text on every theme --- */
.guide-body .ui-optsec, .guide-body .ui-codexwin, .guide-body .ui-kugwin { background: #fff; color: #1e2a44; border: 1px solid #7ba8dc; border-radius: 10px; overflow: hidden; box-shadow: 0 3px 12px rgba(0,0,0,.18); }
.guide-body .ui-optsec > h4, .guide-body .ui-codexhead, .guide-body .ui-kughead { margin: 0; padding: 7px 14px; color: #fff; background: linear-gradient(180deg, #5c8cde, #3462ba); font-size: 14px; letter-spacing: .03em; }

/* Options: one card per tab */
.guide-body .ui-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 14px; margin: 12px 0 22px; align-items: start; }
.guide-body ul.ui-opts { list-style: none; margin: 0; padding: 4px 0; columns: auto; }
.guide-body ul.ui-opts > li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 14px; border-bottom: 1px solid #e4ebf5; font-size: 14px; }
.guide-body ul.ui-opts > li:last-child { border-bottom: 0; }
.guide-body .ui-optname { flex: 1 1 160px; color: #1e2a44; }
.guide-body .ui-switch { flex: none; padding: 1px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #fff; background: linear-gradient(180deg, #4cc46e, #23893f); }
.guide-body .ui-switch.ui-k-radio, .guide-body .ui-switch.ui-k-button { background: linear-gradient(180deg, #6b94d8, #3d68b4); }
.guide-body .ui-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.guide-body .ui-pill { padding: 1px 8px; border-radius: 999px; font-size: 12px; color: #28406c; background: #eef3fb; border: 1px solid #a9c0e4; }
.guide-body .ui-note { flex-basis: 100%; font-size: 12.5px; color: #5d6b82; }
.guide-body .ui-optsec > p.ui-hint { margin: 0; padding: 6px 14px 10px; font-size: 12.5px; color: #5d6b82; border-top: 1px solid #e4ebf5; }

/* CODEX: left menu groups */
.guide-body .ui-codexwin { max-width: 620px; margin: 12px 0 18px; }
.guide-body .ui-codexhead > span { margin-left: 10px; font-weight: 400; opacity: .9; font-style: italic; }
.guide-body .ui-codexnav { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; }
.guide-body .ui-codexgrp { padding: 10px 14px; border-right: 1px solid #e4ebf5; }
.guide-body .ui-codexgrp:last-child { border-right: 0; }
.guide-body .ui-codexgrp > h4 { margin: 0 0 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #3462ba; }
.guide-body .ui-codexgrp > ul { list-style: none; margin: 0; padding: 0; columns: auto; }
.guide-body .ui-codexgrp > ul > li { padding: 3px 0 3px 10px; font-size: 13.5px; color: #1e2a44; border-left: 2px solid #c9d8ef; }

/* KUGANS window mock */
.guide-body .ui-kug { margin: 12px 0 8px; }
.guide-body .ui-kugwin { max-width: 560px; }
.guide-body .ui-kughead { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; }
.guide-body .ui-kughead > span { font-weight: 600; color: #ffe7a8; }
.guide-body .ui-kugwin > p { margin: 0; }
.guide-body .ui-kugtabs { display: flex; gap: 8px; padding: 10px 14px 4px; }
.guide-body .ui-tab { padding: 3px 14px; border-radius: 999px; font-size: 13px; color: #28406c; background: #eef3fb; border: 1px solid #a9c0e4; }
.guide-body .ui-tab.on { color: #fff; background: linear-gradient(180deg, #5c8cde, #3462ba); border-color: #28509c; }
.guide-body p.ui-kugspec { padding: 6px 14px 0; font-size: 15px; }
.guide-body p.ui-kugspec > b { color: #1e2a44; }
.guide-body p.ui-kugspec > span { margin-left: 8px; font-size: 12.5px; color: #5d6b82; }
.guide-body p.ui-kugcap { padding: 2px 14px 8px; font-size: 12.5px; color: #5d6b82; }
.guide-body ul.ui-kugrows { list-style: none; margin: 0; padding: 0 0 6px; columns: auto; }
.guide-body ul.ui-kugrows > li { display: grid; grid-template-columns: 28px 1fr 110px auto 22px; gap: 10px; align-items: center; padding: 6px 14px; border-top: 1px solid #e4ebf5; font-size: 14px; }
.guide-body ul.ui-kugrows > li > img { width: 24px; height: 24px; border-radius: 4px; }
.guide-body ul.ui-kugrows > li > b { color: #1e2a44; font-weight: 600; }
.guide-body .ui-lv { position: relative; display: block; padding-top: 7px; font-size: 11.5px; color: #5d6b82; }
.guide-body .ui-lv::before, .guide-body .ui-lv::after { content: ""; position: absolute; left: 0; top: 0; height: 5px; border-radius: 3px; }
.guide-body .ui-lv::before { width: 100%; background: #dde6f3; }
.guide-body .ui-lv::after { width: 0; background: linear-gradient(90deg, #7b5cd6, #b28cff); }
.guide-body .ui-lv1::after { width: 20%; } .guide-body .ui-lv2::after { width: 40%; } .guide-body .ui-lv3::after { width: 60%; }
.guide-body .ui-lv4::after { width: 80%; } .guide-body .ui-lv5::after { width: 100%; }
.guide-body ul.ui-kugrows .ui-cost { font-size: 12px; font-weight: 700; color: #8a5a00; background: #fff3d1; border: 1px solid #e8c56d; border-radius: 999px; padding: 0 8px; }
@media (max-width: 520px) {
  .guide-body ul.ui-kugrows > li { grid-template-columns: 24px 1fr auto 22px; }
  .guide-body ul.ui-kugrows > li > .ui-lv { grid-column: 2 / span 3; grid-row: 2; }
}

/* --- windows grid --- */
.guide-body .ui-wins { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 12px; margin: 14px 0 24px; }
.guide-body .ui-win { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--gold); transition: border-color .2s, transform .2s; }
.guide-body .ui-win:hover { border-color: var(--gold); transform: translateY(-1px); }
.guide-body .ui-win > h4 { margin: 0; font-size: 15px; color: var(--gold-2); letter-spacing: .02em; }
.guide-body .ui-win > p { margin: 0; font-size: 14px; line-height: 1.45; }
.guide-body .ui-win > p.ui-open { font-size: 12.5px; color: var(--muted); }
.guide-body .ui-win > p.ui-open > span { font-weight: 700; }
.guide-body .ui-win > p.ui-link { margin-top: auto; padding-top: 4px; font-size: 13.5px; }
.guide-body .ui-win > p.ui-link a::after { content: " \203A"; }
/* module:interface:end */
/* module:pagetabs:start (Outil/site/pagetabs/pagetabs.css) */
/* guide pages split in tabs (Outil/site/pagetabs/pagetabs.js) */
.guide-body .page-tabs { position: sticky; top: 72px; z-index: 6; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
.guide-body .page-tabs button { display: inline-flex; align-items: center; gap: 6px; font: 700 13.5px var(--body); padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--raised); color: var(--text); cursor: pointer; }
.guide-body .page-tabs button img { width: 22px; height: 22px; object-fit: contain; }
.guide-body .page-tabs button[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #1a0c12; }
.guide-body .page-tab > h2:first-child { margin-top: 0; }
@media (max-width: 640px) { .guide-body .page-tabs { position: static; } }
/* module:pagetabs:end */
/* module:trialmaster:start (Outil/site/trialmaster/trialmaster.css) */
/* Trial Master & Card Album page (content/guides/activities/trial-master-card-album.html), laid out like the Card Album
   window of daro.dll (Binder, Collection, Trial Master, Leagues) and its duel window. The HTML is written by
   Outil/site/trialmaster/trialmaster_page.py (regions .tm-gen). Everything is scoped under .guide-body and uses the theme
   variables, so it works on the dark theme and on the light ones. Reuses from site.css: ul.keyfacts, ol.steps. */

.guide-body { --tm-plus: #3cbf6a; --tm-minus: #ec6a64; --tm-blue: #5b95f2; --tm-red: #e45763; --tm-chip: #eef2fb;
  --tm-dia: rgba(20, 24, 48, .88); --tm-x: #ff7a7a; --tm-a: #ffad5c; --tm-s: #ffd65a;
  --tm-ink: #fff; --tm-ink-2: #f3e6c4; }  /* light inks on fixed dark plates: kept as variables so the light themes keep them */
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body,
html[data-gtheme="wiki"] body.lib .guide-body { --tm-plus: #1e7a3f; --tm-minus: #b8324d; --tm-blue: #2f63c4; --tm-red: #b8323e; }

/* game words kept as plain text (no Codex link) */
.guide-body code.tm-nl { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; }
/* side names: text for the in-game guide, the diamond shows the side on the web */
.guide-body .tm-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.guide-body b.tm-gold { color: var(--gold-2); }
.guide-body b.tm-plus { color: var(--tm-plus); }
.guide-body b.tm-minus { color: var(--tm-minus); }
.guide-body b.tm-blue { color: var(--tm-blue); }
.guide-body b.tm-red { color: var(--tm-red); }

/* --- icon tiles (tabs, binder buttons, card types): the album icons sit on a light chip, like in the window --- */
.guide-body ul.tm-tabgrid, .guide-body ul.tm-actions, .guide-body ul.tm-typegrid { list-style: none; padding: 0; margin: 14px 0 18px; display: grid; gap: 10px; }
.guide-body ul.tm-tabgrid { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.guide-body ul.tm-actions { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.guide-body ul.tm-typegrid { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
.guide-body ul.tm-tabgrid > li, .guide-body ul.tm-actions > li, .guide-body ul.tm-typegrid > li {
  position: relative; display: block; min-height: 46px; padding: 10px 12px 10px 70px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line); font-size: 14px; line-height: 1.45; color: var(--muted); }
.guide-body ul.tm-tabgrid > li > img, .guide-body ul.tm-actions > li > img, .guide-body ul.tm-typegrid > li > img {
  max-height: none; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; padding: 6px; box-sizing: border-box;
  object-fit: contain; border-radius: 12px; background: var(--tm-chip); border: 1px solid rgba(120, 140, 200, .45); }
.guide-body ul.tm-tabgrid > li > b, .guide-body ul.tm-actions > li > b, .guide-body ul.tm-typegrid > li > b { display: block; color: var(--gold-2); font-size: 15px; }

/* --- Collection: sets as chips, reward steps --- */
.guide-body .tm-setgroup { margin: 12px 0; }
.guide-body .tm-setgroup > h4 { margin: 0 0 6px; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.guide-body ul.tm-sets { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.guide-body ul.tm-sets > li { padding: 5px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-strong); font-size: 13.5px; color: var(--text); }
.guide-body ul.tm-tiers { list-style: none; padding: 0; margin: 14px 0 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.guide-body ul.tm-tiers > li { text-align: center; font-size: 13px; color: var(--muted); padding-top: 26px; position: relative; }
.guide-body ul.tm-tiers > li::before { content: ""; position: absolute; top: 8px; left: 0; right: 0; height: 6px; background: var(--line-strong); }
.guide-body ul.tm-tiers > li:first-child::before { border-radius: 6px 0 0 6px; }
.guide-body ul.tm-tiers > li:last-child::before { border-radius: 0 6px 6px 0; }
.guide-body ul.tm-tiers > li::after { content: ""; position: absolute; top: 3px; right: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px var(--surface); }
.guide-body ul.tm-tiers > li b { display: block; color: var(--gold-2); font-size: 16px; }

/* --- value diamond (top, left, right, bottom) on a dark plate, as on the cards of the game --- */
.guide-body .tm-dia { display: inline-grid; grid-template-columns: repeat(3, 1.25em); grid-template-rows: repeat(3, 1.15em);
  grid-template-areas: ". t ." "l . r" ". b ."; place-items: center; padding: 3px 4px; border-radius: 8px; background: var(--tm-dia);
  color: var(--tm-ink); font: 800 15px/1 Arial, sans-serif; vertical-align: middle; }
.guide-body .tm-dia > .tm-t { grid-area: t; } .guide-body .tm-dia > .tm-l { grid-area: l; }
.guide-body .tm-dia > .tm-r { grid-area: r; } .guide-body .tm-dia > .tm-b { grid-area: b; }
.guide-body .tm-dia > span { position: relative; }
.guide-body .tm-dia .tm-x, .guide-body .tm-val.tm-x { color: var(--tm-x); }
.guide-body .tm-dia .tm-a, .guide-body .tm-val.tm-a { color: var(--tm-a); }
.guide-body .tm-dia .tm-s, .guide-body .tm-val.tm-s { color: var(--tm-s); }
/* modifier diamonds: +1 green, -1 red, 0 faint */
.guide-body .tm-dia-mod { background: var(--raised); border: 1px solid var(--line-strong); color: var(--text); font-size: 13.5px; grid-template-columns: repeat(3, 1.7em); }
.guide-body .tm-dia-mod .tm-p { color: var(--tm-plus); }
.guide-body .tm-dia-mod .tm-m { color: var(--tm-minus); }
.guide-body .tm-dia-mod .tm-z { color: var(--muted); opacity: .55; font-weight: 600; }

/* value scale */
.guide-body ul.tm-scale { list-style: none; padding: 0; margin: 12px 0 16px; display: grid; gap: 8px; }
.guide-body ul.tm-scale > li { position: relative; display: block; min-height: 32px; padding: 9px 12px 9px 84px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 14.5px; line-height: 1.45; }
.guide-body .tm-val { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); min-width: 58px; box-sizing: border-box; text-align: center; padding: 6px 8px; border-radius: 9px; background: var(--tm-dia); color: var(--tm-ink); font: 800 20px/1 Arial, sans-serif; }

/* --- stars --- */
.guide-body .tm-stars { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--tm-dia); color: var(--tm-s); font: 700 12.5px/1.5 Arial, sans-serif; white-space: nowrap; }
.guide-body .tm-stars::before { content: "\2605  "; }
.guide-body ul.tm-stargrid { list-style: none; padding: 0; margin: 12px 0 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 8px; }
.guide-body ul.tm-stargrid > li { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "s n" "s p"; column-gap: 10px; align-items: center;
  padding: 9px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; }
.guide-body ul.tm-stargrid > li > .tm-stars { grid-area: s; }
.guide-body ul.tm-stargrid > li > b { grid-area: n; color: var(--text); }
.guide-body ul.tm-stargrid > li > .tm-pts { grid-area: p; color: var(--gold-2); font-weight: 700; }
.guide-body ul.tm-stargrid > li > .tm-cnt { grid-area: p; justify-self: end; color: var(--muted); font-size: 12.5px; }

/* --- modifier tables --- */
.guide-body .tm-mods > h4 { margin: 18px 0 8px; color: var(--gold-2); }
.guide-body ul.tm-modgrid { list-style: none; padding: 0; margin: 0 0 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.guide-body ul.tm-modgrid > li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 6px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 13.5px; text-align: center; }
.guide-body ul.tm-modgrid > li > b { color: var(--text); }
.guide-body .tm-modnote { font-size: 11.5px; line-height: 1.3; color: var(--gold-2); }
.guide-body ul.tm-statgrid { list-style: none; padding: 0; margin: 8px 0 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.guide-body ul.tm-statgrid > li { padding: 6px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.guide-body ul.tm-statgrid > li > b { color: var(--gold-2); margin-right: 6px; }
.guide-body ul.tm-rules { list-style: none; padding: 0; margin: 10px 0 16px; display: grid; gap: 6px; }
.guide-body ul.tm-rules > li { padding: 8px 12px 8px 14px; border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0; background: var(--surface); font-size: 14.5px; line-height: 1.45; }
.guide-body ul.tm-rules > li > b:first-child { color: var(--gold-2); margin-right: 6px; }

/* --- worked example --- */
.guide-body .tm-exhead { display: flex; gap: 14px; align-items: center; margin: 8px 0 10px; }
.guide-body .tm-exhead > img { flex: none; width: 72px; height: 96px; max-height: none; object-fit: cover; border-radius: 8px; border: 1px solid var(--line-strong); }
.guide-body .tm-exhead > p { margin: 0; }
.guide-body ol.tm-trace { list-style: none; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 8px; counter-reset: tmstep; }
.guide-body ol.tm-trace > li { counter-increment: tmstep; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); text-align: center; font-size: 13px; }
.guide-body ol.tm-trace > li > b { color: var(--gold-2); font-size: 14px; }
.guide-body ol.tm-trace > li > b::before { content: counter(tmstep) ". "; color: var(--muted); }
.guide-body ol.tm-trace .tm-why { color: var(--muted); line-height: 1.35; min-height: 2.7em; }
.guide-body ol.tm-trace > li:last-child { border-color: var(--gold); }

/* --- cards (gallery and board): art, value diamond in the corner, stars at the bottom, abilities --- */
.guide-body ul.tm-cards { list-style: none; padding: 0; margin: 12px 0 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.guide-body li.tm-card { position: relative; display: flex; flex-direction: column; align-items: center; padding: 6px 6px 8px; border-radius: 12px;
  background: linear-gradient(180deg, #fbf6ec, #efe3cc); border: 1px solid #c9b48c; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); color: #2b2114; }
.guide-body li.tm-card > img { width: 100%; max-height: none; aspect-ratio: 3 / 4; height: auto; object-fit: cover; border-radius: 8px; display: block; }
.guide-body li.tm-card > .tm-dia { position: absolute; top: 10px; left: 10px; font-size: 13px; }
.guide-body ul.tm-cards li.tm-card > .tm-stars { position: relative; margin-top: -13px; z-index: 1; }
.guide-body li.tm-card > .tm-cname { order: 3; margin-top: 6px; font-weight: 800; font-size: 13px; line-height: 1.25; text-align: center; }
.guide-body li.tm-card > .tm-abs { order: 4; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 4px; font-size: 0; }
.guide-body li.tm-card > .tm-stars { order: 2; }
.guide-body .tm-ab { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #fff8e1; border: 1px solid #c49632; color: #5a3c0a; font-size: 11.5px; font-weight: 700; }
.guide-body .tm-who { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* --- board 5 x 5 (24 cells, blocked center) --- */
.guide-body ul.tm-board { list-style: none; padding: 10px; margin: 14px auto 10px; max-width: 560px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
  border-radius: 16px; background: linear-gradient(180deg, #d9c49a, #c8ae7c); border: 1px solid #a88a55; }
.guide-body ul.tm-board > li.tm-cell { aspect-ratio: 3 / 4; border-radius: 8px; border: 2px dashed rgba(90, 70, 40, .35); background: rgba(255, 255, 255, .25); min-width: 0; }
.guide-body ul.tm-board > li.tm-block { display: grid; place-items: center; border: 2px solid #6b5432; background: repeating-linear-gradient(45deg, #7a6240, #7a6240 6px, #6b5432 6px, #6b5432 12px);
  color: var(--tm-ink-2); font-size: 11px; font-weight: 700; text-align: center; line-height: 1.2; padding: 4px; }
.guide-body ul.tm-board > li.tm-card { padding: 3px; border: 3px solid; box-shadow: none; border-radius: 9px; }
.guide-body ul.tm-board > li.tm-card > img { border-radius: 5px; }
.guide-body ul.tm-board > li.tm-card > .tm-dia { top: 5px; left: 5px; font-size: 10.5px; padding: 2px 3px; border-radius: 6px; }
.guide-body ul.tm-board > li.tm-card > .tm-stars { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); font-size: 10px; padding: 0 6px; }
.guide-body ul.tm-board > li.tm-card > .tm-cname, .guide-body ul.tm-board > li.tm-card > .tm-abs { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.guide-body ul.tm-board > li.tm-own-blue { border-color: var(--tm-blue); background: #e6efff; }
.guide-body ul.tm-board > li.tm-own-red { border-color: var(--tm-red); background: #ffe8ea; }
.guide-body ul.tm-board > li.tm-played { outline: 4px solid #ffc933; outline-offset: 2px; box-shadow: 0 0 16px rgba(255, 201, 51, .8); }
.guide-body ul.tm-board > li.tm-flipped::after { content: "\21BB"; position: absolute; top: 4px; right: 5px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tm-blue); color: var(--tm-ink); font: 700 13px/1 Arial, sans-serif; }
.guide-body p.tm-caption { text-align: center; color: var(--muted); font-size: 14px; }
.guide-body ul.tm-results { list-style: none; padding: 0; margin: 6px auto 16px; max-width: 640px; display: grid; gap: 6px; }
.guide-body ul.tm-results > li { padding: 7px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; }

/* --- abilities: one card each, with its cost --- */
.guide-body ul.tm-abgrid { list-style: none; padding: 0; margin: 12px 0 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 10px; }
.guide-body li.tm-abcard { position: relative; padding: 12px 14px 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.guide-body li.tm-abcard > h4 { margin: 0 0 4px; font-size: 16px; color: var(--gold-2); }
.guide-body li.tm-abcard > p { margin: 0; font-size: 13.5px; line-height: 1.45; }
.guide-body li.tm-abcard > p.tm-cost { display: inline-block; margin: 0 0 6px; padding: 2px 9px; border-radius: 999px; background: var(--tm-dia); color: var(--tm-s);
  font: 700 11.5px/1.5 Arial, sans-serif; }
.guide-body li.tm-abcard > p.tm-eff { font-weight: 700; color: var(--text); margin-bottom: 4px; }
.guide-body li.tm-abcard > p.tm-det { color: var(--muted); }
.guide-body li.tm-abcard > p.tm-src { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.guide-body li.tm-abcard.tm-noeff { opacity: .7; border-style: dashed; }

/* --- end of the duel, challenge panels --- */
.guide-body ul.tm-endlist { list-style: none; padding: 0; margin: 8px 0 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 6px; }
.guide-body ul.tm-endlist > li { padding: 8px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; }
.guide-body .tm-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 12px; margin: 12px 0; }
.guide-body .tm-panel { border-radius: 14px; border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.guide-body .tm-panel > h4 { margin: 0; padding: 9px 14px; color: var(--tm-ink); font-size: 15px; background: linear-gradient(180deg, #6f90d8, #4766b4); }
.guide-body .tm-panel > ul { margin: 0; padding: 10px 14px 12px 32px; font-size: 14px; line-height: 1.5; }

/* --- leagues (colours of the Leagues tab) --- */
.guide-body ul.tm-lggrid { list-style: none; padding: 0; margin: 12px 0 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 10px; }
.guide-body li.tm-lg { padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); font-size: 13.5px; line-height: 1.45; }
.guide-body li.tm-lg > p { margin: 6px 0 0; color: var(--muted); }
.guide-body li.tm-lg > p:first-of-type { color: var(--text); }
.guide-body .tm-pill { display: inline-block; padding: 3px 14px; border-radius: 999px; font-weight: 800; font-size: 14px; color: #282e40; }
.guide-body .tm-pill::before { content: "\25C6  "; }
.guide-body .tm-lg-0 .tm-pill, .guide-body .tm-pill-0 { background: linear-gradient(180deg, #e2a46e, #9a5a2a); color: var(--tm-ink); }
.guide-body .tm-lg-1 .tm-pill, .guide-body .tm-pill-1 { background: linear-gradient(180deg, #cfd6e2, #8994a8); }
.guide-body .tm-lg-2 .tm-pill, .guide-body .tm-pill-2 { background: linear-gradient(180deg, #ffe27a, #c8961e); }
.guide-body .tm-lg-3 .tm-pill, .guide-body .tm-pill-3 { background: linear-gradient(180deg, #bff0ff, #4aa6d8); }
.guide-body li.tm-lg-0 { border-top: 3px solid #b8743c; } .guide-body li.tm-lg-1 { border-top: 3px solid #a3adbf; }
.guide-body li.tm-lg-2 { border-top: 3px solid #d9a92a; } .guide-body li.tm-lg-3 { border-top: 3px solid #5bb6e0; }
.guide-body ul.tm-npclist { list-style: none; padding: 0; margin: 10px 0 12px; display: grid; gap: 8px; }
.guide-body ul.tm-npclist > li { padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; line-height: 1.6; color: var(--muted); }
.guide-body ul.tm-npclist > li > .tm-pill { margin-right: 8px; font-size: 13px; }
.guide-body ul.tm-npclist code.tm-nl { color: var(--text); font-weight: 600; }

@media (max-width: 560px) {
  .guide-body ul.tm-board { gap: 3px; padding: 6px; }
  .guide-body ul.tm-board > li.tm-card > .tm-dia { font-size: 8.5px; padding: 1px 2px; }
  .guide-body ul.tm-board > li.tm-card > .tm-stars, .guide-body ul.tm-board > li.tm-block { font-size: 8px; }
  .guide-body ul.tm-tiers > li { font-size: 11.5px; }
}
/* module:trialmaster:end */
/* module:stylist:start (Outil/site/stylist/stylist.css) */
/* Three guide pages laid out like their daro.dll windows (HTML written by Outil/site/stylist/stylist_pages.py, regions
   .sty-gen): Styling your character (Stylist window: .sty-*), Headgears System (Witch Nefasta window: .nf-*) and the
   Restock System section of Everything you need to know (Restock window: .rs-*). Scoped under .guide-body, theme
   variables only (plus the fixed colors of the game: rarities, skin tones), so it works on the dark and light themes.
   Reuses from site.css: ol.steps, .tip, a.ref. */

/* values: free in green (as b.rng), Mystic Points in gold with the star of the window */
.guide-body b.sty-free, .guide-body b.rs-ok { color: #2fa35a; font-weight: 800; }
.guide-body b.sty-mp { color: var(--gold); font-weight: 800; white-space: nowrap; }
.guide-body b.sty-mp::before { content: "\2726\00a0"; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body b.sty-free,
html[data-gtheme="wiki"] body.lib .guide-body b.sty-free,
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body b.rs-ok,
html[data-gtheme="wiki"] body.lib .guide-body b.rs-ok { color: #1e7a3f; }

/* ===== Stylist ===================================================================================================== */
.guide-body .sty-frame { display: flex; gap: 18px; align-items: flex-start; margin: 12px 0 18px; padding: 14px; border-radius: 16px;
  background: linear-gradient(160deg, rgba(202, 111, 153, .10), rgba(255, 255, 255, .02)); border: 1px solid var(--line); }
.guide-body .sty-frame > p.sty-art { flex: none; margin: 0; }
.guide-body .sty-frame > p.sty-art img { display: block; width: 150px; height: auto; }
.guide-body .sty-frame-body { flex: 1; min-width: 0; }
.guide-body .sty-frame-body > p:first-child { margin-top: 0; }
.guide-body ul.sty-tabbar { list-style: none; margin: 10px 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.guide-body ul.sty-tabbar > li { margin: 0; padding: 4px 11px; border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--text);
  background: var(--raised); border: 1px solid var(--line-strong); }
.guide-body ul.sty-tabbar > li:first-child { background: rgba(232, 193, 109, .22); border-color: var(--gold); }
.guide-body ol.steps.sty-steps { margin: 12px 0; }
.guide-body ul.sty-legend { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13.5px; color: var(--muted); }
.guide-body ul.sty-legend > li { margin: 0; }
@media (max-width: 640px) {
  .guide-body .sty-frame { flex-direction: column; align-items: center; }
  .guide-body .sty-frame > p.sty-art img { width: 120px; }
}

/* the 9 tabs: one card each, the cost lines first */
.guide-body .sty-tabs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); gap: 12px; margin: 12px 0 20px; }
.guide-body .sty-tab { padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.guide-body .sty-tab > h4 { margin: 0 0 8px; font-size: 16px; color: var(--gold-2); }
.guide-body .sty-tab > p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; }
.guide-body .sty-tab > p.sty-price { margin: 0 0 4px; padding: 4px 9px; border-radius: 8px; background: var(--raised); border: 1px solid var(--line); font-size: 13.5px; }
.guide-body .sty-tab ul.sty-parts { margin: 4px 0 0; padding-left: 18px; font-size: 14px; }

/* Skin Color: swatch + the Novice in each tone */
.guide-body ul.sty-tones { list-style: none; margin: 10px 0 20px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.guide-body ul.sty-tones > li { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 0 2px; padding: 0 6px 8px;
  border-radius: 12px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; text-align: center; }
.guide-body ul.sty-tones > li::before { content: ""; flex: 0 0 calc(100% + 12px); height: 16px; margin: 0 -6px 8px; background: var(--sty-tone); }
.guide-body ul.sty-tones > li img { height: 110px; max-height: none; width: auto; image-rendering: pixelated; }
.guide-body ul.sty-tones > li span { flex: 0 0 100%; margin-top: 4px; font-weight: 700; font-size: 13.5px; }
.guide-body .sty-tone-porcelain { --sty-tone: #f7c8b8; }
.guide-body .sty-tone-default { --sty-tone: #f6ae9f; }
.guide-body .sty-tone-beige { --sty-tone: #ecb08e; }
.guide-body .sty-tone-golden { --sty-tone: #dc9f74; }
.guide-body .sty-tone-tan { --sty-tone: #c48660; }
.guide-body .sty-tone-caramel { --sty-tone: #a66a45; }
.guide-body .sty-tone-brown { --sty-tone: #845036; }

/* Your new look: the summary panel of the window */
.guide-body .sty-look { max-width: 420px; margin: 10px 0 14px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-strong); }
.guide-body p.sty-look-title { margin: 0 0 6px; font: 800 11px/1.3 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.guide-body ul.sty-rows { list-style: none; margin: 0; padding: 0; }
.guide-body ul.sty-rows > li { margin: 0; display: flex; align-items: baseline; gap: 8px; padding: 5px 2px; border-bottom: 1px solid var(--line); font-size: 14px; }
.guide-body ul.sty-rows .sty-k { flex: 0 0 110px; color: var(--muted); font-size: 13px; }
.guide-body ul.sty-rows .sty-was { color: var(--muted); text-decoration: line-through; }
.guide-body ul.sty-rows .sty-to { font-size: 0; }
.guide-body ul.sty-rows .sty-to::before { content: "\2192"; font-size: 14px; color: var(--gold); }
.guide-body ul.sty-rows b.sty-new { color: var(--gold-2); }
.guide-body p.sty-cost { margin: 10px 0 0; font-weight: 800; color: var(--gold); }
.guide-body p.sty-have { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.guide-body ul.sty-buttons { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.guide-body ul.sty-buttons > li { margin: 0; padding: 6px 10px; border-radius: 8px; text-align: center; font-weight: 700; font-size: 13.5px;
  background: var(--raised); border: 1px solid var(--line-strong); }

/* hairstyle grids: numbered tiles (the number is the list's own), gold star on the Hairstyle Expansion */
.guide-body ol.sty-hairgrid { list-style: none; counter-reset: sty-hair; margin: 10px 0 16px; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 5px; }
.guide-body ol.sty-hairgrid > li { counter-increment: sty-hair; position: relative; margin: 0; padding: 2px; border-radius: 8px;
  background: linear-gradient(180deg, var(--raised), var(--surface)); border: 1px solid var(--line); }
.guide-body ol.sty-hairgrid > li img { display: block; width: 100%; height: auto; max-height: none; aspect-ratio: 80 / 96; object-fit: contain; }
.guide-body ol.sty-hairgrid > li::after { content: counter(sty-hair); position: absolute; right: 5px; bottom: 2px; font: 800 12px/1.2 var(--body); color: var(--text);
  text-shadow: 0 0 3px var(--surface), 0 0 3px var(--surface); }
.guide-body ol.sty-hairgrid > li.sty-paid { border-color: var(--gold); }
.guide-body ol.sty-hairgrid > li.sty-paid::before { content: "\2726"; position: absolute; left: 5px; top: 2px; font-size: 12px; color: var(--gold); }

/* ===== Witch Nefasta =============================================================================================== */
.guide-body .nf-r1 { --nf-c: #78808c; }
.guide-body .nf-r2 { --nf-c: #3c9650; }
.guide-body .nf-r3 { --nf-c: #326ec8; }
.guide-body .nf-r4 { --nf-c: #8c46be; }
.guide-body .nf-r5 { --nf-c: #cd8c14; }
.guide-body .nf-window { margin: 12px 0 20px; border-radius: 16px; border: 1px solid var(--line-strong); background: var(--surface); overflow: hidden; }
.guide-body .nf-window > p { margin: 10px 16px; }
.guide-body p.nf-title { margin: 0; padding: 10px 16px; background: linear-gradient(90deg, #4a2466, #6b3a8c); color: #fff1dc; }
.guide-body p.nf-title b { font-family: var(--title); font-size: 21px; font-weight: 400; margin-right: 10px; }
.guide-body p.nf-title span { font-size: 13px; color: #e6d2f0; }
.guide-body .nf-panel { margin: 0 12px 12px; padding: 10px 14px 12px; border-radius: 12px; background: var(--raised); border: 1px solid var(--line); }
.guide-body .nf-panel > h4 { display: inline-block; margin: 0 0 6px; padding: 3px 14px; border-radius: 8px 8px 0 0; border-bottom: 2px solid var(--gold); color: var(--gold-2); }
.guide-body .nf-panel > p { margin: 4px 0; font-size: 14px; }
.guide-body p.nf-hint { color: var(--muted); font-size: 13.5px; }
.guide-body ol.steps.nf-steps { margin: 8px 0; }
.guide-body span.nf-pill { display: inline-block; margin: 2px 1px; padding: 1px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  border: 1px solid var(--nf-c, var(--line-strong)); color: var(--text); background: rgba(255, 255, 255, .04); }
.guide-body span.nf-pill[class*="nf-r"] { background: var(--nf-c); border-color: var(--nf-c); color: #fff; }
.guide-body ul.nf-swaps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 8px; }
.guide-body ul.nf-swaps > li { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 8px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-size: 13.5px; }
.guide-body .nf-swap .nf-arrow { font-size: 0; }
.guide-body .nf-swap .nf-arrow::before { content: "\2192"; font-size: 18px; color: var(--gold); }
.guide-body .nf-swap .nf-act { margin-left: auto; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #5a2d7a; color: #fff1dc; }
.guide-body ul.nf-boxes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 5px; }
.guide-body ul.nf-boxes > li { margin: 0; padding: 4px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); font-size: 13.5px; }
.guide-body b.nf-num { color: var(--gold-2); white-space: nowrap; }
.guide-body .nf-zeny b { color: var(--gold); white-space: nowrap; }

/* crafting costs: one rank card per tier */
.guide-body .nf-ranks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 10px; margin: 12px 0 18px; }
.guide-body .nf-rank { padding: 10px 12px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--nf-c); }
.guide-body .nf-rank > h4 { margin: 0 0 8px; font-size: 15.5px; }
.guide-body .nf-rank span.nf-rar { margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; vertical-align: 2px; background: var(--nf-c); color: #fff; }
.guide-body ul.nf-cost { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.guide-body ul.nf-cost > li { margin: 0; }

/* fragment lists: chips */
.guide-body p.nf-caption { margin: 8px 0 6px; padding-left: 10px; border-left: 4px solid var(--nf-c); font-weight: 700; }
.guide-body ul.nf-chips { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 5px; }
.guide-body ul.nf-chips > li { margin: 0; padding: 4px 9px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); font-size: 13.5px; }
.guide-body ul.nf-chips > li > img { height: 22px; width: auto; vertical-align: middle; margin-right: 5px; }

/* Tier list: hat tiles per slot, colored like the rarity of the tier */
.guide-body .nf-group { margin: 10px 0 18px; }
.guide-body .nf-group > h4 { margin: 0 0 2px; padding-left: 10px; border-left: 4px solid var(--nf-c); }
.guide-body p.nf-groupcost { margin: 0 0 8px; font-size: 13.5px; color: var(--muted); }
.guide-body p.nf-groupcost .nf-c { color: var(--text); white-space: nowrap; }
.guide-body ul.nf-hats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 8px; }
.guide-body ul.nf-hats > li.nf-hat { margin: 0; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 3px 8px; padding: 8px 10px 9px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--nf-c); font-size: 12.5px; line-height: 1.35; }
.guide-body li.nf-hat > .nf-n { flex: 0 0 100%; font-weight: 700; font-size: 14px; color: var(--text); }
.guide-body li.nf-hat > .nf-n > i { font-style: normal; font-weight: 400; color: var(--muted); }
.guide-body li.nf-hat > .nf-s, .guide-body li.nf-hat > .nf-j { flex: 0 0 100%; color: var(--muted); }
.guide-body li.nf-hat > .nf-s b { color: var(--text); }
.guide-body li.nf-hat > ul { flex: 0 0 100%; margin: 2px 0 0; padding: 5px 0 0 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text); }
.guide-body li.nf-hat > ul li { margin: 1px 0; }
.guide-body li.nf-hat > ul ul { padding-left: 14px; }

/* ===== Restock ===================================================================================================== */
.guide-body .rs-window { margin: 12px 0 14px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--surface); overflow: hidden; }
.guide-body p.rs-title { margin: 0; padding: 9px 14px; background: var(--raised); border-bottom: 1px solid var(--line); }
.guide-body p.rs-title b { font-family: var(--title); font-weight: 400; font-size: 19px; color: var(--gold-2); margin-right: 8px; }
.guide-body p.rs-title span { font-size: 13px; color: var(--muted); }
.guide-body p.rs-title span::before { content: "\2014\00a0"; }
.guide-body .rs-body { display: flex; gap: 12px; padding: 12px; }
.guide-body ul.rs-lists { list-style: none; flex: 0 0 150px; margin: 0; padding: 0; display: grid; gap: 6px; align-content: start; }
.guide-body ul.rs-lists > li { margin: 0; padding: 7px 10px; border-radius: 8px; font-weight: 700; font-size: 13.5px; background: var(--raised); border: 1px solid var(--line); }
.guide-body ul.rs-lists > li.rs-on { border-color: var(--gold); box-shadow: inset 3px 0 0 var(--gold); }
.guide-body ul.rs-lists > li.rs-new { color: var(--muted); font-weight: 400; border-style: dashed; }
.guide-body ul.rs-lists > li.rs-new::before { content: "+\00a0"; }
.guide-body .rs-list { flex: 1; min-width: 0; overflow-x: auto; }
.guide-body table.rs-table { width: 100%; margin: 0; font-size: 13.5px; }
.guide-body table.rs-table td:not(:first-child), .guide-body table.rs-table th:not(:first-child) { text-align: center; }
.guide-body b.rs-take { color: var(--gold-2); }
.guide-body b.rs-short { color: #d4544a; white-space: nowrap; }
.guide-body p.rs-total { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 0; font-weight: 700; font-size: 13.5px; }
.guide-body span.rs-button { display: inline-block; padding: 6px 16px; border-radius: 8px; font-weight: 800; font-size: 13.5px; color: #1a0c12;
  background: linear-gradient(135deg, var(--gold-2), var(--gold)); }
.guide-body span.rs-button.rs-light { color: var(--text); background: var(--raised); border: 1px solid var(--line-strong); margin-right: 8px; }
.guide-body p.rs-foot { margin: 0; padding: 10px 12px 12px; font-size: 13.5px; color: var(--muted); border-top: 1px solid var(--line); }
@media (max-width: 640px) {
  .guide-body .rs-body { flex-direction: column; }
  .guide-body ul.rs-lists { flex: none; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}
.guide-body li.nf-hat > .nf-own { flex: 0 0 100%; color: #d4544a; font-weight: 700; }
/* module:stylist:end */
/* module:stable:start (Outil/site/stable/stable.css) */
/* Mount System page (content/guides/systems/mount-system.html), laid out like The Stable window of daro.dll (Mount
   Breeder, Midgard): left panel (portrait + speech bubble, Resistance / Stamina, walking speed, reins +0..+10, Shop /
   Feed), chalkboard "Tricks school", the 4 mount skill cards. The HTML is written by Outil/site/stable/stable_page.py
   (regions .sb-gen). Everything is scoped under .guide-body and uses the theme variables, so it works on the dark theme
   and on the light ones (Parchment, Wiki); the chalkboard, the speech bubble and the wooden buttons keep the window's
   own colours in every theme. Reuses from site.css: a.ref (item icon + Codex link), ul.cards-list. */

.guide-body .sb-gen { --sb-green: #7fd394; --sb-wood: #b8894c; --sb-wood-dark: #5a3412; --sb-ink: #4a2e14; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body .sb-gen,
html[data-gtheme="wiki"] body.lib .guide-body .sb-gen { --sb-green: #1e7a3f; }

/* in-game punctuation only ("Your mount: Cerberus"): the web shows the parts as blocks */
.guide-body .sb-sep { display: none; }
/* the site makes long lists of short lines two columns (ul.cols2): not in these panels */
.guide-body .sb-gen ul.cols2 { columns: auto; }
.guide-body .sb-gen a.ref { border-bottom: 0; }
.guide-body .sb-note { margin: 6px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.guide-body .sb-note b { color: var(--text); }

/* --- left panel of the window: portrait, bubble, bars, Feed / Shop --- */
.guide-body .sb-panel { margin: 12px 0 22px; padding: 16px 16px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-strong); border-top: 6px solid var(--sb-wood); }
.guide-body .sb-face { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.guide-body .sb-face > img { flex: none; width: 112px; height: 112px; border-radius: 50%; object-fit: cover; border: 4px solid var(--sb-wood); box-shadow: 0 0 0 2px var(--sb-wood-dark), 0 6px 18px rgba(0, 0, 0, .35); }
.guide-body p.sb-say { position: relative; margin: 0; max-width: 260px; padding: 10px 14px; border-radius: 14px; background: #fff; border: 2px solid var(--sb-ink); color: var(--sb-ink); font: 700 15px/1.35 "Comic Sans MS", "Comic Neue", "Segoe Print", cursive; transform: rotate(2deg); }
.guide-body p.sb-say::before { content: ""; position: absolute; left: -12px; top: 50%; margin-top: -7px; border: 7px solid transparent; border-right: 11px solid var(--sb-ink); border-left: 0; }
.guide-body p.sb-say::after { content: ""; position: absolute; left: -8px; top: 50%; margin-top: -5px; border: 5px solid transparent; border-right: 9px solid #fff; border-left: 0; }
.guide-body p.sb-name { margin: 12px 0 14px; }
.guide-body p.sb-name > b { display: block; font: 400 24px/1.2 var(--title); color: var(--gold-2); }
.guide-body p.sb-name .sb-kind { color: var(--muted); font-size: 14px; }

.guide-body .sb-stats, .guide-body .sb-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 12px; }
.guide-body .sb-actions { margin-top: 12px; }
.guide-body .sb-stat, .guide-body .sb-act { padding: 12px 14px; border-radius: 12px; background: var(--raised); border: 1px solid var(--line); }
.guide-body .sb-stat > h4 { margin: 0 0 6px; color: var(--gold); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.guide-body .sb-stat > p { margin: 0 0 6px; font-size: 14.5px; line-height: 1.5; }
.guide-body p.sb-bar { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.guide-body p.sb-bar .sb-label { flex: none; min-width: 84px; font-weight: 700; }
.guide-body p.sb-bar .sb-track { flex: 1 1 auto; height: 13px; border-radius: 7px; background: rgba(128, 128, 128, .22); border: 1px solid var(--sb-wood); overflow: hidden; }
.guide-body p.sb-bar .sb-fill { display: block; width: 100%; height: 100%; border-radius: 6px; }
.guide-body .sb-hp .sb-fill { background: linear-gradient(90deg, #e05a3a, #f39a4a); }
.guide-body .sb-sp .sb-fill { background: linear-gradient(90deg, #3a7ae0, #5ab0f3); }
.guide-body p.sb-bar > b { flex: none; font-variant-numeric: tabular-nums; color: var(--gold-2); }
/* Feed / Shop: the heading is the window's wooden button */
.guide-body .sb-act > h4 { display: inline-block; margin: 0 0 8px; padding: 5px 16px; border-radius: 9px; background: linear-gradient(#b67a40, #8a5428); border: 2px solid var(--sb-wood-dark); box-shadow: 0 3px 0 var(--sb-wood-dark); color: #fff3d6; font-size: 14px; }
.guide-body .sb-act > p { margin: 0 0 6px; font-size: 14.5px; line-height: 1.5; }
.guide-body .sb-act > p img { vertical-align: middle; }
.guide-body ul.sb-shoplist { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.guide-body ul.sb-shoplist > li { margin: 0; padding: 3px 10px 3px 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 13.5px; }

/* --- walking speed (dashed box of the window) and the reins track --- */
.guide-body .sb-speedbox { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 16px; margin: 12px 0; padding: 12px 18px; border-radius: 12px; border: 2px dashed var(--sb-wood); background: rgba(232, 193, 109, .06); }
.guide-body p.sb-speedline { display: contents; }
.guide-body p.sb-speedline .sb-label { grid-column: 1; grid-row: 1; font-weight: 700; }
.guide-body b.sb-big { grid-column: 2; grid-row: 1 / 3; font: 400 38px/1 var(--title); color: var(--sb-green); }
.guide-body p.sb-formula { grid-column: 1; grid-row: 2; margin: 0; color: var(--muted); font-size: 14px; }
.guide-body .sb-reins { margin: 14px 0 22px; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-strong); }
.guide-body p.sb-reinshead { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0; }
.guide-body p.sb-reinshead > b { font: 400 20px/1.2 var(--title); color: var(--gold-2); }
.guide-body p.sb-reinshead .sb-sub { color: var(--sb-green); font-weight: 700; }
.guide-body ol.sb-track10 { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.guide-body ol.sb-track10 > li { position: relative; margin: 0; padding: 14px 10px 8px; border-radius: 10px; background: var(--raised); border: 1px solid var(--line); font-size: 13.5px; line-height: 1.4; }
.guide-body ol.sb-track10 > li::before { content: ""; position: absolute; left: 10px; right: 10px; top: 5px; height: 6px; border-radius: 3px; background: linear-gradient(#ffd66a, #d39a2a); border: 1px solid #a8741f; }
.guide-body ol.sb-track10 b.sb-lv { display: inline-block; min-width: 34px; margin-right: 4px; font: 400 18px/1.2 var(--title); color: var(--gold-2); }
.guide-body ol.sb-track10 .sb-z b { color: var(--gold); }
.guide-body ol.sb-track10 ul { list-style: none; margin: 4px 0 0; padding: 0; }
.guide-body ol.sb-track10 ul > li { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.guide-body ol.sb-track10 ul > li img { width: 18px; height: 18px; }

/* --- reins cards and mount portraits --- */
.guide-body .sb-reinscards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; margin: 12px 0 22px; }
.guide-body .sb-rein { padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.guide-body .sb-rein.sb-adv { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(232, 193, 109, .25); }
.guide-body .sb-rein > h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--gold-2); font-size: 16px; }
.guide-body .sb-rein > h4 img { width: 32px; height: 32px; object-fit: contain; }
.guide-body .sb-rein > p { margin: 0 0 4px; font-size: 14px; }
.guide-body .sb-rein p.sb-tag { display: inline-block; padding: 1px 9px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.guide-body .sb-adv p.sb-tag { border-color: var(--gold); color: var(--gold); }
.guide-body .sb-rein p.sb-desc { color: var(--sb-green); font-weight: 700; }
.guide-body .sb-rein p.sb-where { color: var(--muted); font-size: 13px; }
.guide-body .sb-rein p.sb-where b { color: var(--text); }
.guide-body ul.sb-looks { list-style: none; margin: 12px 0 24px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
.guide-body ul.sb-looks > li { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0; padding: 10px 6px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); text-align: center; transition: border-color .2s, transform .2s; }
.guide-body ul.sb-looks > li:hover { border-color: var(--gold); transform: translateY(-1px); }
.guide-body ul.sb-looks > li img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 3px solid var(--sb-wood); margin-bottom: 4px; }
.guide-body ul.sb-looks > li b { color: var(--gold-2); font-size: 14px; }
.guide-body ul.sb-looks > li span { color: var(--muted); font-size: 12px; line-height: 1.3; }

/* --- the 4 mount skills (bottom of the window) --- */
.guide-body .sb-skillcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px; margin: 12px 0 8px; }
.guide-body .sb-skill { display: flex; flex-direction: column; align-items: center; padding: 14px 12px 12px; border-radius: 14px; background: var(--surface); border: 2px solid var(--sb-wood); text-align: center; }
.guide-body .sb-skill > img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 3px solid var(--sb-wood-dark); box-shadow: 0 0 0 3px rgba(232, 193, 109, .45); }
.guide-body .sb-skill > h4 { margin: 8px 0 2px; color: var(--gold-2); font-size: 16px; }
.guide-body .sb-skill > p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.45; }
.guide-body .sb-skill > p.sb-cost { color: var(--muted); font-size: 12.5px; font-weight: 700; }
.guide-body .sb-skill > p.sb-sp { margin-top: auto; color: var(--muted); }
.guide-body .sb-skill > p.sb-sp b { color: var(--gold); }
.guide-body .sb-skill > p.sb-boost { margin: 0; color: var(--sb-green); font-weight: 700; font-size: 13px; }

/* --- chalkboard: Tricks school (window colours in every theme) --- */
.guide-body .sb-board { margin: 12px 0 24px; padding: 16px 18px 14px; border-radius: 12px; background: #2f4a36; border: 9px solid #8a5a2c; box-shadow: inset 0 0 30px rgba(0, 0, 0, .35), 0 4px 14px rgba(0, 0, 0, .25); color: #f2f6ee; }
.guide-body .sb-board a, .guide-body .sb-board a:hover { color: #ffd66a; }
.guide-body p.sb-boardhead { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 4px; }
.guide-body p.sb-boardhead > b { font: 700 22px/1.2 "Comic Sans MS", "Comic Neue", "Segoe Print", cursive; color: #f2f6ee; }
.guide-body p.sb-boardhead .sb-brain { padding: 2px 10px; border-radius: 999px; border: 1px dashed rgba(214, 230, 208, .7); color: #d6e6d0; font-size: 13px; }
.guide-body p.sb-boardrule { margin: 0 0 12px; color: #cfe0c8; font-size: 13.5px; }
.guide-body p.sb-boardrule b { color: #ffd66a; }
.guide-body ul.sb-tricks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 6px 10px; }
.guide-body ul.sb-tricks > li { position: relative; margin: 0; min-height: 50px; padding: 6px 10px 7px 54px; border-radius: 8px; border: 1px dashed rgba(255, 255, 255, .25); color: #f2f6ee; }
.guide-body ul.sb-tricks > li:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 214, 106, .7); }
.guide-body ul.sb-tricks > li > img { position: absolute; left: 7px; top: 8px; width: 36px; height: 36px; padding: 2px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.guide-body ul.sb-tricks p { margin: 0; }
.guide-body ul.sb-tricks p.sb-tn b { font: 700 15px/1.3 "Comic Sans MS", "Comic Neue", "Segoe Print", cursive; color: #f2f6ee; }
.guide-body ul.sb-tricks .sb-grp { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; border: 1px solid currentColor; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; vertical-align: 2px; }
.guide-body ul.sb-tricks .sb-g-hp .sb-grp { color: #ff9f86; }
.guide-body ul.sb-tricks .sb-g-spd .sb-grp { color: #ffd66a; }
.guide-body ul.sb-tricks .sb-g-trv .sb-grp { color: #8fd6ef; }
.guide-body ul.sb-tricks .sb-g-cft .sb-grp { color: #d7b2ea; }
.guide-body ul.sb-tricks p.sb-fun { color: #cfe0c8; font-size: 13px; line-height: 1.35; }
.guide-body ul.sb-tricks p.sb-real { color: rgba(242, 246, 238, .62); font-size: 12.5px; line-height: 1.35; }
.guide-body ul.sb-tricks p.sb-real i { color: #f2f6ee; }

@media (max-width: 560px) {
  .guide-body .sb-face { justify-content: center; text-align: left; }
  .guide-body ul.sb-tricks > li { padding-left: 50px; }
}
/* module:stable:end */
/* module:midgard:start (Outil/site/midgard/midgard.css) */
/* Midgard Overview page (content/guides/basics/midgard-overview.html): one section per Quick Access district, laid
   out like the Quick Access window of daro.dll (gold medallion + ribbon name, detail line, NPC cards). The HTML is
   written by Outil/site/midgard/midgard_page.py (region div.md-gen). Scoped under .guide-body, theme variables only
   (dark theme and light Parchment/Wiki themes). */

.guide-body .md-gen { margin: 10px 0 24px; }
.guide-body section.md-district { margin: 0 0 22px; padding: 4px 16px 10px; border-radius: 14px; background: var(--surface);
  border: 1px solid var(--line-strong); scroll-margin-top: 80px; }
.guide-body section.md-district > h2 { display: flex; align-items: center; gap: 10px; margin: 12px 0 6px; padding-bottom: 6px;
  border-bottom: 1px solid var(--line); color: var(--gold); scroll-margin-top: 80px; }
.guide-body section.md-district > h2 img.md-medal { flex: none; width: 44px; height: 44px; margin: -4px 0; }
.guide-body section.md-extra > h2 { color: var(--gold-2); }

/* detail line of the Quick Access window */
.guide-body p.md-detail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0 10px; }
.guide-body .md-tag { padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold); background: var(--raised); }
.guide-body .md-sep { display: none; }
.guide-body p.md-detail .md-line { font-weight: 700; color: var(--text); }
.guide-body .md-at { color: var(--muted); font-size: 12px; font-family: ui-monospace, Consolas, monospace; white-space: nowrap; }

/* building sub-titles and NPC cards */
.guide-body h4.md-sub { margin: 14px 0 6px; color: var(--gold-2); font-size: 14px; letter-spacing: .03em; }
.guide-body ul.md-npcs { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.guide-body ul.md-npcs > li.md-npc { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--raised);
  border: 1px solid var(--line); border-left: 3px solid var(--gold); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.guide-body ul.md-npcs > li.md-npc:hover { border-color: var(--gold); }
.guide-body li.md-npc .md-name { color: var(--gold); font-size: 14px; }
.guide-body li.md-npc .md-what { color: var(--text); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.guide-body li.md-npc .md-at { align-self: flex-start; margin-top: 2px; }

/* "in the game" notes next to the old wiki facts, and the guide links */
.guide-body p.md-game { margin: 4px 0 10px; padding: 6px 10px; border-radius: 8px; border-left: 3px solid var(--aqua);
  background: var(--raised); font-size: 13px; }
.guide-body p.md-guides { margin: 12px 0 2px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 13px; color: var(--muted); }
.guide-body p.md-guides a { font-weight: 700; }

@media (max-width: 560px) {
  .guide-body section.md-district { padding: 2px 10px 8px; }
  .guide-body section.md-district > h2 img.md-medal { width: 36px; height: 36px; }
}
/* module:midgard:end */
/* module:bg:start (Outil/site/bg/bg.css) */
/* Custom Battlegrounds page (content/guides/activities/custom-battlegrounds.html), laid out like the BATTLEGROUND
   (@bginfo) and Battlegrounds (Commander) windows of daro.dll. The HTML is written by Outil/site/bg/bg_page.py
   (regions .bgx-gen). Everything is scoped under .guide-body and uses the theme variables, so it works on the dark
   theme and on the light ones (Parchment, Wiki). Pictures: assets/guides/bg/ (map_<mode>.png minimaps, bomber_*.png,
   window_today.png). Mode colors: the dots of the Battlegrounds window (bgw_colors of bgcal.inc). */

/* in-game punctuation only (the in-game guide joins the inline parts): hidden on the web */
.guide-body .bgx-sep { display: none; }
.guide-body .bgx-note { margin: 8px 0 14px; font-size: 14px; color: var(--muted); }
.guide-body .bgx-note b { color: var(--text); }

/* mode colors (bgcal.inc) */
.guide-body .bgx-c1 { --bgx: #3a7ae0; }
.guide-body .bgx-c2 { --bgx: #c0303a; }
.guide-body .bgx-c3 { --bgx: #8a6a3a; }
.guide-body .bgx-c4 { --bgx: #7a3ac0; }
.guide-body .bgx-c5 { --bgx: #2f8a4a; }
.guide-body .bgx-c6 { --bgx: #2a8ac0; }
.guide-body .bgx-c7 { --bgx: #a0602a; }
.guide-body .bgx-c8 { --bgx: #d0702a; }
.guide-body .bgx-c9 { --bgx: #e04a8a; }
.guide-body .bgx-c10 { --bgx: #3ab0d0; }

/* --- the hour of a battleground: 4 stops on a line --- */
.guide-body ol.bgx-time { list-style: none; margin: 14px 0 18px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 10px; counter-reset: none; }
.guide-body ol.bgx-time > li { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 12px 16px; border-radius: 12px;
  background: var(--raised); border: 1px solid var(--line-strong); border-top: 3px solid var(--gold); font-size: 14px; line-height: 1.45; }
.guide-body ol.bgx-time > li > b { font-size: 15.5px; color: var(--text); }
.guide-body ol.bgx-time > li > span:last-child { color: var(--muted); }
.guide-body ol.bgx-time .bgx-at { align-self: flex-start; padding: 2px 10px; border-radius: 999px; font: 700 13px/1.4 var(--title, inherit);
  color: #1a0c12; background: linear-gradient(135deg, var(--gold-2), var(--gold)); }

/* --- window capture --- */
.guide-body p.bgx-shot { margin: 12px 0 20px; text-align: center; }
.guide-body p.bgx-shot img { display: inline-block; max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line-strong);
  box-shadow: 0 12px 30px -16px rgba(0, 0, 0, .7); }

/* --- schedule: the modes as colored chips (dots of the window) --- */
.guide-body ul.bgx-rot { list-style: none; margin: 12px 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.guide-body ul.bgx-rot > li { margin: 0; padding: 6px 12px 6px 10px; border-radius: 999px; font-size: 14px; font-weight: 700;
  background: var(--raised); border: 1px solid var(--line-strong); }
.guide-body ul.bgx-rot > li::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 3px;
  background: var(--bgx, var(--gold)); vertical-align: 0; }

/* --- Happy Hours: 4 gold tiles with a star --- */
.guide-body ul.bgx-happy-list { list-style: none; margin: 12px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 10px; }
.guide-body ul.bgx-happy-list > li { position: relative; margin: 0; padding: 12px 14px; border-radius: 12px; display: flex; flex-direction: column; gap: 2px;
  background: linear-gradient(160deg, rgba(232, 193, 109, .14), rgba(232, 193, 109, .03)); border: 1px solid var(--gold); }
.guide-body ul.bgx-happy-list > li > b { font: 400 21px/1.15 var(--title, inherit); color: var(--gold-2); }
.guide-body ul.bgx-happy-list > li > span { font-size: 13.5px; color: var(--muted); }
.guide-body ul.bgx-happy-list > li::after { content: "\2605"; position: absolute; top: 9px; right: 12px; color: var(--gold); font-size: 16px; }

/* --- mode cards (How they work sheet of the window) --- */
.guide-body .bgx-modes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 14px; margin: 12px 0 24px; align-items: start; }
.guide-body .bgx-mode { position: relative; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--bgx, var(--gold)); }
.guide-body .bgx-mode > h4 { margin: 0 0 6px; font-size: 18px; color: var(--text); }
.guide-body .bgx-mode > h4::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 8px; border-radius: 3px; background: var(--bgx, var(--gold)); }
.guide-body .bgx-mode > p { margin: 0 0 6px; font-size: 14.5px; line-height: 1.5; }
.guide-body .bgx-mode > p > b:first-child { color: var(--gold-2); }
.guide-body .bgx-mode > ul { margin: 4px 0 8px; padding-left: 18px; font-size: 14px; line-height: 1.45; }
.guide-body .bgx-mode > ul > li { margin: 0 0 3px; }
.guide-body p.bgx-pic { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.guide-body p.bgx-pic img { flex: 1 1 0; min-width: 0; max-width: 100%; height: 112px; object-fit: contain; padding: 6px; box-sizing: border-box; border-radius: 10px;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .06), rgba(0, 0, 0, .25)), #20232b; border: 1px solid var(--line-strong); }
.guide-body p.bgx-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.guide-body p.bgx-tags > span:not(.bgx-sep) { padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--raised); border: 1px solid var(--line-strong); }
.guide-body p.bgx-tags > span:last-child { border-color: var(--gold); color: var(--gold-2); }
.guide-body p.bgx-pay { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 10px 0 0; padding-top: 9px; border-top: 1px dashed var(--line-strong); font-size: 13.5px; }
.guide-body p.bgx-pay > span:not(.bgx-sep) { color: var(--muted); }
.guide-body p.bgx-pay b { color: var(--gold-2); font-size: 16px; }
.guide-body p.bgx-pay > span:last-child { margin-left: auto; font-weight: 700; color: var(--text); }
.guide-body ul.bgx-bonus { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; padding: 0; }
.guide-body ul.bgx-bonus > li { display: flex; align-items: center; gap: 6px; margin: 0; padding: 3px 10px 3px 4px; border-radius: 999px; font-size: 13px; font-weight: 700;
  background: var(--raised); border: 1px solid var(--line-strong); }
.guide-body ul.bgx-bonus > li img { width: 30px; height: 30px; object-fit: contain; }

/* --- rewards table --- */
.guide-body table.bgx-table td:nth-child(3) b { color: var(--gold-2); font-size: 16px; }
.guide-body table.bgx-table td:last-child { white-space: nowrap; color: var(--gold-2); font-weight: 700; }

/* --- badge shops (Erundek, Telma) --- */
.guide-body .bgx-shop { margin: 12px 0 18px; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.guide-body .bgx-shop > h4 { margin: 0 0 10px; color: var(--gold-2); font-size: 17px; }
.guide-body .bgx-shopgrp + .bgx-shopgrp { margin-top: 12px; }
.guide-body .bgx-shopgrp > h5 { margin: 0 0 8px; font: 700 12px/1.2 var(--body, inherit); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.guide-body ul.bgx-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 6px; }
.guide-body ul.bgx-items > li { display: flex; align-items: center; gap: 8px; margin: 0; padding: 5px 10px 5px 6px; border-radius: 10px; font-size: 14px;
  background: var(--raised); border: 1px solid var(--line); }
.guide-body .bgx-cost { flex: none; min-width: 38px; padding: 1px 6px; border-radius: 999px; text-align: center; font-weight: 800; font-size: 13px;
  color: var(--gold-2); border: 1px solid var(--gold); background: rgba(232, 193, 109, .08); }

/* --- achievements: 5 tiers --- */
.guide-body ol.bgx-achv-list { list-style: none; margin: 12px 0 20px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 8px; }
.guide-body ol.bgx-achv-list > li { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 10px 12px; border-radius: 12px; font-size: 13.5px;
  background: var(--raised); border: 1px solid var(--line-strong); }
.guide-body ol.bgx-achv-list > li > b { color: var(--text); font-size: 14.5px; }
.guide-body ol.bgx-achv-list > li > span:nth-of-type(2) { color: var(--muted); }
.guide-body ol.bgx-achv-list > li > span:nth-of-type(3) { color: var(--gold-2); font-weight: 700; }

/* --- battleground skills: code badge + guild skill --- */
.guide-body .bgx-skills-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 10px; margin: 12px 0 8px; }
.guide-body .bgx-skill { position: relative; padding: 12px 14px 12px 64px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.guide-body .bgx-skill > p { margin: 0 0 6px; font-size: 14px; line-height: 1.45; }
.guide-body .bgx-skill > h4 { margin: 0 0 4px; font-size: 15.5px; color: var(--gold-2); }
.guide-body .bgx-skill > p.bgx-code { position: absolute; left: 12px; top: 12px; width: 40px; height: 40px; margin: 0; border-radius: 10px; display: grid; place-items: center;
  font: 800 15px/1 var(--body, inherit); letter-spacing: .04em; color: #1a0c12; background: linear-gradient(135deg, var(--gold-2), var(--gold)); }
.guide-body p.bgx-facts { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 0; }
.guide-body p.bgx-facts > span:not(.bgx-sep) { padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--muted); border: 1px solid var(--line-strong); }

/* --- commands --- */
.guide-body ul.bgx-cmd-list { list-style: none; margin: 10px 0 20px; padding: 0; display: grid; gap: 6px; }
.guide-body ul.bgx-cmd-list > li { margin: 0; padding: 8px 12px; border-radius: 10px; font-size: 14.5px; background: var(--raised); border: 1px solid var(--line); }
.guide-body ul.bgx-cmd-list > li > code { margin-right: 6px; padding: 2px 8px; border-radius: 6px; font-weight: 700; color: var(--gold-2); background: rgba(232, 193, 109, .1); border: 1px solid var(--line-strong); }
/* module:bg:end */
/* module:scenes:start (Outil/site/scenes/scenes.css) */
/* Automated scenes & Smart NPC page (content/guides/activities/automated-scenes-smart-npc.html): feature cards, the
   story scenes with screenshots, the Training Grounds stations, the voice samples and Main Quest 1. The HTML is written
   by Outil/site/scenes/scenes_page.py (regions .sc-gen). Everything is scoped under .guide-body and uses the theme
   variables, so it works on the dark theme and on the light ones.
   Reuses from site.css: div.cards / div.card, ol.steps, .video-lite. */

.guide-body .sc-cap { margin: 6px 2px 0; font-size: 13px; line-height: 1.45; color: var(--muted); }

/* --- feature cards --- */
.guide-body div.cards.sc-features { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.guide-body div.card.sc-feat { position: relative; background: var(--surface); border-color: var(--line); border-top: 3px solid var(--gold); padding-top: 12px; }
.guide-body div.card.sc-feat > h4 { margin: 0 0 6px; color: var(--gold-2); font-size: 17px; }
.guide-body div.card.sc-feat > p { margin: 0 0 6px; font-size: 14px; line-height: 1.5; color: var(--text); }
.guide-body div.card.sc-feat > p:last-child { margin-bottom: 0; }
.guide-body div.card.sc-feat > p.sc-kicker { margin: 0 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--aqua); }

/* --- preview video: the lite YouTube button gets a poster-like background --- */
.guide-body .sc-video { max-width: 720px; margin: 10px 0 8px; }
.guide-body .sc-video .video-lite { margin: 0; border: 1px solid var(--line-strong);
  background: radial-gradient(ellipse at 50% 40%, rgba(232, 193, 109, .28), transparent 62%), linear-gradient(160deg, #2a1420, #0c0609); }
.guide-body .sc-video + p { margin-top: 4px; font-size: 14px; }

/* --- story scenes and stations --- */
.guide-body ol.steps.sc-scenes, .guide-body ol.steps.sc-stations { gap: 8px; margin-bottom: 14px; }
.guide-body ol.steps.sc-scenes > li, .guide-body ol.steps.sc-stations > li { padding-top: 10px; padding-bottom: 10px; line-height: 1.5; background: var(--surface); }
.guide-body ol.steps.sc-scenes > li > b:first-child, .guide-body ol.steps.sc-stations > li > b:first-child { color: var(--gold-2); }

/* --- screenshots --- */
.guide-body .sc-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 12px; margin: 6px 0 22px; }
.guide-body .sc-shots.sc-shots-3 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.guide-body .sc-shots.sc-shots-1 { grid-template-columns: minmax(0, 560px); }
.guide-body .sc-shot { margin: 0; }
.guide-body .sc-shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--raised); }
.guide-body .sc-shots-1 .sc-shot img { aspect-ratio: auto; }

/* --- voices: numbers + samples --- */
.guide-body .sc-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 14px; }
.guide-body .sc-stats > p { margin: 0; padding: 8px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.guide-body .sc-stats > p > b { margin-right: 4px; font-size: 20px; color: var(--gold); }
.guide-body .sc-samples { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 12px; margin: 0 0 22px; }
.guide-body .sc-sample { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.guide-body .sc-sample > h4 { margin: 0; color: var(--gold-2); font-size: 16px; }
.guide-body .sc-sample > p { margin: 0; }
.guide-body .sc-sample > p.sc-lang { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--aqua); }
.guide-body .sc-sample > p.sc-line { font-style: italic; font-size: 14px; line-height: 1.45; color: var(--text); }
.guide-body .sc-sample > p.sc-tr { font-size: 13px; line-height: 1.4; color: var(--muted); }
.guide-body .sc-sample > audio { width: 100%; height: 36px; margin-top: auto; padding-top: 6px; }
/* module:scenes:end */
/* module:mastery:start (Outil/site/mastery/mastery.css) */
/* Mastery page (guides/mastery-system-lv-100-103): the TRANSCENDENCE window built by mastery.js (.msw-win) and the
   Alternative Job Costumes gallery written by costumes.py (.msw-costumes). Theme variables only, so it follows the
   reading themes (Parchment, Wiki, Dark). The generated tier cards (.msw-ladder, reborn.css) stay the fallback. */

.guide-body .msw-ladder.msw-hidden { display: none; }
/* without JavaScript the video is a plain figure */
.guide-body figure.msw-ritual { margin: 12px 0 18px; }
.guide-body figure.msw-ritual video { display: block; width: 100%; max-width: 620px; height: auto; border-radius: 12px; border: 1px solid var(--line); }
.guide-body figure.msw-ritual figcaption { margin-top: 6px; font-size: 13px; color: var(--muted); }

/* --- the window: the light blue TRANSCENDENCE window of daro.dll (same colours on every reading theme) --- */
.guide-body .msw-win { --mw-line: #b9cbe6; --mw-ink: #22324d; --mw-blue: #2f5b9a; --mw-soft: #6c7c96; --mw-panel: #f5f8fd;
  /* the theme variables, re-set inside the window so the item list under it (reborn.css) takes the window colours */
  --surface: #f5f8fd; --raised: #fff; --line: #dfe7f3; --line-strong: #b9cbe6; --text: #22324d; --muted: #6c7c96; --gold: #2f5b9a; --gold-2: #2b4a7a;
  margin: 14px 0 26px; border-radius: 8px; overflow: hidden; background: #fff; color: var(--mw-ink);
  border: 1px solid #8fa9d3; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.guide-body .msw-wbar { display: flex; justify-content: space-between; gap: 12px; padding: 4px 12px; font-size: 13px; color: var(--mw-ink);
  background: repeating-linear-gradient(180deg, #eef3fb 0 2px, #dfe8f6 2px 4px); border-bottom: 1px solid var(--mw-line); }
.guide-body .msw-whead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 14px 2px; }
.guide-body .msw-whead b { font-size: 15px; font-weight: 800; color: var(--mw-blue); }
.guide-body .msw-whead .lv { font-size: 13px; color: var(--mw-soft); }
.guide-body .msw-wbody { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.3fr) minmax(150px, .8fr); gap: 10px; padding: 8px 14px 12px; }
.guide-body .msw-wbox, .guide-body .msw-wright { border-radius: 6px; border: 1px solid var(--mw-line); background: var(--mw-panel); overflow: hidden; }
.guide-body p.msw-wbt, .guide-body p.msw-wtitle { margin: 0; padding: 6px 10px; font-size: 13.5px; font-weight: 800; color: var(--mw-blue);
  background: linear-gradient(180deg, #fff, #eaf1fb); border-bottom: 1px solid var(--mw-line); }

/* left: Conditions + Items needed */
.guide-body .msw-wleft { display: flex; flex-direction: column; gap: 10px; }
.guide-body .msw-wbox ul.msw-conds { list-style: none; margin: 0; padding: 4px 10px 6px; }
.guide-body .msw-wbox ul.msw-conds li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 6px 0;
  font-size: 13.5px; border-bottom: 1px solid #dfe7f3; }
.guide-body .msw-wbox ul.msw-conds li:last-child { border-bottom: 0; }
.guide-body .msw-wbox .msw-k { color: var(--mw-ink); white-space: nowrap; }
.guide-body .msw-wbox .msw-v, .guide-body .msw-wbox .msw-v b { text-align: right; color: #b8323f; font-weight: 700; }
.guide-body .msw-wtiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 8px 10px 4px; }
.guide-body .msw-wtile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 2px 3px; border-radius: 5px;
  background: #fff; border: 1px solid #e3a1a8; cursor: help; }
.guide-body .msw-wtile img { width: 30px; height: 30px; object-fit: contain; image-rendering: pixelated; }
.guide-body .msw-wtile .q { font-size: 12px; font-weight: 700; color: var(--mw-ink); }
.guide-body p.msw-wnone { margin: 0; padding: 10px; font-size: 13px; color: var(--mw-soft); }
.guide-body p.msw-wcoll { display: flex; justify-content: space-between; margin: 0; padding: 6px 10px 8px; font-size: 13px; color: #2f8a4c; }

/* centre: the rank name, the ritual (video of the window's centre panel), then the rewards */
.guide-body .msw-wcentre { display: flex; flex-direction: column; gap: 8px; }
.guide-body .msw-stage { display: flex; flex-direction: column; border-radius: 6px; overflow: hidden; border: 1px solid var(--mw-line); background: #8d97ab; }
.guide-body .msw-stage figure.msw-ritual { margin: 0; }
.guide-body .msw-stage figure.msw-ritual video { display: block; width: 100%; max-width: none; height: auto; aspect-ratio: 560 / 500; object-fit: cover; border: 0; border-radius: 0; }
.guide-body .msw-stage figcaption { margin: 0; padding: 5px 10px 6px; text-align: center; font: italic 12.5px/1.3 Georgia, serif; color: #3d5f92;
  background: #eef3fb; border-top: 1px solid var(--mw-line); }
.guide-body p.msw-oname { order: -1; margin: 0; padding: 7px 10px 6px; text-align: center; line-height: 1.2; background: #eef3fb; border-bottom: 1px solid var(--mw-line); }
.guide-body p.msw-oname b { display: block; font: 400 21px/1.1 Georgia, "Times New Roman", serif; letter-spacing: .2em; color: #2b4a7a; }
.guide-body p.msw-oname span { font-size: 12px; color: #3d5f92; }
.guide-body .msw-wgain { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.guide-body p.msw-chip { margin: 0; padding: 6px 8px; border-radius: 6px; text-align: center; background: var(--mw-panel); border: 1px solid var(--mw-line); line-height: 1.25; }
.guide-body p.msw-chip span { display: block; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--mw-soft); }
.guide-body p.msw-chip b, .guide-body p.msw-chip b b { font-size: 13.5px; color: #2f8a4c; }

/* right: the ranks */
.guide-body .msw-wright { display: flex; flex-direction: column; gap: 4px; padding-bottom: 6px; }
.guide-body .msw-wt { display: flex; align-items: center; gap: 10px; margin: 0 6px; padding: 6px 8px; border-radius: 5px; border: 1px solid transparent;
  background: none; font: inherit; color: var(--mw-ink); text-align: left; cursor: pointer; }
.guide-body p.msw-wtitle + .msw-wt { margin-top: 4px; }
.guide-body button.msw-wt:hover { border-color: var(--mw-line); background: #fff; }
.guide-body .msw-wt.on { border-color: #8fb0e0; background: #dce8f8; }
.guide-body .msw-wt .lt { flex: none; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 5px;
  border: 1px solid #9fb6da; font: 400 17px/1 Georgia, serif; color: #3d5f92; background: #fff; }
.guide-body .msw-wt b { display: block; font-size: 14px; font-weight: 600; }
.guide-body .msw-wt small { display: block; font-size: 12px; color: var(--mw-soft); }
.guide-body .msw-wt.soon { opacity: .45; cursor: default; }

/* under the window: where to find the items of the chosen rank */
.guide-body .msw-wpanes { padding: 0 14px 6px; }
.guide-body .msw-pane { display: none; }
.guide-body .msw-pane.on { display: block; }
.guide-body .msw-pane > h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
.guide-body .msw-pane .msw-sheet { display: block; }
.guide-body .msw-pane .msw-cond, .guide-body .msw-pane .msw-noitems, .guide-body .msw-pane p.msw-ep { display: none; }
.guide-body .msw-pane p { color: var(--mw-ink); }
.guide-body .msw-pane p.tip { margin-top: 0; }
.guide-body .msw-wfoot { padding: 7px 14px 9px; font-size: 13px; color: var(--mw-ink); border-top: 1px solid var(--mw-line); }

@media (max-width: 760px) {
  .guide-body .msw-wbody { grid-template-columns: 1fr; }
  .guide-body .msw-wright { order: -1; flex-direction: row; flex-wrap: wrap; padding: 6px; }
  .guide-body p.msw-wtitle { display: none; }
  .guide-body .msw-wt, .guide-body p.msw-wtitle + .msw-wt { margin: 0; flex: 1 1 130px; }
  .guide-body .msw-wt.soon { display: none; }
}

/* --- Alternative Job Costumes: one card per class, the 3 ranks side by side --- */
.guide-body .msw-costumes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 10px; margin: 12px 0 18px; }
.guide-body .msw-cos { padding: 10px 12px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.guide-body .msw-cos h4 { margin: 0 0 8px; font: 400 17px/1.2 var(--title); color: var(--gold-2); }
.guide-body .msw-cos-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.guide-body .msw-cos figure { margin: 0; text-align: center; }
.guide-body .msw-cos figure img { display: block; width: 100%; max-width: 120px; height: auto; margin: 0 auto; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
.guide-body .msw-cos figcaption { margin-top: 4px; font-size: 12px; color: var(--muted); }
.guide-body .msw-cos figcaption b { color: var(--text); }
/* module:mastery:end */
/* module:videos:start (Outil/site/videos/videos.css) */
/* Videos of the in-game windows in the guides (<figure class="gvid"><video autoplay muted loop playsinline>):
   quality-system (Moon Quality), custom-enchant-system (Soul Enchant). Recorded by Grenat, cropped to the window. */
.guide-body figure.gvid { margin: 14px 0 20px; }
.guide-body figure.gvid video { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line-strong);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18); background: #1a1530; }
.guide-body figure.gvid figcaption { margin-top: 7px; font-size: 13px; color: var(--muted); text-align: center; }
/* module:videos:end */
/* module:maps:start (Outil/site/maps/maps.css) */
/* Codex maps (daro/maps.py): the maps list (templates/maps.html, .mpl) and one sheet per map (templates/map.html,
   .mp-sheet) laid out like a navigation window: title band, minimap with its warp portals, world map spot, monster
   cards, exit cards. Uses the theme variables (dark site theme, light Parchment / Wiki reading themes); the minimap
   "radar" and the portal dots keep the game window's own colours on every theme. Also: the map pin of the monster
   pages' "Where to find" lists and the "Map sheet" link of the world map list. maps.js: filters + portal highlight. */

.mpl, .mpl-head, .mp-sheet { --t-town: #e8c16d; --t-field: #74d38f; --t-dungeon: #ff7d95; --t-instance: #8bb8ff; --t-other: #b39aa6; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib :is(.mpl, .mpl-head, .mp-sheet),
html[data-gtheme="wiki"] body.lib :is(.mpl, .mpl-head, .mp-sheet) { --t-town: #9a6b12; --t-field: #2b7a3d; --t-dungeon: #b3203c; --t-instance: #2a5ea8; --t-other: #6b5a60; }
.t-town { --tc: var(--t-town); } .t-field { --tc: var(--t-field); } .t-dungeon { --tc: var(--t-dungeon); }
.t-instance { --tc: var(--t-instance); } .t-other { --tc: var(--t-other); }
.mpl-dot { display: inline-block; flex: none; width: 9px; height: 9px; margin-right: 7px; border-radius: 50%; vertical-align: 1px; background: var(--tc, var(--t-other)); box-shadow: 0 0 0 2px rgba(0, 0, 0, .15); }
.mpl [hidden], .mp-sheet [hidden] { display: none !important; }
.mpl section, .mp-sheet section { padding: 0; }  /* not the global section padding of the home page blocks */

/* --- list: head, filter bar --- */
.mpl-head { justify-content: space-between; }
.mpl-world { display: grid; grid-template-columns: 112px auto; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-strong); color: var(--text); font-weight: 700; }
.mpl-world img { width: 112px; height: 72px; object-fit: cover; border-radius: 9px; display: block; }
.mpl-world:hover { border-color: var(--gold); color: var(--text); }
.mpl-world span { color: var(--aqua); }
.mpl-bar { display: grid; gap: 10px; padding: 14px; margin-bottom: 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-strong); }
.mpl-bar input[type="search"] { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--raised); color: var(--text); font: inherit; }
.mpl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mpl-chips button { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--raised); color: var(--muted); font: inherit; font-size: 13.5px; cursor: pointer; }
.mpl-chips button small { color: var(--faint); font-size: 11.5px; }
.mpl-chips button:hover { color: var(--text); }
.mpl-chips button[aria-pressed="true"] { color: var(--text); border-color: var(--gold); background: linear-gradient(180deg, rgba(232, 193, 109, .18), var(--raised)); }
.mpl-count { margin: 0; font-size: 13px; color: var(--muted); }
.mpl-none { color: var(--muted); font-style: italic; }

/* --- list: groups and cards --- */
.mpl-region { margin: 0 0 30px; }
.mpl-region > h2 { font-family: var(--title); font-weight: 400; font-size: 28px; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line-strong); }
.mpl-region > h2 small, .mpl-type > h3 small { font-family: var(--body); font-size: 13px; color: var(--faint); font-weight: 600; }
.mpl-type > h3 { display: flex; align-items: center; gap: 4px; margin: 16px 0 8px; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mpl-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.mpl-card > a { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto auto auto; column-gap: 12px; align-items: center; height: 100%; box-sizing: border-box;
  padding: 8px 10px 8px 8px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--tc); color: var(--text); transition: border-color .15s, transform .15s; }
.mpl-card > a:hover { border-color: var(--gold); border-left-color: var(--tc); transform: translateY(-2px); color: var(--text); }
.mpl-thumb { grid-row: 1 / span 4; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: radial-gradient(circle at 50% 40%, #2a2033, #120c16 75%); border: 1px solid rgba(0, 0, 0, .35); }
.mpl-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mpl-name { font-weight: 700; font-size: 14.5px; line-height: 1.25; overflow-wrap: anywhere; }
.mpl-code { justify-self: start; font-size: 12px; color: var(--muted); background: none; border: 0; padding: 0; }
.mpl-meta { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 12px; color: var(--muted); }
.mpl-meta span + span::before { content: "·"; margin-right: 8px; color: var(--faint); }
.mpl-spr { display: flex; gap: 4px; align-items: end; height: 28px; overflow: hidden; }
.mpl-spr img { height: 26px; width: auto; max-width: 34px; object-fit: contain; }

/* --- sheet: the window --- */
.mp-sheet { margin: 18px 0 10px; border-radius: 18px; overflow: hidden; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: 0 14px 40px -18px rgba(0, 0, 0, .55); }
.mp-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; padding: 16px 20px; border-top: 5px solid var(--tc);
  background: linear-gradient(180deg, var(--raised), var(--surface)); border-bottom: 1px solid var(--line-strong); }
.mp-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; min-width: 0; }
.mp-title h1 { font-family: var(--title); font-weight: 400; font-size: clamp(28px, 4vw, 42px); line-height: 1.05; margin: 0; overflow-wrap: anywhere; }
.mp-title code { font-size: 14px; padding: 2px 9px; border-radius: 8px; color: var(--gold-2); background: rgba(232, 193, 109, .12); border: 1px solid rgba(232, 193, 109, .35); }
.mp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-tags > span { display: inline-flex; align-items: center; padding: 3px 11px; border-radius: 999px; font-size: 13px; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); }
.mp-tags > span.mp-type { font-weight: 800; border-color: var(--tc); }
.mp-body { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 22px; padding: 20px; align-items: start; }
.mp-side { display: grid; gap: 16px; position: sticky; top: 84px; }
.mp-main { display: grid; gap: 20px; min-width: 0; }
.mp-note { margin: 0; color: var(--muted); font-size: 14px; }

/* minimap "radar": the game's own dark frame on every theme */
.mp-mini { margin: 0; }
.mp-mini-map { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; border: 2px solid #3a2c3f; box-shadow: 0 0 0 1px rgba(232, 193, 109, .35), inset 0 0 30px rgba(0, 0, 0, .6);
  background: radial-gradient(circle at 50% 45%, #2b2236, #0f0a12 80%); }
.mp-mini-map::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 10% 10%; }
.mp-mini-map img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mp-mini-none { display: grid; place-items: center; aspect-ratio: 1; border-radius: 14px; border: 1px dashed var(--line-strong); color: var(--muted); font-size: 14px; text-align: center; padding: 20px; }
.mp-north { position: absolute; right: 8px; top: 8px; z-index: 2; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font: 800 11px/1 var(--body); color: #2a1a00; background: #e8c16d; box-shadow: 0 0 0 2px rgba(0, 0, 0, .45); }
.mp-dot { position: absolute; z-index: 3; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #ffe08a; border: 2px solid #8a3a12; box-shadow: 0 0 0 2px rgba(255, 224, 138, .35), 0 0 10px rgba(255, 214, 120, .9); }
.mp-dot::after { content: attr(data-label); position: absolute; left: 50%; bottom: 150%; transform: translateX(-50%); white-space: nowrap; padding: 3px 8px; border-radius: 7px; font: 700 12px/1.3 var(--body);
  color: #fff; background: rgba(15, 10, 18, .92); border: 1px solid rgba(232, 193, 109, .6); opacity: 0; pointer-events: none; transition: opacity .12s; }
.mp-dot:hover, .mp-dot:focus-visible, .mp-dot.on { z-index: 4; transform: scale(1.35); animation: mp-pulse 1.2s ease-in-out infinite; }
.mp-dot:hover::after, .mp-dot:focus-visible::after, .mp-dot.on::after { opacity: 1; }
@keyframes mp-pulse { 50% { box-shadow: 0 0 0 6px rgba(255, 224, 138, .2), 0 0 16px rgba(255, 214, 120, 1); } }
.mp-mini figcaption { margin-top: 6px; font-size: 12.5px; color: var(--muted); text-align: center; }

/* world map spot */
.mp-world { display: block; color: var(--text); }
.mp-world:hover { color: var(--text); }
.mp-world-map { position: relative; display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-strong); }
.mp-world-map img { display: block; width: 100%; height: auto; }
.mp-world-box { position: absolute; border-radius: 3px; background: rgba(232, 193, 109, .35); outline: 2px solid #ffe08a; }
.mp-world-pin { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #ffe08a; border: 2px solid #8a3a12; box-shadow: 0 0 0 4px rgba(232, 193, 109, .35), 0 0 18px rgba(255, 214, 120, .9); animation: mp-pulse 1.4s ease-in-out infinite; }
.mp-world-cap { display: block; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--aqua); }
.mp-world:hover .mp-world-map { border-color: var(--gold); }

/* map rules */
.mp-rules h2, .mp-sec > h2 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; font-family: var(--title); font-weight: 400; font-size: 22px; }
.mp-sec > h2 small { font-family: var(--body); font-size: 13px; color: var(--faint); font-weight: 600; }
.mp-rules ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mp-rules li { padding: 3px 10px; border-radius: 8px; font-size: 13px; background: var(--raised); border: 1px solid var(--line-strong); color: var(--text); }
.mp-rules li.f-pvp, .mp-rules li.f-gvg, .mp-rules li.f-gvg_castle { border-color: var(--t-dungeon); color: var(--t-dungeon); font-weight: 700; }

/* monster cards */
.mp-mobs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); }
.mp-mob > a { display: grid; grid-template-columns: 58px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 10px; align-items: center; height: 100%; box-sizing: border-box;
  padding: 8px 10px 8px 6px; border-radius: 12px; background: var(--raised); border: 1px solid var(--line); color: var(--text); }
.mp-mob > a:hover { border-color: var(--gold); color: var(--text); }
.mp-spr { grid-row: 1 / span 3; display: grid; place-items: center; width: 58px; height: 58px; }
.mp-spr img { max-width: 58px; max-height: 58px; width: auto; height: auto; object-fit: contain; }
.mp-mname { font-weight: 700; font-size: 14.5px; line-height: 1.25; overflow-wrap: anywhere; }
.mp-mtags { display: flex; flex-wrap: wrap; gap: 4px; }
.mp-mtags:empty { display: none; }
.mp-mtags .elite-trait { font-size: 10.5px; padding: 1px 7px; }
.mp-mfacts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; color: var(--muted); }
.mp-mfacts b { color: var(--text); }
.mp-count { color: var(--gold-2); font-weight: 800; }
.mp-resp { font-size: 12px; white-space: nowrap; }
.mp-sheet .mp-bosses { padding: 12px; margin: 0; border-radius: 16px; background: linear-gradient(180deg, rgba(232, 193, 109, .1), transparent); border: 1px solid rgba(232, 193, 109, .25); }
.mp-bosses .mp-mob > a { border-color: rgba(232, 193, 109, .35); }

/* exits */
.mp-exits { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); }
.mp-exits li > a, .mp-exits li > .mp-exit-off { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 10px; align-items: center; height: 100%; box-sizing: border-box;
  padding: 6px 10px 6px 6px; border-radius: 12px; background: var(--raised); border: 1px solid var(--line); border-left: 3px solid var(--tc, var(--line-strong)); color: var(--text); }
.mp-exits li > a:hover, .mp-exits li.on > a { border-color: var(--gold); color: var(--text); }
.mp-exits li:has(.t-town) > a { --tc: var(--t-town); } .mp-exits li:has(.t-field) > a { --tc: var(--t-field); } .mp-exits li:has(.t-dungeon) > a { --tc: var(--t-dungeon); }
.mp-exits li:has(.t-instance) > a { --tc: var(--t-instance); } .mp-exits li:has(.t-other) > a { --tc: var(--t-other); }
.mp-exit-thumb { grid-row: 1 / span 3; width: 48px; height: 48px; border-radius: 8px; overflow: hidden; background: radial-gradient(circle at 50% 40%, #2a2033, #120c16 75%); }
.mp-exit-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mp-exit-name { font-weight: 700; font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; }
.mp-exits code, .mp-entries code { justify-self: start; font-size: 12px; color: var(--muted); background: none; border: 0; padding: 0; }
.mp-exit-type { display: inline-flex; align-items: center; font-size: 12px; color: var(--muted); }
.mp-sec h3 { margin: 16px 0 8px; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mp-entries { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mp-entries a { display: inline-flex; gap: 6px; align-items: baseline; padding: 4px 10px; border-radius: 999px; background: var(--raised); border: 1px solid var(--line); color: var(--text); font-size: 13.5px; }
.mp-entries a:hover { border-color: var(--gold); color: var(--text); }

@media (max-width: 900px) {
  .mp-body { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .mp-side { position: static; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
  .mp-bar { padding: 14px; }
}

/* monster pages: "Where to find" -> map sheet + pin to the world map; world map list: "Map sheet" link */
.spawns .wm-pin { display: inline-flex; color: var(--faint); }
.spawns .wm-pin:hover { color: var(--gold); }
/* module:maps:end */
/* lib-themes:start (generated by Outil/site/maquettes/theme_guides/gen_css.py) */
/* Parchemin */
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib { --bg: #e9dcc0; --bg-2: #efe2c4; --surface: #f6edd8; --raised: #efe2c4; --line: #d2bd92; --line-strong: #b89b66;
  --text: #2b1d14; --muted: #6b5442; --faint: #6b5442; --aqua: #8a2a4c; --violet: #8a2a4c; --gold: #8a5a12; --gold-2: #8a2a4c; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib a:hover { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .burger { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .tab:hover { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .tab[aria-selected="true"] { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .spec { background: var(--surface); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .tile { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .tile:hover { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .tile p { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .tile.plain { background: var(--surface); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .codex .stats b { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .mock-search .bar { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .mock-search .row:hover, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .mock-search .row.sel { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .side li a.on { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .note { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .toc a:hover { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .skill { background: var(--surface); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .badge.passive { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .badge.active { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .skill p { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .skill .daro-mod, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .levels tr.daro-mod td { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .callout { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .levels td { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .levels tr.lv-high td { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .kfacts dt { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .kfacts dd { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .levels caption { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .already p { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .lore p { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .stacking .stack-help { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .stack-tag.k-debuff { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .stack-members { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .lv-buttons button:hover { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .skill .tbl-launch .tbl-cap { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .tbl-open:hover { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .tbl-modal-head .tbl-note { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .tbl-close:hover { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .tbl-modal-body .levels tr:first-child th { background: var(--surface); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .tbl-modal-body .levels.wide td:first-child { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .family li a:hover { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .journey-progress .resume { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .constellation li a:hover { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .constellation li a.current { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .step .goal { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .step .how { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .step .tip { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .job-card:hover { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .demo[open] summary { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .sub-card:hover { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .item-name { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .item-facts { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .item-desc { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .item-filters input, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .item-filters select { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .mob-stats dd { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .mob-cols .elite h4 { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .dropped-by a:hover { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .quest-body { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .start-banner { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-card:hover { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-toc a:hover, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-siblings a:hover, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-siblings a.on { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body h2, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body h3, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body h4 { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body a { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body a.ref { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-hero .gh-lead { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .gh-facts li { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .gh-where { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body table.guide-table th { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body .fam { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body table.guide-table th { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .review-note { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body pre { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .wiki-sec h2 { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .wiki-sec h4 { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .wiki-sec a { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .news-feature { color: var(--text); background: var(--surface); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .news-feature:hover { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .news-feature p { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .news-feature .news-when time { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .news-row:hover { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .testimonial blockquote { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .testimonial figcaption { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .video-lite span { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .team-card b { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-result-title { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-results mark { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .mob-switch button[data-mob-view="elite"].on { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .elite-where { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .elite-facts { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .elite-trait { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .elite-class b { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .elite-classes h4 { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .mob-area { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .mob-cols h4.elite-boss-drops { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .mob-switch button[data-mob-view="boss"].on { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .boss-view .elite-where { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .top-specs h3 { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body a.fam, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body a.fam:hover { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .stk-card { background: var(--surface); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body .rbw-wt.on .rn { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body .ar-start h4.ar-shield::before { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body .en-warnline { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body img.bb-rune { background: var(--surface); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body .bb-act > h4::before { background: var(--surface); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body b.hz-pct { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body p.hz-teff { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body .ui-menu { background: var(--surface); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body .ui-plus { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body .ui-optsec > h4, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body .ui-codexhead, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body .ui-kughead { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body .ui-switch { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body .ui-kughead > span { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body .ui-tab.on { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body ol.sty-hairgrid > li { background: var(--surface); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body p.nf-title { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body p.nf-title span { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body span.nf-pill[class*="nf-r"] { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body .nf-swap .nf-act { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body .nf-rank span.nf-rar { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body .sb-act > h4 { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body .sb-board { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body .sb-board a, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body .sb-board a:hover { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body p.sb-boardhead > b { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body p.sb-boardhead .sb-brain { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body p.sb-boardrule { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body p.sb-boardrule b { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body ul.sb-tricks > li { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body ul.sb-tricks p.sb-tn b { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body ul.sb-tricks .sb-g-hp .sb-grp { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body ul.sb-tricks .sb-g-spd .sb-grp { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body ul.sb-tricks .sb-g-trv .sb-grp { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body ul.sb-tricks .sb-g-cft .sb-grp { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body ul.sb-tricks p.sb-fun { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body ul.sb-tricks p.sb-real { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body ul.sb-tricks p.sb-real i { color: var(--text); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body figure.gvid video { background: var(--surface); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .mpl-thumb { background: var(--surface); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .mp-bar { background: var(--surface); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .mp-mini-map { background: var(--surface); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .mp-dot::after { color: var(--text); background: var(--surface); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .mp-exit-thumb { background: var(--surface); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib main h1, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib main h2, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib main h3, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib main h4, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib main h5 { color: #3a2416; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib main a:hover { color: #5e1730; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib main b, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib main strong { color: inherit; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib main input, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib main select { background: #f6edd8; color: #2b1d14; border-color: #b89b66; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib main table th { color: #2b1d14; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib main .badge { background: #efe2c4; border-color: #d2bd92; color: #2b1d14; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib main img { filter: none; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib { background: #e9dcc0; background-image: radial-gradient(1200px 600px at 20% 0%, rgba(255,255,255,.35), transparent 60%), radial-gradient(900px 700px at 100% 100%, rgba(120,80,30,.10), transparent 60%); color: #2b1d14; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib main.wrap { color: #2b1d14; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .crumbs, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .crumbs a { color: #6b5442; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .page-head h1, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .page-head p, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .show-head h2, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .show-head p { color: #3a2416; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .page-head p, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .show-head p { color: #6b5442; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .kicker, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .kicker::before { color: #8a5a12; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .kicker::before { background: #8a5a12; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-hero { background: #f6edd8; border-color: #d2bd92; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-hero h1 { color: #3a2416; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-hero .gh-lead, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .gh-where { color: #6b5442; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-hero .gh-lead b, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .gh-facts b, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .gh-facts li > b, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .gh-where b { color: #8a2a4c; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .gh-facts li { background: #efe2c4; border-color: #d2bd92; color: #2b1d14; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .gh-where span { color: #8a5a12; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .gh-visual { border-color: #d2bd92; box-shadow: 0 4px 14px rgba(0,0,0,.15); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .gh-visual.portrait { background-color: #efe2c4; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .gh-mosaic img { background: #efe2c4; border-color: #d2bd92; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .side .panel, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .panel, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .wiki-side { background: #f6edd8; border-color: #d2bd92; color: #2b1d14; box-shadow: none; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .panel h4, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .wiki-side h3 { color: #8a5a12; border-color: #d2bd92; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-toc a, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-siblings a, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .wiki-side a { color: #8a2a4c; opacity: 1; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-toc a:hover, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-siblings a:hover, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-siblings a.on, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .wiki-side a:hover { color: #5e1730; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-side-search input, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-search input { background: #f6edd8; border-color: #b89b66; color: #2b1d14; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body { background: #f6edd8; border: 1px solid #d2bd92; border-radius: 6px; padding: 26px 34px; color: #2b1d14; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body h2, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body h3, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body h4 { color: #3a2416; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body h2 { border-bottom-color: #b89b66; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body h3 { color: #3a2416; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body h2::before { background: #8a2a4c; box-shadow: none; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body a { color: #8a2a4c; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body a:hover { color: #5e1730; text-decoration: underline; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body a.ref { color: #8a2a4c; border-bottom-color: transparent; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body table.guide-table { border-color: #b89b66; border-radius: 0; background: #f6edd8; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body table.guide-table th, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body table.guide-table td { border-color: #b89b66; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body table.guide-table th { background: #e6d3ad; color: #2b1d14; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body table.guide-table tr:nth-child(even) td { background: #efe2c4; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body table.guide-table caption { color: #3a2416; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body pre { background: #f3e3bd; border-color: #c99a3e; color: #2b1d14; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body pre::before { background: #8a2a4c; color: #fff; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body .npc-card { background: #efe2c4; border-color: #d2bd92; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body .npc-pic { background: radial-gradient(circle at 50% 70%, rgba(0,0,0,.06), transparent 70%); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body ul.ref-chips li { background: #efe0bd; border-color: #d2bd92; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .review-note { background: #f3e3bd; border-color: #c99a3e; color: #6b5442; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .guide-body hr { border-top-color: #d2bd92; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .start-banner { background: #f6edd8; border-color: #d2bd92; color: #2b1d14; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .start-banner b { color: #3a2416; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .start-banner span { color: #8a2a4c; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .wiki-sec h2 { color: #3a2416; border-bottom-color: #b89b66; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .wiki-sec h4 { color: #2b1d14; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .wiki-sec li, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .wiki-sec li small { color: #6b5442; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .wiki-sec li::before { color: #8a2a4c; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .wiki-sec a { color: #8a2a4c; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .wiki-sec a:hover { color: #5e1730; text-decoration: underline; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .wiki-grid { background: #f6edd8; border: 1px solid #d2bd92; border-radius: 6px; padding: 26px 30px; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .show-card { background: #f6edd8; border-color: #d2bd92; color: #2b1d14; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .show-card h3 a { color: #3a2416; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .show-card .show-hook, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .show-card li { color: #6b5442; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .show-card li b { color: #8a2a4c; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .show-card a { color: #8a2a4c; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .show-more { color: #8a2a4c; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .show-client { background: #f6edd8; border-color: #d2bd92; color: #2b1d14; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .show-client h3 { color: #3a2416; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .show-client li { color: #6b5442; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .tag-codex { color: #8a5a12; border-color: #8a5a12; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .tag-new { color: #14866d; border-color: #14866d; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib footer, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .footer { background: #0c0709; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .topbar { background: #0c0709; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .wipe-banner { background-color: #1a0c12; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .gh-facts li > b { color: #8a2a4c !important; -webkit-text-fill-color: #8a2a4c; }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib main span[style*='color'] { filter: brightness(.55) saturate(1.4); }
html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .topbar, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib footer, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .wipe-banner, html:not([data-gtheme="normal"]):not([data-gtheme="wiki"]) body.lib .search-overlay { --bg: #0c0709; --bg-2: #140a0f; --surface: #190d14; --raised: #22121b; --line: rgba(255, 255, 255, .08); --line-strong: rgba(255, 255, 255, .16); --text: #f3eaee; --muted: #b39aa6; --faint: #6f5865; --gold: #e8c16d; --gold-2: #f6dc9c; --aqua: #ff7d95; --violet: #c2508f; color: var(--text); }
/* Wiki classique */
html[data-gtheme="wiki"] body.lib { --bg: #f3f1ea; --bg-2: #f8f6ef; --surface: #fffdf8; --raised: #f8f6ef; --line: #c8ccd1; --line-strong: #a2a9b1;
  --text: #202122; --muted: #54595d; --faint: #54595d; --aqua: #3366cc; --violet: #36c; --gold: #a26a00; --gold-2: #36c; }
html[data-gtheme="wiki"] body.lib a:hover { color: var(--text); }
html[data-gtheme="wiki"] body.lib .burger { color: var(--text); }
html[data-gtheme="wiki"] body.lib .tab:hover { color: var(--text); }
html[data-gtheme="wiki"] body.lib .tab[aria-selected="true"] { color: var(--text); }
html[data-gtheme="wiki"] body.lib .spec { background: var(--surface); }
html[data-gtheme="wiki"] body.lib .tile { color: var(--text); }
html[data-gtheme="wiki"] body.lib .tile:hover { color: var(--text); }
html[data-gtheme="wiki"] body.lib .tile p { color: var(--text); }
html[data-gtheme="wiki"] body.lib .tile.plain { background: var(--surface); }
html[data-gtheme="wiki"] body.lib .codex .stats b { color: var(--text); }
html[data-gtheme="wiki"] body.lib .mock-search .bar { color: var(--text); }
html[data-gtheme="wiki"] body.lib .mock-search .row:hover, html[data-gtheme="wiki"] body.lib .mock-search .row.sel { color: var(--text); }
html[data-gtheme="wiki"] body.lib .side li a.on { color: var(--text); }
html[data-gtheme="wiki"] body.lib .note { color: var(--text); }
html[data-gtheme="wiki"] body.lib .toc a:hover { color: var(--text); }
html[data-gtheme="wiki"] body.lib .skill { background: var(--surface); }
html[data-gtheme="wiki"] body.lib .badge.passive { color: var(--text); }
html[data-gtheme="wiki"] body.lib .badge.active { color: var(--text); }
html[data-gtheme="wiki"] body.lib .skill p { color: var(--text); }
html[data-gtheme="wiki"] body.lib .skill .daro-mod, html[data-gtheme="wiki"] body.lib .levels tr.daro-mod td { color: var(--text); }
html[data-gtheme="wiki"] body.lib .callout { color: var(--text); }
html[data-gtheme="wiki"] body.lib .levels td { color: var(--text); }
html[data-gtheme="wiki"] body.lib .levels tr.lv-high td { color: var(--text); }
html[data-gtheme="wiki"] body.lib .kfacts dt { color: var(--text); }
html[data-gtheme="wiki"] body.lib .kfacts dd { color: var(--text); }
html[data-gtheme="wiki"] body.lib .levels caption { color: var(--text); }
html[data-gtheme="wiki"] body.lib .already p { color: var(--text); }
html[data-gtheme="wiki"] body.lib .lore p { color: var(--text); }
html[data-gtheme="wiki"] body.lib .stacking .stack-help { color: var(--text); }
html[data-gtheme="wiki"] body.lib .stack-tag.k-debuff { color: var(--text); }
html[data-gtheme="wiki"] body.lib .stack-members { color: var(--text); }
html[data-gtheme="wiki"] body.lib .lv-buttons button:hover { color: var(--text); }
html[data-gtheme="wiki"] body.lib .skill .tbl-launch .tbl-cap { color: var(--text); }
html[data-gtheme="wiki"] body.lib .tbl-open:hover { color: var(--text); }
html[data-gtheme="wiki"] body.lib .tbl-modal-head .tbl-note { color: var(--text); }
html[data-gtheme="wiki"] body.lib .tbl-close:hover { color: var(--text); }
html[data-gtheme="wiki"] body.lib .tbl-modal-body .levels tr:first-child th { background: var(--surface); }
html[data-gtheme="wiki"] body.lib .tbl-modal-body .levels.wide td:first-child { color: var(--text); }
html[data-gtheme="wiki"] body.lib .family li a:hover { color: var(--text); }
html[data-gtheme="wiki"] body.lib .journey-progress .resume { color: var(--text); }
html[data-gtheme="wiki"] body.lib .constellation li a:hover { color: var(--text); }
html[data-gtheme="wiki"] body.lib .constellation li a.current { color: var(--text); }
html[data-gtheme="wiki"] body.lib .step .goal { color: var(--text); }
html[data-gtheme="wiki"] body.lib .step .how { color: var(--text); }
html[data-gtheme="wiki"] body.lib .step .tip { color: var(--text); }
html[data-gtheme="wiki"] body.lib .job-card:hover { color: var(--text); }
html[data-gtheme="wiki"] body.lib .demo[open] summary { color: var(--text); }
html[data-gtheme="wiki"] body.lib .sub-card:hover { color: var(--text); }
html[data-gtheme="wiki"] body.lib .item-name { color: var(--text); }
html[data-gtheme="wiki"] body.lib .item-facts { color: var(--text); }
html[data-gtheme="wiki"] body.lib .item-desc { color: var(--text); }
html[data-gtheme="wiki"] body.lib .item-filters input, html[data-gtheme="wiki"] body.lib .item-filters select { color: var(--text); }
html[data-gtheme="wiki"] body.lib .mob-stats dd { color: var(--text); }
html[data-gtheme="wiki"] body.lib .mob-cols .elite h4 { color: var(--text); }
html[data-gtheme="wiki"] body.lib .dropped-by a:hover { color: var(--text); }
html[data-gtheme="wiki"] body.lib .quest-body { color: var(--text); }
html[data-gtheme="wiki"] body.lib .start-banner { color: var(--text); }
html[data-gtheme="wiki"] body.lib .guide-card:hover { color: var(--text); }
html[data-gtheme="wiki"] body.lib .guide-toc a:hover, html[data-gtheme="wiki"] body.lib .guide-siblings a:hover, html[data-gtheme="wiki"] body.lib .guide-siblings a.on { color: var(--text); }
html[data-gtheme="wiki"] body.lib .guide-body { color: var(--text); }
html[data-gtheme="wiki"] body.lib .guide-body h2, html[data-gtheme="wiki"] body.lib .guide-body h3, html[data-gtheme="wiki"] body.lib .guide-body h4 { color: var(--text); }
html[data-gtheme="wiki"] body.lib .guide-body a { color: var(--text); }
html[data-gtheme="wiki"] body.lib .guide-body a.ref { color: var(--text); }
html[data-gtheme="wiki"] body.lib .guide-hero .gh-lead { color: var(--text); }
html[data-gtheme="wiki"] body.lib .gh-facts li { color: var(--text); }
html[data-gtheme="wiki"] body.lib .gh-where { color: var(--text); }
html[data-gtheme="wiki"] body.lib .guide-body table.guide-table th { color: var(--text); }
html[data-gtheme="wiki"] body.lib .guide-body .fam { color: var(--text); }
html[data-gtheme="wiki"] body.lib .guide-body table.guide-table th { color: var(--text); }
html[data-gtheme="wiki"] body.lib .review-note { color: var(--text); }
html[data-gtheme="wiki"] body.lib .guide-body pre { color: var(--text); }
html[data-gtheme="wiki"] body.lib .wiki-sec h2 { color: var(--text); }
html[data-gtheme="wiki"] body.lib .wiki-sec h4 { color: var(--text); }
html[data-gtheme="wiki"] body.lib .wiki-sec a { color: var(--text); }
html[data-gtheme="wiki"] body.lib .news-feature { color: var(--text); background: var(--surface); }
html[data-gtheme="wiki"] body.lib .news-feature:hover { color: var(--text); }
html[data-gtheme="wiki"] body.lib .news-feature p { color: var(--text); }
html[data-gtheme="wiki"] body.lib .news-feature .news-when time { color: var(--text); }
html[data-gtheme="wiki"] body.lib .news-row:hover { color: var(--text); }
html[data-gtheme="wiki"] body.lib .testimonial blockquote { color: var(--text); }
html[data-gtheme="wiki"] body.lib .testimonial figcaption { color: var(--text); }
html[data-gtheme="wiki"] body.lib .video-lite span { color: var(--text); }
html[data-gtheme="wiki"] body.lib .team-card b { color: var(--text); }
html[data-gtheme="wiki"] body.lib .guide-result-title { color: var(--text); }
html[data-gtheme="wiki"] body.lib .guide-results mark { color: var(--text); }
html[data-gtheme="wiki"] body.lib .mob-switch button[data-mob-view="elite"].on { color: var(--text); }
html[data-gtheme="wiki"] body.lib .elite-where { color: var(--text); }
html[data-gtheme="wiki"] body.lib .elite-facts { color: var(--text); }
html[data-gtheme="wiki"] body.lib .elite-trait { color: var(--text); }
html[data-gtheme="wiki"] body.lib .elite-class b { color: var(--text); }
html[data-gtheme="wiki"] body.lib .elite-classes h4 { color: var(--text); }
html[data-gtheme="wiki"] body.lib .mob-area { color: var(--text); }
html[data-gtheme="wiki"] body.lib .mob-cols h4.elite-boss-drops { color: var(--text); }
html[data-gtheme="wiki"] body.lib .mob-switch button[data-mob-view="boss"].on { color: var(--text); }
html[data-gtheme="wiki"] body.lib .boss-view .elite-where { color: var(--text); }
html[data-gtheme="wiki"] body.lib .top-specs h3 { color: var(--text); }
html[data-gtheme="wiki"] body.lib .guide-body a.fam, html[data-gtheme="wiki"] body.lib .guide-body a.fam:hover { color: var(--text); }
html[data-gtheme="wiki"] body.lib .stk-card { background: var(--surface); }
html[data-gtheme="wiki"] body.lib .guide-body .rbw-wt.on .rn { color: var(--text); }
html[data-gtheme="wiki"] body.lib .guide-body .ar-start h4.ar-shield::before { color: var(--text); }
html[data-gtheme="wiki"] body.lib .guide-body .en-warnline { color: var(--text); }
html[data-gtheme="wiki"] body.lib .guide-body img.bb-rune { background: var(--surface); }
html[data-gtheme="wiki"] body.lib .guide-body .bb-act > h4::before { background: var(--surface); }
html[data-gtheme="wiki"] body.lib .guide-body b.hz-pct { color: var(--text); }
html[data-gtheme="wiki"] body.lib .guide-body p.hz-teff { color: var(--text); }
html[data-gtheme="wiki"] body.lib .guide-body .ui-menu { background: var(--surface); }
html[data-gtheme="wiki"] body.lib .guide-body .ui-plus { color: var(--text); }
html[data-gtheme="wiki"] body.lib .guide-body .ui-optsec > h4, html[data-gtheme="wiki"] body.lib .guide-body .ui-codexhead, html[data-gtheme="wiki"] body.lib .guide-body .ui-kughead { color: var(--text); }
html[data-gtheme="wiki"] body.lib .guide-body .ui-switch { color: var(--text); }
html[data-gtheme="wiki"] body.lib .guide-body .ui-kughead > span { color: var(--text); }
html[data-gtheme="wiki"] body.lib .guide-body .ui-tab.on { color: var(--text); }
html[data-gtheme="wiki"] body.lib .guide-body ol.sty-hairgrid > li { background: var(--surface); }
html[data-gtheme="wiki"] body.lib .guide-body p.nf-title { color: var(--text); }
html[data-gtheme="wiki"] body.lib .guide-body p.nf-title span { color: var(--text); }
html[data-gtheme="wiki"] body.lib .guide-body span.nf-pill[class*="nf-r"] { color: var(--text); }
html[data-gtheme="wiki"] body.lib .guide-body .nf-swap .nf-act { color: var(--text); }
html[data-gtheme="wiki"] body.lib .guide-body .nf-rank span.nf-rar { color: var(--text); }
html[data-gtheme="wiki"] body.lib .guide-body .sb-act > h4 { color: var(--text); }
html[data-gtheme="wiki"] body.lib .guide-body .sb-board { color: var(--text); }
html[data-gtheme="wiki"] body.lib .guide-body .sb-board a, html[data-gtheme="wiki"] body.lib .guide-body .sb-board a:hover { color: var(--text); }
html[data-gtheme="wiki"] body.lib .guide-body p.sb-boardhead > b { color: var(--text); }
html[data-gtheme="wiki"] body.lib .guide-body p.sb-boardhead .sb-brain { color: var(--text); }
html[data-gtheme="wiki"] body.lib .guide-body p.sb-boardrule { color: var(--text); }
html[data-gtheme="wiki"] body.lib .guide-body p.sb-boardrule b { color: var(--text); }
html[data-gtheme="wiki"] body.lib .guide-body ul.sb-tricks > li { color: var(--text); }
html[data-gtheme="wiki"] body.lib .guide-body ul.sb-tricks p.sb-tn b { color: var(--text); }
html[data-gtheme="wiki"] body.lib .guide-body ul.sb-tricks .sb-g-hp .sb-grp { color: var(--text); }
html[data-gtheme="wiki"] body.lib .guide-body ul.sb-tricks .sb-g-spd .sb-grp { color: var(--text); }
html[data-gtheme="wiki"] body.lib .guide-body ul.sb-tricks .sb-g-trv .sb-grp { color: var(--text); }
html[data-gtheme="wiki"] body.lib .guide-body ul.sb-tricks .sb-g-cft .sb-grp { color: var(--text); }
html[data-gtheme="wiki"] body.lib .guide-body ul.sb-tricks p.sb-fun { color: var(--text); }
html[data-gtheme="wiki"] body.lib .guide-body ul.sb-tricks p.sb-real { color: var(--text); }
html[data-gtheme="wiki"] body.lib .guide-body ul.sb-tricks p.sb-real i { color: var(--text); }
html[data-gtheme="wiki"] body.lib .guide-body figure.gvid video { background: var(--surface); }
html[data-gtheme="wiki"] body.lib .mpl-thumb { background: var(--surface); }
html[data-gtheme="wiki"] body.lib .mp-bar { background: var(--surface); }
html[data-gtheme="wiki"] body.lib .mp-mini-map { background: var(--surface); }
html[data-gtheme="wiki"] body.lib .mp-dot::after { color: var(--text); background: var(--surface); }
html[data-gtheme="wiki"] body.lib .mp-exit-thumb { background: var(--surface); }
html[data-gtheme="wiki"] body.lib main h1, html[data-gtheme="wiki"] body.lib main h2, html[data-gtheme="wiki"] body.lib main h3, html[data-gtheme="wiki"] body.lib main h4, html[data-gtheme="wiki"] body.lib main h5 { color: #000000; }
html[data-gtheme="wiki"] body.lib main a:hover { color: #2a4b8d; }
html[data-gtheme="wiki"] body.lib main b, html[data-gtheme="wiki"] body.lib main strong { color: inherit; }
html[data-gtheme="wiki"] body.lib main input, html[data-gtheme="wiki"] body.lib main select { background: #fffdf8; color: #202122; border-color: #a2a9b1; }
html[data-gtheme="wiki"] body.lib main table th { color: #202122; }
html[data-gtheme="wiki"] body.lib main .badge { background: #f8f6ef; border-color: #c8ccd1; color: #202122; }
html[data-gtheme="wiki"] body.lib main img { filter: none; }
html[data-gtheme="wiki"] body.lib { background: #f3f1ea; background-image: none; color: #202122; }
html[data-gtheme="wiki"] body.lib main.wrap { color: #202122; }
html[data-gtheme="wiki"] body.lib .crumbs, html[data-gtheme="wiki"] body.lib .crumbs a { color: #54595d; }
html[data-gtheme="wiki"] body.lib .page-head h1, html[data-gtheme="wiki"] body.lib .page-head p, html[data-gtheme="wiki"] body.lib .show-head h2, html[data-gtheme="wiki"] body.lib .show-head p { color: #000000; }
html[data-gtheme="wiki"] body.lib .page-head p, html[data-gtheme="wiki"] body.lib .show-head p { color: #54595d; }
html[data-gtheme="wiki"] body.lib .kicker, html[data-gtheme="wiki"] body.lib .kicker::before { color: #a26a00; }
html[data-gtheme="wiki"] body.lib .kicker::before { background: #a26a00; }
html[data-gtheme="wiki"] body.lib .guide-hero { background: #fffdf8; border-color: #c8ccd1; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
html[data-gtheme="wiki"] body.lib .guide-hero h1 { color: #000000; }
html[data-gtheme="wiki"] body.lib .guide-hero .gh-lead, html[data-gtheme="wiki"] body.lib .gh-where { color: #54595d; }
html[data-gtheme="wiki"] body.lib .guide-hero .gh-lead b, html[data-gtheme="wiki"] body.lib .gh-facts b, html[data-gtheme="wiki"] body.lib .gh-facts li > b, html[data-gtheme="wiki"] body.lib .gh-where b { color: #36c; }
html[data-gtheme="wiki"] body.lib .gh-facts li { background: #f8f6ef; border-color: #c8ccd1; color: #202122; }
html[data-gtheme="wiki"] body.lib .gh-where span { color: #a26a00; }
html[data-gtheme="wiki"] body.lib .gh-visual { border-color: #c8ccd1; box-shadow: 0 4px 14px rgba(0,0,0,.15); }
html[data-gtheme="wiki"] body.lib .gh-visual.portrait { background-color: #f8f6ef; }
html[data-gtheme="wiki"] body.lib .gh-mosaic img { background: #f8f6ef; border-color: #c8ccd1; }
html[data-gtheme="wiki"] body.lib .side .panel, html[data-gtheme="wiki"] body.lib .panel, html[data-gtheme="wiki"] body.lib .wiki-side { background: #fffdf8; border-color: #c8ccd1; color: #202122; box-shadow: none; }
html[data-gtheme="wiki"] body.lib .panel h4, html[data-gtheme="wiki"] body.lib .wiki-side h3 { color: #a26a00; border-color: #c8ccd1; }
html[data-gtheme="wiki"] body.lib .guide-toc a, html[data-gtheme="wiki"] body.lib .guide-siblings a, html[data-gtheme="wiki"] body.lib .wiki-side a { color: #3366cc; opacity: 1; }
html[data-gtheme="wiki"] body.lib .guide-toc a:hover, html[data-gtheme="wiki"] body.lib .guide-siblings a:hover, html[data-gtheme="wiki"] body.lib .guide-siblings a.on, html[data-gtheme="wiki"] body.lib .wiki-side a:hover { color: #2a4b8d; }
html[data-gtheme="wiki"] body.lib .guide-side-search input, html[data-gtheme="wiki"] body.lib .guide-search input { background: #fffdf8; border-color: #a2a9b1; color: #202122; }
html[data-gtheme="wiki"] body.lib .guide-body { background: #fffdf8; border: 1px solid #c8ccd1; border-radius: 6px; padding: 26px 34px; color: #202122; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
html[data-gtheme="wiki"] body.lib .guide-body h2, html[data-gtheme="wiki"] body.lib .guide-body h3, html[data-gtheme="wiki"] body.lib .guide-body h4 { color: #000000; }
html[data-gtheme="wiki"] body.lib .guide-body h2 { border-bottom-color: #a2a9b1; }
html[data-gtheme="wiki"] body.lib .guide-body h3 { color: #000000; }
html[data-gtheme="wiki"] body.lib .guide-body h2::before { background: #36c; box-shadow: none; }
html[data-gtheme="wiki"] body.lib .guide-body a { color: #3366cc; }
html[data-gtheme="wiki"] body.lib .guide-body a:hover { color: #2a4b8d; text-decoration: underline; }
html[data-gtheme="wiki"] body.lib .guide-body a.ref { color: #3366cc; border-bottom-color: transparent; }
html[data-gtheme="wiki"] body.lib .guide-body table.guide-table { border-color: #a2a9b1; border-radius: 0; background: #fffdf8; }
html[data-gtheme="wiki"] body.lib .guide-body table.guide-table th, html[data-gtheme="wiki"] body.lib .guide-body table.guide-table td { border-color: #a2a9b1; }
html[data-gtheme="wiki"] body.lib .guide-body table.guide-table th { background: #eaecf0; color: #202122; }
html[data-gtheme="wiki"] body.lib .guide-body table.guide-table tr:nth-child(even) td { background: #f8f6ef; }
html[data-gtheme="wiki"] body.lib .guide-body table.guide-table caption { color: #000000; }
html[data-gtheme="wiki"] body.lib .guide-body pre { background: #fef6e7; border-color: #fc3; color: #202122; }
html[data-gtheme="wiki"] body.lib .guide-body pre::before { background: #36c; color: #fff; }
html[data-gtheme="wiki"] body.lib .guide-body .npc-card { background: #f8f6ef; border-color: #c8ccd1; }
html[data-gtheme="wiki"] body.lib .guide-body .npc-pic { background: radial-gradient(circle at 50% 70%, rgba(0,0,0,.06), transparent 70%); }
html[data-gtheme="wiki"] body.lib .guide-body ul.ref-chips li { background: #eaf3ff; border-color: #c8ccd1; }
html[data-gtheme="wiki"] body.lib .review-note { background: #fef6e7; border-color: #fc3; color: #54595d; }
html[data-gtheme="wiki"] body.lib .guide-body hr { border-top-color: #c8ccd1; }
html[data-gtheme="wiki"] body.lib .start-banner { background: #fffdf8; border-color: #c8ccd1; color: #202122; }
html[data-gtheme="wiki"] body.lib .start-banner b { color: #000000; }
html[data-gtheme="wiki"] body.lib .start-banner span { color: #3366cc; }
html[data-gtheme="wiki"] body.lib .wiki-sec h2 { color: #000000; border-bottom-color: #a2a9b1; }
html[data-gtheme="wiki"] body.lib .wiki-sec h4 { color: #202122; }
html[data-gtheme="wiki"] body.lib .wiki-sec li, html[data-gtheme="wiki"] body.lib .wiki-sec li small { color: #54595d; }
html[data-gtheme="wiki"] body.lib .wiki-sec li::before { color: #36c; }
html[data-gtheme="wiki"] body.lib .wiki-sec a { color: #3366cc; }
html[data-gtheme="wiki"] body.lib .wiki-sec a:hover { color: #2a4b8d; text-decoration: underline; }
html[data-gtheme="wiki"] body.lib .wiki-grid { background: #fffdf8; border: 1px solid #c8ccd1; border-radius: 6px; padding: 26px 30px; }
html[data-gtheme="wiki"] body.lib .show-card { background: #fffdf8; border-color: #c8ccd1; color: #202122; }
html[data-gtheme="wiki"] body.lib .show-card h3 a { color: #000000; }
html[data-gtheme="wiki"] body.lib .show-card .show-hook, html[data-gtheme="wiki"] body.lib .show-card li { color: #54595d; }
html[data-gtheme="wiki"] body.lib .show-card li b { color: #36c; }
html[data-gtheme="wiki"] body.lib .show-card a { color: #3366cc; }
html[data-gtheme="wiki"] body.lib .show-more { color: #3366cc; }
html[data-gtheme="wiki"] body.lib .show-client { background: #fffdf8; border-color: #c8ccd1; color: #202122; }
html[data-gtheme="wiki"] body.lib .show-client h3 { color: #000000; }
html[data-gtheme="wiki"] body.lib .show-client li { color: #54595d; }
html[data-gtheme="wiki"] body.lib .tag-codex { color: #a26a00; border-color: #a26a00; }
html[data-gtheme="wiki"] body.lib .tag-new { color: #14866d; border-color: #14866d; }
html[data-gtheme="wiki"] body.lib footer, html[data-gtheme="wiki"] body.lib .footer { background: #0c0709; }
html[data-gtheme="wiki"] body.lib .topbar { background: #0c0709; }
html[data-gtheme="wiki"] body.lib .wipe-banner { background-color: #1a0c12; }
html[data-gtheme="wiki"] body.lib .gh-facts li > b { color: #36c !important; -webkit-text-fill-color: #36c; }
html[data-gtheme="wiki"] body.lib main span[style*='color'] { filter: brightness(.55) saturate(1.4); }
html[data-gtheme="wiki"] body.lib .topbar, html[data-gtheme="wiki"] body.lib footer, html[data-gtheme="wiki"] body.lib .wipe-banner, html[data-gtheme="wiki"] body.lib .search-overlay { --bg: #0c0709; --bg-2: #140a0f; --surface: #190d14; --raised: #22121b; --line: rgba(255, 255, 255, .08); --line-strong: rgba(255, 255, 255, .16); --text: #f3eaee; --muted: #b39aa6; --faint: #6f5865; --gold: #e8c16d; --gold-2: #f6dc9c; --aqua: #ff7d95; --violet: #c2508f; color: var(--text); }
/* lib-themes:end */

/* Home testimonials: a soft fade between two sets of three (site.js) */
[data-testimonials-home] { transition: opacity .6s ease; }
[data-testimonials-home].t-fade { opacity: 0; }
/* Pages other than Home: their content at 90% (Grenat 2026-11-04: they read better as with the browser at 90%);
   the header and the footer keep their size. Home has no <main>. Not on phones, where the text is already at its minimum. */
@media (min-width: 761px) { main.wrap { zoom: .9; } }