html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  background: #000;
  overflow-x: hidden;
  user-select: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* The game fills the window under the bar; text about it is below, if you scroll */
body {
  display: block;
}

/* Slim bar above the game: back to the site, and the pop-out button */
.bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 40px;
  padding: 0 16px;
  background: #151515;
  color: #f6f2e9;
  border-bottom: 1px solid #ffffff18;
}

.bar .logo {
  color: inherit;
  font-weight: 900;
  letter-spacing: -0.5px;
  text-decoration: none;
}

.bar .logo span { color: #ff6b35; }
.bar .title { color: #b9b3a8; font-size: 14px; }

.pop,
.away button {
  font: inherit;
  font-weight: 800;
  font-size: 13px;
  color: #171717;
  background: #d5ff62;
  border: 0;
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
}

.pop { margin-left: auto; display: none; }
.can-pop .pop { display: inline-block; }
.pop kbd { font: inherit; opacity: 0.6; margin-left: 4px; }

#stage {
  height: calc(100vh - 41px);
  display: flex;
  align-items: center;
  justify-content: center;
}

#game {
  display: block;
  background: #fff;
}

/* While the game is popped out, the page shows where it went */
.away { display: none; color: #f6f2e9; text-align: center; }
.popped .away { display: block; }
.popped .pop { visibility: hidden; }

/* About the game, under it */
.about {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 20px 30px;
  color: #b9b3a8;
  line-height: 1.65;
  font-size: 15px;
  user-select: text;
}
.about h1 { color: #f6f2e9; font-size: 34px; letter-spacing: -1.5px; margin: 0 0 8px; }
.about h2 { color: #f6f2e9; font-size: 19px; margin: 28px 0 6px; }
.about strong { color: #f6f2e9; }
.about .lead { font-size: 17px; }
.about ul { padding-left: 20px; }
.about .keys { list-style: none; padding: 0; }
.about .keys li { margin: 4px 0; }
.about kbd {
  display: inline-block;
  min-width: 22px;
  padding: 1px 6px;
  border: 1px solid #ffffff40;
  border-radius: 5px;
  background: #202020;
  color: #f6f2e9;
  font: inherit;
  font-size: 13px;
  text-align: center;
}
.about footer {
  border-top: 1px solid #ffffff18;
  margin-top: 36px;
  padding-top: 18px;
  font-size: 13px;
}
.about footer a { color: #938d83; text-decoration: none; margin-right: 16px; }
.about footer a:hover { color: #f6f2e9; }