/*
 * The guides.
 *
 * Same paper, same hand, same rules as `legal.css` — these pages load that one
 * first and this one on top of it, because a guide and a privacy policy are the
 * same object as far as the browser is concerned: one static file, no script,
 * a real URL, readable with JavaScript switched off and readable by a crawler
 * that never runs any.
 *
 * What is added here is only what a guide needs and a policy does not: a trail
 * back to the game, a way out to the game, and the cards that carry the other
 * guides at the foot of each one.
 */

/* Where you are, and the way back up. */
.crumbs {
  margin: 18px 0 0;
  color: var(--muted);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 13.5px;
  letter-spacing: 0.02em;
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crumbs li + li::before {
  content: "›";
  margin-right: 6px;
  color: var(--rule);
  color: rgba(36, 66, 143, 0.45);
}

/*
 * The way out of the guide and into the game.
 *
 * A guide about a game that does not hand you the game is a page that wasted
 * everybody's time, so this is a real button and it appears twice: once under
 * the opening paragraph, where somebody who already knows what they came for
 * can leave immediately, and once at the foot for everyone who read on.
 */
.play-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 24px 0 28px;
  padding: 18px 20px;
  background: rgba(36, 66, 143, 0.07);
  border: 1px solid var(--rule);
  border-radius: 10px;
}

.play-cta p {
  flex: 1 1 240px;
  margin: 0;
  font-size: 16px;
}

.play-cta a {
  flex: 0 0 auto;
  padding: 12px 22px;
  background: var(--ink);
  border-radius: 8px;
  color: #f4efe2;
  font-family: "Patrick Hand", "Segoe Print", cursive;
  font-size: 22px;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 4px 0 rgba(20, 34, 76, 0.55);
}

.play-cta a:hover {
  background: #1c3574;
}

.play-cta a:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(20, 34, 76, 0.55);
}

/*
 * A self-contained answer, set apart from the prose around it.
 *
 * These exist because of how the page gets read when nobody is reading it: an
 * answer engine lifts a passage, and a passage it can lift whole — a question,
 * then the answer in the first forty words, with nothing load-bearing outside
 * it — is worth more than the same fact spread over three paragraphs.
 */
.answer {
  margin: 0 0 20px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--rule);
  border-radius: 8px;
}

.answer > :last-child {
  margin-bottom: 0;
}

/* The other guides, at the foot of each one. */
.guide-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.guide-cards li {
  margin: 0;
}

.guide-cards a {
  display: block;
  height: 100%;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--rule);
  border-radius: 8px;
  text-decoration: none;
}

.guide-cards a:hover {
  background: rgba(255, 255, 255, 0.85);
}

.guide-cards b {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-family: "Patrick Hand", "Segoe Print", cursive;
  font-size: 21px;
  font-weight: 400;
}

.guide-cards span {
  display: block;
  color: var(--body);
  font-size: 15px;
  line-height: 1.5;
}

/* Numbers off the physics: the pen table wants to be readable, not pretty. */
.spec-table td:not(:first-child),
.spec-table th:not(:first-child) {
  white-space: nowrap;
}

figure {
  margin: 0 0 18px;
}

figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

figcaption {
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
  font-style: italic;
}