* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #000; color: #fff; }
body { min-height: 100svh; font-family: monospace; }
main { min-height: 100svh; display: grid; place-items: center; padding: 24px; }
#intro, #song-container { width: 100%; text-align: center; }
#character { display: block; width: 96px; max-width: 50vw; height: auto; margin: 0 auto 24px; image-rendering: pixelated; }
#question p { font-size: 16px; margin: 0 0 20px; }
.choices { display: flex; justify-content: center; gap: 32px; }
.choices button { appearance: none; background: transparent; border: 0; color: white; font: inherit; font-size: 16px; padding: 8px; cursor: pointer; }
.choices button:hover, .choices button:focus-visible { text-decoration: underline; }
#tarot-card { display: block; width: 220px; max-width: 75vw; max-height: 55svh; height: auto; object-fit: contain; margin: 0 auto 20px; }
#song-title { margin: 0 0 18px; font-size: 16px; overflow-wrap: anywhere; }
#player { display: block; width: 300px; max-width: 90vw; margin: 0 auto; }
[hidden] { display: none !important; }