/* Content pages (how to play, community, about) and the home intro. Builds on style.css. */
.site-nav { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.site-nav a { font: 700 16px/1 var(--display); color: var(--ink); text-decoration: none; padding: 10px 12px; border-radius: 12px; }
.site-nav a:hover, .site-nav a[aria-current="page"] { background: var(--sunken); }
.site-nav a.play { background: var(--wood); color: #FFF6E3; border: 2px solid var(--wood-dark); box-shadow: 0 3px 0 var(--wood-dark); text-shadow: 0 2px 0 rgba(70,40,20,.4); }
.prose { display: flex; flex-direction: column; gap: 14px; max-width: 70ch; }
.prose p, .prose li { font-size: 17.5px; }
.prose h2 { font: 700 30px/1.15 var(--display); margin-top: 10px; }
.prose h3 { font: 700 21px/1.2 var(--display); margin-top: 6px; }
.prose ul, .prose ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.prose a, .intro a:not(.btn) { color: var(--sage-dark); font-weight: 800; text-decoration: underline wavy var(--sage) 2px; text-underline-offset: 3px; }
:root[data-time="night"] .prose a, :root[data-time="night"] .intro a:not(.btn) { color: #C8DDA8; }
.page-hero { display: flex; flex-direction: column; gap: 10px; padding-block: 10px 6px; }
.page-hero .kicker { font: 700 26px/1 var(--hand); color: var(--sage-dark); }
:root[data-time="night"] .page-hero .kicker { color: #C8DDA8; }
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pillar { background: var(--card); border: 2px solid var(--stitch); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.pillar h3 { font: 700 21px/1.2 var(--display); margin: 0; }
.pillar .ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--sage); border: 2px solid var(--sage-dark); }
.pillar .ico svg { width: 26px; height: 26px; }
.steps4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: st; }
.steps4 li { counter-increment: st; background: var(--card); border: 2px solid var(--stitch); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.steps4 li::before { content: counter(st); width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font: 700 18px/1 var(--display); color: #FFF6E3; background: var(--wood); border: 2px solid var(--wood-dark); }
.steps4 b { font: 700 18px/1.2 var(--display); }
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq details { background: var(--card); border: 2px solid var(--stitch); border-radius: 16px; padding: 14px 18px; }
.faq summary { font: 700 18px/1.3 var(--display); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::after { content: '+'; font-size: 22px; line-height: 1; color: var(--wood-dark); }
.faq details[open] summary::after { content: '–'; }
.faq summary::-webkit-details-marker { display: none; }
.faq details p { margin-top: 10px; font-size: 16.5px; }
.intro { display: flex; flex-direction: column; gap: 34px; padding-top: 30px; margin-top: 10px; border-top: 2px dashed var(--stitch); }
.intro h2 { font: 700 clamp(28px, 4.5vw, 38px)/1.1 var(--display); text-wrap: balance; }
.intro .sub { color: var(--ink-soft); font-size: 18px; max-width: 60ch; }
.in-game .intro, .in-game .site-footer { display: none; }
.cta-band { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; }
.site-footer { margin-top: 40px; padding-block: 22px 8px; border-top: 2px dashed var(--stitch); display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; align-items: center; color: var(--ink-soft); font-size: 15px; max-width: 1100px; width: 100%; margin-inline: auto; }
.site-footer nav { display: flex; gap: 16px; flex-wrap: wrap; }
.site-footer a { color: var(--ink); font-weight: 800; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.score-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.score-table td, .score-table th { text-align: left; padding: 10px 8px; border-top: 2px dashed var(--stitch); }
.score-table th { font: 800 12px/1.2 var(--body); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); border-top: 0; }
.score-table td:last-child { font: 700 18px/1 var(--display); }
/* Community board */
.idea-form { display: grid; gap: 12px; }
.idea-form textarea { width: 100%; min-height: 96px; resize: vertical; border: 2px solid var(--stitch); border-radius: 14px; padding: 12px 14px; font: 700 17px/1.4 var(--body); background: var(--sunken); color: var(--ink); }
.idea-form textarea:focus { outline: none; border-color: var(--sage-dark); background: var(--card); }
.ideas { display: flex; flex-direction: column; gap: 12px; }
.idea { display: grid; grid-template-columns: 64px 1fr; gap: 14px; background: var(--card); border: 2px solid var(--stitch); border-radius: 16px; padding: 14px; align-items: start; }
.vote-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 2px solid var(--wood-dark); border-radius: 14px; background: #EFE3CB; color: #3E2C1F; padding: 8px 0; box-shadow: 0 3px 0 var(--wood-dark); font: 700 18px/1 var(--display); }
.vote-btn .arrow { font-size: 16px; }
.vote-btn[aria-pressed="true"] { background: var(--honey); }
.vote-btn:active { transform: translateY(3px); box-shadow: none; }
.idea-text { font-size: 17px; overflow-wrap: anywhere; }
.idea-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; font-size: 14px; color: var(--ink-soft); }
.status { font: 800 11px/1 var(--body); text-transform: uppercase; letter-spacing: .08em; padding: 5px 8px; border-radius: 999px; background: var(--sunken); border: 1.5px solid var(--stitch); color: var(--ink); }
.status.planned { background: #FFF0C9; border-color: #C9962F; }
.status.in-progress { background: #DDEBF7; border-color: #6A8FB5; color: #23384d; }
.status.done { background: #D9EBCB; border-color: var(--sage-dark); color: #22321C; }
.status.not-now { opacity: .7; }
.reply { margin-top: 8px; font: 700 20px/1.2 var(--hand); color: var(--sage-dark); }
.mod { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.mod select, .mod button { font: 700 13px/1 var(--body); padding: 6px 8px; border-radius: 8px; border: 1.5px solid var(--stitch); background: var(--sunken); color: var(--ink); }
.promise { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 820px) {
  .pillars, .steps4, .promise { grid-template-columns: 1fr; }
  .site-nav a:not(.play) { padding: 8px 8px; font-size: 15px; }
}