/* ShellBound website. The game's navy and gold, its two typefaces (Luckiest Guy
   for headings, Baloo 2 for text) and solid colours. Gold marks buying the
   game; the light pill marks the free match. Space separates sections; the
   raised surface marks one band per page and the footer. The only translucent
   colour on the site is the scrim that keeps hero type readable over footage. */
:root {
  --bg: #0e1320;
  --surface: #18223b;
  --track: #2a3655;
  --text: #eef2fb;
  --text-2: #aab7d4;
  --accent: #ffb43d;
  --accent-hover: #ffc966;
  --on-accent: #1b1405;

  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 48px;
  --s5: 128px;

  --display: 'Luckiest Guy', 'Baloo 2', system-ui, sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 600px) {
  :root { --s4: 32px; --s5: 80px; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.6 'Baloo 2', system-ui, sans-serif;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.1; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(32px, 5vw, 56px); }
h2 { font-size: clamp(32px, 4.4vw, 52px); }
h3 { font-size: 21px; }
p { margin: 0; text-wrap: pretty; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.wrap.wide { max-width: 1440px; }
@media (max-width: 600px) { .wrap { padding: 0 16px; } }

/* ---- header ---- */
.top { position: relative; z-index: 3; padding: var(--s2) 0; }
.top .wrap { display: flex; align-items: center; gap: var(--s2) var(--s3); flex-wrap: wrap; }
.top.over { position: absolute; inset: 0 0 auto 0; }
.brand img { width: 150px; }
.links { display: flex; gap: var(--s3); margin-left: auto; }
.links a, .play-link { color: var(--text); text-decoration: none; font-weight: 600; padding: 10px 0; }
.links a:hover, .links a[aria-current='page'], .play-link:hover { color: var(--accent); }
.get {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 22px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent);
  font-weight: 700; text-decoration: none;
  transition: background-color 0.15s;
}
.get:hover { background: var(--accent-hover); color: var(--on-accent); }
@media (max-width: 720px) {
  .top .wrap { column-gap: var(--s2); }
  .brand img { width: 104px; }
  .links { order: 3; width: 100%; margin-left: 0; gap: var(--s3); }
  .play-link { margin-left: auto; }
  .get { padding: 0 18px; }
}

/* ---- calls to action ---- */
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.play {
  display: inline-flex; align-items: center; min-height: 56px;
  padding: 0 30px; border-radius: 999px;
  background: var(--text); color: var(--bg);
  font-weight: 800; font-size: 19px; text-decoration: none;
  transition: transform 0.2s var(--ease-out);
}
.play:hover { color: var(--bg); transform: translateY(-2px); }
.play:active { transform: scale(0.97); }
/* App Store badges: Apple's artwork, untouched, at least 40px tall with clear space */
.badges { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.badges a { display: inline-block; line-height: 0; padding: 4px; }
.badges img { height: 48px; width: auto; }
.cta-row .badges img { height: 56px; }
.app-icon { width: 88px; height: 88px; border-radius: 20px; }
/* a plain text link beside the badges on the content pages */
.badges .try {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
  line-height: 1.3; color: var(--text); font-weight: 700;
  text-decoration: underline; text-underline-offset: 4px;
}
.badges .try:hover { color: var(--accent); }
@media (max-width: 600px) {
  .badges { gap: var(--s1); }
  .badges img, .cta-row .badges img { height: 44px; }
  .play { min-height: 52px; font-size: 18px; }
}

/* ---- hero: a CPU vs CPU match playing edge to edge behind the title ---- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: flex-end;
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media video, .hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* the grade: a film-style falloff at the edges and a fade into the page below,
   so the type always sits on dark ground whatever the footage is doing */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to top, #0e1320 0%, rgba(14, 19, 32, 0.82) 22%, rgba(14, 19, 32, 0) 62%),
    linear-gradient(to right, rgba(14, 19, 32, 0.72) 0%, rgba(14, 19, 32, 0) 58%),
    linear-gradient(to bottom, rgba(14, 19, 32, 0.6) 0%, rgba(14, 19, 32, 0) 22%);
}
.hero-body { width: 100%; max-width: 1200px; margin: 0 auto; padding: 160px 24px var(--s5); }
.hero-logo { width: min(620px, 80vw); height: auto; margin-left: -1.5%; }
.hero h1 { font-size: clamp(30px, 4.2vw, 60px); max-width: 14em; margin-top: var(--s3); }
.hero-sub { font-size: 21px; max-width: 32em; margin-top: var(--s2); }
.hero-sub b { font-weight: 800; }
.hero .cta-row { margin-top: var(--s4); }
@media (max-width: 600px) {
  .hero::before {
    background:
      linear-gradient(to top, #0e1320 0%, rgba(14, 19, 32, 0.9) 38%, rgba(14, 19, 32, 0) 72%),
      linear-gradient(to bottom, rgba(14, 19, 32, 0.7) 0%, rgba(14, 19, 32, 0) 26%);
  }
  .hero-body { padding: 150px 16px var(--s4); }
  .hero-sub { font-size: 18px; }
  .hero .cta-row { margin-top: var(--s3); }
  .hero .play { width: 100%; justify-content: center; }
}

/* ---- page hero for content pages ---- */
.page-hero { padding: var(--s4) 0 var(--s4); }
.page-hero h1 { margin-bottom: var(--s2); }
.lede { font-size: 21px; color: var(--text-2); max-width: 34em; }
@media (max-width: 600px) { .lede { font-size: 19px; } }

/* ---- sections ---- */
.section { padding-bottom: var(--s5); }
.section > .wrap > h2 { margin-bottom: var(--s2); }
.section > .wrap > h2 + .pairs { margin-top: var(--s4); }
.intro { color: var(--text-2); font-size: 19px; max-width: 36em; margin-bottom: var(--s4); }
.prose { max-width: 44em; }
.prose p { color: var(--text-2); }
.prose p + p, .prose p + ul, .prose ul + p { margin-top: var(--s2); }
.prose h2 { margin-bottom: var(--s2); font-size: clamp(28px, 3.4vw, 34px); }
.prose h2:not(:first-child) { margin-top: var(--s4); }
.prose ul { margin: 0; padding-left: 1.2em; color: var(--text-2); }
.prose li + li { margin-top: var(--s1); }
.prose b { color: var(--text); }
.more { margin-top: var(--s4); font-weight: 700; }

/* the one raised band per page */
.band { background: var(--surface); padding: var(--s5) 0; margin-bottom: var(--s5); }
.band .section { padding-bottom: 0; }

/* ---- battlefields ---- */
.fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4) var(--s3); }
.fields figure { margin: 0; }
.fields img { width: 100%; border-radius: 16px; }
.fields figcaption { margin-top: var(--s2); color: var(--text-2); }
.fields figcaption b { display: block; font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1.1; color: var(--text); margin-bottom: 4px; }
@media (max-width: 760px) { .fields { grid-template-columns: 1fr; gap: var(--s4); } }

/* ---- roster on the landing page ---- */
.roster { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4) var(--s3); list-style: none; padding: 0; margin: 0; }
.roster a { display: block; text-decoration: none; color: var(--text); text-align: center; }
.roster img { width: 100%; max-width: 220px; aspect-ratio: 1; object-fit: contain; margin: 0 auto var(--s2); transition: transform 0.3s var(--ease-out); }
.roster a:hover img { transform: translateY(-6px); }
.roster b { display: block; font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1.1; }
.roster a:hover b { color: var(--accent); }
@media (max-width: 900px) { .roster { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .roster { grid-template-columns: repeat(2, 1fr); gap: var(--s4) var(--s2); } .roster b { font-size: 24px; } }

/* ---- fighters page: one showcase per fighter, alternating sides ---- */
.jump { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s1); list-style: none; padding: 0; margin: var(--s4) 0 0; max-width: 960px; }
.jump a { display: block; padding: 4px; border-radius: 12px; }
.jump img { width: 100%; aspect-ratio: 1; object-fit: contain; transition: transform 0.2s var(--ease-out); }
.jump a:hover img { transform: translateY(-4px); }
@media (max-width: 760px) { .jump { grid-template-columns: repeat(6, 1fr); } }

.showcase {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  gap: var(--s4) clamp(32px, 7vw, 112px);
  padding: var(--s5) 0 0; scroll-margin-top: var(--s3);
}
.showcases { padding-bottom: var(--s5); }
.showcase:nth-child(even) .render { order: 2; }
.render img { width: 100%; max-width: 520px; aspect-ratio: 640 / 587; object-fit: contain; margin: 0 auto; }
.showcase h2 { font-size: clamp(52px, 7vw, 96px); line-height: 1; }
.showcase .desc { font-size: 21px; color: var(--text-2); max-width: 26em; margin-top: var(--s2); }
.vitals {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: var(--s2) var(--s2); margin: var(--s4) 0 0; max-width: 440px;
}
.vitals dt { color: var(--text-2); }
.vitals dd { margin: 0; }
.vitals .num { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; min-width: 3.2em; }
.meter { display: block; height: 10px; border-radius: 5px; background: var(--track); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--accent); }
.arsenal { margin: var(--s4) 0 0; max-width: 440px; display: grid; gap: var(--s2); }
.arsenal div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); }
.arsenal dt { font-family: var(--display); font-size: 22px; line-height: 1.2; }
.arsenal dd { margin: 0; color: var(--text-2); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .showcase { grid-template-columns: 1fr; gap: var(--s3); padding-top: var(--s5); }
  .showcase:nth-child(even) .render { order: 0; }
  .render img { max-width: 300px; }
  .showcase .desc { font-size: 19px; }
  .arsenal div { display: block; }
  .arsenal dd { text-align: left; }
}

/* ---- definition grids (modes, controls, how to choose) ---- */
.pairs { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4) var(--s4); margin: 0; }
.pairs.three { grid-template-columns: repeat(3, 1fr); }
.pairs dt { font-family: var(--display); font-size: 28px; line-height: 1.1; margin-bottom: var(--s1); }
.pairs dd { margin: 0; color: var(--text-2); }
.pairs dd + dd { margin-top: var(--s1); }
@media (max-width: 860px) { .pairs.three { grid-template-columns: 1fr; gap: var(--s4); } }
@media (max-width: 700px) { .pairs { grid-template-columns: 1fr; gap: var(--s4); } .pairs dt { font-size: 24px; } }

/* ---- ordered steps (a real sequence: one turn) ---- */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: var(--s3); max-width: 44em; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 40px 1fr; gap: var(--s2); }
.steps li::before { content: counter(step); font-family: var(--display); font-size: 28px; line-height: 1.1; color: var(--accent); }
.steps h3 { margin-bottom: 4px; }
.steps p { color: var(--text-2); }

/* ---- devices ---- */
.split { display: grid; grid-template-columns: 4fr 7fr; gap: var(--s4) clamp(32px, 6vw, 96px); align-items: center; }
.split .copy h2 { margin-bottom: var(--s2); }
.split .copy p { color: var(--text-2); }
.split .copy p + p { margin-top: var(--s2); }
.devices { display: grid; grid-template-columns: 3fr 2fr; gap: var(--s2); align-items: end; }
.devices img { border-radius: 14px; width: 100%; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* ---- tiers ---- */
/* fills column by column so the ladder reads Iron to Platinum, then Emerald to Challenger */
.tiers { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(5, auto); grid-auto-flow: column; gap: var(--s3) var(--s4); list-style: none; padding: 0; margin: 0; }
.tiers li { display: grid; grid-template-columns: 80px 1fr; gap: var(--s2); align-items: center; }
.tiers img { width: 80px; height: 80px; object-fit: contain; }
.tiers b { display: block; font-family: var(--display); font-weight: 400; font-size: 21px; }
.tiers span { color: var(--text-2); }
@media (max-width: 700px) { .tiers { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; } }

/* ---- FAQ ---- */
.faq { max-width: 46em; }
.faq details + details { margin-top: 4px; }
.faq summary {
  cursor: pointer; list-style: none; min-height: 44px; padding: var(--s1) 0;
  display: flex; justify-content: space-between; align-items: center; gap: var(--s2);
  font-weight: 700; font-size: 21px; line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--accent); font-family: var(--display); font-size: 28px; line-height: 1; }
.faq details[open] summary::after { content: '\2212'; }
.faq details p { color: var(--text-2); padding: 0 0 var(--s2); }

/* ---- closing call on content pages ---- */
.closing { text-align: center; }
.closing h2 { margin-bottom: var(--s2); }
.closing p { color: var(--text-2); }
.closing .badges { justify-content: center; margin-top: var(--s3); }

/* ---- finale: the key art edge to edge with the last call to action ---- */
.finale {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(200px, 30vw, 420px) 0 var(--s5); text-align: center;
}
.finale > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.finale::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, #0e1320 0%, rgba(14, 19, 32, 0.85) 34%, rgba(14, 19, 32, 0) 70%),
    linear-gradient(to bottom, #0e1320 0%, rgba(14, 19, 32, 0) 18%);
}
.finale .app-icon { margin: 0 auto var(--s3); }
.finale h2 { font-size: clamp(40px, 6vw, 80px); }
.finale p { margin-top: var(--s2); font-size: 19px; }
.finale .cta-row { justify-content: center; margin-top: var(--s4); }

/* ---- footer ---- */
.foot { background: var(--surface); padding: var(--s4) 0; color: var(--text-2); }
.foot .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.foot nav { display: flex; flex-wrap: wrap; gap: 0 var(--s3); }
.foot a { color: var(--text); text-decoration: none; padding: 10px 0; }
.foot a:hover { color: var(--accent); }
.foot .legal { margin-left: auto; }
/* Apple's trademark notice, the one line of fine print */
.foot .tm { width: 100%; font-size: 15px; }
@media (max-width: 600px) { .foot .legal { margin-left: 0; width: 100%; } }

/* ---- scroll motion: footage recedes as the page takes over, and art arrives
   as it enters view. Pure CSS where the browser supports scroll timelines,
   static everywhere else and for anyone who prefers less motion. ---- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-media { animation: recede linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    .hero-body { animation: lift linear both; animation-timeline: scroll(root); animation-range: 0 85vh; }
    .reveal { animation: arrive linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
    .showcase .render img { animation: slide-in linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    .showcase:nth-child(even) .render img { --from: 72px; }
  }
}
@keyframes recede { to { transform: scale(1.1); opacity: 0.4; } }
@keyframes lift { to { transform: translateY(-96px); opacity: 0; } }
@keyframes arrive { from { transform: translateY(56px) scale(0.97); opacity: 0; } }
@keyframes slide-in { from { transform: translateX(var(--from, -72px)) scale(0.92); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}