/* 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 {
  --hdr-h: 59px;   /* the sticky header's height, with the menu row under it when it shows (app.js measures it) */
  /* 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, textarea { font: inherit; color: inherit; }   /* textarea too: without it, text boxes on a dark background wrote in the browser's dark default */
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, .97);   /* solid, no backdrop-filter: a blur under a sticky bar is redone on every scroll frame */
  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: #121a2e;   /* solid: nothing shows through */
  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; }
/* The sidebar (sidebar.js reserves it, sidebarbox.js fills it): from a 1280 px window the page becomes one centred container,
   up to 1400 px, with the main column and a 350 px column 32 px beside it (position: absolute in the room the padding keeps,
   so nothing moves as it fills; its top is set level with the page title). Below 1280 px: the news widget after the content,
   in a fixed-height box reserved as the page draws (.side-below). */
.app.has-side { max-width: 1400px; padding-right: 402px; min-height: 560px; }   /* a 350 px sidebar (owner, 7 Oct 2026) + 32 px gap + 20 px edge */
/* (an item page's fact box beside the floated 3D picture: in the narrower main column its labels take only their own width) */
.app.has-side .detail .kv { grid-template-columns: max-content minmax(0, 1fr); }
.app.has-side .item-model { width: 260px; }
.fdb-side { display: none; font-size: 13px; line-height: 1.4; }
.app.has-side + .fdb-side { display: block; position: absolute; width: 350px; left: calc(50% + min(50%, 700px) - 370px); }
.app.side-below + .fdb-side { display: block; width: 100%; max-width: 1280px; margin: -24px auto 0; padding: 0 20px 32px; height: 440px; }
.fdb-side-in { display: grid; gap: 24px; align-content: start; }
.fdb-side.stick .fdb-side-in { position: sticky; top: calc(var(--hdr-h, 59px) + 22px); }
.fdb-side.below .fdb-side-in { max-width: 640px; }
.fs-sec { background: var(--panel-solid); border: 1px solid var(--line); border-radius: 4px; padding: 0 14px 14px; }
.fs-sec[hidden] { display: none; }
.fs-head { display: flex; align-items: flex-end; gap: 10px; margin: 0 -14px 14px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.fs-head h2, .fs-tab { margin: 0 0 -1px; padding: 13px 0 9px; border: 0; border-bottom: 2px solid transparent; background: none;
  font-family: inherit; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.fs-head h2 { border-bottom-color: var(--gold); }
.fs-tab { color: var(--muted); cursor: pointer; }
.fs-tab:hover { color: #fff; }
.fs-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--gold); }
.fs-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.fs-bar { padding-bottom: 10px; color: var(--line); font-size: 13px; line-height: 16px; }
.fs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fs-list[hidden] { display: none; }
.fs-item { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center; height: 52px; color: var(--text); }
.fs-item.num { grid-template-columns: 24px minmax(0, 1fr); }
.fs-item.fix { grid-template-columns: minmax(0, 1fr); }
.fs-item:hover { text-decoration: none; }
.fs-item:hover .fs-t { color: #fff; text-decoration: underline; }
.fs-thumb { display: block; width: 72px; height: 48px; border-radius: 3px; overflow: hidden; background: #05070c; border: 1px solid var(--line); }
.fs-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fs-n { font-size: 22px; font-weight: 800; line-height: 1; color: var(--gold); text-align: center; font-variant-numeric: tabular-nums; }
.fs-tt { display: grid; gap: 2px; min-width: 0; }
.fs-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; line-height: 17px; }
.fs-t b { color: #3fc06c; font-weight: 600; }
.fs-tt time { color: var(--muted); font-size: 11.5px; line-height: 15px; }
.fs-more { display: inline-block; margin-top: 12px; font-size: 12.5px; }
.fs-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 0; color: var(--text); }
.fs-card:first-of-type { padding-top: 0; }
.fs-card + .fs-card { border-top: 1px solid var(--line); }
.fs-card:last-child { padding-bottom: 0; }
.fs-card:hover { text-decoration: none; }
.fs-card:hover b { text-decoration: underline; }
.fs-frame { display: block; width: 44px; height: 44px; padding: 3px; border-radius: 4px; background: #05070c; border: 1px solid var(--qc, #5b6276);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .8); }
.fs-frame img { display: block; width: 36px; height: 36px; border-radius: 2px; }
.fs-frame.b2 { --qc: var(--q2, #1eff00); } .fs-frame.b3 { --qc: var(--q3, #0070dd); } .fs-frame.b4 { --qc: var(--q4, #a335ee); } .fs-frame.b5 { --qc: var(--q5, #ff8000); }
.fs-txt { display: grid; gap: 1px; min-width: 0; }
.fs-txt b { font-size: 13.5px; font-weight: 650; }
.fs-txt span { color: var(--muted); font-size: 12.5px; }
.fs-support p { margin: 0 0 10px; color: var(--muted); }
.fs-coffee { font-weight: 600; color: #ffdd00; }
/* Related (sidecontext.js): what the page is about, a few short lines, with framed game icons */
.fs-rel h2 { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fs-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fs-row { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 32px; }
.fs-row.noic { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.fs-ic { display: block; width: 32px; height: 32px; padding: 3px; border-radius: 4px; background: #05070c; border: 1px solid var(--qc, #5b6276);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .8); }
.fs-ic img { display: block; width: 24px; height: 24px; border-radius: 2px; }
.fs-rt { min-width: 0; line-height: 18px; overflow-wrap: anywhere; }
.fs-k { display: block; color: var(--muted); font-size: 11.5px; line-height: 15px; }
.fs-row.fs-lbl { margin-bottom: -4px; }
.fs-sub { color: var(--muted); font-size: 12px; }
.fs-fv { color: #3fc06c; font-size: 12px; }
.fs-ex { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); font-size: 12px; }
.fs-pieces { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.fs-mi { display: inline-block; width: 20px; height: 20px; padding: 1px; margin-right: 4px; vertical-align: -5px; border-radius: 3px; background: #05070c;
  border: 1px solid var(--qc, #5b6276); }
.fs-pieces .fs-mi { width: 26px; height: 26px; margin: 0; vertical-align: 0; }
.fs-ic.b2, .fs-mi.b2 { --qc: var(--q2, #1eff00); } .fs-ic.b3, .fs-mi.b3 { --qc: var(--q3, #0070dd); } .fs-ic.b4, .fs-mi.b4 { --qc: var(--q4, #a335ee); } .fs-ic.b5, .fs-mi.b5 { --qc: var(--q5, #ff8000); }
.fs-cd { font-variant-numeric: tabular-nums; color: var(--gold); }
.fs-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--muted); vertical-align: 1px; }
.fs-dot.st-up { background: #3fc06c; } .fs-dot.st-down { background: #e0453a; } .fs-dot.st-flaky { background: #f0c35a; }
.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; } }
/* screenshots on a message (pages/info.js screenshotPicker) */
.contact-shots { display: grid; gap: 8px; padding: 12px; border: 1px dashed var(--line, rgba(255, 255, 255, .18)); border-radius: 8px; }
.contact-shots.drag { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, transparent); }
.contact-shots-title { font-weight: 600; font-size: 14px; }
.contact-shots-title .muted { font-weight: 400; }
.contact-shots-list { display: flex; flex-wrap: wrap; gap: 10px; }
.contact-shots-list:empty { display: none; }
.contact-shot { position: relative; margin: 0; width: 132px; }
.contact-shot img { display: block; width: 132px; height: 92px; object-fit: cover; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .15); background: #000; }
.contact-shot figcaption { margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-shot-x { position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .75); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.contact-shot-x:hover, .contact-shot-x:focus-visible { background: #b3261e; }
.contact-shots-add { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.contact-shots-err { margin: 0; color: #ff8a80; font-size: 13.5px; }
.contact-shots-err:empty { display: none; }
.contact-shots-note { margin: 0; }
@media (max-width: 480px) { .contact-shot, .contact-shot img { width: calc(50vw - 40px); } .contact-shot img { height: auto; aspect-ratio: 4 / 3; } }
/* a message's screenshots in the admin inbox (pages/me.js renderMessages) */
.msg-shots { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 8px; }
.msg-shot { padding: 0; border: 1px solid rgba(255, 255, 255, .15); border-radius: 6px; background: #000; cursor: zoom-in; overflow: hidden; }
.msg-shot img { display: block; width: 160px; height: 100px; object-fit: cover; }
.msg-lb .ps-lb-btn { font-size: 28px; line-height: 1; }
/* 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; }
.msg-actions { flex-wrap: wrap; align-items: center; }
.msg-reply { margin: 10px 0 0; padding: 6px 0 0 12px; border-left: 2px solid var(--teal); }
.msg-reply .msg-body { margin: 4px 0 0; }
.msg-reply.in { border-left-color: var(--gold); margin-left: 16px; }   /* their answer by email (backend/inbound_mail.py) */
.msg-reply details { margin-top: 4px; }
.msg-unsorted { margin-bottom: 16px; }
.msg-unsorted > h3 { margin: 0 0 6px; }
.msg-unsorted .msg { border-left: 3px solid var(--gold); }
.msg-reply-form { margin-top: 10px; display: grid; gap: 6px; }
.msg-reply-form textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 8px; border-radius: 6px; background: var(--bg, #0d1220); color: inherit; border: 1px solid rgba(255,255,255,.18); resize: vertical; }
/* 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 .hero-logo { margin: 0 0 6px; border-radius: 0; }   /* the home page's hero in the server's version (main.py home_hero), as the app draws it */
.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.ann { background: rgba(240, 195, 90, .15); color: var(--gold); cursor: help; }   /* a change Blizzard announced that the client doesn't have yet (races.json ann) */
.rc-gone { opacity: .75; }
.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; }

/* ---- in-page ways on (UX pass, Oct 2026): rows that open their link (app.js .click-row), the class and profession
   switchers, "Back to results" on items, the items list while it filters, other dungeons for these levels ---- */
.click-row { cursor: pointer; }
table.list tr.click-row:hover td { background: rgba(240, 195, 90, .05); }
/* Never a pointer without an action (tools/audit_clicks.mjs; Clarity's dead clicks): the tab, filter or view that is already
   showing does nothing when clicked, so it doesn't look clickable; a table header shows a pointer only when it sorts
   (th[data-k]: items); a disabled button doesn't either. Taps on controls never wait for a double-tap zoom. */
:is([role="tab"][aria-selected="true"], [role="tab"].active, .tabs .active, .dm-tabs button.active, .filters > button.active, [aria-current="page"]:not(a)) { cursor: default; }
button:disabled, .btn:disabled, .btn[aria-disabled="true"] { cursor: default; }
/* a link to a part of a page (#gt-f-sr) lands with that part below the fixed header, not under it (any page; rules that set
   their own margin win: :where has no weight) */
:where(#app [id]) { scroll-margin-top: calc(var(--hdr-h, 59px) + 12px); }
a, button, label, summary, select, input, [role="button"], [role="tab"], .click-row { touch-action: manipulation; }
#results.busy { opacity: .55; transition: opacity .1s; pointer-events: none; }
.back-results { margin: -6px 0 10px; }
.it-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 12px; }
.it-quick > span { margin-right: 4px; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
.it-quick a { padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text); font-size: 13.5px; }
.it-quick a:hover { text-decoration: none; border-color: var(--gold-2, var(--gold)); }
.it-quick a.on { border-color: var(--gold); color: var(--gold); }
.page-switch { display: flex; align-items: center; gap: 4px; margin: -4px 0 12px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.page-switch::-webkit-scrollbar { display: none; }
.page-switch-label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; margin-right: 6px; flex: none; }
.page-switch a { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 3px; border-radius: 8px; border: 1px solid transparent; color: var(--text); }
.page-switch a img, .page-switch a .icon { width: 28px; height: 28px; border-radius: 6px; display: block; box-shadow: 0 0 0 1px #000; }
.page-switch a > span:not(.icon) { display: none; font-weight: 600; font-size: 13.5px; padding-right: 6px; }
.page-switch a:hover { text-decoration: none; border-color: var(--line); background: rgba(255, 255, 255, .04); }
.page-switch a.on { border-color: var(--cc, var(--gold)); background: rgba(255, 255, 255, .05); }
.page-switch a.on > span:not(.icon) { display: inline; color: var(--cc, var(--gold)); }
.page-switch a:not(.on) img, .page-switch a:not(.on) .icon { filter: saturate(.75) brightness(.9); }
.page-switch a:hover img, .page-switch a:hover .icon { filter: none; }
@media (max-width: 600px) {   /* a phone: every class on one line (the professions on two), nothing hidden off the edge */
  .page-switch { flex-wrap: wrap; gap: 2px; }
  .page-switch-label, .page-switch a.on > span:not(.icon) { display: none; }
}
/* "Find your guild", right under the intro (guild.js renderGuildToolsInfo) */
.gt-find { display: grid; gap: 6px; max-width: 620px; margin: -6px 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.gt-find-row { display: flex; gap: 8px; }
.gt-find-row .input { flex: 1; min-width: 0; }
.gt-cta { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 18px; }
.gt-cta .btn { padding: 8px 16px; font-size: 14px; }
.gt-cta .btn:hover { text-decoration: none; }
.dg-others { display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: thin; margin: 0 0 14px; padding: 2px 0 6px; }
.dg-others-label { flex: none; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; max-width: 120px; line-height: 1.3; }
.dg-others a { flex: none; display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); color: var(--text); }
.dg-others a:hover { text-decoration: none; border-color: var(--gold-2); }
.dg-others a img { width: 56px; height: 25px; object-fit: cover; border-radius: 5px; display: block; }
.dg-others a span { display: grid; line-height: 1.2; }
.dg-others a b { font-size: 13px; }
.dg-others a small { color: var(--muted); font-size: 11.5px; }
.dg-others a.dg-others-all { background: none; border-color: transparent; color: var(--link); font-weight: 600; font-size: 13px; }
.dg-img img { transition: filter .15s, transform .3s; }
.dg-img:hover img { filter: brightness(1.12); transform: scale(1.02); }
.rc-racials li.click-row { border-radius: 6px; padding: 4px 6px; margin: -4px -6px; }
.rc-racials li.click-row:hover { background: rgba(255, 255, 255, .04); }
.map-pin { transition: transform .1s; }
.leaflet-marker-icon:hover .map-pin:not(.user) { transform: scale(1.25); }
.tl-hl { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 0 0 10px; }
.tl-hl > span { margin-right: 6px; }
.tl-hl a { padding: 2px; border-radius: 7px; border: 1px solid transparent; line-height: 0; }
.tl-hl a img { border-radius: 5px; box-shadow: 0 0 0 1px #000; }
.tl-hl a:hover { border-color: var(--line); }
.tl-hl a.on { border-color: var(--cc); background: rgba(255, 255, 255, .06); }
.tl-chip[data-hl="off"] { opacity: .35; }
.tl-chip[data-hl="on"] { box-shadow: 0 0 0 2px var(--cc); }

.hero {
  position: relative; overflow: visible; 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; border-radius: inherit; }
/* the search suggestions hang below the hero: it doesn't clip them, and sits above the sections after it (below the header) */
.hero { z-index: 20; }
.hero::before { border-radius: inherit; }
.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; }
img.icon { object-fit: cover; }   /* an icon with alt text (format.js icon() given a name): the same box as the background one */
.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); white-space: nowrap;
  user-select: none;
}
table.list th[data-k] { cursor: pointer; }   /* (only a header that sorts: items.js; the rest show no pointer) */
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-need { color: #ff4040; }
.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 { position: relative; width: 256px; height: 380px; margin: 0 auto; }   /* 4 x 7 talents, 68px x 56px pitch (classes.js) */
.talent { position: relative; width: 44px; height: 44px; cursor: pointer; border-radius: 7px; }
.tree-grid > .talent { position: absolute; padding: 0; border: 0; background: none; color: inherit; font: inherit; }
.tree-grid > .talent:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tal-edges { position: absolute; left: 0; top: 0; pointer-events: none; }
.tal-edges line { stroke: #5a5a5a; stroke-width: 3; }
.tal-edges line.on { stroke: #ffd100; }
.tal-edges .ar { fill: #5a5a5a; }
.tal-edges .ar.on { fill: #ffd100; }
.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; }

/* ---------- the new world map (pages/worldmap.js; preview at /maps?map=new) ---------- */
.wm { --wm-top: 57px; --wm-panel: 320px; display: grid; grid-template-columns: var(--wm-panel) minmax(0, 1fr); position: relative;
  height: calc(100vh - var(--wm-top)); height: calc(100dvh - var(--wm-top)); min-height: 440px; background: var(--bg-2); }
.wm.wm-fullpage { position: fixed; inset: 0; z-index: 2500; height: 100vh; height: 100dvh; }
.wm:fullscreen { height: 100vh; }
.wm-panel { overflow-y: auto; overscroll-behavior: contain; padding: 12px 14px 24px; border-right: 1px solid var(--line); background: var(--bg-2); }
.wm-panel h3 { font-size: 13px; margin: 14px 0 6px; color: #fff; }
.wm-sec { border-top: 1px solid var(--line); margin-top: 12px; }
.wm-sec > h3:first-child { margin-top: 10px; }
.wm-title { font-size: 20px; margin: 4px 0 10px; }
.wm-preview { font-size: 12px; color: var(--teal); }
.wm-lab { display: block; font-size: 12px; color: var(--muted); margin: 8px 0 4px; }
.wm-panel .input { width: 100%; max-width: none; }
.wm-search { position: relative; }
.wm-results { display: flex; flex-direction: column; margin-top: 4px; }
.wm-hit, .wm-fit, .wm-mypin { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; font: inherit; color: var(--text);
  background: none; border: 0; border-radius: 6px; padding: 6px 8px; cursor: pointer; min-height: 34px; }
.wm-hit:hover, .wm-fit:hover, .wm-mypin:hover, .wm-hit:focus-visible, .wm-fit:focus-visible { background: var(--panel-2); }
.wm-hit span:first-child, .wm-mypin .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-hit .muted, .wm-mypin .muted { font-size: 12px; }
.wm-fit i, .wm-legend i, .wm-toggle i { width: 11px; height: 11px; border-radius: 3px; flex: none; display: inline-block; border: 1px solid rgba(0, 0, 0, .6); }
.wm-fit span { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.wm-level { display: grid; grid-template-columns: auto 64px minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.wm-level label { font-size: 13px; }
.wm-level .input { padding: 6px 8px; }
.wm-fits { margin-top: 6px; }
.wm-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
.wm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.wm-note { font-size: 12px; color: var(--muted); margin: 6px 0 0; line-height: 1.45; }
.wm-small { font-size: 12px; font-weight: 400; }
.wm-new { font-style: normal; font-size: 10px; font-weight: 700; color: #04150b; background: var(--new); border-radius: 3px; padding: 0 4px; margin-left: 4px; letter-spacing: .02em; }
.wm-legend .wm-new { margin: 0; }
.wm-toggle { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; font-size: 13.5px; min-height: 30px; }
.wm-toggle input { margin: 0; width: 16px; height: 16px; accent-color: var(--teal); }
.wm-count { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 12px; }
.wm-zoomhint { font-size: 11px; color: var(--changed); }
.wm-seg { display: flex; gap: 6px; }
.wm-row { margin-top: 8px; gap: 6px; flex-wrap: wrap; }
.wm-spec { font-size: 12px; color: var(--changed); margin-top: 4px; }
.wm-swatch { width: 20px; height: 20px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; }
.wm-sheet-head, .wm-sheet-btn { display: none; }

.wm-stage { position: relative; min-width: 0; overflow: hidden; }
.wm-map { position: absolute; inset: 0; background: #14263a; }
.wm-map.leaflet-container { background: #14263a; }
.wm-stage.adding .leaflet-container, .wm-stage.adding .leaflet-interactive { cursor: crosshair; }
.wm-tools { position: absolute; z-index: 800; top: 10px; right: 10px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: calc(100% - 360px); }
.wm-tools .btn, .wm-coords .btn, .wm-sheet-btn { background: rgba(11, 16, 32, .92); }
.wm-tools .btn b { font-size: 14px; line-height: 1; }
.wm-coords { position: absolute; z-index: 800; left: 10px; bottom: 10px; max-width: calc(100% - 20px); display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: rgba(7, 11, 22, .86); border: 1px solid var(--line); padding: 4px 8px; border-radius: 6px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.wm-xy { color: var(--gold); font-weight: 600; }
.wm-card { position: absolute; z-index: 800; top: 10px; left: 10px; width: min(330px, calc(100% - 20px)); background: rgba(7, 11, 22, .94);
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 13px; box-shadow: var(--shadow); }
.wm-card-n { font-size: 16px; font-weight: 700; color: #fff; padding-right: 60px; }
.wm-card-x { position: absolute; top: 8px; right: 8px; }
.wm-card-links { margin-top: 6px; }

/* zone labels: big readable capitals, the level range in the zone's faction colour; sized by zoom (.wm-zN on the map) */
.wm-zl-wrap { width: 0 !important; height: 0 !important; background: none; border: 0; }
.wm-zl { position: absolute; transform: translate(-50%, -50%); text-align: center; white-space: nowrap; cursor: pointer; line-height: 1.1;
  color: #fff; text-shadow: 0 0 3px #000, 0 1px 2px #000, 0 0 6px rgba(0, 0, 0, .85); font-size: 12px; transition: opacity .15s; }
.wm-zl b { display: block; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.wm-zl span { display: block; font-weight: 700; font-size: .85em; margin-top: 1px; font-variant-numeric: tabular-nums; }
.wm-zl .wm-new { text-shadow: none; display: inline-block; margin: 2px 0 0; }
.wm-zl.side-a span { color: #7cb4ff; }
.wm-zl.side-h span { color: #ff7a7a; }
.wm-zl.side-c span { color: #ffd45c; }
.wm-zl.side-b span { color: #7ee08f; }
.wm-zl.no-map span { color: #cbd5e1; font-weight: 600; font-style: italic; }
.wm-zl.dim { opacity: .45; }
.wm-z0 .wm-zl, .wm-z1 .wm-zl { font-size: 10px; }
.wm-z2 .wm-zl { font-size: 11px; }
.wm-z3 .wm-zl { font-size: 13px; }
.wm-z4 .wm-zl { font-size: 15.5px; }
.wm-z5 .wm-zl { font-size: 18px; }
.wm-z6 .wm-zl { font-size: 21px; opacity: .85; }
.wm-z7 .wm-zl, .wm-z8 .wm-zl { font-size: 21px; opacity: .55; }

/* pins: a shape per kind, so they read apart without relying on colour alone */
.wm-pin-wrap { background: none; border: 0; }
.wm-pin { display: block; width: 14px; height: 14px; margin: 2px; background: var(--c); border: 2px solid #0b0d12; box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 1px 4px rgba(0, 0, 0, .7); }
.wm-pin.fm { border-radius: 50%; }
.wm-pin.dng, .wm-pin.raid { transform: rotate(45deg) scale(.9); border-radius: 2px; }
.wm-pin.raid { width: 16px; height: 16px; margin: 1px; }
.wm-pin.town { width: 9px; height: 9px; margin: 4.5px; border-radius: 50%; border-width: 1.5px; }
.wm-pin.town.city { width: 12px; height: 12px; margin: 3px; border-radius: 3px; }
.wm-pin.town.poi { width: 8px; height: 8px; margin: 5px; transform: rotate(45deg); border-radius: 1px; }
.wm-pin.boat { border-radius: 50% 50% 3px 3px; width: 13px; height: 11px; margin: 3.5px 2.5px; }
.leaflet-marker-icon:hover .wm-pin { filter: brightness(1.25); }

@media (max-width: 900px) {
  .wm { grid-template-columns: 1fr; min-height: 380px; }
  .wm-panel { position: absolute; z-index: 1000; left: 0; right: 0; bottom: 0; max-height: 72%; border-right: 0; border-top: 1px solid var(--line);
    border-radius: 14px 14px 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, .5); transform: translateY(105%); transition: transform .2s ease; visibility: hidden; }
  .wm-panel.open { transform: none; visibility: visible; }
  .wm-sheet-head { display: flex; align-items: center; justify-content: space-between; position: sticky; top: -12px; margin: -12px -14px 6px; padding: 10px 14px;
    background: var(--bg-2); border-bottom: 1px solid var(--line); z-index: 1; }
  .wm-sheet-btn { display: block; position: absolute; z-index: 850; left: 50%; transform: translateX(-50%); bottom: 54px; padding: 9px 16px; font-weight: 600;
    border: 1px solid var(--gold-2); box-shadow: 0 4px 14px rgba(0, 0, 0, .5); }
  .wm-tools { top: 8px; right: 8px; gap: 5px; max-width: calc(100% - 16px); }
  .wm-tools .btn span { display: none; }
  .wm-tools .btn { min-width: 34px; min-height: 32px; }
  .wm-card { top: auto; bottom: 100px; }
  .wm-coords { left: 8px; right: 8px; bottom: 8px; max-width: none; }
  .wm-world { display: none; }
}

/* ---------- 3D world explorer (/world3d, site/js/pages/world3d.js) ---------- */
.w3d { --w3d-panel: 300px; display: grid; grid-template-columns: var(--w3d-panel) minmax(0, 1fr); position: relative; height: calc(100dvh - var(--hdr-h));
  min-height: 360px; background: var(--bg-2); }
.w3d-panel { overflow-y: auto; overscroll-behavior: contain; padding: 12px 14px 24px; border-right: 1px solid var(--line); background: var(--bg-2); }
.w3d-panel h3 { font-size: 13px; margin: 12px 0 6px; color: #fff; }
.w3d-panel .input { width: 100%; max-width: none; }
.w3d-pre { font-size: 12px; color: var(--teal); }
.w3d-title { font-size: 20px; margin: 4px 0 6px; }
.w3d-intro { font-size: 13px; color: var(--muted); margin: 0 0 6px; }
.w3d-lab { display: block; font-size: 12px; color: var(--muted); margin: 10px 0 4px; }
.w3d-sec { border-top: 1px solid var(--line); margin-top: 12px; }
.w3d-search { position: relative; }
.w3d-results { display: flex; flex-direction: column; margin-top: 4px; }
.w3d-hit { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; font: inherit; font-size: 13px; color: var(--text);
  background: none; border: 0; border-radius: 6px; padding: 5px 7px; cursor: pointer; }
.w3d-hit:hover, .w3d-hit:focus-visible { background: var(--panel-2, #18213d); }
.w3d-hit .muted { font-size: 11.5px; }
.w3d-modes { display: flex; gap: 6px; flex-wrap: wrap; }
.w3d-modes [aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }
.w3d-panel input[type=range] { width: 100%; }
.w3d-toggle { display: flex; align-items: center; gap: 7px; font-size: 13px; padding: 3px 0; cursor: pointer; }
.w3d-toggle i { width: 11px; height: 11px; border-radius: 50%; flex: none; border: 1px solid rgba(0, 0, 0, .6); }
.w3d-toggle i.w3d-zi { border-radius: 2px; background: linear-gradient(#fff, #cbd5e1); }
.w3d-toggle .muted { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; }
.w3d-spot { font-size: 13px; line-height: 1.5; }
.w3d-links { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 8px; font-size: 13px; }
.w3d-help p { font-size: 12.5px; margin: 0 0 6px; color: var(--text); }
.w3d-help p.muted { color: var(--muted); }
.w3d-view { position: relative; overflow: hidden; min-width: 0; background: #9cc4e4; outline: none; }
.w3d-view canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.w3d-view canvas:active { cursor: grabbing; }
.w3d-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.w3d-label { position: absolute; left: 0; top: 0; white-space: nowrap; color: #fff; font-weight: 600; text-shadow: 0 1px 2px #000, 0 0 6px rgba(0, 0, 0, .8); will-change: transform; }
.w3d-label.zone { font-size: 15px; letter-spacing: .02em; color: #ffe9a8; }
.w3d-label.town { font-size: 12px; }
.w3d-cross { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; pointer-events: none;
  background: linear-gradient(#fff, #fff) center / 2px 14px no-repeat, linear-gradient(#fff, #fff) center / 14px 2px no-repeat; opacity: .55; filter: drop-shadow(0 0 1px #000); }
.w3d-hud { position: absolute; left: 10px; top: 10px; max-width: calc(100% - 20px); padding: 6px 10px; border-radius: 8px; background: rgba(11, 16, 32, .82);
  color: #fff; font-size: 14px; pointer-events: none; }
.w3d-hud span { color: var(--gold); font-variant-numeric: tabular-nums; margin-left: 6px; }
.w3d-status { position: absolute; right: 10px; top: 10px; font-size: 12px; color: #fff; text-shadow: 0 1px 2px #000; pointer-events: none; }
.w3d-pad { position: absolute; right: 10px; bottom: 10px; display: grid; grid-template-columns: repeat(4, 54px); gap: 4px; user-select: none; touch-action: none; }
.w3d-pad .btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 4px 0; min-height: 44px; font-size: 16px; line-height: 1;
  background: rgba(11, 16, 32, .82); touch-action: none; }
.w3d-pad .btn span { font-size: 10px; color: var(--muted); margin-top: 3px; }
.w3d-pad .btn.on { border-color: var(--gold); color: var(--gold); }
.w3d-menu { display: none; }
.w3d-sheet-head { display: none; }
.w3d-card { position: absolute; z-index: 5; width: 260px; padding: 10px 12px; border-radius: 10px; background: rgba(11, 16, 32, .95); border: 1px solid var(--line);
  box-shadow: var(--shadow); font-size: 13px; line-height: 1.45; }
.w3d-card b { display: block; font-size: 14px; color: #fff; padding-right: 18px; }
.w3d-card-links { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.w3d-x { position: absolute; right: 6px; top: 4px; background: none; border: 0; color: var(--muted); font-size: 18px; cursor: pointer; }
@media (max-width: 900px) {
  .w3d { grid-template-columns: 1fr; }
  .w3d-panel { position: absolute; z-index: 10; left: 0; right: 0; bottom: 0; max-height: 75%; border-right: 0; border-top: 1px solid var(--line);
    border-radius: 14px 14px 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, .5); transform: translateY(105%); transition: transform .2s ease; visibility: hidden; }
  .w3d-panel.open { transform: none; visibility: visible; }
  .w3d-sheet-head { display: flex; align-items: center; justify-content: space-between; position: sticky; top: -12px; margin: -12px -14px 6px; padding: 10px 14px;
    background: var(--bg-2); border-bottom: 1px solid var(--line); z-index: 1; }
  .w3d-menu { display: block; position: absolute; left: 10px; bottom: 10px; background: rgba(11, 16, 32, .9); font-weight: 600; }
  .w3d-pad { grid-template-columns: repeat(4, 46px); }
  .w3d-hud { font-size: 13px; }
}

/* ---------- 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); display: grid; place-items: center; color: var(--muted); font-size: 20px; line-height: 1; flex: none; }
.slot:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }
.slot.is-empty:hover .empty { border-color: var(--gold-2); color: var(--gold); }
.slot .gear-pick { color: var(--gold); }
.gear-up-say { color: var(--muted); }
.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 opens from the ☰ button once it no longer fits on one line. How wide the bar is depends on the account name,
   the language and the Ask button, so the header measures itself (the script after <header> in index.html): it first drops
   the Discord button's label (.hdr-nolabel), then the menu icons (.hdr-tight), then narrows the search box (.hdr-squeeze), then switches to the ☰ menu (.hdr-menu) */
.hdr-menu .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; }
.hdr-menu .nav.open { display: flex; }
.hdr-menu .nav-group::after { display: none; }
.hdr-menu .nav .nav-top { width: 100%; justify-content: flex-start; padding: 10px 8px; }
.hdr-menu .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; }
.hdr-menu .nav button.nav-top::after { display: none; }
.hdr-menu .nav-menu, .hdr-menu .nav-group:hover:not(.hold) .nav-menu { display: grid; position: static; box-shadow: none; border: 0; padding: 0; min-width: 0; }
.hdr-menu .nav-menu a span { display: none; }
.hdr-menu .nav-menu.nav-cols { grid-auto-flow: row; width: auto; max-width: none; padding: 0; gap: 4px 12px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.hdr-menu .nav-menu.nav-cols a { white-space: normal; }
.hdr-menu .nav-col h4 { margin: 6px 0 2px; color: var(--muted); }
.hdr-menu .nav-menu.nav-classes { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 2px 8px; }   /* as many columns as fit, as before */
.hdr-menu .nav-menu.nav-classes .nav-col a:not(.nav-cls-head) { display: none; }   /* on a phone: just the classes */
.hdr-menu .nav-toggle { display: block; flex: none; }
.hdr-menu .global-search { width: auto; flex: 1 1 0; min-width: 0; }
.hdr-tight:not(.hdr-menu) .nav-top-ic { display: none; }   /* room for the search box */
.hdr-tight:not(.hdr-menu) .nav-top { padding: 7px 9px; }
html:not([lang=en]) .hdr-tight:not(.hdr-menu) .nav-top { padding: 7px 6px; }
.topbar:not(.hdr-menu) .global-search { min-width: 190px; }
html:not([lang=en]) .hdr-tight:not(.hdr-menu) .global-search { min-width: 150px; }
/* last step before the ☰ menu: a narrower search box, the menus a little closer, a long account name cut shorter */
.hdr-squeeze:not(.hdr-menu) .nav-top { padding: 7px 7px; }
.topbar.hdr-squeeze:not(.hdr-menu) .global-search { min-width: 150px; }
.hdr-squeeze:not(.hdr-menu) .account-me { max-width: 140px; }
/* the account button: a long name ends in "…" (the full BattleTag is its tooltip) */
.account { flex: none; }
.account-me { max-width: 240px; }
.account-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* once the ☰ menu is on and the search box still has too little room (a long account name, Spanish, the Ask button, a small
   screen), the header keeps going: the bar's items sit closer, a long account name is cut shorter, the language button is
   tighter and Ask is its icon (.hdr-compact); then the account is just its dot and first letter (.hdr-mini);
   then the language switch moves into the ☰ panel (.hdr-micro), then the Discord button does too (.hdr-nano) */
.hdr-compact { gap: 8px; padding-left: 12px; padding-right: 12px; }
.hdr-compact .account-me { max-width: 110px; }
.hdr-compact .account-me .muted { display: none; }   /* the #number: the full BattleTag is the tooltip */
.hdr-compact > .lang-switch { margin: 0; }
.hdr-compact > .lang-switch .lang-btn { padding: 4px 6px; }   /* (the switcher is one button, EN ▾, with its dropdown: langui.js) */
.hdr-compact .nav-discord { margin: 0; }
.hdr-compact .nav-toggle { padding: 4px 9px; }
.hdr-compact .ask-btn { font-size: 0; gap: 0; padding: 6px 7px; }
html.ask-on .hdr-compact .global-search input { padding-right: 32px; }
.hdr-mini { gap: 6px; }
.hdr-mini .account-me { padding: 5px 8px; }
.hdr-mini .account-name, .hdr-mini .account-me .muted { display: none; }   /* just the blue dot: the name is its tooltip */
.hdr-mini .account-me::after { content: attr(data-initial); }
.topbar.hdr-micro > .lang-switch { display: none; }
.nav .lang-switch.nav-lang { display: none; }   /* (langui.js's own .lang-switch rule loads later: this must outrank it) */
.hdr-micro .nav .lang-switch.nav-lang { display: flex; margin: 8px 0 0; padding: 10px 8px 0; border-top: 1px solid var(--line); }
.hdr-nano { gap: 4px; }
.topbar.hdr-nano > .nav-discord { display: none; }
.nav .nav-discord-m { display: none; }
.hdr-nano .nav .nav-discord-m { display: inline-flex; }
@media (max-width: 760px) {
  .hdr-menu .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 */
/* the share bar (share.js): small square buttons at the top and the bottom of an article; a brand's colour on hover */
.share-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 14px; }
.share-bar.share-end { margin: 22px 0 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.share-label { color: var(--muted); font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; margin-right: 2px; }
.share-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border-radius: 7px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); fill: currentColor; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s; }
.share-btn:hover, .share-btn:focus-visible { color: #fff; border-color: transparent; text-decoration: none; }
.share-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.share-reddit:hover, .share-reddit:focus-visible { background: #ff4500; }
.share-facebook:hover, .share-facebook:focus-visible { background: #0866ff; }
.share-x:hover, .share-x:focus-visible { background: #000; border-color: #444; }
.share-bluesky:hover, .share-bluesky:focus-visible { background: #1185fe; }
.share-whatsapp:hover, .share-whatsapp:focus-visible { background: #25d366; }
.share-mail:hover, .share-copy:hover, .share-native:hover, .share-mail:focus-visible, .share-copy:focus-visible, .share-native:focus-visible { background: var(--gold-2); }
.share-done { color: var(--gold); font-size: 12px; margin-left: 4px; overflow-wrap: anywhere; }
.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; }
/* Blizzard's video thumbnails (img/articles/yt-*: tools/article_images.py) put their title text on the left and an in-game shot
   on the right: the wide article header shows the shot */
.article-hero[src*="/yt-"] { object-position: 85% 50%; }
.ux-art-head.yt-hero { background-size: 100% 100%, 185% auto; background-position: 0 0, 100% 45%; }
.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%); }
/* A YouTube video in an article: its thumbnail and a play button until clicked, then the player (news.js videoBlock) */
.video-embed { margin: 16px 0; }
.video-embed .ve-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #000; }
.video-embed .ve-frame > button, .video-embed .ve-frame > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; margin: 0; padding: 0; background: #000; }
.video-embed .ve-frame > button { cursor: pointer; }
.video-embed .ve-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-embed .ve-play { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%); border-radius: 12px; background: rgba(15, 15, 15, .82); transition: background .15s; }
.video-embed .ve-play::after { content: ''; position: absolute; left: 27px; top: 14px; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; }
.video-embed button:hover .ve-play, .video-embed button:focus-visible .ve-play { background: #e62117; }
.video-embed .ve-len { position: absolute; right: 8px; bottom: 8px; padding: 1px 6px; border-radius: 4px; background: rgba(0, 0, 0, .8); color: #fff; font-size: 12px; font-weight: 600; }
.article-body .video-embed figcaption { text-align: left; }
.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; }
.ab-quest { display: block; font-size: 12.5px; margin-top: 2px; line-height: 1.4; }   /* a class ability a quest teaches, not the trainer */
.ab-quest .badge { font-size: 10.5px; vertical-align: 1px; }

/* ---------- 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; }
.rp-foes { margin: 4px 0 0; padding-left: 18px; font-size: 13px; }
.dm-pvp { list-style: none; margin: 8px 0 0; padding: 0; }
.dm-pvp li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.dm-pvp li > div { margin-top: 3px; }
#rp-pvpnote { margin: 6px 0 0; }
.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; }
/* /discord: the Discord bot (site/js/pages/discord.js). A picture header tinted Discord blurple, the bot's real replies
   (/api/discord/preview) drawn the way Discord draws an embed, the commands one group at a time, short sections with
   "On this page" beside them. The bars of framed icons are the article layout's (.ux-classpick, .ux-cp). */
.dc-cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 8px; }
.dc-howto { font-weight: 600; }
.dc-setup .article-body ol.steps li { margin: 8px 0; }
.btn.dc-add { padding: 11px 22px; font-size: 15px; border-radius: 6px; background: #5865f2; color: #fff; border: 1px solid #6f7af5; font-weight: 600; }
.btn.dc-add:hover { background: #4752c4; text-decoration: none; }
.btn.dc-add:disabled { background: var(--panel-2); color: var(--muted); border-color: var(--line); }
.dc-v2 { max-width: 1180px; margin: 0 auto; }
.dc-v2 h2 { scroll-margin-top: calc(var(--hdr-h, 59px) + 22px); }
.dc-head.ux-art-head { background-image: linear-gradient(180deg, rgba(40,46,120,.35) 0%, rgba(14,17,40,.72) 50%, rgba(9,12,20,.97) 100%),
  linear-gradient(90deg, rgba(88,101,242,.38), rgba(88,101,242,.08) 70%), var(--hero, none); background-position: center 30%; }
.dc-head .ux-art-title { padding: 150px 28px 22px; }
.dc-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #c9cdfb; }
.dc-head h1 { font-size: 34px; }
.dc-purpose { margin: 6px 0 0; font-size: 17px; color: #e6e8f2; max-width: 720px; text-shadow: 0 1px 8px rgba(0,0,0,.7); }
.dc-head .btn.dc-howto { background: rgba(9,12,20,.6); border: 1px solid rgba(255,255,255,.25); color: #fff; padding: 10px 18px; border-radius: 6px; }
.dc-note { margin: 0; font-size: 13px; color: #c3c8d4; }
.dc-sub { margin: -4px 0 14px; color: #c3c8d4; }
.dc-pick { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; margin: 0 0 16px; }
.dc-live > h2, .dc-cmds > h2 { margin-top: 26px; }
.dc-live-grid { display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 1fr); gap: 24px; align-items: start; }
.dc-side { display: grid; gap: 16px; }
.dc-side h3 { margin: 0 0 8px; }
.dc-try, .dc-what { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.dc-try.on { border-color: #5865f2; }
.dc-try label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--muted); margin: 0 0 10px; }
.dc-try select, .dc-try input { width: 100%; font: inherit; font-size: 15px; color: var(--text); background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; }
.dc-try-msg:empty { display: none; }
.dc-what ul { margin: 0; padding-left: 18px; }
.dc-what li { margin: 5px 0; line-height: 1.45; }
/* the message, as Discord's dark theme draws it */
.dc-msg { background: #313338; border: 1px solid #1e1f22; border-radius: 10px; padding: 12px 16px 16px; color: #dbdee1; font-size: 15px; line-height: 1.375;
  font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; min-height: 240px; }
.dc-cmd { font-size: 13px; color: #949ba4; margin: 0 0 4px 56px; }
.dc-cmd-who { color: #b5bac1; }
.dc-slash { color: #c9cdfb; background: rgba(88, 101, 242, .3); border-radius: 3px; padding: 0 3px; }
.dc-row { display: flex; gap: 16px; align-items: flex-start; }
.dc-avatar { width: 40px; height: 40px; border-radius: 50%; background: #1e1f22; padding: 6px; flex: none; }
.dc-body { min-width: 0; flex: 1; }
.dc-who { font-size: 16px; color: #f2f3f5; margin-bottom: 4px; }
.dc-app { font-size: 10px; font-weight: 600; background: #5865f2; color: #fff; border-radius: 3px; padding: 1px 4px; vertical-align: 2px; margin-left: 2px; }
.dc-time { font-size: 12px; color: #949ba4; margin-left: 4px; }
.dce { background: #2b2d31; border-left: 4px solid var(--bar, #1e1f22); border-radius: 4px; padding: 8px 16px 16px 12px; max-width: 520px; display: grid; }
.dce-loading { color: #949ba4; font-size: 14px; padding: 16px; min-height: 120px; }
.dce-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 16px; }
.dce-grid.has-thumb { grid-template-columns: minmax(0, 1fr) 80px; }
.dce-main { min-width: 0; }
.dce-thumb { width: 80px; height: 80px; object-fit: contain; border-radius: 4px; margin-top: 8px; }
.dce-author { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; font-weight: 600; color: #f2f3f5; }
.dce-author img { border-radius: 50%; }
.dce-author a { color: #f2f3f5; }
.dce-title { margin-top: 8px; font-size: 16px; font-weight: 600; color: #f2f3f5; }
.dce-title a, .dce a { color: #00a8fc; }
.dce-desc { margin-top: 8px; font-size: 14px; line-height: 1.375; overflow-wrap: anywhere; }
.dce-desc b, .dce-fval b { color: #f2f3f5; font-weight: 700; }
.dce-fields { display: grid; gap: 8px; margin-top: 8px; }
.dce-frow { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 8px; }
.dce-fname { font-size: 14px; font-weight: 600; color: #f2f3f5; margin-bottom: 2px; }
.dce-fval { font-size: 14px; line-height: 1.375; overflow-wrap: anywhere; }
/* the tooltip picture (backend/tooltip_image.py, drawn at 2x): under the fields, as Discord puts an embed's image */
.dce-image { display: block; max-width: min(400px, 100%); height: auto; margin-top: 16px; border-radius: 4px; }
.dce-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: #b5bac1; font-weight: 500; }
.dce-foot img { border-radius: 50%; }
.dc-ephemeral { background: #2b2d31; border-radius: 6px; padding: 10px 14px; font-size: 14px; }
.dc-ephemeral p { margin: 4px 0 8px; }
.dc-only { font-size: 12px; color: #949ba4; }
.dc-dym { display: flex; flex-wrap: wrap; gap: 6px; }
.dc-dym .btn { background: #4e5058; color: #fff; border: 0; border-radius: 4px; }
.dc-dym .btn:hover { background: #6d6f78; }
/* the raid night examples: Discord's buttons and menus under a message, drawn (not clickable) */
.dc-demos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 14px; margin: 14px 0 6px; }
.dc-demo { margin: 0; min-width: 0; }
.dc-demo .dc-msg { min-height: 0; }
.dc-demo figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.45; }
.dc-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; max-width: 520px; }
.dc-b { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 2px 14px; border-radius: 4px; font-size: 14px; font-weight: 500; color: #fff; background: #4e5058; }
.dc-b-green { background: #248046; }
.dc-b-red { background: #da373c; }
.dc-b-menu { background: #1e1f22; color: #949ba4; border: 1px solid #1e1f22; flex: 1; justify-content: space-between; max-width: 400px; }
/* the commands: one group at a time, each command a compact card */
.dc-group[hidden] { display: none; }
.dc-group + .dc-group { margin-top: 18px; }
.dc-ghead { display: flex; gap: 12px; align-items: center; margin: 0 0 10px; }
.dc-ghead h3 { margin: 0; font-size: 17px; }
.dc-ghead p { margin: 2px 0 0; color: #c3c8d4; font-size: 14px; }
.dc-clist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.dc-c { display: flex; flex-direction: column; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 0; }
.dc-c-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dc-c-head code { font-size: 15px; font-weight: 600; color: #c9cdfb; background: rgba(88, 101, 242, .22); padding: 2px 7px; border-radius: 4px; }
.dc-c p { margin: 0; font-size: 14px; line-height: 1.45; }
.dc-perm { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--gold); border: 1px solid rgba(240, 195, 90, .45); border-radius: 3px; padding: 1px 5px; }
.dc-opts, .dc-ex { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; font-size: 13px; }
.dc-opts-k { color: var(--muted); font-size: 12.5px; }
.dc-opt { font-size: 12.5px; font-weight: 700; color: var(--text); background: var(--panel-2); border-radius: 3px; padding: 0 6px; }
.dc-opt.opt { font-weight: 400; color: var(--muted); }
.dc-ex code { font-size: 12.5px; color: #dbdee1; background: #1e1f22; border-radius: 3px; padding: 1px 6px; overflow-wrap: anywhere; }
.dc-show { margin-left: auto; padding: 3px 10px; font-size: 12.5px; }
/* the explanations: short sections in two columns, "On this page" beside them; folded on phones (details) */
.dc-info-grid.ux-article-grid { margin-top: 26px; grid-template-columns: minmax(0, 920px) 200px; }
.dc-info { min-width: 0; columns: 2 380px; column-gap: 28px; }
.dc-sec { break-inside: avoid; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 2px 16px 8px; margin: 0 0 16px; }
.dc-sec > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.dc-sec > summary::-webkit-details-marker { display: none; }
.dc-sec > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; }
.dc-sec[open] > summary::after { transform: rotate(-135deg); }
.dc-sec h2 { margin: 12px 0 6px; font-size: 18px; }
.dc-sec ul, .dc-sec ol { padding-left: 20px; margin: 6px 0 10px; }
.dc-sec li { margin: 5px 0; line-height: 1.5; }
.dc-sec p { margin: 6px 0; }
.dc-labels li b { color: var(--gold); }
@media (max-width: 1000px) {
  .dc-live-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .dc-head .ux-art-title { padding: 96px 14px 16px; }
  .dc-head h1 { font-size: 26px; }
  .dc-purpose { font-size: 15.5px; }
  .dc-msg { padding: 10px 10px 12px; }
  .dc-cmd { margin-left: 0; }
  .dc-avatar { display: none; }
  .dce { padding: 6px 10px 12px 10px; }
  .dce-frow { grid-template-columns: minmax(0, 1fr); }
  .dc-clist { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .dc-c { padding: 10px 12px; gap: 4px; }
  .dc-sec { margin-bottom: 8px; padding-bottom: 2px; }
  .dc-sec[open] { padding-bottom: 8px; }
  .dc-sec h2 { font-size: 16.5px; margin: 10px 0; }
  .dc-pick .ux-cp { flex: 1 1 0; min-width: 0; }
  .dc-pick .ux-cp-name { font-size: 11px; text-align: center; line-height: 1.25; }
}
.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: calc(var(--hdr-h, 59px) + 12px); max-height: calc(100vh - var(--hdr-h, 59px) - 32px); 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; } }
/* a moment from a link (?t= / #t=) or the Coach: a line over the timeline and a mark on it */
.rp-moment { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; padding: 6px 10px; border-left: 3px solid var(--gold); background: rgba(240, 195, 90, .08); font-size: 13.5px; }
.rp-moment[hidden] { display: none; }
.rp-moment span { flex: 1 1 160px; min-width: 0; }
.rp-scrubwrap { position: relative; flex: 1; display: flex; min-width: 0; }
.rp-scrubwrap input[type=range] { flex: 1; min-width: 0; }
.rp-mark { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1px; background: var(--gold); pointer-events: none; }
.rp-mark[hidden] { display: none; }
.arena-box.rp-flash { animation: rp-flash 1.4s ease-out; }
@keyframes rp-flash { 0% { outline: 3px solid var(--gold); outline-offset: -3px; } 100% { outline: 3px solid transparent; outline-offset: -3px; } }
@media (prefers-reduced-motion: reduce) { .arena-box.rp-flash { animation: none; } }
/* the Coach tab (replay/coachview.js) */
.coach-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; margin-bottom: 8px; }
.coach-head .badge.spec { border-style: solid; }
.coach-pick { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 10px; }
.coach-pick label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); min-width: 0; flex: 1 1 140px; }
.coach-pick select { width: 100%; min-width: 0; }
.coach-body p { margin: 0 0 8px; }
.coach-sim { font-size: 13.5px; }
.coach-body h3 { margin: 14px 0 8px; font-size: 15px; color: var(--gold); }
.coach-top { list-style: none; counter-reset: coach; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; gap: 10px; }
.coach-top li { counter-increment: coach; position: relative; padding: 8px 10px 8px 38px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); }
.coach-top li::before { content: counter(coach); position: absolute; left: 10px; top: 8px; width: 20px; height: 20px; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #111; background: var(--gold); border-radius: 3px; }
.coach-title { font-weight: 700; color: #fff; }
.coach-why { font-size: 13px; margin: 3px 0; }
.coach-num { font-size: 12.5px; color: var(--muted); }
.coach-gain { color: var(--new); white-space: nowrap; }
.coach-moments { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: 12.5px; }
.coach-moment { display: inline; white-space: normal; }
.coach-moment span { color: var(--text); }
.coach-all { margin-top: 12px; font-size: 13px; }
.coach-all summary { cursor: pointer; color: var(--link); }
.coach-all ul { margin: 6px 0; padding-left: 18px; }
.coach-all li { margin-bottom: 6px; }

/* ---------- class builds ---------- */
.bd-jump { margin: 8px 0 18px; }
.bd-spec { margin-bottom: 30px; scroll-margin-top: calc(var(--hdr-h, 59px) + 12px); }
.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; }
.linux-quick { flex-basis: 100%; min-width: 0; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); }
.linux-quick p { margin: 4px 0; }
.linux-quick pre { margin: 6px 0; overflow-x: auto; }
.store-links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex-basis: 100%; }
.store-btn { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 8px; color: #fff; font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.store-btn:hover { color: #fff; text-decoration: none; filter: brightness(1.12); }
.store-btn svg { width: auto; height: 16px; }
.store-curse { background: #f16436; }
.store-discord { background: #5865f2; }
/* /all-pages: every public page, grouped under the menu's words, one line each */
.ap-group { margin: 22px 0 0; }
.ap-group h2 { margin: 0 0 8px; }
.ap-list { list-style: none; margin: 0; padding: 0; columns: 2 380px; column-gap: 32px; }
.ap-list li { break-inside: avoid; margin: 0 0 6px; }
.ap-list .muted { font-size: 13.5px; }
.store-wago { background: #1c1c1c; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.ad-stores { margin-top: 10px; }
.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; border-radius: 12px 12px 0 0; }
  .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; }
  .hdr-menu .nav > a.nav-top { color: #fff; font-weight: 600; border-top: 1px solid var(--line); border-radius: 0; margin-top: 6px; padding-top: 12px; }
  .hdr-menu .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; }
/* the account button opens a small menu: My account, My player page, Following feed, Log out (account.js) */
.account { position: relative; }
button.account-me { background: none; cursor: pointer; }
button.account-me[aria-expanded="true"] { border-color: var(--gold-2); }
.account-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--muted); flex: none; }
.hdr-mini .account-caret { display: none; }
.account-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 1001; min-width: 200px; max-width: calc(100vw - 16px);
  display: flex; flex-direction: column; padding: 6px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.account-pop[hidden] { display: none; }
.account-pop-tag, .nav-acct-tag { padding: 4px 10px 6px; color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-pop a, .account-pop button, .nav-acct a, .nav-acct button { display: block; padding: 8px 10px; border-radius: 6px; color: var(--text); font: inherit; font-size: 14px;
  text-align: left; background: none; border: 0; cursor: pointer; white-space: nowrap; }
.account-pop a:hover, .account-pop button:hover, .account-pop a:focus-visible, .account-pop button:focus-visible { background: var(--panel-2); color: #fff; text-decoration: none; }
.account-pop .account-out, .nav-acct .account-out { border-top: 1px solid var(--line); border-radius: 0 0 6px 6px; margin-top: 4px; color: var(--muted); }
/* the same links in the ☰ panel, once the header opens from ☰ */
.nav-acct { display: none; }
.hdr-menu .nav-acct { display: flex; flex-direction: column; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px solid var(--line); }
.hdr-menu .nav-acct a, .hdr-menu .nav-acct button { padding: 10px 8px; }
.hdr-menu .nav-acct .account-out { border-top: 0; margin-top: 0; }
.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;
  contain: strict; will-change: transform; transform: translateZ(0); }   /* its own layer: scrolling never repaints it */
.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); will-change: transform;
}
.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.active { background: color-mix(in srgb, var(--cc) 22%, transparent); border-color: var(--cc); }   /* the spec whose page this is (pages/classes.js) */
.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; }
/* the whole spec card opens the spec's dungeon guide (classes.js, app.js .click-row) */
.spec-intro.click-row:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cc) 45%, transparent); }
.spec-intro .si-go { margin: 10px 0 0; font-size: 13.5px; }
.spec-intro .si-go a:first-child { font-weight: 600; }

/* 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: calc(var(--hdr-h, 59px) + 18px);
  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; }
.pet-mods { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--muted); }
.pet-mods b { color: var(--text); font-variant-numeric: tabular-nums; }
.pet-mods .up b { color: var(--new); }
.pet-mods .down b { color: var(--removed); }
.pet-traits .pet-mods { font-size: 15px; gap: 6px 22px; margin: 4px 0 6px; }
.pet-traits h2 { margin-top: 0; }
.pet-compare { margin: 0 0 18px; }
.pet-compare summary { cursor: pointer; color: var(--link); margin-bottom: 8px; }
.pet-finder { align-items: flex-end; gap: 10px 12px; }
.pet-finder .pf-field { display: grid; gap: 3px; font-size: 12px; color: var(--muted); min-width: 0; }
.pet-finder .pf-field .input { min-width: 150px; height: 34px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; }
.pet-finder .pf-wide .input { min-width: 260px; }
.pet-finder .pf-num .input { min-width: 0; width: 90px; }
.pet-finder .pf-checks { display: flex; flex-wrap: wrap; gap: 4px 14px; padding-bottom: 8px; }
.pet-pick-lv { font-weight: 400; margin-left: 8px; color: var(--muted); }
.pet-pick-lv .input { width: auto; min-width: 0; padding: 2px 6px; }
.pet-picks { grid-template-columns: repeat(auto-fill, minmax(190px, 240px)); }
@media (max-width: 600px) {
  .pet-head { flex-direction: column; }
  .pet-gallery { grid-template-columns: repeat(2, 1fr); }
  .pet-finder .pf-field, .pet-finder .pf-wide { flex: 1 1 140px; }
  .pet-finder .pf-wide { flex-basis: 100%; }
  .pet-finder .pf-field .input, .pet-finder .pf-wide .input { min-width: 0; width: 100%; }
}

/* ---------- 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: calc(var(--hdr-h, 59px) + 18px); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--panel); font-size: 13px; max-height: calc(100vh - var(--hdr-h, 59px) - 42px); overflow-y: auto; }
.guide-toc ol { padding-left: 18px; margin: 8px 0 0; }
.guide-toc li { margin: 1px 0; }
/* each contents row is clickable across its whole width, not only on its words (guides.js, lore.js, sidebarbox.js) */
.guide-toc li a, .fs-toc-list a { display: block; padding: 3px 6px; margin: 0 -6px; border-radius: 4px; }
.guide-toc li a:hover, .fs-toc-list a:hover { background: rgba(255, 255, 255, .05); text-decoration: none; }
.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; }

/* 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; }
/* the owner's account view and an upload's records (pages/adminview.js) */
.av > .panel { margin: 14px 0; }
.av-back { margin: 0 0 8px; }
.av-banner { padding: 10px 14px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); background: color-mix(in srgb, var(--gold) 8%, var(--panel)); margin-bottom: 12px; }
.av-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.av-head h2 { margin: 0; overflow-wrap: anywhere; }
.av-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.av-nav a, .av-jump a { padding: 4px 10px; border-radius: 999px; background: var(--panel-2); font-size: 13px; text-decoration: none; }
.av-jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.av-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-bottom: 10px; }
.av-facts > div, .av-note { display: flex; flex-direction: column; gap: 2px; }
.av-facts .l, .av-note .l { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.av-note { margin: 10px 0 6px; }
.av-facts .badge { align-self: flex-start; }
.av-upload { border: 1px solid var(--line); border-radius: var(--radius); margin: 8px 0; background: var(--panel); }
.av-upload.av-bad { border-color: color-mix(in srgb, var(--removed) 55%, var(--line)); }
.av-upload.av-warn { border-color: color-mix(in srgb, var(--changed) 45%, var(--line)); }
.av-upload > summary { cursor: pointer; padding: 10px 12px; display: grid; grid-template-columns: 150px 1fr auto; gap: 4px 12px; align-items: baseline; }
.av-upload > summary .av-meta { grid-column: 2; }
.av-upload > summary .av-badges { grid-column: 3; grid-row: 1; display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.av-upload[open] > summary { border-bottom: 1px solid var(--line); }
.av-records { padding: 8px 12px 12px; min-width: 0; }
.av-rec-row > td { background: var(--panel); }
.av-flags { list-style: none; padding: 0; margin: 6px 0; }
.av-flags li { margin: 4px 0; }
.av-sec h4 { margin: 14px 0 6px; }
.av-table td { vertical-align: top; }
.av-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 10px 0; }
.av-types .stat-tile { display: flex; flex-direction: column; gap: 2px; }
.av-types b { font-size: 20px; }
.av-types .av-new { font-size: inherit; color: var(--new); }
@media (max-width: 640px) {
  .av-upload > summary { grid-template-columns: 1fr; }
  .av-upload > summary .av-meta, .av-upload > summary .av-badges { grid-column: 1; grid-row: auto; justify-content: flex-start; }
}
/* the admin layout (pages/admin.js, pages/adminhome.js): a short side menu in groups, a page head with one line, the bell */
.adm-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.adm-top h1 { margin: 0; }
.adm-bell-wrap { margin-left: auto; position: relative; }
.adm-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--panel-2); color: var(--text); cursor: pointer; }
.adm-bell:hover, .adm-bell[aria-expanded="true"] { color: var(--gold); }
.adm-bell-n { position: absolute; top: -3px; right: -4px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--removed); color: #fff; font-size: 11px; font-weight: 700; line-height: 19px; text-align: center; }
.adm-bell-pop { position: absolute; right: 0; top: 48px; z-index: 40; width: min(400px, calc(100vw - 32px)); background: var(--bg-2); border-radius: 12px; box-shadow: var(--shadow); padding: 12px; }
.adm-bell-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.adm-al-list { list-style: none; margin: 0 0 8px; padding: 0; max-height: 60vh; overflow: auto; }
.adm-al { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; }
.adm-al + .adm-al { margin-top: 2px; }
.adm-al.unread { background: color-mix(in srgb, var(--gold) 9%, transparent); }
.adm-al > a { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.adm-al > a:hover b { color: var(--gold); }
.adm-al details { flex-basis: 100%; }
.adm-al-k { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.adm-al-t { font-size: 13px; color: var(--muted); white-space: pre-line; }
.adm-al-read { background: none; border: 0; color: var(--link); cursor: pointer; font: inherit; font-size: 12px; padding: 2px 4px; }
.adm-al-list.full { max-height: none; }
.adm-al-list.full .adm-al { padding: 10px 12px; }
/* done: what the alert is about was dealt with (backend/alerts.py resolve), greyed with who did what */
.adm-al.done > a { opacity: .62; }
.adm-al.done > a b { font-weight: 600; }
.adm-al-done { color: var(--muted); }
.adm-al-done::before { content: "✓ "; color: var(--gold); }
.adm-bell-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.adm-bell-tabs .tips-tabs { margin: 0 0 6px; }
.adm { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 32px; margin-top: 16px; align-items: start; }
.adm-nav { position: sticky; top: calc(var(--hdr-h, 59px) + 18px); }
.adm-menu { display: none; }
.adm-nav-list a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 7px; color: var(--text); font-size: 14px; }
.adm-nav-list a:hover { background: var(--panel-2); text-decoration: none; }
.adm-nav-list a.active { background: var(--panel-2); color: var(--gold); font-weight: 600; }
.adm-nav-home { font-weight: 650; }
.adm-nav-group h4 { margin: 16px 0 4px; padding: 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.adm-badge { min-width: 20px; padding: 1px 6px; border-radius: 10px; background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold); font-size: 11.5px; font-weight: 700; text-align: center; }
.adm-badge:empty { display: none; }
.adm-page-head h2 { margin: 0 0 2px; }
.adm-lede { margin: 0 0 18px; color: var(--muted); max-width: 760px; }
.adm-needs { display: grid; gap: 6px; }
.adm-need { display: grid; grid-template-columns: 60px minmax(0, 1fr) 16px; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 10px; background: var(--panel); color: var(--text); }
.adm-need:hover { background: var(--panel-2); text-decoration: none; }
.adm-need > span:nth-child(2) { display: flex; flex-direction: column; gap: 1px; }
.adm-need-n { font-size: 24px; color: var(--gold); text-align: right; font-variant-numeric: tabular-nums; }
.adm-need.warn .adm-need-n { color: var(--changed); }
.adm-need.bad .adm-need-n { color: var(--removed); }
.adm-need.good .adm-need-n { color: var(--new); }
.adm-go { color: var(--muted); font-size: 22px; line-height: 1; }
.adm-clear { padding: 16px 18px; border-radius: 10px; background: color-mix(in srgb, var(--new) 10%, var(--panel)); }
.adm-quiet { margin: 10px 0 0; }
.adm-h3 { margin: 26px 0 10px; }
.adm-today { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 8px; }
.adm-tile { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 10px; background: var(--panel); color: var(--text); }
.adm-tile:hover { background: var(--panel-2); text-decoration: none; }
.adm-tile-l { font-size: 12.5px; color: var(--muted); }
.adm-tile-v { font-size: 22px; font-variant-numeric: tabular-nums; }
.adm-spark { color: var(--gold); margin: 4px 0 2px; max-width: 100%; }
.adm-glance { color: var(--muted); }
.adm-set { margin-bottom: 30px; }
.adm-set h3 { margin: 0 0 6px; }
.adm-set-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.adm-row { display: grid; gap: 6px; margin: 12px 0 18px; max-width: 720px; }
.adm-row label { display: flex; flex-direction: column; gap: 4px; }
.adm-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.adm-when { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; max-width: none; }
.adm-when label { flex-direction: row; align-items: center; gap: 6px; }
.adm-when .input { width: auto; }
.adm-prefs td { vertical-align: middle; }
.adm-prefs .input { width: auto; }
.adm-prefs-g td { padding-top: 16px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.adm-sent { padding-left: 18px; }
@media (max-width: 900px) {
  .adm { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .adm-nav { position: static; }
  .adm-menu { display: flex; width: 100%; gap: 8px; align-items: center; padding: 10px 14px; border-radius: 8px; border: 0; background: var(--panel-2); color: var(--text); font: inherit; cursor: pointer; }
  .adm-menu > span { color: var(--muted); }
  .adm-menu::after { content: '▾'; margin-left: auto; color: var(--muted); }
  .adm-nav-list { display: none; padding: 6px 0 0; }
  .adm-nav.open .adm-nav-list { display: block; }
  .adm-need { grid-template-columns: 46px minmax(0, 1fr) 12px; gap: 10px; padding: 10px 12px; }
  .adm-need-n { font-size: 20px; }
  .adm-today { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.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); }
/* How you play (playstyle.js): the welcome dialog, the home page's "For you" row, /me */
.play-dlg { max-width: 640px; width: calc(100% - 32px); padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text); }
.play-dlg::backdrop { background: rgba(4, 8, 18, .72); }
.play-form { padding: 20px 22px; display: grid; gap: 12px; }
.play-form h2 { margin: 0; }
.play-form p { margin: 0; }
.play-form fieldset { border: 0; padding: 0; margin: 4px 0 0; }
.play-form legend { font-weight: 600; margin-bottom: 8px; }
.play-opts { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.play-opts.two { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.play-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); cursor: pointer; }
.play-opt:hover { border-color: var(--gold-2); }
.play-opt:has(input:checked) { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, var(--panel-2)); }
.play-opt input { margin-top: 3px; accent-color: var(--gold); }
.play-opt b { display: block; }
.play-opt small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.4; margin-top: 2px; }
.play-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.play-row { margin: 16px 0; }
.play-row-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.play-row-head h2 { margin: 0 0 8px; }
.play-tiles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.play-tile { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); min-width: 0; }
.play-tile:hover { text-decoration: none; border-color: var(--gold-2); }
.play-tile img { border-radius: 6px; box-shadow: 0 0 0 1px #000; flex: none; }
.play-tile b { display: block; color: #fff; }
.play-tile small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.play-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 10px;
  background: color-mix(in srgb, var(--gold) 6%, var(--panel)); }
.play-ask h2 { margin: 0 0 4px; }
.play-ask p { margin: 0; max-width: 62ch; }

/* Buffs and nerfs (pages/buffsnerfs.js): the changelog's entries, labelled */
.badge.bn-buff, .bn-n.bn-buff { background: rgba(61, 220, 132, .15); color: var(--new); }
.badge.bn-nerf, .bn-n.bn-nerf { background: rgba(255, 107, 107, .14); color: var(--removed); }
.badge.bn-changed, .bn-n.bn-changed { background: rgba(255, 179, 71, .15); color: var(--changed); }
.badge.bn-new, .bn-n.bn-new { background: rgba(127, 178, 255, .12); color: var(--link); }
.badge.bn-removed, .bn-n.bn-removed { background: var(--panel-2); color: var(--muted); }
.bn-n { display: inline-block; min-width: 2.2em; padding: 0 6px; border-radius: 4px; font-variant-numeric: tabular-nums; font-weight: 600; text-align: center; }
.bn-classes { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.bn-classes a { padding: 3px 11px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; background: var(--panel); }
.bn-classes a:hover { text-decoration: none; border-color: var(--gold-2); }
.bn-classes a.on { border-color: var(--gold-2); background: color-mix(in srgb, var(--gold) 9%, var(--panel)); }
.bn-table { max-width: 640px; }
.bn-how { margin: 12px 0 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); font-size: 14px; }
.bn-how summary { cursor: pointer; color: var(--link); }
.bn-how p { margin: 8px 0 0; }
.bn-quiet { display: inline-flex; align-items: center; gap: 6px; }
.bn-build h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 22px; }
.bn-cls { font-size: 12.5px; font-weight: 600; }
.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.lg-deny { animation: tc-shake .32s ease; }
.lg-node.lg-deny .icon { box-shadow: 0 0 0 2px #ff4040, 0 0 10px 2px rgba(255, 64, 64, .55); }
@media (prefers-reduced-motion: reduce) { .lg-node.lg-deny { animation: none; } }
.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: calc(var(--hdr-h, 59px) + 12px); }
@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 first-10-levels section: race and class picker, starting areas and races (guides.js) */
.gh-pick { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 16px 18px; background: var(--panel); border-radius: 12px; }
.gh-pick label { display: grid; gap: 4px; font-size: 13px; color: #c3cad8; }
.gh-pick select { min-width: 190px; }
.gh-sub { margin: 22px 0 10px; font-size: 15px; }
.gh-mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.gh-mini.races { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.gh-mini a { display: grid; gap: 3px; padding: 12px 14px; background: var(--panel); border-radius: 10px; color: var(--text); text-decoration: none; }
.gh-mini a:hover { background: #1b2232; text-decoration: none; }
.gh-mini b { color: #fff; font-size: 15px; }
.gh-mini small { color: #b7bfce; font-size: 13px; line-height: 1.4; }
@media (max-width: 640px) {   /* guide tables with "stack": one small card per row on a phone (news.js renderBlocks) */
  .guide-table.stack thead { display: none; }
  .guide-table.stack, .guide-table.stack tbody, .guide-table.stack tr, .guide-table.stack td { display: block; width: 100%; }
  .guide-table.stack tr { padding: 10px 2px; border-bottom: 1px solid var(--border, #273044); }
  .guide-table.stack td { border: 0; padding: 2px 0; }
  .guide-table.stack td[data-label]::before { content: attr(data-label) ": "; color: #8f9bb3; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
  .guide-table.stack td:first-child { font-weight: 600; }
}
@media (max-width: 520px) { .gh-pick { flex-direction: column; align-items: stretch; } .gh-pick select { min-width: 0; width: 100%; } .gh-pick .btn { text-align: center; } }

/* 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: calc(var(--hdr-h, 59px) + 12px); }
.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: calc(var(--hdr-h, 59px) + 12px); }
.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 label { display: flex; align-items: center; gap: 6px; }
.pf-tools label .input { width: 6rem; }
.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: calc(var(--hdr-h, 59px) + 22px); }
.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-banner.quiz-banner { margin: 18px 0 18px; background: linear-gradient(120deg, rgba(91, 200, 255, .18), rgba(16, 22, 40, .88) 65%); }   /* home: the class quiz, above the class icons */
.vt-banner.quiz-banner:hover { background: linear-gradient(120deg, rgba(91, 200, 255, .26), rgba(16, 22, 40, .88) 65%); }
/* home: the Helper's journal, the new feature, pinned under the hero (pages/home.js); a slice of the page's timeline on the right */
.jn-banner { position: relative; display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: center; margin: 18px 0 0; padding: 18px 20px;
  border-radius: 14px; border: 1px solid rgba(240, 195, 90, .45); color: var(--text); overflow: hidden;
  background: radial-gradient(120% 140% at 0% 0%, rgba(240, 195, 90, .22), transparent 55%), linear-gradient(120deg, #141b33, rgba(11, 17, 32, .94)); }
.jn-banner:hover { text-decoration: none; border-color: var(--gold); }
.jn-banner .jn-new { display: inline-block; margin-bottom: 6px; padding: 2px 9px; border-radius: 99px; background: var(--gold); color: #1a1305;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.jn-banner h2 { margin: 0 0 4px; color: #fff; font-size: 21px; line-height: 1.25; border: 0; padding: 0; }
.jn-banner p { margin: 0 0 10px; color: #cfd5e1; font-size: 14px; }
.jn-banner em { font-style: normal; color: var(--gold); font-weight: 650; font-size: 14px; }
.jn-banner .jn-peek { display: grid; gap: 6px; padding: 10px; border-radius: 10px; background: #070b16; border: 1px solid #1f2a4a; font-size: 12px; }
.jn-peek div { display: flex; gap: 8px; align-items: center; min-width: 0; }
.jn-peek b { color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jn-peek small { margin-left: auto; color: #6f7b99; white-space: nowrap; }
.jn-peek .jn-step-mini { padding: 6px 8px; border-radius: 7px; background: #0e1426; border: 1px solid #8a6d2a; color: #ffd47a; font-weight: 600; }
@media (max-width: 760px) { .jn-banner { grid-template-columns: 1fr; } .jn-banner .jn-peek { display: none; } }

/* /journal (pages/journal.js): the Helper window drawn in its own colours (ForeverDB_Helper/Core.lua's ns.C) */
.jn-cta { display: flex; flex-wrap: wrap; gap: 8px; }
.jn-mock { margin: 22px auto 8px; max-width: 1060px; }
.jn-mock figcaption { margin-top: 8px; color: var(--muted); font-size: 13px; text-align: center; }
.jn-win { display: grid; grid-template-columns: 196px 1fr; min-height: 560px; border-radius: 14px; overflow: hidden; background: #070b16;
  border: 1px solid #2f3d6b; box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 0 6px rgba(240, 195, 90, .05); font-size: 13px; color: #dbe1ee; }
.jn-nav { background: #0b1120; border-right: 1px solid #1f2a4a; padding: 14px 10px; display: flex; flex-direction: column; gap: 10px; }
.jn-brand { display: flex; gap: 9px; align-items: center; padding: 0 4px; }
.jn-brand span { display: grid; line-height: 1.15; } .jn-brand b { color: #fff; font-size: 15px; } .jn-brand i { font-style: normal; color: #3fd0d9; font-size: 12px; font-weight: 600; }
.jn-char { display: grid; padding: 8px 10px; border-radius: 8px; background: #111831; border: 1px solid #1f2a4a; }
.jn-char b { color: #fff; } .jn-char span { color: #8d99b8; font-size: 12px; }
.jn-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.jn-nav li { display: flex; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 7px; color: #aab4cc; font-weight: 600; }
.jn-nav li.on { background: #1a2441; color: #fff; }
.jn-ico { width: 15px; height: 15px; border: 2px solid currentColor; border-radius: 4px; opacity: .7; flex: none; }
.jn-nav li.on .jn-ico { color: #f0c35a; opacity: 1; }
.jn-ico-today, .jn-ico-runs, .jn-ico-goals { border-radius: 50%; }
.jn-ico-journal { border-radius: 2px 2px 4px 4px; border-top-width: 3px; }
.jn-saved { margin-top: auto; display: flex; gap: 6px; align-items: center; padding: 0 6px; color: #6f7b99; font-size: 11px; }
.jn-saved i { width: 7px; height: 7px; border-radius: 50%; background: #3ddc84; }
.jn-main { padding: 18px 22px; min-width: 0; }
.jn-head { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; }
.jn-head h3 { margin: 0; color: #fff; font-size: 21px; } .jn-head p { margin: 2px 0 0; color: #8d99b8; }
.jn-btn { display: inline-block; padding: 5px 11px; border-radius: 7px; border: 1px solid #2f3d6b; background: #111831; color: #dbe1ee; font-size: 12px; font-weight: 600; white-space: nowrap; }
.jn-btn.gold { background: #f0c35a; border-color: #f0c35a; color: #1a1305; }
.jn-btn.sm { padding: 3px 9px; font-size: 11px; margin-left: auto; align-self: center; }
.jn-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0 6px; }
.jn-stats div { display: grid; padding: 10px 14px; border-radius: 10px; background: #0e1426; border: 1px solid #1f2a4a; }
.jn-stats span { color: #8d99b8; font-size: 12px; } .jn-stats b { color: #fff; font-size: 20px; }
.jn-main h4 { margin: 14px 0 8px; color: #fff; font-size: 15px; }
.jn-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.jn-step { padding: 11px 14px; border-radius: 10px; background: #0e1426; border: 1px solid #1f2a4a; }
.jn-step.gold-b { border-color: #8a6d2a; }
.jn-step b { color: #fff; } .jn-step p { margin: 3px 0 6px; color: #b9c2d8; font-size: 12px; line-height: 1.45; }
.jn-warn { color: #ffb347; font-weight: 600; }
.jn-tl-head { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.jn-seg { display: flex; gap: 2px; padding: 3px; border-radius: 8px; background: #0b1120; border: 1px solid #26325a; flex-wrap: wrap; }
.jn-seg span { padding: 2px 8px; border-radius: 6px; color: #aab4cc; font-size: 11px; font-weight: 600; } .jn-seg span.on { background: #22305a; color: #fff; }
.jn-day { margin-top: 8px; padding: 6px 0 4px; color: #6f7b99; font-size: 11px; font-weight: 600; border-bottom: 1px solid #18213d; }
.jn-row { display: flex; gap: 10px; align-items: flex-start; padding: 7px 8px; border-bottom: 1px solid #18213d; }
.jn-row:hover { background: #141c33; }
.jn-time { width: 38px; color: #6f7b99; font-size: 11px; padding-top: 2px; flex: none; } .jn-lv { width: 40px; color: #8d99b8; font-size: 11px; padding-top: 2px; flex: none; }
.jn-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; background: #8d99b8; }
.jn-dot.gold { background: #f0c35a; } .jn-dot.teal { background: #3fd0d9; } .jn-dot.blue { background: #8fb8ff; } .jn-dot.red { background: #ff6b6b; } .jn-dot.green { background: #5fe39a; }
.jn-txt { display: grid; min-width: 0; } .jn-txt b { color: #fff; font-weight: 600; } .jn-txt span { color: #8d99b8; font-size: 12px; }
.jn-txt q { color: #7fe3f0; font-size: 12px; margin-top: 2px; }
.jn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.jn-grid div { padding: 12px 14px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); }
.jn-grid b { color: #fff; } .jn-grid p { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; }
@media (max-width: 760px) {
  .jn-win { grid-template-columns: 1fr; min-height: 0; } .jn-nav { display: none; }
  .jn-main { padding: 14px; } .jn-stats, .jn-steps { grid-template-columns: 1fr; } .jn-head .jn-btn { display: none; }
  .jn-lv { display: none; } .jn-row .jn-btn.sm { display: none; }
}

.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: calc(var(--hdr-h, 59px) + 22px); }
.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; }
.qz-card[hidden], .qz-sec[hidden] { display: none; }
.qz-find { display: grid; gap: 6px; max-width: 460px; margin: 20px 0; font-size: 13px; color: var(--muted); }
.qz-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin: 12px 0; }
.qz-filters label { display: grid; gap: 5px; font-size: 12px; color: var(--muted); }
.qz-filters input { width: 110px; min-width: 0; }
.qz-progress { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; margin-top: 18px; }
.qz-q { scroll-margin-top: calc(var(--hdr-h, 59px) + 37px); }
.qz-q:target { outline: 2px solid var(--gold, #ffd100); }
.qz-complete { border-left: 3px solid #3ddc84; }
.qz-guide { margin-top: 12px; border-top: 1px solid var(--border, #293345); padding-top: 10px; }
.qz-guide summary { cursor: pointer; font-size: 13px; color: var(--gold, #ffd100); }
.qz-guide .qz-chain { margin-top: 12px; }
.qz-steps { padding-left: 22px; margin: 14px 0; }
.qz-steps li { padding: 0 0 14px 5px; font-size: 13px; }
.qz-steps label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.qz-steps input { accent-color: #3ddc84; width: 16px; height: 16px; }
.qz-steps li > div { margin: 6px 0 0 25px; line-height: 1.65; }
.qz-steps .done label { color: #3ddc84; }
.qz-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 10px; }
#qz-feedback { overflow-wrap: anywhere; }
.qg-header { margin-bottom: 18px; }
.qg-header .lead { margin-bottom: 8px; white-space: pre-line; }
.qg-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.qg-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 20px; align-items: start; }
.qg-main, .qg-side { min-width: 0; display: grid; gap: 16px; }
.qg-layout .panel { margin: 0; overflow-wrap: anywhere; }
.qg-layout h2 { margin-top: 0; }
.qg-layout h2 .badge, .qg-layout h3 .badge { vertical-align: middle; }
.qg-entities { list-style: none; padding: 0; }
.qg-entities > li { border-left: 2px solid var(--border, #293345); padding: 8px 0 8px 12px; margin-bottom: 8px; }
.qg-locations { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.qg-locations > span { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.qg-objectives { list-style: none; padding: 0; }
.qg-objective { margin: 18px 0; }
.qg-map { height: 430px; width: 100%; background: #101722; border-radius: 8px; z-index: 0; }
.qg-map-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.qg-map-controls label { display: flex; align-items: center; gap: 8px; min-width: 0; }
.qg-map-controls select { min-width: 0; max-width: 100%; }
.qg-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; margin-bottom: 10px; }
.qg-legend label { display: inline-flex; gap: 5px; align-items: center; cursor: pointer; }
.qg-pin > span { display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid #fff; border-radius: 50%; color: #111; font-size: 16px; font-weight: 800; box-shadow: 0 2px 6px #000; }
.qg-facts { margin: 0; }
.qg-facts dt { color: var(--muted); font-size: 12px; margin-top: 12px; }
.qg-facts dd { margin: 4px 0 0; }
.qg-side small { display: block; color: var(--muted); }
.qg-side li { margin-bottom: 10px; }
#qg-progress { display: block; width: 100%; margin: 8px 0; }
#qg-map-section { scroll-margin-top: calc(var(--hdr-h, 59px) + 32px); }
.qg-search-results { list-style: none; padding: 0; }
.qg-search-results li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border, #293345); }
@media (max-width: 900px) { .qg-layout { grid-template-columns: 1fr; } .qg-side { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .qg-side { grid-template-columns: 1fr; } .qg-map { height: 310px; } .qg-search-results li { flex-direction: column; gap: 2px; } }
@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; } }

/* ---- ForeverDB UI presets (pages/presets.js): the gallery, a preset's page, the share form, the /ui page's strip ---- */
.ps-page { max-width: 1240px; }
.ps-lead { font-size: 16px; color: #c9d0dd; max-width: 64ch; margin: 4px 0 0; }
.ps-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px 28px; padding: 26px 28px; border-radius: 16px; margin: 4px 0 18px;
  background: radial-gradient(90% 140% at 0% 0%, rgba(240, 195, 90, .10), transparent 60%), radial-gradient(70% 120% at 100% 100%, rgba(63, 208, 217, .07), transparent 60%), var(--panel); }
.ps-hero h1 { font-size: 34px; margin: 0; }
.ps-how { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 0; margin: 14px 0 0; color: var(--muted); font-size: 13.5px; }
.ps-how li { display: inline-flex; align-items: center; gap: 8px; }
.ps-how b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(240, 195, 90, .16); color: var(--gold); font-size: 11.5px; }
.ps-how code { font-size: 12.5px; }
.ps-hero-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
.btn.ps-cta { display: inline-flex; align-items: center; gap: 7px; padding: 11px 18px; font-size: 15px; border-radius: 9px; }
.ps-mine-link { font-size: 13.5px; }
.ps-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 10px; }
.ps-search { flex: 1 1 280px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 10px; background: var(--panel); color: var(--muted); }
.ps-search:focus-within { box-shadow: 0 0 0 2px rgba(240, 195, 90, .35); }
.ps-search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; padding: 10px 0; color: var(--text); }
.ps-sort { display: inline-flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--panel); }
.ps-sort button { border: 0; background: none; color: var(--muted); padding: 7px 13px; border-radius: 7px; font-weight: 600; font-size: 13.5px; cursor: pointer; white-space: nowrap; }
.ps-sort button:hover { color: var(--text); }
.ps-sort button[aria-pressed="true"] { background: var(--gold-2); color: #1a1205; }
.ps-filters { margin: 0 0 6px; }
.ps-filters > summary { display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; list-style: none; color: var(--muted); font-weight: 600; font-size: 13.5px; }
.ps-filters > summary::-webkit-details-marker { display: none; }
.ps-filters > summary::before { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform .15s; }
.ps-filters[open] > summary::before { transform: rotate(45deg) translate(-2px, -1px); }
.ps-picked { color: var(--gold); font-weight: 600; }
.ps-clear { border: 0; background: none; color: var(--link); cursor: pointer; font: inherit; padding: 0 0 0 6px; }
.ps-groups { display: grid; gap: 8px; margin: 6px 0 4px; }
.ps-group { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; align-items: start; }
.ps-group-name { padding-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ps-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ps-chip { border: 0; border-radius: 999px; padding: 5px 12px; background: rgba(255, 255, 255, .06); color: var(--text); font-size: 13px; cursor: pointer; transition: background .12s; }
.ps-chip:hover { background: rgba(255, 255, 255, .11); }
.ps-chip[style*="--cc"] { color: color-mix(in srgb, var(--cc) 70%, #fff); }
.ps-chip[aria-pressed="true"] { background: color-mix(in srgb, var(--cc, var(--gold)) 24%, transparent); color: var(--cc, var(--gold)); font-weight: 650; }
.ps-count { color: var(--muted); font-size: 13px; margin: 8px 0; min-height: 1.2em; }
.ps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; transition: opacity .15s; }
.ps-grid[aria-busy="true"] { opacity: .5; }
.ps-card { display: flex; flex-direction: column; min-width: 0; border-radius: 12px; overflow: hidden; background: var(--panel); color: var(--text);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .22); transition: background .15s, transform .15s; }
.ps-card:hover { text-decoration: none; background: #1b2232; transform: translateY(-2px); }
.ps-shot { position: relative; display: block; aspect-ratio: 16 / 9; background: #0b0f1c; overflow: hidden; }
.ps-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ps-flag { position: absolute; top: 10px; left: 10px; padding: 3px 8px; border-radius: 6px; background: rgba(8, 11, 20, .82); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; }
.ps-flag.gold { color: var(--gold); }
.ps-flag.neg { color: var(--removed); left: auto; right: 10px; }
.ps-body { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 13px; flex: 1; min-width: 0; }
.ps-title { font-size: 15.5px; line-height: 1.3; color: #fff; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ps-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.ps-tag { font-size: 11.5px; padding: 2px 8px; border-radius: 6px; background: rgba(255, 255, 255, .06); color: #c3cad8; }
.ps-tag[style*="--cc"] { color: var(--cc); background: color-mix(in srgb, var(--cc) 11%, transparent); }
.ps-card .ps-tags { max-height: 21px; overflow: hidden; }   /* one line on cards: tags that don't fit wait for the preset's page */
.ps-meta { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); }
.ps-by { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-nums { display: inline-flex; gap: 12px; flex: none; font-variant-numeric: tabular-nums; }
.ps-nums span, .ps-stat { display: inline-flex; align-items: center; gap: 4px; }
.ps-more { text-align: center; margin: 22px 0 6px; }
.ps-empty { grid-column: 1 / -1; text-align: center; padding: 40px 20px; border-radius: 12px; background: var(--panel); }
.ps-empty p { margin: 0 0 14px; }
/* a preset's page */
.ps-detail h1 { font-size: 32px; margin: 0 0 6px; overflow-wrap: anywhere; }
.ps-badge { font-size: 11.5px; vertical-align: middle; margin-left: 4px; }
.ps-byline { color: var(--muted); margin: 0 0 10px; }
.ps-byline b { color: var(--text); }
.ps-tags-big { gap: 6px; }
.ps-tags-big .ps-tag { font-size: 12.5px; padding: 3px 10px; }
.ps-tags-big a.ps-tag:hover { text-decoration: none; background: rgba(255, 255, 255, .11); }
.ps-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; margin-top: 18px; }
.ps-main { display: block; width: 100%; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: #0b0f1c; cursor: zoom-in; box-shadow: 0 14px 34px rgba(0, 0, 0, .35); }
.ps-main img { display: block; width: 100%; height: auto; }
.ps-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.ps-thumb { padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: #0b0f1c; aspect-ratio: 16 / 9; cursor: pointer; opacity: .55; transition: opacity .15s; }
.ps-thumb:hover, .ps-thumb[aria-current="true"] { opacity: 1; }
.ps-thumb[aria-current="true"] { box-shadow: 0 0 0 2px var(--gold); }
.ps-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ps-side { position: sticky; top: calc(var(--hdr-h, 59px) + 18px); padding: 18px; border-radius: 12px; background: var(--panel); }
.btn.ps-copy { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 14px; font-size: 16.5px; border-radius: 10px; }
.btn.ps-copy svg { width: 19px; height: 19px; }
.btn.ps-copy.done { background: linear-gradient(180deg, #43d88c, #25a764); color: #04160c; }
.ps-copied { min-height: 1.3em; margin: 8px 0 0; font-size: 13px; color: #c9d0dd; }
.ps-stats { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 10px 0 2px; color: var(--muted); }
.ps-stat b { color: #fff; }
.ps-like { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .07); color: var(--text); cursor: pointer; font: inherit; }
.ps-like:hover:not(:disabled) { background: rgba(255, 107, 138, .14); }
.ps-like.on { color: #ff7b98; background: rgba(255, 107, 138, .14); }
.ps-like:disabled { opacity: .55; cursor: default; }
h2.ps-side-h { font-size: 15px; margin: 20px 0 8px; }
.ps-steps { margin: 0; padding-left: 20px; font-size: 13.5px; color: #c9d0dd; }
.ps-steps li { margin: 6px 0; line-height: 1.5; }
.ps-code { margin-top: 14px; font-size: 13px; }
.ps-code summary { cursor: pointer; color: var(--link); }
.ps-code textarea { width: 100%; margin-top: 8px; font: 11.5px/1.45 ui-monospace, Consolas, monospace; resize: vertical; word-break: break-all; }
.ps-section { margin-top: 32px; }
.ps-section > h2 { margin: 0 0 12px; }
.ps-desc { max-width: 78ch; color: #d5dbe7; overflow-wrap: anywhere; }
.ps-desc p { margin: 0 0 10px; }
.ps-sets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ps-sets-box { padding: 16px 18px; border-radius: 12px; background: var(--panel); }
.ps-sets-box h3 { margin: 0 0 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ps-dl { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 7px 14px; margin: 0; font-size: 14px; }
.ps-dl dt { color: var(--muted); }
.ps-dl dd { margin: 0; color: #fff; }
.ps-swatches { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; font-size: 13px; }
.ps-swatch { display: inline-flex; align-items: center; gap: 7px; }
.ps-swatch i { width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.ps-swatch small { color: var(--muted); }
.ps-parts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.ps-parts li { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; }
.ps-parts li > i { width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--new); flex: none; }
.ps-parts li.off > i { background: #4a5268; }
.ps-parts li.off b { color: var(--muted); font-weight: 500; }
.ps-parts small { display: block; color: var(--muted); font-size: 12px; }
.ps-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 30px; padding-top: 14px; }
.ps-foot-link { border: 0; background: none; padding: 0; color: var(--muted); font: inherit; font-size: 13.5px; cursor: pointer; }
.ps-foot-link:hover { color: var(--link); text-decoration: none; }
.ps-report { margin-top: 12px; max-width: 640px; }
.ps-report h3 { margin-top: 0; }
.ps-reasons { display: grid; gap: 6px; margin: 10px 0; }
.ps-reasons label { display: flex; gap: 8px; align-items: center; font-size: 13.5px; cursor: pointer; }
.ps-report textarea { width: 100%; resize: vertical; font: inherit; }
.ps-report-go { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
/* the lightbox */
html.ps-noscroll { overflow: hidden; }
.ps-lb { position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center; padding: 56px 72px; background: rgba(4, 6, 12, .95); }
.ps-lb figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 100%; }
.ps-lb img { display: block; max-width: 100%; max-height: calc(100vh - var(--hdr-h, 59px) - 82px); width: auto; height: auto; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
.ps-lb figcaption { color: var(--muted); font-size: 13px; min-height: 1.2em; }
.ps-lb-btn { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .09); color: #fff; cursor: pointer; }
.ps-lb-btn:hover { background: rgba(255, 255, 255, .18); }
.ps-lb-btn svg { width: 22px; height: 22px; }
.ps-lb-close { top: 14px; right: 14px; }
.ps-lb-prev { left: 14px; top: calc(50% - 22px); }
.ps-lb-next { right: 14px; top: calc(50% - 22px); }
/* the share form */
.ps-form { display: grid; gap: 14px; max-width: 900px; margin-top: 18px; }
.ps-step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 16px; padding: 20px 22px; border-radius: 14px; background: var(--panel); }
.ps-num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(240, 195, 90, .14); color: var(--gold); font-weight: 800; }
.ps-step h2 { margin: 3px 0 10px; font-size: 19px; }
.ps-hint { color: var(--muted); font-size: 13.5px; margin: 0 0 12px; }
.ps-field { display: grid; gap: 6px; margin: 0 0 14px; }
.ps-field > span { font-weight: 600; font-size: 14px; }
.ps-field small { font-weight: 400; }
.ps-field .input, .ps-code-in { width: 100%; }
.ps-form textarea { resize: vertical; font: inherit; line-height: 1.5; }
.ps-form textarea, .ps-code textarea, .ps-report textarea { color: var(--text); }   /* (the base rule gives inputs, not textareas, the text colour) */
.ps-form textarea.ps-code-in { font: 12px/1.45 ui-monospace, Consolas, monospace; word-break: break-all; }
.ps-drop { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 18px; border-radius: 12px; background: rgba(255, 255, 255, .035); transition: background .12s; }
.ps-drop.over { background: rgba(240, 195, 90, .12); }
.ps-drop.full { display: none; }
.ps-drop .btn { display: inline-flex; align-items: center; gap: 6px; }
.ps-shots { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.ps-shots:empty { display: none; }
.ps-shotitem { border-radius: 10px; overflow: hidden; background: rgba(0, 0, 0, .28); cursor: grab; }
.ps-shotitem.dragging { opacity: .4; }
.ps-shotitem.over { box-shadow: 0 0 0 2px var(--gold); }
.ps-shotitem.bad { background: rgba(255, 107, 107, .12); }
.ps-shotimg { position: relative; display: block; aspect-ratio: 16 / 9; background: #0b0f1c; }
.ps-shotimg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ps-busy { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 9px; background: rgba(6, 9, 18, .85); font-size: 12px; color: #c9d0dd; }
.ps-busy.bad { color: #ff9b9b; }
.ps-shotbar { display: flex; align-items: center; gap: 2px; padding: 5px 6px; }
.ps-shotbar button { display: grid; place-items: center; min-width: 30px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; font: inherit; }
.ps-shotbar button:hover:not(:disabled) { background: rgba(255, 255, 255, .08); color: #fff; }
.ps-shotbar button:disabled { opacity: .3; cursor: default; }
.ps-shotbar .ps-shottext { flex: 1; display: flex; align-items: center; justify-content: flex-start; padding: 0 6px; font-size: 12.5px; }
.ps-check { margin-top: 10px; }
.ps-check .pl-warn { margin-bottom: 10px; }
.ps-ok { display: flex; gap: 8px; align-items: center; }
.ps-ok svg { color: var(--new); flex: none; }
.ps-ver { max-width: 320px; margin: 16px 0 0; }
.ps-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 4px; }
.btn.ps-go { padding: 11px 24px; font-size: 15px; border-radius: 9px; }
.ps-msg { font-size: 13.5px; color: var(--muted); }
.ps-msg.bad { color: #ff9b9b; }
.ps-login { max-width: 660px; padding: 24px 26px; border-radius: 14px; background: var(--panel); margin-top: 14px; }
.ps-login .ps-lead { margin: 0 0 10px; }
/* the /ui page's Presets section */
.ps-promo { margin: 26px 0 8px; padding: 20px 22px; border-radius: 14px;
  background: radial-gradient(90% 140% at 0% 0%, rgba(240, 195, 90, .10), transparent 60%), var(--panel); }
.prose .ps-promo h2 { margin: 0 0 6px; padding: 0; border: 0; border-image: none; }
.ps-promo p { margin: 0; color: #c9d0dd; }
.ps-promo-go { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
#ui-presets:not(:empty) { margin-top: 18px; }
.ps-grid.ps-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ps-grid-3 .ps-title { font-size: 14px; }
.ps-grid-3 .ps-card { box-shadow: none; background: rgba(255, 255, 255, .04); }
.ps-grid-3 .ps-card:hover { background: rgba(255, 255, 255, .08); }
@media (max-width: 960px) {
  .ps-layout { grid-template-columns: minmax(0, 1fr); }
  .ps-side { position: static; }
}
@media (max-width: 760px) {
  .ps-hero { flex-direction: column; align-items: stretch; padding: 20px 18px; }
  .ps-hero h1, .ps-detail h1 { font-size: 26px; }
  .ps-hero-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
  .ps-sort { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .ps-sort button { padding: 7px 4px; font-size: 12.5px; }
  .ps-group { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ps-group-name { padding-top: 0; }
  .ps-sets, .ps-parts { grid-template-columns: minmax(0, 1fr); }
  .ps-dl { grid-template-columns: 110px minmax(0, 1fr); }
  .ps-step { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .ps-num { display: none; }
  .ps-grid.ps-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .ps-lb { padding: 56px 6px 76px; }
  .ps-lb-prev, .ps-lb-next { top: auto; bottom: 14px; }
  .ps-lb-prev { left: calc(50% - 54px); }
  .ps-lb-next { right: calc(50% - 54px); }
}

/* How far a video's claims hold up (finds, home, item and set pages): a flat pill, its reason beside it */
.vchk { display: inline-block; font-size: 11px; font-weight: 650; line-height: 1.5; padding: 0 7px; border-radius: 999px; white-space: nowrap;
  background: rgba(141, 153, 184, .16); color: var(--muted); vertical-align: 1px; }
.vchk-off { background: rgba(0, 174, 255, .16); color: #52c7ff; }
.vchk-ok { background: rgba(61, 220, 132, .16); color: #4fe08f; }
.vchk-ok2 { background: rgba(138, 214, 120, .14); color: #a6dc8c; }
.vchk-na { background: rgba(141, 153, 184, .16); color: #b3bdd6; }
.vchk-warn { background: rgba(255, 159, 67, .16); color: #ffae5c; }
.vchk-bad { background: rgba(255, 99, 99, .16); color: #ff7b7b; }
.vchk-info { background: rgba(92, 165, 255, .15); color: #8cc0ff; }
.vchk-none { background: transparent; color: var(--muted); font-weight: 500; padding-left: 0; }
/* New finds' "Show hidden videos": a video the gate hides (tools/news/video_gate.py), dimmed, with its reason */
.vchk-hid { background: rgba(141, 153, 184, .12); color: var(--muted); font-weight: 600; }
.fd-hidden { opacity: .62; }
.fd-all { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; margin: 0 0 10px; }
.vchk-line { margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.vchk-why { margin-left: 6px; }
.vid-row small.vchk-line { display: block; }
.vchk-legend { margin: 4px 0 14px; }
.vchk-legend summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vchk-legend summary::-webkit-details-marker { display: none; }
.vchk-legend ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 5px; font-size: 13px; color: var(--muted); }
.vchk-legend li .vchk { min-width: 104px; text-align: center; margin-right: 6px; }

/* ---------- Ask ForeverDB (backend/ask.py): the Ask button in the search box, the suggestion row and the answer view (pages/ask.js) ---------- */
.ask-spark { display: inline-block; flex: none; width: 12px; height: 12px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l2.6 7.9 7.9 2.6-7.9 2.6-2.6 7.9-2.6-7.9L1.5 12l7.9-2.6z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l2.6 7.9 7.9 2.6-7.9 2.6-2.6 7.9-2.6-7.9L1.5 12l7.9-2.6z'/%3E%3C/svg%3E") center / contain no-repeat; }
.ask-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px;
  border: 0; border-radius: 5px; background: rgba(240, 195, 90, .14); color: var(--gold); font-size: 12.5px; font-weight: 650; cursor: pointer; }
.ask-btn:hover { background: rgba(240, 195, 90, .24); }
.ask-btn[hidden] { display: none; }
html.ask-on .global-search input { padding-right: 68px; }
.suggest a.suggest-ask { background: rgba(240, 195, 90, .06); }
.suggest a.suggest-ask.hl, .suggest a.suggest-ask:hover { background: rgba(240, 195, 90, .14); }
.suggest a.suggest-ask .ask-spark { color: var(--gold); }
.suggest a.suggest-ask { align-items: flex-start; padding-top: 8px; padding-bottom: 8px; }
.suggest a.suggest-ask .ask-spark { margin-top: 4px; }
.suggest a.suggest-ask .ask-row { display: grid; gap: 1px; min-width: 0; }
.suggest a.suggest-ask .ask-row b { color: var(--gold); font-weight: 650; }
.suggest a.suggest-ask .ask-row small { color: var(--text); font-size: 13px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ask-page { max-width: 820px; }
.ask-form { display: flex; gap: 8px; margin: 4px 0 16px; }
.ask-input { flex: 1; min-width: 0; padding: 11px 14px; font-size: 16px; border: 0; border-radius: 10px; background: var(--panel); color: var(--text); outline: none; }
.ask-input:focus { box-shadow: 0 0 0 2px rgba(240, 195, 90, .35); }
.ask-form .btn { border-radius: 10px; padding: 0 18px; }
.ask-card { padding: 18px 20px; border-radius: 14px; background: var(--panel); }
.ask-card > p:first-child { margin-top: 0; }
.ask-q { margin: 0 0 10px; padding: 0; border: 0; font-size: 19px; line-height: 1.35; color: #fff; overflow-wrap: anywhere; }
.ask-steps { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.ask-steps li::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); opacity: .45; margin-right: 8px; vertical-align: 1px; }
.ask-steps li.on::before { opacity: 1; animation: ask-pulse 1s ease-in-out infinite; }
.ask-steps.done { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12px; opacity: .75; }
.ask-steps[hidden] { display: none; }
.ask-text { font-size: 15.5px; line-height: 1.6; overflow-wrap: anywhere; }
.ask-text p { margin: 0 0 10px; }
.ask-text ul, .ask-text ol { margin: 0 0 10px; padding-left: 20px; }
.ask-text li { margin: 4px 0; }
.ask-text .src-classic, .ask-text .badge { vertical-align: 1px; }
.ask-caret { display: inline-block; width: 7px; height: 1.05em; margin-left: 2px; border-radius: 1px; background: var(--gold); vertical-align: text-bottom; animation: ask-blink 1s steps(2) infinite; }
#ask-sources h3 { margin: 18px 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ask-sources { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 14px; }
.ask-sources li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0; }
.ask-sources li .muted { overflow-wrap: anywhere; }
.ask-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 18px; }
.ask-foot[hidden] { display: none; }
.ask-note { color: var(--muted); font-size: 12.5px; }
.ask-vote { display: inline-flex; align-items: center; gap: 5px; }
.ask-vote button { display: grid; place-items: center; width: 34px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .06); color: var(--muted); cursor: pointer; }
.ask-vote button:hover { color: var(--text); background: rgba(255, 255, 255, .11); }
.ask-vote button.down svg { transform: rotate(180deg); }
.ask-vote button.picked { color: var(--gold); background: rgba(240, 195, 90, .16); }
.ask-vote[data-thanks]:not([data-thanks=""])::after { content: attr(data-thanks); margin-left: 4px; color: var(--muted); font-size: 12px; }
.ask-left { margin: 10px 0 0; }
.ask-left:empty { display: none; }
.ask-error { padding: 10px 12px; border-radius: 8px; background: rgba(255, 179, 71, .09); color: #e9d3ae; }
.ask-fallback { margin: 12px 0 0; font-size: 14px; }
.ask-examples { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.ask-examples a { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .06); color: var(--text); font-size: 13.5px; }
.ask-examples a:hover { background: rgba(255, 255, 255, .11); text-decoration: none; }
@keyframes ask-blink { to { opacity: 0; } }
@keyframes ask-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ask-caret, .ask-steps li.on::before { animation: none; } }
@media (max-width: 600px) {
  .ask-card { padding: 14px 15px; border-radius: 12px; }
  .ask-q { font-size: 17px; }
  .ask-form .btn { padding: 0 14px; }
}
/* the admin page's Questions tab */
.aq-bar { height: 8px; margin: 8px 0 4px; border-radius: 999px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.aq-bar i { display: block; height: 100%; border-radius: inherit; background: var(--teal); }
.aq-bar.warn i { background: #ffb347; }
.aq-bar.stop i { background: var(--removed); }
.aq-list td.q { max-width: 460px; overflow-wrap: anywhere; }
.aq-list details summary { cursor: pointer; }
.aq-list details .ask-text { margin-top: 8px; font-size: 14px; }
.admin-days.d30 { grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 3px; }
.admin-day .a, .dot.a { background: var(--teal); }
.admin-day .k, .dot.k { background: var(--gold-2); }
.ask-note.local { color: var(--new); }
.ask-found { margin: 14px 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.aq-paths { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.aq-paths b { color: var(--text); }
.aq-providers code, .aq-spend code, .aq-list summary code { white-space: nowrap; font-size: 12px; }   /* model names on one line */
/* the armory (site/js/pages/armory.js): panels by their background, no borders */
.ar-search { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) auto; gap: 8px; margin: 14px 0 10px; }
.ar-search .input { box-sizing: border-box; border: 0; background: rgba(255, 255, 255, .06); border-radius: 10px; padding: 10px 12px; color: var(--text); font: inherit; }
.ar-search .input:focus { box-shadow: 0 0 0 2px rgba(240, 195, 90, .35); }
.ar-found { margin-bottom: 16px; }
.ar-found:empty { display: none; }
.ar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 8px; }
.ar-card { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--panel); color: var(--text); min-width: 0; }
.ar-card b { color: var(--c, var(--text)); overflow-wrap: anywhere; }
.ar-card:hover { text-decoration: none; background: var(--panel-2); }
.ar-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.ar-box { padding: 14px 16px; border-radius: 12px; background: var(--panel); margin-bottom: 12px; }
.app .ar-box h2 { margin-top: 0; font-size: 17px; border: 0; border-image: none; padding: 0; }
.ar-steps { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }
.ar-plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ar-plain h4 { margin: 10px 0 2px; }
.ar-linkish { border: 0; background: none; padding: 0; color: var(--link); font: inherit; cursor: pointer; text-align: left; }
.ar-sub { margin: 14px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.ar-hero { display: flex; gap: 16px; align-items: center; margin: 6px 0 14px; min-width: 0; }
.ar-hero > div { min-width: 0; }
.ar-hero h1 { margin: 0; overflow-wrap: anywhere; }
.ar-who, .ar-guild { margin: 2px 0; }
.ar-guild { font-weight: 600; }
.ar-private { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: 10px; background: rgba(255, 179, 71, .1); margin-bottom: 12px; }
.ar-private.on { background: rgba(61, 220, 132, .1); justify-content: flex-start; }
.ar-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 8px; margin: 10px 0 16px; }
.ar-tiles .stat-tile { border: 0; border-radius: 12px; }
.ar-tiles .stat-tile b { display: block; font-size: 17px; overflow-wrap: anywhere; }
.ar-tiles .stat-tile .ar-bar { margin-top: 6px; }
.ar-doll { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 16px; }
.ar-doll-col { display: grid; gap: 6px; align-content: start; }
.ar-doll-weapons { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 16px; }
.ar-slot { display: flex; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 10px; background: var(--panel); min-width: 0; }
.ar-slot > span { display: grid; min-width: 0; }
.ar-slot .ent { overflow-wrap: anywhere; }
.ar-slot-ic { display: flex; flex: none; }
.ar-slot.empty { opacity: .45; }
.ar-noicon { background: rgba(255, 255, 255, .06); flex: none; }
.ar-trees { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; margin-bottom: 10px; }
.ar-tree { padding: 12px 14px; border-radius: 12px; background: var(--panel); min-width: 0; }
.ar-tree h3 { margin: 0 0 8px; font-size: 15px; }
.ar-raw { margin: 10px 0; }
.ar-raw summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.ar-raw table { margin-top: 6px; }
.ar-profs, .ar-reps { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 8px 18px; }
.ar-prof, .ar-reps li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; align-items: center; min-width: 0; }
.ar-prof .ar-bar, .ar-reps .ar-bar { grid-column: 1 / -1; }
.ar-bar { display: block; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.ar-bar i { display: block; height: 100%; border-radius: inherit; background: var(--gold-2); }
.ar-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 120px), 1fr)); gap: 8px; }
.ar-stats div { display: grid; padding: 8px 10px; border-radius: 10px; background: var(--panel); }
/* the character page's header facts (item level, talents, professions, mounts, companions) and tabs (pages/armory.js) */
.ar-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: -8px 0 0 88px; }   /* under the name: the class icon (72px) and the hero's gap */
.ar-fact { display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px 3px 3px; border-radius: 999px; background: rgba(255, 255, 255, .06);
  color: var(--text); font-size: 13px; line-height: 1.25; min-width: 0; }
.ar-fact .icon.sm { width: 22px; height: 22px; border-radius: 50%; flex: none; }
.ar-fact b { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
a.ar-fact:hover { background: rgba(255, 255, 255, .11); text-decoration: none; }
.ar-fact.soft { color: var(--muted); }
.ar-fact.soft .icon { filter: grayscale(1); opacity: .55; }
.ar-tabs { margin: 18px 0 14px; }
.ar-tab-n { display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: rgba(240, 195, 90, .15); color: var(--gold);
  font-size: 11.5px; line-height: 18px; text-align: center; }
.ar-panel > h3.ar-sub:first-child { margin-top: 0; }
.ar-panel .ar-sub { margin-top: 18px; }
/* the History tab: what changed, grouped by day, newest first */
.ar-h-day { margin: 0 0 18px; max-width: 860px; }
.ar-h-day h3 { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin: 0 0 8px; font-size: 15px; }
.ar-h-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ar-h-list li { display: grid; grid-template-columns: 22px minmax(70px, 120px) minmax(0, 1fr); gap: 4px 10px; align-items: center; padding: 6px 10px;
  border-radius: 10px; background: var(--panel); min-width: 0; }
.ar-h-list li.ar-h-level { background: rgba(240, 195, 90, .09); }
.ar-h-ic { width: 22px; height: 22px; }
.ar-h-v { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.ar-h-item { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ar-h-item:hover { text-decoration: none; }
.ar-h-item:hover span { text-decoration: underline; }
.ar-h-item span { overflow-wrap: anywhere; }
.ar-arrow { color: var(--muted); }
.ar-h-first p { margin: 0; }
/* the Journey tab ("Road to 60", pages/armory.js journeyHtml): one gold line, a numbered stop every 5 levels, small marks
   for what happened between them */
.jr-title { margin: 0 0 4px; font-size: 20px; }
.jr-tiles .stat-tile > .muted { display: block; margin-top: 4px; }
.jr-line { list-style: none; position: relative; margin: 6px 0 18px; padding: 0 0 0 40px; max-width: 760px; }
.jr-line::before { content: ""; position: absolute; left: 15px; top: 14px; bottom: 14px; width: 2px; background: rgba(240, 195, 90, .45); }
.jr-line > li { position: relative; display: flex; align-items: center; gap: 8px; margin: 0 0 6px; min-width: 0; }
.jr-line > li > div { min-width: 0; overflow-wrap: anywhere; }
.jr-dot { position: absolute; left: -40px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; border: 2px solid var(--gold); background: var(--panel-solid); color: var(--gold); font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.jr-level { padding: 9px 12px; margin: 10px 0 !important; border-radius: 10px; background: rgba(240, 195, 90, .08); }
.jr-level b { color: #fff; }
.jr-goal .jr-dot { background: var(--gold); color: #1a1406; }
.jr-start .jr-dot, .jr-now .jr-dot { width: 14px; height: 14px; left: -31px; border-color: var(--muted); }
.jr-now .jr-dot { border-color: var(--gold); background: var(--gold); }
.jr-start, .jr-now { padding: 4px 12px; }
.jr-ev { padding: 3px 12px; font-size: 14px; }
.jr-ev::before { content: ""; position: absolute; left: -29px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
  background: var(--panel-solid); border: 2px solid var(--teal); }
.jr-epic::before { border-color: #a335ee; }
.jr-mark { flex: none; width: 22px; height: 22px; display: grid; place-items: center; }
.jr-mark::after { content: ""; width: 8px; height: 8px; transform: rotate(45deg); background: var(--gold); opacity: .7; }
.jr-gap { margin-top: 2px; }
.jr-note { margin: 0 0 12px; }
.jr-share { margin: 8px 0 0; }
@media (max-width: 600px) {
  .jr-line { padding-left: 36px; }
  .jr-line::before { left: 13px; }
  .jr-dot { left: -36px; width: 28px; height: 28px; font-size: 12px; }
  .jr-start .jr-dot, .jr-now .jr-dot { left: -28px; }
  .jr-ev::before { left: -27px; }
}
@media (max-width: 600px) {
  .ar-h-list li { grid-template-columns: 22px minmax(0, 1fr); }
  .ar-h-v { grid-column: 2 / -1; }
  .ar-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 0; }
  .ar-tabs::-webkit-scrollbar { display: none; }
  .ar-tabs a { padding: 8px 7px; white-space: nowrap; flex: none; font-size: 14.5px; }
  .ar-facts { margin-left: 0; }
  .ar-hero { align-items: flex-start; }
}
.ar-classmix { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.ar-classmix span { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: rgba(255, 255, 255, .06); color: var(--c); font-size: 13px; }
.ar-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; position: relative; }
.ar-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ar-switch span { width: 34px; height: 20px; border-radius: 999px; background: rgba(255, 255, 255, .14); position: relative; transition: background .15s; flex: none; }
.ar-switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .15s; }
.ar-switch input:checked + span { background: var(--teal); }
.ar-switch input:checked + span::after { transform: translateX(14px); }
.ar-switch input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.ar-switch em { font-style: normal; font-size: 13px; color: var(--muted); }
/* /me: your to-do from the ForeverDB Helper (todo.js) */
.td-add { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 14px; align-items: center; }
.td-add textarea { grid-column: 1 / -1; resize: vertical; }
.td-add label { display: inline-flex; gap: 6px; align-items: center; }
.td-add button { justify-self: start; }
.td-pending { margin: 0 0 14px; padding: 10px 12px; border-radius: 8px; border: 1px dashed var(--gold-2); background: rgba(240, 195, 90, .06); }
.td-pending ul { margin: 6px 0 0; padding-left: 18px; }
.td-filter { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; margin: 4px 0 12px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line); width: fit-content; }
.td-filter button { border: 0; background: none; color: var(--muted); padding: 4px 10px; border-radius: 6px; font: inherit; font-size: 13px; cursor: pointer; }
.td-filter button.active { background: var(--panel-2); color: #fff; }
.td-list { margin: 0 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-solid); }
.td-list > summary { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding: 10px 12px; cursor: pointer; }
.td-list > p { margin: 0 12px 6px; }
.td-bar { flex: 1 1 120px; max-width: 200px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.td-bar i { display: block; height: 100%; background: var(--teal); }
.td-tasks { list-style: none; margin: 0; padding: 0 12px 8px; }
.td-task { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(38, 50, 90, .6); }
.td-task.done .td-title { color: var(--muted); text-decoration: line-through; }
.td-check input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--teal); }
.td-body { min-width: 0; flex: 1; }
.td-title { color: #fff; font-weight: 600; }
.td-star { color: var(--gold); }
.td-note { white-space: pre-wrap; margin: 4px 0; padding: 6px 10px; border-left: 2px solid var(--line); color: #cfd5e1; font-size: 13.5px; }
.td-steps { list-style: none; margin: 4px 0; padding: 0; font-size: 13.5px; }
.td-steps li.done { color: var(--muted); }
.td-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.td-link { display: inline-flex; gap: 6px; align-items: center; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--line); background: var(--bg-2); font-size: 13px; }
.td-link.yt { border-color: rgba(255, 70, 70, .45); }
.td-yt { color: #ff4f4f; font-size: 11px; }
.td-plus { border: 1px solid var(--line); background: var(--bg-2); color: var(--link); border-radius: 99px; padding: 1px 9px; font: inherit; font-size: 12.5px; cursor: pointer; }
.td-plus:hover { border-color: var(--gold-2); }
.td-plus.done { color: var(--new); border-color: transparent; cursor: default; }
.td-done > summary { padding: 4px 12px 8px; cursor: pointer; }
@media (max-width: 760px) { .td-add { grid-template-columns: 1fr; } }
.ar-danger { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 12px 0 18px; }
.ar-foot { margin-top: 24px; }
.me-armory { margin-bottom: 8px; }
@media (max-width: 900px) { .ar-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .ar-search, .ar-doll, .ar-doll-weapons { grid-template-columns: minmax(0, 1fr); }
  .ar-hero .icon.xl { width: 52px; height: 52px; }
  .ar-hero { gap: 12px; }
}
.ar-cols > section > h2 { margin-top: 10px; }
@media (max-width: 600px) { .ar-slot.empty { display: none; } }
/* the 3D model on the Gear tab (site/js/charviewer.js): between the two columns of slots like the game's character window;
   on phones above them */
.ar-doll.has-model { grid-template-columns: minmax(0, 1fr) minmax(300px, 1.25fr) minmax(0, 1fr); }
.ar-doll.has-model .ar-doll-weapons { grid-column: 1 / -1; }
.ar-model { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cv-stage { position: relative; height: 540px; border-radius: 14px; overflow: hidden; touch-action: pan-y;
  background: radial-gradient(ellipse at 50% 38%, rgba(63, 208, 217, .10), rgba(16, 22, 40, .55) 55%, rgba(7, 11, 22, .95) 100%); }
.cv-stage .cv-canvas { display: block; width: 100%; height: 100%; cursor: grab; outline: none; }
.cv-stage.cv-grab .cv-canvas { cursor: grabbing; }
.cv-stage .cv-canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--gold-2); border-radius: 14px; }
.cv-load { position: absolute; inset: auto 18% 46% 18%; display: grid; gap: 8px; text-align: center; color: var(--muted); font-size: 13px; pointer-events: none; }
.cv-load .ar-bar i { transition: width .2s; background: var(--teal); }
.cv-tools { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; pointer-events: none; }
.cv-tools button { pointer-events: auto; border: 0; border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 12.5px; cursor: pointer;
  background: rgba(7, 11, 22, .72); color: var(--text); backdrop-filter: blur(4px); }
.cv-tools button:hover { background: rgba(26, 36, 65, .95); color: #fff; }
.cv-tools button[aria-pressed="true"] { background: rgba(240, 195, 90, .2); color: var(--gold); }
.cv-tools button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.cv-note { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.cv-custom { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 8px 10px; padding: 12px; border-radius: 12px; background: var(--panel); }
.cv-custom label { display: grid; gap: 3px; font-size: 12.5px; color: var(--muted); min-width: 0; }
.cv-custom select { width: 100%; min-width: 0; }
.cv-swatches { grid-column: 1 / -1; border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.cv-swatches legend { padding: 0; margin-bottom: 4px; font-size: 12.5px; color: var(--muted); }
.cv-swatch { position: relative; display: inline-flex; cursor: pointer; }
.cv-swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cv-swatch span { width: 24px; height: 24px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.cv-swatch input:checked + span { box-shadow: 0 0 0 2px var(--panel-solid), 0 0 0 4px var(--gold); }
.cv-swatch input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 3px; }
.cv-custom .cv-custom-go { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (max-width: 900px) {
  .ar-doll.has-model { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ar-model { grid-column: 1 / -1; grid-row: auto; order: -1; }
  .cv-stage { height: 460px; }
}
@media (max-width: 600px) {
  .ar-doll.has-model { grid-template-columns: minmax(0, 1fr); }
  .cv-stage { height: 400px; }
}
/* "View on a character" on item pages */
.item-model .cv-stage { height: 380px; margin: 0 -4px; }
.item-model .cv-pick { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 8px 0 2px; }
.item-model .cv-pick select { max-width: 150px; }
.item-model .cv-open { margin-top: 8px; }
/* armory moderation (backend/armory.py): the report form, the owner's and admins' notes, and the admin page's Armory tab */
.ar-report-foot { margin: 18px 0 0; }
.ar-report-link { border: 0; background: none; padding: 0; color: var(--muted); font: inherit; font-size: 13.5px; cursor: pointer; }
.ar-report-link:hover { color: var(--link); }
.ar-report { max-width: 640px; margin-top: 10px; }
.ar-reasons { display: grid; gap: 6px; margin: 10px 0; }
.ar-reasons label { display: flex; gap: 8px; align-items: center; font-size: 13.5px; cursor: pointer; }
.ar-report textarea { display: block; width: 100%; box-sizing: border-box; resize: vertical; font: inherit; color: var(--text); border: 0; border-radius: 10px;
  background: rgba(255, 255, 255, .06); padding: 10px 12px; }
.ar-report textarea:focus { outline: none; box-shadow: 0 0 0 2px rgba(240, 195, 90, .35); }
.ar-report-go { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.ar-held p { margin: 0 0 4px; overflow-wrap: anywhere; }
.ar-held p:last-child { margin-bottom: 0; }
/* Import from game (site/js/pages/import.js): a big paste box, then the character card */
.imp-box { display: block; width: 100%; box-sizing: border-box; min-height: 84px; resize: vertical; margin: 14px 0 10px; padding: 12px 14px; border: 0; border-radius: 12px;
  background: rgba(255, 255, 255, .06); color: var(--text); font: 14px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; word-break: break-all; }
.imp-box:focus { outline: none; box-shadow: 0 0 0 2px rgba(240, 195, 90, .45); }
.imp-err { padding: 10px 14px; border-radius: 10px; background: rgba(255, 107, 107, .12); color: var(--text); margin-bottom: 12px; }
.imp-how { max-width: 720px; }
.imp-how[hidden] { display: none; }
.imp-hero { margin-top: 10px; }
.imp-icons { position: relative; display: inline-flex; flex: none; }
.imp-icons .imp-race { position: absolute; right: -6px; bottom: -6px; border-radius: 50%; box-shadow: 0 0 0 2px var(--bg, #0b0f1a); }
.app h2.imp-name { margin: 0; padding: 0; border: 0; border-image: none; font-size: 28px; overflow-wrap: anywhere; }
.imp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.imp-note { margin: 0 0 10px; }
.imp-save { max-width: 640px; margin-top: 4px; }
.imp-save h3 { margin: 0 0 4px; font-size: 16px; }
.imp-fields { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) auto; gap: 8px; margin: 10px 0 0; }
.imp-fields label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.imp-fields .input { box-sizing: border-box; border: 0; background: rgba(255, 255, 255, .06); border-radius: 10px; padding: 9px 11px; color: var(--text); font: inherit; }
.imp-code { margin-top: 22px; overflow-wrap: anywhere; }
.imp-code code { word-break: break-all; }
/* Upload the addon's saved file (site/js/addonfile.js, on /me and /contribute) */
.af { max-width: 820px; }
.af-drop { display: grid; gap: 4px; justify-items: center; padding: 22px 16px; margin: 10px 0; border: 2px dashed rgba(240, 195, 90, .35); border-radius: 12px;
  cursor: pointer; text-align: center; transition: background .15s, border-color .15s; }
.af-drop:hover, .af-drop:focus-visible, .af-drop.on { background: rgba(240, 195, 90, .07); border-color: var(--gold); outline: none; }
.af-where { margin: 6px 0 10px; font-size: 13.5px; }
.af-where summary { cursor: pointer; color: var(--link); }
.af-where .path { display: inline-block; overflow-wrap: anywhere; font-size: 12.5px; }
.af-form h3 { margin: 14px 0 6px; font-size: 15px; }
.af-chars label, .af-share { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; cursor: pointer; }
.af-out .pos, .af-out .neg { margin: 8px 0; }
/* Send from your WoW folder (addonfile.js) and /send (pages/send.js) */
.af-folder { margin: 12px 0 4px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; background: rgba(255, 255, 255, .025); }
.af-folder p { margin: 0 0 8px; }
.af-folder p:last-child { margin-bottom: 0; }
.af-pick, .af-actions { display: flex; gap: 10px 12px; align-items: center; flex-wrap: wrap; }
.af-new { color: var(--gold); }
.af-opt { display: flex; gap: 8px; align-items: baseline; margin: 6px 0 0; color: var(--muted); cursor: pointer; }
.af-opt code, .af-out code { overflow-wrap: anywhere; }
.af-note { margin: -4px 0 8px; }
.sd-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 14px 0 18px; }
.sd-ways > div { padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; background: rgba(255, 255, 255, .025); }
.sd-ways h3 { margin: 0 0 2px; font-size: 15px; }
.sd-ways .k { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--teal, #3fd0d9); }
.sd-ways p { margin: 6px 0 0; font-size: 13.5px; }
.sd-code textarea { width: 100%; box-sizing: border-box; min-height: 110px; resize: vertical; border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px;
  background: rgba(255, 255, 255, .05); color: var(--text); padding: 10px 12px; font: 13px/1.4 ui-monospace, Consolas, monospace; word-break: break-all; }
.sd-parts { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.sd-parts span { padding: 2px 9px; border-radius: 999px; font-size: 12.5px; background: rgba(255, 255, 255, .06); color: var(--muted); }
.sd-parts span.on { background: rgba(61, 220, 132, .14); color: var(--green, #3ddc84); }
@media (max-width: 720px) { .sd-ways { grid-template-columns: minmax(0, 1fr); } }
/* "Is yours up to date?" on /addon and /foreverdb-helper (site/js/vercheck.js), and the /uploader page's "It's optional" */
.vc { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .08); }
.vc p { margin: 0 0 4px; }
.vc-in { display: inline-flex; gap: 6px; align-items: center; margin: 0 6px; }
.vc-in .input { width: 7em; box-sizing: border-box; border: 0; background: rgba(255, 255, 255, .06); border-radius: 8px; padding: 5px 8px; color: var(--text); font: inherit; }
.up-optional p { margin: 0 0 8px; }
.up-optional p:last-child { margin-bottom: 0; }
.tc-import { margin: -4px 0 12px; }
.gear-import { margin: -6px 0 14px; }
.gear-up { font-size: 12px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.gear-up b { color: var(--teal, #3ddc84); }
.gear-up-sum { margin: 0 0 10px; font-size: 13.5px; }
.share-in { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.share-in .input { flex: 1 1 240px; min-width: 0; box-sizing: border-box; }
.share-in .muted { flex-basis: 100%; }
@media (max-width: 600px) {
  .imp-fields { grid-template-columns: minmax(0, 1fr); }
  .imp-actions .btn { flex: 1 1 calc(50% - 8px); text-align: center; }
  .app h2.imp-name { font-size: 24px; }
}
.ar-private.ar-admin { background: rgba(127, 178, 255, .09); }
.ar-mod { color: var(--changed); margin-top: 3px; overflow-wrap: anywhere; }
.am-stats .stat-tile .muted { display: block; margin-top: 2px; }
.am-item { padding: 12px 14px; border-radius: 12px; background: var(--panel); margin-bottom: 8px; min-width: 0; }
.am-head { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; min-width: 0; overflow-wrap: anywhere; }
.am-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.am-why { margin: 6px 0 0; overflow-wrap: anywhere; }
.am-item .admin-history { margin: 6px 0 0; }
.am-item .admin-actions { margin: 10px 0 0; }
.filters #am-q { min-width: min(100%, 420px); }
@media (max-width: 600px) { .filters #am-q { min-width: 0; width: 100%; } }

/* ---------- world events (/events, /events/<slug>) and titles (/titles): flat cards, no borders ---------- */
.ev-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 14px; margin: 16px 0 6px; }
.ev-box { background: var(--panel); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.ev-box h2 { margin: 0 0 8px; font-size: 18px; border: 0; padding: 0; }
.ev-soon, .ev-rota, .ev-runs, .ev-other, .ev-list, .ev-quests, .ev-vendors, .ev-facts { list-style: none; margin: 0; padding: 0; }
.ev-soon li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 5px 0; }
.ev-rota li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 10px; border-radius: 8px; }
.ev-rota li:nth-child(odd) { background: rgba(255, 255, 255, .025); }
.ev-rota li.on { background: rgba(61, 220, 132, .08); }
.ev-rota-when { color: var(--muted); font-size: 13px; min-width: 0; flex: 1 1 260px; }
.ev-group { margin-top: 26px; }
.ev-group > h2 { margin: 0 0 6px; }
.ev-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 10px; margin-top: 10px; }
.ev-card { display: flex; gap: 12px; align-items: center; background: var(--panel); border-radius: 12px; padding: 12px 14px; color: var(--text); min-width: 0; }
.ev-card:hover { text-decoration: none; background: rgba(28, 38, 68, .92); }
.ev-card-body { display: grid; gap: 3px; min-width: 0; }
.ev-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ev-card-head b { color: #fff; font-size: 15px; }
.ev-pic { width: 56px; height: auto; flex: none; border-radius: 8px; }
.ev-pic.big { width: 98px; }
.ev-pic.ico { display: inline-flex; }
.ev-state { font-size: 13px; color: var(--muted); }
.ev-state.on { color: var(--new); font-weight: 600; }
.ev-state.past { color: #b7a78a; }
.ev-other li, .ev-list li { padding: 4px 0; overflow-wrap: anywhere; }
.ev-head { display: flex; gap: 16px; align-items: center; margin: 4px 0 10px; }
.ev-head h1 { margin: 0 0 6px; }
.ev-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ev-quote { color: #d6dbe6; font-style: italic; max-width: 860px; white-space: pre-line; margin: 0 0 4px; }
.ev-quote.lead { font-size: 16px; }
.ev-sec { margin-top: 24px; }
.ev-sec > h2 { margin: 0 0 8px; }
.ev-sched { background: var(--panel); border-radius: 12px; padding: 12px 16px; margin: 10px 0; min-width: 0; }
.ev-sched p { margin: 0 0 6px; overflow-wrap: anywhere; }
.ev-sched p:last-child { margin-bottom: 0; }
.ev-runs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.ev-runs li { background: var(--panel-2); border-radius: 8px; padding: 3px 10px; font-size: 13px; }
.ev-runs li.on { background: rgba(61, 220, 132, .12); color: var(--new); }
.ev-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 10px; }
.ev-facts b { color: var(--muted); font-weight: 600; margin-right: 4px; }
.ev-quests li, .ev-vendors li { padding: 7px 10px; border-radius: 8px; overflow-wrap: anywhere; }
.ev-quests li:nth-child(odd), .ev-vendors li:nth-child(odd) { background: rgba(255, 255, 255, .025); }
.ev-quests .badge, .ev-vendors .badge { margin-left: 4px; }
.ev-items { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.ev-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; max-width: 100%; min-width: 0; }
.ev-item > span:not(.icon) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
a.ev-item:hover { text-decoration: none; background: #242d42; }
.ev-item .lv-tag { margin-left: 0; }
.ev-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--new); flex: none; }
.ev-more > summary { cursor: pointer; color: var(--link); margin: 6px 0; }
.ev-post { margin: 10px 0; padding: 10px 14px; background: var(--panel); border-radius: 10px; }
.ev-post p { margin: 0 0 6px; font-style: italic; }
.ti-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 10px; margin-top: 10px; }
.ti-card { background: var(--panel); border-radius: 12px; padding: 14px 16px; min-width: 0; scroll-margin-top: calc(var(--hdr-h, 59px) + 22px); }
.ti-card > p { margin: 8px 0 0; overflow-wrap: anywhere; }
.ti-top { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.ti-names { min-width: 0; }
.ti-names h3 { margin: 0 0 2px; font-size: 17px; overflow-wrap: anywhere; }
.ti-names p { margin: 0 0 6px; }
.ti-name { color: var(--gold); font-weight: 600; }
.ti-spec { color: #e9d3ae; }
.ti-card .ev-quests { margin-top: 8px; }
.ti-table { display: grid; background: var(--panel); border-radius: 12px; padding: 6px; margin-top: 10px; }
.ti-row { display: grid; grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 150px); gap: 10px; align-items: center; padding: 7px 10px; border-radius: 8px; scroll-margin-top: calc(var(--hdr-h, 59px) + 22px); }
.ti-row:nth-child(even) { background: rgba(255, 255, 255, .025); }
.ti-row > span { min-width: 0; overflow-wrap: anywhere; }
.ti-headrow { color: var(--muted); font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; }
.ti-rank { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.ti-row[hidden], .ti-card[hidden] { display: none; }
@media (max-width: 600px) {
  .ev-head { align-items: flex-start; }
  .ev-pic.big { width: 64px; }
  .ti-row { grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1fr); }
  .ti-row > span:nth-child(4) { grid-column: 2 / -1; }
  .ti-headrow > span:nth-child(4) { display: none; }
}
.am-bulk { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 10px 0 4px; }

/* ---------- What's new on ForeverDB (/whats-new, the home page) and the newsletter (/newsletter, the home page) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.home-duo { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 0 28px; align-items: stretch; }
.wn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wn-list a { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; padding: 10px 14px;
  border-radius: 10px; background: var(--panel); color: var(--text); }
.wn-list a:hover { text-decoration: none; background: rgba(28, 38, 68, .92); }
.wn-list a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.wn-list time { color: var(--gold); font-size: 12.5px; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wn-body { display: grid; gap: 2px; min-width: 0; }
.wn-body b { color: #fff; font-weight: 650; }
.wn-body span { color: var(--muted); font-size: 13px; line-height: 1.45; }
.wn-type { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--teal); white-space: nowrap;
  padding: 2px 8px; border-radius: 999px; background: rgba(63, 208, 217, .12); }
.wn-type.data { color: var(--new); background: rgba(61, 220, 132, .12); }
/* the home page's five: one line each, so the list sits level with the newsletter card */
.wn-list.compact { gap: 5px; }
.wn-list.compact a { grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; padding: 9px 14px; }
.wn-list.compact .wn-body { gap: 1px; }
.wn-list.compact .wn-body b, .wn-list.compact .wn-body span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wn-list.compact .wn-body span { font-size: 12.5px; }
.wn-page { max-width: 900px; }
.wn-month h2 { margin-top: 26px; }
.nl-box { background: var(--panel); border-radius: 12px; padding: 16px 18px; }
/* The newsletter card (home, /newsletter, the popup): client art under a dark wash, no borders */
.nl-home { display: flex; flex-direction: column; }
.nl-card { position: relative; isolation: isolate; overflow: hidden; border-radius: 14px; background: #0b1224; box-shadow: 0 10px 34px rgba(0, 0, 0, .35); }
.nl-home .nl-card { flex: 1; margin-top: 36px; }
.nl-card-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; opacity: .7; }
.nl-card::before { content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 70% at 85% 0%, rgba(63, 208, 217, .16), transparent 60%),
    linear-gradient(180deg, rgba(7, 11, 22, .3) 0%, rgba(7, 11, 22, .78) 45%, rgba(7, 11, 22, .94) 100%); }
.nl-card-in { position: relative; display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 22px 24px 20px; }
.nl-card .eyebrow { margin: 0; color: var(--teal); }
.nl-card h2 { margin: -6px 0 0; font-size: 22px; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
.nl-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.nl-points li { position: relative; padding-left: 24px; font-size: 14px; color: #dfe5f0; line-height: 1.4; text-shadow: 0 1px 8px rgba(0, 0, 0, .7); }
.nl-points li::before { content: ''; position: absolute; left: 2px; top: 3px; width: 14px; height: 14px; border-radius: 50%;
  background: rgba(63, 208, 217, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.4 2.3L12 5.2' fill='none' stroke='%233fd0d9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
.nl-card-foot { margin: auto 0 0; font-size: 13px; color: var(--muted); }
.nl-card-page { margin: 4px 0 0; }
.nl-card-page .nl-card-in { padding: 24px 26px; }
/* the form */
.nl-form { display: grid; gap: 12px; }
.nl-row { display: flex; gap: 8px; align-items: flex-end; }
.nl-email { display: grid; gap: 6px; flex: 1; min-width: 0; font-weight: 600; font-size: 14px; }
.nl-email .input { width: 100%; font-weight: 400; }
.nl-card .input, .nl-pop .input { height: 42px; padding: 0 13px; font-size: 15px; color: #fff; border: 0; border-radius: 9px;
  background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); transition: box-shadow .15s, background .15s; }
.nl-card .input::placeholder { color: #8f9ab4; }
.nl-card .input:focus { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px var(--gold), 0 0 0 3px rgba(240, 195, 90, .25); }
.nl-go { flex: none; height: 42px; padding: 0 20px; border-radius: 9px; font-size: 14.5px; }
.nl-go:focus-visible, .nl-pop-x:focus-visible, .nl-sheet-bar .btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.nl-go:disabled { opacity: .6; cursor: default; }
/* the choices: a segmented control (real radio buttons underneath) */
.nl-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; max-width: 460px; padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, .07); }
.nl-choice { position: relative; display: grid; place-items: center; min-height: 34px; padding: 6px 8px; border-radius: 8px; font-size: 13px; line-height: 1.2;
  text-align: center; color: #c7cede; cursor: pointer; transition: background .15s, color .15s; }
.nl-choice:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.nl-choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.nl-choice:has(input:checked) { background: rgba(240, 195, 90, .2); color: var(--gold); font-weight: 650; box-shadow: 0 1px 6px rgba(0, 0, 0, .25); }
.nl-choice:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 1px; }
.nl-consent { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: #c7cede; cursor: pointer; }
.nl-consent input { margin: 2px 0 0; flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--gold); }
.nl-consent input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.nl-consent a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.nl-status { margin: -4px 0 0; color: #c7cede; }
.nl-status:empty { margin: -12px 0 0; }
.nl-send, .nl-actions { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.nl-actions { margin-top: 12px; }
.nl-done { background: rgba(61, 220, 132, .12); color: var(--text); padding: 12px 14px; border-radius: 10px; line-height: 1.5; }
.nl-done b { color: var(--new); }
.nl-page { max-width: 760px; }
.nl-what { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.nl-what li { display: grid; align-content: start; gap: 4px; padding: 12px 14px; border-radius: 10px; background: var(--panel); }
.nl-what b { color: #fff; }
.nl-what span { color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.nl-fine { margin: 12px 0 0; line-height: 1.55; }
.nl-section { margin-top: 30px; }
.nl-section h2 { margin-top: 0; }
.nl-sub { background: var(--panel); border-radius: 10px; padding: 12px 14px; margin-top: 8px; display: grid; gap: 10px; }
.nl-sub .nl-actions { margin-top: 0; }
/* newsletter issues: the web copy (/newsletter/<slug>), the archive, and the admin page's Issues section (backend/newsletter_issues.py) */
.nl-issue-when { margin: -6px 0 14px; }
.nl-issue-intro { font-size: 17px; line-height: 1.6; color: var(--text); }
.nl-issue-sec { margin-top: 26px; }
.nl-issue-sec h2 { font-size: 13px; letter-spacing: .09em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid rgba(240, 195, 90, .35); padding-bottom: 6px; }
.nl-issue-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.nl-issue-list li p { margin: 4px 0 0; line-height: 1.55; }
.nl-issue-list blockquote { margin: 8px 0 0; padding: 8px 12px; border-left: 3px solid #148eff; background: rgba(20, 142, 255, .08); border-radius: 0 8px 8px 0; font-style: italic; line-height: 1.55; }
.nl-issue-list blockquote cite { display: block; font-style: normal; color: var(--muted); font-size: 13px; margin-top: 4px; }
.nl-archive { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.nl-archive li { background: var(--panel); border-radius: 10px; padding: 12px 14px; line-height: 1.5; }
.nl-archive li p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.nl-issues { display: grid; gap: 14px; margin-bottom: 26px; }
.nl-iss { background: var(--panel); border-radius: 12px; padding: 14px 16px; display: grid; gap: 10px; }
.nl-iss h4 { margin: 0; font-size: 17px; color: #fff; line-height: 1.35; }
.nl-iss-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 13px; color: var(--muted); }
.nl-iss-edit { display: grid; gap: 8px; }
.nl-iss-edit[hidden] { display: none; }
.nl-iss-edit textarea { min-height: 84px; resize: vertical; }
.nl-iss-frame { display: grid; gap: 6px; }
.nl-iss-frame iframe { width: 100%; max-width: 620px; height: 640px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px; background: #eef0f5; }
.nl-iss-frame.phone iframe { max-width: 390px; }
.nl-iss-bar { height: 8px; border-radius: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.nl-iss-bar i { display: block; height: 100%; background: var(--gold); }
/* The first-visit popup (nlpopup.js): a centred card on wide screens, a small bar at the bottom on phones */
.nl-pop-back { position: fixed; inset: 0; z-index: 3500; display: grid; place-items: center; padding: 20px; background: rgba(3, 6, 14, .66);
  animation: nl-fade .2s ease-out; }
.nl-pop { width: min(460px, 100%); max-height: calc(100vh - 40px); overflow: auto; animation: nl-rise .22s ease-out; }
.nl-pop .nl-card-in { padding: 24px 24px 18px; }
.nl-pop h2 { padding-right: 30px; }
.nl-pop-x { position: absolute; top: 10px; right: 10px; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .08); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.nl-pop-x:hover { background: rgba(255, 255, 255, .16); }
.nl-pop-later { align-self: center; border: 0; background: none; color: #aab4cc; font: inherit; font-size: 13px; cursor: pointer; padding: 4px 10px; border-radius: 6px; }
.nl-pop-later:hover { color: #fff; }
.nl-pop-later:focus-visible { outline: 2px solid var(--gold); }
.nl-sheet { position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 3500; max-height: min(80vh, 600px); overflow: auto; border-radius: 14px;
  box-shadow: 0 -6px 30px rgba(0, 0, 0, .5); animation: nl-rise .22s ease-out; }
.nl-sheet .nl-card-in { padding: 10px 10px 10px 14px; gap: 12px; }
.nl-sheet.open .nl-card-in { padding: 14px 14px 16px; }
.nl-sheet-bar { display: flex; align-items: center; gap: 8px; }
.nl-sheet-bar b { flex: 1; min-width: 0; color: #fff; font-size: 14.5px; line-height: 1.3; }
.nl-sheet-bar .nl-pop-x { position: static; flex: none; width: 32px; height: 32px; }
.nl-sheet-bar .btn { flex: none; height: 36px; padding: 0 14px; border-radius: 9px; }
.nl-sheet .nl-points { margin-bottom: 12px; }
/* stacked (phones, the bottom bar): the button moves to the end of the form, after the choices and the tick */
.nl-sheet .nl-row { display: contents; }
.nl-sheet .nl-go { width: 100%; order: 1; }
.nl-sheet .nl-status { order: 2; }
@keyframes nl-fade { from { opacity: 0; } }
@keyframes nl-rise { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .nl-pop-back, .nl-pop, .nl-sheet { animation: none; } }
/* New in the game files (the home page; site/data/datamine-feed.json) */
.dmf { display: grid; gap: 18px; }
.dmf-group h3 { display: flex; gap: 10px; align-items: baseline; margin: 0 0 8px; font-size: 14px; }
.dmf-group h3 time { color: var(--gold); }
.dmf-group h3 span { color: var(--muted); font-weight: 500; }
.dmf-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.dmf-chip { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 9px; align-items: center; padding: 7px 10px; border-radius: 9px;
  background: var(--panel); color: var(--text); }
.dmf-chip:hover { text-decoration: none; background: rgba(28, 38, 68, .92); }
.dmf-chip .icon { grid-row: span 2; }
.dmf-n { color: #fff; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dmf-chip.q0 .dmf-n { color: var(--q0); } .dmf-chip.q2 .dmf-n { color: var(--q2); } .dmf-chip.q3 .dmf-n { color: var(--q3); }
.dmf-chip.q4 .dmf-n { color: var(--q4); } .dmf-chip.q5 .dmf-n { color: var(--q5); }
.dmf-k { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dmf-k .lv-tag { margin-left: 4px; }
.dmf-more { display: flex; align-items: center; padding: 7px 10px; font-size: 13px; }
@media (max-width: 900px) {
  .home-duo { grid-template-columns: 1fr; }
  .nl-home .nl-card { margin-top: 28px; }
}
@media (max-width: 560px) {
  .wn-list a { grid-template-columns: minmax(0, 1fr); padding: 10px 12px; }
  .wn-list a > time { order: 0; }
  .wn-type { display: none; }
  .dmf-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dmf-chip { padding: 7px 8px; column-gap: 7px; }
  .dmf-n { font-size: 13px; }
  .nl-box { padding: 14px; }
  .nl-card-in, .nl-card-page .nl-card-in { padding: 18px 16px 16px; }
  .nl-card h2 { font-size: 20px; }
  .nl-row { display: contents; }
  .nl-go { width: 100%; order: 1; }
  .nl-status { order: 2; }
  .nl-choice { font-size: 12.5px; padding: 6px 4px; }
  .nl-what { grid-template-columns: 1fr; }
}

/* mounts (site/js/pages/mounts.js): cards with the rendered model, the facts, and where each one comes from */
.mt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 10px; margin: 16px 0; }
.mt-stat { display: grid; gap: 2px; background: var(--panel); border-radius: 12px; padding: 12px 16px; color: var(--text); min-width: 0; }
a.mt-stat:hover { text-decoration: none; background: #1b2232; }
.mt-stat b { font-size: 24px; color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mt-stat.new b { color: var(--new); }
.mt-stat span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.mt-box { background: var(--panel); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.mt-sec { margin-top: 26px; }
.mt-sec > h2 { margin: 0 0 8px; }
.mt-changes { margin-bottom: 8px; }
.mt-changes h2 { margin: 0 0 8px; font-size: 18px; }
.mt-changes ul { margin: 0 0 8px; padding-left: 18px; }
.mt-changes li { margin: 4px 0; }
.mt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 12px; margin-bottom: 18px; }
.mt-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; background: var(--panel); border-radius: 12px; padding: 14px; scroll-margin-top: calc(var(--hdr-h, 59px) + 12px); min-width: 0; }
.mt-card.is-ph { opacity: .75; }
.mt-img { display: block; width: 96px; height: 96px; object-fit: contain; border-radius: 10px; background: radial-gradient(circle at 50% 60%, #1c2744, #10152a 70%); }
.mt-img.none { display: flex; align-items: center; justify-content: center; }
.mt-body { min-width: 0; }
.mt-body h3 { margin: 0 0 4px; font-size: 16px; overflow-wrap: anywhere; }
.mt-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.mt-facts { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.mt-facts span { white-space: nowrap; }
.mt-items { font-size: 13px; margin-bottom: 4px; }
.mt-src { font-size: 13.5px; display: grid; gap: 6px; }
.mt-src .vd-box { display: grid; gap: 4px; }
.mt-src .vd-line { background: var(--panel-2); border-radius: 8px; padding: 4px 8px; border-top: 0; }
.mt-src-h { font-weight: 600; }
.mt-chg { margin: 8px 0 0; color: var(--changed); }
.mt-spec { margin: 6px 0 0; color: #ffc36b; }
.mt-filters select.input { min-width: 0; }
.mt-ride { display: grid; gap: 6px; margin-bottom: 18px; }
.mt-ride-row { display: grid; grid-template-columns: minmax(180px, 1.1fr) minmax(140px, .9fr) minmax(0, 1.2fr) minmax(0, 1.6fr); gap: 10px; align-items: center;
  background: var(--panel); border-radius: 10px; padding: 8px 12px; font-size: 13.5px; }
.mt-ride-n { display: flex; align-items: center; gap: 8px; }
.mt-item { display: flex; gap: 14px; align-items: flex-start; }
.mt-item img { border-radius: 10px; background: radial-gradient(circle at 50% 60%, #1c2744, #10152a 70%); flex: none; }
/* a faction's own page (site/js/pages/reputation.js renderFaction) */
.rep-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.rep-facts { margin: 16px 0; }
.rep-facts .mt-stat b { font-size: 20px; }
.rep-top .panel { border: 0; }
.rep-start { display: grid; gap: 6px; }
.rep-start-row { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; }
.rep-start-row > span:first-child { min-width: 220px; font-weight: 600; }
.rep-start p { margin: 4px 0 0; }
.rep-how { margin: 0 0 8px; padding-left: 18px; }
.rep-how li { margin: 5px 0; }
.rep-more { margin: 10px 0 0; font-size: 13.5px; }
.rep-page { padding: 6px 18px 14px; }
.rep-page .rep-rank:first-child { border-top: 0; }
.rep-plain { display: flex; flex-wrap: wrap; gap: 8px; }
.rep-plain a { background: var(--panel); border-radius: 10px; padding: 7px 12px; font-size: 14px; }
.rep-plain a:hover { text-decoration: none; background: #1b2232; }
@media (max-width: 700px) {
  .mt-card { grid-template-columns: 72px minmax(0, 1fr); gap: 10px; padding: 12px; }
  .mt-img { width: 72px; height: 72px; }
  .mt-ride-row { grid-template-columns: 1fr; gap: 2px; }
  .mt-filters .input, .mt-filters select.input { flex: 1 1 140px; min-width: 0; }
  .mt-src .vd-line { flex-wrap: wrap; }
  .rep-start-row > span:first-child { min-width: 0; }
  .mt-item img { width: 72px; height: 72px; }
}
.mt-box > :first-child { margin-top: 0; }
.mt-box > :last-child { margin-bottom: 0; }

/* Articles: a list with an icon beside each entry (the "iconlist" block) */
.icon-list { display: grid; gap: 10px; margin: 14px 0 18px; }
.icon-list-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: start; padding: 10px 12px;
  border-radius: 12px; background: rgba(255, 255, 255, .035); }
.icon-list-row img { width: 56px; height: 56px; border-radius: 10px; }
.icon-list-row b { display: block; margin-bottom: 2px; }
.icon-list-row span { color: var(--text-2, #c9d1e6); line-height: 1.55; }
@media (max-width: 480px) { .icon-list-row { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; } .icon-list-row img { width: 44px; height: 44px; } }

/* ---------- News: the featured story (home page, top of /news) and the latest stories, each with a picture of its own ---------- */
.home-news { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-areas: "feat blue" "cards cards"; gap: 16px; align-items: start; }
.home-news > .story-feature { grid-area: feat; }
.home-news > .blue-list { grid-area: blue; align-self: stretch; }
.home-news > .news-cards { grid-area: cards; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.story-feature { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: var(--panel); color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 14px 34px rgba(0, 0, 0, .3); }
.story-feature:hover { text-decoration: none; background: rgba(28, 38, 68, .92); }
.story-feature img { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 616; object-fit: cover; }
.sf-body { padding: 16px 20px 20px; }
.sf-kicker { color: var(--muted); font-size: 13px; }
.sf-kicker b { color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.story-feature h2 { margin: 6px 0 8px; padding: 0; border: 0; font-size: 26px; line-height: 1.2; letter-spacing: -.02em; color: #fff; }
.story-feature p { margin: 0 0 12px; max-width: 70ch; color: #b9c0d0; font-size: 15px; line-height: 1.55; }
.sf-more { color: var(--link); font-size: 14px; font-weight: 600; }
#news-body > .story-feature { margin: 4px 0 8px; }
@media (min-width: 900px) {   /* News: the picture beside the text */
  #news-body > .story-feature { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  #news-body > .story-feature img { height: 100%; min-height: 280px; aspect-ratio: auto; }
  #news-body > .story-feature .sf-body { align-self: center; padding: 24px 28px; }
}
.home-news .news-card { border: 0; }
.home-news .news-card img { height: auto; }
.home-news > .story-feature { align-self: stretch; }   /* as tall as the Blizzard list beside it: the picture takes the room */
.home-news > .story-feature img { flex: 1 1 0; min-height: 300px; height: auto; aspect-ratio: auto; }
.home-news .news-card:hover { background: rgba(28, 38, 68, .92); }
.article-card.pic { display: flex; flex-direction: column; padding: 0; overflow: hidden; border: 0; }
.article-card.pic:hover { background: rgba(28, 38, 68, .92); }
.ac-img { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 616; object-fit: cover; }
.ac-body { padding: 14px 16px 16px; }
@media (max-width: 1100px) {
  .home-news { grid-template-columns: minmax(0, 1fr); grid-template-areas: "feat" "cards" "blue"; }
  .home-news > .story-feature img { flex: none; min-height: 0; aspect-ratio: 1600 / 616; }
  .home-news > .news-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .home-news > .news-cards { grid-template-columns: minmax(0, 1fr); }
  .story-feature h2 { font-size: 21px; }
  .sf-body { padding: 14px 16px 16px; }
}

/* macros (site/js/pages/macros.js): a card per macro with its code, Copy button and write-up; the class picker and basics */
.mc-classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 10px; margin: 16px 0; }
.mc-class { display: flex; align-items: center; gap: 10px; background: var(--panel); border-radius: 12px; padding: 10px 12px; color: var(--text); min-width: 0; }
.mc-class:hover { text-decoration: none; background: #1b2232; }
.mc-class b { display: block; color: var(--cc, #fff); font-size: 15px; }
.mc-class small { display: block; color: var(--muted); font-size: 12px; }
.mc-class > span:last-child { min-width: 0; }
.mc-filters .input { flex: 1 1 280px; min-width: 0; max-width: 520px; }
.mc-sec { margin-top: 22px; }
.mc-sec-h { margin: 0 0 6px; font-size: 24px; }
.mc-intro, .mc-gintro { color: var(--muted); max-width: 860px; margin: 0 0 14px; }
.mc-group { margin-top: 22px; scroll-margin-top: calc(var(--hdr-h, 59px) + 12px); }
.mc-group > h2 { margin: 0 0 6px; font-size: 20px; }
.mc-list { display: grid; gap: 14px; }
.mc { background: var(--panel); border-radius: 12px; padding: 16px 18px; min-width: 0; scroll-margin-top: calc(var(--hdr-h, 59px) + 12px); }
.mc:target { box-shadow: 0 0 0 2px rgba(240, 195, 90, .55); }
.mc-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; margin-bottom: 10px; }
.mc-head h3 { margin: 0; font-size: 17px; overflow-wrap: anywhere; }
.mc-head h3 a { color: #fff; }
.mc-badges { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.badge.mc-lv { background: rgba(63, 208, 217, .12); color: var(--teal); }
.badge.mc-untested { background: rgba(141, 153, 184, .12); color: var(--muted); }
.mc-cls { display: inline-flex; align-items: center; gap: 4px; color: var(--cc); font-size: 12.5px; font-weight: 600; margin-right: 4px; }
.mc-cls .icon.sm { width: 18px; height: 18px; }
.mc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px 22px; align-items: start; }
.mc-codecol { min-width: 0; }
.mc-code { position: relative; }
.mc-code pre { margin: 0; background: #080c18; border-radius: 10px; padding: 12px 14px; padding-right: 76px; min-height: 48px;
  font: 13px/1.6 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; color: #e6eaf4;
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; tab-size: 2; }
.mc-code code { background: none; padding: 0; font: inherit; border-radius: 0; }
.mc-code .ln { display: block; padding-left: 1.6em; text-indent: -1.6em; }
.mc-copy { position: absolute; top: 8px; right: 8px; background: var(--panel-2); color: var(--text); border: 0; border-radius: 7px;
  padding: 5px 11px; font: 600 12.5px/1.3 inherit; font-family: inherit; cursor: pointer; }
.mc-copy:hover { background: #2a3760; color: #fff; }
.mc-copy.done { background: rgba(61, 220, 132, .18); color: var(--new); }
.t-cmd { color: var(--gold); }
.t-meta { color: #b59cff; }
.t-cond { color: var(--teal); }
.t-sep { color: var(--muted); }
.t-ph { background: rgba(240, 195, 90, .16); border-radius: 3px; }
.mc-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.mc-len.over { color: var(--removed); }
.mc-phs { display: grid; gap: 6px; margin-bottom: 8px; }
.mc-ph { display: grid; grid-template-columns: minmax(110px, auto) minmax(0, 1fr); gap: 8px; align-items: center; font-size: 13px; color: var(--muted); }
.mc-ph .input { width: 100%; min-width: 0; }
.mc-text { min-width: 0; font-size: 14px; }
.mc-text p { margin: 0 0 8px; }
.mc-needs { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; margin: 10px 0 6px; font-size: 13px; }
.mc-needs-h { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; margin-right: 2px; }
.mc-chip { background: var(--panel-2); border-radius: 7px; padding: 3px 8px; overflow-wrap: anywhere; }
.mc-chip .muted { font-size: 12px; }
.mc-notes { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: #c3cad9; }
.mc-notes li { margin: 3px 0; }
.mc-spec { margin: 8px 0 0; font-size: 13px; color: #ffc36b; }
.mc-toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.mc-toc a { background: var(--panel); border-radius: 999px; padding: 5px 12px; font-size: 13px; color: var(--text); }
.mc-toc a:hover { text-decoration: none; background: #1b2232; }
.mc-h1 { display: flex; align-items: center; gap: 10px; }
.mc-other { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0 12px; font-size: 13px; }
.mc-other a, .mc-other span { color: var(--cc); }
.mc-other .on { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.mc-basics { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 12px; }
.mc-basic { background: var(--panel); border-radius: 12px; padding: 14px 16px; min-width: 0; scroll-margin-top: calc(var(--hdr-h, 59px) + 12px); }
.mc-basic h3 { margin: 0 0 8px; }
.mc-basic p { margin: 0 0 8px; }
.mc-basic ul { margin: 0 0 8px; padding-left: 18px; }
.mc-basic li { margin: 4px 0; }
.mc-basic code { overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .mc-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .mc { padding: 14px; }
  .mc-head { flex-direction: column; align-items: flex-start; }
  .mc-code pre { font-size: 12.5px; padding: 10px 12px; padding-right: 12px; padding-top: 40px; }
  .mc-ph { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .mc-classes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-class { padding: 8px 10px; gap: 8px; }
  .mc-class .icon.md { width: 30px; height: 30px; }
}
/* Ask ForeverDB: a macro's code in an answer (backend/ask_local.py macro_plan) */
.ask-code { background: #080c18; border-radius: 10px; padding: 10px 12px; margin: 6px 0 10px; font: 13px/1.6 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  white-space: pre-wrap; overflow-wrap: anywhere; color: #e6eaf4; }
.ask-code code { background: none; padding: 0; font: inherit; }
/* Lore for roleplayers (site/js/pages/lore.js): long-form pages without boxes; the game's own art; quotes, background and
   Speculation told apart by a small label and a tint, not a border */
.lr { max-width: 1180px; }
.lr .lead { font-size: 17px; line-height: 1.6; color: #cfd5e4; max-width: 70ch; }
.lr-head { display: grid; gap: 22px; margin: 4px 0 26px; }
.lr-head h1 { margin: 4px 0 8px; font-size: clamp(28px, 4.5vw, 40px); }
.lr-head.portrait { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); align-items: center; }
.lr-head.wide .lr-hero { order: -1; }
.lr[style*="--cc"] .lr-head h1 { color: color-mix(in srgb, var(--cc) 70%, #fff); }
.lr-hero { margin: 0; min-width: 0; }
.lr-hero img { display: block; width: 100%; height: auto; border-radius: 14px; }
.lr-hero.wide img { aspect-ratio: 1600 / 616; object-fit: cover; }
.lr-hero.portrait { justify-self: center; width: 100%; max-width: 340px; }
.lr-hero.portrait img { background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--cc, #3fd0d9) 22%, transparent), transparent 70%); }
.lr-hero figcaption { color: var(--muted); font-size: 12.5px; line-height: 1.45; margin-top: 6px; }
.lr-hero.portrait figcaption { text-align: center; }
.lr-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px 22px; margin: 14px 0 6px; }
.lr-facts div { min-width: 0; }
.lr-facts dt { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); font-weight: 650; }
.lr-facts dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.lr-links { margin-top: 10px; }
.lr-layout { max-width: 1180px; }
.lr-body { min-width: 0; max-width: 760px; }
.lr-body p, .lr-body li { font-size: 16px; line-height: 1.72; }
.lr-body h2 { font-size: 22px; margin: 34px 0 10px; scroll-margin-top: calc(var(--hdr-h, 59px) + 22px); }
.lr-body h3 { margin: 22px 0 6px; }
.lr-label { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; margin-right: 6px; }
.lr-note { margin: 16px 0; padding: 12px 16px; border-radius: 12px; }
.lr-note p { margin: 4px 0 0; }
.lr-bg { background: rgba(141, 153, 184, .08); }
.lr-bg .lr-label { color: #aab4cf; }
.lr-fv { background: rgba(61, 220, 132, .07); }
.lr-fv .lr-label { color: var(--new); }
.lr-spec { background: rgba(255, 179, 71, .07); }
.lr-spec .lr-label, .lr-inspec .lr-label { color: #ffb347; }
.lr-quote { margin: 18px 0; padding: 4px 0 4px 18px; background: linear-gradient(90deg, rgba(240, 195, 90, .10), transparent 60%); border-radius: 0 10px 10px 0; }
.lr-quote.client { background: linear-gradient(90deg, rgba(63, 208, 217, .10), transparent 60%); }
.lr-quote blockquote { margin: 8px 0; font-size: 17px; line-height: 1.6; font-style: italic; color: #eef1f8; }
.lr-quote blockquote::before { content: "\201C"; } .lr-quote blockquote::after { content: "\201D"; }
.lr-quote figcaption { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.lr-quote.client .lr-label { color: var(--teal); } .lr-quote.blizzard .lr-label { color: var(--gold); }
.lr-hooks { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 10px; }
.lr-hooks li { position: relative; padding: 10px 14px 10px 38px; border-radius: 12px; background: rgba(255, 255, 255, .03); }
.lr-hooks li::before { content: "\2726"; position: absolute; left: 14px; top: 10px; color: var(--gold); }
.lr-cmds { display: grid; gap: 2px; margin: 12px 0; }
.lr-cmds div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; padding: 7px 10px; border-radius: 8px; }
.lr-cmds div:nth-child(odd) { background: rgba(255, 255, 255, .03); }
.lr-cmds dt code { color: var(--gold); font-size: 14px; }
.lr-cmds dd { margin: 0; line-height: 1.55; }
.lr-client { margin: 8px 0 18px; padding: 14px 16px; border-radius: 12px; background: rgba(255, 255, 255, .03); }
.lr-client h3 { margin: 0 0 4px; }
.lr-side { font-size: 11.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--fc, var(--muted)); margin-left: 4px; }
.lr-racials { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 4px; }
.lr-desc summary { cursor: pointer; color: var(--link); font-size: 14px; }
.lr-desc p { font-size: 15px; }
.lr-quests, .lr-areas { padding-left: 18px; }
.lr-areas { columns: 2 220px; column-gap: 24px; }
.lr-areas li { break-inside: avoid; font-size: 15px; line-height: 1.6; }
.lr-sources li { font-size: 14.5px; }
.lr-group { margin-top: 10px; }
.lr-faction { margin: 14px 0 20px; }
.lr-faction h3 { margin: 0 0 4px; }
.lr-faction h3 a { color: color-mix(in srgb, var(--fc) 55%, #fff); }
.lr-cdesc { color: var(--muted); font-size: 14.5px !important; margin: 2px 0 6px; }
.lr-cdesc .lr-label { color: var(--teal); }
.lr-inspec { font-size: 14.5px !important; color: #e9d3ae; }
.lr-capitals { display: grid; gap: 18px; margin: 16px 0; }
.lr-capital { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: start; }
.lr-cap-map img { display: block; width: 100%; height: auto; border-radius: 10px; }
.lr-capital h3 { margin: 0 0 4px; }
.lr-capital h3 a { color: color-mix(in srgb, var(--fc) 55%, #fff); }
.lr-sec { margin: 30px 0; }
.lr-sec h2 { font-size: 24px; margin: 0 0 6px; scroll-margin-top: calc(var(--hdr-h, 59px) + 22px); }
.lr-cards { display: grid; gap: 14px; margin-top: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.lr-cards.portraits { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.lr-cards.small { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.lr-card { display: flex; flex-direction: column; min-width: 0; border-radius: 14px; overflow: hidden; color: var(--text); background: rgba(255, 255, 255, .03); transition: background .15s; }
.lr-card:hover { text-decoration: none; background: color-mix(in srgb, var(--cc) 10%, rgba(255, 255, 255, .03)); }
.lr-card-art { display: block; overflow: hidden; }
.lr-card.wide .lr-card-art img { display: block; width: 100%; aspect-ratio: 16 / 8; object-fit: cover; transition: transform .3s; }
.lr-card.portrait .lr-card-art { background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--cc) 24%, transparent), transparent 72%); }
.lr-card.portrait .lr-card-art img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: contain; object-position: center top; transition: transform .3s; }
.lr-card:hover .lr-card-art img { transform: scale(1.03); }
.lr-card-body { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px 14px; }
.lr-card-body .eyebrow { margin: 0; font-size: 10.5px; color: color-mix(in srgb, var(--cc) 70%, #fff); }
.lr-card-body b { font-size: 16px; color: #fff; }
.lr-card-body small { color: var(--muted); font-size: 12.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lr-card.mini small { -webkit-line-clamp: 2; }
.lr-hub .lr-body { margin-top: 10px; }
@media (max-width: 760px) {
  .lr-head.portrait { grid-template-columns: minmax(0, 1fr); }
  .lr-head.portrait .lr-hero { order: -1; max-width: 240px; }
  .lr-cmds div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .lr-capital { grid-template-columns: minmax(0, 1fr); }
  .lr-cards.portraits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lr-body p, .lr-body li { font-size: 15.5px; }
  .lr-quote blockquote { font-size: 16px; }
}
.lr-toc { border: 0; background: rgba(255, 255, 255, .03); }
.lr-hub .lr-hero.wide img { max-height: 320px; }
.lr-hero.wide img { max-height: 380px; }
.lr-quote figcaption { text-align: left; margin-top: 0; }

/* ---- dungeon guides (/dungeons, /dungeon/<id>): clean, no borders; labels say where each fact comes from */
.badge.client { background: rgba(63, 208, 217, .12); color: var(--teal); }
.dg-card, .dg-hero { border: 0; }
.dg-img { display: block; }
.dg-controls { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 6px 0 4px; }
.dg-controls small { display: block; color: var(--muted); font-size: 12px; margin-bottom: -8px; }
.dg-controls input { width: 76px; padding: 4px 8px; background: rgba(255, 255, 255, .05); color: var(--text); border: 0; border-radius: 6px; }
.dg-worth { display: grid; gap: 3px; font-size: 13px; }
.dg-worth > small { color: var(--muted); }
.dg-loot-count { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 12px; }
.dg-kicker { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dg-chips { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; }
.dg-chips > span { display: grid; gap: 2px; font-size: 14px; align-content: start; }
.dg-chips .v { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.dg-chips .v > span { white-space: nowrap; }
.dg-chips small { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
.dg-chips b { color: #fff; }
.dg-jump { display: flex; gap: 4px 16px; flex-wrap: wrap; padding: 2px 2px 8px; margin: -6px 0 6px; font-size: 14px; }
.dg-sec { scroll-margin-top: calc(var(--hdr-h, 59px) + 18px); margin-bottom: 26px; }
.dg-sec h3 { margin: 16px 0 6px; font-size: 16px; }
.dg-over { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 8px 32px; }
.dg-over > div > h3:first-child { margin-top: 4px; }
.dg-expect { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.dg-list { margin: 4px 0; padding-left: 18px; display: grid; gap: 5px; }
.dg-how { margin-top: 12px; }
.dg-how p { margin: 6px 0; line-height: 1.5; }
.dg-how p.small { margin-top: -2px; }
.dg-quote { margin: 8px 0; padding: 10px 14px; background: rgba(255, 255, 255, .03); border-radius: 8px; }
.dg-quote cite { display: block; margin-top: 6px; font-size: 12.5px; font-style: normal; color: var(--muted); }
.dg-bosses-list { display: grid; gap: 14px; }
.dg-boss { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; padding: 14px; background: var(--panel); border-radius: 12px; scroll-margin-top: calc(var(--hdr-h, 59px) + 18px); }
.dg-boss-img { position: relative; align-self: start; }
.dg-boss-img img { width: 100%; height: auto; display: block; border-radius: 8px; background: rgba(255, 255, 255, .03); }
.dg-boss-src { position: absolute; left: 6px; bottom: 6px; }
.dg-boss-src .src-classic, .dg-boss-src .badge { background: rgba(7, 11, 22, .85); margin: 0; }
.dg-boss.noimg { grid-template-columns: 56px minmax(0, 1fr); }
.dg-boss-none { aspect-ratio: 1; display: grid; place-content: center; text-align: center; border-radius: 8px; background: rgba(255, 255, 255, .03); color: var(--muted); }
.dg-boss-none span { font-size: 26px; font-weight: 700; color: rgba(255, 255, 255, .14); line-height: 1; }
.dg-boss-main header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dg-boss-main h3 { margin: 0; font-size: 19px; }
.dg-boss-main h4 { margin: 12px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.dg-num { display: inline-grid; place-content: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(240, 195, 90, .15); color: var(--gold); font-size: 13px; font-weight: 700; }
.dg-ab-text { font-size: 13px; color: #c9cfdc; margin-top: 2px; }
.dg-tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 6px 16px; font-size: 13px; }
.dg-tips ul { margin: 2px 0 0; padding-left: 16px; }
/* boss abilities from players' combat logs: a timeline row per ability, the drafted guide */
.dg-logs { margin-top: 8px; }
.dg-logs p { margin: 4px 0; }
.dg-logs .badge.ok { background: rgba(61, 220, 132, .12); color: var(--new); }
.dg-danger { color: var(--removed); font-weight: 600; }
.dg-tl { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.dg-tl-row { display: grid; gap: 3px; }
.dg-tl-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dg-tl-bar { position: relative; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .06); }
.dg-tl-bar i { position: absolute; top: -2px; width: 4px; height: 12px; margin-left: -2px; border-radius: 2px; background: var(--gold); }
.dg-tl-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 4px; }
/* players' runs (ForeverDB Helper + Companion): clear times and most wanted in the overview, a kill line on each boss */
.dg-runs { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .06); }
.dg-runs p { margin: 4px 0; }
.dg-runline { margin: 6px 0 0; }
.dg-wanted, .dg-wanted-all { margin: 4px 0; padding-left: 22px; display: grid; gap: 5px; }
.dg-wanted-all { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 6px 24px; }
.dg-guide { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: rgba(61, 220, 132, .05); border: 1px solid rgba(61, 220, 132, .18); }
.dg-guide h4 { margin-top: 0; }
.dg-guide p { margin: 4px 0; font-size: 14px; }
.dg-filters { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; }
.dg-filters .filters { margin: 8px 0; }
.dg-filters select { background: rgba(255, 255, 255, .05); color: var(--text); border: 0; border-radius: 6px; padding: 4px 6px; }
.dg-table-wrap { overflow-x: auto; }
.dg-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.dg-table th { text-align: left; font-weight: 600; color: var(--muted); font-size: 12px; padding: 6px 8px; }
.dg-table td { padding: 7px 8px; vertical-align: top; }
.dg-table tbody tr:nth-child(odd) { background: rgba(255, 255, 255, .025); }
.dg-vids { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px 18px; }
.dg-vid { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 14px; }
.dg-vid img { width: 100%; height: auto; border-radius: 6px; display: block; }
.dg-vid small { display: block; color: var(--muted); }
.dg-vid a { color: var(--text); }
.dg-vid a.yt-by { color: var(--link); }
@media (max-width: 760px) {
  .dg-over { grid-template-columns: 1fr; }
  .dg-boss { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 12px 10px; }
  .dg-boss.noimg { grid-template-columns: 44px minmax(0, 1fr); }
  .dg-boss-src { display: none; }
  .dg-hero-text { padding: 18px 16px; }
  .dg-table th:nth-child(3), .dg-table td:nth-child(3), .dg-table th:nth-child(4), .dg-table td:nth-child(4) { display: none; }
  .dg-vids { grid-template-columns: 1fr; }
  .dg-vid { grid-template-columns: 120px minmax(0, 1fr); }
  .dg-guide { padding: 8px; }
}
@media (max-width: 480px) {   /* the loot table as one small card per item */
  .dg-table thead { display: none; }
  .dg-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 6px; }
  .dg-table tr[hidden] { display: none; }
  .dg-table td { padding: 0; }
  .dg-table td:nth-child(2) { display: none; }
  .dg-table td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .dg-table td:nth-child(7) { grid-column: 2; grid-row: 1; text-align: right; }
  .dg-table td:nth-child(5), .dg-table td:nth-child(6) { grid-column: 1 / -1; }
  .dg-table td:nth-child(5)::before { content: "From "; color: var(--muted); }
}

/* ---------- Tips & questions (site/js/tips.js): players' short posts at the bottom of a page. No borders: soft panels ---------- */
.tips-block { max-width: 860px; margin: 36px 0 12px; }
.app.wide > .tips-block { margin: 28px auto 12px; padding: 0 16px; }
.tips-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tips-head h2 { margin: 0 0 10px; }
.tips-head h2 .muted { font-weight: 500; font-size: 16px; }
.tips-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.tips-tabs button { background: rgba(255, 255, 255, .04); border: 0; color: var(--muted); padding: 6px 12px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 13px; }
.tips-tabs button:hover { color: var(--text); background: rgba(255, 255, 255, .07); }
.tips-tabs button.active { background: rgba(240, 195, 90, .14); color: var(--gold); }
.tips-tabs button span { opacity: .75; margin-left: 2px; }
.tips-list { display: grid; gap: 8px; }
.tips-empty { margin: 4px 0 10px; }
.tip { background: rgba(16, 22, 40, .72); border-radius: 10px; padding: 12px 14px; }
.tip.pinned { background: linear-gradient(180deg, rgba(240, 195, 90, .09), rgba(16, 22, 40, .72) 60%); }
.tip-pin { color: var(--gold); font-size: 11.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; margin: 0 0 6px 44px; }
.tip-row, .tip-answer { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; }
.tip-vote { display: flex; flex-direction: column; align-items: center; gap: 1px; padding-top: 1px; }
.tip-vote button { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 12px; line-height: 1; padding: 3px 6px; border-radius: 4px; }
.tip-vote button:hover:not(:disabled) { color: var(--gold); background: rgba(255, 255, 255, .05); }
.tip-vote button.on { color: var(--gold); }
.tip-vote button:disabled { opacity: .35; cursor: default; }
.tip-vote b { font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; }
.tip-main { min-width: 0; }
.tip-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12.5px; margin-bottom: 4px; }
.tip-meta b { color: #fff; font-weight: 600; }
.tip-flair { font-size: 12px; font-weight: 500; }
.tip-build { font-size: 11.5px; color: var(--changed); background: rgba(255, 179, 71, .1); padding: 0 6px; border-radius: 4px; }
.tip-about { font-size: 12.5px; color: var(--muted); margin: 0 0 4px; }
.tip-text { font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.tip-text a { overflow-wrap: anywhere; }
.tip-ent { font-weight: 550; }
.tip-actions { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 12.5px; }
.tip-actions a, .linkish { color: var(--muted); }
.linkish { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.linkish:hover, .tip-actions a:hover { color: var(--link); text-decoration: underline; }
.tip-note { font-size: 12.5px; color: var(--muted); background: rgba(127, 178, 255, .07); border-radius: 6px; padding: 5px 9px; margin: 6px 0 0; }
.tip-note.warn { color: #ffcf8a; background: rgba(255, 179, 71, .09); }
.tip-answers { margin-top: 8px; display: grid; gap: 6px; }
.tip-answers:empty { display: none; }
.tip-answer { background: rgba(255, 255, 255, .025); border-radius: 8px; padding: 8px 10px; }
.tip-answer.accepted { background: rgba(61, 220, 132, .07); }
.tip-accepted { display: inline-block; color: var(--new); font-size: 12px; font-weight: 600; margin-bottom: 2px; }
.tip-auto { background: rgba(63, 208, 217, .06); border-radius: 8px; padding: 8px 12px; }
.tip-auto-head { font-size: 12.5px; font-weight: 650; color: var(--teal); margin-bottom: 3px; }
.tip-auto-src { font-size: 12px; color: var(--muted); margin: 4px 0; }
.tips-compose { margin-top: 12px; }
.tip-form { display: grid; gap: 6px; background: rgba(16, 22, 40, .55); border-radius: 10px; padding: 10px; }
.tip-form textarea { width: 100%; min-height: 76px; resize: vertical; font: inherit; font-size: 14px; line-height: 1.5; background: rgba(7, 11, 22, .6); color: var(--text);
  border: 0; border-radius: 8px; padding: 8px 10px; outline: none; }
.tip-form textarea:focus { box-shadow: 0 0 0 1px rgba(240, 195, 90, .45); }
.tip-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.tip-form-foot > .muted:first-child { flex: 1 1 260px; }
.tip-form-foot code { font-size: 11.5px; background: rgba(255, 255, 255, .06); padding: 0 4px; border-radius: 3px; }
.tip-form-msg:empty { display: none; }
.tip-about-pick { font-size: 13px; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.tip-login { margin: 6px 0; }
.tip-answer-form { margin-top: 4px; }
.dg-boss-tips { margin: -2px 0 6px; }
.dg-boss-tips:empty { display: none; }
.tips-page { max-width: 900px; }
.tips-title { font-size: 24px; overflow-wrap: anywhere; }
.tips-filters { margin: 8px 0 14px; }
.tips-filters .tips-tabs { margin: 0; }
.tips-rules { margin-top: 28px; }
.tips-rules ul { padding-left: 20px; margin: 6px 0 10px; }
.me-tips { margin-top: 18px; }
.tip-flair-pick { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 0 0 12px; font-size: 13.5px; }
.tip-mine { margin: 0 0 8px; }
.tip-mine > .badge { margin: 0 0 4px 2px; }
.ta-post .ta-text { background: rgba(255, 255, 255, .03); border-radius: 6px; padding: 8px 10px; margin: 8px 0; }
@media (max-width: 600px) {
  .tips-block { margin-top: 28px; }
  .tip { padding: 10px 10px; }
  .tip-row, .tip-answer { grid-template-columns: 28px minmax(0, 1fr); gap: 8px; }
  .tip-pin { margin-left: 36px; }
  .tip-form-foot .btn { margin-left: auto; }
}

/* ---------- guild tools (/guild/<region>/<realm>/<guild>/tools, /guild-tools; site/js/pages/guild.js): flat, no borders ---------- */
.gt-box { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 12px 16px; border-radius: 12px;
  background: rgba(63, 208, 217, .07); margin: 10px 0 14px; }
.gt-box p { margin: 2px 0 0; }
.gt-sub { font-size: 16px; font-weight: 500; }
.gt-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-start; justify-content: space-between; }
.gt-head h1 { overflow-wrap: anywhere; }
.gt-tabs { margin: 12px 0 16px; }
.gt-bar, .gt-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 12px; }
.gt-check { display: inline-flex; gap: 6px; align-items: center; font-size: 13.5px; cursor: pointer; }
.gt-list { display: grid; gap: 8px; padding-left: 20px; margin: 0; }
.gt-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 4px 28px; }
.gt-info h2 { margin-top: 18px; }
.gt-day h3 { margin: 18px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.gt-ev { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto auto; gap: 4px 14px; align-items: center; padding: 10px 14px; border-radius: 12px;
  background: var(--panel); color: var(--text); margin-bottom: 6px; }
.gt-ev:hover { text-decoration: none; background: var(--panel-2); }
.gt-ev.past, .gt-ev.cancelled { opacity: .55; }
.gt-ev-time { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--gold); }
.gt-ev-main { display: grid; min-width: 0; }
.gt-ev-main b { overflow-wrap: anywhere; }
.gt-ev-counts { display: flex; gap: 6px; }
.gt-count { font-size: 12.5px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .06); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gt-count.over { background: rgba(255, 179, 71, .18); color: var(--changed); }
.gt-chip { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--text);
  vertical-align: middle; white-space: nowrap; }
.gt-chip.accepted, .gt-chip.ok { background: rgba(61, 220, 132, .16); color: #7ff0b0; }
.gt-chip.tentative, .gt-chip.late { background: rgba(255, 179, 71, .16); color: var(--changed); }
.gt-chip.bench { background: rgba(127, 178, 255, .14); color: #a9c8ff; }
.gt-chip.absent, .gt-chip.bad { background: rgba(255, 107, 107, .15); color: var(--removed); }
.gt-chip.todo { background: linear-gradient(180deg, #d9a93f, #a4761d); color: #1a1205; }
.gt-chip.role { background: rgba(255, 255, 255, .1); min-width: 22px; text-align: center; }
.gt-empty { text-align: center; padding: 26px; border: 0; }
.gt-form { padding: 14px 16px; border-radius: 12px; background: var(--panel); margin-bottom: 16px; }
.gt-form h3 { margin-top: 0; }
.gt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 10px 14px; margin-bottom: 10px; }
.gt-grid label, .gt-wide { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.gt-wide { grid-column: 1 / -1; margin-bottom: 10px; }
.gt-form .input, .gt-signform .input, .gt-you .input { box-sizing: border-box; border: 0; background: rgba(255, 255, 255, .06); border-radius: 8px; color: var(--text); font: inherit; }
.gt-form .input { padding: 8px 10px; width: 100%; }
.gt-form textarea.input { resize: vertical; }
.gt-bosses { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-bottom: 10px; }
.gt-back { margin: 0 0 6px; }
.gt-evhead { display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: space-between; align-items: flex-start; }
.gt-evhead h2 { margin: 0 0 4px; overflow-wrap: anywhere; }
.gt-when { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: #fff; }
.gt-notes { white-space: pre-wrap; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .04); max-width: 760px; overflow-wrap: anywhere; }
.gt-evactions { display: flex; flex-wrap: wrap; gap: 6px; }
.gt-signform { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 12px 14px; border-radius: 12px; background: rgba(240, 195, 90, .07); margin: 12px 0; }
.gt-signform .input { padding: 6px 8px; }
.gt-signform input[name=comment] { flex: 1 1 200px; min-width: 0; }
.gt-statuses { display: flex; flex-wrap: wrap; gap: 4px; }
.gt-stat { position: relative; }
.gt-stat input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gt-stat span { display: inline-block; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); font-size: 13px; cursor: pointer; }
.gt-stat input:checked + span { background: var(--teal); color: #041417; font-weight: 600; }
.gt-stat.absent input:checked + span { background: var(--removed); }
.gt-stat.tentative input:checked + span, .gt-stat.late input:checked + span { background: var(--changed); }
.gt-stat input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.gt-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.gt-col { padding: 10px 12px; border-radius: 12px; background: var(--panel); min-width: 0; }
.gt-col h4 { margin: 0 0 8px; }
.gt-sign { display: grid; gap: 3px; padding: 6px 0; min-width: 0; }
.gt-sign + .gt-sign { border-top: 1px solid rgba(255, 255, 255, .05); }
.gt-sign.mine .gt-sign-who b { text-decoration: underline; text-decoration-color: rgba(240, 195, 90, .6); text-underline-offset: 3px; }
.gt-sign-tags { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.gt-sign-c { overflow-wrap: anywhere; }
.gt-sign-ctl { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.gt-sign-ctl .input { padding: 2px 4px; }
.gt-others { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 0 16px; padding: 4px 12px; border-radius: 12px; background: var(--panel); }
.gt-sub-h { margin-top: 16px; }
.gt-missing { margin: 12px 0; }
.gt-missing summary { cursor: pointer; color: var(--muted); font-size: 13.5px; }
.gt-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px; }
.gt-group { padding: 10px 12px; border-radius: 12px; background: var(--panel); }
.gt-group h4 { margin: 0 0 6px; }
.gt-slot { grid-template-columns: 22px minmax(0, 1fr); gap: 0 6px; padding: 3px 0 3px 16px; }
.gt-slot::before { top: 9px; }
.gt-slot-role { font-weight: 700; font-size: 12px; color: var(--muted); grid-row: span 2; }
.gt-slot span:nth-child(2) { overflow-wrap: anywhere; }
.gt-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, .18); flex: none; vertical-align: -1px; }
.gt-dot.green { background: #3ddc84; }
.gt-dot.amber { background: #ffb347; }
.gt-dot.red { background: #ff6b6b; }
.gt-rd-sum { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.gt-rd { padding: 8px 12px; border-radius: 12px; background: var(--panel); margin-bottom: 6px; min-width: 0; }
.gt-rd.stale { opacity: .6; }
.gt-rd.none { opacity: .7; }
.gt-rd-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; cursor: pointer; list-style: none; }
.gt-rd-head::-webkit-details-marker { display: none; }
.gt-rd-why { color: var(--changed); }
.gt-rd.green .gt-rd-why { color: #7ff0b0; }
.gt-rd-age { margin-left: auto; }
.gt-stale { color: var(--changed); }
.gt-checks { list-style: none; margin: 8px 0 4px; padding: 0; display: grid; gap: 6px; }
.gt-checks li { padding-left: 14px; position: relative; overflow-wrap: anywhere; font-size: 13.5px; }
.gt-checks li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.gt-checks li.ok::before { background: #3ddc84; }
.gt-checks li.warn::before { background: #ffb347; }
.gt-checks li.bad::before { background: #ff6b6b; }
.gt-basis { display: block; font-size: 12px; }
.gt-shop { margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: rgba(240, 195, 90, .06); }
.gt-shop h5 { margin: 8px 0 4px; font-size: 13px; }
.gt-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; }
.gt-items .ent { display: inline-flex; gap: 6px; align-items: center; }
.gt-roster td { overflow-wrap: anywhere; }
.gt-roster .icon { vertical-align: -4px; margin-right: 6px; }
.gt-plain { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.gt-member { padding: 12px 16px; border-radius: 12px; background: rgba(255, 255, 255, .03); margin: 14px 0; }
.gt-member-head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.gt-member-head h3 { margin: 0; }
.gt-member-head .btn { margin-left: auto; }
.gt-you { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 12px; align-items: start; }
.gt-you .ar-box { margin: 0; min-width: 0; }
.gt-you h3 { margin-top: 0; }
.gt-you .gt-wide { grid-column: 1 / -1; }
.gt-you .input { padding: 6px 8px; }
.gt-you input[type=email] { flex: 1 1 220px; min-width: 0; }
.gt-you .gt-ics { flex: 1 1 260px; min-width: 0; font-size: 12px; }
.gt-mine { display: grid; gap: 8px; margin: 8px 0 16px; }
.gt-mine-g { padding: 10px 14px; border-radius: 12px; background: var(--panel); }
.gt-mine-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.gt-mine-head .btn { margin-left: auto; }
.gt-mine-c { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; padding: 6px 0; }
.gt-join ul { margin: 6px 0 12px; }
/* soft reserves, the loot log and attendance (guild_loot.js) */
.gt-sr-rules { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.gt-sr-mine { padding: 12px 14px; border-radius: 12px; background: rgba(240, 195, 90, .07); margin: 8px 0 4px; }
.gt-sr-mine .gt-row { margin: 0 0 8px; }
.gt-sr-mine .gt-row:last-child { margin: 8px 0 0; }
.gt-sr-mine .input, .gt-sr-search .input, .gt-hard .input, .gt-bar .input { border: 0; background: rgba(255, 255, 255, .06); border-radius: 8px; color: var(--text); font: inherit; padding: 6px 8px; min-width: 0; max-width: 100%; }
.gt-sr-picked { display: flex; flex-wrap: wrap; gap: 6px; }
.gt-sr-chip { display: inline-flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; padding: 4px 6px 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); min-width: 0; }
.gt-sr-chip .ent, .gt-sr-name .ent, .gt-sr-whoitem .ent, .gt-loot-item .ent { display: inline-flex; gap: 6px; align-items: center; overflow-wrap: anywhere; }
.gt-x { border: 0; background: none; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 4px; border-radius: 6px; }
.gt-x:hover, .gt-x:focus-visible { color: var(--removed); background: rgba(255, 107, 107, .12); }
.gt-sr-boss { padding: 6px 12px; border-radius: 12px; background: var(--panel); margin-bottom: 6px; }
.gt-sr-boss summary { cursor: pointer; padding: 4px 0; }
.gt-sr-list { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 2px; }
.gt-sr-item { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; justify-content: space-between; padding: 4px 0; min-width: 0; }
.gt-sr-item + .gt-sr-item { border-top: 1px solid rgba(255, 255, 255, .05); }
.gt-sr-item.mine .gt-sr-name .ent { text-decoration: underline; text-decoration-color: rgba(240, 195, 90, .6); text-underline-offset: 3px; }
.gt-sr-name { min-width: 0; flex: 1 1 240px; }
.gt-sr-act { display: flex; gap: 8px; align-items: center; }
.gt-sr-act .btn.active { background: var(--teal); color: #041417; }
.gt-sr-search { margin-top: 10px; }
.gt-sr-search input[type=search] { flex: 1 1 260px; }
.gt-sr-who { padding: 8px 12px; border-radius: 12px; background: var(--panel); margin-bottom: 6px; }
.gt-sr-who h5 { margin: 2px 0 6px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.gt-sr-whoitem { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 4px 12px; align-items: center; padding: 4px 0; }
.gt-sr-whoitem + .gt-sr-whoitem { border-top: 1px solid rgba(255, 255, 255, .05); }
.gt-sr-names { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.gt-sr-n { white-space: nowrap; }
.gt-sr-plus { font-size: 11.5px; font-weight: 700; padding: 0 6px; border-radius: 999px; background: rgba(255, 179, 71, .16); color: var(--changed); }
.gt-sr-export { margin-top: 10px; }
.gt-sr-rulesform { margin-top: 14px; }
.gt-sr-rulesform summary { cursor: pointer; color: var(--gold); font-weight: 600; }
.gt-sr-form { margin-top: 10px; }
.gt-grid label .small { color: var(--muted); }
.gt-hard { margin: 0 0 6px; }
.gt-hard input { flex: 1 1 180px; }
.gt-bar select.input { max-width: 100%; }
.gt-loot-sum { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.gt-loot-p { border: 0; background: var(--panel); border-radius: 999px; padding: 4px 12px; color: var(--text); font: inherit; font-size: 13.5px; cursor: pointer; }
.gt-loot-p:hover, .gt-loot-p:focus-visible { background: var(--panel-2); }
.gt-loot-g { padding: 6px 14px 8px; border-radius: 12px; background: var(--panel); margin-bottom: 10px; }
.gt-loot-g h3 { margin: 6px 0 4px; font-size: 15px; }
.gt-loot-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .8fr); gap: 2px 14px; align-items: center; padding: 7px 0; }
.gt-loot-row + .gt-loot-row { border-top: 1px solid rgba(255, 255, 255, .05); }
.gt-loot-row.removed { opacity: .5; }
.gt-loot-item, .gt-loot-who { min-width: 0; overflow-wrap: anywhere; }
.gt-loot-tags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.gt-loot-note { grid-column: 1 / -1; overflow-wrap: anywhere; }
.gt-loot-ctl { grid-column: 1 / -1; display: flex; gap: 6px; }
.gt-loot-edit { grid-column: 1 / -1; }
.gt-loot-picked .ent { display: inline-flex; gap: 6px; align-items: center; }
.gt-att td { vertical-align: middle; }
.gt-att-p { white-space: nowrap; font-variant-numeric: tabular-nums; }
.gt-att-bar { display: inline-block; width: 60px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); vertical-align: middle; margin-right: 6px; overflow: hidden; }
.gt-att-bar span { display: block; height: 100%; background: var(--teal); border-radius: 999px; }
.gt-att-bad { color: var(--removed); }
.gt-att-ev { padding: 8px 12px; border-radius: 12px; background: var(--panel); margin-bottom: 6px; }
.gt-att-ev summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.gt-att-sum { margin-left: auto; color: var(--muted); }
.gt-att-list { display: grid; gap: 4px; margin-top: 8px; }
.gt-att-row { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.gt-att-row .input { border: 0; background: rgba(255, 255, 255, .06); border-radius: 8px; color: var(--text); padding: 2px 6px; margin-left: auto; }
.gt-chip.noshow { background: rgba(255, 107, 107, .15); color: var(--removed); }
@media (max-width: 600px) {
  .gt-sr-whoitem { grid-template-columns: minmax(0, 1fr); }
  .gt-loot-row { grid-template-columns: minmax(0, 1fr); }
  .gt-loot-tags { justify-content: flex-start; }
  .gt-att-bar { display: none; }
  .gt-att-sum { margin-left: 0; }
  .gt-att-row .input { margin-left: 0; }
}
@media (max-width: 600px) {
  .gt-ev { grid-template-columns: 52px minmax(0, 1fr); }
  .gt-ev-counts, .gt-ev-me { grid-column: 2; }
  .gt-rd-age { margin-left: 0; width: 100%; }
  .gt-member-head .btn, .gt-mine-head .btn { margin-left: 0; }
}

/* ---------------------------------------------------------------- the group finder (/lfg), the recruitment board (/recruit) and Discord links */
.dg-jump .dg-lfg { margin-left: auto; font-weight: 600; color: var(--gold); }
.lf-head { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: flex-start; justify-content: space-between; }
.lf-head > div:first-child { flex: 1 1 520px; min-width: 0; }
.lf-cta { padding-top: 8px; }
.lf-filters { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 4px 0 12px; }
.lf-filters .input { min-width: 0; max-width: 100%; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); border-radius: 8px; color: var(--text); }
.lf-filters input[name=realm] { width: 130px; }
.lf-filters input[name=level] { width: 90px; }
.lf-status { margin: 0 0 8px; min-height: 1.5em; }
.lf-list { display: grid; gap: 10px; }
.lf-card { padding: 12px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--gold-2); min-width: 0; }
.lf-card.lfm { border-left-color: var(--teal); }
.lf-card.mine { box-shadow: inset 0 0 0 1px rgba(240, 195, 90, .25); }
.lf-card.focus { box-shadow: 0 0 0 2px var(--gold); }
.lf-top { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.lf-top h3 { margin: 0; font-size: 16px; min-width: 0; overflow-wrap: anywhere; }
.lf-age { margin-left: auto; }
.lf-kind { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; padding: 1px 7px; border-radius: 6px; background: rgba(240, 195, 90, .16); color: var(--gold); }
.lf-kind.lfm { background: rgba(63, 208, 217, .16); color: var(--teal); }
.lf-meta { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 4px; }
.gt-chip.role-tank { background: rgba(127, 178, 255, .16); color: #a9c8ff; }
.gt-chip.role-healer { background: rgba(61, 220, 132, .16); color: #7ff0b0; }
.gt-chip.role-dps { background: rgba(255, 107, 107, .15); color: #ffa3a3; }
.gt-chip.alliance { background: rgba(60, 120, 255, .18); color: #9cc0ff; }
.gt-chip.horde { background: rgba(220, 50, 50, .2); color: #ff9c9c; }
.gt-chip.focus { background: rgba(240, 195, 90, .14); color: var(--gold); }
.lf-note { margin: 6px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.lf-foot { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; margin-top: 6px; }
.lf-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lf-w { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.btn.copied { background: rgba(61, 220, 132, .2); }
.link-btn { background: none; border: 0; color: var(--muted); }
.link-btn:hover { color: var(--text); text-decoration: underline; }
.lf-report { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lf-report .input { background: rgba(255, 255, 255, .06); border: 1px solid var(--line); border-radius: 6px; color: var(--text); min-width: 0; }
.lf-kinds { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 10px; }
.lf-how { margin-top: 26px; }
.lf-admin { margin-bottom: 10px; }
/* sign-ups on LFM posts (pages/lfg.js): the places per role, the buttons, your own sign-up, the owner's list */
.lf-start { margin: 6px 0 2px; display: flex; flex-wrap: wrap; gap: 2px 10px; }
.lf-signups { margin: 8px 0 4px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.lf-slots { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.lf-slot { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 14px; }
.lf-slot.role-tank b { color: #a9c8ff; }
.lf-slot.role-healer b { color: #7ff0b0; }
.lf-slot.role-dps b { color: #ffa3a3; }
.lf-slot.full { opacity: .75; }
.lf-slot .icon.sm { width: 18px; height: 18px; }
.lf-su-buttons { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-top: 8px; }
.lf-su-buttons .btn.lf-su { min-width: 150px; }
.lf-su-form { margin-top: 8px; }
.lf-su-form .input { background: rgba(255, 255, 255, .06); border: 1px solid var(--line); border-radius: 6px; color: var(--text); min-width: 0; }
.lf-you { margin-top: 8px; }
.lf-you.new, .lf-roster li.new { box-shadow: inset 3px 0 0 var(--gold); padding-left: 8px; }
.gt-chip.lf-st-accepted { background: rgba(61, 220, 132, .18); color: #7ff0b0; }
.gt-chip.lf-st-declined { background: rgba(255, 107, 107, .15); color: #ffa3a3; }
.gt-chip.lf-st-waitlist { background: rgba(240, 195, 90, .14); color: var(--gold); }
.lf-manage h4 { margin: 10px 0 6px; font-size: 14px; }
.lf-roster { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lf-roster li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); min-width: 0; }
.lf-roster li.lf-st-declined { opacity: .6; }
.lf-roster .lf-actions { margin-left: auto; }
.lf-su-note { flex: 1 1 100%; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.lf-news { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; margin: 0 0 12px; }
.lf-form .lf-lfm { margin: 4px 0 8px; }
@media (max-width: 820px) {
  .lf-roster .lf-actions { margin-left: 0; }
  .lf-su-buttons .btn.lf-su { flex: 1 1 140px; min-width: 0; }
}
.ok-text { color: #7ff0b0; }
.rcp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 12px; }
.rcp-card { display: block; padding: 14px 16px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); color: var(--text); min-width: 0; }
.rcp-card:hover { text-decoration: none; border-color: var(--gold-2); }
.rcp-top { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.rcp-top h3 { margin: 0; color: #fff; overflow-wrap: anywhere; }
.rcp-times { margin: 6px 0 4px; }
.rcp-wants { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 6px 0; }
.rcp-want { font-size: 12px; padding: 1px 8px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--cc) 45%, transparent); }
.rcp-want b { color: var(--cc); }
.rcp-desc { color: var(--muted); font-size: 13.5px; margin: 6px 0; overflow-wrap: anywhere; }
.rcp-mine { margin-bottom: 8px; }
.rcp-apps { display: grid; gap: 8px; }
.rcp-grid-table td, .rcp-grid-table th { padding: 4px 8px; }
.rcp-slot { margin-bottom: 6px; }
.rcp-detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.rcp-about { white-space: normal; overflow-wrap: anywhere; line-height: 1.6; margin: 10px 0; }
.rcp-side { display: grid; gap: 10px; }
.rcp-discord { text-align: center; }
.rcp-app { margin-bottom: 10px; }
.rcp-app .input { background: rgba(255, 255, 255, .06); border: 1px solid var(--line); border-radius: 6px; color: var(--text); min-width: 0; flex: 1 1 180px; }
.gt-form input[type=time].input, .rcp-slot .input { background: rgba(255, 255, 255, .06); border: 1px solid var(--line); border-radius: 6px; color: var(--text); }
.dl-box { margin-top: 18px; }
.dl-code { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .05); }
.dl-big { font-size: 22px; font-weight: 800; letter-spacing: .12em; color: var(--gold); }
@media (max-width: 820px) {
  .rcp-detail { grid-template-columns: minmax(0, 1fr); }
  .dg-jump .dg-lfg { margin-left: 0; }
  .lf-age { margin-left: 0; width: 100%; }
  .lf-filters .input, .lf-filters input[name=realm], .lf-filters input[name=level] { flex: 1 1 140px; width: auto; }
}
.gt-form [hidden], .lf-form [hidden] { display: none !important; }

/* ---------------------------------------------------------------- rare spawns (/rares, /rare/<id>: pages/rares.js) */
.rr-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0 6px; }
.rr-bar .input { background: var(--panel); border: 0; border-radius: 8px; color: var(--text); padding: 9px 12px; font-size: 15px; }
.rr-zone { flex: 1 1 260px; max-width: 380px; }
.rr-q { flex: 1 1 180px; max-width: 260px; }
.rr-seg { display: inline-flex; background: var(--panel); border-radius: 8px; padding: 3px; gap: 2px; }
.rr-seg button { background: none; border: 0; border-radius: 6px; color: var(--muted); padding: 6px 12px; font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap; }
.rr-seg button.on { background: var(--panel-2); color: #fff; }
.rr-seg button .muted { font-size: 12px; }
.rr-more { margin: 4px 0 10px; }
.rr-more summary { cursor: pointer; color: var(--muted); font-size: 13.5px; width: max-content; }
.rr-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 8px 0 2px; font-size: 14px; }
.rr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; margin: 8px 0 16px; }
.rr-grid.small { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.rr-card { display: flex; flex-direction: column; gap: 3px; padding: 10px 10px 12px; border-radius: 12px; background: var(--panel); color: var(--text); min-width: 0; transition: background .12s, transform .12s; }
.rr-card:hover { text-decoration: none; background: var(--panel-2); transform: translateY(-1px); }
.rr-img { display: block; width: 100%; aspect-ratio: 1; height: auto; object-fit: contain; border-radius: 9px; background: radial-gradient(circle at 50% 42%, #232b40, #0f1424 72%); margin-bottom: 4px; }
.rr-img.none::after { content: "?"; display: grid; place-items: center; height: 100%; color: var(--muted); font-size: 28px; }
.rr-name { color: #fff; font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
.rr-meta, .rr-seen { font-size: 12.5px; color: var(--muted); }
.rr-seen.yes { color: var(--new); }
.rr-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.rr-tag { font-size: 10.5px; line-height: 1.6; padding: 0 6px; border-radius: 4px; background: rgba(255, 255, 255, .06); color: var(--muted); white-space: nowrap; }
.rr-tag.elite { background: rgba(240, 195, 90, .14); color: var(--gold); }
.rr-tag.new, .rr-tag.seen { background: rgba(61, 220, 132, .13); color: var(--new); }
.rr-tag.tame { background: rgba(109, 203, 227, .13); color: var(--link); }
.rr-next { margin: -4px 0 14px; color: var(--muted); font-size: 14px; }
.rr-next .linkish { color: var(--link); }
.rr-about { max-width: 820px; margin-top: 18px; }
.rr-head { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; margin-bottom: 14px; }
.rr-head h1 { margin: 0 0 2px; }
.rr-head .lead { margin: 8px 0 0; }
.rr-sub { margin: 0 0 6px; }
.rr-img.big { max-width: 220px; margin: 0; }
.rr-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 6px 0 10px; }
.rr-facts > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 10px; background: var(--panel); min-width: 0; }
.rr-facts .l { font-size: 12px; color: var(--muted); }
.rr-facts b { color: #fff; font-size: 17px; }
.rr-facts .s { font-size: 11.5px; color: var(--muted); }
.rr-map { margin: 8px 0 14px; max-width: 760px; }
.rr-map-img { position: relative; border-radius: 10px; overflow: hidden; line-height: 0; }
.rr-map-img img { width: 100%; height: auto; display: block; }
.rr-pin { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #e6e6f0; box-shadow: 0 0 0 3px rgba(7, 11, 22, .75), 0 0 12px rgba(230, 230, 240, .8); }
.rr-pin.seen, .rr-key.seen { background: var(--new); box-shadow: 0 0 0 3px rgba(7, 11, 22, .75), 0 0 12px rgba(61, 220, 132, .8); }
.rr-key { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 2px 0 6px; }
.rr-map figcaption { font-size: 13px; color: var(--muted); padding-top: 6px; line-height: 1.5; }
.rr-notes { margin: 4px 0 10px; padding-left: 20px; }
.rr-notes:empty { display: none; }
.rr-spec { font-size: 13.5px; color: var(--muted); background: rgba(240, 195, 90, .07); border-radius: 8px; padding: 8px 12px; max-width: 820px; }
.rr-spec b { color: var(--gold); }
table.rr-loot { max-width: 760px; }
@media (max-width: 700px) {
  .rr-zone, .rr-q { max-width: none; flex-basis: 100%; }
  .rr-seg { width: 100%; }
  .rr-seg button { flex: 1; padding: 7px 6px; }
  .rr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rr-grid.small { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rr-head { grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
  .rr-head .lead { grid-column: 1 / -1; }
  .rr-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- talent calculator (pages/talents.js): the trees are the page; the rest are small buttons and a list ---------- */
.tc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
/* "Points left: 8 of 20 at level 20" and the one line on how to add and remove, right above the trees */
.tc-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 10px; }
.tc-pts { padding: 5px 12px; border-radius: 8px; background: rgba(255, 255, 255, .06); color: var(--text); font-size: 14px; font-variant-numeric: tabular-nums; }
.tc-pts b { color: var(--gold); font-size: 17px; }
.tc-pts.none { background: rgba(255, 179, 71, .12); }
.tc-pts.none b { color: #ffb347; }
/* out of points: the way on (talents.js drawPts, deny) */
.tc-raise { background: rgba(240, 195, 90, .18); color: var(--gold); font-weight: 600; }
.tc-raise:hover { background: rgba(240, 195, 90, .28); }
.tc-raise[hidden] { display: none; }
@keyframes tc-flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 179, 71, 0); } 30% { box-shadow: 0 0 0 4px rgba(255, 179, 71, .55); } }
.tc-pts.tc-flash, .tc-raise.tc-flash { animation: tc-flash .6s ease; }
.tc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 6px 14px; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .07); color: var(--text); font-size: 13px; cursor: pointer; text-decoration: none !important; }
.tc-btn:hover { background: rgba(255, 255, 255, .12); }
.tc-btn[aria-pressed="true"] { background: rgba(240, 195, 90, .18); color: var(--gold); }
.tc-btn.warn { background: rgba(255, 179, 71, .14); color: #ffb347; margin: 8px 0 2px; }
.tc-x { margin-left: auto; border: 0; background: none; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }
.tc-presets { display: grid; gap: 8px; margin-bottom: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.tc-pset { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tc-pset > b { min-width: 110px; }
.tc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 16px; align-items: start; }
.tc .talent-trees { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tc .tree { position: relative; overflow: hidden; border: 0; border-radius: 12px; padding: 12px 8px 16px; background: rgba(255, 255, 255, .035); }
.tc .tree > .tree-head, .tc .tree > .tree-grid { position: relative; }
.tc .tree-head { padding: 0 6px; }
.tc .tree-head h3 { font-size: 15px; }
.tc .tree-head b { color: var(--gold); font-size: 16px; }
.tc-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .16; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 20%, transparent); mask-image: linear-gradient(#000 20%, transparent); }
.tc .talent { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.tc .talent .icon { border-radius: 7px; }
.tc-cb { position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; border-radius: 50%; font: 700 10px/16px system-ui, sans-serif;
  text-align: center; box-shadow: 0 0 0 2px #0b1020; }
.tc-cb.new { background: var(--new); color: #04210f; }
.tc-cb.changed { background: #ffb347; color: #1a1205; }
.tc-hint { margin: 0; }
.tree-grid > .tc-minus { position: absolute; z-index: 2; width: 20px; height: 20px; padding: 0; border: 1px solid #555; border-radius: 50%;
  background: #000; color: #ff6b6b; font: 700 15px/17px system-ui, sans-serif; text-align: center; cursor: pointer; }
.tree-grid > .tc-minus[hidden] { display: none; }
.tree-grid > .tc-minus:hover, .tree-grid > .tc-minus:focus-visible { border-color: #ff6b6b; }
@media (hover: hover) {
  .tree-grid > .tc-minus { opacity: 0; transition: opacity .1s; }
  .tree-grid > .talent:hover + .tc-minus, .tree-grid > .tc-minus:hover, .tree-grid > .talent:focus-visible + .tc-minus { opacity: 1; }
}
/* sits in the 24px gap left of its talent, above the left neighbour's rank badge, so a tap on either talent never lands on it */
@media (hover: none) { .tree-grid > .tc-minus { width: 22px; height: 24px; line-height: 21px; margin: -2px 0 0 -2px; } }
@keyframes tc-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.tc .talent.tc-deny { animation: tc-shake .32s ease; }
.tc .talent.tc-deny .icon { box-shadow: 0 0 0 2px #ff6b6b; }
/* why a click didn't add a point: a small message by the talent for 2.5 s (talents.js deny) */
.tc-bubble { position: absolute; z-index: 6; width: max-content; max-width: min(240px, 100%); padding: 6px 10px; border: 1px solid #ff6b6b; border-radius: 8px;
  background: #160b0d; color: #ffd6d6; font-size: 12.5px; line-height: 1.35; pointer-events: none; animation: nl-fade .12s ease; }
.tc-bubble::before { content: ''; position: absolute; left: calc(var(--ax, 50%) - 5px); width: 8px; height: 8px; background: #160b0d; border: solid #ff6b6b; transform: rotate(45deg); }
.tc-bubble.down::before { top: -5px; border-width: 1px 0 0 1px; }
.tc-bubble.info { border-color: var(--gold); background: #17130a; color: #f3e3b8; }   /* a click that also raised the planned level */
.tc-bubble.info::before { background: #17130a; border-color: var(--gold); }
.tc-bubble.up::before { bottom: -5px; border-width: 0 1px 1px 0; }
@keyframes tc-still { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tc .talent.tc-deny { animation: tc-still .6s; } }
.tc-sectabs { display: none; gap: 6px; margin-bottom: 10px; }
.tc-sectabs button { flex: 1; min-height: 44px; padding: 8px 6px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .06); color: var(--text); font-size: 13.5px; cursor: pointer; }
.tc-sectabs button b { color: var(--gold); margin-left: 4px; }
.tc-sectabs button[aria-selected="true"] { background: rgba(240, 195, 90, .16); color: var(--gold); }
/* the levelling order */
.tc-order { padding: 12px 10px; border-radius: 12px; background: rgba(255, 255, 255, .035); }
.tc-oh { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px; }
.tc-oh h3 { margin: 0; font-size: 15px; }
.tc-oh select { max-width: 150px; padding: 4px 6px; font-size: 12px; }
.tc-steps { list-style: none; margin: 8px 0 0; padding: 0; max-height: 470px; overflow: auto; overscroll-behavior: contain; }
.tc-step { position: relative; display: grid; grid-template-columns: 24px 22px minmax(0, 1fr) auto 22px; align-items: center; gap: 7px;
  padding: 4px 4px 4px 2px; border-radius: 7px; font-size: 13px; cursor: pointer; }
.tc-step:hover, .tc-step.open { background: rgba(255, 255, 255, .06); }
.tc-step:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.tc-lv { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.tc-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-rk { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.tc-grip { color: var(--muted); opacity: .55; cursor: grab; touch-action: none; text-align: center; letter-spacing: -2px; padding: 0; }
.tc-step:hover .tc-grip { opacity: 1; }
.tc-step.bad { background: rgba(255, 107, 107, .1); }
.tc-step.bad .tc-nm { color: #ff9a9a; }
.tc-why { grid-column: 3 / -1; font-size: 11.5px; color: #ff9a9a; margin-top: -2px; }
.tc-step.over { opacity: .45; }
.tc-step.dragging { z-index: 2; background: var(--panel-2); box-shadow: 0 6px 18px rgba(0, 0, 0, .45); cursor: grabbing; }
.tc-step.drop-above { box-shadow: inset 0 2px 0 var(--gold); }
.tc-step.drop-below { box-shadow: inset 0 -2px 0 var(--gold); }
.tc-mark { margin: 4px 0; padding: 4px 6px 2px 33px; font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--gold);
  background: linear-gradient(90deg, rgba(240, 195, 90, .12), transparent); border-radius: 6px; }
.tc-next { padding: 6px 6px 2px 33px; color: var(--muted); font-size: 12.5px; }
.tc-pick { padding: 4px 2px 8px; }
.tc-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 4px; max-height: 220px; overflow: auto; }
.tc-opt { display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 6px; border: 0; border-radius: 7px; background: rgba(255, 255, 255, .05);
  color: var(--text); font-size: 12px; text-align: left; cursor: pointer; }
.tc-opt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-opt:hover { background: rgba(255, 255, 255, .1); }
.tc-opt.on { box-shadow: inset 0 0 0 1px var(--gold); }
.tc-pick-foot, .tc-oa { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
/* summary and the Classic compare */
.tc-below { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 16px; margin-top: 16px; align-items: start; }
.tc-sum, .tc-cmp { padding: 14px 16px; border-radius: 12px; background: rgba(255, 255, 255, .035); min-width: 0; }
.tc-sh { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.tc-sum h3, .tc-cmp h3 { margin: 0; font-size: 15px; }
.tc-sum h3 .muted, .tc-cmp h3 .muted { font-weight: 400; font-size: 12.5px; margin-left: 4px; }
.tc-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .05); }
.tc-seg button { border: 0; background: none; color: var(--muted); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; cursor: pointer; min-height: 30px; }
.tc-seg button[aria-pressed="true"] { background: rgba(240, 195, 90, .18); color: var(--gold); }
.tc-fxs { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.tc-fx { padding: 4px 10px; border-radius: 8px; background: rgba(255, 255, 255, .05); font-size: 13px; }
.tc-fx b { color: var(--gold); margin-left: 3px; }
.tc-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 10px 0 4px; font-size: 13px; }
.tc-acts .ent { display: inline-flex; align-items: center; gap: 6px; }
.tc-trig { opacity: .85; }
.tc-other { margin-top: 8px; font-size: 13px; }
.tc-other summary, .tc-cmp summary, .tc-how summary { cursor: pointer; color: var(--muted); padding: 4px 0; }
.tc-cmp summary { color: var(--text); font-weight: 600; }
.tc-other ul { margin: 6px 0 0; padding-left: 18px; }
.tc-other li { margin-bottom: 4px; }
.tc-clist { list-style: none; margin: 4px 0 10px; padding: 0; display: grid; gap: 4px; }
.tc-crow { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; padding: 6px 8px; border-radius: 8px; font-size: 13px; }
.tc-crow.mine { background: rgba(240, 195, 90, .07); }
.tc-was { font-size: 12.5px; color: #c9d0e0; }
.tc-was span { color: var(--muted); }
.tc-how { margin-top: 18px; font-size: 13.5px; color: var(--muted); }
.tc-how p { max-width: 80ch; }
/* a talent's card on phones (long press) */
.tc-card { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, .5); }
.tc-card-in { width: min(560px, 100%); max-height: 72vh; overflow: auto; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0;
  background: var(--bg-2); box-shadow: var(--shadow); }
.tc-card-h { display: flex; align-items: center; gap: 12px; }
.tc-card-h .icon { width: 44px; height: 44px; border-radius: 8px; }
.tc-card-in p { margin: 10px 0 0; font-size: 14px; }
.tc-need { color: #ff6b6b; }
.tc-card-b { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tc-card-b .tc-btn { flex: 1; min-height: 46px; font-size: 16px; }
@media (max-width: 1180px) {
  .tc-layout { grid-template-columns: minmax(0, 1fr); }
  .tc-steps { max-height: 360px; }
}
@media (max-width: 900px) {
  .tc-sectabs { display: flex; }
  .tc .talent-trees { grid-template-columns: minmax(0, 1fr); }
  .tc .tree:not(.on) { display: none; }
}
@media (max-width: 600px) {
  .tc .tree-grid { zoom: 1.2; }
  .tc-btn { min-height: 40px; padding: 8px 14px; }
  .tc-bar .spacer { display: none; }
  .tc-step { padding: 7px 4px 7px 2px; font-size: 14px; }
  .tc-grip { padding: 2px 0; font-size: 16px; }
}

/* ---------------------------------------------------------------- downrank calculator (site/js/pages/downrank.js) */
.dr-lead { color: var(--muted); max-width: 760px; margin: 0 0 14px; }
.dr-classes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.dr-classes a { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .04); color: color-mix(in srgb, var(--cc) 72%, #fff); font-weight: 600; font-size: 13.5px; }
.dr-classes a:hover { background: rgba(255, 255, 255, .08); text-decoration: none; }
.dr-classes a.active { background: color-mix(in srgb, var(--cc) 22%, transparent); color: #fff; }
.dr-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 22px; align-items: start; }
.dr-list { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; padding-right: 4px; }
.dr-group { margin-bottom: 12px; }
.dr-group-h { display: block; color: var(--gold); font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 4px 6px; }
.dr-list a { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 7px; color: var(--text); line-height: 1.25; }
.dr-list a:hover { background: rgba(255, 255, 255, .05); text-decoration: none; }
.dr-list a.active { background: rgba(240, 195, 90, .13); color: #fff; }
.dr-list a small { display: block; color: var(--muted); font-size: 11.5px; }
.dr-list a.later { opacity: .55; }
.dr-main { min-width: 0; background: var(--panel); border-radius: 12px; padding: 18px 20px; }
.dr-head { display: flex; gap: 14px; align-items: center; }
.dr-head h2 { margin: 0; font-size: 22px; }
.dr-head p { margin: 2px 0 0; font-size: 13px; }
.dr-answer { font-size: 18px; line-height: 1.45; color: #fff; font-weight: 600; margin: 16px 0 6px; }
.dr-sub { color: var(--muted); margin: 0 0 12px; }
.dr-adjust, .dr-more, .dr-how { margin: 12px 0; background: rgba(255, 255, 255, .03); border-radius: 9px; padding: 0 14px; }
.dr-adjust summary, .dr-more summary, .dr-how summary { cursor: pointer; padding: 10px 0; color: var(--link); font-weight: 600; }
.dr-adjust[open], .dr-more[open], .dr-how[open] { padding-bottom: 12px; }
.dr-inputs { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px 14px; }
.dr-inputs label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
.dr-inputs input, .dr-talents select { background: var(--bg-2); color: var(--text); border: 0; border-radius: 6px; padding: 7px 9px; font: inherit; font-size: 14px; width: 100%; }
.dr-inputs input:focus, .dr-talents select:focus { outline: 2px solid var(--gold-2); }
.dr-talents { margin-top: 14px; }
.dr-talents label { display: grid; grid-template-columns: auto 1fr 72px; gap: 9px; align-items: center; padding: 4px 0; }
.dr-talents label small { color: var(--muted); }
.dr-spec { margin-top: 14px; font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 6px; }
.dr-spec .badge { align-self: flex-start; }
.dr-spec label { display: flex; gap: 8px; align-items: flex-start; color: var(--text); }
.dr-spec input { margin-top: 3px; accent-color: var(--gold); }
.dr-table-wrap { overflow-x: auto; margin: 14px 0 4px; }
.dr-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.dr-table th, .dr-table td { padding: 8px 10px; text-align: left; white-space: nowrap; }
.dr-table thead th { color: var(--muted); font-size: 12px; font-weight: 600; }
.dr-table tbody tr:nth-child(odd) { background: rgba(255, 255, 255, .025); }
.dr-table .num { text-align: right; }
.dr-table small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 400; }
.dr-table th small { font-weight: 400; }
.dr-table tbody th a { font-weight: 600; }
.dr-table em { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 4px; background: rgba(61, 220, 132, .16); color: var(--new); font-size: 11px; font-style: normal; font-weight: 650; vertical-align: 1px; }
.dr-table tr.is-mana td.pm, .dr-table tr.is-sec td.ps { color: #fff; font-weight: 650; }
.dr-table.small td, .dr-table.small th { font-size: 13px; white-space: normal; }
.dr-foot { margin: 4px 0 0; }
.dr-chart { margin: 18px 0 6px; }
.dr-chart figcaption { font-weight: 600; margin-bottom: 6px; }
.dr-chart svg { width: 100%; height: auto; display: block; }
.dr-chart text { fill: var(--muted); font-size: 11px; font-family: inherit; }
.dr-chart .lbl { fill: var(--text); font-size: 11.5px; }
.dr-chart .grid { stroke: rgba(255, 255, 255, .07); }
.dr-chart .now { stroke: var(--gold); stroke-dasharray: 3 4; }
.dr-chart .now-t { fill: var(--gold); }
.dr-chart { position: relative; }
.dr-tip { position: absolute; top: 34px; z-index: 2; pointer-events: none; background: var(--panel-solid); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 3px; white-space: nowrap; }
.dr-tip[hidden] { display: none; }
.dr-tip i { display: inline-block; width: 10px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: 3px; }
.dr-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--text); }
.dr-legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: 3px; }
.dr-rumour { margin: 18px 0; padding: 14px 16px; border-radius: 10px; background: rgba(135, 136, 238, .1); }
.dr-rumour h3 { margin: 2px 0 8px; }
.dr-rumour p { margin: 6px 0; }
.dr-how ul { margin: 0; padding-left: 18px; }
.dr-how li { margin: 4px 0; }
.dr-empty { color: var(--muted); margin: 16px 0; }
.dr-link { margin: 10px 0 0; }
@media (max-width: 900px) {
  .dr-layout { grid-template-columns: 1fr; gap: 12px; }
  .dr-list { position: static; max-height: none; display: flex; flex-wrap: wrap; gap: 4px; }
  .dr-group { display: contents; }
  .dr-list .dr-group-h { display: none; }
  .dr-list a { padding: 5px 9px 5px 5px; background: rgba(255, 255, 255, .04); border-radius: 999px; font-size: 13px; }
  .dr-list a small { display: none; }
  .dr-list .icon.sm { width: 20px; height: 20px; border-radius: 50%; }
  .dr-main { padding: 14px 12px; border-radius: 10px; }
  .dr-answer { font-size: 16.5px; }
  .dr-talents label { grid-template-columns: auto 1fr 64px; }
}
@media (max-width: 600px) {
  /* each rank becomes a small card: its name on top, the numbers in a grid with their labels */
  .dr-ranks thead { display: none; }
  .dr-ranks, .dr-ranks tbody { display: block; }
  .dr-ranks tr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 10px; padding: 10px; border-radius: 8px; margin-bottom: 6px; }
  .dr-ranks tbody tr:nth-child(odd), .dr-ranks tbody tr { background: rgba(255, 255, 255, .035); }
  .dr-ranks th { grid-column: 1 / -1; padding: 0; display: flex; gap: 8px; align-items: baseline; }
  .dr-ranks th small { display: inline; }
  .dr-ranks td { padding: 0; text-align: left; white-space: normal; }
  .dr-ranks td::before { content: attr(data-l); display: block; color: var(--muted); font-size: 11px; }
  .dr-ranks td.num { text-align: left; }
  .dr-ranks td small { display: inline; margin-left: 4px; }
  .dr-ranks em { margin-left: 4px; }
}

/* ---- Class changes vs Classic (pages/changes.js): one list with chips and search, the change on the right (under the row on phones) */
.cc-top { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin: 0 0 10px; }
.cc-top p { margin: 0; }
.cc-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.cc-bar .cc-q { max-width: 280px; flex: 1 1 200px; }
.cc-chips .chip { cursor: pointer; color: var(--text); font: inherit; font-size: 13px; padding: 4px 12px; }
.cc-chips .chip b { color: var(--muted); margin: 0 0 0 4px; font-weight: 600; }
.cc-chips .chip.on { background: var(--gold); border-color: var(--gold); color: #1a1205; }
.cc-chips .chip.on b { color: #1a1205; }
.cc-md { display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); gap: 14px; align-items: start; }
.cc-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
  max-height: calc(100vh - var(--hdr-h, 59px) - 82px); overflow: auto; position: sticky; top: calc(var(--hdr-h, 59px) + 12px); }
.cc-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.cc-row:last-child { border-bottom: 0; }
.cc-row:hover { background: var(--panel-2); }
.cc-row.on { background: var(--panel-2); box-shadow: inset 3px 0 0 var(--gold); }
.cc-row:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.cc-row.dim { opacity: .7; }
.cc-row .icon.sm { flex: 0 0 22px; margin-top: 2px; }
.cc-main { min-width: 0; flex: 1; }
.cc-main b { color: #fff; font-weight: 600; }
.cc-sum { color: var(--muted); font-size: 12.5px; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cc-none { padding: 14px; }
.cc-detail { min-width: 0; position: sticky; top: calc(var(--hdr-h, 59px) + 12px); }
.cc-head { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.cc-head h3 { margin: 0 0 2px; font-size: 20px; }
.cc-sumline { font-size: 15px; margin: 6px 0 12px; }
.cc-detail h4 { margin: 14px 0 6px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.cc-more { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 8px; }
.cc-more summary { cursor: pointer; color: var(--link); }
.cc-more ul { padding-left: 18px; margin: 8px 0; }
.cc-more .diff { margin-bottom: 8px; }
.diff.one { grid-template-columns: 1fr; }
.diff p { margin: 4px 0 0; }
@media (max-width: 900px) {
  .cc-md { grid-template-columns: minmax(0, 1fr); }
  .cc-list { max-height: none; position: static; overflow: visible; min-width: 0; }
  .cc-list > .cc-detail { min-width: 0; max-width: 100%; position: static; border-radius: 0; border: 0; border-bottom: 1px solid var(--line); background: var(--bg-2); cursor: auto; }
  .cc-bar .cc-q { max-width: none; }
  .cc-top { flex-wrap: wrap; }
}
@media (max-width: 600px) { .diff { grid-template-columns: 1fr; } }

/* ---- Rank tables, Forever vs Classic (rankcmp.js): changed cells highlighted, "X instead of Y" */
.rank-cmp td, .rank-cmp th { white-space: nowrap; }
.rank-cmp td.dif { background: rgba(255, 179, 71, .09); }
.rank-cmp td.dif b { color: var(--changed); font-size: inherit; font-weight: 700; }
.rank-cmp td.old { color: #c9b8b8; }
.rank-cmp .was { color: var(--muted); font-size: 12px; }
.rank-cmp tr.cur td { background: rgba(63, 208, 217, .08); }
.rank-cmp tr.cur td.dif { background: rgba(255, 179, 71, .16); }
.rank-cmp tr.gone td { color: var(--muted); }
.sp-h2row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sp-h2row h2 { margin: 0; }
#vs-classic .table-wrap { margin: 10px 0 6px; }

/* ---- Present mode (present.js, ?present=1): big text, high contrast, one change per screen; no menus, footer or ads */
html.present, html.present body { overflow: hidden; }
html.present .topbar, html.present .footer, html.present ins.adsbygoogle, html.present .google-auto-placed,
html.present iframe[id^="aswift"], html.present .adsbygoogle-noablate { display: none !important; }
.present-deck { position: fixed; inset: 0; z-index: 2147483647; background: #000; color: #fff; display: flex; flex-direction: column;
  font-size: 22px; line-height: 1.45; }
.pd-top, .pd-foot { display: flex; align-items: center; gap: 16px; padding: 12px 28px; background: #05070d; border-color: #222; }
.pd-top { border-bottom: 1px solid #222; font-size: 16px; }
.pd-foot { border-top: 1px solid #222; justify-content: space-between; font-size: 15px; }
.pd-title { font-weight: 700; color: var(--gold); }
.pd-count { color: #bbb; margin-left: auto; font-variant-numeric: tabular-nums; }
.pd-src { color: #aaa; text-align: center; }
.pd-btn { background: #151a28; color: #fff; border: 1px solid #3a4260; border-radius: 8px; padding: 8px 16px; font: inherit; cursor: pointer; }
.pd-btn:hover:not(:disabled) { border-color: var(--gold); }
.pd-btn:disabled { opacity: .35; cursor: default; }
.pd-stage { flex: 1; overflow: auto; display: flex; justify-content: center; padding: 4vh 5vw; }
.pd-slide { width: min(1200px, 100%); margin: auto 0; }
.pd-head { display: flex; gap: 20px; align-items: center; margin-bottom: 18px; }
.pd-head .icon.lg { width: 84px; height: 84px; border-radius: 12px; }
.pd-head h2 { font-size: clamp(34px, 5vw, 60px); margin: 0; color: #fff; letter-spacing: -.02em; }
.pd-kicker { color: var(--gold); font-size: 18px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.pd-sum { font-size: clamp(22px, 2.6vw, 32px); margin: 0 0 22px; color: #fff; }
.pd-lines { list-style: none; padding: 0; margin: 0; font-size: clamp(20px, 2.3vw, 30px); }
.pd-lines li { padding: 8px 0; border-bottom: 1px solid #222; }
.pd-lines.many { font-size: clamp(18px, 1.9vw, 25px); }
.pd-lines.many li { padding: 5px 0; }
.pd-count, .pd-btn { white-space: nowrap; }
.pd-lines b { color: #fff; }
.pd-lines .was, .present-deck .was { color: #ffb3b3; }
.present-deck .diff { gap: 20px; font-size: clamp(18px, 1.9vw, 24px); }
.present-deck .diff .old { background: #1c0d0d; color: #ffd6d6; padding: 16px 20px; }
.present-deck .diff .newv { background: #0b1d12; color: #d6ffe4; padding: 16px 20px; }
.present-deck .rank-cmp { font-size: clamp(16px, 1.6vw, 21px); }
.present-deck .rank-cmp th { color: #ccc; font-size: 14px; }
.present-deck .rank-cmp td.old { color: #ffd6d6; }
.present-deck .rank-cmp td.dif b { color: #ffc56b; }
.present-deck .badge { font-size: 14px; }
.present-deck a { color: #8fe3ff; }
@media (max-width: 700px) {
  .present-deck { font-size: 17px; }
  .pd-top, .pd-foot { padding: 10px 14px; gap: 10px; }
  .pd-src { display: none; }
  .pd-head .icon.lg { width: 56px; height: 56px; }
  .present-deck .diff { grid-template-columns: 1fr; }
}

/* Home page, Explore Forever and friends (site/js/pages/home.js): live tiles for the new dungeons, a new zone's map and
   changes from Classic, a row of plain links, tier lists and tools, and Playing together. Approved by the owner 30 Sept 2026. */

/* ---------------------------------------------------------------- Explore: tiles with live previews */
.hx .xp-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.hx .xp {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden; margin: 0; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 10px 26px rgba(0, 0, 0, .22);
}
.hx a.xp:hover { background: rgba(28, 38, 68, .92); border-color: #3a4a80; text-decoration: none; }
.hx .xp-text { display: block; padding: 12px 14px 14px; }
.hx .xp h3, .hx .xp-title { display: block; margin: 0 0 4px; color: #fff; font-size: 16px; font-weight: 650; line-height: 1.3; }
.hx .xp h3 a { color: #fff; }
.hx .xp-text p, .hx .xp-text > span { display: block; margin: 0; color: #aab1c0; font-size: 13.5px; line-height: 1.45; }
.hx .xp-foot { margin: auto 0 0; padding: 0 14px 12px; color: var(--muted); font-size: 13px; }
.hx .xp-dungeons, .hx .xp-map, .hx .xp-changes, .hx .xp-tiers { grid-column: span 4; }
.hx .xp-tools { grid-column: span 8; }

/* the new dungeons */
.hx .xd-list { display: grid; gap: 6px; padding: 0 12px 10px; }
.hx .xd-card { position: relative; display: block; overflow: hidden; min-height: 70px; border-radius: 10px; background: #0a0f1f; color: #fff; border: 1px solid var(--line); }
.hx .xd-card:hover { text-decoration: none; border-color: #3a4a80; }
.hx .xd-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .7; transition: opacity .2s ease; }
.hx .xd-card:hover img { opacity: .9; }
.hx .xd-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 9, 20, .92) 0%, rgba(6, 9, 20, .7) 55%, rgba(6, 9, 20, .25)); }
.hx .xd-new { position: absolute; z-index: 1; top: 8px; right: 8px; padding: 2px 6px; border-radius: 4px; background: var(--new); color: #04150b; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.hx .xd-body { position: relative; z-index: 1; display: grid; gap: 1px; padding: 8px 12px; }
.hx .xd-body b { font-size: 15px; padding-right: 46px; }   /* clear of the NEW badge */
.hx .xd-sub { color: #cfd6e4; font-size: 12.5px; }
.hx .xd-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 2px; font-size: 12.5px; }
.hx .xd-foot em { font-style: normal; color: var(--gold); }
.hx .xd-foot em.seen { color: var(--new); }
.hx .xd-foot span { color: #fff; font-weight: 650; font-variant-numeric: tabular-nums; }
.hx .xd-foot span.xd-above { color: var(--changed); }

/* the zone map */
.hx .xm-pic { position: relative; display: block; height: 200px; overflow: hidden; background: #0a0f1f; border-bottom: 1px solid var(--line); }
.hx .xm-pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.hx a.xm-pic:hover img { transform: scale(1.03); }
/* the new zones under the map, then the class grid under the changes */
.hx .xm-zones { display: grid; gap: 2px; margin: -4px 0 8px; padding: 0 14px; list-style: none; }
.hx .xm-zones li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 5px 0; border-top: 1px solid rgba(255, 255, 255, .05); font-size: 14px; }
.hx .xm-zones li:first-child { border-top: 0; }
.hx .xm-zones a { color: #e6eaf2; font-weight: 600; }
.hx .xm-zones span { color: var(--muted); font-size: 12.5px; text-align: right; }
.hx .xc-classes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: -4px 0 10px; padding: 0 12px; }
.hx .xc-classes a { display: grid; grid-template-columns: 22px 1fr; column-gap: 7px; align-items: center; padding: 5px 6px; border-radius: 8px; color: var(--text); }
.hx .xc-classes a:hover { background: var(--panel-2); text-decoration: none; }
.hx .xc-classes img { grid-row: span 2; border-radius: 5px; box-shadow: 0 0 0 1px #000; }
.hx .xc-classes b { color: var(--cc); font-size: 13px; font-weight: 650; line-height: 1.2; }
.hx .xc-classes span { color: var(--muted); font-size: 11.5px; line-height: 1.2; }
.hx .xm-label { position: absolute; left: 10px; bottom: 8px; padding: 2px 8px; border-radius: 6px; background: rgba(4, 7, 15, .75); color: #fff; font-size: 12.5px; font-weight: 650; }

/* changes from Classic: three numbers, three examples */
.hx .xc-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.hx .xc-nums a { display: grid; align-content: center; justify-items: center; gap: 4px; min-height: 92px; padding: 12px 6px; background: #0c1428; color: var(--text); text-align: center; }
.hx .xc-nums a:hover { background: #122038; text-decoration: none; }
.hx .xc-nums b { color: var(--new); font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.hx .xc-nums span { color: var(--muted); font-size: 12px; line-height: 1.3; }
.hx .xc-list { display: grid; gap: 4px; margin: 2px 0 8px; padding: 0; list-style: none; }
.hx .xc-list li { display: flex; gap: 8px; font-size: 13.5px; line-height: 1.4; }
.hx .xc-list li::before { content: '›'; color: var(--gold); font-weight: 700; }
.hx .xc-list a { color: #e6eaf2; }
.hx .xp-text p.xc-more { font-size: 13px; }


/* tier lists and tools */
.hx .hx-duo { margin-top: 12px; }
.hx .xtl { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 14px 12px; }
.hx .xtl a { display: flex; align-items: center; gap: 8px; padding: 3px 10px 3px 3px; border-radius: 8px; background: var(--panel-2); color: #e6eaf2; font-size: 14px; font-weight: 600; }
.hx .xtl a:hover { background: #22305a; text-decoration: none; }
.hx .xtl i { display: grid; place-items: center; width: 26px; height: 24px; border-radius: 5px; color: #1a1205; font-size: 13px; font-weight: 800; font-style: normal; }
.hx .xp-tools .xp-text { padding-bottom: 4px; }
.hx .xtools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 6px; padding: 0 8px 10px; }
.hx .xtools a { display: flex; align-items: center; gap: 12px; padding: 8px 8px; border-radius: 8px; color: var(--text); }
.hx .xtools a:hover { background: var(--panel-2); text-decoration: none; }
.hx .xtools img { flex: none; width: 36px; height: 36px; border-radius: 7px; box-shadow: 0 0 0 1px #000; }
.hx .xtools b { display: block; color: #fff; font-weight: 650; }
.hx .xtools small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.4; }

/* Playing together: one line */
.hx .hx-together { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; margin: 12px 0 0; padding: 12px 18px; border-radius: 12px;
  background: linear-gradient(120deg, rgba(63, 208, 217, .12), rgba(16, 22, 40, .88) 65%); font-size: 14px; }
.hx .hx-together b { color: #fff; font-size: 15px; }

@media (max-width: 1180px) {
  .hx .xp-dungeons { grid-column: 1 / -1; }
  .hx .xp-map, .hx .xp-changes { grid-column: span 6; }
  .hx .xd-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .hx .xp-tiers, .hx .xp-tools { grid-column: 1 / -1; }
  .hx .xd-list { grid-template-columns: minmax(0, 1fr); }
  .hx .xtools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hx .xp-grid { gap: 10px; }
  .hx .xp-grid > .xp { grid-column: 1 / -1; }
  .hx .xm-pic { height: 150px; }
  .hx .xtools small { display: none; }
  .hx .xtools a { gap: 10px; padding: 7px 6px; }
  .hx .xtools img { width: 30px; height: 30px; }
  .hx .xd-card { min-height: 0; }
  .hx .xc-nums a { min-height: 76px; }
  .hx .hx-together { gap: 4px 14px; padding: 12px 14px; }
  .hx .hx-together b { flex-basis: 100%; }
}

/* ---- DPS simulator (pages/sim.js): borderless like the downrank calculator; tables become cards on phones */
.sim-lead { color: var(--muted); max-width: 780px; margin: 0 0 14px; }
.vf-next { display: flex; flex-wrap: wrap; gap: 8px; }   /* /verify's way on (verify.js) */
.sim-rankline { margin: -2px 0 12px; }   /* this spec's place among every spec (sim.js rankLine) */
.sim-classes, .sim-specs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; align-items: center; }
.sim-classes a { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .04); color: color-mix(in srgb, var(--cc) 72%, #fff); font-weight: 600; font-size: 13.5px; }
.sim-classes a:hover, .sim-specs a:hover { background: rgba(255, 255, 255, .08); text-decoration: none; }
.sim-classes a.active { background: color-mix(in srgb, var(--cc) 22%, transparent); color: #fff; }
.sim-specs a { padding: 5px 12px; border-radius: 7px; color: var(--text); background: rgba(255, 255, 255, .03); font-size: 13.5px; }
.sim-specs a.active { background: rgba(240, 195, 90, .15); color: #fff; }
.sim-lvl { margin-left: auto; font-size: 13px; color: var(--muted); }
.sim-lvl select { width: auto; }
.sim-lvl select, .sim-in { background: var(--bg-2); color: var(--text); border: 0; border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 14px; }
.sim-in:focus, .sim-lvl select:focus { outline: 2px solid var(--gold-2); }
.sim-main { background: var(--panel); border-radius: 12px; padding: 18px 20px; margin: 6px 0 12px; }
.sim-big { font-size: 19px; line-height: 1.45; color: #fff; font-weight: 600; margin: 0 0 6px; }
.sim-big b { color: var(--gold); }
.sim-sub { color: var(--muted); margin: 0 0 10px; }
.sim-err { color: var(--removed); }
.sim-progress { height: 4px; border-radius: 3px; background: rgba(255, 255, 255, .06); overflow: hidden; margin: 6px 0; }
.sim-progress i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .1s linear; }
.sim-chart { margin: 10px 0 4px; position: relative; }
.sim-chart figcaption { font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.sim-chart svg { display: block; max-width: 100%; height: auto; }
.sim-chart text { fill: var(--muted); font-size: 11px; font-family: inherit; }
.sim-chart .band { fill: rgba(255, 255, 255, .045); }
.sim-chart .mean { stroke: var(--gold); stroke-dasharray: 3 4; stroke-width: 1.5; }
.sim-chart .mean-t { fill: var(--gold); }
.sim-chart .axis { stroke: rgba(255, 255, 255, .15); }
.sim-chart .grid { stroke: rgba(255, 255, 255, .07); }
.sim-chart .cross { stroke: rgba(255, 255, 255, .35); }
.sim-chart .hit { fill: transparent; }
.sim-tip { position: absolute; top: 26px; z-index: 2; pointer-events: none; background: var(--panel-solid); border-radius: 8px; padding: 7px 10px; font-size: 12.5px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.sim-tip[hidden] { display: none; }
.sim-tip i, .sim-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.sim-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; margin-bottom: 4px; }
.sim-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin: 12px 0; }
.sim-tiles div { background: rgba(255, 255, 255, .035); border-radius: 8px; padding: 8px 10px; }
.sim-tiles span { display: block; color: var(--muted); font-size: 11.5px; }
.sim-tiles b { font-size: 16px; color: #fff; font-variant-numeric: tabular-nums; }
.sim-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.sim-box { margin: 10px 0; background: rgba(255, 255, 255, .03); border-radius: 10px; padding: 0 16px; }
.sim-box summary { cursor: pointer; padding: 11px 0; color: var(--link); font-weight: 600; }
.sim-box[open] { padding-bottom: 14px; }
.sim-box h3 { font-size: 14.5px; margin: 16px 0 8px; }
.sim-box ul { margin: 0; padding-left: 18px; }
.sim-box li { margin: 5px 0; }
.sim-inputs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 14px; }
.sim-inputs.one { grid-template-columns: 1fr; }
.sim-inputs label, .sim-items label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
.sim-checks { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; }
.sim-checks label { display: flex; gap: 6px; align-items: center; }
.sim-checks input { accent-color: var(--gold); }
.sim-checks small { color: var(--muted); }
.sim-gear { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 14px; }
.sim-slot { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; padding: 3px 0; }
.sim-slot a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sim-items { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.sim-items label { min-width: 150px; }
.sim-items label:nth-child(2) { flex: 1 1 260px; }
.sim-table-wrap { overflow-x: auto; }
.sim-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sim-table th, .sim-table td { padding: 7px 9px; text-align: left; white-space: nowrap; }
.sim-table thead th { color: var(--muted); font-size: 12px; font-weight: 600; }
.sim-table tbody tr:nth-child(odd) { background: rgba(255, 255, 255, .025); }
.sim-table .num { text-align: right; }
.sim-table small { color: var(--muted); font-size: 11.5px; font-weight: 400; }
.sim-table.small td, .sim-table.small th { font-size: 12.5px; padding: 4px 8px; }
.sim-table tr[data-pick] { cursor: pointer; }
.sim-bar { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .06); margin-top: 4px; }
.sim-bar i { display: block; height: 100%; border-radius: 2px; background: #3987e5; }
.sim-log { max-height: 340px; overflow-y: auto; margin-top: 8px; }
.sim-log tr.k-crit td { color: #fff; font-weight: 600; }
.sim-log tr.k-miss td, .sim-log tr.k-dodge td { color: var(--muted); }
.sim-log tr.k-note td { color: var(--gold); }
.sim-wbar { position: relative; width: 40%; min-width: 120px; }
.sim-wbar span { display: block; height: 8px; border-radius: 4px; background: #3987e5; }
.sim-wbar em { position: absolute; top: 50%; height: 2px; margin-top: -1px; background: #fff; opacity: .7; }
.sim-cmp-answer { font-size: 15.5px; color: #fff; margin: 10px 0 4px; }
.sim-cmp-answer b { color: var(--gold); }
.sim-intro { background: var(--panel); border-radius: 12px; padding: 16px 20px; }
.sim-speclist { columns: 3 220px; margin: 8px 0; padding-left: 18px; }
.sim-modal #sim-plist { max-height: 60vh; overflow-y: auto; }
@media (max-width: 700px) {
  .sim-main { padding: 14px 12px; border-radius: 10px; }
  .sim-big { font-size: 16.5px; }
  .sim-lvl { margin-left: 0; width: 100%; }
  .sim-box { padding: 0 12px; }
  .sim-abil thead, .sim-w thead { display: none; }
  .sim-abil, .sim-abil tbody, .sim-w, .sim-w tbody { display: block; }
  .sim-abil tr, .sim-w tr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 10px; padding: 9px; border-radius: 8px; margin-bottom: 6px; }
  .sim-abil tbody tr, .sim-w tbody tr { background: rgba(255, 255, 255, .035); }
  .sim-abil th, .sim-w th { grid-column: 1 / -1; padding: 0; }
  .sim-abil td, .sim-w td { padding: 0; text-align: left; white-space: normal; }
  .sim-abil td::before, .sim-w td::before { content: attr(data-l); display: block; color: var(--muted); font-size: 11px; }
  .sim-abil td.num, .sim-w td.num { text-align: left; }
  .sim-w .sim-wbar { grid-column: 1 / -1; width: auto; }
  .sim-slot { grid-template-columns: 64px minmax(0, 1fr) auto; }
}
.sim-h { font-size: 17px; margin: 16px 0 4px; }
.sim-rank { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sim-rank li { display: grid; grid-template-columns: 190px minmax(0, 1fr) 52px; gap: 12px; align-items: center; font-size: 14px; }
.sim-rank b { text-align: right; font-variant-numeric: tabular-nums; color: #fff; }
.sim-rbar { position: relative; height: 12px; }
.sim-rbar i { display: block; height: 12px; border-radius: 0 4px 4px 0; background: #3987e5; }
.sim-rbar em { position: absolute; top: 5px; height: 2px; background: #fff; opacity: .55; }
@media (max-width: 700px) { .sim-rank li { grid-template-columns: 1fr 48px; gap: 2px 10px; } .sim-rbar { grid-column: 1 / -1; grid-row: 2; } }

/* Gold sellers and bots (/bots, pages/bots.js): no borders, one column, readable on a phone */
.bt-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 18px 0 6px; }
.bt-tile { background: var(--panel); border-radius: var(--radius); padding: 14px 16px; }
.bt-tile .v { font-size: 26px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.bt-tile .v .chg { font-size: 13px; font-weight: 600; }
.bt-tile .l { color: var(--muted); font-size: 12.5px; }
.bt-note { margin: 4px 0 8px; }
.bt-sellers { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 6px; }
.bt-sellers li { display: grid; grid-template-columns: minmax(0, 1.6fr) auto auto auto 100px; gap: 6px 18px; align-items: center; background: var(--panel); border-radius: var(--radius); padding: 10px 14px; }
.bt-dom { display: flex; flex-direction: column; min-width: 0; }
.bt-name { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 15px; color: #fff; overflow-wrap: anywhere; }
.bt-kind { color: var(--muted); font-size: 12px; }
.bt-num { font-size: 13.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bt-num b { color: var(--text); }
.bt-trend { color: var(--gold); display: flex; justify-content: flex-end; }
.bt-hbar { grid-template-columns: minmax(90px, 190px) 1fr auto; }
.bt-points { padding-left: 20px; display: grid; gap: 8px; max-width: 900px; }
.bt-empty { background: var(--panel); border-radius: var(--radius); padding: 16px 20px; margin: 18px 0; max-width: 900px; }
.bt-empty h2 { margin-top: 0; }
.bt-mistake p { max-width: 900px; }
@media (max-width: 700px) {
  .bt-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .bt-tile .v { font-size: 21px; }
  .bt-sellers li { grid-template-columns: minmax(0, 1fr) auto; }
  .bt-dom { grid-column: 1 / -1; }
  .bt-hbar { grid-template-columns: 96px 1fr auto; }
}

/* ---------- The admin page's Automation tab (pages/automation.js): the PC's scheduled jobs ---------- */
.auto-found { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.auto-chip { font-size: 11.5px; padding: 1px 7px; border-radius: 999px; background: rgba(141, 153, 184, .14); color: var(--muted); }
.auto-runs { margin: 6px 0 0; padding-left: 16px; display: grid; gap: 4px; }
.auto-late td { background: rgba(255, 99, 99, .06); }
.auto-table .badge { white-space: nowrap; }

/* a blue reply's page: which thread it is in, and links to Blizzard's post and our write-up (news.js renderPost) */
.reply-context { margin: 4px 0 14px; padding: 10px 14px; border-radius: 10px; background: rgba(120, 170, 255, .08); color: var(--text); font-size: 14px; line-height: 1.5; }
.reply-context span { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 4px; }

/* the newsletter popup for signed-in players (nlpopup.js): why we're asking, and "Don't ask again" next to "Not now" */
.nl-acct-why { margin: 0 0 8px; color: var(--muted); }
.nl-pop-later.nl-pop-never { margin-left: 14px; }
.nl-sheet .nl-pop-never { margin: 8px 0 0; }

/* ---------- Best in slot (pages/bis.js): the controls, each slot's pick with the next two, the class's specs side by side ---------- */
.bis-bar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 14px 0 8px; }
.bis-field { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.bis-field .input { width: auto; min-width: 0; }
.bis-seg { display: inline-flex; background: var(--panel); border-radius: 9px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.bis-seg button, .bis-seg a { border: 0; background: none; color: var(--muted); padding: 5px 12px; border-radius: 7px; cursor: pointer; font-weight: 600; font-size: 13.5px; }
.bis-seg a:hover { text-decoration: none; color: var(--text); }
.bis-seg .on { background: var(--panel-2); color: #fff; }
.bis-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 2px; font-size: 13px; }
.bis-filters-h { color: var(--muted); font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; margin-right: 4px; }
.bis-chip { border: 1px solid var(--line); background: none; color: var(--muted); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 13px; cursor: pointer; min-height: 32px; }
.bis-chip:hover { color: var(--text); }
.bis-chip.on { background: rgba(240, 195, 90, .12); border-color: rgba(240, 195, 90, .55); color: var(--text); }
.bis-chip.on::before { content: "\2713"; margin-right: 6px; color: var(--gold); }
.bis-chip:focus-visible, .bis-reset:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.bis-sep { width: 1px; align-self: stretch; background: var(--line); margin: 2px 4px; }
.bis-reset { border: 0; background: none; color: var(--link); font: inherit; font-size: 13px; cursor: pointer; padding: 4px 6px; }
.bis-filters-note { margin: 4px 0 12px; }
.bis-note { font-size: 13.5px; color: var(--muted); background: rgba(240, 195, 90, .07); border-radius: 8px; padding: 8px 12px; max-width: 820px; }
.bis-note b { color: var(--gold); }
.bis-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.bis-list { display: grid; gap: 6px; }
.bis-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; background: var(--panel); border-radius: 10px; padding: 12px 14px; align-items: start; }
.bis-slot { color: var(--muted); font-size: 12.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; padding-top: 10px; }
.bis-picks { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 8px 18px; min-width: 0; align-items: start; }
.bis-pick { display: flex; gap: 8px; min-width: 0; }
.bis-pick.p1 { grid-column: 1; grid-row: 1 / span 2; }
.bis-pick-alt { grid-column: 2; font-size: 13px; }
.bis-pick-body { display: grid; gap: 3px; min-width: 0; }
.bis-rank { flex: none; width: 20px; height: 20px; margin-top: 6px; border-radius: 50%; background: var(--panel-2); color: var(--muted); font-size: 11.5px; font-weight: 700; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.p1 .bis-rank { background: rgba(240, 195, 90, .16); color: var(--gold); }
.bis-pick-alt .bis-rank { margin-top: 2px; }
.bis-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.bis-name .ent span { overflow-wrap: anywhere; }
.p1 .bis-name .ent span { font-weight: 650; }
.bis-pick-alt .ent { gap: 6px; }
.bis-diff { font-size: 12px; color: var(--removed); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bis-diff.same { color: var(--new); }
.bis-score { font-variant-numeric: tabular-nums; color: var(--gold); font-weight: 700; font-size: 13px; background: rgba(240, 195, 90, .1); border-radius: 6px; padding: 0 6px; }
.bis-score.small { font-size: 12px; }
.bis-why { font-size: 13.5px; color: var(--text-2, #cfd5e1); }
.bis-src { font-size: 13px; line-height: 1.5; }
.bis-ease { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-radius: 4px; padding: 0 6px; }
.bis-ease.e1 { background: rgba(61, 220, 132, .14); color: var(--new); }
.bis-ease.e2 { background: rgba(240, 195, 90, .14); color: var(--gold); }
.bis-ease.e3 { background: rgba(255, 107, 107, .14); color: var(--removed); }
.bis-ease.e0 { background: var(--panel-2); color: var(--muted); }
.bis-enh { grid-column: 1 / -1; display: grid; gap: 4px; border-top: 1px solid var(--line); padding-top: 8px; font-size: 13px; min-width: 0; }
.bis-enh-h { color: var(--muted); font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; }
.bis-enh-pick { min-width: 0; line-height: 1.6; }
.bis-enh-pick .ent { gap: 6px; }
.bis-enh-pick .ent span { overflow-wrap: anywhere; }
.bis-enh-kind { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--teal, var(--link)); }
.bis-enh-alt { padding-left: 12px; border-left: 2px solid var(--line); }
.bis-enh-tmp { color: var(--muted); }
.bis-enh-tmp b { color: var(--text); font-weight: 650; margin-right: 4px; }
.bis-hard { color: var(--gold); }
.bis-enh-more { display: grid; gap: 4px; }
.bis-enh-more > summary { cursor: pointer; color: var(--link); font-size: 12.5px; width: max-content; max-width: 100%; }
.bis-enh-more[open] > summary { color: var(--muted); }
.bis-enh-more > :not(summary) { margin-top: 4px; }
.bis-method { margin: 22px 0 8px; max-width: 900px; }
.bis-method summary { cursor: pointer; color: var(--link); font-weight: 600; }
.bis-method ul { padding-left: 20px; }
.bis-more { margin-top: 18px; font-size: 13.5px; }
.bis-classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; margin: 16px 0; }
.bis-class { background: var(--panel); border-radius: 10px; padding: 12px 14px; border-top: 3px solid var(--cc); }
.bis-class-head { display: flex; align-items: center; gap: 10px; color: var(--cc); font-size: 16px; }
.bis-class-head img { border-radius: 6px; }
.bis-class ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.bis-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 8px; }
.bis-col { background: var(--panel); border-radius: 10px; padding: 12px 14px; min-width: 0; }
.bis-col h2 { margin: 0 0 8px; font-size: 18px; }
.bis-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.bis-col li { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 8px; align-items: center; font-size: 13px; }
.bis-col li .ent { gap: 6px; min-width: 0; }
.bis-col li .ent span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bis-col-slot { color: var(--muted); font-size: 12px; }
@media (max-width: 760px) {
  .bis-row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 10px 12px; }
  .bis-slot { padding-top: 0; }
  .bis-picks { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .bis-pick.p1, .bis-pick-alt { grid-column: 1; grid-row: auto; }
  .bis-pick-alt { padding-top: 6px; border-top: 1px solid var(--line); }
  .bis-filters .bis-sep { display: none; }
  /* compact on a phone: no lead-in before the reasons, #2 and #3 on two short lines each */
  .bis-why-lead { display: none; }
  .bis-pick-alt { padding-top: 4px; }
  .bis-pick-alt .bis-pick-body > .small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bis-pick-alt .bis-score, .bis-pick.p1 .bis-src.muted { display: none; }
  .bis-pick-alt .bis-name { flex-wrap: nowrap; }
  .bis-pick-alt .bis-name .ent { min-width: 0; }
  .bis-pick-alt .bis-name .ent span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bis-pick-alt .bis-name > .muted.small { display: none; }
  .bis-enh { display: block; }
  .bis-enh-h { display: inline; margin-right: 6px; }
  .bis-enh-h + .bis-enh-pick { display: inline; }
  .bis-enh-more { margin-top: 4px; }
  .bis-enh { padding-top: 6px; }
}

/* ---------- Scrolls (pages/scrolls.js): Forever's scrolls and where players found them ---------- */
.scr-jump { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 4px; font-size: 13.5px; }
.scr-group { margin-top: 10px; }
.scr-group > p { margin-top: -6px; }
.scr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px; align-items: start; }
.scr-card { background: var(--panel); border-radius: 10px; padding: 12px 14px; min-width: 0; }
.scr-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 10px; align-items: flex-start; }
.scr-head .ent { gap: 10px; min-width: 0; }
.scr-head .ent span { display: grid; min-width: 0; }
.scr-head .ent small { color: var(--muted); font-weight: 400; }
.scr-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.scr-fx { margin: 8px 0; font-size: 13.5px; color: #cfd5e1; }
.scr-fx .ent { gap: 5px; }
.scr-where h4 { margin: 6px 0 4px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.scr-where ul { margin: 0; padding-left: 18px; font-size: 13px; display: grid; gap: 4px; }
.scr-where p { margin: 0; font-size: 13px; }
.scr-map { margin: 8px 0 0; }
@media (max-width: 760px) { .scr-list { grid-template-columns: minmax(0, 1fr); } }

/* Profession guides (site/js/pages/profguides.js): leveling routes, herb and ore maps, where to skin, where to learn a recipe */
.pf-card-title { color: inherit; }
.pf-card-title:hover { text-decoration: none; }
.pf-card-title b:hover { color: var(--gold); }
.pf-good { font-size: 12.5px; color: #cfd5e1; }
.pf-good b { font-size: inherit; color: #fff; }
.pf-card-links { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; margin-top: 4px; }
.pf-level { font-weight: 600; }
.pf-guide-banner { display: grid; gap: 4px; margin: 16px 0 6px; padding: 14px 18px; border-radius: 12px; color: var(--text);
  background: linear-gradient(120deg, rgba(240, 195, 90, .16), rgba(16, 22, 40, .88) 65%); }
.pf-guide-banner:hover { text-decoration: none; background: linear-gradient(120deg, rgba(240, 195, 90, .24), rgba(16, 22, 40, .88) 65%); }
.pf-guide-banner b { color: #fff; font-size: 17px; }
.pf-guide-banner span { color: #cfd5e1; font-size: 14px; }
.pg-controls { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-end; justify-content: space-between; margin: 14px 0 8px; }
.pg-controls .tabs { margin: 0; border: 0; }
.pg-skill, .pg-zone { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; color: var(--muted); margin: 6px 0; }
.pg-skill .input { width: 90px; }
.pg-zone .input { min-width: 220px; max-width: 100%; }
.pg-capnote { margin: 8px 0 12px; }
.pg-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 12px 0 4px; }
.pg-summary > div { background: var(--panel); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; color: var(--muted); }
.pg-summary b { display: block; font-size: 20px; color: #fff; }
.pg-summary .pos b { color: var(--new); }
.pg-summary .pf-chg b { color: var(--changed); }
.pg-shoplist { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 18px; }
.pg-shoprow { display: grid; gap: 1px; padding: 6px 0; }
.pg-shoprow .money { font-size: 12px; }
.pg-step, .pg-mile { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; padding: 14px 16px; margin-bottom: 8px; border-radius: 12px; background: var(--panel); }
.pg-step.hl { box-shadow: inset 3px 0 0 var(--gold); }
.pg-step.capped, .pg-mile.capped { opacity: .72; }
.pg-range b { display: block; font-size: 22px; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.15; }
.pg-range small { color: var(--muted); font-size: 12px; }
.pg-body { display: grid; gap: 8px; min-width: 0; }
.pg-title > a { display: flex; gap: 10px; align-items: center; font-weight: 600; font-size: 15.5px; }
.pg-title .pf-badges { margin-left: 48px; }
.pg-bar { position: relative; height: 6px; border-radius: 3px; background: rgba(157, 157, 157, .25); overflow: hidden; }
.pg-bar i { position: absolute; top: 0; bottom: 0; }
.pg-bar i.o { background: #ff8040; } .pg-bar i.y { background: #e6e600; } .pg-bar i.g { background: #40c040; }
.pg-bar b { position: absolute; top: -2px; bottom: -2px; box-shadow: 0 0 0 2px #fff; border-radius: 2px; }
.pg-make { margin: 0; font-size: 14px; }
.pg-make b { color: #fff; }
.pg-mats, .pg-learn, .pg-alts { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: 13.5px; }
.pg-mats > .muted:first-child, .pg-learn > .muted:first-child, .pg-alts > .muted:first-child { min-width: 150px; color: var(--muted); }
.pg-learn > .muted:first-child, .pg-alts > .muted:first-child { flex-basis: 100%; }
.pg-learn > span { flex-basis: 100%; }
.pg-npc { display: block; flex-basis: 100%; font-size: 13.5px; }
.pg-npc .badge { margin-left: 4px; }
.pg-note { margin: 0; color: var(--changed); }
.pg-alts small { flex-basis: 100%; }
.pg-mile { background: rgba(240, 195, 90, .08); }
.pg-mile-k { font-size: 22px; color: var(--gold); font-weight: 650; }
.pg-mile p { margin: 4px 0 6px; }
.pg-method ul { padding-left: 20px; display: grid; gap: 8px; font-size: 14px; max-width: 900px; }
.pg-bislist { display: grid; gap: 6px; }
.pg-bisrow { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr) auto; gap: 6px 16px; align-items: start; padding: 10px 12px; border-radius: 10px; background: var(--panel); }
.pg-bisrow > a.ent { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.pg-bisrow p { margin: 0 0 3px; }
.pg-bislearn { white-space: nowrap; padding-top: 6px; }
.pg-learnbox { display: grid; gap: 8px; }
.pg-learnbox p { margin: 0; }
.pg-learnside { display: grid; gap: 3px; font-size: 13.5px; }
.pg-minimaps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.pg-minimaps:empty { display: none; }
.pg-minimap { margin: 0; max-width: 480px; }
.pg-zonelist { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin: 8px 0; }
.pg-zonecard { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; background: var(--panel); color: var(--text); }
.pg-zonecard:hover { text-decoration: none; background: var(--panel-2); }
.pg-zonecard.active { box-shadow: inset 0 0 0 1px var(--gold); }
.pg-zonecard b { color: #fff; }
.pg-ranges { margin: 8px 0 14px; }
.pg-ranges summary { cursor: pointer; color: var(--link); font-size: 14px; }
.pg-ranges table { margin-top: 8px; max-width: 700px; }
.nd-map { max-width: 1002px; }
.nd-pin { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(7, 11, 22, .8); }
.nd-seen { z-index: 2; }
/* /profession/fishing: what a zone's water gives, a pool's key colour */
.pg-chips { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0 10px; }
.nd-key { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; }
.nd-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; margin: 2px 0 10px; }
.nd-legend button { background: none; border: 0; padding: 2px 4px; border-radius: 6px; color: var(--text); font: inherit; cursor: pointer; }
.nd-legend button:hover, .nd-legend button.active { background: var(--panel-2); }
.nd-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; box-shadow: 0 0 0 1.5px rgba(7, 11, 22, .8); }
.nd-legend i.seen { background: var(--new); }
.pg-kinds td, .pg-beasts td { vertical-align: top; }
.pg-beasts tr.dim td { opacity: .55; }
@media (max-width: 760px) {
  .pg-step, .pg-mile { grid-template-columns: 1fr; gap: 8px; padding: 12px; }
  .pg-range b { display: inline; font-size: 19px; margin-right: 8px; }
  .pg-title .pf-badges { margin-left: 0; }
  .pg-bisrow { grid-template-columns: 1fr; }
  .pg-controls { align-items: flex-start; }
  .pg-kinds, .pg-beasts { display: block; overflow-x: auto; }
}

/* ---- The launch pages and the server status (site/js/pages/launch.js, betaerrors.js, status.js, launchcommon.js) ---- */
.lp-page { max-width: 860px; }
.lp-page > h2, .lp-page section > h2 { margin-top: 34px; }
.lp-answer { font-size: 17.5px; line-height: 1.55; color: #f4f6fb; margin: 8px 0 22px; }
.lp-count { background: linear-gradient(160deg, rgba(240, 195, 90, .10), rgba(63, 208, 217, .06)); border-radius: 14px; padding: 22px 20px 16px; margin: 6px 0 24px; text-align: center; }
.lp-units { display: flex; justify-content: center; gap: clamp(10px, 4vw, 34px); }
.lp-unit b { display: block; font-size: clamp(34px, 9vw, 58px); font-weight: 760; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1.05; }
.lp-unit span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.lp-count-sub { margin: 12px 0 0; color: var(--text); }
.lp-live { font-size: 30px; font-weight: 750; color: var(--gold); margin: 6px 0; }
.lp-cap { color: var(--muted); }
.lp-qlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.lp-qlist a { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 10px; background: rgba(26, 36, 65, .55); color: var(--text); }
.lp-qlist a:hover { background: rgba(26, 36, 65, .95); text-decoration: none; }
.lp-qlist b { color: #fff; font-weight: 620; line-height: 1.35; }
.lp-qlist span { color: var(--muted); font-size: 12.5px; }
.lp-links { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-links a { padding: 6px 12px; border-radius: 999px; background: rgba(26, 36, 65, .6); font-size: 13.5px; }
.lp-links a:hover { background: rgba(26, 36, 65, 1); text-decoration: none; }
.lp-code { display: flex; align-items: center; gap: 10px; background: rgba(5, 8, 18, .7); border-radius: 8px; padding: 10px 12px; margin: 8px 0 14px; }
.lp-code code { flex: 1; min-width: 0; overflow-x: auto; white-space: pre; font-size: 12.5px; color: #cfe7ee; }
.lp-tiers { display: grid; gap: 8px; }
.lp-tiers a { display: grid; grid-template-columns: 170px 1fr; gap: 12px; padding: 10px 14px; border-radius: 10px; background: rgba(26, 36, 65, .5); color: var(--text); }
.lp-tiers a:hover { text-decoration: none; background: rgba(26, 36, 65, .9); }
.lp-tiers b { color: #fff; }
.lp-tiers em { font-style: normal; color: var(--gold); font-variant-numeric: tabular-nums; }
.lp-pick h3 { margin: 18px 0 6px; }
.lp-pick p { margin: 4px 0 8px; }
.lp-table td { vertical-align: top; }
.lp-stat { background: rgba(26, 36, 65, .5); border-radius: 10px; padding: 12px 14px; }
.lp-faq h3 { margin: 18px 0 4px; font-size: 15.5px; }
.lp-faq p { margin: 0 0 8px; }
.lp-sources ul { padding-left: 18px; font-size: 13.5px; }
.lp-sources li { margin: 4px 0; }
.lp-checked { color: var(--muted); font-size: 13px; margin-top: 28px; }
.lp-page a[href^="https://us.forums"], .lp-page a[href^="https://eu.forums"], .lp-page a[href^="https://worldofwarcraft"] { font-size: .86em; }
.lp-page .lp-sources a, .lp-page .st-posts a { font-size: inherit; }
/* the checklist */
.lp-progress { display: flex; align-items: center; gap: 14px; margin: 4px 0 8px; }
.lp-bar { flex: 1; height: 8px; border-radius: 99px; background: rgba(26, 36, 65, .9); overflow: hidden; }
.lp-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-2), var(--gold)); border-radius: 99px; transition: width .25s; }
.lp-progress span { color: var(--muted); font-size: 13.5px; white-space: nowrap; }
.lp-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.lp-step label { display: flex; gap: 12px; padding: 12px 14px; border-radius: 10px; background: rgba(26, 36, 65, .45); cursor: pointer; position: relative; }
.lp-step label:hover { background: rgba(26, 36, 65, .8); }
.lp-step input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lp-tick { flex: none; width: 22px; height: 22px; border-radius: 6px; background: rgba(7, 11, 22, .8); margin-top: 1px; display: grid; place-items: center; }
.lp-step input:focus-visible + .lp-tick { outline: 2px solid var(--gold); outline-offset: 2px; }
.lp-step.done .lp-tick { background: var(--new); }
.lp-step.done .lp-tick::after { content: ""; width: 10px; height: 6px; border: solid #08130c; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) translate(1px, -1px); }
.lp-step-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lp-step-body b { color: #fff; }
.lp-step.done .lp-step-body b { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(141, 153, 184, .6); }
.lp-step-links { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
/* the beta errors log checker */
.lp-check { margin: 10px 0 8px; }
.lp-drop { border-radius: 14px; padding: 22px 20px; text-align: center; background: rgba(63, 208, 217, .07); outline: 2px dashed rgba(63, 208, 217, .35); outline-offset: -8px; transition: background .15s; }
.lp-drop.over { background: rgba(63, 208, 217, .16); }
.lp-drop p { margin: 6px 0; }
.lp-drop-head { font-size: 17px; font-weight: 650; color: #fff; }
.lp-private { color: var(--new); font-size: 13px; }
.lp-verdict { border-radius: 12px; padding: 14px 16px; margin: 12px 0 4px; }
.lp-verdict.good { background: rgba(61, 220, 132, .09); }
.lp-verdict.bad { background: rgba(255, 179, 71, .09); }
.lp-verdict h3 { margin: 6px 0; font-size: 18px; }
.lp-verdict p { margin: 4px 0; }
.lp-v-head { font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--gold); }
.lp-v-head .muted { text-transform: none; letter-spacing: 0; }
.lp-timeline { list-style: none; padding: 0; margin: 0; font-size: 13.5px; }
.lp-timeline li { display: grid; grid-template-columns: 68px 1fr; gap: 10px; padding: 3px 0; }
.lp-timeline time { color: var(--muted); font-variant-numeric: tabular-nums; }
.lp-timeline .lp-tl-disconnect span, .lp-timeline .lp-tl-fatal span, .lp-timeline .lp-tl-charLoginFailed span { color: var(--removed); }
.lp-timeline .lp-tl-charList span, .lp-timeline .lp-tl-world span { color: var(--new); }
.lp-cross { padding-left: 18px; }
.lp-cross li { margin: 6px 0; }
/* the status page */
.st-hero { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; border-radius: 14px; background: rgba(26, 36, 65, .55); margin: 6px 0 14px; }
.st-hero b { font-size: 24px; color: #fff; letter-spacing: -.015em; }
.st-hero p { margin: 4px 0 0; }
.st-ms { color: var(--muted); font-weight: 600; }
.st-dot { flex: none; width: 16px; height: 16px; border-radius: 50%; margin-top: 8px; background: #59627d; }
.st-other .st-dot { display: inline-block; width: 10px; height: 10px; margin: 0 4px 0 0; }
.st-up .st-dot { background: var(--new); box-shadow: 0 0 0 5px rgba(61, 220, 132, .16); }
.post-live { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 4px 0 10px; }   /* a server post's live status (news.js renderPost) */
.post-live .st-dot { width: 10px; height: 10px; margin: 0; box-shadow: none !important; }
.st-down .st-dot { background: var(--removed); box-shadow: 0 0 0 5px rgba(255, 107, 107, .18); }
.st-flaky .st-dot { background: var(--changed); box-shadow: 0 0 0 5px rgba(255, 179, 71, .16); }
.st-hero.st-up { background: rgba(61, 220, 132, .08); }
.st-hero.st-down { background: rgba(255, 107, 107, .10); }
.st-hero.st-flaky { background: rgba(255, 179, 71, .08); }
.st-banner { border-radius: 12px; padding: 12px 16px; margin: 6px 0 14px; background: rgba(255, 179, 71, .10); }
.st-banner.st-planned { background: rgba(109, 203, 227, .10); }
.st-banner > b { color: var(--changed); text-transform: uppercase; letter-spacing: .06em; font-size: 12.5px; }
.st-banner .st-back { margin: 6px 0 0; color: #7ee2a0; font-size: 14px; }
.st-banner.st-planned > b { color: var(--link); }
.st-banner p { margin: 4px 0 0; }
.st-uptime { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 6px; }
.st-uptime div { background: rgba(26, 36, 65, .45); border-radius: 10px; padding: 10px 14px; }
.st-uptime b { display: block; font-size: 22px; color: #fff; font-variant-numeric: tabular-nums; }
.st-uptime span { color: var(--muted); font-size: 12.5px; }
.st-cantplay { margin: 8px 0 0; color: #ff8a3d; font-weight: 600; }
.st-strip, .st-daily, .st-reports { display: block; width: 100%; height: 34px; }
.st-daily { height: 60px; }
.st-reports { height: 70px; }
.st-strip rect, .st-daily rect { fill: #2a3354; }
.st-strip rect:hover, .st-daily rect:hover, .st-reports rect:hover { opacity: .8; }
/* a tapped bar: its time and result under the chart (status.js) */
.st-strip rect, .st-daily rect, .st-reports rect { cursor: pointer; }
svg rect.st-sel { stroke: #fff; stroke-width: 1.5; }
.st-read { margin: 4px 0 0; color: var(--text); }
svg .st-up { fill: var(--new); }
svg .st-part { fill: var(--changed); }
svg .st-down { fill: var(--removed); }
svg .st-none { fill: #2a3354; }
svg .st-rep { fill: #ff8a3d; }
.st-reports rect { fill: var(--link); }
.st-reports .st-base { stroke: var(--line); stroke-width: 1; }
.st-axis { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; margin-top: 4px; }
.st-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.st-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.st-legend .st-up { background: var(--new); }
.st-legend .st-part { background: var(--changed); }
.st-legend .st-down { background: var(--removed); }
.st-legend .st-none { background: #2a3354; }
.st-legend .st-rep { background: #ff8a3d; }
.st-incidents { padding-left: 18px; }
.st-incidents li.open { color: var(--removed); }
.st-report { margin-top: 10px; }
.st-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.st-kinds .chip { cursor: pointer; color: var(--text); border: 0; background: rgba(26, 36, 65, .7); font: inherit; font-size: 13px; padding: 4px 12px; }
.st-kinds .chip.on { background: var(--gold); color: #1a1205; }
.st-surge { background: rgba(255, 107, 107, .12); color: #ffd0d0; border-radius: 10px; padding: 10px 14px; font-weight: 600; }
.st-verdict { border-radius: 12px; padding: 12px 16px; margin: 6px 0 14px; background: rgba(255, 107, 107, .14); border: 1px solid rgba(255, 107, 107, .35); }
.st-verdict > b { color: #ff9b94; font-size: 18px; }
.st-verdict > p { margin: 4px 0 0; color: #ffd0d0; }
.st-thanks { color: var(--new); }
.st-posts ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.st-posts li { padding: 10px 0; }
.st-posts li p { margin: 4px 0 0; font-size: 13.5px; }
.badge.st-k-maintenance { background: rgba(255, 179, 71, .15); color: var(--changed); }
.badge.st-k-issue { background: rgba(255, 107, 107, .14); color: #ff9b9b; }
.badge.st-k-known { background: rgba(109, 203, 227, .13); color: var(--link); }
.badge.st-k-up { background: rgba(61, 220, 132, .14); color: var(--new); }
@media (max-width: 760px) {
  .lp-answer { font-size: 16px; }
  .lp-tiers a { grid-template-columns: 1fr; gap: 2px; }
  .st-hero { padding: 14px; gap: 12px; }
  .st-hero b { font-size: 19px; }
  .st-uptime b { font-size: 18px; }
  .st-uptime div { padding: 8px 10px; }
  .lp-code { flex-direction: column; align-items: stretch; }
}

/* ---- the free addons hub (/addons, pages/addons.js) ---- */
.addons-page { max-width: 1100px; }
.ad-head .lead { font-size: 17px; color: #cfd5e1; max-width: 760px; }
.ad-which { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0 22px; }
.ad-which h2 { grid-column: 1 / -1; margin: 0; font-size: 17px; padding: 0; border: 0; }
.ad-which a { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border-radius: 12px; color: var(--text);
  background: linear-gradient(120deg, rgba(63, 208, 217, .13), rgba(16, 22, 40, .88) 70%); }
.ad-which a:hover { text-decoration: none; background: linear-gradient(120deg, rgba(63, 208, 217, .22), rgba(16, 22, 40, .88) 70%); }
.ad-which a b { color: #fff; font-size: 15.5px; }
.ad-which a span { color: var(--link); font-size: 14px; }
.ad-which p { grid-column: 1 / -1; margin: 2px 0 0; color: #cfd5e1; font-size: 14.5px; }
.ad-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ad-card { display: flex; flex-direction: column; border-radius: 14px; background: var(--panel); overflow: hidden; scroll-margin-top: calc(var(--hdr-h, 59px) + 22px); }
.ad-art { margin: 0; position: relative; aspect-ratio: 3 / 2; background: #0b1020; overflow: hidden; }
.ad-art > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.ad-art figcaption, .ad-art-note { position: absolute; left: 10px; bottom: 8px; font-size: 11.5px; color: #cfd5e1; background: rgba(6, 9, 20, .78); padding: 2px 8px; border-radius: 6px; }
.ad-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.ad-body h2 { margin: 0; padding: 0; border: 0; font-size: 22px; }
.ad-body h2 a { color: #fff; }
.ad-tag { margin: 0; color: #cfd5e1; font-size: 15px; }
.ad-points { margin: 4px 0; padding-left: 18px; font-size: 14.5px; line-height: 1.5; }
.ad-points li { margin: 4px 0; }
.ad-points li::marker { color: var(--teal); }
.ad-dl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: auto; padding-top: 8px; }
.btn.ad-btn { padding: 11px 20px; font-size: 15.5px; border-radius: 9px; }
.ad-count { margin: 0; }
.ad-more { font-size: 14px; }
.ad-uploader { margin: 18px 0 0; padding: 12px 16px; border-radius: 10px; background: rgba(16, 22, 40, .7); font-size: 14.5px; color: #cfd5e1; }
.ad-steps code { white-space: normal; word-break: break-all; }
.ad-faq dt { font-weight: 600; color: #fff; margin-top: 14px; }
.ad-faq dd { margin: 4px 0 0; color: #cfd5e1; line-height: 1.55; max-width: 820px; }
/* the Companion's illustration (no screenshot yet) */
.ad-mock { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 12px; padding: 22px; box-sizing: border-box;
  background: radial-gradient(120% 90% at 20% 10%, #1b2a4a, #0b1020 70%); align-content: center; }
.ad-mock-rot { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.ad-mock-rot img { border-radius: 6px; box-shadow: 0 0 0 2px rgba(240, 195, 90, .9), 0 0 18px rgba(240, 195, 90, .45); }
.ad-mock-rot img.ad-mock-sm { box-shadow: none; opacity: .75; }
.ad-mock-rot i { font-style: normal; font-weight: 700; color: #fff; background: rgba(0, 0, 0, .55); border-radius: 4px; padding: 0 6px; margin-left: -34px; margin-top: 26px; font-size: 12px; }
.ad-mock-k { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-right: 4px; }
.ad-mock-tip, .ad-mock-quest { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 8px; background: rgba(6, 9, 20, .92); font-size: 13px; }
.ad-mock-tip b { color: var(--q3); }
.ad-mock-tip em { font-style: normal; color: var(--green); }
.ad-mock-quest b { color: var(--gold); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.ad-mock-arrow { color: var(--teal); }
/* one addon (ForeverDB): one wide card, then its features in groups, the same panels as the cards */
.ad-cards.ad-one { grid-template-columns: 1fr; }
.ad-one .ad-card { flex-direction: row; }
.ad-one .ad-art { flex: 0 0 52%; aspect-ratio: auto; min-height: 340px; }
.ad-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 6px 0 4px; }
.ad-group { display: flex; flex-direction: column; gap: 6px; padding: 14px 18px 16px; border-radius: 12px; background: var(--panel); }
.ad-group h3 { margin: 0; font-size: 16.5px; color: #fff; }
.ad-group .ad-points { font-size: 14px; margin: 2px 0 4px; }
.ad-group .ad-more { margin-top: auto; }
.ad-groups > .ad-mock { border-radius: 12px; aspect-ratio: auto; min-height: 220px; }
@media (max-width: 760px) {
  .ad-one .ad-card { flex-direction: column; }
  .ad-one .ad-art { flex: none; aspect-ratio: 3 / 2; min-height: 0; }
  .ad-groups { grid-template-columns: 1fr; }
  .ad-which, .ad-cards { grid-template-columns: 1fr; }
  .ad-mock { padding: 14px; gap: 8px; }
  .ad-mock-tip, .ad-mock-quest { font-size: 12px; padding: 8px; }
}

/* ---- the small "free addon" line on deep pages (addoncta.js) ---- */
.addon-cta { display: flex; align-items: center; gap: 10px; margin: 10px 0 14px; padding: 9px 12px; border-radius: 10px; max-width: 900px;
  background: linear-gradient(120deg, rgba(63, 208, 217, .12), rgba(16, 22, 40, .75) 70%); font-size: 14px; color: #cfd5e1; }
.addon-cta-ic { flex: none; width: 20px; height: 20px; border-radius: 5px; background: url(/img/logo.svg) center / contain no-repeat; }
.addon-cta-text { flex: 1; }
.addon-cta a { white-space: nowrap; }
.addon-cta-x { flex: none; background: none; border: 0; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 4px; }
.addon-cta-x:hover { color: #fff; }

/* ---- home: the free addons row (a PREVIEW behind ?preview=nav until the owner approves it; pages/home.js) ---- */
.home-addons { display: grid; grid-template-columns: minmax(200px, 1.1fr) 1fr 1fr auto; gap: 10px; align-items: stretch; margin: 10px 0 4px;
  padding: 12px; border-radius: 12px; background: linear-gradient(120deg, rgba(63, 208, 217, .14), rgba(16, 22, 40, .88) 60%); }
.ha-head { display: flex; gap: 12px; align-items: center; padding: 2px 6px; }
.ha-ic { flex: none; width: 34px; height: 34px; background: url(/img/logo.svg) center / contain no-repeat; }
.ha-head h2 { margin: 0; font-size: 16px; padding: 0; border: 0; color: #fff; }
.ha-head p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
/* home: what only ForeverDB has (pages/home.js; reports/competitors-and-seo-2026-10-27.md) */
.only-fdb { margin: 18px 0 6px; }
.only-fdb h2 { margin: 0 0 8px; font-size: 18px; }
.only-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.only-grid a { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text); }
.only-grid a:hover { text-decoration: none; border-color: var(--gold-2); }
.only-grid b { color: #fff; font-size: 14.5px; }
.only-grid span { font-size: 13px; color: #cfd5e1; line-height: 1.4; }
@media (max-width: 900px) { .only-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .only-grid { grid-template-columns: 1fr; } }
.ha-tile { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; border-radius: 9px; background: rgba(6, 9, 20, .45); color: var(--text); }
.ha-tile:hover { text-decoration: none; background: rgba(6, 9, 20, .7); }
.ha-tile b { color: #fff; font-size: 14.5px; }
.ha-tile span { font-size: 13px; color: #cfd5e1; line-height: 1.4; }
.btn.ha-go { align-self: center; padding: 10px 18px; font-size: 14.5px; border-radius: 9px; white-space: nowrap; }
.home-addons.with-discord { grid-template-columns: minmax(200px, 1.1fr) 1fr 1fr 1fr auto; }
.ha-tile.ha-discord { background: linear-gradient(120deg, rgba(88, 101, 242, .35), rgba(6, 9, 20, .45) 75%); }
.ha-tile.ha-discord:hover { background: linear-gradient(120deg, rgba(88, 101, 242, .5), rgba(6, 9, 20, .6) 75%); }
/* preview (?preview=one-addon): one ForeverDB addon tile, wider, next to the Discord bot */
.home-addons.one-addon { grid-template-columns: minmax(200px, 1.1fr) 2fr 1fr auto; }
.ha-tile.ha-one { background: linear-gradient(120deg, rgba(63, 208, 217, .2), rgba(6, 9, 20, .45) 75%); }
.ha-tile.ha-one:hover { background: linear-gradient(120deg, rgba(63, 208, 217, .3), rgba(6, 9, 20, .6) 75%); }
.ha-tile.ha-one em { font-style: normal; font-size: 12px; color: var(--muted); }
@media (max-width: 1000px) { .home-addons, .home-addons.with-discord, .home-addons.one-addon { grid-template-columns: 1fr 1fr; } .ha-head { grid-column: 1 / -1; } .btn.ha-go { grid-column: 1 / -1; justify-self: start; } }
@media (max-width: 560px) { .home-addons { grid-template-columns: 1fr; } }

/* ---- auction house prices (site/js/prices.js on item pages, pages/auctionhouse.js on /auction-house) */
.ah-box { padding: 10px 14px; }
.ah-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ah-table th, .ah-table td { text-align: left; padding: 7px 10px 7px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.ah-table thead th { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.ah-table tbody th { font-weight: 500; }
.ah-table tr:last-child th, .ah-table tr:last-child td { border-bottom: 0; }
.ah-table .badge { margin-top: 4px; display: inline-block; }
.ah-fac { font-size: 12px; color: var(--muted); white-space: nowrap; }
.ah-fac.ah-A { color: #7fb2ff; }
.ah-fac.ah-H { color: #ff8a7a; }
.ah-spark { color: var(--gold); display: block; }
.ah-hist-h { margin: 14px 0 4px; font-size: 15px; }
.ah-hist-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 4px 0; }
.ah-hist-pick select { max-width: 100%; }
.ah-hist { max-width: 720px; }
.ah-hist-empty { margin: 2px 0 8px; }
.badge.ah-one { background: rgba(255, 179, 71, .12); color: #ffb347; }
.ah-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 12px 0; }
.ah-totals > div { background: var(--panel); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; color: var(--muted); }
.ah-totals b { display: block; font-size: 20px; color: #fff; }
.ah-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 14px 0 6px; }
.ah-pick label { font-weight: 600; }
.ah-pick select { max-width: 100%; }
.ah-movers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.ah-movers h3 { margin: 4px 0 6px; font-size: 14px; color: var(--muted); }
.ah-list { list-style: none; margin: 0; padding: 0; }
.ah-list li { padding: 5px 0; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ah-list .chg { min-width: 0; font-size: 12.5px; }
.ah-mats { max-width: 34ch; }
.ah-points { padding-left: 20px; }
.ah-points li { margin: 6px 0; }
.ah-empty { padding: 14px 18px; margin: 14px 0; }
.pg-total { margin: 4px 0 10px; }
.pg-total .small { display: block; }
@media (max-width: 700px) {
  .ah-movers { grid-template-columns: 1fr; }
  .ah-table { font-size: 13px; }
  .ah-table .ah-trend { display: none; }
}
@media (max-width: 560px) {
  .ah-top th:nth-child(3), .ah-top td:nth-child(3) { display: none; }   /* the median: the lowest price and the badge fit */
  .ah-table .badge { font-size: 10px; }
}

/* ---------- Questions and the FAQ (site/js/pages/questions.js): ask, see what already answers it, then ForeverDB, then players ---------- */
.q-page { max-width: 860px; }
.q-found-box { background: rgba(61, 220, 132, .06); border-radius: 10px; padding: 10px 14px; margin: -6px 0 12px; font-size: 14px; }
.q-found-box ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.q-next { display: grid; gap: 8px; margin: 0 0 18px; }
.q-next[hidden] { display: none; }
.q-step { background: rgba(16, 22, 40, .6); border-radius: 10px; padding: 10px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.q-step > .btn { margin-left: auto; }
.q-post { display: grid; gap: 6px; width: 100%; }
.q-post textarea { width: 100%; min-height: 76px; resize: vertical; font: inherit; font-size: 14px; line-height: 1.5; background: rgba(7, 11, 22, .6); color: var(--text);
  border: 0; border-radius: 8px; padding: 8px 10px; outline: none; }
.q-topics { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 20px; }
.q-topics a { background: rgba(255, 255, 255, .04); color: var(--muted); padding: 6px 12px; border-radius: 999px; font-size: 13px; text-decoration: none; }
.q-topics a:hover { color: var(--text); background: rgba(255, 255, 255, .07); }
.q-topics a.active { background: rgba(240, 195, 90, .14); color: var(--gold); }
.q-topics a span { opacity: .75; margin-left: 2px; }
.q-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.q-head .tips-tabs { margin: 0; }
.q-faq, .q-list { margin: 0 0 26px; }
.q-list .tips-block { margin-top: 10px; }
.faq-entry { background: rgba(16, 22, 40, .72); border-radius: 10px; margin: 0 0 6px; }
.faq-entry > summary { cursor: pointer; padding: 11px 14px; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 8px; }
.faq-entry > summary::-webkit-details-marker { display: none; }
.faq-entry > summary::before { content: "+"; color: var(--gold); width: 12px; flex: none; font-weight: 700; }
.faq-entry[open] > summary::before { content: "–"; }
.faq-entry .faq-q { flex: 1; min-width: 0; }
.faq-a { padding: 0 14px 12px 34px; font-size: 14px; line-height: 1.6; }
.faq-a p { margin: 0 0 8px; }
.faq-a ul { margin: 0 0 8px; padding-left: 18px; }
.faq-label { color: #ffcf8a; background: rgba(255, 179, 71, .09); border-radius: 6px; padding: 5px 9px; font-size: 13px; }
.faq-meta { margin-top: 6px; }
.faq-kind { opacity: .7; font-size: 11.5px; }
.faq-entry:target, .faq-entry[open]:target { box-shadow: 0 0 0 1px rgba(240, 195, 90, .4); }
.faq-block { margin: 0 0 14px; }
.faq-block h3 { margin: 0 0 8px; font-size: 15px; }
@media (max-width: 600px) {
  .faq-a { padding-left: 14px; }
  .q-step > .btn { margin-left: 0; }
}
/* a series' other episodes on /finds (site/js/pages/finds.js) */
.fd-eps { margin-top: 2px; }
.fd-eps summary { cursor: pointer; }
.fd-eps ul { margin: 4px 0 0; padding-left: 16px; font-size: 12.5px; }
/* ---------- Player pages (pages/profile.js, feed.js) ---------- */
/* /u/<handle>, /feed, "Your player page" and "Delete my account" on /me: soft flat panels like .tip, no borders */
.pf-feedpage { max-width: 900px; }
.pf-flair { font-weight: 600; }
.pf-sec { margin: 0 0 6px; }
.pf-sec h2 { margin: 26px 0 10px; }
.pf-chars .pf-char { display: grid; gap: 6px; align-content: start; }
.pf-char .ar-card { height: 100%; }
.pf-follow.on { border-color: var(--teal); color: var(--teal); }
.pf-list { display: grid; gap: 8px; }
.pf-item { background: rgba(16, 22, 40, .72); border-radius: 10px; padding: 10px 14px; min-width: 0; }
.pf-item-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.pf-item-head b { overflow-wrap: anywhere; }
.pf-day { margin-left: auto; white-space: nowrap; }
.pf-lines { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; font-size: 13.5px; overflow-wrap: anywhere; }
.pf-rep { color: var(--muted); font-size: 12px; margin-left: 6px; }
.pf-rep:hover { color: var(--link); }
.pf-counts { margin: 0 0 6px; }
.pf-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pf-posts li { background: rgba(16, 22, 40, .72); border-radius: 10px; padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; min-width: 0; }
.pf-posts li > a { min-width: 0; overflow-wrap: anywhere; flex: 1 1 260px; }
.pf-empty { background: rgba(16, 22, 40, .72); border-radius: 10px; padding: 12px 14px; }
.pf-empty p { margin: 0 0 6px; }
.pf-empty p:last-child { margin-bottom: 0; }
.pf-more { margin: 14px 0; }
/* /me: your player page, who you follow */
.pf-me { margin: 0 0 8px; }
.pf-form { background: rgba(16, 22, 40, .72); border-radius: 12px; padding: 14px 16px; display: grid; gap: 12px; }
.pf-form h3 { margin: 6px 0 0; }
.pf-main-switch b { font-size: 15px; }
.pf-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px 18px; }
.pf-facts > div { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.pf-facts a { font-feature-settings: "calt" 0; }   /* (Inter would draw the x in k3x9 as a times sign) */
.pf-tick { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; align-items: baseline; cursor: pointer; }
.pf-tick .muted { grid-column: 2; }
.pf-crows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pf-crow { background: rgba(255, 255, 255, .03); border-radius: 10px; padding: 10px 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; }
.pf-crow.off { opacity: .7; }
.pf-cname { display: grid; gap: 1px; min-width: 0; align-content: start; }
.pf-ticks { display: grid; gap: 4px; font-size: 13px; }
.pf-ticks label { display: flex; gap: 6px; align-items: center; cursor: pointer; white-space: nowrap; }
.pf-alt { grid-column: 1 / -1; margin: 0; }
.pf-save { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pf-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.pf-preview { margin: 12px 0; padding: 12px 16px 16px; border-radius: 12px; background: rgba(127, 178, 255, .06); }
.pf-preview-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.pf-preview-head .btn { margin-left: auto; }
.pf-preview .pf-page { pointer-events: none; }
.pf-follows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pf-follows li { background: rgba(16, 22, 40, .72); border-radius: 10px; padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; }
.pf-follows li > span { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; min-width: 0; overflow-wrap: anywhere; }
/* the armory: the tick under "Make <name> public", and the Player page link / Follow button under the name */
.ar-follow-tick { flex: 1 1 100%; font-size: 13.5px; }
.ar-social { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 4px 0; }
/* "Delete my account" at the bottom of /me */
.pf-danger { margin: 36px 0 12px; padding: 14px 16px; border-radius: 12px; background: rgba(255, 107, 107, .06); }
.pf-danger h2 { margin: 0 0 6px; font-size: 17px; }
.pf-delete { display: grid; gap: 10px; margin-top: 8px; max-width: 520px; }
.pf-delete fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 4px; }
.pf-delete legend { padding: 0; margin-bottom: 4px; color: var(--muted); }
.pf-delete label { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.pf-confirm { flex-wrap: wrap; }
.pf-confirm .input { width: 140px; }
@media (max-width: 600px) {
  .pf-crow { grid-template-columns: minmax(0, 1fr); }
  .pf-ticks label { white-space: normal; }
  .pf-preview { padding: 10px 12px 12px; }
}
/* /u/<handle> (pages/profile.js profileHtml): a header like the game's unit frame and tooltip (dark panel, thin double edge,
   the portrait framed in the class colour, the level on its corner), then plain panels with a class-coloured or quality edge.
   Square corners, no pills, no glows. */
.pf-page { max-width: 1000px; }
.pp-head { --pp-line: #2a3350; position: relative; margin: 6px 0 0; padding: 18px 20px; overflow: hidden; background: rgba(8, 11, 20, .94);
  border: 1px solid #3b4566; border-radius: 4px; box-shadow: inset 0 0 0 1px #000; }
.pp-id { display: flex; gap: 18px; align-items: center; min-width: 0; }
.pp-portrait { position: relative; flex: none; width: 80px; height: 80px; padding: 3px; background: #05070c; border: 2px solid var(--c); border-radius: 4px; }
.pp-portrait .pp-pic { display: block; width: 100%; height: 100%; border: 0; border-radius: 2px; box-shadow: none; }
.pp-letter { display: grid; place-items: center; background: #10162a; color: var(--c); font-size: 34px; font-weight: 700; }
.lvl-mark.pp-lv { position: absolute; right: -9px; bottom: -9px; min-width: 28px; height: 26px; font-size: 13px; border-width: 2px; background: #0b0d17; }
.pp-who { min-width: 0; flex: 1; }
.pp-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.pp-name h1 { margin: 0; overflow-wrap: anywhere; }
.pp-rank { margin: 3px 0 0; font-size: 15px; }
.pp-rank b { margin-right: 6px; }
.pp-sub { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 3px 0 0; font-size: 13.5px; }
.pp-xp { margin: 16px 0 0; max-width: 640px; }
.pp-xp .xp-bar { margin: 0 0 6px; }
.pp-next { margin: 0; }
/* the counts: cells split by thin rules (a cell's left and top edges; the ones on the panel's edge are cut off) */
.pp-stats { display: flex; flex-wrap: wrap; margin: 16px -20px -18px; border-top: 1px solid var(--pp-line); overflow: hidden; }
.pp-stats > div { flex: 1 1 120px; padding: 9px 16px 10px; box-shadow: -1px 0 0 var(--pp-line), 0 -1px 0 var(--pp-line); }
.pp-stats dt { color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.pp-stats dd { margin: 1px 0 0; color: #fff; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pp-ownbar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; margin: 10px 0 0; padding: 8px 12px;
  background: rgba(127, 178, 255, .06); border-radius: 4px; }
.pp-ownbar-go, .pp-fill-go { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-sec h2 { margin: 30px 0 12px; padding-bottom: 6px; border-bottom: 1px solid #2a3350; font-size: 19px; }
.pp-sec > p.muted { margin: 8px 0 0; }
.pp-sec h2 + p.muted { margin: -4px 0 10px; }
/* the owner's "Fill your page" */
.pp-fill { margin: 16px 0 0; padding: 12px 16px 4px; background: rgba(240, 195, 90, .05); border: 1px solid rgba(240, 195, 90, .18); border-left: 3px solid var(--gold-2); border-radius: 4px; }
.pp-fill h2 { margin: 0; font-size: 18px; }
.pp-fill > p { margin: 2px 0 6px; }
.pp-fill ul { list-style: none; margin: 0; padding: 0; }
.pp-fill li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 18px; align-items: center; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .06); }
.pp-fill li p { margin: 2px 0 0; }
.pp-fill-go { justify-content: flex-end; }
/* characters */
.pp-chars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 8px; }
.pp-char { display: grid; grid-template-rows: 1fr auto; min-width: 0; background: rgba(10, 14, 26, .92); border: 1px solid #2a3350; border-left: 3px solid var(--c); border-radius: 4px; }
.pp-char-link { display: flex; gap: 12px; align-items: center; padding: 12px 12px 10px; color: var(--text); min-width: 0; }
.pp-char-link:hover { text-decoration: none; background: rgba(255, 255, 255, .03); }
.pp-char-link:hover b { text-decoration: underline; }
.icon.pp-char-ic { width: 44px; height: 44px; }
.pp-char-txt { display: grid; gap: 1px; min-width: 0; font-size: 13.5px; }
.pp-char-name b { color: var(--c); font-size: 16px; overflow-wrap: anywhere; }
.pp-main { margin-left: 8px; color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pp-char-foot { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: space-between; padding: 7px 12px 8px;
  border-top: 1px solid rgba(255, 255, 255, .05); font-size: 13px; }
.pp-guild { color: #c9d1e4; overflow-wrap: anywhere; }
.pp-char-act { display: flex; gap: 10px; align-items: center; margin-left: auto; }
/* badges: earned ones in their frame; the owner's still to earn greyed */
.pp-badges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 8px; }
.pp-badge { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; min-width: 0; background: rgba(10, 14, 26, .92); border: 1px solid #2a3350; border-radius: 4px; }
.pp-badge-ic { flex: none; }
.pp-badge .icon.lg { width: 48px; height: 48px; border-radius: 4px; }
.pp-badge > div { min-width: 0; }
.pp-badge p { margin: 3px 0 0; font-size: 13px; }
.pp-badge.off { background: rgba(10, 14, 26, .6); }
.pp-badge.off .icon { filter: grayscale(1) brightness(.7); }
.pp-badge.off b { color: var(--muted); }
.pp-sec h3 { margin: 18px 0 8px; font-size: 15px; }
/* the timeline: day, icon on a thin line, what happened; the big moments on a gold-tinted row */
.pp-tl { --pp-day: 76px; position: relative; list-style: none; margin: 0; padding: 0; }
.pp-tl::before { content: ''; position: absolute; top: 10px; bottom: 10px; left: calc(var(--pp-day) + 12px + 13px); width: 2px; background: #2a3350; }
.pp-tl-row { position: relative; display: grid; grid-template-columns: var(--pp-day) 28px minmax(0, 1fr); gap: 0 12px; align-items: start; padding: 5px 0; }
.pp-tl-day { padding-top: 5px; color: var(--muted); font-size: 12.5px; text-align: right; white-space: nowrap; }
.icon.pp-tl-ic { position: relative; width: 28px; height: 28px; border-radius: 4px; }
.pp-tl-body { min-width: 0; padding: 4px 10px; border-radius: 3px; overflow-wrap: anywhere; }
.pp-tl-body p { margin: 0; }
.pp-tl-row.major .pp-tl-body { background: rgba(240, 195, 90, .07); color: #fff; }
.pp-tl-row.major .icon.pp-tl-ic { box-shadow: 0 0 0 1px var(--gold); }
.pf-posts li .icon.sm { align-self: center; }
.pp-kind { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.pp-quiet { margin: 22px 0 0; padding: 14px 0 0; border-top: 1px solid #2a3350; }
@media (max-width: 600px) {
  .pp-head { padding: 14px 14px; }
  .pp-stats { margin: 14px -14px -14px; }
  .pp-stats > div { flex-basis: 96px; padding: 8px 12px; }
  .pp-stats dd { font-size: 18px; }
  .pp-id { gap: 14px; align-items: flex-start; }
  .pp-portrait { width: 64px; height: 64px; }
  .pp-name h1 { font-size: 25px; }
  .pp-fill li { grid-template-columns: minmax(0, 1fr); }
  .pp-fill-go { justify-content: flex-start; }
  .pp-tl { --pp-day: 50px; }
  .pp-tl::before { left: calc(var(--pp-day) + 8px + 13px); }
  .pp-tl-row { gap: 0 8px; }
  .pf-posts li .icon.sm { display: none; }
}
/* the Companion's changelog on /addon (pages/addon.js) */
.addon-changes { background: rgba(16, 22, 40, .6); border-radius: 8px; padding: 8px 14px; margin: 0 0 8px; }
.addon-changes > summary { cursor: pointer; }
.addon-changes ul { margin: 6px 0 4px; }
/* /join: "Create your free ForeverDB account", before Battle.net (pages/join.js, seo.py join_body) */
.join-cta { display: grid; justify-items: start; gap: 8px; margin: 4px 0 22px; padding: 16px 18px; max-width: 820px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.join-cta-end { margin-top: 24px; }
.join-go { font-size: 17px; padding: 11px 26px; border-radius: 8px; }
.join-go:hover { text-decoration: none; filter: brightness(1.08); }
.join-note, .join-have, .join-in { margin: 0; }
.join-skip { display: flex; gap: 8px; align-items: center; cursor: pointer; color: var(--muted); }
.join-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 4px 32px; max-width: 1180px; }
.join-sec h2 { margin-top: 18px; }
.join-list { display: grid; gap: 8px; padding-left: 20px; margin: 0; }
.join-sec p { margin: 8px 0; }

/* ---------- popular builds: what players run (site/js/popbuilds.js) ---------- */
.pop { margin-top: 18px; scroll-margin-top: calc(var(--hdr-h, 59px) + 12px); }
.pop-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.pop-head h2 { margin: 0; }
.pop-seen { color: var(--teal); font-weight: 600; }
.pop-bands { margin: 10px 0 6px; }
.pop-bands .chip { cursor: pointer; color: var(--text); font: inherit; font-size: 12.5px; }
.pop-bands .chip.on { background: rgba(240, 195, 90, .18); color: var(--gold); }
.pop-spec { margin-top: 14px; }
.pop-spec h3 { margin: 0 0 6px; font-size: 15px; }
.pop-builds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { .pop-builds { grid-template-columns: 1fr; } }
.pop-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 10px; background: rgba(255, 255, 255, .04); min-width: 0; }
.pop-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pop-pct { font-size: 22px; color: var(--gold); line-height: 1; }
.pop-split { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; font-weight: 700; font-size: 16px; }
.pop-split span.on { color: var(--gold); }
.pop-split i { color: var(--muted); font-style: normal; font-weight: 400; }
.pop-split .muted { font-weight: 400; margin-left: 6px; }
.pop-key { display: grid; gap: 4px; }
.pop-key .ent { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; }
.pop-key .ent span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop-key .ent b { color: var(--gold); font-weight: 600; margin-left: auto; }
.pop-act { margin-top: auto; }
.pop-how { margin: 14px 0 0; }
/* the calculator's heat: each talent's pick rate */
.tc-heatnote { margin: 0 0 8px; color: var(--teal); }
.tree-grid > .talent .tc-heat { position: absolute; left: -8px; top: -8px; z-index: 1; min-width: 26px; padding: 0 3px; border-radius: 4px;
  font: 700 10px/15px system-ui, sans-serif; text-align: center; color: #04161a; pointer-events: none;
  background: color-mix(in srgb, var(--teal) calc(25% + var(--h, 0) * 75%), #3a4560); }
.tree-grid > .talent.heat .icon { outline: 3px solid color-mix(in srgb, var(--teal) calc(var(--h, 0) * 100%), transparent); outline-offset: 1px; }

/* the corrections log (/corrections, pages/corrections.js) and the "Corrections" notice on a page with fixed entries */
.corr-stats { margin: 14px 0; }
.corr-stats .stat-tile .v { font-size: 22px; font-weight: 700; color: var(--gold); }
.corr-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.corr-entry { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 10px; overflow-wrap: anywhere; }
.corr-entry.corr-fixed { border-left-color: var(--new); }
.corr-entry.corr-open, .corr-entry.corr-checking { border-left-color: var(--gold-2); }
.corr-entry.corr-confirmed { border-left-color: var(--changed); }
.corr-entry h3 { margin: 6px 0; font-size: 16px; }
.corr-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.corr-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.corr-note p, .corr-reply p { margin: 2px 0 0; }
.corr-reply { background: rgba(63, 208, 217, .06); border-radius: 8px; padding: 2px 10px 8px; margin-top: 8px; }
.corr-when { margin: 8px 0 0; }
.corr-notice { border: 1px solid var(--line); border-left: 3px solid var(--new); border-radius: var(--radius); background: var(--panel); padding: 10px 14px; margin: 16px 0; font-size: 14px; }
.corr-notice h2 { font-size: 15px; margin: 0 0 6px; }
.corr-notice ul { margin: 0; padding-left: 18px; }
.corr-notice li { margin: 3px 0; }
.tip-log { margin-top: 6px; }
.tip-team { background: rgba(61, 220, 132, .07); border-radius: 8px; padding: 8px 12px; margin-top: 8px; }
.contact-form label.contact-public { display: block; font-weight: 600; }
.contact-form label.contact-public[hidden] { display: none; }
.contact-public .muted { display: block; margin-top: 2px; }
.ca-form { display: grid; gap: 6px; margin-top: 8px; }
.ca-seed { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 8px; }
.ca-new { margin: 10px 0; }
/* the ForeverDB team's public note on a correction (what was wrong and what we changed) */
.tip-team-head { font-weight: 600; font-size: 13px; margin-bottom: 4px; display: flex; gap: 8px; align-items: center; }
/* guild calendar: realm time under the viewer's time, and the waitlist chip */
.gt-ev-time .gt-ev-realm { display: block; font-weight: 400; font-size: 11px; color: var(--muted); }
.gt-chip.waitlist { background: rgba(127, 178, 255, .14); color: #a9c8ff; }

/* ---------- badges (site/js/badges.js, pages/badges.js, backend/badges.py): game icons in item-quality frames, names in the
   quality's colour, cards like a game tooltip. No pills, no glows. ---------- */
.bdg-marks { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.bdg-mark { display: inline-flex; line-height: 0; }
.icon.bdg-ic { width: 16px; height: 16px; border-radius: 2px; }
.bdg-row { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 14px; }
.bdg-row a { display: flex; align-items: center; gap: 8px; color: var(--text); }
.bdg-row span { display: flex; flex-direction: column; line-height: 1.25; }
.bdg-row small { color: var(--muted); font-size: 12px; }
.bdg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; margin: 18px 0 26px; }
.bdg-card { background: linear-gradient(#0d1120, #080b16); border: 1px solid #3d4459; border-radius: 4px; padding: 14px 16px; scroll-margin-top: calc(var(--hdr-h, 59px) + 22px); }
.bdg-card.soon { border-style: dashed; }
.bdg-head { display: flex; gap: 12px; align-items: flex-start; }
.bdg-head h2 { margin: 0 0 4px; font-size: 18px; color: #fff; }
.bdg-head p { margin: 0; color: var(--gold); font-size: 14px; }
.bdg-how { color: var(--text); font-size: 14px; line-height: 1.55; margin: 10px 0; }
.bdg-tiers { list-style: none; margin: 0; padding: 8px 0 0; border-top: 1px solid #262c40; display: grid; gap: 6px; }
.bdg-tiers li { display: flex; align-items: center; gap: 8px; }
.bdg-tiers li .muted { margin-left: auto; }
.bdg-top { margin: 22px 0; }
.bdg-boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.bdg-boards h3 { margin: 0 0 8px; font-size: 15px; color: var(--gold); }
.bdg-board { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); }
.bdg-board li { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-top: 1px solid var(--line); }
.bdg-board li:first-child { border-top: 0; }
.bdg-rank { width: 22px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.bdg-who { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.bdg-pts { color: var(--muted); font-size: 13px; white-space: nowrap; }
/* contributor levels (backend/xp.py, site/js/badges.js): the level square beside a name, framed in its title's item quality, and
   the game's XP bar (20 segments, purple). No pills, no glows. */
.lvl-mark { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 16px; padding: 0 3px; box-sizing: border-box;
  background: #0b0d17; border: 1px solid var(--q1); border-radius: 2px; color: #fff; font: 700 11px/1 var(--font, inherit);
  font-variant-numeric: tabular-nums; text-decoration: none; vertical-align: middle; }
a.lvl-mark:hover { text-decoration: none; background: #161a2a; }
.lvl-mark.lg { min-width: 38px; height: 38px; font-size: 18px; border-width: 2px; }
.q0-edge { border-color: var(--q0); } .q1-edge { border-color: var(--q1); } .q2-edge { border-color: var(--q2); }
.q3-edge { border-color: var(--q3); } .q4-edge { border-color: var(--q4); } .q5-edge { border-color: var(--q5); }
.xp-bar { position: relative; height: 18px; margin: 10px 0; background: #120b1c; border: 1px solid #6b5a33; border-radius: 2px; overflow: hidden; }
.xp-fill { height: 100%; background: linear-gradient(#b67ce6, #7a3db0 55%, #5b2a87); }
.xp-bar::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to right, transparent 0 calc(5% - 1px), rgba(0, 0, 0, .6) calc(5% - 1px) 5%); }
.xp-bar > .xp-text { position: absolute; inset: 0; z-index: 1;   /* scoped: the home page's Explore cards use .xp-text too */ display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px;
  font-weight: 600; text-shadow: 0 1px 1px #000; font-variant-numeric: tabular-nums; }
.xp-gain { color: #c8a2f0; }
.xp-head { display: flex; align-items: center; gap: 12px; }
.xp-head b { font-size: 17px; }
.me-xp h3 { margin: 14px 0 6px; font-size: 15px; color: var(--gold); }
.me-xp-recent td { padding: 5px 8px; vertical-align: top; }
.bdg-levels { margin: 22px 0; }
.bdg-lv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 18px; }
.bdg-lv-grid h3 { margin: 0 0 8px; font-size: 15px; color: var(--gold); }
.bdg-xp td { padding: 5px 8px; }
.bdg-xp td.num, .me-xp-recent td.num, .me-xp-recent td:first-child { white-space: nowrap; }
.bdg-titles { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); }
.bdg-titles li { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-top: 1px solid var(--line); }
.bdg-titles li:first-child { border-top: 0; }
.bdg-titles li .muted { margin-left: auto; white-space: nowrap; }
.join-xp { margin: 0 0 12px; padding: 10px 12px; border: 1px solid #6b5a33; border-radius: 4px; background: #120b1c; }
.pf-bdg { margin-top: 4px; }
.pf-major time { white-space: nowrap; }
.lf-home { margin: 8px 0 26px; }
.lf-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.lf-list li { display: flex; gap: 14px; padding: 9px 14px; border-top: 1px solid var(--line); line-height: 1.45; }
.lf-list li:first-child { border-top: 0; }
.lf-list time { flex: none; width: 52px; color: var(--muted); font-size: 13px; padding-top: 1px; }

/* The new article layout, a sample shown only with ?ux=new (pages/news.js articleLayout): centred, contents beside it, class tabs */
.ux-article-grid { display: grid; grid-template-columns: minmax(0, 780px) 220px; gap: 40px; justify-content: center; align-items: start; }
.ux-article-grid .article { max-width: none; }
.ux-article-grid > * { min-width: 0; }
.ux-article-grid > .article { margin: 0; width: 100%; }
.article.ux-article { margin-left: auto; margin-right: auto; }
.ux-toc { position: sticky; top: calc(var(--hdr-h, 59px) + 18px); font-size: 13.5px; border-left: 1px solid var(--line); padding: 4px 0 4px 16px; }
.ux-toc b { display: block; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.ux-toc ol { list-style: none; margin: 0; padding: 0; }
.ux-toc li { margin: 0 0 8px; }
.ux-toc a { color: #c3c8d4; }
.ux-toc a:hover { color: #fff; }
/* class colours as variables, for borders and underlines (the .c-* classes set text colour only) */
:root { --cc-warrior: #C69B6D; --cc-paladin: #F48CBA; --cc-hunter: #AAD372; --cc-rogue: #FFF468; --cc-priest: #FFFFFF; --cc-shaman: #0070DD;
  --cc-mage: #3FC7EB; --cc-warlock: #8788EE; --cc-druid: #FF7C0A; }
.ux-art-head { position: relative; margin: 0 0 18px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background-color: #0d111c;
  background-image: linear-gradient(180deg, rgba(9,12,20,.15) 0%, rgba(9,12,20,.55) 45%, rgba(9,12,20,.96) 100%), var(--hero, none);
  background-size: cover; background-position: center 35%; }
.ux-art-title { padding: 120px 24px 14px; }
.ux-art-head.no-hero .ux-art-title { padding-top: 22px; }
.ux-art-head:not(:has(.ux-classpick)) .ux-art-title { padding-bottom: 20px; }
.ux-art-title h1 { margin: 6px 0 0; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.ux-art-title .row .muted { color: #d5d9e3; }
.ux-classpick { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 18px 14px; background: rgba(6,8,14,.72); border-top: 1px solid rgba(255,255,255,.08); }
.ux-cp { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 76px; padding: 4px 6px; background: none; border: 0;
  font: inherit; color: #c3c8d4; cursor: pointer; }
.ux-cp-frame { display: block; padding: 2px; border-radius: 8px; background: #05070c; border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 0 0 1px #000; transition: border-color .15s, transform .15s; }
.ux-cp-frame img { display: block; border-radius: 5px; filter: saturate(.75) brightness(.85); transition: filter .15s; }
.ux-cp-all { display: grid; grid-template-columns: repeat(2, 22px); gap: 2px; padding: 3px; width: 58px; height: 58px; align-content: center; justify-content: center; }
.ux-cp-all img { border-radius: 3px; }
.ux-cp-name { font-size: 12.5px; font-weight: 600; letter-spacing: .01em; }
.ux-cp:hover .ux-cp-frame { border-color: rgba(255,255,255,.4); }
.ux-cp:hover img, .ux-cp[aria-selected="true"] img { filter: none; }
.ux-cp[aria-selected="true"] .ux-cp-frame { border-color: var(--cc, #e8c770); transform: translateY(-2px); box-shadow: inset 0 0 0 1px #000, 0 3px 0 -1px var(--cc, #e8c770); }
.ux-cp[aria-selected="true"] .ux-cp-name { color: var(--cc, #fff); }
.ux-cp:focus-visible { outline: 2px solid var(--teal, #3fd0d9); outline-offset: 2px; border-radius: 8px; }
.ux-cp-card { display: flex; gap: 16px; align-items: flex-start; margin: 0 0 18px; padding: 16px 18px; border-radius: 12px; background: var(--panel);
  border: 1px solid var(--line); border-left: 3px solid var(--cc, var(--line)); }
.ux-cp-card[hidden] { display: none; }
.ux-cp-card > img { border-radius: 8px; border: 1px solid rgba(255,255,255,.18); flex: none; }
.ux-cp-card h2.ux-cp-title { margin: 0 0 4px; font-size: 18px; color: var(--cc, #fff); }
.ux-cp-card p { margin: 0 0 8px; color: #c9ccd6; font-size: 14.5px; line-height: 1.55; }
.ux-cp-nums { display: flex; gap: 18px; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.ux-cp-nums b { color: #fff; font-size: 18px; margin-right: 3px; }
.ux-cp-links { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13.5px; }
.ux-classpick.many { gap: 0; padding-left: 10px; padding-right: 10px; }
.ux-classpick.many .ux-cp { min-width: 0; flex: 1; padding: 4px 2px; }
.ux-classpick.many .ux-cp-frame img { width: 44px; height: 44px; }
.ux-classpick.many .ux-cp-all { width: 50px; height: 50px; grid-template-columns: repeat(2, 19px); }
.ux-classpick.many .ux-cp-all img { width: 19px; height: 19px; }
.ux-classpick.many .ux-cp-name { font-size: 11.5px; }
@media (max-width: 600px) {
  .ux-art-title { padding: 80px 14px 10px; }
  .ux-classpick { padding: 10px 8px 12px; gap: 2px; }
  .ux-cp { min-width: 64px; padding: 2px; }
  .ux-cp-frame img { width: 42px; height: 42px; }
  .ux-cp-all { width: 48px; height: 48px; grid-template-columns: repeat(2, 18px); }
  .ux-cp-all img { width: 18px; height: 18px; }
  .ux-cp-card { padding: 12px; gap: 12px; }
  .ux-cp-card > img { width: 44px; height: 44px; }
}
.ux-article .article-body h2 { scroll-margin-top: calc(var(--hdr-h, 59px) + 22px); }
@media (max-width: 1100px) {
  .ux-article-grid { display: flex; flex-direction: column; max-width: 780px; margin: 0 auto; }
  .ux-toc { display: none; }
  .ux-toc ol { display: flex; flex-wrap: wrap; gap: 4px 16px; }
  .ux-toc li { margin: 0; }
}

/* hidden items (/hidden-items, pages/hiddenitems.js; the promo block on /addons, /uploader and /join, hiddenpromo.js) */
.hi-bar { height: 14px; max-width: 720px; border-radius: 7px; background: rgba(16, 22, 40, .8); border: 1px solid var(--line); overflow: hidden; margin: 14px 0 4px; }
.hi-bar > span { display: block; height: 100%; background: linear-gradient(90deg, #b8862e, var(--gold)); }
.hi-pct { margin: 0 0 10px; font-size: 14px; color: #cfd5e1; }
.hi-stats { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 15px; }
.hi-stats b { font-size: 22px; color: #fff; margin-right: 4px; }
/* Special quests (/special-quests, pages/specialquests.js) */
.sq-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.sq-chain { border-top: 1px solid var(--border, #2a2f3a); padding-top: 8px; margin-top: 14px; scroll-margin-top: 80px; }
.sq-chain h3 { margin: 0 0 4px; }
.sq-steps li { margin: 4px 0; }
.sq-seen { color: #3ddc84; }
.hi-history { margin: 12px 0; max-width: 720px; }
.hi-recent { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 18px; }
.hi-recent li { display: flex; flex-direction: column; gap: 1px; }
.hi-recent .icon { width: 20px; height: 20px; vertical-align: -5px; }
.hi-help { margin-top: 18px; padding: 4px 16px 12px; border-radius: 10px; background: rgba(16, 22, 40, .7); }
.ad-hidden { margin: 18px 0 0; padding: 4px 16px 10px; border-radius: 10px; background: rgba(16, 22, 40, .7); border-left: 3px solid var(--gold); }
.ad-hidden h2 { font-size: 18px; margin: 10px 0 4px; }
.ad-hidden p { margin: 0; color: #cfd5e1; font-size: 14.5px; }
.hidden-note { margin: -6px 0 10px; }


/* lore pages: "Read the books" (pages/lore.js booksHtml) */
.lr-books { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 8px; }
.lr-books li { display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.lr-books li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lr-books .small { color: #c3c8d4; }
.lr-buy { display: flex; gap: 6px; flex: none; }
@media (max-width: 600px) { .lr-books li { flex-direction: column; align-items: flex-start; } }

/* ---------------------------------------------------------------- a guild's own page (site/js/pages/guildpage.js, backend/guild_page.py):
   the picture header (.ux-art-head), framed game icons, quality colours; no pills, glows or glass */
.gp-head .gp-title { display: flex; gap: 18px; align-items: flex-end; padding-top: 150px; }
.gp-head.no-hero .gp-title { padding-top: 26px; }
.gp-crest-head { background-image: linear-gradient(180deg, var(--crest, #262a33) 0%, rgba(9,12,20,.96) 100%); }
.gp-crest-head .gp-title { padding-top: 34px; align-items: center; }
.gp-id { min-width: 0; }
.gp-id h1 { margin: 0; overflow-wrap: anywhere; }
.gp-where { margin: 4px 0 0; color: #e6e8f2; font-size: 15px; text-shadow: 0 1px 8px rgba(0,0,0,.7); }
.gp-tags { margin: 2px 0 0; color: var(--gold, #e8c770); font-size: 14px; font-weight: 600; letter-spacing: .02em; text-shadow: 0 1px 8px rgba(0,0,0,.7); }
.gp-bar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 10px 18px 12px; background: rgba(6,8,14,.78); border-top: 1px solid rgba(255,255,255,.08); }
.gp-rec b { color: #fff; }
.gp-want { display: inline-flex; gap: 4px; }
.gp-bar .gp-discord, .gp-side .gp-discord { margin-left: auto; }
.gp-side .gp-discord { margin-left: 0; }
.gp-frame { display: inline-block; padding: 2px; border-radius: 6px; background: #05070c; border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px #000; line-height: 0; vertical-align: middle; }
.gp-frame img { display: block; border-radius: 4px; }
.gp-want .gp-frame { border-color: var(--cc, rgba(255,255,255,.16)); }
.gp-crest { display: inline-flex; flex: none; padding: 6px; border-radius: 10px; background: var(--crest, #262a33); border: 2px solid var(--q4); box-shadow: inset 0 0 0 1px #000; line-height: 0; }
.gp-crest img { border-radius: 6px; border: 1px solid rgba(0,0,0,.6); }
.gp-crest.sm { padding: 2px; border-width: 1px; border-radius: 6px; margin-right: 6px; vertical-align: middle; }
.gp-crest.sm img { border-radius: 4px; }
.gp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; align-items: start; }
.gp-sec { margin: 0 0 22px; }
.gp-sec h2 { margin: 0 0 10px; font-size: 20px; }
.gp-about p { white-space: normal; line-height: 1.6; color: #dfe3ec; margin: 0; }
.gp-sched td, .gp-sched th { white-space: nowrap; }
.gp-inst { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.gp-inst h3 { margin: 0 0 6px; font-size: 16px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.gp-down { color: var(--q4); font-weight: 700; }
.gp-bosses { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.gp-bosses li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 14px; }
.gp-boss { color: #fff; font-weight: 600; min-width: 0; }
.gp-records { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.gp-side { display: grid; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.gp-side .btn { justify-content: center; text-align: center; }
.gp-side p { margin: 0; }
.gp-facts { margin: 0; display: grid; gap: 8px; }
.gp-facts div { display: grid; gap: 1px; }
.gp-facts dt { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.gp-facts dd { margin: 0; color: #fff; overflow-wrap: anywhere; }
.gp-cta { margin: 0 0 12px; border-left: 3px solid var(--q5); }
/* the Guild page tab: form on the left, the live preview on the right (below it on phones) */
.gp-setup { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 24px; align-items: start; }
.gp-form { display: grid; gap: 14px; min-width: 0; }
.gp-fs { margin: 0; padding: 12px 14px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); min-width: 0; }
.gp-fs legend { padding: 0 6px; font-weight: 700; color: #fff; }
.gp-fs textarea { width: 100%; box-sizing: border-box; }
.gp-fs p { margin: 6px 0 0; }
.gp-lbl { font-size: 13px; color: var(--muted); margin: 10px 0 4px !important; }
.gp-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; max-height: 330px; overflow-y: auto; padding: 2px; margin-top: 8px; }
.gp-thumb { position: relative; display: grid; gap: 3px; cursor: pointer; font-size: 12px; color: #c3c8d4; }
.gp-thumb input, .gp-ic input, .gp-sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gp-thumb img { width: 100%; height: auto; aspect-ratio: 1600 / 672; object-fit: cover; border-radius: 6px; border: 2px solid transparent; }
.gp-thumb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-thumb input:checked + img { border-color: var(--q5); }
.gp-thumb input:focus-visible + img, .gp-ic input:focus-visible + .gp-frame, .gp-sw input:focus-visible + span { outline: 2px solid var(--teal, #3fd0d9); outline-offset: 2px; }
.gp-icons { display: flex; flex-wrap: wrap; gap: 6px; }
.gp-ic { position: relative; cursor: pointer; }
.gp-ic img { filter: saturate(.7) brightness(.85); }
.gp-ic input:checked + .gp-frame { border-color: var(--q5); }
.gp-ic input:checked + .gp-frame img { filter: none; }
.gp-swatches { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.gp-sw { position: relative; display: inline-flex; gap: 6px; align-items: center; cursor: pointer; font-size: 13px; }
.gp-sw span { width: 26px; height: 26px; border-radius: 6px; border: 2px solid rgba(255,255,255,.2); }
.gp-sw em { font-style: normal; color: #c3c8d4; }
.gp-sw input:checked + span { border-color: #fff; }
.gp-secpick { display: flex; flex-wrap: wrap; margin: 4px 0; }
.gp-status.held, .gp-status.hidden { color: #ffb347; }
.gp-status.approved { color: #7ff0b0; }
.gp-save { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; position: sticky; bottom: 0; padding: 10px 0; background: var(--bg, #0b0e16); }
.bad-text { color: #ff8a8a !important; }
.gp-preview-wrap { position: sticky; top: calc(var(--hdr-h, 59px) + 12px); min-width: 0; }
.gp-preview-wrap h3 { margin: 0 0 8px; }
.gp-preview { border: 1px dashed rgba(255,255,255,.18); border-radius: 14px; padding: 12px; max-height: calc(100vh - 120px); overflow-y: auto; }
.gp-preview .gp-grid { grid-template-columns: minmax(0, 1fr); }
.gp-preview .gp-head .gp-title { padding-top: 100px; }
.gp-preview .gp-crest-head .gp-title, .gp-preview .gp-head.no-hero .gp-title { padding-top: 22px; }
/* the example on /guild-tools */
.gp-example { position: relative; margin: 12px 0; }
.gp-example-tag { position: absolute; top: 10px; right: 10px; z-index: 1; padding: 3px 8px; border-radius: 4px; background: rgba(6,8,14,.85); border: 1px solid rgba(255,255,255,.2);
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.gp-example .gp-side { display: none; }
.gp-example .gp-grid { grid-template-columns: minmax(0, 1fr); }
/* the recruitment board: a set-up guild's banner */
.rcp-card.has-banner { padding-top: 0; overflow: hidden; }
.rcp-banner { display: block; width: calc(100% + 32px); height: 74px; margin: 0 -16px 10px; object-fit: cover; object-position: center 35%; border-bottom: 1px solid var(--line); }
.rcp-hero { height: 140px; margin: 0 0 14px; border-radius: 14px; border: 1px solid var(--line); background: #0d111c var(--hero) center 35% / cover no-repeat; }
.dc-more { margin-top: 4px !important; font-size: 13.5px !important; }
@media (max-width: 900px) {
  .gp-grid, .gp-setup { grid-template-columns: minmax(0, 1fr); }
  .gp-preview-wrap { position: static; }
  .gp-preview { max-height: none; }
}
@media (max-width: 600px) {
  .gp-head .gp-title { padding: 110px 16px 12px; gap: 12px; }
  .gp-crest-head .gp-title, .gp-head.no-hero .gp-title { padding-top: 20px; }
  .gp-crest img { width: 52px; height: 52px; }
  .gp-bar { padding: 10px 14px; }
  .gp-bar .gp-discord { margin-left: 0; }
  .gp-sched td, .gp-sched th { white-space: normal; }
}
.gp-gallery[hidden], .gp-crestpick[hidden] { display: none; }

/* status page: the last hour, one bar per check (pages/status.js minutesSvg) */
.st-min { display: grid; grid-template-columns: 160px 1fr; gap: 10px; align-items: end; margin: 6px 0; }
.st-min-name { font-size: 13px; color: var(--muted); padding-bottom: 2px; }
.st-min-svg { height: 40px; }
@media (max-width: 600px) { .st-min { grid-template-columns: 1fr; gap: 2px; } }

/* /zones on phones: each zone is a small card (name and levels on top, the rest labelled underneath) instead of a 6-column table */
@media (max-width: 700px) {
  .zl-table thead { display: none; }
  .zl-table, .zl-table tbody, .zl-table tr, .zl-table td { display: block; width: auto; }
  .zl-table tr { position: relative; padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .zl-table td { padding: 2px 0; border: 0; text-align: left; }
  .zl-table td:first-child { padding-right: 70px; }
  .zl-table td.zl-lv { position: absolute; top: 10px; right: 12px; font-size: 17px; }
  .zl-table td[data-label]:not(.zl-lv)::before { content: attr(data-label) ": "; color: var(--muted); font-weight: 600; }
}

/* the sidebar's "On this page" (articles, lore and guides) */
.fs-toc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; font-size: 13.5px; }
.fs-toc-list a { color: #c3c8d4; }
.fs-toc-list a:hover { color: #fff; }
.fs-toc-list li[hidden] { display: none; }
#app h2[id], #app h3[id] { scroll-margin-top: calc(var(--hdr-h, 59px) + 22px); }
/* with the sidebar beside the page, its "On this page" replaces a guide's or lore page's own contents column */
.app.has-side .guide-layout { grid-template-columns: minmax(0, 1fr); }
.app.has-side .guide-layout > .guide-toc { display: none; }
/* "On this page" stays in view while reading: it sticks at the top of the column (a solid panel), and the widgets under it
   slide beneath it as the page scrolls */
.fdb-side:has(.fs-toc) .fdb-side-in { height: 100%; align-content: start; }
.fs-sec.fs-toc { position: sticky; top: calc(var(--hdr-h, 59px) + 18px); z-index: 2; max-height: calc(100vh - var(--hdr-h, 59px) - 38px); overflow-y: auto; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
.fdb-side.stick:has(.fs-toc) .fdb-side-in { position: static; }
/* the raid toolset on a raid event (pages/guild_raid.js, backend/raidtools.py) */
.rt-tabs { margin: 8px 0 12px; }
.rt-raidline { margin: 0 0 8px; }
.rt-tools .input { padding: 4px 6px; border: 0; background: rgba(255, 255, 255, .06); border-radius: 8px; color: var(--text); font: inherit; }
.rt-tools .rt-size { width: 64px; }
.rt-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 14px; align-items: start; }
.rt-board { display: grid; gap: 10px; min-width: 0; }
.rt-groups { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 8px; }
.rt-group, .rt-lane { padding: 8px 8px 6px; border-radius: 12px; background: var(--panel); min-width: 0; border: 1px solid transparent; }
.rt-group.over { border-color: var(--changed); }
.rt-group h4, .rt-lane h4 { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin: 0 0 6px; font-size: 13.5px; }
.rt-here { margin-left: auto; padding: 2px 10px; }
.rt-lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rt-lane p { margin: 0 0 4px; }
.over-drop { border-color: var(--gold) !important; background: rgba(240, 195, 90, .08); }
.rt-card { display: grid; grid-template-columns: 18px auto minmax(0, 1fr) auto; gap: 0 6px; align-items: center; width: 100%; min-height: 34px;
  margin: 0 0 4px; padding: 3px 8px 3px 6px; border: 1px solid rgba(255, 255, 255, .06); border-left: 3px solid var(--c, #888);
  border-radius: 8px; background: rgba(255, 255, 255, .035); color: var(--text); font: inherit; text-align: left; }
button.rt-card { cursor: grab; touch-action: manipulation; }
button.rt-card:hover { background: rgba(255, 255, 255, .07); }
button.rt-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.rt-card.sel { background: rgba(240, 195, 90, .16); border-color: var(--gold); }
.rt-card.dragging { opacity: .5; }
.rt-card.mine .rt-name { text-decoration: underline; text-decoration-color: rgba(240, 195, 90, .6); text-underline-offset: 3px; }
.rt-card .icon { width: 18px; height: 18px; }
.rt-role { font-size: 11.5px; font-weight: 700; color: var(--muted); text-align: center; }
.rt-name { display: grid; min-width: 0; font-weight: 600; color: var(--c); overflow-wrap: anywhere; line-height: 1.25; }
.rt-name small { font-weight: 400; font-size: 11.5px; }
.rt-empty { min-height: 34px; margin: 0 0 4px; border: 1px dashed rgba(255, 255, 255, .08); border-radius: 8px; color: rgba(255, 255, 255, .22);
  font-size: 12px; display: flex; align-items: center; padding-left: 10px; }
.rt-cov { padding: 10px 12px; border-radius: 12px; background: var(--panel); min-width: 0; position: sticky; top: calc(var(--hdr-h, 59px) + 14px); max-height: calc(100vh - var(--hdr-h, 59px) - 32px); overflow: auto; }
.rt-cov h4 { margin: 0 0 6px; }
.rt-cov details { margin: 8px 0; }
.rt-cov summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.rt-warn { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.rt-warn li { padding: 4px 8px 4px 22px; border-radius: 8px; position: relative; background: rgba(255, 255, 255, .03); }
.rt-warn li::before { content: ""; position: absolute; left: 8px; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .3); }
.rt-warn li.bad { background: rgba(255, 107, 107, .1); }
.rt-warn li.bad::before { background: var(--removed); }
.rt-warn li.warn::before { background: var(--changed); }
.rt-ok { color: #7ff0b0; }
.rt-scroll { overflow-x: auto; }
.rt-matrix, .rt-list { border-collapse: collapse; width: 100%; font-size: 12.5px; margin-top: 4px; }
.rt-matrix th, .rt-matrix td, .rt-list th, .rt-list td { padding: 2px 4px; border-bottom: 1px solid rgba(255, 255, 255, .05); text-align: left; vertical-align: top; }
.rt-matrix thead th { color: var(--muted); font-weight: 600; text-align: center; }
.rt-matrix td { text-align: center; }
.rt-matrix tbody th, .rt-list th { font-weight: 500; white-space: nowrap; }
.rt-list tr.none th { color: var(--muted); }
.rt-yes { color: #7ff0b0; font-weight: 700; }
.rt-maybe { color: var(--changed); font-weight: 700; }
.rt-no { color: rgba(255, 255, 255, .25); }
.rt-sum { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0 0 10px; }
.rt-dots { display: inline-flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.rt-req { padding: 8px 12px; border-radius: 12px; background: rgba(240, 195, 90, .06); margin: 0 0 10px; }
.rt-req p { margin: 4px 0; }
.rt-req summary { cursor: pointer; }
.rt-reqform { margin: 8px 0 4px; }
.rt-bags { display: grid; gap: 4px; margin: 0 0 10px; }
.rt-bosses { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.rt-bosses .btn.active { background: var(--gold); color: #1a1205; }
.rt-line { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(140px, 2fr) auto auto; gap: 6px; margin: 0 0 6px; }
.rt-line .input { padding: 6px 8px; }
.rt-addboss .input { padding: 6px 8px; border: 0; background: rgba(255, 255, 255, .06); border-radius: 8px; color: var(--text); font: inherit; }
.rt-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 8px; }
.rt-kind { padding: 8px 12px; border-radius: 12px; background: var(--panel); }
.rt-kind h5 { margin: 0 0 4px; font-size: 13px; color: var(--gold); }
.rt-kind ul { margin: 0; padding-left: 18px; }
.rt-print { display: none; }
@media (max-width: 1100px) {
  .rt-wrap { grid-template-columns: minmax(0, 1fr); }
  .rt-cov { position: static; max-height: none; }
}
@media (max-width: 760px) {
  .rt-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rt-lanes { grid-template-columns: minmax(0, 1fr); }
  .rt-line { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .rt-groups { grid-template-columns: minmax(0, 1fr); }
}
@media print {
  html.rt-printing body > *:not(.rt-print) { display: none !important; }
  html.rt-printing, html.rt-printing body { background: #fff !important; color: #000 !important; }
  html.rt-printing .rt-print { display: block; color: #000; font: 11pt/1.4 Inter, Arial, sans-serif; }
  .rt-print h1 { font-size: 18pt; margin: 0 0 4pt; }
  .rt-print h2 { font-size: 14pt; margin: 0 0 6pt; border-bottom: 1px solid #999; }
  .rt-print h3, .rt-print h4 { font-size: 11pt; margin: 8pt 0 2pt; }
  .rt-pgroups { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8pt; }
  .rt-pgroups ol, .rt-print ul { margin: 0; padding-left: 16pt; }
  .rt-pboss { break-before: page; }
  .rt-pnote { white-space: pre-wrap; border-left: 3px solid #999; padding-left: 8pt; }
}

/* the home page has one search box: the hero's (with Ask); the header's comes back once the hero's has scrolled away
   (pages/home.js; visibility, so the header doesn't reflow) */
html.hero-search-on .topbar .search-open { visibility: hidden; }
html.ask-on .hero-search input { padding-right: 76px; }
.hero-search .ask-btn { right: 6px; padding: 6px 11px; font-size: 13.5px; }

/* The header's search: a compact Search button (app.js searchLayer) that opens the search box over the page */
.topbar .search-open { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid var(--line);
  border-radius: 8px; background: rgba(14, 20, 38, .8); color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap; }
.topbar .search-open:hover { color: var(--text); border-color: var(--gold-2); }
.hdr-compact .search-open span { display: none; }
.hdr-compact .search-open { padding: 7px 9px; }
.topbar .global-search { display: none; }
.search-close { display: none; }
html.search-open .topbar .global-search { display: block; position: fixed; z-index: 1102; top: 14px; left: 50%; transform: translateX(-50%);
  width: min(720px, calc(100vw - 32px)); min-width: 0; margin: 0; flex: none; }
html.search-open .topbar .global-search input { font-size: 17px; padding: 14px 150px 14px 16px; background: #121a2e; border-color: var(--gold-2);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .6); }
html.search-open:not(.ask-on) .topbar .global-search input { padding-right: 90px; }
html.search-open .topbar .global-search .ask-btn { right: 82px; font-size: 13px; gap: 5px; padding: 6px 11px; }
html.search-open .search-close { display: block; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); padding: 6px 11px;
  border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
html.search-open .search-close:hover { color: var(--text); }
html.search-open .topbar .global-search .suggest { max-height: calc(100vh - 110px); }
.search-backdrop { position: fixed; inset: 0; z-index: 1101; background: rgba(4, 7, 15, .72); }
.search-backdrop[hidden] { display: none; }
/* New addons to watch (/addons/watch, pages/addonwatch.js) */
.aw-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 12px; margin-top: 12px; }
.aw-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; overflow-wrap: anywhere; }
.aw-card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.aw-card .aw-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
/* The best WoW Forever addons (/addons/best, pages/bestaddons.js): cards in the game's tooltip style (as /live's), the
   addon's name in tooltip gold, plain fact lines, and ForeverDB's own take in a teal-ruled note */
.ba-page { max-width: 1100px; }
.ba-page .lead { max-width: 75ch; }
.ba-intro { margin: 6px 0 4px; padding-left: 18px; max-width: 75ch; line-height: 1.55; }
.ba-intro li { margin: 3px 0; }
.ba-jump { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 14px 0 2px; font-size: 14.5px; }
.ba-group { margin-top: 24px; scroll-margin-top: calc(var(--hdr-h, 59px) + 16px); }
.ba-group > h2 { margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.ba-note { margin: 0 0 10px; max-width: 75ch; color: var(--muted); font-size: 14px; }
.ba-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 12px; }
.ba-card { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 12px 14px; overflow-wrap: anywhere;
  background: rgba(6, 8, 18, .93); border: 1px solid #50597a; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .7); }
.ba-card h3 { margin: 0; font-size: 16.5px; }
.ba-card h3 a { color: #ffd100; }
.ba-card p { margin: 0; line-height: 1.5; font-size: 14.5px; }
.ba-card .ba-meta, .ba-card .ba-file { color: var(--muted); font-size: 13px; }
.ba-paid { color: var(--changed); }
.ba-vid { color: var(--text); }
.ba-card .ba-price { padding-left: 9px; border-left: 2px solid var(--changed); font-size: 13.5px; }
.ba-card .ba-cardnote { font-size: 13.5px; color: var(--muted); }
.ba-fdb { padding: 7px 10px; border-left: 2px solid var(--teal); background: rgba(63, 208, 217, .06); font-size: 13.5px; line-height: 1.5; }
.ba-fdb b { display: block; color: var(--teal); font-size: 13px; }
.ba-card .ba-get { margin-top: auto; padding-top: 2px; font-size: 14px; }
.ba-src { max-width: 75ch; }

/* Live on your realm (/live, pages/live.js; the map's Live layer, pages/worldmap.js). Cards in the game's tooltip style:
   near-black, a thin grey-blue frame, gold titles; every card ends with where its numbers come from and how old they are */
.lv-page .lead { max-width: 75ch; }
.lv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 14px 0 12px; }
.lv-bar label { font-weight: 650; color: #fff; }
.lv-bar select { min-width: 0; max-width: 100%; }
.lv-users, .lv-notice { border-left: 3px solid var(--gold-2); background: rgba(240, 195, 90, .06); padding: 10px 14px; margin: 0 0 14px; display: flex; flex-direction: column; gap: 4px; }
.lv-users:not(.few) { border-left-color: var(--teal); background: rgba(63, 208, 217, .06); }
.lv-users b { color: #fff; }
.lv-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 4px; }
.lv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.lv-card { background: rgba(6, 8, 18, .93); border: 1px solid #50597a; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .7), 0 2px 10px rgba(0, 0, 0, .35); padding: 12px 14px 10px; min-width: 0; overflow-wrap: anywhere; }
.lv-card h2 { margin: 0 0 8px; font-size: 16.5px; color: #ffd100; letter-spacing: 0; }
.lv-card h3.lv-house { margin: 8px 0 2px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.lv-src { margin: 10px 0 0; padding-top: 7px; border-top: 1px solid rgba(80, 89, 122, .45); font-size: 12px; color: var(--muted); }
.lv-empty { margin: 4px 0; color: var(--muted); }
.lv-list { list-style: none; margin: 0; padding: 0; }
.lv-list > li { padding: 7px 0; border-bottom: 1px solid rgba(80, 89, 122, .28); }
.lv-list > li:last-child { border-bottom: 0; }
.lv-name { font-weight: 650; }
.lv-rare { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 0 8px; }
.lv-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; background: #8d99b8; border: 1px solid #000; }
.lv-up .lv-dot { background: #3ddc84; box-shadow: 0 0 0 3px rgba(61, 220, 132, .18); }
.lv-win .lv-dot { background: #f0c35a; }
.lv-old .lv-dot { background: #b0b8cc; }
.lv-state { font-size: 13.5px; }
.lv-up .lv-state { color: #3ddc84; }
.lv-win .lv-state { color: #f0c35a; }
.lv-zones { display: flex; flex-direction: column; gap: 8px; }
.lv-zrow { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.lv-bucket { color: var(--c); font-weight: 650; border-left: 4px solid var(--c); padding-left: 7px; font-size: 13px; }
.lv-movers > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; }
.lv-movers .muted { grid-column: 1 / -1; }
.lv-move { font-weight: 700; font-variant-numeric: tabular-nums; }
.lv-move.up { color: #3ddc84; }
.lv-move.down { color: #ff6b6b; }
.lv-ev b { color: #fff; }
.lv-ev-down b, .lv-ev-restart b { color: #ffb347; }
.lv-more { margin-top: 6px; }
.lv-how { margin: 18px 0 8px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; }
.lv-how summary { cursor: pointer; font-weight: 650; color: #fff; }
.lv-how ul { padding-left: 18px; }
.lv-how li { margin: 6px 0; }
.wm-live select { width: 100%; margin-bottom: 6px; }
.wm-live .wm-legend { margin: 6px 0; }
@media (max-width: 860px) {
  .lv-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .lv-bar select { flex: 1 1 100%; }
  .lv-zrow { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .lv-card { padding: 10px 12px 8px; }
}

/* Tips & tricks: what ForeverDB learned (site/js/coachtips.js on the class guide and PvE tabs, pages/coach.js for /coach):
   a game-tooltip panel, the tips as a plain list with each one's evidence badge first */
.coach-tips { margin: 22px 0 6px; background: var(--panel-solid); border: 1px solid var(--line); border-top: 2px solid var(--gold-2); border-radius: 4px; padding: 14px 16px; }
.coach-tips h2 { margin: 0 0 4px; font-size: 19px; color: var(--gold); }
.coach-tips .ct-spec { color: var(--text); font-weight: 600; font-size: 15px; }
.coach-tips .ct-meta { color: var(--muted); margin: 0 0 10px; }
.ct-tips { list-style: none; margin: 0; padding: 0; }
.ct-tips li { padding: 8px 0; border-bottom: 1px dashed rgba(42, 49, 66, .8); line-height: 1.5; overflow-wrap: anywhere; }
.ct-tips li:last-child { border-bottom: 0; }
.ct-tips .badge { margin-right: 6px; white-space: nowrap; }
.ct-tips .ct-why { color: var(--muted); font-size: 12.5px; }
.ct-tips .ct-why::after { content: ':'; }
.ct-tips .ct-text { display: inline; }
.ct-more, .ct-play { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.ct-more > summary, .ct-play > summary { cursor: pointer; color: var(--link); font-weight: 600; }
.ct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 6px 18px; margin-top: 8px; }
.ct-block h4 { margin: 8px 0 4px; color: var(--gold); font-size: 14px; }
.ct-block ul, .ct-block ol { margin: 0; padding-left: 20px; }
.ct-block li { padding: 3px 0; overflow-wrap: anywhere; }
.ct-when { color: var(--text); }
.ct-worth { color: var(--teal); font-size: 12px; margin-left: 4px; white-space: nowrap; }
.ct-src { display: block; color: var(--muted); font-size: 11.5px; }
.ct-changes { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 4px; }
.ct-changes h4 { margin: 6px 0 4px; color: var(--gold); font-size: 14px; }
.ct-changes ul { margin: 0; padding-left: 18px; }
.ct-changes li { overflow-wrap: anywhere; }
.ct-foot { margin: 10px 0 0; color: var(--muted); }
.ct-log { list-style: none; margin: 0 0 18px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: var(--panel-solid); }
.ct-log li { display: grid; grid-template-columns: 150px 210px minmax(0, 1fr); gap: 4px 12px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.ct-log li:last-child { border-bottom: 0; }
.ct-log time { color: var(--muted); font-size: 13px; }
.ct-log-what { overflow-wrap: anywhere; }
.ct-specs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.ct-class { border-top: 2px solid var(--cc, var(--gold-2)); }
.ct-class h3 { margin: 0 0 6px; display: flex; align-items: center; gap: 6px; }
.ct-class ul { list-style: none; margin: 0; padding: 0; }
.ct-class li { padding: 6px 0; border-bottom: 1px dashed rgba(42, 49, 66, .8); }
.ct-class li:last-child { border-bottom: 0; }
.ct-class li img { vertical-align: -4px; }
@media (max-width: 700px) {
  .coach-tips { padding: 12px; }
  .ct-log li { grid-template-columns: minmax(0, 1fr); }
}
/* tier lists: every spec on every list in one table (tiers.js glance) */
.tl-glance { margin: 22px 0 8px; }
.tl-glance-t th a { color: inherit; }
.tl-glance-t th.on, .tl-glance-t th.on a { color: var(--gold); }
.tl-glance-t td.on { background: rgba(240, 195, 90, .05); }
.tl-glance-t th:not(:first-child), .tl-glance-t td:not(:first-child) { text-align: center; }
.tl-g { display: inline-block; min-width: 24px; padding: 1px 6px; border-radius: 4px; color: #111; font-weight: 800; }
.tl-glance-t tr[data-hl="off"] { opacity: .45; }

/* ---------- The Forever Open scoreboard (/forever-open, js/pages/foreveropen.js). Plain panels with the site's gold rule;
   class colours (--c) on names; no glows. One column on a phone, nothing wider than the screen. ---------- */
.fo-page { max-width: 1180px; }
.fo-page .lead { max-width: 820px; }
.fo-sec { margin-top: 8px; min-width: 0; }
.fo-now { margin-top: 16px; }
.fo-state { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.fo-tag { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px;
  border-radius: 4px; background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); }
.fo-tag-live { background: #8e1c1c; color: #fff; border-color: #b33a3a; }
.fo-tag-done { color: var(--gold); border-color: var(--gold-2); }
.fo-headline { font-size: 15px; color: #eef0f5; margin: 6px 0 10px; }
.fo-count-wrap { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.fo-count-wrap > small { color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-size: 11.5px; }
.fo-count { display: flex; gap: 8px; flex-wrap: wrap; }
.fo-count span { display: flex; flex-direction: column; align-items: center; min-width: 62px; padding: 8px 6px 6px; background: var(--panel-solid);
  border: 1px solid var(--line); border-top: 2px solid var(--gold-2); border-radius: 6px; }
.fo-count b { font-size: 28px; font-variant-numeric: tabular-nums; color: #f4f5f8; line-height: 1.1; }
.fo-count small { color: var(--muted); font-size: 11px; }
.fo-wait { margin: 14px 0 0; color: var(--text); }
.fo-upd { margin: 12px 0 0; }
.fo-sub { font-size: 14px; margin: 16px 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.fo-cur, .fo-next, .fo-round-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.fo-match { background: var(--panel-solid); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; min-width: 0; }
.fo-match.fo-m-live { border-color: #b33a3a; }
.fo-match-big { padding: 12px 14px; }
.fo-m-head { display: flex; gap: 8px; align-items: center; font-size: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.fo-side { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 0; min-width: 0; }
.fo-side + .fo-side { border-top: 1px solid rgba(38, 50, 90, .6); }
.fo-score { font-size: 18px; font-variant-numeric: tabular-nums; min-width: 1.4em; text-align: right; color: #f4f5f8; }
.fo-match-big .fo-score { font-size: 26px; }
.fo-won .fo-pn { font-weight: 700; }
.fo-won .fo-score { color: var(--gold); }
.fo-lost { opacity: .55; }
.fo-p { display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: var(--c, var(--text)); }
.fo-p .fo-pn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fo-p .fo-pn a { color: inherit; }
.fo-p small { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.fo-p-big { font-size: 17px; }
.fo-p.fo-out .fo-pn { text-decoration: line-through; text-decoration-color: rgba(141, 153, 184, .6); }
.fo-tbd { color: var(--muted); font-style: italic; }
.fo-ic { width: 20px; height: 20px; border-radius: 4px; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); }
.fo-p-big .fo-ic { width: 26px; height: 26px; }
.fo-champ { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 12px 14px; border-left: 3px solid var(--c, var(--gold)); background: var(--panel-solid); border-radius: 6px; }
.fo-champ > small { color: var(--gold); text-transform: uppercase; letter-spacing: .06em; font-size: 11.5px; }
.fo-champ .fo-p-big { font-size: 22px; }
.fo-prize { color: var(--gold); font-weight: 700; font-size: 18px; }
.fo-chans { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.fo-chans a { margin-left: auto; }
.fo-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #e04444; vertical-align: middle; }
.fo-poster { width: 100%; aspect-ratio: 16 / 9; max-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: #05070e url('/img/loading/7963776-sm.webp') center / cover; border: 1px solid var(--line); border-radius: 8px; color: #fff; cursor: pointer; padding: 16px; text-align: center;
  box-shadow: inset 0 0 0 2000px rgba(5, 7, 14, .62); }
.fo-poster:hover { border-color: var(--gold-2); }
.fo-poster b { font-size: 17px; }
.fo-poster small { color: #c9cfdd; max-width: 440px; }
.fo-play { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; background: rgba(0, 0, 0, .55); border: 2px solid var(--gold-2); padding-left: 4px; }
.fo-tw { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 10px; }
.fo-player { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 6px; overflow: hidden; }
.fo-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fo-chat { min-height: 0; border-radius: 6px; overflow: hidden; background: #18181b; }
.fo-chat iframe { width: 100%; height: 100%; min-height: 360px; border: 0; display: block; }
.fo-round h3 { font-size: 15px; margin: 18px 0 8px; color: var(--gold); }
.fo-quals { margin-top: 18px; }
.fo-quals summary { cursor: pointer; color: var(--link); }
.fo-classes { display: grid; gap: 6px; }
.fo-cls { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto auto; gap: 4px 14px; align-items: center; padding: 8px 12px;
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--c); border-radius: 6px; }
.fo-cls-name { display: inline-flex; gap: 8px; align-items: center; color: var(--c); font-weight: 600; }
.fo-cls-lead { min-width: 0; }
.fo-cls-prize { color: var(--gold); font-weight: 700; white-space: nowrap; }
.fo-cls-note { grid-column: 1 / -1; font-size: 12px; }
.fo-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.fo-sched { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.fo-sched li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
.fo-sched li.fo-on { border-color: #b33a3a; }
.fo-prize-list { list-style: none; padding: 0; margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
.fo-prize-list li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; }
.fo-prize-list li + li { border-top: 1px solid var(--line); }
.fo-prize-list b { color: var(--gold); white-space: nowrap; }
.fo-prize-list .fo-total b { font-size: 18px; }
.fo-about { margin-top: 28px; }
.fo-about h2 { margin-top: 0; font-size: 17px; }
@media (max-width: 900px) {
  .fo-tw { grid-template-columns: minmax(0, 1fr); }
  .fo-chat iframe { height: 420px; min-height: 0; }
  .fo-two { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 600px) {
  .fo-cls { grid-template-columns: minmax(0, 1fr) auto; }
  .fo-cls-lead { grid-column: 1 / -1; grid-row: 2; }
  .fo-cls-left { grid-column: 1; grid-row: 3; font-size: 12px; }
  .fo-cls-prize { grid-column: 2; grid-row: 1; }
  .fo-count span { min-width: 54px; }
  .fo-count b { font-size: 22px; }
  .fo-chans a { margin-left: 0; }
}

/* ---------------------------------------------------------------- the community forum (pages/forum.js) */
.fm-page { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; max-width: 1180px; align-items: start; }
.fm-main { min-width: 0; }
.fm-main > h1 { margin-bottom: 4px; }
.fm-lede { margin: 0 0 14px; }
.fm-strip { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--line); margin: 0 0 14px; scrollbar-width: none; }
.fm-strip a { padding: 8px 12px; color: var(--muted); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.fm-strip a:hover { color: var(--text); text-decoration: none; }
.fm-strip a.on { color: var(--gold); border-bottom-color: var(--gold); }
.fm-compose { margin: 0 0 14px; }
.fm-start { width: 100%; text-align: left; background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; color: var(--muted); padding: 11px 14px; font: inherit; cursor: text; }
.fm-start:hover { border-color: var(--gold-2); color: var(--text); }
.fm-form { display: grid; gap: 10px; margin-top: 2px; }
.fm-form[hidden], .fm-start[hidden] { display: none; }
.fm-form input:not([type=checkbox]):not([type=file]), .fm-form textarea, .fm-form select, .fm-cform textarea, .fm-report input, .fm-report select {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; color: var(--text); padding: 9px 11px; font: inherit; }
.fm-form select, .fm-report select { width: auto; }
.fm-form [name=title] { font-weight: 600; font-size: 16px; }
.fm-form textarea, .fm-cform textarea { resize: vertical; min-height: 64px; }
.fm-form p { margin: 0; }
.fm-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fm-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fm-tools label.btn { cursor: pointer; }
.fm-tools select { max-width: 260px; padding: 5px 8px; font-size: 13px; }
.fm-tools > label:not(.btn) { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.fm-form .fm-row label { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.fm-form .fm-row .btn { padding: 7px 18px; font-size: 14px; line-height: 1.2; }
.fm-form .fm-row a { margin-left: auto; }
.fm-err { color: var(--removed); font-size: 13px; }
.fm-err:empty { display: none; }
.fm-shots { display: flex; gap: 8px; flex-wrap: wrap; }
.fm-shots:empty { display: none; }
.fm-shots figure { position: relative; margin: 0; }
.fm-shots img { width: 120px; height: 80px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); display: block; }
.fm-shots button { position: absolute; top: 2px; right: 2px; background: rgba(0, 0, 0, .7); color: #fff; border: 0; border-radius: 3px; width: 22px; height: 22px; cursor: pointer; }
.fm-pollbox { display: grid; gap: 6px; padding: 10px; border: 1px dashed var(--line); border-radius: 6px; }
.fm-pollbox[hidden] { display: none; }
.fm-popts { display: grid; gap: 6px; }
.fm-sorts { margin-top: 4px; }
.fm-list { display: grid; gap: 12px; }
.fm-post { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px 10px; }
.fm-post.pinned { border-color: var(--gold-2); }
.fm-held { opacity: .85; border-style: dashed; }
.fm-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.fm-name { color: var(--text); font-weight: 600; }
.fm-team { color: var(--gold); }
.fm-team::after { content: 'Team'; margin-left: 6px; padding: 0 5px; border: 1px solid var(--gold-2); border-radius: 3px; font-size: 11px; font-weight: 600; vertical-align: 1px; }
.fm-char { font-size: 13px; margin-left: 4px; }
.fm-guild { font-size: 13px; color: var(--new); margin-left: 4px; }
.fm-pin { color: var(--gold); font-weight: 600; }
.fm-title { font-size: 18px; margin: 4px 0 6px; line-height: 1.3; }
h1.fm-title { font-size: 24px; }
.fm-title a { color: var(--text); }
.fm-title a:hover { color: var(--gold); text-decoration: none; }
.fm-text { line-height: 1.55; overflow-wrap: anywhere; }
.fm-pics { display: grid; gap: 4px; margin: 10px 0 4px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.fm-pics.n1 { grid-template-columns: 1fr; }
.fm-pics img { width: 100%; max-height: 520px; object-fit: cover; border-radius: 4px; display: block; background: var(--bg-2); }
.fm-pics.n1 img { object-fit: contain; }
/* the team's current poll as a card (pollcard.js): on the home page under "From Blizzard", and in the sidebar */
.home-poll { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.home-poll .section-head { margin: 0 0 6px; }
.home-poll .section-head h3, .fs-poll .fs-head h2 { margin: 0; }
.pc-poll { margin: 6px 0 0; max-width: none; }
.pc-poll .fm-opt { font-size: 13px; padding: 6px 9px; }
.pc-foot a { white-space: nowrap; }
.blue-list .home-poll a { display: inline; padding: 0; border-radius: 0; color: var(--link); }   /* (not the column's link rows) */
.blue-list .home-poll a:hover { background: none; text-decoration: underline; }
.pc-sign { margin: 2px 0 0; }
.fm-poll { margin: 10px 0 4px; display: grid; gap: 6px; max-width: 520px; }
.fm-poll-q { font-weight: 600; }
.fm-opt { position: relative; display: flex; justify-content: space-between; gap: 8px; text-align: left; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 5px; color: var(--text); padding: 8px 10px; font: inherit; cursor: pointer; overflow: hidden; }
.fm-opt:hover:not(:disabled) { border-color: var(--gold-2); }
.fm-opt:disabled { cursor: default; }
.fm-opt.on { border-color: var(--gold); }
.fm-bar { position: absolute; inset: 0 auto 0 0; background: rgba(240, 195, 90, .14); }
.fm-opt-t, .fm-opt b { position: relative; }
.fm-acts, .fm-c-acts { display: flex; gap: 2px; flex-wrap: wrap; border-top: 1px solid var(--line); margin-top: 10px; padding-top: 4px; }
.fm-c-acts { border: 0; margin: 2px 0 0; padding: 0; }
.fm-act { background: none; border: 0; color: var(--muted); font: inherit; font-size: 13px; padding: 5px 9px; border-radius: 4px; cursor: pointer; }
a.fm-act { display: inline-block; }
.fm-act:hover:not(:disabled) { color: var(--text); background: rgba(255, 255, 255, .05); text-decoration: none; }
.fm-act:disabled { cursor: default; }
.fm-like.on { color: #ff6b8a; }
.fm-preview { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.fm-c { padding: 8px 0 4px; }
.fm-c-head { font-size: 13px; }
.fm-c-text { line-height: 1.5; overflow-wrap: anywhere; }
.fm-preview .fm-c { padding: 0; font-size: 14px; }
.fm-preview .fm-c-text { color: var(--muted); }
.fm-thread { margin-top: 18px; }
.fm-thread h2 { font-size: 18px; }
.fm-comments .fm-c { border-bottom: 1px solid var(--line); }
.fm-replies { margin: 4px 0 0 18px; padding-left: 12px; border-left: 2px solid var(--line); }
.fm-replies .fm-c { border-bottom: 0; }
.fm-cform { display: grid; gap: 6px; margin: 8px 0 12px; }
.fm-report { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.fm-report input { flex: 1 1 180px; width: auto; }
.fm-more { text-align: center; }
.fm-side { position: sticky; top: calc(var(--hdr-h) + 12px); display: grid; gap: 12px; }
.fm-side-box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.fm-side-box h3 { margin: 0 0 8px; font-size: 14px; color: var(--gold); text-transform: uppercase; letter-spacing: .04em; }
.fm-side-box ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.fm-boards { list-style: none; padding: 0 !important; display: grid; gap: 2px; }
.fm-boards li { display: flex; justify-content: space-between; }
.fm-boards a[aria-current] { color: var(--gold); font-weight: 600; }
.fm-adm { margin: 8px 0; display: grid; gap: 6px; }
.fm-adm .fm-pics { grid-template-columns: repeat(auto-fill, 120px); }
@media (max-width: 900px) {
  .fm-page { grid-template-columns: 1fr; }
  .fm-side { position: static; }
}
@media (max-width: 520px) {
  .fm-post { padding: 12px; }
  .fm-replies { margin-left: 6px; padding-left: 8px; }
}

/* ---------------------------------------------------------------- the ForeverDB API's page (pages/developers.js) */
.dv-page { max-width: 920px; }
.dv-lede { color: var(--muted); margin: 0 0 16px; }
.dv-sec { margin: 0 0 22px; }
.dv-sec h2 { font-size: 20px; margin: 0 0 8px; }
.dv-access { border-color: var(--gold-2); }
.dv-form { display: grid; gap: 10px; max-width: 640px; }
.dv-form label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.dv-form input, .dv-form textarea { background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; color: var(--text); padding: 8px 10px; font: inherit; }
.dv-form textarea { resize: vertical; }
.dv-inline { display: flex; gap: 8px; flex-wrap: wrap; max-width: none; align-items: center; margin: 10px 0; }
.dv-inline input[name=name] { flex: 1 1 260px; }
.dv-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dv-err { color: var(--removed); font-size: 13px; }
.dv-ok { color: var(--new); }
.dv-wait { color: var(--gold); }
.dv-no { color: var(--changed); }
.dv-code { background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; overflow-x: auto; font-size: 13px; margin: 8px 0; }
.dv-code code { background: none; padding: 0; white-space: pre; }
.dv-newkey { background: rgba(61, 220, 132, .08); border: 1px solid var(--new); border-radius: 6px; padding: 10px 12px; margin: 10px 0; }
.dv-newkey p { margin: 0 0 6px; }
.dv-keyrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dv-key { font-size: 13px; overflow-wrap: anywhere; }
.dv-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 8px 0; }
.dv-table th, .dv-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.dv-table th { color: var(--muted); font-weight: 600; }
.dv-off td { opacity: .5; }
.dv-ep { padding: 10px 0; border-bottom: 1px solid var(--line); }
.dv-ep h3 { font-size: 15px; margin: 0 0 4px; }
.dv-ep h3 span { color: var(--muted); font-weight: 500; margin-left: 6px; }
.dv-ep p { margin: 0 0 6px; }
.dv-params { font-size: 13px; border-collapse: collapse; }
.dv-params td { padding: 2px 12px 2px 0; vertical-align: top; }
.dv-req { margin: 8px 0; display: grid; gap: 4px; }
.dv-req p { margin: 4px 0; }
.dv-thread { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; }
.dv-thread li { border: 1px solid var(--border, #2a3142); border-radius: 6px; padding: 8px 10px; max-width: 760px; }
.dv-thread li.dv-team { background: rgba(80, 140, 255, .07); }
.dv-thread li.dv-dev { background: rgba(255, 255, 255, .03); margin-left: 24px; }
.dv-thread p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.dv-msg-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.dv-thread-box { margin-top: 6px; }
.dv-thread-box > summary { cursor: pointer; font-weight: 600; }
.dv-unread { background: var(--new, #3ddc84); color: #0b101c; }
.dv-msgs { margin-top: 18px; }
.dv-msgs h3 { margin: 0 0 6px; }
@media (max-width: 640px) { .dv-table { display: block; overflow-x: auto; } }
.dv-credit { border-left: 3px solid var(--gold); padding-left: 14px; }
.dv-agree { display: flex !important; gap: 8px; align-items: flex-start; color: var(--text) !important; font-size: 14px !important; }
.dv-agree input { margin-top: 3px; }
.dv-devid { font-size: 13px; }
.dv-use { margin: 6px 0 2px; }
.dv-use > summary { cursor: pointer; font-size: 13px; }
.dv-use-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 16px; margin: 6px 0; }
.dv-use-grid h5 { margin: 0 0 2px; font-size: 12px; color: var(--muted); font-weight: 600; }
.dv-use-grid ol { margin: 0; padding-left: 18px; font-size: 12px; overflow-wrap: anywhere; }
.dv-flag { color: var(--changed); }
.dv-keyuse { border-top: 1px solid var(--line); padding-top: 6px; margin-top: 6px; }

/* ---------------------------------------------------------------- the PvP tracker (pages/pvp.js) */
.pv-page { max-width: 1000px; }
.pv-lede { margin: 0 0 12px; }
.pv-filters { display: flex; gap: 14px; flex-wrap: wrap; margin: 6px 0 4px; font-size: 13px; color: var(--muted); }
.pv-filters select { background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; color: var(--text); padding: 5px 8px; font: inherit; }
.pv-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pv-table th, .pv-table td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); }
.pv-table th { color: var(--muted); font-weight: 600; font-size: 13px; }
.pv-alliance { color: #4a8cff; }
.pv-horde { color: #e0453b; }
.pv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 6px 0 14px; }
.pv-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; display: grid; gap: 3px; }
.pv-card b { font-size: 20px; color: var(--gold); }
.pv-bar { height: 6px; background: var(--bg-2); border-radius: 3px; overflow: hidden; }
.pv-bar span { display: block; height: 100%; background: var(--gold); }
.pv-weeks { display: flex; align-items: flex-end; gap: 6px; height: 110px; padding: 6px 0; }
.pv-week { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.pv-col { display: block; width: 70%; background: linear-gradient(var(--gold), var(--gold-2)); border-radius: 3px 3px 0 0; }
.pv-week small { color: var(--muted); font-size: 10px; margin-top: 3px; }
.pv-filters[hidden] { display: none; }
.pv-bgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.pv-bg { display: grid; gap: 4px; padding: 12px 14px; color: var(--text); text-decoration: none; }
.pv-bg:hover { border-color: var(--gold); text-decoration: none; }
.pv-bg > b { font-size: 16px; color: var(--gold); }
.pv-new { justify-self: start; display: inline-block; font-size: 11px; padding: 1px 6px; border: 1px solid var(--gold); border-radius: 3px; color: var(--gold); }
.pv-realm { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); margin: 4px 0 6px; }
.pv-realm select { background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; color: var(--text); padding: 5px 8px; font: inherit; max-width: 100%; }
.pv-h2 { font-size: 18px; margin: 16px 0 8px; }
.pv-fights { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pv-fight { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--radius); padding: 9px 12px; display: grid; gap: 3px; }
.pv-battle { border-left-color: #e0453b; }
.pv-battle b { color: #ff6b5e; }
.pv-heatbar { display: inline-block; height: 8px; min-width: 2px; max-width: 120px; background: #e0453b; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
@media (max-width: 640px) { .pv-table { display: block; overflow-x: auto; } }

/* ---------------------------------------------------------------- changes seen in game (pages/seeningame.js) */
.sg-page { max-width: 1100px; }
.sg-filters { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 10px 0; }
.sg-filters select { background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; color: var(--text); padding: 4px 8px; font: inherit; }
.sg-stamp { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; white-space: nowrap; }
.sg-stamp.ok { background: rgba(61, 220, 132, .15); color: #3ddc84; border: 1px solid rgba(61, 220, 132, .45); }
.sg-stamp.no { background: rgba(240, 195, 90, .12); color: #f0c35a; border: 1px solid rgba(240, 195, 90, .45); }
.sg-box { margin: 0 0 14px; padding: 10px 14px; }
.sg-box ul { margin: 6px 0; padding-left: 18px; }
.sg-box li { margin: 3px 0; }

/* ---------------------------------------------------------------- gathering leveling guides (profguides.js renderGatherGuide) */
.pg-gsteps { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; counter-reset: gs; }
.pg-gstep { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--radius); padding: 10px 14px; }
.pg-gstep-head { font-size: 16px; color: var(--gold); margin-bottom: 6px; }
.pg-gather { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0 6px; }
.pg-gnode { display: inline-flex; align-items: center; gap: 5px; cursor: help; }
.pg-fish { margin: 4px 0; padding-left: 18px; }
.pg-item { display: inline-flex; align-items: center; gap: 6px; }
.pg-own { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 14px; }
.pg-own a { display: inline-flex; align-items: center; gap: 6px; }

/* ---------------------------------------------------------------- best addons: logos and ForeverDB first (bestaddons.js) */
.ba-card h3 { display: flex; align-items: center; gap: 10px; }
.ba-logo { width: 40px; height: 40px; border-radius: 8px; flex: none; background: var(--bg-2); object-fit: contain; }
.ba-logo-lg { width: 56px; height: 56px; }
.ba-first { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: center; margin: 18px 0 22px; padding: 18px 20px;
  background: var(--panel); border: 1px solid var(--gold); border-radius: var(--radius); }
.ba-first h2 { display: flex; align-items: center; gap: 12px; margin: 4px 0 6px; font-size: 26px; }
.ba-rank { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.ba-first-tag { font-size: 16px; margin: 0 0 8px; }
.ba-first-points { margin: 8px 0 10px; padding-left: 18px; }
.ba-first-points li { margin: 3px 0; }
.ba-first-get { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 0; }
.ba-first-art { margin: 0; }
.ba-first-art img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); }
@media (max-width: 760px) { .ba-first { grid-template-columns: 1fr; } }

/* the sidebar's ad slot (sidebarbox.js loadAd): the network's banner, centred; nothing shows until it fills */
/* the in-page ad (inpagead.js): after the page's content, centred, no frame; takes no room until it fills */
/* Nitro ads (site/js/nitro.js): the sidebar slot, and the ?preview=ads placeholders */
.fs-ad { padding: 0; background: none; border: 0; display: flex; justify-content: center; }
.fs-ad-slot { display: flex; justify-content: center; max-width: 100%; overflow: hidden; }
.nx-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; max-width: 100%;
  background: repeating-linear-gradient(45deg, #2a3142, #2a3142 10px, #252b3a 10px, #252b3a 20px); border: 1px dashed #5a6478;
  color: #c9d1e0; font-size: 13px; font-weight: 600; }
.nx-ph small { color: #8e98ab; font-weight: 400; }
.nx-anchor-ph { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: flex; justify-content: center; padding: 6px 0;
  background: rgb(11 16 28 / 92%); }
.nx-anchor-ph .nx-close { position: absolute; top: -26px; right: 12px; width: 26px; height: 26px; border: 0; border-radius: 4px 4px 0 0;
  background: rgb(11 16 28 / 92%); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
body.nx-anchored { padding-bottom: 104px; }
.nx-banner { display: flex; justify-content: center; margin: 8px 0 22px; max-width: 100%; overflow: hidden; clear: both; }
.nx-banner > div { display: flex; justify-content: center; max-width: 100%; }
/* The coffee card (site/js/coffeepop.js): bottom right, never over the page's middle */
.coffee-pop { position: fixed; right: 16px; bottom: 16px; z-index: 950; width: 320px; max-width: calc(100vw - 32px); padding: 14px 16px 10px;
  background: var(--panel-solid, #111831); color: var(--text, #dbe1ee); border: 1px solid var(--line, #26325a); border-radius: 10px;
  box-shadow: 0 8px 28px rgb(0 0 0 / 45%); font-size: 13.5px; line-height: 1.45; animation: cp-in .35s ease-out; }
.coffee-pop p { margin: 0 0 8px; }
.coffee-pop .cp-title { font-weight: 700; font-size: 15px; padding-right: 22px; }
.coffee-pop .cp-x { position: absolute; top: 6px; right: 8px; border: 0; background: none; color: var(--muted, #8e98ab); font-size: 20px; cursor: pointer; line-height: 1; }
.coffee-pop .cp-row { display: flex; gap: 8px; align-items: center; margin: 10px 0 6px; flex-wrap: wrap; }
.coffee-pop .cp-go { background: #ffdd00; color: #111; font-weight: 700; padding: 7px 12px; border-radius: 7px; text-decoration: none; }
.coffee-pop .cp-later, .coffee-pop .cp-never { border: 0; background: none; color: var(--muted, #8e98ab); cursor: pointer; padding: 6px 4px; font-size: 13px; }
.coffee-pop .cp-never { font-size: 12px; padding: 0; text-decoration: underline; }
@keyframes cp-in { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .coffee-pop { animation: none; } }