/* RetroTactics — shared styles. Same palette as the app. */
:root {
  --ground: #0A0D0F;
  --card:   #131A1D;
  --edge:   #24312F;
  --ink:    #EDF3F1;
  --body:   #B9C8C6;
  --muted:  #7F9299;
  --pitch:  #4ADA8C;
  --gold:   #F2C14E;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--body);
  font: 17px/1.65 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 720px; margin: 0 auto; padding: 0 24px 80px; }

a { color: var(--pitch); }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--pitch); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { color: var(--ink); text-wrap: balance; margin: 0; line-height: 1.2; }
h1 { font-size: clamp(34px, 6vw, 50px); font-weight: 800; letter-spacing: -.03em; }
h2 { font-size: 24px; font-weight: 700; margin-top: 42px; }
h3 { font-size: 18px; font-weight: 650; margin-top: 28px; }
p  { margin: 14px 0; }
ul { margin: 14px 0; padding-left: 22px; }
li { margin: 7px 0; }

header.site {
  display: flex; align-items: center; gap: 18px;
  padding: 40px 0 8px;
}
header.site img { width: 76px; height: 76px; border-radius: 18px; display: block; }
header.site .tag { color: var(--pitch); font-size: 17px; margin-top: 4px; }

nav.site { display: flex; gap: 20px; padding: 22px 0 34px; border-bottom: 1px solid var(--edge); }
nav.site a { text-decoration: none; font-size: 15px; font-weight: 600; }

.lede { font-size: 20px; color: var(--ink); }

.card {
  background: var(--card); border: 1px solid var(--edge);
  border-radius: 16px; padding: 22px 24px; margin: 18px 0;
}

.stats { display: flex; flex-wrap: wrap; gap: 28px; margin: 30px 0; }
.stat .n {
  display: block; font-size: 38px; font-weight: 800; color: var(--pitch);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1;
}
.stat .l {
  display: block; margin-top: 6px; font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}

.updated { color: var(--muted); font-size: 15px; }

footer.site {
  margin-top: 60px; padding-top: 24px; border-top: 1px solid var(--edge);
  color: var(--muted); font-size: 14px;
}
footer.site a { color: var(--muted); }
/* The credit shouldn't fade into the footer grey — it's the person who made it. */
footer.site strong { color: var(--ink); font-weight: 650; }

@media (max-width: 520px) {
  header.site { flex-direction: column; align-items: flex-start; gap: 12px; }
  .stats { gap: 20px; }
}