/* /games — the map games and their answer keys. */

.cxw-games-intro {
  font-family: Abcrom, Arial, sans-serif;
  font-size: 17px;
  font-weight: 300;
  line-height: 24px;
  max-width: 40em;
  margin: 0 0 24px;
}

.cxw-games-download {
  font-family: Abcrom, Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  /* Not a link yet -- Lucas's printed map artwork doesn't exist as a file, so
     there is nothing to point at. Greyed rather than hidden so the download is
     visibly promised rather than silently missing. */
  opacity: .45;
}

.cxw-games-soon {
  font-size: 12px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .04em;
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: 1px 6px;
}

.cxw-games-game {
  margin: 0 0 14px;
}

/* The reveal button carries the page's one interaction, so it needs to read as
   pressable against a page that is otherwise all type. */
.cxw-games-reveal {
  font-family: Abcrom, Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: inherit;
  background: none;
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: 7px 14px;
  cursor: pointer;
}
.cxw-games-reveal:hover {
  background: rgba(0, 0, 0, .06);
}
/* The confirm step should look like a question being asked, not like the same
   button again -- otherwise a double-tap blows straight past it. */
.cxw-games-reveal--confirm {
  font-style: italic;
  opacity: .7;
}

.cxw-games-answers {
  margin-top: 20px;
}

.cxw-games-subhead {
  margin: 24px 0 10px;
}
.cxw-games-subhead:first-child {
  margin-top: 0;
}

.cxw-games-list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Two columns where there's room: these run to 22 and 29 items. */
  columns: 2;
  column-gap: 40px;
}

.cxw-games-list > li {
  /* A wrapped item split across the column break reads as two half-answers. */
  break-inside: avoid;
  margin: 0 0 14px;
}

.cxw-games-answer {
  display: block;
  font-family: Abcrom, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 21px;
}

.cxw-games-meta {
  display: block;
  font-family: Abcrom, Arial, sans-serif;
  font-size: 13px;
  font-weight: 300;
  line-height: 18px;
  opacity: .55;
}

@media screen and (max-width: 767px) {
  .cxw-games-list {
    columns: 1;
  }
}

/* Zone A's answer is the highlighted grid itself, not a word list. */
.cxw-games-solution-link {
  display: block;
  margin: 0 0 24px;
  max-width: 620px;
  text-decoration: none;
  color: inherit;
}

.cxw-games-solution {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(0, 0, 0, .12);
}

.cxw-games-solution-link .cxw-games-meta {
  margin-top: 6px;
  text-decoration: underline;
}

/* Masthead: the crossword mark sits on its own line under "Games", and the
   section closes up against the first answer key rather than leaving
   .secondsection's full 2x--padding gap on both sides of the seam. */
.cxw-games-masthead {
  padding-bottom: 0;
}

.cxw-games-icon {
  display: block;
  width: 44px;
  height: auto;
  margin-top: 18px;
}

.cxw-games-zone-first {
  /* Zone A keeps its own full section padding; only the masthead's
     padding-bottom is removed, so the seam is half the original gap rather
     than a quarter of it. */
  padding-top: calc(var(--padding) * 2);
}