* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
#app { position: fixed; inset: 0; background: #000; }
canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#ui { pointer-events: none; }
#movie { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
#movie.hidden { display: none; }
#overlay { position: absolute; inset: 0; pointer-events: none; font-family: "Cormorant Garamond", "Garamond", "Georgia", "Times New Roman", serif; color: #e9dcc0; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; pointer-events: auto; background: #000; transition: opacity 0.9s ease; cursor: pointer; }
.screen.hidden { opacity: 0; pointer-events: none; }
.brand { text-align: center; letter-spacing: 0.35em; }
.brand .eyebrow, .placeholder .eyebrow { font-size: 0.75rem; letter-spacing: 0.6em; opacity: 0.55; margin-bottom: 1.2rem; }
.brand h1 { font-weight: 400; font-size: clamp(2rem, 6vw, 4.5rem); margin: 0; line-height: 1; text-shadow: 0 0 40px rgba(233, 200, 120, 0.25); }
.brand .sub { font-style: italic; letter-spacing: 0.5em; font-size: clamp(0.9rem, 2vw, 1.4rem); margin-top: 1rem; opacity: 0.75; }
.choices { display: flex; gap: 1.2rem; flex-wrap: wrap; justify-content: center; }
.choices.hidden { display: none; }
.choice { font: inherit; color: #e9dcc0; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(233, 220, 192, 0.35); padding: 1rem 1.6rem; min-width: 15rem; cursor: pointer; letter-spacing: 0.15em; text-transform: uppercase; display: flex; flex-direction: column; gap: 0.4rem; align-items: center; transition: background 0.2s, border-color 0.2s; }
.choice:hover { background: rgba(233, 220, 192, 0.12); border-color: #f0d48a; }
.choice b { font-weight: 400; font-size: 1.15rem; color: #f0d48a; }
.choice span { font-size: 0.7rem; letter-spacing: 0.2em; opacity: 0.6; text-transform: none; }
.hint { font-size: 0.85rem; letter-spacing: 0.3em; opacity: 0.6; text-transform: uppercase; animation: pulse 2.4s ease-in-out infinite; }
.hint b { color: #f0d48a; }
@keyframes pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.8; } }
.placeholder { text-align: center; }
.placeholder .big { font-size: clamp(1.2rem, 3vw, 2rem); letter-spacing: 0.2em; opacity: 0.8; margin-bottom: 1.5rem; }
#debug { position: absolute; left: 10px; top: 10px; font: 12px/1.5 monospace; color: #9f9; background: rgba(0,0,0,0.5); padding: 6px 8px; white-space: pre; pointer-events: none; }
#debug.hidden { display: none; }