:root {
  --ink: #fbfaf7;
  --muted: rgb(251 250 247 / 75%);
  --line: rgb(251 250 247 / 27%);
  --orange: #be2734;
  --orange-bright: #ff8b91;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: #090a0b; }

body {
  min-width: 320px;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  background: #090a0b;
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; -webkit-tap-highlight-color: transparent; }

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

.logo-filter { position: absolute; width: 0; height: 0; overflow: hidden; }

:focus-visible {
  outline: 3px solid var(--orange-bright);
  outline-offset: 5px;
}

.installation { position: relative; min-height: 100dvh; isolation: isolate; }

.installation__backdrop,
.installation__backdrop::before,
.installation__backdrop::after {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.installation__backdrop { z-index: 0; overflow: hidden; background: #090a0b; }

.installation__backdrop-image {
  display: block;
  width: 100%;
  height: 100%;
  background: #090a0b var(--hero-art) center / cover no-repeat;
  filter: saturate(.84) contrast(1.1) brightness(.84) sepia(.05) hue-rotate(-3deg);
}

.installation__backdrop::before {
  z-index: 1;
  content: "";
  background:
    radial-gradient(ellipse 74% 92% at 74% 48%, transparent 0%, rgb(4 6 9 / .1) 51%, rgb(4 6 9 / .38) 100%),
    linear-gradient(90deg, rgb(3 5 8 / 84%) 0%, rgb(3 5 8 / 73%) 31%, rgb(3 5 8 / 40%) 53%, rgb(3 5 8 / 8%) 78%, rgb(3 5 8 / 23%) 100%),
    linear-gradient(0deg, rgb(3 5 8 / 63%) 0%, transparent 40%, rgb(3 5 8 / 11%) 100%);
}

.installation__backdrop::after {
  z-index: 2;
  content: "";
  opacity: .38;
  background-image: radial-gradient(rgb(255 255 255 / .18) .45px, transparent .6px);
  background-size: 5px 5px;
  mix-blend-mode: soft-light;
}

.install-screen {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: min(100% - clamp(40px, 8vw, 160px), 1440px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(38px, env(safe-area-inset-top)) 0 max(38px, env(safe-area-inset-bottom));
}

.install-panel { width: min(100%, 840px); }

.game-logo {
  width: min(100%, 840px);
  height: clamp(134px, 16vw, 210px);
  margin: 0;
  overflow: hidden;
  line-height: 0;
}

.game-logo img {
  display: block;
  width: 115%;
  max-width: none;
  height: auto;
  transform: translate(-6.5%, -18.4%);
  filter: url("#logo-cleanup") drop-shadow(0 14px 28px rgb(0 0 0 / .5));
}

.tagline {
  max-width: 27ch;
  margin: clamp(2px, .9vh, 12px) 0 0 1.1%;
  color: var(--orange-bright);
  font-size: clamp(1.1rem, 1.65vw, 1.65rem);
  font-weight: 900;
  letter-spacing: .09em;
  line-height: 1.2;
}

.download-actions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 1.3vw, 20px);
  align-items: center;
  margin-top: clamp(24px, 4.4vh, 50px);
}

.store-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: clamp(92px, 7.7vw, 120px);
  padding: 0;
  border: 1px solid rgb(255 255 255 / 15%);
  border-radius: 13px;
  background: #050505;
  box-shadow: 0 10px 28px rgb(0 0 0 / .29);
  overflow: hidden;
  text-decoration: none;
  transition: transform 160ms var(--ease-out), border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}

.store-badge img { display: block; width: auto; height: 100%; }
.store-badge:active { transform: scale(.975); }

.qr-download {
  display: grid;
  grid-template-columns: 189px minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  width: min(100%, 750px);
  margin-top: clamp(28px, 4vh, 46px);
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}

.qr-download__code {
  display: block;
  width: 189px;
  height: 189px;
  padding: 6px;
  background: #fff;
}

.qr-download__code img { display: block; width: 100%; height: 100%; }

.qr-download__copy {
  max-width: 22ch;
  color: var(--muted);
  font-size: clamp(1rem, 1.3vw, 1.23rem);
  font-weight: 750;
  line-height: 1.32;
}

.qr-download__arrow {
  color: var(--orange-bright);
  font-size: clamp(1.55rem, 2vw, 2rem);
  transition: transform 160ms var(--ease-out);
}

.game-summary {
  max-width: 64ch;
  margin: clamp(15px, 2.3vh, 24px) 0 0;
  color: var(--muted);
  font-size: clamp(.75rem, .85vw, .88rem);
  font-weight: 500;
  line-height: 1.45;
  text-wrap: pretty;
}

@media (hover: hover) and (pointer: fine) {
  .store-badge:hover {
    border-color: rgb(255 194 107 / .75);
    box-shadow: 0 15px 36px rgb(0 0 0 / .46);
    transform: translateY(-3px);
  }

  .qr-download:hover .qr-download__copy { color: var(--ink); }
  .qr-download:hover .qr-download__arrow { transform: translate(2px, -2px); }
}

@media (max-width: 960px) {
  .install-screen { width: min(100% - 80px, 840px); }
}

@media (max-width: 620px) {
  .installation__backdrop-image {
    background-position: 56% center;
    transform: scale(1.12);
    transform-origin: 56% center;
  }

  .installation__backdrop::before {
    background:
      radial-gradient(ellipse 100% 68% at 62% 30%, transparent 0%, rgb(3 5 8 / .18) 68%, rgb(3 5 8 / .49) 100%),
      linear-gradient(180deg, rgb(3 5 8 / .2) 0%, rgb(3 5 8 / .39) 32%, rgb(3 5 8 / .76) 100%);
  }

  .install-screen {
    width: min(100% - 40px, 500px);
    padding: max(25px, env(safe-area-inset-top)) 0 max(26px, env(safe-area-inset-bottom));
  }

  .game-logo { height: clamp(108px, 29vw, 144px); }
  .tagline { margin-top: 0; font-size: clamp(.98rem, 4.4vw, 1.2rem); line-height: 1.22; }

  .download-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 28px;
  }

  .store-badge { width: 100%; height: auto; min-height: 0; aspect-ratio: 2.64 / 1; border-radius: 9px; }
  .store-badge img { width: 100%; height: auto; }
  .store-badge:last-child { aspect-ratio: 2.975 / 1; align-self: center; }

  .qr-download {
    grid-template-columns: 145px minmax(0, 1fr) auto;
    gap: 16px;
    width: 100%;
    margin-top: 28px;
    padding-top: 16px;
  }

  .qr-download__code { width: 145px; height: 145px; padding: 5px; }
  .qr-download__copy { font-size: .94rem; }
  .game-summary { max-width: 42ch; font-size: .75rem; line-height: 1.4; }
}

@media (max-width: 380px), (max-height: 720px) {
  .game-logo { height: 96px; }
  .tagline { font-size: .9rem; }
  .download-actions { margin-top: 19px; }
  .qr-download { grid-template-columns: 120px minmax(0, 1fr) auto; gap: 13px; margin-top: 19px; }
  .qr-download__code { width: 120px; height: 120px; }
  .qr-download__copy { font-size: .82rem; }
  .game-summary { margin-top: 13px; font-size: .68rem; }
}

@media (prefers-reduced-motion: reduce) {
  .store-badge, .qr-download__arrow { transition: none; }
  .store-badge:hover, .qr-download:hover .qr-download__arrow { transform: none; }
}