/* Elixirdle site shell — Bright Royal theme */
:root {
  color-scheme: light;
  --bg:#eef4fb; --surface:#ffffff; --surface-2:#f4f7fc;
  --line:#d3deec; --text:#16233a; --muted:#5b6b85;
  --primary:#2f6fdb; --primary-dark:#2257b8; --gold:#f2c63a; --elixir:#b14bdb;
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; line-height:1.55; }
a { color:var(--primary); text-decoration:none; }
a:hover { text-decoration:underline; }

.site-head { display:flex; align-items:center; justify-content:space-between; gap:16px;
  max-width:880px; margin:0 auto; padding:14px 16px; }
.brand { font-weight:800; font-size:1.15rem; color:var(--text); letter-spacing:-.01em; }
.site-nav { display:flex; gap:8px; font-size:.92rem; }
.site-nav a { color:var(--muted); padding:6px 12px; border-radius:999px; }
.site-nav a:hover { background:var(--surface); color:var(--primary); text-decoration:none; }

.page { max-width:760px; margin:0 auto; padding:8px 16px 48px; }
.page h1 { font-size:2rem; margin:10px 0 6px; text-align:center; color:var(--text);
  background:linear-gradient(90deg,var(--primary),var(--elixir)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.intro { color:var(--muted); text-align:center; max-width:620px; margin:0 auto 22px; }
.intro a { font-weight:600; }

.game-mount { margin:0 0 36px; }

.prose { margin:26px 0; }
.prose h2 { font-size:1.25rem; margin:0 0 10px; color:var(--text); }
.prose ol, .prose ul { padding-left:1.2em; }
.prose li { margin:5px 0; }
.c-green, .k-hit { color:var(--primary); font-weight:700; }
.c-yellow { color:#b8860b; font-weight:700; }
.k-miss { color:var(--muted); font-weight:700; }

.faq { margin:30px 0; }
.faq h2 { font-size:1.25rem; margin:0 0 12px; }
.faq details { border:1px solid var(--line); border-radius:10px; padding:10px 14px; margin:8px 0; background:var(--surface); }
.faq summary { cursor:pointer; font-weight:600; }
.faq .faq-a { margin-top:8px; color:var(--muted); }

.related { margin:34px 0 0; }
.related h2 { font-size:1.1rem; }
.related ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.related a { display:block; padding:12px 14px; background:var(--surface); border:1px solid var(--line); border-radius:10px; font-weight:600; }
.related a:hover { border-color:var(--primary); text-decoration:none; }

.site-foot { max-width:760px; margin:0 auto; padding:24px 16px 40px; color:var(--muted); font-size:.8rem; text-align:center; }