/* 2026-10-19 global liquid-glass control skin.
   Controls get a translucent, tinted glass fill; image-led cards keep their art
   and receive only a glass rim so planet/ship/item thumbnails stay readable. */
html body button.lg-control {
  --lg-fill: rgba(10, 28, 34, .68);
  -webkit-tap-highlight-color: transparent;
  -webkit-backdrop-filter: blur(20px) saturate(175%);
  backdrop-filter: blur(20px) saturate(175%);
  border-color: color-mix(in srgb, var(--lg-accent, #b9e9f2) 18%, rgba(255, 255, 255, .12));
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .20), transparent 34%) padding-box,
    linear-gradient(315deg, rgba(255, 255, 255, .055), transparent 30%) padding-box,
    linear-gradient(180deg, color-mix(in srgb, var(--lg-fill) 92%, transparent), color-mix(in srgb, var(--lg-fill) 76%, rgba(0, 0, 0, .35))) padding-box;
  color: inherit;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .18),
    0 1px 2px rgba(0, 0, 0, .78);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--lg-accent, #b9e9f2) 12%, rgba(255, 255, 255, .06)),
    inset 0 1px rgba(255, 255, 255, .34),
    inset 0 17px 20px -18px rgba(255, 255, 255, .58),
    inset 0 -3px 7px rgba(0, 0, 0, .40),
    0 5px 14px rgba(0, 0, 0, .38),
    0 0 0 1px rgba(0, 0, 0, .18);
  transition:
    translate .12s ease,
    scale .12s ease,
    filter .18s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}
html body button.lg-control > svg,
html body button.lg-control > img,
html body button.lg-control > span > svg,
html body button.lg-control > span > img {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .68));
}
html body button.lg-control::selection,
html body button.lg-control *::selection { background: color-mix(in srgb, var(--lg-accent, #b9e9f2) 35%, transparent); }

/* Image-led cards: preserve the artwork, add only the glass edge + text depth. */
html body button.lg-card {
  -webkit-tap-highlight-color: transparent;
  outline: 1px solid rgba(190, 245, 255, .12);
  outline-offset: -1px;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .14),
    0 1px 2px rgba(0, 0, 0, .72);
  transition: transform .12s ease, filter .18s ease, outline-color .2s ease;
}
html body button.lg-card:active { scale: .988; filter: brightness(.94); }

/* Tints are derived from each button's own computed colour. */
html body button.lg-control[data-lg-tone="cyan"] { --lg-accent: #6be7ff; }
html body button.lg-control[data-lg-tone="green"] { --lg-accent: #6fe6a0; }
html body button.lg-control[data-lg-tone="gold"] { --lg-accent: #ffc45a; }
html body button.lg-control[data-lg-tone="danger"] { --lg-accent: #ff8074; }
html body button.lg-control[data-lg-tone="neutral"] { --lg-accent: #b9e9f2; }

/* Semantic overrides for the big, recognisable commands. */
html body button.lg-control.primary-action,
html body button.lg-control.primary,
html body button.lg-control.launch,
html body button.lg-control.confirm,
html body button.lg-control.mail-claim-button,
html body button.lg-control.target-locator-button { --lg-accent: #65e8ff; }
html body button.lg-control.alliance-primary-action,
html body button.lg-control.strategic-primary-action,
html body button.lg-control.gem-price,
html body button.lg-control.cash-price { --lg-accent: #ffc45a; }
html body button.lg-control.danger,
html body button.lg-control.mail-battle-delete { --lg-accent: #ff7d72; }

html body button.lg-control:is(.active, .is-active, .selected, .is-selected, .current, [aria-pressed="true"], [aria-selected="true"], [aria-current="page"], [data-active="true"]) {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .24), transparent 34%) padding-box,
    linear-gradient(315deg, rgba(255, 255, 255, .07), transparent 30%) padding-box,
    linear-gradient(180deg, color-mix(in srgb, var(--lg-fill) 88%, #ffffff 12%), color-mix(in srgb, var(--lg-fill) 82%, #000000 18%)) padding-box;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--lg-accent, #b9e9f2) 55%, transparent),
    inset 0 1px rgba(255, 255, 255, .42),
    inset 0 18px 20px -18px rgba(255, 255, 255, .64),
    inset 0 -2px 0 var(--lg-accent, #b9e9f2),
    inset 0 -3px 7px rgba(0, 0, 0, .40),
    0 0 18px color-mix(in srgb, var(--lg-accent, #b9e9f2) 24%, transparent),
    0 5px 14px rgba(0, 0, 0, .38);
  border-color: color-mix(in srgb, var(--lg-accent, #b9e9f2) 52%, rgba(255, 255, 255, .10));
}

@media (hover: hover) {
  html body button.lg-control:hover {
    filter: brightness(1.075) saturate(1.05);
    translate: 0 -1px;
  }
  html body button.lg-card:hover { outline-color: rgba(190, 245, 255, .26); }
}

html body button.lg-control:active {
  translate: 0 1px;
  scale: .982;
  filter: brightness(.93) saturate(.98);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--lg-accent, #b9e9f2) 34%, transparent),
    inset 0 3px 9px rgba(0, 0, 0, .58),
    inset 0 -1px 3px rgba(0, 0, 0, .30),
    0 2px 6px rgba(0, 0, 0, .32);
}

html body button.lg-control:disabled,
html body button.lg-control[aria-disabled="true"] {
  opacity: .48;
  filter: saturate(.35) brightness(.84);
  translate: none !important;
  scale: none !important;
  box-shadow:
    inset 0 0 0 1px rgba(180, 220, 230, .10),
    inset 0 2px 7px rgba(0, 0, 0, .38),
    0 2px 6px rgba(0, 0, 0, .22);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html body button.lg-control:focus-visible,
html body button.lg-control[data-lg-light="true"] { color: #071014; text-shadow: 0 1px 0 rgba(255, 255, 255, .55), 0 1px 2px rgba(255, 255, 255, .18); }
html body button.lg-card:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--lg-accent, #8fefff) 65%, #ffffff);
  outline-offset: 2px;
}

/* Small helper chips and text-only controls would otherwise become too heavy. */
html body button.lg-control.ui-text-button,
html body button.lg-control.ghost-action {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .12), transparent 38%) padding-box,
    linear-gradient(180deg, color-mix(in srgb, var(--lg-fill) 46%, transparent), color-mix(in srgb, var(--lg-fill) 34%, rgba(2, 9, 12, .45))) padding-box;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--lg-accent, #b9e9f2) 18%, transparent),
    inset 0 1px rgba(255, 255, 255, .24),
    inset 0 12px 16px -16px rgba(255, 255, 255, .42),
    0 3px 9px rgba(0, 0, 0, .26);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html body button.lg-control {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, .20), transparent 34%) padding-box,
      linear-gradient(180deg, color-mix(in srgb, var(--lg-accent, #b9e9f2) 12%, #0b1a1f), #050d11) padding-box;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body button.lg-control,
  html body button.lg-card { transition: none !important; }
  html body button.lg-control:hover,
  html body button.lg-control:active,
  html body button.lg-card:active { translate: none !important; scale: none !important; }
}