/* Efeitos reduzidos por escolha do jogador (botão "Efeitos" no topo, ligado por
   effects.js). Espelha, regra por regra, os blocos @media (prefers-reduced-motion)
   de styles.css e home.css: mexeu num, mexa nos outros. */
:root[data-effects="reduced"] *,
:root[data-effects="reduced"] *::before,
:root[data-effects="reduced"] *::after {
  scroll-behavior: auto !important;
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

:root[data-effects="reduced"] .agent-identity.dossier-open::before,
:root[data-effects="reduced"] .agent-identity.dossier-open h1::after,
:root[data-effects="reduced"] .agent-identity.dossier-open > p.muted::after { display: none; }

:root[data-effects="reduced"] body:has(.agent-home)::before { animation: none; transform: none; opacity: .65; }
:root[data-effects="reduced"] body:has(.agent-home)::after { animation: none; transform: rotate(-14deg); opacity: .17; }
:root[data-effects="reduced"] body:has(.agent-home) .brand:hover .brand-mark { transform: none; }
:root[data-effects="reduced"] .agent-home .character-card:hover,
:root[data-effects="reduced"] .agent-home .button:hover,
:root[data-effects="reduced"] .agent-home .button:active { transform: none; }

/* O fundo "Outro Lado" só decora: reduzido, some inteiro (e poupa processamento). */
:root[data-effects="reduced"] .outer-side { display: none; }

/* O botão fica quieto ao lado de "Ameaças": é ajuste, não navegação. */
.effects-toggle {
  flex: none;
  white-space: nowrap;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.effects-toggle:hover:not(:disabled) { color: var(--text); }
.effects-toggle:disabled { cursor: default; opacity: 0.7; }
.effects-toggle:disabled:hover { border-color: var(--border); background: transparent; }
.effects-toggle:focus-visible { outline: 2px solid #f5848d; outline-offset: 3px; }

/* Telas estreitas: o botão desce para uma segunda linha em vez de espremer o nome. */
@media (max-width: 820px) {
  .topbar-nav-group { flex-wrap: wrap; row-gap: 8px; }
}