/* Text pages (about / how to play). The game page uses style.css. Tokens: tokens.css */
html { background: var(--navy-900); }
body {
  margin: 0; color: var(--ink); font: 400 17px/1.6 var(--font-ui);
  background: radial-gradient(ellipse at top, #0e3a5c, var(--navy-900) 60%) no-repeat var(--navy-900);
}
a { color: var(--gold); text-underline-offset: 3px; }
b { font-weight: 600; }

.top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--gap);
  max-width: 760px; margin: 0 auto; box-sizing: border-box;
  padding: calc(var(--safe-t) + 14px) calc(var(--safe-r) + 16px) 6px calc(var(--safe-l) + 16px);
}
.brand { font: 400 40px/1 var(--font-display); color: var(--gold); text-decoration: none; text-shadow: 0 2px 0 var(--gold-deep); }

.cta {
  display: inline-block; padding: 8px 18px; border-radius: 999px; text-decoration: none;
  font-weight: 700; color: #3a2506; background: linear-gradient(180deg, #ffd666, var(--gold));
  box-shadow: 0 3px 0 var(--gold-deep);
}
.cta.big { padding: 13px 28px; font-size: 19px; box-shadow: 0 4px 0 var(--gold-deep), var(--shadow); }
.cta:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--gold-deep); }

main { max-width: 760px; margin: 0 auto; padding: 8px calc(var(--safe-r) + 16px) 24px calc(var(--safe-l) + 16px); box-sizing: border-box; }
.crumbs { font-size: 13px; color: var(--ink-dim); }
.crumbs a { color: var(--ink-dim); }
h1 { margin: 6px 0 10px; font: 400 48px/1.05 var(--font-display); color: var(--gold); }
h2 { margin: 34px 0 8px; font-size: 24px; font-weight: 600; color: var(--gold); }
h3 { margin: 0 0 6px; font-size: 18px; font-weight: 600; }
.lead { font-size: 19px; }
ul, ol { padding-left: 1.3em; }
li { margin: 4px 0; }

.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--gap); }
.box { padding: 14px 18px; border-radius: var(--r-m); background: var(--panel); border: 1px solid var(--panel-edge); }
.box ul { margin: 0; }

.faq dt { margin-top: 16px; font-weight: 600; }
.faq dd { margin: 4px 0 0; color: var(--ink-dim); }
.end { margin-top: 36px; text-align: center; }

.foot {
  max-width: 760px; margin: 0 auto; box-sizing: border-box; text-align: center;
  padding: 16px 16px calc(var(--safe-b) + 24px); font-size: 13px; color: var(--ink-dim);
  border-top: 1px solid rgba(253, 246, 227, .12);
}
.foot a { color: var(--ink-dim); }

@media (max-width: 420px) {
  .brand { font-size: 34px; }
  h1 { font-size: 40px; }
  body { font-size: 16px; }
}