/* ---------------------------------------------------------------
   Flick Games, studio site styles.
   Single stylesheet, plain CSS, organised top-to-bottom.
   Anyone on the team should be able to open this and edit it.
   --------------------------------------------------------------- */

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

/* --- Tokens --- */
:root {
  --paper:        #F5F1E8;
  --ink:          #1B1B1B;
  --ink-soft:     #6E6A62;
  --rule:         #E2DCCC;
  --accent:       #2D4F3D;
  --accent-hover: #1F3A2B;

  --font: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --w-narrow: 720px;
  --w-text:   880px;
  --w-wide:   1120px;
  --pad-x:    clamp(1.25rem, 4vw, 2.5rem);

  --header-h: 5rem;
}

/* --- Base --- */
html { font-size: 17px; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  /* Cream tint is baked into the texture file (paper-texture.jpg
     was multiplied with var(--paper) at 0.35 opacity at build time)
     so we use it as a plain tiling background here, no
     mix-blend-mode, no fixed positioning. Keeps scroll snappy
     even with three live WebGL canvases above. */
  background-color: var(--paper);
  background-image: url('paper-texture.jpg');
  background-repeat: repeat;
  background-size: 1000px 1000px;
  color: var(--ink);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Sections that the sticky header anchor-links to need a scroll
   offset so the heading isn't hidden beneath the bar. */
section[id] { scroll-margin-top: var(--header-h); }

/* --- Display type --- */
h1, h2, h3, h4 {
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0 0 0.6em;
}
h1 { font-size: clamp(2.4rem, 5.5vw, 4.4rem); letter-spacing: -0.02em; font-weight: 700; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.2; }
h4 { font-size: 1.05rem; font-weight: 500; }

p { margin: 0 0 1.2em; }
.lede {
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.5;
  color: var(--ink);
  max-width: var(--w-text);
  /* Distribute lines so single-word widows don't fall off. */
  text-wrap: pretty;
}
h1, h2, h3, h4 { text-wrap: balance; }
.muted { color: var(--ink-soft); }
small, .small { font-size: 0.85rem; color: var(--ink-soft); }

a { text-decoration: none; color: inherit; }
.link {
  color: var(--accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color 120ms ease, border-color 120ms ease;
}
.link:hover { color: var(--accent-hover); }
.link-arrow::after { content: ' →'; }

/* --- Layout helpers --- */
.wrap     { width: 100%; max-width: var(--w-wide); margin: 0 auto; padding: 0 var(--pad-x); }
.wrap-text{ width: 100%; max-width: var(--w-text); margin: 0 auto; padding: 0 var(--pad-x); }
.section  { padding: clamp(2.5rem, 5vw, 4.5rem) 0; }
.section-tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }

.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* --- Section logo (replaces the older eyebrow label) --- */
.section-logo {
  height: clamp(7rem, 14vw, 11rem);
  width: auto;
  margin: 0 0 1.5rem;
}

/* --- Site header --- */
.site-header {
  padding: 0.55rem 0;
  position: sticky; top: 0;
  background: var(--paper);
  z-index: 10;
  /* Subtle drop shadow under the bar so it sits clearly above the
     content as the page scrolls beneath. */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  /* Stop the flex parent from squashing the logo when the nav
     wraps to multiple lines on tight viewports. */
  flex-shrink: 0;
}
.wordmark img {
  display: block;
  height: 3.25rem;
  width: auto;
  max-width: none;
}

/* Subtle drop shadow on every Flick logo instance (header, hero,
   anywhere else it lands). drop-shadow follows the alpha mask, so
   the splat silhouette gets the soft halo, not a rectangle. */
img[src$="FlickLogo.png"] {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.18));
}

.site-nav { display: flex; flex-wrap: wrap; gap: clamp(0.75rem, 2.5vw, 2rem); }
.site-nav a {
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  padding: 0.4rem 0;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms ease;
  color: var(--ink-soft);
}
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* --- Mobile hamburger menu --------------------------------
   Hidden on desktop; takes over from the inline nav on narrow
   viewports. Toggling [aria-expanded] on the button reveals the
   nav as a dropdown panel pinned under the header. */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 0.4rem;
  cursor: pointer;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 1.5rem;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 180ms ease, opacity 180ms ease, top 180ms ease;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: '';
  position: absolute;
  left: 0;
}
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after  { top:  7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 640px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    padding: 0.5rem 0;
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a {
    padding: 0.85rem var(--pad-x);
    font-size: 1.05rem;
    border-bottom: 0;
    color: var(--ink);
  }
  .site-nav a:hover { background: var(--rule); border-bottom: 0; }
  .site-header { position: sticky; }
  .site-header .wrap { position: relative; }
}

/* --- Hero --- */
.hero { padding: clamp(3.5rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem); }
.hero-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto clamp(2rem, 5vw, 4rem);
}
.hero-logo__img {
  width: min(560px, 80%);
  height: auto;
}
.hero h1 { max-width: 18ch; margin-inline: auto; text-align: center; }
.hero .lede { margin: 1.5rem auto 0; max-width: 52ch; text-align: center; }

/* --- Section backgrounds ----------------------------------------
   Art of Solitaire sits on a wood table photo, Goalman on a
   stadium goalmouth photo. No tinted scrim on top: each image
   reads at full saturation. Other sections (hero, team, contact)
   inherit the body's paper texture.
   ----------------------------------------------------------------- */
.showcase {
  background: url('images/woodbg.jpg') center / cover no-repeat;
}
#goalman {
  background: url('images/shoot.jpg') center / cover no-repeat;
}
/* Art of Solitaire section: copy panel on the left, 2x2 cards on
   the right. The wrap is intentionally wider than the rest of the
   site so the cards can render large, with room to breathe and
   rotate without clipping at the wrap edge. */
#solitaire { padding-block: clamp(3rem, 6vw, 5.5rem); }
#solitaire .wrap { max-width: 1500px; }
.solitaire-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
@media (min-width: 760px) {
  .solitaire-split { grid-template-columns: minmax(320px, 540px) 1fr; }
}
.solitaire-copy {
  max-width: var(--w-text);
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: 12px;
  text-align: center;
}
.solitaire-copy h2,
.solitaire-copy .lede { color: #fff; }
.solitaire-copy .lede { margin-inline: auto; }
/* Pill link inside the dark AoS panel: white outline / white text
   that fills to solid white on hover (mirrors the Coming Soon pill
   in the Goalman panel). */
.solitaire-copy > p:last-child { margin-top: 1.25rem; margin-bottom: 0; }
.solitaire-copy .pill-link {
  background: transparent;
  border-color: #fff;
  color: #fff;
}
.solitaire-copy .pill-link:hover {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}
.solitaire-copy .section-logo {
  display: block;
  margin: 0 auto 1.25rem;
}

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
  justify-items: center;
}
@media (min-width: 540px) {
  .card-grid { grid-template-columns: 1fr 1fr; }
}

.card-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
}

.card-credit {
  /* Width hugs the text so the scrim wraps the deck and artist
     names rather than stretching across the whole column.
     Padding is symmetric on all four sides for equal breathing
     room. The flick-card host carries a built-in safety margin
     around the visible card body (camera margin in card.js); we
     pull the credit pill up into that empty bottom strip with a
     negative margin so the credit reads as sitting directly under
     the visible card. The card body never extends into this area
     (pitch foreshortens vertically rather than expanding the
     bounding box), so a spinning card never overlaps the pill. */
  width: fit-content;
  max-width: 100%;
  margin: -3.75rem auto 0.2rem;
  padding: 1rem;
  text-align: center;
  line-height: 1.25;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border-radius: 8px;
  box-sizing: border-box;
  position: relative;
}
.card-credit__deck {
  display: block;
  color: #fff;
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}
.card-credit__artist {
  display: block;
  font-size: 1rem;
  color: #fff;
}

.pill-link {
  display: inline-block;
  padding: 0.9rem 1.8rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-size: 1.05rem;
  font-weight: 500;
  background: var(--ink);
  color: var(--paper);
  transition: background 120ms ease, color 120ms ease;
}
.pill-link:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* --- Goalman section ---
   Wrap and column setup mirror Art of Solitaire so the two info
   boxes sit at the same left edge and share the same width. */
#goalman .wrap { max-width: 1500px; }
.goalman-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
@media (min-width: 760px) {
  /* Slightly wider than the AoS info box (540px) so "Challenge your
     friends to a penalty shootout." fits on one line. Both boxes
     still start at the same left edge. */
  .goalman-split { grid-template-columns: minmax(320px, 600px) 1fr; }
}
.goalman-copy {
  max-width: var(--w-text);
  /* Black semi-transparent panel so white copy reads cleanly over
     the stadium photo. */
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: 12px;
  text-align: center;
}
.goalman-copy .lede {
  color: #fff;
  /* Distribute lines so single-word widows don't fall off. */
  text-wrap: pretty;
}
.goalman-copy .coming-soon {
  color: #fff;
  border-color: #fff;
}
/* Centre the section logo and the Coming Soon pill within the
   Goalman copy column. The heading and lede stay left-aligned for
   readable measure. */
.goalman-copy .section-logo {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.goalman-copy > p:last-child {
  text-align: center;
}
.goalman-stage {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  aspect-ratio: 7 / 9;
}
@media (min-width: 760px) {
  /* On desktop the goalkeeper is sized to 4/5 of the info box's
     height. --goalman-stage-h is written by a ResizeObserver in
     goalman.js that watches .goalman-copy. Width follows from the
     7:9 aspect ratio. The info box panel is untouched. */
  .goalman-stage {
    width: auto;
    height: var(--goalman-stage-h, auto);
    max-width: none;
    margin: 0;
    justify-self: center;
  }
}
.coming-soon {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  margin-top: 0.5rem;
}

/* --- Store badges (App Store / Google Play / Steam / Reddit / website)
   Every button renders at the same height; widths vary with each
   PNG's intrinsic aspect ratio (so the visible Steam/iOS/Google/Reddit
   logos all land at the same vertical size). The "Visit website"
   pill matches the height and gets a min-width so it doesn't read
   as smaller than the badges. */
.store-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem 1rem;
  /* Matches the AoS section's top padding so the wood gap above
     the first cards row equals the gap between the cards and
     the store badges row. */
  margin-top: clamp(3rem, 6vw, 5.5rem);
}
.store-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 4rem;
  transition: opacity 120ms ease, transform 120ms ease;
}
.store-badge img {
  display: block;
  height: 100%;
  width: auto;
}
.store-badge:hover { opacity: 0.85; }
.store-badge:active { transform: translateY(1px); }
.store-badges .pill-link {
  height: 4rem;
  min-width: 10rem;
  padding: 0 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}

/* --- Team --- */
#team h2 { text-align: center; }
/* Flex (not grid) so each row centers on its own. With five
   members and three tiles per row at the default wrap, the
   second row's two tiles sit centred rather than left-aligned. */
.team {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
}
.team-member { flex: 0 0 280px; }
.team-member { text-align: center; }
.team-member h4 {
  margin-bottom: 0.2rem;
  font-size: 1.2rem;
}
.team-member .role {
  color: var(--ink-soft);
  font-size: 1rem;
  margin: 0;
}
.team-member .avatar {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--rule);
  margin-bottom: 1rem;
  display: block;
  border-radius: 4px;
}

/* --- Contact --- */
.contact-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}
@media (min-width: 700px) {
  .contact-list { grid-template-columns: repeat(3, 1fr); }
}
.contact-list li {
  border-top: 1px solid var(--ink);
  padding-top: 1rem;
}
.contact-list h4 { margin: 0 0 0.4rem; }
.contact-list .desc { color: var(--ink-soft); font-size: 0.9rem; margin: 0 0 0.6rem; }
.contact-list a { color: var(--accent); border-bottom: 1px solid currentColor; }
.contact-list a:hover { color: var(--accent-hover); }


/* --- Contact section ---
   The contact strip closes the page and acts as the site's footer.
   Uses a slightly darker paper texture (colour baked into the JPG,
   no CSS tinting) so it reads as a distinct section. Houses the
   Privacy / Terms links and the copyright line. */
#contact {
  background-image: url('paper-texture-footer.jpg');
  background-repeat: repeat;
  background-size: 1000px 1000px;
  background-color: #ECE6D6;
  /* Tighter top/bottom than the standard .section padding so the
     closing strip reads compactly. */
  padding-block: clamp(2rem, 4vw, 3rem);
}
#contact .legal-links {
  margin: clamp(2rem, 4vw, 3rem) 0 0.5rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
}
#contact .legal-links a {
  color: var(--ink);
  font-size: 0.9rem;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms ease;
}
#contact .legal-links a:hover { border-bottom-color: var(--ink); }
#contact .footer-copy {
  margin: 0;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

/* --- Legal pages (info/privacy-policy.html, info/terms-and-conditions.html) ---
   Text loads from a .txt file at runtime; the loader script splits it
   into headings, numbered clauses, bullet lists, definitions, schedule
   sub-headings and plain paragraphs (see legal.js). */
.legal-page main { padding: clamp(2rem, 5vw, 4rem) 0; }
.legal-title { text-align: center; }
.legal-doc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink);
}
.legal-doc h3 {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 2rem 0 0.6rem;
}
/* "Part B" / "Schedule N" dividers: set off from the numbered
   sections with a rule and extra space. */
.legal-doc .legal-part {
  margin-top: 2.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}
.legal-doc h4.legal-subhead {
  font-size: 1rem;
  font-weight: 600;
  margin: 1.4rem 0 0.4rem;
}
.legal-doc .legal-updated {
  color: var(--ink-soft);
  font-size: 0.85rem;
  margin: 0 0 1.5rem;
}
.legal-doc p { margin: 0 0 0.75em; }
.legal-doc .legal-def { margin: 0 0 0.6em; }
.legal-doc .clause {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  column-gap: 0.5rem;
  margin: 0 0 0.5em;
}
.legal-doc .clause--sub { grid-template-columns: 4.5rem 1fr; padding-left: 1rem; }
.legal-doc .clause-num { font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.legal-doc .legal-list {
  margin: 0 0 0.75em;
  padding-left: 1.5rem;
}
.legal-doc .legal-list li { margin: 0 0 0.35em; }