/* Painterly map style (region maps, world chart, minimap) with gentle animation */
.regionmap, .worldmap { width: 100%; height: 100%; display: block; user-select: none; touch-action: none; background: #1a6bb0; }

/* water */
.shimmer { animation: shimmer 9s linear infinite; }
@keyframes shimmer { from { transform: translate(0, 0); } to { transform: translate(60px, 30px); } }
.spark { fill: none; stroke: #d9f6ff; stroke-width: 1.4; stroke-linecap: round; animation: spark 4s ease-in-out infinite; }
@keyframes spark { 0%, 100% { opacity: .15; } 50% { opacity: .9; } }
.sea-route { fill: none; stroke: #fff; stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; opacity: .85; animation: sail 3s linear infinite; }
@keyframes sail { to { stroke-dashoffset: -18; } }
.boat { animation: bob 3.5s ease-in-out infinite; transform-box: fill-box; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 2px; } }
.wake { fill: none; stroke: #e9fbff; stroke-width: 1.2; opacity: .8; }

/* land */
.road-case { fill: none; stroke: #b98b52; stroke-width: 6.5; stroke-linecap: round; opacity: .55; }
.road { fill: none; stroke: #f6e7bf; stroke-width: 3.6; stroke-linecap: round; }
.shadow { fill: rgba(20, 50, 20, .28); }
.tr { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 4.5s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(-2.2deg); } 50% { transform: rotate(2.2deg); } }
.smoke { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 2; stroke-linecap: round; animation: smoke 3s ease-in-out infinite; }
@keyframes smoke { 0%, 100% { opacity: .35; } 50% { opacity: .85; } }
.cactus { fill: none; stroke: #3f9a3a; stroke-width: 2.4; stroke-linecap: round; }
.pool { fill: #4fb7c9; stroke: #2f8a7a; stroke-width: .8; }
.lake-rim { fill: #f1e2a8; }
.lake { fill: #49b6e0; }
.glint { fill: none; stroke: #e6fbff; stroke-width: 1.2; animation: spark 4s ease-in-out infinite; }

/* clouds */
.cloud .cloud-in circle { fill: #fff; }
.cloud.edge { animation: drift 26s ease-in-out infinite alternate; opacity: .95; }
.cloud.shade .cloud-in circle { fill: rgba(10, 40, 60, .16); }
.cloud.shade { animation: drift-far 60s linear infinite alternate; }
@keyframes drift { from { translate: -14px -6px; } to { translate: 14px 6px; } }
@keyframes drift-far { from { translate: -80px -10px; } to { translate: 120px 30px; } }
.clouds { mix-blend-mode: normal; }

/* compass & titles */
.compass .c-n { font: 800 15px Inter, system-ui, sans-serif; fill: #fff; text-anchor: middle; paint-order: stroke; stroke: rgba(15, 50, 90, .6); stroke-width: 3px; }
.title-chip rect { fill: rgba(255, 255, 255, .9); stroke: rgba(20, 60, 110, .25); }
.title-chip text { font: 700 22px "Pixelify Sans", "Fraunces", Georgia, serif; fill: #18406e; }
.title-chip.big text { font-size: 30px; }

/* locations */
.regionmap .node { cursor: pointer; outline: none; }
.regionmap .node .hit { fill: transparent; }
.regionmap .node .sel-ring { fill: none; stroke: transparent; stroke-width: 2.5; stroke-dasharray: 5 4; }
.regionmap .node:hover .sel-ring, .regionmap .node:focus .sel-ring { stroke: rgba(255, 255, 255, .9); }
.regionmap .node.sel .sel-ring { stroke: #ffd447; animation: spinring 6s linear infinite; }
@keyframes spinring { to { stroke-dashoffset: -70; } }
.regionmap .node .icon { transition: transform .15s; }
.regionmap .node:hover .icon { transform: scale(1.2); }
.regionmap .node .lbl {
  font-family: "Pixelify Sans", Inter, system-ui, sans-serif; font-weight: 700; fill: #fff; text-anchor: middle; letter-spacing: .01em;
  paint-order: stroke; stroke: #1b3a5c; stroke-width: 3.8px; stroke-linejoin: round; pointer-events: none;
}
.regionmap .node.t-route .lbl, .regionmap .node.t-sea .lbl { font-weight: 700; font-style: italic; opacity: 0; transition: opacity .2s; }
.regionmap.zoomed .node .lbl, .regionmap .node:hover .lbl, .regionmap .node.sel .lbl { opacity: 1; }
.party-pin path { fill: #e44d3a; stroke: #fff; stroke-width: 2; }
.party-pin .pulse { fill: none; stroke: #fff; stroke-width: 3; animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { 0% { opacity: .9; r: 8; } 100% { opacity: 0; r: 34; } }
.pav-ring { stroke: #fff; stroke-width: 2.2; }
.pav-t { font: 800 10.5px Inter, sans-serif; fill: #fff; text-anchor: middle; pointer-events: none; }
.pav { animation: hop 2.4s ease-in-out infinite; }
.pav:nth-child(2n) { animation-delay: -1.2s; }
@keyframes hop { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2px; } }

/* world chart */
.worldmap .wr { cursor: pointer; outline: none; }
.worldmap .w-sh2 { fill: #3fb0e0; } .worldmap .w-sh2 line { stroke: #3fb0e0; }
.worldmap .w-sh1 { fill: #7fd8ee; } .worldmap .w-sh1 line { stroke: #7fd8ee; }
.worldmap .w-base { fill: #6e2e1d; } .worldmap .w-base line { stroke: #6e2e1d; }
.worldmap .w-face { fill: #b85a37; } .worldmap .w-face line { stroke: #b85a37; }
.worldmap .w-land { fill: #7cc44c; } .worldmap .w-land line { stroke: #7cc44c; }
.worldmap .wr:hover .w-land, .worldmap .wr:focus .w-land { fill: #93d65e; }
.worldmap .wr:hover .w-land line, .worldmap .wr:focus .w-land line { stroke: #93d65e; }
.worldmap .wr.cur .w-face { fill: #e44d3a; } .worldmap .wr.cur .w-face line { stroke: #e44d3a; }
.w-ribbon { fill: #fff; stroke: var(--rc); stroke-width: 3; }
.wr:hover .w-ribbon, .wr.cur .w-ribbon { fill: color-mix(in srgb, var(--rc) 25%, #fff); }
.w-name { font: 800 17px Inter, system-ui, sans-serif; fill: #18406e; text-anchor: middle; }

/* minimap */
.map-host { position: relative; }
.minimap {
  position: absolute; left: 12px; bottom: 12px; width: 190px; aspect-ratio: 1000 / 720; border-radius: 12px; overflow: hidden;
  border: 2px solid rgba(255, 255, 255, .85); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); cursor: crosshair; z-index: 4; background: #1f78bd; touch-action: none;
}
.minimap svg { width: 100%; height: 100%; display: block; }
.mm-sea { fill: #1f78bd; }
.mm-cliff { fill: #b85a37; } .mm-cliff line { stroke: #b85a37; }
.mm-land { fill: #7cc44c; } .mm-land line { stroke: #7cc44c; }
.mm-dot { fill: #fff; }
.mm-pin { fill: #e44d3a; stroke: #fff; stroke-width: 5; }
.mm-view { fill: rgba(255, 255, 255, .14); stroke: #ffd447; stroke-width: 10; }
.minimap.full .mm-view { stroke-opacity: .35; }
.bm-minimap { position: absolute; left: 12px; bottom: 12px; z-index: 5; border: 2px solid rgba(255, 255, 255, .8); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); background: #000; cursor: crosshair; touch-action: none; }
.bm-minimap canvas { display: block; }
.local-preview { position: relative; height: min(70vh, 640px); border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.modal-map { width: min(1200px, 100%) !important; }
.loc-actions { margin: 8px 0; }
@media (max-width: 900px) { .minimap { width: 130px; } }
@media (prefers-reduced-motion: reduce) {
  .tr, .cloud, .shimmer, .spark, .boat, .sea-route, .pav, .smoke, .glint { animation: none !important; }
}

/* Cloud shadows sweeping over the land: a seamless repeating tile scrolled diagonally. */
.cloud-shadows {
  position: absolute; inset: 0; pointer-events: none; z-index: 2; mix-blend-mode: multiply; opacity: .5;
  background-image:
    radial-gradient(ellipse 210px 120px at 18% 26%, rgba(20, 45, 70, .5), transparent 70%),
    radial-gradient(ellipse 150px 90px at 28% 34%, rgba(20, 45, 70, .4), transparent 70%),
    radial-gradient(ellipse 260px 140px at 72% 62%, rgba(20, 45, 70, .45), transparent 70%),
    radial-gradient(ellipse 160px 80px at 62% 70%, rgba(20, 45, 70, .35), transparent 70%),
    radial-gradient(ellipse 180px 100px at 44% 92%, rgba(20, 45, 70, .38), transparent 70%);
  background-size: 1100px 820px; background-repeat: repeat;
  animation: shadows 70s linear infinite;
}
@keyframes shadows { from { background-position: 0 0; } to { background-position: 1100px 820px; } }
.bm .cloud-shadows { z-index: 3; opacity: .42; }
.bm.indoor .cloud-shadows { display: none; }
@media (prefers-reduced-motion: reduce) { .cloud-shadows { animation: none; } }

/* minimap show / hide */
.bm-minimap { transform-origin: left bottom; transition: transform .32s cubic-bezier(.2, .9, .25, 1.1), opacity .22s ease; }
.mm-off .bm-minimap { transform: scale(.12); opacity: 0; pointer-events: none; }
.bm-mm-tg { position: absolute; left: 16px; bottom: 16px; z-index: 6; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .5); background: rgba(16, 19, 28, .88); color: #fff; font-size: 12px; cursor: pointer; box-shadow: var(--shadow); opacity: .75; transition: opacity .2s, width .25s, height .25s, transform .25s; }
.bm-mm-tg:hover { opacity: 1; }
.bm-mm-tg .off { display: none; }
.mm-off .bm-mm-tg { left: 12px; bottom: 12px; width: 40px; height: 40px; font-size: 20px; opacity: .95; border-radius: 12px; border-color: var(--line2); }
.mm-off .bm-mm-tg .on { display: none; }
.mm-off .bm-mm-tg .off { display: inline; }
@media (prefers-reduced-motion: reduce) { .bm-minimap, .bm-mm-tg { transition: none; } }