/* Inter (SIL Open Font License), self-hosted: vendor/fonts */
@font-face {
  font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/vendor/fonts/inter-latin-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/vendor/fonts/inter-latin-ext-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Until Inter loads, text uses Arial scaled to Inter's metrics, so the swap doesn't re-wrap lines and shift the page */
@font-face {
  font-family: 'Inter Fallback'; src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Helvetica');
  ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; size-adjust: 107.12%;
}

:root {
  /* midnight blue with Forever's teal and gold: the site sits on painted client art (.backdrop) */
  --bg: #070b16;
  --bg-2: #0e1426;
  --panel: rgba(16, 22, 40, .88);
  --panel-solid: #111831;
  --panel-2: #1a2441;
  --line: #26325a;
  --text: #dbe1ee;
  --muted: #8d99b8;
  --gold: #f0c35a;
  --gold-2: #b98a2c;
  --teal: #3fd0d9;
  --link: #6dcbe3;
  --new: #3ddc84;
  --changed: #ffb347;
  --removed: #ff6b6b;
  --q0: #9d9d9d; --q1: #ffffff; --q2: #1eff00; --q3: #0070dd; --q4: #a335ee; --q5: #ff8000; --q6: #e6cc80;
  --green: #1eff00;
  --radius: 8px;
  --shadow: 0 8px 30px rgba(0, 0, 0, .45);
  font-synthesis: none;
}

* { box-sizing: border-box; }
/* The scrollbar's space is always kept, so centred content doesn't jump sideways when a page grows tall enough to scroll */
html { background: var(--bg); scrollbar-gutter: stable; }
html, body { margin: 0; color: var(--text); }
body { background: transparent; }   /* the painted .backdrop shows through */
body {
  font: 14.5px/1.55 Inter, "Inter Fallback", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  min-height: 100vh; display: flex; flex-direction: column;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: inherit; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
h1 { font-size: 30px; margin: 0 0 6px; color: #fff; letter-spacing: -.025em; }
h2 { font-size: 21px; margin: 32px 0 12px; color: #f4f5f8; }
h3 { font-size: 16px; margin: 18px 0 8px; color: #fff; font-weight: 650; }
h4 { font-size: 14px; margin: 14px 0 6px; color: #fff; font-weight: 650; }
.eyebrow { display: block; color: var(--gold); font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.page-intro { color: var(--muted); max-width: 820px; margin: 0 0 18px; font-size: 15px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 10px; padding: 0; font-size: 13px; color: var(--muted); }
.crumbs li { display: inline-flex; align-items: center; min-width: 0; }
.crumbs li + li::before { content: "\203A"; margin: 0 7px; opacity: .55; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--link); }
.crumbs [aria-current] { color: var(--text); max-width: 42ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button, input, select { font: inherit; color: inherit; }
code { background: var(--panel-2); padding: 1px 5px; border-radius: 4px; font-size: 12.5px; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 1000; display: flex; align-items: center; gap: 18px;
  padding: 10px 20px; background: rgba(13, 15, 20, .92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none !important; }
.nav { display: flex; gap: 2px; align-items: center; }
.nav-top {
  color: #c3c8d4; padding: 7px 12px; border-radius: 6px; font-weight: 550; background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
button.nav-top::after { content: ''; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translate(-2px, -2px); opacity: .6; }
.nav-top:hover, .nav-top.active, .nav-group.open .nav-top { color: #fff; background: var(--panel-2); text-decoration: none; }
.nav-group { position: relative; }
.nav-menu {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 1100; min-width: 320px; padding: 6px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow);
}
.nav-group::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 8px; } /* hover bridge */
.nav-group.open .nav-menu, .nav-group:hover:not(.hold) .nav-menu { display: grid; }
.nav-menu a { display: grid; gap: 1px; padding: 8px 10px; border-radius: 7px; color: var(--text); }
.nav-menu a b { font-weight: 600; color: #fff; }
.nav-menu a span { color: var(--muted); font-size: 12.5px; }
.nav-menu a:hover, .nav-menu a.active { background: var(--panel-2); text-decoration: none; }
/* Menus in columns: a heading per column and one line per page (its description is the link's tooltip) */
.nav-menu.nav-cols { grid-auto-flow: column; grid-auto-columns: minmax(170px, auto); gap: 4px 22px; padding: 14px 16px; min-width: 0; width: max-content;
  max-width: calc(100vw - 32px); }
.nav-col { display: grid; align-content: start; gap: 1px; }
.nav-col h4 { margin: 0 0 6px; padding: 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--gold); }
.nav-menu.nav-cols a { display: flex; align-items: center; gap: 10px; padding: 6px 8px; font-weight: 550; white-space: nowrap; }
.nav-menu.nav-cols a .nav-ic { width: 22px; height: 22px; border-radius: 4px; box-shadow: 0 0 0 1px #000; flex: none; }
/* Classes: each class in its colour, with its guide, PvE, PvP and talents underneath */
.nav-menu.nav-classes { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(150px, auto)); gap: 14px 18px; }
.nav-menu.nav-classes a.nav-cls-head { font-weight: 700; font-size: 15px; padding: 4px 8px 6px; }
.nav-classes .nav-cls-head img { border-radius: 5px; box-shadow: 0 0 0 1px #000; }
.nav-menu.nav-classes .nav-col a:not(.nav-cls-head) { padding: 3px 8px; color: var(--link); font-weight: 450; font-size: 14px; }
.nav-classes a.nav-all { grid-column: 1 / -1; color: var(--link); font-size: 13px; border-top: 1px solid var(--line); border-radius: 0 0 7px 7px; margin-top: 4px; padding-top: 10px; }
.c-warrior { color: #C69B6D !important; } .c-paladin { color: #F48CBA !important; } .c-hunter { color: #AAD372 !important; }
.c-rogue { color: #FFF468 !important; } .c-priest { color: #FFFFFF !important; } .c-shaman { color: #0070DD !important; }
.c-mage { color: #3FC7EB !important; } .c-warlock { color: #8788EE !important; } .c-druid { color: #FF7C0A !important; }
.global-search { margin-left: auto; position: relative; width: min(340px, 40vw); }
.global-search input, .input {
  width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  padding: 7px 10px; outline: none;
}
.global-search input:focus, .input:focus { border-color: var(--gold-2); }
.suggest {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); max-height: 60vh; overflow: auto;
}
.suggest a { display: flex; align-items: center; gap: 8px; padding: 6px 10px; color: var(--text); }
.suggest a:hover, .suggest a.hl { background: var(--panel-2); text-decoration: none; }
.suggest .kind { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.suggest-head { padding: 8px 10px 2px; color: var(--muted); font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.suggest a.suggest-all { color: var(--link); font-size: 13px; border-top: 1px solid var(--line); }
.nav-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; }

/* overflow-x: clip keeps glows and shadows inside the page area: without it Chrome counts their overflow as the whole
   page moving (a large layout shift) when the app replaces the server's version of a page */
.app { flex: 1; width: 100%; max-width: 1280px; margin: 0 auto; padding: 24px 20px 48px; overflow-x: clip; }
.app.wide { max-width: none; padding: 0; }
.footer {
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; padding: 14px 20px;
  border-top: 1px solid var(--line); color: var(--muted); font-size: 12px;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.footer-links a { color: var(--muted); }
.footer-links a:hover { color: var(--link); }
.loading { color: var(--muted); padding: 40px; text-align: center; }
/* About, Privacy, Contact */
.info-page .article-body h2 { margin-top: 26px; }
.contact-form { display: grid; gap: 14px; margin-top: 18px; max-width: 720px; }
.contact-form label { display: grid; gap: 6px; font-weight: 600; font-size: 14px; }
.contact-form label .muted { font-weight: 400; }
.contact-form .input { width: 100%; max-width: none; font-weight: 400; }
.contact-form textarea { resize: vertical; min-height: 140px; font: inherit; line-height: 1.5; }
.contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-send { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.contact-done { margin-top: 18px; max-width: 720px; }
.contact-done h2 { margin-top: 0; }
@media (max-width: 760px) { .contact-row { grid-template-columns: 1fr; } }
/* Admin inbox on the profile page */
.msg { margin-bottom: 10px; background: color-mix(in srgb, var(--teal) 7%, var(--panel)); }
.msg.read { background: var(--panel); opacity: .8; }
.msg .row { justify-content: space-between; }
.msg-body { white-space: pre-wrap; margin: 8px 0; }
.msg-actions { display: flex; gap: 8px; margin-top: 8px; }
/* The server's version of a page (seo.py), shown until the app draws its own */
.ssr { max-width: 980px; min-height: 100vh; }   /* the footer starts below the fold, so the real page doesn't push it down */
.ssr img { display: block; max-width: 100%; height: auto; margin: 10px 0; border-radius: 8px; }
.ssr-list { columns: 3 260px; column-gap: 28px; padding-left: 18px; }
.ssr-list li { break-inside: avoid; margin: 0 0 4px; }

/* ---------- generic ---------- */
.muted { color: var(--muted); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.grid { display: grid; gap: 14px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.badge {
  display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 4px; background: var(--panel-2); color: var(--muted); vertical-align: middle;
}
.badge.new { background: rgba(61, 220, 132, .15); color: var(--new); }
.badge.changed { background: rgba(255, 179, 71, .15); color: var(--changed); }
.badge.era { background: rgba(127, 178, 255, .12); color: var(--link); }
.badge.race { background: rgba(200, 160, 255, .13); color: #c8a0ff; }
.badge.gold { background: rgba(240, 195, 90, .15); color: var(--gold); }
.btn {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 6px 12px; cursor: pointer;
}
.btn:hover { border-color: var(--gold-2); }
.btn.primary { background: linear-gradient(180deg, #d9a93f, #a4761d); color: #1a1205; border: 0; font-weight: 600; }
.btn.small { padding: 3px 8px; font-size: 12px; }
.btn.active { border-color: var(--gold); color: var(--gold); }
select.input { width: auto; padding: 6px 8px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 18px 0; flex-wrap: wrap; }
.tabs a, .tabs button {
  padding: 8px 14px; color: var(--muted); border: 0; background: none; border-bottom: 2px solid transparent; cursor: pointer;
}
.tabs a.active, .tabs button.active { color: #fff; border-bottom-color: var(--gold); text-decoration: none; }
.hero {
  position: relative; overflow: hidden; border-radius: 16px; padding: 56px 40px 40px; margin-bottom: 28px;
  background: #10131b; min-height: 380px; display: flex; flex-direction: column; justify-content: flex-end;
}
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(10, 12, 18, .96) 0%, rgba(10, 12, 18, .92) 46%, rgba(10, 12, 18, .5) 72%, rgba(10, 12, 18, .1) 100%), linear-gradient(0deg, rgba(10, 12, 18, .6), transparent 45%); }
.hero-inner { position: relative; z-index: 2; max-width: 580px; }
.hero h1 { font-size: 40px; line-height: 1.1; }
.hero p { color: #c9ceda; max-width: 600px; margin: 10px 0 0; font-size: 16px; }
.hero-credit { position: absolute; z-index: 2; right: 14px; bottom: 10px; font-size: 11.5px; color: rgba(255, 255, 255, .55); }
.hero-search { position: relative; max-width: 560px; margin-top: 22px; }
.hero-search input {
  width: 100%; padding: 13px 16px 13px 42px; font-size: 16px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(13, 15, 20, .82) no-repeat 14px center / 18px; outline: none; color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b93a7' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
}
.hero-search input:focus { border-color: var(--gold); }
.hero-search .suggest { z-index: 20; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; color: #aab1c0; font-size: 13px; }
.hero-meta b { color: #fff; font-weight: 600; }
.hero-meta a { color: #ffd98a; }
.stat-tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.stat-tile .v { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
.stat-tile .l { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.stat-tile.accent .v { color: var(--new); }
.card-link { display: block; color: var(--text); }
.card-link:hover { text-decoration: none; border-color: var(--gold-2); }

/* ---------- icons & lists ---------- */
.icon {
  display: inline-block; vertical-align: middle;
  width: 36px; height: 36px; border-radius: 6px; border: 1px solid #000; box-shadow: 0 0 0 1px #3a3f4c;
  background: #222 center/cover; flex-shrink: 0;
}
.icon.sm { width: 22px; height: 22px; border-radius: 4px; }
.icon.lg { width: 56px; height: 56px; border-radius: 8px; }
.q0 { color: var(--q0) !important; } .q1 { color: var(--q1) !important; } .q2 { color: var(--q2) !important; }
.q3 { color: var(--q3) !important; } .q4 { color: var(--q4) !important; } .q5 { color: var(--q5) !important; }
.q6 { color: var(--q6) !important; } .q7 { color: var(--q6) !important; }
.icon.b0 { box-shadow: 0 0 0 1px var(--q0); } .icon.b2 { box-shadow: 0 0 0 1px var(--q2); }
.icon.b3 { box-shadow: 0 0 0 1px var(--q3); } .icon.b4 { box-shadow: 0 0 0 1px var(--q4); }
.icon.b5 { box-shadow: 0 0 0 1px var(--q5); }
.ent { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }

table.list { width: 100%; border-collapse: collapse; }
table.list th {
  text-align: left; color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase;
  letter-spacing: .04em; padding: 8px 10px; border-bottom: 1px solid var(--line); cursor: pointer; white-space: nowrap;
  user-select: none;
}
table.list th.sorted { color: var(--gold); }
table.list td { padding: 6px 10px; border-bottom: 1px solid rgba(42, 49, 66, .6); vertical-align: middle; }
table.list tr:hover td { background: rgba(255, 255, 255, .025); }
table.list td.num, table.list th.num { text-align: right; font-variant-numeric: tabular-nums; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0; }
.filters .input { width: auto; min-width: 220px; }
.pager { display: flex; gap: 6px; align-items: center; justify-content: flex-end; margin-top: 12px; }

/* ---------- tooltips ---------- */
.wt {
  background: linear-gradient(180deg, rgba(8, 12, 30, .97), rgba(4, 6, 18, .97)); border: 1px solid #5b6275;
  border-radius: 6px; padding: 9px 11px; color: #fff; font-size: 13px; line-height: 1.45; max-width: 340px;
  box-shadow: var(--shadow);
}
/* the hover tooltip only positions the .wt card it holds, which draws the frame */
.tooltip { position: fixed; z-index: 5000; pointer-events: none; }
.wt .t-name { font-size: 15px; font-weight: 600; }
.wt .t-row { display: flex; justify-content: space-between; gap: 16px; }
.wt .t-green { color: var(--green); }
.wt .t-gold { color: #ffd100; }
.wt .t-muted { color: #9d9d9d; }
.wt .t-desc { color: #ffd100; }
.wt .t-red { color: #ff2020; }
.wt .t-set { color: #ffd100; margin-top: 8px; }
.wt .t-setitem { color: #9d9d9d; padding-left: 8px; }
.wt .t-new { color: var(--new); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; margin-top: 6px; }
.wt p { margin: 4px 0 0; }
.money { font-variant-numeric: tabular-nums; }
.money .g { color: #ffd700; } .money .s { color: #c7c7cf; } .money .c { color: #c7793b; }

/* ---------- detail pages ---------- */
.detail { display: grid; grid-template-columns: 360px 1fr; gap: 24px; align-items: start; }
.detail .wt { max-width: none; }
.kv { display: grid; grid-template-columns: 160px 1fr; gap: 6px 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.diff { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.diff .old { background: rgba(255, 107, 107, .06); border-radius: 8px; padding: 10px 12px; color: #c9b8b8; }
.diff .newv { background: rgba(61, 220, 132, .06); border-radius: 8px; padding: 10px 12px; }

/* ---------- classes ---------- */
.class-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.class-card { padding: 16px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); color: var(--text); }
.class-card:hover { text-decoration: none; border-color: #3a4358; background: #1b2130; }
.class-card h3 { color: var(--cc); margin: 0; font-size: 17px; }
.class-head { display: flex; gap: 12px; align-items: center; }
.class-head img { width: 40px; height: 40px; border-radius: 8px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #2e3546; }
.class-card .specs { color: var(--muted); font-size: 13px; }
.class-card .overview { margin: 10px 0 0; font-size: 13.5px; color: #b9bfcc; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.class-card .more { display: inline-block; margin-top: 10px; color: var(--link); font-size: 13px; }
.class-title { display: flex; gap: 14px; align-items: center; }
.class-title img { width: 48px; height: 48px; border-radius: 10px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #2e3546; }
.rotation { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.rotation li {
  counter-increment: step; display: flex; gap: 10px; align-items: flex-start; padding: 8px 0;
  border-bottom: 1px dashed rgba(42, 49, 66, .8);
}
.rotation li::before {
  content: counter(step); flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--panel-2);
  color: var(--gold); font-weight: 700; font-size: 12px; display: grid; place-items: center; margin-top: 7px;
}
.rotation .note { color: var(--muted); font-size: 13px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; font-size: 12.5px; }
.chip b { color: var(--gold); margin-right: 4px; }
.forever-note { background: rgba(61, 220, 132, .07); border-radius: 8px; padding: 10px 12px; }

/* talent calculator */
.talent-trees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tree { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.tree-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.tree-head h3 { margin: 0; }
.tree-grid { display: grid; grid-template-columns: repeat(4, 52px); gap: 12px 16px; justify-content: center; }
.talent { position: relative; width: 44px; height: 44px; cursor: pointer; border-radius: 7px; }
.talent .icon { width: 44px; height: 44px; filter: grayscale(1) brightness(.55); }
.talent.avail .icon { filter: none; box-shadow: 0 0 0 2px #1eff00; }
.talent.some .icon { filter: none; box-shadow: 0 0 0 2px #1eff00; }
.talent.max .icon { filter: none; box-shadow: 0 0 0 2px #ffd100; }
.talent .pts {
  position: absolute; right: -8px; bottom: -6px; background: #000; border: 1px solid #555; border-radius: 4px;
  font-size: 11px; padding: 0 4px; color: #1eff00;
}
.talent.max .pts { color: #ffd100; }
.talent .newdot { position: absolute; top: -4px; left: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--new); }

/* ---------- maps ---------- */
.map-layout { display: grid; grid-template-columns: 280px 1fr 300px; height: calc(100vh - 57px - 47px); }
.map-side { border-right: 1px solid var(--line); overflow: auto; padding: 12px; background: var(--bg-2); }
.map-side.right { border-right: 0; border-left: 1px solid var(--line); }
.map-side h3 { margin-top: 6px; }
.map-side .map-title { font-size: 20px; margin: 4px 0 2px; }
.map-canvas { position: relative; background: #07080b; }
#map { position: absolute; inset: 0; background: #07080b; }
.zone-list a { display: flex; justify-content: space-between; padding: 4px 8px; border-radius: 5px; color: var(--text); }
.zone-list a:hover { background: var(--panel-2); text-decoration: none; }
.zone-list a.active { background: var(--panel-2); color: var(--gold); }
.zone-list .lv { color: var(--muted); font-size: 12px; }
.zone-list .group { color: var(--gold); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; margin: 12px 0 4px; }
.layer-toggle { display: flex; align-items: center; gap: 8px; padding: 3px 0; cursor: pointer; }
.pin-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #000; display: inline-block; }
.leaflet-container { font: inherit; background: #07080b; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: #0b1020; color: #fff; border: 1px solid #5b6275; }
.leaflet-popup-content { margin: 10px 12px; }
.map-pin {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, .85);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 2px 6px rgba(0, 0, 0, .6);
}
.map-pin.user { border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.map-label {
  background: rgba(0, 0, 0, .7); border: 0; color: #fff; box-shadow: none; font-size: 11px; padding: 1px 5px;
}
.map-label::before { display: none; }
.coords { position: absolute; z-index: 800; left: 10px; bottom: 10px; background: rgba(0, 0, 0, .75); padding: 3px 8px; border-radius: 5px; font-variant-numeric: tabular-nums; }
.map-toolbar { position: absolute; z-index: 800; top: 10px; right: 10px; display: flex; gap: 6px; }
.adding .leaflet-container { cursor: crosshair; }
.pin-item { display: flex; gap: 8px; align-items: center; padding: 6px; border-radius: 6px; }
.pin-item:hover { background: var(--panel-2); }
.pin-item .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- gear planner ---------- */
.gear-layout { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; }
.slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.slot {
  display: flex; gap: 10px; align-items: center; padding: 8px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; min-height: 58px; cursor: pointer;
}
.slot:hover { border-color: var(--gold-2); }
.slot .slot-name { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.slot .empty { width: 36px; height: 36px; border-radius: 6px; border: 1px dashed var(--line); }
.stat-sum div { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px dashed rgba(42, 49, 66, .7); }
.modal-back { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); z-index: 3000; display: grid; place-items: center; padding: 20px; }
.modal { width: min(820px, 100%); max-height: 86vh; overflow: auto; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 18px; box-shadow: var(--shadow); }

@media (max-width: 1000px) {
  .detail, .gear-layout { grid-template-columns: 1fr; }
  .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .talent-trees { grid-template-columns: 1fr; }
  .map-layout { grid-template-columns: 1fr; grid-template-rows: auto 60vh auto; height: auto; }
  .map-side { max-height: 260px; border-right: 0; }
}
/* The menu bar needs about 1100px; below that it opens from the ☰ button */
@media (max-width: 1100px) {
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-2); padding: 8px 12px 14px; border-bottom: 1px solid var(--line); max-height: calc(100vh - 56px); overflow-y: auto; }
  .nav.open { display: flex; }
  .nav-group::after { display: none; }
  .nav .nav-top { width: 100%; justify-content: flex-start; padding: 10px 8px; }
  .nav button.nav-top { pointer-events: none; color: var(--gold); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; background: none; padding: 12px 8px 4px; }
  .nav button.nav-top::after { display: none; }
  .nav-menu, .nav-group:hover:not(.hold) .nav-menu { display: grid; position: static; box-shadow: none; border: 0; background: none; padding: 0; min-width: 0; }
  .nav-menu a span { display: none; }
  .nav-menu.nav-cols { grid-auto-flow: row; grid-template-columns: 1fr 1fr; width: auto; max-width: none; padding: 0; gap: 4px 12px; }
  .nav-menu.nav-cols a { white-space: normal; }
  .nav-col h4 { margin: 6px 0 2px; color: var(--muted); }
  .nav-menu.nav-classes { grid-template-columns: 1fr 1fr 1fr; gap: 2px 8px; }
  .nav-menu.nav-classes .nav-col a:not(.nav-cls-head) { display: none; }   /* on a phone: just the classes */
  .nav-toggle { display: block; }
  .global-search { width: auto; flex: 1; }
  .nav-menu.nav-cols { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .nav-top-ic { display: inline-block; }
}
@media (max-width: 760px) {
  .nav-menu.nav-cols { grid-template-columns: 1fr 1fr; }
  .app { padding: 16px; }
  .grid.cols-2, .grid.cols-3, .grid.cols-4, .slots, .diff { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr; }
  table.list .hide-sm { display: none; }
}

/* ---------- speculation / level cap ---------- */
.badge.spec { background: rgba(255, 179, 71, .14); color: #ffb347; border: 1px dashed rgba(255, 179, 71, .5); }
.wt .t-spec { margin-top: 6px; padding-top: 6px; border-top: 1px dashed rgba(255, 179, 71, .4); color: #ffb347; font-size: 11.5px; }
.cap-banner {
  display: flex; gap: 6px 10px; align-items: center; flex-wrap: wrap; padding: 9px 14px; margin-bottom: 16px; border-radius: 8px;
  background: rgba(255, 179, 71, .07); color: #e9d3ae; font-size: 13.5px;
}
.cap-banner b { color: #ffb347; }
.dim { opacity: .45; }
tr.dim td { opacity: .5; }
.lv-tag { font-size: 11px; color: #ffb347; margin-left: 6px; white-space: nowrap; }
.talent .eradot {
  position: absolute; top: -6px; right: -6px; width: 15px; height: 15px; border-radius: 50%; background: #ffb347; color: #1a1205;
  font: 700 10px/15px system-ui, sans-serif; text-align: center; box-shadow: 0 0 0 1px #000;
}

/* ---------- news & articles ---------- */
.badge.blue { background: rgba(0, 174, 255, .14); color: #52c7ff; }
.news-list { display: grid; gap: 8px; }
.news-row { display: block; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); }
.news-row:hover { text-decoration: none; border-color: var(--gold-2); }
.news-row .excerpt { color: var(--muted); font-size: 13px; margin-top: 4px; }
.article { max-width: 820px; }
.article .lead { font-size: 17px; color: #c9ccd6; }
.article-body p, .article-body li { font-size: 15px; line-height: 1.65; }
.article-body h2 { font-size: 19px; }
/* Article pictures: a header image, single figures and galleries of renders */
.article-hero { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 616; object-fit: cover; border-radius: 14px; border: 1px solid var(--line); margin: 6px 0 14px; }
.article-figure { margin: 16px 0; }
.article-figure img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); }
.article-figure.narrow img { max-width: 320px; margin: 0 auto; background: radial-gradient(circle at 50% 40%, rgba(63, 208, 217, .12), rgba(9, 13, 27, .9) 72%); }
.article-body figcaption, .article-gallery figcaption { color: var(--muted); font-size: 12.5px; line-height: 1.45; margin-top: 6px; text-align: center; }
.article-gallery { display: grid; gap: 10px; margin: 16px 0; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.article-gallery.portrait { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.article-gallery figure { margin: 0; padding: 8px; border-radius: 12px; border: 1px solid var(--line);
  background: radial-gradient(circle at 50% 40%, rgba(63, 208, 217, .12), rgba(9, 13, 27, .9) 72%); }
.article-gallery img { display: block; width: 100%; height: auto; }
/* An article with a picture leads the list: the full row, picture beside the text */
.article-card.has-image { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px;
  align-content: center; padding: 0 18px 0 0; overflow: hidden; }
.article-card.has-image > :not(.article-card-image) { grid-column: 2; }
.article-card-image { grid-column: 1; grid-row: 1 / span 4; display: block; width: 100%; height: 100%; min-height: 240px; object-fit: cover; }
@media (max-width: 760px) {
  .article-gallery, .article-gallery.portrait { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-card.has-image { grid-template-columns: 1fr; padding: 0 16px 16px; }
  .article-card.has-image > :not(.article-card-image) { grid-column: 1; }
  .article-card-image { grid-row: auto; width: calc(100% + 32px); margin: 0 -16px 12px; min-height: 0; aspect-ratio: 1600 / 616; }
}
.article-quote { margin: 14px 0; padding: 12px 16px; background: rgba(0, 174, 255, .07); border-radius: 10px; }
.article-quote footer { margin-top: 6px; color: var(--muted); font-size: 12.5px; }
.blue-post { background: rgba(0, 174, 255, .05); border-radius: 10px; padding: 12px 16px; }
.article-card h3 { color: #fff; }

/* ---------- spells: ranks bundled per ability / talent ---------- */
p.small { font-size: 12.5px; }
table.spell-list tr.bundle { cursor: pointer; }
table.spell-list tr.bundle.open td { background: rgba(240, 195, 90, .05); border-bottom-color: transparent; }
table.spell-list .rk { min-width: 76px; text-align: left; white-space: nowrap; }
table.spell-list tr.ranks-row > td { padding: 0 10px 12px 44px; background: rgba(240, 195, 90, .05); }
.ranks-panel { padding: 2px 0 2px 4px; }
.ranks-panel p { margin: 6px 0; }
table.rank-list { width: auto; min-width: min(560px, 100%); }
table.rank-list td, table.rank-list th { padding: 4px 12px; }
@media (max-width: 700px) { table.spell-list tr.ranks-row > td { padding-left: 10px; } }
table.spell-list tr.dim, table.rank-list tr.dim { opacity: 1; }
table.spell-list tr.dim td, table.rank-list tr.dim td { opacity: .6; }

/* ---------- ability / talent write-ups ---------- */
.writeup { margin-top: 24px; max-width: 920px; }
.writeup h2 { margin-top: 0; }
.writeup .lead { font-size: 16.5px; color: #fff; }
.writeup p { line-height: 1.65; }
.writeup h3 { font-size: 14px; margin: 14px 0 6px; color: var(--gold); }
.writeup ul { margin: 0; padding-left: 20px; }
.writeup li { margin: 4px 0; line-height: 1.5; }
.wu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 24px; }
.wu-row { margin-top: 4px; }
.wu-forever { margin: 14px 0; padding: 12px 16px; background: rgba(61, 220, 132, .07); border-radius: 10px; }
.wu-forever b { color: var(--new); }
.wu-forever p { margin: 4px 0 0; }
.ranks-panel .wu-summary { margin: 6px 0 8px; max-width: 760px; color: var(--text); }
.ab-summary { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; max-width: 620px; line-height: 1.4; }

/* ---------- class changes vs Classic Era ---------- */
.ch-summary { margin: 4px 0 18px; }
.ch-summary .chip { cursor: pointer; color: var(--text); }
.ch-sec { margin-bottom: 22px; }
.ch-sec h3 { margin-bottom: 4px; }
.ch-table td { vertical-align: top; }
.ch-table .small { font-size: 12.5px; }
.pos { color: var(--new); }
.neg { color: var(--removed); }
.ch-tip { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin-bottom: 6px; background: var(--panel); }
.ch-tip summary { cursor: pointer; }
.ch-tip .diff { margin-top: 8px; }
.ch-tip .diff p { margin: 4px 0 0; font-size: 13.5px; }

/* ---------- raid & dungeon planner ---------- */
.input.small { padding: 4px 6px; font-size: 12.5px; height: auto; }
.pl-intro { max-width: 1000px; }
.pl-grid { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 16px; align-items: start; }
.pl-setup { display: grid; gap: 12px; }
.pl-setup .panel h3 { margin: 0 0 10px; }
.pl-field { display: grid; gap: 3px; margin-bottom: 8px; font-size: 13px; }
.pl-hints { margin: 6px 0; }
.pl-hints .chips { margin-top: 4px; }
.pl-comp-actions { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.pl-slots { display: grid; gap: 4px; max-height: 420px; overflow-y: auto; padding-right: 4px; }
.pl-slot { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; align-items: center; padding-left: 16px; }
.pl-slot::before { content: ''; position: absolute; left: 2px; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.pl-slot-name { grid-column: 1 / -1; margin-top: -2px; }
.pl-mechs { display: grid; gap: 8px; }
.pl-mc { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--panel-2); }
.pl-mc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.pl-mc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.pl-mc-fields label { display: grid; gap: 2px; font-size: 12px; color: var(--muted); }
.pl-phase { display: flex; gap: 4px; align-items: center; }
.pl-phase input { width: 60px; }
.pl-say { margin: 6px 0 0; }
.pl-model summary { cursor: pointer; }
.pl-model[open] summary { margin-bottom: 10px; }
.pl-arena { position: relative; }
.pl-arena-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.pl-mode { display: flex; gap: 4px; }
.arena-box { position: relative; display: flex; justify-content: center; }
.arena-box canvas { display: block; max-width: 100%; cursor: crosshair; }
.arena-tip { position: absolute; display: none; pointer-events: none; background: #0b0d12; border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; font-size: 12px; white-space: nowrap; z-index: 5; }
.pl-playback { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.pl-playback input[type=range] { flex: 1; }
.pl-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; }
.pl-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 3px 0 6px; }
.pl-tabs { margin-top: 14px; }
.pl-warn { padding: 8px 12px; border-radius: 8px; margin-bottom: 6px; font-size: 13.5px; }
.pl-warn.error { background: rgba(255, 107, 107, .1); }
.pl-warn.warn { background: rgba(255, 179, 71, .09); }
.pl-warn.info { background: rgba(127, 178, 255, .08); }
.pl-list { padding-left: 18px; margin: 0 0 8px; }
.pl-list li { margin: 3px 0; }
.pl-calls, .pl-feed { list-style: none; padding: 0; margin: 0; max-height: 440px; overflow-y: auto; font-size: 13px; }
.pl-calls li, .pl-feed li { padding: 3px 6px; border-bottom: 1px solid rgba(42, 49, 66, .6); display: flex; gap: 10px; }
.pl-calls .t, .pl-feed .t { color: var(--gold); font-variant-numeric: tabular-nums; min-width: 38px; }
.pl-feed li { opacity: .45; }
.pl-feed li.past { opacity: 1; }
.pl-feed li.good .t { color: var(--new); }
.pl-feed li.bad { color: #ff9b9b; }
.pl-feed li.call { color: #ffd580; }
.pl-bar { display: grid; grid-template-columns: 170px 1fr 40px; gap: 8px; align-items: center; font-size: 13px; margin: 4px 0; }
.pl-bar i { display: block; height: 10px; border-radius: 5px; background: linear-gradient(90deg, #ff6b6b, #ffb347); }
.pl-bar b { text-align: right; font-variant-numeric: tabular-nums; }
.pl-stats { margin-bottom: 12px; }
.pl-util th { text-align: left; width: 150px; vertical-align: top; color: var(--muted); font-weight: 600; }
.pl-util td { line-height: 1.9; }
.pl-later { line-height: 1.5; margin-top: 2px; }
/* the arena with the raid leader's calls beside it */
.pl-stage { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 12px; align-items: start; }
.pl-lead { border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; max-height: 720px; min-height: 320px; }
.pl-lead h4 { margin: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.pl-lead-now { background: rgba(240, 195, 90, .07); border-radius: 8px; padding: 6px 10px; }
.pl-lead-now p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.45; font-weight: 600; }
.pl-lead-now p.fresh { color: #ffe39a; }
.pl-lead-next { min-height: 1.2em; }
.pl-lead-list { list-style: none; padding: 0; margin: 0; overflow-y: auto; font-size: 12.5px; flex: 1; min-height: 0; }
.pl-lead-list li { padding: 4px 4px; border-bottom: 1px solid rgba(42, 49, 66, .6); display: flex; gap: 8px; opacity: .5; }
.pl-lead-list li.past { opacity: .85; }
.pl-lead-list li.cur { opacity: 1; background: rgba(240, 195, 90, .08); }
.pl-lead-list li.bad { color: #ff9b9b; }
.pl-lead-list li.call { color: var(--muted); }
.pl-lead-list .t { color: var(--gold); font-variant-numeric: tabular-nums; min-width: 34px; }
.pl-known { font-size: 12.5px; line-height: 1.5; padding: 8px 10px; background: rgba(240, 195, 90, .06); border-radius: 8px; margin-bottom: 8px; }
.pl-known .btn { margin-top: 6px; }
.pl-when { margin: -2px 0 6px; }
.pl-mc-head .src-classic { margin-left: auto; margin-right: 6px; }
/* the raid leader guide */
.pl-guide section { margin-bottom: 18px; }
.pl-guide h3 { margin: 0 0 8px; }
.pl-guide h4 { margin: 12px 0 6px; font-size: 14px; }
.pl-phases { padding-left: 20px; margin: 0 0 8px; }
.pl-phases li { margin: 4px 0; }
.pl-gcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.pl-gcard { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--panel-2); }
.pl-gcard-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pl-gicon { font-size: 16px; width: 20px; text-align: center; }
.pl-gcard dl { display: grid; grid-template-columns: 92px 1fr; gap: 4px 10px; margin: 0; font-size: 13px; }
.pl-gcard dt { color: var(--muted); }
.pl-gcard dd { margin: 0; }
@media (max-width: 1250px) {
  .pl-stage { grid-template-columns: 1fr; }
  .pl-lead { max-height: 360px; min-height: 0; }
}
@media (max-width: 1000px) {
  .pl-grid { grid-template-columns: 1fr; }
  .pl-bar { grid-template-columns: 120px 1fr 36px; }
}

.pl-playback[hidden] { display: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* planner replay: raid frames and meters */
.pl-frames { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 3px; margin-top: 10px; }
.pl-frames[hidden] { display: none; }
.rf { position: relative; height: 26px; border-radius: 4px; background: #1a1d25; border: 1px solid #000; overflow: hidden; font-size: 11px; }
.rf-hp { position: absolute; inset: 0 auto 0 0; background: var(--c); opacity: .75; transition: width .25s linear; }
.rf.low .rf-hp { background: #d9534f; opacity: .9; }
.rf.dead { background: #111; }
.rf.dead .rf-name { color: #777; text-decoration: line-through; }
.rf-name { position: absolute; left: 5px; top: 1px; color: #fff; text-shadow: 0 1px 2px #000; white-space: nowrap; overflow: hidden; max-width: 78%; font-weight: 600; }
.rf-val { position: absolute; right: 5px; bottom: 1px; color: #eee; text-shadow: 0 1px 2px #000; font-size: 10px; }
.rf-db { position: absolute; right: 4px; top: 4px; width: 7px; height: 7px; border-radius: 50%; }
.rf-db.magic { background: #4aa3ff; } .rf-db.curse { background: #b36bff; } .rf-db.poison { background: #3ddc84; } .rf-db.disease { background: #c9a26b; }
.pl-meters { margin-top: 10px; }
.pl-meter { position: relative; height: 22px; margin: 3px 0; border-radius: 3px; background: #1a1d25; overflow: hidden; font-size: 12px; }
.pl-meter i { position: absolute; inset: 0 auto 0 0; background: var(--c); opacity: .55; }
.pl-meter span { position: absolute; left: 6px; top: 3px; color: #fff; text-shadow: 0 1px 2px #000; }
.pl-meter b { position: absolute; right: 6px; top: 3px; color: #fff; text-shadow: 0 1px 2px #000; }

/* ---------- How we verify ---------- */
.prose { max-width: 860px; }
.prose .lead { font-size: 16.5px; }
.prose li { margin: 6px 0; line-height: 1.55; }
.verify-stats { margin: 16px 0 6px; }
.verify-stats .v { font-size: 18px; }
.verify-labels { display: grid; grid-template-columns: 170px 1fr; gap: 10px 16px; }
.verify-labels dd { margin: 0; line-height: 1.5; }
.footer a { color: var(--link); }
@media (max-width: 640px) { .verify-labels { grid-template-columns: 1fr; } }

/* ---------- combat log replay ---------- */
.rp-drop { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 26px; border: 2px dashed var(--line); cursor: pointer; position: relative; overflow: hidden; margin-bottom: 16px; }
.rp-drop.over, .rp-drop:hover { border-color: var(--gold-2); }
.rp-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--gold); transition: width .2s; }
.rp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 14px; align-items: start; margin-top: 14px; }
.rp-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.rp-head h2 { margin: 0; }
.rp-side { position: sticky; top: 70px; max-height: calc(100vh - 90px); overflow: auto; }
.rp-feed { max-height: none; }
.rp-feed li { cursor: pointer; }
#rp-tab table.list td { padding: 4px 6px; font-size: 12.5px; }
.pl-note { margin: 4px 0 0; color: #ffd580; }
@media (max-width: 1100px) { .rp-grid { grid-template-columns: 1fr; } .rp-side { position: static; max-height: none; } }

/* ---------- class builds ---------- */
.bd-jump { margin: 8px 0 18px; }
.bd-spec { margin-bottom: 30px; scroll-margin-top: 70px; }
.bd-builds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .bd-builds { grid-template-columns: 1fr; } }
.bd-card h3 { margin: 8px 0 6px; }
.bd-top { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.bd-talents { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 8px; }
.bd-talents li { background: rgba(255, 255, 255, .025); border-radius: 8px; padding: 7px 10px; }
.bd-pts { color: var(--gold); margin-left: 4px; }
.bd-rots { margin-top: 12px; }
.bd-rot { padding-left: 20px; margin: 6px 0 10px; }
.bd-rot li { margin: 5px 0; }

/* Addon page */
.addon-dl { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 16px 0 8px; }
.addon-hash { font-size: 11px; word-break: break-all; }
.hl-code { font: 600 28px/1.2 ui-monospace, Consolas, monospace; letter-spacing: 4px; width: 12ch; text-align: center; padding: 10px; }


/* ---------- home ---------- */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 36px 0 14px; }
.section-head h2 { margin: 0; }
.section-head p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.section-head .more { white-space: nowrap; font-size: 14px; }
.tasks { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.task { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); color: var(--text); }
.task:hover { text-decoration: none; background: #1d2331; border-color: #3a4358; }
.task img { width: 36px; height: 36px; border-radius: 7px; box-shadow: 0 0 0 1px #000; flex-shrink: 0; }
.task b { display: block; color: #fff; font-weight: 650; margin-bottom: 2px; }
.task span { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.news-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.news-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.news-card { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); color: var(--text); }
.news-card:hover { text-decoration: none; border-color: #3a4358; }
.news-card img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; display: block; }
.news-card .body { padding: 12px 14px 14px; }
.news-card .date { color: var(--muted); font-size: 12.5px; }
.news-card h3 { margin: 4px 0 6px; font-size: 16px; line-height: 1.3; }
.news-card p { margin: 0; color: #aab1c0; font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-card.lead { grid-column: 1 / -1; }
.news-card.lead img { aspect-ratio: 16 / 5; }
.news-card.lead h3 { font-size: 20px; }
.blue-list { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 6px; }
.blue-list h3 { margin: 8px 10px 6px; font-size: 14px; }
.blue-list a { display: block; padding: 9px 10px; border-radius: 8px; color: var(--text); }
.blue-list a:hover { background: var(--panel-2); text-decoration: none; }
.blue-list .who { color: #52c7ff; font-size: 12px; font-weight: 600; }
.blue-list .t { display: block; color: #fff; font-size: 13.5px; line-height: 1.35; margin: 2px 0; }
.blue-list .when { color: var(--muted); font-size: 12px; }
.blue-list .all { color: var(--link); font-size: 13px; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; }
.class-tiles { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px; }
.class-tile { display: grid; justify-items: center; gap: 6px; padding: 14px 6px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); text-align: center; }
.class-tile:hover { text-decoration: none; border-color: #3a4358; background: #1d2331; }
.class-tile img { width: 44px; height: 44px; border-radius: 9px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #2e3546; }
.class-tile b { font-weight: 650; font-size: 14px; }
.class-tile span { color: var(--muted); font-size: 11.5px; line-height: 1.3; }
.art-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.art-card { position: relative; display: block; border-radius: 12px; overflow: hidden; background: #10131b; color: #fff; aspect-ratio: 16 / 9; }
.art-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.art-card:hover img { transform: scale(1.03); }
.art-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8, 10, 15, .9), rgba(8, 10, 15, 0) 60%); }
.art-card .cap { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; }
.art-card .cap b { display: block; font-size: 16px; }
.art-card .cap span { color: #c9ceda; font-size: 12.5px; }
.art-card:hover { text-decoration: none; }
.num-strip { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 14px 18px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.num-strip div { color: var(--muted); font-size: 13px; }
.num-strip b { display: block; color: #fff; font-size: 20px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.num-strip .pos b { color: var(--new); }

/* ---------- dungeons ---------- */
.dg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.dg-card { border-radius: 12px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; }
.dg-card.dim { opacity: 1; }
.dg-card.dim .dg-img img { filter: grayscale(.7) brightness(.7); }
.dg-img { position: relative; aspect-ratio: 16 / 7; background: #10131b; overflow: hidden; }
.dg-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.dg-img .badges { position: absolute; left: 10px; top: 10px; display: flex; gap: 6px; }
.dg-img .badges .badge { background: rgba(10, 12, 18, .85); }
.dg-body { padding: 12px 14px 14px; display: grid; gap: 6px; }
.dg-body h3 { margin: 0; font-size: 16px; }
.dg-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-size: 13px; }
.dg-facts b { color: #fff; font-weight: 600; }
.dg-bosses { font-size: 13px; color: #b9bfcc; }
.dg-bosses summary { cursor: pointer; color: var(--link); }
.dg-body h3 a { color: #fff; }
/* A dungeon's page: header art, then a card per quest with its giver's picture */
.dg-hero { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); margin-bottom: 18px; min-height: 180px; background: #10131b; }
.dg-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dg-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 11, 22, .92) 0%, rgba(7, 11, 22, .55) 55%, rgba(7, 11, 22, .15)); }
.dg-hero-text { position: relative; z-index: 1; padding: 26px 28px; max-width: 760px; }
.dg-hero-text h1 { margin: 0 0 6px; }
.dg-hero-text p { margin: 4px 0; color: #d6dbe6; }
.quest-list { display: grid; gap: 12px; }
.quest-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: start; }
.quest-card.side-a { background: color-mix(in srgb, #3b82f6 6%, var(--panel)); }
.quest-card.side-h { background: color-mix(in srgb, #d9432f 6%, var(--panel)); }
.quest-card[hidden] { display: none; }
.quest-npc img { width: 120px; height: auto; display: block; border-radius: 10px;
  background: radial-gradient(circle at 50% 40%, rgba(63, 208, 217, .12), rgba(9, 13, 27, .9) 72%); }
.quest-main { display: grid; gap: 6px; min-width: 0; }
.quest-main header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.quest-main h3 { margin: 0; font-size: 17px; }
.quest-obj { margin: 0; color: #d6dbe6; }
.quest-where, .quest-req, .quest-reward { font-size: 13.5px; }
.quest-req { color: var(--muted); }
.quest-changed { font-size: 13px; color: var(--gold); }
.quest-pin { white-space: nowrap; margin-left: 4px; }
.badge.side-a { color: #93c5fd; border-color: rgba(59, 130, 246, .5); }
.badge.side-h { color: #fca5a5; border-color: rgba(217, 67, 47, .5); }
#q-side .btn.active { border-color: var(--teal); color: #fff; }
@media (max-width: 760px) { .quest-card { grid-template-columns: 80px minmax(0, 1fr); gap: 12px; } .quest-npc img { width: 80px; } }

@media (max-width: 1100px) {
  .tasks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .class-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .news-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  /* phones: the art becomes a banner above the text instead of sitting behind it */
  .hero { display: block; padding: 0; min-height: 0; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
  .hero::before { display: none; }
  .hero-bg { position: static; display: block; height: 150px; }
  .hero-inner { padding: 18px 16px 18px; max-width: none; }
  .hero-credit { display: none; }
  .hero h1 { font-size: 26px; }
  .hero p { font-size: 15px; color: #b9bfcc; }
  .hero-search input { font-size: 15px; }
  .nav > a.nav-top { color: #fff; font-weight: 600; border-top: 1px solid var(--line); border-radius: 0; margin-top: 6px; padding-top: 12px; }
  .nav > a.nav-top + a.nav-top { border-top: 0; margin-top: 0; padding-top: 10px; }
  .tasks { grid-template-columns: 1fr 1fr; }
  .task { padding: 12px; gap: 10px; }
  .task span { display: none; }
  .news-cards, .art-grid { grid-template-columns: 1fr; }
  .class-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .class-tile span { display: none; }
  .section-head { flex-direction: column; align-items: flex-start; margin-top: 28px; }
}

.also-new { margin: 12px 0 0; color: #b9bfcc; font-size: 13.5px; }
.also-new b { color: #fff; font-weight: 600; }
.small { font-size: 12.5px; }

/* ---------- accounts, reports, characters, logs ---------- */
.account { display: flex; align-items: center; }
.account-me { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 6px; color: #fff; font-weight: 600; white-space: nowrap; }
.account-me:hover { border-color: var(--gold-2); text-decoration: none; }
.account-me .muted { font-weight: 400; }
.account-dot { width: 8px; height: 8px; border-radius: 50%; background: #148eff; box-shadow: 0 0 6px #148eff; }
.account-login { white-space: nowrap; }
.btn.danger { color: var(--removed); }
.btn.danger:hover { border-color: var(--removed); }
.rep-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.rep-head h1 { margin-bottom: 4px; }
.rep-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.rep-actions .input { width: auto; }
.rep-table tr.bundle { cursor: pointer; }
tr.loading-row { opacity: .5; }
.rp-up { display: grid; gap: 8px; margin-bottom: 16px; position: relative; overflow: hidden; }
.rp-up-row { display: flex; gap: 8px; flex-wrap: wrap; }
.rp-up-row .input:first-child { flex: 1 1 260px; }
.rp-up-row select.input { width: auto; flex: 0 1 280px; }
.logs-top { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.logs-top h2 { margin-top: 0; }
.lg-found { display: grid; gap: 2px; margin-top: 8px; }
.lg-char { display: block; padding: 6px 8px; border-radius: 6px; background: color-mix(in srgb, var(--c) 8%, transparent); }
.lg-char b { color: var(--c); }
.lg-char:hover { background: var(--panel-2); text-decoration: none; }
.lg-totals { color: var(--muted); }
.lg-totals b { color: var(--text); }
.ch-hero { background: color-mix(in srgb, var(--c) 8%, transparent); border-radius: 12px; padding: 12px 16px; margin-bottom: 12px; }
.ch-hero h1 { margin-bottom: 2px; }
.pct { display: inline-block; min-width: 30px; font-weight: 700; }
.pct-gold { color: #e5cc80; } .pct-orange { color: #ff8000; } .pct-purple { color: #a335ee; }
.pct-blue { color: #0070ff; } .pct-green { color: #1eff00; } .pct-grey { color: #9d9d9d; }
@media (max-width: 760px) {
  .logs-top { grid-template-columns: 1fr; }
  .account-me .muted { display: none; }
}

/* =====================================================================================================
   Identity: painted client art behind every page, the ForeverDB mark, class headers with spec paintings
   ===================================================================================================== */
.backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--bg); pointer-events: none; }
.backdrop::before {
  content: ''; position: absolute; inset: -30px; background: var(--bd-img, none) center 20% / cover no-repeat;
  filter: blur(var(--bd-blur, 2px)) saturate(1.15) brightness(.55); transform: scale(1.04);
}
.backdrop::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 70% at 50% 0%, rgba(7, 11, 22, .15) 0%, rgba(7, 11, 22, .55) 55%, rgba(7, 11, 22, .92) 100%),
    linear-gradient(180deg, rgba(7, 11, 22, .1) 0%, rgba(7, 11, 22, .7) 55%, var(--bg) 92%);
}

/* header */
.topbar {
  background: linear-gradient(180deg, rgba(6, 10, 22, .94), rgba(9, 14, 30, .86));
  border-bottom: 1px solid rgba(240, 195, 90, .16); box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
}
/* the lockup: the badge, then the wordmark (img/wordmark.svg), whose capitals are built like the badge's F */
.brand { gap: 10px; align-items: center; }
.brand-logo { width: 36px; height: 36px; display: block; transition: transform .25s ease; }
.brand:hover .brand-logo { transform: translateY(-1px) scale(1.06); }
.brand-word { height: 16px; width: auto; display: block; }
.nav-menu { background: rgba(10, 15, 32, .97); border-color: #2a3764; }
.global-search input { background: rgba(14, 20, 38, .8); }

/* type and surfaces */
h1 { font-weight: 800; letter-spacing: -.03em; }
.app > h2, .app > div > h2, .prose h2 {
  padding-bottom: 7px; border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, rgba(240, 195, 90, .55), rgba(63, 208, 217, .25) 40%, transparent 75%) 1;
}
.panel, .task, .class-card, .class-tile, .news-card, .blue-list {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 10px 26px rgba(0, 0, 0, .22);
}
.task:hover, .class-card:hover, .class-tile:hover { background: rgba(28, 38, 68, .92); border-color: #3a4a80; }
.tabs { border-bottom-color: #26325a; }
.footer { background: rgba(6, 9, 18, .85); border-top-color: rgba(240, 195, 90, .12); }
.eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }

/* ---------- class header: the three spec paintings, the class crest and quick facts ---------- */
.class-hero {
  position: relative; overflow: hidden; border-radius: 14px; margin: 4px 0 12px; min-height: 210px;
  border: 1px solid rgba(255, 255, 255, .07); background: #0b1020;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .35), inset 0 -2px 0 var(--cc);
}
.ch-art { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.ch-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.class-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(6, 9, 20, .97) 0%, rgba(6, 9, 20, .88) 38%, rgba(6, 9, 20, .45) 70%, rgba(6, 9, 20, .25) 100%),
    linear-gradient(0deg, rgba(6, 9, 20, .75), transparent 55%);
}
.ch-body { position: relative; z-index: 2; display: flex; gap: 22px; align-items: center; padding: 26px 28px; }
.ch-crest {
  flex-shrink: 0; width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .12), rgba(0, 0, 0, .55)), var(--cc);
  box-shadow: 0 0 0 3px #1a1206, 0 0 0 5px #c99a3f, 0 0 0 7px #2a1d08, 0 0 34px color-mix(in srgb, var(--cc) 55%, transparent);
}
.ch-crest img { width: 76px; height: 76px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(0, 0, 0, .6); }
.ch-text h1 { font-size: 40px; margin: 2px 0 4px; color: var(--cc); text-shadow: 0 2px 18px rgba(0, 0, 0, .7); }
.ch-desc { margin: 0; max-width: 640px; color: #c6cde0; font-size: 14.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ch-specs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ch-spec {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 5px; border-radius: 999px; color: #fff; font-size: 13px; font-weight: 600;
  background: rgba(8, 12, 26, .7); border: 1px solid rgba(255, 255, 255, .14);
}
.ch-spec:hover { background: color-mix(in srgb, var(--cc) 16%, transparent); text-decoration: none; }
.ch-spec img { width: 22px; height: 22px; border-radius: 50%; }
.ch-spec span { color: var(--muted); font-weight: 500; }
.ch-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 0 0 6px; }
.ch-fact { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-width: 0; color: var(--text); }
.ch-fact dt { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.ch-fact dd { margin: 3px 0 0; color: #fff; font-weight: 600; font-size: 14px; line-height: 1.3; }
.ch-fact dd small { display: block; color: var(--muted); font-weight: 400; font-size: 12px; }
a.ch-fact:hover { border-color: #3a4a80; text-decoration: none; }

/* spec cards: pick a spec by its painting */
.spec-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0 18px; }
.spec-pick {
  position: relative; overflow: hidden; border-radius: 12px; min-height: 118px; padding: 14px 16px; text-align: left; cursor: pointer; font: inherit;
  display: flex; gap: 12px; align-items: flex-end; color: #fff; border: 1px solid rgba(255, 255, 255, .08); background: #0b1020;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .3); transition: transform .2s ease, border-color .2s ease;
}
.spec-pick > img.art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .7; transition: opacity .2s ease, transform .4s ease; }
.spec-pick::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6, 9, 20, .95) 10%, rgba(6, 9, 20, .25) 70%); }
.spec-pick > :not(.art) { position: relative; z-index: 1; }
.spec-pick .sp-icon { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 2px #1a1206, 0 0 0 3px #c99a3f; flex-shrink: 0; }
.spec-pick b { display: block; font-size: 18px; letter-spacing: -.02em; }
.spec-pick span { color: #b8c0d6; font-size: 12.5px; }
.spec-pick:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .22); }
.spec-pick:hover > img.art { opacity: .95; transform: scale(1.04); }
.spec-pick.active { background: color-mix(in srgb, var(--cc) 22%, #0b1020); }
.spec-pick.active > img.art { opacity: 1; }
.spec-pick .sp-sel { position: absolute; top: 10px; right: 10px; z-index: 2; font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 4px; background: var(--cc); color: #0a0d18; display: none; }
.spec-pick.active .sp-sel { display: block; }

/* class list: each card carries its first spec painting */
.class-card { position: relative; overflow: hidden; background: color-mix(in srgb, var(--cc) 8%, var(--panel)); }
.class-card:hover { background: color-mix(in srgb, var(--cc) 13%, var(--panel)); }
.class-card .cc-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .16; transition: opacity .25s ease; }
.class-card:hover .cc-art { opacity: .3; }
.class-card > :not(.cc-art) { position: relative; }

/* ---------- home ---------- */
.hero.hero-forever { min-height: 430px; padding: 34px 32px 30px; align-items: center; justify-content: center; text-align: center; border: 1px solid rgba(255, 255, 255, .07); }
.hero.hero-forever::before {
  background: radial-gradient(70% 80% at 50% 38%, rgba(7, 11, 22, .15) 0%, rgba(7, 11, 22, .72) 70%, rgba(7, 11, 22, .92) 100%),
    linear-gradient(0deg, rgba(7, 11, 22, .85), transparent 60%);
}
.hero-forever .hero-inner { max-width: 720px; display: grid; justify-items: center; }
.hero-logo { width: min(330px, 72vw); height: auto; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .6)); margin-bottom: 6px; }
.hero-forever h1 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; margin: 4px 0 0; color: #eef1f8; }
.hero-forever p { margin: 8px auto 0; }
.hero-forever .hero-search { width: 100%; margin-left: auto; margin-right: auto; }
.hero-forever .hero-meta { justify-content: center; }
.countdown {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; padding: 8px 16px; border-radius: 999px;
  background: rgba(8, 14, 30, .78); border: 1px solid rgba(63, 208, 217, .35); color: #cfe9ef; font-size: 14px;
  box-shadow: 0 0 24px rgba(63, 208, 217, .12);
}
.countdown b { color: #fff; font-size: 16px; font-variant-numeric: tabular-nums; }
.countdown .cd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 10px var(--teal); }
.crest-row { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; margin: -8px 0 8px; padding: 14px 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.crest { display: grid; justify-items: center; gap: 7px; padding: 6px 2px; border-radius: 10px; color: var(--cc); font-weight: 650; font-size: 13.5px; }
.crest img { width: 52px; height: 52px; border-radius: 50%; box-shadow: 0 0 0 2px #1a1206, 0 0 0 3px #b98a2c; transition: transform .2s ease, box-shadow .2s ease; }
.crest:hover { text-decoration: none; background: rgba(255, 255, 255, .03); }
.crest:hover img { transform: translateY(-3px); box-shadow: 0 0 0 2px #1a1206, 0 0 0 3px var(--cc), 0 0 22px color-mix(in srgb, var(--cc) 50%, transparent); }
.crest small { color: var(--muted); font-weight: 400; font-size: 11px; margin-top: -4px; }

@media (max-width: 1000px) {
  .ch-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .crest-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .brand-word { display: none; }   /* phones: the badge stands alone */
  .ch-body { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px; }
  .ch-crest { width: 72px; height: 72px; }
  .ch-crest img { width: 54px; height: 54px; }
  .ch-text h1 { font-size: 30px; }
  .ch-art { grid-template-columns: 1fr; }
  .ch-art img:not(:first-child) { display: none; }
  .ch-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec-picks { grid-template-columns: 1fr; }
  .spec-pick { min-height: 84px; }
  .crest-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero.hero-forever { min-height: 0; padding: 26px 16px 22px; }
  .countdown { font-size: 13px; }
}

/* the selected spec's painting, faded behind its summary */
.spec-intro { position: relative; overflow: hidden; background: color-mix(in srgb, var(--cc) 7%, var(--panel)); }
.spec-intro .si-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .22; -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 75%); mask-image: linear-gradient(180deg, #000 0%, transparent 75%); }
.spec-intro > :not(.si-art) { position: relative; }

/* Builds tab: each spec opens with its painting */
.bd-spec-head { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; min-height: 92px; margin: 34px 0 14px; padding: 14px 18px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .08); background: color-mix(in srgb, var(--cc) 10%, #0b1020); }
.bd-spec-head .art { position: absolute; top: 0; right: 0; bottom: 0; width: 440px; max-width: 65%; height: 100%; object-fit: cover; object-position: center 35%; opacity: .95; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%); mask-image: linear-gradient(90deg, transparent 0%, #000 55%); }
.bd-spec-head::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 9, 20, .5) 0%, rgba(6, 9, 20, .15) 60%, rgba(6, 9, 20, 0) 100%); }
.bd-spec-head > :not(.art) { position: relative; z-index: 1; }
.bd-spec-head .sp-icon { width: 52px; height: 52px; border-radius: 50%; box-shadow: 0 0 0 2px #1a1206, 0 0 0 3px #c99a3f; }
.bd-spec-head h2 { margin: 0; font-size: 24px; border: 0; padding: 0; }
.bd-spec-head span { color: #b8c0d6; font-size: 13px; }

/* ---------- armour sets ---------- */
.set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
.set-card { display: grid; gap: 8px; align-content: start; }
.set-card.q-edge-2 { border-top-color: var(--q2); } .set-card.q-edge-3 { border-top-color: var(--q3); }
.set-card.q-edge-4 { border-top-color: var(--q4); } .set-card.q-edge-5 { border-top-color: var(--q5); }
.set-card header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.set-card header h3 { margin: 0; font-size: 16.5px; }
.set-card header a:hover { text-decoration: none; }
.set-pieces { display: flex; flex-wrap: wrap; gap: 6px; }
.icon.md { width: 38px; height: 38px; border-radius: 6px; }
.set-bonus { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 4px; font-size: 13.5px; }
.set-bonus b { color: var(--gold); font-weight: 650; }
.set-bonus a { color: #9fe0a0; }
table.set-diff { font-size: 13px; }
table.set-diff td { vertical-align: top; }
table.set-diff td:nth-child(2) a { color: #9fe0a0; }
table.set-diff td:nth-child(3) a { color: var(--muted); }
@media (max-width: 760px) { .set-grid { grid-template-columns: 1fr; } }

/* item model pictures (tools/build_models.py) */
.item-left { display: grid; gap: 14px; align-content: start; }
.item-model { float: right; width: 290px; margin: 0 0 14px 18px; padding: 12px; border-radius: 12px; background: radial-gradient(circle at 50% 42%, rgba(63, 208, 217, .12), rgba(9, 13, 27, .9) 70%); border: 1px solid var(--line); text-align: center; }
.item-model img { width: 100%; max-width: 300px; height: auto; display: block; margin: 0 auto; }
.item-model figcaption { color: var(--muted); font-size: 11.5px; margin-top: 4px; }
@media (max-width: 760px) { .item-model { float: none; width: auto; max-width: 300px; margin: 0 auto 14px; } }

/* armour sets worn on a character (tools/build_outfits.py) */
.set-card.has-outfit { grid-template-columns: 120px minmax(0, 1fr); column-gap: 14px; }
.set-card .set-main { display: grid; gap: 8px; align-content: start; min-width: 0; }
/* the bonus list runs the full width of the card, under the portrait and the pieces */
.set-card .set-bonuses { grid-column: 1 / -1; min-width: 0; }
.set-card.has-outfit .set-outfit { max-height: 180px; }
.set-card.has-outfit .set-outfit img { height: 180px; width: auto; margin: 0 auto; }
table.set-diff th:first-child, table.set-diff td:first-child { width: 52px; }
.set-outfit { display: block; align-self: start; border-radius: 10px; overflow: hidden;
  background: radial-gradient(circle at 50% 38%, rgba(63, 208, 217, .14), rgba(9, 13, 27, .9) 72%); }
.set-outfit img { width: 100%; height: auto; display: block; transition: transform .25s ease; }
.set-outfit:hover img { transform: scale(1.04); }
.set-detail { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
.set-figure { margin: 0; padding: 12px; border-radius: 14px; border: 1px solid var(--line); text-align: center; position: sticky; top: 76px;
  background: radial-gradient(circle at 50% 36%, rgba(63, 208, 217, .16), rgba(9, 13, 27, .92) 70%); }
.set-figure img { width: 100%; height: auto; display: block; }
.set-figure figcaption { color: var(--muted); font-size: 11.5px; margin-top: 4px; }
@media (max-width: 1000px) { .set-detail { grid-template-columns: 1fr; } .set-figure { position: static; max-width: 320px; margin: 0 auto; } }
@media (max-width: 760px) { .set-card.has-outfit { grid-template-columns: 96px minmax(0, 1fr); } }
/* Sets by class: tabs, a section per class, and the sets anyone can wear grouped by armour type */
.set-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.set-tab { --c: var(--teal); display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 8px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel); color: var(--text); font-weight: 600; font-size: 13.5px; }
.set-tab img { border-radius: 50%; }
.set-tab span { color: var(--c); }
.set-tab small { color: var(--muted); font-weight: 500; font-size: 12px; }
.set-tab:hover { text-decoration: none; background: color-mix(in srgb, var(--c) 10%, var(--panel)); }
.set-tab.active { background: color-mix(in srgb, var(--c) 18%, var(--panel)); }
.set-section { margin: 0 0 28px; }
.set-head { --c: var(--text); display: flex; align-items: center; gap: 10px; margin: 8px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); color: var(--c); font-size: 21px; }
.set-head img { border-radius: 50%; box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 55%, transparent); }
.set-head .muted, .set-subhead .muted { font-size: 14px; font-weight: 500; }
.set-subhead { margin: 18px 0 10px; font-size: 16px; }
.set-missing { margin: 8px 0 24px; }
.set-missing > summary { cursor: pointer; color: var(--muted); font-weight: 600; padding: 8px 0; }
.set-missing[open] > summary { margin-bottom: 6px; }
/* A set's pieces with their pictures */
.set-piece-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
.set-piece { display: grid; gap: 3px; align-content: start; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--text); }
.set-piece:hover { text-decoration: none; border-color: var(--teal); }
.set-piece-pic { display: grid; place-items: center; aspect-ratio: 1; border-radius: 9px; overflow: hidden; margin-bottom: 4px;
  background: radial-gradient(circle at 50% 42%, rgba(63, 208, 217, .12), rgba(9, 13, 27, .9) 70%); }
.set-piece-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.set-piece:hover .set-piece-pic img { transform: scale(1.05); }
.set-piece-name { font-weight: 650; font-size: 14px; line-height: 1.3; }
@media (max-width: 760px) { .set-piece-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .set-tab { font-size: 12.5px; padding: 5px 9px 5px 6px; } }
/* Where an item comes from (item pages, gear lists) */
.source-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.src-classic { font-size: 11px; color: var(--muted); border: 1px dashed rgba(240, 195, 90, .45); border-radius: 4px; padding: 0 5px; margin-left: 4px; white-space: nowrap; }
/* Class tabs PvE and PvP */
.pg-controls { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin: 4px 0 14px; }
.pg-controls .chip.active { border-color: var(--teal); color: #fff; background: rgba(63, 208, 217, .12); }
.pg h3 { margin: 22px 0 8px; }
.pg h4 { margin: 0 0 8px; }
.pg-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.pg-stats { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding-left: 20px; font-weight: 600; }
.pg-gear { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.pg-slot h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.pg-item { padding: 6px 0; border-top: 1px solid var(--line); }
.pg-item:first-of-type { border-top: 0; padding-top: 0; }
.pg-item:not(.main) { opacity: .85; font-size: 13.5px; }
.pg-where { margin-top: 3px; color: #c9cfdb; }
.pg-matchups { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.pg-build .bd-talents { margin: 8px 0; }

/* ---------- Hunter pets ---------- */
.badge.rare { background: rgba(200, 200, 215, .16); color: #e6e6f0; border: 1px solid rgba(220, 220, 235, .45); }
.badge.fv { background: rgba(61, 220, 132, .12); color: var(--new); }
.badge.fast { background: rgba(255, 179, 71, .13); color: #ffc36b; }
.badge.sod { background: rgba(127, 178, 255, .12); color: var(--link); }
.icon.xl { width: 72px; height: 72px; border-radius: 10px; flex: none; }
.pet-intro ul { padding-left: 18px; margin: 0 0 8px; }
.pet-intro li { margin: 5px 0; }
.pet-families { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-bottom: 18px; }
.pet-fam { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); }
.pet-fam:hover { text-decoration: none; border-color: #3a4358; background: #1b2130; }
.pet-fam > div { display: grid; gap: 2px; min-width: 0; }
.pet-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 18px; }
.pet-card { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); }
.pet-card:hover { text-decoration: none; border-color: #3a4358; }
.pet-img { display: block; border-radius: 8px; background: radial-gradient(circle at 50% 40%, #232a3a, #12151d); object-fit: contain; }
.pet-img.m { width: 100%; max-width: 200px; aspect-ratio: 1; height: auto; }
.pet-img.s { width: 56px; height: 56px; }
.pet-img.none { display: grid; place-items: center; color: var(--muted); font-size: 20px; }
.pet-img.m.none { height: 160px; }
.pet-badges { display: flex; flex-wrap: wrap; gap: 4px; justify-content: inherit; margin-top: 2px; }
.pet-card .pet-badges { justify-content: center; }
.pet-table td { vertical-align: middle; }
.pet-table td:first-child { width: 64px; }
.pet-abs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; margin-bottom: 14px; }
.pet-ab { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--panel-2); }
.pet-ab-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.pet-ab p { margin: 4px 0 0; }
.pet-ranks { display: flex; flex-wrap: wrap; gap: 4px; }
.pet-ranks a { display: grid; padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 12.5px; line-height: 1.3; }
.pet-ranks a span { color: var(--muted); font-size: 11px; }
.pet-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 12px; }
.pet-head h1 { margin-top: 0; }
.pet-looks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 18px; }
.pet-look { border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: var(--panel); }
.pet-look ul { list-style: none; padding: 0; margin: 8px 0 0; font-size: 13px; }
.pet-look li { margin: 3px 0; }
@media (max-width: 600px) {
  .pet-head { flex-direction: column; }
  .pet-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- beginner guides ---------- */
.guide-group { margin-bottom: 22px; }
.guide-group h2 { margin-bottom: 2px; }
.guide-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin: 10px 0; }
.guide-cards.classes { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.guide-card { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border: 0; border-radius: 12px; background: var(--panel); color: var(--text); }
.guide-card[style*="--cc"] { background: color-mix(in srgb, var(--cc) 8%, var(--panel)); }
.guide-card[style*="--cc"]:hover { background: color-mix(in srgb, var(--cc) 13%, var(--panel)); }
.guide-card:hover { text-decoration: none; background: #1b2232; }
.guide-card.big { grid-column: 1 / -1; padding: 18px; }
.guide-card.big b { font-size: 18px; }
.guide-card img { border-radius: 8px; flex: none; }
.guide-card > div { display: grid; gap: 2px; min-width: 0; }
.guide-card p { margin: 4px 0 0; color: #c9cfdb; }
.guide-head { margin-bottom: 14px; }
.guide[style*="--cc"] .guide-head { background: color-mix(in srgb, var(--cc) 8%, transparent); border-radius: 12px; padding: 14px 18px; }
.guide-head h1 { margin: 4px 0 6px; }
.guide-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px; align-items: start; }
.guide-layout > .guide-body:only-child { grid-column: 1 / -1; }
.guide-toc { position: sticky; top: 76px; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--panel); font-size: 13px; max-height: calc(100vh - 100px); overflow-y: auto; }
.guide-toc ol { padding-left: 18px; margin: 8px 0 0; }
.guide-toc li { margin: 5px 0; }
.guide-body { max-width: 860px; }
.guide-body ol.steps { padding-left: 22px; }
.guide-body ol.steps li { margin: 6px 0; }
.callout { border-radius: 10px; padding: 10px 14px; margin: 12px 0; line-height: 1.55; }
.callout b:first-child { margin-right: 4px; }
.callout.tip { background: rgba(61, 220, 132, .08); }
.callout.tip b:first-child { color: var(--new); }
.callout.warn { background: rgba(255, 179, 71, .08); }
.callout.warn b:first-child { color: #ffb347; }
.callout.spec { background: rgba(255, 179, 71, .05); }
.guide-table td, .guide-table th { vertical-align: top; }
.guide-pager { display: flex; justify-content: space-between; gap: 10px; margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--line); }
@media (max-width: 900px) {
  .guide-layout { grid-template-columns: minmax(0, 1fr); }
  .guide-toc { position: static; max-height: none; }
}

/* wide tables scroll inside their box instead of widening the page */
.table-wrap { overflow-x: auto; max-width: 100%; }

/* menu icons: game icons beside every menu entry, and small ones on the top bar */
.nav-menu a:has(.nav-ic) { grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; align-items: center; }
.nav-menu a .nav-ic { grid-row: span 2; border-radius: 6px; box-shadow: 0 0 0 1px #000; }
.nav-menu a .nav-ic ~ b, .nav-menu a .nav-ic ~ span { grid-column: 2; }
.nav-top { gap: 7px; }
.nav-top-ic { border-radius: 4px; box-shadow: 0 0 0 1px #000; flex: none; opacity: .92; }
.nav-top:hover .nav-top-ic, .nav-top.active .nav-top-ic { opacity: 1; }
@media (max-width: 1320px) and (min-width: 1101px) { .nav-top-ic { display: none; } }   /* room for the search box */

/* class-coloured cards are set apart by their tint alone, without an outline */
.class-card, .guide-card[style*="--cc"], .bd-spec-head, .spec-intro { border-color: transparent; }

/* the admin page and the addon upload page */
.badge.neg { background: rgba(255, 99, 99, .14); color: var(--removed); }
.admin-link { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: color-mix(in srgb, var(--gold) 7%, var(--panel)); border-color: transparent; }
.admin-days { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; align-items: end; height: 140px; margin: 8px 0; }
.admin-day { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }
.admin-day .bars { flex: 1; width: 100%; display: flex; gap: 2px; align-items: flex-end; justify-content: center; }
.admin-day .bars i { width: 30%; min-height: 1px; border-radius: 2px 2px 0 0; }
.admin-day span { font-size: 11px; color: var(--muted); }
.admin-day .u, .dot.u { background: var(--gold); }
.admin-day .r, .dot.r { background: var(--link); }
.admin-day .c, .dot.c { background: var(--new); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 2px 0 8px; }
.admin-user { margin-top: 18px; background: color-mix(in srgb, var(--gold) 4%, var(--panel)); }
.admin-user .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.admin-actions .input { width: auto; }
.admin-actions #au-reason { min-width: 220px; }
.admin-history { padding-left: 18px; }
.admin-history li { margin: 3px 0; }
.admin-users td { vertical-align: middle; }
.contrib-grid .panel h2 { margin-top: 0; font-size: 17px; }
.file-btn { display: inline-block; }
code.path { display: block; white-space: normal; overflow-wrap: anywhere; padding: 8px 10px; background: var(--panel-2); border-radius: 6px; font-size: 12.5px; }

/* ---------- /embed: tooltips for other sites ---------- */
.embed-code { position: relative; margin: 10px 0 12px; }
.embed-code pre {
  margin: 0; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); color: #e4e8f2;
  font: 12.5px/1.6 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; white-space: pre-wrap; overflow-wrap: anywhere;
}
.embed-code pre code { background: none; padding: 0; font: inherit; }
.embed-code.with-copy pre { padding-right: 78px; }
.embed-code .btn { position: absolute; top: 8px; right: 8px; }
.embed kbd { font: 12px ui-monospace, Consolas, monospace; padding: 1px 5px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel-2); }
.embed-toggles { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 12px 0; }
.embed-toggles label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.embed-toggles input { accent-color: var(--gold); width: 16px; height: 16px; margin: 0; }
/* the demo is a pretend page on someone else's site, light and in its own type, so the tooltip is seen keeping its own look */
.embed-page { background: #f7f5f0; color: #1f2430; border-radius: 10px; padding: 16px 20px; font: 15.5px/1.7 Georgia, "Times New Roman", serif; }
.embed-page p { margin: 0 0 10px; }
.embed-page p:last-child { margin: 0; }
.embed-page a { color: #1f5fbf; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.embed-page code { background: #e8e4da; color: #1f2430; }
.embed-page [data-foreverdb] { border-bottom: 1px dotted currentColor; cursor: help; }
.embed-opts td { vertical-align: top; }
.embed-opts td:not(:last-child) { white-space: nowrap; }
@media (max-width: 600px) {
  .embed-opts thead { display: none; }
  .embed-opts tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .embed-opts td { display: inline; border: 0; padding: 0 8px 0 0; }
  .embed-opts td:last-child { display: block; padding-top: 4px; white-space: normal; }
}

/* ---------- build changelog (/changelog) and "checked against build" stamps ---------- */
.cl-builds { display: grid; gap: 10px; margin: 6px 0 18px; }
.cl-build { display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); }
.cl-build:hover { text-decoration: none; border-color: var(--gold-2); }
.cl-build.latest { background: color-mix(in srgb, var(--gold) 6%, var(--panel)); }
.cl-build-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.cl-build-head b { font-size: 16px; color: #fff; }
.cl-first-note { margin: 6px 0 0; color: #c9cfdb; }
.cl-counts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font-size: 13px; }
.cl-count b { font-weight: 600; margin-right: 4px; }
.cl-add, .cl-rem, .cl-chg { font-style: normal; font-variant-numeric: tabular-nums; }
.cl-add { color: var(--new); }
.cl-rem { color: var(--removed); }
.cl-chg { color: var(--changed); }
.cl-pager { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; margin: 2px 0 16px; font-size: 13px; }
.cl-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
button.cl-tile { text-align: left; cursor: pointer; color: var(--text); font: inherit; }
button.cl-tile .v { font-size: 22px; }
button.cl-tile:disabled { cursor: default; opacity: .5; }
button.cl-tile:not(:disabled):hover { border-color: var(--gold-2); }
button.cl-tile.active { background: color-mix(in srgb, var(--gold) 10%, var(--panel)); border-color: var(--gold-2); }
.panel.cl-first h2 { margin-top: 0; padding: 0; border: 0; }
.cl-group h2.cl-class { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cl-class img { border-radius: 6px; box-shadow: 0 0 0 1px #000; }
.cl-entries { display: grid; gap: 8px; margin-bottom: 10px; }
.cl-entry { padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); min-width: 0; }
.cl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.cl-sub { color: var(--muted); font-size: 12.5px; }
.badge.removed { background: rgba(255, 107, 107, .14); color: var(--removed); }
.cl-gone { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(255, 107, 107, .55); }
.cl-text { margin: 6px 0 0; color: #c9cfdb; font-size: 13.5px; white-space: pre-line; overflow-wrap: anywhere; }
.cl-changes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
.cl-ch { overflow-wrap: anywhere; }
.cl-f { color: var(--muted); margin-right: 4px; }
.cl-rank { color: var(--gold); font-weight: 600; }
.cl-b { color: #c9b8b8; text-decoration: line-through; text-decoration-color: rgba(255, 107, 107, .55); }
.cl-a { color: #fff; }
.cl-arrow { color: var(--muted); margin: 0 2px; }
.cl-textch { display: grid; grid-template-columns: minmax(110px, max-content) minmax(0, 1fr); gap: 4px 12px; align-items: baseline; }
.cl-diff { padding: 5px 10px; border-radius: 6px; background: rgba(255, 255, 255, .03); white-space: pre-line; line-height: 1.6; }
.cl-diff del { background: rgba(255, 107, 107, .15); color: #ffb9b9; text-decoration: line-through; text-decoration-color: rgba(255, 107, 107, .7); border-radius: 3px; padding: 0 2px; }
.cl-diff ins { background: rgba(61, 220, 132, .15); color: #bff5d4; text-decoration: none; border-radius: 3px; padding: 0 2px; }
.cl-rest { margin-top: 6px; font-size: 13px; }
.cl-rest summary { cursor: pointer; color: var(--link); }
.checked { font-size: 12.5px; color: var(--muted); margin: 8px 0; }
.checked.stale { background: rgba(255, 179, 71, .07); color: #e9d3ae; padding: 6px 10px; border-radius: 6px; }
.guide-head .checked { margin-top: -8px; }
@media (max-width: 760px) { .cl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cl-textch { grid-template-columns: minmax(0, 1fr); } }
.seen-head { font-size: 14px; margin: 16px 0 8px; display: flex; gap: 8px; align-items: center; }

/* ---------- Legacy calculator (/legacy) ---------- */
.lg-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
.lg-jump { margin: 0 0 6px; }
.lg-jump .chip { color: var(--text); }
.lg-jump .chip:hover { text-decoration: none; border-color: #3a4358; }
.lg-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 12px; }
.lg-count { display: flex; align-items: center; gap: 10px; }
.lg-count img { border-radius: 6px; box-shadow: 0 0 0 1px #000; }
.lg-count b { display: block; font-size: 20px; line-height: 1.15; color: #fff; font-variant-numeric: tabular-nums; }
.lg-count span { color: var(--muted); font-size: 12px; }
.lg-meter { flex: 1 1 140px; max-width: 260px; height: 8px; border-radius: 99px; background: var(--panel-2); overflow: hidden; }
.lg-meter span { display: block; height: 100%; border-radius: inherit; background: var(--gold); transition: width .15s; }
.lg-budget { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.lg-trees { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 14px; margin-bottom: 14px; }
.lg-tree { min-width: 0; border-radius: 10px; padding: 12px 14px 14px; background: color-mix(in srgb, var(--tc) 5%, var(--panel)); }
.lg-tree-head { display: flex; justify-content: space-between; align-items: baseline; }
.lg-tree-head h3 { margin: 0; }
.lg-tree-head b { font-size: 20px; color: #fff; font-variant-numeric: tabular-nums; }
.lg-tree-sub { margin: 2px 0 14px; min-height: 1.4em; }
.lg-grid-wrap { display: flex; justify-content: center; overflow-x: auto; padding: 8px 8px 10px; }
.lg-grid { position: relative; flex: none; }
.lg-edges { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.lg-edges line { stroke: #3a4560; stroke-width: 3; stroke-linecap: round; }
.lg-edges line.on { stroke: #ffd100; }
.lg-edges line.fut { stroke-dasharray: 3 5; opacity: .6; }
.lg-edges .ar { fill: #3a4560; }
.lg-edges .ar.on { fill: #ffd100; }
.lg-node { position: absolute; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; }
.lg-node .icon { width: 52px; height: 52px; border-radius: 8px; filter: grayscale(1) brightness(.5); transition: filter .12s; }
.lg-node.avail .icon, .lg-node.some .icon { filter: none; box-shadow: 0 0 0 2px #1eff00; }
.lg-node.max .icon { filter: none; box-shadow: 0 0 0 2px #ffd100; }
.lg-node.future { cursor: help; }
.lg-node.future .icon { filter: grayscale(1) brightness(.3); }
.lg-node.focus .icon { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 3px; }
.lg-node:focus-visible { outline: 2px solid var(--teal); outline-offset: 5px; }
.lg-pts { position: absolute; right: -8px; bottom: -7px; padding: 0 4px; border: 1px solid #555; border-radius: 4px; background: #000;
  color: #9d9d9d; font-size: 11px; font-variant-numeric: tabular-nums; }
.lg-node.avail .lg-pts, .lg-node.some .lg-pts { color: #1eff00; }
.lg-node.max .lg-pts { color: #ffd100; }
.lg-gate { position: absolute; left: -7px; top: -7px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #10131b;
  box-shadow: 0 0 0 1px #3a3f4c; color: #c9cfdb; font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; }
.lg-q { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 20px; font-weight: 700; }
.lg-detail { min-height: 96px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.lg-hint { margin: 0; }
.lg-d-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.lg-d-head > div { display: grid; min-width: 0; }
.lg-step { width: 34px; height: 34px; padding: 0; font-size: 18px; line-height: 1; }
.lg-d-rank { margin: 4px 0; font-size: 13.5px; }
.lg-why { margin: 6px 0 0; color: #ff8a8a; font-size: 12.5px; }
.lg-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 4px 20px; }
.lg-summary > h3, .lg-summary > p { grid-column: 1 / -1; }
.lg-summary h3 { margin-top: 0; }
.lg-sum-tree h4 { margin: 4px 0 8px; }
.lg-sum-tree ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lg-sum-tree li { display: flex; align-items: flex-start; gap: 10px; }
.lg-sum-tree li > div { display: grid; gap: 1px; min-width: 0; }
.lg-refs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 14px; margin-bottom: 8px; align-items: start; }
.lg-ref { border-radius: 10px; padding: 12px 14px; background: color-mix(in srgb, var(--tc) 5%, var(--panel)); }
.lg-ref h3 { margin: 0 0 4px; }
.lg-perk { padding: 11px 0; border-top: 1px solid var(--line); }
.lg-perk:first-of-type { border-top: 0; }
.lg-perk header { display: flex; align-items: center; gap: 10px; }
.lg-perk header > div { display: grid; gap: 1px; min-width: 0; }
.lg-perk p { margin: 5px 0 0; }
.lg-eff { color: #fff; }
.lg-blz { color: #c9cfdb; }
.lg-tally { margin-bottom: 14px; }
.lg-tally-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.lg-tally-row > b { color: #fff; font-size: 18px; font-variant-numeric: tabular-nums; }
.lg-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 14px; align-items: start; }
.lg-cat-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 8px; }
.lg-cat-head h3 { margin: 0; }
.lg-cat-done { color: var(--muted); font-variant-numeric: tabular-nums; }
.lg-matrix { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.lg-matrix th, .lg-matrix td { padding: 5px 6px; border-top: 1px solid var(--line); text-align: left; }
.lg-matrix thead th { border-top: 0; color: var(--muted); font-size: 12px; font-weight: 600; }
.lg-matrix tbody th { font-weight: 600; white-space: nowrap; }
.lg-matrix label { display: inline-flex; align-items: center; gap: 6px; padding: 2px 6px; cursor: pointer; }
.lg-matrix thead th:not(:first-child), .lg-matrix td { text-align: center; }
.lg-matrix thead th span { display: block; color: #6f7a98; font-weight: 500; }
.lg-chal { margin: 0; padding: 0; list-style: none; }
.lg-chal > li { padding: 9px 0; border-top: 1px solid var(--line); }
.lg-chal > li:first-child { padding-top: 0; border-top: 0; }
.lg-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.lg-check input { flex: none; margin-top: 12px; }
.lg-check > span { display: grid; gap: 2px; min-width: 0; }
.lg-cd { color: #c9cfdb; font-size: 13.5px; }
.lg-parts, .lg-alt { margin: 6px 0 0 71px; font-size: 13px; }
.lg-parts summary { color: var(--link); cursor: pointer; }
.lg-parts ul { margin: 6px 0 0; padding-left: 18px; }
.lg-parts li { margin: 2px 0; }
.lg-track-bar { position: relative; height: 8px; margin: 6px 0 18px; border-radius: 99px; background: var(--panel-2); }
.lg-track-bar > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: var(--gold); }
.lg-track-bar i { position: absolute; top: -4px; width: 2px; height: 16px; background: #8d99b8; transform: translateX(-1px); }
.lg-rewards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 10px; }
.lg-reward { display: flex; align-items: flex-start; gap: 10px; padding: 10px; border-radius: 8px; background: var(--panel-2); }
.lg-reward.got { background: color-mix(in srgb, var(--new) 9%, var(--panel-2)); }
.lg-reward p { margin: 4px 0 0; }
.lg-lv { flex: none; min-width: 28px; color: var(--gold); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lg-how { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 14px; align-items: start; }
.lg-how h3 { margin-top: 0; }
.lg-how ul { display: grid; gap: 8px; margin: 0; padding-left: 18px; }
.lg-src { color: var(--muted); font-size: 11px; white-space: nowrap; }
a.lg-src:hover { color: var(--link); }
@media (max-width: 760px) {
  .lg-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg-parts, .lg-alt { margin-left: 0; }
  .lg-meter { order: 5; flex-basis: 100%; max-width: none; }
}

/* the community page and its charts (site/js/charts.js) */
.chart { position: relative; width: 100%; margin: 6px 0 4px; }
.chart svg { display: block; overflow: visible; touch-action: pan-y; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .zero { stroke: var(--muted); stroke-dasharray: 3 3; }
.chart .ylab { fill: var(--muted); font-size: 11px; text-anchor: end; }
.chart .xlab { fill: var(--muted); font-size: 11px; text-anchor: middle; }
.chart .marker { fill: var(--gold); cursor: help; }
.chart .guide { stroke: var(--muted); stroke-width: 1; opacity: 0; pointer-events: none; }
.chart-tip { position: absolute; top: 6px; z-index: 5; pointer-events: none; background: var(--panel-2); border-radius: 6px; padding: 6px 9px;
  font-size: 12px; line-height: 1.5; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); white-space: nowrap; }
.chart-tip i, .chart-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 4px 0; }
.chart-legend button { background: none; border: 0; color: var(--text, #ddd); font-size: 12px; padding: 2px 6px; border-radius: 4px; cursor: pointer; }
.chart-legend button:hover { background: var(--panel-2); }
.chart-legend button.off { opacity: .35; }
.hbars { display: grid; gap: 6px; margin: 10px 0; }
.hbar { display: grid; grid-template-columns: minmax(90px, 150px) 1fr auto auto auto; gap: 10px; align-items: center; font-size: 14px; }
.hb-track { height: 10px; background: var(--panel-2); border-radius: 5px; overflow: hidden; }
.hb-track i { display: block; height: 100%; border-radius: 5px; }
.hb-val { font-variant-numeric: tabular-nums; min-width: 72px; text-align: right; }
.hb-val small, .stat-tile small { color: var(--muted); font-size: 11px; }
.chg { font-size: 11.5px; color: var(--muted); min-width: 52px; font-variant-numeric: tabular-nums; }
.chg.up { color: var(--new); }
.chg.down { color: var(--removed); }
.chg.new { color: var(--gold); }
.stat-tile .chg { font-size: 13px; font-weight: 600; letter-spacing: 0; }
.mood { display: inline-block; min-width: 38px; text-align: center; font-size: 12px; font-weight: 700; padding: 1px 6px; border-radius: 10px;
  font-variant-numeric: tabular-nums; background: var(--panel-2); color: var(--muted); }
.mood.pos { background: color-mix(in srgb, var(--new) 18%, var(--panel)); color: var(--new); }
.mood.neg { background: color-mix(in srgb, var(--removed) 18%, var(--panel)); color: var(--removed); }
.stat-tile .mood { font-size: 20px; padding: 2px 10px; border-radius: 14px; }
.faction-split { display: flex; height: 12px; border-radius: 6px; overflow: hidden; margin: 12px 0 4px; background: var(--panel-2); }
.faction-split i { display: block; height: 100%; }
.cm-words { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin: 8px 0 4px; }
.cm-words span { color: var(--gold); }
.cm-threads td:first-child a { font-weight: 600; }
.cm-jump { margin: 12px 0 4px; }
#cm-activity, #cm-mood, #cm-classes, #cm-races, #cm-themes, #cm-threads, #cm-posters, #cm-how { scroll-margin-top: 70px; }
@media (max-width: 600px) {
  .hbar { grid-template-columns: 86px 1fr auto auto; gap: 6px; font-size: 13px; }
  .hbar .chg { display: none; }
  .hb-val { min-width: 56px; }
}
.more-links { display: flex; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }

/* the guides hub (/guides): a featured first guide, the leveling route beside a 3 x 3 class grid, then the topic guides */
.gh-feature, .gh-route, .gh-topic, .gh-class { color: var(--text); text-decoration: none; background: var(--panel); border-radius: 12px; overflow: hidden;
  transition: background .15s, transform .15s; }
.gh-feature:hover, .gh-route:hover, .gh-topic:hover, .gh-class:hover { text-decoration: none; background: #1b2232; }
.gh-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gh-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gh-body p { margin: 4px 0 0; color: #c3cad8; font-size: 14px; line-height: 1.55; }
.gh-body b { font-size: 16.5px; color: #fff; }
.gh-body .eyebrow { margin: 0; font-size: 11px; }
.gh-go { margin-top: auto; padding-top: 10px; color: var(--link); font-weight: 600; font-size: 14px; }
.gh-feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); margin: 18px 0 8px; min-height: 250px; }
.gh-feature .gh-body { padding: 26px 30px; justify-content: center; }
.gh-feature h2 { margin: 2px 0 4px; font-size: 26px; border: 0; padding: 0; }
.gh-feature p { font-size: 15.5px; max-width: 60ch; }
.gh-section { margin-top: 46px; }
.gh-sec-head h2 { margin: 0 0 2px; }
.gh-sec-head p { margin: 0 0 14px; font-size: 14px; }
.gh-level { display: grid; gap: 18px; }
.gh-route { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: 190px; }
.gh-route .gh-body { padding: 22px 28px; justify-content: center; }
.gh-route .gh-body b { font-size: 19px; }
.gh-classes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.gh-class { display: flex; align-items: center; gap: 18px; padding: 22px 24px; min-height: 104px; background: color-mix(in srgb, var(--cc) 7%, var(--panel)); }
.gh-class:hover { background: color-mix(in srgb, var(--cc) 14%, var(--panel)); transform: translateY(-1px); }
.gh-class img { border-radius: 10px; flex: none; width: 52px; height: 52px; }
.gh-class span { display: grid; gap: 5px; min-width: 0; }
.gh-class b { color: var(--cc); font-size: 18px; }
.gh-class small { color: #b7bfce; font-size: 14px; line-height: 1.45; }
.gh-topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.gh-topic { display: flex; flex-direction: column; }
.gh-topic .gh-art { aspect-ratio: 16 / 7; }
@media (max-width: 1000px) {
  .gh-classes { gap: 12px; }
  .gh-class { padding: 16px 18px; gap: 14px; }
}
@media (max-width: 760px) {
  .gh-feature { grid-template-columns: 1fr; }
  .gh-feature .gh-art { aspect-ratio: 16 / 7; }
  .gh-feature .gh-body { padding: 18px; }
  .gh-feature h2 { font-size: 21px; }
  .gh-route { grid-template-columns: 1fr; }
  .gh-route .gh-art { height: 150px; }
  .gh-route .gh-body { padding: 18px; }
  .gh-classes { grid-template-columns: 1fr 1fr; }
  .gh-class { padding: 12px; gap: 10px; }
  .gh-class img { width: 34px; height: 34px; }
  .gh-topics { grid-template-columns: 1fr; }
}
@media (max-width: 420px) { .gh-classes { grid-template-columns: 1fr; } }

/* the community page's class card (ratings from the forums) */
.cc-pick { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; margin: 12px 0; }
.cc-pick button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 6px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--panel); color: var(--muted); font: inherit; font-size: 12px; }
.cc-pick button img { border-radius: 7px; filter: saturate(.55) brightness(.8); transition: filter .15s; }
.cc-pick button:hover img, .cc-pick button.active img { filter: none; }
.cc-pick button.active { background: color-mix(in srgb, var(--cc) 16%, var(--panel)); color: var(--cc); font-weight: 650; }
.cc-card { display: grid; grid-template-columns: minmax(220px, 330px) minmax(0, 1fr); border-radius: 14px; overflow: hidden;
  background: radial-gradient(120% 90% at 0% 40%, color-mix(in srgb, var(--cc) 22%, transparent), transparent 60%), color-mix(in srgb, var(--cc) 5%, var(--panel)); }
.cc-art { display: flex; align-items: flex-end; justify-content: center; padding: 16px 0 0; }
.cc-art img { width: 100%; max-width: 300px; height: auto; display: block; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .5)); }
.cc-info { padding: 22px 26px 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cc-head { display: flex; align-items: center; gap: 14px; }
.cc-head img { border-radius: 10px; box-shadow: 0 4px 14px rgba(0, 0, 0, .4); }
.cc-head h3 { margin: 0; font-size: 34px; line-height: 1.1; color: var(--cc); letter-spacing: -.01em; }
.cc-roles { display: flex; gap: 6px; margin-top: 4px; }
.cc-roles span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 10px;
  background: rgba(255, 255, 255, .07); color: #d7dce6; }
.cc-factors { display: grid; gap: 7px; }
.cc-factor { display: grid; grid-template-columns: minmax(150px, 210px) auto 1fr; align-items: center; gap: 14px; font-size: 15.5px; font-weight: 600; color: #eef1f6; }
.cc-factor small { color: var(--muted); font-weight: 400; font-size: 11.5px; }
.dots5 { display: inline-flex; gap: 5px; }
.dots5 i { width: 15px; height: 15px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.dots5 i.on { background: var(--gold); box-shadow: 0 0 6px color-mix(in srgb, var(--gold) 45%, transparent); }
.dots5 i.half { background: linear-gradient(90deg, var(--gold) 50%, rgba(255, 255, 255, .16) 50%); }
.dots5 i.none { background: rgba(255, 255, 255, .06); }
.cc-talk b { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.cc-talk div { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-talk span { font-size: 13px; padding: 3px 9px; border-radius: 12px; background: color-mix(in srgb, var(--cc) 13%, var(--panel)); color: #e7ebf2; }
.cc-foot { margin: 0; }
@media (max-width: 900px) { .cc-pick { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .cc-card { grid-template-columns: 1fr; }
  .cc-art { height: 260px; overflow: hidden; align-items: flex-start; }
  .cc-art img { max-width: 220px; }
  .cc-info { padding: 16px; }
  .cc-head h3 { font-size: 26px; }
  .cc-factor { grid-template-columns: 1fr auto; gap: 8px; font-size: 14px; }
  .cc-factor small { display: none; }
}

/* spell pages: a part-spell's lead to its ability, the effect list and the links between spells */
.part-of { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 380px); gap: 20px; align-items: start; margin: 0 0 18px;
  padding: 18px 20px; border-radius: 12px; background: color-mix(in srgb, var(--gold) 7%, var(--panel)); }
.part-of p { margin: 6px 0 12px; font-size: 15px; line-height: 1.55; }
.part-of .eyebrow { margin: 0; }
.effects { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.effects li { line-height: 1.45; }
.spell-links { display: grid; gap: 6px; margin-top: 12px; }
.spell-links .muted { display: inline-block; min-width: 170px; }
@media (max-width: 760px) { .part-of { grid-template-columns: 1fr; } .spell-links .muted { display: block; min-width: 0; } }

/* the spell page: the tooltip beside the facts the spell has, then full-width sections */
.sp-top { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 20px; align-items: start; }
.sp-tip .wt { max-width: none; }
.sp-aura { margin-top: 10px; background: var(--panel); border-radius: 10px; padding: 12px 14px; }
.sp-aura p { margin: 4px 0 0; }
.sp-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.fact { background: var(--panel); border-radius: 10px; padding: 11px 14px; display: grid; gap: 3px; }
.fact span { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fact b { font-size: 15.5px; color: #fff; font-weight: 600; }
.fact small { color: var(--muted); font-weight: 400; font-size: 12px; }
.sp-side .spell-links { background: var(--panel); border-radius: 10px; padding: 12px 14px; }
.sp-section { margin-top: 28px; }
.sp-section > h2 { margin: 0 0 10px; }
.effects-table td { vertical-align: top; }
.effects-table td:first-child { width: 28px; }
.effects-table td:last-child { white-space: nowrap; color: var(--muted); }
.rank-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rank-chip { display: grid; gap: 1px; padding: 8px 14px; border-radius: 10px; background: var(--panel); color: var(--text); min-width: 100px; }
.rank-chip:hover { text-decoration: none; background: #1b2232; }
.rank-chip.current { background: color-mix(in srgb, var(--gold) 16%, var(--panel)); }
.rank-chip span { font-size: 12px; color: var(--muted); }
.rank-chip.missing { opacity: .55; }
@media (max-width: 760px) { .sp-top { grid-template-columns: 1fr; } .sp-facts { grid-template-columns: 1fr 1fr; } }

/* the races page */
.rc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 14px; }
.rc-col { background: color-mix(in srgb, var(--fc) 6%, var(--panel)); border-radius: 12px; padding: 16px 20px; }
.rc-col h3 { margin: 0 0 8px; color: var(--fc); }
.rc-list { margin: 0; padding-left: 20px; display: grid; gap: 12px; }
.rc-list li::marker { color: var(--gold); font-weight: 700; }
.rc-list p { margin: 3px 0 0; font-size: 14px; line-height: 1.55; color: #cfd5e1; }
/* table.list th is left-aligned; these grids centre their class columns under the class icons */
table.list.rc-grid th, table.list.rc-grid td, table.list.tr-grid th, table.list.tr-grid td { text-align: center; }
table.list.rc-grid th:first-child, table.list.rc-grid td:first-child, table.list.tr-grid th:first-child, table.list.tr-grid td:first-child,
table.list.tr-grid td:last-child, table.list.tr-grid th:last-child { text-align: left; }
.rc-grid th img, .tr-grid th img { display: block; margin: 0 auto; }
table.list.rc-grid thead th:not(:first-child), table.list.tr-grid thead th:not(:first-child):not(:last-child) { width: 64px; }   /* every class column the same */
.rc-grid td.yes, .tr-grid td.yes { color: var(--new); font-weight: 700; }
.tr-grid td .badge { display: block; width: fit-content; margin: 1px auto 0; font-size: 9.5px; padding: 0 5px; letter-spacing: .02em; }   /* under the tick, so the tick stays centred */
table.list.tr-grid td.yes { padding-top: 4px; padding-bottom: 4px; }
.rc-races { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.rc-race { background: color-mix(in srgb, var(--fc) 5%, var(--panel)); border-radius: 12px; padding: 16px 18px; scroll-margin-top: 70px; }
.rc-race header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rc-race h3 { margin: 0; font-size: 19px; }
.rc-side { color: var(--fc); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.rc-racials { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 10px; }
.rc-racials .small { color: #c3cad8; margin-top: 2px; line-height: 1.5; }

/* the trainers page */
.tr-finder h2 { margin-top: 0; }
.tr-q { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 16px; }
.tr-q .input { width: auto; }
.tr-answer { padding-left: 18px; display: grid; gap: 8px; }
.tr-answer .btn { margin-left: 6px; }
.tr-racial { display: inline-flex; gap: 5px; align-items: center; margin-right: 10px; white-space: nowrap; }
.tr-masters { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.tr-masters h3 { margin: 0 0 8px; }
.tr-master { background: var(--panel); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.tr-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.tr-teaches { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tr-teaches span { background: var(--panel-2); border-radius: 10px; padding: 2px 9px; font-size: 13px; }
.tr-zone { background: var(--panel); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; }
.tr-zone ul { margin: 6px 0 0; padding-left: 18px; columns: 2; column-gap: 20px; }
.tr-zone li { break-inside: avoid; }
@media (max-width: 760px) {
  .rc-cols, .tr-masters { grid-template-columns: 1fr; }
  .rc-races { grid-template-columns: 1fr; }
  .tr-zone ul { columns: 1; }
}

/* the travel planner */
.tv-form { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.tv-form label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.tv-form .input { width: 100%; font-size: 15px; text-transform: none; letter-spacing: 0; }
.tv-side { display: flex; background: var(--panel-2); border-radius: 8px; padding: 3px; }
.tv-side button { border: 0; background: none; color: var(--muted); padding: 7px 12px; border-radius: 6px; cursor: pointer; font: inherit; font-size: 13px; }
.tv-side button.active { background: var(--panel); color: #fff; font-weight: 600; }
.tv-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.tv-modes button { display: grid; gap: 2px; border: 0; border-radius: 10px; padding: 10px 14px; background: var(--panel); color: var(--text); cursor: pointer; font: inherit; text-align: left; }
.tv-modes button span { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.tv-modes button.active { background: color-mix(in srgb, var(--gold) 16%, var(--panel)); }
.tv-modes button.active b { color: var(--gold); }
.tv-result { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 18px; align-items: start; }
.tv-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tv-step { display: grid; grid-template-columns: 30px 1fr; gap: 10px; background: var(--panel); border-radius: 10px; padding: 10px 12px; line-height: 1.45; }
.tv-ic { font-size: 18px; line-height: 1.2; }
.tv-total { display: grid; gap: 2px; padding: 4px 2px 6px; }
.tv-total b { font-size: 24px; color: #fff; }
.tv-map { margin: 0 0 14px; }
.tv-map figcaption { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 4px; }
.tv-map-box { position: relative; border-radius: 10px; overflow: hidden; }
.tv-map-box img { display: block; width: 100%; height: auto; }
.tv-map-box svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tv-fly { fill: none; stroke: #f0c35a; stroke-width: 3; stroke-linejoin: round; filter: drop-shadow(0 0 2px #000); }
.tv-run { stroke: #fff; stroke-width: 3; stroke-dasharray: 6 5; filter: drop-shadow(0 0 2px #000); }
.tv-ship { stroke: #52c7ff; stroke-width: 3.5; filter: drop-shadow(0 0 2px #000); }
.tv-dock { fill: #52c7ff; stroke: #0b1020; stroke-width: 2; }
.tv-start circle { fill: #3ddc84; stroke: #0b1020; stroke-width: 3; }
.tv-end circle { fill: #ff6b6b; stroke: #0b1020; stroke-width: 3; }
.tv-nodes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.tv-nodes ul { padding-left: 18px; margin: 6px 0 0; display: grid; gap: 4px; }
@media (max-width: 860px) {
  .tv-form { grid-template-columns: 1fr; }
  .tv-form #tv-swap { justify-self: start; }
  .tv-result { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .tv-modes button { padding: 8px 10px; font-size: 13px; } }

/* the reputation page: uniform rows, one per faction; every reward the same chip */
.rep-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px; margin-bottom: 18px; }
.rep-top .panel { margin: 0; }
.rep-top h2 { margin: 0 0 10px; font-size: 18px; }
.rep-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rep-chips a { background: color-mix(in srgb, var(--new) 12%, var(--panel-2)); color: var(--new); padding: 5px 12px; border-radius: 14px; font-size: 13.5px; }
.rep-looks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.rep-look { display: grid; gap: 2px; background: var(--panel-2); border-radius: 8px; padding: 8px 10px; }
.rep-look .rep-item { background: none; padding: 0; }
.rep-look .rep-item { display: flex; min-width: 0; }
.rep-look .rep-item span, .rep-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rep-counts em { font-style: normal; }
.rep-group { margin-top: 26px; }
.rep-group > h2 { margin: 0 0 10px; }
.rep-row { background: var(--panel); border-radius: 12px; margin-bottom: 8px; scroll-margin-top: 70px; }
.rep-row > summary { display: grid; grid-template-columns: minmax(220px, 330px) 1fr auto; gap: 14px; align-items: center; padding: 14px 18px;
  cursor: pointer; list-style: none; }
.rep-row > summary::-webkit-details-marker { display: none; }
.rep-row > summary::after { content: '▸'; color: var(--muted); grid-column: 4; transition: transform .15s; }
.rep-row[open] > summary::after { transform: rotate(90deg); }
.rep-row > summary:hover { background: #1b2232; border-radius: 12px; }
.rep-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rep-name { font-weight: 700; font-size: 16px; color: #fff; }
.rep-counts { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--muted); }
.rep-counts span { display: inline-flex; align-items: center; gap: 5px; }
.rep-counts span.none { opacity: .35; }
.rep-counts i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.rep-counts b { color: var(--text); font-variant-numeric: tabular-nums; }
.rep-sum { justify-self: end; white-space: nowrap; }
.rep-body { padding: 0 18px 16px; }
.rep-body > p { margin: 0 0 12px; font-size: 14px; }
.rep-rank { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .05); }
.rep-rank > b { padding-top: 5px; }
.rep-items { display: flex; flex-wrap: wrap; gap: 6px; }
.rep-item { display: inline-flex; align-items: center; gap: 7px; background: var(--panel-2); border-radius: 8px; padding: 4px 10px 4px 5px; font-size: 13.5px; }
.rep-item:hover { text-decoration: none; background: #242d42; }
.rep-item small { color: var(--muted); font-size: 11.5px; }
.rep-item.is-new::after, .rep-dot { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--new); }
@media (max-width: 900px) {
  .rep-top { grid-template-columns: 1fr; }
  .rep-row > summary { grid-template-columns: 1fr auto; }
  .rep-counts { grid-column: 1 / -1; grid-row: 2; }
  .rep-sum { grid-column: 1 / -1; grid-row: 3; justify-self: start; }
  .rep-row > summary::after { grid-column: 2; grid-row: 1; }
  .rep-rank { grid-template-columns: 1fr; gap: 6px; }
  .rep-counts span.none { display: none; }
  .rep-counts em { display: none; }
  .rep-counts { flex-wrap: nowrap; gap: 12px; }
  .rep-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* the new finds page (reuses the reputation page's chips and rows) */
.fd-covered { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.fd-card { background: var(--panel); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.fd-thumb { position: relative; display: block; aspect-ratio: 16 / 8; background: #10131b; overflow: hidden; }
.fd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.fd-thumb:hover img { transform: scale(1.03); }
.fd-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8, 10, 15, .55), rgba(8, 10, 15, 0) 45%); }
.fd-play { position: absolute; left: 50%; top: 50%; width: 46px; height: 32px; margin: -16px 0 0 -23px; border-radius: 9px; background: rgba(0, 0, 0, .7); z-index: 1; transition: background .2s; }
.fd-play::after { content: ''; position: absolute; left: 19px; top: 9px; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent #fff; }
.fd-thumb:hover .fd-play { background: #e00; }
.fd-chan { position: absolute; left: 8px; bottom: 7px; z-index: 1; max-width: calc(100% - 100px); font-size: 12px; font-weight: 600; color: #fff; background: rgba(0, 0, 0, .7); padding: 2px 7px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-count { position: absolute; right: 8px; bottom: 7px; z-index: 1; font-size: 12px; font-weight: 600; color: #fff; background: rgba(0, 0, 0, .7); padding: 2px 7px; border-radius: 5px; }
.fd-thing { display: flex; gap: 10px; align-items: center; padding: 12px 14px 0; color: var(--text); }
.fd-thing:hover { text-decoration: none; }
.fd-thing:hover b { text-decoration: underline; }
.fd-thing .icon { flex: none; }
.fd-thing span { display: grid; min-width: 0; }
.fd-thing b { font-size: 15.5px; color: var(--link); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-thing small { color: var(--muted); font-size: 12.5px; }
.fd-card ul { margin: 10px 14px 0; padding-left: 18px; display: grid; gap: 5px; font-size: 14px; }
.fd-card > p { margin: 8px 14px 0; }
.fd-card > :last-child { margin-bottom: 14px; }
.fd-card > p.fd-latest { font-size: 13.5px; line-height: 1.4; margin-top: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fd-card > p.fd-credit { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.fd-home { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fd-links { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.fd-links a { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 10px; background: var(--panel); color: var(--text); }
.fd-links a:hover { text-decoration: none; background: var(--panel-2, #1d2230); }
.fd-links img { width: 36px; height: 36px; border-radius: 7px; box-shadow: 0 0 0 1px #000; flex: none; }
.fd-links span { display: grid; min-width: 0; }
.fd-links b { color: #fff; font-weight: 650; }
.fd-links small { color: var(--muted); font-size: 12.5px; }
@media (max-width: 1100px) { .fd-home { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fd-links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .fd-home { grid-template-columns: 1fr; } .fd-home .fd-card:nth-child(n+5) { display: none; } .fd-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fd-links a { padding: 10px; gap: 10px; } .fd-links img { width: 32px; height: 32px; } .fd-links b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fd-links a:last-child:nth-child(odd) { grid-column: span 2; } }
.fx-list { display: grid; gap: 6px; }
.fx-row { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 14px; align-items: center; background: var(--panel); border-radius: 10px; padding: 8px 12px; }
.fx-row .rep-item { background: none; padding: 0; min-width: 0; }
.fx-row .rep-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-text { font-size: 14px; color: #cfd5e1; line-height: 1.45; }
.fd-group { margin-top: 18px; }
.fd-group h3 { margin: 0 0 8px; }
.fd-bonus { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) { .fx-row { grid-template-columns: 1fr; gap: 4px; } .fd-covered:not(.fd-home) { grid-template-columns: 1fr; } }
.vid-box { display: grid; gap: 8px; }
.vid-row { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; }
.vid-row a { color: var(--text); }
.vid-row a:hover { text-decoration: none; }
.vid-row a:hover b { color: var(--link); }
.vid-row small a.yt-by { color: var(--link); }
.vid-note { margin: 4px 0 0; }
.yt-by { font-weight: 600; }
.vid-box img { border-radius: 6px; display: block; width: 120px; height: 68px; object-fit: cover; }
.vid-box span { display: grid; gap: 2px; min-width: 0; }
.vid-box b { font-size: 14px; line-height: 1.35; }
.vid-box small { color: var(--muted); }

/* ---- Professions and camping (pages/professions.js) ---- */
.pf-chg { color: var(--changed); }
.pf-camp-banner { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; margin: 18px 0 8px; padding: 18px 20px; border-radius: 12px;
  background: linear-gradient(120deg, rgba(255, 140, 50, .16), rgba(16, 22, 40, .88) 60%); color: var(--text); }
.pf-camp-banner:hover { text-decoration: none; background: linear-gradient(120deg, rgba(255, 140, 50, .24), rgba(16, 22, 40, .88) 60%); }
.pf-camp-banner h2 { margin: 6px 0 4px; }
.pf-camp-banner p { margin: 0; color: #cfd5e1; font-size: 14px; max-width: 720px; }
.pf-camp-icons { display: grid; grid-template-columns: repeat(6, 40px); gap: 6px; }
.pf-camp-icons img { border-radius: 7px; box-shadow: 0 0 0 1px #000; }
.pf-group h2 { margin: 26px 0 10px; }
.pf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.pf-card { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border-radius: 10px; background: var(--panel); color: var(--text); }
.pf-card:hover { text-decoration: none; background: var(--panel-2); }
.pf-card > div { display: grid; gap: 3px; min-width: 0; }
.pf-card b { font-size: 16px; color: #fff; }
.pf-card em { font-style: normal; }
.pf-counts { font-size: 13px; color: var(--muted); }
.pf-card small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.pf-head { display: flex; gap: 16px; align-items: center; }
.pf-head h1 { margin: 0 0 4px; }
.pf-head .lead { margin: 0; }
.pf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 16px 0; }
.pf-stats > div { background: var(--panel); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; color: var(--muted); }
.pf-stats b { display: block; font-size: 20px; color: #fff; }
.pf-stats .pos b { color: var(--new); }
.pf-stats .pf-chg b { color: var(--changed); }
.pf-camp-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.pf-campcard { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--panel); color: var(--text); }
.pf-campcard:hover { text-decoration: none; background: var(--panel-2); }
.pf-campcard span { display: grid; }
.pf-campcard small { color: var(--muted); }
.pf-tools { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; justify-content: space-between; }
.pf-tools .input { width: 320px; max-width: 100%; }
.pf-tools .tabs { margin: 0; border: 0; }
.pf-legend { margin: 10px 0; }
.sk-o { color: #ff8040; } .sk-y { color: #ffff00; } .sk-g { color: #40c040; } .sk-x { color: #9d9d9d; }
.pf-list-head, .pf-row { display: grid; grid-template-columns: 132px minmax(200px, 1.1fr) minmax(220px, 1.3fr) minmax(170px, .8fr); gap: 14px; }
.pf-list-head { padding: 0 12px 6px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pf-row { align-items: start; background: var(--panel); border-radius: 10px; padding: 10px 12px; margin-bottom: 6px; }
.pf-skill { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; font-variant-numeric: tabular-nums; font-size: 13px; padding-top: 9px; }
.pf-skill b { font-weight: 650; }
.pf-name { min-width: 0; }
.pf-name > a { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.pf-name > a .icon { flex: none; }
.pf-badges { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 0 48px; }
.pf-badges:empty { display: none; }
.pf-fx { margin: 4px 0 0 48px; font-size: 13px; color: #cfd5e1; }
.pf-was { margin: 4px 0 0 48px; font-size: 12.5px; color: var(--changed); }
.pf-reags { display: flex; flex-wrap: wrap; gap: 4px 10px; align-content: flex-start; padding-top: 7px; min-width: 0; }
.pf-reag { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--text); }
.pf-reag b { color: #fff; }
.pf-needs { flex-basis: 100%; }
.pf-src { display: grid; gap: 3px; font-size: 13px; padding-top: 7px; min-width: 0; }
.pf-src .ent { display: inline-flex; gap: 6px; align-items: center; }
.pf-trainers h3 { margin: 16px 0 8px; }
.pf-tr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px; }
.pf-tr { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--panel); font-size: 13.5px; }
.pf-tr .badge { justify-self: start; }
@media (max-width: 900px) {
  .pf-list-head { display: none; }
  .pf-row { grid-template-columns: 1fr; gap: 6px; }
  .pf-skill { order: 2; grid-template-columns: repeat(4, 44px); padding: 0 0 0 48px; }
  .pf-name { order: 1; }
  .pf-reags, .pf-src { order: 3; padding: 0 0 0 48px; }
  .pf-src { order: 4; }
  .pf-camp-banner { grid-template-columns: 1fr; }
}
.cp-rules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 0 8px; }
.cp-rules > div { display: flex; gap: 12px; padding: 14px; border-radius: 10px; background: var(--panel); font-size: 14px; line-height: 1.45; }
.cp-rules b { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 140, 50, .2); color: #ffb070; }
.cp-kits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cp-kit { display: flex; gap: 14px; padding: 14px; border-radius: 10px; background: var(--panel); }
.cp-kit > div { display: grid; gap: 4px; align-content: start; }
.cp-kit span { color: var(--muted); font-size: 13px; }
.cp-reags { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; }
.cp-jump a { display: inline-flex; gap: 6px; align-items: center; }
.cp-sec { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px 18px; margin-bottom: 18px; scroll-margin-top: 80px; }
.cp-sec-head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.cp-sec-title { display: flex; gap: 12px; align-items: center; color: #fff; }
.cp-sec-title:hover { text-decoration: none; color: var(--link); }
.cp-sec-title h3 { margin: 0; font-size: 19px; }
.cp-sec-more { margin-left: auto; font-size: 14px; }
.cp-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cp-tier { display: grid; gap: 8px; align-content: start; }
.cp-tier-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.cp-none { margin: 0; padding: 12px; border-radius: 10px; border: 1px dashed var(--line); }
.cp-feat { padding: 12px; border-radius: 10px; background: rgba(255, 255, 255, .04); height: 100%; box-sizing: border-box; }
.cp-feat-name { display: flex; gap: 10px; align-items: center; }
.cp-feat-name:hover { text-decoration: none; }
.cp-feat-name span { display: grid; }
.cp-feat-name small { color: var(--muted); font-weight: 400; }
.cp-feat p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.45; color: #cfd5e1; }
.cp-feat p.muted { color: var(--muted); }
@media (max-width: 1000px) {
  .cp-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-kits { grid-template-columns: 1fr; }
  .cp-tiers { grid-template-columns: 1fr; }
  .cp-sec-more { margin-left: 0; }
}
@media (max-width: 600px) { .cp-rules { grid-template-columns: 1fr; } }
.cr-box { display: grid; gap: 6px; }
.cr-row { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.cr-used { display: flex; flex-wrap: wrap; gap: 6px 14px; }

/* ---- Consumables (pages/consumables.js) ---- */
.cs-bar { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin: 16px 0 6px; }
.cs-level { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); }
.cs-level .input { width: 90px; }
.cs-tabs { margin: 0; flex: 1; }
.cs-group { margin-top: 22px; }
.cs-group h2 { margin: 0 0 8px; font-size: 18px; }
.cs-item { display: grid; grid-template-columns: minmax(220px, 300px) 1fr auto; gap: 14px; align-items: center; background: var(--panel); border-radius: 10px; padding: 10px 12px; margin-bottom: 6px; }
.cs-item > a { display: flex; gap: 10px; align-items: center; }
.cs-item > a span { display: grid; min-width: 0; }
.cs-item > a small { color: var(--muted); font-weight: 400; }
.cs-item p { margin: 0; font-size: 13.5px; color: #cfd5e1; line-height: 1.45; }
.cs-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; }
.cs-tag { font-size: 12px; padding: 2px 8px; border-radius: 6px; background: var(--panel-2); color: var(--text); white-space: nowrap; }
a.cs-tag:hover { text-decoration: none; color: var(--link); }
.cs-also { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 6px 0 0 12px; }
.cs-all { margin: 6px 0 0 12px; font-size: 13px; }
.cs-all summary { cursor: pointer; color: var(--link); }
.cs-all-list { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; }
@media (max-width: 760px) { .cs-item { grid-template-columns: 1fr; gap: 6px; } .cs-tags { justify-content: flex-start; } }

/* ---- Forever for Classic veterans (pages/veterans.js) ---- */
.vt-banner { display: flex; gap: 6px 14px; align-items: baseline; flex-wrap: wrap; margin: 18px 0 4px; padding: 14px 18px; border-radius: 12px;
  background: linear-gradient(120deg, rgba(240, 200, 90, .16), rgba(16, 22, 40, .88) 65%); color: var(--text); }
.vt-banner:hover { text-decoration: none; background: linear-gradient(120deg, rgba(240, 200, 90, .24), rgba(16, 22, 40, .88) 65%); }
.vt-banner b { color: #fff; font-size: 16px; }
.vt-banner span { color: #cfd5e1; font-size: 14px; }
.vt-banner em { margin-left: auto; font-style: normal; color: var(--link); font-size: 14px; white-space: nowrap; }
.vt-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.vt-jump a { padding: 6px 12px; border-radius: 8px; background: var(--panel); color: var(--text); font-size: 14px; }
.vt-jump a:hover { text-decoration: none; background: var(--panel-2); }
.vt-section { scroll-margin-top: 80px; }
.vt-section h2 { margin: 28px 0 10px; }
.vt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vt-card { display: flex; flex-direction: column; padding: 16px 18px; border-radius: 12px; background: var(--panel); }
.vt-card h3 { margin: 0 0 6px; font-size: 16.5px; color: #fff; }
.vt-card p { margin: 0 0 12px; color: #cfd5e1; font-size: 14.5px; line-height: 1.5; }
.vt-card footer { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 13.5px; }
.vt-src { margin-left: auto; font-size: 12px; padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.vt-client { background: rgba(61, 220, 132, .12); color: var(--new); }
.vt-official { background: rgba(80, 160, 255, .14); color: #7cb8ff; }
.vt-both { background: rgba(240, 200, 90, .14); color: #f0c85a; }
@media (max-width: 760px) { .vt-grid { grid-template-columns: 1fr; } .vt-banner em { margin-left: 0; } }

/* ---- Quests by zone (pages/quests.js) ---- */
.qz-sec h2 { margin: 26px 0 10px; }
.qz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.qz-card { display: grid; gap: 3px; padding: 12px 14px; border-radius: 10px; background: var(--panel); color: var(--text); }
.qz-card:hover { text-decoration: none; background: var(--panel-2); }
.qz-card b { color: #fff; }
.qz-card span { font-size: 13px; color: var(--muted); }
.qz-card small { font-size: 12px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.qz-card i { font-style: normal; }
.qz-q { display: grid; grid-template-columns: 58px 1fr; gap: 14px; background: var(--panel); border-radius: 10px; padding: 12px 14px; margin-bottom: 6px; }
.qz-lv { display: grid; align-content: start; justify-items: center; }
.qz-lv b { font-size: 20px; color: #ffd100; }
.qz-lv small { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.qz-main { min-width: 0; }
.qz-main h3 { margin: 0 0 4px; font-size: 15.5px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.qz-side { font-style: normal; font-size: 12px; font-weight: 600; }
.qz-main p { margin: 0 0 6px; font-size: 13.5px; color: #cfd5e1; line-height: 1.45; }
.qz-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; }
.qz-meta em { font-style: normal; color: var(--muted); margin-right: 4px; }
.qz-who { display: inline-flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; }
.qz-rew { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin-top: 6px; }
@media (max-width: 600px) { .qz-q { grid-template-columns: 1fr; gap: 4px; } .qz-lv { justify-items: start; grid-auto-flow: column; gap: 8px; align-items: baseline; } }

/* ---- Vendors (pages/vendors.js, and "Sold by" on item pages) ---- */
.vd-tabs { margin-top: 14px; }
.vd-q { width: 420px; max-width: 100%; margin-bottom: 12px; }
.vd-item { background: var(--panel); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; }
.vd-item-name { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; font-weight: 600; }
.vd-line { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 4px 0; font-size: 13.5px; border-top: 1px solid rgba(255, 255, 255, .04); }
.vd-line:first-of-type { border-top: 0; }
.vd-who b { color: #fff; font-weight: 600; }
.vd-side { font-size: 12px; font-weight: 600; }
.vd-price { font-variant-numeric: tabular-nums; }
.vd-more { display: inline-block; margin-top: 4px; font-size: 13px; }
.vd-group { background: var(--panel); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; }
.vd-group summary { cursor: pointer; }
.vd-group .vd-item { background: var(--panel-2); }
.vd-vendor { padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, .05); }
.vd-sells { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; }
.vd-box { display: grid; gap: 2px; }
.vd-box p { margin: 6px 0 0; }

/* ---- Privacy popup (consent.js) ---- */
.cz { position: fixed; left: 16px; bottom: 16px; z-index: 2147483000; width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto;
  padding: 18px 20px; border-radius: 14px; background: #121a30; border: 1px solid rgba(240, 200, 90, .35); box-shadow: 0 18px 50px rgba(0, 0, 0, .55); color: var(--text); }
.cz-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.cz-head h2 { margin: 0; font-size: 17px; color: #fff; }
.cz p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: #cfd5e1; }
.cz-choices { display: grid; gap: 8px; margin-bottom: 12px; }
.cz-choices[hidden] { display: none; }
.cz-row { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .04); cursor: default; }
label.cz-row { cursor: pointer; }
.cz-row > div { display: grid; gap: 2px; }
.cz-row b { color: #fff; font-size: 14px; }
.cz-row small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.cz-always { font-size: 12px; color: var(--new); white-space: nowrap; }
.cz-switch { appearance: none; flex: none; width: 40px; height: 22px; border-radius: 11px; background: #3a4258; position: relative; cursor: pointer; transition: background .15s; margin: 0; }
.cz-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
.cz-switch:checked { background: #3ddc84; }
.cz-switch:checked::after { left: 21px; }
.cz-switch:focus-visible { outline: 2px solid var(--gold, #f0c85a); outline-offset: 2px; }
.cz-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cz-buttons .btn { justify-content: center; text-align: center; min-height: 38px; box-sizing: border-box; }
.cz-buttons [hidden] { display: none; }
@media (max-width: 600px) { .cz { left: 8px; right: 8px; bottom: 8px; width: auto; padding: 16px; } .cz-buttons { grid-template-columns: 1fr; } }
.badge.community { background: rgba(160, 120, 255, .16); color: #b9a2ff; }
.adm-post { display: grid; gap: 10px; max-width: 760px; }
.adm-post label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.adm-post-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.adm-post textarea { resize: vertical; font: inherit; }
@media (max-width: 600px) { .adm-post-row { grid-template-columns: 1fr; } }

/* ---- Tier lists (pages/tiers.js) ---- */
.tl-tabs { margin: 16px 0 8px; align-items: center; }
.tl-soon { margin-left: auto; font-size: 12.5px; color: var(--muted); padding: 4px 10px; }
.tl-board { display: grid; gap: 4px; margin: 14px 0 24px; }
.tl-row { display: grid; grid-template-columns: 64px 1fr; min-height: 64px; border-radius: 10px; overflow: hidden; background: var(--panel); }
.tl-tier { display: grid; place-items: center; font-size: 26px; font-weight: 800; color: #1a1205; }
.tl-wait .tl-tier { background: #3a4258; color: #cfd5e1; }
.tl-specs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 10px; }
.tl-empty { padding-left: 4px; }
.tl-wait-note { flex-basis: 100%; margin: 0 0 2px; }
.tl-chip { display: inline-flex; gap: 8px; align-items: center; padding: 5px 10px 5px 5px; border-radius: 8px; background: rgba(255, 255, 255, .06); color: var(--text); }
.tl-chip:hover { text-decoration: none; background: rgba(255, 255, 255, .09); }
.tl-chip img { border-radius: 6px; box-shadow: 0 0 0 1px #000; }
.tl-chip span { display: grid; line-height: 1.2; }
.tl-chip b { color: var(--cc); font-size: 14px; }
.tl-chip small { color: var(--muted); font-size: 11.5px; }
.tl-wait .tl-chip { opacity: .75; }
.tl-wait .tl-chip[data-count]::after { content: attr(data-count); font-size: 11px; color: var(--muted); margin-left: 4px; }
.tl-logs h2, .tl-how h2 { margin-top: 26px; }
.tl-bars { display: grid; gap: 6px; }
.tl-bar { display: grid; grid-template-columns: 130px 1fr 44px 110px; gap: 10px; align-items: center; }
.tl-bar-name { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.tl-bar-name img { border-radius: 4px; }
.tl-bar-track { height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.tl-bar-track i { display: block; height: 100%; border-radius: 5px; opacity: .85; }
@media (max-width: 600px) { .tl-row { grid-template-columns: 44px 1fr; } .tl-tier { font-size: 20px; } .tl-soon { margin-left: 0; }
  .tl-bar { grid-template-columns: 100px 1fr 36px; } .tl-bar small { display: none; } }
.tl-wait .tl-chip { padding: 3px 8px 3px 3px; }
.tl-wait .tl-chip img { width: 22px; height: 22px; }
.tl-wait .tl-chip small { display: none; }
.tl-wait .tl-chip b { font-size: 13px; }

.tl-views { display: inline-flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--panel); margin: 4px 0 10px; flex-wrap: wrap; }
.tl-views a { padding: 7px 14px; border-radius: 7px; color: var(--muted); font-weight: 600; font-size: 14px; }
.tl-views a:hover { text-decoration: none; color: var(--text); }
.tl-views a.on { background: var(--gold-2, #d9a93f); color: #1a1205; }
.tl-maker .tl-chip { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.tl-maker .tl-row { transition: background .12s; }
.tl-maker .tl-row.tl-over { background: rgba(240, 200, 90, .12); }
.tl-pool .tl-tier { background: #3a4258; color: #cfd5e1; }
.tl-chip.tl-dragging { opacity: .35; }
.tl-chip.tl-picked { background: rgba(240, 200, 90, .25); }
.tl-ghost { position: fixed; left: 0; top: 0; z-index: 3000; pointer-events: none; opacity: .92; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); cursor: grabbing; }
.tl-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: -12px 0 10px; }
.tl-status { color: var(--new); margin-left: 6px; }
@media (max-width: 600px) { .tl-views { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; box-sizing: border-box; }
  .tl-views a { text-align: center; padding: 7px 4px; font-size: 12.5px; } }