/* placeholders.css */
.asset-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: white;
  font-weight: bold;
  font-size: clamp(1.5cqh, 1.5cqw, 3cqh);
  text-align: center;
}

.background-placeholder {
  background: linear-gradient(135deg, #1c2331, #2d3b55);
}
.background-placeholder[data-placeholder-label="SCENE 1 BACKGROUND"] {
  background: linear-gradient(to bottom, #112233, #334455);
}
.background-placeholder[data-placeholder-label="SCENE 2 BACKGROUND"] {
  background: linear-gradient(to bottom, #2b3a2a, #4a634a);
}
.background-placeholder[data-placeholder-label="SCENE 3 BACKGROUND"] {
  background: linear-gradient(to bottom, #4a3820, #8b6b3e);
}

.character-placeholder {
  border: max(0.08cqw, 1px) dashed rgba(255, 255, 255, 0.8);
  border-radius: 4cqh 4cqh 2cqh 2cqh;
  background:
    radial-gradient(
      circle at 50% 18%,
      rgba(255, 255, 255, 0.28) 0 3cqh,
      transparent 3.1cqh
    ),
    linear-gradient(
      180deg,
      rgba(57, 45, 74, 0.92),
      rgba(25, 21, 34, 0.96)
    );
}

.shadow-placeholder {
  border: max(0.08cqw, 1px) dashed rgba(0, 0, 0, 0.5);
  border-radius: 4cqh 4cqh 2cqh 2cqh;
  background: #111;
  opacity: 0.8;
}

.logo-placeholder {
  border: max(0.08cqw, 1px) solid #fff;
  background-color: rgba(255, 0, 0, 0.5);
  border-radius: 1cqh;
  font-size: 1.2cqw;
}

.decoration-placeholder {
  border: max(0.08cqw, 1px) dotted #e6b948;
  background-color: rgba(230, 185, 72, 0.2);
  border-radius: 2cqh;
  color: #e6b948;
}