/* ==========================================================================
   Goat Shed Games — site styles
   Palette is the 4-shade Game Boy green from Dex Deep. Change the tokens
   below to re-skin the whole site (e.g. for a future game's palette).
   ========================================================================== */

@font-face {
  font-family: "Silkscreen";
  src: url("../assets/fonts/silkscreen-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Silkscreen";
  src: url("../assets/fonts/silkscreen-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --darkest: #041b26;
  --dark: #216c25;
  --light: #51a455;
  --lightest: #d7e2e1;

  --px: 4px; /* one "art pixel" at the site's base scale */
  --font-pixel: "Silkscreen", ui-monospace, monospace;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --max-width: 60rem;
  --gutter: 1rem;
}

/* ---------- Base ---------- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--darkest);
  color: var(--darkest);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: var(--font-pixel);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 1rem;
  text-transform: uppercase;
}
h1 { font-size: clamp(2rem, 6vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1rem; }

a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-style: dotted; }

:focus-visible { outline: 3px dashed currentColor; outline-offset: 3px; }

img { max-width: 100%; height: auto; } /* keep aspect ratio when an image is shrunk to fit */

/* Anything that's pixel art must never be smoothed when scaled. Scale by whole numbers. */
.px { image-rendering: pixelated; image-rendering: crisp-edges; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--lightest);
  padding: .5rem 1rem;
  z-index: 100;
}
.skip-link:focus { left: 0; }

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

/* ---------- Header ---------- */

.site-header {
  background: var(--darkest);
  color: var(--lightest);
  position: sticky;
  top: 0;
  z-index: 10;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: .25rem;
  padding-bottom: .25rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
}
.brand img { width: 64px; height: 64px; } /* logo-mark.png is 64px: shown 1:1 so it stays crisp */
.brand picture { display: block; line-height: 0; }
/* Wordmark images are drawn at 2x (136x12 one line, 82x27 stacked). */
.brand .brand__wordmark { width: 272px; height: 24px; }
@media (max-width: 23.99rem) {
  .brand .brand__wordmark { width: 164px; height: 54px; }
}
.site-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.25rem;
  margin: 0;
  padding: 0;
  font-family: var(--font-pixel);
  text-transform: uppercase;
}
.site-nav a { text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--light); }

/* ---------- Sections & zig-zag edges ---------- */

.section {
  position: relative;
  padding: 4rem 0;
}
/* Pixel zig-zag along the top edge, in the section's own colour (like the in-game banner). */
.section::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  height: 16px;
  background: var(--zigzag) repeat-x;
  pointer-events: none;
}
.section--darkest  { background: var(--darkest);  color: var(--lightest); --zigzag: url("../assets/img/zigzag-darkest.png"); }
.section--dark     { background: var(--dark);     color: var(--lightest); --zigzag: url("../assets/img/zigzag-dark.png"); }
.section--light    { background: var(--light);    color: var(--darkest);  --zigzag: url("../assets/img/zigzag-light.png"); }
.section--lightest { background: var(--lightest); color: var(--darkest);  --zigzag: url("../assets/img/zigzag-lightest.png"); }
.section--flat::before { display: none; }

.section-intro { max-width: 40rem; margin-bottom: 2.5rem; }
.inspiration { margin: 3rem 0 0; }

/* ---------- Pixel box (stepped corners via box-shadow) ---------- */

.pixel-box {
  --box-border: var(--darkest);
  --box-bg: var(--lightest);
  background: var(--box-bg);
  margin: var(--px);
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--box-border),
    0 var(--px) 0 0 var(--box-border),
    calc(var(--px) * -1) 0 0 0 var(--box-border),
    var(--px) 0 0 0 var(--box-border),
    0 calc(var(--px) * 2) 0 0 rgb(0 0 0 / .25);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-pixel);
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  padding: .7rem 1.25rem;
  background: var(--lightest);
  color: var(--darkest);
  margin: var(--px);
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--darkest),
    0 var(--px) 0 0 var(--darkest),
    calc(var(--px) * -1) 0 0 0 var(--darkest),
    var(--px) 0 0 0 var(--darkest),
    0 calc(var(--px) * 2) 0 0 var(--darkest);
  transition: transform .05s steps(1);
}
.btn:hover { background: #fff; text-decoration: none; }
.btn:active { transform: translateY(var(--px)); }
.btn--dark { background: var(--dark); color: var(--lightest); }
.btn--dark:hover { background: var(--light); color: var(--darkest); }

/* ---------- Hero ---------- */

.hero {
  background: var(--dark);
  color: var(--lightest);
  text-align: center;
  padding: 2.5rem 0 3.5rem;
  overflow: hidden;
  position: relative;
}
.hero__logo {
  width: 270px;   /* 3x (fits a 320px-wide phone with the 16px gutters) */
  height: 270px;
  animation: logo-intro 1.4s both;
}
@media (min-width: 40rem) {
  .hero__logo { width: 360px; height: 360px; } /* 4x */
}
/* Slides in from the left, overshoots, then bounces back and settles.
   Tweak the bounce with the 36 / -16 / 6px values. */
@keyframes logo-intro {
  0%   { transform: translateX(-100vw); animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  55%  { transform: translateX(36px);   animation-timing-function: ease-in-out; }
  72%  { transform: translateX(-16px);  animation-timing-function: ease-in-out; }
  86%  { transform: translateX(6px);    animation-timing-function: ease-in-out; }
  100% { transform: translateX(0); }
}
.hero h1, .hero__tagline { margin-top: 1.5rem; }
.hero__art { width: 256px; }  /* game key art: 64px art at 4x on phones... */
@media (min-width: 48rem) {
  .hero__art { width: 384px; }  /* ...and 6x once the hero splits into two columns */
}
.hero__tagline {
  font-size: 1.2rem;
  max-width: 34rem;
  margin: 0 auto 2rem;
}

/* ---------- Game cards ---------- */

.game-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  color: var(--darkest);
}
.game-card__art {
  background: var(--lightest);
  display: flex;
  justify-content: center;
  line-height: 0;
}
.game-card__art img { width: 256px; }  /* 64px key art at 4x on phones */
.game-card__body { padding: 1.5rem; }
.game-card__meta {
  font-family: var(--font-pixel);
  text-transform: uppercase;
  font-size: .9rem;
  color: var(--dark);
  margin-bottom: .5rem;
}
@media (min-width: 48rem) {
  .game-card { grid-template-columns: auto 1fr; align-items: center; }
  .game-card__body { padding: 2rem 2.5rem; }
}
@media (min-width: 40rem) {
  .game-card__art img { width: 320px; }  /* 5x */
}

.tag {
  display: inline-block;
  font-family: var(--font-pixel);
  font-size: .8rem;
  text-transform: uppercase;
  background: var(--darkest);
  color: var(--lightest);
  padding: .15rem .5rem;
  margin: 0 .35rem .35rem 0;
}

/* ---------- Team ---------- */

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.team-card {
  padding: 1.5rem;
  text-align: center;
  color: var(--darkest);
}
.team-card__avatar {
  width: 96px;
  height: 96px;
  margin: 0 auto 1rem;
  background: var(--light);
  display: grid;
  place-items: center;
}
/* Avatar sprites take their size from the width/height in the HTML: use a whole-number
   multiple of the sprite (e.g. 16px at 4x = 64) that fits inside the 96px square. */
.team-card__avatar img { display: block; }
.flip-x { transform: scaleX(-1); }  /* mirror a sprite horizontally */
.team-card h3 { margin-bottom: .25rem; }
.team-card__role {
  font-family: var(--font-pixel);
  text-transform: uppercase;
  font-size: .85rem;
  color: var(--dark);
  margin-bottom: 1rem;
}
.team-card__fact {
  font-size: .95rem;
  border-top: 4px dotted var(--light);
  padding-top: .75rem;
  margin: 1rem 0 0;
}
.team-card__links { margin: .75rem 0 0; font-size: .95rem; }

/* Founder: avatar beside text on wider screens. */
.team-card--feature { max-width: 44rem; text-align: left; }
.team-card--feature .team-card__avatar { margin: 0 0 1rem; }
@media (min-width: 40rem) {
  .team-card--feature {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 1.75rem;
    padding: 2rem;
  }
}
.subheading { margin-top: 3.5rem; }

/* ---------- Store badges ---------- */

.stores {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.store {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem 1rem .5rem .5rem;
  color: var(--darkest);
  text-decoration: none;
  font-family: var(--font-pixel);
  text-transform: uppercase;
  line-height: 1.2;
  text-align: left;
}
.store img { width: 60px; height: 60px; } /* 30px logo at 2x */
.store small { display: block; font-size: .75rem; color: var(--dark); }
a.store:hover { --box-bg: #fff; }

/* Big badges: equal-width grid (2x2 when there's room, stacked on narrow screens). */
.stores--badges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14.5rem, 100%), 1fr));
  max-width: 31rem;
}

/* Compact version: just the small icons in a row. */
.stores--icons { gap: .6rem; margin-bottom: 1.25rem; }
.stores--icons img { width: 30px; height: 30px; display: block; } /* 15px logo at 2x */

/* ---------- Photos ---------- */

.photo-frame {
  --box-bg: var(--darkest);
  --box-border: var(--darkest);
  line-height: 0;
  margin: var(--px);
}
.photo-frame img { width: 100%; height: auto; display: block; }
.photo-frame figcaption {
  line-height: 1.4;
  font-size: .9rem;
  padding: .6rem .75rem;
  color: var(--lightest);
}

/* Pop-up photo (a native <dialog>), e.g. the goat shed */
.popup {
  border: 0;
  padding: 0;
  background: transparent;
  width: min(40rem, calc(100vw - 2rem));
  max-height: 100dvh;
  overflow: visible;
}
.popup::backdrop { background: rgb(4 27 38 / .92); }
.popup[open] { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.popup .photo-frame { width: 100%; }
.popup--square { width: min(32rem, calc(100vw - 2rem)); }
.popup .photo-frame img { max-height: calc(100dvh - 9rem); object-fit: contain; }
.popup form { margin: 0; }
.popup .btn { cursor: pointer; border: 0; }
body:has(.popup[open]) { overflow: hidden; }

/* ---------- Trailer ---------- */

.trailer { display: flex; justify-content: center; }
.trailer video {
  --box-bg: var(--dark);
  --box-border: var(--lightest);
  display: block;
  width: calc(100% - 2 * var(--px));  /* leave room for the pixel-box border */
  max-width: 405px;        /* 1080x1920 at 3/8 scale; keeps the 9:16 video a sensible height */
  height: auto;
  aspect-ratio: 9 / 16;
}

/* ---------- Press kit ---------- */

.press-grid {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 52rem) {
  .press-grid { grid-template-columns: 2fr 3fr; }
}
.press-grid h3 { margin-top: 1.5rem; }
.press-grid h3:first-child { margin-top: 0; }

.press-facts { padding: 1.5rem; }
.press-facts__logo {
  display: block;
  margin: 0 auto 1.5rem;
  background: var(--dark);
  padding: 1rem;
  box-sizing: content-box;
}

.factsheet {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .4rem 1rem;
  margin: 0;
}
.factsheet dt {
  font-family: var(--font-pixel);
  text-transform: uppercase;
  font-size: .85rem;
  padding-top: .15rem;
}
.factsheet dd { margin: 0; overflow-wrap: anywhere; }
/* In the narrow fact sheet box, put each label above its value. */
.press-facts .factsheet { grid-template-columns: 1fr; gap: 0; }
.press-facts .factsheet dd { margin-bottom: .6rem; }
.section--darkest .factsheet { margin-top: 1.5rem; }
.section--darkest .factsheet dt { color: var(--light); }

.asset-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}
.asset a {
  display: block;
  text-decoration: none;
  color: var(--darkest);
  padding: .75rem;
}
.asset a:hover .asset__name { text-decoration: underline; }
.asset__preview {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: var(--lightest);
  margin-bottom: .75rem;
  padding: 1rem;   /* keeps wide images like the wordmark off the edges */
  overflow: hidden;
}
.asset__preview--dark { background: var(--dark); }
.asset__preview--darkest { background: var(--darkest); }
.asset__preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Portrait screenshots: smaller tiles, tall previews */
.asset-grid--shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 40rem) { .asset-grid--shots { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.asset-grid--shots .asset__preview { aspect-ratio: 9 / 16; padding: 0; }
.asset-grid--shots .asset__preview img { width: 100%; height: 100%; }
.asset__name { display: block; font-weight: 700; line-height: 1.3; }
.asset__meta { display: block; font-size: .85rem; color: var(--dark); }

/* ---------- Two-column feature layout (game page) ---------- */

.split {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
/* Let columns shrink below their content's min width (otherwise nested grids can push them wider than the screen). */
.split > * { min-width: 0; }
@media (min-width: 48rem) {
  .split { grid-template-columns: 1fr 1fr; }
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}
.feature-list li { padding: 1.25rem; }
.feature-list img { width: 76px; height: 76px; object-fit: contain; object-position: left bottom; margin-bottom: .5rem; }

.worlds {
  counter-reset: world;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1rem;
}
.worlds li {
  counter-increment: world;
  padding: 1rem 1.25rem;
  display: flex;
  gap: 1rem;
  align-items: baseline;
}
.worlds li::before {
  content: counter(world);
  font-family: var(--font-pixel);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--dark);
  min-width: 1.5rem;
}

/* Screenshot strip: swipe/scroll with CSS scroll-snap; main.js adds the prev/next buttons.
   Thumbnails are 270x480 (a pixel-exact quarter of the 1080x1920 originals) and shown at 1x. */
.shots__list {
  display: flex;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  /* Room for the pixel-box borders and shadow, which would otherwise be clipped */
  padding: calc(var(--px) * 2) var(--px) calc(var(--px) * 3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--px);
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-color: var(--darkest) var(--dark);
}
.shots__list li { flex: 0 0 auto; scroll-snap-align: start; }
.shots__list a { display: block; }
.shots__list img { display: block; width: 270px; height: 480px; }
.shots__nav { display: flex; justify-content: center; gap: 1rem; margin-top: 1.25rem; }
.shots__nav[hidden] { display: none; }
.shots__nav .btn { min-width: 3.5rem; cursor: pointer; border: 0; font-size: 1.1rem; }
.shots__nav .btn:disabled { opacity: .4; cursor: default; }

/* Screenshot viewer (a native <dialog>) */
.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 100vw;
  max-height: 100dvh;
  overflow: visible;
}
.lightbox::backdrop { background: rgb(4 27 38 / .92); }
.lightbox[open] { display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.lightbox__img {
  display: block;
  /* Fit the 9:16 screenshot to the screen, leaving room for the button bar. */
  height: min(1920px, calc(100dvh - 6rem));
  width: auto;
  max-width: calc(100vw - 2rem);
  object-fit: contain;
  box-shadow: 0 0 0 var(--px) var(--lightest);
}
.lightbox__bar { display: flex; align-items: center; gap: .75rem; }
.lightbox__bar form { margin: 0; }
.lightbox__bar .btn { cursor: pointer; border: 0; }
.lightbox__bar .btn:disabled { opacity: .4; cursor: default; }
.lightbox__count { font-family: var(--font-pixel); color: var(--lightest); min-width: 3.5rem; text-align: center; }
body:has(.lightbox[open]) { overflow: hidden; }

.credits {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-pixel);
  text-transform: uppercase;
  text-align: center;
}
.credits li { margin-bottom: 1.25rem; }
.credits span { display: block; color: var(--light); font-size: .9rem; }
.credits-press { text-align: center; margin-top: 2rem; }

/* ---------- Sprite parade (decorative walking sprites along the bottom of a hero) ---------- */

/* Extra room under the hero content so the sprites don't overlap it. */
.hero--parade { padding-bottom: 6.5rem; }
.parade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px; /* stand on the next section's zig-zag edge */
  height: 64px;
  pointer-events: none;
}
.sprite {
  position: absolute;
  bottom: 0;
  background-repeat: no-repeat;
  background-size: auto 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
/* Frame sizes are in art pixels; everything drawn at 4x. Each sheet is 2 frames side by side. */
.sprite--walker {
  width: 52px; height: 60px;              /* 13x15 frame, walks right */
  background-image: url("../assets/img/sprites/walker.png");
  animation: walk-2 .4s steps(2) infinite, cross-right 14s linear infinite;
  animation-delay: 0s, -3s;
}
.sprite--bomb {
  width: 52px; height: 60px;              /* 13x15 frame, walks left */
  background-image: url("../assets/img/sprites/bomb.png");
  animation: walk-2 .4s steps(2) infinite, cross-left 18s linear infinite;
  animation-delay: 0s, -9s;
}
.sprite--snake {
  width: 96px; height: 64px;              /* 24x16 frame, 4 frames, slithers right quickly */
  background-image: url("../assets/img/sprites/snake.png");
  animation: walk-4-wide .4s steps(4) infinite, cross-right 9s linear infinite;
  animation-delay: 0s, 0s;
}
.sprite--spiker {
  width: 64px; height: 64px;              /* 16x16 frame, 2 frames, creeps left slowly */
  background-image: url("../assets/img/sprites/spiker-left.png");
  animation: walk-2-16 .6s steps(2) infinite, cross-left 26s linear infinite;
  animation-delay: 0s, 0s;
}
@keyframes walk-2 { to { background-position: -104px 0; } }
@keyframes walk-2-16 { to { background-position: -128px 0; } }
@keyframes walk-4-wide { to { background-position: -384px 0; } }
@keyframes cross-right { from { left: -100px; } to { left: 100%; } }
@keyframes cross-left  { from { left: 100%; } to { left: -80px; } }

/* ---------- Contact ---------- */

.contact { text-align: center; }
.contact .btn {
  margin-top: .5rem;
  max-width: calc(100% - 2 * var(--px));
  font-size: clamp(.8rem, 3.6vw, 1rem);
  overflow-wrap: anywhere;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--darkest);
  color: var(--lightest);
  padding: 2.5rem 0 3rem;
  font-size: .9rem;
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  justify-content: space-between;
}
.site-footer p { margin: 0 0 .4rem; }
.legal { opacity: .85; max-width: 36rem; }

/* ---------- 404 ---------- */

.lost {
  min-height: 70vh;
  display: grid;
  place-items: center;
  text-align: center;
}
.lost img { width: 128px; height: auto; margin-bottom: 1.5rem; }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html, .shots__list { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .parade { display: none; }
  .hero--parade { padding-bottom: 3.5rem; }
}

.hero .stores { justify-content: center; }
.hero .stores--badges { margin-left: auto; margin-right: auto; }