@font-face { font-family: "AvQest"; src: local("AvQest"); }  /* the D2-style font, if the viewer has it installed */
  /* Layout: the title; "how to read it" with the filter levels; then the filter bar, which stays at the top while
     scrolling (under the website's header on the website); then one table per item type: a header row per group of
     bases with the same socket maximum, size and rows, then one row per case (filter levels, what happens, then one
     column per condition). Phones: each row is a card. Every rule is scoped to .base-map, so the website's theme and
     this page leave each other alone. Dark by default; light when the website (Material) is switched to light. */
  .base-map {
    --bg: #151412; --panel: #1f1d1a; --fg: #ece7de; --muted: #a59e91; --line: #36322c; --soft: #2a2723;
    --accent: #d8b45e;
    --k-tag: #f0a04b; --k-notify: #8bb4e8; --k-show: #c9b27a; --k-shown: #8fcf8a; --k-hide: #9a9385;
    --ground-1: #3a3428; --ground-2: #26221b; --ground-3: #15130f;
    --display: "Cinzel", "Trajan Pro", Georgia, serif;
    --body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --label: "AvQest", "Palatino Linotype", Palatino, Georgia, serif;
    --top: 0px;  /* where the filter bar stops while scrolling */
    color-scheme: dark;
    color: var(--fg); font: 15px/1.45 var(--body);
  }
  [data-md-color-scheme="default"] .base-map {
    --bg: #f3f1ec; --panel: #fffdf8; --fg: #23211c; --muted: #6b655a; --line: #ded7c9; --soft: #ece6da;
    --accent: #8a6d1f;
    --k-tag: #b8610f; --k-notify: #2f6db3; --k-show: #8a6d1f; --k-shown: #2f7d32; --k-hide: #8b8579;
    color-scheme: light;
  }
  .md-content .base-map { --top: 2.4rem; }  /* on the website: under its header, which stays at the top */
  .base-map *, .base-map *::before, .base-map *::after { box-sizing: border-box; }
  .base-map .wrap { max-width: 1400px; margin: 0 auto; padding-inline: 16px; }
  .md-content .base-map .wrap { padding-inline: 0; }
  .base-map h1.bm-title { font: 700 26px/1.2 var(--display); letter-spacing: .02em; margin: 0; padding-block: 16px 10px;
                          color: var(--fg); text-wrap: balance; }
  .base-map .bar { position: sticky; top: var(--top); z-index: 3; background: var(--panel);
                   border-block: 1px solid var(--line); padding-block: 8px; margin-block: 12px 0; }
  .base-map .bar .wrap { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
  .md-content .base-map .bar .wrap { padding-inline: 10px; }
  .base-map .controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; max-width: 100%; }
  .base-map #level { width: 16rem; }  /* the closed select: its long options do not widen the page (phones) */
  .base-map input[type=search], .base-map select {
    font: inherit; font-size: 14.5px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px;
    background: var(--bg); color: var(--fg); min-width: 0; max-width: 100%; margin: 0; }
  .base-map input[type=search] { flex: 1 1 220px; }
  .base-map .count { font-size: 13px; color: var(--muted); }
  .base-map button:focus-visible, .base-map select:focus-visible, .base-map input:focus-visible,
  .base-map summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* how to read it */
  .base-map .howto { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 4px 24px;
                     background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; }
  @media (max-width: 900px) { .base-map .howto { grid-template-columns: minmax(0, 1fr); } }
  .base-map .howto h2 { font: 700 12.5px/1.3 var(--body); text-transform: uppercase; letter-spacing: .08em;
                        color: var(--muted); margin: 0 0 6px; }
  .base-map .howto p, .base-map .howto li { max-width: 76ch; font-size: 14.5px; line-height: 1.45; }
  .base-map .howto p { margin: 0 0 6px; }
  .base-map .howto ul { margin: 0 0 6px; padding-left: 18px; list-style: disc; }
  .base-map .howto li { margin: 0; }
  .base-map .levels { font-size: 13.5px; margin: 4px 0 0; padding-left: 24px; list-style: decimal; }
  .base-map .levels li { font-size: 13.5px; margin: 0; }
  .base-map .kinds { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 2px 0 8px; font-size: 13.5px; }
  .base-map .kinds > span { display: inline-flex; align-items: center; gap: 6px; }

  /* the tables */
  .base-map section.cat { margin-top: 22px; }
  .base-map h3.cat { font: 600 19px/1.25 var(--display); margin: 0 0 4px; letter-spacing: 0; color: var(--fg); }
  /* Every table of the page has the same columns (Levels, Shows, Icon, Chat, then each condition the page uses) at
     the same widths, so they line up from one item type to the next; Skills and Other share the room that is left.
     A window narrower than that scrolls the table sideways. */
  .base-map .tw { overflow-x: auto; }
  .base-map table.bm { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 14px; line-height: 1.4;
                       margin: 0; }
  .base-map table.bm col.w-lv { width: 8em; } .base-map table.bm col.w-shows { width: 10em; }
  .base-map table.bm col.w-ic { width: 3.5em; } .base-map table.bm col.w-ch { width: 3.5em; }
  .base-map table.bm col.w-eth { width: 4.5em; } .base-map table.bm col.w-quality { width: 6.5em; }
  .base-map table.bm col.w-ed { width: 7.5em; } .base-map table.bm col.w-sockets { width: 6.5em; }
  .base-map table.bm col.w-clvl { width: 8em; } .base-map table.bm col.w-class { width: 8em; }
  .base-map table.bm col.w-ilvl { width: 5em; } .base-map table.bm col.w-res { width: 4.5em; }
  .base-map table.bm th, .base-map table.bm td { text-align: left; vertical-align: top; padding: 4px 8px; border: 0;
                                                 overflow-wrap: anywhere; }
  .base-map table.bm thead th { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
                                color: var(--muted); border-bottom: 2px solid var(--line); padding-block: 6px;
                                vertical-align: bottom; overflow-wrap: normal; }
  .base-map tr.ghead th { padding: 14px 8px 4px; border-bottom: 1px solid var(--line); font-weight: 400;
                          background: none; text-transform: none; letter-spacing: 0; font-size: 14px; }
  .base-map tr.ghead .nm { font-weight: 700; font-size: 15px; }
  .base-map tr.ghead .code { color: var(--muted); font-size: 12.5px; font-weight: 400; }
  .base-map tr.ghead .sub { display: block; color: var(--muted); font-size: 12.5px; margin-top: 1px; }
  .base-map tr.row td { border-bottom: 1px solid var(--soft); vertical-align: middle; }  /* text level with labels */
  .base-map tr.row:hover td { background: var(--soft); }
  .base-map td.lv { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: normal; }
  .base-map td.shows .ground { max-width: none; }
  .base-map .anyw { color: var(--muted); opacity: .6; }
  .base-map tr.low td.c-quality { color: var(--muted); font-style: italic; }
  .base-map tr.none td { color: var(--muted); font-size: 13px; font-style: italic; }
  .base-map tr.lowbar td { padding-block: 2px 6px; }
  .base-map .lowbtn { font: inherit; font-size: 13px; color: var(--muted); background: none; border: 0; padding: 0;
                      margin: 0; cursor: pointer; }
  .base-map .lowbtn::before { content: "\25B8"; display: inline-block; width: 1.1em; }
  .base-map .lowbtn[aria-expanded=true]::before { content: "\25BE"; }
  .base-map .pill { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .05em;
                    text-transform: uppercase; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--kc);
                    color: var(--kc); white-space: nowrap; line-height: 1.45; }
  .base-map .k-tag { --kc: var(--k-tag); } .base-map .k-notify { --kc: var(--k-notify); }
  .base-map .k-show { --kc: var(--k-show); } .base-map .k-shown { --kc: var(--k-shown); }
  .base-map .k-hide { --kc: var(--k-hide); }
  .base-map .text.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .base-map .more { font: inherit; font-size: 12.5px; color: var(--accent); background: none; border: 0; padding: 0;
                    margin: 0; cursor: pointer; }

  /* <details> (a named base's skill combinations): the page's own marker; on the website, none of Material's
     admonition look */
  .md-typeset .base-map details, .base-map details { border: 0; border-radius: 0; box-shadow: none; background: none;
    padding: 0; margin: 0; overflow: visible; font-size: inherit; display: block; }
  .md-typeset .base-map details > summary, .base-map details > summary { list-style: none; display: block; position: static;
    padding: 0; margin: 0; border: 0; background: none; min-height: 0; font-weight: inherit; cursor: pointer;
    color: var(--k-tag); }
  .base-map details > summary::-webkit-details-marker { display: none; }
  .md-typeset .base-map details > summary::before, .base-map details > summary::before {
    content: "\25B8"; position: static; display: inline-block; width: 1.1em; height: auto; background: none;
    -webkit-mask-image: none; mask-image: none; transform: none; color: var(--muted); }
  .md-typeset .base-map details[open] > summary::before, .base-map details[open] > summary::before { content: "\25BE"; }
  .md-typeset .base-map details > summary::after { display: none; content: none; }
  .base-map details.named ul { margin: 3px 0 2px; padding-left: 20px; font-size: 13.5px; }
  .base-map details.named li { margin: 1px 0; }

  /* the in-game look */
  .base-map .ground { display: inline-block; max-width: 100%; text-align: center; border-radius: 5px; padding: 2px 5px;
                      background: radial-gradient(ellipse at 50% 45%, var(--ground-1) 0%, var(--ground-2) 55%, var(--ground-3) 100%); }
  .base-map .d2label { display: inline-block; font-family: var(--label); font-size: 14px; line-height: 1.12;
                       text-align: center; white-space: pre; background: rgba(0, 0, 0, .74); padding: 2px 6px 0;
                       vertical-align: middle; max-width: 100%; }
  /* A backslash is drawn as the slash mirrored: the web fonts space "\" wide, the game draws it like "/" */
  .base-map .d2label .bs { display: inline-block; transform: scaleX(-1); }
  .base-map .c-WHITE { color: #e8e8e8; } .base-map .c-RED { color: #ff4d4d; } .base-map .c-GREEN { color: #00ff00; }
  .base-map .c-BLUE { color: #6969ff; } .base-map .c-GOLD { color: #c7b377; } .base-map .c-GRAY { color: #696969; }
  .base-map .c-BLACK { color: #000000; } .base-map .c-TAN { color: #d0c27d; } .base-map .c-ORANGE { color: #ffa800; }
  .base-map .c-YELLOW { color: #ffff64; } .base-map .c-PURPLE { color: #ae00ff; }
  .base-map .c-DARK_GREEN { color: #008000; } .base-map .c-CORAL { color: #ff7f6e; } .base-map .c-SAGE { color: #a3b88f; }
  .base-map .c-TEAL { color: #3fb5b5; } .base-map .c-LIGHT_GRAY { color: #a8a8a8; }
  .base-map .icon { position: relative; display: inline-block; width: 16px; height: 16px; background: #0c0b09;
                    border-radius: 2px; vertical-align: middle; }
  .base-map .icon span { position: absolute; }
  .base-map .chat { display: inline-flex; color: var(--muted); vertical-align: middle; cursor: help; }
  .base-map .chat svg { width: 22px; height: 22px; }
  .base-map .sound { white-space: nowrap; font-size: 12.5px; color: var(--muted); border-bottom: 1px dotted var(--muted);
                     cursor: help; margin-left: 4px; }
  .base-map p.empty { color: var(--muted); text-align: center; padding: 40px 0; margin: 0; }
  .base-map footer { color: var(--muted); font-size: 13px; padding-block: 24px; }

  .base-map [hidden] { display: none !important; }  /* (collapsed low quality rows, also in the phone layout) */

  /* phones: each row a card (levels, what happens and its icons on top, then the conditions that are not "any") */
  @media (max-width: 760px) {
    .base-map table.bm, .base-map table.bm tbody, .base-map table.bm tr, .base-map table.bm th,
    .base-map table.bm td { display: block; width: auto; }
    .base-map table.bm thead { display: none; }
    .base-map table.bm tr.ghead th { padding: 12px 0 4px; }
    .base-map table.bm tr.row { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 12px; padding: 7px 0;
                                border-bottom: 1px solid var(--soft); }
    .base-map table.bm tr.row td { display: inline-block; border: 0; padding: 0; min-width: 0; white-space: normal; }
    .base-map table.bm tr.row:hover td { background: none; }
    .base-map table.bm tr.row td.cond::before { content: attr(data-label) ": "; color: var(--muted); }
    .base-map table.bm tr.row td.cond .text:not(.clamp) { display: inline; }
    .base-map table.bm tr.row td.c-skills, .base-map table.bm tr.row td.c-other { flex-basis: 100%; }
    .base-map table.bm tr.row td.any, .base-map table.bm tr.row td.nu, .base-map table.bm tr.row td.ic:empty,
    .base-map table.bm tr.row td.ch:empty { display: none; }
    .base-map table.bm colgroup { display: none; }
    .base-map table.bm tr.lowbar td, .base-map table.bm tr.none td { padding: 4px 0; }
  }