/* Moss & Glow — site styles. Same palette and type as the game, kept deliberately small:
   these pages are read once, on a phone, usually because Play sent someone here. */

:root {
  --cream: #fffaf0;
  --cream-2: #f6efdc;
  --edge: #e2d4b4;
  --sage: #6f9455;
  --sage-dark: #557540;
  --ink: #5b4a33;
  --ink-2: #8a7a5e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 17px/1.6 Nunito, system-ui, -apple-system, Segoe UI, sans-serif;
}

h1, h2, h3 { font-family: Fredoka, Nunito, system-ui, sans-serif; font-weight: 600; line-height: 1.2; color: #4a3c2a; }
h1 { font-size: 2.1rem; margin: 0 0 .6rem; }
h2 { font-size: 1.35rem; margin: 2.2rem 0 .6rem; }
h3 { font-size: 1.1rem; margin: 1.6rem 0 .4rem; }

a { color: var(--sage-dark); }
a:hover { color: var(--sage); }

.wrap { max-width: 44rem; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }

header.site {
  display: flex; align-items: center; gap: .75rem;
  padding: 1.25rem 1.25rem .25rem; max-width: 44rem; margin: 0 auto;
}
header.site img { width: 44px; height: 44px; border-radius: 12px; }
header.site b { font-family: Fredoka, sans-serif; font-size: 1.15rem; color: #4a3c2a; }
header.site a { text-decoration: none; display: flex; align-items: center; gap: .75rem; }

.hero { text-align: center; padding: 2rem 0 1rem; }
.hero img { width: 120px; height: 120px; border-radius: 28px; box-shadow: 0 8px 24px rgba(140, 110, 60, .22); }
.hero p.lead { font-size: 1.1rem; color: var(--ink-2); max-width: 32rem; margin: .75rem auto 1.5rem; }

.btn {
  display: inline-block; padding: .7rem 1.6rem; border-radius: 999px;
  background: var(--sage); color: #fff; text-decoration: none; font-weight: 700;
  box-shadow: 0 4px 0 var(--sage-dark);
}
.btn:hover { color: #fff; filter: brightness(1.05); }
.btn.quiet { background: var(--cream-2); color: var(--ink); box-shadow: 0 4px 0 var(--edge); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin: 2rem 0; }
.card { background: var(--cream-2); border-radius: 18px; padding: 1.1rem 1.25rem; }
.card h3 { margin-top: 0; }
.card p { margin: .35rem 0 0; color: var(--ink-2); font-size: .95rem; }

.note {
  background: var(--cream-2); border-left: 5px solid var(--sage);
  border-radius: 0 12px 12px 0; padding: .9rem 1.1rem; margin: 1.5rem 0;
}

table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .95rem; }
th, td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--edge); vertical-align: top; }
th { color: #4a3c2a; }

small.updated { color: var(--ink-2); }

footer.site {
  border-top: 1px solid var(--edge); margin-top: 3rem; padding: 1.5rem 1.25rem 3rem;
  max-width: 44rem; margin-left: auto; margin-right: auto;
  color: var(--ink-2); font-size: .9rem;
}
footer.site a { margin-right: 1rem; white-space: nowrap; }

@media (max-width: 480px) {
  body { font-size: 16px; }
  h1 { font-size: 1.7rem; }
}

/* Three columns on a phone turn into three words per line, so each row becomes a small block
   with its column name above it. The header row is then redundant. */
@media (max-width: 560px) {
  table, tr, td, th { display: block; }
  table tr:first-child { display: none; }
  table tr { border-bottom: 1px solid var(--edge); padding: .6rem 0; }
  table td { border: 0; padding: .2rem 0 .5rem; }
  table td::before {
    content: attr(data-label); display: block;
    font-weight: 700; font-size: .8rem; letter-spacing: .02em; color: var(--sage-dark);
  }
}