html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #0a0e1a; }
#app { position: relative; width: 100%; height: 100%; font-family: Georgia, 'Times New Roman', serif; color: #f5ecd7; }
#scene-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.9s ease; }
#scene-img.show { opacity: 1; }
#scene-title { position: absolute; top: 4%; left: 0; right: 0; text-align: center; font-size: clamp(20px, 3.4vw, 40px); letter-spacing: 0.08em; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85); opacity: 0; transition: opacity 0.9s ease; pointer-events: none; }
#scene-title.show { opacity: 1; }
#choices { position: absolute; bottom: 5%; left: 0; right: 0; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; padding: 0 4%; opacity: 0; transition: opacity 0.6s ease; pointer-events: none; }
#choices.show { opacity: 1; pointer-events: auto; }
.choice { font: inherit; font-size: clamp(15px, 1.8vw, 20px); padding: 12px 22px; border-radius: 999px; border: 1px solid rgba(245, 236, 215, 0.55); background: rgba(10, 14, 26, 0.55); color: #f5ecd7; cursor: pointer; backdrop-filter: blur(4px); transition: background 0.25s, transform 0.25s; }
.choice:hover { background: rgba(245, 236, 215, 0.18); transform: translateY(-2px); }
#trans { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s ease; pointer-events: none; }
#trans.show { opacity: 1; }
.card { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; background: radial-gradient(ellipse at center, rgba(10, 14, 26, 0.3), rgba(10, 14, 26, 0.88)); opacity: 0; pointer-events: none; transition: opacity 0.8s ease; padding: 6%; }
.card.show { opacity: 1; pointer-events: auto; }
.card h1 { font-size: clamp(28px, 5vw, 56px); margin: 0; letter-spacing: 0.06em; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.9); }
.card h2 { font-size: clamp(24px, 4vw, 44px); margin: 0; letter-spacing: 0.12em; }
.card p { font-size: clamp(15px, 2vw, 20px); margin: 0; max-width: 40em; color: #d9cfb4; }
.card button { font: inherit; font-size: clamp(16px, 2vw, 22px); padding: 14px 30px; border-radius: 999px; border: 1px solid rgba(245, 236, 215, 0.6); background: rgba(245, 236, 215, 0.12); color: #f5ecd7; cursor: pointer; transition: background 0.25s; }
.card button:hover { background: rgba(245, 236, 215, 0.25); }