/* ==========================================================================
   ISOMETRIC MAP VIEW (PIXIJS REPLACEMENT)
   ========================================================================== */

#mapContainer.isometric-mode {
  perspective: none;
  overflow: hidden;
}

#gameWorld.isometric-mode {
  transform-style: flat !important;
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 2 !important;
}

/* 2D Isometric DOM click targets */
#gameWorld.isometric-mode .tile {
  position: absolute !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  pointer-events: none !important;
  z-index: 5 !important;
}

#gameWorld.isometric-mode .tile:not(.map-exit)::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: transparent !important;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Hide all DOM visual obstacles and decorative textures except map exits */
#gameWorld.isometric-mode .tile:not(.map-exit)::after {
  display: none !important;
}

/* Glowing 2.5D Map exits */
#gameWorld.isometric-mode .tile.map-exit {
  background: rgba(255, 140, 0, 0.4) !important;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) !important;
  border: 1px solid rgba(255, 215, 0, 0.8) !important;
  box-shadow: 0 0 14px rgba(255, 140, 0, 0.6) !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 7 !important;
  animation: exitGlowIso 1.5s infinite alternate ease-in-out !important;
}

#gameWorld.isometric-mode .tile.map-exit::after {
  display: block !important;
  content: "" !important;
  width: 20px !important;
  height: 20px !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  margin-left: -10px !important;
  margin-top: -10px !important;
  background: #fff8d6 !important;
  opacity: 0.95 !important;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8) !important;
  z-index: 8 !important;
  clip-path: polygon(50% 0%, 100% 50%, 70% 50%, 70% 100%, 30% 100%, 30% 50%, 0% 50%) !important;
  transform-origin: center center !important;
}

#gameWorld.isometric-mode .tile.map-exit.exit-up::after {
  transform: rotate(45deg) !important;
}

#gameWorld.isometric-mode .tile.map-exit.exit-right::after {
  transform: rotate(135deg) !important;
}

#gameWorld.isometric-mode .tile.map-exit.exit-down::after {
  transform: rotate(225deg) !important;
}

#gameWorld.isometric-mode .tile.map-exit.exit-left::after {
  transform: rotate(315deg) !important;
}

@keyframes exitGlowIso {
  0% {
    background: rgba(255, 140, 0, 0.25) !important;
    box-shadow: 0 0 4px rgba(255, 140, 0, 0.3) !important;
  }
  100% {
    background: rgba(255, 140, 0, 0.65) !important;
    box-shadow: 0 0 18px rgba(255, 215, 0, 0.95) !important;
  }
}

/* 2. Flat scaled entities (no counter-rotation, matches combat dimensions) */
body.isometric-mode #player,
body.isometric-mode .remotePlayer,
body.isometric-mode .npcEntity {
  transform: translate(-50%, -100%) scale(0.53) !important;
  transform-origin: center bottom !important;
  transform-style: flat !important;
  z-index: 10 !important;
  pointer-events: auto !important;
}

body.isometric-mode .monsterEntity {
  transform: translate(-50%, -100%) scale(0.61) !important;
  transform-origin: center bottom !important;
  transform-style: flat !important;
  z-index: 10 !important;
  pointer-events: auto !important;
}

/* Keep flat styling for nameplates since parent scale is clean */
body.isometric-mode .playerName,
body.isometric-mode .monsterName,
body.isometric-mode .npcName {
  white-space: nowrap !important;
  font-family: 'Outfit', 'Inter', sans-serif !important;
}

body.isometric-mode .npc-quest-indicator {
  top: -95px !important;
  z-index: 2000 !important;
  white-space: nowrap !important;
}

/* Shadows are positioned flat on the floor naturally */
body.isometric-mode .charSprite::after,
body.isometric-mode .charAura,
body.isometric-mode .monsterShadow {
  transform: translateX(-50%) scaleY(0.5) !important; /* squashed horizontally for isometric shadow look */
  transform-origin: center bottom !important;
}

/* 3. Harvesting bubbles and indicators */
body.isometric-mode .harvest-action-bubble {
  position: absolute !important;
  z-index: 999 !important;
  transform: translate(-50%, -100%) !important;
  transform-style: flat !important;
  pointer-events: auto !important;
}

body.isometric-mode .harvest-action-bubble:hover {
  transform: translate(-50%, -100%) scale(1.08) !important;
}

body.isometric-mode .gather-floating-indicator {
  animation: floatUpGatherIso 1.4s forwards ease-out !important;
  z-index: 999 !important;
}

@keyframes floatUpGatherIso {
  0% {
    transform: translate(-50%, 0) scale(0.8);
    opacity: 0;
  }
  15% {
    transform: translate(-50%, -20px) scale(1.05);
    opacity: 1;
  }
  85% {
    transform: translate(-50%, -50px) scale(0.9);
    opacity: 0;
  }
}

/* ==========================================================================
   PIXI ENTITIES MODE (BETA REDESIGN)
   ========================================================================== */
body.pixi-entities-mode #playerSprite,
body.pixi-entities-mode .remotePlayer .charSprite,
body.pixi-entities-mode .npcEntity .npcSprite,
body.pixi-entities-mode .npcEntity .charSprite {
  display: none !important;
}

body.pixi-entities-mode #gameWorld .monsterEntity .monsterBody,
body.pixi-entities-mode #gameWorld .monsterEntity .monsterHead,
body.pixi-entities-mode #gameWorld .monsterEntity .monsterLimbs,
body.pixi-entities-mode #gameWorld .monsterEntity .monsterTail,
body.pixi-entities-mode #gameWorld .monsterEntity .monsterFace,
body.pixi-entities-mode #gameWorld .monsterEntity .monsterAdornment,
body.pixi-entities-mode #gameWorld .monsterEntity::before,
body.pixi-entities-mode #gameWorld .monsterEntity::after {
  display: none !important;
}

body.pixi-entities-mode #gameWorld .monsterEntity {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}