/* =============================================
   NES Controller Cable + Plug
   Connects controller to NES console P1 port.

   Plug: positioned absolutely relative to viewport,
   aligned with NES gamepad port P1.
   Wire: SVG tapered path dynamically computed in cable.js.
   ============================================= */

/* ---- SVG Cable Layer ---- */
.ctrl-cable-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 750; /* in front of NES (700) but behind controller (800) */
  pointer-events: none;
}

/* ---- Plug ---- */
.ctrl-plug {
  position: absolute;
  z-index: 710;
  pointer-events: none;
}

.ctrl-plug-body {
  position: relative;
  width: 32px;
  height: 40px;
}

/* Back face — synced from Paper */
.ctrl-plug-face {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background: linear-gradient(
    to bottom,
    #454545 0%,
    #2c2c2c 9%,
    #282828 13%,
    #242424 61%,
    #252525 71%,
    #272727 88%,
    #151515 100%
  );
  border-radius: 4px;
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.08),
    inset 0 -1px 2px rgba(0, 0, 0, 0.4),
    inset 1px 0 1px rgba(255, 255, 255, 0.04),
    inset -1px 0 1px rgba(0, 0, 0, 0.3),
    0 2px 6px rgba(0, 0, 0, 0.5),
    -1px 0 4px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Vertical edge lines on each side */
.ctrl-plug-edge {
  width: 0.6px;
  height: 14px;
  background: linear-gradient(
    to right,
    #1a1a1a,
    #2a2a2a 60%
  );
  flex-shrink: 0;
}

/* Circular cable hole in center */
.ctrl-plug-hole {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(
    to bottom,
    #000 0%,
    #1c1c1c 81%,
    #2e2e2e 100%
  );
  outline: 0.2px solid #1a1a1a;
  flex-shrink: 0;
}