/* Local, presentation-only styles for client/humanPuzzle.mjs. */
.human-puzzle {
  margin: 4px 0 2px;
  padding: 12px;
  border: 1px solid #d7e1ef;
  border-radius: 10px;
  background: #f8fbff;
  color: #1f3656;
}

.human-puzzle-head,
.human-puzzle-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.human-puzzle-head b {
  font-size: 13px;
}

.human-puzzle-head span,
.human-puzzle-actions small {
  color: #62738b;
  font-size: 12px;
  line-height: 1.45;
}

.human-puzzle-board {
  position: relative;
  isolation: isolate;
  height: 82px;
  margin: 10px 0 9px;
  overflow: hidden;
  border: 1px solid #cbd9ea;
  border-radius: 8px;
  background: linear-gradient(135deg, #e8f2ff 0%, #d9e8fa 46%, #eff6ff 100%);
}

.human-puzzle-grid {
  position: absolute;
  inset: 0;
  opacity: .52;
  background-image: linear-gradient(90deg, #ffffff80 1px, transparent 1px), linear-gradient(#ffffff80 1px, transparent 1px);
  background-size: 18px 18px;
}

.human-puzzle-board img {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.human-puzzle-hole,
.human-puzzle-piece {
  position: absolute;
  top: 25px;
  width: 29px;
  height: 29px;
  border-radius: 7px;
}

.human-puzzle-hole {
  z-index: 2;
  border: 2px dashed #6585ae;
  background: #1f4c7f22;
  box-shadow: inset 0 0 0 1px #ffffff80;
}

.human-puzzle-piece {
  z-index: 3;
  display: grid;
  place-items: center;
  border: 1px solid #1d66b8;
  background: #2879d4;
  color: #fff;
  font-size: 14px;
  box-shadow: 0 3px 8px #163f6b3d;
  transition: left .08s linear;
}

.human-slider-label {
  display: grid;
  gap: 6px;
  color: #354a67;
  font-size: 12px;
  font-weight: 600;
}

.human-slider {
  width: 100%;
  height: 18px;
  margin: 0;
  accent-color: #1768d8;
  cursor: pointer;
}

.human-slider:disabled,
.human-refresh:disabled {
  cursor: not-allowed;
  opacity: .54;
}

.human-puzzle-actions {
  margin-top: 7px;
  align-items: flex-start;
}

.human-refresh {
  flex: 0 0 auto;
  border: 1px solid #b9cce5;
  border-radius: 6px;
  padding: 5px 8px;
  background: #fff;
  color: #1a61b8;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.human-refresh:hover:not(:disabled) {
  border-color: #1768d8;
  background: #edf5ff;
}

.human-puzzle[data-human-tone="error"] {
  border-color: #ebabb4;
  background: #fff8f8;
}

.human-puzzle[data-human-tone="error"] .human-puzzle-head span,
.human-puzzle[data-human-tone="error"] .human-puzzle-actions small {
  color: #a42637;
}

.human-puzzle.is-ready .human-puzzle-board {
  border-color: #9fbdde;
}

.human-puzzle.is-verified {
  border-color: #95d3b1;
  background: #f4fcf7;
}

.human-puzzle.is-verified .human-puzzle-head span,
.human-puzzle.is-verified .human-puzzle-actions small {
  color: #18794e;
}

.human-puzzle.is-verified .human-puzzle-piece {
  border-color: #18794e;
  background: #25945e;
}

@media (max-width: 420px) {
  .human-puzzle { padding: 10px; }
  .human-puzzle-head { align-items: flex-start; }
  .human-puzzle-head span { text-align: right; }
  .human-puzzle-actions { flex-direction: column; }
}