/* Shared mobile layout layer. Loaded last so every page gets the same touch-safe header,
   spacing and narrow-screen safeguards without changing the desktop art direction. */
:root {
  --mobile-gutter: clamp(16px, 5vw, 28px);
  --mobile-header-height: 68px;
}

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

img,
video,
svg {
  max-width: 100%;
}

button,
a,
input,
select,
summary {
  -webkit-tap-highlight-color: transparent;
}

button,
.primary-button,
.portal-button,
.download-main-button,
.auth-primary {
  min-height: 44px;
}

/* Shared fixed header */
@media (max-width: 850px) {
  .site-header,
  .site-header.is-scrolled {
    height: var(--mobile-header-height);
    min-height: var(--mobile-header-height);
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: var(--mobile-header-height);
    gap: 8px;
    padding: 0 var(--mobile-gutter);
  }

  .site-header > .brand {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    gap: 8px;
    font-size: 20px;
    letter-spacing: .13em;
  }

  .site-header > .brand .brand__mark {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
  }

  .site-header > .account-nav {
    position: static !important;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    min-width: 0;
    margin: 0;
    transform: none;
  }

  .site-header > .menu-toggle {
    position: static;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    width: auto;
    min-width: 44px;
    height: 38px;
    margin: 0 !important;
    padding: 8px 10px;
    font-size: 10px;
    letter-spacing: .12em;
  }

  .site-header > .site-nav,
  .site-header > .site-nav.is-open {
    top: var(--mobile-header-height);
    left: 0;
    right: 0;
    width: 100%;
    max-height: calc(100svh - var(--mobile-header-height));
    overflow-y: auto;
    padding: 8px var(--mobile-gutter) calc(12px + env(safe-area-inset-bottom));
    background: #061016f7;
    border-top: 1px solid var(--site-line);
    box-shadow: 0 18px 30px #02080c66;
  }

  .site-header > .site-nav a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 13px 0;
    border-bottom: 1px solid var(--site-line);
    font-size: 12px;
  }

  .site-header > .site-nav a::after {
    display: none;
  }

  .site-header .user-menu {
    position: fixed !important;
    top: calc(var(--mobile-header-height) + 8px) !important;
    right: var(--mobile-gutter) !important;
    left: var(--mobile-gutter) !important;
    width: auto !important;
    max-height: calc(100svh - var(--mobile-header-height) - 20px);
    overflow-y: auto;
  }

  .site-header .user-trigger {
    min-height: 44px;
    padding: 5px 0 !important;
  }

  .site-header .user-trigger__copy,
  .site-header .user-chevron {
    display: none;
  }

  .site-header .login-nav {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
  }

  .site-header .login-nav span:last-child {
    display: none;
  }

  .home-scroll-progress {
    top: var(--mobile-header-height);
  }
}

@media (max-width: 600px) {
  .home-chapters {
    right: var(--mobile-gutter);
    bottom: max(10px, env(safe-area-inset-bottom));
    left: var(--mobile-gutter);
    width: auto;
    justify-content: space-between;
  }

  .home-chapters a {
    flex: 1;
    justify-content: center;
    min-height: 38px;
    padding: 7px 5px;
  }
}

/* Home / game landing */
@media (max-width: 850px) {
  .home-experience .game-hero {
    min-height: 720px;
  }

  .home-experience .game-hero__copy {
    width: auto;
    margin: 0 var(--mobile-gutter) 108px;
    padding-left: 16px;
    border-left-width: 4px;
  }

  .home-experience .game-hero__copy::before {
    max-width: 100%;
    line-height: 1.35;
  }

  .home-experience .game-hero h1 {
    font-size: clamp(58px, 16vw, 88px);
    line-height: .78;
  }

  .home-experience .game-hero__copy > p:not(.eyebrow) {
    max-width: 36rem;
    font-size: 15px;
    line-height: 1.6;
  }

  .home-experience .hero-buttons {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
    margin-top: 24px;
  }

  .home-experience .hero-scroll {
    right: var(--mobile-gutter);
    bottom: 24px;
  }

  .home-experience .section-pad {
    padding: 76px var(--mobile-gutter);
  }

  .home-experience .intro h2,
  .home-experience .split-feature h2,
  .home-experience .sectors h2,
  .home-experience .news h2,
  .home-experience .final-cta h2 {
    font-size: clamp(45px, 13vw, 68px);
    line-height: .86;
  }

  .home-experience .intro__grid {
    gap: 26px;
  }

  .home-experience .feature-cards {
    gap: 12px;
    margin-top: 48px;
  }

  .home-experience .feature-card {
    min-height: 0;
    padding: 26px 22px 30px;
  }

  .home-experience .feature-card h3 {
    margin: 34px 0 10px;
    font-size: 31px;
  }

  .home-experience .split-feature {
    min-height: 0;
  }

  .home-experience .split-feature__image {
    min-height: 330px;
    clip-path: none;
  }

  .home-experience .split-feature__copy {
    padding: 64px var(--mobile-gutter) 76px;
  }

  .home-experience .section-head {
    gap: 20px;
  }

  .home-experience .sector-list {
    gap: 8px;
    margin-top: 42px;
  }

  .home-experience .sector-list span {
    padding: 11px 12px;
    font-size: 10px;
  }

  .home-experience .world-portal {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 38px;
    padding: 22px;
  }

  .home-experience .world-portal strong {
    font-size: clamp(23px, 7vw, 32px);
    line-height: 1;
  }

  .home-experience .news-grid {
    gap: 14px;
    margin-top: 38px;
  }

  .home-experience .news-main {
    min-height: 390px;
  }

  .home-experience .news-main > div {
    right: 22px;
    bottom: 22px;
    left: 22px;
  }

  .home-experience .news h3 {
    font-size: 26px;
  }

  .home-experience .news-side article {
    min-height: 180px;
    padding: 24px;
  }

  .home-experience .final-cta {
    min-height: 480px;
    padding: 70px var(--mobile-gutter);
  }

  .home-experience .site-footer {
    align-items: flex-start;
    padding: 28px var(--mobile-gutter) calc(28px + env(safe-area-inset-bottom));
  }

  .home-experience .site-footer p {
    line-height: 1.5;
  }
}

/* Worlds / atlas cards use a separate card markup from the original desktop layer. */
.worlds-page .world-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.worlds-page .world-card {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(210px, 270px) 1fr;
  padding: 0;
  overflow: hidden;
  transform: none;
}

.worlds-page .world-card:hover,
.worlds-page .world-card:nth-child(even) {
  transform: none;
}

.worlds-page .world-card__visual {
  position: relative;
  min-height: 210px;
  overflow: hidden;
  background: #10242d;
}

.worlds-page .world-card__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #071525cc, transparent 65%);
  pointer-events: none;
}

.worlds-page .world-card__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.worlds-page .world-card:hover .world-card__visual img {
  transform: scale(1.04);
}

.worlds-page .world-card__visual b {
  position: absolute;
  z-index: 1;
  top: 16px;
  right: 20px;
  color: #ffffffcc;
  font: 800 64px/.8 Impact, 'Arial Narrow', sans-serif;
  text-shadow: 3px 4px 0 #14274688;
}

.worlds-page .world-card__visual > span {
  position: absolute;
  z-index: 1;
  bottom: 16px;
  left: 18px;
  padding: 6px 8px;
  background: var(--yellow);
  color: #273859;
  font: 800 9px Arial, sans-serif;
  letter-spacing: .1em;
}

.worlds-page .world-card__copy {
  padding: 26px 28px 28px;
  background: #10243a;
}

.worlds-page .world-card__copy > small {
  display: inline-block;
  color: #80eff8;
  font: 800 9px Arial, sans-serif;
  letter-spacing: .12em;
}

.worlds-page .world-card h3 {
  margin: 11px 0 13px;
  color: #fff;
  font-size: clamp(35px, 4vw, 58px);
}

.worlds-page .world-card__copy > p {
  color: #c9dce4;
  line-height: 1.6;
}

.worlds-page .world-card dl {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin: 22px 0 0;
}

.worlds-page .world-card dl div {
  display: grid;
  gap: 5px;
}

.worlds-page .world-card dt {
  color: #8fc8d4;
}

.worlds-page .world-card dd {
  margin: 0;
  color: #fff;
  font: 800 11px Arial, sans-serif;
}

@media (max-width: 900px) {
  .worlds-page .world-card-grid {
    grid-template-columns: 1fr;
  }

  .worlds-page .world-card {
    grid-template-rows: minmax(210px, 300px) 1fr;
  }
}

@media (max-width: 850px) {
  .worlds-page .section-pad {
    padding: 76px var(--mobile-gutter);
  }

  .worlds-page .worlds-hero {
    min-height: 760px;
  }

  .worlds-page .worlds-hero__copy {
    width: auto;
    margin: 0 var(--mobile-gutter) 160px;
  }

  .worlds-page .worlds-hero h1 {
    font-size: clamp(58px, 15vw, 88px);
  }

  .worlds-page .worlds-hero__stats {
    left: var(--mobile-gutter);
    right: var(--mobile-gutter);
    bottom: 26px;
    justify-content: stretch;
    gap: 0;
    padding: 10px;
  }

  .worlds-page .worlds-hero__stats span {
    flex: 1;
    min-width: 0;
    padding: 6px 9px;
  }

  .worlds-page .intel-strip {
    grid-template-columns: 1fr 1fr;
    margin-top: 48px;
  }

  .worlds-page .intel-strip article {
    min-height: 185px;
    padding: 24px;
  }

  .worlds-page .world-filters {
    top: calc(var(--mobile-header-height) + 10px);
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .worlds-page .world-filters button {
    min-height: 44px;
  }

  .worlds-page .drop-cta {
    min-height: 500px;
    padding: 70px var(--mobile-gutter);
  }

  .worlds-page .drop-cta h2 {
    font-size: clamp(46px, 12vw, 70px);
  }
}

@media (max-width: 520px) {
  .worlds-page .worlds-hero {
    min-height: 780px;
  }

  .worlds-page .worlds-hero__copy {
    margin-bottom: 205px;
  }

  .worlds-page .worlds-hero__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .worlds-page .worlds-hero__stats span:last-child {
    display: none;
  }

  .worlds-page .intel-strip {
    grid-template-columns: 1fr;
  }

  .worlds-page .world-card__copy {
    padding: 22px;
  }

  .worlds-page .world-card h3 {
    font-size: 43px;
  }
}

/* Download */
@media (max-width: 850px) {
  .download-experience .download-hero {
    min-height: auto;
    padding: 120px var(--mobile-gutter) 72px;
  }

  .download-experience .download-hero h1 {
    font-size: clamp(58px, 15vw, 86px);
  }

  .download-experience .download-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 16px;
  }

  .download-experience .download-main-button {
    width: 100%;
    min-width: 0;
  }

  .download-experience .build-card {
    width: 100%;
  }

  .download-experience .download-flow,
  .download-experience .requirements-clean,
  .download-experience .download-faq {
    padding: 76px var(--mobile-gutter);
  }

  .download-experience .requirement-grid dl div {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}

@media (max-width: 520px) {
  .download-experience .build-card__visual {
    min-height: 190px;
    padding: 18px;
  }

  .download-experience .build-card__visual strong {
    font-size: 31px;
  }

  .download-experience .build-card dl {
    grid-template-columns: 1fr;
  }

  .download-experience .download-heading h2,
  .download-experience .download-faq h2 {
    font-size: 44px;
  }

  .download-experience .requirement-grid article {
    padding: 19px;
  }
}

/* Login / account */
@media (max-width: 760px) {
  .auth-page {
    min-height: 0;
    padding-top: var(--mobile-header-height);
  }

  .auth-visual {
    min-height: 305px;
  }

  .auth-visual__content {
    right: var(--mobile-gutter);
    bottom: 30px;
    left: var(--mobile-gutter);
  }

  .auth-visual h1 {
    font-size: clamp(50px, 14vw, 70px);
  }

  .auth-side {
    min-height: 0;
    padding: 42px var(--mobile-gutter) 86px;
  }

  .auth-card {
    width: 100%;
  }

  .auth-primary {
    min-width: 0;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    padding: 15px;
  }

  .auth-primary > span:nth-child(2) {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 12px;
  }

  .auth-primary small {
    line-height: 1.3;
  }

  .auth-profile {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
  }

  .auth-profile > b {
    grid-column: 2;
  }

  .auth-side footer {
    right: var(--mobile-gutter);
    bottom: 28px;
    left: var(--mobile-gutter);
    line-height: 1.4;
  }
}

/* Logged-in portal */
@media (max-width: 1050px) {
  .portal-shell {
    grid-template-columns: 1fr;
    padding-top: var(--mobile-header-height);
  }

  .portal-sidebar {
    position: static;
    height: auto;
    min-width: 0;
    padding: 10px var(--mobile-gutter);
  }

  .portal-sidebar nav {
    display: flex;
    gap: 5px;
    margin: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .portal-sidebar nav::-webkit-scrollbar {
    display: none;
  }

  .portal-sidebar nav a {
    flex: 0 0 auto;
    min-height: 44px;
    align-items: center;
    padding: 12px 14px;
  }

  .portal-content {
    padding: 34px var(--mobile-gutter) 60px;
  }

  .portal-welcome,
  .portal-grid,
  .portal-grid--wide,
  .profile-layout {
    grid-template-columns: 1fr;
  }

  .portal-welcome {
    gap: 26px;
  }

  .portal-profile-card {
    width: 100%;
    min-width: 0;
  }

  .stat-grid {
    margin: 36px 0;
  }

  .portal-panel {
    min-width: 0;
    padding: 20px;
  }

  .portal-actions {
    grid-template-columns: 1fr;
  }

  .danger-zone {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .pass-hero {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 26px;
  }

  .level-core {
    justify-items: start;
    min-width: 0;
  }

  .event-list > article {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .event-list > article form,
  .event-list > article .portal-button {
    width: 100%;
  }

  .bracket {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

@media (max-width: 600px) {
  .portal-welcome h1,
  .portal-title h1,
  .public-hero h1,
  .pass-hero h1 {
    font-size: clamp(47px, 13vw, 68px);
  }

  .stat-grid {
    grid-template-columns: 1fr 1fr;
  }

  .stat-grid article {
    min-height: 112px;
    padding: 18px 14px;
  }

  .stat-grid strong {
    font-size: 34px;
  }

  .panel-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .match-row {
    grid-template-columns: 42px minmax(0, 1fr) auto auto;
    gap: 8px;
  }

  .match-row > span:first-of-type {
    min-width: 0;
  }

  .match-row small,
  .mission small {
    overflow-wrap: anywhere;
  }

  .match-table__head {
    display: none;
  }

  .match-table article {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 14px;
  }

  .match-table article > :nth-child(n + 4) {
    display: none;
  }

  .profile-identity > img {
    width: 88px;
    height: 88px;
  }

  .reward-track article {
    grid-template-columns: 40px minmax(0, 1fr) auto;
  }

  .public-portal {
    padding: 112px var(--mobile-gutter) 64px;
  }

  .flash-stack {
    right: var(--mobile-gutter);
    left: var(--mobile-gutter);
    top: 80px;
  }

  .flash {
    font-size: 11px;
  }
}

/* News archive and long-form transmissions */
@media (max-width: 900px) {
  .news-hub {
    padding: 118px var(--mobile-gutter) 72px;
  }

  .news-hero,
  .news-featured,
  .news-archive__head,
  .patch-strip {
    grid-template-columns: 1fr;
  }

  .news-hero {
    gap: 22px;
    margin-bottom: 42px;
  }

  .news-featured__image {
    height: min(58vw, 360px);
  }

  .news-featured > div:last-child {
    padding: 28px var(--mobile-gutter);
  }

  .news-cards {
    grid-template-columns: 1fr 1fr;
  }

  .patch-strip {
    gap: 14px;
  }

  .transmission {
    padding: 114px var(--mobile-gutter) 60px;
  }

  .transmission-hero {
    display: block;
  }

  .transmission-hero__rail {
    height: auto;
    flex-direction: row;
    border-right: 0;
    border-bottom: 1px solid var(--tx-line);
    padding: 0 0 15px;
  }

  .transmission-hero__rail span {
    writing-mode: initial;
    transform: none;
    font: 800 10px Arial, sans-serif;
  }

  .transmission-hero h1 {
    margin-top: 26px;
    font-size: clamp(52px, 14vw, 78px);
  }

  .transmission-meta {
    margin-top: 32px;
  }

  .transmission-layout {
    display: block;
  }

  .transmission-index {
    position: static;
    margin-bottom: 54px;
  }

  .transmission-copy > section {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 14px;
    padding-bottom: 54px;
  }

  .transmission-copy section p {
    font-size: 16px;
  }

  .transmission-brief {
    padding: 28px 22px;
  }

  .transmission-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .transmission-nav {
    grid-template-columns: 1fr;
    margin-top: 64px;
  }

  .transmission-nav > span {
    display: none;
  }

  .transmission-nav a + a {
    align-items: flex-start;
    border-top: 1px solid var(--tx-line);
    border-left: 0;
    text-align: left;
  }
}

@media (max-width: 600px) {
  .news-hero h1,
  .news-featured h2 {
    font-size: clamp(48px, 13vw, 64px);
  }

  .news-featured__image {
    height: 250px;
  }

  .news-cards {
    grid-template-columns: 1fr;
  }

  .news-cards > a {
    min-height: 280px;
    padding: 28px 22px;
  }

  .news-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .news-filters button {
    min-height: 44px;
  }

  .transmission-copy > section > span {
    font-size: 27px;
  }

  .transmission-brief h2 {
    font-size: 37px;
  }
}

/* Interactive drop planner */
@media (max-width: 760px) {
  .intel-map-page {
    height: auto;
    display: block;
    padding-top: var(--mobile-header-height);
    overflow: visible;
  }

  .intel-sidebar {
    height: auto;
    padding: 28px var(--mobile-gutter) 22px;
  }

  .intel-sidebar h1 {
    font-size: clamp(46px, 13vw, 66px);
  }

  .intel-map {
    height: min(74svh, 680px);
    min-height: 500px;
  }

  .intel-toolbar {
    top: 10px;
    right: 10px;
  }

  .intel-toolbar button,
  .intel-toolbar output {
    min-width: 36px;
    height: 40px;
  }

  .intel-toolbar button:last-child {
    min-width: 0;
    font-size: 0;
  }

  .intel-toolbar button:last-child::after {
    content: 'RESET';
    font-size: 9px;
  }

  .intel-legend {
    right: 10px;
    bottom: 10px;
    left: 10px;
    flex-wrap: wrap;
    gap: 9px;
  }

  .intel-legend small {
    display: none;
  }
}

@media (max-width: 420px) {
  .intel-map {
    min-height: 470px;
  }

  .intel-map .map-marker > span {
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .intel-summary {
    gap: 0;
  }
}

/* Extra-small phones: prevent typography and controls from forcing a wider canvas. */
@media (max-width: 380px) {
  .site-header {
    gap: 5px;
    padding-inline: 12px;
  }

  .site-header > .brand {
    font-size: 18px;
  }

  .site-header > .brand .brand__mark {
    width: 29px;
    height: 29px;
    flex-basis: 29px;
  }

  .site-header > .menu-toggle {
    min-width: 40px;
    padding-inline: 7px;
  }

  .home-chapters a span {
    display: none;
  }

  .portal-panel,
  .auth-side {
    padding-inline: 16px;
  }

  .worlds-page .world-filters button,
  .news-filters button {
    padding-inline: 7px;
    font-size: 9px;
    letter-spacing: .04em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .worlds-page .world-card__visual img {
    transition: none;
  }
}



/* Compact landing-zone atlas */
.worlds-page .world-filters {
  position: relative;
  top: auto;
  margin: 30px 0 24px;
}

.worlds-page .world-card-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: start;
  gap: 16px;
  width: min(100%, 1450px);
  margin-inline: auto;
}

.worlds-page .world-card {
  display: grid !important;
  grid-template-rows: 190px auto !important;
  align-self: start;
  min-height: 0 !important;
  height: auto;
}

.worlds-page .world-card__visual {
  height: 190px;
  min-height: 0;
}

.worlds-page .world-card__copy {
  padding: 20px 22px 22px;
}

.worlds-page .world-card h3 {
  margin: 8px 0 10px;
  font-size: clamp(34px, 3.2vw, 48px);
}

.worlds-page .world-card__copy > p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}

.worlds-page .world-card dl {
  gap: 18px;
  margin-top: 16px;
}

@media (max-width: 900px) {
  .worlds-page .world-card-grid {
    grid-template-columns: 1fr !important;
    width: 100%;
  }

  .worlds-page .world-card {
    grid-template-rows: 220px auto !important;
  }

  .worlds-page .world-card__visual {
    height: 220px;
  }
}

@media (max-width: 520px) {
  .worlds-page .world-card {
    grid-template-rows: 175px auto !important;
  }

  .worlds-page .world-card__visual {
    height: 175px;
  }

  .worlds-page .world-card__copy {
    padding: 18px;
  }
}


/* Restore compact world cards with image overlays */
.worlds-page .world-filters {
  position: relative;
  top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  margin: 30px 0 28px;
  padding: 8px;
  background: #294d82;
  border: 3px solid #fff;
  border-radius: 7px;
  box-shadow: 6px 7px 0 rgba(31, 55, 87, .22);
}

.worlds-page .world-filters button {
  flex: 0 0 auto;
  min-width: 72px;
  min-height: 44px;
  padding: 10px 15px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #dbeeff;
  font: 800 10px Impact, 'Arial Narrow', sans-serif;
  letter-spacing: .08em;
  cursor: pointer;
}

.worlds-page .world-filters button:hover,
.worlds-page .world-filters button:focus-visible,
.worlds-page .world-filters button.is-active {
  background: #ffd84d;
  color: #23385d;
  box-shadow: 0 3px 0 #bd8e1f;
}

.worlds-page .world-card-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px;
  width: min(100%, 1450px);
  margin-inline: auto;
}

.worlds-page .world-card {
  position: relative;
  display: flex !important;
  min-height: 390px !important;
  height: 390px;
  padding: 0 !important;
  overflow: hidden;
  isolation: isolate;
  background: #10243a;
}

.worlds-page .world-card__visual {
  position: absolute;
  inset: 0;
  z-index: -1;
  height: auto;
  min-height: 0;
  background: #10243a;
}

.worlds-page .world-card__visual::after {
  background: linear-gradient(0deg, rgba(7, 21, 37, .98) 0%, rgba(7, 21, 37, .72) 35%, rgba(7, 21, 37, .08) 76%);
}

.worlds-page .world-card__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.worlds-page .world-card__copy {
  z-index: 1;
  align-self: end;
  width: 100%;
  padding: 24px 26px 25px;
  background: linear-gradient(0deg, rgba(7, 21, 37, .98), rgba(7, 21, 37, .8) 72%, transparent);
}

.worlds-page .world-card h3 {
  margin: 8px 0 9px;
  font-size: clamp(34px, 3.2vw, 50px);
  line-height: .9;
}

.worlds-page .world-card__copy > p {
  max-width: 620px;
  margin: 0;
  color: #d5e7ed;
  font-size: 13px;
  line-height: 1.45;
}

.worlds-page .world-card dl {
  gap: 20px;
  margin: 15px 0 0;
}

.worlds-page .world-card[hidden] {
  display: none !important;
}

@media (max-width: 900px) {
  .worlds-page .world-card-grid {
    grid-template-columns: 1fr !important;
    width: 100%;
  }

  .worlds-page .world-card {
    min-height: 380px !important;
    height: 380px;
  }

  .worlds-page .world-card__copy {
    padding: 23px 24px 24px;
  }
}

@media (max-width: 520px) {
  .worlds-page .world-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin-top: 24px;
  }

  .worlds-page .world-filters button {
    width: 100%;
    min-width: 0;
    padding-inline: 8px;
    font-size: 9px;
    letter-spacing: .04em;
  }

  .worlds-page .world-card {
    min-height: 340px !important;
    height: 340px;
  }

  .worlds-page .world-card__copy {
    padding: 20px;
  }

  .worlds-page .world-card h3 {
    font-size: 42px;
  }
}


/* Final narrow-phone pass */
@media (max-width: 600px) {
  html,
  body {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  .site-header,
  .site-header.is-scrolled {
    grid-template-columns: minmax(0, 1fr) 36px 44px;
    gap: 7px;
    padding-inline: 12px;
  }

  .site-header > .brand {
    min-width: 0;
    overflow: hidden;
    font-size: 18px;
    letter-spacing: .1em;
    white-space: nowrap;
  }

  .site-header > .brand .brand__mark {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }

  .site-header > .account-nav {
    width: 36px;
    justify-self: end;
  }

  .site-header .user-trigger {
    width: 36px;
    justify-content: center;
  }

  .site-header .user-avatar {
    width: 32px;
    height: 32px;
  }

  .site-header .login-nav {
    width: 36px;
    height: 36px;
  }

  .site-header > .menu-toggle {
    width: 44px;
    min-width: 44px;
    padding-inline: 6px;
    font-size: 9px;
  }

  .site-header > .site-nav a {
    min-height: 46px;
    font-size: 11px;
  }

  .site-header .user-menu {
    right: 12px !important;
    left: 12px !important;
  }

  .home-chapters {
    display: none !important;
  }

  .home-experience .game-hero {
    min-height: min(700px, 100svh);
  }

  .home-experience .game-hero__shade {
    background: linear-gradient(90deg, rgba(27, 47, 85, .94), rgba(30, 51, 89, .58) 70%, rgba(30, 51, 89, .25)), linear-gradient(0deg, #f4f0dc 0%, transparent 38%);
  }

  .home-experience .game-hero__copy {
    margin: 0 16px 86px;
    padding-left: 12px;
  }

  .home-experience .game-hero__copy::before {
    margin-bottom: 11px;
    padding: 6px 7px;
    font-size: 9px;
    letter-spacing: .12em;
  }

  .home-experience .game-hero .eyebrow {
    max-width: 230px;
    color: #5cebf1;
    font-size: 9px;
    line-height: 1.45;
    letter-spacing: .18em;
  }

  .home-experience .game-hero h1 {
    margin: 12px 0 17px;
    font-size: clamp(48px, 17vw, 60px);
    line-height: .79;
    letter-spacing: -.035em;
  }

  .home-experience .game-hero__copy > p:not(.eyebrow) {
    max-width: 235px;
    color: #e5f5f7;
    font-size: 13px;
    line-height: 1.55;
  }

  .home-experience .hero-buttons {
    gap: 11px;
    margin-top: 20px;
  }

  .home-experience .hero-buttons .primary-button {
    max-width: 100%;
    padding: 14px 16px;
    font-size: 11px;
  }

  .home-experience .hero-buttons span {
    font-size: 9px;
    letter-spacing: .16em;
  }

  .home-experience .hero-scroll {
    display: none;
  }

  .home-experience .section-pad,
  .worlds-page .section-pad,
  .download-experience .download-flow,
  .download-experience .requirements-clean,
  .download-experience .download-faq {
    padding-inline: 16px;
  }

  .home-experience .intro h2,
  .home-experience .split-feature h2,
  .home-experience .sectors h2,
  .home-experience .news h2,
  .home-experience .final-cta h2,
  .worlds-page .drop-cta h2 {
    font-size: clamp(42px, 13vw, 56px);
  }

  .home-experience .feature-card {
    padding-inline: 18px;
  }

  .home-experience .split-feature__copy {
    padding-inline: 16px;
  }

  .home-experience .world-portal {
    padding-inline: 18px;
  }

  .home-experience .site-footer {
    padding-inline: 16px;
  }

  .worlds-page .worlds-hero__copy {
    margin-inline: 16px;
  }

  .worlds-page .worlds-hero h1 {
    font-size: clamp(50px, 15vw, 64px);
  }

  .worlds-page .worlds-hero__stats {
    left: 16px;
    right: 16px;
  }

  .worlds-page .world-card__copy > p {
    font-size: 12px;
  }

  .download-experience .download-hero {
    padding-inline: 16px;
  }

  .download-experience .download-hero h1 {
    font-size: clamp(50px, 15vw, 66px);
  }

  .download-experience .download-main-button {
    padding-inline: 16px;
  }

  .auth-side,
  .portal-content {
    padding-inline: 16px;
  }

  .auth-heading h2 {
    font-size: clamp(52px, 15vw, 66px);
  }

  .auth-primary {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    padding: 13px;
  }

  .auth-primary .discord-mark {
    width: 36px;
    height: 36px;
  }

  .portal-welcome h1,
  .portal-title h1,
  .public-hero h1,
  .pass-hero h1,
  .intel-sidebar h1 {
    font-size: clamp(44px, 14vw, 62px);
  }

  .portal-panel {
    padding: 17px;
  }

  .portal-profile-card {
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 14px;
  }

  .portal-profile-card img {
    width: 46px;
    height: 46px;
  }

  .portal-profile-card strong {
    font-size: 15px;
  }

  .portal-profile-card > b {
    font-size: 8px;
  }

  .mission {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
  }

  .mission > b {
    font-size: 9px;
  }

  .news-hub,
  .transmission {
    padding-inline: 16px;
  }

  .news-hero h1,
  .news-featured h2 {
    font-size: clamp(46px, 14vw, 60px);
  }

  .transmission-hero h1 {
    font-size: clamp(48px, 14vw, 66px);
  }

  .intel-sidebar {
    padding-inline: 16px;
  }

  .intel-map {
    min-height: 460px;
  }
}

@media (max-width: 360px) {
  .site-header,
  .site-header.is-scrolled {
    grid-template-columns: minmax(0, 1fr) 32px 42px;
    gap: 5px;
    padding-inline: 9px;
  }

  .site-header > .brand {
    font-size: 16px;
  }

  .site-header > .brand .brand__mark {
    width: 27px;
    height: 27px;
    flex-basis: 27px;
  }

  .site-header > .account-nav,
  .site-header .user-trigger {
    width: 32px;
  }

  .site-header .user-avatar {
    width: 29px;
    height: 29px;
  }

  .site-header > .menu-toggle {
    width: 42px;
    min-width: 42px;
    font-size: 8px;
  }

  .home-experience .game-hero__copy {
    margin-inline: 14px;
    padding-left: 10px;
  }

  .home-experience .game-hero h1 {
    font-size: 48px;
  }

  .home-experience .game-hero__copy > p:not(.eyebrow) {
    max-width: 218px;
  }

  .home-experience .hero-buttons .primary-button {
    padding-inline: 13px;
    font-size: 10px;
  }

  .worlds-page .world-filters {
    padding: 6px;
  }

  .worlds-page .world-filters button {
    min-height: 42px;
  }

  .portal-panel,
  .download-experience .requirement-grid article {
    padding-inline: 14px;
  }
}


/* Desktop uses the same compact, portrait world-card treatment as mobile */
@media (min-width: 1201px) {
  .worlds-page .world-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .worlds-page .world-card {
    width: 100%;
    height: auto;
    min-height: 0 !important;
    aspect-ratio: 1.08 / 1;
  }
}

@media (min-width: 901px) and (max-width: 1200px) {
  .worlds-page .world-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .worlds-page .world-card {
    height: auto;
    min-height: 0 !important;
    aspect-ratio: 1.08 / 1;
  }
}

/* Final world atlas sizing: cards stay compact at every viewport width. */
@media (min-width: 1201px) {
  .worlds-page .world-card-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: 420px !important;
    gap: 18px !important;
    width: min(100%, 1450px) !important;
    height: auto !important;
  }

  .worlds-page .world-card {
    display: flex !important;
    width: 100% !important;
    height: 420px !important;
    min-height: 420px !important;
    max-height: 420px !important;
    aspect-ratio: auto !important;
  }
}

@media (min-width: 901px) and (max-width: 1200px) {
  .worlds-page .world-card-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 400px !important;
    gap: 16px !important;
  }

  .worlds-page .world-card {
    display: flex !important;
    height: 400px !important;
    min-height: 400px !important;
    max-height: 400px !important;
    aspect-ratio: auto !important;
  }
}

@media (max-width: 900px) {
  .worlds-page .world-card-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: 380px !important;
  }

  .worlds-page .world-card {
    display: flex !important;
    height: 380px !important;
    min-height: 380px !important;
    max-height: 380px !important;
    aspect-ratio: auto !important;
  }
}
/* Final compact phone card ratio: keep the atlas close to the preview layout. */
@media (max-width: 900px) {
  .worlds-page .world-card-grid {
    grid-auto-rows: min(420px, calc((100vw - 32px) * .96)) !important;
  }

  .worlds-page .world-card {
    height: min(420px, calc((100vw - 32px) * .96)) !important;
    min-height: min(420px, calc((100vw - 32px) * .96)) !important;
    max-height: min(420px, calc((100vw - 32px) * .96)) !important;
  }
}