/* ==========================================
   PURE CSS X-RAY & WIREFRAME INSPECTOR MODE
   Displays underlying CSS vector bounds & shapes
   ========================================== */

body.wireframe-mode * {
  transition: all 0.2s ease !important;
}

body.wireframe-mode #scene-viewport {
  background: #030712 !important;
}

body.wireframe-mode .scene-bg,
body.wireframe-mode .overhead-spotlight {
  opacity: 0.15 !important;
}

/* Vector Line Highlights on Artwork Nodes */
body.wireframe-mode .ramen-bowl-wrapper *,
body.wireframe-mode .ramen-bowl-wrapper *::before,
body.wireframe-mode .ramen-bowl-wrapper *::after {
  outline: 1px solid rgba(0, 240, 255, 0.7) !important;
  box-shadow: inset 0 0 8px rgba(0, 240, 255, 0.15) !important;
}

/* Color Coded Outlines by Element Type */
body.wireframe-mode .chashu-slice {
  outline-color: #ff3377 !important;
  background: rgba(255, 51, 119, 0.15) !important;
}

body.wireframe-mode .ramen-egg {
  outline-color: #ffcc00 !important;
  background: rgba(255, 204, 0, 0.15) !important;
}

body.wireframe-mode .narutomaki {
  outline-color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.15) !important;
}

body.wireframe-mode .nori-sheet {
  outline-color: #22c55e !important;
  background: rgba(34, 197, 94, 0.15) !important;
}

body.wireframe-mode .scallion-ring {
  outline-color: #a855f7 !important;
}

body.wireframe-mode .steam-cloud {
  outline: 1px dashed rgba(255, 255, 255, 0.5) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}