/* Maal game pages (game.maal-alajyal.com): one reading column, the logo's teal and mint */
:root { --teal: #6ca295; --teal-dark: #3f7a6c; --mint: #d3ebe8; --leaf: #5bb04a; --ink: #14201d; --muted: #4d6660; --bg: #f5faf9; --card: #fff; --line: #d8e9e5; --link: #3f7a6c; }
@media (prefers-color-scheme: dark) {
  :root { --ink: #e4efec; --muted: #9db8b1; --bg: #0f1a18; --card: #172623; --line: #2b403b; --mint: #1d332e; --link: #8fd0c0; }
}
* { box-sizing: border-box; }
body { margin: 0; font-family: 'Cairo', system-ui, sans-serif; background: var(--bg); color: var(--ink); line-height: 1.85; font-size: 17px; }
header { background: var(--card); border-bottom: 1px solid var(--line); }
header .in, main, footer .in { max-width: 760px; margin: 0 auto; padding: 0 16px; }
header .in { display: flex; align-items: center; gap: 12px; padding-block: 10px; flex-wrap: wrap; }
header img { width: 44px; height: 44px; border-radius: 50%; }
header b { font-size: 1.2rem; }
header nav { margin-inline-start: auto; display: flex; gap: 14px; flex-wrap: wrap; font-size: .95rem; }
a { color: var(--link); }
main { padding-block: 28px 56px; }
h1 { font-size: clamp(1.6rem, 5vw, 2.2rem); line-height: 1.4; margin: 0 0 6px; }
h2 { font-size: 1.25rem; margin: 30px 0 6px; }
.note { color: var(--muted); font-size: .95rem; }
.draft { background: var(--mint); border-radius: 12px; padding: 10px 14px; font-size: .95rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px; margin: 16px 0; }
.card h2 { margin-top: 0; }
ul, ol { padding-inline-start: 22px; }
.table { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { border-bottom: 1px solid var(--line); padding: 8px; text-align: start; vertical-align: top; }
.hero { text-align: center; }
.hero img { width: min(220px, 60vw); border-radius: 50%; }
footer { border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; padding-block: 18px; }