/* Blockbay legal & support pages — shared styling.
   Mirrors the app's cosmic dark identity, with a light mode so the pages
   follow the reader's system setting the way the game follows it. */

:root {
  --bg: #0b1024;
  --bg-top: #241c5e;
  --panel: #141a3a;
  --border: rgba(255, 255, 255, 0.1);
  --text: #eef1ff;
  --muted: #8b93c4;
  --violet: #a389ff;
  --cyan: #4fd1ff;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f3f5fb;
    --bg-top: #e4e8f8;
    --panel: #ffffff;
    --border: rgba(26, 31, 61, 0.1);
    --text: #1a1f3d;
    --muted: #6b7299;
    --violet: #6a3fe6;
    --cyan: #1b8fe0;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 20px 80px;
  background: linear-gradient(160deg, var(--bg-top), var(--bg) 60%);
  background-attachment: fixed;
  min-height: 100vh;
  color: var(--text);
  font: 16px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

.wrap { max-width: 720px; margin: 0 auto; }

header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 40px 0 8px;
}

/* The block-B mark, rebuilt in CSS so the pages carry no image payload. */
.mark {
  position: relative;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
}
.mark i {
  position: absolute;
  display: block;
  background: linear-gradient(135deg, var(--violet), var(--cyan));
}
.mark .spine { left: 2px; top: 4px; width: 11px; height: 44px; border-radius: 4px; }
.mark .up { left: 15px; top: 4px; width: 26px; height: 20px; border-radius: 3px 10px 10px 3px; }
.mark .low { left: 15px; top: 26px; width: 31px; height: 22px; border-radius: 3px 11px 11px 3px; }

h1 { font-size: 30px; margin: 0; letter-spacing: -0.5px; }
header p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }

h2 {
  font-size: 20px;
  margin: 34px 0 10px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
h2:first-of-type { border-top: 0; padding-top: 0; }

a { color: var(--cyan); }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 22px;
  margin: 22px 0;
}

.lede { font-size: 18px; color: var(--text); }
.updated { color: var(--muted); font-size: 14px; }

ul { padding-left: 22px; }
li { margin: 6px 0; }

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 10px;
}
nav a {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
nav a:hover { border-color: var(--violet); }

footer {
  margin-top: 46px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 14px;
}