/* === Base Layout Reset === */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-family: sans-serif;
  background-color: #2c2f33;
  color: #ffffff;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === Leaflet Root & Container === */
#leaflet-root,
[id^="leaflet-container-"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #23272a;
  overflow: hidden;
  z-index: 0;
}

/* === Leaflet Tile Pane === */
.leaflet-tile-pane {
  z-index: 100;
}

/* === Canvas Overlay === */
canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 500;
  display: block;
}

/* === Portal Marker Container === */
.portal-marker-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  pointer-events: auto; /* ✅ FIXED: allow interaction */
  transform-origin: center;
  z-index: 1000;
}

/* === Rotating Wrapper === */
.portal-rotate-wrapper {
  animation: portalRotate 4s linear infinite;
  transform-origin: center;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* === Portal Emoji Base === */
.portal-emoji {
  font-size: 24px;
  line-height: 1;
  font-weight: bold;
  transform-origin: center;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  width: 24px;
  height: 24px;
}

/* === Dungeon Rank Auras === */
.portal-emoji--Red {
  color: crimson;
  filter: drop-shadow(0 0 8px red);
  animation: pulse 2s infinite;
}

.portal-emoji--Normal {
  color: #aaa;
  filter: drop-shadow(0 0 6px #888);
  animation: pulse 2s infinite;
}

.portal-emoji--Monarch {
  color: black;
  filter: drop-shadow(0 0 10px #444);
  animation: gravityRipple 2.5s infinite;
}

.portal-emoji--Ruler {
  color: gold;
  filter: drop-shadow(0 0 12px gold);
  animation: shimmer 1.5s infinite;
}

/* === Optional Nearby Distortion === */
.distorted-nearby {
  animation: wobble 1.2s infinite;
}

/* === Animations === */
@keyframes pulse {
  0%   { transform: scale(1); opacity: 1; }
  50%  { transform: scale(1.2); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes gravityRipple {
  0%   { transform: scale(1); opacity: 0.8; }
  50%  { transform: scale(1.3); opacity: 0.4; }
  100% { transform: scale(1); opacity: 0.8; }
}

@keyframes shimmer {
  0%   { filter: drop-shadow(0 0 4px gold); }
  50%  { filter: drop-shadow(0 0 12px gold); }
  100% { filter: drop-shadow(0 0 4px gold); }
}

@keyframes wobble {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(1deg); }
  50%  { transform: rotate(-1deg); }
  75%  { transform: rotate(1deg); }
  100% { transform: rotate(0deg); }
}

@keyframes portalRotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* === Responsive Text === */
.my-instructions {
  margin: 24px 0;
  font-size: clamp(16px, 4vw, 24px);
  color: #ffffff;
  text-align: center;
  z-index: 1000;
  position: relative;
}

/* === Mobile Optimization === */
@media (max-width: 480px) {
  .portal-emoji {
    font-size: 20px;
  }

  .my-instructions {
    font-size: 18px;
    margin: 16px 0;
  }
}