* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; min-height: 100%; overflow-x: hidden; background: #050916; }
body { color: #f7f1df; font-family: Arial, Helvetica, sans-serif; }
.hero { position: relative; display: block; width: 100%; height: 100svh; min-height: 540px; overflow: hidden; background: #050916; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.art, .mayhem-dim { position: absolute; inset: 0; display: block; width: 100%; height: 100%; user-select: none; pointer-events: none; }
.art img, .mayhem-dim img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; user-select: none; pointer-events: none; }
.art { z-index: 1; }
.mayhem-dim { z-index: 2; opacity: 0; animation: mayhemBreath 5.2s ease-in-out infinite; }
@keyframes mayhemBreath { 0%, 100% { opacity: 0; } 50% { opacity: .82; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .mayhem-dim { animation: none; opacity: 0; } }
.site-content { min-height: 100svh; background: #050916; display: grid; place-items: center; padding: 48px 18px; }
.choice-shell { width: min(100%, 680px); border: 1px solid rgba(255,255,255,.16); border-radius: 28px; padding: 30px 24px; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); box-shadow: 0 24px 80px rgba(0,0,0,.35); }
.kicker { margin: 0 0 12px; color: #71e8ff; font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.choice-shell h1 { margin: 0; font-size: clamp(2.4rem, 12vw, 5.5rem); line-height: .9; letter-spacing: -.06em; }
.choice-shell p:not(.kicker) { margin: 18px 0 0; color: #d7defb; font-size: 1rem; line-height: 1.45; }
.choice-buttons { display: grid; gap: 14px; margin-top: 26px; }
.choice-buttons a { display: flex; justify-content: center; align-items: center; min-height: 58px; border-radius: 999px; color: #07101b; background: #f5d15d; font-weight: 900; text-decoration: none; text-transform: uppercase; letter-spacing: .08em; }
.choice-buttons a:nth-child(2) { background: #70e7ff; }
@media (min-width: 768px) and (orientation: landscape) { body { background: #030712; } .hero { min-height: 0; } .choice-buttons { grid-template-columns: 1fr 1fr; } }