/* 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: var(--game-icon-background, #7a3f24);
  border-color: var(--game-icon-border, #e89a4a);
}

.game-menu .icon-box:hover .icon {
  background: var(--game-icon-hover-background, #e89a4a);
}

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

.game-menu .icon-box .icon i {
  color: var(--game-icon-color, inherit);
}

.tabletop-sheriff {
  --game-icon-color: #f4c542;
  --game-icon-background: #574512;
  --game-icon-border: #c49a23;
  --game-icon-hover-background: #f4c542;
}

.tabletop-werewolf {
  --game-icon-color: #c6d4f0;
  --game-icon-background: #30394d;
  --game-icon-border: #8294b6;
  --game-icon-hover-background: #c6d4f0;
}

.tabletop-munchkin {
  --game-icon-color: #a5d65e;
  --game-icon-background: #35451f;
  --game-icon-border: #739c3c;
  --game-icon-hover-background: #a5d65e;
}

.tabletop-dead-of-winter {
  --game-icon-color: #82d6e8;
  --game-icon-background: #1c3d4b;
  --game-icon-border: #4e9aab;
  --game-icon-hover-background: #82d6e8;
}

.tabletop-avalon {
  --game-icon-color: #89aaff;
  --game-icon-background: #28364f;
  --game-icon-border: #607bb4;
  --game-icon-hover-background: #89aaff;
}

.tabletop-sushi-go {
  --game-icon-color: #ff7892;
  --game-icon-background: #4b2630;
  --game-icon-border: #bb5269;
  --game-icon-hover-background: #ff7892;
}

.tabletop-fake-artist {
  --game-icon-color: #dc8fe8;
  --game-icon-background: #442c4b;
  --game-icon-border: #a763b2;
  --game-icon-hover-background: #dc8fe8;
}

.tabletop-feed-the-kraken {
  --game-icon-color: #55d6c2;
  --game-icon-background: #1d4545;
  --game-icon-border: #3c9a8b;
  --game-icon-hover-background: #55d6c2;
}

.gaming-quakeworld {
  --game-icon-color: #7ee081;
  --game-icon-background: #24452c;
  --game-icon-border: #4c9a57;
  --game-icon-hover-background: #7ee081;
}

.gaming-arcade {
  --game-icon-color: #ff9d5c;
  --game-icon-background: #4b3021;
  --game-icon-border: #b76835;
  --game-icon-hover-background: #ff9d5c;
}

.gaming-tabletop {
  --game-icon-color: #f4c542;
  --game-icon-background: #574512;
  --game-icon-border: #c49a23;
  --game-icon-hover-background: #f4c542;
}

.gaming-game-books {
  --game-icon-color: #c7a0ff;
  --game-icon-background: #3b2b52;
  --game-icon-border: #8b65bd;
  --game-icon-hover-background: #c7a0ff;
}

.rubiks-timer {
  --game-icon-color: #64d7c5;
  --game-icon-background: #21443f;
  --game-icon-border: #408f83;
  --game-icon-hover-background: #64d7c5;
}

.rubiks-4lll {
  --game-icon-color: #ffcf5a;
  --game-icon-background: #4a3b1c;
  --game-icon-border: #b58e34;
  --game-icon-hover-background: #ffcf5a;
}

.rubiks-ortega {
  --game-icon-color: #ff8295;
  --game-icon-background: #4a2931;
  --game-icon-border: #ad5366;
  --game-icon-hover-background: #ff8295;
}

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

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

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