/* Fredoka and Nunito, served from this site (SIL Open Font License, see fonts/FONT-LICENSES.txt).
   Variable fonts trimmed to Latin and the weights used. */
@font-face { font-family: "Fredoka"; src: url("fonts/fredoka.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/nunito.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }

/* Shared look for the app's web pages: the cream paper and ink of the game. */
:root {
  --bg: #fff4e6; --paper: #ffffff; --ink: #2b2340; --muted: #5e5573; --line: #2b2340; --accent: #d94545;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #1d1930; --paper: #2a2443; --ink: #f7efe6; --muted: #cbc2dc; --line: #ede4f7; --accent: #ff8a8a; color-scheme: dark; }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 18px/1.6 "Nunito", system-ui, -apple-system, sans-serif;
  padding: 32px max(16px, env(safe-area-inset-right)) 48px max(16px, env(safe-area-inset-left));
}
main { max-width: 680px; margin: 0 auto; background: var(--paper); border: 3px solid var(--line); border-radius: 22px; box-shadow: 5px 5px 0 var(--line); padding: 28px clamp(18px, 5vw, 40px); }
h1, h2 { font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; line-height: 1.2; text-wrap: balance; }
h1 { font-size: 2.1rem; margin: 0 0 4px; }
h1 span { color: var(--accent); }
h2 { font-size: 1.3rem; margin: 28px 0 6px; }
p, li { max-width: 62ch; }
.updated { color: var(--muted); margin-top: 0; }
a { color: var(--accent); font-weight: 700; }
ul { padding-left: 1.2em; }

/* WebP screenshots with a JPEG fallback: the picture adds no box, so layout rules target the img. */
picture { display: contents; }