/* ui/test-range/build-crafting-overlay.css — guided Build-crafting lesson panel.
 *
 * Anchored side panel (bottom-left), NOT a full-screen modal: it overlays live
 * FPS combat, so the container is pointer-events:none (the crosshair/aim are
 * never captured) and only the Next / Skip buttons opt into pointer-events:auto.
 *
 * Inherits the mission-control look (Courier New, uppercase tracking, amber
 * #ffb000 / green #6dffa0 good / cyan #cfe6ff neutral). Reuses .fx-panel chrome.
 */

.bcp-overlay {
  position: fixed;
  left: 14px;
  bottom: 96px; /* clear the bottom-left vitals cluster */
  z-index: 1150; /* below full-screen overlays (1200+), above the run HUD */
  display: none;
  pointer-events: none; /* click-through container — never block aim/fire */
}
.bcp-overlay.bcp-visible { display: block; }

.bcp-panel {
  width: 300px;
  max-width: calc(100vw - 28px);
  padding: 14px 14px 12px;
  background: rgba(8, 12, 22, 0.92);
  border: 1px solid rgba(255, 176, 0, 0.45);
  color: #e8edf7;
  font-family: 'Courier New', monospace;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.45);
  transition: opacity 160ms;
}

/* ── Header: step counter + title ─────────────────────────────────────────── */
.bcp-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.bcp-counter {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(232, 237, 247, 0.45);
  white-space: nowrap;
}
.bcp-title {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffb000;
  line-height: 1.25;
}

/* ── Progress pips ────────────────────────────────────────────────────────── */
.bcp-pips {
  display: flex;
  gap: 5px;
  margin-bottom: 10px;
}
.bcp-pip {
  flex: 1 1 auto;
  height: 3px;
  background: rgba(232, 237, 247, 0.16);
  transition: background 140ms;
}
.bcp-pip-done { background: rgba(109, 255, 160, 0.55); }
.bcp-pip-active { background: #ffb000; }

/* ── Body copy ────────────────────────────────────────────────────────────── */
.bcp-body {
  margin: 0 0 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(232, 237, 247, 0.82);
  /* keep a stable height so the panel doesn't jump as steps change */
  min-height: 3.4em;
}

/* ── Live status / hint line ──────────────────────────────────────────────── */
.bcp-status {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #cfe6ff;
  min-height: 14px;
  margin-bottom: 10px;
  line-height: 1.35;
}
.bcp-status-good {
  color: #6dffa0;
  font-weight: 700;
}

/* ── Buttons — the ONLY interactive surface ───────────────────────────────── */
.bcp-buttons {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bcp-link,
.bcp-cta {
  pointer-events: auto; /* re-enable input only on the controls */
  cursor: pointer;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  transition: background 120ms, color 120ms, transform 120ms;
}
.bcp-link {
  font-size: 10px;
  color: rgba(232, 237, 247, 0.55);
  background: transparent;
  border: 1px solid rgba(232, 237, 247, 0.2);
  padding: 7px 10px;
}
.bcp-link:hover { color: #e8edf7; border-color: rgba(232, 237, 247, 0.45); }
.bcp-cta {
  font-size: 11px;
  color: #ffb000;
  background: rgba(255, 176, 0, 0.08);
  border: 1px solid rgba(255, 176, 0, 0.5);
  padding: 8px 14px;
}
.bcp-cta:hover { background: rgba(255, 176, 0, 0.2); }
.bcp-cta:active { transform: scale(0.98); }

/* Controller/keyboard hint under the buttons (d-pad ◀ skip / ▶ next). */
.bcp-padhint {
  margin-top: 8px;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(207, 230, 255, 0.5);
  text-align: center;
}

/* ── Minimized (recap free-play) state ────────────────────────────────────── */
.bcp-panel.bcp-min .bcp-pips,
.bcp-panel.bcp-min .bcp-body,
.bcp-panel.bcp-min .bcp-status,
.bcp-panel.bcp-min .bcp-link,
.bcp-panel.bcp-min .bcp-padhint {
  display: none;
}
.bcp-panel.bcp-min { width: auto; }
.bcp-panel.bcp-min .bcp-head { margin-bottom: 6px; }

/* ── Mobile: narrow the panel, keep it clear of touch controls ────────────── */
@media (max-width: 720px) {
  .bcp-overlay {
    left: 10px;
    bottom: 120px;
  }
  .bcp-panel {
    width: 240px;
    padding: 11px 11px 10px;
  }
  .bcp-body { font-size: 11.5px; min-height: 3.6em; }
}