/* Standardized across every page (index/archive/frame-analyzer/leonida-map/
   lore) — each page's own HTML carries an identical copy of this markup
   since js/router.js swaps #page-root's innerHTML wholesale on navigation
   (see router.js's top comment), so the footer isn't shared/persistent
   the way the navbar is. Just two things now — logo, then the disclaimer
   line, centered together as one group — since the X/Telegram social
   links were removed outright rather than left as unfinished `href="#"`
   placeholders.

   Centering the group (rather than spreading it edge-to-edge) is also
   what keeps padding tight on every side: js/player.js's persistent mini
   player (css/player.css) is `position: fixed` at the true viewport
   bottom-LEFT on every page (z-index 950, painting over anything under
   it), and scrolled all the way down this footer's own bottom edge IS
   the viewport bottom. True centering only clears that corner once the
   viewport is wide enough that half the (fixed-width) group plus the
   player's own ~308px footprint fits within half the viewport — in
   practice, roughly 1200px+. Below that it doesn't, confirmed by testing
   (the logo's left edge lands inside the player at both 700px and
   900px) — handled by the "squeezed" media query below, between the
   mobile stack and the point where plain centering becomes safe on its
   own. */
.site-footer {
  background: var(--bg-deep);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: var(--space-2) var(--space-2) var(--space-3);
}

.site-footer__top {
  width: var(--container);
  margin-inline: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}

/* The "squeezed" range: wide enough to keep logo + disclaimer on one row
   (the mobile stack below starts at 640px), but not wide enough for that
   row to center itself clear of .s4s-player (safe again above ~1200px —
   see the comment on .site-footer above). Left-packed after a reserved
   gap instead of centered, so the row is guaranteed to start to the
   right of the player regardless of how much room .site-footer__top
   actually has. */
@media (min-width: 641px) and (max-width: 1199px) {
  .site-footer__top { justify-content: flex-start; padding-left: 20rem; }
}

/* replaces the old "$S4S" text ticker — height picked to roughly match
   that text's prior visual weight (it was font-size: 1.6rem) */
.site-footer__logo {
  height: 1.6rem;
  width: auto;
  flex-shrink: 0;
  display: block;
}

.site-footer__disclaimer {
  text-align: center;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--muted-dim);
  margin: 0;
}

/* Narrow enough that logo + disclaimer stack instead of sharing a row —
   still centered as a group either way. Centering doesn't clear
   .s4s-player here the way it does at wider widths: the group is still
   horizontally centered on the *page*, but .s4s-player's own <480px rule
   makes it ~71% of a 390px-wide viewport, wide enough to reach the
   center regardless. Confirmed by testing. The taller padding-bottom is
   scoped to just this breakpoint rather than applied everywhere, since
   only here is it actually load-bearing. */
@media (max-width: 640px) {
  .site-footer { padding-bottom: 5.5rem; }
  .site-footer__top { flex-direction: column; text-align: center; }
}