/* The pages after the intro: white on the intro's red, the logo on top,
   the same small footer as the home page. */
html { background: #bc1818; color: #fff; }
body {
  /* dvh: the height phones really show, between their browser bars */
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center;
  font: 17px/1.6 ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
}
a { color: #fff; }
.logo { display: block; width: min(70vw, 360px); margin: 32px auto 8px; }
.logo img { width: 100%; height: auto; display: block; }
main { width: min(100% - 32px, 640px); flex: 1; }
h1 { font-size: 30px; line-height: 1.2; margin: 24px 0 8px; text-align: center; }
h2 { font-size: 19px; margin: 28px 0 4px; }
p, li { margin: 6px 0; }
ul { padding-left: 22px; }
.note { text-align: center; opacity: .8; font-size: 15px; }

.games { list-style: none; padding: 0; margin: 28px 0; display: grid; gap: 20px; }
.games li { display: flex; gap: 18px; align-items: center; margin: 0; }
.games img { width: 88px; height: 88px; border-radius: 22px; flex: none; box-shadow: 0 5px 0 #8a0c10; }
.games h2 { margin: 0; }
.games p { margin: 2px 0 0; }
.soon { display: inline-block; font-size: 13px; font-weight: 700; color: #bc1818; background: #fff;
        border-radius: 99px; padding: 1px 10px; margin-top: 6px; }
.games a { color: inherit; text-decoration: none; display: flex; gap: 18px; align-items: center; }
.games a:hover h2 { text-decoration: underline; }

/* One game's page: icon and name, then the screenshot beside how it plays. */
.game-head { display: flex; gap: 18px; align-items: center; margin: 24px 0 8px; }
.game-head img { width: 76px; height: 76px; border-radius: 19px; flex: none; box-shadow: 0 5px 0 #8a0c10; }
.game-head h1 { margin: 0; text-align: left; }
.game { display: grid; grid-template-columns: 240px 1fr; gap: 32px; align-items: start; margin-top: 20px; }
.shot { width: 100%; height: auto; display: block; border-radius: 24px; box-shadow: 0 7px 0 #8a0c10; }
.game h2:first-child { margin-top: 0; }
.back { display: inline-block; margin-top: 28px; text-decoration: none; opacity: .85; }
.back:hover { opacity: 1; text-decoration: underline; }
@media (max-width: 600px) {
  .game { grid-template-columns: 1fr; }
  .shot { width: min(72vw, 280px); margin: 0 auto; }
}

footer { padding: 28px 16px max(20px, env(safe-area-inset-bottom)); font-size: 14px; text-align: center; }
footer a { text-decoration: none; margin: 0 8px; opacity: .85; }
footer a:hover { opacity: 1; text-decoration: underline; }
footer small { display: block; margin-top: 6px; opacity: .7; font-size: 13px; }