/* worldmap.js: the map window's tabs (M) and the world map */
#bigmap-canvas[hidden], .wm-world[hidden] { display: none; }
/* (the tabs make the window taller: keep the map and the world map inside the screen) */
#bigmap-canvas, .wm-world { max-height: calc(100vh - 210 * var(--u)); }
.wm-tabs { display: flex; gap: calc(10 * var(--u)); margin: 0 0 calc(12 * var(--u)); }
.wm-tabs button {
  pointer-events: auto; cursor: pointer; border: calc(4 * var(--u)) solid var(--ink); border-radius: calc(10 * var(--u));
  background: #5b536a; color: #f4efe6; font: 600 calc(22 * var(--u)) 'Mitr', sans-serif; padding: calc(2 * var(--u)) calc(24 * var(--u));
}
.wm-tabs button.on { background: #ffd873; color: var(--ink); }

.wm-world { display: flex; gap: calc(14 * var(--u)); width: 100%; aspect-ratio: 4700 / 3300; }
.wm-board {
  position: relative; flex: 1 1 64%; min-width: 0; overflow: hidden; border-radius: calc(12 * var(--u)); border: calc(4 * var(--u)) solid var(--ink);
  background: radial-gradient(ellipse at 40% 45%, #efe2c2, #d9c39a 70%, #c9ae82);
}
.wm-links { position: absolute; inset: 0; width: 100%; height: 100%; }
.wm-links line { stroke: #8a6a44; stroke-width: calc(6 * var(--u)); stroke-dasharray: calc(14 * var(--u)) calc(10 * var(--u)); stroke-linecap: round; vector-effect: non-scaling-stroke; }
.wm-node {
  position: absolute; transform: translate(-50%, -50%); pointer-events: auto; cursor: pointer; display: flex; flex-direction: column;
  align-items: center; gap: calc(3 * var(--u)); min-width: calc(140 * var(--u));
  padding: calc(6 * var(--u)) calc(12 * var(--u)); border-radius: calc(14 * var(--u)); border: calc(4 * var(--u)) solid var(--ink);
  background: #f6ecd6; color: var(--ink); font: 400 calc(17 * var(--u)) / 1.25 'Mitr', sans-serif; text-align: center;
  box-shadow: 0 calc(5 * var(--u)) 0 rgba(0, 0, 0, 0.25);
}
.wm-node:hover { background: #fffaf0; }
.wm-node b { font-weight: 600; font-size: calc(19 * var(--u)); white-space: nowrap; }
.wm-node.sel { background: #fff4c4; outline: calc(4 * var(--u)) solid #ffd873; }
.wm-node.here { box-shadow: 0 0 0 calc(7 * var(--u)) rgba(255, 216, 115, 0.6), 0 calc(5 * var(--u)) 0 rgba(0, 0, 0, 0.25); }
.wm-lv { font-weight: 600; padding: 0 calc(8 * var(--u)); border-radius: calc(8 * var(--u)); background: #d8d0c0; color: var(--ink); white-space: nowrap; }
.wm-lv.fit, .wm-node.fit .wm-lv { background: #a3e392; }
.wm-lv.hard, .wm-node.hard .wm-lv { background: #ff9f8c; }
.wm-lv.easy, .wm-node.easy .wm-lv { background: #c9c9d2; }
.wm-els { display: flex; gap: calc(3 * var(--u)); }
.wm-els img { width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
.wm-pin {
  position: absolute; top: calc(-32 * var(--u)); left: 50%; transform: translateX(-50%); white-space: nowrap; font: 600 calc(15 * var(--u)) / 1.5 'Mitr', sans-serif;
  font-style: normal; background: #e0525c; color: #fff; padding: 0 calc(10 * var(--u)); border-radius: calc(9 * var(--u)); border: calc(3 * var(--u)) solid var(--ink);
}
.wm-legend {
  position: absolute; right: calc(10 * var(--u)); bottom: calc(8 * var(--u)); max-width: 58%; justify-content: flex-end; color: #5a4630; font: 400 calc(15 * var(--u)) 'Mitr', sans-serif;
  display: flex; align-items: center; gap: calc(6 * var(--u)); flex-wrap: wrap;
}
.wm-legend i { display: inline-block; width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: calc(5 * var(--u)); border: calc(2 * var(--u)) solid var(--ink); }
.wm-legend i.fit { background: #a3e392; } .wm-legend i.hard { background: #ff9f8c; } .wm-legend i.easy { background: #c9c9d2; }

.wm-info {
  flex: 0 0 36%; min-width: 0; overflow: auto; pointer-events: auto; padding: calc(12 * var(--u)) calc(16 * var(--u));
  border-radius: calc(12 * var(--u)); border: calc(4 * var(--u)) solid var(--ink); background: #2a2635; font-size: calc(17 * var(--u)); line-height: 1.45;
}
.wm-info p { margin: calc(4 * var(--u)) 0; color: #e6dccb; }
.wm-info .wm-dim { color: #a9a1b4; }
.wm-h { display: flex; justify-content: space-between; align-items: center; gap: calc(8 * var(--u)); font: 600 calc(24 * var(--u)) 'Mitr', sans-serif; color: #fff3cf; }
.wm-h .wm-lv { font-size: calc(16 * var(--u)); }
.wm-verdict { font-weight: 600; font-size: calc(16 * var(--u)); }
.wm-verdict.fit { color: #a3e392; } .wm-verdict.hard { color: #ff9f8c; } .wm-verdict.easy { color: #c9c9d2; }
.wm-sub { margin: calc(10 * var(--u)) 0 calc(4 * var(--u)); font-weight: 600; color: #ffd873; }
.wm-mons, .wm-good { margin: 0; padding: 0; list-style: none; }
.wm-mons li, .wm-good li { display: flex; align-items: center; gap: calc(6 * var(--u)); }
.wm-mons img, .wm-good img, .wm-chip img { width: calc(22 * var(--u)); height: calc(22 * var(--u)); flex: none; }
.wm-mons li span { flex: 1; min-width: 0; }
.wm-mons small { color: #b9b0c6; white-space: nowrap; }
.wm-mons em { font-style: normal; font-size: calc(14 * var(--u)); padding: 0 calc(6 * var(--u)); border-radius: calc(6 * var(--u)); background: #e0525c; color: #fff; }
.wm-mons em.calm { background: #5aa36a; }
.wm-good li { align-items: flex-start; }
.wm-good b { color: #ffae5c; font-weight: 600; }
.wm-bad { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); }
.wm-chip { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); padding: 0 calc(8 * var(--u)); border-radius: calc(8 * var(--u)); background: #3d3848; color: #aab4c8; }
.wm-drops { display: flex; flex-wrap: wrap; gap: calc(4 * var(--u)); }
.wm-drops img { width: calc(36 * var(--u)); height: calc(36 * var(--u)); }
/* dungeons: a tag on a map with dungeons, the list of floors in the details */
.wm-dunflag { font-style: normal; font-size: calc(13 * var(--u)); line-height: 1.5; padding: 0 calc(7 * var(--u)); border-radius: calc(7 * var(--u));
  background: #4a3f5e; color: #ffe9a8; border: calc(2 * var(--u)) solid var(--ink); }
.wm-duns { display: flex; flex-direction: column; gap: calc(5 * var(--u)); }
.wm-dun { pointer-events: auto; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(6 * var(--u)); text-align: left;
  padding: calc(4 * var(--u)) calc(10 * var(--u)); border-radius: calc(9 * var(--u)); border: calc(3 * var(--u)) solid var(--ink);
  background: #3d3848; color: #f4efe6; font: 400 calc(16 * var(--u)) / 1.4 'Mitr', sans-serif; }
.wm-dun:hover { background: #4b4558; }
.wm-dun b { font-weight: 600; color: #fff3cf; }
.wm-dun small { color: #b9b0c6; }
.wm-dun em { font-style: normal; font-size: calc(13 * var(--u)); padding: 0 calc(6 * var(--u)); border-radius: calc(6 * var(--u)); background: #e0525c; color: #fff; }
.wm-dun em.calm { background: #7a5ac8; }
.wm-dun.up { color: #cfe6ff; }