.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:absolute;

  inset:0;

  z-index:30;

  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:-34%;
  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{

  position:absolute;

  left:50%;
  top:18%;

  transform:
    translateX(-50%);

  padding:14px 30px;

  border-radius:999px;

  font-size:clamp(24px, 4vw, 54px);
  font-weight:900;
  letter-spacing:0.08em;

  color:#ffe6a3;

  text-shadow:
    0 3px 0 rgba(81, 39, 10, 0.9),
    0 0 18px rgba(255, 210, 93, 0.65);

  background:
    linear-gradient(
      180deg,
      rgba(78, 38, 13, 0.55),
      rgba(23, 12, 8, 0.72)
    );

  border:
    2px solid rgba(255, 210, 118, 0.68);

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

@keyframes mapSeaMove{

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

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

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

@keyframes mapShipTravel{

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

  12%{
    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:absolute;

  inset:0;

  z-index:40;

  overflow:hidden;

  pointer-events:none;
}

.map-world-overlay.hidden{

  display:none;
}

.map-world-overlay-bg{

  position:absolute;

  inset:0;

  background:
    radial-gradient(
      ellipse at center,
      rgba(18,35,56,0.78),
      rgba(4,10,18,0.96)
    );

  backdrop-filter:
    blur(4px);
}

.map-world-dock{

  position:absolute;

  right:-2%;

  bottom:6%;

  width:min(520px, 46vw);

  object-fit:contain;

  z-index:2;

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

.map-world-ship{

  position:absolute;

  left:-28%;

  bottom:10%;

  width:min(420px, 38vw);

  object-fit:contain;

  z-index:3;

  filter:
    drop-shadow(
      0 20px 24px rgba(0,0,0,0.42)
    );

  animation:
    mapWorldShipTravel 4.2s ease-in-out forwards;
}

.map-world-banner{

  position:absolute;

  left:50%;

  top:8%;

  width:min(460px, 42vw);

  transform:
    translateX(-50%);

  object-fit:contain;

  z-index:5;

  animation:
    mapWorldBannerIn 4s ease;
}

.map-world-name{

  position:absolute;

  left:50%;

  top:16%;

  transform:
    translateX(-50%);

  z-index:6;

  font-size:
    clamp(26px, 4vw, 58px);

  font-weight:900;

  letter-spacing:0.08em;

  color:#ffe8ad;

  text-shadow:
    0 4px 0 rgba(62,25,6,0.9),
    0 0 16px rgba(255,214,120,0.55);

  animation:
    mapWorldTextIn 4s ease;
}

@keyframes mapWorldShipTravel{

  0%{

    left:-30%;

    transform:
      translateY(0)
      rotate(-2deg);

    opacity:0;
  }

  12%{

    opacity:1;
  }

  50%{

    transform:
      translateY(-10px)
      rotate(1deg);
  }

  100%{

    left:42%;

    transform:
      translateY(0)
      rotate(0deg);

    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);
  }
}
.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;
  }
}