/* ═══════════════════════════════════════════════════════════
   SCENE 10 — The Question
═══════════════════════════════════════════════════════════ */

#scene-10 {
  background: radial-gradient(ellipse at center, #1a0028 0%, #05000a 70%);
  z-index: 48;
}

body.scene10-active #stage #scene-10 {
  animation: s10FadeIn 1.0s both;
  pointer-events: auto;
}
@keyframes s10FadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Question text ──────────────────────────────────────── */
#s10-question {
  position: absolute;
  left: 50%;
  top: 36%;
  transform: translate(-50%, -50%);
  width: 88%;
  max-width: 680px;
  text-align: center;
  font-family: 'Georgia', serif;
  font-size: 30px;
  font-style: italic;
  color: #f8eef5;
  line-height: 1.5;
  margin: 0;
  text-shadow: 0 0 30px rgba(200, 80, 150, 0.4);
}

#s10-question.typing::after {
  content: '|';
  color: #f8eef5;
  animation: s10Blink 0.65s step-end infinite;
}
@keyframes s10Blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ── Button group ───────────────────────────────────────── */
#s10-btn-group {
  position: absolute;
  left: 50%;
  top: 68%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 72px;
  /* scale() on children is visual-only; this container stays stable */
}

/* ── Shared button base ─────────────────────────────────── */
.s10-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 52px;
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 36px;
  letter-spacing: 3px;
  border-radius: 8px;
  cursor: pointer;
  opacity: 0;
  transition:
    transform  0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity    0.5s ease;
  white-space: nowrap;
}
.s10-btn.visible { opacity: 1; }

/* ── Yes button ─────────────────────────────────────────── */
#s10-yes-btn {
  background: linear-gradient(135deg, #c62828 0%, #e53935 60%, #f06292 100%);
  color: #fff;
  border: 3px solid #000;
  box-shadow: 5px 5px 0 #000,
              0 0 20px rgba(229, 57, 53, 0.35);
  transform-origin: center;
}
#s10-yes-btn:hover {
  box-shadow: 7px 7px 0 #000, 0 0 30px rgba(229,57,53,0.5);
}
#s10-yes-btn:active {
  box-shadow: 2px 2px 0 #000;
}

/* Pulsing winner state — activates when No disappears */
#s10-yes-btn.s10-yes-winner {
  animation: s10YesWinner 1.0s ease-in-out infinite;
}
@keyframes s10YesWinner {
  0%, 100% { box-shadow: 5px 5px 0 #000, 0 0 20px rgba(229,57,53,0.4); }
  50%       { box-shadow: 5px 5px 0 #000, 0 0 50px rgba(240,98,146,0.9); }
}

/* ── No button ──────────────────────────────────────────── */
#s10-no-btn {
  background: rgba(60, 55, 65, 0.85);
  color: rgba(200, 190, 210, 0.85);
  border: 2px solid rgba(120, 110, 130, 0.5);
  box-shadow: 3px 3px 0 rgba(0,0,0,0.6);
  transform-origin: center;
  transition:
    transform  0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity    0.4s ease;
}
#s10-no-btn:hover {
  background: rgba(80, 70, 85, 0.9);
}

/* ── Portrait adjustments ───────────────────────────────── */
@media (orientation: portrait) {
  #s10-question   { font-size: 24px; top: 32%; }
  #s10-btn-group  { top: 62%; gap: 44px; }
  .s10-btn        { font-size: 30px; padding: 12px 36px; }
}