/* Snack Quests jigsaw puzzle module styles. Pair with puzzle.js. */
.sqp {
  --sqp-plum: #411D4B;
  --sqp-purple: #77398E;
  --sqp-aqua: #93CCD3;
  --sqp-yellow: #E3DB49;
  --sqp-heading-font: 'Bebas Neue', 'Oswald', system-ui, sans-serif;
  --sqp-body-font: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--sqp-body-font);
  color: #fff;
}
.sqp canvas { display: block; }

.sqp-board {
  position: absolute;
  background: rgba(255, 255, 255, 0.06);
  outline: 2px solid rgba(147, 204, 211, 0.45);
  box-shadow: inset 0 0 0 1px rgba(65, 29, 75, 0.6), 0 6px 18px rgba(20, 6, 26, 0.35);
  transition: box-shadow 0.5s ease, outline-color 0.5s ease;
}
.sqp-board canvas { position: absolute; left: 0; top: 0; pointer-events: none; }
.sqp-ghost-lines { opacity: 0.22; }

.sqp-tray {
  position: absolute;
  background: rgba(119, 57, 142, 0.32);
  border: 1px solid rgba(147, 204, 211, 0.22);
  border-radius: 6px;
  box-sizing: border-box;
}
.sqp-tray-label {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px;
  box-sizing: border-box;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--sqp-aqua);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
}
.sqp[data-locked]:not([data-locked="0"]) .sqp-tray-text { color: var(--sqp-yellow); }
.sqp-tray-text { overflow: hidden; text-overflow: ellipsis; }
.sqp-tray-count { opacity: 0.85; font-variant-numeric: tabular-nums; }

.sqp-slots, .sqp-pieces, .sqp-fx { position: absolute; inset: 0; pointer-events: none; }
.sqp-lock-slot { position: absolute; left: 0; top: 0; opacity: 0.9; }

.sqp-piece { position: absolute; left: 0; top: 0; will-change: transform; }
.sqp-piece-canvas {
  transition: transform 0.16s ease-out, filter 0.16s ease-out;
  filter: drop-shadow(0 2px 2px rgba(20, 6, 26, 0.55));
}
.sqp-piece.sqp-dragging .sqp-piece-canvas {
  filter: drop-shadow(0 10px 10px rgba(20, 6, 26, 0.5)) brightness(1.05);
}
.sqp-piece.sqp-placed .sqp-piece-canvas { filter: none; }

.sqp-snap { animation: sqp-snap 0.36s ease-out; }
@keyframes sqp-snap {
  0% { transform: scale(1.1); filter: brightness(1.45); }
  55% { transform: scale(0.97); filter: brightness(1.15); }
  100% { transform: scale(1); filter: brightness(1); }
}
.sqp-pop { animation: sqp-pop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
@keyframes sqp-pop {
  0% { transform: scale(0.25); opacity: 0; }
  60% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.sqp-ring {
  position: absolute;
  border: 3px solid var(--sqp-yellow);
  border-radius: 50%;
  box-sizing: border-box;
  animation: sqp-ring 0.55s ease-out forwards;
}
@keyframes sqp-ring {
  0% { transform: scale(0.35); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}

.sqp-reveal { position: absolute; z-index: 500; opacity: 0; transition: opacity 0.7s ease 0.15s; pointer-events: none; }
.sqp-complete .sqp-reveal { opacity: 1; }
.sqp-complete .sqp-board {
  outline-color: var(--sqp-yellow);
  box-shadow: 0 0 0 4px rgba(227, 219, 73, 0.35), 0 0 28px rgba(227, 219, 73, 0.45);
}
.sqp-confetti { position: absolute; left: 0; top: 0; }

.sqp-banner {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
}
.sqp-banner-text {
  font-family: var(--sqp-heading-font);
  font-size: clamp(34px, 7vmin, 64px);
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--sqp-yellow);
  background: var(--sqp-plum);
  border: 3px solid var(--sqp-yellow);
  padding: 0.22em 0.5em 0.12em;
  text-align: center;
  box-shadow: 0 8px 24px rgba(20, 6, 26, 0.5);
  transform: scale(0.6);
}
.sqp-banner.sqp-show { opacity: 1; transition: opacity 0.3s ease; }
.sqp-banner.sqp-show .sqp-banner-text { animation: sqp-pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3) forwards; transform: scale(1); }

.sqp-msg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--sqp-aqua);
}

@media (prefers-reduced-motion: reduce) {
  .sqp-snap, .sqp-pop, .sqp-ring, .sqp-banner.sqp-show .sqp-banner-text { animation-duration: 0.01s; }
  .sqp-piece-canvas, .sqp-reveal { transition-duration: 0.01s; }
}