.map-screen{

  position:fixed;
  inset:0;

  overflow:hidden;

  background:#09121b;
}

.map-viewport{

  position:absolute;
  inset:0;

  overflow-y:auto;
  overflow-x:hidden;

  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  scrollbar-width:none;
  touch-action:pan-y;
  user-select:none;

  z-index:1;
}

.map-viewport::-webkit-scrollbar{
  display:none;
}

.map-world{

  position:relative;

  width:100%;
  min-height:100svh;
  height:2100px;
}

.map-bg{

  position:absolute;

  left:0;
  top:0;

  width:100%;
  height:2200px;

  background:

     url("../../assets/img/map/world-1.webp")
    center center / cover no-repeat;

  transform:scale(1.03);
}

.map-overlay{

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0.10),
      rgba(0,0,0,0.35)
    );
}



.map-nodes{

  position:absolute;
  inset:0;

  z-index:3;
}

.map-node{

  position:absolute;

  width:92px;
  height:92px;

  border:none;
  background:none;

  padding:0;
  margin:0;

  cursor:pointer;

  transform:
    translate(-50%, -50%);

  transition:
    transform 180ms ease,
    filter 180ms ease;
}

.map-node img{

  width:100%;
  height:100%;

  object-fit:contain;

  pointer-events:none;

  transition:
    transform 220ms ease,
    filter 220ms ease;

  filter:
    drop-shadow(
      0 10px 18px rgba(0,0,0,0.42)
    )
    drop-shadow(
      0 0 8px rgba(255,210,90,0.08)
    );
}

@media (orientation: portrait) and (max-width: 600px){

  .map-screen{
    height:100svh;
  }

  .map-world{
    height:1900px;
  }

  .map-bg{
    width:112%;
    height:1980px;
    left:-6%;
    background-position:
      center top;
    transform:none;
  }

  .map-node{
    width:74px;
    height:74px;
  }

  .map-node span{
    font-size:18px;
  }
}
.map-node span{

  position:absolute;

  left:50%;
  top:50%;

  transform:
    translate(-50%, -50%);

  font-size:22px;
  font-weight:900;

  color:#fff;

  text-shadow:
    0 2px 6px rgba(0,0,0,0.55);

  pointer-events:none;
}

.map-node:hover{

  transform:
    translate(-50%, -50%)
    scale(1.08);
}

.map-node:hover img{

  filter:
    drop-shadow(
      0 12px 20px rgba(0,0,0,0.48)
    )
    drop-shadow(
      0 0 14px rgba(255,220,120,0.32)
    );

  transform:
    scale(1.04);
}

.map-node-active{

  animation:
    mapNodePulse 2.2s ease-in-out infinite;
}

.map-back-btn{

  position:fixed;

  left:28px;
  top:26px;

  z-index:12;

  min-width:108px;
  height:46px;

  border:
    2px solid rgba(255,218,118,0.68);
  border-radius:10px;

  font-size:16px;
  font-weight:900;
  letter-spacing:0;

  color:#fff2b0;
  text-shadow:
    0 2px 0 rgba(70,34,8,0.92),
    0 0 8px rgba(255,224,126,0.42);

  cursor:pointer;

  background:
    radial-gradient(circle at 50% 14%, rgba(255,245,170,0.34), rgba(255,245,170,0) 38%),
    linear-gradient(180deg, #8b5b1e 0%, #5c3214 52%, #2b1609 100%);

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.20),
    inset 0 -4px 0 rgba(0,0,0,0.28),
    0 7px 14px rgba(0,0,0,0.34),
    0 0 12px rgba(255,184,70,0.18);
}

.map-back-btn:hover{
  transform:
    translateY(-1px);

  filter:
    brightness(1.08);
}

@keyframes mapNodePulse{

  0%{

    transform:
      translate(-50%, -50%)
      scale(1);
  }

  50%{

    transform:
      translate(-50%, -50%)
      scale(1.08);
  }

  100%{

    transform:
      translate(-50%, -50%)
      scale(1);
  }
}
.map-ship{

  position:absolute;

  left:34%;
  top:96%;

  width:min(300px, 23vw);

  z-index:3;

  pointer-events:none;

  object-fit:contain;

  transform:
    translate(-50%, -70%);

  filter:
    drop-shadow(
      0 18px 28px rgba(0,0,0,0.34)
    );

  transition:
    left 900ms ease,
    top 900ms ease;

  animation:
    shipFloat 4s ease-in-out infinite;
}

.map-ship-hidden{
  opacity:0;
  visibility:hidden;
}

@keyframes shipFloat{

  0%{

    transform:
      translate(-50%, -70%)
      translateY(0px)
      rotate(-1deg);
  }

  50%{

    transform:
      translate(-50%, -70%)
      translateY(-10px)
      rotate(1deg);
  }

  100%{

    transform:
      translate(-50%, -70%)
      translateY(0px)
      rotate(-1deg);
  }
}
.map-path-svg{

  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  z-index:2;

  pointer-events:none;
}

.map-path-base,
.map-path-progress{

  fill:none;

  stroke-linecap:round;
  stroke-linejoin:round;
}

.map-path-base{

  stroke:
    rgba(44,24,10,0.62);

  stroke-width:0.58;

  filter:
    drop-shadow(
      0 3px 5px rgba(0,0,0,0.42)
    );
}

.map-path-progress{

  stroke:
    #ffd36a;

  stroke-width:0.92;

  stroke-dasharray:0 100;

  stroke-dashoffset:0 !important;

  filter:
    drop-shadow(
      0 0 10px rgba(255,210,90,0.52)
    )
    drop-shadow(
      0 0 18px rgba(255,180,60,0.22)
    );

  animation:
    mapPathGlow 2.8s ease-in-out infinite;
}
.map-node-locked{

  opacity:0.62;

  filter:
    grayscale(0.45)
    brightness(0.78);
}

.map-node-active{

  z-index:8;

  animation:
    activeNodePulse 2s ease-in-out infinite;

  filter:
    drop-shadow(
      0 0 14px rgba(255,220,90,0.75)
    )
    drop-shadow(
      0 0 24px rgba(255,180,70,0.28)
    );
}

.map-node-active::after{

  content:"";

  position:absolute;

  left:50%;
  top:50%;

  width:116%;
  height:116%;

  border-radius:50%;

  transform:
    translate(-50%, -50%);

  border:
    2px solid rgba(255,220,120,0.42);

  box-shadow:
    0 0 16px rgba(255,210,90,0.28);

  animation:
    activeNodeRing 4s linear infinite;

  pointer-events:none;
}
.map-node-completed{
  opacity:1;
  z-index:6;

  filter:
    drop-shadow(
      0 0 10px rgba(255,205,90,0.62)
    )
    drop-shadow(
      0 0 18px rgba(255,170,50,0.28)
    );
}

.map-node-completed::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:108%;
  height:108%;
  border-radius:50%;
  transform:translate(-50%, -50%);
  border:2px solid rgba(255,224,130,0.38);
  box-shadow:
    0 0 12px rgba(255,210,90,0.32),
    inset 0 0 12px rgba(255,210,90,0.16);
  pointer-events:none;
}

@keyframes activeNodePulse{

  0%{

    transform:
      translate(-50%, -50%)
      scale(1);
  }

  50%{

    transform:
      translate(-50%, -50%)
      scale(1.08);
  }

  100%{

    transform:
      translate(-50%, -50%)
      scale(1);
  }
}
.map-flag{

  position:absolute;

  left:50%;
  top:50%;

  width:min(70px, 10vw);

  z-index:6;

  pointer-events:none;

  object-fit:contain;

  transform:
    translate(-42%, -92%);

  filter:
    brightness(1.1)
    contrast(1.08)
    drop-shadow(0 10px 12px rgba(0,0,0,0.42))
    drop-shadow(0 0 10px rgba(255,202,89,0.45));

  animation:
    mapFlagFloat 2.4s ease-in-out infinite;
}

@keyframes mapFlagFloat{

  0%{
    transform:
      translate(-42%, -92%)
      rotate(-1deg);
  }

  50%{
    transform:
      translate(-42%, -98%)
      rotate(1deg);
  }

  100%{
    transform:
      translate(-42%, -92%)
      rotate(-1deg);
  }
}
.map-world-transition{

  position:fixed;

  inset:0;

  z-index:300;

  overflow:hidden;

  background:
    linear-gradient(
      180deg,
      rgba(10, 44, 72, 0.96),
      rgba(5, 18, 35, 0.98)
    );

  pointer-events:none;
}

.map-world-transition.hidden{

  display:none;
}

.map-world-transition-sea{

  position:absolute;

  left:-10%;
  right:-10%;
  bottom:-12%;

  height:48%;

  background:
    radial-gradient(
      ellipse at 50% 20%,
      rgba(92, 197, 224, 0.45),
      rgba(14, 93, 135, 0.55) 42%,
      rgba(3, 29, 60, 0.9) 80%
    );

  animation:
    mapSeaMove 2.6s ease-in-out infinite;
}

.map-world-transition-ship{

  position:absolute;

  left:-18%;
  bottom:22%;

  width:min(360px, 38vw);

  object-fit:contain;

  filter:
    drop-shadow(0 24px 30px rgba(0,0,0,0.48));

  animation:
    mapShipTravel 2.6s ease-in-out forwards;
}

.map-world-transition-text{
  display:none;
}

@keyframes mapSeaMove{

  0%{
    transform:
      translateX(0)
      translateY(0);
  }

  50%{
    transform:
      translateX(3%)
      translateY(-2%);
  }

  100%{
    transform:
      translateX(0)
      translateY(0);
  }
}

@keyframes mapShipTravel{

  0%{
    left:-18%;
    transform:
      translateY(0)
      rotate(-2deg);
    opacity:0.35;
  }

  4%{
    opacity:1;
  }

  50%{
    transform:
      translateY(-12px)
      rotate(1deg);
  }

  88%{
    opacity:1;
  }

  100%{
    left:104%;
    transform:
      translateY(0)
      rotate(-1deg);
    opacity:0;
  }
}

@keyframes mapWorldTextIn{

  0%{
    opacity:0;
    transform:
      translateX(-50%)
      translateY(-20px)
      scale(0.92);
  }

  20%{
    opacity:1;
    transform:
      translateX(-50%)
      translateY(0)
      scale(1);
  }

  82%{
    opacity:1;
  }

  100%{
    opacity:0;
    transform:
      translateX(-50%)
      translateY(-8px)
      scale(0.98);
  }
}
.map-world-overlay{

  position:fixed;

  inset:0;

  z-index:310;

  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  box-sizing:border-box;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,218,112,.14), rgba(255,218,112,0) 35%),
    rgba(8,12,16,.52);
  backdrop-filter:blur(2px);

  pointer-events:none;
}

.map-world-overlay.hidden{

  display:none;
}

.map-world-stage{
  position:relative;
  width:min(680px,96vw);
  height:min(360px,68vh);
  min-height:260px;
  overflow:hidden;
  border-radius:24px;
  border:2px solid rgba(255,215,116,.46);
  background:
    linear-gradient(180deg, rgba(21,62,90,.96), rgba(8,38,64,.98) 58%, rgba(25,18,12,.98));
  box-shadow:
    0 24px 56px rgba(0,0,0,.58),
    0 0 24px rgba(255,186,64,.14),
    inset 0 2px 0 rgba(255,255,255,.16),
    inset 0 -22px 34px rgba(0,0,0,.24);
  animation:mapWorldStageIn 360ms ease-out both;
}

.map-world-overlay-bg{

  position:absolute;

  inset:0;

  background:
    radial-gradient(ellipse at 28% 18%, rgba(255,238,176,.16), transparent 24%),
    radial-gradient(ellipse at 72% 20%, rgba(180,224,242,.14), transparent 28%),
    radial-gradient(ellipse at 50% 58%, rgba(22,92,126,.34), transparent 36%),
    linear-gradient(180deg, rgba(20,56,82,.98) 0%, rgba(12,62,92,.98) 42%, rgba(6,36,62,.99) 61%, rgba(23,18,14,1) 100%);

  backdrop-filter:
    blur(2px);
}

.map-world-sea{
  position:absolute;
  left:-16%;
  right:-16%;
  bottom:-12%;
  height:46%;
  background:
    linear-gradient(180deg, rgba(208,236,226,.18) 0 4%, transparent 8%),
    radial-gradient(ellipse at 46% 2%, rgba(125,202,209,.34), rgba(21,103,139,.56) 38%, rgba(7,47,78,.96) 78%),
    repeating-linear-gradient(172deg, rgba(255,255,255,.12) 0 2px, transparent 2px 24px),
    linear-gradient(90deg, rgba(255,255,255,.07), rgba(255,255,255,0) 18%, rgba(255,255,255,.06) 42%, rgba(255,255,255,0) 72%);
  box-shadow:
    inset 0 20px 26px rgba(255,255,255,.06),
    inset 0 -36px 38px rgba(0,13,34,.34);
  animation:mapWorldSeaDrift 5.4s ease-in-out infinite;
}

.map-world-sea::before{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  top:10%;
  height:26%;
  border-radius:50%;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.18), transparent 58%);
  opacity:.55;
  transform:skewX(-10deg);
}

.map-world-title{
  position:absolute;
  left:50%;
  top:5.5%;
  z-index:7;
  transform:translateX(-50%);
  color:#fff0b5;
  font-size:clamp(18px,5.4vw,32px);
  font-weight:1000;
  white-space:nowrap;
  text-shadow:
    0 3px 0 rgba(63,28,8,.86),
    0 0 12px rgba(255,212,91,.68);
  animation:mapWorldTitleIn 900ms ease-out 420ms both;
}

.map-world-dock{

  position:absolute;

  right:-5%;

  bottom:1%;

  width:min(64%,410px);

  object-fit:contain;

  z-index:2;

  animation:
    mapDockEnter 920ms cubic-bezier(.16,.86,.22,1) both,
    mapDockFloat 4s ease-in-out infinite;
}

.map-world-ship{

  position:absolute;

  left:0;

  bottom:14%;

  width:min(58%,390px);

  object-fit:contain;

  z-index:3;

  filter:
    brightness(.82)
    saturate(.92)
    contrast(.96)
    drop-shadow(
      0 20px 24px rgba(0,0,0,0.42)
    );

  animation:
    mapWorldShipTravel 5.15s cubic-bezier(.18,.66,.20,1) .48s forwards;
}

.map-world-banner{
  position:absolute;
  left:50%;
  top:4.5%;
  z-index:6;
  width:min(68%,380px);
  max-height:76px;
  object-fit:contain;
  transform:translateX(-50%);
  filter:
    brightness(.86)
    saturate(.92)
    contrast(.95)
    drop-shadow(0 9px 14px rgba(28,12,4,.48))
    drop-shadow(0 0 10px rgba(255,206,88,.22));
  animation:mapWorldBannerIn 780ms ease-out 220ms both;
}

.map-world-name{
  display:none;
}

@keyframes mapWorldShipTravel{

  0%{

    transform:
      translate3d(-92%,12px,0)
      rotate(-2.2deg)
      scale(.94);

    opacity:0;
  }

  8%{

    opacity:1;
    transform:
      translate3d(-78%,10px,0)
      rotate(-1.8deg)
      scale(.95);
  }

  32%{
    transform:
      translate3d(-45%,7px,0)
      rotate(.4deg)
      scale(.98);
  }

  58%{

    transform:
      translate3d(-8%,4px,0)
      rotate(.8deg)
      scale(1);
  }

  78%{

    transform:
      translate3d(34%,2px,0)
      rotate(.2deg)
      scale(1.01);

    opacity:1;
  }

  100%{
    transform:
      translate3d(48%,0,0)
      rotate(0deg)
      scale(1);
    opacity:1;
  }
}

@keyframes mapWorldBannerIn{

  0%{

    opacity:0;

    transform:
      translateX(-50%)
      translateY(-40px)
      scale(0.8);
  }

  25%{

    opacity:1;
  }

  100%{

    opacity:1;

    transform:
      translateX(-50%)
      translateY(0)
      scale(1);
  }
}

@keyframes mapWorldTextIn{

  0%{

    opacity:0;

    transform:
      translateX(-50%)
      translateY(-20px)
      scale(0.9);
  }

  25%{

    opacity:1;
  }

  100%{

    opacity:1;

    transform:
      translateX(-50%)
      translateY(0)
      scale(1);
  }
}

@keyframes mapDockFloat{

  0%{

    transform:
      translateY(0);
  }

  50%{

    transform:
      translateY(-4px);
  }

  100%{

    transform:
      translateY(0);
  }
}

@keyframes mapDockEnter{
  0%{
    opacity:0;
    transform:translateX(42px) translateY(8px) scale(.96);
  }

  100%{
    opacity:1;
    transform:translateX(0) translateY(0) scale(1);
  }
}

@keyframes mapWorldSeaDrift{
  0%{
    transform:translateX(0) translateY(0) scale(1) skewX(0deg);
  }

  50%{
    transform:translateX(2%) translateY(-1.4%) scale(1.015) skewX(-1.2deg);
  }

  100%{
    transform:translateX(0) translateY(0) scale(1) skewX(0deg);
  }
}

@keyframes mapWorldStageIn{
  from{
    opacity:0;
    transform:translateY(14px) scale(.94);
  }

  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@keyframes mapWorldTitleIn{
  0%{
    opacity:0;
    transform:translateX(-50%) translateY(-12px) scale(.92);
  }

  100%{
    opacity:1;
    transform:translateX(-50%) translateY(0) scale(1);
  }
}

@media (orientation: portrait) and (max-width:600px){
  .map-world-stage{
    width:min(96vw,680px);
    height:min(330px,58vh);
    min-height:270px;
    border-radius:22px;
  }

  .map-world-dock{
    right:-18%;
    bottom:0;
    width:76%;
  }

  .map-world-ship{
    left:0;
    bottom:14%;
    width:72%;
  }

  .map-world-banner{
    top:4%;
    width:78%;
    max-width:none;
  }

  .map-world-name{
    display:none;
  }

  @keyframes mapWorldShipTravel{
    0%{
      transform:
        translate3d(-104%,12px,0)
        rotate(-2.2deg)
        scale(.94);
      opacity:0;
    }

    8%{
      opacity:1;
      transform:
        translate3d(-88%,10px,0)
        rotate(-1.8deg)
        scale(.95);
    }

    32%{
      transform:
        translate3d(-54%,7px,0)
        rotate(.4deg)
        scale(.98);
    }

    58%{
      transform:
        translate3d(-12%,4px,0)
        rotate(.8deg)
        scale(1);
    }

    78%{
      transform:
        translate3d(20%,2px,0)
        rotate(.2deg)
        scale(1.01);
    }

    100%{
      transform:
        translate3d(32%,0,0)
        rotate(0deg)
        scale(1);
      opacity:1;
    }
  }
}
.map-world-nav{

  position:fixed;

  left:50%;

  bottom:
    max(22px, env(safe-area-inset-bottom));

  transform:
    translateX(-50%);

  display:flex;

  align-items:center;

  gap:14px;

  z-index:20;

  padding:
    10px 18px;

  border-radius:18px;

  background:
    linear-gradient(
      180deg,
      rgba(32,20,12,0.82),
      rgba(14,9,6,0.92)
    );

  border:
    1px solid rgba(255,210,120,0.28);

  box-shadow:
    0 10px 24px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.06);

  backdrop-filter:
    blur(6px);
}

.map-world-arrow{

  width:42px;
  height:42px;

  border-radius:12px;

  border:0;

  cursor:pointer;

  font-size:18px;
  font-weight:900;

  color:#ffe2a3;

  background:
    linear-gradient(
      180deg,
      #7b4a1d,
      #4a2910
    );

  box-shadow:
    0 4px 10px rgba(0,0,0,0.36);

  transition:
    transform 0.18s ease,
    filter 0.18s ease;
}

.map-world-arrow:hover{

  transform:
    translateY(-2px);

  filter:
    brightness(1.08);
}

.map-world-label{

  min-width:220px;

  text-align:center;

  font-size:
    clamp(16px, 1.5vw, 28px);

  font-weight:900;

  letter-spacing:0.05em;

  color:#ffe8b0;

  text-shadow:
    0 2px 0 rgba(52,25,8,0.9),
    0 0 12px rgba(255,208,110,0.35);
}
@keyframes mapPathGlow{

  0%{

    filter:
      drop-shadow(
        0 0 8px rgba(255,210,90,0.38)
      )
      drop-shadow(
        0 0 16px rgba(255,180,60,0.18)
      );
  }

  50%{

    filter:
      drop-shadow(
        0 0 14px rgba(255,220,120,0.62)
      )
      drop-shadow(
        0 0 22px rgba(255,190,80,0.34)
      );
  }

  100%{

    filter:
      drop-shadow(
        0 0 8px rgba(255,210,90,0.38)
      )
      drop-shadow(
        0 0 16px rgba(255,180,60,0.18)
      );
  }
}
@keyframes mapPathFlow{

  0%{

    stroke-dashoffset:0;
  }

  100%{

    stroke-dashoffset:-18;
  }
}
@keyframes activeNodeRing{

  0%{

    transform:
      translate(-50%, -50%)
      rotate(0deg);

    opacity:0.65;
  }

  50%{

    opacity:1;
  }

  100%{

    transform:
      translate(-50%, -50%)
      rotate(360deg);

    opacity:0.65;
  }
}