/* Colours lifted from the app's asset catalogue (hegemonia/Assets.xcassets). */
:root {
  --paper: #F6F1E4;        /* appBackground */
  --ink: #1F1C17;          /* appForeground */
  --ink-soft: #3F3C36;     /* appForegroundSecondary */
  /* Player colours: the app declares them in Display P3, so the P3 values are
     the source of truth and the hex above each is the sRGB fallback. */
  --blue: #4A7AB5;         /* PLAYER_BLUE   p3(0.333 0.474 0.692) */
  --orange: #B5564A;       /* PLAYER_ORANGE p3(0.663 0.358 0.308) */
  --green: #5C8A6E;        /* PLAYER_GREEN  p3(0.400 0.536 0.439) */
  --yellow: #C8A04A;       /* PLAYER_YELLOW p3(0.759 0.633 0.345) */
}

@supports (color: color(display-p3 1 1 1)) {
  :root {
    --blue: color(display-p3 0.333 0.474 0.692);
    --orange: color(display-p3 0.663 0.358 0.308);
    --green: color(display-p3 0.400 0.536 0.439);
    --yellow: color(display-p3 0.759 0.633 0.345);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* The rolling-hills dither backdrop, same idea as the app's About screen. */
#dither {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* One centred column that grows with the viewport: everything below sizes off
   the same clamps so the poster stays balanced from phone to desktop. */
main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  max-width: clamp(480px, 60vw, 720px);
  margin: 0 auto;
  padding: clamp(48px, 6vh, 88px) 24px clamp(40px, 5vh, 72px);
  text-align: center;
}

h1 {
  margin: 0;
  font-size: clamp(42px, 6.5vw, 84px);
  font-weight: 800;
  letter-spacing: clamp(3px, 0.6vw, 8px);
  line-height: 1.05;
}

/* Four-nation hatched rule beneath the wordmark, as in the main menu. */
.banner {
  display: flex;
  width: 100%;
  height: clamp(10px, 1.1vw, 16px);
  max-width: clamp(280px, 38vw, 460px);
  margin: clamp(12px, 1.6vh, 20px) auto 0;
  border: 1px solid var(--ink);
}
/* Matches HatchedFill: 1.5pt diagonal strokes in the player colour, 4pt apart,
   drawn over an appForeground background. */
.hatch {
  flex: 1;
  background-color: var(--ink);
  background-image: repeating-linear-gradient(
    135deg,
    var(--hatch-color) 0 1.5px,
    transparent 1.5px 4px
  );
}
.hatch.blue   { --hatch-color: var(--blue); }
.hatch.orange { --hatch-color: var(--orange); }
.hatch.green  { --hatch-color: var(--green); }
.hatch.yellow { --hatch-color: var(--yellow); }

.tagline {
  margin: clamp(16px, 2.2vh, 28px) 0 0;
  font-size: clamp(17px, 1.5vw, 23px);
  color: var(--ink-soft);
}

.shot {
  display: block;
  width: auto;
  max-width: min(100%, clamp(300px, 26vw, 380px));
  height: auto;
  max-height: min(62vh, 660px);
  margin: clamp(32px, 4.5vh, 56px) auto;
  object-fit: contain;
}

/* Ink-on-paper button with the solid offset shadow the app's buttons use. */
.appstore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 0.8vw, 14px);
  padding: clamp(14px, 1.5vw, 20px) clamp(22px, 2.6vw, 36px);
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  font-size: clamp(17px, 1.4vw, 21px);
  font-weight: 600;
  text-decoration: none;
  transition: transform .06s ease, box-shadow .06s ease;
}
.appstore svg {
  width: clamp(22px, 1.8vw, 27px);
  height: clamp(22px, 1.8vw, 27px);
}
.appstore:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--ink);
}

footer {
  display: inline-block;
  margin-top: clamp(40px, 5vh, 64px);
  padding: 8px 16px;
  background: var(--paper);
  font-size: clamp(14px, 1.05vw, 17px);
  color: var(--ink-soft);
}
footer a {
  color: var(--ink-soft);
  text-decoration: underline;
}
footer span { margin: 0 6px; }

/* Wide screens: stop stacking. The phone takes the right half at full height
   and the wordmark, button and links form a left-aligned column beside it. */
@media (min-width: 900px) and (min-height: 620px) {
  main:not(.page) {
    display: grid;
    /* Both columns size to their content and the leftover width becomes the
       gutter, so the wordmark can't overflow its track and squeeze the phone. */
    grid-template-columns: auto auto;
    grid-template-areas:
      "head shot"
      "cta  shot"
      "foot shot";
    grid-template-rows: auto auto auto;
    align-content: center;
    justify-content: center;
    justify-items: start;
    column-gap: clamp(96px, 12vw, 200px);
    max-width: min(1280px, 94vw);
    padding-inline: clamp(32px, 4vw, 56px);
    text-align: left;
  }

  /* A touch smaller than the stacked tier: the wordmark shares the row with
     the phone here, so it doesn't need to carry the page on its own. */
  main:not(.page) h1 { font-size: clamp(48px, 5.2vw, 76px); }

  /* Shrink the header to the wordmark so the hatched rule spans exactly its
     width, the way it sits under the title in the app. */
  main:not(.page) header {
    grid-area: head;
    width: fit-content;
  }
  main:not(.page) .banner {
    max-width: none;
    margin-inline: 0;
  }
  main:not(.page) .shot {
    grid-area: shot;
    align-self: center;
    max-width: clamp(300px, 28vw, 400px);
    max-height: min(76vh, 800px);
    margin: 0;
  }
  main:not(.page) .appstore { grid-area: cta; margin-top: clamp(40px, 6vh, 64px); }
  main:not(.page) footer { grid-area: foot; margin-top: clamp(28px, 4vh, 44px); }
  main:not(.page) .tagline { max-width: 32ch; }
}

/* Privacy policy page: a reading column, so it starts at the top rather than
   sitting vertically centred like the landing page. */
.page {
  align-items: stretch;
  justify-content: flex-start;
  min-height: 0;
  max-width: clamp(480px, 46vw, 640px);
  text-align: left;
  font-size: clamp(17px, 1.2vw, 20px);
}
.page h1 {
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: 1px;
}
.page h2 { font-size: clamp(20px, 1.6vw, 24px); font-weight: 600; margin-top: 32px; }
.page a { color: var(--ink); }
.back { display: inline-block; margin-bottom: clamp(24px, 3vh, 40px); font-size: clamp(14px, 1.05vw, 17px); }