/*
 * Site footer — shared by index.html, how-to-play.html, privacy.html and
 * terms.html. One slim bar: wordmark left, links centre, Facebook right.
 *
 * Colours are written out rather than read from each page's :root so the
 * footer looks the same on every page, whatever tokens that page defines.
 * position + z-index lift it above the fixed body::before backdrop.
 */
.site-footer {
  position: relative;
  z-index: 1;
  margin-top: 24px;
  background: #0D1B3E;
  border-top: 2px solid #CC0000;
  font-family: 'Rajdhani', sans-serif;
}
.site-footer-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
}
.site-footer a { text-decoration: none; transition: color .15s; }
.site-footer a:focus-visible { outline: 2px solid #F5C518; outline-offset: 3px; }

.site-footer-brand {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 24px;
  letter-spacing: 2px;
  line-height: 1;
  color: #FFFFFF;
}
.site-footer-brand span { color: #CC0000; }
.site-footer-brand:hover { color: #FFFFFF; }

.site-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.site-footer-links a,
.site-footer-fb {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.site-footer-links a { color: #b0c0d8; }
.site-footer-links a:hover,
.site-footer-links a[aria-current="page"] { color: #FFFFFF; }

.site-footer-fb { display: inline-flex; align-items: center; gap: 7px; color: #F5C518; }
.site-footer-fb:hover { color: #FFD740; }
.site-footer-fb svg { width: 18px; height: 18px; flex: none; }

@media (max-width: 600px) {
  .site-footer-inner { flex-direction: column; justify-content: center; padding: 20px 16px; gap: 14px; }
}