/* pages.css - the shared look of the plain information pages (About, How to play, Contact, Privacy).
   WHY ITS OWN FILE: these pages are mostly TEXT on purpose. Google's AdSense review rejects sites that are only a game
   canvas, so each of these needs to read like a normal page; one stylesheet keeps them consistent and easy to restyle. */
body { font: 16px/1.6 system-ui, sans-serif; max-width: 680px; margin: 0 auto; padding: 24px 16px 48px; background: #0b1020; color: #e8ecff; }
h1 { font-size: 28px; margin: 8px 0 16px; }
h2 { font-size: 20px; margin: 28px 0 8px; color: #5be7ff; }
p, li { color: #d5dbf5; }
a { color: #5be7ff; }
nav.top { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; padding-bottom: 12px; border-bottom: 1px solid #25305a; }
footer { margin-top: 40px; font-size: 13px; color: #9aa6d6; }

/* SITE HEADER: the same logo, stacked Lock / Spark wordmark and player corner as the home page (hub/public/index.html), so
   pages that belong to the player's account (Gems) feel like part of the app. The player corner (#me) is filled in by the
   page, and /pa/profile.js swaps #whoName for the avatar button. Colours are literal here because this sheet has no
   :root variables. */
header.site { display: flex; align-items: center; gap: 12px; padding: 0 0 12px; border-bottom: 1px solid #25305a; margin-bottom: 8px; }
header.site .brand { flex: 1; font-weight: 800; font-size: 18px; }
header.site .brand a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; }
header.site .brand img { width: 26px; height: 26px; margin-right: 6px; }
header.site .me { font-size: 13px; color: #8d99c7; text-align: right; }
.chip { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 99px; background: linear-gradient(90deg, #8b5cff, #5be7ff); color: #05060d; font-weight: 700; margin-left: 4px; }
.wm { display: inline-block; position: relative; vertical-align: middle; font-weight: 900; font-size: 15px; line-height: .9; letter-spacing: .14em; text-transform: uppercase; text-align: left; padding-right: .9em; margin-right: 6px; }
.wm i { display: block; font-style: normal; }
.wm .w1 { color: #e8ecff; text-shadow: 0 0 8px rgba(91,231,255,.45); }
.wm .w2 { color: #ffd23f; text-shadow: 0 0 8px rgba(255,210,63,.4); }
.wm .am { position: absolute; left: 100%; top: 50%; transform: translate(-62%,-54%); font-size: 1.9em; line-height: 1; letter-spacing: 0; color: #5be7ff; font-style: normal; text-shadow: -2px 0 #0b1020, 2px 0 #0b1020, 0 -2px #0b1020, 0 2px #0b1020, 0 0 10px rgba(91,231,255,.7); }
footer.site { text-align: center; color: #8d99c7; font-size: 12px; }
footer.site a { color: #8d99c7; }

/* GUIDES (hub/public/guides/*.html, generated by hub/tools/make-guides.py): breadcrumb line above the article title,
   and comfortable spacing for the longer reading pages. */
.crumb { font-size: 13px; color: #9aa6d6; margin: 14px 0 0; }
article h1 { margin-top: 4px; }
article ol, article ul { padding-left: 22px; }
article li { margin: 6px 0; }