/* PPC dungeon journal. Uses the website's tokens (--bg, --panel, --panel-2, --line, --ink, --ink-2, --gold, --gold-fill,
   --gold-ink, --focus, --note-bg, --note-ink, --f-display, --f-body, --f-mono) and adds its own map palette below.
   Layout: dungeon list on the left; on the right the dungeon header, then the map and the boss panel side by side. */
:root {
  --dj-map-bg: #d9d2c0;     /* parchment ground around the rooms */
  --dj-grid: rgba(70, 58, 36, .08);
  --dj-rock: #8b7c60;       /* outline of rooms and tunnels */
  --dj-floor: #f1ead8;      /* walkable floor */
  --dj-water: #9cc3cf;
  --dj-lava: #e0773a;
  --dj-ripple: rgba(255, 255, 255, .55);
  --dj-tile: rgba(110, 90, 55, .16);  /* flagstones and speckles on the floor */
  --dj-shadow: rgba(60, 45, 20, .35);
  --dj-label: #5b4b2e;
  --dj-pin: #b2302a;        /* boss pins */
  --dj-pin-ink: #fff8ec;
  --dj-route: #1f5fc9;
  --dj-pull: #b2302a;
  --dj-care: #b77a00;
  --dj-skip: #6d6f73;
  --dj-rest: #1d8a5f;
  --dj-tag-f: #1d7a52;      /* seen in Forever */
  --dj-tag-c: #6a5d8e;      /* Classic data */
  --dj-tag-u: #9a6400;      /* unconfirmed */
  --dj-over: rgba(178, 48, 42, .14);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --dj-map-bg: #141a20; --dj-grid: rgba(180, 200, 220, .05); --dj-rock: #3d4a58; --dj-floor: #26303b;
    --dj-water: #1f4a5c; --dj-lava: #b5521f; --dj-ripple: rgba(200, 230, 255, .3); --dj-tile: rgba(200, 215, 230, .07); --dj-shadow: rgba(0, 0, 0, .6); --dj-label: #b9c4d0; --dj-pin: #e2574c; --dj-pin-ink: #1a0d0b; --dj-route: #7db2ff;
    --dj-pull: #ff7a6e; --dj-care: #f0b43c; --dj-skip: #9aa1aa; --dj-rest: #4fd19a;
    --dj-tag-f: #4fd19a; --dj-tag-c: #b6a8e6; --dj-tag-u: #f0b43c; --dj-over: rgba(226, 87, 76, .18);
  }
}
:root[data-theme="dark"] {
  --dj-map-bg: #141a20; --dj-grid: rgba(180, 200, 220, .05); --dj-rock: #3d4a58; --dj-floor: #26303b;
  --dj-water: #1f4a5c; --dj-lava: #b5521f; --dj-ripple: rgba(200, 230, 255, .3); --dj-tile: rgba(200, 215, 230, .07); --dj-shadow: rgba(0, 0, 0, .6); --dj-label: #b9c4d0; --dj-pin: #e2574c; --dj-pin-ink: #1a0d0b; --dj-route: #7db2ff;
  --dj-pull: #ff7a6e; --dj-care: #f0b43c; --dj-skip: #9aa1aa; --dj-rest: #4fd19a;
  --dj-tag-f: #4fd19a; --dj-tag-c: #b6a8e6; --dj-tag-u: #f0b43c; --dj-over: rgba(226, 87, 76, .18);
}

.dj { display: grid; grid-template-columns: minmax(200px, 250px) minmax(0, 1fr); gap: 18px; align-items: start; }
.dj * { box-sizing: border-box; }
.dj h2, .dj h3, .dj h4 { font-family: var(--f-display); margin: 0; text-wrap: balance; }
.dj-side { display: grid; gap: 14px; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; padding-right: 2px; }
.dj-find input {
  width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; min-height: 38px;
  font: inherit; color: inherit;
}
.dj-results { display: grid; gap: 2px; margin-top: 6px; }
.dj-results button { text-align: left; }
.dj-group { display: grid; gap: 2px; }
.dj-group > h3 {
  font-family: var(--f-body); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2); margin: 0 0 4px;
}
.dj-item {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: baseline; width: 100%; text-align: left;
  background: transparent; border: 1px solid transparent; border-radius: 4px; padding: 6px 8px; cursor: pointer; font: inherit; color: inherit;
}
.dj-item:hover { background: var(--panel); border-color: var(--line); }
.dj-item[aria-current="true"] { background: var(--panel); border-color: var(--gold); }
.dj-item b { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.dj-item small { color: var(--ink-2); font-family: var(--f-mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.dj-item .dj-sub { grid-column: 1 / -1; color: var(--ink-2); font-size: 13px; }
.dj-badge {
  display: inline-block; font-family: var(--f-mono); font-size: 11px; line-height: 1.5; padding: 0 6px; border-radius: 99px;
  border: 1px solid currentColor; vertical-align: 1px; margin-left: 6px; white-space: nowrap; font-weight: 500;
}
.dj-badge.new { color: var(--dj-tag-f); }
.dj-badge.over { color: var(--dj-pull); }
.dj-badge.soon { color: var(--ink-2); }
.dj-later { font-size: 13px; }
.dj-later summary { cursor: pointer; color: var(--ink-2); font-weight: 600; }
.dj-later table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.dj-later td { padding: 3px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
.dj-later td:last-child { text-align: right; font-family: var(--f-mono); font-size: 12px; color: var(--ink-2); white-space: nowrap; }

.dj-main { display: grid; gap: 14px; min-width: 0; }
.dj-head { display: grid; gap: 8px; }
.dj-head h2 { font-size: 28px; line-height: 1.15; }
.dj-facts { display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--ink-2); font-size: 14px; }
.dj-facts b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.dj-facts a { color: var(--focus); }
.dj-notes { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 14px; display: grid; gap: 2px; }

/* Level scale from 10 to 60 with the beta cap marked. */
.dj-scale { position: relative; height: 26px; max-width: 520px; margin-top: 2px; }
.dj-scale .track { position: absolute; left: 0; right: 0; top: 9px; height: 6px; border-radius: 3px; background: var(--panel-2); border: 1px solid var(--line); }
.dj-scale .range { position: absolute; top: 8px; height: 8px; border-radius: 4px; background: var(--gold-fill); }
.dj-scale .range.over { background: repeating-linear-gradient(135deg, var(--dj-pull) 0 3px, transparent 3px 6px); border: 1px solid var(--dj-pull); }
.dj-scale .cap { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--dj-pull); }
.dj-scale .cap span, .dj-scale .tick { position: absolute; top: 15px; font-family: var(--f-mono); font-size: 10px; color: var(--ink-2); transform: translateX(-50%); }
.dj-scale .cap span { top: -3px; left: 6px; transform: none; color: var(--dj-pull); white-space: nowrap; }

.dj-body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 14px; align-items: start; }
.dj-mapbox { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; display: grid; min-width: 0; }
.dj-bar { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.dj-bar .grow { flex: 1 1 auto; }
.dj-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.dj-tab, .dj-tool {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; padding: 4px 10px; min-height: 32px; cursor: pointer;
  font: inherit; font-size: 14px; color: inherit;
}
.dj-tab[aria-pressed="true"], .dj-tool[aria-pressed="true"] { background: var(--gold-fill); border-color: var(--gold-fill); color: var(--gold-ink); font-weight: 600; }
.dj-tab:hover, .dj-tool:hover { border-color: var(--ink-2); }
.dj-svgwrap { position: relative; overflow: hidden; }
.dj-svg { display: block; width: 100%; height: auto; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.dj-svg.drawing { cursor: crosshair; touch-action: none; }
.dj-svg text { font-family: var(--f-body); }
.dj-svg .lbl { fill: var(--dj-label); font-family: var(--f-display); font-style: italic; font-size: 17px; }
.dj-svg .lbl.sm { font-size: 13px; }
.dj-svg .halo { paint-order: stroke; stroke: var(--dj-floor); stroke-width: 4px; stroke-linejoin: round; }
.dj-svg .pin { cursor: pointer; }
.dj-svg .pin circle.dot { fill: var(--dj-pin); stroke: var(--dj-pin-ink); stroke-width: 2.5; }
.dj-svg .pin.rare circle.dot { stroke-dasharray: 5 3; }
.dj-svg .pin text.n { fill: var(--dj-pin-ink); font-weight: 700; font-size: 15px; font-family: var(--f-mono); }
.dj-svg .pin text.nm { fill: var(--ink); font-size: 15px; font-weight: 600; paint-order: stroke; stroke: var(--dj-map-bg); stroke-width: 4px; stroke-linejoin: round; }
.dj-svg .pin.sel circle.ring { fill: none; stroke: var(--dj-pin); stroke-width: 3; }
.dj-svg .pin:focus { outline: none; }
.dj-svg .pin:focus-visible circle.ring { stroke: var(--focus); stroke-width: 4; fill: none; }
.dj-svg .rt-line { fill: none; stroke: var(--dj-route); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 10; }
.dj-svg .rt-pt { cursor: grab; }
.dj-svg .rt-pt circle { stroke: var(--dj-pin-ink); stroke-width: 2; }
.dj-svg .rt-pt text { fill: var(--dj-pin-ink); font: 700 12px var(--f-mono); }
.dj-svg .rt-pt.sel circle { stroke: var(--focus); stroke-width: 4; }
.dj-mapnote { padding: 6px 10px 8px; color: var(--ink-2); font-size: 12px; border-top: 1px solid var(--line); }

.dj-route { display: grid; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
.dj-route[hidden] { display: none; }
.dj-route .row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dj-route input[type="text"] {
  flex: 1 1 160px; min-width: 0; background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; padding: 5px 8px;
  min-height: 32px; font: inherit; font-size: 14px; color: inherit;
}
.dj-route .help { color: var(--ink-2); font-size: 13px; margin: 0; }
.dj-route .steps { margin: 0; padding-left: 22px; font-size: 13px; display: grid; gap: 1px; max-height: 160px; overflow: auto; }
.dj-key { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; margin-right: 4px; }
.dj-saved { display: grid; gap: 4px; font-size: 13px; }
.dj-saved .row { justify-content: space-between; }

.dj-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 12px 14px; display: grid; gap: 10px; min-width: 0; }
.dj-panel h3 { font-size: 21px; }
.dj-panel .meta { color: var(--ink-2); font-size: 13px; display: flex; flex-wrap: wrap; gap: 2px 10px; }
.dj-panel h4 { font-family: var(--f-body); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.dj-sect { display: grid; gap: 6px; }
.dj-abil { display: grid; gap: 1px; }
.dj-abil b { font-weight: 600; }
.dj-abil p { margin: 0; color: var(--ink-2); font-size: 14px; }
.dj-tips { margin: 0; padding-left: 18px; font-size: 14px; display: grid; gap: 3px; }
.dj-tag { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .02em; padding: 0 5px; border-radius: 3px; border: 1px solid currentColor; margin-left: 6px; vertical-align: 1px; white-space: nowrap; }
.dj-tag.f { color: var(--dj-tag-f); } .dj-tag.c { color: var(--dj-tag-c); } .dj-tag.u { color: var(--dj-tag-u); } .dj-tag.p { color: var(--ink-2); }
.dj-loot { width: 100%; border-collapse: collapse; font-size: 14px; }
.dj-loot td { padding: 5px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
.dj-loot tr:last-child td { border-bottom: 0; }
.dj-loot td.ch { text-align: right; width: 64px; font-family: var(--f-mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
.dj-loot .bar { display: block; height: 3px; margin-top: 3px; background: var(--gold-fill); border-radius: 2px; margin-left: auto; }
.dj-loot a.it { color: var(--ink); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.dj-loot a.it:hover { text-decoration: underline; }
.dj-recipe { display: block; font-size: 13px; color: var(--ink-2); margin-top: 1px; }
.dj-recipe a, .dj-recipe span.r { color: var(--focus); cursor: help; }
.dj-empty { color: var(--ink-2); font-size: 14px; margin: 0; }
.dj-order { display: grid; gap: 2px; }
.dj-order button {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; text-align: left; width: 100%;
  background: transparent; border: 1px solid transparent; border-radius: 4px; padding: 4px 6px; cursor: pointer; font: inherit; color: inherit;
}
.dj-order button:hover { background: var(--panel-2); }
.dj-order button[aria-current="true"] { border-color: var(--dj-pin); }
.dj-num { width: 22px; height: 22px; border-radius: 50%; background: var(--dj-pin); color: var(--dj-pin-ink); display: grid; place-items: center; font: 700 12px var(--f-mono); }
.dj-order small { color: var(--ink-2); font-family: var(--f-mono); font-size: 12px; }
.dj-extra { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.dj-extra section { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 10px 14px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.dj-extra ul { margin: 0; padding-left: 18px; font-size: 14px; display: grid; gap: 2px; }
.dj-extra a { color: var(--focus); }
.dj-foot { color: var(--ink-2); font-size: 12px; margin: 0; }
.dj-foot a, .dj-mapnote a { color: var(--focus); }
.dj-rares { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); }
.dj-rares b { color: var(--ink); font-weight: 600; }
.dj-check { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; cursor: pointer; color: var(--ink-2); }
.dj-toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: 4px; font-size: 14px; z-index: 40; }

/* Item tooltip, same look as the site's. */
.dj-tip[hidden] { display: none; }
.dj-tip {
  position: fixed; left: 0; top: 0; z-index: 50; display: grid; gap: 2px; pointer-events: none; width: max-content;
  max-width: min(330px, calc(100vw - 16px)); padding: 9px 12px; background: #0a1020; color: #e9edf2; border: 1px solid #34436a;
  border-radius: 4px; font-size: 14px; line-height: 1.4; box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
.dj-tip .nm { font-size: 15px; font-weight: 600; }
.dj-tip .il, .dj-tip .fl { color: #ffd100; } .dj-tip .fl { font-style: italic; }
.dj-tip .row { display: flex; justify-content: space-between; gap: 24px; }
.dj-tip .ef { color: #1eff00; } .dj-tip .mu { color: #98a4b2; }
.dj-tip .sep { margin-top: 6px; padding-top: 6px; border-top: 1px solid #566271; }
.dj-q-poor { color: #9d9d9d; } .dj-q-common { color: #ffffff; } .dj-q-uncommon { color: #1eff00; }
.dj-q-rare { color: #4aa9ff; } .dj-q-epic { color: #c566ff; } .dj-q-legendary { color: #ff8000; }

@media (max-width: 1100px) { .dj-body { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .dj { grid-template-columns: minmax(0, 1fr); }
  .dj-side { position: static; max-height: none; }
  .dj-groups { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; align-items: start; }
  .dj-groups .dj-group { display: flex; gap: 6px; align-items: start; flex: none; }
  .dj-groups .dj-group > h3 { display: none; }
  .dj-groups .dj-item { display: inline-flex; gap: 8px; align-items: baseline; width: auto; white-space: nowrap; border-color: var(--line); background: var(--panel); flex: none; }
  .dj-groups .dj-item .dj-sub { display: none; }
  .dj-groups .dj-later { flex: none; align-self: center; white-space: nowrap; }
  .dj-groups .dj-later[open] { white-space: normal; flex: 0 0 300px; }
  .dj-svg .pin text.nm { font-size: 17px; }
  .dj-head h2 { font-size: 24px; }
}
@media (prefers-reduced-motion: no-preference) { .dj-svg .pin circle.dot { transition: r .12s; } }

/* 0.4.0: item slot, and loot names with no ForeverDB id yet */
.dj-slot { margin-left: 6px; color: var(--ink-2); font-size: 12px; white-space: nowrap; }
.dj-slot::before { content: '· '; }
.dj-loot .it.noid, .dj-extra .it.noid { border-bottom: 1px dotted var(--ink-2); cursor: help; }

/* 0.5.0 map art. Each dungeon has a theme (map.theme in the data); the theme sets the rock, wall, floor and prop colours. */
.dj-svg {
  --dj-inner: rgba(0, 0, 0, .55); --dj-wood: #9a6b3f; --dj-metal: #8c969c; --dj-leaf: #6f8f3a; --dj-leaf-dk: #3f5a22;
  --dj-bone: #e9e2cf; --dj-web: rgba(255, 255, 255, .7); --dj-crystal: #b58cff; --dj-flame: #ffcf5a; --dj-bridge: #a9845a;
  --dj-water: #4f97a8; --dj-water-rim: #2c5f6b; --dj-water-hi: #7cc0cc; --dj-ripple: rgba(255, 255, 255, .55);
  --dj-lava: #e2571c; --dj-lava-rim: #6b1d0c; --dj-lava-hi: #ffb13b;
}
.dj-svg.t-stone { --dj-void:#57524a;--dj-wall:#2b2823;--dj-wall-hi:#7a7366;--dj-floor:#ece5d3;--dj-tile:rgba(95,80,55,.2);--dj-prop:#8d8576;--dj-prop-hi:#b5ad9c;--dj-glow:#ffb347;--dj-label:#3f3527; }
.dj-svg.t-crypt { --dj-void:#454b4f;--dj-wall:#1f2326;--dj-wall-hi:#687177;--dj-floor:#e3e3dc;--dj-tile:rgba(60,70,80,.18);--dj-prop:#7f878c;--dj-prop-hi:#a9b0b3;--dj-glow:#9fd3ff;--dj-label:#2f3438; }
.dj-svg.t-fire { --dj-void:#3f2622;--dj-wall:#1c0e0b;--dj-wall-hi:#6e3d2c;--dj-floor:#ecd6c0;--dj-tile:rgba(120,50,30,.18);--dj-prop:#6d4a3c;--dj-prop-hi:#94705e;--dj-glow:#ff7a2a;--dj-label:#4a2418; }
.dj-svg.t-water { --dj-void:#2e4643;--dj-wall:#132322;--dj-wall-hi:#4b6f69;--dj-floor:#e1e8da;--dj-tile:rgba(40,90,80,.17);--dj-prop:#6f8a83;--dj-prop-hi:#98b2aa;--dj-glow:#9ff0e0;--dj-label:#24413b; }
.dj-svg.t-mine { --dj-void:#4d3c2b;--dj-wall:#241911;--dj-wall-hi:#7b5f42;--dj-floor:#ecdcc2;--dj-tile:rgba(110,75,40,.2);--dj-prop:#8a7058;--dj-prop-hi:#b39577;--dj-glow:#ffb347;--dj-label:#40301c; }
.dj-svg.t-marsh { --dj-void:#3c4a31;--dj-wall:#1b2414;--dj-wall-hi:#5c7046;--dj-floor:#e4e4c9;--dj-tile:rgba(70,90,40,.18);--dj-prop:#7a8466;--dj-prop-hi:#a1ab8a;--dj-glow:#e8ff9f;--dj-label:#2f3a20; }
.dj-svg.t-arcane { --dj-void:#3b3552;--dj-wall:#1c1830;--dj-wall-hi:#62588e;--dj-floor:#e8e3f2;--dj-tile:rgba(80,60,140,.16);--dj-prop:#7d7599;--dj-prop-hi:#a69ec2;--dj-glow:#c9a6ff;--dj-label:#2f2747; }
.dj-svg.t-tech { --dj-void:#3d4549;--dj-wall:#1b2023;--dj-wall-hi:#66737a;--dj-floor:#e2e6e6;--dj-tile:rgba(60,80,90,.18);--dj-prop:#7f8b90;--dj-prop-hi:#a7b2b6;--dj-glow:#7fe9ff;--dj-label:#2a3337; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dj-svg { --dj-inner: rgba(0, 0, 0, .75); --dj-wood: #6b4a2c; --dj-leaf: #4c6a27; --dj-leaf-dk: #263a14; --dj-bone: #b9b19c; --dj-web: rgba(220, 230, 240, .45); --dj-bridge: #6e5539; --dj-water: #1f5866; --dj-water-rim: #0f2d35; --dj-water-hi: #3b8494; --dj-ripple: rgba(200, 235, 255, .35); }
  :root:not([data-theme="light"]) .dj-svg.t-stone { --dj-void:#0e0d0c;--dj-wall:#050505;--dj-wall-hi:#4e4943;--dj-floor:#514d45;--dj-tile:rgba(255,240,210,.07);--dj-prop:#777066;--dj-prop-hi:#a09781;--dj-glow:#ff9d2e;--dj-label:#d9cfbb; }
  :root:not([data-theme="light"]) .dj-svg.t-crypt { --dj-void:#0b0d0f;--dj-wall:#030405;--dj-wall-hi:#424a51;--dj-floor:#444b51;--dj-tile:rgba(210,230,255,.06);--dj-prop:#677179;--dj-prop-hi:#919ca4;--dj-glow:#7fc4ff;--dj-label:#c9d1d6; }
  :root:not([data-theme="light"]) .dj-svg.t-fire { --dj-void:#120706;--dj-wall:#050101;--dj-wall-hi:#623025;--dj-floor:#573b32;--dj-tile:rgba(255,170,120,.07);--dj-prop:#744c3f;--dj-prop-hi:#9e6e57;--dj-glow:#ff6a1a;--dj-label:#f0cdb5; }
  :root:not([data-theme="light"]) .dj-svg.t-water { --dj-void:#06100f;--dj-wall:#020605;--dj-wall-hi:#2c4a47;--dj-floor:#374d48;--dj-tile:rgba(160,255,230,.06);--dj-prop:#557770;--dj-prop-hi:#759e95;--dj-glow:#6fe0cc;--dj-label:#c4ddd6; }
  :root:not([data-theme="light"]) .dj-svg.t-mine { --dj-void:#100b07;--dj-wall:#050302;--dj-wall-hi:#54402e;--dj-floor:#524434;--dj-tile:rgba(255,220,170,.07);--dj-prop:#7b634a;--dj-prop-hi:#a48867;--dj-glow:#ff9d2e;--dj-label:#e3d2b6; }
  :root:not([data-theme="light"]) .dj-svg.t-marsh { --dj-void:#090d06;--dj-wall:#030402;--dj-wall-hi:#3d4e2e;--dj-floor:#444d3b;--dj-tile:rgba(220,255,170,.06);--dj-prop:#667359;--dj-prop-hi:#8d9b7b;--dj-glow:#c8f07a;--dj-label:#d2dcc0; }
  :root:not([data-theme="light"]) .dj-svg.t-arcane { --dj-void:#0b0912;--dj-wall:#030206;--dj-wall-hi:#3f3860;--dj-floor:#454057;--dj-tile:rgba(210,190,255,.07);--dj-prop:#685f8a;--dj-prop-hi:#8f85b6;--dj-glow:#b48aff;--dj-label:#d8d0ee; }
  :root:not([data-theme="light"]) .dj-svg.t-tech { --dj-void:#0a0c0d;--dj-wall:#030404;--dj-wall-hi:#404c51;--dj-floor:#424b4f;--dj-tile:rgba(200,240,255,.06);--dj-prop:#667378;--dj-prop-hi:#8e9fa5;--dj-glow:#5fd8f5;--dj-label:#cbd5d9; }
}
:root[data-theme="dark"] .dj-svg { --dj-inner: rgba(0, 0, 0, .75); --dj-wood: #6b4a2c; --dj-leaf: #4c6a27; --dj-leaf-dk: #263a14; --dj-bone: #b9b19c; --dj-web: rgba(220, 230, 240, .45); --dj-bridge: #6e5539; --dj-water: #1f5866; --dj-water-rim: #0f2d35; --dj-water-hi: #3b8494; --dj-ripple: rgba(200, 235, 255, .35); }
:root[data-theme="dark"] .dj-svg.t-stone { --dj-void:#0e0d0c;--dj-wall:#050505;--dj-wall-hi:#4e4943;--dj-floor:#514d45;--dj-tile:rgba(255,240,210,.07);--dj-prop:#777066;--dj-prop-hi:#a09781;--dj-glow:#ff9d2e;--dj-label:#d9cfbb; }
:root[data-theme="dark"] .dj-svg.t-crypt { --dj-void:#0b0d0f;--dj-wall:#030405;--dj-wall-hi:#424a51;--dj-floor:#444b51;--dj-tile:rgba(210,230,255,.06);--dj-prop:#677179;--dj-prop-hi:#919ca4;--dj-glow:#7fc4ff;--dj-label:#c9d1d6; }
:root[data-theme="dark"] .dj-svg.t-fire { --dj-void:#120706;--dj-wall:#050101;--dj-wall-hi:#623025;--dj-floor:#573b32;--dj-tile:rgba(255,170,120,.07);--dj-prop:#744c3f;--dj-prop-hi:#9e6e57;--dj-glow:#ff6a1a;--dj-label:#f0cdb5; }
:root[data-theme="dark"] .dj-svg.t-water { --dj-void:#06100f;--dj-wall:#020605;--dj-wall-hi:#2c4a47;--dj-floor:#374d48;--dj-tile:rgba(160,255,230,.06);--dj-prop:#557770;--dj-prop-hi:#759e95;--dj-glow:#6fe0cc;--dj-label:#c4ddd6; }
:root[data-theme="dark"] .dj-svg.t-mine { --dj-void:#100b07;--dj-wall:#050302;--dj-wall-hi:#54402e;--dj-floor:#524434;--dj-tile:rgba(255,220,170,.07);--dj-prop:#7b634a;--dj-prop-hi:#a48867;--dj-glow:#ff9d2e;--dj-label:#e3d2b6; }
:root[data-theme="dark"] .dj-svg.t-marsh { --dj-void:#090d06;--dj-wall:#030402;--dj-wall-hi:#3d4e2e;--dj-floor:#444d3b;--dj-tile:rgba(220,255,170,.06);--dj-prop:#667359;--dj-prop-hi:#8d9b7b;--dj-glow:#c8f07a;--dj-label:#d2dcc0; }
:root[data-theme="dark"] .dj-svg.t-arcane { --dj-void:#0b0912;--dj-wall:#030206;--dj-wall-hi:#3f3860;--dj-floor:#454057;--dj-tile:rgba(210,190,255,.07);--dj-prop:#685f8a;--dj-prop-hi:#8f85b6;--dj-glow:#b48aff;--dj-label:#d8d0ee; }
:root[data-theme="dark"] .dj-svg.t-tech { --dj-void:#0a0c0d;--dj-wall:#030404;--dj-wall-hi:#404c51;--dj-floor:#424b4f;--dj-tile:rgba(200,240,255,.06);--dj-prop:#667378;--dj-prop-hi:#8e9fa5;--dj-glow:#5fd8f5;--dj-label:#cbd5d9; }
.dj-svg .pin circle.dot { filter: url(#dj-pinfx); }
.dj-svg .pin text.nm { stroke: var(--dj-floor); }
.dj-svg .lbl { letter-spacing: .02em; }
@media (prefers-reduced-motion: no-preference) {
  .dj-svg .dj-flicker { animation: dj-flicker 2.8s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
  .dj-svg .dj-lavaglow { animation: dj-flicker 4s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
  @keyframes dj-flicker { from { opacity: .65; transform: scale(.94); } to { opacity: 1; transform: scale(1.04); } }
}

/* 0.5.0: loot names in item-quality colours, readable on the page in light and dark mode */
.dj { --dj-qp-poor: #7d7d7d; --dj-qp-uncommon: #1a7f00; --dj-qp-rare: #0a5fc0; --dj-qp-epic: #8233c4; --dj-qp-legendary: #c05a00; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dj { --dj-qp-poor: #a0a0a0; --dj-qp-uncommon: #41d65c; --dj-qp-rare: #5aaeff; --dj-qp-epic: #c98bff; --dj-qp-legendary: #ff9a3c; } }
:root[data-theme="dark"] .dj { --dj-qp-poor: #a0a0a0; --dj-qp-uncommon: #41d65c; --dj-qp-rare: #5aaeff; --dj-qp-epic: #c98bff; --dj-qp-legendary: #ff9a3c; }
.dj-loot a.it.dj-q-poor, .dj-extra a.it.dj-q-poor { color: var(--dj-qp-poor); }
.dj-loot a.it.dj-q-uncommon, .dj-extra a.it.dj-q-uncommon { color: var(--dj-qp-uncommon); }
.dj-loot a.it.dj-q-rare, .dj-extra a.it.dj-q-rare { color: var(--dj-qp-rare); }
.dj-loot a.it.dj-q-epic, .dj-extra a.it.dj-q-epic { color: var(--dj-qp-epic); }
.dj-loot a.it.dj-q-legendary, .dj-extra a.it.dj-q-legendary { color: var(--dj-qp-legendary); }
.dj-extra a.it { font-weight: 600; text-decoration: none; }

/* 0.5.0 layout: map and boss list on the left, boss panel on the right (sticky). "Bigger map" puts the map full width. */
.dj-left, .dj-right { display: grid; gap: 14px; min-width: 0; align-content: start; }
.dj-right { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
.dj-body.wide { grid-template-columns: minmax(0, 1fr); }
.dj-body.wide .dj-right { position: static; max-height: none; overflow: visible; }
.dj-orderbox .dj-order { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 10px; }
.dj-bosshead { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; }
.dj-navs { display: flex; gap: 4px; flex: none; }
.dj-nav { width: 32px; height: 32px; border-radius: 4px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; }
.dj-nav:hover:not(:disabled) { border-color: var(--dj-pin); }
.dj-nav:disabled { opacity: .35; cursor: default; }
.dj-nav:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
@media (max-width: 1100px) { .dj-right { position: static; max-height: none; overflow: visible; } .dj-wide { display: none; } }
/* Narrow screens: map, then the boss panel, then the boss list. On phones the map keeps a readable size and scrolls sideways. */
@media (max-width: 1100px) {
  .dj-left { display: contents; }
  .dj-body > .dj-left > .dj-mapbox { order: 1; }
  .dj-body > .dj-right { order: 2; }
  .dj-body > .dj-left > .dj-orderbox { order: 3; }
}
@media (max-width: 760px) {
  .dj-svgwrap { overflow-x: auto; overscroll-behavior-x: contain; }
  .dj-svgwrap .dj-svg { width: 820px; max-width: none; }
  .dj-svgwrap::after { content: 'Swipe the map sideways to see all of it.'; display: block; padding: 4px 10px; font-size: 12px; color: var(--ink-2); position: sticky; left: 0; }
}

/* 0.7.0: my level, loot for my class, wishlist */
.dj-me { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; margin: 10px 0 4px; }
.dj-me label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.dj-me input, .dj-me select { font: inherit; font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; min-width: 0; }
.dj-badge.fit { font-size: 10px; }
.dj-badge.fit.good { color: var(--dj-tag-f); border-color: currentColor; }
.dj-badge.fit.stretch { color: var(--dj-care); border-color: currentColor; }
.dj-badge.fit.hard { color: var(--dj-pull); border-color: currentColor; }
.dj-badge.fit.easy { color: var(--ink-2); border-color: currentColor; }
.dj-item.fit-hard, .dj-item.fit-easy { opacity: .62; }
.dj-item.fit-hard:hover, .dj-item.fit-easy:hover, .dj-item.fit-hard[aria-current="true"], .dj-item.fit-easy[aria-current="true"] { opacity: 1; }
.dj-star { background: none; border: 0; padding: 0 5px 0 0; margin: 0; cursor: pointer; font-size: 16px; line-height: 1; color: var(--ink-2); vertical-align: -1px; }
.dj-star[aria-pressed="true"] { color: var(--gold, #c9a227); }
.dj-star:hover { color: var(--gold, #c9a227); }
.dj-star:focus-visible { outline: 2px solid var(--gold, #c9a227); outline-offset: 2px; border-radius: 3px; }
.dj-cant { opacity: .42; }
.dj-cant:hover, .dj-cant:focus-within { opacity: .8; }
.dj-wish { margin: 6px 0 8px; }
.dj-wish summary { cursor: pointer; list-style: none; }
.dj-wish summary::-webkit-details-marker { display: none; }
.dj-wish summary h3 { display: inline; }
.dj-wish ul { list-style: none; margin: 6px 0 8px; padding: 0; }
.dj-wish li { display: flex; align-items: flex-start; gap: 4px; border-bottom: 1px solid var(--line); padding: 4px 0; }
.dj-wish .dj-wlink { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--ink); }
.dj-wish .dj-wlink b { display: block; font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.dj-wish .dj-wlink .dj-sub { font-size: 12px; color: var(--ink-2); }
.dj-wish .dj-wlink:hover b { text-decoration: underline; }
@media (max-width: 1100px) { .dj-me { grid-template-columns: 1fr 1fr; } }
.dj-wish:empty { display: none; }
.dj-svg .pin .wstar { fill: #ffcf3a; stroke: #3a2a00; stroke-width: 1.6; stroke-linejoin: round; }

/* ---------- 0.8.0: look ----------
   Theme colours per dungeon (from map.theme), drawn icons for items and abilities, a banner for the dungeon,
   a medal for the boss. Everything is drawn with CSS and inline SVG; no game art. */
.t-stone  { --t1: #1c1f26; --t2: #59606d; --t3: #c9ced6; }
.t-crypt  { --t1: #121419; --t2: #4b5563; --t3: #b9c3cf; }
.t-fire   { --t1: #250a03; --t2: #a83a12; --t3: #ffb37a; }
.t-water  { --t1: #04202a; --t2: #16708a; --t3: #8fe3f2; }
.t-mine   { --t1: #1e1309; --t2: #8a5a26; --t3: #f2c98a; }
.t-marsh  { --t1: #0d1a0e; --t2: #4d7a2c; --t3: #c4e59a; }
.t-arcane { --t1: #170c29; --t2: #6c3cb4; --t3: #dcc2ff; }
.t-tech   { --t1: #0b1820; --t2: #2a8396; --t3: #9eefff; }

.dj-glyph { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; display: block; }

/* Dungeon banner */
.dj-head { gap: 10px; }
.dj-hero {
  position: relative; display: flex; gap: 18px; align-items: center; padding: 20px 22px; border-radius: 10px; overflow: hidden; isolation: isolate;
  color: #f6f1e6; background: radial-gradient(120% 140% at 0% 0%, var(--t2) 0%, var(--t1) 62%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 8px 24px -14px rgba(0, 0, 0, .55);
}
.dj-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
.dj-hero::after {
  content: ''; position: absolute; right: -60px; top: -80px; width: 340px; height: 340px; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, var(--t3) 0%, transparent 65%); opacity: .16;
}
.dj-herotext { display: grid; gap: 6px; min-width: 0; flex: 1; }
.dj-kicker { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--t3); }
.dj .dj-hero h2, .dj-hero h2 { font-size: 34px; line-height: 1.08; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .45); }
.dj-hero .dj-facts { color: rgba(246, 241, 230, .78); }
.dj-hero .dj-facts b { color: #fff; }
.dj-hero .dj-facts a { color: var(--t3); }
.dj-hero .dj-badge.over { color: #ffb0a8; }
.dj-hero .dj-badge.soon { color: rgba(255, 255, 255, .7); }
.dj-hero .dj-scale .track { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .18); }
.dj-hero .dj-scale .tick { color: rgba(246, 241, 230, .7); }
.dj-hero .dj-scale .cap { background: #ff8a7e; }
.dj-hero .dj-scale .cap span { color: #ffb0a8; }
.dj-hero .dj-scale .range { box-shadow: 0 0 10px rgba(239, 191, 44, .55); }
.dj-notes { padding: 10px 14px 10px 30px; background: var(--note-bg); color: var(--note-ink); border-radius: 8px; }

/* Emblems: dungeon list and banner */
.dj-emblem {
  display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 6px; border-radius: 8px; flex: none;
  color: var(--t3); background: linear-gradient(145deg, var(--t2), var(--t1)); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25) inset, 0 1px 2px rgba(0, 0, 0, .25);
}
.dj-emblem.big { width: 76px; height: 76px; padding: 16px; border-radius: 18px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14) inset, 0 0 0 4px rgba(0, 0, 0, .18), 0 10px 22px -8px rgba(0, 0, 0, .7); }
.dj-emblem.big .dj-glyph { stroke-width: 1.4; filter: drop-shadow(0 0 6px var(--t3)); }
.dj-item { grid-template-columns: auto minmax(0, 1fr) auto; gap: 1px 10px; align-items: center; padding: 7px 8px; border-radius: 8px; transition: background .12s, border-color .12s; }
.dj-item > .dj-emblem { grid-row: span 2; }
.dj-item .dj-sub { grid-column: 2 / -1; margin-top: -2px; }
.dj-results .dj-item { grid-template-columns: 1fr; }
.dj-results .dj-item .dj-sub { grid-column: 1; }
.dj-item[aria-current="true"] { box-shadow: 0 0 0 1px var(--gold) inset, 0 4px 14px -8px rgba(0, 0, 0, .35); }

/* Panels */
.dj-panel, .dj-mapbox { border-radius: 10px; box-shadow: 0 6px 20px -16px rgba(0, 0, 0, .5); }
.dj-mapbox { overflow: hidden; }
.dj-bar { background: var(--panel-2); }
.dj-tab, .dj-tool { border-radius: 6px; transition: border-color .12s, background .12s; }
.dj-panel h4 { display: flex; align-items: center; gap: 8px; }
.dj-panel h4::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* Boss medal */
.dj-bosshead { align-items: center; }
.dj-bossname { flex: 1; min-width: 0; display: grid; gap: 2px; }
.dj-medal {
  position: relative; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, var(--t2), var(--t1) 70%); color: #fff;
  box-shadow: 0 0 0 2px var(--gold-fill), 0 0 0 5px rgba(0, 0, 0, .12), 0 6px 14px -6px rgba(0, 0, 0, .6);
}
.dj-medal.rare { box-shadow: 0 0 0 2px #c0c6d0, 0 0 0 5px rgba(0, 0, 0, .12), 0 6px 14px -6px rgba(0, 0, 0, .6); }
.dj-medal b { font: 700 21px/1 var(--f-display); text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.dj-medal small {
  position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); font: 700 10px/1 var(--f-mono); padding: 3px 5px; border-radius: 99px;
  background: var(--gold-fill); color: var(--gold-ink); white-space: nowrap;
}
.dj-medal small.over { background: var(--dj-pull); color: #fff; }

/* Abilities with a school icon */
.dj-abil { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; padding: 6px 0; }
.dj-abil + .dj-abil { border-top: 1px dashed var(--line); }
.dj-aic { width: 34px; height: 34px; padding: 6px; border-radius: 8px; color: #fff; background: linear-gradient(145deg, var(--s1), var(--s2)); box-shadow: 0 0 0 1px rgba(0, 0, 0, .3) inset, 0 2px 6px -2px var(--s1); }
.s-fire { --s1: #f07a2a; --s2: #8a2208; } .s-frost { --s1: #69c3ff; --s2: #1e5a93; } .s-storm { --s1: #5aa4ff; --s2: #23338f; }
.s-shadow { --s1: #9b6be0; --s2: #331656; } .s-arcane { --s1: #e07ae0; --s2: #5a1f78; } .s-nature { --s1: #6cc04a; --s2: #23561a; }
.s-holy { --s1: #f2cf55; --s2: #8a6512; } .s-fear { --s1: #d4655a; --s2: #5e1712; } .s-summon { --s1: #4fc8a8; --s2: #145a4a; }
.s-stun { --s1: #d9a85a; --s2: #6a4210; } .s-guard { --s1: #9fb0c4; --s2: #3a4a5e; } .s-melee { --s1: #a9a39a; --s2: #4a4540; }

/* Loot with item icons */
.dj-loot td.ic { width: 42px; padding-right: 8px; }
.dj-ic {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 6px; border-radius: 7px; color: #efe6d2; flex: none;
  background: linear-gradient(150deg, #3a3631, #15130f); border: 2px solid var(--qc, #6b6458);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5) inset, 0 0 10px -3px var(--qc, transparent);
}
.dj-ic.q-poor { --qc: #8d8d8d; } .dj-ic.q-common { --qc: #d8d8d8; } .dj-ic.q-uncommon { --qc: #1eff00; }
.dj-ic.q-rare { --qc: #0070dd; } .dj-ic.q-epic { --qc: #a335ee; } .dj-ic.q-legendary { --qc: #ff8000; }
.dj-ic.q-uncommon .dj-glyph { color: #c8ffb8; } .dj-ic.q-rare .dj-glyph { color: #bcd9ff; } .dj-ic.q-epic .dj-glyph { color: #e7c8ff; }
.dj-lname { display: flex; align-items: baseline; gap: 6px; justify-content: space-between; }
.dj-lname .dj-star { order: 2; padding: 0; }
.dj-lmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin-top: 1px; }
.dj-lmeta .dj-tag { margin-left: 0; }
.dj-loot td { vertical-align: middle; padding: 7px 4px; }
.dj-loot tr { transition: background .12s; }
.dj-loot tr:hover td { background: var(--panel-2); }
.dj-loot td.ch { font-size: 13px; color: var(--ink); }
.dj-loot .bar { height: 4px; width: 56px; background: var(--panel-2); position: relative; overflow: hidden; }
.dj-extra li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 3px 0; }
.dj-extra li .dj-ic { width: 28px; height: 28px; padding: 4px; border-width: 1.5px; }
.dj-extra ul { list-style: none; padding-left: 0; }

/* Boss list */
.dj-order button { border-radius: 8px; transition: background .12s, border-color .12s; }
.dj-order button[aria-current="true"] { background: var(--panel-2); box-shadow: 0 0 0 1px var(--dj-pin) inset; }
.dj-num { box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--dj-pin); }

@media (max-width: 760px) {
  .dj-hero { padding: 16px; gap: 12px; align-items: flex-start; }
  .dj .dj-hero h2, .dj-hero h2 { font-size: 26px; }
  .dj-emblem.big { width: 54px; height: 54px; padding: 11px; border-radius: 14px; }
  .dj-groups .dj-item > .dj-emblem { width: 22px; height: 22px; padding: 4px; border-radius: 6px; align-self: center; }
}
.dj-loot .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-fill)); border-radius: 2px; }
.dj-extra > section { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; box-shadow: 0 6px 20px -16px rgba(0, 0, 0, .5); }
.dj-extra h4 { font-family: var(--f-body); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
.dj-extra li .dj-sub { color: var(--ink-2); font-size: 12px; }
.dj-qi { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 3px; border-radius: 50%; color: #2a1d00; background: #f5c542; box-shadow: 0 0 0 1px rgba(0, 0, 0, .3) inset; flex: none; }
.dj-qi .dj-glyph { stroke-width: 3.2; }
.dj-qi.horde { box-shadow: 0 0 0 2px #b0302a; } .dj-qi.alliance { box-shadow: 0 0 0 2px #2f62c4; }
.dj-ql { font: 600 12px var(--f-mono); padding: 0 6px; border-radius: 99px; background: var(--panel-2); color: var(--ink); }
.dj-ql.red { background: #c8322a; color: #fff; } .dj-ql.orange { background: #e0802a; color: #1a0d00; } .dj-ql.yellow { background: #f0cf3a; color: #1a1400; }
.dj-ql.green { background: #3fae4a; color: #fff; } .dj-ql.grey { background: #8d8d8d; color: #fff; }

/* ---------- 0.9.0: layout ----------
   Banner, then a strip of boss cards, then map + boss panel, then dungeon-wide tabs (all drops, trash, quests). */
.dj-strip { display: grid; gap: 6px; min-width: 0; }
.dj-strip .dj-order {
  display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x proximity; scrollbar-width: thin;
}
.dj-strip .dj-order button {
  flex: 0 0 auto; scroll-snap-align: start; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 10px; align-items: center;
  width: 196px; min-height: 64px; padding: 9px 12px; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 6px 16px -14px rgba(0, 0, 0, .6); cursor: pointer; font: inherit; color: var(--ink); transition: transform .12s, border-color .12s, box-shadow .12s;
}
.dj-strip .dj-order button:hover { transform: translateY(-1px); border-color: var(--ink-2); }
.dj-strip .dj-order button[aria-current="true"] { border-color: var(--dj-pin); box-shadow: 0 0 0 1px var(--dj-pin) inset, 0 8px 18px -12px var(--dj-pin); background: var(--panel); }
.dj-strip .dj-order button.rare { border-style: dashed; }
.dj-strip .dj-num { grid-row: span 2; width: 30px; height: 30px; font-size: 13px; }
.dj-strip .nm { font-weight: 600; font-size: 14px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dj-strip small { display: flex; flex-wrap: wrap; gap: 0 8px; font: 12px var(--f-mono); color: var(--ink-2); }
.dj-strip small .over { color: var(--dj-pull); font-weight: 600; }
.dj-strip small em { font-style: normal; color: var(--dj-tag-u); }
.dj-strip small .wl { color: var(--gold); }
.dj-strip .dj-rares { margin: 0; }

.dj-body { grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr); }

/* Dungeon-wide tabs */
.dj-extra { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 20px -16px rgba(0, 0, 0, .5); overflow: hidden; }
.dj-xtabs { display: flex; gap: 2px; padding: 0 10px; background: var(--panel-2); border-bottom: 1px solid var(--line); overflow-x: auto; }
.dj-xtab {
  position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 12px 12px 11px; background: none; border: 0; cursor: pointer;
  font: 600 14px var(--f-body); color: var(--ink-2); white-space: nowrap;
}
.dj-xtab .n { font: 600 11px var(--f-mono); padding: 1px 6px; border-radius: 99px; background: var(--panel); border: 1px solid var(--line); color: var(--ink-2); }
.dj-xtab[aria-selected="true"] { color: var(--ink); }
.dj-xtab[aria-selected="true"]::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--gold-fill); }
.dj-xtab:hover { color: var(--ink); }
.dj-xtab:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; border-radius: 6px; }
.dj-xbody { padding: 12px 14px 14px; display: grid; gap: 10px; }
.dj-sort { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--ink-2); }
.dj-sort .dj-tool { min-height: 28px; padding: 2px 10px; font-size: 13px; }
.dj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px 14px; }
.dj-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px; transition: background .12s; }
.dj-card:hover { background: var(--panel-2); }
.dj-card .tx { min-width: 0; }
.dj-card .ch { font: 600 13px var(--f-mono); color: var(--ink); }
.dj-card a.it { font-weight: 600; text-decoration: none; color: var(--ink); }
.dj-card a.it:hover { text-decoration: underline; }
.dj-card a.it.dj-q-poor { color: var(--dj-qp-poor); } .dj-card a.it.dj-q-uncommon { color: var(--dj-qp-uncommon); } .dj-card a.it.dj-q-rare { color: var(--dj-qp-rare); }
.dj-card a.it.dj-q-epic { color: var(--dj-qp-epic); } .dj-card a.it.dj-q-legendary { color: var(--dj-qp-legendary); }
.dj-card .it.noid { border-bottom: 1px dotted var(--ink-2); cursor: help; }
.dj-bosslink { background: none; border: 0; padding: 0; font: inherit; font-size: 12px; color: var(--focus); cursor: pointer; text-align: left; }
.dj-bosslink:hover { text-decoration: underline; }
.dj-quests { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 4px 14px; font-size: 14px; }
.dj-quests li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 5px 4px; border-bottom: 1px solid var(--line); }
.dj-quests a { color: var(--focus); }

@media (max-width: 1100px) { .dj-body { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .dj-strip .dj-order button { width: 168px; min-height: 58px; padding: 8px 10px; }
  .dj-grid, .dj-quests { grid-template-columns: minmax(0, 1fr); }
  .dj-xbody { padding: 10px; }
}

/* ---------- 0.10.0: polish ---------- */
.dj-svg .lbl.entry { font-family: var(--f-body); font-style: normal; font-weight: 700; font-size: 13px; letter-spacing: .02em; }
.dj-svg .lbl.sm { font-size: 12.5px; }
/* Sidebar: badges live in the second line, so every row has the same height. */
.dj-new { display: inline-block; font: 600 10px/1.5 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; padding: 0 5px; margin-right: 6px; border-radius: 99px; color: var(--dj-tag-f); border: 1px solid currentColor; vertical-align: 1px; }
.dj-fit { margin-left: 6px; font-weight: 600; }
.dj-fit.good { color: var(--dj-tag-f); } .dj-fit.stretch { color: var(--dj-care); } .dj-fit.hard { color: var(--dj-pull); } .dj-fit.easy { color: var(--ink-2); }
.dj-item small.fit { font-weight: 700; }
.dj-item small.fit.good { color: var(--dj-tag-f); } .dj-item small.fit.stretch { color: var(--dj-care); } .dj-item small.fit.hard { color: var(--dj-pull); }
.dj-side { scrollbar-width: thin; }

/* Boss strip: edge fades and arrows when there is more to scroll to */
.dj-swrap { position: relative; }
.dj-strip .dj-order { padding-left: 2px; padding-right: 2px; }
.dj-swrap.more-l .dj-order { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px); mask-image: linear-gradient(90deg, transparent 0, #000 56px); }
.dj-swrap.more-r .dj-order { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
.dj-swrap.more-l.more-r .dj-order { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent); }
.dj-sarrow {
  position: absolute; top: calc(50% - 22px); width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel);
  color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; display: none; box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .45); z-index: 2;
}
.dj-sarrow.l { left: -4px; } .dj-sarrow.r { right: -4px; }
.dj-swrap.more-l .dj-sarrow.l, .dj-swrap.more-r .dj-sarrow.r { display: block; }
.dj-sarrow:hover { border-color: var(--ink-2); }
.dj-strip small .nospot { color: var(--ink-2); font-style: italic; }
.dj-unplaced { color: var(--ink); background: var(--panel-2); }
.dj-unplaced b { font-weight: 600; }

/* Loot: fixed columns for star and chance; slot text never orphans */
.dj-loot td.nmc { min-width: 0; }
.dj-loot td.st { width: 24px; text-align: center; padding-left: 0; padding-right: 0; }
.dj-loot .dj-star { padding: 0; }
.dj-lmeta { flex-wrap: nowrap; min-width: 0; overflow: hidden; }
.dj-lmeta .dj-slot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dj-lmeta .dj-bosslink { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; flex: none; }
.dj-card { grid-template-columns: auto minmax(0, 1fr) 22px 52px; }
.dj-card .ch { text-align: right; }
.dj-card .dj-star { padding: 0; justify-self: center; }
.dj-recipe { font-size: 12.5px; line-height: 1.35; }

/* Item icons: calm quality frame, no glow */
.dj-ic { box-shadow: 0 0 0 1px rgba(0, 0, 0, .5) inset; border-width: 1.5px; }

/* "Can't use": desaturated and faded, still readable */
.dj-cant { opacity: .62; filter: grayscale(1); }
.dj-cant:hover, .dj-cant:focus-within { opacity: .9; filter: none; }

/* Notes: folded when long */
div.dj-notes { display: block; padding: 10px 14px; }
div.dj-notes ul { margin: 0; padding-left: 18px; display: grid; gap: 2px; }
div.dj-notes details { margin-top: 4px; }
div.dj-notes summary { cursor: pointer; font-weight: 600; padding-left: 0; }
div.dj-notes details ul { margin-top: 4px; }
.dj-notes a { color: inherit; font-weight: 600; }

/* Level scale: the cap label sits above the line */
.dj-scale { margin-top: 12px; }
.dj-scale .cap span { top: -14px; left: 50%; transform: translateX(-50%); font-size: 10px; letter-spacing: .02em; }

/* Tooltip edge in dark mode */
.dj-tip { border: 1px solid #4a5563; box-shadow: 0 10px 28px -8px rgba(0, 0, 0, .7); }

/* Announced dungeons with no data */
.dj-empty-card { display: flex; gap: 18px; align-items: center; padding: 22px; border: 1px dashed var(--line); border-radius: 10px; background: var(--panel); color: var(--ink-2); }
.dj-empty-card h3 { color: var(--ink); font-size: 20px; margin-bottom: 4px; }
.dj-empty-card p { margin: 0; }
.dj-empty-card .dj-emblem.big { opacity: .55; filter: grayscale(.6); }

/* Phone */
@media (max-width: 760px) {
  .dj-sort { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .dj-sort .dj-tool { flex: none; }
  .dj-bar { flex-wrap: nowrap; overflow-x: auto; }
  .dj-bar .dj-tabs { flex-wrap: nowrap; }
  .dj-bar > * { flex: none; }
  .dj-strip .nm { -webkit-line-clamp: 2; white-space: normal; }
  .dj-sarrow { display: none !important; }
  .dj-groups { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
  .dj-groups .dj-item .dj-sub { display: none; }
  .dj-empty-card { flex-direction: column; align-items: flex-start; }
}
.dj-swrap { min-width: 0; }
.dj-strip, .dj-strip .dj-order { min-width: 0; max-width: 100%; }
.dj-fitkey { margin: -4px 0 0; display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12px; color: var(--ink-2); }
.dj-fitkey span::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; background: currentColor; vertical-align: 0; }
.dj-fitkey .good { color: var(--dj-tag-f); } .dj-fitkey .stretch { color: var(--dj-care); } .dj-fitkey .hard { color: var(--dj-pull); } .dj-fitkey .easy { color: var(--ink-2); }
.dj-item small.fit.easy { color: var(--ink-2); text-decoration: line-through; text-decoration-thickness: 1px; }
.dj-scale .cap { bottom: 12px; }
.dj-scale .tick { top: 17px; }

/* ---------- 0.11.0: dungeon story and loot cards ---------- */
/* The story: a card under the banner with a coloured edge from the dungeon's theme. */
.dj-lore {
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(200px, 1fr); gap: 14px 22px; padding: 16px 18px 16px 20px;
  background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--t2); border-radius: 10px;
  box-shadow: 0 6px 20px -16px rgba(0, 0, 0, .5);
}
.dj-lore-main { display: grid; gap: 8px; align-content: start; min-width: 0; }
.dj-lore h3 { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 12px var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.dj-lore-ic { display: grid; place-items: center; width: 22px; height: 22px; padding: 3px; border-radius: 6px; color: var(--t3); background: var(--t1); }
.dj-lore p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink); max-width: 80ch; }
.dj .dj-lore .dj-lore-hook { font-family: var(--f-display); font-size: 19px; line-height: 1.3; font-style: italic; color: var(--ink); }
.dj-lore-more { display: grid; gap: 8px; }
.dj-lore-more[hidden] { display: none; }
.dj-lore-toggle {
  justify-self: start; padding: 4px 0; background: none; border: 0; cursor: pointer; font: 600 14px var(--f-body); color: var(--focus);
}
.dj-lore-toggle::after { content: ' ▾'; }
.dj-lore-toggle[aria-expanded="true"]::after { content: ' ▴'; }
.dj-lore-toggle:hover { text-decoration: underline; }
.dj-lore-facts { margin: 0; align-self: start; display: grid; gap: 4px; align-content: start; padding: 12px 14px; border-radius: 8px; background: var(--panel-2); font-size: 14px; }
.dj-lore-facts dt { font: 700 11px var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.dj-lore-facts dd { margin: 0 0 6px; line-height: 1.4; color: var(--ink); }
.dj-lore-facts dd:last-child { margin-bottom: 0; }
.dj-bio { margin: -2px 0 0; font-size: 14px; line-height: 1.45; font-style: italic; color: var(--ink-2); }

/* Loot: a head with a count, filter chips, then item cards in groups. */
.dj-loothead { display: flex; align-items: baseline; gap: 10px; justify-content: space-between; }
.dj-lootsum { font-size: 12.5px; color: var(--ink-2); }
.dj-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dj-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line); font: 600 13px var(--f-body); color: var(--ink-2);
}
.dj-chip span { font: 600 11px var(--f-mono); color: var(--ink-2); }
.dj-chip:hover { color: var(--ink); border-color: var(--ink-2); }
.dj-chip[aria-pressed="true"] { background: var(--gold-fill); border-color: var(--gold-fill); color: var(--gold-ink); }
.dj-chip[aria-pressed="true"] span { color: var(--gold-ink); }
.dj-lootgroup { display: grid; gap: 6px; }
.dj-lootgroup h5 { margin: 4px 0 0; font: 700 11px var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.dj-drops { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; }
.dj-drop {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 10px 8px 8px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; transition: border-color .12s, transform .12s;
}
.dj-drop::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--qc, transparent); opacity: .85; }
.dj-drop.q-poor { --qc: #8d8d8d; } .dj-drop.q-uncommon { --qc: #1eff00; } .dj-drop.q-rare { --qc: #0070dd; }
.dj-drop.q-epic { --qc: #a335ee; } .dj-drop.q-legendary { --qc: #ff8000; }
.dj-drop:hover { border-color: var(--ink-2); }
.dj-drop .dj-ic { width: 40px; height: 40px; margin-left: 2px; }
.dj-drop .bd { display: grid; gap: 2px; min-width: 0; }
.dj-drop .dj-lname { display: block; }
.dj-drop a.it, .dj-drop .it { color: var(--ink); font-weight: 600; font-size: 14.5px; line-height: 1.3; text-decoration: none; overflow-wrap: anywhere; }
.dj-drop a.it:hover { text-decoration: underline; }
.dj-drop a.it.dj-q-poor { color: var(--dj-qp-poor); } .dj-drop a.it.dj-q-uncommon { color: var(--dj-qp-uncommon); }
.dj-drop a.it.dj-q-rare { color: var(--dj-qp-rare); } .dj-drop a.it.dj-q-epic { color: var(--dj-qp-epic); }
.dj-drop a.it.dj-q-legendary { color: var(--dj-qp-legendary); }
.dj-drop .it.noid { border-bottom: 1px dotted var(--ink-2); cursor: help; }
.dj-drop .dj-lmeta { gap: 2px 8px; font-size: 12.5px; color: var(--ink-2); }
.dj-dslot { white-space: nowrap; }
.dj-req { white-space: nowrap; font-variant-numeric: tabular-nums; }
.dj-req.high { color: var(--dj-pull); font-weight: 700; }
.dj-kstats { font: 500 12.5px/1.35 var(--f-mono); color: var(--ink); opacity: .85; }
.dj-drop .sd { display: grid; justify-items: end; gap: 4px; }
.dj-drop .dj-star { padding: 0; font-size: 17px; }
.dj-chance { display: grid; justify-items: end; gap: 3px; font: 700 13px var(--f-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.dj-chance .bar { display: block; width: 44px; height: 4px; border-radius: 2px; background: var(--panel); border: 1px solid var(--line); overflow: hidden; box-sizing: content-box; }
.dj-chance .bar i { display: block; height: 100%; background: var(--gold-fill); }
.dj-chance.hi b { color: var(--dj-qp-uncommon, #2a8a2a); }
.dj-chance.unk b { color: var(--ink-2); font-weight: 600; }
.dj-drop.dj-cant { opacity: .55; filter: grayscale(1); }
.dj-lootkey { margin: 0; font-size: 12.5px; color: var(--ink-2); }

@media (max-width: 720px) {
  .dj-lore { grid-template-columns: 1fr; padding: 14px; }
  .dj .dj-lore .dj-lore-hook { font-size: 17px; }
  .dj-drops { grid-template-columns: 1fr; }
}
/* Narrow boss panel (for example next to the site's sidebar): the card stacks, star and chance move under the text. */
.dj-drops { container-type: inline-size; }
.dj .dj-drop .dj-lmeta { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 2px; min-width: 0; }
.dj .dj-drop .dj-lmeta > * { flex: 0 0 auto; margin: 0; max-width: 100%; }
.dj .dj-drop .dj-lmeta > .dj-tag { margin-right: 2px; }
.dj-kstats { font-family: var(--f-body); font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; }
@container (max-width: 320px) {
  .dj-drop { grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; }
  .dj-drop .dj-ic { width: 34px; height: 34px; padding: 5px; }
  .dj-drop .sd { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .dj-drop .sd .dj-chance { display: flex; align-items: center; gap: 6px; }
  .dj-drop .sd .dj-star { order: 2; }
}

/* ---------- 0.11.1: whole-dungeon drops ---------- */
.dj-xtools { min-width: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: space-between; }
.dj-card .dj-kstats { margin-top: 1px; font-size: 12.5px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) { .dj-xtools .dj-chips { min-width: 0; max-width: 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; } .dj-xtools .dj-chip { flex: none; } }

/* 0.12.0: traced maps. The north arrow (traced maps can be turned to fit the frame) and doors from the game data. */
.dj-svg .dj-compass circle { fill: var(--dj-floor); stroke: var(--dj-wall); stroke-width: 3; }
.dj-svg .dj-compass path { fill: var(--dj-pin, #d64545); stroke: var(--dj-wall); stroke-width: 1; }
.dj-svg .dj-compass text { fill: var(--dj-label); font-family: var(--f-body); font-weight: 800; font-size: 13px; paint-order: stroke; stroke: var(--dj-void); stroke-width: 3px; }
.dj-svg.pic .dj-compass { display: none; }

/* 0.12.0: quest cards (start, hand-in, goal, XP, money, reputation and item rewards). */
.dj-quests.dj-qcards { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.dj-quests .dj-qcard { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card, transparent); min-width: 0; }
.dj-qhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.dj-qhead .dj-qname { font-weight: 700; font-size: 15px; text-decoration: none; }
.dj-qhead .dj-qname:hover { text-decoration: underline; }
.dj-qfacts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; margin: 0; font-size: 13px; }
.dj-qfacts dt { color: var(--ink-2); font-weight: 600; }
.dj-qfacts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.dj-qfacts .dj-qat { color: var(--ink-2); }
.dj-qfacts .dj-qobj { font-style: italic; }
.dj-qrew { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 13px; }
.dj-qxp { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }
.dj-qxp svg { width: 14px; height: 14px; color: var(--dj-qp-legendary, #d9a441); }
.dj-qmoney { display: inline-flex; gap: 4px; font-weight: 700; }
.dj-qmoney .g { color: #c9a227; } .dj-qmoney .s { color: #8f9aa3; } .dj-qmoney .c { color: #b0693a; }
.dj-qrep { padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); font-size: 12px; }
.dj-qitems { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.dj-qlab { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.dj-qitem { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.dj-qitem .dj-ic { flex: 0 0 auto; }
.dj-qitem .it { font-weight: 600; text-decoration: none; color: var(--ink); overflow-wrap: anywhere; }
.dj-qitem a.it.dj-q-uncommon { color: var(--dj-qp-uncommon); } .dj-qitem a.it.dj-q-rare { color: var(--dj-qp-rare); } .dj-qitem a.it.dj-q-epic { color: var(--dj-qp-epic); }
.dj-qitem .it.noid { border-bottom: 1px dotted var(--ink-2); }
@media (max-width: 760px) { .dj-quests.dj-qcards { grid-template-columns: minmax(0, 1fr); } }

/* 0.12.1: map captions that sit on the rock (pipes, gates, jumps) get a dark tag behind them. */
.dj-svg .dj-captag { fill: var(--dj-floor); stroke: var(--dj-wall); stroke-width: 2; }

/* 0.13.0 boss type icons on map pins */
.dj-svg .pin .gl { fill: var(--dj-pin-ink); pointer-events: none; }
.dj-svg .pin .gl .ln, .dj-svg .pin .gl .cut { fill: none; stroke: var(--dj-pin-ink); stroke-width: 2.6; stroke-linecap: round; }
.dj-svg .pin .gl .cut { stroke: var(--dj-pin); stroke-width: 1.4; }
.dj-svg .pin .gl .hole { fill: var(--dj-pin); }
.dj-svg .pin .nb circle { fill: var(--dj-pin-ink); stroke: var(--dj-pin); stroke-width: 2; }
.dj-svg .pin .nb text { fill: var(--dj-pin); font: 700 11px var(--f-mono); }

/* 0.14.0 boss tooltips on map pins, and pins over a picture that already shows the bosses */
.dj-tip .nm.bs { color: #ffd100; }
.dj-tip .hd { color: #ffd100; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.dj-tip .ab::before { content: '• '; color: #98a4b2; }
.dj-svg .pin circle.dot.baked { fill: transparent; stroke: none; }
.dj-svg .pin:hover circle.dot.baked, .dj-svg .pin:focus circle.dot.baked { stroke: var(--dj-pin); stroke-width: 3; }

/* 0.14.1 dungeons whose map is not finished yet (window.DJ_MAPS_ONLY) */
.dj-nomap { display: flex; gap: 18px; align-items: center; padding: 28px 24px; border: 1px dashed var(--line, rgba(128, 128, 128, .4)); border-radius: 12px; }
.dj-nomap h3 { margin: 0 0 6px; }
.dj-nomap p { margin: 0; opacity: .8; }

/* 0.15.0 richer boss tooltip drops, quest summary tables */
.dj-tip .dj-tdrop { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; margin: 4px 0; }
.dj-tip .dj-tdrop .dj-ic { width: 26px; height: 26px; }
.dj-tip .sm { font-size: 12px; }
.dj-tip { max-width: 340px; }
.dj-qsum { display: grid; gap: 14px; margin-bottom: 16px; }
.dj-qtab { width: 100%; border-collapse: collapse; font-size: 14px; }
.dj-qtab caption { text-align: left; font-weight: 600; padding: 0 0 6px; }
.dj-qtab th { text-align: left; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; opacity: .7; padding: 6px 10px; border-bottom: 1px solid var(--line, rgba(128, 128, 128, .3)); }
.dj-qtab td { padding: 7px 10px; border-bottom: 1px solid var(--line, rgba(128, 128, 128, .18)); vertical-align: top; }
.dj-qtab .dj-qi { display: inline-flex; vertical-align: middle; }
.dj-qmore { display: inline-block; margin-top: 8px; font-size: 13px; }
@media (max-width: 640px) { .dj-qtab { font-size: 13px; } .dj-qtab th, .dj-qtab td { padding: 6px; } }

/* 0.15.1: boss names on painted maps: bigger, warm white on a dark outline so they read over the art */
.dj-svg .pin text.nm.on-pic { fill: #fff1d0; font-size: 22px; font-weight: 700; stroke: rgba(8, 6, 4, .9); stroke-width: 7px; }
@media (max-width: 700px) { .dj-svg .pin text.nm.on-pic { font-size: 26px; } }

/* 0.18.0: boss portraits on the boss cards */
.dj-strip .dj-order button.face { grid-template-columns: 48px minmax(0, 1fr); padding: 8px 12px 8px 8px; }
.dj-strip .dj-face { grid-row: span 2; position: relative; width: 48px; height: 48px; }
.dj-strip .dj-face img { display: block; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--line); background: #0b0d10; }
.dj-strip .dj-order button[aria-current="true"] .dj-face img { border-color: var(--dj-pin); }
.dj-strip .dj-face .dj-num { position: absolute; left: -4px; top: -4px; width: 20px; height: 20px; font-size: 11px; }
.dj-medal.has-face { position: relative; overflow: visible; }
.dj-medal.has-face img { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); border-radius: 50%; object-fit: cover; }
.dj-medal.has-face b { position: absolute; left: -6px; top: -6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font: 700 12px var(--f-mono); background: var(--dj-pin); color: var(--dj-pin-ink); text-shadow: none; box-shadow: 0 0 0 2px var(--panel); }
.dj-medal.has-face small { z-index: 1; }
.dj-medal.has-face { width: 64px; height: 64px; }

/* 0.19.0: quests tab. Faction filter and summary on top, chain parts, Forever XP first, rewards with their slots. */
.dj-qtop { display: grid; gap: 10px; margin-bottom: 14px; }
.dj-qstats { display: grid; gap: 8px; }
.dj-qstat { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); font-size: 14px; }
.dj-qstat > b { font-size: 15px; margin-left: -6px; }
.dj-qstat .dj-qi, .dj-qside .dj-qi { display: inline-flex; }
.dj-qside .dj-qi svg { width: 14px; height: 14px; }
.dj-quests .dj-qcard { gap: 10px; scroll-margin: 80px; transition: box-shadow .3s; }
.dj-quests .dj-qcard.flash { box-shadow: 0 0 0 2px var(--dj-pin); }
.dj-quests .dj-qcard.chain { border-left: 3px solid var(--gold, #c9a227); }
.dj-qhead .dj-qname { flex: 1 1 auto; min-width: 0; }
.dj-qmeta { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12.5px; }
.dj-qmeta .dj-ql { font: 600 12px var(--f-mono); padding: 1px 7px; border-radius: 4px; background: var(--panel-2); border: 1px solid var(--line); }
.dj-qpart { font: 600 11px var(--f-body); letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 99px; background: var(--gold-fill); color: var(--gold-ink); }
.dj-qrew { order: 0; display: grid; gap: 8px; padding: 10px 12px; border-top: 0; border-radius: 8px; background: var(--panel-2); }
.dj-qline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.dj-qxp.big { font-size: 15px; }
.dj-qxp.none { font-weight: 600; color: var(--ink-2); font-style: italic; }
.dj-qcx { font: 12px var(--f-mono); color: var(--ink-2); }
.dj-qitems { display: grid; gap: 6px; }
.dj-qitemlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 10px; }
.dj-qitemlist .dj-qitem .tx { display: grid; min-width: 0; line-height: 1.25; }
.dj-qitemlist .dj-qitem small { font-size: 11.5px; color: var(--ink-2); }
.dj-qfacts dd .dj-bosslink { font: inherit; }
.dj-qsum { margin: 18px 0 0; }

/* 0.20.0: one card per quest chain, with numbered parts; rewards as item cards like the boss loot. */
.dj-qsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: none; }
.dj-qsteps > li { display: grid; gap: 6px; padding-left: 12px; border-left: 2px solid var(--line); }
.dj-qstephead { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.dj-qsname { font-weight: 600; font-size: 14px; text-decoration: none; }
.dj-qsname:hover { text-decoration: underline; }
.dj-qdrops { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.dj-qdrop { background: var(--panel); }
.dj-qextra { padding-top: 8px; border-top: 1px dashed var(--line); }
.dj-quests.dj-qcards { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
@media (max-width: 760px) { .dj-quests.dj-qcards { grid-template-columns: minmax(0, 1fr); } }
.dj-quests .dj-qcard > * { flex: none; }
.dj-quests .dj-qcard .dj-qrew { display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
.dj-quests .dj-qsteps > li { display: grid; align-items: start; padding: 0 0 0 12px; border-bottom: 0; }
.dj-drops.dj-qdrops { container-type: normal; }

/* 0.21.0: dungeon pictures. An icon fills the emblem; a banner picture sits behind the hero, darkened on the left for the text. */
.dj-emblem.has-pic { padding: 0; overflow: hidden; }
.dj-emblem.has-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dj-hero.has-pic { background: linear-gradient(90deg, rgba(8, 8, 12, .88) 0%, rgba(8, 8, 12, .62) 45%, rgba(8, 8, 12, .15) 100%), var(--dj-banner) center / cover no-repeat, var(--t1); min-height: 190px; }
.dj-hero.has-pic::after { display: none; }
@media (max-width: 760px) { .dj-hero.has-pic { background: linear-gradient(180deg, rgba(8, 8, 12, .55) 0%, rgba(8, 8, 12, .85) 100%), var(--dj-banner) 70% center / cover no-repeat, var(--t1); } }
/* 0.22.0: credit line on the dungeon banner art */
.dj-hero { position: relative; }
.dj-herocredit { position: absolute; right: 10px; bottom: 6px; font-size: 11px; color: rgba(255, 255, 255, .62); text-shadow: 0 1px 2px #000; pointer-events: none; }
@media (max-width: 760px) { .dj-herocredit { top: 6px; bottom: auto; font-size: 10px; } }
/* 0.23.0: game icons from ForeverChanges on loot and abilities, ability role flags, set lines in tooltips */
.dj-ic.pic { padding: 0; overflow: hidden; }
.dj-ic.pic img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.dj-aic.pic { padding: 0; overflow: hidden; background: #111; }
.dj-aic.pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dj-aflag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; vertical-align: 1px;
  color: var(--ink-2); background: color-mix(in srgb, var(--ink-2) 14%, transparent); }
.dj-aflag.f-tank { color: #6aa7ff; background: rgba(106, 167, 255, .14); }
.dj-aflag.f-healer { color: #5fd38a; background: rgba(95, 211, 138, .14); }
.dj-aflag.f-interrupt, .dj-aflag.f-deadly, .dj-aflag.f-important { color: #ff7a6b; background: rgba(255, 122, 107, .14); }
.dj-aflag.f-magic { color: #6fb6ff; } .dj-aflag.f-curse { color: #c983ff; } .dj-aflag.f-poison { color: #8bd448; } .dj-aflag.f-disease { color: #d3a84a; }
.dj-tip .st { color: #9d9d9d; } .dj-tip .st.sep { color: #ffd100; }