/* ============================================================================
   build.css — BUILD MODE interface (ui/buildUI.js).
   Soviet constructivist: red/black/gold, uppercase, letter-spaced, sharp
   corners. Root lives inside #ui; everything is pointer-events:none (the
   pointer stays locked — radial selection is driven by look deltas).
   ============================================================================ */

#build-ui { position: fixed; inset: 0; pointer-events: none; z-index: 20; }

/* ---- 9-plan radial (hold Q) ---- */
#build-radial { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }

#build-radial-hub {
  position: absolute; left: -96px; top: -58px; width: 192px; min-height: 84px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 8px 10px; box-sizing: border-box;
  background: rgba(12, 10, 8, 0.94); border: 3px solid var(--gold);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.6);
  color: var(--gold); font-size: var(--fs-xs); font-weight: bold;
  letter-spacing: 0.12em; line-height: 1.5; text-transform: uppercase;
  border-radius: 0;
}

.build-slot {
  position: absolute; left: 0; top: 0; width: 88px; height: 96px;
  margin: -48px 0 0 -44px;
  transform: rotate(var(--a)) translateY(-185px) rotate(calc(var(--a) * -1));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 4px 2px; box-sizing: border-box;
  background: rgba(12, 10, 8, 0.92); border: 3px solid var(--red);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.6);
  color: var(--paper); text-transform: uppercase; letter-spacing: 0.08em;
  border-radius: 0;
}
.build-slot canvas { width: 40px; height: 40px; }
.build-slot .bs-name { font-size: var(--fs-xs); font-weight: bold; }
.build-slot .bs-cost { font-size: 10px; color: var(--gold); letter-spacing: 0.1em; }
.build-slot.sel { border-color: var(--gold); background: var(--red); color: #fff; }
.build-slot.armed { outline: 2px solid var(--gold); outline-offset: -6px; }
.build-slot.disabled { opacity: 0.35; border-color: var(--red-dark); }
.build-slot.disabled .bs-cost { color: var(--red); }

/* ---- placement reticle (replaces the hidden HUD crosshair) ---- */
#build-reticle {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  text-align: center;
}
#build-reticle .br-frame {
  width: 14px; height: 14px; margin: 0 auto;
  border: 2px solid var(--paper); box-sizing: border-box; border-radius: 0;
}
#build-reticle.ok .br-frame { border-color: #7fd45a; box-shadow: 0 0 7px rgba(127, 212, 90, 0.85); }
#build-reticle.bad .br-frame { border-color: var(--red); box-shadow: 0 0 7px rgba(192, 32, 32, 0.85); }
#build-reticle .br-label {
  margin-top: 12px; font-size: var(--fs-sm); font-weight: bold; letter-spacing: 0.14em;
  color: var(--paper); text-shadow: 2px 2px 0 #000; text-transform: uppercase;
  white-space: nowrap;
}
#build-reticle .br-sub {
  margin-top: 2px; font-size: var(--fs-xs); letter-spacing: 0.12em;
  color: var(--gold); text-shadow: 2px 2px 0 #000; text-transform: uppercase;
  white-space: nowrap;
}
#build-reticle.bad .br-sub { color: var(--red); }

/* ---- scrap progress ---- */
#build-scrap {
  position: absolute; left: 50%; top: 57%; transform: translateX(-50%);
  width: 230px; text-align: center;
}
#build-scrap .bs-label {
  font-size: var(--fs-xs); font-weight: bold; letter-spacing: 0.12em; color: var(--paper);
  text-shadow: 2px 2px 0 #000; text-transform: uppercase; margin-bottom: 4px;
}
#build-scrap .bs-track {
  height: 10px; background: rgba(12, 10, 8, 0.9);
  border: 2px solid var(--red); border-radius: 0;
}
#build-scrap .bs-fill { height: 100%; width: 0; background: var(--gold); }

/* ---- tier chip ---- */
#build-tier {
  position: absolute; left: 50%; bottom: 66px; transform: translateX(-50%);
  padding: 4px 14px; background: rgba(12, 10, 8, 0.9);
  border: 2px solid var(--gold); border-radius: 0;
  color: var(--gold); font-size: var(--fs-xs); font-weight: bold; letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---- controls strip ---- */
#build-help {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
  padding: 6px 18px; background: rgba(12, 10, 8, 0.85);
  border: 2px solid var(--red); border-radius: 0;
  color: var(--paper); font-size: var(--fs-xs); font-weight: bold; letter-spacing: 0.14em;
  text-transform: uppercase; white-space: nowrap;
}