/* MeshWars: styles for the standalone /about page (frontend/about.html).
   Matches the dark theme shared with join.css -- self-contained, no
   external fonts, libraries, or CDN assets. */

* { box-sizing: border-box; }

/* Type scales modestly with the viewport instead of being one fixed
   size everywhere -- subtle (15px-17px base), not the enormous text a
   naive vw-only scale would produce on a large monitor. Site chrome
   (.mw-nav, further down) stays in px throughout and is unaffected --
   it needs to render identically on every page regardless of this
   page's root font-size. */
html {
  font-size: clamp(15px, 0.35vw + 14px, 17px);
}

body {
  margin: 0;
  background: var(--mw-page);
  color: var(--mw-text-1);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.landing-wrap {
  /* Fluid: grows with the viewport (block default width is already
     100% of the available space) up to a real reading-page maximum,
     rather than a fixed narrow column. On a phone this is just 100%
     minus the 16px side padding below -- effectively full width with
     small gutters. */
  max-width: 1160px;
  margin: 0 auto;
  padding: calc(var(--mw-nav-h) + 16px) 16px 64px;
}

/* ---- hero --------------------------------------------------------------
   The page's one hero moment: nav mark stays a small wordmark, this is
   the full lockup, shown once, centered, over the topographic texture
   plate from the brand pack (darkened so the lockup and tagline stay
   legible). If the texture is ever removed, the gradient fallback
   below still gives the band its own presence rather than resting on
   flat page background. */
.landing-hero {
  position: relative;
  text-align: center;
  padding: 48px 20px 40px;
  margin-bottom: 28px;
  border: 1px solid var(--mw-line);
  border-radius: 12px;
  background-color: var(--mw-page);
  background-image:
    var(--mw-hero-scrim),
    url("/static/assets/texture/meshwars-topo.webp");
  background-size: cover;
  background-position: center;
}

/* A background rather than an <img>, so the lockup follows --mw-logo the
   way the crest follows --mw-crest. The aspect ratio is stated here
   because a background carries no intrinsic size: both artworks are
   1010x320, so the box reserves its space before either loads and the
   hero never jumps. The element keeps role="img" and a label, since a
   background has no alt text of its own. */
.landing-hero-logo {
  display: block;
  width: min(640px, 100%);
  aspect-ratio: 1010 / 320;
  margin: 0 auto;
  background-image: var(--mw-logo);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* ---- live numbers band --------------------------------------------------
   Real-time figures fetched by about.js from the existing /api/mc/scores
   and /api/mc/players endpoints. Every value starts as an em dash in the
   markup itself, so with JS disabled -- or if either fetch fails -- the
   band still renders cleanly with dashes instead of an error or a
   layout break. This is deliberately a flat row of labeled numbers, not
   another grey panel, so it reads as a live status strip under the hero
   rather than one more section of text. */
.landing-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 28px;
}

.landing-stat {
  flex: 1 1 160px;
  max-width: 220px;
  text-align: center;
  background: var(--mw-panel);
  border: 1px solid var(--mw-line);
  border-radius: 8px;
  padding: 14px 12px;
}

.landing-stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--mw-gold-light);
  line-height: 1.2;
}

.landing-stat-label {
  display: block;
  margin-top: 4px;
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mw-text-5);
}

/* ---- panels ------------------------------------------------------------ */
.landing-panel {
  background: var(--mw-panel);
  border: 1px solid var(--mw-line);
  border-radius: 8px;
  padding: 20px 22px;
  margin-bottom: 24px;
}

.landing-panel-title {
  font-weight: 800;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mw-gold-light);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--mw-gold);
}

.landing-panel p {
  margin: 0 0 10px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--mw-text-2);
}
.landing-panel p:last-child { margin-bottom: 0; }

.landing-panel p a {
  color: var(--mw-accent);
  font-weight: 700;
  text-decoration: none;
}
.landing-panel p a:hover { text-decoration: underline; }

.landing-list {
  margin: 0;
  padding-left: 20px;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--mw-text-2);
}
.landing-list li { margin-bottom: 8px; }
.landing-list li:last-child { margin-bottom: 0; }

/* ---- team chips ----------------------------------------------------------
   The seven map team colours, read directly from frontend/mc.js's
   TEAM_COLORS (not redefined here) and passed in per-chip via the
   --chip-color custom property on each .team-chip element in the
   markup. This is the game's most visually distinctive feature and
   previously only appeared as a line of body text -- now it gets a
   dedicated, glanceable row. */
.team-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.team-chip {
  --chip-color: var(--mw-text-6);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #141414;
  border: 1px solid var(--chip-color);
  border-radius: 999px;
  padding: 6px 14px 6px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--chip-color);
}

.team-chip::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--chip-color);
  box-shadow: 0 0 6px var(--chip-color);
}

/* ---- scoring sequence ----------------------------------------------------
   "How scoring works" is an <ol> in the markup (order is meaningful --
   it reads as how the game works, step by step) styled as a numbered
   sequence with a visible numeral badge per step rather than a plain
   bullet, with more breathing room between steps than the flat
   .landing-list rhythm used elsewhere. */
.landing-scoring {
  list-style: none;
  counter-reset: landing-scoring;
  padding-left: 0;
}
.landing-scoring li {
  counter-increment: landing-scoring;
  position: relative;
  padding-left: 40px;
  margin-bottom: 16px;
}
.landing-scoring li:last-child { margin-bottom: 0; }
.landing-scoring li::before {
  content: counter(landing-scoring);
  position: absolute;
  left: 0;
  top: -1px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--mw-page);
  border: 1px solid var(--mw-gold);
  color: var(--mw-gold-light);
  font-size: 0.75rem;
  font-weight: 800;
}

/* ---- protocol cards ----------------------------------------------------- */
.protocol-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.protocol-card {
  background: #141414;
  border: 1px solid var(--mw-raised);
  border-radius: 6px;
  padding: 12px 14px;
}

/* MeshCore is the live protocol -- a friendly-green border and a
   filled "Live" badge give it visual weight the pending card doesn't
   get. Meshtastic is dimmed and dashed, reading as "planned" at a
   glance before a visitor reads a word of the copy. */
.protocol-card-live {
  border-color: var(--mw-friendly);
  background: #12190f;
}

.protocol-card-pending {
  border-style: dashed;
  opacity: 0.82;
}

.protocol-card-title {
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--mw-accent);
  margin-bottom: 6px;
}

.protocol-card p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--mw-text-3);
}

.protocol-live-badge {
  display: inline-block;
  background: var(--mw-friendly);
  color: #d8f0c8;
  border: 1px solid #4a7a38;
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 4px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* "Coming soon" badge on the Meshtastic protocol card -- shows the
   option is planned rather than hiding it, while making clear it
   isn't open yet. Same treatment as join.css's .protocol-badge on the
   /join protocol picker, kept in sync wording-wise. */
.protocol-badge {
  display: inline-block;
  background: var(--mw-accent-wash);
  color: var(--mw-accent);
  border: 1px solid var(--mw-accent-wash-line);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 4px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* ---- join steps ----------------------------------------------------------- */
.landing-steps {
  margin: 0 0 12px;
  padding-left: 20px;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--mw-text-2);
}
.landing-steps li { margin-bottom: 6px; }
.landing-steps li:last-child { margin-bottom: 0; }

.landing-steps a {
  color: var(--mw-accent);
}

/* Nested numbered list for the MeshMapper connection sub-steps inside
   "How to join" step 4 -- same list styling as join.css's .join-steps
   so the instructions read identically whichever page a player is on. */
.landing-substeps {
  margin: 8px 0;
  padding-left: 20px;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--mw-text-2);
}
.landing-substeps li { margin-bottom: 8px; }
.landing-substeps li:last-child { margin-bottom: 0; }
.landing-substeps code {
  background: var(--mw-page);
  border: 1px solid var(--mw-line);
  border-radius: 3px;
  padding: 1px 4px;
}

/* The one step people actually miss (switching Custom API Endpoint on)
   -- everything else can be set up perfectly and nothing is sent while
   this stays off, so it gets real visual weight instead of blending in
   as list item number four. */
.landing-step-critical {
  background: #241c0a;
  border: 1px solid var(--mw-accent);
  border-radius: 4px;
  padding: 6px 8px;
  margin-left: -8px;
  color: var(--mw-gold-light);
}

/* A clear-box warning, distinct from the smaller inline
   .landing-warnings text below -- used for the "do not paste the
   meshmapper:// link into the URL field" caution, which needs to stop
   the eye rather than blend into the surrounding paragraphs. Same
   treatment as join.css's .join-warning-box. */
.landing-warning-box {
  background: var(--mw-accent-deep);
  border: 1px solid var(--mw-hostile);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 10px 0 4px;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #f0c0a8;
}
.landing-warning-box strong {
  display: block;
  color: #ffb088;
  margin-bottom: 2px;
}

.landing-warnings {
  background: #141414;
  border: 1px solid var(--mw-raised);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 14px;
}
.landing-warnings p {
  margin: 0 0 6px;
  font-size: 0.75rem;
  color: var(--mw-text-3);
}
.landing-warnings p:last-child { margin-bottom: 0; }

.landing-join-cta {
  display: block;
  text-align: center;
  background: var(--mw-raised);
  color: var(--mw-accent);
  border: 1px solid var(--mw-line-strong);
  border-radius: 4px;
  padding: 10px;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}
.landing-join-cta:hover { background: var(--mw-line); }

/* ---- links list ----------------------------------------------------------- */
.landing-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.landing-links li {
  margin-bottom: 10px;
}
.landing-links li:last-child { margin-bottom: 0; }

.landing-links a {
  color: var(--mw-accent);
  font-weight: 700;
  font-size: 0.875rem;
  text-decoration: none;
}
.landing-links a:hover { text-decoration: underline; }

.landing-link-desc {
  display: block;
  color: var(--mw-text-5);
  font-size: 0.75rem;
  margin-top: 2px;
}

/* ---- wide-screen layout -------------------------------------------------
   Above this breakpoint the page has room for two columns, so it reads
   as a page rather than one long strip. CSS multicol rather than a grid:
   the six .landing-panel sections vary a lot in height (a one-paragraph
   "Where it's played" next to the long "How scoring works" list), and a
   two-column grid pairs them up by index -- row height is forced to the
   taller of each pair, leaving a large dead gap under the shorter one.
   Multicol instead flows content down the first column and only spills
   into the second once the first is full (auto-balanced), so short and
   long sections don't leave gaps around each other. break-inside: avoid
   keeps a single section from being split across the column gap. The
   header and the live-numbers band use column-span: all to sit above
   both columns rather than being flowed as multicol content themselves.
   Collapsing back below the breakpoint returns to a plain single column
   in DOM order, so the reading order is unaffected either way. */
@media (min-width: 900px) {
  .landing-wrap {
    column-count: 2;
    column-gap: 28px;
  }
  .landing-header {
    column-span: all;
  }
  .landing-stats {
    column-span: all;
  }
  .landing-panel {
    break-inside: avoid;
  }
}

/* -------------------------------------------------------------------------
/* -------------------------------------------------------------------------
   Site nav bar (Map / About / Join). Fixed, full width, across the very
   top of every page (frontend/index.html, about.html, join.html) --
   wordmark on the left, page links on the right, current page marked
   with .active. Identical declarations duplicated in coverage.css /
   landing.css / join.css (the same per-page duplication pattern .mw-nav
   already used before this) since the three pages never share a
   stylesheet. --mw-nav-h is read by each page's own layout rules so
   content starts exactly at the bar's bottom edge with no gap or
   overlap.
   ------------------------------------------------------------------------- */
:root {
  --mw-nav-h: 48px;
}
@media (max-width: 600px) {
  :root { --mw-nav-h: 40px; }
}

.mw-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--mw-nav-h);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  background: var(--mw-panel);
  border-bottom: 1px solid var(--mw-line);
  box-sizing: border-box;
}
.mw-nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mw-accent);
  text-decoration: none;
  white-space: nowrap;
}
/* A background rather than an <img src>, so the mark follows
   --mw-crest the way every colour follows its token. The element keeps
   an aria-label and role="img" since a background carries no alternative
   text of its own. */
.mw-nav-crest {
  display: block;
  height: 28px;
  width: 28px;
  flex: none;
  background-image: var(--mw-crest);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.mw-nav-links {
  display: flex;
  gap: 4px;
}
.mw-nav-links a {
  padding: 6px 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mw-text-5);
  text-decoration: none;
  border: 1px solid var(--mw-line);
  border-radius: 4px;
  background: var(--mw-panel);
  white-space: nowrap;
}
.mw-nav-links a:hover { background: var(--mw-raised); color: var(--mw-accent); }
.mw-nav-links a.active { color: var(--mw-accent); border-color: var(--mw-accent); }

/* GitHub mark: deliberately understated per the owner ("faded into the
   background so its visible but not prominent") -- low opacity at rest,
   full opacity on hover/focus. Lives inside .mw-nav-links (not a third
   flex child of .mw-nav) so the existing brand/links space-between
   layout is untouched -- it's just one more item in the links row. */
.mw-nav-github {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  color: var(--mw-text-5);
  opacity: 0.35;
  text-decoration: none;
  border-radius: 4px;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.mw-nav-github svg { display: block; }

/* The skin switch, sitting quietly beside the GitHub mark and styled to
   match it: this is a preference, not a feature, and it should not
   compete with the page links for attention. The half-filled circle is
   the conventional glyph and needs no label to read as "appearance".
   It is a <button> rather than a link because it changes the page you
   are on rather than taking you somewhere. */
.mw-theme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--mw-text-5);
  opacity: 0.35;
  border-radius: 4px;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.mw-theme-btn svg { display: block; }
.mw-theme-btn:hover,
.mw-theme-btn:focus-visible {
  opacity: 1;
  color: var(--mw-accent);
}
.mw-theme-btn[aria-pressed="true"] {
  opacity: 0.85;
  color: var(--mw-accent);
}

@media (prefers-reduced-motion: reduce) {
  .mw-nav-github, .mw-theme-btn { transition: none; }
}
.mw-nav-github:hover,
.mw-nav-github:focus-visible {
  opacity: 1;
  color: var(--mw-accent);
}

@media (max-width: 600px) {
  .mw-nav { padding: 0 8px; gap: 6px; }
  .mw-nav-brand { font-size: 12px; gap: 6px; }
  .mw-nav-crest { height: 22px; }
  .mw-nav-links { gap: 3px; }
  .mw-nav-links a { padding: 4px 6px; font-size: 10px; }
  .mw-nav-github { padding: 4px; }
  .mw-nav-github svg { width: 14px; height: 14px; }
}

@media (max-width: 480px) {
  .landing-hero {
    padding: 36px 16px 30px;
  }
}

/* A plain bulleted list inside a panel -- the streak table and the
   monthly honors on /about. Separate from .landing-list, which is the
   numbered scoring rules and carries its own counter styling; this one
   is just prose in bullets and matches .landing-panel p's size and
   colour so a list does not read as a different voice from the
   paragraph above it. */
.landing-plain {
  margin: 0 0 10px;
  padding-left: 20px;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--mw-text-2);
}

.landing-plain li { margin-bottom: 4px; }
.landing-plain li:last-child { margin-bottom: 0; }
.landing-plain strong { color: var(--mw-gold-light); }

/* A quiet line at the very foot of /about, pointing at the API docs.
   Not a panel and not in the nav: it is for the few people who want to
   build something, and it should read as a footnote to everyone else. */
.landing-footnote {
  margin: 8px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--mw-line);
  color: var(--mw-text-6);
  font-size: 0.8125rem;
  line-height: 1.55;
}

.landing-footnote a { color: var(--mw-gold); font-weight: 600; text-decoration: none; }
.landing-footnote a:hover { text-decoration: underline; }

@media (min-width: 900px) {
  /* Spans both columns, so it sits under the whole page rather than
     landing at the bottom of whichever column it flowed into. */
  .landing-footnote { column-span: all; }
}