/* Rio Roofers puzzle CAPTCHA */
.rio-puzzle-captcha {
  --rio-track-h: 52px;
  --rio-piece: 46px;
  --rio-brand: #0d6efd;
  --rio-ok: #198754;
  user-select: none;
  -webkit-user-select: none;
}
.rio-puzzle-board {
  background: #f4f7fb;
  border: 1px solid #d7e0ec;
  border-radius: 12px;
  padding: 14px 12px 10px;
}
.rio-puzzle-track {
  position: relative;
  height: var(--rio-track-h);
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(13,110,253,0.06), rgba(13,110,253,0.02)),
    repeating-linear-gradient(
      45deg,
      #e9eef5,
      #e9eef5 8px,
      #f7fafc 8px,
      #f7fafc 16px
    );
  border: 1px solid #c9d6e5;
  overflow: hidden;
}
.rio-puzzle-slot {
  position: absolute;
  top: 3px;
  width: var(--rio-piece);
  height: calc(var(--rio-track-h) - 6px);
  transform: translateX(-50%);
  border-radius: 10px;
  border: 2px dashed rgba(13, 110, 253, 0.55);
  background: rgba(13, 110, 253, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
  pointer-events: none;
}
.rio-puzzle-piece {
  position: absolute;
  top: 3px;
  left: 0;
  width: var(--rio-piece);
  height: calc(var(--rio-track-h) - 6px);
  border-radius: 10px;
  background: linear-gradient(180deg, #3d8bfd, #0d6efd);
  box-shadow: 0 4px 12px rgba(13,110,253,0.35);
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  z-index: 2;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.rio-puzzle-piece:active {
  cursor: grabbing;
}
.rio-puzzle-piece.is-locked {
  background: linear-gradient(180deg, #2f9e66, #198754);
  box-shadow: 0 4px 14px rgba(25,135,84,0.4);
  cursor: default;
}
.rio-puzzle-knob {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.08);
  position: relative;
}
.rio-puzzle-knob::before,
.rio-puzzle-knob::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 6px;
  height: 2px;
  background: #0d6efd;
  transform: translateY(-50%);
}
.rio-puzzle-knob::before { left: 3px; }
.rio-puzzle-knob::after { right: 3px; }
.rio-puzzle-piece.is-locked .rio-puzzle-knob::before,
.rio-puzzle-piece.is-locked .rio-puzzle-knob::after {
  background: #198754;
}
.rio-puzzle-status.is-ok {
  color: #198754 !important;
  font-weight: 600;
}
.rio-puzzle-status.is-bad {
  color: #dc3545 !important;
  font-weight: 600;
}