/* The leaderboard site's styles: a plain dark page laid out after helltides.com, not the game, in the colors of
   the user's earlier BD report pages (src/d4_affixes/bd_report_view.html: warm grays and a gold accent; user,
   09-28). The filter rules and the data layer's colors are appended by pages.filter_css() and color_css(). */
:root {
  color-scheme: dark;
  --bg: #111315;
  --panel: #1b1e20;
  --panel-2: #24282a;
  --hover: #212528;
  --line: #35393b;
  --line-strong: #505658;
  --text: #e9e6df;
  --muted: #a9aaa6;
  --faint: #7d7f7b;
  --accent: #dab881;
  --seg: #191b1d;
  --seg-on: #3c3426;
  --seg-on-text: #dab881;
  --gold: #f5c451;
  --silver: #d0d2cc;
  --bronze: #d99a6c;
  --review: #f0b429;
  --badge-line: #62513a;
  --scroll: #6b6152;         /* the class tabs' scrollbar on computers */
  --out: #ec8a80;            /* a filter tag excluded */
  --out-bg: #36201e;
  --out-line: #6e3a35;
  --s-global: #8fb9ff;       /* the servers: beside a leader on the home page, in the lists' tags and buttons */
  --s-global-bg: rgba(110, 160, 255, .15);
  --s-global-on: rgba(110, 160, 255, .26);    /* its button, picked */
  --s-cn: #f28a7e;
  --s-cn-bg: rgba(240, 100, 88, .15);
  --s-cn-on: rgba(240, 100, 88, .26);
  --q-common: #d5d5d0;
  --q-magic: #7eaef1;
  --q-rare: #e5d768;
  --q-legendary: #eb954f;
  --q-unique: #dec48a;
  --q-mythic: #c77dff;
  --q-set: #8ad07f;          /* until the data layer gives the game's set color (pages.color_css) */
  --set-off: #8f8f8a;        /* a set bonus not reached: the game's grey (ruAn's 无名者之贝鲁, 2026-10-04) */
  /* An affix's marks, the colours of the game's own signs in the September screenshots (VIEW_MODEL.md "行") */
  --m-greater: #efa77d;
  --m-enchanted: #7878f0;
  --m-tempered: #9fb7c9;
  --m-transfigured: #e0d8c0;
  --value-mark: #9b9b9b;     /* the [x] or [+] after a power's value: the grey of its range in the game */
  --count: #c8c8c8;          /* the counts at an item's foot, "1/4" (the crown's "回火: 1/4") */
  --affix: #b3a99b;          /* an item's plain affix, as the game's tooltip writes it (its texts' {c:FFB3A99B}) */
  --affix-greater: #e3e0d9;  /* a greater affix, an affix's number and an item's main stat, whiter (c_white) */
  --chain-top: #bc7c23;      /* the chain between a runeword's two pictures: gold at the condition rune's, */
  --chain-bottom: #bb62ac;   /* purple at the effect rune's (measured on 秋叶大魔王's Enigma, 2026-10-04) */
  /* Paragon boards (pages._board, drawn by site.js): the board, the glyph's range, the path and the nodes. */
  --pb-bg: #16191b;
  --pb-tile: #0e0f10;        /* the black square each node sits on (site.js nt; the game's Common_Node_BG_Black) */
  --pb-range: rgba(214, 84, 76, .17);
  --pb-path: #dab881;
  --pb-normal: #d9d3c5;
  --pb-socket: #e0625a;
  --pb-gate: #86c9bd;
  --glyph-line: #6a3b37;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --cjk: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC";
}
/* Chinese, Japanese and Korean each get their own fonts, since the same characters are drawn differently in
   each; system-ui comes last for them because on Windows it can be a Chinese font. */
:lang(zh-Hant) { --cjk: "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", "Noto Sans TC"; }
:lang(ja) {
  --cjk: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans CJK JP",
    "Noto Sans JP";
}
:lang(ko) { --cjk: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", "Noto Sans KR"; }
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); font: 15px/1.5 var(--font); -webkit-text-size-adjust: 100%; }
:lang(zh), :lang(ja), :lang(ko) {
  --font: -apple-system, "Segoe UI", Roboto, "Noto Sans", var(--cjk), system-ui, sans-serif;
}
/* Text marked with its language draws in that language's fonts: --font, which a language's game fonts come before
   (<language>/fonts.css, only for the page's own language), so a name in the language menu keeps the system's. */
[lang], :lang(zh), :lang(ja), :lang(ko) { font-family: var(--font); }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
main { width: 100%; max-width: 1180px; margin: 0 auto; padding: 20px 16px 48px; flex: 1; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* Header: site name and language, then the classes as tabs. */
.top { position: sticky; top: 0; z-index: 10; background: rgba(25, 27, 29, .96); border-bottom: 1px solid var(--line); }
.top .bar { max-width: 1180px; margin: 0 auto; padding: 12px 16px 0; display: flex; align-items: center; gap: 12px; }
.brand { flex: 0 1 auto; min-width: 0; font-weight: 700; font-size: 1.05rem; line-height: 1.3; }
/* The site's mark before its name: the browser icons' six wings without their plate (static/brand/six-wings-mark.svg,
   the same here; Leo 2026-10-19 16:47 UTC, of them at 22 pixels, 20 on phones, in the gold square's place: 「可以」). */
.brand::before {
  content: ""; display: inline-block; width: 22px; height: 22px; margin-right: 8px; vertical-align: middle;
  position: relative; top: -2px; background: center / contain no-repeat;
  background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E\
  %3Cpath fill='%23e2b76b' fill-rule='evenodd' d='\
  M104 15L109 20L120 34L134 52L147 70L161 89L174 107L188 126L204 147L218 166L230 182L243 243L242 245L217 220\
  L212 215L163 198L154 194L146 186L137 175L125 160L127 159L186 176L170 168L136 151L122 144L104 106L97 91L98 89\
  L117 103L136 117L154 131L171 144L178 149L166 137L159 129L145 114L136 104L129 96L112 44L104 17ZM407 16L408 18\
  L391 73L383 97L375 105L368 113L357 125L345 138L337 147L345 141L358 131L376 117L394 104L412 91L415 90L413 96\
  L398 127L390 144L371 154L328 175L344 171L372 163L387 159L385 163L374 176L366 186L358 195L311 211L299 216\
  L279 236L272 244L270 245L271 236L282 184L289 173L303 155L317 136L332 116L345 98L359 79L373 60L389 39L401 23Z\
  M5 192L77 206L196 230L210 245L217 253L226 263L237 275L242 282L231 279L203 270L196 270L150 286L142 289\
  L133 288L92 278L94 276L161 254L147 256L89 266L83 265L55 250L38 241L38 240L128 237L126 236L63 230L56 227\
  L36 214L10 197L5 194ZM504 192L507 193L474 215L453 229L384 236L392 237L423 238L475 239L471 242L439 259\
  L425 266L361 255L352 254L405 271L421 276L417 278L374 289L365 287L331 275L312 269L273 282L271 281L280 271\
  L287 263L298 251L307 241L316 231L322 229L386 216L498 193ZM272 299L303 308L330 316L339 325L346 333L373 360\
  L380 368L403 391L410 399L426 415L433 423L444 434L442 435L407 419L385 409L376 398L367 388L358 377L348 366\
  L343 361L356 382L373 410L392 442L411 474L424 495L423 497L414 489L400 478L387 467L373 456L357 443L350 438\
  L339 409L321 360L329 409L331 423L324 417L313 405L306 397L298 388L295 367L291 330L288 323L274 304ZM236 300\
  L240 300L238 304L225 323L222 327L215 388L207 396L200 404L188 417L183 423L182 423L183 412L191 364L191 361\
  L171 416L163 438L149 449L135 460L119 473L105 484L90 496L89 494L108 462L125 434L140 409L157 381L170 360\
  L165 365L153 378L144 389L132 402L125 410L83 429L72 434L69 433L82 420L89 412L107 394L114 386L142 358L149 350\
  L180 319L183 316L229 302Z'/%3E%3C/svg%3E");
}
/* Menus: the language one in the header, the round one under a page's heading (site.js closes them). */
.menu { position: relative; }
.langs { flex: none; margin-left: auto; }
.menu summary {
  list-style: none; cursor: pointer; padding: 3px 12px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); font-size: .85rem; white-space: nowrap;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover, .menu[open] summary { color: var(--text); }
.menu ul {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 200px; max-height: 70vh; overflow: auto;
  margin: 0; padding: 6px; list-style: none; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
}
.menu li a { display: block; padding: 6px 10px; border-radius: 6px; font-size: .9rem; white-space: nowrap; }
.menu li a:hover { background: var(--panel-2); }
.menu a[aria-current] { color: var(--accent); }
.rl { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.rounds summary::after { content: " \25be"; }
.rounds ul { right: auto; left: 0; }
/* The search box (site.js shows it) and the names found, under it. */
.search { position: relative; flex: 0 1 15rem; min-width: 0; margin-left: auto; }
.search:not([hidden]) + .langs { margin-left: 0; }
.search input {
  width: 100%; padding: 3px 12px; border: 1px solid var(--line); border-radius: 999px; outline: none;
  background: var(--seg); color: var(--text); font: inherit; font-size: .85rem; -webkit-appearance: none;
  appearance: none;
}
.search input::placeholder { color: var(--faint); }
.search input:focus { border-color: var(--accent); }
.hits {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: max(100%, 20rem); max-height: 70vh;
  overflow: auto; margin: 0; padding: 6px; list-style: none; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
}
.hits a { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 6px; }
.hits .ci { flex: none; width: 28px; height: 28px; margin: 0; object-fit: contain; }
.hits .hit { flex: 1; min-width: 0; }
.hits a:hover, .hits a:focus { background: var(--panel-2); outline: none; }
.hits b {
  display: block; overflow: hidden; font-weight: 600; font-size: .9rem; white-space: nowrap; text-overflow: ellipsis;
}
.hits span { display: block; color: var(--muted); font-size: .78rem; }
.hits .none { padding: 6px 10px; color: var(--muted); font-size: .85rem; }
.classes {
  max-width: 1180px; margin: 0 auto; padding: 6px 16px 0; display: flex; gap: 2px; overflow-x: auto;
  scrollbar-width: none;
}
.classes::-webkit-scrollbar { display: none; }
/* On computers the class tabs keep their one line and show a thin scrollbar under it where the window has no room
   for them all, rather than going out of sight (Leo 2026-10-05 16:48 UTC: "这个职业选择标签，在手机上可以滑动看后边的，在
   电脑上窄窗口就没法看后边的了"; 18:09: "电脑版职业显示就用一行+细滚动条就行"): a mouse cannot swipe them. Phones and
   tablets, swiped, show none. The standard properties for Chromium and Firefox, the pseudo-elements for Safari. */
@media (hover: hover) and (pointer: fine) {
  .classes { scrollbar-width: thin; scrollbar-color: var(--scroll) transparent; }
  .classes::-webkit-scrollbar { display: block; height: 6px; }
  .classes::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 3px; }
}
.classes a {
  padding: 8px 12px; border-bottom: 2px solid transparent; color: var(--muted); font-size: .92rem;
  white-space: nowrap;
}
.classes a:hover { color: var(--text); }
/* Class emblems (the data layer's class_icon, 64 px) before class names. */
.ci { width: auto; height: 1.25em; margin-right: .4em; vertical-align: -.25em; }
.classes a .ci { height: 20px; margin-right: 6px; vertical-align: -5px; }
h1 .ci { height: 1.15em; vertical-align: -.18em; }
.class-card h2 .ci { height: 1.6em; vertical-align: -.45em; }
.picks .ci { height: 1.5em; vertical-align: -.4em; }
.classes a[aria-current] { color: var(--accent); border-bottom-color: var(--accent); }

.head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 4px 0 16px; }
h1 { margin: 0; font-size: 1.6rem; font-weight: 700; }
.sub { margin: 0; color: var(--muted); font-size: .9rem; }
/* Who is on the site, under the heading (pages.scope_note; user 09-30 06:32, 06:41). */
.note { flex: 1 1 100%; margin: 0; color: var(--faint); font-size: .85rem; }

/* Filters: hidden radio buttons, shown as segmented controls; the lists switch by CSS alone. */
input.f { position: absolute; opacity: 0; pointer-events: none; }
/* Each group of buttons on a line of its own (user 09-30 15:27:58: "分行吧，五个全部一行，4个单独的一行，技能和装备筛选
   再一行"): the servers, All and the groups of two modes, the four modes, the skill and gear filters. */
.filters { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.seg {
  display: inline-flex; gap: 2px; padding: 3px; max-width: 100%; overflow-x: auto; scrollbar-width: none;
  background: var(--seg); border: 1px solid var(--line); border-radius: 10px;
}
.seg::-webkit-scrollbar { display: none; }
/* The filters' buttons go on to another line where the row has no room (five buttons on a phone, user 09-30 06:47,
   15:27), rather than out of sight. */
.filters .seg { flex-wrap: wrap; }
.seg label, .seg button {
  padding: 5px 12px; border: 0; border-radius: 7px; background: none; color: var(--muted); font-size: .88rem;
  white-space: nowrap; cursor: pointer; user-select: none;
}
.seg label:hover, .seg button:hover { color: var(--text); }
/* The servers' buttons in the servers' colours, as the home page's leaders and the lists' tags (user 09-29 19:47:
   "首页给了服务器红色和蓝色，我看挺好的，清单列表页里也用颜色区分一下吧"); picked, on their own tint (filter_css). */
.filters label[for="s-global"] { color: var(--s-global); }
.filters label[for="s-cn"] { color: var(--s-cn); }
/* A mode's picture before its name, on its button and its tag (the data layer's mode_icon). */
.mi { width: auto; height: 1.3em; margin-right: .35em; vertical-align: -.3em; }
.tag .mi { height: 1.15em; margin-right: .25em; vertical-align: -.25em; }
/* All's picture (user 09-30 15:23: the four modes' pictures in two rows, mq): the four in the corners of the room of
   one (a grid would sit on its first row's baseline, lower than the rest), each a little over half of it, their
   pictures' clear margins overlapping (Leo 2026-10-05 16:44 UTC), each in its mode's corner (pages.QUARTERS). A
   group of two modes has All's picture without the two it leaves out, its two in their corners, both as bright (Leo
   2026-10-05 19:14 UTC: "简单说新的四个部分全部的图标就是在'全部'的基础上去掉没选的模式就行了"; "后景也不需要调透明了";
   before, one picture behind the other, dimmer, the one in front outlined in the button's colour). */
.mq {
  position: relative; display: inline-block; width: 1.3em; height: 1.3em; margin-right: .35em; vertical-align: -.3em;
}
.mq .mi { position: absolute; width: 52%; height: 52%; margin: 0; object-fit: contain; }
.mq .q-tl { left: 0; top: 0; }
.mq .q-tr { right: 0; top: 0; }
.mq .q-bl { left: 0; bottom: 0; }
.mq .q-br { right: 0; bottom: 0; }
.seg button[aria-pressed="true"] { background: var(--seg-on); color: var(--seg-on-text); }
/* The class pages' skill and gear filters (user 09-29 05:08; pages.filter_box, filled by site.js): a button for
   each beside the server and mode, the tags of the one open under a switch between keeping and excluding (user
   09-29 06:13), most used first with how many players have each (in the unique charms, first a row of how many
   a build has, fq, user 09-29 07:47), then the tags picked (on, or out: excluded) with the players left. Rows
   without every tag picked, or with one excluded, are hidden (fo). */
.fb[hidden], .fx[hidden], .fp[hidden], .fs[hidden], .fs [hidden] { display: none; }
.seg button[aria-expanded="true"] { background: var(--seg-on); color: var(--seg-on-text); }
.fb .fc {
  display: inline-block; min-width: 1.5em; margin-left: 6px; padding: 0 5px; border-radius: 999px;
  background: var(--accent); color: var(--bg); font-size: .72rem; font-weight: 700; line-height: 1.5em;
  text-align: center;
}
.fp {
  margin: -4px 0 12px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px;
}
.fg + .fg { margin-top: 10px; }
.fh {
  margin: 0 0 6px; color: var(--accent); font-size: .75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em;
}
.fe { margin: 0; color: var(--faint); font-size: .85rem; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.fq { align-items: center; margin-bottom: 8px; }
.fq:last-child { margin-bottom: 0; }
.fq .fk { margin-right: 2px; color: var(--muted); font-size: .8rem; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 32px; padding: 3px 10px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--seg); color: var(--text); font-size: .84rem;
  line-height: 1.3; cursor: pointer;
}
.chip:hover { border-color: var(--line-strong); }
.chip:focus-visible, .fclr:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip.on { background: var(--seg-on); border-color: var(--badge-line); color: var(--seg-on-text); }
.chip.out { background: var(--out-bg); border-color: var(--out-line); color: var(--out); }
/* A tag's picture keeps its own proportions in its square, like the gear cards' (.card .pic): the item pictures are
   cut to their visible pixels, and filled the square they were squeezed or stretched (Leo 2026-10-06 07:36 UTC:
   "装备图在筛选里比例会失衡"). */
.chip img { flex: none; width: 24px; height: 24px; margin-left: -6px; border-radius: 5px; object-fit: contain; }
.chip .cn { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chip .cc { color: var(--faint); font-size: .75rem; font-variant-numeric: tabular-nums; }
.chip.on .cc { color: var(--seg-on-text); }
.chip .cm { margin-right: -3px; font-weight: 700; }
.fm { margin: 0 0 10px; }
.fm button { padding: 3px 12px; font-size: .82rem; }
.fm button[data-m="x"][aria-pressed="true"] { background: var(--out-bg); color: var(--out); }
.chip .cx { color: var(--muted); font-size: 1.05rem; line-height: 1; }
.chip.more { color: var(--muted); }
.fs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: -4px 0 12px; font-size: .85rem; }
.fs .fn { font-weight: 600; }
.fclr {
  padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--muted);
  font-size: .85rem; cursor: pointer;
}
.fclr:hover { color: var(--text); border-color: var(--line-strong); }
.lb tbody tr.lv td { border-bottom: 0; }

/* The list. */
.lb {
  width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; font-variant-numeric: tabular-nums;
}
/* The cells 12 px apart from either side, closer in a window under 900 px wide, 8 px at 700 px (Leo 2026-10-04 18:55
   UTC: "完成时间和平台可以900以下也不藏吧"; at its narrowest a list with the platforms' pictures and the completion's year
   needs a window 850 px wide in Chinese to 925 px in Italian, with round 1's platforms, and up to 955 px with Ubisoft
   Connect). */
.lb th {
  padding: 10px clamp(8px, 2vw - 6px, 12px); border-bottom: 1px solid var(--line); color: var(--faint);
  font-size: .75rem; font-weight: 500; text-align: left; text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap;
}
.lb td { padding: 8px clamp(8px, 2vw - 6px, 12px); border-bottom: 1px solid var(--line); vertical-align: middle; }
.lb tbody tr:last-child td { border-bottom: 0; }
.js .lb tbody tr.x { cursor: pointer; }
.lb tbody tr.x:hover, .lb tbody tr.open { background: var(--hover); }
th.r, td.r { width: 3.2rem; text-align: right; }
/* The tier and time right after the name, then the skill bar (user 09-29 20:10: "还有就是把技能挪到用时列后边吧"), the
   completion time and the platform, each as wide as it needs; the room that is left goes after the last column, not
   after the skill bar (Leo 2026-10-04 18:39 UTC: "可以把技能栏右边留的空位缩小点"). */
th.n { width: 16rem; }
th.t, th.d, th.k, th.c, th.p { width: 1%; }
.lb th:last-child { width: auto; }
td.k, td.t, td.d { white-space: nowrap; }
td.k .skills { flex-wrap: nowrap; }
/* A class page holds each player once; the place shown is the one in the list picked, and the first three are in
   gold, silver and bronze (pages.filter_css). */
td.r { color: var(--muted); font-weight: 600; }
td.n { font-weight: 600; }
td.n a.b[aria-expanded="true"] { color: var(--accent); }
@media (hover: hover) { tr.x:hover td.n a.b { color: var(--accent); } }
.tag {
  display: inline-block; margin-left: 8px; padding: 0 8px; border-radius: 999px; background: var(--panel-2);
  color: var(--muted); font-size: .72rem; font-weight: 500; line-height: 1.6rem; vertical-align: 1px;
}
.tag.rv { color: var(--review); background: rgba(240, 180, 41, .12); }
/* A player's server under the name, in the list of both servers: in its colour, as on the home page. */
.tag.s-global, .class-card .s-global { color: var(--s-global); background: var(--s-global-bg); }
.tag.s-cn, .class-card .s-cn { color: var(--s-cn); background: var(--s-cn-bg); }
td.n .tags { display: block; margin-top: 3px; white-space: nowrap; }
td.n .tags .tag { margin: 0 4px 0 0; font-size: .7rem; line-height: 1.25rem; vertical-align: 0; white-space: nowrap; }
th.t, td.t, th.d, td.d { text-align: right; }
td.t { font-size: 1.05rem; font-weight: 700; }
td.c, td.p { color: var(--muted); font-size: .85rem; white-space: nowrap; }
/* The pictures of a run's tier, time and completion (pages.Page.row_icon): on computers before the headers' words
   (pages._column_head; Leo 2026-10-05 06:26 UTC: "层数，用时，完成时间的图标，只加在header行的标签旁"), on phones, which show no
   headers, before each row's (below; 2026-10-04 21:16 UTC: "写标签太占地方的话，是不是可以给时间前边加个图标，日期和平台层数有
   合适的图标吗"): the game's obelisk and hourglass, and a calendar drawn here like the hourglass, as the game has none
   (2026-10-05 04:17 UTC: "日期自己画个"; 04:36: "层数应该是个方尖碑的图标"); on the home page's cards before the leader's, on
   computers as on phones (2026-10-06 03:42 UTC: "层数前加图标……通关用时也加图标"). */
td.t .ri, td.d .ri, td.p .ri, .class-card .ri { display: inline-block; width: auto; vertical-align: middle; }
td.t .ri, .class-card .t .ri { height: 1.2em; margin-right: .25em; position: relative; top: -.1em; }
td.d .ri, .class-card .d .ri { height: 1.15em; margin-right: .3em; position: relative; top: -.08em; }
th.c .hl::before, td.c time::before, .class-card .c time::before {
  content: ""; display: inline-block; width: 1.25em; height: 1.25em; margin-right: .3em; vertical-align: middle;
  position: relative; top: -.1em; background: center / contain no-repeat;
  background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E\
  %3ClinearGradient id='g' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%232b2c2c'/%3E\
  %3Cstop offset='1' stop-color='%23080808'/%3E%3C/linearGradient%3E\
  %3Crect x='12' y='15' width='40' height='42' rx='4.5' fill='url(%23g)' stroke='%23030303' stroke-width='7'/%3E\
  %3Crect x='12' y='15' width='40' height='42' rx='4.5' fill='none' stroke='%23f4f3ef' stroke-width='3.6'/%3E\
  %3Cpath d='M12 19.5a4.5 4.5 0 0 1 4.5-4.5h31a4.5 4.5 0 0 1 4.5 4.5v5H12z' fill='%23f4f3ef'/%3E\
  %3Cg fill='%23030303'%3E%3Crect x='19.1' y='8.2' width='7.8' height='13.6' rx='3.9'/%3E\
  %3Crect x='33.1' y='8.2' width='7.8' height='13.6' rx='3.9'/%3E%3C/g%3E%3Cg fill='%23f4f3ef'%3E\
  %3Crect x='20.8' y='9.9' width='4.4' height='10.2' rx='2.2'/%3E\
  %3Crect x='34.8' y='9.9' width='4.4' height='10.2' rx='2.2'/%3E%3Cg opacity='.92'%3E\
  %3Crect x='18.5' y='33' width='7' height='6' rx='.8'/%3E\
  %3Crect x='28.5' y='33' width='7' height='6' rx='.8'/%3E\
  %3Crect x='38.5' y='33' width='7' height='6' rx='.8'/%3E\
  %3Crect x='18.5' y='44' width='7' height='6' rx='.8'/%3E\
  %3Crect x='28.5' y='44' width='7' height='6' rx='.8'/%3E\
  %3Crect x='38.5' y='44' width='7' height='6' rx='.8'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
/* A header's picture just before its word. The tier's and time's, over numbers set right, stand out of the column's way
   (in the cell's padding or the room the column's longer cells leave), so that they make no list wider; the
   completion's calendar stands in line before its word, so that it starts where the dates below start (Leo 2026-10-05
   07:57 UTC: "完成时间的图标太靠左了 应该跟时间对齐"). */
.lb th .hl { position: relative; }
.lb th .hl .ri {
  position: absolute; top: 50%; right: calc(100% + .35em); margin: 0; transform: translateY(-50%);
}
.lb th .hl .ri { width: auto; height: 1.4em; }
th.c .hl::before { width: 1.4em; height: 1.4em; }
td.t .ri, td.d .ri, td.c time::before { display: none; }
/* A platform's picture before its word (06:26: "电脑上，文字还是写PC，图标加在文字前边"), on phones in its place (below).
   Nintendo's picture is wide, so lower; PlayStation's, Nintendo's and Ubisoft's are white, the others grey, and the
   game draws them as they are, so here the white ones are greyed like the others (04:37: "ps和switch的图标比xbox和战网
   的亮太多了"). */
td.p .ri { height: 1.45em; margin-right: .4em; }
.class-card .p .ri { height: 1.45em; }
td.p .ri-nintendo, .class-card .p .ri-nintendo { height: 1em; }
td.p .ri-playstation, td.p .ri-nintendo, td.p .ri-ubisoft, .class-card .p .ri-playstation,
.class-card .p .ri-nintendo, .class-card .p .ri-ubisoft { filter: brightness(.55) sepia(.25); }
.empty {
  padding: 28px; text-align: center; color: var(--faint); background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px;
}
.views .empty { display: none; }   /* shown for a list with no one (pages.filter_css) */
/* Under the first players a class page holds itself, for readers without the script: site.js adds the others and
   takes the line away (pages.LIST_FIRST). */
.views .more { margin: 10px 4px 0; color: var(--faint); font-size: .85rem; }

/* The skill bar: the game's icons once the data layer exports them, the skill's name until then. */
.skills { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.skills li {
  flex: none; width: 32px; height: 32px; overflow: hidden; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 7px;
}
.skills li img { display: block; width: 100%; height: 100%; }
.skills li.tx {
  width: auto; max-width: 8em; padding: 0 8px; color: var(--muted); font-size: .75rem; font-weight: 400;
  line-height: 30px; white-space: nowrap; text-overflow: ellipsis;
}
.skills li.blank { background: none; border-style: dashed; }
/* A listed player whose build was not collected (user 09-28): the row stays, the skills cell says so. */
.nob { display: inline-block; color: var(--faint); font-size: .8rem; line-height: 32px; white-space: nowrap; }
/* The row a search or an address found, when it has no build to open. */
.lb tbody tr.found { background: var(--seg-on); }

/* A build opened in place, or on its own page. */
tr.detail > td { padding: 14px; background: var(--bg); }
.build > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.build > header h2 { margin: 0; font-size: 1.1rem; }
.build > header p { margin: 2px 0 0; color: var(--muted); font-size: .85rem; }
tr.detail .build > header > .who { display: none; }
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex-basis: 100%; min-width: 0; }
.tools .game-version { margin-left: auto; min-width: 0; color: var(--faint); font-size: .75rem; text-align: right; }
a.share {
  padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .85rem;
  white-space: nowrap;
}
a.share:hover { color: var(--text); border-color: var(--line-strong); }
a.share.done { color: var(--accent); border-color: var(--accent); }
/* The claim beside it (site.js claimLink; claims/worker.js); a claimed run's mark among the row's tags, and in the
   build's details with its player's links (pl: not .ln, the legendary node's tint). */
a.claim {
  padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .85rem;
  white-space: nowrap;
}
a.claim:hover { color: var(--accent); border-color: var(--accent); }
/* A claimed run's links beside the share link, the build site's after its word (site.js claimLink). */
span.pls { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 4px 12px; border: 1px solid var(--badge-line); border-radius: 999px; }
/* the links' line under the row's tools, and the version with the claim kept at the right (site.js claimLink) */
div.pll { flex-basis: 100%; order: 1; }
span.rt { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 10px; margin-left: auto; }
span.pls .pw { color: var(--accent); font-size: .9rem; font-weight: 600; }
span.pls a.pl.logo img { width: 24px; height: 24px; border-radius: 4px; }
/* "Claim again" after a claimed run's mark (site.js claimLink): quiet, for the run's own player alone. */
span.claimed a.claim.again { margin-left: 6px; padding: 0; border: 0; color: var(--faint); font-size: .78rem;
  text-decoration: underline; text-underline-offset: 3px; }
span.claimed a.claim.again:hover { color: var(--accent); }
.tag.cm { padding: 0 5px; color: var(--accent); vertical-align: -2px; }
.tag.cm svg { display: block; margin: 3px 0; }
span.claimed { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; color: var(--accent);
  font-size: .85rem; }
span.claimed .tag.cm { margin: 0 -4px 0 0; padding: 0; background: none; }
/* In a list, right after the player's name (site.js row; Leo 2026-10-19 17:43 UTC). */
td.n > .tag.cm { margin-left: 6px; padding: 0; background: none; line-height: 1; vertical-align: -1px; }
td.n > .tag.cm svg { display: inline-block; margin: 0; }
a.pl.tag { color: var(--accent); }
a.pl.tag:hover { text-decoration: underline; }
a.pl.logo { display: inline-block; line-height: 0; }
a.pl.logo img { width: 18px; height: 18px; border-radius: 3px; }
a.pl.logo:hover img { outline: 1px solid var(--accent); outline-offset: 1px; }
.copy-area { position: fixed; top: 0; left: -9999px; opacity: 0; }
/* A row opened from a share link scrolls clear of the sticky header. */
.lb tbody tr { scroll-margin-top: 7.5rem; }
.builds .build { margin-bottom: 12px; padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.back a { color: var(--muted); }
.back a:hover { color: var(--text); }
.bv h3 {
  margin: 14px 0 8px; color: var(--accent); font-size: .78rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em;
}
/* Cards as many a row as are 250 px wide, three at most (Leo 2026-10-04 18:53 UTC: "能不能让网站保持这种一行三列
   效果，不要4列效果", "变大以后技能显示也是三列的"; the paragon boards two, below). */
.cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - 16px) / 3)), 1fr));
  gap: 8px;
}
/* A card that starts a row of its own (VIEW_MODEL.md "卡片": new_row; the user 2026-10-04 16:42 UTC: the seal and
   the sets first in the talismans, "然后另起一行显示6个护符"). */
.card.nr { grid-column-start: 1; }
.card {
  display: flow-root; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
}
/* A card's picture (an item's own, a skill's icon), top right as in the game's tooltips, which draw every item's
   art to about the same longer side: a ring, wider than tall, as wide as boots are tall (the user's 09-22 ring and
   boots, about 97 x 62 and 73 x 100 px). So each picture fits a 56 px square, whole; a fixed height made the
   rings the largest (user 09-29 19:44: "为什么我觉得现在装备上的图标，戒指的有点特别大呢"). */
.card .pic { float: right; width: 56px; height: 56px; margin: 0 0 6px 10px; object-fit: contain; }
.card h4 { margin: 0; font-size: .95rem; }
/* An item's greater stars after its name, one per greater affix, each the greater lines' star a little shorter
   than the name's letters, as the game draws them (Jungee's and Goku's Infinity, 2026-10-03). */
.card h4 img.nst { width: .8em; height: .8em; margin-left: .25em; vertical-align: -.06em; }
/* A set charm's mark after its name, before the stars: its glyph's green frame, a little taller than the name's
   letters and centred on them (上山的虎's 大鍋之情, 2026-10-03: 29 px beside letters of 23). */
.card h4 img.nsm { width: auto; height: 1.2em; margin-left: .3em; vertical-align: -.25em; }
.card .sub { font-size: .78rem; }
.card ul { margin: 6px 0 0; padding: 0; list-style: none; font-size: .86rem; }
.card li { margin: 2px 0; }
/* The lines the game writes under an item's type (VIEW_MODEL.md "卡片": head): its item power, then its quality,
   whose text gives it the quality colour (color_css); small like the type. */
.card ul.hd { margin: 2px 0 0; color: var(--muted); font-size: .78rem; }
.card ul.hd li { margin: 0; }
/* A line's own picture (a skill card's branch and upgrades), small, before its text; the text wraps beside it.
   Every line picture is drawn whole in its box, never squashed (user 09-29 18:52, a gem's picture). */
.card li.lp { padding-left: 24px; text-indent: -24px; }
.card li img.lic {
  display: inline-block; width: 18px; height: 18px; margin-right: 6px; vertical-align: -4px; border-radius: 4px;
  object-fit: contain;
}
/* A socket's gem or rune, larger, as the game draws it beside its line (user 09-29 14:40: the inlays had none). */
.card li.l-socket.lp { padding-left: 30px; text-indent: -30px; }
.card li.l-socket img.lic { width: 24px; height: 24px; vertical-align: -7px; border-radius: 0; }
/* Two icon slots before the lines of an item (pages.GUTTER_SECTIONS; user 09-29 16:49: "要让词条前边留出两个显示图标
   的位置，保持文字开始处对齐"), laid out as the game's tooltip does (user 09-29 17:30, the crown: "参考一下这张装备的
   截图，词条的缩进"; there the text starts 1.5em in, the bullets sit in the first half and a gem spans both): the
   text of every line, and of its wrapped lines, starts after the slots, icon or not; a bullet (the line's icon, or
   the sign of a mark) takes the first slot, a second sign the second, a gem's picture both, on the first line.
   The bullets as large as the game draws them beside its text (user 09-29 18:27: "普通词条和附魔的图案太大了"): the
   plain diamond and the enchanted ring small (pages.SMALL_BULLETS, class sm), the others in a box about as tall
   as a digit, each picture whole in it; the first slot's middle is where the game's bullets are, .4em in. */
.card li.gu { position: relative; padding-left: 1.5em; line-height: 1.5; }
.card li.gu .ib {
  position: absolute; top: 0; left: 0; display: grid; grid-template-columns: .8em .4em; place-items: center;
  height: 1.5em;
}
.card li.gu .mk { font-size: .7em; line-height: 1; }
.card li.gu .mk::before { margin-right: 0; }
.card li.gu img.lic { width: .8em; height: .8em; margin: 0; border-radius: 0; object-fit: contain; }
.card li.gu img.lic.sm { width: .33em; height: .33em; }
/* 合体 (Leo 10-03, VIEW_MODEL.md "行": the lines whose game bullet leaves out some of their marks): the line's greater
   or empowered picture in the first slot (fused), and the marks it leaves out small in the second, one beside its
   lower half, two the die above the enchanted ring or a tempering category's (corners; Leo 12:20: "附魔的小圈放在右
   下角小一点的位置，像其他的那样", 12:23: "把嬗变放到右上角"). Each .6 of a letter (Leo 2026-10-04 18:37 UTC: "尝试
   把词条图标的上下角标调大一点，让它在小图的时候也能看清"; .4 before), over the first slot's picture by a tenth of a
   letter; two are taller than that picture, within the line. The enchanted ring .4 as before (sm; 21:11: "词条图标
   角标里的附魔圈可以恢复之前的大小，其他的不变"), in the second slot's middle, under the die. */
.card li .cn {
  display: inline-flex; flex-direction: column; justify-content: flex-end; align-items: center; vertical-align: middle;
}
.card li.gu .cn { grid-column: 2; min-height: .8em; }
.card li .cn img.lcn {
  display: block; flex: none; width: .6em; height: .6em; margin: 0; border-radius: 0; object-fit: contain;
}
.card li .cn img.lcn.sm { width: .4em; height: .4em; }
.card li.l-socket.gu img.lic { grid-column: 1 / -1; width: 1.25em; height: 1.25em; }
/* A runeword's block (VIEW_MODEL.md "行": runeword, rune-condition, rune-effect, rune-overflow), as the game writes it
   (Leo's round-1 tooltips and the preview he saw, 2026-10-04): the condition rune's picture beside the title and the
   effect rune's beside the effect, each as large as a socket's, joined by a thin chain from the one to the other
   (the lines marked chain, class ch: the title, below its picture, and the lines between it and the effect). */
.card li.l-runeword.gu img.lic, .card li.l-rune-effect.gu img.lic { grid-column: 1 / -1; width: 1.25em; height: 1.25em; }
.card li.gu.ch::before, .card li.l-runeword.ch + li.l-rune-effect.gu::before {
  content: ""; position: absolute; left: calc(.6em - 1px); width: 2px; border-radius: 1px;
}
.card li.l-runeword.gu.ch::before { top: 1.375em; bottom: 0; background: var(--chain-top); }
.card li.l-rune-condition.gu.ch::before {
  top: calc(-2px - .125em); bottom: calc(-2px - .125em);
  background: linear-gradient(var(--chain-top), var(--chain-bottom));
}
.card li.l-runeword.ch + li.l-rune-effect.gu::before {
  top: calc(-2px - .125em); height: calc(2px + .25em);
  background: linear-gradient(var(--chain-top), var(--chain-bottom));
}
.badges { margin: 4px 0 0; }
.badge {
  display: inline-block; margin-right: 4px; padding: 0 7px; border: 1px solid var(--badge-line); border-radius: 999px;
  color: var(--accent); font-size: .72rem;
}
.q-common h4 { color: var(--q-common); }
.q-magic h4 { color: var(--q-magic); }
.q-rare h4 { color: var(--q-rare); }
.q-legendary h4 { color: var(--q-legendary); }
.q-unique h4 { color: var(--q-unique); }
.q-mythic h4 { color: var(--q-mythic); }
.q-set h4 { color: var(--q-set); }
/* An item's type line in its name's colour darkened, as the game's tooltips write it (pages.TYPE_LINE_SHADE), until
   color_css gives the game's colours */
.k-gear .q-common .sub, .k-talisman .q-common .sub { color: color-mix(in srgb, var(--q-common) 85%, #000); }
.k-gear .q-magic .sub, .k-talisman .q-magic .sub { color: color-mix(in srgb, var(--q-magic) 85%, #000); }
.k-gear .q-rare .sub, .k-talisman .q-rare .sub { color: color-mix(in srgb, var(--q-rare) 85%, #000); }
.k-gear .q-legendary .sub, .k-talisman .q-legendary .sub { color: color-mix(in srgb, var(--q-legendary) 85%, #000); }
.k-gear .q-unique .sub, .k-talisman .q-unique .sub { color: color-mix(in srgb, var(--q-unique) 85%, #000); }
.k-gear .q-mythic .sub, .k-talisman .q-mythic .sub { color: color-mix(in srgb, var(--q-mythic) 85%, #000); }
.k-gear .q-set .sub, .k-talisman .q-set .sub { color: color-mix(in srgb, var(--q-set) 85%, #000); }
/* An affix's marks, a sign each before its text (user 09-29 14:40: only the greater affixes were marked, not the
   enchanted, transfigured and tempered ones), until the data layer gives the line the game's own sign (its icon). */
.mk::before { margin-right: 4px; }
.mk-greater::before { content: "\2605"; color: var(--m-greater); }
.mk-enchanted::before { content: "\2726"; color: var(--m-enchanted); }
.mk-tempered::before { content: "\2692\FE0E"; color: var(--m-tempered); }
.mk-transfigured::before { content: "\2684"; color: var(--m-transfigured); }
/* A power in the colour of its kind, as the game's tooltip writes it (user 09-29 14:40: the unique and legendary
   powers were all white); its numbers and keywords keep their own. Stand-ins until color_css gives the game's
   colours; the paragon boards' legendary nodes are not item powers and stay white. */
.k-gear .l-legendary, .k-talisman .l-legendary { color: var(--q-legendary); }
.k-gear .l-unique, .k-talisman .l-unique { color: var(--q-unique); }
.k-gear .l-mythic, .k-talisman .l-mythic { color: var(--q-mythic); }
/* An item's affixes in the colours of the game's tooltip (the user's 09-29 crown, September mace53 and shield900):
   a plain one warm grey, a greater one white (user 09-29 17:30: "太古词条要更白一点"; the game's tooltip template
   Template_AttributeGreaterAffix writes c_white), but an enchanted greater one warm grey like its ring (the main
   desktop 09-29, all 27 September tooltips: the shield's 24.3% and R31's x108%, #b4aa9c). Their numbers white, as
   the game writes them at quality 0 (the user's 09-29 谜团: "12.0%" white beside warm grey words); :where() leaves
   a number the data layer gives a colour key (by the item's quality, user 09-29 17:45 and 18:18) in that colour
   (color_css comes after this file). */
.k-gear .l-affix, .k-talisman .l-affix { color: var(--affix); }
.k-gear .l-affix.m-greater:not(.m-enchanted), .k-talisman .l-affix.m-greater:not(.m-enchanted) {
  color: var(--affix-greater);
}
:where(.k-gear, .k-talisman) :where(.l-affix) .v { color: var(--affix-greater); }
/* An item's base attributes (VIEW_MODEL.md "卡片": base), between its head and its affixes: its main stat larger,
   white, at the edge, as the game writes "2,004 护甲值" (the crown); the two lines under a weapon's damage warm grey,
   numbers too (September mace53, legendary_scythe33, sword25: #b4aa9c); an item's own affixes there are affix
   lines, drawn as plain ones (shield900's "20.0% 格挡几率": the number white, the words warm grey). */
.card ul.bs { margin: 6px 0 0; }
.card ul.bs + ul { margin-top: 2px; }
.card li.l-stat { color: var(--affix-greater); font-size: 1.15em; }
.card li.l-stat-detail { color: var(--affix); }
/* The counts at an item's foot (VIEW_MODEL.md "卡片": foot), as the game's tooltip writes "回火: 1/4" at its bottom
   right under a line (the user's crown, 09-29 17:30; user 09-29 18:35: "还可以显示出装备的附魔和嬗变次数吧"): the
   words in the colour the data layer gives them (the game's gold, as its tempers' text has it), the counts grey. */
.card ul.ft {
  margin: 8px 0 0; padding-top: 6px; border-top: 1px solid var(--line); color: var(--count); font-size: .8rem;
  text-align: right;
}
.card ul.ft li { margin: 0; }
/* A power's number takes the colour its text gives it (rolled ones c_random, a pale lavender that reads as white
   beside the orange text, fixed ones c_number gold; user 09-29 16:48: "数字应该有白色有金色"), and the [x] or [+]
   after it is grey like the range the game writes next to it (the user's 09-22 boots and ring, September R23
   and R27; pages.VALUE_MARK). */
.k-gear .vm, .k-talisman .vm, .k-paragon .vm { color: var(--value-mark); }
/* A set bonus the build reaches, green as in the game (user 09-29 14:40: "激活到几件套就标绿色"); one it has not
   reached (the data layer's mark "inactive", 4468eb0) grey, its numbers and keywords in their own colours, as
   the game writes it (the round-1 tooltips; the user 2026-10-04 07:48 UTC); another inactive line (a glyph's
   bonus) greys whole. A set's count stays on its name's line. */
.q-set .l-set { color: var(--q-set); }
.q-set .l-set.m-inactive { color: var(--set-off); }
.m-inactive:not(.l-set) { opacity: .5; filter: grayscale(1); }
.card h4 .sc { white-space: nowrap; }
/* A line's prefix (VIEW_MODEL.md "行": prefix, a set bonus's "(2) 套装:") on a line of its own, then the text a
   paragraph a line (pages._paragraphs), as the game writes a set bonus (the user 2026-10-04 16:42 UTC: "护身符的效果
   介绍改成跟游戏一样的（2）套装：然后换行"); a paragraph after the game's bullet (VIEW_MODEL.md "片段": b) as ruAn's
   无名者之贝鲁 has it (20261004-071522-12143f7c, at 1x): the bullet a quarter of a letter in from the prefix, the
   text after it .6 of a letter in, its wrapped lines .9. */
.card li.px .tp, .card li.px .tq { display: block; }
.card li.px .tq.bl { padding-left: .9em; text-indent: -.9em; }
.card li.px .tb {
  display: inline-block; width: calc(.6em / .75); font-size: .75em; text-indent: 0; text-align: center;
  vertical-align: .1em;
}
.pending { color: var(--faint); font-style: italic; }
/* A value not worked out yet: the word comes from --pending, set per language (pages.pending_css). */
i.p::before { content: var(--pending, "?"); color: var(--faint); }
.u { text-decoration: underline; text-underline-offset: .15em; }
/* A keyword the data layer explains (pages._runs .kw) and its box (site.js keywordBoxes), drawn as the game's box at
   the foot of a tooltip, in the game's own colours (X299查询 task 41, 2026-10-03, Leo 13:04 UTC: "最好再从解包数据里
   找找准确的色号"): UI ItemTooltipTemplate.ui ItemKeywords, text style StyleText.ui Style_KeywordText, rgbaForeground
   #aaaaaa, its keyword in its own colour (c_important #e3e0d9, the same as on the cards), on TooltipKeyword.tsl, whose
   frame (2DUITooltip 10) averages #222323 under a top line #2c2e2c; over the text an overlay of alpha 185
   (Style_KeywordOverlay), which the site takes as the text's opacity (inferred: it gives #858585 and #afaca8, Leo's
   screenshots measure #858585 and #b3b2b0). The build's boxes stay hidden (pages keyword_boxes). The box is on the
   body, out of the page's scale on computers (--z, at the end), so its sizes take the scale themselves. */
.kw { cursor: help; }
.kw:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
.kwtip {
  position: fixed; z-index: 30; box-sizing: border-box; max-width: min(calc(380px * var(--z)), calc(100vw - 16px));
  margin: 0; padding: calc(7px * var(--z)) calc(10px * var(--z)); background: #222323; border: 1px solid #2c2e2c;
  border-radius: 2px; color: #aaaaaa; font-size: calc(.85rem * var(--z)); line-height: 1.45;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .6); pointer-events: none;
}
.kwtip[hidden] { display: none; }
/* a box held open by a tap takes the mouse, so the words in it open their own boxes (site.js keywordBoxes) */
.kwtip.held { pointer-events: auto; }
.kwtip p { margin: 0; opacity: .7255; }
.kwtip p + p { margin-top: calc(4px * var(--z)); }
.kwtip > p [class*="c-"]:not(.c-important), .kwtip > p .v, .kwtip > p .vm { color: inherit; }
/* A skill's description or an upgrade's (pages.keyword_boxes: .sk), from the skill card's name or an upgrade line
   (Leo 2026-10-19: "给技能加描述的浮窗，像现在有下划线的文字那样的效果"): the same box, the text without the
   keywords' overlay and its numbers in their own colours, as on the cards. */
.kwtip .sk p { opacity: 1; }
/* Icons in game text show once the site has their images. */
.ic { display: none; }
/* A paragon board (user 09-28 18:27): its picture beside the text; under the board's name its legendary node's
   description, then the glyph's box, large ("雕文的选择要更重要一些"; order: user 09-28 18:52). */
/* The board's column is wider since its gates' arrows and numbers sit outside it (09-29 17:50), the card as much
   wider so the text keeps its room. */
.bv.k-paragon .cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 470px), 1fr)); gap: 10px; }
.js .card.pg { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 12px; align-items: start; }
.pt { display: flow-root; min-width: 0; }
.gl {
  display: flow-root; margin-top: 8px; padding: 8px 10px; background: var(--panel-2);
  border: 1px solid var(--glyph-line); border-radius: 8px;
}
/* One size down from the first try (user 09-28 19:06: "感觉雕文的字号可以再小一点"), still above a card's own
   text; the description as large as the legendary node's. */
.gl h5 { margin: 0; color: var(--pb-socket); font-size: 1rem; }
.gl ul { font-size: .9rem; }
.lg { display: flow-root; }
.lg ul { font-size: .9rem; }
/* The legendary node's picture beside the board's name, which is the node's, the glyph's beside its own (user 09-29
   18:39: "巅峰雕文也是有图标的，能加上吗，传奇节点也有自己的图标"); above each name the game's small orange word,
   "传奇节点", "传奇雕文" (pages._label; user 09-29 18:42: "在名字上用小字跟游戏一样的橙色标一下传奇节点和传奇雕文吧"). */
.pt > .pic, .gl .pic { width: 48px; height: 48px; }
.card .kl { margin: 0; color: var(--q-legendary); font-size: .75rem; line-height: 1.4; }
/* Their descriptions in the game's colours (user 09-29 18:42: "传奇节点的描述能加上这种tag文字有变色的效果吗"): the
   text warm grey as the game's tooltips write it, so that the keywords the data layer marks (important) stand out
   white and its numbers (number) gold; the [x] after a number grey (.vm above). */
.lg li, .gl li { color: var(--affix); }
/* On the board (site.js), each node as the game draws it (user 2026-10-02 20:51 UTC: "巅峰盘的图标与游戏一一对应"):
   its black square (nt), its frame (nf; a glyph socket not bought in the game's grey, ng: the page's #nf-grey,
   pages.tint_filter), the bars between the bought ones (nj) and its own picture (np), white as the game's, the
   legendary node's in its tint (.ln below), dim until taken. Where the page has no frames, the nodes' shapes (k) and
   over them the glyph's picture in its socket and the legendary node's in its cell (ni), dim until taken too. */
.pbs .nt { fill: var(--pb-tile); }
.pbs .ng { filter: url(#nf-grey); }
.pbs .np, .pbs .ni { opacity: .5; }
.pbs .np.t, .pbs .ni.t { opacity: 1; }
/* The legendary node's picture is a white shape the game tints (the data layer, 09-29): beside the board's name and
   in its cell, through the page's filter (pages.tint_filter, the colour the user's screenshots show), which takes
   no room. Only the SVG: this rule once had the skill and gear filters' class (fx) and shrank their box to nothing
   (user 09-30: "网站上我用手机点skill gear filter没反应"). */
.ln { filter: url(#ln-tint); }
svg.tint { position: absolute; width: 0; height: 0; overflow: hidden; }
.gl.q-magic h5 { color: var(--q-magic); }
.gl.q-rare h5 { color: var(--q-rare); }
.gl.q-legendary h5 { color: var(--q-legendary); }
button.pb {
  display: block; width: 100%; margin: 0; padding: 0; background: none; border: 0; border-radius: 8px; cursor: zoom-in;
}
button.pb:empty { display: none; }   /* drawn by site.js: nothing to show without it */
button.pb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pbs { display: block; width: 100%; height: auto; }
.pbs .bg { fill: var(--pb-bg); stroke: var(--line); stroke-width: 1; }
.pbs .ar { fill: var(--pb-range); }
/* The path between the taken nodes: a class of its own (lk), since .ln is the legendary node's tint (above). */
.pbs .lk { fill: none; stroke: var(--pb-path); stroke-width: 1.6; stroke-linecap: round; opacity: .75; }
.pbs .k { opacity: .28; }
.pbs .k.t { opacity: 1; }
.pbs .k-n, .pbs .k-x { fill: var(--pb-normal); }
.pbs .k-m { fill: var(--q-magic); }
.pbs .k-r { fill: var(--q-rare); }
.pbs .k-l { fill: var(--q-legendary); }
.pbs .k-s { fill: var(--pb-socket); }
.pbs .k-g { fill: var(--pb-gate); fill-rule: evenodd; }
.pbs .k-o { fill: var(--accent); }
/* A gate that joins another board: an arrow outside the board at the gate, out of it or into it, and beyond it that
   board's number, as written before each board's name (user 09-28 20:33: "巅峰盘我想可以在门节点那里标个数字，来
   表示这个门连到了第几个盘，或者从第几个盘连过来的"; 09-29 17:50: "在门的位置画个箭头，向外或者向内，然后表示盘序
   的数字圆圈在盘外"). */
.pbs .ga { fill: none; stroke: var(--pb-gate); stroke-width: 1.6; }
.pbs .gh { fill: var(--pb-gate); }
.pbs .gc { fill: var(--pb-gate); stroke: var(--pb-bg); stroke-width: 1.2; }
.pbs .gn { fill: var(--pb-bg); font-size: 11px; font-weight: 700; }
.pbs .gn2 { font-size: 9px; }
/* The board's number before its name, a little way from it (user 09-29 20:36: "传奇节点名字前边的圆圈序号应该离他们远
   一点"), and above the name the legendary node's orange word starting where the name does ("传奇节点的橙字和节点名字
   对齐"; pages._label): the circle and the gap in rem, which the name's line and the word's smaller one share. A name
   that wraps goes on under its start, not under the number. The circle 1px higher than .08em put it, its middle on
   the name's (Leo 2026-10-04 16:30 UTC, 20261004-163003-b8d88b54: "这个巅峰盘号的数字可以往上一点"; there its middle was
   1px below the name's, the digit already 1px above the circle's): px, so it moves the whole pixel at any size. */
.pn, .nb { --pn: 1.1rem; --pn-gap: .6rem; --pn-up: .55rem; }
.card h4.nb { padding-left: calc(var(--pn) + var(--pn-gap)); text-indent: calc(-1 * (var(--pn) + var(--pn-gap))); }
.card .kl.nb { padding-left: calc(var(--pn) + var(--pn-gap)); }
.pn {
  display: inline-block; min-width: var(--pn); margin-right: var(--pn-gap); padding: 0 .3em; border-radius: 999px;
  background: var(--pb-gate); color: var(--pb-bg); font-size: .8em; line-height: var(--pn); text-align: center;
  text-indent: 0; vertical-align: calc(.08em + 1px);
}
/* Under the legendary node's word, the circle beside the word and the name, halfway between the two (Leo 2026-10-04
   16:55 UTC, after the preview of 22a8da0: "移到稍微比传奇节点低一点才行"; of the next preview's two ways, 17:50:
   "巅峰用B吧"): its middle --pn-up above the name's, moved without moving the lines. A glyph's level beside its word
   and name, halfway between the two as well (16:55: "把等级150挪到传奇雕文跟守墓人那行去", 20261004-165508-90deb71d;
   pages._part). */
.card .kl.nb + h4.nb .pn { position: relative; top: calc(-1 * var(--pn-up)); }
.gl .kh { display: flex; flex-wrap: wrap; align-items: center; column-gap: .6rem; }
.gl .kh .kn { min-width: 0; }
.gl .kh .badges { display: flex; margin: 0; }
dialog.pbig {
  width: min(94vw, calc(94vh - 60px), 760px); max-width: none; padding: 12px; color: var(--text);
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 12px; cursor: zoom-out;
}
dialog.pbig::backdrop { background: rgba(0, 0, 0, .72); }
.pbig .x {
  float: right; padding: 0 4px; background: none; border: 0; color: var(--muted); font: inherit; font-size: 1.5rem;
  line-height: 1; cursor: pointer;
}
.pbig .x:hover { color: var(--text); }
.pbig .pbt { margin: 0 0 10px; font-weight: 600; }

/* Overview: each class's leader, in a set of cards for each server and mode, of which the ones picked above the cards
   show (user 09-29 19:40: "我想在主页加上四种模式的筛选"; pages.home_filter_css), the classes in their leaders' order
   (pages.overview_page; Leo 2026-10-06 03:42 UTC: "每个选项把职业顺序改成按层数>通关用时排，右上角写#1-8"). */
.class-cards > .hv { display: none; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.class-card {
  display: block; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
}
.class-card:hover { border-color: var(--line-strong); }
/* user 09-29 17:24: "把职业名的字号缩小" */
.class-card h2 { display: flex; align-items: center; margin: 0 0 10px; font-size: .9rem; }
/* The class's place among the classes at the card's top right, the first three in the lists' gold, silver and bronze
   (pages.PODIUM). */
.class-card .no {
  margin-left: auto; padding-left: 10px; color: var(--muted); font-size: 1rem; font-variant-numeric: tabular-nums;
}
.class-card .no.p-gold { color: var(--gold); }
.class-card .no.p-silver { color: var(--silver); }
.class-card .no.p-bronze { color: var(--bronze); }
/* The leader's name on its own line, the tier and the time on the next, the time as large as the tier (user 09-29
   17:37: "有的语言层数占位太大，把人名截断了。把人名单独一行，层数和时间放在下一行，时间的字号还可以大点"), the skill bar, and
   under it, small, the completion on the left and the platform on the right, as on phones' list rows (Leo 2026-10-06
   03:42 UTC: "找地方把平台和完成日期也加上，手机版电脑版显示一样的就行"). */
.class-card .ld {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 4px 10px; align-items: baseline;
}
.class-card .srv {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; grid-column: 1 / -1; color: var(--faint);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
}
.class-card .lead {
  padding: 0 6px; border: 1px solid var(--badge-line); border-radius: 999px; color: var(--accent); font-weight: 600;
  text-transform: none; letter-spacing: 0;
}
/* The leader's own server after its Top 1, in the server's colour (user 09-29 17:22: "主页这里，最好能一眼看出是
   哪个服的"; 17:24: "把服务器挪到它右边，改成显示第一名对应的服务器"), and its mode beside it with the mode's
   picture, as the lists' tags (20:28: "主页在服务器标签旁边再加个模式标签吧"). */
.class-card .from {
  padding: 0 7px; border: 1px solid transparent; border-radius: 999px; font-weight: 600; text-transform: none;
  letter-spacing: 0;
}
.class-card .md { color: var(--muted); background: var(--panel-2); }
.class-card .md .mi { height: 1.15em; margin-right: .25em; vertical-align: -.25em; }
.class-card .n {
  grid-column: 1 / -1; overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis;
}
.class-card .t { font-weight: 700; }
.class-card .d { color: var(--muted); font-variant-numeric: tabular-nums; }
.class-card .skills, .class-card .none, .class-card .nob { grid-column: 1 / -1; }
.class-card .none { color: var(--faint); font-size: .85rem; }
.class-card .cp {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; grid-column: 1 / -1; margin-top: 2px;
  color: var(--muted); font-size: .75rem; white-space: nowrap;
}

footer { padding: 18px 16px; border-top: 1px solid var(--line); color: var(--faint); font-size: .8rem; text-align: center; }
footer p { margin: 4px 0; }
footer a { color: var(--muted); }
footer a:hover { color: var(--text); }
footer .credit { margin-top: 10px; font-size: .7rem; letter-spacing: .04em; }

body.root main { max-width: 560px; padding-top: 12vh; text-align: center; }
/* A share link's page (the share function): the player's result as text and the way on to the list; and 404. */
body.share main, body.nf main, body.list main { max-width: 560px; padding-top: 10vh; text-align: center; }
body.share .sub, body.nf .sub { margin-top: 6px; }
.go { margin: 28px 0 0; }
.go a {
  display: inline-block; padding: 10px 18px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px;
}
.go a:hover { border-color: var(--accent); }
/* A name several players have, or a place in every class: the players to pick from. */
.picks { display: grid; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; text-align: left; }
.picks a {
  display: block; padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
}
.picks a:hover { border-color: var(--accent); }
.picks b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.picks .sub { margin-top: 2px; font-size: .85rem; }
.langpick {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; padding: 0; list-style: none;
}
.langpick a { display: block; padding: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.langpick a:hover { border-color: var(--accent); }

/* Narrower screens: a name's tags may wrap in a window narrower than the page (1180 px; 1100 px until the completion
   showed its year on computers too, Leo 2026-10-05 16:40 UTC, after which Polish and Russian lists scrolled in 1105 to
   1160 px windows), between the tags only, each tag on one line (td.n .tags .tag; X299 现状 saw a French
   「Mondial (Blizzard)」 break inside its tag in an 820 px window, 2026-10-05 18:52 UTC), and every column stays
   (Leo 2026-10-04 18:55 UTC: "完成时间和平台可以900以下也不藏吧"; the completion time and platform went below 1100 px
   before). A list still too wide scrolls on its own, never the page. */
.views { overflow-x: auto; }
@media (max-width: 1180px) {
  td.n .tags { white-space: normal; }
}

/* Phones: each player takes three lines, the name with the tier on the right, the skill bar with the time, and, small,
   the completion with its year and the platform (Leo 2026-10-04 20:06 UTC: "还是改成单独一行显示完整时间和平台好了，
   小一点"; 18:55: "完成时间和平台可以900以下也不藏吧"; without them before). */
@media (max-width: 700px) {
  main { padding: 14px 12px 36px; }
  h1 { font-size: 1.35rem; }
  .lb thead { display: none; }
  .lb, .lb tbody { display: block; }
  .lb tr:not(.detail) {
    display: grid; grid-template-columns: 1.8rem minmax(0, 1fr) auto; grid-template-areas: "r n t" "r k d" "r c p";
    align-items: center; gap: 6px 8px; padding: 10px 12px; border-bottom: 1px solid var(--line);
  }
  .lb tbody tr:last-child, .lb tbody tr.lv { border-bottom: 0; }
  .lb tr:not(.detail) td { padding: 0; border: 0; }
  td.r { grid-area: r; width: auto; align-self: start; text-align: left; }
  td.n { grid-area: n; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  td.t { grid-area: t; }
  td.k { grid-area: k; min-width: 0; white-space: normal; }
  td.k .skills { flex-wrap: wrap; }   /* skills shown by name (no icon yet) must not run into the time */
  td.d { grid-area: d; color: var(--muted); font-size: .85rem; }
  td.c { grid-area: c; }
  td.p { grid-area: p; text-align: right; }
  td.c, td.p { font-size: .7rem; line-height: 1.2; }
  /* Without the headers: the tier, time and completion after their pictures, and the platform as its picture alone,
     its word the picture's alt (above). */
  td.t .ri, td.d .ri, td.c time::before { display: inline-block; }
  td.p .ri { margin-right: 0; }
  td.p .ri + span { display: none; }
  .skills li { width: 28px; height: 28px; }
  .skills li.tx { line-height: 26px; }
  .nob { line-height: 28px; }
  tr.detail, tr.detail > td { display: block; }
  /* A paragon board's picture above its text, as wide as the card. */
  .js .card.pg { grid-template-columns: minmax(0, 1fr); }
  button.pb { max-width: 420px; }
  /* The results span the screen below the search box. */
  .hits { position: fixed; top: auto; left: 12px; right: 12px; width: auto; margin-top: 6px; }
  /* The site's name on its own row (a long one wraps), then the search box and the language button. */
  .top .bar { flex-wrap: wrap; row-gap: 8px; }
  .brand { flex: 1 1 100%; }
  .brand::before { width: 20px; height: 20px; }
  .search { flex: 1 1 0; margin-left: 0; }
}

/* Computers (Leo 2026-10-04 18:53 UTC, of the page 1.25 times as large from 1400 px: "能不能让网站保持这种一行三列效果，
   不要4列效果，然后直接平滑过渡到变大的版本，变大以后技能显示也是三列的"; 18:37: "调整窗口大小时，显示内容会忽大忽小的"): from a
   window as wide as the page (1180 px) the page grows with the window, as laid out at 1180 px, up to 1.25 times as
   large at 1475 px, so nothing jumps; narrower windows and phones as before. --z is that scale, worked out here
   where the browser divides lengths and by site.js pageScale where it does not. */
:root { --z: 1; }
@supports (zoom: calc(100vw / 1180px)) {
  :root { --z: clamp(1, 100vw / 1180px, 1.25); }
}
.top, main, footer { zoom: var(--z); }
#s-all:checked~#m-all:checked~.views td.r::before{content:attr(data-aa)}
#s-all:checked~#m-all:checked~.views td.r[data-aa="1"]{color:var(--gold)}
#s-all:checked~#m-all:checked~.views td.r[data-aa="2"]{color:var(--silver)}
#s-all:checked~#m-all:checked~.views td.r[data-aa="3"]{color:var(--bronze)}
#s-all:checked~#m-all:checked~.views.e-all-all .lb{display:none}
#s-all:checked~#m-all:checked~.views.e-all-all .more{display:none}
#s-all:checked~#m-all:checked~.views.e-all-all .empty{display:block}
#s-all:checked~#m-standard_all:checked~.views td.r::before{content:attr(data-af)}
#s-all:checked~#m-standard_all:checked~.views td.r[data-af="1"]{color:var(--gold)}
#s-all:checked~#m-standard_all:checked~.views td.r[data-af="2"]{color:var(--silver)}
#s-all:checked~#m-standard_all:checked~.views td.r[data-af="3"]{color:var(--bronze)}
#s-all:checked~#m-standard_all:checked~.views.e-all-standard_all .lb{display:none}
#s-all:checked~#m-standard_all:checked~.views.e-all-standard_all .more{display:none}
#s-all:checked~#m-standard_all:checked~.views.e-all-standard_all .empty{display:block}
#s-all:checked~#m-self_found_all:checked~.views td.r::before{content:attr(data-af)}
#s-all:checked~#m-self_found_all:checked~.views td.r[data-af="1"]{color:var(--gold)}
#s-all:checked~#m-self_found_all:checked~.views td.r[data-af="2"]{color:var(--silver)}
#s-all:checked~#m-self_found_all:checked~.views td.r[data-af="3"]{color:var(--bronze)}
#s-all:checked~#m-self_found_all:checked~.views.e-all-self_found_all .lb{display:none}
#s-all:checked~#m-self_found_all:checked~.views.e-all-self_found_all .more{display:none}
#s-all:checked~#m-self_found_all:checked~.views.e-all-self_found_all .empty{display:block}
#s-all:checked~#m-ordinary_all:checked~.views td.r::before{content:attr(data-ag)}
#s-all:checked~#m-ordinary_all:checked~.views td.r[data-ag="1"]{color:var(--gold)}
#s-all:checked~#m-ordinary_all:checked~.views td.r[data-ag="2"]{color:var(--silver)}
#s-all:checked~#m-ordinary_all:checked~.views td.r[data-ag="3"]{color:var(--bronze)}
#s-all:checked~#m-ordinary_all:checked~.views.e-all-ordinary_all .lb{display:none}
#s-all:checked~#m-ordinary_all:checked~.views.e-all-ordinary_all .more{display:none}
#s-all:checked~#m-ordinary_all:checked~.views.e-all-ordinary_all .empty{display:block}
#s-all:checked~#m-hardcore_all:checked~.views td.r::before{content:attr(data-ag)}
#s-all:checked~#m-hardcore_all:checked~.views td.r[data-ag="1"]{color:var(--gold)}
#s-all:checked~#m-hardcore_all:checked~.views td.r[data-ag="2"]{color:var(--silver)}
#s-all:checked~#m-hardcore_all:checked~.views td.r[data-ag="3"]{color:var(--bronze)}
#s-all:checked~#m-hardcore_all:checked~.views.e-all-hardcore_all .lb{display:none}
#s-all:checked~#m-hardcore_all:checked~.views.e-all-hardcore_all .more{display:none}
#s-all:checked~#m-hardcore_all:checked~.views.e-all-hardcore_all .empty{display:block}
#s-all:checked~#m-ordinary:checked~.views td.r::before{content:attr(data-am)}
#s-all:checked~#m-ordinary:checked~.views td.r[data-am="1"]{color:var(--gold)}
#s-all:checked~#m-ordinary:checked~.views td.r[data-am="2"]{color:var(--silver)}
#s-all:checked~#m-ordinary:checked~.views td.r[data-am="3"]{color:var(--bronze)}
#s-all:checked~#m-ordinary:checked~.views.e-all-ordinary .lb{display:none}
#s-all:checked~#m-ordinary:checked~.views.e-all-ordinary .more{display:none}
#s-all:checked~#m-ordinary:checked~.views.e-all-ordinary .empty{display:block}
#s-all:checked~#m-self_found:checked~.views td.r::before{content:attr(data-am)}
#s-all:checked~#m-self_found:checked~.views td.r[data-am="1"]{color:var(--gold)}
#s-all:checked~#m-self_found:checked~.views td.r[data-am="2"]{color:var(--silver)}
#s-all:checked~#m-self_found:checked~.views td.r[data-am="3"]{color:var(--bronze)}
#s-all:checked~#m-self_found:checked~.views.e-all-self_found .lb{display:none}
#s-all:checked~#m-self_found:checked~.views.e-all-self_found .more{display:none}
#s-all:checked~#m-self_found:checked~.views.e-all-self_found .empty{display:block}
#s-all:checked~#m-hardcore:checked~.views td.r::before{content:attr(data-am)}
#s-all:checked~#m-hardcore:checked~.views td.r[data-am="1"]{color:var(--gold)}
#s-all:checked~#m-hardcore:checked~.views td.r[data-am="2"]{color:var(--silver)}
#s-all:checked~#m-hardcore:checked~.views td.r[data-am="3"]{color:var(--bronze)}
#s-all:checked~#m-hardcore:checked~.views.e-all-hardcore .lb{display:none}
#s-all:checked~#m-hardcore:checked~.views.e-all-hardcore .more{display:none}
#s-all:checked~#m-hardcore:checked~.views.e-all-hardcore .empty{display:block}
#s-all:checked~#m-hardcore_self_found:checked~.views td.r::before{content:attr(data-am)}
#s-all:checked~#m-hardcore_self_found:checked~.views td.r[data-am="1"]{color:var(--gold)}
#s-all:checked~#m-hardcore_self_found:checked~.views td.r[data-am="2"]{color:var(--silver)}
#s-all:checked~#m-hardcore_self_found:checked~.views td.r[data-am="3"]{color:var(--bronze)}
#s-all:checked~#m-hardcore_self_found:checked~.views.e-all-hardcore_self_found .lb{display:none}
#s-all:checked~#m-hardcore_self_found:checked~.views.e-all-hardcore_self_found .more{display:none}
#s-all:checked~#m-hardcore_self_found:checked~.views.e-all-hardcore_self_found .empty{display:block}
#s-global:checked~#m-all:checked~.views td.r::before{content:attr(data-sa)}
#s-global:checked~#m-all:checked~.views td.r[data-sa="1"]{color:var(--gold)}
#s-global:checked~#m-all:checked~.views td.r[data-sa="2"]{color:var(--silver)}
#s-global:checked~#m-all:checked~.views td.r[data-sa="3"]{color:var(--bronze)}
#s-global:checked~#m-all:checked~.views.e-global-all .lb{display:none}
#s-global:checked~#m-all:checked~.views.e-global-all .more{display:none}
#s-global:checked~#m-all:checked~.views.e-global-all .empty{display:block}
#s-global:checked~#m-standard_all:checked~.views td.r::before{content:attr(data-sf)}
#s-global:checked~#m-standard_all:checked~.views td.r[data-sf="1"]{color:var(--gold)}
#s-global:checked~#m-standard_all:checked~.views td.r[data-sf="2"]{color:var(--silver)}
#s-global:checked~#m-standard_all:checked~.views td.r[data-sf="3"]{color:var(--bronze)}
#s-global:checked~#m-standard_all:checked~.views.e-global-standard_all .lb{display:none}
#s-global:checked~#m-standard_all:checked~.views.e-global-standard_all .more{display:none}
#s-global:checked~#m-standard_all:checked~.views.e-global-standard_all .empty{display:block}
#s-global:checked~#m-self_found_all:checked~.views td.r::before{content:attr(data-sf)}
#s-global:checked~#m-self_found_all:checked~.views td.r[data-sf="1"]{color:var(--gold)}
#s-global:checked~#m-self_found_all:checked~.views td.r[data-sf="2"]{color:var(--silver)}
#s-global:checked~#m-self_found_all:checked~.views td.r[data-sf="3"]{color:var(--bronze)}
#s-global:checked~#m-self_found_all:checked~.views.e-global-self_found_all .lb{display:none}
#s-global:checked~#m-self_found_all:checked~.views.e-global-self_found_all .more{display:none}
#s-global:checked~#m-self_found_all:checked~.views.e-global-self_found_all .empty{display:block}
#s-global:checked~#m-ordinary_all:checked~.views td.r::before{content:attr(data-sg)}
#s-global:checked~#m-ordinary_all:checked~.views td.r[data-sg="1"]{color:var(--gold)}
#s-global:checked~#m-ordinary_all:checked~.views td.r[data-sg="2"]{color:var(--silver)}
#s-global:checked~#m-ordinary_all:checked~.views td.r[data-sg="3"]{color:var(--bronze)}
#s-global:checked~#m-ordinary_all:checked~.views.e-global-ordinary_all .lb{display:none}
#s-global:checked~#m-ordinary_all:checked~.views.e-global-ordinary_all .more{display:none}
#s-global:checked~#m-ordinary_all:checked~.views.e-global-ordinary_all .empty{display:block}
#s-global:checked~#m-hardcore_all:checked~.views td.r::before{content:attr(data-sg)}
#s-global:checked~#m-hardcore_all:checked~.views td.r[data-sg="1"]{color:var(--gold)}
#s-global:checked~#m-hardcore_all:checked~.views td.r[data-sg="2"]{color:var(--silver)}
#s-global:checked~#m-hardcore_all:checked~.views td.r[data-sg="3"]{color:var(--bronze)}
#s-global:checked~#m-hardcore_all:checked~.views.e-global-hardcore_all .lb{display:none}
#s-global:checked~#m-hardcore_all:checked~.views.e-global-hardcore_all .more{display:none}
#s-global:checked~#m-hardcore_all:checked~.views.e-global-hardcore_all .empty{display:block}
#s-global:checked~#m-ordinary:checked~.views td.r::before{content:attr(data-sm)}
#s-global:checked~#m-ordinary:checked~.views td.r[data-sm="1"]{color:var(--gold)}
#s-global:checked~#m-ordinary:checked~.views td.r[data-sm="2"]{color:var(--silver)}
#s-global:checked~#m-ordinary:checked~.views td.r[data-sm="3"]{color:var(--bronze)}
#s-global:checked~#m-ordinary:checked~.views.e-global-ordinary .lb{display:none}
#s-global:checked~#m-ordinary:checked~.views.e-global-ordinary .more{display:none}
#s-global:checked~#m-ordinary:checked~.views.e-global-ordinary .empty{display:block}
#s-global:checked~#m-self_found:checked~.views td.r::before{content:attr(data-sm)}
#s-global:checked~#m-self_found:checked~.views td.r[data-sm="1"]{color:var(--gold)}
#s-global:checked~#m-self_found:checked~.views td.r[data-sm="2"]{color:var(--silver)}
#s-global:checked~#m-self_found:checked~.views td.r[data-sm="3"]{color:var(--bronze)}
#s-global:checked~#m-self_found:checked~.views.e-global-self_found .lb{display:none}
#s-global:checked~#m-self_found:checked~.views.e-global-self_found .more{display:none}
#s-global:checked~#m-self_found:checked~.views.e-global-self_found .empty{display:block}
#s-global:checked~#m-hardcore:checked~.views td.r::before{content:attr(data-sm)}
#s-global:checked~#m-hardcore:checked~.views td.r[data-sm="1"]{color:var(--gold)}
#s-global:checked~#m-hardcore:checked~.views td.r[data-sm="2"]{color:var(--silver)}
#s-global:checked~#m-hardcore:checked~.views td.r[data-sm="3"]{color:var(--bronze)}
#s-global:checked~#m-hardcore:checked~.views.e-global-hardcore .lb{display:none}
#s-global:checked~#m-hardcore:checked~.views.e-global-hardcore .more{display:none}
#s-global:checked~#m-hardcore:checked~.views.e-global-hardcore .empty{display:block}
#s-global:checked~#m-hardcore_self_found:checked~.views td.r::before{content:attr(data-sm)}
#s-global:checked~#m-hardcore_self_found:checked~.views td.r[data-sm="1"]{color:var(--gold)}
#s-global:checked~#m-hardcore_self_found:checked~.views td.r[data-sm="2"]{color:var(--silver)}
#s-global:checked~#m-hardcore_self_found:checked~.views td.r[data-sm="3"]{color:var(--bronze)}
#s-global:checked~#m-hardcore_self_found:checked~.views.e-global-hardcore_self_found .lb{display:none}
#s-global:checked~#m-hardcore_self_found:checked~.views.e-global-hardcore_self_found .more{display:none}
#s-global:checked~#m-hardcore_self_found:checked~.views.e-global-hardcore_self_found .empty{display:block}
#s-cn:checked~#m-all:checked~.views td.r::before{content:attr(data-sa)}
#s-cn:checked~#m-all:checked~.views td.r[data-sa="1"]{color:var(--gold)}
#s-cn:checked~#m-all:checked~.views td.r[data-sa="2"]{color:var(--silver)}
#s-cn:checked~#m-all:checked~.views td.r[data-sa="3"]{color:var(--bronze)}
#s-cn:checked~#m-all:checked~.views.e-cn-all .lb{display:none}
#s-cn:checked~#m-all:checked~.views.e-cn-all .more{display:none}
#s-cn:checked~#m-all:checked~.views.e-cn-all .empty{display:block}
#s-cn:checked~#m-standard_all:checked~.views td.r::before{content:attr(data-sf)}
#s-cn:checked~#m-standard_all:checked~.views td.r[data-sf="1"]{color:var(--gold)}
#s-cn:checked~#m-standard_all:checked~.views td.r[data-sf="2"]{color:var(--silver)}
#s-cn:checked~#m-standard_all:checked~.views td.r[data-sf="3"]{color:var(--bronze)}
#s-cn:checked~#m-standard_all:checked~.views.e-cn-standard_all .lb{display:none}
#s-cn:checked~#m-standard_all:checked~.views.e-cn-standard_all .more{display:none}
#s-cn:checked~#m-standard_all:checked~.views.e-cn-standard_all .empty{display:block}
#s-cn:checked~#m-self_found_all:checked~.views td.r::before{content:attr(data-sf)}
#s-cn:checked~#m-self_found_all:checked~.views td.r[data-sf="1"]{color:var(--gold)}
#s-cn:checked~#m-self_found_all:checked~.views td.r[data-sf="2"]{color:var(--silver)}
#s-cn:checked~#m-self_found_all:checked~.views td.r[data-sf="3"]{color:var(--bronze)}
#s-cn:checked~#m-self_found_all:checked~.views.e-cn-self_found_all .lb{display:none}
#s-cn:checked~#m-self_found_all:checked~.views.e-cn-self_found_all .more{display:none}
#s-cn:checked~#m-self_found_all:checked~.views.e-cn-self_found_all .empty{display:block}
#s-cn:checked~#m-ordinary_all:checked~.views td.r::before{content:attr(data-sg)}
#s-cn:checked~#m-ordinary_all:checked~.views td.r[data-sg="1"]{color:var(--gold)}
#s-cn:checked~#m-ordinary_all:checked~.views td.r[data-sg="2"]{color:var(--silver)}
#s-cn:checked~#m-ordinary_all:checked~.views td.r[data-sg="3"]{color:var(--bronze)}
#s-cn:checked~#m-ordinary_all:checked~.views.e-cn-ordinary_all .lb{display:none}
#s-cn:checked~#m-ordinary_all:checked~.views.e-cn-ordinary_all .more{display:none}
#s-cn:checked~#m-ordinary_all:checked~.views.e-cn-ordinary_all .empty{display:block}
#s-cn:checked~#m-hardcore_all:checked~.views td.r::before{content:attr(data-sg)}
#s-cn:checked~#m-hardcore_all:checked~.views td.r[data-sg="1"]{color:var(--gold)}
#s-cn:checked~#m-hardcore_all:checked~.views td.r[data-sg="2"]{color:var(--silver)}
#s-cn:checked~#m-hardcore_all:checked~.views td.r[data-sg="3"]{color:var(--bronze)}
#s-cn:checked~#m-hardcore_all:checked~.views.e-cn-hardcore_all .lb{display:none}
#s-cn:checked~#m-hardcore_all:checked~.views.e-cn-hardcore_all .more{display:none}
#s-cn:checked~#m-hardcore_all:checked~.views.e-cn-hardcore_all .empty{display:block}
#s-cn:checked~#m-ordinary:checked~.views td.r::before{content:attr(data-sm)}
#s-cn:checked~#m-ordinary:checked~.views td.r[data-sm="1"]{color:var(--gold)}
#s-cn:checked~#m-ordinary:checked~.views td.r[data-sm="2"]{color:var(--silver)}
#s-cn:checked~#m-ordinary:checked~.views td.r[data-sm="3"]{color:var(--bronze)}
#s-cn:checked~#m-ordinary:checked~.views.e-cn-ordinary .lb{display:none}
#s-cn:checked~#m-ordinary:checked~.views.e-cn-ordinary .more{display:none}
#s-cn:checked~#m-ordinary:checked~.views.e-cn-ordinary .empty{display:block}
#s-cn:checked~#m-self_found:checked~.views td.r::before{content:attr(data-sm)}
#s-cn:checked~#m-self_found:checked~.views td.r[data-sm="1"]{color:var(--gold)}
#s-cn:checked~#m-self_found:checked~.views td.r[data-sm="2"]{color:var(--silver)}
#s-cn:checked~#m-self_found:checked~.views td.r[data-sm="3"]{color:var(--bronze)}
#s-cn:checked~#m-self_found:checked~.views.e-cn-self_found .lb{display:none}
#s-cn:checked~#m-self_found:checked~.views.e-cn-self_found .more{display:none}
#s-cn:checked~#m-self_found:checked~.views.e-cn-self_found .empty{display:block}
#s-cn:checked~#m-hardcore:checked~.views td.r::before{content:attr(data-sm)}
#s-cn:checked~#m-hardcore:checked~.views td.r[data-sm="1"]{color:var(--gold)}
#s-cn:checked~#m-hardcore:checked~.views td.r[data-sm="2"]{color:var(--silver)}
#s-cn:checked~#m-hardcore:checked~.views td.r[data-sm="3"]{color:var(--bronze)}
#s-cn:checked~#m-hardcore:checked~.views.e-cn-hardcore .lb{display:none}
#s-cn:checked~#m-hardcore:checked~.views.e-cn-hardcore .more{display:none}
#s-cn:checked~#m-hardcore:checked~.views.e-cn-hardcore .empty{display:block}
#s-cn:checked~#m-hardcore_self_found:checked~.views td.r::before{content:attr(data-sm)}
#s-cn:checked~#m-hardcore_self_found:checked~.views td.r[data-sm="1"]{color:var(--gold)}
#s-cn:checked~#m-hardcore_self_found:checked~.views td.r[data-sm="2"]{color:var(--silver)}
#s-cn:checked~#m-hardcore_self_found:checked~.views td.r[data-sm="3"]{color:var(--bronze)}
#s-cn:checked~#m-hardcore_self_found:checked~.views.e-cn-hardcore_self_found .lb{display:none}
#s-cn:checked~#m-hardcore_self_found:checked~.views.e-cn-hardcore_self_found .more{display:none}
#s-cn:checked~#m-hardcore_self_found:checked~.views.e-cn-hardcore_self_found .empty{display:block}
#s-global:checked~.views tr.sc,#s-global:checked~.views tr.sc+tr.detail{display:none}
#s-cn:checked~.views tr.sg,#s-cn:checked~.views tr.sg+tr.detail{display:none}
#m-standard_all:checked~.views tr.ms,#m-standard_all:checked~.views tr.ms+tr.detail,#m-standard_all:checked~.views tr.mhs,#m-standard_all:checked~.views tr.mhs+tr.detail{display:none}
#m-self_found_all:checked~.views tr.mo,#m-self_found_all:checked~.views tr.mo+tr.detail,#m-self_found_all:checked~.views tr.mh,#m-self_found_all:checked~.views tr.mh+tr.detail{display:none}
#m-ordinary_all:checked~.views tr.mh,#m-ordinary_all:checked~.views tr.mh+tr.detail,#m-ordinary_all:checked~.views tr.mhs,#m-ordinary_all:checked~.views tr.mhs+tr.detail{display:none}
#m-hardcore_all:checked~.views tr.mo,#m-hardcore_all:checked~.views tr.mo+tr.detail,#m-hardcore_all:checked~.views tr.ms,#m-hardcore_all:checked~.views tr.ms+tr.detail{display:none}
#m-ordinary:checked~.views tr.ms,#m-ordinary:checked~.views tr.ms+tr.detail,#m-ordinary:checked~.views tr.mh,#m-ordinary:checked~.views tr.mh+tr.detail,#m-ordinary:checked~.views tr.mhs,#m-ordinary:checked~.views tr.mhs+tr.detail{display:none}
#m-self_found:checked~.views tr.mo,#m-self_found:checked~.views tr.mo+tr.detail,#m-self_found:checked~.views tr.mh,#m-self_found:checked~.views tr.mh+tr.detail,#m-self_found:checked~.views tr.mhs,#m-self_found:checked~.views tr.mhs+tr.detail{display:none}
#m-hardcore:checked~.views tr.mo,#m-hardcore:checked~.views tr.mo+tr.detail,#m-hardcore:checked~.views tr.ms,#m-hardcore:checked~.views tr.ms+tr.detail,#m-hardcore:checked~.views tr.mhs,#m-hardcore:checked~.views tr.mhs+tr.detail{display:none}
#m-hardcore_self_found:checked~.views tr.mo,#m-hardcore_self_found:checked~.views tr.mo+tr.detail,#m-hardcore_self_found:checked~.views tr.ms,#m-hardcore_self_found:checked~.views tr.ms+tr.detail,#m-hardcore_self_found:checked~.views tr.mh,#m-hardcore_self_found:checked~.views tr.mh+tr.detail{display:none}
#s-all:checked~.filters label[for="s-all"]{background:var(--seg-on);color:var(--seg-on-text)}
#s-all:focus-visible~.filters label[for="s-all"]{outline:2px solid var(--accent);outline-offset:2px}
#s-global:checked~.filters label[for="s-global"]{background:var(--s-global-on);color:var(--s-global)}
#s-global:focus-visible~.filters label[for="s-global"]{outline:2px solid var(--accent);outline-offset:2px}
#s-cn:checked~.filters label[for="s-cn"]{background:var(--s-cn-on);color:var(--s-cn)}
#s-cn:focus-visible~.filters label[for="s-cn"]{outline:2px solid var(--accent);outline-offset:2px}
#m-all:checked~.filters label[for="m-all"]{background:var(--seg-on);color:var(--seg-on-text)}
#m-all:focus-visible~.filters label[for="m-all"]{outline:2px solid var(--accent);outline-offset:2px}
#m-standard_all:checked~.filters label[for="m-standard_all"]{background:var(--seg-on);color:var(--seg-on-text)}
#m-standard_all:focus-visible~.filters label[for="m-standard_all"]{outline:2px solid var(--accent);outline-offset:2px}
#m-self_found_all:checked~.filters label[for="m-self_found_all"]{background:var(--seg-on);color:var(--seg-on-text)}
#m-self_found_all:focus-visible~.filters label[for="m-self_found_all"]{outline:2px solid var(--accent);outline-offset:2px}
#m-ordinary_all:checked~.filters label[for="m-ordinary_all"]{background:var(--seg-on);color:var(--seg-on-text)}
#m-ordinary_all:focus-visible~.filters label[for="m-ordinary_all"]{outline:2px solid var(--accent);outline-offset:2px}
#m-hardcore_all:checked~.filters label[for="m-hardcore_all"]{background:var(--seg-on);color:var(--seg-on-text)}
#m-hardcore_all:focus-visible~.filters label[for="m-hardcore_all"]{outline:2px solid var(--accent);outline-offset:2px}
#m-ordinary:checked~.filters label[for="m-ordinary"]{background:var(--seg-on);color:var(--seg-on-text)}
#m-ordinary:focus-visible~.filters label[for="m-ordinary"]{outline:2px solid var(--accent);outline-offset:2px}
#m-self_found:checked~.filters label[for="m-self_found"]{background:var(--seg-on);color:var(--seg-on-text)}
#m-self_found:focus-visible~.filters label[for="m-self_found"]{outline:2px solid var(--accent);outline-offset:2px}
#m-hardcore:checked~.filters label[for="m-hardcore"]{background:var(--seg-on);color:var(--seg-on-text)}
#m-hardcore:focus-visible~.filters label[for="m-hardcore"]{outline:2px solid var(--accent);outline-offset:2px}
#m-hardcore_self_found:checked~.filters label[for="m-hardcore_self_found"]{background:var(--seg-on);color:var(--seg-on-text)}
#m-hardcore_self_found:focus-visible~.filters label[for="m-hardcore_self_found"]{outline:2px solid var(--accent);outline-offset:2px}
#m-all:checked~.filters label[for="m-ordinary"],#m-all:checked~.filters label[for="m-self_found"],#m-all:checked~.filters label[for="m-hardcore"],#m-all:checked~.filters label[for="m-hardcore_self_found"],#m-standard_all:checked~.filters label[for="m-ordinary"],#m-standard_all:checked~.filters label[for="m-hardcore"],#m-self_found_all:checked~.filters label[for="m-self_found"],#m-self_found_all:checked~.filters label[for="m-hardcore_self_found"],#m-ordinary_all:checked~.filters label[for="m-ordinary"],#m-ordinary_all:checked~.filters label[for="m-self_found"],#m-hardcore_all:checked~.filters label[for="m-hardcore"],#m-hardcore_all:checked~.filters label[for="m-hardcore_self_found"]{color:var(--seg-on-text);box-shadow:inset 0 0 0 1px var(--badge-line)}
.c-advanced{color:#808080}
.c-blue{color:#7c7cfb}
.c-bonus{color:#11af00}
.c-boss_summon_mats{color:#57bcf5}
.c-bskbane{color:#c73d00}
.c-capstone{color:#e2bd6f}
.c-chaos{color:#44a68e}
.c-cold{color:#62a1bd}
.c-fire{color:#bd6110}
.c-gambling{color:#a57de3}
.c-gold{color:#b69e7a}
.c-gray{color:#696969}
.c-green{color:#00ff00}
.c-helltide{color:#d8a3c5}
.c-hex-11af00{color:#11af00}
.c-hex-40ff40{color:#40ff40}
.c-hex-44a68e{color:#44a68e}
.c-hex-494f73{color:#494f73}
.c-hex-4ca7d6{color:#4ca7d6}
.c-hex-5672ff{color:#5672ff}
.c-hex-5789ff{color:#5789ff}
.c-hex-66cc99{color:#66cc99}
.c-hex-696969{color:#696969}
.c-hex-727270{color:#727270}
.c-hex-7a9d0f{color:#7a9d0f}
.c-hex-8158a9{color:#8158a9}
.c-hex-82c5ff{color:#82c5ff}
.c-hex-888888{color:#888888}
.c-hex-913d15{color:#913d15}
.c-hex-917f69{color:#917f69}
.c-hex-928c82{color:#928c82}
.c-hex-9a5780{color:#9a5780}
.c-hex-9b5483{color:#9b5483}
.c-hex-affaaf{color:#affaaf}
.c-hex-b3a99b{color:#b3a99b}
.c-hex-b59833{color:#b59833}
.c-hex-ba1916{color:#ba1916}
.c-hex-bf6a2f{color:#bf6a2f}
.c-hex-bf6b31{color:#bf6b31}
.c-hex-c30028{color:#c30028}
.c-hex-c71b1b{color:#c71b1b}
.c-hex-cc9e00{color:#cc9e00}
.c-hex-d5b3e6{color:#d5b3e6}
.c-hex-daa864{color:#daa864}
.c-hex-db4f0e{color:#db4f0e}
.c-hex-dba864{color:#dba864}
.c-hex-dba867{color:#dba867}
.c-hex-e2cfb1{color:#e2cfb1}
.c-hex-e3e0d9{color:#e3e0d9}
.c-hex-eeb91a{color:#eeb91a}
.c-hex-efeadc{color:#efeadc}
.c-hex-f1c85b{color:#f1c85b}
.c-hex-f74444{color:#f74444}
.c-hex-fa950f{color:#fa950f}
.c-hex-ffa300{color:#ffa300}
.c-hex-ffe5bd{color:#ffe5bd}
.c-hex-ffff80{color:#ffff80}
.c-hex-ffffff{color:#ffffff}
.c-highlight{color:#bf6b31}
.c-important{color:#e3e0d9}
.c-label{color:#b69e7a}
.c-legendary{color:#ff8000}
.c-lightgray{color:#9b9b9b}
.c-lightning{color:#4148bd}
.c-links{color:#82c5ff}
.c-lore{color:#ef9e9e}
.c-magic{color:#7c7cfb}
.c-materials{color:#d2ddb8}
.c-mythic{color:#dc9bf2}
.c-number{color:#dba864}
.c-number_req{color:#928c82}
.c-paragon{color:#8fd7fc}
.c-physical{color:#928c82}
.c-pickups{color:#57bcf5}
.c-poison{color:#7b9541}
.c-quality{color:#8582ff}
.c-questitem{color:#11eed1}
.c-questobjval{color:#00ff00}
.c-random{color:#aaaaff}
.c-rare{color:#ffff00}
.c-red{color:#ba1916}
.c-resource{color:#ffff74}
.c-rune{color:#fdb985}
.c-runecondition{color:#ce911a}
.c-runeeffect{color:#b044cb}
.c-set{color:#00ff00}
.c-shadow{color:#8b6594}
.c-unique{color:#dca779}
.c-warlockdominance{color:#9065d3}
.c-warlockwrath{color:#e00091}
.c-warning{color:#bf6b31}
.c-white{color:#e3e0d9}
.c-yellow{color:#ffff64}
.c-zone_complete{color:#11af00}
.k-gear .q-common h4,.k-talisman .q-common h4{color:#e3e0d9}
.k-gear .q-magic h4,.k-talisman .q-magic h4{color:#7c7cfb}
.k-gear .q-rare h4,.k-talisman .q-rare h4{color:#ffff00}
.k-gear .q-legendary h4,.k-talisman .q-legendary h4{color:#ff8000}
.k-gear .q-unique h4,.k-talisman .q-unique h4{color:#dca779}
.k-gear .q-mythic h4,.k-talisman .q-mythic h4{color:#dc9bf2}
.q-set h4,.q-set .l-set{color:#00ff00}
.k-gear .q-common .sub,.k-talisman .q-common .sub{color:#c1beb8}
.k-gear .q-magic .sub,.k-talisman .q-magic .sub{color:#6969d5}
.k-gear .q-rare .sub,.k-talisman .q-rare .sub{color:#d9d900}
.k-gear .q-legendary .sub,.k-talisman .q-legendary .sub{color:#d96d00}
.k-gear .q-unique .sub,.k-talisman .q-unique .sub{color:#bb8e67}
.k-gear .q-mythic .sub,.k-talisman .q-mythic .sub{color:#bb84ce}
.k-gear .q-set .sub,.k-talisman .q-set .sub{color:#00d900}
.k-gear .l-legendary,.k-talisman .l-legendary{color:#ff8000}
.k-gear .l-unique,.k-talisman .l-unique{color:#dca779}
.k-gear .l-mythic,.k-talisman .l-mythic{color:#dc9bf2}
:root[data-code="enus"]{--pending:"pending"}
:root[data-code="esmx"]{--pending:"pendiente"}
:root[data-code="ptbr"]{--pending:"pendente"}
:root[data-code="frfr"]{--pending:"en\000020attente"}
:root[data-code="dede"]{--pending:"ausstehend"}
:root[data-code="eses"]{--pending:"pendiente"}
:root[data-code="itit"]{--pending:"in\000020attesa"}
:root[data-code="ruru"]{--pending:"\00043e\000436\000438\000434\000430\000435\000442\000441\00044f"}
:root[data-code="jajp"]{--pending:"\00672a\0089e3\006790"}
:root[data-code="kokr"]{--pending:"\00bd84\00c11d\000020\00b300\00ae30"}
:root[data-code="plpl"]{--pending:"oczekuje"}
:root[data-code="trtr"]{--pending:"bekleniyor"}
:root[data-code="zhcn"]{--pending:"\005f85\0089e3\006790"}
:root[data-code="zhtw"]{--pending:"\005f85\0089e3\006790"}
:root[data-code="zhhm"]{--pending:"\005f85\0089e3\006790"}