/* The About page: plain, readable, scrollable, in the game's colours. */
:root { --ink: #3b2d4f; --ink-soft: #6a5a80; --sun: #ffd23f; --sky: #7ec8f2; }
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--ink);
  font: 500 18px/1.55 ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", "Arial Rounded MT Bold", system-ui, sans-serif;
  background: linear-gradient(180deg, #8fd3fb, #d8f4ff 40%, #f2fbe9);
  background-attachment: fixed;
}
main { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; }
header { text-align: center; padding: 16px 0 8px; }
.logo { display: inline-block; text-decoration: none; }
.logo img { width: 72px; height: 72px; vertical-align: middle; }
h1 { margin: 12px 0 4px; font-size: clamp(30px, 6vw, 46px); line-height: 1.15; }
.lead { font-size: 20px; color: var(--ink-soft); margin: 0 0 20px; }
.play {
  display: inline-block; margin: 8px 0 4px; padding: 14px 30px; border-radius: 999px;
  background: #3ccf6e; color: #fff; font-weight: 800; font-size: 22px; text-decoration: none;
  border: 4px solid var(--ink); box-shadow: 0 6px 0 #22994e, 0 8px 0 var(--ink);
}
.play:active { transform: translateY(4px); box-shadow: 0 2px 0 #22994e, 0 4px 0 var(--ink); }
section {
  background: #fff; border: 4px solid var(--ink); border-radius: 22px;
  padding: 18px 22px; margin: 18px 0; box-shadow: 0 6px 0 rgba(59, 45, 79, .2);
}
h2 { margin: 0 0 8px; font-size: 26px; }
h3 { margin: 14px 0 2px; font-size: 20px; }
p { margin: 6px 0; }
ul { margin: 6px 0; padding-left: 22px; }
li { margin: 4px 0; }
dt { font-weight: 800; margin-top: 12px; }
dd { margin: 2px 0 0; }
a { color: #1f6fb2; }
footer { text-align: center; color: var(--ink-soft); font-size: 15px; }
.lang-link { margin: 10px 0 0; font-size: 16px; }