/* 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;
}

/* A shot that is not 16:9. The mosaic above works because every picture shares the boxes' ratio,
   so `cover` crops nothing — the moment one does not (Bladevolley's phone screenshot is 2504x1124,
   a landscape phone rather than a monitor), that same `cover` starts eating ~12% off EACH SIDE,
   which on that picture is the HIT button and the left coach mark: the two things it exists to
   show. So this box keeps no ratio of its own and takes the picture's, at the full six columns
   the extra width wants. Deliberately keyed on a class and not on :nth-child(6) — what earns the
   full row is the SHAPE of the shot, not its position in the strip. */
.container .box.panorama {
  grid-column: span 6;
  aspect-ratio: auto;
}

.container .box.panorama > img {
  height: auto; /* not stretched to a box height this box no longer has */
}

/* 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;
  }
  /* Two columns here, so "full width" is 2 — without this the panorama would be re-narrowed to
     one by the `.container .box` rule above and land as a letterbox sliver. */
  .container .box.panorama {
    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;
}

/* ── The screenshot viewer ────────────────────────────────────────────────────
   Everything here is inert until js/lightbox.js runs: the class that makes a
   thumbnail look clickable is added at runtime, so a page without JS shows a
   grid of plain pictures rather than ten things that lie about being buttons. */

.lb-thumb {
  cursor: zoom-in;
}
.lb-thumb:focus-visible {
  outline: 3px solid #42a8d2;
  outline-offset: 3px;
}

.lb[hidden] {
  display: none;
}
.lb {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  /* Dark, because the pictures are bright and the point is to look at them. */
  background: rgba(12, 22, 30, 0.92);
}

/* The page behind must not scroll while the viewer is up — on a phone the backdrop otherwise
   drifts around under your thumb as you swipe between shots. */
body.lb-open {
  overflow: hidden;
}

.lb-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  max-height: 100%;
}

/* The screenshots are 1920x1080; this fits them to whatever the window is without ever upscaling
   past their own size, so they stay sharp on a large display. */
.lb-img {
  max-width: 100%;
  max-height: calc(100vh - 110px);
  width: auto;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  background: #0c161e;
}

.lb-caption {
  color: #fff;
  font-family: Sniglet, sans-serif;
  font-size: 15px;
  line-height: 20px;
  text-align: center;
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: center;
}
.lb-count {
  color: #9fd4ec;
  white-space: nowrap;
}

.lb-nav,
.lb-close {
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-family: Sniglet, sans-serif;
  cursor: pointer;
  line-height: 1;
  transition: background 0.2s ease;
}
.lb-nav {
  /* 56px: comfortably past the 44px touch-target floor the game's own UI is held to. */
  width: 56px;
  height: 56px;
  font-size: 34px;
}
.lb-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 48px;
  height: 48px;
  font-size: 28px;
}
.lb-nav:hover,
.lb-close:hover,
.lb-nav:focus-visible,
.lb-close:focus-visible {
  background: #ff5758;
}
.lb-nav:focus-visible,
.lb-close:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* On a phone the two 56px arrows would eat the picture, so they move under it — still "left and
   right", just below rather than beside. Swiping does the same job. */
@media only screen and (max-width: 700px) {
  .lb {
    flex-wrap: wrap;
    padding: 8px;
    /* Without this the two flex LINES (picture, then the row of arrows) are spread down the whole
       screen, leaving the buttons stranded ~290px under the image as if they belonged to something
       else. `align-content` packs the lines together; `align-items` alone does not — it only
       centres within a line. */
    align-content: center;
    gap: 18px;
  }
  .lb-figure {
    order: -1;
    flex-basis: 100%;
  }
  .lb-img {
    max-height: calc(100vh - 190px);
  }
}