/* workbench.css */

/* ------------------------------------------------------------
   HTML Objects
------------------------------------------------------------ */
html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
  background-color: #000;
}

/* ------------------------------------------------------------
   workbench BACKGROUND & SCALING CANVAS
------------------------------------------------------------ */
#workbench-background {
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* This outer wrapper centers the scaled canvas in the screen */
#workbench-bg-wrapper {
  position: relative;
  width: 100vw;
  height: 100vh;
  max-width: calc(100vh * (16 / 9));
  max-height: calc(100vw * (9 / 16));
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Image fills the locked aspect ratio wrapper */
#workbench-bg-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;      /* Ensures no inline gap at the bottom */
  vertical-align: top; /* Prevents alignment spacing top/bottom */
}

/* Props scale relative to the rendered IMAGE bounds, not screen */
#workbench-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* ------------------------------------------------------------
   HOME BUTTON
------------------------------------------------------------ */
#workbench-home-btn {
  /* Fixed positioning ensures it stays above all background and prop layers */
  position: absolute;
  top: 3.5%;
  left: 2%;
  z-index: 9999;
  
  /* Enables hover, click, and tap interactions */
  pointer-events: auto;
  cursor: pointer;
  text-decoration: none;
  
  /* Fits the container strictly to the text length */
  display: inline-block;
  width: fit-content;
  
  /* 3px vertical padding, 1ch horizontal padding on each side */
  padding: 3px 1ch;
  
  /* Keep label centered relative to prop width */
  margin-left: auto;
  margin-right: auto;

  font-family: "Orbitron", sans-serif;
  font-size: clamp(0.55rem, 0.75vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #00eaff;
  
  /* Semi-transparent tactical dark backing */
  background: rgba(4, 18, 28, 0.75);
  backdrop-filter: blur(4px);
  
  /* Cyberpunk corner notches and thin border */
  border: 1px solid rgba(0, 234, 255, 0.4);
  clip-path: polygon(
    0 0, 
    calc(100% - 6px) 0, 
    100% 6px, 
    100% 100%, 
    6px 100%, 
    0 calc(100% - 6px)
  );

  /* Dual glow effect */
  box-shadow: inset 0 0 8px rgba(0, 234, 255, 0.15),
              0 0 8px rgba(0, 234, 255, 0.2);
  text-shadow: 0 0 5px rgba(0, 234, 255, 0.8);
  
  text-align: center;
  white-space: nowrap;
  transition: all 0.25s ease-in-out;
}

/* Accent highlight on button hover */
#workbench-home-btn:hover {
  color: #ffffff;
  background: rgba(0, 234, 255, 0.25);
  border-color: #00eaff;
  box-shadow: inset 0 0 10px rgba(0, 234, 255, 0.4),
              0 0 14px rgba(0, 234, 255, 0.6);
  text-shadow: 0 0 8px #00eaff, 0 0 12px #00eaff;
  transform: translateY(-2px);
}

/* ------------------------------------------------------------
   PROP CONTAINERS
------------------------------------------------------------ */
.workbench-prop-container {
  pointer-events: auto;
  position: absolute;
  display: block;
  text-align: center; /* Ensures inline-block .prop-label stays centered */
  transform-origin: top left;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
  z-index: 2;
}

/* ------------------------------------------------------------
   PROP IMAGE
------------------------------------------------------------ */
.workbench-prop {
  width: 100%;
  height: auto;
  display: block;
  transition: filter 0.2s ease, transform 0.2s ease;
}

/* ------------------------------------------------------------
   INDIVIDUAL RESPONSIVE PROP POSITIONS & SIZES (%)
   (Percentages are relative to background image dimensions)
------------------------------------------------------------ */
/* Narrative */
[data-prop="terminal-center"] { top: 33.65%; left: 41.50%; width: 20.85%; }

/* Worlds */
[data-prop="terminal-left"]   { top: 38.40%; left: 28.35%; width: 15.35%; }

/* Factions */
[data-prop="terminal-right"]  { top: 34.35%; left: 59.65%; width: 16.75%; }

/* Enemies */
[data-prop="nexos-skull"]     { top: 51%; left: 10%; width: 20%; }

/* Howler Pack */
[data-prop="dossier"]         { top: 72%; left: 24%; width: 16%; }

/* Player Bio */
[data-prop="dogtags"]         { top: 66.5%; left: 69.5%; width: 16%; }

/* W.O.L.F.E. */
[data-prop="wolfe-folder"]    { top: 15%; left: 73%; width: 18%; }

/* Weapons & Systems */
[data-prop="weapons_systems"]         { top: 61.5%; left: 86.5%; width: 13.5%; }

/* ------------------------------------------------------------
   PROP-GLOW EFFECTS
------------------------------------------------------------ */
.workbench-prop-container .workbench-prop {
  filter: drop-shadow(0 0 2px rgba(0, 255, 255, 0.6));
}

.workbench-prop-container[data-prop="nexos-skull"] .workbench-prop {
  filter: drop-shadow(0 0 2px rgba(255, 60, 60, 0.55));
}

.workbench-prop-container[data-prop="dossier"] .workbench-prop {
  filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.55));
}

.workbench-prop-container[data-prop="wolfe-folder"] .workbench-prop {
  filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.55));
}

/* ------------------------------------------------------------
   PROP-HOVER EFFECTS
------------------------------------------------------------ */
.workbench-prop-container:hover .workbench-prop {
  filter: drop-shadow(0 0 12px rgba(0, 255, 255, 0.6));
  transform: scale(1.01);
}

.workbench-prop-container[data-prop="nexos-skull"]:hover .workbench-prop {
  filter: drop-shadow(0 0 14px rgba(255, 60, 60, 0.9));
  transform: scale(1.01);
}

.workbench-prop-container[data-prop="dossier"]:hover .workbench-prop {
  filter: drop-shadow(0 0 14px rgba(255, 215, 0, 0.9));
  transform: scale(1.01);
}

.workbench-prop-container[data-prop="wolfe-folder"]:hover .workbench-prop {
  filter: drop-shadow(0 0 14px rgba(255, 215, 0, 0.9));
  transform: scale(1.01);
}

/* ------------------------------------------------------------
   PROP LABEL
.prop-label {
  margin-top: 6px;
  font-family: "Rajdhani", sans-serif;
  font-size: clamp(0.6rem, 1vw, 0.9rem); 
  color: #00eaff;
  text-shadow: 0 0 6px rgba(0, 255, 255, 0.6);
  text-align: center;
  white-space: nowrap;
}
------------------------------------------------------------ */

/* ------------------------------------------------------------
   PROP LABEL - SCI-FI UI HOVER BADGE
------------------------------------------------------------ */
.prop-label {
  margin-top: 8px;
  
  /* Fits the container strictly to the text length */
  display: inline-block;
  width: fit-content;
  
  /* 3px vertical padding, 1ch (approx 1 character/space) horizontal padding on each side */
  padding: 3px 1ch;
  
  /* Keep label centered relative to prop width */
  margin-left: auto;
  margin-right: auto;

  font-family: "Orbitron", sans-serif;
  font-size: clamp(0.55rem, 0.75vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #00eaff;
  
  /* Semi-transparent tactical dark backing */
  background: rgba(4, 18, 28, 0.75);
  backdrop-filter: blur(4px);
  
  /* Cyberpunk corner notches and thin border */
  border: 1px solid rgba(0, 234, 255, 0.4);
  clip-path: polygon(
    0 0, 
    calc(100% - 6px) 0, 
    100% 6px, 
    100% 100%, 
    6px 100%, 
    0 calc(100% - 6px)
  );

/* Dual glow effect */
  box-shadow: inset 0 0 8px rgba(0, 234, 255, 0.15),
              0 0 8px rgba(0, 234, 255, 0.2);
  text-shadow: 0 0 5px rgba(0, 234, 255, 0.8);
  
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  transition: all 0.25s ease-in-out;
}

/* Accent highlight on prop container hover */
.workbench-prop-container:hover .prop-label {
  color: #ffffff;
  background: rgba(0, 234, 255, 0.25);
  border-color: #00eaff;
  box-shadow: inset 0 0 10px rgba(0, 234, 255, 0.4),
              0 0 14px rgba(0, 234, 255, 0.6);
  text-shadow: 0 0 8px #00eaff, 0 0 12px #00eaff;
  transform: translateY(-2px);
}

/* Red accent variant for Nexos Network prop */
.workbench-prop-container[data-prop="nexos-skull"] .prop-label {
  color: #ff3c3c;
  border-color: rgba(255, 60, 60, 0.4);
  background: rgba(28, 4, 4, 0.75);
  box-shadow: inset 0 0 8px rgba(255, 60, 60, 0.15),
              0 0 8px rgba(255, 60, 60, 0.2);
  text-shadow: 0 0 5px rgba(255, 60, 60, 0.8);
}

.workbench-prop-container[data-prop="nexos-skull"]:hover .prop-label {
  color: #ffffff;
  background: rgba(255, 60, 60, 0.3);
  border-color: #ff3c3c;
  box-shadow: inset 0 0 10px rgba(255, 60, 60, 0.5),
              0 0 14px rgba(255, 60, 60, 0.7);
  text-shadow: 0 0 8px #ff3c3c;
}

/* Gold accent variant for Howler Pack prop */
.workbench-prop-container[data-prop="dossier"] .prop-label {
  color: #ffd700;
  border-color: rgba(255, 215, 0, 0.4);
  background: rgba(28, 24, 4, 0.75);
  box-shadow: inset 0 0 8px rgba(255, 215, 0, 0.15),
              0 0 8px rgba(255, 215, 0, 0.2);
  text-shadow: 0 0 5px rgba(255, 215, 0, 0.8);
}

.workbench-prop-container[data-prop="dossier"]:hover .prop-label {
  color: #ffffff;
  background: rgba(255, 215, 0, 0.3);
  border-color: #ffd700;
  box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.5),
              0 0 14px rgba(255, 215, 0, 0.7);
  text-shadow: 0 0 8px #ffd700;
}

/* Gold accent variant for WOLFE Folder prop */
.workbench-prop-container[data-prop="wolfe-folder"] .prop-label {
  color: #ffd700;
  border-color: rgba(255, 215, 0, 0.4);
  background: rgba(28, 24, 4, 0.75);
  box-shadow: inset 0 0 8px rgba(255, 215, 0, 0.15),
              0 0 8px rgba(255, 215, 0, 0.2);
  text-shadow: 0 0 5px rgba(255, 215, 0, 0.8);
}

.workbench-prop-container[data-prop="wolfe-folder"]:hover .prop-label {
  color: #ffffff;
  background: rgba(255, 215, 0, 0.3);
  border-color: #ffd700;
  box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.5),
              0 0 14px rgba(255, 215, 0, 0.7);
  text-shadow: 0 0 8px #ffd700;
}