:root { --bg: #2b1c13; --card: #f4dfb8; --ink: #2e1f2b; --gilt: #eab53b; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--card); font: 17px/1.45 "Avenir Next", "Segoe UI", system-ui, sans-serif; padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) 32px max(16px, env(safe-area-inset-left, 0px)); }
main { max-width: 1100px; margin: 0 auto; display: grid; gap: 14px; justify-items: center; text-align: center; padding-top: 32px; }
h1 { margin: 0; font: 72px/1 "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif; color: var(--gilt); text-shadow: 5px 5px 0 #000; }
p { margin: 0; max-width: 60ch; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; width: 100%; margin-top: 12px; }
.choices a { display: grid; gap: 6px; text-decoration: none; color: var(--ink); background: var(--card); border: 3px solid #000; border-radius: 14px; box-shadow: 6px 6px 0 #000; overflow: hidden; padding-bottom: 14px; }
.choices img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; display: block; border-bottom: 3px solid #000; }
.choices strong { font: 26px/1 "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif; }
.choices span { padding: 0 14px; }
.choices a:hover, .choices a:focus-visible { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 #000; outline: none; }