/* Shared styles for Molario.io's information pages (how to play, about, glossary, terms, privacy, contact) */
:root { --ink: #24324a; --muted: #6b7a92; --line: #e3e9f1; --soft: #f6f8fb; --blue: #2f8cff; --blue-dark: #1b62c4; --red: #ff4f5e; --green: #3ddc84; --green-dark: #22a862; }
* { box-sizing: border-box; }
body { margin: 0; background: #e9eef4; color: var(--ink); font: 17px/1.65 'Baloo 2', system-ui, -apple-system, sans-serif; }
a { color: var(--blue); font-weight: 700; }
.site-head { background: #fff; box-shadow: 0 3px 0 rgba(36,50,74,.08); position: sticky; top: 0; z-index: 5; }
.site-head .in { max-width: 920px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 6px; font-size: 26px; font-weight: 800; color: var(--blue); text-decoration: none; text-shadow: 0 3px 0 var(--blue-dark); }
.brand span { color: var(--red); text-shadow: 0 3px 0 #c42c3a; }
.brand img { width: 30px; height: 30px; }
.site-nav { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.site-nav a { color: var(--muted); text-decoration: none; padding: 3px 10px; border-radius: 10px; font-size: 15px; }
.site-nav a:hover, .site-nav a[aria-current="page"] { background: var(--soft); color: var(--blue); }
.play-cta { display: inline-block; background: var(--green); color: #fff !important; text-decoration: none; font-weight: 800; border-radius: 14px; padding: 6px 16px 4px; box-shadow: 0 4px 0 var(--green-dark); }
main.page { max-width: 920px; margin: 18px auto 0; padding: 0 16px; }
.card { background: #fff; border-radius: 22px; padding: 22px 26px; margin-bottom: 16px; box-shadow: 0 5px 0 rgba(36,50,74,.08); }
h1 { font-size: 38px; line-height: 1.1; margin: 0 0 6px; }
h2 { font-size: 24px; margin: 6px 0 8px; }
h3 { font-size: 19px; margin: 16px 0 4px; }
p, li { color: #34425a; }
.lead { font-size: 19px; color: var(--muted); margin-top: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.tile { background: var(--soft); border-radius: 16px; padding: 12px 14px; }
.tile h3 { margin-top: 0; }
.tile p { margin: 4px 0 0; font-size: 15px; }
.kbd { display: inline-block; font-family: ui-monospace, Menlo, monospace; font-size: 14px; background: var(--soft); border: 2px solid var(--line); border-bottom-width: 3px; border-radius: 7px; padding: 0 6px; }
dl.glossary dt { font-weight: 800; font-size: 19px; margin-top: 14px; }
dl.glossary dd { margin: 2px 0 0; color: #34425a; }
dl.glossary dd em { color: var(--muted); }
.site-foot { max-width: 920px; margin: 8px auto 32px; padding: 0 16px; color: var(--muted); font-size: 14px; display: flex; gap: 14px; flex-wrap: wrap; }
.site-foot a { color: var(--muted); font-weight: 700; }
@media (max-width: 600px) { h1 { font-size: 30px; } .card { padding: 18px; } .site-nav { margin-left: 0; } }