.game-tile.game-tile--mark{
  --game-accent:#8c98aa;
  position:relative;
  overflow:hidden;
  color:var(--game-accent);
  background:var(--card-soft);
  border-color:var(--line);
  text-transform:none;
  isolation:isolate;
}

@supports (background:color-mix(in srgb, red 10%, black)){
  .game-tile.game-tile--mark{
    background:color-mix(in srgb,var(--game-accent) 12%,var(--card-soft));
    border-color:color-mix(in srgb,var(--game-accent) 34%,var(--line));
  }
}

.game-tile--mark::before{
  content:"";
  position:absolute;
  inset:5px;
  z-index:-1;
  border:1px solid currentColor;
  border-radius:inherit;
  opacity:.08;
}

.game-mark{
  width:60%;
  height:60%;
  display:block;
  overflow:visible;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.game-mark--brand{
  background:currentColor;
  -webkit-mask-position:center;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-size:contain;
  mask-position:center;
  mask-repeat:no-repeat;
  mask-size:contain;
}

.game-mark--counter-strike{
  -webkit-mask-image:url("/assets/game-logos/counter-strike.svg");
  mask-image:url("/assets/game-logos/counter-strike.svg");
}

.game-mark--dota-2{
  -webkit-mask-image:url("/assets/game-logos/dota-2.svg");
  mask-image:url("/assets/game-logos/dota-2.svg");
}

.game-mark--league-of-legends{
  -webkit-mask-image:url("/assets/game-logos/league-of-legends.svg");
  mask-image:url("/assets/game-logos/league-of-legends.svg");
}

.game-mark--valorant{
  -webkit-mask-image:url("/assets/game-logos/valorant.svg");
  mask-image:url("/assets/game-logos/valorant.svg");
}

.game-mark--image{
  width:72%;
  height:72%;
  border-radius:4px;
  object-fit:contain;
}

.game-mark__fill{
  fill:currentColor;
  stroke:none;
}

.game-tile-lg .game-mark,
.pub-game-choice .game-mark,
.pub-game-hero-top .game-mark{
  width:64%;
  height:64%;
}

.game-tile-lg .game-mark--image,
.pub-game-choice .game-mark--image,
.pub-game-hero-top .game-mark--image{
  width:74%;
  height:74%;
}

@media (prefers-reduced-motion:no-preference){
  a:hover > .game-tile--mark .game-mark,
  button:hover > .game-tile--mark .game-mark{
    transform:scale(1.06);
  }
  .game-mark{transition:transform 180ms ease}
}