/* 
  Basic page reset & fullscreen body 
  (Ensure the page fills the screen and we see the CRT effect).
*/
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: #000; /* The outer “off” background behind the monitor */
    font-family: "VT323", monospace; /* Retro console font */
    color: #fff; /* Default text color */
}

/* 
  The main CRT container:
  - Fills the screen
  - Handles power-on / off and distortion effects.
*/
#crt {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
    background: #001933;
    overflow: hidden;
    transition: all 1.2s ease;
}

/* Off state */
#crt.off {
    background: #000;
    filter: brightness(0.1);
}

/* On state */
#crt.on {
    animation: powerOn 1.2s forwards cubic-bezier(0.23, 1, 0.32, 1);
    filter: none;
}

/* Flicker effect overlay */
#crt::after {
    content: "";
    position: absolute;
    top: 0; 
    left: 0; 
    right: 0;
    bottom: 0;
    pointer-events: none;
    background: #fff;
    opacity: 0;
    mix-blend-mode: screen;
    z-index: 10;
    animation: powerFlicker 4s infinite ease-in-out;
}

@keyframes powerFlicker {
    5%   { opacity: 0.02; }
    20%  { opacity: 0.03; }
    40%  { opacity: 0.015; }
    65%  { opacity: 0.02; }
    85%  { opacity: 0.025; }
}

/* Horizontal scanline overlay (striped gradient, bigger "bar") */
#crt::before {
    content: "";
    position: absolute;
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 50%,
      rgba(0, 0, 0, 0.2) 50%
    );
    background-size: 100% 10px;
    opacity: 0.3;
    z-index: 2;
}

/* The bright scanning bar (increased height) */
.scanline {
    position: absolute;
    width: 100%;
    height: 180px; /* raised from 120px */
    z-index: 3;
    background: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(255, 255, 255, 0.7) 25%,
      rgba(255, 255, 255, 0.0) 100%
    );
    opacity: 0.05;
    bottom: 100%;
    animation: scanline 6s linear infinite;
}

@keyframes scanline {
    0%   { bottom: 100%; }
    80%  { bottom: 0%; }
    100% { bottom: 0%; }
}

/* Power-on animation keyframes */
@keyframes powerOn {
    0%   { background-color: #000;      filter: brightness(0.2) saturate(0.5); }
    30%  { background-color: #001933;   filter: brightness(1)   saturate(1);   }
    70%  { background-color: #003366;   filter: brightness(1.3) saturate(1.2); }
    100% { background-color: #003a80;   filter: brightness(1)   saturate(1);   }
}

/* Header bar styling */
.header-bar {
    position: absolute;
    top: 0;
    left: 0; 
    right: 0;
    height: 40px;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    z-index: 5;
}

/* Tab styling */
.tab {
    margin-right: 1rem;
    padding: 0.25rem 0.5rem;
    cursor: default;
}

/* Underline the active tab */
.tab.active {
    text-decoration: underline;
}

/* 
  Main content area 
  Scrolling console output, new lines appear at the bottom 
  (we auto-scroll to bottom after each typed line).
*/
#content-area {
    position: absolute;
    top: 40px; /* below header */
    left: 0;
    right: 0;
    bottom: 28px; /* above HUD bar */
    padding: 1rem;
    z-index: 5;
    overflow-y: auto;
    box-sizing: border-box;
}

/* Blinking “block” cursor */
.cursor {
    display: inline-block;
    margin-left: 4px;
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    50% { opacity: 0; }
}

/* Input-line styling (for the command prompt) */
.input-line {
    margin: 0;
    padding: 0;
    line-height: 1.4;
}

.prompt {
    /* style the prompt symbol if desired */
}

/* ============================= */
/* MAP STYLES                    */
/* ============================= */
/* MAP CONTAINER */
#map-container {
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6; /* Above the console text */
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  #map-container.hidden {
    display: none;
  }
  
  /* The map “board” where the tiles appear */
  .map-board {
    position: relative;
    /* Enough space for a 2×2 grid of tiles plus spacing. */
    width: 300px;
    height: 300px;
  }
  
  /* Each tile is a 100×100 square, with a bit of spacing around them. */
  .map-tile {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 1px solid #fff;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 50% 50%;
  }
  
  /* Minimal quadrant styling – can expand later. */
  .map-tile div {
    /* no style needed by default */
  }
  
  /* Lines connecting tiles (to show exits). */
  .map-line {
    position: absolute;
    background-color: #fff; /* default line color if accessible */
  }
  
  /* If not accessible, we color it red. */
  .map-line.locked {
    background-color: #f00;
  }
  

  .player-marker {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: green;
  
    /* Center it inside the tile */
    top: calc(50% - 5px);
    left: calc(50% - 5px);
  }
  
  #map-tooltip {
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
    border-radius: 4px;
    /* You could also add a little box-shadow for clarity */
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    z-index: 999;
  }

  #mini-map-tooltip {

  }
  
  /* The short name in the tile’s top-left corner */
  .map-tile-name {
    font-weight: bold;
    font-size: 14px;
    
  }

  .map-door {
    position: absolute;
    z-index: 10;
  }
  .hidden {
    display: none;
  }

  #status-container {


  }
  /* Status container also hidden by default. */
  #status-container.hidden {
    display: none;
  }



  #mini-console {
    position: absolute;
    top: 60px;   /* below the header bar */
    right: 20px;
    width: 220px;
    min-height: 40px;
    background: rgba(0,0,0,0.9);
    border: 1px solid #fff;
    padding: 8px;
    font-family: "VT323", monospace;
    z-index: 9999; /* above everything */
  }
  
  /* Use .hidden to hide it entirely */
  #mini-console.hidden {
    display: none;
  }
  
  /* If you want a blinking cursor inside it, reuse the same .cursor animation. */
  #mini-console .cursor {
    animation: blink 1s step-end infinite;
  }

/* Dynamic UI System Styles */
.dynamic-tab {
  transition: opacity 0.3s ease;
}

.content-container {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem;
  overflow-y: auto;
  color: #0e0;
}

/* Override color for nav-terminal container */
.nav-terminal-ui.content-container {
  color: #fff;
}

.object-ui {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #0e0;
  background: rgba(0, 40, 0, 0.3);
}

.object-ui h2 {
  color: #0ff;
  text-shadow: 0 0 10px #0ff;
  margin-bottom: 20px;
  font-size: 24px;
  text-transform: uppercase;
}

.object-ui .status-display {
  background: rgba(0, 0, 0, 0.5);
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid #0e0;
  font-family: "VT323", monospace;
}

.object-ui .status-display p {
  margin: 5px 0;
  color: #0e0;
}

.object-ui .status-display span {
  color: #0ff;
  font-weight: bold;
}

.object-ui .controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.object-ui .controls button {
  background: #001a00;
  color: #0e0;
  border: 1px solid #0e0;
  padding: 10px 20px;
  cursor: pointer;
  font-family: "VT323", monospace;
  font-size: 16px;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.object-ui .controls button:hover {
  background: #0e0;
  color: #000;
  box-shadow: 0 0 10px #0e0;
}

.object-ui .description {
  color: #0a0;
  font-style: italic;
  margin-bottom: 15px;
}

.object-ui.default-ui .placeholder-content {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(0, 255, 0, 0.03) 10px,
    rgba(0, 255, 0, 0.03) 20px
  );
  padding: 20px;
  border: 1px dashed #0e0;
  margin-top: 20px;
}

.object-ui.default-ui .placeholder-content p {
  color: #0a0;
  opacity: 0.7;
  text-align: center;
}

.object-info {
  margin-bottom: 20px;
}

/* Nav-Terminal specific styling */
.nav-terminal-ui #map-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 80px);
  overflow: auto;
  color: #fff;
}

/* Ensure all map elements in nav-terminal are white */
.nav-terminal-ui #map-container * {
  color: #fff;
}

/* Keep the tile name green as it was originally */
.nav-terminal-ui .map-tile-name {
  color: #0e0;
}

/* Console Manager Styles */
.output-line {
  color: #0e0;
  margin: 4px 0;
}

.command-line {
  color: #0ff;
  margin: 4px 0;
  display: flex;
  align-items: baseline;
}

.command-line.preserved {
  opacity: 1;
}

.command-line .prompt {
  color: #0ff;
  font-weight: bold;
  margin-right: 0.5ch;
}

.command-line .input-text {
  color: #fff;
}

.system-output {
  color: #ff0;
  margin: 4px 0;
}

.input-line {
  color: #0e0;
  margin: 4px 0;
}

.input-line .prompt {
  color: #0ff;
  font-weight: bold;
}

.input-line .input-text {
  color: #fff;
}

.cursor.typing-cursor {
  animation: blink 1s step-end infinite;
  color: #0e0;
}

.cursor.input-cursor {
  animation: blink 1s step-end infinite;
  color: #fff;
}

/* HUD Bar */
#hud-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 28px;
  background: rgba(0, 0, 0, 0.85);
  border-top: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0 1rem;
  font-family: "VT323", monospace;
  font-size: 14px;
  z-index: 20;
  color: #888;
}

#hud-bar .hud-room {
  color: #0ff;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#hud-bar .hud-sep {
  color: #333;
  margin: 0 8px;
}

#hud-bar .hud-good { color: #0f0; }
#hud-bar .hud-warn { color: #ff0; }
#hud-bar .hud-danger { color: #f33; animation: blink 1s step-end infinite; }
#hud-bar .hud-normal { color: #888; }