/* Additions for the multi-game site. Deliberately a SEPARATE stylesheet: main.css and
   main.min.css are a matched pair (the page loads the minified one), and editing either without
   the other would leave two sources of truth that disagree the first time someone touches one. */

/* Sniglet, vendored. Google's own CSS with the gstatic URLs rewritten to ./ — same font, same two
   subsets, same unicode-ranges, so a Latin visitor still fetches one 16 KB file and never touches
   latin-ext. Self-hosted because the page should not tell a third party who is reading it, and
   because the site now has no other external dependency left to justify the connection.

   Weight 400 only, exactly as before: the stylesheet asks for 700 on headings and always has, so
   the browser has always synthesised that bold. Shipping the real 800 here would silently restyle
   every heading on the site, which is a design change, not a hosting change. */
@font-face {
  font-family: 'Sniglet';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/sniglet-v18-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sniglet';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/sniglet-v18-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* One <section> per game. The site had exactly one game for five years, so the markup simply ran
   down the page; with two, the boundary has to be visible or the second game reads as more copy
   about the first. */
.game + .game {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 2px dashed #e0f6ff;
}

/* The title carried an inline font-size:80px when there was one of them. Now it is a rule, so the
   two games cannot drift apart, and it scales down on a phone instead of overflowing the card. */
.game .gameTitle {
  font-size: clamp(40px, 9vw, 80px);
}

/* A one-line "what is this" under the title: platform, players, price. */
.game .meta {
  font-size: 16px;
  line-height: 20px;
  margin: 4px 0 16px;
  color: #42a8d2;
}

/* THE SCREENSHOT STRIP.

   main.css lays this out as a fixed 300 px flex row of five boxes that grow on hover, with each
   <img> at width: 200% and object-fit: cover. On a 1000 px card that gives every box a 192x300
   PORTRAIT window onto a 16:9 LANDSCAPE screenshot — cover then crops it to about a third of its
   width, so what you actually see is a vertical slice of sky, and you have to hover each one to
   find out what the picture was.

   A grid fixes it at the root: give every box the pictures' own 16:9 and nothing is cropped at all.
   Six columns, because five screenshots divide into 3 + 2 — three on the top row at two columns
   each, two on the bottom at three columns each. That is a deliberate-looking mosaic rather than a
   ragged last row, and it works for both games because both have exactly five shots. */
.container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  height: auto; /* was a fixed 300px, which is what forced the portrait window */
}

.container .box {
  grid-column: span 2;
  aspect-ratio: 16 / 9;
  margin: 0; /* the flex layout's 0 4px; `gap` owns the spacing now */
  border-radius: 6px;
}

.container .box:nth-child(4),
.container .box:nth-child(5) {
  grid-column: span 3;
}

/* width was 200% — half of every thumbnail hung outside its own box. */
.container .box > img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* still cover, but the box is now the image's own aspect, so it crops nothing */
}

/* The hover flex-grow cannot work in a grid (and would reflow the mosaic anyway). A lift keeps the
   strip feeling alive without moving the four pictures the reader is not pointing at. */
.container .box:hover {
  transform: translateY(-3px);
}
.container .box,
.container .box > img {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.container .box:hover > img {
  width: 100%; /* main.css shrinks it to 100% on hover; it already is */
}
.container .box:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  .container .box:hover {
    transform: none;
  }
}

/* On a phone the six-column mosaic would be six ~55px slivers. Two up, with the odd one out running
   full width, keeps every shot big enough to read. */
@media only screen and (max-width: 700px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
  .container .box,
  .container .box:nth-child(4),
  .container .box:nth-child(5) {
    grid-column: span 1;
  }
  .container .box:nth-child(5) {
    grid-column: span 2;
  }
}

/* #wrapper is width: calc(100% - 160px) floated next to the 160px social column — which on a phone
   leaves the card about 215px wide. Stacking them is the whole fix. */
@media only screen and (max-width: 700px) {
  #wrapper {
    width: calc(100% - 40px);
    float: none;
  }
  #social {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 16px 0;
  }
  #name {
    float: none;
    padding: 12px 8px 0;
  }
  /* The wordmark is a VERTICAL lockup — 50 x 456, an aspect ratio of about 1:9. Sizing it by width
     (max-width: 100%) therefore made it 375 px wide and some 3400 px tall on a phone, so the whole
     first screen was logo and the games were below the fold. Cap the HEIGHT and let width follow. */
  #name img {
    height: 150px;
    width: auto;
  }
}

/* The buttons are fixed 150px SVG outlines in a flex row; four of them plus a fifth do not fit on
   a phone, and .actions had no wrap. */
.actions {
  flex-wrap: wrap;
  gap: 10px 0;
}