/* =====================================================================
   OLYMPUS — site styles
   Night sky, marble and struck gold. One palette, defined once.
   ===================================================================== */
:root {
  --bg: #05070d;
  --bg-2: #0a0f1f;
  --bg-3: #10162b;
  --panel: rgba(255, 255, 255, 0.035);
  --panel-2: rgba(255, 255, 255, 0.06);
  --line: rgba(232, 194, 106, 0.18);
  --line-strong: rgba(232, 194, 106, 0.45);
  --gold: #e8c26a;
  --gold-2: #f6e3a1;
  --gold-deep: #b8892e;
  --bolt: #8fd8ff;
  --bolt-2: #d8f1ff;
  --text: #ece6d8;
  --text-2: #b9b3a6;
  --muted: #8b90a3;
  --ok: #7fd99a;
  --warn: #f2b955;
  --bad: #f0706a;
  --radius: 14px;
  --font-head: "Cinzel", "Trajan Pro", Georgia, serif;
  --font-deco: "Cinzel Decorative", "Cinzel", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wrap: 1180px;
  --meander: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='20' viewBox='0 0 40 20'><path d='M0 2h38v16h-8V8h-8v10h-8V8H6v10H0' fill='none' stroke='%23e8c26a' stroke-opacity='.55' stroke-width='2'/></svg>");
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: radial-gradient(1200px 600px at 50% -10%, #1a2140 0%, var(--bg-2) 45%, var(--bg) 100%) fixed;
  min-height: 100vh;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-2); }
code, kbd, pre { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }
code { background: rgba(255, 255, 255, 0.07); padding: .1em .4em; border-radius: 6px; font-size: .92em; }
code.cmd { color: var(--bolt-2); background: rgba(143, 216, 255, 0.1); border: 1px solid rgba(143, 216, 255, 0.25); }
kbd { background: var(--bg-3); border: 1px solid var(--line-strong); border-bottom-width: 3px; padding: .05em .45em; border-radius: 6px; font-size: .85em; }
pre { background: #070a14; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; overflow: auto; }
pre code { background: none; padding: 0; }
hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); margin: 36px 0; }
.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
.muted { color: var(--muted); }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.15; letter-spacing: .01em; margin: 0 0 .5em; color: var(--gold-2); }
h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); }
h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }

/* ---------- sky backdrop ---------- */
.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.stars {
  position: absolute; inset: -200px; opacity: .55;
  background-image:
    radial-gradient(1.2px 1.2px at 20% 30%, #fff 60%, transparent 61%),
    radial-gradient(1px 1px at 70% 12%, #fff 60%, transparent 61%),
    radial-gradient(1.6px 1.6px at 40% 70%, #cfe6ff 60%, transparent 61%),
    radial-gradient(1px 1px at 85% 60%, #fff 60%, transparent 61%),
    radial-gradient(1.3px 1.3px at 10% 80%, #fff 60%, transparent 61%),
    radial-gradient(1px 1px at 55% 45%, #ffe9b0 60%, transparent 61%),
    radial-gradient(1px 1px at 90% 90%, #fff 60%, transparent 61%),
    radial-gradient(1.4px 1.4px at 30% 10%, #fff 60%, transparent 61%);
  background-size: 640px 640px;
  animation: drift 160s linear infinite;
}
.stars-2 { background-size: 900px 900px; opacity: .3; animation-duration: 260s; animation-direction: reverse; }
@keyframes drift { to { transform: translate3d(-200px, 120px, 0); } }
.bolt {
  position: absolute; top: -10%; width: 3px; height: 45vh; opacity: 0;
  background: linear-gradient(180deg, transparent, var(--bolt-2) 30%, var(--bolt) 60%, transparent);
  filter: blur(1px) drop-shadow(0 0 14px var(--bolt));
  transform: skewX(-12deg);
  animation: flash 14s ease-in-out infinite;
}
.bolt-a { left: 12%; }
.bolt-b { left: 78%; animation-delay: 7s; height: 30vh; }
@keyframes flash { 0%, 92%, 100% { opacity: 0; } 93% { opacity: .9; } 94% { opacity: .2; } 95.5% { opacity: .7; } 97% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .stars, .bolt { animation: none; } }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px) saturate(140%);
  background: linear-gradient(180deg, rgba(5, 7, 13, .92), rgba(5, 7, 13, .72));
  border-bottom: 1px solid var(--line);
}
.topbar-in { display: flex; align-items: center; gap: 26px; height: 68px; }
.brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-deco); font-weight: 700; font-size: 1.25rem; letter-spacing: .12em; color: var(--gold-2); text-transform: uppercase; }
.brand img { filter: drop-shadow(0 0 10px rgba(143, 216, 255, .35)); }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { padding: 8px 14px; border-radius: 10px; color: var(--text-2); font-weight: 600; font-size: .95rem; letter-spacing: .02em; }
.nav a:hover, .nav a.active { color: var(--gold-2); background: var(--panel-2); }
.topbar-cta { display: flex; gap: 10px; }
.burger { display: none; margin-left: auto; background: none; border: 1px solid var(--line-strong); border-radius: 10px; width: 42px; height: 40px; padding: 8px 9px; cursor: pointer; }
.burger span { display: block; height: 2px; background: var(--gold); margin: 5px 0; transition: .2s; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 12px; font-weight: 700; font-family: var(--font-head); letter-spacing: .06em; text-transform: uppercase; font-size: .9rem; border: 1px solid transparent; transition: transform .15s, box-shadow .2s, background .2s; cursor: pointer; }
.btn:active { transform: translateY(1px); }
.btn-sm { padding: 8px 16px; font-size: .78rem; border-radius: 10px; }
.btn-lg { padding: 16px 30px; font-size: 1rem; }
.btn-gold { color: #1a1204; background: linear-gradient(180deg, var(--gold-2), var(--gold) 55%, var(--gold-deep)); box-shadow: 0 0 0 1px rgba(255, 230, 150, .35) inset, 0 8px 26px rgba(232, 194, 106, .22); }
.btn-gold:hover { color: #1a1204; box-shadow: 0 0 0 1px rgba(255, 230, 150, .5) inset, 0 12px 34px rgba(232, 194, 106, .35); transform: translateY(-1px); }
.btn-ghost { color: var(--gold-2); border-color: var(--line-strong); background: rgba(255, 255, 255, .03); }
.btn-ghost:hover { background: var(--panel-2); color: #fff; }
.btn-bolt { color: #06121c; background: linear-gradient(180deg, var(--bolt-2), var(--bolt)); box-shadow: 0 8px 26px rgba(143, 216, 255, .25); }
.btn-bolt:hover { color: #06121c; transform: translateY(-1px); }

/* ---------- home hero ---------- */
.hero { position: relative; padding: 70px 0 60px; text-align: center; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 360px at 50% 20%, rgba(143, 216, 255, .14), transparent 70%); pointer-events: none; }
.hero-logo { width: clamp(150px, 22vw, 240px); filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .6)) drop-shadow(0 0 30px rgba(143, 216, 255, .35)); animation: float 7s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-10px); } }
.hero h1 { font-family: var(--font-deco); font-size: clamp(2.8rem, 9vw, 6.2rem); letter-spacing: .14em; margin: 12px 0 6px; background: linear-gradient(180deg, #fff6d6 0%, var(--gold-2) 35%, var(--gold) 60%, var(--gold-deep) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 6px 24px rgba(232, 194, 106, .25)); }
.hero .tagline { font-family: var(--font-head); font-size: clamp(1rem, 2.2vw, 1.4rem); letter-spacing: .28em; text-transform: uppercase; color: var(--text-2); margin-bottom: 26px; }
.hero .lead { max-width: 720px; margin: 0 auto 30px; color: var(--text-2); font-size: 1.08rem; }
.hero-cta { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.hero-meta { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; margin-top: 30px; color: var(--muted); font-size: .9rem; }
.hero-meta b { color: var(--gold-2); font-family: var(--font-head); font-size: 1.15rem; display: block; }
.meander { height: 20px; background: var(--meander) repeat-x center; opacity: .8; }
.meander-wide { margin: 10px 0; }

/* ---------- sections ---------- */
.section { padding: 64px 0; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 36px; }
.kicker { font-family: var(--font-head); letter-spacing: .3em; text-transform: uppercase; font-size: .75rem; color: var(--bolt); margin-bottom: 10px; }
.lead { color: var(--text-2); font-size: 1.08rem; }

/* feature cards */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.feature { position: relative; padding: 26px 22px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, var(--panel-2), var(--panel)); transition: transform .2s, border-color .2s, box-shadow .2s; overflow: hidden; }
.feature::after { content: ""; position: absolute; inset: auto -40px -40px auto; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(232, 194, 106, .12), transparent 70%); }
.feature:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.feature-icon { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; background: rgba(232, 194, 106, .1); border: 1px solid var(--line-strong); margin-bottom: 14px; }
.feature-icon img { width: 40px; height: 40px; image-rendering: auto; object-fit: contain; }
.feature h3 { margin-bottom: 6px; }
.feature p { color: var(--text-2); margin: 0; font-size: .95rem; }
.feature a.more { display: inline-block; margin-top: 12px; font-weight: 600; font-size: .9rem; }

/* pantheon strip */
.pantheon { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.god { text-align: center; padding: 18px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.god img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .5)); }
.god b { display: block; font-family: var(--font-head); color: var(--gold-2); margin-top: 8px; font-size: .95rem; }
.god small { color: var(--muted); }

/* item showcase (home) */
.showcase { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
@media (max-width: 900px) { .showcase { grid-template-columns: repeat(3, 1fr); } }
.showcase .item-big { flex-direction: column; text-align: center; padding: 16px 8px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.showcase .item-big img { width: 72px; height: 72px; }
.showcase .item-big { white-space: normal; }
.showcase .item-big > span { font-size: .8rem; line-height: 1.25; }

/* CTA band */
.band { position: relative; margin: 40px 0; padding: 50px 0; border-block: 1px solid var(--line); background: linear-gradient(90deg, rgba(232, 194, 106, .06), rgba(143, 216, 255, .06)); text-align: center; }
.band h2 { margin-bottom: 8px; }
.band p { color: var(--text-2); max-width: 640px; margin: 0 auto 22px; }

/* ranks table */
.ranks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 900px) { .ranks { grid-template-columns: repeat(2, 1fr); } }
.rank { padding: 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); }
.rank b { font-family: var(--font-head); color: var(--gold-2); display: block; }
.rank small { color: var(--muted); }

/* ---------- guide index ---------- */
.page-head { padding: 54px 0 26px; text-align: center; }
.search { max-width: 560px; margin: 22px auto 0; }
.search input { width: 100%; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--line-strong); background: rgba(0, 0, 0, .35); color: var(--text); font: inherit; font-size: 1rem; outline: none; }
.search input:focus { box-shadow: 0 0 0 3px rgba(232, 194, 106, .2); }
.gsection { margin: 26px 0 40px; }
.gsection-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 18px; }
.gsection-head h2 { margin: 0; }
.gsection-head p { margin: 0; color: var(--muted); }
.gcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.gcard { display: grid; grid-template-columns: 58px 1fr auto; gap: 14px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--text); transition: transform .18s, border-color .18s, background .18s; }
.gcard:hover { transform: translateY(-3px); border-color: var(--line-strong); background: var(--panel-2); color: var(--text); }
.gcard-icon { width: 58px; height: 58px; border-radius: 12px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line); display: grid; place-items: center; }
.gcard-icon img { width: 46px; height: 46px; object-fit: contain; }
.gcard-glyph { color: var(--gold); font-size: 1.4rem; }
.gcard-cat { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--bolt); font-family: var(--font-head); }
.gcard h3 { margin: 2px 0 4px; font-size: 1.05rem; }
.gcard p { margin: 0; color: var(--text-2); font-size: .9rem; }
.gcard-arrow { color: var(--gold); font-size: 1.3rem; }
.gcard[hidden] { display: none; }
.no-results { text-align: center; color: var(--muted); padding: 40px; }

/* ---------- guide page ---------- */
.guide-hero { height: 260px; background-size: cover; background-position: center; border-bottom: 1px solid var(--line); mask-image: linear-gradient(180deg, #000 60%, transparent); }
.guide-wrap { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 40px; padding: 36px 0 60px; align-items: start; }
.guide-side { position: sticky; top: 88px; }
.back { display: inline-block; margin-bottom: 18px; font-weight: 600; }
.toc-title { font-family: var(--font-head); font-size: .75rem; letter-spacing: .25em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.toc { display: flex; flex-direction: column; border-left: 1px solid var(--line); }
.toc a { padding: 6px 12px; color: var(--text-2); font-size: .9rem; border-left: 2px solid transparent; margin-left: -1px; }
.toc a.toc-3 { padding-left: 24px; font-size: .84rem; color: var(--muted); }
.toc a:hover, .toc a.current { color: var(--gold-2); border-left-color: var(--gold); }
.guide { min-width: 0; }
.guide-head { border-bottom: 1px solid var(--line); padding-bottom: 20px; margin-bottom: 26px; }
.guide-kicker { font-family: var(--font-head); letter-spacing: .25em; text-transform: uppercase; font-size: .74rem; color: var(--bolt); margin-bottom: 8px; }
.guide-head h1 { display: flex; align-items: center; gap: 14px; }
.guide-icon { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)); }
.guide-summary { font-size: 1.1rem; color: var(--text-2); }
.guide-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tag { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--gold-2); }
.tag-muted { border-color: var(--line); color: var(--muted); }
.guide-body { font-size: 1.02rem; }
.guide-body h2 { margin-top: 2.2em; padding-top: .6em; border-top: 1px solid var(--line); position: relative; }
.guide-body h3 { margin-top: 1.6em; color: var(--gold); }
.guide-body h2 .anchor, .guide-body h3 .anchor { opacity: 0; margin-left: 8px; font-size: .8em; color: var(--muted); }
.guide-body h2:hover .anchor, .guide-body h3:hover .anchor { opacity: 1; }
.guide-body ul, .guide-body ol { padding-left: 1.4em; }
.guide-body li { margin: .3em 0; }
.guide-body li::marker { color: var(--gold); }
.guide-body img:not(.item img) { border-radius: 10px; }
.guide-body blockquote { margin: 1.2em 0; padding: 12px 18px; border-left: 3px solid var(--gold); background: var(--panel); border-radius: 0 10px 10px 0; color: var(--text-2); }
.guide-foot { display: flex; justify-content: space-between; margin-top: 50px; padding-top: 20px; border-top: 1px solid var(--line); }

/* tables */
.table-wrap { overflow-x: auto; margin: 1.2em 0; border: 1px solid var(--line); border-radius: 10px; }
table { border-collapse: collapse; width: 100%; font-size: .94rem; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-family: var(--font-head); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-2); background: rgba(232, 194, 106, .06); }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: rgba(255, 255, 255, .025); }

/* item chips */
.item { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; white-space: nowrap; }
.item img { width: 28px; height: 28px; object-fit: contain; image-rendering: auto; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); }
.item > span { color: var(--gold-2); font-weight: 600; }
.item-missing { color: var(--bad); }
.item-big img { width: 48px; height: 48px; }
td .item img, li .item img { width: 26px; height: 26px; }

/* item card grid */
.igrid { margin: 1.4em 0; }
.igrid-title { font-family: var(--font-head); color: var(--gold-2); margin-bottom: 10px; letter-spacing: .05em; }
.igrid-cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.icard { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); align-items: center; }
.icard-img { width: 76px; height: 76px; border-radius: 10px; background: radial-gradient(circle at 50% 40%, rgba(232, 194, 106, .12), rgba(0, 0, 0, .35) 70%); display: grid; place-items: center; border: 1px solid var(--line); }
.icard-img img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .6)); }
.icard-name { font-family: var(--font-head); color: var(--gold-2); font-size: .98rem; margin-bottom: 3px; }
.icard-text { color: var(--text-2); font-size: .9rem; line-height: 1.45; }

/* callouts */
.callout { display: grid; grid-template-columns: 34px 1fr; gap: 12px; margin: 1.4em 0; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); }
.callout-icon { font-size: 1.3rem; line-height: 1.2; text-align: center; }
.callout-title { font-family: var(--font-head); font-weight: 700; margin-bottom: 4px; }
.callout p:last-child { margin-bottom: 0; }
.callout-tip { border-color: rgba(127, 217, 154, .35); background: rgba(127, 217, 154, .06); }
.callout-tip .callout-icon, .callout-tip .callout-title { color: var(--ok); }
.callout-info { border-color: rgba(143, 216, 255, .35); background: rgba(143, 216, 255, .06); }
.callout-info .callout-icon, .callout-info .callout-title { color: var(--bolt); }
.callout-warning { border-color: rgba(242, 185, 85, .4); background: rgba(242, 185, 85, .07); }
.callout-warning .callout-icon, .callout-warning .callout-title { color: var(--warn); }
.callout-danger { border-color: rgba(240, 112, 106, .4); background: rgba(240, 112, 106, .07); }
.callout-danger .callout-icon, .callout-danger .callout-title { color: var(--bad); }
.callout-note { border-color: var(--line-strong); }
.callout-note .callout-icon, .callout-note .callout-title { color: var(--gold); }

/* steps */
.steps { list-style: none; padding: 0; margin: 1.4em 0; counter-reset: s; }
.steps-title { font-family: var(--font-head); color: var(--gold-2); margin-bottom: 10px; }
.steps li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); margin: 8px 0; }
.step-n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; color: #1a1204; background: linear-gradient(180deg, var(--gold-2), var(--gold-deep)); }

/* stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 1.4em 0; }
.stat { padding: 14px; text-align: center; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.stat-v { font-family: var(--font-head); font-size: 1.4rem; color: var(--gold-2); }
.stat-l { color: var(--muted); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }

/* columns */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.hero-fig { margin: 1.4em 0; }
.hero-fig img { width: 100%; border-radius: 12px; border: 1px solid var(--line); }
.hero-fig figcaption { color: var(--muted); font-size: .88rem; text-align: center; margin-top: 6px; }
/* boss cards + galleries (raid guides) */
.boss-card { display: grid; grid-template-columns: 190px 1fr; gap: 20px; align-items: start; margin: 1.4em 0; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.boss-art img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: #121620; display: block; }
.boss-name { font-family: var(--font-head); font-size: 1.2rem; color: var(--gold-2); letter-spacing: .04em; }
.boss-sub { color: var(--muted); font-size: .85rem; margin: 2px 0 8px; }
.boss-body > :last-child { margin-bottom: 0; }
.boss-body ul { margin: .4em 0; padding-left: 1.2em; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 1.4em 0; }
.gallery-small { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.gallery figure { margin: 0; }
.gallery img { width: 100%; border-radius: 10px; border: 1px solid var(--line); display: block; background: #121620; }
.gallery figcaption { color: var(--muted); font-size: .82rem; text-align: center; margin-top: 5px; }
@media (max-width: 640px) { .boss-card { grid-template-columns: 1fr; } .boss-art img { max-width: 220px; margin: 0 auto; } }
.block { margin: 1.2em 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }

/* ---------- talent tree ---------- */
.ttree { margin: 1.6em 0; padding: 18px; border-radius: 16px; border: 1px solid var(--line-strong); background: radial-gradient(600px 300px at 50% 0%, rgba(143, 216, 255, .08), transparent 70%), linear-gradient(180deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, .15)); }
.ttree-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.ttree-title { font-family: var(--font-head); font-size: 1.3rem; color: var(--gold-2); letter-spacing: .08em; }
.ttree-sub { color: var(--muted); font-size: .85rem; }
.ttier { display: grid; grid-template-columns: 90px 1fr; gap: 12px; align-items: center; padding: 10px 0; position: relative; }
.ttier + .ttier::before { content: ""; position: absolute; left: 90px; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }
.ttier-label { font-family: var(--font-head); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.ttier-nodes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tnode { width: 200px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); text-align: center; transition: border-color .2s, transform .2s; }
.tnode:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.tnode.keystone { border-color: rgba(143, 216, 255, .45); box-shadow: 0 0 24px rgba(143, 216, 255, .12); }
.tnode.capstone { border-color: rgba(232, 194, 106, .6); box-shadow: 0 0 24px rgba(232, 194, 106, .15); }
.tnode-icon { position: relative; width: 60px; height: 60px; margin: 0 auto 8px; border-radius: 12px; border: 2px solid var(--gold-deep); background: #000; display: grid; place-items: center; overflow: visible; }
.tnode.keystone .tnode-icon { border-color: var(--bolt); }
.tnode.capstone .tnode-icon { border-color: var(--gold-2); }
.tnode-icon img { width: 52px; height: 52px; border-radius: 8px; image-rendering: auto; }
.tnode-rank { position: absolute; right: -8px; bottom: -8px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--gold); color: #1a1204; font-size: .72rem; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--bg); }
.tnode-name { font-family: var(--font-head); font-size: .92rem; color: var(--gold-2); }
.tnode-desc { font-size: .8rem; color: var(--text-2); line-height: 1.35; margin: 4px 0; }
.tnode-meta { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

/* ---------- footer ---------- */
.footer { margin-top: 60px; border-top: 1px solid var(--line); background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .4)); }
.footer-in { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; padding: 30px 0 34px; }
.footer-brand { display: flex; align-items: center; gap: 14px; }
.footer-brand strong { font-family: var(--font-deco); letter-spacing: .1em; color: var(--gold-2); }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-links a { color: var(--text-2); font-weight: 600; }
.footer-copy { grid-column: 1 / -1; font-size: .85rem; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .guide-wrap { grid-template-columns: 1fr; gap: 20px; }
  .guide-side { position: static; }
  .toc { flex-direction: row; flex-wrap: wrap; border-left: 0; gap: 4px; }
  .toc a { border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font-size: .8rem; }
  .toc a.toc-3 { display: none; }
  .cols { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .nav, .topbar-cta { display: none; }
  .burger { display: block; }
  .nav.open { display: flex; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; background: rgba(5, 7, 13, .97); border-bottom: 1px solid var(--line); padding: 10px 16px 16px; }
  .topbar-in { gap: 14px; }
  .ttier { grid-template-columns: 1fr; }
  .ttier + .ttier::before { left: 0; }
  .tnode { width: 100%; }
  .gcard { grid-template-columns: 50px 1fr auto; }
  .footer-in { grid-template-columns: 1fr; }
  .hero { padding: 40px 0; }
}

/* ---------- annotated maps ---------- */
.amap { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 1.4em 0; }
.amap-img { position: relative; border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden; background: #0d0f14; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
.amap-img img { display: block; width: 100%; height: auto; border-radius: 0; }
.amap-pin { position: absolute; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff6d6; background: linear-gradient(180deg, var(--gold-2), var(--gold-deep)); color: #1a1204; font: 700 .78rem var(--font-body); cursor: pointer; padding: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, .7), 0 0 0 3px rgba(232, 194, 106, .25); transition: transform .15s, box-shadow .15s; }
.amap-pin::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 2px; height: 8px; background: #fff6d6; transform: translateX(-50%); }
.amap-pin:hover, .amap-pin.hot { transform: translate(-50%, -50%) scale(1.3); box-shadow: 0 2px 8px rgba(0, 0, 0, .7), 0 0 0 6px rgba(143, 216, 255, .45); z-index: 2; }
.amap-legend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 4px 10px; }
.amap-legend li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; padding: 7px 10px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; }
.amap-legend li:hover, .amap-legend li.hot { background: var(--panel-2); border-color: var(--line-strong); }
.amap-legend li b { display: block; font-family: var(--font-head); font-size: .9rem; color: var(--gold-2); }
.amap-legend li > div > span { display: block; color: var(--text-2); font-size: .84rem; line-height: 1.4; }
.amap-legend li .amap-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--gold-2), var(--gold-deep)); color: #1a1204; font-weight: 700; font-size: .72rem; line-height: 1; margin-top: 2px; }
@media (max-width: 760px) { .amap-pin { width: 20px; height: 20px; font-size: .66rem; } }

/* ---- item tooltip (hover a chip; CTRL for the in-game stat panel) */
[data-item] { cursor: help; }
.itip { position: absolute; z-index: 60; max-width: min(92vw, 520px); padding: 10px 12px; border-radius: 10px; pointer-events: none;
  background: linear-gradient(180deg, #141a30, #0b1020); border: 1px solid var(--line-strong); box-shadow: 0 12px 32px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .06);
  font-size: .82rem; line-height: 1.35; color: var(--text); }
.itip[hidden] { display: none; }
.itip-head { display: flex; gap: 10px; align-items: center; }
.itip-head img { width: 40px; height: 40px; object-fit: contain; flex: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); }
.itip-name { font-family: var(--font-head); font-weight: 700; color: var(--gold-2); letter-spacing: .02em; }
.itip-x { color: var(--text-2); font-size: .78rem; }
.itip-hint { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--line); color: var(--muted); font-size: .74rem; }
.itip-hint kbd { color: var(--ok); font-weight: 700; font-family: inherit; }
.itip-stats { display: grid; grid-template-columns: repeat(3, auto); gap: 8px 18px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.itip-col h5 { margin: 0 0 4px; font-family: var(--font-head); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.itip-col div { display: flex; justify-content: space-between; gap: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.itip-col span { color: var(--text-2); }
.itip-pos { color: var(--ok); font-weight: 600; }
.itip-neg { color: var(--bad); font-weight: 600; }
.itip-zero { color: var(--muted); font-weight: 500; }
.itip-foot { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--line); color: var(--text-2); font-size: .76rem; }
.itip-foot b { color: var(--gold-2); font-weight: 600; }
@media (max-width: 560px) { .itip-stats { grid-template-columns: 1fr 1fr; } }

/* ---- home spotlight: the two headline systems */
.spots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
@media (max-width: 760px) { .spots { grid-template-columns: 1fr; } }
.spot { display: flex; flex-direction: column; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; background: linear-gradient(180deg, var(--panel-2), var(--panel)); color: inherit; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.spot:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(0, 0, 0, .5); text-decoration: none; }
.spot-art { height: 220px; background-size: cover; background-position: center; border-bottom: 1px solid var(--line); }
.spot-art-contain { background-size: contain; background-repeat: no-repeat; background-color: #070a14; background-image: radial-gradient(circle at 50% 40%, rgba(232, 194, 106, .12), transparent 60%); }
.spot-body { padding: 22px 24px 26px; }
.spot-tag { font-family: var(--font-head); letter-spacing: .25em; text-transform: uppercase; font-size: .7rem; color: var(--bolt); margin-bottom: 6px; }
.spot h3 { font-size: 1.5rem; margin-bottom: 8px; }
.spot p { color: var(--text-2); margin: 0 0 16px; }


/* ---- updates: timeline index + post pages */
.ufilters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.ufilter { font-family: var(--font-head); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--text-2); cursor: pointer; }
.ufilter:hover { border-color: var(--line-strong); color: var(--gold-2); }
.ufilter.active { background: rgba(232, 194, 106, .14); border-color: var(--line-strong); color: var(--gold-2); }
.updates-list { padding-top: 10px; }
.umonth { position: relative; margin: 10px 0 34px; padding-left: 26px; border-left: 1px solid var(--line); }
.umonth-head { font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bolt); margin: 0 0 14px; }
.umonth-head::before { content: ""; position: absolute; left: -6px; margin-top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px var(--bg); }
.ucard { display: grid; grid-template-columns: 1fr; margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--text); overflow: hidden; transition: transform .18s, border-color .18s, background .18s; }
.ucard.has-cover { grid-template-columns: 220px 1fr; }
.ucard:hover { transform: translateY(-3px); border-color: var(--line-strong); background: var(--panel-2); color: var(--text); text-decoration: none; }
.ucard-cover { background-size: cover; background-position: center; min-height: 140px; }
.ucard-body { padding: 16px 20px; }
.ucard-meta { display: flex; gap: 10px; align-items: center; font-size: .78rem; color: var(--muted); margin-bottom: 6px; }
.ucard h3 { margin: 0 0 6px; font-size: 1.15rem; }
.ucard p { margin: 0; color: var(--text-2); font-size: .93rem; }
.ucard-guides { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ucard-guides span { font-size: .72rem; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.ucat { display: inline-block; font-family: var(--font-head); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--gold-2); background: rgba(232, 194, 106, .1); }
.ucat-raids { color: #f0a6a0; border-color: rgba(240, 112, 106, .5); background: rgba(240, 112, 106, .1); }
.ucat-skilling { color: #b9e9c6; border-color: rgba(127, 217, 154, .5); background: rgba(127, 217, 154, .1); }
.ucat-combat { color: #f6d29a; border-color: rgba(242, 185, 85, .55); background: rgba(242, 185, 85, .1); }
.ucat-economy, .ucat-qol, .ucat-client { color: var(--bolt-2); border-color: rgba(143, 216, 255, .5); background: rgba(143, 216, 255, .08); }
.ucat-fix { color: var(--text-2); border-color: var(--line); background: transparent; }
.update-foot { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; }
.rel-guides a { display: flex; align-items: center; gap: 8px; }
.rel-guides img { width: 20px; height: 20px; object-fit: contain; }
.home-updates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.home-updates .ucard { margin: 0; }
.home-updates .ucard.has-cover { grid-template-columns: 1fr; }
.home-updates .ucard-cover { height: 130px; }
@media (max-width: 900px) { .home-updates { grid-template-columns: 1fr; } .ucard.has-cover { grid-template-columns: 1fr; } .ucard-cover { height: 140px; } }

/* ---- updates: pre-launch / post-launch eras */
.uera { margin: 34px 0 10px; }
.uera-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 14px 18px; margin-bottom: 18px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: linear-gradient(90deg, rgba(232, 194, 106, .12), transparent 70%); }
.uera-head h2 { margin: 0; font-size: 1.35rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-2); }
.uera-head p { margin: 0; flex: 1 1 260px; color: var(--text-2); font-size: .95rem; }
.uera-count { font-family: var(--font-head); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.uera-pre-launch .uera-head { background: linear-gradient(90deg, rgba(143, 216, 255, .1), transparent 70%); border-color: rgba(143, 216, 255, .35); }
.uera-pre-launch .uera-head h2 { color: var(--bolt-2); }
.uera-empty { padding: 18px 22px; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); }
.uera-badge { display: inline-block; font-family: var(--font-head); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; border: 1px solid rgba(143, 216, 255, .4); color: var(--bolt-2); background: rgba(143, 216, 255, .08); }
.uera-badge-post-launch { border-color: rgba(232, 194, 106, .5); color: var(--gold-2); background: rgba(232, 194, 106, .12); }
.uera-jump { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.uera-jump a { font-family: var(--font-head); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-2); }
.uera-jump a:hover { border-color: var(--line-strong); color: var(--gold-2); text-decoration: none; }

/* ---- legal pages (terms / privacy) */
.legal { max-width: 860px; padding-top: 10px; padding-bottom: 60px; }
.legal .guide-body h2 { font-size: 1.25rem; }
.legal table { width: 100%; }
.amap-tall { grid-template-columns: minmax(0, 470px) 1fr; align-items: start; gap: 20px; }
.amap-tall .amap-legend { grid-template-columns: 1fr; }
@media (max-width: 860px) { .amap-tall { grid-template-columns: 1fr; } .amap-tall .amap-img { max-width: 470px; width: 100%; margin: 0 auto; } }