/*
 * Theme system (aiondps_design_pack_v1). `data-theme` on <html> picks Dark or Light (background/
 * surface/text); applied by theme.js before first paint (see its own remarks) and persisted per
 * visitor. The accent is a single fixed brand orange, not a visitor choice - see the "Accent"
 * block below.
 *
 * Components must only ever reference the --color-*, --radius-card, --shadow-card and
 * --glow-primary custom properties below, never a literal color - that's what lets a visitor's
 * base theme (or a future brand-color change, in one place) recolor the page without touching a
 * component.
 */
:root {
  /* Per the user, modeled on myaion.eu/PvERanking - a Bootstrap .container-style fixed width,
     centered, rather than stretching edge-to-edge on a wide monitor. Used by header/breadcrumb/
     main alike so the whole page reads as one consistently-bounded column, not just the content
     area while the header bar above it still spans full width.
     1920px, not a narrower reader-width column: aiondps_design_pack_v1's own ultra-wide brief
     names 1920x1080 as the reference size and only wants EXTRA space on a 3440px monitor to go to
     background/gutter, not to the layout itself - see header-inner/breadcrumb/main below, each
     combining this with box-sizing:border-box padding for the gutter, same as that brief's own
     `width: min(100% - 48px, 1920px)` recipe. */
  --content-max-width: 1920px;
  --radius-card: 10px;
  /* Derived from the current theme's --color-primary - a soft tinted glow for hover states, never
     a static color of its own. */
  --glow-primary: color-mix(in srgb, var(--color-primary) 35%, transparent);
}

/* ---- Base themes: background / surface / text / semantic status ---- */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-background: #0e1820;
  --color-surface: #152532;
  --color-surface2: #1f3141;
  --color-border: #294557;
  --color-text: #f2f5f7;
  --color-text-muted: #7e8f9a;
  --shadow-card: 0 12px 40px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.025);
  --color-danger: #ff5a4f;
  --color-warning: #ffc94d;
  --color-success: #22e0a0;
  --color-info: #3aa0ff;
}

:root[data-theme="light"] {
  color-scheme: light;
  /* Light was "a bit too light" (the user, 2026-10-26): every surface a step darker, with a slight gray cast. */
  --color-background: #e3e8ed;
  /* Blue-gray, not pure white (per the user, comparing 3 swatch prototypes - "C" chosen). */
  --color-surface: #d6dde5;
  --color-surface2: #c8d0da;
  --color-border: #aab5c1;
  --color-text: #17202a;
  /* Darkened a step further (per the user) for readability against the blue-gray surface. */
  --color-text-muted: #4a5762;
  /* No card shadow in the light theme (the user, 2026-10-26). */
  --shadow-card: none;
  --color-danger: #c0392b;
  --color-warning: #a9770f;
  --color-success: #0e9f6e;
  --color-info: #1a6fc4;
}

/* ---- Accent: one fixed brand orange (aiondps_design_pack_v1 startseite brief: "Orange als
   primärer Akzent"), not a visitor choice. Two shades of the same hue, not one flat hex, purely
   for contrast: #FCA93E (sampled from the brief's own homepage mockup button) reads fine as text
   on the dark theme's near-black background but fails WCAG AA on the light theme's near-white one
   (1.8:1) - #A55E02 is the same orange darkened until it clears 4.5:1 there. --color-primary-on
   swaps the same way per theme (black on the bright dark-mode shade, white on the darker
   light-mode one) so filled buttons stay readable either way. */
:root,
:root[data-theme="dark"] {
  --color-primary: #ffba42;
  --color-primary-on: #101820;
}

:root[data-theme="light"] {
  --color-primary: #a55e02;
  --color-primary-on: #eaf8fc;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* The dark band spans the full window width (same idea as myaion's navbar-dark bg-dark); only
   .header-inner is width-constrained, so the background still reaches both edges on a wide
   monitor while the actual logo/title/search stay in the same centered column as everything
   else. */
header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 10px 24px;
}

header .logo {
  width: 32px;
  height: 32px;
}

/* Desktop: just another flex row, same as header-inner's own children used to be directly (see
   index.html - #header-controls only exists to give #nav-toggle something to show/hide below). */
.header-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
}

.nav-toggle {
  display: none;
}

/* Mobile nav (aiondps_design_pack_v1 section 15: "Hamburger / Drawer") - a real section that
   pushes the page down when open rather than an absolutely-positioned overlay, so it needs no
   scroll-locking or z-index of its own. See app.js's toggle handler for the .open class. */
@media (max-width: 720px) {
  .header-inner {
    position: relative;
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    width: 36px;
    height: 36px;
    font-size: 18px;
    line-height: 1;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    cursor: pointer;
  }

  .header-controls {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
  }

  .header-controls.open {
    display: flex;
  }

  .header-controls .lang-switcher,
  .header-controls .theme-switcher {
    width: 100%;
    margin-left: 0;
  }

  .header-controls .nav-feedback-link {
    margin-left: 0;
    text-align: center;
  }

  .header-controls .search {
    width: 100%;
  }

  .header-controls .search input {
    flex: 1 1 auto;
    min-width: 0;
  }
}

header .site-title {
  font-size: 18px;
  margin: 0;
  flex-shrink: 0;
}

header .site-title a {
  color: inherit;
  text-decoration: none;
}

.nav-download-link {
  color: var(--color-primary-on);
  background: var(--color-primary);
  font-weight: 600;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
}


/* Game switch in the header (Aion / Aion 2) - the first URL segment, see app.js route(). */

/* Pill-shaped segmented toggle (aiondps_design_pack_v1 startseite mockup: filled orange "Aion",
   dark outline "Aion 2") rather than a plain bordered tab - fully rounded, active one filled. */


/* Per-server tabs above a boss leaderboard - real links (?server=slug), see app.js serverTabs(). */
.server-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0 12px;
  font-size: 13px;
}

.server-tabs-label {
  color: var(--color-text-muted);
  margin-right: 4px;
}

.server-tabs a {
  color: var(--color-text);
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.server-tabs a.active {
  border-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: 700;
}

.game-card {
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.category-heading {
  margin: 18px 0 4px;
  font-size: 14px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Aion 2 class stand-in until real icons exist (see app.js classIcon). */
.class-badge {
  display: inline-block;
  min-width: 34px;
  padding: 1px 4px;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--color-text-muted);
}

/* Boss mechanics reference (see app.js mechanicsSection). Severity colours the row's left edge. */
.mechanics-table td {
  vertical-align: top;
}

.mechanics-table tr.sev-wipe td:first-child {
  border-left: 3px solid var(--color-danger);
}

.mechanics-table tr.sev-wipe-avoidable td:first-child {
  border-left: 3px solid var(--color-warning);
}

.mechanics-table tr.sev-mechanic td:first-child {
  border-left: 3px solid var(--color-info);
}

.trigger-badge,
.severity-badge {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  font-size: 12px;
  white-space: nowrap;
}

.sev-wipe .severity-badge {
  color: var(--color-danger);
}

.sev-wipe-avoidable .severity-badge {
  color: var(--color-warning);
}

.sev-mechanic .severity-badge {
  color: var(--color-info);
}

.mechanics-table details {
  margin-top: 4px;
}

.mechanics-table summary {
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 12px;
}

/* Player's server on Aion 2 pages, where one ranking spans servers (see app.js playerCell). */
.server-tag {
  font-size: 10px;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: 0 4px;
  margin-left: 4px;
  white-space: nowrap;
}

.derived-note {
  color: var(--color-text-muted);
  font-size: 12px;
  font-style: italic;
}

.game-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-card), 0 0 0 1px var(--glow-primary), 0 0 24px var(--glow-primary);
}


/* Appearance controls (theme + language) - grouped on the right of the header via this one auto
   margin on the first of them; the others just need to not shrink. */
.theme-switcher {
  flex-shrink: 0;
}

/* The right-hand group (feedback button, theme, language, search) starts at the feedback button. */
.nav-feedback-link {
  margin-left: auto;
}

/* A visible, theme-consistent keyboard focus ring for this session's own custom-styled buttons -
   not relying on the browser/OS default outline, which can end up low-contrast against a custom
   background (e.g. a light OS ring on the light theme's near-white surface). */
.category-filter button:focus-visible,
.nav-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.lang-switcher {
  flex-shrink: 0;
}

.search {
  display: flex;
  gap: 6px;
}

.search input {
  background: var(--color-background);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 6px 8px;
  min-width: 200px;
}

.search button,
select,
.link-button {
  background: var(--color-background);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 6px 10px;
  cursor: pointer;
  text-decoration: none;
}

.breadcrumb {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 8px 24px;
  font-size: 13px;
  color: var(--color-text-muted);
}

/* setBreadcrumb([]) (the homepage) leaves this empty rather than removing it - without this it
   still reserves its own padding as a visible empty bar between the header and the page content. */
.breadcrumb:empty {
  display: none;
}

.breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: underline;
  cursor: pointer;
}

main {
  padding: 16px 24px;
  max-width: var(--content-max-width);
  margin: 0 auto;
}

h2 {
  font-size: 16px;
  margin: 20px 0 8px;
}

ul.plain {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

ul.plain li a {
  display: block;
  padding: 8px 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text);
  text-decoration: none;
}

ul.plain li a:hover {
  border-color: var(--color-primary);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

th,
td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--color-border);
}

th {
  color: var(--color-text-muted);
  font-weight: normal;
}

/* One full-width block per class, stacked - not a multi-column grid: each block now holds a full
   6-column ranked-table (rank/player/DPS/damage/heal/buffs, see app.js rankedTable), which needs
   far more room than the old 3-column mini table this grid was originally sized for. A narrow
   grid column just clipped the table's right-hand columns instead of wrapping them. */
.class-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.class-block {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 10px;
}

.class-block h3 {
  margin: 0 0 8px;
  font-size: 14px;
}

/* Download page (#/download) - see app.js renderDownload. */
/* Homepage hero + quick-start (aiondps_design_pack_v1 startseite brief) - a solid/gradient panel,
   deliberately not a full-bleed photo: no real client screenshot or Aion artwork exists for this
   spot yet, and the asset policy forbids a generated stand-in (see 04_asset_registry). */
/* Hero + quick-start now share ONE background image (aiondps_design_pack_v1 startseite brief's
   own header.webp, supplied by the user - a real illustration, not a generated stand-in) rather
   than each being its own flat panel: the photo and its dark scrim live on this row via ::before/
   ::after, clipped by the row's own overflow:hidden, and every real child sits above them via
   position:relative + the z-index below. Hero text is hardcoded light-on-dark here (not the theme
   tokens) because the image is dark-scrimmed regardless of which base theme is active - same
   reasoning as instanceHero/bossHero's own photo treatment. */

/* 3D "arcade" hero CTAs (2026-09-25 redesign) - replaces the old flat .download-cta/.link-button
   pairing, which drifted a pixel out of vertical alignment because the arrow glyph baked into
   the download button's own text pushed its line box a hair taller than the plain-text blue
   button's. Here the icon lives in its own .btn-icon span instead, so both buttons' text lines
   share identical metrics; .btn is the shared shape/shadow/3D-press base, .btn-orange/.btn-blue
   only swap the three gradient/edge/shadow custom properties. */
.button-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.btn {
  --btn-color-top: #ffffff;
  --btn-color-bottom: #cccccc;
  --btn-edge: #888888;
  --btn-shadow: rgba(0, 0, 0, 0.35);
  --btn-rim: rgba(255, 255, 255, 0.35);
  --btn-glow: transparent;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 26px;
  border: 1px solid var(--btn-rim);
  border-radius: 7px;
  color: #111827;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  background: linear-gradient(to bottom, var(--btn-color-top) 0%, var(--btn-color-top) 8%, var(--btn-color-bottom) 100%);
  box-shadow:
    0 5px 0 var(--btn-edge),
    0 8px 14px var(--btn-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -2px 3px rgba(0, 0, 0, 0.18);
  transform: translateY(0);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

/* Glossy top highlight. */
.btn::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 2px;
  right: 2px;
  height: 7px;
  border-radius: 5px 5px 50% 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
  pointer-events: none;
}

/* Bottom edge that gives the button its "pressable" depth. */
.btn::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: -5px;
  height: 5px;
  border-radius: 0 0 5px 5px;
  background: var(--btn-edge);
  z-index: -1;
}

.btn:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow:
    0 6px 0 var(--btn-edge),
    0 10px 18px var(--btn-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -2px 3px rgba(0, 0, 0, 0.16),
    0 0 16px var(--btn-glow);
}

.btn:active {
  transform: translateY(4px);
  box-shadow:
    0 1px 0 var(--btn-edge),
    0 3px 6px var(--btn-shadow),
    inset 0 2px 4px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.btn-icon {
  font-size: 20px;
  line-height: 1;
}

.btn-orange {
  --btn-color-top: #ffd96a;
  --btn-color-bottom: #ffb51b;
  --btn-edge: #c77c00;
  --btn-shadow: rgba(120, 70, 0, 0.38);
  --btn-rim: rgba(255, 226, 168, 0.6);
  --btn-glow: rgba(255, 181, 27, 0.55);
  color: #111827;
}

.btn-blue {
  --btn-color-top: #72c1ff;
  --btn-color-bottom: #3196e8;
  --btn-edge: #176bb3;
  --btn-shadow: rgba(0, 55, 110, 0.4);
  --btn-rim: rgba(173, 220, 255, 0.6);
  --btn-glow: rgba(49, 150, 232, 0.55);
  color: #08213d;
}

/* Floating glass card overlapping up into the hero photo's bottom edge (aiondps_claude_design_pack
   prototype comparison, index-3.html), replacing the plain stats-row strip below the hero. */
.home-stats-card {
  position: relative;
  z-index: 3;
  /* Anchored 95px above the cards' top edge (its own ~76px height leaves a ~19px gap), measured
     from .home-below-hero rather than down from the hero, so the gap never depends on the card's
     rendered height - the user's chosen "1c" from a round of position prototypes. */
  position: static;
  margin: 0 auto 16px;
  /* Shrinks to its three items (a centered pill), not a 1300px-wide bar. */
  width: fit-content;
  max-width: 100%;
  padding: 0;
  display: flex;
  justify-content: center;
  background: color-mix(in srgb, var(--color-surface) 82%, transparent);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-card);
}

.home-stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 36px;
}

.home-stat-item:not(:last-child) {
  border-right: 1px solid var(--color-border);
}

.home-stat-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  /* var(--color-primary), not a fixed orange - darker in light mode (per the user) same as the
     rest of the primary accent's per-theme contrast swap. */
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-stat-icon svg {
  width: 20px;
  height: 20px;
}

.home-stat-text {
  text-align: left;
}

.home-stat-text strong {
  display: block;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.home-stat-text span {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Footer closing CTA (aiondps_claude_design_pack prototype comparison, index-3.html) - logo left,
   CTA centered, legal + social links right. Unlike the hero row, there's no photo behind this
   card, so it follows the theme tokens like any other surface instead of staying fixed-dark. */
.home-footer-cta {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  margin: 32px 0 12px;
  padding: 26px 32px;
  background: radial-gradient(ellipse at 20% 0%, rgba(95, 168, 255, 0.12) 0%, transparent 55%), var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  color: var(--color-text);
}

.home-footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.home-footer-emblem {
  width: 48px;
  height: 48px;
  filter: drop-shadow(0 0 8px rgba(255, 120, 40, 0.45));
}

.home-footer-logo .wordmark {
  height: 48px;
  width: 93px; /* 186:96 like the header lettering - fixed so no flex/grid can stretch it */
  flex: none;
  object-fit: contain;
}

.home-footer-center {
  text-align: center;
}

.home-footer-cta h2 {
  margin: 0 0 4px;
  font-size: 18px;
}

.home-footer-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
}

.home-footer-legal {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 12px;
}

.home-footer-legal-logo {
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 16px;
  margin-left: 14px;
}

.home-footer-legal a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.home-footer-legal a:hover {
  color: var(--color-text);
}

a.star-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--color-border, currentColor);
  border-radius: 999px;
  color: var(--color-text);
  font-size: 13px;
  text-decoration: none;
}

a.star-link:hover {
  background: var(--color-primary);
  color: var(--color-primary-on);
}

.star-icon {
  display: inline-flex;
  color: var(--color-primary);
}

.star-link:hover .star-icon {
  color: inherit;
}

.star-count {
  padding-left: 6px;
  border-left: 1px solid currentColor;
  font-variant-numeric: tabular-nums;
}

.star-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.home-footer-social {
  display: flex;
  gap: 10px;
}

.home-footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface2);
  color: var(--color-text);
}

.home-footer-social a:hover {
  background: var(--color-primary);
  color: var(--color-primary-on);
}

.home-footer-social svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 720px) {
  .home-footer-cta {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .home-footer-links {
    justify-content: center;
  }
}

/* Two-column content layout (aiondps_claude_design_pack prototype comparison, 2026-09-24) - see
   app.js renderHome's contentGrid. Each column stacks its two cards with normal section spacing
   (h2's own top margin), so no extra gap is needed between them here. */
.home-content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 20px;
}

.home-content-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.home-section-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 18px;
}

.home-section-card h2 {
  margin-top: 0;
}

/* Compact card size matching the prototype comparison's mini-grid, scoped to the homepage only -
   the instances/boss listing pages keep .poster-grid/.poster-card's normal, larger size. */
.home-section-card .poster-grid {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin: 0;
}

.home-section-card .poster-card {
  height: 130px;
  max-width: none;
}

@media (max-width: 720px) {
  .home-content-grid {
    grid-template-columns: 1fr;
  }

  .home-stats-card {
    flex-wrap: wrap;
    gap: 12px;
  }
}

/* Homepage "recent activity" feed (see app.js buildRecentActivitySection) - a real table with a
   header row now, matching the leaderboard table next to it; base table/th/td rules already cover
   borders and header color, this just adds the feed-specific bits. */
.activity-table {
  font-size: 13px;
}

.activity-row a {
  color: var(--color-primary);
  text-decoration: none;
}

.activity-row a:hover {
  text-decoration: underline;
}

.activity-time {
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* The installer's SHA-256 and the VirusTotal report under the download button. */
.download-copy { margin-left: 6px; padding: 2px 10px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 0.85em; cursor: pointer; }
.download-copy:hover { border-color: var(--color-primary); }

.download-meta {
  color: var(--color-text-muted);
  font-size: 12px;
}

.download-meta a {
  color: var(--color-text-muted);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin: 16px 0 24px;
}

.feature-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 14px;
}

.feature-card h3 {
  margin: 0 0 6px;
  font-size: 14px;
}

.feature-card p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 13px;
}

/* Search + category filter above the instance grid (aiondps_design_pack_v1 section 5) - client-side
   only (see app.js renderInstances/applyInstanceFilters), no refetch: the full list is already on
   the page. */
.instances-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 4px 0 16px;
}

.instance-search {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 7px 10px;
  min-width: 220px;
  flex: 1 1 220px;
  max-width: 320px;
}

.category-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.category-filter button {
  background: var(--color-surface);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 13px;
  cursor: pointer;
}

.category-filter button.active {
  color: var(--color-primary-on);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* Instance picker (#/) - per the user, real client loading-screen art per instance with the name
   overlaid in light text, 3-per-row on desktop. auto-fit/minmax (not a fixed repeat(3, ...) or a
   manual @media breakpoint) mirrors .feature-grid's existing pattern: 300px keeps exactly 3 columns
   at this page's real content width (1140px minus padding) while still collapsing gracefully on a
   narrow viewport. */
/* auto-fill with a fixed track size (not auto-fit with 1fr) plus justify-content:start - a short
   row (e.g. the homepage's 3-4 featured cards) stays left-aligned at its natural card width with
   real empty space after it, rather than a few 1fr tracks stretching to fill however wide the
   (now 1920px-capped, see --content-max-width) container is and spacing the cards far apart. */
.poster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 360px));
  justify-content: start;
  gap: 16px;
  margin: 12px 0 24px;
}

/* Setting `display` in author CSS defeats the UA stylesheet's own `[hidden] { display: none }` -
   needed explicitly here since applyInstanceFilters (app.js) hides a whole empty grid/card this
   way rather than removing it from the DOM. */
.poster-grid[hidden] {
  display: none;
}

/* max-width, not just the grid's own minmax(300px, 1fr): auto-fit gives a lone leftover card (an
   instance with only 1 boss so far, or a 4th instance wrapping to its own row) the ENTIRE row's
   free space via that 1fr, ballooning it far past the ~360px the track-sizing implies for a real
   3-per-row - fine for a landscape instance photo, but it stretched a boss's tall portrait render
   into an unrecognizable sliver (found by the user against a real single-boss instance page). */
.poster-card {
  display: block;
  position: relative;
  height: 200px;
  max-width: 360px;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.poster-card--no-photo {
  background: #0d151c;
}

.poster-card[hidden] {
  display: none;
}

.poster-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-card), 0 0 0 1px var(--glow-primary), 0 0 24px var(--glow-primary);
  transform: translateY(-2px);
}

/* No image mapped for this instance yet (see app.js's INSTANCE_IMAGES) - the card still works as a
   plain dark tile, same fallback spirit as icon()'s onerror removal elsewhere in this file. */
.poster-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.poster-card:hover .poster-photo {
  transform: scale(1.05);
}

.poster-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.82) 100%);
}

.poster-title {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* Cinematic hero above an instance's boss list (aiondps_design_pack_v1 section 6, boss-list
   variant) - same real-photo-or-nothing rule as .poster-card, just bigger and with the instance's
   real level/boss-count as pills instead of a card title. */
.instance-hero {
  position: relative;
  /* ~380 px at the 1872 px container width, scaling down on narrower screens so the photo keeps its shape */
  height: clamp(220px, 20vw, 380px);
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  margin-bottom: 20px;
}

/* Wide boss banners (1920x272): their own proportions, no zoom into the taller hero. */
.instance-hero--banner { height: auto; aspect-ratio: 1920 / 272; min-height: 150px; }

.instance-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.instance-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.85) 100%);
}

.instance-hero-content {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 16px;
}

.instance-hero-title {
  margin: 0 0 8px;
  font-size: 28px;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

/* Boss hero's link back to its instance (see app.js bossHero), sitting just above the title. */
.instance-hero-subtitle {
  display: inline-block;
  margin-bottom: 4px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: underline;
}

.instance-hero-meta {
  display: flex;
  gap: 8px;
}

.instance-hero-pill {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 13px;
  color: #fff;
}

/* KPI row (aiondps_design_pack_v1 section 8) above a boss leaderboard - only rendered once real
   stats exist (see app.js fightStatsRow: "empty beats wrong" applies here too). */
.stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 4px 0 20px;
}

.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 12px 18px;
  min-width: 120px;
}

.stat-card-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
}

.stat-card-label {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.stat-card-note {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
}

/* A partial fight (the recorder joined late): orange card in the stats row, orange pill in run lists. */
.stat-card.partial {
  background: rgba(255, 150, 40, 0.13);
  border-color: #ff9a28;
  box-shadow: 0 0 0 1px rgba(255, 154, 40, 0.25) inset;
}
.stat-card.partial .stat-card-value { color: #ff9a28; }
.stat-card.partial .stat-card-label { color: #ffb866; }
:root[data-theme="light"] .stat-card.partial { background: rgba(255, 150, 40, 0.16); }
:root[data-theme="light"] .stat-card.partial .stat-card-value { color: #c25e00; }
:root[data-theme="light"] .stat-card.partial .stat-card-label { color: #9a4a00; }
.partial-pill {
  display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 99px; white-space: nowrap; vertical-align: middle;
  font-size: 0.72rem; font-weight: 600; line-height: 1.5; border: 1px solid rgba(255, 154, 40, 0.55);
  color: #ffb866; background: rgba(255, 150, 40, 0.14);
}
:root[data-theme="light"] .partial-pill { color: #9a4a00; background: rgba(255, 150, 40, 0.18); border-color: rgba(194, 94, 0, 0.5); }

/* Icon tile at the right end of the stats row: compare with another run, tooltip bubble below. */
.stat-card.cmp-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  min-width: 66px;
  padding: 12px 0;
  margin-left: auto;
  color: var(--color-primary);
  text-decoration: none;
}
.cmp-tile:hover, .cmp-tile:focus-visible { border-color: var(--color-primary); background: var(--glow-primary); }
.cmp-tile::after {
  content: attr(aria-label);
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  z-index: 20;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #0b141b;
  color: #e8eef2;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
}
.cmp-tile::before {
  content: "";
  position: absolute;
  top: calc(100% + 4px);
  right: 26px;
  z-index: 21;
  width: 8px;
  height: 8px;
  background: #0b141b;
  border-left: 1px solid var(--color-border);
  border-top: 1px solid var(--color-border);
  transform: rotate(45deg);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
}
.cmp-tile:hover::after, .cmp-tile:hover::before, .cmp-tile:focus-visible::after, .cmp-tile:focus-visible::before { opacity: 1; }
@media (max-width: 600px) {
  .stat-card { min-width: 0; flex: 1 1 calc(50% - 6px); }
  .stat-card.cmp-tile { flex: 0 0 66px; }
}

.empty {
  color: var(--color-text-muted);
  font-style: italic;
}

.error {
  color: var(--color-danger);
}

.icon-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.class-icon,
.faction-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.skill-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 3px;
}

h3 .icon-label {
  gap: 8px;
}

/* Boss leaderboard's top 10 groups/solo rows, and an encounter's own roster - both render through
   the same rankedRow/rankedTable (see app.js), so one style covers both. */
.ranked-table td {
  vertical-align: middle;
}

/* A top-10-groups row's "Player" cell - every member's icon-label, not just one representative
   (see app.js groupPlayersCell). */
.group-players {
  display: flex;
  flex-wrap: wrap;
  row-gap: 4px;
  column-gap: 14px;
}

.buffs-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.buffs-row .icon-label {
  gap: 3px;
  font-size: 11px;
  color: var(--color-text-muted);
}

/* Encounter page (app.js renderEncounter): the roster/Aggro/Loot panels below its hero+stats-row
   sit in a 2-column grid, the Schaden/Heilung roster taking twice the width of the stacked Aggro
   + Loot column beside it; one column below the 720px breakpoint like every other grid here. */
.encounter-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  align-items: start;
}

.encounter-side-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (max-width: 720px) {
  .encounter-grid {
    grid-template-columns: 1fr;
  }
}

.meter-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 18px 20px;
}

.meter-panel-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.meter-panel-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.meter-panel-title {
  font-size: 17px;
  font-weight: 700;
}

.meter-panel-subtitle {
  font-size: 13px;
  color: var(--color-text-muted);
}

.meter-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.meter-list-compact {
  gap: 4px;
}

/* One ranked bar row (Schaden/Heilung roster, or the Aggro list) - the fill sits absolutely
   behind the row's content at a width set inline per row (see app.js meterRow/aggroPanel), same
   "background track + colored fill" idea as the old .contribution-track/-bar, just inlined as one
   row instead of a separate label-then-bar stack, and clickable through to that participant. */
.meter-row {
  position: relative;
  display: block;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-background);
  border: 1px solid transparent;
  color: inherit;
  text-decoration: none;
}

.meter-row:hover {
  border-color: var(--color-primary);
}

.meter-row-compact {
  height: 28px;
}

.meter-row-pet {
  opacity: 0.65;
}

.meter-row-fill {
  position: absolute;
  inset: 0;
  right: auto;
}

.meter-row-fill-danger {
  background: color-mix(in srgb, var(--color-danger) 30%, transparent);
}

.meter-row-content {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}

.meter-rank {
  width: 18px;
  flex-shrink: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-muted);
}

.meter-rank-top {
  color: var(--color-primary);
}

.meter-name {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.meter-row-compact .meter-name {
  font-size: 13px;
  font-weight: 500;
}

.meter-role-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
}

.meter-sub {
  margin-left: auto;
  padding-left: 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.meter-sub + .meter-value {
  margin-left: 0;
  min-width: 5.5em;
  text-align: right;
}

.meter-value {
  margin-left: auto;
  padding-left: 12px;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Privacy Policy / Terms of Service (see app.js renderLegalPage) - plain readable prose, no card
   chrome needed since it's just one long-form page. */
.legal-page {
  max-width: 46em;
}

.legal-intro {
  color: var(--color-text-muted);
  margin-bottom: 24px;
}

.legal-section {
  margin-bottom: 20px;
}

.legal-section h2 {
  font-size: 16px;
  margin: 0 0 6px;
}

.legal-section p {
  margin: 0;
}

/* ---- Homepage redesign (user's "Variante 2c", 2026-09-27): logo lockup, sun/moon theme switch,
   metal 3D buttons, glass content cards floating up into the hero artwork. ---- */

/* Wordmark: the AION DPS lettering generated in logo.png's own colors (cracked steel + lava),
   next to the unchanged emblem - same pair in the header and the footer. */
header .logo {
  filter: drop-shadow(0 0 6px rgba(255, 120, 40, 0.45));
}

header .site-title {
  line-height: 0;
}

header .wordmark {
  height: 34px;
  width: 66px; /* 186:96, same ratio as the footer lettering */
  flex: none;
  object-fit: contain;
  display: block;
}

/* Sun / moon pair replacing the old <select>. */
.theme-switcher {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--color-background);
  border: 1px solid var(--color-border);
}

.theme-button {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

.theme-button svg {
  width: 16px;
  height: 16px;
}

.theme-button.active {
  background: var(--color-primary);
  color: var(--color-primary-on);
}

.theme-button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Metal finish on the 3D buttons: a bright bevel on top running into the edge color at the
   bottom, uppercase tracking - the shape/press mechanics stay .btn's. */
.btn {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 14px;
  border-radius: 6px;
  background: linear-gradient(to bottom, #ffffff 0%, var(--btn-color-top) 18%, var(--btn-color-bottom) 55%, var(--btn-edge) 100%);
  box-shadow:
    0 3px 0 var(--btn-edge),
    0 8px 16px var(--btn-shadow),
    inset 0 2px 0 rgba(255, 255, 255, 0.8),
    inset 0 -3px 0 rgba(0, 0, 0, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.nav-download-link {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 12px;
  font-weight: 700;
  /* Fixed dark ink, not the first rule's var(--color-primary-on) - this gradient is always
     light-gold-topped regardless of theme (same reasoning as .btn-orange/.btn-blue below), so the
     text must stay fixed-dark too or it washes out against the light-mode primary swap. */
  color: #111827;
  background: linear-gradient(to bottom, #fff2b8 0%, var(--color-primary) 45%, #c98f14 100%);
  border: 1px solid #c98f14;
  box-shadow:
    0 2px 0 #c98f14,
    0 5px 10px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}


/* Both content cards reach 190px up into the hero artwork (the stats card hangs 80px above their
   top edge, see .home-stats-card). Glass: the artwork keeps showing through the frosted surface. */
.home-below-hero {
  position: relative;
  margin-top: 16px;
}

.home-content-grid {
  position: relative;
  z-index: 2;
}

.home-content-grid-single {
  grid-template-columns: 1fr;
}

.home-section-card {
  background: color-mix(in srgb, var(--color-surface) 76%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  padding: 20px 22px;
}

/* No card shadow in the light theme (the user, 2026-10-26): the homepage's two cards had their own, fixed one besides the --shadow-card token. */
:root[data-theme="light"] .home-section-card {
  box-shadow: none;
}

/* Heading + its small tag: Top players flush left, Recent activity mirrored flush right. */
.home-section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}

.home-section-head h2 {
  margin: 0;
  font-weight: 800;
}

.home-section-head-right {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

.home-section-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.home-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--color-success);
  box-shadow: 0 0 8px var(--color-success);
}

/* Narrow screens: no room for the overlap choreography - hero, stats and cards just stack. */
@media (max-width: 720px) {
  .home-stats-card {
    margin: 0 auto 16px;
  }

  .theme-switcher {
    width: auto;
    align-self: flex-start;
  }
}

/* Soft "aurora" glow bleeding out of the hero seam behind the glass cards (part of the chosen
   prototype). Paints inside the grid's own stacking context, i.e. above the hero, below the cards. */
.home-content-grid::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 360px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 40% 60% at 22% 20%, rgba(140, 120, 255, 0.22) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 78% 30%, rgba(80, 200, 255, 0.16) 0%, transparent 70%);
  filter: blur(30px);
}

/* Tables inside the homepage cards: small tracked uppercase column heads, hairline rows, links
   without underlines - the same treatment the prototype's tables had. */
.home-section-card th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: none;
  padding: 0 8px 8px;
}

.home-section-card td {
  padding: 7px 8px;
  border-bottom: none;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 7%, transparent);
}

.home-section-card td a {
  color: var(--color-primary);
  text-decoration: none;
}

.home-section-card td a:hover {
  text-decoration: underline;
}

/* Narrow screens: the three stat items stack, so the divider runs between rows, not beside them. */
@media (max-width: 720px) {
  .home-stat-item {
    width: 100%;
    padding: 12px 20px;
  }

  .home-stat-item:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }
}

/* ---- Player page (Aion 2): character strip + tabs (runs, equipment, skills, Daevanion boards) ---- */
.pf-hero {
  position: sticky;
  top: 0;
  z-index: 20;
  margin-bottom: 1rem;
}
.pf-strip {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 12px 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.pf-hero:has(.pf-tabs) .pf-strip {
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.pf-badge {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 2px solid var(--color-primary);
  border-radius: 10px;
  background: var(--color-surface2);
}
/* Portrait avatar: round, the face cropped from the bust; the class badge sits on its lower right corner. */
.pf-avatar {
  position: relative;
  flex: none;
  width: 68px;
  height: 68px;
}
.pf-avatar-pic {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, var(--color-surface2), var(--color-surface));
}
.pf-avatar-pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-2%, 8%) scale(1.9);
  transform-origin: 52% 42%;
}
.pf-avatar .pf-badge {
  position: absolute;
  right: -8px;
  bottom: -6px;
  width: 30px;
  height: 30px;
  border-width: 2px;
  border-radius: 8px;
  background: var(--color-surface);
}
.pf-avatar.failed {
  width: auto;
  height: auto;
}
.pf-avatar.failed .pf-avatar-pic {
  display: none;
}
.pf-avatar.failed .pf-badge {
  position: static;
  width: 52px;
  height: 52px;
  border-radius: 10px;
}
.pf-avatar .pf-badge img {
  max-width: 78%;
  max-height: 78%;
}
.pf-badge img,
.pf-center-badge img {
  max-width: 70%;
  max-height: 70%;
}
.pf-name {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.1;
}
.pf-sub {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}
.pf-sub.small {
  font-size: 0.8rem;
}
.pf-meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}
.pf-numbers {
  display: flex;
  gap: 26px;
  margin-left: auto;
}
.pf-numbers div {
  text-align: center;
}
.pf-numbers strong {
  display: block;
  font-size: 1.4rem;
  line-height: 1.1;
}
.pf-numbers strong.accent {
  color: var(--color-primary);
}
.pf-numbers span {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
/* Worn titles in the player strip; the colour follows the title's grade. */
.pf-titles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pf-title {
  --grade: var(--color-text-muted);
  padding: 4px 12px;
  border: 1px solid var(--grade);
  border-radius: 999px;
  background: color-mix(in srgb, var(--grade) 14%, transparent);
  color: var(--grade);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}
.pf-title.g-Rare { --grade: var(--color-success); }
.pf-title.g-Epic { --grade: #b48cff; }
.pf-title.g-Legend { --grade: var(--color-info); }
.pf-title.g-Unique { --grade: var(--color-warning); }
.pf-title.g-Special { --grade: var(--color-danger); }

/* Pet circles of the growth overview. */
.pf-pets {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-bottom: 18px;
}
.pf-pet {
  display: grid;
  justify-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.pf-pet svg {
  width: 96px;
  height: 96px;
}
.pf-pet-disc {
  fill: var(--color-surface);
  stroke: var(--color-border);
}
.pf-pet-glyph {
  fill: var(--color-text-muted);
}
.pf-pet-dot {
  fill: var(--color-border);
}
.pf-pet-dot.q1 { fill: #d9dde0; }
.pf-pet-dot.q2 { fill: #5bd36b; }
.pf-pet-dot.q3 { fill: #4aa8ff; }
.pf-pet-dot.q4 { fill: #ffc94d; }
.pf-pet-dot.q5 { fill: #ff8a3d; }

/* Another player's Daevanion boards (counts only). */
.pf-board-sum h4 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.pf-board-sum h4 em {
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text);
  font-weight: 600;
}
.pf-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--color-border);
  overflow: hidden;
}
.pf-bar i {
  display: block;
  height: 100%;
  background: var(--color-primary);
}
@media (max-width: 720px) {
  .pf-numbers {
    margin-left: 0;
    width: 100%;
    justify-content: space-between;
  }
  .pf-hero {
    position: static;
  }
}

/* Pill tabs directly under the strip. */
.pf-tabs {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 1px dashed var(--color-border);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow-x: auto;
}
.pf-tabs button {
  flex: 1 1 0;
  min-width: 120px;
  padding: 10px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.pf-tabs button:hover {
  background: var(--color-surface2);
  color: var(--color-text);
}
.pf-tabs button[aria-selected="true"] {
  background: var(--color-primary);
  color: var(--color-primary-on);
  box-shadow: 0 4px 18px var(--glow-primary);
}
.pf-tabs button small {
  margin-left: 8px;
  font-size: 0.75rem;
  opacity: 0.75;
}

.pf-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 16px;
  box-shadow: var(--shadow-card);
}
.pf-card h4 {
  margin: 0 0 12px;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Item / skill tile: the game's icon, or initials when there is none. */
.pf-ico {
  --ico-color: var(--color-border);
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: 9px;
  border: 2px solid var(--ico-color);
  /* The icon's transparent parts show the rarity colour, not the page blue. */
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--ico-color) 55%, #20170a), color-mix(in srgb, var(--ico-color) 22%, #0c0a08));
  overflow: hidden;
}
.pf-ico img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pf-ico.noimg {
  display: grid;
  place-items: center;
}
.pf-ico.noimg::before {
  content: attr(data-initials);
  font-weight: 700;
  color: var(--color-text-muted);
}
.pf-badge-num {
  position: absolute;
  right: 3px;
  bottom: 1px;
  font-size: 0.75rem;
  color: #fff;
  text-shadow: 0 1px 2px #000, 0 0 3px #000;
}
.pf-badge-num.bonus {
  color: #ffd66b;
}

/* Equipment: armor left, accessories right, character in the middle, weapons below. */
.pf-doll {
  display: grid;
  grid-template-columns: 1fr minmax(180px, 260px) 1fr;
  gap: 22px;
  align-items: start;
}
.pf-col {
  display: grid;
  gap: 10px;
}
/* Slot cards take the item's rarity colour (--ico-color) for border and background. */
.pf-slot {
  --ico-color: var(--color-border);
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 12px;
  align-items: center;
  padding: 6px 10px 6px 6px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--ico-color) 24%, var(--color-surface)), color-mix(in srgb, var(--ico-color) 7%, var(--color-surface)));
  border: 1px solid color-mix(in srgb, var(--ico-color) 65%, var(--color-border));
  border-radius: 10px;
}
.pf-slot:hover {
  border-color: var(--ico-color);
  box-shadow: 0 0 14px color-mix(in srgb, var(--ico-color) 35%, transparent);
}
.pf-tier {
  display: inline-block;
  margin-top: 2px;
  padding: 0 7px;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 999px;
  color: var(--ico-color);
  border: 1px solid color-mix(in srgb, var(--ico-color) 60%, transparent);
}
.pf-slot-name {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
}
.pf-slot-sub {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.pf-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px 12px;
  text-align: center;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 65%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}
.pf-center-badge {
  width: 110px;
  height: 140px;
  display: grid;
  place-items: center;
  border: 2px solid var(--color-primary);
  border-radius: 55px 55px 16px 16px;
  background: var(--color-surface2);
}
.pf-center-num {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary);
}
.pf-weapons {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}
@media (max-width: 980px) {
  .pf-doll {
    grid-template-columns: 1fr;
  }
}

/* Species knowledge. */
.pf-species {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  align-items: start;
}
.pf-species-col {
  display: grid;
  gap: 10px;
  justify-items: stretch;
}
.pf-species-col > .pf-pet {
  justify-self: center;
}
.pf-species-card h4 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.pf-species-card h4 em {
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text);
  font-weight: 600;
}
.pf-sp-sub {
  margin: 6px 0 0;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.pf-sp-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
.pf-sp-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px solid var(--color-border);
  font-size: 0.875rem;
}
.pf-sp-stat {
  color: var(--color-text-muted);
}
/* The effect names take the colour of their quality, as in the game's pet window. */
.pf-sp-stat.q1 { color: var(--color-text); }
.pf-sp-stat.q2 { color: #5bd36b; }
.pf-sp-stat.q3 { color: #4aa8ff; }
.pf-sp-stat.q4 { color: #ffc94d; }
.pf-sp-stat.q5 { color: #ff8a3d; }

/* Skills. */
.pf-skills {
  display: grid;
  grid-template-columns: repeat(var(--blocks, 2), minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.pf-skill-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px 8px;
}
@media (max-width: 1100px) {
  .pf-skills {
    grid-template-columns: 1fr;
  }
}
.pf-skill {
  text-align: center;
  font-size: 0.75rem;
}
.pf-skill .pf-ico {
  width: 64px;
  margin: 0 auto 6px;
}
.pf-skill-name {
  display: block;
  line-height: 1.2;
}
/* skill presets and specialisation stones (profile, skills tab) */
.pf-presets {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.pf-preset-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 10px;
}
.pf-preset-head h3 {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pf-preset-chip {
  padding: 2px 12px;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(240, 160, 48, 0.16);
  color: #c47a10;
  border: 1px solid rgba(240, 160, 48, 0.5);
}
.pf-preset-chip.on {
  background: #f0a030;
  color: #1a1204;
}
.pf-preset-seen {
  color: var(--color-text-muted);
  font-size: 0.8rem;
}
.pf-stones {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 5px;
}
.pf-stone {
  width: 17px;
  height: 17px;
  display: inline-grid;
  place-items: center;
  border-radius: 4px;
  box-sizing: border-box;
}
.pf-stone.empty {
  border: 1px dashed rgba(128, 138, 150, 0.6);
  width: 15px;
  height: 15px;
  margin: 1px;
}
.pf-stone.locked {
  background: rgba(128, 138, 150, 0.22);
  width: 15px;
  height: 15px;
  margin: 1px;
}
.pf-stone-img {
  display: block;
  object-fit: contain;
}
.pf-tip-bonus {
  color: #5bd36b;
}
.pf-tip-stonehead {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pf-slot-boxes {
  display: flex;
  gap: 6px;
  margin: 6px 0 10px;
}
.pf-slot-box {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: #111316;
  border: 1px solid #2c3036;
}
.pf-spec-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: #2a8d8d;
}
.pf-spec-row.on {
  color: #5ff2f2;
  font-weight: 700;
}
.pf-spec-row.gold.on {
  color: #ffd66b;
}
.pf-spec-row.gold.off {
  color: #7a6a44;
}
.pf-spec-text {
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}
.pf-eff {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
}
.pf-eff img {
  display: block;
}
.pf-spec-row.off .pf-eff img {
  filter: grayscale(0.7) brightness(0.55);
}
.pf-eff b {
  position: absolute;
  font-size: 0.7rem;
  color: #e8e0cf;
  text-shadow: 0 0 3px #000;
}
.pf-spec-lock {
  flex: none;
  opacity: 0.8;
}
.pf-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
}
.pf-dot.active {
  background: #f0a030;
}
.pf-dot.passive {
  background: #3fcf55;
}
.pf-dot.stigma {
  background: #f0a030;
}
.pf-key {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.pf-key.bonus {
  background: #ffd66b;
}

/* Daevanion boards: pill tabs, then the board as large as the page allows. */
.pf-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.pf-pill {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 8px 14px;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}
.pf-pill[aria-selected="true"] {
  border-color: var(--color-info);
  color: var(--color-info);
  background: color-mix(in srgb, var(--color-info) 10%, var(--color-surface));
}
.pf-panel {
  margin-bottom: 1rem;
}
.pf-board-wrap {
  max-width: 1000px;
  margin: 0 auto;
}
.pf-board {
  display: grid;
  grid-template-columns: repeat(var(--cols, 11), minmax(0, 1fr));
  gap: 6px;
  padding: 14px;
  background: color-mix(in srgb, var(--color-background) 70%, #000);
  border: 1px solid var(--color-border);
  border-radius: 12px;
}
.pf-cell {
  position: relative;
  display: block;
  aspect-ratio: 1;
  min-width: 0;
}
.pf-cell.empty {
  visibility: hidden;
}
.pf-cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pf-cell.on {
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--color-primary) 30%, transparent));
}
.pf-cell:hover {
  filter: brightness(1.25);
}

/* Tooltip (items, skills, board nodes). */
.pf-tip {
  position: fixed;
  z-index: 100;
  pointer-events: none;
  width: 260px;
  background: #1a1d22;
  color: #e9ecef;
  border: 1px solid #3b4047;
  border-radius: 6px;
  font-size: 0.85rem;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
}
.pf-tip[hidden] {
  display: none;
}
.pf-tip-head {
  --ico-color: #3b4047;
  padding: 12px 14px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--ico-color) 45%, #1a1d22), #1a1d22 80%);
  border-bottom: 2px solid var(--ico-color);
}
.pf-tip-title {
  font-size: 1rem;
  font-weight: 700;
}
.pf-tip-sub {
  font-size: 0.8rem;
  margin-top: 2px;
}
.pf-tip-il {
  margin-top: 6px;
  font-weight: 600;
}
.pf-tip-sec {
  padding: 8px 14px 10px;
  border-top: 1px solid #2c3036;
}
.pf-tip-sec-title {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9aa3ad;
  margin-bottom: 4px;
}
.pf-tip-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 1px 0;
}
.pf-tip-stone.q0,
.pf-tip-stone.q1 { color: #d9dde0; }
.pf-tip-stone.q2 { color: #5bd36b; }
.pf-tip-stone.q3 { color: #4aa8ff; }
.pf-tip-stone.q4 { color: #ffc94d; }
.pf-tip-stone.empty { color: #6c747d; font-style: italic; }
.profile-source {
  color: var(--color-text-muted);
  font-size: 0.8em;
  margin: 0.5rem 0 0;
}
.profile-section > summary {
  cursor: pointer;
  font-weight: 600;
  margin: 0.6rem 0 0.3rem;
}

.site-disclaimer {
  max-width: 900px;
  margin: 12px auto 24px;
  padding: 0 16px;
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.4;
  opacity: 0.6;
}

/* Download page: the header link and the footer button step back so the page's own gold download
   button is the only thing that stands out. Both take the theme's surface colours, so dark and
   light mode each get a quiet button close to their own background. Scoped by the page's hero. */
body:has(.dl-page) .nav-download-link,
#app:has(.dl-page) .btn-gold {
  --btn-color-top: color-mix(in srgb, #c4932f 34%, var(--color-surface));
  --btn-color-bottom: color-mix(in srgb, #c4932f 20%, var(--color-surface));
  --btn-edge: transparent;
  --btn-shadow: transparent;
  --btn-rim: transparent;
  --btn-glow: transparent;
  color: color-mix(in srgb, #e2b457 82%, var(--color-text));
  background: linear-gradient(to bottom, var(--btn-color-top), var(--btn-color-bottom));
  border-color: color-mix(in srgb, #c4932f 50%, transparent);
  box-shadow: none;
  text-shadow: none;
}

body:has(.dl-page) .nav-download-link:hover,
#app:has(.dl-page) .btn-gold:hover {
  color: #f3d58c;
  box-shadow: none;
}

/* Footer button on the download page: flat, no gloss and no pressable bottom edge. */
#app:has(.dl-page) .btn-gold::before,
#app:has(.dl-page) .btn-gold::after {
  display: none;
}

#app:has(.dl-page) .btn-gold,
#app:has(.dl-page) .btn-gold:hover,
#app:has(.dl-page) .btn-gold:active {
  transform: none;
  filter: none;
  box-shadow: none;
}

/* Profile mark behind a player's name: opens that player's character profile. A round plate with a coloured rim so it
   reads on every class-coloured bar: gold and filled = uploaded by the player himself, blue = seen on another player's
   client; the green dot in the corner = NC's official character page added data. No profile, no mark. */
.profile-link {
  --pf-plate: #12171c;
  --pf-own: #f2b52e;
  --pf-seen: #3fb6e8;
  --pf-nc: #4cdc8a;
  position: relative;
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--pf-plate);
  box-shadow: 0 0 0 2px var(--pf-plate);
  color: var(--color-text-muted);
  border: 1.5px solid currentColor;
  vertical-align: middle;
  cursor: pointer;
  flex: none;
}

:root[data-theme="light"] .profile-link { --pf-plate: #ffffff; --pf-own: #c98a00; --pf-seen: #1a8fc4; --pf-nc: #1fae66; }

.profile-link.pf-self { color: var(--pf-own); }
.profile-link.pf-self svg { fill: currentColor; }
.profile-link.pf-seen { color: var(--pf-seen); }

.profile-link svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.2;
}

.profile-link .pf-nc {
  position: absolute;
  top: -4px;
  right: -4px;
  box-sizing: content-box;
  width: 7px;
  height: 7px;
  border: 2px solid var(--pf-plate);
  border-radius: 50%;
  background: var(--pf-nc);
}

.profile-link:hover,
.profile-link:focus-visible {
  filter: brightness(1.25);
}

/* ---- Group leaderboard: podium cards + compact rows ---- */
.lb-emblem { width: 34px; height: 34px; object-fit: contain; }
.lb-emblem.sm { width: 26px; height: 26px; }
.lb-bar { display: flex; align-items: center; gap: 10px; margin: 6px 0 14px; }
.lb-bar-label { font-size: 0.8rem; color: var(--color-text-muted); }
.lb-seg { display: inline-flex; border: 1px solid var(--color-border); border-radius: 999px; overflow: hidden; background: var(--color-surface); }
.lb-seg button { border: 0; background: none; color: var(--color-text-muted); font: inherit; font-size: 0.85rem; padding: 6px 14px; cursor: pointer; }
.lb-seg button[aria-selected="true"] { background: var(--color-primary); color: var(--color-primary-on); font-weight: 600; }
.lb-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.lb-card { position: relative; overflow: hidden; padding: 16px 18px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.lb-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--medal); }
.lb-card-head { display: flex; align-items: baseline; gap: 10px; }
.lb-rank { font-size: 2rem; line-height: 1; color: var(--medal); }
.lb-card-head a { color: var(--color-text-muted); font-size: 0.85rem; }
.lb-big { margin-left: auto; text-align: right; }
.lb-big strong { display: block; font-size: 1.9rem; line-height: 1; font-variant-numeric: tabular-nums; }
.lb-big span { font-size: 0.75rem; color: var(--color-text-muted); }
.lb-meta { display: flex; gap: 14px; flex-wrap: wrap; margin: 10px 0 12px; font-size: 0.85rem; color: var(--color-text-muted); }
.lb-meta b { color: var(--color-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.lb-chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.lb-chip { text-align: center; padding: 8px 4px 6px; border-radius: 10px; color: var(--color-text); text-decoration: none; border: 1px solid color-mix(in srgb, var(--cc) 30%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--cc) 20%, transparent), color-mix(in srgb, var(--cc) 6%, transparent)); }
.lb-chip:hover { border-color: var(--cc); }
.lb-emblem.tinted { filter: var(--tint); }
.lb-chip .lb-emblem { width: 40px; height: 40px; }
.lb-name { display: block; font-size: 0.72rem; line-height: 1.15; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-rest { display: grid; gap: 8px; }
/* Whole block opens the run: the date link is stretched over the card/row, player links stay clickable above it. */
.lb-row { position: relative; }
.lb-open::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.lb-card:hover, .lb-row:hover { border-color: var(--color-primary); }
.lb-card:has(.lb-open), .lb-row:has(.lb-open) { cursor: pointer; }
.lb-chip, .lb-names a { position: relative; z-index: 1; }
.lb-row { display: grid; grid-template-columns: 44px 150px minmax(0, 1fr) 190px 130px; gap: 14px; align-items: center; padding: 10px 16px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.lb-rank-small { font-size: 1.1rem; font-weight: 700; color: var(--color-text-muted); }
.lb-strip { display: flex; gap: 4px; align-items: center; }
.lb-names { font-size: 0.85rem; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-names a { color: inherit; }
.lb-score b { font-variant-numeric: tabular-nums; }
.lb-score small, .lb-score small a { font-size: 0.78rem; color: var(--color-text-muted); white-space: nowrap; text-decoration: none; }
.lb-totals { text-align: right; font-size: 0.82rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .lb-podium { grid-template-columns: 1fr; }
  .lb-row { grid-template-columns: 36px 1fr 100px; }
  .lb-names, .lb-strip, .lb-totals { display: none; }
}

/* ---- Homepage: top players and recent runs as cards (class emblems, medals, run photos) ---- */
.hp-list { display: grid; gap: 8px; }
.hp-prow { display: grid; grid-template-columns: 30px 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; position: relative; overflow: hidden; padding: 8px 14px; border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--color-surface2) 45%, transparent); color: var(--color-text); text-decoration: none; }
.hp-prow .hp-fill { background: var(--cc); }
.hp-prow:hover, .hp-run:hover { border-color: var(--color-primary); }
.hp-rank { font-size: 1.3rem; font-weight: 700; color: var(--medal, var(--color-text-muted)); text-align: center; }
.hp-prow .lb-emblem { width: 40px; height: 40px; }
.hp-who b { display: block; }
.hp-who > span { display: block; font-size: 0.78rem; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-score { text-align: right; }
.hp-score b { display: block; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.hp-score span { font-size: 0.72rem; color: var(--color-text-muted); }
.hp-fill { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--color-primary); opacity: 0.8; }
.hp-run { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 12px; align-items: stretch; overflow: hidden; min-height: 58px; border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--color-surface2) 45%, transparent); color: var(--color-text); text-decoration: none; }
.hp-thumb { position: relative; background-size: cover; background-position: center; background-color: var(--color-surface2); }
.hp-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 45%, color-mix(in srgb, var(--color-surface) 90%, transparent)); }
.hp-run-mid { align-self: center; min-width: 0; padding: 6px 0; }
.hp-run-mid b { display: block; line-height: 1.2; }
.hp-run-sub { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 0.78rem; color: var(--color-text-muted); }
.hp-run-sub .lb-emblem.sm { width: 18px; height: 18px; }
.hp-run-score { align-self: center; padding-right: 14px; text-align: right; }
.hp-run-score b { display: block; font-size: 1.15rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hp-run-score span { font-size: 0.7rem; color: var(--color-text-muted); }

/* ---- Participant page (one player in one fight): hero, key figures, ranked skill rows ---- */
.pt-hero { display: flex; gap: 20px; align-items: center; padding: 22px; border-radius: 16px; border: 1px solid var(--color-border); background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 14%, var(--color-surface)), var(--color-surface) 60%); }
.pt-emb { flex: none; width: 84px; height: 84px; border-radius: 50%; border: 3px solid var(--color-primary); background: #0b1218; display: grid; place-items: center; overflow: hidden; }
.pt-emb img { width: 100%; height: 100%; object-fit: contain; }
.pt-hero h2 { margin: 0; font-size: 30px; }
.pt-sub { color: var(--color-text-muted); margin-top: 2px; }
.pt-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.pt-tag { display: inline-flex; gap: 6px; align-items: center; padding: 3px 10px; border-radius: 99px; background: var(--color-surface2); border: 1px solid var(--color-border); font-size: 13px; }
.pt-tag img { width: 16px; height: 16px; }
.pt-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 16px 0 10px; }
.pt-kpi { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 14px 16px; }
.pt-kpi small { color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; }
.pt-kpi b { display: block; font-size: 26px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.pt-kpi b.accent { color: var(--color-primary); }
.pt-kpi b.heal { color: var(--color-success); }
.pt-h { display: flex; align-items: center; gap: 10px; font-size: 18px; margin: 26px 0 12px; }
.pt-h::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--color-primary); }
.pt-h.heal::before { background: var(--color-success); }
.pt-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 14px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); margin-bottom: 8px; }
.pt-row:hover { border-color: var(--color-primary); }
.pt-ico { width: 44px; height: 44px; border-radius: 9px; border: 1px solid var(--color-border); background: var(--color-surface2); display: grid; place-items: center; overflow: hidden; color: var(--color-text-muted); font-weight: 700; font-size: 13px; }
.pt-ico img { width: 100%; height: 100%; display: block; }
.pt-name { display: flex; justify-content: space-between; gap: 10px; font-weight: 600; }
.pt-share, .pt-total { font-variant-numeric: tabular-nums; }
.pt-bar { height: 8px; border-radius: 99px; background: var(--color-surface2); margin: 7px 0 5px; overflow: hidden; }
.pt-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 55%, #ff6a3d)); }
.pt-bar.heal i { background: linear-gradient(90deg, var(--color-success), color-mix(in srgb, var(--color-success) 60%, var(--color-info))); }
.pt-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--color-text-muted); }
.pt-total { font-size: 18px; font-weight: 700; text-align: right; }
@media (max-width: 600px) { .pt-hero { flex-direction: column; align-items: flex-start; } .pt-row { grid-template-columns: 44px minmax(0, 1fr); } .pt-total { grid-column: 1 / -1; text-align: left; } }

/* ---- Comparisons (runs / players) ---- */
.cmp-cta { margin: 4px 0 18px; }
.cmp-cta { display: flex; flex-wrap: wrap; gap: 8px; }
.cmp-btn { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border: 1px solid var(--color-border); border-radius: 99px; background: transparent; color: var(--color-text); font-size: 13px; font-weight: 600; text-decoration: none; }
.cmp-btn:hover, .cmp-btn:focus-visible { border-color: var(--color-primary); color: var(--color-primary); background: var(--glow-primary); }
.cmp-actions { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 6px 0 14px; }
.cmp-steps { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 14px; }
.cmp-steps li { padding: 4px 12px; border: 1px solid var(--color-border); border-radius: 999px; font-size: 13px; color: var(--color-text-muted); }
.cmp-steps li.done { color: var(--color-text); }
.cmp-steps li.active { color: var(--color-primary-on); background: var(--color-primary); border-color: var(--color-primary); }
.cmp-pick-list { display: grid; gap: 8px; margin: 12px 0 24px; }
.cmp-pick { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr) auto; align-items: center; gap: 12px; padding: 10px 14px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); color: var(--color-text); text-decoration: none; }
.cmp-pick:hover { border-color: var(--color-primary); }
.cmp-pick-main { font-weight: 600; }
.cmp-pick-sub { color: var(--color-text-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-pick-value { font-weight: 700; color: var(--color-primary); white-space: nowrap; }
.cmp-mine { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.cmp-mem { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px 2px 6px; border: 1px solid var(--color-primary); border-radius: 99px; background: var(--glow-primary); color: var(--color-text); font: inherit; font-size: 13px; cursor: default; }
button.cmp-mem { cursor: pointer; }
.cmp-mem.on { background: var(--color-primary); color: var(--color-primary-on); }
.cmp-mem.other { border-color: var(--color-border); background: var(--color-surface2); color: var(--color-text); }
.cmp-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18); }
.cmp-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.cmp-chip { padding: 6px 14px; border: 1px solid var(--color-border); border-radius: 99px; background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 14px; cursor: pointer; }
.cmp-chip:hover { border-color: var(--color-primary); }
.cmp-chip.on { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-on); font-weight: 700; }
.cmp-search { width: 300px; max-width: 100%; padding: 7px 12px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface2); color: var(--color-text); font: inherit; font-size: 14px; }
.cmp-sort-label { margin-left: auto; color: var(--color-text-muted); font-size: 13px; }
.cmp-run-cols, .cmp-run-head { display: grid; grid-template-columns: 205px 100px 120px 64px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.cmp-run-cols { padding: 0 14px 6px; color: var(--color-text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.cmp-run-list { display: grid; gap: 6px; }
.cmp-run { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.cmp-run:hover { border-color: var(--color-primary); }
.cmp-run-head { padding: 10px 14px; }
.cmp-run-date { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; font-weight: 600; white-space: nowrap; }
.cmp-run-idps { font-weight: 700; color: var(--color-primary); }
.cmp-run-dur { color: var(--color-text-muted); }
.cmp-up { color: var(--color-success); font-weight: 700; }
.cmp-down { color: var(--color-danger); font-weight: 700; }
.cmp-mode { color: var(--color-text-muted); border-color: var(--color-border); }
.cmp-run-members { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.cmp-overlap { padding: 1px 8px; border: 1px solid var(--color-border); border-radius: 99px; color: var(--color-text-muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.cmp-overlap.same { color: var(--color-success); border-color: var(--color-success); }
.cmp-run-actions { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.cmp-toggle { border: 0; background: transparent; color: var(--color-text-muted); font-size: 16px; cursor: pointer; padding: 2px 6px; }
.cmp-toggle:hover { color: var(--color-primary); }
.cmp-run-detail { padding: 4px 14px 14px; border-top: 1px solid var(--color-border); }
.cmp-detail-title { margin: 10px 0 8px; color: var(--color-text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.cmp-detail-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.cmp-detail-card { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; background: var(--color-surface2); outline: 1px solid var(--color-primary); }
.cmp-detail-card.other { outline: none; opacity: 0.8; }
.cmp-detail-name { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.cmp-detail-card small { color: var(--color-text-muted); }
.cmp-detail-card strong { color: var(--color-primary); }
.cmp-count { margin: 10px 0 24px; color: var(--color-text-muted); font-size: 13px; }
.cmp-table { width: 100%; margin: 8px 0 20px; }
.cmp-table td, .cmp-table th { text-align: left; }
.cmp-head { display: flex; flex-direction: column; gap: 2px; }
.cmp-head a { font-size: 12px; font-weight: 400; }
.cmp-win { color: var(--color-primary); font-weight: 700; }
.cmp-delta { color: var(--color-text-muted); }
.cmp-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 800px) {
  .cmp-columns { grid-template-columns: minmax(0, 1fr); }
  .cmp-pick { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cmp-run-cols { display: none; }
  .cmp-run-head { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .cmp-run-actions { justify-content: flex-start; }
  .cmp-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pt-hero h2 a { color: inherit; text-decoration: none; }
.pt-hero h2 a:hover { color: var(--color-primary); }
.pt-hero h2 .profile-link { width: 26px; height: 26px; margin-left: 10px; }
.pt-hero h2 .profile-link svg { width: 15px; height: 15px; }
/* Participant page: player card on the left, skill tables on the right; both columns start with a heading row so the blocks line up. */
.pt-lay { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 18px; align-items: start; }
.pt-sidecol { position: sticky; top: 12px; }
.pt-lh, .pt-mh { display: flex; align-items: center; justify-content: space-between; min-height: 34px; margin: 0 0 10px; font-size: 18px; font-weight: 700; }
.pt-mh.heal { color: var(--color-success); margin-top: 22px; }
.pt-side { display: flex; flex-direction: column; gap: 14px; padding: 22px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.pt-side .pt-emb { width: 110px; height: 110px; align-self: center; }
.pt-side h2 { margin: 0; text-align: center; font-size: 28px; }
.pt-side .pt-tags { justify-content: center; margin: 0; }
.pt-side .pt-sub { text-align: center; font-size: 13px; margin: 0; }
.pt-side .pt-sk { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--color-border); }
.pt-side .pt-sk span { color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; }
.pt-side .pt-sk b { font-size: 22px; font-variant-numeric: tabular-nums; }
.pt-side .pt-sk b.accent { color: var(--color-primary); }
.pt-side .pt-sk b.heal { color: var(--color-success); }
.pt-side .pt-cmp { justify-content: center; min-height: 46px; width: 100%; color: var(--color-primary); }
.pt-side h2 .profile-link { width: 26px; height: 26px; margin-left: 10px; }
.pt-side h2 .profile-link svg { width: 15px; height: 15px; }
.pt-tbl { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 6px 0; }
.pt-tr { display: grid; grid-template-columns: 44px minmax(180px, 1.2fr) 64px 60px 80px 80px 70px minmax(120px, 1fr) 100px; gap: 12px; align-items: center; padding: 7px 18px; }
.pt-tr.pt-th { color: var(--color-text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--color-border); }
.pt-tr:not(.pt-th):nth-child(even) { background: rgba(255, 255, 255, 0.025); }
.pt-tr:not(.pt-th):hover { background: var(--glow-primary); }
.pt-tr .num { text-align: right; font-variant-numeric: tabular-nums; }
.pt-tr .pt-bar { margin: 0; }
.pt-tr .pt-ico { width: 40px; height: 40px; }
@media (max-width: 1100px) {
  .pt-lay { grid-template-columns: minmax(0, 1fr); }
  .pt-sidecol { position: static; }
  .pt-tbl { overflow-x: auto; }
  .pt-tr { min-width: 760px; }
}
.class-emblem { width: 24px; height: 24px; vertical-align: middle; flex: none; }
.cmp-skill { display: inline-flex; align-items: center; gap: 10px; }
.cmp-skill .pf-ico { width: 32px; height: 32px; flex: none; }

/* ---- Group shields: hatched blue section behind the damage that got through, and the caster cards ---- */
.meter-row-fill-shield { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, var(--color-info) 0 6px, color-mix(in srgb, var(--color-info) 55%, #ffffff) 6px 9px); opacity: 0.75; }
.shield-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: 12.5px; color: var(--color-text-muted); }
.shield-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -2px; }
.sl-taken { background: var(--color-danger); }
.sl-shield { background: repeating-linear-gradient(135deg, var(--color-info) 0 3px, color-mix(in srgb, var(--color-info) 55%, #ffffff) 3px 5px); }
.shield-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 14px; }
.shield-card { border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface2); padding: 12px 14px; }
.shield-card-head { display: flex; align-items: center; gap: 10px; }
.shield-card-sum { font-size: 24px; font-weight: 700; color: var(--color-info); font-variant-numeric: tabular-nums; margin: 6px 0; }
.shield-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.shield-card li { display: flex; justify-content: space-between; gap: 10px; }
.shield-card li span:first-child { color: var(--color-text-muted); }

/* ---- Instances page: category tabs, expedition normal/hard switch, Nightmare boss tree (laid out for 1920x1080) ---- */
.ip-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 22px; }
.ip-tab { text-decoration: none; font: inherit; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 99px; padding: 8px 18px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
.ip-tab small { color: var(--color-text-muted); }
.ip-tab:hover { border-color: var(--color-primary); }
.ip-tab[aria-pressed="true"] { background: var(--color-primary); border-color: var(--color-primary); color: #1a1205; font-weight: 700; }
.ip-tab[aria-pressed="true"] small { color: #3a2a08; }
.ip-seg { display: inline-flex; border: 1px solid var(--color-border); border-radius: 99px; overflow: hidden; margin: 0 0 16px; }
.ip-seg button { font: inherit; background: transparent; color: var(--color-text); border: 0; padding: 7px 18px; cursor: pointer; }
.ip-seg button[aria-pressed="true"] { background: var(--color-surface2); font-weight: 700; color: var(--color-primary); }
.ip-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1100px) { .ip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .ip-grid { grid-template-columns: 1fr; } }
.ip-card { position: relative; height: 260px; border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--color-border); background: #0d151c; display: block; color: #fff; text-decoration: none; box-shadow: var(--shadow-card); transition: border-color 0.15s ease, transform 0.15s ease; }
.ip-card:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.ip-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease; }
.ip-card:hover .ip-photo { transform: scale(1.05); }
.ip-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6, 10, 14, 0.92), rgba(6, 10, 14, 0) 62%); }
.ip-text { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; }
.ip-text b { display: block; font-size: 17px; }
.ip-meta, .ip-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; font-size: 12px; }
.ip-pill { background: rgba(255, 255, 255, 0.14); border-radius: 99px; padding: 1px 8px; color: #c9d6de; }
.ip-chip { border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 6px; padding: 1px 8px; color: #fff; }
.ip-nightmare { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 28px; align-items: start; }
.ip-tree { display: grid; grid-template-columns: minmax(0, 1.15fr) 110px minmax(0, 1fr) 110px minmax(0, 1fr); grid-template-rows: repeat(4, 96px); gap: 14px 0; align-items: center; }
.ip-node { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 170px; align-items: center; height: 84px; border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 6px; overflow: hidden; cursor: pointer; color: var(--color-text); text-align: left; font: inherit; padding: 0; }
.ip-node:hover { border-color: var(--color-primary); }
.ip-node-text { padding: 0 14px; min-width: 0; }
.ip-node small { display: block; color: var(--color-text-muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ip-node b { display: block; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ip-node-pt { height: 100%; background-size: auto 100%; background-repeat: no-repeat; background-position: 64% center; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); }
.ip-node.active { border-color: #9fd2ff; box-shadow: 0 0 0 2px rgba(159, 210, 255, 0.55), 0 0 22px rgba(120, 190, 255, 0.35); }
.ip-node.a1 { grid-column: 1; grid-row: 1; } .ip-node.a2 { grid-column: 1; grid-row: 2; }
.ip-node.b1 { grid-column: 1; grid-row: 3; } .ip-node.b2 { grid-column: 1; grid-row: 4; }
.ip-node.n1 { grid-column: 3; grid-row: 1 / 3; } .ip-node.n2 { grid-column: 3; grid-row: 3 / 5; } .ip-node.z { grid-column: 5; grid-row: 2 / 4; }
.ip-lines { grid-row: 1 / 5; width: 100%; height: 100%; color: var(--color-border); }
.ip-lines.l1 { grid-column: 2; } .ip-lines.l2 { grid-column: 4; }
.ip-detail { border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); padding: 18px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.ip-detail h3 { margin: 0; font-size: 22px; }
.ip-loc { color: var(--color-text-muted); font-size: 13px; }
.ip-challenge { color: var(--color-text-muted); font-size: 13px; }
.ip-lvls { display: flex; gap: 6px; flex-wrap: wrap; }
.ip-lvl { font: inherit; color: var(--color-text); background: transparent; width: 40px; height: 34px; border: 1px solid var(--color-border); border-radius: 6px; font-weight: 600; cursor: pointer; }
.ip-lvl:hover { border-color: var(--color-primary); }
.ip-lvl.sel { outline: 2px solid #9fd2ff; outline-offset: 1px; box-shadow: 0 0 14px rgba(120, 190, 255, 0.45); }
.ip-stats { border-top: 1px solid var(--color-border); padding-top: 10px; display: grid; gap: 6px; font-size: 14px; }
.ip-stats h4 { margin: 0; font-size: 15px; }
.ip-hint { margin: 0; color: var(--color-text-muted); }
.ip-row { display: flex; justify-content: space-between; gap: 10px; }
.ip-row span { color: var(--color-text-muted); }
.ip-open { margin-top: 4px; display: inline-block; text-align: center; border: 1px solid var(--color-primary); color: var(--color-primary); border-radius: 99px; padding: 6px 14px; text-decoration: none; font-size: 13px; }
.ip-open:hover { background: var(--glow-primary); }
@media (max-width: 1000px) {
  .ip-nightmare { grid-template-columns: 1fr; }
  .ip-tree { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 8px; }
  .ip-tree > * { grid-column: 1 !important; grid-row: auto !important; }
  .ip-lines { display: none; }
}
/* difficulty steps on a boss page */
.mode-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 14px 0; }
.mode-chips > span { color: var(--color-text-muted); font-size: 13px; }
.mode-chip { border: 1px solid var(--color-border); border-radius: 99px; padding: 5px 14px; color: var(--color-text); text-decoration: none; font-size: 13px; }
.mode-chip small { color: var(--color-text-muted); margin-left: 6px; }
.mode-chip:hover { border-color: var(--color-primary); }
.mode-chip.active { background: var(--color-primary); border-color: var(--color-primary); color: #1a1205; font-weight: 700; }
.mode-chip.active small { color: #3a2a08; }
.ip-seg-step { margin-left: 10px; }
.ip-seg a { font: inherit; background: transparent; color: var(--color-text); border: 0; padding: 7px 18px; text-decoration: none; display: inline-block; }
.ip-seg a[aria-pressed="true"] { background: var(--color-surface2); font-weight: 700; color: var(--color-primary); }

/* Feedback link in the header (left of the theme switch) and the /feedback form page. */
.nav-feedback-link {
  color: var(--color-text);
  border: 1px solid var(--color-border, currentColor);
  font-size: 13px;
  padding: 5px 11px;
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
}
.nav-feedback-link:hover { border-color: var(--color-primary); color: var(--color-primary); }
/* Plain text links in the header (Legions, Statistics) next to the feedback button. */
/* Main navigation: rounded tabs, the current page in gold; a thin divider sits between the meter pages and the game information. */
.nav-main { display: flex; align-items: center; gap: 4px; }
.nav-text-link {
  color: var(--color-text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  padding: 7px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: background .15s, color .15s, border-color .15s;
}
.nav-text-link:hover { background: var(--color-surface2); }
.nav-text-link.active { color: #ffd98a; background: color-mix(in srgb, #e2b457 16%, transparent); border-color: color-mix(in srgb, #e2b457 45%, transparent); }
:root[data-theme="light"] .nav-text-link.active { color: #7a4f06; background: color-mix(in srgb, #c4932f 18%, transparent); border-color: color-mix(in srgb, #c4932f 55%, transparent); }
.nav-sep { width: 1px; height: 22px; background: var(--color-border); margin: 0 6px; }
.nav-feedback-link { border-radius: 999px; padding: 6px 14px; }
@media (max-width: 720px) {
  .nav-main { flex-direction: column; align-items: stretch; gap: 4px; }
  .nav-text-link { text-align: center; padding: 9px 14px; }
  .nav-sep { width: auto; height: 1px; margin: 4px 0; }
}
.feedback-page { max-width: 760px; margin: 0 auto; }
.feedback-form { display: grid; gap: 14px; margin-top: 16px; }
.feedback-field { display: grid; gap: 4px; }
.feedback-label { font-size: 12px; font-weight: 600; opacity: 0.8; }
.feedback-field small { opacity: 0.7; }
.feedback-field input, .feedback-field select, .feedback-field textarea {
  font: inherit; color: inherit; background: transparent;
  border: 1px solid var(--color-border, rgba(128, 128, 128, 0.5)); border-radius: 4px; padding: 8px 10px;
}
.dropdown { position: relative; }
.dropdown-button {
  width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  border: 1px solid var(--color-border); border-radius: 4px; padding: 8px 34px 8px 10px;
  background: var(--color-surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%2371828d' stroke-width='2'/></svg>") no-repeat right 12px center;
}
.dropdown-button:hover, .dropdown-button[aria-expanded="true"] { border-color: var(--color-primary); }
.dropdown-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; margin: 0; padding: 4px; list-style: none;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.dropdown-list[hidden] { display: none; }
.dropdown-list li { padding: 8px 10px; border-radius: 4px; cursor: pointer; color: var(--color-text); }
.dropdown-list li:hover, .dropdown-list li:focus { background: var(--color-primary); color: var(--color-primary-on); outline: none; }
.dropdown-list li[aria-selected="true"] { font-weight: 600; }
.feedback-trap { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.feedback-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.feedback-send {
  font: inherit; font-weight: 600; cursor: pointer; border: 0; border-radius: 4px; padding: 8px 20px;
  color: var(--color-primary-on); background: var(--color-primary);
}
.feedback-send:disabled { opacity: 0.6; cursor: default; }
.feedback-status.error { color: #e5484d; }
.feedback-status.ok { font-weight: 600; }

/* Nightmare step pill on the start page's recent runs. */
.hp-run-mid b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.diff-pill {
  display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 99px; white-space: nowrap; vertical-align: middle;
  font-size: 0.72rem; font-weight: 600; line-height: 1.5; border: 1px solid;
}
.diff-nm { color: #7a3fd0; background: rgba(122, 63, 208, 0.12); border-color: rgba(122, 63, 208, 0.45); }
.diff-ex { color: #2a7d3f; background: rgba(80, 190, 110, 0.13); border-color: rgba(42, 125, 63, 0.45); }
.diff-cq { color: #9a6b00; background: rgba(255, 184, 50, 0.16); border-color: rgba(190, 130, 0, 0.5); }
.diff-ch { color: #b3362a; background: rgba(230, 80, 60, 0.13); border-color: rgba(179, 54, 42, 0.5); }
.diff-tr { color: #1b6fb8; background: rgba(60, 160, 255, 0.12); border-color: rgba(27, 111, 184, 0.45); }
.diff-as { color: #b4531f; background: rgba(255, 130, 60, 0.14); border-color: rgba(180, 83, 31, 0.5); }
.diff-hi { color: #1c7c6e; background: rgba(40, 190, 170, 0.14); border-color: rgba(28, 124, 110, 0.5); }
.diff-sa { color: #8a3f9a; background: rgba(210, 120, 230, 0.14); border-color: rgba(138, 63, 154, 0.45); }
.diff-wb { color: #b3307f; background: rgba(255, 110, 190, 0.13); border-color: rgba(179, 48, 127, 0.45); }
:root[data-theme="dark"] .diff-nm, :root:not([data-theme="light"]) .diff-nm { color: #c9a2ff; background: rgba(176, 124, 255, 0.16); border-color: rgba(201, 162, 255, 0.45); }
:root[data-theme="dark"] .diff-ex, :root:not([data-theme="light"]) .diff-ex { color: #8fd19e; background: rgba(80, 190, 110, 0.14); border-color: rgba(143, 209, 158, 0.45); }
:root[data-theme="dark"] .diff-cq, :root:not([data-theme="light"]) .diff-cq { color: #ffc857; background: rgba(255, 184, 50, 0.15); border-color: rgba(255, 200, 87, 0.5); }
:root[data-theme="dark"] .diff-ch, :root:not([data-theme="light"]) .diff-ch { color: #ff9a8a; background: rgba(230, 80, 60, 0.16); border-color: rgba(255, 154, 138, 0.5); }
:root[data-theme="dark"] .diff-tr, :root:not([data-theme="light"]) .diff-tr { color: #6fc3ff; background: rgba(60, 160, 255, 0.15); border-color: rgba(111, 195, 255, 0.5); }
:root[data-theme="dark"] .diff-as, :root:not([data-theme="light"]) .diff-as { color: #ffab7a; background: rgba(255, 130, 60, 0.15); border-color: rgba(255, 171, 122, 0.5); }
:root[data-theme="dark"] .diff-hi, :root:not([data-theme="light"]) .diff-hi { color: #5fe0cc; background: rgba(40, 190, 170, 0.15); border-color: rgba(95, 224, 204, 0.5); }
:root[data-theme="dark"] .diff-sa, :root:not([data-theme="light"]) .diff-sa { color: #e6a2f5; background: rgba(210, 120, 230, 0.15); border-color: rgba(230, 162, 245, 0.45); }
:root[data-theme="dark"] .diff-wb, :root:not([data-theme="light"]) .diff-wb { color: #ff9ad5; background: rgba(255, 110, 190, 0.15); border-color: rgba(255, 154, 213, 0.5); }

/* Changelog page */
.changelog-group { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); margin: 0 0 12px; }
.changelog-group > summary { cursor: pointer; padding: 12px 16px; display: flex; gap: 14px; align-items: baseline; }
.changelog-range { color: var(--color-text-muted); font-size: 13px; }
.changelog-list { list-style: none; margin: 0; padding: 0 16px 8px; }
.changelog-list li { display: grid; grid-template-columns: 72px 104px minmax(0, 1fr); gap: 12px; padding: 6px 0; }
.changelog-list li:has(.changelog-version:not(:empty)) { border-top: 1px solid var(--color-border); padding-top: 10px; }
.changelog-version { font-weight: 700; color: var(--color-primary); }
.changelog-date { color: var(--color-text-muted); font-size: 13px; }
@media (max-width: 700px) { .changelog-list li { grid-template-columns: 64px minmax(0, 1fr); } .changelog-text { grid-column: 1 / -1; } }
.changelog-tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; margin-right: 6px; border-radius: 999px; border: 1px solid currentColor; vertical-align: 1px; }
.changelog-tag--client { color: var(--color-primary); }
.changelog-tag--website { color: #4aa3df; }
.changelog-tag--backend { color: #6cc070; }
.changelog-tag--database { color: #b58be0; }

/* Statistics page */
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 0 0 22px; }
.stat-tile { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 14px 16px; }
.stat-value { font-size: 28px; font-weight: 800; color: var(--color-primary); }
.stat-label { font-weight: 600; }
.stat-sub { color: var(--color-text-muted); font-size: 12px; margin-top: 2px; }
.stat-block { margin: 0 0 22px; }
.stat-bars { display: grid; gap: 6px; }
.stat-bar-row { display: grid; grid-template-columns: minmax(120px, 280px) minmax(0, 1fr) 64px; gap: 12px; align-items: center; }
.stat-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The faction icon before a server name is as tall as the text. */
.stat-bar-label .faction-icon { width: 1.15em; height: 1.15em; }
.stat-bar-track { background: var(--color-surface2); border-radius: 6px; height: 14px; overflow: hidden; }
.stat-bar-fill { display: block; height: 100%; background: var(--color-primary); border-radius: 6px; }
.stat-bar-value { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .stat-bar-row { grid-template-columns: minmax(90px, 40%) minmax(0, 1fr) 48px; } }

/* Server status page */
.table-scroll { overflow-x: auto; }

/* AION 2 announcements: one colored label per kind of notice (and a green one for "completed"). */
.ann-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: 12px; margin-top: 16px; align-items: start; }
.ann-list:has(.pn-item) { grid-template-columns: 1fr; }
.ann-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.ann-filter { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 8px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--lab); background: color-mix(in srgb, var(--lab) 16%, transparent); border: 1px solid color-mix(in srgb, var(--lab) 45%, transparent); cursor: pointer; user-select: none; }
.ann-filter input { accent-color: var(--lab); margin: 0; cursor: pointer; }
.ann-filter:has(input:not(:checked)) { opacity: 0.55; }
.ann-filter:hover { border-color: var(--lab); }
.ann-filter-all { padding: 3px 12px; border-radius: 999px; font: inherit; font-size: 13px; color: var(--color-text-muted); background: transparent; border: 1px solid var(--color-border); cursor: pointer; }
.ann-filter-all:hover { color: var(--color-text); border-color: var(--color-text-muted); }
.ann-day { margin-top: 26px; }
.ann-day-title { margin: 0; padding-bottom: 6px; border-bottom: 1px solid var(--color-border); font-size: 1rem; font-weight: 700; color: var(--color-text); }
.ann-day .ann-list { margin-top: 12px; }
.ann-item { padding: 14px 18px; background: var(--color-surface); border: 1px solid var(--color-border); border-left: 4px solid var(--lab, var(--color-border)); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.ann-item:hover { border-color: var(--lab, var(--color-primary)); }
.ann-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.ann-date { color: var(--color-text-muted); font-size: 12px; margin-left: auto; font-variant-numeric: tabular-nums; }
.ann-title { margin: 0; font-size: 1.05rem; line-height: 1.35; }
.ann-title a { color: var(--color-text); text-decoration: none; }
.ann-title a:hover { text-decoration: underline; }
.ann-summary { margin: 6px 0 0; color: var(--color-text-muted); font-size: 0.9rem; line-height: 1.45; }
.ann-restricted { display: flex; align-items: baseline; gap: 10px; margin: 8px 0 0; }
.ann-restricted strong { font-size: 2rem; line-height: 1; font-weight: 800; color: var(--lab); font-variant-numeric: tabular-nums; }
.ann-restricted span { color: var(--color-text-muted); font-size: 0.9rem; }
.ann-more { display: inline-block; margin-top: 8px; font-size: 0.85rem; }
.ann-label { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--lab); background: color-mix(in srgb, var(--lab) 20%, transparent); }
.ann-label.done { --lab: var(--color-success); }
.ann-label.done::before { content: "✓ "; }
.pn-item { padding: 12px 18px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.pn-item > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; cursor: pointer; list-style: none; }
.pn-item > summary::-webkit-details-marker { display: none; }
.pn-item > summary::before { content: "▸"; color: var(--color-text-muted); }
.pn-item[open] > summary::before { content: "▾"; }
.pn-title { font-weight: 700; font-size: 1.05rem; }
.pn-body { margin-top: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.pn-body p { margin: 0 0 6px; }
.pn-body ul, .pn-body ol { margin: 4px 0 8px; padding-left: 22px; }
.pn-body li > p { margin: 2px 0; }
.pn-body h4 { margin: 12px 0 4px; }
.pn-table { margin: 8px 0 12px; overflow-x: auto; }
.pn-body table { border-collapse: collapse; width: 100%; }
.pn-body th, .pn-body td { border: 1px solid var(--color-border); padding: 8px 12px; text-align: left; vertical-align: middle; }
.pn-body th { background: var(--color-surface2); font-weight: 700; text-align: center; }
.pn-body td > p, .pn-body th > p { margin: 0; }
.pn-body .pn-center { text-align: center; }
.pn-body .pn-right { text-align: right; }
.cat-maintenance { --lab: var(--color-warning); }
.cat-outage { --lab: var(--color-danger); }
.cat-newServers { --lab: var(--color-info); }
.cat-serverTransfer { --lab: #a3d63f; }
.cat-twitchDrops { --lab: #9d6bff; }
.cat-knownIssues { --lab: #ff8a3d; }
.cat-compensation { --lab: #2cc6c6; }
.cat-account { --lab: #f06aa8; }
.cat-other { --lab: var(--color-text-muted); }
:root[data-theme="light"] .cat-serverTransfer { --lab: #5f8a0a; }
:root[data-theme="light"] .cat-twitchDrops { --lab: #6d3fd6; }
:root[data-theme="light"] .cat-knownIssues { --lab: #c2560f; }
:root[data-theme="light"] .cat-compensation { --lab: #0f8286; }
:root[data-theme="light"] .cat-account { --lab: #b82f78; }

/* Legions */
.guild-filter { width: min(100%, 520px); padding: 9px 12px; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: 8px; font: inherit; }
.guild-table { border-collapse: collapse; width: 100%; max-width: 760px; }
.guild-table th, .guild-table td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--color-border); }
.guild-table th { color: var(--color-text-muted); font-size: 12px; }
.guild-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.guild-table th.sortable:hover { color: var(--color-text); }
.guild-table th.sortable::after { content: " " attr(data-arrow); display: inline-block; min-width: 1em; }

/* Legion list: servers in a collapsible sidebar, the larger legions as cards, the small ones as a list. */
.faction-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; background: var(--color-text-muted); }
.faction-dot.elyos { background: #6fb7ff; }
.faction-dot.asmodian { background: #ff9b6a; }
.guild-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 24px; }
.guild-servers { display: grid; gap: 4px; position: sticky; top: 12px; }
.guild-server { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: center; text-align: left; padding: 10px 12px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--color-text); font: inherit; cursor: pointer; }
.guild-server:hover { background: var(--color-surface); }
.guild-server[aria-pressed="true"] { background: var(--color-surface); border-color: var(--color-primary); }
.guild-server small, .guild-region small { color: var(--color-text-muted); }
.guild-region { display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; align-items: center; width: 100%; text-align: left; margin-top: 10px; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--color-border); background: transparent; color: var(--color-text); font: inherit; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.guild-region small { font-weight: 400; letter-spacing: 0; text-transform: none; }
.guild-region .chev { width: 8px; height: 8px; border-right: 2px solid var(--color-text-muted); border-bottom: 2px solid var(--color-text-muted); transform: rotate(45deg); transition: transform .15s; margin-left: 2px; }
.guild-region[aria-expanded="false"] .chev { transform: rotate(-45deg); }
.guild-group-body { display: grid; gap: 4px; padding-top: 4px; }
.guild-group-body[hidden] { display: none; }
.guild-main { display: grid; gap: 4px; align-content: start; min-width: 0; }
.guild-sec { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 36px 0 10px; }
.guild-main .guild-filter + .guild-sec { margin-top: 28px; }
.guild-sec h3 { margin: 0; font-size: 1.3rem; }
.guild-sec span { color: var(--color-text-muted); }
.guild-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--color-text-muted); font-size: .9rem; padding-bottom: 14px; }
.guild-legend span { display: inline-flex; gap: 6px; align-items: center; }
.guild-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.guild-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; }
.guild-card { display: grid; gap: 12px; align-content: start; padding: 16px 18px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); color: var(--color-text); text-decoration: none; }
.guild-card:hover { border-color: var(--color-primary); }
.guild-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.guild-card-top strong { font-size: 1.35rem; overflow-wrap: anywhere; }
.guild-card-top span { color: var(--color-text-muted); font-size: .85rem; white-space: nowrap; }
.guild-chip { display: inline-flex; gap: 6px; align-items: center; justify-self: start; font-size: .8rem; color: var(--color-text-muted); border: 1px solid var(--color-border); border-radius: 999px; padding: 1px 9px 1px 8px; }
.guild-mix { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--color-surface2); }
.guild-mix i { display: block; height: 100%; }
.guild-nomix { color: var(--color-text-muted); font-size: .85rem; }
.guild-card-foot { display: flex; justify-content: space-between; align-items: baseline; color: var(--color-text-muted); font-size: .85rem; }
.guild-card-foot b { color: var(--color-text); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.guild-small { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 28px; }
.guild-small a { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--color-border); color: var(--color-text); text-decoration: none; }
.guild-small a:hover { color: var(--color-primary); }
.guild-small small { color: var(--color-text-muted); }
@media (max-width: 900px) {
  .guild-layout { grid-template-columns: 1fr; gap: 24px; }
  .guild-servers { position: static; }
}

.pf-arcana { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }

/* Arcana tab of a character whose own client uploaded the details: set effect and lord values on top, the five pieces and the sum of their skill bonuses below. */
.pf-arc { display: grid; gap: 14px; }
.pf-arc-top { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
.pf-arc-set {
  display: grid;
  gap: 9px;
  align-content: start;
  padding: 14px 18px;
  border: 1px solid #1f9d6b;
  border-radius: var(--radius-card);
  background: linear-gradient(100deg, rgba(31, 157, 107, 0.22), rgba(31, 157, 107, 0.05));
}
.pf-arc-set-title { display: flex; align-items: center; gap: 10px; }
.pf-arc-set-title h3 { margin: 0; font-size: 1.1rem; color: #2fc58b; }
.pf-arc-set-title span { padding: 1px 11px; font-size: 0.85rem; font-weight: 700; color: #2fc58b; border: 1px solid #2fc58b; border-radius: 999px; }
.pf-arc-eff { display: flex; align-items: center; gap: 10px; }
.pf-arc-eff em {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  font-style: normal;
  font-size: 0.8rem;
  font-weight: 700;
  color: #2fc58b;
  border: 1px solid #2fc58b;
  border-radius: 5px;
}
.pf-arc-eff.off { opacity: 0.5; }
.pf-arc-lordrow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.pf-arc-lordrow > div { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.pf-arc-lordrow .pf-attr-ico { width: 40px; height: 40px; }
.pf-arc-lordrow strong { font-size: 1.15rem; }
.pf-arc-lordrow small { color: var(--color-text-muted); }
.pf-arc-grid { display: grid; grid-template-columns: 1fr 310px; gap: 14px; align-items: start; }
.pf-arc-pieces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
.pf-slot.pf-arc-card { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 14px; }
.pf-arc-head { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; }
.pf-arc-exp { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: 0.8rem; color: var(--color-text-muted); }
.pf-arc-exp strong { color: var(--color-text); }
.pf-arc-bar { height: 6px; margin-top: -4px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, 0.1); }
.pf-arc-bar i { display: block; height: 100%; background: linear-gradient(90deg, #f0b030, #ffe08a); }
.pf-arc-god { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); font-weight: 600; }
.pf-arc-god small { color: var(--color-text-muted); font-weight: 500; }
.pf-arc-skill { display: flex; justify-content: space-between; gap: 8px; font-size: 0.88rem; cursor: default; }
.pf-arc-skname { color: #6fe3f0; text-decoration: underline; text-underline-offset: 3px; }
.pf-arc-skill strong { flex: none; font-weight: 400; white-space: nowrap; color: var(--color-text-muted); }
.pf-arc-skill strong.hi { font-weight: 700; color: #ffd66b; }
.pf-arc-sum { display: grid; gap: 7px; align-content: start; }
.pf-arc-sum h4 { margin-bottom: 5px; }
@media (max-width: 1100px) {
  .pf-arc-grid { grid-template-columns: 1fr; }
  .pf-arc-pieces { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .pf-arc-top, .pf-arc-pieces { grid-template-columns: 1fr; }
  .pf-arc-lordrow { grid-template-columns: repeat(3, 1fr); }
}

/* Features page (/features): one full-width scene per feature - a generated backdrop, the text on one side and the real client windows on the other.
   The windows of a scene sit flat on one plane and the plane is tilted, so all windows of a scene lean the same way. Colours of the page come
   from the theme variables; text on the pictures stays light in both themes. Desktop positions are tuned for 1920px; below 1101px it is one column. */
/* Features-Seite: Szenen im Seiten-Container (1872 px bei 1920), Farben der Seite über --color-*, Text auf Bildern bleibt hell in Dark UND Light */
.fx-page{--fx-on:#f4f7fa;--fx-muted:#c3cdd6;--fx-accent:#ffba42}
.fx-scene,.fx-hero{position:relative;overflow:hidden;isolation:isolate;border:1px solid var(--color-border);border-radius:var(--radius-card);margin-bottom:16px;color:var(--fx-on)}
.fx-bg{position:absolute;inset:0;background-image:var(--bg);background-position:center !important;background-size:cover !important;background-repeat:no-repeat !important;z-index:0}
.fx-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,13,18,.9),rgba(9,13,18,.55) 50%,rgba(9,13,18,.3))}
.fx-scene.flip .fx-bg::after{background:linear-gradient(270deg,rgba(9,13,18,.9),rgba(9,13,18,.55) 50%,rgba(9,13,18,.3))}
.fx-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center;padding:48px 48px}
.fx-scene.flip .fx-inner{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.fx-scene.flip .fx-copy{order:2}
.fx-copy h2{margin:0 0 14px;font-size:44px;line-height:1.1;text-wrap:balance;letter-spacing:-.01em;color:var(--fx-on)}
.fx-copy .lead{margin:0 0 14px;font-size:20px;color:var(--fx-on)}
.fx-copy ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.fx-copy li{position:relative;padding-left:28px;font-size:16px;color:var(--fx-muted)}
.fx-copy li::before{content:"";position:absolute;left:0;top:.5em;width:14px;height:8px;border-left:2px solid var(--fx-accent);border-bottom:2px solid var(--fx-accent);transform:rotate(-45deg) scale(.8)}
.fx-stage{position:relative;display:flex;justify-content:center;align-items:center}
/* Fenster: gleiche Höhe je Rolle, gleicher Winkel, Perspektive proportional zur Fensterbreite = gleiche Kippung bei jeder Größe */
.fx-win{display:block;--pw:calc(var(--h) * var(--r));width:auto;height:var(--h);max-width:100%;border:2px solid transparent;border-radius:10px;
 background:linear-gradient(135deg,#ffe2a0 0%,#ffba42 28%,#e8731c 62%,#7f3512 100%) border-box;
 transform:perspective(calc(var(--h) * 3.8)) rotateY(var(--a));
 box-shadow:0 0 0 1px rgba(0,0,0,.55),0 40px 70px -20px rgba(0,0,0,.8),0 0 70px -8px color-mix(in srgb,var(--tint) 55%,transparent)}
.fx-scene .fx-win{--a:-16deg}.fx-scene.flip .fx-win{--a:16deg}.fx-hero .fx-win{--a:-16deg}
.fx-stage .fx-win+.fx-win{margin-left:-70px;margin-top:70px}
.fx-hero .fx-inner{padding-block:40px}
.fx-hero .fx-win+.fx-win{margin-top:0;margin-left:-110px}
.fx-hero h1{margin:0 0 14px;font-size:54px;line-height:1.03;letter-spacing:-.02em;color:var(--fx-on)}
.fx-hero h1 span{color:var(--fx-accent)}
.fx-hero .tag{margin:0 0 10px;font-size:20px;color:var(--fx-on)}
.fx-hero .intro{margin:0;max-width:560px;color:var(--fx-muted)}
.fx-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.fx-jump{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:8px 16px;margin-bottom:16px;background:color-mix(in srgb,var(--color-background) 92%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--color-border)}
.fx-jump a{color:var(--color-text-muted);text-decoration:none;font-size:13px;padding:5px 11px;border:1px solid var(--color-border);border-radius:7px;background:var(--color-surface)}
.fx-jump a:hover,.fx-jump a.on{border-color:var(--color-primary);color:var(--color-primary)}
.fx-jump a:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.fx-scene{scroll-margin-top:56px}
.legal-section,.home-faq-item,.dl-faq-card{scroll-margin-top:56px}
.fx-more h2{font-size:28px;margin:28px 0 16px}
.fx-mores{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:8px}
.fx-more-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);padding:20px}
.fx-more-card h3{margin:0 0 6px;font-size:17px;color:var(--color-text)}.fx-more-card p{margin:0;font-size:15px;color:var(--color-text-muted)}
@media(max-width:1100px){
 .fx-inner,.fx-scene.flip .fx-inner{grid-template-columns:minmax(0,1fr);padding:32px 20px;gap:24px}
 .fx-scene.flip .fx-copy{order:0}
 .fx-copy h2{font-size:30px}.fx-copy .lead{font-size:18px}
 .fx-bg::after,.fx-scene.flip .fx-bg::after{background:linear-gradient(180deg,rgba(9,13,18,.82),rgba(9,13,18,.64) 55%,rgba(9,13,18,.82))}
 .fx-win{height:auto;width:min(100%,var(--w));--pw:min(88vw,var(--w))}
 .fx-stage{flex-direction:column;gap:0}
 .fx-stage .fx-win+.fx-win,.fx-hero .fx-win+.fx-win{margin:-24px 0 0}
 .fx-hero h1{font-size:38px}
 .fx-jump{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch}.fx-jump a{white-space:nowrap;flex:none}
 .fx-mores{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:600px){.fx-copy h2{font-size:26px}.fx-hero h1{font-size:34px}.fx-inner,.fx-scene.flip .fx-inner{padding:24px 16px}}
/* alle Szenen exakt gleich hoch (Desktop) */
@media(min-width:1101px){.fx-scene{height:560px}.fx-scene .fx-inner{height:100%;padding-block:32px}.fx-copy li{font-size:15.5px}.fx-copy h2{font-size:40px}}

.fx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fx-jump a{display:inline-flex;align-items:center;gap:7px}.fx-ico{flex:none;color:var(--color-primary)}
.fx-jump{margin-top:0}
/* gespiegelte Szenen: Fenster so weit links wie möglich, damit mehr vom Hintergrund sichtbar bleibt */
@media(min-width:1101px){
 .fx-scene.flip .fx-stage{justify-content:flex-start;margin-left:-24px}
 /* Five views: Kugeln oben rechts sichtbar, Text unten */
 #feature-modes .fx-copy{align-self:end;padding-bottom:4px}
 #feature-modes .fx-bg::after{background:linear-gradient(0deg,rgba(9,13,18,.94) 0%,rgba(9,13,18,.72) 48%,rgba(9,13,18,0) 78%),linear-gradient(270deg,rgba(9,13,18,0),rgba(9,13,18,.35))}
 #feature-modes .fx-inner{align-items:stretch}
 #feature-modes .fx-stage{align-self:center}
}

.fx-more-card{display:flex;gap:16px;align-items:center}
.fx-more-ico{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:12px;color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 12%,var(--color-surface2));border:1px solid color-mix(in srgb,var(--color-primary) 35%,var(--color-border))}
@media(min-width:1101px){
 /* Five views: Text rechts über den Kugeln, nur leichter Verlauf */
 #feature-modes .fx-bg::after{background:linear-gradient(270deg,rgba(9,13,18,.55),rgba(9,13,18,.25) 60%,rgba(9,13,18,.45))}
 #feature-modes .fx-copy{align-self:center;padding-bottom:0}
 /* Details: Fenster weiter links */

 /* Character: Fenster rechts, zweites kleiner, tiefer und weiter links */
 #feature-character .fx-stage{justify-content:flex-end}
 #feature-character .fx-win+.fx-win{--h:230px !important;margin-top:150px;margin-left:-90px}
 /* Map: Zweitfenster kleiner und tiefer unter das erste */
 #feature-map .fx-win+.fx-win{--h:240px !important;margin-top:150px;margin-left:-100px}
 #feature-map .fx-stage{justify-content:flex-end;margin-right:-10px}
 /* Timetable weiter rechts, World boss weiter links */
 
 #feature-worldboss .fx-stage{margin-left:-20px}
 /* Hotkeys: Gruppe weiter rechts, zweites Fenster etwas nach links */
 #feature-hotkeys .fx-stage{justify-content:flex-end}
 #feature-hotkeys .fx-win+.fx-win{margin-left:-110px}
}
@media(min-width:1700px){#feature-meter .fx-win{translate:150px 0}}
@media(min-width:1101px){#feature-modes .fx-win+.fx-win{margin-left:-175px}}
@media(min-width:1700px){#feature-overlay .fx-win{translate:200px 0}#feature-overlay .fx-win+.fx-win{translate:70px 0}}

@media(min-width:1700px){#feature-hotkeys .fx-stage{translate:0 0}#feature-timetable .fx-win{translate:50px 0}#feature-worldboss .fx-stage{margin-left:0}#feature-modes .fx-stage{margin-left:24px}#feature-details .fx-stage{margin-left:24px}}
@media(min-width:1101px) and (max-width:1699px){.fx-stage{zoom:.78}.fx-scene .fx-inner{gap:24px}#feature-map .fx-stage{margin-right:0}}
/* Ankündigungen: das Fenster sitzt links mit etwas Rand statt am Szenenrand */
@media(min-width:1101px){#feature-announcements .fx-stage{margin-left:56px}#feature-twitchdrops .fx-stage{justify-content:flex-end;margin-right:48px}}
/* Fensterkopf des Clients: ohne Rahmen, vor dem Webseiten-Fenster an dessen oberer Ecke, nach unten ausgeblendet */
.fx-head{border:0;border-radius:0;background:none;box-shadow:none;filter:drop-shadow(0 12px 16px rgba(0,0,0,.55)) drop-shadow(0 0 24px color-mix(in srgb,var(--tint) 35%,transparent));position:relative;z-index:2}
@media(max-width:1100px){.fx-head{display:none}}
@media(min-width:1101px){
 #feature-announcements .fx-head,#feature-twitchdrops .fx-head{align-self:flex-start;margin-top:0;top:353px}
 #feature-announcements .fx-head{margin-left:-250px}
 #feature-twitchdrops .fx-head{order:-1;margin-left:0;margin-right:-250px}
}
@media(min-width:1101px) and (max-width:1399px){.fx-stage{zoom:.62}}
@media(min-width:1101px){#feature-details .fx-stage,#feature-modes .fx-stage{margin-left:44px}}
@media(min-width:1101px){#feature-character .fx-win:first-child{translate:100px 0}}
@media(min-width:1700px){#feature-map .fx-win:first-child{translate:-200px 0}#feature-map .fx-win+.fx-win{translate:-500px 0}}
@media(min-width:1700px){#feature-timetable .fx-win{translate:320px 0}}
#feature-worldboss .fx-win{--a:26deg}
#feature-hotkeys .fx-copy .lead{max-width:52ch;text-wrap:balance}
@media(min-width:1700px){#feature-meter .fx-win{--h:380px !important;translate:250px 0}}
@media(min-width:1700px){#feature-meter .fx-win{translate:clamp(0px,calc((100vw - 1700px) * .9 + 15px),220px) 0}}
@media(min-width:1101px){#feature-modes .fx-bg::after{background:linear-gradient(270deg,rgba(9,13,18,.9) 0%,rgba(9,13,18,.82) 42%,rgba(9,13,18,.25) 62%,rgba(9,13,18,.35) 100%)}#feature-modes .fx-copy{text-shadow:0 1px 14px rgba(0,0,0,.6)}}
@media(min-width:1101px){
 #feature-character .fx-win:first-child{--h:330px !important;translate:0 0}
 #feature-character .fx-win+.fx-win{--h:190px !important;margin-top:150px;margin-left:-150px}
}
@media(min-width:1700px){#feature-map .fx-win+.fx-win{translate:-250px 0}}
@media(min-width:1101px){#feature-overlay .fx-win:first-child{--h:210px !important}#feature-overlay .fx-win+.fx-win{--h:120px !important;margin-left:-60px;margin-top:150px}}
@media(min-width:1700px){#feature-overlay .fx-win:first-child{translate:300px 0}#feature-overlay .fx-win+.fx-win{translate:210px 0}}
@media(min-width:1700px){#feature-overlay .fx-win+.fx-win{translate:150px 0}}
@media(min-width:1700px) and (max-width:1849px){#feature-overlay .fx-win:first-child{translate:180px 0}#feature-overlay .fx-win+.fx-win{translate:30px 0}}
@media(min-width:1101px){#feature-details .fx-copy{max-width:540px;justify-self:end}}
@media(min-width:1101px){#feature-details .fx-copy{max-width:440px}}
@media(min-width:1101px){#feature-details .fx-copy{margin-right:-24px}}

@media(min-width:1101px){#feature-overlay .fx-stage{flex-direction:column;align-items:flex-end}#feature-overlay .fx-win+.fx-win{margin-left:0;margin-top:-45px}}
@media(min-width:1700px){#feature-overlay .fx-win:first-child{translate:270px 0}#feature-overlay .fx-win+.fx-win{translate:330px 0}}
@media(min-width:1700px) and (max-width:1849px){#feature-overlay .fx-win:first-child{translate:190px 0}#feature-overlay .fx-win+.fx-win{translate:250px 0}}
@media(min-width:1101px){#feature-overlay .fx-win:first-child,#feature-overlay .fx-win+.fx-win{}#feature-overlay .fx-stage{padding-right:20px}#feature-overlay .fx-win:first-child{margin-right:90px}#feature-overlay .fx-win+.fx-win{margin-right:0}}
@media(min-width:1101px){#feature-character .fx-stage{flex-direction:column;align-items:flex-end;padding-right:20px;justify-content:center}

 #feature-character .fx-win:first-child{margin-right:110px}
 #feature-character .fx-win+.fx-win{margin:-70px 0 0 0}}
#feature-worldboss .fx-win{--a:-21deg}
/* schmale Zweitfenster wirken bei gleichem Winkel flacher: leicht stärker kippen, damit beide gleich geneigt aussehen */
.fx-scene .fx-win+.fx-win{--a:-23deg}.fx-scene.flip .fx-win+.fx-win{--a:23deg}
@media(min-width:1700px){#feature-map .fx-win+.fx-win{translate:-325px 0}}
.fx-scene .fx-win+.fx-win{--a:-19deg}.fx-scene.flip .fx-win+.fx-win{--a:19deg}
@media(min-width:1101px){#feature-overlay .fx-win:first-child{margin-right:30px}}

/* gleiche Kippung: gleicher Winkel, Perspektive proportional zur Fensterhöhe -> die obere und untere Kante laufen bei jedem Fenster gleich steil */
.fx-scene .fx-win+.fx-win{--a:-16deg}.fx-scene.flip .fx-win+.fx-win{--a:16deg}
@media(min-width:1101px){#feature-overlay .fx-win:first-child{margin-right:-10px}}
/* Eine Ebene für alle Fenster eines Bereichs: die ganze Bühne wird gekippt, die Fenster liegen flach darin -> garantiert gleiche Kippung */
.fx-win{transform:none !important}
.fx-stage{transform:perspective(2400px) rotateY(var(--sa,-16deg))}
.fx-scene.flip .fx-stage{--sa:16deg}
#feature-worldboss .fx-stage{--sa:21deg}
@media(max-width:1100px){.fx-stage{transform:perspective(1400px) rotateY(calc(var(--sa,-16deg) * .6))}}
@media(min-width:1700px){#feature-timetable .fx-win{translate:295px 0}}
@media(min-width:1101px){#feature-hotkeys .fx-win:first-child{translate:75px 0}#feature-hotkeys .fx-win+.fx-win{translate:0 40px}}
@media(min-width:1101px){#feature-character .fx-win:first-child{margin-right:50px}}

/* Statistics: client versions, bar split by how fresh the client was at the time of the upload */
.version-track { display: flex; background: transparent; justify-self: start; min-width: 6px; }
.version-seg { display: block; height: 100%; }
.version-seg.current, .version-key.current { background: var(--color-success); }
.version-seg.outdated, .version-key.outdated { background: var(--color-warning); }
.version-seg.unknown, .version-key.unknown { background: var(--color-info); }
.version-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: baseline; }

/* Home banner: the Features hero (Toolkit headline, two buttons, tilted client windows) as a slim card above the live data -
   it points at Features, Instances and World Bosses without taking the stage from Top players and Recent activity. */
.home-banner{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr) 370px;gap:40px;align-items:center;padding:28px 48px;margin:0 0 16px;min-height:300px;border:1px solid var(--color-border);border-radius:var(--radius-card);color:#f4f7fa}
.home-banner-bg{position:absolute;inset:0;z-index:-1;background:#0b1117}
.home-banner-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(270deg,rgba(9,13,18,.9),rgba(9,13,18,.6) 45%,rgba(9,13,18,.3))}
.home-banner-copy{padding-left:50px}
.home-banner-eyebrow{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#ffba42}
.home-banner h1{margin:0 0 10px;font-size:38px;line-height:1.05;letter-spacing:-.02em;color:#f4f7fa}
.home-banner h1 span{color:#ffba42}
.home-banner-tag{margin:0 0 8px;font-size:17px;color:#f4f7fa}
.home-banner-intro{margin:0;max-width:520px;font-size:14px;line-height:1.5;color:#c3cdd6}
.home-banner-ctas{display:flex;flex-direction:column;gap:12px}
/* The three ways in as big buttons: icon, title, a line about what is behind them, an arrow; the first one (the tour) is the gold one. */
.home-cta{display:flex;align-items:center;gap:16px;min-height:78px;padding:0 22px;border-radius:12px;text-decoration:none;color:#f4f7fa;background:rgba(40,60,84,.88);border:1px solid rgba(255,255,255,.3);border-left:4px solid #ffba42;transition:transform .12s,background .15s,border-color .15s}
.home-cta:hover{transform:translateX(3px);background:rgba(56,80,108,.95);border-color:rgba(255,186,66,.8)}
.home-cta-ico{display:flex;flex:none;color:#ffba42}
.home-cta-text{min-width:0}
.home-cta-text b{display:block;font-size:16px;letter-spacing:.06em;text-transform:uppercase}
.home-cta-text small{display:block;margin-top:2px;font-size:13px;line-height:1.3;color:#c3d1dd}
.home-cta-arrow{display:flex;flex:none;margin-left:auto;color:#ffba42;transition:transform .15s}.home-cta:hover .home-cta-arrow{transform:translateX(4px)}
.home-cta-main{background:linear-gradient(180deg,#e2b457,#c4932f);border-color:rgba(255,225,160,.6);border-left-color:#fff3cf;color:#2a1a04;box-shadow:0 6px 18px -6px rgba(0,0,0,.7)}
.home-cta-main:hover{background:linear-gradient(180deg,#e8bd63,#cc9a34);border-color:rgba(255,235,190,.85)}
.home-cta-main .home-cta-text small{color:#5b3d0c}.home-cta-main .home-cta-ico,.home-cta-main .home-cta-arrow{color:#2a1a04}
.home-banner-stage{display:flex;justify-content:flex-start;align-items:center}
.home-banner-win{display:block;height:var(--h);width:auto;max-width:100%;border:2px solid transparent;border-radius:10px;background:linear-gradient(135deg,#ffe2a0 0%,#ffba42 28%,#e8731c 62%,#7f3512 100%) border-box;transform:perspective(calc(var(--h) * 3.8)) rotateY(16deg);box-shadow:0 0 0 1px rgba(0,0,0,.55),0 30px 50px -20px rgba(0,0,0,.8),0 0 60px -8px rgba(255,186,66,.4)}
.home-banner-win:first-child{position:relative;z-index:2}.home-banner-win+.home-banner-win{margin-left:-140px;margin-top:40px}
@media(max-width:1100px){.home-banner{grid-template-columns:minmax(0,1fr);padding:24px 20px;gap:20px}.home-banner-copy{padding-left:0}.home-banner-stage{display:none}.home-banner-ctas{flex-direction:column}}

.btn-icon-circle{display:inline-flex}.btn-icon-circle svg{display:block}
.nav-download-link{display:inline-flex;align-items:center;gap:6px}.nav-download-ico{flex:none}

/* The download button (header + footer): one calm, solid warm gold that fits the navy theme - no ornaments, no animation. */
.btn.btn-gold{min-height:50px;padding:0 28px;border:1px solid rgba(255,225,160,.55);border-radius:8px;font-size:14px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;color:#2a1a04;
 background:linear-gradient(180deg,#e2b457 0%,#c4932f 100%);box-shadow:0 4px 12px -4px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,240,200,.45);text-shadow:none;transition:filter .15s,transform .12s,box-shadow .15s}
.btn.btn-gold::before,.btn.btn-gold::after,.btn.btn-ghost::before,.btn.btn-ghost::after{display:none}
.btn.btn-gold:hover{filter:brightness(1.07);transform:translateY(-1px);box-shadow:0 6px 16px -4px rgba(0,0,0,.6),0 0 14px rgba(226,180,87,.3),inset 0 1px 0 rgba(255,240,200,.5)}
.btn.btn-gold:active{transform:translateY(1px);filter:brightness(.96)}
/* Quiet dark-glass buttons for the banner's three areas: no loud colour, the banner art and the gold download stay the accent. */
.btn.btn-ghost{min-height:48px;padding:0 24px;border:1px solid rgba(255,255,255,.2);border-radius:8px;font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:#e8eef5;
 background:rgba(10,18,28,.85);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:none;text-shadow:none;transition:border-color .15s,background .15s,color .15s,transform .12s}
.btn.btn-ghost-main{border-color:rgba(255,186,66,.6);color:#ffd98a}
.btn.btn-ghost:hover{background:rgba(24,38,56,.92);border-color:rgba(255,186,66,.85);color:#fff;transform:translateY(-1px);filter:none;box-shadow:none}
.btn.btn-ghost:active{transform:translateY(1px)}
/* Header download: same calm gold as the footer button, just smaller. */
.nav-download-link{min-height:34px;padding:0 14px;border:1px solid rgba(255,225,160,.55);border-radius:6px;color:#2a1a04;text-shadow:none;
 background:linear-gradient(180deg,#e2b457 0%,#c4932f 100%);box-shadow:0 2px 8px -3px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,240,200,.45)}
.nav-download-link:hover{filter:brightness(1.07)}

/* Top players and Recent activity: both cards end at the same height and their five rows are exactly equally tall. */
.home-content-grid{align-items:stretch}
.home-content-col{height:100%}
.home-content-col>.home-section-card{flex:1;display:flex;flex-direction:column}
.home-content-col .hp-list{flex:1;grid-auto-rows:1fr}

/* Banner and the two cards sit close together; the stats pill straddles the seam, half over the banner and half over the cards. */
.home-banner{margin-bottom:0}
.home-below-hero{margin-top:12px}
.home-stats-card{position:absolute;left:0;right:0;top:-6px;transform:translateY(-50%);margin:0 auto;z-index:5}
@media(max-width:720px){.home-stats-card{position:static;transform:none;margin:0 auto 16px}}

/* Zenit stage of an item: a small diamond with the number in the icon's lower left corner. */
.pf-zenit {
  position: absolute;
  left: 1px;
  bottom: 1px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 2px #000;
  z-index: 0;
}
.pf-zenit::before {
  content: "";
  position: absolute;
  inset: 3px;
  background: #2aa7c9;
  border: 1px solid #0b2a33;
  transform: rotate(45deg) scale(1.15);
  z-index: -1;
}
.pf-tip-orange { color: #ff9a2e; }

/* ---- Player page: wing / skin / pet chips in the strip and the "Character" tab (own character only) ---- */
/* The stat symbols are light grey line art: they sit on a dark disc in both themes. */
:root,
:root[data-theme="dark"] {
  --attr-disc: #1e3347;
  --attr-disc-hi: #3a5a74;
  --attr-disc-lo: #1b3144;
}
:root[data-theme="light"] {
  --attr-disc: #2b4559;
  --attr-disc-hi: #3f6079;
  --attr-disc-lo: #26404f;
}
.pf-looks {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pf-vsep {
  width: 1px;
  height: 34px;
  background: var(--color-border);
}
.pf-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  background: var(--color-surface2);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.85rem;
  white-space: nowrap;
}
/* Rarity of wings and wing skins, same colours as the titles (Common stays neutral). */
.pf-chip.g-Rare { --grade: var(--color-success); }
.pf-chip.g-Epic { --grade: #b48cff; }
.pf-chip.g-Legend { --grade: var(--color-info); }
.pf-chip.g-Unique { --grade: var(--color-warning); }
.pf-chip.g-Special { --grade: var(--color-danger); }
.pf-chip[class*="g-"]:not(.g-Common) {
  border-color: var(--grade);
  background: color-mix(in srgb, var(--grade) 14%, transparent);
  color: var(--grade);
  font-weight: 600;
}
.pf-chip img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--attr-disc);
}
.pf-chip:not(:has(img)) {
  padding-left: 12px;
}
.pf-pill {
  padding: 1px 8px;
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 0.75rem;
}
.pf-chip-lvl {
  color: var(--color-text-muted);
}

.pf-char {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr) minmax(0, 520px);
  gap: 16px;
  align-items: start;
}
.pf-char-source {
  grid-column: 1 / -1;
  margin: 0;
}
.pf-char-main {
  padding-top: 0;
  overflow: hidden;
}
.pf-char-main:not(.has-portrait) {
  padding-top: 16px;
}
.pf-only {
  margin-left: 8px;
  padding: 1px 8px;
  border: 1px solid var(--color-warning);
  border-radius: 999px;
  color: var(--color-warning);
  font-size: 0.7rem;
  letter-spacing: 0;
  text-transform: none;
}
.pf-attr-ico {
  display: block;
  border-radius: 50%;
  background: var(--attr-disc);
  object-fit: contain;
  box-sizing: border-box;
  filter: brightness(2.2) contrast(1.15) drop-shadow(0 0 3px rgba(160, 200, 255, 0.35));
}
.pf-stat {
  display: grid;
  grid-template-columns: 26px 110px 1fr 38px;
  gap: 10px;
  align-items: center;
  margin: 7px 0;
}
.pf-stat .pf-attr-ico {
  width: 24px;
  height: 24px;
  padding: 2px;
}
.pf-stat i {
  display: block;
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: var(--color-border);
  overflow: hidden;
}
.pf-stat i b {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 4px;
  background: var(--color-primary);
}
.pf-stat em {
  font-style: normal;
  font-weight: 700;
  text-align: right;
}
.pf-stat.zero {
  opacity: 0.55;
}
.pf-portrait {
  height: 340px;
  margin: 0 -16px 6px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background: radial-gradient(ellipse at 50% 70%, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 65%);
}
.pf-portrait.failed {
  display: none;
}
.pf-portrait img {
  height: 100%;
  width: auto;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.55)) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.28));
  -webkit-mask-image: linear-gradient(#000 90%, transparent);
  mask-image: linear-gradient(#000 90%, transparent);
}

/* Lord ring: the box scales with the card (600 px at most), everything inside is positioned in percent. */
.pf-ring {
  position: relative;
  width: min(600px, 100%);
  aspect-ratio: 1;
  margin: 0 auto;
}
.pf-ring-guides svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.pf-ring-c1 {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 2;
}
.pf-ring-c2 {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}
.pf-lord-node,
.pf-hex-node {
  position: absolute;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--color-text-muted);
}
.pf-lord-node {
  width: 16%;
  font-size: clamp(9px, 1.9cqw, 11px);
}
.pf-lord-ib {
  position: relative;
  width: 66%;
  aspect-ratio: 1;
  margin: 0 auto 4px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: radial-gradient(circle, var(--attr-disc-hi) 0%, var(--attr-disc-lo) 72%);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
  display: grid;
  place-items: center;
}
.pf-lord-ib .pf-attr-ico {
  width: 78%;
  height: 78%;
  background: none;
}
.pf-lord-ib strong {
  position: absolute;
  right: -12%;
  bottom: -6%;
  font-size: 1.15rem;
  line-height: 1;
  color: #fff;
  -webkit-text-stroke: 3px #0b1620;
  paint-order: stroke fill;
}
.pf-hex-node {
  width: 16%;
  font-size: 0.8rem;
  color: var(--color-text);
}
.pf-hex-node .pf-attr-ico {
  width: 30px;
  height: 30px;
  margin: 0 auto 2px;
  padding: 2px;
}
.pf-hex-node strong {
  display: block;
  font-size: 1.35rem;
  color: var(--color-primary);
}
.pf-char-ring {
  container-type: inline-size;
}
.pf-lord-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border);
}
.pf-lord-row:last-child {
  border-bottom: 0;
}
.pf-lord-name {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pf-lord-name .pf-attr-ico {
  width: 34px;
  height: 34px;
  padding: 3px;
}
.pf-lord-name small {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.7rem;
}
@media (max-width: 1500px) {
  .pf-char {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .pf-char-ring {
    grid-column: 1 / -1;
    order: -1;
  }
}
@media (max-width: 800px) {
  .pf-char {
    grid-template-columns: minmax(0, 1fr);
  }
  .pf-stat {
    grid-template-columns: 26px 80px 1fr 32px;
  }
}

/* Titles, wings and pet in the profile header: one height for all of them. */
.pf-strip .pf-title,
.pf-strip .pf-chip {
  box-sizing: border-box;
  height: 40px;
  display: inline-flex;
  align-items: center;
}

/* Name column of the player strip: name, class and the faction/legion/server line one below the other. */
.pf-id {
  display: grid;
  gap: 2px;
  max-width: 280px;
}
.pf-id .pf-meta {
  gap: 0 14px;
  font-size: 0.85rem;
  line-height: 1.35;
}
.pf-strip {
  gap: 14px 18px;
}
.pf-numbers {
  flex-shrink: 0;
}

/* A little tighter, so titles, wings, pet and the numbers fit in one row at 1920 px even with long names. */
.pf-strip {
  gap: 14px 14px;
}
.pf-strip .pf-titles {
  gap: 6px;
}
.pf-strip .pf-title {
  padding: 4px 10px;
  font-size: 0.8rem;
}
.pf-strip .pf-looks {
  gap: 7px;
}
.pf-strip .pf-chip {
  gap: 7px;
  padding: 4px 10px 4px 4px;
  font-size: 0.8rem;
}
.pf-strip .pf-chip:not(:has(img)) {
  padding-left: 10px;
}
.pf-numbers {
  gap: 20px;
}

/* Player strip, tidied up: name column, chips and bigger numbers with dividers in one row, titles/wings/pet stay in the middle. */
.pf-id {
  gap: 4px;
}
.pf-name {
  font-size: 1.6rem;
}
.pf-numbers {
  gap: 0;
}
.pf-numbers div {
  padding: 0 28px;
  border-left: 1px solid var(--color-border);
}
.pf-numbers div:first-child {
  border-left: 0;
}
.pf-numbers div:last-child {
  padding-right: 8px;
}
.pf-numbers strong {
  font-size: 1.7rem;
}
.pf-numbers span {
  font-size: 0.8rem;
}
@media (max-width: 720px) {
  .pf-numbers div {
    padding: 0 12px;
  }
}

/* Name column with air: name, class, then faction / legion / server each on their own line. */
.pf-id {
  gap: 4px;
  max-width: none;
  margin-right: 28px;
}
.pf-id .pf-meta {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 4px;
  font-size: 0.88rem;
  line-height: 1.3;
}
.pf-name {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pf-name .faction-icon {
  width: 1.3em;
  height: 1.3em;
  flex-shrink: 0;
}
.pf-id .pf-sub {
  line-height: 1.3;
}

/* Item tooltip filled from NC's own item page (player page equipment). */
.pf-tip.pf-tip-wide { width: 340px; }
.pf-tip-range { font-size: 0.72rem; font-weight: 400; color: #7e8f9a; }
.pf-tip-soul { color: #7fd6ff; }
.pf-tip-gold { color: #ffc94d; }
.pf-tip-bar { height: 5px; margin: 4px 0 2px; border-radius: 3px; background: #2c3036; }
.pf-tip-bar i { display: block; height: 5px; border-radius: 3px; background: #e8a824; }
.pf-tip-skill span { color: #4aa8ff; }
.pf-tip-desc { margin-top: 3px; font-size: 0.78rem; line-height: 1.35; color: #b9c0c7; white-space: pre-line; }
.pf-tip-src { display: flex; justify-content: space-between; gap: 12px; font-size: 0.75rem; color: #8b949e; padding: 1px 0; }
.pf-tip-src span:last-child { text-align: right; }
.pf-tip-src span:first-child { flex: none; }
.pf-tip-tags { margin-top: 6px; }
.pf-tip-tag { display: inline-block; margin-right: 4px; padding: 0 5px; border: 1px solid #3b4047; border-radius: 3px; font-size: 0.68rem; color: #9aa3ad; }

/* Twitch Drops page */
.td-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 26px; }
.td-link { --twitch: #9146ff; color: var(--color-text); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; padding: 8px 16px; border: 1px solid color-mix(in srgb, var(--twitch) 55%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--twitch) 10%, transparent); transition: background .15s, color .15s, border-color .15s; }
.td-link:hover { background: color-mix(in srgb, var(--twitch) 24%, transparent); border-color: var(--twitch); color: var(--color-text); }
.td-link--primary { background: color-mix(in srgb, var(--twitch) 32%, transparent); border-color: color-mix(in srgb, var(--twitch) 80%, transparent); color: #eadfff; }
.td-link--primary:hover { background: color-mix(in srgb, var(--twitch) 46%, transparent); border-color: #b48aff; color: #fff; }
.td-campaign { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 16px 20px; margin: 0 0 16px; }
.td-campaign--live { border-color: var(--color-accent, var(--color-border)); }
.td-head { display: flex; gap: 18px; align-items: center; margin-bottom: 12px; }
.td-head h3 { margin: 0 0 4px; }
.td-head p { margin: 2px 0; }
.td-banner { width: 96px; height: 96px; object-fit: contain; flex: none; border-radius: 8px; }
.td-badge { display: inline-block; font-size: 0.75rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; vertical-align: middle; border: 1px solid var(--color-border); }
.td-badge--live { background: #1f7a3d; border-color: #1f7a3d; color: #fff; }
.td-badge--upcoming { background: #8a6d1a; border-color: #8a6d1a; color: #fff; }
.td-badge--ended { opacity: 0.7; }
.td-countdown { font-weight: 600; }
.td-drops { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.td-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 10px 8px; border: 1px solid var(--color-border); border-radius: 8px; }
.td-drop-icon { width: 64px; height: 64px; object-fit: contain; }
.td-drop-name { font-size: 0.9rem; }
.td-drop-time { font-size: 0.8rem; opacity: 0.75; }
.td-how ol { padding-left: 22px; }
.td-how li { margin: 0 0 6px; }
@media (max-width: 720px) { .td-head { flex-direction: column; align-items: flex-start; } .td-drops { grid-template-columns: repeat(2, 1fr); } }
.td-drop-icon--blank { display: inline-block; border-radius: 8px; background: var(--color-surface2); }
.td-live { margin: 0 0 14px; }
.td-live-head { font-weight: 600; margin: 0 0 6px; }
.td-live-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
/* Twitch Drops in the menu: Twitch purple */
#nav-twitch-drops { color: #b794ff; }
#nav-twitch-drops:hover { background: color-mix(in srgb, #9146ff 18%, transparent); }
#nav-twitch-drops.active, #nav-twitch-drops[aria-current] { color: #d2bcff; background: color-mix(in srgb, #9146ff 22%, transparent); border-color: color-mix(in srgb, #9146ff 60%, transparent); }
:root[data-theme="light"] #nav-twitch-drops { color: #6a2fd0; }
:root[data-theme="light"] #nav-twitch-drops.active, :root[data-theme="light"] #nav-twitch-drops[aria-current] { color: #4f1fa8; background: color-mix(in srgb, #9146ff 16%, transparent); border-color: color-mix(in srgb, #9146ff 55%, transparent); }

/* network scene: the settings window behind the overlay sits a little further right (on every screen size) */
/* hotkeys scene is on the left now (the network scene before it shifted the alternation): stage to the left edge */
@media(min-width:1101px){#feature-hotkeys .fx-stage{justify-content:flex-start;margin-left:24px}#feature-hotkeys .fx-win:first-child{translate:0 0}}
/* network scene: same distance to the left edge as the details scene, the overlay picture lies in front of the settings window */
@media(min-width:1700px){#feature-network .fx-stage{translate:264px 0}#feature-network .fx-win+.fx-win{margin-left:-110px}}
#feature-network .fx-win+.fx-win{position:relative;z-index:2}
/* all scenes: text and pictures sit the same distance from the frame (100px at 1920, less on narrower windows); the designer's offsets (feature-layout.json) move from there */
@media(min-width:1101px){
 .fx-scene .fx-inner{padding-inline:clamp(48px,5.2083vw,100px)}
 .fx-scene .fx-stage{margin:0 !important;justify-content:flex-end;padding:0 !important}
 .fx-scene.flip .fx-stage{justify-content:flex-start}
 .fx-scene .fx-copy{min-width:0;max-width:100%}
 .fx-scene .fx-win,.fx-scene .fx-copy{translate:var(--dx,0px) var(--dy,0px) !important}
 #feature-overlay .fx-win{margin-right:0 !important}
}
@media(min-width:1101px){#feature-details .fx-copy{margin-right:0 !important}}

/* Szenen-Siegel (z. B. "In Entwicklung" beim Assist) */
.fx-badge{display:inline-block;margin:0 0 10px;padding:3px 10px;border:1px solid var(--fx-accent);border-radius:999px;color:var(--fx-accent);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:rgba(9,13,18,.45)}
/* Pet-Stufe: das kleine Overlay schwebt über dem Tier statt es zu verdecken */
@media(min-width:1101px){#feature-petlevel .fx-stage{align-self:flex-start;margin-top:56px}#feature-petlevel .fx-win{--a:16deg}}
/* Teile ohne Fenster (durchsichtiger Grund): kein Rahmen, nur Schatten */
.fx-flat{border:0;border-radius:0;background:none;box-shadow:none;filter:drop-shadow(0 18px 24px rgba(0,0,0,.6)) drop-shadow(0 0 28px color-mix(in srgb,var(--tint) 35%,transparent))}

/* Statistics view of a boss page (see boss-stats.js): box plot per class. */
.boxplot-card {
  padding: 0;
}

.boxplot-svg {
  display: block;
  width: 100%;
  height: auto;
}

.boxplot-svg text {
  fill: var(--color-text);
  font-size: 12px;
}

.boxplot-svg .boxplot-axis {
  fill: var(--color-text-muted);
}

.boxplot-grid {
  stroke: var(--color-border);
}

.boxplot-whisker {
  stroke: var(--color-text-muted);
  stroke-width: 1.5;
}

.boxplot-box {
  fill: var(--color-primary);
  fill-opacity: 0.35;
  stroke: var(--color-primary);
}

.boxplot-median {
  stroke: var(--color-text);
  stroke-width: 3;
}

.boxplot-you {
  stroke: #ff6b6b;
  stroke-width: 2;
  stroke-dasharray: 5 4;
}

.boxplot-svg .boxplot-you-label {
  fill: #ff6b6b;
}

.boxplot-note {
  color: var(--color-text-muted);
  font-size: 13px;
}

.boxplot-you-field {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
  color: var(--color-text-muted);
  font-size: 13px;
}

.boxplot-block .boxplot-note {
  margin: 8px 0 0;
  font-size: 12px;
}

.boxplot-you-input {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 6px 8px;
  min-width: 180px;
}

/* Boss page: the fight numbers on the left, the two view switches (ranking / statistics) on the right, boxes of the same size. */
.stats-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  gap: 12px;
  margin: 4px 0 20px;
}

.stats-bar .stats-row {
  margin: 0;
}

.view-buttons {
  display: flex;
  gap: 12px;
}

.view-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: 12px 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  color: var(--color-text);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.view-button:hover {
  border-color: var(--color-primary);
}

.view-button.active {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Statistics view: the top 10 of the classes, three boxes in a row (two, then one on narrower windows). */
.class-grid.class-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.class-grid-3 .ranked-table.compact {
  width: 100%;
  font-size: 13px;
}

@media (max-width: 1100px) {
  .class-grid.class-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .class-grid.class-grid-3 {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* Statistics charts: dots, hit areas, histogram columns, tooltip. One hue (the accent), everything else recessive. */
.boxplot-dot {
  fill: var(--color-primary);
  fill-opacity: 0.45;
  pointer-events: none;
}

.boxplot-hit {
  fill: transparent;
}

.boxplot-row:hover .boxplot-hit,
.boxplot-svg g:hover > .boxplot-hit,
.boxplot-svg g:focus > .boxplot-hit {
  fill: var(--color-primary);
  fill-opacity: 0.07;
}

.boxplot-svg g:focus {
  outline: none;
}

.hist-bar {
  fill: var(--color-primary);
  fill-opacity: 0.75;
}

.boxplot-svg g:hover .hist-bar {
  fill-opacity: 1;
}

.hist-median {
  stroke-dasharray: 4 3;
}

.boxplot-table {
  margin-top: 10px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.boxplot-table summary {
  cursor: pointer;
}

.stats-tip {
  position: absolute;
  z-index: 50;
  display: none;
  min-width: 140px;
  padding: 8px 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  font-size: 12px;
  pointer-events: none;
}

.stats-tip-title {
  margin-bottom: 4px;
  font-weight: 700;
}

.stats-tip-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.stats-tip-row strong {
  min-width: 70px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.stats-tip-row span {
  color: var(--color-text-muted);
}

/* The two views of a dungeon (bosses / statistics), below its hero. */
.dungeon-view-buttons {
  margin: 14px 0 18px;
  justify-content: flex-end;
}

/* The dungeon statistics: the boss table next to the class share, two boxes in a row (one on narrow windows). */
.class-grid.class-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 900px) {
  .class-grid.class-grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.table-scroll {
  overflow-x: auto;
}

/* Median iDPS per class in the dungeon table: the class icon and the figure, the name in the tooltip. */
.class-medians {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}

.class-median {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.class-median .class-emblem {
  width: 24px;
  height: 24px;
}

/* The class share in the dungeon statistics: smaller text and bars than the full width of the box would give. */
.class-grid-2 .boxplot-svg {
  display: block;
  width: 100%;
  max-width: 340px;
}

/* The server sends the page text for crawlers; app.js replaces it with the real page. Until then it is
   visually hidden (still in the DOM) so the swap does not shove the layout around (CLS). */
.js [data-ssr]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.js main:has(>[data-ssr]){min-height:100vh}
/* Header controls are filled in by app.js: reserve their final size so the row does not jump (CLS). */
@media(min-width:721px){.theme-switcher{box-sizing:border-box;min-width:70px;min-height:38px}.lang-switcher{width:170px}}

/* /aion-2-dps-meter (app.js renderGuide): prose plus three comparison tables. Made for the 1872 px content width of a
   1920x1080 screen: wide columns, 16 px text, generous row padding; below 1100 px the table scrolls sideways instead of squeezing. */
.guide-page h2 { margin: 44px 0 14px; font-size: 24px; }
.guide-page h3 { margin: 30px 0 12px; font-size: 19px; }
.guide-page p, .guide-list li { font-size: 17px; line-height: 1.6; max-width: 62em; }
.guide-page .guide-intro { color: var(--color-text-muted); }
.guide-list { padding-left: 1.3em; }
.guide-list li { margin: 6px 0; }
.guide-table-wrap { overflow-x: auto; margin-bottom: 8px; }
.guide-table { width: 100%; min-width: 1100px; border-collapse: collapse; table-layout: fixed; font-size: 16px; line-height: 1.5; }
.guide-table th, .guide-table td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); overflow-wrap: anywhere; }
.guide-table thead th { font-size: 18px; border-bottom: 2px solid var(--color-border); vertical-align: bottom; }
.guide-table tbody th { width: 17%; font-weight: 600; color: var(--color-text-muted); }
.guide-table thead th:first-child { width: 17%; }
.guide-table .guide-ours { background: color-mix(in srgb, var(--color-primary) 12%, transparent); }
.guide-table td.guide-na { color: var(--color-text-muted); }
.guide-table td.guide-yes { color: var(--color-success); font-weight: 600; }
.guide-table td.guide-no { color: var(--color-danger); font-weight: 600; }

/* /how-it-works (app.js renderArticle): readable prose width. */
/* Two columns across the whole 1872 px content width: lines stay about 90 characters long instead of 250. */
.article-page p, .article-page li { max-width: none; font-size: 18px; }
.article-page .guide-intro { font-size: 20px; max-width: none; }
.article-columns { column-count: 2; column-gap: 72px; }
.article-columns h2 { break-after: avoid; margin-top: 0; padding-top: 34px; }
.article-columns ul, .article-columns ol, .article-columns p { break-inside: avoid; }
.article-flow { margin: 22px 0; padding: 16px 18px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; break-inside: avoid; }
.article-flow-steps { display: flex; flex-wrap: wrap; gap: 10px 0; }
.article-flow-item { display: flex; align-items: center; }
.article-flow-step { padding: 8px 12px; background: var(--color-surface2); border: 1px solid var(--color-border); border-radius: 8px; font-size: 15px; line-height: 1.35; }
.article-flow-step.gap { border-style: dashed; border-color: var(--color-warning); color: var(--color-warning); }
.article-flow-step.result { border-color: var(--color-success); }
.article-flow-arrow { color: var(--color-text-muted); font-size: 18px; padding: 0 9px; }
.article-flow figcaption { margin-top: 12px; color: var(--color-text-muted); font-size: 15px; line-height: 1.5; }
@media (max-width: 1100px) { .article-columns { column-count: 1; } }

/* ---- Players panel with the buff columns (encounters whose uploads carry buff data, see app.js playersPanel) ---- */
.encounter-stack { display: flex; flex-direction: column; gap: 20px; }
.players-panel { overflow-x: auto; }
.players-table { width: 100%; min-width: 1180px; border-collapse: collapse; }
.players-table th { color: var(--color-text-muted); font-weight: normal; font-size: 13px; text-align: left; padding: 4px 8px 8px; }
.players-table th.r { text-align: right; }
.players-table td { padding: 3px 8px; border-bottom: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent); vertical-align: middle; }
.players-table td.pp-main { width: 44%; padding-left: 0; }
.players-table td.pp-main .meter-row { display: block; }
.players-table td.pp-buffs { text-align: right; }
.bf-cell { display: flex; justify-content: flex-end; gap: 4px; }
.bf-tile { position: relative; flex: none; width: 30px; height: 30px; border-radius: 4px; border: 1px solid var(--color-border); background: var(--color-background); box-sizing: border-box; }
.bf-tile.bf-gap { border-color: transparent; background: none; }
.bf-tile.dim .bf-icon { opacity: 0.45; }
.bf-icon { display: block; width: 100%; height: 100%; border-radius: 3px; }
.bf-initials { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 11px; color: var(--color-text-muted); }
.bf-count { position: absolute; right: 2px; bottom: 1px; font-size: 9px; font-weight: 700; color: #fff; text-decoration: none; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.bf-badge { position: absolute; left: -4px; top: -4px; width: 14px; height: 14px; border-radius: 50%; background: var(--color-surface); border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; text-decoration: none; }
.bf-badge .class-emblem, .bf-badge .class-badge { width: 11px; height: 11px; font-size: 6px; }
.buff-legend { font-size: 12px; color: var(--color-text-muted); margin: 10px 0 0; }

/* gear score filter (boss ranking, statistics of a boss and of a dungeon) */
.gear-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 14px; }
.gear-filter .lb-bar { margin: 0; }
.gear-note { font-size: 0.8rem; color: var(--color-text-muted); }
.lb-seg a { color: var(--color-text-muted); font-size: 0.85rem; padding: 6px 14px; text-decoration: none; }
.lb-seg a[aria-selected="true"] { background: var(--color-primary); color: var(--color-primary-on); font-weight: 600; }
.lb-seg a:hover:not([aria-selected="true"]) { color: var(--color-text); }

/* skills of a class at one boss */
.skill-stats { grid-column: 1 / -1; }
.skill-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.skill-tab { border: 1px solid var(--color-border); background: none; color: var(--color-text-muted); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 0.85rem; cursor: pointer; }
.skill-tab.active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-on); font-weight: 600; }
.skill-table td, .skill-table th { white-space: nowrap; }
.skill-name { display: flex; align-items: center; gap: 8px; }
.skill-ico { width: 28px; height: 28px; border-radius: 6px; background: var(--color-surface); flex: none; overflow: hidden; display: inline-block; }
.skill-ico img { width: 28px; height: 28px; display: block; }
.skill-share { width: 34%; }
.skill-share i { display: inline-block; height: 10px; border-radius: 5px; background: var(--color-primary); vertical-align: middle; margin-right: 8px; min-width: 3px; max-width: calc(100% - 60px); }

/* group timeline and buffs per skill of an encounter */
.tl-panel, .sb-panel { margin-top: 22px; }
.tl-svg { display: block; width: 100%; height: auto; margin-top: 10px; touch-action: none; cursor: crosshair; user-select: none; }
.tl-label, .tl-name { fill: var(--color-text); font-size: 14px; font-weight: 700; }
.tl-label { fill: var(--color-text-muted); font-weight: 500; font-size: 13px; }
.tl-lane { fill: var(--color-bg, #0d1a2c); opacity: 0.55; }
.tl-hp { fill: none; stroke: #ff7b7b; stroke-width: 2; }
.tl-group { fill: #58d38c; opacity: 0.75; }
.tl-death { fill: #ff7b7b; font-size: 15px; font-weight: 700; }
.tl-grid { stroke: var(--color-border); stroke-dasharray: 2 4; }
.tl-tick { fill: var(--color-text-muted); font-size: 12px; }
.tl-brush { fill: var(--color-primary); opacity: 0.16; stroke: var(--color-primary); stroke-dasharray: 4 3; pointer-events: none; }
.tl-summary { margin: 8px 0 0; font-size: 0.9rem; color: var(--color-text-muted); min-height: 1.4em; }
.tl-legend { display: flex; gap: 18px; margin-top: 6px; font-size: 0.8rem; color: var(--color-text-muted); }
.tl-key { display: inline-block; vertical-align: middle; margin-right: 6px; }
.tl-key-use { width: 3px; height: 14px; background: var(--color-primary); }
.tl-key-group { width: 18px; height: 4px; background: #58d38c; }
/* data quality badges and the analysis panels (damage curve, players, damage taken by source, effect usage, pull comparison) */
.q-badge { display: inline-block; vertical-align: middle; padding: 1px 7px; border-radius: 999px; border: 1px solid currentColor; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1.5; white-space: nowrap; cursor: help; }
.q-certain { color: #2f9e5f; background: rgba(60, 190, 110, 0.12); }
.q-derived { color: #2f78c2; background: rgba(70, 150, 230, 0.12); }
.q-estimated { color: #b06a00; background: rgba(240, 150, 30, 0.14); }
.q-unavailable { color: var(--color-text-muted); background: rgba(128, 128, 128, 0.12); }
:root[data-theme="dark"] .q-certain, :root:not([data-theme="light"]) .q-certain { color: #6fdc9f; }
:root[data-theme="dark"] .q-derived, :root:not([data-theme="light"]) .q-derived { color: #7fbcff; }
:root[data-theme="dark"] .q-estimated, :root:not([data-theme="light"]) .q-estimated { color: #ffb865; }
.q-na { color: var(--color-text-muted); font-size: 0.85rem; }
.q-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 18px 0 0; font-size: 0.8rem; color: var(--color-text-muted); }
.dc-panel .meter-panel-header { align-items: flex-start; }
.dc-svg { cursor: crosshair; }
.dc-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; }
.dc-hp { fill: none; stroke: #ff7b7b; stroke-width: 2; stroke-dasharray: 6 4; opacity: 0.9; }
.dc-bar { fill: var(--color-primary); opacity: 0.35; }
.dc-cursor { stroke: var(--color-text); stroke-width: 1; opacity: 0.55; pointer-events: none; }
.dc-ytick { font-size: 12px; }
.dc-key-line { width: 18px; height: 4px; background: var(--color-primary); }
.dc-key-bar { width: 12px; height: 10px; background: var(--color-primary); opacity: 0.4; }
.dc-key-hp { width: 18px; height: 0; border-top: 2px dashed #ff7b7b; }
.dc-players { align-items: center; }
.dc-chips-label { font-size: 0.8rem; color: var(--color-text-muted); }
.dc-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.an-table th { white-space: nowrap; }
.an-table td { vertical-align: middle; }
.tk-item { border-top: 1px solid var(--color-border); padding: 6px 0; }
.tk-item summary { display: grid; grid-template-columns: minmax(120px, 220px) 1fr auto; align-items: center; gap: 14px; cursor: pointer; padding: 4px 0; }
.tk-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: rgba(128, 128, 128, 0.15); }
.tk-bar i { display: block; height: 100%; }
.tk-boss { background: #ff7b7b; }
.tk-add { background: #f0b030; }
.tk-other { background: #8a93a6; }
.tk-tag { display: inline-block; padding: 0 7px; border-radius: 999px; font-size: 0.72rem; color: #10161f; }
.tk-legend { display: flex; gap: 16px; margin: 4px 0 8px; font-size: 0.8rem; color: var(--color-text-muted); }
.tk-legend i { display: inline-block; vertical-align: middle; margin-right: 6px; }
.bu-bar { display: flex; height: 10px; min-width: 140px; border-radius: 5px; overflow: hidden; background: rgba(128, 128, 128, 0.15); }
.bu-bar i { display: block; height: 100%; }
.bu-active { background: #58d38c; }
.bu-idle { background: #f0b030; }
.bu-dead { background: #ff7b7b; }
.cmp-pull { margin: 0 0 20px; }
@media (max-width: 700px) {
  .tk-item summary { grid-template-columns: 1fr auto; }
  .tk-item summary .tk-bar { grid-column: 1 / -1; order: 3; }
  .an-table, .cmp-pull .cmp-table { display: block; overflow-x: auto; }
}
.sb-panel .skill-table { width: 100%; }
.sb-panel .skill-table td { vertical-align: middle; }
.sb-panel .skill-table td.sb-chips { white-space: normal; width: 100%; }
.sb-chips > * { vertical-align: middle; }
.sb-chip { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; margin: 2px 4px 2px 0; padding: 3px 4px; min-width: 44px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); font-size: 0.72rem; line-height: 1; cursor: default; }
.sb-chip b { color: var(--color-primary); }
.sb-ico { width: 32px; height: 32px; border-radius: 6px; overflow: hidden; background: var(--color-border); flex: none; display: inline-block; }
.sb-ico img { width: 32px; height: 32px; display: block; }
.sb-panel .skill-table td:nth-child(2) { text-align: right; padding-right: 24px; }

/* Order marker on a boss card of an expedition dungeon (see EXPEDITION_BOSS_ORDER in app.js). */
.poster-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(13, 21, 28, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
}

.poster-badge--final {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Server status page: banner, four figures, region tabs, one tile per game address. */
.status-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 14px 0; padding: 14px 22px; border-radius: var(--radius-card); border: 1px solid var(--color-warning); background: linear-gradient(90deg, color-mix(in srgb, var(--color-warning) 22%, var(--color-surface)), var(--color-surface)); color: var(--color-text); text-decoration: none; }
.status-banner.scheduled { border-color: var(--color-info); background: linear-gradient(90deg, color-mix(in srgb, var(--color-info) 18%, var(--color-surface)), var(--color-surface)); }
.status-banner strong { font-size: 18px; }
.status-banner em { margin-left: auto; font-style: normal; font-size: 13px; color: var(--color-text-muted); }
.status-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--color-text-muted); flex: none; }
.status-dot.up { background: var(--color-success); box-shadow: 0 0 8px var(--color-success); }
.status-dot.down { background: var(--color-danger); box-shadow: 0 0 8px var(--color-danger); }
.status-dot.maintenance { background: var(--color-warning); box-shadow: 0 0 8px var(--color-warning); }
.status-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; margin: 14px 0; }
.status-kpi { padding: 16px 20px; background: color-mix(in srgb, var(--color-surface) 82%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.status-kpi small { display: flex; gap: 8px; align-items: center; color: var(--color-text-muted); font-size: 13px; }
.status-kpi b { display: block; font-size: 30px; margin-top: 4px; }
.status-kpi span { font-size: 12px; color: var(--color-text-muted); }
.status-kpi.up b { color: var(--color-success); }
.status-kpi.down b { color: var(--color-danger); }
.status-kpi.maintenance b { color: var(--color-warning); }
.status-meter { height: 6px; margin-top: 8px; border-radius: 4px; background: var(--color-surface2); overflow: hidden; }
.status-meter span { display: block; height: 100%; background: var(--color-success); border-radius: 4px; }
.status-meter.maintenance span { background: var(--color-warning); }
.status-meter.down span { background: var(--color-danger); }
.status-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.status-tab { flex: 1 1 200px; text-align: left; padding: 12px 18px; border-radius: var(--radius-card); background: var(--color-surface); border: 1px solid var(--color-border); border-bottom: 3px solid var(--c, var(--color-text-muted)); color: var(--color-text); cursor: pointer; font: inherit; }
.status-tab.up { --c: var(--color-success); }
.status-tab.maintenance { --c: var(--color-warning); }
.status-tab.down { --c: var(--color-danger); }
.status-tab.on { background: color-mix(in srgb, var(--c) 14%, var(--color-surface2)); border-color: var(--c); }
.status-tab b { display: flex; gap: 10px; align-items: center; font-size: 17px; }
.status-tab small { color: var(--color-text-muted); }
.status-panel { padding: 22px 26px; background: color-mix(in srgb, var(--color-surface) 82%, transparent); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.status-panel-head { display: flex; align-items: baseline; gap: 16px; }
.status-panel-head h3 { margin: 0; font-size: 22px; }
.status-panel-head span { color: var(--color-text-muted); }
.status-sec { display: flex; align-items: center; gap: 14px; margin: 18px 0 8px; }
.status-sec small { color: var(--color-text-muted); }
.status-sec .status-meter { flex: 1; max-width: 420px; margin: 0; }
.status-tiles { display: flex; flex-wrap: wrap; gap: 6px; }
.status-tile { --c: var(--color-text-muted); width: 112px; padding: 7px 10px; border-radius: 8px; background: color-mix(in srgb, var(--c) 20%, var(--color-surface2)); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); font-variant-numeric: tabular-nums; }
.status-tile.up { --c: var(--color-success); }
.status-tile.maintenance { --c: var(--color-warning); }
.status-tile.down { --c: var(--color-danger); }
.status-tile b { display: block; font-size: 19px; }
.status-tile small { color: var(--color-text-muted); font-size: 11px; }
.status-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0; font-size: 13px; color: var(--color-text-muted); }
.status-legend span { display: inline-flex; align-items: center; gap: 6px; }

/* Runs tab: sessions with a tile per fight. */
.run-filters { margin: 1rem 0 0.2rem; }
.run-filters .pf-pill { padding: 7px 14px; font-size: 0.95rem; font-weight: 600; border-radius: 99px; }
.run-filters .pf-pill b { color: var(--color-text-muted); font-weight: 600; }
.run-day { margin: 1.4rem 0 0.5rem; color: var(--color-text-muted); font-weight: 700; letter-spacing: 0.03em; display: flex; align-items: center; gap: 12px; }
.run-day::after { content: ""; flex: 1; border-top: 1px solid var(--color-border); }
.run-session { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); margin-bottom: 10px; overflow: hidden; }
.run-head { display: flex; align-items: center; gap: 14px; padding: 12px 18px; cursor: pointer; list-style: none; }
.run-head::-webkit-details-marker { display: none; }
.run-head::before { content: "\25B6"; color: var(--color-text-muted); font-size: 0.8rem; transition: transform 0.15s; }
.run-session[open] > .run-head::before { transform: rotate(90deg); }
.run-head:hover { background: var(--color-surface2); }
.run-time { color: var(--color-text-muted); min-width: 108px; font-variant-numeric: tabular-nums; }
.run-head h3 { margin: 0; font-size: 1.05rem; }
.run-open { padding: 5px 12px; border: 1px solid var(--color-primary); border-radius: 6px; color: var(--color-primary); font-size: 0.85rem; text-decoration: none; white-space: nowrap; }
.run-open:hover { border-color: var(--color-primary); background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-primary); }
.run-stats { margin-left: auto; display: flex; gap: 30px; }
.run-stats > div { text-align: right; }
.run-stats strong { display: block; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.run-stats strong.accent { color: var(--color-primary); }
.run-stats span { font-size: 0.75rem; color: var(--color-text-muted); }
.run-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 10px 18px; border-top: 1px solid var(--color-border); font-size: 0.85rem; }
.run-group-label { color: var(--color-text-muted); margin-right: 4px; }
.run-bar { display: flex; align-items: center; gap: 30px; padding: 10px 18px; border-top: 1px solid var(--color-border); }
.run-bar .run-stats { margin-left: 0; }
.run-bar .run-stats > div { text-align: left; }
.run-member { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 4px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface2); color: inherit; text-decoration: none; }
.run-member.self { border-color: var(--color-primary); }
.run-member:hover { border-color: var(--color-primary); }
.run-member .class-emblem { width: 20px; height: 20px; }
.run-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; padding: 14px 18px 18px; border-top: 1px solid var(--color-border); }
.run-tile { position: relative; display: block; background: var(--color-surface2); border: 1px solid var(--color-border); border-radius: 8px; padding: 10px 12px; color: inherit; text-decoration: none; }
.run-tile:hover { border-color: var(--color-primary); }
.run-tile.record { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--glow-primary); }
.run-tile.empty-run { opacity: 0.5; }
.run-boss { font-size: 0.82rem; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 18px; }
.run-idps { font-size: 1.4rem; font-weight: 800; margin: 2px 0; font-variant-numeric: tabular-nums; }
.run-idps small { font-size: 0.75rem; color: var(--color-text-muted); font-weight: 600; }
.run-meter { height: 4px; background: var(--color-background); border-radius: 3px; margin: 6px 0 5px; overflow: hidden; }
.run-meter i { display: block; height: 100%; background: var(--color-primary); }
.run-meta { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--color-text-muted); }
.run-star { position: absolute; right: 9px; top: 8px; color: var(--color-primary); }
.run-more { display: block; margin: 1.2rem auto; }
@media (max-width: 800px) {
  .run-head { flex-wrap: wrap; }
  .run-head .run-stats { margin-left: 0; }
  .run-bar { flex-wrap: wrap; gap: 14px 24px; }
}

/* the effects on the boss: a thin bar over the fight with a stretch for every time the effect was on */
.bd-cell { width: 40%; min-width: 180px; }
.bd-bar { position: relative; height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--color-text) 13%, transparent); overflow: hidden; }
.bd-bar i { position: absolute; top: 0; bottom: 0; background: #ff7b7b; opacity: .85; }
/* Light theme: the track and the stretches were hardly to be told from the card (the user, 2026-10-26) - a darker track, full-strength stretches in a deeper red. */
:root[data-theme="light"] .bd-bar { background: color-mix(in srgb, var(--color-text) 22%, transparent); }
:root[data-theme="light"] .bd-bar i { background: #d6403a; opacity: 1; }

.rank-up { color: #4cc38a; }
.rank-down { color: #ff7b7b; }

/* the legal pages: paragraphs inside a section keep a gap, bullet lists are indented with the further lines of an item under its first word */
.legal-section p + p, .legal-section p + ul, .legal-section ul + p { margin-top: 0.8em; }
.legal-list { margin: 0.6em 0 0; padding-left: 1.4em; }
.legal-list li { margin: 0 0 0.6em; padding-left: 0.2em; }
.legal-list li::marker { color: var(--accent, #ffba42); }

/* The bosses of one run as tabs above the encounter lists. */
.boss-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.boss-tab { display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); color: var(--color-text); text-decoration: none; }
.boss-tab:hover { border-color: var(--color-primary); }
.boss-tab[aria-current="page"] { border-color: var(--color-primary); background: var(--color-surface2); box-shadow: inset 0 0 0 1px var(--glow-primary); }
.boss-tab-thumb { width: 56px; height: 38px; border-radius: 6px; background-size: cover; background-position: center; background-color: var(--color-surface2); }
.boss-tab b { display: block; font-size: 0.9rem; }
.boss-tab small { color: var(--color-text-muted); font-size: 0.75rem; }

/* ---- Download page (2026-10-26): download card | screenshot viewer | latest client changes, then steps and FAQ ---- */
.dl-top { display: grid; grid-template-columns: 560px minmax(0, 1fr) 480px; gap: 20px; align-items: stretch; }
.dl-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.dl-main { padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.dl-pill { align-self: flex-start; padding: 3px 11px; border-radius: 99px; font-size: 12.5px; color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 12%, transparent); border: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent); }
.dl-main h2 { margin: 0; font-size: 34px; line-height: 1.15; }
.dl-main h2 span { color: var(--color-primary); }
.dl-lead { margin: 0; color: var(--color-text-muted); }
.dl-cta { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 30px; font-size: 19px; font-weight: 700; text-decoration: none; color: #2a1a04; border-radius: 8px; border: 1px solid #d98e00; background: linear-gradient(180deg, #ffd35c, #ffb51b); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 4px 0 #b86f00; margin-bottom: 4px; }
.dl-cta svg { width: 28px; height: 28px; }
.dl-cta:hover { filter: brightness(1.05); }
.dl-cta:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 2px 0 #b86f00; }
.dl-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
.dl-tiles > * { background: color-mix(in srgb, var(--color-text) 6%, var(--color-surface)); border-radius: 8px; padding: 10px 12px; text-align: center; color: inherit; text-decoration: none; }
.dl-tiles b { display: block; font-size: 20px; }
.dl-tiles span { font-size: 12px; color: var(--color-text-muted); }
.dl-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.dl-checks li::before { content: "✔"; color: var(--color-success); margin-right: 8px; }
.dl-sha > span:first-child { white-space: nowrap; }
.dl-sha { margin-top: auto; display: flex; align-items: center; gap: 8px; color: var(--color-text-muted); font-size: 14px; min-width: 0; }
.dl-sha code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; padding: 2px 7px; border: 1px solid var(--color-border); border-radius: 5px; background: var(--color-background); }
.dl-qwrap { position: relative; display: inline-flex; }
.dl-q { width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1.5px solid var(--color-primary); color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, transparent); font: inherit; font-size: 13px; cursor: help; }
.dl-pop { display: none; position: absolute; left: -10px; bottom: 30px; z-index: 20; width: 430px; max-width: 80vw; padding: 16px 18px; flex-direction: column; gap: 6px; background: var(--color-background); border: 1px solid var(--color-primary); border-radius: 10px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); color: var(--color-text); font-size: 13.5px; line-height: 1.5; text-align: left; white-space: normal; }
.dl-pop code { font-size: 12px; padding: 4px 7px; border: 1px solid var(--color-border); border-radius: 5px; background: var(--color-surface); word-break: break-all; }
.dl-cmd { display: flex; align-items: center; gap: 6px; }
.dl-cmd code { flex: 1; min-width: 0; }
.dl-pop .dl-cmd code { white-space: normal; overflow: visible; }
.dl-copy { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface); color: var(--color-text-muted); cursor: pointer; }
.dl-copy:hover { border-color: var(--color-primary); color: var(--color-primary); }
.dl-copy.done { border-color: var(--color-primary); color: var(--color-primary); }
.dl-pop-alt { opacity: 0.75; margin-top: 6px; }
.dl-qwrap:hover .dl-pop, .dl-qwrap:focus-within .dl-pop, .dl-qwrap.open .dl-pop { display: flex; }
.dl-stage { padding: 20px; display: flex; flex-direction: column; min-width: 0; }
.dl-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.dl-tabs button { padding: 6px 14px; border-radius: 99px; border: 1px solid var(--color-border); background: transparent; color: var(--color-text-muted); font: inherit; font-size: 13px; cursor: pointer; }
.dl-tabs button:hover { border-color: var(--color-primary); }
.dl-tabs button.on { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-on); font-weight: 700; }
.dl-view { flex: 1; min-height: 380px; position: relative; display: grid; place-items: center; padding: 20px; border-radius: 8px; overflow: hidden; background: #0b131a url(/images/ui/banner-bg-1920.webp) center / cover; }
.dl-view::before { content: ""; position: absolute; inset: 0; background: rgba(8, 16, 24, 0.55); }
.dl-view img { position: relative; max-height: 340px; max-width: 100%; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); }
.dl-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 12px; }
.dl-thumbs button { padding: 0; border: 1px solid var(--color-border); border-radius: 6px; background: none; opacity: 0.7; cursor: pointer; overflow: hidden; }
.dl-thumbs button.on { opacity: 1; border-color: var(--color-primary); }
.dl-thumbs img { display: block; width: 100%; height: 70px; object-fit: cover; }
.dl-side { padding: 22px; min-width: 0; }
.dl-side h2 { margin: 0 0 4px; font-size: 24px; }
.dl-side h3 { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--color-border); font-size: 17px; }
.dl-sub { margin: 4px 0 6px; color: var(--color-text-muted); }
.dl-rel { padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.dl-rel-head { display: flex; gap: 12px; align-items: baseline; }
.dl-rel-head b { color: var(--color-primary); }
.dl-rel-head span { color: var(--color-text-muted); font-size: 13px; }
.dl-rel p { margin: 2px 0 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-all { margin: 14px 0 0; }
.dl-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 20px; }
.dl-step { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; }
.dl-num { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary); color: var(--color-primary-on); font-weight: 800; display: grid; place-items: center; }
.dl-step b { display: block; font-size: 15.5px; margin-bottom: 2px; }
.dl-step-link { display: inline-block; margin-top: 6px; font-size: 13.5px; font-weight: 600; color: var(--color-primary); text-decoration: none; }
.dl-step-link:hover { text-decoration: underline; }
.dl-step div span { display: block; color: var(--color-text-muted); font-size: 13.5px; line-height: 1.45; }
.dl-faq-head { margin: 28px 0 12px; }
.dl-faq { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.dl-faq-card { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; transition: border-color 0.15s, transform 0.15s; }
.dl-faq-card:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.dl-faq-ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, transparent); border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent); }
.dl-faq-card b { font-size: 15.5px; line-height: 1.3; }
.dl-faq-card > span:last-child { color: var(--color-text-muted); font-size: 13.5px; line-height: 1.5; }
@media (max-width: 1500px) { .dl-top { grid-template-columns: 1fr 1fr; } .dl-side { grid-column: 1 / -1; } .dl-steps, .dl-faq { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .dl-top, .dl-steps, .dl-faq { grid-template-columns: 1fr; } .dl-pop { left: auto; right: -10px; } }
.dl-page .download-meta { margin-top: 14px; }
.dl-faq-head { font-size: 24px; }

/* DPS = Daevas Power Suite: the three initials of the name in the banner are highlighted */
.home-banner h1.home-banner-name span { color: inherit; }
.home-banner h1.home-banner-name b { color: #ffba42; font-weight: inherit; }

/* FAQ row under the two ranking cards: five equal cards side by side, two then one column on narrower windows */
.home-faq { margin-top: 24px; }
.home-faq-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 0 4px 4px; }
.home-faq-item { background: var(--color-surface2); border: 1px solid var(--color-border); border-radius: 8px; padding: 14px 16px; }
.home-faq-item b { display: block; margin-bottom: 6px; color: var(--color-text); }
.home-faq-item p { margin: 0; color: var(--color-text-muted); font-size: 14px; line-height: 1.5; }
@media (max-width: 1500px) { .home-faq-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1100px) { .home-faq-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .home-faq-grid { grid-template-columns: 1fr; } }

/* Banner slider: pictures fade into each other, the squares jump to a picture, the arrows go on or back */
.home-banner{position:relative}
.home-banner:focus-visible{outline:2px solid #ffba42;outline-offset:-4px}
.home-banner-bgimg{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;opacity:0;transition:opacity .6s ease}
.home-banner-bgimg.is-on{opacity:1}
.home-banner-stage,.home-banner-copy{transition:opacity .18s ease}
.home-banner-stage.is-out,.home-banner-copy.is-out{opacity:0}
/* windows with see-through areas get a dark fill, so that the gold frame gradient does not shine through */
.home-banner-win.is-dark{background:linear-gradient(#142330,#142330) padding-box,linear-gradient(135deg,#ffe2a0 0%,#ffba42 28%,#e8731c 62%,#7f3512 100%) border-box}
/* a window that already carries its own frame and fade */
.home-banner-win.is-bare{border:0;background:none}
.home-banner-win.is-over{position:relative;z-index:3;margin-left:-70px;margin-top:60px}
.home-slide-more{display:inline-block;margin-top:10px;color:#ffba42;font-size:14px;font-weight:700;text-decoration:none}
.home-slide-more:hover{text-decoration:underline}
.home-slider-arrow{position:absolute;top:50%;z-index:5;display:flex;align-items:center;justify-content:center;width:26px;height:36px;margin-top:-18px;padding:0;border:0;background:none;color:#fff;opacity:.95;cursor:pointer;filter:drop-shadow(0 0 2px rgba(0,0,0,.95)) drop-shadow(0 1px 5px rgba(0,0,0,.9))}
.home-slider-arrow:hover{color:#ffba42}
.home-slider-arrow-prev{left:8px}.home-slider-arrow-next{right:8px}
.home-slider-dots{position:absolute;left:50%;bottom:46px;z-index:5;display:flex;gap:8px;transform:translateX(-50%)}
.home-slider-dot{width:13px;height:13px;padding:0;border:1px solid rgba(0,0,0,.55);border-radius:2px;background:rgba(255,255,255,.55);cursor:pointer}
.home-slider-dot:hover{background:rgba(255,255,255,.85)}
.home-slider-dot.is-on{background:#ffba42}
.home-slider-dot:focus-visible,.home-slider-arrow:focus-visible{outline:2px solid #ffba42;outline-offset:2px}
@media(max-width:1100px){.home-slider-arrow{display:none}.home-slider-dots{bottom:14px}}
@media(prefers-reduced-motion:reduce){.home-banner-bgimg,.home-banner-stage,.home-banner-copy{transition:none}}

/* The Pantheon tab: the ring as in the game, the sums beside it, the decorations by slot, the collection folded below. */
.pf-pan-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}
.pf-pan-tabs button {
  padding: 6px 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.pf-pan-tabs button small {
  margin-left: 6px;
  font-size: 0.75rem;
}
.pf-pan-tabs button[aria-selected="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-on);
}
.pf-pan-body {
  display: grid;
  grid-template-columns: minmax(360px, 600px) minmax(220px, 300px) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.pf-pan-ring {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--color-surface2) 0%, transparent 70%);
}
.pf-pan-ring::before,
.pf-pan-ring::after {
  content: "";
  position: absolute;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  pointer-events: none;
}
.pf-pan-ring::before {
  inset: 1%;
}
.pf-pan-ring::after {
  inset: 22%;
}
.pf-pan-slot {
  position: absolute;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  background: var(--g, var(--color-border));
  box-sizing: border-box;
}
.pf-pan-slot img {
  position: absolute;
  inset: 6%;
  width: 88%;
  height: 88%;
  object-fit: cover;
  background: var(--color-bg, #0c1620);
}
.pf-pan-slot span {
  position: relative;
  font-weight: 700;
}
.pf-pan-slot.frame {
  width: 10.5%;
  aspect-ratio: 1;
  border-radius: 50%;
}
.pf-pan-slot.frame img {
  border-radius: 50%;
  inset: 5%;
  width: 90%;
  height: 90%;
}
.pf-pan-slot.statue {
  width: 15%;
  aspect-ratio: 1;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.pf-pan-slot.statue img {
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  object-fit: contain;
}
.pf-pan-slot.colossus {
  width: 28%;
  aspect-ratio: 1;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.pf-pan-slot.colossus img {
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  object-fit: contain;
}
.pf-pan-slot.empty {
  background: var(--color-border);
  opacity: 0.45;
}
.pf-pan h4 {
  margin: 0 0 8px;
  font-size: 0.95rem;
  color: var(--color-text-muted);
}
.pf-pan-totals {
  width: 100%;
  border-collapse: collapse;
}
.pf-pan-totals td {
  padding: 5px 0;
  border-bottom: 1px dashed var(--color-border);
}
.pf-pan-totals td:last-child {
  text-align: right;
  font-weight: 700;
}
.pf-pan-slots {
  display: grid;
  gap: 14px;
}
.pf-pan-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0;
  border-bottom: 1px dashed var(--color-border);
}
.pf-pan-row small {
  color: var(--color-text-muted);
  text-align: right;
}
.pf-pan-owned {
  margin-top: 20px;
}
.pf-pan-owned summary {
  cursor: pointer;
  font-weight: 600;
  margin-bottom: 10px;
}
.pf-pan-owned .pf-pan-row:not(.placed) span {
  color: var(--color-text-muted);
}
@media (max-width: 1100px) {
  .pf-pan-body {
    grid-template-columns: minmax(300px, 560px) 1fr;
  }
  .pf-pan-slots {
    grid-column: 1 / -1;
  }
}
@media (max-width: 720px) {
  .pf-pan-body {
    grid-template-columns: 1fr;
  }
}