/* Shared styling for the static content pages (guide, tips, modes, arenas, faq, about).
   These are plain server-delivered HTML so search + AdSense crawlers read real text
   without running the WebGL bundle. The look mirrors the landing page #site-content block
   and the OSD/VHS menu (blue navigation channel, amber section keyword). One source here,
   linked from every content page. */

:root { color-scheme: dark; --osd-blue: #3da8ff; --osd-navy: #04203f; }
* { box-sizing: border-box; }
body {
  margin: 0; background: #0b0e13; color: #c2ccdb;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.62; font-size: 16px;
}
a { color: var(--osd-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Top navigation bar shared across every content page. */
.site-nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px;
  padding: 12px 22px; background: rgba(11,14,19,0.92);
  backdrop-filter: none; border-bottom: 1px solid rgba(61,168,255,0.28);
}
.site-nav .brand {
  font-family: "Bungee", system-ui, sans-serif; font-style: italic;
  font-size: 20px; color: #fff; margin-right: 8px; letter-spacing: 0.01em;
}
.site-nav a {
  font-size: 14px; color: #aeb9c9; letter-spacing: 0.02em; text-decoration: none;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: #fff; }
.site-nav a[aria-current="page"] { border-bottom: 2px solid var(--osd-blue); }
.site-nav .play {
  margin-left: auto; padding: 7px 16px; border-radius: 6px; color: #0b0e13;
  background: linear-gradient(180deg, #ff8a52, #ff5a36); font-weight: 700;
}
.site-nav .play:hover { text-decoration: none; filter: brightness(1.07); }

.wrap { max-width: 880px; margin: 0 auto; padding: 44px 24px 40px; }

h1 {
  font-family: "Bungee", system-ui, sans-serif; font-style: italic;
  font-size: clamp(30px, 5vw, 48px); line-height: 1.0; color: #fff; margin: 0 0 6px;
}
.lead { font-size: clamp(16px, 2.2vw, 20px); color: #e8edf4; margin: 0 0 8px; }
.tag { color: var(--osd-blue); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 13px; margin: 0 0 4px; }

section { margin-top: 38px; }
h2 {
  font-size: clamp(20px, 3vw, 26px); color: #fff; margin: 0 0 14px;
  padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.10);
}
h2 .k { color: #ffae3b; }
h3 { font-size: 18px; color: #e8edf4; margin: 22px 0 8px; }
p { margin: 0 0 14px; }

ul, ol { margin: 0 0 14px; padding-left: 0; list-style: none; }
li { position: relative; padding-left: 22px; margin-bottom: 10px; }
ul li::before { content: "\25B8"; position: absolute; left: 0; color: var(--osd-blue); }
ol { counter-reset: step; }
ol li { counter-increment: step; }
ol li::before { content: counter(step); position: absolute; left: 0; color: var(--osd-blue); font-weight: 700; }
li b, strong { color: #e8edf4; }

.faq dt { color: #e8edf4; font-weight: 600; margin-top: 18px; }
.faq dd { margin: 4px 0 0; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 22px 0 4px; }
.cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 8px; border: 0; cursor: pointer;
  font: 700 16px/1 system-ui, sans-serif; letter-spacing: 0.04em;
  color: #0b0e13; background: linear-gradient(180deg, #ff8a52, #ff5a36);
  box-shadow: 0 6px 18px rgba(255,90,60,0.35);
}
.cta:hover { text-decoration: none; filter: brightness(1.06); }
.cta-ghost { color: #cfe6ff; background: transparent; border: 1px solid rgba(61,168,255,0.55); box-shadow: none; }
.cta-ghost:hover { color: #fff; background: rgba(61,168,255,0.08); }

footer {
  margin-top: 52px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.10);
  display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center;
  font-size: 14px; color: #7d8aa0;
}
footer nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
footer .copy { margin-left: auto; }

/* Patch-note list on the generated news page (scripts/gen-news.mjs -> public/news.html).
   Tag colors match the in-game legend (src/changelog.ts TAG_META). */
.note-day { margin-top: 30px; }
.note-day h2 { font-size: 16px; color: #aeb9c9; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 6px; }
.notes li { padding-left: 0; margin-bottom: 8px; }
.notes li::before { content: none; }
.note-tag {
  display: inline-block; min-width: 40px; text-align: center; vertical-align: 1px;
  margin-right: 9px; padding: 1px 7px 2px; border-radius: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
.note-tag.new { color: #4aa0ff; background: rgba(74,160,255,0.13); }
.note-tag.fix { color: #4fd07a; background: rgba(79,208,122,0.13); }
.note-tag.misc { color: #ffb24a; background: rgba(255,178,74,0.13); }
.notes .major { font-size: 18px; color: #fff; font-weight: 600; }

/* "Bring my settings across" opt-in under the download buttons (public/download.html). Hidden by
   default; the page's script reveals it only when this browser actually has settings to carry. */
.opt {
  display: flex; align-items: flex-start; gap: 9px; margin: 12px 0 2px;
  max-width: 620px; font-size: 14px; line-height: 1.5; color: #aeb9c9; cursor: pointer;
}
.opt[hidden] { display: none; }
.opt input { margin-top: 3px; accent-color: #3da8ff; flex: none; }
.opt:hover { color: #cfe6ff; }
.opt-done { font-size: 13px; color: #4fd07a; }
.opt-done[hidden] { display: none; }
.opt-done b { color: #cfe6ff; font-weight: 600; }

@font-face { font-family: "Bungee"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/bungee-latin-400-normal.woff2") format("woff2"); }