/* ---------- the world atlas v2 (2026-10-16, the user: "ทำแผนที่โลกให้ใหม่ จัดเรียงให้ดูเข้าใจง่าย"): one road from the capital
   outward, built from parts (js/atlas2.js): the parchment base, a Codex vignette per map, a dashed ink road in the colour of
   each land, a parchment plate per map (number seal in its land's colour, name, level), markers, the legend along the
   bottom sea and zoom buttons. Only .wm-atlas.v2 is touched: the old atlas rules in style.css stay for the old layout. ---------- */
#ui .bw-worldmap .wm-atlas.v2 { overflow: hidden; background: #d8c497; }
#ui .bw-worldmap .wm-atlas.v2 .wm-zoom { position: absolute; inset: 0; transform-origin: 0 0; touch-action: none; }
#ui .bw-worldmap .wm-atlas.v2:not(.panning) .wm-zoom { transition: transform 0.18s ease-out; }
#ui .bw-worldmap .wm-atlas.v2.zoomed .wm-zoom { cursor: grab; }
#ui .bw-worldmap .wm-atlas.v2.panning .wm-zoom { cursor: grabbing; }
#ui .bw-worldmap .wm-atlas.v2 .wm-atlas-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; user-select: none; -webkit-user-drag: none; }
@media (prefers-reduced-motion: reduce) { #ui .bw-worldmap .wm-atlas.v2 .wm-zoom { transition: none !important; } }

/* the road: a pale underlay, the dashed ink in the land's colour, a chevron in each gap pointing on to higher levels */
#ui .bw-worldmap .wm-atlas.v2 .wm-road { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
#ui .bw-worldmap .wm-atlas.v2 .wm-road path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
#ui .bw-worldmap .wm-atlas.v2 .wm-road-under path { stroke: rgba(250, 240, 214, 0.72); stroke-width: 15; }
#ui .bw-worldmap .wm-atlas.v2 .wm-road-ink path { stroke-width: 5; stroke-dasharray: 14 10; opacity: 0.92; }
#ui .bw-worldmap .wm-atlas.v2 .wm-road-chev path.wm-chev { stroke-width: 5; opacity: 0.95; }

/* the vignettes (the art: pointer-events off, the region button above takes the clicks) */
#ui .bw-worldmap .wm-atlas.v2 .wm-arts { position: absolute; inset: 0; pointer-events: none; }
#ui .bw-worldmap .wm-atlas.v2 .wm-art { position: absolute; object-fit: contain; user-select: none; -webkit-user-drag: none; transition: opacity 0.2s, filter 0.2s; }
#ui .bw-worldmap .wm-atlas.v2 .wm-art.dim { opacity: 0.25; filter: grayscale(0.75); }

/* a stop: the button covers its vignette; the plate hangs under it */
#ui .bw-worldmap .wm-atlas.v2 .wm-reg { transform: none; border-radius: 46%; transition: opacity 0.2s; }
#ui .bw-worldmap .wm-atlas.v2 .wm-reg:hover, #ui .bw-worldmap .wm-atlas.v2 .wm-reg.sel, #ui .bw-worldmap .wm-atlas.v2 .wm-reg.qg-target { z-index: 4; }
#ui .bw-worldmap .wm-atlas.v2 .wm-reg.dim { opacity: 0.32; }
#ui .bw-worldmap .wm-atlas.v2 .wm-rglow { inset: -4% -3%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--lc) 34%, transparent), color-mix(in srgb, var(--lc) 12%, transparent) 70%, transparent); }
#ui .bw-worldmap .wm-atlas.v2 .wm-reg.sel .wm-rglow { box-shadow: 0 0 0 2px color-mix(in srgb, var(--lc) 80%, #2b1a0c); }
#ui .bw-worldmap .wm-atlas.v2 .wm-rplate { top: var(--py); gap: 4px; width: max-content; max-width: 164px; box-sizing: border-box; padding: 6px 12px 7px 7px; white-space: normal; z-index: 1;
  border: 0 solid transparent; border-image: url(../assets/ui_book/atlas_label.png) 27 62 19 62 fill / 8px 17px 7px 17px stretch;
  filter: drop-shadow(0 1px 1.5px rgba(40, 24, 10, 0.55)); }
#ui .bw-worldmap .wm-atlas.v2 .wm-reg:hover .wm-rplate, #ui .bw-worldmap .wm-atlas.v2 .wm-reg.sel .wm-rplate { transform: translate(-50%, -50%) scale(1.08); }
/* the number seal: the wax seal recoloured to its land */
#ui .bw-worldmap .wm-atlas.v2 .wm-rnum { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font: 800 11.5px/1 'Fredoka', sans-serif; color: #fffaf0; background: url(../assets/ui_book/atlas_seal.png) center / 118% no-repeat, var(--lc);
  background-blend-mode: luminosity, normal; box-shadow: 0 0 0 1.5px rgba(43, 26, 12, 0.85); }
#ui .bw-worldmap .wm-atlas.v2 .wm-rnum.star { font-size: 13px; }
#ui .bw-worldmap .wm-atlas.v2 .wm-reg.safe .wm-rplate { max-width: 174px; }   /* (the capital: its name on one line; nothing sits west of it) */
#ui .bw-worldmap .wm-atlas.v2 .wm-reg.safe .wm-rtext b { font-size: 12.5px; white-space: nowrap; }
#ui .bw-worldmap .wm-atlas.v2 .wm-reg.safe .wm-rplate { padding-right: 9px; }
#ui .bw-worldmap .wm-atlas.v2 .wm-rtext { min-width: 0; }
#ui .bw-worldmap .wm-atlas.v2 .wm-rtext b { display: block; font: 700 13.5px/1.1 'Mali', serif; color: #34200c; text-shadow: none; overflow-wrap: normal; }
#ui .bw-worldmap .wm-atlas.v2 .wm-rtext small { display: block; margin-top: 1px; font: 700 11px/1.1 'Fredoka', 'Mali', sans-serif; color: #6b4a2a; }
#ui .bw-worldmap .wm-atlas.v2 .wm-reg.st-rec .wm-rtext small { color: #23661a; }
#ui .bw-worldmap .wm-atlas.v2 .wm-reg.st-ahead .wm-rtext small { color: #8a560c; }
#ui .bw-worldmap .wm-atlas.v2 .wm-reg.st-hard .wm-rtext small { color: #a1281c; }
#ui .bw-worldmap .wm-atlas.v2 .wm-reg.st-easy .wm-rtext small { color: #7d6a55; }
#ui .bw-worldmap .wm-atlas.v2 .wm-reg.safe .wm-rtext small { color: #6b4a2a; }
/* "แนะนำ": the maps for your level right now */
#ui .bw-worldmap .wm-atlas.v2 .wm-rrec { position: absolute; right: 2px; top: -9px; padding: 1px 6px; border-radius: 8px; background: #2f7a24; color: #fff8e6;
  font: 700 9.5px/1.35 'Mali', sans-serif; font-style: normal; box-shadow: 0 0 0 1.5px #f3e6c4; }
/* markers on the vignette: the boss's face (top right), today's dungeon / the boss dungeon gate (top left), the field boss */
#ui .bw-worldmap .wm-atlas.v2 .wm-rboss { position: absolute; right: 3%; top: -6%; width: 24px; height: 24px; border-radius: 50%; z-index: 1;
  background: #efe3c2; box-shadow: 0 0 0 2px #b8862c, 0 0 0 3px #3b2410; filter: none; cursor: help; }
#ui .bw-worldmap .wm-atlas.v2 .wm-rboss:hover { transform: scale(1.25); }
#ui .bw-worldmap .wm-atlas.v2 .wm-rdg { position: absolute; left: 3%; top: -8%; width: 28px; height: 28px; z-index: 1; filter: drop-shadow(0 1px 1px rgba(40, 24, 10, 0.7));
  animation: wmDgBob 1.8s ease-in-out infinite; }
#ui .bw-worldmap .wm-atlas.v2 .wm-rdg.bdg { left: auto; right: 3%; animation: none; }
@keyframes wmDgBob { 50% { transform: translateY(-3px); } }
#ui .bw-worldmap .wm-atlas.v2 .wm-rfb { position: absolute; left: 50%; top: 4%; transform: translateX(-50%); padding: 1px 7px; border-radius: 8px; background: #a1281c; color: #fff8e6;
  font: 700 10px/1.4 'Mali', sans-serif; font-style: normal; white-space: nowrap; z-index: 1; animation: wmDgBob 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { #ui .bw-worldmap .wm-atlas.v2 :is(.wm-rdg, .wm-rfb) { animation: none; } }
/* you are here: your face on a pin over your map's vignette */
#ui .bw-worldmap .wm-atlas.v2 .wm-you { left: 26%; top: 32%; transform: translate(-50%, -50%); z-index: 2; }
#ui .bw-worldmap .wm-atlas.v2 .wm-you canvas { width: 36px; height: 36px; }
#ui .bw-worldmap .wm-atlas.v2 .wm-you i { margin-top: 2px; padding: 1px 7px; font-size: 10px; }

/* the legend along the bottom sea: the nine lands (tap = light up that land's maps) and what the marks mean */
#ui .bw-worldmap .wm-atlas.v2 .wm-legend { position: absolute; left: 8px; right: 8px; bottom: 5px; z-index: 2; display: flex; flex-direction: column; gap: 3px; padding: 4px 6px;
  border-radius: 6px; background: rgba(243, 230, 196, 0.93); box-shadow: 0 0 0 1px #6b4a24, 0 2px 6px rgba(40, 24, 10, 0.35); }
#ui .bw-worldmap .wm-atlas.v2 .wm-legend button { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px 1px 2px; border: 0; border-radius: 9px; background: none; cursor: pointer;
  font: 700 12px/1.3 'Mali', sans-serif; color: #3b2410; white-space: nowrap; }
#ui .bw-worldmap .wm-atlas.v2 .wm-legend button:hover { background: rgba(107, 74, 36, 0.14); }
#ui .bw-worldmap .wm-atlas.v2 .wm-legend button.on { background: rgba(107, 74, 36, 0.26); box-shadow: inset 0 0 0 1px rgba(107, 74, 36, 0.6); }
#ui .bw-worldmap .wm-atlas.v2 .wm-lg-lands, #ui .bw-worldmap .wm-atlas.v2 .wm-lg-keys { display: flex; justify-content: space-between; gap: 2px; }
#ui .bw-worldmap .wm-atlas.v2 .wm-lg-land i { width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font: 800 10.5px/1 'Fredoka', sans-serif; font-style: normal; color: #fffaf0;
  background: url(../assets/ui_book/atlas_seal.png) center / 118% no-repeat, var(--lc); background-blend-mode: luminosity, normal; box-shadow: 0 0 0 1px rgba(43, 26, 12, 0.85); }
#ui .bw-worldmap .wm-atlas.v2 .wm-lg-land small { font: 700 11px/1 'Fredoka', sans-serif; color: color-mix(in srgb, var(--lc) 70%, #2b1a0c); }
#ui .bw-worldmap .wm-atlas.v2 .wm-lg-land.you { box-shadow: inset 0 0 0 1.5px #2f7a24; }
#ui .bw-worldmap .wm-atlas.v2 .wm-lg-land { padding: 1px 4px 1px 1px; gap: 3px; font-size: 11.5px; flex: 0 1 auto; min-width: 0; }
#ui .bw-worldmap .wm-atlas.v2 .wm-lg-lands { gap: 0; }
#ui .bw-worldmap .wm-atlas.v2 .wm-lg-keys { justify-content: center; gap: 12px; }
#ui .bw-worldmap .wm-atlas.v2 .wm-lg-keys button { font-weight: 600; font-size: 11.5px; color: #4a3018; }
#ui .bw-worldmap .wm-atlas.v2 .wm-lg-keys img { width: 15px; height: 15px; object-fit: contain; }
#ui .bw-worldmap .wm-atlas.v2 .wm-lg-keys svg { width: 24px; height: 8px; }
#ui .bw-worldmap .wm-atlas.v2 .wm-lg-keys svg path { stroke: #6b3a1c; stroke-width: 3; stroke-dasharray: 5 3; fill: none; }
#ui .bw-worldmap .wm-atlas.v2 .wm-lg-keys .k-you { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(#f6ead0, #c9a878); box-shadow: 0 0 0 2px #7a2a1c; }
#ui .bw-worldmap .wm-atlas.v2 .wm-lg-keys .k-rec { padding: 0 5px; border-radius: 7px; background: #2f7a24; color: #fff8e6; font: 700 9px/1.4 'Mali', sans-serif; font-style: normal; }
#ui .bw-worldmap .wm-atlas.v2 .wm-lg-keys .k-boss { width: 13px; height: 13px; border-radius: 50%; background: #efe3c2; box-shadow: 0 0 0 2px #b8862c; }

/* zoom buttons (top right) */
#ui .bw-worldmap .wm-atlas.v2 .wm-zctl { position: absolute; right: 8px; top: 8px; z-index: 2; display: flex; flex-direction: column; gap: 4px; }
#ui .bw-worldmap .wm-atlas.v2 .wm-zctl button { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  font: 800 17px/1 'Fredoka', sans-serif; color: #3b2410; background: rgba(243, 230, 196, 0.95); box-shadow: 0 0 0 1.5px #6b4a24, 0 2px 4px rgba(40, 24, 10, 0.4); }
#ui .bw-worldmap .wm-atlas.v2 .wm-zctl button:hover { background: #fff3d8; }
/* the region card's land chip */
#ui .bw-worldmap .wm-acard .wm-ac-chips i.land { background: color-mix(in srgb, var(--lc) 18%, transparent); color: color-mix(in srgb, var(--lc) 75%, #2b1a0c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lc) 55%, transparent); }
/* a phone (the atlas under 640 px on screen): the legend folds into one big button and opens twice as big; bigger zoom buttons */
#ui .bw-worldmap .wm-atlas.v2 .wm-lg-toggle { display: none !important; }
#ui .bw-worldmap .wm-atlas.v2.small .wm-lg-toggle { display: inline-flex !important; align-self: flex-start; padding: 2px 10px !important; background: #6b3a1c !important; color: #fff3df !important; border-radius: 10px !important; }
#ui .bw-worldmap .wm-atlas.v2.small .wm-legend { right: auto; width: calc((100% - 16px) / 2); transform: scale(2); transform-origin: left bottom; padding: 3px; }
#ui .bw-worldmap .wm-atlas.v2.small .wm-legend:not(.open) { background: none; box-shadow: none; }
#ui .bw-worldmap .wm-atlas.v2.small .wm-legend:not(.open) :is(.wm-lg-lands, .wm-lg-keys) { display: none; }
#ui .bw-worldmap .wm-atlas.v2.small .wm-lg-lands, #ui .bw-worldmap .wm-atlas.v2.small .wm-lg-keys { flex-wrap: wrap; justify-content: flex-start; gap: 2px 6px; }
#ui .bw-worldmap .wm-atlas.v2.small .wm-zctl { transform: scale(1.9); transform-origin: right top; }