/* v2.65 mobile map stability and low-power rendering */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.ruler-title-chip {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 1px 7px;
  border: 1px solid rgba(246, 196, 83, .72);
  border-radius: 999px;
  color: #ffe7a3;
  background: rgba(109, 65, 8, .76);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
}

.ruler-ability-stack.rival {
  margin-top: 10px;
}

.ruler-ability-stack.rival .ruler-ability-card {
  border-color: rgba(220, 85, 64, .34);
  background: linear-gradient(145deg, rgba(80, 26, 20, .36), rgba(18, 15, 20, .88));
}

#campaign-map,
#campaign-map .mapbox,
#campaign-map .node {
  touch-action: pan-y;
}

#campaign-map .mapbox {
  contain: layout paint;
  overscroll-behavior: contain;
}

#campaign-map img,
#campaign-map svg {
  -webkit-user-drag: none;
  user-select: none;
}

@media (hover: none), (pointer: coarse) {
  #campaign-map .map-mist {
    display: none !important;
  }

  #campaign-map .territory-glow {
    width: 110px;
    height: 110px;
    filter: none !important;
    opacity: .09 !important;
  }

  #campaign-map .mapbox::before {
    mix-blend-mode: normal;
    opacity: .62;
  }

  #campaign-map .node:hover {
    z-index: 6;
    transform: translate(-50%, -50%);
  }

  .node.ai-source .city-node-icon,
  .node.ai-target .city-node-icon,
  .danger-badge,
  .turn-banner.ai,
  .route-group.active-route .route-highlight,
  .route-travel,
  .node.selected .node-halo,
  .plague-cloud,
  .storm-ring,
  .storm-ring i,
  .storm-ring b,
  .blessing-rays,
  .occupation-banner,
  .map-effect.occupation,
  .city-skill-ready,
  .administrator-map-dot::after,
  .ruler-portrait-frame::after,
  .battle-screen.battle-visual-upgraded .visual-fire-active .fighter-visual-slot::before,
  .battle-round-track i.current,
  .loyalty-glow,
  .v247-defense-alert-mark {
    animation: none !important;
  }

  .battle-smoke,
  .battle-embers {
    display: none !important;
  }
}

@media (max-width: 620px) and (hover: none),
       (max-width: 620px) and (pointer: coarse) {
  #campaign-map .node:hover {
    transform: translate(-50%, -50%) scale(.92);
  }
}

@media (max-width: 420px) and (hover: none),
       (max-width: 420px) and (pointer: coarse) {
  #campaign-map .node:hover {
    transform: translate(-50%, -50%) scale(.84);
  }
}

@media (prefers-reduced-motion: reduce) {
  #campaign-map .map-mist {
    display: none !important;
  }

  #campaign-map .territory-glow {
    filter: none !important;
  }
}