/* pages.css - shared stylesheet for the site pages (Task 81, restyled in
   Task 82 follow-up): /about/, /rules/, /manual/, /log/.
   Styled to match the in-game menus (js/ui/menu.js), not the arena palette:
     bg      #0b0e0c  page background (same as the game canvas clear)
     ink     #d8e2dc  main text
     dim     #9db4c0  secondary text
     hover   #e0fbfc  hover/focus highlight
     borders rgba(216, 226, 220, ...) thin 1px lines
   Font is 'Courier New' monospace, titles uppercase and letter-spaced,
   buttons outlined, content framed in a bordered box like the menu overlay.
   If the menu style in js/ui/menu.js ever changes, update these to match. */

:root {
  --bg: #0b0e0c;
  --ink: #d8e2dc;
  --dim: #9db4c0;
  --hover: #e0fbfc;
  --faint: rgba(216, 226, 220, 0.45);
  --line: rgba(216, 226, 220, 0.25);
  --line-strong: rgba(216, 226, 220, 0.4);
  --box: rgba(11, 14, 12, 0.9);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Courier New', monospace;
  font-size: 15px;
  line-height: 1.7;
  max-width: 680px;
  margin: 0 auto;
  padding: 22px 16px 64px;
}

header { display: flex; }

.back {
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--dim);
  text-decoration: none;
  white-space: nowrap;
}
.back:hover, .back:focus-visible { color: var(--hover); outline: none; }

/* The content sits in a bordered box like the in-game menu overlay. */
main {
  margin-top: 24px;
  background: var(--box);
  border: 1px solid var(--line);
  padding: 28px 28px 32px;
}

h1 {
  margin: 0 0 16px;
  font-weight: 700;
  font-size: clamp(22px, 5vw, 28px);
  letter-spacing: 3px;
  text-transform: uppercase;
}

h2 {
  margin: 36px 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
}

h3 {
  margin: 22px 0 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink);
}

p { color: var(--dim); font-size: 14px; }
p + p { margin-top: 12px; }
p strong { color: var(--ink); font-weight: 700; }

a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
a:hover, a:focus-visible { color: var(--hover); border-bottom-color: var(--hover); outline: none; }
.back { border-bottom: none; }

ul, ol { margin: 10px 0 0 1.4em; color: var(--dim); font-size: 14px; }
li + li { margin-top: 5px; }
li strong { color: var(--ink); font-weight: 700; }

/* Inline key names on the manual page (WASD, debug keys). */
kbd {
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  padding: 1px 6px;
  white-space: nowrap;
}

/* Button row (about page: donate + contact), styled like the in-game
   .action buttons: outlined, monospace, letter-spaced, hover to #e0fbfc. */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.btn {
  display: inline-block;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: none;
  border: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  padding: 9px 18px;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.btn:hover, .btn:focus-visible {
  border-color: var(--hover);
  color: var(--hover);
  outline: none;
}
/* .primary kept as a class hook; in the game style every button is the same
   outlined action button, primary just gets the brighter border up front. */
.btn.primary { border-color: var(--ink); }

/* Fine print (about page donations line). */
.fine {
  margin-top: 44px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--faint);
}

/* About page: the Add to Home Screen tip, five phone crops in a two-column
   grid (one column on narrow phones), the last one full width. */
hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 44px 0 0;
}
.steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 18px;
}
.steps figure { margin: 0; }
.steps figure.wide { grid-column: 1 / -1; }
.steps img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
}
.steps figcaption {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--dim);
}
.steps figcaption strong { color: var(--ink); font-weight: 700; }
@media (max-width: 420px) { .steps { grid-template-columns: 1fr; } }