/* =========================================================
   HuddyGames — minimal pixel art styles
   Black background, gray pixel frames, pixel fonts,
   and a few loud colors where it counts.
   ========================================================= */

:root {
  --bg: #000;
  --panel: #111;
  --line: #3f3f3f;
  --line-light: #7f7f7f;
  --text: #fff;
  --muted: #9a9a9a;

  --gold: #ffd23f;
  --pink: #ff3df2;
  --cyan: #2ee6ff;
  --lime: #5ee05e;

  --font-pixel: "Press Start 2P", ui-monospace, monospace;
  --font-body: "VT323", ui-monospace, monospace;

  color-scheme: dark;
}

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

html { background: var(--bg); scroll-behavior: smooth; scrollbar-color: var(--line) var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 22px/1.3 var(--font-body);
  -webkit-font-smoothing: none;
}
main { flex: 1; }

img { max-width: 100%; display: block; }
a { color: var(--pink); }
::selection { background: var(--pink); color: #000; }
:focus-visible { outline: 3px dashed var(--gold); outline-offset: 3px; }

.wrap {
  width: min(1040px, calc(100% - 40px));
  margin-inline: auto;
}
.muted { color: var(--muted); }

/* ---------- pixel notched corners ---------- */
.btn, .tag, .status, .game, .game-art, .cd-cell, .game-shots img, .tab,
.dl-hero-art, .choice, .shot, .more-game, .step-h::before, .howto > li::before, .faq-item, .cmd, .note, .fix, .easy, .sha, .viewer-nav, .viewer-close,
.mac-any, .mac-apps li,
.stat, .art-hint, .news-item, .pitch-card, .carousel-main, .carousel-nav, .carousel-thumb, .carousel-count, .carousel-zoom,
.viewer-thumb, .viewer-more, .section-link {
  --n: 4px;
  clip-path: polygon(
    0 var(--n), var(--n) var(--n), var(--n) 0,
    calc(100% - var(--n)) 0, calc(100% - var(--n)) var(--n), 100% var(--n),
    100% calc(100% - var(--n)), calc(100% - var(--n)) calc(100% - var(--n)), calc(100% - var(--n)) 100%,
    var(--n) 100%, var(--n) calc(100% - var(--n)), 0 calc(100% - var(--n))
  );
}

/* ---------- buttons ---------- */
.btn {
  --c: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  background: var(--c);
  color: #000;
  font: 12px/1 var(--font-pixel);
  text-transform: uppercase;
  text-decoration: none;
  box-shadow:
    inset -4px -4px 0 rgba(0, 0, 0, 0.28),
    inset 4px 4px 0 rgba(255, 255, 255, 0.4);
  transition: transform 0.15s steps(2), filter 0.1s;
}
.btn:hover { filter: brightness(1.12); transform: translateY(-3px); }
.btn:active { transform: scale(0.95); }
.btn:focus-visible { outline: none; box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 7px #000; }
.btn--gold { --c: var(--gold); }
.btn--sm { padding: 11px 14px; font-size: 10px; gap: 10px; }
.btn--big { padding: 20px 26px; font-size: 14px; }

/* stepped pixel heart */
.px-heart {
  flex: none;
  width: 14px;
  height: 12px;
  background: currentColor;
  clip-path: polygon(
    2px 0, 6px 0, 6px 2px, 8px 2px, 8px 0, 12px 0, 12px 2px, 14px 2px,
    14px 6px, 12px 6px, 12px 8px, 10px 8px, 10px 10px, 8px 10px, 8px 12px,
    6px 12px, 6px 10px, 4px 10px, 4px 8px, 2px 8px, 2px 6px, 0 6px, 0 2px, 2px 2px
  );
}
.btn--sm .px-heart { width: 14px; height: 12px; }

/* stepped pixel arrow */
.px-arrow {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 14px;
  vertical-align: middle;
  background: currentColor;
  clip-path: polygon(
    0 0, 2px 0, 2px 2px, 4px 2px, 4px 4px, 6px 4px, 6px 6px, 8px 6px,
    8px 8px, 6px 8px, 6px 10px, 4px 10px, 4px 12px, 2px 12px, 2px 14px, 0 14px
  );
}
.px-arrow--up { transform: rotate(-90deg); }
.to-top { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }

.tag {
  --n: 2px;
  display: inline-block;
  padding: 7px 9px;
  background: var(--panel);
  color: var(--muted);
  box-shadow: inset 0 0 0 2px var(--line);
  font: 9px/1 var(--font-pixel);
  text-transform: uppercase;
}

/* ---------- top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  border-bottom: 4px solid var(--line);
}
.topbar-inner {
  height: 88px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand {
  display: block;
  transition: transform 0.15s steps(2);
}
.brand:hover { transform: translateY(-2px); }
/* wordmark is 21 art-pixels tall: keep it at whole multiples so pixels stay crisp */
.brand img {
  height: 63px;
  width: auto;
  image-rendering: pixelated;
}

/* page tabs: outlined, the page you're on is filled in */
.tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.tab {
  --n: 3px;
  padding: 12px 14px;
  background: #000;
  color: var(--c);
  box-shadow: inset 0 0 0 3px var(--c);
  font: 11px/1 var(--font-pixel);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s steps(2);
}
.tab:hover { transform: translateY(-2px); }
.tab[aria-current="page"] {
  background: var(--c);
  color: #000;
  box-shadow:
    inset -3px -3px 0 rgba(0, 0, 0, 0.28),
    inset 3px 3px 0 rgba(255, 255, 255, 0.4);
}
.tab:focus-visible { outline: none; box-shadow: inset 0 0 0 3px #fff; }

.more { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.lede { margin: -12px 0 28px; color: var(--muted); }
button.btn { border: 0; cursor: pointer; }
.px-arrow--left { transform: rotate(180deg); }

/* tab switch: content steps in, chunky like a sprite, not a smooth fade */
.view--enter { animation: view-in 0.24s steps(4) both; }
@keyframes view-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- page + effects canvas ---------- */
main { padding-top: 56px; }
#fx {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  pointer-events: none;
}

/* ---------- section heading ---------- */
.section-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 28px;
}
.section-head h2 {
  margin: 0;
  font: 16px/1 var(--font-pixel);
  text-transform: uppercase;
}
.section-rule {
  flex: 1;
  height: 4px;
  background: repeating-linear-gradient(90deg, var(--line) 0 12px, transparent 12px 20px);
}

/* ---------- game block ---------- */
.game {
  --c: var(--gold);
  background: var(--line);
  padding: 4px;
  margin-bottom: 40px;
  scroll-margin-top: 110px;
}
.game .btn { --c: inherit; }

/* every other game flips: art on the right */
.game:nth-child(even) .game-main {
  grid-template-columns: 1fr 1.1fr;
  grid-template-areas:
    "info art"
    "info shots"
    "info tags";
}
.game > * { background: var(--panel); }
.game-main {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "art   info"
    "shots info"
    "tags  info";
  gap: 14px 36px;
  padding: 28px;
}
.game-art {
  --n: 4px;
  grid-area: art;
  align-self: start;
  display: block;
  background: var(--line);
  padding: 4px;
  transition: background 0.1s;
}
.game-art:hover { background: var(--c); }
.game-art img {
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}

.game-info {
  grid-area: info;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.status {
  --n: 2px;
  padding: 7px 9px;
  background: var(--c);
  color: #000;
  font: 9px/1 var(--font-pixel);
  text-transform: uppercase;
}
.game-title {
  margin: 18px 0 14px;
  color: var(--c);
  font: clamp(18px, 2.4vw, 24px)/1.4 var(--font-pixel);
  text-transform: uppercase;
  text-shadow: 4px 4px 0 var(--c-dark, #4a3608);
}
.game-desc {
  margin: 0 0 20px;
  color: #cfcfcf;
}

.game-meta {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 6px;
}
.game-meta li {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: baseline;
  color: var(--text);
}
.game-meta span {
  color: var(--muted);
  font: 9px/1 var(--font-pixel);
  text-transform: uppercase;
}

/* countdown */
.countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 400px;
}
.cd-cell {
  --n: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 4px 12px;
  background: #000;
  box-shadow: inset 0 0 0 3px var(--line);
}
.cd-num {
  color: var(--c);
  font: 20px/1 var(--font-pixel);
}
.cd-label {
  color: var(--muted);
  font: 8px/1 var(--font-pixel);
  text-transform: uppercase;
}
.cd-note {
  margin: 12px 0 24px;
  color: var(--muted);
  font-size: 19px;
}

.game-tags {
  grid-area: tags;
  align-self: start;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 6px;
}
.game-shots {
  grid-area: shots;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.game-shots img {
  --n: 3px;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.game--smooth .game-art img { image-rendering: auto; }

/* =========================================================
   Free games + download pages
   ========================================================= */
.px-icon { display: block; flex: none; width: 22px; height: auto; }
.px-icon--btn { width: 18px; }
.px-icon--choice { width: 34px; color: var(--c); }

/* big screenshots shrunk down look better smooth than blocky */
.free-list .game-art img,
.dl-hero-art img,
.shot img,
.more-game img { image-rendering: auto; }

.dl .game { --c: inherit; } /* frames on a download page use the game's color */

.crumbs {
  margin: -20px 0 22px;
  color: var(--muted);
  font: 10px/1.6 var(--font-pixel);
  text-transform: uppercase;
}
.crumbs a { color: var(--c); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs a { display: inline-flex; align-items: center; gap: 10px; }
.crumbs-sep { margin: 0 10px; }

/* ---- hero ---- */
.dl-hero-in {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 14px 36px;
  align-items: start;
  padding: 28px;
}
.dl-hero-media { display: grid; gap: 12px; }
.dl-hero-art { --n: 4px; background: var(--line); padding: 4px; }
.dl-hero-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dl-hero-art img { width: 100%; height: auto; }
.dl-hero-info { display: flex; flex-direction: column; align-items: flex-start; }
.dl-hero-info .game-title { margin-bottom: 6px; }
.dl-tagline { margin: 0 0 14px; color: var(--c); }

/* ---- the steps ---- */
.dl-get-in { padding: 28px; counter-reset: step; }
.step { counter-increment: step; }
.step + .step {
  margin-top: 30px;
  padding-top: 30px;
  background: repeating-linear-gradient(90deg, var(--line) 0 12px, transparent 12px 20px) top / 100% 4px no-repeat;
}
.step-h {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  font: 14px/1.3 var(--font-pixel);
  text-transform: uppercase;
}
.step-h::before {
  --n: 3px;
  content: counter(step);
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: var(--c);
  color: #000;
  font: 14px/1 var(--font-pixel);
}

/* Windows / Mac and Apple Silicon / Intel buttons */
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice {
  --n: 4px;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 16px;
  row-gap: 8px;
  padding: 18px 48px 18px 20px;
  border: 0;
  background: #000;
  color: var(--text);
  box-shadow: inset 0 0 0 3px var(--line);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: transform 0.15s steps(2);
}
.choice .px-icon { grid-row: span 3; }
.choice-label { font: 13px/1.2 var(--font-pixel); text-transform: uppercase; }
.choice-sub { color: var(--muted); font-size: 19px; line-height: 1.1; }
.choice-detected {
  justify-self: start;
  padding: 5px 7px;
  background: var(--lime);
  color: #000;
  font: 8px/1 var(--font-pixel);
  text-transform: uppercase;
}
/* the little radio light in the corner */
.choice::after {
  content: "";
  position: absolute;
  top: 16px;
  right: 16px;
  width: 16px;
  height: 16px;
  box-shadow: inset 0 0 0 3px var(--line-light);
}
.choice:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 3px var(--line-light); }
.choice.is-on { background: #0b0b0b; box-shadow: inset 0 0 0 3px var(--c); }
.choice.is-on .choice-label { color: var(--c); }
.choice.is-on::after { background: var(--c); box-shadow: inset 0 0 0 3px var(--c), inset 0 0 0 6px #000; }
.choice:focus-visible { outline: none; box-shadow: inset 0 0 0 3px #fff; }

/* show only what matches the picked computer */
.dl[data-os="windows"] .only-mac,
.dl[data-os="mac"] .only-win { display: none; }

/* under the Mac download button: one download for every Mac */
.mac-any {
  margin-top: 14px;
  padding: 12px 16px 14px;
  background: #000;
  box-shadow: inset 0 0 0 2px var(--lime);
}
.mac-any-h { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; color: var(--lime); font: 10px/1.5 var(--font-pixel); text-transform: uppercase; }
.mac-any p:last-child { margin: 0; color: #cfcfcf; font-size: 19px; }
.px-icon--chip { flex: none; width: 20px; }
.dl .js-mac-old { margin: 12px 0 0; }

/* the two apps in the Mac download, in the by-hand steps; this Mac's one is marked */
.mac-apps { list-style: none; margin: 4px 0 12px; padding: 0; display: grid; gap: 8px; }
.mac-apps li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 10px 14px;
  background: #000;
  box-shadow: inset 0 0 0 2px var(--line);
}
.mac-apps li span { color: var(--muted); font-size: 19px; }
.mac-apps li.is-mine { box-shadow: inset 0 0 0 2px var(--lime); }
.mac-apps li span.choice-detected { color: #000; font-size: 8px; }

/* fold-out bits */
.peek { margin-top: 14px; }
.peek > summary,
.faq-item > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  list-style: none;
  cursor: pointer;
}
.peek > summary { display: inline-flex; color: var(--c); font: 10px/1.5 var(--font-pixel); text-transform: uppercase; }
.peek--small > summary { color: var(--muted); font-size: 9px; }
.peek > summary::-webkit-details-marker,
.faq-item > summary::-webkit-details-marker { display: none; }
.peek > summary::before,
.faq-item > summary::before {
  content: "";
  flex: none;
  width: 6px;
  height: 10px;
  background: currentColor;
  clip-path: polygon(0 0, 2px 0, 2px 2px, 4px 2px, 4px 4px, 6px 4px, 6px 6px, 4px 6px, 4px 8px, 2px 8px, 2px 10px, 0 10px);
  transition: transform 0.15s steps(2);
}
.peek[open] > summary::before,
.faq-item[open] > summary::before { transform: rotate(90deg); }

/* the download button + file info */
.btn--dl { padding: 22px 28px; font-size: 15px; line-height: 1.5; }
.dl-file { margin: 12px 0 0; color: var(--muted); font-size: 19px; word-break: break-word; }
.dl-started { margin: 10px 0 0; color: var(--lime); }
.dl-license { margin: 10px 0 0; color: var(--muted); font-size: 19px; }
.dl-license a,
.faq-a a { color: var(--c); }
.sha {
  --n: 2px;
  display: block;
  margin-top: 10px;
  padding: 10px 12px;
  background: #000;
  box-shadow: inset 0 0 0 2px var(--line);
  color: var(--text);
  font: 18px/1.2 var(--font-body);
  word-break: break-all;
}
.all-files { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.all-files a { color: var(--c); font: 10px/1.6 var(--font-pixel); text-transform: uppercase; }
.all-files span { margin-left: 8px; color: var(--muted); font-size: 18px; }

/* numbered how-to lists */
.howto { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; counter-reset: howto; }
.howto > li { counter-increment: howto; position: relative; padding-left: 52px; }
.howto > li::before {
  --n: 3px;
  content: counter(howto);
  position: absolute;
  left: 0;
  top: -2px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--c);
  box-shadow: inset 0 0 0 3px var(--c);
  font: 12px/1 var(--font-pixel);
}
.howto h4 { margin: 6px 0 10px; font: 12px/1.5 var(--font-pixel); text-transform: uppercase; }
.howto p { margin: 0 0 10px; color: #cfcfcf; }
.howto b { color: var(--text); }
.howto--tight { gap: 12px; }
.howto--tight > li { padding-left: 48px; }
.howto--tight > li::before { width: 30px; height: 30px; font-size: 10px; }

.note {
  --n: 2px;
  margin: 10px 0 0;
  padding: 10px 14px;
  background: #000;
  box-shadow: inset 0 0 0 2px var(--line);
  color: var(--muted);
  font-size: 19px;
}
.note b { color: var(--text); }
.note--warn { margin: 0 0 14px; box-shadow: inset 0 0 0 2px var(--gold); color: var(--gold); }

kbd {
  display: inline-block;
  padding: 1px 6px;
  background: #222;
  box-shadow: inset 0 -2px 0 #000, inset 0 0 0 2px var(--line);
  color: var(--text);
  font: 18px/1.1 var(--font-body);
}
code { color: var(--lime); font-family: var(--font-body); }

/* the easy way: the install script in every Mac download */
.easy {
  --n: 4px;
  margin-bottom: 22px;
  padding: 22px 24px 18px;
  background: #0a0a0a;
  box-shadow: inset 0 0 0 3px var(--lime);
}
.easy-tag {
  display: inline-block;
  margin: 0 0 18px;
  padding: 7px 10px;
  background: var(--lime);
  color: #000;
  font: 10px/1 var(--font-pixel);
  text-transform: uppercase;
}
.peek--hand { margin: 4px 0 18px; }
.peek--hand[open] > summary { margin-bottom: 18px; }

/* "says it's damaged?" box */
.fix {
  --n: 4px;
  margin-top: 28px;
  padding: 22px 24px;
  background: #0a0a0a;
  box-shadow: inset 0 0 0 3px var(--gold);
}
.fix > p { margin: 0 0 14px; color: #cfcfcf; }
.fix-h { margin: 0 0 10px; color: var(--gold); font: 12px/1.6 var(--font-pixel); text-transform: uppercase; }

/* a Terminal line with a copy button */
.cmd {
  --n: 3px;
  display: flex;
  align-items: stretch;
  margin: 6px 0 12px;
  background: #000;
  box-shadow: inset 0 0 0 2px var(--line);
}
.cmd code { flex: 1; min-width: 0; padding: 12px 14px; font-size: 19px; line-height: 1.25; word-break: break-all; }
.cmd code::before { content: "$ "; color: var(--muted); }
.cmd-copy {
  flex: none;
  padding: 0 16px;
  border: 0;
  background: var(--line);
  color: var(--text);
  font: 9px/1 var(--font-pixel);
  text-transform: uppercase;
  cursor: pointer;
}
.cmd-copy:hover { background: var(--line-light); }
.cmd-copy.is-done { background: var(--lime); color: #000; }

/* ---- drawn copies of the real Mac / Windows screens ---- */
/* flex (not grid) so the drawn screens shrink to fit narrow phones */
.mock { margin: 16px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.mock figcaption { color: var(--muted); font-size: 19px; }
.mock figcaption b { color: var(--text); }
.mock-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.mock-pair .mock { margin: 8px 0; }
/* the thing to click blinks */
.hl { outline: 3px dashed var(--gold); outline-offset: 3px; animation: hl-blink 1s steps(2) infinite; }
@keyframes hl-blink { 50% { outline-color: transparent; } }

.mock p { margin: 0; color: inherit; } /* drawn screens keep their own text colors */
.mac-alert,
.mac-win,
.mac-about {
  color: #1d1d1f;
  font: 13px/1.35 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  box-shadow: 0 0 0 1px #b9b9be, 0 12px 30px rgba(0, 0, 0, 0.55);
}
.mac-alert {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 100%;
  max-width: 260px;
  padding: 20px 18px 16px;
  background: #ececec;
  border-radius: 14px;
  text-align: center;
}
.os-appicon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  background: var(--c);
  border-radius: 13px;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.2);
  color: #000;
  font: 22px/1 var(--font-pixel);
}
.mock .mac-alert-title { margin: 4px 0 0; font-weight: 700; }
.mock .mac-alert-text { margin: 0 0 6px; color: #3c3c43; font-size: 11px; }
.mac-btn {
  display: block;
  width: 100%;
  padding: 5px 10px;
  background: #fff;
  border-radius: 7px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.25), 0 1px 1px rgba(0, 0, 0, 0.1);
  color: #1d1d1f;
}
.mac-btn--blue { background: #0a84ff; color: #fff; box-shadow: none; }

.mac-win { width: 100%; max-width: 540px; background: #f5f5f7; border-radius: 11px; overflow: hidden; font-size: 12px; }
.mac-bar { display: flex; gap: 7px; padding: 10px 12px; background: #e6e6e9; }
.mac-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.mac-bar i:nth-child(2) { background: #febc2e; }
.mac-bar i:nth-child(3) { background: #28c840; }
.mac-settings { display: grid; grid-template-columns: 150px 1fr; }
.mac-side { list-style: none; margin: 0; padding: 8px; display: grid; align-content: start; gap: 2px; background: #e6e6e9; }
.mac-side li { padding: 4px 8px; border-radius: 6px; color: #3c3c43; }
.mac-side li.on { background: #0a84ff; color: #fff; }
.mac-pane { padding: 14px 16px 18px; }
.mock .mac-pane-h { margin: 0; font-size: 14px; font-weight: 700; }
.mock .mac-dim { margin: 6px 0; color: #8e8e93; font-size: 11px; }
.mock .mac-sec { margin: 6px 0; font-weight: 700; }
.mac-card { padding: 10px 12px; background: #fff; border-radius: 8px; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12); }
.mock .mac-small { margin: 0 0 6px; color: #3c3c43; font-size: 11px; }
.mac-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid #e5e5ea;
  font-size: 11.5px;
}
.mac-row .mac-btn { width: auto; flex: none; }

.mac-about { width: 100%; max-width: 260px; padding: 18px; background: #ececec; border-radius: 14px; font-size: 12px; text-align: center; }
.mock .mac-about-name { margin: 0 0 10px; font-size: 16px; font-weight: 700; }
.mac-about dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0; text-align: left; }
.mac-about dt { font-weight: 600; text-align: right; }
.mac-about dd { margin: 0; }
.mac-about mark { padding: 0 3px; background: #ffe066; color: #1d1d1f; }

.win-menu,
.win-ss { font: 13px/1.35 "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.win-menu {
  display: grid;
  width: 100%;
  max-width: 240px;
  padding: 6px;
  background: #2b2b2b;
  border-radius: 8px;
  box-shadow: 0 0 0 1px #4a4a4a, 0 12px 30px rgba(0, 0, 0, 0.55);
  color: #fff;
}
.mock .win-file { margin: 2px 8px 6px; color: #9a9a9a; font-size: 11px; word-break: break-all; }
.win-menu span { padding: 6px 10px; border-radius: 4px; }
.win-menu span.hl { background: #3d3d3d; }
.win-ss {
  width: 100%;
  max-width: 300px;
  padding: 18px 18px 14px;
  background: #1a5ca8;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 12px;
}
.mock .win-ss p { margin: 0 0 10px; }
.mock .win-ss .win-ss-title { margin-bottom: 12px; font-size: 19px; font-weight: 300; }
.win-link { display: inline-block; text-decoration: underline; }
.mock .win-ss .win-ss-app { color: #d4e4f7; }
.win-ss-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.win-btn { padding: 5px 16px; border: 2px solid #fff; }

/* ---- screenshots ---- */
.dl-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 44px; }
.shot {
  --n: 3px;
  padding: 3px;
  border: 0;
  background: var(--line);
  cursor: zoom-in;
  transition: transform 0.15s steps(2), background 0.1s;
}
.shot:hover,
.shot:focus-visible { background: var(--c); transform: translateY(-2px); outline: none; }
.shot img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

body.no-scroll { overflow: hidden; }

/* ---- features, FAQ, more games ---- */
.dl-features { margin-bottom: 44px; }
.features {
  list-style: none;
  margin: 0;
  padding: 26px 28px 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 30px;
}
.features li { position: relative; padding-left: 26px; color: #cfcfcf; }
.features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 10px;
  height: 10px;
  background: var(--c);
  box-shadow: 3px 3px 0 var(--c-dark);
}
.dl-features .game-tags { padding: 14px 28px 26px; }

.faq { display: grid; gap: 10px; margin-bottom: 44px; }
.faq-item { --n: 3px; background: var(--panel); box-shadow: inset 0 0 0 3px var(--line); }
.faq-item[open] { box-shadow: inset 0 0 0 3px var(--c); }
.faq-item > summary { padding: 18px 20px; color: var(--text); font: 11px/1.6 var(--font-pixel); text-transform: uppercase; }
.faq-item > summary::before { color: var(--c); }
.faq-item > summary:focus-visible { outline: none; color: var(--c); }
.faq-a { padding: 0 22px 18px 40px; color: #cfcfcf; }
.faq-a p { margin: 0 0 10px; }
.faq-a b { color: var(--text); }

.more-games { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.more-game {
  --n: 4px;
  display: grid;
  gap: 8px;
  padding: 4px 4px 16px;
  background: var(--panel);
  box-shadow: inset 0 0 0 3px var(--line);
  color: var(--text);
  text-decoration: none;
  transition: transform 0.15s steps(2);
}
.more-game:hover,
.more-game:focus-visible { box-shadow: inset 0 0 0 3px var(--c); transform: translateY(-2px); outline: none; }
.more-game img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.more-game-title { padding: 8px 14px 0; color: var(--c); font: 12px/1.4 var(--font-pixel); text-transform: uppercase; }
.more-game-sub { padding: 0 14px; color: var(--muted); font-size: 19px; }

/* =========================================================
   Shared pieces: ghost buttons, clickable art, stat counters
   ========================================================= */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* outlined button (More info, All news...) */
.btn--ghost {
  background: #000;
  color: var(--c);
  box-shadow: inset 0 0 0 3px var(--c);
}
.btn--ghost:hover { filter: none; background: var(--c); color: #000; }
.btn--ghost:focus-visible { box-shadow: inset 0 0 0 3px #fff; }

.game-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* card titles link to the game's page */
.game-title a { color: inherit; text-decoration: none; }
.game-title a:hover { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 6px; }

/* the big art on a card is a link to the game's page */
a.game-art { position: relative; cursor: pointer; }
/* on a game's own page the big art opens the screenshot viewer */
button.game-art,
button.dl-hero-art {
  position: relative;
  width: 100%;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: zoom-in;
}
button.dl-hero-art { display: block; transition: background 0.1s; }
button.dl-hero-art:hover { background: var(--c); }
.game-art:focus-visible,
button.dl-hero-art:focus-visible { outline: none; background: #fff; }
.art-hint {
  --n: 2px;
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #000;
  color: var(--c);
  box-shadow: inset 0 0 0 2px var(--c);
  font: 8px/1 var(--font-pixel);
  text-transform: uppercase;
  pointer-events: none;
  transition: transform 0.15s steps(2), background 0.1s;
}
/* always showing, so it's obvious the picture leads somewhere; it lights up on hover */
.game-art:hover .art-hint,
.game-art:focus-visible .art-hint { background: var(--c); color: #000; transform: translateY(-2px); }
.art-hint .px-arrow { width: 6px; height: 10px; clip-path: polygon(0 0, 2px 0, 2px 2px, 4px 2px, 4px 4px, 6px 4px, 6px 6px, 4px 6px, 4px 8px, 2px 8px, 2px 10px, 0 10px); }
.px-icon--hint { width: 12px; }

/* ---------- "Demo available": a ribbon over the art's bottom-left corner ----------
   Down there it stays clear of the game's logo and sits level with the More info
   badge. It hangs 8px past the art's left edge and the dark bit under that folds
   round behind the art. The ribbon is its own link (to the demo on Steam), so the
   art and the ribbon share a wrapper that takes the art's place in the card grid. */
.art-wrap { position: relative; grid-area: art; align-self: start; }
.gp-media > .art-wrap,
.spotlight-in > .art-wrap { grid-area: auto; }
/* tiles have their title under the picture, so the ribbon is placed from the
   tile's width: 4px frame + a 16:9 picture, less the ribbon and a gap */
.tile-wrap { position: relative; display: grid; container-type: inline-size; }
.demo-flag {
  --c: var(--lime);
  position: absolute;
  bottom: 11px;
  left: -8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 4px 0 14px;
  background: var(--c);
  color: #000;
  font: 10px/1 var(--font-pixel);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  filter: drop-shadow(3px 3px 0 #000);
  transition: transform 0.15s steps(2);
}
/* the swallowtail end, cut in 4px steps */
.demo-flag::after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 16px;
  height: 32px;
  background: var(--c);
  clip-path: polygon(0 0, 16px 0, 16px 4px, 12px 4px, 12px 8px, 8px 8px, 8px 12px, 4px 12px,
    4px 20px, 8px 20px, 8px 24px, 12px 24px, 12px 28px, 16px 28px, 16px 32px, 0 32px);
}
/* the fold under the overhang */
.demo-flag::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 8px;
  height: 8px;
  background: #1d5c1d;
  clip-path: polygon(0 0, 8px 0, 8px 8px, 4px 8px, 4px 4px, 0 4px);
}
.demo-flag-play {
  width: 6px;
  height: 10px;
  background: currentColor;
  clip-path: polygon(0 0, 2px 0, 2px 2px, 4px 2px, 4px 4px, 6px 4px, 6px 6px, 4px 6px, 4px 8px, 2px 8px, 2px 10px, 0 10px);
  animation: demo-blink 1.2s steps(1) infinite;
}
@keyframes demo-blink { 50% { opacity: 0; } }
.demo-flag:hover,
.demo-flag:focus-visible { --c: #fff; transform: translateY(-2px); }
.demo-flag:hover .demo-flag-play { animation: none; }
.tile-wrap .demo-flag { bottom: auto; top: calc(4px + (100cqw - 8px) * 9 / 16 - 44px); }
@media (max-width: 600px) {
  .demo-flag { font-size: 9px; gap: 8px; padding-left: 12px; }
}
/* too narrow for the ribbon and the More info badge side by side; the art still opens the page */
@media (max-width: 370px) {
  .art-wrap .art-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-flag-play { animation: none; }
}

/* small screenshots on cards */
.shot { position: relative; display: block; }
.shot-more {
  position: absolute;
  inset: 3px;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font: 14px/1 var(--font-pixel);
  text-shadow: 3px 3px 0 #000;
}
.shot:hover .shot-more { background: rgba(0, 0, 0, 0.4); }

/* big numbers */
.stats {
  list-style: none;
  margin: 0 0 44px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: 10px;
}
.stat {
  --n: 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 16px 16px;
  background: var(--panel);
  box-shadow: inset 0 0 0 3px var(--line);
}
.stat-num {
  color: var(--c);
  font: clamp(20px, 2.4vw, 28px)/1 var(--font-pixel);
  text-shadow: 3px 3px 0 var(--c-dark, #4a3608);
  white-space: nowrap;
}
.stat-label {
  color: var(--muted);
  font: 9px/1.5 var(--font-pixel);
  text-transform: uppercase;
}
.stats--card { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; margin: 0 0 22px; gap: 8px; }
.stats--card .stat { gap: 10px; padding: 14px 12px 12px; background: #000; }
.stats--card .stat-num { font-size: 18px; }

/* "Love Sandboxels?" lines */
.pitch-kicker {
  margin: 16px 0 0;
  color: var(--text);
  font: 12px/1.7 var(--font-pixel);
}
.pitch-kicker + .game-title { margin-top: 10px; }
.pitch-big {
  margin: 16px 0 14px;
  color: var(--c);
  font: clamp(15px, 2vw, 21px)/1.55 var(--font-pixel);
  text-shadow: 4px 4px 0 var(--c-dark, #4a3608);
}
.pitch-big a { color: inherit; text-decoration: none; }
.pitch-big a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }

.section-link {
  --n: 2px;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  color: var(--gold);
  box-shadow: inset 0 0 0 2px var(--gold);
  font: 9px/1 var(--font-pixel);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.section-link:hover { background: var(--gold); color: #000; }
.sub-head {
  margin: 0 0 14px;
  color: var(--c);
  font: 11px/1.5 var(--font-pixel);
  text-transform: uppercase;
}
.more--after { margin-bottom: 48px; }
.tiles { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 30px; }

/* =========================================================
   Home: SandDudes spotlight
   ========================================================= */
.spotlight-in {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 14px 36px;
  align-items: start;
  padding: 28px;
}
.spotlight .game-art img { image-rendering: auto; }
.spotlight-info { display: flex; flex-direction: column; align-items: flex-start; }
.spotlight-info .pitch-big { margin-top: 18px; }

/* =========================================================
   News
   ========================================================= */
.news-list { display: grid; gap: 12px; margin-bottom: 44px; }
.news-list--soon { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.news-list--soon:has(+ .news-list) { margin-bottom: 12px; }
.news-list + .more { margin-top: -20px; }
.news-item {
  --n: 4px;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  padding: 3px;
  background: var(--panel);
  box-shadow: inset 0 0 0 3px var(--line);
  transition: box-shadow 0.1s;
}
.news-item:hover,
.news-item:focus-within { box-shadow: inset 0 0 0 3px var(--c); }
.news-item--soon { grid-template-columns: minmax(0, 1fr); align-content: start; }
.news-thumb { display: block; overflow: hidden; background: #000; }
.news-thumb img {
  width: 100%;
  height: 100%;
  aspect-ratio: 460 / 215;
  object-fit: cover;
  image-rendering: auto;
}
.news-item:not(.news-item--soon) .news-thumb img { min-height: 100%; }
.news-thumb--logo { display: grid; place-items: center; min-height: 112px; }
.news-thumb--logo img { width: 72%; height: auto; aspect-ratio: auto; object-fit: contain; image-rendering: pixelated; }
.news-body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 20px 18px; }
.news-date { margin: 0; color: var(--muted); font: 9px/1.6 var(--font-pixel); text-transform: uppercase; }
.news-in { color: var(--c); }
.news-title { margin: 0; font: 13px/1.6 var(--font-pixel); text-transform: uppercase; }
.news-title a { color: var(--c); text-decoration: none; }
.news-title a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; }
.news-text { margin: 0; color: #cfcfcf; }
.news-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  color: var(--c);
  font: 9px/1.6 var(--font-pixel);
  text-transform: uppercase;
  text-decoration: none;
}
.news-more:hover { text-decoration: underline; }
.news-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.news-ctas .btn { padding: 11px 14px; font-size: 10px; gap: 10px; }

/* =========================================================
   Game pages (#game/<slug>)
   ========================================================= */
.gp .game { --c: inherit; } /* frames on a game page use the game's color */
.gp-hero { margin-bottom: 24px; }
.gp-hero-in {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 14px 36px;
  align-items: start;
  padding: 28px;
}
.gp--download .gp-media .game-art img { image-rendering: auto; }
.gp-media { display: grid; gap: 12px; }
/* outside a card grid the art has no named area */
.gp-media > .game-art,
.spotlight-in > .game-art { grid-area: auto; }
.gp-info { display: flex; flex-direction: column; align-items: flex-start; }
.gp-info .game-title { margin-bottom: 8px; font-size: clamp(20px, 2.8vw, 30px); }
.gp-tagline { margin: 0 0 18px; color: var(--c); }
.gp-cta-note { margin: 12px 0 0; color: var(--muted); font-size: 19px; }

/* screenshot carousel */
.carousel { margin-bottom: 44px; }
.carousel-stage { position: relative; }
.carousel-main {
  --n: 4px;
  position: relative;
  display: block;
  width: 100%;
  padding: 4px;
  border: 0;
  background: var(--line);
  cursor: zoom-in;
  transition: background 0.1s;
}
.carousel-main:hover,
.carousel-main:focus-visible { background: var(--c); outline: none; }
.carousel-main img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000;
  image-rendering: auto;
}
.gp--steam .carousel:not(.carousel--smooth) .carousel-main img { image-rendering: pixelated; }
.carousel-zoom,
.carousel-count {
  --n: 2px;
  position: absolute;
  padding: 8px 10px;
  background: #000;
  font: 9px/1 var(--font-pixel);
  text-transform: uppercase;
  pointer-events: none;
}
.carousel-zoom {
  top: 16px;
  right: 16px;
  color: var(--c);
  box-shadow: inset 0 0 0 2px var(--c);
  opacity: 0;
  transition: opacity 0.15s steps(2);
}
.carousel-main:hover .carousel-zoom,
.carousel-main:focus-visible .carousel-zoom { opacity: 1; }
.carousel-count { left: 16px; bottom: 16px; color: var(--text); box-shadow: inset 0 0 0 2px var(--line); }
.carousel-nav {
  --n: 3px;
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-top: -28px;
  border: 0;
  background: rgba(0, 0, 0, 0.82);
  color: var(--text);
  box-shadow: inset 0 0 0 3px var(--line-light);
  cursor: pointer;
  transition: transform 0.15s steps(2);
}
.carousel-prev { left: 16px; }
.carousel-next { right: 16px; }
.carousel-nav:hover,
.carousel-nav:focus-visible { color: var(--c); box-shadow: inset 0 0 0 3px var(--c); outline: none; }
.carousel-nav:active { transform: scale(0.92); }
.carousel-cap { margin: 12px 0 0; color: #cfcfcf; }
.carousel-cap::before { content: "> "; color: var(--c); }
.carousel-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  padding-bottom: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.carousel-thumb {
  --n: 3px;
  flex: 0 0 calc((100% - 50px) / 6);
  min-width: 110px;
  padding: 3px;
  border: 0;
  background: var(--line);
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.1s, background 0.1s;
}
.carousel-thumb:hover,
.carousel-thumb:focus-visible { opacity: 1; background: var(--line-light); outline: none; }
.carousel-thumb[aria-current="true"] { opacity: 1; background: var(--c); }
.carousel-thumb img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; image-rendering: auto; }
.is-in { animation: pic-in 0.18s steps(3) both; }
@keyframes pic-in { from { opacity: 0.3; } to { opacity: 1; } }

/* write-up + facts */
.gp-about {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-bottom: 44px;
}
.gp-about .game { margin-bottom: 0; }
.gp-text-in { padding: 26px 30px 12px; }
.gp-text-in p { margin: 0 0 18px; color: #d6d6d6; font-size: 23px; line-height: 1.35; }
.gp-text-in p:first-child { color: var(--text); }
.gp-facts-in { padding: 24px 24px 20px; }
.gp-facts-h { margin: 0 0 16px; color: var(--c); font: 12px/1 var(--font-pixel); text-transform: uppercase; }
.gp-facts dl { display: grid; gap: 12px; margin: 0; }
.fact {
  display: grid;
  gap: 5px;
  padding-bottom: 12px;
  background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px) bottom / 100% 2px no-repeat;
}
.fact:last-child { padding-bottom: 0; background: none; }
.fact dt { color: var(--muted); font: 9px/1.4 var(--font-pixel); text-transform: uppercase; }
.fact dd { margin: 0; color: var(--text); font-size: 20px; line-height: 1.2; }

/* call to action at the bottom */
.gp-band-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
  padding: 26px 28px;
}
.gp-band-line { margin: 0; color: var(--c); font: 12px/1.7 var(--font-pixel); text-transform: uppercase; }

/* SandDudes: coming from Sandboxels */
.gp-pitch-in { padding: 28px; }
.pitch-text { margin: 0 0 28px; color: var(--text); font-size: 24px; line-height: 1.3; max-width: 62ch; }
.pitch-h { margin: 0 0 14px; color: var(--c); font: 12px/1.5 var(--font-pixel); text-transform: uppercase; }
.pitch-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 30px; }
.pitch-card {
  --n: 4px;
  padding: 18px 18px 16px;
  background: #000;
  box-shadow: inset 0 0 0 3px var(--c);
}
.pitch-card h4 { margin: 0 0 10px; color: var(--c); font: 11px/1.4 var(--font-pixel); text-transform: uppercase; }
.pitch-card p { margin: 0; color: #cfcfcf; font-size: 20px; line-height: 1.25; }
.features--pitch { padding: 0; }
.pitch-note {
  margin: 24px 0 0;
  padding-top: 16px;
  color: var(--muted);
  font-size: 19px;
  background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px) top / 100% 2px no-repeat;
}

/* =========================================================
   Screenshot viewer (js/gallery.js)
   ========================================================= */
.viewer {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: rgba(0, 0, 0, 0.95);
  animation: view-in 0.2s steps(3) both;
}
.viewer-top { display: flex; align-items: center; gap: 16px; padding: 14px 16px 8px 22px; }
.viewer-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--c);
  font: 12px/1.5 var(--font-pixel);
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.viewer-count { margin-left: 12px; color: var(--muted); }
.viewer-more {
  --n: 2px;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  color: var(--c);
  box-shadow: inset 0 0 0 2px var(--c);
  font: 9px/1 var(--font-pixel);
  text-transform: uppercase;
  text-decoration: none;
}
.viewer-more:hover,
.viewer-more:focus-visible { background: var(--c); color: #000; outline: none; }
.viewer-nav,
.viewer-close {
  --n: 3px;
  display: grid;
  place-items: center;
  border: 0;
  background: #000;
  color: var(--text);
  box-shadow: inset 0 0 0 3px var(--line-light);
  cursor: pointer;
}
.viewer-close { flex: none; width: 46px; height: 46px; }
.px-x { display: block; width: 14px; height: 14px; }
.viewer-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 8px 88px;
  touch-action: pan-y pinch-zoom;
}
.viewer-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.viewer-fig img {
  display: block;
  max-width: none;
  background: #000;
  box-shadow: 0 0 0 4px var(--line);
  image-rendering: auto;
  user-select: none;
  -webkit-user-select: none;
}
.viewer-fig img.is-px { image-rendering: pixelated; }
.viewer-cap { max-width: 60ch; color: #e6e6e6; font-size: 21px; text-align: center; }
.viewer-cap[hidden] { display: none; }
.viewer-nav { position: absolute; top: 50%; width: 58px; height: 58px; margin-top: -29px; }
.viewer-prev { left: 18px; }
.viewer-next { right: 18px; }
.viewer-nav:hover,
.viewer-close:hover,
.viewer-nav:focus-visible,
.viewer-close:focus-visible { box-shadow: inset 0 0 0 3px var(--c); color: var(--c); outline: none; }
.viewer-nav:active { transform: scale(0.92); }
.viewer-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px 16px; scrollbar-width: thin; }
.viewer-thumb:first-child { margin-left: auto; }  /* centred, but still scrolls when it's too long */
.viewer-thumb:last-child { margin-right: auto; }
.viewer-thumb {
  --n: 2px;
  flex: none;
  width: 96px;
  padding: 2px;
  border: 0;
  background: var(--line);
  opacity: 0.5;
  cursor: pointer;
}
.viewer-thumb:hover,
.viewer-thumb:focus-visible { opacity: 1; outline: none; background: var(--line-light); }
.viewer-thumb[aria-current="true"] { opacity: 1; background: var(--c); }
.viewer-thumb img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.viewer--single .viewer-nav,
.viewer--single .viewer-thumbs { display: none; }

/* ---------- footer ---------- */
.footer {
  margin-top: 72px;
  border-top: 4px solid var(--line);
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 0;
  color: var(--muted);
  font: 10px/1.6 var(--font-pixel);
  text-transform: uppercase;
}
.footer-inner p { margin: 0; }
.footer-inner a { text-decoration: none; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .game-main,
  .game:nth-child(even) .game-main {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas: "art" "info" "shots" "tags";
    gap: 22px;
  }
  .brand img { height: 42px; }
  .topbar-inner { height: 68px; }
  .dl-hero-in { grid-template-columns: 1fr; }
  .dl-shots { grid-template-columns: 1fr 1fr; }
  .features { grid-template-columns: 1fr; }
  .mock-pair { grid-template-columns: minmax(0, 1fr); }
  .spotlight-in,
  .gp-hero-in { grid-template-columns: 1fr; gap: 22px; }
  .gp-about { grid-template-columns: minmax(0, 1fr); }
  .pitch-cards { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats--c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats--card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .wrap { width: calc(100% - 32px); }
  body { font-size: 21px; }
  /* logo on top, tabs underneath */
  .topbar-inner {
    height: auto;
    padding: 10px 16px 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .tabs { justify-content: flex-start; }
  .tab { padding: 10px 12px; font-size: 10px; }
  main { padding-top: 44px; }
  .game-main { padding: 18px; }
  .game-shots { grid-template-columns: 1fr; }
  .game-meta li { grid-template-columns: 100px 1fr; }
  .btn--big { width: 100%; justify-content: center; font-size: 12px; }
  .cd-num { font-size: 16px; }
  .dl-hero-in,
  .dl-get-in { padding: 18px; }
  .choices { grid-template-columns: 1fr; }
  .howto > li { padding-left: 44px; }
  .mac-settings { grid-template-columns: 1fr; }
  .mac-side { display: none; }
  .features { padding: 20px 18px 6px; }
  .dl-features .game-tags { padding: 12px 18px 20px; }
  .faq-a { padding: 0 18px 16px 18px; }
  .btn--dl { padding: 18px 16px; font-size: 12px; }
  .mock-pair { gap: 0; }
  .game-shots { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .game-ctas { width: 100%; }
  .game-ctas > .btn { width: 100%; justify-content: center; }
  .spotlight-in,
  .gp-hero-in,
  .gp-pitch-in { padding: 18px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stats > .stat:last-child:nth-child(odd) { grid-column: span 2; }
  .stat { padding: 14px 12px 12px; }
  .news-item,
  .news-list--soon { grid-template-columns: minmax(0, 1fr); }
  .news-body { padding: 14px 14px 16px; }
  .gp-text-in { padding: 20px 18px 6px; }
  .gp-text-in p { font-size: 21px; }
  .gp-facts-in { padding: 20px 18px 16px; }
  .gp-band-in { padding: 20px 18px; }
  .carousel-nav { width: 42px; height: 42px; }
  .carousel-prev { left: 10px; }
  .carousel-next { right: 10px; }
  .carousel-count { left: 10px; bottom: 10px; }
  .carousel-zoom { display: none; }
  .carousel-thumb { flex-basis: 30%; min-width: 0; }
  .section-head { gap: 12px; }
  .viewer-top { padding: 10px 10px 6px 14px; gap: 10px; }
  .viewer-more { display: none; }
  .viewer-stage { padding: 6px 8px 74px; }
  .viewer-nav { top: auto; bottom: 10px; margin-top: 0; width: 52px; height: 52px; }
  .viewer-prev { left: calc(50% - 62px); }
  .viewer-next { right: calc(50% - 62px); }
  .viewer-thumb { width: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* =========================================================
   Help page (#help) + footer links
   ========================================================= */
.help-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin: 0 0 34px;
  padding: 16px 18px;
  background: var(--panel);
  box-shadow: inset 0 0 0 3px var(--line);
}
.help-pick label { font: 11px/1 var(--font-pixel); text-transform: uppercase; }
.help-pick select {
  padding: 10px 12px;
  border: 0;
  background: #000;
  color: var(--text);
  box-shadow: inset 0 0 0 3px var(--line-light);
  font: 20px/1 var(--font-body);
  cursor: pointer;
}
.help-pick select:focus-visible { outline: 3px dashed var(--gold); outline-offset: 3px; }
.help-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.help-jump a {
  padding: 8px 10px;
  color: var(--text);
  box-shadow: inset 0 0 0 2px var(--line-light);
  font: 9px/1 var(--font-pixel);
  text-transform: uppercase;
  text-decoration: none;
}
.help-jump a:hover { box-shadow: inset 0 0 0 2px var(--gold); color: var(--gold); }
.help-body .section-head { margin-top: 10px; scroll-margin-top: 110px; }
.help-card { margin-bottom: 22px; }
.help-in { padding: 24px 28px 18px; }
.help-in > p { margin: 0 0 14px; color: #cfcfcf; }
.help-in > p b, .help-in > p a { color: var(--text); }
.help-in a { color: var(--c); }
.help-h { margin: 6px 0 14px; color: var(--c); font: 13px/1.5 var(--font-pixel); text-transform: uppercase; }
.help-h:not(:first-child) { margin-top: 26px; }
.help-sub { margin: 16px 0 4px !important; color: var(--muted) !important; font: 9px/1.4 var(--font-pixel); text-transform: uppercase; }
.help-in .easy-tag + .help-h { margin-top: 0; }
.help-in > .easy-tag { color: #000; margin-bottom: 14px; }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  padding: 24px 0 0;
}
.footer-links a {
  color: var(--muted);
  font: 10px/1.6 var(--font-pixel);
  text-transform: uppercase;
  text-decoration: none;
}
.footer-links a:hover { color: var(--gold); }

@media (max-width: 600px) {
  .help-in { padding: 18px; }
  .help-jump { margin-left: 0; }
  .help-pick select { width: 100%; }
}