:root {
  --lobby-night: #071027;
  --lobby-night-soft: #101d42;
  --lobby-gold: #d9c298;
  --lobby-bone: #f4efdf;
  --lobby-ink: #151b31;
  --lobby-muted: #aab2c7;
  --lobby-line: rgba(217, 194, 152, .3);
  --lobby-gutter: clamp(18px, 5vw, 82px);
  --lobby-ease: cubic-bezier(.23, 1, .32, 1);
}

* { box-sizing: border-box; }
html { background: var(--lobby-night); scroll-behavior: smooth; }
.lobby-body { margin: 0; overflow-x: clip; background: var(--lobby-night); color: var(--lobby-bone); font-family: var(--sans); }
.lobby a { color: inherit; text-decoration: none; }
.lobby button { font: inherit; }
.lobby ::selection { background: var(--lobby-gold); color: var(--lobby-night); }
.lobby :focus-visible { outline: 2px solid var(--lobby-gold); outline-offset: 4px; }

.lobby-masthead {
  position: fixed;
  z-index: 20;
  top: 14px;
  right: var(--lobby-gutter);
  left: var(--lobby-gutter);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px clamp(12px, 2vw, 28px);
  min-height: 48px;
  padding: 7px 10px 7px 16px;
  border: 1px solid rgba(217, 194, 152, .32);
  border-radius: 999px;
  background: rgba(7, 16, 39, .76);
  box-shadow: 0 12px 32px rgba(1, 5, 17, .2), inset 0 1px rgba(255, 255, 255, .12);
  backdrop-filter: blur(12px);
}

.lobby-wordmark { color: var(--lobby-gold); font-family: var(--display); font-size: 1.18rem; font-weight: 600; letter-spacing: .04em; white-space: nowrap; }
.lobby-wordmark span { color: var(--lobby-bone); font-family: var(--sans); font-size: .67em; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.lobby-nav { display: flex; align-items: center; justify-content: center; min-width: 0; gap: clamp(10px, 1.8vw, 24px); color: var(--lobby-muted); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.lobby-nav a { flex: 0 0 auto; }
.lobby-nav a { transition: color 150ms var(--lobby-ease), transform 150ms var(--lobby-ease); }
.lobby-nav a:last-child { color: var(--lobby-gold); }
@media (hover: hover) and (pointer: fine) { .lobby-nav a:hover { color: var(--lobby-bone); transform: translateY(-1px); } }

.lobby-masthead .language-picker { margin-inline-start: 0; }

.lobby-hero { --lobby-hero-p: 0; position: relative; min-height: 160svh; background: var(--lobby-night); }
.lobby-hero-media { position: sticky; top: 0; height: 100svh; overflow: hidden; background: #091637; }
.lobby-hero-media::after { position: absolute; z-index: 3; inset: 0; content: ""; background: linear-gradient(90deg, rgba(5, 12, 31, .92) 0%, rgba(5, 12, 31, .62) 37%, rgba(5, 12, 31, .05) 75%), linear-gradient(0deg, rgba(4, 8, 24, .66), transparent 45%); }
.lobby-hero-poster, .lobby-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; transform: scale(calc(1.03 + var(--lobby-hero-p) * .06)) translate3d(0, calc(var(--lobby-hero-p) * -1.5%), 0); }
.lobby-hero-poster { filter: saturate(.86) contrast(1.05); }
.lobby-hero-video { z-index: 1; opacity: 0; transition: opacity 220ms var(--lobby-ease); }
.lobby-hero-video.is-scrubbed { opacity: 1; }
.lobby-hero-foreground { position: absolute; z-index: 4; right: -12vw; bottom: -3vw; width: min(72vw, 1100px); height: auto; max-height: 72%; object-fit: contain; object-position: right bottom; opacity: .54; transform: translate3d(0, calc(var(--lobby-hero-p) * -3%), 0); pointer-events: none; }
.lobby-hero-scrim { position: absolute; z-index: 5; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(7, 16, 39, .38), transparent 46%); }

.lobby-copy { position: relative; z-index: 6; }
.lobby-hero-copy { position: absolute; top: clamp(170px, 30vh, 310px); left: var(--lobby-gutter); width: min(31rem, calc(100% - 2 * var(--lobby-gutter))); }
.lobby-kicker { margin: 0 0 12px; color: var(--lobby-gold); font-size: .69rem; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; }
.lobby-hero h1, .lobby h2 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
.lobby-hero h1 { max-width: 8ch; font-size: clamp(3rem, 6vw, 5.8rem); line-height: .9; }
html:is([lang="zh"], [lang="th"], [lang="vi"]) .lobby h1,
html:is([lang="zh"], [lang="th"], [lang="vi"]) .lobby h2 { line-height: 1.15; letter-spacing: -.015em; }
.lobby-hero-copy > p:not(.lobby-kicker), .lobby-section-head > p:last-child, .lobby-settle-copy > p:not(.lobby-kicker), .lobby-enter-copy > p:not(.lobby-kicker) { margin: 20px 0 0; color: #d6d9e1; font-size: clamp(.92rem, 1.2vw, 1.05rem); line-height: 1.6; text-wrap: pretty; }
.lobby-button { display: inline-flex; align-items: center; justify-content: center; min-height: 45px; margin-top: 26px; padding: 0 18px; border: 1px solid transparent; border-radius: 999px; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; transition: transform 150ms var(--lobby-ease), background-color 150ms var(--lobby-ease), color 150ms var(--lobby-ease); }
.lobby-button--gold { background: var(--lobby-gold); color: var(--lobby-night); }
.lobby-button--light { background: var(--lobby-bone); color: var(--lobby-night); }
[data-lobby-final] { gap: .35em; }
.lobby .lobby-button--gold,
.lobby .lobby-button--light { color: var(--lobby-night); }
@media (hover: hover) and (pointer: fine) { .lobby-button:hover { transform: translateY(-2px); } }
.lobby-button:active { transform: translateY(1px) scale(.98); }

.lobby-choose { padding: clamp(74px, 11vw, 156px) 0 clamp(90px, 12vw, 172px); background: var(--lobby-bone); color: var(--lobby-ink); }
.lobby-section-head { width: min(38rem, calc(100% - 2 * var(--lobby-gutter))); margin: 0 var(--lobby-gutter) clamp(38px, 6vw, 72px); }
.lobby-choose .lobby-kicker { color: #80653c; }
.lobby h2 { font-size: clamp(2.25rem, 4.4vw, 4.4rem); line-height: .96; }
.lobby-section-head > p:last-child { color: #50566a; max-width: 38ch; }
.lobby-parlay-note { display: inline-flex; flex-wrap: wrap; gap: .2rem .5rem; margin-top: 17px; color: #50566a; font-size: .82rem; line-height: 1.45; text-decoration: underline; text-decoration-color: color-mix(in srgb, #80653c 42%, transparent); text-underline-offset: 4px; }
.lobby-parlay-note:hover, .lobby-parlay-note:focus-visible { color: #2e3448; text-decoration-color: #80653c; }
.lobby-parlay-note-label { color: #80653c; font-weight: 600; }
.lobby-rail { display: grid; grid-auto-columns: minmax(248px, min(31vw, 440px)); grid-auto-flow: column; gap: clamp(13px, 2vw, 25px); overflow-x: auto; overscroll-behavior-inline: contain; padding: 0 var(--lobby-gutter) 14px; scrollbar-color: #887049 transparent; scrollbar-width: thin; }
.lobby-board { position: relative; min-height: clamp(348px, 40vw, 520px); overflow: hidden; border-radius: 3px; background: var(--lobby-night); box-shadow: 0 22px 42px rgba(12, 20, 44, .16); }
.lobby-board img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; transition: transform 700ms var(--lobby-ease); }
.lobby-board-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 12, 31, .94), rgba(5, 12, 31, .08) 68%); }
.lobby-board-copy { position: absolute; z-index: 1; right: 22px; bottom: 20px; left: 22px; display: grid; gap: 7px; color: var(--lobby-bone); }
.lobby-board-copy p { margin: 0; font-family: var(--display); font-size: clamp(1.8rem, 3vw, 3.25rem); font-weight: 600; letter-spacing: -.02em; line-height: .94; }
.lobby-board-copy span { min-height: 2.8em; color: #d7dce8; font-size: .82rem; line-height: 1.45; }
.lobby-board button, .lobby-board a { width: max-content; border: 0; padding: 0; background: transparent; color: var(--lobby-gold); cursor: pointer; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
.lobby-board a { color: var(--lobby-bone); text-decoration: underline; text-decoration-color: rgba(217, 194, 152, .7); text-underline-offset: 4px; }
.lobby-board button.is-selected::before { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--lobby-gold); content: ""; vertical-align: 1px; }
@media (hover: hover) and (pointer: fine) { .lobby-board:hover img { transform: scale(1.045); } }

.lobby-settle { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(300px, .84fr); align-items: center; gap: clamp(34px, 9vw, 150px); padding: clamp(86px, 13vw, 180px) var(--lobby-gutter); background: #111c3b; }
.lobby-settle-detail { position: relative; min-height: clamp(320px, 46vw, 650px); overflow: hidden; }
.lobby-settle-detail::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, transparent 56%, #111c3b); }
.lobby-settle-detail img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; filter: saturate(.76); }
.lobby-settle-copy { width: min(28rem, 100%); }
.lobby-text-links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 26px; }
.lobby-text-links a { color: var(--lobby-gold); font-size: .76rem; font-weight: 600; letter-spacing: .08em; text-decoration: underline; text-underline-offset: 5px; text-transform: uppercase; }

.lobby-enter { --lobby-portal-x: 0px; --lobby-portal-y: 0px; position: relative; display: grid; min-height: 92svh; place-items: end start; overflow: hidden; padding: 96px var(--lobby-gutter); background: #071027; text-align: left; isolation: isolate; }
.lobby-enter::before, .lobby-enter::after { position: absolute; content: ""; pointer-events: none; }
.lobby-enter::before { z-index: 0; inset: -2%; background: url("../images/lobby-entry.jpg?v=93f44f4e428c") 62% center / cover no-repeat; filter: saturate(.78) contrast(1.06); transform: translate3d(var(--lobby-portal-x), var(--lobby-portal-y), 0) scale(1.04); }
.lobby-enter::after { z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(5, 12, 31, .94) 0%, rgba(5, 12, 31, .72) 34%, rgba(5, 12, 31, .18) 72%, rgba(5, 12, 31, .06)), linear-gradient(0deg, rgba(5, 12, 31, .66), transparent 48%); }
.lobby-enter-copy { width: min(33rem, 100%); }
.lobby-enter-copy h2 { font-size: clamp(2.8rem, 6.3vw, 5.8rem); line-height: .9; }
.lobby-enter-copy > p { margin-inline: 0; }
.lobby-enter-responsible { margin-top: 26px; color: #d6d9e1; font-size: .73rem; line-height: 1.5; }
.lobby-enter-responsible p { margin: 0 0 7px; }
.lobby-enter-responsible a { color: var(--lobby-gold); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

.lobby-motion-off .lobby-hero, .lobby-video-unavailable .lobby-hero { min-height: 100svh; }
.lobby-motion-off .lobby-hero-media, .lobby-video-unavailable .lobby-hero-media { position: relative; }
.lobby-motion-off .lobby-hero-poster, .lobby-motion-off .lobby-hero-video, .lobby-motion-off .lobby-hero-foreground, .lobby-motion-off .lobby-enter::before { transform: none; }
@media (prefers-reduced-motion: reduce) { .lobby *, .lobby *::before, .lobby *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

@media (min-width: 701px) and (max-width: 1100px) {
  .lobby-masthead { grid-template-areas: "brand language" "nav nav"; grid-template-columns: minmax(0, 1fr) auto; border-radius: 20px; padding: 10px 16px; }
  .lobby-wordmark { grid-area: brand; }
  .lobby-masthead .language-picker { grid-area: language; justify-self: end; }
  .lobby-nav { grid-area: nav; justify-content: flex-start; overflow-x: auto; white-space: nowrap; padding-block: 4px; }
}

@media (max-width: 700px) {
  .lobby-masthead { grid-template-areas: "brand language" "nav nav"; grid-template-columns: minmax(0, 1fr) auto; top: 9px; right: 10px; left: 10px; min-height: 0; padding: 10px 12px 9px; border-radius: 20px; }
  .lobby-wordmark { grid-area: brand; font-size: 1.08rem; }
  .lobby-masthead .language-picker { grid-area: language; justify-self: end; }
  .lobby-nav { grid-area: nav; justify-content: flex-start; width: 100%; gap: 14px; overflow-x: auto; overscroll-behavior-inline: contain; padding: 3px 1px 2px; font-size: .68rem; letter-spacing: .055em; scrollbar-width: none; }
  .lobby-nav::-webkit-scrollbar { display: none; }
  .lobby-hero { min-height: auto; padding-top: 108px; }
  .lobby-hero-media { position: relative; height: min(49svh, 430px); }
  .lobby-hero-media::after { background: linear-gradient(0deg, rgba(5, 12, 31, .92), rgba(5, 12, 31, .05) 75%); }
  .lobby-hero-poster, .lobby-hero-video { object-position: 64% 50%; }
  .lobby-hero-foreground { right: -38vw; bottom: -5vw; width: 150vw; max-height: 58%; opacity: .4; }
  .lobby-hero-copy { position: relative; top: auto; left: auto; width: auto; margin: -80px 0 0; padding: 0 var(--lobby-gutter) 54px; background: linear-gradient(0deg, var(--lobby-night) 84%, transparent); }
  .lobby-hero h1 { max-width: 7ch; font-size: clamp(2.55rem, 12.5vw, 3.55rem); }
  html[lang="zh"] .lobby-hero h1 { max-width: 5.5em; }
  .lobby-hero-copy > p:not(.lobby-kicker) { max-width: 29ch; }
  .lobby-parlay-note { margin-top: 15px; font-size: .8rem; }
  .lobby-rail { grid-auto-columns: minmax(78vw, 310px); padding-right: 20vw; }
  .lobby-board { min-height: 390px; }
  .lobby-settle { grid-template-columns: 1fr; gap: 34px; padding-top: 76px; padding-bottom: 76px; }
  .lobby-settle-detail { min-height: 300px; margin-right: calc(var(--lobby-gutter) * -1); }
  .lobby-settle-detail::after { background: linear-gradient(0deg, #111c3b, transparent 56%); }
  .lobby-enter { min-height: 78svh; place-items: end start; }
  .lobby-enter::before { inset: -4%; background-position: 67% center; }
  .lobby-enter::after { background: linear-gradient(0deg, rgba(5, 12, 31, .94), rgba(5, 12, 31, .18) 72%); }
}