/* content.css — the PUBLIC CONTENT PAGES: /how-to-play, /maps, /strategy, /faq.
 *
 * These are the only pages a search engine can read without running the game, so they are plain documents: no
 * script, no app shell, one stylesheet. Renamed from privacy.css, which five pages had come to share — a file named
 * after one of its five readers is how a stylesheet ends up edited for the wrong page.
 *
 * Deliberately NOT the game's dark palette. A visitor arriving from a search result is reading, not playing, and
 * this sheet has to stay legible with no JS and no webfont: the game's typeface is a preloaded woff2 the app shell
 * fetches, and pulling it in here would put a font download in front of the text for no gain. */
body { font: 16px/1.7 system-ui, sans-serif; background: #f4f7f7; color: #19343d; margin: 0 }
main { max-width: 850px; margin: 48px auto; padding: 24px }
a { color: #087f78 }
.panel { padding: 32px; background: white; border: 1px solid #dbe5e7; border-radius: 12px }
h1 { line-height: 1.2 }
h2 { margin-top: 32px; line-height: 1.25 }
h3 { margin-top: 24px; margin-bottom: 4px; line-height: 1.3 }
.eyebrow { font-size: 12px; letter-spacing: 1px }
.lede { font-size: 18px; color: #2c4a54 }
ul, ol { padding-left: 22px }
li { margin: 6px 0 }
dt { font-weight: 600; margin-top: 18px }
dd { margin: 4px 0 0; padding-left: 0 }

/* The map figures. Each map's terrain mask is the real shipped PNG, so the page can never show a board that is not
   the one people play on — and it is the same file the game already serves, i.e. no new asset to licence. */
figure { margin: 18px 0 0 }
figure img { display: block; width: 100%; height: auto; border-radius: 8px; background: #dbe5e7 }
figcaption { font-size: 14px; color: #4a6b75; margin-top: 6px }

/* Facts table (map sizes). Scrolls rather than forcing the page sideways on a phone. */
.facts { overflow-x: auto; margin-top: 18px }
table { border-collapse: collapse; width: 100%; font-size: 15px }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid #dbe5e7; white-space: nowrap }
th { color: #4a6b75; font-size: 13px; letter-spacing: .04em; text-transform: uppercase }

/* One crawlable link row on every content page: the pages are otherwise leaves, and a leaf with no outbound link is
   a page a crawler reaches once and a reader leaves from. */
.pagenav { margin: 0 0 18px; font-size: 15px }
.pagefoot { margin-top: 36px; padding-top: 18px; border-top: 1px solid #dbe5e7; font-size: 15px }
.cta { display: inline-block; margin-top: 8px; padding: 11px 20px; border-radius: 8px;
  background: #087f78; color: white; font-weight: 600; text-decoration: none }

@media (max-width: 600px) {
  main { margin: 0; padding: 16px }
  .panel { padding: 20px }
  th, td { white-space: normal }
}

/* Shared navigation for the written guides, reached from the lobby FAQ link. */
.guide-nav { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.guide-nav a { padding:8px 12px; border:1px solid #dbe5e7; border-radius:6px; text-decoration:none; }
.guide-nav a:hover { background:#edf5f4; }
.guide-nav a[aria-current="page"] { background:#087f78; color:white; border-color:#087f78; }
a:focus-visible { outline:2px solid #087f78; outline-offset:3px; }

/* FAQ uses native disclosure controls: readable and operable without JavaScript. */
.faq-header { padding: 8px 0 20px; }
.faq-header h1 { font-size: clamp(32px, 6vw, 48px); margin: 16px 0 8px; letter-spacing: -.04em; }
.faq-header .lede { margin: 0; }
.faq-beta { display: inline-block; margin-left: 8px; padding: 2px 8px; border: 1px solid #bca784; border-radius: 4px; color: #695735; }
.faq-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 20px 0; border-block: 1px solid #dbe5e7; }
.faq-topics a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #f4f7f7; border-radius: 6px; text-decoration: none; font-weight: 600; }
.faq-topics a:hover { background: #e6f1ef; }
.faq-topics span, .faq-section h2 span { color: #627980; font-size: 12px; font-weight: 500; letter-spacing: .06em; }
.faq-section { margin-top: 40px; }
.faq-section h2 { display: flex; align-items: center; gap: 12px; scroll-margin-top: 24px; }
.faq-intro { color: #4a6b75; margin: -8px 0 18px; }
.faq-section details { border-bottom: 1px solid #dbe5e7; }
.faq-section summary { padding: 17px 12px; cursor: pointer; font-weight: 600; border-radius: 6px; }
.faq-section summary:hover, .faq-section details[open] summary { background: #f0f6f5; }
.faq-section summary:focus-visible { outline: 2px solid #087f78; outline-offset: 2px; }
.faq-answer { padding: 0 12px 12px 28px; overflow-wrap: anywhere; }
.faq-answer p { margin: 14px 0; }
.faq-answer caption { text-align: left; font-size: 13px; color: #4a6b75; padding-bottom: 8px; }
@media (max-width: 600px) {
  .faq-topics { grid-template-columns: 1fr; }
  .faq-answer { padding-left: 12px; }
  .faq-section summary { padding-inline: 8px; }
}
@media print {
  .faq-page details::details-content { display: block; content-visibility: visible; }
}