/* ---------- Penlight ---------- */
.penlight {
  position: absolute;
  width: 32px;
  height: 160px;
  left: 0;
  top: 0;
  transform: translate(-50%, -75%);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 6px 12px hsl(var(--shadow-color) / 0.28));
  transition: left 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), top 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.2s;
  z-index: 60;
}

/* Extended invisible touch hit target for effortless mobile interaction */
.penlight::before {
  content: "";
  position: absolute;
  top: -18px;
  bottom: -18px;
  left: -22px;
  right: -22px;
  border-radius: 26px;
  pointer-events: auto;
}

.penlight.dragging {
  cursor: grabbing;
  filter: drop-shadow(0 16px 28px hsl(var(--shadow-color) / 0.45));
  transform: translate(-50%, -75%) scale(1.08);
}

/* Docked State: scales down cleanly and centers squarely inside the circular dock ring */
.penlight.is-docked {
  transform: translate(-50%, -50%) scale(0.58);
  filter: drop-shadow(0 3px 8px hsl(var(--shadow-color) / 0.22));
}

.penlight.is-docked:hover {
  filter: drop-shadow(0 6px 14px hsl(var(--shadow-color) / 0.35));
  transform: translate(-50%, -50%) scale(0.64);
}

@media (max-width: 640px) {
  .penlight {
    width: 28px;
    height: 136px;
  }
  .penlight::before {
    top: -24px;
    bottom: -24px;
    left: -26px;
    right: -26px;
  }
}

#penlightIcon {
  width: 100%;
  height: 100%;
  overflow: visible;
  transition: transform 260ms ease;
  transform-origin: 50% 75%;
  pointer-events: none;
}