/* ==========================================================================
   Global Conflict - marketing site stylesheet
   Served from /site.css. EVERY page links this; no page carries its own copy.

   WHY THIS FILE EXISTS: the site was eight HTML pages each holding a private,
   hand-maintained duplicate of the same header/footer CSS. They had already
   drifted (different dropdown widths, different transitions), and a restyle
   meant editing eight files and missing one. One stylesheet, one restyle.

   NO EM DASHES anywhere on this site, in CSS content strings included.
   ========================================================================== */

/* Black Ops One - the game wordmark face, the SAME one the app bundles
   (client/global_conflict/assets/fonts/BlackOpsOne.ttf via GameWordmark).
   SELF-HOSTED on purpose: a Google Fonts <link> puts a third-party request in
   front of the first paint, which is the exact failure that broke the PWA when
   CanvasKit came off gstatic. It is also a DISPLAY face and stays one - the
   wordmark, section headings and buttons only. Body copy stays on the platform
   UI font, which is what keeps small text legible.
   SIL Open Font License; /fonts/OFL.txt ships beside it as the licence requires. */
@font-face {
  font-family: "BlackOps";
  src: url("/fonts/BlackOpsOne.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #0a0a0c;
  --panel: #121317;
  --panel-2: #16181d;
  --line: #24262d;
  --txt: #f2f2f4;
  --muted: #9aa0ab;
  --dim: #5a5e68;
  --red: #b91c1c;
  --red-hi: #dc2626;
  --red-mark: #d32f2f;   /* matches GameWordmark._red in the app exactly */
  --gold: #d4a23a;
  --display: "BlackOps", Impact, "Arial Narrow Bold", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--txt);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.content { max-width: 820px; }

/* ---------- Wordmark ----------------------------------------------------
   GLOBAL over CONFLICT, white over red, red rule beneath. The two lines are
   fitted to the SAME optical width, which is what makes it read as one locked
   mark instead of two headings; "GLOBAL" is the shorter word, so it is tracked
   out rather than set at a matching size. This mirrors GameWordmark in the app
   (which fits each line with a FittedBox) so the site and the splash screen
   show the same mark. Size is driven by one custom property, --mark, so a
   caller sets the scale in one place.
   ----------------------------------------------------------------------- */
.wordmark { --mark: 64px; display: inline-block; text-align: center; line-height: .94; }
.wordmark b {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--mark);
  text-shadow: 0 2px 0 rgba(0,0,0,.85), 0 0 18px rgba(0,0,0,.75);
}
.wordmark .l1 { color: #fff; letter-spacing: .238em; text-indent: .238em; }
.wordmark .l2 { color: var(--red-mark); letter-spacing: .015em; text-indent: .015em; }
.wordmark .rule {
  width: 44%; height: 3px; margin: calc(var(--mark) * .22) auto 0;
  background: var(--red-mark);
}

/* ---------- Header ---------- */
header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10,10,12,0.82); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { font-family: var(--display); letter-spacing: 2px; font-size: 19px; white-space: nowrap; }
.brand span { color: var(--red-hi); }
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a { color: var(--muted); font-size: 14px; font-weight: 600; letter-spacing: .5px; transition: color .15s; }
.nav-links a:hover { color: var(--txt); }
.nav-cta {
  background: var(--red); color: #fff; padding: 9px 18px; border-radius: 8px;
  font-size: 14px; font-weight: 700; letter-spacing: .5px; transition: background .15s;
}
.nav-cta:hover { background: var(--red-hi); color: #fff; }
.dropdown { position: relative; }
.drop-toggle { color: var(--muted); font-size: 14px; font-weight: 600; letter-spacing: .5px; cursor: pointer; transition: color .15s; }
.drop-toggle::after { content: " \25BE"; font-size: 10px; }
.dropdown:hover .drop-toggle { color: var(--txt); }
.dropdown-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 12px; min-width: 190px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px; padding: 6px;
  opacity: 0; visibility: hidden; transition: opacity .15s;
}
.dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; }
.dropdown-menu::before { content: ""; position: absolute; bottom: 100%; left: 0; right: 0; height: 12px; }
.dropdown-menu a {
  display: block; padding: 10px 14px; border-radius: 7px; color: var(--muted);
  font-size: 14px; font-weight: 600; transition: background .15s, color .15s;
}
.dropdown-menu a:hover { background: var(--panel-2); color: var(--txt); }
@media (max-width: 780px) { .nav-links a:not(.nav-cta), .dropdown { display: none; } }

/* ---------- Buttons ---------- */
.cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px;
  border-radius: 10px; font-weight: 700; font-size: 15px; letter-spacing: .5px;
  transition: transform .12s, background .15s, border-color .15s;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--red); color: #fff; box-shadow: 0 8px 24px rgba(185,28,28,0.35); }
.btn-primary:hover { background: var(--red-hi); color: #fff; }
.btn-ghost { background: rgba(18,19,23,.75); color: var(--txt); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: #3a3d46; }

/* ---------- Store badges -------------------------------------------------
   Badge-SHAPED buttons, deliberately NOT the official Google Play / App Store
   artwork. Two reasons and both matter: the game is on neither store yet, so a
   real badge would promise a listing that does not exist; and the badges are
   trademarked assets whose guidelines only permit use when you actually link
   to a live listing. These state the truth instead and are visibly disabled.
   Swap in the official badges the day the listings are live.
   ------------------------------------------------------------------------ */
.badge-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.badge {
  display: inline-flex; align-items: center; gap: 12px;
  min-width: 208px; padding: 10px 20px 10px 16px;
  border: 1px solid #34373f; border-radius: 10px;
  background: rgba(14,15,18,.72);
  cursor: not-allowed; user-select: none;
}
.badge svg { width: 26px; height: 26px; flex: none; fill: #6d727c; }
.badge .txt { text-align: left; line-height: 1.15; }
.badge .top { display: block; font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--dim); }
.badge .name { display: block; font-family: var(--display); font-size: 18px; color: #8b909a; letter-spacing: .5px; }
.badge .soon {
  margin-left: auto; align-self: flex-start;
  font-size: 9px; font-weight: 800; letter-spacing: 1px;
  color: var(--gold); border: 1px solid rgba(212,162,58,.45);
  border-radius: 4px; padding: 2px 5px;
}

/* ---------- Section base ---------- */
section.block { padding: 90px 0; }
.sec-head { text-align: center; margin-bottom: 50px; }
.sec-head h2 { font-family: var(--display); font-size: clamp(28px, 4vw, 42px); letter-spacing: 2px; text-transform: uppercase; }
.sec-head p { color: var(--muted); margin-top: 12px; font-size: 16px; }

/* ---------- Cards ---------- */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 860px) { .grid { grid-template-columns: 1fr; } }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 28px; transition: transform .15s, border-color .15s;
}
.card:hover { transform: translateY(-4px); border-color: #3a3d46; }
.card .tag { color: var(--red-hi); font-size: 12px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
.card h3 { font-size: 20px; margin: 12px 0 8px; font-weight: 800; }
.card p { color: var(--muted); font-size: 15px; }

/* ---------- Interior page chrome (support / legal pages) ---------- */
.page-hero {
  padding: 70px 0 40px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(185,28,28,0.18), transparent 60%);
  border-bottom: 1px solid var(--line);
}
.page-hero .eyebrow { color: var(--gold); font-weight: 700; letter-spacing: 4px; font-size: 12px; text-transform: uppercase; }
.page-hero h1 { font-family: var(--display); font-size: clamp(30px, 6vw, 52px); letter-spacing: 1px; text-transform: uppercase; margin-top: 12px; }
.page-hero p { color: var(--muted); margin-top: 12px; }
main { padding: 56px 0 80px; }
main h2 { font-size: 22px; font-weight: 800; margin: 38px 0 12px; }
main h2:first-of-type { margin-top: 0; }
main h3 { font-size: 17px; font-weight: 800; margin: 24px 0 8px; color: var(--txt); }
main p { color: #c9ccd3; margin-bottom: 14px; }
main ul { color: #c9ccd3; margin: 0 0 16px; padding-left: 22px; }
main li { margin-bottom: 8px; }
main strong { color: var(--txt); }
main a.inline { color: var(--red-hi); text-decoration: underline; text-underline-offset: 2px; }
.back { display: inline-block; margin-bottom: 26px; color: var(--muted); font-size: 14px; font-weight: 600; }
.back:hover { color: var(--txt); }
.updated { color: var(--muted); font-size: 13px; margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line); }

/* ---------- Footer -------------------------------------------------------
   Three stacked rows, matching the reference the user supplied: a single
   centred rule of legal links, then the mark, then the rating and copyright
   line. Every page carries the identical block.
   ------------------------------------------------------------------------ */
footer { border-top: 1px solid var(--line); padding: 46px 0 54px; text-align: center; }
.foot-links {
  display: flex; justify-content: center; align-items: center;
  flex-wrap: wrap; gap: 0 2px;
}
.foot-links a {
  color: var(--muted); font-size: 12px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; padding: 6px 14px;
  transition: color .15s;
}
.foot-links a:hover { color: var(--txt); }
.foot-links .sep { color: #33363d; font-size: 12px; }
@media (max-width: 640px) { .foot-links .sep { display: none; } }
.foot-mark { margin: 34px 0 26px; }
.foot-mark .wordmark { --mark: 26px; opacity: .9; }
.foot-rating {
  display: inline-flex; align-items: center; gap: 12px;
  border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 16px; margin-bottom: 22px; text-align: left;
}
.foot-rating .age {
  font-family: var(--display); font-size: 20px; color: var(--txt);
  border: 2px solid var(--muted); border-radius: 5px; padding: 2px 9px; line-height: 1.1;
}
.foot-rating .why { color: var(--muted); font-size: 11px; line-height: 1.45; max-width: 260px; }
.foot-note { color: var(--dim); font-size: 12px; line-height: 1.7; }
.foot-note a { color: var(--muted); }
.foot-note a:hover { color: var(--txt); }