/**
 * OGame Utilities — shared theme picker
 * Segmented 3-state control: Dark / Light / Neutral
 * Mount on any element with [data-site-theme]
 */
.site-theme {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.site-theme__group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  border: 1px solid var(--theme-picker-border, rgba(0, 210, 255, 0.28));
  background: var(--theme-picker-bg, rgba(0, 0, 0, 0.35));
  box-shadow: var(--theme-picker-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.06));
  min-height: 40px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.site-theme__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--theme-picker-fg, #c9d1d9);
  border-radius: 9px;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  font-family: inherit;
}

.site-theme__btn:hover {
  background: var(--theme-picker-hover, rgba(0, 210, 255, 0.10));
  color: var(--theme-picker-fg-strong, #ffffff);
}

.site-theme__btn:focus-visible {
  outline: 2px solid var(--theme-picker-accent, #00d2ff);
  outline-offset: 2px;
}

.site-theme__btn.is-active {
  background: var(--theme-picker-active-bg, rgba(0, 210, 255, 0.18));
  color: var(--theme-picker-accent, #00d2ff);
  box-shadow: 0 0 0 1px var(--theme-picker-active-border, rgba(0, 210, 255, 0.45)) inset,
              0 2px 8px var(--theme-picker-active-glow, rgba(0, 210, 255, 0.18));
}

.site-theme__btn i {
  pointer-events: none;
}

/* Theme-specific picker palette tweaks */
:root[data-theme="light"] {
  --theme-picker-border: rgba(15, 23, 42, 0.18);
  --theme-picker-bg: rgba(247, 249, 252, 0.92);
  --theme-picker-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  --theme-picker-fg: #475569;
  --theme-picker-fg-strong: #0f172a;
  --theme-picker-hover: rgba(15, 111, 130, 0.10);
  --theme-picker-accent: #0f6f82;
  --theme-picker-active-bg: rgba(15, 111, 130, 0.14);
  --theme-picker-active-border: rgba(15, 111, 130, 0.55);
  --theme-picker-active-glow: rgba(15, 111, 130, 0.18);
}

:root[data-theme="neutral"] {
  --theme-picker-border: rgba(255, 255, 255, 0.12);
  --theme-picker-bg: rgba(22, 21, 18, 0.66);
  --theme-picker-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --theme-picker-fg: #ddd8c7;
  --theme-picker-fg-strong: #fffdf2;
  --theme-picker-hover: rgba(94, 234, 212, 0.10);
  --theme-picker-accent: #5eead4;
  --theme-picker-active-bg: rgba(94, 234, 212, 0.14);
  --theme-picker-active-border: rgba(94, 234, 212, 0.45);
  --theme-picker-active-glow: rgba(94, 234, 212, 0.14);
}

@media (max-width: 480px) {
  .site-theme__group {
    min-height: 38px;
  }
  .site-theme__btn {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }
}