/* Original anime crossover illustration shared by the directory, hub and calculator. */
.game-theme--union-arena {
  --union-arena-hero-art: var(
    --tev-art-union-arena-energy-clash-hero,
    url("/images/other-games/union-arena-energy-clash-hero.webp")
  );
  --other-accent: #ffa978;
  --other-accent-strong: #ffcaab;
  --other-accent-rgb: 255, 169, 120;
  --other-link: #ffcaab;
  --other-focus: #ffe398;
  --other-bg: #100d12;
  --other-panel-solid: #1a1720;
  --other-surface: rgba(26, 23, 32, 0.94);
  --other-surface-strong: #24202a;
  --other-text: #f4f7fb;
  --other-muted: #c1cad7;
  --other-control-background: #17131c;
  --other-control-border: #e49a74;
  --other-button-background: #ffcaab;
  --other-button-foreground: #1a1720;
  --other-chip-background: #2a1b1c;
  --other-chip-foreground: #ffcaab;
  --other-chip-border: #e49a74;
  --other-display-font: Inter, ui-sans-serif, system-ui, sans-serif;
  --other-hero-background:
    linear-gradient(90deg, #100d12f5 0%, #100d12e6 42%, #100d1252 100%),
    var(--union-arena-hero-art) 68% center / cover no-repeat;
  --other-directory-card-background:
    linear-gradient(180deg, #100d1200 0 235px, #100d12 275px),
    var(--union-arena-hero-art) 68% top / auto 275px no-repeat, #100d12;
  --other-directory-card-motif: none;
  --other-hero-motif: none;
  --other-hero-decoration: none;
}

/* Give the character artwork its own space, as on the adjacent Palworld card. */
.other-game-card.game-theme--union-arena {
  padding-top: 285px;
}

.game-theme--union-arena :is(.other-hero, .other-calc-hero)::before,
.game-theme--union-arena :is(.other-hero, .other-calc-hero)::after {
  display: none;
}

@media (max-width: 720px) {
  .game-theme--union-arena {
    --other-hero-background:
      linear-gradient(90deg, #100d12ed 0%, #100d12cc 55%, #100d12a6 100%),
      var(--union-arena-hero-art) 68% center / cover no-repeat;
  }
}

/* Generated responsive artwork: npm run optimize:images. */
@media (max-width: 720px) {
  @supports (
    background-image: image-set(
        url("/images/other-games/union-arena-energy-clash-hero.webp") 1x
      )
  ) {
    :root {
      --tev-art-union-arena-energy-clash-hero: image-set(
        url("/images/responsive/union-arena-energy-clash-hero-640.webp") 1x,
        url("/images/responsive/union-arena-energy-clash-hero-1280.webp") 2x,
        url("/images/other-games/union-arena-energy-clash-hero.webp") 3x
      );
    }
  }
}