/* Mheep - site styles.
   Retro "window" layout: a dark ground with a halftone octopus behind it, content in windows with solid pink title
   bars. Pinks come from the Mheep stamp and the mheep.itch.io profile. The only script is the screenshot viewer.
   Larceny is crisp at multiples of 16px, LanaPixel at multiples of 11px. */

@font-face {
  font-family: "Larceny";
  src: url("../fonts/Larceny.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "LanaPixel";
  src: url("../fonts/LanaPixel-latin.ttf") format("truetype");
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ground: #140a0d;
  --bar: #0a0406;
  --win: #0c0507;
  --pink: #e05a7e;       /* itch profile rule */
  --pink-hi: #ffb0c2;    /* itch profile links */
  --stamp: #ef8f8f;      /* the stamp */
  --ink: #fdf6f8;
  --muted: #b98f9a;
  --on-pink: #1a0509;
  --grey: #3a2329;
  --line: #4a2832;
}

* { box-sizing: border-box; }

html { background: var(--ground); }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background: var(--ground);
  font-family: "LanaPixel", monospace;
  font-size: 22px;
  line-height: 33px;
}

/* The halftone octopus, fixed behind everything. */
body::before {
  content: "";
  position: fixed;
  z-index: -1;
  right: -120px;
  bottom: -160px;
  width: 1000px;
  height: 920px;
  background: url("../img/bg-octopus.png") no-repeat;
  image-rendering: pixelated;
  opacity: 0.35;
  pointer-events: none;
}
body { position: relative; z-index: 0; }

img { max-width: 100%; height: auto; display: block; }
.pixel { image-rendering: pixelated; }

a { color: var(--pink-hi); text-decoration-thickness: 2px; text-underline-offset: 4px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--pink-hi); outline-offset: 2px; }

.px16 { font-family: "Larceny", monospace; font-size: 16px; line-height: 16px; letter-spacing: 1px; }
.px32 { font-family: "Larceny", monospace; font-size: 32px; line-height: 32px; }

/* ---- Masthead + tab bar -------------------------------------------------- */
.masthead { display: flex; justify-content: center; padding: 28px 16px 20px; background: var(--bar); }
.brand { display: block; }
.brand .logo { width: 345px; height: 96px; }   /* 3x the 115x32 line logo */

.tabs {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--bar);
  border-bottom: 2px solid var(--pink);
}
.tabs a {
  padding: 10px 24px;
  border: 2px solid var(--line);
  background: var(--win);
  color: var(--pink);
  text-decoration: none;
}
.tabs a:hover { color: var(--ink); background: var(--grey); }
/* "page" = the page you're on; "location" = the section you've scrolled to (set by the script on index.html). */
.tabs a[aria-current] {
  background: var(--pink);
  border-color: var(--pink);
  color: var(--on-pink);
}

/* ---- Windows ---------------------------------------------------------------- */
main { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 40px 16px 56px; }

/* Windows, frames and buttons are the game's "Tooltip" sprite (23x15, 5px 9-slice), tinted and drawn at 2x. */
.win, .win-bar, .btn, .shot, .feature-art, .slot, .lightbox, .doc .note {
  border: 10px solid transparent;
  border-image: url("../img/tt-win.png") 5 fill / 10px;
  image-rendering: pixelated;
}
.win img:not(.pixel), .lightbox img { image-rendering: auto; }

.win {
  margin-bottom: 32px;
  scroll-margin-top: 80px;
}
.win-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  border-image-source: url("../img/tt-pink.png");
  color: var(--on-pink);
  padding: 0 0 0 6px;
}
.win-bar .count { font-family: "LanaPixel", monospace; font-size: 22px; line-height: 22px; opacity: 0.75; }
.win-bar .close {
  margin-left: auto;
  width: 24px;
  height: 24px;
  flex: none;
  border: 2px solid var(--on-pink);
  /* 5x5 pixel X */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5' shape-rendering='crispEdges'%3E%3Cpath fill='%231a0509' d='M0 0h1v1H0zM4 0h1v1H4zM1 1h1v1H1zM3 1h1v1H3zM2 2h1v1H2zM1 3h1v1H1zM3 3h1v1H3zM0 4h1v1H0zM4 4h1v1H4z'/%3E%3C/svg%3E")
    center / 10px 10px no-repeat;
  image-rendering: pixelated;
}
.win-body { padding: 16px 14px 18px; }

/* ---- Featured game ---------------------------------------------------------- */
.feature { display: grid; grid-template-columns: minmax(0, 400px) 1fr; gap: 12px; padding-top: 8px; }
.feature-art { position: relative; display: block; border-image-source: url("../img/tt-shot.png"); }
.feature-art:hover { border-image-source: url("../img/tt-shot-hi.png"); }
.feature-art img { width: 100%; height: 100%; object-fit: cover; }
.badge {
  position: absolute;
  left: 16px;
  bottom: 16px;
  background: var(--pink);
  color: var(--on-pink);
  padding: 6px 8px;
}
.feature-info { padding: 8px 8px 0; display: flex; flex-direction: column; }
.meta-row {
  display: flex;
  justify-content: space-between;
  color: var(--pink);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--line);
  margin-bottom: 18px;
}
.meta-row span:last-child { color: var(--muted); }
.feature-info h2 { margin: 0 0 14px; font-weight: normal; font-size: 48px; line-height: 48px; color: var(--stamp); }
.feature-info p { margin: 0 0 16px; }
.facts { color: var(--muted); }
.actions { margin-top: auto; padding-top: 8px; display: grid; grid-template-columns: 1fr; gap: 8px; }

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 0 12px;
  border-image-source: url("../img/tt-grey.png");
  background: none;
  color: var(--ink);
  text-decoration: none;
  text-align: center;
}
.btn:hover { border-image-source: url("../img/tt-grey-hi.png"); color: var(--ink); }
.btn.primary { min-height: 64px; border-image-source: url("../img/tt-pink.png"); color: var(--on-pink); }
.btn.primary:hover { border-image-source: url("../img/tt-pink-hi.png"); color: var(--on-pink); }

/* ---- Screenshots ------------------------------------------------------------ */
.shots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding-top: 12px;
}
.shot { position: relative; display: block; border-image-source: url("../img/tt-shot.png"); }
.shot img { width: 100%; }
.shot .tag {
  position: absolute;
  left: 0;
  top: 0;
  background: var(--pink);
  color: var(--on-pink);
  padding: 4px 6px;
}
.shot .num { position: absolute; right: 8px; top: 6px; color: var(--ink); text-shadow: 2px 2px 0 #000; }
.shot:hover { border-image-source: url("../img/tt-shot-hi.png"); }
.shot:hover .tag { background: var(--pink-hi); }

.slot {
  margin-top: 12px;
  padding: 18px 16px;
  text-align: center;
  color: var(--muted);
  border-image-source: url("../img/tt-slot.png");
}

/* ---- Screenshot viewer --------------------------------------------------- */
.lightbox {
  width: min(1200px, 94vw);
  max-width: none;
  max-height: 94vh;
  padding: 0;
  background: transparent;
  color: var(--ink);
  overflow: hidden;
}
.lightbox::backdrop { background: rgba(10, 4, 6, 0.88); }
.lightbox img {
  width: 100%;
  height: auto;
  max-height: calc(94vh - 180px);
  object-fit: contain;
  margin-top: 8px;
  background: #000;
}
.lb-nav { display: flex; gap: 8px; padding-top: 8px; }
.lb-nav .btn { flex: 1; }

button.btn, button.close { appearance: none; font: inherit; cursor: pointer; }
button.btn { font-family: "Larceny", monospace; font-size: 32px; line-height: 32px; }
button.close { padding: 0; border: 2px solid var(--on-pink); }
button.close:hover { background-color: var(--pink-hi); }

/* ---- Socials ---------------------------------------------------------------- */
.links { list-style: none; margin: 0; padding: 0; }
.links li + li { border-top: 2px solid var(--line); }
.links a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  color: var(--ink);
  text-decoration: none;
}
.links a .px32 { color: var(--pink); }
.links a .handle { color: var(--muted); text-align: right; }
.links a:hover { background: var(--pink); }
.links a:hover .px32, .links a:hover .handle { color: var(--on-pink); }

/* ---- Text pages (privacy, support) ----------------------------------------- */
.doc h1 { margin: 0 0 12px; font-weight: normal; font-family: "Larceny", monospace; font-size: 48px; line-height: 48px; color: var(--stamp); }
.doc h2 { margin: 40px 0 12px; font-weight: normal; font-family: "Larceny", monospace; font-size: 32px; line-height: 32px; color: var(--pink-hi); }
.doc p, .doc ul { margin: 0 0 22px; max-width: 38em; }
.doc ul { padding-left: 24px; }
.doc li { margin-bottom: 11px; }
.doc li::marker { content: "\25A0  "; color: var(--pink); font-size: 16px; }
.doc .meta { color: var(--muted); }
.doc code { font-family: inherit; color: var(--pink-hi); overflow-wrap: anywhere; }
.doc .note {
  margin: 0 0 22px;
  padding: 4px 10px 0;
  border-image-source: url("../img/tt-note.png");
}
.doc .note p, .doc .note ul { margin-bottom: 11px; }

/* ---- Bottom bar ------------------------------------------------------------- */
.bottombar {
  background: var(--bar);
  border-top: 2px solid var(--line);
  padding: 14px 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  color: var(--muted);
}
.bottombar nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.bottombar a { color: var(--muted); }
.bottombar a:hover { color: var(--pink-hi); }
.bottombar .credits { flex-basis: 100%; font-size: 22px; opacity: 0.8; }

/* ---- Small screens ---------------------------------------------------------- */
@media (max-width: 820px) {
  .feature { grid-template-columns: 1fr; }
  .shots { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .masthead { padding: 20px 12px 16px; }
  .brand .logo { width: 230px; height: 64px; }   /* 2x */
  .tabs { gap: 6px; padding: 8px; }
  .tabs a { flex: 1; text-align: center; padding: 10px 0; }
  main { padding: 24px 12px 40px; }
  .win-body { padding: 12px 6px 14px; }
  .feature-info { padding: 8px 4px 0; }
  .shots { grid-template-columns: 1fr; }
  .links a { flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 10px; }
  .links a .handle { text-align: left; }
  body::before { width: 500px; height: 460px; background-size: 500px 460px; right: -80px; bottom: -60px; }
}