/* Site footer shared by the home and games pages: brand + link columns, CodeLove network row, bottom bar.
   Same structure as the other CodeLove sites. Uses the page's --line / --fg / --muted / --key tokens. */
.site-footer { border-top: 1px solid var(--line); background: #0c0e12; color: var(--muted); font-size: 0.92rem; }
.site-footer .wrap { padding-block: 56px calc(28px + env(safe-area-inset-bottom, 0px)); }
.site-footer a { color: var(--muted); text-decoration: none; transition: color .15s ease; }
.site-footer a:hover { color: var(--fg); }
.site-footer h3 { margin: 0 0 16px; font: 700 0.75rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sf-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.sf-brand { max-width: 320px; display: grid; gap: 16px; align-content: start; }
.sf-brand .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--fg); font: 800 1.25rem var(--display); }
.sf-brand .brand img { width: 34px; height: 34px; }
.sf-brand p { margin: 0; line-height: 1.6; }
.sf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-chips span { border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; font: 500 0.75rem var(--mono); color: var(--fg); }
.sf-network { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px 48px; }
.sf-network ul { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.sf-codelove { display: block; width: fit-content; }
.sf-codelove img { height: 44px; width: auto; }
.sf-codelove:hover img { opacity: 0.85; }
.sf-bottom { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-size: 0.85rem; }
.sf-bottom p { margin: 0; }
.sf-bottom p { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 4px; }
.heart-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.heart-btn { position: relative; z-index: 1; display: inline-flex; padding: 0 2px; border: 0; background: none; color: var(--muted); cursor: pointer; transition: color .15s ease; }
.heart-btn:hover, .heart-btn.on { color: #ef4444; }
.heart-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.heart-btn.on svg { fill: currentColor; }
.fly-heart { position: absolute; left: 50%; top: 50%; pointer-events: none; animation: fly-up 2s ease-out forwards; }
@keyframes fly-up {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
  50% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1.5) rotate(var(--r)); opacity: 0; }
}
.sf-bottom strong a { color: var(--fg); font-weight: 600; }
.sf-bottom strong a:hover { color: var(--key); }
.sf-legal { margin-top: 14px; font-size: 0.78rem; opacity: 0.75; }
@media (max-width: 860px) {
  .sf-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-brand { grid-column: 1 / -1; }
  .sf-network { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 460px) {
  .sf-bottom { flex-direction: column; }
}