/* Theme chooser */
.panel#themes { box-sizing: border-box; }
.theme-heading {
  margin: 1rem 0 0.5rem;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.theme-heading:first-of-type { margin-top: 0; }
.theme-options { display: flex; flex-direction: column; gap: 0.5rem; }
.theme-options .btn { width: 100%; }
.theme-options .btn[aria-pressed="true"] { background: var(--head); color: var(--on-accent); font-weight: 600; }

/* Snake skins and Galaxy swatch */
.skin-options {
  display: grid;
  gap: 0.5rem;
}
.skin-option.btn {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.625rem 0.75rem;
  text-align: left;
}
.skin-option[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px var(--head);
}
.skin-option[hidden] {
  display: none;
}
.skin-swatch {
  width: 3.5rem;
  height: 1.6rem;
  border-radius: 999px;
}
.skin-swatch-default {
  background: linear-gradient(90deg, var(--snake), var(--head));
}
.skin-swatch-galaxy {
  background:
    radial-gradient(circle at 22% 30%, #e5efff 0 0.5px, transparent 1px),
    radial-gradient(circle at 72% 65%, #fff0d8 0 0.7px, transparent 1.2px),
    radial-gradient(circle at 46% 72%, #cfdbff 0 0.4px, transparent 0.9px),
    radial-gradient(ellipse at 44% 52%, #eee0d5 0%, #9b8dbb 9%, transparent 35%),
    radial-gradient(ellipse at 70% 30%, #714782 0%, transparent 45%),
    radial-gradient(ellipse at 22% 65%, #344d98 0%, transparent 45%),
    linear-gradient(110deg, #080d24, #1b204c, #241237, #090f2c);
  background-size: 180% 140%;
  box-shadow: 0 0 0.6rem rgb(128 115 220 / 0.3);
  animation: galaxy-swatch-scroll 8s ease-in-out infinite alternate;
}
.skin-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
@keyframes galaxy-swatch-scroll {
  to { background-position: 100% 65%; }
}
@media (prefers-reduced-motion: reduce) {
  .skin-swatch-galaxy { animation: none; }
}