/* The look shared by the game pages (like /minicraft/): the same night sky,
   pixel font and colours as the home page, with an easier-to-read font for
   the paragraphs. */
:root {
  --sky: #1b1b2f;
  --panel: #25253f;
  --text: #f0f0e8;
  --dim: #9a9ab0;
  --grass: #66aa33;
  --grass-dark: #4d8a22;
  --dirt: #885533;
  --dirt-dark: #664422;
  --gold: #ffcc33;
  --pixel: "Press Start 2P", ui-monospace, monospace;
  --read: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--sky);
  color: var(--text);
  font-family: var(--read);
  font-size: 17px;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* The bar along the top, back to the home page. */
.top {
  padding: 14px 16px;
  font-family: var(--pixel);
  font-size: 11px;
}
.top a { color: var(--dim); text-decoration: none; }
.top a:hover, .top a:focus-visible { color: var(--text); }

main {
  flex: 1;
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 8px 16px 48px;
}

/* The game's name and its one-line pitch. */
.hero { text-align: center; padding: 20px 0 8px; }
h1 {
  margin: 0 0 14px;
  font-family: var(--pixel);
  font-size: clamp(24px, 7vw, 44px);
  line-height: 1.3;
  letter-spacing: 2px;
  text-shadow: 4px 4px 0 #000;
}
.pitch { margin: 0 auto 24px; max-width: 34em; color: var(--dim); font-size: 18px; }

h2 {
  margin: 44px 0 14px;
  font-family: var(--pixel);
  font-size: 15px;
  line-height: 1.6;
  color: var(--gold);
}
h3 { margin: 0 0 6px; font-size: 17px; }
p, ul, ol { margin: 0 0 14px; }
li { margin-bottom: 6px; }
a { color: var(--gold); }
kbd {
  font-family: var(--pixel);
  font-size: 11px;
  padding: 2px 6px;
  border: 2px solid var(--dim);
  border-radius: 3px;
  background: #000;
  white-space: nowrap;
}

/* The big green Play button, like the home page's. */
a.play {
  display: inline-block;
  padding: 18px 26px;
  font-family: var(--pixel);
  font-size: 15px;
  color: #000;
  background: var(--grass);
  text-decoration: none;
  border: 4px solid #000;
  box-shadow: inset -4px -4px 0 var(--grass-dark), 4px 4px 0 #000;
}
a.play:hover, a.play:focus-visible { background: #77bb44; outline: none; }
a.play:active { transform: translate(2px, 2px); box-shadow: inset -4px -4px 0 var(--grass-dark), 2px 2px 0 #000; }
.again { text-align: center; margin-top: 48px; }

/* Pictures from the game, side by side, or one under another on a phone. */
.pictures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin: 28px 0 0;
}
.pictures figure { margin: 0; }
.pictures img {
  display: block;
  width: 100%;
  height: auto;
  border: 4px solid #000;
}
/* Pixel-art games (like Minicraft) keep their pixels sharp when scaled. */
.pictures.pixel img { image-rendering: pixelated; }
.pictures figcaption { font-size: 14px; color: var(--dim); margin-top: 6px; }

/* A box for each way to install the game. The one for this device (picked
   by install.js) comes first and is marked. */
.devices { display: grid; gap: 12px; }
.device {
  background: var(--panel);
  border: 3px solid #000;
  padding: 14px 16px 4px;
}
.device.yours { border-color: var(--grass); }
.device .here {
  display: none;
  font-family: var(--pixel);
  font-size: 10px;
  color: var(--grass);
  margin-bottom: 8px;
}
.device.yours .here { display: block; }

/* The note for parents. */
.parents {
  background: var(--panel);
  border-left: 6px solid var(--gold);
  padding: 14px 18px 4px;
}

/* A strip of grass and dirt along the bottom, like the home page's. */
.ground {
  height: 48px;
  background:
    linear-gradient(var(--grass) 0 12px, transparent 12px),
    repeating-linear-gradient(90deg, var(--dirt) 0 16px, var(--dirt-dark) 16px 20px, var(--dirt) 20px 32px);
  border-top: 4px solid var(--grass-dark);
}
footer {
  background: var(--dirt);
  color: #e8d8c0;
  text-align: center;
  font-family: var(--pixel);
  font-size: 9px;
  line-height: 2;
  padding: 0 16px 16px;
}
footer a { color: inherit; }