/* Reusable "your gameplay trains the AI" footer for game pages.
 * Drop the matching <div id="federated-footer"> + script into any
 * experiment page. Inherits the page's --amber/--cyan/--ink-dim
 * tokens — keeps each page in its own visual identity.
 *
 * Renders above the existing page <footer>. Sticky-bottom-ish but
 * inline (not position:fixed) so it doesn't overlap game UI.
 */

#federated-footer {
  margin-top: 28px;
  padding: 14px 18px;
  border: 1px solid var(--line, #232538);
  border-left: 3px solid var(--cyan, #4fe8d6);
  background: rgba(79, 232, 214, 0.04);
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink, #d8dae5);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}

#federated-footer .label {
  font-weight: 600;
  color: var(--cyan, #4fe8d6);
  letter-spacing: 0.02em;
}

#federated-footer .desc {
  color: var(--ink-dim, #7a7e92);
  flex: 1 1 280px;
  min-width: 200px;
}

#federated-footer .desc strong {
  color: var(--ink, #d8dae5);
  font-weight: 600;
}

#federated-footer .links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

#federated-footer a {
  color: var(--amber, #f0b056);
  text-decoration: none;
  border-bottom: 1px dotted var(--amber, #f0b056);
}
#federated-footer a:hover {
  color: var(--amber-bright, #f8c070);
  border-bottom-style: solid;
}

#federated-footer .opt-out {
  color: var(--ink-dim, #7a7e92);
  font-size: 11px;
  border-bottom: none;
}

#federated-footer.disabled {
  border-left-color: var(--ink-dim, #7a7e92);
  background: rgba(122, 126, 146, 0.04);
}
#federated-footer.disabled .label { color: var(--ink-dim, #7a7e92); }

#federated-footer .stat {
  font-variant-numeric: tabular-nums;
  color: var(--cyan, #4fe8d6);
}

@media (max-width: 600px) {
  #federated-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}