/* Integration between the shared entry and the public landing sheet, which the
   wide browser entry links at 1000px and above. The landing document owns copy
   and links. Host identity controls whether they appear; viewport width only
   chooses the wide or compact presentation. */
.entry-landing .entry-brand { display: inline-flex; }
.entry-brand .brand-name { margin-bottom: 16px; }
.entry-brand .brand-alpha { position: absolute; left: 53px; top: 24px; color: #10b981; font: 600 11px/16px Manrope, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
[data-native-entry] .entry-brand img { display: none; }
[data-native-entry] .entry-brand .brand-alpha { left: 0; top: 22px; }
.entry-intro, .entry-footer { transition: opacity 220ms ease, visibility 0s 220ms; opacity: 0; visibility: hidden; pointer-events: none; }
.entry-root[data-view=auth]:not([data-native-entry]):not(:has(.gf-auth[data-deletion])) :is(.entry-intro, .entry-footer) { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.entry-footer a { transition: color 180ms ease; }
.entry-footer a:active { color: #10b981; }
@media(min-width:1000px) {
  .entry-landing .directory { height: auto; overflow: visible; }
  .entry-landing .directory__header { position: relative; inset: auto; height: auto; width: auto; z-index: 30001; justify-content: flex-start; }
  .entry-intro, .entry-footer { background: transparent; line-height: normal; }
  .entry-intro { width: min(760px, calc(100% - 438px)); }
  .entry-intro .hero-summary { width: 100%; }
  .entry-landing.landing-page::before { opacity: 1; filter: none; background-size: auto; background-position: 0 0; background-repeat: repeat; }
}
/* Compact browser entry keeps the header sticky inside its single scroll area,
   so content passes behind the translucent background instead of being clipped. */
@media(max-width:999px) {
  .entry-landing:not([data-native-entry]) .directory__header { top: 38px; left: 36px; right: 36px; }
  ion-modal.entry-view--gf-auth[data-view-compact-entry] { --width: 100%; --max-width: 100%; --max-height: var(--entry-viewport, 100dvh); }
  ion-modal.entry-view--gf-auth[data-view-compact-entry]::part(content) { top: var(--entry-viewport-top, 0px); bottom: auto; right: 0; translate: none; height: var(--entry-viewport, 100dvh); max-height: var(--entry-viewport, 100dvh); pointer-events: none; transition: none; }
  .entry-landing .entry-view--gf-auth[data-view-compact-entry] .directory__header { position: sticky; inset: 0 0 auto; flex: 0 0 auto; height: auto; padding: 38px 36px; background: linear-gradient(to bottom, rgb(0 6 5 / .88) 0%, rgb(0 6 5 / .8) 40%, rgb(0 6 5 / .6) 60%, rgb(0 6 5 / .3) 80%, rgb(0 6 5 / .08) 92%, rgb(0 6 5 / 0) 100%); pointer-events: auto; }
  .entry-view--gf-auth[data-view-compact-entry] ion-content { flex: 1; height: auto; min-height: 0; }
  .entry-view--gf-auth[data-view-compact-entry] ion-content::part(scroll) { display: flex; flex-direction: column; max-height: none; scrollbar-width: none; }
  .entry-view--gf-auth[data-view-compact-entry] .entry-stack,
  :is(.gf-auth[data-compact-entry], :where(.entry-root[data-view=auth] .directory:has(> .gf-auth[data-entry-static]))) { display: flex; flex-direction: column; flex: 1; }
  :is(.gf-auth[data-compact-entry], :where(.entry-root[data-view=auth] .directory:has(> .gf-auth[data-entry-static]))) .entry-sheet__body { display: flex; flex-direction: column; align-items: center; flex: 1; padding: 44px 36px 28px; }
  :is(.gf-auth[data-compact-entry], :where(.entry-root[data-view=auth] .directory:has(> .gf-auth[data-entry-static]))) :is(.entry-intro, .entry-footer) { display: flex; opacity: 1; visibility: visible; pointer-events: auto; background: transparent; }
  :is(.gf-auth[data-compact-entry], :where(.entry-root[data-view=auth] .directory:has(> .gf-auth[data-entry-static]))) .entry-intro { flex-direction: column; width: 390px; max-width: 100%; gap: 16px; padding: 0; margin: 0; flex-shrink: 0; }
  :is(.gf-auth[data-compact-entry], :where(.entry-root[data-view=auth] .directory:has(> .gf-auth[data-entry-static]))) .hero-summary { display: block; margin: 0; color: #eaf3ef; font: 400 18px/28px 'IBM Plex Sans', sans-serif; }
  .gf-auth[data-compact-entry]:not([data-step=providers]) .entry-intro { display: none; }
  :is(.gf-auth[data-compact-entry], :where(.entry-root[data-view=auth] .directory:has(> .gf-auth[data-entry-static]))) .hero-summary strong { font-weight: 700; font-synthesis: weight; }
  :is(.gf-auth[data-compact-entry], :where(.entry-root[data-view=auth] .directory:has(> .gf-auth[data-entry-static]))) input { scroll-margin-block: 16px; }
  :is(.gf-auth[data-compact-entry], :where(.entry-root[data-view=auth] .directory:has(> .gf-auth[data-entry-static]))) .hero-title { display: none; }
  :is(.gf-auth[data-compact-entry], :where(.entry-root[data-view=auth] .directory:has(> .gf-auth[data-entry-static]))) .hero-promise { margin: 0; color: #accec0; font: 500 16px/24px Manrope, sans-serif; }
  :is(.gf-auth[data-compact-entry], :where(.entry-root[data-view=auth] .directory:has(> .gf-auth[data-entry-static]))) .gf-panel { box-sizing: border-box; width: 390px; max-width: 100%; padding: var(--gf-panel-pad) 24px var(--gf-panel-pad-bottom, var(--gf-panel-pad)); margin: 48px 0 46px; flex-shrink: 0; pointer-events: auto; }
  :is(.gf-auth[data-compact-entry], :where(.entry-root[data-view=auth] .directory:has(> .gf-auth[data-entry-static]))) .entry-footer { width: 100%; margin-top: auto; padding-top: 22px; border-top: 1px solid #8fd19e33; align-items: center; justify-content: space-between; gap: 24px; flex-shrink: 0; font: 400 14px/20px 'IBM Plex Sans', sans-serif; color: #a9b8b4; }
  :is(.gf-auth[data-compact-entry], :where(.entry-root[data-view=auth] .directory:has(> .gf-auth[data-entry-static]))) .entry-footer p { margin: 0; }
  :is(.gf-auth[data-compact-entry], :where(.entry-root[data-view=auth] .directory:has(> .gf-auth[data-entry-static]))) .entry-footer nav { display: flex; gap: 24px; flex-shrink: 0; }
  :is(.gf-auth[data-compact-entry], :where(.entry-root[data-view=auth] .directory:has(> .gf-auth[data-entry-static]))) .entry-footer a { color: #a9b8b4; text-decoration: none; }
  :is(.gf-auth[data-compact-entry], :where(.entry-root[data-view=auth] .directory:has(> .gf-auth[data-entry-static]))) .entry-footer a:hover { color: #edf4f1; }
  :is(.gf-auth[data-compact-entry], :where(.entry-root[data-view=auth] .directory:has(> .gf-auth[data-entry-static]))) .entry-footer a:active { color: #10b981; }
  :is(.gf-auth[data-compact-entry], :where(.entry-root[data-view=auth] .directory:has(> .gf-auth[data-entry-static]))) .site-operator-prefix { display: none; }
}
@media(max-width:700px) {
  .entry-landing:not([data-native-entry]) .directory__header { top: calc(env(safe-area-inset-top) + 22px); left: max(24px, env(safe-area-inset-left)); right: max(24px, env(safe-area-inset-right)); }
  .entry-landing .entry-view--gf-auth[data-view-compact-entry] .directory__header { padding: calc(env(safe-area-inset-top) + 22px) max(24px, env(safe-area-inset-right)) 22px max(24px, env(safe-area-inset-left)); }
  .entry-view--gf-auth[data-view-compact-entry] .account-trigger { top: calc(env(safe-area-inset-top) + 78px); right: max(24px, env(safe-area-inset-right)); }
  :is(.gf-auth[data-compact-entry], :where(.entry-root[data-view=auth] .directory:has(> .gf-auth[data-entry-static]))) .entry-sheet__body { padding: 24px 24px 18px; }
  :is(.gf-auth[data-compact-entry], :where(.entry-root[data-view=auth] .directory:has(> .gf-auth[data-entry-static]))) .entry-intro { margin-bottom: auto; }
  :is(.gf-auth[data-compact-entry], :where(.entry-root[data-view=auth] .directory:has(> .gf-auth[data-entry-static]))) .hero-summary { font-size: 16px; line-height: 24px; }
  :is(.gf-auth[data-compact-entry], :where(.entry-root[data-view=auth] .directory:has(> .gf-auth[data-entry-static]))) .gf-panel { width: 100%; padding: 0; margin: 32px 0; }
  :is(.gf-auth[data-compact-entry], :where(.entry-root[data-view=auth] .directory:has(> .gf-auth[data-entry-static]))) .entry-footer { margin-top: 0; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 0; border-top: 0; }
  :is(.gf-auth[data-compact-entry], :where(.entry-root[data-view=auth] .directory:has(> .gf-auth[data-entry-static]))) .site-operator { font-size: 13px; line-height: 19px; }
}

/* Before hydration, ordinary HTML uses the same compact page spacing and form.
   The controller moves these nodes into Ionic once sign-in becomes interactive. */
.entry-root:not([data-view=auth]) .gf-auth[data-entry-static] { display: none; }
.entry-root[data-view=auth]:has(.directory > .gf-auth[data-entry-static]) > #entry-dialog { visibility: hidden; }
@media(min-width:1000px) {
  .gf-auth[data-entry-static] { position: absolute; right: 0; top: 50dvh; translate: 0 -50%; width: 390px; z-index: 4; }
  .gf-auth[data-entry-static] .gf-auth__consent { position: absolute; top: 100%; }
}
@media(max-width:999px) {
  .entry-root[data-view=auth] .directory:has(> .gf-auth[data-entry-static]) { position: relative; display: flex; flex-direction: column; align-items: center; height: 100%; min-height: 100dvh; padding: 0 36px 28px; }
  .directory > .gf-auth[data-entry-static], .gf-auth[data-entry-static] > .entry-sheet__body { display: contents; }
  .entry-root[data-view=auth] .directory:has(> .gf-auth[data-entry-static]) > .directory__header { position: sticky; inset: 0 0 auto; height: auto; min-height: 0; width: calc(100% + 72px); flex-shrink: 0; padding: 38px 36px; }
  .entry-root[data-view=auth] .directory:has(> .gf-auth[data-entry-static]) > .world-hero { display: none; }
  .entry-root[data-view=auth] .directory:has(> .gf-auth[data-entry-static]) > .entry-intro { margin-top: 44px; }
}
@media(max-width:700px) {
  .entry-root[data-view=auth] .directory:has(> .gf-auth[data-entry-static]) { padding: 0 24px 18px; }
  .entry-root[data-view=auth] .directory:has(> .gf-auth[data-entry-static]) > .directory__header { width: calc(100% + 48px); padding: calc(env(safe-area-inset-top) + 22px) 24px 22px; }
  .entry-root[data-view=auth] .directory:has(> .gf-auth[data-entry-static]) > .entry-intro { margin-top: 24px; }
}

/* Mobile app badges, offered only on the website's signed-out front page
   (src/app-badges.js). Native hosts never contain this markup. */
.store-badges { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
.store-badge { box-sizing: border-box; display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 14px 0 12px; border: 1px solid #a6a6a6; border-radius: 8px; background: #000; color: #fff; text-decoration: none; transition: border-color 180ms ease; }
@media(hover:hover) { a.store-badge:hover { border-color: #edf4f1; } }
a.store-badge:focus-visible { outline: 2px solid #10b981; outline-offset: 2px; }
.store-badge__logo { width: 19px; height: 24px; flex-shrink: 0; }
.store-badge__label { display: flex; flex-direction: column; text-align: left; }
.store-badge__eyebrow { font: 500 10px/12px 'IBM Plex Sans', sans-serif; }
.store-badge__eyebrow--caps { letter-spacing: .04em; text-transform: uppercase; }
.store-badge__name { font: 700 19px/22px Manrope, sans-serif; letter-spacing: -.02em; white-space: nowrap; }

/* Desktop and tablet: beneath the sign-in providers, on the first step only. */
.gf-auth__get-app { display: flex; flex-direction: column; align-items: center; gap: 20px; padding-top: 20px; }
.gf-auth__get-app-divider { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; color: #a9b8b4; font: 500 12px/16px 'IBM Plex Sans', sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.gf-auth__get-app-divider::before, .gf-auth__get-app-divider::after { content: ''; flex: 1; height: 1px; background: #2e3f38; }
.gf-auth__get-app .store-badges { justify-content: center; }
.gf-auth:not([data-step=providers]) .gf-auth__get-app,
.gf-auth[data-deletion] .gf-auth__get-app,
[data-native-entry] .gf-auth__get-app { display: none; }

/* Phones: the app offer stands in for the sign-in form until the visitor
   chooses "Continue in browser" (data-continue-in-browser on the root, or the
   form as the URL target before scripts load). Deletion always shows the form.
   A browser that cannot run the game always shows the offer, without the link. */
.entry-get-app { display: none; }
.entry-get-app__continue { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #a9b8b4; font: 600 15px/20px Manrope, sans-serif; text-decoration: none; transition: color 180ms ease; }
.entry-get-app__continue svg { width: 16px; height: 16px; }
@media(hover:hover) { .entry-get-app__continue:hover { color: #edf4f1; } }
.entry-get-app__continue:active { color: #10b981; }

/* A browser that cannot run the game (data-webgpu-unsupported on the root,
   see webgpu-support.js): the notice replaces sign-in, which never mounts, and
   phones offer only the apps. */
.gf-auth__unsupported, .gf-auth__get-app-only, .entry-get-app__unsupported { display: none; }
.entry-get-app__unsupported { margin: 0; color: #a9b8b4; font: 500 15px/20px Manrope, sans-serif; }
.entry-get-app__unsupported strong { display: block; color: #e8efec; font-weight: 700; }
.entry-root[data-webgpu-unsupported] .entry-get-app__unsupported { display: block; }
.entry-root[data-webgpu-unsupported] :is(.entry-get-app__continue, .gf-auth__consent) { display: none; }
@media(min-width:701px) {
  .entry-root[data-webgpu-unsupported] .gf-auth[data-browser-entry][data-step] :is(.gf-auth__header, .gf-auth__providers, .gf-auth__email-option, .gf-auth__form, .gf-auth__get-app-offer) { display: none; }
  .entry-root[data-webgpu-unsupported] .gf-auth__unsupported { display: block; }
  .entry-root[data-webgpu-unsupported] .gf-auth__get-app-only { display: inline; }
}
/* The hidden consent line spaced the compact column's panel from the footer. */
@media(max-width:999px) { .entry-root[data-webgpu-unsupported] .gf-auth[data-entry-static] .gf-panel { margin-bottom: 46px; } }

/* Restoring a stored session: a quiet status after a beat, so a quick restore
   never flashes it, with a way out if the restore stalls. */
.entry-restoring { display: none; }
.entry-root[data-view=restoring] .entry-restoring { position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; text-align: center; pointer-events: none; animation: entry-restoring-in 240ms ease 800ms both; }
.entry-restoring__label { margin: 0; color: #edf4f1; font: 600 16px/24px Manrope, sans-serif; }
.entry-restoring__escape { min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: #a9b8b4; font: 600 15px/20px Manrope, sans-serif; cursor: pointer; pointer-events: auto; transition: color 180ms ease; }
@media(hover:hover) { .entry-restoring__escape:hover { color: #edf4f1; } }
.entry-restoring__escape:active { color: #10b981; }
.entry-restoring__escape:focus-visible { outline: 2px solid #10b981; outline-offset: 2px; }
@keyframes entry-restoring-in { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }
@media (prefers-reduced-motion: reduce) { .entry-root[data-view=restoring] .entry-restoring { animation-duration: 1ms; } }
@media(max-width:700px) {
  .gf-auth__get-app { display: none; }
  .entry-root[data-view=auth]:not([data-native-entry]):is([data-webgpu-unsupported], :not([data-continue-in-browser]):not(:has(#auth:target, .gf-auth[data-deletion]))) .entry-get-app { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 12px; }
  .entry-root[data-view=auth]:not([data-native-entry]):is([data-webgpu-unsupported], :not([data-continue-in-browser]):not(:has(#auth:target, .gf-auth[data-deletion]))) :is(.gf-auth .gf-panel, .gf-auth__consent) { display: none; }
  .entry-root[data-view=auth]:not([data-native-entry]):is([data-webgpu-unsupported], :not([data-continue-in-browser]):not(:has(#auth:target, .gf-auth[data-deletion]))) .entry-intro .hero-title { display: block; }
  .entry-root[data-view=auth]:not([data-native-entry]):is([data-webgpu-unsupported], :not([data-continue-in-browser]):not(:has(#auth:target, .gf-auth[data-deletion]))) .entry-intro .hero-promise { color: #54d7a0; font-weight: 700; }
}
/* On phones the two badges share one row at equal widths; their names scale
   down on narrow screens instead of wrapping onto a second row. */
.entry-get-app .store-badges { flex-wrap: nowrap; width: 100%; max-width: 340px; gap: 10px; }
.entry-get-app .store-badges > * { flex: 1 1 0; min-width: 0; }
.entry-get-app .store-badge { width: 100%; justify-content: center; gap: 7px; padding-inline: 8px; }
.entry-get-app .store-badge__name { font-size: clamp(14px, 4.4vw, 19px); }

/* The landing headline keeps its desktop treatment on tablet and phone front
   pages: on tablet beside the sign-in, on phones with the app offer. */
@media(max-width:999px) {
  .entry-root[data-view=auth]:not([data-native-entry]):not(:has(.gf-auth[data-deletion])) .entry-intro .hero-title { display: block; margin: 0 0 8px; color: #edf4f1; font: 400 64px/.84 'Archivo Black', sans-serif; letter-spacing: -.065em; text-transform: uppercase; }
  .entry-root[data-view=auth]:not([data-native-entry]):not(:has(.gf-auth[data-deletion])) .entry-intro .hero-title > span { display: block; }
  .entry-root[data-view=auth]:not([data-native-entry]):not(:has(.gf-auth[data-deletion])) .entry-intro .hero-title .period { color: #10b981; }
}
@media(max-width:700px) {
  .entry-root[data-view=auth]:not([data-native-entry]):not(:has(.gf-auth[data-deletion])) .entry-intro .hero-title { display: none; font-size: clamp(38px, 13vw, 56px); }
  .entry-root[data-view=auth]:not([data-native-entry]):is([data-webgpu-unsupported], :not([data-continue-in-browser]):not(:has(#auth:target, .gf-auth[data-deletion]))) .entry-intro .hero-title { display: block; }
}
/* Tablet: the compact column widens with the screen instead of keeping the
   phone's 390px width, so the side margins stay proportionate. */
@media(min-width:701px) and (max-width:999px) {
  :is(.gf-auth[data-compact-entry], :where(.entry-root[data-view=auth] .directory:has(> .gf-auth[data-entry-static]))) :is(.entry-intro, .gf-panel) { width: min(560px, 100%); }
  :is(.gf-auth[data-compact-entry], :where(.directory:has(> .gf-auth[data-entry-static]))) .gf-auth__consent { max-width: min(560px, 100%); }
  .entry-root[data-view=auth]:not([data-native-entry]):not(:has(.gf-auth[data-deletion])) .entry-intro .hero-title { font-size: clamp(64px, 10vw, 80px); }
}