/* Emotibears jigsaw — self-contained styles. Brand tokens from Brand Guide v1.0 */
.eb-jigsaw {
  /* Uses the site's canonical tokens from styles.css (CLAUDE.md §11), with fallbacks so the
     component still works on a page without styles.css. */
  --eb-cream: var(--cream, #FFF8EF);
  --eb-charcoal: var(--ink, #3A342E);
  --eb-heading: var(--navy, #3A342E);
  --eb-btn: var(--coral-btn, #CE491A);           /* AA with white text */
  --eb-btn-shadow: var(--coral-btn-shadow, #A93C15);
  --eb-sky: #4FB6E0;
  --eb-sunshine: #FFC845;
  --eb-leaf: #78C08A;
  --eb-berry: #EF7CA0;
  --eb-plum: #9C87C9;
  --eb-board: var(--cream-2, #F3E7D6);
  --eb-line: #E2D2BC;
  font-family: "Nunito Sans", system-ui, sans-serif;
  color: var(--eb-charcoal);
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 16px 32px;
  box-sizing: border-box;
}
.eb-jigsaw *, .eb-jigsaw *::before, .eb-jigsaw *::after { box-sizing: border-box; }

.eb-jigsaw__title {
  font-family: "Baloo 2", "Nunito Sans", system-ui, sans-serif;
  font-weight: 700;
  color: var(--eb-heading);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: 1.1;
  margin: 0 0 4px;
  text-align: center;
}
.eb-jigsaw__intro { text-align: center; margin: 0 0 16px; font-size: 1.05rem; }

.eb-jigsaw__controls {
  display: flex; flex-wrap: wrap; gap: 10px 16px;
  align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.eb-jigsaw__group { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center; }
.eb-jigsaw__label { font-weight: 700; margin-right: 2px; }

.eb-jigsaw button {
  font: inherit; font-weight: 700;
  min-height: 44px; min-width: 44px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 2px solid var(--eb-charcoal);
  background: #fff; color: var(--eb-charcoal);
  cursor: pointer;
}
.eb-jigsaw button:hover { background: var(--eb-board); }
.eb-jigsaw button:focus-visible,
.eb-jigsaw canvas:focus-visible,
.eb-jigsaw input:focus-visible + span {
  outline: 3px solid var(--eb-sky); outline-offset: 3px;
}
/* Coral is CTA-only per the brand guide: Scramble is the primary action */
.eb-jigsaw .eb-jigsaw__primary { background: var(--eb-btn); border-color: var(--eb-btn); color: #fff; box-shadow: 0 4px 0 var(--eb-btn-shadow); }
.eb-jigsaw .eb-jigsaw__primary:hover { background: var(--eb-btn); transform: translateY(-1px); }
.eb-jigsaw .eb-jigsaw__level[aria-pressed="true"] { background: var(--eb-sunshine); border-color: var(--eb-charcoal); }

.eb-jigsaw__toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 700; min-height: 44px; }
.eb-jigsaw__toggle input { width: 22px; height: 22px; accent-color: var(--eb-leaf); }

.eb-jigsaw__status {
  text-align: center; font-weight: 700; margin: 0 0 10px; min-height: 1.5em;
}

.eb-jigsaw__stage {
  position: relative;
  width: 100%;
  touch-action: none;
  user-select: none; -webkit-user-select: none;
  border-radius: 20px;
  background: var(--eb-cream);
  border: 2px dashed var(--eb-line);
  overflow: hidden;
}
.eb-jigsaw__board {
  position: absolute;
  background: var(--eb-board);
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--eb-line);
}
.eb-jigsaw__ghost {
  position: absolute; inset: 0; max-width: none;
  width: 100%; height: 100%;
  object-fit: fill;
  opacity: 0.22;
  pointer-events: none;
  border-radius: 6px;
  transition: opacity .2s;
}
.eb-jigsaw__ghost[hidden] { display: block; opacity: 0; }
.eb-jigsaw__tray-label {
  position: absolute; left: 0; right: 0;
  text-align: center; font-weight: 700; opacity: .55; pointer-events: none;
}
.eb-jigsaw__piece {
  position: absolute; left: 0; top: 0;
  max-width: none !important; /* site-wide img/canvas{max-width:100%} would shrink edge pieces */
  pointer-events: none; /* hit-testing is done on the real piece shape */
  border-radius: 4px;
}
.eb-jigsaw__piece.is-dragging { filter: drop-shadow(0 8px 10px rgba(58,52,46,.35)); }
.eb-jigsaw__piece.is-loose { filter: drop-shadow(0 2px 3px rgba(58,52,46,.3)); }
.eb-jigsaw__piece.is-selected { filter: drop-shadow(0 0 0 var(--eb-sky)) drop-shadow(0 0 6px var(--eb-sky)) drop-shadow(0 0 3px var(--eb-sky)); }

.eb-jigsaw__slots { position: absolute; inset: 0; pointer-events: none; }
.eb-jigsaw__slot {
  position: absolute; padding: 0; margin: 0; border: 0;
  min-width: 0 !important; min-height: 0 !important;
  background: transparent !important; border-radius: 0 !important;
  opacity: 0; pointer-events: none;
}
.eb-jigsaw__slot:focus-visible { opacity: 1; outline: 3px solid var(--eb-sky); outline-offset: -3px; }

.eb-jigsaw__win {
  position: absolute; left: 50%; top: 40%;
  transform: translate(-50%, -50%);
  background: #fff; border: 3px solid var(--eb-sunshine);
  border-radius: 24px; padding: 18px 26px;
  text-align: center; box-shadow: 0 10px 30px rgba(58,52,46,.25);
  z-index: 9999; max-width: 90%;
}
.eb-jigsaw__win h3 { color: var(--eb-heading); font-family: "Baloo 2", "Nunito Sans", sans-serif; font-size: 1.8rem; margin: 0 0 6px; }
.eb-jigsaw__win p { margin: 0 0 12px; }
.eb-jigsaw__win[hidden] { display: none; }

.eb-jigsaw__confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 9998; }
.eb-jigsaw__confetti i {
  position: absolute; top: -12px; width: 10px; height: 14px; border-radius: 3px;
  animation: eb-fall 2.4s ease-in forwards;
}
@keyframes eb-fall { to { transform: translateY(110vh) rotate(540deg); } }

.eb-jigsaw__help { font-size: .95rem; text-align: center; margin-top: 12px; }
.eb-jigsaw__error { padding: 24px; text-align: center; font-weight: 700; }

.eb-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .eb-jigsaw__confetti { display: none; }
  .eb-jigsaw__ghost { transition: none; }
}