/* Match the page colour so no white shows when iOS bounces past the edges. */
body.game-menu-page {
  background-color: #2a1608;
}

/*
 * The section is its own full-screen scroll area. Its background stays still while the content
 * scrolls inside it, which works on iOS where background-attachment: fixed and fixed layers do not.
 * Each page sets its own background-image on .game-menu.
 */
.game-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 3rem 0;
  background-color: #2a1608;
  background-size: cover;
  background-position: center;
}

/* Leave room for the site sidebar on desktop. */
@media (min-width: 1200px) {
  .game-menu {
    left: 300px;
  }
}

.game-menu .section-title {
  display: inline-block;
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 12px;
}

.game-menu .section-title h2 {
  color: #f6e2b3;
  text-shadow: 2px 2px 0 #000;
}

.game-menu .section-title h2::after {
  background: #e89a4a;
}

.game-menu .section-title p {
  color: #e6dcc0;
}

/* Each game is a dark card so the text stays readable over the busy background. */
.game-menu .icon-box > .game-menu-card {
  height: 100%;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid rgba(232, 154, 74, 0.6);
  border-radius: 12px;
  box-shadow: 2px 2px 0 #000;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.game-menu .icon-box:hover > .game-menu-card {
  background: rgba(0, 0, 0, 0.75);
  border-color: #e89a4a;
}

.game-menu .icon {
  background: #7a3f24;
  border-color: #e89a4a;
}

.game-menu .icon-box:hover .icon {
  background: #e89a4a;
}

.game-menu .icon-box:hover .icon i {
  color: #2a1608;
}

.game-menu .title a {
  color: #f6e2b3;
}

.game-menu .title a:hover {
  color: #e89a4a;
}

.game-menu .description {
  margin-bottom: 0;
  color: #e6dcc0;
}