/* FlockAim's website. One file, no framework.
   Home is a sunset you scroll through: it opens on the game's dawn cream and darkens,
   band by band, through amber and violet into the night sky the birds fly home in.
   Colours are the game's own (Palette.swift and the Dusk Ridge sky); fonts are the app's
   own two, bundled here. See README "Design choices". */

@font-face { font-family: "Bowlby One SC"; src: url("/assets/fonts/bowlbyonesc-regular-latin.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Chakra Petch"; font-weight: 500; src: url("/assets/fonts/chakrapetch-medium-latin.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Chakra Petch"; font-weight: 600; src: url("/assets/fonts/chakrapetch-semibold-latin.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Chakra Petch"; font-weight: 700; src: url("/assets/fonts/chakrapetch-bold-latin.woff2") format("woff2"); font-display: swap; }

:root {
  /* The Dusk Ridge sky, top to bottom, and the game's palette. */
  --night: #05041a;
  --deep: #1c0e52;
  --plum: #2e1263;
  --violet: #5a1d7e;
  --magenta: #c63a7c;
  --ember: #ff8a56;
  --glow: #ffd083;
  --dawn: #fff1d6;
  --paper: #fff7e8;
  --cream: #fff5d6;
  --amber: #ffb02e;
  --amber-edge: #b86a12;
  --label: #ffd9a0;
  --lilac: #e9dcff;
  --cyan: #3cf2ff;
  --lime: #b6ff4d;
  --pink: #ff5fb0;
  --chain: #ffe08a;
  /* Text on the light bands: the deep sky as ink. Every pair passes 4.5:1. */
  --ink: #1c0e52;
  --ink-soft: #4b3a7a;
  --rust: #8a3a12;

  --wrap: 1120px;
  --read: 38rem;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --radius: 14px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--dawn);
  color: var(--ink);
  font: 500 1.0625rem/1.65 "Chakra Petch", system-ui, sans-serif;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 0.14em; }

:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 10;
  background: var(--ink); color: var(--cream); padding: 0.6rem 1rem; border-radius: 8px;
}
.skip:focus { top: 1rem; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* The HUD's own label: small, letter-spaced, amber ("SCORE", "SHELLS" in the game). */
.label {
  font: 600 0.75rem/1.2 "Chakra Petch", sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rust);
  margin: 0 0 0.75rem;
}
.dark .label { color: var(--label); }

h1, h2, h3 { margin: 0; line-height: 1.05; font-weight: 400; text-wrap: balance; }

h1 {
  font: 400 clamp(2.6rem, 7.4vw, 5.2rem)/0.98 "Bowlby One SC", sans-serif;
  letter-spacing: -0.01em;
  color: var(--ink);
}
h2 {
  font: 700 clamp(1.9rem, 4.2vw, 2.9rem)/1.08 "Chakra Petch", sans-serif;
  letter-spacing: -0.015em;
  margin-bottom: 1rem;
  max-width: 20ch;
}
h3 { font: 400 1.35rem/1.1 "Bowlby One SC", sans-serif; }

p { margin: 0 0 1rem; max-width: var(--read); }
.lead { font-size: clamp(1.15rem, 2vw, 1.3rem); line-height: 1.55; }

/* The masthead: the bird and the wordmark, set in the app's logo face. */
.masthead { padding: 1.25rem 0; }
.masthead-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.wordmark {
  font: 400 1.45rem/1 "Bowlby One SC", sans-serif;
  letter-spacing: 0.01em;
  text-transform: uppercase; /* full capitals, as in the lockup and the game's title */
  color: var(--ink);
}
/* The brand lockup's proportions (flockaim-design/brand/lockup-2d.png): the bird stands over
   twice the height of the capitals, and its beak points at 82% of the way down them. Bowlby One
   SC's capitals are 0.742 em tall, and at line-height 1 their top sits 0.093 em below the line's
   top; the beak is 83.5% of the way down this bird drawing. Hence a bird 1.7 em tall (as wide
   beside the word as in the lockup) and the word 0.718 em down (0.835 x 1.7 - 0.82 x 0.742 - 0.093). */
.lockup { display: flex; align-items: flex-start; font-size: 1.45rem; text-decoration: none; }
.lockup img { height: 1.7em; width: auto; }
.lockup .wordmark { font-size: 1em; margin: 0.718em 0 0 0.24em; }
nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(0.9rem, 3vw, 1.8rem); }
nav a { font-weight: 600; text-decoration: none; padding: 0.4rem 0; }
nav a:hover, nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 0.12em; }

/* ---------- Home: the bands of the sunset ---------- */

.band { position: relative; padding: clamp(3.5rem, 9vw, 6.5rem) 0; }

.hero { padding-top: clamp(1.5rem, 5vw, 3.5rem); background: linear-gradient(var(--dawn), #ffe7c2); }
.hero-grid {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); align-items: center;
}
.hero h1 { margin-bottom: 1.4rem; }
.hero h1 span { display: block; }
.hero .shot { color: var(--amber-edge); }
.soon {
  display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 0.75rem;
  font-weight: 600; color: var(--ink);
}
.soon::before {
  content: ""; width: 0.65rem; height: 0.65rem; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 0 4px rgba(255, 176, 46, 0.28);
}

/* A real screen in a phone-shaped frame, with a note in the margin. */
.phone {
  position: relative; margin: 0;
  max-width: 320px; justify-self: center;
}
.phone img {
  border-radius: 34px; border: 9px solid #120a2e;
  box-shadow: 0 30px 60px -24px rgba(28, 14, 82, 0.55), 0 8px 18px -10px rgba(28, 14, 82, 0.4);
  background: #120a2e;
}
.phone figcaption {
  font-size: 0.9rem; line-height: 1.45; color: var(--ink-soft); margin-top: 1rem; max-width: 30ch;
}

/* How to play: three numbered steps, joined by the game's own dashed chain arcs. */
.play { background: linear-gradient(#ffe7c2, var(--glow) 55%, #ffb87a); }
.steps-wrap { position: relative; margin-top: 2.5rem; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 2.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); position: relative; z-index: 1; }
.steps li { position: relative; z-index: 1; }
.step-no {
  display: inline-grid; place-items: center; width: 3.6rem; height: 3.6rem; margin-bottom: 1rem;
  border-radius: 50%; background: var(--ink); color: var(--glow);
  font: 400 1.6rem/1 "Bowlby One SC", sans-serif;
}
.steps h3 { margin-bottom: 0.6rem; color: var(--ink); }
.steps p { font-size: 1rem; }
.chain-arcs { position: absolute; left: 0; right: 0; top: -0.4rem; width: 100%; height: 6rem; z-index: 0; pointer-events: none; }
.chain-arcs path { fill: none; stroke: var(--ink); stroke-width: 3; stroke-dasharray: 1 9; stroke-linecap: round; opacity: 0.7; vector-effect: non-scaling-stroke; }

.play-shot { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; margin-top: clamp(3rem, 7vw, 5rem); }
.play-shot .phone { justify-self: start; max-width: 290px; }
.play-shot h3 { font: 700 1.5rem/1.2 "Chakra Petch", sans-serif; margin-bottom: 0.75rem; }

/* Bosses: from ember into violet. */
.bosses { background: linear-gradient(#ffb87a, #f68a6a 5%, #e2577a 11%, var(--magenta) 17%, #8f2a78 44%, var(--violet)); color: var(--cream); padding-top: clamp(5.5rem, 12vw, 9rem); }
.bosses h2, .bosses p { color: var(--cream); }
.bosses .label { color: var(--cream); }
.bosses .intro { max-width: 40rem; }
.lineup { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; }
.lineup li { text-align: center; }
.lineup img { height: 120px; width: auto; margin: 0 auto 1rem; filter: drop-shadow(0 10px 14px rgba(5, 4, 26, 0.45)); }
.lineup h3 { font-size: 1.05rem; color: var(--cream); margin-bottom: 0.35rem; }
.lineup p { font-size: 0.9rem; line-height: 1.4; color: var(--lilac); margin: 0 auto; max-width: 18ch; font-style: italic; }
.lineup .stage { display: block; font: 600 0.7rem/1 "Chakra Petch", sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: var(--label); margin-bottom: 0.4rem; font-style: normal; }

/* Night: stars, the field guide, the places, and the fair bit. */
.dark { color: var(--lilac); }
.dark h2, .dark h3 { color: var(--cream); }
.stars {
  background-color: var(--deep);
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255, 255, 255, 0.75), transparent 60%),
    radial-gradient(1px 1px at 38% 62%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(1.4px 1.4px at 71% 24%, rgba(255, 255, 255, 0.8), transparent 60%),
    radial-gradient(1px 1px at 88% 78%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(1.1px 1.1px at 56% 8%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(0.9px 0.9px at 24% 88%, rgba(255, 255, 255, 0.45), transparent 60%);
  background-size: 340px 340px;
}
.guide { background-image: linear-gradient(var(--violet), var(--plum) 30%, rgba(28, 14, 82, 0) 70%), none; }
.guide-wrap { background: inherit; }

.entries { list-style: none; padding: 0; margin: 2.75rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.entry {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1.25rem; align-items: start;
  padding: 1.5rem; border-radius: var(--radius);
  background: rgba(5, 4, 26, 0.38); border: 1px solid rgba(233, 220, 255, 0.14);
}
.entry img { width: 7.5rem; }
.entry h3 { margin-bottom: 0.5rem; }
.entry p { font-size: 1rem; margin-bottom: 0.75rem; }
.facts { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin: 0; }
.facts div { display: flex; gap: 0.45rem; align-items: baseline; }
.facts dt { font: 600 0.7rem/1 "Chakra Petch", sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: var(--label); }
.facts dd { margin: 0; font-weight: 600; color: var(--cream); font-size: 0.95rem; }
.cyan h3 { color: var(--cyan); }
.lime h3 { color: var(--lime); }
.heavy h3 { color: var(--pink); }

/* Nine places, as postcards on a string. */
.places-strip {
  list-style: none; margin: 2.75rem 0 0; padding: 0.5rem var(--gutter) 1.5rem;
  display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: thin; scrollbar-color: var(--violet) transparent;
}
.places-strip li { flex: 0 0 auto; width: 13.5rem; scroll-snap-align: start; }
@media (min-width: 900px) {
  .places-strip { flex-wrap: wrap; justify-content: center; overflow: visible; max-width: var(--wrap); margin-left: auto; margin-right: auto; gap: 1.75rem 1.5rem; }
  .places-strip li { width: 11.4rem; }
}
.postcard {
  margin: 0; padding: 0.55rem 0.55rem 0.8rem; background: var(--cream); border-radius: 6px;
  box-shadow: 0 14px 26px -14px rgba(0, 0, 0, 0.7);
}
.places-strip li:nth-child(odd) .postcard { transform: rotate(-1.4deg); }
.places-strip li:nth-child(even) .postcard { transform: rotate(1.1deg); }
.postcard img { border-radius: 3px; aspect-ratio: 5 / 4; object-fit: cover; width: 100%; }
.postcard figcaption { font: 600 0.82rem/1.3 "Chakra Petch", sans-serif; color: var(--ink); margin-top: 0.55rem; }
.postcard figcaption span { display: block; font-weight: 500; color: var(--ink-soft); font-size: 0.78rem; }

.fair-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.more { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.more li { padding-left: 1.6rem; position: relative; }
.more li::before {
  content: ""; position: absolute; left: 0; top: 0.55rem; width: 0.7rem; height: 0.7rem;
  border: 2px solid var(--amber); border-radius: 50%;
}
.more strong { color: var(--cream); font-weight: 700; }

/* The end of the page: the game's own mountains, then the footer in the night under them. */
.ridge {
  aspect-ratio: 1950 / 717; max-height: 26rem; width: 100%;
  background:
    linear-gradient(var(--deep), rgba(28, 14, 82, 0) 42%),
    url("/assets/img/ridge-band-1950.webp") center bottom / cover no-repeat var(--deep);
}
.page .ridge { background-color: var(--paper); }
@media (max-width: 860px) { .ridge { background-image: linear-gradient(var(--deep), rgba(28, 14, 82, 0) 42%), url("/assets/img/ridge-band-975.webp"); } }
.footer { background: #0a0624; color: var(--lilac); padding: 2.5rem 0 3rem; font-size: 0.95rem; }
.footer-row { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; justify-content: space-between; align-items: flex-start; }
/* The wordmark in the brand's own colours (flockaim-design/brand/lockup-2d.png): cream letters
   on three stacked edges, amber, magenta and purple, each 7.4% of the capitals' height (0.055 em
   in Bowlby One SC), as on the game's title screen. */
.footer .wordmark {
  color: var(--cream); font-size: clamp(1.9rem, 4vw, 2.4rem); line-height: 1.15; padding-bottom: 0.17em;
  text-shadow: 0 0.055em 0 #ffb02e, 0 0.11em 0 #d6407a, 0 0.165em 0 #5e1e7d;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.footer a { color: var(--cream); }
.footer-note { margin: 1.5rem 0 0; color: #b9a8dd; font-size: 0.85rem; max-width: none; }
.consent-open { font: inherit; color: var(--cream); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }

/* ---------- Inner pages (About, Privacy, Contact, 404) ---------- */

.page { background: var(--paper); }
.page-head { background: linear-gradient(var(--dawn), var(--paper)); padding: clamp(2rem, 6vw, 4rem) 0 1.5rem; }
.page-head h1 { font-size: clamp(2.3rem, 6vw, 3.9rem); }
.page-body { padding: 1rem 0 clamp(3rem, 8vw, 5rem); }
.page-body h2 { font-size: clamp(1.45rem, 3vw, 1.85rem); margin: 2.5rem 0 0.75rem; max-width: none; }
.page-body ul { padding-left: 1.2rem; max-width: var(--read); }
.page-body li { margin-bottom: 0.45rem; }
.note {
  max-width: var(--read); margin: 1.5rem 0 2rem; padding: 1.25rem 1.4rem;
  background: #ffe7c2; border-left: 5px solid var(--amber); border-radius: 0 var(--radius) var(--radius) 0;
}
.note p:last-child { margin: 0; }
.mail {
  display: inline-block; font: 700 clamp(1.25rem, 3.5vw, 1.7rem)/1.2 "Chakra Petch", sans-serif;
  color: var(--ink); text-decoration-color: var(--amber); text-decoration-thickness: 0.12em;
}
.qa { max-width: var(--read); }
.qa h3 { font: 700 1.1rem/1.3 "Chakra Petch", sans-serif; margin: 1.75rem 0 0.4rem; }
.side-bird { float: right; width: min(38%, 12rem); margin: 0 0 1rem 1.5rem; }
.credits { border-collapse: collapse; width: 100%; max-width: 44rem; font-size: 0.95rem; }
.credits th, .credits td { text-align: left; padding: 0.55rem 0.75rem 0.55rem 0; border-bottom: 1px solid #ecd9b8; vertical-align: top; }
.credits th { font: 600 0.72rem/1.2 "Chakra Petch", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rust); }

.lost { text-align: left; }
.lost img { width: min(60%, 16rem); margin: 0 0 1.5rem; transform: rotate(-12deg); }

/* The analytics question (assets/analytics.js): small, plain, two equal buttons. */
.consent {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 20; max-width: 30rem;
  background: var(--cream); color: var(--ink); border-radius: var(--radius); padding: 1.1rem 1.25rem;
  box-shadow: 0 18px 40px -16px rgba(5, 4, 26, 0.6); border: 1px solid #ecd9b8;
}
.consent p { margin: 0 0 0.75rem; font-size: 0.95rem; }
.consent .consent-title { font-weight: 700; margin-bottom: 0.35rem; }
/* The game's own buttons: chunky pills standing on a solid edge, like PLAY on the title screen.
   The two answers are equally prominent on purpose: the same size, shape and weight, one in the
   game's amber and one in its night ink, so neither is the "easy" choice. */
.consent-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.25rem; }
.consent button {
  font: 700 0.82rem/1 "Chakra Petch", sans-serif; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.85rem 1.25rem 0.8rem; border: 0; border-radius: 999px; cursor: pointer;
  position: relative; top: 0;
  /* Equal widths: side by side on wide screens, both full width when they stack on a phone. */
  flex: 1 1 13rem;
}
.consent button[data-choice="yes"] {
  background: linear-gradient(#ffc04f, var(--amber)); color: var(--ink);
  box-shadow: 0 4px 0 var(--amber-edge), 0 10px 18px -10px rgba(184, 106, 18, 0.7);
}
.consent button[data-choice="no"] {
  background: linear-gradient(#2c1a6b, var(--ink)); color: var(--cream);
  box-shadow: 0 4px 0 #0a0624, 0 10px 18px -10px rgba(10, 6, 36, 0.7);
}
.consent button:focus-visible { outline: 3px solid var(--magenta); outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .consent button { transition: top 0.1s ease, box-shadow 0.1s ease, filter 0.15s ease; }
  .consent button:hover { top: -1px; filter: brightness(1.06); }
  .consent button[data-choice="yes"]:active { top: 3px; box-shadow: 0 1px 0 var(--amber-edge); }
  .consent button[data-choice="no"]:active { top: 3px; box-shadow: 0 1px 0 #0a0624; }
}

/* App Store buttons: written in, hidden until launch. LAUNCH: swap these two (README). */
.store-live { display: none; }

/* ---------- Narrow screens ---------- */

@media (max-width: 860px) {
  .hero-grid, .play-shot, .fair-grid { grid-template-columns: minmax(0, 1fr); }
  .phone { justify-self: start; max-width: 270px; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .chain-arcs { display: none; }
  .steps li { padding-left: 4.6rem; }
  .step-no { position: absolute; left: 0; top: 0; }
  .lineup { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }
  .lineup li:last-child { grid-column: 1 / -1; }
  .entries { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
  .lockup { font-size: 1.15rem; }
  nav ul { gap: 0.85rem; }
  nav a { font-size: 0.95rem; }
  .entry { grid-template-columns: 5.5rem minmax(0, 1fr); padding: 1.15rem; gap: 1rem; }
  .entry img { width: 5.5rem; }
  .side-bird { float: none; width: 55%; margin: 0 0 1.25rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .postcard { transition: transform 0.25s ease; }
  .places-strip li:hover .postcard { transform: rotate(0deg) translateY(-4px); }
}