/* Wireframe shapes — replace with <img> when designer delivers PNGs */

.shape {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 2px dashed rgba(255, 255, 255, 0.25);
  pointer-events: none;
}

.shape-label {
  font-family: ui-monospace, 'Cascadia Code', monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  text-align: center;
  padding: 4px;
  line-height: 1.3;
  pointer-events: none;
}

.shape-rect {
  border-radius: 4px;
}

.shape-circle {
  border-radius: 50%;
}

/* Piece colors */
#piece-bg-deco-1 .shape { background: #4a5568; }
#piece-bg-deco-2 .shape { background: #2d3748; }
#piece-circle-1 .shape { background: #4a90d9; }
#piece-circle-2 .shape { background: #9b59b6; }
#piece-rect-accent .shape { background: #e85d4c; }
#piece-float-1 .shape { background: #27ae60; }
#piece-float-2 .shape { background: #e67e22; }

/* CTA letter slots — replace .slot-base / .slot-letter with <img> per designer assets */
#cta-amori .slot-base {
  background: #c9a84c;
  border: 2px dashed rgba(245, 239, 224, 0.55);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#cta-amori .slot-tag {
  font-family: ui-monospace, 'Cascadia Code', monospace;
  font-size: 8px;
  letter-spacing: 0.04em;
  color: rgba(19, 14, 6, 0.65);
  text-transform: uppercase;
  pointer-events: none;
}

#cta-amori .slot-letter {
  background: rgba(245, 239, 224, 0.92);
  border: 2px solid #c9a84c;
  border-radius: 4px;
}

#cta-amori .letter-slot[data-letter="A"] .slot-base { background: #c9a84c; }
#cta-amori .letter-slot[data-letter="M"] .slot-base { background: #b8943f; }
#cta-amori .letter-slot[data-letter="O"] .slot-base { background: #c9a84c; }
#cta-amori .letter-slot[data-letter="R"] .slot-base { background: #b8943f; }
#cta-amori .letter-slot[data-letter="I"] .slot-base { background: #c9a84c; }