/* Bounded responsive corrections for the approved art direction. */
.header .navigation,
.prepare-account-actions,
.prepare-social-buttons,
.play-account-actions,
.play-step {
  min-width: 0;
}

.header .menu-toggle {
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
}

/* Keep the hero's normal viewport height, while letting enlarged copy grow.
   Its bottom row now contributes to height instead of covering the content. */
.hero-v6 {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: clamp(880px, calc(100svh - 80px), 1200px);
  max-height: none;
}

.hero-v6 .hero-inner {
  flex: 1;
  height: auto;
  min-height: 0;
  padding-bottom: 100px;
}

.hero-v6 .hero-bottom {
  position: relative;
  inset: auto;
  transform: none;
  flex-shrink: 0;
  margin: 0 auto 35px;
}

.hero-v6 .hero-copy,
.hero-v6 .hero-entry,
.gather .gather-copy {
  container-type: inline-size;
}

.hero-v6 .hero-entry {
  width: 100%;
}

@media (min-width: 761px) {
  .hero-v6 h1 {
    font-size: min(9.5rem, 34cqi);
  }
}

@media (min-width: 761px) and (max-width: 1500px) {
  .hero-v6 h1 {
    font-size: min(8.3rem, 34cqi);
  }
}

.hero-v6 .countdown,
.gather .opening-start .countdown {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr) auto) minmax(0, 1fr);
  justify-content: normal;
  gap: 5px;
}

.hero-v6 .countdown > div,
.gather .opening-start .countdown > div {
  min-width: 0;
  width: auto;
}

.hero-v6 .countdown b {
  min-height: 1em;
  font-size: min(3.3rem, 18cqi);
}

.gather .opening-start .countdown b {
  min-height: 1em;
  font-size: min(3.4rem, 18cqi);
}

.hero-v6 .countdown i,
.gather .opening-start .countdown i {
  font-size: min(1.8rem, 9cqi);
}

.hero-v6 .countdown span,
.gather .opening-start .countdown span {
  font-size: max(.625rem, 10px);
  letter-spacing: .05em;
  overflow-wrap: anywhere;
}

.start .start-steps h3 {
  min-height: 2.3em;
}

.start .start-steps p {
  min-height: 10rem;
}

.prepare-account-actions {
  display: grid;
  gap: 17px;
}

.start .start-steps .button,
.play-dialog .button,
.dialog-secondary {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.start .prepare-account-actions .button,
.start .start-steps article > .button {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  text-align: left;
  padding-inline: 22px;
  line-height: 1.5;
}

.prepare-account-actions .text-link {
  justify-self: start;
  max-width: 100%;
  font-size: .8125rem;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.prepare-social-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  max-width: none;
}

.start .prepare-social-buttons .button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  gap: 0;
  min-height: 58px;
  padding: 12px 6px;
  font-size: .875rem;
  line-height: 1.15;
  text-align: center;
  letter-spacing: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.start .prepare-social-buttons .button > span {
  display: none;
}

.start .start-steps .button > span,
.play-dialog .button > span,
.dialog-secondary > span {
  flex-shrink: 0;
}

.play-dialog {
  max-height: calc(100svh - 32px);
  max-height: calc(100dvh - 32px);
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.play-dialog .play-step {
  border-top: 1px solid #9aacc23b;
  margin-top: 26px;
  padding-top: 24px;
}

.play-dialog .play-step-heading {
  display: flex;
  align-items: baseline;
  gap: 14px;
  color: #f3eadd;
  font: 600 1rem/1.5 Inter, Arial, sans-serif;
  letter-spacing: -.02em;
}

.play-step-heading > span {
  flex-shrink: 0;
  color: #cfb59a;
  font: 400 1.7rem/1 Beaufort, Georgia, serif;
}

.play-dialog .play-step > p {
  color: #c5cfdd;
  font-size: .875rem;
  line-height: 1.8;
  margin: 14px 0 18px;
}

.play-dialog .button {
  gap: 14px;
  min-height: 58px;
  padding: 15px 20px;
  text-align: left;
}

.play-dialog .dialog-secondary {
  gap: 12px;
  margin-top: 12px;
  padding: 13px 17px;
  font-size: .8125rem;
  line-height: 1.7;
}

.play-dialog .dialog-client.button.outline {
  border-color: #929cac6b;
  background: transparent;
  color: #e9e1d6;
  box-shadow: none;
  font-size: .9375rem;
}

.play-dialog .dialog-client.button.outline:hover {
  background: #273342;
}

.stages .stage-wiki {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.faq .faq-list summary > span {
  flex-shrink: 0;
}

.gather .community-links,
.gather .community-links > a {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
  .hero-v6 {
    min-height: 1060px;
  }

  .hero-v6 .hero-inner {
    align-content: center;
    padding-bottom: 60px;
  }
}

@media (max-width: 1080px) {
  .header .navigation {
    top: 100%;
    max-height: calc(100svh - 72px);
    max-height: calc(100dvh - 72px);
    overscroll-behavior: contain;
  }

  .header .navigation.open {
    gap: 9px;
  }

  .header .navigation > a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-block: 4px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .header .auth > .button {
    min-width: 0;
    white-space: normal;
    text-align: left;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .start .start-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 42px 30px;
  }

  .start .start-steps article:nth-child(3) {
    grid-column: 1 / -1;
  }

  .start .start-steps article:nth-child(3) h3,
  .start .start-steps article:nth-child(3) p {
    min-height: 0;
  }

  .prepare-social-buttons {
    width: calc((100% - 30px) / 2);
  }
}

@media (max-width: 760px) {
  .hero-v6 {
    min-height: 0;
  }

  .hero-v6 .hero-inner {
    padding-bottom: 50px;
  }

  .hero-v6 .hero-bottom {
    margin-bottom: 30px;
  }

  .hero-v6 .hero-facts {
    flex-wrap: wrap;
  }

  .hero-v6 .hero-facts span {
    flex: 1 1 85px;
    min-width: 0;
    font-size: max(.625rem, 10px);
    overflow-wrap: anywhere;
  }

  .hero-v6 .hero-facts b {
    font-size: max(.75rem, 12px);
    overflow-wrap: anywhere;
  }

  .start .start-steps h3,
  .start .start-steps p {
    min-height: 0;
  }

  .prepare-social-buttons {
    width: 100%;
    max-width: none;
  }

  .stages .stage-tabs small {
    padding-left: max(48px, min(6rem, 14vw));
    font-size: max(.625rem, 10px);
    overflow-wrap: anywhere;
  }

  .stages .stage-tabs div > span {
    font-size: max(.75rem, 12px);
  }

  .zen .lord-carousel .lord-controls > span {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
  }
}

@media (max-width: 420px) {
  .play-dialog {
    width: calc(100% - 24px);
    padding: 42px 20px 26px;
  }

  .play-dialog h2 {
    font-size: clamp(2rem, 9.6vw, 2.65rem);
    line-height: 1.1;
  }

  .play-dialog .button {
    padding-inline: 16px;
  }

  .zen .lord-carousel .lord-slide::after {
    height: max(52%, 125px);
  }
}

@media (max-width: 360px) {
  .start .prepare-social-buttons .button {
    font-size: .8125rem;
  }
}

@media (max-height: 600px) {
  .play-dialog {
    padding: 42px 24px 24px;
  }

  .play-dialog h2 {
    font-size: 2.5rem;
  }

  .play-dialog > p:not(.eyebrow) {
    margin-block: 18px;
  }

  .play-dialog .play-step {
    margin-top: 20px;
    padding-top: 18px;
  }
}

/* Four concise facts requested for the bottom of the main screen. */
.hero-v6 .hero-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  flex: 1;
  min-width: 0;
  max-width: 840px;
  gap: 20px;
}
.hero-v6 .hero-facts > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.hero-v6 .hero-facts > span + span { padding-left: 20px; }
@media (max-width: 1100px) {
  .hero-v6 .hero-facts { flex: none; width: 100%; max-width: none; }
}
@media (max-width: 760px) {
  .hero-v6 .hero-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 14px;
  }
  .hero-v6 .hero-facts > span + span { padding-left: 14px; }
  .hero-v6 .hero-facts > span:nth-child(3) { border-left: 0; padding-left: 0; }
}

/* v28: a compact referral explanation in the approved composition. */
.referral-steps { list-style: none; margin: 0 0 30px; padding: 0; max-width: 470px; }
.referral-steps li { display: flex; gap: 18px; align-items: baseline; padding: 13px 0; border-top: 1px solid #a3b1bf30; }
.referral-steps li > span { flex: 0 0 25px; color: #d0b394; font: 400 1.25rem/1 Beaufort, Georgia, serif; }
.referral-steps b { font-size: .9375rem; color: #f0e4d3; font-weight: 600; }
.referral-steps p { margin: 5px 0 0; color: #bdc8d6; font-size: .875rem; line-height: 1.6; }
.play-dialog .dialog-register { font-size: .9375rem; }
@media (max-width: 760px) {
 .referral-steps { margin-bottom: 25px; }
 .referral-steps li { gap: 14px; }
 .journey .referral .referral-cta { width: 100%; justify-content: space-between; }
}

@media (max-width: 760px) {
 .referral-copy { display: flex; flex-direction: column; }
 .referral-steps { order: 1; margin: 26px 0 0; }
}
/* Tablet stage tabs retain complete names and a readable video frame. */
@media (min-width: 761px) and (max-width: 1000px) {
 .stages .stage-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; border: 0; }
 .stages .stage-tabs button { min-height: 110px; padding: 18px 20px; gap: 22px; border: 1px solid #9da7b43a; }
 .stages .stage-tabs b { font-size: 1rem; }
 .stages .stage-panel { grid-template-columns: minmax(0,1fr); gap: 30px; }
 .stages .stage-illustration { height: auto; aspect-ratio: 1280 / 900; }
 .stages .stage-features div { grid-template-columns: 165px minmax(0,1fr); gap: 20px; }
 .stage-meta > div { grid-template-columns: 145px minmax(0,1fr); gap: 15px; }
}