/* Portal theme — overrides styles.css. Load order: styles → portal → quality */

/* --- Global: no horizontal scroll --- */
html,
body {
  overflow-x: clip;
  max-width: 100%;
}

/* --- Tokens --- */
:root {
  --bg: #12151c;
  --surface: #1a202b;
  --ink: #f4f7fc;
  --muted: #a3afc0;
  --line: #ffffff19;
  --accent: #6accea;
  --blue: #4095bf;
  --header-expanded-h: 108px;
  --header-expanded-py: 20px;
}

/* --- Page background --- */
body {
  padding-top: var(--header-h, var(--header-expanded-h));
  background:
    radial-gradient(1500px 820px at 12% -10%, #1d4a7a4d, transparent 66%),
    radial-gradient(1200px 720px at 88% -4%, #15525e40, transparent 64%),
    radial-gradient(1000px 640px at 60% 18%, #2a215936, transparent 68%),
    radial-gradient(1.7px 1.7px at 38px 52px, #dbe9ff9e, transparent),
    radial-gradient(1.5px 1.5px at 196px 148px, #cfe2ff7a, transparent),
    radial-gradient(1.4px 1.4px at 118px 238px, #bcd8ff6b, transparent),
    radial-gradient(1.1px 1.1px at 28px 96px, #c8dcff52, transparent),
    radial-gradient(1.1px 1.1px at 122px 34px, #b9d2f44a, transparent),
    radial-gradient(1px 1px at 74px 122px, #aec8ec42, transparent),
    #0a0e18;
  background-size:
    100% 820px, 100% 720px, 100% 640px,
    280px 280px, 280px 280px, 280px 280px,
    150px 150px, 150px 150px, 150px 150px,
    auto;
  background-repeat:
    no-repeat, no-repeat, no-repeat,
    repeat, repeat, repeat,
    repeat, repeat, repeat,
    no-repeat;
}

.container {
  width: min(1200px, calc(100% - 64px));
}

.legal-wrap {
  padding-block: 40px 100px;
}

.legal-wrap h1 {
  margin-top: 0;
}

/* --- Header --- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: var(--header-h, var(--header-expanded-h));
  max-width: 1200px;
  width: calc(100% - 64px);
  margin-inline: auto;
  padding: var(--header-py, var(--header-expanded-py)) 0;
  gap: 24px;
  background: none;
  border-bottom: 1px solid #c7deff21;
  transition: border-color .2s ease;
  isolation: isolate;
}

.site-header > * {
  position: relative;
  z-index: 2;
}

/* Full-bleed scroll backdrop — behind header content, no 100vw */
.site-header::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: auto;
  height: var(--header-h, var(--header-expanded-h));
  background: #0a101dd9;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #c7deff21;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
  z-index: 1;
}

.site-header.is-scrolled::before {
  opacity: 1;
}

.site-header.is-scrolled {
  border-bottom-color: transparent;
}

.brand-subline {
  display: block;
  overflow: hidden;
  font-size: .75rem;
  letter-spacing: .19em;
  font-weight: 400;
  color: #8eafc9;
  margin-top: 8px;
}

/* Wordmark: the same vector as the game's launch logo, so the site header
   uses exactly the game's letterforms. No font file is shipped; the mark is
   embedded as a path, with its color set in the SVG. */
.wordmark-mark {
  display: block;
  height: 1em;
  width: auto;
}

.footer-mark {
  height: .95em;
}

.wordmark {
  position: relative;
  display: block;
  font-size: 1.65rem;
  letter-spacing: .13em;
  font-weight: 700;
  line-height: 1.15;
  color: #f4f8ff;
  text-shadow: 0 2px 16px #6fb9ff29;
}

.site-header nav {
  margin-left: auto;
  gap: 26px;
  font-size: .875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .055em;
  color: #cad2de;
}

.site-header nav a:hover {
  color: #fff;
}

.site-header nav a { white-space: nowrap; }
.site-header nav a[aria-current="page"] {
  color: #a7e4f6;
  text-decoration: underline;
  text-underline-offset: 8px;
  text-decoration-thickness: 2px;
}

/* Hidden until translated; if app.js never runs, show the static English page anyway. */
html:not(.i18n-ready) body {
  opacity: 0;
  animation: reveal-untranslated 0s 3s forwards;
}

@keyframes reveal-untranslated {
  to { opacity: 1; }
}

.lang-switch {
  position: relative;
  flex-shrink: 0;
  z-index: 12;
}

.lang-switch-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px 0 14px;
  border: 1px solid #ffffff24;
  border-radius: 6px;
  background: #ffffff0c;
  color: #e8eef6;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.lang-switch-toggle:hover,
.lang-switch.is-open .lang-switch-toggle {
  background: #ffffff16;
  border-color: #afecff73;
  color: #fff;
}

.lang-switch-toggle:focus-visible {
  outline: 2px solid #b3dcff;
  outline-offset: 4px;
}

.lang-switch-chevron {
  width: 6px;
  height: 6px;
  margin-top: -2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
}

.lang-switch.is-open .lang-switch-chevron {
  margin-top: 2px;
  transform: rotate(225deg);
}

.lang-switch-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 176px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid #ffffff1f;
  border-radius: 14px;
  background: #101826f5;
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 44px #00000073;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.lang-switch.is-open .lang-switch-menu {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.lang-switch-menu li + li {
  margin-top: 2px;
}

.lang-switch-menu button {
  display: flex;
  width: 100%;
  align-items: center;
  padding: 10px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #c5d0dc;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-align: left;
}

.lang-switch-menu button[aria-selected="true"] {
  color: #b3e9f5;
  background: #b3e9f516;
}

.lang-switch-menu button:hover {
  background: #ffffff12;
  color: #fff;
}

/* The nav plus the Discord and Download buttons use the compact menu until desktop widths. */
@media (min-width: 801px) and (max-width: 1150px) {
  .site-header nav { display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0; padding: 12px; background: #141f2d; border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; gap: 0; }
  .site-header nav.is-open { display: flex; }
  .site-header nav a { padding: 12px; font-size: 1rem; }
  .site-header .menu-toggle { display: flex; flex-direction: column; gap: 7px; justify-content: center; align-items: center; background: transparent; color: white; border: 1px solid #7893ad50; width: 44px; height: 44px; margin-left: 0; order: 4; flex-shrink: 0; }
  .menu-toggle span { width: 19px; height: 1px; background: currentColor; }
  .menu-toggle[aria-expanded=true] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded=true] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .site-header .lang-switch { margin-left: auto; order: 2; }
  .site-header .header-cta { margin-left: 0; order: 3; }
  .site-header .header-discord { order: 3; }
}

/* --- Buttons --- */
.button {
  min-height: 50px;
  border: 1px solid #afecff;
  border-radius: 3px;
  padding: 13px 22px;
  gap: 20px;
  background: #b3e9f5;
  color: #10202c;
  font-size: 1rem;
  letter-spacing: .015em;
  line-height: 1.5;
  box-shadow: 0 3px 20px #0003;
  clip-path: none;
}

.button:hover {
  background: #d7f5ff;
  transform: translateY(-1px);
}

.button-small {
  font-size: 1rem;
  min-height: 44px;
  padding: 9px 20px;
}

.button-outline {
  background: #182433;
  border-color: #66849b;
  color: white;
}

.button-outline:hover {
  background: #24384a;
}

/* --- Hero --- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  height: 475px;
  min-height: 0;
  padding: 36px 48px 65px;
  margin-top: 28px;
  margin-bottom: 0;
  overflow: hidden;
  border: 1px solid #7e9dbf39;
  border-bottom: 3px solid #65b7d6;
  background: #070c14;
  box-shadow: 0 16px 38px #0004;
}

.hero-background {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
  opacity: 1;
  filter: none;
  transform: none;
}

.hero-shade {
  background: linear-gradient(90deg, #080d17e8 0%, #080d17c9 26%, #080d1730 51%, transparent 70%);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 480px;
  max-width: 52%;
  margin: 0;
}

.hero .eyebrow {
  justify-content: flex-start;
  color: #88cde4;
  font-size: .8125rem;
  letter-spacing: .085em;
  line-height: 1.6;
}

.hero h1 {
  font-size: clamp(2.5rem, 4.8vw, 4rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.07;
  margin: 17px 0 22px;
  color: #fff;
  text-shadow: none;
}

.hero h1 span { color: #a8c7db; font-weight: 700; }

.hero-description {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #bfcad7;
  max-width: 325px;
}

.hero-actions {
  display: flex;
  justify-content: flex-start;
  gap: 0;
  margin-top: 25px;
}

.hero .button {
  font-size: 1rem;
  min-height: 49px;
  padding: 12px 22px;
}

.hero-footnote {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 13px 22px;
  border-top: 1px solid #b7d3fa1c;
  background: #0a101de8;
  color: #9db6cd;
  font-size: .75rem;
  letter-spacing: .1em;
}

.hero-footnote > span:last-child {
  color: #e2edf5;
  font-size: .875rem;
  letter-spacing: .08em;
  white-space: nowrap;
}

.hero-footnote i {
  font-style: normal;
  color: #5ca3c6;
  margin-inline: 10px;
}

/* --- Access cards --- */
.access-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 22px;
}

.access-card {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 21px 26px;
  min-width: 0;
  border: 1px solid #7fa1c334;
  border-radius: 4px;
  background: linear-gradient(120deg, #273442, #1b242f);
  box-shadow: 0 5px 20px #0002;
  transition: background .2s, border-color .2s;
}

.access-card:hover {
  border-color: #90cfe78a;
  background: #2b3e50;
}

.access-glyph {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 1px solid #79b4d459;
  color: #c7e4f4;
  border-radius: 50%;
  font-size: 1.6rem;
  line-height: 1;
}

.access-card small {
  display: block;
  font-size: .75rem;
  letter-spacing: .09em;
  color: #91a9bd;
  margin-bottom: 2px;
}

.access-card strong {
  font-size: 1.125rem;
  font-weight: 700;
  color: #f2f7fc;
  line-height: 1.4;
  display: block;
}

.access-label {
  font-size: .8125rem;
  font-weight: 700;
  color: #79cde5;
  margin-left: auto;
  letter-spacing: .05em;
  white-space: nowrap;
}

.community-access {
  background: linear-gradient(120deg, #262c3b, #1b222f);
}

.access-disclosure {
  font-size: .75rem;
  color: #8f9eae;
  text-align: right;
  margin-top: 10px;
  overflow-wrap: anywhere;
}

/* --- Download cards --- */
.download-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 22px;
}

.download-card .access-glyph {
  transition: color .2s, border-color .2s;
}

.download-apple:hover .access-glyph { color: #fff; border-color: #ffffff66; }
.download-android:hover .access-glyph { color: #3ddc84; border-color: #3ddc8466; }
.download-windows:hover .access-glyph { color: #4cc2ff; border-color: #4cc2ff66; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Discord (header) --- */
.header-discord {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 8px 14px;
  flex-shrink: 0;
  border: 1px solid #5865f2;
  border-radius: 6px;
  background: #5865f2;
  color: #fff;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .03em;
  transition: background .2s, border-color .2s;
}

.header-discord:hover {
  background: #4752c4;
  border-color: #4752c4;
}

.header-discord .ui-icon {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
}

/* --- Sections --- */
.section {
  padding-block: 72px;
}

.section-heading h2,
.hangar-intro h2,
.faq-section h2 {
  font-size: clamp(2rem, 3.2vw, 2.9rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.035em;
}

.section-heading {
  margin-bottom: 32px;
}

.section-heading h2 {
  margin-top: 15px;
}

.section-heading > p {
  font-size: 1rem;
}

.eyebrow {
  font-size: .8125rem;
  letter-spacing: .12em;
}

.experience-card,
.faction-card {
  border-color: #849ebe2b;
}

.gallery-section {
  background: #0d131e;
}

.hangar-section {
  background: #0e1621;
}

/* Bands alternate with the plain sections: Ships (band), Universe, Factions
   (band), footer. No bottom border here: the footer draws its own top line. */
.factions-band {
  background: #0e1621;
  border-top: 1px solid var(--line);
}

.join-section {
  background: linear-gradient(#0b111dee, #0b111da6, #0b111d), url('/assets/hero-earth.webp') center/cover;
}

.join-section h2 {
  font-size: clamp(2.8rem, 5vw, 4.5rem);
  font-weight: 700;
}

/* --- Factions --- */
.faction-card.solaris { --faction: #ff6a3c; }
.faction-card.earth { --faction: #3d9fff; }
.faction-card.vega { --faction: #7dedb0; }

.faction-card .faction-meta {
  color: var(--faction);
}

.faction-card > .eyebrow {
  margin-top: 52px;
}

.faction-card.solaris > .eyebrow { color: #ff6a3c; }
.faction-card.earth > .eyebrow { color: #3d9fff; }
.faction-card.vega > .eyebrow { color: #7dedb0; }

.faction-card.solaris .faction-line { background: #ff6a3c; }
.faction-card.earth .faction-line { background: #3d9fff; }
.faction-card.vega .faction-line { background: #7dedb0; }

/* --- Footer (reset legacy styles.css .footer-top/.footer-bottom) --- */
.site-footer {
  border-top: 1px solid #ffffff10;
  padding: 64px 0 28px;
  background: #05080f;
}

.site-footer .footer-inner {
  width: min(1200px, calc(100% - 64px));
  margin-inline: auto;
}

.site-footer .footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 48px;
  flex-wrap: nowrap;
}

.site-footer .footer-top > p {
  display: none;
}

.site-footer .footer-wordmark {
  font-size: .95rem;
  letter-spacing: .14em;
  font-weight: 700;
  color: #f2f7ff;
  text-decoration: none;
  line-height: 1;
}

.site-footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 22px;
}

.site-footer .footer-links a {
  font-size: .75rem;
  letter-spacing: .01em;
  color: #c5ced8;
  text-decoration: none;
}

.site-footer .footer-links a:hover {
  color: #fff;
}

.site-footer .footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 22px;
  margin-top: 0;
  border-top: 1px solid #ffffff10;
  color: #6d7a8c;
  font-size: .75rem;
}

.site-footer .footer-bar p {
  margin: 0;
}

.site-footer .footer-back {
  color: #6d7a8c;
  text-decoration: none;
  white-space: nowrap;
}

.site-footer .footer-back:hover {
  color: #c5ced8;
}

.site-footer .footer-bottom,
.site-footer .back-top {
  display: none;
}

/* --- Responsive --- */
@media (max-width: 1050px) {
  .site-header { gap: 20px; }
  .site-header nav { gap: 17px; }
  .wordmark { font-size: 1.4rem; }
  .brand-subline { font-size: .75rem; letter-spacing: .09em; }
  .hero { height: 450px; padding-inline: 32px; }
  .hero-content { max-width: 52%; }
  .hero h1 { font-size: 3.4rem; }
  .access-card { padding: 20px; gap: 14px; }
  .access-label { display: none; }
}

@media (max-width: 800px) {
  :root { --header-expanded-h: 95px; }
  .container { width: calc(100% - 40px); }
  .site-header { width: calc(100% - 40px); gap: 16px; }
  .site-header nav { background: #141f2d; padding: 12px; z-index: 10; }
  .site-header nav a { font-size: 1rem; }
  .lang-switch { margin-left: auto; order: 2; }
  .header-cta { margin-left: 0; padding: 9px 17px; min-height: 44px; order: 3; }
  .header-discord { order: 3; min-height: 44px; }
  .menu-toggle { margin-left: 0; order: 4; border-color: #7893ad50; }
  .hero { height: auto; min-height: 435px; margin-top: 20px; padding: 30px 26px 68px; }
  .hero-content { max-width: 52%; width: 360px; }
  .hero h1 { font-size: clamp(2.5rem, 6vw, 3rem); margin: 16px 0; }
  .hero .eyebrow { display: none; }
  .hero-description { font-size: 1rem; line-height: 1.65; }
  .hero-background { object-position: 56% center; }
  .hero-actions { margin-top: 21px; }
  .hero .button { font-size: 1rem; padding: 11px 19px; }
  .access-panel { gap: 14px; margin-top: 18px; }
  .access-card { padding: 17px 16px; gap: 13px; }
  .access-glyph { width: 34px; height: 34px; font-size: 1.3rem; }
  .access-card strong { font-size: 1.0625rem; }
  .access-card small { font-size: .75rem; letter-spacing: .045em; }
  .access-disclosure { text-align: left; line-height: 1.6; }
  .section { padding-block: 54px; }
  .section-heading h2,
  .hangar-intro h2 { font-size: 2.2rem; }
  .site-footer { padding-top: 44px; }
  .site-footer .footer-inner { width: calc(100% - 40px); }
  .site-footer .footer-top { flex-wrap: wrap; padding-bottom: 36px; }
  .site-footer .footer-links { justify-content: flex-start; }
  .site-footer .footer-bar { flex-direction: column; align-items: flex-start; gap: 10px; }
}

@media (max-width: 540px) {
  :root { --header-expanded-h: 87px; }
  .site-header { gap: 12px; }
  .wordmark { font-size: 1.3rem; }
  .brand-subline { font-size: .75rem; letter-spacing: .075em; margin-top: 6px; }
  .header-cta { display: none; }
  .header-discord { order: 2; width: 44px; padding: 0; justify-content: center; }
  .header-discord-label { display: none; }
  .lang-switch { margin-left: auto; order: 2; }
  .menu-toggle { margin-left: 0; order: 3; }
  .hero {
    height: auto;
    min-height: 570px;
    padding: 240px 24px 77px;
    align-items: flex-end;
    margin-top: 16px;
  }
  .hero-background { height: 305px; object-position: 76% center; object-fit: cover; }
  .hero-shade { background: linear-gradient(0deg, #080d17 0%, #080d17 39%, #080d17d9 51%, #080d1700 76%); }
  .hero-content { width: 100%; max-width: none; }
  .hero h1 { font-size: 3rem; line-height: 1.07; margin: 12px 0 18px; }
  .hero-description { font-size: 1rem; line-height: 1.6; max-width: 340px; }
  .hero-actions { margin-top: 20px; display: flex; flex-direction: row; }
  .hero .button { min-height: 48px; font-size: 1rem; padding: 11px 23px; }
  .hero-footnote { font-size: .75rem; letter-spacing: .015em; padding: 12px 15px; gap: 15px; }
  .hero-footnote > span:first-child { max-width: 195px; line-height: 1.4; }
  .hero-footnote > span:last-child { font-size: .8125rem; }
  .hero-footnote i { margin-inline: 4px; }
  .access-panel { grid-template-columns: 1fr; gap: 10px; margin-top: 14px; }
  .access-card { padding: 16px 18px; gap: 15px; }
  .access-label { display: block; font-size: .75rem; letter-spacing: .015em; }
  .access-card strong { font-size: 1.0625rem; }
  .access-disclosure { font-size: .75rem; margin-top: 10px; }
  .section-heading h2 { font-size: 2rem; }
}

@media (max-width: 390px) {
  .container,
  .site-header { width: calc(100% - 28px); }
  .hero { padding: 215px 19px 77px; min-height: 548px; }
  .hero-background { height: 275px; }
  .hero h1 { font-size: 2.75rem; }
  .access-card { padding: 15px 12px; gap: 11px; }
  .access-label { display: none; }
  .hero-footnote > span:first-child { max-width: 170px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 700px) {
  .download-panel { grid-template-columns: 1fr; gap: 10px; margin-top: 14px; }
}

/* Hangar: the ship sits on the orbit's centre (both at 48%) and the caption keeps
   to the bottom edge. In the centred column the caption pushed the ship up by half
   its own height, so every ship looked off-centre in the circle. */
.ship-display { justify-content: flex-end; }
.ship-display > img { position: absolute; top: 48%; left: 50%; transform: translate(-50%, -50%); }

/* Ships now follows the download cards directly; give its band the room the
   Universe section's own padding used to provide. */
.download-panel + .hangar-section { margin-top: 64px; }
@media (max-width: 800px) { .download-panel + .hangar-section { margin-top: 40px; } }

/* Six hangar tabs wrap as 5 + 1 on phones; a 3 x 2 grid keeps them balanced. */
@media (max-width: 540px) {
  .ship-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .ship-tabs button { padding-inline: 6px; }
}