@tailwind base;
@tailwind components;
@tailwind utilities;

html, body, #app {
  height: 100%;
  margin: 0;
}

body {
  background: #050508;
  color: #d8fbff;
  font-family: 'Share Tech Mono', monospace;
}

h1, h2, .font-display {
  font-family: 'Orbitron', sans-serif;
}

/* Subtle animated scanline field over the whole app — cheap, pure-CSS. */
#app::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2000;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(0, 255, 242, 0.035) 0px,
    rgba(0, 255, 242, 0.035) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: screen;
}

.text-glow-cyan { text-shadow: 0 0 8px rgba(0, 255, 242, 0.85); }
.text-glow-orange { text-shadow: 0 0 8px rgba(255, 95, 31, 0.9); }
.text-glow-green { text-shadow: 0 0 8px rgba(57, 255, 20, 0.9); }

.hud-panel {
  background: rgba(8, 10, 20, 0.88);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 255, 242, 0.35);
  box-shadow: 0 0 20px rgba(0, 255, 242, 0.12), inset 0 0 30px rgba(0, 255, 242, 0.04);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

/* Darken + tint the CARTO dark tiles a bit further and desaturate slightly
   so our neon markers/links pop harder against the basemap. */
.leaflet-tile-pane {
  filter: brightness(0.75) saturate(1.3) hue-rotate(-6deg);
}

.leaflet-container {
  background: #050508 !important;
}

.leaflet-popup-content-wrapper,
.leaflet-tooltip {
  background: rgba(8, 10, 20, 0.92) !important;
  color: #d8fbff !important;
  border: 1px solid rgba(0, 255, 242, 0.4) !important;
  font-family: 'Share Tech Mono', monospace !important;
  box-shadow: 0 0 12px rgba(0, 255, 242, 0.25) !important;
}
.leaflet-popup-tip {
  background: rgba(8, 10, 20, 0.92) !important;
}

.regress-portal-marker {
  filter: drop-shadow(0 0 4px var(--portal-glow, #9ca3af));
}
.regress-portal-marker.claimed {
  animation: portal-pulse 2.4s ease-in-out infinite;
}
@keyframes portal-pulse {
  0%, 100% { filter: drop-shadow(0 0 4px var(--portal-glow, #9ca3af)); }
  50% { filter: drop-shadow(0 0 10px var(--portal-glow, #9ca3af)); }
}

.regress-link-orange { filter: drop-shadow(0 0 4px #ff5f1f); }
.regress-link-green { filter: drop-shadow(0 0 4px #39ff14); }
.regress-field-orange { filter: drop-shadow(0 0 6px #ff5f1f); }
.regress-field-green { filter: drop-shadow(0 0 6px #39ff14); }

/* Reskin leaflet.markercluster's default light-green bubble look to match
   the HUD theme — overrides MarkerCluster.Default.css. */
.regress-cluster div {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 35%, rgba(0, 255, 242, 0.35), rgba(0, 255, 242, 0.12) 70%);
  border: 2px solid #00fff2;
  color: #d8fbff;
  font-family: 'Share Tech Mono', monospace;
  font-weight: bold;
  font-size: 12px;
  box-shadow: 0 0 10px rgba(0, 255, 242, 0.5);
}