/* Layout follows the available window, never a device name or orientation. */
:root { --pregame-gutter: clamp(14px, 3vw, 28px); }
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid #f4b867; outline-offset: 4px; }
input, textarea, select { font-size: max(16px, 1em); }
.pregame-room, .pregame-demo, .pregame-landing { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.pregame-landing-hero { min-height: 620px; height: 100svh; }
.pregame-landing-copy { padding-bottom: max(env(safe-area-inset-bottom), 34px) !important; }
.pregame-landing-copy h1 { font-size: clamp(36px, 7.5vw, 76px); line-height: 1.05; letter-spacing: -.045em; }
.pregame-landing-copy p { max-width: 440px; line-height: 1.75; }
.pregame-join { min-height: 56px; border-radius: 12px; background: #f4b867 !important; color: #17110b !important; border-color: #f4b867; box-shadow: 0 8px 35px #f4b86726; letter-spacing: .12em !important; }
.pregame-demo-link { display: flex; min-height: 44px; align-items: center; gap: 16px; margin-top: 10px; color: #f1e5d3; font-size: 13px; }
body:has(.pregame-landing) .pregame-mode-nav, body:has(.pregame-onboarding) .pregame-mode-nav { display: none; }
.pregame-room-tools { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #ffffff30 transparent; padding-bottom: 10px; }
.pregame-room-tools > * { flex-shrink: 0; }
.pregame-room-tools button, .pregame-room-tools a, .pregame-room-tabs button { min-height: 44px; min-width: 44px; border-radius: 10px; }
.pregame-room-tools svg { width: 16px; height: 16px; }
.pregame-studio-button, .pregame-back-room { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; min-height: 44px; border: 1px solid #f4b86766; border-radius: 10px; background: #f4b86715; color: #f4b867; font-size: 12px; }
.pregame-studio { height: 100%; overflow-y: auto; padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
.pregame-room-tabs { border-radius: 14px; padding: 4px; background: #090812cc; }
.pregame-room-tabs button[aria-pressed="true"] { background: #f4b86720; box-shadow: inset 0 0 0 1px #f4b86755; }
.pregame-mode-nav { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.pregame-mode-nav a { min-height: 58px; justify-content: center; }
.pregame-mode-nav a[aria-current="page"] { background: #f4b8670c; }
.pregame-onboarding { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); background-size: cover; background-position: center; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.pregame-onboarding-intro { display: none; }
.pregame-onboarding-chat { min-height: 0; min-width: 0; overflow: hidden; background: #0b0a17; }
.pregame-onboarding-chat > div { background: #0b0a17ed; }
.pregame-onboarding-chat button { min-height: 44px; border-radius: 10px; }
.pregame-onboarding-chat [class*="overflow-y-auto"] { min-height: 0; }
.pregame-demo-header { flex-shrink: 0; padding-top: max(env(safe-area-inset-top), 12px); }
.pregame-demo-header a, .pregame-demo-player button { min-height: 44px; border-radius: 10px; }
.pregame-demo-header > div { text-align: center; letter-spacing: .15em; font-size: 9px; }
.pregame-demo-conversation { min-height: 0; padding-top: 16px; background: linear-gradient(180deg,#090812a8,#09081240); border-radius: 16px; }
.pregame-demo-conversation h2 { font-size: clamp(24px, 4vw, 44px); line-height: 1.15; }
.pregame-demo-conversation > [class*="overflow-y-auto"] { min-height: 80px; }
.pregame-demo-player { flex-shrink: 0; padding-bottom: max(env(safe-area-inset-bottom), 12px); }
.pregame-demo-player [class*="grid-cols-4"] button { min-width: 0; overflow: hidden; }
.pregame-demo-player [class*="grid-cols-4"] button > div { overflow-wrap: anywhere; font-size: 9px; letter-spacing: .04em; }
.pregame-demo-player button[aria-pressed="true"] { box-shadow: 0 0 0 2px #f4b867; }
.pregame-studio > div:first-of-type { flex-wrap: wrap; }
.pregame-studio > div:first-of-type > div { min-width: 0; flex-wrap: wrap; }
.pregame-studio h1 { font-size: clamp(20px, 3.5vw, 30px); }
.pregame-playback-dock { position: absolute; z-index: 20; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: calc(64px + env(safe-area-inset-bottom)); padding: 8px; background: #0b0a17f5; border: 1px solid #f4b86744; border-radius: 14px; box-shadow: 0 -12px 40px #0006; }
.pregame-playback-dock > div { max-width: 860px; margin-inline: auto; }
.pregame-playback-dock a { min-height: 32px; border-radius: 8px; }
.pregame-room[data-preview="true"] .pregame-room-body { padding-bottom: calc(210px + env(safe-area-inset-bottom)) !important; }
.pregame-room[data-preview="true"] .pregame-studio { padding-bottom: calc(230px + env(safe-area-inset-bottom)); }
@media (min-width: 680px) {
  .pregame-onboarding { grid-template-columns: minmax(0, 1fr) minmax(340px, 1fr); gap: 24px; padding: 24px max(24px, env(safe-area-inset-right)) 24px max(24px, env(safe-area-inset-left)); }
  .pregame-onboarding-intro { display: flex; flex-direction: column; justify-content: end; padding: clamp(16px, 4vw, 50px); background: linear-gradient(0deg,#090812ee,#09081200); border-radius: 20px; }
  .pregame-eyebrow { font-size: 10px; letter-spacing: .22em; color: #f4b867; }
  .pregame-onboarding-intro h1 { font-size: clamp(28px, 4.2vw, 56px); line-height: 1.12; margin: 16px 0; letter-spacing: -.04em; }
  .pregame-onboarding-intro > p:last-child { color: #e5dacc; font-size: 14px; line-height: 1.8; max-width: 360px; }
  .pregame-onboarding-chat { border: 1px solid #ffffff26; border-radius: 20px; box-shadow: 0 24px 80px #0008; }
  .pregame-demo { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); grid-template-rows: auto minmax(0, 1fr); gap: 12px; }
  .pregame-demo-header { grid-column: 1 / -1; }
  .pregame-demo-conversation { grid-column: 1; grid-row: 2; max-width: none; }
  .pregame-demo-player { grid-column: 2; grid-row: 2; overflow-y: auto; align-self: stretch; margin: 12px 16px 16px 0; padding: 20px; border: 1px solid #ffffff26; border-radius: 20px; display: flex; flex-direction: column; justify-content: center; }
  .pregame-demo-player > div { width: 100%; }
  .pregame-demo-player [class*="grid-cols-4"] { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .pregame-now.has-track { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-rows: minmax(180px,1fr) auto auto auto; align-content: start; column-gap: 24px; padding: 12px 24px 24px; }
  .pregame-now.has-track > * { grid-column: 1; min-width: 0; }
  .pregame-now.has-track > :first-child { height: 100% !important; min-height: 180px; max-height: 44dvh; border-radius: 16px; }
  .pregame-now.has-track > :last-child { grid-column: 2; grid-row: 1 / 5; max-height: none; height: 100%; min-height: 0; overflow-y: auto; }
}
@media (max-height: 620px) {
  .pregame-demo-header { padding-top: 6px; }
  .pregame-demo-conversation { gap: 10px; padding-top: 8px; }
  .pregame-demo-conversation h2 { margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
/* Native content is already constrained to the complete scene safe area. */
html[data-pregame-native] .pregame-adaptive-room { display: flex !important; }

/* Duo presentation: native size classes and toolbar axes are supplied by the
   scene. The browser uses a separate, content-based layout hint. */
:root { --pg-glass: #121019d9; --pg-stroke: #fff2; --pg-radius: 20px; }
.pregame-focus-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--pg-stroke); border-radius: 24px; background: var(--pg-glass); color: #f5ebdb; font: 12px var(--font-mono); }
.pregame-focus-button[aria-pressed="true"] { color: #f4b867; border-color: #f4b86780; }
.pregame-demo { display: flex; gap: 0; padding: 12px max(14px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); isolation: isolate; }
.pregame-demo-header { padding: 0 106px 10px 0; gap: 12px; }
.pregame-demo-header a { border-radius: 22px; letter-spacing: .08em; }
.pregame-demo-header > div { display: none; letter-spacing: .14em; }
.pregame-demo-focus { position: absolute; z-index: 20; right: max(16px, env(safe-area-inset-right)); top: 12px; }
.pregame-demo-conversation { margin: 0; max-width: none; width: 100%; padding: 12px 0; border: 0; background: transparent; border-radius: 0; }
.pregame-demo-title { padding: 12px 52px 14px 12px; background: linear-gradient(0deg,#090812b3,transparent); border-radius: var(--pg-radius); text-shadow: 0 2px 16px #000; }
.pregame-demo-title h2 { font-size: clamp(22px, 4vw, 46px); letter-spacing: -.04em; line-height: 1.15; text-wrap: balance; }
.pregame-demo-title > div:first-child { font-size: 9px; letter-spacing: .1em; line-height: 1.8; color: #efcf9a; }
.pregame-demo-title > div:last-child { margin-top: 12px; }
.pregame-demo-chat { padding: 16px 12px !important; border: 1px solid var(--pg-stroke); border-radius: var(--pg-radius); background: #100e18c9; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); scrollbar-width: thin; overscroll-behavior: contain; }
.pregame-demo-chat > div > div { min-width: 0; }
.pregame-demo-chat [class*="border-white"] { border: 0; background: transparent; padding: 4px 0; backdrop-filter: none; }
.pregame-demo-player { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 10px; align-self: auto; margin: 0; padding: 12px; border: 1px solid var(--pg-stroke); border-radius: var(--pg-radius); background: #100e18e0; overflow: visible; }
.pregame-demo-embed { grid-column: 1 / -1; min-width: 0; width: 100%; }
.pregame-demo-embed a { min-height: 36px; border: 0; text-transform: none; letter-spacing: .02em; background: transparent; }
.pregame-demo-skip { grid-column: 2; grid-row: 2; margin: 0; }
.pregame-demo-skip button { padding: 10px; min-width: 44px; min-height: 44px; border: 1px solid var(--pg-stroke); border-radius: 50%; font-size: 0; gap: 0; }
.pregame-demo-skip svg { width: 18px; height: 18px; }
.pregame-track-rail { grid-column: 1; grid-row: 2; grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 8px !important; margin: 0; width: 100%; }
.pregame-track-rail button { position: relative; min-height: 48px; padding: 3px; border-radius: 10px; overflow: hidden; }
.pregame-track-rail button img { aspect-ratio: 1; border-radius: 7px; max-height: 68px; object-fit: cover; }
.pregame-track-rail button > div { display: none; }
.pregame-track-rail button[aria-pressed="true"]::after { content: ""; position: absolute; right: 6px; bottom: 6px; width: 7px; height: 7px; border-radius: 50%; background: #f4b867; box-shadow: 0 0 0 2px #141019; }
.pregame-demo-tour > div:last-child { border-radius: var(--pg-radius); max-height: calc(100dvh - 48px); overflow-y: auto; }
.pregame-demo-tour button, .pregame-demo-tour a { min-height: 44px; padding-inline: 12px; border-radius: 12px; }
.pregame-room-tools { scrollbar-width: none; }
.pregame-room-tabs button { text-transform: none; letter-spacing: .02em; font: 12px var(--font-mono); }
.pregame-now.has-track > :first-child { border: 0; border-radius: var(--pg-radius); background: #08071155; }

/* The app's native toolbar already contains these destinations. */
html[data-pregame-native-navigation="true"] {
  & .pregame-mode-nav, & .pregame-demo-header, & .pregame-demo-focus,
  & .pregame-focus-button, & .pregame-legacy-studio, & .pregame-install-hint { display: none !important; }
  & .pregame-room-tools :is([aria-label="my art collection"], [aria-label="community art collection"], [aria-label="now playing mirror"], [aria-label="listen mode"], [aria-label="cast to tv"], [aria-label="back to landing"]) { display: none; }
  & .pregame-room-body { padding-bottom: 12px !important; }
  & .pregame-playback-dock { bottom: 12px; }
  & .pregame-room[data-preview="true"] .pregame-room-body { padding-bottom: 156px !important; }
  & .pregame-demo-title { padding-right: 12px; }
}

:is(html[data-pregame-layout="regular"], html:not([data-pregame-native])[data-pregame-web-layout="regular"]) {
  & .pregame-demo { display: grid; grid-template-columns: minmax(0,1fr) clamp(13rem,27vw,21rem) 68px; grid-template-rows: auto minmax(0,1fr) auto; gap: 14px; padding: 18px max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); }
  & .pregame-demo-header { grid-column: 1 / -1; grid-row: 1; padding-right: 116px; padding-bottom: 0; }
  & .pregame-demo-header > div { display: block; }
  & .pregame-demo-focus { top: 18px; right: max(18px, env(safe-area-inset-right)); }
  & .pregame-demo-conversation, & .pregame-demo-player { display: contents; }
  & .pregame-demo-title { position: relative; z-index: 10; grid-column: 1; grid-row: 2; align-self: end; padding: 28px 20px 12px; text-align: left; min-width: 0; }
  & .pregame-demo-title h2 { font-size: clamp(25px,4.3vw,60px); margin-block: 8px; }
  & .pregame-demo-title > div:last-child { margin-left: 0; }
  & .pregame-demo-chat { position: relative; z-index: 10; grid-column: 2; grid-row: 2 / 4; min-height: 0; }
  & .pregame-demo-chat > div:first-child { margin-top: 12px; }
  & .pregame-demo-embed { position: relative; z-index: 10; grid-column: 1; grid-row: 3; align-self: end; padding: 8px; border: 1px solid var(--pg-stroke); border-radius: 18px; background: var(--pg-glass); }
  & .pregame-track-rail { position: relative; z-index: 10; grid-column: 3; grid-row: 2; display: flex !important; flex-direction: column; align-self: center; padding: 6px; border: 1px solid var(--pg-stroke); border-radius: 18px; background: var(--pg-glass); max-height: 100%; overflow-y: auto; }
  & .pregame-track-rail button { flex-shrink: 0; min-height: 50px; }
  & .pregame-track-rail button img { width: 100%; }
  & .pregame-demo-skip { position: relative; z-index: 10; grid-column: 3; grid-row: 3; align-self: end; padding-bottom: 12px; }
  & .pregame-demo-skip button { background: var(--pg-glass); }
  & .pregame-demo-tour { align-items: center; justify-content: start; padding-right: calc(27vw + 96px); padding-left: 12px; }
  & .pregame-demo-tour > div:last-child { max-width: 26rem; }

  & .pregame-adaptive-room { display: grid !important; grid-template-columns: 70px minmax(0,1fr) 68px; grid-template-rows: minmax(0,1fr); gap: 10px; padding: 12px; }
  & .pregame-install-hint { display: none; }
  & .pregame-room-tabs { grid-column: 1; grid-row: 1; align-self: center; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 6px; border-radius: 22px; background: var(--pg-glass); overflow-y: auto; max-height: 100%; }
  & .pregame-room-tabs button { flex-direction: column; gap: 6px; min-height: 58px; padding: 10px 3px; }
  & .pregame-room-tools { grid-column: 3; grid-row: 1; flex-direction: column; align-self: center; max-height: 100%; gap: 8px; margin: 0; padding: 6px !important; overflow-x: visible; overflow-y: auto; border-radius: 22px; border: 1px solid var(--pg-stroke); background: var(--pg-glass); }
  & .pregame-room-tools > button, & .pregame-room-tools > a { width: 100%; flex-direction: column; padding: 10px 3px; white-space: normal; overflow-wrap: anywhere; font-size: 9px; letter-spacing: .01em; }
  & .pregame-room-tools > .relative.shrink-0 > div { position: fixed; top: 12px; right: 88px; left: auto; }
  & .pregame-room-body { grid-column: 2; grid-row: 1; min-width: 0; }
  & .pregame-now.has-track { padding: 0; gap: 12px; grid-template-columns: minmax(0,1fr) minmax(12rem,.7fr); grid-template-rows: minmax(160px,1fr) auto auto auto; }
  & .pregame-now.has-track > :first-child { max-height: none; }
  & .pregame-playback-dock { left: max(94px, env(safe-area-inset-left)); right: max(92px, env(safe-area-inset-right)); }
}

/* Focus is reversible, never auto-hides a control, and keeps the same player
   mounted. Navigation and the native Focus button remain available. */
html[data-pregame-immersive="true"] {
  & .pregame-demo-chat { display: none; }
  & .pregame-demo-conversation { justify-content: end; }
  & .pregame-demo-title { margin-top: auto; }
  & .pregame-now.has-track > :last-child { display: none; }
  & .pregame-now.has-track { display: flex; }
  & .pregame-now.has-track > :first-child { flex: 1 0 220px; height: auto !important; max-height: none; }
}
:is(html[data-pregame-layout="regular"], html:not([data-pregame-native])[data-pregame-web-layout="regular"])[data-pregame-immersive="true"] {
  & .pregame-demo { grid-template-columns: minmax(0,1fr) 68px; }
  & .pregame-track-rail, & .pregame-demo-skip { grid-column: 2; }
  & .pregame-demo-title { max-width: 46rem; }
}
@media (max-height: 500px) {
  .pregame-demo { padding-block: 8px; gap: 8px; }
  .pregame-demo-title h2 { font-size: clamp(20px,3vw,32px); }
  .pregame-demo-title { padding-block: 8px; }
  .pregame-demo-title > div:last-child { display: none; }
  .pregame-track-rail button { min-height: 44px; }
}
@media (prefers-reduced-transparency: reduce) {
  .pregame-demo-chat, .pregame-demo-embed, .pregame-track-rail, .pregame-room-tools, .pregame-room-tabs { background: #121019 !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
}