* { 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; } }

.choice-page {
  min-height: 100svh;
  background: #050916;
}
.choice-stage {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: #050916;
}
.choice-panel {
  position: absolute;
  inset: 0;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  background-position: center;
  background-size: cover;
  will-change: transform;
}
.choice-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at center, rgba(0,0,0,0) 0 45%, rgba(0,0,0,.28) 100%);
}
.bar-panel {
  background-image: url("choice-bar-phone.jpg");
  animation: barPhoneSlide 9s ease-in-out infinite;
}
.players-panel {
  background-image: url("choice-players-phone.jpg");
  animation: playersPhoneSlide 9s ease-in-out infinite;
}
.choice-panel span {
  display: block;
  padding: .12em .18em 0;
  color: #fff8eb;
  font-family: "Luckiest Guy", Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: clamp(3.2rem, 18vw, 6.6rem);
  line-height: .86;
  letter-spacing: .02em;
  text-align: center;
  text-transform: uppercase;
  text-shadow:
    0 .06em 0 #111,
    .055em .08em 0 #111,
    -.035em .06em 0 #111,
    0 .12em .14em rgba(0,0,0,.62);
  transform: none;
}
.players-panel span { transform: none; }
@keyframes barPhoneSlide {
  0%, 38% { transform: translateX(0); }
  50%, 88% { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}
@keyframes playersPhoneSlide {
  0%, 38% { transform: translateX(100%); }
  50%, 88% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mayhem-dim { animation: none; opacity: 0; }
  .bar-panel, .players-panel { animation: none; }
  .players-panel { transform: translateX(100%); }
}

@media (min-width: 768px) and (orientation: landscape) {
  body { background: #030712; }
  .hero { min-height: 0; }
  .choice-stage {
    min-height: 100svh;
    display: block;
    background: #050916 url("page-2-desktop.jpg") center / contain no-repeat;
  }
  .choice-panel {
    display: none;
    animation: none;
    background: none;
  }
}