.d2j {
  --paper: #f1e6cc;
  --paper-2: #e4d4b0;
  --ink: #3b2f22;
  --ink-2: #6b5a43;
  --ink-faint: #a8956f;
  --trail: #9e2a1c;
  --seal: #a3271b;
  --seal-hi: #d0574a;
  --hell: #a3341f;
  --sea: #c9c3a6;
  --gold: #8a6420;
  background: #e9dfc8;
  color: var(--ink);
  font: 17px/1.5 "IM Fell English", Georgia, serif;
  padding: 16px;
  border: 1px solid #d8cba9;
}
.d2j * { box-sizing: border-box; }
.d2j .d2j-scroll { overflow-x: auto; border-radius: 4px; box-shadow: 0 12px 40px -18px rgba(40, 25, 10, .45); -webkit-overflow-scrolling: touch; }
.d2j svg.d2j-map { display: block; width: 100%; min-width: 820px; height: auto; background: var(--paper); }
.d2j svg text { font-family: "IM Fell English", Georgia, serif; fill: var(--ink); }
.d2j .region-label { font-family: "IM Fell English SC", Georgia, serif; letter-spacing: .35em; font-size: 22px; fill: var(--ink-2); opacity: .75; }
.d2j .region-act { font-style: italic; font-size: 13px; fill: var(--ink-faint); letter-spacing: .1em; }
.d2j .terrain { stroke: var(--ink); fill: none; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.d2j .terrain .fill { fill: var(--paper-2); }
.d2j .terrain.hell { stroke: var(--hell); opacity: .7; }
.d2j .route-ahead { stroke: var(--ink-faint); stroke-width: 1.4; stroke-dasharray: 1 6; stroke-linecap: round; fill: none; }
.d2j .trail { stroke: var(--trail); stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.d2j .trail.travel { stroke-dasharray: 7 6; stroke-width: 2.2; }
.d2j .node circle.wp { fill: var(--paper); stroke: var(--ink); stroke-width: 1.3; transition: fill .3s; }
.d2j .node.on circle.wp { fill: var(--ink); }
.d2j .node .town { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.d2j .node.on .town { fill: var(--ink); }
.d2j .node .seal { fill: none; stroke: var(--ink-faint); stroke-width: 1.2; stroke-dasharray: 2 2.5; }
.d2j .node.on.done .seal { fill: var(--seal); stroke: var(--seal-hi); stroke-dasharray: none; stroke-width: 1.5; }
.d2j .node .seal-mark { fill: none; stroke: var(--paper); stroke-width: 1.4; opacity: 0; }
.d2j .node.on.done .seal-mark { opacity: 1; }
.d2j .node.pop { animation: d2j-pop .5s cubic-bezier(.3, 1.6, .5, 1); transform-box: fill-box; transform-origin: center; }
@keyframes d2j-pop { 0% { transform: scale(.4); } 100% { transform: scale(1); } }
.d2j .node-label { font-size: 13px; }
.d2j .node-label.town-label { font-family: "IM Fell English SC", Georgia, serif; font-size: 15px; }
.d2j .node-label.boss { font-style: italic; fill: var(--ink-2); }
.d2j .halo { fill: var(--paper); opacity: .85; }
.d2j .hit { fill: transparent; cursor: pointer; }
.d2j .hero { opacity: 0; transition: opacity .6s; }
.d2j .hero.show { opacity: 1; }
.d2j .hero .ring { fill: none; stroke: var(--trail); stroke-width: 2; animation: d2j-pulse 2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes d2j-pulse { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }
.d2j .hero .flag { fill: var(--trail); }
.d2j .hero text { font-family: "IM Fell English SC", Georgia, serif; font-size: 16px; }
.d2j .cartouche-title { font-family: "IM Fell English SC", Georgia, serif; font-size: 30px; }
.d2j .cartouche-sub { font-style: italic; font-size: 15px; fill: var(--ink-2); }
.d2j .ticker-date { font-family: "IM Fell English SC", Georgia, serif; font-size: 14px; fill: var(--trail); letter-spacing: .08em; }
.d2j .ticker-text { font-size: 16px; }
.d2j-tip { position: fixed; pointer-events: none; background: #3b2f22; color: #f1e6cc; padding: 6px 10px; border-radius: 4px; font: 14px/1.35 "IM Fell English", Georgia, serif; opacity: 0; transition: opacity .12s; max-width: 260px; z-index: 50; }
.d2j-tip i { opacity: .8; }
.d2j .d2j-controls { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 12px 2px 0; font-size: 14px; color: var(--ink-2); font-style: italic; flex-wrap: wrap; }
.d2j button.d2j-replay { font: inherit; font-style: normal; font-size: 15px; color: var(--ink); background: transparent; border: 1px solid var(--ink-faint); border-radius: 4px; padding: 4px 14px; cursor: pointer; }
.d2j button.d2j-replay:hover { border-color: var(--ink); }
.d2j .d2j-ledger { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); border-top: 1px solid var(--ink-faint); border-bottom: 1px solid var(--ink-faint); }
.d2j .d2j-ledger > div { padding: 14px 16px; border-right: 1px solid rgba(168, 149, 111, .5); }
.d2j .d2j-ledger > div:last-child { border-right: none; }
.d2j .d2j-ledger .k { font-family: "IM Fell English SC", Georgia, serif; font-size: 14px; letter-spacing: .1em; color: var(--ink-2); }
.d2j .d2j-ledger .v { font-size: 30px; line-height: 1.15; }
.d2j .d2j-ledger .v small { font-size: 18px; }
.d2j .d2j-ledger .n { font-size: 14px; font-style: italic; color: var(--ink-2); }
.d2j .d2j-xpbar { height: 5px; background: rgba(168, 149, 111, .4); margin-top: 8px; border-radius: 3px; overflow: hidden; }
.d2j .d2j-xpbar span { display: block; height: 100%; background: var(--trail); }
.d2j .d2j-relics { margin-top: 14px; font-size: 16px; color: var(--ink-2); }
.d2j .d2j-relics b { font-weight: normal; color: var(--gold); }
@media (max-width: 600px) { .d2j .d2j-ledger > div { border-right: none; border-bottom: 1px solid rgba(168, 149, 111, .5); } }