/* ---- Game title lettering (see the pixelTitle filter) --------------------
   --s is the art-pixel scale. Glyph metrics come from the game's PixelFont
   sheet: 29px line, baseline 20px from the top, tracking already folded into
   --a. Glyphs overlap by the tracking, exactly as PixelText draws them. */
.ptext {
  --s: 1;
  display: flex; flex-wrap: wrap;
  column-gap: calc(8px * var(--s));
  row-gap: calc(2px * var(--s));
}
.pw { display: flex; height: calc(29px * var(--s)); }
.pw i { position: relative; flex: none; width: calc(var(--a) * 1px * var(--s)); }
.pw i::before {
  content: ""; position: absolute; left: 0;
  top: calc((20 + var(--t)) * 1px * var(--s));
  width: calc(var(--w) * 1px * var(--s));
  height: calc(var(--h) * 1px * var(--s));
  background: url("../assets/font/title-sheet.png") no-repeat;
  background-size: calc(348px * var(--s)) calc(224px * var(--s));
  background-position: calc(var(--x) * -1px * var(--s)) calc(var(--y) * -1px * var(--s));
  image-rendering: pixelated;
}
.ptext-island i::before { background-image: url("../assets/font/island-sheet.png"); }
h1 .ptext { --s: 2; }
h2 .ptext { --s: 1.5; }
h3 .ptext { --s: 1; }
@media (max-width: 640px) {
  h1 .ptext { --s: 1.5; }
  h2 .ptext { --s: 1; }
}

/* 1.5 is a whole number of device pixels on 2x and 3x screens (every phone
   and most laptops). On 1x screens it would drop pixel rows, so the game's
   whole-scale rule applies: fall back to 1 (or 2 where 1 is too small). */
@media (max-resolution: 1.5dppx) {
  h2 .ptext { --s: 1; }
  .game-title .ptext { --s: 2; }
}