/* A full-width panorama, with the character positioned beside the activity panel. */
.home-intro {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.home-intro .hero {
  flex: 1;
  display: grid;
  min-height: calc(570px + var(--header-height));
  background: transparent;
}
.home-intro .hero-art,
.home-intro .hero-shade,
.home-intro .hero-particles {
  mask-image: linear-gradient(180deg, #000 0%, #000 64%, #000000e6 76%, #00000080 89%, transparent 100%);
}
.home-intro .hero-inner {
  min-height: 100%;
  padding-top: calc(48px + var(--header-height));
  padding-bottom: 64px;
}
.intro-benefits { padding-top: 14px; padding-bottom: 28px; }
.intro-benefits .benefits { margin: 0; }
.home-content { padding-top: 44px; }
.hero-buttons .join-button { padding-left: 19px; padding-right: 18px; gap: 11px; }
.hero-buttons .join-button .join-button-play { width: auto; height: auto; }
.brand:focus-visible { outline: 2px solid var(--yellow); outline-offset: 5px; border-radius: 4px; }

@media (min-width: 1360px) {
  :root { --landing-width: 1480px; --activity-width: 286px; --page-gutter: max(48px, calc((100vw - var(--landing-width)) / 2)); }
  .container { width: min(var(--landing-width), calc(100% - 96px)); }
  .header-inner { height: 76px; gap: 26px; }
  .header .server-emblem { width: 56px; height: 56px; }
  .header .desktop-nav { gap: clamp(20px, 1.7vw, 32px); }
  .home-intro .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--activity-width);
    gap: 32px;
    align-items: center;
    padding-top: calc(52px + var(--header-height));
    padding-bottom: 70px;
  }
  .hero-art {
    left: calc(-100px - var(--page-gutter) - var(--page-gutter));
    right: 0;
    background-size: cover;
    background-position: right center;
  }
  .hero-shade {
    background: linear-gradient(90deg, #05090dad 0%, #05090d5c 28%, #05090d00 53%, #05090d0a 68%, #090e15a6 100%), linear-gradient(0deg, #090d10, transparent 24%, transparent 89%, #070a0e24);
  }
  .hero-copy { padding-left: 0; margin-top: 0; max-width: 650px; }
  .hero-copy .welcome { margin-left: 12px; padding: 7px 12px; }
  .hero-copy .hero-title { width: min(43vw, 620px); margin: 17px 0 14px; }
  .hero-copy .hero-modes { margin: 0 0 0 10px; padding: 9px 13px; font-size: 11px; }
  .hero-copy > p { margin: 24px 0 0 12px; font-size: 14px; line-height: 1.85; }
  .hero-copy .hero-buttons { margin: 28px 0 0 12px; }
  .hero-buttons .join-button, .hero-buttons .ip-button { min-height: 50px; font-size: 12px; }
  .hero-inner .activity-panel {
    width: 100%;
    align-self: start;
    padding: 18px 18px 10px;
    background: linear-gradient(145deg, #101720f5, #090f16f7);
    border-color: #46505b;
    box-shadow: 0 16px 45px #0005;
  }
  .activity-heading { padding-bottom: 17px; }
  .activity-heading strong { font-size: 24px; }
  .purchase { padding: 10px 0; }
  .intro-benefits .benefits { padding: 17px 12px; }
  .intro-benefits .benefits > div { gap: 15px; padding: 0 22px; }
  .intro-benefits .benefits strong { font-size: 12px; }
  .intro-benefits .benefits small { font-size: 10px; }
}

@media (min-width: 761px) and (max-width: 1359px) {
  .home-intro .hero { min-height: calc(590px + var(--header-height)); }
  .home-intro .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 245px;
    grid-template-rows: 1fr auto;
    align-items: start;
    column-gap: 24px;
    row-gap: 36px;
    padding-top: calc(58px + var(--header-height));
    padding-bottom: 30px;
  }
  .hero-copy { grid-column: 1 / -1; max-width: 540px; padding-left: 0; }
  .hero-copy .hero-title { width: min(59vw, 540px); margin-left: 0; }
  .hero-copy .welcome, .hero-copy .hero-modes, .hero-copy > p, .hero-copy .hero-buttons { margin-left: 8px; }
  .hero-art { left: 0; right: 0; bottom: 138px; background-position: 70% center; }
  .hero-inner .activity-panel { display: block; grid-column: 2; width: 245px; padding: 14px 16px 9px; align-self: end; }
  .activity-panel .purchase, .activity-panel .recent-title { display: none; }
  .activity-panel .activity-heading { padding-bottom: 10px; }
  .activity-panel .activity-heading strong { font-size: 21px; }
  .activity-panel .activity-heading > div > span { font-size: 9px; }
  .activity-panel .live-label { display: none; }
  .intro-benefits .benefits { padding-top: 20px; padding-bottom: 20px; }
}

@media (max-width: 760px) {
  .home-intro .hero { min-height: calc(550px + var(--header-height)); }
  .home-intro .hero-inner { display: flex; align-items: center; padding-top: calc(54px + var(--header-height)); padding-bottom: 66px; }
  .hero-copy { width: 100%; max-width: 490px; margin-top: 0; }
  .hero-art { left: 0; background-position: 67% center; }
  .hero-copy .hero-title { width: min(100%, 490px); margin: 15px 0 14px; }
  .hero-copy .welcome { margin-left: 8px; }
  .hero-copy .hero-modes, .hero-copy > p, .hero-copy .hero-buttons { margin-left: 5px; }
  .hero-copy > p { font-size: 13px; margin-top: 24px; }
  .hero-copy .hero-buttons { margin-top: 28px; flex-wrap: wrap; }
  .hero-buttons .join-button { padding-left: 16px; padding-right: 16px; }
  .intro-benefits { padding-top: 12px; padding-bottom: 22px; }
  .intro-benefits .benefits { padding-top: 20px; padding-bottom: 20px; }
  .home-content { padding-top: 26px; }
}

@media (max-width: 380px) {
  .hero-copy .hero-modes { font-size: 8px; gap: 6px; padding-left: 8px; padding-right: 8px; }
  .hero-buttons .join-button { padding-left: 12px; padding-right: 12px; gap: 8px; }
}