/* Prickle Pear Games — shared site theme
   Hand-drawn "notebook paper" look: Patrick Hand headings, paper background,
   ink borders, offset "sticker" shadows. Used by every page. */

:root {
  --paper: #f7f2e0;
  --cream: #fffdf6;
  --ink: #2b2a33;
  --blue: #2b50c8;
  --pink: #e0457b;
  --green: #2bd33c;
  --faint: rgba(43, 42, 51, 0.62);
  --line: rgba(88, 109, 136, 0.16);
  --shadow: 4px 4px 0 rgba(43, 42, 51, 0.18);
  --hand: 'Patrick Hand', 'Comic Sans MS', cursive;
  --serif: Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* plain paper — the ruled lines came off because the hero art carries its
     own, at its own pitch, and the two never lined up */
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.6 var(--serif);
}

a { color: var(--blue); }

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

h1, h2, h3 {
  font-family: var(--hand);
  font-weight: 400;
  line-height: 1.15;
  color: var(--blue);
}
h1 .accent, h2 .accent { color: var(--pink); }

/* ---- top nav ------------------------------------------------------------ */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 18px;
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  padding: 16px 24px;
}
/* the studio name reads in plain ink wherever it appears — nav brand here,
   home hero below. Game names keep the pink .accent. */
.nav__brand {
  font-family: var(--hand);
  font-size: 24px;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}
/* the pear mark is taller than it is wide — size by height, no tile frame */
.nav__brand img { height: 32px; width: auto; }
.nav__links {
  display: flex;
  gap: 18px;
  font-family: var(--hand);
  font-size: 19px;
}
.nav__links a { text-decoration: none; color: var(--ink); }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--pink); text-decoration: underline; }

/* ---- layout shells ------------------------------------------------------ */
.page { flex: 1 0 auto; width: 100%; max-width: 960px; margin: 0 auto; padding: 8px 24px 64px; }
.page--narrow { max-width: 680px; }
.center { text-align: center; }

/* ---- studio hero (home) ------------------------------------------------- */
.studio-hero { text-align: center; padding: 30px 0 8px; }
.studio-hero h1 { font-size: 54px; margin: 12px 0 2px; color: var(--ink); }
.studio-hero .tag { color: var(--faint); margin: 0 0 14px; font-size: 18px; }

/* brand attribution — closes the home page, just above the footer. Styled to
   match the footer's own legal line so the two read as one quiet colophon
   rather than as body copy stranded at the bottom. */
.brand-note { text-align: center; color: var(--faint); font-size: 15px; margin: 46px 0 0; }
.brand-note strong { color: var(--ink); font-weight: 400; }

/* studio logo mark — the prickly pear (home hero).
   Sized to carry about the same visual weight as the 84px square doodle it
   replaced: the pear is narrow (0.72 aspect) and doesn't fill its box, so it
   needs more height than 84px to match, but nowhere near double. */
.studio-logo { height: 120px; width: auto; margin: 0 auto; }

/* ---- section heading ---------------------------------------------------- */
.section-title { font-size: 30px; margin: 44px 0 16px; }

/* ---- cards & game grid -------------------------------------------------- */
.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.card {
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--cream);
  box-shadow: var(--shadow);
  padding: 18px 22px;
}
.game-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
.game-card:hover { transform: translate(-1px, -2px); box-shadow: 6px 7px 0 rgba(43, 42, 51, 0.20); }
.game-card__head { display: flex; align-items: center; gap: 14px; }
.game-card__icon { width: 68px; height: 68px; border-radius: 14px; border: 2px solid var(--ink); flex: none; }
.game-card h3 { font-size: 27px; margin: 0 0 2px; }
.game-card p { margin: 12px 0 14px; }
.game-card__more { font-family: var(--hand); font-size: 19px; color: var(--blue); }

.badge {
  display: inline-block;
  font-family: var(--hand);
  font-size: 15px;
  color: var(--pink);
  border: 2px solid var(--pink);
  border-radius: 999px;
  padding: 1px 12px;
  align-self: flex-start;
}

/* ---- game (product) page ------------------------------------------------ */
.hero-banner {
  border: 2px solid var(--ink);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--cream);
}
.hero-banner img { width: 100%; }
.game-lede { text-align: center; color: var(--ink); max-width: 620px; margin: 18px auto 0; font-size: 18px; }

.features { list-style: none; padding: 0; margin: 8px 0; }
.features li { position: relative; padding-left: 28px; margin: 10px 0; }
.features li::before {
  content: "✎"; position: absolute; left: 0; top: 0;
  color: var(--pink); font-family: var(--hand); font-size: 20px;
}
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.pill {
  font-family: var(--hand); font-size: 16px;
  border: 2px solid var(--ink); border-radius: 999px;
  padding: 2px 14px; background: var(--cream);
}

/* ---- store badges -------------------------------------------------------- */
/* Official Google Play and App Store artwork, each used unmodified — never
   recolour, crop, stretch or rebuild either one. Neither file carries a
   transparent margin, so the clear space both owners require comes from the
   row gap.

   The two ship at different aspect ratios (Play 3.37:1, App Store 3.00:1), so
   they can be matched on exactly one axis — never both, not without stretching
   one, which both brand guides forbid. Match HEIGHT: level tops and bottoms
   read as a matched pair, and it is the axis both guides size against. Pinning
   width instead leaves the two black rectangles 13% different in height, which
   just looks like a mistake.

   Height is therefore the only dimension set, so the browser derives each width
   from the artwork and neither badge can be distorted. One fluid value drives
   both breakpoints; object-fit is the backstop if a narrow container ever
   squeezes the box. */
.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 16px;
  justify-content: center;
  align-items: center;
  margin: 24px 0 6px;
}
.btn-badge {
  --badge-h: clamp(44px, 12vw, 60px);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.btn-badge img {
  display: block;
  height: var(--badge-h);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* ---- screenshots -------------------------------------------------------- */
.shots {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 62%;
  gap: 16px;
  overflow-x: auto;
  padding: 6px 2px 16px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.shots img {
  width: 100%;
  border: 2px solid var(--ink);
  border-radius: 12px;
  box-shadow: var(--shadow);
  scroll-snap-align: center;
}
@media (min-width: 720px) {
  .shots { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); grid-auto-columns: auto; overflow: visible; }
}

/* ---- privacy / prose ---------------------------------------------------- */
.prose h1 { font-size: 44px; margin: 8px 0 4px; }
.prose h2 { font-size: 26px; margin: 34px 0 8px; }
.prose p, .prose li { margin: 10px 0; }
.meta { color: var(--faint); font-size: 15px; margin-bottom: 26px; }
.lede-box {
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--cream);
  box-shadow: 3px 3px 0 rgba(43, 42, 51, 0.18);
  padding: 14px 18px;
  font-size: 18px;
}

/* ---- FAQ ---------------------------------------------------------------- */
.faq { margin: 6px 0; }
.faq details {
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--cream);
  box-shadow: var(--shadow);
  padding: 4px 18px;
  margin: 12px 0;
}
.faq summary {
  font-family: var(--hand);
  font-size: 21px;
  color: var(--blue);
  cursor: pointer;
  padding: 10px 0;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "✎ "; color: var(--pink); }
.faq details[open] summary { color: var(--pink); }
.faq p { margin: 2px 0 12px; }

/* ---- footer ------------------------------------------------------------- */
.site-footer {
  flex: none;
  border-top: 2px solid rgba(43, 42, 51, 0.15);
  margin-top: 8px;
  padding: 26px 24px 34px;
  text-align: center;
  color: var(--faint);
  font-size: 14px;
}
.site-footer nav { margin-bottom: 10px; font-family: var(--hand); font-size: 17px; }
.site-footer nav a { text-decoration: none; margin: 0 9px; }
.site-footer .legal { margin: 4px 0; }
.site-footer .legal strong { color: var(--ink); font-weight: 400; }

/* ---- responsive tweaks -------------------------------------------------- */
@media (max-width: 560px) {
  body { font-size: 16px; }
  .studio-hero h1 { font-size: 44px; }
  .studio-logo { height: 96px; }
  .nav { padding: 14px 18px; }
  .nav__links { font-size: 18px; gap: 14px; }
  /* No badge override here on purpose. The old one pinned both badges to the
     same width, which forced their heights apart. The fluid --badge-h above
     already scales them down together, and flex-wrap stacks them if the pair
     will not fit — height-matched either way. */
}