/* ============================================
   VETUU — Map & World Styles
   Viewport, tiles, fog, minimap, path markers
   ============================================ */

/* ---------- Viewport & World ---------- */
#viewport {
  position: absolute;
  /* Oversized by 4px on all sides to hide seams during screen shake (max 3px displacement) */
  inset: -4px;
  overflow: hidden;
  cursor: crosshair;
}

/* World container - camera controlled via JS requestAnimationFrame */
#world {
  position: absolute;
  width: calc(var(--map-width) * var(--tile-size));
  height: calc(var(--map-height) * var(--tile-size));
  background-color: var(--world-bg);  /* Single source of truth for game world background */
  transform-origin: top left;
  /* No CSS transition - camera animated via JS for Safari smoothness */
  /* Force GPU compositing layer with 3D context for crisp scaling */
  will-change: transform;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  /* Isolate stacking context to prevent layer recalculation */
  isolation: isolate;
  contain: layout style;
}

.layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* GPU compositing layer via 3D transform */
  transform: translate3d(0, 0, 0);
  /* Containment for performance */
  contain: strict;
}

#actor-layer { pointer-events: auto; z-index: 10; contain: layout style; }
#fog-layer { z-index: 20; contain: layout paint; backface-visibility: hidden; }
#nameplate-layer { z-index: 30; contain: layout style; }
#object-layer { z-index: 5; }
#ground-layer { z-index: 1; }

/* ---------- Tiles ---------- */
.tile {
  position: absolute;
  width: var(--tile-size);
  height: var(--tile-size);
}

/* ---------- Objects - GPU accelerated via transform ---------- */
.object {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--tile-size);
  height: var(--tile-size);
  background-color: var(--obj-color, oklch(0.35 0.015 55));
  transform: translate3d(var(--pos-x, 0), var(--pos-y, 0), 0);
  /* Spawn fade-in transition */
  opacity: 1;
  transition: opacity var(--fade-quick) ease-out;
}

/* Spawning state - start invisible, fade in when class is removed */
.object.spawning {
  opacity: 0;
}

.object[data-interactable] { cursor: pointer; }
.object.node-collected { opacity: 0.3; }

/* ---------- Stone Debris (blocking dark stone in destroyed corner) ---------- */
.object[data-obj-type="stoneDebris"] {
  box-shadow: inset 0 0 3px var(--alpha-black-50);
}

/* ---------- Lamp Light Effect ---------- */
.object[data-obj-type="lamp"] {
  overflow: visible;
  /* Above actors (10) but below lighting canvas (15) so blend mode works */
  z-index: 12;
}

.object[data-obj-type="lamp"]::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  transform: translate3d(-50%, -50%, 0);
  /* Extra color stops reduce gradient banding */
  background: radial-gradient(
    circle,
    var(--light-lamp) 0%,
    oklch(0.88 0.080 80 / 0.5) 8%,
    oklch(0.88 0.080 80 / 0.4) 15%,
    oklch(0.88 0.080 80 / 0.28) 25%,
    oklch(0.88 0.080 80 / 0.15) 35%,
    oklch(0.88 0.080 80 / 0.08) 45%,
    oklch(0.88 0.080 80 / 0.03) 55%,
    oklch(0.88 0.080 80 / 0.01) 65%,
    transparent 75%
  );
  pointer-events: none;
  opacity: var(--lamp-intensity, 0);
  mix-blend-mode: soft-light;
  transition: opacity var(--fade-slow) ease;
}

/* ---------- Traffic Light Poles ---------- */
/* Collidable poles at intersection corners - invisible, just for collision */
.object[data-obj-type="traffic_light"] {
  overflow: visible;
  z-index: 12;
  /* Transparent to blend with terrain - collision only */
  background: transparent;
}

.object[data-obj-type="traffic_light"]::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  transform: translate3d(-50%, -50%, 0);
  /* Extra color stops reduce gradient banding */
  background: radial-gradient(
    circle,
    var(--light-lamp) 0%,
    oklch(0.88 0.080 80 / 0.4) 10%,
    oklch(0.88 0.080 80 / 0.3) 20%,
    oklch(0.88 0.080 80 / 0.2) 30%,
    oklch(0.88 0.080 80 / 0.12) 40%,
    oklch(0.88 0.080 80 / 0.06) 50%,
    oklch(0.88 0.080 80 / 0.02) 60%,
    transparent 70%
  );
  pointer-events: none;
  opacity: var(--lamp-intensity, 0);
  mix-blend-mode: soft-light;
  transition: opacity var(--fade-slow) ease;
}

/* ---------- Spotlight Effect ---------- */
/* Spotlight - cone light is rendered on canvas only, no CSS glow */
.object[data-obj-type="spotlight"] {
  z-index: 12;
}

/* ---------- Fog ---------- */
.fog-tile {
  position: absolute;
  width: var(--tile-size);
  height: var(--tile-size);
  background: oklch(0.12 0.015 55);
  /* GPU-friendly: use opacity instead of background transition */
  transition: opacity var(--fade-standard) ease;
}

.fog-tile.revealed {
  opacity: 0;
  pointer-events: none;
}

/* ---------- Panel Columns ---------- */
/* Left panel column - holds combat log + character sheet */
#left-panel-column {
  position: fixed;
  top: 1rem;
  left: 1rem;
  right: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Align panels to the left edge */
  gap: 0.5rem;
  z-index: 10;
  pointer-events: none;
}

/* Only visible panels should be interactive */
#combat-log-container:not(.hidden),
#character-sheet:not(.hidden) {
  pointer-events: auto;
}

/* Right panel column - holds minimap + quest tracker + inventory */
#right-panel-column {
  position: fixed;
  top: 1rem;
  right: 1rem;
  left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* Align panels to the right edge */
  gap: 0.5rem;
  z-index: 10;
  pointer-events: none;
}

/* Only visible panels should be interactive */
#minimap-container:not(.hidden),
#quest-tracker,
#inventory-panel:not(.hidden) {
  pointer-events: auto;
}

/* FPS/Ping Counter - fixed bottom right */
#fps-counter {
  position: fixed;
  bottom: var(--gui-margin);
  right: var(--gui-margin);
  display: none;
  flex-direction: column;
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  background: var(--bg-panel-alpha);
  padding: var(--gui-padding);
  gap: var(--gui-gap-sm);
  z-index: 100;
  pointer-events: auto;
}

#fps-counter.visible {
  display: flex;
}

#fps-counter .perf-row {
  display: flex;
  align-items: center;
  gap: var(--gui-gap-sm);
}

#fps-counter .perf-label {
  opacity: 0.6;
  min-width: 28px;
}

#fps-counter .perf-value {
  font-family: var(--font-numbers);
  font-weight: 600;
}

#fps-counter .perf-detail {
  font-family: var(--font-numbers);
  font-size: var(--font-size-xs);
  opacity: 0.7;
}

/* Legacy class compat */
#fps-counter .fps-value {
  font-family: var(--font-numbers);
  font-weight: 600;
}

#fps-counter .fps-min {
  font-family: var(--font-numbers);
  font-size: var(--font-size-xs);
  opacity: 0.7;
}

#minimap-container {
  position: relative; /* Stay in flex flow when docked */
  display: flex;
  flex-direction: column;
  background: var(--bg-panel-alpha);
  min-width: 240px;
  /* Enforce square aspect ratio */
  aspect-ratio: 1 / 1;
  /* GPU layer */
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

#minimap-container.hidden {
  display: none;
}

/* When undocked (dragged), take out of flex flow */
#minimap-container.undocked {
  position: fixed;
}

#minimap {
  position: relative;
  width: 100%;
  /* Fill available height (square minus label/coords area) */
  flex: 1;
  background: var(--bg-dark);
  overflow: hidden;
  cursor: crosshair;
}

#minimap-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Allow subpixel smoothing for camera movement */
  image-rendering: auto;
}

#minimap-fog {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Hide old player marker - now drawn on canvas */
#minimap-player {
  display: none;
}

/* Corpse marker on minimap */
.minimap-corpse {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 12px;
  z-index: 9;
  animation: corpse-blink 1.5s ease-in-out infinite;
  text-shadow: 0 0 4px var(--danger), 0 0 8px var(--danger);
  backface-visibility: hidden;
  filter: drop-shadow(0 0 2px var(--alpha-black-80));
  pointer-events: auto;
  cursor: pointer;
}

@keyframes corpse-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

#minimap-coords {
  position: absolute;
  bottom: var(--gui-padding);
  right: var(--gui-padding);
  background: var(--bg-panel-alpha);
  padding: var(--gui-padding-sm);
  font-family: var(--font-numbers);
  font-size: var(--font-size-xs);
  color: var(--text-primary);
  pointer-events: none;
}

/* Resize shroud - covers minimap during resize to hide flicker */
#minimap-resize-shroud {
  position: absolute;
  inset: 0;
  background: var(--bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--fade-quick) ease;
}

#minimap-resize-shroud.visible {
  opacity: 1;
}

#minimap-resize-shroud span {
  font-family: var(--font-display);
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ---------- Depot Roof Container ---------- */
#depot-roof {
  position: absolute;
  pointer-events: none;
  /* Above actors (10) but below fog (20) */
  z-index: 15;
  
  /* CSS variables for darkness layer (night darkening only) */
  --roof-darkness: 0;
  --roof-darkness-color: rgb(10, 15, 30);
  
  /* CSS variables for weather tint layers */
  --roof-sand-tint: 0;   /* Sandstorm washout effect */
  --roof-thunder-tint: 0; /* Thunderstorm blue tint */
  --roof-lightning-flash: 0; /* Lightning flash effect */
}

/* ---------- Depot Roof Tiles (individual tile elements for sprite artwork) ---------- */
.depot-roof-tile {
  position: absolute;
  width: 24px;  /* TILE_SIZE */
  height: 24px;
  background: var(--color-earth);
  pointer-events: none;
}

/* ---------- Depot Roof Overlays (shared styles) ---------- */
/* All four overlays share GPU acceleration hints.
   clip-path is set dynamically in JS based on roof dimensions. */
#depot-roof-darkness,
#depot-roof-sand,
#depot-roof-thunder,
#depot-roof-lightning {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* PERF: GPU compositing for opacity animations */
  backface-visibility: hidden;
  will-change: opacity;
}

/* Darkness layer - night/time-of-day darkening */
#depot-roof-darkness {
  background: var(--roof-darkness-color, rgb(10, 15, 30));
  opacity: var(--roof-darkness, 0);
  transition: opacity var(--fade-slow) ease-out;
}

/* Sand tint layer - sandstorm washout effect */
#depot-roof-sand {
  background: rgb(186, 154, 116);  /* SAND_COLOR */
  opacity: var(--roof-sand-tint, 0);
  transition: opacity var(--fade-slow) ease-out;
}

/* Thunder tint layer - thunderstorm blue tint effect */
#depot-roof-thunder {
  background: rgb(63, 73, 86);  /* THUNDER_COLOR */
  opacity: var(--roof-thunder-tint, 0);
  transition: opacity var(--fade-slow) ease-out;
}

/* Lightning flash layer - matches lighting canvas flash effect */
#depot-roof-lightning {
  background: rgb(200, 220, 255);  /* Blue-white flash color matching lighting canvas */
  opacity: var(--roof-lightning-flash, 0);
  /* No CSS transition - smoothing is handled in JS via lerp (fast attack, slow decay) */
}

/* ---------- Path Markers - GPU accelerated via transform ---------- */
.path-marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 4px;
  background: var(--color-amber);  /* Matches player sprite skin color */
  outline: 0.25px solid var(--sprite-outline-60);  /* Matches player sprite outline */
  pointer-events: none;
  z-index: 8;
  opacity: var(--marker-opacity, 0.6);
  transform: translate3d(var(--pos-x, 0), var(--pos-y, 0), 0);
  animation: path-pulse 1s ease-in-out infinite;
}

@keyframes path-pulse {
  0%, 100% { opacity: 0.4; transform: translate3d(var(--pos-x, 0), var(--pos-y, 0), 0) scale3d(0.85, 0.85, 1); }
  50% { opacity: 1; transform: translate3d(var(--pos-x, 0), var(--pos-y, 0), 0) scale3d(1.15, 1.15, 1); }
}