/* ============================================================
   HELIOCASTLE — MOCKUP — board
   Used by a card with class "mock mock-board".
   ============================================================ */

/* ---------- mock: embedded / electronics ---------- */
.mock-board { background: radial-gradient(80% 70% at 45% 20%, #0c1013, #06080a 78%); }
.board {
  position: absolute;
  top: 16%; left: 12%; right: 12%; bottom: 20%;
  border-radius: 6px;
  background: linear-gradient(150deg, #10161a, #0a0e11);
  border: 1px solid rgb(var(--accent-rgb) / 0.16);
  box-shadow: 0 24px 50px rgb(var(--shadow-rgb) / calc(0.65 * var(--shadow-a)));
}
.board-chip {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 34%; height: 34%;
  border-radius: 3px;
  background: linear-gradient(150deg, #1c2228, #0f1316);
  border: 1px solid rgb(var(--ink-rgb) / 0.12);
}
.board-chip::after {
  content: "";
  position: absolute;
  inset: 26%;
  border: 1px solid rgb(var(--accent-rgb) / 0.45);
  border-radius: 2px;
}
.board-trace {
  position: absolute;
  background: rgb(var(--accent-rgb) / 0.35);
}
.board-trace:nth-child(2) { left: 8%; top: 30%; width: 26%; height: 2px; }
.board-trace:nth-child(3) { left: 8%; top: 62%; width: 26%; height: 2px; }
.board-trace:nth-child(4) { right: 8%; top: 40%; width: 26%; height: 2px; }
.board-trace:nth-child(5) { right: 8%; top: 70%; width: 26%; height: 2px; }
.board-led {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px rgb(var(--accent-rgb) / 0.85);
  animation: led-pulse 2s ease-in-out infinite;
}
.board-led:nth-of-type(1) { left: 10%; top: 14%; }
.board-led:nth-of-type(2) { right: 10%; top: 14%; animation-delay: .4s; }
.board-led:nth-of-type(3) { left: 10%; bottom: 12%; animation-delay: .8s; }

/* ---------- mock: monitoring dashboard ---------- */