/* pages.css: shared stylesheet for the site pages /about/, /rules/, /manual/,
   /log/. Same layout as sector2's pages, in mek's palette (public/style.css):
     bg      #07050f   page background, same as the canvas
     ink     #cfe9f5   body text
     bright  #eaf9ff   headings
     cyan    #22e3ff   links on hover, the accent
     pink    #ff8df5   key names and strong text
   Monospace throughout, titles uppercase and letter-spaced, content framed in
   a bordered glowing box like the title screen and the options menu. */

:root {
  --bg: #07050f;
  --ink: #cfe9f5;
  --bright: #eaf9ff;
  --dim: rgba(207, 233, 245, 0.7);
  --faint: rgba(207, 233, 245, 0.42);
  --cyan: #22e3ff;
  --pink: #ff8df5;
  --line: rgba(34, 227, 255, 0.18);
  --line-strong: rgba(34, 227, 255, 0.4);
  --box: rgba(7, 5, 15, 0.7);
}

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Roboto Mono", "Courier New", monospace;
  font-size: 14px;
  line-height: 1.75;
  max-width: 680px;
  margin: 0 auto;
  padding: 22px 16px 64px;
  padding-left: calc(16px + env(safe-area-inset-left, 0px));
  padding-right: calc(16px + env(safe-area-inset-right, 0px));
}

header { display: flex; }

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

main {
  margin-top: 24px;
  background: var(--box);
  border: 1px solid var(--line-strong);
  box-shadow: 0 0 40px rgba(255, 61, 240, 0.1) inset, 0 0 26px rgba(34, 227, 255, 0.12);
  padding: 28px 28px 32px;
}
@media (max-width: 480px) { main { padding: 22px 18px 26px; } }

h1 {
  margin: 0 0 16px;
  font-weight: 700;
  font-size: clamp(22px, 5vw, 28px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bright);
  text-shadow: 0 0 14px rgba(34, 227, 255, 0.45);
}

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

h3 {
  margin: 22px 0 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pink);
}

p { color: var(--dim); }
p + p { margin-top: 12px; }
p strong, li strong { color: var(--pink); font-weight: 700; }

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

ul, ol { margin: 10px 0 0 1.4em; color: var(--dim); }
li + li { margin-top: 6px; }
ul + p, ol + p { margin-top: 14px; } /* the rules page runs prose after its lists */

/* key names on the manual page */
kbd {
  font-family: inherit;
  font-size: 12px;
  color: var(--bright);
  border: 1px solid var(--line-strong);
  padding: 1px 6px;
  white-space: nowrap;
}

/* button row on the about page, styled like the title screen buttons */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}
.btn {
  display: inline-block;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  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: 10px 18px;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.btn:hover, .btn:focus-visible { border-color: var(--pink); color: var(--pink); outline: none; }
.btn.primary { border-color: rgba(34, 227, 255, 0.8); color: var(--bright); box-shadow: 0 0 14px rgba(34, 227, 255, 0.2); }

.fine {
  margin-top: 44px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--faint);
}

/* Pictures never exceed the column they sit in (a 900px wide crop with a
   width attribute would otherwise size the column to itself). */
main img { max-width: 100%; height: auto; }