/* Sunbound Atlas styling for the game, support and legal pages. */
.atlas-game-page,
.atlas-policy-page {
  --ink: #152037;
  --muted: #52606c;
  --line: #d9d3c6;
  background: #f7f3ea;
  color: var(--ink);
}

.atlas-game-page main,
.atlas-policy-page main { overflow: clip; }
.atlas-game-page h1,
.atlas-game-page h2,
.atlas-policy-page h1,
.atlas-policy-page h2 { font-family: inherit; letter-spacing: -.045em; }
.atlas-game-page .eyebrow,
.atlas-policy-page .eyebrow { color: #896222; }
.atlas-game-page .back-link,
.atlas-policy-page .back-link {
  padding-block: 8px;
  font-weight: 650;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.atlas-game-page .back-link:hover,
.atlas-policy-page .back-link:hover { text-decoration: underline; }
.atlas-game-page a:focus-visible,
.atlas-policy-page a:focus-visible,
.atlas-game-page .gallery-track:focus-visible {
  outline: 3px solid #b37d21;
  outline-offset: 5px;
}

/* Jumpulsa: the original robot, pipes and cloud layers inside its celestial world. */
.atlas-game-page .jumpulsa-hero {
  position: relative;
  isolation: isolate;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  padding-block: 48px 74px;
  color: #fff9ee;
}
.atlas-game-page .jumpulsa-hero::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -2;
  background: linear-gradient(90deg, #111d3530, transparent 60%), #111d35 url('/assets/atlas/stars.svg') center / 1200px auto;
  pointer-events: none;
}
.atlas-game-page .jumpulsa-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 48px -75px 54px 30%;
  border: 1px solid #e6bc6840;
  border-radius: 50%;
  transform: rotate(-19deg);
  pointer-events: none;
}
.atlas-game-page .game-intro { position: relative; z-index: 2; min-width: 0; text-align: left; }
.atlas-game-page .game-intro .actions { justify-content: flex-start; }
.atlas-game-page .game-intro h1 {
  color: #fffaf0;
  font-size: clamp(4.5rem, 6.6vw, 6.8rem);
  line-height: 1;
}
.atlas-game-page .title-dot { color: #efbd62; }
.atlas-game-page .game-intro .eyebrow { color: #e1bd78; }
.atlas-game-page .game-intro .back-link { color: var(--atlas-caption); margin-bottom: 34px; }
.atlas-game-page .game-tagline {
  margin-block: 24px;
  color: #fffaf0;
  font-size: clamp(2.6rem, 4.1vw, 4rem);
}
.atlas-game-page .game-intro .lead { max-width: 540px; margin-inline: 0; color: var(--atlas-text); font-weight: 500; line-height: 1.7; text-shadow: var(--atlas-text-shadow); }
.atlas-game-page .platform-note { color: var(--atlas-text); font-weight: 600; text-shadow: var(--atlas-text-shadow); }
.atlas-game-page .game-intro .button-dark {
  background: #edbc62;
  border-color: #edbc62;
  color: #192334;
  box-shadow: 0 6px 24px #ecb35b1c;
}
.atlas-game-page .game-intro .button-light {
  background: #111d3540;
  border-color: #c4a367;
  color: #ffefd0;
}
.atlas-game-page .hero-world {
  width: min(100%, 620px);
  justify-self: end;
  border: 2px solid #ddb36a;
  border-radius: 44% 48% 45% 38% / 40% 38% 53% 51%;
  box-shadow: 0 0 0 7px #dcb96e16, 0 0 0 9px #dcb96e59, 0 24px 70px #030b2580;
  transform: rotate(2deg);
}
.atlas-game-page .hero-world .jumpulsa-art { width:100%; min-height: 0; aspect-ratio: 1 / 1.05; }
/* Keep the robot and its aligned pipe gap together at the center of the world. */
.atlas-game-page .hero-flight { position:absolute; inset:0 10%; --flight-gap:clamp(200px,48vw,290px); }
.atlas-game-page .hero-flight::before,
.atlas-game-page .hero-flight::after {
  content:""; position:absolute; left:64%; width:25%; aspect-ratio:1 / 3;
  background:center / contain no-repeat; image-rendering:pixelated; pointer-events:none;
}
.atlas-game-page .hero-flight::before { bottom:calc(50% + var(--flight-gap) / 2); background-image:url('/assets/atlas/pipe-top.png'); }
.atlas-game-page .hero-flight::after { top:calc(50% + var(--flight-gap) / 2); background-image:url('/assets/atlas/pipe-bottom.png'); }
.atlas-game-page .hero-world .art-robot { width:256px; height:256px; left:30%; top:50%; translate:0 -50%; }
.atlas-game-page .jumpulsa-band {
  border-top: 1px solid #d7b16a;
  border-bottom: 1px solid #d9cfbc;
  background: #eee7d8;
}
.atlas-game-page .fact-row { padding-block: 25px; color: #293c4c; }
.atlas-game-page .fact-row span::before { color: #926929; }
.atlas-game-page .section { padding-block: clamp(74px, 8vw, 120px); }
.atlas-game-page .game-story,
.atlas-game-page .robots-section,
.atlas-game-page .multiplayer-grid { gap: clamp(36px, 6vw, 92px); }
.atlas-game-page .story-copy h2,
.atlas-game-page .robots-copy h2 { font-size: clamp(2.8rem, 3.4vw, 3.75rem); line-height: 1.04; }
.atlas-game-page .story-copy > p:not(.eyebrow),
.atlas-game-page .robots-copy > p:not(.eyebrow) { line-height: 1.75; }
.atlas-game-page .inline-link { color: #76531b; }
.atlas-game-page .screen-window {
  border: 5px solid #18253c;
  border-radius: 27px;
  outline: 1px solid #b8914f;
  box-shadow: 0 20px 36px #14203920;
}
.atlas-game-page .game-shot:first-child .screen-window { transform: rotate(-2deg); }
.atlas-game-page .game-shot.shot-offset .screen-window { transform: rotate(2deg); }
.atlas-game-page .game-shot figcaption { color: #536171; margin-top: 23px; }
.atlas-game-page .preview-note { color: #65707d; line-height: 1.6; }
.atlas-game-page .robots-section { border-top: 1px solid #dbd1bd; }
.atlas-game-page .robot-roster { gap: 14px; }
.atlas-game-page .robot-roster li {
  position: relative;
  padding: 12px 8px 18px;
  border: 1px solid #cba866;
  border-radius: 54px 54px 20px 20px;
  background: radial-gradient(ellipse at 50% 35%, #344761, #142239 70%);
  box-shadow: 0 9px 19px #17243912;
}
.atlas-game-page .robot-roster img { margin-bottom: 7px; }
.atlas-game-page .robot-roster strong { color: #fff5df; font-size: .77rem; }
.atlas-game-page .robot-roster span { color: var(--atlas-caption); font-size: 12px; font-weight: 600; line-height: 1.5; text-shadow: var(--atlas-text-shadow); }
.atlas-game-page .multiplayer-section {
  position: relative;
  background: linear-gradient(#111d35b3, #111d35b3), #111d35 url('/assets/atlas/stars.svg') center / 1200px auto;
  color: #fff9ed;
  border-block: 1px solid #b99355;
}
.atlas-game-page .multiplayer-section h2 { color: #fff9ed; }
.atlas-game-page .multiplayer-section .eyebrow { color: #edc781; }
.atlas-game-page .multiplayer-section .story-copy > p:not(.eyebrow),
.atlas-game-page .multiplayer-section .game-shot figcaption { color: var(--atlas-text); font-weight: 500; text-shadow: var(--atlas-text-shadow); }
.atlas-game-page .multiplayer-section .screen-window { border-color: #0c1425; box-shadow: 0 22px 48px #0005; }
.atlas-game-page .gallery-section { padding-bottom: 64px; }
.atlas-game-page .gallery-track {
  gap: 27px;
  padding-block: 46px 28px;
  scrollbar-color: #b8924e #e9e1d2;
}
.atlas-game-page .gallery-shot figcaption { color: #56606b; }
.atlas-game-page .gallery-shot figcaption strong { color: #213148; margin-bottom: 4px; }
.atlas-game-page .how-section { background: linear-gradient(#f7f3ea, #eee8db 30%, #eee8db 65%, #f7f3ea); border: 0; }
.atlas-game-page .play-steps { gap: 36px; }
.atlas-game-page .step-number {
  color: #876026;
  border-color: #b6a078;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}
.atlas-game-page .play-steps h3 { color: #1d2c43; font-size: 1.5rem; }
.atlas-game-page .play-steps p,
.atlas-game-page .comfort-note { color: #4e5b66; }
.atlas-game-page .details-grid h2 { line-height: 1.06; }
.atlas-game-page .details-grid .body-copy { color: #52606c; }
.atlas-game-page .beta-card {
  border: 1px solid #c2a16c;
  border-radius: 24px;
  background: linear-gradient(#15233ba6, #15233ba6), #15233b url('/assets/atlas/stars.svg') 80% 50% / 1200px auto;
  box-shadow: 0 17px 35px #0e1d3012;
}
.atlas-game-page .beta-card h2 { color: #fff6e6; line-height: 1.05; }
.atlas-game-page .beta-card .eyebrow { color: #e6bf78; }
.atlas-game-page .beta-card p:not(.eyebrow) { color: var(--atlas-text); font-weight: 500; text-shadow: var(--atlas-text-shadow); }
.atlas-game-page .beta-card .button-white { color: #1d2a3e; background: #edbc62; border-color: #edbc62; }

/* Reuse the cloud strip already loaded by the hero; keep the reading area clear. */
.atlas-game-page :is(.game-story, .robots-section, .gallery-section, .how-section, .details-grid, .beta-section) {
  position: relative;
  isolation: isolate;
}
.atlas-game-page :is(.game-story, .robots-section, .gallery-section, .how-section, .details-grid, .beta-section)::before,
.atlas-game-page :is(.game-story, .robots-section, .gallery-section, .how-section, .details-grid, .beta-section)::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
}
.atlas-game-page :is(.game-story, .robots-section, .gallery-section, .how-section, .details-grid, .beta-section)::before {
  background-image: url('/assets/jumpulsa/clouds.png'), url('/assets/jumpulsa/clouds.png');
  background-position: left 90%, right 90%;
  background-size: auto 160%, auto 160%;
  background-repeat: no-repeat;
  opacity: .3; mask-composite: intersect, add;
  image-rendering: pixelated;
  mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent), radial-gradient(ellipse 35% 48% at 0% 50%, #000 10%, transparent 100%), radial-gradient(ellipse 35% 48% at 100% 50%, #000 10%, transparent 100%);
}
.atlas-game-page :is(.game-story, .robots-section, .gallery-section, .how-section, .details-grid, .beta-section)::after {
  background: url('/assets/atlas/atlas-margins.svg') center / 100% 100% no-repeat;
  opacity: .75;
  mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
}
.atlas-game-page .robots-section::before,
.atlas-game-page .details-grid::before { background-position: left 75%, right 35%; }

/* Policies and support: calm, readable atlas pages with the complete original text. */
.atlas-policy-page main {
  background:
    radial-gradient(ellipse at 100% 0, #edddbd55, transparent 680px),
    url('/assets/atlas/atlas-margins.svg') center top / 100% auto repeat-y,
    #f7f3ea;
}
.atlas-policy-page .policy-wrap {
  position: relative;
  max-width: 1160px;
  padding-block: 54px 96px;
}
.atlas-policy-page .policy-wrap > .back-link { color: #725b36; margin-bottom: 36px; }
.atlas-policy-page .policy-wrap > h1 {
  max-width: 100%;
  color: #17253c;
  font-size: clamp(2.55rem, 5.25vw, 4.65rem);
  line-height: 1.08;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.atlas-policy-page .policy-wrap > h1::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin-top: 28px;
  background: #c79743;
}
.atlas-policy-page .policy-deck { margin-top: 24px; color: #52606c; line-height: 1.65; }
.atlas-policy-page .policy-date { color: #65707c; font-size: .83rem; }
.atlas-policy-page .policy-summary {
  margin-block: 32px;
  padding: 25px 30px;
  border: 1px solid #ccb98f;
  border-left: 3px solid #b78b43;
  border-radius: 2px 16px 16px 2px;
  background: #efe7d7;
  color: #354356;
  font-size: .97rem;
  line-height: 1.8;
}
.atlas-policy-page .policy-layout {
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 44px;
  margin-top: 48px;
  align-items: start;
}
.atlas-policy-page .policy-toc {
  top: 32px;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #bda678 transparent;
  gap: 2px;
  padding: 8px 0 8px 18px;
  border-left: 1px solid #b69b68;
}
.atlas-policy-page .policy-toc a {
  padding: 7px 12px;
  border-radius: 7px;
  color: #596270;
  line-height: 1.45;
  font-weight: 550;
  font-size: .83rem;
}
.atlas-policy-page .policy-toc a:hover,
.atlas-policy-page .policy-toc a:focus-visible {
  color: #243249;
  background: #eae2d2;
}
.atlas-policy-page .policy-body {
  padding: clamp(24px, 3vw, 42px);
  border: 1px solid #e0d7c6;
  border-radius: 18px;
  background: #fffdf8;
  box-shadow: 0 12px 42px #53472e05;
}
.atlas-policy-page .policy-body section {
  padding-bottom: 34px;
  margin-bottom: 34px;
  border-bottom: 1px solid #e7dfd0;
  scroll-margin-top: 28px;
}
.atlas-policy-page .policy-body section:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.atlas-policy-page .policy-body h2 {
  color: #1f2e43;
  font-size: clamp(1.35rem, 2vw, 1.62rem);
  line-height: 1.3;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.atlas-policy-page .policy-body h3 { color: #2b3b4f; font-size: 1.07rem; margin-top: 26px; line-height: 1.45; }
.atlas-policy-page .policy-body p,
.atlas-policy-page .policy-body li,
.atlas-policy-page .policy-body address {
  color: #4a5766;
  font-size: .98rem;
  line-height: 1.8;
}
.atlas-policy-page .policy-body ul { padding-left: 23px; }
.atlas-policy-page .policy-body li::marker { color: #927441; }
.atlas-policy-page .policy-body a,
.atlas-policy-page .policy-summary a,
.atlas-policy-page .policy-deck a {
  color: #735019;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
}
.atlas-policy-page .policy-body a:hover,
.atlas-policy-page .policy-summary a:hover,
.atlas-policy-page .policy-deck a:hover { color: #17253c; text-decoration-thickness: 2px; }
.atlas-policy-page .policy-body strong { color: #26374b; }
.atlas-policy-page .policy-body hr { border: 0; border-top: 1px solid #b99a60; margin-block: 48px; scroll-margin-top: 28px; }
.atlas-policy-page .policy-original { margin-top: 64px; padding-top: 40px; border-top: 1px solid #b99a60; scroll-margin-top: 90px; }
.atlas-policy-page .policy-original > h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
.atlas-policy-page .policy-body > .policy-summary { padding: 22px; }
.atlas-policy-page .policy-body table { display: block; overflow-x: auto; max-width: 100%; }

@media (min-width: 1101px) {
  .atlas-game-page .jumpulsa-hero {
    width: min(1520px, 92vw);
    grid-template-columns: minmax(0, 540px) minmax(0, 620px);
    justify-content: center;
    gap: clamp(32px, 4vw, 64px);
  }
  .atlas-game-page .hero-world { justify-self: start; }
  .atlas-game-page .game-story { grid-template-columns: 1fr 1.1fr; }
}

@media (max-width: 1100px) {
  .atlas-game-page .hero-world .jumpulsa-art { min-height: 510px; }
  .atlas-game-page .robots-section { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .atlas-game-page .robot-roster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .atlas-policy-page .policy-layout { grid-template-columns: 205px minmax(0, 1fr); gap: 30px; }
}

@media (min-width: 761px) and (max-width: 960px) {
  .atlas-game-page .jumpulsa-hero { grid-template-columns: 1fr; }
  .atlas-game-page .hero-world { width: min(100%, 540px); justify-self: center; }
  .atlas-game-page .hero-world .jumpulsa-art { min-height: 0; }
}

@media (max-width: 760px) {
  .atlas-game-page :is(.game-story, .robots-section, .gallery-section, .how-section, .details-grid, .beta-section)::before {
    background-size: auto 140%;
    background-position: left 90%, right 90%;
    opacity: .24;
    mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent), radial-gradient(ellipse 65% 48% at 0% 50%, #000 10%, transparent), radial-gradient(ellipse 65% 48% at 100% 50%, #000 10%, transparent);
  }
  .atlas-game-page :is(.game-story, .robots-section, .gallery-section, .how-section, .details-grid, .beta-section)::after { opacity: .28; }
  .atlas-game-page .jumpulsa-hero { grid-template-columns: 1fr; padding-block: 32px 68px; gap: 45px; }
  .atlas-game-page .jumpulsa-hero::after { inset: 45% -40px 25px; }
  .atlas-game-page .hero-world { width: min(100% - 16px, 540px); justify-self: center; margin-inline: auto; }
  .atlas-game-page .hero-world .jumpulsa-art { min-height: 500px; }
  .atlas-game-page .game-intro { text-align: left; }
  .atlas-game-page .game-intro .actions { justify-content: flex-start; }
  .atlas-game-page .game-intro .lead { margin-inline: 0; }
  .atlas-game-page .game-intro .back-link { margin-bottom: 28px; }
  .atlas-game-page .game-intro h1 { font-size: clamp(3.2rem, 15vw, 6rem); }
  .atlas-game-page .game-story,
  .atlas-game-page .robots-section,
  .atlas-game-page .multiplayer-grid { grid-template-columns: 1fr; gap: 46px; }
  .atlas-game-page .robot-roster { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
  .atlas-game-page .robot-roster li { border-radius: 44px 44px 16px 16px; }
  .atlas-game-page .fact-row { justify-content: flex-start; gap: 12px 26px; }
  .atlas-game-page .screenshot-pair { width: 100%; max-width: 550px; gap: 24px; }
  .atlas-game-page .play-steps { gap: 25px; }
  .atlas-policy-page .policy-wrap { padding-block: 36px 64px; }
  .atlas-policy-page .policy-wrap > .back-link { margin-bottom: 26px; }
  .atlas-policy-page .policy-layout { grid-template-columns: 1fr; gap: 26px; margin-top: 34px; }
  .atlas-policy-page .policy-toc {
    position: static;
    max-height: none;
    overflow: visible;
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 14px;
    border: 1px solid #d7c7a9;
    border-radius: 12px;
    background: #f0e9dc;
  }
  .atlas-policy-page .policy-toc a { padding: 7px; font-size: .8rem; }
  .atlas-policy-page .policy-body { padding: 26px; border-radius: 12px; }
}

@media (max-width: 480px) {
  .atlas-game-page .hero-world .jumpulsa-art { min-height: 380px; }
  .atlas-game-page .hero-world .art-robot { width: 192px; height: 192px; }
  .atlas-game-page .game-tagline { font-size: 2.8rem; }
  .atlas-game-page .game-intro .lead { font-size: 1.05rem; }
  .atlas-game-page .story-copy h2,
  .atlas-game-page .robots-copy h2 { font-size: clamp(2rem, 9.4vw, 2.8rem); }
  .atlas-game-page .robot-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .atlas-game-page .robot-roster li { padding: 15px 10px 19px; border-radius: 56px 56px 18px 18px; }
  .atlas-game-page .robot-roster strong { font-size: .85rem; }
  .atlas-game-page .screen-window { border-width: 3px; border-radius: 15px; }
  .atlas-game-page .screenshot-pair { gap: 18px; padding-inline: 4px; }
  .atlas-game-page .game-shot figcaption { font-size: .72rem; line-height: 1.5; }
  .atlas-game-page .beta-card { padding: 28px 23px; border-radius: 20px; }
  .atlas-policy-page .policy-wrap > h1 { font-size: clamp(2.2rem, 10vw, 3rem); }
  .atlas-policy-page .policy-deck { font-size: 1.03rem; }
  .atlas-policy-page .policy-summary { padding: 20px; font-size: .93rem; }
  .atlas-policy-page .policy-toc { grid-template-columns: 1fr; }
  .atlas-policy-page .policy-toc a { font-size: .84rem; }
  .atlas-policy-page .policy-body { padding: 22px 19px; }
  .atlas-policy-page .policy-body p,
  .atlas-policy-page .policy-body li,
  .atlas-policy-page .policy-body address { font-size: .94rem; }
}

@media (prefers-reduced-motion: reduce) {
  .atlas-game-page .jumpulsa-art *,
  .atlas-game-page .art-clouds,
  .atlas-game-page .art-front { animation: none; transition: none; }
}

/* Keep long German policy headings inside narrow content columns. */
.atlas-policy-page :is(h1, h2, h3) { overflow-wrap: anywhere; hyphens: auto; }