.fog-cut{animation:uncover .7s ease-out both}
@keyframes uncover{from{opacity:0}to{opacity:1}}
.map-meeting{position:absolute;z-index:5;transform:translate(-50%,-100%);max-width:56%;padding:8px 12px;background:#151e24ed;border:1px solid #776149;border-radius:12px;color:#fff2d9;text-align:center;font-size:.75rem;pointer-events:none;box-shadow:0 0 28px #ffb65c22}
.map-meeting svg{display:block;width:56px;height:34px;margin:auto;fill:none;stroke:#ffd59b;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.map-meeting span{display:block;overflow-wrap:anywhere}
.greeting .five-left{animation:five-left .65s ease-out both}
.greeting .five-right{animation:five-right .65s ease-out both}
.greeting .five-spark{animation:five-spark .65s ease-out both}
@keyframes five-left{0%{transform:translate(-12px,8px)}55%{transform:translate(2px,-1px)}100%{transform:translate(0,0)}}
@keyframes five-right{0%{transform:translate(12px,8px)}55%{transform:translate(-2px,-1px)}100%{transform:translate(0,0)}}
@keyframes five-spark{0%,50%{opacity:0}65%,100%{opacity:1}}
@media(prefers-reduced-motion:reduce){.fog-cut,.greeting .five-left,.greeting .five-right,.greeting .five-spark{animation:none}}
.map-players{
  position:absolute;
  inset:0;
  pointer-events:none
}
.map-marker{
  position:absolute;
  transform:translate(-50%,-50%);
  transition:left 1.3s cubic-bezier(.2,.7,.2,1),top 1.3s cubic-bezier(.2,.7,.2,1);
  display:flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px
}
.marker-glow{
  position:absolute;
  width:var(--light-size);
  height:var(--light-size);
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--player) 23%,transparent),transparent 68%);
  transition:width .7s,height .7s
}
.marker-dot{
  display:block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--player);
  box-shadow:0 0 7px var(--player),0 0 2px white;
  border:1px solid #ffffff88;
  position:relative
}
.is-self .marker-dot:after{
  content:"";
  position:absolute;
  inset:-5px;
  border:1px solid var(--player);
  border-radius:50%;
  opacity:.5
}
.marker-label{
  position:absolute;
  top:35px;
  left:50%;
  transform:translate(-50%,-50%);
  font:10px/1.4 var(--mono);
  color:#e3e6e0;
  background:#0b1118bb;
  border-radius:3px;
  padding:2px 5px;
  border-left:2px solid var(--player);
  white-space:nowrap;
  max-width:110px;
  overflow:hidden;
  text-overflow:ellipsis
}
.marker-tether{
  position:absolute;
  inset:0;
  overflow:visible;
  pointer-events:none;
  opacity:0;
  stroke:var(--player);
  stroke-width:.7
}
.label-moved .marker-tether{opacity:.4}
.is-offline{
  opacity:.45
}
.flame,.flame-core{
  transform-origin:0 6px;
  animation:flicker 3s ease-in-out infinite
}
.flame-core{
  animation-delay:-1.2s;
  animation-duration:2.3s
}
.flame-shadow{
  animation:fire-glow 4s ease-in-out infinite
}
.fire-aura{
  animation:fire-glow 6s ease-in-out infinite
}
.spark{
  animation:ember 4s ease-out infinite
}
.spark-two{
  animation-delay:-1.8s
}
.spark-three{
  animation-delay:-2.7s
}
.water-dash{
  animation:water 8s ease-in-out infinite
}
.coast-outer{
  animation:shore 7s ease-in-out infinite
}
.splash-ring{
  animation:splash 1.4s ease-out both;
  transform-origin:0 0;
  stroke-width:1.1
}
.guess-spark{
  animation:guess-ember 1.3s ease-out both
}
.paused *{
  animation-play-state:paused!important
}
@keyframes flicker{
  0%,100%{
    transform:scale(.96,1.02) rotate(-3deg)
  }
  35%{
    transform:scale(1.03,.91) rotate(2deg)
  }
  68%{
    transform:scale(.91,1.1) rotate(1deg)
  }
}
@keyframes fire-glow{
  0%,100%{
    opacity:.7
  }
  50%{
    opacity:1
  }
}
@keyframes ember{
  0%{
    transform:translateY(6px);
    opacity:0
  }
  25%{
    opacity:.8
  }
  100%{
    transform:translate(5px,-24px);
    opacity:0
  }
}
@keyframes water{
  0%,100%{
    transform:translateX(-3px);
    opacity:.4
  }
  50%{
    transform:translateX(3px);
    opacity:1
  }
}
@keyframes shore{
  0%,100%{
    opacity:.25
  }
  50%{
    opacity:.65
  }
}
@keyframes splash{
  0%{
    transform:scale(.5);
    opacity:.9
  }
  100%{
    transform:scale(4.4);
    opacity:0
  }
}
@keyframes guess-ember{
  0%{
    transform:translateY(0);
    opacity:.9
  }
  100%{
    transform:translateY(-35px);
    opacity:0
  }
}

@media(prefers-reduced-motion:reduce){.map-marker,.marker-glow{transition:none}.world *, .world *::before,.world *::after{animation:none!important}}