/* Appearance controls and avatar colours shared by the site and game. */
.theme-choices { min-width: 0; margin: 0; padding: 0; border: 0; color: var(--text); }
.theme-choices legend { margin-bottom: 8px; padding: 0; font-size: 12px; font-weight: 650; }
.theme-options { display: flex; gap: 5px; }
.theme-options button { display: flex; flex: 1; align-items: center; justify-content: center; gap: 5px; min-height: 36px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel, var(--card)); color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.theme-options button:hover { border-color: var(--accent); background: var(--head); color: var(--text); }
.theme-options button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft, var(--sky-soft)); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.theme-preview { display: inline-block; flex: none; width: 12px; height: 12px; border: 1px solid currentColor; border-radius: 50%; background: #f5f4f0; }
.theme-preview.dark { background: #14232c; }
.theme-preview.system { background: linear-gradient(90deg, #f5f4f0 50%, #14232c 50%); }
.theme-note { margin: 10px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }

:root {
  --name-moderator: #6a3db8; --name-developer: #c8102e;
  --avatar-blue-bg: #e8edf4; --avatar-blue-fg: #537194;
  --avatar-gold-bg: #f1e8dc; --avatar-gold-fg: #a07d4a;
  --avatar-green-bg: #e3eeea; --avatar-green-fg: #568574;
  --avatar-purple-bg: #ebe6f1; --avatar-purple-fg: #8a70a4;
  --avatar-red-bg: #f2e3e1; --avatar-red-fg: #aa7a76;
  --avatar-teal-bg: #e1ebee; --avatar-teal-fg: #588b95;
}
:root[data-theme="dark"] {
  --name-moderator: #b48cf2; --name-developer: #ff3b55;
  --avatar-blue-bg: #203847; --avatar-blue-fg: #adc8dc;
  --avatar-gold-bg: #3a3021; --avatar-gold-fg: #d8bb8c;
  --avatar-green-bg: #20392f; --avatar-green-fg: #a0cbb8;
  --avatar-purple-bg: #332c40; --avatar-purple-fg: #c3abd9;
  --avatar-red-bg: #3c2b2a; --avatar-red-fg: #dbb2ac;
  --avatar-teal-bg: #20373d; --avatar-teal-fg: #9bc9d1;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
  --name-moderator: #b48cf2; --name-developer: #ff3b55;
  --avatar-blue-bg: #203847; --avatar-blue-fg: #adc8dc;
  --avatar-gold-bg: #3a3021; --avatar-gold-fg: #d8bb8c;
  --avatar-green-bg: #20392f; --avatar-green-fg: #a0cbb8;
  --avatar-purple-bg: #332c40; --avatar-purple-fg: #c3abd9;
  --avatar-red-bg: #3c2b2a; --avatar-red-fg: #dbb2ac;
  --avatar-teal-bg: #20373d; --avatar-teal-fg: #9bc9d1;
  }
}

/* Names of the team: moderators in royal purple, developers in cherry red. */
:root .name-moderator.name-moderator.name-moderator.name-moderator { color: var(--name-moderator); }
:root .name-developer.name-developer.name-developer.name-developer { color: var(--name-developer); }