/* Shared shell for the static content pages: /contact, /terms,
   /privacy-policy.

   about.html and how-to-play.html still carry their own inline copy of these
   rules. Folding them in here too is worth doing, but those two are the
   strongest pages on the site and were left alone rather than reworked on the
   way past. Palette mirrors lib/theme/themedata.dart. */

@font-face {
  font-family: "Doubled Sans";
  src: url("/assets/assets/fonts/notosans/NotoSans-Regular.ttf") format("truetype");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Doubled Sans";
  src: url("/assets/assets/fonts/notosans/NotoSans-Bold.ttf") format("truetype");
  font-weight: 700; font-display: swap;
}
/* Black, not ExtraBold: NotoSans-ExtraBold.ttf sits in assets/ but is not
   declared under `fonts:` in pubspec.yaml, so `flutter build web` never copies
   it into the bundle and the face 404s in production. Black is the heaviest
   weight the app actually ships. */
@font-face {
  font-family: "Doubled Sans";
  src: url("/assets/assets/fonts/notosans/NotoSans-Black.ttf") format("truetype");
  font-weight: 800; font-display: swap;
}

:root {
  --ice: #F1F8FF; --card: #FFFFFF; --ink: #102150; --muted: #40548A;
  --blue: #2F80ED; --cobalt: #2446D8; --deep: #153A9B;
  --gold: #FFD900; --border: #D3E4F7;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ice: #1E1F22; --card: #313338; --ink: #EDF4FF; --muted: #AFC2E2;
    --blue: #59C7FC; --cobalt: #59C7FC; --deep: #8FD9FF;
    --gold: #FFD900; --border: #43474E;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--ice); color: var(--ink);
  font-family: "Doubled Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px; line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}
.wrap { max-width: 46rem; margin: 0 auto; padding: 0 1.25rem 4rem; }

header.bar {
  border-bottom: 1px solid var(--border); background: var(--card);
  margin-bottom: 2.5rem;
}
header.bar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-top: .9rem; padding-bottom: .9rem;
}
.brand {
  font-weight: 800; font-size: 1.25rem; color: var(--cobalt);
  text-decoration: none; letter-spacing: -.01em;
}
nav.bar-nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
nav.bar-nav a { color: var(--muted); text-decoration: none; font-weight: 700; font-size: .95rem; }
nav.bar-nav a:hover { color: var(--cobalt); }

h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .75rem; font-weight: 800; }
h2 { font-size: clamp(1.3rem, 3.5vw, 1.6rem); line-height: 1.25; margin: 2.75rem 0 .75rem; font-weight: 800; }
h3 { font-size: 1.1rem; margin: 1.75rem 0 .5rem; font-weight: 700; }
p { margin: 0 0 1rem; }
.lede { font-size: 1.12rem; color: var(--muted); margin-bottom: 2rem; }
a { color: var(--cobalt); }
a:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

ul, ol { padding-left: 1.25rem; }
li { margin-bottom: .5rem; }

.card {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 1.25rem 1.25rem .5rem; margin: 1.5rem 0;
}
.updated { color: var(--muted); font-size: .95rem; }

.cta {
  display: inline-block; background: var(--cobalt); color: #FFFFFF;
  font-weight: 800; font-size: 1.05rem; text-decoration: none;
  padding: .85rem 1.75rem; border-radius: 999px;
  transition: background 150ms ease;
}
.cta:hover { background: var(--deep); }
.cta-row { margin: 2.5rem 0 1rem; }

footer.site {
  border-top: 1px solid var(--border); margin-top: 3.5rem; padding-top: 1.5rem;
  color: var(--muted); font-size: .92rem;
}
footer.site nav { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-bottom: .75rem; padding-left: 0; }
footer.site a { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}