/* ==========================================================================
   HELLFRONT — command-view chrome. Loaded AFTER css/cyberhell-fps.css so the
   two views share one visual family (Courier, cyan-on-dark, hard edges) and
   only the command layer's own furniture is restyled here.
   ========================================================================== */

/* The one 3D world. Always on screen, behind everything: the command camera
   and the possessed camera both render into it. */
#world-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
}

#command-layer {
  position: absolute;
  inset: 0;
  display: block;
  /* Transparent: the basin behind this layer is the real Three.js scene, not
     a painted background. */
  background: transparent;
  color: #ffd9a0;
  z-index: 5;
}

/* Only the first-person HUD lives here now. Its display flag is still the
   answer to "am I possessed". */
#fps-layer {
  position: absolute;
  inset: 0;
  display: none;
  z-index: 20;
}

/* Screen-space RTS chrome over the 3D world. Full-bleed so its client rect
   matches the render canvas exactly and a mouse position converts to a ground
   raycast without an offset fudge; the HUD strips sit above it on z-index. */
#command-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: transparent;
  cursor: crosshair;
}

/* ---- top strip: the numbers a commander checks without looking away ---- */
#hf-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 14px;
  background: linear-gradient(#1d1409, #120c07);
  border-bottom: 1px solid #6b4f28;
  font-size: 13px;
  letter-spacing: 0.06em;
  z-index: 6;
}
#hf-top .hf-key { color: #a8834f; }
#hf-top .hf-val { color: #ffd24a; font-weight: bold; }
#hf-top .hf-warn { color: #ff6b3d; }
#hf-title { color: #38e0ff; font-weight: bold; }
#hf-objective { margin-left: auto; color: #cfe9ff; }

#hf-mission-select {
  background: #1d2b33;
  color: #9be9ff;
  border: 1px solid #38e0ff;
  font-family: inherit;
  font-size: 12px;
  padding: 3px 6px;
  letter-spacing: 0.05em;
  cursor: pointer;
}

/* ---- objective tracker: mission 2's three boxes, ticked as they land --- */
#hf-objectives {
  position: absolute;
  top: 54px; left: 10px;
  display: none;
  flex-direction: column;
  gap: 3px;
  padding: 7px 10px;
  background: #1a1008cc;
  border-left: 2px solid #ffd24a;
  font-size: 12px;
  letter-spacing: 0.05em;
  z-index: 6;
  pointer-events: none;
}
.hf-obj { color: #ffd9a0; }
.hf-obj-done { color: #9dffb0; text-decoration: line-through; }

/* ---- possess handoff card ---------------------------------------------
   Shown on the command view when a possession hands the body back, so the
   two views trade the camera in front of the player instead of cutting. */
#hf-transition {
  position: absolute;
  top: 40%; left: 0; right: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 9;
  pointer-events: none;
  text-align: center;
}
#hf-transition-title {
  font-size: 26px;
  letter-spacing: 0.18em;
  color: #38e0ff;
  text-shadow: 0 0 18px #38e0ff88;
}
#hf-transition-sub { font-size: 13px; color: #ffd9a0; letter-spacing: 0.08em; }
#hf-transition.hf-fade { animation: hf-handoff 1.4s ease-out forwards; }
@keyframes hf-handoff {
  0%   { opacity: 0; transform: translateY(10px); }
  18%  { opacity: 1; transform: translateY(0); }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ---- bottom command bar ------------------------------------------------ */
#hf-bottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 8px 12px;
  background: linear-gradient(#120c07cc, #120c07);
  border-top: 1px solid #6b4f28;
  z-index: 6;
  pointer-events: none;
}
#hf-bottom > * { pointer-events: auto; }

/* POSSESS sits outside the build bar: mission 2 has no economy and hides the
   bar entirely, and possess is the one verb that is never unavailable. */
#hf-actions { display: flex; align-items: flex-end; gap: 8px; max-width: 52%; }
#hf-build { display: flex; gap: 8px; flex-wrap: wrap; }
#hf-build button, #hf-possess-btn {
  background: #1d2b33;
  color: #9be9ff;
  border: 1px solid #38e0ff;
  padding: 7px 10px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  letter-spacing: 0.05em;
}
#hf-build button:hover, #hf-possess-btn:hover { background: #26414d; }
#hf-build button:disabled, #hf-possess-btn:disabled { opacity: 0.4; cursor: not-allowed; border-color: #3c5058; }
#hf-build button .cost { color: #ffd24a; }
/* A body standing at an interior door: POSSESS becomes BREACH. */
#hf-possess-btn.hf-breach { background: #3a2410; color: #ffc98a; border-color: #ff9d3d; }

#hf-side { flex: 1; display: flex; flex-direction: column; gap: 4px; }
#hf-selection {
  font-size: 12px;
  color: #9dffb0;
  border-left: 2px solid #9dffb0;
  padding-left: 8px;
  min-height: 14px;
}
#hf-log {
  font-size: 11px;
  line-height: 1.35;
  color: #c8a06a;
  max-height: 110px;
  overflow: hidden;
}
#hf-log div:last-child { color: #ffd9a0; }

#hf-hint { font-size: 11px; color: #8a6c44; }

/* ---- mission result card ---------------------------------------------- */
#hf-mission-card {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(10, 7, 4, 0.88);
  z-index: 8;
  text-align: center;
}
#hf-mission-title { font-size: 38px; letter-spacing: 0.12em; }
#hf-mission-body { font-size: 14px; color: #ffd9a0; max-width: 620px; line-height: 1.6; }
#hf-restart {
  background: #38e0ff; color: #06121a; border: none;
  padding: 10px 22px; font-family: inherit; font-weight: bold; cursor: pointer;
}

/* ---- dev panel (F9): playtest aid, never shipped to a player build ----- */
#hf-dev {
  position: absolute;
  top: 54px; right: 10px;
  display: none;
  background: #1a1008ee;
  border: 1px solid #ff6b3d;
  padding: 8px;
  z-index: 7;
  font-size: 11px;
}
#hf-dev button {
  display: block; width: 100%; margin: 4px 0;
  background: #2a1a0c; color: #ff9d6b; border: 1px solid #ff6b3d;
  padding: 5px 8px; font-family: inherit; cursor: pointer;
}
#hf-dev .hf-devtitle { color: #ff6b3d; font-weight: bold; margin-bottom: 4px; }

/* ---- mission briefing / pause goal card ---------------------------------
   Deliberately NOT an opaque plate. The splash and the pause card are the same
   element over the live 3D world, dimmed just enough to read through: pausing
   to check the goal should not cost you the picture of where your squad is
   standing. The panel itself is solid so the text stays legible over sand.
   ------------------------------------------------------------------------ */
#hf-brief {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10, 7, 4, 0.42);
  z-index: 10;
}
#hf-brief.hf-open { display: flex; }

#hf-brief-panel {
  max-width: 660px;
  width: min(92vw, 660px);
  max-height: 88vh;
  overflow-y: auto;
  padding: 20px 26px 22px;
  background: rgba(14, 10, 6, 0.94);
  border: 1px solid #6b4f28;
  box-shadow: 0 0 40px #000c, 0 0 0 1px #00000088;
  text-align: center;
}
#hf-brief-kicker {
  font-size: 11px; letter-spacing: 0.32em; color: #ff8a3d;
}
#hf-brief-title {
  font-size: 26px; letter-spacing: 0.1em; margin: 6px 0 10px; color: #38e0ff;
  text-shadow: 0 0 18px #38e0ff66;
}
#hf-brief-goal {
  font-size: 14px; line-height: 1.6; color: #ffd9a0;
  border-top: 1px solid #6b4f2855; border-bottom: 1px solid #6b4f2855;
  padding: 10px 4px; margin-bottom: 10px;
}
#hf-brief-list { font-size: 13px; line-height: 1.8; color: #cfe8ff; text-align: left; }
#hf-brief-list:empty { display: none; }
#hf-brief-list .hf-brief-obj { letter-spacing: 0.06em; }
#hf-brief-list .hf-brief-obj-done { color: #9dffb0; }

#hf-brief-keys {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 16px;
  margin: 14px 0 8px;
  font-size: 11px;
  color: #b8a88c;
  text-align: left;
}
.hf-kb {
  display: inline-block;
  min-width: 34px;
  padding: 1px 5px;
  margin-right: 5px;
  background: #2a1d10;
  border: 1px solid #6b4f28;
  color: #ffd9a0;
  text-align: center;
}
#hf-brief-foot { font-size: 11px; color: #8fa08c; letter-spacing: 0.06em; margin-bottom: 14px; }
#hf-brief-begin {
  background: #38e0ff; color: #06121a; border: none;
  padding: 10px 26px; font-family: inherit; font-weight: bold;
  letter-spacing: 0.1em; cursor: pointer;
}
#hf-brief-begin:hover { background: #7cecff; }