/* ============================================================
   DXL HUD — WARM ANALOG STYLE ONLY (NO LAYOUT)
   ============================================================ */

/* HUD deck visual theme */
.dxl-hud-deck {
  background: linear-gradient(to bottom, #3a2a24, #2a1c17);
  border-radius: 10px;
  border: 2px solid #7b4f3c;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.45), 0 0 12px rgba(0,0,0,0.35);
}

/* HUD labels */
.dxl-hud-label {
  font-size: 0.75rem;
  color: #c8b090;
  opacity: 0.85;
}

.dxl-hud-value {
  font-size: 0.85rem;
  color: #f3e7d2;
  font-weight: 600;
}

/* HUD flash animation */
.dxl-hud-deck.dxl-hud-flash {
  box-shadow: 0 0 18px rgba(123,79,60,0.85);
  animation: dxl-hud-flash 0.25s ease-out;
}

@keyframes dxl-hud-flash {
  0%   { box-shadow: 0 0 0 rgba(123,79,60,0.0); }
  50%  { box-shadow: 0 0 18px rgba(123,79,60,0.85); }
  100% { box-shadow: 0 0 0 rgba(123,79,60,0.0); }
}

/* FX intensity meter bar */
.dxl-hud-fx-meter {
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
}

.dxl-hud-fx-meter-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #7b4f3c, #d7c2a3);
  transition: width 0.15s ease-out;
}

/* Loop active indicator */
.dxl-hud-loop-active {
  color: #cfe8c0;
  text-shadow: 0 0 6px rgba(123,160,120,0.6);
}

/* FX active indicator */
.dxl-hud-fx-active {
  color: #d7c2a3;
  text-shadow: 0 0 6px rgba(123,79,60,0.8);
}