/* VECTOR -- dark industrial, monospace headings, built on shared/ui.css
   tokens. Three screens (#garage / #fight / #result) toggled via [hidden]. */

[hidden] { display: none !important; }

html, body { height: 100%; overflow: hidden; }

h1, h2 { margin: 0; font-weight: 600; }

.tag { display: inline-block; }

.back-link {
  position: fixed;
  top: 14px;
  left: 16px;
  z-index: 50;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim);
  background: var(--bg-panel);
  border: 1px solid var(--line);
  padding: 6px 10px;
  border-radius: 2px;
}
.back-link:hover { color: var(--accent); border-color: var(--line-hot); text-decoration: none; }

.boot-error {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #1a0b0b;
  color: var(--bad);
  padding: 48px 24px;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
}

/* -------------------------------------------------------------- garage */

#garage {
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 56px 20px 20px;
}

.garage-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto 14px;
}
.garage-header h1 {
  font-size: 20px;
  letter-spacing: 0.18em;
  color: var(--fg);
}
.garage-header h1 .tag { margin-left: 10px; color: var(--accent); }
.credits { color: var(--accent); font-size: 15px; }

.garage-body {
  flex: 1;
  min-height: 0;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 280px 220px 1.6fr 260px;
  gap: 14px;
}

.garage-col {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 12px;
  overflow-y: auto;
  min-height: 0;
}
.garage-preview-col { display: flex; flex-direction: column; gap: 10px; }

#garageCanvas {
  width: 100%;
  height: 200px;
  display: block;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: 2px;
}

.preset-row, .rank-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 8px;
}
.preset-btn, .rank-btn { font-size: 10px; padding: 6px 9px; }

.launch-row { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.meter-row { display: flex; gap: 10px; }
.meter { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.meter .tag { display: flex; justify-content: space-between; font-size: 9px; }
.bar.en > i { background: var(--en); }

.invalid-reasons { display: flex; flex-direction: column; gap: 2px; }
.invalid-reasons div { font-size: 10.5px; line-height: 1.4; }

.launch-btn { width: 100%; padding: 12px; font-size: 13px; letter-spacing: 0.14em; }

/* slot list */
.slot-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.slot-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  color: var(--fg);
  padding: 8px 10px;
  cursor: pointer;
  text-align: left;
  font-family: var(--sans);
  font-size: 12px;
  border-radius: 2px;
}
.slot-row:hover { border-color: var(--line-hot); }
.slot-row.active { border-color: var(--accent); background: var(--accent-dim); }
.slot-part-name { color: var(--fg-dim); text-align: right; }
.slot-row.active .slot-part-name { color: var(--fg); }

/* part picker */
.part-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.part-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 8px 10px;
}
.part-row:hover { border-color: var(--line-hot); }
.part-row.equipped { border-color: var(--accent); }
.part-name { font-size: 12.5px; color: var(--fg); }
.part-desc { font-size: 10.5px; color: var(--fg-faint); margin-top: 2px; }
.part-row-side { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.part-row-side .btn { padding: 6px 10px; font-size: 10px; }

/* stat panel */
.stat-panel { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.stat-row { display: flex; justify-content: space-between; font-size: 12px; padding: 2px 0; border-bottom: 1px solid var(--line); }

@media (max-width: 760px) {
  #garage { padding: 56px 12px 12px; overflow-y: auto; height: auto; min-height: 100vh; }
  .garage-body { grid-template-columns: 1fr; }
  .garage-col { overflow-y: visible; }
}

/* --------------------------------------------------------------- fight */

#fight { position: relative; width: 100vw; height: 100vh; background: #0b0d10; }
#fightCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.hud { position: absolute; inset: 0; pointer-events: none; }
.hud-top-left, .hud-top-right {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top, 0px));
  width: 240px;
  padding: 10px 12px;
  background: rgba(11, 13, 16, 0.6);
  border: 1px solid var(--line);
  border-radius: 3px;
}
.hud-top-left { left: 14px; }
.hud-top-right { right: 14px; text-align: right; }
.hud-name { font-size: 12px; letter-spacing: 0.12em; color: var(--fg); margin-bottom: 6px; }
.hud-bar { height: 9px; margin-bottom: 5px; }
.hud-bar-enemy > i { background: var(--bad); }
.hud-ammo { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 10.5px; color: var(--fg-dim); margin-top: 6px; }
.hud-ammo b { color: var(--fg); }

/* ---------------------------------------------------------- aim + lock HUD
   The aim layer is a full-bleed box centred on the canvas. Everything inside
   is positioned in CSS pixels that main.js computes from sim angles via
   renderer.projectAngle() -- no element here knows about metres or radians. */

.aim-layer { position: absolute; inset: 0; pointer-events: none; }

/* The FCS box: the reticle's play AND the lock box. Faint until a target is
   inside it, then it warms up. */
.fcs-box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(143, 180, 221, 0.22);
  border-radius: 2px;
  transition: border-color 140ms linear;
}
.fcs-box::before, .fcs-box::after {
  content: "";
  position: absolute;
  background: rgba(143, 180, 221, 0.3);
}
.fcs-box::before { left: 50%; top: -5px; width: 1px; height: 9px; }
.fcs-box::after { left: 50%; bottom: -5px; width: 1px; height: 9px; }
.fcs-box.locking { border-color: rgba(255, 176, 32, 0.5); }

/* Centre reticle. Sits at the canvas centre plus the aim offset. */
.reticle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  transition: filter 120ms linear;
}
.reticle .r-ring {
  position: absolute;
  inset: 11px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  transition: inset 90ms ease-out, border-color 120ms linear;
}
.reticle .r-bar {
  position: absolute;
  background: var(--accent);
  transition: opacity 120ms linear;
}
.reticle .r-up    { left: 50%; top: 0;    width: 1.5px; height: 7px; margin-left: -0.75px; }
.reticle .r-down  { left: 50%; bottom: 0; width: 1.5px; height: 7px; margin-left: -0.75px; }
.reticle .r-left  { top: 50%; left: 0;    height: 1.5px; width: 7px; margin-top: -0.75px; }
.reticle .r-right { top: 50%; right: 0;   height: 1.5px; width: 7px; margin-top: -0.75px; }
.reticle.bloom .r-ring { inset: 6px; }
.reticle.hard .r-ring, .reticle.hard .r-bar { border-color: var(--bad); background: var(--bad); }
.reticle.hard .r-ring { background: none; }

/* The FCS reticle. Deliberately NOT the player's reticle: a blue open diamond
   on a tether, so at a glance you can see the player's amber reticle is where
   the player put it and the fire control has drifted off to the lead point.
   Placed by main.js from player.fcsAim, the same way the reticle is placed. */
.fcs-reticle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  color: var(--en);
  opacity: 0.45;
  transition: opacity 120ms linear;
}
.fcs-reticle.live { opacity: 1; }
.fcs-reticle .fr-diamond {
  position: absolute;
  inset: 4px;
  border: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.fcs-reticle .fr-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 2px;
  margin: -1px 0 0 -1px;
  background: currentColor;
  opacity: 0;
}
.fcs-reticle.live .fr-dot { opacity: 1; }

/* The tether: a hairline from the player's reticle to the FCS reticle. Placed
   at the player's reticle, rotated toward the FCS one, width = the gap. */
.fcs-tether {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 1px;
  margin-top: -0.5px;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(74, 168, 255, 0.05), rgba(74, 168, 255, 0.55));
}

/* Classic AC lock square: corners close in as the lock builds, then the full
   frame and the four edge ticks snap on at hard lock. */
.lock-square {
  position: absolute;
  transform: translate(-50%, -50%);
  color: var(--accent);
}
.lock-square .ls-frame {
  position: absolute;
  inset: 0;
  border: 1px solid currentColor;
  opacity: 0;
  transition: opacity 90ms linear;
}
.lock-square .ls-corner {
  position: absolute;
  width: 26%;
  height: 26%;
  border: 2px solid currentColor;
}
.lock-square .ls-corner.tl { left: 0;  top: 0;    border-right: none; border-bottom: none; }
.lock-square .ls-corner.tr { right: 0; top: 0;    border-left: none;  border-bottom: none; }
.lock-square .ls-corner.bl { left: 0;  bottom: 0; border-right: none; border-top: none; }
.lock-square .ls-corner.br { right: 0; bottom: 0; border-left: none;  border-top: none; }
.lock-square .ls-tick {
  position: absolute;
  background: currentColor;
  opacity: 0;
  transition: opacity 90ms linear;
}
.lock-square .ls-tick.tt { left: 50%; top: -6px;    width: 1.5px; height: 6px; margin-left: -0.75px; }
.lock-square .ls-tick.bb { left: 50%; bottom: -6px; width: 1.5px; height: 6px; margin-left: -0.75px; }
.lock-square .ls-tick.ll { top: 50%; left: -6px;    height: 1.5px; width: 6px; margin-top: -0.75px; }
.lock-square .ls-tick.rr { top: 50%; right: -6px;   height: 1.5px; width: 6px; margin-top: -0.75px; }

.lock-square.soft { opacity: 0.75; animation: lock-blink 780ms steps(1, end) infinite; }
.lock-square.hard { color: var(--bad); }
.lock-square.hard .ls-frame, .lock-square.hard .ls-tick { opacity: 1; }
@keyframes lock-blink { 0%, 60% { opacity: 0.8; } 61%, 100% { opacity: 0.32; } }

.lock-square .ls-info {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  margin-top: 7px;
  width: 84px;
}
.lock-square .ls-ap {
  height: 3px;
  background: rgba(11, 13, 16, 0.75);
  border: 1px solid var(--line);
}
.lock-square .ls-ap > i { display: block; height: 100%; background: var(--bad); }
.lock-square .ls-meta {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
  margin-top: 2px;
}

/* Screen-edge red wash when the player eats a hit. */
.hurt-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at center,
    rgba(255, 90, 82, 0) 42%, rgba(255, 90, 82, 0.55) 100%);
  transition: opacity 90ms linear;
}

/* EN bar pulse on a quick-boost, so the cost is visible as it is spent. */
.hud-bar.flash > i { animation: en-flash 260ms ease-out; }
@keyframes en-flash {
  0% { background: #ffffff; }
  100% { background: var(--en); }
}

.click-to-pilot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 7, 9, 0.72);
  pointer-events: auto;
  cursor: pointer;
}
.ctp-box { text-align: center; }
.ctp-title { font-size: 22px; letter-spacing: 0.2em; color: var(--accent); margin-bottom: 10px; }
.ctp-sub { font-size: 11.5px; color: var(--fg-dim); margin-top: 4px; }

/* -------------------------------------------------------------- result */

#result {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}
.result-box {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 40px 52px;
  text-align: center;
  min-width: 300px;
}
.result-title { font-size: 40px; letter-spacing: 0.16em; color: var(--good); margin-bottom: 12px; }
.result-title.lose { color: var(--bad); }
.result-sub { color: var(--fg-dim); font-size: 13px; margin-bottom: 24px; }
.result-actions { display: flex; gap: 10px; justify-content: center; }