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



.phone-splash { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: #091326; overflow: hidden; pointer-events: none; }
.phone-splash .scene { position: relative; width: min(100vw, 56.22svh); aspect-ratio: 940 / 1672; }
.phone-splash svg { display: block; width: 100%; height: 100%; }
.phone-splash .bulb { position: absolute; pointer-events: none; background-image: url("phone-splash/assets/bulbs.webp"); background-repeat: no-repeat; will-change: opacity; }
.phone-splash .shooting-star { position: absolute; left: 66%; top: 5%; width: 22%; height: 12%; pointer-events: none; opacity: 0; will-change: transform, opacity; animation: shooting-star-flight 20s linear 4s infinite; }
.phone-splash .shooting-star::before { content: ""; position: absolute; left: 0; top: 0; width: 46%; height: 1.5px; background: linear-gradient(90deg, #fff6da, rgba(219,237,255,.35) 55%, transparent); border-radius: 50%; transform: rotate(-25deg); transform-origin: left center; }
.phone-splash .shooting-star::after { content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 3px; background: #fffbea; border-radius: 50%; transform: translate(-50%, -25%); }
@keyframes shooting-star-flight { 0% { opacity: 0; transform: translate(0, 0); } .5% { opacity: .9; } 5% { opacity: .9; } 6% { opacity: 0; transform: translate(-120%, 55%); } 100% { opacity: 0; transform: translate(-120%, 55%); } }
@media (prefers-reduced-motion: reduce) { .phone-splash .shooting-star { display: none; animation: none; } }

@media (max-width: 767px), (orientation: portrait) {
  .hero { background: #091326; display: flex; align-items: center; justify-content: center; }
  .phone-splash { display: flex; }
  .desktop-splash { display: none; }
}

@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: block;
    min-height: 100svh;
    animation: none;
    background: transparent;
    cursor: pointer;
    z-index: 2;
  }
  .choice-panel::before,
  .choice-panel span {
    display: none;
  }
  .bar-panel {
    left: 0;
    right: 50%;
    width: 50%;
  }
  .players-panel {
    left: 50%;
    right: 0;
    width: 50%;
  }
}

.player-flow {
  min-height: 100svh;
  padding: clamp(28px, 7vw, 72px) 18px;
  display: grid;
  place-items: center;
  background-color: #050916;
  background-image: url("player-join-bg.jpg?v=3");
  background-position: center top;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.player-card {
  width: min(100%, 560px);
  min-height: min(78svh, 760px);
  padding: 42px 24px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 28px;
  background: rgba(6, 12, 32, .72);
  box-shadow: 0 24px 80px rgba(0,0,0,.42);
  backdrop-filter: blur(2px);
  transform: translateY(-45px);
}
.player-card[hidden] { display: none; }
.eyebrow {
  margin: 0 0 12px;
  color: #65dcff;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .78rem;
}
.player-card h1 {
  margin: 0;
  font-family: "Luckiest Guy", Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: clamp(2.9rem, 14vw, 5rem);
  line-height: .9;
  color: #fff8eb;
  text-shadow: 0 .07em 0 #111, 0 .16em .2em rgba(0,0,0,.55);
  text-align: center;
  text-wrap: balance;
}
.intro {
  margin: 18px 0 24px;
  color: rgba(247,241,223,.86);
  font-size: 1.05rem;
  line-height: 1.45;
}






.device-card {
  gap: 20px;
}
.device-options {
  display: grid;
  gap: 14px;
  width: 100%;
}
.device-option {
  min-height: 132px;
  border: 2px solid rgba(101, 220, 255, .35);
  border-radius: 22px;
  background: rgba(11, 18, 48, .78);
  color: #fff8eb;
  text-align: left;
  padding: 18px;
  display: grid;
  align-content: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.device-option:focus,
.device-option:hover {
  outline: none;
  border-color: #65dcff;
  box-shadow: 0 0 0 4px rgba(101, 220, 255, .18), inset 0 0 0 1px rgba(255,255,255,.08);
}
.device-option strong {
  font-family: "Luckiest Guy", Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: clamp(2rem, 8vw, 3.15rem);
  line-height: .9;
  text-transform: uppercase;
  text-shadow: 0 .07em 0 #111, 0 .16em .2em rgba(0,0,0,.45);
}
.device-option span {
  color: rgba(247,241,223,.78);
  font-weight: 800;
}
.device-kicker {
  color: #65dcff !important;
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.phone-choice {
  background: linear-gradient(135deg, rgba(11,18,48,.88), rgba(12,43,70,.72));
}
.big-screen-choice {
  background: linear-gradient(135deg, rgba(11,18,48,.88), rgba(77,46,12,.62));
}

@media (min-aspect-ratio: 4 / 3) {
  .device-card {
    width: min(92vw, 920px);
    min-height: min(78svh, 560px);
  }
  .device-options {
    grid-template-columns: 1fr 1fr;
  }
  .device-option {
    min-height: 210px;
    text-align: center;
  }
}

.selected-location {
  margin: 0 0 12px;
  text-align: center;
}
.selected-location-label {
  margin: 0 0 4px;
  color: rgba(247, 241, 223, .62);
  font-size: 1.44rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.selected-location-name {
  margin: 0;
  color: #fff8eb;
  font-weight: 900;
  font-size: 2.1rem;
  line-height: 1.05;
}
.player-card-secondary .intro {
  text-align: center;
}

.field-label {
  display: block;
  margin: 0 0 8px;
  color: #fff8eb;
  font-weight: 800;
}


.region-list {
  max-height: min(42svh, 360px);
  overflow-y: auto;
}
.region-step,
.venue-step {
  width: 100%;
}
.selected-region {
  text-align: center;
  color: rgba(247,241,223,.78);
}
.no-venues-message {
  text-align: center;
  color: #ffcf4a;
  font-weight: 800;
}
.small-back {
  margin-bottom: 10px;
}

.region-picker,
.venue-picker {
  position: relative;
  width: 100%;
}
.venue-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  cursor: pointer;
}
.venue-caret {
  flex: 0 0 auto;
  font-size: 1.25rem;
  line-height: 1;
  color: #65dcff;
}
.venue-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 10;
  overflow: hidden;
  border: 2px solid rgba(101, 220, 255, .55);
  border-radius: 16px;
  background: #0b1230;
  box-shadow: 0 18px 48px rgba(0,0,0,.5);
}
.venue-list.region-list {
  max-height: min(34svh, 320px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.venue-option,
.region-option {
  display: block;
  width: 100%;
  min-height: 48px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.09);
  background: transparent;
  color: #fff8eb;
  font: inherit;
  text-align: left;
  padding: 0 14px;
  cursor: pointer;
}
.venue-option:last-child,
.region-option:last-child { border-bottom: 0; }
.region-divider {
  padding: 10px 14px 8px;
  border-top: 1px solid rgba(255,255,255,.16);
  border-bottom: 1px solid rgba(255,255,255,.09);
  background: rgba(255, 207, 74, .12);
  color: #ffcf4a;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-align: center;
  text-transform: uppercase;
}

.venue-option:focus,
.venue-option:hover,
.region-option:focus,
.region-option:hover {
  outline: none;
  background: rgba(101, 220, 255, .14);
}

.venue-button,
.team-name-input {
  width: 100%;
  min-height: 56px;
  border: 2px solid rgba(101, 220, 255, .45);
  border-radius: 16px;
  background: #0b1230;
  color: #fff8eb;
  font-size: 1.05rem;
  padding: 0 14px;
  outline: none;
}
.venue-button:focus,
.team-name-input:focus {
  border-color: #65dcff;
  box-shadow: 0 0 0 4px rgba(101, 220, 255, .18);
}
.helper-text {
  margin: 14px 0 0;
  color: rgba(247,241,223,.66);
  line-height: 1.35;
}
.team-form { display: grid; gap: 12px; }
.join-button {
  min-height: 58px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #65dcff, #ffcf4a);
  color: #11131f;
  font-size: 1.15rem;
  font-weight: 900;
  cursor: pointer;
}
.back-button {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 0 0 18px;
  border: 1px solid rgba(101, 220, 255, .4);
  border-radius: 999px;
  background: rgba(101, 220, 255, .1);
  color: #65dcff;
  font-weight: 900;
  cursor: pointer;
  padding: 0 14px 0 10px;
}
.back-button span {
  font-size: 1.35rem;
  line-height: 1;
}

.publish-test-page {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 32px 18px;
  background: #070b18;
  color: #fff8eb;
}

.publish-test-card {
  width: min(92vw, 680px);
  border: 2px solid rgba(101, 220, 255, .4);
  border-radius: 28px;
  padding: 32px;
  text-align: center;
  background: rgba(10, 17, 42, .92);
  box-shadow: 0 28px 80px rgba(0,0,0,.45);
}

.publish-test-card h1 {
  margin: 8px 0 12px;
  font-family: "Luckiest Guy", system-ui, sans-serif;
  font-size: clamp(2rem, 8vw, 4.5rem);
  line-height: .92;
  text-transform: uppercase;
}

.publish-test-card p:last-child {
  margin: 0;
  font-weight: 800;
  color: rgba(247, 241, 223, .82);
}


.bar-owner-menu,
.bar-owner-info {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 32px 18px;
  background:
    linear-gradient(rgba(5, 9, 22, .18), rgba(5, 9, 22, .42)),
    url("bar-owner-desktop-bg.jpg") center / cover no-repeat;
  color: #fff8eb;
}


.bar-owner-info {
  padding: 0;
  background: #050916;
  place-items: stretch;
}

.bar-owner-info.app-screen.is-active {
  overflow: hidden;
}.bar-owner-card {
  width: min(92vw, 760px);
  border: 2px solid rgba(255, 207, 74, .42);
  border-radius: 30px;
  padding: clamp(28px, 5vw, 54px);
  text-align: center;
  background: rgba(8, 14, 34, .92);
  box-shadow: 0 28px 90px rgba(0,0,0,.52);
}

.bar-owner-card h1 {
  margin: 10px 0 14px;
  font-family: "Luckiest Guy", system-ui, sans-serif;
  font-size: clamp(2.6rem, 9vw, 6.2rem);
  line-height: .9;
  text-transform: uppercase;
  text-wrap: balance;
}

.bar-owner-copy {
  margin: 0 auto 24px;
  max-width: 560px;
  color: rgba(247, 241, 223, .84);
  font-weight: 850;
  line-height: 1.45;
}

.bar-owner-actions {
  display: grid;
  gap: 14px;
  width: min(100%, 430px);
  margin: 0 auto;
}

.mayhem-button {
  display: inline-flex;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  padding: 0 20px;
  font-weight: 950;
  text-decoration: none;
  text-align: center;
}


.bar-owner-slides {
  position: relative;
  width: 100vw;
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
  background: #050916;
}

.bar-owner-slide-topline,
.bar-owner-slide-controls {
  position: absolute;
  z-index: 5;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  transform: translateX(-50%);
}

.bar-owner-slide-topline {
  top: clamp(10px, 2vw, 20px);
  width: min(94vw, 760px);
}

.bar-owner-slide-controls {
  bottom: clamp(12px, 2vw, 24px);
  width: min(94vw, 520px);
}

.bar-owner-slide-topline .screen-back {
  margin: 0;
  background: rgba(8, 14, 34, .78);
  backdrop-filter: blur(8px);
}

.bar-owner-slide-count {
  margin: 0;
  border: 2px solid rgba(255, 207, 74, .65);
  border-radius: 999px;
  padding: 7px 14px;
  background: rgba(8, 14, 34, .78);
  color: #fff8eb;
  font-weight: 950;
  letter-spacing: .03em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.bar-owner-slide-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #050916;
}

.bar-owner-promo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  visibility: hidden;
  transition: opacity .24s ease;
  background: #050916;
}

.bar-owner-promo.is-active {
  opacity: 1;
  visibility: visible;
}

.bar-owner-slide-controls .mayhem-button {
  min-width: min(42vw, 190px);
  border: 0;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(0,0,0,.38);
}
.mayhem-button.primary {
  color: #071024;
  background: linear-gradient(90deg, #69dff1, #ffe15a);
  box-shadow: 0 16px 34px rgba(105, 223, 241, .22);
}
.mayhem-button.secondary {
  color: #fff8eb;
  border: 2px solid rgba(101, 220, 255, .55);
  background: rgba(101, 220, 255, .10);
}

@media (min-width: 768px) and (orientation: landscape) {
  .player-flow {
    background-image: url("bar-owner-desktop-bg.jpg");
    background-position: center;
    background-size: cover;
  }
}


/* App-style screen navigation: only one top-level screen is visible at a time. */
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.choice-page {
  height: 100svh;
  overflow: hidden;
}

.app-screen {
  display: none !important;
}

.app-screen.is-active.hero {
  display: block !important;
}

.app-screen.is-active.choice-stage {
  display: block !important;
}

.app-screen.is-active.player-flow,
.app-screen.is-active.bar-owner-menu,
.app-screen.is-active.bar-owner-info,
.app-screen.is-active.publish-test-page {
  display: grid !important;
}

.screen-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-height: 34px;
  margin: 0 0 18px;
  border: 2px solid rgba(101, 220, 255, .52);
  border-radius: 999px;
  padding: 0 14px;
  color: #65dcff;
  background: rgba(101, 220, 255, .1);
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .02em;
  text-decoration: none;
}

.bar-owner-card .screen-back,
.publish-test-card .screen-back {
  margin-left: auto;
  margin-right: auto;
}


/* Allow the active screen to scroll internally without revealing other screens. */
.app-screen.is-active.player-flow,
.app-screen.is-active.bar-owner-menu,
.app-screen.is-active.bar-owner-info,
.app-screen.is-active.publish-test-page,
.app-screen.is-active.choice-stage {
  height: 100svh;
  max-height: 100svh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.app-screen.is-active.hero {
  height: 100svh;
  max-height: 100svh;
  overflow: hidden;
}

.venue-list.region-list,
.venue-list {
  max-height: min(42svh, 360px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.desktop-section-animation { position: absolute; inset: 0; z-index: 3; display: none; pointer-events: none; overflow: hidden; }
.desktop-letter-section { position: absolute; inset: 0; background-image: url("mayhem-city-desktop-sign.webp"); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; opacity: 0; mix-blend-mode: screen; filter: brightness(1.85) saturate(1.65); will-change: opacity, filter; }
.desktop-triviality-section { clip-path: polygon(21.5% 15.8%, 82.5% 19%, 84.2% 45.6%, 22.8% 42.8%); animation: desktopTrivialityLights 10.8s ease-in-out infinite; }
.desktop-mayhem-section { clip-path: polygon(24.8% 40.2%, 83.6% 49.2%, 80.8% 76.2%, 23.8% 68.6%); filter: brightness(1.42) saturate(1.35) drop-shadow(0 0 18px rgba(68, 230, 255, .42)); animation: desktopMayhemLights 10.8s ease-in-out infinite; }
.desktop-tap-section { clip-path: polygon(26.4% 69.2%, 66.4% 71.2%, 72.8% 84.2%, 66.5% 93.3%, 25.8% 86.8%, 22.3% 78.4%); filter: brightness(1.45) saturate(1.25) drop-shadow(0 0 16px rgba(255, 94, 28, .42)); animation: desktopTapLights 10.8s ease-in-out infinite; }
.desktop-section-animation::before,
.desktop-section-animation::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; will-change: opacity, transform; }
.desktop-section-animation::before { background:
  radial-gradient(circle at 29.8% 23.5%, rgba(255, 236, 176, .62) 0 .42%, transparent .95%),
  radial-gradient(circle at 36.8% 25.5%, rgba(255, 236, 176, .58) 0 .38%, transparent .9%),
  radial-gradient(circle at 45.5% 28.0%, rgba(255, 236, 176, .60) 0 .42%, transparent .9%),
  radial-gradient(circle at 55.3% 30.8%, rgba(255, 236, 176, .60) 0 .42%, transparent .9%),
  radial-gradient(circle at 66.0% 34.0%, rgba(255, 236, 176, .56) 0 .38%, transparent .9%),
  radial-gradient(circle at 76.0% 37.8%, rgba(255, 236, 176, .58) 0 .42%, transparent .95%);
  animation: desktopBulbSparkle 10.8s linear infinite;
}
.desktop-section-animation::after { background:
  radial-gradient(circle at 36.2% 74.0%, rgba(255, 220, 135, .55) 0 .42%, transparent .95%),
  radial-gradient(circle at 44.8% 76.0%, rgba(255, 220, 135, .58) 0 .42%, transparent .95%),
  radial-gradient(circle at 54.2% 78.0%, rgba(255, 220, 135, .56) 0 .42%, transparent .95%),
  radial-gradient(circle at 63.5% 80.0%, rgba(255, 220, 135, .60) 0 .42%, transparent .95%),
  radial-gradient(circle at 68.2% 83.6%, rgba(255, 220, 135, .56) 0 .42%, transparent .95%);
  animation: desktopArrowChase 10.8s linear infinite;
}
@keyframes desktopTrivialityLights { 0%, 8% { opacity: 0; filter: brightness(.9) saturate(1); } 13%, 24% { opacity: .95; filter: brightness(2.05) saturate(1.35) drop-shadow(0 0 14px rgba(255, 193, 83, .35)); } 30%, 100% { opacity: 0; filter: brightness(.95) saturate(1); } }
@keyframes desktopMayhemLights { 0%, 27% { opacity: 0; } 32%, 47% { opacity: .92; } 50% { opacity: .32; } 54% { opacity: .96; } 60%, 100% { opacity: 0; } }
@keyframes desktopTapLights { 0%, 58% { opacity: 0; } 63%, 80% { opacity: .94; } 87%, 100% { opacity: 0; } }
@keyframes desktopBulbSparkle { 0%, 9% { opacity: 0; transform: translateX(-.4%); } 13%, 25% { opacity: 1; transform: translateX(.4%); } 31%, 100% { opacity: 0; transform: translateX(.4%); } }
@keyframes desktopArrowChase { 0%, 60% { opacity: 0; transform: translateX(-.8%); } 66%, 82% { opacity: .95; transform: translateX(.9%); } 88%, 100% { opacity: 0; transform: translateX(.9%); } }
@media (min-width: 768px) and (orientation: landscape) { .desktop-section-animation { display: block; } }
@media (prefers-reduced-motion: reduce) { .desktop-letter-section, .desktop-section-animation::before, .desktop-section-animation::after { animation: none; opacity: 0; } }
.desktop-word-glow { position: absolute; z-index: 4; pointer-events: none; opacity: 0; white-space: nowrap; mix-blend-mode: screen; will-change: opacity, transform; }
.desktop-word-triviality { left: 23.2%; top: 17.6%; font-family: Impact, Haettenschweiler, "Arial Black", sans-serif; font-size: clamp(5.3rem, 9.15vw, 9.8rem); line-height: .82; letter-spacing: .015em; color: rgba(255, 212, 120, .18); -webkit-text-stroke: .018em rgba(255, 246, 200, .22); text-shadow: 0 0 10px rgba(255, 235, 170, .72), 0 0 24px rgba(255, 116, 38, .46), 0 0 42px rgba(255, 52, 18, .32); transform: rotate(5.1deg) skewX(3deg); animation: desktopTrivialityWord 10.8s ease-in-out infinite; }
.desktop-word-mayhem { left: 25.2%; top: 39.2%; font-family: "Trebuchet MS", "Arial Black", sans-serif; font-size: clamp(5.6rem, 10.8vw, 12rem); font-style: italic; font-weight: 900; line-height: .82; letter-spacing: -.07em; color: rgba(95, 238, 255, .12); -webkit-text-stroke: .012em rgba(149, 255, 255, .18); text-shadow: 0 0 11px rgba(94, 242, 255, .82), 0 0 28px rgba(0, 204, 255, .52), 0 0 54px rgba(35, 102, 255, .34); transform: rotate(5.8deg) skewX(-12deg) scaleX(1.18); animation: desktopMayhemWord 10.8s ease-in-out infinite; }
.desktop-word-tap { left: 35.5%; top: 70.8%; font-family: Impact, Haettenschweiler, "Arial Black", sans-serif; font-size: clamp(2.5rem, 4.7vw, 5.1rem); line-height: .9; letter-spacing: .14em; color: rgba(255, 242, 202, .18); text-shadow: 0 0 10px rgba(255, 242, 202, .78), 0 0 26px rgba(255, 130, 36, .52), 0 0 44px rgba(255, 54, 20, .36); transform: rotate(3.6deg); animation: desktopTapWord 10.8s ease-in-out infinite; }
@keyframes desktopTrivialityWord { 0%, 8% { opacity: 0; } 13%, 24% { opacity: .78; } 30%, 100% { opacity: 0; } }
@keyframes desktopMayhemWord { 0%, 27% { opacity: 0; } 32%, 47% { opacity: .72; } 50% { opacity: .25; } 54% { opacity: .82; } 60%, 100% { opacity: 0; } }
@keyframes desktopTapWord { 0%, 58% { opacity: 0; } 63%, 80% { opacity: .72; } 87%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .desktop-word-glow { animation: none; opacity: 0; } }

/* Locked benchmark desktop opening splash. */
.desktop-benchmark-splash {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #091326;
}

.desktop-benchmark-scene {
  position: relative;
  aspect-ratio: 1672 / 941;
  width: min(100vw, 177.683315svh);
  max-width: 100vw;
  max-height: 100svh;
}

.desktop-benchmark-background {
  display: block;
  width: 100%;
  height: 100%;
}

.desktop-benchmark-layer,
.desktop-benchmark-scene .layer,
.desktop-benchmark-scene .bulb,
.desktop-benchmark-scene .star-bulb,
.desktop-benchmark-scene .arrow-bulb {
  position: absolute;
  pointer-events: none;
}

.desktop-benchmark-scene .bulb {
  background-image: url("desktop-splash/assets/mayhem-bulbs.webp");
  background-repeat: no-repeat;
  will-change: opacity;
}

@media (min-width: 768px) and (orientation: landscape) {
  .hero {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #091326;
  }
  .desktop-benchmark-splash {
    display: flex;
  }
}




/* Final Bar Owner promo slide override: the promo image itself is the page. */
#bar-owner-info.bar-owner-info {
  padding: 0 !important;
  background: #050916 !important;
  background-image: none !important;
  place-items: stretch !important;
  overflow: hidden !important;
}

#bar-owner-info .bar-owner-slides,
#bar-owner-info .bar-owner-slide-frame {
  width: 100vw !important;
  height: 100svh !important;
  min-height: 100svh !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #050916 !important;
  box-shadow: none !important;
}

#bar-owner-info .bar-owner-promo {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #050916 !important;
}


/* Bar Owner promo slides: artwork only, tap anywhere to advance. */
#bar-owner-info .bar-owner-slide-topline,
#bar-owner-info .bar-owner-slide-controls {
  display: none !important;
}

#bar-owner-info .bar-owner-slides,
#bar-owner-info .bar-owner-slide-frame,
#bar-owner-info .bar-owner-promo {
  cursor: pointer;
}

/* Bar Owner promo slides: one tiny Next button at bottom center. */
#bar-owner-info .bar-owner-slide-topline,
#bar-owner-info #bar-owner-prev {
  display: none !important;
}

#bar-owner-info .bar-owner-slide-controls {
  display: flex !important;
  left: 50% !important;
  bottom: 10px !important;
  width: auto !important;
  transform: translateX(-50%) !important;
  z-index: 6 !important;
}

#bar-owner-info #bar-owner-next {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-size: 0.78rem !important;
  line-height: 1 !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.25) !important;
}

/* Bar Owner promo slides: tiny Back and Next buttons at bottom center. */
#bar-owner-info .bar-owner-slide-controls {
  display: flex !important;
  left: 50% !important;
  bottom: 10px !important;
  width: auto !important;
  gap: 10px !important;
  transform: translateX(-50%) !important;
  z-index: 6 !important;
}

#bar-owner-info #bar-owner-prev,
#bar-owner-info #bar-owner-next {
  display: inline-flex !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-size: 0.78rem !important;
  line-height: 1 !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.25) !important;
}


/* Sample-only game flow for Bar Owner demo. */
.sample-flow {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background: radial-gradient(circle at 50% 0%, rgba(105, 223, 241, .18), transparent 34%), #050916;
}

.sample-card {
  width: min(92vw, 760px);
  border: 2px solid rgba(255, 207, 74, .42);
  border-radius: 30px;
  padding: clamp(26px, 5vw, 48px);
  background: rgba(8, 14, 34, .94);
  box-shadow: 0 28px 90px rgba(0,0,0,.52);
  text-align: center;
}

.sample-card h1 {
  margin: 10px 0 16px;
  font-family: "Luckiest Guy", system-ui, sans-serif;
  font-size: clamp(2.2rem, 7vw, 4.8rem);
  line-height: .95;
  text-transform: uppercase;
}

.sample-form,
.sample-actions {
  display: grid;
  gap: 14px;
  width: min(100%, 430px);
  margin: 0 auto;
}

.sample-answer-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 22px auto;
}

.sample-answer {
  min-height: 72px;
  border: 2px solid rgba(101, 220, 255, .55);
  border-radius: 18px;
  padding: 14px;
  background: rgba(101, 220, 255, .10);
  color: #fff8eb;
  font: inherit;
  font-weight: 950;
  cursor: pointer;
}

.sample-answer.is-correct {
  border-color: #8cff9b;
  background: rgba(45, 200, 85, .26);
}

.sample-answer.is-wrong {
  border-color: #ff6b7a;
  background: rgba(255, 59, 85, .24);
}

.sample-answer:disabled {
  cursor: default;
}

.sample-feedback {
  min-height: 3.2em;
  margin: 10px auto 18px;
  max-width: 620px;
  color: rgba(247, 241, 223, .88);
  font-weight: 850;
  line-height: 1.35;
}

.sample-feedback.is-correct {
  color: #baffc3;
}

.sample-feedback.is-wrong {
  color: #ffd6dc;
}

.sample-scoreboard {
  display: grid;
  gap: 10px;
  margin: 20px auto 22px;
  max-width: 520px;
}

.sample-score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 2px solid rgba(101, 220, 255, .38);
  border-radius: 16px;
  padding: 14px 16px;
  color: #fff8eb;
  font-weight: 900;
  background: rgba(255,255,255,.06);
}

.sample-score-row.is-player {
  border-color: rgba(255, 225, 90, .75);
  background: rgba(255, 225, 90, .14);
}

@media (max-width: 640px) {
  .sample-answer-list {
    grid-template-columns: 1fr;
  }
}

/* Sample flow participates in the same app-screen routing as the other pages. */
.app-screen.is-active.sample-flow {
  display: grid !important;
  height: 100svh;
  max-height: 100svh;
  overflow-y: auto;
  overscroll-behavior: contain;
}


/* Sample rules slides. */
.sample-rule-image {
  display: block;
  width: min(100%, 760px);
  max-height: min(62svh, 540px);
  object-fit: contain;
  margin: 18px auto 18px;
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(0,0,0,.36);
}

/* Star background on sample sign-in only. */
#sample-sign-in .sample-panel[data-sample-step="signin"] {
  position: relative;
  overflow: hidden;
  background: linear-gradient(rgba(5, 9, 22, .30), rgba(5, 9, 22, .48)), url("sample-rules/star.png") center / cover no-repeat;
}

#sample-sign-in .sample-panel[data-sample-step="signin"] > * {
  position: relative;
  z-index: 1;
}

/* Rule slides are standalone artwork, not cards inside cards. */
#sample-sign-in .sample-panel[data-sample-step="instruction"] {
  width: 100vw !important;
  height: 100svh !important;
  max-height: 100svh !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #050916 !important;
  box-shadow: none !important;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  overflow: hidden;
}

#sample-sign-in .sample-panel[data-sample-step="instruction"] .eyebrow,
#sample-sign-in .sample-panel[data-sample-step="instruction"] h1,
#sample-sign-in .sample-panel[data-sample-step="instruction"] .intro {
  display: none !important;
}

#sample-sign-in .sample-rule-image {
  width: 100vw !important;
  height: calc(100svh - 58px) !important;
  max-height: none !important;
  object-fit: contain !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #050916 !important;
}

#sample-sign-in #sample-start-question {
  align-self: center;
  margin: 8px 0 12px !important;
  min-height: 0 !important;
  padding: 8px 18px !important;
  border-radius: 999px !important;
  font-size: .85rem !important;
  line-height: 1 !important;
}

#sample-sign-in.sample-flow {
  padding: 0 !important;
}

/* Scrollable full-width sample rules pages. */
#sample-sign-in .sample-panel[data-sample-step="instruction"] {
  width: 100vw !important;
  min-height: 100svh !important;
  height: auto !important;
  max-height: none !important;
  padding: 0 0 22px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #050916 !important;
  box-shadow: none !important;
  display: block !important;
  overflow: visible !important;
}

#sample-sign-in.sample-flow:has(.sample-panel[data-sample-step="instruction"]:not([hidden])) {
  display: block !important;
  height: 100svh !important;
  max-height: 100svh !important;
  overflow-y: auto !important;
  padding: 0 !important;
  place-items: initial !important;
}

#sample-sign-in .sample-panel[data-sample-step="instruction"] .eyebrow,
#sample-sign-in .sample-panel[data-sample-step="instruction"] h1,
#sample-sign-in .sample-panel[data-sample-step="instruction"] .intro {
  display: none !important;
}

#sample-sign-in .sample-rule-image {
  display: block !important;
  width: 100vw !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #050916 !important;
}

#sample-sign-in #sample-start-question {
  display: flex !important;
  width: min(88vw, 360px) !important;
  margin: 18px auto 0 !important;
  justify-content: center !important;
}

/* Sample flow pages must replace each other, never stack. */
#sample-sign-in .sample-panel[hidden] {
  display: none !important;
}

/* ---- Second screen: full pictures with tap zones (choose-portrait.webp / choose-landscape.webp) ----
   The .choice-art box has the exact ratio of the picture, so the zones stay glued to the artwork
   (no cropping, no stretching); the dark #050916 shows around it on other screen shapes. */
#choice-menu.choice-stage { background: #050916; }
#choice-menu .choice-art {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(100vw, calc(100svh * 941 / 1672));
  aspect-ratio: 941 / 1672;
  background: #050916;
}
#choice-menu .choice-art picture { display: block; width: 100%; height: 100%; }
#choice-menu .choice-img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
#choice-menu .zone { position: absolute; display: block; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#choice-menu .zone:focus-visible { outline: none; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 4px #65dcff; }
#choice-menu .zone-land { display: none; }
#choice-menu .zone-port { inset: 0; }
#choice-menu .zone-port.zone-players { clip-path: polygon(0 0, 100% 0, 100% 46%, 20% 100%, 0 100%); }
#choice-menu .zone-port.zone-bar { clip-path: polygon(100% 46%, 100% 100%, 20% 100%); }
@media (min-width: 768px) and (orientation: landscape) {
  #choice-menu .choice-art { width: min(100vw, calc(100svh * 1672 / 941)); aspect-ratio: 1672 / 941; }
  #choice-menu .zone-port { display: none; }
  #choice-menu .zone-land { display: block; left: 0; width: 100%; }
  #choice-menu .zone-land.zone-bar { top: 0; height: 82%; }
  #choice-menu .zone-land.zone-players { top: 82%; height: 18%; }
}

/* ---- Phone Bar Owners screen: one full picture (bar-owners-phone.webp), shown whole on #050916 ---- */
.app-screen.is-active.bar-owners-phone { display: block !important; position: relative; height: 100svh; max-height: 100svh; overflow: hidden; background: #050916; }
.bar-owners-phone .bop-art { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(100vw, calc(100svh * 940 / 1673)); aspect-ratio: 940 / 1673; background: #050916; }
.bar-owners-phone .bop-img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.bar-owners-phone .bop-back { position: absolute; z-index: 3; top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 2px solid rgba(101, 220, 255, .75); border-radius: 999px; color: #fff; background: rgba(5, 9, 22, .72); font: 700 1rem/1 Arial, Helvetica, sans-serif; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.bar-owners-phone .bop-back:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ---- "PLAY THE SAMPLE" button on the sample slide (game-sample.png, 1672x941) ----
   The box has the picture's exact ratio, so the link stays glued to the yellow button on any screen shape.
   It is only shown while the sample slide is the active one; taps anywhere else still advance the slide. */
#bar-owner-info .sample-link-box { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(100vw, calc(100svh * 1672 / 941)); aspect-ratio: 1672 / 941; z-index: 4; pointer-events: none; }
#bar-owner-info .bar-owner-promo.is-active + .sample-link-box { display: block; }
#bar-owner-info .sample-link { position: absolute; display: block; left: 4%; top: 83%; width: 27%; height: 11%; border-radius: 2px; pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#bar-owner-info .sample-link:focus-visible { outline: 4px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 7px rgba(0, 0, 0, .55); }