@import '~styles/variables'
@import '~styles-lib/mixins'

.-container
	position: relative

.-trophy-card
	elevate-1()
	height: 280px
	position: relative
	overflow: hidden
	cursor: pointer

	&:hover
		elevate-2()

.-trophy-new
	border-color: var(--theme-notice)

.-background
	display: flex
	justify-content: center
	align-items: center

.-bg
	position: absolute
	width: 200%
	height: 200%
	z-index: 1
	transform: rotateZ(30deg)
	background-image: url('../pattern.png')

.-trophy-difficulty-1
	background-color: rgba(248, 198, 143, 0.3)

.-trophy-difficulty-2
	background-color: rgba(207, 207, 207, 0.3)

.-trophy-difficulty-3
	background-color: rgba(255, 207, 39, 0.3)

.-trophy-difficulty-4
	background-color: rgba(176, 205, 217, 0.3)

.-bg-gradient
	position: absolute
	top: 0
	left: 0
	right: 0
	bottom: 0
	z-index: 2
	background: linear-gradient(transparent 0, var(--theme-bg-actual) 40%)

.-content
	position: relative
	z-index: 3

.-title
	width: 100%
	display: inline-block
	text-align: center
	text-overflow()

.-subline
	width: 100%
	text-align: center
	margin-bottom: 10px

	& *
		vertical-align: middle

.-thumbnail
	display: flex
	justify-content: center

	& > *
		width: 100px

.-description
	margin-top: 10px
	text-align: center
	word-break: break-word

.-game-title
	display: block
	text-overflow()
