/* =========================================================
   IDEATION COMPONENT
   Comes after the Define section. A 3x3 sliding puzzle drawn inside an SVG
   scene (assets/ideation/scene.svg). Behaviour: js/ideation/main.js
   (Class names are prefixed "ideation-" to avoid clashing with other components.)
   ========================================================= */

.ideation-section {
  /* sits above the fixed dots / grid-lines layers */
  position: relative;
  z-index: 1;
  overflow-x: clip;

  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* No text / image selection or dragging inside the scene */
#ideation-scene,
#ideation-scene * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.ideation-wrap {
  position: relative;           /* the title image is positioned against this box */
  width: calc(min(100%, var(--scene-max-width)) * var(--ideation-scale)); /* same visible width as empathize */
  aspect-ratio: 1280 / 1000;                             /* matches the SVG viewBox */
}

#ideation-scene {
  width: 100%;
  aspect-ratio: 1280 / 1000;                             /* matches the SVG viewBox */
}

#ideation-scene svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Images can't be grabbed; tiles (rects) still receive clicks */
#ideation-scene image {
  -webkit-user-drag: none;
  pointer-events: none;
}

.ideation-status {
  text-align: center;
  padding: 2rem;
  color: #444;
}

.ideation-status.error { color: #b00020; }

/* ---------- Puzzle tiles ---------- */
.ideation-tile {
  transition: transform 180ms ease-out;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.ideation-tile.movable { cursor: pointer; }
.ideation-tile.movable:hover { filter: brightness(1.06); }

/* ---------- Handwritten "Ideate" title (an <img>, outside the scene box so the script can't wipe it) ----------
   Position / size are % of the 1280 x 1000 scene: empty top-left corner. Same visible height as the
   Empathize title (45.5 tall, see define.css); the values already allow for this scene's drawing scale. */
.ideation-title {
  position: absolute;
  left: 298px; top: 100px;
  rotate: -25deg;
  width: 9.29%;
  height: auto;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}