/*
╭─────────────────────────────────────────────────────────────╮
│   Ashlight Systems Terminal CSS — VERSION: 1.6.0-ALPHA      │
│   Author: Shane Tyas                                        │
│                                                             │
│   Cumulative Changelog:                                     │
│                                                             │
│   v1.6.0: Responsive HUD Refactor Begins                    │
│     - .hud-bounds now uses viewport width & aspect-ratio    │
│     - Fully compatible with drag and manual resizing        │
│     - Legacy fixed dimensions deprecated                    │
│                                                             │
│   v1.5.10: Viewport Margin Reset                             │
│   v1.5.9: Preload-ready structure + image fade-in support    │
│   v1.5.8: Redundancy cleanup + layout isolation              │
│   v1.5.7: Final HUD fit with logo and CLI balance            │
│   v1.5.6: Master bounds container (.hud-bounds) added        │
╰─────────────────────────────────────────────────────────────╯
*/
/*
Ashlight Systems Terminal CSS — VERSION: 1.6.0-ALPHA
Author: Shane Tyas
*/
/* Ashlight Systems Terminal CSS — VERSION: 1.6.1 */
:root {
  --ash-mint: #66ffe0;
  --ash-glow: #00ffcc;
  --ash-bg: #0a0f0d;
  --ash-font: 'Courier New', monospace;
}



html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  zoom: 1;
  background-color: var(--ash-bg);
  font-family: var(--ash-font);
  color: var(--ash-mint);
  font-size: 12px;
  margin: 0;
  padding: 0;
}

/* ╭────────────────────────────────────────────────────────────╮ */
/* │ ASHLIGHT SYSTEM — CAMERA HUD + SPOTLIGHT FX (v1.4)         │ */
/* │ Author: Shane Tyas + ChatGPT | Date: 2025-05-31            │ */
/* ╰────────────────────────────────────────────────────────────╯ */
/* 🚫 Full darkness: no spotlight hole */
.fog-no-spotlight {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}


/* 🔄 Shared Alignment — Centering overlays */
#ash-cam-overlay,
#ash-fog-mask-layer,
#ash-light-effect {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/* 🌫️ Fog Mask Layer — Uses CSS mask-image for true cutaway spotlight */
#ash-fog-mask-layer {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 1);
  z-index: 12;
  pointer-events: none;

  /* Dynamic mask: spotlight hole follows camera offset */
  -webkit-mask-image: radial-gradient(
    circle at var(--spot-x, 50%) var(--spot-y, 50%),
    rgba(0, 0, 0, 0) 120px,
    rgba(0, 0, 0, 1) 300px
  );
  mask-image: radial-gradient(
    circle at var(--spot-x, 50%) var(--spot-y, 50%),
    rgba(0, 0, 0, 0) 120px,
    rgba(0, 0, 0, 1) 300px
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}


/* 💡 Light Effect Layer — dynamically switchable via LightModes.js */
/* 🔁 RESET: Ashlight Light Layer — Minimal Spotlight */
#ash-light-effect {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 11;
  display: none;

  background-image: radial-gradient(
    circle at var(--spot-x, 50%) var(--spot-y, 50%),
    rgba(255,255,255,0.08),
    transparent 320px
  );
  mix-blend-mode: screen;
}



/* 📺 HUD Overlay — camera framing shell */
#ash-cam-overlay {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: auto;
  z-index: 15;
  pointer-events: none;
}


/* 🔦 Legacy fallback light layer (optional) */
#ash-cam-spotlight {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9;
}




/* ╭────────────────────────────────────────────────────╮ */
/* │ Accessory HUD Panel – For Docked Subsystems         │ */
/* ╰────────────────────────────────────────────────────╯ */
#ash-hud-accessory {
  position: relative; /* Now flows with the panel */
  padding: 10px;
  background: rgba(0, 255, 200, 0.05);
  border: 1px solid var(--ash-glow);
  border-radius: 8px;
  backdrop-filter: blur(3px);
  width: auto;
}

#camera-control-dock {
  position: relative;
  display: grid;
  grid-template-areas:
    ". up ."
    "left . right"
    ". down .";
  grid-template-columns: auto auto auto;
  gap: 4px;
  justify-content: center;
  align-items: center;
  padding: 8px;
}


#ash-camera-controls {
  display: grid;
  grid-template-areas:
    ". up ."
    "left . right"
    ". down .";
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 4px;
  place-items: center;
}



/* 🔹 Visual feedback for directional button presses */
.key-pressed {
  filter: drop-shadow(0 0 6px #00ffee);
  background-color: rgba(0, 255, 200, 0.12);
  transform: scale(1.05);
  transition: all 0.1s ease-in-out;
}

/* Button Class Styling */
.key-btn {
  width: 48px;
  height: 48px;
  opacity: 0.85;
  transition: opacity 0.2s ease, transform 0.1s ease, background-color 0.2s ease;
  cursor: pointer;
  background: transparent; /* Make sure background is transparent */
  border: none; /* Remove button border */
  display: flex;
  justify-content: center;  /* Ensure the image is centered within the button */
  align-items: center;  /* Align the image vertically */
}

.key-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Make sure the image fits inside the button */
}

.key-btn:hover {
  opacity: 1;
  transform: scale(1.05);
  background-color: rgba(0, 255, 200, 0.2); /* Add hover effect with color change */
}

.key-up    { grid-area: up; }
.key-down  { grid-area: down; }
.key-left  { grid-area: left; }
.key-right { grid-area: right; }



.key-up    { grid-area: up; }
.key-down  { grid-area: down; }
.key-left  { grid-area: left; }
.key-right { grid-area: right; }


/* ╭──────────────────────────────────────────────────────╮ */
/* │ Ashlight Dynamic Scene Background (Location Overlay) │ */
/* ╰──────────────────────────────────────────────────────╯ */
/*
This layer serves as the reactive background for Ashlight locations.
It transitions between visual states based on player movement, memory recovery,
or system events, forming the visual anchor for each scene or node.

To update, set via:
  document.getElementById('ash-background-overlay').style.backgroundImage = `url(...)`;

Use in tandem with HUD overlays and scanlines for full immersion.
*/
#ash-cam-spotlight,
#ash-cam-fog-layer {
  pointer-events: none;
}
#ash-background-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity:.95;
  pointer-events: none;
  z-index: 10;
  transition: background-image 0.5s ease-in-out;
   
}



/* ╭──────────────────────────────────────────────────────╮ */
/* │ Ashlight Visual Layer – HUD Grid Overlay (Scanlines) │ */
/* ╰──────────────────────────────────────────────────────╯ */
/*
This overlay creates a subtle horizontal scanline effect across the entire viewport.
It is intended to simulate a holographic interface layer, enhancing the immersive 
feel of the Ashlight Systems UI without overpowering background imagery.

Usage:
- Inject this div into your HTML: <div id="hud-grid-overlay"></div>
- The overlay sits below interactive elements due to pointer-events: none
- Designed to be toggled dynamically via classes or HUD state changes

Considerations:
- Use with mix-blend-mode or opacity to achieve desired effect
- Ensure scanlines.png is scaled proportionally (recommend using background-size: cover)


#ash-background-overlay-scanlines {
    display: none; /* 🔒 Hidden by default 
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(102, 255, 224, 0.1) 0px,      
    rgba(102, 255, 224, 0.1) 1px,
    transparent 1px,
    transparent 4px
  );
  opacity: 1; 
  pointer-events: none;
  z-index: 1;
}


*/






/* ╭────────────────────────────────────────────╮
   │ Info Panel — Base Hidden State (Startup)  │
   ╰────────────────────────────────────────────╯ */
#ash-info-panel {
  display: none;               /* 🔒 Hidden by default on load */
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: 24px;
  width: 480px;
  max-height: 100vh;           /* Prevent overflow */
  overflow: hidden;
  flex-direction: column;      /* 📦 Vertical stack (set here in base) */
  z-index: 20;
}

/* Prevent text/image selection while interacting */
body, #ash-hud-wrapper, .hud-drag-region {
  user-select: none;         /* 🔒 Disable text selection */
  -webkit-user-drag: none;   /* 🔒 Disable image dragging in WebKit browsers */
}

.ash-hud-container img {
  pointer-events: none; /* Prevent image from being targeted in drag */
}

/* ╭────────────────────────────────────────────╮
   │ Info Panel — Expanded State Styling       │
   ╰────────────────────────────────────────────╯ */
#ash-info-panel.expanded-mode {
  display: flex;               /* 👁️ Now visible as flex container */
  width: 720px;                /* 🌐 Adjust as needed (or use 80vw) */
  height: auto;
}

#ash-info-panel.expanded-mode #info-viewport {
  max-width: 100%;
  max-height: calc(100vh - 120px); /* 🧠 Prevent overlap with HUD */
}

/* 📸 Image inside expanded panel */
#ash-info-panel.expanded-mode img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* ╭────────────────────────────────────────────╮
   │ Info Panel Controls – Button Cluster      │
   ╰────────────────────────────────────────────╯ */
#info-controls {
  position: absolute;
  top: 4px;
  right: 6px;
  z-index: 100;
  display: flex;
  gap: 6px;
}

.ash-btn-icon {
  background: transparent;
  color: var(--ash-glow);
  border: none;
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.2s ease;
}

.ash-btn-icon:hover {
  opacity: 1;
}

/* ╭────────────────────────────────────────────╮
   │ Ashlight Text Panel – TYPE Command Output  │
   ╰────────────────────────────────────────────╯ */
#ash-text-panel {
  display: none; /* Hidden by default */
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: 24px;
  width: 480px;
  max-height: 100vh;
  overflow: hidden;
  flex-direction: column;
  z-index: 20;
  background-color: #000; /* Optional: darker base */
  border: 1px solid rgba(0,255,200,0.08);
  box-shadow: 0 0 6px rgba(0,255,200,0.15);
  font-family: var(--ash-font);
}

#ash-text-panel.expanded-mode {
  display: flex;
  width: 720px;
  height: auto;
}

#ash-text-panel.minimised {
  height: 42px;
  overflow: hidden;
}

/* Header Label */
#text-header {
  padding: 10px;
  font-size: 14px;
  font-weight: bold;
  color: var(--ash-glow);
  background-color: #001818;
  border-bottom: 1px solid rgba(0,255,200,0.15);
  text-shadow: 0 0 2px var(--ash-glow);
}

/* Main Content */
#text-container {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}

/* Scrollable output (like terminal text) */
#text-viewport {
  background-color: #0a0f0d;
  border: 1px solid #222;
  padding: 12px;
  color: var(--ash-mint);
  font-size: 13px;
  line-height: 1.4;
  height: 320px;
  overflow-y: auto;
  white-space: pre-wrap;
  scrollbar-width: thin;
  scrollbar-color: rgba(102, 255, 224, 0.3) transparent;
}

/* Meta Footer */
#text-meta {
  font-size: 12px;
  color: #0ff;
  background: rgba(0, 0, 0, 0.6);
  padding: 6px 10px;
  border-radius: 4px;
}

/* Buttons */
#text-controls {
  position: absolute;
  top: 4px;
  right: 6px;
  z-index: 100;
  display: flex;
  gap: 6px;
}

.ash-btn-icon {
  background: transparent;
  color: var(--ash-glow);
  border: none;
  font-size: 16px;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.2s ease;
}

.ash-btn-icon:hover {
  opacity: 1;
}




/* Move HUD right to clear director column (assumes 160px column + 20px gap) */
/* ╭──────────────────────────────────────────────╮
   │ HUD Emitter Port – Node 1 Projection Button  │
   ╰──────────────────────────────────────────────╯ */
#node-projection-port {
  position: absolute;
  top: 225px;
  left: -110px;
  width: 120px;
  height: 40px;         /* ✅ Ensures height */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 50;
  opacity: 1;           /* ✅ Force visible */
  transform: translateX(0); /* ✅ Disable animation temporarily */
  /* Optional light pulse back-glow */
  background: radial-gradient(circle, rgba(0, 255, 200, 0.06) 0%, transparent 60%);
  filter: drop-shadow(0 0 6px rgba(0, 255, 200, 0.2));
}

#node-projection-port .node-btn {
  width: 100%;
  height: 100%;
  font-size: 14px;
  background: rgba(0, 255, 200, 0.6); /* Bright debug color */
  color: #000;
  border: 2px solid lime;
  text-shadow: none;
  z-index: 1000;
}
#node-projection-port .node-btn:hover {
  background: rgba(0, 255, 200, 0.18);
  transform: scale(1.04);
}

/* Slide-in emitter effect */
@keyframes emitterSlideIn {
  0% {
    transform: translateX(-30px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}



.node-btn.active-node {
  background-color: rgba(0, 255, 200, 0.15);
  color: var(--ash-glow);
  box-shadow: 0 0 6px rgba(0, 255, 200, 0.4); /* ✨ subtle glow */
  border-color: var(--ash-glow);
}





#ash-director-column {
  position: fixed;
  top: 600px; /* ⬅️ Shift it down from the top of the screen */
  left: 0;
  height: calc(100vh - 200px); /* ⬅️ Prevents it overflowing below */
  width: 160px;
  background: rgba(0, 255, 200, 0.02);
  border-right: 1px solid rgba(0, 255, 200, 0.1);
  box-shadow: inset -2px 0 6px rgba(0, 255, 200, 0.03);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-family: var(--ash-font);
  color: var(--ash-mint);
  z-index: 1000;
}



.director-title {
  font-size: 14px;
  font-weight: bold;
  color: var(--ash-glow);
  border-bottom: 1px solid rgba(0, 255, 200, 0.2);
  padding-bottom: 4px;
  text-shadow: 0 0 3px var(--ash-glow);
}

.node-btn {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  padding: 6px 10px;
  background-color: #002020;
  border: 1px solid var(--ash-glow);
  color: var(--ash-mint);
  font-weight: bold;
  font-size: 12px;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.node-btn:hover {
  background-color: #003333;
  color: var(--ash-glow);
}

.node-btn.active {
  background-color: rgba(0, 255, 200, 0.15);
  color: var(--ash-glow);
  pointer-events: none;
}
#ash-screen-shell {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start; /* ✅ align everything from the left */
  gap: 32px;
  padding-left: 180px; /* optional static buffer */
  padding-top: 40px;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 30;
}
/* Drop rigid height/flex rules */
#info-container {
  display: block;
  overflow: visible;
}

/* Let it grow naturally */
#info-viewport {
  background-color: #000;
  padding: 0;
  border: 1px solid #222;
  border-radius: 4px;
  overflow: visible;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Full responsive scaling */
#info-viewport img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Optional meta overlay */
#info-meta {
  font-size: 12px;
  background: rgba(0, 0, 0, 0.6);
  color: #0ff;
  padding: 6px 10px;
  border-radius: 4px;
  pointer-events: none;

  /* ADD this instead: */
  margin-top: 8px;
  display: inline-block;
  float: left; /* or right / or center block */
}
.start-cli {
  background-color: #002244;
  width:100%;
  border: 1px solid var(--ash-glow);
  padding: 8px 12px;
  color: var(--ash-mint);
  font-weight: bold;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s ease, color 0.3s ease;
  display: inline-block;
}

.start-cli:hover {
  background-color: #003355;
  color: var(--ash-glow);
}

#start-cli.active-node {
  background-color: rgba(132, 248, 195, 0.2);
  border-color: var(--ash-glow);
  color: var(--ash-mint);
  pointer-events: none;
  cursor: default;
  transition: all 0.3s ease;
}

#ash-hud-wrapper {
  position: absolute;
  top: 10px;
  left: 200px; /* aligned beside director column */
  z-index: 30;
  max-width: 560px;
  flex-shrink: 0;
}

.hud-bounds {
  position: relative;
  width: 90vw;
  max-width: 560px;
  aspect-ratio: 7 / 11;
  margin-left: 0 !important;
  margin-right: auto !important;
  visibility: visible;
  opacity: 1;
}

body.preload-ready .hud-bounds {
  visibility: visible;
  opacity: 1;
}

.ash-hud-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 32px;
  width: 100%;
  height: 100%;
}

.ash-terminal-stack {
  flex-shrink: 0;
}
.ash-hud-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 30;
}

.ash-terminal-window {
  position: absolute;
  top: 5%;
  left: 12%;
  width: 76%;
  height: 68%;
  background: transparent;
  color: #a8b2b8;
  z-index: 5;
  overflow: hidden;
  box-sizing: border-box;
}



.hud-main-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
}
.terminal-version {
  color: var(--ash-mint);
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 1px;
  padding-bottom:8px;
}
.ash-terminal-headblock {
  text-align: center;               /* ✅ Ensures content is centered */
  padding: 20px 0 5px 0;
  border-bottom: 1px solid #a8b2b8;
}

.ash-logo-inside {
  display: block;
  margin: 0 auto;                   /* ✅ Forces horizontal centering */
  max-width: 220px;
  height: auto;
}
.hud-main-viewport {
  background-color: #0a0f0d; /* ✅ Set the HUD background */
  
  font-weight: bold;
    color: #a8b2b8; /* Softer grey-blue tone */
  text-shadow: 0 0 1px rgba(102, 255, 224, 0.1);
  backdrop-filter: blur(1px);
}

#output-log {
  flex-grow: 1;
  overflow-y: auto;
  padding: 20px 20px 40px 20px;
  height: 100%;
  background-color: #0a0f0d; /* ✅ Match .hud-main-viewport exactly */
   color: #a8b2b8; /* Softer grey-blue tone */
  font-family: var(--ash-font);
  white-space: pre-wrap;
  scroll-behavior: smooth;
    text-shadow: 0 0 1px rgba(102, 255, 224, 0.15);
  scrollbar-width: thin;
  scrollbar-color: rgba(102, 255, 224, 0.3) transparent;
}

#ash-terminal-header-pinned {
  background-color: #0a0f0d; /* ✅ Match .hud-main-viewport and #output-log */
  border-bottom: none;
  padding-bottom: 6px;
   padding-top: 6px;
  margin-bottom: 12px;
   text-align: center;
  display: block;
  
color: #a8b2b8;
   border-bottom: 1px solid #a8b2b8;
}

#output-log::-webkit-scrollbar-thumb {
  background-color: rgba(102, 255, 224, 0.3);
  border-radius: 4px;
}

#output-log::-webkit-scrollbar-track {
  background: transparent;
}


#ash-message {
  background: #111;
  padding: 10px 15px;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  font-style: italic;
  color: #a8b2b8; /* Softer grey-blue tone */
}

#cli-input-block {
  background: #000;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  border-top: 1px solid #333;
  flex-shrink: 0;
}

.prompt-label {
  margin-right: 10px;
  color: #a8b2b8; /* Softer grey-blue tone */
}

#terminal-input {
  flex-grow: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #a8b2b8; /* Softer grey-blue tone */
  font-size: 16px;
  font-family: var(--ash-font);
  caret-color: #a8b2b8; /* Softer grey-blue tone */
}

/* ─── Globe & FX Stack — Fullscreen Glitch Blend ───────────────────────────── */

.hud-globe-panel {
  position: absolute;
  bottom: 67px;
  right: 63px;
  width: 106px;
  height: 100px;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.globe-video-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  isolation: isolate; /* Ensures z-index layering is clean */
}

.glitch-video-bg {
  position: absolute;
  top: -5%; /* ⬅ Pull it up slightly */
  left: -5%;
  width: 110%; /* ⬅ Allow bleed around edges */
  height: 110%;
  object-fit: cover;
  opacity: 0.28;
  z-index: 4;
  pointer-events: none;

  filter: hue-rotate(100deg) saturate(420%) brightness(0.3) contrast(1.25);
  mix-blend-mode: screen;
  transition: opacity 1.2s ease, transform 1.5s ease;
}

.globe-container {
  position: relative;
  width: 97.43px;
  height: 100%;
  background-image: url('resources/images/ashlight_globe_sprite_14.png?v=<?= time() ?>');
  background-repeat: no-repeat;
  background-size: 1364px 98px;
  background-position: 0 0;
  image-rendering: pixelated;
  z-index: 5;
  overflow: hidden;
  animation: intervalGlitch 8s infinite;
  animation-delay: 2s;
   border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 4px rgba(0,255,170,0.2);

}

.glitch-video-inside {
  position: absolute;
   top: -15px; /* nudge up */
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 2;
  opacity: 0.28;
  transform: scale(1.25); /* slight zoom to cover top edge */
  /* 💚 FORCE green tone */
  filter: hue-rotate(46deg) saturate(5) brightness(0.9) contrast(3);
  mix-blend-mode: screen;
}

/* FX: Scanline Drift */
.fx-scanlines::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 255, 200, 0.12),
    rgba(0, 255, 200, 0.12) 2px,
    transparent 2px,
    transparent 4px
  );
  animation: scanMove 3s linear infinite;
  pointer-events: none;
  z-index: 12;
}

@keyframes scanMove {
  0%   { background-position-y: 0%; }
  100% { background-position-y: 100%; }
}

/* FX: Static Flicker */
.fx-static-overlay::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: url("resources/images/glitch_overlay.png") center/cover no-repeat;
  opacity: 0.15;
  animation: flicker 0.3s steps(2, start) infinite;
  pointer-events: none;
  z-index: 13;
}

@keyframes flicker {
  0%, 100% { opacity: 0.08; }
  50%      { opacity: 0.18; }
}

/* FX: Glitch Pulse */
.fx-glitch-pulse {
    animation: glitchPulse 0.9s 1 ease-out; /* Only runs once */
}

@keyframes glitchPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  25%      { transform: scale(1.02) translateX(-1px); opacity: 0.85; }
  50%      { transform: scale(0.98) translateX(1px); opacity: 0.75; }
  75%      { transform: scale(1.01); opacity: 0.9; }
}

/* FX: Optional Shake */
.fx-shake {
  animation: shakeGlobe 0.6s infinite;
}

@keyframes shakeGlobe {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(1px, -1px); }
  40%  { transform: translate(-2px, 1px); }
  60%  { transform: translate(2px, 0); }
  80%  { transform: translate(-1px, -2px); }
  100% { transform: translate(0, 0); }
}

/* FX: Interval Glitch (subtle scale/filter twitch) */
@keyframes intervalGlitch {
  0%, 92%, 100% {
    transform: scale(0.989);
    filter: none;
  }
  93% {
    transform: scale(1.02) translateX(-1px);
    filter: contrast(140%) hue-rotate(20deg);
  }
  94% {
    transform: scale(0.97) translateX(1px);
    filter: blur(0.5px) brightness(1.3);
  }
  95% {
    transform: scale(1.01);
    filter: contrast(120%) saturate(130%);
  }
}


a, a:visited, a:active {
  color: var(--ash-mint);
  text-decoration: none;
}

a:hover {
  color: var(--ash-glow);
  text-shadow: 0 0 5px var(--ash-glow);
}


/* 🌍 Continuous Globe Rotation */

@keyframes globeContinuousSpin {
  from { background-position-x: 0; }
  to   { background-position-x: -1364px; } /* 14 frames * ~97.43px per frame */
}

.spin-loop {
  animation: globeContinuousSpin 8s steps(14) infinite;
}

.hud-drag-region {
  position: absolute;
  top: 8px;
  height: 15px;
  left: 95px;
  width: calc(100% - 190px);
  cursor: grab;
  z-index: 12;
  background: transparent;
  pointer-events: auto;
  transition: box-shadow 0.2s ease, background 0.2s ease;
}

.hud-drag-region:hover {
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.16);
  background: linear-gradient(to bottom, rgba(255,255,255,0.12), rgba(255,255,255,0.02));
}
.australia-ping {
  position: absolute;
  top: 78px;   /* 🔧 Adjust based on your globe alignment */
  left: 48px;  /* 🔧 Should align over Australia in frame 13 */
  width: 12px;
  height: 12px;
  border: 2px solid var(--ash-mint);
  border-radius: 50%;
  background-color: rgba(0, 255, 170, 0.2);
  animation: pulsePing 1.2s ease-out infinite;
  pointer-events: none;
  z-index: 20;
  display: none; /* Hidden until animation complete */
}

@keyframes pulsePing {
  0% { transform: scale(0.5); opacity: 0.2; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}
.placeholder {
  color: #aaa;
  font-style: italic;
  padding: 8px;
}

/* ╭──────────────────────────────────────────────╮
   │ Subsystem Stack — Base Container              │
   ╰──────────────────────────────────────────────╯
   This holds both left and right HUD sub-panels (buttons, progress bars, and control docks).
   It's placed directly below the terminal viewport.
*/
#ash-subsystem-stack {
  position: absolute;
  bottom: 6%;               /* Move up from bottom of the HUD */
  left: 12%;                /* Align with terminal window */
  width: 76%;               /* Match terminal window width */
  height: auto;
  display: flex;
  justify-content: space-between;
  z-index: 4;
  padding: 4px 0;
  pointer-events: none;     /* Optional: blocks hover if needed */
}

#subsystem-left, #subsystem-right {
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: auto;     /* Allow interactions inside each side */
}

/* ─── Left Buttons & Progress Bars ─── */
.subsystem-buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hud-btn {
  width: 22px;
  height: 22px;
  background-color: rgba(0,255,200,0.15);
  border: 1px solid var(--ash-glow);
  border-radius: 50%;
  cursor: pointer;
}

.subsystem-bars {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.bar {
  height: 6px;
  width: 60px;
  background: rgba(0,255,200,0.08);
  border: 1px solid rgba(0,255,200,0.2);
  border-radius: 4px;
}

/* ─── Right HUD Accessory Dock ─── */
#ash-hud-accessory {
  position: relative;
  width: 100px;
  padding: 8px;
  background: rgba(0,255,200,0.04);
  border-radius: 10px;
  border: 1px solid rgba(0,255,200,0.1);
  backdrop-filter: blur(4px);
}

#camera-control-dock {
  display: grid;
  grid-template-areas:
    ". up ."
    "left . right"
    ". down .";
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  place-items: center;
}

/* ╭─────────────────────────────╮
   │ DEV BORDERS – DEBUG MODE   │
   ╰─────────────────────────────╯ */
#ash-subsystem-stack {
  outline: 1px solid rgba(0,255,200,0.1);
  z-index: 999;
}

#subsystem-left {
  outline: 1px dashed rgba(255,0,100,0.25);
  z-index: 999;
}

#subsystem-right {
  outline: 1px dashed rgba(100,200,255,0.25);
  z-index: 999;
}

#ash-hud-accessory {
  outline: 1px solid rgba(255,255,255,0.15);
  z-index: 999;
}

#camera-control-dock {
  outline: 1px dotted rgba(255,255,255,0.2);
  z-index: 999;
}
#ash-subsystem-stack,
.ash-terminal-window {
  outline: 1px dashed limegreen;
}