:root {
  --sand: #f6e7c8;
  --gold: #c9932e;
  --gold-deep: #9a6a12;
  --ink: #3b2a14;
  --uae-red: #e0262b;
  --uae-green: #00843d;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #1d2b3a;
  font-family: "Tajawal", system-ui, sans-serif;
}

.backdrop {
  position: fixed;
  inset: -40px;
  background: url("assets/bg.jpg") center / cover no-repeat;
  filter: blur(28px) brightness(0.75);
}

/* Stage keeps a fixed 16:9 ratio so every overlay stays aligned to the painting */
.stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  transform: translate(-50%, -50%);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  container-type: size;
  cursor: pointer;
}

#scene,
.fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.fx { pointer-events: none; }

/* Speech bubble — sits beside the girl's face, tail pointing at her */
.bubble {
  position: absolute;
  left: 29.5cqw;
  top: 49cqh;
  width: 36cqw;
  padding: 2.2cqh 2.2cqw;
  border-radius: 2.4cqw;
  background: rgba(255, 253, 247, 0.96);
  border: 0.22cqw solid var(--gold);
  box-shadow: 0 1.2cqh 4cqh rgba(110, 70, 10, 0.25);
  transform-origin: 0% 40%;
  transform: scale(0.2);
  opacity: 0;
  transition: transform 0.55s cubic-bezier(0.2, 1.4, 0.4, 1), opacity 0.4s ease;
}
.bubble.show { transform: scale(1); opacity: 1; }
.bubble::after {
  content: "";
  position: absolute;
  left: -2.6cqw;
  top: 8cqh;
  width: 2.8cqw;
  height: 4.4cqh;
  background: rgba(255, 253, 247, 0.96);
  clip-path: polygon(100% 0, 0 70%, 100% 100%);
}
.bubble-text {
  font-family: "Tajawal", sans-serif;
  font-weight: 800;
  font-size: 2.1cqw;
  line-height: 1.7;
  color: var(--ink);
  text-align: center;
}
.bubble-text .w {
  display: inline-block;
  opacity: 0.18;
  transform: translateY(0.6cqh);
  transition: opacity 0.25s ease, transform 0.25s ease, color 0.25s ease;
  margin-inline: 0.25cqw;
}
.bubble-text .w.on { opacity: 1; transform: none; }
.bubble-text .w.key { color: var(--uae-green); }
.bubble-text .w.key2 { color: var(--uae-red); }
.bubble-text .w.gold { color: var(--gold-deep); }

@media (prefers-reduced-motion: reduce) {
  .bubble { transition: none; }
}