/* Static info pages (About, How to Play, Privacy, Terms, Contact, Updates): readable text
   pages that share the game's look. Plain HTML, so they load fast and need no JavaScript. */
:root {
  --bg: #14130f; --panel: #1c1a15; --line: #3a362d; --text: #e8e2d0; --dim: #a39a86; --accent: #f2b43c; --link: #7fc4ff;
  --head: 'Rajdhani', 'Segoe UI', sans-serif; --mono: 'Share Tech Mono', ui-monospace, Consolas, monospace;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.65 'Segoe UI', system-ui, -apple-system, sans-serif; }
a { color: var(--link); }
a:hover { color: var(--accent); }
.site-head { position: sticky; top: 0; z-index: 2; background: rgba(20,19,15,.96); border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
.brand { font: 700 24px var(--head); letter-spacing: 0.1em; color: var(--text); text-decoration: none; }
.brand span { color: var(--accent); }
.site-head nav { display: flex; gap: 14px; flex-wrap: wrap; flex: 1; }
.site-head nav a { color: var(--dim); text-decoration: none; font: 600 15px var(--head); letter-spacing: 0.1em; text-transform: uppercase; }
.site-head nav a:hover, .site-head nav a[aria-current] { color: var(--accent); }
@media (max-width: 640px) {
  .site-head .wrap { gap: 8px 14px; }
  .brand { flex: 1; }
  .site-head nav { order: 3; flex-basis: 100%; gap: 12px; }
}
.play { background: var(--accent); color: #16130c !important; padding: 7px 16px; font: 700 15px var(--head); letter-spacing: 0.14em; text-decoration: none; }
.wrap { max-width: 860px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
main { padding-top: 28px; padding-bottom: 40px; }
h1 { font: 700 clamp(30px, 6vw, 44px)/1.1 var(--head); letter-spacing: 0.06em; margin: 0 0 8px; }
h2 { font: 700 26px/1.2 var(--head); letter-spacing: 0.06em; margin: 34px 0 10px; color: var(--accent); }
h3 { font: 700 20px/1.25 var(--head); letter-spacing: 0.05em; margin: 22px 0 6px; }
.lead { font-size: 19px; color: var(--dim); margin-top: 0; }
.updated { font: 13px var(--mono); color: var(--dim); }
table { width: 100%; border-collapse: collapse; margin: 10px 0 18px; font-size: 15px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font: 700 14px var(--head); letter-spacing: 0.08em; color: var(--dim); text-transform: uppercase; }
.table-scroll { overflow-x: auto; }
kbd { font: 13px var(--mono); padding: 1px 6px; border: 1px solid var(--line); border-radius: 3px; color: var(--accent); white-space: nowrap; }
.card { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent); padding: 12px 16px; margin: 14px 0; }
.site-foot { border-top: 1px solid var(--line); padding: 22px 0 30px; color: var(--dim); font-size: 14px; }
.site-foot nav { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.site-foot a { color: var(--dim); }