/* =============================================================
   ZEYD ONLINE - Portal responsive rules
   -------------------------------------------------------------
   Desktop gets the richest composition; tablet/mobile get an
   intentionally simplified layout, not a shrunk desktop.
   ============================================================= */

/* -------------------------------------------------------------
   LARGE DESKTOP - slightly richer hero art crop
   ------------------------------------------------------------- */
@media (min-width: 1600px) {
  .hero__bg { background-position: center 32%; }
}

/* -------------------------------------------------------------
   LAPTOP / SMALL DESKTOP
   ------------------------------------------------------------- */
@media (max-width: 1180px) {
  .p-nav__inner { gap: 0.75rem; }
  .p-nav__links { display: none; }
  .p-nav__actions { margin-left: auto; }
  .gates__track { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; }
  .devlog__grid { grid-template-columns: 1fr; }
  .devlog__card--feature { grid-row: auto; min-height: 260px; }
}

/* -------------------------------------------------------------
   TABLET
   ------------------------------------------------------------- */
@media (max-width: 900px) {
  :root { --nav-h: 60px; }

  .p-nav__brand span:last-child { display: none; }
  .p-nav__actions .p-btn--nav:not(.p-btn--primary) { display: none; }

  .hero__title { max-width: 15ch; }

  .beasts__grid {
    grid-template-columns: 1fr;
    max-width: 680px;
  }

  .beasts__card {
    min-height: clamp(430px, 74vh, 580px);
  }

  .forge__rail { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
  .forge__rail::before { display: none; }
  .forge__scrolls { grid-template-columns: repeat(2, 1fr); row-gap: 1.1rem; }

  .p-footer__grid { grid-template-columns: 1fr 1fr; row-gap: 2.2rem; }
}

/* -------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------- */
@media (max-width: 640px) {
  .p-language__trigger { min-height: 44px; }
  .p-language__menu .language-flag { min-height: 44px; }

  .hero { align-items: flex-end; }
  .hero__content { padding-top: calc(var(--nav-h) + 2vh); }
  .hero__brand { height: 54px; margin-left: -12px; }
  .hero__brand-circle { width: 82px; height: 82px; margin-top: -41px; }
  .hero__brand-mark { margin-left: 3.8rem; font-size: 1.05rem; letter-spacing: 0.22em; text-indent: 0.22em; }
  .hero__title { font-size: clamp(1.9rem, 7.2vw, 2.5rem); max-width: 18ch; }
  .hero__sub { max-width: 34ch; font-size: 0.9rem; }
  .hero__cta { align-items: stretch; }
  .hero__play { justify-content: center; }
  .hero__meta { flex-wrap: wrap; }
  /* Stays absolute (never re-enters the hero's flex row) but
     relocates to the top-right, under the nav, where the art has
     open sky rather than the bottom-right where stacked hero copy
     now runs the full width. */
  .world-hud { top: calc(var(--nav-h) + 1rem); bottom: auto; }

  .beasts__headline { max-width: 18ch; font-size: clamp(1.3rem, 6vw, 1.75rem); }
  .beasts__text { max-width: 38ch; font-size: 0.82rem; }

  .gates__rail { padding-inline: 0.75rem; }
  .gates__track { gap: 0.5rem; }
  .gates__body { padding: 0.6rem 0.55rem 0.7rem; }
  .gates__tag { display: none; }

  .forge__rail { grid-template-columns: 1fr 1fr; }
  .forge__art { height: 130px; }

  .devlog__card { min-height: 220px; padding: 1.2rem 1.3rem; }

  .p-footer__grid { grid-template-columns: 1fr; row-gap: 1.8rem; }
  .p-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* -------------------------------------------------------------
   Narrow phones: trim gutters, cap particle-bearing layers
   ------------------------------------------------------------- */
@media (max-width: 420px) {
  :root { --p-gutter: 1rem; }
  .hero__title { max-width: 15ch; }
  .hero__brand { height: 46px; }
  .hero__brand-circle { width: 68px; height: 68px; margin-top: -34px; }
  .hero__brand-mark { margin-left: 3.2rem; font-size: 0.92rem; }
}

/* Player guide remains reachable in the mobile header. */
@media (max-width: 1180px) { .p-nav__links { display: flex; } }
@media (max-width: 640px) {
  .p-nav__inner { gap: .4rem; padding-inline: .6rem; }
  .p-nav__links { margin-left: auto; }
  .p-nav__link { font-size: .62rem; letter-spacing: .02em; padding-inline: .2rem; }
  .p-nav__actions { gap: .4rem; margin-left: 0; }
  .p-nav__actions .p-btn--primary { font-size: .65rem; padding-inline: .55rem; letter-spacing: .06em; }
}