/* Fera Excita OS — World Gate Icon System V4 CSS */

:root {
  --wg-steel-1: #eef3fb;
  --wg-steel-2: #8d96a3;
  --wg-steel-3: #232a34;

  --wg-gold-1: #fff1bb;
  --wg-gold-2: #d6b264;
  --wg-gold-3: #7e5a1d;

  --wg-blue-1: #dff3ff;
  --wg-blue-2: #76b6e8;
  --wg-blue-3: #24435f;

  --wg-ember-1: #ffbc62;
  --wg-ember-2: #d96f22;

  --wg-idle-stroke: rgba(255,255,255,.22);
  --wg-idle-fill: rgba(255,255,255,.06);
  --wg-active-glow: rgba(214,178,100,.30);
  --wg-active-ring: rgba(214,178,100,.48);
}

.world-card-icon-shell {
  width: 42px;
  height: 42px;
  min-width: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.06), transparent 56%),
    rgba(255,255,255,.025);
  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.world-gate-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--wg-steel-2);
}

.world-gate-icon svg,
.world-gate-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.world-gate-icon.is-idle {
  opacity: .86;
  filter: saturate(.72);
}

.world-gate-icon.is-active {
  opacity: 1;
  filter:
    drop-shadow(0 0 8px var(--wg-active-glow))
    drop-shadow(0 0 18px rgba(214,178,100,.12));
}

.world-card.active .world-card-icon-shell,
.world-card.is-active .world-card-icon-shell,
.world-card[aria-current="true"] .world-card-icon-shell {
  border-color: rgba(214,178,100,.34);
  background:
    radial-gradient(circle at 50% 45%, rgba(214,178,100,.18), transparent 58%),
    linear-gradient(180deg, rgba(214,178,100,.08), rgba(255,255,255,.025));
  box-shadow:
    0 0 0 1px rgba(214,178,100,.10) inset,
    0 0 20px rgba(214,178,100,.14);
}

.world-card.active .world-card-title,
.world-card.is-active .world-card-title,
.world-card[aria-current="true"] .world-card-title {
  color: #f0d48c;
}

.world-gate-icon.variant-large {
  width: 64px;
  height: 64px;
}

.world-gate-icon.variant-card {
  width: 34px;
  height: 34px;
}

.world-gate-icon.variant-chip {
  width: 28px;
  height: 28px;
}