:root {
  --blue: #3094ff;
  --button: #3d9be9;
  --ink: #111217;
  --muted: #605e5e;
  --header-h: 78px;
  --col: 980px;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; }

.col {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--col);
  margin: 0 auto;
}

/* Header: sits on top of the first strip, stays pinned while scrolling. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--header-h);
  margin-bottom: calc(-1 * var(--header-h));
  background: rgba(48, 148, 255, 0.95);
}
.site-header .col {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 100%;
  padding: 0 24px 3px 20px;
}
.site-header .logo { align-self: flex-start; margin-top: 10px; line-height: 0; }
.site-header .logo img { width: 209px; height: auto; }
.site-nav { display: flex; gap: 44px; }
.site-nav a {
  color: #fff;
  font-size: 24px;
  line-height: 1.4;
  text-decoration: none;
}
.site-nav a:hover { text-decoration: underline; }

/* Full-width photo strips with a crossfading slideshow. */
.strip {
  position: relative;
  height: 600px;
  overflow: hidden;
  background: #222;
  scroll-margin-top: var(--header-h);
}
.strip--hero { height: 675px; }
.strip .slide {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  opacity: 0;
  transition: opacity 1s linear;
}
.strip .slide.is-active { opacity: 1; }
.strip h2 {
  position: relative;
  margin: 0;
  color: #fff;
  font-size: 50px;
  font-weight: 400;
  letter-spacing: 2.5px;
  line-height: 58px;
  text-align: center;
}
.strip--support h2 { padding-top: 10px; }

.welcome {
  margin: 26px 0 0;
  font-size: 60px;
  font-weight: 700;
  letter-spacing: 3px;
  line-height: 70px;
  text-align: center;
}
.arrow {
  display: block;
  width: 50px;
  height: 50px;
  margin: 29px auto 25px;
  color: var(--ink);
}
.arrow svg { display: block; width: 100%; height: 100%; }

.about-text {
  margin: 15px auto 14px;
  padding: 0 18px;
  color: var(--muted);
  font-size: 20px;
  line-height: 1.27;
  text-align: center;
}

.section-title {
  margin: 0 0 70px;
  font-size: 50px;
  font-weight: 400;
  letter-spacing: 2.5px;
  line-height: 58px;
  text-align: center;
  scroll-margin-top: var(--header-h);
}

/* Games list: device frame on the left, copy on the right. */
.game {
  display: flex;
  gap: 30px;
  margin: 0 0 26px;
  padding: 0 48px 0 47px;
}
.device {
  position: relative;
  flex: none;
  width: 410px;
  aspect-ratio: 410 / 316;
}
.device--short { aspect-ratio: 410 / 290; }
.device--monitor { width: 412px; aspect-ratio: 412 / 339; }
.device .frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.device .shot {
  position: absolute;
  left: 8.78%;
  top: 9.5%;
  width: 82.93%;
  height: 80.7%;
  object-fit: cover;
}
.device--short .shot { top: 10.35%; height: 79.3%; }
.device--monitor .shot { left: 3.64%; top: 5%; width: 92.72%; height: 70.2%; }

.game-copy { display: flex; flex-direction: column; min-width: 0; }
.game-copy h3 { margin: 23px 0 23px; font-size: 18px; line-height: 21px; }
.game-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.26;
  text-align: justify;
}
.game-copy p.left { text-align: left; }
.game-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: auto;
  padding: 14px 0 22px;
}
.game--monitor { margin-bottom: 71px; }
.game--monitor .game-copy h3 { margin-top: 16px; }
.game--monitor .game-actions { padding-bottom: 84px; }
.game-actions .badge { line-height: 0; }
.game-actions .badge img { width: 150px; height: 50px; }

.button {
  display: inline-block;
  box-sizing: border-box;
  width: 142px;
  height: 40px;
  border-radius: 20px;
  background: var(--button);
  color: #fff;
  font-size: 18px;
  line-height: 40px;
  text-align: center;
  text-decoration: none;
}
.button:hover { background: #2f86d1; }

/* Support: one column per game. */
.support-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin: 10px auto 0;
}
.support-item { display: flex; flex-direction: column; align-items: center; width: 180px; }
.support-item .icon { display: block; height: 243px; margin-bottom: 12px; line-height: 0; }
.support-item .icon img { width: 180px; height: 243px; object-fit: contain; }
.support-item .button { margin-bottom: 10px; }

.back-to-top { margin-top: 40px; text-align: center; }
.back-to-top .arrow { margin: 0 auto 25px; transform: rotate(180deg); }
.back-to-top a.top {
  display: inline-block;
  width: 130px;
  height: 40px;
  background: var(--blue);
  color: #fff;
  font-size: 20px;
  line-height: 40px;
  text-decoration: none;
}

.site-footer { padding: 7px 16px 110px; font-size: 16px; text-align: center; }
.site-footer p { margin: 0 0 9px; line-height: 19px; }
.site-footer nav { display: flex; justify-content: center; gap: 20px; }
.site-footer a { color: #2f2e2e; line-height: 1.4; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* Legal pages: the documents keep their plain browser typography. */
.legal {
  box-sizing: border-box;
  max-width: var(--col);
  min-height: 60vh;
  margin: 0 auto;
  padding: calc(var(--header-h) + 8px) 8px 40px;
  color: #000;
  font-family: "Times New Roman", Times, serif;
  font-size: 16px;
  overflow-wrap: break-word;
}
.legal table { max-width: 100%; }
.legal + .site-footer { padding-bottom: 110px; }

.not-found { padding: calc(var(--header-h) + 80px) 16px 120px; text-align: center; }
.not-found h1 { font-size: 50px; font-weight: 400; letter-spacing: 2.5px; }
.not-found p { color: var(--muted); font-size: 20px; }

@media (max-width: 980px) {
  :root { --header-h: 64px; }
  .site-header .col { padding: 0 14px 6px; }
  .site-header .logo { margin-top: 12px; }
  .site-header .logo img { width: 140px; }
  .site-nav { gap: 16px; }
  .site-nav a { font-size: 16px; }
  .strip, .strip--hero { height: 46vw; min-height: 220px; }
  .strip h2, .section-title { font-size: 34px; line-height: 44px; }
  .strip h2 { padding-top: calc(var(--header-h) / 3); }
  .welcome { font-size: 34px; letter-spacing: 1.5px; line-height: 42px; }
  .section-title { margin-bottom: 36px; }
  .game { flex-direction: column; align-items: center; gap: 0; padding: 0 20px; }
  .device, .device--monitor { width: min(410px, 100%); }
  .game-copy { width: min(445px, 100%); }
  .game-copy h3 { margin-top: 14px; }
  .game--monitor .game-actions { padding-bottom: 22px; }
}

@media (max-width: 560px) {
  .site-header .logo img { width: 104px; }
  .site-nav { gap: 10px; }
  .site-nav a { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .strip .slide { transition: none; }
}